@astryxdesign/theme-neutral 0.5.2 → 0.5.3

package/src/neutralPalettes.generated.ts

@@ -0,0 +1,498 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+// Generated by astryx-oklch-v1. Review before committing.
+// prettier-ignore
+export const palette = {
+  "neutral": {
+    "name": "Neutral",
+    "light": {
+      "0": "#000000",
+      "5": "#111111",
+      "10": "#1b1b1b",
+      "15": "#262626",
+      "20": "#303030",
+      "25": "#3b3b3b",
+      "30": "#474747",
+      "35": "#525252",
+      "40": "#5e5e5e",
+      "45": "#6a6a6a",
+      "50": "#777777",
+      "55": "#848484",
+      "60": "#919191",
+      "65": "#9e9e9e",
+      "70": "#ababab",
+      "75": "#b9b9b9",
+      "80": "#c6c6c6",
+      "85": "#d4d4d4",
+      "90": "#e2e2e2",
+      "95": "#f1f1f1",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#111111",
+      "10": "#1b1b1b",
+      "15": "#262626",
+      "20": "#303030",
+      "25": "#3b3b3b",
+      "30": "#474747",
+      "35": "#525252",
+      "40": "#5e5e5e",
+      "45": "#6a6a6a",
+      "50": "#777777",
+      "55": "#848484",
+      "60": "#919191",
+      "65": "#9e9e9e",
+      "70": "#ababab",
+      "75": "#b9b9b9",
+      "80": "#c6c6c6",
+      "85": "#d4d4d4",
+      "90": "#e2e2e2",
+      "95": "#f1f1f1",
+      "100": "#ffffff"
+    }
+  },
+  "red": {
+    "name": "Red",
+    "light": {
+      "0": "#000000",
+      "5": "#2c0000",
+      "10": "#3e0002",
+      "15": "#500004",
+      "20": "#620008",
+      "25": "#76000c",
+      "30": "#8a0011",
+      "35": "#9e0015",
+      "40": "#af1320",
+      "45": "#c0262c",
+      "50": "#cf3738",
+      "55": "#de4745",
+      "60": "#ed5753",
+      "65": "#fa6762",
+      "70": "#ff7f77",
+      "75": "#ff9890",
+      "80": "#ffaea7",
+      "85": "#ffc4be",
+      "90": "#ffd8d4",
+      "95": "#ffece9",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#200908",
+      "10": "#2f1110",
+      "15": "#3d1917",
+      "20": "#4c221f",
+      "25": "#5b2b28",
+      "30": "#6b3431",
+      "35": "#7e3c38",
+      "40": "#92423e",
+      "45": "#a84743",
+      "50": "#be4e49",
+      "55": "#d15752",
+      "60": "#e1645e",
+      "65": "#ee736c",
+      "70": "#fb837b",
+      "75": "#ff9890",
+      "80": "#ffaea7",
+      "85": "#ffc4be",
+      "90": "#ffd8d4",
+      "95": "#ffece9",
+      "100": "#ffffff"
+    }
+  },
+  "orange": {
+    "name": "Orange",
+    "light": {
+      "0": "#000000",
+      "5": "#250500",
+      "10": "#340d00",
+      "15": "#431600",
+      "20": "#521f00",
+      "25": "#622700",
+      "30": "#733100",
+      "35": "#833a00",
+      "40": "#944400",
+      "45": "#a54f00",
+      "50": "#b45c00",
+      "55": "#c76600",
+      "60": "#d97000",
+      "65": "#e97e1d",
+      "70": "#f58d3a",
+      "75": "#ff9e55",
+      "80": "#ffb37e",
+      "85": "#ffc7a1",
+      "90": "#ffdac2",
+      "95": "#ffede1",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#1c0c05",
+      "10": "#29160d",
+      "15": "#362014",
+      "20": "#43291c",
+      "25": "#503424",
+      "30": "#603d2a",
+      "35": "#72462d",
+      "40": "#864f2c",
+      "45": "#9b5627",
+      "50": "#af5f1d",
+      "55": "#c2691b",
+      "60": "#d1762b",
+      "65": "#df843f",
+      "70": "#eb9352",
+      "75": "#f7a266",
+      "80": "#ffb37e",
+      "85": "#ffc7a1",
+      "90": "#ffdac2",
+      "95": "#ffede1",
+      "100": "#ffffff"
+    }
+  },
+  "yellow": {
+    "name": "Yellow",
+    "light": {
+      "0": "#000000",
+      "5": "#190f00",
+      "10": "#251a00",
+      "15": "#312400",
+      "20": "#3e2e00",
+      "25": "#4b3900",
+      "30": "#584400",
+      "35": "#664f00",
+      "40": "#745b00",
+      "45": "#836700",
+      "50": "#927300",
+      "55": "#a17f00",
+      "60": "#b18c00",
+      "65": "#c29900",
+      "70": "#d2a700",
+      "75": "#e2b623",
+      "80": "#eec448",
+      "85": "#f8d36a",
+      "90": "#ffe193",
+      "95": "#fff0ca",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#161002",
+      "10": "#221b08",
+      "15": "#2d250e",
+      "20": "#392f15",
+      "25": "#453a1c",
+      "30": "#524521",
+      "35": "#615124",
+      "40": "#705c24",
+      "45": "#80681f",
+      "50": "#907316",
+      "55": "#a17f07",
+      "60": "#b18c00",
+      "65": "#be9921",
+      "70": "#cba73d",
+      "75": "#d7b554",
+      "80": "#e3c36c",
+      "85": "#efd284",
+      "90": "#fae19e",
+      "95": "#fff0c8",
+      "100": "#ffffff"
+    }
+  },
+  "green": {
+    "name": "Green",
+    "light": {
+      "0": "#000000",
+      "5": "#001800",
+      "10": "#002400",
+      "15": "#003002",
+      "20": "#003d05",
+      "25": "#00490b",
+      "30": "#0b5615",
+      "35": "#17631e",
+      "40": "#237028",
+      "45": "#2f7d33",
+      "50": "#3c8a3f",
+      "55": "#4a984c",
+      "60": "#59a55b",
+      "65": "#6ab26b",
+      "70": "#7dbe7e",
+      "75": "#90ca90",
+      "80": "#a4d6a3",
+      "85": "#b7e2b6",
+      "90": "#cbeeca",
+      "95": "#defadd",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#091409",
+      "10": "#112011",
+      "15": "#192b19",
+      "20": "#223622",
+      "25": "#2b422b",
+      "30": "#344e34",
+      "35": "#3c5c3c",
+      "40": "#436a43",
+      "45": "#497849",
+      "50": "#508651",
+      "55": "#59945a",
+      "60": "#65a266",
+      "65": "#74af75",
+      "70": "#85bb85",
+      "75": "#97c897",
+      "80": "#aad4a9",
+      "85": "#bce0bb",
+      "90": "#ceecce",
+      "95": "#e1f8e0",
+      "100": "#ffffff"
+    }
+  },
+  "teal": {
+    "name": "Teal",
+    "light": {
+      "0": "#000000",
+      "5": "#001612",
+      "10": "#00221c",
+      "15": "#002e27",
+      "20": "#003a32",
+      "25": "#00463d",
+      "30": "#005348",
+      "35": "#006154",
+      "40": "#006e60",
+      "45": "#007c6d",
+      "50": "#008b7a",
+      "55": "#009986",
+      "60": "#01a894",
+      "65": "#34b5a1",
+      "70": "#56c0ae",
+      "75": "#74ccbb",
+      "80": "#90d7c8",
+      "85": "#a9e2d6",
+      "90": "#c1eee4",
+      "95": "#d7f9f2",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#071411",
+      "10": "#0f1f1c",
+      "15": "#172a26",
+      "20": "#1f3531",
+      "25": "#28413c",
+      "30": "#2f4e48",
+      "35": "#325b53",
+      "40": "#326a60",
+      "45": "#2d796c",
+      "50": "#248979",
+      "55": "#299786",
+      "60": "#39a593",
+      "65": "#4fb1a0",
+      "70": "#68bdad",
+      "75": "#81c9bb",
+      "80": "#99d5c8",
+      "85": "#b1e0d6",
+      "90": "#c6ece3",
+      "95": "#dbf8f1",
+      "100": "#ffffff"
+    }
+  },
+  "cyan": {
+    "name": "Cyan",
+    "light": {
+      "0": "#000000",
+      "5": "#00151b",
+      "10": "#002028",
+      "15": "#002c35",
+      "20": "#003743",
+      "25": "#004351",
+      "30": "#00505f",
+      "35": "#005d6e",
+      "40": "#006a7d",
+      "45": "#00788d",
+      "50": "#00859d",
+      "55": "#0093ad",
+      "60": "#00a2be",
+      "65": "#29afcb",
+      "70": "#45bdd7",
+      "75": "#5ecae3",
+      "80": "#75d7ef",
+      "85": "#8ee4f9",
+      "90": "#afefff",
+      "95": "#d9f7ff",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#071316",
+      "10": "#0f1e22",
+      "15": "#17292e",
+      "20": "#1f343a",
+      "25": "#274046",
+      "30": "#2e4c54",
+      "35": "#325963",
+      "40": "#326774",
+      "45": "#2d7586",
+      "50": "#228499",
+      "55": "#2592a9",
+      "60": "#35a0b7",
+      "65": "#49adc4",
+      "70": "#5dbad1",
+      "75": "#71c7dd",
+      "80": "#85d5e9",
+      "85": "#9ae2f4",
+      "90": "#b1eefe",
+      "95": "#d9f7ff",
+      "100": "#ffffff"
+    }
+  },
+  "blue": {
+    "name": "Blue",
+    "light": {
+      "0": "#000000",
+      "5": "#000f30",
+      "10": "#001a41",
+      "15": "#002452",
+      "20": "#002f65",
+      "25": "#003978",
+      "30": "#00458c",
+      "35": "#0050a2",
+      "40": "#005cb8",
+      "45": "#0067ce",
+      "50": "#0074e2",
+      "55": "#1e81f0",
+      "60": "#348ffd",
+      "65": "#529fff",
+      "70": "#6eaeff",
+      "75": "#88bcff",
+      "80": "#a1caff",
+      "85": "#b9d7ff",
+      "90": "#d0e5ff",
+      "95": "#e8f2ff",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#051121",
+      "10": "#0d1c2f",
+      "15": "#15263d",
+      "20": "#1d314b",
+      "25": "#253c5a",
+      "30": "#2b486c",
+      "35": "#2f5382",
+      "40": "#315f99",
+      "45": "#346bb1",
+      "50": "#3778c7",
+      "55": "#3e84dc",
+      "60": "#4a92eb",
+      "65": "#5aa0f8",
+      "70": "#6eaeff",
+      "75": "#88bcff",
+      "80": "#a1caff",
+      "85": "#b9d7ff",
+      "90": "#d0e5ff",
+      "95": "#e8f2ff",
+      "100": "#ffffff"
+    }
+  },
+  "purple": {
+    "name": "Purple",
+    "light": {
+      "0": "#000000",
+      "5": "#210028",
+      "10": "#31003b",
+      "15": "#3f004c",
+      "20": "#4e045c",
+      "25": "#5c0e6c",
+      "30": "#6b187c",
+      "35": "#781f8a",
+      "40": "#842699",
+      "45": "#9130a7",
+      "50": "#9f3cb5",
+      "55": "#ad4dc3",
+      "60": "#bb5fd1",
+      "65": "#ca72de",
+      "70": "#d885eb",
+      "75": "#e496f6",
+      "80": "#efa8ff",
+      "85": "#f3bfff",
+      "90": "#f7d5ff",
+      "95": "#fbeaff",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#180b1b",
+      "10": "#251329",
+      "15": "#311c36",
+      "20": "#3e2544",
+      "25": "#4a2f51",
+      "30": "#58395f",
+      "35": "#674270",
+      "40": "#784983",
+      "45": "#895196",
+      "50": "#9a59a9",
+      "55": "#aa63ba",
+      "60": "#b870c9",
+      "65": "#c57ed5",
+      "70": "#d28de2",
+      "75": "#de9ced",
+      "80": "#eaacf8",
+      "85": "#f3bfff",
+      "90": "#f7d5ff",
+      "95": "#fbeaff",
+      "100": "#ffffff"
+    }
+  },
+  "pink": {
+    "name": "Pink",
+    "light": {
+      "0": "#000000",
+      "5": "#290013",
+      "10": "#3b001e",
+      "15": "#4b0028",
+      "20": "#5d0034",
+      "25": "#70003f",
+      "30": "#83004b",
+      "35": "#950457",
+      "40": "#a61863",
+      "45": "#b52970",
+      "50": "#c5387c",
+      "55": "#d44789",
+      "60": "#e25796",
+      "65": "#ef67a3",
+      "70": "#fc78b1",
+      "75": "#ff90bd",
+      "80": "#ffa9ca",
+      "85": "#ffc0d7",
+      "90": "#ffd5e4",
+      "95": "#ffeaf1",
+      "100": "#ffffff"
+    },
+    "dark": {
+      "0": "#000000",
+      "5": "#1e0912",
+      "10": "#2d111d",
+      "15": "#3b1927",
+      "20": "#492132",
+      "25": "#572b3d",
+      "30": "#663449",
+      "35": "#783b55",
+      "40": "#8c4161",
+      "45": "#a1476e",
+      "50": "#b54e7b",
+      "55": "#c85688",
+      "60": "#d76395",
+      "65": "#e572a3",
+      "70": "#f181b0",
+      "75": "#fd92bd",
+      "80": "#ffa9ca",
+      "85": "#ffc0d7",
+      "90": "#ffd5e4",
+      "95": "#ffeaf1",
+      "100": "#ffffff"
+    }
+  }
+} as const;
+
+export default palette;

package/src/neutralPalettes.test.ts

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, expect, it} from 'vitest';
+import {neutralPalettes} from './neutralPalettes';
+
+const neutralPaletteStops = [
+  0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
+  100,
+] as const;
+
+describe('neutral palette artifact', () => {
+  it('keeps the approved palette structurally valid', () => {
+    expect(Object.keys(neutralPalettes)).toEqual([
+      'neutral',
+      'red',
+      'orange',
+      'yellow',
+      'green',
+      'teal',
+      'cyan',
+      'blue',
+      'purple',
+      'pink',
+    ]);
+
+    for (const family of Object.values(neutralPalettes)) {
+      for (const stop of neutralPaletteStops) {
+        expect(family.light[stop]).toMatch(/^#[0-9a-f]{6}$/i);
+        expect(family.dark[stop]).toMatch(/^#[0-9a-f]{6}$/i);
+      }
+      expect(family.light[0]).toBe('#000000');
+      expect(family.dark[0]).toBe('#000000');
+      expect(family.light[100]).toBe('#ffffff');
+      expect(family.dark[100]).toBe('#ffffff');
+    }
+  });
+
+  it('keeps the approved muted dark edge values', () => {
+    expect(
+      Object.fromEntries(
+        (
+          [
+            'red',
+            'orange',
+            'yellow',
+            'green',
+            'teal',
+            'cyan',
+            'blue',
+            'purple',
+            'pink',
+          ] as const
+        ).map(family => [family, neutralPalettes[family].dark[25]]),
+      ),
+    ).toEqual({
+      red: '#5b2b28',
+      orange: '#503424',
+      yellow: '#453a1c',
+      green: '#2b422b',
+      teal: '#28413c',
+      cyan: '#274046',
+      blue: '#253c5a',
+      purple: '#4a2f51',
+      pink: '#572b3d',
+    });
+  });
+});

package/src/neutralPalettes.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** Neutral's reviewed palette, generated from ../palette.config.json. */
+export {
+  palette as neutralPalettes,
+  palette as default,
+} from './neutralPalettes.generated';