feat: change default theme from config

saadeghi · May 26, 2021 · 545fe70 · 545fe70
1 parent 7ea3c73
commit 545fe70
Show file tree

Hide file tree

Showing 17 changed files with 146 additions and 125 deletions.
diff --git a/colors/index.js b/colors/index.js
@@ -8,12 +8,12 @@ let colorObject = {
 for (const [key, item] of Object.entries(colorValues)) {
   colorObject[key] = ({ opacityVariable, opacityValue }) => {
     if (opacityValue !== undefined) {
-      return `hsla(var(--`+ item['name'] +`, `+ item['value'] +`) / ${opacityValue})`
+      return `hsla(var(--`+ item['name'] +`) / ${opacityValue})`
     }
     if (opacityVariable !== undefined) {
-      return `hsla(var(--`+ item['name'] +`, `+ item['value'] +`) / var(${opacityVariable}, 1))`
+      return `hsla(var(--`+ item['name'] +`) / var(${opacityVariable}, 1))`
     }
-    return `hsl(var(--`+ item['name'] +`, `+ item['value']+ `))`
+    return `hsl(var(--`+ item['name'] +`))`
   }
 }
 

diff --git a/colors/windi.js b/colors/windi.js
@@ -6,7 +6,7 @@ let colorObject = {
 }
 
 for (const [key, item] of Object.entries(colorValues)) {
-  colorObject[key] = `hsla(var(--${item.name}, ${item.value}) / var(--tw-bg-opacity, 1))`
+  colorObject[key] = `hsla(var(--${item.name}) / var(--tw-bg-opacity, 1))`
 }
 
 module.exports = colorObject
diff --git a/index.js b/index.js
@@ -6,7 +6,6 @@ const styled = require("./dist/styled")
 const styledRtl = require("./dist/styled.rtl")
 const colors = require("./colors/index")
 const resets_general = require('./dist/resets/general')
-const themes = require("./dist/themes")
 
 const utilities_borderRadius = require('./dist/utilities/borderRadius')
 const utilities_fontSize = require('./dist/utilities/fontSize')
@@ -56,18 +55,76 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   }
 
   // inject themes
-  if (Array.isArray( config('daisyui.themes') )) {
-    let diasyuiIncludedThemes = []
-    config('daisyui.themes').forEach(theme => {
-      addComponents(require("./dist/themes/"+theme))
-      diasyuiIncludedThemes.push(theme)
+  let includedThemesObj = new Object()
+  let themesArray = [
+    'light',
+    'dark',
+    'cupcake',
+    'bumblebee',
+    'emerald',
+    'corporate',
+    'synthwave',
+    'retro',
+    'cyberpunk',
+    'valentine',
+    'halloween',
+    'garden',
+    'forest',
+    'aqua',
+    'lofi',
+    'pastel',
+    'fantasy',
+    'wireframe',
+    'black',
+    'luxury',
+    'dracula',
+  ]
+  let ValidThemes = themesArray
+
+  if (config('daisyui.themes') != false) {
+    if (Array.isArray( config('daisyui.themes') )) {
+      themesArray = config('daisyui.themes')
+    }
+    // if (themesArray.includes("dark")) {
+    //   console.log(themesArray)
+    //   themesArray = ['dark', ...themesArray.filter(item => item !== 'dark')]
+    //   console.log(themesArray)
+    // }
+
+    themesArray.forEach((theme, index) => {
+      try {
+        if (index === 0) { // first theme as default
+          includedThemesObj[':root'] = require("./dist/themes/"+theme)['[data-theme='+theme+']']
+        }else if (index === 1) {
+          if (themesArray[0] !== 'dark') {
+            // auto dark
+            includedThemesObj['@media (prefers-color-scheme: dark)'] = {':root': require("./dist/themes/dark")['[data-theme=dark]']}
+          }
+          // first theme with name
+          includedThemesObj['[data-theme='+themesArray[0]+']'] = require("./dist/themes/"+themesArray[0])['[data-theme='+themesArray[0]+']']
+          includedThemesObj['[data-theme='+theme+']'] = require("./dist/themes/"+theme)['[data-theme='+theme+']']
+        }else{
+          // the rest
+          includedThemesObj['[data-theme='+theme+']'] = require("./dist/themes/"+theme)['[data-theme='+theme+']']
+        }
+
+
+
+      }
+      catch (e) {
+        console.log(`\n\n\x1b[33;1m! warning\x1b[0m - Invalid theme name in \x1b[34mtailwind.config.js\x1b[0m: \x1b[31m'${theme}'\x1b[0m`)
+        console.log(`Only these theme names are valid:`)
+        console.log(ValidThemes)
+        console.log(`\n\n`)
+      }
+
     });
-    diasyuiIncludedItems.push('selected themes(' + diasyuiIncludedThemes.length + ')')
-  }
-  else if (config('daisyui.themes') != false) {
-    addComponents(themes)
-    diasyuiIncludedItems.push('themes')
+    diasyuiIncludedItems.push('themes[' + themesArray.length + ']')
+  }else{
+    includedThemesObj[':root'] = require("./dist/themes/light")['[data-theme=light]']
+    diasyuiIncludedItems.push('default theme')
   }
+  addBase(includedThemesObj)
 
   // inject @utilities style needed by components
   if (config('daisyui.utils') != false) {
@@ -86,15 +143,15 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
       console.log(`\n\x1b[33;1m! warning\x1b[0m - unable to require \x1b[36mtailwindcss/plugin\x1b[0m
 DaisyUI color are now only available for DaisyUI components.
 If you want to use DaisyUI color as utility classes (like 'bg-primary')
-you need to add this to your \x1b[36mtailwind.config.js\x1b[0m file:
+you need to add this to your \x1b[34mtailwind.config.js\x1b[0m file:
 ───────────────────────────────────────
-\x1b[36mmodule.exports = {
+\x1b[34mmodule.exports = {
   \x1b[32mtheme: {
     extend: {
       colors: require('daisyui/colors'),
     },
   },\x1b[0m
-\x1b[36m}\x1b[0m
+\x1b[34m}\x1b[0m
 ───────────────────────────────────────  
       `)
     }

diff --git a/src/components/styled/avatar.css b/src/components/styled/avatar.css
@@ -5,7 +5,7 @@
       @apply block w-2 h-2 bg-success rounded-full absolute z-10;
       top: 5%;
       right: 5%;
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%));
+      box-shadow: 0 0 0 2px hsl(var(--b1));
     }
   }
   &.offline{
@@ -14,7 +14,7 @@
       @apply block w-2 h-2 bg-base-300 rounded-full absolute z-10;
       top: 5%;
       right: 5%;
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%));
+      box-shadow: 0 0 0 2px hsl(var(--b1));
     }
   }
 }

diff --git a/src/components/styled/button.css b/src/components/styled/button.css
@@ -20,7 +20,7 @@
       @apply bg-neutral-focus border-neutral-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--nf, 222 13% 19%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--nf));
     }
   }
   /* brand colors */
@@ -31,7 +31,7 @@
       @apply bg-primary-focus border-primary-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   &-secondary {
@@ -41,7 +41,7 @@
       @apply bg-secondary-focus border-secondary-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
   }
   &-accent {
@@ -51,7 +51,7 @@
       @apply bg-accent-focus border-accent-focus;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
   }
 
@@ -64,7 +64,7 @@
       @apply bg-info border-info;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
     }
   }
   &-success {
@@ -74,7 +74,7 @@
       @apply bg-success border-success;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
     }
   }
   &-warning {
@@ -84,7 +84,7 @@
       @apply bg-warning border-warning;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
     }
   }
   &-error {
@@ -94,7 +94,7 @@
       @apply bg-error border-error;
     }
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
     }
   }
 
@@ -188,7 +188,7 @@
   & > .btn-active {
     @apply bg-primary border-primary text-primary-content;
     &:focus-visible {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   & > .btn:not(:first-child) {

diff --git a/src/components/styled/checkbox.css b/src/components/styled/checkbox.css
@@ -20,7 +20,7 @@
   }
   &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
     & ~ .checkbox-mark{
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--bc, 215 28% 17%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
     }
   }
   &:checked{
@@ -45,7 +45,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .checkbox-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
       }
     }
     &:checked{
@@ -69,7 +69,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .checkbox-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
       }
     }
     &:checked{
@@ -93,7 +93,7 @@
     }
     &:focus-visible,&:checked:focus-visible,&:checked:hover:focus-visible {
       & ~ .checkbox-mark{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
       }
     }
     &:checked{

diff --git a/src/components/styled/drawer.css b/src/components/styled/drawer.css
@@ -22,27 +22,27 @@
   }
   &:focus-visible{
     & ~ .drawer-content .drawer-button{
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--nf, 222 13% 19%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--nf));
       &.btn-primary{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
       }
       &.btn-secondary{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
       }
       &.btn-accent{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
       }
       &.btn-info{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
       }
       &.btn-success{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
       }
       &.btn-warning{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
       }
       &.btn-error{
-        box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+        box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
       }
       &.glass{
         box-shadow: 0 0 0 2px currentColor;

diff --git a/src/components/styled/input.css b/src/components/styled/input.css
@@ -4,7 +4,7 @@
     @apply border-opacity-20;
   }
   &:focus {
-    box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsla(var(--bc, 215 28% 17%)/.2);
+    box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsla(var(--bc)/.2);
   }
   &-ghost {
     @apply bg-opacity-5;
@@ -15,43 +15,43 @@
   &-primary {
     @apply border-primary;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--p, 259 94% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
   }
   &-secondary {
     @apply border-secondary;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--s, 314 100% 47%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
   }
   &-accent {
     @apply border-accent;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--a, 174 60% 51%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
   }
   &-info {
     @apply border-info;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--in, 207 90% 54%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--in));
     }
   }
   &-success {
     @apply border-success;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--su, 174 100% 29%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--su));
     }
   }
   &-warning {
     @apply border-warning;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--wa, 36 100% 50%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--wa));
     }
   }
   &-error {
     @apply border-error;
     &:focus {
-      box-shadow: 0 0 0 2px hsl(var(--b1, 0 0% 100%)), 0 0 0 4px hsl(var(--er, 14 100% 57%));
+      box-shadow: 0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--er));
     }
   }
   &-disabled,