Skip to content

Commit 2504a1f

Browse files
Jairo Suárez GonzálezJairo Suárez González
Jairo Suárez González
authored and
Jairo Suárez González
committed
Changing token names and removing themable column
1 parent 6a7028d commit 2504a1f

File tree

25 files changed

+221
-196
lines changed

25 files changed

+221
-196
lines changed

‎components/accordion/README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ States: __normal__, __hover__, __disabled__, __open__.
2424

2525
## Theming
2626

27-
| Tokens | Themable | Default value |
28-
| ------------- |:-------------:| -------------:|
29-
| backgroundColor | `false` | `#FFFFFF` |
30-
| textColor | `false` | `#666666` |
31-
| hoverTextColor | `false` | `#000000` |
32-
| arrowColor | `true` | `#666666` |
33-
| hoverBackgroundColor | `false` | `0.34 opacity` |
34-
| disabled | `false` | `0.34 opacity` |
27+
| Tokens | Default value |
28+
| ------------- |:-------------:|
29+
| backgroundColor | `#FFFFFF` |
30+
| arrowColor | `#666666` |
31+
| hoverTextColor | `#000000` |
32+
| arrowColor | `#666666` |
33+
| hoverBackgroundColor | `0.34 opacity` |
34+
| disabled | `0.34 opacity` |
3535

3636
The hover background color for the trigger of the accordion is calculated from the color defined for the arrow icon.
3737

‎components/alert/README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,14 @@ The both actions that alert will get are the one that for some reason appears in
5555

5656
## Theming
5757

58-
| Tokens | Themable | Default value |
59-
| ------------- |:-------------:| -------------:|
60-
| overlay | `false` | `black 0.80 opacity` |
58+
| Tokens | Default value |
59+
| ------------- | -------------:|
60+
| overlayColor | `black 0.80 opacity` |
61+
| infoColor | `#CEE0F5` |
62+
| confirmColor | `#DBF1C4` |
63+
| warningColor | `#FCF2BD` |
64+
| errorColor | `#F9CFCF` |
65+
| focusColor | `#005FCC` |
6166

6267
The alert component should use generic colors that are recognizable by the users independent of the application and the context and that is the reason why we don't allow to configure the theme for the alerts.
6368

‎components/autocomplete/README.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,15 @@ States: __searching__, __no results__ and __action error__.
3434

3535
## Theming and tokens
3636

37-
| Tokens | Themable | Default value |
38-
| ------------- |:-------------:| -------------:|
39-
| selectedOptionBackgroundColor | `true` | `#D9D9D9` |
40-
| hoverOptionBakcgroundColor | `false` | `0.34 opacity` |
41-
| hoverOptionColor | `false` | `#000000` |
42-
| disabled | `false` | `0.34 opacity` |
43-
| optionText | `false` | `#000000` |
44-
| error | `false` | `#D0011B` |
37+
| Tokens | Default value |
38+
| ------------- | -------------:|
39+
| fontColor | `#000000` |
40+
| disabledFontColor | `#b1b1b1` |
41+
| selectedOptionBackgroundColor | `#f2f2f2` |
42+
| hoverOptionColor | `#000000` |
43+
| scrollBarThumbColor | `#666666` |
44+
| scrollBarTrackColor | `#F8F8F8` |
45+
| error | `#D0011B` |
4546

4647
The other attributes of the autocomplete component are inherited from the input component because it is used internally in the date implementation, so a change in any token of the text field component will affect this component too.
4748

‎components/button/README.md‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,34 +36,43 @@ These are the tokens that are defined for the component:
3636

3737
#### Primary button
3838

39-
| Tokens | Themable | Default value |
40-
| ------------- |:-------------:| -------------:|
41-
| backgroundColor | `true` | `#6F2C91`|
42-
| textColor | `true` | `#FFFFFF` |
43-
| disabledOpacity | `false` | `0.34 opacity` |
44-
| hoverBackgroundColor | `true` | `#000000` |
45-
| hoverTextColor | `true` | `#FFFFFF` |
39+
| Tokens | Default value |
40+
| ------------- | -------------:|
41+
| primaryBackgroundColor | `#6F2C91`|
42+
| primaryFontColor | `#FFFFFF` |
43+
| primaryHoverBackgroundColor | `#000000` |
44+
| primaryHoverFontColor | `#FFFFFF` |
45+
|primaryActiveBackgroundColor | `#676767` |
46+
| disabledPrimaryBackgroundColor | `#d0bddb` |
47+
| disabledPrimaryFontColor | `#ffffff` |
48+
| focusColor | `#005FCC` |
4649

4750
#### Secondary button
4851

49-
| Tokens | Themable | Default value |
50-
| ------------- |:-------------:| -------------:|
51-
| backgroundColor | `false` | `transparent` |
52-
| outlinedColor | `true` | `#6F2C91` |
53-
| textColor | `true` | `#000000` |
54-
| disabledOpacity | `false` | `0.34 opacity` |
55-
| hoverOutlinedColor | `true` | `#000000` |
56-
| hoverTextColor | `true` | `#000000` |
52+
| Tokens | Default value |
53+
| ------------- | -------------:|
54+
| secondaryOutlinedColor | `#6F2C91` |
55+
| secondaryBackgroundColor | `transparent` |
56+
| secondaryFontColor | `#000000` |
57+
| hoverOutlinedColor | `#000000` |
58+
| secondaryHoverFontColor | `#000000` |
59+
| secondaryHoverBackgroundColor | `#eeeeee` |
60+
| secondaryActiveBackgroundColor | `#dbdbdb` |
61+
| disabledSecondaryOutlinedColor | `#d0bddb` |
62+
| disabledSecondaryFontColor | `#b1b1b1` |
63+
| focusColor | `#005FCC` |
5764

5865
#### Text button
5966

60-
| Tokens | Themable | Default value |
61-
| ------------- |:-------------:| -------------:|
62-
| backgroundColor | `false` | `transparent` |
63-
| textColor | `true` | `#6F2C91` |
64-
| disabledOpacity | `false` | `0.34 opacity` |
65-
| hoverBackgroundColor | `true` | `#000000` |
66-
| hoverTextColor | `true` | `#000000` |
67+
| Tokens | Default value |
68+
| ------------- | -------------:|
69+
| textBackgroundColor | `transparent` |
70+
| textFontColor | `#6F2C91` |
71+
| textHoverBackgroundColor | `#000000` |
72+
| textHoverFontColor | `#FFFFFF` |
73+
| textActiveBackgroundColor | `#676767` |
74+
| disabledTextFontColor | `#d0bddb` |
75+
| focusColor | `#005FCC` |
6776

6877
## Design Specifications
6978

‎components/card/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ The only state that is controlled in the card component is the hover. As it is n
2424

2525
## Theming and tokens
2626

27-
| Tokens | Themable | Default value |
28-
| ------------- |:-------------:| -------------:|
29-
| backgroundColor | `false` | `#FFFFFF` |
27+
| Tokens | Default value |
28+
| ------------- | -------------:|
29+
| backgroundColor | `#FFFFFF` |
3030

3131
As the Card component is using the Box to be build, the values for the background are inherited from the definition in the component. By default, the background color is white and not themable, so it will be the same for both components.
3232

‎components/checkbox/README.md‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,17 @@ Five different states are defined in the life cycle of the component: __enabled_
2525

2626
## Theming and tokens
2727

28-
| Tokens | Themable | Default value |
29-
| ------------- |:-------------:| -------------:|
30-
| *backgroundColor| `true` | `#0067B3`|
31-
| *borderColor | `true` | `#0067B3` |
32-
| checkColor | `true` | `#FFFFFF` |
33-
| disabled | `false`| `0.34 opacity` |
34-
| text | `false`| `#000000/inherit` |
28+
| Tokens | Default value |
29+
| ------------- | -------------:|
30+
| backgroundColorChecked| `#0067b3`|
31+
| borderColor | `#0067b3` |
32+
| checkColor | `#FFFFFF` |
33+
| fontColor | `black/inherit` |
34+
| disabledBackgroundColorChecked | `#b1cee6` |
35+
| disabledBorderColor | `#b1cee6` |
36+
| disabledCheckColor | `#FFFFFF` |
37+
| disabledFontColor | `#b1b1b1` |
38+
| focusColor | `#005FCC` |
3539

3640
*There is a relation between the _backgroundColor_ of the component and the _borderColor_ in the case that the checkbox is unselected. The color will be the same for both scenarios.
3741

‎components/chip/README.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ The only state that the design system specifies for the chip component is the ho
1616

1717
## Theming and tokens
1818

19-
| Tokens | Themable | Default value |
20-
| ------------- |:-------------:| -------------:|
21-
| backgroundColor | `true` | `#EEEEEE`|
22-
| outlinedColor | `true` | `-`|
23-
| textColor | `true` | `#000000` |
24-
| disabledOpacity | `false` | `0.34 opacity` |
19+
| Tokens | Default value |
20+
| ------------- | -------------:|
21+
| backgroundColor | `#EEEEEE`|
22+
| outlinedColor | `-`|
23+
| fontColor | `#000000` |
24+
| disabledBackgroundColor | `#f9f9f9` |
25+
| disabledFontColor | `#b1b1b1` |
2526

2627
## Design Specifications
2728

‎components/date/README.md‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,18 @@ Different feedback and outcomes happen when the calendar pop-up is used. To see
4747

4848
## Theming and tokens
4949

50-
| Tokens | Themable | Default value |
51-
| ------------- |:-------------:| -------------:|
52-
| pickerBackgroundColor | `false` | `#FFFFFF` |
53-
| pickerTextColor | `false` | `#000000` |
54-
| pickerActualDate | `false` | `#EEEEEE` |
55-
| pickerSelectedDateBackgroundColor | `true` | `#000000` |
56-
| pickerSelectedDateColor | `true` | `#6F2C91` |
57-
| pickerHoverDateBackgroundColor | `false` | `0.34 opacity` |
58-
| pickerHoverDateTextColor | `false` | `#000000` |
50+
| Tokens | Default value |
51+
| ------------- | -------------:|
52+
| pickerSelectedDateBackgroundColor | `#6f2c91` |
53+
| pickerSelectedDateColor | `#ffffff` |
54+
| pickerBackgroundColor | `#ffffff` |
55+
| pickerFontColor | `#000000` |
56+
| pickerActualDate | `#d9d9d9` |
57+
| pickerHoverDateBackgroundColor | `#f5ebf9` |
58+
| pickerHoverDateFontColor | `#000000` |
59+
| scrollBarThumbColor | `#666666` |
60+
| scrollBarTrackColor | `#f8f8f8` |
61+
| focusColor | `#005FCC` |
5962

6063
The other attributes of the date component are inherited from the input component because it is used internally in the date implementation, so a change in any token of the text field component will affect this component too.
6164

‎components/dialog/README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,12 @@ Clicking on the X icon or outside the box will trigger an action to close the mo
5454

5555
## Theming
5656

57-
| Tokens | Themable | Default value |
58-
| ------------- |:-------------:| -------------:|
59-
| overlay | `false` | `#000000 0.80 opacity` |
60-
| backgroundColor | `false` | `#FFFFFF` |
57+
| Tokens | Default value |
58+
| ------------- | -------------:|
59+
| overlayColor | `#000000 0.80 opacity` |
60+
| backgroundColor | `#FFFFFF` |
61+
| scrollBarThumbColor | `#666666` |
62+
| scrollBarTrackColor | `#D9D9D9` |
6163

6264

6365
## Design Specifications

‎components/dropdown/README.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,17 @@ Six different states for the dropdown elememts: __default__, __dropdown displaye
3434

3535
### Theming
3636

37-
| Tokens | Themable | Default value |
38-
| ------------- |:-------------:| -------------:|
39-
| backgroundColor | `true` | `#FFFFFF` |
40-
| dropdownBackgroundColor | `false` | `#FFFFFF` |
41-
| textColor | `true` | `#000000` |
42-
| dropdownTextColor | `false` | `#000000` |
43-
| hoverBackgroundOption | `false` | `0.34 opacity` |
44-
| hoverBackgroundColor | `true` | `0.80 opacity` |
45-
| disabled | `true` | `0.34 opacity` |
37+
| Tokens | Default value |
38+
| ------------- | -------------:|
39+
| backgroundColor | `#FFFFFF` |
40+
| fontColor | `#000000` |
41+
| dropdownBackgroundColor | `#FFFFFF` |
42+
| dropdownFontColor | `#000000` |
43+
| hoverBackgroundOption | `#ffffff` |
44+
| hoverBackgroundColor | `#ffffff` |
45+
| scrollBarThumbColor | `#666666` |
46+
| scrollBarTrackColor | `#D9D9D9` |
47+
| focusColor | `#005FCC` |
4648

4749
The dropdown itself cannot be configured, the component only allows the configuration of the trigger through the background color and the color of the text.
4850

0 commit comments

Comments
 (0)