vueless 0.0.825-beta.13 → 0.0.825-beta.15

package/package.json

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

package/tailwind.css

@@ -87,10 +87,27 @@
     --color-grayscale-lifted: var(--vl-grayscale-lifted);
     --color-grayscale-accented: var(--vl-grayscale-accented);
 
-    /* Border radius rounding values */
-    --radius-small: var(--vl-rounding-sm);
-    --radius-medium: var(--vl-rounding-md);
-    --radius-large: var(--vl-rounding-lg);
+    /* Border colors */
+    --border-color-default: var(--vl-border);
+    --border-color-lifted: var(--vl-border-lifted);
+    --border-color-accented: var(--vl-border-accented);
+    --border-color-muted: var(--vl-border-muted);
+
+    /* Background colors
+    TODO: find how to declare like below
+    --bg-color-default: var(--vl-bg);
+    --bg-color-lifted: var(--vl-bg-lifted);
+    --bg-color-accented: var(--vl-bg-accented);
+    --bg-color-muted: var(--vl-bg-muted);
+    --bg-color-inverted: var(--vl-bg-inverted);
+    */
+
+    /* Text colors */
+    --text-color-default: var(--vl-text);
+    --text-color-lifted: var(--vl-text-lifted);
+    --text-color-accented: var(--vl-text-accented);
+    --text-color-muted: var(--vl-text-muted);
+    --text-color-inverted: var(--vl-text-inverted);
 
     /* Text size */
     --text-tiny: var(--vl-text-xs);
@@ -102,6 +119,11 @@
     --text-large: var(--vl-text-lg);
     --text-large--line-height: calc(1 / var(--vl-text-lg));
 
+    /* Border radius rounding values */
+    --radius-small: var(--vl-rounding-sm);
+    --radius-medium: var(--vl-rounding-md);
+    --radius-large: var(--vl-rounding-lg);
+
     /* Mobile safe area spaceing. */
     --spacing-safe-top: "env(safe-area-inset-top)";
     --spacing-safe-bottom: "env(safe-area-inset-bottom)";
@@ -109,47 +131,7 @@
     --spacing-safe-right: "env(safe-area-inset-right)";
 }
 
-/* ------ Text color utilities ------ */
-
-@utility text-default {
-    color: var(--vl-text);
-}
-
-@utility text-lifted {
-    color: var(--vl-text-lifted);
-}
-
-@utility text-accented {
-    color: var(--vl-text-accented);
-}
-
-@utility text-muted {
-    color: var(--vl-text-muted);
-}
-
-@utility text-inverted {
-    color: var(--vl-text-inverted);
-}
-
-/* ------ Border color utilities ------  */
-
-@utility border-default {
-    border-color: var(--vl-border);
-}
-
-@utility border-lifted {
-    border-color: var(--vl-border-lifted);
-}
-
-@utility border-accented {
-    border-color: var(--vl-border-accented);
-}
-
-@utility border-muted {
-    border-color: var(--vl-border-muted);
-}
-
-/* ------ Background color utilities ------ */
+/* Background color utilities */
 
 @utility bg-default {
     background-color: var(--vl-bg);
@@ -167,10 +149,6 @@
     background-color: var(--vl-bg-muted);
 }
 
-@utility bg-inverted {
-    background-color: var(--vl-bg-inverted);
-}
-
 /* ------ Outline width utilities ------ */
 
 @utility outline-small {

package/ui.button/types.ts

@@ -64,7 +64,7 @@ export interface Props {
   disabled?: boolean;
 
   /**
-   * Make the Button fill the width with its container.
+   * Make the Button expand to fill the entire width of its container.
    */
   block?: boolean;
 

package/ui.button-link/config.ts

@@ -1,11 +1,12 @@
 export default /*tw*/ {
   link: {
     base: `
-      inline-block cursor-pointer !leading-none rounded-small transition
+      inline-block cursor-pointer !leading-none transition
       text-{color} decoration-{color} underline-offset-4
       hover:text-{color}-lifted hover:decoration-{color}-lifted
       active:text-{color}-accented active:decoration-{color}-accented
-      focus-visible:outline-medium focus-visible:outline-offset-4 focus-visible:outline-{color}
+      focus-visible:outline-medium focus-visible:rounded-small
+      focus-visible:outline-offset-4 focus-visible:outline-{color}
     `,
     variants: {
       size: {

package/ui.button-link/types.ts

@@ -12,7 +12,7 @@ export interface ULinkSlotProps {
 
 export interface Props {
   /**
-   * Button label.
+   * Link label.
    */
   label?: string;
 
@@ -91,7 +91,7 @@ export interface Props {
   disabled?: boolean;
 
   /**
-   * Make the Button fill the width with its container.
+   * Make the Link expand to fill the entire width of its container.
    */
   block?: boolean;
 

package/ui.button-toggle/types.ts

@@ -52,7 +52,7 @@ export interface Props {
   disabled?: boolean;
 
   /**
-   * Make the toggle fill the width with its container.
+   * Make the Toggle expand to fill the entire width of its container.
    */
   block?: boolean;
 

package/ui.container-row/config.ts

@@ -1,16 +1,16 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex w-full",
+    base: "flex",
     variants: {
       reverse: {
-        false: "flex-col md:flex-row",
-        true: "flex-col-reverse md:flex-row-reverse",
+        false: "flex-row",
+        true: "flex-row-reverse",
       },
       wrap: {
         true: "flex-wrap",
       },
-      noMobile: {
-        true: "flex-row",
+      block: {
+        true: "w-full",
       },
       gap: {
         none: "gap-0",
@@ -56,7 +56,7 @@ export default /*tw*/ {
     content: "start",
     justify: "start",
     wrap: false,
+    block: false,
     reverse: false,
-    noMobile: false,
   },
 };

package/ui.container-row/storybook/stories.ts

@@ -128,22 +128,6 @@ Justify.parameters = {
   },
 };
 
-export const NoMobile = DefaultTemplate.bind({});
-NoMobile.args = {
-  noMobile: true,
-  slotTemplate: `
-    <UInput label="First Name" />
-    <UInput label="Last Name" />
-  `,
-};
-NoMobile.parameters = {
-  docs: {
-    description: {
-      story: "Disables mobile adaptivity.",
-    },
-  },
-};
-
 export const SlotDefault = DefaultTemplate.bind({});
 SlotDefault.args = {
   slotTemplate: `

package/ui.container-row/types.ts

@@ -45,9 +45,9 @@ export interface Props {
   wrap?: boolean;
 
   /**
-   * Disables mobile adaptivity.
+   * Make the Row expand to fill the entire width of its container.
    */
-  noMobile?: boolean;
+  block?: boolean;
 
   /**
    * Component config object.

package/ui.loader-overlay/config.ts

@@ -9,7 +9,6 @@ export default /*tw*/ {
     `,
   },
   overlayTransition: {
-    enterFromClass: "scale-110 transform",
     leaveActiveClass: "scale-110 transform",
   },
   nestedLoader: "{ULoader}",

package/ui.navigation-tabs/types.ts

@@ -36,7 +36,7 @@ export interface Props {
   scrollable?: boolean;
 
   /**
-   * Make the Tabs fill the width with its container.
+   * Make the Tabs expand to fill the entire width of its container.
    */
   block?: boolean;
 

package/ui.text-block/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
       font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
-      [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-bold
+      [&_a:not([class]):hover]:no-underline [&_a:not([class])]:font-medium
       [&_ul]:font-normal [&_ol]:font-normal
       [&_ul]:leading-normal [&_ol]:leading-normal
       [&_ul]:list-disc [&_ol]:list-decimal