@drivy/cobalt 0.25.0 → 0.26.0

package/styles/core/_colors-map.scss

@@ -4,6 +4,12 @@
 /**********************************/
 $theme-colors-map: (
   background: (
+    primary: var(--c-l-grey-lighter),
+    secondary: var(--c-l-white),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-grey-lighter)
+    ),
     accent: var(--c-l-purple),
     accentInteractive: (
       DEFAULT: var(--c-l-purple),
@@ -14,30 +20,58 @@ $theme-colors-map: (
       DEFAULT: var(--c-l-indigo),
       hover: var(--c-l-indigo)
     ),
-    connect: var(--c-l-turquoise),
-    connectInteractive: (
-      DEFAULT: var(--c-l-turquoise),
-      hover: var(--c-l-turquoise)
-    ),
-    driver: var(--c-l-deprecatedDriver),
+    info: var(--c-l-grey-lighter),
     error: var(--c-l-red),
     errorInteractive: (
       DEFAULT: var(--c-l-red),
       hover: var(--c-l-red)
     ),
     errorAlt: var(--c-l-graphite),
-    info: var(--c-l-grey-lighter),
-    neutral: var(--c-l-grey-light),
-    neutralAlt: var(--c-l-grey-lighter),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-graphite),
+    connect: var(--c-l-turquoise),
+    connectInteractive: (
+      DEFAULT: var(--c-l-turquoise),
+      hover: var(--c-l-turquoise)
+    ),
+    driver: var(--c-l-deprecatedDriver),
     owner: var(--c-l-indigo-dark),
-    primary: var(--c-l-grey-lighter),
-    secondary: var(--c-l-white),
-    secondaryInteractive: (
+    disabled: var(--c-l-grey-light),
+    neutral: var(--c-l-grey-light),
+    neutralAlt: var(--c-l-grey-lighter)
+  ),
+  text: (
+    base: var(--c-l-graphite),
+    baseInteractive: (
+      DEFAULT: var(--c-l-graphite),
+      hover: var(--c-l-graphite)
+    ),
+    subdued: var(--c-l-graphite-light),
+    subduedInteractive: (
+      DEFAULT: var(--c-l-graphite-light),
+      hover: var(--c-l-graphite)
+    ),
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue)
+    ),
+    accentAlt: var(--c-l-white),
+    accentAltInteractive: (
       DEFAULT: var(--c-l-white),
-      hover: var(--c-l-grey-lighter)
+      hover: var(--c-l-indigo)
     ),
+    info: var(--c-l-graphite-light),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-white),
     success: var(--c-l-green),
-    successAlt: var(--c-l-graphite)
+    successAlt: var(--c-l-white),
+    connect: var(--c-l-turquoise),
+    driver: var(--c-l-graphite),
+    owner: var(--c-l-white),
+    warning: var(--c-l-coral),
+    infoAlt: var(--c-l-turquoise),
+    inversed: var(--c-l-white)
   ),
   buttonBackground: (
     selected: var(--c-l-indigo),
@@ -129,14 +163,17 @@ $theme-colors-map: (
       press: var(--c-l-blue)
     )
   ),
-  fill: (
-    accent: var(--c-l-purple),
-    accentAlt: var(--c-l-purple),
-    disabled: var(--c-l-grey-dark),
-    secondary: var(--c-l-turquoise),
-    subdued: var(--c-l-grey-light)
-  ),
   icon: (
+    base: var(--c-l-graphite),
+    baseInteractive: (
+      DEFAULT: var(--c-l-graphite),
+      hover: var(--c-l-graphite)
+    ),
+    subdued: var(--c-l-graphite-light),
+    subduedInteractive: (
+      DEFAULT: var(--c-l-graphite-light),
+      hover: var(--c-l-graphite)
+    ),
     accent: var(--c-l-purple),
     accentInteractive: (
       DEFAULT: var(--c-l-purple),
@@ -147,29 +184,27 @@ $theme-colors-map: (
       DEFAULT: var(--c-l-white),
       hover: var(--c-l-indigo)
     ),
-    base: var(--c-l-graphite),
-    baseInteractive: (
-      DEFAULT: var(--c-l-graphite),
-      hover: var(--c-l-graphite)
-    ),
-    connect: var(--c-l-turquoise),
-    driver: var(--c-l-graphite),
+    info: var(--c-l-graphite-light),
     error: var(--c-l-red),
     errorAlt: var(--c-l-red),
-    info: var(--c-l-graphite-light),
-    infoAlt: var(--c-l-turquoise),
-    inversed: var(--c-l-white),
-    owner: var(--c-l-white),
-    subdued: var(--c-l-graphite-light),
-    subduedInteractive: (
-      DEFAULT: var(--c-l-graphite-light),
-      hover: var(--c-l-graphite)
-    ),
     success: var(--c-l-green),
     successAlt: var(--c-l-white),
-    warning: var(--c-l-coral)
+    connect: var(--c-l-turquoise),
+    driver: var(--c-l-graphite),
+    owner: var(--c-l-white),
+    warning: var(--c-l-coral),
+    infoAlt: var(--c-l-turquoise),
+    inversed: var(--c-l-white),
+    disabled: var(--c-l-grey-lighter)
   ),
   stroke: (
+    base: var(--c-l-grey),
+    baseInteractive: (
+      DEFAULT: var(--c-l-grey),
+      hover: var(--c-l-graphite-light),
+      press: var(--c-l-graphite)
+    ),
+    subdued: var(--c-l-grey-light),
     accent: var(--c-l-indigo),
     accentInteractive: (
       DEFAULT: var(--c-l-indigo),
@@ -177,49 +212,21 @@ $theme-colors-map: (
       press: var(--c-l-indigo-dark)
     ),
     accentAlt: var(--c-l-purple),
-    base: var(--c-l-grey),
-    baseInteractive: (
-      DEFAULT: var(--c-l-grey),
-      hover: var(--c-l-graphite-light),
-      press: var(--c-l-graphite)
-    ),
     error: var(--c-l-red),
     errorAlt: var(--c-l-red),
-    subdued: var(--c-l-grey-light),
     success: var(--c-l-green),
     successAlt: var(--c-l-green)
   ),
-  text: (
-    accent: var(--c-l-purple),
-    accentInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue)
-    ),
-    accentAlt: var(--c-l-white),
-    accentAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-indigo)
-    ),
+  fill: (
     base: var(--c-l-graphite),
-    baseInteractive: (
-      DEFAULT: var(--c-l-graphite),
-      hover: var(--c-l-graphite)
-    ),
-    connect: var(--c-l-turquoise),
-    driver: var(--c-l-graphite),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-white),
-    info: var(--c-l-graphite-light),
-    infoAlt: var(--c-l-turquoise),
-    inversed: var(--c-l-white),
-    owner: var(--c-l-white),
-    subdued: var(--c-l-graphite-light),
-    subduedInteractive: (
-      DEFAULT: var(--c-l-graphite-light),
-      hover: var(--c-l-graphite)
-    ),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-white),
-    warning: var(--c-l-coral)
+    secondary: var(--c-l-turquoise),
+    subdued: var(--c-l-grey-light),
+    accent: var(--c-l-purple),
+    accentAlt: var(--c-l-purple),
+    success: var(--c-l-red),
+    error: var(--c-l-green),
+    negative: var(--c-l-red),
+    neutral: var(--c-l-grey-lighter),
+    disabled: var(--c-l-grey-dark)
   )
 );

package/styles/core/card.scss

@@ -1,5 +1,6 @@
 $card-strip-width: 3px;
 
+// To deprecate
 @mixin card-strip($variant: gradient) {
   position: relative;
 

package/styles/core/color.scss

@@ -32,6 +32,10 @@
   @include semantic-color($color, fill, fill);
 }
 
+@mixin fill-bg-color($color) {
+  @include semantic-color($color, fill, background-color);
+}
+
 @mixin border-color($color) {
   @include semantic-color($color, stroke, border-color);
 }

package/styles/core/fonts.scss

@@ -3,7 +3,5 @@
   font-style: normal;
   font-weight: bold;
   font-display: swap;
-  // path here is related to the root file (here ../core.scss) for the sass resolver
-  // https://webpack.js.org/loaders/sass-loader/
   src: url("fonts/BrandFont.woff") format("woff");
 }

package/styles/core/global-variables.scss

@@ -1,2 +1,2 @@
-$card-padding: spacing();
+$card-padding: spacing(md);
 $unit: 4px;

package/styles/core/text.scss

@@ -22,19 +22,16 @@
   }
 }
 
-@mixin c-text-section-heading {
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: 1.5rem;
-  color: #757575;
-}
-
 @mixin c-text-title-xl {
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 2rem;
   font-weight: 700;
   line-height: 2.25rem;
+
+  @include breakpoint($from: sm) {
+    font-size: 2.5rem;
+    line-height: 2.75rem;
+  }
 }
 
 @mixin c-text-title-lg {
@@ -42,6 +39,11 @@
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1.75rem;
+
+  @include breakpoint($from: sm) {
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
 }
 
 @mixin c-text-title-md {
@@ -49,6 +51,11 @@
   font-size: 1.125rem;
   font-weight: 700;
   line-height: 1.25rem;
+
+  @include breakpoint($from: sm) {
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+  }
 }
 
 @mixin c-text-title-sm {
@@ -56,6 +63,11 @@
   font-size: 0.9375rem;
   font-weight: 600;
   line-height: 1.25rem;
+
+  @include breakpoint($from: sm) {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+  }
 }
 
 @mixin c-text-title-xs {
@@ -82,3 +94,12 @@
   font-size: 0.75rem;
   line-height: 1rem;
 }
+
+@mixin c-text-section-heading {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  text-transform: uppercase;
+  color: #757575;
+}

package/styles/core/theme.scss

@@ -3,30 +3,54 @@
 /*** DO NOT MODIFY IT DIRECTLY ****/
 /**********************************/
 :root {
+  --c-background-primary: var(--c-l-grey-lighter);
+  --c-background-secondary: var(--c-l-white);
+  --c-background-secondaryInteractive: var(--c-l-white);
+  --c-background-secondaryInteractive--hover: var(--c-l-grey-lighter);
   --c-background-accent: var(--c-l-purple);
   --c-background-accentInteractive: var(--c-l-purple);
   --c-background-accentInteractive--hover: var(--c-l-purple);
   --c-background-accentAlt: var(--c-l-indigo);
   --c-background-accentAltInteractive: var(--c-l-indigo);
   --c-background-accentAltInteractive--hover: var(--c-l-indigo);
-  --c-background-connect: var(--c-l-turquoise);
-  --c-background-connectInteractive: var(--c-l-turquoise);
-  --c-background-connectInteractive--hover: var(--c-l-turquoise);
-  --c-background-driver: var(--c-l-deprecatedDriver);
+  --c-background-info: var(--c-l-grey-lighter);
   --c-background-error: var(--c-l-red);
   --c-background-errorInteractive: var(--c-l-red);
   --c-background-errorInteractive--hover: var(--c-l-red);
   --c-background-errorAlt: var(--c-l-graphite);
-  --c-background-info: var(--c-l-grey-lighter);
-  --c-background-neutral: var(--c-l-grey-light);
-  --c-background-neutralAlt: var(--c-l-grey-lighter);
-  --c-background-owner: var(--c-l-indigo-dark);
-  --c-background-primary: var(--c-l-grey-lighter);
-  --c-background-secondary: var(--c-l-white);
-  --c-background-secondaryInteractive: var(--c-l-white);
-  --c-background-secondaryInteractive--hover: var(--c-l-grey-lighter);
   --c-background-success: var(--c-l-green);
   --c-background-successAlt: var(--c-l-graphite);
+  --c-background-connect: var(--c-l-turquoise);
+  --c-background-connectInteractive: var(--c-l-turquoise);
+  --c-background-connectInteractive--hover: var(--c-l-turquoise);
+  --c-background-driver: var(--c-l-deprecatedDriver);
+  --c-background-owner: var(--c-l-indigo-dark);
+  --c-background-disabled: var(--c-l-grey-light);
+  --c-background-neutral: var(--c-l-grey-light);
+  --c-background-neutralAlt: var(--c-l-grey-lighter);
+  --c-text-base: var(--c-l-graphite);
+  --c-text-baseInteractive: var(--c-l-graphite);
+  --c-text-baseInteractive--hover: var(--c-l-graphite);
+  --c-text-subdued: var(--c-l-graphite-light);
+  --c-text-subduedInteractive: var(--c-l-graphite-light);
+  --c-text-subduedInteractive--hover: var(--c-l-graphite);
+  --c-text-accent: var(--c-l-purple);
+  --c-text-accentInteractive: var(--c-l-blue);
+  --c-text-accentInteractive--hover: var(--c-l-blue);
+  --c-text-accentAlt: var(--c-l-white);
+  --c-text-accentAltInteractive: var(--c-l-white);
+  --c-text-accentAltInteractive--hover: var(--c-l-indigo);
+  --c-text-info: var(--c-l-graphite-light);
+  --c-text-error: var(--c-l-red);
+  --c-text-errorAlt: var(--c-l-white);
+  --c-text-success: var(--c-l-green);
+  --c-text-successAlt: var(--c-l-white);
+  --c-text-connect: var(--c-l-turquoise);
+  --c-text-driver: var(--c-l-graphite);
+  --c-text-owner: var(--c-l-white);
+  --c-text-warning: var(--c-l-coral);
+  --c-text-infoAlt: var(--c-l-turquoise);
+  --c-text-inversed: var(--c-l-white);
   --c-buttonBackground-selected: var(--c-l-indigo);
   --c-buttonBackground-destructiveInteractive: var(--c-l-red);
   --c-buttonBackground-destructiveInteractive--hover: var(--c-l-red);
@@ -81,69 +105,52 @@
   --c-buttonLabel-tertiaryInteractive: var(--c-l-blue);
   --c-buttonLabel-tertiaryInteractive--hover: var(--c-l-blue);
   --c-buttonLabel-tertiaryInteractive--press: var(--c-l-blue);
-  --c-fill-accent: var(--c-l-purple);
-  --c-fill-accentAlt: var(--c-l-purple);
-  --c-fill-disabled: var(--c-l-grey-dark);
-  --c-fill-secondary: var(--c-l-turquoise);
-  --c-fill-subdued: var(--c-l-grey-light);
+  --c-icon-base: var(--c-l-graphite);
+  --c-icon-baseInteractive: var(--c-l-graphite);
+  --c-icon-baseInteractive--hover: var(--c-l-graphite);
+  --c-icon-subdued: var(--c-l-graphite-light);
+  --c-icon-subduedInteractive: var(--c-l-graphite-light);
+  --c-icon-subduedInteractive--hover: var(--c-l-graphite);
   --c-icon-accent: var(--c-l-purple);
   --c-icon-accentInteractive: var(--c-l-purple);
   --c-icon-accentInteractive--hover: var(--c-l-indigo);
   --c-icon-accentAlt: var(--c-l-white);
   --c-icon-accentAltInteractive: var(--c-l-white);
   --c-icon-accentAltInteractive--hover: var(--c-l-indigo);
-  --c-icon-base: var(--c-l-graphite);
-  --c-icon-baseInteractive: var(--c-l-graphite);
-  --c-icon-baseInteractive--hover: var(--c-l-graphite);
-  --c-icon-connect: var(--c-l-turquoise);
-  --c-icon-driver: var(--c-l-graphite);
+  --c-icon-info: var(--c-l-graphite-light);
   --c-icon-error: var(--c-l-red);
   --c-icon-errorAlt: var(--c-l-red);
-  --c-icon-info: var(--c-l-graphite-light);
-  --c-icon-infoAlt: var(--c-l-turquoise);
-  --c-icon-inversed: var(--c-l-white);
-  --c-icon-owner: var(--c-l-white);
-  --c-icon-subdued: var(--c-l-graphite-light);
-  --c-icon-subduedInteractive: var(--c-l-graphite-light);
-  --c-icon-subduedInteractive--hover: var(--c-l-graphite);
   --c-icon-success: var(--c-l-green);
   --c-icon-successAlt: var(--c-l-white);
+  --c-icon-connect: var(--c-l-turquoise);
+  --c-icon-driver: var(--c-l-graphite);
+  --c-icon-owner: var(--c-l-white);
   --c-icon-warning: var(--c-l-coral);
+  --c-icon-infoAlt: var(--c-l-turquoise);
+  --c-icon-inversed: var(--c-l-white);
+  --c-icon-disabled: var(--c-l-grey-lighter);
+  --c-stroke-base: var(--c-l-grey);
+  --c-stroke-baseInteractive: var(--c-l-grey);
+  --c-stroke-baseInteractive--hover: var(--c-l-graphite-light);
+  --c-stroke-baseInteractive--press: var(--c-l-graphite);
+  --c-stroke-subdued: var(--c-l-grey-light);
   --c-stroke-accent: var(--c-l-indigo);
   --c-stroke-accentInteractive: var(--c-l-indigo);
   --c-stroke-accentInteractive--hover: var(--c-l-indigo);
   --c-stroke-accentInteractive--press: var(--c-l-indigo-dark);
   --c-stroke-accentAlt: var(--c-l-purple);
-  --c-stroke-base: var(--c-l-grey);
-  --c-stroke-baseInteractive: var(--c-l-grey);
-  --c-stroke-baseInteractive--hover: var(--c-l-graphite-light);
-  --c-stroke-baseInteractive--press: var(--c-l-graphite);
   --c-stroke-error: var(--c-l-red);
   --c-stroke-errorAlt: var(--c-l-red);
-  --c-stroke-subdued: var(--c-l-grey-light);
   --c-stroke-success: var(--c-l-green);
   --c-stroke-successAlt: var(--c-l-green);
-  --c-text-accent: var(--c-l-purple);
-  --c-text-accentInteractive: var(--c-l-blue);
-  --c-text-accentInteractive--hover: var(--c-l-blue);
-  --c-text-accentAlt: var(--c-l-white);
-  --c-text-accentAltInteractive: var(--c-l-white);
-  --c-text-accentAltInteractive--hover: var(--c-l-indigo);
-  --c-text-base: var(--c-l-graphite);
-  --c-text-baseInteractive: var(--c-l-graphite);
-  --c-text-baseInteractive--hover: var(--c-l-graphite);
-  --c-text-connect: var(--c-l-turquoise);
-  --c-text-driver: var(--c-l-graphite);
-  --c-text-error: var(--c-l-red);
-  --c-text-errorAlt: var(--c-l-white);
-  --c-text-info: var(--c-l-graphite-light);
-  --c-text-infoAlt: var(--c-l-turquoise);
-  --c-text-inversed: var(--c-l-white);
-  --c-text-owner: var(--c-l-white);
-  --c-text-subdued: var(--c-l-graphite-light);
-  --c-text-subduedInteractive: var(--c-l-graphite-light);
-  --c-text-subduedInteractive--hover: var(--c-l-graphite);
-  --c-text-success: var(--c-l-green);
-  --c-text-successAlt: var(--c-l-white);
-  --c-text-warning: var(--c-l-coral);
+  --c-fill-base: var(--c-l-graphite);
+  --c-fill-secondary: var(--c-l-turquoise);
+  --c-fill-subdued: var(--c-l-grey-light);
+  --c-fill-accent: var(--c-l-purple);
+  --c-fill-accentAlt: var(--c-l-purple);
+  --c-fill-success: var(--c-l-red);
+  --c-fill-error: var(--c-l-green);
+  --c-fill-negative: var(--c-l-red);
+  --c-fill-neutral: var(--c-l-grey-lighter);
+  --c-fill-disabled: var(--c-l-grey-dark);
 }

package/styles/core/typography.scss

@@ -73,6 +73,8 @@ $text-variants-data: (
   @return nth(font-styles($name), 2);
 }
 
+// Those mixins are deprecated, please use the ones from ./text.scss
+
 @mixin text-style-hero-heading {
   // reset is necessary as we still apply default style to html tags such as hX
   margin-bottom: 0;
@@ -114,9 +116,9 @@ $text-variants-data: (
   margin-bottom: 0;
 
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: font-size(title-extralarge);
+  font-size: 2rem;
   font-weight: 700;
-  line-height: line-height(title-extralarge);
+  line-height: 2.25rem;
   color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
@@ -130,9 +132,9 @@ $text-variants-data: (
   margin-bottom: 0;
 
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: font-size(title-large);
+  font-size: 1.5rem;
   font-weight: 700;
-  line-height: line-height(title-large);
+  line-height: 1.75rem;
   color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
@@ -146,9 +148,9 @@ $text-variants-data: (
   margin-bottom: 0;
 
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: font-size(title);
+  font-size: 1.125rem;
   font-weight: 700;
-  line-height: line-height(title);
+  line-height: 1.25rem;
   color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
@@ -162,9 +164,9 @@ $text-variants-data: (
   margin-bottom: 0;
 
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: font-size(title-small);
+  font-size: 0.9375rem;
   font-weight: 600;
-  line-height: line-height(title-small);
+  line-height: 1.25rem;
   color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
@@ -178,9 +180,9 @@ $text-variants-data: (
   margin-bottom: 0;
 
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: font-size(title-tiny);
+  font-size: 0.9375rem;
   font-weight: 600;
-  line-height: line-height(title-tiny);
+  line-height: 1.25rem;
   color: color(indigo, dark);
 }
 
@@ -232,6 +234,8 @@ $text-variants-data: (
 }
 
 @mixin text-style-section-header {
+  @include text-color(subdued);
+
   // reset is necessary as we still apply default style to html tags such as hX
   margin-bottom: 0;
 
@@ -240,7 +244,5 @@ $text-variants-data: (
   font-size: font-size(section-header);
   line-height: line-height(section-header);
 
-  color: color(graphite, light);
-
   text-transform: uppercase;
 }

package/styles/fonts/README.md

@@ -1,4 +1,4 @@
-Our official branding font is a licensed paid web font, meaning that we can't distribute it through our NPM package (which uses the MIT license). So you won't find it in our design system, instead we put an [open font licensed](https://en.wikipedia.org/wiki/SIL_Open_Font_License) one as a placeholder ([source](https://fonts.google.com/specimen/Poppins)). If you want to use a diffrent brand font, you can alias that placeholder to use a font on your side instead.
+Our official branding font is a licensed paid web font, meaning that we can't distribute it through our NPM package (which uses the MIT license). So you won't find it in our design system, instead we put an [open font licensed](https://en.wikipedia.org/wiki/SIL_Open_Font_License) one as a placeholder (see `placeholder-BrandFont.woff` [source](https://fonts.google.com/specimen/Poppins)). In order to get that brand font work, you have to use an alias in your builder (like `resolve.alias` for `Webpack`). You can use the placeholder font we provide here or a custom font on your side.
 
 Here how we did it using our builder `Webpack`:
 
@@ -16,4 +16,4 @@ Here how we did it using our builder `Webpack`:
 }
 ```
 
-You can use another builder as long as it provides a way to alias an asset when importing it or just use the placeholder font.
+You can use another builder as long as it provides a way to alias an asset when importing it, then pass your custom font or the placeholder one `placeholder-BrandFont.woff` from this folder.

package/styles/global/typography.scss

@@ -73,6 +73,6 @@
   }
 
   &text-sectionHeader {
-    @include text-style-section-header;
+    @include c-text-section-heading;
   }
 }

package/styles/index.scss

@@ -140,7 +140,7 @@ table {
 
 // stylelint-disable-next-line no-duplicate-selectors
 body {
-  @include text-style-body();
+  @include c-text-body-md;
 
   font-family: font-family();