vueless 0.0.825-beta.2 → 0.0.825-beta.4

package/bin/constants.js

@@ -5,14 +5,14 @@ export default {
   /**
    * Global settings.
    */
-  strategy: "merge",
   primary: "grayscale",
+  secondary: "emerald",
   neutral: "gray",
+  colorMode: "auto",
   outline: 2,
   rounding: 8,
   fontSize: 14,
-  colorMode: "auto",
-  baseClasses: "",
+  unstyled: false,
 
   /**
    * Light theme CSS variable settings.

package/composables/useUI.ts

@@ -4,10 +4,8 @@ import { isEqual } from "lodash-es";
 import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
 import { isCSR } from "../utils/helper.ts";
 import {
-  STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
-  DEFAULT_BASE_CLASSES,
   EXTENDS_PATTERN_REG_EXP,
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
@@ -19,7 +17,6 @@ import type {
   Defaults,
   KeyAttrs,
   KeysAttrs,
-  Strategies,
   MutatedProps,
   UnknownObject,
   PrimaryColors,
@@ -49,10 +46,6 @@ export default function useUI<T>(
 
   const globalConfig = (vuelessConfig.components?.[componentName] || {}) as ComponentConfigFull<T>;
 
-  const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")
-    ? (vuelessConfig.strategy as Strategies)
-    : (STRATEGY_TYPE.merge as Strategies);
-
   const firstClassKey = Object.keys(defaultConfig || {})[0];
   const config = ref({}) as Ref<ComponentConfigFull<T>>;
 
@@ -67,7 +60,7 @@ export default function useUI<T>(
         defaultConfig,
         globalConfig,
         propsConfig,
-        vuelessStrategy,
+        unstyled: Boolean(vuelessConfig.unstyled),
       }) as ComponentConfigFull<T>;
     },
     { deep: true, immediate: true },
@@ -82,7 +75,6 @@ export default function useUI<T>(
       const value = (config.value as ComponentConfigFull<T>)[key];
       const color = (toValue(mutatedProps || {}).color || props.color) as PrimaryColors;
 
-      const isTopLevelKey = (topLevelClassKey || firstClassKey) === key;
       const isNestedComponent = Boolean(getNestedComponent(value));
 
       let classes = "";
@@ -99,10 +91,6 @@ export default function useUI<T>(
         classes = value;
       }
 
-      if (isTopLevelKey && !isNestedComponent) {
-        classes = cx([DEFAULT_BASE_CLASSES, vuelessConfig.baseClasses, classes]);
-      }
-
       classes = classes
         .replaceAll(EXTENDS_PATTERN_REG_EXP, "")
         .replace(NESTED_COMPONENT_PATTERN_REG_EXP, "");
@@ -180,6 +168,7 @@ export default function useUI<T>(
           defaultConfig: extendsKeyConfig,
           globalConfig: keyConfig,
           propsConfig: attrs["config"] || {},
+          unstyled: Boolean(vuelessConfig.unstyled),
         }),
         ...getDefaults({
           ...(extendsKeyConfig.defaults || {}),
@@ -228,6 +217,7 @@ export default function useUI<T>(
           defaultConfig: config.value[firstKey],
           globalConfig: globalConfig[firstKey],
           propsConfig: propsConfig[firstKey],
+          unstyled: Boolean(vuelessConfig.unstyled),
         }) as NestedComponent;
       }
 

package/constants.js

@@ -5,6 +5,7 @@
 
 /* Custom Vueless colors */
 export const PRIMARY_COLOR = "primary";
+export const SECONDARY_COLOR = "secondary";
 export const NEUTRAL_COLOR = "neutral";
 export const GRAYSCALE_COLOR = "grayscale";
 
@@ -15,6 +16,7 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 
 /* Vueless defaults */
 export const DEFAULT_PRIMARY_COLOR = GRAYSCALE_COLOR;
+export const DEFAULT_SECONDARY_COLOR = "emerald";
 export const DEFAULT_NEUTRAL_COLOR = "gray";
 export const DEFAULT_FONT_SIZE = 14; /* pixels */
 export const FONT_SIZE_DECREMENT = 2; /* pixels */
@@ -25,7 +27,6 @@ export const OUTLINE_INCREMENT = 1; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
-export const DEFAULT_BASE_CLASSES = ``;
 
 /* Vueless supported color shades */
 export const PRIMARY_COLORS = [
@@ -57,6 +58,11 @@ export const DEFAULT_LIGHT_THEME = {
   "--vl-primary-lifted": "--color-primary-700",
   "--vl-primary-accented": "--color-primary-800",
 
+  /* Secondary colors */
+  "--vl-secondary": "--vl-secondary-600",
+  "--vl-secondary-lifted": "--vl-secondary-700",
+  "--vl-secondary-accented": "--vl-secondary-800",
+
   /* Info colors */
   "--vl-info": "--color-blue-600",
   "--vl-info-lifted": "--color-blue-700",
@@ -114,6 +120,11 @@ export const DEFAULT_DARK_THEME = {
   "--vl-primary-lifted": "--color-primary-500",
   "--vl-primary-accented": "--color-primary-600",
 
+  /* Secondary colors */
+  "--vl-secondary": "--vl-secondary-400",
+  "--vl-secondary-lifted": "--vl-secondary-500",
+  "--vl-secondary-accented": "--vl-secondary-600",
+
   /* Info colors */
   "--vl-info": "--color-blue-400",
   "--vl-info-lifted": "--color-blue-500",
@@ -165,13 +176,6 @@ export const DEFAULT_DARK_THEME = {
   "--vl-bg-inverted": "--vl-neutral-100",
 };
 
-/* 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",
@@ -184,8 +188,7 @@ export const CVA_CONFIG_KEY = {
 export const SYSTEM_CONFIG_KEY = {
   i18n: "i18n",
   defaults: "defaults",
-  strategy: "strategy",
-  safelist: "safelist",
+  unstyled: "unstyled",
   transition: "transition",
   safelistColors: "safelistColors",
   ...CVA_CONFIG_KEY,
@@ -290,7 +293,7 @@ export const TAILWIND_MERGE_EXTENSION = {
     },
     classGroups: {
       "outline-w": [{ outline: ["small", "medium", "large"] }],
-      "font-size": [{ text: ["xsmall", "small", "medium", "large"] }],
+      "font-size": [{ text: ["tiny", "small", "medium", "large"] }],
       "bg-color": [{ bg: ["default", "muted", "lifted", "accented", "inverted"] }],
       "text-color": [{ text: ["default", "muted", "lifted", "accented", "inverted"] }],
       "border-color": [{ border: ["default", "muted", "lifted", "accented"] }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.825-beta.2",
+  "version": "0.0.825-beta.4",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -62,7 +62,7 @@
     "@eslint/js": "^9.12.0",
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
-    "@tailwindcss/postcss": "^4.0.8",
+    "@tailwindcss/vite": "^4.0.13",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -81,7 +81,6 @@
     "eslint-plugin-vue": "^9.25.0",
     "globals": "^15.11.0",
     "jsdom": "^25.0.1",
-    "postcss": "^8.4.38",
     "prettier": "^3.3.3",
     "release-it": "^17.2.1",
     "tailwindcss": "^4.0.8",

package/plugin-vite.js

@@ -67,7 +67,6 @@ export const Vueless = function (options = {}) {
       },
       optimizeDeps: {
         include: [
-          ...(!isVuelessEnv ? ["vueless/preset-tailwind"] : []),
           ...(!isVuelessEnv
             ? ["vueless/directives/tooltip/vTooltip.ts"]
             : ["./src/directives/tooltip/vTooltip.ts"]),

package/tailwind.css

@@ -42,11 +42,29 @@
     --color-primary-900: var(--vl-primary-900);
     --color-primary-950: var(--vl-primary-950);
 
+    /* Secondary colors */
+    --color-secondary-50: var(--vl-secondary-50);
+    --color-secondary-100: var(--vl-secondary-100);
+    --color-secondary-200: var(--vl-secondary-200);
+    --color-secondary-300: var(--vl-secondary-300);
+    --color-secondary-400: var(--vl-secondary-400);
+    --color-secondary-500: var(--vl-secondary-500);
+    --color-secondary-600: var(--vl-secondary-600);
+    --color-secondary-700: var(--vl-secondary-700);
+    --color-secondary-800: var(--vl-secondary-800);
+    --color-secondary-900: var(--vl-secondary-900);
+    --color-secondary-950: var(--vl-secondary-950);
+
     /* Primary colors */
     --color-primary: var(--vl-primary);
     --color-primary-lifted: var(--vl-primary-lifted);
     --color-primary-accented: var(--vl-primary-accented);
 
+    /* Secondary colors */
+    --color-secondary: var(--vl-secondary);
+    --color-secondary-lifted: var(--vl-secondary-lifted);
+    --color-secondary-accented: var(--vl-secondary-accented);
+
     /* Neutral colors */
     --color-neutral: var(--vl-neutral);
     --color-neutral-lifted: var(--vl-neutral-lifted);
@@ -78,13 +96,13 @@
     --color-grayscale-accented: var(--vl-grayscale-accented);
 
     /* Border radius rounding values */
-    --radius-small: var(--vl-radius-sm);
-    --radius-medium: var(--vl-radius-md);
-    --radius-large: var(--vl-radius-lg);
+    --radius-small: var(--vl-rounding-sm);
+    --radius-medium: var(--vl-rounding-md);
+    --radius-large: var(--vl-rounding-lg);
 
     /* Text size */
-    --text-xsmall: var(--vl-text-xs);
-    --text-xsmall--line-height: calc(1 / var(--text-xs));
+    --text-tiny: var(--vl-text-xs);
+    --text-tiny--line-height: calc(1 / var(--text-xs));
     --text-small: var(--vl-text-sm);
     --text-small--line-height: var(--text-xs--line-height);
     --text-medium: var(--vl-text-md);

package/types.ts

@@ -70,12 +70,17 @@ export enum ColorMode {
 
 export interface ThemeConfig {
   /**
-   * Components primary (primary) color.
+   * Components primary color.
    */
   primary?: PrimaryColors;
 
   /**
-   * Components neutral (secondary) color.
+   * Components secondary color.
+   */
+  secondary?: PrimaryColors;
+
+  /**
+   * Components neutral color.
    */
   neutral?: NeutralColors;
 
@@ -137,17 +142,9 @@ export interface ThemeConfig {
 
 export interface Config extends ThemeConfig {
   /**
-   * Component classes merge behavior.
-   * – merge (default) – smartly merge provided custom classes with default config classes.
-   * – replace – replace default config keys by provided custom keys (override only provided keys, the rest classes will be taken from the default config).
-   * – override – override default config by provided custom config (keeps only custom config, removes all default classes).
-   */
-  strategy?: Strategies;
-
-  /**
-   * Classes which will be applied to the root element of all vueless components.
+   * Removes default component styles (keeps only custom config, removes all default classes).
    */
-  baseClasses?: string;
+  unstyled?: boolean;
 
   /**
    * Light theme design system CSS variables.
@@ -178,7 +175,7 @@ export interface Config extends ThemeConfig {
   /**
    * Tailwind-merge config extension for custom classes.
    * All lists of rules available here:
-   * https://github.com/dcastil/tailwind-merge/blob/main/src/lib/default-config.ts.
+   * https://github.com/dcastil/tailwind-merge/blob/main/src/lib/default-config.ts
    */
   tailwindMerge?: UnknownObject;
 }
@@ -188,7 +185,6 @@ export type UnknownArray = unknown[];
 export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
 
 export type ComponentNames = keyof Components & string; // keys union
-export type Strategies = "merge" | "replace" | "override";
 
 export type NeutralColors = "slate" | "gray" | "zinc" | "neutral" | "stone" | string;
 export type PrimaryColors =
@@ -362,26 +358,14 @@ export interface VuelessCssVariables {
   "--vl-outline-md": string;
   "--vl-outline-lg": string;
   /* Border radius size variables */
-  "--vl-radius-sm": string;
-  "--vl-radius-md": string;
-  "--vl-radius-lg": string;
+  "--vl-rounding-sm": string;
+  "--vl-rounding-md": string;
+  "--vl-rounding-lg": string;
   /* Font size CSS variables */
   "--vl-text-xs": string;
   "--vl-text-sm": string;
   "--vl-text-md": string;
   "--vl-text-lg": string;
-  /* Gray CSS variables */
-  "--vl-neutral-50": string;
-  "--vl-neutral-100": string;
-  "--vl-neutral-200": string;
-  "--vl-neutral-300": string;
-  "--vl-neutral-400": string;
-  "--vl-neutral-500": string;
-  "--vl-neutral-600": string;
-  "--vl-neutral-700": string;
-  "--vl-neutral-800": string;
-  "--vl-neutral-900": string;
-  "--vl-neutral-950": string;
   /* Primary CSS variables */
   "--vl-primary-50": string;
   "--vl-primary-100": string;
@@ -394,10 +378,38 @@ export interface VuelessCssVariables {
   "--vl-primary-800": string;
   "--vl-primary-900": string;
   "--vl-primary-950": string;
+  /* Secondary CSS variables */
+  "--vl-secondary-50": string;
+  "--vl-secondary-100": string;
+  "--vl-secondary-200": string;
+  "--vl-secondary-300": string;
+  "--vl-secondary-400": string;
+  "--vl-secondary-500": string;
+  "--vl-secondary-600": string;
+  "--vl-secondary-700": string;
+  "--vl-secondary-800": string;
+  "--vl-secondary-900": string;
+  "--vl-secondary-950": string;
+  /* Gray CSS variables */
+  "--vl-neutral-50": string;
+  "--vl-neutral-100": string;
+  "--vl-neutral-200": string;
+  "--vl-neutral-300": string;
+  "--vl-neutral-400": string;
+  "--vl-neutral-500": string;
+  "--vl-neutral-600": string;
+  "--vl-neutral-700": string;
+  "--vl-neutral-800": string;
+  "--vl-neutral-900": string;
+  "--vl-neutral-950": string;
   /* Primary design system CSS variables */
   "--vl-primary": string;
   "--vl-primary-toned": string;
   "--vl-primary-accented": string;
+  /* Secondary design system CSS variables */
+  "--vl-secondary": string;
+  "--vl-secondary-toned": string;
+  "--vl-secondary-accented": string;
   /* Neutral design system CSS variables */
   "--vl-neutral": string;
   "--vl-neutral-toned": string;

package/ui.button/types.ts

@@ -12,7 +12,15 @@ export interface Props {
   /**
    * Button color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Button size.

package/ui.button-link/types.ts

@@ -34,7 +34,15 @@ export interface Props {
   /**
    * Link color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Link open type behavior.

package/ui.container-accordion/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
     base: "text-accented h-0 opacity-0 transition-all",
     variants: {
       size: {
-        sm: "text-xsmall",
+        sm: "text-tiny",
         md: "text-small",
         lg: "text-medium",
       },

package/ui.container-modal-confirm/types.ts

@@ -28,7 +28,15 @@ export interface Props {
   /**
    * Confirm button color.
    */
-  confirmColor?: "primary" | "grayscale" | "success" | "warning" | "error" | "info" | "neutral";
+  confirmColor?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Set the disabled accept-button.

package/ui.dropdown-badge/types.ts

@@ -29,7 +29,15 @@ export interface Props {
   /**
    * Badge color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Badge size.

package/ui.dropdown-button/types.ts

@@ -29,7 +29,15 @@ export interface Props {
   /**
    * Button color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Button size.

package/ui.dropdown-link/types.ts

@@ -24,7 +24,15 @@ export interface Props {
   /**
    * Link color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Link size.

package/ui.dropdown-list/config.ts

@@ -32,7 +32,7 @@ export default /*tw*/ {
     base: "px-2 pb-2.5 font-medium !leading-none text-muted overflow-hidden text-ellipsis",
     variants: {
       size: {
-        sm: "text-xsmall",
+        sm: "text-tiny",
         md: "text-small",
         lg: "text-medium",
       },

package/ui.dropdown-list/types.ts

@@ -50,7 +50,15 @@ export interface Props {
   /**
    * Option highlight color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Number of options to show without a scroll.

package/ui.form-checkbox/types.ts

@@ -63,7 +63,15 @@ export interface Props {
   /**
    * Checkbox color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Checkbox size.

package/ui.form-checkbox-group/types.ts

@@ -39,7 +39,15 @@ export interface Props {
   /**
    * Checkbox group color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Name for each checkbox.

package/ui.form-checkbox-multi-state/types.ts

@@ -29,7 +29,15 @@ export interface Props {
   /**
    * Checkbox color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Label placement.

package/ui.form-label/config.ts

@@ -47,7 +47,7 @@ export default /*tw*/ {
     },
     compoundVariants: [
       { interactive: true, disabled: false, class: "hover:cursor-pointer" },
-      { align: "topInside", size: "sm", class: "top-2 text-xsmall" },
+      { align: "topInside", size: "sm", class: "top-2 text-tiny" },
       { align: "topInside", size: "md", class: "top-2.5 text-small" },
       { align: "topInside", size: "lg", class: "top-2.5 text-medium" },
       { align: "topWithDesc", size: "sm", class: "-mt-px" },
@@ -63,7 +63,7 @@ export default /*tw*/ {
     base: "font-normal text-lifted text-left !leading-tight",
     variants: {
       size: {
-        sm: "text-xsmall",
+        sm: "text-tiny",
         md: "text-small",
         lg: "text-medium",
       },

package/ui.form-radio/types.ts

@@ -50,7 +50,15 @@ export interface Props {
   /**
    * Radio color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Set radio disabled.

package/ui.form-radio-group/types.ts

@@ -48,7 +48,15 @@ export interface Props {
   /**
    * Radio group color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Unique radio group name (sets for each radio).

package/ui.form-switch/config.ts

@@ -58,7 +58,7 @@ export default /*tw*/ {
     },
   },
   toggleLabel: {
-    base: "absolute text-center text-xsmall font-medium uppercase text-inverted",
+    base: "absolute text-center text-tiny font-medium uppercase text-inverted",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

package/ui.form-switch/types.ts

@@ -33,7 +33,15 @@ export interface Props {
   /**
    * Switch color.
    */
-  color?: "primary" | "success" | "warning" | "error" | "info" | "grayscale" | "neutral";
+  color?:
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
+    | "grayscale"
+    | "neutral";
 
   /**
    * Show toggle icons inside the circle.

package/ui.image-avatar/config.ts

@@ -9,7 +9,7 @@ export default /*tw*/ {
         true: "border border-{color}/15",
       },
       size: {
-        "3xs": "size-4 text-2xs",
+        "3xs": "size-4 text-tiny",
         "2xs": "size-5 text-xs",
         xs: "size-6 text-sm",
         sm: "size-8 text-base",