@cas-smartdesign/design-tokens 1.9.0 → 3.0.0

package/dist/base/tokens.css

@@ -0,0 +1,401 @@
+:root {
+  --base-color-black-100: rgba(17, 17, 17, 0.1);
+  --base-color-black-200: rgba(17, 17, 17, 0.2);
+  --base-color-black-300: rgba(17, 17, 17, 0.3);
+  --base-color-black-400: rgba(17, 17, 17, 0.4);
+  --base-color-black-500: rgba(17, 17, 17, 0.5);
+  --base-color-black-600: rgba(17, 17, 17, 0.6);
+  --base-color-black-700: rgba(17, 17, 17, 0.7);
+  --base-color-black-800: rgba(17, 17, 17, 0.8);
+  --base-color-black-900: rgba(17, 17, 17, 0.9);
+  --base-color-black-opaque: #111111;
+  --base-color-blue-100: #dff1ff;
+  --base-color-blue-150: #d4edff;
+  --base-color-blue-200: #c6e7ff;
+  --base-color-blue-250: #b2deff;
+  --base-color-blue-300: #99d4ff;
+  --base-color-blue-350: #77c5ff;
+  --base-color-blue-400: #4ab2ff;
+  --base-color-blue-500: #0d98ff;
+  --base-color-blue-600: #0a72bf;
+  --base-color-blue-650: #07568f;
+  --base-color-blue-700: #05406c;
+  --base-color-blue-750: #043051;
+  --base-color-blue-800: #03243c;
+  --base-color-blue-850: #021b2d;
+  --base-color-blue-900: #021422;
+  --base-color-brown-100: #efe6dd;
+  --base-color-brown-150: #eaddd2;
+  --base-color-brown-200: #e3d2c3;
+  --base-color-brown-250: #dac3ae;
+  --base-color-brown-300: #cdaf93;
+  --base-color-brown-350: #bd9470;
+  --base-color-brown-400: #a77140;
+  --base-color-brown-500: #894100;
+  --base-color-brown-600: #673100;
+  --base-color-brown-650: #4d2500;
+  --base-color-brown-700: #3a1b00;
+  --base-color-brown-750: #2b1500;
+  --base-color-brown-800: #200f00;
+  --base-color-brown-850: #180c00;
+  --base-color-brown-900: #120900;
+  --base-color-cyan-100: #ddf1f7;
+  --base-color-cyan-150: #d2edf5;
+  --base-color-cyan-200: #c3e7f1;
+  --base-color-cyan-250: #aedfed;
+  --base-color-cyan-300: #93d4e7;
+  --base-color-cyan-350: #70c6de;
+  --base-color-cyan-400: #40b3d3;
+  --base-color-cyan-500: #0099c5;
+  --base-color-cyan-600: #007394;
+  --base-color-cyan-650: #00566f;
+  --base-color-cyan-700: #004153;
+  --base-color-cyan-750: #00303e;
+  --base-color-cyan-800: #00242f;
+  --base-color-cyan-850: #001b23;
+  --base-color-cyan-900: #00141a;
+  --base-color-dark-blue-100: #e0ebf6;
+  --base-color-dark-blue-150: #d5e4f3;
+  --base-color-dark-blue-200: #c7dbef;
+  --base-color-dark-blue-250: #b5cfe9;
+  --base-color-dark-blue-300: #9cbfe2;
+  --base-color-dark-blue-350: #7ba9d8;
+  --base-color-dark-blue-400: #4f8dcb;
+  --base-color-dark-blue-500: #1467ba;
+  --base-color-dark-blue-600: #0f4d8b;
+  --base-color-dark-blue-650: #0b3a69;
+  --base-color-dark-blue-700: #082b4e;
+  --base-color-dark-blue-750: #06213b;
+  --base-color-dark-blue-800: #05182c;
+  --base-color-dark-blue-850: #041221;
+  --base-color-dark-blue-900: #030e19;
+  --base-color-dark-green-100: #ddf1e1;
+  --base-color-dark-green-150: #d2ecd8;
+  --base-color-dark-green-200: #c3e6ca;
+  --base-color-dark-green-250: #aedeb9;
+  --base-color-dark-green-300: #93d3a1;
+  --base-color-dark-green-350: #70c482;
+  --base-color-dark-green-400: #40b059;
+  --base-color-dark-green-500: #009621;
+  --base-color-dark-green-600: #007119;
+  --base-color-dark-green-650: #005413;
+  --base-color-dark-green-700: #003f0e;
+  --base-color-dark-green-750: #002f0a;
+  --base-color-dark-green-800: #002408;
+  --base-color-dark-green-850: #001b06;
+  --base-color-dark-green-900: #001404;
+  --base-color-friendly-blue-100: #dbebff;
+  --base-color-friendly-blue-150: #d1e5ff;
+  --base-color-friendly-blue-200: #c2dcff;
+  --base-color-friendly-blue-250: #add1ff;
+  --base-color-friendly-blue-300: #70aeff;
+  --base-color-friendly-blue-350: #70aeff;
+  --base-color-friendly-blue-400: #3d92ff;
+  --base-color-friendly-blue-500: #006cf8;
+  --base-color-friendly-blue-600: #0050b8;
+  --base-color-friendly-blue-650: #003c8a;
+  --base-color-friendly-blue-700: #002f6b;
+  --base-color-friendly-blue-750: #002f6b;
+  --base-color-friendly-blue-800: #00214d;
+  --base-color-friendly-blue-850: #001b3d;
+  --base-color-friendly-blue-900: #00142e;
+  --base-color-friendly-dark-blue-100: #dce6fe;
+  --base-color-friendly-dark-blue-150: #cddcfe;
+  --base-color-friendly-dark-blue-200: #b8cdfe;
+  --base-color-friendly-dark-blue-250: #9fbbfe;
+  --base-color-friendly-dark-blue-300: #80a5fe;
+  --base-color-friendly-dark-blue-350: #5385fe;
+  --base-color-friendly-dark-blue-400: #165afd;
+  --base-color-friendly-dark-blue-500: #0239be;
+  --base-color-friendly-dark-blue-600: #012d98;
+  --base-color-friendly-dark-blue-650: #01247a;
+  --base-color-friendly-dark-blue-700: #00123d;
+  --base-color-friendly-dark-blue-750: #00123d;
+  --base-color-friendly-dark-blue-800: #000e2e;
+  --base-color-friendly-dark-blue-850: #00091f;
+  --base-color-friendly-dark-blue-900: #00040f;
+  --base-color-green-100: #eff6df;
+  --base-color-green-150: #eaf3d4;
+  --base-color-green-200: #e3efc5;
+  --base-color-green-250: #daeab2;
+  --base-color-green-300: #cee399;
+  --base-color-green-350: #bdda76;
+  --base-color-green-400: #a7cd49;
+  --base-color-green-500: #8abd0c;
+  --base-color-green-600: #688e09;
+  --base-color-green-650: #4e6a07;
+  --base-color-green-700: #3a5005;
+  --base-color-green-750: #2c3c04;
+  --base-color-green-800: #212d03;
+  --base-color-green-850: #192202;
+  --base-color-green-900: #121902;
+  --base-color-grey-100: #f1f1f1;
+  --base-color-grey-150: #ededed;
+  --base-color-grey-200: #e7e7e7;
+  --base-color-grey-250: #dfdfdf;
+  --base-color-grey-300: #d4d4d4;
+  --base-color-grey-350: #c6c6c6;
+  --base-color-grey-400: #b3b3b3;
+  --base-color-grey-500: #999999;
+  --base-color-grey-600: #737373;
+  --base-color-grey-650: #565656;
+  --base-color-grey-700: #414141;
+  --base-color-grey-750: #303030;
+  --base-color-grey-800: #242424;
+  --base-color-grey-850: #1b1b1b;
+  --base-color-grey-900: #141414;
+  --base-color-grey-800op80: rgba(36, 36, 36, 0.8);
+  --base-color-orange-100: #ffebdf;
+  --base-color-orange-150: #ffe5d5;
+  --base-color-orange-200: #ffdcc7;
+  --base-color-orange-250: #ffd0b4;
+  --base-color-orange-300: #ffc19b;
+  --base-color-orange-350: #ffac79;
+  --base-color-orange-400: #ff904d;
+  --base-color-orange-500: #ff6b11;
+  --base-color-orange-600: #bf500d;
+  --base-color-orange-650: #8f3c0a;
+  --base-color-orange-700: #6c2d07;
+  --base-color-orange-750: #512205;
+  --base-color-orange-800: #3c1904;
+  --base-color-orange-850: #2d1303;
+  --base-color-orange-900: #220e02;
+  --base-color-pink-100: #f7e0ed;
+  --base-color-pink-150: #f5d5e7;
+  --base-color-pink-200: #f1c8df;
+  --base-color-pink-250: #ecb5d5;
+  --base-color-pink-300: #e69cc6;
+  --base-color-pink-350: #de7bb4;
+  --base-color-pink-400: #d3509a;
+  --base-color-pink-500: #c41579;
+  --base-color-pink-600: #93105b;
+  --base-color-pink-650: #6e0c44;
+  --base-color-pink-700: #530933;
+  --base-color-pink-750: #3e0726;
+  --base-color-pink-800: #2e051d;
+  --base-color-pink-850: #230416;
+  --base-color-pink-900: #1a0310;
+  --base-color-purple-100: #f1ddf5;
+  --base-color-purple-150: #edd2f1;
+  --base-color-purple-200: #e7c3ed;
+  --base-color-purple-250: #dfaee7;
+  --base-color-purple-300: #d493df;
+  --base-color-purple-350: #c670d4;
+  --base-color-purple-400: #b340c5;
+  --base-color-purple-500: #9900b2;
+  --base-color-purple-600: #730085;
+  --base-color-purple-650: #560064;
+  --base-color-purple-700: #41004b;
+  --base-color-purple-750: #300038;
+  --base-color-purple-800: #24002a;
+  --base-color-purple-850: #1b0020;
+  --base-color-purple-900: #140018;
+  --base-color-red-100: #fbdde0;
+  --base-color-red-150: #fad2d6;
+  --base-color-red-200: #f8c3c9;
+  --base-color-red-250: #f6aeb7;
+  --base-color-red-300: #f3939e;
+  --base-color-red-350: #ef707e;
+  --base-color-red-400: #e94053;
+  --base-color-red-500: #e2001a;
+  --base-color-red-600: #a90014;
+  --base-color-red-650: #7f000f;
+  --base-color-red-700: #5f000b;
+  --base-color-red-750: #470008;
+  --base-color-red-800: #360006;
+  --base-color-red-850: #280005;
+  --base-color-red-900: #1e0003;
+  --base-color-white-100: rgba(255, 255, 255, 0.1);
+  --base-color-white-200: rgba(255, 255, 255, 0.2);
+  --base-color-white-300: rgba(255, 255, 255, 0.3);
+  --base-color-white-400: rgba(255, 255, 255, 0.4);
+  --base-color-white-500: rgba(255, 255, 255, 0.5);
+  --base-color-white-600: rgba(255, 255, 255, 0.6);
+  --base-color-white-700: rgba(255, 255, 255, 0.7);
+  --base-color-white-800: rgba(255, 255, 255, 0.8);
+  --base-color-white-900: rgba(255, 255, 255, 0.9);
+  --base-color-white-opaque: #ffffff;
+  --base-color-yellow-100: #fff6df;
+  --base-color-yellow-150: #fff3d5;
+  --base-color-yellow-200: #ffefc7;
+  --base-color-yellow-250: #ffe9b4;
+  --base-color-yellow-300: #ffe29b;
+  --base-color-yellow-350: #ffd979;
+  --base-color-yellow-400: #ffcc4d;
+  --base-color-yellow-500: #ffbb11;
+  --base-color-yellow-600: #bf8c0d;
+  --base-color-yellow-650: #8f690a;
+  --base-color-yellow-700: #6c4f07;
+  --base-color-yellow-750: #513b05;
+  --base-color-yellow-800: #3c2c04;
+  --base-color-yellow-850: #2d2103;
+  --base-color-yellow-900: #221902;
+  --base-corner-radius-0: 0;
+  --base-corner-radius-50: 2px;
+  --base-corner-radius-100: 4px;
+  --base-corner-radius-200: 8px;
+  --base-corner-radius-300: 12px;
+  --base-corner-radius-400: 16px;
+  --base-corner-radius-500: 20px;
+  --base-corner-radius-600: 24px;
+  --base-corner-radius-950: 1000px;
+  --base-effect-blur-l: 16px;
+  --base-effect-blur-m: 8px;
+  --base-effect-blur-s: 6px;
+  --base-effect-blur-xl: 24px;
+  --base-effect-blur-xs: 4px;
+  --base-effect-blur-xxl: 32px;
+  --base-effect-blur-xxs: 2px;
+  --base-effect-position-l: 5px;
+  --base-effect-position-l-negative: -5px;
+  --base-effect-position-m: 4px;
+  --base-effect-position-m-negative: -4px;
+  --base-effect-position-none: 0;
+  --base-effect-position-s: 3px;
+  --base-effect-position-s-negative: -3px;
+  --base-effect-position-xl: 6px;
+  --base-effect-position-xl-negative: -6px;
+  --base-effect-position-xs: 2px;
+  --base-effect-position-xs-negative: -2px;
+  --base-effect-position-xxl: 7px;
+  --base-effect-position-xxl-negative: -7px;
+  --base-effect-position-xxs: 1px;
+  --base-effect-position-xxs-negative: -1px;
+  --base-effect-spread-none: 0;
+  --base-opacity-100: 0.1;
+  --base-opacity-200: 0.2;
+  --base-opacity-300: 0.3;
+  --base-opacity-400: 0.4;
+  --base-opacity-500: 0.5;
+  --base-opacity-600: 0.6;
+  --base-opacity-700: 0.7;
+  --base-opacity-800: 0.8;
+  --base-opacity-900: 0.9;
+  --base-opacity-none: 0;
+  --base-opacity-opaque: 1;
+  --base-spacing-002: 2px;
+  --base-spacing-004: 4px;
+  --base-spacing-006: 6px;
+  --base-spacing-008: 8px;
+  --base-spacing-012: 12px;
+  --base-spacing-016: 16px;
+  --base-spacing-024: 24px;
+  --base-spacing-032: 32px;
+  --base-text-font-family-inter: Inter;
+  --base-text-font-family-segoe: Segoe UI;
+  --base-text-font-size-body: 15px;
+  --base-text-font-size-caption: 12px;
+  --base-text-font-size-description: 13px;
+  --base-text-font-size-display-large: 44px;
+  --base-text-font-size-display-medium: 38px;
+  --base-text-font-size-display-small: 34px;
+  --base-text-font-size-subtitle: 18px;
+  --base-text-font-size-title-large: 28px;
+  --base-text-font-size-title-medium: 24px;
+  --base-text-font-size-title-small: 20px;
+  --base-text-font-weight-bold: 700;
+  --base-text-font-weight-light: 300;
+  --base-text-font-weight-medium: 500;
+  --base-text-font-weight-regular: 400;
+  --base-text-font-weight-semibold: 600;
+  --base-text-line-height-body: 20px;
+  --base-text-line-height-caption: 14px;
+  --base-text-line-height-description: 16px;
+  --base-text-line-height-display-large: 52px;
+  --base-text-line-height-display-medium: 46px;
+  --base-text-line-height-display-small: 40px;
+  --base-text-line-height-subtitle: 22px;
+  --base-text-line-height-title-large: 34px;
+  --base-text-line-height-title-medium: 28px;
+  --base-text-line-height-title-small: 24px;
+  --opacity-default: var(--base-opacity-500);
+  --opacity-stronger: var(--base-opacity-700);
+  --opacity-strongest: var(--base-opacity-800);
+  --opacity-weaker: var(--base-opacity-300);
+  --opacity-weakest: var(--base-opacity-200);
+  --radius-l: var(--base-corner-radius-300);
+  --radius-m: var(--base-corner-radius-200);
+  --radius-none: var(--base-corner-radius-0);
+  --radius-round: var(--base-corner-radius-950);
+  --radius-s: var(--base-corner-radius-100);
+  --radius-xl: var(--base-corner-radius-400);
+  --radius-xs: var(--base-corner-radius-50);
+  --spacing-x1: var(--base-spacing-002);
+  --spacing-x2: var(--base-spacing-004);
+  --spacing-x3: var(--base-spacing-006);
+  --spacing-x4: var(--base-spacing-008);
+  --spacing-x6: var(--base-spacing-012);
+  --spacing-x8: var(--base-spacing-016);
+  --spacing-x12: var(--base-spacing-024);
+  --spacing-x16: var(--base-spacing-032);
+  /** e.g. for smaller interactive areas that float above a background, e.g. a map */
+  --effect-shadow-default: var(--base-effect-position-none) var(--base-effect-position-m) var(--base-effect-blur-l) var(--base-effect-spread-none) var(--base-color-black-300);
+  /** e.g. for overlay dialogs, flyouts or menus */
+  --effect-shadow-strong: var(--base-effect-position-xxs) var(--base-effect-position-m) var(--base-effect-blur-xl) var(--base-effect-spread-none) var(--base-color-black-500);
+  /** for slight depth, e.g. layout building blocks in PIA or BPA */
+  --effect-shadow-weak: var(--base-effect-position-none) var(--base-effect-position-none) var(--base-effect-blur-l) var(--base-effect-spread-none) var(--base-color-black-100);
+  /** Used for long-form, descriptive text */
+  --text-body: 400 var(--base-text-font-size-body)/var(--base-text-line-height-body) var(--base-text-font-family-inter);
+  /** Used for long-form  (strongest), descriptive text, highlighted first line in SmartSearch results */
+  --text-body-highlighted: 700 var(--base-text-font-size-body)/var(--base-text-line-height-body) var(--base-text-font-family-inter);
+  /** Used for long-form (stronger), descriptive text */
+  --text-body-strong: 500 var(--base-text-font-size-body)/var(--base-text-line-height-body) var(--base-text-font-family-inter);
+  /** Used for long-form (thin), descriptive text */
+  --text-body-sub: 300 var(--base-text-font-size-body)/var(--base-text-line-height-body) var(--base-text-font-family-inter);
+  /** Used for small, functional text, such as UI labels. */
+  --text-caption: 400 var(--base-text-font-size-caption)/var(--base-text-line-height-caption) var(--base-text-font-family-inter);
+  /** Used for small (stronger), functional text, such as UI labels. */
+  --text-caption-strong: 500 var(--base-text-font-size-caption)/var(--base-text-line-height-caption) var(--base-text-font-family-inter);
+  /** Used for small, functional text, such as secondary content */
+  --text-description: 400 var(--base-text-font-size-description)/var(--base-text-line-height-description) var(--base-text-font-family-inter);
+  /** Used for small (strongest), functional highlighted text, such as in the second line of the SmartSearch results */
+  --text-description-highlighted: 700 var(--base-text-font-size-description)/var(--base-text-line-height-description) var(--base-text-font-family-inter);
+  /** Used for small (stronger), functional text, such as secondary content */
+  --text-description-strong: 500 var(--base-text-font-size-description)/var(--base-text-line-height-description) var(--base-text-font-family-inter);
+  /**
+   * The largest text (l), used for high-impact, short, and important screen content.
+   * Usage: Ideal for annotations, quotes, or standout information blocks.
+   */
+  --text-display-large: 300 var(--base-text-font-size-display-large)/var(--base-text-line-height-display-large) var(--base-text-font-family-inter);
+  /**
+   * The largest text (l, stronger), used for high-impact, short, and important screen content.
+   * Usage: Ideal for annotations, quotes, or standout information blocks.
+   */
+  --text-display-large-strong: 500 var(--base-text-font-size-display-large)/var(--base-text-line-height-display-large) var(--base-text-font-family-inter);
+  /**
+   * The largest text (m), used for high-impact, short, and important screen content.
+   * Usage: Ideal for annotations, quotes, or standout information blocks.
+   */
+  --text-display-medium: 300 var(--base-text-font-size-display-medium)/var(--base-text-line-height-display-medium) var(--base-text-font-family-inter);
+  /**
+   * The largest text (m, stronger), used for high-impact, short, and important screen content.
+   * Usage: Ideal for annotations, quotes, or standout information blocks.
+   */
+  --text-display-medium-strong: 500 var(--base-text-font-size-display-medium)/var(--base-text-line-height-display-medium) var(--base-text-font-family-inter);
+  /**
+   * The largest text (s), used for high-impact, short, and important screen content.
+   * Usage: Ideal for annotations, quotes, or standout information blocks.
+   */
+  --text-display-small: 300 var(--base-text-font-size-display-small)/var(--base-text-line-height-display-small) var(--base-text-font-family-inter);
+  /**
+   * The largest text (s, stronger), used for high-impact, short, and important screen content.
+   * Usage: Ideal for annotations, quotes, or standout information blocks.
+   */
+  --text-display-small-strong: 500 var(--base-text-font-size-display-small)/var(--base-text-line-height-display-small) var(--base-text-font-family-inter);
+  /** It is generally smaller or lighter than the title style but remains legible for secondary, descriptive, or informational text. */
+  --text-subtitle: 300 var(--base-text-font-size-subtitle)/var(--base-text-line-height-subtitle) var(--base-text-font-family-inter);
+  /** It is generally smaller or lighter than the title style  (stronger) but remains legible for secondary, descriptive, or informational text. */
+  --text-subtitle-strong: 500 var(--base-text-font-size-subtitle)/var(--base-text-line-height-subtitle) var(--base-text-font-family-inter);
+  /** Used for high-emphasis text, such as major content sections. Best suited for short, high-emphasis, or prominent text within app interfaces. Example: unique names */
+  --text-title-large: 300 var(--base-text-font-size-title-large)/var(--base-text-line-height-title-large) var(--base-text-font-family-inter);
+  /** Used for high-emphasis text (stronger), such as major content sections. Best suited for short, high-emphasis, or prominent text within app interfaces. Example: unique names */
+  --text-title-large-strong: 500 var(--base-text-font-size-title-large)/var(--base-text-line-height-title-large) var(--base-text-font-family-inter);
+  /** Used for high-emphasis text, such as titles in top app bars, dialogue headers or major content sections. Example: Toolbar, mobile top navbar, Navigation list */
+  --text-title-medium: 300 var(--base-text-font-size-title-medium)/var(--base-text-line-height-title-medium) var(--base-text-font-family-inter);
+  /** Used for high-emphasis text (stronger), such as titles in top app bars, dialogue headers or major content sections. Example: Toolbar, mobile top navbar, Navigation list */
+  --text-title-medium-strong: 500 var(--base-text-font-size-title-medium)/var(--base-text-line-height-title-medium) var(--base-text-font-family-inter);
+  /** Used for medium-emphasis text, such as section titles. Example: Field group, Widget, Box,... title */
+  --text-title-small: 300 var(--base-text-font-size-title-small)/var(--base-text-line-height-title-small) var(--base-text-font-family-inter);
+  /** Used for medium-emphasis text (stronger), such as section titles. Example: Field group, Widget, Box,... title */
+  --text-title-small-strong: 500 var(--base-text-font-size-title-small)/var(--base-text-line-height-title-small) var(--base-text-font-family-inter);
+}