@studio-helga/once-ui-core 1.7.8

package/dist/styles/typography.scss

@@ -0,0 +1,215 @@
+@use "../styles/breakpoints.scss" as breakpoints;
+
+html {
+    font-size:   var(--font-scaling-desktop);
+    font-family: var(--font-body);
+    font-weight: var(--font-weight-normal);
+    color: var(--neutral-on-background-strong);
+}
+
+@include breakpoints.m {
+    html {
+        font-size: var(--font-scaling-tablet);
+    }
+}
+
+@include breakpoints.s {
+    html {
+        font-size: var(--font-scaling-mobile);
+    }
+}
+
+@include breakpoints.xs {
+    html {
+        font-size: var(--font-scaling-mobile);
+    }
+}
+
+h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+}
+
+.font-size-inherit {
+    font-size: inherit;
+}
+
+.font-weight-inherit {
+    font-weight: inherit;
+}
+
+.font-default {
+    font-weight: var(--font-weight-display-default);
+}
+
+.font-strong {
+    font-weight: var(--font-weight-display-strong);
+}
+
+.font-display {
+    font-family: var(--font-heading);
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-display-xl) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-xl) * var(--line-height-display-multiplier));
+        letter-spacing: -0.05em;
+    }
+    
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-display-l) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-l) * var(--line-height-display-multiplier));
+        letter-spacing: -0.04em;
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-display-m) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-m) * var(--line-height-display-multiplier));
+        letter-spacing: -0.03em;
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-display-s) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-s) * var(--line-height-display-multiplier));
+        letter-spacing: -0.02em;
+    }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-display-xs) * var(--font-size-display-multiplier));
+        line-height: calc(var(--line-height-display-xs) * var(--line-height-display-multiplier));
+    }
+}
+
+.font-heading {
+    font-family: var(--font-heading);
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-heading-xl) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-xl) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-heading-l) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-l) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-heading-m) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-m) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-heading-s) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-s) * var(--line-height-heading-multiplier));
+    }
+    
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-heading-xs) * var(--font-size-heading-multiplier));
+        line-height: calc(var(--line-height-heading-xs) * var(--line-height-heading-multiplier));
+    }
+}
+
+.font-body {
+    font-family: var(--font-body);
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-body-xl) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-xl) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-body-l) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-l) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-body-m) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-m) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-body-s) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-s) * var(--line-height-body-multiplier));
+    }
+    
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-body-xs) * var(--font-size-body-multiplier));
+        line-height: calc(var(--line-height-body-xs) * var(--line-height-body-multiplier));
+    }
+}
+
+.font-label {
+    font-family: var(--font-label);
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
+    }
+
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
+    }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
+    }
+}
+
+.font-code {
+    font-family: var(--font-code);
+
+    &.font-xl, & > .font-xl {
+        font-size:   calc(var(--font-size-label-xl) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xl) * var(--line-height-label-multiplier));
+    }
+
+    &.font-l, & > .font-l {
+        font-size:   calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-m, & > .font-m {
+        font-size:   calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
+    }
+    
+    &.font-s, & > .font-s {
+        font-size:   calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
+    }
+
+    &.font-xs, & > .font-xs {
+        font-size:   calc(var(--font-size-label-xs) * var(--font-size-label-multiplier));
+        line-height: calc(var(--line-height-label-xs) * var(--line-height-label-multiplier));
+    }
+}
+
+.font-family-display {
+    font-family: var(--font-display);
+}
+
+.font-family-heading {
+    font-family: var(--font-heading);
+}
+
+.font-family-body {
+    font-family: var(--font-body);
+}
+
+.font-family-label {
+    font-family: var(--font-label);
+}
+
+.font-family-code {
+    font-family: var(--font-code);
+}

package/dist/styles/utilities.scss

@@ -0,0 +1,23 @@
+.text-decoration-none {
+  text-decoration: none;
+}
+
+.reset-button-styles {
+  background: none;
+  padding: 0;
+  outline: 0;
+  border: 0;
+}
+
+.focus-ring {
+  &:focus-visible {
+    outline: var(--static-space-2) solid var(--brand-solid-strong);
+    outline-offset: 2px;
+  }
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/test/dialogTestUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const resetDialogState: () => void;
+//# sourceMappingURL=dialogTestUtils.d.ts.map

package/dist/test/dialogTestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTestUtils.d.ts","sourceRoot":"","sources":["../../src/test/dialogTestUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,YAW5B,CAAC"}

package/dist/test/dialogTestUtils.js

@@ -0,0 +1,12 @@
+export const resetDialogState = () => {
+    document.body.innerHTML = "";
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+    document.documentElement.style.overflow = "";
+    document.body.childNodes.forEach((node) => {
+        if (node instanceof HTMLElement) {
+            node.inert = false;
+        }
+    });
+};
+//# sourceMappingURL=dialogTestUtils.js.map

package/dist/test/dialogTestUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTestUtils.js","sourceRoot":"","sources":["../../src/test/dialogTestUtils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,EAAE,CAAC;IACtC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IAE7C,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACxC,IAAI,IAAI,YAAY,WAAW,EAAE,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/test/setup.js

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom";
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+class ResizeObserverMock {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+}
+const installBrowserMocks = () => {
+    if (!("ResizeObserver" in globalThis)) {
+        Object.defineProperty(globalThis, "ResizeObserver", {
+            configurable: true,
+            writable: true,
+            value: ResizeObserverMock,
+        });
+    }
+    Object.defineProperty(window, "scrollTo", {
+        configurable: true,
+        writable: true,
+        value: vi.fn(),
+    });
+    Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        writable: true,
+        value: vi.fn().mockImplementation((query) => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        })),
+    });
+};
+installBrowserMocks();
+if (!("inert" in HTMLElement.prototype)) {
+    Object.defineProperty(HTMLElement.prototype, "inert", {
+        configurable: true,
+        get() {
+            return this.hasAttribute("inert");
+        },
+        set(value) {
+            if (value) {
+                this.setAttribute("inert", "");
+            }
+            else {
+                this.removeAttribute("inert");
+            }
+        },
+    });
+}
+afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    installBrowserMocks();
+});
+//# sourceMappingURL=setup.js.map

package/dist/test/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAEvC,MAAM,kBAAkB;IACtB,OAAO,KAAI,CAAC;IACZ,SAAS,KAAI,CAAC;IACd,UAAU,KAAI,CAAC;CAChB;AAED,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAC/B,IAAI,CAAC,CAAC,gBAAgB,IAAI,UAAU,CAAC,EAAE,CAAC;QACtC,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,gBAAgB,EAAE;YAClD,YAAY,EAAE,IAAI;YAClB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,kBAAkB;SAC1B,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE;QACxC,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE;KACf,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE;QAC1C,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;QACd,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC;YACpD,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,WAAW,EAAE,EAAE,CAAC,EAAE,EAAE;YACpB,cAAc,EAAE,EAAE,CAAC,EAAE,EAAE;YACvB,gBAAgB,EAAE,EAAE,CAAC,EAAE,EAAE;YACzB,mBAAmB,EAAE,EAAE,CAAC,EAAE,EAAE;YAC5B,aAAa,EAAE,EAAE,CAAC,EAAE,EAAE;SACvB,CAAC,CAAC;KACJ,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,mBAAmB,EAAE,CAAC;AAEtB,IAAI,CAAC,CAAC,OAAO,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC;IACxC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE;QACpD,YAAY,EAAE,IAAI;QAClB,GAAG;YACD,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;QACD,GAAG,CAAC,KAAc;YAChB,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAED,SAAS,CAAC,GAAG,EAAE;IACb,OAAO,EAAE,CAAC;IACV,EAAE,CAAC,eAAe,EAAE,CAAC;IACrB,mBAAmB,EAAE,CAAC;AACxB,CAAC,CAAC,CAAC"}

package/dist/tokens/border.scss

@@ -0,0 +1,95 @@
+[data-border="playful"] {
+    --radius-xs:        0.25rem;
+    --radius-xs-nest-4: 0.375rem;
+    --radius-xs-nest-8: 0.5rem;
+
+    --radius-s:         0.5rem;
+    --radius-s-nest-4:  0.75rem;
+    --radius-s-nest-8:  1rem;
+
+    --radius-m:         0.75rem;
+    --radius-m-nest-4:  1rem;
+    --radius-m-nest-8:  1.25rem;
+    
+    --radius-l:         1rem;
+    --radius-l-nest-4:  1.25rem;
+    --radius-l-nest-8:  1.625rem;
+
+    --radius-xl:        1.25rem;
+    --radius-xl-nest-4: 1.5rem;
+    --radius-xl-nest-8: 1.875rem;
+
+    --radius-full:      999rem;
+}
+
+[data-border="conservative"] {
+    --radius-xs:        0.125rem;
+    --radius-xs-nest-4: 0.25rem;
+    --radius-xs-nest-8: 0.375rem;
+
+    --radius-s:         0.25rem;
+    --radius-s-nest-4:  0.375rem;
+    --radius-s-nest-8:  0.5rem;
+
+    --radius-m:         0.375rem;
+    --radius-m-nest-4:  0.5rem;
+    --radius-m-nest-8:  0.625rem;
+    
+    --radius-l:         0.625rem;
+    --radius-l-nest-4:  0.875rem;
+    --radius-l-nest-8:  1.125rem;
+
+    --radius-xl:        0.75rem;
+    --radius-xl-nest-4: 1rem;
+    --radius-xl-nest-8: 1.25rem;
+
+    --radius-full:      999rem;
+}
+
+[data-border="rounded"] {
+    --radius-xs:        1rem;
+    --radius-xs-nest-4: 1.25rem;
+    --radius-xs-nest-8: 1.5rem;
+
+    --radius-s:         1.25rem;
+    --radius-s-nest-4:  1.5rem;
+    --radius-s-nest-8:  2rem;
+
+    --radius-m:         1.25rem;
+    --radius-m-nest-4:  1.5rem;
+    --radius-m-nest-8:  1.875rem;
+    
+    --radius-l:         1.75rem;
+    --radius-l-nest-4:  2rem;
+    --radius-l-nest-8:  2.5rem;
+
+    --radius-xl:        2rem;
+    --radius-xl-nest-4: 2.25rem;
+    --radius-xl-nest-8: 2.75rem;
+
+    --radius-full:      999rem;
+}
+
+[data-border="sharp"] {
+    --radius-xs:        0;
+    --radius-xs-nest-4: 0;
+    --radius-xs-nest-8: 0;
+
+    --radius-s:         0;
+    --radius-s-nest-4:  0;
+    --radius-s-nest-8:  0;
+
+    --radius-m:         0;
+    --radius-m-nest-4:  0;
+    --radius-m-nest-8:  0;
+    
+    --radius-l:         0;
+    --radius-l-nest-4:  0;
+    --radius-l-nest-8:  0;
+
+    --radius-xl:        0;
+    --radius-xl-nest-4: 0;
+    --radius-xl-nest-8: 0;
+
+    --radius-full:      999rem;
+}

package/dist/tokens/data.scss

@@ -0,0 +1,107 @@
+[data-theme="dark"] {
+  --data-blue:     var(--scheme-blue-400);
+  --data-aqua:     var(--scheme-aqua-400);
+  --data-magenta:  var(--scheme-magenta-400);
+  --data-pink:     var(--scheme-pink-400);
+  --data-yellow:   var(--scheme-yellow-400);
+  --data-orange:   var(--scheme-orange-400);
+  --data-red:      var(--scheme-red-400);
+  --data-moss:     var(--scheme-moss-400);
+  --data-green:    var(--scheme-green-400);
+  --data-emerald:  var(--scheme-emerald-400);
+  --data-cyan:     var(--scheme-cyan-400);
+  --data-violet:   var(--scheme-violet-400);
+  --data-indigo:   var(--scheme-indigo-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-white);
+}
+
+[data-theme="dark"] [data-viz-style="divergent"] {
+  --data-blue:     var(--scheme-red-400);
+  --data-aqua:     var(--scheme-red-500);
+  --data-magenta:  var(--scheme-orange-500);
+  --data-pink:     var(--scheme-orange-600);
+  --data-yellow:   var(--scheme-yellow-700);
+  --data-orange:   var(--scheme-yellow-800);
+  --data-red:      var(--scheme-yellow-900);
+  --data-moss:     var(--scheme-moss-1000);
+  --data-green:    var(--scheme-moss-900);
+  --data-emerald:  var(--scheme-green-800);
+  --data-cyan:     var(--scheme-aqua-700);
+  --data-violet:   var(--scheme-aqua-600);
+  --data-indigo:   var(--scheme-cyan-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-white);
+}
+
+[data-theme="dark"] [data-viz-style="sequential"] {
+  --data-blue:     var(--function-brand-200);
+  --data-aqua:     var(--function-brand-300);
+  --data-magenta:  var(--function-brand-400);
+  --data-pink:     var(--function-brand-500);
+  --data-yellow:   var(--function-brand-600);
+  --data-orange:   var(--function-brand-700);
+  --data-red:      var(--function-brand-800);
+  --data-moss:     var(--function-brand-900);
+  --data-green:    var(--function-brand-1000);
+  --data-emerald:  var(--function-brand-1100);
+  --data-cyan:     var(--function-brand-1200);
+  --data-violet:   var(--function-brand-1200);
+  --data-indigo:   var(--function-brand-1200);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-white);
+}
+
+[data-theme="light"] {
+  --data-blue:     var(--scheme-blue-400);
+  --data-indigo:   var(--scheme-indigo-400);
+  --data-green:    var(--scheme-green-400);
+  --data-aqua:     var(--scheme-aqua-400);
+  --data-violet:   var(--scheme-violet-400);
+  --data-orange:   var(--scheme-orange-400);
+  --data-red:      var(--scheme-red-400);
+  --data-cyan:     var(--scheme-cyan-400);
+  --data-magenta:  var(--scheme-magenta-400);
+  --data-pink:     var(--scheme-pink-400);
+  --data-moss:     var(--scheme-moss-400);
+  --data-emerald:  var(--scheme-emerald-400);
+  --data-yellow:   var(--scheme-yellow-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-black);
+}
+
+[data-theme="light"] [data-viz-style="divergent"] {
+  --data-blue:     var(--scheme-red-300);
+  --data-aqua:     var(--scheme-red-400);
+  --data-magenta:  var(--scheme-orange-400);
+  --data-pink:     var(--scheme-orange-500);
+  --data-yellow:   var(--scheme-yellow-500);
+  --data-orange:   var(--scheme-yellow-600);
+  --data-red:      var(--scheme-yellow-700);
+  --data-moss:     var(--scheme-moss-800);
+  --data-green:    var(--scheme-moss-900);
+  --data-emerald:  var(--scheme-green-800);
+  --data-cyan:     var(--scheme-aqua-700);
+  --data-violet:   var(--scheme-aqua-600);
+  --data-indigo:   var(--scheme-cyan-400);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-black);
+}
+
+[data-theme="light"] [data-viz-style="sequential"] {
+  --data-blue:     var(--function-brand-200);
+  --data-aqua:     var(--function-brand-200);
+  --data-magenta:  var(--function-brand-200);
+  --data-pink:     var(--function-brand-300);
+  --data-yellow:   var(--function-brand-400);
+  --data-orange:   var(--function-brand-500);
+  --data-red:      var(--function-brand-600);
+  --data-moss:     var(--function-brand-700);
+  --data-green:    var(--function-brand-800);
+  --data-emerald:  var(--function-brand-900);
+  --data-cyan:     var(--function-brand-1000);
+  --data-violet:   var(--function-brand-1100);
+  --data-indigo:   var(--function-brand-1100);
+  --data-gray:     var(--scheme-gray-400);
+  --data-contrast: var(--static-black);
+}