@thi.ng/meta-css 0.7.13 → 0.8.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.
- package/CHANGELOG.md +61 -1
- package/README.md +1252 -98
- package/index.js +6 -6
- package/package.json +11 -11
- package/specs/_info.mcss.json +5 -3
- package/specs/a11y.mcss.json +2 -2
- package/specs/anim.mcss.json +93 -28
- package/specs/aspect.mcss.json +27 -41
- package/specs/background.mcss.json +2 -2
- package/specs/borders.mcss.json +6 -6
- package/specs/color-ops.mcss.json +160 -0
- package/specs/colors.mcss.json +51 -64
- 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 +2 -2
- package/specs/flex.mcss.json +4 -4
- package/specs/grids.mcss.json +16 -5
- package/specs/icons.mcss.json +2 -2
- package/specs/lists.mcss.json +1 -1
- package/specs/margins.mcss.json +5 -5
- package/specs/normalize.mcss.json +1 -2
- package/specs/overflows.mcss.json +1 -1
- package/specs/positions.mcss.json +14 -3
- 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/typography.mcss.json +15 -15
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
{
|
|
2
|
+
"templates": [
|
|
3
|
+
{
|
|
4
|
+
"doc": {
|
|
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",
|
|
26
|
+
"doc": {
|
|
27
|
+
"group": "color adjustment",
|
|
28
|
+
"desc": "Assigns an adjusted version of a `def-rgb()`-defined color to given CSS property.",
|
|
29
|
+
"args": [
|
|
30
|
+
"prop: CSS target property",
|
|
31
|
+
"name: color variable name (without `--` prefix)",
|
|
32
|
+
"red: factor",
|
|
33
|
+
"green: factor",
|
|
34
|
+
"blue: factor",
|
|
35
|
+
"alpha: factor"
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
"props": {
|
|
39
|
+
"{0}": "rgb(calc(var(--{1}-red)*{2}) calc(var(--{1}-green)*{3}) calc(var(--{1}-blue)*{4})/calc(var(--{1}-alpha)*{5}))"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"doc": {
|
|
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",
|
|
65
|
+
"doc": {
|
|
66
|
+
"group": "color adjustment",
|
|
67
|
+
"desc": "Assigns an adjusted version of a `def-hsl()`-defined color to given CSS property.",
|
|
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.",
|
|
85
|
+
"args": [
|
|
86
|
+
"name: variable name",
|
|
87
|
+
"luma: in percent",
|
|
88
|
+
"chroma: in percent",
|
|
89
|
+
"hue: in degrees",
|
|
90
|
+
"alpha: in [0,1] range"
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
"name": "def-lch",
|
|
94
|
+
"props": {
|
|
95
|
+
"--{0}-luma": "{1}%",
|
|
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))"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"name": "adjust-lch",
|
|
104
|
+
"doc": {
|
|
105
|
+
"group": "color adjustment",
|
|
106
|
+
"desc": "Assigns an adjusted version of a `def-lch()` defined color to given CSS property.",
|
|
107
|
+
"args": [
|
|
108
|
+
"prop: CSS target property",
|
|
109
|
+
"name: color variable name (without `--` prefix)",
|
|
110
|
+
"luma: factor",
|
|
111
|
+
"chroma: factor",
|
|
112
|
+
"hue: offset in degrees",
|
|
113
|
+
"alpha: factor"
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
"props": {
|
|
117
|
+
"{0}": "lch(calc(var(--{1}-luma)*{2}) calc(var(--{1}-chroma)*{3}) calc(var(--{1}-hue) + {4})/calc(var(--{1}-alpha)*{5}))"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"doc": {
|
|
122
|
+
"group": "color definitions",
|
|
123
|
+
"desc": "Defines a oklch() color variable with given name and additional derived vars for each channel (e.g. `--name-hue`). Use `adjust-oklch()` to create derived versions from this base color.",
|
|
124
|
+
"args": [
|
|
125
|
+
"name: variable name",
|
|
126
|
+
"luma: in percent",
|
|
127
|
+
"chroma: in percent",
|
|
128
|
+
"hue: in degrees",
|
|
129
|
+
"alpha: in [0,1] range"
|
|
130
|
+
]
|
|
131
|
+
},
|
|
132
|
+
"name": "def-oklch",
|
|
133
|
+
"props": {
|
|
134
|
+
"--{0}-luma": "{1}%",
|
|
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))"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "adjust-oklch",
|
|
143
|
+
"doc": {
|
|
144
|
+
"group": "color adjustment",
|
|
145
|
+
"desc": "Assigns an adjusted version of a `def-oklch()` defined color to given CSS property.",
|
|
146
|
+
"args": [
|
|
147
|
+
"prop: CSS target property",
|
|
148
|
+
"name: color variable name (without `--` prefix)",
|
|
149
|
+
"luma: factor",
|
|
150
|
+
"chroma: factor",
|
|
151
|
+
"hue: offset in degrees",
|
|
152
|
+
"alpha: alpha factor"
|
|
153
|
+
]
|
|
154
|
+
},
|
|
155
|
+
"props": {
|
|
156
|
+
"{0}": "oklch(calc(var(--{1}-luma)*{2}) calc(var(--{1}-chroma)*{3}) calc(var(--{1}-hue) + {4})/calc(var(--{1}-alpha)*{5}))"
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
package/specs/colors.mcss.json
CHANGED
|
@@ -1,24 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"tables": {
|
|
3
|
-
"__var_comment": "16 custom CSS color slots",
|
|
4
|
-
"var-palette": [
|
|
5
|
-
"var(--color1)",
|
|
6
|
-
"var(--color2)",
|
|
7
|
-
"var(--color3)",
|
|
8
|
-
"var(--color4)",
|
|
9
|
-
"var(--color5)",
|
|
10
|
-
"var(--color6)",
|
|
11
|
-
"var(--color7)",
|
|
12
|
-
"var(--color8)",
|
|
13
|
-
"var(--color9)",
|
|
14
|
-
"var(--color10)",
|
|
15
|
-
"var(--color11)",
|
|
16
|
-
"var(--color12)",
|
|
17
|
-
"var(--color13)",
|
|
18
|
-
"var(--color14)",
|
|
19
|
-
"var(--color15)",
|
|
20
|
-
"var(--color16)"
|
|
21
|
-
],
|
|
22
3
|
"__grays_comment": "Tachyons CSS colors",
|
|
23
4
|
"grays": {
|
|
24
5
|
"black": "#000",
|
|
@@ -31,12 +12,12 @@
|
|
|
31
12
|
"moon-gray": "#ccc",
|
|
32
13
|
"light-gray": "#eee",
|
|
33
14
|
"near-white": "#f4f4f4",
|
|
34
|
-
"white": "#fff"
|
|
35
|
-
"transparent": "transparent"
|
|
15
|
+
"white": "#fff"
|
|
36
16
|
},
|
|
37
17
|
"__palette_comment": "Tachyons CSS colors",
|
|
38
18
|
"palette": {
|
|
39
|
-
"current": "
|
|
19
|
+
"current": "currentcolor",
|
|
20
|
+
"transparent": "transparent",
|
|
40
21
|
"dark-red": "#e7040f",
|
|
41
22
|
"red": "#ff4136",
|
|
42
23
|
"light-red": "#ff725c",
|
|
@@ -69,86 +50,57 @@
|
|
|
69
50
|
},
|
|
70
51
|
"specs": [
|
|
71
52
|
{
|
|
72
|
-
"
|
|
73
|
-
"name": "
|
|
74
|
-
"key": "i+1",
|
|
75
|
-
"props": { "border-color": "<v>" },
|
|
76
|
-
"values": "var-palette"
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"user": "colors",
|
|
80
|
-
"name": "b--color-<k>",
|
|
53
|
+
"doc": { "group": "border color", "desc": "<v>" },
|
|
54
|
+
"name": "border-color-<k>",
|
|
81
55
|
"props": "border-color",
|
|
82
56
|
"values": "palette"
|
|
83
57
|
},
|
|
84
58
|
{
|
|
85
|
-
"
|
|
86
|
-
"name": "
|
|
59
|
+
"doc": { "group": "border color", "desc": "<v>" },
|
|
60
|
+
"name": "border-color-<k>",
|
|
87
61
|
"props": "border-color",
|
|
88
62
|
"values": "grays"
|
|
89
63
|
},
|
|
90
64
|
{
|
|
91
|
-
"
|
|
92
|
-
"name": "color<k>",
|
|
93
|
-
"key": "i+1",
|
|
94
|
-
"props": { "color": "<v>" },
|
|
95
|
-
"values": "var-palette"
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
"user": "colors",
|
|
65
|
+
"doc": { "group": "colors", "desc": "<v>" },
|
|
99
66
|
"name": "color-<k>",
|
|
100
67
|
"props": "color",
|
|
101
68
|
"values": "palette"
|
|
102
69
|
},
|
|
103
70
|
{
|
|
104
|
-
"
|
|
71
|
+
"doc": { "group": "colors", "desc": "<v>" },
|
|
105
72
|
"name": "color-<k>",
|
|
106
73
|
"props": "color",
|
|
107
74
|
"values": "grays"
|
|
108
75
|
},
|
|
109
76
|
{
|
|
110
|
-
"
|
|
111
|
-
"name": "bg-color<k>",
|
|
112
|
-
"key": "i+1",
|
|
113
|
-
"props": { "background-color": "<v>" },
|
|
114
|
-
"values": "var-palette"
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
"user": "colors",
|
|
77
|
+
"doc": { "group": "colors", "desc": "<v>" },
|
|
118
78
|
"name": "bg-color-<k>",
|
|
119
79
|
"props": "background-color",
|
|
120
80
|
"values": "palette"
|
|
121
81
|
},
|
|
122
82
|
{
|
|
123
|
-
"
|
|
83
|
+
"doc": { "group": "colors", "desc": "<v>" },
|
|
124
84
|
"name": "bg-color-<k>",
|
|
125
85
|
"props": "background-color",
|
|
126
86
|
"values": "grays"
|
|
127
87
|
},
|
|
128
88
|
{
|
|
129
|
-
"
|
|
130
|
-
"name": "<var
|
|
131
|
-
"key": "i+1",
|
|
132
|
-
"props": { "<var>": "<v>" },
|
|
133
|
-
"values": "var-palette",
|
|
134
|
-
"vars": ["fill-stroke"]
|
|
135
|
-
},
|
|
136
|
-
{
|
|
137
|
-
"user": "colors",
|
|
138
|
-
"name": "<var>-color-<k>",
|
|
89
|
+
"doc": { "group": "svg", "desc": "<v>" },
|
|
90
|
+
"name": "<var>-<k>",
|
|
139
91
|
"props": { "<var>": "<v>" },
|
|
140
92
|
"values": "palette",
|
|
141
93
|
"vars": ["fill-stroke"]
|
|
142
94
|
},
|
|
143
95
|
{
|
|
144
|
-
"
|
|
145
|
-
"name": "<var
|
|
96
|
+
"doc": { "group": "svg", "desc": "<v>" },
|
|
97
|
+
"name": "<var>-<k>",
|
|
146
98
|
"props": { "<var>": "<v>" },
|
|
147
99
|
"values": "grays",
|
|
148
100
|
"vars": ["fill-stroke"]
|
|
149
101
|
},
|
|
150
102
|
{
|
|
151
|
-
"
|
|
103
|
+
"doc": { "group": "opacity", "desc": "<v>" },
|
|
152
104
|
"name": "o-<k>",
|
|
153
105
|
"props": "opacity",
|
|
154
106
|
"values": {
|
|
@@ -165,5 +117,40 @@
|
|
|
165
117
|
"100": 1
|
|
166
118
|
}
|
|
167
119
|
}
|
|
120
|
+
],
|
|
121
|
+
"templates": [
|
|
122
|
+
{
|
|
123
|
+
"doc": {
|
|
124
|
+
"group": "border color",
|
|
125
|
+
"args": ["name: variable name (without `--` prefix)"]
|
|
126
|
+
},
|
|
127
|
+
"name": "border-color",
|
|
128
|
+
"props": { "border-color": "var(--{0})" }
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"doc": {
|
|
132
|
+
"group": "colors",
|
|
133
|
+
"args": ["name: variable name (without `--` prefix)"]
|
|
134
|
+
},
|
|
135
|
+
"name": "color",
|
|
136
|
+
"props": { "color": "var(--{0})" }
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"doc": {
|
|
140
|
+
"group": "colors",
|
|
141
|
+
"args": ["name: variable name (without `--` prefix)"]
|
|
142
|
+
},
|
|
143
|
+
"name": "bg-color",
|
|
144
|
+
"props": { "background-color": "var(--{0})" }
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"doc": {
|
|
148
|
+
"group": "svg",
|
|
149
|
+
"args": ["name: variable name (without `--` prefix)"]
|
|
150
|
+
},
|
|
151
|
+
"name": "<var>",
|
|
152
|
+
"props": { "<var>": "var(--color{0})" },
|
|
153
|
+
"vars": ["fill-stroke"]
|
|
154
|
+
}
|
|
168
155
|
]
|
|
169
156
|
}
|
package/specs/content.mcss.json
CHANGED
package/specs/cursor.mcss.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
},
|
|
13
13
|
"specs": [
|
|
14
14
|
{
|
|
15
|
-
"
|
|
15
|
+
"doc": { "group": "<var>", "desc": "<v>" },
|
|
16
16
|
"name": "<vid><k>",
|
|
17
17
|
"key": "i+1",
|
|
18
18
|
"props": "<var>",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"vars": ["w", "h"]
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
|
-
"
|
|
24
|
+
"doc": { "group": "<var>", "desc": "%" },
|
|
25
25
|
"name": "<vid>-<v>",
|
|
26
26
|
"props": "<var>",
|
|
27
27
|
"values": "sizes-rel",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"vars": ["w", "h"]
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
|
-
"
|
|
32
|
+
"doc": { "group": "min. <var>", "desc": "<v>" },
|
|
33
33
|
"name": "min<vid><k>",
|
|
34
34
|
"key": "i+1",
|
|
35
35
|
"props": "min-<var>",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"vars": ["w", "h"]
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
|
-
"
|
|
41
|
+
"doc": { "group": "min. <var>", "desc": "%" },
|
|
42
42
|
"name": "min<vid>-<v>",
|
|
43
43
|
"props": "min-<var>",
|
|
44
44
|
"values": "sizes-rel",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"vars": ["w", "h"]
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
|
-
"
|
|
49
|
+
"doc": { "group": "max. <var>", "desc": "<v>" },
|
|
50
50
|
"name": "max<vid><k>",
|
|
51
51
|
"key": "i+1",
|
|
52
52
|
"props": "max-<var>",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"vars": ["w", "h"]
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"
|
|
58
|
+
"doc": { "group": "max. <var>", "desc": "%" },
|
|
59
59
|
"name": "max<vid>-<v>",
|
|
60
60
|
"props": "max-<var>",
|
|
61
61
|
"values": "sizes-rel",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"vars": ["w", "h"]
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
|
-
"
|
|
66
|
+
"doc": { "group": "<var>" },
|
|
67
67
|
"name": "v<vid>-<v>",
|
|
68
68
|
"props": "<var>",
|
|
69
69
|
"values": [25, 50, 75, 100],
|
package/specs/display.mcss.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"specs": [
|
|
3
3
|
{
|
|
4
|
-
"
|
|
4
|
+
"doc": { "group": "display mode", "desc": "<v>" },
|
|
5
5
|
"name": "<k>",
|
|
6
6
|
"props": "display",
|
|
7
7
|
"values": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
{
|
|
22
|
-
"
|
|
22
|
+
"doc": { "group": "visibility" },
|
|
23
23
|
"name": "<v>",
|
|
24
24
|
"props": { "visibility": "<v> !important" },
|
|
25
25
|
"values": ["hidden", "visible", "collapse"]
|
package/specs/flex.mcss.json
CHANGED
|
@@ -10,26 +10,26 @@
|
|
|
10
10
|
},
|
|
11
11
|
"specs": [
|
|
12
12
|
{
|
|
13
|
-
"
|
|
13
|
+
"doc": { "group": "flex layout" },
|
|
14
14
|
"name": "flex-<v>",
|
|
15
15
|
"props": "flex-direction",
|
|
16
16
|
"values": ["column", "column-reverse", "row", "row-reverse"]
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
|
-
"
|
|
19
|
+
"doc": { "group": "flex layout" },
|
|
20
20
|
"name": "<vid>-content-<v>",
|
|
21
21
|
"props": "<vid>-content",
|
|
22
22
|
"values": "align",
|
|
23
23
|
"vars": ["align", "justify"]
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"
|
|
26
|
+
"doc": { "group": "flex layout" },
|
|
27
27
|
"name": "flex-<v>",
|
|
28
28
|
"props": "flex-wrap",
|
|
29
29
|
"values": ["wrap", "nowrap", "wrap-reverse"]
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
|
-
"
|
|
32
|
+
"doc": { "group": "flex layout" },
|
|
33
33
|
"name": "flex-<vid><v>",
|
|
34
34
|
"props": "flex-<vid>",
|
|
35
35
|
"values": [0, 1],
|
package/specs/grids.mcss.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"specs": [
|
|
12
12
|
{
|
|
13
|
-
"
|
|
13
|
+
"doc": { "group": "grid layout", "desc": "<v>" },
|
|
14
14
|
"name": "grid-<vid>-<k>",
|
|
15
15
|
"key": "i+1",
|
|
16
16
|
"props": "grid-template-<var>",
|
|
@@ -29,32 +29,43 @@
|
|
|
29
29
|
"vars": ["cols", "rows"]
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
|
-
"
|
|
32
|
+
"doc": { "group": "grid layout", "desc": "<v>" },
|
|
33
33
|
"name": "gap<k>",
|
|
34
34
|
"props": "gap",
|
|
35
35
|
"values": [0, 0.125, 0.25, 0.5, 1, 2],
|
|
36
36
|
"unit": "rem"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
|
-
"
|
|
39
|
+
"doc": { "group": "grid layout" },
|
|
40
40
|
"name": "gap-<v>px",
|
|
41
41
|
"props": "gap",
|
|
42
42
|
"values": [1, 2, 4, 8],
|
|
43
43
|
"unit": "px"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
|
-
"
|
|
46
|
+
"doc": { "group": "grid layout" },
|
|
47
47
|
"name": "<vid>-self-<v>",
|
|
48
48
|
"props": "<vid>-self",
|
|
49
49
|
"values": "align",
|
|
50
50
|
"vars": ["align", "justify"]
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
|
-
"
|
|
53
|
+
"doc": { "group": "grid layout" },
|
|
54
54
|
"name": "<vid>-items-<v>",
|
|
55
55
|
"props": "<vid>-items",
|
|
56
56
|
"values": "align",
|
|
57
57
|
"vars": ["align", "justify"]
|
|
58
58
|
}
|
|
59
|
+
],
|
|
60
|
+
"templates": [
|
|
61
|
+
{
|
|
62
|
+
"doc": {
|
|
63
|
+
"group": "grid layout",
|
|
64
|
+
"args": ["<vid>: CSS <vid> definitions"]
|
|
65
|
+
},
|
|
66
|
+
"name": "grid-<vid>",
|
|
67
|
+
"props": "grid-template-<var>",
|
|
68
|
+
"vars": ["cols", "rows"]
|
|
69
|
+
}
|
|
59
70
|
]
|
|
60
71
|
}
|
package/specs/icons.mcss.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"specs": [
|
|
3
3
|
{
|
|
4
|
-
"
|
|
4
|
+
"doc": { "group": "icons", "desc": "<v>" },
|
|
5
5
|
"name": "icon-<k>",
|
|
6
6
|
"key": "i+1",
|
|
7
7
|
"props": {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"unit": "rem"
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
|
-
"
|
|
16
|
+
"doc": { "group": "icons", "desc": "<v>" },
|
|
17
17
|
"name": "icon-<k>",
|
|
18
18
|
"props": {
|
|
19
19
|
"display": "inline-block",
|
package/specs/lists.mcss.json
CHANGED
package/specs/margins.mcss.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
"specs": [
|
|
10
10
|
{
|
|
11
|
-
"
|
|
11
|
+
"doc": { "group": "padding", "desc": "<var> <v>" },
|
|
12
12
|
"name": "p<vid><k>",
|
|
13
13
|
"props": "padding<var>",
|
|
14
14
|
"values": "margins",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"vars": ["a", "h", "v", "t", "r", "b", "l"]
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
|
-
"
|
|
19
|
+
"doc": { "group": "margin", "desc": "<var> <v>" },
|
|
20
20
|
"name": "m<vid><k>",
|
|
21
21
|
"props": "margin<var>",
|
|
22
22
|
"values": "margins",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"vars": ["a", "h", "v", "t", "r", "b", "l"]
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
|
-
"
|
|
27
|
+
"doc": { "group": "margin" },
|
|
28
28
|
"name": "<k>",
|
|
29
29
|
"props": {
|
|
30
30
|
"margin-left": "<v>",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"values": { "center": "auto" }
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
"
|
|
36
|
+
"doc": { "group": "padding", "desc": "block <var> <v>" },
|
|
37
37
|
"name": "pb<vid>-<k>",
|
|
38
38
|
"props": "padding-block-<var>",
|
|
39
39
|
"values": "margins",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"vars": ["s", "e"]
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"
|
|
44
|
+
"doc": { "group": "margin", "desc": "block <var> <v>" },
|
|
45
45
|
"name": "mb<vid>-<k>",
|
|
46
46
|
"props": "margin-block-<var>",
|
|
47
47
|
"values": "margins",
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
},
|
|
5
5
|
"specs": [
|
|
6
6
|
{
|
|
7
|
-
"
|
|
7
|
+
"doc": { "group": "positions" },
|
|
8
8
|
"name": "<v>",
|
|
9
9
|
"props": "position",
|
|
10
10
|
"values": ["absolute", "relative", "fixed", "static", "sticky"]
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
|
-
"
|
|
13
|
+
"doc": { "group": "positions", "desc": "<v>" },
|
|
14
14
|
"name": "<var>-<v>",
|
|
15
15
|
"props": "<var>",
|
|
16
16
|
"values": "pos",
|
|
@@ -18,10 +18,21 @@
|
|
|
18
18
|
"vars": ["top", "right", "bottom", "left"]
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
|
-
"
|
|
21
|
+
"doc": { "group": "z-indices" },
|
|
22
22
|
"name": "z-<v>",
|
|
23
23
|
"props": "z-index",
|
|
24
24
|
"values": [0, 1, 2, 3, 4, 5, 999, 9999]
|
|
25
25
|
}
|
|
26
|
+
],
|
|
27
|
+
"templates": [
|
|
28
|
+
{
|
|
29
|
+
"doc": {
|
|
30
|
+
"group": "positions",
|
|
31
|
+
"args": ["coordinate (incl. units)"]
|
|
32
|
+
},
|
|
33
|
+
"name": "<var>",
|
|
34
|
+
"props": "<var>",
|
|
35
|
+
"vars": ["top", "right", "bottom", "left"]
|
|
36
|
+
}
|
|
26
37
|
]
|
|
27
38
|
}
|