Merge pull request #8361 from roiLeo/chore/ui/switch

🔧 switch to tailwind & fix histoire darkmode
kodadot · Dec 4, 2023 · f457636 · f457636
2 parents b997bfb + 0d05820
commit f457636
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 62 deletions.
diff --git a/libs/ui/histoire.config.ts b/libs/ui/histoire.config.ts
@@ -5,8 +5,10 @@ import { resolve } from 'path'
 import { searchForWorkspaceRoot } from 'vite'
 
 export default defineConfig({
-  sandboxDarkClass: 'dark-mode',
   setupFile: '/src/histoire.setup.ts',
+  theme: {
+    darkClass: 'dark-mode',
+  },
   plugins: [HstVue()],
   vite: {
     // https://stackoverflow.com/questions/74902697/error-the-request-url-is-outside-of-vite-serving-allow-list-after-git-init

diff --git a/libs/ui/src/components/NeoSwitch/NeoSwitch.scss b/libs/ui/src/components/NeoSwitch/NeoSwitch.scss
@@ -6,29 +6,22 @@
 
 $switch-padding: 0;
 $switch-width: 3rem;
+$switch-background: #{var(--background-color)};
+$switch-border-color: #{var(--border-color)};
+$switch-active-background-color: #{var(--toggle-primary)};
+$switch-action-background: #{var(--toggle-active-switch)};
+$switch-action-checked-background: #{var(--background-color)};
 
 @import '@oruga-ui/oruga-next/src/scss/components/_switch.scss';
 
 .o-switch {
-  @include ktheme() {
-    --oruga-switch-background: #{theme('background-color')};
-    --oruga-switch-border-color: #{theme('border-color')};
-    --oruga-switch-active-background-color: #{theme('toggle-primary')};
-    --oruga-switch-action-background: #{theme('toggle-active-switch')};
-    --oruga-switch-action-checked-background: #{theme('background-color')};
-  }
   &__check-switch {
-    height: 1.5rem;
-    width: 1.5rem;
-    border: 1px solid var(--oruga-switch-border-color);
-    margin-left: -1px;
-    box-shadow: none;
+    @apply h-6 w-6 shadow-none border border-border-color -ml-px;
   }
   &__check {
-    height: 1.5rem;
-    border: 1px solid;
+    @apply h-6 border;
   }
   &__check--checked &__check-switch {
-    background-color: var(--oruga-switch-action-checked-background);
+    @apply bg-background-color;
   }
 }
diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss
@@ -10,7 +10,7 @@
   }
 
   :root,
-  :root.light-mode {
+  :root .light-mode {
     --text-color: var(--black);
     --text-color-inverse: var(--white);
     --border-color: var(--black);
@@ -58,54 +58,11 @@
     --toggle-active-switch: #d9d9d9;
   }
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --black: #191718;
-      --text-color: var(--white);
-      --text-color-inverse: var(--black);
-      --background-color: var(--black);
-      --background-color-inverse: var(--white);
-      --link-hover: #cccccc;
-      --border-color: var(--white);
-      --k-accent: #191718;
-      --k-accent-hover: #363234;
-      --k-accent-light-2: #363234;
-      --k-accent-light-2-dark: var(--white);
-      --k-accent-light-2-dark-head: var(--white);
-      --k-accent-light-2-dark-paragraph: #b9b9b9;
-      --k-red-accent: #b52c2c;
-      --k-red-accent-2: #390b0b;
-      --k-grey: #cccccc;
-      --k-grey-fix: #999999;
-      --k-pink: #7a2a68;
-      --k-yellow: #363234;
-      --k-blue-accent: #2e50a2;
-      --k-aqua-blue: #106153;
-      --k-green-accent: #056a02;
-      --k-green-accent-2: #0a3009;
-      --k-blue-light: #363234;
-      --k-primary-light: #363234;
-      --k-shade: #999999;
-      --primary-shadow: 4px 4px #fff;
-      --disabled: var(--black);
-      --card-border-color: #6b6b6b;
-      --card-border-color-light: #6b6b6b;
-      --green-border-color: #056a02;
-      --blue-accent-bg-color: #363234;
-      --blue-light-hover-color: #363234;
-      --blue-light-cards: #121d39;
-      --card-hover-opacity: 0.8;
-      --separator-line-color: #6b6b6b;
-      --toggle-primary: var(--white);
-      --toggle-active-switch: #363234;
-    }
-  }
-
-  :root.dark-mode {
+  .dark-mode {
     --black: #191718;
     --text-color: var(--white);
     --text-color-inverse: var(--black);
-    --background-color: var(--black);
+    --background-color: #191718;
     --background-color-inverse: var(--white);
     --link-hover: #cccccc;
     --border-color: var(--white);