@drivy/cobalt 1.5.0 → 2.0.0-beta.2

package/styles/components/Layout/Components/index.scss

@@ -23,17 +23,17 @@
   @apply c-inline-flex c-items-center;
 
   a {
-    @apply c-inline-flex c-gap-2xs c-no-underline c-text-body-md c-text-accent c-font-bold c-cursor-pointer hover:c-underline;
+    @apply c-inline-flex c-gap-2xs c-no-underline c-text-body-md c-text-primary c-font-bold c-cursor-pointer hover:c-underline;
   }
 }
 
 .cobalt-layout-section {
-  @apply c-bg-primary;
+  @apply c-bg-surface;
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
 }
 
 .cobalt-layout-card {
-  @apply c-bg-primary c-border c-border-base c-rounded-xl;
+  @apply c-bg-surface c-border c-border-outline c-rounded-xl;
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
 
   .cobalt-layout-card__item {
@@ -42,12 +42,12 @@
 }
 
 div.cobalt-layout-stack {
-  @apply c-bg-primary c-border c-border-base c-rounded-xl;
+  @apply c-bg-surface c-border c-border-outline c-rounded-xl;
 
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
 
   .cobalt-layout-stack__item {
-    @apply c-block c-border-t c-border-t-base;
+    @apply c-block c-border-t c-border-t-outline;
 
     padding: var(--cobalt-layout-item-spacing);
   }
@@ -76,7 +76,7 @@ div.cobalt-layout-stack {
 }
 
 table.cobalt-layout-stack {
-  @apply c-border c-border-base c-border-separate c-rounded-xl c-border-spacing-none;
+  @apply c-border c-border-outline c-border-separate c-rounded-xl c-border-spacing-none;
   margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
   display: inline-table; // This is to avoid margin collapse between sections
 
@@ -87,7 +87,7 @@ table.cobalt-layout-stack {
 
   .cobalt-layout-stack__item td,
   .cobalt-layout-stack__item th {
-    @apply c-border-t c-border-t-base;
+    @apply c-border-t c-border-t-outline;
     padding-top: var(--cobalt-layout-item-spacing);
     padding-bottom: var(--cobalt-layout-item-spacing);
   }

package/styles/components/Modal/index.scss

@@ -33,7 +33,7 @@
   }
 
   .cobalt-modal__content:not([hidden]) {
-    @apply c-bg-secondary;
+    @apply c-bg-surfaceBright;
 
     position: fixed;
 
@@ -96,17 +96,17 @@
   }
 
   &-footer {
-    @apply c-border-t c-border-t-base c-p-sm;
+    @apply c-border-t c-border-t-outline c-p-sm;
   }
 
   &-header {
-    @apply c-border-b c-border-b-base c-p-md;
+    @apply c-border-b c-border-b-outline c-p-md;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     &__title {
-      @apply c-text-title-md c-text-base c-m-none;
+      @apply c-text-title-md c-text-onSurface c-m-none;
     }
 
     &__close-button {

package/styles/components/Note/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &Note {
-    @apply c-text-body-md c-bg-info c-text-info c-p-sm c-rounded-lg;
+    @apply c-text-body-md c-bg-tertiaryContainer c-text-onTertiaryContainer c-p-sm c-rounded-lg;
 
     display: inline-block;
 
@@ -14,6 +14,6 @@
   }
 
   &Note--error {
-    @apply c-bg-errorAlt c-text-error;
+    @apply c-bg-errorContainer c-text-onErrorContainer;
   }
 }

package/styles/components/PhotoDropzone/index.scss

@@ -1,5 +1,5 @@
 .cobalt-photo-dropzone {
-  @apply c-bg-neutralAlt c-border c-border-accentAlt c-rounded-xl;
+  @apply c-bg-surfaceContainerVariant c-border c-border-onPrimaryContainer c-rounded-xl;
   position: relative;
 
   border-style: dashed;
@@ -28,9 +28,9 @@
   ) {
   background: linear-gradient(
     90deg,
-    theme("semanticBackgroundColor.neutral") 20px,
-    theme("semanticBackgroundColor.neutralAlt") 80px,
-    theme("semanticBackgroundColor.neutral") 110px
+    theme("colors.surfaceContainerVariant") 20px,
+    theme("colors.disabled") 80px,
+    theme("colors.surfaceContainerVariant") 110px
   );
   background-size: 200%;
 
@@ -46,7 +46,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
-  @apply c-bg-accentAlt;
+  @apply c-bg-primaryContainer;
 
   transition: background-color 0.25s;
 
@@ -57,14 +57,14 @@
 }
 
 .cobalt-photo-dropzone--loading {
-  @apply c-bg-neutral c-text-accent;
+  @apply c-bg-surfaceContainerVariant c-text-primary;
   border-style: solid;
 
   cursor: default;
 }
 
 .cobalt-photo-dropzone--errored {
-  @apply c-bg-neutral c-border c-border-error;
+  @apply c-bg-surfaceContainerVariant c-border c-border-error;
   border-style: solid;
 }
 
@@ -76,7 +76,7 @@
 }
 
 .cobalt-photo-dropzone__description--strong {
-  @apply c-text-accent;
+  @apply c-text-primary;
   font-weight: 700;
 }
 
@@ -91,7 +91,7 @@
 }
 
 .cobalt-photo-dropzone__delete-button {
-  @apply c-bg-neutralAlt c-rounded-full;
+  @apply c-bg-surfaceContainerVariant c-rounded-full;
   position: absolute;
   bottom: 1rem;
   right: 1rem;

package/styles/components/Pill/index.scss

@@ -2,7 +2,7 @@ $pill-height: 28px;
 
 .cobalt- {
   &Pill {
-    @apply c-bg-neutralAlt c-text-base c-rounded-full c-py-2xs c-px-sm;
+    @apply c-bg-surfaceContainerVariant c-text-onSurface c-rounded-full c-py-2xs c-px-sm;
     display: inline-flex;
     align-items: center;
 
@@ -19,11 +19,11 @@ $pill-height: 28px;
   }
 
   &Pill--colorConnect {
-    @apply c-text-connect;
+    @apply c-text-primary;
   }
 
   &Pill--overlayed {
-    @apply c-bg-accentAlt c-text-accentAlt;
+    @apply c-bg-primaryContainer c-text-onPrimaryContainer;
   }
 
   &Pill__Icon {

package/styles/components/PlateNumber/index.scss

@@ -1,5 +1,5 @@
 .cobalt-plate-number {
-  @apply c-border c-border-base c-bg-primary c-text-base c-rounded c-py-[2px] c-px-2xs;
+  @apply c-border c-border-outline c-bg-surface c-text-onSurface c-rounded c-py-[2px] c-px-2xs;
 
   display: inline-flex;
 

package/styles/components/Popover/index.scss

@@ -4,7 +4,7 @@
 
 [data-theme~="cobalt-popover"] {
   &.tippy-box {
-    @apply c-bg-secondary c-text-base c-shadow-lg c-rounded-lg;
+    @apply c-bg-surfaceBright c-text-onSurface c-shadow-lg c-rounded-lg;
   }
 
   .tippy-content {
@@ -15,19 +15,19 @@
   }
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: theme("semanticBackgroundColor.secondary") !important;
+    border-top-color: theme("colors.surfaceBright") !important;
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: theme("semanticBackgroundColor.secondary") !important;
+    border-bottom-color: theme("colors.surfaceBright") !important;
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: theme("semanticBackgroundColor.secondary") !important;
+    border-left-color: theme("colors.surfaceBright") !important;
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: theme("semanticBackgroundColor.secondary") !important;
+    border-right-color: theme("colors.surfaceBright") !important;
   }
 }
 
@@ -53,13 +53,13 @@
 
 .use-cobalt-dark-theme {
   [data-theme~="cobalt-popover"] {
-    box-shadow: 0 0 0 1px theme("semanticBorderColor.base");
+    box-shadow: 0 0 0 1px theme("colors.outline");
 
     &[data-placement^="top"] > .tippy-arrow {
       bottom: -1px;
 
       &::before {
-        border-top-color: theme("semanticBorderColor.base") !important;
+        border-top-color: theme("colors.outline") !important;
       }
     }
 
@@ -67,7 +67,7 @@
       top: -1px;
 
       &::before {
-        border-bottom-color: theme("semanticBorderColor.base") !important;
+        border-bottom-color: theme("colors.outline") !important;
       }
     }
 
@@ -75,7 +75,7 @@
       right: -1px;
 
       &::before {
-        border-left-color: theme("semanticBorderColor.base") !important;
+        border-left-color: theme("colors.outline") !important;
       }
     }
 
@@ -83,7 +83,7 @@
       left: -1px;
 
       &::before {
-        border-right-color: theme("semanticBorderColor.base") !important;
+        border-right-color: theme("colors.outline") !important;
       }
     }
   }

package/styles/components/PriceTable/index.scss

@@ -25,7 +25,7 @@
     }
 
     &:empty:before {
-      @apply c-text-subdued;
+      @apply c-text-onSurfaceVariant;
       font-weight: normal;
 
       content: "—";

package/styles/components/ProgressBanner/index.scss

@@ -1,5 +1,5 @@
 .cobalt-progressBanner {
-  @apply c-bg-info c-text-info c-rounded-xl c-p-sm c-gap-sm;
+  @apply c-bg-tertiaryContainer c-text-onTertiaryContainer c-rounded-xl c-p-sm c-gap-sm;
 
   display: inline-flex;
   align-items: center;
@@ -9,7 +9,7 @@
   }
 
   &__completed-icon-container {
-    @apply c-bg-primary c-rounded-full c-w-xl c-h-xl;
+    @apply c-bg-surface c-rounded-full c-w-xl c-h-xl;
 
     display: flex;
 
@@ -36,7 +36,7 @@
   }
 
   &--completed {
-    @apply c-bg-successAlt c-text-successAlt;
+    @apply c-bg-successContainer c-text-onSuccessContainer;
   }
 
   &__completed-icon-container--animated .cobalt-Icon {

package/styles/components/ProgressBar/index.scss

@@ -6,21 +6,21 @@
   }
 
   &ProgressBar__Progression {
-    @apply c-text-title-md c-text-infoAlt;
+    @apply c-text-title-md c-text-tertiary;
   }
 
   &ProgressBar__Title {
-    @apply c-text-title-sm c-text-base;
+    @apply c-text-title-sm c-text-onSurface;
   }
 
   &ProgressBar__CompletedCheckbox {
     path {
-      fill: theme("semanticFillColor.secondary");
+      @apply c-fill-primary;
     }
   }
 
   &ProgressBar__Container {
-    @apply c-bg-fill-subdued c-rounded c-mt-sm c-h-2xs;
+    @apply c-bg-surfaceContainerVariant c-rounded c-mt-sm c-h-2xs;
     position: relative;
 
     width: 100%;
@@ -29,7 +29,7 @@
   }
 
   &ProgressBar__Foreground {
-    @apply c-bg-fill-secondary c-rounded c-h-2xs;
+    @apply c-bg-primary c-rounded c-h-2xs;
     position: absolute;
     left: 0;
     top: 0;
@@ -38,7 +38,7 @@
   }
 
   &ProgressBar__Tick {
-    @apply c-bg-fill-secondary c-rounded c-w-2xs c-h-sm;
+    @apply c-bg-primary c-rounded c-w-2xs c-h-sm;
     position: absolute;
     top: -6px;
     right: 0;

package/styles/components/ProgressCircular/index.scss

@@ -1,7 +1,6 @@
 .cobalt-circularProgressBar {
   --content-size: 64px;
   --total-size: calc((var(--content-size) / 4) + var(--content-size));
-  --progress-color: theme("semanticFillColor.base");
 
   position: relative;
 
@@ -26,17 +25,17 @@
   }
 
   &__bar {
+    @apply c-stroke-onSurface;
     fill: none;
 
     transform: rotate(-90deg) scaleX(-1);
     transform-origin: center center;
 
     stroke-width: 8px;
-    stroke: var(--progress-color);
   }
 
   &__content {
-    @apply c-bg-primary;
+    @apply c-bg-surface;
 
     position: absolute;
 
@@ -71,15 +70,15 @@
     --content-size: 32px;
   }
 
-  &--info {
-    --progress-color: theme("semanticFillColor.secondary");
+  &--info &__bar {
+    @apply c-stroke-tertiary;
   }
 
-  &--error {
-    --progress-color: theme("semanticFillColor.error");
+  &--error &__bar {
+    @apply c-stroke-error;
   }
 
-  &--success {
-    --progress-color: theme("semanticFillColor.success");
+  &--success &__bar {
+    @apply c-stroke-success;
   }
 }

package/styles/components/Rating/index.scss

@@ -10,7 +10,7 @@
 }
 
 .cobalt-rating__label {
-  @apply c-text-subdued;
+  @apply c-text-onSurfaceVariant;
   line-height: 14px;
   font-size: 14px;
 }
@@ -80,7 +80,7 @@
   &:not(:hover):not(:focus-visible) input:focus {
     // focus feedback with keyboard navigation only
     & + .cobalt-Icon {
-      @apply c-border c-border-accent;
+      @apply c-border c-border-primary;
       border-radius: theme("spacing.2xs");
     }
   }

package/styles/components/Sidepanel/index.scss

@@ -1,5 +1,5 @@
 .cobalt-sidepanel {
-  @apply c-bg-primary;
+  @apply c-bg-surface;
 
   position: fixed;
 

package/styles/components/TabBar/index.scss

@@ -48,7 +48,7 @@
     width: 100%;
     height: 1px;
 
-    background: theme("semanticBorderColor.base");
+    background: theme("colors.outline");
 
     content: "";
   }
@@ -79,7 +79,7 @@
   }
 
   &Tab {
-    @apply c-text-section-heading c-bg-secondary c-state-interactive c-transition-interactive;
+    @apply c-text-section-heading c-bg-surfaceBright c-state-interactive c-transition-interactive;
 
     position: relative;
     z-index: theme("zIndex.above");
@@ -127,10 +127,10 @@
     }
 
     &[aria-selected="true"] {
-      @apply c-text-base;
+      @apply c-text-onSurface;
 
       &:after {
-        @apply c-bg-fill-accent;
+        @apply c-bg-primary;
 
         transform: scaleX(1);
       }

package/styles/components/Tabs/index.scss

@@ -1,5 +1,5 @@
 .cobalt-tabs {
-  @apply c-bg-secondary;
+  @apply c-bg-surfaceBright;
   position: relative;
 }
 
@@ -14,7 +14,7 @@
 }
 
 .cobalt-tabs__label {
-  @apply c-text-section-heading c-p-md c-bg-secondary c-state-interactive c-transition-interactive;
+  @apply c-text-section-heading c-p-md c-bg-surfaceBright c-state-interactive c-transition-interactive;
   position: relative;
 
   display: flex;
@@ -33,12 +33,12 @@
   cursor: pointer;
 
   &[data-selected] {
-    @apply c-text-base;
+    @apply c-text-onSurface;
   }
 }
 
 .cobalt-tabs__indicator {
-  @apply c-bg-accent;
+  @apply c-bg-primary;
   top: calc(100% - 3px);
 
   width: var(--width);

package/styles/components/Tag/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &Tag {
-    @apply c-bg-neutralAlt c-text-base c-rounded;
+    @apply c-bg-surfaceContainerVariant c-text-onSurface c-rounded;
     display: inline-flex;
 
     align-items: center;
@@ -25,7 +25,7 @@
   }
 
   &Tag--important {
-    @apply c-text-errorAlt c-bg-errorAlt;
+    @apply c-text-onErrorContainer c-bg-errorContainer;
   }
 
   &Tag--importantPrimary {
@@ -33,7 +33,7 @@
   }
 
   &Tag--success {
-    @apply c-text-successAlt c-bg-successAlt;
+    @apply c-text-onSuccessContainer c-bg-successContainer;
   }
 
   &Tag--successPrimary {
@@ -41,19 +41,19 @@
   }
 
   &Tag--info {
-    @apply c-text-info c-bg-info;
+    @apply c-text-onTertiaryContainer c-bg-tertiaryContainer;
   }
 
   &Tag--accent {
-    @apply c-text-accentAlt c-bg-accentAlt;
+    @apply c-text-onPrimaryContainer c-bg-primaryContainer;
   }
 
   &Tag--accentPrimary {
-    @apply c-text-onAccent c-bg-accent;
+    @apply c-text-onPrimary c-bg-primary;
   }
 
   &Tag--connect {
-    @apply c-text-connectAlt c-bg-connectAlt;
+    @apply c-text-connect c-bg-primaryContainer;
   }
 
   &Tag--connectPrimary {

package/styles/core/border.scss

@@ -1,5 +1,3 @@
-@import "./color";
-
 $border-size-data: (
   0: 0,
   0.5: 0.5px,
@@ -52,48 +50,3 @@ $border-style-data: (
     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);
-
-  @if type-of($sizeValue) != number {
-    @error "Border size `#{$size}` not found.";
-  }
-  @if type-of($styleValue) != string {
-    @error "Border style `#{$size}` not found.";
-  }
-
-  @return #{$sizeValue $styleValue color($color)};
-}