@splendidlabz/styles 4.8.2 → 4.9.0
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/package.json +2 -2
- package/src/components/css/prose.css +60 -68
- package/src/effects/elevation.css +303 -214
- package/src/effects/fancybox.css +31 -33
- package/src/effects/frosted-glass.css +27 -31
- package/src/effects/gradients.css +34 -30
- package/src/effects/shadows.css +99 -18
- package/src/effects/text.css +0 -3
- package/src/layouts/micro/stack.css +59 -36
- package/src/layouts/position/nudge.css +3 -3
- package/src/layouts/position/pos.css +10 -14
- package/src/tools/index.css +1 -0
- package/src/tools/interact.css +29 -0
- package/src/tools/transitions.css +17 -23
- package/src/variables/harmonious-type.css +47 -0
|
@@ -3,40 +3,36 @@
|
|
|
3
3
|
} */
|
|
4
4
|
|
|
5
5
|
@utility frosted-glass {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
backdrop-filter: blur(var(--blur, 16px));
|
|
10
|
-
}
|
|
6
|
+
@apply transition-scaffold-extended;
|
|
7
|
+
position: relative;
|
|
8
|
+
backdrop-filter: blur(var(--blur, 16px));
|
|
11
9
|
}
|
|
12
10
|
|
|
13
11
|
/* Use this as a sibling element in stack */
|
|
14
12
|
@utility frosted-glass-advanced {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
padding: var(--refraction);
|
|
13
|
+
pointer-events: none;
|
|
14
|
+
margin: calc(var(--refraction) * -1);
|
|
15
|
+
padding: var(--refraction);
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
17
|
+
/* Using position absolute is another way */
|
|
18
|
+
/* position: absolute; */
|
|
19
|
+
/* inset: calc(var(--refraction) * -1); */ /* z-index: -1; */
|
|
20
|
+
/* width: calc(100% + var(--refraction) * 2); */
|
|
21
|
+
/* height: calc(100% + var(--refraction) * 2); */
|
|
22
|
+
border-radius: inherit;
|
|
23
|
+
backdrop-filter: blur(16px);
|
|
24
|
+
mask-image:
|
|
25
|
+
linear-gradient(
|
|
26
|
+
to bottom,
|
|
27
|
+
transparent 0% var(--refraction),
|
|
28
|
+
black var(--refraction) calc(100% - var(--refraction)),
|
|
29
|
+
transparent calc(100% - var(--refraction)) 100%
|
|
30
|
+
),
|
|
31
|
+
linear-gradient(
|
|
32
|
+
to right,
|
|
33
|
+
transparent 0% var(--refraction),
|
|
34
|
+
black var(--refraction) calc(100% - var(--refraction)),
|
|
35
|
+
transparent calc(100% - var(--refraction)) 100%
|
|
36
|
+
);
|
|
37
|
+
mask-composite: intersect;
|
|
42
38
|
}
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
/* These don't work in Tailwind 4 and we need to adjust them */
|
|
22
21
|
@utility tw-gradient {
|
|
23
22
|
--tw-gradient:
|
|
24
23
|
var(--tw-gradient-from) var(--tw-gradient-from-position),
|
|
@@ -26,13 +25,11 @@
|
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
@utility gradient {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
);
|
|
35
|
-
}
|
|
28
|
+
@apply tw-gradient;
|
|
29
|
+
background-image: linear-gradient(
|
|
30
|
+
var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
|
|
31
|
+
var(--gradient, var(--tw-gradient))
|
|
32
|
+
);
|
|
36
33
|
}
|
|
37
34
|
|
|
38
35
|
@function --linear-gradient(--gradient) {
|
|
@@ -47,35 +44,40 @@
|
|
|
47
44
|
}
|
|
48
45
|
|
|
49
46
|
@utility radial-gradient {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var(--
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
47
|
+
@apply tw-gradient;
|
|
48
|
+
background-image: radial-gradient(
|
|
49
|
+
var(--gradient-shape) var(--gradient-size) at var(--gradient-position) in
|
|
50
|
+
var(--color-space) var(--hue-interpolation),
|
|
51
|
+
var(--tw-gradient-stops, var(--gradient))
|
|
52
|
+
);
|
|
57
53
|
}
|
|
58
54
|
|
|
59
55
|
@utility conic-gradient {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
);
|
|
66
|
-
}
|
|
56
|
+
@apply tw-gradient;
|
|
57
|
+
background-image: conic-gradient(
|
|
58
|
+
from var(--gradient-angle) at var(--gradient-position),
|
|
59
|
+
var(--tw-gradient-stops, var(--gradient))
|
|
60
|
+
);
|
|
67
61
|
}
|
|
68
62
|
|
|
69
63
|
@utility text-gradient {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
background-clip: text;
|
|
64
|
+
@apply gradient;
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
-webkit-text-fill-color: transparent;
|
|
67
|
+
background-clip: text;
|
|
75
68
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
69
|
+
/* Allows multiline gradients in Safari */
|
|
70
|
+
box-decoration-break: clone;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@utility gradient-text {
|
|
74
|
+
@apply gradient;
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
-webkit-text-fill-color: transparent;
|
|
77
|
+
background-clip: text;
|
|
78
|
+
|
|
79
|
+
/* Allows multiline gradients in Safari */
|
|
80
|
+
box-decoration-break: clone;
|
|
79
81
|
}
|
|
80
82
|
|
|
81
83
|
/*********************
|
|
@@ -119,7 +121,9 @@
|
|
|
119
121
|
/*********************
|
|
120
122
|
* Functional Utiliites for Gradients *
|
|
121
123
|
*********************/
|
|
124
|
+
/* prettier-ignore */
|
|
122
125
|
@utility gradient-angle-* {
|
|
126
|
+
--gradient-angle: --value(number)deg;
|
|
123
127
|
--gradient-angle: --value([angle]);
|
|
124
128
|
}
|
|
125
129
|
|
package/src/effects/shadows.css
CHANGED
|
@@ -15,36 +15,111 @@
|
|
|
15
15
|
* --drop-shadow-color: transparent;
|
|
16
16
|
*********************/
|
|
17
17
|
|
|
18
|
+
@utility shadowstring {
|
|
19
|
+
--shadow-string: var(--shadow-inset,) var(--shadow-x, 0) var(--shadow-y, 0)
|
|
20
|
+
var(--shadow-blur, 0) var(--shadow-spread, 0)
|
|
21
|
+
oklch(
|
|
22
|
+
from var(--shadow-color, var(--tw-shadow-color)) l c h /
|
|
23
|
+
var(--shadow-alpha, 1)
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
18
27
|
@utility shadow {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
28
|
+
@apply shadowstring;
|
|
29
|
+
box-shadow: var(--shadow, var(--shadow-string));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@utility inset {
|
|
33
|
+
--shadow-inset: inset;
|
|
24
34
|
}
|
|
25
35
|
|
|
26
36
|
@utility text-shadow {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
text-shadow: var(--text-shadow, var(--text-shadow-string));
|
|
31
|
-
}
|
|
37
|
+
--text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
|
|
38
|
+
var(--text-shadow-blur, 0) var(--text-shadow-color, currentcolor);
|
|
39
|
+
text-shadow: var(--text-shadow, var(--text-shadow-string));
|
|
32
40
|
}
|
|
33
41
|
|
|
34
42
|
@utility drop-shadow {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
--drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
|
|
44
|
+
var(--drop-shadow-blur, 0) var(--drop-shadow-color);
|
|
45
|
+
filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@utility shadow-pseudo {
|
|
49
|
+
content: '';
|
|
50
|
+
position: absolute;
|
|
51
|
+
|
|
52
|
+
/* Required if parent element is inline-block. */
|
|
53
|
+
/* Not required if parent element is inline-flex */
|
|
54
|
+
top: calc(var(--border-width, 0px) * -1);
|
|
55
|
+
left: calc(var(--border-width, 0px) * -1);
|
|
56
|
+
box-sizing: content-box;
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
border: inherit;
|
|
60
|
+
border-radius: inherit;
|
|
61
|
+
box-shadow: var(--shadow, var(--shadow-string));
|
|
62
|
+
opacity: 0;
|
|
63
|
+
transition: var(--transition-values);
|
|
64
|
+
transition-property: opacity;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@utility shadow-before {
|
|
68
|
+
@apply shadowstring;
|
|
69
|
+
position: relative;
|
|
70
|
+
|
|
71
|
+
&::before {
|
|
72
|
+
@apply shadow-pseudo;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:hover,
|
|
76
|
+
&:focus-visible,
|
|
77
|
+
&:active,
|
|
78
|
+
&.selected,
|
|
79
|
+
&.checked,
|
|
80
|
+
&[aria-current],
|
|
81
|
+
&[aria-selected='true'],
|
|
82
|
+
&[aria-pressed='true'],
|
|
83
|
+
&[aria-expanded='true'] {
|
|
84
|
+
&::before {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@utility shadow-after {
|
|
91
|
+
@apply shadowstring;
|
|
92
|
+
position: relative;
|
|
93
|
+
|
|
94
|
+
&::after {
|
|
95
|
+
@apply shadow-pseudo;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:hover,
|
|
99
|
+
&:focus-visible,
|
|
100
|
+
&:active,
|
|
101
|
+
&.selected,
|
|
102
|
+
&.checked,
|
|
103
|
+
&[aria-current],
|
|
104
|
+
&[aria-selected='true'],
|
|
105
|
+
&[aria-pressed='true'],
|
|
106
|
+
&[aria-expanded='true'] {
|
|
107
|
+
&::after {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
}
|
|
39
110
|
}
|
|
40
111
|
}
|
|
41
112
|
|
|
42
113
|
/* Shadow Functional Utilities */
|
|
114
|
+
/* prettier-ignore */
|
|
43
115
|
@utility sx-* {
|
|
116
|
+
--shadow-x: calc(var(--spacing) * --value(integer));
|
|
44
117
|
--shadow-x: --value([length]);
|
|
45
118
|
}
|
|
46
119
|
|
|
120
|
+
/* prettier-ignore */
|
|
47
121
|
@utility sy-* {
|
|
122
|
+
--shadow-y: calc(var(--spacing) * --value(integer));
|
|
48
123
|
--shadow-y: --value([length]);
|
|
49
124
|
}
|
|
50
125
|
|
|
@@ -63,6 +138,8 @@
|
|
|
63
138
|
}
|
|
64
139
|
|
|
65
140
|
@utility sa-* {
|
|
141
|
+
--shadow-alpha: calc(--value(integer) * 1%);
|
|
142
|
+
--shadow-alpha: --value([percentage]);
|
|
66
143
|
--shadow-alpha: --value([number]);
|
|
67
144
|
}
|
|
68
145
|
|
|
@@ -78,6 +155,10 @@
|
|
|
78
155
|
--shadow-blur-multiple: --value([number]);
|
|
79
156
|
}
|
|
80
157
|
|
|
158
|
+
@utility ssm-* {
|
|
159
|
+
--shadow-spread-multiple: --value([number]);
|
|
160
|
+
}
|
|
161
|
+
|
|
81
162
|
/*********************
|
|
82
163
|
* Text Shadow Utilities *
|
|
83
164
|
*********************/
|
|
@@ -95,9 +176,9 @@
|
|
|
95
176
|
}
|
|
96
177
|
|
|
97
178
|
@utility tsc-* {
|
|
98
|
-
--text-shadow-color: --value(--color
|
|
179
|
+
--text-shadow-color: --value(--color-*, [color]);
|
|
99
180
|
--text-shadow-color: oklch(
|
|
100
|
-
from --value(--color
|
|
181
|
+
from --value(--color-*, [color]) l c h / --modifier(integer) %
|
|
101
182
|
);
|
|
102
183
|
}
|
|
103
184
|
|
|
@@ -129,9 +210,9 @@
|
|
|
129
210
|
}
|
|
130
211
|
|
|
131
212
|
@utility dsc-* {
|
|
132
|
-
--drop-shadow-color: --value(--color
|
|
213
|
+
--drop-shadow-color: --value(--color-*, [color]);
|
|
133
214
|
--drop-shadow-color: oklch(
|
|
134
|
-
from --value(--color
|
|
215
|
+
from --value(--color-*, [color]) l c h / --modifier(integer) %
|
|
135
216
|
);
|
|
136
217
|
}
|
|
137
218
|
|
package/src/effects/text.css
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
@utility text-stroke {
|
|
2
2
|
@supports (-webkit-text-stroke-width: 1px) {
|
|
3
|
-
/* Need to adjust this font size?? */
|
|
4
|
-
|
|
5
|
-
/* font-size: calc(1em - var(--stroke-width, 0.1em) / 2); */
|
|
6
3
|
-webkit-text-stroke-width: var(--stroke-width, 0.1em);
|
|
7
4
|
-webkit-text-stroke-color: var(--stroke-color);
|
|
8
5
|
paint-order: stroke fill;
|
|
@@ -1,49 +1,72 @@
|
|
|
1
1
|
@utility stack {
|
|
2
|
-
|
|
2
|
+
position: relative;
|
|
3
|
+
display: grid;
|
|
4
|
+
grid-template-columns: minmax(0, 1fr);
|
|
5
|
+
padding: 0;
|
|
6
|
+
|
|
7
|
+
&::before,
|
|
8
|
+
&::after,
|
|
9
|
+
> *,
|
|
10
|
+
> *:where(.contents) > *,
|
|
11
|
+
> *:where(astro-island, astro-slot) > * {
|
|
3
12
|
position: relative;
|
|
4
|
-
|
|
5
|
-
grid-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
&::before,
|
|
9
|
-
&::after,
|
|
10
|
-
> *,
|
|
11
|
-
> *:where(.contents) > *,
|
|
12
|
-
> *:where(astro-island, astro-slot) > * {
|
|
13
|
-
position: relative;
|
|
14
|
-
z-index: 1;
|
|
15
|
-
grid-column: 1 / span 1;
|
|
16
|
-
grid-row: 1 / span 1;
|
|
17
|
-
}
|
|
13
|
+
grid-column: 1 / span 1;
|
|
14
|
+
grid-row: 1 / span 1;
|
|
15
|
+
}
|
|
18
16
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
> *,
|
|
18
|
+
> *:where(.contents) > *,
|
|
19
|
+
> *:where(astro-island, astro-slot) > * {
|
|
20
|
+
z-index: 1;
|
|
21
|
+
}
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
23
|
+
> :where(.background) {
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
position: absolute;
|
|
26
|
+
inset: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
> :where(.foreground) {
|
|
30
|
+
position: relative;
|
|
31
|
+
z-index: 10;
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
@utility stack-interactive {
|
|
33
|
-
|
|
34
|
-
@apply stack;
|
|
36
|
+
@apply stack;
|
|
35
37
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
> *:where(.underlay) {
|
|
39
|
+
z-index: -1;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> *:where(.overlay) {
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
z-index: 10;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
> *:where(.underlay),
|
|
48
|
+
> *:where(.overlay) {
|
|
49
|
+
@apply pos-overlay;
|
|
50
|
+
opacity: 0;
|
|
51
|
+
transition: var(--transition-values);
|
|
52
|
+
transition-property: opacity;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
> *:where(.fade-out) {
|
|
56
|
+
opacity: 1;
|
|
57
|
+
transition: var(--transition-values);
|
|
58
|
+
transition-property: opacity;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@variant interact-within {
|
|
62
|
+
> *:where(.underlay),
|
|
63
|
+
> *:where(.overlay) {
|
|
64
|
+
pointer-events: auto;
|
|
65
|
+
opacity: 1;
|
|
39
66
|
}
|
|
40
67
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
&:focus-within {
|
|
44
|
-
> .overlay {
|
|
45
|
-
opacity: 1;
|
|
46
|
-
}
|
|
68
|
+
> *:where(.fade-out) {
|
|
69
|
+
opacity: 0;
|
|
47
70
|
}
|
|
48
71
|
}
|
|
49
|
-
}
|
|
72
|
+
}
|
|
@@ -75,17 +75,17 @@
|
|
|
75
75
|
*********************/
|
|
76
76
|
@utility nudge-* {
|
|
77
77
|
--nudge: --value([*]);
|
|
78
|
-
--nudge: calc(var(--spacing) * --value(
|
|
78
|
+
--nudge: calc(var(--spacing) * --value());
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
@utility nudge-x-* {
|
|
82
82
|
--nudge-x: --value([*]);
|
|
83
|
-
--nudge-x: calc(var(--spacing) * --value(
|
|
83
|
+
--nudge-x: calc(var(--spacing) * --value());
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
@utility nudge-y-* {
|
|
87
87
|
--nudge-y: --value([*]);
|
|
88
|
-
--nudge-y: calc(var(--spacing) * --value(
|
|
88
|
+
--nudge-y: calc(var(--spacing) * --value());
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
@utility inner-radius {
|
|
@@ -106,13 +106,11 @@
|
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
@utility relative-pos-left {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
margin-block: auto;
|
|
115
|
-
}
|
|
109
|
+
position: absolute;
|
|
110
|
+
inset-block: 0;
|
|
111
|
+
inset-inline-start: 0;
|
|
112
|
+
height: fit-content;
|
|
113
|
+
margin-block: auto;
|
|
116
114
|
}
|
|
117
115
|
|
|
118
116
|
@utility relative-pos-leftfull {
|
|
@@ -122,13 +120,11 @@
|
|
|
122
120
|
}
|
|
123
121
|
|
|
124
122
|
@utility relative-pos-right {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
margin-block: auto;
|
|
131
|
-
}
|
|
123
|
+
position: absolute;
|
|
124
|
+
inset-block: 0;
|
|
125
|
+
inset-inline-end: 0;
|
|
126
|
+
height: fit-content;
|
|
127
|
+
margin-block: auto;
|
|
132
128
|
}
|
|
133
129
|
|
|
134
130
|
@utility relative-pos-rightfull {
|
package/src/tools/index.css
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@custom-variant interact {
|
|
2
|
+
&:hover,
|
|
3
|
+
&:focus-visible,
|
|
4
|
+
&:active,
|
|
5
|
+
&[aria-current],
|
|
6
|
+
&[aria-selected='true'],
|
|
7
|
+
&[aria-pressed='true'],
|
|
8
|
+
&[aria-expanded='true'] {
|
|
9
|
+
@slot;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@custom-variant interact-within {
|
|
14
|
+
&:hover,
|
|
15
|
+
&:focus-visible,
|
|
16
|
+
&[aria-current],
|
|
17
|
+
&[aria-selected='true'],
|
|
18
|
+
&[aria-pressed='true'],
|
|
19
|
+
&[aria-expanded='true'],
|
|
20
|
+
&:has(:focus-visible),
|
|
21
|
+
&:has(
|
|
22
|
+
[aria-current],
|
|
23
|
+
[aria-selected='true'],
|
|
24
|
+
[aria-pressed='true'],
|
|
25
|
+
[aria-expanded='true']
|
|
26
|
+
) {
|
|
27
|
+
@slot;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -8,35 +8,29 @@
|
|
|
8
8
|
* Default transition properties and values *
|
|
9
9
|
*********************/
|
|
10
10
|
@utility transition-scaffold {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
transition-property: var(--transition-props);
|
|
19
|
-
}
|
|
11
|
+
--transition-values: var(--transition-duration) var(--transition-delay)
|
|
12
|
+
var(--transition-easing);
|
|
13
|
+
--transition-props:
|
|
14
|
+
background, border, color, display, fill, opacity, outline, stroke,
|
|
15
|
+
transform, translate, scale, rotate, skew, perspective;
|
|
16
|
+
transition: var(--transition-values);
|
|
17
|
+
transition-property: var(--transition-props);
|
|
20
18
|
}
|
|
21
19
|
|
|
22
20
|
@utility transition-scaffold-extended {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
skew, perspective;
|
|
29
|
-
}
|
|
21
|
+
@apply transition-scaffold;
|
|
22
|
+
--transition-props:
|
|
23
|
+
backdrop-filter, background, border, color, display, fill, filter, gap,
|
|
24
|
+
opacity, outline, overlay, stroke, transform, translate, scale, rotate,
|
|
25
|
+
skew, perspective;
|
|
30
26
|
}
|
|
31
27
|
|
|
32
28
|
@utility transition-svg {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
transition-property: var(--transition-props);
|
|
39
|
-
}
|
|
29
|
+
--transition-values: var(--transition-duration) var(--transition-delay)
|
|
30
|
+
var(--transition-easing);
|
|
31
|
+
--transition-props: opacity, fill, stroke;
|
|
32
|
+
transition: var(--transition-values);
|
|
33
|
+
transition-property: var(--transition-props);
|
|
40
34
|
}
|
|
41
35
|
|
|
42
36
|
@keyframes z-index-hack {
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* Harmonious Type Scale (Classic Typographic Scale) *
|
|
2
|
+
*********************/
|
|
3
|
+
|
|
4
|
+
/* prettier-ignore */
|
|
5
|
+
@theme {
|
|
6
|
+
/* REM Values */
|
|
7
|
+
--text-1: 0.625rem; /* 10px */
|
|
8
|
+
--text-2: 0.75rem; /* 12px */
|
|
9
|
+
--text-3: 0.875rem; /* 14px */
|
|
10
|
+
--text-4: 1rem; /* 16px */
|
|
11
|
+
--text-5: 1.125rem; /* 18px */
|
|
12
|
+
--text-6: 1.3125rem; /* 21px */
|
|
13
|
+
--text-7: 1.5rem; /* 24px */
|
|
14
|
+
--text-8: 1.75rem; /* 28px */
|
|
15
|
+
--text-9: 2rem; /* 32px */
|
|
16
|
+
--text-10: 2.25rem; /* 36px */
|
|
17
|
+
--text-11: 2.625rem; /* 42px */
|
|
18
|
+
--text-12: 3rem; /* 48px */
|
|
19
|
+
--text-13: 3.4375rem; /* 55px */
|
|
20
|
+
--text-14: 3.9375rem; /* 63px */
|
|
21
|
+
--text-15: 4.5625rem; /* 73px */
|
|
22
|
+
--text-16: 5.25rem; /* 84px */
|
|
23
|
+
--text-17: 6rem; /* 96px */
|
|
24
|
+
--text-18: 6.875rem; /* 110px */
|
|
25
|
+
--text-19: 7.9375rem; /* 127px */
|
|
26
|
+
|
|
27
|
+
/* EM Values */
|
|
28
|
+
--text-1e: 0.625em; /* 10px */
|
|
29
|
+
--text-2e: 0.75em; /* 12px */
|
|
30
|
+
--text-3e: 0.875em; /* 14px */
|
|
31
|
+
--text-4e: 1em; /* 16px */
|
|
32
|
+
--text-5e: 1.125em; /* 18px */
|
|
33
|
+
--text-6e: 1.3125em; /* 21px */
|
|
34
|
+
--text-7e: 1.5em; /* 24px */
|
|
35
|
+
--text-8e: 1.75em; /* 28px */
|
|
36
|
+
--text-9e: 2em; /* 32px */
|
|
37
|
+
--text-10e: 2.25em; /* 36px */
|
|
38
|
+
--text-11e: 2.625em; /* 42px */
|
|
39
|
+
--text-12e: 3em; /* 48px */
|
|
40
|
+
--text-13e: 3.4375em; /* 55px */
|
|
41
|
+
--text-14e: 3.9375em; /* 63px */
|
|
42
|
+
--text-15e: 4.5625em; /* 73px */
|
|
43
|
+
--text-16e: 5.25em; /* 84px */
|
|
44
|
+
--text-17e: 6em; /* 96px */
|
|
45
|
+
--text-18e: 6.875em; /* 110px */
|
|
46
|
+
--text-19e: 7.9375em; /* 127px */
|
|
47
|
+
}
|