@drivy/cobalt 0.26.3 → 0.28.0

package/cjs/tokens/colors.js

@@ -33,6 +33,10 @@ const green = {
 const blue = "#2ea2ea";
 const deprecatedBlueGhost = "#2ea2ea0f";
 const deprecatedDriver = "#ffd988";
+const deprecatedSeasonLow = "#BDFFAC";
+const deprecatedSeasonMedium = "#94EA84";
+const deprecatedSeasonHigh = "#73C865";
+const deprecatedSeasonVeryHigh = "#54A949";
 var _colors = {
 	white: white,
 	grey: grey,
@@ -46,7 +50,11 @@ var _colors = {
 	green: green,
 	blue: blue,
 	deprecatedBlueGhost: deprecatedBlueGhost,
-	deprecatedDriver: deprecatedDriver
+	deprecatedDriver: deprecatedDriver,
+	deprecatedSeasonLow: deprecatedSeasonLow,
+	deprecatedSeasonMedium: deprecatedSeasonMedium,
+	deprecatedSeasonHigh: deprecatedSeasonHigh,
+	deprecatedSeasonVeryHigh: deprecatedSeasonVeryHigh
 };
 
 exports.amber = amber;
@@ -55,6 +63,10 @@ exports.coral = coral;
 exports["default"] = _colors;
 exports.deprecatedBlueGhost = deprecatedBlueGhost;
 exports.deprecatedDriver = deprecatedDriver;
+exports.deprecatedSeasonHigh = deprecatedSeasonHigh;
+exports.deprecatedSeasonLow = deprecatedSeasonLow;
+exports.deprecatedSeasonMedium = deprecatedSeasonMedium;
+exports.deprecatedSeasonVeryHigh = deprecatedSeasonVeryHigh;
 exports.graphite = graphite;
 exports.green = green;
 exports.grey = grey;

package/cjs/tokens/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/tokens/palette.js

@@ -24,6 +24,7 @@ const green = {
 const navy = {
 	"50": "#F1F1F4",
 	"100": "#E3E2E8",
+	"200": "#BBB8C7",
 	"300": "#7B728E",
 	"500": "#362E53",
 	"700": "#261A48",
@@ -79,6 +80,16 @@ const yellow = {
 	"900": "#75592D",
 	"1000": "#3B2E17"
 };
+const season = {
+	"100": "#BDFFAC",
+	"200": "#94EA84",
+	"300": "#73C865",
+	"400": "#54A949",
+	"700": "#0B7011",
+	"800": "#005100",
+	"900": "#030",
+	"1000": "#001900"
+};
 var _palette = {
 	black: black,
 	grey: grey,
@@ -91,7 +102,8 @@ var _palette = {
 	red: red,
 	turquoise: turquoise,
 	white: white,
-	yellow: yellow
+	yellow: yellow,
+	season: season
 };
 
 exports.black = black;
@@ -104,6 +116,7 @@ exports.purple = purple;
 exports.purpleDeep = purpleDeep;
 exports.purpleLight = purpleLight;
 exports.red = red;
+exports.season = season;
 exports.turquoise = turquoise;
 exports.white = white;
 exports.yellow = yellow;

package/cjs/tokens/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/tokens/theme.js

@@ -38,7 +38,11 @@ const background = {
 	owner: "indigo.dark/navy.700/navy.700",
 	disabled: "grey.light/navy.100/black.50",
 	neutral: "grey.light/navy.100/black.50",
-	neutralAlt: "grey.lighter/navy.50/black.100"
+	neutralAlt: "grey.lighter/navy.50/black.100",
+	seasonLow: "deprecatedSeasonLow/season.100/season.700",
+	seasonMedium: "deprecatedSeasonMedium/season.200/season.800",
+	seasonHigh: "deprecatedSeasonHigh/season.300/season.900",
+	seasonVeryHigh: "deprecatedSeasonVeryHigh/season.400/season.1000"
 };
 const text = {
 	base: "graphite/navy.700/grey.100",
@@ -62,15 +66,15 @@ const text = {
 		hover: "white/purple.700/grey.100"
 	},
 	info: "graphite.light/yellow.900/yellow.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
 	error: "red/red.500/red.400",
 	errorAlt: "white/red.500/red.500",
 	success: "green/green.700/green.700",
 	successAlt: "white/green.900/green.100",
+	warning: "coral/orange.500/orange.300",
 	connect: "turquoise/turquoise.500/turquoise.500",
 	driver: "graphite/navy.700/navy.700",
 	owner: "white/white/grey.100",
-	warning: "coral/orange.500/orange.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
 	inversed: "white/white/white"
 };
 const buttonBackground = {
@@ -185,16 +189,16 @@ const icon = {
 		hover: "white/purple.700/grey.100"
 	},
 	info: "graphite.light/yellow.900/yellow.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
 	error: "red/red.500/red.400",
 	errorAlt: "red/red.500/red.200",
 	success: "green/green.700/green.700",
 	successAlt: "white/green.900/green.100",
+	warning: "coral/orange.500/orange.300",
 	connect: "turquoise/turquoise.500/white",
 	connectAlt: "turquoise/turquoise.900/turquoise.50",
 	driver: "graphite/navy.700//navy.700",
 	owner: "white/white/white",
-	warning: "coral/orange.500/orange.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
 	inversed: "white/white/white",
 	disabled: "grey.lighter/navy.100/black.50"
 };
@@ -205,6 +209,12 @@ const stroke = {
 		hover: "graphite.light/navy.300/purpleDeep.400",
 		press: "graphite/navy.500/purpleDeep.400"
 	},
+	strong: "grey.dark/navy.300/navy.200",
+	strongInteractive: {
+		DEFAULT: "grey.dark/navy.300/navy.200",
+		hover: "graphite.light/navy.500/purpleDeep.400",
+		press: "graphite/navy.700/purpleDeep.400"
+	},
 	subdued: "grey.light/navy.100/black.50",
 	accent: "indigo/purple.500/purpleDeep.400",
 	accentInteractive: {
@@ -225,10 +235,10 @@ const fill = {
 	accent: "purple/purple.500/purpleDeep.400",
 	accentAlt: "purple/purple.100/purpleDeep.900",
 	error: "red/red.500/red.500",
-	success: "green/green.500/green.700",
 	negative: "red/red.150/red.900",
-	neutral: "grey.lighter/navy.50/black.100",
-	disabled: "grey.dark/navy.300/grey.300"
+	success: "green/green.500/green.700",
+	disabled: "grey.dark/navy.300/grey.300",
+	neutral: "grey.lighter/navy.50/black.100"
 };
 var _theme = {
 	background: background,

package/cjs/tokens/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.26.3",
+  "version": "0.28.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -32,7 +32,7 @@
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "4.0.0",
-    "postcss": "8.4.20",
+    "postcss": "8.4.21",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -67,7 +67,7 @@
     "autoprefixer": "10.4.13",
     "core-js": "3.27.1",
     "css-loader": "6.7.3",
-    "eslint": "8.31.0",
+    "eslint": "8.32.0",
     "file-loader": "6.2.0",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
@@ -95,7 +95,7 @@
     "stylelint": "14.16.1",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.0.2",
-    "ts-jest": "29.0.3",
+    "ts-jest": "29.0.5",
     "ts-node": "10.9.1",
     "typescript": "4.9.4"
   },

package/styles/components/Buttons/index.scss

@@ -92,7 +92,7 @@
   }
 
   &[aria-busy="true"] .cob-Button__content {
-    color: color(transparent);
+    color: transparent;
   }
 
   &[disabled],

package/styles/components/Form/Autocomplete/index.scss

@@ -71,11 +71,9 @@
   &--forceDisplayResults
     .cobalt-Autocomplete__input-wrapper
     .cobalt-TextField__Input {
+    @include border(accent, 2);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
-
-    box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.16),
-      inset 0 0 0 1px $form-element--default-active-color;
   }
 
   &__list {

package/styles/components/Form/CheckablePill.scss

@@ -3,11 +3,8 @@
 .cobalt-CheckablePillField {
   $self: &;
   $height: 40px;
-  $border-width: 2px;
   $animation-duration: 100ms;
   $toggle-switch-focus-offset: math.div($height, 10);
-  $main-color: color(indigo);
-  $main-color-light: color(indigo);
 
   position: relative;
 
@@ -31,6 +28,9 @@
   }
 
   &__Label {
+    @include border(base, 2);
+    @include text-color(base);
+    @include bg-color(secondary);
     position: relative;
 
     display: flex;
@@ -38,21 +38,17 @@
     height: $height;
     box-sizing: border-box;
     padding: 0 spacing(md);
-    border: $border-width solid color(grey);
 
-    line-height: $height - $border-width * 2;
-    color: $main-color-light;
+    // We remove the border-bottom and border-top width
+    line-height: $height - 2px * 2;
 
     border-radius: math.div($height, 2);
-    background-color: color(white);
     box-shadow: 0 2px 6px 0 rgba(#000, 0.12);
 
     transition: $animation-duration;
 
     &:hover {
-      border-color: $main-color-light;
-
-      fill: $main-color;
+      @include border-color(accent);
       box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
 
       transform: translateY(-1px);
@@ -70,63 +66,62 @@
   }
 
   &__Input:focus + #{ $self }__Label:after {
+    // Color the shadow by using default text color
+    @include text-color(accent);
     position: absolute;
 
-    box-shadow: 0 0 0 1px color(turquoise);
+    box-shadow: 0 0 0 1px;
     content: "";
   }
 
   &__Input:disabled + #{ $self }__Label {
-    border: $border-width solid color(grey);
+    @include border(base, 2);
+    @include bg-color(disabled);
 
     cursor: default;
     box-shadow: none;
-    background-color: color(grey, light);
     opacity: 0.8;
 
     transform: none;
   }
 
   &__Input:checked + #{ $self }__Label {
+    @include bg-color(accentAlt);
+    @include text-color(accentAlt);
     border-color: transparent;
-
-    color: color(white);
-
-    background-color: $main-color-light;
   }
 
   &--with-icon {
     .cobalt-Icon {
+      @include semantic-color(base, icon, fill);
       margin-right: spacing(xs);
 
-      fill: $main-color-light;
-
       transition: fill $animation-duration ease-in-out;
     }
 
     #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
-      fill: color(white);
+      @include semantic-color(accentAlt, icon, fill);
     }
   }
 
   &--error {
     #{ $self }__Input + #{ $self }__Label {
-      border-color: color(red);
-
-      color: $main-color-light;
+      @include border-color(error);
+      @include text-color(base);
+      @include bg-color(secondary);
 
-      background-color: color(white);
+      .cobalt-Icon {
+        @include semantic-color(base, icon, fill);
+      }
     }
 
     #{ $self }__Input:checked + #{ $self }__Label {
-      border-color: transparent;
-
-      color: color(white);
-
-      background-color: color(red);
+      @include text-color(errorAlt);
+      @include bg-color(errorAlt);
+      @include border-color(errorAlt);
 
       .cobalt-Icon {
-        fill: color(white);
+        @include semantic-color(errorAlt, icon, fill);
       }
     }
   }

package/styles/components/Form/Checkmark.scss

@@ -1,15 +1,10 @@
-@import "./form";
-
 .cobalt- {
   &CheckmarkField {
     $self: &;
-
-    $disabled-color: color(grey, dark);
-    $error-color: $form-element--error-color;
-
     $radio-checkmark-size: 20px;
     $checkbox-checkmark-size: 18px;
-    $checkmark-color: color(indigo);
+
+    @include text-color(base);
 
     position: relative;
 
@@ -20,7 +15,6 @@
     font-family: font-family(base);
     font-size: font-size(body);
     line-height: line-height(body);
-    color: color(graphite);
 
     &__Input {
       position: absolute;
@@ -33,12 +27,12 @@
       opacity: 0;
 
       & + #{ $self }__Checkmark {
+        @include border(accent, 2);
         display: inline-block;
 
         flex: 0 0 auto;
 
         margin-right: spacing(xs);
-        border: 2px solid $checkmark-color;
 
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
         cursor: pointer;
@@ -47,11 +41,7 @@
       }
 
       &[disabled] ~ .cobalt-CheckmarkField__Label {
-        color: $disabled-color;
-      }
-
-      &:focus + #{ $self }__Checkmark {
-        box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+        @include text-color(subdued);
       }
     }
 
@@ -67,20 +57,21 @@
       }
 
       & + #{ $self }__Checkmark::after {
+        @include border(accent);
+        @include bg-color(accentAlt);
+
         position: absolute;
 
         top: 3px;
         left: 3px;
-
-        border: 5px solid $checkmark-color;
+        // Exception for radio inputs
+        border-width: 5px;
 
         border-radius: 50%;
 
         content: "";
         opacity: 0;
 
-        background-color: $checkmark-color;
-
         transition: transform 120ms ease-in-out;
 
         transform: scale(0.4);
@@ -95,15 +86,14 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        border-color: $disabled-color;
+        @include border-color(subdued);
 
         box-shadow: none;
       }
 
       &[disabled]:checked ~ #{ $self }__Checkmark::after {
-        border-color: $disabled-color;
-
-        background-color: $disabled-color;
+        @include border-color(subdued);
+        @include bg-color(disabled);
       }
     }
 
@@ -130,7 +120,7 @@
       }
 
       &:checked + #{ $self }__Checkmark {
-        background-color: $checkmark-color;
+        @include bg-color(accentAlt);
         will-change: background-color;
       }
 
@@ -149,13 +139,13 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        border-color: $disabled-color;
+        @include border-color(subdued);
 
         box-shadow: none;
       }
 
       &[disabled]:checked + #{ $self }__Checkmark {
-        background-color: $disabled-color;
+        @include bg-color(disabled);
       }
     }
 
@@ -173,21 +163,16 @@
 
     &--error {
       #{ $self }__Input + #{ $self }__Checkmark {
-        border-color: $error-color;
-      }
-
-      #{ $self }__Input:focus + #{ $self }__Checkmark {
-        box-shadow: 0 2px 12px 0 rgba($form-element--error-color, 0.36);
+        @include border-color(error);
       }
 
       #{ $self }__Input[type="radio"]:checked + #{ $self }__Checkmark::after {
-        border-color: $error-color;
-
-        background-color: $error-color;
+        @include border-color(error);
+        @include bg-color(errorInteractive);
       }
 
       #{ $self }__Input[type="checkbox"]:checked + #{ $self }__Checkmark {
-        background-color: $error-color;
+        @include bg-color(errorInteractive);
       }
     }
   }

package/styles/components/Form/Fieldset.scss

@@ -1,9 +1,9 @@
 .cobalt- {
   &Fieldset {
-    $border-width: 1px;
+    @include border-top(subdued);
 
-    padding: (spacing(sm) -$border-width) 0 0 0;
-    border-top: $border-width solid color(grey, light);
+    // We remove the border-width
+    padding: (spacing(sm) - 1px) 0 0 0;
 
     & > legend {
       @include c-text-title-sm;

package/styles/components/Form/Hint.scss

@@ -1,7 +1,6 @@
-@import "./form";
-
 .cobalt- {
   &Hint {
+    @include text-color(subdued);
     @include c-text-body-md;
 
     position: relative;
@@ -13,8 +12,6 @@
     justify-content: flex-start;
     align-items: flex-start;
 
-    color: color(graphite, light);
-
     font-size: 13px;
     line-height: 16px;
 
@@ -27,15 +24,15 @@
     }
 
     &--success {
-      color: $form-element--success-color;
+      @include text-color(success);
     }
 
     &--error {
-      color: $form-element--error-color;
+      @include text-color(error);
     }
 
     a {
-      color: color(blue);
+      @include text-color(accentInteractive);
       text-decoration: none;
     }
 

package/styles/components/Form/RadioWithDetails.scss

@@ -7,21 +7,18 @@
   flex-grow: 1;
 
   --visual-radio-size: 18px;
-  --visual-radio-color: #{color(indigo)};
 
   .cobalt-radio-with-details__inner {
+    @include border(strongInteractive);
+    @include text-color(base);
+    @include bg-color(secondary);
     height: 100%;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 
     padding: spacing(sm);
-    border: border(grey);
-    border-color: color(grey, dark);
 
-    color: color(indigo);
-
-    background-color: color(white);
     cursor: pointer;
     border-radius: border-radius(lg);
 
@@ -43,7 +40,7 @@
   }
 
   .cobalt-radio-with-details__title {
-    color: color(indigo);
+    @include text-color(base);
     font-size: 14px;
     font-weight: 600;
     line-height: 18px;
@@ -53,7 +50,7 @@
 
   .cobalt-radio-with-details__description {
     @include c-text-body-md;
-    color: color(grey, dark);
+    @include text-color(subdued);
 
     transition: color 150ms ease-in-out;
   }
@@ -75,13 +72,13 @@
     wordwrap: normal;
 
     & + #{ $self }__inner #{ $self }__visual-input {
+      @include border(accent, 2);
       position: relative;
       top: 3px;
 
       flex: 0 0 auto;
       width: var(--visual-radio-size);
       height: var(--visual-radio-size);
-      border: 2px solid var(--visual-radio-color);
 
       border-radius: 50%;
 
@@ -92,38 +89,40 @@
     }
 
     &:focus-visible + #{ $self }__inner {
-      outline: color(blue) 1px solid;
-      box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+      @include semantic-color(accentAlt, stroke, outline-color);
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+      outline-style: dashed;
+      outline-width: 1px;
     }
 
     &:checked + #{ $self }__inner {
-      border-color: var(--visual-radio-color);
-
-      color: color(white);
-
-      background-color: var(--visual-radio-color);
+      @include border-color(accent);
+      @include text-color(accentAlt);
+      @include bg-color(accentAlt);
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input {
-      border-color: color(white);
+      @include semantic-color(accentAlt, icon, border-color);
     }
 
     &:checked + #{ $self }__inner #{ $self }__title,
     &:checked + #{ $self }__inner #{ $self }__description {
-      color: color(white);
+      @include text-color(accentAlt);
     }
 
     & + #{ $self }__inner #{ $self }__visual-input::after {
+      @include border(accent);
+      @include bg-color(accentAlt);
       position: absolute;
       left: 2px;
       top: 2px;
 
-      border: 5px solid var(--visual-radio-color);
+      // Execption for radio inputs
+      border-width: 5px;
 
       border-radius: 50%;
       content: "";
       opacity: 0;
-      background-color: var(--visual-radio-color);
 
       transition: transform 120ms ease-in-out;
       transform: scale(0.4);
@@ -131,7 +130,7 @@
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input::after {
-      border-color: color(white);
+      @include semantic-color(accentAlt, icon, border-color);
 
       opacity: 1;
 

package/styles/components/Form/Select.scss

@@ -26,7 +26,8 @@
 
       // select placeholder
       &:invalid {
-        color: color(grey, dark) !important;
+        @include text-color(subdued);
+        opacity: 0.7;
       }
 
       &[disabled] {