@astryxdesign/theme-stone 0.7.3 → 0.7.4-canary.28b1cd4

package/src/stonePalettes.generated.ts

@@ -0,0 +1,501 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+// Generated by astryx-oklch-v1. Review before committing.
+export const black = '#000000' as const;
+export const white = '#ffffff' as const;
+
+// prettier-ignore
+export const palette = {
+  "neutral": {
+    "name": "Stone Neutral",
+    "light": {
+      "0": "#000000",
+      "5": "#101019",
+      "10": "#1b1b21",
+      "15": "#25252a",
+      "20": "#2f2f36",
+      "25": "#3a3a42",
+      "30": "#46464e",
+      "35": "#525259",
+      "40": "#5f5f64",
+      "45": "#6b6b6f",
+      "50": "#77777c",
+      "55": "#848489",
+      "60": "#919197",
+      "65": "#9e9da5",
+      "70": "#ababb3",
+      "75": "#b8b8c2",
+      "80": "#c6c5d0",
+      "85": "#d4d3dd",
+      "90": "#e2e2e8",
+      "95": "#f0f0f7",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#101018",
+      "10": "#1b1b21",
+      "15": "#25252a",
+      "20": "#302f36",
+      "25": "#3a3a42",
+      "30": "#46464e",
+      "35": "#525159",
+      "40": "#5e5e64",
+      "45": "#6a6a70",
+      "50": "#77777c",
+      "55": "#838489",
+      "60": "#909097",
+      "65": "#9d9ea5",
+      "70": "#ababb3",
+      "75": "#b8b8c2",
+      "80": "#c6c6cf",
+      "85": "#d4d4dd",
+      "90": "#e2e2e8",
+      "95": "#f0f0f9",
+      "100": "#ffffff"
+    }
+  },
+  "red": {
+    "name": "Red",
+    "light": {
+      "0": "#000000",
+      "5": "#1c0c09",
+      "10": "#2b1411",
+      "15": "#381d19",
+      "20": "#462722",
+      "25": "#53312c",
+      "30": "#603c37",
+      "35": "#6a4943",
+      "40": "#745752",
+      "45": "#7e6460",
+      "50": "#8a716d",
+      "55": "#987d79",
+      "60": "#a98984",
+      "65": "#ba948e",
+      "70": "#caa099",
+      "75": "#d8ada6",
+      "80": "#e4bcb5",
+      "85": "#f0cac4",
+      "90": "#fbdad4",
+      "95": "#ffece9",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#1b0c0a",
+      "10": "#291613",
+      "15": "#361f1b",
+      "20": "#432825",
+      "25": "#50332e",
+      "30": "#5c3e3a",
+      "35": "#684a45",
+      "40": "#735752",
+      "45": "#7d6460",
+      "50": "#8a716d",
+      "55": "#987e79",
+      "60": "#a78985",
+      "65": "#b79590",
+      "70": "#c6a29c",
+      "75": "#d4afa9",
+      "80": "#e0bdb8",
+      "85": "#ecccc7",
+      "90": "#f7dbd7",
+      "95": "#ffece9",
+      "100": "#ffffff"
+    }
+  },
+  "orange": {
+    "name": "Orange",
+    "light": {
+      "0": "#000000",
+      "5": "#1b0d04",
+      "10": "#291607",
+      "15": "#36200d",
+      "20": "#442a14",
+      "25": "#51341d",
+      "30": "#5e3f27",
+      "35": "#6a4a31",
+      "40": "#77573c",
+      "45": "#836448",
+      "50": "#8f7154",
+      "55": "#9c7d5f",
+      "60": "#aa8a6b",
+      "65": "#b99776",
+      "70": "#c8a382",
+      "75": "#d7b18d",
+      "80": "#e5be9b",
+      "85": "#f2cdaa",
+      "90": "#ffdcbb",
+      "95": "#ffeddd",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#1a0e05",
+      "10": "#28170b",
+      "15": "#342112",
+      "20": "#412b19",
+      "25": "#4e3522",
+      "30": "#5b402b",
+      "35": "#684c34",
+      "40": "#75583f",
+      "45": "#836448",
+      "50": "#8f7154",
+      "55": "#9c7e5f",
+      "60": "#ab8b6b",
+      "65": "#ba9777",
+      "70": "#c9a382",
+      "75": "#d6b18e",
+      "80": "#e5be9c",
+      "85": "#f2cdab",
+      "90": "#ffdcbb",
+      "95": "#ffeedd",
+      "100": "#ffffff"
+    }
+  },
+  "yellow": {
+    "name": "Yellow",
+    "light": {
+      "0": "#000000",
+      "5": "#151101",
+      "10": "#211b02",
+      "15": "#2d2605",
+      "20": "#38300b",
+      "25": "#443b13",
+      "30": "#524818",
+      "35": "#61551a",
+      "40": "#736419",
+      "45": "#83721a",
+      "50": "#927f25",
+      "55": "#a08c36",
+      "60": "#ac9848",
+      "65": "#b8a35a",
+      "70": "#c3af6c",
+      "75": "#cfbb7f",
+      "80": "#dbc790",
+      "85": "#e7d3a4",
+      "90": "#f4e1b7",
+      "95": "#fdf0d3",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#141103",
+      "10": "#201b06",
+      "15": "#2c260c",
+      "20": "#373013",
+      "25": "#433b1b",
+      "30": "#514821",
+      "35": "#615620",
+      "40": "#72641d",
+      "45": "#84721b",
+      "50": "#927f25",
+      "55": "#a08c37",
+      "60": "#ab9849",
+      "65": "#b7a45b",
+      "70": "#c2af6e",
+      "75": "#cdba81",
+      "80": "#d9c794",
+      "85": "#e5d3a6",
+      "90": "#f1e1b9",
+      "95": "#fbf0d5",
+      "100": "#ffffff"
+    }
+  },
+  "green": {
+    "name": "Green",
+    "light": {
+      "0": "#000000",
+      "5": "#0a1408",
+      "10": "#122010",
+      "15": "#1a2b17",
+      "20": "#233620",
+      "25": "#2d4229",
+      "30": "#354f31",
+      "35": "#3c5e37",
+      "40": "#416d3b",
+      "45": "#487d40",
+      "50": "#528b49",
+      "55": "#609757",
+      "60": "#6ea366",
+      "65": "#7eaf76",
+      "70": "#8ebb87",
+      "75": "#9fc798",
+      "80": "#b0d3aa",
+      "85": "#bfdfbb",
+      "90": "#d2eccf",
+      "95": "#e7f6e5",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#0b1409",
+      "10": "#141f12",
+      "15": "#1c2a1a",
+      "20": "#253523",
+      "25": "#2f412c",
+      "30": "#384e35",
+      "35": "#3e5d38",
+      "40": "#426d3b",
+      "45": "#487d40",
+      "50": "#528b49",
+      "55": "#609857",
+      "60": "#6fa467",
+      "65": "#80af78",
+      "70": "#90ba8a",
+      "75": "#a3c59d",
+      "80": "#b3d0af",
+      "85": "#c3ddbf",
+      "90": "#d5e9d2",
+      "95": "#e9f4e7",
+      "100": "#ffffff"
+    }
+  },
+  "teal": {
+    "name": "Teal",
+    "light": {
+      "0": "#000000",
+      "5": "#051410",
+      "10": "#0a201a",
+      "15": "#112b24",
+      "20": "#19372e",
+      "25": "#224339",
+      "30": "#2c4f44",
+      "35": "#365b50",
+      "40": "#40675c",
+      "45": "#4c7468",
+      "50": "#588174",
+      "55": "#658e81",
+      "60": "#729b8e",
+      "65": "#81a89b",
+      "70": "#91b4a8",
+      "75": "#a1c1b6",
+      "80": "#b2cec4",
+      "85": "#c3dbd2",
+      "90": "#d4e8e1",
+      "95": "#e6f5ef",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#071410",
+      "10": "#0e201a",
+      "15": "#152b24",
+      "20": "#1e362f",
+      "25": "#274239",
+      "30": "#304e45",
+      "35": "#3a5b50",
+      "40": "#43675b",
+      "45": "#4d7567",
+      "50": "#588174",
+      "55": "#668e80",
+      "60": "#749a8d",
+      "65": "#84a79b",
+      "70": "#94b3a9",
+      "75": "#a5c0b7",
+      "80": "#b5cdc5",
+      "85": "#c6dad3",
+      "90": "#d6e7e1",
+      "95": "#e7f4f0",
+      "100": "#ffffff"
+    }
+  },
+  "cyan": {
+    "name": "Cyan",
+    "light": {
+      "0": "#000000",
+      "5": "#031418",
+      "10": "#061f25",
+      "15": "#0c2a31",
+      "20": "#14363e",
+      "25": "#1d414a",
+      "30": "#264d57",
+      "35": "#305862",
+      "40": "#3a646e",
+      "45": "#446e79",
+      "50": "#507b86",
+      "55": "#5d8893",
+      "60": "#6c96a1",
+      "65": "#7ba5b0",
+      "70": "#8ab3be",
+      "75": "#99c1cb",
+      "80": "#a9ced8",
+      "85": "#badbe4",
+      "90": "#cbe9f0",
+      "95": "#def6fc",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#051317",
+      "10": "#0b1f24",
+      "15": "#122a30",
+      "20": "#1a353c",
+      "25": "#234048",
+      "30": "#2c4c54",
+      "35": "#345761",
+      "40": "#3c636d",
+      "45": "#456e79",
+      "50": "#507b86",
+      "55": "#5d8893",
+      "60": "#6e96a0",
+      "65": "#7ea4ae",
+      "70": "#8fb2bb",
+      "75": "#9ebfc8",
+      "80": "#aecdd5",
+      "85": "#bedae2",
+      "90": "#cfe8ee",
+      "95": "#e1f5fa",
+      "100": "#ffffff"
+    }
+  },
+  "blue": {
+    "name": "Blue",
+    "light": {
+      "0": "#000000",
+      "5": "#08111e",
+      "10": "#0f1c2d",
+      "15": "#17263a",
+      "20": "#203148",
+      "25": "#293c56",
+      "30": "#344861",
+      "35": "#42546b",
+      "40": "#516074",
+      "45": "#5f6b7c",
+      "50": "#6c7888",
+      "55": "#788597",
+      "60": "#8292a8",
+      "65": "#8ba0ba",
+      "70": "#96adcb",
+      "75": "#a4bbda",
+      "80": "#b3c9e6",
+      "85": "#c2d6f1",
+      "90": "#d3e4fc",
+      "95": "#e8f2ff",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#09111c",
+      "10": "#111c2a",
+      "15": "#1a2637",
+      "20": "#233145",
+      "25": "#2c3c52",
+      "30": "#37485e",
+      "35": "#445469",
+      "40": "#515f72",
+      "45": "#5f6b7c",
+      "50": "#6c7888",
+      "55": "#778596",
+      "60": "#8292a6",
+      "65": "#8ea0b7",
+      "70": "#9aadc7",
+      "75": "#a7bbd5",
+      "80": "#b6c8e1",
+      "85": "#c5d6ed",
+      "90": "#d5e4f8",
+      "95": "#e8f2ff",
+      "100": "#ffffff"
+    }
+  },
+  "purple": {
+    "name": "Purple",
+    "light": {
+      "0": "#000000",
+      "5": "#130e1b",
+      "10": "#1f1828",
+      "15": "#2a2135",
+      "20": "#352b42",
+      "25": "#40364f",
+      "30": "#4c405b",
+      "35": "#574d66",
+      "40": "#635a70",
+      "45": "#6f677a",
+      "50": "#7b7486",
+      "55": "#888094",
+      "60": "#968ca4",
+      "65": "#a398b4",
+      "70": "#b1a4c4",
+      "75": "#beb2d2",
+      "80": "#ccc0de",
+      "85": "#d9cfea",
+      "90": "#e7def5",
+      "95": "#f4edff",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#130e19",
+      "10": "#1e1827",
+      "15": "#292233",
+      "20": "#342c40",
+      "25": "#3f374c",
+      "30": "#4b4258",
+      "35": "#574e64",
+      "40": "#625b6f",
+      "45": "#6f687a",
+      "50": "#7b7486",
+      "55": "#888194",
+      "60": "#958da2",
+      "65": "#a399b1",
+      "70": "#b0a5c0",
+      "75": "#beb3ce",
+      "80": "#cbc1da",
+      "85": "#d9d0e7",
+      "90": "#e6def3",
+      "95": "#f4edfe",
+      "100": "#ffffff"
+    }
+  },
+  "pink": {
+    "name": "Pink",
+    "light": {
+      "0": "#000000",
+      "5": "#1a0c15",
+      "10": "#271420",
+      "15": "#341d2c",
+      "20": "#412737",
+      "25": "#4e3143",
+      "30": "#5a3c4f",
+      "35": "#644959",
+      "40": "#6e5765",
+      "45": "#786470",
+      "50": "#83727c",
+      "55": "#927d89",
+      "60": "#a28898",
+      "65": "#b394a6",
+      "70": "#c39fb4",
+      "75": "#d1adc2",
+      "80": "#ddbbcf",
+      "85": "#e9cadc",
+      "90": "#f5d9ea",
+      "95": "#ffeaf6",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#180c14",
+      "10": "#261620",
+      "15": "#321f2b",
+      "20": "#3e2836",
+      "25": "#4b3242",
+      "30": "#573e4e",
+      "35": "#624a59",
+      "40": "#6d5864",
+      "45": "#776570",
+      "50": "#83727c",
+      "55": "#917d89",
+      "60": "#a08997",
+      "65": "#b095a5",
+      "70": "#bfa1b3",
+      "75": "#cdaec1",
+      "80": "#dabdce",
+      "85": "#e6ccdb",
+      "90": "#f2dbe8",
+      "95": "#fdebf6",
+      "100": "#ffffff"
+    }
+  }
+} as const;
+
+export default palette;

package/src/stonePalettes.test.ts

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {palette as stoneModePalettes} from './stonePalettes.generated';
+import {stonePalettes} from './stoneTheme';
+
+const stops = [
+  0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
+  100,
+] as const;
+
+const chromaticFamilies = [
+  'blue',
+  'cyan',
+  'green',
+  'teal',
+  'yellow',
+  'orange',
+  'red',
+  'pink',
+  'purple',
+] as const;
+
+const exactMidpoints = {
+  red: '#8a716d',
+  orange: '#8f7154',
+  yellow: '#927f25',
+  green: '#528b49',
+  teal: '#588174',
+  cyan: '#507b86',
+  blue: '#6c7888',
+  purple: '#7b7486',
+  pink: '#83727c',
+} as const;
+
+describe('stone palette artifact', () => {
+  it('keeps every reviewed family and mode structurally complete', () => {
+    expect(Object.keys(stonePalettes)).toEqual([
+      'neutral',
+      ...chromaticFamilies,
+    ]);
+
+    for (const familyName of ['neutral', ...chromaticFamilies] as const) {
+      const family = stonePalettes[familyName];
+      expect(family.hue).toBeTypeOf('number');
+      expect(family.chroma).toBeTypeOf('number');
+      for (const stop of stops) {
+        expect(family[stop]).toMatch(/^#[0-9a-f]{6}$/i);
+        expect(stoneModePalettes[familyName].light[stop]).toMatch(
+          /^#[0-9a-f]{6}$/i,
+        );
+        expect(stoneModePalettes[familyName].dark[stop]).toMatch(
+          /^#[0-9a-f]{6}$/i,
+        );
+      }
+      expect(family[0]).toBe('#000000');
+      expect(family[100]).toBe('#ffffff');
+    }
+  });
+
+  it('preserves Stone exact anchors in both modes', () => {
+    expect(stoneModePalettes.neutral.light[15]).toBe('#25252a');
+    expect(stoneModePalettes.neutral.light[50]).toBe('#77777c');
+    expect(stoneModePalettes.neutral.light[90]).toBe('#e2e2e8');
+    expect(stoneModePalettes.neutral.dark[15]).toBe('#25252a');
+    expect(stoneModePalettes.neutral.dark[50]).toBe('#77777c');
+    expect(stoneModePalettes.neutral.dark[90]).toBe('#e2e2e8');
+
+    for (const familyName of chromaticFamilies) {
+      expect(stoneModePalettes[familyName].light[50]).toBe(
+        exactMidpoints[familyName],
+      );
+      expect(stoneModePalettes[familyName].dark[50]).toBe(
+        exactMidpoints[familyName],
+      );
+      expect(stonePalettes[familyName]).not.toHaveProperty('light');
+      expect(stonePalettes[familyName]).not.toHaveProperty('dark');
+    }
+
+    expect(stoneModePalettes.yellow.light[90]).toBe('#f4e1b7');
+    expect(stoneModePalettes.yellow.dark[90]).toBe('#f1e1b9');
+    expect(stoneModePalettes.orange.light[90]).toBe('#ffdcbb');
+    expect(stoneModePalettes.orange.dark[90]).toBe('#ffdcbb');
+    expect(stoneModePalettes.green.light[85]).toBe('#bfdfbb');
+    expect(stoneModePalettes.green.dark[85]).toBe('#c3ddbf');
+  });
+});