@bomberstudios/css-library 1.1.2 → 1.1.4
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/index.css +49 -22
- package/index.html +38 -25
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
accent-color: var(--brand);
|
|
14
14
|
--brand: light-dark(#f60, #f60);
|
|
15
15
|
--subtle: light-dark(#aaa, #666);
|
|
16
|
+
--fg-color: light-dark(#333, #ddd);
|
|
17
|
+
--bg-color: light-dark(white, #151515);
|
|
16
18
|
|
|
17
19
|
/* Typography */
|
|
18
20
|
--font-family: system-ui, sans-serif;
|
|
@@ -20,10 +22,11 @@
|
|
|
20
22
|
--line-height: 1.3;
|
|
21
23
|
|
|
22
24
|
/* Visual */
|
|
23
|
-
--shadow-
|
|
24
|
-
--shadow-
|
|
25
|
-
--shadow-
|
|
26
|
-
--shadow-
|
|
25
|
+
--shadow-color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
|
|
26
|
+
--shadow-small: 0 1px 3px var(--shadow-color);
|
|
27
|
+
--shadow-medium: 0 2px calc(var(--gap) / 2) var(--shadow-color);
|
|
28
|
+
--shadow-large: 0 5px var(--gap) var(--shadow-color);
|
|
29
|
+
--shadow-center: 0 0 var(--gap) var(--shadow-color);
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
/* Reset */
|
|
@@ -31,7 +34,6 @@
|
|
|
31
34
|
margin: 0;
|
|
32
35
|
padding: 0;
|
|
33
36
|
list-style: none;
|
|
34
|
-
-webkit-font-smoothing: antialiased;
|
|
35
37
|
box-sizing: border-box;
|
|
36
38
|
outline: none;
|
|
37
39
|
border: none;
|
|
@@ -39,6 +41,10 @@
|
|
|
39
41
|
height: max-content;
|
|
40
42
|
}
|
|
41
43
|
|
|
44
|
+
html {
|
|
45
|
+
interpolate-size: allow-keywords;
|
|
46
|
+
}
|
|
47
|
+
|
|
42
48
|
html,
|
|
43
49
|
body {
|
|
44
50
|
height: 100%;
|
|
@@ -49,63 +55,81 @@ body {
|
|
|
49
55
|
font-size: var(--font-size);
|
|
50
56
|
display: flex;
|
|
51
57
|
flex-direction: column;
|
|
58
|
+
color: var(--fg-color);
|
|
59
|
+
background-color: var(--bg-color);
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
/* Layout */
|
|
55
63
|
hstack,
|
|
56
|
-
vstack
|
|
64
|
+
vstack,
|
|
65
|
+
.hstack,
|
|
66
|
+
.vstack {
|
|
57
67
|
display: flex;
|
|
58
68
|
gap: var(--gap);
|
|
59
69
|
}
|
|
60
70
|
|
|
61
|
-
hstack
|
|
71
|
+
hstack,
|
|
72
|
+
.hstack {
|
|
62
73
|
flex-direction: row;
|
|
63
74
|
align-items: center;
|
|
64
75
|
}
|
|
65
|
-
vstack
|
|
76
|
+
vstack,
|
|
77
|
+
.vstack {
|
|
66
78
|
flex-direction: column;
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
hstack[align='center'],
|
|
70
|
-
vstack[align='center']
|
|
82
|
+
vstack[align='center'],
|
|
83
|
+
.hstack[align='center'],
|
|
84
|
+
.vstack[align='center'] {
|
|
71
85
|
justify-content: center;
|
|
72
86
|
}
|
|
73
87
|
hstack[align='right'],
|
|
74
|
-
vstack[align='right']
|
|
88
|
+
vstack[align='right'],
|
|
89
|
+
.hstack[align='right'],
|
|
90
|
+
.vstack[align='right'] {
|
|
75
91
|
align-items: end;
|
|
76
92
|
justify-content: flex-end;
|
|
77
93
|
}
|
|
78
|
-
vstack[align='right'] >
|
|
94
|
+
vstack[align='right'] > *,
|
|
95
|
+
.vstack[align='right'] > * {
|
|
79
96
|
width: 100%;
|
|
80
97
|
}
|
|
81
98
|
hstack[align='space-between'],
|
|
82
|
-
vstack[align='space-between']
|
|
99
|
+
vstack[align='space-between'],
|
|
100
|
+
.hstack[align='space-between'],
|
|
101
|
+
.vstack[align='space-between'] {
|
|
83
102
|
justify-content: space-between;
|
|
84
103
|
}
|
|
85
104
|
/* TODO: top and bottom alignment */
|
|
86
105
|
|
|
87
|
-
zstack
|
|
106
|
+
zstack,
|
|
107
|
+
.zstack {
|
|
88
108
|
display: grid;
|
|
89
109
|
align-items: center;
|
|
90
110
|
justify-items: center;
|
|
91
111
|
}
|
|
92
|
-
zstack >
|
|
112
|
+
zstack > *,
|
|
113
|
+
.zstack > * {
|
|
93
114
|
display: flex;
|
|
94
115
|
align-items: center;
|
|
95
116
|
justify-content: center;
|
|
96
117
|
grid-area: 1/1/1/1;
|
|
97
118
|
}
|
|
98
119
|
|
|
99
|
-
divider
|
|
120
|
+
divider,
|
|
121
|
+
.divider {
|
|
100
122
|
background-color: var(--subtle);
|
|
101
123
|
}
|
|
102
124
|
|
|
103
|
-
vstack divider
|
|
125
|
+
vstack divider,
|
|
126
|
+
.vstack .divider {
|
|
104
127
|
width: 100%;
|
|
105
128
|
height: 1px;
|
|
106
129
|
}
|
|
107
130
|
|
|
108
|
-
hstack divider
|
|
131
|
+
hstack divider,
|
|
132
|
+
.hstack .divider {
|
|
109
133
|
width: 1px;
|
|
110
134
|
height: 100%;
|
|
111
135
|
}
|
|
@@ -138,18 +162,21 @@ body {
|
|
|
138
162
|
}
|
|
139
163
|
a {
|
|
140
164
|
color: var(--brand);
|
|
141
|
-
text-decoration:
|
|
142
|
-
text-decoration-
|
|
165
|
+
text-decoration: underline;
|
|
166
|
+
text-decoration-style: dotted;
|
|
143
167
|
text-underline-offset: 3px;
|
|
168
|
+
text-decoration-thickness: 1px;
|
|
169
|
+
text-decoration-skip-ink: true;
|
|
144
170
|
transition: all 0.2s;
|
|
145
171
|
&:hover {
|
|
146
|
-
text-decoration:
|
|
172
|
+
text-decoration: underline;
|
|
173
|
+
text-decoration-style: wavy;
|
|
147
174
|
text-underline-offset: 5px;
|
|
148
175
|
text-decoration-thickness: 1px;
|
|
149
176
|
}
|
|
150
177
|
}
|
|
151
178
|
p {
|
|
152
|
-
margin: 0 0 1em 0;
|
|
179
|
+
/* margin: 0 0 1em 0; */
|
|
153
180
|
}
|
|
154
181
|
|
|
155
182
|
/* UI Elements */
|
|
@@ -175,7 +202,7 @@ button,
|
|
|
175
202
|
}
|
|
176
203
|
|
|
177
204
|
card {
|
|
178
|
-
background-color:
|
|
205
|
+
background-color: var(--bg-color);
|
|
179
206
|
border: 1px solid var(--subtle);
|
|
180
207
|
border-radius: var(--radius);
|
|
181
208
|
padding: var(--padding-large);
|
package/index.html
CHANGED
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
body {
|
|
14
|
-
width:
|
|
14
|
+
max-width: 60ch;
|
|
15
|
+
padding: 0 2em;
|
|
15
16
|
margin: 0 auto;
|
|
16
17
|
}
|
|
17
18
|
|
|
@@ -54,6 +55,14 @@
|
|
|
54
55
|
<span>--subtle</span>
|
|
55
56
|
<div class="chip" style="background-color: var(--subtle)"></div>
|
|
56
57
|
</hstack>
|
|
58
|
+
<hstack>
|
|
59
|
+
<span>--fg-color</span>
|
|
60
|
+
<div class="chip" style="background-color: var(--fg-color)"></div>
|
|
61
|
+
</hstack>
|
|
62
|
+
<hstack>
|
|
63
|
+
<span>--bg-color</span>
|
|
64
|
+
<div class="chip" style="background-color: var(--bg-color)"></div>
|
|
65
|
+
</hstack>
|
|
57
66
|
</vstack>
|
|
58
67
|
|
|
59
68
|
<h2>Stacks</h2>
|
|
@@ -126,30 +135,34 @@
|
|
|
126
135
|
</hstack>
|
|
127
136
|
|
|
128
137
|
<h3>Z Stack</h3>
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
138
|
+
<vstack>
|
|
139
|
+
<p>Great if you need to stack a bunch of elements on top of each other</p>
|
|
140
|
+
<zstack>
|
|
141
|
+
<div
|
|
142
|
+
style="width: 150px; height: 150px; background-color: var(--brand)"
|
|
143
|
+
>
|
|
144
|
+
1
|
|
145
|
+
</div>
|
|
146
|
+
<div
|
|
147
|
+
style="
|
|
148
|
+
width: 100px;
|
|
149
|
+
height: 100px;
|
|
150
|
+
background-color: lch(from var(--brand) calc(l + 10) c h);
|
|
151
|
+
"
|
|
152
|
+
>
|
|
153
|
+
2
|
|
154
|
+
</div>
|
|
155
|
+
<div
|
|
156
|
+
style="
|
|
157
|
+
width: 50px;
|
|
158
|
+
height: 50px;
|
|
159
|
+
background-color: lch(from var(--brand) calc(l + 20) c h);
|
|
160
|
+
"
|
|
161
|
+
>
|
|
162
|
+
3
|
|
163
|
+
</div>
|
|
164
|
+
</zstack>
|
|
165
|
+
</vstack>
|
|
153
166
|
|
|
154
167
|
<h3>Nested Stacks</h3>
|
|
155
168
|
<vstack>
|