@synergy-design-system/tokens/dist/themes/sick2018_light.css

Design tokens for Synergy, the SICK Design System

/**
 * @synergy-design-system/tokens version 2.22.0
 * SICK Global UX Foundation
 * Do not edit directly, this file was auto-generated.
 */

:root, .syn-sick2018-light, .syn-theme-light {
  color-scheme: light;

  --syn-border-radius-circle: 9999px;
  --syn-border-radius-large: 8px;
  --syn-border-radius-medium: 8px;
  --syn-border-radius-none: 0px;
  --syn-border-radius-pill: 9999px;
  --syn-border-radius-small: 4px;
  --syn-border-radius-x-large: 16px;
  --syn-border-width-large: 3px; /** Large */
  --syn-border-width-medium: 2px; /** Medium */
  --syn-border-width-none: 0px; /** None */
  --syn-border-width-small: 1px; /** Small */
  --syn-border-width-x-large: 4px; /** X Large */
  --syn-button-font-size-large: var(--syn-font-size-large);
  --syn-button-font-size-medium: var(--syn-font-size-medium);
  --syn-button-font-size-small: var(--syn-font-size-small);
  --syn-color-accent-50: #fffbea;
  --syn-color-accent-100: #fff2c5;
  --syn-color-accent-200: #ffe685;
  --syn-color-accent-300: #ffd246;
  --syn-color-accent-400: #ffbd1b;
  --syn-color-accent-500: #f39200;
  --syn-color-accent-600: #e27200;
  --syn-color-accent-700: #bb4d02;
  --syn-color-accent-800: #983b08;
  --syn-color-accent-900: #7c310b;
  --syn-color-accent-950: #481700;
  --syn-color-error-50: #fff0f2;
  --syn-color-error-100: #ffdee2;
  --syn-color-error-200: #ffc3c9;
  --syn-color-error-300: #ff98a4;
  --syn-color-error-400: #ff5d70;
  --syn-color-error-500: #ff2b44;
  --syn-color-error-600: #ea0823;
  --syn-color-error-700: #d0051d;
  --syn-color-error-800: #ab091c;
  --syn-color-error-900: #8d0f1e;
  --syn-color-error-950: #4e010a;
  --syn-color-neutral-0: #ffffff;
  --syn-color-neutral-50: #f9fafb;
  --syn-color-neutral-100: #f2f3f6;
  --syn-color-neutral-200: #e8ebec;
  --syn-color-neutral-300: #d5dbdd;
  --syn-color-neutral-400: #bac2c6;
  --syn-color-neutral-500: #9ea9ae;
  --syn-color-neutral-600: #859298;
  --syn-color-neutral-700: #737f85;
  --syn-color-neutral-800: #5e676b;
  --syn-color-neutral-900: #4c5357;
  --syn-color-neutral-950: #31373a;
  --syn-color-neutral-1000: #000000;
  --syn-color-primary-50: #f0f9ff;
  --syn-color-primary-100: #e0f1fe;
  --syn-color-primary-200: #b9e5fe;
  --syn-color-primary-300: #7cd1fd;
  --syn-color-primary-400: #36bbfa;
  --syn-color-primary-500: #0ca2eb;
  --syn-color-primary-600: #007cc1;
  --syn-color-primary-700: #0166a3;
  --syn-color-primary-800: #065786;
  --syn-color-primary-900: #0b486f;
  --syn-color-primary-950: #072e4a;
  --syn-color-success-50: #f5fde8;
  --syn-color-success-100: #e7facd;
  --syn-color-success-200: #d1f4a2;
  --syn-color-success-300: #b0eb6b;
  --syn-color-success-400: #93dd3e;
  --syn-color-success-500: #73c31f;
  --syn-color-success-600: #63b017;
  --syn-color-success-700: #437714;
  --syn-color-success-800: #395e16;
  --syn-color-success-900: #315017;
  --syn-color-success-950: #172c07;
  --syn-color-warning-50: #fefce8;
  --syn-color-warning-100: #fdf7c4;
  --syn-color-warning-200: #fcec8c;
  --syn-color-warning-300: #f9da4b;
  --syn-color-warning-400: #f5c413;
  --syn-color-warning-500: #e5ae0d;
  --syn-color-warning-600: #c68608;
  --syn-color-warning-700: #9e5f0a;
  --syn-color-warning-800: #834b10;
  --syn-color-warning-900: #6f3e14;
  --syn-color-warning-950: #411f07;
  --syn-dimension-base: 4px; /** to be deprecated */
  --syn-duration-extra-fast: 50ms;
  --syn-duration-extra-slow: 1000ms;
  --syn-duration-fast: 150ms;
  --syn-duration-normal: 250ms;
  --syn-duration-slow: 500ms;
  --syn-focus-ring-color: var(--syn-color-primary-400);
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
  --syn-focus-ring-style: solid;
  --syn-focus-ring-width: var(--syn-border-width-medium);
  --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /** Coding font */
  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Main font */
  --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol'; /** System font */
  --syn-font-serif: Georgia, 'Times New Roman', serif; /** Shoelace compatibility DO NOT USE */
  --syn-font-size-2x-large: 32px;
  --syn-font-size-2x-small: 11px;
  --syn-font-size-3x-large: 40px;
  --syn-font-size-4x-large: 52px;
  --syn-font-size-large: 20px;
  --syn-font-size-medium: 16px;
  --syn-font-size-small: 14px;
  --syn-font-size-x-large: 24px;
  --syn-font-size-x-small: 12px;
  --syn-font-weight-bold: 700;
  --syn-font-weight-light: 400; /** Shoelace compatibility DO NOT USE */
  --syn-font-weight-normal: 400;
  --syn-font-weight-semibold: 600;
  --syn-input-background-color: var(--syn-color-neutral-0);
  --syn-input-background-color-disabled: var(--syn-input-background-color);
  --syn-input-background-color-focus: var(--syn-input-background-color);
  --syn-input-background-color-hover: var(--syn-input-background-color);
  --syn-input-border-color: var(--syn-color-neutral-700);
  --syn-input-border-color-disabled: var(--syn-color-neutral-700);
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
  --syn-input-border-radius-large: var(--syn-border-radius-none);
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
  --syn-input-border-radius-small: var(--syn-border-radius-none);
  --syn-input-border-width: 1px;
  --syn-input-color: var(--syn-color-neutral-950);
  --syn-input-color-disabled: var(--syn-color-neutral-950);
  --syn-input-color-focus: var(--syn-color-neutral-950);
  --syn-input-color-hover: var(--syn-color-neutral-950);
  --syn-input-disabled-opacity: 0.5;
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
  --syn-input-focus-ring-error: var(--syn-color-error-400);
  --syn-input-focus-ring-offset: 0px;
  --syn-input-font-family: var(--syn-font-sans);
  --syn-input-font-size-large: var(--syn-font-size-large);
  --syn-input-font-size-medium: var(--syn-font-size-medium);
  --syn-input-font-size-small: var(--syn-font-size-small);
  --syn-input-font-weight: var(--syn-font-weight-normal);
  --syn-input-height-large: var(--syn-spacing-3x-large);
  --syn-input-height-medium: var(--syn-spacing-2x-large);
  --syn-input-height-small: 36px;
  --syn-input-help-text-color: var(--syn-color-neutral-800);
  --syn-input-help-text-color-error: var(--syn-color-error-700);
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
  --syn-input-icon-color: var(--syn-color-neutral-800);
  --syn-input-icon-color-focus: var(--syn-color-neutral-800);
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
  --syn-input-label-color: var(--syn-color-neutral-950);
  --syn-input-label-font-size-large: var(--syn-font-size-large);
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
  --syn-input-label-font-size-small: var(--syn-font-size-small);
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
  --syn-input-readonly-color: var(--syn-color-neutral-800);
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
  --syn-input-readonly-background-color: var(--syn-color-neutral-50);
  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
  --syn-input-required-content: "*";
  --syn-input-required-content-color: var(--syn-input-label-color);
  --syn-input-required-content-offset: -2px;
  --syn-input-spacing-large: var(--syn-spacing-large);
  --syn-input-spacing-medium: var(--syn-spacing-medium);
  --syn-input-spacing-small: var(--syn-spacing-small);
  --syn-input-width: var(--syn-border-width-small);
  --syn-letter-spacing-dense: -0.24px; /** Shoelace compatibility DO NOT USE */
  --syn-letter-spacing-denser: -0.48px; /** Shoelace compatibility DO NOT USE */
  --syn-letter-spacing-loose: 1.2px; /** Shoelace compatibility DO NOT USE */
  --syn-letter-spacing-looser: 2.4px; /** Shoelace compatibility DO NOT USE */
  --syn-letter-spacing-normal: normal;
  --syn-line-height-dense: 1.2; /** Shoelace compatibility DO NOT USE */
  --syn-line-height-denser: 1; /** Shoelace compatibility DO NOT USE */
  --syn-line-height-loose: 1.8; /** Shoelace compatibility DO NOT USE */
  --syn-line-height-looser: 2.2; /** Shoelace compatibility DO NOT USE */
  --syn-line-height-normal: 1.4; /** Shoelace compatibility DO NOT USE */
  --syn-link-color: var(--syn-color-primary-600);
  --syn-link-color-active: var(--syn-color-primary-950);
  --syn-link-color-hover: var(--syn-color-primary-900);
  --syn-link-quiet-color: var(--syn-typography-color-text);
  --syn-link-quiet-color-active: var(--syn-color-primary-950);
  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
  --syn-opacity-50: 0.5; /** 50% */
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
  --syn-panel-background-color: var(--syn-color-neutral-0);
  --syn-panel-border-color: var(--syn-color-neutral-300);
  --syn-panel-border-width: var(--syn-border-width-small);
  --syn-spacing-2x-large: 48px;
  --syn-spacing-2x-small: 4px;
  --syn-spacing-3x-large: 64px;
  --syn-spacing-3x-small: 2px;
  --syn-spacing-4x-large: 96px;
  --syn-spacing-4x-small: 1px;
  --syn-spacing-5x-large: 128px;
  --syn-spacing-large: 24px;
  --syn-spacing-medium: 16px;
  --syn-spacing-medium-large: 20px;
  --syn-spacing-small: 12px;
  --syn-spacing-x-large: 32px;
  --syn-spacing-x-small: 8px;
  --syn-text-decoration-default: none;
  --syn-text-decoration-underline: underline;
  --syn-toggle-size-large: var(--syn-spacing-large);
  --syn-toggle-size-medium: var(--syn-spacing-medium);
  --syn-toggle-size-small: 14px;
  --syn-tooltip-arrow-size: 9px;
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
  --syn-tooltip-color: var(--syn-typography-color-text-inverted);
  --syn-tooltip-font-family: var(--syn-font-sans);
  --syn-tooltip-font-size: var(--syn-font-size-small);
  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
  --syn-tooltip-line-height: var(--syn-line-height-normal);
  --syn-tooltip-padding: var(--syn-spacing-small);
  --syn-transition-fast: 150ms; /** Shoelace compatibility DO NOT USE */
  --syn-transition-medium: 250ms; /** Shoelace compatibility DO NOT USE */
  --syn-transition-slow: 500ms; /** Shoelace compatibility DO NOT USE */
  --syn-transition-x-fast: 50ms; /** Shoelace compatibility DO NOT USE */
  --syn-transition-x-slow: 1000ms; /** Shoelace compatibility DO NOT USE */
  --syn-typography-color-text: var(--syn-color-neutral-950);
  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
  --syn-z-index-dialog: 800; /** Shoelace compatibility DO NOT USE */
  --syn-z-index-drawer: 700; /** Shoelace compatibility DO NOT USE */
  --syn-z-index-dropdown: 900; /** Shoelace compatibility DO NOT USE */
  --syn-z-index-toast: 950; /** Shoelace compatibility DO NOT USE */
  --syn-z-index-tooltip: 1000; /** Shoelace compatibility DO NOT USE */
  --syn-shadow-medium: 0px 1px 2px 0px rgba(49, 55, 58, 0.08), 0px 1px 4px 0px rgba(49, 55, 58, 0.08), 0px 2px 8px 0px rgba(49, 55, 58, 0.08);
  --syn-shadow-large: 0px 0px 3px 0px rgba(49, 55, 58, 0.12), 0px 2px 6px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.16);
  --syn-shadow-x-large: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 8px 24px 0px rgba(49, 55, 58, 0.12), 0px 16px 48px 0px rgba(49, 55, 58, 0.16);
  --syn-shadow-overflow-down: 0px 1px 4px 0px rgba(49, 55, 58, 0.12), 0px 3px 8px 0px rgba(49, 55, 58, 0.12), 0px 4px 12px 0px rgba(49, 55, 58, 0.16);
  --syn-shadow-overflow-up: 0px -1px 4px 0px rgba(49, 55, 58, 0.12), 0px -3px 8px 0px rgba(49, 55, 58, 0.12), 0px -4px 12px 0px rgba(49, 55, 58, 0.16);
  --syn-shadow-overflow-left: -1px 0px 4px 0px rgba(49, 55, 58, 0.12), -3px 0px 8px 0px rgba(49, 55, 58, 0.12), -4px 0px 12px 0px rgba(49, 55, 58, 0.16);
  --syn-shadow-overflow-right: 1px 0px 4px 0px rgba(49, 55, 58, 0.12), 3px 0px 8px 0px rgba(49, 55, 58, 0.12), 4px 0px 12px 0px rgba(49, 55, 58, 0.16);
  --syn-shadow-x-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.04), 0px 1px 4px 0px rgba(49, 55, 58, 0.04), 0px 2px 8px 0px rgba(49, 55, 58, 0.04);
  --syn-shadow-small: 0px 1px 2px 0px rgba(49, 55, 58, 0.06), 0px 1px 4px 0px rgba(49, 55, 58, 0.06), 0px 2px 8px 0px rgba(49, 55, 58, 0.06);
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
}