npm - vueless - Versions diffs - 0.0.136 → 0.0.137 - Mend

vueless 0.0.136 → 0.0.137

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json +1 -1
package/preset.tailwind/index.js +1 -1
package/ui.button/configs/default.config.js +82 -89
package/web-types.json +1 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.136",
+  "version": "0.0.137",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/preset.tailwind/index.js CHANGED Viewed

@@ -26,7 +26,7 @@ export function vuelessPreset() {
   const devSafelist = [
     {
       pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
-      variants: ["hover", "focus", "focus-within", "active"],
+      variants: ["hover", "focus", "focus-within", "active", "disabled"],
     },
   ];

package/ui.button/configs/default.config.js CHANGED Viewed

@@ -2,43 +2,44 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center
-      text-base font-medium rounded-lg outline-none
+      text-base font-medium outline-none
+      border border-solid rounded-lg
       transition duration-100 ease-in-out
-      focus:ring-4 focus:ring-opacity-10 focus:outline-none
+      focus:ring-opacity-20 focus:ring-4 focus:outline-none
+      active:ring-opacity-20
+      disabled:ring-0 disabled:cursor-no-drop
     `,
     variants: {
       size: {
-        xs: "px-2 py-1.5 text-xs leading-tight",
-        sm: "px-3 py-2.5 text-sm leading-tight",
-        md: "px-4 py-3.5 text-base leading-tight",
-        lg: "px-5 py-[1.125rem] text-lg leading-tight",
+        xs: "px-2 py-1.5 text-xs leading-tight gap-0.5",
+        sm: "px-3 py-2.5 text-sm leading-tight gap-1",
+        md: "px-4 py-3.5 text-base leading-tight gap-1.5",
+        lg: "px-5 py-[1.125rem] text-lg leading-tight gap-2",
       },
       variant: {
         primary: `
-          border border-solid border-{color}-500 bg-{color}-500 text-white
-          focus:border-opacity-0 focus:bg-opacity-80 focus:border-{color}-500 focus:bg-{color}-500
-          focus:ring-{color}-500
-          hover:border-{color}-500 hover:bg-{color}-500
-          hover:border-opacity-0 hover:bg-opacity-80
-          active:border-{color}-500 active:bg-{color}-500
-          active:border-opacity-0 active:bg-opacity-70`,
+          text-white
+          bg-{color}-600 border-{color}-600
+          hover:bg-{color}-700 hover:border-{color}-700
+          focus:bg-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
+          active:bg-{color}-800 active:border-{color}-800 active:ring-{color}-800
+          disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
+        `,
         secondary: `
-          border border-solid bg-transparent
-          border-{color}-500 text-{color}-500
-          focus:text-{color}-500 focus:border-{color}-500 focus:ring-{color}-500
-          focus:text-opacity-80 focus:border-opacity-80
-          hover:border-{color}-500 hover:text-{color}-500
-          hover:text-opacity-80 hover:border-opacity-80
-          active:border-{color}-500 active:text-{color}-500
-          active:border-opacity-70 active:text-opacity-70`,
+          text-{color}-600 border-{color}-600
+          hover:text-{color}-700 hover:border-{color}-700
+          focus:text-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
+          active:text-{color}-800 active:border-{color}-800 active:ring-{color}-800
+          disabled:text-{color}-300 disabled:border-{color}-300
+        `,
         thirdary: `
-          border border-transparent bg-transparent text-{color}-500
-          focus:text-{color}-500 focus:bg-{color}-500 focus:ring-{color}-500
-          focus:text-opacity-70 focus:bg-opacity-5
-          hover:text-{color}-500 hover:bg-{color}-500
-          hover:text-opacity-70 hover:bg-opacity-10
-          active:text-{color}-500 active:bg-{color}-500
-          active:text-opacity-60 active:bg-opacity-15`,
+          border-transparent
+          text-{color}-600
+          hover:text-{color}-700 hover:bg-{color}-700 hover:bg-opacity-10
+          focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10 focus:ring-{color}-700
+          active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15 active:ring-{color}-800
+          disabled:text-{color}-300
+        `,
       },
       loading: {
         true: "pointer-events-none",
@@ -49,102 +50,84 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
+      color: {
+        grayscale: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
+        white: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
+      },
     },
     compoundVariants: [
-      {
-        disabled: true,
-        variant: "primary",
-        class: `
-          border-opacity-0 bg-opacity-40 cursor-no-drop text-white
-          hover:bg-opacity-40
-          focus:bg-opacity-40 focus:ring-0
-          active:bg-opacity-40 active:ring-0
-        `,
-      },
-      {
-        disabled: true,
-        variant: "secondary",
-        class: `
-          text-opacity-40 border-opacity-40 cursor-no-drop
-          hover:text-opacity-40 hover:border-opacity-40
-          focus:text-opacity-40 focus:border-opacity-40 focus:ring-0
-          active:text-opacity-40 active:border-opacity-40 active:ring-0
-        `,
-      },
-      {
-        disabled: true,
-        variant: "thirdary",
-        class: `
-          bg-opacity-5 text-opacity-40 ring-opacity-0 cursor-no-drop
-          hover:bg-opacity-5 hover:text-opacity-40
-          focus:ring-0 focus:bg-opacity-5 focus:text-opacity-40
-          active:bg-opacity-5 active:ring-0 active:text-opacity-40
-        `,
-      },
       {
         color: "grayscale",
         variant: "primary",
         class: `
-          border-gray-900 bg-gray-900
-          hover:border-gray-900 hover:bg-gray-900
-          focus:border-gray-900  focus:ring-gray-900/20
-          active:border-gray-900 active:bg-gray-900`,
+          bg-gray-900 border-gray-900
+          hover:bg-gray-800 hover:border-gray-800
+          focus:bg-gray-800 focus:border-gray-800
+          active:bg-gray-700 active:border-gray-700
+          disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
+        `,
       },
       {
         color: "grayscale",
         variant: "secondary",
         class: `
           text-gray-900 border-gray-900
-          hover:border-gray-900 hover:text-gray-900
-          focus:border-gray-900 focus:text-gray-900 focus:ring-gray-900/20
-          active:border-gray-900 active:text-gray-900`,
+          hover:text-gray-800 hover:border-gray-800
+          focus:text-gray-800 focus:border-gray-800
+          active:text-gray-700 active:border-gray-700
+          disabled:border-gray-400
+        `,
       },
       {
         color: "grayscale",
         variant: "thirdary",
         class: `
           text-gray-900
-          focus:text-gray-800 focus:bg-gray-800 focus:ring-gray-800
-          hover:text-gray-800 hover:bg-gray-800
-          active:text-gray-800 active:bg-gray-800`,
+          hover:text-gray-800 hover:bg-gray-800 hover:bg-opacity-10
+          focus:text-gray-800 focus:bg-gray-800 focus:bg-opacity-10
+          active:text-gray-700 active:bg-gray-700 active:bg-opacity-15
+        `,
       },
       {
         color: "white",
         variant: "primary",
         class: `
-          border-white bg-white text-gray-500
-          focus:ring-white focus:border-white focus:bg-white
-          hover:border-white hover:bg-white
-          active:border-white active:bg-white`,
+          text-gray-900 border-white bg-white
+          hover:text-gray-800 hover:border-gray-50 hover:bg-gray-50
+          focus:text-gray-800 focus:border-gray-50 focus:bg-gray-50
+          active:text-gray-700 active:border-gray-100 active:bg-gray-100
+        `,
       },
       {
         color: "white",
         variant: "secondary",
         class: `
-          border-white bg-transparent text-white
-          focus:border-white focus:ring-white
-          hover:border-white
-          active:border-white`,
+          text-gray-900 border-white
+          hover:text-gray-800 hover:border-gray-50
+          focus:text-gray-800 focus:border-gray-50
+          active:text-gray-700 active:border-gray-100
+        `,
       },
       {
         color: "white",
         variant: "thirdary",
         class: `
-          border-transparent bg-transparent text-white
-          focus:bg-white focus:ring-white
-          hover:bg-white
-          active:bg-white`,
+          text-gray-900
+          hover:text-gray-800 hover:bg-white hover:bg-opacity-10
+          focus:text-gray-800 focus:bg-white focus:bg-opacity-10
+          active:text-gray-700 active:bg-white active:bg-opacity-15
+        `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-500 bg-opacity-5" },
-      { filled: true, variant: "thirdary", color: "white", class: "bg-white" },
-      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-600 bg-opacity-10" },
+      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-800 bg-opacity-10" },
+      { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { square: true, size: "xs", class: "p-1" },
       { square: true, size: "sm", class: "p-2" },
       { square: true, size: "md", class: "p-3" },
-      { square: true, size: "lg", class: "py-4" },
+      { square: true, size: "lg", class: "p-4" },
     ],
   },
-  text: "whitespace-nowrap px-1.5",
+  text: "whitespace-nowrap",
   defaultVariants: {
     color: "brand",
     variant: "primary",
@@ -158,9 +141,19 @@ export default /*tw*/ {
     disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `border-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-    { pattern: `text-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
-    { pattern: `bg-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
+    { pattern: `border-(${colors})-600` },
+    { pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `border-(${colors})-300`, variants: ["disabled"] },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+    { pattern: `bg-(${colors})-300`, variants: ["disabled"] },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `text-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-300`, variants: ["disabled"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
+    { pattern: `ring-(${colors})-800`, variants: ["active"] },
   ],
 };

package/web-types.json CHANGED Viewed

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