@splendidlabz/styles 4.0.0 → 4.1.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 +3 -3
- package/src/components/astro/fancylist.css +12 -6
- package/src/components/css/card.css +78 -37
- package/src/components/css/hero-heading.css +2 -1
- package/src/components/css/prose.css +8 -5
- package/src/components/svelte/accordion.css +18 -1
- package/src/components/svelte/modal.css +1 -1
- package/src/components/svelte/popover.css +1 -1
- package/src/effects/{fancy-box.css → fancybox.css} +3 -4
- package/src/effects/index.css +1 -1
- package/src/form/input.css +1 -0
- package/src/generic/anchors-and-buttons.css +4 -0
- package/src/layouts/macro/grid.css +43 -13
- package/src/layouts/micro/divider.css +4 -3
- package/src/layouts/micro/index.css +1 -0
- package/src/layouts/micro/inner-spacing.css +39 -0
- package/src/layouts/micro/micro.css +2 -0
- package/src/layouts/position/edge.css +64 -34
- package/src/tools/index.css +1 -1
- package/src/tools/pigment.css +56 -72
- package/src/tools/scaffolds.css +119 -0
- package/src/tools/transitions.css +18 -2
- package/src/type/index.css +1 -0
- package/src/type/text-relative.css +53 -0
- package/src/variables/font.css +29 -0
- package/src/variables/radius.css +40 -40
- package/src/variables/variables.css +0 -2
- package/dist/no-tw/layouts.css +0 -1278
- package/dist/no-tw/styles.css +0 -2018
- package/dist/styles.css +0 -1383
- package/src/tools/border.css +0 -59
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@utility margin-scaffold {
|
|
2
|
+
margin-block: var(--margin-block, var(--margin, var(--fallback-margin)));
|
|
3
|
+
margin-inline: var(--margin-inline, var(--margin, var(--fallback-margin)));
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@utility padding-scaffold {
|
|
7
|
+
padding-block: var(--padding-block, var(--padding, var(--fallback-padding)));
|
|
8
|
+
padding-inline: var(
|
|
9
|
+
--padding-inline,
|
|
10
|
+
var(--padding, var(--fallback-padding))
|
|
11
|
+
);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@utility border-scaffold {
|
|
15
|
+
border: var(--border-width) var(--border-style)
|
|
16
|
+
var(--_bc, var(--border-color));
|
|
17
|
+
border-radius: var(--radius);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@utility radius-* {
|
|
21
|
+
--radius: --value([length]);
|
|
22
|
+
--radius: calc(var(--spacing) * --value(integer));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@utility rounded-* {
|
|
26
|
+
border-radius: calc(var(--spacing) --value(integer));
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@utility rounded-t-* {
|
|
30
|
+
border-top-left-radius: calc(var(--spacing) --value(integer));
|
|
31
|
+
border-top-right-radius: calc(var(--spacing) --value(integer));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@utility rounded-b-* {
|
|
35
|
+
border-bottom-left-radius: calc(var(--spacing) --value(integer));
|
|
36
|
+
border-bottom-right-radius: calc(var(--spacing) --value(integer));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@utility rounded-l-* {
|
|
40
|
+
border-top-left-radius: calc(var(--spacing) --value(integer));
|
|
41
|
+
border-bottom-left-radius: calc(var(--spacing) --value(integer));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@utility rounded-r-* {
|
|
45
|
+
border-top-right-radius: calc(var(--spacing) --value(integer));
|
|
46
|
+
border-bottom-right-radius: calc(var(--spacing) --value(integer));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@utility rounded-tl-* {
|
|
50
|
+
border-top-left-radius: calc(var(--spacing) --value(integer));
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@utility rounded-tr-* {
|
|
54
|
+
border-top-right-radius: calc(var(--spacing) --value(integer));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@utility rounded-bl-* {
|
|
58
|
+
border-bottom-left-radius: calc(var(--spacing) --value(integer));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@utility rounded-br-* {
|
|
62
|
+
border-bottom-right-radius: calc(var(--spacing) --value(integer));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@utility rounded-x {
|
|
66
|
+
> :where(:first-child) {
|
|
67
|
+
border-top-left-radius: var(--radius);
|
|
68
|
+
border-bottom-left-radius: var(--radius);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
> :where(:last-child) {
|
|
72
|
+
border-top-right-radius: var(--radius);
|
|
73
|
+
border-bottom-right-radius: var(--radius);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@utility rounded-x-* {
|
|
78
|
+
> :where(:first-child) {
|
|
79
|
+
border-top-left-radius: --value([length]);
|
|
80
|
+
border-top-left-radius: calc(var(--spacing) --value(integer));
|
|
81
|
+
border-bottom-left-radius: --value([length]);
|
|
82
|
+
border-bottom-left-radius: calc(var(--spacing) --value(integer));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
> :where(:last-child) {
|
|
86
|
+
border-top-right-radius: --value([length]);
|
|
87
|
+
border-top-right-radius: calc(var(--spacing) --value(integer));
|
|
88
|
+
border-bottom-right-radius: --value([length]);
|
|
89
|
+
border-bottom-right-radius: calc(var(--spacing) --value(integer));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@utility rounded-y {
|
|
94
|
+
> :first-child {
|
|
95
|
+
border-top-left-radius: var(--radius);
|
|
96
|
+
border-top-right-radius: var(--radius);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
> :last-child {
|
|
100
|
+
border-bottom-left-radius: var(--radius);
|
|
101
|
+
border-bottom-right-radius: var(--radius);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@utility rounded-y-* {
|
|
106
|
+
> :first-child {
|
|
107
|
+
border-top-left-radius: --value([length]);
|
|
108
|
+
border-top-left-radius: calc(var(--spacing) --value(integer));
|
|
109
|
+
border-top-right-radius: --value([length]);
|
|
110
|
+
border-top-right-radius: calc(var(--spacing) --value(integer));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
> :last-child {
|
|
114
|
+
border-bottom-left-radius: --value([length]);
|
|
115
|
+
border-bottom-left-radius: calc(var(--spacing) --value(integer));
|
|
116
|
+
border-bottom-right-radius: --value([length]);
|
|
117
|
+
border-bottom-right-radius: calc(var(--spacing) --value(integer));
|
|
118
|
+
}
|
|
119
|
+
}
|
|
@@ -6,10 +6,19 @@
|
|
|
6
6
|
--transition-values: var(--transition-duration) var(--transition-delay)
|
|
7
7
|
var(--transition-easing);
|
|
8
8
|
--transition-props:
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
background, border, color, display, fill, opacity, outline, stroke,
|
|
10
|
+
transform;
|
|
11
11
|
transition: var(--transition-values);
|
|
12
12
|
transition-property: var(--transition-props);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@utility transition-scaffold-extended {
|
|
17
|
+
& {
|
|
18
|
+
@apply transition-scaffold;
|
|
19
|
+
--transition-props:
|
|
20
|
+
backdrop-filter, background, border, color, display, fill, filter, gap,
|
|
21
|
+
opacity, outline, overlay, stroke, transform;
|
|
13
22
|
transition-behavior: allow-discrete;
|
|
14
23
|
}
|
|
15
24
|
}
|
|
@@ -23,3 +32,10 @@
|
|
|
23
32
|
transition-property: var(--transition-props);
|
|
24
33
|
}
|
|
25
34
|
}
|
|
35
|
+
|
|
36
|
+
@keyframes z-index-hack {
|
|
37
|
+
0%,
|
|
38
|
+
100% {
|
|
39
|
+
z-index: var(--z-index, 5);
|
|
40
|
+
}
|
|
41
|
+
}
|
package/src/type/index.css
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--base-size: var(--text-7m);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@utility base-anchor {
|
|
6
|
+
font-size: calc(var(--base-size) * 1em);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@utility text-relative {
|
|
10
|
+
font-size: calc(var(--font-size) / var(--base-size) * 1em);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* To use this today */
|
|
14
|
+
@utility base-font-size {
|
|
15
|
+
--base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Easier usage when CSS functions become available */
|
|
19
|
+
@function --bem(--multiplier) {
|
|
20
|
+
result: calc(var(--font-size / var(--base-size) * 1em * --multiplier));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@function --blh(--multiplier, --lh-multiplier) {
|
|
24
|
+
result: calc(
|
|
25
|
+
var(
|
|
26
|
+
--font-size / var(--base-size) * 1em * --multiplier *
|
|
27
|
+
var(--lh-multiplier, var(--leading))
|
|
28
|
+
)
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/*********************
|
|
33
|
+
* Legacy Versions *
|
|
34
|
+
*********************/
|
|
35
|
+
@utility text-relative-base {
|
|
36
|
+
font-size: calc(var(--text-base-size) * 1rem);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@utility text-relative {
|
|
40
|
+
font-size: calc(var(--text-size) / var(--text-base-size) * 1em);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* prettier-ignore */
|
|
44
|
+
@utility rtext-base-* {
|
|
45
|
+
@apply text-base;
|
|
46
|
+
--text-base-size: --value(--text-base-*, [size]);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* prettier-ignore */
|
|
50
|
+
@utility rtext-* {
|
|
51
|
+
@apply text-relative;
|
|
52
|
+
--text-size: --value(--text-*, [size]);
|
|
53
|
+
}
|
package/src/variables/font.css
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
/* prettier-ignore */
|
|
5
5
|
@theme {
|
|
6
|
+
/* REM Values */
|
|
6
7
|
--text-1: 0.625rem; /* 10px */
|
|
7
8
|
--text-2: 0.6875rem; /* 11px */
|
|
8
9
|
--text-3: 0.75rem; /* 12px */
|
|
@@ -25,6 +26,9 @@
|
|
|
25
26
|
--text-20: 6rem; /* 96px */
|
|
26
27
|
--text-21: 6.75rem; /* 108px */
|
|
27
28
|
--text-22: 7.5rem; /* 120px */
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
/* EM Values */
|
|
28
32
|
--text-1e: 0.625em; /* 10px */
|
|
29
33
|
--text-2e: 0.6875em; /* 11px */
|
|
30
34
|
--text-3e: 0.75em; /* 12px */
|
|
@@ -47,6 +51,31 @@
|
|
|
47
51
|
--text-20e: 6em; /* 96px */
|
|
48
52
|
--text-21e: 6.75em; /* 108px */
|
|
49
53
|
--text-22e: 7.5em; /* 120px */
|
|
54
|
+
|
|
55
|
+
/* Multiplier Values */
|
|
56
|
+
--text-1m: 0.625; /* 10px */
|
|
57
|
+
--text-2m: 0.6875; /* 11px */
|
|
58
|
+
--text-3m: 0.75; /* 12px */
|
|
59
|
+
--text-4m: 0.8125; /* 13px */
|
|
60
|
+
--text-5m: 0.875; /* 14px */
|
|
61
|
+
--text-6m: 0.9375; /* 15px */
|
|
62
|
+
--text-7m: 1; /* 16px */
|
|
63
|
+
--text-8m: 1.125; /* 18px */
|
|
64
|
+
--text-9m: 1.3125; /* 21px */
|
|
65
|
+
--text-10m: 1.5; /* 24px */
|
|
66
|
+
--text-11m: 1.75; /* 28px */
|
|
67
|
+
--text-12m: 2; /* 32px */
|
|
68
|
+
--text-13m: 2.25; /* 36px */
|
|
69
|
+
--text-14m: 2.625; /* 42px */
|
|
70
|
+
--text-15m: 3; /* 48px */
|
|
71
|
+
--text-16m: 3.375; /* 54px */
|
|
72
|
+
--text-17m: 3.75; /* 60px */
|
|
73
|
+
--text-18m: 4.5; /* 72px */
|
|
74
|
+
--text-19m: 5.25; /* 84px */
|
|
75
|
+
--text-20m: 6; /* 96px */
|
|
76
|
+
--text-21m: 6.75; /* 108px */
|
|
77
|
+
--text-22m: 7.5; /* 120px */
|
|
78
|
+
|
|
50
79
|
}
|
|
51
80
|
|
|
52
81
|
/* Font weights *
|
package/src/variables/radius.css
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
/* Border radius *
|
|
2
2
|
*********************/
|
|
3
3
|
@theme {
|
|
4
|
-
--radius-0.5: 0.
|
|
5
|
-
--radius-1:
|
|
6
|
-
--radius-1.5:
|
|
7
|
-
--radius-2:
|
|
8
|
-
--radius-2.5:
|
|
9
|
-
--radius-3:
|
|
10
|
-
--radius-3.5:
|
|
11
|
-
--radius-4:
|
|
12
|
-
--radius-4.5:
|
|
13
|
-
--radius-5:
|
|
14
|
-
--radius-5.5:
|
|
15
|
-
--radius-6:
|
|
16
|
-
--radius-6.5:
|
|
17
|
-
--radius-7:
|
|
18
|
-
--radius-7.5:
|
|
19
|
-
--radius-8:
|
|
20
|
-
--radius-8.5:
|
|
21
|
-
--radius-9:
|
|
22
|
-
--radius-9.5:
|
|
23
|
-
--radius-10:
|
|
24
|
-
--radius-10.5:
|
|
25
|
-
--radius-11:
|
|
26
|
-
--radius-11.5:
|
|
27
|
-
--radius-12:
|
|
28
|
-
--radius-12.5:
|
|
29
|
-
--radius-13:
|
|
30
|
-
--radius-13.5:
|
|
31
|
-
--radius-14:
|
|
32
|
-
--radius-14.5:
|
|
33
|
-
--radius-15:
|
|
34
|
-
--radius-15.5:
|
|
35
|
-
--radius-16:
|
|
36
|
-
--radius-16.5:
|
|
37
|
-
--radius-17:
|
|
38
|
-
--radius-17.5:
|
|
39
|
-
--radius-18:
|
|
40
|
-
--radius-18.5:
|
|
41
|
-
--radius-19:
|
|
42
|
-
--radius-19.5:
|
|
43
|
-
--radius-20:
|
|
4
|
+
--radius-0.5: calc(var(--spacing) * 0.5);
|
|
5
|
+
--radius-1: calc(var(--spacing) * 1);
|
|
6
|
+
--radius-1.5: calc(var(--spacing) * 1.5);
|
|
7
|
+
--radius-2: calc(var(--spacing) * 2);
|
|
8
|
+
--radius-2.5: calc(var(--spacing) * 2.5);
|
|
9
|
+
--radius-3: calc(var(--spacing) * 3);
|
|
10
|
+
--radius-3.5: calc(var(--spacing) * 3.5);
|
|
11
|
+
--radius-4: calc(var(--spacing) * 4);
|
|
12
|
+
--radius-4.5: calc(var(--spacing) * 4.5);
|
|
13
|
+
--radius-5: calc(var(--spacing) * 5);
|
|
14
|
+
--radius-5.5: calc(var(--spacing) * 5.5);
|
|
15
|
+
--radius-6: calc(var(--spacing) * 6);
|
|
16
|
+
--radius-6.5: calc(var(--spacing) * 6.5);
|
|
17
|
+
--radius-7: calc(var(--spacing) * 7);
|
|
18
|
+
--radius-7.5: calc(var(--spacing) * 7.5);
|
|
19
|
+
--radius-8: calc(var(--spacing) * 8);
|
|
20
|
+
--radius-8.5: calc(var(--spacing) * 8.5);
|
|
21
|
+
--radius-9: calc(var(--spacing) * 9);
|
|
22
|
+
--radius-9.5: calc(var(--spacing) * 9.5);
|
|
23
|
+
--radius-10: calc(var(--spacing) * 10);
|
|
24
|
+
--radius-10.5: calc(var(--spacing) * 10.5);
|
|
25
|
+
--radius-11: calc(var(--spacing) * 11);
|
|
26
|
+
--radius-11.5: calc(var(--spacing) * 11.5);
|
|
27
|
+
--radius-12: calc(var(--spacing) * 12);
|
|
28
|
+
--radius-12.5: calc(var(--spacing) * 12.5);
|
|
29
|
+
--radius-13: calc(var(--spacing) * 13);
|
|
30
|
+
--radius-13.5: calc(var(--spacing) * 13.5);
|
|
31
|
+
--radius-14: calc(var(--spacing) * 14);
|
|
32
|
+
--radius-14.5: calc(var(--spacing) * 14.5);
|
|
33
|
+
--radius-15: calc(var(--spacing) * 15);
|
|
34
|
+
--radius-15.5: calc(var(--spacing) * 15.5);
|
|
35
|
+
--radius-16: calc(var(--spacing) * 16);
|
|
36
|
+
--radius-16.5: calc(var(--spacing) * 16.5);
|
|
37
|
+
--radius-17: calc(var(--spacing) * 17);
|
|
38
|
+
--radius-17.5: calc(var(--spacing) * 17.5);
|
|
39
|
+
--radius-18: calc(var(--spacing) * 18);
|
|
40
|
+
--radius-18.5: calc(var(--spacing) * 18.5);
|
|
41
|
+
--radius-19: calc(var(--spacing) * 19);
|
|
42
|
+
--radius-19.5: calc(var(--spacing) * 19.5);
|
|
43
|
+
--radius-20: calc(var(--spacing) * 20);
|
|
44
44
|
--radius-0.5r: calc(var(--radius) * 0.5);
|
|
45
45
|
--radius-1r: var(--radius);
|
|
46
46
|
--radius-1.5r: calc(var(--radius) * 1.5);
|