@primer/react-brand 0.20.0 → 0.20.1-rc.936afc7

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandInlineLinkColorRest = "var(--base-color-scale-blue-5)";
-export const BrandInlineLinkColorPressed = "var(--base-color-scale-blue-7)";
+export const BrandInlineLinkColorPressed = "var(--base-color-scale-blue-7)";

package/lib/design-tokens/js/tokens/functional/components/label/colors.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandLabelColorDefault = "var(--brand-color-text-default)";
@@ -26,4 +26,4 @@ export const BrandLabelColorRed = "var(--base-color-scale-red-5)";
 export const BrandLabelColorRed-orangeStart = "var(--base-color-scale-red-5)";
 export const BrandLabelColorRed-orangeEnd = "var(--base-color-scale-orange-5)";
 export const BrandLabelColorTeal = "var(--base-color-scale-teal-5)";
-export const BrandLabelColorYellow = "var(--base-color-scale-yellow-5)";
+export const BrandLabelColorYellow = "var(--base-color-scale-yellow-5)";

package/lib/design-tokens/js/tokens/functional/components/pillar/colors.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandPillarIconColorDefault = "var(--brand-color-scale-gray-5)";
@@ -16,4 +16,4 @@ export const BrandPillarIconColorPink = "var(--base-color-scale-pink-5)";
 export const BrandPillarIconColorPurple = "var(--base-color-scale-purple-5)";
 export const BrandPillarIconColorRed = "var(--base-color-scale-red-5)";
 export const BrandPillarIconColorTeal = "var(--base-color-scale-teal-5)";
-export const BrandPillarIconColorYellow = "var(--base-color-scale-yellow-5)";
+export const BrandPillarIconColorYellow = "var(--base-color-scale-yellow-5)";

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandRiverHeadingMargin = "var(--base-size-8)";
-export const BrandRiverVisualShadow = "0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07)";
+export const BrandRiverVisualShadow = "0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07)";

package/lib/design-tokens/js/tokens/functional/components/river/river.js

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandRiverSpacingInner = "var(--base-size-24)";
-export const BrandRiverSpacingOuter = "var(--base-size-28)";
+export const BrandRiverSpacingOuter = "var(--base-size-28)";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";
@@ -12,4 +12,4 @@ export const BrandBorderWidthThicker = "max(4px, 0.25rem)";
 export const BrandBorderRadiusSmall = "0.1875rem";
 export const BrandBorderRadiusMedium = "0.375rem";
 export const BrandBorderRadiusLarge = "0.75rem";
-export const BrandBorderRadiusFull = "100vh";
+export const BrandBorderRadiusFull = "100vh";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandBreakpointXsmall = "20rem";
@@ -8,4 +8,4 @@ export const BrandBreakpointSmall = "34rem";
 export const BrandBreakpointMedium = "48rem";
 export const BrandBreakpointLarge = "63.25rem";
 export const BrandBreakpointXlarge = "80rem";
-export const BrandBreakpointXxlarge = "90rem";
+export const BrandBreakpointXxlarge = "90rem";

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

@@ -1,8 +1,8 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandControlMinTargetAuto = "2.75rem";
 export const BrandControlStackSmallGapAuto = "1rem";
-export const BrandControlStackMediumGapAuto = "0.75rem";
+export const BrandControlStackMediumGapAuto = "0.75rem";

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

@@ -1,8 +1,8 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandControlMinTargetAuto = "1rem";
 export const BrandControlStackSmallGapAuto = "0.5rem";
-export const BrandControlStackMediumGapAuto = "0.5rem";
+export const BrandControlStackMediumGapAuto = "0.5rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandControlMinTargetFine = "1rem";
@@ -47,4 +47,4 @@ export const BrandControlStackMediumGapCondensed = "0.5rem";
 export const BrandControlStackMediumGapSpacious = "0.75rem";
 export const BrandControlStackLargeGapAuto = "0.5rem";
 export const BrandControlStackLargeGapCondensed = "0.5rem";
-export const BrandControlStackLargeGapSpacious = "0.75rem";
+export const BrandControlStackLargeGapSpacious = "0.75rem";

package/lib/design-tokens/js/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";
@@ -8,4 +8,4 @@ export const BrandViewportRangeNarrowLandscape = "(max-width: calc(63.25rem - 0.
 export const BrandViewportRangeRegular = "(min-width: 48rem)";
 export const BrandViewportRangeWide = "(min-width: 90rem)";
 export const BrandViewportRangePortrait = "(orientation: portrait)";
-export const BrandViewportRangeLandscape = "(orientation: landscape)";
+export const BrandViewportRangeLandscape = "(orientation: landscape)";

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

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandHeadingLineHeight400 = "1.25rem";
 export const BrandHeadingLineHeight500 = "1.5rem";
 export const BrandHeadingLineHeight600 = "1.75rem";
-export const BrandHeadingLineHeight700 = "2rem";
+export const BrandHeadingLineHeight700 = "2rem";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 May 2023 11:09:54 GMT
+ * Generated on Tue, 30 May 2023 12:29:27 GMT
  */
 
 export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
@@ -60,4 +60,4 @@ export const BrandTextStyleItalic6 = "'ital' 6";
 export const BrandTextStyleItalic7 = "'ital' 7";
 export const BrandTextStyleItalic8 = "'ital' 8";
 export const BrandTextStyleItalic9 = "'ital' 9";
-export const BrandTextStyleItalic10 = "'ital' 10";
+export const BrandTextStyleItalic10 = "'ital' 10";

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

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

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

@@ -0,0 +1,21 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$base-size-128: 8rem;
+$base-size-112: 7rem;
+$base-size-96: 6rem;
+$base-size-80: 5rem;
+$base-size-64: 4rem;
+$base-size-48: 3rem;
+$base-size-44: 2.75rem;
+$base-size-40: 2.5rem;
+$base-size-36: 2.25rem;
+$base-size-32: 2rem;
+$base-size-28: 1.75rem;
+$base-size-24: 1.5rem;
+$base-size-20: 1.25rem;
+$base-size-16: 1rem;
+$base-size-12: 0.75rem;
+$base-size-8: 0.5rem;
+$base-size-4: 0.25rem;

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

@@ -0,0 +1,11 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$base-text-weight-heavy: 900;
+$base-text-weight-extrabold: 800;
+$base-text-weight-bold: 700;
+$base-text-weight-semibold: 600;
+$base-text-weight-medium: 500;
+$base-text-weight-normal: 400;
+$base-text-weight-light: 300;

package/lib/design-tokens/scss/tokens/functional/animation/base.scss

@@ -0,0 +1,27 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-animation-variant-scaleInLeft-end: 1;
+$brand-animation-variant-scaleInLeft-start: 0.90;
+$brand-animation-variant-scaleInLeft-distance: 1.25rem;
+$brand-animation-variant-scaleInRight-end: 1;
+$brand-animation-variant-scaleInRight-start: 0.90;
+$brand-animation-variant-scaleInRight-distance: -1.25rem;
+$brand-animation-variant-scaleInTop-distance: ;
+$brand-animation-variant-scaleIn-end: 1;
+$brand-animation-variant-scaleIn-start: 0.96;
+$brand-animation-variant-scaleInDown-end: 1;
+$brand-animation-variant-scaleInDown-start: 0;
+$brand-animation-variant-scaleInDown-distance: -3.125rem;
+$brand-animation-variant-scaleInUp-end: 1;
+$brand-animation-variant-scaleInUp-start: 0.96;
+$brand-animation-variant-scaleInUp-distance: 1.5rem;
+$brand-animation-variant-slideInRight-distance: -0.9375rem;
+$brand-animation-variant-slideInLeft-distance: 0.9375rem;
+$brand-animation-variant-slideInDown-distance: -0.9375rem;
+$brand-animation-variant-slideInUp-distance: 0.9375rem;
+$brand-animation-transition-default: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+$brand-animation-easing-default: cubic-bezier(0.16, 1, 0.3, 1);
+$brand-animation-duration-extended: 0.7s;
+$brand-animation-duration-default: 0.6s;

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

@@ -0,0 +1,30 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-color-focus: var(--base-color-scale-blue-5);
+$brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+$brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
+$brand-color-border-default: var(--base-color-scale-gray-2);
+$brand-color-canvas-subtle: var(--base-color-scale-gray-0);
+$brand-color-canvas-inset: var(--base-color-scale-gray-0);
+$brand-color-canvas-overlay: var(--base-color-scale-white-0);
+$brand-color-canvas-default: var(--base-color-scale-white-0);
+$brand-color-neutral-subtle: hsl(var(--base-color-scale-gray-1-hsl) / 99.5%);
+$brand-color-neutral-muted: hsl(var(--base-color-scale-gray-3-hsl) / 99.8%);
+$brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
+$brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
+$brand-color-text-onEmphasis: var(--base-color-scale-white-0);
+$brand-color-text-subtle: var(--base-color-scale-gray-5);
+$brand-color-text-muted: var(--base-color-scale-gray-6);
+$brand-color-text-default: var(--base-color-scale-gray-9);
+$brand-color-accent-secondary: var(--base-color-scale-purple-5);
+$brand-color-accent-primary: 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/scss/tokens/functional/components/card/base.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Card-animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
+$brand-Card-animation-duration: 600ms;
+$brand-Card-shadow: 0 3px 2px hsl(var(--base-color-scale-black-0-hsl) / 4%), 0 7px 5px hsl(var(--base-color-scale-black-0-hsl) / 2%), 0 13px 10px hsl(var(--base-color-scale-black-0-hsl) / 2%), 0 22px 17px hsl(var(--base-color-scale-black-0-hsl) / 2%);
+$brand-Card-maxWidth: 26.25rem;

package/lib/design-tokens/scss/tokens/functional/components/card/colors.scss

@@ -0,0 +1,33 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Card-icon-color-yellow: var(--base-color-scale-yellow-5);
+$brand-Card-icon-color-teal: var(--base-color-scale-teal-5);
+$brand-Card-icon-color-red: var(--base-color-scale-red-5);
+$brand-Card-icon-color-purple: var(--base-color-scale-purple-5);
+$brand-Card-icon-color-pink: var(--base-color-scale-pink-5);
+$brand-Card-icon-color-orange: var(--base-color-scale-orange-5);
+$brand-Card-icon-color-lime: var(--base-color-scale-lime-5);
+$brand-Card-icon-color-lemon: var(--base-color-scale-lemon-5);
+$brand-Card-icon-color-indigo: var(--base-color-scale-indigo-5);
+$brand-Card-icon-color-gray: var(--base-color-scale-gray-6);
+$brand-Card-icon-color-green: var(--base-color-scale-green-5);
+$brand-Card-icon-color-coral: var(--base-color-scale-coral-5);
+$brand-Card-icon-color-blue: var(--base-color-scale-blue-5);
+$brand-Card-icon-color-default: var(--brand-color-scale-gray-5);
+$brand-Card-icon-background-yellow: var(--base-color-scale-yellow-0);
+$brand-Card-icon-background-teal: var(--base-color-scale-teal-0);
+$brand-Card-icon-background-red: var(--base-color-scale-red-0);
+$brand-Card-icon-background-purple: var(--base-color-scale-purple-0);
+$brand-Card-icon-background-pink: var(--base-color-scale-pink-0);
+$brand-Card-icon-background-orange: var(--base-color-scale-orange-0);
+$brand-Card-icon-background-lime: var(--base-color-scale-lime-0);
+$brand-Card-icon-background-lemon: var(--base-color-scale-lemon-0);
+$brand-Card-icon-background-indigo: var(--base-color-scale-indigo-0);
+$brand-Card-icon-background-gray: var(--base-color-scale-gray-0);
+$brand-Card-icon-background-green: var(--base-color-scale-green-0);
+$brand-Card-icon-background-coral: var(--base-color-scale-coral-0);
+$brand-Card-icon-background-blue: var(--base-color-scale-blue-0);
+$brand-Card-icon-background-default: var(--base-color-scale-gray-0);
+$brand-Card-background-default: var(--brand-color-canvas-default);

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

@@ -0,0 +1,15 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$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/scss/tokens/functional/components/faq/base.scss

@@ -0,0 +1,6 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-FAQ-maxWidth: 51rem;
+$brand-FAQ-heading-centered-maxWidth: 37.5rem;

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

@@ -0,0 +1,5 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-FAQ-heading-color: var(--brand-color-text-default);

package/lib/design-tokens/scss/tokens/functional/components/footer/colors.scss

@@ -0,0 +1,5 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-footer-bg-color: var(--base-color-scale-white-0);

package/lib/design-tokens/scss/tokens/functional/components/grid/colors.scss

@@ -0,0 +1,5 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Grid-column-bgColor-overlay: hsl(var(--base-color-scale-red-4-hsl) / 30%);

package/lib/design-tokens/scss/tokens/functional/components/grid/grid.scss

@@ -0,0 +1,7 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Grid-spacing-margin: var(--base-size-16);
+$brand-Grid-spacing-column-gap: var(--base-size-16);
+$brand-Grid-spacing-row: var(--base-size-16);

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

@@ -0,0 +1,6 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Hero-regular-padding: var(--base-size-128) 0;
+$brand-Hero-narrow-padding: var(--base-size-96) 0;

package/lib/design-tokens/scss/tokens/functional/components/image/base.scss

@@ -0,0 +1,5 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Image-ratio-custom: auto;

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

@@ -0,0 +1,6 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);
+$brand-InlineLink-color-rest: var(--base-color-scale-blue-5);

package/lib/design-tokens/scss/tokens/functional/components/label/colors.scss

@@ -0,0 +1,28 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Label-color-yellow: var(--base-color-scale-yellow-5);
+$brand-Label-color-teal: var(--base-color-scale-teal-5);
+$brand-Label-color-red-orange-end: var(--base-color-scale-orange-5);
+$brand-Label-color-red-orange-start: var(--base-color-scale-red-5);
+$brand-Label-color-red: var(--base-color-scale-red-5);
+$brand-Label-color-purple-red-end: var(--base-color-scale-red-5);
+$brand-Label-color-purple-red-start: var(--base-color-scale-purple-5);
+$brand-Label-color-purple: var(--base-color-scale-purple-5);
+$brand-Label-color-pink-blue-end: var(--base-color-scale-blue-5);
+$brand-Label-color-pink-blue-start: var(--base-color-scale-pink-5);
+$brand-Label-color-pink: var(--base-color-scale-pink-5);
+$brand-Label-color-orange: var(--base-color-scale-orange-5);
+$brand-Label-color-lime: var(--base-color-scale-lime-5);
+$brand-Label-color-lemon: var(--base-color-scale-lemon-5);
+$brand-Label-color-indigo: var(--base-color-scale-indigo-5);
+$brand-Label-color-gray: var(--base-color-scale-gray-6);
+$brand-Label-color-green-blue-end: var(--base-color-scale-blue-5);
+$brand-Label-color-green-blue-start: var(--base-color-scale-green-5);
+$brand-Label-color-green: var(--base-color-scale-green-5);
+$brand-Label-color-coral: var(--base-color-scale-coral-5);
+$brand-Label-color-blue-purple-end: var(--base-color-scale-purple-5);
+$brand-Label-color-blue-purple-start: var(--base-color-scale-blue-5);
+$brand-Label-color-blue: var(--base-color-scale-blue-5);
+$brand-Label-color-default: var(--brand-color-text-default);

package/lib/design-tokens/scss/tokens/functional/components/pillar/colors.scss

@@ -0,0 +1,18 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-Pillar-icon-color-yellow: var(--base-color-scale-yellow-5);
+$brand-Pillar-icon-color-teal: var(--base-color-scale-teal-5);
+$brand-Pillar-icon-color-red: var(--base-color-scale-red-5);
+$brand-Pillar-icon-color-purple: var(--base-color-scale-purple-5);
+$brand-Pillar-icon-color-pink: var(--base-color-scale-pink-5);
+$brand-Pillar-icon-color-orange: var(--base-color-scale-orange-5);
+$brand-Pillar-icon-color-lime: var(--base-color-scale-lime-5);
+$brand-Pillar-icon-color-lemon: var(--base-color-scale-lemon-5);
+$brand-Pillar-icon-color-indigo: var(--base-color-scale-indigo-5);
+$brand-Pillar-icon-color-gray: var(--base-color-scale-gray-6);
+$brand-Pillar-icon-color-green: var(--base-color-scale-green-5);
+$brand-Pillar-icon-color-coral: var(--base-color-scale-coral-5);
+$brand-Pillar-icon-color-blue: var(--base-color-scale-blue-5);
+$brand-Pillar-icon-color-default: var(--brand-color-scale-gray-5);

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

@@ -0,0 +1,6 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-River-visual-shadow: 0px 100px 80px rgba(0, 0, 0, 0.0174624), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0235573), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0282784), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.0339075), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.04317), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.07);
+$brand-River-heading-margin: var(--base-size-8);

package/lib/design-tokens/scss/tokens/functional/components/river/river.scss

@@ -0,0 +1,6 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-River-spacing-outer: var(--base-size-28);
+$brand-River-spacing-inner: var(--base-size-24);

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

@@ -0,0 +1,14 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-borderRadius-full: 100vh;
+$brand-borderRadius-large: 0.75rem;
+$brand-borderRadius-medium: 0.375rem;
+$brand-borderRadius-small: 0.1875rem;
+$brand-borderWidth-thicker: max(4px, 0.25rem);
+$brand-borderWidth-thick: max(2px, 0.125rem);
+$brand-borderWidth-thin: max(1px, 0.0625rem);
+$brand-borderInset-thicker: inset 0 0 0 $brand-borderWidth-thicker;
+$brand-borderInset-thick: inset 0 0 0 $brand-borderWidth-thick;
+$brand-borderInset-thin: inset 0 0 0 $brand-borderWidth-thin;

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

@@ -0,0 +1,10 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-breakpoint-xxlarge: 90rem;
+$brand-breakpoint-xlarge: 80rem;
+$brand-breakpoint-large: 63.25rem;
+$brand-breakpoint-medium: 48rem;
+$brand-breakpoint-small: 34rem;
+$brand-breakpoint-xsmall: 20rem;

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

@@ -0,0 +1,7 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-controlStack-medium-gap-auto: $base-size-12;
+$brand-controlStack-small-gap-auto: $base-size-16;
+$brand-control-minTarget-auto: $base-size-44;

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

@@ -0,0 +1,7 @@
+
+// Do not edit directly
+// Generated on Tue, 30 May 2023 12:29:27 GMT
+
+$brand-controlStack-medium-gap-auto: $base-size-8;
+$brand-controlStack-small-gap-auto: $base-size-8;
+$brand-control-minTarget-auto: $base-size-16;