vueless 0.0.825-beta.113 → 0.0.825-beta.115

package/bin/constants.js

@@ -12,6 +12,7 @@ export default {
   rounding: 8,
   unstyled: false,
   colorMode: "auto",
+  disabledOpacity: 50,
 
   /**
    * Light theme CSS variable settings.

package/constants.js

@@ -33,6 +33,7 @@ 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_DISABLED_OPACITY = 50; /* presents */
 
 /* Vueless supported color shades */
 export const PRIMARY_COLORS = [

package/package.json

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

package/tailwind.css

@@ -24,6 +24,10 @@
   body {
     @apply antialiased text-(--vl-text) bg-(--vl-bg) scheme-light dark:scheme-dark;
   }
+
+  [type='checkbox']:checked {
+    @apply !bg-none;
+  }
 }
 
 /* ------ Tailwind theme settings ------ */

package/types.ts

@@ -131,6 +131,11 @@ export interface ThemeConfig {
    */
   outlineLg?: number;
 
+  /**
+   * Default components opacity for disabled state (in percents).
+   */
+  disabledOpacity?: number;
+
   /**
    * Default color mode.
    */

package/ui.button/config.ts

@@ -20,31 +20,31 @@ export default /*tw*/ {
           text-inverted bg-{color}
           hover:bg-{color}-lifted
           active:bg-{color}-accented
-          disabled:!bg-{color}/75
+          disabled:!text-inverted/(--vl-disabled-opacity) disabled:!bg-{color}/(--vl-disabled-opacity)
         `,
         outlined: `
           text-{color} border-{color}
           hover:text-{color}-lifted hover:border-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:border-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/75 disabled:!bg-{color}/5 disabled:!border-{color}/75
+          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/(--vl-disabled-opacity)
         `,
         subtle: `
           text-{color} bg-{color}/5 border-{color}/15
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/75 disabled:!bg-{color}/5 disabled:!border-{color}/10
+          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/10
         `,
         soft: `
           text-{color} bg-{color}/5
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/75 disabled:!bg-{color}/5
+          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5
         `,
         ghost: `
           text-{color}
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
-          disabled:!text-{color}/75 disabled:!bg-transparent
+          disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-transparent
         `,
       },
       round: {

package/ui.button-link/config.ts

@@ -29,7 +29,7 @@ export default /*tw*/ {
         true: "decoration-dotted hover:decoration-dotted",
       },
       disabled: {
-        true: "!text-{color}/75 !no-underline cursor-not-allowed",
+        true: "!text-{color}/(--vl-disabled-opacity) !no-underline cursor-not-allowed",
       },
       block: {
         true: "w-full",

package/ui.button-link/storybook/stories.ts

@@ -24,7 +24,7 @@ export default {
   title: "Buttons & Links / Link",
   component: ULink,
   args: {
-    label: "Learn more",
+    label: "View in GitHub",
   },
   argTypes: {
     ...getArgTypes(ULink.__name),
@@ -64,7 +64,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", label: "{enumValue}" };
+Sizes.args = { enum: "size" };
 
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color", label: "{enumValue}" };
@@ -145,7 +145,7 @@ export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   slotTemplate: `
     <template #default>
-      <UButton label="Learn more" />
+      <UButton label="View on GitHub" />
     </template>
   `,
 };

package/ui.container-modal/UModal.vue

@@ -132,8 +132,6 @@ function toggleOverflow() {
 
     if (element) {
       element.style.overflow = "hidden";
-
-      return;
     }
 
     document.body.style.overflow = "auto";

package/ui.form-checkbox/config.ts

@@ -10,7 +10,7 @@ export default /*tw*/ {
       focus:ring-0 focus:ring-offset-0
       focus-visible:outline-{color} focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:transition
       disabled:border-default disabled:bg-lifted disabled:cursor-not-allowed
-      disabled:checked:bg-{color}/75 disabled:checked:border-transparent
+      disabled:checked:bg-{color}/(--vl-disabled-opacity) disabled:checked:border-transparent
     `,
     variants: {
       size: {
@@ -35,7 +35,7 @@ export default /*tw*/ {
         lg: "size-6",
       },
       disabled: {
-        true: "!bg-{color}/75 cursor-not-allowed",
+        true: "!bg-{color}/(--vl-disabled-opacity) cursor-not-allowed",
       },
     },
   },

package/ui.form-color-picker/storybook/stories.ts

@@ -25,7 +25,7 @@ export default {
     modelValue: "",
     colors: /*tw*/ {
       grayscale: "bg-grayscale",
-      neutral: "bg-neutral",
+      neutral: "bg-neutral-600",
       red: "bg-red-600",
       orange: "bg-orange-600",
       amber: "bg-amber-600",

package/ui.form-listbox/config.ts

@@ -9,7 +9,7 @@ export default /*tw*/ {
   listItem: "group/item block mb-px last:mb-0",
   option: {
     base: `
-      rounded-small px-2 py-2 flex items-center align-middle whitespace-nowrap cursor-pointer
+      rounded-small px-2 py-2 flex gap-2 items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-snug
       hover:bg-{color}/5 active:bg-{color}/10
       overflow-hidden text-ellipsis text-default

package/ui.form-radio/config.ts

@@ -11,7 +11,7 @@ export default /*tw*/ {
       focus:ring-0 focus:ring-offset-0
       focus-visible:outline-{color} focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:transition
       disabled:border-default disabled:bg-lifted disabled:cursor-not-allowed
-      disabled:checked:bg-{color}/75 disabled:checked:border-transparent
+      disabled:checked:bg-{color}/(--vl-disabled-opacity) disabled:checked:border-transparent
 
     `,
     variants: {

package/ui.form-switch/USwitch.vue

@@ -49,7 +49,7 @@ const switchLabel = computed(() => {
 });
 
 const iconColor = computed(() => {
-  return checkedValue.value ? props.color : "grayscale";
+  return checkedValue.value ? props.color : "inherit";
 });
 
 const toggleIconName = computed(() => {

package/ui.form-switch/config.ts

@@ -17,7 +17,7 @@ export default /*tw*/ {
       },
       checked: {
         true: "bg-{color} hover:bg-{color}-lifted active:bg-{color}-accented",
-        false: "bg-neutral/25 hover:bg-neutral/50 active:bg-neutral/75",
+        false: "bg-accented",
       },
       disabled: {
         true: "pointer-events-none",
@@ -27,8 +27,8 @@ export default /*tw*/ {
       { toggleLabel: true, size: "sm", class: "w-10" },
       { toggleLabel: true, size: "md", class: "w-12" },
       { toggleLabel: true, size: "lg", class: "w-14" },
-      { disabled: true, checked: false, class: "bg-neutral/50" },
-      { disabled: true, checked: true, class: "bg-{color}/50" },
+      { disabled: true, checked: false, class: "bg-accented/(--vl-disabled-opacity)" },
+      { disabled: true, checked: true, class: "bg-{color}/(--vl-disabled-opacity)" },
     ],
   },
   input: "sr-only",
@@ -51,9 +51,9 @@ export default /*tw*/ {
     base: "{UIcon}",
     defaults: {
       size: {
-        sm: "2xs",
-        md: "xs",
-        lg: "sm",
+        sm: "3xs",
+        md: "2xs",
+        lg: "xs",
       },
     },
   },
@@ -70,7 +70,7 @@ export default /*tw*/ {
       {
         toggleLabel: false,
         checked: false,
-        class: "bg-neutral/25 hover:bg-neutral/50 active:bg-neutral/75",
+        class: "bg-accented",
       },
     ],
   },

package/ui.image-icon/config.ts

@@ -28,7 +28,7 @@ export default /*tw*/ {
         true: "cursor-pointer hover:text-{color}-lifted active:text-{color}-accented",
       },
       disabled: {
-        true: "text-{color}/75 cursor-not-allowed",
+        true: "text-{color}/(--vl-disabled-opacity) cursor-not-allowed",
       },
     },
   },

package/ui.text-empty/config.ts

@@ -11,7 +11,7 @@ export default /*tw*/ {
     },
   },
   emptyIconWrapper: {
-    base: "rounded-full bg-neutral-accented/5",
+    base: "rounded-full bg-inverted/5",
     variants: {
       size: {
         sm: "p-4",

package/utils/theme.ts

@@ -31,6 +31,7 @@ import {
   DEFAULT_TEXT,
   TEXT_INCREMENT,
   TEXT_DECREMENT,
+  DEFAULT_DISABLED_OPACITY,
 } from "../constants.js";
 import type { Config, NeutralColors, PrimaryColors, VuelessCssVariables } from "../types.ts";
 import { ColorMode } from "../types.ts";
@@ -48,6 +49,7 @@ declare interface RootCSSVariableOptions {
   textSm: number;
   text: number;
   textLg: number;
+  disabledOpacity: number;
   lightTheme: Partial<VuelessCssVariables>;
   darkTheme: Partial<VuelessCssVariables>;
 }
@@ -148,6 +150,10 @@ export function setTheme(config: Config = {}, isCachedAutoMode?: boolean) {
   // eslint-disable-next-line vue/max-len, prettier/prettier
   setColorMode((config.colorMode || cachedColorMode || vuelessConfig.colorMode || ColorMode.Light) as ColorMode, isCachedAutoMode);
 
+  const disabledOpacity = getDisabledOpacity(
+    config.disabledOpacity ?? vuelessConfig.disabledOpacity,
+  );
+
   const { roundingSm, rounding, roundingLg } = getRoundings(
     config.roundingSm ?? vuelessConfig.roundingSm,
     config.rounding ?? cachedRounding ?? vuelessConfig.rounding,
@@ -246,6 +252,7 @@ export function setTheme(config: Config = {}, isCachedAutoMode?: boolean) {
     textSm,
     text,
     textLg,
+    disabledOpacity,
     lightTheme,
     darkTheme,
   });
@@ -317,6 +324,14 @@ function getRoundings(sm?: string | number, md?: string | number, lg?: string |
   };
 }
 
+/**
+ * Retrieve disabled opacity value.
+ * @return number - opacity value.
+ */
+function getDisabledOpacity(opacity?: number) {
+  return Math.max(0, opacity ?? DEFAULT_DISABLED_OPACITY);
+}
+
 /**
  * Generate and apply Vueless CSS variables.
  * @return string - Vueless CSS variables string.
@@ -335,6 +350,7 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     textSm,
     text,
     textLg,
+    disabledOpacity,
     lightTheme,
     darkTheme,
   } = options;
@@ -342,16 +358,17 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
   let darkVariables: Partial<VuelessCssVariables> = {};
 
   let variables: Partial<VuelessCssVariables> = {
-    "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
-    "--vl-rounding-md": `${Number(rounding) / PX_IN_REM}rem`,
-    "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
+    "--vl-rounding-sm": `${roundingSm / PX_IN_REM}rem`,
+    "--vl-rounding-md": `${rounding / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${roundingLg / PX_IN_REM}rem`,
     "--vl-outline-sm": `${outlineSm}px`,
     "--vl-outline-md": `${outline}px`,
     "--vl-outline-lg": `${outlineLg}px`,
-    "--vl-text-xs": `${Number(textXs) / PX_IN_REM}rem`,
-    "--vl-text-sm": `${Number(textSm) / PX_IN_REM}rem`,
-    "--vl-text-md": `${Number(text) / PX_IN_REM}rem`,
-    "--vl-text-lg": `${Number(textLg) / PX_IN_REM}rem`,
+    "--vl-text-xs": `${textXs / PX_IN_REM}rem`,
+    "--vl-text-sm": `${textSm / PX_IN_REM}rem`,
+    "--vl-text-md": `${text / PX_IN_REM}rem`,
+    "--vl-text-lg": `${textLg / PX_IN_REM}rem`,
+    "--vl-disabled-opacity": `${disabledOpacity}%`,
   };
 
   for (const shade of COLOR_SHADES) {