@diskette/palette 0.6.0 → 0.8.0

package/dist/index.js

@@ -0,0 +1,67 @@
+import amber from "./colors/amber.js";
+import blue from "./colors/blue.js";
+import bronze from "./colors/bronze.js";
+import brown from "./colors/brown.js";
+import crimson from "./colors/crimson.js";
+import cyan from "./colors/cyan.js";
+import gold from "./colors/gold.js";
+import grass from "./colors/grass.js";
+import gray from "./colors/gray.js";
+import green from "./colors/green.js";
+import indigo from "./colors/indigo.js";
+import iris from "./colors/iris.js";
+import jade from "./colors/jade.js";
+import lime from "./colors/lime.js";
+import mauve from "./colors/mauve.js";
+import mint from "./colors/mint.js";
+import olive from "./colors/olive.js";
+import orange from "./colors/orange.js";
+import pink from "./colors/pink.js";
+import plum from "./colors/plum.js";
+import purple from "./colors/purple.js";
+import red from "./colors/red.js";
+import ruby from "./colors/ruby.js";
+import sage from "./colors/sage.js";
+import sand from "./colors/sand.js";
+import sky from "./colors/sky.js";
+import slate from "./colors/slate.js";
+import teal from "./colors/teal.js";
+import tomato from "./colors/tomato.js";
+import violet from "./colors/violet.js";
+import yellow from "./colors/yellow.js";
+export const colors = [
+    amber,
+    blue,
+    bronze,
+    brown,
+    crimson,
+    cyan,
+    gold,
+    grass,
+    gray,
+    green,
+    indigo,
+    iris,
+    jade,
+    lime,
+    mauve,
+    mint,
+    olive,
+    orange,
+    pink,
+    plum,
+    purple,
+    red,
+    ruby,
+    sage,
+    sand,
+    sky,
+    slate,
+    teal,
+    tomato,
+    violet,
+    yellow,
+];
+export default colors;
+export { accentColors, grayColors } from "./types.js";
+export { css } from "./lib.js";

package/dist/lib.d.ts

@@ -0,0 +1,30 @@
+export type AlphaConfig = {
+    srgb: Record<string, string>;
+    p3: Record<string, string>;
+};
+export type ColorConfig = {
+    srgb: {
+        light: Record<string, string> & {
+            surface: string;
+        };
+        dark: Record<string, string> & {
+            surface: string;
+        };
+    };
+    p3: {
+        light: Record<string, string> & {
+            surface: string;
+        };
+        dark: Record<string, string> & {
+            surface: string;
+        };
+    };
+    contrast: string;
+    indicator: string;
+    track: string;
+};
+export declare const css: {
+    scale(scheme: "light" | "lightAlpha" | "dark" | "darkAlpha", config: ColorConfig): string;
+    alpha(config: AlphaConfig): string;
+    semantic(name: string, config: ColorConfig): string;
+};

package/dist/lib.js

@@ -0,0 +1,87 @@
+const lightSelector = `:root, .light, .light-theme`;
+const darkSelector = `.dark, .dark-theme`;
+export const css = {
+    scale(scheme, config) {
+        const isLight = scheme === 'light' || scheme === 'lightAlpha';
+        const isAlpha = scheme === 'lightAlpha' || scheme === 'darkAlpha';
+        const selector = isLight ? lightSelector : darkSelector;
+        const srgbScale = isLight ? config.srgb.light : config.srgb.dark;
+        const p3Scale = isLight ? config.p3.light : config.p3.dark;
+        const filterEntries = (obj) => Object.entries(obj).filter(([key]) => {
+            if (key === 'surface')
+                return false;
+            const hasAlpha = key.includes('A');
+            return isAlpha ? hasAlpha : !hasAlpha;
+        });
+        const baseVars = filterEntries(srgbScale)
+            .map(([key, value]) => `  ${key}: ${value};`)
+            .join('\n');
+        const p3Vars = filterEntries(p3Scale)
+            .map(([key, value]) => `      ${key}: ${value};`)
+            .join('\n');
+        return `${selector} {
+${baseVars}
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    ${selector} {
+${p3Vars}
+    }
+  }
+}
+`;
+    },
+    alpha(config) {
+        const baseVars = Object.entries(config.srgb)
+            .map(([key, value]) => `  ${key}: ${value};`)
+            .join('\n');
+        const p3Vars = Object.entries(config.p3)
+            .map(([key, value]) => `      ${key}: ${value};`)
+            .join('\n');
+        return `:root {
+${baseVars}
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+${p3Vars}
+    }
+  }
+}
+`;
+    },
+    semantic(name, config) {
+        const varRef = (key) => `var(--${key.replace(/(\d+)$/, '-$1')})`;
+        return `:root {
+  --${name}-contrast: ${config.contrast};
+}
+
+:root,
+.light,
+.light-theme {
+  --${name}-surface: ${config.srgb.light.surface};
+  --${name}-indicator: ${varRef(config.indicator)};
+  --${name}-track: ${varRef(config.track)};
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --${name}-surface: ${config.p3.light.surface};
+    }
+  }
+}
+
+.dark,
+.dark-theme {
+  --${name}-surface: ${config.srgb.dark.surface};
+  --${name}-indicator: ${varRef(config.indicator)};
+  --${name}-track: ${varRef(config.track)};
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      --${name}-surface: ${config.p3.dark.surface};
+    }
+  }
+}
+`;
+    },
+};

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+export declare const grayColors: readonly ["gray", "mauve", "slate", "sage", "olive", "sand"];
+export type GrayColor = (typeof grayColors)[number];
+export declare const accentColors: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
+export type AccentColor = (typeof accentColors)[number];
+export type Color = AccentColor | GrayColor;
+type ScaleStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColorScale<C extends Color> = {
+    [K in `${C}${ScaleStep}` | `${C}A${ScaleStep}` | 'surface']: string;
+};
+export type ColorPalette<C extends Color> = {
+    srgb: {
+        light: ColorScale<C>;
+        dark: ColorScale<C>;
+    };
+    p3: {
+        light: ColorScale<C>;
+        dark: ColorScale<C>;
+    };
+    contrast: string;
+    indicator: string;
+    track: string;
+};
+export {};

package/dist/{colors.js → types.js}

@@ -34,4 +34,3 @@ export const accentColors = [
     'mint',
     'sky',
 ];
-export const colors = [...accentColors, ...grayColors.slice(1)];

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@diskette/palette",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "exports": {
     ".": "./dist/colors.js",
-    "./*.css": "./dist/*.css"
+    "./colors": "./dist/colors/index.js",
+    "./colors/*": "./dist/colors/*.js"
   },
   "files": [
     "dist"
@@ -16,7 +17,8 @@
     "oxlint-tsgolint": "^0.2.0",
     "prettier": "^3.6.2",
     "tsx": "^4.20.5",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "vitest": "^4.0.14"
   },
   "repository": {
     "type": "git",
@@ -29,10 +31,9 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf dist && pnpm build:js && pnpm build:css",
-    "build:js": "tsc -p tsconfig.build.json",
-    "build:css": "tsx --no-warnings=ExperimentalWarning scripts/build.ts",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "typecheck": "tsc",
+    "test": "vitest run",
     "lint": "oxlint --type-aware src",
     "release": "changeset version && changeset publish && git push --follow-tags"
   }

package/dist/accents.css

@@ -1,32 +0,0 @@
-@theme inline static {
-  --color-accent-1: var(--accent-1);
-  --color-accent-2: var(--accent-2);
-  --color-accent-3: var(--accent-3);
-  --color-accent-4: var(--accent-4);
-  --color-accent-5: var(--accent-5);
-  --color-accent-6: var(--accent-6);
-  --color-accent-7: var(--accent-7);
-  --color-accent-8: var(--accent-8);
-  --color-accent-9: var(--accent-9);
-  --color-accent-10: var(--accent-10);
-  --color-accent-11: var(--accent-11);
-  --color-accent-12: var(--accent-12);
-
-  --color-accent-a1: var(--accent-a1);
-  --color-accent-a2: var(--accent-a2);
-  --color-accent-a3: var(--accent-a3);
-  --color-accent-a4: var(--accent-a4);
-  --color-accent-a5: var(--accent-a5);
-  --color-accent-a6: var(--accent-a6);
-  --color-accent-a7: var(--accent-a7);
-  --color-accent-a8: var(--accent-a8);
-  --color-accent-a9: var(--accent-a9);
-  --color-accent-a10: var(--accent-a10);
-  --color-accent-a11: var(--accent-a11);
-  --color-accent-a12: var(--accent-a12);
-
-  --color-accent-contrast: var(--accent-contrast);
-  --color-accent-surface: var(--accent-surface);
-  --color-accent-indicator: var(--accent-indicator);
-  --color-accent-track: var(--accent-track);
-}

package/dist/amber-accents.css

@@ -1,32 +0,0 @@
-[data-accent-color='amber'] {
-  --accent-1: var(--amber-1);
-  --accent-2: var(--amber-2);
-  --accent-3: var(--amber-3);
-  --accent-4: var(--amber-4);
-  --accent-5: var(--amber-5);
-  --accent-6: var(--amber-6);
-  --accent-7: var(--amber-7);
-  --accent-8: var(--amber-8);
-  --accent-9: var(--amber-9);
-  --accent-10: var(--amber-10);
-  --accent-11: var(--amber-11);
-  --accent-12: var(--amber-12);
-
-  --accent-a1: var(--amber-a1);
-  --accent-a2: var(--amber-a2);
-  --accent-a3: var(--amber-a3);
-  --accent-a4: var(--amber-a4);
-  --accent-a5: var(--amber-a5);
-  --accent-a6: var(--amber-a6);
-  --accent-a7: var(--amber-a7);
-  --accent-a8: var(--amber-a8);
-  --accent-a9: var(--amber-a9);
-  --accent-a10: var(--amber-a10);
-  --accent-a11: var(--amber-a11);
-  --accent-a12: var(--amber-a12);
-
-  --accent-contrast: var(--amber-contrast);
-  --accent-surface: var(--amber-surface);
-  --accent-indicator: var(--amber-indicator);
-  --accent-track: var(--amber-track);
-}

package/dist/amber-p3.css

@@ -1,95 +0,0 @@
-@theme static {
-  --color-amber-1: var(--amber-1);
-  --color-amber-2: var(--amber-2);
-  --color-amber-3: var(--amber-3);
-  --color-amber-4: var(--amber-4);
-  --color-amber-5: var(--amber-5);
-  --color-amber-6: var(--amber-6);
-  --color-amber-7: var(--amber-7);
-  --color-amber-8: var(--amber-8);
-  --color-amber-9: var(--amber-9);
-  --color-amber-10: var(--amber-10);
-  --color-amber-11: var(--amber-11);
-  --color-amber-12: var(--amber-12);
-
-  --color-amber-a1: var(--amber-a1);
-  --color-amber-a2: var(--amber-a2);
-  --color-amber-a3: var(--amber-a3);
-  --color-amber-a4: var(--amber-a4);
-  --color-amber-a5: var(--amber-a5);
-  --color-amber-a6: var(--amber-a6);
-  --color-amber-a7: var(--amber-a7);
-  --color-amber-a8: var(--amber-a8);
-  --color-amber-a9: var(--amber-a9);
-  --color-amber-a10: var(--amber-a10);
-  --color-amber-a11: var(--amber-a11);
-  --color-amber-a12: var(--amber-a12);
-
-  --color-amber-contrast: var(--amber-contrast);
-  --color-amber-surface: var(--amber-surface);
-  --color-amber-indicator: var(--amber-indicator);
-  --color-amber-track: var(--amber-track);
-}
-
-:root {
-  --amber-1: color(display-p3 0.995 0.992 0.985);
-  --amber-2: color(display-p3 0.994 0.986 0.921);
-  --amber-3: color(display-p3 0.994 0.969 0.782);
-  --amber-4: color(display-p3 0.989 0.937 0.65);
-  --amber-5: color(display-p3 0.97 0.902 0.527);
-  --amber-6: color(display-p3 0.936 0.844 0.506);
-  --amber-7: color(display-p3 0.89 0.762 0.443);
-  --amber-8: color(display-p3 0.85 0.65 0.3);
-  --amber-9: color(display-p3 1 0.77 0.26);
-  --amber-10: color(display-p3 0.959 0.741 0.274);
-  --amber-11: color(display-p3 0.64 0.4 0);
-  --amber-12: color(display-p3 0.294 0.208 0.145);
-
-  --amber-a1: color(display-p3 0.757 0.514 0.024 / 0.016);
-  --amber-a2: color(display-p3 0.902 0.804 0.008 / 0.079);
-  --amber-a3: color(display-p3 0.965 0.859 0.004 / 0.22);
-  --amber-a4: color(display-p3 0.969 0.82 0.004 / 0.35);
-  --amber-a5: color(display-p3 0.933 0.796 0.004 / 0.475);
-  --amber-a6: color(display-p3 0.875 0.682 0.004 / 0.495);
-  --amber-a7: color(display-p3 0.804 0.573 0 / 0.557);
-  --amber-a8: color(display-p3 0.788 0.502 0 / 0.699);
-  --amber-a9: color(display-p3 1 0.686 0 / 0.742);
-  --amber-a10: color(display-p3 0.945 0.643 0 / 0.726);
-  --amber-a11: color(display-p3 0.64 0.4 0);
-  --amber-a12: color(display-p3 0.294 0.208 0.145);
-
-  --amber-contrast: #21201c; /* light mode sand 12 */
-  --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 0.8);
-  --amber-indicator: var(--amber-9);
-  --amber-track: var(--amber-9);
-}
-
-.dark {
-  --amber-1: color(display-p3 0.082 0.07 0.05);
-  --amber-2: color(display-p3 0.111 0.094 0.064);
-  --amber-3: color(display-p3 0.178 0.128 0.049);
-  --amber-4: color(display-p3 0.239 0.156 0);
-  --amber-5: color(display-p3 0.29 0.193 0);
-  --amber-6: color(display-p3 0.344 0.245 0.076);
-  --amber-7: color(display-p3 0.422 0.314 0.141);
-  --amber-8: color(display-p3 0.535 0.399 0.189);
-  --amber-9: color(display-p3 1 0.77 0.26);
-  --amber-10: color(display-p3 1 0.87 0.15);
-  --amber-11: color(display-p3 1 0.8 0.29);
-  --amber-12: color(display-p3 0.984 0.909 0.726);
-
-  --amber-a1: color(display-p3 0.992 0.298 0 / 0.017);
-  --amber-a2: color(display-p3 0.988 0.651 0 / 0.047);
-  --amber-a3: color(display-p3 1 0.6 0 / 0.118);
-  --amber-a4: color(display-p3 1 0.557 0 / 0.185);
-  --amber-a5: color(display-p3 1 0.592 0 / 0.24);
-  --amber-a6: color(display-p3 1 0.659 0.094 / 0.299);
-  --amber-a7: color(display-p3 1 0.714 0.263 / 0.383);
-  --amber-a8: color(display-p3 0.996 0.729 0.306 / 0.5);
-  --amber-a9: color(display-p3 1 0.769 0.259);
-  --amber-a10: color(display-p3 1 0.871 0.149);
-  --amber-a11: color(display-p3 1 0.8 0.29);
-  --amber-a12: color(display-p3 0.984 0.909 0.726);
-
-  --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 0.5);
-}

package/dist/black-alpha.css

@@ -1,29 +0,0 @@
-@theme static {
-  --color-black-a1: var(--black-a1);
-  --color-black-a2: var(--black-a2);
-  --color-black-a3: var(--black-a3);
-  --color-black-a4: var(--black-a4);
-  --color-black-a5: var(--black-a5);
-  --color-black-a6: var(--black-a6);
-  --color-black-a7: var(--black-a7);
-  --color-black-a8: var(--black-a8);
-  --color-black-a9: var(--black-a9);
-  --color-black-a10: var(--black-a10);
-  --color-black-a11: var(--black-a11);
-  --color-black-a12: var(--black-a12);
-}
-
-:root {
-  --black-a1: color(display-p3 0 0 0 / 0.05);
-  --black-a2: color(display-p3 0 0 0 / 0.1);
-  --black-a3: color(display-p3 0 0 0 / 0.15);
-  --black-a4: color(display-p3 0 0 0 / 0.2);
-  --black-a5: color(display-p3 0 0 0 / 0.3);
-  --black-a6: color(display-p3 0 0 0 / 0.4);
-  --black-a7: color(display-p3 0 0 0 / 0.5);
-  --black-a8: color(display-p3 0 0 0 / 0.6);
-  --black-a9: color(display-p3 0 0 0 / 0.7);
-  --black-a10: color(display-p3 0 0 0 / 0.8);
-  --black-a11: color(display-p3 0 0 0 / 0.9);
-  --black-a12: color(display-p3 0 0 0 / 0.95);
-}

package/dist/blue-accents.css

@@ -1,32 +0,0 @@
-[data-accent-color='blue'] {
-  --accent-1: var(--blue-1);
-  --accent-2: var(--blue-2);
-  --accent-3: var(--blue-3);
-  --accent-4: var(--blue-4);
-  --accent-5: var(--blue-5);
-  --accent-6: var(--blue-6);
-  --accent-7: var(--blue-7);
-  --accent-8: var(--blue-8);
-  --accent-9: var(--blue-9);
-  --accent-10: var(--blue-10);
-  --accent-11: var(--blue-11);
-  --accent-12: var(--blue-12);
-
-  --accent-a1: var(--blue-a1);
-  --accent-a2: var(--blue-a2);
-  --accent-a3: var(--blue-a3);
-  --accent-a4: var(--blue-a4);
-  --accent-a5: var(--blue-a5);
-  --accent-a6: var(--blue-a6);
-  --accent-a7: var(--blue-a7);
-  --accent-a8: var(--blue-a8);
-  --accent-a9: var(--blue-a9);
-  --accent-a10: var(--blue-a10);
-  --accent-a11: var(--blue-a11);
-  --accent-a12: var(--blue-a12);
-
-  --accent-contrast: var(--blue-contrast);
-  --accent-surface: var(--blue-surface);
-  --accent-indicator: var(--blue-indicator);
-  --accent-track: var(--blue-track);
-}

package/dist/blue-p3.css

@@ -1,95 +0,0 @@
-@theme static {
-  --color-blue-1: var(--blue-1);
-  --color-blue-2: var(--blue-2);
-  --color-blue-3: var(--blue-3);
-  --color-blue-4: var(--blue-4);
-  --color-blue-5: var(--blue-5);
-  --color-blue-6: var(--blue-6);
-  --color-blue-7: var(--blue-7);
-  --color-blue-8: var(--blue-8);
-  --color-blue-9: var(--blue-9);
-  --color-blue-10: var(--blue-10);
-  --color-blue-11: var(--blue-11);
-  --color-blue-12: var(--blue-12);
-
-  --color-blue-a1: var(--blue-a1);
-  --color-blue-a2: var(--blue-a2);
-  --color-blue-a3: var(--blue-a3);
-  --color-blue-a4: var(--blue-a4);
-  --color-blue-a5: var(--blue-a5);
-  --color-blue-a6: var(--blue-a6);
-  --color-blue-a7: var(--blue-a7);
-  --color-blue-a8: var(--blue-a8);
-  --color-blue-a9: var(--blue-a9);
-  --color-blue-a10: var(--blue-a10);
-  --color-blue-a11: var(--blue-a11);
-  --color-blue-a12: var(--blue-a12);
-
-  --color-blue-contrast: var(--blue-contrast);
-  --color-blue-surface: var(--blue-surface);
-  --color-blue-indicator: var(--blue-indicator);
-  --color-blue-track: var(--blue-track);
-}
-
-:root {
-  --blue-1: color(display-p3 0.986 0.992 0.999);
-  --blue-2: color(display-p3 0.96 0.979 0.998);
-  --blue-3: color(display-p3 0.912 0.956 0.991);
-  --blue-4: color(display-p3 0.853 0.932 1);
-  --blue-5: color(display-p3 0.788 0.894 0.998);
-  --blue-6: color(display-p3 0.709 0.843 0.976);
-  --blue-7: color(display-p3 0.606 0.777 0.947);
-  --blue-8: color(display-p3 0.451 0.688 0.917);
-  --blue-9: color(display-p3 0.247 0.556 0.969);
-  --blue-10: color(display-p3 0.234 0.523 0.912);
-  --blue-11: color(display-p3 0.15 0.44 0.84);
-  --blue-12: color(display-p3 0.102 0.193 0.379);
-
-  --blue-a1: color(display-p3 0.024 0.514 1 / 0.016);
-  --blue-a2: color(display-p3 0.024 0.514 0.906 / 0.04);
-  --blue-a3: color(display-p3 0.012 0.506 0.914 / 0.087);
-  --blue-a4: color(display-p3 0.008 0.545 1 / 0.146);
-  --blue-a5: color(display-p3 0.004 0.502 0.984 / 0.212);
-  --blue-a6: color(display-p3 0.004 0.463 0.922 / 0.291);
-  --blue-a7: color(display-p3 0.004 0.431 0.863 / 0.393);
-  --blue-a8: color(display-p3 0 0.427 0.851 / 0.55);
-  --blue-a9: color(display-p3 0 0.412 0.961 / 0.753);
-  --blue-a10: color(display-p3 0 0.376 0.886 / 0.765);
-  --blue-a11: color(display-p3 0.15 0.44 0.84);
-  --blue-a12: color(display-p3 0.102 0.193 0.379);
-
-  --blue-contrast: white;
-  --blue-surface: color(display-p3 0.9529 0.9765 0.9961 / 0.8);
-  --blue-indicator: var(--blue-9);
-  --blue-track: var(--blue-9);
-}
-
-.dark {
-  --blue-1: color(display-p3 0.057 0.081 0.122);
-  --blue-2: color(display-p3 0.072 0.098 0.147);
-  --blue-3: color(display-p3 0.078 0.154 0.27);
-  --blue-4: color(display-p3 0.033 0.197 0.37);
-  --blue-5: color(display-p3 0.08 0.245 0.441);
-  --blue-6: color(display-p3 0.14 0.298 0.511);
-  --blue-7: color(display-p3 0.195 0.361 0.6);
-  --blue-8: color(display-p3 0.239 0.434 0.72);
-  --blue-9: color(display-p3 0.247 0.556 0.969);
-  --blue-10: color(display-p3 0.344 0.612 0.973);
-  --blue-11: color(display-p3 0.49 0.72 1);
-  --blue-12: color(display-p3 0.788 0.898 0.99);
-
-  --blue-a1: color(display-p3 0 0.333 1 / 0.059);
-  --blue-a2: color(display-p3 0.114 0.435 0.988 / 0.085);
-  --blue-a3: color(display-p3 0.122 0.463 1 / 0.219);
-  --blue-a4: color(display-p3 0 0.467 1 / 0.324);
-  --blue-a5: color(display-p3 0.098 0.51 1 / 0.4);
-  --blue-a6: color(display-p3 0.224 0.557 1 / 0.475);
-  --blue-a7: color(display-p3 0.294 0.584 1 / 0.572);
-  --blue-a8: color(display-p3 0.314 0.592 1 / 0.702);
-  --blue-a9: color(display-p3 0.251 0.573 0.996 / 0.967);
-  --blue-a10: color(display-p3 0.357 0.631 1 / 0.971);
-  --blue-a11: color(display-p3 0.49 0.72 1);
-  --blue-a12: color(display-p3 0.788 0.898 0.99);
-
-  --blue-surface: color(display-p3 0.0706 0.1255 0.2196 / 0.5);
-}

package/dist/bronze-accents.css

@@ -1,32 +0,0 @@
-[data-accent-color='bronze'] {
-  --accent-1: var(--bronze-1);
-  --accent-2: var(--bronze-2);
-  --accent-3: var(--bronze-3);
-  --accent-4: var(--bronze-4);
-  --accent-5: var(--bronze-5);
-  --accent-6: var(--bronze-6);
-  --accent-7: var(--bronze-7);
-  --accent-8: var(--bronze-8);
-  --accent-9: var(--bronze-9);
-  --accent-10: var(--bronze-10);
-  --accent-11: var(--bronze-11);
-  --accent-12: var(--bronze-12);
-
-  --accent-a1: var(--bronze-a1);
-  --accent-a2: var(--bronze-a2);
-  --accent-a3: var(--bronze-a3);
-  --accent-a4: var(--bronze-a4);
-  --accent-a5: var(--bronze-a5);
-  --accent-a6: var(--bronze-a6);
-  --accent-a7: var(--bronze-a7);
-  --accent-a8: var(--bronze-a8);
-  --accent-a9: var(--bronze-a9);
-  --accent-a10: var(--bronze-a10);
-  --accent-a11: var(--bronze-a11);
-  --accent-a12: var(--bronze-a12);
-
-  --accent-contrast: var(--bronze-contrast);
-  --accent-surface: var(--bronze-surface);
-  --accent-indicator: var(--bronze-indicator);
-  --accent-track: var(--bronze-track);
-}