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

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.
@@ -4,186 +4,193 @@ export default {
4
4
  current: 'currentColor',
5
5
  inherit: 'inherit',
6
6
  transparent: 'transparent',
7
-
8
- bg: 'var(--figma-color-bg)',
9
- 'bg-brand': 'var(--figma-color-bg-brand)',
10
- 'bg-brand-hover': 'var(--figma-color-bg-brand-hover)',
11
- 'bg-brand-pressed': 'var(--figma-color-bg-brand-pressed)',
12
- 'bg-brand-secondary': 'var(--figma-color-bg-brand-secondary)',
13
- 'bg-brand-tertiary': 'var(--figma-color-bg-brand-tertiary)',
14
- 'bg-component': 'var(--figma-color-bg-component)',
15
- 'bg-component-hover': 'var(--figma-color-bg-component-hover)',
16
- 'bg-component-pressed': 'var(--figma-color-bg-component-pressed)',
17
- 'bg-component-secondary': 'var(--figma-color-bg-component-secondary)',
18
- 'bg-component-tertiary': 'var(--figma-color-bg-component-tertiary)',
19
- 'bg-danger': 'var(--figma-color-bg-danger)',
20
- 'bg-danger-hover': 'var(--figma-color-bg-danger-hover)',
21
- 'bg-danger-pressed': 'var(--figma-color-bg-danger-pressed)',
22
- 'bg-danger-secondary': 'var(--figma-color-bg-danger-secondary)',
23
- 'bg-danger-tertiary': 'var(--figma-color-bg-danger-tertiary)',
24
- 'bg-disabled': 'var(--figma-color-bg-disabled)',
25
- 'bg-disabled-secondary': 'var(--figma-color-bg-disabled-secondary)',
26
- 'bg-hover': 'var(--figma-color-bg-hover)',
27
- 'bg-inverse': 'var(--figma-color-bg-inverse)',
28
- 'bg-onselected': 'var(--figma-color-bg-onselected)',
29
- 'bg-onselected-hover': 'var(--figma-color-bg-onselected-hover)',
30
- 'bg-onselected-pressed': 'var(--figma-color-bg-onselected-pressed)',
31
- 'bg-pressed': 'var(--figma-color-bg-pressed)',
32
- 'bg-secondary': 'var(--figma-color-bg-secondary)',
33
- 'bg-selected': 'var(--figma-color-bg-selected)',
34
- 'bg-selected-hover': 'var(--figma-color-bg-selected-hover)',
35
- 'bg-selected-pressed': 'var(--figma-color-bg-selected-pressed)',
36
- 'bg-selected-secondary': 'var(--figma-color-bg-selected-secondary)',
37
- 'bg-selected-strong': 'var(--figma-color-bg-selected-strong)',
38
- 'bg-selected-tertiary': 'var(--figma-color-bg-selected-tertiary)',
39
- 'bg-success': 'var(--figma-color-bg-success)',
40
- 'bg-success-hover': 'var(--figma-color-bg-success-hover)',
41
- 'bg-success-pressed': 'var(--figma-color-bg-success-pressed)',
42
- 'bg-success-secondary': 'var(--figma-color-bg-success-secondary)',
43
- 'bg-success-tertiary': 'var(--figma-color-bg-success-tertiary)',
44
- 'bg-tertiary': 'var(--figma-color-bg-tertiary)',
45
- 'bg-warning': 'var(--figma-color-bg-warning)',
46
- 'bg-warning-hover': 'var(--figma-color-bg-warning-hover)',
47
- 'bg-warning-pressed': 'var(--figma-color-bg-warning-pressed)',
48
- 'bg-warning-secondary': 'var(--figma-color-bg-warning-secondary)',
49
- 'bg-warning-tertiary': 'var(--figma-color-bg-warning-tertiary)',
50
- border: 'var(--figma-color-border)',
51
- 'border-brand': 'var(--figma-color-border-brand)',
52
- 'border-brand-strong': 'var(--figma-color-border-brand-strong)',
53
- 'border-component': 'var(--figma-color-border-component)',
54
- 'border-component-hover': 'var(--figma-color-border-component-hover)',
55
- 'border-component-strong': 'var(--figma-color-border-component-strong)',
56
- 'border-danger': 'var(--figma-color-border-danger)',
57
- 'border-danger-strong': 'var(--figma-color-border-danger-strong)',
58
- 'border-disabled': 'var(--figma-color-border-disabled)',
59
- 'border-disabled-strong': 'var(--figma-color-border-disabled-strong)',
60
- 'border-onbrand': 'var(--figma-color-border-onbrand)',
61
- 'border-onbrand-strong': 'var(--figma-color-border-onbrand-strong)',
62
- 'border-oncomponent': 'var(--figma-color-border-oncomponent)',
63
- 'border-oncomponent-strong': 'var(--figma-color-border-oncomponent-strong)',
64
- 'border-ondanger': 'var(--figma-color-border-ondanger)',
65
- 'border-ondanger-strong': 'var(--figma-color-border-ondanger-strong)',
66
- 'border-onselected': 'var(--figma-color-border-onselected)',
67
- 'border-onselected-strong': 'var(--figma-color-border-onselected-strong)',
68
- 'border-onsuccess': 'var(--figma-color-border-onsuccess)',
69
- 'border-onsuccess-strong': 'var(--figma-color-border-onsuccess-strong)',
70
- 'border-onwarning': 'var(--figma-color-border-onwarning)',
71
- 'border-onwarning-strong': 'var(--figma-color-border-onwarning-strong)',
72
- 'border-selected': 'var(--figma-color-border-selected)',
73
- 'border-selected-strong': 'var(--figma-color-border-selected-strong)',
74
- 'border-strong': 'var(--figma-color-border-strong)',
75
- 'border-success': 'var(--figma-color-border-success)',
76
- 'border-success-strong': 'var(--figma-color-border-success-strong)',
77
- 'border-warning': 'var(--figma-color-border-warning)',
78
- 'border-warning-strong': 'var(--figma-color-border-warning-strong)',
79
- icon: 'var(--figma-color-icon)',
80
- 'icon-brand': 'var(--figma-color-icon-brand)',
81
- 'icon-brand-pressed': 'var(--figma-color-icon-brand-pressed)',
82
- 'icon-brand-secondary': 'var(--figma-color-icon-brand-secondary)',
83
- 'icon-brand-tertiary': 'var(--figma-color-icon-brand-tertiary)',
84
- 'icon-component': 'var(--figma-color-icon-component)',
85
- 'icon-component-pressed': 'var(--figma-color-icon-component-pressed)',
86
- 'icon-component-secondary': 'var(--figma-color-icon-component-secondary)',
87
- 'icon-component-tertiary': 'var(--figma-color-icon-component-tertiary)',
88
- 'icon-danger': 'var(--figma-color-icon-danger)',
89
- 'icon-danger-hover': 'var(--figma-color-icon-danger-hover)',
90
- 'icon-danger-pressed': 'var(--figma-color-icon-danger-pressed)',
91
- 'icon-danger-secondary': 'var(--figma-color-icon-danger-secondary)',
92
- 'icon-danger-secondary-hover': 'var(--figma-color-icon-danger-secondary-hover)',
93
- 'icon-danger-tertiary': 'var(--figma-color-icon-danger-tertiary)',
94
- 'icon-disabled': 'var(--figma-color-icon-disabled)',
95
- 'icon-hover': 'var(--figma-color-icon-hover)',
96
- 'icon-onbrand': 'var(--figma-color-icon-onbrand)',
97
- 'icon-onbrand-secondary': 'var(--figma-color-icon-onbrand-secondary)',
98
- 'icon-onbrand-tertiary': 'var(--figma-color-icon-onbrand-tertiary)',
99
- 'icon-oncomponent': 'var(--figma-color-icon-oncomponent)',
100
- 'icon-oncomponent-secondary': 'var(--figma-color-icon-oncomponent-secondary)',
101
- 'icon-oncomponent-tertiary': 'var(--figma-color-icon-oncomponent-tertiary)',
102
- 'icon-ondanger': 'var(--figma-color-icon-ondanger)',
103
- 'icon-ondanger-secondary': 'var(--figma-color-icon-ondanger-secondary)',
104
- 'icon-ondanger-tertiary': 'var(--figma-color-icon-ondanger-tertiary)',
105
- 'icon-ondisabled': 'var(--figma-color-icon-ondisabled)',
106
- 'icon-oninverse': 'var(--figma-color-icon-oninverse)',
107
- 'icon-onselected': 'var(--figma-color-icon-onselected)',
108
- 'icon-onselected-secondary': 'var(--figma-color-icon-onselected-secondary)',
109
- 'icon-onselected-strong': 'var(--figma-color-icon-onselected-strong)',
110
- 'icon-onselected-tertiary': 'var(--figma-color-icon-onselected-tertiary)',
111
- 'icon-onsuccess': 'var(--figma-color-icon-onsuccess)',
112
- 'icon-onsuccess-secondary': 'var(--figma-color-icon-onsuccess-secondary)',
113
- 'icon-onsuccess-tertiary': 'var(--figma-color-icon-onsuccess-tertiary)',
114
- 'icon-onwarning': 'var(--figma-color-icon-onwarning)',
115
- 'icon-onwarning-secondary': 'var(--figma-color-icon-onwarning-secondary)',
116
- 'icon-onwarning-tertiary': 'var(--figma-color-icon-onwarning-tertiary)',
117
- 'icon-pressed': 'var(--figma-color-icon-pressed)',
118
- 'icon-secondary': 'var(--figma-color-icon-secondary)',
119
- 'icon-secondary-hover': 'var(--figma-color-icon-secondary-hover)',
120
- 'icon-selected': 'var(--figma-color-icon-selected)',
121
- 'icon-selected-secondary': 'var(--figma-color-icon-selected-secondary)',
122
- 'icon-selected-tertiary': 'var(--figma-color-icon-selected-tertiary)',
123
- 'icon-success': 'var(--figma-color-icon-success)',
124
- 'icon-success-pressed': 'var(--figma-color-icon-success-pressed)',
125
- 'icon-success-secondary': 'var(--figma-color-icon-success-secondary)',
126
- 'icon-success-tertiary': 'var(--figma-color-icon-success-tertiary)',
127
- 'icon-tertiary': 'var(--figma-color-icon-tertiary)',
128
- 'icon-tertiary-hover': 'var(--figma-color-icon-tertiary-hover)',
129
- 'icon-warning': 'var(--figma-color-icon-warning)',
130
- 'icon-warning-pressed': 'var(--figma-color-icon-warning-pressed)',
131
- 'icon-warning-secondary': 'var(--figma-color-icon-warning-secondary)',
132
- 'icon-warning-tertiary': 'var(--figma-color-icon-warning-tertiary)',
133
- text: 'var(--figma-color-text)',
134
- 'text-brand': 'var(--figma-color-text-brand)',
135
- 'text-brand-secondary': 'var(--figma-color-text-brand-secondary)',
136
- 'text-brand-tertiary': 'var(--figma-color-text-brand-tertiary)',
137
- 'text-component': 'var(--figma-color-text-component)',
138
- 'text-component-pressed': 'var(--figma-color-text-component-pressed)',
139
- 'text-component-secondary': 'var(--figma-color-text-component-secondary)',
140
- 'text-component-tertiary': 'var(--figma-color-text-component-tertiary)',
141
- 'text-danger': 'var(--figma-color-text-danger)',
142
- 'text-danger-secondary': 'var(--figma-color-text-danger-secondary)',
143
- 'text-danger-tertiary': 'var(--figma-color-text-danger-tertiary)',
144
- 'text-disabled': 'var(--figma-color-text-disabled)',
145
- 'text-hover': 'var(--figma-color-text-hover)',
146
- 'text-onbrand': 'var(--figma-color-text-onbrand)',
147
- 'text-onbrand-secondary': 'var(--figma-color-text-onbrand-secondary)',
148
- 'text-onbrand-tertiary': 'var(--figma-color-text-onbrand-tertiary)',
149
- 'text-oncomponent': 'var(--figma-color-text-oncomponent)',
150
- 'text-oncomponent-secondary': 'var(--figma-color-text-oncomponent-secondary)',
151
- 'text-oncomponent-tertiary': 'var(--figma-color-text-oncomponent-tertiary)',
152
- 'text-ondanger': 'var(--figma-color-text-ondanger)',
153
- 'text-ondanger-secondary': 'var(--figma-color-text-ondanger-secondary)',
154
- 'text-ondanger-tertiary': 'var(--figma-color-text-ondanger-tertiary)',
155
- 'text-ondisabled': 'var(--figma-color-text-ondisabled)',
156
- 'text-oninverse': 'var(--figma-color-text-oninverse)',
157
- 'text-onselected': 'var(--figma-color-text-onselected)',
158
- 'text-onselected-secondary': 'var(--figma-color-text-onselected-secondary)',
159
- 'text-onselected-strong': 'var(--figma-color-text-onselected-strong)',
160
- 'text-onselected-tertiary': 'var(--figma-color-text-onselected-tertiary)',
161
- 'text-onsuccess': 'var(--figma-color-text-onsuccess)',
162
- 'text-onsuccess-secondary': 'var(--figma-color-text-onsuccess-secondary)',
163
- 'text-onsuccess-tertiary': 'var(--figma-color-text-onsuccess-tertiary)',
164
- 'text-onwarning': 'var(--figma-color-text-onwarning)',
165
- 'text-onwarning-secondary': 'var(--figma-color-text-onwarning-secondary)',
166
- 'text-onwarning-tertiary': 'var(--figma-color-text-onwarning-tertiary)',
167
- 'text-secondary': 'var(--figma-color-text-secondary)',
168
- 'text-secondary-hover': 'var(--figma-color-text-secondary-hover)',
169
- 'text-selected': 'var(--figma-color-text-selected)',
170
- 'text-selected-secondary': 'var(--figma-color-text-selected-secondary)',
171
- 'text-selected-tertiary': 'var(--figma-color-text-selected-tertiary)',
172
- 'text-success': 'var(--figma-color-text-success)',
173
- 'text-success-secondary': 'var(--figma-color-text-success-secondary)',
174
- 'text-success-tertiary': 'var(--figma-color-text-success-tertiary)',
175
- 'text-tertiary': 'var(--figma-color-text-tertiary)',
176
- 'text-tertiary-hover': 'var(--figma-color-text-tertiary-hover)',
177
- 'text-warning': 'var(--figma-color-text-warning)',
178
- 'text-warning-secondary': 'var(--figma-color-text-warning-secondary)',
179
- 'text-warning-tertiary': 'var(--figma-color-text-warning-tertiary)',
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
+ },
180
187
  },
181
188
  fontFamily: {
182
- default: 'var(--font-family-default)',
189
+ sans: 'var(--font-family-default)',
183
190
  monospace: 'var(--font-family-monospace)',
184
191
  },
185
192
  fontWeight: {
186
- default: 'var(--font-weight-default)',
193
+ normal: 'var(--font-weight-default)',
187
194
  strong: 'var(--font-weight-strong)',
188
195
  },
189
196
  fontSize: {
@@ -197,7 +204,6 @@ export default {
197
204
  'size-8': 'var(--font-size-8)',
198
205
  'size-9': 'var(--font-size-9)',
199
206
  'size-10': 'var(--font-size-10)',
200
- 'size-default': 'var(--font-size-default)',
201
207
  small: 'var(--font-size-1)',
202
208
  medium: 'var(--font-size-3)',
203
209
  large: 'var(--font-size-5)',
@@ -213,7 +219,6 @@ export default {
213
219
  8: 'var(--letter-spacing-8)',
214
220
  9: 'var(--letter-spacing-9)',
215
221
  10: 'var(--letter-spacing-10)',
216
- default: 'var(--letter-spacing-default)',
217
222
  small: 'var(--letter-spacing-1)',
218
223
  medium: 'var(--letter-spacing-3)',
219
224
  large: 'var(--letter-spacing-5)',
@@ -229,19 +234,18 @@ export default {
229
234
  8: 'var(--line-height-8)',
230
235
  9: 'var(--line-height-9)',
231
236
  10: 'var(--line-height-10)',
232
- default: 'var(--line-height-default)',
233
237
  small: 'var(--line-height-1)',
234
238
  medium: 'var(--line-height-3)',
235
239
  large: 'var(--line-height-5)',
236
240
  },
237
241
  borderRadius: {
238
- none: 'none',
242
+ DEFAULT: 'var(--radius-default)',
243
+ none: 0,
239
244
  'extra-small': 'var(--radius-extra-small)',
240
245
  small: 'var(--radius-small)',
241
246
  medium: 'var(--radius-medium)',
242
247
  large: 'var(--radius-large)',
243
248
  full: 'var(--radius-full)',
244
- default: 'var(--radius-default)',
245
249
  },
246
250
  boxShadow: {
247
251
  none: 'none',
@@ -251,5 +255,49 @@ export default {
251
255
  400: 'var(--elevation-400)',
252
256
  500: 'var(--elevation-500)',
253
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
+ },
254
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
+ ],
255
303
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "figma-kit",
3
3
  "description": "A set of React components for building Figma plugins.",
4
4
  "homepage": "https://figma-kit.dev",
5
- "version": "1.0.0-beta.2",
5
+ "version": "1.0.0-beta.23",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
@@ -13,7 +13,8 @@
13
13
  "figma",
14
14
  "figma react components",
15
15
  "figma design system",
16
- "hook"
16
+ "UI3",
17
+ "component-library"
17
18
  ],
18
19
  "type": "module",
19
20
  "files": [