@1001-digital/layers.base 0.0.13 → 0.0.15
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.
|
@@ -137,6 +137,7 @@
|
|
|
137
137
|
<h4>Variants</h4>
|
|
138
138
|
<div class="demo-row">
|
|
139
139
|
<Button class="primary">Primary</Button>
|
|
140
|
+
<Button class="tertiary">Tertiary</Button>
|
|
140
141
|
<Button class="small">Small</Button>
|
|
141
142
|
<Button class="link">Link</Button>
|
|
142
143
|
<Button class="inline">Inline</Button>
|
|
@@ -155,6 +156,10 @@
|
|
|
155
156
|
<Icon type="check" />
|
|
156
157
|
<span>Confirm</span>
|
|
157
158
|
</Button>
|
|
159
|
+
<Button class="tertiary">
|
|
160
|
+
<Icon type="add" />
|
|
161
|
+
<span>New</span>
|
|
162
|
+
</Button>
|
|
158
163
|
<Button>
|
|
159
164
|
<Icon type="edit" />
|
|
160
165
|
</Button>
|
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ Running `pnpm dev` will prepare and boot `.playground` directory, which imports
|
|
|
14
14
|
|
|
15
15
|
## Icons
|
|
16
16
|
|
|
17
|
-
The base `Icon` component relies on Nuxt Icon aliases.
|
|
17
|
+
The base `Icon` component relies on Nuxt Icon aliases. Defaults are limited to icons used outside `.playground`. Extend or override aliases via `nuxt.config`:
|
|
18
18
|
|
|
19
19
|
```ts
|
|
20
20
|
export default defineNuxtConfig({
|
|
@@ -38,6 +38,14 @@ withDefaults(defineProps<{
|
|
|
38
38
|
--button-primary-background-highlight: var(--gray-z-8);
|
|
39
39
|
--button-primary-border-color-highlight: var(--gray-z-6);
|
|
40
40
|
--button-primary-color-highlight: var(--gray-z-0);
|
|
41
|
+
|
|
42
|
+
/* Tertiary Button Styles */
|
|
43
|
+
--button-tertiary-background: transparent;
|
|
44
|
+
--button-tertiary-border-color: var(--gray-z-3);
|
|
45
|
+
--button-tertiary-color: var(--muted);
|
|
46
|
+
--button-tertiary-background-highlight: var(--gray-z-1);
|
|
47
|
+
--button-tertiary-border-color-highlight: var(--gray-z-4);
|
|
48
|
+
--button-tertiary-color-highlight: var(--color);
|
|
41
49
|
}
|
|
42
50
|
}
|
|
43
51
|
</style>
|
|
@@ -190,6 +198,27 @@ withDefaults(defineProps<{
|
|
|
190
198
|
}
|
|
191
199
|
}
|
|
192
200
|
|
|
201
|
+
/* Tertiary variant */
|
|
202
|
+
&.tertiary {
|
|
203
|
+
background: var(--button-tertiary-background);
|
|
204
|
+
box-shadow: 0 0 0 var(--border-width) var(--button-tertiary-border-color);
|
|
205
|
+
color: var(--button-tertiary-color);
|
|
206
|
+
|
|
207
|
+
>.icon {
|
|
208
|
+
color: var(--button-tertiary-color);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&:is(:hover, :active, :focus, .active) {
|
|
212
|
+
background: var(--button-tertiary-background-highlight);
|
|
213
|
+
box-shadow: 0 0 0 var(--border-width) var(--button-tertiary-border-color-highlight);
|
|
214
|
+
color: var(--button-tertiary-color-highlight);
|
|
215
|
+
|
|
216
|
+
>.icon {
|
|
217
|
+
color: var(--button-tertiary-color-highlight);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
193
222
|
&:is(:hover, :active, :focus, .active) {
|
|
194
223
|
background: var(--button-background-highlight);
|
|
195
224
|
box-shadow: var(--border-shadow-highlight);
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
display: flex;
|
|
28
28
|
align-items: center;
|
|
29
29
|
background: var(--background);
|
|
30
|
+
transition: background-color var(--speed), border-color var(--speed);
|
|
30
31
|
inline-size: 100%;
|
|
31
32
|
max-inline-size: -webkit-fill-available;
|
|
32
33
|
|
|
@@ -40,12 +41,20 @@
|
|
|
40
41
|
&:has(input:focus) {
|
|
41
42
|
background: var(--button-background-highlight);
|
|
42
43
|
border-color: var(--button-border-color-highlight);
|
|
44
|
+
|
|
45
|
+
.prefix,
|
|
46
|
+
.suffix {
|
|
47
|
+
background: var(--button-background-highlight);
|
|
48
|
+
border-color: var(--button-border-color-highlight);
|
|
49
|
+
}
|
|
43
50
|
}
|
|
44
51
|
|
|
45
52
|
.prefix,
|
|
46
53
|
.suffix {
|
|
47
54
|
padding: 0 var(--ui-padding-inline);
|
|
48
55
|
color: var(--muted);
|
|
56
|
+
background: var(--button-background);
|
|
57
|
+
transition: background-color var(--speed), border-color var(--speed), color var(--speed);
|
|
49
58
|
block-size: 100%;
|
|
50
59
|
display: flex;
|
|
51
60
|
align-items: center;
|
|
@@ -53,11 +62,11 @@
|
|
|
53
62
|
}
|
|
54
63
|
|
|
55
64
|
.prefix {
|
|
56
|
-
border-inline-end: var(--
|
|
65
|
+
border-inline-end: var(--border);
|
|
57
66
|
}
|
|
58
67
|
|
|
59
68
|
.suffix {
|
|
60
|
-
border-inline-start: var(--
|
|
69
|
+
border-inline-start: var(--border);
|
|
61
70
|
}
|
|
62
71
|
}
|
|
63
72
|
}
|
package/package.json
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@1001-digital/layers.base",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.15",
|
|
5
5
|
"main": "./nuxt.config.ts",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@iconify-json/lucide": "^1.2.87",
|
|
8
|
-
"@iconify-json/simple-icons": "^1.2.69",
|
|
9
7
|
"@nuxt/eslint": "latest",
|
|
10
8
|
"@types/node": "^24.10.1",
|
|
11
9
|
"eslint": "^9.39.1",
|
|
12
|
-
"nuxt": "^4.
|
|
10
|
+
"nuxt": "^4.3.0",
|
|
13
11
|
"typescript": "^5.9.3",
|
|
14
12
|
"vue": "latest"
|
|
15
13
|
},
|
|
16
14
|
"dependencies": {
|
|
15
|
+
"@iconify-json/lucide": "^1.2.87",
|
|
16
|
+
"@iconify-json/simple-icons": "^1.2.69",
|
|
17
17
|
"@nuxt/icon": "^2.2.1",
|
|
18
18
|
"@types/luxon": "^3.6.2",
|
|
19
19
|
"luxon": "^3.6.1",
|
|
20
20
|
"modern-normalize": "^3.0.1",
|
|
21
|
-
"reka-ui": "^2.
|
|
21
|
+
"reka-ui": "^2.8.0"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"dev": "nuxi dev .playground",
|