@drivy/cobalt 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -16,7 +16,7 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@juggle/resize-observer": "3.3.1",
+    "@juggle/resize-observer": "3.4.0",
     "@reach/accordion": "0.16.1",
     "@reach/alert": "0.16.0",
     "@reach/combobox": "0.16.3",
@@ -28,11 +28,11 @@
     "@react-spring/web": "9.3.0",
     "@tippyjs/react": "4.2.6",
     "classnames": "2.3.1",
-    "date-fns": "2.28.0",
+    "date-fns": "2.29.2",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "3.3.4",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -41,60 +41,60 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@getaround-eu/babel-preset-app": "0.5.1",
-    "@getaround-eu/eslint-config": "1.7.1",
+    "@getaround-eu/babel-preset-app": "0.5.2",
+    "@getaround-eu/eslint-config": "1.7.2",
     "@getaround-eu/prettier-config": "1.2.0",
-    "@getaround-eu/stylelint-config": "1.2.1",
+    "@getaround-eu/stylelint-config": "1.2.2",
     "@getaround-eu/ts-config": "2.1.0",
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "4.1.0",
-    "@rushstack/eslint-patch": "1.1.3",
-    "@storybook/addon-essentials": "6.5.7",
-    "@storybook/addons": "6.5.7",
-    "@storybook/builder-webpack5": "6.5.7",
-    "@storybook/manager-webpack5": "6.5.7",
-    "@storybook/react": "6.5.7",
-    "@svgr/cli": "6.2.1",
-    "@testing-library/jest-dom": "5.16.4",
+    "@rushstack/eslint-patch": "1.1.4",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addons": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@svgr/cli": "6.3.1",
+    "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.0",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.0",
     "@types/jest": "27.5.2",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.45",
+    "@types/react": "17.0.49",
     "@whitespace/storybook-addon-html": "^5.0.0",
-    "autoprefixer": "10.4.7",
-    "core-js": "3.22.8",
+    "autoprefixer": "10.4.8",
+    "core-js": "3.24.1",
     "css-loader": "6.7.1",
-    "eslint": "8.17.0",
+    "eslint": "8.23.0",
     "jest": "27.5.1",
     "nested-object-access": "^0.2.5",
-    "np": "7.6.1",
+    "np": "7.6.2",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
-    "prettier": "2.6.2",
+    "prettier": "2.7.1",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.75.6",
+    "rollup": "2.79.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
-    "rollup-plugin-typescript2": "0.32.1",
-    "sass": "1.52.2",
+    "rollup-plugin-typescript2": "0.33.0",
+    "sass": "1.54.8",
     "sass-loader": "12.6.0",
     "sharp": "0.30.7",
     "sharp-cli": "2.1.1",
     "style-loader": "3.3.1",
-    "stylelint": "14.8.5",
+    "stylelint": "14.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "2.8.0",
     "ts-jest": "27.1.5",
-    "ts-node": "10.7.0",
-    "typescript": "4.7.3"
+    "ts-node": "10.9.1",
+    "typescript": "4.7.4"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -138,6 +138,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.45"
+    "@types/react": "17.0.49"
   }
 }

package/styles/components/Accordion/index.scss

@@ -11,6 +11,7 @@
     width: 100%;
     display: flex;
     padding: spacing(sm);
+
     border: 0;
 
     font-family: font-family(base);
@@ -20,6 +21,12 @@
     // Disable reach-ui styles
     background: transparent;
 
+    gap: spacing(sm);
+
+    &--left-toggle-icon {
+      flex-direction: row-reverse;
+    }
+
     &-content {
       width: 100%;
 

package/styles/components/Buttons/DefaultButton/index.scss

@@ -45,4 +45,13 @@
       @include semantic-color(error, stroke, border-color);
     }
   }
+
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active,
+  &--selected {
+    @include semantic-color(selected, buttonBackground, background-color);
+    @include semantic-color(selected, buttonLabel, color);
+    @include border-color(accent);
+  }
 }

package/styles/components/Helper/index.scss

@@ -1,12 +1,16 @@
 .cobalt-helper {
+  @include border(base);
+  @include bg-color(secondary);
   padding: spacing(sm);
 
+  // FIXME: remove when releasing semantics color
   background-color: fade-out(color(purple), 0.92);
+
   border-radius: border-radius(xl);
 
   &__title {
     @include text-style-title-small;
-    color: color(graphite);
+    @include text-color(base);
   }
 
   &__content {

package/styles/components/Modal/index.scss

@@ -71,26 +71,21 @@ $reach-ui-dialog-margin-top: 10vh;
   }
 
   &-footer {
-    /* FIXME border function doesn't handle color variant */
-    border-top: border(grey);
-    border-color: color(grey, light);
+    @include border-top(base);
     padding: spacing(sm);
   }
 
   &-header {
+    @include border-bottom(base);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: spacing(md);
-    /* FIXME border function doesn't handle color variant */
-    border-bottom: border(grey);
-    border-color: color(grey, light);
 
     &__title {
       @include c-text-title-md;
+      @include text-color(base);
       margin: spacing(none);
-
-      color: color(indigo, dark);
     }
 
     &__close-button {

package/styles/components/Note/index.scss

@@ -2,14 +2,13 @@
   &Note {
     @include text-style-body;
     @include text-style--bodySubdued;
+    @include bg-color(info);
 
     display: inline-block;
 
-    padding: spacing(tight);
+    padding: spacing(sm);
 
-    background-color: color(acier, lighter);
-
-    border-radius: border-radius(x-large);
+    border-radius: border-radius(lg);
   }
 
   &Note--fullWidth {

package/styles/components/PhotoDropzone/index.scss

@@ -1,4 +1,6 @@
 .cobalt-photo-dropzone {
+  @include bg-color(neutralAlt);
+  @include border(accentAlt, default, dashed);
   position: relative;
 
   display: flex;
@@ -7,13 +9,11 @@
   height: 100%;
   width: 100%;
   min-height: 14rem;
-  border: border(purple, default, dashed);
 
   text-align: center;
 
   border-radius: border-radius(xl);
   cursor: pointer;
-  background-color: color(grey, lighter);
 
   transition: background-color 0.25s;
 }
@@ -31,6 +31,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
+  // FIXME NEW COLORS: this background doesn't match any semantic color
   background-color: #f6e5f5;
 
   transition: background-color 0.25s;
@@ -42,20 +43,17 @@
 }
 
 .cobalt-photo-dropzone--loading {
-  border-color: color(grey, light);
+  @include bg-color(neutral);
+  @include text-color(accent);
   border-style: solid;
 
-  color: color(indigo, dark);
-
   cursor: default;
-  background-color: color(grey, light);
 }
 
 .cobalt-photo-dropzone--errored {
-  border-color: color(red);
+  @include bg-color(neutral);
+  @include border-color(error);
   border-style: solid;
-
-  background-color: color(grey, light);
 }
 
 .cobalt-photo-dropzone__description {
@@ -66,7 +64,7 @@
 }
 
 .cobalt-photo-dropzone__description--strong {
-  color: color(purple);
+  @include text-color(accent);
   font-weight: 700;
 }
 
@@ -79,6 +77,7 @@
 }
 
 .cobalt-photo-dropzone__delete-button {
+  @include bg-color(neutralAlt);
   position: absolute;
   bottom: 1rem;
   right: 1rem;
@@ -89,7 +88,6 @@
   border: 0;
 
   border-radius: border-radius(full);
-  background: color(white);
   cursor: pointer;
   opacity: 0;
 

package/styles/components/Pill/index.scss

@@ -1,44 +1,43 @@
 $pill-height: 28px;
-$group-item-spacing: spacing(extra-tight);
+$group-item-spacing: spacing(xs);
 
 .cobalt- {
   &Pill {
+    @include bg-color(neutralAlt);
+    @include text-color(base);
     display: inline-flex;
     align-items: center;
 
     height: $pill-height;
-    padding: spacing(unit) spacing(tight);
+    padding: spacing("2xs") spacing(sm);
 
     font-size: 13px;
     white-space: nowrap;
 
-    color: color(indigo);
-
     border-radius: $pill-height;
-
-    background-color: color(acier, lighter);
   }
 
   &Pill--large {
     $pill-height: 40px;
     height: $pill-height;
-    padding: spacing(extra-tight) spacing();
+    padding: spacing(xs) spacing();
 
     border-radius: $pill-height;
   }
 
   &Pill--colorAller {
-    color: color(aller);
+    @include text-color(connect);
   }
 
   &Pill--overlayed {
-    color: color(white);
+    @include text-color(inversed);
 
+    // FIXME NEW COLORS: this background doesn't match any semantic color
     background-color: rgba(color(graphite), 0.5);
   }
 
   &Pill__Icon {
-    margin-right: spacing(unit);
+    margin-right: spacing("2xs");
   }
 
   &PillGroup {

package/styles/components/PriceTable/index.scss

@@ -6,12 +6,12 @@
     justify-content: space-between;
 
     &:not(:last-child) {
-      margin-bottom: spacing(tight);
+      margin-bottom: spacing(sm);
     }
   }
 
   &PriceTable__Label {
-    margin-right: spacing(unit);
+    margin-right: spacing("2xs");
     width: 100%;
   }
 
@@ -20,11 +20,11 @@
     white-space: nowrap;
 
     &--discount {
-      color: color(signal);
+      @include text-color(success);
     }
 
     &:empty:before {
-      color: color(graphite, light);
+      @include text-color(subdued);
       font-weight: normal;
 
       content: "—";

package/styles/components/ProgressBar/index.scss

@@ -7,7 +7,7 @@
 
   &ProgressBar__Progression {
     @include text-style-title;
-    color: color(aller);
+    @include text-color(infoAlt);
   }
 
   &ProgressBar__Title {
@@ -16,42 +16,42 @@
 
   &ProgressBar__CompletedCheckbox {
     path {
-      fill: color(aller);
+      @include fill-color(secondary);
     }
   }
 
   &ProgressBar__Container {
+    @include bg-color(neutral);
     position: relative;
 
-    margin-top: spacing(tight);
+    margin-top: spacing(sm);
 
-    height: spacing(unit);
+    height: spacing("2xs");
     width: 100%;
 
     border-radius: 2px;
-    background-color: color(acier, light);
   }
 
   &ProgressBar__Foreground {
+    @include semantic-color(secondary, fill, background-color);
     position: absolute;
     left: 0;
     top: 0;
 
-    height: spacing(unit);
+    height: spacing("2xs");
 
     border-radius: 2px;
-    background-color: color(aller);
   }
 
   &ProgressBar__Tick {
+    @include bg-color(neutral);
     position: absolute;
     top: -6px;
     right: 0;
 
-    height: 4 * spacing(unit);
-    width: spacing(unit);
+    height: 4 * spacing("2xs");
+    width: spacing("2xs");
 
     border-radius: 2px;
-    background-color: color(acier, light);
   }
 }

package/styles/components/Tabs/index.scss

@@ -101,6 +101,8 @@ $scrollButtonWidth: 2rem;
 }
 
 .cobalt-tabs__label {
+  @include text-color(subdued);
+  @include bg-color(secondaryInteractive);
   position: relative;
 
   display: flex;
@@ -116,7 +118,6 @@ $scrollButtonWidth: 2rem;
   font-size: 1rem;
   line-height: 1;
   text-transform: uppercase;
-  color: color(graphite, light);
   font-family: font-family(brand);
   font-weight: 700;
 
@@ -126,11 +127,6 @@ $scrollButtonWidth: 2rem;
 
   transition: 0.2s color;
 
-  &:hover,
-  &:focus {
-    background: color(acier, lighter);
-  }
-
   &:after {
     position: absolute;
     bottom: 0;
@@ -149,10 +145,10 @@ $scrollButtonWidth: 2rem;
   }
 
   &.cobalt-tabs__label--selected {
-    color: color(asphalt);
+    @include text-color(base);
 
     &:after {
-      background: color(purple);
+      @include semantic-color(accent, fill, background-color);
 
       transform: scaleX(1);
     }

package/styles/components/Tag/index.scss

@@ -1,26 +1,24 @@
 .cobalt- {
   &Tag {
+    @include bg-color(neutral);
     display: inline-block;
 
-    padding: spacing(unit) spacing(extra-tight);
+    padding: spacing("2xs") spacing(xs);
 
     font-size: 13px;
 
     font-weight: 600;
 
-    background-color: color(acier, light);
-
     border-radius: border-radius();
   }
 
   &Tag--muted {
-    color: color(graphite, light);
-
-    background-color: color(acier, lighter);
+    @include text-color(subdued);
+    @include bg-color(neutralAlt);
   }
 
   &Tag--important {
-    color: color(essence);
+    @include text-color(error);
 
     background-color: lighten(color(essence), 24);
   }

package/styles/core/_colors-map.scss

@@ -40,7 +40,7 @@ $theme-colors-map: (
     successAlt: var(--c-l-graphite)
   ),
   buttonBackground: (
-    accentAlt: var(--c-l-indigo),
+    selected: var(--c-l-indigo),
     destructiveInteractive: (
       DEFAULT: var(--c-l-red),
       hover: var(--c-l-red),
@@ -70,7 +70,7 @@ $theme-colors-map: (
     )
   ),
   buttonIcon: (
-    accentAlt: var(--c-l-purple),
+    selected: var(--c-l-white),
     destructiveInteractive: (
       DEFAULT: var(--c-l-red),
       hover: var(--c-l-red),
@@ -100,7 +100,7 @@ $theme-colors-map: (
     )
   ),
   buttonLabel: (
-    accentAlt: var(--c-l-purple),
+    selected: var(--c-l-white),
     destructiveInteractive: (
       DEFAULT: var(--c-l-white),
       hover: var(--c-l-white),
@@ -176,7 +176,7 @@ $theme-colors-map: (
       hover: var(--c-l-indigo),
       press: var(--c-l-indigo-dark)
     ),
-    accentAlt: var(--c-l-indigo),
+    accentAlt: var(--c-l-purple),
     base: var(--c-l-grey),
     baseInteractive: (
       DEFAULT: var(--c-l-grey),

package/styles/core/border.scss

@@ -13,7 +13,7 @@ $border-style-data: (
   dashed: dashed
 );
 
-@mixin border-style($style: solid, $position) {
+@mixin border-style($style: solid, $position: "") {
   $styleValue: map-get($border-style-data, $style);
   @if type-of($styleValue) != string {
     @error "Border style `#{$style}` not found.";
@@ -33,7 +33,7 @@ $border-style-data: (
   }
 }
 
-@mixin border-width($size: default, $position) {
+@mixin border-width($size: default, $position: "") {
   $sizeValue: map-get($border-size-data, $size);
   @if type-of($sizeValue) != number {
     @error "Border size `#{$size}` not found.";

package/styles/core/theme.scss

@@ -27,7 +27,7 @@
   --c-background-secondaryInteractive--hover: var(--c-l-grey-lighter);
   --c-background-success: var(--c-l-green);
   --c-background-successAlt: var(--c-l-graphite);
-  --c-buttonBackground-accentAlt: var(--c-l-indigo);
+  --c-buttonBackground-selected: var(--c-l-indigo);
   --c-buttonBackground-destructiveInteractive: var(--c-l-red);
   --c-buttonBackground-destructiveInteractive--hover: var(--c-l-red);
   --c-buttonBackground-destructiveInteractive--press: var(--c-l-red);
@@ -45,7 +45,7 @@
   --c-buttonBackground-tertiaryInteractive: var(--c-l-white);
   --c-buttonBackground-tertiaryInteractive--hover: var(--c-l-white);
   --c-buttonBackground-tertiaryInteractive--press: var(--c-l-white);
-  --c-buttonIcon-accentAlt: var(--c-l-purple);
+  --c-buttonIcon-selected: var(--c-l-white);
   --c-buttonIcon-destructiveInteractive: var(--c-l-red);
   --c-buttonIcon-destructiveInteractive--hover: var(--c-l-red);
   --c-buttonIcon-destructiveInteractive--press: var(--c-l-red);
@@ -63,7 +63,7 @@
   --c-buttonIcon-tertiaryInteractive: var(--c-l-blue);
   --c-buttonIcon-tertiaryInteractive--hover: var(--c-l-blue);
   --c-buttonIcon-tertiaryInteractive--press: var(--c-l-blue);
-  --c-buttonLabel-accentAlt: var(--c-l-purple);
+  --c-buttonLabel-selected: var(--c-l-white);
   --c-buttonLabel-destructiveInteractive: var(--c-l-white);
   --c-buttonLabel-destructiveInteractive--hover: var(--c-l-white);
   --c-buttonLabel-destructiveInteractive--press: var(--c-l-white);
@@ -113,7 +113,7 @@
   --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-indigo);
+  --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);

package/tokens/icons.js

@@ -190,6 +190,7 @@ const icons = {
 	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
 	performance: "performance.svg",
+	phoneLink: "phone-link.svg",
 	phone: "phone.svg",
 	photos: "photos.svg",
 	pig: "pig.svg",

package/tokens/icons.js.map

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

package/tokens/theme.js

@@ -35,7 +35,7 @@ const background = {
 	successAlt: "graphite/green.100/green.1000"
 };
 const buttonBackground = {
-	accentAlt: "indigo/purple.100/purpleDeep.900",
+	selected: "indigo/purple.100/purpleDeep.900",
 	destructiveInteractive: {
 		DEFAULT: "red/red.100/red.900",
 		hover: "red/red.120/red.900",
@@ -65,7 +65,7 @@ const buttonBackground = {
 	}
 };
 const buttonIcon = {
-	accentAlt: "purple/purple.500/grey.100",
+	selected: "white/purple.500/grey.100",
 	destructiveInteractive: {
 		DEFAULT: "red/red.500/red.200",
 		hover: "red/red.500/red.200",
@@ -95,7 +95,7 @@ const buttonIcon = {
 	}
 };
 const buttonLabel = {
-	accentAlt: "purple/purple.500/grey.100",
+	selected: "white/purple.500/grey.100",
 	destructiveInteractive: {
 		DEFAULT: "white/red.500/red.200",
 		hover: "white/red.500/red.200",
@@ -171,7 +171,7 @@ const stroke = {
 		hover: "indigo/purple.700/purpleDeep.400",
 		press: "indigo.dark/purple.900/purpleDeep.400"
 	},
-	accentAlt: "indigo/purple.300/purpleDeep.700",
+	accentAlt: "purple/purple.300/purpleDeep.700",
 	base: "grey/navy.100/black.50",
 	baseInteractive: {
 		DEFAULT: "grey/navy.100/black.50",