@getflip/swirl-tokens/dist/less/styles.light.less

Swirl Design System Tokens package with a number of different formats for Web and Mobile.

// Do not edit directly
// Generated on Tue, 11 Nov 2025 09:43:07 GMT

@s-font-size-xs: 0.75rem;
@s-font-size-sm: 0.875rem; // Usually used for labels and captions
@s-font-size-base: 1rem; // Usually used for the body, links and buttons 
@s-font-size-lg: 1.125rem; // Usually used as level 3 headline
@s-font-size-xl: 1.25rem; // Usually used as level 2 headline
@s-font-size-2xl: 1.75rem; // Usually used as main headline
@s-font-weight-normal: 400;
@s-font-weight-medium: 500;
@s-font-weight-semibold: 600;
@s-font-weight-bold: 700;
@s-line-height-xs: 1rem;
@s-line-height-sm: 1.25rem;
@s-line-height-base: 1.5rem;
@s-line-height-lg: 1.5rem;
@s-letter-spacing-normal: 0;
@s-decoration-underline: underline;
@s-border-radius-null: 0;
@s-border-radius-xs: 0.125rem;
@s-border-radius-s: 0.25rem;
@s-border-radius-sm: 0.5rem;
@s-border-radius-base: 0.75rem;
@s-border-radius-l: 1rem;
@s-border-radius-xl: 1.25rem;
@s-border-radius-full-round: 6249.9375rem;
@s-space-0: 0;
@s-space-2: 0.125rem;
@s-space-4: 0.25rem;
@s-space-8: 0.5rem;
@s-space-12: 0.75rem;
@s-space-16: 1rem;
@s-space-20: 1.25rem;
@s-space-24: 1.5rem;
@s-space-32: 2rem;
@s-space-40: 2.5rem;
@s-space-48: 3rem;
@s-space-64: 4rem;
@s-decoration-none: none;
@s-border-width-0: 0;
@s-font-family-text: 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
@s-font-family-code: 'Fira Mono', Courier, monospace;
@s-font-family-text-japanese: 'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif;
@s-font-family-text-korean: 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif;
@s-font-family-text-chinese-traditional: 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif;
@s-font-family-text-chinese-simplified: 'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif;
@s-font-family-text-arabic: -apple-system, system-ui;
@s-border-width-default: 0.0625rem;
@s-line-height-xl: 1.75rem;
@s-line-height-2xl: 2.25rem;
@s-z-0: 0;
@s-z-10: 10;
@s-z-20: 20;
@s-z-30: 30;
@s-z-40: 40;
@s-z-50: 50;
@s-z-auto: auto;
@s-blur-m: 16px;
@s-blur-l: 24px;
@s-core-gray-10: rgba(43, 43, 43, 1);
@s-core-gray-11: rgba(35, 35, 35, 1);
@s-core-gray-12: rgba(25, 25, 25, 1);
@s-core-gray-black: rgba(0, 0, 0, 1);
@s-core-gray-09: rgba(54, 54, 54, 1);
@s-core-gray-08: rgba(63, 63, 63, 1);
@s-core-gray-07: rgba(81, 81, 81, 1);
@s-core-gray-06: rgba(110, 110, 110, 1);
@s-core-gray-05: rgba(158, 158, 158, 1);
@s-core-gray-04: rgba(207, 207, 207, 1);
@s-core-gray-03: rgba(223, 223, 223, 1);
@s-core-gray-02: rgba(234, 234, 234, 1);
@s-core-gray-01: rgba(242, 242, 242, 1);
@s-core-gray-white: rgba(255, 255, 255, 1);
@s-core-customer-color-light-1-default: rgba(20, 90, 245, 1);
@s-core-customer-color-light-1-hovered: rgba(55, 115, 247, 1);
@s-core-customer-color-light-1-pressed: rgba(91, 139, 248, 1);
@s-core-customer-color-light-2-default: rgba(230, 238, 255, 1);
@s-core-customer-color-light-2-hovered: rgba(213, 226, 255, 1);
@s-core-customer-color-light-2-pressed: rgba(190, 210, 255, 1);
@s-core-customer-color-light-3-default: rgba(0, 55, 175, 1);
@s-core-customer-color-light-3-hovered: rgba(38, 85, 187, 1);
@s-core-customer-color-light-3-pressed: rgba(77, 116, 199, 1);
@s-core-on-customer-color-light-1: rgba(255, 255, 255, 1);
@s-core-on-customer-color-light-2: rgba(23, 23, 23, 1);
@s-core-on-customer-color-light-2-subdued: rgba(106, 109, 116, 1);
@s-core-customer-color-dark-1-default: rgba(86, 143, 222, 1);
@s-core-customer-color-dark-1-hovered: rgba(121, 164, 223, 1);
@s-core-customer-color-dark-1-pressed: rgba(150, 181, 224, 1);
@s-core-customer-color-dark-2-default: rgba(45, 71, 127, 1);
@s-core-customer-color-dark-2-hovered: rgba(52, 80, 141, 1);
@s-core-customer-color-dark-2-pressed: rgba(64, 91, 151, 1);
@s-core-customer-color-dark-3-default: rgba(109, 168, 251, 1);
@s-core-customer-color-dark-3-hovered: rgba(141, 188, 255, 1);
@s-core-customer-color-dark-3-pressed: rgba(182, 213, 255, 1);
@s-core-on-customer-color-dark-1: rgba(0, 0, 0, 1);
@s-core-on-customer-color-dark-2: rgba(242, 242, 242, 1);
@s-core-on-customer-color-dark-2-subdued: rgba(150, 163, 191, 1);
@s-core-status-light-critical-default: rgba(213, 6, 54, 1);
@s-core-status-light-critical-hovered: rgba(179, 39, 57, 1);
@s-core-status-light-critical-pressed: rgba(159, 35, 52, 1);
@s-core-status-light-critical-subdued: rgba(252, 231, 237, 1);
@s-core-status-light-success-default: rgba(8, 129, 8, 1);
@s-core-status-light-success-subdued: rgba(220, 247, 220, 1);
@s-core-status-light-warning-strong: rgba(147, 88, 6, 1);
@s-core-status-light-warning-default: rgba(243, 183, 3, 1);
@s-core-status-light-warning-subdued: rgba(250, 241, 200, 1);
@s-core-status-light-info-default: rgba(20, 90, 245, 1);
@s-core-status-light-info-subdued: rgba(230, 241, 255, 1);
@s-core-status-dark-critical-default: rgba(228, 100, 100, 1);
@s-core-status-dark-critical-hovered: rgba(210, 123, 121, 1);
@s-core-status-dark-critical-pressed: rgba(215, 147, 145, 1);
@s-core-status-dark-critical-subdued: rgba(56, 33, 38, 1);
@s-core-status-dark-warning-default: rgba(243, 183, 3, 1);
@s-core-status-dark-warning-subdued: rgba(45, 39, 25, 1);
@s-core-status-dark-success-default: rgba(80, 164, 80, 1);
@s-core-status-dark-success-subdued: rgba(26, 44, 26, 1);
@s-core-status-dark-info-default: rgba(100, 142, 233, 1);
@s-core-status-dark-info-subdued: rgba(33, 41, 58, 1);
@s-core-decorative-light-chilli-text: rgba(195, 28, 28, 1);
@s-core-decorative-light-chilli-surface: rgba(195, 28, 28, 1);
@s-core-decorative-light-chilli-surface-subdued: rgba(252, 231, 237, 1);
@s-core-decorative-light-pumpkin-text: rgba(167, 76, 37, 1);
@s-core-decorative-light-pumpkin-surface: rgba(245, 144, 49, 1);
@s-core-decorative-light-pumpkin-surface-subdued: rgba(255, 227, 202, 1);
@s-core-decorative-light-banana-text: rgba(154, 92, 0, 1);
@s-core-decorative-light-banana-surface: rgba(234, 186, 42, 1);
@s-core-decorative-light-banana-surface-subdued: rgba(250, 241, 200, 1);
@s-core-decorative-light-radish-text: rgba(186, 29, 142, 1);
@s-core-decorative-light-radish-surface: rgba(186, 29, 142, 1);
@s-core-decorative-light-radish-surface-subdued: rgba(255, 221, 245, 1);
@s-core-decorative-light-grape-text: rgba(130, 45, 164, 1);
@s-core-decorative-light-grape-surface: rgba(130, 45, 164, 1);
@s-core-decorative-light-grape-surface-subdued: rgba(233, 220, 255, 1);
@s-core-decorative-light-kiwi-text: rgba(54, 119, 69, 1);
@s-core-decorative-light-kiwi-surface: rgba(54, 119, 69, 1);
@s-core-decorative-light-kiwi-surface-subdued: rgba(220, 247, 220, 1);
@s-core-decorative-light-blueberry-text: rgba(63, 95, 167, 1);
@s-core-decorative-light-blueberry-surface: rgba(63, 95, 167, 1);
@s-core-decorative-light-blueberry-surface-subdued: rgba(230, 241, 255, 1);
@s-core-decorative-dark-chilli-text: rgba(244, 120, 120, 1);
@s-core-decorative-dark-chilli-surface: rgba(244, 120, 120, 1);
@s-core-decorative-dark-chilli-surface-subdued: rgba(77, 45, 44, 1);
@s-core-decorative-dark-pumpkin-text: rgba(237, 153, 75, 1);
@s-core-decorative-dark-pumpkin-surface: rgba(237, 153, 75, 1);
@s-core-decorative-dark-pumpkin-surface-subdued: rgba(82, 56, 36, 1);
@s-core-decorative-dark-banana-text: rgba(209, 175, 41, 1);
@s-core-decorative-dark-banana-surface: rgba(209, 175, 41, 1);
@s-core-decorative-dark-banana-surface-subdued: rgba(77, 62, 30, 1);
@s-core-decorative-dark-radish-text: rgba(242, 120, 204, 1);
@s-core-decorative-dark-radish-surface: rgba(242, 120, 204, 1);
@s-core-decorative-dark-radish-surface-subdued: rgba(79, 48, 69, 1);
@s-core-decorative-dark-grape-text: rgba(214, 131, 251, 1);
@s-core-decorative-dark-grape-surface: rgba(214, 131, 251, 1);
@s-core-decorative-dark-grape-surface-subdued: rgba(75, 47, 98, 1);
@s-core-decorative-dark-kiwi-text: rgba(111, 200, 130, 1);
@s-core-decorative-dark-kiwi-surface: rgba(111, 200, 130, 1);
@s-core-decorative-dark-kiwi-surface-subdued: rgba(42, 70, 42, 1);
@s-core-decorative-dark-blueberry-text: rgba(122, 172, 240, 1);
@s-core-decorative-dark-blueberry-surface: rgba(122, 172, 240, 1);
@s-core-decorative-dark-blueberry-surface-subdued: rgba(41, 64, 91, 1);
@s-background-default: rgba(255, 255, 255, 1); // Usually used for the page background and elements that should not elevate from the background.
@s-background-hovered: rgba(242, 242, 242, 1); // Used if a component with “Background/Default” has a hovered state.
@s-background-pressed: rgba(234, 234, 234, 1); // Used if a component with “Background/Default” has a pressed state.
@s-surface-default: rgba(255, 255, 255, 1); // Usually used for containers that need to be elevated.
@s-surface-hovered: rgba(242, 242, 242, 1); // Used if a component with “Surface/Default” has a hovered state.
@s-surface-pressed: rgba(234, 234, 234, 1); // Used if a component with “Surface/Default” has a pressed state.
@s-surface-sunken-default: rgba(242, 242, 242, 1);
@s-surface-sunken-hovered: rgba(234, 234, 234, 1);
@s-surface-sunken-pressed: rgba(223, 223, 223, 1);
@s-surface-overlay-default: rgba(255, 255, 255, 1); // Usually used for containers that need to be more elevated.
@s-surface-overlay-hovered: rgba(242, 242, 242, 1); // Used if a component with “Surface Overlay/Default” has a hovered state.
@s-surface-overlay-pressed: rgba(234, 234, 234, 1); // Used if a component with “Surface Overlay/Default” has a pressed state.
@s-surface-raised-default: rgba(242, 242, 242, 1); // Usually used for elements that need contrast on surfaces or background
@s-surface-raised-hovered: rgba(234, 234, 234, 1); // Used if a component with “On Surface/Default” has a hovered state.
@s-surface-raised-pressed: rgba(223, 223, 223, 1); // Used if a component with “On Surface/Default” has a pressed state.
@s-surface-highlight-default: rgba(230, 238, 255, 1); // Usually used for containers that need to be highlighted.
@s-surface-highlight-hovered: rgba(213, 226, 255, 1); // Used if a component with “Surface Highlight/Default” has a hovered state.
@s-surface-highlight-pressed: rgba(190, 210, 255, 1); // Used if a component with “Surface Highlight/Default” has a pressed state.
@s-on-surface-highlight-default: rgba(213, 226, 255, 1); // Used to place containers on “Surface Highlight/Default”.
@s-surface-critical-default: rgba(213, 6, 54, 1); // Used as a background for critical surfaces.
@s-surface-critical-subdued: rgba(252, 231, 237, 1); // Used for low prio critical background.
@s-surface-warning-default: rgba(243, 183, 3, 1); // Used as a background for warning surfaces.
@s-surface-warning-subdued: rgba(250, 241, 200, 1); // Used for low prio warning background.
@s-surface-success-default: rgba(8, 129, 8, 1); // Used as a background for success surfaces.
@s-surface-success-subdued: rgba(220, 247, 220, 1); // Used for low prio success background.
@s-surface-info-default: rgba(20, 90, 245, 1); // Used as a background for info surfaces.
@s-surface-info-subdued: rgba(230, 241, 255, 1); // Used for low prio info background.
@s-surface-neutral-default: rgba(63, 63, 63, 1); // Used as a background for neutral surfaces.
@s-surface-neutral-subdued: rgba(242, 242, 242, 1); // Used for low prio neutral background.
@s-surface-on-image-default: rgba(0, 0, 0, 0.6); // Usually used for containers on images
@s-translucent-low-default: rgba(255,255,255,0.8); // Used for surface with a backdrop blur and low transparency
@s-translucent-low-hovered: rgba(0,0,0,0.05); // Used for hovers on translucent low
@s-translucent-low-pressed: rgba(0,0,0,0.1); // Used for pressed state on translucent low
@s-translucent-medium-default: rgba(242,242,242,0.6); // Used for surface with a backdrop blur and low transparency
@s-translucent-medium-hovered: rgba(255,255,255,0.8); // Used for hovers on translucent medium
@s-translucent-medium-pressed: rgba(255,255,255,1); // Used for hovers on translucent medium
@s-border-strong: rgba(207, 207, 207, 1); // Usually used for high emphasis borders.
@s-border-default: rgba(234, 234, 234, 1); // Usually used for low emphasis borders and espacially divider elements.
@s-border-highlight: rgba(0, 55, 175, 1); // Used as border color on containers that need to be highlighted (e.g. form fields).
@s-border-critical: rgba(213, 6, 54, 1); // Usally used as an border on critical components.
@s-border-success: rgba(8, 129, 8, 1); // Usally used as an border on success components.
@s-border-warning: rgba(147, 88, 6, 1); // Usally used as an border on warning components.
@s-border-info: rgba(20, 90, 245, 1); // Usally used as an border on info components.
@s-border-on-highlight: rgba(174, 201, 246, 1); // Used as border color on containers that have an highlight surface
@s-border-on-translucent: rgba(0,0,0,0.1); // Used for borders on surfaces with a translucent effect
@s-border-translucent-outline: rgba(255,255,255,0.5); // Used for outlinesof elements with a translucent effect
@s-text-default: rgba(25, 25, 25, 1); // Used for high emphasis text.
@s-text-subdued: rgba(110, 110, 110, 1); // Used for low emphasis text.
@s-text-disabled: rgba(207, 207, 207, 1); // Used if a text element is disabled.
@s-text-dark: rgba(25, 25, 25, 1); // Used for low contrast decorative colors.
@s-text-highlight: rgba(0, 55, 175, 1); // Used to highlight text.
@s-text-critical: rgba(213, 6, 54, 1); // Used as critical text color
@s-text-success: rgba(8, 129, 8, 1); // Used as success text color
@s-text-warning: rgba(147, 88, 6, 1); // Used as warning text color
@s-text-info: rgba(20, 90, 245, 1); // Used as info text color
@s-text-on-action-primary: rgba(255, 255, 255, 1); // Used as a text color on containers with action primary color.
@s-text-on-surface-highlight: rgba(23, 23, 23, 1); // Used as text color on containers with highlight color.
@s-text-on-surface-highlight-subdued: rgba(106, 109, 116, 1); // Used as subdued text color on containers with highlight color.
@s-text-on-status: rgba(255, 255, 255, 1); // Used as a text color on containers with a default status color except on warning.
@s-text-on-image: rgba(255, 255, 255, 1); // Used as a text color on “Surface On Image/Default”.
@s-icon-strong: rgba(25, 25, 25, 1); // Used for high emphasis icons.
@s-icon-default: rgba(110, 110, 110, 1); // Used for low emphasis icons.
@s-icon-disabled: rgba(207, 207, 207, 1); // Used if a icon element is disabled.
@s-icon-dark: rgba(25, 25, 25, 1); // Used for low contrast decorative colors.
@s-icon-highlight: rgba(0, 55, 175, 1); // Used to highlight icons.
@s-icon-critical: rgba(213, 6, 54, 1); // Used as critical icon color
@s-icon-success: rgba(8, 129, 8, 1); // Used as success icon color
@s-icon-warning: rgba(147, 88, 6, 1); // Used as warning icon color
@s-icon-info: rgba(20, 90, 245, 1); // Used as info icon color
@s-icon-on-action-primary: rgba(255, 255, 255, 1); // Used as a icon color on containers with action primary color.
@s-icon-on-surface-highlight: rgba(23, 23, 23, 1); // Used as icon color on containers with highlight color.
@s-icon-on-surface-highlight-subdued: rgba(106, 109, 116, 1); // Used as subdued icon color on containers with highlight color.
@s-icon-on-status: rgba(255, 255, 255, 1); // Used as a icon color on containers with a default status color except on warning.
@s-icon-on-image: rgba(255, 255, 255, 1); // Used as a icon color on “Surface On Image/Default”.
@s-action-primary-default: rgba(20, 90, 245, 1); // Used for containers that are high emphasis action elements.
@s-action-primary-hovered: rgba(55, 115, 247, 1); // Used if a component with “Action Primary/Default” has a hovered state.
@s-action-primary-pressed: rgba(91, 139, 248, 1); // Used if a component with “Action Primary/Default” has a pressed state.
@s-action-primary-disabled: rgba(242, 242, 242, 1); // Used if a component with “Action Primary/Default” has a disabled state.
@s-action-critical-default: rgba(213, 6, 54, 1); // Used for containers that are critical and negative action elements.
@s-action-critical-hovered: rgba(179, 39, 57, 1); // Used if a component with “Action Critical/Default” has a hovered state.
@s-action-critical-pressed: rgba(159, 35, 52, 1); // Used if a component with “Action Critical/Default” has a pressed state.
@s-action-critical-disabled: rgba(242, 242, 242, 1); // Used if a component with “Action Primary/Default” has a disabled state.
@s-action-neutral-default: rgba(242, 242, 242, 1); // Used for containers that are low emphasis action elements.
@s-action-neutral-hovered: rgba(234, 234, 234, 1); // Used if a component with “Action Neutral/Default” has a hovered state.
@s-action-neutral-pressed: rgba(223, 223, 223, 1); // Used if a component with “Action Neutral/Default” has a pressed state.
@s-action-neutral-disabled: rgba(242, 242, 242, 1); // Used if a component with “Action Neutral/Default” has a disabled state.
@s-interactive-primary-default: rgba(0, 61, 175, 1); // Used for icon and text that are high emphasis interactive elements.
@s-interactive-primary-hovered: rgba(38, 85, 187, 1); // Used if a component with “Interactive Primary/Default” has a hovered state.
@s-interactive-primary-pressed: rgba(77, 119, 199, 1); // Used if a component with “Interactive Primary/Default” has a pressed state.
@s-interactive-primary-disabled: rgba(204, 205, 209, 1); // Used if a component with “Interactive Primary/Default” has a disabled state.
@s-interactive-critical-default: rgba(213, 6, 54, 1); // Used for icon and text that are critical or negative interactive elements.
@s-interactive-critical-hovered: rgba(179, 39, 57, 1); // Used if a component with “Interactive Critical/Default” has a hovered state.
@s-interactive-critical-pressed: rgba(159, 35, 52, 1); // Used if a component with “Interactive Critical/Default” has a pressed state.
@s-interactive-critical-disabled: rgba(207, 207, 207, 1); // Used if a component with “Interactive Critical/Default” has a disabled state.
@s-interactive-neutral-default: rgba(110, 110, 110, 1); // Used for icon and text that are low emphasis interactive elements.
@s-interactive-neutral-hovered: rgba(158, 158, 158, 1); // Used if a component with “Interactive Neutral/Default” has a hovered state.
@s-interactive-neutral-pressed: rgba(158, 158, 158, 1); // Used if a component with “Interactive Neutral/Default” has a pressed state.
@s-interactive-neutral-disabled: rgba(207, 207, 207, 1); // Used if a component with “Interactive Neutral/Default” has a disabled state.
@s-focus-default: rgba(0, 55, 175, 1);
@s-decorative-chilli-text: rgba(195, 28, 28, 1); // Used as a decorative color.
@s-decorative-chilli-surface: rgba(195, 28, 28, 1); // Used as a decorative color.
@s-decorative-chilli-surface-subdued: rgba(252, 231, 237, 1); // Used as a decorative color.
@s-decorative-pumpkin-text: rgba(167, 76, 37, 1); // Used as a decorative color.
@s-decorative-pumpkin-surface: rgba(245, 144, 49, 1); // Used as a decorative color.
@s-decorative-pumpkin-surface-subdued: rgba(255, 227, 202, 1); // Used as a decorative color.
@s-decorative-banana-text: rgba(154, 92, 0, 1); // Used as a decorative color.
@s-decorative-banana-surface: rgba(234, 186, 42, 1); // Used as a decorative color.
@s-decorative-banana-surface-subdued: rgba(250, 241, 200, 1); // Used as a decorative color.
@s-decorative-radish-text: rgba(186, 29, 142, 1); // Used as a decorative color.
@s-decorative-radish-surface: rgba(186, 29, 142, 1); // Used as a decorative color.
@s-decorative-radish-surface-subdued: rgba(255, 221, 245, 1); // Used as a decorative color.
@s-decorative-grape-text: rgba(130, 45, 164, 1); // Used as a decorative color.
@s-decorative-grape-surface: rgba(130, 45, 164, 1); // Used as a decorative color.
@s-decorative-grape-surface-subdued: rgba(233, 220, 255, 1); // Used as a decorative color.
@s-decorative-kiwi-text: rgba(54, 119, 69, 1); // Used as a decorative color.
@s-decorative-kiwi-surface: rgba(54, 119, 69, 1); // Used as a decorative color.
@s-decorative-kiwi-surface-subdued: rgba(220, 247, 220, 1); // Used as a decorative color.
@s-decorative-blueberry-text: rgba(63, 95, 167, 1); // Used as a decorative color.
@s-decorative-blueberry-surface: rgba(63, 95, 167, 1); // Used as a decorative color.
@s-decorative-blueberry-surface-subdued: rgba(230, 241, 255, 1); // Used as a decorative color.
@s-shadow-level-1: 0px 4px 16px 0px rgba(23,23,23,0.04), 0px 1px 4px 0px rgba(23,23,23,0.04);
@s-shadow-level-2: 0px 4px 12px 0px rgba(23,23,23,0.2);
@s-shadow-level-3: 0px 12px 32px 0px rgba(23,23,23,0.12), 0px 4px 12px 0px rgba(23,23,23,0.08);