NeoSkeleton to tailwindcss

kodadot · Dec 12, 2023 · 71d8568 · 71d8568
1 parent 79b4398
commit 71d8568
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 27 deletions.
diff --git a/libs/ui/src/components/NeoSkeleton/NeoSkeleton.scss b/libs/ui/src/components/NeoSkeleton/NeoSkeleton.scss
@@ -2,7 +2,6 @@
 @import '@oruga-ui/oruga-next/src/scss/utilities/variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/animations.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/helpers.scss';
-@import '../../scss/variable.scss';
 
 $grey-darker: hsl(0, 0%, 21%);
 $grey-dark: hsl(0, 0%, 29%);
@@ -12,44 +11,27 @@ $grey-lighter: hsl(0, 0%, 86%);
 $grey-lightest: hsl(0, 0%, 93%);
 $skeleton-margin: 0.25rem;
 $base-border-radius: 4px;
-$skeleton-border-radius: var(--border-radius, $base-border-radius); 
-
-@function skeletonGradient($color) {
-  @return linear-gradient(
-    90deg,
-    theme($color) 25%,
-    rgba(theme($color), 0.5) 50%,
-    theme($color) 75%
-  );
-}
+$skeleton-border-radius: var(--border-radius, $base-border-radius);
 
 .neo-skeleton {
   &-item {
     &.no-margin {
-      margin: 0 !important;
+      @apply m-0 #{!important};
     }
 
-    background-size: 400% 100%!important;
+    @apply bg-[length:400%_100%] #{!important};
 
     &--k-shade {
-      @include ktheme() {
-        background: skeletonGradient('k-shade')
-      }
+      @apply bg-gradient-to-r from-k-shade from-25% via-k-shade/50 via-50% to-k-shade to-75%;
     }
 
     &--k-grey-light {
-      @include ktheme() {
-        background: skeletonGradient('k-grey-light')
-      }
+      @apply bg-gradient-to-r from-k-grey-light from-25% via-k-grey-light/50 via-50% to-k-grey-light to-75%;
     }
   }
 
   &-full-size {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+    @apply absolute left-0 top-0 w-full h-full;
   }
 }
 

diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss
@@ -32,6 +32,7 @@
     --k-red-accent-2: #ffe6e6;
     --k-grey: #999999;
     --k-grey-fix: #999999;
+    --k-grey-light: 245 245 245;
     --k-pink: #ffb6ef;
     --k-yellow: #feffb6;
     --k-blue-accent: #b6cbff;
@@ -44,7 +45,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;
@@ -78,6 +79,7 @@
     --k-red-accent-2: #390b0b;
     --k-grey: #cccccc;
     --k-grey-fix: #999999;
+    --k-grey-light: 31 31 31;
     --k-pink: #7a2a68;
     --k-yellow: #363234;
     --k-blue-accent: #2e50a2;
@@ -86,7 +88,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
@@ -27,6 +27,7 @@ module.exports = {
         'k-red-accent-2': 'var(--k-red-accent-2)',
         'k-grey': 'var(--k-grey)',
         'k-grey-fix': 'var(--k-grey-fix)',
+        'k-grey-light': 'rgb(var(--k-grey-light) / <alpha-value>)',
         'k-pink': 'var(--k-pink)',
         'k-yellow': 'var(--k-yellow)',
         'k-blue-accent': 'var(--k-blue-accent)',
@@ -39,7 +40,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)',