@greese/ui 0.0.0-stage → 1.1.0

package/dist/palette.d.ts

@@ -0,0 +1,599 @@
+/**
+ * The color palette: 22 hues, each in 11 shades from 50 (lightest) to 999
+ * (darkest). GENERATED by scripts/generate-palette.ts: the
+ * values are fixed, so a palette name means the same color in TypeScript, the
+ * SCSS kit and CSS.
+ *
+ * The semantic roles in tokens.ts are built from these, and you can use them
+ * wherever a color goes, without hex literals:
+ *
+ * - TypeScript: `palette.lavender[600]`, or import one hue: `lavender[600]`.
+ * - The SCSS kit: `lavender-600` as a token value, or `greese.palette(lavender, 600)`.
+ * - CSS: `var(--greese-lavender-600)`, with `@greese/ui/palette.css`.
+ *
+ * Each hue is its own export, so a bundle keeps only the hues it imports.
+ */
+/** Shades, lightest first: `--greese-<hue>-<shade>`. */
+export declare const paletteShades: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 999];
+export type PaletteShade = (typeof paletteShades)[number];
+/** One hue: a color per shade. */
+export type Hue = Readonly<Record<PaletteShade, string>>;
+/** The two colors that aren't a hue: the ends of every ramp. */
+export declare const white = "#ffffff";
+export declare const black = "#000000";
+export declare const steel: {
+    readonly 50: "#f5f7f9";
+    readonly 100: "#e9edf2";
+    readonly 200: "#d7dfe7";
+    readonly 300: "#bfcbd8";
+    readonly 400: "#a3b3c4";
+    readonly 500: "#8597a9";
+    readonly 600: "#687889";
+    readonly 700: "#505e6d";
+    readonly 800: "#3c4854";
+    readonly 900: "#2a333c";
+    readonly 999: "#11171c";
+};
+export declare const gray: {
+    readonly 50: "#f7f7f7";
+    readonly 100: "#ededed";
+    readonly 200: "#dedede";
+    readonly 300: "#cacaca";
+    readonly 400: "#b1b1b1";
+    readonly 500: "#949494";
+    readonly 600: "#767676";
+    readonly 700: "#5c5c5c";
+    readonly 800: "#464646";
+    readonly 900: "#323232";
+    readonly 999: "#161616";
+};
+export declare const silver: {
+    readonly 50: "#f6f7f7";
+    readonly 100: "#ebedee";
+    readonly 200: "#dadfe1";
+    readonly 300: "#c5cbce";
+    readonly 400: "#aab3b7";
+    readonly 500: "#8d969b";
+    readonly 600: "#6f777c";
+    readonly 700: "#565e61";
+    readonly 800: "#41474b";
+    readonly 900: "#2e3335";
+    readonly 999: "#141618";
+};
+export declare const ash: {
+    readonly 50: "#f7f7f6";
+    readonly 100: "#ededeb";
+    readonly 200: "#dfdeda";
+    readonly 300: "#cbcac4";
+    readonly 400: "#b3b1aa";
+    readonly 500: "#97958d";
+    readonly 600: "#78766e";
+    readonly 700: "#5e5c56";
+    readonly 800: "#484641";
+    readonly 900: "#33322e";
+    readonly 999: "#171614";
+};
+export declare const taupe: {
+    readonly 50: "#f8f6f5";
+    readonly 100: "#f0ece9";
+    readonly 200: "#e4dcd6";
+    readonly 300: "#d3c7be";
+    readonly 400: "#bdaea2";
+    readonly 500: "#a29184";
+    readonly 600: "#827366";
+    readonly 700: "#67594f";
+    readonly 800: "#4f443b";
+    readonly 900: "#38302a";
+    readonly 999: "#1a1511";
+};
+export declare const red: {
+    readonly 50: "#fff4f2";
+    readonly 100: "#ffe6e3";
+    readonly 200: "#ffd2cc";
+    readonly 300: "#ffb4ab";
+    readonly 400: "#ff8b7f";
+    readonly 500: "#fd4c45";
+    readonly 600: "#d52727";
+    readonly 700: "#ae0914";
+    readonly 800: "#88030c";
+    readonly 900: "#620407";
+    readonly 999: "#330000";
+};
+export declare const orange: {
+    readonly 50: "#fff4ee";
+    readonly 100: "#ffe8da";
+    readonly 200: "#ffd8c1";
+    readonly 300: "#ffc19c";
+    readonly 400: "#ff9d5e";
+    readonly 500: "#ef7500";
+    readonly 600: "#c05d00";
+    readonly 700: "#964700";
+    readonly 800: "#733400";
+    readonly 900: "#522300";
+    readonly 999: "#290d00";
+};
+export declare const gold: {
+    readonly 50: "#fff5e7";
+    readonly 100: "#ffeaca";
+    readonly 200: "#ffe1b5";
+    readonly 300: "#ffd593";
+    readonly 400: "#feb93d";
+    readonly 500: "#df9c00";
+    readonly 600: "#b37d00";
+    readonly 700: "#8a5f00";
+    readonly 800: "#664500";
+    readonly 900: "#472e00";
+    readonly 999: "#211300";
+};
+export declare const yellow: {
+    readonly 50: "#fcf8df";
+    readonly 100: "#f8efb6";
+    readonly 200: "#fce873";
+    readonly 300: "#fbe136";
+    readonly 400: "#f4d90b";
+    readonly 500: "#d3bb00";
+    readonly 600: "#ab9700";
+    readonly 700: "#817100";
+    readonly 800: "#5c5000";
+    readonly 900: "#3d3500";
+    readonly 999: "#1b1600";
+};
+export declare const lime: {
+    readonly 50: "#f2fae9";
+    readonly 100: "#e2f4ce";
+    readonly 200: "#d2f4a9";
+    readonly 300: "#c0ee82";
+    readonly 400: "#a6dc51";
+    readonly 500: "#87bf0e";
+    readonly 600: "#6b9a00";
+    readonly 700: "#517600";
+    readonly 800: "#3a5600";
+    readonly 900: "#263b00";
+    readonly 999: "#0e1a00";
+};
+export declare const green: {
+    readonly 50: "#effaf1";
+    readonly 100: "#dcf5e0";
+    readonly 200: "#bdeec6";
+    readonly 300: "#95e2a5";
+    readonly 400: "#61cf7e";
+    readonly 500: "#25b459";
+    readonly 600: "#009141";
+    readonly 700: "#007231";
+    readonly 800: "#005724";
+    readonly 900: "#003e17";
+    readonly 999: "#001d06";
+};
+export declare const jade: {
+    readonly 50: "#eefaf4";
+    readonly 100: "#daf4e8";
+    readonly 200: "#baedd6";
+    readonly 300: "#8ee1be";
+    readonly 400: "#54cea1";
+    readonly 500: "#00b283";
+    readonly 600: "#008e68";
+    readonly 700: "#006f51";
+    readonly 800: "#00553d";
+    readonly 900: "#003c2a";
+    readonly 999: "#001c11";
+};
+export declare const turquoise: {
+    readonly 50: "#eefaf8";
+    readonly 100: "#daf3f0";
+    readonly 200: "#bcece7";
+    readonly 300: "#94e1da";
+    readonly 400: "#5dcec5";
+    readonly 500: "#13b3aa";
+    readonly 600: "#009088";
+    readonly 700: "#007069";
+    readonly 800: "#00544f";
+    readonly 900: "#003b38";
+    readonly 999: "#001b19";
+};
+export declare const aqua: {
+    readonly 50: "#eef9fb";
+    readonly 100: "#daf2f5";
+    readonly 200: "#beecf2";
+    readonly 300: "#98e3ec";
+    readonly 400: "#64d0de";
+    readonly 500: "#23b5c4";
+    readonly 600: "#00919f";
+    readonly 700: "#00707b";
+    readonly 800: "#00545c";
+    readonly 900: "#003b41";
+    readonly 999: "#001b1e";
+};
+export declare const azure: {
+    readonly 50: "#eef9ff";
+    readonly 100: "#daf1ff";
+    readonly 200: "#bde6ff";
+    readonly 300: "#91d6ff";
+    readonly 400: "#5ac0f7";
+    readonly 500: "#15a4e1";
+    readonly 600: "#0082b6";
+    readonly 700: "#00668f";
+    readonly 800: "#004d6e";
+    readonly 900: "#003750";
+    readonly 999: "#001927";
+};
+export declare const blue: {
+    readonly 50: "#f2f7ff";
+    readonly 100: "#e2eeff";
+    readonly 200: "#cbdfff";
+    readonly 300: "#aaccff";
+    readonly 400: "#81b2ff";
+    readonly 500: "#4c92ff";
+    readonly 600: "#2771e0";
+    readonly 700: "#1356b8";
+    readonly 800: "#0b4290";
+    readonly 900: "#072e68";
+    readonly 999: "#001337";
+};
+export declare const royal: {
+    readonly 50: "#f4f6ff";
+    readonly 100: "#e7ecff";
+    readonly 200: "#d4dcff";
+    readonly 300: "#bac6ff";
+    readonly 400: "#9aaaff";
+    readonly 500: "#7787ff";
+    readonly 600: "#5963e5";
+    readonly 700: "#444abc";
+    readonly 800: "#333894";
+    readonly 900: "#23276b";
+    readonly 999: "#0d0f39";
+};
+export declare const lavender: {
+    readonly 50: "#f7f5ff";
+    readonly 100: "#edeaff";
+    readonly 200: "#dfd8ff";
+    readonly 300: "#cdbfff";
+    readonly 400: "#b69fff";
+    readonly 500: "#9d79f6";
+    readonly 600: "#7e5bd0";
+    readonly 700: "#6443ab";
+    readonly 800: "#4c3285";
+    readonly 900: "#362361";
+    readonly 999: "#190c33";
+};
+export declare const purple: {
+    readonly 50: "#fbf4ff";
+    readonly 100: "#f6e6ff";
+    readonly 200: "#eed1ff";
+    readonly 300: "#e4b4ff";
+    readonly 400: "#d78cff";
+    readonly 500: "#be68ea";
+    readonly 600: "#9d49c5";
+    readonly 700: "#7e33a1";
+    readonly 800: "#61257d";
+    readonly 900: "#46195a";
+    readonly 999: "#22062f";
+};
+export declare const magenta: {
+    readonly 50: "#fff3fb";
+    readonly 100: "#ffe3f7";
+    readonly 200: "#ffccf1";
+    readonly 300: "#ffa9ea";
+    readonly 400: "#f97cde";
+    readonly 500: "#e053c6";
+    readonly 600: "#bb32a3";
+    readonly 700: "#971c83";
+    readonly 800: "#761266";
+    readonly 900: "#550c49";
+    readonly 999: "#2b0124";
+};
+export declare const pink: {
+    readonly 50: "#fff3f7";
+    readonly 100: "#ffe5ee";
+    readonly 200: "#ffcfe0";
+    readonly 300: "#ffaecd";
+    readonly 400: "#ff81b6";
+    readonly 500: "#e75a9a";
+    readonly 600: "#c13b7b";
+    readonly 700: "#9c2661";
+    readonly 800: "#7a1a4a";
+    readonly 900: "#581235";
+    readonly 999: "#2d0318";
+};
+export declare const ruby: {
+    readonly 50: "#fff4f4";
+    readonly 100: "#ffe6e8";
+    readonly 200: "#ffd0d5";
+    readonly 300: "#ffb2ba";
+    readonly 400: "#ff8798";
+    readonly 500: "#f94b72";
+    readonly 600: "#d12655";
+    readonly 700: "#aa0b40";
+    readonly 800: "#85042f";
+    readonly 900: "#600421";
+    readonly 999: "#32000b";
+};
+/** Every hue by name, for lookups by a name that's only known at run time. */
+export declare const palette: {
+    readonly steel: {
+        readonly 50: "#f5f7f9";
+        readonly 100: "#e9edf2";
+        readonly 200: "#d7dfe7";
+        readonly 300: "#bfcbd8";
+        readonly 400: "#a3b3c4";
+        readonly 500: "#8597a9";
+        readonly 600: "#687889";
+        readonly 700: "#505e6d";
+        readonly 800: "#3c4854";
+        readonly 900: "#2a333c";
+        readonly 999: "#11171c";
+    };
+    readonly gray: {
+        readonly 50: "#f7f7f7";
+        readonly 100: "#ededed";
+        readonly 200: "#dedede";
+        readonly 300: "#cacaca";
+        readonly 400: "#b1b1b1";
+        readonly 500: "#949494";
+        readonly 600: "#767676";
+        readonly 700: "#5c5c5c";
+        readonly 800: "#464646";
+        readonly 900: "#323232";
+        readonly 999: "#161616";
+    };
+    readonly silver: {
+        readonly 50: "#f6f7f7";
+        readonly 100: "#ebedee";
+        readonly 200: "#dadfe1";
+        readonly 300: "#c5cbce";
+        readonly 400: "#aab3b7";
+        readonly 500: "#8d969b";
+        readonly 600: "#6f777c";
+        readonly 700: "#565e61";
+        readonly 800: "#41474b";
+        readonly 900: "#2e3335";
+        readonly 999: "#141618";
+    };
+    readonly ash: {
+        readonly 50: "#f7f7f6";
+        readonly 100: "#ededeb";
+        readonly 200: "#dfdeda";
+        readonly 300: "#cbcac4";
+        readonly 400: "#b3b1aa";
+        readonly 500: "#97958d";
+        readonly 600: "#78766e";
+        readonly 700: "#5e5c56";
+        readonly 800: "#484641";
+        readonly 900: "#33322e";
+        readonly 999: "#171614";
+    };
+    readonly taupe: {
+        readonly 50: "#f8f6f5";
+        readonly 100: "#f0ece9";
+        readonly 200: "#e4dcd6";
+        readonly 300: "#d3c7be";
+        readonly 400: "#bdaea2";
+        readonly 500: "#a29184";
+        readonly 600: "#827366";
+        readonly 700: "#67594f";
+        readonly 800: "#4f443b";
+        readonly 900: "#38302a";
+        readonly 999: "#1a1511";
+    };
+    readonly red: {
+        readonly 50: "#fff4f2";
+        readonly 100: "#ffe6e3";
+        readonly 200: "#ffd2cc";
+        readonly 300: "#ffb4ab";
+        readonly 400: "#ff8b7f";
+        readonly 500: "#fd4c45";
+        readonly 600: "#d52727";
+        readonly 700: "#ae0914";
+        readonly 800: "#88030c";
+        readonly 900: "#620407";
+        readonly 999: "#330000";
+    };
+    readonly orange: {
+        readonly 50: "#fff4ee";
+        readonly 100: "#ffe8da";
+        readonly 200: "#ffd8c1";
+        readonly 300: "#ffc19c";
+        readonly 400: "#ff9d5e";
+        readonly 500: "#ef7500";
+        readonly 600: "#c05d00";
+        readonly 700: "#964700";
+        readonly 800: "#733400";
+        readonly 900: "#522300";
+        readonly 999: "#290d00";
+    };
+    readonly gold: {
+        readonly 50: "#fff5e7";
+        readonly 100: "#ffeaca";
+        readonly 200: "#ffe1b5";
+        readonly 300: "#ffd593";
+        readonly 400: "#feb93d";
+        readonly 500: "#df9c00";
+        readonly 600: "#b37d00";
+        readonly 700: "#8a5f00";
+        readonly 800: "#664500";
+        readonly 900: "#472e00";
+        readonly 999: "#211300";
+    };
+    readonly yellow: {
+        readonly 50: "#fcf8df";
+        readonly 100: "#f8efb6";
+        readonly 200: "#fce873";
+        readonly 300: "#fbe136";
+        readonly 400: "#f4d90b";
+        readonly 500: "#d3bb00";
+        readonly 600: "#ab9700";
+        readonly 700: "#817100";
+        readonly 800: "#5c5000";
+        readonly 900: "#3d3500";
+        readonly 999: "#1b1600";
+    };
+    readonly lime: {
+        readonly 50: "#f2fae9";
+        readonly 100: "#e2f4ce";
+        readonly 200: "#d2f4a9";
+        readonly 300: "#c0ee82";
+        readonly 400: "#a6dc51";
+        readonly 500: "#87bf0e";
+        readonly 600: "#6b9a00";
+        readonly 700: "#517600";
+        readonly 800: "#3a5600";
+        readonly 900: "#263b00";
+        readonly 999: "#0e1a00";
+    };
+    readonly green: {
+        readonly 50: "#effaf1";
+        readonly 100: "#dcf5e0";
+        readonly 200: "#bdeec6";
+        readonly 300: "#95e2a5";
+        readonly 400: "#61cf7e";
+        readonly 500: "#25b459";
+        readonly 600: "#009141";
+        readonly 700: "#007231";
+        readonly 800: "#005724";
+        readonly 900: "#003e17";
+        readonly 999: "#001d06";
+    };
+    readonly jade: {
+        readonly 50: "#eefaf4";
+        readonly 100: "#daf4e8";
+        readonly 200: "#baedd6";
+        readonly 300: "#8ee1be";
+        readonly 400: "#54cea1";
+        readonly 500: "#00b283";
+        readonly 600: "#008e68";
+        readonly 700: "#006f51";
+        readonly 800: "#00553d";
+        readonly 900: "#003c2a";
+        readonly 999: "#001c11";
+    };
+    readonly turquoise: {
+        readonly 50: "#eefaf8";
+        readonly 100: "#daf3f0";
+        readonly 200: "#bcece7";
+        readonly 300: "#94e1da";
+        readonly 400: "#5dcec5";
+        readonly 500: "#13b3aa";
+        readonly 600: "#009088";
+        readonly 700: "#007069";
+        readonly 800: "#00544f";
+        readonly 900: "#003b38";
+        readonly 999: "#001b19";
+    };
+    readonly aqua: {
+        readonly 50: "#eef9fb";
+        readonly 100: "#daf2f5";
+        readonly 200: "#beecf2";
+        readonly 300: "#98e3ec";
+        readonly 400: "#64d0de";
+        readonly 500: "#23b5c4";
+        readonly 600: "#00919f";
+        readonly 700: "#00707b";
+        readonly 800: "#00545c";
+        readonly 900: "#003b41";
+        readonly 999: "#001b1e";
+    };
+    readonly azure: {
+        readonly 50: "#eef9ff";
+        readonly 100: "#daf1ff";
+        readonly 200: "#bde6ff";
+        readonly 300: "#91d6ff";
+        readonly 400: "#5ac0f7";
+        readonly 500: "#15a4e1";
+        readonly 600: "#0082b6";
+        readonly 700: "#00668f";
+        readonly 800: "#004d6e";
+        readonly 900: "#003750";
+        readonly 999: "#001927";
+    };
+    readonly blue: {
+        readonly 50: "#f2f7ff";
+        readonly 100: "#e2eeff";
+        readonly 200: "#cbdfff";
+        readonly 300: "#aaccff";
+        readonly 400: "#81b2ff";
+        readonly 500: "#4c92ff";
+        readonly 600: "#2771e0";
+        readonly 700: "#1356b8";
+        readonly 800: "#0b4290";
+        readonly 900: "#072e68";
+        readonly 999: "#001337";
+    };
+    readonly royal: {
+        readonly 50: "#f4f6ff";
+        readonly 100: "#e7ecff";
+        readonly 200: "#d4dcff";
+        readonly 300: "#bac6ff";
+        readonly 400: "#9aaaff";
+        readonly 500: "#7787ff";
+        readonly 600: "#5963e5";
+        readonly 700: "#444abc";
+        readonly 800: "#333894";
+        readonly 900: "#23276b";
+        readonly 999: "#0d0f39";
+    };
+    readonly lavender: {
+        readonly 50: "#f7f5ff";
+        readonly 100: "#edeaff";
+        readonly 200: "#dfd8ff";
+        readonly 300: "#cdbfff";
+        readonly 400: "#b69fff";
+        readonly 500: "#9d79f6";
+        readonly 600: "#7e5bd0";
+        readonly 700: "#6443ab";
+        readonly 800: "#4c3285";
+        readonly 900: "#362361";
+        readonly 999: "#190c33";
+    };
+    readonly purple: {
+        readonly 50: "#fbf4ff";
+        readonly 100: "#f6e6ff";
+        readonly 200: "#eed1ff";
+        readonly 300: "#e4b4ff";
+        readonly 400: "#d78cff";
+        readonly 500: "#be68ea";
+        readonly 600: "#9d49c5";
+        readonly 700: "#7e33a1";
+        readonly 800: "#61257d";
+        readonly 900: "#46195a";
+        readonly 999: "#22062f";
+    };
+    readonly magenta: {
+        readonly 50: "#fff3fb";
+        readonly 100: "#ffe3f7";
+        readonly 200: "#ffccf1";
+        readonly 300: "#ffa9ea";
+        readonly 400: "#f97cde";
+        readonly 500: "#e053c6";
+        readonly 600: "#bb32a3";
+        readonly 700: "#971c83";
+        readonly 800: "#761266";
+        readonly 900: "#550c49";
+        readonly 999: "#2b0124";
+    };
+    readonly pink: {
+        readonly 50: "#fff3f7";
+        readonly 100: "#ffe5ee";
+        readonly 200: "#ffcfe0";
+        readonly 300: "#ffaecd";
+        readonly 400: "#ff81b6";
+        readonly 500: "#e75a9a";
+        readonly 600: "#c13b7b";
+        readonly 700: "#9c2661";
+        readonly 800: "#7a1a4a";
+        readonly 900: "#581235";
+        readonly 999: "#2d0318";
+    };
+    readonly ruby: {
+        readonly 50: "#fff4f4";
+        readonly 100: "#ffe6e8";
+        readonly 200: "#ffd0d5";
+        readonly 300: "#ffb2ba";
+        readonly 400: "#ff8798";
+        readonly 500: "#f94b72";
+        readonly 600: "#d12655";
+        readonly 700: "#aa0b40";
+        readonly 800: "#85042f";
+        readonly 900: "#600421";
+        readonly 999: "#32000b";
+    };
+};
+export type PaletteHue = keyof typeof palette;