@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.
Files changed (68) hide show
  1. package/CHANGELOG.md +89 -0
  2. package/css/atlassian-dark.css +3 -0
  3. package/css/atlassian-light.css +3 -0
  4. package/dist/cjs/artifacts/rename-mapping.js +89 -89
  5. package/dist/cjs/artifacts/token-default-values.js +3 -0
  6. package/dist/cjs/artifacts/token-names.js +3 -0
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +267 -178
  8. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +267 -178
  9. package/dist/cjs/constants.js +18 -0
  10. package/dist/cjs/entry-points/token-ids.js +25 -0
  11. package/dist/cjs/get-token.js +1 -1
  12. package/dist/cjs/token-ids.js +75 -0
  13. package/dist/cjs/tokens/atlassian-dark/color/skeleton.js +20 -0
  14. package/dist/cjs/tokens/atlassian-dark/elevation/shadow.js +23 -0
  15. package/dist/cjs/tokens/atlassian-light/color/skeleton.js +20 -0
  16. package/dist/cjs/tokens/atlassian-light/elevation/shadow.js +19 -0
  17. package/dist/cjs/tokens/default/color/skeleton.js +28 -0
  18. package/dist/cjs/tokens/default/deprecated/deprecated.js +89 -89
  19. package/dist/cjs/tokens/default/elevation/shadow.js +7 -0
  20. package/dist/cjs/version.json +4 -2
  21. package/dist/es2019/artifacts/rename-mapping.js +89 -89
  22. package/dist/es2019/artifacts/token-default-values.js +3 -0
  23. package/dist/es2019/artifacts/token-names.js +3 -0
  24. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +267 -178
  25. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +267 -178
  26. package/dist/es2019/constants.js +8 -0
  27. package/dist/es2019/entry-points/token-ids.js +1 -0
  28. package/dist/es2019/get-token.js +1 -1
  29. package/dist/es2019/token-ids.js +51 -0
  30. package/dist/es2019/tokens/atlassian-dark/color/skeleton.js +13 -0
  31. package/dist/es2019/tokens/atlassian-dark/elevation/shadow.js +23 -0
  32. package/dist/es2019/tokens/atlassian-light/color/skeleton.js +13 -0
  33. package/dist/es2019/tokens/atlassian-light/elevation/shadow.js +19 -0
  34. package/dist/es2019/tokens/default/color/skeleton.js +21 -0
  35. package/dist/es2019/tokens/default/deprecated/deprecated.js +89 -89
  36. package/dist/es2019/tokens/default/elevation/shadow.js +7 -0
  37. package/dist/es2019/version.json +4 -2
  38. package/dist/esm/artifacts/rename-mapping.js +89 -89
  39. package/dist/esm/artifacts/token-default-values.js +3 -0
  40. package/dist/esm/artifacts/token-names.js +3 -0
  41. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +267 -178
  42. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +267 -178
  43. package/dist/esm/constants.js +8 -0
  44. package/dist/esm/entry-points/token-ids.js +1 -0
  45. package/dist/esm/get-token.js +1 -1
  46. package/dist/esm/token-ids.js +58 -0
  47. package/dist/esm/tokens/atlassian-dark/color/skeleton.js +13 -0
  48. package/dist/esm/tokens/atlassian-dark/elevation/shadow.js +23 -0
  49. package/dist/esm/tokens/atlassian-light/color/skeleton.js +13 -0
  50. package/dist/esm/tokens/atlassian-light/elevation/shadow.js +19 -0
  51. package/dist/esm/tokens/default/color/skeleton.js +21 -0
  52. package/dist/esm/tokens/default/deprecated/deprecated.js +89 -89
  53. package/dist/esm/tokens/default/elevation/shadow.js +7 -0
  54. package/dist/esm/version.json +4 -2
  55. package/dist/types/artifacts/token-default-values.d.ts +3 -0
  56. package/dist/types/artifacts/token-names.d.ts +6 -0
  57. package/dist/types/artifacts/types-internal.d.ts +1 -1
  58. package/dist/types/artifacts/types.d.ts +1 -1
  59. package/dist/types/constants.d.ts +4 -0
  60. package/dist/types/entry-points/token-ids.d.ts +1 -0
  61. package/dist/types/token-ids.d.ts +43 -0
  62. package/dist/types/tokens/atlassian-dark/color/skeleton.d.ts +3 -0
  63. package/dist/types/tokens/atlassian-light/color/skeleton.d.ts +3 -0
  64. package/dist/types/tokens/default/color/skeleton.d.ts +3 -0
  65. package/dist/types/tokens/default/utility/utility.d.ts +10 -10
  66. package/dist/types/types.d.ts +9 -0
  67. package/package.json +5 -2
  68. 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',
@@ -1,5 +1,7 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.7.2",
4
- "sideEffects": false
3
+ "version": "0.8.1",
4
+ "sideEffects": [
5
+ "**/*.css"
6
+ ]
5
7
  }
@@ -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,4 @@
1
+ export declare const ALLOWED_THEMES: string[];
2
+ export declare const DEFAULT_THEME = "light";
3
+ export declare const CSS_PREFIX = "ds";
4
+ export declare const LONG_SHORT_MAPPING: Record<string, string>;
@@ -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 {};
@@ -0,0 +1,3 @@
1
+ import type { SkeletonColorTokenSchema, ValueSchema } from '../../../types';
2
+ declare const color: ValueSchema<SkeletonColorTokenSchema>;
3
+ export default color;
@@ -0,0 +1,3 @@
1
+ import type { SkeletonColorTokenSchema, ValueSchema } from '../../../types';
2
+ declare const color: ValueSchema<SkeletonColorTokenSchema>;
3
+ export default color;
@@ -0,0 +1,3 @@
1
+ import type { AttributeSchema, SkeletonColorTokenSchema } from '../../../types';
2
+ declare const color: AttributeSchema<SkeletonColorTokenSchema>;
3
+ export default color;