@oneli8/tokens 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/tokens.css

@@ -0,0 +1,597 @@
+/* GENERATED from packages/tokens/src/tokens.json — do not edit.
+   Source: Figma "Oneli8 Design System — 1.0.0-beta.1", page Foundations (9:7). */
+:root {
+  --ol8-color-blue-120: #9bb3ff;
+  --ol8-color-blue-240: #6e8fef;
+  --ol8-color-blue-360: #4d6dd1;
+  --ol8-color-blue-480: #3854ae;
+  --ol8-color-blue-600: #2c438b;
+  --ol8-color-blue-720: #23366f;
+  --ol8-color-blue-840: #1a2a59;
+  --ol8-color-blue-930: #101b3a;
+  --ol8-color-blue-030: #f2f5ff;
+  --ol8-color-blue-060: #e2e9ff;
+  --ol8-color-blue-090: #c4d2ff;
+  --ol8-color-cyan-120: #75d3dd;
+  --ol8-color-cyan-240: #3ab7c5;
+  --ol8-color-cyan-360: #2096a7;
+  --ol8-color-cyan-480: #187789;
+  --ol8-color-cyan-600: #175f70;
+  --ol8-color-cyan-720: #174d5b;
+  --ol8-color-cyan-840: #163f4b;
+  --ol8-color-cyan-930: #0a252d;
+  --ol8-color-cyan-030: #effbfc;
+  --ol8-color-cyan-060: #d5f4f6;
+  --ol8-color-cyan-090: #aae7ec;
+  --ol8-color-green-120: #8cd2aa;
+  --ol8-color-green-240: #58b982;
+  --ol8-color-green-360: #349a65;
+  --ol8-color-green-480: #267b50;
+  --ol8-color-green-600: #216240;
+  --ol8-color-green-720: #1d4f35;
+  --ol8-color-green-840: #193f2c;
+  --ol8-color-green-930: #0c2418;
+  --ol8-color-green-030: #f1faf5;
+  --ol8-color-green-060: #dcf3e5;
+  --ol8-color-green-090: #bce6ce;
+  --ol8-color-yellow-120: #ffd13d;
+  --ol8-color-yellow-240: #f0b90b;
+  --ol8-color-yellow-360: #ce9500;
+  --ol8-color-yellow-480: #a76f00;
+  --ol8-color-yellow-600: #825100;
+  --ol8-color-yellow-720: #613b09;
+  --ol8-color-yellow-840: #4b2f0d;
+  --ol8-color-yellow-930: #2b1a08;
+  --ol8-color-yellow-030: #fff9e8;
+  --ol8-color-yellow-060: #fff0be;
+  --ol8-color-yellow-090: #ffe27d;
+  --ol8-color-orange-120: #ffa54d;
+  --ol8-color-orange-240: #f47b20;
+  --ol8-color-orange-360: #d95c0b;
+  --ol8-color-orange-480: #b74406;
+  --ol8-color-orange-600: #913408;
+  --ol8-color-orange-720: #70290d;
+  --ol8-color-orange-840: #57230f;
+  --ol8-color-orange-930: #321207;
+  --ol8-color-orange-030: #fff5ea;
+  --ol8-color-orange-060: #ffe7cb;
+  --ol8-color-orange-090: #ffc98f;
+  --ol8-color-pink-120: #ff94c4;
+  --ol8-color-pink-240: #f45a9d;
+  --ol8-color-pink-360: #d9367e;
+  --ol8-color-pink-480: #b62364;
+  --ol8-color-pink-600: #931d51;
+  --ol8-color-pink-720: #771a43;
+  --ol8-color-pink-840: #62183a;
+  --ol8-color-pink-930: #3b0920;
+  --ol8-color-pink-030: #fff1f8;
+  --ol8-color-pink-060: #ffe1f0;
+  --ol8-color-pink-090: #ffc3e0;
+  --ol8-color-violet-120: #c5a4ff;
+  --ol8-color-violet-240: #a574f2;
+  --ol8-color-violet-360: #864fd6;
+  --ol8-color-violet-480: #6c37b2;
+  --ol8-color-violet-600: #572d8e;
+  --ol8-color-violet-720: #472671;
+  --ol8-color-violet-840: #3a225b;
+  --ol8-color-violet-930: #241238;
+  --ol8-color-violet-030: #f8f4ff;
+  --ol8-color-violet-060: #efe6ff;
+  --ol8-color-violet-090: #dfcdff;
+  --ol8-color-red-120: #f99a92;
+  --ol8-color-red-240: #ed6a61;
+  --ol8-color-red-360: #d6473f;
+  --ol8-color-red-480: #b6332e;
+  --ol8-color-red-600: #922824;
+  --ol8-color-red-720: #772421;
+  --ol8-color-red-840: #64231f;
+  --ol8-color-red-930: #380f0d;
+  --ol8-color-red-030: #fff2f1;
+  --ol8-color-red-060: #ffe2e0;
+  --ol8-color-red-090: #ffc8c4;
+  --ol8-color-neutral-120: #d2c8b6;
+  --ol8-color-neutral-240: #b0a593;
+  --ol8-color-neutral-360: #897f70;
+  --ol8-color-neutral-480: #665e53;
+  --ol8-color-neutral-600: #4a443d;
+  --ol8-color-neutral-720: #302d29;
+  --ol8-color-neutral-840: #20201e;
+  --ol8-color-neutral-930: #151817;
+  --ol8-color-neutral-030: #fcfaf3;
+  --ol8-color-neutral-060: #f5f1e6;
+  --ol8-color-neutral-090: #e7e0d1;
+  --ol8-color-primary-120: #9bb3ff;
+  --ol8-color-primary-240: #6e8fef;
+  --ol8-color-primary-360: #4d6dd1;
+  --ol8-color-primary-480: #3854ae;
+  --ol8-color-primary-600: #2c438b;
+  --ol8-color-primary-720: #23366f;
+  --ol8-color-primary-840: #1a2a59;
+  --ol8-color-primary-930: #101b3a;
+  --ol8-color-primary-030: #f2f5ff;
+  --ol8-color-primary-060: #e2e9ff;
+  --ol8-color-primary-090: #c4d2ff;
+  --ol8-color-background-canvas: #fcfaf3;
+  --ol8-color-background-subtle: #f5f1e6;
+  --ol8-color-background-inverse: var(--ol8-color-primary-930);
+  --ol8-color-surface-default: #fcfaf3;
+  --ol8-color-surface-raised: #fcfaf3;
+  --ol8-color-surface-sunken: #f5f1e6;
+  --ol8-color-surface-selected: #d5f4f6;
+  --ol8-color-surface-disabled: #e7e0d1;
+  --ol8-color-text-primary: #151817;
+  --ol8-color-text-secondary: #302d29;
+  --ol8-color-text-muted: #4a443d;
+  --ol8-color-text-disabled: #665e53;
+  --ol8-color-text-inverse: #fcfaf3;
+  --ol8-color-text-link: var(--ol8-color-primary-600);
+  --ol8-color-icon-primary: #151817;
+  --ol8-color-icon-secondary: #665e53;
+  --ol8-color-icon-muted: #897f70;
+  --ol8-color-icon-disabled: #b0a593;
+  --ol8-color-icon-inverse: #fcfaf3;
+  --ol8-color-border-subtle: #e7e0d1;
+  --ol8-color-border-default: #897f70;
+  --ol8-color-border-strong: #665e53;
+  --ol8-color-border-disabled: #665e53;
+  --ol8-color-focus-inner: var(--ol8-color-primary-030);
+  --ol8-color-focus-outer: var(--ol8-color-primary-930);
+  --ol8-color-actionprimary-default: var(--ol8-color-primary-600);
+  --ol8-color-actionprimary-hover: var(--ol8-color-primary-720);
+  --ol8-color-actionprimary-pressed: var(--ol8-color-primary-840);
+  --ol8-color-actionprimary-content: #fcfaf3;
+  --ol8-color-actionprimary-disabled: #e7e0d1;
+  --ol8-color-actionprimary-disabledcontent: #665e53;
+  --ol8-color-actionsecondary-surfacedefault: #00000000;
+  --ol8-color-actionsecondary-surfacehover: var(--ol8-color-primary-030);
+  --ol8-color-actionsecondary-surfacepressed: var(--ol8-color-primary-060);
+  --ol8-color-actionsecondary-surfacedisabled: #00000000;
+  --ol8-color-actionsecondary-contentdefault: var(--ol8-color-primary-600);
+  --ol8-color-actionsecondary-contenthover: var(--ol8-color-primary-720);
+  --ol8-color-actionsecondary-contentpressed: var(--ol8-color-primary-840);
+  --ol8-color-actionsecondary-contentdisabled: #665e53;
+  --ol8-color-actionquiet-surfacedefault: #00000000;
+  --ol8-color-actionquiet-surfacehover: var(--ol8-color-primary-030);
+  --ol8-color-actionquiet-surfacepressed: var(--ol8-color-primary-060);
+  --ol8-color-actionquiet-surfacedisabled: #00000000;
+  --ol8-color-actionquiet-contentdefault: var(--ol8-color-primary-600);
+  --ol8-color-actionquiet-contenthover: var(--ol8-color-primary-720);
+  --ol8-color-actionquiet-contentpressed: var(--ol8-color-primary-840);
+  --ol8-color-actionquiet-contentdisabled: #665e53;
+  --ol8-color-actiondestructive-default: #922824;
+  --ol8-color-actiondestructive-hover: #772421;
+  --ol8-color-actiondestructive-pressed: #64231f;
+  --ol8-color-actiondestructive-content: #fcfaf3;
+  --ol8-color-actiondestructive-disabled: #e7e0d1;
+  --ol8-color-actiondestructive-disabledcontent: #665e53;
+  --ol8-color-feedbackinformative-surface: #174d5b;
+  --ol8-color-feedbackinformative-content: #fcfaf3;
+  --ol8-color-feedbackinformative-inlinecontent: var(--ol8-color-primary-600);
+  --ol8-color-feedbackpositive-surface: #216240;
+  --ol8-color-feedbackpositive-content: #fcfaf3;
+  --ol8-color-feedbackpositive-inlinecontent: #216240;
+  --ol8-color-feedbackcaution-surface: #ffe27d;
+  --ol8-color-feedbackcaution-content: #20201e;
+  --ol8-color-feedbackcaution-inlinecontent: #825100;
+  --ol8-color-feedbackcritical-surface: #922824;
+  --ol8-color-feedbackcritical-content: #fcfaf3;
+  --ol8-color-feedbackcritical-inlinecontent: #b6332e;
+  --ol8-color-selection-surface: var(--ol8-color-primary-060);
+  --ol8-color-selection-content: var(--ol8-color-primary-840);
+  --ol8-color-control-thumb: var(--ol8-color-primary-840);
+  --ol8-material-gem-color-cutedge-outerhigh: #f5f1e6ed;
+  --ol8-material-gem-color-cutedge-outermid: #9bb3ff7a;
+  --ol8-material-gem-color-cutedge-outerlow: #f5f1e608;
+  --ol8-material-gem-color-cutedge-outeraccent: #2096a75c;
+  --ol8-material-gem-color-cutedge-high: #f5f1e6b8;
+  --ol8-material-gem-color-cutedge-mid: #e2e9ff5c;
+  --ol8-material-gem-color-cutedge-low: #f5f1e608;
+  --ol8-material-gem-color-cutedge-shadow: #101b3a29;
+  --ol8-material-gem-color-quiet-environmentalface: #fcfaf37a;
+  --ol8-material-gem-color-quiet-stabilizedface: #f5f1e6b8;
+  --ol8-material-gem-color-quiet-opaqueequivalent: #fcfaf3;
+  --ol8-material-gem-color-innerthincut-face: #f5f1e6b8;
+  --ol8-material-gem-color-innerthincut-high: #f5f1e68a;
+  --ol8-material-gem-color-innerthincut-mid: #9bb3ff2e;
+  --ol8-material-gem-color-innerthincut-low: #f5f1e608;
+  --ol8-material-gem-color-facet-cool: #2c438b2e;
+  --ol8-material-gem-color-facet-warm: #f47b201f;
+  --ol8-material-gem-color-family-emerald-environmentalface: #0c24187a;
+  --ol8-material-gem-color-family-emerald-stabilizedface: #0c241845;
+  --ol8-material-gem-color-family-emerald-edge: #58b982a8;
+  --ol8-material-gem-color-family-emerald-innerhigh: #bce6ce5c;
+  --ol8-material-gem-color-family-emerald-innermid: #58b9822e;
+  --ol8-material-gem-color-family-emerald-innerlow: #bce6ce08;
+  --ol8-material-gem-color-family-emerald-opaqueequivalent: #0c2418;
+  --ol8-material-gem-color-family-ruby-environmentalface: #380f0d7a;
+  --ol8-material-gem-color-family-ruby-stabilizedface: #380f0d45;
+  --ol8-material-gem-color-family-ruby-edge: #ed6a61a8;
+  --ol8-material-gem-color-family-ruby-innerhigh: #ffc8c45c;
+  --ol8-material-gem-color-family-ruby-innermid: #ed6a612e;
+  --ol8-material-gem-color-family-ruby-innerlow: #ffc8c408;
+  --ol8-material-gem-color-family-ruby-opaqueequivalent: #380f0d;
+  --ol8-material-gem-color-family-sapphire-environmentalface: #101b3a7a;
+  --ol8-material-gem-color-family-sapphire-stabilizedface: #101b3a4d;
+  --ol8-material-gem-color-family-sapphire-edge: #6e8fefa8;
+  --ol8-material-gem-color-family-sapphire-innerhigh: #e2e9ff63;
+  --ol8-material-gem-color-family-sapphire-innermid: #6e8fef2e;
+  --ol8-material-gem-color-family-sapphire-innerlow: #e2e9ff08;
+  --ol8-material-gem-color-family-sapphire-opaqueequivalent: #101b3a;
+  --ol8-material-gem-color-family-amethyst-environmentalface: #2412387a;
+  --ol8-material-gem-color-family-amethyst-stabilizedface: #24123845;
+  --ol8-material-gem-color-family-amethyst-edge: #a574f2a8;
+  --ol8-material-gem-color-family-amethyst-innerhigh: #dfcdff5c;
+  --ol8-material-gem-color-family-amethyst-innermid: #a574f22e;
+  --ol8-material-gem-color-family-amethyst-innerlow: #dfcdff08;
+  --ol8-material-gem-color-family-amethyst-opaqueequivalent: #241238;
+  --ol8-material-control-gem--primary-start: #3854ae;
+  --ol8-material-control-gem--primary-mid: #2c438b;
+  --ol8-material-control-gem--primary-end: #23366f;
+  --ol8-material-control-gem--primary-hover-start: #2c438b;
+  --ol8-material-control-gem--primary-hover-mid: #23366f;
+  --ol8-material-control-gem--primary-hover-end: #1a2a59;
+  --ol8-material-control-gem--primary-loading-start: #23366f;
+  --ol8-material-control-gem--primary-loading-mid: #1a2a59;
+  --ol8-material-control-gem--primary-loading-end: #101b3a;
+  --ol8-material-control-gem--primary-content: #fcfaf3;
+  --ol8-material-control-gem--secondary-high: #fcfaf338;
+  --ol8-material-control-gem--secondary-mid: #fcfaf30d;
+  --ol8-material-control-gem--secondary-low: #fcfaf31f;
+  --ol8-material-control-gem--secondary-hover-high: #fcfaf34d;
+  --ol8-material-control-gem--secondary-hover-mid: #fcfaf317;
+  --ol8-material-control-gem--secondary-hover-low: #fcfaf32e;
+  --ol8-material-control-gem--secondary-loading-high: #fcfaf363;
+  --ol8-material-control-gem--secondary-loading-mid: #fcfaf31f;
+  --ol8-material-control-gem--secondary-loading-low: #fcfaf33d;
+  --ol8-material-control-gem--secondary-content: #fcfaf3;
+  --ol8-material-control-gem--rim-default: #fcfaf33d;
+  --ol8-material-control-gem--rim-specular: #fcfaf38a;
+  --ol8-material-control-gem--rim-hover: #fcfaf35c;
+  --ol8-material-control-gem--blur: 12px;
+  --ol8-material-control-gem--stop-1: 14.639%;
+  --ol8-material-control-gem--stop-2: 48.586%;
+  --ol8-material-control-gem--stop-3: 85.361%;
+  --ol8-dimension-scale-108: 108px;
+  --ol8-dimension-scale-000: 0px;
+  --ol8-dimension-scale-003: 3px;
+  --ol8-dimension-scale-006: 6px;
+  --ol8-dimension-scale-009: 9px;
+  --ol8-dimension-scale-012: 12px;
+  --ol8-dimension-scale-015: 15px;
+  --ol8-dimension-scale-018: 18px;
+  --ol8-dimension-scale-024: 24px;
+  --ol8-dimension-scale-030: 30px;
+  --ol8-dimension-scale-036: 36px;
+  --ol8-dimension-scale-042: 42px;
+  --ol8-dimension-scale-048: 48px;
+  --ol8-dimension-scale-060: 60px;
+  --ol8-dimension-scale-072: 72px;
+  --ol8-dimension-scale-084: 84px;
+  --ol8-dimension-scale-096: 96px;
+  --ol8-shape-radius-none: 0px;
+  --ol8-shape-radius-subtle: 3px;
+  --ol8-shape-radius-compact: 6px;
+  --ol8-shape-radius-medium: 9px;
+  --ol8-shape-radius-standard: 12px;
+  --ol8-shape-radius-comfortable: 18px;
+  --ol8-shape-radius-container: 24px;
+  --ol8-shape-radius-display: 36px;
+  --ol8-shape-radius-full: 999px;
+  --ol8-font-family-display: "Syne", ui-sans-serif, system-ui, sans-serif;
+  --ol8-font-family-functional: "AR One Sans", ui-sans-serif, system-ui, sans-serif;
+  --ol8-font-size-012: 12px;
+  --ol8-font-size-016: 16px;
+  --ol8-font-size-021: 21px;
+  --ol8-font-size-030: 30px;
+  --ol8-font-size-039: 39px;
+  --ol8-font-size-051: 51px;
+  --ol8-font-size-066: 66px;
+  --ol8-font-line-018: 18px;
+  --ol8-font-line-024: 24px;
+  --ol8-font-line-030: 30px;
+  --ol8-font-line-039: 39px;
+  --ol8-font-line-048: 48px;
+  --ol8-font-line-060: 60px;
+  --ol8-font-line-072: 72px;
+  --ol8-font-weight-regular: 450;
+  --ol8-font-weight-semibold: 600;
+  --ol8-font-weight-bold: 690;
+  --ol8-font-variation-functional: "ARRR" 10;
+  --ol8-border-width-standard: 2px;
+  --ol8-spacing-stack-grouped: 18px;
+  --ol8-spacing-stack-related: 12px;
+  --ol8-spacing-inset-standard: 18px;
+  --ol8-elevation-flat: none;
+  --ol8-elevation-raised: 0 3px 6px 0 rgba(22,63,75,0.12);
+  --ol8-elevation-floating: 0 3px 6px 0 rgba(22,63,75,0.12), 0 6px 18px -3px rgba(22,63,75,0.18);
+  --ol8-elevation-overlay: 0 6px 12px 0 rgba(22,63,75,0.18), 0 12px 36px -6px rgba(22,63,75,0.24);
+  --ol8-elevation-blocking: 0 12px 24px 0 rgba(22,63,75,0.24), 0 24px 72px -12px rgba(22,63,75,0.36);
+  --ol8-icon-source-size: 24px;
+  --ol8-icon-source-stroke: 1.8;
+  --ol8-icon-size-108: 108px;
+  --ol8-icon-size-009: 9px;
+  --ol8-icon-size-012: 12px;
+  --ol8-icon-size-018: 18px;
+  --ol8-icon-size-024: 24px;
+  --ol8-icon-size-030: 30px;
+  --ol8-icon-size-036: 36px;
+  --ol8-icon-size-048: 48px;
+  --ol8-icon-size-060: 60px;
+  --ol8-icon-size-072: 72px;
+  --ol8-icon-size-096: 96px;
+  --ol8-component-choice-chip-terminal: 12px;
+  --ol8-component-choice-chip-height-standard: 36px;
+  --ol8-component-choice-chip-target-standard: 48px;
+  --ol8-component-choice-chip-rail-inset-standard: 12px;
+  --ol8-component-button-gap-compact: 6px;
+  --ol8-component-button-gap-comfortable: 9px;
+  --ol8-component-button-paddinginline-compact: 12px;
+  --ol8-component-button-paddinginline-standard: 15px;
+  --ol8-component-button-paddinginline-comfortable: 18px;
+  --ol8-component-button-paddinginline-large: 24px;
+  --ol8-component-button-height-compact: 36px;
+  --ol8-component-button-height-standard: 42px;
+  --ol8-component-button-height-comfortable: 48px;
+  --ol8-component-button-height-large: 60px;
+  --ol8-component-button-radius-compact: 6px;
+  --ol8-component-button-radius-standard: 9px;
+  --ol8-component-button-radius-comfortable: 12px;
+  --ol8-component-button-radius-large: 12px;
+  --ol8-component-button-secondaryboundary: 2px;
+  --ol8-component-icon-stroke: 1.8;
+  --ol8-component-iconbutton-box-compact: 36px;
+  --ol8-component-iconbutton-box-standard: 42px;
+  --ol8-component-iconbutton-box-comfortable: 48px;
+  --ol8-component-iconbutton-box-large: 60px;
+  --ol8-component-iconbutton-target-compact: 48px;
+  --ol8-component-iconbutton-target-standard: 48px;
+  --ol8-component-iconbutton-target-comfortable: 48px;
+  --ol8-component-iconbutton-target-large: 60px;
+  --ol8-component-iconbutton-radius-compact: 9px;
+  --ol8-component-iconbutton-radius-standard: 12px;
+  --ol8-component-iconbutton-radius-comfortable: 12px;
+  --ol8-component-iconbutton-radius-large: 18px;
+  --ol8-component-iconbutton-artwork-compact: 18px;
+  --ol8-component-iconbutton-artwork-standard: 18px;
+  --ol8-component-iconbutton-artwork-comfortable: 24px;
+  --ol8-component-iconbutton-artwork-large: 24px;
+  --ol8-component-iconbutton-pressedscrim: rgba(0,0,0,0.24);
+  --ol8-component-checkbox-radius-compact: 3px;
+  --ol8-component-checkbox-radius-comfortable: 6px;
+  --ol8-component-checkbox-boundary: 1.8px;
+  --ol8-component-radio-boundary: 1.8px;
+  --ol8-component-radio-dot-compact: 9px;
+  --ol8-component-radio-dot-comfortable: 12px;
+  --ol8-component-switch-trackwidth-compact: 36px;
+  --ol8-component-switch-trackwidth-comfortable: 48px;
+  --ol8-component-switch-trackheight-compact: 18px;
+  --ol8-component-switch-trackheight-comfortable: 24px;
+  --ol8-component-switch-thumb-compact: 12px;
+  --ol8-component-switch-thumb-comfortable: 18px;
+  --ol8-component-switch-inset: 3px;
+  --ol8-component-choice-optical-stroke: 1.8px;
+  --ol8-component-choice-mixed-bar-width: 9px;
+  --ol8-component-choice-mixed-bar-height: 1.8px;
+  --ol8-component-choice-gap-compact: 6px;
+  --ol8-component-choice-gap-standard: 9px;
+  --ol8-component-choice-rowminimum: 48px;
+  --ol8-component-selectionoption-inset-standard: 12px;
+  --ol8-component-selectionoption-inset-large: 15px;
+  --ol8-component-selectionoption-minimum-standard: 48px;
+  --ol8-component-selectionoption-minimum-large: 60px;
+  --ol8-focus-ring-innerwidth: 3px;
+  --ol8-focus-ring-outerwidth: 3px;
+  --ol8-size-icon-small: 18px;
+  --ol8-size-icon-standard: 24px;
+  --ol8-size-icon-micro: 9px;
+  --ol8-size-icon-compact: 12px;
+}
+
+[data-ol8-color-scheme="dark"] {
+  --ol8-color-background-canvas: var(--ol8-color-neutral-930);
+  --ol8-color-background-subtle: var(--ol8-color-neutral-840);
+  --ol8-color-background-inverse: var(--ol8-color-neutral-030);
+  --ol8-color-surface-default: var(--ol8-color-neutral-840);
+  --ol8-color-surface-raised: var(--ol8-color-neutral-720);
+  --ol8-color-surface-sunken: var(--ol8-color-neutral-930);
+  --ol8-color-surface-selected: var(--ol8-color-primary-120);
+  --ol8-color-surface-disabled: var(--ol8-color-blue-840);
+  --ol8-color-text-primary: var(--ol8-color-neutral-030);
+  --ol8-color-text-secondary: var(--ol8-color-neutral-120);
+  --ol8-color-text-muted: var(--ol8-color-neutral-240);
+  --ol8-color-text-disabled: var(--ol8-color-neutral-240);
+  --ol8-color-text-inverse: var(--ol8-color-neutral-930);
+  --ol8-color-text-link: var(--ol8-color-primary-120);
+  --ol8-color-icon-primary: var(--ol8-color-neutral-030);
+  --ol8-color-icon-secondary: var(--ol8-color-neutral-120);
+  --ol8-color-icon-muted: var(--ol8-color-neutral-240);
+  --ol8-color-icon-disabled: var(--ol8-color-neutral-360);
+  --ol8-color-icon-inverse: var(--ol8-color-neutral-930);
+  --ol8-color-border-subtle: var(--ol8-color-neutral-720);
+  --ol8-color-border-default: var(--ol8-color-neutral-240);
+  --ol8-color-border-strong: var(--ol8-color-neutral-120);
+  --ol8-color-border-disabled: var(--ol8-color-neutral-240);
+  --ol8-color-focus-inner: var(--ol8-color-primary-930);
+  --ol8-color-focus-outer: var(--ol8-color-primary-030);
+  --ol8-color-actionprimary-default: var(--ol8-color-primary-120);
+  --ol8-color-actionprimary-hover: var(--ol8-color-primary-090);
+  --ol8-color-actionprimary-pressed: var(--ol8-color-primary-060);
+  --ol8-color-actionprimary-content: var(--ol8-color-primary-930);
+  --ol8-color-actionprimary-disabled: var(--ol8-color-blue-840);
+  --ol8-color-actionprimary-disabledcontent: var(--ol8-color-neutral-240);
+  --ol8-color-actionsecondary-surfacedefault: #00000000;
+  --ol8-color-actionsecondary-surfacehover: var(--ol8-color-primary-930);
+  --ol8-color-actionsecondary-surfacepressed: var(--ol8-color-primary-840);
+  --ol8-color-actionsecondary-surfacedisabled: #00000000;
+  --ol8-color-actionsecondary-contentdefault: var(--ol8-color-primary-120);
+  --ol8-color-actionsecondary-contenthover: var(--ol8-color-primary-120);
+  --ol8-color-actionsecondary-contentpressed: var(--ol8-color-primary-090);
+  --ol8-color-actionsecondary-contentdisabled: var(--ol8-color-neutral-240);
+  --ol8-color-actionquiet-surfacedefault: #00000000;
+  --ol8-color-actionquiet-surfacehover: var(--ol8-color-primary-930);
+  --ol8-color-actionquiet-surfacepressed: var(--ol8-color-primary-840);
+  --ol8-color-actionquiet-surfacedisabled: #00000000;
+  --ol8-color-actionquiet-contentdefault: var(--ol8-color-primary-120);
+  --ol8-color-actionquiet-contenthover: var(--ol8-color-primary-120);
+  --ol8-color-actionquiet-contentpressed: var(--ol8-color-primary-090);
+  --ol8-color-actionquiet-contentdisabled: var(--ol8-color-neutral-240);
+  --ol8-color-actiondestructive-default: var(--ol8-color-red-120);
+  --ol8-color-actiondestructive-hover: var(--ol8-color-red-090);
+  --ol8-color-actiondestructive-pressed: var(--ol8-color-red-060);
+  --ol8-color-actiondestructive-content: var(--ol8-color-red-930);
+  --ol8-color-actiondestructive-disabled: var(--ol8-color-blue-840);
+  --ol8-color-actiondestructive-disabledcontent: var(--ol8-color-neutral-240);
+  --ol8-color-feedbackinformative-surface: var(--ol8-color-cyan-120);
+  --ol8-color-feedbackinformative-content: var(--ol8-color-cyan-930);
+  --ol8-color-feedbackinformative-inlinecontent: var(--ol8-color-blue-120);
+  --ol8-color-feedbackpositive-surface: var(--ol8-color-green-120);
+  --ol8-color-feedbackpositive-content: var(--ol8-color-green-930);
+  --ol8-color-feedbackpositive-inlinecontent: var(--ol8-color-green-120);
+  --ol8-color-feedbackcaution-surface: var(--ol8-color-yellow-120);
+  --ol8-color-feedbackcaution-content: var(--ol8-color-yellow-930);
+  --ol8-color-feedbackcaution-inlinecontent: var(--ol8-color-yellow-120);
+  --ol8-color-feedbackcritical-surface: var(--ol8-color-red-120);
+  --ol8-color-feedbackcritical-content: var(--ol8-color-red-930);
+  --ol8-color-feedbackcritical-inlinecontent: var(--ol8-color-red-120);
+  --ol8-color-selection-surface: var(--ol8-color-primary-120);
+  --ol8-color-selection-content: var(--ol8-color-primary-930);
+  --ol8-material-control-gem--primary-start: var(--ol8-color-primary-600);
+  --ol8-material-control-gem--primary-mid: var(--ol8-color-primary-720);
+  --ol8-material-control-gem--primary-end: var(--ol8-color-primary-840);
+  --ol8-material-control-gem--primary-hover-start: var(--ol8-color-primary-720);
+  --ol8-material-control-gem--primary-hover-mid: var(--ol8-color-primary-840);
+  --ol8-material-control-gem--primary-hover-end: var(--ol8-color-primary-930);
+  --ol8-material-gem-color-quiet-environmentalface: #1518177a;
+  --ol8-material-gem-color-quiet-stabilizedface: #20201eb8;
+  --ol8-material-gem-color-quiet-opaqueequivalent: var(--ol8-color-neutral-840);
+  --ol8-material-gem-color-cutedge-high: #d2c8b66b;
+  --ol8-material-gem-color-cutedge-mid: #9bb3ff33;
+  --ol8-material-gem-color-cutedge-low: #d2c8b608;
+  --ol8-material-gem-color-cutedge-shadow: #0a252d5c;
+  --ol8-material-gem-color-innerthincut-face: #20201eb8;
+  --ol8-material-gem-color-innerthincut-high: #d2c8b645;
+  --ol8-material-gem-color-innerthincut-mid: #9bb3ff1f;
+  --ol8-material-gem-color-innerthincut-low: #d2c8b608;
+  --ol8-material-gem-color-facet-cool: #9bb3ff24;
+  --ol8-material-gem-color-facet-warm: #ffa54d17;
+}
+
+[data-ol8-primary="blue"] {
+  --ol8-color-primary-030: var(--ol8-color-blue-030);
+  --ol8-color-primary-060: var(--ol8-color-blue-060);
+  --ol8-color-primary-090: var(--ol8-color-blue-090);
+  --ol8-color-primary-120: var(--ol8-color-blue-120);
+  --ol8-color-primary-240: var(--ol8-color-blue-240);
+  --ol8-color-primary-360: var(--ol8-color-blue-360);
+  --ol8-color-primary-480: var(--ol8-color-blue-480);
+  --ol8-color-primary-600: var(--ol8-color-blue-600);
+  --ol8-color-primary-720: var(--ol8-color-blue-720);
+  --ol8-color-primary-840: var(--ol8-color-blue-840);
+  --ol8-color-primary-930: var(--ol8-color-blue-930);
+}
+
+[data-ol8-primary="orange"] {
+  --ol8-color-primary-030: var(--ol8-color-orange-030);
+  --ol8-color-primary-060: var(--ol8-color-orange-060);
+  --ol8-color-primary-090: var(--ol8-color-orange-090);
+  --ol8-color-primary-120: var(--ol8-color-orange-120);
+  --ol8-color-primary-240: var(--ol8-color-orange-240);
+  --ol8-color-primary-360: var(--ol8-color-orange-360);
+  --ol8-color-primary-480: var(--ol8-color-orange-480);
+  --ol8-color-primary-600: var(--ol8-color-orange-600);
+  --ol8-color-primary-720: var(--ol8-color-orange-720);
+  --ol8-color-primary-840: var(--ol8-color-orange-840);
+  --ol8-color-primary-930: var(--ol8-color-orange-930);
+}
+
+[data-ol8-primary="green"] {
+  --ol8-color-primary-030: var(--ol8-color-green-030);
+  --ol8-color-primary-060: var(--ol8-color-green-060);
+  --ol8-color-primary-090: var(--ol8-color-green-090);
+  --ol8-color-primary-120: var(--ol8-color-green-120);
+  --ol8-color-primary-240: var(--ol8-color-green-240);
+  --ol8-color-primary-360: var(--ol8-color-green-360);
+  --ol8-color-primary-480: var(--ol8-color-green-480);
+  --ol8-color-primary-600: var(--ol8-color-green-600);
+  --ol8-color-primary-720: var(--ol8-color-green-720);
+  --ol8-color-primary-840: var(--ol8-color-green-840);
+  --ol8-color-primary-930: var(--ol8-color-green-930);
+}
+
+.ol8-type-display-large {
+  font-family: var(--ol8-font-family-display);
+  font-size: var(--ol8-font-size-066);
+  line-height: var(--ol8-font-line-072);
+  font-weight: var(--ol8-font-weight-bold);
+  letter-spacing: -2px;
+}
+
+.ol8-type-display-medium {
+  font-family: var(--ol8-font-family-display);
+  font-size: var(--ol8-font-size-051);
+  line-height: var(--ol8-font-line-060);
+  font-weight: var(--ol8-font-weight-bold);
+  letter-spacing: -1.5px;
+}
+
+.ol8-type-display-small {
+  font-family: var(--ol8-font-family-display);
+  font-size: var(--ol8-font-size-039);
+  line-height: var(--ol8-font-line-048);
+  font-weight: var(--ol8-font-weight-semibold);
+  letter-spacing: -1px;
+}
+
+.ol8-type-title-large {
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-039);
+  line-height: var(--ol8-font-line-048);
+  font-weight: var(--ol8-font-weight-semibold);
+  letter-spacing: -0.5px;
+  font-variation-settings: var(--ol8-font-variation-functional);
+}
+
+.ol8-type-title-medium {
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-030);
+  line-height: var(--ol8-font-line-039);
+  font-weight: var(--ol8-font-weight-semibold);
+  letter-spacing: 0px;
+  font-variation-settings: var(--ol8-font-variation-functional);
+}
+
+.ol8-type-title-small {
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-021);
+  line-height: var(--ol8-font-line-030);
+  font-weight: var(--ol8-font-weight-semibold);
+  letter-spacing: 0px;
+  font-variation-settings: var(--ol8-font-variation-functional);
+}
+
+.ol8-type-body-large {
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-021);
+  line-height: var(--ol8-font-line-030);
+  font-weight: var(--ol8-font-weight-regular);
+  letter-spacing: 0px;
+  font-variation-settings: var(--ol8-font-variation-functional);
+}
+
+.ol8-type-body-medium {
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-016);
+  line-height: var(--ol8-font-line-024);
+  font-weight: var(--ol8-font-weight-regular);
+  letter-spacing: 0px;
+  font-variation-settings: var(--ol8-font-variation-functional);
+}
+
+.ol8-type-body-small {
+  font-family: var(--ol8-font-family-functional);
+  font-size: var(--ol8-font-size-012);
+  line-height: var(--ol8-font-line-018);
+  font-weight: var(--ol8-font-weight-regular);
+  letter-spacing: 1px;
+  font-variation-settings: var(--ol8-font-variation-functional);
+}