vueless 0.0.714 → 0.0.716

package/bin/constants.js

@@ -9,9 +9,7 @@ export default {
   brand: "grayscale",
   gray: "cool",
   darkMode: "auto",
-  ring: 2,
-  ringOffsetColorLight: "#ffffff", // white
-  ringOffsetColorDark: "#111827", // gray-900
+  outline: 2,
   rounding: 8,
 
   /**

package/constants.js

@@ -17,11 +17,9 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 /* Vueless defaults */
 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_OUTLINE = 2; /* pixels */
+export const OUTLINE_DECREMENT = 1; /* pixels */
+export const OUTLINE_INCREMENT = 1; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
@@ -173,8 +171,7 @@ export const TAILWIND_MERGE_EXTENSION = {
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "ring-w": [{ ring: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
-      "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
+      "outline-w": [{ outline: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
       "rounded-s": [{ "rounded-s": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],

package/package.json

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

package/preset-tailwind.js

@@ -12,15 +12,14 @@ import {
   DARK_MODE_SELECTOR,
   TAILWIND_COLORS,
   DEFAULT_ROUNDING,
-  DEFAULT_RING,
-  DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_OUTLINE,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   GRAYSCALE_COLOR,
   ROUNDING_DECREMENT,
   ROUNDING_INCREMENT,
-  RING_INCREMENT,
-  RING_DECREMENT,
+  OUTLINE_INCREMENT,
+  OUTLINE_DECREMENT,
 } from "./constants.js";
 
 const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
@@ -95,22 +94,18 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-rounding)",
         "dynamic-lg": "var(--vl-rounding-lg)",
       },
-      ringWidth: {
-        "dynamic-sm": "var(--vl-ring-sm)",
-        dynamic: "var(--vl-ring)",
-        "dynamic-lg": "var(--vl-ring-lg)",
-      },
-      ringOffsetColor: {
-        dynamic: twColorWithOpacity("--vl-ring-offset-color"),
+      outlineWidth: {
+        "dynamic-sm": "var(--vl-outline-sm)",
+        dynamic: "var(--vl-outline)",
+        "dynamic-lg": "var(--vl-outline-lg)",
       },
     },
     configViewer: {
       themeReplacements: {
         /* 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-outline-sm)": globalSettings.ringSm || Math.max(0, (globalSettings.ring || DEFAULT_OUTLINE) - OUTLINE_DECREMENT),
+        "var(--vl-outline)": globalSettings.ring || DEFAULT_OUTLINE,
+        "var(--vl-outline-lg)": globalSettings.ringLg || Math.max(0, (globalSettings.ring || DEFAULT_OUTLINE) + OUTLINE_INCREMENT),
         "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 || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_INCREMENT),

package/types.ts

@@ -96,29 +96,19 @@ export interface ThemeConfig {
   roundingLg?: number;
 
   /**
-   * Default components small size ring width.
+   * Default components small size outline width.
    */
-  ringSm?: number;
+  outlineSm?: number;
 
   /**
-   * Default components ring width.
+   * Default components outline width.
    */
-  ring?: number;
+  outline?: number;
 
   /**
-   * Default components large size ring width.
+   * Default components large size outline width.
    */
-  ringLg?: number;
-
-  /**
-   * Default components ring color for light theme.
-   */
-  ringOffsetColorLight?: string;
-
-  /**
-   * Default components ring color for dark theme.
-   */
-  ringOffsetColorDark?: string;
+  outlineLg?: number;
 
   /**
    * Default color mode.
@@ -349,10 +339,9 @@ export interface TailwindColorShades {
 }
 
 export interface VuelessCssVariables {
-  "--vl-ring-sm": string;
-  "--vl-ring": string;
-  "--vl-ring-lg": string;
-  "--vl-ring-offset-color": string;
+  "--vl-outline-sm": string;
+  "--vl-outline": string;
+  "--vl-outline-lg": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;
   "--vl-rounding-lg": string;

package/ui.button/config.ts

@@ -3,9 +3,9 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
       border border-transparent outline-none transition cursor-pointer
-      focus-visible:ring-dynamic focus-visible:ring-offset-2
-      focus-visible:ring-{color}-600 dark:focus-visible:ring-{color}-400
-      disabled:cursor-not-allowed disabled:ring-0 disabled:ring-offset-0
+      focus-visible:outline-dynamic focus-visible:outline-offset-2
+      focus-visible:outline-{color}-600 dark:focus-visible:outline-{color}-400
+      disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,
     variants: {
       size: {
@@ -54,7 +54,7 @@ export default /*tw*/ {
     compoundVariants: [
       {
         color: ["grayscale", "white"],
-        class: "focus-visible:ring-gray-900 dark:focus-visible:ring-gray-100",
+        class: "focus-visible:outline-gray-900 dark:focus-visible:outline-gray-100",
       },
       {
         color: "grayscale",

package/ui.button-link/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       text-{color}-600 decoration-{color}-600 underline-offset-4
       hover:text-{color}-700 hover:decoration-{color}-700
       active:text-{color}-800 active:decoration-{color}-800
-      focus-visible:ring-dynamic focus-visible:ring-offset-4 focus-visible:ring-{color}-600 focus-visible:outline-0
+      focus-visible:outline-dynamic focus-visible:outline-offset-4 focus-visible:outline-{color}-600
     `,
     variants: {
       size: {
@@ -28,9 +28,9 @@ export default /*tw*/ {
           text-gray-900 decoration-gray-900
           hover:text-gray-800 hover:decoration-gray-800
           active:text-gray-700 active:decoration-gray-700
-          focus-visible:ring-gray-900
+          focus-visible:outline-gray-900
         `,
-        white: "decoration-white text-white focus-visible:ring-white",
+        white: "decoration-white text-white focus-visible:outline-white",
       },
       defaultSlot: {
         true: "flex items-center no-underline hover:no-underline",

package/ui.button-toggle-item/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   toggleButton: {
-    base: "{UButton} font-normal focus-visible:ring-offset-0",
+    base: "{UButton} font-normal focus-visible:outline-offset-0",
     defaults: {
       variant: "thirdary",
     },

package/ui.dropdown-link/config.ts

@@ -1,20 +1,20 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      relative inline-flex items-center outline-0 rounded
-      focus-visible:ring-dynamic focus-visible:ring-offset-4 focus-visible:ring-{color}-600
+      relative inline-flex items-center rounded
+      focus-visible:outline focus-visible:outline-dynamic focus-visible:outline-offset-4 focus-visible:outline-{color}-600
     `,
     variants: {
       color: {
-        grayscale: "focus-visible:ring-gray-900",
-        white: "focus-visible:ring-white",
+        grayscale: "focus-visible:outline-gray-900",
+        white: "focus-visible:outline-white",
       },
       opened: {
         true: "group",
       },
     },
   },
-  dropdownLink: "{ULink} focus-visible:ring-offset-0 focus-visible:ring-0",
+  dropdownLink: "{ULink} focus-visible:outline-none",
   toggleIcon: {
     base: "{UIcon} block transition duration-300 group-[]:rotate-180",
     variants: {

package/ui.dropdown-list/config.ts

@@ -16,8 +16,8 @@ export default /*tw*/ {
     `,
     variants: {
       color: {
-        grayscale: "hover:bg-gray-100 active:bg-gray-200",
-        white: "hover:bg-gray-100 active:bg-gray-200",
+        grayscale: "hover:bg-gray-900/5 active:bg-gray-900/10",
+        white: "hover:bg-gray-900/5 active:bg-gray-900/10",
       },
       size: {
         sm: "text-xs",
@@ -29,7 +29,15 @@ export default /*tw*/ {
       },
     },
   },
-  optionActive: "{>option} bg-{color}-600/10 hover:bg-{color}-600/10 text-brand-600",
+  optionActive: {
+    base: "{>option} bg-{color}-600/10 hover:bg-{color}-600/10 text-{color}-600",
+    variants: {
+      color: {
+        grayscale: "bg-gray-900/10 hover:bg-gray-900/10 text-gray-900",
+        white: "bg-gray-900/10 hover:bg-gray-900/10 text-gray-900",
+      },
+    },
+  },
   optionHighlighted: "bg-{color}-50",
   optionContent: "overflow-visible text-ellipsis",
   groupBase: {

package/ui.form-calendar/config.ts

@@ -63,8 +63,12 @@ export default /*tw*/ {
   activeYear: "{>year} {>activeDate}",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-stretch justify-between gap-2 border-t border-gray-200",
   timepickerLabel: "w-full self-center",
-  timepickerInputWrapper: "flex items-center rounded-dynamic border border-brand-300",
-  timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-sm focus:ring-0 focus:placeholder:text-gray-900",
+  timepickerInputWrapper: `
+    flex items-center rounded-dynamic border border-gray-300
+    hover:focus-within:border-brand-600 focus-within:border-brand-600
+    focus-within:outline focus-within:outline-dynamic-sm focus-within:outline-brand-600
+  `,
+  timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-sm focus:ring-0",
   timepickerInputHours: "{>timepickerInput} rounded-l-dynamic",
   timepickerInputMinutes: "{>timepickerInput}",
   timepickerInputSeconds: "{>timepickerInput} rounded-r-dynamic",

package/ui.form-checkbox/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
       active:border-{color}-600 active:bg-{color}-200
       checked:text-{color}-600
       focus:ring-0 focus:ring-offset-0
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
+      focus-visible:outline-{color}-600 focus-visible:outline-dynamic focus-visible:outline-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {
@@ -17,10 +17,10 @@ export default /*tw*/ {
         lg: "size-6",
       },
       color: {
-        grayscale: "focus-visible:ring-gray-900 active:bg-gray-200 checked:text-gray-900",
+        grayscale: "focus-visible:outline-gray-900 active:bg-gray-200 checked:text-gray-900",
       },
       error: {
-        true: "!border-red-600 focus:ring-red-600",
+        true: "!border-red-600 focus:outline-red-600",
       },
     },
   },

package/ui.form-date-picker/config.ts

@@ -4,10 +4,10 @@ export default /*tw*/ {
   datepickerInputActive: {
     base: "{UInput} {>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-offset-2 ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      base: "outline outline-dynamic-sm outline-brand-600 border-brand-600 hover:border-brand-600",
       variants: {
         error: {
-          true: "ring-red-700/15 border-red-500 hover:border-red-500",
+          true: "outline-red-600 border-red-600 hover:border-red-600",
         },
       },
     },

package/ui.form-date-picker-range/config.ts

@@ -4,10 +4,10 @@ export default /*tw*/ {
   datepickerInputActive: {
     base: "{>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-brand-600 border-brand-600 hover:border-brand-600",
+      base: "outline outline-dynamic-sm outline-brand-600 border-brand-600 hover:border-brand-600",
       variants: {
         error: {
-          true: "!border-red-600 ring-red-600",
+          true: "border-red-600 hover:border-red-600 outline-red-600",
         },
       },
     },
@@ -87,7 +87,7 @@ export default /*tw*/ {
       wrapper: "w-full transition",
       description: "hidden",
     },
-    wrapper: "focus-within:z-10 focus-within:ring-0 focus-within:border-gray-500 hover:focus-within:border-gray-500",
+    wrapper: "focus-within:z-10 focus-within:outline-0 focus-within:border-gray-500 hover:focus-within:border-gray-500",
   },
   rangeInputFirst: {
     base: "{UInput} {>rangeInput}",

package/ui.form-input/config.ts

@@ -4,14 +4,14 @@ 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-sm focus-within:ring-brand-600
+      focus-within:outline focus-within:outline-dynamic-sm focus-within:outline-brand-600
     `,
     variants: {
       error: {
-        true: "!border-red-600 focus-within:ring-red-600",
+        true: "!border-red-600 focus-within:outline-red-600",
       },
       disabled: {
-        true: "!border-gray-300 focus-within:ring-0 bg-gray-100",
+        true: "!border-gray-300 focus-within:outline-0 bg-gray-100",
       },
     },
   },

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

@@ -5,11 +5,11 @@ 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-sm
+      focus-within:outline focus-within:outline-dynamic-sm focus-within:outline-brand-600
     `,
     variants: {
       error: {
-        true: "!border-red-600 focus-within:ring-red-600",
+        true: "!border-red-600 focus-within:outline-red-600",
       },
       disabled: {
         true: "pointer-events-none bg-gray-100",

package/ui.form-radio/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
       active:border-{color}-600 active:bg-{color}-200
       checked:text-{color}-600
       focus:ring-0 focus:ring-offset-0
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
+      focus-visible:outline-{color}-600 focus-visible:outline-dynamic focus-visible:outline-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
       disabled:checked:bg-gray-400 disabled:checked:border-transparent
     `,
@@ -19,7 +19,7 @@ export default /*tw*/ {
       },
       color: {
         grayscale: `
-          focus-visible:ring-gray-900
+          focus-visible:outline-gray-900
           checked:text-gray-900 checked:hover:text-gray-800 checked:active:text-gray-700
         `,
       },

package/ui.form-select/USelect.vue

@@ -130,10 +130,6 @@ const dropdownValue = computed({
   },
 });
 
-const isSelectedValueLabelVisible = computed(() => {
-  return !props.multiple && isLocalValue.value && (!isOpen.value || !props.searchable);
-});
-
 const filteredOptions = computed(() => {
   const normalizedSearch = search.value.toLowerCase().trim() || "";
 
@@ -617,7 +613,6 @@ const {
 
         <div v-bind="searchAttrs">
           <input
-            v-show="searchable || !localValue || multiple || !isOpen"
             :id="elementId"
             ref="searchInputRef"
             v-model="search"
@@ -625,7 +620,7 @@ const {
             autocomplete="off"
             :spellcheck="false"
             :placeholder="inputPlaceholder"
-            :disabled="disabled"
+            :disabled="disabled || !searchable"
             :aria-controls="'listbox-' + elementId"
             v-bind="searchInputAttrs"
             :data-test="getDataTest('search')"
@@ -639,7 +634,7 @@ const {
         </div>
 
         <span
-          v-if="isSelectedValueLabelVisible"
+          v-if="!multiple && isLocalValue && ((searchable && !isOpen) || !searchable)"
           v-bind="selectedLabelAttrs"
           @mousedown.prevent="toggle"
         >

package/ui.form-select/config.ts

@@ -4,17 +4,16 @@ export default /*tw*/ {
     base: `
       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-sm
-      focus-within:border-brand-600 focus-within:outline-none
+      hover:border-gray-400 hover:transition hover:focus-within:border-brand-600 focus-within:border-brand-600
+      focus-within:outline focus-within:outline-dynamic-sm focus-within:outline-brand-600
     `,
     variants: {
       error: {
-        true: "!border-red-600 focus-within:ring-red-600",
+        true: "!border-red-600 focus-within:outline-red-600",
       },
       disabled: {
         true: `
-          focus-within:ring-0 bg-gray-100
+          focus-within:outline-0 bg-gray-100
           hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
         `,
       },
@@ -109,13 +108,11 @@ export default /*tw*/ {
     ],
   },
   search: {
-    base: "flex w-0",
-    variants: {
-      selected: {
-        false: "w-full",
-      },
-    },
-    compoundVariants: [{ opened: true, searchable: false, class: "w-0" }],
+    base: "flex w-full",
+    compoundVariants: [
+      { multiple: false, selected: true, opened: false, class: "w-0" },
+      { multiple: false, selected: true, searchable: false, class: "w-0" },
+    ],
   },
   searchInput: {
     base: `

package/ui.form-switch/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex items-center p-0.5 relative rounded-full cursor-pointer transition
-      focus-visible:ring-dynamic focus-visible:ring-offset-2 ring-{color}-600 outline-0
+      focus-visible:outline focus-visible:outline-dynamic focus-visible:outline-offset-2 focus-visible:outline-{color}-600
     `,
     variants: {
       size: {
@@ -12,7 +12,7 @@ export default /*tw*/ {
         lg: "w-10",
       },
       color: {
-        grayscale: "ring-gray-900",
+        grayscale: "outline-gray-900",
       },
       checked: {
         true: "bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800",

package/ui.form-textarea/config.ts

@@ -6,16 +6,15 @@ export default /*tw*/ {
   wrapper: {
     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-sm
-      focus-within:ring-brand-600 focus-within:outline-none
+      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
+      focus-within:outline focus-within:outline-dynamic-sm focus-within:outline-brand-600
     `,
     variants: {
       error: {
-        true: "!border-red-600 focus-within:ring-red-600",
+        true: "!border-red-600 focus-within:outline-red-600",
       },
       disabled: {
-        true: "!border-gray-300 focus-within:ring-0 bg-gray-100",
+        true: "!border-gray-300 focus-within:outline-0 bg-gray-100",
       },
     },
   },
@@ -23,7 +22,7 @@ export default /*tw*/ {
     base: `
       px-3 pt-2 pb-1.5 block w-full bg-transparent border-none font-normal text-gray-900
       placeholder:text-gray-400 placeholder:font-normal placeholder:leading-none
-      focus:border-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed
+      focus:ring-0 disabled:cursor-not-allowed
     `,
     variants: {
       size: {

package/ui.text-badge/config.ts

@@ -16,11 +16,11 @@ export default /*tw*/ {
         true: "rounded-full",
       },
       tabindex: {
-        true: "cursor-pointer focus-visible:ring-dynamic focus-visible:ring-offset-2 focus-visible:ring-{color}-600",
+        true: "cursor-pointer focus-visible:outline-dynamic focus-visible:outline-offset-2 focus-visible:outline-{color}-600",
       },
       color: {
-        grayscale: "focus-visible:ring-gray-900",
-        white: " focus-visible:ring-gray-900",
+        grayscale: "focus-visible:outline-gray-900",
+        white: " focus-visible:outline-gray-900",
       },
     },
     compoundVariants: [

package/utils/theme.ts

@@ -12,11 +12,9 @@ import {
   TAILWIND_COLORS,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
-  DEFAULT_RING,
-  DEFAULT_RING_OFFSET_COLOR_LIGHT,
-  DEFAULT_RING_OFFSET_COLOR_DARK,
-  RING_DECREMENT,
-  RING_INCREMENT,
+  DEFAULT_OUTLINE,
+  OUTLINE_DECREMENT,
+  OUTLINE_INCREMENT,
   DEFAULT_ROUNDING,
   ROUNDING_DECREMENT,
   ROUNDING_INCREMENT,
@@ -42,11 +40,9 @@ declare interface RootCSSVariableOptions {
   colors: Colors;
   brand: string;
   gray: string;
-  ringSm: number;
-  ring: number;
-  ringLg: number;
-  ringOffsetColorDark: string;
-  ringOffsetColorLight: string;
+  outlineSm: number;
+  outline: number;
+  outlineLg: number;
   roundingSm: number;
   rounding: number;
   roundingLg: number;
@@ -159,22 +155,12 @@ export function setTheme(config: Config = {}) {
   let gray: GrayColors =
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
-  const { ringSm, ring, ringLg } = getRings(
-    config.ringSm ?? vuelessConfig.ringSm,
-    config.ring ?? vuelessConfig.ring,
-    config.ringLg ?? vuelessConfig.ringLg,
+  const { outlineSm, outline, outlineLg } = getRings(
+    config.outlineSm ?? vuelessConfig.outlineSm,
+    config.outline ?? vuelessConfig.outline,
+    config.outlineLg ?? vuelessConfig.outlineLg,
   );
 
-  const ringOffsetColorDark =
-    config.ringOffsetColorDark ??
-    vuelessConfig.ringOffsetColorDark ??
-    DEFAULT_RING_OFFSET_COLOR_DARK;
-
-  const ringOffsetColorLight =
-    config.ringOffsetColorLight ??
-    vuelessConfig.ringOffsetColorLight ??
-    DEFAULT_RING_OFFSET_COLOR_LIGHT;
-
   const colors: Colors = merge(
     TAILWIND_COLORS as Colors,
     tailwindConfig?.theme?.extend?.colors || {},
@@ -206,11 +192,9 @@ export function setTheme(config: Config = {}) {
     colors,
     brand,
     gray,
-    ringSm,
-    ring,
-    ringLg,
-    ringOffsetColorDark,
-    ringOffsetColorLight,
+    outlineSm,
+    outline,
+    outlineLg,
     roundingSm,
     rounding,
     roundingLg,
@@ -218,18 +202,18 @@ 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);
+  const outline = Math.max(0, md ?? DEFAULT_OUTLINE);
+  const outlineSm = Math.max(0, outline - OUTLINE_DECREMENT);
+  let outlineLg = Math.max(0, outline + OUTLINE_INCREMENT);
 
-  if (ring === 0) {
-    ringLg = 0;
+  if (outline === 0) {
+    outlineLg = 0;
   }
 
   return {
-    ring,
-    ringSm: sm === undefined ? ringSm : Math.max(0, sm),
-    ringLg: lg === undefined ? ringLg : Math.max(0, lg),
+    outline,
+    outlineSm: sm === undefined ? outlineSm : Math.max(0, sm),
+    outlineLg: lg === undefined ? outlineLg : Math.max(0, lg),
   };
 }
 
@@ -262,22 +246,10 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     options.brand = options.gray;
   }
 
-  const {
-    colors,
-    brand,
-    gray,
-    ringSm,
-    ring,
-    ringLg,
-    ringOffsetColorDark,
-    ringOffsetColorLight,
-    roundingSm,
-    rounding,
-    roundingLg,
-  } = options;
+  const { colors, brand, gray, outlineSm, outline, outlineLg, roundingSm, rounding, roundingLg } =
+    options;
 
   const isDarkMode = isCSR && document.documentElement.classList.contains(DARK_MODE_SELECTOR);
-  const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
   const defaultBrandShade = isDarkMode ? 400 : 600;
   const defaultGrayShade = isDarkMode ? 400 : 600;
 
@@ -285,10 +257,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-sm": `${ringSm}px`,
-    "--vl-ring": `${ring}px`,
-    "--vl-ring-lg": `${ringLg}px`,
-    "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
+    "--vl-outline-sm": `${outlineSm}px`,
+    "--vl-outline": `${outline}px`,
+    "--vl-outline-lg": `${outlineLg}px`,
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),
   };