@arbor-css/colors 0.0.6 → 0.0.7
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/dist/compile.test.js +134 -103
- package/dist/compile.test.js.map +1 -1
- package/dist/ranges.d.ts +4 -4
- package/dist/ranges.d.ts.map +1 -1
- package/package.json +4 -4
package/dist/compile.test.js
CHANGED
|
@@ -19,48 +19,54 @@ it('compiles a set of color ranges with default schemes and no precalculated glo
|
|
|
19
19
|
expect(compiled).toMatchInlineSnapshot(`
|
|
20
20
|
{
|
|
21
21
|
"dark": {
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
"colors": {
|
|
23
|
+
"alt": {
|
|
24
|
+
"$neutral": {
|
|
25
|
+
"dark": "oklch(calc(clamp(0, calc(0.9501231630155053 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
26
|
+
"light": "oklch(calc(clamp(0, calc(0.181852115991663 - pow(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
27
|
+
"mid": "oklch(calc(clamp(0, calc(0.5526304228576756 - pow(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
28
|
+
},
|
|
29
|
+
"dark": "oklch(95.38926261462365% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 210)",
|
|
30
|
+
"light": "oklch(18.17609205946362% calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) 210)",
|
|
31
|
+
"mid": "oklch(55.44024350328398% calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) 210)",
|
|
27
32
|
},
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"dark": "oklch(
|
|
35
|
-
"light": "oklch(
|
|
36
|
-
"mid": "oklch(
|
|
33
|
+
"primary": {
|
|
34
|
+
"$neutral": {
|
|
35
|
+
"dark": "oklch(calc(clamp(0, calc(0.9501231630155053 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
36
|
+
"light": "oklch(calc(clamp(0, calc(0.181852115991663 - pow(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
37
|
+
"mid": "oklch(calc(clamp(0, calc(0.5526304228576756 - pow(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
38
|
+
},
|
|
39
|
+
"dark": "oklch(95.38926261462365% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 90)",
|
|
40
|
+
"light": "oklch(18.17609205946362% calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) 90)",
|
|
41
|
+
"mid": "oklch(55.44024350328398% calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) 90)",
|
|
37
42
|
},
|
|
38
|
-
"dark": "oklch(100% calc(clamp(0, calc(0.06435767717846044 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
39
|
-
"light": "oklch(23.27740405204301% calc(clamp(0, calc(0.31700841514760014 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
40
|
-
"mid": "oklch(70.7841830520807% calc(clamp(0, calc(0.3604746560566229 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
41
43
|
},
|
|
44
|
+
"isDark": true,
|
|
42
45
|
},
|
|
43
46
|
"light": {
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
"colors": {
|
|
48
|
+
"alt": {
|
|
49
|
+
"$neutral": {
|
|
50
|
+
"dark": "oklch(calc(clamp(0, calc(0.001 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
51
|
+
"light": "oklch(calc(clamp(0, calc(0.996 - pow(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
52
|
+
"mid": "oklch(calc(clamp(0, calc(0.7638333333333333 - pow(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
53
|
+
},
|
|
54
|
+
"dark": "oklch(0% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 210)",
|
|
55
|
+
"light": "oklch(100% calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) 210)",
|
|
56
|
+
"mid": "oklch(76.66666666666666% calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) 210)",
|
|
49
57
|
},
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"dark": "oklch(
|
|
57
|
-
"light": "oklch(
|
|
58
|
-
"mid": "oklch(
|
|
58
|
+
"primary": {
|
|
59
|
+
"$neutral": {
|
|
60
|
+
"dark": "oklch(calc(clamp(0, calc(0.001 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
61
|
+
"light": "oklch(calc(clamp(0, calc(0.996 - pow(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
62
|
+
"mid": "oklch(calc(clamp(0, calc(0.7638333333333333 - pow(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
63
|
+
},
|
|
64
|
+
"dark": "oklch(0% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 90)",
|
|
65
|
+
"light": "oklch(100% calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) 90)",
|
|
66
|
+
"mid": "oklch(76.66666666666666% calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) 90)",
|
|
59
67
|
},
|
|
60
|
-
"dark": "oklch(0% calc(clamp(0, calc(0.06435767717846044 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
61
|
-
"light": "oklch(100% calc(clamp(0, calc(0.1570084151476001 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
62
|
-
"mid": "oklch(76.66666666666666% calc(clamp(0, calc(0.28047465605662286 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
63
68
|
},
|
|
69
|
+
"isDark": false,
|
|
64
70
|
},
|
|
65
71
|
}
|
|
66
72
|
`);
|
|
@@ -91,70 +97,79 @@ it('compiles a set of color ranges with a custom scheme', () => {
|
|
|
91
97
|
expect(compiled).toMatchInlineSnapshot(`
|
|
92
98
|
{
|
|
93
99
|
"custom": {
|
|
94
|
-
"
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
|
|
98
|
-
|
|
100
|
+
"colors": {
|
|
101
|
+
"alt": {
|
|
102
|
+
"$neutral": {
|
|
103
|
+
"dark": "oklch(0.001 0 210)",
|
|
104
|
+
"light": "oklch(0.001 0 210)",
|
|
105
|
+
"mid": "oklch(0.001 0 210)",
|
|
106
|
+
},
|
|
107
|
+
"dark": "oklch(0% 0 210)",
|
|
108
|
+
"light": "oklch(0% 0 210)",
|
|
109
|
+
"mid": "oklch(0% 0 210)",
|
|
99
110
|
},
|
|
100
|
-
"
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
"dark": "oklch(0
|
|
107
|
-
"light": "oklch(0
|
|
108
|
-
"mid": "oklch(0
|
|
111
|
+
"primary": {
|
|
112
|
+
"$neutral": {
|
|
113
|
+
"dark": "oklch(0.001 0 90)",
|
|
114
|
+
"light": "oklch(0.001 0 90)",
|
|
115
|
+
"mid": "oklch(0.001 0 90)",
|
|
116
|
+
},
|
|
117
|
+
"dark": "oklch(0% 0 90)",
|
|
118
|
+
"light": "oklch(0% 0 90)",
|
|
119
|
+
"mid": "oklch(0% 0 90)",
|
|
109
120
|
},
|
|
110
|
-
"dark": "oklch(0% 0 90)",
|
|
111
|
-
"light": "oklch(0% 0 90)",
|
|
112
|
-
"mid": "oklch(0% 0 90)",
|
|
113
121
|
},
|
|
122
|
+
"isDark": true,
|
|
114
123
|
},
|
|
115
124
|
"dark": {
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
|
|
120
|
-
|
|
125
|
+
"colors": {
|
|
126
|
+
"alt": {
|
|
127
|
+
"$neutral": {
|
|
128
|
+
"dark": "oklch(calc(clamp(0, calc(0.9501231630155053 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
129
|
+
"light": "oklch(calc(clamp(0, calc(0.181852115991663 - pow(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
130
|
+
"mid": "oklch(calc(clamp(0, calc(0.5526304228576756 - pow(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
131
|
+
},
|
|
132
|
+
"dark": "oklch(95.38926261462365% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 210)",
|
|
133
|
+
"light": "oklch(18.17609205946362% calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) 210)",
|
|
134
|
+
"mid": "oklch(55.44024350328398% calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) 210)",
|
|
121
135
|
},
|
|
122
|
-
"
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
"dark": "oklch(
|
|
129
|
-
"light": "oklch(
|
|
130
|
-
"mid": "oklch(
|
|
136
|
+
"primary": {
|
|
137
|
+
"$neutral": {
|
|
138
|
+
"dark": "oklch(calc(clamp(0, calc(0.9501231630155053 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
139
|
+
"light": "oklch(calc(clamp(0, calc(0.181852115991663 - pow(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
140
|
+
"mid": "oklch(calc(clamp(0, calc(0.5526304228576756 - pow(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
141
|
+
},
|
|
142
|
+
"dark": "oklch(95.38926261462365% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 90)",
|
|
143
|
+
"light": "oklch(18.17609205946362% calc(clamp(0, calc(0.40282945818358507 * var(--🧑-sat)), 0.4)) 90)",
|
|
144
|
+
"mid": "oklch(55.44024350328398% calc(clamp(0, calc(0.3717340270483959 * var(--🧑-sat)), 0.4)) 90)",
|
|
131
145
|
},
|
|
132
|
-
"dark": "oklch(100% calc(clamp(0, calc(0.06435767717846044 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
133
|
-
"light": "oklch(23.27740405204301% calc(clamp(0, calc(0.31700841514760014 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
134
|
-
"mid": "oklch(70.7841830520807% calc(clamp(0, calc(0.3604746560566229 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
135
146
|
},
|
|
147
|
+
"isDark": true,
|
|
136
148
|
},
|
|
137
149
|
"light": {
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
|
|
142
|
-
|
|
150
|
+
"colors": {
|
|
151
|
+
"alt": {
|
|
152
|
+
"$neutral": {
|
|
153
|
+
"dark": "oklch(calc(clamp(0, calc(0.001 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
154
|
+
"light": "oklch(calc(clamp(0, calc(0.996 - pow(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
155
|
+
"mid": "oklch(calc(clamp(0, calc(0.7638333333333333 - pow(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 210)",
|
|
156
|
+
},
|
|
157
|
+
"dark": "oklch(0% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 210)",
|
|
158
|
+
"light": "oklch(100% calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) 210)",
|
|
159
|
+
"mid": "oklch(76.66666666666666% calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) 210)",
|
|
143
160
|
},
|
|
144
|
-
"
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
"dark": "oklch(
|
|
151
|
-
"light": "oklch(
|
|
152
|
-
"mid": "oklch(
|
|
161
|
+
"primary": {
|
|
162
|
+
"$neutral": {
|
|
163
|
+
"dark": "oklch(calc(clamp(0, calc(0.001 - pow(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
164
|
+
"light": "oklch(calc(clamp(0, calc(0.996 - pow(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
165
|
+
"mid": "oklch(calc(clamp(0, calc(0.7638333333333333 - pow(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)), 1.6)), 1)) calc(clamp(0, calc(calc(calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) * var(--🧑-sat)) * 0.15), 0.4)) 90)",
|
|
166
|
+
},
|
|
167
|
+
"dark": "oklch(0% calc(clamp(0, calc(0.06435767717846044 * var(--🧑-sat)), 0.4)) 90)",
|
|
168
|
+
"light": "oklch(100% calc(clamp(0, calc(0.1570084151476001 * var(--🧑-sat)), 0.4)) 90)",
|
|
169
|
+
"mid": "oklch(76.66666666666666% calc(clamp(0, calc(0.28047465605662286 * var(--🧑-sat)), 0.4)) 90)",
|
|
153
170
|
},
|
|
154
|
-
"dark": "oklch(0% calc(clamp(0, calc(0.06435767717846044 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
155
|
-
"light": "oklch(100% calc(clamp(0, calc(0.1570084151476001 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
156
|
-
"mid": "oklch(76.66666666666666% calc(clamp(0, calc(0.28047465605662286 * var(--🎨-🧑-sat)), 0.4)) 90)",
|
|
157
171
|
},
|
|
172
|
+
"isDark": false,
|
|
158
173
|
},
|
|
159
174
|
}
|
|
160
175
|
`);
|
|
@@ -176,28 +191,34 @@ it('precomputes colors when globals are provided', () => {
|
|
|
176
191
|
expect(compiled).toMatchInlineSnapshot(`
|
|
177
192
|
{
|
|
178
193
|
"dark": {
|
|
179
|
-
"
|
|
180
|
-
"
|
|
181
|
-
"
|
|
182
|
-
|
|
183
|
-
|
|
194
|
+
"colors": {
|
|
195
|
+
"primary": {
|
|
196
|
+
"$neutral": {
|
|
197
|
+
"dark": "oklch(0.9460294953320025 0.0024134128941922664 90)",
|
|
198
|
+
"light": "oklch(0.10484232184874683 0.01510610468188444 90)",
|
|
199
|
+
"mid": "oklch(0.4849093681477608 0.013940026014314847 90)",
|
|
200
|
+
},
|
|
201
|
+
"dark": "oklch(95.38926261462365% 0.03217883858923022 90)",
|
|
202
|
+
"light": "oklch(18.17609205946362% 0.20141472909179253 90)",
|
|
203
|
+
"mid": "oklch(55.44024350328398% 0.18586701352419796 90)",
|
|
184
204
|
},
|
|
185
|
-
"dark": "oklch(100% 0.03217883858923022 90)",
|
|
186
|
-
"light": "oklch(23.27740405204301% 0.15850420757380007 90)",
|
|
187
|
-
"mid": "oklch(70.7841830520807% 0.18023732802831144 90)",
|
|
188
205
|
},
|
|
206
|
+
"isDark": true,
|
|
189
207
|
},
|
|
190
208
|
"light": {
|
|
191
|
-
"
|
|
192
|
-
"
|
|
193
|
-
"
|
|
194
|
-
|
|
195
|
-
|
|
209
|
+
"colors": {
|
|
210
|
+
"primary": {
|
|
211
|
+
"$neutral": {
|
|
212
|
+
"dark": "oklch(0 0.0024134128941922664 90)",
|
|
213
|
+
"light": "oklch(0.9789459043417997 0.005887815568035004 90)",
|
|
214
|
+
"mid": "oklch(0.7206832334318378 0.010517799602123358 90)",
|
|
215
|
+
},
|
|
216
|
+
"dark": "oklch(0% 0.03217883858923022 90)",
|
|
217
|
+
"light": "oklch(100% 0.07850420757380006 90)",
|
|
218
|
+
"mid": "oklch(76.66666666666666% 0.14023732802831143 90)",
|
|
196
219
|
},
|
|
197
|
-
"dark": "oklch(0% 0.03217883858923022 90)",
|
|
198
|
-
"light": "oklch(100% 0.07850420757380006 90)",
|
|
199
|
-
"mid": "oklch(76.66666666666666% 0.14023732802831143 90)",
|
|
200
220
|
},
|
|
221
|
+
"isDark": false,
|
|
201
222
|
},
|
|
202
223
|
}
|
|
203
224
|
`);
|
|
@@ -240,9 +261,19 @@ it('supports color-level saturation', () => {
|
|
|
240
261
|
const primaryChroma = compiled.dark.colors.primary.light
|
|
241
262
|
.match(matchChroma)?.[1]
|
|
242
263
|
.split(' ')[1];
|
|
243
|
-
console.log({ lightChroma, primaryChroma });
|
|
244
264
|
expect(lightChroma).toBeDefined();
|
|
245
265
|
expect(primaryChroma).toBeDefined();
|
|
246
|
-
expect(Number(lightChroma)).toBeCloseTo(Number(primaryChroma) * 0.5);
|
|
266
|
+
expect(Number(lightChroma)).toBeCloseTo(Number(primaryChroma) * 0.5, 1);
|
|
267
|
+
});
|
|
268
|
+
it('supports hue defined as a CSS property', () => {
|
|
269
|
+
const compiled = compileColors({
|
|
270
|
+
ranges: {
|
|
271
|
+
primary: {
|
|
272
|
+
hue: 'var(--my-hue)',
|
|
273
|
+
},
|
|
274
|
+
},
|
|
275
|
+
schemes: {},
|
|
276
|
+
});
|
|
277
|
+
expect(compiled.dark.colors.primary.light).toMatchInlineSnapshot(`"oklch(35.30047501302266% calc(clamp(0, calc(0.4304405175709162 * var(--🧑-sat)), 0.4)) var(--my-hue))"`);
|
|
247
278
|
});
|
|
248
279
|
//# sourceMappingURL=compile.test.js.map
|
package/dist/compile.test.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compile.test.js","sourceRoot":"","sources":["../src/compile.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgB,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAElE,EAAE,CAAC,kFAAkF,EAAE,GAAG,EAAE;IAC3F,MAAM,QAAQ,GAAG,aAAa,CAAC;QAC9B,MAAM,EAAE;YACP,OAAO,EAAE;gBACR,GAAG,EAAE,EAAE;gBACP,UAAU,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC;aACpC;YACD,GAAG,EAAE;gBACJ,GAAG,EAAE,GAAG;gBACR,UAAU,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC;aACpC;SACD;QACD,OAAO,EAAE,EAAE;KACX,CAAC,CAAC;IAEH,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC
|
|
1
|
+
{"version":3,"file":"compile.test.js","sourceRoot":"","sources":["../src/compile.test.ts"],"names":[],"mappings":"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"}
|
package/dist/ranges.d.ts
CHANGED
|
@@ -3,11 +3,11 @@ import { OklchColorEquation } from './color.js';
|
|
|
3
3
|
export declare const defaultRangeNames: readonly ["ink", "heavier", "heavy", "mid", "light", "lighter", "wash", "paper"];
|
|
4
4
|
export type DefaultRangeName = (typeof defaultRangeNames)[number];
|
|
5
5
|
export interface ColorRangeConfig<RangeNames extends string = DefaultRangeName> {
|
|
6
|
-
/** 0-360ish, OKLCH "H" hue */
|
|
7
|
-
hue: number;
|
|
6
|
+
/** 0-360ish, OKLCH "H" hue. Can also be a var() reference! */
|
|
7
|
+
hue: number | string;
|
|
8
8
|
rangeNames?: readonly RangeNames[];
|
|
9
|
-
/** 0-1, a local multiplier for chroma, stacks on global and computed value */
|
|
10
|
-
saturation?: number;
|
|
9
|
+
/** 0-1, a local multiplier for chroma, stacks on global and computed value. Can also be a var() reference! */
|
|
10
|
+
saturation?: number | string;
|
|
11
11
|
}
|
|
12
12
|
export interface ColorRangeCalculations {
|
|
13
13
|
/** A computation for lightness at each step - resolve 0-1 */
|
package/dist/ranges.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ranges.d.ts","sourceRoot":"","sources":["../src/ranges.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAgB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE9D,eAAO,MAAM,iBAAiB,kFASpB,CAAC;AACX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,WAAW,gBAAgB,CAChC,UAAU,SAAS,MAAM,GAAG,gBAAgB;IAE5C,
|
|
1
|
+
{"version":3,"file":"ranges.d.ts","sourceRoot":"","sources":["../src/ranges.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAgB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAE9D,eAAO,MAAM,iBAAiB,kFASpB,CAAC;AACX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,MAAM,WAAW,gBAAgB,CAChC,UAAU,SAAS,MAAM,GAAG,gBAAgB;IAE5C,8DAA8D;IAC9D,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACnC,8GAA8G;IAC9G,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,sBAAsB;IACtC,6DAA6D;IAC7D,SAAS,EAAE,CACV,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KACxC,QAAQ,CAAC;IACd,0DAA0D;IAC1D,MAAM,EAAE,CACP,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KACxC,QAAQ,CAAC;CACd;AAED,MAAM,MAAM,eAAe,CAAC,MAAM,IACjC,MAAM,SAAS,gBAAgB,CAAC,MAAM,UAAU,CAAC,GAGhD,yBAAyB,SAAS,UAAU,GAC3C,gBAAgB,GACf,UAAU,GACX,KAAK,CAAC;AAET,MAAM,WAAW,cAAc,CAAC,WAAW,SAAS,MAAM,GAAG,MAAM;IAClE,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,IAAI,EAAE,WAAW,CAAC;CAClB;AAED,MAAM,MAAM,oBAAoB,CAC/B,YAAY,SAAS,gBAAgB,CAAC,MAAM,CAAC,IAC1C;KACF,CAAC,IAAI,eAAe,CAAC,YAAY,CAAC,GAAG,cAAc;CACpD,CAAC;AACF,MAAM,MAAM,kBAAkB,CAAC,YAAY,SAAS,gBAAgB,CAAC,MAAM,CAAC,IAC3E;KACE,CAAC,IAAI,eAAe,CAAC,YAAY,CAAC,GAAG,MAAM;CAC5C,CAAC;AAEH,wBAAgB,gBAAgB,CAAC,UAAU,SAAS,MAAM,GAAG,gBAAgB,EAC5E,MAAM,EAAE,gBAAgB,CAAC,UAAU,CAAC,EACpC,KAAK,EAAE,sBAAsB,GAC3B,oBAAoB,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CA+BpD;AAkED,wBAAgB,yBAAyB,CACxC,MAAM,EAAE,gBAAgB,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,wHAeD;AAED,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,gBAAgB,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,wHAmBD;AAED,wBAAgB,yBAAyB,CACxC,WAAW,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,GACzD,oBAAoB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAyChD;AAED,wBAAgB,YAAY,CAC3B,CAAC,SAAS,MAAM,EAChB,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAEhD,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EACvC,OAAO,EAAE,qBAAqB,GAC5B,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAOhC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arbor-css/colors",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"vite": "^8.0.10"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@arbor-css/
|
|
32
|
-
"@arbor-css/
|
|
33
|
-
"@arbor-css/globals": "0.0.
|
|
31
|
+
"@arbor-css/calc": "0.0.7",
|
|
32
|
+
"@arbor-css/tokens": "0.0.7",
|
|
33
|
+
"@arbor-css/globals": "0.0.7"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "tsc",
|