figma-kit 1.0.0-beta.23 → 1.0.0-beta.24

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 (167) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +2 -4
  3. package/dist/components/alert-dialog/alert-dialog.d.ts +31 -0
  4. package/dist/components/alert-dialog/index.d.ts +1 -0
  5. package/dist/components/button/button.d.ts +15 -0
  6. package/dist/components/button/index.d.ts +1 -0
  7. package/dist/components/checkbox/checkbox.d.ts +12 -0
  8. package/dist/components/checkbox/index.d.ts +1 -0
  9. package/dist/components/collapsible/collapsible.d.ts +10 -0
  10. package/dist/components/collapsible/index.d.ts +1 -0
  11. package/dist/components/color-picker/color-picker-alpha.d.ts +4 -0
  12. package/dist/components/color-picker/color-picker-area.d.ts +5 -0
  13. package/dist/components/color-picker/color-picker-hue.d.ts +4 -0
  14. package/dist/components/color-picker/color-picker-input.d.ts +7 -0
  15. package/dist/components/color-picker/color-picker.d.ts +63 -0
  16. package/dist/components/color-picker/index.d.ts +5 -0
  17. package/dist/components/combobox/combobox.d.ts +51 -0
  18. package/dist/components/combobox/index.d.ts +1 -0
  19. package/dist/components/context-menu/context-menu.d.ts +36 -0
  20. package/dist/components/context-menu/index.d.ts +1 -0
  21. package/dist/components/dialog/dialog.d.ts +25 -0
  22. package/dist/components/dialog/index.d.ts +1 -0
  23. package/dist/components/dialog.base/dialog.base.d.ts +15 -0
  24. package/dist/components/dialog.base/index.d.ts +1 -0
  25. package/dist/components/dropdown-menu/dropdown-menu.d.ts +36 -0
  26. package/dist/components/dropdown-menu/index.d.ts +1 -0
  27. package/dist/components/flex/flex.d.ts +23 -0
  28. package/dist/components/flex/index.d.ts +1 -0
  29. package/dist/components/icon/icon.d.ts +16 -0
  30. package/dist/components/icon/index.d.ts +1 -0
  31. package/dist/components/icon-button/icon-button.d.ts +21 -0
  32. package/dist/components/icon-button/index.d.ts +1 -0
  33. package/dist/components/icons/actions.d.ts +3 -0
  34. package/dist/components/icons/align-bottom.d.ts +3 -0
  35. package/dist/components/icons/align-horizontal-center.d.ts +3 -0
  36. package/dist/components/icons/align-left.d.ts +3 -0
  37. package/dist/components/icons/align-right.d.ts +3 -0
  38. package/dist/components/icons/align-top.d.ts +3 -0
  39. package/dist/components/icons/align-vertical-center.d.ts +3 -0
  40. package/dist/components/icons/annotation.d.ts +3 -0
  41. package/dist/components/icons/aspect-ratio.d.ts +3 -0
  42. package/dist/components/icons/auto-height.d.ts +3 -0
  43. package/dist/components/icons/auto-width.d.ts +3 -0
  44. package/dist/components/icons/blend-mode.d.ts +3 -0
  45. package/dist/components/icons/boolean.d.ts +3 -0
  46. package/dist/components/icons/checkmark-indeterminate.d.ts +3 -0
  47. package/dist/components/icons/checkmark.d.ts +3 -0
  48. package/dist/components/icons/chevron-down.d.ts +3 -0
  49. package/dist/components/icons/chevron-left.d.ts +3 -0
  50. package/dist/components/icons/chevron-right.d.ts +3 -0
  51. package/dist/components/icons/chevron-up.d.ts +3 -0
  52. package/dist/components/icons/circle.d.ts +3 -0
  53. package/dist/components/icons/clear.d.ts +3 -0
  54. package/dist/components/icons/close.d.ts +3 -0
  55. package/dist/components/icons/code.d.ts +3 -0
  56. package/dist/components/icons/comment.d.ts +3 -0
  57. package/dist/components/icons/component.d.ts +3 -0
  58. package/dist/components/icons/constraint-left.d.ts +3 -0
  59. package/dist/components/icons/constraint-top.d.ts +3 -0
  60. package/dist/components/icons/corner-radius.d.ts +3 -0
  61. package/dist/components/icons/design.d.ts +3 -0
  62. package/dist/components/icons/draw.d.ts +3 -0
  63. package/dist/components/icons/ellipsis.d.ts +3 -0
  64. package/dist/components/icons/expand.d.ts +3 -0
  65. package/dist/components/icons/eye.d.ts +3 -0
  66. package/dist/components/icons/eyedropper.d.ts +3 -0
  67. package/dist/components/icons/figma.d.ts +3 -0
  68. package/dist/components/icons/fill-gradient.d.ts +3 -0
  69. package/dist/components/icons/fill-pattern.d.ts +3 -0
  70. package/dist/components/icons/fill-solid.d.ts +3 -0
  71. package/dist/components/icons/fixed-size.d.ts +3 -0
  72. package/dist/components/icons/flip-horizontal.d.ts +3 -0
  73. package/dist/components/icons/flip-vertical.d.ts +3 -0
  74. package/dist/components/icons/frame.d.ts +3 -0
  75. package/dist/components/icons/help.d.ts +3 -0
  76. package/dist/components/icons/image.d.ts +3 -0
  77. package/dist/components/icons/index.d.ts +84 -0
  78. package/dist/components/icons/layers-collapse.d.ts +3 -0
  79. package/dist/components/icons/letter-spacing.d.ts +3 -0
  80. package/dist/components/icons/line-height.d.ts +3 -0
  81. package/dist/components/icons/link.d.ts +3 -0
  82. package/dist/components/icons/minus.d.ts +3 -0
  83. package/dist/components/icons/move.d.ts +3 -0
  84. package/dist/components/icons/number.d.ts +3 -0
  85. package/dist/components/icons/opacity.d.ts +3 -0
  86. package/dist/components/icons/palette.d.ts +3 -0
  87. package/dist/components/icons/panel-left-close.d.ts +3 -0
  88. package/dist/components/icons/pen.d.ts +3 -0
  89. package/dist/components/icons/play.d.ts +3 -0
  90. package/dist/components/icons/plus.d.ts +3 -0
  91. package/dist/components/icons/rectangle.d.ts +3 -0
  92. package/dist/components/icons/rotate-clockwise.d.ts +3 -0
  93. package/dist/components/icons/rotation.d.ts +3 -0
  94. package/dist/components/icons/ruler.d.ts +3 -0
  95. package/dist/components/icons/search.d.ts +3 -0
  96. package/dist/components/icons/select-matching.d.ts +3 -0
  97. package/dist/components/icons/shadow-bottom-left.d.ts +3 -0
  98. package/dist/components/icons/shadow-bottom-right.d.ts +3 -0
  99. package/dist/components/icons/shadow-down.d.ts +3 -0
  100. package/dist/components/icons/shadow-left.d.ts +3 -0
  101. package/dist/components/icons/shadow-right.d.ts +3 -0
  102. package/dist/components/icons/shadow-top-left.d.ts +3 -0
  103. package/dist/components/icons/shadow-top-right.d.ts +3 -0
  104. package/dist/components/icons/shadow-up.d.ts +3 -0
  105. package/dist/components/icons/sliders.d.ts +3 -0
  106. package/dist/components/icons/string.d.ts +3 -0
  107. package/dist/components/icons/styles.d.ts +3 -0
  108. package/dist/components/icons/text-align-center.d.ts +3 -0
  109. package/dist/components/icons/text-align-left.d.ts +3 -0
  110. package/dist/components/icons/text-align-right.d.ts +3 -0
  111. package/dist/components/icons/text-vertical-align-bottom.d.ts +3 -0
  112. package/dist/components/icons/text-vertical-align-middle.d.ts +3 -0
  113. package/dist/components/icons/text-vertical-align-top.d.ts +3 -0
  114. package/dist/components/icons/text.d.ts +3 -0
  115. package/dist/components/icons/variable-mode.d.ts +3 -0
  116. package/dist/components/icons/variable.d.ts +3 -0
  117. package/dist/components/icons/video.d.ts +3 -0
  118. package/dist/components/input/index.d.ts +1 -0
  119. package/dist/components/input/input.d.ts +9 -0
  120. package/dist/components/popover/index.d.ts +1 -0
  121. package/dist/components/popover/popover.d.ts +20 -0
  122. package/dist/components/radio-group/index.d.ts +1 -0
  123. package/dist/components/radio-group/radio-group.d.ts +20 -0
  124. package/dist/components/segmented-control/index.d.ts +1 -0
  125. package/dist/components/segmented-control/segmented-control.d.ts +24 -0
  126. package/dist/components/select/index.d.ts +1 -0
  127. package/dist/components/select/select.d.ts +40 -0
  128. package/dist/components/slider/index.d.ts +1 -0
  129. package/dist/components/slider/slider.d.ts +20 -0
  130. package/dist/components/switch/index.d.ts +1 -0
  131. package/dist/components/switch/switch.d.ts +6 -0
  132. package/dist/components/tabs/index.d.ts +1 -0
  133. package/dist/components/tabs/tabs.d.ts +12 -0
  134. package/dist/components/text/index.d.ts +1 -0
  135. package/dist/components/text/text.d.ts +47 -0
  136. package/dist/components/textarea/index.d.ts +1 -0
  137. package/dist/components/textarea/textarea.d.ts +6 -0
  138. package/dist/components/tooltip/index.d.ts +1 -0
  139. package/dist/components/tooltip/tooltip.d.ts +18 -0
  140. package/dist/components/value-field/index.d.ts +10 -0
  141. package/dist/components/value-field/named-colors.d.ts +2 -0
  142. package/dist/components/value-field/types.d.ts +15 -0
  143. package/dist/components/value-field/value-field-base.d.ts +17 -0
  144. package/dist/components/value-field/value-field-elements.d.ts +31 -0
  145. package/dist/components/value-field/value-field-hex.d.ts +29 -0
  146. package/dist/components/value-field/value-field-numeric-select.d.ts +16 -0
  147. package/dist/components/value-field/value-field-numeric.d.ts +62 -0
  148. package/dist/components/value-field/value-field-scrubber.d.ts +20 -0
  149. package/dist/figma-development-theme.css +1 -1
  150. package/dist/index.cjs +4 -11
  151. package/dist/index.d.ts +39 -1004
  152. package/dist/index.mjs +17909 -2084
  153. package/dist/lib/color.d.ts +40 -0
  154. package/dist/lib/constants.d.ts +2 -0
  155. package/dist/lib/dom/focus.d.ts +14 -0
  156. package/dist/lib/dom/set-input-value.d.ts +8 -0
  157. package/dist/lib/number/clamp.d.ts +1 -0
  158. package/dist/lib/number/normalize.d.ts +13 -0
  159. package/dist/lib/react/add-class-name.d.ts +4 -0
  160. package/dist/lib/react/create-context.d.ts +14 -0
  161. package/dist/lib/react/use-compose-refs.d.ts +19 -0
  162. package/dist/lib/react/use-controllable-state.d.ts +14 -0
  163. package/dist/lib/react/use-select-on-input-click.d.ts +9 -0
  164. package/dist/styles.css +277 -20
  165. package/dist/tailwind.css +273 -0
  166. package/package.json +69 -33
  167. package/dist/tailwind.preset.js +0 -303
package/dist/tailwind.preset.js DELETED
@@ -1,303 +0,0 @@
1
- export default {
2
- theme: {
3
- colors: {
4
- current: 'currentColor',
5
- inherit: 'inherit',
6
- transparent: 'transparent',
7
- bg: {
8
- DEFAULT: 'var(--figma-color-bg)',
9
- brand: 'var(--figma-color-bg-brand)',
10
- 'brand-hover': 'var(--figma-color-bg-brand-hover)',
11
- 'brand-pressed': 'var(--figma-color-bg-brand-pressed)',
12
- 'brand-secondary': 'var(--figma-color-bg-brand-secondary)',
13
- 'brand-tertiary': 'var(--figma-color-bg-brand-tertiary)',
14
- component: 'var(--figma-color-bg-component)',
15
- 'component-hover': 'var(--figma-color-bg-component-hover)',
16
- 'component-pressed': 'var(--figma-color-bg-component-pressed)',
17
- 'component-secondary': 'var(--figma-color-bg-component-secondary)',
18
- 'component-tertiary': 'var(--figma-color-bg-component-tertiary)',
19
- danger: 'var(--figma-color-bg-danger)',
20
- 'danger-hover': 'var(--figma-color-bg-danger-hover)',
21
- 'danger-pressed': 'var(--figma-color-bg-danger-pressed)',
22
- 'danger-secondary': 'var(--figma-color-bg-danger-secondary)',
23
- 'danger-tertiary': 'var(--figma-color-bg-danger-tertiary)',
24
- disabled: 'var(--figma-color-bg-disabled)',
25
- 'disabled-secondary': 'var(--figma-color-bg-disabled-secondary)',
26
- hover: 'var(--figma-color-bg-hover)',
27
- inverse: 'var(--figma-color-bg-inverse)',
28
- onselected: 'var(--figma-color-bg-onselected)',
29
- 'onselected-hover': 'var(--figma-color-bg-onselected-hover)',
30
- 'onselected-pressed': 'var(--figma-color-bg-onselected-pressed)',
31
- pressed: 'var(--figma-color-bg-pressed)',
32
- secondary: 'var(--figma-color-bg-secondary)',
33
- selected: 'var(--figma-color-bg-selected)',
34
- 'selected-hover': 'var(--figma-color-bg-selected-hover)',
35
- 'selected-pressed': 'var(--figma-color-bg-selected-pressed)',
36
- 'selected-secondary': 'var(--figma-color-bg-selected-secondary)',
37
- 'selected-strong': 'var(--figma-color-bg-selected-strong)',
38
- 'selected-tertiary': 'var(--figma-color-bg-selected-tertiary)',
39
- success: 'var(--figma-color-bg-success)',
40
- 'success-hover': 'var(--figma-color-bg-success-hover)',
41
- 'success-pressed': 'var(--figma-color-bg-success-pressed)',
42
- 'success-secondary': 'var(--figma-color-bg-success-secondary)',
43
- 'success-tertiary': 'var(--figma-color-bg-success-tertiary)',
44
- tertiary: 'var(--figma-color-bg-tertiary)',
45
- warning: 'var(--figma-color-bg-warning)',
46
- 'warning-hover': 'var(--figma-color-bg-warning-hover)',
47
- 'warning-pressed': 'var(--figma-color-bg-warning-pressed)',
48
- 'warning-secondary': 'var(--figma-color-bg-warning-secondary)',
49
- 'warning-tertiary': 'var(--figma-color-bg-warning-tertiary)',
50
- },
51
- border: {
52
- DEFAULT: 'var(--figma-color-border)',
53
- brand: 'var(--figma-color-border-brand)',
54
- 'brand-strong': 'var(--figma-color-border-brand-strong)',
55
- component: 'var(--figma-color-border-component)',
56
- 'component-hover': 'var(--figma-color-border-component-hover)',
57
- 'component-strong': 'var(--figma-color-border-component-strong)',
58
- danger: 'var(--figma-color-border-danger)',
59
- 'danger-strong': 'var(--figma-color-border-danger-strong)',
60
- disabled: 'var(--figma-color-border-disabled)',
61
- 'disabled-strong': 'var(--figma-color-border-disabled-strong)',
62
- onbrand: 'var(--figma-color-border-onbrand)',
63
- 'onbrand-strong': 'var(--figma-color-border-onbrand-strong)',
64
- oncomponent: 'var(--figma-color-border-oncomponent)',
65
- 'oncomponent-strong': 'var(--figma-color-border-oncomponent-strong)',
66
- ondanger: 'var(--figma-color-border-ondanger)',
67
- 'ondanger-strong': 'var(--figma-color-border-ondanger-strong)',
68
- onselected: 'var(--figma-color-border-onselected)',
69
- 'onselected-strong': 'var(--figma-color-border-onselected-strong)',
70
- onsuccess: 'var(--figma-color-border-onsuccess)',
71
- 'onsuccess-strong': 'var(--figma-color-border-onsuccess-strong)',
72
- onwarning: 'var(--figma-color-border-onwarning)',
73
- 'onwarning-strong': 'var(--figma-color-border-onwarning-strong)',
74
- selected: 'var(--figma-color-border-selected)',
75
- 'selected-strong': 'var(--figma-color-border-selected-strong)',
76
- strong: 'var(--figma-color-border-strong)',
77
- success: 'var(--figma-color-border-success)',
78
- 'success-strong': 'var(--figma-color-border-success-strong)',
79
- warning: 'var(--figma-color-border-warning)',
80
- 'warning-strong': 'var(--figma-color-border-warning-strong)',
81
- },
82
- icon: {
83
- DEFAULT: 'var(--figma-color-icon)',
84
- brand: 'var(--figma-color-icon-brand)',
85
- 'brand-pressed': 'var(--figma-color-icon-brand-pressed)',
86
- 'brand-secondary': 'var(--figma-color-icon-brand-secondary)',
87
- 'brand-tertiary': 'var(--figma-color-icon-brand-tertiary)',
88
- component: 'var(--figma-color-icon-component)',
89
- 'component-pressed': 'var(--figma-color-icon-component-pressed)',
90
- 'component-secondary': 'var(--figma-color-icon-component-secondary)',
91
- 'component-tertiary': 'var(--figma-color-icon-component-tertiary)',
92
- danger: 'var(--figma-color-icon-danger)',
93
- 'danger-hover': 'var(--figma-color-icon-danger-hover)',
94
- 'danger-pressed': 'var(--figma-color-icon-danger-pressed)',
95
- 'danger-secondary': 'var(--figma-color-icon-danger-secondary)',
96
- 'danger-secondary-hover': 'var(--figma-color-icon-danger-secondary-hover)',
97
- 'danger-tertiary': 'var(--figma-color-icon-danger-tertiary)',
98
- disabled: 'var(--figma-color-icon-disabled)',
99
- hover: 'var(--figma-color-icon-hover)',
100
- onbrand: 'var(--figma-color-icon-onbrand)',
101
- 'onbrand-secondary': 'var(--figma-color-icon-onbrand-secondary)',
102
- 'onbrand-tertiary': 'var(--figma-color-icon-onbrand-tertiary)',
103
- oncomponent: 'var(--figma-color-icon-oncomponent)',
104
- 'oncomponent-secondary': 'var(--figma-color-icon-oncomponent-secondary)',
105
- 'oncomponent-tertiary': 'var(--figma-color-icon-oncomponent-tertiary)',
106
- ondanger: 'var(--figma-color-icon-ondanger)',
107
- 'ondanger-secondary': 'var(--figma-color-icon-ondanger-secondary)',
108
- 'ondanger-tertiary': 'var(--figma-color-icon-ondanger-tertiary)',
109
- ondisabled: 'var(--figma-color-icon-ondisabled)',
110
- oninverse: 'var(--figma-color-icon-oninverse)',
111
- onselected: 'var(--figma-color-icon-onselected)',
112
- 'onselected-secondary': 'var(--figma-color-icon-onselected-secondary)',
113
- 'onselected-strong': 'var(--figma-color-icon-onselected-strong)',
114
- 'onselected-tertiary': 'var(--figma-color-icon-onselected-tertiary)',
115
- onsuccess: 'var(--figma-color-icon-onsuccess)',
116
- 'onsuccess-secondary': 'var(--figma-color-icon-onsuccess-secondary)',
117
- 'onsuccess-tertiary': 'var(--figma-color-icon-onsuccess-tertiary)',
118
- onwarning: 'var(--figma-color-icon-onwarning)',
119
- 'onwarning-secondary': 'var(--figma-color-icon-onwarning-secondary)',
120
- 'onwarning-tertiary': 'var(--figma-color-icon-onwarning-tertiary)',
121
- pressed: 'var(--figma-color-icon-pressed)',
122
- secondary: 'var(--figma-color-icon-secondary)',
123
- 'secondary-hover': 'var(--figma-color-icon-secondary-hover)',
124
- selected: 'var(--figma-color-icon-selected)',
125
- 'selected-secondary': 'var(--figma-color-icon-selected-secondary)',
126
- 'selected-tertiary': 'var(--figma-color-icon-selected-tertiary)',
127
- success: 'var(--figma-color-icon-success)',
128
- 'success-pressed': 'var(--figma-color-icon-success-pressed)',
129
- 'success-secondary': 'var(--figma-color-icon-success-secondary)',
130
- 'success-tertiary': 'var(--figma-color-icon-success-tertiary)',
131
- tertiary: 'var(--figma-color-icon-tertiary)',
132
- 'tertiary-hover': 'var(--figma-color-icon-tertiary-hover)',
133
- warning: 'var(--figma-color-icon-warning)',
134
- 'warning-pressed': 'var(--figma-color-icon-warning-pressed)',
135
- 'warning-secondary': 'var(--figma-color-icon-warning-secondary)',
136
- 'warning-tertiary': 'var(--figma-color-icon-warning-tertiary)',
137
- },
138
- text: {
139
- DEFAULT: 'var(--figma-color-text)',
140
- brand: 'var(--figma-color-text-brand)',
141
- 'brand-secondary': 'var(--figma-color-text-brand-secondary)',
142
- 'brand-tertiary': 'var(--figma-color-text-brand-tertiary)',
143
- component: 'var(--figma-color-text-component)',
144
- 'component-pressed': 'var(--figma-color-text-component-pressed)',
145
- 'component-secondary': 'var(--figma-color-text-component-secondary)',
146
- 'component-tertiary': 'var(--figma-color-text-component-tertiary)',
147
- danger: 'var(--figma-color-text-danger)',
148
- 'danger-secondary': 'var(--figma-color-text-danger-secondary)',
149
- 'danger-tertiary': 'var(--figma-color-text-danger-tertiary)',
150
- disabled: 'var(--figma-color-text-disabled)',
151
- hover: 'var(--figma-color-text-hover)',
152
- onbrand: 'var(--figma-color-text-onbrand)',
153
- 'onbrand-secondary': 'var(--figma-color-text-onbrand-secondary)',
154
- 'onbrand-tertiary': 'var(--figma-color-text-onbrand-tertiary)',
155
- oncomponent: 'var(--figma-color-text-oncomponent)',
156
- 'oncomponent-secondary': 'var(--figma-color-text-oncomponent-secondary)',
157
- 'oncomponent-tertiary': 'var(--figma-color-text-oncomponent-tertiary)',
158
- ondanger: 'var(--figma-color-text-ondanger)',
159
- 'ondanger-secondary': 'var(--figma-color-text-ondanger-secondary)',
160
- 'ondanger-tertiary': 'var(--figma-color-text-ondanger-tertiary)',
161
- ondisabled: 'var(--figma-color-text-ondisabled)',
162
- oninverse: 'var(--figma-color-text-oninverse)',
163
- onselected: 'var(--figma-color-text-onselected)',
164
- 'onselected-secondary': 'var(--figma-color-text-onselected-secondary)',
165
- 'onselected-strong': 'var(--figma-color-text-onselected-strong)',
166
- 'onselected-tertiary': 'var(--figma-color-text-onselected-tertiary)',
167
- onsuccess: 'var(--figma-color-text-onsuccess)',
168
- 'onsuccess-secondary': 'var(--figma-color-text-onsuccess-secondary)',
169
- 'onsuccess-tertiary': 'var(--figma-color-text-onsuccess-tertiary)',
170
- onwarning: 'var(--figma-color-text-onwarning)',
171
- 'onwarning-secondary': 'var(--figma-color-text-onwarning-secondary)',
172
- 'onwarning-tertiary': 'var(--figma-color-text-onwarning-tertiary)',
173
- secondary: 'var(--figma-color-text-secondary)',
174
- 'secondary-hover': 'var(--figma-color-text-secondary-hover)',
175
- selected: 'var(--figma-color-text-selected)',
176
- 'selected-secondary': 'var(--figma-color-text-selected-secondary)',
177
- 'selected-tertiary': 'var(--figma-color-text-selected-tertiary)',
178
- success: 'var(--figma-color-text-success)',
179
- 'success-secondary': 'var(--figma-color-text-success-secondary)',
180
- 'success-tertiary': 'var(--figma-color-text-success-tertiary)',
181
- tertiary: 'var(--figma-color-text-tertiary)',
182
- 'tertiary-hover': 'var(--figma-color-text-tertiary-hover)',
183
- warning: 'var(--figma-color-text-warning)',
184
- 'warning-secondary': 'var(--figma-color-text-warning-secondary)',
185
- 'warning-tertiary': 'var(--figma-color-text-warning-tertiary)',
186
- },
187
- },
188
- fontFamily: {
189
- sans: 'var(--font-family-default)',
190
- monospace: 'var(--font-family-monospace)',
191
- },
192
- fontWeight: {
193
- normal: 'var(--font-weight-default)',
194
- strong: 'var(--font-weight-strong)',
195
- },
196
- fontSize: {
197
- 'size-1': 'var(--font-size-1)',
198
- 'size-2': 'var(--font-size-2)',
199
- 'size-3': 'var(--font-size-3)',
200
- 'size-4': 'var(--font-size-4)',
201
- 'size-5': 'var(--font-size-5)',
202
- 'size-6': 'var(--font-size-6)',
203
- 'size-7': 'var(--font-size-7)',
204
- 'size-8': 'var(--font-size-8)',
205
- 'size-9': 'var(--font-size-9)',
206
- 'size-10': 'var(--font-size-10)',
207
- small: 'var(--font-size-1)',
208
- medium: 'var(--font-size-3)',
209
- large: 'var(--font-size-5)',
210
- },
211
- letterSpacing: {
212
- 1: 'var(--letter-spacing-1)',
213
- 2: 'var(--letter-spacing-2)',
214
- 3: 'var(--letter-spacing-3)',
215
- 4: 'var(--letter-spacing-4)',
216
- 5: 'var(--letter-spacing-5)',
217
- 6: 'var(--letter-spacing-6)',
218
- 7: 'var(--letter-spacing-7)',
219
- 8: 'var(--letter-spacing-8)',
220
- 9: 'var(--letter-spacing-9)',
221
- 10: 'var(--letter-spacing-10)',
222
- small: 'var(--letter-spacing-1)',
223
- medium: 'var(--letter-spacing-3)',
224
- large: 'var(--letter-spacing-5)',
225
- },
226
- lineHeight: {
227
- 1: 'var(--line-height-1)',
228
- 2: 'var(--line-height-2)',
229
- 3: 'var(--line-height-3)',
230
- 4: 'var(--line-height-4)',
231
- 5: 'var(--line-height-5)',
232
- 6: 'var(--line-height-6)',
233
- 7: 'var(--line-height-7)',
234
- 8: 'var(--line-height-8)',
235
- 9: 'var(--line-height-9)',
236
- 10: 'var(--line-height-10)',
237
- small: 'var(--line-height-1)',
238
- medium: 'var(--line-height-3)',
239
- large: 'var(--line-height-5)',
240
- },
241
- borderRadius: {
242
- DEFAULT: 'var(--radius-default)',
243
- none: 0,
244
- 'extra-small': 'var(--radius-extra-small)',
245
- small: 'var(--radius-small)',
246
- medium: 'var(--radius-medium)',
247
- large: 'var(--radius-large)',
248
- full: 'var(--radius-full)',
249
- },
250
- boxShadow: {
251
- none: 'none',
252
- 100: 'var(--elevation-100)',
253
- 200: 'var(--elevation-200)',
254
- 300: 'var(--elevation-300)',
255
- 400: 'var(--elevation-400)',
256
- 500: 'var(--elevation-500)',
257
- },
258
- textColor: ({ theme }) => {
259
- return {
260
- current: 'currentColor',
261
- inherit: 'inherit',
262
- transparent: 'transparent',
263
- ...theme('colors').text,
264
- };
265
- },
266
- backgroundColor: ({ theme }) => {
267
- return {
268
- current: 'currentColor',
269
- inherit: 'inherit',
270
- transparent: 'transparent',
271
- ...theme('colors').bg,
272
- };
273
- },
274
- borderColor: ({ theme }) => {
275
- return {
276
- current: 'currentColor',
277
- inherit: 'inherit',
278
- transparent: 'transparent',
279
- DEFAULT: theme('colors').border.DEFAULT,
280
- ...theme('colors').border,
281
- };
282
- },
283
- },
284
- plugins: [
285
- function ({ addUtilities, theme }) {
286
- const iconColors = {
287
- current: 'currentColor',
288
- inherit: 'inherit',
289
- transparent: 'transparent',
290
- ...theme('colors').icon,
291
- };
292
-
293
- const newUtilities = Object.keys(iconColors).reduce((acc, colorName) => {
294
- acc[`.icon-${colorName}`] = {
295
- '--color-icon': iconColors[colorName],
296
- };
297
- return acc;
298
- }, {});
299
-
300
- addUtilities(newUtilities, ['responsive', 'hover']);
301
- },
302
- ],
303
- };