@thi.ng/meta-css 0.18.14 → 0.19.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/CHANGELOG.md +21 -1
- package/README.md +73 -82
- package/index.js +24 -24
- package/package.json +6 -6
- package/specs/_info.mcss.json +1 -1
- package/specs/a11y.mcss.json +2 -2
- package/specs/anim.mcss.json +25 -12
- package/specs/aspect.mcss.json +3 -3
- package/specs/background.mcss.json +6 -6
- package/specs/borders.mcss.json +25 -9
- package/specs/box-sizing.mcss.json +1 -1
- package/specs/color-ops.mcss.json +33 -112
- package/specs/colors.mcss.json +18 -18
- package/specs/content.mcss.json +1 -1
- package/specs/cursor.mcss.json +1 -1
- package/specs/dimensions.mcss.json +7 -7
- package/specs/display.mcss.json +4 -4
- package/specs/effects.mcss.json +2 -2
- package/specs/flex.mcss.json +4 -4
- package/specs/grids.mcss.json +6 -6
- package/specs/icons.mcss.json +2 -2
- package/specs/lists.mcss.json +1 -1
- package/specs/margins.mcss.json +7 -7
- package/specs/mask.mcss.json +2 -2
- package/specs/overflows.mcss.json +1 -1
- package/specs/positions.mcss.json +4 -4
- package/specs/print.mcss.json +1 -1
- package/specs/scroll.mcss.json +3 -3
- package/specs/selection.mcss.json +1 -1
- package/specs/shadows.mcss.json +3 -3
- package/specs/transform.mcss.json +1 -1
- package/specs/typography.mcss.json +25 -14
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/meta-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.19.0",
|
|
4
4
|
"description": "Data-driven CSS framework codegen, transpiler & bundler",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -46,18 +46,18 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@thi.ng/api": "^8.11.29",
|
|
48
48
|
"@thi.ng/args": "^2.3.71",
|
|
49
|
-
"@thi.ng/arrays": "^2.13.
|
|
49
|
+
"@thi.ng/arrays": "^2.13.1",
|
|
50
50
|
"@thi.ng/checks": "^3.7.9",
|
|
51
51
|
"@thi.ng/compare": "^2.4.21",
|
|
52
52
|
"@thi.ng/errors": "^2.5.35",
|
|
53
53
|
"@thi.ng/file-io": "^2.1.38",
|
|
54
|
-
"@thi.ng/hiccup-css": "^2.7.
|
|
54
|
+
"@thi.ng/hiccup-css": "^2.7.52",
|
|
55
55
|
"@thi.ng/logger": "^3.1.10",
|
|
56
56
|
"@thi.ng/memoize": "^4.0.19",
|
|
57
|
-
"@thi.ng/rstream": "^9.2.
|
|
57
|
+
"@thi.ng/rstream": "^9.2.24",
|
|
58
58
|
"@thi.ng/strings": "^3.9.15",
|
|
59
59
|
"@thi.ng/text-format": "^2.2.34",
|
|
60
|
-
"@thi.ng/transducers": "^9.4.
|
|
60
|
+
"@thi.ng/transducers": "^9.4.3"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@types/node": "^22.15.21",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"status": "alpha",
|
|
114
114
|
"year": 2023
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "7d0ebe53d3cbe515b70645eabf5b31918d02329d\n"
|
|
117
117
|
}
|
package/specs/_info.mcss.json
CHANGED
package/specs/a11y.mcss.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"specs": [
|
|
3
3
|
{
|
|
4
|
-
"doc": { "group": "accessibility" },
|
|
5
4
|
"name": "screen-reader",
|
|
5
|
+
"doc": { "group": "accessibility" },
|
|
6
6
|
"props": {
|
|
7
7
|
"position": "absolute",
|
|
8
8
|
"padding": 0,
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"values": [""]
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
|
-
"doc": { "group": "accessibility" },
|
|
20
19
|
"name": "screen-reader-focus",
|
|
20
|
+
"doc": { "group": "accessibility" },
|
|
21
21
|
"props": {
|
|
22
22
|
"position": "static",
|
|
23
23
|
"width": "auto",
|
package/specs/anim.mcss.json
CHANGED
|
@@ -16,36 +16,36 @@
|
|
|
16
16
|
},
|
|
17
17
|
"specs": [
|
|
18
18
|
{
|
|
19
|
+
"name": "anim-<v>",
|
|
19
20
|
"doc": {
|
|
20
21
|
"group": "animation / transition",
|
|
21
22
|
"desc": "direction"
|
|
22
23
|
},
|
|
23
|
-
"name": "anim-<v>",
|
|
24
24
|
"props": "animation-direction",
|
|
25
25
|
"values": ["normal", "reverse", "alternate", "alternate-reverse"]
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
|
-
"doc": { "group": "animation / transition" },
|
|
29
28
|
"name": "anim-<k>",
|
|
29
|
+
"doc": { "group": "animation / transition" },
|
|
30
30
|
"props": "animation-play-state",
|
|
31
31
|
"values": { "pause": "paused", "play": "running" }
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
|
+
"name": "<vid>-<v>",
|
|
34
35
|
"doc": {
|
|
35
36
|
"group": "animation / transition",
|
|
36
37
|
"desc": "timing function"
|
|
37
38
|
},
|
|
38
|
-
"name": "<vid>-<v>",
|
|
39
39
|
"props": "<var>-timing-function",
|
|
40
40
|
"values": ["ease", "ease-in", "ease-out", "ease-in-out", "linear"],
|
|
41
41
|
"vars": ["anim", "transition"]
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
+
"name": "transition-<k>",
|
|
44
45
|
"doc": {
|
|
45
46
|
"group": "animation / transition",
|
|
46
47
|
"desc": "<v>"
|
|
47
48
|
},
|
|
48
|
-
"name": "transition-<k>",
|
|
49
49
|
"props": "transition-property",
|
|
50
50
|
"values": {
|
|
51
51
|
"all": "all",
|
|
@@ -59,34 +59,48 @@
|
|
|
59
59
|
],
|
|
60
60
|
"templates": [
|
|
61
61
|
{
|
|
62
|
+
"name": "fade-<vid>",
|
|
62
63
|
"doc": {
|
|
63
64
|
"group": "animation / transition",
|
|
64
65
|
"args": ["duration: in seconds"],
|
|
65
66
|
"desc": "Animation to change opacity"
|
|
66
67
|
},
|
|
67
|
-
"name": "fade-<vid>",
|
|
68
68
|
"props": { "animation": "fade-<vid> {0}s ease-in-out forwards" },
|
|
69
69
|
"vars": ["in", "out"]
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
+
"name": "bg-anim",
|
|
72
73
|
"doc": {
|
|
73
74
|
"group": "animation / transition",
|
|
74
75
|
"args": ["duration: in seconds"],
|
|
75
76
|
"desc": "Transition to tween background color"
|
|
76
77
|
},
|
|
77
|
-
"name": "bg-anim",
|
|
78
78
|
"props": { "transition": "{0}s background-color ease-in-out" }
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
|
+
"name": "tween-colors",
|
|
81
82
|
"doc": {
|
|
82
83
|
"group": "animation / transition",
|
|
83
84
|
"args": ["duration: in seconds"],
|
|
84
|
-
"desc": "
|
|
85
|
+
"desc": "Transition tweening color, background-color, border-color"
|
|
85
86
|
},
|
|
87
|
+
"props": {
|
|
88
|
+
"transition-property": "color, background-color, border-color",
|
|
89
|
+
"transition-duration": "{0}s",
|
|
90
|
+
"transition-timing-function": "ease-in-out"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
86
94
|
"name": "spin",
|
|
95
|
+
"doc": {
|
|
96
|
+
"group": "animation / transition",
|
|
97
|
+
"args": ["duration: in seconds"],
|
|
98
|
+
"desc": "Animation which rotates element a full turn, looping indefinitely"
|
|
99
|
+
},
|
|
87
100
|
"props": { "animation": "spin {0}s linear infinite" }
|
|
88
101
|
},
|
|
89
102
|
{
|
|
103
|
+
"name": "shrink",
|
|
90
104
|
"doc": {
|
|
91
105
|
"group": "animation / transition",
|
|
92
106
|
"args": [
|
|
@@ -95,48 +109,47 @@
|
|
|
95
109
|
],
|
|
96
110
|
"desc": "Animation which shrinks the height from given initial value to zero. Target element must NOT have padding (use a wrapper if necessary)."
|
|
97
111
|
},
|
|
98
|
-
"name": "shrink",
|
|
99
112
|
"props": {
|
|
100
113
|
"--mcss-shrink-size": "{1}",
|
|
101
114
|
"animation": "shrink {0}s ease-out forwards"
|
|
102
115
|
}
|
|
103
116
|
},
|
|
104
117
|
{
|
|
118
|
+
"name": "<vid>-duration",
|
|
105
119
|
"doc": {
|
|
106
120
|
"group": "animation / transition",
|
|
107
121
|
"args": ["duration: time (in seconds)"]
|
|
108
122
|
},
|
|
109
|
-
"name": "<vid>-duration",
|
|
110
123
|
"props": "<var>-duration",
|
|
111
124
|
"unit": "second",
|
|
112
125
|
"vars": ["anim", "transition"]
|
|
113
126
|
},
|
|
114
127
|
{
|
|
128
|
+
"name": "<vid>-delay",
|
|
115
129
|
"doc": {
|
|
116
130
|
"group": "animation / transition",
|
|
117
131
|
"args": ["delay: time (in seconds)"]
|
|
118
132
|
},
|
|
119
|
-
"name": "<vid>-delay",
|
|
120
133
|
"props": "<var>-delay",
|
|
121
134
|
"unit": "second",
|
|
122
135
|
"vars": ["anim", "transition"]
|
|
123
136
|
},
|
|
124
137
|
{
|
|
138
|
+
"name": "<vid>-steps",
|
|
125
139
|
"doc": {
|
|
126
140
|
"group": "animation / transition",
|
|
127
141
|
"desc": "Sets <var>-timing-function to `steps(num)`",
|
|
128
142
|
"args": ["num: number of steps"]
|
|
129
143
|
},
|
|
130
|
-
"name": "<vid>-steps",
|
|
131
144
|
"props": { "<var>-timing-function": "steps({0})" },
|
|
132
145
|
"vars": ["anim", "transition"]
|
|
133
146
|
},
|
|
134
147
|
{
|
|
148
|
+
"name": "anim-iter",
|
|
135
149
|
"doc": {
|
|
136
150
|
"group": "animation / transition",
|
|
137
151
|
"args": ["iter: number of iterations"]
|
|
138
152
|
},
|
|
139
|
-
"name": "anim-iter",
|
|
140
153
|
"props": "animation-iteration-count"
|
|
141
154
|
}
|
|
142
155
|
]
|
package/specs/aspect.mcss.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"specs": [
|
|
3
3
|
{
|
|
4
|
+
"name": "bg-aspect-ratio-object",
|
|
4
5
|
"doc": {
|
|
5
6
|
"group": "aspect ratios",
|
|
6
7
|
"desc": "To be used on the element forming the background of a `bg-aspect-ratio()` parent/wrapper"
|
|
7
8
|
},
|
|
8
|
-
"name": "bg-aspect-ratio-object",
|
|
9
9
|
"props": {
|
|
10
10
|
"position": "absolute",
|
|
11
11
|
"top": 0,
|
|
@@ -21,21 +21,21 @@
|
|
|
21
21
|
],
|
|
22
22
|
"templates": [
|
|
23
23
|
{
|
|
24
|
+
"name": "aspect-ratio",
|
|
24
25
|
"doc": {
|
|
25
26
|
"group": "aspect ratios",
|
|
26
27
|
"desc": "Sets `aspect-ratio` CSS property",
|
|
27
28
|
"args": ["width: aspect width", "height: aspect height"]
|
|
28
29
|
},
|
|
29
|
-
"name": "aspect-ratio",
|
|
30
30
|
"props": { "aspect-ratio": "{0}/{1}" }
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
+
"name": "bg-aspect-ratio",
|
|
33
34
|
"doc": {
|
|
34
35
|
"group": "aspect ratios",
|
|
35
36
|
"desc": "Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child element.",
|
|
36
37
|
"args": ["width: aspect width", "height: aspect height"]
|
|
37
38
|
},
|
|
38
|
-
"name": "bg-aspect-ratio",
|
|
39
39
|
"props": {
|
|
40
40
|
"height": 0,
|
|
41
41
|
"position": "relative",
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"specs": [
|
|
3
3
|
{
|
|
4
|
-
"doc": { "group": "background" },
|
|
5
4
|
"name": "bg-<v>",
|
|
5
|
+
"doc": { "group": "background" },
|
|
6
6
|
"props": "background-size",
|
|
7
7
|
"values": ["cover", "contain"]
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
|
-
"doc": { "group": "background", "desc": "<v>" },
|
|
11
10
|
"name": "bg-pos-<k>",
|
|
11
|
+
"doc": { "group": "background", "desc": "<v>" },
|
|
12
12
|
"props": "background-position",
|
|
13
13
|
"values": {
|
|
14
14
|
"n": "top",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"doc": { "group": "background", "desc": "<v>" },
|
|
27
26
|
"name": "bg-repeat<k>",
|
|
27
|
+
"doc": { "group": "background", "desc": "<v>" },
|
|
28
28
|
"props": "background-repeat<k>",
|
|
29
29
|
"values": {
|
|
30
30
|
"-x": "repeat-x",
|
|
@@ -38,25 +38,25 @@
|
|
|
38
38
|
],
|
|
39
39
|
"templates": [
|
|
40
40
|
{
|
|
41
|
-
"doc": { "group": "background", "args": ["url: image URL"] },
|
|
42
41
|
"name": "bg-image",
|
|
42
|
+
"doc": { "group": "background", "args": ["url: image URL"] },
|
|
43
43
|
"props": "background-image",
|
|
44
44
|
"unit": "url"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
|
+
"name": "bg-pos",
|
|
47
48
|
"doc": {
|
|
48
49
|
"group": "background",
|
|
49
50
|
"args": ["body: CSS value/definition"]
|
|
50
51
|
},
|
|
51
|
-
"name": "bg-pos",
|
|
52
52
|
"props": "background-position"
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
|
+
"name": "bg-size",
|
|
55
56
|
"doc": {
|
|
56
57
|
"group": "background",
|
|
57
58
|
"args": ["body: CSS value/definition"]
|
|
58
59
|
},
|
|
59
|
-
"name": "bg-size",
|
|
60
60
|
"props": "background-size"
|
|
61
61
|
}
|
|
62
62
|
]
|
package/specs/borders.mcss.json
CHANGED
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
},
|
|
6
6
|
"specs": [
|
|
7
7
|
{
|
|
8
|
-
"doc": { "group": "border radius", "desc": "<v>" },
|
|
9
8
|
"name": "br<k>",
|
|
9
|
+
"doc": { "group": "border radius", "desc": "<v>" },
|
|
10
10
|
"props": "border-radius",
|
|
11
11
|
"values": "borders-r",
|
|
12
12
|
"unit": "rem"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
|
-
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
16
15
|
"name": "br<vid><k>",
|
|
16
|
+
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
17
17
|
"props": {
|
|
18
18
|
"border-top<var>-radius": "<v>",
|
|
19
19
|
"border-bottom<var>-radius": "<v>"
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"vars": ["l", "r"]
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
27
26
|
"name": "br<vid><k>",
|
|
27
|
+
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
28
28
|
"props": {
|
|
29
29
|
"border<var>-left-radius": "<v>",
|
|
30
30
|
"border<var>-right-radius": "<v>"
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
"vars": ["t", "b"]
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"doc": { "group": "border radius", "desc": "<v>" },
|
|
38
37
|
"name": "br-<k>",
|
|
38
|
+
"doc": { "group": "border radius", "desc": "<v>" },
|
|
39
39
|
"props": "border-radius",
|
|
40
40
|
"values": { "100": "100%", "pill": "9999px" }
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
44
43
|
"name": "br-pill-<vid>",
|
|
44
|
+
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
45
45
|
"props": {
|
|
46
46
|
"border-top<var>-radius": "<v>",
|
|
47
47
|
"border-bottom<var>-radius": "<v>"
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"vars": ["l", "r"]
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
|
-
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
55
54
|
"name": "br-pill-<vid>",
|
|
55
|
+
"doc": { "group": "border radius", "desc": "<var> <v>" },
|
|
56
56
|
"props": {
|
|
57
57
|
"border<var>-left-radius": "<v>",
|
|
58
58
|
"border<var>-right-radius": "<v>"
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"vars": ["t", "b"]
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
|
-
"doc": { "group": "border width", "desc": "<var> <v>" },
|
|
66
65
|
"name": "bw<vid><k>",
|
|
66
|
+
"doc": { "group": "border width", "desc": "<var> <v>" },
|
|
67
67
|
"props": {
|
|
68
68
|
"border<var>-style": "solid",
|
|
69
69
|
"border<var>-width": "<v>"
|
|
@@ -73,15 +73,31 @@
|
|
|
73
73
|
"vars": ["", "t", "r", "b", "l"]
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
|
-
"doc": { "group": "border width", "desc": "<var> <v>" },
|
|
77
76
|
"name": "bw<vid>-<v>px",
|
|
77
|
+
"doc": { "group": "border width", "desc": "<var> <v>" },
|
|
78
78
|
"props": {
|
|
79
79
|
"border<var>-style": "solid",
|
|
80
80
|
"border<var>-width": "<v>"
|
|
81
81
|
},
|
|
82
|
-
"values": [1],
|
|
82
|
+
"values": [1, 2, 4],
|
|
83
83
|
"unit": "px",
|
|
84
84
|
"vars": ["", "t", "r", "b", "l"]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"name": "bs-<v>",
|
|
88
|
+
"doc": { "group": "border style" },
|
|
89
|
+
"props": "border-style",
|
|
90
|
+
"values": [
|
|
91
|
+
"none",
|
|
92
|
+
"dashed",
|
|
93
|
+
"dotted",
|
|
94
|
+
"solid",
|
|
95
|
+
"double",
|
|
96
|
+
"groove",
|
|
97
|
+
"ridge",
|
|
98
|
+
"inset",
|
|
99
|
+
"outset"
|
|
100
|
+
]
|
|
85
101
|
}
|
|
86
102
|
]
|
|
87
103
|
}
|
|
@@ -1,159 +1,80 @@
|
|
|
1
1
|
{
|
|
2
2
|
"templates": [
|
|
3
3
|
{
|
|
4
|
-
"
|
|
5
|
-
"group": "color definitions",
|
|
6
|
-
"desc": "Defines a rgb() color variable with given name and additional derived vars for each channel (e.g. `--name-red`). Use `adjust-rgb()` to create derived versions from this base color.",
|
|
7
|
-
"args": [
|
|
8
|
-
"name: variable name (without `--` prefix)",
|
|
9
|
-
"red: [0,255] range",
|
|
10
|
-
"green: [0,255] range",
|
|
11
|
-
"blue: [0,255] range",
|
|
12
|
-
"alpha: in [0,1] range"
|
|
13
|
-
]
|
|
14
|
-
},
|
|
15
|
-
"name": "def-rgb",
|
|
16
|
-
"props": {
|
|
17
|
-
"--{0}-red": "{1}",
|
|
18
|
-
"--{0}-green": "{2}",
|
|
19
|
-
"--{0}-blue": "{3}",
|
|
20
|
-
"--{0}-alpha": "{4}",
|
|
21
|
-
"--{0}": "rgb(var(--{0}-red) var(--{0}-green) var(--{0}-blue)/var(--{0}-alpha))"
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"name": "adjust-rgb",
|
|
4
|
+
"name": "adjust-color",
|
|
26
5
|
"doc": {
|
|
27
6
|
"group": "color adjustment",
|
|
28
|
-
"desc": "Assigns an adjusted version of
|
|
7
|
+
"desc": "Assigns an adjusted version of `base` color to new variable `name`.",
|
|
29
8
|
"args": [
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
9
|
+
"name: new var name (without `--` prefix)",
|
|
10
|
+
"base: color var (without `--` prefix)",
|
|
11
|
+
"l: luminance offset",
|
|
12
|
+
"c: chroma offset",
|
|
13
|
+
"h: hue offset",
|
|
14
|
+
"a: alpha offset"
|
|
36
15
|
]
|
|
37
16
|
},
|
|
38
17
|
"props": {
|
|
39
|
-
"{0}": "
|
|
18
|
+
"--{0}": "oklch(from var(--{1}) calc(l + {2}) calc(c + {3}) calc(h + {4}) / calc(a + {5}))"
|
|
40
19
|
}
|
|
41
20
|
},
|
|
42
21
|
{
|
|
43
|
-
"
|
|
44
|
-
"group": "color definitions",
|
|
45
|
-
"desc": "Defines a hsl() color variable with given name and additional derived vars for each channel (e.g. `--name-hue`). Use `adjust-hsl()` to create derived versions from this base color.",
|
|
46
|
-
"args": [
|
|
47
|
-
"name: variable name (without `--` prefix)",
|
|
48
|
-
"hue: in degrees",
|
|
49
|
-
"sat: in percent",
|
|
50
|
-
"lum: in percent",
|
|
51
|
-
"alpha: in [0,1] range"
|
|
52
|
-
]
|
|
53
|
-
},
|
|
54
|
-
"name": "def-hsl",
|
|
55
|
-
"props": {
|
|
56
|
-
"--{0}-hue": "{1}",
|
|
57
|
-
"--{0}-sat": "{2}%",
|
|
58
|
-
"--{0}-lum": "{3}%",
|
|
59
|
-
"--{0}-alpha": "{4}",
|
|
60
|
-
"--{0}": "hsl(var(--{0}-hue) var(--{0}-sat) var(--{0}-lum)/var(--{0}-alpha))"
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
"name": "adjust-hsl",
|
|
22
|
+
"name": "lighten-color",
|
|
65
23
|
"doc": {
|
|
66
24
|
"group": "color adjustment",
|
|
67
|
-
"desc": "Assigns an adjusted version of
|
|
68
|
-
"args": [
|
|
69
|
-
"prop: CSS target property",
|
|
70
|
-
"name: color variable name (without `--` prefix)",
|
|
71
|
-
"hue: offset in degrees",
|
|
72
|
-
"sat: factor",
|
|
73
|
-
"lum: factor",
|
|
74
|
-
"alpha: factor"
|
|
75
|
-
]
|
|
76
|
-
},
|
|
77
|
-
"props": {
|
|
78
|
-
"{0}": "hsl(calc(var(--{1}-hue) + {2}) calc(var(--{1}-sat)*{3}) calc(var(--{1}-lum)*{4})/calc(var(--{1}-alpha)*{5}))"
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
"doc": {
|
|
83
|
-
"group": "color definitions",
|
|
84
|
-
"desc": "Defines a lch() color variable with given name and additional derived vars for each channel (e.g. `--name-hue`). Use `adjust-lch()` to create derived versions from this base color.",
|
|
25
|
+
"desc": "Assigns an luminance-adjusted version of `base` color to new variable `name`.",
|
|
85
26
|
"args": [
|
|
86
|
-
"name:
|
|
87
|
-
"
|
|
88
|
-
"
|
|
89
|
-
"hue: in degrees",
|
|
90
|
-
"alpha: in [0,1] range"
|
|
27
|
+
"name: new var name (without `--` prefix)",
|
|
28
|
+
"base: color var (without `--` prefix)",
|
|
29
|
+
"l: luminance offset"
|
|
91
30
|
]
|
|
92
31
|
},
|
|
93
|
-
"name": "def-lch",
|
|
94
32
|
"props": {
|
|
95
|
-
"--{0}
|
|
96
|
-
"--{0}-chroma": "{2}%",
|
|
97
|
-
"--{0}-hue": "{3}",
|
|
98
|
-
"--{0}-alpha": "{4}",
|
|
99
|
-
"--{0}": "lch(var(--{0}-luma) var(--{0}-chroma) var(--{0}-hue)/var(--{0}-alpha))"
|
|
33
|
+
"--{0}": "oklch(from var(--{1}) calc(l + {2}) c h / a)"
|
|
100
34
|
}
|
|
101
35
|
},
|
|
102
36
|
{
|
|
103
|
-
"name": "
|
|
37
|
+
"name": "saturate-color",
|
|
104
38
|
"doc": {
|
|
105
39
|
"group": "color adjustment",
|
|
106
|
-
"desc": "Assigns an adjusted version of
|
|
40
|
+
"desc": "Assigns an chroma-adjusted version of `base` color to new variable `name`.",
|
|
107
41
|
"args": [
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
"chroma: factor",
|
|
112
|
-
"hue: offset in degrees",
|
|
113
|
-
"alpha: factor"
|
|
42
|
+
"name: new var name (without `--` prefix)",
|
|
43
|
+
"base: color var (without `--` prefix)",
|
|
44
|
+
"l: chroma offset"
|
|
114
45
|
]
|
|
115
46
|
},
|
|
116
47
|
"props": {
|
|
117
|
-
"{0}": "
|
|
48
|
+
"--{0}": "oklch(from var(--{1}) l calc(c + {2}) h / a)"
|
|
118
49
|
}
|
|
119
50
|
},
|
|
120
51
|
{
|
|
52
|
+
"name": "rotate-color",
|
|
121
53
|
"doc": {
|
|
122
|
-
"group": "color
|
|
123
|
-
"desc": "
|
|
54
|
+
"group": "color adjustment",
|
|
55
|
+
"desc": "Assigns an hue-rotated version of `base` color to new variable `name`.",
|
|
124
56
|
"args": [
|
|
125
|
-
"name:
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
"hue: in degrees",
|
|
129
|
-
"alpha: in [0,1] range"
|
|
57
|
+
"name: new var name (without `--` prefix)",
|
|
58
|
+
"base: color var (without `--` prefix)",
|
|
59
|
+
"h: hue offset"
|
|
130
60
|
]
|
|
131
61
|
},
|
|
132
|
-
"name": "def-oklch",
|
|
133
62
|
"props": {
|
|
134
|
-
"--{0}
|
|
135
|
-
"--{0}-chroma": "{2}%",
|
|
136
|
-
"--{0}-hue": "{3}",
|
|
137
|
-
"--{0}-alpha": "{4}",
|
|
138
|
-
"--{0}": "oklch(var(--{0}-luma) var(--{0}-chroma) var(--{0}-hue)/var(--{0}-alpha))"
|
|
63
|
+
"--{0}": "oklch(from var(--{1}) l c calc(h + {2}) / a)"
|
|
139
64
|
}
|
|
140
65
|
},
|
|
141
66
|
{
|
|
142
|
-
"name": "
|
|
67
|
+
"name": "with-alpha",
|
|
143
68
|
"doc": {
|
|
144
69
|
"group": "color adjustment",
|
|
145
|
-
"desc": "Assigns an adjusted version of a `def-oklch()` defined color to given CSS property.",
|
|
146
70
|
"args": [
|
|
147
|
-
"
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
"chroma: factor",
|
|
151
|
-
"hue: offset in degrees",
|
|
152
|
-
"alpha: alpha factor"
|
|
71
|
+
"name: new var name (without `--` prefix)",
|
|
72
|
+
"base: color var (without `--` prefix)",
|
|
73
|
+
"a: alpha offset"
|
|
153
74
|
]
|
|
154
75
|
},
|
|
155
76
|
"props": {
|
|
156
|
-
"{0}": "oklch(
|
|
77
|
+
"--{0}": "oklch(from var(--{1}) l c h / {2} )"
|
|
157
78
|
}
|
|
158
79
|
}
|
|
159
80
|
]
|