Skip to content

Commit ef4ffef

Browse files
unekinnunekinn
committed
wip: more config with overrides
1 parent 8260ce7 commit ef4ffef

12 files changed

Lines changed: 63 additions & 76 deletions

File tree

‎design-tokens/primitives/modes/typography/size/large.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
"font-scale": {
33
"_base": {
44
"$type": "number",
5-
"$value": "21",
6-
"$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4."
5+
"$value": "21"
76
},
87
"_ratio": {
98
"$type": "number",
10-
"$value": "1.146",
11-
"$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1."
9+
"$value": "1.146"
1210
}
1311
}
1412
}

‎design-tokens/primitives/modes/typography/size/medium.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
"font-scale": {
33
"_base": {
44
"$type": "number",
5-
"$value": "18",
6-
"$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4."
5+
"$value": "18"
76
},
87
"_ratio": {
98
"$type": "number",
10-
"$value": "1.143",
11-
"$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1."
9+
"$value": "1.143"
1210
}
1311
}
1412
}

‎design-tokens/primitives/modes/typography/size/small.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
"font-scale": {
33
"_base": {
44
"$type": "number",
5-
"$value": "16",
6-
"$description": "The font size (in px) to use as the basis for the scale. Is used as font-size.4."
5+
"$value": "16"
76
},
87
"_ratio": {
98
"$type": "number",
10-
"$value": "1.131",
11-
"$description": "The ratio used to calculate each step in the scale. Must be larger than 1 (a ratio of 1 would make all font sizes the same, while a number between 0 and 1 effectively inverts the scale). Larger numbers result in a larger font-size.10 and a smaller font-size.1."
9+
"$value": "1.131"
1210
}
1311
}
1412
}

‎packages/cli/bin/designsystemet.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function makeTokenCommands() {
117117
// Casting as missing properties should be validated by `getDefaultOrExplicitOption` to default values
118118
const theme = { name, ...themeWithoutName } as Theme;
119119

120-
const { tokenSets } = await createTokens(theme);
120+
const { tokenSets } = await createTokens(theme, config.globalTypography?.size);
121121
await writeTokens({ outDir: config.outDir, theme, dry: opts.dry, tokenSets });
122122
}
123123
}

‎packages/cli/configs/digdir.config.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"globalTypography": {
6464
"size": {
6565
"modes": {
66-
"sm": {
66+
"small": {
6767
"overrides": {
6868
"1": 8,
6969
"2": 10,
@@ -77,7 +77,7 @@
7777
"10": 36
7878
}
7979
},
80-
"md": {
80+
"medium": {
8181
"overrides": {
8282
"1": 10,
8383
"2": 12,
@@ -91,7 +91,7 @@
9191
"10": 42
9292
}
9393
},
94-
"lg": {
94+
"large": {
9595
"overrides": {
9696
"1": 12,
9797
"2": 14,

‎packages/cli/src/config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ const fontSizeMode = z.object({
184184
'Override one or more steps in this scale to specific pixel values. Will force globalTypography.size.cssGeneration to be "static".',
185185
),
186186
});
187-
const typographySizeModes = z.partialRecord(z.enum(['sm', 'md', 'lg']), fontSizeMode);
187+
const typographySizeModes = z.partialRecord(z.enum(['small', 'medium', 'large']), fontSizeMode);
188188

189189
const typographySizeSchema = z.object({
190190
modes: typographySizeModes.optional(),
@@ -263,3 +263,4 @@ export type BuildConfigSchema = z.infer<typeof configFileBuildSchema>;
263263
export type CreateConfigSchema = z.infer<typeof configFileCreateSchema>;
264264
export type ConfigSchemaTheme = z.infer<typeof themeSchema>;
265265
export type ColorOverrideSchema = z.infer<typeof overridesSchema>;
266+
export type TypographySizeSchema = z.infer<typeof typographySizeSchema>;

‎packages/cli/src/tokens/create.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { ColorScheme } from '../colors/types.js';
2+
import type { TypographySizeSchema } from '../config.js';
23
import { getDefaultToken, getDefaultTokens } from './create/defaults.js';
34
import { generateColorScheme } from './create/generators/color.js';
45
import { generateSemantic } from './create/generators/semantic.js';
56
import { generateTheme } from './create/generators/theme.js';
67
import { generateTypography } from './create/generators/typography.js';
8+
import { generateTypographySizeMode } from './create/generators/typographySize.js';
79

810
import type { Theme, TokenSet, TokenSets } from './types.js';
911

@@ -24,8 +26,8 @@ export const cliOptions = {
2426
},
2527
} as const;
2628

27-
export const createTokens = async (opts: Theme) => {
28-
const { colors, typography, name, borderRadius, overrides } = opts;
29+
export const createTokens = async (theme: Theme, typographySize?: TypographySizeSchema) => {
30+
const { colors, typography, name, borderRadius, overrides } = theme;
2931
const colorSchemes: ColorScheme[] = ['light', 'dark'];
3032

3133
const semantic = generateSemantic(colors, name);
@@ -38,10 +40,10 @@ export const createTokens = async (opts: Theme) => {
3840
'primitives/modes/size/medium',
3941
'primitives/modes/size/large',
4042
'primitives/modes/typography/size/global',
41-
'primitives/modes/typography/size/small',
42-
'primitives/modes/typography/size/medium',
43-
'primitives/modes/typography/size/large',
4443
]),
44+
['primitives/modes/typography/size/small', generateTypographySizeMode('small', typographySize)],
45+
['primitives/modes/typography/size/medium', generateTypographySizeMode('medium', typographySize)],
46+
['primitives/modes/typography/size/large', generateTypographySizeMode('large', typographySize)],
4547
[`primitives/modes/typography/primary/${name}`, generateTypography(name, typography)],
4648
[`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography)],
4749
...colorSchemes.flatMap((scheme): [string, TokenSet][] => [

‎packages/cli/src/tokens/create/defaults.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,6 @@ import sizeSmall from '../template/design-tokens/primitives/modes/size/small.jso
77
import typgraphyGlobal from '../template/design-tokens/primitives/modes/typography/size/global.json' with {
88
type: 'json',
99
};
10-
import typgraphyLarge from '../template/design-tokens/primitives/modes/typography/size/large.json' with {
11-
type: 'json',
12-
};
13-
import typgraphyMedium from '../template/design-tokens/primitives/modes/typography/size/medium.json' with {
14-
type: 'json',
15-
};
16-
import typgraphySmall from '../template/design-tokens/primitives/modes/typography/size/small.json' with {
17-
type: 'json',
18-
};
1910
import semanticStyle from '../template/design-tokens/semantic/style.json' with { type: 'json' };
2011
import type { TokenSet } from '../types.js';
2112

@@ -26,9 +17,6 @@ const defaultTokens: Record<string, TokenSet> = {
2617
'primitives/modes/size/medium': sizeMedium,
2718
'primitives/modes/size/large': sizeLarge,
2819
'primitives/modes/typography/size/global': typgraphyGlobal,
29-
'primitives/modes/typography/size/small': typgraphySmall,
30-
'primitives/modes/typography/size/medium': typgraphyMedium,
31-
'primitives/modes/typography/size/large': typgraphyLarge,
3220
'semantic/style': semanticStyle as unknown as TokenSet,
3321
};
3422

‎packages/cli/src/tokens/create/generators/typographySize.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as R from 'ramda';
2+
import type { TypographySizeSchema } from '../../../config.js';
3+
import type { Token } from '../../types.js';
4+
5+
const defaults = {
6+
small: {
7+
base: 16,
8+
ratio: 1.131,
9+
},
10+
medium: {
11+
base: 18,
12+
ratio: 1.143,
13+
},
14+
large: {
15+
base: 21,
16+
ratio: 1.146,
17+
},
18+
};
19+
20+
export function generateTypographySizeMode(size: 'small' | 'medium' | 'large', config?: TypographySizeSchema) {
21+
const modeConfig = config?.modes?.[size];
22+
return {
23+
'font-scale': {
24+
_base: {
25+
$type: 'number',
26+
$value: `${modeConfig?.base ?? defaults[size].base}`,
27+
} satisfies Token,
28+
_ratio: {
29+
$type: 'number',
30+
$value: `${modeConfig?.ratio ?? defaults[size].ratio}`,
31+
} satisfies Token,
32+
},
33+
...(modeConfig?.overrides && {
34+
'font-size': R.map(
35+
(fontSizeInPx) =>
36+
({
37+
$type: 'fontSizes',
38+
$value: `${fontSizeInPx}px`,
39+
}) satisfies Token,
40+
modeConfig.overrides,
41+
),
42+
}),
43+
};
44+
}

‎packages/cli/src/tokens/template/design-tokens/primitives/modes/typography/size/large.json‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)