@drivy/cobalt 0.29.1 → 0.30.0

package/styles/components/Tag/index.scss

@@ -18,9 +18,7 @@
   }
 
   &Tag--important {
-    // TOFIX Move to errorAlt for bg and text
-    @include text-color(error);
-
-    background-color: lighten(color(red), 24);
+    @include bg-color(errorAlt);
+    @include text-color(errorAlt);
   }
 }

package/styles/core/_colors-map.scss

@@ -4,241 +4,241 @@
 /**********************************/
 $theme-colors-map: (
   background: (
-    primary: var(--c-l-grey-lighter),
-    secondary: var(--c-l-white),
+    primary: var(--c-white),
+    secondary: var(--c-white),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-grey-lighter)
+      DEFAULT: var(--c-white),
+      hover: var(--c-navy-50)
     ),
-    accent: var(--c-l-purple),
+    accent: var(--c-purple-500),
     accentInteractive: (
-      DEFAULT: var(--c-l-purple),
-      hover: var(--c-l-purple)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700)
     ),
-    accentAlt: var(--c-l-indigo),
+    accentAlt: var(--c-purple-100),
     accentAltInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo)
+      DEFAULT: var(--c-purple-100),
+      hover: var(--c-purpleLight-100)
     ),
-    info: var(--c-l-grey-lighter),
-    error: var(--c-l-red),
+    info: var(--c-yellow-100),
+    error: var(--c-red-500),
     errorInteractive: (
-      DEFAULT: var(--c-l-red),
-      hover: var(--c-l-red)
+      DEFAULT: var(--c-red-500),
+      hover: var(--c-red-700)
     ),
-    errorAlt: var(--c-l-graphite),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-graphite),
-    connect: var(--c-l-turquoise),
+    errorAlt: var(--c-red-100),
+    success: var(--c-green-700),
+    successAlt: var(--c-green-100),
+    connect: var(--c-turquoise-500),
     connectInteractive: (
-      DEFAULT: var(--c-l-turquoise),
-      hover: var(--c-l-turquoise)
-    ),
-    connectAlt: var(--c-l-grey-light),
-    driver: var(--c-l-deprecatedDriver),
-    owner: var(--c-l-indigo-dark),
-    disabled: var(--c-l-grey-light),
-    neutral: var(--c-l-grey-light),
-    neutralAlt: var(--c-l-grey-lighter),
-    seasonLow: var(--c-l-deprecatedSeasonLow),
-    seasonMedium: var(--c-l-deprecatedSeasonMedium),
-    seasonHigh: var(--c-l-deprecatedSeasonHigh),
-    seasonVeryHigh: var(--c-l-deprecatedSeasonVeryHigh)
+      DEFAULT: var(--c-turquoise-500),
+      hover: var(--c-turquoise-700)
+    ),
+    connectAlt: var(--c-turquoise-50),
+    driver: var(--c-yellow-500),
+    owner: var(--c-navy-700),
+    disabled: var(--c-navy-100),
+    neutral: var(--c-navy-100),
+    neutralAlt: var(--c-navy-50),
+    seasonLow: var(--c-season-100),
+    seasonMedium: var(--c-season-200),
+    seasonHigh: var(--c-season-300),
+    seasonVeryHigh: var(--c-season-400)
   ),
   text: (
-    base: var(--c-l-graphite),
+    base: var(--c-navy-700),
     baseInteractive: (
-      DEFAULT: var(--c-l-graphite),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-navy-700),
+      hover: var(--c-navy-300)
     ),
-    subdued: var(--c-l-graphite-light),
+    subdued: var(--c-navy-300),
     subduedInteractive: (
-      DEFAULT: var(--c-l-graphite-light),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-navy-300),
+      hover: var(--c-navy-500)
     ),
-    accent: var(--c-l-purple),
+    accent: var(--c-purple-500),
     accentInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700)
     ),
-    accentAlt: var(--c-l-white),
+    accentAlt: var(--c-purple-500),
     accentAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white)
-    ),
-    info: var(--c-l-graphite-light),
-    infoAlt: var(--c-l-turquoise),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-white),
-    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),
-    inversed: var(--c-l-white)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700)
+    ),
+    info: var(--c-yellow-900),
+    infoAlt: var(--c-yellow-500),
+    error: var(--c-red-500),
+    errorAlt: var(--c-red-500),
+    success: var(--c-green-700),
+    successAlt: var(--c-green-900),
+    warning: var(--c-orange-500),
+    connect: var(--c-turquoise-500),
+    driver: var(--c-navy-700),
+    owner: var(--c-white),
+    inversed: var(--c-white)
   ),
   buttonBackground: (
-    selected: var(--c-l-indigo),
+    selected: var(--c-purple-100),
     destructiveInteractive: (
-      DEFAULT: var(--c-l-red),
-      hover: var(--c-l-red),
-      press: var(--c-l-red)
+      DEFAULT: var(--c-red-100),
+      hover: var(--c-red-120),
+      press: var(--c-red-150)
     ),
-    disabled: var(--c-l-grey-lighter),
+    disabled: var(--c-navy-100),
     primaryInteractive: (
-      DEFAULT: var(--c-l-purple),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700),
+      press: var(--c-purple-900)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-white),
+      hover: var(--c-white),
+      press: var(--c-white)
     ),
-    success: var(--c-l-green),
+    success: var(--c-green-700),
     successAltInteractive: (
-      DEFAULT: var(--c-l-green),
-      hover: var(--c-l-green),
-      press: var(--c-l-green)
+      DEFAULT: var(--c-green-100),
+      hover: var(--c-green-120),
+      press: var(--c-green-150)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-white),
+      hover: var(--c-white),
+      press: var(--c-white)
     )
   ),
   buttonIcon: (
-    selected: var(--c-l-white),
+    selected: var(--c-purple-500),
     destructiveInteractive: (
-      DEFAULT: var(--c-l-red),
-      hover: var(--c-l-red),
-      press: var(--c-l-red)
+      DEFAULT: var(--c-red-500),
+      hover: var(--c-red-500),
+      press: var(--c-red-500)
     ),
-    disabled: var(--c-l-graphite-light),
+    disabled: var(--c-navy-300),
     primaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-white),
+      hover: var(--c-white),
+      press: var(--c-white)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700),
+      press: var(--c-purple-900)
     ),
-    success: var(--c-l-white),
+    success: var(--c-white),
     successAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-green-900),
+      hover: var(--c-green-900),
+      press: var(--c-green-900)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue),
-      press: var(--c-l-blue)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700),
+      press: var(--c-purple-900)
     )
   ),
   buttonLabel: (
-    selected: var(--c-l-white),
+    selected: var(--c-purple-500),
     destructiveInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-red-500),
+      hover: var(--c-red-500),
+      press: var(--c-red-500)
     ),
-    disabled: var(--c-l-graphite-light),
+    disabled: var(--c-navy-300),
     primaryInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-white),
+      hover: var(--c-white),
+      press: var(--c-white)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700),
+      press: var(--c-purple-900)
     ),
-    success: var(--c-l-white),
+    success: var(--c-white),
     successAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white),
-      press: var(--c-l-white)
+      DEFAULT: var(--c-green-900),
+      hover: var(--c-green-900),
+      press: var(--c-green-900)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-l-blue),
-      hover: var(--c-l-blue),
-      press: var(--c-l-blue)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700),
+      press: var(--c-purple-900)
     )
   ),
   icon: (
-    base: var(--c-l-graphite),
+    base: var(--c-navy-500),
     baseInteractive: (
-      DEFAULT: var(--c-l-graphite),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-navy-500),
+      hover: var(--c-navy-700)
     ),
-    subdued: var(--c-l-graphite-light),
+    subdued: var(--c-navy-300),
     subduedInteractive: (
-      DEFAULT: var(--c-l-graphite-light),
-      hover: var(--c-l-graphite)
+      DEFAULT: var(--c-navy-300),
+      hover: var(--c-navy-500)
     ),
-    accent: var(--c-l-purple),
+    accent: var(--c-purple-500),
     accentInteractive: (
-      DEFAULT: var(--c-l-purple),
-      hover: var(--c-l-indigo)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700)
     ),
-    accentAlt: var(--c-l-white),
+    accentAlt: var(--c-purple-500),
     accentAltInteractive: (
-      DEFAULT: var(--c-l-white),
-      hover: var(--c-l-white)
-    ),
-    info: var(--c-l-graphite-light),
-    infoAlt: var(--c-l-turquoise),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-red),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-white),
-    warning: var(--c-l-coral),
-    connect: var(--c-l-turquoise),
-    connectAlt: var(--c-l-turquoise),
-    driver: var(--c-l-graphite),
-    owner: var(--c-l-white),
-    inversed: var(--c-l-white),
-    disabled: var(--c-l-grey-lighter)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700)
+    ),
+    info: var(--c-yellow-900),
+    infoAlt: var(--c-yellow-500),
+    error: var(--c-red-500),
+    errorAlt: var(--c-red-500),
+    success: var(--c-green-700),
+    successAlt: var(--c-green-900),
+    warning: var(--c-orange-500),
+    connect: var(--c-turquoise-500),
+    connectAlt: var(--c-turquoise-900),
+    driver: var(--c-navy-700),
+    owner: var(--c-white),
+    inversed: var(--c-white),
+    disabled: var(--c-navy-100)
   ),
   stroke: (
-    base: var(--c-l-grey),
+    base: var(--c-navy-100),
     baseInteractive: (
-      DEFAULT: var(--c-l-grey),
-      hover: var(--c-l-graphite-light),
-      press: var(--c-l-graphite)
+      DEFAULT: var(--c-navy-100),
+      hover: var(--c-navy-300),
+      press: var(--c-navy-500)
     ),
-    strong: var(--c-l-grey-dark),
+    strong: var(--c-navy-300),
     strongInteractive: (
-      DEFAULT: var(--c-l-grey-dark),
-      hover: var(--c-l-graphite-light),
-      press: var(--c-l-graphite)
+      DEFAULT: var(--c-navy-300),
+      hover: var(--c-navy-500),
+      press: var(--c-navy-700)
     ),
-    subdued: var(--c-l-grey-light),
-    accent: var(--c-l-indigo),
+    subdued: var(--c-navy-100),
+    accent: var(--c-purple-500),
     accentInteractive: (
-      DEFAULT: var(--c-l-indigo),
-      hover: var(--c-l-indigo),
-      press: var(--c-l-indigo-dark)
-    ),
-    accentAlt: var(--c-l-purple),
-    error: var(--c-l-red),
-    errorAlt: var(--c-l-red),
-    success: var(--c-l-green),
-    successAlt: var(--c-l-green)
+      DEFAULT: var(--c-purple-500),
+      hover: var(--c-purple-700),
+      press: var(--c-purple-900)
+    ),
+    accentAlt: var(--c-purple-300),
+    error: var(--c-red-500),
+    errorAlt: var(--c-red-500),
+    success: var(--c-green-500),
+    successAlt: var(--c-green-500)
   ),
   fill: (
-    base: var(--c-l-graphite),
-    secondary: var(--c-l-turquoise),
-    subdued: var(--c-l-grey-light),
-    accent: var(--c-l-purple),
-    accentAlt: var(--c-l-purple),
-    error: var(--c-l-red),
-    negative: var(--c-l-red),
-    success: var(--c-l-green),
-    disabled: var(--c-l-grey-dark),
-    neutral: var(--c-l-grey-lighter)
+    base: var(--c-navy-500),
+    secondary: var(--c-yellow-500),
+    subdued: var(--c-navy-100),
+    accent: var(--c-purple-500),
+    accentAlt: var(--c-purple-100),
+    error: var(--c-red-500),
+    negative: var(--c-red-150),
+    success: var(--c-green-500),
+    disabled: var(--c-navy-300),
+    neutral: var(--c-navy-50)
   )
 );

package/styles/core/text.scss

@@ -2,11 +2,11 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 2.25rem;
   font-weight: 700;
-  line-height: 2.5rem;
+  line-height: 125%;
+  letter-spacing: -0.5px;
 
   @include breakpoint($from: sm) {
     font-size: 3.5rem;
-    line-height: 3.75rem;
   }
 }
 
@@ -14,11 +14,11 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  line-height: 1.5rem;
+  line-height: 125%;
+  letter-spacing: -0.5px;
 
   @include breakpoint($from: sm) {
     font-size: 1.75rem;
-    line-height: 2rem;
   }
 }
 
@@ -26,11 +26,12 @@
   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;
+  line-height: 125%;
+  letter-spacing: -0.04rem;
 
   @include breakpoint($from: sm) {
     font-size: 2.5rem;
-    line-height: 2.75rem;
+    letter-spacing: -0.05rem;
   }
 }
 
@@ -38,43 +39,47 @@
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
-  line-height: 1.75rem;
+  line-height: 125%;
+  letter-spacing: -0.04rem;
 
   @include breakpoint($from: sm) {
     font-size: 2rem;
-    line-height: 2.25rem;
+    letter-spacing: -0.04rem;
   }
 }
 
 @mixin c-text-title-md {
   font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   font-weight: 700;
-  line-height: 1.25rem;
+  line-height: 125%;
+  letter-spacing: NaNrem;
 
   @include breakpoint($from: sm) {
     font-size: 1.5rem;
-    line-height: 1.75rem;
+    letter-spacing: -0.03rem;
   }
 }
 
 @mixin c-text-title-sm {
   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.9375rem;
+  font-size: 1rem;
   font-weight: 600;
-  line-height: 1.25rem;
+  line-height: 125%;
+  letter-spacing: -0.02rem;
 
   @include breakpoint($from: sm) {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
+    font-size: 1.25rem;
+    letter-spacing: -0.025rem;
   }
 }
 
 @mixin c-text-title-xs {
   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.9375rem;
+  font-size: 1rem;
   font-weight: 600;
-  line-height: 1.25rem;
+  line-height: 125%;
+  letter-spacing: -0.02rem;
 }
 
 @mixin c-text-body-lg {
@@ -85,7 +90,7 @@
 
 @mixin c-text-body-md {
   font-family: BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.9375rem;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 
@@ -99,7 +104,20 @@
   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;
+  line-height: 175%;
   text-transform: uppercase;
-  color: var(--c-l-graphite-light);
+  color: var(--c-text-subdued);
+  letter-spacing: -0.2px;
+}
+
+@mixin c-text-link {
+  @include text-color(baseInteractive);
+  text-decoration: underline;
+  font-weight: 500;
+  text-underline-offset: 2px;
+}
+
+// Default link styles
+a {
+  @include c-text-link;
 }