@drivy/cobalt 0.28.3 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.28.3",
+  "version": "0.29.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -65,7 +65,7 @@
     "@types/react": "18.0.26",
     "@whitespace/storybook-addon-html": "^5.1.1",
     "autoprefixer": "10.4.13",
-    "core-js": "3.27.1",
+    "core-js": "3.27.2",
     "css-loader": "6.7.3",
     "eslint": "8.32.0",
     "file-loader": "6.2.0",

package/styles/components/Form/Slider.scss

@@ -21,7 +21,7 @@
       @include fill-bg-color(subdued);
     }
 
-    [data-reach-slider-track-highlight] {
+    [data-reach-slider-range] {
       @include fill-bg-color(accent);
     }
 

package/styles/components/Popover/index.scss

@@ -13,8 +13,6 @@
     padding: 0;
     min-width: 16rem;
 
-    overflow: hidden;
-
     border-radius: border-radius(lg);
   }
 }

package/styles/core/text.scss

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

package/utilities.css

@@ -3650,7 +3650,7 @@
   line-height: 1.5rem;
   font-weight: 700;
   text-transform: uppercase;
-  color: #757575
+  color: var(--c-l-graphite-light)
 }
 
 .c-text-title-xl {
@@ -3871,375 +3871,375 @@
 }
 
 .c-border-base {
-  border-color: #dbd8dc
+  border-color: var(--c-l-grey)
 }
 
 .c-border-baseInteractive {
-  border-color: #dbd8dc
+  border-color: var(--c-l-grey)
 }
 
 .c-border-baseInteractive:hover {
-  border-color: #757575
+  border-color: var(--c-l-graphite-light)
 }
 
 .c-border-baseInteractive:focus {
-  border-color: #757575
+  border-color: var(--c-l-graphite-light)
 }
 
 .c-border-baseInteractive:active {
-  border-color: #333
+  border-color: var(--c-l-graphite)
 }
 
 .c-border-strong {
-  border-color: #a49da7
+  border-color: var(--c-l-grey-dark)
 }
 
 .c-border-strongInteractive {
-  border-color: #a49da7
+  border-color: var(--c-l-grey-dark)
 }
 
 .c-border-strongInteractive:hover {
-  border-color: #757575
+  border-color: var(--c-l-graphite-light)
 }
 
 .c-border-strongInteractive:focus {
-  border-color: #757575
+  border-color: var(--c-l-graphite-light)
 }
 
 .c-border-strongInteractive:active {
-  border-color: #333
+  border-color: var(--c-l-graphite)
 }
 
 .c-border-subdued {
-  border-color: #edebed
+  border-color: var(--c-l-grey-light)
 }
 
 .c-border-accent {
-  border-color: #61366b
+  border-color: var(--c-l-indigo)
 }
 
 .c-border-accentInteractive {
-  border-color: #61366b
+  border-color: var(--c-l-indigo)
 }
 
 .c-border-accentInteractive:hover {
-  border-color: #61366b
+  border-color: var(--c-l-indigo)
 }
 
 .c-border-accentInteractive:focus {
-  border-color: #61366b
+  border-color: var(--c-l-indigo)
 }
 
 .c-border-accentInteractive:active {
-  border-color: #390446
+  border-color: var(--c-l-indigo-dark)
 }
 
 .c-border-accentAlt {
-  border-color: #b01aa7
+  border-color: var(--c-l-purple)
 }
 
 .c-border-error {
-  border-color: #ff7378
+  border-color: var(--c-l-red)
 }
 
 .c-border-errorAlt {
-  border-color: #ff7378
+  border-color: var(--c-l-red)
 }
 
 .c-border-success {
-  border-color: #00da94
+  border-color: var(--c-l-green)
 }
 
 .c-border-successAlt {
-  border-color: #00da94
+  border-color: var(--c-l-green)
 }
 
 .c-bg-primary {
-  background-color: #f8f7f8
+  background-color: var(--c-l-grey-lighter)
 }
 
 .c-bg-secondary {
-  background-color: #fff
+  background-color: var(--c-l-white)
 }
 
 .c-bg-secondaryInteractive {
-  background-color: #fff
+  background-color: var(--c-l-white)
 }
 
 .c-bg-secondaryInteractive:hover {
-  background-color: #f8f7f8
+  background-color: var(--c-l-grey-lighter)
 }
 
 .c-bg-secondaryInteractive:focus {
-  background-color: #f8f7f8
+  background-color: var(--c-l-grey-lighter)
 }
 
 .c-bg-accent {
-  background-color: #b01aa7
+  background-color: var(--c-l-purple)
 }
 
 .c-bg-accentInteractive {
-  background-color: #b01aa7
+  background-color: var(--c-l-purple)
 }
 
 .c-bg-accentInteractive:hover {
-  background-color: #b01aa7
+  background-color: var(--c-l-purple)
 }
 
 .c-bg-accentInteractive:focus {
-  background-color: #b01aa7
+  background-color: var(--c-l-purple)
 }
 
 .c-bg-accentAlt {
-  background-color: #61366b
+  background-color: var(--c-l-indigo)
 }
 
 .c-bg-accentAltInteractive {
-  background-color: #61366b
+  background-color: var(--c-l-indigo)
 }
 
 .c-bg-accentAltInteractive:hover {
-  background-color: #61366b
+  background-color: var(--c-l-indigo)
 }
 
 .c-bg-accentAltInteractive:focus {
-  background-color: #61366b
+  background-color: var(--c-l-indigo)
 }
 
 .c-bg-info {
-  background-color: #f8f7f8
+  background-color: var(--c-l-grey-lighter)
 }
 
 .c-bg-error {
-  background-color: #ff7378
+  background-color: var(--c-l-red)
 }
 
 .c-bg-errorInteractive {
-  background-color: #ff7378
+  background-color: var(--c-l-red)
 }
 
 .c-bg-errorInteractive:hover {
-  background-color: #ff7378
+  background-color: var(--c-l-red)
 }
 
 .c-bg-errorInteractive:focus {
-  background-color: #ff7378
+  background-color: var(--c-l-red)
 }
 
 .c-bg-errorAlt {
-  background-color: #333
+  background-color: var(--c-l-graphite)
 }
 
 .c-bg-success {
-  background-color: #00da94
+  background-color: var(--c-l-green)
 }
 
 .c-bg-successAlt {
-  background-color: #333
+  background-color: var(--c-l-graphite)
 }
 
 .c-bg-connect {
-  background-color: #5ecbdd
+  background-color: var(--c-l-turquoise)
 }
 
 .c-bg-connectInteractive {
-  background-color: #5ecbdd
+  background-color: var(--c-l-turquoise)
 }
 
 .c-bg-connectInteractive:hover {
-  background-color: #5ecbdd
+  background-color: var(--c-l-turquoise)
 }
 
 .c-bg-connectInteractive:focus {
-  background-color: #5ecbdd
+  background-color: var(--c-l-turquoise)
 }
 
 .c-bg-connectAlt {
-  background-color: #edebed
+  background-color: var(--c-l-grey-light)
 }
 
 .c-bg-driver {
-  background-color: #ffd988
+  background-color: var(--c-l-deprecatedDriver)
 }
 
 .c-bg-owner {
-  background-color: #390446
+  background-color: var(--c-l-indigo-dark)
 }
 
 .c-bg-disabled {
-  background-color: #edebed
+  background-color: var(--c-l-grey-light)
 }
 
 .c-bg-neutral {
-  background-color: #edebed
+  background-color: var(--c-l-grey-light)
 }
 
 .c-bg-neutralAlt {
-  background-color: #f8f7f8
+  background-color: var(--c-l-grey-lighter)
 }
 
 .c-bg-seasonLow {
-  background-color: #BDFFAC
+  background-color: var(--c-l-deprecatedSeasonLow)
 }
 
 .c-bg-seasonMedium {
-  background-color: #94EA84
+  background-color: var(--c-l-deprecatedSeasonMedium)
 }
 
 .c-bg-seasonHigh {
-  background-color: #73C865
+  background-color: var(--c-l-deprecatedSeasonHigh)
 }
 
 .c-bg-seasonVeryHigh {
-  background-color: #54A949
+  background-color: var(--c-l-deprecatedSeasonVeryHigh)
 }
 
 .c-bg-fill-base {
-  background-color: #333
+  background-color: var(--c-l-graphite)
 }
 
 .c-bg-fill-secondary {
-  background-color: #5ecbdd
+  background-color: var(--c-l-turquoise)
 }
 
 .c-bg-fill-subdued {
-  background-color: #edebed
+  background-color: var(--c-l-grey-light)
 }
 
 .c-bg-fill-accent {
-  background-color: #b01aa7
+  background-color: var(--c-l-purple)
 }
 
 .c-bg-fill-accentAlt {
-  background-color: #b01aa7
+  background-color: var(--c-l-purple)
 }
 
 .c-bg-fill-error {
-  background-color: #ff7378
+  background-color: var(--c-l-red)
 }
 
 .c-bg-fill-negative {
-  background-color: #ff7378
+  background-color: var(--c-l-red)
 }
 
 .c-bg-fill-success {
-  background-color: #00da94
+  background-color: var(--c-l-green)
 }
 
 .c-bg-fill-disabled {
-  background-color: #a49da7
+  background-color: var(--c-l-grey-dark)
 }
 
 .c-bg-fill-neutral {
-  background-color: #f8f7f8
+  background-color: var(--c-l-grey-lighter)
 }
 
 .c-text-base {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-baseInteractive {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-baseInteractive:hover {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-baseInteractive:focus {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-subdued {
-  color: #757575
+  color: var(--c-l-graphite-light)
 }
 
 .c-text-subduedInteractive {
-  color: #757575
+  color: var(--c-l-graphite-light)
 }
 
 .c-text-subduedInteractive:hover {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-subduedInteractive:focus {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-accent {
-  color: #b01aa7
+  color: var(--c-l-purple)
 }
 
 .c-text-accentInteractive {
-  color: #2ea2ea
+  color: var(--c-l-blue)
 }
 
 .c-text-accentInteractive:hover {
-  color: #2ea2ea
+  color: var(--c-l-blue)
 }
 
 .c-text-accentInteractive:focus {
-  color: #2ea2ea
+  color: var(--c-l-blue)
 }
 
 .c-text-accentAlt {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-accentAltInteractive {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-accentAltInteractive:hover {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-accentAltInteractive:focus {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-info {
-  color: #757575
+  color: var(--c-l-graphite-light)
 }
 
 .c-text-infoAlt {
-  color: #5ecbdd
+  color: var(--c-l-turquoise)
 }
 
 .c-text-error {
-  color: #ff7378
+  color: var(--c-l-red)
 }
 
 .c-text-errorAlt {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-success {
-  color: #00da94
+  color: var(--c-l-green)
 }
 
 .c-text-successAlt {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-warning {
-  color: #ffa484
+  color: var(--c-l-coral)
 }
 
 .c-text-connect {
-  color: #5ecbdd
+  color: var(--c-l-turquoise)
 }
 
 .c-text-driver {
-  color: #333
+  color: var(--c-l-graphite)
 }
 
 .c-text-owner {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 .c-text-inversed {
-  color: #fff
+  color: var(--c-l-white)
 }
 
 @media (min-width: 480px) {
@@ -6210,7 +6210,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: #757575
+    color: var(--c-l-graphite-light)
   }
 
   .xs\:c-text-title-xl {
@@ -8267,7 +8267,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: #757575
+    color: var(--c-l-graphite-light)
   }
 
   .sm\:c-text-title-xl {
@@ -10324,7 +10324,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: #757575
+    color: var(--c-l-graphite-light)
   }
 
   .md\:c-text-title-xl {
@@ -12381,7 +12381,7 @@
     line-height: 1.5rem;
     font-weight: 700;
     text-transform: uppercase;
-    color: #757575
+    color: var(--c-l-graphite-light)
   }
 
   .lg\:c-text-title-xl {