@splendidlabz/styles 4.9.0 → 4.11.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.
Files changed (28) hide show
  1. package/package.json +1 -1
  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/simple-svg.css +10 -13
  6. package/src/components/css/strikethrough.css +25 -0
  7. package/src/components/css/writing-mode.css +18 -22
  8. package/src/components/svelte/browserframe.css +4 -0
  9. package/src/effects/bezel.css +334 -0
  10. package/src/effects/fancybox.css +0 -3
  11. package/src/effects/gradients.css +59 -18
  12. package/src/effects/highlight.css +129 -10
  13. package/src/effects/index.css +1 -0
  14. package/src/effects/inner-border.css +8 -14
  15. package/src/effects/shadows.css +187 -33
  16. package/src/effects/testgb.css +372 -0
  17. package/src/effects/text.css +8 -40
  18. package/src/layouts/micro/breakout.css +7 -7
  19. package/src/layouts/micro/inner-spacing.css +6 -6
  20. package/src/layouts/position/nudge.css +3 -3
  21. package/src/tools/color.css +2 -2
  22. package/src/tools/interact.css +10 -11
  23. package/src/tools/outlines.css +16 -21
  24. package/src/tools/pigment.css +11 -15
  25. package/src/tools/scaffolds.css +38 -27
  26. package/src/tools/transitions.css +5 -4
  27. package/src/type/font-position.css +9 -11
  28. package/src/variables/variables.css +2 -2
package/src/tools/scaffolds.css CHANGED
@@ -17,49 +17,52 @@
17
17
  border-radius: var(--radius);
18
18
  }
19
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));
20
+ /* @utility border-* {
21
+ border-width: --spacing(--value(number));
22
+ border-width: --value([length]);
27
23
  } */
28
24
 
25
+ /*********************
26
+ * Rounded *
27
+ *********************/
28
+ @utility rounded-* {
29
+ border-radius: --spacing(--value(number));
30
+ }
31
+
29
32
  @utility rounded-t-* {
30
- border-top-left-radius: calc(var(--spacing) --value(integer));
31
- border-top-right-radius: calc(var(--spacing) --value(integer));
33
+ border-top-left-radius: --spacing(--value(number));
34
+ border-top-right-radius: --spacing(--value(number));
32
35
  }
33
36
 
34
37
  @utility rounded-b-* {
35
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
36
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
38
+ border-bottom-left-radius: --spacing(--value(number));
39
+ border-bottom-right-radius: --spacing(--value(number));
37
40
  }
38
41
 
39
42
  @utility rounded-l-* {
40
- border-top-left-radius: calc(var(--spacing) --value(integer));
41
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
43
+ border-top-left-radius: --spacing(--value(number));
44
+ border-bottom-left-radius: --spacing(--value(number));
42
45
  }
43
46
 
44
47
  @utility rounded-r-* {
45
- border-top-right-radius: calc(var(--spacing) --value(integer));
46
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
48
+ border-top-right-radius: --spacing(--value(number));
49
+ border-bottom-right-radius: --spacing(--value(number));
47
50
  }
48
51
 
49
52
  @utility rounded-tl-* {
50
- border-top-left-radius: calc(var(--spacing) --value(integer));
53
+ border-top-left-radius: --spacing(--value(number));
51
54
  }
52
55
 
53
56
  @utility rounded-tr-* {
54
- border-top-right-radius: calc(var(--spacing) --value(integer));
57
+ border-top-right-radius: --spacing(--value(number));
55
58
  }
56
59
 
57
60
  @utility rounded-bl-* {
58
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
61
+ border-bottom-left-radius: --spacing(--value(number));
59
62
  }
60
63
 
61
64
  @utility rounded-br-* {
62
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
65
+ border-bottom-right-radius: --spacing(--value(number));
63
66
  }
64
67
 
65
68
  @utility rounded-x {
@@ -77,16 +80,16 @@
77
80
  @utility rounded-x-* {
78
81
  > :where(:first-child) {
79
82
  border-top-left-radius: --value([length]);
80
- border-top-left-radius: calc(var(--spacing) --value(integer));
83
+ border-top-left-radius: --spacing(--value(integer));
81
84
  border-bottom-left-radius: --value([length]);
82
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
85
+ border-bottom-left-radius: --spacing(--value(integer));
83
86
  }
84
87
 
85
88
  > :where(:last-child) {
86
89
  border-top-right-radius: --value([length]);
87
- border-top-right-radius: calc(var(--spacing) --value(integer));
90
+ border-top-right-radius: --spacing(--value(integer));
88
91
  border-bottom-right-radius: --value([length]);
89
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
92
+ border-bottom-right-radius: --spacing(--value(integer));
90
93
  }
91
94
  }
92
95
 
@@ -105,15 +108,23 @@
105
108
  @utility rounded-y-* {
106
109
  > :first-child {
107
110
  border-top-left-radius: --value([length]);
108
- border-top-left-radius: calc(var(--spacing) --value(integer));
111
+ border-top-left-radius: --spacing(--value(integer));
109
112
  border-top-right-radius: --value([length]);
110
- border-top-right-radius: calc(var(--spacing) --value(integer));
113
+ border-top-right-radius: --spacing(--value(integer));
111
114
  }
112
115
 
113
116
  > :last-child {
114
117
  border-bottom-left-radius: --value([length]);
115
- border-bottom-left-radius: calc(var(--spacing) --value(integer));
118
+ border-bottom-left-radius: --spacing(--value(integer));
116
119
  border-bottom-right-radius: --value([length]);
117
- border-bottom-right-radius: calc(var(--spacing) --value(integer));
120
+ border-bottom-right-radius: --spacing(--value(integer));
118
121
  }
119
122
  }
123
+
124
+ /*********************
125
+ * Radius *
126
+ *********************/
127
+ @utility radius-* {
128
+ --radius: --value([length]);
129
+ --radius: --spacing(--value(number));
130
+ }
package/src/tools/transitions.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --transition-values: var(--transition-duration) var(--transition-delay)
12
12
  var(--transition-easing);
13
13
  --transition-props:
14
- background, border, color, display, fill, opacity, outline, stroke,
14
+ background-color, border-color, color, fill, stroke, opacity, outline,
15
15
  transform, translate, scale, rotate, skew, perspective;
16
16
  transition: var(--transition-values);
17
17
  transition-property: var(--transition-props);
@@ -20,9 +20,10 @@
20
20
  @utility transition-scaffold-extended {
21
21
  @apply transition-scaffold;
22
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;
23
+ backdrop-filter, background-color, border-color, color, display, fill,
24
+ filter, gap, opacity, outline, overlay, stroke, transform, translate, scale,
25
+ rotate, skew, perspective;
26
+ transition-behavior: allow-discrete;
26
27
  }
27
28
 
28
29
  @utility transition-svg {
package/src/type/font-position.css CHANGED
@@ -2,17 +2,15 @@
2
2
  --padding-block: 1em; */
3
3
 
4
4
  @utility font-position {
5
- & {
6
- > .font-position-adjust,
7
- &:not(:has(.font-position-adjust)) {
8
- padding-block: calc(
9
- var(--padding-block, 1em) * var(--font-position-adjust, 1)
10
- )
11
- calc(var(--padding-block, 1em) / var(--font-position-adjust, 1));
12
- }
5
+ > .font-position-adjust,
6
+ &:not(:has(.font-position-adjust)) {
7
+ padding-block: calc(
8
+ var(--padding-block, 1em) * var(--font-position-adjust, 1)
9
+ )
10
+ calc(var(--padding-block, 1em) / var(--font-position-adjust, 1));
11
+ }
13
12
 
14
- &:has(.font-position-adjust) {
15
- padding-block: 0;
16
- }
13
+ &:has(.font-position-adjust) {
14
+ padding-block: 0;
17
15
  }
18
16
  }
package/src/variables/variables.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --border-width: 1px;
11
11
  --border-style: solid;
12
12
  --border-color: currentcolor;
13
- --radius: 0.5rem;
13
+ --radius: calc(var(--spacing) * 2);
14
14
 
15
15
  /* Outline */
16
16
  --outline-width: 2px;
@@ -21,7 +21,7 @@
21
21
  /* Transition */
22
22
  --transition-duration: 200ms;
23
23
  --transition-delay: 0ms;
24
- --transition-easing: ease-in-out;
24
+ --transition-easing: ease-out;
25
25
 
26
26
  /* Forms */
27
27
  --input-font: inherit;