@1001-digital/layers.base 0.0.1 → 0.0.2
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.
- package/.playground/pages/index.vue +4 -4
- package/app/assets/styles/base/forms.css +2 -2
- package/app/assets/styles/utilities/utilities.css +1 -1
- package/app/assets/styles/variables/fonts.css +1 -2
- package/app/assets/styles/variables/index.css +0 -1
- package/app/assets/styles/variables/ui.css +1 -1
- package/app/components/Actions.vue +1 -1
- package/app/components/Alert.vue +17 -1
- package/app/components/Button.vue +21 -0
- package/app/components/Card.vue +10 -0
- package/app/components/Dialog.client.vue +9 -1
- package/app/components/Form/FormItem.vue +7 -0
- package/app/components/Form/FormLabel.vue +1 -1
- package/app/components/Form/FormSelect.vue +4 -8
- package/app/components/Tag.vue +1 -1
- package/package.json +1 -1
- package/app/assets/styles/variables/components/alerts.css +0 -13
- package/app/assets/styles/variables/components/buttons.css +0 -18
- package/app/assets/styles/variables/components/cards.css +0 -7
- package/app/assets/styles/variables/components/dialogs.css +0 -7
- package/app/assets/styles/variables/components/forms.css +0 -5
- package/app/assets/styles/variables/components/images.css +0 -5
- package/app/assets/styles/variables/components/index.css +0 -6
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
<h4>UI Typography</h4>
|
|
75
75
|
<div class="type-sample">
|
|
76
76
|
<span class="ui-text">UI Font Style (Monospace, Uppercase)</span>
|
|
77
|
-
<code>--
|
|
77
|
+
<code>--font-family</code>
|
|
78
78
|
</div>
|
|
79
79
|
</div>
|
|
80
80
|
</article>
|
|
@@ -448,7 +448,7 @@ const fruitOptions = [
|
|
|
448
448
|
}
|
|
449
449
|
|
|
450
450
|
.library-nav a {
|
|
451
|
-
font-family: var(--
|
|
451
|
+
font-family: var(--font-family);
|
|
452
452
|
font-size: var(--ui-font-size);
|
|
453
453
|
text-transform: var(--ui-text-transform);
|
|
454
454
|
color: var(--muted);
|
|
@@ -476,7 +476,7 @@ article {
|
|
|
476
476
|
}
|
|
477
477
|
|
|
478
478
|
article>h3 {
|
|
479
|
-
font-family: var(--
|
|
479
|
+
font-family: var(--font-family);
|
|
480
480
|
font-size: var(--ui-font-size);
|
|
481
481
|
text-transform: var(--ui-text-transform);
|
|
482
482
|
color: var(--muted);
|
|
@@ -536,7 +536,7 @@ article>h3 {
|
|
|
536
536
|
}
|
|
537
537
|
|
|
538
538
|
.ui-text {
|
|
539
|
-
font-family: var(--
|
|
539
|
+
font-family: var(--font-family);
|
|
540
540
|
font-size: var(--ui-font-size);
|
|
541
541
|
text-transform: var(--ui-text-transform);
|
|
542
542
|
}
|
|
@@ -9,7 +9,7 @@ input:not(.unstyled),
|
|
|
9
9
|
textarea:not(.unstyled),
|
|
10
10
|
select:not(.unstyled) {
|
|
11
11
|
/* UI font styles */
|
|
12
|
-
font-family: var(--
|
|
12
|
+
font-family: var(--font-family);
|
|
13
13
|
font-size: var(--ui-font-size);
|
|
14
14
|
font-weight: var(--ui-font-weight);
|
|
15
15
|
text-transform: var(--ui-text-transform);
|
|
@@ -94,7 +94,7 @@ form {
|
|
|
94
94
|
form label,
|
|
95
95
|
label.form-label {
|
|
96
96
|
/* UI font styles */
|
|
97
|
-
font-family: var(--
|
|
97
|
+
font-family: var(--font-family);
|
|
98
98
|
font-size: var(--ui-font-size);
|
|
99
99
|
font-weight: var(--ui-font-weight);
|
|
100
100
|
text-transform: var(--ui-text-transform);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* UI typography */
|
|
3
|
-
--ui-font-family: sans-serif;
|
|
4
3
|
--ui-font-size: 13px;
|
|
5
4
|
--ui-font-weight: 400;
|
|
6
5
|
--ui-text-transform: uppercase;
|
|
7
6
|
--ui-letter-spacing: var(--letter-spacing);
|
|
8
7
|
--ui-line-height: var(--line-height);
|
|
8
|
+
--input-text-transform: none;
|
|
9
9
|
|
|
10
10
|
/* UI colors */
|
|
11
11
|
--ui-color: var(--primary);
|
package/app/components/Alert.vue
CHANGED
|
@@ -27,6 +27,22 @@ const dismiss = () => {
|
|
|
27
27
|
}
|
|
28
28
|
</script>
|
|
29
29
|
|
|
30
|
+
<style>
|
|
31
|
+
:root {
|
|
32
|
+
--alert-color: var(--color);
|
|
33
|
+
--alert-background-color: transparent;
|
|
34
|
+
--alert-border-color: var(--border-color);
|
|
35
|
+
|
|
36
|
+
--alert-info-color: var(--alert-color);
|
|
37
|
+
--alert-info-background-color: var(--alert-background-color);
|
|
38
|
+
--alert-info-border-color: var(--alert-border-color);
|
|
39
|
+
|
|
40
|
+
--alert-error-color: var(--error);
|
|
41
|
+
--alert-error-background-color: color-mix(in srgb, var(--error) 10%, transparent);
|
|
42
|
+
--alert-error-border-color: var(--error);
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
|
|
30
46
|
<style scoped>
|
|
31
47
|
.alert {
|
|
32
48
|
position: relative;
|
|
@@ -37,7 +53,7 @@ const dismiss = () => {
|
|
|
37
53
|
border-color: var(--alert-border-color);
|
|
38
54
|
background-color: var(--alert-background-color);
|
|
39
55
|
color: var(--alert-color);
|
|
40
|
-
font-family: var(--
|
|
56
|
+
font-family: var(--font-family);
|
|
41
57
|
font-size: var(--ui-font-size);
|
|
42
58
|
text-transform: var(--ui-text-transform);
|
|
43
59
|
|
|
@@ -19,6 +19,27 @@ withDefaults(defineProps<{
|
|
|
19
19
|
})
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
|
+
<style>
|
|
23
|
+
:root {
|
|
24
|
+
--button-border-radius: var(--border-radius);
|
|
25
|
+
--button-background: var(--background);
|
|
26
|
+
--button-background-highlight: var(--gray-z-1);
|
|
27
|
+
--button-border-color-highlight: var(--gray-z-3);
|
|
28
|
+
--button-color: var(--color);
|
|
29
|
+
--button-color-highlight: var(--color);
|
|
30
|
+
--button-icon-color: var(--muted);
|
|
31
|
+
--button-icon-color-highlight: var(--color);
|
|
32
|
+
|
|
33
|
+
/* Primary Button Styles */
|
|
34
|
+
--button-primary-background: var(--gray-z-10);
|
|
35
|
+
--button-primary-border-color: var(--gray-z-8);
|
|
36
|
+
--button-primary-color: var(--gray-z-0);
|
|
37
|
+
--button-primary-background-highlight: var(--gray-z-8);
|
|
38
|
+
--button-primary-border-color-highlight: var(--gray-z-6);
|
|
39
|
+
--button-primary-color-highlight: var(--gray-z-0);
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
|
|
22
43
|
<style scoped>
|
|
23
44
|
button,
|
|
24
45
|
a.button {
|
package/app/components/Card.vue
CHANGED
|
@@ -4,6 +4,16 @@
|
|
|
4
4
|
</article>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--card-border-radius: var(--border-radius);
|
|
10
|
+
--card-border: var(--border);
|
|
11
|
+
--card-background: var(--background);
|
|
12
|
+
--card-background-highlight: var(--gray-z-1);
|
|
13
|
+
--card-border-color-highlight: var(--gray-z-3);
|
|
14
|
+
}
|
|
15
|
+
</style>
|
|
16
|
+
|
|
7
17
|
<style scoped>
|
|
8
18
|
.card {
|
|
9
19
|
display: grid;
|
|
@@ -86,6 +86,14 @@ watchEffect(() => (open.value ? show() : hide()))
|
|
|
86
86
|
</script>
|
|
87
87
|
|
|
88
88
|
<style>
|
|
89
|
+
:root {
|
|
90
|
+
--dialog-initial-x-offset: 0;
|
|
91
|
+
--dialog-initial-y-offset: var(--spacer);
|
|
92
|
+
--dialog-x-offset: 0;
|
|
93
|
+
--dialog-y-offset: 0;
|
|
94
|
+
--backdrop-background-color: transparent;
|
|
95
|
+
}
|
|
96
|
+
|
|
89
97
|
.dialog {
|
|
90
98
|
padding: var(--spacer);
|
|
91
99
|
padding-block-start: calc(var(--spacer) * 3);
|
|
@@ -194,7 +202,7 @@ watchEffect(() => (open.value ? show() : hide()))
|
|
|
194
202
|
display: flex;
|
|
195
203
|
align-items: center;
|
|
196
204
|
margin: 0;
|
|
197
|
-
font-family: var(--
|
|
205
|
+
font-family: var(--font-family);
|
|
198
206
|
font-size: var(--ui-font-size);
|
|
199
207
|
text-transform: var(--ui-text-transform);
|
|
200
208
|
background: var(--background);
|
|
@@ -10,6 +10,13 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
|
+
<style>
|
|
14
|
+
:root {
|
|
15
|
+
--form-item-height: calc(var(--size-4) + var(--ui-padding-block) * 2);
|
|
16
|
+
--form-item-height-sm: calc(var(--size-4) + var(--ui-padding-block));
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
|
|
13
20
|
<style scoped>
|
|
14
21
|
.form-item {
|
|
15
22
|
border: var(--border);
|
|
@@ -10,12 +10,8 @@
|
|
|
10
10
|
<SelectPortal>
|
|
11
11
|
<SelectContent position="popper" :side-offset="4" class="form-select-content">
|
|
12
12
|
<SelectViewport class="form-select-viewport">
|
|
13
|
-
<SelectItem
|
|
14
|
-
|
|
15
|
-
:key="option[valueKey]"
|
|
16
|
-
:value="option[valueKey]"
|
|
17
|
-
class="form-select-item"
|
|
18
|
-
>
|
|
13
|
+
<SelectItem v-for="option in options" :key="option[valueKey]" :value="option[valueKey]"
|
|
14
|
+
class="form-select-item">
|
|
19
15
|
<SelectItemText>{{ option[labelKey] }}</SelectItemText>
|
|
20
16
|
<SelectItemIndicator class="form-select-indicator">
|
|
21
17
|
<Icon type="check" />
|
|
@@ -80,7 +76,7 @@ defineProps({
|
|
|
80
76
|
border: none;
|
|
81
77
|
background: transparent;
|
|
82
78
|
padding: var(--ui-padding-block) var(--ui-padding-inline);
|
|
83
|
-
font-family: var(--
|
|
79
|
+
font-family: var(--font-family);
|
|
84
80
|
font-size: var(--ui-font-size);
|
|
85
81
|
color: var(--color);
|
|
86
82
|
inline-size: 100%;
|
|
@@ -104,7 +100,7 @@ defineProps({
|
|
|
104
100
|
color: var(--muted);
|
|
105
101
|
transition: transform var(--speed);
|
|
106
102
|
|
|
107
|
-
[data-state='open']
|
|
103
|
+
[data-state='open']>& {
|
|
108
104
|
transform: rotate(180deg);
|
|
109
105
|
}
|
|
110
106
|
}
|
package/app/components/Tag.vue
CHANGED
|
@@ -22,7 +22,7 @@ const emit = defineEmits<{
|
|
|
22
22
|
<style scoped>
|
|
23
23
|
.tag {
|
|
24
24
|
box-shadow: var(--border-shadow);
|
|
25
|
-
font-family: var(--
|
|
25
|
+
font-family: var(--font-family);
|
|
26
26
|
font-size: var(--font-sm);
|
|
27
27
|
font-weight: var(--ui-font-weight);
|
|
28
28
|
text-transform: var(--ui-text-transform);
|
package/package.json
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--alert-color: var(--color);
|
|
3
|
-
--alert-background-color: transparent;
|
|
4
|
-
--alert-border-color: var(--border-color);
|
|
5
|
-
|
|
6
|
-
--alert-info-color: var(--alert-color);
|
|
7
|
-
--alert-info-background-color: var(--alert-background-color);
|
|
8
|
-
--alert-info-border-color: var(--alert-border-color);
|
|
9
|
-
|
|
10
|
-
--alert-error-color: var(--error);
|
|
11
|
-
--alert-error-background-color: color-mix(in srgb, var(--error) 10%, transparent);
|
|
12
|
-
--alert-error-border-color: var(--error);
|
|
13
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--button-border-radius: var(--border-radius);
|
|
3
|
-
--button-background: var(--background);
|
|
4
|
-
--button-background-highlight: var(--gray-z-1);
|
|
5
|
-
--button-border-color-highlight: var(--gray-z-3);
|
|
6
|
-
--button-color: var(--ui-color);
|
|
7
|
-
--button-color-highlight: var(--color);
|
|
8
|
-
--button-icon-color: var(--muted);
|
|
9
|
-
--button-icon-color-highlight: var(--color);
|
|
10
|
-
|
|
11
|
-
/* Primary Button Styles */
|
|
12
|
-
--button-primary-background: var(--gray-z-10);
|
|
13
|
-
--button-primary-border-color: var(--gray-z-8);
|
|
14
|
-
--button-primary-color: var(--gray-z-0);
|
|
15
|
-
--button-primary-background-highlight: var(--gray-z-8);
|
|
16
|
-
--button-primary-border-color-highlight: var(--gray-z-6);
|
|
17
|
-
--button-primary-color-highlight: var(--gray-z-0);
|
|
18
|
-
}
|