@justeattakeaway/pie-css
Version:
A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.
972 lines • 122 kB
CSS
:root {
/* Global tokens - Color */
--dt-color-aubergine-10: #e7d6e7;
--dt-color-aubergine-80: #452844;
--dt-color-berry-10: #ffe7eb;
--dt-color-berry-90: #622d35;
--dt-color-black: #000;
--dt-color-blue: #125fca;
--dt-color-blue-10: #ebf6fa;
--dt-color-blue-25: #c1dade;
--dt-color-blue-30: #7aadf6;
--dt-color-blue-70: #094dac;
--dt-color-blue-90: #083343;
--dt-color-blue-dark-hc: #1054b4;
--dt-color-blue-light-hc: #8bbcfe;
--dt-color-charcoal-30: #d7d9da;
--dt-color-charcoal-40: #b7bdbe;
--dt-color-charcoal-50: #8c999b;
--dt-color-charcoal-57: #68797d;
--dt-color-charcoal-60: #5d7074;
--dt-color-charcoal-70: #3c4c4f;
--dt-color-charcoal-75: #303d3f;
--dt-color-charcoal-80: #242e30;
--dt-color-cupcake-10: #e7f4f6;
--dt-color-cupcake-90: #254043;
--dt-color-green: #017a39;
--dt-color-green-10: #e5faef;
--dt-color-green-30: #22bf65;
--dt-color-green-90: #273f33;
--dt-color-green-dark-hc: #196634;
--dt-color-green-light-hc: #26d46e;
--dt-color-mozzarella-10: #f5f3f1;
--dt-color-mozzarella-100: #1a1a19;
--dt-color-mozzarella-20: #efedea;
--dt-color-mozzarella-30: #dbd9d7;
--dt-color-mozzarella-5: #fcfcfc;
--dt-color-mozzarella-50: #9e9c9a;
--dt-color-mozzarella-55: #8B8A88;
--dt-color-mozzarella-60: #797876;
--dt-color-mozzarella-70: #575655;
--dt-color-mozzarella-75: #494847;
--dt-color-mozzarella-80: #3b3a39;
--dt-color-mozzarella-90: #262626;
--dt-color-orange: #f36805;
--dt-color-orange-10: #ffead4;
--dt-color-orange-30: #ff8000;
--dt-color-orange-55: #f75e28;
--dt-color-orange-90: #41301f;
--dt-color-orange-dark-hc: #a33100;
--dt-color-purple: #5b3d5b;
--dt-color-purple-light-hc: #ba98ba;
--dt-color-red: #d50525;
--dt-color-red-10: #ffe9ea;
--dt-color-red-25: #f2a6b0;
--dt-color-red-30: #f68179;
--dt-color-red-40: #e22c3e;
--dt-color-red-90: #491e24;
--dt-color-red-dark-hc: #a4041f;
--dt-color-red-light-hc: #ff7a80;
--dt-color-system-purple: #800080;
--dt-color-system-purple-10: #c58af9;
--dt-color-tomato-5: #ffd3bf;
--dt-color-tomato-90: #622b18;
--dt-color-turmeric-5: #fff9de;
--dt-color-turmeric-60: #bf8b09;
--dt-color-turmeric-80: #745300;
--dt-color-white: #fff;
--dt-color-yellow: #f6c243;
--dt-color-yellow-10: #fff9df;
--dt-color-yellow-90: #474630;
--dt-color-yellow-dark-hc: #685731;
/* Alias tokens - Color */
/* Default color theme */
--dt-color-background-default: var(--dt-color-mozzarella-5);
--dt-color-background-subtle: var(--dt-color-mozzarella-10);
--dt-color-background-dark: var(--dt-color-mozzarella-100);
--dt-color-container-default: var(--dt-color-white);
--dt-color-container-subtle: var(--dt-color-mozzarella-10);
--dt-color-container-strong: var(--dt-color-mozzarella-20);
--dt-color-container-dark: var(--dt-color-mozzarella-90);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-mozzarella-90);
--dt-color-container-inverse-alternative: var(--dt-color-mozzarella-90);
--dt-color-border-default: var(--dt-color-mozzarella-20);
--dt-color-border-subtle: var(--dt-color-mozzarella-10);
--dt-color-border-strong: var(--dt-color-mozzarella-30);
--dt-color-border-inverse: var(--dt-color-mozzarella-70);
--dt-color-border-selected: var(--dt-color-mozzarella-50);
--dt-color-border-selected-brand: var(--dt-color-orange);
--dt-color-border-form: var(--dt-color-mozzarella-55);
--dt-color-divider-default: rgb(0,0,0,0.08);
--dt-color-divider-inverse: rgb(255,255,255,0.20);
--dt-color-interactive-brand: var(--dt-color-orange);
--dt-color-interactive-primary: var(--dt-color-mozzarella-90);
--dt-color-interactive-secondary: var(--dt-color-mozzarella-10);
--dt-color-interactive-inverse: var(--dt-color-white);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-mozzarella-60);
--dt-color-interactive-error: var(--dt-color-red);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red);
--dt-color-support-warning: var(--dt-color-yellow);
--dt-color-support-positive: var(--dt-color-green);
--dt-color-support-info: var(--dt-color-blue);
--dt-color-support-neutral: var(--dt-color-mozzarella-20);
--dt-color-support-error-02: var(--dt-color-red-10);
--dt-color-support-warning-02: var(--dt-color-yellow-10);
--dt-color-support-positive-02: var(--dt-color-green-10);
--dt-color-support-info-02: var(--dt-color-blue-10);
--dt-color-support-info-inverse: var(--dt-color-blue-30);
--dt-color-support-positive-inverse: var(--dt-color-green-30);
--dt-color-support-neutral-persistent: var(--dt-color-mozzarella-20);
--dt-color-support-error-inverse: var(--dt-color-red-40);
--dt-color-support-warning-inverse: var(--dt-color-yellow);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-orange-10);
--dt-color-support-brand-03: var(--dt-color-blue-25);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
--dt-color-support-brand-04: var(--dt-color-red-25);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
--dt-color-support-brand-05: var(--dt-color-yellow);
--dt-color-support-brand-05-subtle: var(--dt-color-turmeric-5);
--dt-color-support-brand-06: var(--dt-color-purple);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
--dt-color-support-brand-07: var(--dt-color-orange-55);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
--dt-color-content-default: var(--dt-color-charcoal-80);
--dt-color-content-subdued: var(--dt-color-charcoal-70);
--dt-color-content-interactive-brand: var(--dt-color-orange);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-white);
--dt-color-content-interactive-secondary: var(--dt-color-charcoal-80);
--dt-color-content-interactive-tertiary: var(--dt-color-charcoal-75);
--dt-color-content-interactive-subdued: var(--dt-color-charcoal-60);
--dt-color-content-interactive-inverse: var(--dt-color-charcoal-80);
--dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
--dt-color-content-interactive-error: var(--dt-color-red);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-charcoal-80);
--dt-color-content-inverse: var(--dt-color-white);
--dt-color-content-link: var(--dt-color-charcoal-80);
--dt-color-content-link-distinct: var(--dt-color-blue);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-white);
--dt-color-content-link-visited: var(--dt-color-system-purple);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
--dt-color-content-error: var(--dt-color-red);
--dt-color-content-placeholder: var(--dt-color-charcoal-57);
--dt-color-content-positive: var(--dt-color-green);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange);
--dt-color-hover-01-bg: #000;
--dt-color-hover-01: 4%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #fff;
--dt-color-hover-02: 8%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #000;
--dt-color-active-01: 12%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #fff;
--dt-color-active-02: 20%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #fff;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-white);
--dt-color-focus-outer: var(--dt-color-blue-70);
--dt-color-disabled-01: var(--dt-color-mozzarella-20);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-80);
--dt-color-skeleton-01: var(--dt-color-mozzarella-10);
--dt-color-skeleton-02: var(--dt-color-mozzarella-20);
--dt-color-skeleton-03: var(--dt-color-white);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
/* Global tokens - Font */
--dt-font-family-code: 'PTMono';
--dt-font-family-primary: 'JetSansDigital';
--dt-font-family-secondary: 'Arial';
--dt-font-paragraph-spacing-01: 16;
--dt-font-paragraph-spacing-02: 14;
--dt-font-paragraph-spacing-03: 12;
/* Size-12 font theme */
--dt-font-size-12: 12;
--dt-font-size-12-line-height: 16;
/* Size-14 font theme */
--dt-font-size-14: 14;
--dt-font-size-14-line-height: 20;
/* Size-16 font theme */
--dt-font-size-16: 16;
--dt-font-size-16-line-height: 24;
/* Size-20 font theme */
--dt-font-size-20: 20;
--dt-font-size-20-line-height: 28;
/* Size-24 font theme */
--dt-font-size-24: 24;
--dt-font-size-24-line-height: 32;
/* Size-28 font theme */
--dt-font-size-28: 28;
--dt-font-size-28-line-height: 36;
/* Size-32 font theme */
--dt-font-size-32: 32;
--dt-font-size-32-line-height: 40;
/* Size-48 font theme */
--dt-font-size-48: 48;
--dt-font-size-48-line-height: 56;
--dt-font-style-underline: underline;
--dt-font-weight-bold: 700;
--dt-font-weight-extrabold: 800;
--dt-font-weight-regular: 400;
/* Alias tokens - Font */
/* Heading-s font theme */
--dt-font-heading-s-size--wide: var(--dt-font-size-20);
--dt-font-heading-s-size--narrow: var(--dt-font-size-16);
--dt-font-heading-s-family: var(--dt-font-family-primary);
--dt-font-heading-s-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-s-line-height--wide: var(--dt-font-size-20-line-height);
--dt-font-heading-s-line-height--narrow: var(--dt-font-size-16-line-height);
/* Heading-m font theme */
--dt-font-heading-m-size--wide: var(--dt-font-size-24);
--dt-font-heading-m-size--narrow: var(--dt-font-size-20);
--dt-font-heading-m-family: var(--dt-font-family-primary);
--dt-font-heading-m-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-m-line-height--wide: var(--dt-font-size-24-line-height);
--dt-font-heading-m-line-height--narrow: var(--dt-font-size-20-line-height);
/* Heading-l font theme */
--dt-font-heading-l-size--wide: var(--dt-font-size-28);
--dt-font-heading-l-size--narrow: var(--dt-font-size-24);
--dt-font-heading-l-family: var(--dt-font-family-primary);
--dt-font-heading-l-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-l-line-height--wide: var(--dt-font-size-28-line-height);
--dt-font-heading-l-line-height--narrow: var(--dt-font-size-24-line-height);
/* Heading-xl font theme */
--dt-font-heading-xl-size--wide: var(--dt-font-size-32);
--dt-font-heading-xl-size--narrow: var(--dt-font-size-28);
--dt-font-heading-xl-family: var(--dt-font-family-primary);
--dt-font-heading-xl-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-xl-line-height--wide: var(--dt-font-size-32-line-height);
--dt-font-heading-xl-line-height--narrow: var(--dt-font-size-28-line-height);
/* Heading-xxl font theme */
--dt-font-heading-xxl-size--wide: var(--dt-font-size-48);
--dt-font-heading-xxl-size--narrow: var(--dt-font-size-32);
--dt-font-heading-xxl-family: var(--dt-font-family-primary);
--dt-font-heading-xxl-weight: var(--dt-font-weight-extrabold);
--dt-font-heading-xxl-line-height--wide: var(--dt-font-size-48-line-height);
--dt-font-heading-xxl-line-height--narrow: var(--dt-font-size-32-line-height);
/* Subheading-s font theme */
--dt-font-subheading-s-size--wide: var(--dt-font-size-20);
--dt-font-subheading-s-size--narrow: var(--dt-font-size-16);
--dt-font-subheading-s-family: var(--dt-font-family-primary);
--dt-font-subheading-s-weight: var(--dt-font-weight-regular);
--dt-font-subheading-s-line-height--wide: var(--dt-font-size-20-line-height);
--dt-font-subheading-s-line-height--narrow: var(--dt-font-size-16-line-height);
/* Subheading-l font theme */
--dt-font-subheading-l-size--wide: var(--dt-font-size-24);
--dt-font-subheading-l-size--narrow: var(--dt-font-size-20);
--dt-font-subheading-l-family: var(--dt-font-family-primary);
--dt-font-subheading-l-weight: var(--dt-font-weight-regular);
--dt-font-subheading-l-line-height--wide: var(--dt-font-size-24-line-height);
--dt-font-subheading-l-line-height--narrow: var(--dt-font-size-20-line-height);
/* Interactive-xs font theme */
--dt-font-interactive-xs-size: var(--dt-font-size-14);
--dt-font-interactive-xs-family: var(--dt-font-family-primary);
--dt-font-interactive-xs-weight: var(--dt-font-weight-bold);
--dt-font-interactive-xs-line-height: var(--dt-font-size-14-line-height);
/* Interactive-s font theme */
--dt-font-interactive-s-size: var(--dt-font-size-16);
--dt-font-interactive-s-family: var(--dt-font-family-primary);
--dt-font-interactive-s-weight: var(--dt-font-weight-bold);
--dt-font-interactive-s-line-height: var(--dt-font-size-16-line-height);
/* Interactive-l font theme */
--dt-font-interactive-l-size: var(--dt-font-size-20);
--dt-font-interactive-l-family: var(--dt-font-family-primary);
--dt-font-interactive-l-weight: var(--dt-font-weight-bold);
--dt-font-interactive-l-line-height: var(--dt-font-size-20-line-height);
/* Body-s font theme */
--dt-font-body-s-size: var(--dt-font-size-14);
--dt-font-body-s-family: var(--dt-font-family-primary);
--dt-font-body-s-weight: var(--dt-font-weight-regular);
--dt-font-body-s-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-s-line-height: var(--dt-font-size-14-line-height);
/* Body-s-link font theme */
--dt-font-body-s-link-size: var(--dt-font-size-14);
--dt-font-body-s-link-family: var(--dt-font-family-primary);
--dt-font-body-s-link-weight: var(--dt-font-weight-regular);
--dt-font-body-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-s-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-s-link-line-height: var(--dt-font-size-14-line-height);
/* Body-l font theme */
--dt-font-body-l-size: var(--dt-font-size-16);
--dt-font-body-l-family: var(--dt-font-family-primary);
--dt-font-body-l-weight: var(--dt-font-weight-regular);
--dt-font-body-l-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-l-line-height: var(--dt-font-size-16-line-height);
/* Body-l-link font theme */
--dt-font-body-l-link-size: var(--dt-font-size-16);
--dt-font-body-l-link-family: var(--dt-font-family-primary);
--dt-font-body-l-link-weight: var(--dt-font-weight-regular);
--dt-font-body-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-l-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-l-link-line-height: var(--dt-font-size-16-line-height);
/* Body-strong-s font theme */
--dt-font-body-strong-s-size: var(--dt-font-size-14);
--dt-font-body-strong-s-family: var(--dt-font-family-primary);
--dt-font-body-strong-s-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-s-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-strong-s-line-height: var(--dt-font-size-14-line-height);
/* Body-strong-s-link font theme */
--dt-font-body-strong-s-link-size: var(--dt-font-size-14);
--dt-font-body-strong-s-link-family: var(--dt-font-family-primary);
--dt-font-body-strong-s-link-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
--dt-font-body-strong-s-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-strong-s-link-line-height: var(--dt-font-size-14-line-height);
/* Body-strong-l font theme */
--dt-font-body-strong-l-size: var(--dt-font-size-16);
--dt-font-body-strong-l-family: var(--dt-font-family-primary);
--dt-font-body-strong-l-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-l-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-strong-l-line-height: var(--dt-font-size-16-line-height);
/* Body-strong-l-link font theme */
--dt-font-body-strong-l-link-size: var(--dt-font-size-16);
--dt-font-body-strong-l-link-family: var(--dt-font-family-primary);
--dt-font-body-strong-l-link-weight: var(--dt-font-weight-bold);
--dt-font-body-strong-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
--dt-font-body-strong-l-link-text-decoration: var(--dt-font-style-underline);
--dt-font-body-strong-l-link-line-height: var(--dt-font-size-16-line-height);
/* Caption font theme */
--dt-font-caption-size: var(--dt-font-size-12);
--dt-font-caption-family: var(--dt-font-family-primary);
--dt-font-caption-weight: var(--dt-font-weight-regular);
--dt-font-caption-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-line-height: var(--dt-font-size-12-line-height);
/* Caption-link font theme */
--dt-font-caption-link-size: var(--dt-font-size-12);
--dt-font-caption-link-family: var(--dt-font-family-primary);
--dt-font-caption-link-weight: var(--dt-font-weight-regular);
--dt-font-caption-link-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-link-text-decoration: var(--dt-font-style-underline);
--dt-font-caption-link-line-height: var(--dt-font-size-12-line-height);
/* Caption-strong font theme */
--dt-font-caption-strong-size: var(--dt-font-size-12);
--dt-font-caption-strong-family: var(--dt-font-family-primary);
--dt-font-caption-strong-weight: var(--dt-font-weight-bold);
--dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-strong-line-height: var(--dt-font-size-12-line-height);
/* Caption-strong-link font theme */
--dt-font-caption-strong-link-size: var(--dt-font-size-12);
--dt-font-caption-strong-link-family: var(--dt-font-family-primary);
--dt-font-caption-strong-link-weight: var(--dt-font-weight-bold);
--dt-font-caption-strong-link-paragraph: var(--dt-font-paragraph-spacing-03);
--dt-font-caption-strong-link-text-decoration: var(--dt-font-style-underline);
--dt-font-caption-strong-link-line-height: var(--dt-font-size-12-line-height);
/* Global tokens - Radius */
--dt-radius-00: 0;
--dt-radius-02: 4px;
--dt-radius-03: 8px;
--dt-radius-04: 12px;
--dt-radius-05: 16px;
--dt-radius-06: 50rem;
/* Alias tokens - Radius */
--dt-radius-rounded-none: var(--dt-radius-00);
--dt-radius-rounded-a: var(--dt-radius-02);
--dt-radius-rounded-b: var(--dt-radius-03);
--dt-radius-rounded-c: var(--dt-radius-04);
--dt-radius-rounded-d: var(--dt-radius-05);
--dt-radius-rounded-e: var(--dt-radius-06);
/* Global tokens - Motion */
--dt-motion-easing-in: cubic-bezier(0.8, 0, 1, 1);
--dt-motion-easing-out: cubic-bezier(0, 0, 0.18, 0.99);
--dt-motion-easing-persistent-expressive: cubic-bezier(0.95, 0, 0, 0.95);
--dt-motion-easing-persistent-functional: cubic-bezier(0.45, 0, 0.55, 1);
--dt-motion-timing-100: 100ms;
--dt-motion-timing-150: 150ms;
--dt-motion-timing-200: 200ms;
--dt-motion-timing-250: 250ms;
--dt-motion-timing-300: 300ms;
--dt-motion-timing-350: 350ms;
/* Global tokens - Spacing */
--dt-spacing-10: 80px;
--dt-spacing-00: 0;
--dt-spacing-01: 4px;
--dt-spacing-02: 8px;
--dt-spacing-03: 12px;
--dt-spacing-04: 16px;
--dt-spacing-05: 24px;
--dt-spacing-06: 32px;
--dt-spacing-07: 40px;
--dt-spacing-08: 56px;
--dt-spacing-09: 64px;
/* Alias tokens - Spacing */
--dt-spacing-none: var(--dt-spacing-00);
--dt-spacing-a: var(--dt-spacing-01);
--dt-spacing-b: var(--dt-spacing-02);
--dt-spacing-c: var(--dt-spacing-03);
--dt-spacing-d: var(--dt-spacing-04);
--dt-spacing-e: var(--dt-spacing-05);
--dt-spacing-f: var(--dt-spacing-06);
--dt-spacing-g: var(--dt-spacing-07);
--dt-spacing-h: var(--dt-spacing-08);
--dt-spacing-i: var(--dt-spacing-09);
--dt-spacing-j: var(--dt-spacing-10);
/* Global tokens - Breakpoint */
--dt-breakpoint-size-1024: 1024px;
--dt-breakpoint-size-1280: 1280px;
--dt-breakpoint-size-1440: 1440px;
--dt-breakpoint-size-320: 320px;
--dt-breakpoint-size-600: 600px;
--dt-breakpoint-size-768: 768px;
/* Alias tokens - Breakpoint */
--dt-breakpoint-xs: var(--dt-breakpoint-size-320);
--dt-breakpoint-sm: var(--dt-breakpoint-size-600);
--dt-breakpoint-md: var(--dt-breakpoint-size-768);
--dt-breakpoint-lg: var(--dt-breakpoint-size-1024);
--dt-breakpoint-xl: var(--dt-breakpoint-size-1280);
--dt-breakpoint-xxl: var(--dt-breakpoint-size-1440);
/* Global tokens - Elevation */
--dt-elevation-box-shadow-01: 0px 2px 2px 0px rgba(0, 0, 0, 0.03),0px 3px 1px -2px rgba(0, 0, 0, 0.07),0px 1px 5px 0px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-02: 0px 4px 6px 0px rgba(0, 0, 0, 0.02),0px 2px 12px -2px rgba(0, 0, 0, 0.08),0px 3px 6px 0px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-03: 0px 2px 6px 0px rgba(0, 0, 0, 0.04),0px 8px 12px -2px rgba(0, 0, 0, 0.06),0px 4px 6px 0px rgba(0, 0, 0, 0.04);
--dt-elevation-box-shadow-04: 0px 8px 8px 0px rgba(0, 0, 0, 0.04),0px 8px 20px -3px rgba(0, 0, 0, 0.1),0px 4px 8px -2px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-05: 0px -4px 6px 0px rgba(0, 0, 0, 0.02),0px -2px 12px -2px rgba(0, 0, 0, 0.08),0px -3px 6px 0px rgba(0, 0, 0, 0.06);
--dt-elevation-box-shadow-06: 0px 2px 2px 0px rgba(0, 0, 0, 0.12),0px 3px 1px -2px rgba(0, 0, 0, 0.28),0px 1px 5px 0px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-07: 0px 4px 6px 0px rgba(0, 0, 0, 0.08),0px 2px 12px -2px rgba(0, 0, 0, 0.32),0px 3px 6px 0px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-08: 0px 2px 6px 0px rgba(0, 0, 0, 0.12),0px 8px 12px -2px rgba(0, 0, 0, 0.24),0px 4px 6px 0px rgba(0, 0, 0, 0.16);
--dt-elevation-box-shadow-09: 0px 8px 8px 0px rgba(0, 0, 0, 0.16),0px 3px 20px -3px rgba(0, 0, 0, 0.4),0px 4px 8px -2px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-10: 0px -4px 6px 0px rgba(0, 0, 0, 0.08),0px -2px 12px -2px rgba(0, 0, 0, 0.32),0px -3px 6px 0px rgba(0, 0, 0, 0.24);
--dt-elevation-box-shadow-11: 0px 0px 1px 0px rgba(0, 0, 0, 0.12),0px 1px 5px 0px rgba(0, 0, 0, 0.04),0px 0px 4px 0px rgba(0, 0, 0, 0.1);
--dt-elevation-box-shadow-12: 0px 0px 1px 0px rgba(0, 0, 0, 0.24),0px 1px 5px 0px rgba(0, 0, 0, 0.08),0px 0px 4px 0px rgba(0, 0, 0, 0.16);
/* Alias tokens - Elevation */
--dt-elevation-01: var(--dt-elevation-box-shadow-01);
--dt-elevation-02: var(--dt-elevation-box-shadow-02);
--dt-elevation-03: var(--dt-elevation-box-shadow-03);
--dt-elevation-04: var(--dt-elevation-box-shadow-04);
--dt-elevation-05: var(--dt-elevation-box-shadow-05);
--dt-elevation-card: var(--dt-elevation-box-shadow-11);
--dt-elevation-inverse-01: var(--dt-elevation-box-shadow-06);
--dt-elevation-inverse-02: var(--dt-elevation-box-shadow-07);
--dt-elevation-inverse-03: var(--dt-elevation-box-shadow-08);
--dt-elevation-inverse-04: var(--dt-elevation-box-shadow-09);
--dt-elevation-inverse-05: var(--dt-elevation-box-shadow-10);
--dt-elevation-inverse-card: var(--dt-elevation-box-shadow-12);
}
/* Highcontrast color theme */
html[data-highcontrast-enabled] {
--dt-color-background-default: var(--dt-color-white);
--dt-color-background-subtle: var(--dt-color-white);
--dt-color-background-dark: var(--dt-color-black);
--dt-color-container-default: var(--dt-color-white);
--dt-color-container-subtle: var(--dt-color-white);
--dt-color-container-strong: var(--dt-color-white);
--dt-color-container-dark: var(--dt-color-black);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-black);
--dt-color-container-inverse-alternative: var(--dt-color-black);
--dt-color-border-default: var(--dt-color-black);
--dt-color-border-subtle: var(--dt-color-black);
--dt-color-border-strong: var(--dt-color-black);
--dt-color-border-inverse: var(--dt-color-white);
--dt-color-border-selected: var(--dt-color-black);
--dt-color-border-selected-brand: var(--dt-color-orange-dark-hc);
--dt-color-border-form: var(--dt-color-black);
--dt-color-divider-default: var(--dt-color-black);
--dt-color-divider-inverse: var(--dt-color-white);
--dt-color-interactive-brand: var(--dt-color-orange-dark-hc);
--dt-color-interactive-primary: var(--dt-color-black);
--dt-color-interactive-secondary: var(--dt-color-white);
--dt-color-interactive-inverse: var(--dt-color-white);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-black);
--dt-color-interactive-error: var(--dt-color-red);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red-dark-hc);
--dt-color-support-warning: var(--dt-color-yellow-dark-hc);
--dt-color-support-positive: var(--dt-color-green-dark-hc);
--dt-color-support-info: var(--dt-color-blue-dark-hc);
--dt-color-support-neutral: var(--dt-color-white);
--dt-color-support-error-02: var(--dt-color-white);
--dt-color-support-warning-02: var(--dt-color-white);
--dt-color-support-positive-02: var(--dt-color-white);
--dt-color-support-info-02: var(--dt-color-white);
--dt-color-support-info-inverse: var(--dt-color-blue-light-hc);
--dt-color-support-positive-inverse: var(--dt-color-green-light-hc);
--dt-color-support-neutral-persistent: var(--dt-color-white);
--dt-color-support-error-inverse: var(--dt-color-red-light-hc);
--dt-color-support-warning-inverse: var(--dt-color-yellow);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-white);
--dt-color-support-brand-03: var(--dt-color-white);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
--dt-color-support-brand-04: var(--dt-color-white);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
--dt-color-support-brand-05: var(--dt-color-white);
--dt-color-support-brand-05-subtle: var(--dt-color-yellow-10);
--dt-color-support-brand-06: var(--dt-color-white);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
--dt-color-support-brand-07: var(--dt-color-white);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
--dt-color-content-default: var(--dt-color-black);
--dt-color-content-subdued: var(--dt-color-black);
--dt-color-content-interactive-brand: var(--dt-color-orange-dark-hc);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-white);
--dt-color-content-interactive-secondary: var(--dt-color-black);
--dt-color-content-interactive-tertiary: var(--dt-color-black);
--dt-color-content-interactive-subdued: var(--dt-color-black);
--dt-color-content-interactive-inverse: var(--dt-color-black);
--dt-color-content-interactive-dark: var(--dt-color-black);
--dt-color-content-interactive-error: var(--dt-color-red-dark-hc);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-black);
--dt-color-content-inverse: var(--dt-color-white);
--dt-color-content-link: var(--dt-color-black);
--dt-color-content-link-distinct: var(--dt-color-blue);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-white);
--dt-color-content-link-visited: var(--dt-color-system-purple);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
--dt-color-content-error: var(--dt-color-red-dark-hc);
--dt-color-content-placeholder: var(--dt-color-charcoal-57);
--dt-color-content-positive: var(--dt-color-green-dark-hc);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange-dark-hc);
--dt-color-hover-01-bg: #000;
--dt-color-hover-01: 4%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #fff;
--dt-color-hover-02: 8%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #000;
--dt-color-active-01: 12%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #fff;
--dt-color-active-02: 20%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #fff;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-white);
--dt-color-focus-outer: var(--dt-color-blue-70);
--dt-color-disabled-01: var(--dt-color-mozzarella-20);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-80);
--dt-color-skeleton-01: var(--dt-color-mozzarella-10);
--dt-color-skeleton-02: var(--dt-color-mozzarella-20);
--dt-color-skeleton-03: var(--dt-color-white);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
}
/* Dark color theme */
@media (prefers-color-scheme: dark) {
html[data-darkmode-enabled] {
--dt-color-background-default: var(--dt-color-mozzarella-100);
--dt-color-background-subtle: var(--dt-color-mozzarella-80);
--dt-color-background-dark: var(--dt-color-white);
--dt-color-container-default: var(--dt-color-mozzarella-90);
--dt-color-container-subtle: var(--dt-color-mozzarella-80);
--dt-color-container-strong: var(--dt-color-mozzarella-70);
--dt-color-container-dark: var(--dt-color-mozzarella-90);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-white);
--dt-color-container-inverse-alternative: var(--dt-color-mozzarella-70);
--dt-color-border-default: var(--dt-color-mozzarella-70);
--dt-color-border-subtle: var(--dt-color-mozzarella-75);
--dt-color-border-strong: var(--dt-color-mozzarella-60);
--dt-color-border-inverse: var(--dt-color-mozzarella-20);
--dt-color-border-selected: var(--dt-color-mozzarella-30);
--dt-color-border-selected-brand: var(--dt-color-orange);
--dt-color-border-form: var(--dt-color-mozzarella-50);
--dt-color-divider-default: rgb(255,255,255,0.20);
--dt-color-divider-inverse: rgb(0,0,0,0.08);
--dt-color-interactive-brand: var(--dt-color-orange);
--dt-color-interactive-primary: var(--dt-color-white);
--dt-color-interactive-secondary: var(--dt-color-mozzarella-75);
--dt-color-interactive-inverse: var(--dt-color-mozzarella-90);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-mozzarella-50);
--dt-color-interactive-error: var(--dt-color-red-40);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red-40);
--dt-color-support-warning: var(--dt-color-yellow);
--dt-color-support-positive: var(--dt-color-green-30);
--dt-color-support-info: var(--dt-color-blue-30);
--dt-color-support-neutral: var(--dt-color-mozzarella-100);
--dt-color-support-error-02: var(--dt-color-red-90);
--dt-color-support-warning-02: var(--dt-color-yellow-90);
--dt-color-support-positive-02: var(--dt-color-green-90);
--dt-color-support-info-02: var(--dt-color-blue-90);
--dt-color-support-info-inverse: var(--dt-color-blue);
--dt-color-support-positive-inverse: var(--dt-color-green);
--dt-color-support-neutral-persistent: var(--dt-color-mozzarella-20);
--dt-color-support-error-inverse: var(--dt-color-red);
--dt-color-support-warning-inverse: var(--dt-color-turmeric-60);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-orange-90);
--dt-color-support-brand-03: var(--dt-color-blue-25);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-90);
--dt-color-support-brand-04: var(--dt-color-red-25);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-90);
--dt-color-support-brand-05: var(--dt-color-yellow);
--dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
--dt-color-support-brand-06: var(--dt-color-purple);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-80);
--dt-color-support-brand-07: var(--dt-color-orange-55);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
--dt-color-content-default: var(--dt-color-white);
--dt-color-content-subdued: var(--dt-color-charcoal-30);
--dt-color-content-interactive-brand: var(--dt-color-orange-30);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-charcoal-80);
--dt-color-content-interactive-secondary: var(--dt-color-white);
--dt-color-content-interactive-tertiary: var(--dt-color-white);
--dt-color-content-interactive-subdued: var(--dt-color-charcoal-40);
--dt-color-content-interactive-inverse: var(--dt-color-white);
--dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
--dt-color-content-interactive-error: var(--dt-color-red-30);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-charcoal-80);
--dt-color-content-inverse: var(--dt-color-charcoal-80);
--dt-color-content-link: var(--dt-color-white);
--dt-color-content-link-distinct: var(--dt-color-blue-30);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-charcoal-80);
--dt-color-content-link-visited: var(--dt-color-system-purple-10);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple);
--dt-color-content-error: var(--dt-color-red-30);
--dt-color-content-placeholder: var(--dt-color-charcoal-50);
--dt-color-content-positive: var(--dt-color-green-30);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange-30);
--dt-color-hover-01-bg: #fff;
--dt-color-hover-01: 8%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #000;
--dt-color-hover-02: 4%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #fff;
--dt-color-active-01: 20%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #000;
--dt-color-active-02: 12%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #000;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-black);
--dt-color-focus-outer: var(--dt-color-blue-30);
--dt-color-disabled-01: var(--dt-color-mozzarella-80);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-20);
--dt-color-skeleton-01: var(--dt-color-mozzarella-80);
--dt-color-skeleton-02: var(--dt-color-mozzarella-75);
--dt-color-skeleton-03: var(--dt-color-mozzarella-90);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
}
}
/* Highcontrast-dark color theme */
@media (prefers-color-scheme: dark) {
html[data-darkmode-enabled][data-highcontrast-enabled] {
--dt-color-background-default: var(--dt-color-black);
--dt-color-background-subtle: var(--dt-color-black);
--dt-color-background-dark: var(--dt-color-black);
--dt-color-container-default: var(--dt-color-black);
--dt-color-container-subtle: var(--dt-color-black);
--dt-color-container-strong: var(--dt-color-black);
--dt-color-container-dark: var(--dt-color-black);
--dt-color-container-light: var(--dt-color-white);
--dt-color-container-inverse: var(--dt-color-white);
--dt-color-container-inverse-alternative: var(--dt-color-black);
--dt-color-border-default: var(--dt-color-white);
--dt-color-border-subtle: var(--dt-color-white);
--dt-color-border-strong: var(--dt-color-white);
--dt-color-border-inverse: var(--dt-color-black);
--dt-color-border-selected: var(--dt-color-white);
--dt-color-border-selected-brand: var(--dt-color-orange-30);
--dt-color-border-form: var(--dt-color-white);
--dt-color-divider-default: var(--dt-color-white);
--dt-color-divider-inverse: var(--dt-color-black);
--dt-color-interactive-brand: var(--dt-color-orange-30);
--dt-color-interactive-primary: var(--dt-color-white);
--dt-color-interactive-secondary: var(--dt-color-black);
--dt-color-interactive-inverse: var(--dt-color-black);
--dt-color-interactive-light: var(--dt-color-white);
--dt-color-interactive-form: var(--dt-color-white);
--dt-color-interactive-error: var(--dt-color-red-40);
--dt-color-overlay: rgb(0,0,0,0.55);
--dt-color-transparent: rgb(255,255,255,0);
--dt-color-support-error: var(--dt-color-red-light-hc);
--dt-color-support-warning: var(--dt-color-yellow);
--dt-color-support-positive: var(--dt-color-green-light-hc);
--dt-color-support-info: var(--dt-color-blue-light-hc);
--dt-color-support-neutral: var(--dt-color-black);
--dt-color-support-error-02: var(--dt-color-black);
--dt-color-support-warning-02: var(--dt-color-black);
--dt-color-support-positive-02: var(--dt-color-black);
--dt-color-support-info-02: var(--dt-color-black);
--dt-color-support-info-inverse: var(--dt-color-blue-dark-hc);
--dt-color-support-positive-inverse: var(--dt-color-green-dark-hc);
--dt-color-support-neutral-persistent: var(--dt-color-black);
--dt-color-support-error-inverse: var(--dt-color-red-dark-hc);
--dt-color-support-warning-inverse: var(--dt-color-turmeric-60);
--dt-color-support-brand-01: var(--dt-color-orange-30);
--dt-color-support-brand-02: var(--dt-color-black);
--dt-color-support-brand-03: var(--dt-color-black);
--dt-color-support-brand-03-subtle: var(--dt-color-cupcake-90);
--dt-color-support-brand-04: var(--dt-color-black);
--dt-color-support-brand-04-subtle: var(--dt-color-berry-90);
--dt-color-support-brand-05: var(--dt-color-black);
--dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
--dt-color-support-brand-06: var(--dt-color-black);
--dt-color-support-brand-06-subtle: var(--dt-color-aubergine-80);
--dt-color-support-brand-07: var(--dt-color-black);
--dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
--dt-color-content-default: var(--dt-color-white);
--dt-color-content-subdued: var(--dt-color-white);
--dt-color-content-interactive-brand: var(--dt-color-orange-30);
--dt-color-content-interactive-light: var(--dt-color-white);
--dt-color-content-interactive-primary: var(--dt-color-black);
--dt-color-content-interactive-secondary: var(--dt-color-white);
--dt-color-content-interactive-tertiary: var(--dt-color-white);
--dt-color-content-interactive-subdued: var(--dt-color-white);
--dt-color-content-interactive-inverse: var(--dt-color-white);
--dt-color-content-interactive-dark: var(--dt-color-black);
--dt-color-content-interactive-error: var(--dt-color-red-light-hc);
--dt-color-content-light: var(--dt-color-white);
--dt-color-content-dark: var(--dt-color-black);
--dt-color-content-inverse: var(--dt-color-black);
--dt-color-content-link: var(--dt-color-white);
--dt-color-content-link-distinct: var(--dt-color-blue-light-hc);
--dt-color-content-link-light: var(--dt-color-white);
--dt-color-content-link-inverse: var(--dt-color-black);
--dt-color-content-link-visited: var(--dt-color-system-purple-10);
--dt-color-content-link-visited-inverse: var(--dt-color-system-purple);
--dt-color-content-error: var(--dt-color-red-light-hc);
--dt-color-content-placeholder: var(--dt-color-charcoal-50);
--dt-color-content-positive: var(--dt-color-green-light-hc);
--dt-color-content-disabled: var(--dt-color-charcoal-50);
--dt-color-content-brand: var(--dt-color-orange-30);
--dt-color-hover-01-bg: #fff;
--dt-color-hover-01: 8%;
--dt-color-hover-01-dark-bg: #000;
--dt-color-hover-01-dark: 4%;
--dt-color-hover-02-bg: #000;
--dt-color-hover-02: 4%;
--dt-color-hover-02-light-bg: #fff;
--dt-color-hover-02-light: 8%;
--dt-color-active-01-bg: #fff;
--dt-color-active-01: 20%;
--dt-color-active-01-dark-bg: #000;
--dt-color-active-01-dark: 12%;
--dt-color-active-02-bg: #000;
--dt-color-active-02: 12%;
--dt-color-active-02-light-bg: #fff;
--dt-color-active-02-light: 20%;
--dt-color-resting-bg: #000;
--dt-color-resting: 0%;
--dt-color-focus-inner: var(--dt-color-black);
--dt-color-focus-outer: var(--dt-color-blue-30);
--dt-color-disabled-01: var(--dt-color-mozzarella-80);
--dt-color-disabled-01-inverse: var(--dt-color-mozzarella-20);
--dt-color-skeleton-01: var(--dt-color-mozzarella-80);
--dt-color-skeleton-02: var(--dt-color-mozzarella-100);
--dt-color-skeleton-03: var(--dt-color-mozzarella-90);
--dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
--dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
--dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
}
}
/* Dark elevation theme */
@media (prefers-color-scheme: dark) {
html[data-darkmode-enabled] {
--dt-elevation-01: var(--dt-elevation-box-shadow-06);
--dt-elevation-02: var(--dt-elevation-box-shadow-07);
--dt-elevation-03: var(--dt-elevation-box-shadow-08);
--dt-elevation-04: var(--dt-elevation-box-shadow-09);
--dt-elevation-05: var(--dt-elevation-box-shadow-10);
--dt-elevation-card: var(--dt-elevation-box-shadow-12);
--dt-elevation-inverse-01: var(--dt-elevation-box-shadow-01);
--dt-elevation-inverse-02: var(--dt-elevation-box-shadow-02);
--dt-elevation-inverse-03: var(--dt-elevation-box-shadow-03);
--dt-elevation-inverse-04: var(--dt-elevation-box-shadow-04);
--dt-elevation-inverse-05: var(--dt-elevation-box-shadow-05);
--dt-elevation-inverse-card: var(--dt-elevation-box-shadow-11);
}
}
:root {
--dt-color-aubergine-10-h: 300;
--dt-color-aubergine-10-s: 26.2%;
--dt-color-aubergine-10-l: 87.3%;
--dt-color-aubergine-80-h: 302;
--dt-color-aubergine-80-s: 26.6%;
--dt-color-aubergine-80-l: 21.4%;
--dt-color-berry-10-h: 350;
--dt-color-berry-10-s: 100%;
--dt-color-berry-10-l: 95.3%;
--dt-color-berry-90-h: 351;
--dt-color-berry-90-s: 37.1%;
--dt-color-berry-90-l: 28%;
--dt-color-black-h: 0;
--dt-color-black-s: 0%;
--dt-color-black-l: 0%;
--dt-color-blue-h: 215;
--dt-color-blue-s: 83.6%;
--dt-color-blue-l: 43.1%;
--dt-color-blue-10-h: 196;
--dt-color-blue-10-s: 60%;
--dt-color-blue-10-l: 95.1%;
--dt-color-blue-25-h: 188;
--dt-color-blue-25-s: 30.5%;
--dt-color-blue-25-l: 81.4%;
--dt-color-blue-30-h: 215;
--dt-color-blue-30-s: 87.3%;
--dt-color-blue-30-l: 72.2%;
--dt-color-blue-70-h: 215;
--dt-color-blue-70-s: 90.1%;
--dt-color-blue-70-l: 35.5%;
--dt-color-blue-90-h: 196;
--dt-color-blue-90-s: 78.7%;
--dt-color-blue-90-l: 14.7%;
--dt-color-blue-dark-hc-h: 215;
--dt-color-blue-dark-hc-s: 83.7%;
--dt-color-blue-dark-hc-l: 38.4%;
--dt-color-blue-light-hc-h: 214;
--dt-color-blue-light-hc-s: 98.3%;
--dt-color-blue-light-hc-l: 77.1%;
--dt-color-charcoal-30-h: 200;
--dt-color-charcoal-30-s: 3.9%;
--dt-color-charcoal-30-l: 84.9%;
--dt-color-charcoal-40-h: 189;
--dt-color-charcoal-40-s: 5.1%;
--dt-color-charcoal-40-l: 73.1%;
--dt-color-charcoal-50-h: 188;
--dt-color-charcoal-50-s: 7%;
--dt-color-charcoal-50-l: 57.8%;
--dt-color-charcoal-57-h: 191;
--dt-color-charcoal-57-s: 9.2%;
--dt-color-charcoal-57-l: 44.9%;
--dt-color-charcoal-60-h: 190;
--dt-color-charcoal-60-s: 11%;
--dt-color-charcoal-60-l: 41%;
--dt-color-charcoal-70-h: 189;
--dt-color-charcoal-70-s: 13.7%;
--dt-color-charcoal-70-l: 27.3%;
--dt-color-charcoal-75-h: 188;
--dt-color-charcoal-75-s: 13.5%;
--dt-color-charcoal-75-l: 21.8%;
--dt-color-charcoal-80-h: 190;
--dt-color-charcoal-80-s: 14.3%;
--dt-color-charcoal-80-l: 16.5%;
--dt-color-cupcake-10-h: 188;
--dt-color-cupcake-10-s: 45.5%;
--dt-color-cupcake-10-l: 93.5%;
--dt-color-cupcake-90-h: 186;
--dt-color-cupcake-90-s: 28.8%;
--dt-color-cupcake-90-l: 20.4%;
--dt-color-green-h: 148;
--dt-color-green-s: 98.4%;
--dt-color-green-l: 24.1%;
--dt-color-green-10-h: 149;
--dt-color-green-10-s: 67.7%;
--dt-color-green-10-l: 93.9%;
--dt-color-green-30-h: 146;
--dt-color-green-30-s: 69.8%;
--dt-color-green-30-l: 44.1%;
--dt-color-green-90-h: 150;
--dt-color-green-90-s: 23.5%;
--dt-color-green-90-l: 20%;
--dt-color-green-dark-hc-h: 141;
--dt-color-green-dark-hc-s: 60.6%;
--dt-color-green-dark-hc-l: 24.9%;
--dt-color-green-light-hc-h: 145;
--dt-color-green-light-hc-s: 69.6%;
--dt-color-green-light-hc-l: 49%;
--dt-color-mozzarella-10-h: 30;
--dt-color-mozzarella-10-s: 16.7%;
--dt-color-mozzarella-10-l: 95.3%;
--dt-color-mozzarella-100-h: 60;
--dt-color-mozzarella-100-s: 2%;
--dt-color-mozzarella-100-l: 10%;
--dt-color-mozzarella-20-h: 36;
--dt-color-mozzarella-20-s: 13.5%;
--dt-color-mozzarella-20-l: 92.7%;
--dt-color-mozzarella-30-h: 30;
--dt-color-mozzarella-30-s: 5.3%;
--dt-color-mozzarella-30-l: 85.1%;
--dt-color-mozzarella-5-h: 0;
--dt-color-mozzarella-5-s: 0%;
--dt-color-mozzarella-5-l: 98.8%;
--dt-color-mozzarella-50-h: 30;
--dt-color-mozzarella-50-s: 2%;
--dt-color-mozzarella-50-l: 61.2%;
--dt-color-mozzarella-55-h: 40;
--dt-color-mozzarella-55-s: 1.3%;
--dt-color-mozzarella-55-l: 53.9%;
--dt-color-mozzarella-60-h: 40;
--dt-color-mozzarella-60-s: 1.3%;
--dt-color-mozzarella-60-l: 46.9%;
--dt-color-mozzarella-70-h: 30;
--dt-color-mozzarella-70-s: 1.2%;
--dt-color-mozzarella-70-l: 33.7%;
--dt-color-mozzarella-75-h: 30;
--dt-color-mozzarella-75-s: 1.4%;
--dt-color-mozzarella-75-l: 28.2%;
--dt-color-mozzarella-80-h: 30;
--dt-color-mozzarella-80-s: 1.7%;
--dt-color-mozzarella-80-l: 22.7%;
--dt-color-mozzarella-90-h: 0;
--dt-color-mozzarella-90-s: 0%;
--dt-color-mozzarella-90-l: 14.9%;
--dt-color-orange-h: 25;
--dt-color-orange-s: 96%;
--dt-color-orange-l: 48.6%;
--dt-color-orange-10-h: 31;
--dt-color-orange-10-s: 100%;
--dt-color-orange-10-l: 91.6%;
--dt-color-orange-30-h: 30;
--dt-color-orange-30-s: 100%;
--dt-color-orange-30-l: 50%;
--dt-color-orange-55-h: 16;
--dt-color-orange-55-s: 92.8%;
--dt-color-orange-55-l: 56.3%;
--dt-color-orange-90-h: 30;
--dt-color-orange-90-s: 35.4%;
--dt-color-orange-90-l: 18.8%;
--dt-color-orange-dark-hc-h: 18;
--dt-color-orange-dark-hc-s: 100%;
--dt-color-orange-dark-hc-l: 32%;
--dt-color-purple-h: 300;
--dt-color-purple-s: 19.7%;
--dt-color-purple-l: 29.8%;
--dt-color-purple-light-hc-h: 300;
--dt-color-purple-light-hc-s: 19.8%;
--dt-color-purple-light-hc-l: 66.3%;
--dt-color-red-h: 351;
--dt-color-red-s: 95.4%;
--dt-color-red-l: 42.7%;
--dt-color-red-10-h: 357;
--dt-color-red-10-s: 100%;
--dt-color-red-10-l: 95.7%;
--dt-color-red-25-h: 352;
--dt-color-red-25-s: 74.5%;
--dt-color-red-25-l: 80%;
--dt-color-red-30-h: 4;
--dt-color-red-30-s: 87.4%;
--dt-color-red-30-l: 72%;
--dt-color-red-40-h: 354;
--dt-color-red-40-s: 75.8%;
--dt-color-red-40-l: 52.9%;
--dt-color-red-90-h: 352;
--dt-color-red-90-s: 41.7%;
--dt-color-red-90-l: 20.2%;
--dt-color-red-dark-hc-h: 350;
--dt-color-red-dark-hc-s: 95.2%;
--dt-color-red-dark-hc-l: 32.9%;
--dt-color-red-light-hc-h: 357;
--dt-color-red-light-hc-s: 100%;
--dt-color-red-light-hc-l: 73.9%;
--dt-