@bomberstudios/css-library 1.1.2 → 1.1.3
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 +17 -10
- package/index.html +36 -24
- 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;
|
|
@@ -49,6 +51,8 @@ body {
|
|
|
49
51
|
font-size: var(--font-size);
|
|
50
52
|
display: flex;
|
|
51
53
|
flex-direction: column;
|
|
54
|
+
color: var(--fg-color);
|
|
55
|
+
background-color: var(--bg-color);
|
|
52
56
|
}
|
|
53
57
|
|
|
54
58
|
/* Layout */
|
|
@@ -138,18 +142,21 @@ body {
|
|
|
138
142
|
}
|
|
139
143
|
a {
|
|
140
144
|
color: var(--brand);
|
|
141
|
-
text-decoration:
|
|
142
|
-
text-decoration-
|
|
145
|
+
text-decoration: underline;
|
|
146
|
+
text-decoration-style: dotted;
|
|
143
147
|
text-underline-offset: 3px;
|
|
148
|
+
text-decoration-thickness: 1px;
|
|
149
|
+
text-decoration-skip-ink: true;
|
|
144
150
|
transition: all 0.2s;
|
|
145
151
|
&:hover {
|
|
146
|
-
text-decoration:
|
|
152
|
+
text-decoration: underline;
|
|
153
|
+
text-decoration-style: wavy;
|
|
147
154
|
text-underline-offset: 5px;
|
|
148
155
|
text-decoration-thickness: 1px;
|
|
149
156
|
}
|
|
150
157
|
}
|
|
151
158
|
p {
|
|
152
|
-
margin: 0 0 1em 0;
|
|
159
|
+
/* margin: 0 0 1em 0; */
|
|
153
160
|
}
|
|
154
161
|
|
|
155
162
|
/* UI Elements */
|
|
@@ -175,7 +182,7 @@ button,
|
|
|
175
182
|
}
|
|
176
183
|
|
|
177
184
|
card {
|
|
178
|
-
background-color:
|
|
185
|
+
background-color: var(--bg-color);
|
|
179
186
|
border: 1px solid var(--subtle);
|
|
180
187
|
border-radius: var(--radius);
|
|
181
188
|
padding: var(--padding-large);
|
package/index.html
CHANGED
|
@@ -54,6 +54,14 @@
|
|
|
54
54
|
<span>--subtle</span>
|
|
55
55
|
<div class="chip" style="background-color: var(--subtle)"></div>
|
|
56
56
|
</hstack>
|
|
57
|
+
<hstack>
|
|
58
|
+
<span>--fg-color</span>
|
|
59
|
+
<div class="chip" style="background-color: var(--fg-color)"></div>
|
|
60
|
+
</hstack>
|
|
61
|
+
<hstack>
|
|
62
|
+
<span>--bg-color</span>
|
|
63
|
+
<div class="chip" style="background-color: var(--bg-color)"></div>
|
|
64
|
+
</hstack>
|
|
57
65
|
</vstack>
|
|
58
66
|
|
|
59
67
|
<h2>Stacks</h2>
|
|
@@ -126,30 +134,34 @@
|
|
|
126
134
|
</hstack>
|
|
127
135
|
|
|
128
136
|
<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
|
-
|
|
137
|
+
<vstack>
|
|
138
|
+
<p>Great if you need to stack a bunch of elements on top of each other</p>
|
|
139
|
+
<zstack>
|
|
140
|
+
<div
|
|
141
|
+
style="width: 150px; height: 150px; background-color: var(--brand)"
|
|
142
|
+
>
|
|
143
|
+
1
|
|
144
|
+
</div>
|
|
145
|
+
<div
|
|
146
|
+
style="
|
|
147
|
+
width: 100px;
|
|
148
|
+
height: 100px;
|
|
149
|
+
background-color: lch(from var(--brand) calc(l + 10) c h);
|
|
150
|
+
"
|
|
151
|
+
>
|
|
152
|
+
2
|
|
153
|
+
</div>
|
|
154
|
+
<div
|
|
155
|
+
style="
|
|
156
|
+
width: 50px;
|
|
157
|
+
height: 50px;
|
|
158
|
+
background-color: lch(from var(--brand) calc(l + 20) c h);
|
|
159
|
+
"
|
|
160
|
+
>
|
|
161
|
+
3
|
|
162
|
+
</div>
|
|
163
|
+
</zstack>
|
|
164
|
+
</vstack>
|
|
153
165
|
|
|
154
166
|
<h3>Nested Stacks</h3>
|
|
155
167
|
<vstack>
|