@primer/react-brand 0.3.1 → 0.4.0-rc.61e6d4a

package/lib/css/stylesheets.d.ts

@@ -4,6 +4,7 @@
 import './reset.css';
 import '../../lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css';
 import '../../lib/design-tokens/css/tokens/base/size/size.css';
+import '../../lib/design-tokens/css/tokens/base/typography/typography.css';
 import '../../lib/design-tokens/css/tokens/functional/typography/typography-responsive.css';
 import '../../lib/design-tokens/css/tokens/functional/size/breakpoints.css';
 import '../../lib/design-tokens/css/tokens/functional/size/border.css';

package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css

@@ -1,275 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
-:root {
-  --base-color-scale-gray-0-hsl: 210 25% 98%;
-  --base-color-scale-gray-0: hsl(210, 25%, 98%);
-  --base-color-scale-gray-1-hsl: 210 24% 93%;
-  --base-color-scale-gray-1: hsl(210, 24%, 93%);
-  --base-color-scale-gray-2-hsl: 210 16% 85%;
-  --base-color-scale-gray-2: hsl(210, 16%, 85%);
-  --base-color-scale-gray-3-hsl: 210 13% 75%;
-  --base-color-scale-gray-3: hsl(210, 13%, 75%);
-  --base-color-scale-gray-4-hsl: 212 10% 62%;
-  --base-color-scale-gray-4: hsl(212, 10%, 62%);
-  --base-color-scale-gray-5-hsl: 210 8% 48%;
-  --base-color-scale-gray-5: hsl(210, 8%, 48%);
-  --base-color-scale-gray-6-hsl: 212 10% 38%;
-  --base-color-scale-gray-6: hsl(212, 10%, 38%);
-  --base-color-scale-gray-7-hsl: 212 11% 29%;
-  --base-color-scale-gray-7: hsl(212, 11%, 29%);
-  --base-color-scale-gray-8-hsl: 212 12% 22%;
-  --base-color-scale-gray-8: hsl(212, 12%, 22%);
-  --base-color-scale-gray-9-hsl: 213 13% 16%;
-  --base-color-scale-gray-9: hsl(213, 13%, 16%);
-  --base-color-scale-red-0-hsl: 4 100% 97%;
-  --base-color-scale-red-0: hsl(4, 100%, 97%);
-  --base-color-scale-red-1-hsl: 3 100% 91%;
-  --base-color-scale-red-1: hsl(3, 100%, 91%);
-  --base-color-scale-red-2-hsl: 2 100% 85%;
-  --base-color-scale-red-2: hsl(2, 100%, 85%);
-  --base-color-scale-red-3-hsl: 1 100% 76%;
-  --base-color-scale-red-3: hsl(1, 100%, 76%);
-  --base-color-scale-red-4-hsl: 359 95% 65%;
-  --base-color-scale-red-4: hsl(359, 95%, 65%);
-  --base-color-scale-red-5-hsl: 357 67% 50%;
-  --base-color-scale-red-5: hsl(357, 67%, 50%);
-  --base-color-scale-red-6-hsl: 356 71% 38%;
-  --base-color-scale-red-6: hsl(356, 71%, 38%);
-  --base-color-scale-red-7-hsl: 355 71% 30%;
-  --base-color-scale-red-7: hsl(355, 71%, 30%);
-  --base-color-scale-red-8-hsl: 354 74% 24%;
-  --base-color-scale-red-8: hsl(354, 74%, 24%);
-  --base-color-scale-red-9-hsl: 352 91% 17%;
-  --base-color-scale-red-9: hsl(352, 91%, 17%);
-  --base-color-scale-coral-0-hsl: 15 100% 96%;
-  --base-color-scale-coral-0: hsl(15, 100%, 96%);
-  --base-color-scale-coral-1-hsl: 12 100% 90%;
-  --base-color-scale-coral-1: hsl(12, 100%, 90%);
-  --base-color-scale-coral-2-hsl: 12 100% 82%;
-  --base-color-scale-coral-2: hsl(12, 100%, 82%);
-  --base-color-scale-coral-3-hsl: 11 97% 72%;
-  --base-color-scale-coral-3: hsl(11, 97%, 72%);
-  --base-color-scale-coral-4-hsl: 11 81% 60%;
-  --base-color-scale-coral-4: hsl(11, 81%, 60%);
-  --base-color-scale-coral-5-hsl: 9 64% 47%;
-  --base-color-scale-coral-5: hsl(9, 64%, 47%);
-  --base-color-scale-coral-6-hsl: 9 70% 36%;
-  --base-color-scale-coral-6: hsl(9, 70%, 36%);
-  --base-color-scale-coral-7-hsl: 8 79% 28%;
-  --base-color-scale-coral-7: hsl(8, 79%, 28%);
-  --base-color-scale-coral-8-hsl: 7 91% 22%;
-  --base-color-scale-coral-8: hsl(7, 91%, 22%);
-  --base-color-scale-coral-9-hsl: 6 98% 16%;
-  --base-color-scale-coral-9: hsl(6, 98%, 16%);
-  --base-color-scale-orange-0-hsl: 28 100% 95%;
-  --base-color-scale-orange-0: hsl(28, 100%, 95%);
-  --base-color-scale-orange-1-hsl: 28 100% 85%;
-  --base-color-scale-orange-1: hsl(28, 100%, 85%);
-  --base-color-scale-orange-2-hsl: 27 100% 74%;
-  --base-color-scale-orange-2: hsl(27, 100%, 74%);
-  --base-color-scale-orange-3-hsl: 25 96% 63%;
-  --base-color-scale-orange-3: hsl(25, 96%, 63%);
-  --base-color-scale-orange-4-hsl: 24 76% 51%;
-  --base-color-scale-orange-4: hsl(24, 76%, 51%);
-  --base-color-scale-orange-5-hsl: 24 100% 37%;
-  --base-color-scale-orange-5: hsl(24, 100%, 37%);
-  --base-color-scale-orange-6-hsl: 23 100% 29%;
-  --base-color-scale-orange-6: hsl(23, 100%, 29%);
-  --base-color-scale-orange-7-hsl: 22 100% 23%;
-  --base-color-scale-orange-7: hsl(22, 100%, 23%);
-  --base-color-scale-orange-8-hsl: 22 100% 18%;
-  --base-color-scale-orange-8: hsl(22, 100%, 18%);
-  --base-color-scale-orange-9-hsl: 19 100% 14%;
-  --base-color-scale-orange-9: hsl(19, 100%, 14%);
-  --base-color-scale-yellow-0-hsl: 50 89% 89%;
-  --base-color-scale-yellow-0: hsl(50, 89%, 89%);
-  --base-color-scale-yellow-1-hsl: 48 87% 73%;
-  --base-color-scale-yellow-1: hsl(48, 87%, 73%);
-  --base-color-scale-yellow-2-hsl: 46 76% 60%;
-  --base-color-scale-yellow-2: hsl(46, 76%, 60%);
-  --base-color-scale-yellow-3-hsl: 44 65% 50%;
-  --base-color-scale-yellow-3: hsl(44, 65%, 50%);
-  --base-color-scale-yellow-4-hsl: 42 100% 37%;
-  --base-color-scale-yellow-4: hsl(42, 100%, 37%);
-  --base-color-scale-yellow-5-hsl: 40 100% 30%;
-  --base-color-scale-yellow-5: hsl(40, 100%, 30%);
-  --base-color-scale-yellow-6-hsl: 37 100% 24%;
-  --base-color-scale-yellow-6: hsl(37, 100%, 24%);
-  --base-color-scale-yellow-7-hsl: 36 98% 19%;
-  --base-color-scale-yellow-7: hsl(36, 98%, 19%);
-  --base-color-scale-yellow-8-hsl: 35 100% 15%;
-  --base-color-scale-yellow-8: hsl(35, 100%, 15%);
-  --base-color-scale-yellow-9-hsl: 34 90% 12%;
-  --base-color-scale-yellow-9: hsl(34, 90%, 12%);
-  --base-color-scale-lemon-0-hsl: 54 95% 85%;
-  --base-color-scale-lemon-0: hsl(54, 95%, 85%);
-  --base-color-scale-lemon-1-hsl: 52 87% 67%;
-  --base-color-scale-lemon-1: hsl(52, 87%, 67%);
-  --base-color-scale-lemon-2-hsl: 51 70% 56%;
-  --base-color-scale-lemon-2: hsl(51, 70%, 56%);
-  --base-color-scale-lemon-3-hsl: 50 72% 45%;
-  --base-color-scale-lemon-3: hsl(50, 72%, 45%);
-  --base-color-scale-lemon-4-hsl: 50 98% 33%;
-  --base-color-scale-lemon-4: hsl(50, 98%, 33%);
-  --base-color-scale-lemon-5-hsl: 49 100% 26%;
-  --base-color-scale-lemon-5: hsl(49, 100%, 26%);
-  --base-color-scale-lemon-6-hsl: 48 100% 20%;
-  --base-color-scale-lemon-6: hsl(48, 100%, 20%);
-  --base-color-scale-lemon-7-hsl: 47 100% 16%;
-  --base-color-scale-lemon-7: hsl(47, 100%, 16%);
-  --base-color-scale-lemon-8-hsl: 46 100% 13%;
-  --base-color-scale-lemon-8: hsl(46, 100%, 13%);
-  --base-color-scale-lemon-9-hsl: 43 100% 10%;
-  --base-color-scale-lemon-9: hsl(43, 100%, 10%);
-  --base-color-scale-lime-0-hsl: 75 86% 85%;
-  --base-color-scale-lime-0: hsl(75, 86%, 85%);
-  --base-color-scale-lime-1-hsl: 76 75% 70%;
-  --base-color-scale-lime-1: hsl(76, 75%, 70%);
-  --base-color-scale-lime-2-hsl: 76 59% 58%;
-  --base-color-scale-lime-2: hsl(76, 59%, 58%);
-  --base-color-scale-lime-3-hsl: 77 51% 48%;
-  --base-color-scale-lime-3: hsl(77, 51%, 48%);
-  --base-color-scale-lime-4-hsl: 78 57% 38%;
-  --base-color-scale-lime-4: hsl(78, 57%, 38%);
-  --base-color-scale-lime-5-hsl: 80 64% 29%;
-  --base-color-scale-lime-5: hsl(80, 64%, 29%);
-  --base-color-scale-lime-6-hsl: 82 66% 22%;
-  --base-color-scale-lime-6: hsl(82, 66%, 22%);
-  --base-color-scale-lime-7-hsl: 84 85% 16%;
-  --base-color-scale-lime-7: hsl(84, 85%, 16%);
-  --base-color-scale-lime-8-hsl: 86 90% 12%;
-  --base-color-scale-lime-8: hsl(86, 90%, 12%);
-  --base-color-scale-lime-9-hsl: 88 96% 9%;
-  --base-color-scale-lime-9: hsl(88, 96%, 9%);
-  --base-color-scale-green-0-hsl: 133 80% 92%;
-  --base-color-scale-green-0: hsl(133, 80%, 92%);
-  --base-color-scale-green-1-hsl: 134 66% 80%;
-  --base-color-scale-green-1: hsl(134, 66%, 80%);
-  --base-color-scale-green-2-hsl: 135 62% 65%;
-  --base-color-scale-green-2: hsl(135, 62%, 65%);
-  --base-color-scale-green-3-hsl: 136 50% 53%;
-  --base-color-scale-green-3: hsl(136, 50%, 53%);
-  --base-color-scale-green-4-hsl: 137 57% 41%;
-  --base-color-scale-green-4: hsl(137, 57%, 41%);
-  --base-color-scale-green-5-hsl: 137 66% 30%;
-  --base-color-scale-green-5: hsl(137, 66%, 30%);
-  --base-color-scale-green-6-hsl: 138 71% 23%;
-  --base-color-scale-green-6: hsl(138, 71%, 23%);
-  --base-color-scale-green-7-hsl: 141 90% 16%;
-  --base-color-scale-green-7: hsl(141, 90%, 16%);
-  --base-color-scale-green-8-hsl: 142 100% 12%;
-  --base-color-scale-green-8: hsl(142, 100%, 12%);
-  --base-color-scale-green-9-hsl: 143 100% 9%;
-  --base-color-scale-green-9: hsl(143, 100%, 9%);
-  --base-color-scale-teal-0-hsl: 172 72% 92%;
-  --base-color-scale-teal-0: hsl(172, 72%, 92%);
-  --base-color-scale-teal-1-hsl: 173 58% 80%;
-  --base-color-scale-teal-1: hsl(173, 58%, 80%);
-  --base-color-scale-teal-2-hsl: 177 57% 63%;
-  --base-color-scale-teal-2: hsl(177, 57%, 63%);
-  --base-color-scale-teal-3-hsl: 177 46% 51%;
-  --base-color-scale-teal-3: hsl(177, 46%, 51%);
-  --base-color-scale-teal-4-hsl: 179 51% 41%;
-  --base-color-scale-teal-4: hsl(179, 51%, 41%);
-  --base-color-scale-teal-5-hsl: 180 66% 29%;
-  --base-color-scale-teal-5: hsl(180, 66%, 29%);
-  --base-color-scale-teal-6-hsl: 181 67% 23%;
-  --base-color-scale-teal-6: hsl(181, 67%, 23%);
-  --base-color-scale-teal-7-hsl: 182 95% 15%;
-  --base-color-scale-teal-7: hsl(182, 95%, 15%);
-  --base-color-scale-teal-8-hsl: 182 82% 13%;
-  --base-color-scale-teal-8: hsl(182, 82%, 13%);
-  --base-color-scale-teal-9-hsl: 182 80% 10%;
-  --base-color-scale-teal-9: hsl(182, 80%, 10%);
-  --base-color-scale-blue-0-hsl: 200 100% 95%;
-  --base-color-scale-blue-0: hsl(200, 100%, 95%);
-  --base-color-scale-blue-1-hsl: 203 100% 87%;
-  --base-color-scale-blue-1: hsl(203, 100%, 87%);
-  --base-color-scale-blue-2-hsl: 205 100% 77%;
-  --base-color-scale-blue-2: hsl(205, 100%, 77%);
-  --base-color-scale-blue-3-hsl: 208 100% 67%;
-  --base-color-scale-blue-3: hsl(208, 100%, 67%);
-  --base-color-scale-blue-4-hsl: 211 100% 58%;
-  --base-color-scale-blue-4: hsl(211, 100%, 58%);
-  --base-color-scale-blue-5-hsl: 212 92% 45%;
-  --base-color-scale-blue-5: hsl(212, 92%, 45%);
-  --base-color-scale-blue-6-hsl: 213 95% 36%;
-  --base-color-scale-blue-6: hsl(213, 95%, 36%);
-  --base-color-scale-blue-7-hsl: 214 96% 29%;
-  --base-color-scale-blue-7: hsl(214, 96%, 29%);
-  --base-color-scale-blue-8-hsl: 216 82% 24%;
-  --base-color-scale-blue-8: hsl(216, 82%, 24%);
-  --base-color-scale-blue-9-hsl: 217 89% 18%;
-  --base-color-scale-blue-9: hsl(217, 89%, 18%);
-  --base-color-scale-indigo-0-hsl: 229 100% 97%;
-  --base-color-scale-indigo-0: hsl(229, 100%, 97%);
-  --base-color-scale-indigo-1-hsl: 231 100% 92%;
-  --base-color-scale-indigo-1: hsl(231, 100%, 92%);
-  --base-color-scale-indigo-2-hsl: 232 100% 86%;
-  --base-color-scale-indigo-2: hsl(232, 100%, 86%);
-  --base-color-scale-indigo-3-hsl: 234 100% 80%;
-  --base-color-scale-indigo-3: hsl(234, 100%, 80%);
-  --base-color-scale-indigo-4-hsl: 234 100% 73%;
-  --base-color-scale-indigo-4: hsl(234, 100%, 73%);
-  --base-color-scale-indigo-5-hsl: 237 84% 64%;
-  --base-color-scale-indigo-5: hsl(237, 84%, 64%);
-  --base-color-scale-indigo-6-hsl: 238 61% 53%;
-  --base-color-scale-indigo-6: hsl(238, 61%, 53%);
-  --base-color-scale-indigo-7-hsl: 237 58% 41%;
-  --base-color-scale-indigo-7: hsl(237, 58%, 41%);
-  --base-color-scale-indigo-8-hsl: 235 58% 32%;
-  --base-color-scale-indigo-8: hsl(235, 58%, 32%);
-  --base-color-scale-indigo-9-hsl: 235 57% 23%;
-  --base-color-scale-indigo-9: hsl(235, 57%, 23%);
-  --base-color-scale-purple-0-hsl: 285 100% 97%;
-  --base-color-scale-purple-0: hsl(285, 100%, 97%);
-  --base-color-scale-purple-1-hsl: 271 100% 92%;
-  --base-color-scale-purple-1: hsl(271, 100%, 92%);
-  --base-color-scale-purple-2-hsl: 267 100% 86%;
-  --base-color-scale-purple-2: hsl(267, 100%, 86%);
-  --base-color-scale-purple-3-hsl: 265 100% 80%;
-  --base-color-scale-purple-3: hsl(265, 100%, 80%);
-  --base-color-scale-purple-4-hsl: 261 92% 72%;
-  --base-color-scale-purple-4: hsl(261, 92%, 72%);
-  --base-color-scale-purple-5-hsl: 261 69% 59%;
-  --base-color-scale-purple-5: hsl(261, 69%, 59%);
-  --base-color-scale-purple-6-hsl: 261 53% 48%;
-  --base-color-scale-purple-6: hsl(261, 53%, 48%);
-  --base-color-scale-purple-7-hsl: 261 56% 38%;
-  --base-color-scale-purple-7: hsl(261, 56%, 38%);
-  --base-color-scale-purple-8-hsl: 261 59% 30%;
-  --base-color-scale-purple-8: hsl(261, 59%, 30%);
-  --base-color-scale-purple-9-hsl: 260 66% 23%;
-  --base-color-scale-purple-9: hsl(260, 66%, 23%);
-  --base-color-scale-pink-0-hsl: 330 100% 97%;
-  --base-color-scale-pink-0: hsl(330, 100%, 97%);
-  --base-color-scale-pink-1-hsl: 327 100% 91%;
-  --base-color-scale-pink-1: hsl(327, 100%, 91%);
-  --base-color-scale-pink-2-hsl: 327 100% 84%;
-  --base-color-scale-pink-2: hsl(327, 100%, 84%);
-  --base-color-scale-pink-3-hsl: 326 100% 75%;
-  --base-color-scale-pink-3: hsl(326, 100%, 75%);
-  --base-color-scale-pink-4-hsl: 325 76% 63%;
-  --base-color-scale-pink-4: hsl(325, 76%, 63%);
-  --base-color-scale-pink-5-hsl: 324 54% 49%;
-  --base-color-scale-pink-5: hsl(324, 54%, 49%);
-  --base-color-scale-pink-6-hsl: 323 59% 38%;
-  --base-color-scale-pink-6: hsl(323, 59%, 38%);
-  --base-color-scale-pink-7-hsl: 322 58% 30%;
-  --base-color-scale-pink-7: hsl(322, 58%, 30%);
-  --base-color-scale-pink-8-hsl: 320 67% 23%;
-  --base-color-scale-pink-8: hsl(320, 67%, 23%);
-  --base-color-scale-pink-9-hsl: 319 93% 16%;
-  --base-color-scale-pink-9: hsl(319, 93%, 16%);
-  --base-color-scale-black-0-hsl: 213 14% 12%;
-  --base-color-scale-black-0: hsl(213, 14%, 12%);
-  --base-color-scale-white-0-hsl: 0 100% 100%;
-  --base-color-scale-white-0: hsl(0, 100%, 100%);
-}
-
+:root,
 [data-color-mode="light"] {
   --base-color-scale-gray-0-hsl: 210 25% 98%;
   --base-color-scale-gray-0: hsl(210, 25%, 98%);

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css

@@ -1,32 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
-:root {
-  --brand-color-accent-fg: var(--base-color-scale-pink-5);
-  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
-  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
-  --brand-color-accent-subtle: var(--base-color-scale-pink-0);
-  --brand-color-text-default: var(--base-color-scale-gray-9);
-  --brand-color-text-muted: var(--base-color-scale-gray-6);
-  --brand-color-text-subtle: var(--base-color-scale-gray-5);
-  --brand-color-text-onEmphasis: var(--base-color-scale-white-0);
-  --brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
-  --brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
-  --brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
-  --brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
-  --brand-color-canvas-default: var(--base-color-scale-white-0);
-  --brand-color-canvas-overlay: var(--base-color-scale-white-0);
-  --brand-color-canvas-inset: var(--base-color-scale-gray-0);
-  --brand-color-canvas-subtle: var(--base-color-scale-gray-0);
-  --brand-color-border-default: var(--base-color-scale-gray-2);
-  --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
-  --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
-  --brand-color-focus: var(--base-color-scale-blue-5);
-}
-
+:root,
 [data-color-mode="light"] {
+  --brand-color-success-fg: var(--base-color-scale-green-5);
+  --brand-color-success-emphasis: var(--base-color-scale-green-4);
+  --brand-color-success-muted: hsl(var(--base-color-scale-green-3-hsl) / 60%);
+  --brand-color-success-subtle: var(--base-color-scale-green-0);
+  --brand-color-error-fg: var(--base-color-scale-red-5);
+  --brand-color-error-emphasis: var(--base-color-scale-red-5);
+  --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
+  --brand-color-error-subtle: var(--base-color-scale-red-0);
   --brand-color-accent-fg: var(--base-color-scale-pink-5);
   --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
   --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
@@ -50,6 +36,14 @@
 }
 
 [data-color-mode="dark"] {
+  --brand-color-success-fg: var(--base-color-scale-green-3);
+  --brand-color-success-emphasis: var(--base-color-scale-green-5);
+  --brand-color-success-muted: hsl(var(--base-color-scale-green-4-hsl) / 60%);
+  --brand-color-success-subtle: hsl(var(--base-color-scale-green-4-hsl) / 85%);
+  --brand-color-error-fg: var(--base-color-scale-red-4);
+  --brand-color-error-emphasis: var(--base-color-scale-red-5);
+  --brand-color-error-muted: hsl(var(--base-color-scale-red-4-hsl) / 60%);
+  --brand-color-error-subtle: hsl(var(--base-color-scale-red-4-hsl) / 85%);
   --brand-color-accent-fg: var(--base-color-scale-pink-3);
   --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
   --brand-color-accent-muted: hsl(var(--base-color-scale-pink-4-hsl) / 60%);

package/lib/design-tokens/css/tokens/functional/colors/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {
@@ -24,4 +24,12 @@
   --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
   --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
   --brand-color-accent-fg: var(--base-color-scale-pink-5);
+  --brand-color-error-subtle: var(--base-color-scale-red-0);
+  --brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
+  --brand-color-error-emphasis: var(--base-color-scale-red-5);
+  --brand-color-error-fg: var(--base-color-scale-red-5);
+  --brand-color-success-subtle: var(--base-color-scale-green-0);
+  --brand-color-success-muted: hsl(var(--base-color-scale-green-3-hsl) / 60%);
+  --brand-color-success-emphasis: var(--base-color-scale-green-4);
+  --brand-color-success-fg: var(--base-color-scale-green-5);
 }

package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css

@@ -1,13 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
-:root {
-  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
-  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
-}
-
+:root,
 [data-color-mode="light"] {
   --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
   --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);

package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css

@@ -1,16 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
-:root {
-  --brand-Button-background-base: var(--base-color-scale-black-0);
-  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
-  --brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
-  --brand-Button-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
-  --brand-Button-shadow-focus: hsl(var(--base-color-scale-black-0-hsl) / 15%) 0 0 0 4px;
-}
-
+:root,
 [data-color-mode="light"] {
   --brand-Button-background-base: var(--base-color-scale-black-0);
   --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);

package/lib/design-tokens/css/tokens/functional/components/control/base.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
+ */
+
+:root {
+  --brand-control-animation-easing: cubic-bezier(0.33, 1, 0.68, 1);
+  --brand-control-animation-duration: 80ms;
+  --brand-control-border-radius: var(--brand-borderRadius-medium);
+  --brand-control-large-fontSize: var(--brand-text-size-300);
+  --brand-control-large-fontWeight: var(--brand-text-weight-300);
+  --brand-control-large-padding: var(--base-size-12);
+  --brand-control-large-size: var(--base-size-48);
+  --brand-control-medium-fontSize: var(--brand-text-size-200);
+  --brand-control-medium-fontWeight: var(--brand-text-weight-200);
+  --brand-control-medium-padding: 0.625rem;
+  --brand-control-medium-size: 2.5rem;
+}

package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
+ */
+
+:root,
+[data-color-mode="light"] {
+  --brand-control-color-border-default: var(--base-color-scale-gray-4);
+  --brand-control-color-border-disabled: var(--base-color-scale-gray-2);
+  --brand-control-color-canvas-disabled: var(--base-color-scale-gray-1);
+  --brand-control-color-fg-default: var(--brand-color-text-default);
+  --brand-control-color-fg-disabled: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-bg-default: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-black-0);
+  --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-1);
+  --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-default: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-border-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-indeterminate: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-2);
+}
+
+[data-color-mode="dark"] {
+  --brand-control-color-border-default: var(--base-color-scale-gray-4);
+  --brand-control-color-border-disabled: var(--base-color-scale-gray-5);
+  --brand-control-color-canvas-disabled: var(--base-color-scale-gray-8);
+  --brand-control-color-fg-default: var(--brand-color-text-default);
+  --brand-control-color-fg-disabled: var(--base-color-scale-gray-5);
+  --brand-control-checkbox-bg-default: var(--base-color-scale-gray-7);
+  --brand-control-checkbox-bg-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-white-0);
+  --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-fg-checked: var(--base-color-scale-black-0);
+  --brand-control-checkbox-border-default: var(--base-color-scale-gray-4);
+  --brand-control-checkbox-border-checked: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-indeterminate: var(--base-color-scale-white-0);
+  --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4);
+}

package/lib/design-tokens/css/tokens/functional/components/faq/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css

@@ -1,12 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
-:root {
-  --brand-FAQ-heading-color: var(--brand-color-text-default);
-}
-
+:root,
 [data-color-mode="light"] {
   --brand-FAQ-heading-color: var(--brand-color-text-default);
 }

package/lib/design-tokens/css/tokens/functional/components/faq/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/hero/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css

@@ -1,13 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:05 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
-:root {
-  --brand-InlineLink-color-rest: var(--base-color-scale-blue-5);
-  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);
-}
-
+:root,
 [data-color-mode="light"] {
   --brand-InlineLink-color-rest: var(--base-color-scale-blue-5);
   --brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);

package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/river/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/size-coarse.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 @media (pointer: coarse) { :root {

package/lib/design-tokens/css/tokens/functional/size/size-fine.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 @media (pointer: fine) { :root {

package/lib/design-tokens/css/tokens/functional/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {
@@ -25,14 +25,14 @@
   --brand-control-large-gap: var(--base-size-8);
   --brand-control-large-paddingInline-spacious: var(--base-size-16);
   --brand-control-large-paddingInline-normal: var(--base-size-12);
+  --brand-control-large-paddingBlock: calc((var(--brand-control-large-size) - var(--brand-control-large-lineBoxHeight)) / 2);
   --brand-control-large-lineBoxHeight: var(--base-size-20);
-  --brand-control-large-size: var(--base-size-40);
   --brand-control-medium-gap: var(--base-size-8);
   --brand-control-medium-paddingInline-spacious: var(--base-size-16);
   --brand-control-medium-paddingInline-normal: var(--base-size-12);
   --brand-control-medium-paddingInline-condensed: var(--base-size-8);
+  --brand-control-medium-paddingBlock: calc((var(--brand-control-medium-size) - var(--brand-control-medium-lineBoxHeight)) / 2);
   --brand-control-medium-lineBoxHeight: var(--base-size-20);
-  --brand-control-medium-size: var(--base-size-32);
   --brand-control-small-gap: var(--base-size-4);
   --brand-control-small-paddingInline-normal: var(--base-size-12);
   --brand-control-small-paddingInline-condensed: var(--base-size-8);
@@ -47,8 +47,6 @@
   --brand-control-minTarget-coarse: var(--base-size-44);
   --brand-control-minTarget-fine: var(--base-size-16);
   --brand-control-xlarge-paddingBlock: calc((var(--brand-control-xlarge-size) - var(--brand-control-xlarge-lineBoxHeight)) / 2);
-  --brand-control-large-paddingBlock: calc((var(--brand-control-large-size) - var(--brand-control-large-lineBoxHeight)) / 2);
-  --brand-control-medium-paddingBlock: calc((var(--brand-control-medium-size) - var(--brand-control-medium-lineBoxHeight)) / 2);
   --brand-control-small-paddingBlock: calc((var(--brand-control-small-size) - var(--brand-control-small-lineBoxHeight)) / 2);
   --brand-control-xsmall-paddingBlock: calc((var(--brand-control-xsmall-size) - var(--brand-control-xsmall-lineBoxHeight)) / 2);
 }

package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Aug 2022 12:21:04 GMT
+ * Generated on Thu, 15 Sep 2022 10:40:43 GMT
  */
 
 :root {