vueless 0.0.232 → 0.0.234

package/composable.ui/index.js

@@ -20,24 +20,7 @@ import {
 } from "../service.ui";
 
 import { cloneDeep } from "../service.helper";
-
-const STRATEGY_TYPE = {
-  merge: "merge",
-  replace: "replace",
-  overwrite: "overwrite",
-};
-
-const SYSTEM_CONFIG_KEY = {
-  i18n: "i18n",
-  strategy: "strategy",
-  safelist: "safelist",
-  component: "component",
-  safelistColors: "safelistColors",
-  defaultVariants: "defaultVariants",
-  compoundVariants: "compoundVariants",
-  iconNameCapitalize: "IconName",
-  iconName: "iconName",
-};
+import { STRATEGY_TYPE, SYSTEM_CONFIG_KEY } from "../constants";
 
 /**
   Merging component configs in a given sequence (bigger number = bigger priority):

package/constants/index.js

@@ -0,0 +1,65 @@
+/* Custom Vueless colors */
+export const BRAND_COLOR = "brand";
+export const GRAY_COLOR = "gray";
+export const COOL_COLOR = "cool";
+export const GRAYSCALE_COLOR = "grayscale";
+
+/* Vueless dark mode */
+export const DARK_MODE_SELECTOR = "vl-dark-mode";
+
+/* Vueless defaults */
+export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
+export const DEFAULT_GRAY_COLOR = COOL_COLOR;
+export const DEFAULT_RING = 4; /* pixels */
+export const DEFAULT_RING_OFFSET = 0; /* pixels */
+export const DEFAULT_ROUNDING = 8; /* pixels */
+
+/* Vueless supported colors and shades */
+export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+export const GRAY_COLORS = ["slate", COOL_COLOR, "zinc", "neutral", "stone"];
+export const BRAND_COLORS = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+];
+
+/* Vueless merge class strategy types */
+export const STRATEGY_TYPE = {
+  merge: "merge",
+  replace: "replace",
+  overwrite: "overwrite",
+};
+
+/* CVA (Class Variance Authority) default config keys */
+export const CVA_CONFIG_KEY = {
+  base: "base",
+  variants: "variants",
+  compoundVariants: "compoundVariants",
+  defaultVariants: "defaultVariants",
+};
+
+/* Vueless default config keys */
+export const SYSTEM_CONFIG_KEY = {
+  i18n: "i18n",
+  strategy: "strategy",
+  safelist: "safelist",
+  component: "component",
+  safelistColors: "safelistColors",
+  iconNameCapitalize: "IconName",
+  iconName: "iconName",
+  ...CVA_CONFIG_KEY,
+};

package/index.js

@@ -3,6 +3,7 @@ import { createLocale, LocaleSymbol } from "./composable.locale";
 import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/composables/useLoaderRendering";
 import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/useLoaderTop";
 
+export { setTheme } from "./service.ui";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
 export { useLocale } from "./composable.locale";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.232",
+  "version": "0.0.234",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.40",
+    "@vueless/plugin-vite": "^0.0.43",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/preset.tailwind/index.js

@@ -1,41 +1,44 @@
 import forms from "@tailwindcss/forms";
-import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_COLOR } from "./constants/index.js";
+import defaultTheme from "tailwindcss/defaultTheme.js";
+import {
+  COLOR_SHADES,
+  BRAND_COLOR,
+  GRAY_COLOR,
+  COOL_COLOR,
+  DARK_MODE_SELECTOR,
+} from "../constants/index.js";
 
 const safelist = getSafelist();
+const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
+
+/**
+ * Vueless Tailwind CSS `content` config.
+ * Use it to extend project Tailwind CSS `content` config.
+ */
+export const vuelessContent = [
+  "./index.html",
+  "./src/**/*.{js,ts,jsx,tsx,vue}",
+  "./vueless.config.{js,ts}",
+  "./node_modules/vueless/**/*.{js,ts,vue}",
+  ...(isStrategyOverride ? ["!./src/**/ui.*/**/configs/default.config.js"] : []),
+  ...(isStrategyOverride ? ["!./node_modules/vueless/**/ui.*/**/configs/default.config.js"] : []),
+];
 
 /**
  * Generates preset for TailwindCSS base on Vueless config.
  * @returns {Object}
  */
 export function vuelessPreset() {
-  const brandColor = twColorWithOpacity("--color-brand");
-  const { brand, gray } = getVuelessConfigColors();
-  const colors = getTailwindConfigColors();
-
-  if (!Object.keys(colors).length) {
-    return {};
-  }
-
-  let brandPalette = BRAND_COLORS.includes(brand) ? colors[brand] : colors.green;
-  let grayPalette = GRAY_COLORS.includes(gray) ? colors[gray] : colors.zinc;
-
-  if (brand === GRAYSCALE_COLOR) {
-    brandPalette = grayPalette;
-  }
-
   return {
-    content: [
-      "./index.html",
-      "./src/**/*.{js,ts,jsx,tsx,vue}",
-      "./vueless.config.{js,ts}",
-      "./node_modules/vueless/**/*.{js,ts,vue}",
-    ],
+    darkMode: DARK_MODE_SELECTOR,
+    content: vuelessContent,
     safelist,
     theme: {
       extend: {
         colors: {
-          brand: { ...brandPalette, DEFAULT: brandColor },
-          gray: grayPalette,
+          [BRAND_COLOR]: getPalette(BRAND_COLOR),
+          [GRAY_COLOR]: getPalette(GRAY_COLOR),
+          [COOL_COLOR]: { ...defaultTheme.colors[GRAY_COLOR] },
         },
         spacing: {
           "safe-top": "env(safe-area-inset-top)",
@@ -44,7 +47,16 @@ export function vuelessPreset() {
           "safe-right": "env(safe-area-inset-right)",
         },
         fontSize: {
-          "2xs": ["0.625rem", "0.875rem"], //  10px
+          "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
+        },
+        ringWidth: {
+          dynamic: "var(--vl-ring)",
+        },
+        ringOffsetWidth: {
+          dynamic: "var(--vl-ring-offset)",
+        },
+        borderRadius: {
+          dynamic: "var(--vl-rounding)",
         },
       },
     },
@@ -54,6 +66,7 @@ export function vuelessPreset() {
 
 /**
  * Transform CSS variable with RGB numbers into CSS color.
+ * @param { String } variableName
  * @returns {Function}
  */
 function twColorWithOpacity(variableName) {
@@ -65,19 +78,20 @@ function twColorWithOpacity(variableName) {
 }
 
 /**
- * Convert sting to object.
- * @returns {Object} - TailwindCSS safelist.
+ * Convert sting patterns to RegExp.
+ * @param { String } color (gray | brand)
+ * @returns { Object } - TailwindCSS color object palette.
  */
-function getTailwindConfigColors() {
-  return JSON.parse(process.env.VUELESS_TAILWIND_CONFIG_COLORS || "{}");
-}
+function getPalette(color) {
+  let palette = {
+    DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
+  };
 
-/**
- * Convert sting to object.
- * @returns {Object} - TailwindCSS safelist.
- */
-function getVuelessConfigColors() {
-  return JSON.parse(process.env.VUELESS_CONFIG_COLORS || "{}");
+  COLOR_SHADES.forEach((shade) => {
+    palette[shade] = twColorWithOpacity(`--vl-color-${color}-${shade}`);
+  });
+
+  return palette;
 }
 
 /**

package/service.ui/index.js

@@ -1,24 +1,70 @@
 import { merge } from "lodash-es";
 import { defineConfig } from "cva";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
 
 import { cloneDeep } from "../service.helper";
 import {
+  GRAY_COLOR,
+  COOL_COLOR,
+  BRAND_COLOR,
   BRAND_COLORS,
-  GRAY_COLORS,
   GRAYSCALE_COLOR,
-  BRAND_COLOR,
-} from "../preset.tailwind/constants";
+  DEFAULT_RING,
+  DEFAULT_RING_OFFSET,
+  DEFAULT_ROUNDING,
+  DEFAULT_BRAND_COLOR,
+  DEFAULT_GRAY_COLOR,
+  DARK_MODE_SELECTOR,
+} from "../constants";
 
 /* Load Vueless config from the project root. */
 const [vuelessConfig] = Object.values(
   import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
 );
 
+/*
+  Export global config settings for the current library.
+  Did as a separate variables for more comfortable usage.
+*/
+export const {
+  layout,
+  strategy,
+  rounding,
+  gray,
+  brand,
+  tailwindMerge: globalTailwindMergeConfig,
+  component: globalComponentConfig,
+} = vuelessConfig;
+
 export const nestedComponentRegEx = /\{U[^}]*}/g;
 
-/*
+//
+/**
+ Extend twMerge (tailwind merge) by vueless and user config:
+ All list of rules available here:
+ https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+ */
+const twMerge = extendTailwindMerge(
+  merge(
+    {
+      extend: {
+        theme: {
+          spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
+        },
+        classGroups: {
+          "ring-w": [{ ring: ["dynamic"] }],
+          "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
+          "font-size": [{ text: ["2xs"] }],
+          rounded: [{ rounded: ["dynamic"] }],
+        },
+      },
+    },
+    globalTailwindMergeConfig,
+  ),
+);
+
+/**
   Export cva (class variance authority) methods:
    * extended with tailwind-merge
    * remove all Vueless nested component names ({U...} strings) from class list string.
@@ -30,7 +76,9 @@ export const {
   cx,
   compose,
 } = defineConfig({
-  hooks: { onComplete: (className) => twMerge(className).replace(nestedComponentRegEx, "") },
+  hooks: {
+    onComplete: (classNames) => twMerge(classNames).replace(nestedComponentRegEx, ""),
+  },
 });
 
 export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
@@ -41,12 +89,6 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
     defaultVariants,
   });
 
-/*
-  Export global config settings for the current library.
-  Did as a separate variables for more comfortable usage.
-*/
-export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
-
 export default class UIService {
   isMac = false;
   isPWA = false;
@@ -63,12 +105,22 @@ export default class UIService {
     const isBrowser = typeof window !== "undefined";
 
     this.isMac = isBrowser && this.checkIsMac();
-
     this.isPWA = isBrowser && this.checkIsPWA();
     this.isIOS = isBrowser && this.checkIsIOS();
     this.isAndroid = isBrowser && this.checkIsAndroid();
-
     this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
+
+    this.initTheme();
+  }
+
+  initTheme() {
+    const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");
+
+    this.setTheme({ systemDarkMode: prefersColorSchemeDark.matches });
+
+    prefersColorSchemeDark.addEventListener("change", (event) =>
+      this.setTheme({ systemDarkMode: event.matches }),
+    );
   }
 
   checkIsPWA() {
@@ -102,62 +154,17 @@ export default class UIService {
     return navigator.userAgentData?.platform || navigator.platform || "unknown";
   }
 
-  static convertHexInRgb(hex) {
-    const color = hex.replace(/#/g, "");
-
-    let r, g, b;
-
-    if (color.length === 6) {
-      r = parseInt(color.substring(0, 2), 16);
-      g = parseInt(color.substring(2, 4), 16);
-      b = parseInt(color.substring(4, 6), 16);
-    }
-
-    if (color.length === 3) {
-      r = parseInt(color.substring(0, 1).repeat(2), 16);
-      g = parseInt(color.substring(1, 2).repeat(2), 16);
-      b = parseInt(color.substring(2, 3).repeat(2), 16);
-    }
-
-    return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
-  }
-
-  // TODO: This should be rewrote to support all set of brand colors (not only one).
-  setBrandColor(brandColor) {
-    function getBrandColor(color, grayColor, brandColors) {
-      if (color === GRAYSCALE_COLOR) {
-        return grayColor;
-      }
-
-      return brandColors.includes(color) ? colors[color][500] : color;
-    }
-
-    function getGrayColor(color, grayColors) {
-      return grayColors.includes(color) ? colors[color][900] : colors.zinc[900];
-    }
-
-    const grayColor = getGrayColor(gray, GRAY_COLORS);
-    const localBrandColor = getBrandColor(brandColor, grayColor, BRAND_COLORS);
-    const globalBrandColor = getBrandColor(brand, grayColor, BRAND_COLORS);
-
-    const style = document.createElement("style");
-    const rgb = UIService.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
-
-    style.innerHTML = `
-      :root {
-        --color-brand: ${rgb};
-      }
-    `;
-
-    document.head.appendChild(style);
-  }
-
-  getRandomId(idLength = 15) {
+  /**
+   Generate random string.
+   @param { Number } length
+   @returns { String }
+   */
+  getRandomId(length = 15) {
     const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
     const charactersLength = characters.length;
     let id = "";
 
-    while (id.length < idLength) {
+    while (id.length < length) {
       id += characters.charAt(Math.floor(Math.random() * charactersLength));
     }
 
@@ -168,6 +175,11 @@ export default class UIService {
     document.title = title ? title + separator + suffix : suffix;
   }
 
+  /**
+   Change favicon in runtime.
+   @param { String } faviconPath
+   @returns { void }
+   */
   static setFavicon(faviconPath) {
     if (!faviconPath) return;
 
@@ -176,6 +188,7 @@ export default class UIService {
 
     faviconTag.setAttribute("rel", "shortcut icon");
     faviconTag.setAttribute("href", `${faviconPath}?${Math.random()}`);
+
     head.appendChild(faviconTag);
   }
 
@@ -216,15 +229,116 @@ export default class UIService {
   setColor(classes, color) {
     return classes?.replaceAll("{color}", color);
   }
+
+  /**
+   Set dark mode
+   @param { Object } config
+   @returns { Boolean } isDarkMode
+   */
+  setDarkMode(config) {
+    config?.darkMode === undefined
+      ? localStorage.removeItem(DARK_MODE_SELECTOR)
+      : localStorage.setItem(DARK_MODE_SELECTOR, Number(!!config?.darkMode));
+
+    const storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
+
+    let isDarkMode =
+      storedDarkMode !== null
+        ? !!Number(storedDarkMode)
+        : !!(config?.darkMode ?? vuelessConfig?.darkMode ?? config?.systemDarkMode);
+
+    isDarkMode
+      ? document.documentElement.classList.add(DARK_MODE_SELECTOR)
+      : document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+
+    return isDarkMode;
+  }
+
+  /**
+   Set theme css variables and dark mode.
+   @param { Object } config
+   @returns { void }
+   */
+  setTheme = (config = {}) => {
+    const isDarkMode = this.setDarkMode(config);
+    const brand = config?.brand || vuelessConfig?.brand || DEFAULT_BRAND_COLOR;
+    const gray = config?.gray || vuelessConfig?.gray || DEFAULT_GRAY_COLOR;
+    const ring = config?.ring || vuelessConfig?.ring || DEFAULT_RING;
+    const ringOffset = config?.ringOffset || vuelessConfig?.ringOffset || DEFAULT_RING_OFFSET;
+    const rounding = Number(config?.rounding) || vuelessConfig?.rounding || DEFAULT_ROUNDING;
+
+    // eslint-disable-next-line prettier/prettier, vue/max-len
+    let brandColor = BRAND_COLORS.some((color) => color === brand) || brand === GRAYSCALE_COLOR ? brand : DEFAULT_BRAND_COLOR;
+    let grayColor = BRAND_COLORS.some((color) => color === gray) ? gray : DEFAULT_GRAY_COLOR;
+
+    // set default shade related to the selected mode
+    const defaultBrandShade = isDarkMode ? 400 : 600;
+    const defaultGrayShade = isDarkMode ? 400 : 600;
+
+    // handling custom `cool` color
+    if (grayColor === COOL_COLOR) {
+      grayColor = GRAY_COLOR;
+    }
+
+    // handling custom `grayscale` color
+    if (brandColor === GRAYSCALE_COLOR) {
+      brandColor = grayColor;
+    }
+
+    const variables = {
+      "--vl-ring": `${ring}px`,
+      "--vl-ring-offset": `${ringOffset}px`,
+      "--vl-rounding": `${Number(rounding) / this.PX_IN_REM}rem`,
+      "--vl-color-gray-default": UIService.convertHexInRgb(colors[grayColor][defaultBrandShade]),
+      "--vl-color-brand-default": UIService.convertHexInRgb(colors[brandColor][defaultGrayShade]),
+    };
+
+    for (const key in colors[grayColor]) {
+      variables[`--vl-color-gray-${key}`] = UIService.convertHexInRgb(colors[grayColor][key]);
+    }
+
+    for (const key in colors[brandColor]) {
+      variables[`--vl-color-brand-${key}`] = UIService.convertHexInRgb(colors[brandColor][key]);
+    }
+
+    const style = document.createElement("style");
+    const stringVariables = Object.entries(variables)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join(" ");
+
+    style.innerHTML = `:root {${stringVariables}`;
+
+    document.head.appendChild(style);
+  };
+
+  static convertHexInRgb(hex) {
+    const color = hex.replace(/#/g, "");
+
+    let r, g, b;
+
+    if (color.length === 6) {
+      r = parseInt(color.substring(0, 2), 16);
+      g = parseInt(color.substring(2, 4), 16);
+      b = parseInt(color.substring(4, 6), 16);
+    }
+
+    if (color.length === 3) {
+      r = parseInt(color.substring(0, 1).repeat(2), 16);
+      g = parseInt(color.substring(1, 2).repeat(2), 16);
+      b = parseInt(color.substring(2, 3).repeat(2), 16);
+    }
+
+    return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
+  }
 }
 
 export const {
   getRandomId,
   getColor,
   setColor,
+  setTheme,
   setTitle,
   setFavicon,
-  setBrandColor,
   convertHexInRgb,
   isMac,
   isPWA,

package/ui.button/configs/default.config.js

@@ -4,8 +4,8 @@ export default /*tw*/ {
       flex items-center justify-center
       text-base font-medium outline-none
       border border-solid transition
-      focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
-      focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
+      focus:ring-{color}-700 focus:ring-opacity-20 focus:ring-dynamic focus:ring-offset-dynamic
+      focus-within:ring-{color}-700 focus-within:ring-opacity-20 focus-within:ring-dynamic focus-within:ring-offset-dynamic
       disabled:ring-0 disabled:cursor-no-drop
     `,
     variants: {
@@ -46,7 +46,7 @@ export default /*tw*/ {
         true: "pointer-events-none gap-0",
       },
       pill: {
-        false: "rounded-lg",
+        false: "rounded-dynamic",
         true: "rounded-full",
       },
       block: {

package/ui.button-link/configs/default.config.js

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       w-fit inline-flex rounded transition focus-visible:outline-none
-      focus-within:ring-4 focus-within:ring-offset-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15
+      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15
     `,
     variants: {
       color: {

package/ui.button-toggle/configs/default.config.js

@@ -22,8 +22,10 @@ export default /*tw*/ {
       separated: {
         false: `
           flex-nowrap -space-x-px gap-0
-          [&>:first-child]:rounded-l-lg [&>:last-child]:rounded-r-lg
-          [&>:first-child>*>*]:rounded-l-lg [&>:last-child>*>*]:rounded-r-lg
+          [&>:first-child]:rounded-dynamic [&>:first-child]:rounded-r-none
+          [&>:last-child]:rounded-dynamic [&>:last-child]:rounded-l-none
+          [&>:first-child>*>*]:rounded-dynamic [&>:first-child>*>*]:rounded-r-none
+          [&>:last-child>*>*]:rounded-dynamic [&>:last-child>*>*]:rounded-l-none
         `,
       },
     },

package/ui.container-card/configs/default.config.js

@@ -1,12 +1,7 @@
 export default /*tw*/ {
   wrapper: {
-    base: "border border-gray-200 bg-white space-y-4 md:space-y-6 w-full",
+    base: "border rounded-dynamic border-gray-200 bg-white space-y-4 md:space-y-6 w-full",
     variants: {
-      rounded: {
-        sm: "rounded-lg",
-        md: "rounded-2xl",
-        lg: "rounded-3xl",
-      },
       padding: {
         sm: "p-2 md:p-4",
         md: "p-4 md:p-6",
@@ -25,7 +20,6 @@ export default /*tw*/ {
   footerMobileReverse: "flex flex-col-reverse space-y-reverse",
   defaultVariants: {
     padding: "md",
-    rounded: "md",
     mobileFooterReverse: false,
   },
 };

package/ui.container-card/index.stories.js

@@ -66,23 +66,6 @@ const PaddingTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const RoundedTemplate = (args, { argTypes } = {}) => ({
-  components: { UCard, URow },
-  setup() {
-    return {
-      args,
-      roundeds: argTypes.rounded.options,
-    };
-  },
-  template: `
-    <URow>
-      <UCard v-for="(rounded, index) in roundeds" v-bind="args" :rounded="rounded" :key="index">
-        ${args.slotDefaultTemplate}
-      </UCard>
-    </URow>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   slotTemplate: `
@@ -107,9 +90,6 @@ description.args = { description: "Card description" };
 export const padding = PaddingTemplate.bind({});
 padding.args = {};
 
-export const rounded = RoundedTemplate.bind({});
-rounded.args = {};
-
 export const slotHeaderLeftBefore = DefaultTemplate.bind({});
 slotHeaderLeftBefore.args = {
   slotTemplate: `

package/ui.container-card/index.vue

@@ -72,15 +72,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * Card border radius.
-   * @values sm, md, lg
-   */
-  rounded: {
-    type: String,
-    default: UIService.get(defaultConfig, UCard).default.rounded,
-  },
-
   /**
    * Card padding.
    * @values sm, md, lg

package/ui.data-table/configs/default.config.js

@@ -25,7 +25,7 @@ export default /*tw*/ {
   stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
   stickyHeaderActionsCheckbox: "{UCheckbox}",
   stickyHeaderActionsCounter: "-ml-2",
-  tableWrapper: "border border-gray-200 rounded-lg bg-white",
+  tableWrapper: "border border-gray-200 rounded-dynamic bg-white",
   table: "min-w-full border-none text-sm w-full table-fixed",
   header: "border-b border-gray-200",
   headerRow: "",

package/ui.dropdown-badge/configs/default.config.js

@@ -8,7 +8,7 @@ export default /*tw*/ {
     base: `
       absolute z-10
       max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
-      rounded-lg border-gray-300 shadow bg-white
+      rounded-dynamic border-gray-300 shadow bg-white
     `,
     variants: {
       listYPosition: {

package/ui.dropdown-button/configs/default.config.js

@@ -8,7 +8,7 @@ export default /*tw*/ {
     base: `
       absolute z-10 inline-block
       max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
-      rounded-lg border-gray-300 shadow bg-white
+      rounded-dynamic border-gray-300 shadow bg-white
     `,
     variants: {
       listYPosition: {

package/ui.dropdown-link/configs/default.config.js

@@ -9,7 +9,7 @@ export default /*tw*/ {
     base: `
       absolute z-10
       max-h-60 overflow-y-auto overflow-x-hidden md:!w-auto
-      rounded-lg border-gray-300 shadow bg-white
+      rounded-dynamic border-gray-300 shadow bg-white
     `,
     variants: {
       listYPosition: {

package/ui.dropdown-list/configs/default.config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: `
     my-2 flex w-full absolute right-0 z-50
-    rounded-lg border border-gray-300 bg-white shadow
+    rounded-dynamic border border-gray-300 bg-white shadow
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none
   `,

package/ui.dropdown-list/index.stories.js

@@ -21,12 +21,9 @@ export default {
     ...getArgTypes(UDropdownList.name),
   },
   parameters: {
-    backgrounds: {
-      default: "white",
-    },
     docs: {
       story: {
-        iframeHeight: 160,
+        height: "180px",
       },
     },
   },
@@ -38,9 +35,7 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UDropdownList
-      v-bind="args"
-    />
+    <UDropdownList v-bind="args" class="mx-4 w-[24rem]"/>
   `,
 });
 

package/ui.form-calendar/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "p-3 pb-4 w-64 border border-brand-300 rounded-lg bg-white shadow overflow-hidden focus:outline-none",
+  wrapper: "p-3 pb-4 w-64 border border-brand-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
   navigationSwitchViewButton: "-ml-3 pl-3 text-sm rounded-l-none",
   dayViewSwitchLabel: "flex gap-1",
@@ -23,30 +23,30 @@ export default /*tw*/ {
   weekDays: "grid grid-cols-7",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
   days: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-lg text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  day: "mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
   activeDay: "bg-brand-100 hover:bg-brand-100",
-  inRangeFirstDay: "rounded-none rounded-l-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
-  inRangeLastDay: "rounded-none rounded-r-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
+  inRangeFirstDay: "rounded-dynamic rounded-r-none bg-brand-200 text-brand-900 hover:bg-brand-200",
+  inRangeLastDay: "rounded-dynamic rounded-l-none bg-brand-200 text-brand-900 hover:bg-brand-200",
   inRangeDay: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
   selectedDay: "bg-brand-900 text-white hover:bg-brand-900",
   currentDay: "hover:bg-brand-100 border-2 border-brand-900",
   anotherMonthDay: "hover:bg-brand-100 text-brand-400",
   monthView: "grid grid-cols-4 items-center justify-center",
-  month: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic hover:!bg-brand-900 hover:text-white",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
   currentMoth: "border-2 border-brand-900",
   yearView: "grid grid-cols-4 items-center justify-center",
-  year: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  year: "{UButton} mx-auto flex h-12 w-full rounded-dynamic hover:!bg-brand-900 hover:text-white",
   currentYear: "border-2 border-brand-900",
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",
   timepickerLabel: "w-full",
-  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-brand-300",
+  timepickerInputWrapper: "flex items-center gap-px rounded-dynamic border border-brand-300",
   timepickerInput: " w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
-  timepickerLeftInput: " rounded-l-lg",
-  timepickerRightInput: " rounded-r-lg",
+  timepickerLeftInput: "rounded-l-dynamic",
+  timepickerRightInput: " rounded-r-dynamic",
   timepickerSubmitButton: "py-2 focus:ring-0 border-0",
   i18n: {
     weekdays: {

package/ui.form-checkbox/configs/default.config.js

@@ -20,7 +20,7 @@ export default /*tw*/ {
     base: `
       border border-solid rounded border-gray-300 bg-white hover:transition
       hover:border-gray-400
-      focus:border-{color}-500 focus:ring-4 focus:ring-opacity-20 focus:ring-offset-0 focus:ring-{color}-500
+      focus:border-{color}-500 focus:ring-dynamic focus:ring-opacity-20 focus-within:ring-offset-dynamic focus:ring-{color}-500
       active:border-{color}-500 active:bg-{color}-500
       checked:border-{color}-500 checked:bg-{color}-500 checked:text-{color}-500
       checked:hover:bg-{color}-500 checked:focus:text-{color}-500 checked:active:text-{color}-500

package/ui.form-date-picker/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
   input: "{UInput}",
   inputFocused: {
     component: "{UInput}",
-    block: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
+    block: "ring-dynamic ring-offset-dynamic ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
   },
   calendar: {
     component: "{UCalendar}",

package/ui.form-date-picker-range/configs/default.config.js

@@ -2,17 +2,21 @@ export default /*tw*/ {
   wrapper: "relative",
   input: "{UInput}",
   buttonWrapper: `
-    flex rounded-lg max-md:justify-between
-    focus-within:ring-4 focus-within:ring-brand-700 focus-within:ring-opacity-20
+    flex rounded-dynamic max-md:justify-between
+    focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700 focus-within:ring-opacity-20
+  `,
+  button: "{UButton} shrink-0 grow rounded-none !ring-0 !ring-offset-0",
+  buttonActive: "",
+  buttonWrapperActive: "ring-dynamic ring-offset-dynamic ring-brand-700 ring-opacity-20",
+  shiftRangeButton: `
+    first:rounded-dynamic first:rounded-r-none
+    last:rounded-dynamic last:rounded-l-none
+    focus:ring-0 focus:ring-offset-0
   `,
-  button: "{UButton} shrink-0 grow rounded-none !ring-0",
-  buttonActive: "ring-0",
-  buttonWrapperActive: "ring-4 ring-brand-700 ring-opacity-20",
-  shiftRangeButton: "focus:ring-0 last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none",
   nextIconName: "keyboard_arrow_right",
   prevIconName: "keyboard_arrow_left",
   menu: {
-    base: "absolute z-40 my-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
+    base: "absolute z-40 my-2 w-80 overflow-hidden rounded-dynamic border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
       openDirectionX: {
         left: "left-0",
@@ -64,7 +68,7 @@ export default /*tw*/ {
     component: "{UCalendar}",
     wrapper: "p-0 mt-2 w-full border-none shadow-none",
     navigation: "mb-0 border-none",
-    navigationSwitchViewButton: "rounded-lg px-3",
+    navigationSwitchViewButton: "rounded-dynamic px-3",
     day: "w-full h-10 mb-0.5",
   },
   i18n: {

package/ui.form-input/configs/default.config.js

@@ -1,17 +1,17 @@
 export default /*tw*/ {
   label: "{ULabel}",
   inputWrapper: "flex relative w-full",
-  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 gap-1 rounded-r-lg rounded-l-none",
-  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 gap-1 rounded-l-lg rounded-r-none",
+  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 gap-1 rounded-dynamic rounded-l-none",
+  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 gap-1 rounded-dynamic rounded-r-none",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",
   block: {
     base: `
       w-full bg-white !opacity-100 relative flex transition
-      rounded-md border border-solid border-gray-300
+      rounded-dynamic border border-solid border-gray-300
       hover:border-gray-400 hover:focus-within:border-brand-500
-      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
+      focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-600/[.15]
     `,
     variants: {
       disabled: {
@@ -28,16 +28,15 @@ export default /*tw*/ {
         `,
       },
     },
-    compoundVariants: [{ labelAlign: "topInside", label: true, class: "rounded-lg" }],
   },
   input: {
     base: `
-      block w-full py-2 px-3 font-normal leading-none text-gray-900
+      block w-full py-2 px-3 font-normal leading-none text-gray-900 bg-white
+      border-none rounded-dynamic transition
       placeholder:font-normal placeholder-gray-400
-      transition bg-white border-none border-gray-300 rounded-md shadow-none
-      focus:outline-none focus:ring-0 disabled:opacity-50
+      focus:ring-0 disabled:opacity-50
       disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
-      read-only:border-gray-300 read-only:ring-0
+      read-only:ring-0 read-only:border-gray-300
     `,
     variants: {
       size: {
@@ -53,7 +52,6 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, class: "rounded-lg" },
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
       { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },

package/ui.form-input-file/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzoneWrapper: {
     base: `
       p-3 size-auto w-full bg-white transition
-      rounded-lg border border-solid border-gray-300 hover:border-gray-400
+      rounded-dynamic border border-solid border-gray-300 hover:border-gray-400
     `,
     variants: {
       error: {
@@ -19,7 +19,7 @@ export default /*tw*/ {
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   contentWrapper: {
-    base: "p-3 gap-6 w-full rounded-lg bg-brand-50 relative flex justify-between items-start",
+    base: "p-3 gap-6 w-full rounded-dynamic bg-brand-50 relative flex justify-between items-start",
     variants: {
       multiple: {
         false: "items-center",

package/ui.form-input-search/configs/default.config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   input: {
     component: "{UInput}",
-    wrapper: "relative flex items-center justify-between w-full rounded-lg bg-gray-900 bg-opacity-5",
+    wrapper: "relative flex items-center justify-between w-full rounded-dynamic bg-gray-900 bg-opacity-5",
     input: "w-full",
     label: "w-full",
     rightSlot: "pr-0",

package/ui.form-radio/configs/default.config.js

@@ -7,7 +7,8 @@ export default /*tw*/ {
       border border-solid border-{color}-300 text-{color}-500
       hover:border-{color}-400
       active:border-{color}-500
-      focus:border-{color}-500 focus:bg-{color}-500 focus:ring-4 focus:ring-{color}-200 focus:ring-offset-0
+      focus:border-{color}-500 focus:bg-{color}-500
+      focus:ring-{color}-200 focus:ring-dynamic focus-within:ring-offset-dynamic
       disabled:border-{color}-100 disabled:bg-{color}-100
     `,
     variants: {

package/ui.form-select/configs/default.config.js

@@ -5,15 +5,16 @@ export default /*tw*/ {
   wrapper: {
     base: `
       py-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-md border border-gray-300 bg-white
+      rounded-dynamic border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-500
-      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
+      focus-within:ring-brand-600/[.15] focus-within:ring-dynamic focus-within:ring-offset-dynamic
+      focus-within:border-brand-500 focus-within:outline-none
     `,
     variants: {
       error: {
         true: `
           border-red-300 hover:border-red-300
-          focus-within:border-red-500 focus-within:ring-4 focus-within:ring-red-100
+          focus-within:border-red-500 focus-within:ring-red-100
         `,
       },
       disabled: {
@@ -24,7 +25,6 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, class: "rounded-lg" },
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
       { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },

package/ui.form-switch/configs/default.config.js

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       transition duration-300
       flex items-center p-0.5 relative rounded-3xl cursor-pointer
-      ring-opacity-10 focus-within:ring-4
+      ring-opacity-10 focus-within:ring-dynamic focus-within:ring-offset-dynamic
     `,
     variants: {
       checked: {

package/ui.form-textarea/configs/default.config.js

@@ -4,9 +4,10 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      px-3 py-2 rounded-md border border-gray-300 cursor-text bg-white transition
+      px-3 py-2 rounded-dynamic border border-gray-300 cursor-text bg-white transition
       hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:outline-none focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-gray-600/[.15]
+      focus-within:border-gray-500 focus-within:outline-none
     `,
     variants: {
       error: {
@@ -24,7 +25,6 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, class: "rounded-lg" },
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
       { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },

package/ui.navigation-progress/components/StepperProgress.vue

@@ -38,7 +38,7 @@
 import colors from "tailwindcss/colors";
 import { computed } from "vue";
 
-import { GRAY_COLORS } from "../../preset.tailwind/constants";
+import { GRAY_COLORS } from "../../constants";
 
 import useAttrs from "../composables/attrs.composable";
 

package/ui.text-alert/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 flex flex-col rounded-lg",
+    base: "p-4 flex flex-col rounded-dynamic",
     variants: {
       variant: {
         primary: `bg-{color}-500 text-white`,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.232",
+  "version": "0.0.234",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1164,15 +1164,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "rounded",
-              "description": "Card border radius.",
-              "value": {
-                "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
-              },
-              "default": "md"
-            },
             {
               "name": "padding",
               "description": "Card padding.",

package/preset.tailwind/constants/index.js

@@ -1,23 +0,0 @@
-export const GRAY_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
-export const GRAYSCALE_COLOR = "grayscale";
-export const BRAND_COLOR = "brand";
-export const BRAND_COLORS = [
-  BRAND_COLOR,
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-];