@splendidlabz/styles 4.8.1 → 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.
Files changed (16) hide show
  1. package/package.json +3 -3
  2. package/src/components/css/prose.css +60 -68
  3. package/src/effects/elevation.css +303 -214
  4. package/src/effects/fancybox.css +31 -33
  5. package/src/effects/frosted-glass.css +27 -31
  6. package/src/effects/gradients.css +35 -31
  7. package/src/effects/shadows.css +99 -18
  8. package/src/effects/text.css +0 -3
  9. package/src/layouts/micro/stack.css +59 -36
  10. package/src/layouts/position/nudge.css +3 -3
  11. package/src/layouts/position/pos.css +10 -14
  12. package/src/tools/index.css +1 -0
  13. package/src/tools/interact.css +29 -0
  14. package/src/tools/transitions.css +17 -23
  15. package/src/type/text-relative.css +2 -7
  16. package/src/variables/harmonious-type.css +47 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@splendidlabz/styles",
3
- "version": "4.8.1",
3
+ "version": "4.9.0",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "homepage": "https://splendidlabz.com/docs/styles",
@@ -14,7 +14,7 @@
14
14
  ".": "./src/styles.css",
15
15
  "./components": "./src/components/index.css",
16
16
  "./layouts": "./src/layouts/direct.css",
17
- "./layouts/no-tw": "./dist/no-tw/styles.css",
17
+ "./pigment": "./src/tools/pigment.css",
18
18
  "./scripts": "./scripts/index.js",
19
19
  "./scripts/*": "./scripts/*.js"
20
20
  },
@@ -29,7 +29,7 @@
29
29
  "@splendidlabz/utils": "*"
30
30
  },
31
31
  "devDependencies": {
32
- "@splendidlabz/stylelint-config": "3.1.2",
32
+ "@splendidlabz/stylelint-config": "3.1.3",
33
33
  "@tailwindcss/cli": "^4.2.2",
34
34
  "lightningcss-cli": "^1.32.0",
35
35
  "tailwindcss": "^4.2.2",
package/src/components/css/prose.css CHANGED
@@ -1,86 +1,78 @@
1
1
  @utility prose {
2
- & {
3
- display: flex;
4
- flex-flow: column;
5
- gap: 1lh;
6
- hanging-punctuation: first allow-end last;
7
-
8
- /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. */
9
- > * + :where(h2),
10
- > * + :where(astro-island, astro-slot) > :where(h2):first-child {
11
- margin-top: calc(var(--spacing) * 6);
12
- scroll-margin-block: calc(var(--spacing) * 6);
13
- }
14
-
15
- > * + :where(h3),
16
- > * + :where(astro-island, astro-slot) > :where(h3):first-child {
17
- margin-top: calc(var(--spacing) * 4);
18
- margin-bottom: calc(var(--spacing) * -2);
19
- scroll-margin-block: calc(var(--spacing) * 4);
20
- }
21
-
22
- > * + :where(h4, h5, h6),
23
- > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
24
- margin-top: calc(var(--spacing) * 4);
25
- margin-bottom: calc(var(--spacing) * -4);
26
- scroll-margin-block: calc(var(--spacing) * 4);
27
- }
28
-
29
- :where(ul) {
30
- list-style-type: initial;
31
- }
32
-
33
- /* Basic list styles */
34
- :where(ul, ol),
35
- > :where(astro-island, astro-slot) :where(ul, ol) {
36
- list-style-position: outside;
37
- margin-left: 2em;
2
+ display: flex;
3
+ flex-flow: column;
4
+ gap: 1lh;
5
+ hanging-punctuation: first allow-end last;
6
+
7
+ /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. */
8
+ > * + :where(h2),
9
+ > * + :where(astro-island, astro-slot) > :where(h2):first-child {
10
+ margin-top: calc(var(--spacing) * 6);
11
+ scroll-margin-block: calc(var(--spacing) * 6);
12
+ }
38
13
 
39
- :where(ul, ol) {
40
- margin-left: 0;
41
- padding-left: 2em;
42
- }
14
+ > * + :where(h3),
15
+ > * + :where(astro-island, astro-slot) > :where(h3):first-child {
16
+ margin-top: calc(var(--spacing) * 4);
17
+ scroll-margin-block: calc(var(--spacing) * 4);
18
+ }
43
19
 
44
- li {
45
- font-variant-numeric: lining-nums;
46
- }
20
+ > * + :where(h4, h5, h6),
21
+ > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
22
+ margin-top: calc(var(--spacing) * 2);
23
+ scroll-margin-block: calc(var(--spacing) * 2);
24
+ }
47
25
 
48
- li + li {
49
- margin-top: calc(var(--spacing));
50
- }
26
+ :where(ul) {
27
+ list-style-type: initial;
28
+ }
51
29
 
52
- li:has(li) + li {
53
- margin-top: calc(var(--spacing) * 2);
54
- }
30
+ /* Basic list styles */
31
+ :where(ul, ol),
32
+ > :where(astro-island, astro-slot) :where(ul, ol) {
33
+ list-style-position: outside;
34
+ margin-left: 2em;
55
35
 
56
- li > :where(ul, ol) {
57
- margin-top: calc(var(--spacing));
58
- }
36
+ :where(ul, ol) {
37
+ margin-left: 0;
38
+ padding-left: 1em;
59
39
  }
60
40
 
61
- :where(a) {
62
- text-decoration-line: underline;
41
+ li {
42
+ font-variant-numeric: lining-nums;
63
43
  }
64
44
 
65
- :where(> img),
66
- :where(> figure img) {
67
- border: 1px solid oklch(90% 0 0deg);
68
- border-radius: var(--radius);
45
+ li + li {
46
+ margin-top: calc(var(--spacing));
69
47
  }
70
48
 
71
- :where(> figure) {
72
- inline-size: fit-content;
73
- margin-inline: auto;
49
+ li > :where(ul, ol) {
50
+ margin-top: calc(var(--spacing));
74
51
  }
52
+ }
75
53
 
76
- :where(> figure figcaption) {
77
- contain: inline-size;
78
- }
54
+ :where(a) {
55
+ text-decoration-line: underline;
56
+ }
79
57
 
80
- :where(.fancylist) {
81
- margin-left: 1em;
82
- padding-left: 0;
83
- }
58
+ :where(> img),
59
+ :where(> figure img) {
60
+ border: 1px solid oklch(90% 0 0deg);
61
+ border-radius: var(--radius);
62
+ }
63
+
64
+ :where(> figure) {
65
+ inline-size: fit-content;
66
+ margin-inline: auto;
67
+ }
68
+
69
+ :where(> figure figcaption) {
70
+ contain: inline-size;
71
+ }
72
+
73
+ :where(.fancylist) {
74
+ margin-left: 1em;
75
+ padding-left: 0;
84
76
  }
85
77
  }
86
78