vueless 0.0.707 → 0.0.708

package/bin/constants.js

@@ -10,7 +10,6 @@ export default {
   gray: "cool",
   darkMode: "auto",
   ring: 2,
-  ringOffset: 2,
   ringOffsetColorLight: "#ffffff", // white
   ringOffsetColorDark: "#111827", // gray-900
   rounding: 8,

package/constants.js

@@ -18,7 +18,6 @@ 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 DEFAULT_RING_OFFSET = 2; /* 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 */
@@ -173,7 +172,6 @@ export const TAILWIND_MERGE_EXTENSION = {
     },
     classGroups: {
       "ring-w": [{ ring: ["dynamic"] }],
-      "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
       "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.707",
+  "version": "0.0.708",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -13,7 +13,6 @@ import {
   TAILWIND_COLORS,
   DEFAULT_ROUNDING,
   DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -95,9 +94,6 @@ export const vuelessTailwindConfig = {
       ringWidth: {
         dynamic: "var(--vl-ring)",
       },
-      ringOffsetWidth: {
-        dynamic: "var(--vl-ring-offset)",
-      },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
       },
@@ -106,7 +102,6 @@ export const vuelessTailwindConfig = {
       themeReplacements: {
         /* eslint-disable prettier/prettier */
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
-        "var(--vl-ring-offset)": globalSettings.ringOffset || DEFAULT_RING_OFFSET,
         "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)": globalSettings.ring || DEFAULT_ROUNDING,

package/types.ts

@@ -100,11 +100,6 @@ export interface ThemeConfig {
    */
   ring?: number;
 
-  /**
-   * Default components ring offset width.
-   */
-  ringOffset?: number;
-
   /**
    * Default components ring color for light theme.
    */
@@ -345,7 +340,6 @@ export interface TailwindColorShades {
 
 export interface VuelessCssVariables {
   "--vl-ring": string;
-  "--vl-ring-offset": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;

package/ui.button/config.ts

@@ -3,7 +3,7 @@ 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-dynamic
+      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
     `,

package/ui.form-checkbox/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
       active:border-{color}-600 active:bg-{color}-200
       focus:ring-0 focus:ring-offset-0
       checked:text-{color}-600
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {

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

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

package/ui.form-radio/config.ts

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

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-dynamic ring-{color}-600 outline-0
+      focus-visible:ring-dynamic focus-visible:ring-offset-2 ring-{color}-600 outline-0
     `,
     variants: {
       size: {

package/ui.text-badge/config.ts

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

package/utils/theme.ts

@@ -11,7 +11,6 @@ import {
   GRAYSCALE_COLOR,
   TAILWIND_COLORS,
   DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -42,7 +41,6 @@ declare interface RootCSSVariableOptions {
   brand: string;
   gray: string;
   ring: number;
-  ringOffset: number;
   ringOffsetColorDark: string;
   ringOffsetColorLight: string;
   roundingSm: number;
@@ -158,7 +156,6 @@ export function setTheme(config: Config = {}) {
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
   const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
-  const ringOffset = config.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
   const ringOffsetColorDark =
     config.ringOffsetColorDark ??
@@ -202,7 +199,6 @@ export function setTheme(config: Config = {}) {
     brand,
     gray,
     ring,
-    ringOffset,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -245,7 +241,6 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     brand,
     gray,
     ring,
-    ringOffset,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -263,7 +258,6 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     "--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-offset": `${Math.max(0, ringOffset)}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),