@karmo-co/drift-kit-reference 0.0.0-stage → 23.5.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.
Files changed (93) hide show
  1. package/LICENSE +7 -0
  2. package/README.md +24 -2
  3. package/bin/drift-kit-ref.js +197 -0
  4. package/manifest/components/accordion.md +47 -0
  5. package/manifest/components/action-bar.md +51 -0
  6. package/manifest/components/alert.md +53 -0
  7. package/manifest/components/app-shell.md +43 -0
  8. package/manifest/components/avatar.md +42 -0
  9. package/manifest/components/body.md +48 -0
  10. package/manifest/components/box.md +58 -0
  11. package/manifest/components/breadcrumb.md +59 -0
  12. package/manifest/components/button.md +46 -0
  13. package/manifest/components/calendar.md +69 -0
  14. package/manifest/components/card.md +71 -0
  15. package/manifest/components/checkbox.md +43 -0
  16. package/manifest/components/choice-card.md +61 -0
  17. package/manifest/components/code-input.md +56 -0
  18. package/manifest/components/date-picker.md +66 -0
  19. package/manifest/components/day-of-month.md +54 -0
  20. package/manifest/components/detail-list.md +37 -0
  21. package/manifest/components/divider.md +33 -0
  22. package/manifest/components/dropdown.md +52 -0
  23. package/manifest/components/dropzone.md +56 -0
  24. package/manifest/components/eyebrow.md +45 -0
  25. package/manifest/components/feedback-badge.md +35 -0
  26. package/manifest/components/glider.md +34 -0
  27. package/manifest/components/heading.md +47 -0
  28. package/manifest/components/hero.md +46 -0
  29. package/manifest/components/icon-button.md +41 -0
  30. package/manifest/components/icon-tile.md +44 -0
  31. package/manifest/components/icon.md +30 -0
  32. package/manifest/components/input.md +63 -0
  33. package/manifest/components/link.md +42 -0
  34. package/manifest/components/loading-spinner.md +42 -0
  35. package/manifest/components/logo.md +38 -0
  36. package/manifest/components/modal.md +53 -0
  37. package/manifest/components/pagination.md +54 -0
  38. package/manifest/components/payment-form.md +29 -0
  39. package/manifest/components/price-summary.md +30 -0
  40. package/manifest/components/radio.md +42 -0
  41. package/manifest/components/section-heading.md +41 -0
  42. package/manifest/components/select.md +99 -0
  43. package/manifest/components/shield.md +34 -0
  44. package/manifest/components/sidebar.md +73 -0
  45. package/manifest/components/stepper.md +53 -0
  46. package/manifest/components/switch.md +45 -0
  47. package/manifest/components/table.md +77 -0
  48. package/manifest/components/tabs.md +43 -0
  49. package/manifest/components/tag.md +43 -0
  50. package/manifest/components/textarea.md +52 -0
  51. package/manifest/components/toast.md +52 -0
  52. package/manifest/components/tooltip.md +42 -0
  53. package/manifest/components/top-bar.md +60 -0
  54. package/manifest/components/vehicle.md +43 -0
  55. package/manifest/index.json +1171 -0
  56. package/manifest/migrations/1.0.0.md +50 -0
  57. package/manifest/migrations/10.0.0.md +154 -0
  58. package/manifest/migrations/11.0.0.md +24 -0
  59. package/manifest/migrations/12.0.0.md +38 -0
  60. package/manifest/migrations/13.0.0.md +50 -0
  61. package/manifest/migrations/14.0.0.md +148 -0
  62. package/manifest/migrations/15.0.0.md +140 -0
  63. package/manifest/migrations/16.0.0.md +196 -0
  64. package/manifest/migrations/17.0.0.md +19 -0
  65. package/manifest/migrations/18.0.0.md +23 -0
  66. package/manifest/migrations/19.0.0.md +15 -0
  67. package/manifest/migrations/2.0.0.md +18 -0
  68. package/manifest/migrations/20.0.0.md +43 -0
  69. package/manifest/migrations/21.0.0.md +97 -0
  70. package/manifest/migrations/22.0.0.md +17 -0
  71. package/manifest/migrations/23.0.0.md +86 -0
  72. package/manifest/migrations/3.0.0.md +34 -0
  73. package/manifest/migrations/4.0.0.md +147 -0
  74. package/manifest/migrations/5.0.0.md +73 -0
  75. package/manifest/migrations/6.0.0.md +67 -0
  76. package/manifest/migrations/7.0.0.md +71 -0
  77. package/manifest/migrations/8.0.0.md +16 -0
  78. package/manifest/migrations/9.0.0.md +107 -0
  79. package/manifest/rules.md +37 -0
  80. package/manifest/setup.md +70 -0
  81. package/manifest/tokens/border-width.md +12 -0
  82. package/manifest/tokens/border.md +147 -0
  83. package/manifest/tokens/font.md +90 -0
  84. package/manifest/tokens/icon.md +84 -0
  85. package/manifest/tokens/interactive.md +53 -0
  86. package/manifest/tokens/layout.md +8 -0
  87. package/manifest/tokens/motion.md +97 -0
  88. package/manifest/tokens/radius.md +20 -0
  89. package/manifest/tokens/shadow.md +28 -0
  90. package/manifest/tokens/spacing.md +35 -0
  91. package/manifest/tokens/surface.md +138 -0
  92. package/manifest/tokens/text.md +92 -0
  93. package/package.json +20 -4
package/manifest/tokens/border.md ADDED
@@ -0,0 +1,147 @@
1
+ # Borders and edges tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-border-base-black` | `var(--dk-color-base-black)` | `var(--dk-color-base-black)` |
8
+ | `--dk-border-base-white` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
9
+ | `--dk-border-card-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-600)` |
10
+ | `--dk-border-card-secondary` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-500)` |
11
+ | `--dk-border-choice-card` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
12
+ | `--dk-border-choice-card-active` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
13
+ | `--dk-border-choice-card-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
14
+ | `--dk-border-control-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
15
+ | `--dk-border-control-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
16
+ | `--dk-border-control-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
17
+ | `--dk-border-dashed-dash` | `var(--dk-primitive-scale-2-5)` | `var(--dk-primitive-scale-2-5)` |
18
+ | `--dk-border-dashed-gap` | `var(--dk-primitive-scale-2)` | `var(--dk-primitive-scale-2)` |
19
+ | `--dk-border-dashed-primary` | `var(--dk-color-primary-400)` | `var(--dk-border-primary-default)` |
20
+ | `--dk-border-dashed-width` | `var(--dk-border-width-50)` | `var(--dk-border-width-50)` |
21
+ | `--dk-border-default-body` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
22
+ | `--dk-border-default-body-reverse` | `var(--dk-color-base-white)` | `var(--dk-color-base-black)` |
23
+ | `--dk-border-disabled-default` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-400)` |
24
+ | `--dk-border-disabled-elevation` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-300)` |
25
+ | `--dk-border-disabled-subtle` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
26
+ | `--dk-border-error-default` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
27
+ | `--dk-border-error-elevation` | `var(--dk-color-error-800)` | `var(--dk-color-error-800)` |
28
+ | `--dk-border-error-elevation-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-700)` |
29
+ | `--dk-border-error-elevation-hover` | `var(--dk-color-error-700)` | `var(--dk-color-error-700)` |
30
+ | `--dk-border-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
31
+ | `--dk-border-error-hairline` | `var(--dk-color-error-300)` | `var(--dk-color-error-800)` |
32
+ | `--dk-border-error-hover` | `var(--dk-color-error-600)` | `var(--dk-color-error-300)` |
33
+ | `--dk-border-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-50)` |
34
+ | `--dk-border-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-200)` |
35
+ | `--dk-border-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-100)` |
36
+ | `--dk-border-field-default` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
37
+ | `--dk-border-field-disabled` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
38
+ | `--dk-border-field-error` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
39
+ | `--dk-border-field-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
40
+ | `--dk-border-field-error-ring` | `var(--dk-color-error-300)` | `var(--dk-color-error-600)` |
41
+ | `--dk-border-field-focus` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
42
+ | `--dk-border-field-focus-ring` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
43
+ | `--dk-border-field-hover` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
44
+ | `--dk-border-field-raised-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
45
+ | `--dk-border-field-raised-focus` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
46
+ | `--dk-border-field-raised-hover` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-700)` |
47
+ | `--dk-border-glass-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
48
+ | `--dk-border-glider-plain` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
49
+ | `--dk-border-gradient-ai-deep` | `var(--dk-gradient-primary-top-right-default-stop-3)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
50
+ | `--dk-border-gradient-ai-light` | `var(--dk-gradient-primary-top-right-default-stop-1)` | `var(--dk-gradient-primary-top-right-default-stop-1)` |
51
+ | `--dk-border-gradient-angle` | `225deg` | `225deg` |
52
+ | `--dk-border-gradient-error-deep` | `var(--dk-gradient-error-top-right-default-stop-3)` | `var(--dk-gradient-error-top-right-default-stop-3)` |
53
+ | `--dk-border-gradient-error-light` | `var(--dk-gradient-error-top-right-hover-stop-2)` | `var(--dk-gradient-error-top-right-hover-stop-2)` |
54
+ | `--dk-border-gradient-information-deep` | `var(--dk-gradient-information-top-right-default-stop-3)` | `var(--dk-gradient-information-top-right-default-stop-3)` |
55
+ | `--dk-border-gradient-information-light` | `var(--dk-gradient-information-top-right-hover-stop-2)` | `var(--dk-gradient-information-top-right-hover-stop-2)` |
56
+ | `--dk-border-gradient-neutral-deep` | `var(--dk-gradient-neutral-top-right-default-stop-3)` | `var(--dk-gradient-neutral-top-right-default-stop-3)` |
57
+ | `--dk-border-gradient-neutral-light` | `var(--dk-gradient-neutral-top-right-hover-stop-2)` | `var(--dk-gradient-neutral-top-right-hover-stop-2)` |
58
+ | `--dk-border-gradient-primary-deep` | `var(--dk-gradient-primary-top-right-default-stop-3)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
59
+ | `--dk-border-gradient-primary-light` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-200)` |
60
+ | `--dk-border-gradient-primary-mid` | `var(--dk-gradient-primary-top-right-default-stop-2)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
61
+ | `--dk-border-gradient-success-deep` | `var(--dk-gradient-success-top-right-default-stop-3)` | `var(--dk-gradient-success-top-right-default-stop-3)` |
62
+ | `--dk-border-gradient-success-light` | `var(--dk-gradient-success-top-right-hover-stop-2)` | `var(--dk-gradient-success-top-right-hover-stop-2)` |
63
+ | `--dk-border-gradient-warning-deep` | `var(--dk-gradient-warning-top-right-default-stop-3)` | `var(--dk-gradient-warning-top-right-default-stop-3)` |
64
+ | `--dk-border-gradient-warning-light` | `var(--dk-gradient-warning-top-right-hover-stop-2)` | `var(--dk-gradient-warning-top-right-hover-stop-2)` |
65
+ | `--dk-border-hairline-current` | `var(--dk-border-hairline-level-0)` | `var(--dk-border-hairline-level-0)` |
66
+ | `--dk-border-hue-next1-hairline` | `var(--dk-primitive-color-primary-next1-300)` | `var(--dk-primitive-color-primary-next1-800)` |
67
+ | `--dk-border-hue-next2-hairline` | `var(--dk-primitive-color-primary-next2-300)` | `var(--dk-primitive-color-primary-next2-800)` |
68
+ | `--dk-border-hue-next3-hairline` | `var(--dk-primitive-color-primary-next3-300)` | `var(--dk-primitive-color-primary-next3-800)` |
69
+ | `--dk-border-hue-next4-hairline` | `var(--dk-primitive-color-primary-next4-300)` | `var(--dk-primitive-color-primary-next4-800)` |
70
+ | `--dk-border-hue-prev1-hairline` | `var(--dk-primitive-color-primary-prev1-300)` | `var(--dk-primitive-color-primary-prev1-800)` |
71
+ | `--dk-border-hue-prev2-hairline` | `var(--dk-primitive-color-primary-prev2-300)` | `var(--dk-primitive-color-primary-prev2-800)` |
72
+ | `--dk-border-hue-prev3-hairline` | `var(--dk-primitive-color-primary-prev3-300)` | `var(--dk-primitive-color-primary-prev3-800)` |
73
+ | `--dk-border-hue-prev4-hairline` | `var(--dk-primitive-color-primary-prev4-300)` | `var(--dk-primitive-color-primary-prev4-800)` |
74
+ | `--dk-border-hue-primary-hairline` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-800)` |
75
+ | `--dk-border-information-default` | `var(--dk-color-information-500)` | `var(--dk-color-information-400)` |
76
+ | `--dk-border-information-elevation` | `var(--dk-color-information-800)` | `var(--dk-color-information-800)` |
77
+ | `--dk-border-information-elevation-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-700)` |
78
+ | `--dk-border-information-elevation-hover` | `var(--dk-color-information-700)` | `var(--dk-color-information-700)` |
79
+ | `--dk-border-information-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
80
+ | `--dk-border-information-hairline` | `var(--dk-color-information-300)` | `var(--dk-color-information-800)` |
81
+ | `--dk-border-information-hover` | `var(--dk-color-information-600)` | `var(--dk-color-information-300)` |
82
+ | `--dk-border-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-50)` |
83
+ | `--dk-border-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-200)` |
84
+ | `--dk-border-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-100)` |
85
+ | `--dk-border-inverse-hairline` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
86
+ | `--dk-border-inverse-structural` | `var(--dk-color-neutral-900)` | `var(--dk-color-neutral-50)` |
87
+ | `--dk-border-nested-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-500)` |
88
+ | `--dk-border-nested-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
89
+ | `--dk-border-nested-glass` | `rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass))` | `rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass))` |
90
+ | `--dk-border-nested-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
91
+ | `--dk-border-neutral-default` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-300)` |
92
+ | `--dk-border-neutral-elevation` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-800)` |
93
+ | `--dk-border-neutral-elevation-focus` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-700)` |
94
+ | `--dk-border-neutral-elevation-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-700)` |
95
+ | `--dk-border-neutral-focus` | `var(--dk-color-neutral-800)` | `var(--dk-color-neutral-100)` |
96
+ | `--dk-border-neutral-hairline` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
97
+ | `--dk-border-neutral-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-200)` |
98
+ | `--dk-border-neutral-subtle` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
99
+ | `--dk-border-neutral-subtle-focus` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-400)` |
100
+ | `--dk-border-neutral-subtle-hover` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
101
+ | `--dk-border-page-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-700)` |
102
+ | `--dk-border-page-secondary` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-800)` |
103
+ | `--dk-border-primary-active` | `var(--dk-color-primary-800)` | `var(--dk-color-primary-200)` |
104
+ | `--dk-border-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
105
+ | `--dk-border-primary-disabled` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
106
+ | `--dk-border-primary-disabled-active` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
107
+ | `--dk-border-primary-disabled-hover` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-600)` |
108
+ | `--dk-border-primary-elevation` | `var(--dk-color-primary-800)` | `var(--dk-color-primary-800)` |
109
+ | `--dk-border-primary-elevation-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-600)` |
110
+ | `--dk-border-primary-elevation-hover` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-700)` |
111
+ | `--dk-border-primary-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-300)` |
112
+ | `--dk-border-primary-guide` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
113
+ | `--dk-border-primary-hairline` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-800)` |
114
+ | `--dk-border-primary-hover` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
115
+ | `--dk-border-primary-oos` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
116
+ | `--dk-border-primary-subtle` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-800)` |
117
+ | `--dk-border-primary-subtle-active` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
118
+ | `--dk-border-primary-subtle-focus` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
119
+ | `--dk-border-primary-subtle-hover` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
120
+ | `--dk-border-progress` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
121
+ | `--dk-border-progress-start` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
122
+ | `--dk-border-raised-active` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
123
+ | `--dk-border-raised-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
124
+ | `--dk-border-raised-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
125
+ | `--dk-border-raised-subtle` | `rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle))` | `rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse))` |
126
+ | `--dk-border-sidebar-panel` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-1000)` |
127
+ | `--dk-border-sidebar-panel-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-900)` |
128
+ | `--dk-border-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
129
+ | `--dk-border-success-elevation` | `var(--dk-color-success-800)` | `var(--dk-color-success-800)` |
130
+ | `--dk-border-success-elevation-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-700)` |
131
+ | `--dk-border-success-elevation-hover` | `var(--dk-color-success-700)` | `var(--dk-color-success-700)` |
132
+ | `--dk-border-success-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-200)` |
133
+ | `--dk-border-success-hairline` | `var(--dk-border-primary-hairline)` | `var(--dk-border-primary-hairline)` |
134
+ | `--dk-border-success-hover` | `var(--dk-color-success-600)` | `var(--dk-color-success-300)` |
135
+ | `--dk-border-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-50)` |
136
+ | `--dk-border-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-200)` |
137
+ | `--dk-border-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-100)` |
138
+ | `--dk-border-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-400)` |
139
+ | `--dk-border-warning-elevation` | `var(--dk-color-warning-800)` | `var(--dk-color-warning-800)` |
140
+ | `--dk-border-warning-elevation-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-700)` |
141
+ | `--dk-border-warning-elevation-hover` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-700)` |
142
+ | `--dk-border-warning-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
143
+ | `--dk-border-warning-hairline` | `var(--dk-color-warning-300)` | `var(--dk-color-warning-800)` |
144
+ | `--dk-border-warning-hover` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-300)` |
145
+ | `--dk-border-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-50)` |
146
+ | `--dk-border-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-200)` |
147
+ | `--dk-border-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-100)` |
package/manifest/tokens/font.md ADDED
@@ -0,0 +1,90 @@
1
+ # Type tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-font-body-lg-line-height` | `var(--dk-responsive-font-body-lg-line-height)` | `var(--dk-responsive-font-body-lg-line-height)` |
8
+ | `--dk-font-body-lg-paragraph-spacing` | `var(--dk-responsive-font-body-lg-paragraph-spacing)` | `var(--dk-responsive-font-body-lg-paragraph-spacing)` |
9
+ | `--dk-font-body-lg-text-size` | `var(--dk-responsive-font-body-lg-text-size)` | `var(--dk-responsive-font-body-lg-text-size)` |
10
+ | `--dk-font-body-md-line-height` | `var(--dk-responsive-font-body-md-line-height)` | `var(--dk-responsive-font-body-md-line-height)` |
11
+ | `--dk-font-body-md-paragraph-spacing` | `var(--dk-responsive-font-body-md-paragraph-spacing)` | `var(--dk-responsive-font-body-md-paragraph-spacing)` |
12
+ | `--dk-font-body-md-text-size` | `var(--dk-responsive-font-body-md-text-size)` | `var(--dk-responsive-font-body-md-text-size)` |
13
+ | `--dk-font-body-sm-line-height` | `var(--dk-responsive-font-body-sm-line-height)` | `var(--dk-responsive-font-body-sm-line-height)` |
14
+ | `--dk-font-body-sm-paragraph-spacing` | `var(--dk-responsive-font-body-sm-paragraph-spacing)` | `var(--dk-responsive-font-body-sm-paragraph-spacing)` |
15
+ | `--dk-font-body-sm-text-size` | `var(--dk-responsive-font-body-sm-text-size)` | `var(--dk-responsive-font-body-sm-text-size)` |
16
+ | `--dk-font-body-xsm-line-height` | `var(--dk-responsive-font-body-xsm-line-height)` | `var(--dk-responsive-font-body-xsm-line-height)` |
17
+ | `--dk-font-body-xsm-paragraph-spacing` | `var(--dk-responsive-font-body-xsm-paragraph-spacing)` | `var(--dk-responsive-font-body-xsm-paragraph-spacing)` |
18
+ | `--dk-font-body-xsm-text-size` | `var(--dk-responsive-font-body-xsm-text-size)` | `var(--dk-responsive-font-body-xsm-text-size)` |
19
+ | `--dk-font-family-primary` | `var(--dk-primitive-font-family-inter)` | `var(--dk-primitive-font-family-inter)` |
20
+ | `--dk-font-family-secondary` | `var(--dk-primitive-font-family-syne)` | `var(--dk-primitive-font-family-syne)` |
21
+ | `--dk-font-heading-h1-line-height` | `var(--dk-responsive-font-headings-h1-line-height)` | `var(--dk-responsive-font-headings-h1-line-height)` |
22
+ | `--dk-font-heading-h1-paragraph-spacing` | `var(--dk-responsive-font-headings-h1-paragraph-spacing)` | `var(--dk-responsive-font-headings-h1-paragraph-spacing)` |
23
+ | `--dk-font-heading-h1-text-size` | `var(--dk-responsive-font-headings-h1-text-size)` | `var(--dk-responsive-font-headings-h1-text-size)` |
24
+ | `--dk-font-heading-h2-line-height` | `var(--dk-responsive-font-headings-h2-line-height)` | `var(--dk-responsive-font-headings-h2-line-height)` |
25
+ | `--dk-font-heading-h2-paragraph-spacing` | `var(--dk-responsive-font-headings-h2-paragraph-spacing)` | `var(--dk-responsive-font-headings-h2-paragraph-spacing)` |
26
+ | `--dk-font-heading-h2-text-size` | `var(--dk-responsive-font-headings-h2-text-size)` | `var(--dk-responsive-font-headings-h2-text-size)` |
27
+ | `--dk-font-heading-h3-line-height` | `var(--dk-responsive-font-headings-h3-line-height)` | `var(--dk-responsive-font-headings-h3-line-height)` |
28
+ | `--dk-font-heading-h3-paragraph-spacing` | `var(--dk-responsive-font-headings-h3-paragraph-spacing)` | `var(--dk-responsive-font-headings-h3-paragraph-spacing)` |
29
+ | `--dk-font-heading-h3-text-size` | `var(--dk-responsive-font-headings-h3-text-size)` | `var(--dk-responsive-font-headings-h3-text-size)` |
30
+ | `--dk-font-heading-h4-line-height` | `var(--dk-responsive-font-headings-h4-line-height)` | `var(--dk-responsive-font-headings-h4-line-height)` |
31
+ | `--dk-font-heading-h4-paragraph-spacing` | `var(--dk-responsive-font-headings-h4-paragraph-spacing)` | `var(--dk-responsive-font-headings-h4-paragraph-spacing)` |
32
+ | `--dk-font-heading-h4-text-size` | `var(--dk-responsive-font-headings-h4-text-size)` | `var(--dk-responsive-font-headings-h4-text-size)` |
33
+ | `--dk-font-heading-h5-line-height` | `var(--dk-responsive-font-headings-h5-line-height)` | `var(--dk-responsive-font-headings-h5-line-height)` |
34
+ | `--dk-font-heading-h5-paragraph-spacing` | `var(--dk-responsive-font-headings-h5-paragraph-spacing)` | `var(--dk-responsive-font-headings-h5-paragraph-spacing)` |
35
+ | `--dk-font-heading-h5-text-size` | `var(--dk-responsive-font-headings-h5-text-size)` | `var(--dk-responsive-font-headings-h5-text-size)` |
36
+ | `--dk-font-heading-h6-line-height` | `var(--dk-responsive-font-headings-h6-line-height)` | `var(--dk-responsive-font-headings-h6-line-height)` |
37
+ | `--dk-font-heading-h6-paragraph-spacing` | `var(--dk-responsive-font-headings-h6-paragraph-spacing)` | `var(--dk-responsive-font-headings-h6-paragraph-spacing)` |
38
+ | `--dk-font-heading-h6-text-size` | `var(--dk-responsive-font-headings-h6-text-size)` | `var(--dk-responsive-font-headings-h6-text-size)` |
39
+ | `--dk-font-input-lg-line-height` | `var(--dk-responsive-font-input-lg-line-height)` | `var(--dk-responsive-font-input-lg-line-height)` |
40
+ | `--dk-font-input-lg-paragraph-spacing` | `var(--dk-responsive-font-input-lg-paragraph-spacing)` | `var(--dk-responsive-font-input-lg-paragraph-spacing)` |
41
+ | `--dk-font-input-lg-text-size` | `var(--dk-responsive-font-input-lg-text-size)` | `var(--dk-responsive-font-input-lg-text-size)` |
42
+ | `--dk-font-input-md-line-height` | `var(--dk-responsive-font-input-md-line-height)` | `var(--dk-responsive-font-input-md-line-height)` |
43
+ | `--dk-font-input-md-paragraph-spacing` | `var(--dk-responsive-font-input-md-paragraph-spacing)` | `var(--dk-responsive-font-input-md-paragraph-spacing)` |
44
+ | `--dk-font-input-md-text-size` | `var(--dk-responsive-font-input-md-text-size)` | `var(--dk-responsive-font-input-md-text-size)` |
45
+ | `--dk-font-input-sm-line-height` | `var(--dk-responsive-font-input-sm-line-height)` | `var(--dk-responsive-font-input-sm-line-height)` |
46
+ | `--dk-font-input-sm-paragraph-spacing` | `var(--dk-responsive-font-input-sm-paragraph-spacing)` | `var(--dk-responsive-font-input-sm-paragraph-spacing)` |
47
+ | `--dk-font-input-sm-text-size` | `var(--dk-responsive-font-input-sm-text-size)` | `var(--dk-responsive-font-input-sm-text-size)` |
48
+ | `--dk-font-overline-lg-line-height` | `var(--dk-responsive-font-overline-lg-line-height)` | `var(--dk-responsive-font-overline-lg-line-height)` |
49
+ | `--dk-font-overline-lg-paragraph-spacing` | `var(--dk-responsive-font-overline-lg-paragraph-spacing)` | `var(--dk-responsive-font-overline-lg-paragraph-spacing)` |
50
+ | `--dk-font-overline-lg-text-size` | `var(--dk-responsive-font-overline-lg-text-size)` | `var(--dk-responsive-font-overline-lg-text-size)` |
51
+ | `--dk-font-overline-md-line-height` | `var(--dk-responsive-font-overline-md-line-height)` | `var(--dk-responsive-font-overline-md-line-height)` |
52
+ | `--dk-font-overline-md-paragraph-spacing` | `var(--dk-responsive-font-overline-md-paragraph-spacing)` | `var(--dk-responsive-font-overline-md-paragraph-spacing)` |
53
+ | `--dk-font-overline-md-text-size` | `var(--dk-responsive-font-overline-md-text-size)` | `var(--dk-responsive-font-overline-md-text-size)` |
54
+ | `--dk-font-overline-sm-line-height` | `var(--dk-responsive-font-overline-sm-line-height)` | `var(--dk-responsive-font-overline-sm-line-height)` |
55
+ | `--dk-font-overline-sm-paragraph-spacing` | `var(--dk-responsive-font-overline-sm-paragraph-spacing)` | `var(--dk-responsive-font-overline-sm-paragraph-spacing)` |
56
+ | `--dk-font-overline-sm-text-size` | `var(--dk-responsive-font-overline-sm-text-size)` | `var(--dk-responsive-font-overline-sm-text-size)` |
57
+ | `--dk-font-scale-body-large-line-height` | `1.625rem` | `1.625rem` |
58
+ | `--dk-font-scale-body-large-text-size` | `var(--dk-primitive-scale-4-5)` | `var(--dk-primitive-scale-4-5)` |
59
+ | `--dk-font-scale-body-medium-line-height` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
60
+ | `--dk-font-scale-body-medium-text-size` | `var(--dk-primitive-scale-4)` | `var(--dk-primitive-scale-4)` |
61
+ | `--dk-font-scale-body-small-line-height` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
62
+ | `--dk-font-scale-body-small-text-size` | `var(--dk-primitive-scale-3-5)` | `var(--dk-primitive-scale-3-5)` |
63
+ | `--dk-font-scale-body-xlarge-line-height` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
64
+ | `--dk-font-scale-body-xlarge-text-size` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
65
+ | `--dk-font-scale-body-xsmall-line-height` | `var(--dk-primitive-scale-4-5)` | `var(--dk-primitive-scale-4-5)` |
66
+ | `--dk-font-scale-body-xsmall-text-size` | `var(--dk-primitive-scale-3)` | `var(--dk-primitive-scale-3)` |
67
+ | `--dk-font-scale-display-large-line-height` | `var(--dk-primitive-scale-12)` | `var(--dk-primitive-scale-12)` |
68
+ | `--dk-font-scale-display-large-text-size` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
69
+ | `--dk-font-scale-display-medium-line-height` | `var(--dk-primitive-scale-11)` | `var(--dk-primitive-scale-11)` |
70
+ | `--dk-font-scale-display-medium-text-size` | `var(--dk-primitive-scale-9)` | `var(--dk-primitive-scale-9)` |
71
+ | `--dk-font-scale-display-small-line-height` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
72
+ | `--dk-font-scale-display-small-text-size` | `var(--dk-primitive-scale-8)` | `var(--dk-primitive-scale-8)` |
73
+ | `--dk-font-scale-display-xlarge-line-height` | `var(--dk-primitive-scale-13)` | `var(--dk-primitive-scale-13)` |
74
+ | `--dk-font-scale-display-xlarge-text-size` | `var(--dk-primitive-scale-11)` | `var(--dk-primitive-scale-11)` |
75
+ | `--dk-font-scale-display-xxlarge-line-height` | `var(--dk-primitive-scale-14)` | `var(--dk-primitive-scale-14)` |
76
+ | `--dk-font-scale-display-xxlarge-text-size` | `var(--dk-primitive-scale-12)` | `var(--dk-primitive-scale-12)` |
77
+ | `--dk-font-scale-heading-large-line-height` | `var(--dk-primitive-scale-9)` | `var(--dk-primitive-scale-9)` |
78
+ | `--dk-font-scale-heading-large-text-size` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
79
+ | `--dk-font-scale-heading-medium-line-height` | `var(--dk-primitive-scale-8)` | `var(--dk-primitive-scale-8)` |
80
+ | `--dk-font-scale-heading-medium-text-size` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
81
+ | `--dk-font-scale-heading-small-line-height` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
82
+ | `--dk-font-scale-heading-small-text-size` | `var(--dk-primitive-scale-5-5)` | `var(--dk-primitive-scale-5-5)` |
83
+ | `--dk-font-scale-heading-xlarge-line-height` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
84
+ | `--dk-font-scale-heading-xlarge-text-size` | `var(--dk-primitive-scale-8)` | `var(--dk-primitive-scale-8)` |
85
+ | `--dk-font-scale-heading-xsmall-line-height` | `var(--dk-primitive-scale-7)` | `var(--dk-primitive-scale-7)` |
86
+ | `--dk-font-scale-heading-xsmall-text-size` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
87
+ | `--dk-font-scale-heading-xxlarge-line-height` | `var(--dk-primitive-scale-12)` | `var(--dk-primitive-scale-12)` |
88
+ | `--dk-font-scale-heading-xxlarge-text-size` | `var(--dk-primitive-scale-10)` | `var(--dk-primitive-scale-10)` |
89
+ | `--dk-font-scale-heading-xxsmall-line-height` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
90
+ | `--dk-font-scale-heading-xxsmall-text-size` | `var(--dk-primitive-scale-4-5)` | `var(--dk-primitive-scale-4-5)` |
package/manifest/tokens/icon.md ADDED
@@ -0,0 +1,84 @@
1
+ # Icon colours tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-icon-base-black` | `var(--dk-color-base-black)` | `var(--dk-color-base-black)` |
8
+ | `--dk-icon-base-white` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
9
+ | `--dk-icon-choice-disabled` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
10
+ | `--dk-icon-choice-selected` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
11
+ | `--dk-icon-choice-track` | `var(--dk-color-base-white)` | `var(--dk-color-base-white)` |
12
+ | `--dk-icon-control-active` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-50)` |
13
+ | `--dk-icon-control-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-200)` |
14
+ | `--dk-icon-control-disabled` | `var(--dk-icon-disabled-subtle)` | `var(--dk-icon-disabled-subtle)` |
15
+ | `--dk-icon-control-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-100)` |
16
+ | `--dk-icon-default-body` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
17
+ | `--dk-icon-default-body-reverse` | `var(--dk-color-base-white)` | `var(--dk-color-base-black)` |
18
+ | `--dk-icon-disabled-default` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-400)` |
19
+ | `--dk-icon-disabled-subtle` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
20
+ | `--dk-icon-disabled-subtle-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
21
+ | `--dk-icon-disabled-subtle-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
22
+ | `--dk-icon-error-active` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
23
+ | `--dk-icon-error-default` | `var(--dk-color-error-500)` | `var(--dk-color-error-400)` |
24
+ | `--dk-icon-error-focus` | `var(--dk-color-error-700)` | `var(--dk-color-error-200)` |
25
+ | `--dk-icon-error-hover` | `var(--dk-color-error-600)` | `var(--dk-color-error-300)` |
26
+ | `--dk-icon-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-900)` |
27
+ | `--dk-icon-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-700)` |
28
+ | `--dk-icon-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-800)` |
29
+ | `--dk-icon-field-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-200)` |
30
+ | `--dk-icon-field-disabled` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
31
+ | `--dk-icon-field-hover` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-50)` |
32
+ | `--dk-icon-field-subtle` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
33
+ | `--dk-icon-field-subtle-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-400)` |
34
+ | `--dk-icon-hue-next1-default` | `var(--dk-primitive-color-primary-next1-500)` | `var(--dk-primitive-color-primary-next1-400)` |
35
+ | `--dk-icon-hue-next2-default` | `var(--dk-primitive-color-primary-next2-500)` | `var(--dk-primitive-color-primary-next2-400)` |
36
+ | `--dk-icon-hue-next3-default` | `var(--dk-primitive-color-primary-next3-500)` | `var(--dk-primitive-color-primary-next3-400)` |
37
+ | `--dk-icon-hue-next4-default` | `var(--dk-primitive-color-primary-next4-500)` | `var(--dk-primitive-color-primary-next4-400)` |
38
+ | `--dk-icon-hue-prev1-default` | `var(--dk-primitive-color-primary-prev1-500)` | `var(--dk-primitive-color-primary-prev1-400)` |
39
+ | `--dk-icon-hue-prev2-default` | `var(--dk-primitive-color-primary-prev2-500)` | `var(--dk-primitive-color-primary-prev2-400)` |
40
+ | `--dk-icon-hue-prev3-default` | `var(--dk-primitive-color-primary-prev3-500)` | `var(--dk-primitive-color-primary-prev3-400)` |
41
+ | `--dk-icon-hue-prev4-default` | `var(--dk-primitive-color-primary-prev4-500)` | `var(--dk-primitive-color-primary-prev4-400)` |
42
+ | `--dk-icon-hue-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
43
+ | `--dk-icon-information-active` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
44
+ | `--dk-icon-information-default` | `var(--dk-color-information-500)` | `var(--dk-color-information-400)` |
45
+ | `--dk-icon-information-focus` | `var(--dk-color-information-700)` | `var(--dk-color-information-200)` |
46
+ | `--dk-icon-information-hover` | `var(--dk-color-information-600)` | `var(--dk-color-information-300)` |
47
+ | `--dk-icon-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-900)` |
48
+ | `--dk-icon-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-700)` |
49
+ | `--dk-icon-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-800)` |
50
+ | `--dk-icon-inverse-default` | `var(--dk-color-base-white)` | `var(--dk-color-neutral-1000)` |
51
+ | `--dk-icon-inverse-neutral` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
52
+ | `--dk-icon-neutral-active` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-100)` |
53
+ | `--dk-icon-neutral-default` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-200)` |
54
+ | `--dk-icon-neutral-focus` | `var(--dk-color-neutral-700)` | `var(--dk-color-neutral-50)` |
55
+ | `--dk-icon-neutral-hover` | `var(--dk-color-neutral-600)` | `var(--dk-color-neutral-100)` |
56
+ | `--dk-icon-neutral-subtle` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
57
+ | `--dk-icon-neutral-subtle-focus` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-400)` |
58
+ | `--dk-icon-neutral-subtle-hover` | `var(--dk-color-neutral-400)` | `var(--dk-color-neutral-500)` |
59
+ | `--dk-icon-primary-active` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-200)` |
60
+ | `--dk-icon-primary-default` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-500)` |
61
+ | `--dk-icon-primary-disabled` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-700)` |
62
+ | `--dk-icon-primary-disabled-active` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
63
+ | `--dk-icon-primary-disabled-hover` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
64
+ | `--dk-icon-primary-focus` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-300)` |
65
+ | `--dk-icon-primary-highlight` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
66
+ | `--dk-icon-primary-hover` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
67
+ | `--dk-icon-primary-oos` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
68
+ | `--dk-icon-primary-subtle` | `var(--dk-color-primary-50)` | `var(--dk-color-primary-800)` |
69
+ | `--dk-icon-primary-subtle-focus` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-600)` |
70
+ | `--dk-icon-primary-subtle-hover` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-700)` |
71
+ | `--dk-icon-success-active` | `var(--dk-icon-primary-active)` | `var(--dk-icon-primary-active)` |
72
+ | `--dk-icon-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
73
+ | `--dk-icon-success-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-200)` |
74
+ | `--dk-icon-success-hover` | `var(--dk-color-success-600)` | `var(--dk-color-success-300)` |
75
+ | `--dk-icon-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-900)` |
76
+ | `--dk-icon-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-700)` |
77
+ | `--dk-icon-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-800)` |
78
+ | `--dk-icon-warning-active` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
79
+ | `--dk-icon-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-400)` |
80
+ | `--dk-icon-warning-focus` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-200)` |
81
+ | `--dk-icon-warning-hover` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-300)` |
82
+ | `--dk-icon-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-900)` |
83
+ | `--dk-icon-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-700)` |
84
+ | `--dk-icon-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-800)` |
package/manifest/tokens/interactive.md ADDED
@@ -0,0 +1,53 @@
1
+ # Interaction tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-interactive-control-padding-block` | `var(--dk-primitive-scale-1)` | `var(--dk-primitive-scale-1)` |
8
+ | `--dk-interactive-control-padding-inline` | `var(--dk-primitive-scale-1-5)` | `var(--dk-primitive-scale-1-5)` |
9
+ | `--dk-interactive-control-radius` | `var(--dk-border-radius-150)` | `var(--dk-border-radius-150)` |
10
+ | `--dk-interactive-grow-panel` | `var(--dk-motion-grow-scale-panel)` | `var(--dk-motion-grow-scale-panel)` |
11
+ | `--dk-interactive-grow-surface` | `var(--dk-motion-grow-scale-surface)` | `var(--dk-motion-grow-scale-surface)` |
12
+ | `--dk-interactive-item-padding-block` | `var(--dk-primitive-scale-2)` | `var(--dk-primitive-scale-2)` |
13
+ | `--dk-interactive-item-padding-inline` | `var(--dk-primitive-scale-2-5)` | `var(--dk-primitive-scale-2-5)` |
14
+ | `--dk-interactive-item-radius` | `var(--dk-border-radius-150)` | `var(--dk-border-radius-150)` |
15
+ | `--dk-interactive-mark-reach` | `1` | `0.6` |
16
+ | `--dk-interactive-mark-shade` | `var(--dk-color-base-black)` | `var(--dk-color-base-white)` |
17
+ | `--dk-interactive-panel-padding-block` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
18
+ | `--dk-interactive-panel-padding-inline` | `var(--dk-primitive-scale-5)` | `var(--dk-primitive-scale-5)` |
19
+ | `--dk-interactive-panel-radius` | `var(--dk-border-radius-300)` | `var(--dk-border-radius-300)` |
20
+ | `--dk-interactive-press-compact` | `var(--dk-motion-press-scale-compact)` | `var(--dk-motion-press-scale-compact)` |
21
+ | `--dk-interactive-press-control` | `var(--dk-motion-press-scale-control)` | `var(--dk-motion-press-scale-control)` |
22
+ | `--dk-interactive-press-item` | `var(--dk-motion-press-scale-item)` | `var(--dk-motion-press-scale-item)` |
23
+ | `--dk-interactive-press-panel` | `var(--dk-motion-press-scale-panel)` | `var(--dk-motion-press-scale-panel)` |
24
+ | `--dk-interactive-press-surface` | `var(--dk-motion-press-scale-surface)` | `var(--dk-motion-press-scale-surface)` |
25
+ | `--dk-interactive-ring-width` | `var(--dk-primitive-scale-0-5)` | `var(--dk-primitive-scale-0-5)` |
26
+ | `--dk-interactive-surface-padding-block` | `var(--dk-primitive-scale-4)` | `var(--dk-primitive-scale-4)` |
27
+ | `--dk-interactive-surface-padding-inline` | `var(--dk-primitive-scale-4)` | `var(--dk-primitive-scale-4)` |
28
+ | `--dk-interactive-surface-radius` | `var(--dk-border-radius-200)` | `var(--dk-border-radius-200)` |
29
+ | `--dk-interactive-target-min` | `var(--dk-primitive-scale-6)` | `var(--dk-primitive-scale-6)` |
30
+ | `--dk-interactive-target-min-touch` | `var(--dk-primitive-scale-11)` | `var(--dk-primitive-scale-11)` |
31
+ | `--dk-interactive-tone-fill-active` | `initial` | `initial` |
32
+ | `--dk-interactive-tone-fill-hover` | `initial` | `initial` |
33
+ | `--dk-interactive-tone-mark` | `initial` | `initial` |
34
+ | `--dk-interactive-tone-mark-active` | `initial` | `initial` |
35
+ | `--dk-interactive-tone-mark-hover` | `initial` | `initial` |
36
+ | `--dk-interactive-tone-text` | `initial` | `initial` |
37
+ | `--dk-interactive-tone-text-subtle` | `initial` | `initial` |
38
+
39
+ ## Using it: the interaction foundation
40
+
41
+ Anything clickable that is not already a kit component (a row, a card you built, a tile, a chip) takes `data-interactive` instead of hand-written hover CSS. The value is the tier:
42
+
43
+ | Tier | For | Behaviour |
44
+ |---|---|---|
45
+ | `data-interactive` (empty) or `="control"` | Button-sized controls | The control padding, radius and press |
46
+ | `="compact"` | Small squares: an icon, a page number, a day | A deeper press, so its edge travels like a wider control's |
47
+ | `="item"` | Rows in a list or menu | Starts its content, presses lightly |
48
+ | `="surface"` | Cards | Grows a little on hover, presses on click |
49
+ | `="panel"` | Large panels | The gentlest grow and press |
50
+
51
+ Add `data-interactive-fill="raised"` or `="nested"` when it should have a fill at rest. The foundation gives hover, press, focus ring and the colour motion, all at weight zero, so a component's own rule always wins.
52
+
53
+ The states it reads: selected (a solid primary) from `aria-current`, `aria-pressed` or a single-select `aria-selected`; highlighted (a primary tint, for "in the set") from `aria-checked`, a multi-select `aria-selected` or `data-highlighted`; disabled from `disabled` or `aria-disabled`, which wins over everything. `data-pseudo-class="hover|active|focus"` forces a state for docs and screenshots only.
package/manifest/tokens/layout.md ADDED
@@ -0,0 +1,8 @@
1
+ # Layout tokens
2
+
3
+ Declared values, one per screen width, smallest first. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-responsive-layout-frame-width` | `48rem, 64rem, 90rem` | `48rem, 64rem, 90rem` |
8
+ | `--dk-responsive-layout-max-width` | `48rem, 64rem, 80rem` | `48rem, 64rem, 80rem` |
package/manifest/tokens/motion.md ADDED
@@ -0,0 +1,97 @@
1
+ # Motion tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-motion-cascade-beat` | `60ms` | `60ms` |
8
+ | `--dk-motion-cascade-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
9
+ | `--dk-motion-cascade-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
10
+ | `--dk-motion-cascade-max-beats` | `8` | `8` |
11
+ | `--dk-motion-cascade-rise` | `12px` | `12px` |
12
+ | `--dk-motion-curtain-content-delay` | `var(--dk-primitive-motion-duration-480)` | `var(--dk-primitive-motion-duration-480)` |
13
+ | `--dk-motion-curtain-recede-duration` | `var(--dk-primitive-motion-duration-850)` | `var(--dk-primitive-motion-duration-850)` |
14
+ | `--dk-motion-curtain-recede-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
15
+ | `--dk-motion-curtain-recede-opacity` | `0.6` | `0.6` |
16
+ | `--dk-motion-curtain-recede-scale` | `0.95` | `0.95` |
17
+ | `--dk-motion-curtain-reveal-duration` | `var(--dk-primitive-motion-duration-120)` | `var(--dk-primitive-motion-duration-120)` |
18
+ | `--dk-motion-curtain-reveal-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
19
+ | `--dk-motion-curtain-rise-delay` | `var(--dk-primitive-motion-duration-650)` | `var(--dk-primitive-motion-duration-650)` |
20
+ | `--dk-motion-curtain-rise-duration` | `var(--dk-primitive-motion-duration-900)` | `var(--dk-primitive-motion-duration-900)` |
21
+ | `--dk-motion-curtain-rise-easing` | `var(--dk-primitive-motion-easing-sweep)` | `var(--dk-primitive-motion-easing-sweep)` |
22
+ | `--dk-motion-duration-brisk` | `var(--dk-primitive-motion-duration-200)` | `var(--dk-primitive-motion-duration-200)` |
23
+ | `--dk-motion-duration-moderate` | `var(--dk-primitive-motion-duration-320)` | `var(--dk-primitive-motion-duration-320)` |
24
+ | `--dk-motion-duration-quick` | `var(--dk-primitive-motion-duration-120)` | `var(--dk-primitive-motion-duration-120)` |
25
+ | `--dk-motion-duration-slow` | `var(--dk-primitive-motion-duration-480)` | `var(--dk-primitive-motion-duration-480)` |
26
+ | `--dk-motion-easing-emphasized` | `var(--dk-primitive-motion-easing-emphasized)` | `var(--dk-primitive-motion-easing-emphasized)` |
27
+ | `--dk-motion-easing-exit` | `var(--dk-primitive-motion-easing-exit)` | `var(--dk-primitive-motion-easing-exit)` |
28
+ | `--dk-motion-easing-gentle` | `var(--dk-primitive-motion-easing-gentle)` | `var(--dk-primitive-motion-easing-gentle)` |
29
+ | `--dk-motion-easing-spring` | `var(--dk-primitive-motion-easing-spring)` | `var(--dk-primitive-motion-easing-spring)` |
30
+ | `--dk-motion-easing-standard` | `var(--dk-primitive-motion-easing-standard)` | `var(--dk-primitive-motion-easing-standard)` |
31
+ | `--dk-motion-enter-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
32
+ | `--dk-motion-enter-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
33
+ | `--dk-motion-enter-large-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
34
+ | `--dk-motion-enter-large-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
35
+ | `--dk-motion-exit-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
36
+ | `--dk-motion-exit-easing` | `var(--dk-motion-easing-exit)` | `var(--dk-motion-easing-exit)` |
37
+ | `--dk-motion-exit-large-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
38
+ | `--dk-motion-exit-large-easing` | `var(--dk-motion-easing-exit)` | `var(--dk-motion-easing-exit)` |
39
+ | `--dk-motion-expand-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
40
+ | `--dk-motion-expand-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
41
+ | `--dk-motion-feedback-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
42
+ | `--dk-motion-feedback-easing` | `var(--dk-motion-easing-spring)` | `var(--dk-motion-easing-spring)` |
43
+ | `--dk-motion-grow-scale-panel` | `var(--dk-primitive-transform-scale-hover-panel)` | `var(--dk-primitive-transform-scale-hover-panel)` |
44
+ | `--dk-motion-grow-scale-surface` | `var(--dk-primitive-transform-scale-hover-surface)` | `var(--dk-primitive-transform-scale-hover-surface)` |
45
+ | `--dk-motion-loop-easing` | `linear` | `linear` |
46
+ | `--dk-motion-page-fade-duration` | `var(--dk-primitive-motion-duration-240)` | `var(--dk-primitive-motion-duration-240)` |
47
+ | `--dk-motion-page-fade-easing` | `var(--dk-motion-easing-standard)` | `var(--dk-motion-easing-standard)` |
48
+ | `--dk-motion-page-fade-exit-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
49
+ | `--dk-motion-page-fade-exit-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
50
+ | `--dk-motion-page-rise` | `16px` | `16px` |
51
+ | `--dk-motion-page-slide-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
52
+ | `--dk-motion-page-slide-easing` | `var(--dk-motion-easing-standard)` | `var(--dk-motion-easing-standard)` |
53
+ | `--dk-motion-page-slide-max` | `600px` | `600px` |
54
+ | `--dk-motion-press-duration` | `var(--dk-motion-duration-brisk)` | `var(--dk-motion-duration-brisk)` |
55
+ | `--dk-motion-press-easing` | `var(--dk-motion-easing-standard)` | `var(--dk-motion-easing-standard)` |
56
+ | `--dk-motion-press-scale-compact` | `var(--dk-primitive-transform-scale-active-compact)` | `var(--dk-primitive-transform-scale-active-compact)` |
57
+ | `--dk-motion-press-scale-control` | `var(--dk-primitive-transform-scale-active-control)` | `var(--dk-primitive-transform-scale-active-control)` |
58
+ | `--dk-motion-press-scale-item` | `var(--dk-primitive-transform-scale-active-item)` | `var(--dk-primitive-transform-scale-active-item)` |
59
+ | `--dk-motion-press-scale-panel` | `var(--dk-primitive-transform-scale-active-panel)` | `var(--dk-primitive-transform-scale-active-panel)` |
60
+ | `--dk-motion-press-scale-surface` | `var(--dk-primitive-transform-scale-active-surface)` | `var(--dk-primitive-transform-scale-active-surface)` |
61
+ | `--dk-motion-rise-char-beat` | `15ms` | `15ms` |
62
+ | `--dk-motion-rise-row-beat` | `20ms` | `20ms` |
63
+ | `--dk-motion-state-duration` | `var(--dk-motion-state-exit-duration)` | `var(--dk-motion-state-exit-duration)` |
64
+ | `--dk-motion-state-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
65
+ | `--dk-motion-state-enter-duration` | `var(--dk-primitive-motion-duration-160)` | `var(--dk-primitive-motion-duration-160)` |
66
+ | `--dk-motion-state-exit-duration` | `var(--dk-primitive-motion-duration-240)` | `var(--dk-primitive-motion-duration-240)` |
67
+ | `--dk-motion-travel-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
68
+ | `--dk-motion-travel-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
69
+ | `--dk-motion-travel-lag` | `0.2` | `0.2` |
70
+
71
+ ## Using it: patterns and the motion API
72
+
73
+ Every pattern is a duration and an easing pair, named for the pattern in the tokens above. By job:
74
+
75
+ | Job | Pattern |
76
+ |---|---|
77
+ | Colour, border or shadow changing on hover or focus | `state` |
78
+ | Shrinking under a press | `press` |
79
+ | Something appearing or leaving: a menu, a toast, a modal | `enter`, `exit` (`enter-large`, `exit-large` for big surfaces) |
80
+ | Opening in place: an accordion, a revealed row | `expand`, on `grid-template-rows` for a height |
81
+ | Confirming an action: a tick, a toggle settling | `feedback` |
82
+ | Something moving across: a sliding indicator, a thumb | `travel` |
83
+ | Spinners and other loops | `loop` (an easing only: a loop's length is its own) |
84
+
85
+ ### The cascade
86
+
87
+ - **HTML:** `data-dk-cascade` on the root; its children are the units. `data-dk-cascade-grid` on a grid gives each visual row one beat, `data-dk-cascade-list` gives rows half a beat, `data-dk-cascade-through` walks into a wrapper, `data-dk-cascade-skip` leaves something out. Plain HTML reveals itself on load; content added later joins with `dk.motion.cascade.late(nodes)`.
88
+ - **TSX:** `<Cascade ready={loaded}>` (or `useCascade(ready)`), keyed or given `arrival` so a new page replays it.
89
+
90
+ ### Changing page
91
+
92
+ - **The swap:** `<TransitionRegion>` with `usePageTransition()` in TSX; `data-dk-transition` on the region and `dk.motion.transition.swap(region, update, { direction })` in HTML. `go('forward' | 'back')` runs in the handler before the state change. It slides on phone-width regions and fades on wider ones.
93
+ - **The curtain:** `curtain(update, { hold, content, cascade })`, in TSX from the React entry and in HTML as `dk.motion.transition.curtain`.
94
+
95
+ ### Reduced motion
96
+
97
+ Anything animated by hand (a WAAPI call, a JS-driven value) reads its timing with `dk.motion.timing(pattern)` and checks `dk.motion.reduced()`.
package/manifest/tokens/radius.md ADDED
@@ -0,0 +1,20 @@
1
+ # Radius tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-border-radius-0` | `var(--dk-dynamic-border-radius-0)` | `var(--dk-dynamic-border-radius-0)` |
8
+ | `--dk-border-radius-25` | `var(--dk-dynamic-border-radius-25)` | `var(--dk-dynamic-border-radius-25)` |
9
+ | `--dk-border-radius-50` | `var(--dk-dynamic-border-radius-50)` | `var(--dk-dynamic-border-radius-50)` |
10
+ | `--dk-border-radius-75` | `var(--dk-dynamic-border-radius-75)` | `var(--dk-dynamic-border-radius-75)` |
11
+ | `--dk-border-radius-100` | `var(--dk-dynamic-border-radius-100)` | `var(--dk-dynamic-border-radius-100)` |
12
+ | `--dk-border-radius-125` | `var(--dk-dynamic-border-radius-125)` | `var(--dk-dynamic-border-radius-125)` |
13
+ | `--dk-border-radius-150` | `var(--dk-dynamic-border-radius-150)` | `var(--dk-dynamic-border-radius-150)` |
14
+ | `--dk-border-radius-200` | `var(--dk-dynamic-border-radius-200)` | `var(--dk-dynamic-border-radius-200)` |
15
+ | `--dk-border-radius-300` | `var(--dk-dynamic-border-radius-300)` | `var(--dk-dynamic-border-radius-300)` |
16
+ | `--dk-border-radius-400` | `var(--dk-dynamic-border-radius-400)` | `var(--dk-dynamic-border-radius-400)` |
17
+ | `--dk-border-radius-500` | `var(--dk-dynamic-border-radius-500)` | `var(--dk-dynamic-border-radius-500)` |
18
+ | `--dk-border-radius-600` | `var(--dk-dynamic-border-radius-600)` | `var(--dk-dynamic-border-radius-600)` |
19
+ | `--dk-border-radius-round` | `var(--dk-dynamic-border-radius-round)` | `var(--dk-dynamic-border-radius-round)` |
20
+ | `--dk-border-radius-round-fixed` | `624.9375rem` | `624.9375rem` |
package/manifest/tokens/shadow.md ADDED
@@ -0,0 +1,28 @@
1
+ # Shadows tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-shadow-card` | `0 4px 8px -2px var(--dk-shadow-drop-md-1), 0 2px 4px -2px var(--dk-shadow-drop-md-2)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.56), 0 8px 20px 0 rgba(0, 0, 0, 0.64)` |
8
+ | `--dk-shadow-card-hover` | `0 12px 16px -4px var(--dk-shadow-drop-lg-1), 0 4px 6px -2px var(--dk-shadow-drop-lg-2)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 16px 32px 0 rgba(0, 0, 0, 0.72)` |
9
+ | `--dk-shadow-drop-2xl` | `color-mix(in srgb, var(--dk-color-base-black) 18%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 36%, transparent)` |
10
+ | `--dk-shadow-drop-3xl` | `color-mix(in srgb, var(--dk-color-base-black) 14%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 28%, transparent)` |
11
+ | `--dk-shadow-drop-lg-1` | `color-mix(in srgb, var(--dk-color-base-black) 8%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 16%, transparent)` |
12
+ | `--dk-shadow-drop-lg-2` | `color-mix(in srgb, var(--dk-color-base-black) 3%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` |
13
+ | `--dk-shadow-drop-md-1` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 20%, transparent)` |
14
+ | `--dk-shadow-drop-md-2` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 12%, transparent)` |
15
+ | `--dk-shadow-drop-sm-1` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 20%, transparent)` |
16
+ | `--dk-shadow-drop-sm-2` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 12%, transparent)` |
17
+ | `--dk-shadow-drop-xl-1` | `color-mix(in srgb, var(--dk-color-base-black) 8%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 16%, transparent)` |
18
+ | `--dk-shadow-drop-xl-2` | `color-mix(in srgb, var(--dk-color-base-black) 3%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 6%, transparent)` |
19
+ | `--dk-shadow-drop-xs` | `color-mix(in srgb, var(--dk-color-base-black) 5%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` |
20
+ | `--dk-shadow-floating` | `0 4px 20px 0 rgba(0, 0, 0, 0.08)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 6px 24px 0 rgba(0, 0, 0, 0.48)` |
21
+ | `--dk-shadow-focus-ring` | `0 0 0 4px var(--dk-color-primary-300)` | `0 0 0 4px var(--dk-color-primary-300)` |
22
+ | `--dk-shadow-inner-lg` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 60%, transparent)` |
23
+ | `--dk-shadow-inner-md` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 60%, transparent)` |
24
+ | `--dk-shadow-inner-sm` | `color-mix(in srgb, var(--dk-color-base-black) 10%, transparent)` | `color-mix(in srgb, var(--dk-color-base-black) 60%, transparent)` |
25
+ | `--dk-shadow-lifted` | `0 4px 10px 0 rgba(0, 0, 0, 0.08)` | `0 4px 12px 0 rgba(0, 0, 0, 0.44)` |
26
+ | `--dk-shadow-overlay` | `0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22)` | `inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64)` |
27
+ | `--dk-shadow-panel` | `0 0 24px 4px rgba(0, 0, 0, 0.20), 0 0 120px 32px rgba(0, 0, 0, 0.45)` | `0 0 16px 0 rgba(0, 0, 0, 0.20), 0 0 96px 8px rgba(0, 0, 0, 0.30)` |
28
+ | `--dk-shadow-raised` | `0 4px 8px 0 rgba(0, 0, 0, 0.04)` | `0 4px 8px 0 rgba(0, 0, 0, 0.36)` |
package/manifest/tokens/spacing.md ADDED
@@ -0,0 +1,35 @@
1
+ # Spacing tokens
2
+
3
+ Declared values, light and dark. Reference a token by name; never copy its value.
4
+
5
+ | Token | Light | Dark |
6
+ |---|---|---|
7
+ | `--dk-spacing-0-5` | `var(--dk-dynamic-spacing-0-5)` | `var(--dk-dynamic-spacing-0-5)` |
8
+ | `--dk-spacing-0-25` | `var(--dk-dynamic-spacing-0-25)` | `var(--dk-dynamic-spacing-0-25)` |
9
+ | `--dk-spacing-1` | `var(--dk-dynamic-spacing-1)` | `var(--dk-dynamic-spacing-1)` |
10
+ | `--dk-spacing-1-5` | `var(--dk-dynamic-spacing-1-5)` | `var(--dk-dynamic-spacing-1-5)` |
11
+ | `--dk-spacing-2` | `var(--dk-dynamic-spacing-2)` | `var(--dk-dynamic-spacing-2)` |
12
+ | `--dk-spacing-2-5` | `var(--dk-dynamic-spacing-2-5)` | `var(--dk-dynamic-spacing-2-5)` |
13
+ | `--dk-spacing-3` | `var(--dk-dynamic-spacing-3)` | `var(--dk-dynamic-spacing-3)` |
14
+ | `--dk-spacing-3-5` | `var(--dk-dynamic-spacing-3-5)` | `var(--dk-dynamic-spacing-3-5)` |
15
+ | `--dk-spacing-4` | `var(--dk-dynamic-spacing-4)` | `var(--dk-dynamic-spacing-4)` |
16
+ | `--dk-spacing-4-5` | `var(--dk-dynamic-spacing-4-5)` | `var(--dk-dynamic-spacing-4-5)` |
17
+ | `--dk-spacing-5` | `var(--dk-dynamic-spacing-5)` | `var(--dk-dynamic-spacing-5)` |
18
+ | `--dk-spacing-5-5` | `var(--dk-dynamic-spacing-5-5)` | `var(--dk-dynamic-spacing-5-5)` |
19
+ | `--dk-spacing-6` | `var(--dk-dynamic-spacing-6)` | `var(--dk-dynamic-spacing-6)` |
20
+ | `--dk-spacing-7` | `var(--dk-dynamic-spacing-7)` | `var(--dk-dynamic-spacing-7)` |
21
+ | `--dk-spacing-8` | `var(--dk-dynamic-spacing-8)` | `var(--dk-dynamic-spacing-8)` |
22
+ | `--dk-spacing-9` | `var(--dk-dynamic-spacing-9)` | `var(--dk-dynamic-spacing-9)` |
23
+ | `--dk-spacing-10` | `var(--dk-dynamic-spacing-10)` | `var(--dk-dynamic-spacing-10)` |
24
+ | `--dk-spacing-11` | `var(--dk-dynamic-spacing-11)` | `var(--dk-dynamic-spacing-11)` |
25
+ | `--dk-spacing-12` | `var(--dk-dynamic-spacing-12)` | `var(--dk-dynamic-spacing-12)` |
26
+ | `--dk-spacing-14` | `var(--dk-dynamic-spacing-14)` | `var(--dk-dynamic-spacing-14)` |
27
+ | `--dk-spacing-16` | `var(--dk-dynamic-spacing-16)` | `var(--dk-dynamic-spacing-16)` |
28
+ | `--dk-spacing-20` | `var(--dk-dynamic-spacing-20)` | `var(--dk-dynamic-spacing-20)` |
29
+ | `--dk-spacing-24` | `var(--dk-dynamic-spacing-24)` | `var(--dk-dynamic-spacing-24)` |
30
+ | `--dk-spacing-28` | `var(--dk-dynamic-spacing-28)` | `var(--dk-dynamic-spacing-28)` |
31
+ | `--dk-spacing-32` | `var(--dk-dynamic-spacing-32)` | `var(--dk-dynamic-spacing-32)` |
32
+ | `--dk-spacing-40` | `var(--dk-dynamic-spacing-40)` | `var(--dk-dynamic-spacing-40)` |
33
+ | `--dk-spacing-48` | `var(--dk-dynamic-spacing-48)` | `var(--dk-dynamic-spacing-48)` |
34
+ | `--dk-spacing-56` | `var(--dk-dynamic-spacing-56)` | `var(--dk-dynamic-spacing-56)` |
35
+ | `--dk-spacing-64` | `var(--dk-dynamic-spacing-64)` | `var(--dk-dynamic-spacing-64)` |