@primer/react-brand 0.2.1 → 0.3.0-rc.78f0d9f

package/lib/css/main.css

@@ -91,7 +91,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -897,7 +897,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -922,7 +922,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -970,12 +970,16 @@ select {
   --brand-text-weight-300: var(--base-text-weight-normal);
   --brand-text-weight-200: var(--base-text-weight-normal);
   --brand-text-weight-100: var(--base-text-weight-normal);
+  --brand-heading-lineHeight-700: 2rem;
+  --brand-heading-lineHeight-600: 1.75rem;
+  --brand-heading-lineHeight-500: 1.5rem;
+  --brand-heading-lineHeight-400: 1.25rem;
   --brand-heading-letterSpacing-700: -0.01em;
   --brand-heading-letterSpacing-600: -0.01em;
   --brand-heading-letterSpacing-500: -0.01em;
   --brand-heading-letterSpacing-400: -0.01em;
-  --brand-heading-weight-700: var(--base-text-weight-bold);
-  --brand-heading-weight-600: var(--base-text-weight-semibold);
+  --brand-heading-weight-700: var(--base-text-weight-extrabold);
+  --brand-heading-weight-600: var(--base-text-weight-bold);
   --brand-heading-weight-500: var(--base-text-weight-semibold);
   --brand-heading-weight-400: var(--base-text-weight-semibold);
   --brand-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
@@ -1029,12 +1033,16 @@ select {
     --brand-text-weight-300: var(--base-text-weight-normal);
     --brand-text-weight-200: var(--base-text-weight-normal);
     --brand-text-weight-100: var(--base-text-weight-normal);
+    --brand-heading-lineHeight-700: 2.75rem;
+    --brand-heading-lineHeight-600: 2rem;
+    --brand-heading-lineHeight-500: 1.75rem;
+    --brand-heading-lineHeight-400: 1.5rem;
     --brand-heading-letterSpacing-700: -0.01em;
     --brand-heading-letterSpacing-600: -0.01em;
     --brand-heading-letterSpacing-500: -0.01em;
     --brand-heading-letterSpacing-400: -0.01em;
-    --brand-heading-weight-700: var(--base-text-weight-bold);
-    --brand-heading-weight-600: var(--base-text-weight-semibold);
+    --brand-heading-weight-700: var(--base-text-weight-extrabold);
+    --brand-heading-weight-600: var(--base-text-weight-bold);
     --brand-heading-weight-500: var(--base-text-weight-semibold);
     --brand-heading-weight-400: var(--base-text-weight-semibold);
   }
@@ -1076,12 +1084,16 @@ select {
     --brand-text-weight-300: var(--base-text-weight-normal);
     --brand-text-weight-200: var(--base-text-weight-normal);
     --brand-text-weight-100: var(--base-text-weight-normal);
+    --brand-heading-lineHeight-700: 3.25rem;
+    --brand-heading-lineHeight-600: 2.25rem;
+    --brand-heading-lineHeight-500: 1.75rem;
+    --brand-heading-lineHeight-400: 1.5rem;
     --brand-heading-letterSpacing-700: -0.01em;
     --brand-heading-letterSpacing-600: -0.01em;
     --brand-heading-letterSpacing-500: -0.01em;
     --brand-heading-letterSpacing-400: -0.01em;
-    --brand-heading-weight-700: var(--base-text-weight-bold);
-    --brand-heading-weight-600: var(--base-text-weight-semibold);
+    --brand-heading-weight-700: var(--base-text-weight-extrabold);
+    --brand-heading-weight-600: var(--base-text-weight-bold);
     --brand-heading-weight-500: var(--base-text-weight-semibold);
     --brand-heading-weight-400: var(--base-text-weight-semibold);
   }
@@ -1089,7 +1101,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -1103,10 +1115,32 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
+  --brand-borderRadius-full: 100vh;
+  --brand-borderRadius-large: 0.75rem;
+  --brand-borderRadius-medium: 0.375rem;
+  --brand-borderRadius-small: 0.1875rem;
+  --brand-borderWidth-thick: max(4px, 0.25rem);
+  --brand-borderWidth-normal: max(2px, 0.125rem);
+  --brand-borderWidth-thin: max(1px, 0.0625rem);
+  --brand-borderInset-thick: inset 0 0 0 var(--brand-borderWidth-thick);
+  --brand-borderInset-normal: inset 0 0 0 var(--brand-borderWidth-normal);
+  --brand-borderInset-thin: inset 0 0 0 var(--brand-borderWidth-thin);
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 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);
@@ -1122,9 +1156,14 @@ select {
   --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);
 }
 
 [data-color-mode="light"] {
+  --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);
@@ -1140,9 +1179,14 @@ select {
   --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);
 }
 
 [data-color-mode="dark"] {
+  --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%);
+  --brand-color-accent-subtle: hsl(var(--base-color-scale-pink-4-hsl) / 85%);
   --brand-color-text-default: var(--base-color-scale-white-0);
   --brand-color-text-muted: var(--base-color-scale-gray-3);
   --brand-color-text-subtle: var(--base-color-scale-gray-4);
@@ -1158,6 +1202,7 @@ select {
   --brand-color-border-default: var(--base-color-scale-gray-6);
   --brand-color-border-muted: var(--base-color-scale-gray-7);
   --brand-color-border-subtle: hsl(var(--base-color-scale-gray-0-hsl) / 99.9%);
+  --brand-color-focus: var(--base-color-scale-blue-3);
 }
 
 .Primer_Brand__Hero-module__Hero___EM3jf {
@@ -1290,7 +1335,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
  */
 
 :root {
@@ -1398,7 +1443,7 @@ select {
 .Primer_Brand__Heading-module__Heading--3___wsITu {
   font-weight: var(--brand-heading-weight-700);
   font-size: var(--brand-text-size-700);
-  line-height: var(--brand-text-lineHeight-700);
+  line-height: var(--brand-heading-lineHeight-700);
   font-family: var(--brand-heading-fontFamily);
   letter-spacing: var(--brand-heading-letterSpacing-700);
 }
@@ -1429,7 +1474,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -1439,7 +1484,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -1505,15 +1550,15 @@ select {
     grid-template-columns: [content] calc(40% - var(--base-size-12)) [visual] calc(60% - var(--base-size-12));
   }
 
-  .Primer_Brand__River-module__River--align-left___sOE5L {
+  .Primer_Brand__River-module__River--align-start___L0mn_ {
     grid-template-areas: 'content visual';
   }
 
-  .Primer_Brand__River-module__River--align-right___J45pe {
+  .Primer_Brand__River-module__River--align-end___UIM3e {
     grid-template-areas: 'visual content';
   }
 
-  .Primer_Brand__River-module__River--align-right___J45pe.Primer_Brand__River-module__River--60-40___XDKAU {
+  .Primer_Brand__River-module__River--align-end___UIM3e.Primer_Brand__River-module__River--60-40___XDKAU {
     grid-template-columns: [visual] calc(60% - var(--base-size-12)) [content] calc(40% - var(--base-size-12));
   }
 
@@ -1560,6 +1605,62 @@ select {
   }
 }
 
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-InlineLink-color-rest: var(--base-color-scale-blue-5);
+  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);
+}
+
+[data-color-mode="light"] {
+  --brand-InlineLink-color-rest: var(--base-color-scale-blue-5);
+  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);
+}
+
+[data-color-mode="dark"] {
+  --brand-InlineLink-color-rest: var(--base-color-scale-blue-4);
+  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-2);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama {
+  text-decoration: none;
+  position: relative;
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama,
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama > span {
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:active,
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:active > span {
+  color: var(--brand-InlineLink-color-pressed);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama::after {
+  content: '';
+  border-bottom: 1px solid var(--brand-InlineLink-color-rest);
+  height: 0;
+  transition: 0.3s transform;
+  transform: scaleY(1);
+  transform-origin: 50% 100%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:hover::after {
+  transform: scaleY(-2);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:active::after {
+  border-color: var(--brand-InlineLink-color-pressed);
+}
+
 .Primer_Brand__Link-module__Link___lvKjM {
   position: relative;
   display: inline-flex;
@@ -1613,3 +1714,242 @@ select {
   height: 20px;
 }
 
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+[data-color-mode="light"] {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+[data-color-mode="dark"] {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+.Primer_Brand__Accordion-module__Accordion___M_LPt {
+  box-sizing: border-box;
+  position: relative;
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
+.Primer_Brand__Accordion-module__Accordion___M_LPt::after {
+  content: '';
+  border: 3px solid var(--brand-color-border-default);
+  height: 0;
+  transition: 0.3s transform;
+  transform: scaleY(0);
+  transform-origin: 50% 100%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.Primer_Brand__Accordion-module__Accordion___M_LPt:hover::after {
+  transform: scaleY(0.35);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc {
+  cursor: pointer;
+  padding: var(--base-size-24) 0;
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--base-size-24) auto;
+  grid-gap: var(--base-size-8);
+  gap: var(--base-size-8);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::-webkit-details-marker {
+  display: none;
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc.Primer_Brand__Accordion-module__focus-visible___NWNew {
+  outline: var(--brand-borderWidth-normal) solid var(--brand-color-focus);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc:focus-visible {
+  outline: var(--brand-borderWidth-normal) solid var(--brand-color-focus);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::before,
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::after {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-weight: 500;
+  cursor: pointer;
+  display: block;
+  font-size: 32px;
+  line-height: 24px;
+  text-align: center;
+  height: 24px;
+  width: 24px;
+  background: linear-gradient(
+    -70deg,
+    var(--brand-Accordion-toggle-color-start) 0%,
+    var(--brand-Accordion-toggle-color-end) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  transition: transform 0.3s ease, opacity 0.2s ease;
+  grid-column: 1 / 2;
+  grid-row: 1;
+  align-self: center;
+  justify-self: center;
+  place-self: center center;
+}
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::before {
+  font-weight: var(--base-text-weight-medium);
+  content: '–';
+  opacity: 0;
+}
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::after {
+  content: '+';
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary-heading_____snF {
+  /*Visual appearance as a h6*/
+  font-weight: var(--brand-heading-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+}
+
+details[open] > .Primer_Brand__Accordion-module__Accordion__summary___NUIYc::before {
+  opacity: 1;
+  transform: rotateZ(180deg);
+}
+details[open] > .Primer_Brand__Accordion-module__Accordion__summary___NUIYc::after {
+  opacity: 0;
+  transform: rotateZ(180deg);
+}
+details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
+  padding-left: var(--base-size-40);
+  padding-bottom: var(--base-size-24);
+  margin-top: calc(var(--base-size-16) * -1); /* for 8px gap between question and answer */
+  -webkit-animation: Primer_Brand__Accordion-module__fade-in___b3l0l 0.5s;
+          animation: Primer_Brand__Accordion-module__fade-in___b3l0l 0.5s;
+}
+.Primer_Brand__Accordion-module__Accordion__content-item___M_dlm {
+  margin-bottom: var(--base-size-12);
+}
+/* Medium breakpoint and up */
+@media screen and (min-width: 48rem) {
+  .Primer_Brand__Accordion-module__Accordion__summary___NUIYc {
+    gap: var(--base-size-40);
+  }
+  details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
+    padding-left: calc(var(--base-size-48) + var(--base-size-16));
+  }
+}
+
+@-webkit-keyframes Primer_Brand__Accordion-module__fade-in___b3l0l {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes Primer_Brand__Accordion-module__fade-in___b3l0l {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
+ */
+
+:root {
+  --brand-FAQ-maxWidth: 51rem;
+  --brand-FAQ-heading-centered-maxWidth: 37.5rem;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+[data-color-mode="light"] {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+[data-color-mode="dark"] {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+.Primer_Brand__FAQ-module__FAQ___R3vLU {
+  max-width: var(--brand-FAQ-maxWidth);
+  margin: 0 auto;
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading___bH0aG {
+  /*Visual appearance as a h3*/
+  font-weight: var(--brand-heading-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-heading-lineHeight-700);
+  letter-spacing: var(--brand-heading-letterSpacing-700);
+
+  color: var(--brand-FAQ-heading-color);
+}
+
+.Primer_Brand__FAQ-module__FAQ__subheading___I4puv {
+  /*Visual appearance as a h4*/
+  font-weight: var(--brand-heading-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+  letter-spacing: var(--brand-heading-letterSpacing-600);
+
+  margin-top: var(--base-size-64);
+  margin-bottom: var(--base-size-16);
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading--start___eHaT3 {
+  text-align: left;
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading--center___xMpbW {
+  text-align: center;
+  max-width: var(--brand-FAQ-heading-centered-maxWidth);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading--large___pBEPT {
+  /*Visual appearance as a h2*/
+  font-weight: var(--brand-text-weight-800);
+  font-size: var(--brand-text-size-800);
+  line-height: var(--brand-text-lineHeight-800);
+  letter-spacing: var(--brand-text-letterSpacing-800);
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .Primer_Brand__FAQ-module__FAQ__subheading___I4puv {
+    margin-top: var(--base-size-96);
+  }
+
+  .Primer_Brand__FAQ-module__FAQ__heading--with-margin___S2_ET {
+    margin-bottom: var(--base-size-64);
+  }
+}
+

package/lib/css/stylesheets.d.ts

@@ -6,4 +6,5 @@ import '../../lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.c
 import '../../lib/design-tokens/css/tokens/base/size/size.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';
 import '../../lib/design-tokens/css/tokens/functional/colors/global-with-modes.css';

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

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

@@ -1,9 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:48 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);
@@ -19,9 +23,14 @@
   --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);
 }
 
 [data-color-mode="light"] {
+  --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);
@@ -37,9 +46,14 @@
   --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);
 }
 
 [data-color-mode="dark"] {
+  --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%);
+  --brand-color-accent-subtle: hsl(var(--base-color-scale-pink-4-hsl) / 85%);
   --brand-color-text-default: var(--base-color-scale-white-0);
   --brand-color-text-muted: var(--base-color-scale-gray-3);
   --brand-color-text-subtle: var(--base-color-scale-gray-4);
@@ -55,4 +69,5 @@
   --brand-color-border-default: var(--base-color-scale-gray-6);
   --brand-color-border-muted: var(--base-color-scale-gray-7);
   --brand-color-border-subtle: hsl(var(--base-color-scale-gray-0-hsl) / 99.9%);
+  --brand-color-focus: var(--base-color-scale-blue-3);
 }

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

@@ -1,9 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
+  --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);
@@ -19,4 +20,8 @@
   --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-subtle: var(--base-color-scale-pink-0);
+  --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);
 }

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

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+[data-color-mode="light"] {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+[data-color-mode="dark"] {
+  --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,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jun 2022 14:49:06 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
  */
 
 :root {

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

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
+ */
+
+:root {
+  --brand-FAQ-maxWidth: 51rem;
+  --brand-FAQ-heading-centered-maxWidth: 37.5rem;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+[data-color-mode="light"] {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+[data-color-mode="dark"] {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}