vueless 0.0.505 → 0.0.507

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.505",
+  "version": "0.0.507",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button/UButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, watchEffect, useId, watch } from "vue";
 
+import { useDarkMode } from "../composables/useDarkMode.ts";
 import { getDefault } from "../utils/ui.ts";
 import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -31,11 +32,13 @@ const props = withDefaults(defineProps<UButtonProps>(), {
 
 const elementId = props.id || useId();
 
+const { isDarkMode } = useDarkMode();
+
 const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
   useAttrs(props);
 
 const buttonRef = ref(null);
-const buttonStyle = ref(null);
+const buttonStyle = ref({});
 const buttonWidth = ref(0);
 
 const loaderSize = computed(() => {
@@ -65,7 +68,9 @@ const iconSize = computed(() => {
 });
 
 const iconColor = computed(() => {
-  return props.variant === "primary" ? "white" : props.color;
+  const primaryColor = isDarkMode.value ? "black" : "white";
+
+  return props.variant === "primary" ? primaryColor : props.color;
 });
 
 watch(

package/ui.button/config.ts

@@ -1,11 +1,14 @@
 export default /*tw*/ {
   button: {
     base: `
-      flex items-center justify-center transition
-      border font-medium outline-none whitespace-nowrap
-      focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
-      focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      disabled:ring-0 disabled:ring-offset-0 disabled:cursor-not-allowed cursor-pointer
+      flex items-center justify-center font-medium whitespace-nowrap
+      border border-transparent outline-none transition
+      disabled:cursor-not-allowed cursor-pointer
+      disabled:ring-0 disabled:ring-offset-0
+      focus:ring-dynamic             focus-within:ring-dynamic
+      focus:ring-offset-dynamic      focus-within:ring-offset-dynamic
+      focus:ring-{color}-700/15      focus-within:ring-{color}-700/15
+      dark:focus:ring-{color}-500/15 dark:focus-within:ring-{color}-500/15
     `,
     variants: {
       size: {
@@ -18,27 +21,26 @@ export default /*tw*/ {
       },
       variant: {
         primary: `
-          text-white
-          bg-{color}-600 border-{color}-600
-          hover:bg-{color}-700 hover:border-{color}-700
-          focus:bg-{color}-700 focus:border-{color}-700
-          active:bg-{color}-800 active:border-{color}-800
-          disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
+          text-white            dark:text-gray-900
+          bg-{color}-600        dark:bg-{color}-400
+          hover:bg-{color}-700  dark:hover:bg-{color}-500
+          focus:bg-{color}-700  dark:focus:bg-{color}-500
+          active:bg-{color}-800 dark:active:bg-{color}-600
+          disabled:bg-gray-400  dark:disabled:bg-gray-600
         `,
         secondary: `
-          text-{color}-600 border-{color}-600
-          hover:text-{color}-700 hover:border-{color}-700
-          focus:text-{color}-700 focus:border-{color}-700
-          active:text-{color}-800 active:border-{color}-800
-          disabled:text-gray-400 disabled:border-gray-400
+          text-{color}-600        border-{color}-600        dark:text-{color}-400        dark:border-{color}-400
+          hover:text-{color}-700  hover:border-{color}-700  dark:hover:text-{color}-500  dark:hover:border-{color}-500
+          focus:text-{color}-700  focus:border-{color}-700  dark:focus:text-{color}-500  dark:focus:border-{color}-500
+          active:text-{color}-800 active:border-{color}-800 dark:active:text-{color}-600 dark:active:border-{color}-600
+          disabled:text-gray-400  disabled:border-gray-400  dark:disabled:text-gray-600  dark:disabled:border-gray-600
         `,
         thirdary: `
-          border-transparent
-          text-{color}-600
-          hover:text-{color}-700 hover:bg-{color}-700/10
-          focus:text-{color}-700 focus:bg-{color}-700/10
-          active:text-{color}-800 active:bg-{color}-800/15
-          disabled:text-gray-400 disabled:bg-transparent
+          text-{color}-600                                 dark:text-{color}-400
+          hover:text-{color}-700  hover:bg-{color}-700/10  dark:hover:text-{color}-500  dark:hover:bg-{color}-500/10
+          focus:text-{color}-700  focus:bg-{color}-700/10  dark:focus:text-{color}-500  dark:focus:bg-{color}-500/10
+          active:text-{color}-800 active:bg-{color}-800/15 dark:active:text-{color}-600 dark:active:bg-{color}-600/15
+          disabled:text-gray-400  disabled:bg-transparent  dark:disabled:text-gray-600  dark:disabled:bg-transparent
         `,
       },
       round: {
@@ -54,87 +56,88 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
-      color: {
-        grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
-        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
-      },
     },
     compoundVariants: [
+      {
+        color: ["grayscale", "white"],
+        class: `
+          focus:ring-gray-700/15        dark:focus:ring-gray-500/15
+          focus-within:ring-gray-700/15 dark:focus-within:ring-gray-500/15
+        `,
+      },
       {
         color: "grayscale",
         variant: "primary",
         class: `
-          bg-gray-900 border-gray-900
-          hover:bg-gray-800 hover:border-gray-800
-          focus:bg-gray-800 focus:border-gray-800
-          active:bg-gray-700 active:border-gray-700
+          bg-gray-900        dark:bg-gray-100
+          hover:bg-gray-800  dark:hover:bg-gray-200
+          focus:bg-gray-800  dark:focus:bg-gray-200
+          active:bg-gray-700 dark:active:bg-gray-300
         `,
       },
       {
         color: "grayscale",
         variant: "secondary",
         class: `
-          text-gray-900 border-gray-900
-          hover:text-gray-800 hover:border-gray-800
-          focus:text-gray-800 focus:border-gray-800
-          active:text-gray-700 active:border-gray-700
+          text-gray-900        border-gray-900        dark:text-gray-100         dark:border-gray-100
+          hover:text-gray-800  hover:border-gray-800  dark:hover:text-gray-200   dark:hover:border-gray-200
+          focus:text-gray-800  focus:border-gray-800  dark:focus:text-gray-200   dark:focus:border-gray-200
+          active:text-gray-700 active:border-gray-700 dark:active:focus-gray-300 dark:active:border-gray-300
         `,
       },
       {
         color: "grayscale",
         variant: "thirdary",
         class: `
-          text-gray-900
-          hover:text-gray-800 hover:bg-gray-800/15
-          focus:text-gray-800 focus:bg-gray-800/15
-          active:text-gray-700 active:bg-gray-700/20
+          text-gray-900                              dark:text-gray-100
+          hover:text-gray-800  hover:bg-gray-800/15  dark:hover:text-gray-200  dark:hover:bg-gray-200/15
+          focus:text-gray-800  focus:bg-gray-800/15  dark:focus:text-gray-200  dark:focus:bg-gray-200/15
+          active:text-gray-700 active:bg-gray-700/20 dark:active:text-gray-300 dark:active:bg-gray-300/20
         `,
       },
       {
         color: "white",
-        variant: "primary",
         class: `
-          text-gray-900 border-white bg-white
-          hover:text-gray-800 hover:border-gray-50 hover:bg-gray-50
-          focus:text-gray-800 focus:border-gray-50 focus:bg-gray-50
-          active:text-gray-700 active:border-gray-100 active:bg-gray-100
+          text-gray-900        dark:text-white
+          hover:text-gray-800  dark:hover:text-gray-100
+          focus:text-gray-800  dark:focus:text-gray-100
+          active:text-gray-700 dark:active:text-gray-200
         `,
       },
       {
         color: "white",
-        variant: "secondary",
+        variant: "primary",
         class: `
-          text-gray-900 border-gray-200
-          hover:text-gray-800 hover:border-gray-300
-          focus:text-gray-800 focus:border-gray-300
-          active:text-gray-700 active:border-gray-400
+          bg-white           dark:text-gray-900
+          hover:bg-gray-50   dark:hover:text-gray-800
+          focus:bg-gray-50   dark:focus:text-gray-800
+          active:bg-gray-100 dark:active:text-gray-700
         `,
       },
+      {
+        color: "white",
+        variant: "secondary",
+        class: "border-gray-100 hover:border-gray-200 focus:border-gray-200 active:border-gray-300",
+      },
       {
         color: "white",
         variant: "thirdary",
-        class: `
-          text-gray-900
-          hover:text-gray-800 hover:bg-white/15
-          focus:text-gray-800 focus:bg-white/15
-          active:text-gray-700 active:bg-white/20
-        `,
+        class: "hover:bg-white/10 focus:bg-white/10 active:bg-white/15",
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-600/10" },
-      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900/10" },
-      { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
-      { leftIcon: true, size: "2xs", class: "pl-1" },
-      { leftIcon: true, size: "xs", class: "pl-2" },
-      { leftIcon: true, size: "sm", class: "pl-3" },
-      { leftIcon: true, size: "md", class: "pl-4" },
-      { leftIcon: true, size: "lg", class: "pl-5" },
-      { leftIcon: true, size: "xl", class: "pl-6" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-600/10 dark:bg-{color}-400/10" },
+      { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-900/5 dark:bg-gray-200/5" },
       { rightIcon: true, size: "2xs", class: "pr-1" },
       { rightIcon: true, size: "xs", class: "pr-2" },
       { rightIcon: true, size: "sm", class: "pr-3" },
       { rightIcon: true, size: "md", class: "pr-4" },
       { rightIcon: true, size: "lg", class: "pr-5" },
       { rightIcon: true, size: "xl", class: "pr-6" },
+      { leftIcon: true, size: "2xs", class: "pl-1" },
+      { leftIcon: true, size: "xs", class: "pl-2" },
+      { leftIcon: true, size: "sm", class: "pl-3" },
+      { leftIcon: true, size: "md", class: "pl-4" },
+      { leftIcon: true, size: "lg", class: "pl-5" },
+      { leftIcon: true, size: "xl", class: "pl-6" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2" },

package/ui.button/storybook/stories.ts

@@ -12,6 +12,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import { useDarkMode } from "../../composables/useDarkMode.ts";
+
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { UButtonProps } from "../types.ts";
 
@@ -182,7 +184,9 @@ export const IconProps: StoryFn<UButtonArgs> = (args) => ({
 export const Slots: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, UIcon, URow },
   setup() {
-    return { args };
+    const { isDarkMode } = useDarkMode();
+
+    return { args, isDarkMode };
   },
   template: `
     <URow no-mobile>
@@ -190,8 +194,9 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
         <template #left>
           <UIcon
             name="heart_plus"
-            color="green"
             size="sm"
+            color="green"
+            :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
       </UButton>
@@ -200,8 +205,9 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
         <template #default>
           <UIcon
             name="settings"
-            color="green"
             size="sm"
+            color="green"
+            :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
       </UButton>
@@ -210,8 +216,9 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
         <template #right>
           <UIcon
             name="delete"
-            color="green"
             size="sm"
+            color="green"
+            :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
       </UButton>

package/ui.image-icon/UIcon.vue

@@ -41,7 +41,7 @@ const props = defineProps({
 
   /**
    * Icon color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
    */
   color: {
     type: String,

package/ui.image-icon/config.ts

@@ -3,13 +3,14 @@ export default /*tw*/ {
     base: "fill-current outline-0 shrink-0 grow-0",
     variants: {
       variant: {
-        light: "text-{color}-400",
-        default: "text-{color}-600",
-        dark: "text-{color}-800",
+        light: "text-{color}-400 dark:text-{color}-200",
+        default: "text-{color}-600 dark:text-{color}-400",
+        dark: "text-{color}-800 dark:text-{color}-600",
       },
       color: {
         white: "text-white",
-        grayscale: "text-gray-900",
+        black: "text-gray-900",
+        grayscale: "text-gray-900 dark:text-white",
       },
       interactive: {
         true: "cursor-pointer",

package/ui.loader/ULoader.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
   /**
    * Loader color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
    */
   color: {
     type: String,

package/ui.loader/config.js

@@ -20,7 +20,8 @@ export default /*tw*/ {
     variants: {
       color: {
         white: "bg-white",
-        grayscale: "bg-gray-900",
+        black: "bg-gray-900",
+        grayscale: "bg-gray-900 dark:bg-white",
       },
       size: {
         sm: `

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -3,12 +3,7 @@
     <div v-if="showLoader" v-bind="overlayAttrs">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
-        <ULoader
-          :loading="showLoader"
-          size="lg"
-          :color="color === 'white' ? 'grayscale' : 'white'"
-          v-bind="nestedLoaderAttrs"
-        />
+        <ULoader :loading="showLoader" size="lg" :color="loaderColor" v-bind="nestedLoaderAttrs" />
       </slot>
     </div>
   </Transition>
@@ -16,7 +11,9 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted } from "vue";
+
 import { getDefault } from "../utils/ui.ts";
+import { useDarkMode } from "../composables/useDarkMode.ts";
 
 import ULoader from "../ui.loader/ULoader.vue";
 
@@ -38,7 +35,7 @@ const props = defineProps({
 
   /**
    * Loader color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, black, white
    */
   color: {
     type: String,
@@ -48,6 +45,14 @@ const props = defineProps({
 
 const { overlayAttrs, nestedLoaderAttrs, config } = useAttrs(props);
 const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();
+const { isDarkMode } = useDarkMode();
+
+const loaderColor = computed(() => {
+  if (props.color === "white") return "black";
+  if (props.color === "black") return "white";
+
+  return isDarkMode.value ? "white" : "black";
+});
 
 onMounted(() => {
   window.addEventListener("loaderOverlayOn", loaderOverlayOn);

package/ui.loader-overlay/config.js

@@ -5,7 +5,7 @@ export default /*tw*/ {
   },
   overlay: {
     base: `
-      bg-{color}-600
+      bg-{color}-100 dark:bg-{color}-950
       h-screen w-screen
       flex justify-center items-center
       fixed left-0 top-0 z-[9999]
@@ -14,7 +14,8 @@ export default /*tw*/ {
     variants: {
       color: {
         white: "bg-white",
-        grayscale: "bg-gray-800",
+        black: "bg-gray-900",
+        grayscale: "bg-gray-100 dark:bg-gray-900",
       },
     },
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.505",
+  "version": "0.0.507",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5411,6 +5411,7 @@
                 "fuchsia",
                 "pink",
                 "rose",
+                "black",
                 "white"
               ],
               "value": {
@@ -7355,6 +7356,7 @@
                 "fuchsia",
                 "pink",
                 "rose",
+                "black",
                 "white"
               ],
               "value": {
@@ -7425,6 +7427,7 @@
                 "fuchsia",
                 "pink",
                 "rose",
+                "black",
                 "white"
               ],
               "value": {