@astryxdesign/theme-stone 0.7.3 → 0.7.4-canary.3f6ea7d

package/palette.config.json

@@ -0,0 +1,262 @@
+{
+  "recipe": "astryx-oklch-v1",
+  "vibrancy": 16,
+  "neutralProfile": "neutral-v1",
+  "modeStrategy": "light-and-dark",
+  "stops": [
+    0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
+    95, 100
+  ],
+  "families": [
+    {
+      "id": "neutral",
+      "name": "Stone Neutral",
+      "seed": "#77777c",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 15,
+          "color": "#25252a",
+          "policy": "exact"
+        },
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#77777c",
+          "policy": "exact"
+        },
+        {
+          "mode": "light",
+          "stop": 90,
+          "color": "#e2e2e8",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 15,
+          "color": "#25252a",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#77777c",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 90,
+          "color": "#e2e2e8",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "red",
+      "name": "Red",
+      "seed": "#8a716d",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#8a716d",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#8a716d",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "orange",
+      "name": "Orange",
+      "seed": "#8f7154",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#8f7154",
+          "policy": "exact"
+        },
+        {
+          "mode": "light",
+          "stop": 90,
+          "color": "#ffdcbb",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#8f7154",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 90,
+          "color": "#ffdcbb",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "yellow",
+      "name": "Yellow",
+      "seed": "#927f25",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#927f25",
+          "policy": "exact"
+        },
+        {
+          "mode": "light",
+          "stop": 90,
+          "color": "#f4e1b7",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#927f25",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 90,
+          "color": "#f1e1b9",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "green",
+      "name": "Green",
+      "seed": "#528b49",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#528b49",
+          "policy": "exact"
+        },
+        {
+          "mode": "light",
+          "stop": 85,
+          "color": "#bfdfbb",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#528b49",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 85,
+          "color": "#c3ddbf",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "teal",
+      "name": "Teal",
+      "seed": "#477b6b",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#588174",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#588174",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "cyan",
+      "name": "Cyan",
+      "seed": "#507b86",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#507b86",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#507b86",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "blue",
+      "name": "Blue",
+      "seed": "#6c7888",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#6c7888",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#6c7888",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "purple",
+      "name": "Purple",
+      "seed": "#7b7486",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#7b7486",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#7b7486",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "pink",
+      "name": "Pink",
+      "seed": "#83727c",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#83727c",
+          "policy": "exact"
+        },
+        {
+          "mode": "dark",
+          "stop": 50,
+          "color": "#83727c",
+          "policy": "exact"
+        }
+      ]
+    }
+  ]
+}

package/src/source.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-export {stoneTheme, stonePalettes} from './stoneTheme';
+export {stonePalettes, stoneTheme} from './stoneTheme';
 export {stoneIconRegistry} from './icons';

package/src/stoneColorMapping.test.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {readFileSync} from 'node:fs';
+import {describe, expect, it} from 'vitest';
+import {stoneTheme} from './stoneTheme';
+
+const source = readFileSync(
+  new URL('./stoneTheme.ts', import.meta.url),
+  'utf8',
+);
+
+const publicPaletteStart = source.indexOf('export const stonePalettes');
+if (publicPaletteStart < 0) {
+  throw new Error('stoneTheme.ts: stonePalettes export marker not found');
+}
+const maintainedThemeSource = source.slice(0, publicPaletteStart);
+
+describe('stone color token mapping completeness', () => {
+  it('maps every color token Stone owns through its reviewed palette', () => {
+    expect(
+      Object.keys(stoneTheme.tokens).filter(name =>
+        name.startsWith('--color-data-'),
+      ),
+    ).toEqual([]);
+  });
+
+  it('keeps every resolved root color concrete', () => {
+    for (const [name, value] of Object.entries(stoneTheme.tokens)) {
+      if (!name.startsWith('--color-') || name.startsWith('--color-data-')) {
+        continue;
+      }
+      expect(typeof value, name).toBe('string');
+      expect(value, name).toMatch(
+        /^(?:transparent|#[0-9a-f]{6}(?:[0-9a-f]{2})?|light-dark\(#[0-9a-f]{6}(?:[0-9a-f]{2})?, #[0-9a-f]{6}(?:[0-9a-f]{2})?\))$/i,
+      );
+    }
+  });
+
+  it('uses no one-off color literals in the maintained theme source', () => {
+    expect(maintainedThemeSource).not.toMatch(
+      /#[0-9a-f]{3,8}\b|\brgba?\(|\bhsl[a]?\(|\boklch\(|\bblack\b|\bwhite\b/i,
+    );
+  });
+});

package/src/stonePaletteRefs.generated.ts

@@ -0,0 +1,51 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+// Generated from the committed full palette for the stops used by Stone's
+// theme source. Regenerate with `pnpm generate:stone-palette-refs`.
+// Keep the complete palette available for authoring and audits without
+// making consumers pay for unused palette stops.
+// prettier-ignore
+export const stonePaletteRefs = {
+  green: {
+    light: {30: '#354f31', 55: '#609757', 85: '#bfdfbb', 90: '#d2eccf'},
+    dark: {25: '#2f412c', 35: '#3e5d38', 70: '#90ba8a', 80: '#b3d0af', 90: '#d5e9d2'},
+  },
+  yellow: {
+    light: {30: '#524818', 40: '#736419', 55: '#a08c36', 85: '#e7d3a4', 90: '#f4e1b7'},
+    dark: {25: '#433b1b', 35: '#615620', 70: '#c2af6e', 80: '#d9c794', 90: '#f1e1b9'},
+  },
+  red: {
+    light: {30: '#603c37', 40: '#745752', 60: '#a98984', 85: '#f0cac4', 90: '#fbdad4'},
+    dark: {25: '#50332e', 35: '#684a45', 70: '#c6a29c', 80: '#e0bdb8', 90: '#f7dbd7'},
+  },
+  purple: {
+    light: {30: '#4c405b', 40: '#635a70', 85: '#d9cfea', 90: '#e7def5'},
+    dark: {25: '#3f374c', 35: '#574e64', 70: '#b0a5c0', 90: '#e6def3'},
+  },
+  teal: {
+    light: {30: '#2c4f44', 40: '#40675c', 85: '#c3dbd2', 90: '#d4e8e1'},
+    dark: {25: '#274239', 35: '#3a5b50', 70: '#94b3a9', 90: '#d6e7e1'},
+  },
+  neutral: {
+    light: {0: '#000000', 15: '#25252a', 30: '#46464e', 40: '#5f5f64', 55: '#848489', 85: '#d4d3dd', 90: '#e2e2e8', 95: '#f0f0f7', 100: '#ffffff'},
+    dark: {0: '#000000', 5: '#101018', 10: '#1b1b21', 15: '#25252a', 20: '#302f36', 25: '#3a3a42', 35: '#525159', 40: '#5e5e64', 65: '#9d9ea5', 70: '#ababb3', 90: '#e2e2e8', 95: '#f0f0f9', 100: '#ffffff'},
+  },
+  orange: {
+    dark: {25: '#4e3522', 35: '#684c34', 70: '#c9a382', 90: '#ffdcbb'},
+    light: {30: '#5e3f27', 85: '#f2cdaa', 90: '#ffdcbb'},
+  },
+  blue: {
+    light: {30: '#344861', 40: '#516074', 85: '#c2d6f1', 90: '#d3e4fc'},
+    dark: {25: '#2c3c52', 35: '#445469', 70: '#9aadc7', 90: '#d5e4f8'},
+  },
+  cyan: {
+    light: {30: '#264d57', 85: '#badbe4', 90: '#cbe9f0'},
+    dark: {25: '#234048', 35: '#345761', 90: '#cfe8ee'},
+  },
+  pink: {
+    light: {30: '#5a3c4f', 85: '#e9cadc', 90: '#f5d9ea'},
+    dark: {25: '#4b3242', 35: '#624a59', 90: '#f2dbe8'},
+  },
+} as const;
+
+export default stonePaletteRefs;