@drivy/cobalt 0.29.1 → 0.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.29.1",
+  "version": "0.29.2",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",

package/styles/core/text.scss

@@ -101,5 +101,5 @@
   font-weight: 700;
   line-height: 1.5rem;
   text-transform: uppercase;
-  color: var(--c-l-graphite-light);
+  color: var(--c-text-subdued);
 }

package/utilities.css

@@ -3921,7 +3921,7 @@
   line-height: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
-  color: var(--c-l-graphite-light);
+  color: var(--c-text-subdued);
 }
 
 .c-text-title-xl {
@@ -4142,375 +4142,375 @@
 }
 
 .c-border-base {
-  border-color: var(--c-l-grey);
+  border-color: var(--c-stroke-base);
 }
 
 .c-border-baseInteractive {
-  border-color: var(--c-l-grey);
+  border-color: var(--c-stroke-baseInteractive);
 }
 
 .c-border-baseInteractive:hover {
-  border-color: var(--c-l-graphite-light);
+  border-color: var(--c-stroke-baseInteractive--hover);
 }
 
 .c-border-baseInteractive:focus {
-  border-color: var(--c-l-graphite-light);
+  border-color: var(--c-stroke-baseInteractive--hover);
 }
 
 .c-border-baseInteractive:active {
-  border-color: var(--c-l-graphite);
+  border-color: var(--c-stroke-baseInteractive--press);
 }
 
 .c-border-strong {
-  border-color: var(--c-l-grey-dark);
+  border-color: var(--c-stroke-strong);
 }
 
 .c-border-strongInteractive {
-  border-color: var(--c-l-grey-dark);
+  border-color: var(--c-stroke-strongInteractive);
 }
 
 .c-border-strongInteractive:hover {
-  border-color: var(--c-l-graphite-light);
+  border-color: var(--c-stroke-strongInteractive--hover);
 }
 
 .c-border-strongInteractive:focus {
-  border-color: var(--c-l-graphite-light);
+  border-color: var(--c-stroke-strongInteractive--hover);
 }
 
 .c-border-strongInteractive:active {
-  border-color: var(--c-l-graphite);
+  border-color: var(--c-stroke-strongInteractive--press);
 }
 
 .c-border-subdued {
-  border-color: var(--c-l-grey-light);
+  border-color: var(--c-stroke-subdued);
 }
 
 .c-border-accent {
-  border-color: var(--c-l-indigo);
+  border-color: var(--c-stroke-accent);
 }
 
 .c-border-accentInteractive {
-  border-color: var(--c-l-indigo);
+  border-color: var(--c-stroke-accentInteractive);
 }
 
 .c-border-accentInteractive:hover {
-  border-color: var(--c-l-indigo);
+  border-color: var(--c-stroke-accentInteractive--hover);
 }
 
 .c-border-accentInteractive:focus {
-  border-color: var(--c-l-indigo);
+  border-color: var(--c-stroke-accentInteractive--hover);
 }
 
 .c-border-accentInteractive:active {
-  border-color: var(--c-l-indigo-dark);
+  border-color: var(--c-stroke-accentInteractive--press);
 }
 
 .c-border-accentAlt {
-  border-color: var(--c-l-purple);
+  border-color: var(--c-stroke-accentAlt);
 }
 
 .c-border-error {
-  border-color: var(--c-l-red);
+  border-color: var(--c-stroke-error);
 }
 
 .c-border-errorAlt {
-  border-color: var(--c-l-red);
+  border-color: var(--c-stroke-errorAlt);
 }
 
 .c-border-success {
-  border-color: var(--c-l-green);
+  border-color: var(--c-stroke-success);
 }
 
 .c-border-successAlt {
-  border-color: var(--c-l-green);
+  border-color: var(--c-stroke-successAlt);
 }
 
 .c-bg-primary {
-  background-color: var(--c-l-grey-lighter);
+  background-color: var(--c-background-primary);
 }
 
 .c-bg-secondary {
-  background-color: var(--c-l-white);
+  background-color: var(--c-background-secondary);
 }
 
 .c-bg-secondaryInteractive {
-  background-color: var(--c-l-white);
+  background-color: var(--c-background-secondaryInteractive);
 }
 
 .c-bg-secondaryInteractive:hover {
-  background-color: var(--c-l-grey-lighter);
+  background-color: var(--c-background-secondaryInteractive--hover);
 }
 
 .c-bg-secondaryInteractive:focus {
-  background-color: var(--c-l-grey-lighter);
+  background-color: var(--c-background-secondaryInteractive--hover);
 }
 
 .c-bg-accent {
-  background-color: var(--c-l-purple);
+  background-color: var(--c-background-accent);
 }
 
 .c-bg-accentInteractive {
-  background-color: var(--c-l-purple);
+  background-color: var(--c-background-accentInteractive);
 }
 
 .c-bg-accentInteractive:hover {
-  background-color: var(--c-l-purple);
+  background-color: var(--c-background-accentInteractive--hover);
 }
 
 .c-bg-accentInteractive:focus {
-  background-color: var(--c-l-purple);
+  background-color: var(--c-background-accentInteractive--hover);
 }
 
 .c-bg-accentAlt {
-  background-color: var(--c-l-indigo);
+  background-color: var(--c-background-accentAlt);
 }
 
 .c-bg-accentAltInteractive {
-  background-color: var(--c-l-indigo);
+  background-color: var(--c-background-accentAltInteractive);
 }
 
 .c-bg-accentAltInteractive:hover {
-  background-color: var(--c-l-indigo);
+  background-color: var(--c-background-accentAltInteractive--hover);
 }
 
 .c-bg-accentAltInteractive:focus {
-  background-color: var(--c-l-indigo);
+  background-color: var(--c-background-accentAltInteractive--hover);
 }
 
 .c-bg-info {
-  background-color: var(--c-l-grey-lighter);
+  background-color: var(--c-background-info);
 }
 
 .c-bg-error {
-  background-color: var(--c-l-red);
+  background-color: var(--c-background-error);
 }
 
 .c-bg-errorInteractive {
-  background-color: var(--c-l-red);
+  background-color: var(--c-background-errorInteractive);
 }
 
 .c-bg-errorInteractive:hover {
-  background-color: var(--c-l-red);
+  background-color: var(--c-background-errorInteractive--hover);
 }
 
 .c-bg-errorInteractive:focus {
-  background-color: var(--c-l-red);
+  background-color: var(--c-background-errorInteractive--hover);
 }
 
 .c-bg-errorAlt {
-  background-color: var(--c-l-graphite);
+  background-color: var(--c-background-errorAlt);
 }
 
 .c-bg-success {
-  background-color: var(--c-l-green);
+  background-color: var(--c-background-success);
 }
 
 .c-bg-successAlt {
-  background-color: var(--c-l-graphite);
+  background-color: var(--c-background-successAlt);
 }
 
 .c-bg-connect {
-  background-color: var(--c-l-turquoise);
+  background-color: var(--c-background-connect);
 }
 
 .c-bg-connectInteractive {
-  background-color: var(--c-l-turquoise);
+  background-color: var(--c-background-connectInteractive);
 }
 
 .c-bg-connectInteractive:hover {
-  background-color: var(--c-l-turquoise);
+  background-color: var(--c-background-connectInteractive--hover);
 }
 
 .c-bg-connectInteractive:focus {
-  background-color: var(--c-l-turquoise);
+  background-color: var(--c-background-connectInteractive--hover);
 }
 
 .c-bg-connectAlt {
-  background-color: var(--c-l-grey-light);
+  background-color: var(--c-background-connectAlt);
 }
 
 .c-bg-driver {
-  background-color: var(--c-l-deprecatedDriver);
+  background-color: var(--c-background-driver);
 }
 
 .c-bg-owner {
-  background-color: var(--c-l-indigo-dark);
+  background-color: var(--c-background-owner);
 }
 
 .c-bg-disabled {
-  background-color: var(--c-l-grey-light);
+  background-color: var(--c-background-disabled);
 }
 
 .c-bg-neutral {
-  background-color: var(--c-l-grey-light);
+  background-color: var(--c-background-neutral);
 }
 
 .c-bg-neutralAlt {
-  background-color: var(--c-l-grey-lighter);
+  background-color: var(--c-background-neutralAlt);
 }
 
 .c-bg-seasonLow {
-  background-color: var(--c-l-deprecatedSeasonLow);
+  background-color: var(--c-background-seasonLow);
 }
 
 .c-bg-seasonMedium {
-  background-color: var(--c-l-deprecatedSeasonMedium);
+  background-color: var(--c-background-seasonMedium);
 }
 
 .c-bg-seasonHigh {
-  background-color: var(--c-l-deprecatedSeasonHigh);
+  background-color: var(--c-background-seasonHigh);
 }
 
 .c-bg-seasonVeryHigh {
-  background-color: var(--c-l-deprecatedSeasonVeryHigh);
+  background-color: var(--c-background-seasonVeryHigh);
 }
 
 .c-bg-fill-base {
-  background-color: var(--c-l-graphite);
+  background-color: var(--c-fill-base);
 }
 
 .c-bg-fill-secondary {
-  background-color: var(--c-l-turquoise);
+  background-color: var(--c-fill-secondary);
 }
 
 .c-bg-fill-subdued {
-  background-color: var(--c-l-grey-light);
+  background-color: var(--c-fill-subdued);
 }
 
 .c-bg-fill-accent {
-  background-color: var(--c-l-purple);
+  background-color: var(--c-fill-accent);
 }
 
 .c-bg-fill-accentAlt {
-  background-color: var(--c-l-purple);
+  background-color: var(--c-fill-accentAlt);
 }
 
 .c-bg-fill-error {
-  background-color: var(--c-l-red);
+  background-color: var(--c-fill-error);
 }
 
 .c-bg-fill-negative {
-  background-color: var(--c-l-red);
+  background-color: var(--c-fill-negative);
 }
 
 .c-bg-fill-success {
-  background-color: var(--c-l-green);
+  background-color: var(--c-fill-success);
 }
 
 .c-bg-fill-disabled {
-  background-color: var(--c-l-grey-dark);
+  background-color: var(--c-fill-disabled);
 }
 
 .c-bg-fill-neutral {
-  background-color: var(--c-l-grey-lighter);
+  background-color: var(--c-fill-neutral);
 }
 
 .c-text-base {
-  color: var(--c-l-graphite);
+  color: var(--c-text-base);
 }
 
 .c-text-baseInteractive {
-  color: var(--c-l-graphite);
+  color: var(--c-text-baseInteractive);
 }
 
 .c-text-baseInteractive:hover {
-  color: var(--c-l-graphite);
+  color: var(--c-text-baseInteractive--hover);
 }
 
 .c-text-baseInteractive:focus {
-  color: var(--c-l-graphite);
+  color: var(--c-text-baseInteractive--hover);
 }
 
 .c-text-subdued {
-  color: var(--c-l-graphite-light);
+  color: var(--c-text-subdued);
 }
 
 .c-text-subduedInteractive {
-  color: var(--c-l-graphite-light);
+  color: var(--c-text-subduedInteractive);
 }
 
 .c-text-subduedInteractive:hover {
-  color: var(--c-l-graphite);
+  color: var(--c-text-subduedInteractive--hover);
 }
 
 .c-text-subduedInteractive:focus {
-  color: var(--c-l-graphite);
+  color: var(--c-text-subduedInteractive--hover);
 }
 
 .c-text-accent {
-  color: var(--c-l-purple);
+  color: var(--c-text-accent);
 }
 
 .c-text-accentInteractive {
-  color: var(--c-l-blue);
+  color: var(--c-text-accentInteractive);
 }
 
 .c-text-accentInteractive:hover {
-  color: var(--c-l-blue);
+  color: var(--c-text-accentInteractive--hover);
 }
 
 .c-text-accentInteractive:focus {
-  color: var(--c-l-blue);
+  color: var(--c-text-accentInteractive--hover);
 }
 
 .c-text-accentAlt {
-  color: var(--c-l-white);
+  color: var(--c-text-accentAlt);
 }
 
 .c-text-accentAltInteractive {
-  color: var(--c-l-white);
+  color: var(--c-text-accentAltInteractive);
 }
 
 .c-text-accentAltInteractive:hover {
-  color: var(--c-l-white);
+  color: var(--c-text-accentAltInteractive--hover);
 }
 
 .c-text-accentAltInteractive:focus {
-  color: var(--c-l-white);
+  color: var(--c-text-accentAltInteractive--hover);
 }
 
 .c-text-info {
-  color: var(--c-l-graphite-light);
+  color: var(--c-text-info);
 }
 
 .c-text-infoAlt {
-  color: var(--c-l-turquoise);
+  color: var(--c-text-infoAlt);
 }
 
 .c-text-error {
-  color: var(--c-l-red);
+  color: var(--c-text-error);
 }
 
 .c-text-errorAlt {
-  color: var(--c-l-white);
+  color: var(--c-text-errorAlt);
 }
 
 .c-text-success {
-  color: var(--c-l-green);
+  color: var(--c-text-success);
 }
 
 .c-text-successAlt {
-  color: var(--c-l-white);
+  color: var(--c-text-successAlt);
 }
 
 .c-text-warning {
-  color: var(--c-l-coral);
+  color: var(--c-text-warning);
 }
 
 .c-text-connect {
-  color: var(--c-l-turquoise);
+  color: var(--c-text-connect);
 }
 
 .c-text-driver {
-  color: var(--c-l-graphite);
+  color: var(--c-text-driver);
 }
 
 .c-text-owner {
-  color: var(--c-l-white);
+  color: var(--c-text-owner);
 }
 
 .c-text-inversed {
-  color: var(--c-l-white);
+  color: var(--c-text-inversed);
 }
 
 @media (min-width: 480px) {
@@ -6481,7 +6481,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: var(--c-l-graphite-light);
+    color: var(--c-text-subdued);
   }
 
   .xs\:c-text-title-xl {
@@ -8538,7 +8538,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: var(--c-l-graphite-light);
+    color: var(--c-text-subdued);
   }
 
   .sm\:c-text-title-xl {
@@ -10595,7 +10595,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: var(--c-l-graphite-light);
+    color: var(--c-text-subdued);
   }
 
   .md\:c-text-title-xl {
@@ -12652,7 +12652,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: var(--c-l-graphite-light);
+    color: var(--c-text-subdued);
   }
 
   .lg\:c-text-title-xl {