@drivy/cobalt 1.5.0 → 2.0.0-beta.2

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

@@ -1,6 +1,5 @@
 .cob-Button__inversed {
-  @include semantic-color(text, inversed, color);
-  @include semantic-color(stroke, base, border-color);
+  @apply c-text-surfaceFixed c-border-surfaceFixed;
 
   background-color: transparent;
   box-shadow: none;

package/styles/components/Buttons/index.scss

@@ -94,10 +94,7 @@
   &[disabled],
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
-    @apply c-state-none;
-    @include semantic-color(buttonBackground, disabled, background-color);
-    @include semantic-color(buttonLabel, disabled, color);
-    @include semantic-color(stroke, subdued, border-color);
+    @apply c-state-none c-bg-disabled c-text-onSurfaceDisabled c-border-outline;
 
     opacity: 1;
     cursor: not-allowed;
@@ -108,9 +105,7 @@
     &:hover,
     &:focus,
     &:active {
-      @include semantic-color(buttonBackground, disabled, background-color);
-      @include semantic-color(buttonLabel, disabled, color);
-      @include semantic-color(stroke, subdued, border-color);
+      @apply c-bg-disabled c-text-onSurfaceDisabled c-border-outline;
       box-shadow: none;
     }
   }

package/styles/components/Calendar/CalendarDayPicker/index.scss

@@ -42,12 +42,12 @@
   }
 
   &__month {
-    @apply c-bg-secondary;
+    @apply c-bg-surfaceBright;
     flex: 1;
   }
 
   &__month-header {
-    @apply c-text-title-sm c-text-base;
+    @apply c-text-title-sm c-text-onSurface;
     margin-bottom: 12px;
     padding: 4px;
 
@@ -73,7 +73,7 @@
   }
 
   &__month__day-header {
-    @apply c-text-subdued;
+    @apply c-text-onSurfaceVariant;
     flex: 1;
 
     text-align: center;
@@ -110,7 +110,7 @@
     }
 
     &--today {
-      @apply c-text-accent;
+      @apply c-text-primary;
       font-weight: 600;
     }
 
@@ -122,18 +122,18 @@
     &:not(&--disabled):not(&--selected):hover
       .cobalt-CalendarDayPicker__day-inner:after {
       @include disk;
-      @apply c-bg-accentAlt;
+      @apply c-bg-primaryContainer;
     }
 
     &--selected .cobalt-CalendarDayPicker__day-inner:after {
       @include disk;
-      @apply c-bg-accent;
+      @apply c-bg-primary;
 
-      box-shadow: var(--c-background-accentAlt) 0 2px 6px 0;
+      box-shadow: theme("colors.primaryContainer") 0 2px 6px 0;
     }
 
     &--selected .cobalt-CalendarDayPicker__day-inner {
-      @apply c-text-inversed;
+      @apply c-text-surfaceFixed;
       font-weight: 600;
     }
 

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -1,8 +1,8 @@
 @use "sass:math";
 
 .cobalt-CalendarRangePicker {
-  $calendar-range-day-color: var(--c-background-accentAlt);
-  $calendar-range-day-invalid-color: var(--c-background-errorAlt);
+  $calendar-range-day-color: theme("colors.primaryContainer");
+  $calendar-range-day-invalid-color: theme("colors.errorContainer");
 
   --calendar-day-size: 48px;
 
@@ -56,11 +56,11 @@
   }
 
   &__month {
-    @apply c-bg-secondary;
+    @apply c-bg-surfaceBright;
   }
 
   &__month-header {
-    @apply c-text-title-sm c-text-base;
+    @apply c-text-title-sm c-text-onSurface;
     margin-bottom: 12px;
     padding: 4px;
 
@@ -86,7 +86,7 @@
   }
 
   &__month__day-header {
-    @apply c-text-subdued;
+    @apply c-text-onSurfaceVariant;
     flex: 1;
 
     text-align: center;
@@ -96,7 +96,7 @@
   }
 
   &__day {
-    @apply c-text-base;
+    @apply c-text-onSurface;
 
     position: relative;
 
@@ -146,17 +146,17 @@
     }
 
     &--today {
-      @apply c-text-accent;
+      @apply c-text-primary;
       font-weight: 600;
     }
 
     &--selected {
-      @apply c-text-accent;
+      @apply c-text-primary;
 
       background-color: $calendar-range-day-color;
 
       .cobalt-CalendarRangePicker__day-notification {
-        @apply c-bg-accent;
+        @apply c-bg-primary;
       }
     }
 
@@ -198,15 +198,15 @@
     }
 
     &--active:not(&--invalid) {
-      @apply c-text-onAccent;
+      @apply c-text-onPrimary;
     }
 
     &--active .cobalt-CalendarRangePicker__day-notification {
-      @apply c-bg-primary;
+      @apply c-bg-surface;
     }
 
     &--active:not(&--invalid):after {
-      @apply c-bg-accent;
+      @apply c-bg-primary;
     }
 
     &--invalid {
@@ -227,7 +227,7 @@
         &--range
       ):not(&--startDay) {
       &:after {
-        @apply c-bg-primary;
+        @apply c-bg-surface;
       }
     }
 
@@ -241,7 +241,7 @@
     //Start day = end day
     &--startDay.cobalt-CalendarRangePicker__day--endDay {
       &:before {
-        @apply c-border c-border-onAccent;
+        @apply c-border c-border-onPrimary;
 
         position: absolute;
 
@@ -305,38 +305,9 @@
 }
 
 .tippy-box[data-theme~="range-picker"] {
-  @apply c-border c-border-base;
-}
-
-.tippy-box[data-theme~="range-picker"] .tippy-arrow:after {
-  position: absolute;
-
-  left: 0;
-
-  z-index: -1;
-
-  border-color: transparent;
-  border-style: solid;
+  @apply c-p-xs;
 
-  color: color-var(stroke, base);
-
-  content: "";
-}
-
-.tippy-box[data-theme~="range-picker"][data-placement^="top"]
-  > .tippy-arrow:after {
-  bottom: -9px;
-
-  border-width: 8px 8px 0;
-  border-top-color: initial;
-  transform-origin: center top;
-}
-
-.tippy-box[data-theme~="range-picker"][data-placement^="bottom"]
-  > .tippy-arrow:after {
-  top: -9px;
-
-  border-width: 0 8px 8px;
-  border-bottom-color: initial;
-  transform-origin: center bottom;
+  .tippy-content {
+    min-width: unset;
+  }
 }

package/styles/components/Calendar/CalendarView/index.scss

@@ -19,7 +19,7 @@ $daySize: theme("spacing.md");
   }
 
   &__day {
-    @apply c-text-base;
+    @apply c-text-onSurface;
 
     display: flex;
     align-items: center;
@@ -33,19 +33,19 @@ $daySize: theme("spacing.md");
     border-radius: calc(#{$daySize} / 2);
 
     &--disabled {
-      @apply c-bg-blocker c-text-subdued;
+      @apply c-bg-surfaceContainerVariant c-text-onSurfaceVariant;
     }
 
     &--highlighted {
-      @apply c-text-onRental c-bg-rental;
+      @apply c-text-onTertiary c-bg-tertiary;
     }
 
     &--semi-highlighted {
-      @apply c-text-onRentalAlt c-bg-rentalAlt;
+      @apply c-text-onSurfaceContainerVariant c-bg-surfaceContainerVariant;
     }
 
     &--past {
-      @apply c-text-subdued;
+      @apply c-text-onSurfaceVariant;
       opacity: 0.4;
     }
   }

package/styles/components/Callout/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &Callout {
-    @apply c-text-body-md c-text-base c-bg-secondary c-rounded c-shadow c-p-sm c-mb-md;
+    @apply c-text-body-md c-text-onSurface c-bg-surfaceBright c-rounded c-shadow c-p-sm c-mb-md;
 
     position: relative;
 
@@ -22,19 +22,19 @@
 
   &Callout--info {
     &:before {
-      @apply c-bg-fill-secondary;
+      @apply c-bg-primary;
     }
   }
 
   &Callout--success {
     &:before {
-      @apply c-bg-fill-success;
+      @apply c-bg-success;
     }
   }
 
   &Callout--error {
     &:before {
-      @apply c-bg-fill-error;
+      @apply c-bg-error;
     }
   }
 

package/styles/components/Card/index.scss

@@ -3,7 +3,7 @@
   $legacy-card-padding-tight: 12px;
 
   &Card {
-    @apply c-bg-secondary c-border c-border-base c-rounded-xl;
+    @apply c-bg-surfaceBright c-border c-border-outline c-rounded-xl;
     width: 100%;
 
     &--legacy {
@@ -22,7 +22,7 @@
   }
 
   &Card__Section {
-    @apply c-bg-secondary;
+    @apply c-bg-surfaceBright;
     position: relative;
 
     display: block;
@@ -30,17 +30,17 @@
   }
 
   &Card__Section--subdued {
-    @apply c-bg-neutralAlt;
+    @apply c-bg-surfaceContainerVariant;
   }
 
   &Card__Section + &Card__Section--divided {
-    @apply c-border-t c-border-subdued;
+    @apply c-border-t c-border-outline;
     padding-top: $card-padding - 1px;
   }
 
   &Card__Section + &Card__Section--dividedSoft {
     &:before {
-      @apply c-bg-neutral;
+      @apply c-bg-surfaceContainerVariant;
 
       position: absolute;
       top: 0;

package/styles/components/Cell/index.scss

@@ -3,7 +3,7 @@
     position: relative;
 
     &--divided {
-      @apply c-border-t c-border-base;
+      @apply c-border-t c-border-outline;
 
       &:first-of-type {
         border-top: 0;
@@ -22,7 +22,7 @@
         height: 1px;
         width: calc(100% - #{theme("spacing.sm")});
 
-        background-color: theme("semanticBorderColor.base");
+        background-color: theme("colors.outline");
 
         content: "";
       }

package/styles/components/Chip/index.scss

@@ -5,7 +5,7 @@ $chip-large-height: 50px;
 
 .cobalt- {
   &Chip {
-    @apply c-border c-border-base c-bg-secondary c-transition-colors;
+    @apply c-border c-border-outline c-bg-surfaceBright c-transition-colors;
 
     position: relative;
 
@@ -48,11 +48,11 @@ $chip-large-height: 50px;
   }
 
   &Chip--active {
-    @apply c-bg-accentAlt c-border-accentAlt;
+    @apply c-bg-primaryContainer c-border-onPrimaryContainer;
   }
 
   &Chip--active &Chip__Text {
-    @apply c-text-accentAlt;
+    @apply c-text-onPrimaryContainer;
   }
 
   &Chip__Content {

package/styles/components/ContainedIcon/index.scss

@@ -14,39 +14,39 @@
   @apply c-rounded-lg;
 
   .cobalt-Icon {
-    @include semantic-color(icon, base, fill);
+    @apply c-fill-onSurface;
 
     width: 24px;
     height: 24px;
   }
 
-  &--colorAccent {
+  &--colorPrimary {
     .cobalt-Icon {
-      @include semantic-color(icon, accent, fill);
+      @apply c-fill-primary;
     }
   }
 
-  &--colorDisabled {
+  &--colorOnSurfaceDisabled {
     .cobalt-Icon {
-      @include semantic-color(icon, subdued, fill);
+      @apply c-fill-onSurfaceDisabled;
     }
   }
 
   &--colorError {
     .cobalt-Icon {
-      @include semantic-color(icon, error, fill);
+      @apply c-fill-error;
     }
   }
 
-  &--colorInfo {
+  &--colorOnTertiaryContainer {
     .cobalt-Icon {
-      @include semantic-color(icon, infoAlt, fill);
+      @apply c-fill-onTertiaryContainer;
     }
   }
 
   &--colorSuccess {
     .cobalt-Icon {
-      @include semantic-color(icon, success, fill);
+      @apply c-fill-success;
     }
   }
 
@@ -54,7 +54,7 @@
     @apply c-bg-connect;
 
     .cobalt-Icon {
-      @include semantic-color(icon, onConnect, fill);
+      @apply c-fill-onConnect;
     }
   }
 
@@ -62,67 +62,59 @@
     @apply c-bg-keyExchange;
 
     .cobalt-Icon {
-      @include semantic-color(icon, onKeyExchange, fill);
+      @apply c-fill-onKeyExchange;
     }
   }
 
-  &--colorRideshare {
-    @apply c-bg-rideshare;
+  &--colorSurface {
+    @apply c-bg-onSurface;
 
     .cobalt-Icon {
-      @include semantic-color(icon, onRideshare, fill);
+      @apply c-fill-surface;
     }
   }
 
-  &--colorBaseAlt {
-    @apply c-bg-neutralAlt;
+  &--colorSurfaceContainerVariant {
+    @apply c-bg-surfaceContainerVariant;
   }
 
-  &--colorAccentAlt {
-    @apply c-bg-accentAlt;
+  &--colorPrimaryContainer {
+    @apply c-bg-primaryContainer;
 
     .cobalt-Icon {
-      @include semantic-color(icon, accent, fill);
+      @apply c-fill-onPrimaryContainer;
     }
   }
 
-  &--colorDisabledAlt {
+  &--colorDisabled {
     @apply c-bg-disabled;
 
     .cobalt-Icon {
-      @include semantic-color(icon, subdued, fill);
-    }
-  }
-
-  &--colorErrorAlt {
-    @apply c-bg-errorAlt;
-
-    .cobalt-Icon {
-      @include semantic-color(icon, error, fill);
+      @apply c-fill-onSurfaceDisabled;
     }
   }
 
-  &--colorInfoAlt {
-    @apply c-bg-info;
+  &--colorErrorContainer {
+    @apply c-bg-errorContainer;
 
     .cobalt-Icon {
-      @include semantic-color(icon, info, fill);
+      @apply c-fill-onErrorContainer;
     }
   }
 
-  &--colorSuccessAlt {
-    @apply c-bg-successAlt;
+  &--colorTertiaryContainer {
+    @apply c-bg-tertiaryContainer;
 
     .cobalt-Icon {
-      @include semantic-color(icon, successAlt, fill);
+      @apply c-fill-onTertiaryContainer;
     }
   }
 
-  &--colorConnectAlt {
-    @apply c-bg-connectAlt;
+  &--colorSuccessContainer {
+    @apply c-bg-successContainer;
 
     .cobalt-Icon {
-      @include semantic-color(icon, connectAlt, fill);
+      @apply c-fill-onSuccessContainer;
     }
   }
 }

package/styles/components/EmptyState/index.scss

@@ -23,6 +23,6 @@
   }
 
   &EmptyState__Body {
-    @apply c-text-body-md c-text-subdued c-mb-md;
+    @apply c-text-body-md c-text-onSurfaceVariant c-mb-md;
   }
 }

package/styles/components/Form/Autocomplete/index.scss

@@ -26,11 +26,11 @@
   }
 
   &__clear-button:not([hidden]):hover .cobalt-Icon {
-    fill: var(--c-icon-accent);
+    @apply c-fill-onPrimaryContainer;
   }
 
   &__content:not([hidden]):not(:empty) {
-    @apply c-bg-primary c-border-2 c-border-accent;
+    @apply c-bg-surface c-border-2 c-border-primary;
 
     z-index: zx(autocomplete-popover);
 
@@ -66,11 +66,11 @@
   }
 
   &__item[data-disabled] {
-    @apply c-text-subdued;
+    @apply c-text-onSurfaceDisabled;
   }
 
   &__item[data-highlighted] {
-    @apply c-bg-neutralAlt;
+    @apply c-bg-surfaceContainerVariant;
   }
 
   &__item-value {
@@ -89,12 +89,12 @@
   }
 
   &__item-wrapper--disabled {
-    @apply c-text-subdued;
+    @apply c-text-onSurfaceDisabled;
 
     cursor: auto;
 
     .cobalt-Icon {
-      fill: var(--c-icon-disabled) !important;
+      fill: theme("colors.onSurfaceDisabled") !important;
     }
   }
 
@@ -113,20 +113,20 @@
   }
 
   .cobalt-TextField__Input[type][data-state="open"] {
-    @apply c-border-accent;
+    @apply c-border-onPrimaryContainer;
   }
 
   .cobalt-TextField__Icon {
-    fill: var(--c-icon-subdued);
+    @apply c-fill-onSurfaceDisabled;
     opacity: 0.7;
   }
 
   .cobalt-TextField[data-focus] .cobalt-TextField__Icon {
-    fill: var(--c-icon-accent);
+    @apply c-fill-onPrimaryContainer;
   }
 
   .cobalt-TextField--withValue .cobalt-TextField__Icon {
+    @apply c-fill-onPrimaryContainer;
     opacity: 1;
-    fill: var(--c-icon-accent);
   }
 }

package/styles/components/Form/CheckablePill.scss

@@ -27,7 +27,7 @@
   }
 
   &__Label {
-    @apply c-border-base c-border-2 c-text-base c-bg-secondary c-py-none c-px-md c-state-interactive c-transition;
+    @apply c-border-outline c-border-2 c-text-onSurface c-bg-surfaceBright c-py-none c-px-md c-state-interactive c-transition;
     position: relative;
 
     display: flex;
@@ -59,7 +59,7 @@
 
   &__Input:focus + #{ $self }__Label:after {
     // Color the shadow by using default text color
-    @apply c-text-accent;
+    @apply c-text-primary;
     position: absolute;
 
     box-shadow: 0 0 0 1px;
@@ -67,7 +67,7 @@
   }
 
   &__Input:disabled + #{ $self }__Label {
-    @apply c-border-base c-border-2 c-bg-disabled c-state-none;
+    @apply c-border-outline c-border-2 c-bg-disabled c-state-none;
 
     cursor: default;
     box-shadow: none;
@@ -77,34 +77,34 @@
   }
 
   &__Input:checked + #{ $self }__Label {
-    @apply c-bg-accentAlt c-text-accentAlt c-border-accentAlt c-border-2;
+    @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer c-border-2;
   }
 
   &--with-icon {
     .cobalt-Icon {
-      @include semantic-color(icon, base, fill);
+      @apply c-fill-onSurface;
       @apply c-mr-xs c-transition-colors;
     }
 
     #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
-      @include semantic-color(icon, accentAlt, fill);
+      @apply c-fill-onPrimaryContainer;
     }
   }
 
   &--error {
     #{ $self }__Input + #{ $self }__Label {
-      @apply c-border-error c-text-base c-bg-secondary;
+      @apply c-border-error c-text-onSurface c-bg-surfaceBright;
 
       .cobalt-Icon {
-        @include semantic-color(icon, base, fill);
+        @apply c-fill-onSurface;
       }
     }
 
     #{ $self }__Input:checked + #{ $self }__Label {
-      @apply c-text-errorAlt c-bg-errorAlt c-border-errorAlt;
+      @apply c-text-onErrorContainer c-bg-errorContainer c-border-onErrorContainer;
 
       .cobalt-Icon {
-        @include semantic-color(icon, errorAlt, fill);
+        @apply c-fill-onErrorContainer;
       }
     }
   }