@nordcraft/core 1.0.50 → 1.0.51
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/component/component.types.d.ts +1 -0
- package/dist/component/component.types.js.map +1 -1
- package/dist/styling/customProperty.d.ts +2 -2
- package/dist/styling/customProperty.js +51 -7
- package/dist/styling/customProperty.js.map +1 -1
- package/dist/styling/style.css.d.ts +1 -1
- package/dist/styling/style.css.js +16 -10
- package/dist/styling/style.css.js.map +1 -1
- package/dist/styling/theme.d.ts +15 -13
- package/dist/styling/theme.js +74 -16
- package/dist/styling/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/component/component.types.ts +1 -0
- package/src/styling/customProperty.test.ts +84 -3
- package/src/styling/customProperty.ts +61 -7
- package/src/styling/style.css.ts +25 -14
- package/src/styling/theme.test.ts +40 -0
- package/src/styling/theme.ts +112 -33
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.types.js","sourceRoot":"","sources":["../../src/component/component.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"component.types.js","sourceRoot":"","sources":["../../src/component/component.types.ts"],"names":[],"mappings":"AAqRA,MAAM,CAAN,IAAY,YAMX;AAND,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,iCAAiB,CAAA;IACjB,qCAAqB,CAAA;IACrB,+BAAe,CAAA;AACjB,CAAC,EANW,YAAY,KAAZ,YAAY,QAMvB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { CustomPropertyName } from '../component/component.types';
|
|
2
|
-
import type { CustomPropertyDefinition } from './theme';
|
|
2
|
+
import type { CustomPropertyDefinition, Theme } from './theme';
|
|
3
3
|
export type CssSyntax = 'angle' | 'color' | 'custom-ident' | 'image' | 'integer' | 'length' | 'length-percentage' | 'number' | 'percentage' | 'resolution' | 'string' | 'time' | 'transform-function' | 'transform-list' | 'url' | '*';
|
|
4
4
|
export type CssSyntaxNode = {
|
|
5
5
|
type: 'primitive';
|
|
@@ -9,4 +9,4 @@ export type CssSyntaxNode = {
|
|
|
9
9
|
keywords: string[];
|
|
10
10
|
};
|
|
11
11
|
export declare function stringifySyntaxNode(node: CssSyntaxNode): string;
|
|
12
|
-
export declare function renderSyntaxDefinition(key: CustomPropertyName, { syntax, inherits, initialValue }: CustomPropertyDefinition): string;
|
|
12
|
+
export declare function renderSyntaxDefinition(key: CustomPropertyName, { syntax, inherits, initialValue }: CustomPropertyDefinition, defaultTheme: Theme): string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isDefined } from '../utils/util';
|
|
1
2
|
export function stringifySyntaxNode(node) {
|
|
2
3
|
switch (node.type) {
|
|
3
4
|
case 'primitive':
|
|
@@ -8,16 +9,59 @@ export function stringifySyntaxNode(node) {
|
|
|
8
9
|
throw new Error(`Unknown syntax node type: ${node.type}`);
|
|
9
10
|
}
|
|
10
11
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
export function renderSyntaxDefinition(key, { syntax, inherits, initialValue }, defaultTheme) {
|
|
13
|
+
let value = initialValue;
|
|
14
|
+
if (initialValue?.includes('var(--')) {
|
|
15
|
+
value = solveVarRecursively(initialValue, defaultTheme);
|
|
16
|
+
}
|
|
17
|
+
// Fallback in-case of no reference
|
|
18
|
+
if (!isDefined(value) && syntax.type === 'primitive') {
|
|
19
|
+
value = FALLBACK_VALUES[syntax.name];
|
|
20
|
+
}
|
|
17
21
|
return `@property ${key} {
|
|
18
22
|
syntax: "${stringifySyntaxNode(syntax)}";
|
|
19
23
|
inherits: ${String(inherits)};
|
|
20
|
-
initial-value: ${
|
|
24
|
+
initial-value: ${value};
|
|
21
25
|
}`;
|
|
22
26
|
}
|
|
27
|
+
function solveVarRecursively(initialValue, theme, depth = 0) {
|
|
28
|
+
// This makes a crazy assumption that no person would create a web of style-variable referencing deeper than 256
|
|
29
|
+
if (depth > 2 ** 8) {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
const VAR_REGEX = /var\((--[a-zA-Z0-9-_]+)\)/g;
|
|
33
|
+
let match;
|
|
34
|
+
while ((match = VAR_REGEX.exec(initialValue))) {
|
|
35
|
+
const varName = match[1];
|
|
36
|
+
const def = theme.propertyDefinitions?.[varName];
|
|
37
|
+
if (!isDefined(def)) {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
const value = def.initialValue;
|
|
41
|
+
const returnValue = initialValue.replace(match[0], String(value));
|
|
42
|
+
if (returnValue.includes('var(--')) {
|
|
43
|
+
return solveVarRecursively(returnValue, theme, depth + 1);
|
|
44
|
+
}
|
|
45
|
+
return returnValue;
|
|
46
|
+
}
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
const FALLBACK_VALUES = {
|
|
50
|
+
color: 'transparent',
|
|
51
|
+
length: '0px',
|
|
52
|
+
'length-percentage': '0px',
|
|
53
|
+
percentage: '0%',
|
|
54
|
+
number: '0',
|
|
55
|
+
angle: '0deg',
|
|
56
|
+
time: '0s',
|
|
57
|
+
resolution: '0dpi',
|
|
58
|
+
'custom-ident': 'none',
|
|
59
|
+
string: '""',
|
|
60
|
+
image: 'none',
|
|
61
|
+
url: 'none',
|
|
62
|
+
'transform-function': 'none',
|
|
63
|
+
'transform-list': 'none',
|
|
64
|
+
'*': 'initial',
|
|
65
|
+
integer: '0',
|
|
66
|
+
};
|
|
23
67
|
//# sourceMappingURL=customProperty.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customProperty.js","sourceRoot":"","sources":["../../src/styling/customProperty.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"customProperty.js","sourceRoot":"","sources":["../../src/styling/customProperty.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAgCzC,MAAM,UAAU,mBAAmB,CAAC,IAAmB;IACrD,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,CAAA;QACzB,KAAK,SAAS;YACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAClC;YACE,MAAM,IAAI,KAAK,CAAC,6BAA8B,IAAY,CAAC,IAAI,EAAE,CAAC,CAAA;IACtE,CAAC;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CACpC,GAAuB,EACvB,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAA4B,EAC5D,YAAmB;IAEnB,IAAI,KAAK,GAAG,YAAY,CAAA;IACxB,IAAI,YAAY,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrC,KAAK,GAAG,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAA;IACzD,CAAC;IAED,mCAAmC;IACnC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;QACrD,KAAK,GAAG,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACtC,CAAC;IAED,OAAO,aAAa,GAAG;aACZ,mBAAmB,CAAC,MAAM,CAAC;cAC1B,MAAM,CAAC,QAAQ,CAAC;mBACX,KAAK;EACtB,CAAA;AACF,CAAC;AAED,SAAS,mBAAmB,CAAC,YAAoB,EAAE,KAAY,EAAE,KAAK,GAAG,CAAC;IACxE,gHAAgH;IAChH,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QACnB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,SAAS,GAAG,4BAA4B,CAAA;IAE9C,IAAI,KAAK,CAAA;IACT,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;QAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;QACxB,MAAM,GAAG,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,OAA6B,CAAC,CAAA;QACtE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;YACpB,OAAO,IAAI,CAAA;QACb,CAAC;QAED,MAAM,KAAK,GAAG,GAAG,CAAC,YAAY,CAAA;QAC9B,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;QACjE,IAAI,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnC,OAAO,mBAAmB,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;QAC3D,CAAC;QAED,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,eAAe,GAA8B;IACjD,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,KAAK;IACb,mBAAmB,EAAE,KAAK;IAC1B,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,MAAM;IAClB,cAAc,EAAE,MAAM;IACtB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,oBAAoB,EAAE,MAAM;IAC5B,gBAAgB,EAAE,MAAM;IACxB,GAAG,EAAE,SAAS;IACd,OAAO,EAAE,GAAG;CACb,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Component } from '../component/component.types';
|
|
2
2
|
import type { OldTheme, Theme, ThemeOptions } from './theme';
|
|
3
3
|
export declare function kebabCase(string: string): string;
|
|
4
|
-
export declare const createStylesheet: (root: Component, components: Component[],
|
|
4
|
+
export declare const createStylesheet: (root: Component, components: Component[], themes: Record<string, OldTheme | Theme>, options: ThemeOptions) => string;
|
|
5
5
|
export declare const getAllFonts: (components: Component[]) => Set<string>;
|
|
@@ -55,21 +55,27 @@ const SIZE_PROPERTIES = new Set([
|
|
|
55
55
|
'left',
|
|
56
56
|
'outline-width',
|
|
57
57
|
]);
|
|
58
|
-
export const createStylesheet = (root, components,
|
|
58
|
+
export const createStylesheet = (root, components, themes, options) => {
|
|
59
59
|
const hashes = new Set();
|
|
60
60
|
const animationHashes = new Set();
|
|
61
61
|
// Get fonts used on the page
|
|
62
62
|
const fonts = getAllFonts(components);
|
|
63
63
|
//Exclude fonts that are not used on this page.
|
|
64
|
-
let stylesheet = getThemeCss('breakpoints' in theme
|
|
65
|
-
?
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
let stylesheet = getThemeCss(Object.fromEntries(Object.entries(themes).map(([key, theme]) => 'breakpoints' in theme
|
|
65
|
+
? [
|
|
66
|
+
key,
|
|
67
|
+
{
|
|
68
|
+
...theme,
|
|
69
|
+
fontFamily: Object.fromEntries(Object.entries(theme.fontFamily).filter(([key, value]) => value.default ?? fonts.has('--font-' + key))),
|
|
70
|
+
},
|
|
71
|
+
]
|
|
72
|
+
: [
|
|
73
|
+
key,
|
|
74
|
+
{
|
|
75
|
+
...theme,
|
|
76
|
+
fonts: theme.fonts,
|
|
77
|
+
},
|
|
78
|
+
])), options);
|
|
73
79
|
const styleToCss = (style) => {
|
|
74
80
|
return Object.entries(style)
|
|
75
81
|
.map(([property, value]) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../src/styling/style.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAMrC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;CACZ,CAAA;AAED,MAAM,UAAU,SAAS,CAAC,MAAc;IACtC,OAAO,MAAM;SACV,KAAK,CAAC,EAAE,CAAC;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACZ,OAAO,4BAA4B,CAAC,QAAQ,CAAC,IAAI,CAAC;YAChD,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,iBAAiB,EAAE;YAChC,CAAC,CAAC,IAAI,CAAA;IACV,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAA;AACb,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC;IAC9B,OAAO;IACP,WAAW;IACX,WAAW;IACX,QAAQ;IACR,YAAY;IACZ,YAAY;IACZ,QAAQ;IACR,YAAY;IACZ,aAAa;IACb,eAAe;IACf,cAAc;IACd,SAAS;IACT,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,eAAe;IACf,KAAK;IACL,OAAO;IACP,OAAO;IACP,eAAe;IACf,2BAA2B;IAC3B,4BAA4B;IAC5B,wBAAwB;IACxB,yBAAyB;IACzB,cAAc;IACd,kBAAkB;IAClB,mBAAmB;IACnB,qBAAqB;IACrB,oBAAoB;IACpB,WAAW;IACX,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,eAAe;CAChB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAe,EACf,UAAuB,EACvB,
|
|
1
|
+
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../src/styling/style.css.ts"],"names":[],"mappings":"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"}
|
package/dist/styling/theme.d.ts
CHANGED
|
@@ -60,25 +60,27 @@ export type OldTheme = {
|
|
|
60
60
|
}>;
|
|
61
61
|
};
|
|
62
62
|
export type Theme = {
|
|
63
|
+
default?: true;
|
|
64
|
+
defaultDark?: true;
|
|
65
|
+
defaultLight?: true;
|
|
66
|
+
propertyDefinitions?: Record<CustomPropertyName, CustomPropertyDefinition>;
|
|
63
67
|
scheme?: 'dark' | 'light';
|
|
64
|
-
color
|
|
68
|
+
color?: StyleTokenGroup[];
|
|
65
69
|
fonts: FontFamily[];
|
|
66
|
-
'font-size'
|
|
67
|
-
'font-weight'
|
|
68
|
-
spacing
|
|
69
|
-
'border-radius'
|
|
70
|
-
shadow
|
|
71
|
-
'z-index'
|
|
72
|
-
categories?: Record<string, CustomCategory>;
|
|
73
|
-
};
|
|
74
|
-
export type CustomCategory = {
|
|
75
|
-
propertyDefinitions: Record<CustomPropertyName, CustomPropertyDefinition>;
|
|
70
|
+
'font-size'?: StyleTokenGroup[];
|
|
71
|
+
'font-weight'?: StyleTokenGroup[];
|
|
72
|
+
spacing?: StyleTokenGroup[];
|
|
73
|
+
'border-radius'?: StyleTokenGroup[];
|
|
74
|
+
shadow?: StyleTokenGroup[];
|
|
75
|
+
'z-index'?: StyleTokenGroup[];
|
|
76
76
|
};
|
|
77
77
|
export type CustomPropertyDefinition = {
|
|
78
78
|
syntax: CssSyntaxNode;
|
|
79
79
|
inherits: boolean;
|
|
80
|
-
initialValue: string;
|
|
80
|
+
initialValue: string | null;
|
|
81
|
+
value: string | null;
|
|
81
82
|
description: string;
|
|
82
83
|
};
|
|
83
|
-
export declare const getThemeCss: (theme:
|
|
84
|
+
export declare const getThemeCss: (theme: Record<string, OldTheme | Theme>, options: ThemeOptions) => string;
|
|
84
85
|
export declare const getOldThemeCss: (theme: OldTheme) => string;
|
|
86
|
+
export declare function renderTheme(selector: string, theme: Theme | undefined, mediaQuery?: string): string;
|
package/dist/styling/theme.js
CHANGED
|
@@ -1,18 +1,40 @@
|
|
|
1
1
|
import { renderSyntaxDefinition } from './customProperty';
|
|
2
2
|
import { RESET_STYLES } from './theme.const';
|
|
3
3
|
export const getThemeCss = (theme, options) => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
const [themesV1, themesV2] = Object.entries(theme).reduce(([legacy, modern], [key, value]) => {
|
|
5
|
+
if ('breakpoints' in value) {
|
|
6
|
+
legacy[key] = value;
|
|
7
|
+
}
|
|
8
|
+
else {
|
|
9
|
+
modern[key] = value;
|
|
10
|
+
}
|
|
11
|
+
return [legacy, modern];
|
|
12
|
+
}, [{}, {}]);
|
|
13
|
+
const defaultTheme = Object.values(themesV2).find((t) => t.default) ?? Object.values(themesV2)[0];
|
|
14
|
+
const defaultDarkTheme = Object.values(themesV2).find((t) => t.defaultDark);
|
|
15
|
+
const defaultLightTheme = Object.values(themesV2).find((t) => t.defaultLight);
|
|
16
|
+
return `
|
|
17
|
+
${Object.values(themesV1)
|
|
18
|
+
.map((t) => getOldThemeCss(t))
|
|
19
|
+
.join('\n')}
|
|
20
|
+
|
|
21
|
+
${Object.entries(defaultTheme.propertyDefinitions ?? {})
|
|
22
|
+
.map(([propertyName, property]) => renderSyntaxDefinition(propertyName, property, defaultTheme))
|
|
23
|
+
.join('\n')}
|
|
24
|
+
|
|
25
|
+
${renderTheme(':host, :root', defaultTheme)}
|
|
26
|
+
${renderTheme(':host, :root', defaultDarkTheme, '@media (prefers-color-scheme: dark)')}
|
|
27
|
+
${renderTheme(':host, :root', defaultLightTheme, '@media (prefers-color-scheme: light)')}
|
|
28
|
+
${Object.entries(themesV2)
|
|
29
|
+
.map(([key, t]) => renderTheme(`[data-theme~="${key}"]`, t))
|
|
11
30
|
.join('\n')}
|
|
31
|
+
|
|
12
32
|
${options.includeResetStyle ? RESET_STYLES : ''}
|
|
13
33
|
@layer base {
|
|
14
34
|
${options.createFontFaces
|
|
15
|
-
?
|
|
35
|
+
? Object.values(themesV2)
|
|
36
|
+
.map(({ fonts }) => fonts)
|
|
37
|
+
.flat()
|
|
16
38
|
.map((font) => `
|
|
17
39
|
${font.variants
|
|
18
40
|
.map((variant) => `
|
|
@@ -30,22 +52,30 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
30
52
|
: ''}
|
|
31
53
|
body, :host {
|
|
32
54
|
/* Color */
|
|
33
|
-
${
|
|
55
|
+
${Object.values(themesV2)
|
|
56
|
+
.map(({ color }) => color ?? [])
|
|
57
|
+
.flat()
|
|
34
58
|
.flatMap((group) => group.tokens.map((color) => `--${color.name}: ${color.value};`))
|
|
35
59
|
.join('\n')}
|
|
36
60
|
/* Fonts */
|
|
37
|
-
${
|
|
61
|
+
${Object.values(themesV2)
|
|
62
|
+
.map(({ fonts }) => fonts)
|
|
63
|
+
.flat()
|
|
38
64
|
.map((font) => `--font-${font.name}: '${font.family}',${font.type};`)
|
|
39
65
|
.join('\n')}
|
|
40
66
|
|
|
41
67
|
/* Font size */
|
|
42
|
-
${
|
|
68
|
+
${Object.values(themesV2)
|
|
69
|
+
.map(({ 'font-size': fontSize }) => fontSize ?? [])
|
|
70
|
+
.flat()
|
|
43
71
|
.flatMap((group) => group.tokens.map((variable) => `--${variable.name}: ${variable.type === 'variable'
|
|
44
72
|
? `var(--${variable.value})`
|
|
45
73
|
: variable.value};`))
|
|
46
74
|
.join('\n')}
|
|
47
75
|
/* Font weight */
|
|
48
|
-
${
|
|
76
|
+
${Object.values(themesV2)
|
|
77
|
+
.map(({ 'font-weight': fontWeight }) => fontWeight ?? [])
|
|
78
|
+
.flat()
|
|
49
79
|
.flatMap((group) => {
|
|
50
80
|
return group.tokens.map((variable) => `--${variable.name}: ${variable.type === 'variable'
|
|
51
81
|
? `var(--${variable.value})`
|
|
@@ -53,7 +83,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
53
83
|
})
|
|
54
84
|
.join('\n')}
|
|
55
85
|
/* Shadows */
|
|
56
|
-
${
|
|
86
|
+
${Object.values(themesV2)
|
|
87
|
+
.map(({ shadow }) => shadow ?? [])
|
|
88
|
+
.flat()
|
|
57
89
|
.flatMap((group) => {
|
|
58
90
|
return group.tokens.map((variable) => `--${variable.name}: ${variable.type === 'variable'
|
|
59
91
|
? `var(--${variable.value})`
|
|
@@ -61,13 +93,17 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
61
93
|
})
|
|
62
94
|
.join('\n')}
|
|
63
95
|
/* Border radius */
|
|
64
|
-
${
|
|
96
|
+
${Object.values(themesV2)
|
|
97
|
+
.map(({ 'border-radius': borderRadius }) => borderRadius ?? [])
|
|
98
|
+
.flat()
|
|
65
99
|
.flatMap((group) => {
|
|
66
100
|
return group.tokens.map((token) => `--${token.name}: ${token.type === 'variable' ? `var(--${token.value})` : token.value};`);
|
|
67
101
|
})
|
|
68
102
|
.join('\n')}
|
|
69
103
|
/* Spacing */
|
|
70
|
-
${
|
|
104
|
+
${Object.values(themesV2)
|
|
105
|
+
.map(({ spacing }) => spacing ?? [])
|
|
106
|
+
.flat()
|
|
71
107
|
.map((group) => {
|
|
72
108
|
return group.tokens
|
|
73
109
|
.map((token) => `--${token.name}: ${token.type === 'variable'
|
|
@@ -77,7 +113,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
77
113
|
})
|
|
78
114
|
.join('\n')}
|
|
79
115
|
/* Z-index */
|
|
80
|
-
${
|
|
116
|
+
${Object.values(themesV2)
|
|
117
|
+
.map(({ 'z-index': zIndex }) => zIndex ?? [])
|
|
118
|
+
.flat()
|
|
81
119
|
.map((group) => {
|
|
82
120
|
return group.tokens
|
|
83
121
|
.map((token) => `--${token.name}: ${token.type === 'variable'
|
|
@@ -195,4 +233,24 @@ ${RESET_STYLES}
|
|
|
195
233
|
}
|
|
196
234
|
}`;
|
|
197
235
|
};
|
|
236
|
+
export function renderTheme(selector, theme, mediaQuery) {
|
|
237
|
+
if (!theme?.propertyDefinitions) {
|
|
238
|
+
return '';
|
|
239
|
+
}
|
|
240
|
+
const properties = Object.entries(theme.propertyDefinitions).filter(([, property]) => property.value);
|
|
241
|
+
if (properties.length === 0) {
|
|
242
|
+
return '';
|
|
243
|
+
}
|
|
244
|
+
const css = `${selector} {
|
|
245
|
+
${properties
|
|
246
|
+
.map(([propertyName, property]) => `${propertyName}: ${property.value};`)
|
|
247
|
+
.join('\n ')}
|
|
248
|
+
}`;
|
|
249
|
+
if (mediaQuery) {
|
|
250
|
+
return `${mediaQuery} {
|
|
251
|
+
${css}
|
|
252
|
+
}`;
|
|
253
|
+
}
|
|
254
|
+
return css;
|
|
255
|
+
}
|
|
198
256
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styling/theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAsB,MAAM,kBAAkB,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styling/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { describe, expect, test } from 'bun:test'
|
|
2
2
|
import type { CssSyntax, CssSyntaxNode } from './customProperty'
|
|
3
3
|
import { renderSyntaxDefinition, stringifySyntaxNode } from './customProperty'
|
|
4
|
-
import type { CustomPropertyDefinition } from './theme'
|
|
4
|
+
import type { CustomPropertyDefinition, Theme } from './theme'
|
|
5
5
|
|
|
6
6
|
describe('stringifySyntaxNode()', () => {
|
|
7
|
-
;['length', 'number', 'percentage', 'length
|
|
7
|
+
;['length', 'number', 'percentage', 'length', 'color'].forEach(
|
|
8
8
|
(primitive) => {
|
|
9
9
|
test(
|
|
10
10
|
'it handles a comprehensive list of primitives: ' + primitive,
|
|
@@ -38,9 +38,90 @@ describe('renderSyntaxDefinition()', () => {
|
|
|
38
38
|
description: 'My custom property',
|
|
39
39
|
inherits: true,
|
|
40
40
|
initialValue: '0px',
|
|
41
|
+
value: 'var(--some-other-property)',
|
|
41
42
|
}
|
|
42
|
-
expect(
|
|
43
|
+
expect(
|
|
44
|
+
renderSyntaxDefinition('--my-property', property, {
|
|
45
|
+
fonts: [],
|
|
46
|
+
}),
|
|
47
|
+
).toBe(
|
|
43
48
|
'@property --my-property {\n syntax: "<length>";\n inherits: true;\n initial-value: 0px;\n}',
|
|
44
49
|
)
|
|
45
50
|
})
|
|
51
|
+
|
|
52
|
+
test('it solves var(--...) references', () => {
|
|
53
|
+
const themes: Record<string, Theme> = {
|
|
54
|
+
default: {
|
|
55
|
+
fonts: [],
|
|
56
|
+
propertyDefinitions: {
|
|
57
|
+
'--my-property': {
|
|
58
|
+
syntax: { type: 'primitive', name: 'color' },
|
|
59
|
+
description: '',
|
|
60
|
+
inherits: true,
|
|
61
|
+
initialValue: 'var(--primary-color)',
|
|
62
|
+
value: 'rebeccapurple',
|
|
63
|
+
},
|
|
64
|
+
'--primary-color': {
|
|
65
|
+
syntax: { type: 'primitive', name: 'color' },
|
|
66
|
+
description: '',
|
|
67
|
+
inherits: true,
|
|
68
|
+
initialValue: 'var(--red-500)',
|
|
69
|
+
value: 'rebeccapurple',
|
|
70
|
+
},
|
|
71
|
+
'--red-500': {
|
|
72
|
+
syntax: { type: 'primitive', name: 'color' },
|
|
73
|
+
description: '',
|
|
74
|
+
inherits: true,
|
|
75
|
+
initialValue: '#f00',
|
|
76
|
+
value: 'rebeccapurple',
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
expect(
|
|
83
|
+
renderSyntaxDefinition(
|
|
84
|
+
'--my-property',
|
|
85
|
+
themes.default.propertyDefinitions!['--my-property'],
|
|
86
|
+
themes.default,
|
|
87
|
+
),
|
|
88
|
+
).toMatchInlineSnapshot(`
|
|
89
|
+
"@property --my-property {
|
|
90
|
+
syntax: "<color>";
|
|
91
|
+
inherits: true;
|
|
92
|
+
initial-value: #f00;
|
|
93
|
+
}"
|
|
94
|
+
`)
|
|
95
|
+
})
|
|
96
|
+
|
|
97
|
+
test('it renders a fallback initial-value on broken references', () => {
|
|
98
|
+
const themes: Record<string, Theme> = {
|
|
99
|
+
default: {
|
|
100
|
+
fonts: [],
|
|
101
|
+
propertyDefinitions: {
|
|
102
|
+
'--my-property': {
|
|
103
|
+
syntax: { type: 'primitive', name: 'color' },
|
|
104
|
+
description: '',
|
|
105
|
+
inherits: true,
|
|
106
|
+
initialValue: 'var(--unknown-color)',
|
|
107
|
+
value: 'rebeccapurple',
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
expect(
|
|
114
|
+
renderSyntaxDefinition(
|
|
115
|
+
'--my-property',
|
|
116
|
+
themes.default.propertyDefinitions!['--my-property'],
|
|
117
|
+
themes.default,
|
|
118
|
+
),
|
|
119
|
+
).toMatchInlineSnapshot(`
|
|
120
|
+
"@property --my-property {
|
|
121
|
+
syntax: "<color>";
|
|
122
|
+
inherits: true;
|
|
123
|
+
initial-value: transparent;
|
|
124
|
+
}"
|
|
125
|
+
`)
|
|
126
|
+
})
|
|
46
127
|
})
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { CustomPropertyName } from '../component/component.types'
|
|
2
|
-
import
|
|
2
|
+
import { isDefined } from '../utils/util'
|
|
3
|
+
import type { CustomPropertyDefinition, Theme } from './theme'
|
|
3
4
|
|
|
4
5
|
// See https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
|
|
5
6
|
export type CssSyntax =
|
|
@@ -41,18 +42,71 @@ export function stringifySyntaxNode(node: CssSyntaxNode): string {
|
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
/*
|
|
45
|
-
TODO: `initialValue` does not support referencing other properties (e.g. var(--some-other-property))
|
|
46
|
-
To Fix this, we could either statically solve by accessing theme at SSR, but to handle theme-switching at runtime,
|
|
47
|
-
we would instead need to do `:root { --my-property: var(--some-other-property); }` for properties that need to reference other properties.
|
|
48
|
-
*/
|
|
49
45
|
export function renderSyntaxDefinition(
|
|
50
46
|
key: CustomPropertyName,
|
|
51
47
|
{ syntax, inherits, initialValue }: CustomPropertyDefinition,
|
|
48
|
+
defaultTheme: Theme,
|
|
52
49
|
): string {
|
|
50
|
+
let value = initialValue
|
|
51
|
+
if (initialValue?.includes('var(--')) {
|
|
52
|
+
value = solveVarRecursively(initialValue, defaultTheme)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Fallback in-case of no reference
|
|
56
|
+
if (!isDefined(value) && syntax.type === 'primitive') {
|
|
57
|
+
value = FALLBACK_VALUES[syntax.name]
|
|
58
|
+
}
|
|
59
|
+
|
|
53
60
|
return `@property ${key} {
|
|
54
61
|
syntax: "${stringifySyntaxNode(syntax)}";
|
|
55
62
|
inherits: ${String(inherits)};
|
|
56
|
-
initial-value: ${
|
|
63
|
+
initial-value: ${value};
|
|
57
64
|
}`
|
|
58
65
|
}
|
|
66
|
+
|
|
67
|
+
function solveVarRecursively(initialValue: string, theme: Theme, depth = 0) {
|
|
68
|
+
// This makes a crazy assumption that no person would create a web of style-variable referencing deeper than 256
|
|
69
|
+
if (depth > 2 ** 8) {
|
|
70
|
+
return null
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const VAR_REGEX = /var\((--[a-zA-Z0-9-_]+)\)/g
|
|
74
|
+
|
|
75
|
+
let match
|
|
76
|
+
while ((match = VAR_REGEX.exec(initialValue))) {
|
|
77
|
+
const varName = match[1]
|
|
78
|
+
const def = theme.propertyDefinitions?.[varName as CustomPropertyName]
|
|
79
|
+
if (!isDefined(def)) {
|
|
80
|
+
return null
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const value = def.initialValue
|
|
84
|
+
const returnValue = initialValue.replace(match[0], String(value))
|
|
85
|
+
if (returnValue.includes('var(--')) {
|
|
86
|
+
return solveVarRecursively(returnValue, theme, depth + 1)
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return returnValue
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return null
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const FALLBACK_VALUES: Record<CssSyntax, string> = {
|
|
96
|
+
color: 'transparent',
|
|
97
|
+
length: '0px',
|
|
98
|
+
'length-percentage': '0px',
|
|
99
|
+
percentage: '0%',
|
|
100
|
+
number: '0',
|
|
101
|
+
angle: '0deg',
|
|
102
|
+
time: '0s',
|
|
103
|
+
resolution: '0dpi',
|
|
104
|
+
'custom-ident': 'none',
|
|
105
|
+
string: '""',
|
|
106
|
+
image: 'none',
|
|
107
|
+
url: 'none',
|
|
108
|
+
'transform-function': 'none',
|
|
109
|
+
'transform-list': 'none',
|
|
110
|
+
'*': 'initial',
|
|
111
|
+
integer: '0',
|
|
112
|
+
}
|
package/src/styling/style.css.ts
CHANGED
|
@@ -70,7 +70,7 @@ const SIZE_PROPERTIES = new Set([
|
|
|
70
70
|
export const createStylesheet = (
|
|
71
71
|
root: Component,
|
|
72
72
|
components: Component[],
|
|
73
|
-
|
|
73
|
+
themes: Record<string, OldTheme | Theme>,
|
|
74
74
|
options: ThemeOptions,
|
|
75
75
|
// eslint-disable-next-line max-params
|
|
76
76
|
) => {
|
|
@@ -82,19 +82,30 @@ export const createStylesheet = (
|
|
|
82
82
|
|
|
83
83
|
//Exclude fonts that are not used on this page.
|
|
84
84
|
let stylesheet = getThemeCss(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
85
|
+
Object.fromEntries(
|
|
86
|
+
Object.entries(themes).map(([key, theme]) =>
|
|
87
|
+
'breakpoints' in theme
|
|
88
|
+
? [
|
|
89
|
+
key,
|
|
90
|
+
{
|
|
91
|
+
...theme,
|
|
92
|
+
fontFamily: Object.fromEntries(
|
|
93
|
+
Object.entries(theme.fontFamily).filter(
|
|
94
|
+
([key, value]) =>
|
|
95
|
+
value.default ?? fonts.has('--font-' + key),
|
|
96
|
+
),
|
|
97
|
+
),
|
|
98
|
+
},
|
|
99
|
+
]
|
|
100
|
+
: [
|
|
101
|
+
key,
|
|
102
|
+
{
|
|
103
|
+
...theme,
|
|
104
|
+
fonts: theme.fonts,
|
|
105
|
+
},
|
|
106
|
+
],
|
|
107
|
+
),
|
|
108
|
+
),
|
|
98
109
|
options,
|
|
99
110
|
)
|
|
100
111
|
const styleToCss = (style: StyleDeclarationBlock) => {
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { Theme } from './theme'
|
|
2
|
+
import { renderTheme } from './theme'
|
|
3
|
+
|
|
4
|
+
describe('renderTheme()', () => {
|
|
5
|
+
test('it renders a theme correctly', () => {
|
|
6
|
+
const theme: Theme = {
|
|
7
|
+
fonts: [],
|
|
8
|
+
propertyDefinitions: {
|
|
9
|
+
'--my-color': {
|
|
10
|
+
syntax: { type: 'primitive', name: 'color' },
|
|
11
|
+
description: 'A custom color',
|
|
12
|
+
inherits: true,
|
|
13
|
+
initialValue: 'red',
|
|
14
|
+
value: 'rebeccapurple',
|
|
15
|
+
},
|
|
16
|
+
'--my-other-color': {
|
|
17
|
+
syntax: { type: 'primitive', name: 'color' },
|
|
18
|
+
description: 'A custom color',
|
|
19
|
+
inherits: true,
|
|
20
|
+
initialValue: 'red',
|
|
21
|
+
value: null,
|
|
22
|
+
},
|
|
23
|
+
'--my-third-prop': {
|
|
24
|
+
syntax: { type: 'primitive', name: 'length-percentage' },
|
|
25
|
+
description: 'A custom length or percentage',
|
|
26
|
+
inherits: true,
|
|
27
|
+
initialValue: null,
|
|
28
|
+
value: 'var(--my-color)',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
}
|
|
32
|
+
expect(renderTheme('[data-theme="my-theme"]', theme))
|
|
33
|
+
.toMatchInlineSnapshot(`
|
|
34
|
+
"[data-theme="my-theme"] {
|
|
35
|
+
--my-color: rebeccapurple;
|
|
36
|
+
--my-third-prop: var(--my-color);
|
|
37
|
+
}"
|
|
38
|
+
`)
|
|
39
|
+
})
|
|
40
|
+
})
|
package/src/styling/theme.ts
CHANGED
|
@@ -71,49 +71,81 @@ export type OldTheme = {
|
|
|
71
71
|
shadow: Record<string, { value: string; order: number }>
|
|
72
72
|
breakpoints: Record<string, { value: number; order: number }>
|
|
73
73
|
}
|
|
74
|
+
|
|
74
75
|
export type Theme = {
|
|
76
|
+
default?: true
|
|
77
|
+
defaultDark?: true
|
|
78
|
+
defaultLight?: true
|
|
79
|
+
propertyDefinitions?: Record<CustomPropertyName, CustomPropertyDefinition>
|
|
75
80
|
scheme?: 'dark' | 'light'
|
|
76
|
-
color
|
|
81
|
+
color?: StyleTokenGroup[]
|
|
77
82
|
fonts: FontFamily[]
|
|
78
|
-
'font-size'
|
|
79
|
-
'font-weight'
|
|
80
|
-
spacing
|
|
81
|
-
'border-radius'
|
|
82
|
-
shadow
|
|
83
|
-
'z-index'
|
|
84
|
-
categories?: Record<string, CustomCategory>
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
export type CustomCategory = {
|
|
88
|
-
propertyDefinitions: Record<CustomPropertyName, CustomPropertyDefinition>
|
|
83
|
+
'font-size'?: StyleTokenGroup[]
|
|
84
|
+
'font-weight'?: StyleTokenGroup[]
|
|
85
|
+
spacing?: StyleTokenGroup[]
|
|
86
|
+
'border-radius'?: StyleTokenGroup[]
|
|
87
|
+
shadow?: StyleTokenGroup[]
|
|
88
|
+
'z-index'?: StyleTokenGroup[]
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
export type CustomPropertyDefinition = {
|
|
92
92
|
syntax: CssSyntaxNode
|
|
93
93
|
inherits: boolean
|
|
94
|
-
initialValue: string
|
|
94
|
+
initialValue: string | null // Required by CSS specs for default-theme, but we can do a fallback so null is allowed
|
|
95
|
+
value: string | null
|
|
95
96
|
description: string
|
|
96
97
|
}
|
|
97
98
|
|
|
98
|
-
export const getThemeCss = (
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
99
|
+
export const getThemeCss = (
|
|
100
|
+
theme: Record<string, OldTheme | Theme>,
|
|
101
|
+
options: ThemeOptions,
|
|
102
|
+
) => {
|
|
103
|
+
const [themesV1, themesV2] = Object.entries(theme).reduce(
|
|
104
|
+
([legacy, modern], [key, value]) => {
|
|
105
|
+
if ('breakpoints' in value) {
|
|
106
|
+
legacy[key] = value
|
|
107
|
+
} else {
|
|
108
|
+
modern[key] = value
|
|
109
|
+
}
|
|
110
|
+
return [legacy, modern]
|
|
111
|
+
},
|
|
112
|
+
[{}, {}] as [Record<string, OldTheme>, Record<string, Theme>],
|
|
113
|
+
)
|
|
102
114
|
|
|
103
|
-
|
|
104
|
-
.
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
115
|
+
const defaultTheme =
|
|
116
|
+
Object.values(themesV2).find((t) => t.default) ?? Object.values(themesV2)[0]
|
|
117
|
+
const defaultDarkTheme = Object.values(themesV2).find((t) => t.defaultDark)
|
|
118
|
+
const defaultLightTheme = Object.values(themesV2).find((t) => t.defaultLight)
|
|
119
|
+
|
|
120
|
+
return `
|
|
121
|
+
${Object.values(themesV1)
|
|
122
|
+
.map((t) => getOldThemeCss(t))
|
|
123
|
+
.join('\n')}
|
|
124
|
+
|
|
125
|
+
${Object.entries(defaultTheme.propertyDefinitions ?? {})
|
|
126
|
+
.map(([propertyName, property]) =>
|
|
127
|
+
renderSyntaxDefinition(
|
|
128
|
+
propertyName as CustomPropertyName,
|
|
129
|
+
property,
|
|
130
|
+
defaultTheme,
|
|
131
|
+
),
|
|
110
132
|
)
|
|
111
133
|
.join('\n')}
|
|
134
|
+
|
|
135
|
+
${renderTheme(':host, :root', defaultTheme)}
|
|
136
|
+
${renderTheme(':host, :root', defaultDarkTheme, '@media (prefers-color-scheme: dark)')}
|
|
137
|
+
${renderTheme(':host, :root', defaultLightTheme, '@media (prefers-color-scheme: light)')}
|
|
138
|
+
${Object.entries(themesV2)
|
|
139
|
+
.map(([key, t]) => renderTheme(`[data-theme~="${key}"]`, t))
|
|
140
|
+
.join('\n')}
|
|
141
|
+
|
|
112
142
|
${options.includeResetStyle ? RESET_STYLES : ''}
|
|
113
143
|
@layer base {
|
|
114
144
|
${
|
|
115
145
|
options.createFontFaces
|
|
116
|
-
?
|
|
146
|
+
? Object.values(themesV2)
|
|
147
|
+
.map(({ fonts }) => fonts)
|
|
148
|
+
.flat()
|
|
117
149
|
.map(
|
|
118
150
|
(font) => `
|
|
119
151
|
${font.variants
|
|
@@ -141,18 +173,24 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
141
173
|
}
|
|
142
174
|
body, :host {
|
|
143
175
|
/* Color */
|
|
144
|
-
${
|
|
176
|
+
${Object.values(themesV2)
|
|
177
|
+
.map(({ color }) => color ?? [])
|
|
178
|
+
.flat()
|
|
145
179
|
.flatMap((group) =>
|
|
146
180
|
group.tokens.map((color) => `--${color.name}: ${color.value};`),
|
|
147
181
|
)
|
|
148
182
|
.join('\n')}
|
|
149
183
|
/* Fonts */
|
|
150
|
-
${
|
|
184
|
+
${Object.values(themesV2)
|
|
185
|
+
.map(({ fonts }) => fonts)
|
|
186
|
+
.flat()
|
|
151
187
|
.map((font) => `--font-${font.name}: '${font.family}',${font.type};`)
|
|
152
188
|
.join('\n')}
|
|
153
189
|
|
|
154
190
|
/* Font size */
|
|
155
|
-
${
|
|
191
|
+
${Object.values(themesV2)
|
|
192
|
+
.map(({ 'font-size': fontSize }) => fontSize ?? [])
|
|
193
|
+
.flat()
|
|
156
194
|
.flatMap((group) =>
|
|
157
195
|
group.tokens.map(
|
|
158
196
|
(variable) =>
|
|
@@ -165,7 +203,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
165
203
|
)
|
|
166
204
|
.join('\n')}
|
|
167
205
|
/* Font weight */
|
|
168
|
-
${
|
|
206
|
+
${Object.values(themesV2)
|
|
207
|
+
.map(({ 'font-weight': fontWeight }) => fontWeight ?? [])
|
|
208
|
+
.flat()
|
|
169
209
|
.flatMap((group) => {
|
|
170
210
|
return group.tokens.map(
|
|
171
211
|
(variable) =>
|
|
@@ -178,7 +218,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
178
218
|
})
|
|
179
219
|
.join('\n')}
|
|
180
220
|
/* Shadows */
|
|
181
|
-
${
|
|
221
|
+
${Object.values(themesV2)
|
|
222
|
+
.map(({ shadow }) => shadow ?? [])
|
|
223
|
+
.flat()
|
|
182
224
|
.flatMap((group) => {
|
|
183
225
|
return group.tokens.map(
|
|
184
226
|
(variable) =>
|
|
@@ -191,7 +233,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
191
233
|
})
|
|
192
234
|
.join('\n')}
|
|
193
235
|
/* Border radius */
|
|
194
|
-
${
|
|
236
|
+
${Object.values(themesV2)
|
|
237
|
+
.map(({ 'border-radius': borderRadius }) => borderRadius ?? [])
|
|
238
|
+
.flat()
|
|
195
239
|
.flatMap((group) => {
|
|
196
240
|
return group.tokens.map(
|
|
197
241
|
(token) =>
|
|
@@ -202,7 +246,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
202
246
|
})
|
|
203
247
|
.join('\n')}
|
|
204
248
|
/* Spacing */
|
|
205
|
-
${
|
|
249
|
+
${Object.values(themesV2)
|
|
250
|
+
.map(({ spacing }) => spacing ?? [])
|
|
251
|
+
.flat()
|
|
206
252
|
.map((group) => {
|
|
207
253
|
return group.tokens
|
|
208
254
|
.map(
|
|
@@ -217,7 +263,9 @@ ${options.includeResetStyle ? RESET_STYLES : ''}
|
|
|
217
263
|
})
|
|
218
264
|
.join('\n')}
|
|
219
265
|
/* Z-index */
|
|
220
|
-
${
|
|
266
|
+
${Object.values(themesV2)
|
|
267
|
+
.map(({ 'z-index': zIndex }) => zIndex ?? [])
|
|
268
|
+
.flat()
|
|
221
269
|
.map((group) => {
|
|
222
270
|
return group.tokens
|
|
223
271
|
.map(
|
|
@@ -353,3 +401,34 @@ ${RESET_STYLES}
|
|
|
353
401
|
}
|
|
354
402
|
}`
|
|
355
403
|
}
|
|
404
|
+
|
|
405
|
+
export function renderTheme(
|
|
406
|
+
selector: string,
|
|
407
|
+
theme: Theme | undefined,
|
|
408
|
+
mediaQuery?: string,
|
|
409
|
+
) {
|
|
410
|
+
if (!theme?.propertyDefinitions) {
|
|
411
|
+
return ''
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
const properties = Object.entries(theme.propertyDefinitions).filter(
|
|
415
|
+
([, property]) => property.value,
|
|
416
|
+
)
|
|
417
|
+
if (properties.length === 0) {
|
|
418
|
+
return ''
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
const css = `${selector} {
|
|
422
|
+
${properties
|
|
423
|
+
.map(([propertyName, property]) => `${propertyName}: ${property.value};`)
|
|
424
|
+
.join('\n ')}
|
|
425
|
+
}`
|
|
426
|
+
|
|
427
|
+
if (mediaQuery) {
|
|
428
|
+
return `${mediaQuery} {
|
|
429
|
+
${css}
|
|
430
|
+
}`
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
return css
|
|
434
|
+
}
|