@drivy/cobalt 0.16.0 → 0.17.0

package/icons/index.js.map

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

package/icons/share-android.js

@@ -0,0 +1,4 @@
+var shareAndroid = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92 0-1.61-1.31-2.92-2.92-2.92z\"/></svg>";
+
+export { shareAndroid as default };
+//# sourceMappingURL=share-android.js.map

package/icons/share-android.js.map

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

package/icons/share-android.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92 0-1.61-1.31-2.92-2.92-2.92Z"/></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,6 +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 { 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';
@@ -66,6 +63,7 @@ export { default as BinIcon } from './components/Icon/__generated__/BinIcon.js';
 export { default as BluetoothIcon } from './components/Icon/__generated__/BluetoothIcon.js';
 export { default as BriefcaseIcon } from './components/Icon/__generated__/BriefcaseIcon.js';
 export { default as BulbIcon } from './components/Icon/__generated__/BulbIcon.js';
+export { default as CableIcon } from './components/Icon/__generated__/CableIcon.js';
 export { default as CabrioletIcon } from './components/Icon/__generated__/CabrioletIcon.js';
 export { default as CalendarCheckIcon } from './components/Icon/__generated__/CalendarCheckIcon.js';
 export { default as CalendarClockIcon } from './components/Icon/__generated__/CalendarClockIcon.js';
@@ -143,6 +141,7 @@ export { default as EarningIcon } from './components/Icon/__generated__/EarningI
 export { default as EarthIcon } from './components/Icon/__generated__/EarthIcon.js';
 export { default as EditIcon } from './components/Icon/__generated__/EditIcon.js';
 export { default as ElectricIcon } from './components/Icon/__generated__/ElectricIcon.js';
+export { default as EvBatteryIcon } from './components/Icon/__generated__/EvBatteryIcon.js';
 export { default as ExternalLinkIcon } from './components/Icon/__generated__/ExternalLinkIcon.js';
 export { default as EyeClosedIcon } from './components/Icon/__generated__/EyeClosedIcon.js';
 export { default as EyeIcon } from './components/Icon/__generated__/EyeIcon.js';
@@ -269,6 +268,7 @@ export { default as ServiceLockedIcon } from './components/Icon/__generated__/Se
 export { default as ServiceTollsIcon } from './components/Icon/__generated__/ServiceTollsIcon.js';
 export { default as ServiceUnlockedIcon } from './components/Icon/__generated__/ServiceUnlockedIcon.js';
 export { default as SettingsIcon } from './components/Icon/__generated__/SettingsIcon.js';
+export { default as ShareAndroidIcon } from './components/Icon/__generated__/ShareAndroidIcon.js';
 export { default as ShareIcon } from './components/Icon/__generated__/ShareIcon.js';
 export { default as ShareIosIcon } from './components/Icon/__generated__/ShareIosIcon.js';
 export { default as ShieldCheckIcon } from './components/Icon/__generated__/ShieldCheckIcon.js';
@@ -283,7 +283,6 @@ export { default as SocialLinkedinIcon } from './components/Icon/__generated__/S
 export { default as SocialTwitterIcon } from './components/Icon/__generated__/SocialTwitterIcon.js';
 export { default as SocialWhatsappIcon } from './components/Icon/__generated__/SocialWhatsappIcon.js';
 export { default as StarHalfIcon } from './components/Icon/__generated__/StarHalfIcon.js';
-export { default as StarIcon } from './components/Icon/__generated__/StarIcon.js';
 export { default as StarsIcon } from './components/Icon/__generated__/StarsIcon.js';
 export { default as SubwayIcon } from './components/Icon/__generated__/SubwayIcon.js';
 export { default as SuitcaseIcon } from './components/Icon/__generated__/SuitcaseIcon.js';
@@ -323,6 +322,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.0",
+  "version": "0.17.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -31,8 +31,8 @@
     "date-fns": "2.28.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "3.3.3",
-    "postcss": "8.4.12",
+    "nanoid": "3.3.4",
+    "postcss": "8.4.14",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -41,33 +41,35 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@drivy/babel-preset-app": "0.4.13",
-    "@drivy/eslint-config": "1.6.5",
-    "@drivy/prettier-config": "1.1.3",
-    "@drivy/stylelint-config": "1.1.6",
-    "@drivy/ts-config": "1.1.3",
+    "@getaround-eu/babel-preset-app": "0.5.1",
+    "@getaround-eu/eslint-config": "1.7.1",
+    "@getaround-eu/prettier-config": "1.2.0",
+    "@getaround-eu/stylelint-config": "1.2.1",
+    "@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.4.22",
-    "@storybook/addons": "6.4.22",
-    "@storybook/builder-webpack5": "6.4.22",
-    "@storybook/manager-webpack5": "6.4.22",
-    "@storybook/react": "6.4.22",
+    "@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",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react-hooks": "8.0.0",
     "@types/classnames": "2.3.0",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.2",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.44",
-    "autoprefixer": "10.4.4",
-    "core-js": "3.22.1",
+    "@types/react": "17.0.45",
+    "@whitespace/storybook-addon-html": "^5.0.0",
+    "autoprefixer": "10.4.7",
+    "core-js": "3.22.8",
     "css-loader": "6.7.1",
-    "eslint": "8.13.0",
+    "eslint": "8.17.0",
     "jest": "27.5.1",
+    "nested-object-access": "^0.2.5",
     "np": "7.6.1",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
@@ -77,19 +79,22 @@
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.70.2",
+    "rollup": "2.75.6",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
-    "rollup-plugin-typescript2": "0.31.2",
-    "sass": "1.50.1",
+    "rollup-plugin-typescript2": "0.32.1",
+    "sass": "1.52.2",
     "sass-loader": "12.6.0",
+    "sharp": "0.30.7",
+    "sharp-cli": "2.1.1",
     "style-loader": "3.3.1",
-    "stylelint": "14.7.1",
-    "svg2vectordrawable": "2.8.5",
+    "stylelint": "14.8.5",
+    "svg2vectordrawable": "2.9.1",
     "svgo": "2.8.0",
-    "ts-jest": "27.1.4",
-    "typescript": "4.6.3"
+    "ts-jest": "27.1.5",
+    "ts-node": "10.7.0",
+    "typescript": "4.7.3"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -133,6 +138,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.44"
+    "@types/react": "17.0.45"
   }
 }

package/styles/components/Accordion/index.scss

@@ -18,7 +18,7 @@
     cursor: cursor(pointer);
 
     // Disable reach-ui styles
-    background: color(transparent);
+    background: transparent;
 
     &-content {
       width: 100%;
@@ -38,12 +38,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 +76,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,48 @@
 .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);
     }
   }
 }

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";