Skip to content

Commit c7f5f99

Browse files
angelicahoyssangelicahoyss
committed
fix(ui-library): generates select tokens and implements tokens instead of negative margin
1 parent 549aed7 commit c7f5f99

16 files changed

+81
-224
lines changed

‎packages/figma-design-tokens/config/style-dictionary.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const semanticTypes = [
4343
'InputField',
4444
'LabelAppendix',
4545
'InputIcon',
46+
'Select',
4647
];
4748

4849
const componentTypes = ['TextButton', 'IconButton', 'IconDropdown', 'Icon', 'Loader', 'TextArea', 'Radio', 'Checkbox'];

‎packages/ui-library/src/components/select/index.css.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const styleCustom = css`
44
.blr-select {
55
display: block;
66
width: 100%;
7+
position: relative;
78
}
89
910
.blr-select-option {

‎packages/ui-library/src/components/text-input/index.css.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const styleCustom = css`
44
.blr-input {
55
display: block;
66
width: 100%;
7+
position: relative;
78
}
89
910
.blr-text-input:disabled {

‎packages/ui-library/src/foundation/_tokens-generated/__component-tokens.generated.js

Lines changed: 48 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:57 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:16 GMT
44
*/
55

66
export const componentTokens = {
@@ -193,210 +193,19 @@ export const componentTokens = {
193193
ControlBorderRadius: '9999px',
194194
},
195195
Checkbox: {
196-
SM: {
197-
ItemSpacing: '8px',
198-
ControlMargin: '0.125rem 0px 0rem 0px',
199-
LabelMargin: '0rem 0px 0rem 0px',
200-
Control: {
201-
Background: {
202-
Sizing: {
203-
Unselected: {
204-
Rest: '16px',
205-
Hover: '16px',
206-
Pressed: '16px',
207-
Focus: '16px',
208-
Disabled: '16px',
209-
ReadOnly: '16px',
210-
Error: '16px',
211-
},
212-
Selected: {
213-
Rest: '16px',
214-
Hover: '16px',
215-
Pressed: '16px',
216-
Focus: '16px',
217-
Disabled: '16px',
218-
ReadOnly: '16px',
219-
},
220-
Indeterminate: {
221-
Rest: '16px',
222-
Hover: '16px',
223-
Pressed: '16px',
224-
Focus: '16px',
225-
Disabled: '16px',
226-
ReadOnly: '16px',
227-
},
228-
},
229-
},
230-
Foreground: {
231-
Sizing: {
232-
Unselected: {
233-
Rest: '16px',
234-
Hover: '16px',
235-
Pressed: '16px',
236-
Focus: '16px',
237-
Disabled: '16px',
238-
ReadOnly: '16px',
239-
Error: '16px',
240-
},
241-
Selected: {
242-
Rest: '16px',
243-
Hover: '16px',
244-
Pressed: '16px',
245-
Focus: '16px',
246-
Disabled: '16px',
247-
ReadOnly: '16px',
248-
Error: '16px',
249-
},
250-
Indeterminate: {
251-
Rest: '16px',
252-
Hover: '16px',
253-
Pressed: '16px',
254-
Focus: '16px',
255-
Disabled: '16px',
256-
ReadOnly: '16px',
257-
Error: '16px',
258-
},
259-
},
260-
},
261-
},
262-
},
263-
MD: {
264-
ItemSpacing: '8px',
265-
ControlMargin: '0.25rem 0px 0rem 0px',
266-
LabelMargin: '0rem 0px 0rem 0px',
267-
Control: {
268-
Background: {
269-
Sizing: {
270-
Unselected: {
271-
Rest: '16px',
272-
Hover: '16px',
273-
Pressed: '16px',
274-
Focus: '16px',
275-
Disabled: '16px',
276-
ReadOnly: '16px',
277-
Error: '16px',
278-
},
279-
Selected: {
280-
Rest: '16px',
281-
Hover: '16px',
282-
Pressed: '16px',
283-
Focus: '16px',
284-
Disabled: '16px',
285-
ReadOnly: '16px',
286-
},
287-
Indeterminate: {
288-
Rest: '16px',
289-
Hover: '16px',
290-
Pressed: '16px',
291-
Focus: '16px',
292-
Disabled: '16px',
293-
ReadOnly: '16px',
294-
},
295-
},
296-
},
297-
Foreground: {
298-
Sizing: {
299-
Unselected: {
300-
Rest: '16px',
301-
Hover: '16px',
302-
Pressed: '16px',
303-
Focus: '16px',
304-
Disabled: '16px',
305-
ReadOnly: '16px',
306-
Error: '16px',
307-
},
308-
Selected: {
309-
Rest: '16px',
310-
Hover: '16px',
311-
Pressed: '16px',
312-
Focus: '16px',
313-
Disabled: '16px',
314-
ReadOnly: '16px',
315-
Error: '16px',
316-
},
317-
Indeterminate: {
318-
Rest: '16px',
319-
Hover: '16px',
320-
Pressed: '16px',
321-
Focus: '16px',
322-
Disabled: '16px',
323-
ReadOnly: '16px',
324-
Error: '16px',
325-
},
326-
},
327-
},
328-
},
329-
},
330-
LG: {
331-
ItemSpacing: '8px',
332-
ControlMargin: '0.375rem 0px 0rem 0px',
333-
LabelMargin: '0rem 0px 0rem 0px',
334-
Control: {
335-
Background: {
336-
Sizing: {
337-
Unselected: {
338-
Rest: '20px',
339-
Hover: '20px',
340-
Pressed: '20px',
341-
Focus: '20px',
342-
Disabled: '20px',
343-
ReadOnly: '20px',
344-
Error: '20px',
345-
},
346-
Selected: {
347-
Rest: '20px',
348-
Hover: '20px',
349-
Pressed: '20px',
350-
Focus: '20px',
351-
Disabled: '20px',
352-
ReadOnly: '20px',
353-
},
354-
Indeterminate: {
355-
Rest: '20px',
356-
Hover: '20px',
357-
Pressed: '20px',
358-
Focus: '20px',
359-
Disabled: '20px',
360-
ReadOnly: '20px',
361-
},
362-
},
363-
},
364-
Foreground: {
365-
Sizing: {
366-
Unselected: {
367-
Rest: '20px',
368-
Hover: '20px',
369-
Pressed: '20px',
370-
Focus: '20px',
371-
Disabled: '20px',
372-
ReadOnly: '20px',
373-
Error: '20px',
374-
},
375-
Selected: {
376-
Rest: '20px',
377-
Hover: '20px',
378-
Pressed: '20px',
379-
Focus: '20px',
380-
Disabled: '20px',
381-
ReadOnly: '20px',
382-
Error: '20px',
383-
},
384-
Indeterminate: {
385-
Rest: '20px',
386-
Hover: '20px',
387-
Pressed: '20px',
388-
Focus: '20px',
389-
Disabled: '20px',
390-
ReadOnly: '20px',
391-
Error: '20px',
392-
},
393-
},
394-
},
395-
},
396-
},
196+
SM: { ItemSpacing: '4px', ControlMargin: '0px 0px 0px 0px', LabelMargin: '2px 0px 0px 0px' },
197+
MD: { ItemSpacing: '4px', ControlMargin: '0px 0px 0px 0px', LabelMargin: '0px 0px 0px 0px' },
198+
LG: { ItemSpacing: '4px', ControlMargin: '3px 0px 0px 0px', LabelMargin: '0px 0px 0px 0px' },
397199
Control: {
398200
Background: {
399201
Unselected: {
202+
Rest: '16px',
203+
Hover: '16px',
204+
Pressed: '16px',
205+
Focus: '16px',
206+
Disabled: '16px',
207+
ReadOnly: '16px',
208+
Error: '16px',
400209
Fill: {
401210
Rest: 'hsla(0, 0%, 100%, 1)',
402211
Hover: 'hsla(0, 0%, 100%, 1)',
@@ -411,12 +220,18 @@ export const componentTokens = {
411220
Hover: 'hsla(220, 85%, 40%, 1)',
412221
Pressed: 'hsla(220, 85%, 30%, 1)',
413222
Focus: 'hsla(220, 85%, 50%, 1)',
414-
Disabled: 'hsla(220, 10%, 80%,1) ',
223+
Disabled: 'hsla(220, 10%, 90%,1) ',
415224
ReadOnly: 'hsla(220, 10%, 90%,1) ',
416225
Error: 'hsla(350, 80%, 50%,1) ',
417226
},
418227
},
419228
Selected: {
229+
Rest: '16px',
230+
Hover: '16px',
231+
Pressed: '16px',
232+
Focus: '16px',
233+
Disabled: '16px',
234+
ReadOnly: '16px',
420235
Fill: {
421236
Rest: 'hsla(220, 85%, 50%, 1)',
422237
Hover: 'hsla(220, 85%, 40%, 1)',
@@ -434,9 +249,24 @@ export const componentTokens = {
434249
ReadOnly: '#00000000',
435250
},
436251
},
252+
Indeterminate: {
253+
Rest: '16px',
254+
Hover: '16px',
255+
Pressed: '16px',
256+
Focus: '16px',
257+
Disabled: '16px',
258+
ReadOnly: '16px',
259+
},
437260
},
438261
Foreground: {
439262
Unselected: {
263+
Rest: '16px',
264+
Hover: '16px',
265+
Pressed: '16px',
266+
Focus: '16px',
267+
Disabled: '16px',
268+
ReadOnly: '16px',
269+
Error: '16px',
440270
Fill: {
441271
Rest: '#00000000',
442272
Hover: '#00000000',
@@ -457,6 +287,12 @@ export const componentTokens = {
457287
},
458288
},
459289
Selected: {
290+
Rest: '16px',
291+
Hover: '16px',
292+
Pressed: '16px',
293+
Focus: '16px',
294+
Disabled: '16px',
295+
ReadOnly: '16px',
460296
Fill: {
461297
Rest: 'hsla(0, 0%, 100%, 1)',
462298
Hover: 'hsla(0, 0%, 100%, 1)',
@@ -474,13 +310,21 @@ export const componentTokens = {
474310
ReadOnly: '#00000000',
475311
},
476312
},
313+
Indeterminate: {
314+
Rest: '16px',
315+
Hover: '16px',
316+
Pressed: '16px',
317+
Focus: '16px',
318+
Disabled: '16px',
319+
ReadOnly: '16px',
320+
},
477321
},
478322
Unselected: {
479323
Rest: { color: 'hsla(220, 85%, 50%, 1)', width: '1px', style: 'solid' },
480324
Hover: { color: 'hsla(220, 85%, 40%, 1)', width: '1px', style: 'solid' },
481325
Pressed: { color: 'hsla(220, 85%, 30%, 1)', width: '1px', style: 'solid' },
482326
Focus: { color: 'hsla(220, 85%, 30%, 1)', width: '1px', style: 'solid' },
483-
Disabled: { color: 'hsla(220, 10%, 80%,1) ', width: '1px', style: 'solid' },
327+
Disabled: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' },
484328
ReadOnly: { color: 'hsla(220, 10%, 90%,1) ', width: '1px', style: 'solid' },
485329
Error: { color: 'hsla(350, 80%, 50%,1) ', width: '1px', style: 'solid' },
486330
},

‎packages/ui-library/src/foundation/_tokens-generated/__semantic-tokens.generated.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:57 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:16 GMT
44
*/
55

66
export const semanticTokens = {
@@ -268,6 +268,11 @@ export const semanticTokens = {
268268
},
269269
},
270270
Forms: {
271+
Select: {
272+
SM: { InputFieldPadding: '0.5rem 32px 0.5rem 12px', IconPaddingRight: '12px' },
273+
MD: { InputFieldPadding: '0.5rem 32px 0.5rem 12px', IconPaddingRight: '12px' },
274+
LG: { InputFieldPadding: '0.75rem 48px 0.75rem 16px', IconPaddingRight: '16px' },
275+
},
271276
SM: {
272277
Label: { fontFamily: '"Source Sans Pro" ', fontWeight: 600, lineHeight: '150%', fontSize: '0.75rem' },
273278
LabelAppendix: { fontFamily: '"Source Sans Pro" ', fontWeight: 400, lineHeight: '150%', fontSize: '0.75rem' },

‎packages/ui-library/src/foundation/_tokens-generated/_border-radius.generated.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:56 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:15 GMT
44
*/
55

66
:root {

‎packages/ui-library/src/foundation/_tokens-generated/_border-width.generated.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:56 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:15 GMT
44
*/
55

66
:root {

‎packages/ui-library/src/foundation/_tokens-generated/_color.generated.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:56 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:15 GMT
44
*/
55

66
:root {

‎packages/ui-library/src/foundation/_tokens-generated/_font-families.generated.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:56 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:15 GMT
44
*/
55

66
:root {

‎packages/ui-library/src/foundation/_tokens-generated/_font-sizes.generated.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 16 Jun 2023 11:23:56 GMT
3+
* Generated on Fri, 16 Jun 2023 09:57:15 GMT
44
*/
55

66
:root {

0 commit comments

Comments
 (0)