vueless 0.0.473 → 0.0.474

package/constants.js

@@ -13,6 +13,8 @@ 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_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
+export const DEFAULT_RING_OFFSET_COLOR_DARK = "#4b5563"; // gray-600
 export const DEFAULT_ROUNDING = 8; /* pixels */
 
 /* Vueless supported colors and shades */

package/package.json

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

package/preset.tailwind.js

@@ -9,6 +9,7 @@ import {
   DEFAULT_ROUNDING,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
 } from "./constants.js";
 
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
@@ -81,10 +82,9 @@ export const vuelessTailwindConfig = {
       ringOffsetWidth: {
         dynamic: "var(--vl-ring-offset)",
       },
-      // TODO: Add this feature
-      // ringOffsetColor: {
-      //   dynamic: "var(--vl-ring-offset-color)",
-      // },
+      ringOffsetColor: {
+        dynamic: "var(--vl-ring-offset-color)",
+      },
       borderRadius: {
         dynamic: "var(--vl-rounding)",
       },
@@ -94,6 +94,7 @@ export const vuelessTailwindConfig = {
         // TODO: Set colors from vueless.config.{js|ts} if it present.
         "var(--vl-ring)": DEFAULT_RING,
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
+        "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
         ...getReplacementColors(GRAY_COLOR, GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, GRAY_COLOR),

package/utils/utilTheme.js

@@ -9,6 +9,8 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_RING_OFFSET_COLOR_DARK,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -33,6 +35,17 @@ export function setTheme(config = {}) {
   const isDarkMode = setDarkMode(config);
   const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
   const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
+
+  const defaultRingOffsetColorDark =
+    config?.ringOffsetColorDark ??
+    vuelessConfig.ringOffsetColorDark ??
+    DEFAULT_RING_OFFSET_COLOR_DARK;
+
+  const defaultRingOffsetColorLight =
+    config?.ringOffsetColorLight ??
+    vuelessConfig.ringOffsetColorLight ??
+    DEFAULT_RING_OFFSET_COLOR_LIGHT;
+
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
   let brand = config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
   let gray = config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
@@ -52,6 +65,9 @@ export function setTheme(config = {}) {
 
   const defaultBrandShade = isDarkMode ? 400 : 600;
   const defaultGrayShade = isDarkMode ? 400 : 600;
+  const defaultRingOffsetColor = isDarkMode
+    ? defaultRingOffsetColorDark
+    : defaultRingOffsetColorLight;
 
   if (gray === COOL_COLOR) {
     gray = GRAY_COLOR;
@@ -64,6 +80,7 @@ export function setTheme(config = {}) {
   const variables = {
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
+    "--vl-ring-offset-color": `rgb(${convertHexInRgb(defaultRingOffsetColor)})`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),

package/utils/utilUI.js

@@ -55,6 +55,7 @@ const twMerge = extendTailwindMerge(
         classGroups: {
           "ring-w": [{ ring: ["dynamic"] }],
           "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
+          "ring-offset-color": [{ "ring-offset": ["dynamic"] }],
           "font-size": [{ text: ["2xs"] }],
           rounded: [{ rounded: ["dynamic"] }],
         },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.473",
+  "version": "0.0.474",
   "contributions": {
     "html": {
       "description-markup": "markdown",