@cruglobal/cornerstone-components 0.1.0

package/dist/unbundled/styles/color/palettes/base.css

@@ -0,0 +1,44 @@
+/* Rules shared by all palettes */
+@import url('../../layers.css');
+@import url('../variants.css');
+
+/* Generates --cs-color-{hue}-on tokens for pairing with any palette's key colors */
+:where(:root),
+:host {
+  /**
+    * Conditional tokens to check if the key color is >= 60
+    * Key colors are the most colorful tint in a scale, recorded as --cs-color-{hue} in each palette
+    * The numeric value of the key is isolated as --cs-color-{hue}-key
+    * If key < 60, the result is 0%
+    * If key >= 60, the result is 100%
+    * Intended to be used in the color-mix() functions below
+    */
+
+  --cs-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-red-key), 1) * 100%));
+  --cs-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-orange-key), 1) * 100%));
+  --cs-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-yellow-key), 1) * 100%));
+  --cs-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-green-key), 1) * 100%));
+  --cs-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-cyan-key), 1) * 100%));
+  --cs-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-blue-key), 1) * 100%));
+  --cs-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-indigo-key), 1) * 100%));
+  --cs-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-purple-key), 1) * 100%));
+  --cs-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-pink-key), 1) * 100%));
+  --cs-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-gray-key), 1) * 100%));
+
+  /**
+    * Tokens to set text color with appropriate WCAG 2.1 contrast
+    * If key < 60, the text color is white
+    * If key >= 60, the text color is {hue}-10
+    */
+
+  --cs-color-red-on: color-mix(in oklab, var(--cs-color-red-10) var(--cs-color-red-gte-60), white);
+  --cs-color-orange-on: color-mix(in oklab, var(--cs-color-orange-10) var(--cs-color-orange-gte-60), white);
+  --cs-color-yellow-on: color-mix(in oklab, var(--cs-color-yellow-10) var(--cs-color-yellow-gte-60), white);
+  --cs-color-green-on: color-mix(in oklab, var(--cs-color-green-10) var(--cs-color-green-gte-60), white);
+  --cs-color-cyan-on: color-mix(in oklab, var(--cs-color-cyan-10) var(--cs-color-cyan-gte-60), white);
+  --cs-color-blue-on: color-mix(in oklab, var(--cs-color-blue-10) var(--cs-color-blue-gte-60), white);
+  --cs-color-indigo-on: color-mix(in oklab, var(--cs-color-indigo-10) var(--cs-color-indigo-gte-60), white);
+  --cs-color-purple-on: color-mix(in oklab, var(--cs-color-purple-10) var(--cs-color-purple-gte-60), white);
+  --cs-color-pink-on: color-mix(in oklab, var(--cs-color-pink-10) var(--cs-color-pink-gte-60), white);
+  --cs-color-gray-on: color-mix(in oklab, var(--cs-color-gray-10) var(--cs-color-gray-gte-60), white);
+}

package/dist/unbundled/styles/color/palettes/cru.css

@@ -0,0 +1,342 @@
+/* Generated by tools/palette.mjs from tools/brands/cru.json — do not edit by hand.
+ *
+ * Each step's lightness is solved for a WCAG luminance target, so the documented step-difference
+ * contract holds by construction: 40 apart gives 3:1, 50 gives 4.5:1, 60 gives 7:1. The brand's own
+ * colours are written verbatim at the step whose luminance they already have.
+ */
+@import url('../../layers.css');
+
+@layer cs-color-palette {
+  :where(:root),
+  :host {
+    /* lemon */
+    --cs-color-lemon-95: #fff3c3; /* oklch(96.186% 0.06308 95.65) */
+    --cs-color-lemon-90: #ffe378; /* brand value */
+    --cs-color-lemon-80: #e2c965; /* oklch(83.704% 0.12341 95.53) */
+    --cs-color-lemon-70: #c3ae5b; /* oklch(75.160% 0.10645 95.45) */
+    --cs-color-lemon-60: #a69553; /* oklch(67.022% 0.08859 95.31) */
+    --cs-color-lemon-50: #817544; /* oklch(56.172% 0.06948 96.01) */
+    --cs-color-lemon-40: #625835; /* oklch(46.109% 0.05310 94.00) */
+    --cs-color-lemon-30: #4d4529; /* oklch(39.095% 0.04436 94.01) */
+    --cs-color-lemon-20: #393219; /* oklch(31.785% 0.04083 94.20) */
+    --cs-color-lemon-10: #231d07; /* oklch(23.198% 0.03703 94.27) */
+    --cs-color-lemon-05: #171200; /* oklch(18.295% 0.03771 96.89) */
+    --cs-color-lemon: var(--cs-color-lemon-90);
+    --cs-color-lemon-key: 90;
+
+    /* yellow */
+    --cs-color-yellow-95: #fff2cc; /* oklch(96.185% 0.05124 91.37) */
+    --cs-color-yellow-90: #ffe48e; /* oklch(92.267% 0.10977 92.58) */
+    --cs-color-yellow-80: #ffd000; /* brand value */
+    --cs-color-yellow-70: #d2ab00; /* oklch(75.436% 0.15435 92.30) */
+    --cs-color-yellow-60: #b39200; /* oklch(67.089% 0.13732 92.68) */
+    --cs-color-yellow-50: #8e7300; /* oklch(56.516% 0.11565 92.43) */
+    --cs-color-yellow-40: #6c5702; /* oklch(46.463% 0.09426 92.37) */
+    --cs-color-yellow-30: #54440c; /* oklch(39.271% 0.07364 91.87) */
+    --cs-color-yellow-20: #3e3104; /* oklch(31.873% 0.06179 91.57) */
+    --cs-color-yellow-10: #261d00; /* oklch(23.475% 0.04804 92.44) */
+    --cs-color-yellow-05: #181200; /* oklch(18.436% 0.03781 94.26) */
+    --cs-color-yellow: var(--cs-color-yellow-80);
+    --cs-color-yellow-key: 80;
+
+    /* orange */
+    --cs-color-orange-95: #ffefe6; /* oklch(96.234% 0.02116 51.53) */
+    --cs-color-orange-90: #ffe0cc; /* oklch(92.707% 0.04356 54.89) */
+    --cs-color-orange-80: #ffbb8f; /* oklch(84.494% 0.09791 53.88) */
+    --cs-color-orange-70: #f59857; /* oklch(76.304% 0.13773 53.98) */
+    --cs-color-orange-60: #f08020; /* brand value */
+    --cs-color-orange-50: #b85d00; /* oklch(57.680% 0.14382 54.42) */
+    --cs-color-orange-40: #8d4600; /* oklch(47.462% 0.11808 54.60) */
+    --cs-color-orange-30: #703500; /* oklch(39.987% 0.10094 53.43) */
+    --cs-color-orange-20: #532600; /* oklch(32.518% 0.08157 53.93) */
+    --cs-color-orange-10: #341600; /* oklch(24.025% 0.05947 55.02) */
+    --cs-color-orange-05: #230c00; /* oklch(18.778% 0.04747 53.32) */
+    --cs-color-orange: var(--cs-color-orange-60);
+    --cs-color-orange-key: 60;
+
+    /* vermilion */
+    --cs-color-vermilion-95: #ffefeb; /* oklch(96.367% 0.01822 34.30) */
+    --cs-color-vermilion-90: #ffded4; /* oklch(92.526% 0.03921 37.53) */
+    --cs-color-vermilion-80: #f9bca8; /* oklch(84.571% 0.07617 38.92) */
+    --cs-color-vermilion-70: #f1987c; /* oklch(76.398% 0.11470 38.22) */
+    --cs-color-vermilion-60: #e8734c; /* oklch(68.498% 0.15498 38.87) */
+    --cs-color-vermilion-50: #d34400; /* brand value */
+    --cs-color-vermilion-40: #a23200; /* oklch(48.050% 0.15553 38.52) */
+    --cs-color-vermilion-30: #802600; /* oklch(40.514% 0.13068 38.69) */
+    --cs-color-vermilion-20: #611a00; /* oklch(33.188% 0.10790 38.32) */
+    --cs-color-vermilion-10: #3c0d00; /* oklch(24.043% 0.07768 38.61) */
+    --cs-color-vermilion-05: #290600; /* oklch(18.868% 0.06197 37.85) */
+    --cs-color-vermilion: var(--cs-color-vermilion-50);
+    --cs-color-vermilion-key: 50;
+
+    /* rose */
+    --cs-color-rose-95: #ffeef2; /* oklch(96.368% 0.01909 1.38) */
+    --cs-color-rose-90: #ffdde5; /* oklch(92.794% 0.03896 1.98) */
+    --cs-color-rose-80: #ffb4c8; /* brand value */
+    --cs-color-rose-70: #e09bae; /* oklch(76.191% 0.08562 1.30) */
+    --cs-color-rose-60: #be8594; /* oklch(67.767% 0.07254 1.93) */
+    --cs-color-rose-50: #966975; /* oklch(57.093% 0.05981 1.65) */
+    --cs-color-rose-40: #725059; /* oklch(47.077% 0.04736 1.66) */
+    --cs-color-rose-30: #583f45; /* oklch(39.736% 0.03603 2.98) */
+    --cs-color-rose-20: #422d32; /* oklch(32.369% 0.03190 3.31) */
+    --cs-color-rose-10: #29191d; /* oklch(23.579% 0.02645 2.92) */
+    --cs-color-rose-05: #1c0e12; /* oklch(18.537% 0.02486 1.25) */
+    --cs-color-rose: var(--cs-color-rose-80);
+    --cs-color-rose-key: 80;
+
+    /* pink */
+    --cs-color-pink-95: #ffeff1; /* oklch(96.531% 0.01749 8.76) */
+    --cs-color-pink-90: #ffdee1; /* oklch(92.870% 0.03674 11.60) */
+    --cs-color-pink-80: #ffb7c0; /* oklch(84.886% 0.08427 10.73) */
+    --cs-color-pink-70: #fe8d9f; /* oklch(76.981% 0.13731 10.66) */
+    --cs-color-pink-60: #ea657f; /* brand value */
+    --cs-color-pink-50: #c54c65; /* oklch(58.411% 0.15523 10.69) */
+    --cs-color-pink-40: #9a364c; /* oklch(48.169% 0.13400 10.37) */
+    --cs-color-pink-30: #79293b; /* oklch(40.505% 0.11210 9.98) */
+    --cs-color-pink-20: #591e2b; /* oklch(32.951% 0.08749 9.80) */
+    --cs-color-pink-10: #390e18; /* oklch(24.080% 0.06841 9.82) */
+    --cs-color-pink-05: #28060d; /* oklch(19.009% 0.05759 11.58) */
+    --cs-color-pink: var(--cs-color-pink-60);
+    --cs-color-pink-key: 60;
+
+    /* cerise */
+    --cs-color-cerise-95: #fff0ef; /* oklch(96.667% 0.01632 22.08) */
+    --cs-color-cerise-90: #fededd; /* oklch(92.674% 0.03556 19.95) */
+    --cs-color-cerise-80: #f7bbba; /* oklch(84.624% 0.06964 19.73) */
+    --cs-color-cerise-70: #ec9898; /* oklch(76.422% 0.10140 19.67) */
+    --cs-color-cerise-60: #e47377; /* oklch(68.707% 0.14048 19.26) */
+    --cs-color-cerise-50: #c23c49; /* brand value */
+    --cs-color-cerise-40: #a62938; /* oklch(48.375% 0.16038 19.31) */
+    --cs-color-cerise-30: #851d2a; /* oklch(40.938% 0.13825 19.40) */
+    --cs-color-cerise-20: #64131d; /* oklch(33.364% 0.11316 19.57) */
+    --cs-color-cerise-10: #42050e; /* oklch(24.631% 0.09004 19.42) */
+    --cs-color-cerise-05: #2c0307; /* oklch(19.182% 0.06828 19.72) */
+    --cs-color-cerise: var(--cs-color-cerise-50);
+    --cs-color-cerise-key: 50;
+
+    /* ruby */
+    --cs-color-ruby-95: #faf1ef; /* oklch(96.460% 0.01009 32.52) */
+    --cs-color-ruby-90: #ede3e2; /* oklch(92.344% 0.01101 24.33) */
+    --cs-color-ruby-80: #d7c6c3; /* oklch(83.972% 0.01965 29.56) */
+    --cs-color-ruby-70: #c5a8a3; /* oklch(75.567% 0.03485 29.44) */
+    --cs-color-ruby-60: #be8880; /* oklch(67.771% 0.06788 28.42) */
+    --cs-color-ruby-50: #ac6057; /* oklch(57.413% 0.10044 27.72) */
+    --cs-color-ruby-40: #9c362f; /* oklch(47.892% 0.13746 27.39) */
+    --cs-color-ruby-30: #991313; /* brand value */
+    --cs-color-ruby-20: #6d0004; /* oklch(33.616% 0.13732 27.81) */
+    --cs-color-ruby-10: #460001; /* oklch(24.769% 0.10135 28.34) */
+    --cs-color-ruby-05: #2e0001; /* oklch(18.940% 0.07725 27.26) */
+    --cs-color-ruby: var(--cs-color-ruby-30);
+    --cs-color-ruby-key: 30;
+
+    /* sky */
+    --cs-color-sky-95: #cdfbff; /* oklch(95.737% 0.04719 202.92) */
+    --cs-color-sky-90: #89eff7; /* brand value */
+    --cs-color-sky-80: #7ad9e0; /* oklch(82.939% 0.09068 201.76) */
+    --cs-color-sky-70: #6cbbc2; /* oklch(74.402% 0.07843 202.98) */
+    --cs-color-sky-60: #609fa3; /* oklch(66.162% 0.06515 200.91) */
+    --cs-color-sky-50: #4e7d80; /* oklch(55.725% 0.05139 200.95) */
+    --cs-color-sky-40: #3d5f61; /* oklch(46.033% 0.03946 200.57) */
+    --cs-color-sky-30: #2e4a4c; /* oklch(38.772% 0.03387 201.57) */
+    --cs-color-sky-20: #1f3738; /* oklch(31.764% 0.03000 199.14) */
+    --cs-color-sky-10: #0b2122; /* oklch(23.043% 0.02791 199.35) */
+    --cs-color-sky-05: #021516; /* oklch(17.939% 0.02709 199.37) */
+    --cs-color-sky: var(--cs-color-sky-90);
+    --cs-color-sky-key: 90;
+
+    /* cyan */
+    --cs-color-cyan-95: #d7f8ff; /* oklch(95.765% 0.03548 211.92) */
+    --cs-color-cyan-90: #a9f1ff; /* oklch(91.545% 0.07357 211.02) */
+    --cs-color-cyan-80: #69d9ed; /* oklch(82.723% 0.10546 210.81) */
+    --cs-color-cyan-70: #00c0d8; /* brand value */
+    --cs-color-cyan-60: #00a3b8; /* oklch(65.598% 0.11377 210.80) */
+    --cs-color-cyan-50: #008192; /* oklch(55.310% 0.09594 210.83) */
+    --cs-color-cyan-40: #006270; /* oklch(45.522% 0.07919 211.61) */
+    --cs-color-cyan-30: #004d57; /* oklch(38.492% 0.06650 209.66) */
+    --cs-color-cyan-20: #033940; /* oklch(31.603% 0.05272 208.62) */
+    --cs-color-cyan-10: #002127; /* oklch(22.739% 0.03961 211.94) */
+    --cs-color-cyan-05: #001419; /* oklch(17.591% 0.03098 214.37) */
+    --cs-color-cyan: var(--cs-color-cyan-70);
+    --cs-color-cyan-key: 70;
+
+    /* turquoise */
+    --cs-color-turquoise-95: #ebf5f7; /* oklch(96.324% 0.01095 211.04) */
+    --cs-color-turquoise-90: #d7e9ee; /* oklch(92.213% 0.02032 216.20) */
+    --cs-color-turquoise-80: #aed0da; /* oklch(83.602% 0.03875 217.48) */
+    --cs-color-turquoise-70: #84b7c6; /* oklch(74.881% 0.05768 217.97) */
+    --cs-color-turquoise-60: #569eb3; /* oklch(66.049% 0.07845 218.99) */
+    --cs-color-turquoise-50: #007890; /* brand value */
+    --cs-color-turquoise-40: #006175; /* oklch(45.487% 0.08191 218.35) */
+    --cs-color-turquoise-30: #004d5d; /* oklch(38.784% 0.06962 217.84) */
+    --cs-color-turquoise-20: #003744; /* oklch(31.130% 0.05641 219.30) */
+    --cs-color-turquoise-10: #00222a; /* oklch(23.229% 0.04143 216.75) */
+    --cs-color-turquoise-05: #00151b; /* oklch(18.055% 0.03231 217.31) */
+    --cs-color-turquoise: var(--cs-color-turquoise-50);
+    --cs-color-turquoise-key: 50;
+
+    /* navy */
+    --cs-color-navy-95: #f2f3f6; /* oklch(96.424% 0.00414 271.37) */
+    --cs-color-navy-90: #e5e6e9; /* oklch(92.503% 0.00418 271.37) */
+    --cs-color-navy-80: #c9cacd; /* oklch(83.911% 0.00429 271.36) */
+    --cs-color-navy-70: #aeafb2; /* oklch(75.411% 0.00440 271.35) */
+    --cs-color-navy-60: #94949a; /* oklch(66.844% 0.00875 286.16) */
+    --cs-color-navy-50: #73747f; /* oklch(56.183% 0.01689 281.70) */
+    --cs-color-navy-40: #56586a; /* oklch(46.537% 0.02918 280.20) */
+    --cs-color-navy-30: #41435d; /* oklch(39.211% 0.04400 280.74) */
+    --cs-color-navy-20: #2e2f51; /* oklch(32.135% 0.06000 281.18) */
+    --cs-color-navy-10: #1f1f47; /* brand value */
+    --cs-color-navy-05: #0f0d30; /* oklch(18.765% 0.06740 280.25) */
+    --cs-color-navy: var(--cs-color-navy-10);
+    --cs-color-navy-key: 10;
+
+    /* mint */
+    --cs-color-mint-95: #c9fee2; /* oklch(95.304% 0.06570 161.81) */
+    --cs-color-mint-90: #abf5cf; /* oklch(91.128% 0.09020 161.55) */
+    --cs-color-mint-80: #88e4b6; /* brand value */
+    --cs-color-mint-70: #6bbf96; /* oklch(73.989% 0.10246 161.23) */
+    --cs-color-mint-60: #5ba27f; /* oklch(65.549% 0.08975 161.08) */
+    --cs-color-mint-50: #498065; /* oklch(55.358% 0.07278 161.40) */
+    --cs-color-mint-40: #38624d; /* oklch(45.871% 0.05883 161.10) */
+    --cs-color-mint-30: #2d4b3c; /* oklch(38.422% 0.04440 161.59) */
+    --cs-color-mint-20: #1f382b; /* oklch(31.580% 0.03916 160.35) */
+    --cs-color-mint-10: #0c2117; /* oklch(22.659% 0.03374 161.32) */
+    --cs-color-mint-05: #04150d; /* oklch(17.718% 0.02978 162.51) */
+    --cs-color-mint: var(--cs-color-mint-80);
+    --cs-color-mint-key: 80;
+
+    /* green */
+    --cs-color-green-95: #cbfedb; /* oklch(95.249% 0.07002 154.90) */
+    --cs-color-green-90: #a8f7c2; /* oklch(91.096% 0.10650 154.43) */
+    --cs-color-green-80: #6ee09a; /* oklch(82.178% 0.14482 154.59) */
+    --cs-color-green-70: #24c976; /* brand value */
+    --cs-color-green-60: #00aa60; /* oklch(64.802% 0.16137 154.63) */
+    --cs-color-green-50: #00874b; /* oklch(54.737% 0.13638 154.60) */
+    --cs-color-green-40: #006637; /* oklch(44.798% 0.11192 154.47) */
+    --cs-color-green-30: #05502b; /* oklch(37.978% 0.09203 154.51) */
+    --cs-color-green-20: #063b1f; /* oklch(31.132% 0.07299 154.34) */
+    --cs-color-green-10: #00240f; /* oklch(22.837% 0.05797 153.68) */
+    --cs-color-green-05: #001708; /* oklch(17.961% 0.04505 154.27) */
+    --cs-color-green: var(--cs-color-green-70);
+    --cs-color-green-key: 70;
+
+    /* moss */
+    --cs-color-moss-95: #f1f3f2; /* oklch(96.235% 0.00250 165.07) */
+    --cs-color-moss-90: #e3e6e5; /* oklch(92.235% 0.00349 174.48) */
+    --cs-color-moss-80: #c6cbc8; /* oklch(83.734% 0.00685 160.04) */
+    --cs-color-moss-70: #a7b2ab; /* oklch(75.284% 0.01576 158.13) */
+    --cs-color-moss-60: #89988f; /* oklch(66.497% 0.02161 159.47) */
+    --cs-color-moss-50: #657a6e; /* oklch(55.886% 0.03078 160.19) */
+    --cs-color-moss-40: #476052; /* brand value */
+    --cs-color-moss-30: #344a3e; /* oklch(38.677% 0.03419 160.41) */
+    --cs-color-moss-20: #24372c; /* oklch(31.659% 0.03156 158.58) */
+    --cs-color-moss-10: #122119; /* oklch(23.117% 0.02589 160.19) */
+    --cs-color-moss-05: #0a140f; /* oklch(17.942% 0.01810 162.12) */
+    --cs-color-moss: var(--cs-color-moss-40);
+    --cs-color-moss-key: 40;
+
+    /* olive-drab */
+    --cs-color-olive-drab-95: #f2f3f2; /* oklch(96.311% 0.00169 145.56) */
+    --cs-color-olive-drab-90: #e5e5e5; /* oklch(92.191% 0.00000 89.88) */
+    --cs-color-olive-drab-80: #c9c9c9; /* oklch(83.591% 0.00000 89.88) */
+    --cs-color-olive-drab-70: #adafae; /* oklch(75.210% 0.00266 165.05) */
+    --cs-color-olive-drab-60: #939694; /* oklch(67.002% 0.00452 157.13) */
+    --cs-color-olive-drab-50: #717673; /* oklch(56.059% 0.00756 159.92) */
+    --cs-color-olive-drab-40: #535b56; /* oklch(46.248% 0.01284 158.47) */
+    --cs-color-olive-drab-30: #3d4841; /* oklch(38.943% 0.01845 157.52) */
+    --cs-color-olive-drab-20: #2e3a33; /* brand value */
+    --cs-color-olive-drab-10: #15201a; /* oklch(23.074% 0.01949 160.53) */
+    --cs-color-olive-drab-05: #0b140f; /* oklch(18.024% 0.01699 159.77) */
+    --cs-color-olive-drab: var(--cs-color-olive-drab-20);
+    --cs-color-olive-drab-key: 20;
+
+    /* gray */
+    --cs-color-gray-95: #f0efee; /* brand value */
+    --cs-color-gray-90: #e5e6e5; /* oklch(92.389% 0.00171 145.56) */
+    --cs-color-gray-80: #cacaca; /* oklch(83.901% 0.00000 89.88) */
+    --cs-color-gray-70: #aeaeae; /* oklch(75.082% 0.00000 89.88) */
+    --cs-color-gray-60: #949595; /* oklch(66.900% 0.00117 197.13) */
+    --cs-color-gray-50: #757575; /* oklch(56.241% 0.00000 89.88) */
+    --cs-color-gray-40: #565652; /* brand value */
+    --cs-color-gray-30: #464545; /* oklch(39.138% 0.00134 17.22) */
+    --cs-color-gray-20: #323232; /* oklch(31.714% 0.00000 89.88) */
+    --cs-color-gray-10: #1d1d1d; /* oklch(23.075% 0.00000 89.88) */
+    --cs-color-gray-05: #121212; /* oklch(18.220% 0.00000 89.88) */
+    --cs-color-gray: var(--cs-color-gray-95);
+    --cs-color-gray-key: 95;
+
+    /* graphite */
+    --cs-color-graphite-95: #f0efee; /* brand value */
+    --cs-color-graphite-90: #e5e6e5; /* oklch(92.389% 0.00171 145.56) */
+    --cs-color-graphite-80: #cacaca; /* oklch(83.901% 0.00000 89.88) */
+    --cs-color-graphite-70: #aeaeae; /* oklch(75.082% 0.00000 89.88) */
+    --cs-color-graphite-60: #949595; /* oklch(66.900% 0.00117 197.13) */
+    --cs-color-graphite-50: #757575; /* oklch(56.241% 0.00000 89.88) */
+    --cs-color-graphite-40: #565652; /* brand value */
+    --cs-color-graphite-30: #464545; /* oklch(39.138% 0.00134 17.22) */
+    --cs-color-graphite-20: #323232; /* oklch(31.714% 0.00000 89.88) */
+    --cs-color-graphite-10: #1d1d1d; /* oklch(23.075% 0.00000 89.88) */
+    --cs-color-graphite-05: #121212; /* oklch(18.220% 0.00000 89.88) */
+    --cs-color-graphite: var(--cs-color-graphite-40);
+    --cs-color-graphite-key: 40;
+
+    /* purple — synthesized from upstream purple */
+    --cs-color-purple-95: #f5f1fc; /* oklch(96.439% 0.01517 302.56) */
+    --cs-color-purple-90: #eae2f6; /* oklch(92.500% 0.02811 303.91) */
+    --cs-color-purple-80: #d3c3e8; /* oklch(84.206% 0.05360 304.85) */
+    --cs-color-purple-70: #bca5da; /* oklch(75.997% 0.07854 304.38) */
+    --cs-color-purple-60: #a886ce; /* oklch(67.889% 0.10959 305.34) */
+    --cs-color-purple-50: #8c63b7; /* brand value */
+    --cs-color-purple-40: #6d4793; /* oklch(47.529% 0.12351 305.28) */
+    --cs-color-purple-30: #563776; /* oklch(40.328% 0.10633 304.82) */
+    --cs-color-purple-20: #402758; /* oklch(32.844% 0.08733 305.70) */
+    --cs-color-purple-10: #271539; /* oklch(24.040% 0.06864 304.87) */
+    --cs-color-purple-05: #190b26; /* oklch(18.638% 0.05486 305.67) */
+    --cs-color-purple: var(--cs-color-purple-50);
+    --cs-color-purple-key: 50;
+
+    /* Auto-contrast: dark text on a light key, white on a dark one. */
+    --cs-color-lemon-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-lemon-key), 1) * 100%));
+    --cs-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-yellow-key), 1) * 100%));
+    --cs-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-orange-key), 1) * 100%));
+    --cs-color-vermilion-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-vermilion-key), 1) * 100%));
+    --cs-color-rose-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-rose-key), 1) * 100%));
+    --cs-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-pink-key), 1) * 100%));
+    --cs-color-cerise-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-cerise-key), 1) * 100%));
+    --cs-color-ruby-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-ruby-key), 1) * 100%));
+    --cs-color-sky-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-sky-key), 1) * 100%));
+    --cs-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-cyan-key), 1) * 100%));
+    --cs-color-turquoise-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-turquoise-key), 1) * 100%));
+    --cs-color-navy-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-navy-key), 1) * 100%));
+    --cs-color-mint-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-mint-key), 1) * 100%));
+    --cs-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-green-key), 1) * 100%));
+    --cs-color-moss-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-moss-key), 1) * 100%));
+    --cs-color-olive-drab-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-olive-drab-key), 1) * 100%));
+    --cs-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-gray-key), 1) * 100%));
+    --cs-color-graphite-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-graphite-key), 1) * 100%));
+    --cs-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--cs-color-purple-key), 1) * 100%));
+
+    --cs-color-lemon-on: color-mix(in oklab, var(--cs-color-lemon-10) var(--cs-color-lemon-gte-60), white);
+    --cs-color-yellow-on: color-mix(in oklab, var(--cs-color-yellow-10) var(--cs-color-yellow-gte-60), white);
+    --cs-color-orange-on: color-mix(in oklab, var(--cs-color-orange-10) var(--cs-color-orange-gte-60), white);
+    --cs-color-vermilion-on: color-mix(in oklab, var(--cs-color-vermilion-10) var(--cs-color-vermilion-gte-60), white);
+    --cs-color-rose-on: color-mix(in oklab, var(--cs-color-rose-10) var(--cs-color-rose-gte-60), white);
+    --cs-color-pink-on: color-mix(in oklab, var(--cs-color-pink-10) var(--cs-color-pink-gte-60), white);
+    --cs-color-cerise-on: color-mix(in oklab, var(--cs-color-cerise-10) var(--cs-color-cerise-gte-60), white);
+    --cs-color-ruby-on: color-mix(in oklab, var(--cs-color-ruby-10) var(--cs-color-ruby-gte-60), white);
+    --cs-color-sky-on: color-mix(in oklab, var(--cs-color-sky-10) var(--cs-color-sky-gte-60), white);
+    --cs-color-cyan-on: color-mix(in oklab, var(--cs-color-cyan-10) var(--cs-color-cyan-gte-60), white);
+    --cs-color-turquoise-on: color-mix(in oklab, var(--cs-color-turquoise-10) var(--cs-color-turquoise-gte-60), white);
+    --cs-color-navy-on: color-mix(in oklab, var(--cs-color-navy-10) var(--cs-color-navy-gte-60), white);
+    --cs-color-mint-on: color-mix(in oklab, var(--cs-color-mint-10) var(--cs-color-mint-gte-60), white);
+    --cs-color-green-on: color-mix(in oklab, var(--cs-color-green-10) var(--cs-color-green-gte-60), white);
+    --cs-color-moss-on: color-mix(in oklab, var(--cs-color-moss-10) var(--cs-color-moss-gte-60), white);
+    --cs-color-olive-drab-on: color-mix(
+      in oklab,
+      var(--cs-color-olive-drab-10) var(--cs-color-olive-drab-gte-60),
+      white
+    );
+    --cs-color-gray-on: color-mix(in oklab, var(--cs-color-gray-10) var(--cs-color-gray-gte-60), white);
+    --cs-color-graphite-on: color-mix(in oklab, var(--cs-color-graphite-10) var(--cs-color-graphite-gte-60), white);
+    --cs-color-purple-on: color-mix(in oklab, var(--cs-color-purple-10) var(--cs-color-purple-gte-60), white);
+  }
+}

package/dist/unbundled/styles/color/palettes/default.css

@@ -0,0 +1,146 @@
+@import url('base.css');
+
+@layer cs-color-palette {
+  :where(:root),
+  .cs-palette-default {
+    --cs-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
+    --cs-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
+    --cs-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
+    --cs-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
+    --cs-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
+    --cs-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
+    --cs-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
+    --cs-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
+    --cs-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
+    --cs-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
+    --cs-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
+    --cs-color-red: var(--cs-color-red-50);
+    --cs-color-red-key: 50;
+
+    --cs-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
+    --cs-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
+    --cs-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
+    --cs-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
+    --cs-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
+    --cs-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
+    --cs-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
+    --cs-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
+    --cs-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
+    --cs-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
+    --cs-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
+    --cs-color-orange: var(--cs-color-orange-60);
+    --cs-color-orange-key: 60;
+
+    --cs-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
+    --cs-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
+    --cs-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
+    --cs-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
+    --cs-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
+    --cs-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
+    --cs-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
+    --cs-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
+    --cs-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
+    --cs-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
+    --cs-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
+    --cs-color-yellow: var(--cs-color-yellow-80);
+    --cs-color-yellow-key: 80;
+
+    --cs-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
+    --cs-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
+    --cs-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
+    --cs-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
+    --cs-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
+    --cs-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
+    --cs-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
+    --cs-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
+    --cs-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
+    --cs-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
+    --cs-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
+    --cs-color-green: var(--cs-color-green-60);
+    --cs-color-green-key: 60;
+
+    --cs-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
+    --cs-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
+    --cs-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
+    --cs-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
+    --cs-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
+    --cs-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
+    --cs-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
+    --cs-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
+    --cs-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
+    --cs-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
+    --cs-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
+    --cs-color-cyan: var(--cs-color-cyan-70);
+    --cs-color-cyan-key: 70;
+
+    --cs-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
+    --cs-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
+    --cs-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
+    --cs-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
+    --cs-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
+    --cs-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
+    --cs-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
+    --cs-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
+    --cs-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
+    --cs-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
+    --cs-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
+    --cs-color-blue: var(--cs-color-blue-50);
+    --cs-color-blue-key: 50;
+
+    --cs-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
+    --cs-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
+    --cs-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
+    --cs-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
+    --cs-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
+    --cs-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
+    --cs-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
+    --cs-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
+    --cs-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
+    --cs-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
+    --cs-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
+    --cs-color-indigo: var(--cs-color-indigo-50);
+    --cs-color-indigo-key: 50;
+
+    --cs-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
+    --cs-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
+    --cs-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
+    --cs-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
+    --cs-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
+    --cs-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
+    --cs-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
+    --cs-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
+    --cs-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
+    --cs-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
+    --cs-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
+    --cs-color-purple: var(--cs-color-purple-50);
+    --cs-color-purple-key: 50;
+
+    --cs-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
+    --cs-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
+    --cs-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
+    --cs-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
+    --cs-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
+    --cs-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
+    --cs-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
+    --cs-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
+    --cs-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
+    --cs-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
+    --cs-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
+    --cs-color-pink: var(--cs-color-pink-50);
+    --cs-color-pink-key: 50;
+
+    --cs-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
+    --cs-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
+    --cs-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;
+    --cs-color-gray-70: #abaeb9 /* oklch(75.183% 0.01604 273.78) */;
+    --cs-color-gray-60: #9194a2 /* oklch(66.863% 0.02088 276.18) */;
+    --cs-color-gray-50: #717584 /* oklch(56.418% 0.02359 273.77) */;
+    --cs-color-gray-40: #545868 /* oklch(46.281% 0.02644 274.26) */;
+    --cs-color-gray-30: #424554 /* oklch(39.355% 0.02564 276.27) */;
+    --cs-color-gray-20: #2f323f /* oklch(31.97% 0.02354 274.82) */;
+    --cs-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
+    --cs-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
+    --cs-color-gray: var(--cs-color-gray-40);
+    --cs-color-gray-key: 40;
+  }
+}