@drivy/cobalt 1.1.3 → 1.1.4

package/styles/components/Popover/index.scss

@@ -4,35 +4,36 @@
 
 [data-theme~="cobalt-popover"] {
   &.tippy-box {
-    @include bg-color(secondary);
-    @include text-color(base);
-
-    box-shadow: elevation(lg);
-
-    border-radius: border-radius(lg);
+    @apply c-bg-secondary c-text-base c-shadow-lg c-rounded-lg;
   }
 
   .tippy-content {
     padding: 0;
     min-width: 16rem;
 
-    border-radius: border-radius(lg);
+    @apply c-rounded-lg;
   }
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: color-var(background, secondary) !important;
+    border-top-color: var(--theme-semanticBackgroundColor-secondary) !important;
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: color-var(background, secondary) !important;
+    border-bottom-color: var(
+      --theme-semanticBackgroundColor-secondary
+    ) !important;
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: color-var(background, secondary) !important;
+    border-left-color: var(
+      --theme-semanticBackgroundColor-secondary
+    ) !important;
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: color-var(background, secondary) !important;
+    border-right-color: var(
+      --theme-semanticBackgroundColor-secondary
+    ) !important;
   }
 }
 
@@ -44,27 +45,27 @@
 
 [data-theme~="cobalt-popover--withArrow"] {
   &.tippy-box {
-    border-radius: border-radius(xl);
+    @apply c-rounded-xl;
   }
 
   .tippy-content {
-    border-radius: border-radius(xl);
+    @apply c-rounded-xl;
   }
 }
 
 .cobalt-popover--bodySpacing {
-  padding: spacing(md);
+  padding: theme("spacing.md");
 }
 
 .use-cobalt-dark-theme {
   [data-theme~="cobalt-popover"] {
-    box-shadow: 0 0 0 1px color-var(stroke, base);
+    box-shadow: 0 0 0 1px var(--theme-semanticBorderColor-base);
 
     &[data-placement^="top"] > .tippy-arrow {
       bottom: -1px;
 
       &::before {
-        border-top-color: color-var(stroke, base) !important;
+        border-top-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
 
@@ -72,7 +73,7 @@
       top: -1px;
 
       &::before {
-        border-bottom-color: color-var(stroke, base) !important;
+        border-bottom-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
 
@@ -80,7 +81,7 @@
       right: -1px;
 
       &::before {
-        border-left-color: color-var(stroke, base) !important;
+        border-left-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
 
@@ -88,7 +89,7 @@
       left: -1px;
 
       &::before {
-        border-right-color: color-var(stroke, base) !important;
+        border-right-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
   }

package/styles/components/PriceTable/index.scss

@@ -1,17 +1,18 @@
 .cobalt- {
   &PriceTable__Row {
-    @include c-text-body-md;
+    @apply c-text-body-md;
 
     display: flex;
     justify-content: space-between;
 
     &:not(:last-child) {
-      margin-bottom: spacing(sm);
+      @apply c-mb-sm;
     }
   }
 
   &PriceTable__Label {
-    margin-right: spacing("2xs");
+    @apply c-mr-2xs;
+
     width: 100%;
   }
 
@@ -20,11 +21,11 @@
     white-space: nowrap;
 
     &--discount {
-      @include text-color(success);
+      @apply c-text-success;
     }
 
     &:empty:before {
-      @include text-color(subdued);
+      @apply c-text-subdued;
       font-weight: normal;
 
       content: "—";

package/styles/components/ProgressBanner/index.scss

@@ -1,46 +1,34 @@
 .cobalt-progressBanner {
-  @include bg-color(info);
-  @include text-color(info);
+  @apply c-bg-info c-text-info c-rounded-xl c-p-sm c-gap-sm;
 
   display: inline-flex;
   align-items: center;
 
-  padding: spacing(sm);
-
-  border-radius: border-radius(xl);
-
-  gap: spacing(sm);
-
   &__progress-container {
     font-weight: 600;
   }
 
   &__completed-icon-container {
-    @include bg-color(primary);
+    @apply c-bg-primary c-rounded-full c-w-xl c-h-xl;
 
     display: flex;
 
     justify-content: center;
     align-items: center;
 
-    width: spacing(xl);
-    height: spacing(xl);
-
     margin: 0 5px; // ProgressCircular stroke width
 
     flex-shrink: 0;
-
-    border-radius: 50%;
   }
 
   &__text-container {
+    @apply c-gap-2xs;
     display: flex;
     flex-direction: column;
-    gap: spacing("2xs");
   }
 
   &__title {
-    @include c-text-title-xs;
+    @apply c-text-title-xs;
   }
 
   &__description {
@@ -48,8 +36,7 @@
   }
 
   &--completed {
-    @include bg-color(successAlt);
-    @include text-color(successAlt);
+    @apply c-bg-successAlt c-text-successAlt;
   }
 
   &__completed-icon-container--animated .cobalt-Icon {

package/styles/components/ProgressBar/index.scss

@@ -6,53 +6,43 @@
   }
 
   &ProgressBar__Progression {
-    @include c-text-title-md;
-    @include text-color(infoAlt);
+    @apply c-text-title-md c-text-infoAlt;
   }
 
   &ProgressBar__Title {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
   }
 
   &ProgressBar__CompletedCheckbox {
     path {
-      @include fill-color(secondary);
+      fill: theme("semanticFillColor.secondary");
     }
   }
 
   &ProgressBar__Container {
-    @include fill-bg-color(subdued);
+    @apply c-bg-fill-subdued c-rounded c-mt-sm c-h-2xs;
     position: relative;
 
-    margin-top: spacing(sm);
-
-    height: spacing("2xs");
     width: 100%;
 
     border-radius: 2px;
   }
 
   &ProgressBar__Foreground {
-    @include fill-bg-color(secondary);
+    @apply c-bg-fill-secondary c-rounded c-h-2xs;
     position: absolute;
     left: 0;
     top: 0;
 
-    height: spacing("2xs");
-
     border-radius: 2px;
   }
 
   &ProgressBar__Tick {
-    @include fill-bg-color(secondary);
+    @apply c-bg-fill-secondary c-rounded c-w-2xs c-h-sm;
     position: absolute;
     top: -6px;
     right: 0;
 
-    height: 4 * spacing("2xs");
-    width: spacing("2xs");
-
     border-radius: 2px;
   }
 }

package/styles/components/ProgressCircular/index.scss

@@ -1,7 +1,7 @@
 .cobalt-circularProgressBar {
   --content-size: 64px;
   --total-size: calc((var(--content-size) / 4) + var(--content-size));
-  --progress-color: #{color-var(fill, base)};
+  --progress-color: var(--theme-semanticFillColor-base);
 
   position: relative;
 
@@ -36,7 +36,7 @@
   }
 
   &__content {
-    @include bg-color(primary);
+    @apply c-bg-primary;
 
     position: absolute;
 
@@ -72,14 +72,14 @@
   }
 
   &--info {
-    --progress-color: #{color-var(fill, secondary)};
+    --progress-color: var(--theme-semanticFillColor-secondary);
   }
 
   &--error {
-    --progress-color: #{color-var(fill, error)};
+    --progress-color: var(--theme-semanticFillColor-error);
   }
 
   &--success {
-    --progress-color: #{color-var(fill, success)};
+    --progress-color: var(--theme-semanticFillColor-success);
   }
 }

package/styles/components/Rating/index.scss

@@ -10,7 +10,7 @@
 }
 
 .cobalt-rating__label {
-  @include text-color(subdued);
+  @apply c-text-subdued;
   line-height: 14px;
   font-size: 14px;
 }
@@ -36,8 +36,7 @@
   }
 
   &--icon-size-48 .cobalt-Icon {
-    height: spacing(xl);
-    width: spacing(xl);
+    @apply c-h-xl c-w-xl;
   }
 
   &__icon-wrapper {
@@ -81,8 +80,8 @@
   &:not(:hover):not(:focus-visible) input:focus {
     // focus feedback with keyboard navigation only
     & + .cobalt-Icon {
-      @include border(accent);
-      border-radius: spacing("2xs");
+      @apply c-border-accent;
+      border-radius: theme("spacing.2xs");
     }
   }
 

package/styles/components/Sidepanel/index.scss

@@ -1,11 +1,11 @@
 .cobalt-sidepanel {
-  @include bg-color(primary);
+  @apply c-bg-primary;
 
   position: fixed;
 
   top: 0;
   right: 0;
-  z-index: zx(sidepanel);
+  z-index: theme("zIndex.sidepanel");
 
   height: 100vh;
 
@@ -26,7 +26,7 @@
   }
 
   &--visible {
-    box-shadow: elevation(lg);
+    @apply c-shadow-lg;
   }
 }
 
@@ -36,7 +36,7 @@
   top: 0;
   left: 0;
 
-  z-index: zx(sidepanel-below);
+  z-index: theme("zIndex.sidepanel-below");
 
   background-color: fade-out(black, 0.2);
 

package/styles/components/TabBar/index.scss

@@ -7,7 +7,7 @@
   }
 
   &TabBar__ScrollControl {
-    flex: 0 0 spacing(lg);
+    flex: 0 0 theme("spacing.lg");
     display: flex;
   }
 
@@ -41,13 +41,15 @@
   }
 
   &TabScroller--underlined:after {
-    @include semantic-color(stroke, base, background);
     position: absolute;
+
     bottom: 0;
 
     width: 100%;
     height: 1px;
 
+    background: theme("semanticBorderColor.base");
+
     content: "";
   }
 
@@ -77,17 +79,16 @@
   }
 
   &Tab {
-    @include c-text-section-heading;
-    @include bg-color(secondaryInteractive);
+    @apply c-text-section-heading c-bg-secondaryInteractive;
 
     position: relative;
-    z-index: zx("above");
+    z-index: theme("zIndex.above");
 
     display: flex;
     flex: 1 0 auto;
     justify-content: center;
-    height: 17 * spacing("2xs");
-    padding: 0 spacing(md);
+    height: calc(17 * theme("spacing.2xs"));
+    padding: 0 theme("spacing.md");
 
     box-sizing: border-box;
     border: 0;
@@ -128,10 +129,10 @@
     }
 
     &[aria-selected="true"] {
-      @include text-color(base);
+      @apply c-text-base;
 
       &:after {
-        @include fill-bg-color(accent);
+        @apply c-bg-fill-accent;
 
         transform: scaleX(1);
       }

package/styles/components/Tabs/index.scss

@@ -14,14 +14,13 @@
 }
 
 .cobalt-tabs__label {
-  @apply c-text-section-heading c-bg-secondaryInteractive;
+  @apply c-text-section-heading c-bg-secondaryInteractive c-p-md;
   position: relative;
 
   display: flex;
   justify-content: center;
   flex: 1 0 auto;
   align-items: center;
-  padding: spacing(md);
   border: 0;
 
   text-align: center;

package/styles/components/Tag/index.scss

@@ -1,14 +1,13 @@
 .cobalt- {
   &Tag {
-    @include bg-color(neutralAlt);
-    @include text-color(base);
+    @apply c-bg-neutralAlt c-text-base c-rounded;
     display: inline-flex;
 
     align-items: center;
 
     height: 20px;
 
-    padding: 2px spacing("2xs");
+    @apply c-py-[2px] c-px-2xs;
 
     font-family: font-family(base);
 
@@ -18,8 +17,6 @@
 
     line-height: 16px;
 
-    border-radius: border-radius();
-
     letter-spacing: normal;
   }
 
@@ -28,47 +25,38 @@
   }
 
   &Tag--important {
-    @include text-color(errorAlt);
-    @include bg-color(errorAlt);
+    @apply c-text-errorAlt c-bg-errorAlt;
   }
 
   &Tag--importantPrimary {
-    @include text-color(onError);
-    @include bg-color(error);
+    @apply c-text-onError c-bg-error;
   }
 
   &Tag--success {
-    @include text-color(successAlt);
-    @include bg-color(successAlt);
+    @apply c-text-successAlt c-bg-successAlt;
   }
 
   &Tag--successPrimary {
-    @include text-color(onSuccess);
-    @include bg-color(success);
+    @apply c-text-onSuccess c-bg-success;
   }
 
   &Tag--info {
-    @include text-color(info);
-    @include bg-color(info);
+    @apply c-text-info c-bg-info;
   }
 
   &Tag--accent {
-    @include text-color(accentAlt);
-    @include bg-color(accentAlt);
+    @apply c-text-accentAlt c-bg-accentAlt;
   }
 
   &Tag--accentPrimary {
-    @include text-color(onAccent);
-    @include bg-color(accent);
+    @apply c-text-onAccent c-bg-accent;
   }
 
   &Tag--connect {
-    @include text-color(connectAlt);
-    @include bg-color(connectAlt);
+    @apply c-text-connectAlt c-bg-connectAlt;
   }
 
   &Tag--connectPrimary {
-    @include text-color(onConnect);
-    @include bg-color(connect);
+    @apply c-text-onConnect c-bg-connect;
   }
 }

package/styles/core/global-variables.scss

@@ -1,2 +1,2 @@
-$card-padding: spacing(md);
+$card-padding: theme("spacing.md");
 $unit: 4px;

package/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}