@drivy/cobalt 0.16.2 → 0.18.1

package/icons/phone-link.js.map

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

package/icons/phone-link.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.123 7.7-1.002 1c1.803 1.8 1.803 4.6 0 6.5l1.002 1c2.503-2.3 2.503-6.1 0-8.5ZM18.02 9.8l-1.001 1c.5.7.5 1.6 0 2.3l1.001 1c1.201-1.2 1.201-3 0-4.3ZM14.015 1H4.003C2.9 1 2 1.9 2 3v18c0 1.1.901 2 2.003 2h10.012c1.101 0 2.002-.9 2.002-2V3c0-1.1-.9-2-2.002-2Zm0 19H4.003V4h10.012v16Z"/></svg>

package/icons/search-car.js

@@ -1,4 +1,4 @@
-var searchCar = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"><path d=\"M15.695 18.052a9.895 9.895 0 01-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 01-1.833 5.754l5.653 5.654a1 1 0 010 1.414l-.943.943a.999.999 0 01-1.414 0l-5.653-5.655zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 104.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 00.721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 00.721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 10-.187-2.127zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361zm-7.076 3.531a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785zm6.429 0a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785z\" fill=\"#362e53\" fill-rule=\"nonzero\"/></svg>";
+var searchCar = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"><path d=\"M15.695 18.052a9.895 9.895 0 01-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 01-1.833 5.754l5.653 5.654a1 1 0 010 1.414l-.943.943a.999.999 0 01-1.414 0l-5.653-5.655zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 104.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 00.721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 00.721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 10-.187-2.127zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361zm-7.076 3.531a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785zm6.429 0a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785z\" fill-rule=\"nonzero\"/></svg>";
 
 export { searchCar as default };
 //# sourceMappingURL=search-car.js.map

package/icons/search-car.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M15.695 18.052a9.895 9.895 0 0 1-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 0 1-1.833 5.754l5.653 5.654a1 1 0 0 1 0 1.414l-.943.943a.999.999 0 0 1-1.414 0l-5.653-5.655Zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 1 0 4.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 0 0 .721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 0 0 .721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 1 0-.187-2.127Zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361Zm-7.076 3.531a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Zm6.429 0a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Z" style="fill:#362e53;fill-rule:nonzero"/></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M15.695 18.052a9.895 9.895 0 0 1-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 0 1-1.833 5.754l5.653 5.654a1 1 0 0 1 0 1.414l-.943.943a.999.999 0 0 1-1.414 0l-5.653-5.655Zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 1 0 4.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 0 0 .721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 0 0 .721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 1 0-.187-2.127Zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361Zm-7.076 3.531a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Zm6.429 0a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Z" style="fill-rule:nonzero"/></svg>

package/index.js

@@ -3,22 +3,19 @@ export { default as Alerter, useAlerts } from './components/Alerter/index.js';
 export { BasicCell } from './components/BasicCell/index.js';
 export { BulletList, BulletListItem } from './components/BulletList/index.js';
 export { Button, ButtonGroup } from './components/Button/index.js';
-export { default as BrandButton } from './components/Buttons/BrandButton/index.js';
 export { default as GhostButton } from './components/Buttons/GhostButton/index.js';
 export { default as InversedButton } from './components/Buttons/InversedButton/index.js';
 export { default as DefaultButton } from './components/Buttons/DefaultButton/index.js';
 export { Callout } from './components/Callout/index.js';
 export { default as Cell, Cells } from './components/Cell/index.js';
-export { CdwChoice } from './components/CdwChoice/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
 export { Flag } from './components/Flag/index.js';
 export { Flash } from './components/Flash/index.js';
 export { default as Helper } from './components/Helper/index.js';
 export { CalendarRangePicker } from './components/Calendar/CalendarRangePicker/CalendarRangePicker.js';
 export { Card, CardSection } from './components/Card/index.js';
-export { BUNDLED_ICONS, Icon, IconColorsOptions, isIconSource } from './components/Icon/index.js';
+export { BUNDLED_ICONS, Icon, iconColors, isIconSource } from './components/Icon/index.js';
 export { default as Modal } from './components/Modal/index.js';
-export { default as ModalOpenerButton } from './components/ModalOpenerButton/index.js';
 export { Note } from './components/Note/index.js';
 export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
 export { Pill, PillGroup } from './components/Pill/index.js';
@@ -26,7 +23,6 @@ export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { Tab, Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
-export { TextContainer } from './components/TextContainer/index.js';
 export { Chip } from './components/Chip/index.js';
 export { Autocomplete } from './components/Form/Autocomplete/index.js';
 export { Checkbox, ChoiceList, Radio } from './components/Form/Checkmark.js';
@@ -36,7 +32,7 @@ export { ComposedField } from './components/Form/ComposedField.js';
 export { withFieldLabelAndHint } from './components/Form/field.js';
 export { Fieldset } from './components/Form/Fieldset.js';
 export { Hint } from './components/Form/Hint.js';
-export { RatingIcons } from './components/Rating/RatingIcons.js';
+export { Rating } from './components/Rating/index.js';
 export { Select } from './components/Form/Select.js';
 export { default as Slider, SliderValueMeta } from './components/Form/Slider.js';
 export { Stepper, StepperMeta } from './components/Form/Stepper.js';
@@ -238,6 +234,7 @@ export { default as PencilIcon } from './components/Icon/__generated__/PencilIco
 export { default as PeopleUserIcon } from './components/Icon/__generated__/PeopleUserIcon.js';
 export { default as PerformanceIcon } from './components/Icon/__generated__/PerformanceIcon.js';
 export { default as PhoneIcon } from './components/Icon/__generated__/PhoneIcon.js';
+export { default as PhoneLinkIcon } from './components/Icon/__generated__/PhoneLinkIcon.js';
 export { default as PhotosIcon } from './components/Icon/__generated__/PhotosIcon.js';
 export { default as PigIcon } from './components/Icon/__generated__/PigIcon.js';
 export { default as PinIcon } from './components/Icon/__generated__/PinIcon.js';
@@ -326,7 +323,11 @@ export { default as WheelIcon } from './components/Icon/__generated__/WheelIcon.
 export { default as WheelchairIcon } from './components/Icon/__generated__/WheelchairIcon.js';
 export { default as WrenchIcon } from './components/Icon/__generated__/WrenchIcon.js';
 export { default as YingyangIcon } from './components/Icon/__generated__/YingyangIcon.js';
+export { default as RatingLabel } from './components/Rating/RatingLabel.js';
 export { useAccordionItemContext } from '@reach/accordion';
 export { default as LoadingIcon } from './components/Icon/__generated__/LoadingIcon.js';
 export { default as StarIcon } from './components/Icon/__generated__/StarIcon.js';
+export { RatingInput } from './components/Rating/RatingInput.js';
+export { RatingCompact } from './components/Rating/RatingCompact.js';
+export { RatingIcons } from './components/Rating/RatingIcons.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.16.2",
+  "version": "0.18.1",
   "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,56 +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.48",
     "@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.22.0",
     "jest": "27.5.1",
-    "np": "7.6.1",
+    "nested-object-access": "^0.2.5",
+    "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.78.1",
     "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.5",
     "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",
-    "typescript": "4.7.3"
+    "ts-node": "10.9.1",
+    "typescript": "4.7.4"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -134,6 +138,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.45"
+    "@types/react": "17.0.48"
   }
 }

package/styles/components/Accordion/index.scss

@@ -11,6 +11,7 @@
     width: 100%;
     display: flex;
     padding: spacing(sm);
+
     border: 0;
 
     font-family: font-family(base);
@@ -18,7 +19,13 @@
     cursor: cursor(pointer);
 
     // Disable reach-ui styles
-    background: color(transparent);
+    background: transparent;
+
+    gap: spacing(sm);
+
+    &--left-toggle-icon {
+      flex-direction: row-reverse;
+    }
 
     &-content {
       width: 100%;
@@ -38,12 +45,12 @@
 
       &::before,
       &::after {
+        // This element is actually an icon but animated, so we can use icon colors here
+        @include semantic-color(subdued, icon, background-color);
         position: absolute;
 
         content: "";
 
-        background-color: color(graphite, light);
-
         transition: transform 0.25s ease-out;
       }
       /* Vertical line */
@@ -76,8 +83,8 @@
   }
 
   &accordion__panel {
+    @include border-top(base);
     // make the child margins affecting the panel height computing
     overflow: auto;
-    border-top: border(grey);
   }
 }

package/styles/components/Alerter/index.scss

@@ -29,13 +29,27 @@
     min-width: 14rem;
     max-width: 50rem;
 
-    color: color(white);
-
     box-shadow: elevation(lg);
     border-radius: border-radius(md);
-    background-color: color(graphite);
     pointer-events: auto;
 
+    &--info {
+      // TOFIX: there is no matching semantic color for this case
+      color: color(white);
+
+      background-color: color(graphite);
+    }
+
+    &--success {
+      @include bg-color(successAlt);
+      @include text-color(successAlt);
+    }
+
+    &--error {
+      @include bg-color(errorAlt);
+      @include text-color(errorAlt);
+    }
+
     &__wrapper {
       display: flex;
       justify-content: flex-start;

package/styles/components/BulletList/index.scss

@@ -26,6 +26,7 @@
     svg,
     use,
     g {
+      // TOFIX: find a way to use new colors here
       fill: rgba(color(graphite), 0.5);
     }
   }

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

@@ -1,74 +1,57 @@
 .cob-Button__default {
-  border-color: color(grey);
-
-  color: color(indigo);
-
-  background-color: color(white);
-
-  &:hover {
-    border-color: color(indigo);
-  }
-
-  &:active {
-    border-color: color(indigo, dark);
-
-    color: color(indigo, dark);
-  }
+  @include semantic-color(
+    secondaryInteractive,
+    buttonBackground,
+    background-color
+  );
+  @include semantic-color(baseInteractive, stroke, border-color);
+  @include semantic-color(secondaryInteractive, buttonLabel, color);
 
   &--primary {
-    @include cob-button-filled(
-      color(purple),
-      color(indigo),
-      color(indigo, dark)
+    @include semantic-color(
+      primaryInteractive,
+      buttonBackground,
+      background-color
     );
+    @include semantic-color(primaryInteractive, buttonLabel, color);
 
-    &.cob-Button__default--destructive {
-      @include cob-button-filled(
-        color(red),
-        darken(color(red), 3),
-        darken(color(red), 6)
-      );
-    }
-  }
-
-  &--destructive {
-    $color: color(red);
-    color: $color;
-
-    &:hover {
-      border-color: $color;
+    border-color: transparent;
 
-      color: $color;
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: transparent;
     }
 
-    &:active {
-      border-color: darken($color, 6);
+    &.cob-Button__default--destructive {
+      @include semantic-color(
+        destructiveInteractive,
+        buttonBackground,
+        background-color
+      );
+      @include semantic-color(destructiveInteractive, buttonLabel, color);
 
-      color: darken($color, 6);
+      border-color: transparent;
     }
   }
 
-  &.cob-Button__default--active {
-    @include cob-button-filled(
-      color(indigo),
-      color(indigo, dark),
-      color(indigo, dark)
-    );
-  }
-
-  &.cob-Button--disabled {
-    border-color: color(grey);
-
-    color: color(graphite, light);
-
-    background-color: color(grey, lighter);
-    fill: color(grey);
+  &--destructive {
+    @include semantic-color(error, text, color);
 
     &:hover,
+    &:focus,
     &:active {
-      border-color: color(grey);
-
-      color: color(graphite, light);
+      @include semantic-color(error, text, color);
+      @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 semantic-color(accentAlt, stroke, border-color);
+  }
 }

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

@@ -1,25 +1,24 @@
 .cob-Button__ghost {
+  @include semantic-color(tertiaryInteractive, buttonLabel, color);
+  @include semantic-color(
+    tertiaryInteractive,
+    buttonBackground,
+    background-color
+  );
   border-color: transparent;
 
-  color: color(blue);
-
-  background-color: transparent;
   box-shadow: none;
 
-  &:hover {
-    background-color: rgba(color(blue), 0.06);
-
+  &:hover,
+  &:focus,
+  &:active {
     box-shadow: none;
 
     transform: none;
   }
 
   &.cob-Button__ghost--destructive {
-    color: color(red);
-
-    &:hover {
-      background-color: rgba(color(red), 0.06);
-    }
+    @include semantic-color(error, text, color);
   }
 
   &.cob-Button__ghost--standalone {
@@ -32,9 +31,21 @@
     }
   }
 
+  &[disabled],
+  &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
+    @include semantic-color(
+      tertiaryInteractive,
+      buttonBackground,
+      background-color
+    );
+    border-color: transparent;
+
     &:hover,
+    &:focus,
     &:active {
+      border-color: transparent;
+
       background-color: transparent;
     }
   }

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

@@ -1,25 +1,12 @@
 .cob-Button__inversed {
-  $color: color(white);
-  border-color: rgba($color, 0.7);
-
-  color: $color;
+  @include semantic-color(inversed, text, color);
+  @include semantic-color(base, stroke, border-color);
 
   background-color: transparent;
   box-shadow: none;
 
   &:hover,
   &:active {
-    border-color: $color;
-
-    color: $color;
-
     box-shadow: none;
   }
-
-  &.cob-Button--disabled {
-    &:hover,
-    &:active {
-      border-color: rgba($color, 0.7);
-    }
-  }
 }

package/styles/components/Buttons/index.scss

@@ -23,30 +23,6 @@
   line-height: $line-height;
 }
 
-@mixin cob-button-filled($button-color, $hover-color, $active-color) {
-  border-color: $button-color;
-
-  color: color(white);
-
-  background-color: $button-color;
-
-  &:hover {
-    border-color: $hover-color;
-
-    color: color(white);
-
-    background-color: $hover-color;
-  }
-
-  &:active {
-    border-color: $active-color;
-
-    color: color(white);
-
-    background-color: $active-color;
-  }
-}
-
 .cob-Button {
   @include cob-button-sizing(
     $height: 40px,
@@ -119,15 +95,25 @@
     color: color(transparent);
   }
 
+  &[disabled],
+  &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
-    opacity: 0.7;
+    @include semantic-color(disabled, buttonBackground, background-color);
+    @include semantic-color(disabled, buttonLabel, color);
+    @include semantic-color(subdued, stroke, border-color);
+
+    opacity: 1;
     cursor: not-allowed;
     box-shadow: none;
 
     transform: none;
 
     &:hover,
+    &:focus,
     &:active {
+      @include semantic-color(disabled, buttonBackground, background-color);
+      @include semantic-color(disabled, buttonLabel, color);
+      @include semantic-color(subdued, stroke, border-color);
       box-shadow: none;
     }
   }
@@ -188,7 +174,6 @@
   }
 }
 
-@import "./BrandButton/index.scss";
 @import "./InversedButton/index.scss";
 @import "./GhostButton/index.scss";
 @import "./DefaultButton/index.scss";

package/styles/components/Icon/iconColors.scss

@@ -0,0 +1,99 @@
+/**********************************/
+/* GENERATED WHEN BUILDING COBALT */
+/*** DO NOT MODIFY IT DIRECTLY ****/
+/**********************************/
+.cobalt-Icon--colorAccent {
+  fill: var(--c-icon-accent);
+}
+
+.cobalt-Icon--colorAccentInteractive {
+  fill: var(--c-icon-accentInteractive);
+}
+
+.cobalt-Icon--colorAccentInteractive:hover,
+.cobalt-Icon--colorAccentInteractive:focus {
+  fill: var(--c-icon-accentInteractive--hover);
+}
+
+.cobalt-Icon--colorAccentAlt {
+  fill: var(--c-icon-accentAlt);
+}
+
+.cobalt-Icon--colorAccentAltInteractive {
+  fill: var(--c-icon-accentAltInteractive);
+}
+
+.cobalt-Icon--colorAccentAltInteractive:hover,
+.cobalt-Icon--colorAccentAltInteractive:focus {
+  fill: var(--c-icon-accentAltInteractive--hover);
+}
+
+.cobalt-Icon--colorBase {
+  fill: var(--c-icon-base);
+}
+
+.cobalt-Icon--colorBaseInteractive {
+  fill: var(--c-icon-baseInteractive);
+}
+
+.cobalt-Icon--colorBaseInteractive:hover,
+.cobalt-Icon--colorBaseInteractive:focus {
+  fill: var(--c-icon-baseInteractive--hover);
+}
+
+.cobalt-Icon--colorConnect {
+  fill: var(--c-icon-connect);
+}
+
+.cobalt-Icon--colorDriver {
+  fill: var(--c-icon-driver);
+}
+
+.cobalt-Icon--colorError {
+  fill: var(--c-icon-error);
+}
+
+.cobalt-Icon--colorErrorAlt {
+  fill: var(--c-icon-errorAlt);
+}
+
+.cobalt-Icon--colorInfo {
+  fill: var(--c-icon-info);
+}
+
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
+}
+
+.cobalt-Icon--colorInversed {
+  fill: var(--c-icon-inversed);
+}
+
+.cobalt-Icon--colorOwner {
+  fill: var(--c-icon-owner);
+}
+
+.cobalt-Icon--colorSubdued {
+  fill: var(--c-icon-subdued);
+}
+
+.cobalt-Icon--colorSubduedInteractive {
+  fill: var(--c-icon-subduedInteractive);
+}
+
+.cobalt-Icon--colorSubduedInteractive:hover,
+.cobalt-Icon--colorSubduedInteractive:focus {
+  fill: var(--c-icon-subduedInteractive--hover);
+}
+
+.cobalt-Icon--colorSuccess {
+  fill: var(--c-icon-success);
+}
+
+.cobalt-Icon--colorSuccessAlt {
+  fill: var(--c-icon-successAlt);
+}
+
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
+}

package/styles/components/Icon/index.scss

@@ -123,3 +123,5 @@
 }
 
 @include generate-icon-color-classes($color-data);
+
+@import "./iconColors.scss";