oneslash-design-system 1.8.4 → 2.0.0

package/dist/designTokens.js

@@ -1,6 +1,17 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 // design tokens definitions
-module.exports = {
+var base = {
     colors: {
         // light
         light: {
@@ -82,6 +93,8 @@ module.exports = {
             misc: {
                 divider: '#D1D1D1',
                 scrim: '#000000',
+                tooltipBg: '#4F4F4F',
+                tooltipText: '#EEEEEE',
             },
         },
         // dark
@@ -164,6 +177,8 @@ module.exports = {
             misc: {
                 divider: '#404040',
                 scrim: '#000000',
+                tooltipBg: '#FFFFFF',
+                tooltipText: '#000000',
             },
         },
     },
@@ -247,4 +262,91 @@ module.exports = {
             justify: 'justify',
         },
     },
+    radius: {
+        inline: '2px',
+        control: '8px',
+        container: '12px',
+        full: '9999px',
+    },
+    shadow: {
+        overlay: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    },
+    zIndex: {
+        overlay: '50',
+        tooltip: '1000',
+    },
+    motion: {
+        duration: {
+            fast: '150ms',
+            slide: '200ms',
+            pop: '220ms',
+        },
+        easing: {
+            out: 'cubic-bezier(0, 0, 0.2, 1)',
+            emphasized: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+        },
+    },
 };
+// Adds the semantic keys that are derived from a set's own groups, so the
+// rule lives once and applies to every set (default and themes, light and dark).
+/**
+ * @template {typeof base.colors.light} S
+ * @param {S} set
+ * @param {'light' | 'dark'} mode
+ */
+function withSemanticKeys(set, mode) {
+    var isLight = mode === 'light';
+    /** @param {typeof set.error} g @param {boolean} isError */
+    var status = function (g, isError) { return (__assign(__assign({}, g), { fill: isLight ? g.dark : g.main, onFill: isLight ? '#FFFFFF' : '#000000', text: isLight ? g.dark : isError ? g.light : g.main, textHover: isLight ? g.dark : g.light, tint: isLight ? g.light : g.dark })); };
+    return __assign(__assign({}, set), { primary: __assign(__assign({}, set.primary), { contrast: isLight ? '#ffffff' : '#000000' }), background: __assign(__assign({}, set.background), { elevated: isLight ? set.background.default : set.background.accent100, overlay: isLight ? set.background.accent300 : set.background.accent100 }), error: status(set.error, true), warning: status(set.warning, false), info: status(set.info, false), success: status(set.success, false) });
+}
+// Forest: the default set with these values replaced (group by group).
+/**
+ * @template T
+ * @param {T} set
+ * @param {{ [K in keyof T]?: Partial<T[K]> }} changes
+ * @returns {T}
+ */
+function override(set, changes) {
+    var out = __assign({}, set);
+    for (var _i = 0, /** @type {(keyof T)[]} */ _a = (Object.keys(changes)); _i < _a.length; _i++) {
+        var group = _a[_i];
+        out[group] = __assign(__assign({}, set[group]), changes[group]);
+    }
+    return out;
+}
+var baseColors = base.colors;
+var forestLight = override(baseColors.light, {
+    text: { primary: '#1C2213', secondary: '#515E3C', disabled: '#8A9670' },
+    accent: { main: '#1C2213', dark: '#2A331E', light: '#3A472B', contrast: '#E7ECDA' },
+    secondary: { main: '#6E7A5A', dark: '#5D6849', light: '#828D6B' },
+    background: { default: '#D9E5C7', accent100: '#E2ECD4', accent200: '#EBF1E0', accent300: '#F4F7EC' },
+});
+var forestDark = override(baseColors.dark, {
+    text: { primary: '#D9E5C7', secondary: '#9DAA85', disabled: '#6D7956' },
+    accent: { main: '#E7ECDA', dark: '#D6DEC3', light: '#F2F5EA', contrast: '#1C2213' },
+    secondary: { main: '#6E7A5A', dark: '#5D6849', light: '#828D6B' },
+    background: { default: '#1C2213', accent100: '#27301B', accent200: '#364228', accent300: '#424F34' },
+});
+// The derived light info.text (#006BAB) is 4.33:1 on forest's background; #0068A3 is the lightest step that reaches 4.5.
+/**
+ * @template {typeof base.colors.light} S
+ * @param {S} set
+ * @returns {S}
+ */
+var withForestInfoText = function (set) { return (__assign(__assign({}, set), { info: __assign(__assign({}, set.info), { text: '#0068A3', textHover: '#0068A3' }) })); };
+// Tooltips are inverted surfaces: each mode takes the other mode's accent300 and text.primary of the same theme.
+/**
+ * @template {typeof base.colors.light} S
+ * @param {S} light
+ * @param {S} dark
+ * @returns {{ light: S, dark: S }}
+ */
+var withTooltips = function (light, dark) { return ({
+    light: __assign(__assign({}, light), { misc: __assign(__assign({}, light.misc), { tooltipBg: dark.background.accent300, tooltipText: dark.text.primary }) }),
+    dark: __assign(__assign({}, dark), { misc: __assign(__assign({}, dark.misc), { tooltipBg: light.background.accent300, tooltipText: light.text.primary }) }),
+}); };
+var defaultSets = withTooltips(withSemanticKeys(baseColors.light, 'light'), withSemanticKeys(baseColors.dark, 'dark'));
+var forestSets = withTooltips(withForestInfoText(withSemanticKeys(forestLight, 'light')), withSemanticKeys(forestDark, 'dark'));
+module.exports = __assign(__assign({}, base), { colors: defaultSets, themes: { forest: forestSets } });

package/dist/index.d.ts

@@ -26,3 +26,4 @@ export * from './components/textField';
 export * from './components/timeStamp';
 export * from './components/tooltip';
 export * from './components/userImage';
+export { default as useDarkMode, resolveDarkMode } from './components/useDarkMode';

package/dist/index.js

@@ -26,3 +26,4 @@ export * from './components/textField';
 export * from './components/timeStamp';
 export * from './components/tooltip';
 export * from './components/userImage';
+export { default as useDarkMode, resolveDarkMode } from './components/useDarkMode';

package/dist/stories/EmptyBox.stories.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import EmptyBox from "../components/emptyBox";
 var meta = {
     title: "Components/EmptyBox",

package/dist/tailwind-preset-auto.js

@@ -0,0 +1,402 @@
+/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
+/* dark: .dark class, or the OS setting unless .light is set; pair with themes/*-auto.css */
+module.exports = {
+  "darkMode": [
+    "variant",
+    [
+      "&:where(.dark, .dark *)",
+      "@media (prefers-color-scheme: dark) { &:where(:not(.light, .light *)) }"
+    ]
+  ],
+  "theme": {
+    "extend": {
+      "colors": {
+        "fg-primary": "rgb(var(--os-color-text-primary) / <alpha-value>)",
+        "light-text-primary": "rgb(var(--os-color-text-primary) / <alpha-value>)",
+        "dark-text-primary": "rgb(var(--os-color-text-primary) / <alpha-value>)",
+        "fg-secondary": "rgb(var(--os-color-text-secondary) / <alpha-value>)",
+        "light-text-secondary": "rgb(var(--os-color-text-secondary) / <alpha-value>)",
+        "dark-text-secondary": "rgb(var(--os-color-text-secondary) / <alpha-value>)",
+        "fg-disabled": "rgb(var(--os-color-text-disabled) / <alpha-value>)",
+        "light-text-disabled": "rgb(var(--os-color-text-disabled) / <alpha-value>)",
+        "dark-text-disabled": "rgb(var(--os-color-text-disabled) / <alpha-value>)",
+        "fg-contrast": "rgb(var(--os-color-text-contrast) / <alpha-value>)",
+        "light-text-contrast": "rgb(var(--os-color-text-contrast) / <alpha-value>)",
+        "dark-text-contrast": "rgb(var(--os-color-text-contrast) / <alpha-value>)",
+        "accent-main": "rgb(var(--os-color-accent-main) / <alpha-value>)",
+        "light-accent-main": "rgb(var(--os-color-accent-main) / <alpha-value>)",
+        "dark-accent-main": "rgb(var(--os-color-accent-main) / <alpha-value>)",
+        "accent-dark": "rgb(var(--os-color-accent-dark) / <alpha-value>)",
+        "light-accent-dark": "rgb(var(--os-color-accent-dark) / <alpha-value>)",
+        "dark-accent-dark": "rgb(var(--os-color-accent-dark) / <alpha-value>)",
+        "accent-light": "rgb(var(--os-color-accent-light) / <alpha-value>)",
+        "light-accent-light": "rgb(var(--os-color-accent-light) / <alpha-value>)",
+        "dark-accent-light": "rgb(var(--os-color-accent-light) / <alpha-value>)",
+        "accent-contrast": "rgb(var(--os-color-accent-contrast) / <alpha-value>)",
+        "light-accent-contrast": "rgb(var(--os-color-accent-contrast) / <alpha-value>)",
+        "dark-accent-contrast": "rgb(var(--os-color-accent-contrast) / <alpha-value>)",
+        "primary-main": "rgb(var(--os-color-primary-main) / <alpha-value>)",
+        "light-primary-main": "rgb(var(--os-color-primary-main) / <alpha-value>)",
+        "dark-primary-main": "rgb(var(--os-color-primary-main) / <alpha-value>)",
+        "primary-dark": "rgb(var(--os-color-primary-dark) / <alpha-value>)",
+        "light-primary-dark": "rgb(var(--os-color-primary-dark) / <alpha-value>)",
+        "dark-primary-dark": "rgb(var(--os-color-primary-dark) / <alpha-value>)",
+        "primary-light": "rgb(var(--os-color-primary-light) / <alpha-value>)",
+        "light-primary-light": "rgb(var(--os-color-primary-light) / <alpha-value>)",
+        "dark-primary-light": "rgb(var(--os-color-primary-light) / <alpha-value>)",
+        "primary-contrast": "rgb(var(--os-color-primary-contrast) / <alpha-value>)",
+        "light-primary-contrast": "rgb(var(--os-color-primary-contrast) / <alpha-value>)",
+        "dark-primary-contrast": "rgb(var(--os-color-primary-contrast) / <alpha-value>)",
+        "secondary-main": "rgb(var(--os-color-secondary-main) / <alpha-value>)",
+        "light-secondary-main": "rgb(var(--os-color-secondary-main) / <alpha-value>)",
+        "dark-secondary-main": "rgb(var(--os-color-secondary-main) / <alpha-value>)",
+        "secondary-dark": "rgb(var(--os-color-secondary-dark) / <alpha-value>)",
+        "light-secondary-dark": "rgb(var(--os-color-secondary-dark) / <alpha-value>)",
+        "dark-secondary-dark": "rgb(var(--os-color-secondary-dark) / <alpha-value>)",
+        "secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
+        "light-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
+        "dark-secondary-light": "rgb(var(--os-color-secondary-light) / <alpha-value>)",
+        "error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
+        "light-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
+        "dark-error-main": "rgb(var(--os-color-error-main) / <alpha-value>)",
+        "error-dark": "rgb(var(--os-color-error-dark) / <alpha-value>)",
+        "light-error-dark": "rgb(var(--os-color-error-dark) / <alpha-value>)",
+        "dark-error-dark": "rgb(var(--os-color-error-dark) / <alpha-value>)",
+        "error-light": "rgb(var(--os-color-error-light) / <alpha-value>)",
+        "light-error-light": "rgb(var(--os-color-error-light) / <alpha-value>)",
+        "dark-error-light": "rgb(var(--os-color-error-light) / <alpha-value>)",
+        "error-alertBg": "rgb(var(--os-color-error-alertBg) / <alpha-value>)",
+        "light-error-alertBg": "rgb(var(--os-color-error-alertBg) / <alpha-value>)",
+        "dark-error-alertBg": "rgb(var(--os-color-error-alertBg) / <alpha-value>)",
+        "error-contrast": "rgb(var(--os-color-error-contrast) / <alpha-value>)",
+        "light-error-contrast": "rgb(var(--os-color-error-contrast) / <alpha-value>)",
+        "dark-error-contrast": "rgb(var(--os-color-error-contrast) / <alpha-value>)",
+        "error-fill": "rgb(var(--os-color-error-fill) / <alpha-value>)",
+        "light-error-fill": "rgb(var(--os-color-error-fill) / <alpha-value>)",
+        "dark-error-fill": "rgb(var(--os-color-error-fill) / <alpha-value>)",
+        "error-onFill": "rgb(var(--os-color-error-onFill) / <alpha-value>)",
+        "light-error-onFill": "rgb(var(--os-color-error-onFill) / <alpha-value>)",
+        "dark-error-onFill": "rgb(var(--os-color-error-onFill) / <alpha-value>)",
+        "error-text": "rgb(var(--os-color-error-text) / <alpha-value>)",
+        "light-error-text": "rgb(var(--os-color-error-text) / <alpha-value>)",
+        "dark-error-text": "rgb(var(--os-color-error-text) / <alpha-value>)",
+        "error-textHover": "rgb(var(--os-color-error-textHover) / <alpha-value>)",
+        "light-error-textHover": "rgb(var(--os-color-error-textHover) / <alpha-value>)",
+        "dark-error-textHover": "rgb(var(--os-color-error-textHover) / <alpha-value>)",
+        "error-tint": "rgb(var(--os-color-error-tint) / <alpha-value>)",
+        "light-error-tint": "rgb(var(--os-color-error-tint) / <alpha-value>)",
+        "dark-error-tint": "rgb(var(--os-color-error-tint) / <alpha-value>)",
+        "warning-main": "rgb(var(--os-color-warning-main) / <alpha-value>)",
+        "light-warning-main": "rgb(var(--os-color-warning-main) / <alpha-value>)",
+        "dark-warning-main": "rgb(var(--os-color-warning-main) / <alpha-value>)",
+        "warning-dark": "rgb(var(--os-color-warning-dark) / <alpha-value>)",
+        "light-warning-dark": "rgb(var(--os-color-warning-dark) / <alpha-value>)",
+        "dark-warning-dark": "rgb(var(--os-color-warning-dark) / <alpha-value>)",
+        "warning-light": "rgb(var(--os-color-warning-light) / <alpha-value>)",
+        "light-warning-light": "rgb(var(--os-color-warning-light) / <alpha-value>)",
+        "dark-warning-light": "rgb(var(--os-color-warning-light) / <alpha-value>)",
+        "warning-alertBg": "rgb(var(--os-color-warning-alertBg) / <alpha-value>)",
+        "light-warning-alertBg": "rgb(var(--os-color-warning-alertBg) / <alpha-value>)",
+        "dark-warning-alertBg": "rgb(var(--os-color-warning-alertBg) / <alpha-value>)",
+        "warning-contrast": "rgb(var(--os-color-warning-contrast) / <alpha-value>)",
+        "light-warning-contrast": "rgb(var(--os-color-warning-contrast) / <alpha-value>)",
+        "dark-warning-contrast": "rgb(var(--os-color-warning-contrast) / <alpha-value>)",
+        "warning-fill": "rgb(var(--os-color-warning-fill) / <alpha-value>)",
+        "light-warning-fill": "rgb(var(--os-color-warning-fill) / <alpha-value>)",
+        "dark-warning-fill": "rgb(var(--os-color-warning-fill) / <alpha-value>)",
+        "warning-onFill": "rgb(var(--os-color-warning-onFill) / <alpha-value>)",
+        "light-warning-onFill": "rgb(var(--os-color-warning-onFill) / <alpha-value>)",
+        "dark-warning-onFill": "rgb(var(--os-color-warning-onFill) / <alpha-value>)",
+        "warning-text": "rgb(var(--os-color-warning-text) / <alpha-value>)",
+        "light-warning-text": "rgb(var(--os-color-warning-text) / <alpha-value>)",
+        "dark-warning-text": "rgb(var(--os-color-warning-text) / <alpha-value>)",
+        "warning-textHover": "rgb(var(--os-color-warning-textHover) / <alpha-value>)",
+        "light-warning-textHover": "rgb(var(--os-color-warning-textHover) / <alpha-value>)",
+        "dark-warning-textHover": "rgb(var(--os-color-warning-textHover) / <alpha-value>)",
+        "warning-tint": "rgb(var(--os-color-warning-tint) / <alpha-value>)",
+        "light-warning-tint": "rgb(var(--os-color-warning-tint) / <alpha-value>)",
+        "dark-warning-tint": "rgb(var(--os-color-warning-tint) / <alpha-value>)",
+        "info-main": "rgb(var(--os-color-info-main) / <alpha-value>)",
+        "light-info-main": "rgb(var(--os-color-info-main) / <alpha-value>)",
+        "dark-info-main": "rgb(var(--os-color-info-main) / <alpha-value>)",
+        "info-dark": "rgb(var(--os-color-info-dark) / <alpha-value>)",
+        "light-info-dark": "rgb(var(--os-color-info-dark) / <alpha-value>)",
+        "dark-info-dark": "rgb(var(--os-color-info-dark) / <alpha-value>)",
+        "info-light": "rgb(var(--os-color-info-light) / <alpha-value>)",
+        "light-info-light": "rgb(var(--os-color-info-light) / <alpha-value>)",
+        "dark-info-light": "rgb(var(--os-color-info-light) / <alpha-value>)",
+        "info-alertBg": "rgb(var(--os-color-info-alertBg) / <alpha-value>)",
+        "light-info-alertBg": "rgb(var(--os-color-info-alertBg) / <alpha-value>)",
+        "dark-info-alertBg": "rgb(var(--os-color-info-alertBg) / <alpha-value>)",
+        "info-contrast": "rgb(var(--os-color-info-contrast) / <alpha-value>)",
+        "light-info-contrast": "rgb(var(--os-color-info-contrast) / <alpha-value>)",
+        "dark-info-contrast": "rgb(var(--os-color-info-contrast) / <alpha-value>)",
+        "info-fill": "rgb(var(--os-color-info-fill) / <alpha-value>)",
+        "light-info-fill": "rgb(var(--os-color-info-fill) / <alpha-value>)",
+        "dark-info-fill": "rgb(var(--os-color-info-fill) / <alpha-value>)",
+        "info-onFill": "rgb(var(--os-color-info-onFill) / <alpha-value>)",
+        "light-info-onFill": "rgb(var(--os-color-info-onFill) / <alpha-value>)",
+        "dark-info-onFill": "rgb(var(--os-color-info-onFill) / <alpha-value>)",
+        "info-text": "rgb(var(--os-color-info-text) / <alpha-value>)",
+        "light-info-text": "rgb(var(--os-color-info-text) / <alpha-value>)",
+        "dark-info-text": "rgb(var(--os-color-info-text) / <alpha-value>)",
+        "info-textHover": "rgb(var(--os-color-info-textHover) / <alpha-value>)",
+        "light-info-textHover": "rgb(var(--os-color-info-textHover) / <alpha-value>)",
+        "dark-info-textHover": "rgb(var(--os-color-info-textHover) / <alpha-value>)",
+        "info-tint": "rgb(var(--os-color-info-tint) / <alpha-value>)",
+        "light-info-tint": "rgb(var(--os-color-info-tint) / <alpha-value>)",
+        "dark-info-tint": "rgb(var(--os-color-info-tint) / <alpha-value>)",
+        "success-main": "rgb(var(--os-color-success-main) / <alpha-value>)",
+        "light-success-main": "rgb(var(--os-color-success-main) / <alpha-value>)",
+        "dark-success-main": "rgb(var(--os-color-success-main) / <alpha-value>)",
+        "success-dark": "rgb(var(--os-color-success-dark) / <alpha-value>)",
+        "light-success-dark": "rgb(var(--os-color-success-dark) / <alpha-value>)",
+        "dark-success-dark": "rgb(var(--os-color-success-dark) / <alpha-value>)",
+        "success-light": "rgb(var(--os-color-success-light) / <alpha-value>)",
+        "light-success-light": "rgb(var(--os-color-success-light) / <alpha-value>)",
+        "dark-success-light": "rgb(var(--os-color-success-light) / <alpha-value>)",
+        "success-alertBg": "rgb(var(--os-color-success-alertBg) / <alpha-value>)",
+        "light-success-alertBg": "rgb(var(--os-color-success-alertBg) / <alpha-value>)",
+        "dark-success-alertBg": "rgb(var(--os-color-success-alertBg) / <alpha-value>)",
+        "success-contrast": "rgb(var(--os-color-success-contrast) / <alpha-value>)",
+        "light-success-contrast": "rgb(var(--os-color-success-contrast) / <alpha-value>)",
+        "dark-success-contrast": "rgb(var(--os-color-success-contrast) / <alpha-value>)",
+        "success-fill": "rgb(var(--os-color-success-fill) / <alpha-value>)",
+        "light-success-fill": "rgb(var(--os-color-success-fill) / <alpha-value>)",
+        "dark-success-fill": "rgb(var(--os-color-success-fill) / <alpha-value>)",
+        "success-onFill": "rgb(var(--os-color-success-onFill) / <alpha-value>)",
+        "light-success-onFill": "rgb(var(--os-color-success-onFill) / <alpha-value>)",
+        "dark-success-onFill": "rgb(var(--os-color-success-onFill) / <alpha-value>)",
+        "success-text": "rgb(var(--os-color-success-text) / <alpha-value>)",
+        "light-success-text": "rgb(var(--os-color-success-text) / <alpha-value>)",
+        "dark-success-text": "rgb(var(--os-color-success-text) / <alpha-value>)",
+        "success-textHover": "rgb(var(--os-color-success-textHover) / <alpha-value>)",
+        "light-success-textHover": "rgb(var(--os-color-success-textHover) / <alpha-value>)",
+        "dark-success-textHover": "rgb(var(--os-color-success-textHover) / <alpha-value>)",
+        "success-tint": "rgb(var(--os-color-success-tint) / <alpha-value>)",
+        "light-success-tint": "rgb(var(--os-color-success-tint) / <alpha-value>)",
+        "dark-success-tint": "rgb(var(--os-color-success-tint) / <alpha-value>)",
+        "background-default": "rgb(var(--os-color-background-default) / <alpha-value>)",
+        "light-background-default": "rgb(var(--os-color-background-default) / <alpha-value>)",
+        "dark-background-default": "rgb(var(--os-color-background-default) / <alpha-value>)",
+        "background-accent100": "rgb(var(--os-color-background-accent100) / <alpha-value>)",
+        "light-background-accent100": "rgb(var(--os-color-background-accent100) / <alpha-value>)",
+        "dark-background-accent100": "rgb(var(--os-color-background-accent100) / <alpha-value>)",
+        "background-accent200": "rgb(var(--os-color-background-accent200) / <alpha-value>)",
+        "light-background-accent200": "rgb(var(--os-color-background-accent200) / <alpha-value>)",
+        "dark-background-accent200": "rgb(var(--os-color-background-accent200) / <alpha-value>)",
+        "background-accent300": "rgb(var(--os-color-background-accent300) / <alpha-value>)",
+        "light-background-accent300": "rgb(var(--os-color-background-accent300) / <alpha-value>)",
+        "dark-background-accent300": "rgb(var(--os-color-background-accent300) / <alpha-value>)",
+        "background-elevated": "rgb(var(--os-color-background-elevated) / <alpha-value>)",
+        "light-background-elevated": "rgb(var(--os-color-background-elevated) / <alpha-value>)",
+        "dark-background-elevated": "rgb(var(--os-color-background-elevated) / <alpha-value>)",
+        "background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "light-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "dark-background-overlay": "rgb(var(--os-color-background-overlay) / <alpha-value>)",
+        "action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
+        "light-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
+        "dark-action-active": "rgb(var(--os-color-action-active) / <alpha-value>)",
+        "action-hover": "rgb(var(--os-color-action-hover) / <alpha-value>)",
+        "light-action-hover": "rgb(var(--os-color-action-hover) / <alpha-value>)",
+        "dark-action-hover": "rgb(var(--os-color-action-hover) / <alpha-value>)",
+        "action-selected": "rgb(var(--os-color-action-selected) / <alpha-value>)",
+        "light-action-selected": "rgb(var(--os-color-action-selected) / <alpha-value>)",
+        "dark-action-selected": "rgb(var(--os-color-action-selected) / <alpha-value>)",
+        "action-disabledBackground": "rgb(var(--os-color-action-disabledBackground) / <alpha-value>)",
+        "light-action-disabledBackground": "rgb(var(--os-color-action-disabledBackground) / <alpha-value>)",
+        "dark-action-disabledBackground": "rgb(var(--os-color-action-disabledBackground) / <alpha-value>)",
+        "action-disabled": "rgb(var(--os-color-action-disabled) / <alpha-value>)",
+        "light-action-disabled": "rgb(var(--os-color-action-disabled) / <alpha-value>)",
+        "dark-action-disabled": "rgb(var(--os-color-action-disabled) / <alpha-value>)",
+        "actionBackground-enabled": "rgb(var(--os-color-actionBackground-enabled) / <alpha-value>)",
+        "light-actionBackground-enabled": "rgb(var(--os-color-actionBackground-enabled) / <alpha-value>)",
+        "dark-actionBackground-enabled": "rgb(var(--os-color-actionBackground-enabled) / <alpha-value>)",
+        "actionBackground-hovered": "rgb(var(--os-color-actionBackground-hovered) / <alpha-value>)",
+        "light-actionBackground-hovered": "rgb(var(--os-color-actionBackground-hovered) / <alpha-value>)",
+        "dark-actionBackground-hovered": "rgb(var(--os-color-actionBackground-hovered) / <alpha-value>)",
+        "actionBackground-selected": "rgb(var(--os-color-actionBackground-selected) / <alpha-value>)",
+        "light-actionBackground-selected": "rgb(var(--os-color-actionBackground-selected) / <alpha-value>)",
+        "dark-actionBackground-selected": "rgb(var(--os-color-actionBackground-selected) / <alpha-value>)",
+        "actionBackground-disabled": "rgb(var(--os-color-actionBackground-disabled) / <alpha-value>)",
+        "light-actionBackground-disabled": "rgb(var(--os-color-actionBackground-disabled) / <alpha-value>)",
+        "dark-actionBackground-disabled": "rgb(var(--os-color-actionBackground-disabled) / <alpha-value>)",
+        "actionOutlinedBorder-enabled": "rgb(var(--os-color-actionOutlinedBorder-enabled) / <alpha-value>)",
+        "light-actionOutlinedBorder-enabled": "rgb(var(--os-color-actionOutlinedBorder-enabled) / <alpha-value>)",
+        "dark-actionOutlinedBorder-enabled": "rgb(var(--os-color-actionOutlinedBorder-enabled) / <alpha-value>)",
+        "actionOutlinedBorder-hovered": "rgb(var(--os-color-actionOutlinedBorder-hovered) / <alpha-value>)",
+        "light-actionOutlinedBorder-hovered": "rgb(var(--os-color-actionOutlinedBorder-hovered) / <alpha-value>)",
+        "dark-actionOutlinedBorder-hovered": "rgb(var(--os-color-actionOutlinedBorder-hovered) / <alpha-value>)",
+        "actionOutlinedBorder-selected": "rgb(var(--os-color-actionOutlinedBorder-selected) / <alpha-value>)",
+        "light-actionOutlinedBorder-selected": "rgb(var(--os-color-actionOutlinedBorder-selected) / <alpha-value>)",
+        "dark-actionOutlinedBorder-selected": "rgb(var(--os-color-actionOutlinedBorder-selected) / <alpha-value>)",
+        "actionOutlinedBorder-disabled": "rgb(var(--os-color-actionOutlinedBorder-disabled) / <alpha-value>)",
+        "light-actionOutlinedBorder-disabled": "rgb(var(--os-color-actionOutlinedBorder-disabled) / <alpha-value>)",
+        "dark-actionOutlinedBorder-disabled": "rgb(var(--os-color-actionOutlinedBorder-disabled) / <alpha-value>)",
+        "misc-divider": "rgb(var(--os-color-misc-divider) / <alpha-value>)",
+        "light-misc-divider": "rgb(var(--os-color-misc-divider) / <alpha-value>)",
+        "dark-misc-divider": "rgb(var(--os-color-misc-divider) / <alpha-value>)",
+        "misc-scrim": "rgb(var(--os-color-misc-scrim) / <alpha-value>)",
+        "light-misc-scrim": "rgb(var(--os-color-misc-scrim) / <alpha-value>)",
+        "dark-misc-scrim": "rgb(var(--os-color-misc-scrim) / <alpha-value>)",
+        "misc-tooltipBg": "rgb(var(--os-color-misc-tooltipBg) / <alpha-value>)",
+        "light-misc-tooltipBg": "rgb(var(--os-color-misc-tooltipBg) / <alpha-value>)",
+        "dark-misc-tooltipBg": "rgb(var(--os-color-misc-tooltipBg) / <alpha-value>)",
+        "misc-tooltipText": "rgb(var(--os-color-misc-tooltipText) / <alpha-value>)",
+        "light-misc-tooltipText": "rgb(var(--os-color-misc-tooltipText) / <alpha-value>)",
+        "dark-misc-tooltipText": "rgb(var(--os-color-misc-tooltipText) / <alpha-value>)"
+      },
+      "borderRadius": {
+        "inline": "var(--os-radius-inline)",
+        "control": "var(--os-radius-control)",
+        "container": "var(--os-radius-container)",
+        "full": "var(--os-radius-full)"
+      },
+      "boxShadow": {
+        "overlay": "var(--os-shadow-overlay)"
+      },
+      "transitionTimingFunction": {
+        "out": "var(--os-ease-out)",
+        "emphasized": "var(--os-ease-emphasized)",
+        "spring": "var(--os-ease-spring)"
+      },
+      "spacing": {
+        "small": "var(--os-spacing-small)",
+        "medium": "var(--os-spacing-medium)",
+        "large": "var(--os-spacing-large)"
+      },
+      "fontSize": {
+        "h1": [
+          "96px",
+          {
+            "lineHeight": "115px",
+            "letterSpacing": "-1.5px",
+            "fontWeight": "400"
+          }
+        ],
+        "h2": [
+          "60px",
+          {
+            "lineHeight": "72px",
+            "letterSpacing": "-0.5px",
+            "fontWeight": "400"
+          }
+        ],
+        "h3": [
+          "48px",
+          {
+            "lineHeight": "58px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "h4": [
+          "34px",
+          {
+            "lineHeight": "41px",
+            "letterSpacing": "0.3px",
+            "fontWeight": "400"
+          }
+        ],
+        "h5": [
+          "24px",
+          {
+            "lineHeight": "29px",
+            "letterSpacing": "0px",
+            "fontWeight": "400"
+          }
+        ],
+        "h6": [
+          "20px",
+          {
+            "lineHeight": "30px",
+            "letterSpacing": "0.2px",
+            "fontWeight": "400"
+          }
+        ],
+        "subtitle1": [
+          "16px",
+          {
+            "lineHeight": "24px",
+            "letterSpacing": "0.2px",
+            "fontWeight": "400"
+          }
+        ],
+        "subtitle2": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0.1px",
+            "fontWeight": "400"
+          }
+        ],
+        "body1": [
+          "16px",
+          {
+            "lineHeight": "24px",
+            "letterSpacing": "0.2px",
+            "fontWeight": "400"
+          }
+        ],
+        "body2": [
+          "14px",
+          {
+            "lineHeight": "21px",
+            "letterSpacing": "0.2px",
+            "fontWeight": "400"
+          }
+        ],
+        "caption": [
+          "12px",
+          {
+            "lineHeight": "18px",
+            "letterSpacing": "0.5px",
+            "fontWeight": "400"
+          }
+        ]
+      },
+      "fontFamily": {
+        "inter": "Inter, sans-serif"
+      },
+      "fontWeight": {
+        "h1": "400",
+        "h2": "400",
+        "h3": "400",
+        "h4": "400",
+        "h5": "400",
+        "h6": "400",
+        "subtitle1": "400",
+        "subtitle2": "400",
+        "body1": "400",
+        "body2": "400",
+        "caption": "400"
+      },
+      "letterSpacing": {
+        "h1": "-1.5px",
+        "h2": "-0.5px",
+        "h3": "0px",
+        "h4": "0.3px",
+        "h5": "0px",
+        "h6": "0.2px",
+        "subtitle1": "0.2px",
+        "subtitle2": "0.1px",
+        "body1": "0.2px",
+        "body2": "0.2px",
+        "caption": "0.5px"
+      },
+      "lineHeight": {
+        "h1": "115px",
+        "h2": "72px",
+        "h3": "58px",
+        "h4": "41px",
+        "h5": "29px",
+        "h6": "30px",
+        "subtitle1": "24px",
+        "subtitle2": "21px",
+        "body1": "24px",
+        "body2": "21px",
+        "caption": "18px"
+      }
+    }
+  }
+};