@splendidlabz/styles 4.8.2 → 4.10.1

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.
Files changed (31) hide show
  1. package/package.json +2 -2
  2. package/scripts/all.js +3 -0
  3. package/scripts/index.js +1 -0
  4. package/scripts/spotlight.js +93 -0
  5. package/src/components/css/prose.css +60 -68
  6. package/src/components/css/simple-svg.css +10 -13
  7. package/src/components/css/strikethrough.css +25 -0
  8. package/src/components/css/writing-mode.css +18 -22
  9. package/src/components/svelte/browserframe.css +4 -0
  10. package/src/effects/bezel.css +334 -0
  11. package/src/effects/elevation.css +303 -214
  12. package/src/effects/fancybox.css +31 -36
  13. package/src/effects/frosted-glass.css +27 -31
  14. package/src/effects/gradients.css +88 -43
  15. package/src/effects/highlight.css +129 -10
  16. package/src/effects/index.css +2 -0
  17. package/src/effects/inner-border.css +8 -14
  18. package/src/effects/shadows.css +260 -25
  19. package/src/effects/testgb.css +372 -0
  20. package/src/effects/text.css +8 -43
  21. package/src/layouts/micro/breakout.css +7 -7
  22. package/src/layouts/micro/inner-spacing.css +6 -6
  23. package/src/layouts/micro/stack.css +59 -36
  24. package/src/layouts/position/nudge.css +3 -3
  25. package/src/layouts/position/pos.css +10 -14
  26. package/src/tools/color.css +2 -2
  27. package/src/tools/index.css +1 -0
  28. package/src/tools/interact.css +35 -0
  29. package/src/tools/scaffolds.css +24 -24
  30. package/src/tools/transitions.css +17 -23
  31. package/src/variables/harmonious-type.css +47 -0
package/src/tools/color.css CHANGED
@@ -1,4 +1,4 @@
1
1
  /* Returns a color with alpha value */
2
- @function --alpha(--color, --alpha) {
3
- result: oklch(from var(--color) l c h / var(--alpha));
2
+ @function --zalpha(--color, --a) {
3
+ result: oklch(from var(--color) l c h / var(--a));
4
4
  }
package/src/tools/index.css CHANGED
@@ -4,3 +4,4 @@
4
4
  @import './scaffolds.css';
5
5
  @import './object.css';
6
6
  @import './transitions.css';
7
+ @import './interact.css';
package/src/tools/interact.css ADDED
@@ -0,0 +1,35 @@
1
+ @custom-variant interact {
2
+ &:hover,
3
+ &:focus-visible,
4
+ &:active,
5
+ &.selected,
6
+ &.checked,
7
+ &[aria-current],
8
+ &[aria-selected='true'],
9
+ &[aria-pressed='true'],
10
+ &[aria-expanded='true'] {
11
+ @slot;
12
+ }
13
+ }
14
+
15
+ @custom-variant interact-within {
16
+ &:hover,
17
+ &:focus-visible,
18
+ &.selected,
19
+ &.checked,
20
+ &[aria-current],
21
+ &[aria-selected='true'],
22
+ &[aria-pressed='true'],
23
+ &[aria-expanded='true'],
24
+ &:has(:focus-visible),
25
+ &:has(
26
+ .selected,
27
+ .checked,
28
+ [aria-current],
29
+ [aria-selected='true'],
30
+ [aria-pressed='true'],
31
+ [aria-expanded='true']
32
+ ) {
33
+ @slot;
34
+ }
35
+ }
package/src/tools/scaffolds.css CHANGED
@@ -19,47 +19,47 @@
19
19
 
20
20
  @utility radius-* {
21
21
  --radius: --value([length]);
22
- --radius: calc(var(--spacing) * --value(integer));
22
+ --radius: --spacing(--value(number));
23
23
  }
24
24
 
25
- /* @utility rounded-* {
26
- border-radius: calc(var(--spacing) --value(integer));
27
- } */
25
+ @utility rounded-* {
26
+ border-radius: --spacing(--value(number));
27
+ }
28
28
 
29
29
  @utility rounded-t-* {
30
- border-top-left-radius: calc(var(--spacing) --value(integer));
31
- border-top-right-radius: calc(var(--spacing) --value(integer));
30
+ border-top-left-radius: --spacing(--value(number));
31
+ border-top-right-radius: --spacing(--value(number));
32
32
  }
33
33
 
34
34
  @utility rounded-b-* {
35
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
36
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
35
+ border-bottom-left-radius: --spacing(--value(number));
36
+ border-bottom-right-radius: --spacing(--value(number));
37
37
  }
38
38
 
39
39
  @utility rounded-l-* {
40
- border-top-left-radius: calc(var(--spacing) --value(integer));
41
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
40
+ border-top-left-radius: --spacing(--value(number));
41
+ border-bottom-left-radius: --spacing(--value(number));
42
42
  }
43
43
 
44
44
  @utility rounded-r-* {
45
- border-top-right-radius: calc(var(--spacing) --value(integer));
46
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
45
+ border-top-right-radius: --spacing(--value(number));
46
+ border-bottom-right-radius: --spacing(--value(number));
47
47
  }
48
48
 
49
49
  @utility rounded-tl-* {
50
- border-top-left-radius: calc(var(--spacing) --value(integer));
50
+ border-top-left-radius: --spacing(--value(number));
51
51
  }
52
52
 
53
53
  @utility rounded-tr-* {
54
- border-top-right-radius: calc(var(--spacing) --value(integer));
54
+ border-top-right-radius: --spacing(--value(number));
55
55
  }
56
56
 
57
57
  @utility rounded-bl-* {
58
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
58
+ border-bottom-left-radius: --spacing(--value(number));
59
59
  }
60
60
 
61
61
  @utility rounded-br-* {
62
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
62
+ border-bottom-right-radius: --spacing(--value(number));
63
63
  }
64
64
 
65
65
  @utility rounded-x {
@@ -77,16 +77,16 @@
77
77
  @utility rounded-x-* {
78
78
  > :where(:first-child) {
79
79
  border-top-left-radius: --value([length]);
80
- border-top-left-radius: calc(var(--spacing) --value(integer));
80
+ border-top-left-radius: --spacing(--value(integer));
81
81
  border-bottom-left-radius: --value([length]);
82
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
82
+ border-bottom-left-radius: --spacing(--value(integer));
83
83
  }
84
84
 
85
85
  > :where(:last-child) {
86
86
  border-top-right-radius: --value([length]);
87
- border-top-right-radius: calc(var(--spacing) --value(integer));
87
+ border-top-right-radius: --spacing(--value(integer));
88
88
  border-bottom-right-radius: --value([length]);
89
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
89
+ border-bottom-right-radius: --spacing(--value(integer));
90
90
  }
91
91
  }
92
92
 
@@ -105,15 +105,15 @@
105
105
  @utility rounded-y-* {
106
106
  > :first-child {
107
107
  border-top-left-radius: --value([length]);
108
- border-top-left-radius: calc(var(--spacing) --value(integer));
108
+ border-top-left-radius: --spacing(--value(integer));
109
109
  border-top-right-radius: --value([length]);
110
- border-top-right-radius: calc(var(--spacing) --value(integer));
110
+ border-top-right-radius: --spacing(--value(integer));
111
111
  }
112
112
 
113
113
  > :last-child {
114
114
  border-bottom-left-radius: --value([length]);
115
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
115
+ border-bottom-left-radius: --spacing(--value(integer));
116
116
  border-bottom-right-radius: --value([length]);
117
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
117
+ border-bottom-right-radius: --spacing(--value(integer));
118
118
  }
119
119
  }
package/src/tools/transitions.css CHANGED
@@ -8,35 +8,29 @@
8
8
  * Default transition properties and values *
9
9
  *********************/
10
10
  @utility transition-scaffold {
11
- & {
12
- --transition-values: var(--transition-duration) var(--transition-delay)
13
- var(--transition-easing);
14
- --transition-props:
15
- background, border, color, display, fill, opacity, outline, stroke,
16
- transform, translate, scale, rotate, skew, perspective;
17
- transition: var(--transition-values);
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, 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
- @apply transition-scaffold;
25
- --transition-props:
26
- backdrop-filter, background, border, color, display, fill, filter, gap,
27
- opacity, outline, overlay, stroke, transform, translate, scale, rotate,
28
- skew, perspective;
29
- }
21
+ @apply transition-scaffold;
22
+ --transition-props:
23
+ backdrop-filter, background, border-color, color, display, fill, filter,
24
+ gap, opacity, outline, overlay, stroke, transform, translate, scale, rotate,
25
+ skew, perspective;
30
26
  }
31
27
 
32
28
  @utility transition-svg {
33
- & {
34
- --transition-values: var(--transition-duration) var(--transition-delay)
35
- var(--transition-easing);
36
- --transition-props: opacity, fill, stroke;
37
- transition: var(--transition-values);
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 {
package/src/variables/harmonious-type.css ADDED
@@ -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
+ }