vueless 0.0.710 → 0.0.711

package/constants.js

@@ -18,6 +18,8 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 2; /* pixels */
+export const RING_DECREMENT = 1; /* pixels */
+export const RING_INCREMENT = 1; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
@@ -171,7 +173,7 @@ export const TAILWIND_MERGE_EXTENSION = {
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "ring-w": [{ ring: ["dynamic", "dynamic-1"] }],
+      "ring-w": [{ ring: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],

package/package.json

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

package/preset-tailwind.js

@@ -17,6 +17,10 @@ import {
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   GRAYSCALE_COLOR,
+  ROUNDING_DECREMENT,
+  ROUNDING_INCREMENT,
+  RING_INCREMENT,
+  RING_DECREMENT,
 } from "./constants.js";
 
 const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
@@ -92,8 +96,9 @@ export const vuelessTailwindConfig = {
         "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
+        "dynamic-sm": "var(--vl-ring-sm)",
         dynamic: "var(--vl-ring)",
-        "dynamic-1": "calc(var(--vl-ring) - 1px)",
+        "dynamic-lg": "var(--vl-ring-lg)",
       },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
@@ -101,15 +106,17 @@ export const vuelessTailwindConfig = {
     },
     configViewer: {
       themeReplacements: {
-        /* eslint-disable prettier/prettier */
+        /* eslint-disable prettier/prettier, vue/max-len */
+        "var(--vl-ring-sm)": globalSettings.ringSm || Math.max(0, (globalSettings.ring || DEFAULT_RING) - RING_DECREMENT),
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
+        "var(--vl-ring-lg)": globalSettings.ringLg || Math.max(0, (globalSettings.ring || DEFAULT_RING) + RING_INCREMENT),
         "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
-        "var(--vl-rounding-sm)": globalSettings.roundingSm || (globalSettings.ring || DEFAULT_ROUNDING) / 2,
+        "var(--vl-rounding-sm)": globalSettings.roundingSm || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_DECREMENT),
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": globalSettings.roundingLg || (globalSettings.ring || DEFAULT_ROUNDING) * 2,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_INCREMENT),
         ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
-        /* eslint-enable prettier/prettier */
+        /* eslint-enable prettier/prettier, vue/max-len */
       },
     },
   },

package/types.ts

@@ -81,7 +81,7 @@ export interface ThemeConfig {
   gray?: GrayColors;
 
   /**
-   * Default components "sm" size rounding (border-radius).
+   * Default components small size rounding (border-radius).
    */
   roundingSm?: number;
 
@@ -91,15 +91,25 @@ export interface ThemeConfig {
   rounding?: number;
 
   /**
-   * Default components "lg" size rounding (border-radius).
+   * Default components large size rounding (border-radius).
    */
   roundingLg?: number;
 
+  /**
+   * Default components small size ring width.
+   */
+  ringSm?: number;
+
   /**
    * Default components ring width.
    */
   ring?: number;
 
+  /**
+   * Default components large size ring width.
+   */
+  ringLg?: number;
+
   /**
    * Default components ring color for light theme.
    */
@@ -339,7 +349,9 @@ export interface TailwindColorShades {
 }
 
 export interface VuelessCssVariables {
+  "--vl-ring-sm": string;
   "--vl-ring": string;
+  "--vl-ring-lg": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;

package/ui.form-input/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       border rounded-dynamic border-gray-300 relative flex w-full bg-white transition
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-dynamic-1 focus-within:ring-brand-600
+      focus-within:ring-dynamic-sm focus-within:ring-brand-600
     `,
     variants: {
       error: {

package/ui.form-input-file/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       p-3 size-auto w-full bg-white transition
       rounded-dynamic border border-solid border-gray-300
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
     `,
     variants: {
       error: {

package/ui.form-select/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-dynamic border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
       focus-within:border-brand-600 focus-within:outline-none
     `,
     variants: {

package/ui.form-textarea/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
     base: `
       flex bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600
-      focus-within:border-brand-600 focus-within:ring-dynamic-1
+      focus-within:border-brand-600 focus-within:ring-dynamic-sm
       focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {

package/utils/theme.ts

@@ -10,12 +10,14 @@ import {
   DARK_MODE_SELECTOR,
   GRAYSCALE_COLOR,
   TAILWIND_COLORS,
-  DEFAULT_RING,
-  DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
+  DEFAULT_RING,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_RING_OFFSET_COLOR_DARK,
+  RING_DECREMENT,
+  RING_INCREMENT,
+  DEFAULT_ROUNDING,
   ROUNDING_DECREMENT,
   ROUNDING_INCREMENT,
 } from "../constants.js";
@@ -40,7 +42,9 @@ declare interface RootCSSVariableOptions {
   colors: Colors;
   brand: string;
   gray: string;
+  ringSm: number;
   ring: number;
+  ringLg: number;
   ringOffsetColorDark: string;
   ringOffsetColorLight: string;
   roundingSm: number;
@@ -155,7 +159,11 @@ export function setTheme(config: Config = {}) {
   let gray: GrayColors =
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
-  const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
+  const { ringSm, ring, ringLg } = getRings(
+    config.ringSm ?? vuelessConfig.ringSm,
+    config.ring ?? vuelessConfig.ring,
+    config.ringLg ?? vuelessConfig.ringLg,
+  );
 
   const ringOffsetColorDark =
     config.ringOffsetColorDark ??
@@ -198,7 +206,9 @@ export function setTheme(config: Config = {}) {
     colors,
     brand,
     gray,
+    ringSm,
     ring,
+    ringLg,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -207,6 +217,22 @@ export function setTheme(config: Config = {}) {
   });
 }
 
+function getRings(sm?: number, md?: number, lg?: number) {
+  const ring = Math.max(0, md ?? DEFAULT_RING);
+  const ringSm = Math.max(0, ring - RING_DECREMENT);
+  let ringLg = Math.max(0, ring + RING_INCREMENT);
+
+  if (ring === 0) {
+    ringLg = 0;
+  }
+
+  return {
+    ring,
+    ringSm: sm === undefined ? ringSm : Math.max(0, sm),
+    ringLg: lg === undefined ? ringLg : Math.max(0, lg),
+  };
+}
+
 function getRoundings(sm?: number, md?: number, lg?: number) {
   const rounding = Math.max(0, md ?? DEFAULT_ROUNDING);
   let roundingSm = Math.max(0, rounding - ROUNDING_DECREMENT);
@@ -240,7 +266,9 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     colors,
     brand,
     gray,
+    ringSm,
     ring,
+    ringLg,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -257,7 +285,9 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
-    "--vl-ring": `${Math.max(0, ring)}px`,
+    "--vl-ring-sm": `${ringSm}px`,
+    "--vl-ring": `${ring}px`,
+    "--vl-ring-lg": `${ringLg}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),