STYLES Style Documentation

CSS variable reference for the STYLES component. Customize your styles appearance using these variables.

Overview

default - Domain-level design tokens and styles

Component Details

  • Component: domain
  • Version: 1.0
  • Total Variables: 23
  • Variable Groups: 6

How to Use

These variables can be customized through the style customization interface in your application. Each variable controls a specific aspect of the visual design and can be configured to match your brand.

Background Colors

CSS variables for background colors styling in the STYLES component.

--sfs-surface-primary COLOR

Primary surface color for containers and cards

CSS Property: background-color
Default Value: #ffffff
--sfs-surface-secondary COLOR

Secondary surface color for backgrounds

CSS Property: background-color
Default Value: #f8f9fa

Borders

CSS variables for borders styling in the STYLES component.

--sfs-border-radius SIZE

Standard border radius

CSS Property: border-radius
Default Value: 0.375rem
--sfs-border-width SIZE

Standard border width

CSS Property: border-width
Default Value: 1px

Fonts

CSS variables for fonts styling in the STYLES component.

--sfs-font-primary FONT

Primary font family for body text

CSS Property: font-family
Default Value: system-ui, sans-serif
--sfs-font-secondary FONT

Secondary font family for headings

CSS Property: font-family
Default Value: Georgia, 'Times New Roman', serif
--sfs-font-mono FONT

Monospace font family for code

CSS Property: font-family
Default Value: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace

Shadows

CSS variables for shadows styling in the STYLES component.

--sfs-shadow-sm SHADOW

Small shadow for subtle elevation

CSS Property: box-shadow
Default Value: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
--sfs-shadow-md SHADOW

Medium shadow for cards and modals

CSS Property: box-shadow
Default Value: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
--sfs-shadow-lg SHADOW

Large shadow for elevated elements

CSS Property: box-shadow
Default Value: 0 1rem 3rem rgba(0, 0, 0, 0.175)

Spacing

CSS variables for spacing styling in the STYLES component.

--sfs-spacing-xs SIZE

Extra small spacing unit

CSS Property: padding
Default Value: 0.25rem
--sfs-spacing-sm SIZE

Small spacing unit

CSS Property: padding
Default Value: 0.5rem
--sfs-spacing-md SIZE

Medium spacing unit (base)

CSS Property: padding
Default Value: 1rem
--sfs-spacing-lg SIZE

Large spacing unit

CSS Property: padding
Default Value: 1.5rem
--sfs-spacing-xl SIZE

Extra large spacing unit

CSS Property: padding
Default Value: 3rem

Text Colors

CSS variables for text colors styling in the STYLES component.

--sfs-brand-primary COLOR

Primary brand color used across the application

CSS Property: color
Default Value: #0d6efd
--sfs-brand-secondary COLOR

Secondary brand color for supporting elements

CSS Property: color
Default Value: #6c757d
--sfs-text-primary COLOR

Primary text color for main content

CSS Property: color
Default Value: #212529
--sfs-text-secondary COLOR

Secondary text color for supporting content

CSS Property: color
Default Value: #6c757d
--sfs-success COLOR

Success state color

CSS Property: color
Default Value: #28a745
--sfs-warning COLOR

Warning state color

CSS Property: color
Default Value: #ffc107
--sfs-danger COLOR

Danger/error state color

CSS Property: color
Default Value: #dc3545
--sfs-info COLOR

Info state color

CSS Property: color
Default Value: #17a2b8