vueless 0.0.137 → 0.0.138

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
  1. package/package.json +1 -1
  2. package/ui.button/configs/default.config.js +33 -28
  3. package/ui.button/index.vue +1 -1
  4. package/web-types.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vueless",
3
- "version": "0.0.137",
3
+ "version": "0.0.138",
4
4
  "license": "MIT",
5
5
  "description": "Vue Styleless Component Framework.",
6
6
  "homepage": "https://vueless.com",
package/ui.button/configs/default.config.js CHANGED
@@ -5,39 +5,40 @@ export default /*tw*/ {
5
5
  text-base font-medium outline-none
6
6
  border border-solid rounded-lg
7
7
  transition duration-100 ease-in-out
8
- focus:ring-opacity-20 focus:ring-4 focus:outline-none
9
- active:ring-opacity-20
8
+ focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700 focus:outline-none
10
9
  disabled:ring-0 disabled:cursor-no-drop
11
10
  `,
12
11
  variants: {
13
12
  size: {
14
- xs: "px-2 py-1.5 text-xs leading-tight gap-0.5",
15
- sm: "px-3 py-2.5 text-sm leading-tight gap-1",
16
- md: "px-4 py-3.5 text-base leading-tight gap-1.5",
17
- lg: "px-5 py-[1.125rem] text-lg leading-tight gap-2",
13
+ "2xs": "px-3 py-1 text-2xs leading-tight gap-1",
14
+ xs: "px-4 py-1.5 text-xs leading-tight gap-1.5",
15
+ sm: "px-5 py-2.5 text-sm leading-tight gap-1.5",
16
+ md: "px-6 py-3.5 text-base leading-tight gap-2",
17
+ lg: "px-7 py-4 text-lg leading-tight gap-2.5",
18
+ xl: "px-8 py-5 text-xl leading-tight gap-2.5",
18
19
  },
19
20
  variant: {
20
21
  primary: `
21
22
  text-white
22
23
  bg-{color}-600 border-{color}-600
23
24
  hover:bg-{color}-700 hover:border-{color}-700
24
- focus:bg-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
25
- active:bg-{color}-800 active:border-{color}-800 active:ring-{color}-800
25
+ focus:bg-{color}-700 focus:border-{color}-700
26
+ active:bg-{color}-800 active:border-{color}-800
26
27
  disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
27
28
  `,
28
29
  secondary: `
29
30
  text-{color}-600 border-{color}-600
30
31
  hover:text-{color}-700 hover:border-{color}-700
31
- focus:text-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
32
- active:text-{color}-800 active:border-{color}-800 active:ring-{color}-800
32
+ focus:text-{color}-700 focus:border-{color}-700
33
+ active:text-{color}-800 active:border-{color}-800
33
34
  disabled:text-{color}-300 disabled:border-{color}-300
34
35
  `,
35
36
  thirdary: `
36
37
  border-transparent
37
38
  text-{color}-600
38
39
  hover:text-{color}-700 hover:bg-{color}-700 hover:bg-opacity-10
39
- focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10 focus:ring-{color}-700
40
- active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15 active:ring-{color}-800
40
+ focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10
41
+ active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15
41
42
  disabled:text-{color}-300
42
43
  `,
43
44
  },
@@ -51,8 +52,8 @@ export default /*tw*/ {
51
52
  true: "w-full",
52
53
  },
53
54
  color: {
54
- grayscale: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
55
- white: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
55
+ grayscale: "focus:ring-gray-800 disabled:text-gray-400",
56
+ white: "focus:ring-gray-800 disabled:text-gray-400",
56
57
  },
57
58
  },
58
59
  compoundVariants: [
@@ -83,9 +84,10 @@ export default /*tw*/ {
83
84
  variant: "thirdary",
84
85
  class: `
85
86
  text-gray-900
86
- hover:text-gray-800 hover:bg-gray-800 hover:bg-opacity-10
87
- focus:text-gray-800 focus:bg-gray-800 focus:bg-opacity-10
88
- active:text-gray-700 active:bg-gray-700 active:bg-opacity-15
87
+ hover:text-gray-800 hover:bg-gray-800
88
+ focus:text-gray-800 focus:bg-gray-800
89
+ active:text-gray-700 active:bg-gray-700
90
+ disabled:bg-transparent
89
91
  `,
90
92
  },
91
93
  {
@@ -102,10 +104,10 @@ export default /*tw*/ {
102
104
  color: "white",
103
105
  variant: "secondary",
104
106
  class: `
105
- text-gray-900 border-white
106
- hover:text-gray-800 hover:border-gray-50
107
- focus:text-gray-800 focus:border-gray-50
108
- active:text-gray-700 active:border-gray-100
107
+ text-gray-900 border-gray-200
108
+ hover:text-gray-800 hover:border-gray-300
109
+ focus:text-gray-800 focus:border-gray-300
110
+ active:text-gray-700 active:border-gray-400
109
111
  `,
110
112
  },
111
113
  {
@@ -113,26 +115,29 @@ export default /*tw*/ {
113
115
  variant: "thirdary",
114
116
  class: `
115
117
  text-gray-900
116
- hover:text-gray-800 hover:bg-white hover:bg-opacity-10
117
- focus:text-gray-800 focus:bg-white focus:bg-opacity-10
118
- active:text-gray-700 active:bg-white active:bg-opacity-15
118
+ hover:text-gray-800 hover:bg-white
119
+ focus:text-gray-800 focus:bg-white
120
+ active:text-gray-700 active:bg-white
121
+ disabled:bg-transparent
119
122
  `,
120
123
  },
121
- { filled: true, variant: "thirdary", class: "bg-{color}-600 bg-opacity-10" },
124
+ { filled: true, variant: "thirdary", class: "bg-{color}-700 bg-opacity-10" },
122
125
  { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-800 bg-opacity-10" },
123
126
  { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
124
127
  { square: true, size: "xs", class: "p-1" },
125
- { square: true, size: "sm", class: "p-2" },
126
- { square: true, size: "md", class: "p-3" },
128
+ { square: true, size: "xs", class: "p-1.5" },
129
+ { square: true, size: "sm", class: "p-2.5" },
130
+ { square: true, size: "md", class: "p-3.5" },
127
131
  { square: true, size: "lg", class: "p-4" },
132
+ { square: true, size: "lg", class: "p-5" },
128
133
  ],
129
134
  },
130
135
  text: "whitespace-nowrap",
131
136
  defaultVariants: {
132
137
  color: "brand",
133
138
  variant: "primary",
134
- size: "md",
135
139
  tag: "button",
140
+ size: "md",
136
141
  pill: false,
137
142
  block: false,
138
143
  square: false,
package/ui.button/index.vue CHANGED
@@ -65,7 +65,7 @@ const props = defineProps({
65
65
 
66
66
  /**
67
67
  * Button size.
68
- * @values xs, sm, md, lg
68
+ * @values 2xs, xs, sm, md, lg, xl
69
69
  */
70
70
  size: {
71
71
  type: String,
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "framework": "vue",
3
3
  "name": "vueless",
4
- "version": "0.0.137",
4
+ "version": "0.0.138",
5
5
  "contributions": {
6
6
  "html": {
7
7
  "description-markup": "markdown",
@@ -576,7 +576,7 @@
576
576
  "description": "Button size.",
577
577
  "value": {
578
578
  "kind": "expression",
579
- "type": "'xs' | 'sm' | 'md' | 'lg'"
579
+ "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
580
580
  },
581
581
  "default": "md"
582
582
  },