@atlaskit/tokens 0.13.5 → 1.1.0
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/CHANGELOG.md +305 -0
- package/README.md +7 -16
- package/dist/cjs/artifacts/palettes-raw/legacy-palette.js +0 -1
- package/dist/cjs/artifacts/palettes-raw/palette.js +0 -1
- package/dist/cjs/artifacts/palettes-raw/spacing-scale.js +0 -1
- package/dist/cjs/artifacts/palettes-raw/typography-palette.js +0 -1
- package/dist/cjs/artifacts/replacement-mapping.js +3 -611
- package/dist/cjs/artifacts/theme-import-map.js +56 -0
- package/dist/cjs/artifacts/themes/atlassian-dark.js +13 -0
- package/dist/cjs/artifacts/themes/atlassian-legacy-dark.js +13 -0
- package/dist/cjs/artifacts/themes/atlassian-legacy-light.js +13 -0
- package/dist/cjs/artifacts/themes/atlassian-light.js +13 -0
- package/dist/cjs/artifacts/themes/atlassian-spacing.js +13 -0
- package/dist/cjs/artifacts/themes/atlassian-typography.js +13 -0
- package/dist/cjs/artifacts/token-default-values.js +2 -170
- package/dist/cjs/artifacts/token-names.js +2 -170
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +1354 -4261
- package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-dark.js +1352 -4259
- package/dist/cjs/artifacts/tokens-raw/atlassian-legacy-light.js +1396 -4283
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +1365 -4252
- package/dist/cjs/artifacts/tokens-raw/atlassian-spacing.js +1 -1582
- package/dist/cjs/artifacts/tokens-raw/atlassian-typography.js +0 -1
- package/dist/cjs/artifacts/typescript/atlassian-dark-token-names.js +0 -1
- package/dist/cjs/artifacts/typescript/atlassian-light-token-names.js +0 -1
- package/dist/cjs/babel-plugin/index.js +0 -2
- package/dist/cjs/babel-plugin/plugin.js +17 -43
- package/dist/cjs/entry-points/babel-plugin.js +0 -2
- package/dist/cjs/entry-points/palettes-raw.js +0 -2
- package/dist/cjs/entry-points/rename-mapping.js +0 -2
- package/dist/cjs/entry-points/token-ids.js +0 -1
- package/dist/cjs/entry-points/token-names.js +0 -2
- package/dist/cjs/entry-points/tokens-raw.js +0 -5
- package/dist/cjs/get-global-theme.js +30 -0
- package/dist/cjs/get-token-value.js +1 -10
- package/dist/cjs/get-token.js +3 -13
- package/dist/cjs/index.js +46 -10
- package/dist/cjs/palettes/legacy-palette.js +1 -1
- package/dist/cjs/palettes/spacing-scale.js +1 -1
- package/dist/cjs/palettes/typography-palette.js +0 -5
- package/dist/cjs/set-global-theme.js +265 -39
- package/dist/cjs/theme-config.js +8 -23
- package/dist/cjs/{theme-change-observer.js → theme-mutation-observer.js} +5 -57
- package/dist/cjs/tokens/atlassian-dark/utility/utility.js +1 -4
- package/dist/cjs/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
- package/dist/cjs/tokens/atlassian-legacy-light/utility/utility.js +1 -4
- package/dist/cjs/tokens/atlassian-light/utility/utility.js +1 -4
- package/dist/cjs/tokens/atlassian-spacing/spacing.js +0 -228
- package/dist/cjs/tokens/default/spacing/spacing.js +0 -621
- package/dist/cjs/tokens/default/utility/utility.js +1 -9
- package/dist/cjs/use-theme-observer.js +41 -0
- package/dist/cjs/utils/color-detection.js +23 -43
- package/dist/cjs/utils/theme-loading.js +69 -0
- package/dist/cjs/utils/theme-state-transformer.js +73 -0
- package/dist/cjs/utils/token-ids.js +4 -12
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/artifacts/replacement-mapping.js +3 -610
- package/dist/es2019/artifacts/theme-import-map.js +27 -0
- package/dist/es2019/artifacts/themes/atlassian-dark.js +296 -0
- package/dist/es2019/artifacts/themes/atlassian-legacy-dark.js +296 -0
- package/dist/es2019/artifacts/themes/atlassian-legacy-light.js +296 -0
- package/dist/es2019/artifacts/themes/atlassian-light.js +296 -0
- package/dist/es2019/artifacts/themes/atlassian-spacing.js +23 -0
- package/{css/atlassian-typography.css → dist/es2019/artifacts/themes/atlassian-typography.js} +4 -2
- package/dist/es2019/artifacts/token-default-values.js +2 -169
- package/dist/es2019/artifacts/token-names.js +2 -169
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +1354 -4260
- package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-dark.js +1349 -4255
- package/dist/es2019/artifacts/tokens-raw/atlassian-legacy-light.js +1397 -4283
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +1360 -4246
- package/dist/es2019/artifacts/tokens-raw/atlassian-spacing.js +1 -1581
- package/dist/es2019/babel-plugin/plugin.js +17 -37
- package/dist/es2019/get-global-theme.js +20 -0
- package/dist/es2019/get-token-value.js +1 -6
- package/dist/es2019/get-token.js +3 -8
- package/dist/es2019/index.js +5 -2
- package/dist/es2019/palettes/legacy-palette.js +1 -0
- package/dist/es2019/palettes/spacing-scale.js +1 -0
- package/dist/es2019/palettes/typography-palette.js +2 -1
- package/dist/es2019/set-global-theme.js +162 -32
- package/dist/es2019/theme-config.js +5 -21
- package/dist/es2019/{theme-change-observer.js → theme-mutation-observer.js} +4 -37
- package/dist/es2019/tokens/atlassian-dark/utility/utility.js +1 -4
- package/dist/es2019/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
- package/dist/es2019/tokens/atlassian-legacy-light/utility/utility.js +1 -4
- package/dist/es2019/tokens/atlassian-light/utility/utility.js +1 -4
- package/dist/es2019/tokens/atlassian-spacing/spacing.js +0 -227
- package/dist/es2019/tokens/default/spacing/spacing.js +0 -620
- package/dist/es2019/tokens/default/utility/utility.js +1 -9
- package/dist/es2019/use-theme-observer.js +26 -0
- package/dist/es2019/utils/color-detection.js +3 -5
- package/dist/es2019/utils/theme-loading.js +18 -0
- package/dist/es2019/utils/theme-state-transformer.js +47 -0
- package/dist/es2019/utils/token-ids.js +5 -4
- package/dist/es2019/version.json +1 -1
- package/dist/esm/artifacts/replacement-mapping.js +3 -610
- package/dist/esm/artifacts/theme-import-map.js +39 -0
- package/dist/esm/artifacts/themes/atlassian-dark.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-legacy-dark.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-legacy-light.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-light.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-spacing.js +6 -0
- package/dist/esm/artifacts/themes/atlassian-typography.js +6 -0
- package/dist/esm/artifacts/token-default-values.js +2 -169
- package/dist/esm/artifacts/token-names.js +2 -169
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +1354 -4260
- package/dist/esm/artifacts/tokens-raw/atlassian-legacy-dark.js +1349 -4255
- package/dist/esm/artifacts/tokens-raw/atlassian-legacy-light.js +1397 -4283
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +1360 -4246
- package/dist/esm/artifacts/tokens-raw/atlassian-spacing.js +1 -1581
- package/dist/esm/babel-plugin/plugin.js +17 -35
- package/dist/esm/get-global-theme.js +22 -0
- package/dist/esm/get-token-value.js +1 -6
- package/dist/esm/get-token.js +3 -8
- package/dist/esm/index.js +5 -2
- package/dist/esm/palettes/legacy-palette.js +1 -0
- package/dist/esm/palettes/spacing-scale.js +1 -0
- package/dist/esm/palettes/typography-palette.js +0 -3
- package/dist/esm/set-global-theme.js +263 -37
- package/dist/esm/theme-config.js +5 -21
- package/dist/esm/{theme-change-observer.js → theme-mutation-observer.js} +4 -49
- package/dist/esm/tokens/atlassian-dark/utility/utility.js +1 -4
- package/dist/esm/tokens/atlassian-legacy-dark/utility/utility.js +1 -4
- package/dist/esm/tokens/atlassian-legacy-light/utility/utility.js +1 -4
- package/dist/esm/tokens/atlassian-light/utility/utility.js +1 -4
- package/dist/esm/tokens/atlassian-spacing/spacing.js +0 -227
- package/dist/esm/tokens/default/spacing/spacing.js +0 -620
- package/dist/esm/tokens/default/utility/utility.js +1 -9
- package/dist/esm/use-theme-observer.js +34 -0
- package/dist/esm/utils/color-detection.js +23 -30
- package/dist/esm/utils/theme-loading.js +60 -0
- package/dist/esm/utils/theme-state-transformer.js +64 -0
- package/dist/esm/utils/token-ids.js +5 -4
- package/dist/esm/version.json +1 -1
- package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
- package/dist/types/artifacts/theme-import-map.d.ts +16 -0
- package/dist/types/artifacts/themes/atlassian-dark.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-legacy-dark.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-legacy-light.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-light.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-spacing.d.ts +7 -0
- package/dist/types/artifacts/themes/atlassian-typography.d.ts +7 -0
- package/dist/types/artifacts/token-default-values.d.ts +2 -169
- package/dist/types/artifacts/token-names.d.ts +3 -337
- package/dist/types/artifacts/tokens-raw/atlassian-dark.d.ts +1 -115
- package/dist/types/artifacts/tokens-raw/atlassian-legacy-dark.d.ts +1 -115
- package/dist/types/artifacts/tokens-raw/atlassian-legacy-light.d.ts +1 -91
- package/dist/types/artifacts/tokens-raw/atlassian-light.d.ts +1 -91
- package/dist/types/artifacts/tokens-raw/atlassian-spacing.d.ts +1 -89
- package/dist/types/artifacts/types-internal.d.ts +2 -2
- package/dist/types/artifacts/types.d.ts +2 -2
- package/dist/types/get-global-theme.d.ts +2 -0
- package/dist/types/index.d.ts +7 -3
- package/dist/types/set-global-theme.d.ts +63 -7
- package/dist/types/theme-config.d.ts +10 -7
- package/dist/types/{theme-change-observer.d.ts → theme-mutation-observer.d.ts} +2 -16
- package/dist/types/types.d.ts +1 -286
- package/dist/types/use-theme-observer.d.ts +15 -0
- package/dist/types/utils/theme-loading.d.ts +3 -0
- package/dist/types/utils/theme-state-transformer.d.ts +26 -0
- package/figma/atlassian-dark.json +1 -102
- package/figma/atlassian-legacy-dark.json +1 -102
- package/figma/atlassian-legacy-light.json +1 -102
- package/figma/atlassian-light.json +1 -102
- package/figma/atlassian-spacing.json +1 -761
- package/package.json +5 -8
- package/report.api.md +85 -351
- package/tmp/api-report-tmp.d.ts +58 -342
- package/css/atlassian-dark.css +0 -786
- package/css/atlassian-legacy-dark.css +0 -786
- package/css/atlassian-legacy-light.css +0 -786
- package/css/atlassian-light.css +0 -786
- package/css/atlassian-spacing.css +0 -87
- package/dist/cjs/artifacts/typescript/atlassian-light-token-default-values.js +0 -407
- package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +0 -435
- package/dist/cjs/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -532
- package/dist/cjs/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -523
- package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +0 -421
- package/dist/cjs/tokens/default/deprecated/deprecated.js +0 -1186
- package/dist/es2019/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
- package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
- package/dist/es2019/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
- package/dist/es2019/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
- package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +0 -414
- package/dist/es2019/tokens/default/deprecated/deprecated.js +0 -1217
- package/dist/esm/artifacts/typescript/atlassian-light-token-default-values.js +0 -399
- package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +0 -428
- package/dist/esm/tokens/atlassian-legacy-dark/deprecated/deprecated.js +0 -525
- package/dist/esm/tokens/atlassian-legacy-light/deprecated/deprecated.js +0 -516
- package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +0 -414
- package/dist/esm/tokens/default/deprecated/deprecated.js +0 -1179
- package/dist/types/artifacts/typescript/atlassian-light-token-default-values.d.ts +0 -399
- package/dist/types/tokens/atlassian-dark/deprecated/deprecated.d.ts +0 -4
- package/dist/types/tokens/atlassian-legacy-dark/deprecated/deprecated.d.ts +0 -4
- package/dist/types/tokens/atlassian-legacy-light/deprecated/deprecated.d.ts +0 -4
- package/dist/types/tokens/atlassian-light/deprecated/deprecated.d.ts +0 -4
- package/dist/types/tokens/default/deprecated/deprecated.d.ts +0 -4
|
@@ -1,65 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::cfa1d518948d5dc23821d17cab0cb52a>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
6
|
declare const tokens: ({
|
|
7
|
-
attributes: {
|
|
8
|
-
group: string;
|
|
9
|
-
state: string;
|
|
10
|
-
introduced: string;
|
|
11
|
-
description: string;
|
|
12
|
-
suggest?: undefined;
|
|
13
|
-
pixelValue?: undefined;
|
|
14
|
-
replacement?: undefined;
|
|
15
|
-
};
|
|
16
|
-
value: string;
|
|
17
|
-
filePath: string;
|
|
18
|
-
isSource: boolean;
|
|
19
|
-
original: {
|
|
20
|
-
attributes: {
|
|
21
|
-
group: string;
|
|
22
|
-
state: string;
|
|
23
|
-
introduced: string;
|
|
24
|
-
description: string;
|
|
25
|
-
suggest?: undefined;
|
|
26
|
-
pixelValue?: undefined;
|
|
27
|
-
replacement?: undefined;
|
|
28
|
-
};
|
|
29
|
-
value: string;
|
|
30
|
-
};
|
|
31
|
-
name: string;
|
|
32
|
-
path: string[];
|
|
33
|
-
cleanName: string;
|
|
34
|
-
} | {
|
|
35
|
-
attributes: {
|
|
36
|
-
group: string;
|
|
37
|
-
state: string;
|
|
38
|
-
suggest: string[];
|
|
39
|
-
introduced: string;
|
|
40
|
-
description: string;
|
|
41
|
-
pixelValue?: undefined;
|
|
42
|
-
replacement?: undefined;
|
|
43
|
-
};
|
|
44
|
-
value: string;
|
|
45
|
-
filePath: string;
|
|
46
|
-
isSource: boolean;
|
|
47
|
-
original: {
|
|
48
|
-
attributes: {
|
|
49
|
-
group: string;
|
|
50
|
-
state: string;
|
|
51
|
-
suggest: string[];
|
|
52
|
-
introduced: string;
|
|
53
|
-
description: string;
|
|
54
|
-
pixelValue?: undefined;
|
|
55
|
-
replacement?: undefined;
|
|
56
|
-
};
|
|
57
|
-
value: string;
|
|
58
|
-
};
|
|
59
|
-
name: string;
|
|
60
|
-
path: string[];
|
|
61
|
-
cleanName: string;
|
|
62
|
-
} | {
|
|
63
7
|
attributes: {
|
|
64
8
|
group: string;
|
|
65
9
|
state: string;
|
|
@@ -67,7 +11,6 @@ declare const tokens: ({
|
|
|
67
11
|
pixelValue: string;
|
|
68
12
|
description: string;
|
|
69
13
|
suggest?: undefined;
|
|
70
|
-
replacement?: undefined;
|
|
71
14
|
};
|
|
72
15
|
value: string;
|
|
73
16
|
filePath: string;
|
|
@@ -80,35 +23,6 @@ declare const tokens: ({
|
|
|
80
23
|
pixelValue: string;
|
|
81
24
|
description: string;
|
|
82
25
|
suggest?: undefined;
|
|
83
|
-
replacement?: undefined;
|
|
84
|
-
};
|
|
85
|
-
value: string;
|
|
86
|
-
};
|
|
87
|
-
name: string;
|
|
88
|
-
path: string[];
|
|
89
|
-
cleanName: string;
|
|
90
|
-
} | {
|
|
91
|
-
attributes: {
|
|
92
|
-
group: string;
|
|
93
|
-
state: string;
|
|
94
|
-
replacement: string;
|
|
95
|
-
introduced: string;
|
|
96
|
-
description: string;
|
|
97
|
-
suggest?: undefined;
|
|
98
|
-
pixelValue?: undefined;
|
|
99
|
-
};
|
|
100
|
-
value: string;
|
|
101
|
-
filePath: string;
|
|
102
|
-
isSource: boolean;
|
|
103
|
-
original: {
|
|
104
|
-
attributes: {
|
|
105
|
-
group: string;
|
|
106
|
-
state: string;
|
|
107
|
-
replacement: string;
|
|
108
|
-
introduced: string;
|
|
109
|
-
description: string;
|
|
110
|
-
suggest?: undefined;
|
|
111
|
-
pixelValue?: undefined;
|
|
112
26
|
};
|
|
113
27
|
value: string;
|
|
114
28
|
};
|
|
@@ -123,7 +37,6 @@ declare const tokens: ({
|
|
|
123
37
|
introduced: string;
|
|
124
38
|
pixelValue: string;
|
|
125
39
|
description: string;
|
|
126
|
-
replacement?: undefined;
|
|
127
40
|
};
|
|
128
41
|
value: string;
|
|
129
42
|
filePath: string;
|
|
@@ -136,7 +49,6 @@ declare const tokens: ({
|
|
|
136
49
|
introduced: string;
|
|
137
50
|
pixelValue: string;
|
|
138
51
|
description: string;
|
|
139
|
-
replacement?: undefined;
|
|
140
52
|
};
|
|
141
53
|
value: string;
|
|
142
54
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::ba7fe6029a396b4b95dee58afb525639>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
export declare type InternalTokenIds = 'color.text.[default]' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'color.icon.[default]' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border.[default]' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.chart.categorical.1.[default]' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2.[default]' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3.[default]' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4.[default]' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5.[default]' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6.[default]' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7.[default]' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8.[default]' | 'color.chart.categorical.8.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.red.bold.[default]' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder.[default]' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest.[default]' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold.[default]' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder.[default]' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest.[default]' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold.[default]' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder.[default]' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest.[default]' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold.[default]' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder.[default]' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest.[default]' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold.[default]' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder.[default]' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest.[default]' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold.[default]' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder.[default]' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest.[default]' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold.[default]' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder.[default]' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest.[default]' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold.[default]' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder.[default]' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest.[default]' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold.[default]' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder.[default]' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest.[default]' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.danger.[default].[default]' | 'color.chart.danger.[default].hovered' | 'color.chart.danger.bold.[default]' | 'color.chart.danger.bold.hovered' | 'color.chart.warning.[default].[default]' | 'color.chart.warning.[default].hovered' | 'color.chart.warning.bold.[default]' | 'color.chart.warning.bold.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | 'color.chart.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE_util.MISSING_TOKEN' | 'utility.UNSAFE_util.transparent' | 'spacing.scale.0' | 'spacing.scale.025' | 'spacing.scale.050' | 'spacing.scale.075' | 'spacing.scale.100' | 'spacing.scale.150' | 'spacing.scale.200' | 'spacing.scale.250' | 'spacing.scale.300' | 'spacing.scale.400' | 'spacing.scale.500' | 'spacing.scale.600' | 'spacing.scale.800' | 'spacing.scale.1000' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
6
|
+
export declare type InternalTokenIds = 'color.text.[default]' | 'color.text.accent.red.[default]' | 'color.text.accent.red.bolder' | 'color.text.accent.orange.[default]' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow.[default]' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green.[default]' | 'color.text.accent.green.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray.[default]' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'color.icon.[default]' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border.[default]' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle.[default]' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket.[default]' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.chart.categorical.1.[default]' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2.[default]' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3.[default]' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4.[default]' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5.[default]' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6.[default]' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7.[default]' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8.[default]' | 'color.chart.categorical.8.hovered' | 'color.chart.neutral.[default]' | 'color.chart.neutral.hovered' | 'color.chart.red.bold.[default]' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder.[default]' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest.[default]' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold.[default]' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder.[default]' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest.[default]' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold.[default]' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder.[default]' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest.[default]' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold.[default]' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder.[default]' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest.[default]' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold.[default]' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder.[default]' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest.[default]' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold.[default]' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder.[default]' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest.[default]' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold.[default]' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder.[default]' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest.[default]' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold.[default]' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder.[default]' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest.[default]' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold.[default]' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder.[default]' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest.[default]' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand.[default]' | 'color.chart.brand.hovered' | 'color.chart.danger.[default].[default]' | 'color.chart.danger.[default].hovered' | 'color.chart.danger.bold.[default]' | 'color.chart.danger.bold.hovered' | 'color.chart.warning.[default].[default]' | 'color.chart.warning.[default].hovered' | 'color.chart.warning.bold.[default]' | 'color.chart.warning.bold.hovered' | 'color.chart.success.[default].[default]' | 'color.chart.success.[default].hovered' | 'color.chart.success.bold.[default]' | 'color.chart.success.bold.hovered' | 'color.chart.discovery.[default].[default]' | 'color.chart.discovery.[default].hovered' | 'color.chart.discovery.bold.[default]' | 'color.chart.discovery.bold.hovered' | 'color.chart.information.[default].[default]' | 'color.chart.information.[default].hovered' | 'color.chart.information.bold.[default]' | 'color.chart.information.bold.hovered' | 'elevation.surface.[default].[default]' | 'elevation.surface.[default].hovered' | 'elevation.surface.[default].pressed' | 'elevation.surface.overlay.[default]' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised.[default]' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow.[default]' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::0590226763691ce0543ee24e9a6bb722>>
|
|
4
4
|
* @codegenCommand yarn build tokens
|
|
5
5
|
*/
|
|
6
|
-
export declare type ActiveTokens = 'color.text' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.icon' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.chart.categorical.1' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8' | 'color.chart.categorical.8.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.red.bold' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.danger' | 'color.chart.danger.hovered' | 'color.chart.danger.bold' | 'color.chart.danger.bold.hovered' | 'color.chart.warning' | 'color.chart.warning.hovered' | 'color.chart.warning.bold' | 'color.chart.warning.bold.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | 'color.chart.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE_util.MISSING_TOKEN' | 'utility.UNSAFE_util.transparent' | 'spacing.scale.0' | 'spacing.scale.025' | 'spacing.scale.050' | 'spacing.scale.075' | 'spacing.scale.100' | 'spacing.scale.150' | 'spacing.scale.200' | 'spacing.scale.250' | 'spacing.scale.300' | 'spacing.scale.400' | 'spacing.scale.500' | 'spacing.scale.600' | 'spacing.scale.800' | 'spacing.scale.1000' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
|
6
|
+
export declare type ActiveTokens = 'color.text' | 'color.text.accent.red' | 'color.text.accent.red.bolder' | 'color.text.accent.orange' | 'color.text.accent.orange.bolder' | 'color.text.accent.yellow' | 'color.text.accent.yellow.bolder' | 'color.text.accent.green' | 'color.text.accent.green.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | 'color.text.accent.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text.accent.gray' | 'color.text.accent.gray.bolder' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.selected' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.text.subtlest' | 'color.text.subtle' | 'color.link' | 'color.link.pressed' | 'color.icon' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.teal' | 'color.icon.accent.blue' | 'color.icon.accent.purple' | 'color.icon.accent.magenta' | 'color.icon.accent.gray' | 'color.icon.disabled' | 'color.icon.inverse' | 'color.icon.selected' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.icon.subtle' | 'color.border' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.teal' | 'color.border.accent.blue' | 'color.border.accent.purple' | 'color.border.accent.magenta' | 'color.border.accent.gray' | 'color.border.disabled' | 'color.border.focused' | 'color.border.input' | 'color.border.inverse' | 'color.border.selected' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.border.bold' | 'color.background.accent.red.subtlest' | 'color.background.accent.red.subtler' | 'color.background.accent.red.subtle' | 'color.background.accent.red.bolder' | 'color.background.accent.orange.subtlest' | 'color.background.accent.orange.subtler' | 'color.background.accent.orange.subtle' | 'color.background.accent.orange.bolder' | 'color.background.accent.yellow.subtlest' | 'color.background.accent.yellow.subtler' | 'color.background.accent.yellow.subtle' | 'color.background.accent.yellow.bolder' | 'color.background.accent.green.subtlest' | 'color.background.accent.green.subtler' | 'color.background.accent.green.subtle' | 'color.background.accent.green.bolder' | 'color.background.accent.teal.subtlest' | 'color.background.accent.teal.subtler' | 'color.background.accent.teal.subtle' | 'color.background.accent.teal.bolder' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | 'color.background.accent.purple.subtlest' | 'color.background.accent.purple.subtler' | 'color.background.accent.purple.subtle' | 'color.background.accent.purple.bolder' | 'color.background.accent.magenta.subtlest' | 'color.background.accent.magenta.subtler' | 'color.background.accent.magenta.subtle' | 'color.background.accent.magenta.bolder' | 'color.background.accent.gray.subtlest' | 'color.background.accent.gray.subtler' | 'color.background.accent.gray.subtle' | 'color.background.accent.gray.bolder' | 'color.background.disabled' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.inverse.subtle' | 'color.background.inverse.subtle.hovered' | 'color.background.inverse.subtle.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.blanket.selected' | 'color.blanket.danger' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.chart.categorical.1' | 'color.chart.categorical.1.hovered' | 'color.chart.categorical.2' | 'color.chart.categorical.2.hovered' | 'color.chart.categorical.3' | 'color.chart.categorical.3.hovered' | 'color.chart.categorical.4' | 'color.chart.categorical.4.hovered' | 'color.chart.categorical.5' | 'color.chart.categorical.5.hovered' | 'color.chart.categorical.6' | 'color.chart.categorical.6.hovered' | 'color.chart.categorical.7' | 'color.chart.categorical.7.hovered' | 'color.chart.categorical.8' | 'color.chart.categorical.8.hovered' | 'color.chart.neutral' | 'color.chart.neutral.hovered' | 'color.chart.red.bold' | 'color.chart.red.bold.hovered' | 'color.chart.red.bolder' | 'color.chart.red.bolder.hovered' | 'color.chart.red.boldest' | 'color.chart.red.boldest.hovered' | 'color.chart.orange.bold' | 'color.chart.orange.bold.hovered' | 'color.chart.orange.bolder' | 'color.chart.orange.bolder.hovered' | 'color.chart.orange.boldest' | 'color.chart.orange.boldest.hovered' | 'color.chart.yellow.bold' | 'color.chart.yellow.bold.hovered' | 'color.chart.yellow.bolder' | 'color.chart.yellow.bolder.hovered' | 'color.chart.yellow.boldest' | 'color.chart.yellow.boldest.hovered' | 'color.chart.green.bold' | 'color.chart.green.bold.hovered' | 'color.chart.green.bolder' | 'color.chart.green.bolder.hovered' | 'color.chart.green.boldest' | 'color.chart.green.boldest.hovered' | 'color.chart.teal.bold' | 'color.chart.teal.bold.hovered' | 'color.chart.teal.bolder' | 'color.chart.teal.bolder.hovered' | 'color.chart.teal.boldest' | 'color.chart.teal.boldest.hovered' | 'color.chart.blue.bold' | 'color.chart.blue.bold.hovered' | 'color.chart.blue.bolder' | 'color.chart.blue.bolder.hovered' | 'color.chart.blue.boldest' | 'color.chart.blue.boldest.hovered' | 'color.chart.purple.bold' | 'color.chart.purple.bold.hovered' | 'color.chart.purple.bolder' | 'color.chart.purple.bolder.hovered' | 'color.chart.purple.boldest' | 'color.chart.purple.boldest.hovered' | 'color.chart.magenta.bold' | 'color.chart.magenta.bold.hovered' | 'color.chart.magenta.bolder' | 'color.chart.magenta.bolder.hovered' | 'color.chart.magenta.boldest' | 'color.chart.magenta.boldest.hovered' | 'color.chart.gray.bold' | 'color.chart.gray.bold.hovered' | 'color.chart.gray.bolder' | 'color.chart.gray.bolder.hovered' | 'color.chart.gray.boldest' | 'color.chart.gray.boldest.hovered' | 'color.chart.brand' | 'color.chart.brand.hovered' | 'color.chart.danger' | 'color.chart.danger.hovered' | 'color.chart.danger.bold' | 'color.chart.danger.bold.hovered' | 'color.chart.warning' | 'color.chart.warning.hovered' | 'color.chart.warning.bold' | 'color.chart.warning.bold.hovered' | 'color.chart.success' | 'color.chart.success.hovered' | 'color.chart.success.bold' | 'color.chart.success.bold.hovered' | 'color.chart.discovery' | 'color.chart.discovery.hovered' | 'color.chart.discovery.bold' | 'color.chart.discovery.bold.hovered' | 'color.chart.information' | 'color.chart.information.hovered' | 'color.chart.information.bold' | 'color.chart.information.bold.hovered' | 'elevation.surface' | 'elevation.surface.hovered' | 'elevation.surface.pressed' | 'elevation.surface.overlay' | 'elevation.surface.overlay.hovered' | 'elevation.surface.overlay.pressed' | 'elevation.surface.raised' | 'elevation.surface.raised.hovered' | 'elevation.surface.raised.pressed' | 'elevation.surface.sunken' | 'elevation.shadow.overflow' | 'elevation.shadow.overflow.perimeter' | 'elevation.shadow.overflow.spread' | 'elevation.shadow.overlay' | 'elevation.shadow.raised' | 'opacity.disabled' | 'opacity.loading' | 'utility.UNSAFE.transparent' | 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800' | 'space.1000' | 'font.family.monospace' | 'font.family.sans' | 'font.size.050' | 'font.size.075' | 'font.size.100' | 'font.size.200' | 'font.size.300' | 'font.size.400' | 'font.size.500' | 'font.size.600' | 'font.weight.bold' | 'font.weight.medium' | 'font.weight.regular' | 'font.weight.semibold' | 'font.lineHeight.100' | 'font.lineHeight.200' | 'font.lineHeight.300' | 'font.lineHeight.400' | 'font.lineHeight.500' | 'font.lineHeight.600';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
export { default as token } from './get-token';
|
|
2
2
|
export { default as getTokenValue } from './get-token-value';
|
|
3
|
-
export { default as setGlobalTheme } from './set-global-theme';
|
|
3
|
+
export { default as setGlobalTheme, getThemeStyles, getThemeHtmlAttrs, getSSRAutoScript, } from './set-global-theme';
|
|
4
|
+
export type { ThemeState } from './set-global-theme';
|
|
4
5
|
export type { CSSToken } from './artifacts/token-names';
|
|
5
|
-
export type { Themes, ThemeIds } from './theme-config';
|
|
6
|
+
export type { ThemeColorModes, Themes, ThemeIds } from './theme-config';
|
|
6
7
|
export { default as themeConfig } from './theme-config';
|
|
7
|
-
export { useThemeObserver
|
|
8
|
+
export { useThemeObserver } from './use-theme-observer';
|
|
9
|
+
export { ThemeMutationObserver } from './theme-mutation-observer';
|
|
10
|
+
export { getGlobalTheme } from './get-global-theme';
|
|
11
|
+
export { themeStringToObject, themeObjectToString, } from './utils/theme-state-transformer';
|
|
@@ -1,15 +1,71 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { UnbindFn } from 'bind-event-listener';
|
|
2
|
+
import { ThemeColorModes, ThemeIds } from './theme-config';
|
|
3
|
+
export interface ThemeState {
|
|
4
|
+
light: ThemeIds;
|
|
5
|
+
dark: ThemeIds;
|
|
6
|
+
colorMode: ThemeColorModes;
|
|
7
|
+
spacing?: ThemeIds;
|
|
8
|
+
typography?: ThemeIds;
|
|
9
|
+
}
|
|
2
10
|
/**
|
|
3
|
-
* Sets the theme globally at runtime. This updates the `data-theme` and `data-color-
|
|
11
|
+
* Sets the theme globally at runtime. This updates the `data-theme` and `data-color-mode` attributes on your page's <html> tag.
|
|
4
12
|
*
|
|
5
|
-
* @param {string}
|
|
6
|
-
* @param {string}
|
|
13
|
+
* @param {Object<string, string>} themeState The themes and color mode that should be applied.
|
|
14
|
+
* @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
15
|
+
* @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
|
|
16
|
+
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
17
|
+
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
18
|
+
* @param {string} themeState.typography The typography theme to be applied.
|
|
19
|
+
*
|
|
20
|
+
* @returns A Promise of an unbind function, that can be used to stop listening for changes to system theme.
|
|
7
21
|
*
|
|
8
22
|
* @example
|
|
9
23
|
* ```
|
|
10
|
-
*
|
|
11
|
-
* setGlobalTheme('light', true);
|
|
24
|
+
* setGlobalTheme({colorMode: 'auto', light: 'light', dark: 'dark', spacing: 'spacing'});
|
|
12
25
|
* ```
|
|
13
26
|
*/
|
|
14
|
-
declare const setGlobalTheme: (
|
|
27
|
+
declare const setGlobalTheme: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<UnbindFn>;
|
|
28
|
+
export interface ThemeStyles {
|
|
29
|
+
id: ThemeIds;
|
|
30
|
+
attrs: Record<string, string>;
|
|
31
|
+
css: string;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Takes an object containing theme preferences, and returns an array of objects for use in applying styles to the document head.
|
|
35
|
+
* Only supplies the color themes necessary for initial render, based on the current themeState. I.e. if in light mode, dark mode themes are not returned.
|
|
36
|
+
*
|
|
37
|
+
* @param {Object<string, string>} themeState The themes and color mode that should be applied.
|
|
38
|
+
* @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
39
|
+
* @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
|
|
40
|
+
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
41
|
+
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
42
|
+
* @param {string} themeState.typography The typography theme to be applied.
|
|
43
|
+
*
|
|
44
|
+
* @returns A Promise of an object array, containing theme IDs, data-attributes to attach to the theme, and the theme CSS.
|
|
45
|
+
* If an error is encountered while loading themes, the themes arrav will be emptv.
|
|
46
|
+
*/
|
|
47
|
+
export declare const getThemeStyles: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Promise<ThemeStyles[]>;
|
|
48
|
+
/**
|
|
49
|
+
* Server-side rendering utility. Generates the valid HTML attributes for a given theme.
|
|
50
|
+
* Note: this utility does not handle automatic theme switching.
|
|
51
|
+
*
|
|
52
|
+
* @param {Object<string, string>} themeOptions - Theme options object
|
|
53
|
+
* @param {string} themeState.colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
54
|
+
* @param {string} themeState.dark The color theme to be applied when the color mode resolves to 'dark'.
|
|
55
|
+
* @param {string} themeState.light The color theme to be applied when the color mode resolves to 'light'.
|
|
56
|
+
* @param {string} themeState.spacing The spacing theme to be applied.
|
|
57
|
+
* @param {string} themeState.typography The typography theme to be applied.
|
|
58
|
+
*
|
|
59
|
+
* @returns {Object} Object of HTML attributes to be applied to the document root
|
|
60
|
+
*/
|
|
61
|
+
export declare const getThemeHtmlAttrs: ({ colorMode, dark, light, spacing, typography, }?: Partial<ThemeState>) => Record<string, string>;
|
|
62
|
+
/**
|
|
63
|
+
* Provides a script that, when executed before paint, sets the `data-color-mode` attribute based on the current system theme,
|
|
64
|
+
* to enable SSR support for automatic theme switching, avoid a flash of un-themed content on first paint.
|
|
65
|
+
*
|
|
66
|
+
* @param {string} colorMode Determines which color theme is applied. If set to `auto`, the theme applied will be determined by the OS setting.
|
|
67
|
+
*
|
|
68
|
+
* @returns {string} A string to be added to the innerHTML of a script tag in the document head
|
|
69
|
+
*/
|
|
70
|
+
export declare const getSSRAutoScript: (colorMode: ThemeState['colorMode']) => string | undefined;
|
|
15
71
|
export default setGlobalTheme;
|
|
@@ -13,21 +13,24 @@ export declare type ThemeFileNames = Themes;
|
|
|
13
13
|
* Some themes are entirely focused on Color, whilst others are purely focused on spacing.
|
|
14
14
|
* In the future other types may be introduced such as typography.
|
|
15
15
|
*/
|
|
16
|
-
export declare type ThemeKinds = 'color' | 'spacing';
|
|
16
|
+
export declare type ThemeKinds = 'color' | 'spacing' | 'typography';
|
|
17
17
|
/**
|
|
18
18
|
* Theme modes: The general purpose of a theme.
|
|
19
|
-
* This attr is used to apply the appropriate system-preference
|
|
19
|
+
* This attr is used to apply the appropriate system-preference option
|
|
20
20
|
* It may also be used as a selector for mode-specific overrides such as light/dark images.
|
|
21
21
|
* The idea is there may exist many color themes, but every theme must either fit into light or dark.
|
|
22
22
|
*/
|
|
23
|
-
export declare
|
|
23
|
+
export declare const themeColorModes: readonly ["light", "dark", "auto"];
|
|
24
|
+
export declare type ThemeColorModes = typeof themeColorModes[number];
|
|
25
|
+
export declare type DataColorModes = Omit<ThemeColorModes, 'auto'>;
|
|
24
26
|
/**
|
|
25
|
-
* Theme ids: The value that will mounted to the DOM as a data attr
|
|
26
|
-
* For example: `data-theme="light"
|
|
27
|
+
* Theme ids: The value that will be mounted to the DOM as a data attr
|
|
28
|
+
* For example: `data-theme="light:light dark:dark spacing:spacing"
|
|
27
29
|
*
|
|
28
30
|
* These ids must be kebab case
|
|
29
31
|
*/
|
|
30
|
-
export declare
|
|
32
|
+
export declare const themeIds: readonly ["light", "dark", "legacy-light", "legacy-dark", "spacing", "typography"];
|
|
33
|
+
export declare type ThemeIds = typeof themeIds[number];
|
|
31
34
|
/**
|
|
32
35
|
* Theme to use a base. This will create the theme as
|
|
33
36
|
* an extension with all token values marked as optional
|
|
@@ -50,7 +53,7 @@ interface ThemeConfig {
|
|
|
50
53
|
palette: Palettes;
|
|
51
54
|
attributes: ({
|
|
52
55
|
type: 'color';
|
|
53
|
-
mode: ThemeColorModes
|
|
56
|
+
mode: Exclude<ThemeColorModes, 'auto'>;
|
|
54
57
|
} | {
|
|
55
58
|
type: 'spacing';
|
|
56
59
|
} | {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ThemeState } from './set-global-theme';
|
|
2
2
|
/**
|
|
3
3
|
* A MutationObserver which watches the `<html>` element for changes to the theme.
|
|
4
4
|
*
|
|
@@ -16,21 +16,7 @@ export declare class ThemeMutationObserver {
|
|
|
16
16
|
private callback;
|
|
17
17
|
observer: MutationObserver | null;
|
|
18
18
|
mediaObserver: any;
|
|
19
|
-
constructor(callback: (theme:
|
|
19
|
+
constructor(callback: (theme: Partial<ThemeState>) => unknown);
|
|
20
20
|
observe(): void;
|
|
21
21
|
disconnect(): void;
|
|
22
22
|
}
|
|
23
|
-
/**
|
|
24
|
-
* A React hook which returns the current theme set on `<html>`, or `null` if not set.
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* ```
|
|
28
|
-
* const theme = useThemeObserver(); // Returns 'light' or 'dark'
|
|
29
|
-
*
|
|
30
|
-
* // Performing side effects when it changes
|
|
31
|
-
* useEffect(() => {
|
|
32
|
-
* console.log(`The theme has changed to ${theme}`);
|
|
33
|
-
* }, [theme]);
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
|
-
export declare const useThemeObserver: () => ThemeIds | null;
|