Merge pull request #8524 from shashkovdanil/neosteps-tailwindcss

NeoSteps to tailwindcss
kodadot · Dec 18, 2023 · fdc3ed1 · fdc3ed1
2 parents df3a2e0 + f1c85ea
commit fdc3ed1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 29 deletions.
diff --git a/libs/ui/src/components/NeoSteps/NeoSteps.scss b/libs/ui/src/components/NeoSteps/NeoSteps.scss
@@ -1,4 +1,3 @@
-@import '../../scss/theme.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/animations.scss';
@@ -7,14 +6,14 @@
 $steps-details-background-color: hsla(0, 0%, 0%, 0);
 $steps-details-padding: 0.5em !default;
 $steps-font-size: var(--step-size, 0.85rem);
-$steps-active-color: #6188e7;
+$steps-active-color: rgb(var(--steps-active-color));
 $steps-previous-color: #6188e7;
 $steps-divider-height: 2px;
 
 $steps-marker-background: #fff;
 $steps-marker-border: 0.2em solid $grey-light !default;
 
-$steps-marker-color: $primary-invert !default;
+$steps-marker-color: var(--background-color) !default;
 $steps-marker-font-weight: 700 !default;
 $steps-marker-rounded-border-radius: $base-rounded-border-radius !default;
 $steps-color: $grey-lighter !default;
@@ -28,37 +27,22 @@ $steps-content-padding: 1rem !default;
 .o-steps {
   // Base styles - Themed
   &__marker {
-    @include ktheme() {
-      background: theme('background-color');
-    }
+    @apply bg-background-color;
   }
 
   .o-icon {
-    @include ktheme() {
-      color: theme('background-color');
-    }
+    @apply bg-background-color;
   }
 
   &__divider {
-    @include ktheme() {
-      background: linear-gradient(
-        to left,
-        theme('k-shade') 50%,
-        $steps-active-color 50%
-      );
-      background-size: 200% 100%;
-      background-position: right bottom;
-    }
+    @apply bg-none bg-k-shade bg-[length:200%_100%] bg-[right_bottom];
   }
 
   // oruga mixes the step size and the titlle font size together ($steps-font-size)
   // we need to override the title font size to make it bigger (12px / 0.75rem
   &__title {
-    font-size: 0.75rem !important;
-
-    @include ktheme() {
-      color: theme('k-grey');
-    }
+    @apply text-xs #{!important};
+    @apply text-k-grey;
   }
 
   // Navigation Items
@@ -67,7 +51,7 @@ $steps-content-padding: 1rem !default;
     &--last {
       &.o-steps__nav-item-active {
         .o-steps__marker {
-          background-color: $steps-active-color;
+          @apply bg-steps-active-color;
         }
       }
     }
@@ -80,7 +64,7 @@ $steps-content-padding: 1rem !default;
       // move divider to right side (color it active)
       // this is required becuase of the theme override above of the divider background
       .o-steps__divider {
-        background-position: left bottom;
+        @apply bg-k-blue bg-[left_bottom];
       }
     }
 
@@ -90,14 +74,15 @@ $steps-content-padding: 1rem !default;
         border-color: $steps-previous-color;
         background-color: $steps-previous-color;
       }
+
       .o-steps__title {
         color: $steps-previous-color;
       }
 
       // move divider to right side (color it active)
       // this is required becuase of the theme override above of the divider background
       .o-steps__divider {
-        background-position: left bottom;
+        @apply bg-k-blue bg-[left_bottom];
       }
     }
   }

diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss
@@ -7,6 +7,7 @@
     --white: #ffffff;
     --black: #000000;
     --k-accent-light-3: #ffaee1;
+    --steps-active-color: 97 136 231;
   }
 
   :root,
@@ -45,7 +46,7 @@
     --k-blue-light: #e8edfb;
     --k-primary: #ff7ac3;
     --k-primary-light: #fff0f8;
-    --k-shade: #cccccc;
+    --k-shade: 204 204 204;
     --placeholder-color: #cccccc;
     --primary-shadow: 4px 4px #000;
     --disabled: #f3f3f3;
@@ -88,7 +89,7 @@
     --k-green-accent-2: #0a3009;
     --k-blue-light: #363234;
     --k-primary-light: #363234;
-    --k-shade: #999999;
+    --k-shade: 153 153 153;
     --primary-shadow: 4px 4px #fff;
     --disabled: var(--black);
     --card-border-color: #6b6b6b;

diff --git a/libs/ui/tailwind.config.js b/libs/ui/tailwind.config.js
@@ -39,7 +39,7 @@ module.exports = {
         'k-blue-light': 'var(--k-blue-light)',
         'k-primary': 'var(--k-primary)',
         'k-primary-light': 'var(--k-primary-light)',
-        'k-shade': 'var(--k-shade)',
+        'k-shade': 'rgb(var(--k-shade) / <alpha-value>)',
         'placeholder-color': 'var(--placeholder-color)',
         disabled: 'var(--disabled)',
         'card-border-color': 'var(--card-border-color)',
@@ -50,6 +50,7 @@ module.exports = {
         'separator-line-color': 'var(--separator-line-color)',
         'toggle-primary': 'var(--toggle-primary)',
         'toggle-active-switch': 'var(--toggle-active-switch)',
+        'steps-active-color': 'rgb(var(--steps-active-color) / <alpha-value>)',
 
         neutral: {
           1: '#ffffff',