@atlaskit/tokens 0.7.2 → 0.8.1
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 +89 -0
- package/css/atlassian-dark.css +3 -0
- package/css/atlassian-light.css +3 -0
- package/dist/cjs/artifacts/rename-mapping.js +89 -89
- package/dist/cjs/artifacts/token-default-values.js +3 -0
- package/dist/cjs/artifacts/token-names.js +3 -0
- package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +267 -178
- package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +267 -178
- package/dist/cjs/constants.js +18 -0
- package/dist/cjs/entry-points/token-ids.js +25 -0
- package/dist/cjs/get-token.js +1 -1
- package/dist/cjs/token-ids.js +75 -0
- package/dist/cjs/tokens/atlassian-dark/color/skeleton.js +20 -0
- package/dist/cjs/tokens/atlassian-dark/elevation/shadow.js +23 -0
- package/dist/cjs/tokens/atlassian-light/color/skeleton.js +20 -0
- package/dist/cjs/tokens/atlassian-light/elevation/shadow.js +19 -0
- package/dist/cjs/tokens/default/color/skeleton.js +28 -0
- package/dist/cjs/tokens/default/deprecated/deprecated.js +89 -89
- package/dist/cjs/tokens/default/elevation/shadow.js +7 -0
- package/dist/cjs/version.json +4 -2
- package/dist/es2019/artifacts/rename-mapping.js +89 -89
- package/dist/es2019/artifacts/token-default-values.js +3 -0
- package/dist/es2019/artifacts/token-names.js +3 -0
- package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +267 -178
- package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +267 -178
- package/dist/es2019/constants.js +8 -0
- package/dist/es2019/entry-points/token-ids.js +1 -0
- package/dist/es2019/get-token.js +1 -1
- package/dist/es2019/token-ids.js +51 -0
- package/dist/es2019/tokens/atlassian-dark/color/skeleton.js +13 -0
- package/dist/es2019/tokens/atlassian-dark/elevation/shadow.js +23 -0
- package/dist/es2019/tokens/atlassian-light/color/skeleton.js +13 -0
- package/dist/es2019/tokens/atlassian-light/elevation/shadow.js +19 -0
- package/dist/es2019/tokens/default/color/skeleton.js +21 -0
- package/dist/es2019/tokens/default/deprecated/deprecated.js +89 -89
- package/dist/es2019/tokens/default/elevation/shadow.js +7 -0
- package/dist/es2019/version.json +4 -2
- package/dist/esm/artifacts/rename-mapping.js +89 -89
- package/dist/esm/artifacts/token-default-values.js +3 -0
- package/dist/esm/artifacts/token-names.js +3 -0
- package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +267 -178
- package/dist/esm/artifacts/tokens-raw/atlassian-light.js +267 -178
- package/dist/esm/constants.js +8 -0
- package/dist/esm/entry-points/token-ids.js +1 -0
- package/dist/esm/get-token.js +1 -1
- package/dist/esm/token-ids.js +58 -0
- package/dist/esm/tokens/atlassian-dark/color/skeleton.js +13 -0
- package/dist/esm/tokens/atlassian-dark/elevation/shadow.js +23 -0
- package/dist/esm/tokens/atlassian-light/color/skeleton.js +13 -0
- package/dist/esm/tokens/atlassian-light/elevation/shadow.js +19 -0
- package/dist/esm/tokens/default/color/skeleton.js +21 -0
- package/dist/esm/tokens/default/deprecated/deprecated.js +89 -89
- package/dist/esm/tokens/default/elevation/shadow.js +7 -0
- package/dist/esm/version.json +4 -2
- package/dist/types/artifacts/token-default-values.d.ts +3 -0
- package/dist/types/artifacts/token-names.d.ts +6 -0
- package/dist/types/artifacts/types-internal.d.ts +1 -1
- package/dist/types/artifacts/types.d.ts +1 -1
- package/dist/types/constants.d.ts +4 -0
- package/dist/types/entry-points/token-ids.d.ts +1 -0
- package/dist/types/token-ids.d.ts +43 -0
- package/dist/types/tokens/atlassian-dark/color/skeleton.d.ts +3 -0
- package/dist/types/tokens/atlassian-light/color/skeleton.d.ts +3 -0
- package/dist/types/tokens/default/color/skeleton.d.ts +3 -0
- package/dist/types/tokens/default/utility/utility.d.ts +10 -10
- package/dist/types/types.d.ts +9 -0
- package/package.json +5 -2
- package/token-ids/package.json +7 -0
|
@@ -8,6 +8,13 @@ var shadow = {
|
|
|
8
8
|
description: "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised"
|
|
9
9
|
}
|
|
10
10
|
},
|
|
11
|
+
overflow: {
|
|
12
|
+
attributes: {
|
|
13
|
+
group: 'shadow',
|
|
14
|
+
state: 'active',
|
|
15
|
+
description: "Use to create a shadow when content scolls under other content."
|
|
16
|
+
}
|
|
17
|
+
},
|
|
11
18
|
overlay: {
|
|
12
19
|
attributes: {
|
|
13
20
|
group: 'shadow',
|
package/dist/esm/version.json
CHANGED
|
@@ -237,6 +237,8 @@ declare const defaultTokenValues: {
|
|
|
237
237
|
readonly 'color.interaction.pressed': "#ffffff5c";
|
|
238
238
|
readonly 'color.interaction.inverse.hovered': "#00000029";
|
|
239
239
|
readonly 'color.interaction.inverse.pressed': "#00000052";
|
|
240
|
+
readonly 'color.skeleton': "#091E420F";
|
|
241
|
+
readonly 'color.skeleton.subtle': "#091E4208";
|
|
240
242
|
readonly 'color.link': "#0C66E4";
|
|
241
243
|
readonly 'color.link.pressed': "#0055CC";
|
|
242
244
|
readonly 'color.accent.boldBlue': "#579DFF";
|
|
@@ -262,6 +264,7 @@ declare const defaultTokenValues: {
|
|
|
262
264
|
readonly 'shadow.card': "0px 1px 1px #091E4240, 0px 0px 1px #091E424F";
|
|
263
265
|
readonly 'shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
|
|
264
266
|
readonly 'elevation.shadow.raised': "0px 1px 1px #091E4240, 0px 0px 1px #091E424F";
|
|
267
|
+
readonly 'elevation.shadow.overflow': "0px 8px 8px #091E4214, 0px 0px 1px #091E421F";
|
|
265
268
|
readonly 'elevation.shadow.overlay': "0px 8px 12px #091E4226, 0px 0px 1px #091E424F";
|
|
266
269
|
readonly 'elevation.surface': "#FFFFFF";
|
|
267
270
|
readonly 'elevation.surface.sunken': "#F7F8F9";
|
|
@@ -234,6 +234,8 @@ declare const tokens: {
|
|
|
234
234
|
readonly 'color.interaction.pressed': "--ds-interaction-pressed";
|
|
235
235
|
readonly 'color.interaction.inverse.hovered': "--ds-interaction-inverse-hovered";
|
|
236
236
|
readonly 'color.interaction.inverse.pressed': "--ds-interaction-inverse-pressed";
|
|
237
|
+
readonly 'color.skeleton': "--ds-skeleton";
|
|
238
|
+
readonly 'color.skeleton.subtle': "--ds-skeleton-subtle";
|
|
237
239
|
readonly 'color.link': "--ds-link";
|
|
238
240
|
readonly 'color.link.pressed': "--ds-link-pressed";
|
|
239
241
|
readonly 'color.accent.boldBlue': "--ds-accent-boldBlue";
|
|
@@ -259,6 +261,7 @@ declare const tokens: {
|
|
|
259
261
|
readonly 'shadow.card': "--ds-card";
|
|
260
262
|
readonly 'shadow.overlay': "--ds-overlay";
|
|
261
263
|
readonly 'elevation.shadow.raised': "--ds-shadow-raised";
|
|
264
|
+
readonly 'elevation.shadow.overflow': "--ds-shadow-overflow";
|
|
262
265
|
readonly 'elevation.shadow.overlay': "--ds-shadow-overlay";
|
|
263
266
|
readonly 'elevation.surface': "--ds-surface";
|
|
264
267
|
readonly 'elevation.surface.sunken': "--ds-surface-sunken";
|
|
@@ -503,6 +506,8 @@ export declare type CSSTokenMap = {
|
|
|
503
506
|
'color.interaction.pressed': 'var(--ds-interaction-pressed)';
|
|
504
507
|
'color.interaction.inverse.hovered': 'var(--ds-interaction-inverse-hovered)';
|
|
505
508
|
'color.interaction.inverse.pressed': 'var(--ds-interaction-inverse-pressed)';
|
|
509
|
+
'color.skeleton': 'var(--ds-skeleton)';
|
|
510
|
+
'color.skeleton.subtle': 'var(--ds-skeleton-subtle)';
|
|
506
511
|
'color.link': 'var(--ds-link)';
|
|
507
512
|
'color.link.pressed': 'var(--ds-link-pressed)';
|
|
508
513
|
'color.accent.boldBlue': 'var(--ds-accent-boldBlue)';
|
|
@@ -528,6 +533,7 @@ export declare type CSSTokenMap = {
|
|
|
528
533
|
'shadow.card': 'var(--ds-card)';
|
|
529
534
|
'shadow.overlay': 'var(--ds-overlay)';
|
|
530
535
|
'elevation.shadow.raised': 'var(--ds-shadow-raised)';
|
|
536
|
+
'elevation.shadow.overflow': 'var(--ds-shadow-overflow)';
|
|
531
537
|
'elevation.shadow.overlay': 'var(--ds-shadow-overlay)';
|
|
532
538
|
'elevation.surface': 'var(--ds-surface)';
|
|
533
539
|
'elevation.surface.sunken': 'var(--ds-surface-sunken)';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Internally types used for handling token ids
|
|
3
3
|
*/
|
|
4
|
-
export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | '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.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | '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.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.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.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.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.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.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.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
4
|
+
export declare type InternalTokenIds = 'color.text.accent.blue.[default]' | 'color.text.accent.blue.bolder' | '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.purple.[default]' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal.[default]' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta.[default]' | 'color.text.accent.magenta.bolder' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | '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.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.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.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.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.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.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.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton.[default]' | 'color.skeleton.subtle' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Type representing the currently active tokens
|
|
3
3
|
*/
|
|
4
|
-
export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | '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.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | '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.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.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.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.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.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.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.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
4
|
+
export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.blue.bolder' | '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.purple' | 'color.text.accent.purple.bolder' | 'color.text.accent.teal' | 'color.text.accent.teal.bolder' | 'color.text.accent.magenta' | 'color.text.accent.magenta.bolder' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.subtlest' | 'color.background.accent.blue.subtler' | 'color.background.accent.blue.subtle' | 'color.background.accent.blue.bolder' | '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.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.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.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.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.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.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.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.skeleton' | 'color.skeleton.subtle' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overflow' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getCSSCustomProperty, getTokenId, getFullyQualifiedTokenId, } from '../token-ids';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Transforms a style dictionary token path to a CSS custom property.
|
|
3
|
+
*
|
|
4
|
+
* A css prefix will be prepended and all [default] key words will be omitted
|
|
5
|
+
* from the path
|
|
6
|
+
*
|
|
7
|
+
* @example <caption>Passing a path as an array</caption>
|
|
8
|
+
* // Returns ds-background-bold
|
|
9
|
+
* getCSSCustomProperty(['color', 'background', 'bold', '[default]'])
|
|
10
|
+
*
|
|
11
|
+
* @example <caption>Passing a path as a string</caption>
|
|
12
|
+
* // Returns ds-background-bold
|
|
13
|
+
* getCSSCustomProperty('color.background.bold.[default]')
|
|
14
|
+
*/
|
|
15
|
+
export declare const getCSSCustomProperty: GetCssCustomProperty;
|
|
16
|
+
declare type GetCssCustomProperty = (path: string | string[]) => string;
|
|
17
|
+
/**
|
|
18
|
+
* Transforms a style dictionary token path to a shorthand token id
|
|
19
|
+
* These ids will be typically be how tokens are interacted with via typescript and css
|
|
20
|
+
*
|
|
21
|
+
* All [default] key words will be omitted from the path
|
|
22
|
+
*
|
|
23
|
+
* @example <caption>Passing a path as an array</caption>
|
|
24
|
+
* // Returns color.background.bold
|
|
25
|
+
* getTokenId(['color', 'background', 'bold', '[default]'])
|
|
26
|
+
*
|
|
27
|
+
* @example <caption>Passing a path as a string</caption>
|
|
28
|
+
* // Returns color.background.bold
|
|
29
|
+
* getTokenId('color.background.bold.[default]')
|
|
30
|
+
*/
|
|
31
|
+
export declare const getTokenId: (path: string | string[]) => string;
|
|
32
|
+
/**
|
|
33
|
+
* Transforms a style dictionary token path to a fully qualified token id
|
|
34
|
+
* These Ids are intended to be used internal to this package by style-dictionary
|
|
35
|
+
*
|
|
36
|
+
* [default] key words will NOT be omitted from the path
|
|
37
|
+
*
|
|
38
|
+
* @example <caption>Passing a path as a string</caption>
|
|
39
|
+
* // Returns color.background.bold.[default]
|
|
40
|
+
* getFullyQualifiedTokenId(['color', 'background', 'bold', '[default]'])
|
|
41
|
+
*/
|
|
42
|
+
export declare const getFullyQualifiedTokenId: (path: string[]) => string;
|
|
43
|
+
export {};
|