@splendidlabz/styles 4.10.1 → 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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/effects/index.css +0 -1
  3. package/src/tools/interact.css +8 -15
  4. package/src/tools/outlines.css +16 -21
  5. package/src/tools/pigment.css +11 -15
  6. package/src/tools/scaffolds.css +16 -5
  7. package/src/tools/transitions.css +5 -4
  8. package/src/type/font-position.css +9 -11
  9. package/src/variables/variables.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@splendidlabz/styles",
3
- "version": "4.10.1",
3
+ "version": "4.11.0",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "homepage": "https://splendidlabz.com/docs/styles",
package/src/effects/index.css CHANGED
@@ -2,7 +2,6 @@
2
2
  @import './gradients.css';
3
3
  @import './fancybox.css';
4
4
  @import './bezel.css';
5
- @import './testgb.css';
6
5
  @import './highlight.css';
7
6
  @import './shadows.css';
8
7
  @import './text.css';
package/src/tools/interact.css CHANGED
@@ -14,22 +14,15 @@
14
14
 
15
15
  @custom-variant interact-within {
16
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),
17
+ &:focus-within,
25
18
  &:has(
26
- .selected,
27
- .checked,
28
- [aria-current],
29
- [aria-selected='true'],
30
- [aria-pressed='true'],
31
- [aria-expanded='true']
32
- ) {
19
+ .selected,
20
+ .checked,
21
+ [aria-current],
22
+ [aria-selected='true'],
23
+ [aria-pressed='true'],
24
+ [aria-expanded='true']
25
+ ) {
33
26
  @slot;
34
27
  }
35
28
  }
package/src/tools/outlines.css CHANGED
@@ -4,29 +4,26 @@
4
4
  *********************/
5
5
 
6
6
  @utility outline-scaffold {
7
- & {
8
- outline: var(--outline-width) var(--outline-style)
9
- var(--outline-color, transparent);
10
- outline-offset: var(--outline-offset);
7
+ outline: var(--outline-width) var(--outline-style)
8
+ var(--outline-color, transparent);
9
+ outline-offset: var(--outline-offset);
11
10
 
12
- &:focus-visible {
13
- outline-color: var(--outline-focus-color);
14
- }
11
+ &:focus-visible {
12
+ outline-color: var(--outline-focus-color);
15
13
  }
16
14
  }
17
15
 
18
16
  @utility focus-within {
19
- & {
20
- outline: var(--outline-width) var(--outline-style) transparent;
21
- outline-offset: var(--outline-offset);
17
+ outline: var(--outline-width) var(--outline-style) transparent;
18
+ outline-offset: var(--outline-offset);
22
19
 
23
- &:focus-within {
24
- outline-color: var(--outline-focus-color);
25
- }
20
+ &:focus-within {
21
+ outline-color: var(--outline-focus-color);
22
+ }
26
23
 
27
- > * {
28
- --outline-color: transparent;
29
- }
24
+ /* Removes all outlines within the element */
25
+ * {
26
+ --outline-focus-color: transparent;
30
27
  }
31
28
  }
32
29
 
@@ -37,9 +34,7 @@
37
34
  - content-box is necessary, if not present, box will be cut on the right side
38
35
  *********************/
39
36
  @utility preserve-outlines {
40
- & {
41
- box-sizing: content-box;
42
- margin: calc(var(--outline-width) * -1);
43
- padding: calc(var(--outline-width));
44
- }
37
+ box-sizing: content-box;
38
+ margin: calc(var(--outline-width) * -1);
39
+ padding: calc(var(--outline-width));
45
40
  }
package/src/tools/pigment.css CHANGED
@@ -30,27 +30,23 @@ Usage with the Fill System
30
30
  * Pigment scaffolds *
31
31
  *********************/
32
32
  @utility pigment-scaffold {
33
- & {
34
- @apply transition-scaffold;
35
- --_bgc: var(--bg-color);
36
- --_tc: var(--text-color, currentcolor);
37
- --_bc: var(--border-color, currentcolor);
38
- border-color: var(--_bc, currentcolor);
39
- color: var(--_tc);
40
- background: var(--_bgc);
41
- }
33
+ @apply transition-scaffold;
34
+ --_bgc: var(--bg-color);
35
+ --_tc: var(--text-color, currentcolor);
36
+ --_bc: var(--border-color, currentcolor);
37
+ border-color: var(--_bc, currentcolor);
38
+ color: var(--_tc);
39
+ background: var(--_bgc);
42
40
  }
43
41
 
44
42
  @utility pigment-svg-scaffold {
45
43
  --_fc: var(--fill-color);
46
44
  --_sc: var(--stroke-color, var(--text-color, currentcolor));
47
45
 
48
- & {
49
- :where(svg path) {
50
- @apply transition-scaffold;
51
- fill: var(--_fc, revert-layer);
52
- stroke: var(--_sc, currentcolor);
53
- }
46
+ :where(svg path) {
47
+ @apply transition-scaffold;
48
+ fill: var(--_fc, revert-layer);
49
+ stroke: var(--_sc, currentcolor);
54
50
  }
55
51
  }
56
52
 
package/src/tools/scaffolds.css CHANGED
@@ -17,11 +17,14 @@
17
17
  border-radius: var(--radius);
18
18
  }
19
19
 
20
- @utility radius-* {
21
- --radius: --value([length]);
22
- --radius: --spacing(--value(number));
23
- }
24
-
20
+ /* @utility border-* {
21
+ border-width: --spacing(--value(number));
22
+ border-width: --value([length]);
23
+ } */
24
+
25
+ /*********************
26
+ * Rounded *
27
+ *********************/
25
28
  @utility rounded-* {
26
29
  border-radius: --spacing(--value(number));
27
30
  }
@@ -117,3 +120,11 @@
117
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, 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, color, display, fill, filter,
24
- gap, 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;