@arbor-css/core 0.0.96 → 0.0.98
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/presets/arborPreset/modeValues/color/compile.d.ts +20 -1
- package/dist/presets/arborPreset/modeValues/color/compile.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeValues/color/compile.js +29 -4
- package/dist/presets/arborPreset/modeValues/color/compile.js.map +1 -1
- package/dist/presets/arborPreset/modeValues/color/compile.test.js +22 -22
- package/dist/presets/arborPreset/modeValues/color/compile.test.js.map +1 -1
- package/dist/presets/arborPreset/modeValues/color/ranges.d.ts +12 -7
- package/dist/presets/arborPreset/modeValues/color/ranges.d.ts.map +1 -1
- package/dist/presets/arborPreset/modeValues/color/ranges.js +18 -17
- package/dist/presets/arborPreset/modeValues/color/ranges.js.map +1 -1
- package/dist/presets/arborPreset/preset.test.js +6 -1
- package/dist/presets/arborPreset/preset.test.js.map +1 -1
- package/dist/stylesheet/generateStylesheet.test.js +0 -2
- package/dist/stylesheet/generateStylesheet.test.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Equation } from '@arbor-css/calc';
|
|
1
2
|
import { Token } from '@arbor-css/tokens';
|
|
2
3
|
import { ColorRangeConfig, CompiledColorRange, DefaultRangeName } from './ranges.js';
|
|
3
4
|
import { SchemeDefinition } from './schemes.js';
|
|
@@ -12,8 +13,11 @@ export type CompiledColorRanges<TRangeNames extends string, TRangeStepNames exte
|
|
|
12
13
|
[K in TRangeNames]: CompiledColorRangeWithNeutral<TRangeStepNames>;
|
|
13
14
|
};
|
|
14
15
|
export type CompiledColors<TRangeNames extends string, TRangeStepNames extends string = DefaultRangeName> = CompiledColorRanges<TRangeNames, TRangeStepNames>;
|
|
16
|
+
export type CompiledColorRangeConfig<TRangeStepNames extends string> = ColorRangeConfig<TRangeStepNames> & {
|
|
17
|
+
neutralSaturation?: number | string | Equation | Token;
|
|
18
|
+
};
|
|
15
19
|
export interface CompileColorsOptions<TRangeNames extends string, TRangeStepNames extends string = DefaultRangeName> {
|
|
16
|
-
ranges: Record<TRangeNames,
|
|
20
|
+
ranges: Record<TRangeNames, CompiledColorRangeConfig<TRangeStepNames>>;
|
|
17
21
|
schemes?: {
|
|
18
22
|
light?: SchemeDefinition<ColorRangeConfig<TRangeStepNames>, TRangeStepNames>;
|
|
19
23
|
dark?: SchemeDefinition<ColorRangeConfig<TRangeStepNames>, TRangeStepNames>;
|
|
@@ -30,5 +34,20 @@ type RequiredTokens = {
|
|
|
30
34
|
* light-dark logic to select the appropriate color in each scheme
|
|
31
35
|
*/
|
|
32
36
|
export declare function compileColors<TRangeNames extends string, TRangeStepNames extends string = DefaultRangeName>({ ranges, schemes: userSchemes, invertLightDark, }: CompileColorsOptions<TRangeNames, TRangeStepNames>, $: RequiredTokens): CompiledColors<TRangeNames, TRangeStepNames>;
|
|
37
|
+
/**
|
|
38
|
+
* Compile a single color range.
|
|
39
|
+
*/
|
|
40
|
+
export declare function compileSingleColor(
|
|
41
|
+
/**
|
|
42
|
+
* Provide CSS property values for the dynamic inputs
|
|
43
|
+
* of your color range.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* {
|
|
47
|
+
* hue: 'var(--my-hue)',
|
|
48
|
+
* saturation: 'var(--my-saturation)',
|
|
49
|
+
* }
|
|
50
|
+
*/
|
|
51
|
+
range: CompiledColorRangeConfig<string>, tokens: RequiredTokens): CompiledColorRangeWithNeutral<string>;
|
|
33
52
|
export {};
|
|
34
53
|
//# sourceMappingURL=compile.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compile.d.ts","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/compile.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"compile.d.ts","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/compile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EACN,gBAAgB,EAChB,kBAAkB,EAElB,gBAAgB,EAEhB,MAAM,aAAa,CAAC;AACrB,OAAO,EAGN,gBAAgB,EAChB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,6BAA6B,CACxC,eAAe,SAAS,MAAM,GAAG,gBAAgB,IAC9C,kBAAkB,CAAC,eAAe,CAAC,GAAG;IACzC;;;OAGG;IACH,QAAQ,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC9B,WAAW,SAAS,MAAM,EAC1B,eAAe,SAAS,MAAM,GAAG,gBAAgB,IAC9C;KACF,CAAC,IAAI,WAAW,GAAG,6BAA6B,CAAC,eAAe,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,cAAc,CACzB,WAAW,SAAS,MAAM,EAC1B,eAAe,SAAS,MAAM,GAAG,gBAAgB,IAC9C,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAEtD,MAAM,MAAM,wBAAwB,CAAC,eAAe,SAAS,MAAM,IAClE,gBAAgB,CAAC,eAAe,CAAC,GAAG;IACnC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;CACvD,CAAC;AAEH,MAAM,WAAW,oBAAoB,CACpC,WAAW,SAAS,MAAM,EAC1B,eAAe,SAAS,MAAM,GAAG,gBAAgB;IAEjD,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,eAAe,CAAC,CAAC,CAAC;IACvE,OAAO,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,gBAAgB,CACvB,gBAAgB,CAAC,eAAe,CAAC,EACjC,eAAe,CACf,CAAC;QACF,IAAI,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC;KAC5E,CAAC;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,cAAc,GAAG;IACrB,UAAU,EAAE,KAAK,CAAC;CAClB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,aAAa,CAC5B,WAAW,SAAS,MAAM,EAC1B,eAAe,SAAS,MAAM,GAAG,gBAAgB,EAEjD,EACC,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,eAAuB,GACvB,EAAE,oBAAoB,CAAC,WAAW,EAAE,eAAe,CAAC,EACrD,CAAC,EAAE,cAAc,GACf,cAAc,CAAC,WAAW,EAAE,eAAe,CAAC,CAkC9C;AAmCD;;GAEG;AACH,wBAAgB,kBAAkB;AACjC;;;;;;;;;GASG;AACH,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,EACvC,MAAM,EAAE,cAAc,yCAUtB"}
|
|
@@ -18,13 +18,13 @@ export function compileColors({ ranges, schemes: userSchemes, invertLightDark =
|
|
|
18
18
|
const rangeConfig = ranges[rangeName];
|
|
19
19
|
const uncompiledLight = schemes.light.getColorRange(rangeConfig, $);
|
|
20
20
|
const uncompiledDark = schemes.dark.getColorRange(rangeConfig, $);
|
|
21
|
-
const combined = toLightDarkCompiled(invertLightDark ? uncompiledDark : uncompiledLight, invertLightDark ? uncompiledLight : uncompiledDark,
|
|
21
|
+
const combined = toLightDarkCompiled(invertLightDark ? uncompiledDark : uncompiledLight, invertLightDark ? uncompiledLight : uncompiledDark, $, { neutralSaturation: rangeConfig.neutralSaturation });
|
|
22
22
|
colorsAcc[rangeName] = combined;
|
|
23
23
|
return colorsAcc;
|
|
24
24
|
}, {});
|
|
25
25
|
return colors;
|
|
26
26
|
}
|
|
27
|
-
function toLightDarkCompiled(light, dark,
|
|
27
|
+
function toLightDarkCompiled(light, dark, $, options = {}) {
|
|
28
28
|
const result = {};
|
|
29
29
|
for (const key in light) {
|
|
30
30
|
const lightColor = light[key];
|
|
@@ -32,8 +32,12 @@ function toLightDarkCompiled(light, dark, $) {
|
|
|
32
32
|
result[key] =
|
|
33
33
|
css `light-dark(${lightColor.equation.compiled}, ${darkColor.equation.compiled})`;
|
|
34
34
|
}
|
|
35
|
-
const lightNeutral = createNeutralDerivedRange(light,
|
|
36
|
-
|
|
35
|
+
const lightNeutral = createNeutralDerivedRange(light, $, {
|
|
36
|
+
saturationFactor: options.neutralSaturation ?? 0.15,
|
|
37
|
+
});
|
|
38
|
+
const darkNeutral = createNeutralDerivedRange(dark, $, {
|
|
39
|
+
saturationFactor: options.neutralSaturation ?? 0.15,
|
|
40
|
+
});
|
|
37
41
|
const neutralResult = {};
|
|
38
42
|
for (const key in lightNeutral) {
|
|
39
43
|
const lightColor = lightNeutral[key];
|
|
@@ -44,4 +48,25 @@ function toLightDarkCompiled(light, dark, $) {
|
|
|
44
48
|
result.$neutral = neutralResult;
|
|
45
49
|
return result;
|
|
46
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Compile a single color range.
|
|
53
|
+
*/
|
|
54
|
+
export function compileSingleColor(
|
|
55
|
+
/**
|
|
56
|
+
* Provide CSS property values for the dynamic inputs
|
|
57
|
+
* of your color range.
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* {
|
|
61
|
+
* hue: 'var(--my-hue)',
|
|
62
|
+
* saturation: 'var(--my-saturation)',
|
|
63
|
+
* }
|
|
64
|
+
*/
|
|
65
|
+
range, tokens) {
|
|
66
|
+
return compileColors({
|
|
67
|
+
ranges: {
|
|
68
|
+
dynamic: range,
|
|
69
|
+
},
|
|
70
|
+
}, tokens).dynamic;
|
|
71
|
+
}
|
|
47
72
|
//# sourceMappingURL=compile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compile.js","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/compile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"compile.js","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/compile.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { computeEquation, isCalcEquation, printComputationResult, } from '@arbor-css/calc';
|
|
1
|
+
import { computeEquation, css, isCalcEquation, printComputationResult, } from '@arbor-css/calc';
|
|
2
2
|
import { createGlobalContext } from '@arbor-css/globals';
|
|
3
3
|
import { expect, it } from 'vitest';
|
|
4
4
|
import { compileColors } from './compile.js';
|
|
@@ -55,10 +55,10 @@ it('compiles a set of color ranges with default schemes and no precalculated glo
|
|
|
55
55
|
"light": "light-dark(oklch(0.9996018928294464 0.0007500000000000007 210), oklch(0.0787065459868453 0.0015000000000000013 210))",
|
|
56
56
|
"mid": "light-dark(oklch(0.8602483517886919 0.011250000000000001 210), oklch(0.4856387300380706 0.012000000000000002 210))",
|
|
57
57
|
},
|
|
58
|
-
"$root": "light-dark(oklch(
|
|
59
|
-
"heavy": "light-dark(oklch(
|
|
60
|
-
"light": "light-dark(oklch(
|
|
61
|
-
"mid": "light-dark(oklch(
|
|
58
|
+
"$root": "light-dark(oklch(0.9 0.15000000000000002 210), oklch(0.53 0.16000000000000003 210))",
|
|
59
|
+
"heavy": "light-dark(oklch(0.20000000000000007 0.11000000000000001 210), oklch(1 0.06400000000000002 210))",
|
|
60
|
+
"light": "light-dark(oklch(1 0.010000000000000009 210), oklch(0.08000000000000002 0.020000000000000018 210))",
|
|
61
|
+
"mid": "light-dark(oklch(0.9 0.15000000000000002 210), oklch(0.53 0.16000000000000003 210))",
|
|
62
62
|
},
|
|
63
63
|
"primary": {
|
|
64
64
|
"$neutral": {
|
|
@@ -67,10 +67,10 @@ it('compiles a set of color ranges with default schemes and no precalculated glo
|
|
|
67
67
|
"light": "light-dark(oklch(0.9996018928294464 0.0007500000000000007 90), oklch(0.0787065459868453 0.0015000000000000013 90))",
|
|
68
68
|
"mid": "light-dark(oklch(0.8602483517886919 0.011250000000000001 90), oklch(0.4856387300380706 0.012000000000000002 90))",
|
|
69
69
|
},
|
|
70
|
-
"$root": "light-dark(oklch(
|
|
71
|
-
"heavy": "light-dark(oklch(
|
|
72
|
-
"light": "light-dark(oklch(
|
|
73
|
-
"mid": "light-dark(oklch(
|
|
70
|
+
"$root": "light-dark(oklch(0.9 0.15000000000000002 90), oklch(0.53 0.16000000000000003 90))",
|
|
71
|
+
"heavy": "light-dark(oklch(0.20000000000000007 0.11000000000000001 90), oklch(1 0.06400000000000002 90))",
|
|
72
|
+
"light": "light-dark(oklch(1 0.010000000000000009 90), oklch(0.08000000000000002 0.020000000000000018 90))",
|
|
73
|
+
"mid": "light-dark(oklch(0.9 0.15000000000000002 90), oklch(0.53 0.16000000000000003 90))",
|
|
74
74
|
},
|
|
75
75
|
}
|
|
76
76
|
`);
|
|
@@ -91,8 +91,8 @@ it('compiles a set of color ranges with a custom scheme', () => {
|
|
|
91
91
|
light: {
|
|
92
92
|
tag: 'light-custom',
|
|
93
93
|
getColorRange: (config, ctx) => createColorRange(config, {
|
|
94
|
-
lightness: (
|
|
95
|
-
chroma: (
|
|
94
|
+
lightness: () => css `0`,
|
|
95
|
+
chroma: () => css `0`,
|
|
96
96
|
}, ctx),
|
|
97
97
|
isDark: true,
|
|
98
98
|
},
|
|
@@ -107,10 +107,10 @@ it('compiles a set of color ranges with a custom scheme', () => {
|
|
|
107
107
|
"light": "light-dark(oklch(0 0 210), oklch(0.0787065459868453 0.0015000000000000013 210))",
|
|
108
108
|
"mid": "light-dark(oklch(0 0 210), oklch(0.4856387300380706 0.012000000000000002 210))",
|
|
109
109
|
},
|
|
110
|
-
"$root": "light-dark(oklch(0
|
|
111
|
-
"heavy": "light-dark(oklch(0
|
|
112
|
-
"light": "light-dark(oklch(0
|
|
113
|
-
"mid": "light-dark(oklch(0
|
|
110
|
+
"$root": "light-dark(oklch(0 0 210), oklch(0.53 0.16000000000000003 210))",
|
|
111
|
+
"heavy": "light-dark(oklch(0 0 210), oklch(1 0.06400000000000002 210))",
|
|
112
|
+
"light": "light-dark(oklch(0 0 210), oklch(0.08000000000000002 0.020000000000000018 210))",
|
|
113
|
+
"mid": "light-dark(oklch(0 0 210), oklch(0.53 0.16000000000000003 210))",
|
|
114
114
|
},
|
|
115
115
|
"primary": {
|
|
116
116
|
"$neutral": {
|
|
@@ -119,10 +119,10 @@ it('compiles a set of color ranges with a custom scheme', () => {
|
|
|
119
119
|
"light": "light-dark(oklch(0 0 90), oklch(0.0787065459868453 0.0015000000000000013 90))",
|
|
120
120
|
"mid": "light-dark(oklch(0 0 90), oklch(0.4856387300380706 0.012000000000000002 90))",
|
|
121
121
|
},
|
|
122
|
-
"$root": "light-dark(oklch(0
|
|
123
|
-
"heavy": "light-dark(oklch(0
|
|
124
|
-
"light": "light-dark(oklch(0
|
|
125
|
-
"mid": "light-dark(oklch(0
|
|
122
|
+
"$root": "light-dark(oklch(0 0 90), oklch(0.53 0.16000000000000003 90))",
|
|
123
|
+
"heavy": "light-dark(oklch(0 0 90), oklch(1 0.06400000000000002 90))",
|
|
124
|
+
"light": "light-dark(oklch(0 0 90), oklch(0.08000000000000002 0.020000000000000018 90))",
|
|
125
|
+
"mid": "light-dark(oklch(0 0 90), oklch(0.53 0.16000000000000003 90))",
|
|
126
126
|
},
|
|
127
127
|
}
|
|
128
128
|
`);
|
|
@@ -151,8 +151,8 @@ it('supports color-level saturation', () => {
|
|
|
151
151
|
},
|
|
152
152
|
},
|
|
153
153
|
});
|
|
154
|
-
expect(compiled.primaryLight.light).toMatchInlineSnapshot(`"light-dark(oklch(
|
|
155
|
-
expect(compiled.primary.light).toMatchInlineSnapshot(`"light-dark(oklch(
|
|
154
|
+
expect(compiled.primaryLight.light).toMatchInlineSnapshot(`"light-dark(oklch(0.9802741561760231 0.056269363558927955 90), oklch(0.4095887657359654 0.06126936355892796 90))"`);
|
|
155
|
+
expect(compiled.primary.light).toMatchInlineSnapshot(`"light-dark(oklch(0.9802741561760231 0.11253872711785591 90), oklch(0.4095887657359654 0.12253872711785592 90))"`);
|
|
156
156
|
expect(compiled.primaryLight.light).not.toEqual(compiled.primary.light);
|
|
157
157
|
});
|
|
158
158
|
it('supports hue defined as a CSS property', () => {
|
|
@@ -163,7 +163,7 @@ it('supports hue defined as a CSS property', () => {
|
|
|
163
163
|
},
|
|
164
164
|
},
|
|
165
165
|
});
|
|
166
|
-
expect(compiled.primary.light).toMatchInlineSnapshot(`"light-dark(oklch(
|
|
166
|
+
expect(compiled.primary.light).toMatchInlineSnapshot(`"light-dark(oklch(0.9802741561760231 0.11253872711785591 var(--my-hue)), oklch(0.4095887657359654 0.12253872711785592 var(--my-hue)))"`);
|
|
167
167
|
});
|
|
168
168
|
it('assigns color and neutral $root to mid when mid exists', () => {
|
|
169
169
|
const compiled = compileAndBake({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compile.test.js","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/compile.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,eAAe,
|
|
1
|
+
{"version":3,"file":"compile.test.js","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/compile.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,30 +1,32 @@
|
|
|
1
|
-
import { CalcEvaluationContext,
|
|
1
|
+
import { CalcEvaluationContext, Equation } from '@arbor-css/calc';
|
|
2
2
|
import { Token } from '@arbor-css/tokens';
|
|
3
3
|
import { OklchColorEquation } from './color.js';
|
|
4
4
|
export declare const defaultRangeNames: readonly ["ink", "heavy", "mid", "light", "wash", "paper"];
|
|
5
5
|
export type DefaultRangeName = (typeof defaultRangeNames)[number];
|
|
6
6
|
export interface ColorRangeConfig<RangeNames extends string = DefaultRangeName> {
|
|
7
7
|
/** 0-360ish, OKLCH "H" hue. Can also be a var() reference! */
|
|
8
|
-
hue: number | string;
|
|
8
|
+
hue: number | string | Equation | Token;
|
|
9
|
+
/**
|
|
10
|
+
* 0-1, a local multiplier for chroma, stacks on global and computed value. Can also be a var() reference!
|
|
11
|
+
*/
|
|
12
|
+
saturation?: number | string | Equation | Token;
|
|
9
13
|
rangeNames?: readonly RangeNames[];
|
|
10
14
|
defaultLevel?: RangeNames;
|
|
11
|
-
/** 0-1, a local multiplier for chroma, stacks on global and computed value. Can also be a var() reference! */
|
|
12
|
-
saturation?: number | string;
|
|
13
15
|
}
|
|
14
16
|
export interface ColorRangeCalculations {
|
|
15
17
|
/** A computation for lightness at each step - resolve 0-1 */
|
|
16
|
-
lightness: (
|
|
18
|
+
lightness: (details: {
|
|
17
19
|
step: number;
|
|
18
20
|
rangeSize: number;
|
|
19
21
|
midpoint: number;
|
|
20
22
|
}) => Equation;
|
|
21
23
|
/** A computation for chroma at each step - resolve 0-1 */
|
|
22
|
-
chroma: (
|
|
24
|
+
chroma: (details: {
|
|
23
25
|
step: number;
|
|
24
26
|
rangeSize: number;
|
|
25
27
|
midpoint: number;
|
|
26
28
|
}) => Equation;
|
|
27
|
-
hue?: (
|
|
29
|
+
hue?: (details: {
|
|
28
30
|
step: number;
|
|
29
31
|
rangeSize: number;
|
|
30
32
|
midpoint: number;
|
|
@@ -62,6 +64,9 @@ export declare function createColorDarkModeRange(config: ColorRangeConfig & {
|
|
|
62
64
|
}): UncompiledColorRange<"light" | "paper" | "wash" | "mid" | "heavy" | "ink">;
|
|
63
65
|
export declare function createNeutralDerivedRange(sourceRange: UncompiledColorRange<string>, tokens: {
|
|
64
66
|
saturation: Token;
|
|
67
|
+
}, options?: {
|
|
68
|
+
/** Adjust saturation relative to source range. Stacks with saturation token. */
|
|
69
|
+
saturationFactor?: number | string | Equation | Token;
|
|
65
70
|
}): UncompiledColorRange<string>;
|
|
66
71
|
export declare function compileRange<R extends string>(range: UncompiledColorRange<R>, context: CalcEvaluationContext): CompiledColorRange<R>;
|
|
67
72
|
//# sourceMappingURL=ranges.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ranges.d.ts","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/ranges.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ranges.d.ts","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/ranges.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { css } from '@arbor-css/calc';
|
|
1
2
|
import { oklchBuilder } from './color.js';
|
|
2
3
|
export const defaultRangeNames = [
|
|
3
4
|
'ink',
|
|
@@ -16,10 +17,10 @@ export function createColorRange(config, calcs, tokens) {
|
|
|
16
17
|
rangeNames[Math.floor(size / 2)];
|
|
17
18
|
const midpoint = rangeNames.indexOf(rootName);
|
|
18
19
|
const range = rangeNames.reduce((acc, name, i) => {
|
|
19
|
-
const equation = oklchBuilder((
|
|
20
|
-
l:
|
|
21
|
-
c:
|
|
22
|
-
h:
|
|
20
|
+
const equation = oklchBuilder(() => ({
|
|
21
|
+
l: css `clamp(0, calc(${lightness({ step: i, rangeSize: size, midpoint })}), 1)`,
|
|
22
|
+
c: css `clamp(0, calc(${config.saturation ?? 1} * 0.4 * ${chroma({ step: i, rangeSize: size, midpoint })} * ${tokens.saturation}), 0.4)`,
|
|
23
|
+
h: css `calc(${sourceHue} * ${calcs.hue?.({ step: i, rangeSize: size, midpoint }) ?? 1})`,
|
|
23
24
|
}));
|
|
24
25
|
acc[name] = { name, equation };
|
|
25
26
|
return acc;
|
|
@@ -28,21 +29,21 @@ export function createColorRange(config, calcs, tokens) {
|
|
|
28
29
|
return range;
|
|
29
30
|
}
|
|
30
31
|
function lightnessEq(config) {
|
|
31
|
-
return (
|
|
32
|
+
return ({ step, rangeSize, midpoint, }) => {
|
|
32
33
|
const rangeDir = step < midpoint ? -1 : 1;
|
|
33
34
|
const rangeMax = step < midpoint ? midpoint : rangeSize - midpoint - 1;
|
|
34
35
|
const rangeProgress = (Math.abs(step - midpoint) / rangeMax) **
|
|
35
36
|
(config.midpointDifferentiation ?? 1.2);
|
|
36
|
-
return
|
|
37
|
+
return css `calc(${config.baseline} + (${rangeDir} * ${rangeProgress} * ${step < midpoint ? config.rangeDown : config.rangeUp}))`;
|
|
37
38
|
};
|
|
38
39
|
}
|
|
39
40
|
function chromaEq(config) {
|
|
40
|
-
return (
|
|
41
|
+
return ({ step, rangeSize, midpoint, }) => {
|
|
41
42
|
const rangeDir = step < midpoint ? -1 : 1;
|
|
42
43
|
const rangeMax = step < midpoint ? midpoint : rangeSize - midpoint - 1;
|
|
43
44
|
const rangeProgress = (Math.abs(step - midpoint) / rangeMax) **
|
|
44
45
|
(config.midpointDifferentiation ?? 1.2);
|
|
45
|
-
return
|
|
46
|
+
return css `calc(${config.baseline} + (${rangeDir} * ${rangeProgress} * ${step < midpoint ? config.rangeDown : config.rangeUp}))`;
|
|
46
47
|
};
|
|
47
48
|
}
|
|
48
49
|
export function createColorLightModeRange(config, $) {
|
|
@@ -77,19 +78,19 @@ export function createColorDarkModeRange(config, $) {
|
|
|
77
78
|
chroma,
|
|
78
79
|
}, $);
|
|
79
80
|
}
|
|
80
|
-
export function createNeutralDerivedRange(sourceRange, tokens) {
|
|
81
|
-
function lightness(
|
|
82
|
-
|
|
83
|
-
return $.subtract(sourceLAsZeroToOne, $.fn('pow', source.c, $.val(1.7)));
|
|
81
|
+
export function createNeutralDerivedRange(sourceRange, tokens, options) {
|
|
82
|
+
function lightness(source) {
|
|
83
|
+
return css `calc(${source.l} - pow(${source.c}, 1.7))`;
|
|
84
84
|
}
|
|
85
|
-
function chroma(
|
|
86
|
-
|
|
85
|
+
function chroma(source) {
|
|
86
|
+
const saturationFactor = options?.saturationFactor ?? 0.15;
|
|
87
|
+
return css `calc(${source.c} * ${tokens.saturation} * ${saturationFactor})`;
|
|
87
88
|
}
|
|
88
89
|
return Object.fromEntries(Object.keys(sourceRange).map((sourceName) => {
|
|
89
90
|
const sourceEquation = sourceRange[sourceName].equation;
|
|
90
|
-
const equation = oklchBuilder((
|
|
91
|
-
l:
|
|
92
|
-
c:
|
|
91
|
+
const equation = oklchBuilder(() => ({
|
|
92
|
+
l: css `clamp(0, ${lightness(sourceEquation)}, 1)`,
|
|
93
|
+
c: css `clamp(0, ${chroma(sourceEquation)}, 0.4)`,
|
|
93
94
|
h: sourceEquation.h,
|
|
94
95
|
}));
|
|
95
96
|
return [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ranges.js","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/ranges.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ranges.js","sourceRoot":"","sources":["../../../../../src/presets/arborPreset/modeValues/color/ranges.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { definePreset } from '@arbor-css/preset';
|
|
1
|
+
import { definePreset, getInternals } from '@arbor-css/preset';
|
|
2
2
|
import { expect, it } from 'vitest';
|
|
3
3
|
import { modeToCss } from '../../stylesheet/modeToCss.js';
|
|
4
4
|
import { presetArbor } from './preset.js';
|
|
@@ -27,6 +27,10 @@ it('is extensible', () => {
|
|
|
27
27
|
expect(preset.$.mode.primitive.color.red.mid.name).toEqual(base.$.mode.primitive.color.red.mid.name);
|
|
28
28
|
expect(preset.baseMode.test).toBe('red');
|
|
29
29
|
expect(preset.baseMode.action?.roundness).toBe(0.5);
|
|
30
|
+
// preserves modes from base
|
|
31
|
+
expect(getInternals(preset).modes.dark).toBeDefined();
|
|
32
|
+
expect(getInternals(preset).modes.light).toBeDefined();
|
|
33
|
+
expect(getInternals(preset).modes.inverted).toBeDefined();
|
|
30
34
|
// check typing of mixin tokens
|
|
31
35
|
// @ts-expect-error
|
|
32
36
|
preset.$.mixins.adfa;
|
|
@@ -49,6 +53,7 @@ it('allows augmenting built-in modes', () => {
|
|
|
49
53
|
},
|
|
50
54
|
});
|
|
51
55
|
const css = modeToCss(darkMode, preset);
|
|
56
|
+
expect(css).toContain('.\\@mode-dark');
|
|
52
57
|
expect(css).toContain('--m-action-primary-bg: var(--m-color-main-heavy);');
|
|
53
58
|
// still includes built-in stuff
|
|
54
59
|
expect(css).toContain('color-scheme: dark;');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preset.test.js","sourceRoot":"","sources":["../../../src/presets/arborPreset/preset.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"preset.test.js","sourceRoot":"","sources":["../../../src/presets/arborPreset/preset.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;IACxB,MAAM,IAAI,GAAG,WAAW,CAAC;QACxB,KAAK,EAAE;YACN,MAAM,EAAE;gBACP,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;aACf;YACD,SAAS,EAAE,KAAK;SAChB;KACD,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,CAAC,IAAI,CAAC;QACf,UAAU,EAAE;YACX,IAAI,EAAE,OAAO;SACb;QACD,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;YAChB,IAAI,EAAE,KAAK;YACX,MAAM,EAAE;gBACP,SAAS,EAAE,GAAG;aACd;SACD,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,OAAO,CACzD,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CACxC,CAAC;IACF,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,4BAA4B;IAC5B,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;IACtD,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;IACvD,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC;IAE1D,+BAA+B;IAC/B,mBAAmB;IACnB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;AACtB,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,kCAAkC,EAAE,GAAG,EAAE;IAC3C,MAAM,MAAM,GAAG,WAAW,CAAC;QAC1B,KAAK,EAAE;YACN,MAAM,EAAE;gBACP,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;aACf;YACD,SAAS,EAAE,KAAK;SAChB;KACD,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE;QAC1C,MAAM,EAAE;YACP,OAAO,EAAE;gBACR,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;gBAClC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK;aAClC;SACD;KACD,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACxC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IACvC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,mDAAmD,CAAC,CAAC;IAC3E,gCAAgC;IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;AAC9C,CAAC,CAAC,CAAC"}
|
|
@@ -14,8 +14,6 @@ it("generates a preset's CSS, including globals, primitives, modes, and function
|
|
|
14
14
|
},
|
|
15
15
|
});
|
|
16
16
|
const css = generateStylesheet(preset);
|
|
17
|
-
expect(css).toContain('--_-env-prefersLight: ');
|
|
18
|
-
expect(css).toContain('--_-env-prefersDark: ');
|
|
19
17
|
expect(css).toContain('--m-global-roundness: 1');
|
|
20
18
|
expect(css).toContain('--m-primitive-color-brand-mid: ');
|
|
21
19
|
expect(css).toContain('--m-color-main: ');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateStylesheet.test.js","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,EAAE,CAAC,+EAA+E,EAAE,GAAG,EAAE;IACxF,MAAM,MAAM,GAAG,WAAW,CAAC;QAC1B,KAAK,EAAE;YACN,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;aAClB;YACD,SAAS,EAAE,OAAO;SAClB;QACD,OAAO,EAAE;YACR,SAAS,EAAE,CAAC;SACZ;KACD,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAEvC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"generateStylesheet.test.js","sourceRoot":"","sources":["../../src/stylesheet/generateStylesheet.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,EAAE,CAAC,+EAA+E,EAAE,GAAG,EAAE;IACxF,MAAM,MAAM,GAAG,WAAW,CAAC;QAC1B,KAAK,EAAE;YACN,MAAM,EAAE;gBACP,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;aAClB;YACD,SAAS,EAAE,OAAO;SAClB;QACD,OAAO,EAAE;YACR,SAAS,EAAE,CAAC;SACZ;KACD,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAEvC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC;IACjD,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,iCAAiC,CAAC,CAAC;IACzD,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,8BAA8B,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arbor-css/core",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.98",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -53,13 +53,13 @@
|
|
|
53
53
|
"jiti": "^2.6.1",
|
|
54
54
|
"lil-gui": "^0.21.0",
|
|
55
55
|
"yargs": "^18.0.0",
|
|
56
|
-
"@arbor-css/preset": "0.0.
|
|
57
|
-
"@arbor-css/
|
|
58
|
-
"@arbor-css/
|
|
59
|
-
"@arbor-css/
|
|
60
|
-
"@arbor-css/
|
|
61
|
-
"@arbor-css/
|
|
62
|
-
"@arbor-css/calc": "0.0.
|
|
56
|
+
"@arbor-css/preset": "0.0.98",
|
|
57
|
+
"@arbor-css/globals": "0.0.98",
|
|
58
|
+
"@arbor-css/functions": "0.0.98",
|
|
59
|
+
"@arbor-css/util": "0.0.98",
|
|
60
|
+
"@arbor-css/modes": "0.0.98",
|
|
61
|
+
"@arbor-css/tokens": "0.0.98",
|
|
62
|
+
"@arbor-css/calc": "0.0.98"
|
|
63
63
|
},
|
|
64
64
|
"scripts": {
|
|
65
65
|
"build": "tsc",
|