@drivy/cobalt 0.16.2 → 0.17.0

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

package/styles/components.scss

@@ -6,7 +6,6 @@
 @import "./components/Callout/index";
 @import "./components/Card/index";
 @import "./components/Cell/index";
-@import "./components/CdwChoice/index";
 @import "./components/EmptyState/index";
 @import "./components/Helper/index";
 @import "./components/Modal/index";
@@ -20,7 +19,6 @@
 @import "./components/ProgressBar/index";
 @import "./components/TabBar/index";
 @import "./components/Tag/index";
-@import "./components/TextContainer/index";
 @import "./components/Chip/index";
 @import "./components/Form/index";
 @import "./components/Calendar/CalendarView/index";

package/styles/core/_colors-map.scss

@@ -0,0 +1,225 @@
+/**********************************/
+/* GENERATED WHEN BUILDING COBALT */
+/*** DO NOT MODIFY IT DIRECTLY ****/
+/**********************************/
+$theme-colors-map: (
+  background: (
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-purple),
+      hover: var(--c-l-purple)
+    ),
+    accentAlt: var(--c-l-indigo),
+    accentAltInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo)
+    ),
+    connect: var(--c-l-turquoise),
+    connectInteractive: (
+      DEFAULT: var(--c-l-turquoise),
+      hover: var(--c-l-turquoise)
+    ),
+    driver: var(--c-l-deprecatedDriver),
+    error: var(--c-l-red),
+    errorInteractive: (
+      DEFAULT: var(--c-l-red),
+      hover: var(--c-l-red)
+    ),
+    errorAlt: var(--c-l-graphite),
+    info: var(--c-l-grey-lighter),
+    neutral: var(--c-l-grey-light),
+    neutralAlt: var(--c-l-grey-lighter),
+    owner: var(--c-l-indigo-dark),
+    primary: var(--c-l-grey-lighter),
+    secondary: var(--c-l-white),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-grey-lighter)
+    ),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-graphite)
+  ),
+  buttonBackground: (
+    accentAlt: var(--c-l-indigo),
+    destructiveInteractive: (
+      DEFAULT: var(--c-l-red),
+      hover: var(--c-l-red),
+      press: var(--c-l-red)
+    ),
+    disabled: var(--c-l-grey-lighter),
+    primaryInteractive: (
+      DEFAULT: var(--c-l-purple),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    success: var(--c-l-green),
+    successAltInteractive: (
+      DEFAULT: var(--c-l-green),
+      hover: var(--c-l-green),
+      press: var(--c-l-green)
+    ),
+    tertiaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    )
+  ),
+  buttonIcon: (
+    accentAlt: var(--c-l-purple),
+    destructiveInteractive: (
+      DEFAULT: var(--c-l-red),
+      hover: var(--c-l-red),
+      press: var(--c-l-red)
+    ),
+    disabled: var(--c-l-graphite-light),
+    primaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    success: var(--c-l-white),
+    successAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    tertiaryInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue),
+      press: var(--c-l-blue)
+    )
+  ),
+  buttonLabel: (
+    accentAlt: var(--c-l-purple),
+    destructiveInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    disabled: var(--c-l-graphite-light),
+    primaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    success: var(--c-l-white),
+    successAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    tertiaryInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue),
+      press: var(--c-l-blue)
+    )
+  ),
+  fill: (
+    accent: var(--c-l-purple),
+    accentAlt: var(--c-l-purple),
+    disabled: var(--c-l-grey-dark),
+    secondary: var(--c-l-turquoise),
+    subdued: var(--c-l-grey-light)
+  ),
+  icon: (
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-purple),
+      hover: var(--c-l-indigo)
+    ),
+    accentAlt: var(--c-l-white),
+    accentAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-indigo)
+    ),
+    base: var(--c-l-graphite),
+    baseInteractive: (
+      DEFAULT: var(--c-l-graphite),
+      hover: var(--c-l-graphite)
+    ),
+    connect: var(--c-l-turquoise),
+    driver: var(--c-l-graphite),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-red),
+    info: var(--c-l-graphite-light),
+    infoAlt: var(--c-l-turquoise),
+    inversed: var(--c-l-white),
+    owner: var(--c-l-white),
+    subdued: var(--c-l-graphite-light),
+    subduedInteractive: (
+      DEFAULT: var(--c-l-graphite-light),
+      hover: var(--c-l-graphite)
+    ),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-white),
+    warning: var(--c-l-coral)
+  ),
+  stroke: (
+    accent: var(--c-l-indigo),
+    accentInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    accentAlt: var(--c-l-indigo),
+    base: var(--c-l-grey),
+    baseInteractive: (
+      DEFAULT: var(--c-l-grey),
+      hover: var(--c-l-graphite-light),
+      press: var(--c-l-graphite)
+    ),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-red),
+    subdued: var(--c-l-grey-light),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-green)
+  ),
+  text: (
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue)
+    ),
+    accentAlt: var(--c-l-white),
+    accentAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-indigo)
+    ),
+    base: var(--c-l-graphite),
+    baseInteractive: (
+      DEFAULT: var(--c-l-graphite),
+      hover: var(--c-l-graphite)
+    ),
+    connect: var(--c-l-turquoise),
+    driver: var(--c-l-graphite),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-white),
+    info: var(--c-l-graphite-light),
+    infoAlt: var(--c-l-turquoise),
+    inversed: var(--c-l-white),
+    owner: var(--c-l-white),
+    subdued: var(--c-l-graphite-light),
+    subduedInteractive: (
+      DEFAULT: var(--c-l-graphite-light),
+      hover: var(--c-l-graphite)
+    ),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-white),
+    warning: var(--c-l-coral)
+  )
+);

package/styles/core/border.scss

@@ -1,3 +1,5 @@
+@import "./color";
+
 $border-size-data: (
   0: 0,
   0.5: 0.5px,
@@ -11,6 +13,77 @@ $border-style-data: (
   dashed: dashed
 );
 
+@mixin border-style($style: solid, $position) {
+  $styleValue: map-get($border-style-data, $style);
+  @if type-of($styleValue) != string {
+    @error "Border style `#{$style}` not found.";
+  }
+  @if $position ==
+    top or
+    $position ==
+    bottom or
+    $position ==
+    left or
+    $position ==
+    right
+  {
+    border-#{$position}-style: $styleValue;
+  } @else {
+    border-style: $styleValue;
+  }
+}
+
+@mixin border-width($size: default, $position) {
+  $sizeValue: map-get($border-size-data, $size);
+  @if type-of($sizeValue) != number {
+    @error "Border size `#{$size}` not found.";
+  }
+  @if $position ==
+    top or
+    $position ==
+    bottom or
+    $position ==
+    left or
+    $position ==
+    right
+  {
+    border-#{$position}-width: $sizeValue;
+  } @else {
+    border-width: $sizeValue;
+  }
+}
+
+@mixin border($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style);
+  @include border-width($size);
+}
+
+@mixin border-top($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, top);
+  @include border-width($size, top);
+}
+
+@mixin border-bottom($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, bottom);
+  @include border-width($size, bottom);
+}
+
+@mixin border-left($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, left);
+  @include border-width($size, left);
+}
+
+@mixin border-right($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, right);
+  @include border-width($size, right);
+}
+
+// LEGACY
 @function border($color, $size: default, $style: solid) {
   $sizeValue: map-get($border-size-data, $size);
   $styleValue: map-get($border-style-data, $style);

package/styles/core/color.scss

@@ -1,3 +1,46 @@
+@import "./_colors-map";
+
+@mixin semantic-color($color, $category, $property) {
+  $semantic-colors-data: map-get($theme-colors-map, $category);
+  $semantic-color: map-get($semantic-colors-data, $color);
+  @if not $semantic-color {
+    @error "Didn't found any match for: #{$color}, #{$category}, #{$property}";
+  }
+  @if type-of($semantic-color) == string {
+    #{$property}: $semantic-color;
+  } @else {
+    #{$property}: map-get($semantic-color, DEFAULT);
+    @if map-has-key($semantic-color, hover) {
+      &:hover,
+      &:focus {
+        #{$property}: map-get($semantic-color, hover);
+      }
+    }
+    @if map-has-key($semantic-color, press) {
+      &:active {
+        #{$property}: map-get($semantic-color, press);
+      }
+    }
+  }
+}
+
+@mixin bg-color($color) {
+  @include semantic-color($color, background, background-color);
+}
+
+@mixin fill-color($color) {
+  @include semantic-color($color, fill, fill);
+}
+
+@mixin border-color($color) {
+  @include semantic-color($color, stroke, border-color);
+}
+
+@mixin text-color($color) {
+  @include semantic-color($color, text, color);
+}
+
+// LEGACY
 $color-data: (
   white: #fff,
   grey: (

package/styles/core/palette.scss

@@ -0,0 +1,80 @@
+/**********************************/
+/* GENERATED WHEN BUILDING COBALT */
+/*** DO NOT MODIFY IT DIRECTLY ****/
+/**********************************/
+:root {
+  --c-black-50: #544f53;
+  --c-black-100: #363036;
+  --c-black-300: #282127;
+  --c-black-500: #191218;
+  --c-grey-100: #e3e2e3;
+  --c-grey-300: #a9a6a9;
+  --c-green-100: #cdebcb;
+  --c-green-120: #bfe5bd;
+  --c-green-150: #b1e0ae;
+  --c-green-500: #5cbf54;
+  --c-green-700: #479d3e;
+  --c-green-900: #2f6d1c;
+  --c-green-1000: #15310d;
+  --c-navy-50: #f1f1f4;
+  --c-navy-100: #e3e2e8;
+  --c-navy-300: #7b728e;
+  --c-navy-500: #362e53;
+  --c-navy-700: #261a48;
+  --c-navy-900: #0f0429;
+  --c-orange-100: #f1d5b1;
+  --c-orange-300: #eec186;
+  --c-orange-500: #e39735;
+  --c-orange-900: #462e0c;
+  --c-purpleDeep-100: #f2a6ee;
+  --c-purpleDeep-300: #ea71e3;
+  --c-purpleDeep-400: #c31dba;
+  --c-purpleDeep-500: #9b1794;
+  --c-purpleDeep-700: #73116e;
+  --c-purpleDeep-900: #4b0b48;
+  --c-purpleLight-100: #ffdcfd;
+  --c-purple-100: #f6e5f5;
+  --c-purple-300: #ca6bc3;
+  --c-purple-400: #c04fb8;
+  --c-purple-500: #b01aa7;
+  --c-purple-700: #8d1586;
+  --c-purple-900: #5f1159;
+  --c-red-100: #fdeded;
+  --c-red-120: #fbdada;
+  --c-red-150: #f9c8c8;
+  --c-red-300: #e38c8c;
+  --c-red-400: #ed4545;
+  --c-red-500: #c71414;
+  --c-red-700: #af1212;
+  --c-red-900: #3f2424;
+  --c-turquoise-500: #5ecbdd;
+  --c-turquoise-700: #53b3c2;
+  --c-white: #fff;
+  --c-yellow-100: #ffeed1;
+  --c-yellow-300: #ffdda3;
+  --c-yellow-500: #ffc766;
+  --c-yellow-700: #c59548;
+  --c-yellow-900: #75592d;
+  --c-yellow-1000: #3b2e17;
+  --c-l-white: #fff;
+  --c-l-grey-lighter: #f8f7f8;
+  --c-l-grey-light: #edebed;
+  --c-l-grey: #dbd8dc;
+  --c-l-grey-dark: #a49da7;
+  --c-l-indigo: #61366b;
+  --c-l-indigo-dark: #390446;
+  --c-l-purple-light: #d076ca;
+  --c-l-purple: #b01aa7;
+  --c-l-graphite-light: #757575;
+  --c-l-graphite: #333;
+  --c-l-turquoise: #5ecbdd;
+  --c-l-coral: #ffa484;
+  --c-l-amber: #ffc25a;
+  --c-l-red: #ff7378;
+  --c-l-green-light: #0fffb3;
+  --c-l-green: #00da94;
+  --c-l-green-dark: #00a873;
+  --c-l-blue: #2ea2ea;
+  --c-l-deprecatedBlueGhost: #2ea2ea0f;
+  --c-l-deprecatedDriver: #ffd988;
+}