@arbor-css/modes 0.0.60 → 0.0.63
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/createModeSchema.d.ts +14 -26
- package/dist/createModeSchema.d.ts.map +1 -1
- package/dist/createModeSchema.js +17 -61
- package/dist/createModeSchema.js.map +1 -1
- package/dist/modeToCss.d.ts +3 -2
- package/dist/modeToCss.d.ts.map +1 -1
- package/dist/modeToCss.js +1 -1
- package/dist/modeToCss.js.map +1 -1
- package/dist/modeToCss.test.js +44 -44
- package/package.json +5 -5
|
@@ -1,55 +1,43 @@
|
|
|
1
1
|
import { Equation } from '@arbor-css/calc';
|
|
2
|
-
import { CreateToken, Token, TokenPurpose } from '@arbor-css/tokens';
|
|
2
|
+
import { CreateToken, SimpleTokensAsTokenDefinitions, SimpleTokenSchema, Token, TokenPurpose } from '@arbor-css/tokens';
|
|
3
3
|
export type ModePropertyType = TokenPurpose;
|
|
4
4
|
export type ModeSchemaProperty = ModePropertyType | {
|
|
5
5
|
type: ModePropertyType;
|
|
6
6
|
fallback: string;
|
|
7
7
|
};
|
|
8
|
-
export type
|
|
9
|
-
/**
|
|
10
|
-
* Special key: creates a token at the current group path without appending
|
|
11
|
-
* a `-$root` segment. For example, `{ colors: { main: { $root: 'color', mid: 'color' } } }`
|
|
12
|
-
* generates `--$-colors-main` (for `$root`) and `--$-colors-main-mid` (for `mid`).
|
|
13
|
-
* Optional at any level.
|
|
14
|
-
*/
|
|
15
|
-
$root?: ModeSchemaProperty;
|
|
16
|
-
[Key: string]: ModeSchemaProperty | ModeSchemaLevel | undefined;
|
|
17
|
-
};
|
|
18
|
-
export type ModeSchema<TSchema extends ModeSchemaLevel = ModeSchemaLevel> = {
|
|
8
|
+
export type ModeSchema<TSchema extends SimpleTokenSchema = SimpleTokenSchema> = {
|
|
19
9
|
definition: TSchema;
|
|
20
10
|
tag: string;
|
|
21
|
-
$tokens:
|
|
11
|
+
$tokens: SimpleTokensAsTokenDefinitions<TSchema>;
|
|
22
12
|
createBase: (def: ModeValues<TSchema>) => ModeInstance<TSchema>;
|
|
23
13
|
createPartial: (name: string, def: DeepPartial<ModeValues<TSchema>>) => PartialModeInstance<TSchema>;
|
|
24
|
-
extend: <TExtensionSchema extends
|
|
14
|
+
extend: <TExtensionSchema extends SimpleTokenSchema>(extension: TExtensionSchema) => ModeSchema<TSchema & TExtensionSchema>;
|
|
25
15
|
extraCss?: string;
|
|
26
16
|
};
|
|
27
|
-
export declare function createModeSchema<T extends ModeSchemaLevel>(input: T, { tag, extraCss, createToken: createTokenValue, }: {
|
|
28
|
-
tag?: string;
|
|
29
|
-
extraCss?: string;
|
|
30
|
-
createToken: CreateToken;
|
|
31
|
-
}): ModeSchema<T>;
|
|
32
17
|
export type DeepPartial<T> = {
|
|
33
18
|
[P in keyof T]?: DeepPartial<T[P]> | undefined;
|
|
34
19
|
};
|
|
35
20
|
export type ModeValue = string | number | Token | Equation;
|
|
36
21
|
export declare function isModeValue(value: any): value is ModeValue;
|
|
37
|
-
export type ModeValues<T extends
|
|
38
|
-
[P in keyof T]: NonNullable<T[P]> extends ModeSchemaProperty ? ModeValue : NonNullable<T[P]> extends
|
|
22
|
+
export type ModeValues<T extends SimpleTokenSchema> = {
|
|
23
|
+
[P in keyof T]: NonNullable<T[P]> extends ModeSchemaProperty ? ModeValue : NonNullable<T[P]> extends SimpleTokenSchema ? ModeValues<NonNullable<T[P]>> : never;
|
|
39
24
|
};
|
|
25
|
+
export type ModeTokens<T extends SimpleTokenSchema> = SimpleTokensAsTokenDefinitions<T>;
|
|
40
26
|
export interface ModeConfig {
|
|
41
27
|
name: string;
|
|
42
28
|
}
|
|
43
|
-
export type ModeInstance<T extends
|
|
29
|
+
export type ModeInstance<T extends SimpleTokenSchema> = {
|
|
44
30
|
values: ModeValues<T>;
|
|
45
31
|
schema: ModeSchema<T>;
|
|
46
32
|
config: ModeConfig;
|
|
47
33
|
};
|
|
48
|
-
export type PartialModeInstance<T extends
|
|
34
|
+
export type PartialModeInstance<T extends SimpleTokenSchema> = Omit<ModeInstance<T>, 'values'> & {
|
|
49
35
|
values: DeepPartial<ModeValues<T>>;
|
|
50
36
|
};
|
|
51
|
-
export type ModeTokens<T> = T extends object ? {
|
|
52
|
-
[P in keyof T]: NonNullable<T[P]> extends string ? Token : NonNullable<T[P]> extends object ? ModeTokens<NonNullable<T[P]>> : never;
|
|
53
|
-
} : never;
|
|
54
37
|
export declare function flattenToPropsList(obj: any): Token[];
|
|
38
|
+
export declare function createModeSchema<T extends SimpleTokenSchema>(input: T, { tag, extraCss, createToken: createTokenValue, }: {
|
|
39
|
+
tag?: string;
|
|
40
|
+
extraCss?: string;
|
|
41
|
+
createToken: CreateToken;
|
|
42
|
+
}): ModeSchema<T>;
|
|
55
43
|
//# sourceMappingURL=createModeSchema.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createModeSchema.d.ts","sourceRoot":"","sources":["../src/createModeSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,iBAAiB,CAAC;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"createModeSchema.d.ts","sourceRoot":"","sources":["../src/createModeSchema.ts"],"names":[],"mappings":"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"}
|
package/dist/createModeSchema.js
CHANGED
|
@@ -1,26 +1,25 @@
|
|
|
1
1
|
import { isCalcEquation } from '@arbor-css/calc';
|
|
2
|
-
import { isToken } from '@arbor-css/tokens';
|
|
3
|
-
function
|
|
4
|
-
return (
|
|
5
|
-
(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
value.type !== undefined));
|
|
2
|
+
import { convertSimpleTokenSchema, isToken, } from '@arbor-css/tokens';
|
|
3
|
+
export function isModeValue(value) {
|
|
4
|
+
return (isCalcEquation(value) ||
|
|
5
|
+
isToken(value) ||
|
|
6
|
+
typeof value === 'string' ||
|
|
7
|
+
typeof value === 'number');
|
|
9
8
|
}
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
});
|
|
9
|
+
export function flattenToPropsList(obj) {
|
|
10
|
+
const propsList = [];
|
|
11
|
+
for (const key in obj) {
|
|
12
|
+
if (isToken(obj[key])) {
|
|
13
|
+
propsList.push(obj[key]);
|
|
14
|
+
}
|
|
15
|
+
else if (typeof obj[key] === 'object' && obj[key] !== null) {
|
|
16
|
+
propsList.push(...flattenToPropsList(obj[key]));
|
|
17
|
+
}
|
|
20
18
|
}
|
|
19
|
+
return propsList;
|
|
21
20
|
}
|
|
22
21
|
export function createModeSchema(input, { tag = '', extraCss, createToken: createTokenValue, }) {
|
|
23
|
-
const PROPS =
|
|
22
|
+
const PROPS = convertSimpleTokenSchema(input, tag, createTokenValue);
|
|
24
23
|
const schema = {
|
|
25
24
|
definition: input,
|
|
26
25
|
tag,
|
|
@@ -57,47 +56,4 @@ export function createModeSchema(input, { tag = '', extraCss, createToken: creat
|
|
|
57
56
|
};
|
|
58
57
|
return schema;
|
|
59
58
|
}
|
|
60
|
-
export function isModeValue(value) {
|
|
61
|
-
return (isCalcEquation(value) ||
|
|
62
|
-
isToken(value) ||
|
|
63
|
-
typeof value === 'string' ||
|
|
64
|
-
typeof value === 'number');
|
|
65
|
-
}
|
|
66
|
-
function createModeTokens(root, tag, createTokenValue) {
|
|
67
|
-
function generatePropsForSchemaLevel(schemaLevel, propPrefix) {
|
|
68
|
-
const propsLevel = {};
|
|
69
|
-
for (const key in schemaLevel) {
|
|
70
|
-
const value = schemaLevel[key];
|
|
71
|
-
if (key === '$root') {
|
|
72
|
-
// $root generates a token at the current group path (no segment appended)
|
|
73
|
-
if (isModeSchemaProperty(value)) {
|
|
74
|
-
propsLevel.$root = getModeSchemaPropertyAsPropertyDefinition(propPrefix, value, createTokenValue, propPrefix);
|
|
75
|
-
}
|
|
76
|
-
continue;
|
|
77
|
-
}
|
|
78
|
-
const currentPrefix = [propPrefix, key].filter(Boolean).join('-');
|
|
79
|
-
if (isModeSchemaProperty(value)) {
|
|
80
|
-
const propertyDefinition = getModeSchemaPropertyAsPropertyDefinition(currentPrefix, value, createTokenValue, propPrefix);
|
|
81
|
-
propsLevel[key] = propertyDefinition;
|
|
82
|
-
}
|
|
83
|
-
else if (typeof value === 'object' && value !== null) {
|
|
84
|
-
propsLevel[key] = generatePropsForSchemaLevel(value, currentPrefix);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
return propsLevel;
|
|
88
|
-
}
|
|
89
|
-
return generatePropsForSchemaLevel(root, tag);
|
|
90
|
-
}
|
|
91
|
-
export function flattenToPropsList(obj) {
|
|
92
|
-
const propsList = [];
|
|
93
|
-
for (const key in obj) {
|
|
94
|
-
if (isToken(obj[key])) {
|
|
95
|
-
propsList.push(obj[key]);
|
|
96
|
-
}
|
|
97
|
-
else if (typeof obj[key] === 'object' && obj[key] !== null) {
|
|
98
|
-
propsList.push(...flattenToPropsList(obj[key]));
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
return propsList;
|
|
102
|
-
}
|
|
103
59
|
//# sourceMappingURL=createModeSchema.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createModeSchema.js","sourceRoot":"","sources":["../src/createModeSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"createModeSchema.js","sourceRoot":"","sources":["../src/createModeSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EACN,wBAAwB,EAExB,OAAO,GAKP,MAAM,mBAAmB,CAAC;AA6B3B,MAAM,UAAU,WAAW,CAAC,KAAU;IACrC,OAAO,CACN,cAAc,CAAC,KAAK,CAAC;QACrB,OAAO,CAAC,KAAK,CAAC;QACd,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ,CACzB,CAAC;AACH,CAAC;AAyBD,MAAM,UAAU,kBAAkB,CAAC,GAAQ;IAC1C,MAAM,SAAS,GAAY,EAAE,CAAC;IAC9B,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YACvB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAC1B,CAAC;aAAM,IAAI,OAAO,GAAG,CAAC,GAAG,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;YAC9D,SAAS,CAAC,IAAI,CAAC,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjD,CAAC;IACF,CAAC;IACD,OAAO,SAAS,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC/B,KAAQ,EACR,EACC,GAAG,GAAG,EAAE,EACR,QAAQ,EACR,WAAW,EAAE,gBAAgB,GAK7B;IAED,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAK,EAAE,GAAG,EAAE,gBAAgB,CAAC,CAAC;IACrE,MAAM,MAAM,GAAG;QACd,UAAU,EAAE,KAAK;QACjB,GAAG;QACH,OAAO,EAAE,KAAK;QACd,QAAQ;QACR,UAAU,EAAE,CAAC,GAAkB,EAAE,EAAE;YAClC,OAAO;gBACN,MAAM,EAAE,GAAG;gBACX,MAAM;gBACN,MAAM,EAAE;oBACP,IAAI,EAAE,MAAM;iBACZ;aACD,CAAC;QACH,CAAC;QACD,aAAa,EAAE,CAAC,IAAY,EAAE,GAA+B,EAAE,EAAE;YAChE,OAAO;gBACN,MAAM,EAAE,GAAG;gBACX,MAAM;gBACN,MAAM,EAAE;oBACP,IAAI;iBACJ;aACD,CAAC;QACH,CAAC;QACD,MAAM,EAAE,CACP,SAA2B,EAC1B,EAAE;YACH,MAAM,kBAAkB,GAAG;gBAC1B,GAAG,MAAM,CAAC,UAAU;gBACpB,GAAG,SAAS;aACY,CAAC;YAC1B,OAAO,gBAAgB,CAAC,kBAAkB,EAAE;gBAC3C,GAAG,EAAE,MAAM,CAAC,GAAG;gBACf,WAAW,EAAE,gBAAgB;aAC7B,CAAC,CAAC;QACJ,CAAC;KACD,CAAC;IACF,OAAO,MAAM,CAAC;AACf,CAAC"}
|
package/dist/modeToCss.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { SystemTokens } from '@arbor-css/globals';
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import { SimpleTokenSchema } from '@arbor-css/tokens';
|
|
3
|
+
import { ModeInstance, PartialModeInstance } from './createModeSchema.js';
|
|
4
|
+
export declare function modeToCss<TModeShape extends SimpleTokenSchema>(mode: PartialModeInstance<TModeShape>, baseMode: ModeInstance<TModeShape>, { systemProps, }: {
|
|
4
5
|
systemProps: SystemTokens;
|
|
5
6
|
}): string;
|
|
6
7
|
//# sourceMappingURL=modeToCss.d.ts.map
|
package/dist/modeToCss.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modeToCss.d.ts","sourceRoot":"","sources":["../src/modeToCss.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"modeToCss.d.ts","sourceRoot":"","sources":["../src/modeToCss.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAW,iBAAiB,EAAS,MAAM,mBAAmB,CAAC;AAEtE,OAAO,EAEN,YAAY,EAEZ,mBAAmB,EACnB,MAAM,uBAAuB,CAAC;AAgD/B,wBAAgB,SAAS,CAAC,UAAU,SAAS,iBAAiB,EAC7D,IAAI,EAAE,mBAAmB,CAAC,UAAU,CAAC,EACrC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,EAClC,EACC,WAAW,GACX,EAAE;IACF,WAAW,EAAE,YAAY,CAAC;CAC1B,GACC,MAAM,CAoDR"}
|
package/dist/modeToCss.js
CHANGED
|
@@ -81,7 +81,7 @@ export function modeToCss(mode, baseMode, { systemProps, }) {
|
|
|
81
81
|
[data-mode-${mode.config.name}=""],
|
|
82
82
|
:where(.\\@mode-${mode.config.name} [class^="\\@scheme-"]),
|
|
83
83
|
:where([data-mode-${mode.config.name}=""] [class^="\\@scheme-"]) {
|
|
84
|
-
${systemProps.
|
|
84
|
+
${systemProps.meta.modeName.assign(mode.config.name)}
|
|
85
85
|
${content}
|
|
86
86
|
}
|
|
87
87
|
`;
|
package/dist/modeToCss.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modeToCss.js","sourceRoot":"","sources":["../src/modeToCss.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"modeToCss.js","sourceRoot":"","sources":["../src/modeToCss.ts"],"names":[],"mappings":"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"}
|
package/dist/modeToCss.test.js
CHANGED
|
@@ -33,51 +33,51 @@ const underivedMode = testSchema.createPartial('underived', {
|
|
|
33
33
|
});
|
|
34
34
|
it('prints a base mode with derived values', () => {
|
|
35
35
|
const css = modeToCss(baseMode, baseMode, { systemProps });
|
|
36
|
-
expect(css).toMatchInlineSnapshot(`
|
|
37
|
-
".\\@mode-base,
|
|
38
|
-
[data-mode-base=""],
|
|
39
|
-
:where(.\\@mode-base [class^="\\@scheme-"]),
|
|
40
|
-
:where([data-mode-base=""] [class^="\\@scheme-"]) {
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
"
|
|
36
|
+
expect(css).toMatchInlineSnapshot(`
|
|
37
|
+
".\\@mode-base,
|
|
38
|
+
[data-mode-base=""],
|
|
39
|
+
:where(.\\@mode-base [class^="\\@scheme-"]),
|
|
40
|
+
:where([data-mode-base=""] [class^="\\@scheme-"]) {
|
|
41
|
+
--_-system-modeName: base;
|
|
42
|
+
--m-derived-once: color-mix(in hsl, var(--m-value), black);
|
|
43
|
+
--m-derived-twice: color-mix(in hsl, var(--m-derived-once), transparent);
|
|
44
|
+
--m-derived-again: color-mix(in hsl, var(--m-value), red);
|
|
45
|
+
--m-value: red;
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
"
|
|
49
49
|
`);
|
|
50
50
|
});
|
|
51
51
|
it('prints a partial mode with derived dependencies it doesnt declare', () => {
|
|
52
52
|
const css = modeToCss(partialMode, baseMode, { systemProps });
|
|
53
|
-
expect(css).toMatchInlineSnapshot(`
|
|
54
|
-
".\\@mode-partial,
|
|
55
|
-
[data-mode-partial=""],
|
|
56
|
-
:where(.\\@mode-partial [class^="\\@scheme-"]),
|
|
57
|
-
:where([data-mode-partial=""] [class^="\\@scheme-"]) {
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
"
|
|
53
|
+
expect(css).toMatchInlineSnapshot(`
|
|
54
|
+
".\\@mode-partial,
|
|
55
|
+
[data-mode-partial=""],
|
|
56
|
+
:where(.\\@mode-partial [class^="\\@scheme-"]),
|
|
57
|
+
:where([data-mode-partial=""] [class^="\\@scheme-"]) {
|
|
58
|
+
--_-system-modeName: partial;
|
|
59
|
+
--m-derived-once: color-mix(in hsl, var(--m-value), black);
|
|
60
|
+
--m-derived-twice: color-mix(in hsl, var(--m-derived-once), transparent);
|
|
61
|
+
--m-derived-again: color-mix(in hsl, var(--m-value), red);
|
|
62
|
+
--m-value: blue;
|
|
63
|
+
|
|
64
|
+
}
|
|
65
|
+
"
|
|
66
66
|
`);
|
|
67
67
|
});
|
|
68
68
|
it('prints a partial mode which overrides derived dependencies from base and doesnt go upstream from there, but does go downstream to further derivations', () => {
|
|
69
69
|
const css = modeToCss(underivedMode, baseMode, { systemProps });
|
|
70
|
-
expect(css).toMatchInlineSnapshot(`
|
|
71
|
-
".\\@mode-underived,
|
|
72
|
-
[data-mode-underived=""],
|
|
73
|
-
:where(.\\@mode-underived [class^="\\@scheme-"]),
|
|
74
|
-
:where([data-mode-underived=""] [class^="\\@scheme-"]) {
|
|
75
|
-
--
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
"
|
|
70
|
+
expect(css).toMatchInlineSnapshot(`
|
|
71
|
+
".\\@mode-underived,
|
|
72
|
+
[data-mode-underived=""],
|
|
73
|
+
:where(.\\@mode-underived [class^="\\@scheme-"]),
|
|
74
|
+
:where([data-mode-underived=""] [class^="\\@scheme-"]) {
|
|
75
|
+
--_-system-modeName: underived;
|
|
76
|
+
--m-derived-twice: color-mix(in hsl, var(--m-derived-once), transparent);
|
|
77
|
+
--m-derived-once: green;
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
"
|
|
81
81
|
`);
|
|
82
82
|
});
|
|
83
83
|
// $root tests
|
|
@@ -101,13 +101,13 @@ const rootBase = rootSchema.createBase({
|
|
|
101
101
|
});
|
|
102
102
|
it('$root at nested level generates CSS var at group path (no -$root suffix)', () => {
|
|
103
103
|
const css = modeToCss(rootBase, rootBase, { systemProps });
|
|
104
|
-
expect(css).toContain('--
|
|
105
|
-
expect(css).not.toContain('--
|
|
104
|
+
expect(css).toContain('--m-colors-main: oklch(0.5 0.1 240)');
|
|
105
|
+
expect(css).not.toContain('--m-colors-main-$root');
|
|
106
106
|
});
|
|
107
107
|
it('$root and sibling keys coexist and both emit correctly', () => {
|
|
108
108
|
const css = modeToCss(rootBase, rootBase, { systemProps });
|
|
109
|
-
expect(css).toContain('--
|
|
110
|
-
expect(css).toContain('--
|
|
109
|
+
expect(css).toContain('--m-colors-main: oklch(0.5 0.1 240)');
|
|
110
|
+
expect(css).toContain('--m-colors-main-mid: oklch(0.6 0.1 240)');
|
|
111
111
|
});
|
|
112
112
|
it('partial mode override of $root maps correctly', () => {
|
|
113
113
|
const partial = rootSchema.createPartial('alt', {
|
|
@@ -118,8 +118,8 @@ it('partial mode override of $root maps correctly', () => {
|
|
|
118
118
|
},
|
|
119
119
|
});
|
|
120
120
|
const css = modeToCss(partial, rootBase, { systemProps });
|
|
121
|
-
expect(css).toContain('--
|
|
122
|
-
expect(css).not.toContain('--
|
|
121
|
+
expect(css).toContain('--m-colors-main: oklch(0.7 0.2 30)');
|
|
122
|
+
expect(css).not.toContain('--m-colors-main-mid');
|
|
123
123
|
});
|
|
124
124
|
it('throws with full token chain for circular derived dependencies', () => {
|
|
125
125
|
const circularSchema = createModeSchema({
|
|
@@ -138,6 +138,6 @@ it('throws with full token chain for circular derived dependencies', () => {
|
|
|
138
138
|
b: css `color-mix(in hsl, ${circularSchema.$tokens.derived.a}, black)`,
|
|
139
139
|
},
|
|
140
140
|
});
|
|
141
|
-
expect(() => modeToCss(circularBase, circularBase, { systemProps })).toThrow(/Circular dependency detected in mode base: .*--
|
|
141
|
+
expect(() => modeToCss(circularBase, circularBase, { systemProps })).toThrow(/Circular dependency detected in mode base: .*--m-derived-a.*->.*--m-derived-b.*->.*--m-derived-a/);
|
|
142
142
|
});
|
|
143
143
|
//# sourceMappingURL=modeToCss.test.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arbor-css/modes",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.63",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"vitest": "^4.1.7"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@arbor-css/tokens": "0.0.
|
|
29
|
-
"@arbor-css/globals": "0.0.
|
|
30
|
-
"@arbor-css/calc": "0.0.
|
|
31
|
-
"@arbor-css/util": "0.0.
|
|
28
|
+
"@arbor-css/tokens": "0.0.63",
|
|
29
|
+
"@arbor-css/globals": "0.0.63",
|
|
30
|
+
"@arbor-css/calc": "0.0.63",
|
|
31
|
+
"@arbor-css/util": "0.0.63"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "tsc",
|