@drivy/cobalt 0.30.0 → 0.31.0

package/styles/core/_colors-map.scss

@@ -4,241 +4,241 @@
 /**********************************/
 $theme-colors-map: (
   background: (
-    primary: var(--c-white),
-    secondary: var(--c-white),
+    primary: var(--c-background-primary),
+    secondary: var(--c-background-secondary),
     secondaryInteractive: (
-      DEFAULT: var(--c-white),
-      hover: var(--c-navy-50)
+      DEFAULT: var(--c-background-secondaryInteractive),
+      hover: var(--c-background-secondaryInteractive--hover)
     ),
-    accent: var(--c-purple-500),
+    accent: var(--c-background-accent),
     accentInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700)
+      DEFAULT: var(--c-background-accentInteractive),
+      hover: var(--c-background-accentInteractive--hover)
     ),
-    accentAlt: var(--c-purple-100),
+    accentAlt: var(--c-background-accentAlt),
     accentAltInteractive: (
-      DEFAULT: var(--c-purple-100),
-      hover: var(--c-purpleLight-100)
+      DEFAULT: var(--c-background-accentAltInteractive),
+      hover: var(--c-background-accentAltInteractive--hover)
     ),
-    info: var(--c-yellow-100),
-    error: var(--c-red-500),
+    info: var(--c-background-info),
+    error: var(--c-background-error),
     errorInteractive: (
-      DEFAULT: var(--c-red-500),
-      hover: var(--c-red-700)
+      DEFAULT: var(--c-background-errorInteractive),
+      hover: var(--c-background-errorInteractive--hover)
     ),
-    errorAlt: var(--c-red-100),
-    success: var(--c-green-700),
-    successAlt: var(--c-green-100),
-    connect: var(--c-turquoise-500),
+    errorAlt: var(--c-background-errorAlt),
+    success: var(--c-background-success),
+    successAlt: var(--c-background-successAlt),
+    connect: var(--c-background-connect),
     connectInteractive: (
-      DEFAULT: var(--c-turquoise-500),
-      hover: var(--c-turquoise-700)
-    ),
-    connectAlt: var(--c-turquoise-50),
-    driver: var(--c-yellow-500),
-    owner: var(--c-navy-700),
-    disabled: var(--c-navy-100),
-    neutral: var(--c-navy-100),
-    neutralAlt: var(--c-navy-50),
-    seasonLow: var(--c-season-100),
-    seasonMedium: var(--c-season-200),
-    seasonHigh: var(--c-season-300),
-    seasonVeryHigh: var(--c-season-400)
+      DEFAULT: var(--c-background-connectInteractive),
+      hover: var(--c-background-connectInteractive--hover)
+    ),
+    connectAlt: var(--c-background-connectAlt),
+    driver: var(--c-background-driver),
+    owner: var(--c-background-owner),
+    disabled: var(--c-background-disabled),
+    neutral: var(--c-background-neutral),
+    neutralAlt: var(--c-background-neutralAlt),
+    seasonLow: var(--c-background-seasonLow),
+    seasonMedium: var(--c-background-seasonMedium),
+    seasonHigh: var(--c-background-seasonHigh),
+    seasonVeryHigh: var(--c-background-seasonVeryHigh)
   ),
   text: (
-    base: var(--c-navy-700),
+    base: var(--c-text-base),
     baseInteractive: (
-      DEFAULT: var(--c-navy-700),
-      hover: var(--c-navy-300)
+      DEFAULT: var(--c-text-baseInteractive),
+      hover: var(--c-text-baseInteractive--hover)
     ),
-    subdued: var(--c-navy-300),
+    subdued: var(--c-text-subdued),
     subduedInteractive: (
-      DEFAULT: var(--c-navy-300),
-      hover: var(--c-navy-500)
+      DEFAULT: var(--c-text-subduedInteractive),
+      hover: var(--c-text-subduedInteractive--hover)
     ),
-    accent: var(--c-purple-500),
+    accent: var(--c-text-accent),
     accentInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700)
+      DEFAULT: var(--c-text-accentInteractive),
+      hover: var(--c-text-accentInteractive--hover)
     ),
-    accentAlt: var(--c-purple-500),
+    accentAlt: var(--c-text-accentAlt),
     accentAltInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700)
-    ),
-    info: var(--c-yellow-900),
-    infoAlt: var(--c-yellow-500),
-    error: var(--c-red-500),
-    errorAlt: var(--c-red-500),
-    success: var(--c-green-700),
-    successAlt: var(--c-green-900),
-    warning: var(--c-orange-500),
-    connect: var(--c-turquoise-500),
-    driver: var(--c-navy-700),
-    owner: var(--c-white),
-    inversed: var(--c-white)
+      DEFAULT: var(--c-text-accentAltInteractive),
+      hover: var(--c-text-accentAltInteractive--hover)
+    ),
+    info: var(--c-text-info),
+    infoAlt: var(--c-text-infoAlt),
+    error: var(--c-text-error),
+    errorAlt: var(--c-text-errorAlt),
+    success: var(--c-text-success),
+    successAlt: var(--c-text-successAlt),
+    warning: var(--c-text-warning),
+    connect: var(--c-text-connect),
+    driver: var(--c-text-driver),
+    owner: var(--c-text-owner),
+    inversed: var(--c-text-inversed)
   ),
   buttonBackground: (
-    selected: var(--c-purple-100),
+    selected: var(--c-buttonBackground-selected),
     destructiveInteractive: (
-      DEFAULT: var(--c-red-100),
-      hover: var(--c-red-120),
-      press: var(--c-red-150)
+      DEFAULT: var(--c-buttonBackground-destructiveInteractive),
+      hover: var(--c-buttonBackground-destructiveInteractive--hover),
+      press: var(--c-buttonBackground-destructiveInteractive--press)
     ),
-    disabled: var(--c-navy-100),
+    disabled: var(--c-buttonBackground-disabled),
     primaryInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700),
-      press: var(--c-purple-900)
+      DEFAULT: var(--c-buttonBackground-primaryInteractive),
+      hover: var(--c-buttonBackground-primaryInteractive--hover),
+      press: var(--c-buttonBackground-primaryInteractive--press)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-white),
-      hover: var(--c-white),
-      press: var(--c-white)
+      DEFAULT: var(--c-buttonBackground-secondaryInteractive),
+      hover: var(--c-buttonBackground-secondaryInteractive--hover),
+      press: var(--c-buttonBackground-secondaryInteractive--press)
     ),
-    success: var(--c-green-700),
+    success: var(--c-buttonBackground-success),
     successAltInteractive: (
-      DEFAULT: var(--c-green-100),
-      hover: var(--c-green-120),
-      press: var(--c-green-150)
+      DEFAULT: var(--c-buttonBackground-successAltInteractive),
+      hover: var(--c-buttonBackground-successAltInteractive--hover),
+      press: var(--c-buttonBackground-successAltInteractive--press)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-white),
-      hover: var(--c-white),
-      press: var(--c-white)
+      DEFAULT: var(--c-buttonBackground-tertiaryInteractive),
+      hover: var(--c-buttonBackground-tertiaryInteractive--hover),
+      press: var(--c-buttonBackground-tertiaryInteractive--press)
     )
   ),
   buttonIcon: (
-    selected: var(--c-purple-500),
+    selected: var(--c-buttonIcon-selected),
     destructiveInteractive: (
-      DEFAULT: var(--c-red-500),
-      hover: var(--c-red-500),
-      press: var(--c-red-500)
+      DEFAULT: var(--c-buttonIcon-destructiveInteractive),
+      hover: var(--c-buttonIcon-destructiveInteractive--hover),
+      press: var(--c-buttonIcon-destructiveInteractive--press)
     ),
-    disabled: var(--c-navy-300),
+    disabled: var(--c-buttonIcon-disabled),
     primaryInteractive: (
-      DEFAULT: var(--c-white),
-      hover: var(--c-white),
-      press: var(--c-white)
+      DEFAULT: var(--c-buttonIcon-primaryInteractive),
+      hover: var(--c-buttonIcon-primaryInteractive--hover),
+      press: var(--c-buttonIcon-primaryInteractive--press)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700),
-      press: var(--c-purple-900)
+      DEFAULT: var(--c-buttonIcon-secondaryInteractive),
+      hover: var(--c-buttonIcon-secondaryInteractive--hover),
+      press: var(--c-buttonIcon-secondaryInteractive--press)
     ),
-    success: var(--c-white),
+    success: var(--c-buttonIcon-success),
     successAltInteractive: (
-      DEFAULT: var(--c-green-900),
-      hover: var(--c-green-900),
-      press: var(--c-green-900)
+      DEFAULT: var(--c-buttonIcon-successAltInteractive),
+      hover: var(--c-buttonIcon-successAltInteractive--hover),
+      press: var(--c-buttonIcon-successAltInteractive--press)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700),
-      press: var(--c-purple-900)
+      DEFAULT: var(--c-buttonIcon-tertiaryInteractive),
+      hover: var(--c-buttonIcon-tertiaryInteractive--hover),
+      press: var(--c-buttonIcon-tertiaryInteractive--press)
     )
   ),
   buttonLabel: (
-    selected: var(--c-purple-500),
+    selected: var(--c-buttonLabel-selected),
     destructiveInteractive: (
-      DEFAULT: var(--c-red-500),
-      hover: var(--c-red-500),
-      press: var(--c-red-500)
+      DEFAULT: var(--c-buttonLabel-destructiveInteractive),
+      hover: var(--c-buttonLabel-destructiveInteractive--hover),
+      press: var(--c-buttonLabel-destructiveInteractive--press)
     ),
-    disabled: var(--c-navy-300),
+    disabled: var(--c-buttonLabel-disabled),
     primaryInteractive: (
-      DEFAULT: var(--c-white),
-      hover: var(--c-white),
-      press: var(--c-white)
+      DEFAULT: var(--c-buttonLabel-primaryInteractive),
+      hover: var(--c-buttonLabel-primaryInteractive--hover),
+      press: var(--c-buttonLabel-primaryInteractive--press)
     ),
     secondaryInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700),
-      press: var(--c-purple-900)
+      DEFAULT: var(--c-buttonLabel-secondaryInteractive),
+      hover: var(--c-buttonLabel-secondaryInteractive--hover),
+      press: var(--c-buttonLabel-secondaryInteractive--press)
     ),
-    success: var(--c-white),
+    success: var(--c-buttonLabel-success),
     successAltInteractive: (
-      DEFAULT: var(--c-green-900),
-      hover: var(--c-green-900),
-      press: var(--c-green-900)
+      DEFAULT: var(--c-buttonLabel-successAltInteractive),
+      hover: var(--c-buttonLabel-successAltInteractive--hover),
+      press: var(--c-buttonLabel-successAltInteractive--press)
     ),
     tertiaryInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700),
-      press: var(--c-purple-900)
+      DEFAULT: var(--c-buttonLabel-tertiaryInteractive),
+      hover: var(--c-buttonLabel-tertiaryInteractive--hover),
+      press: var(--c-buttonLabel-tertiaryInteractive--press)
     )
   ),
   icon: (
-    base: var(--c-navy-500),
+    base: var(--c-icon-base),
     baseInteractive: (
-      DEFAULT: var(--c-navy-500),
-      hover: var(--c-navy-700)
+      DEFAULT: var(--c-icon-baseInteractive),
+      hover: var(--c-icon-baseInteractive--hover)
     ),
-    subdued: var(--c-navy-300),
+    subdued: var(--c-icon-subdued),
     subduedInteractive: (
-      DEFAULT: var(--c-navy-300),
-      hover: var(--c-navy-500)
+      DEFAULT: var(--c-icon-subduedInteractive),
+      hover: var(--c-icon-subduedInteractive--hover)
     ),
-    accent: var(--c-purple-500),
+    accent: var(--c-icon-accent),
     accentInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700)
+      DEFAULT: var(--c-icon-accentInteractive),
+      hover: var(--c-icon-accentInteractive--hover)
     ),
-    accentAlt: var(--c-purple-500),
+    accentAlt: var(--c-icon-accentAlt),
     accentAltInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700)
-    ),
-    info: var(--c-yellow-900),
-    infoAlt: var(--c-yellow-500),
-    error: var(--c-red-500),
-    errorAlt: var(--c-red-500),
-    success: var(--c-green-700),
-    successAlt: var(--c-green-900),
-    warning: var(--c-orange-500),
-    connect: var(--c-turquoise-500),
-    connectAlt: var(--c-turquoise-900),
-    driver: var(--c-navy-700),
-    owner: var(--c-white),
-    inversed: var(--c-white),
-    disabled: var(--c-navy-100)
+      DEFAULT: var(--c-icon-accentAltInteractive),
+      hover: var(--c-icon-accentAltInteractive--hover)
+    ),
+    info: var(--c-icon-info),
+    infoAlt: var(--c-icon-infoAlt),
+    error: var(--c-icon-error),
+    errorAlt: var(--c-icon-errorAlt),
+    success: var(--c-icon-success),
+    successAlt: var(--c-icon-successAlt),
+    warning: var(--c-icon-warning),
+    connect: var(--c-icon-connect),
+    connectAlt: var(--c-icon-connectAlt),
+    driver: var(--c-icon-driver),
+    owner: var(--c-icon-owner),
+    inversed: var(--c-icon-inversed),
+    disabled: var(--c-icon-disabled)
   ),
   stroke: (
-    base: var(--c-navy-100),
+    base: var(--c-stroke-base),
     baseInteractive: (
-      DEFAULT: var(--c-navy-100),
-      hover: var(--c-navy-300),
-      press: var(--c-navy-500)
+      DEFAULT: var(--c-stroke-baseInteractive),
+      hover: var(--c-stroke-baseInteractive--hover),
+      press: var(--c-stroke-baseInteractive--press)
     ),
-    strong: var(--c-navy-300),
+    strong: var(--c-stroke-strong),
     strongInteractive: (
-      DEFAULT: var(--c-navy-300),
-      hover: var(--c-navy-500),
-      press: var(--c-navy-700)
+      DEFAULT: var(--c-stroke-strongInteractive),
+      hover: var(--c-stroke-strongInteractive--hover),
+      press: var(--c-stroke-strongInteractive--press)
     ),
-    subdued: var(--c-navy-100),
-    accent: var(--c-purple-500),
+    subdued: var(--c-stroke-subdued),
+    accent: var(--c-stroke-accent),
     accentInteractive: (
-      DEFAULT: var(--c-purple-500),
-      hover: var(--c-purple-700),
-      press: var(--c-purple-900)
-    ),
-    accentAlt: var(--c-purple-300),
-    error: var(--c-red-500),
-    errorAlt: var(--c-red-500),
-    success: var(--c-green-500),
-    successAlt: var(--c-green-500)
+      DEFAULT: var(--c-stroke-accentInteractive),
+      hover: var(--c-stroke-accentInteractive--hover),
+      press: var(--c-stroke-accentInteractive--press)
+    ),
+    accentAlt: var(--c-stroke-accentAlt),
+    error: var(--c-stroke-error),
+    errorAlt: var(--c-stroke-errorAlt),
+    success: var(--c-stroke-success),
+    successAlt: var(--c-stroke-successAlt)
   ),
   fill: (
-    base: var(--c-navy-500),
-    secondary: var(--c-yellow-500),
-    subdued: var(--c-navy-100),
-    accent: var(--c-purple-500),
-    accentAlt: var(--c-purple-100),
-    error: var(--c-red-500),
-    negative: var(--c-red-150),
-    success: var(--c-green-500),
-    disabled: var(--c-navy-300),
-    neutral: var(--c-navy-50)
+    base: var(--c-fill-base),
+    secondary: var(--c-fill-secondary),
+    subdued: var(--c-fill-subdued),
+    accent: var(--c-fill-accent),
+    accentAlt: var(--c-fill-accentAlt),
+    error: var(--c-fill-error),
+    negative: var(--c-fill-negative),
+    success: var(--c-fill-success),
+    disabled: var(--c-fill-disabled),
+    neutral: var(--c-fill-neutral)
   )
 );

package/styles/core/color.scss

@@ -1,6 +1,6 @@
 @import "./_colors-map";
 
-@mixin semantic-color($color, $category, $property) {
+@mixin semantic-color($category, $color, $property) {
   $semantic-colors-data: map-get($theme-colors-map, $category);
   $semantic-color: map-get($semantic-colors-data, $color);
   @if not $semantic-color {
@@ -24,24 +24,46 @@
   }
 }
 
+@function color-var($category, $color, $modifier: "") {
+  $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}";
+  }
+  @if type-of($semantic-color) == string {
+    @if $modifier != "" {
+      @error "There is no modifier #{$modifier} for: #{$color}, #{$category}";
+    }
+    @return $semantic-color;
+  } @else {
+    @if not $modifier {
+      @error "A modifier must be provied for: #{$color}, #{$category}.";
+    }
+    @if not map-has-key($semantic-color, $modifier) {
+      @error "Didn't found any match for: #{$color}, #{$category} with modifier: #{$modifier}";
+    }
+    @return map-get($semantic-color, $modifier);
+  }
+}
+
 @mixin bg-color($color) {
-  @include semantic-color($color, background, background-color);
+  @include semantic-color(background, $color, background-color);
 }
 
 @mixin fill-color($color) {
-  @include semantic-color($color, fill, fill);
+  @include semantic-color(fill, $color, fill);
 }
 
 @mixin fill-bg-color($color) {
-  @include semantic-color($color, fill, background-color);
+  @include semantic-color(fill, $color, background-color);
 }
 
 @mixin border-color($color) {
-  @include semantic-color($color, stroke, border-color);
+  @include semantic-color(stroke, $color, border-color);
 }
 
 @mixin text-color($color) {
-  @include semantic-color($color, text, color);
+  @include semantic-color(text, $color, color);
 }
 
 // LEGACY