Skip to content

Commit fe5c364

Browse files
Vineet119libertymayc
Vineet119
authored and
libertymayc
committed
Added Status to Text Component (#3375)
1 parent 39bf281 commit fe5c364

File tree

31 files changed

+338
-355
lines changed

31 files changed

+338
-355
lines changed

‎.changeset/dry-jokes-carry.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
"@salt-ds/theme": minor
3+
---
4+
5+
## Characteristics
6+
7+
Added decorative and informative status foreground tokens. This ensures contrast requirements are met for both text and non-text elements.
8+
9+
```diff
10+
+ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
11+
+ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
12+
+ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
13+
+ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
14+
+
15+
+ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
16+
+ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
17+
+ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
18+
+ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
19+
```
20+
21+
Deprecated status foreground tokens.
22+
23+
| Name | Replacement |
24+
| -------------------------------- | ------------------------------------------- |
25+
| --salt-status-info-foreground | --salt-status-info-foreground-decorative |
26+
| --salt-status-error-foreground | --salt-status-error-foreground-decorative |
27+
| --salt-status-warning-foreground | --salt-status-warning-foreground-decorative |
28+
| --salt-status-success-foreground | --salt-status-success-foreground-decorative |
29+
30+
## Palette
31+
32+
Added decorative and informative info, error, warning and success foreground tokens.
33+
34+
### Light
35+
36+
```diff
37+
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
38+
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
39+
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
40+
+ --salt-palette-error-foreground-informative: var(--salt-color-red-600);
41+
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
42+
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
43+
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
44+
+ --salt-palette-success-foreground-informative: var(--salt-color-green-600);
45+
```
46+
47+
### Dark
48+
49+
```diff
50+
+ --salt-palette-info-foreground-decorative: var(--salt-color-blue-100);
51+
+ --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
52+
+ --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
53+
+ --salt-palette-error-foreground-informative: var(--salt-color-red-200);
54+
+ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
55+
+ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
56+
+ --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
57+
+ --salt-palette-success-foreground-informative: var(--salt-color-green-200);
58+
```
59+
60+
Updated info and error border tokens.
61+
62+
```diff
63+
- --salt-palette-info-border: var(--salt-color-blue-500);
64+
+ --salt-palette-info-border: var(--salt-color-blue-400);
65+
- --salt-palette-error-border: var(--salt-color-red-500);
66+
+ --salt-palette-error-border: var(--salt-color-red-400);
67+
```
68+
69+
Deprecated status foreground tokens.
70+
71+
| Name | Replacement |
72+
| --------------------------------- | -------------------------------------------- |
73+
| --salt-palette-info-foreground | --salt-palette-info-foreground-decorative |
74+
| --salt-palette-error-foreground | --salt-palette-error-foreground-decorative |
75+
| --salt-palette-warning-foreground | --salt-palette-warning-foreground-decorative |
76+
| --salt-palette-success-foreground | --salt-palette-success-foreground-decorative |
77+
78+
## Foundations
79+
80+
Added `--salt-color-orange-850`:
81+
82+
```diff
83+
+ --salt-color-orange-850: rgb(194, 52, 7);
84+
```

‎.changeset/early-feet-complain.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
"@salt-ds/core": minor
3+
---
4+
5+
Added status color support to Text.
6+
7+
```tsx
8+
<Text color="info">This is error color of Text</Text>
9+
<Text color="error">This is error color of Text</Text>
10+
<Text color="warning">This is warning color of Text</Text>
11+
<Text color="success">This is success color of Text</Text>
12+
```
13+
14+
- Checkbox will now have the correct border color on focus when it is in an error or warning state.
15+
- Checkbox now uses `--salt-status-error-foreground-decorative` and `--salt-status-warning-foreground-decorative` instead of `--salt-status-error-foreground` and `--salt-status-warning-foreground`.
16+
- RadioButton will now have the correct border color on focus when it is in an error or warning state.
17+
- RadioButton now uses `--salt-status-error-foreground-decorative` and `--salt-status-warning-foreground-decorative` instead of `--salt-status-error-foreground` and `--salt-status-warning-foreground`.
18+
- StatusAdornment now uses `--salt-status-error-foreground-decorative`, `--salt-status-warning-foreground-decorative` and `--salt-status-success-foreground-decorative` instead of `--salt-status-error-foreground`, `--salt-status-warning-foreground` and `--salt-status-success-foreground`.
19+
- StatusIndicator now uses `--salt-status-info-foreground-decorative`, `--salt-status-error-foreground-decorative`, `--salt-status-warning-foreground-decorative` and `--salt-status-success-foreground-decorative` instead of `--salt-status-info-foreground`, `--salt-status-error-foreground`, `--salt-status-warning-foreground`, `--salt-status-success-foreground`.

‎.changeset/nice-singers-matter.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@salt-ds/lab": minor
3+
---
4+
5+
TrackerStep now uses `--salt-status-success-foreground-decorative` and `--salt-status-info-foreground-decorative` instead of `--salt-status-success-foreground` and `--salt-status-info-foreground`.

‎packages/core/src/checkbox/Checkbox.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,15 @@
4747
}
4848

4949
.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
50-
outline-color: var(--salt-status-error-foreground);
51-
border-color: var(--salt-status-error-foreground);
52-
color: var(--salt-status-error-foreground);
50+
outline-color: var(--salt-status-error-foreground-decorative);
51+
border-color: var(--salt-status-error-borderColor);
52+
color: var(--salt-status-error-foreground-decorative);
5353
}
5454

5555
.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
56-
outline-color: var(--salt-status-warning-foreground);
57-
border-color: var(--salt-status-warning-foreground);
58-
color: var(--salt-status-warning-foreground);
56+
outline-color: var(--salt-status-warning-foreground-decorative);
57+
border-color: var(--salt-status-warning-borderColor);
58+
color: var(--salt-status-warning-foreground-decorative);
5959
}
6060

6161
/* Styles applied to input element */

‎packages/core/src/checkbox/CheckboxIcon.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,16 @@
5454

5555
.saltCheckboxIcon-error,
5656
.saltCheckbox:hover .saltCheckboxIcon-error {
57-
color: var(--salt-status-error-foreground);
57+
color: var(--salt-status-error-foreground-decorative);
5858
border-color: var(--salt-status-error-borderColor);
59-
outline-color: var(--salt-status-error-foreground);
59+
outline-color: var(--salt-status-error-foreground-decorative);
6060
}
6161

6262
.saltCheckboxIcon-warning,
6363
.saltCheckbox:hover .saltCheckboxIcon-warning {
64-
color: var(--salt-status-warning-foreground);
64+
color: var(--salt-status-warning-foreground-decorative);
6565
border-color: var(--salt-status-warning-borderColor);
66-
outline-color: var(--salt-status-warning-foreground);
66+
outline-color: var(--salt-status-warning-foreground-decorative);
6767
}
6868

6969
.saltCheckboxIcon-readOnly,

‎packages/core/src/radio-button/RadioButton.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@
6262
}
6363

6464
.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
65-
outline-color: var(--salt-status-error-foreground);
66-
border-color: var(--salt-status-error-foreground);
67-
color: var(--salt-status-error-foreground);
65+
outline-color: var(--salt-status-error-foreground-decorative);
66+
border-color: var(--salt-status-error-borderColor);
67+
color: var(--salt-status-error-foreground-decorative);
6868
}
6969

7070
.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
71-
outline-color: var(--salt-status-warning-foreground);
72-
border-color: var(--salt-status-warning-foreground);
73-
color: var(--salt-status-warning-foreground);
71+
outline-color: var(--salt-status-warning-foreground-decorative);
72+
border-color: var(--salt-status-warning-borderColor);
73+
color: var(--salt-status-warning-foreground-decorative);
7474
}

‎packages/core/src/radio-button/RadioButtonIcon.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@
4040

4141
.saltRadioButtonIcon-error,
4242
.saltRadioButton:hover .saltRadioButtonIcon-error {
43-
color: var(--salt-status-error-foreground);
43+
color: var(--salt-status-error-foreground-decorative);
4444
border-color: var(--salt-status-error-borderColor);
45-
outline-color: var(--salt-status-error-foreground);
45+
outline-color: var(--salt-status-error-foreground-decorative);
4646
}
4747

4848
.saltRadioButtonIcon-warning,
4949
.saltRadioButton:hover .saltRadioButtonIcon-warning {
50-
color: var(--salt-status-warning-foreground);
50+
color: var(--salt-status-warning-foreground-decorative);
5151
border-color: var(--salt-status-warning-borderColor);
52-
outline-color: var(--salt-status-warning-foreground);
52+
outline-color: var(--salt-status-warning-foreground-decorative);
5353
}
5454

5555
.saltRadioButtonIcon-readOnly,

‎packages/core/src/status-adornment/StatusAdornment.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
}
1010

1111
.saltStatusAdornment-error {
12-
--statusAdornment-color: var(--salt-status-error-foreground);
12+
--statusAdornment-color: var(--salt-status-error-foreground-decorative);
1313
}
1414

1515
.saltStatusAdornment-warning {
16-
--statusAdornment-color: var(--salt-status-warning-foreground);
16+
--statusAdornment-color: var(--salt-status-warning-foreground-decorative);
1717
}
1818

1919
.saltStatusAdornment-success {
20-
--statusAdornment-color: var(--salt-status-success-foreground);
20+
--statusAdornment-color: var(--salt-status-success-foreground-decorative);
2121
}

‎packages/core/src/status-indicator/StatusIndicator.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.saltStatusIndicator {
2-
--statusIndicator-warning-color: var(--salt-status-warning-foreground);
3-
--statusIndicator-info-color: var(--salt-status-info-foreground);
4-
--statusIndicator-success-color: var(--salt-status-success-foreground);
5-
--statusIndicator-error-color: var(--salt-status-error-foreground);
2+
--statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative);
3+
--statusIndicator-info-color: var(--salt-status-info-foreground-decorative);
4+
--statusIndicator-success-color: var(--salt-status-success-foreground-decorative);
5+
--statusIndicator-error-color: var(--salt-status-error-foreground-decorative);
66
color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));
77
}
88

‎packages/core/src/text/Text.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,26 @@
4444
--text-color: var(--salt-content-secondary-foreground-disabled);
4545
}
4646

47+
/* Info color */
48+
.saltText-info {
49+
--text-color: var(--salt-status-info-foreground-informative);
50+
}
51+
52+
/* Error color */
53+
.saltText-error {
54+
--text-color: var(--salt-status-error-foreground-informative);
55+
}
56+
57+
/* Warning color */
58+
.saltText-warning {
59+
--text-color: var(--salt-status-warning-foreground-informative);
60+
}
61+
62+
/* Success color */
63+
.saltText-success {
64+
--text-color: var(--salt-status-success-foreground-informative);
65+
}
66+
4767
/* Body emphasis strong */
4868
.saltText strong {
4969
font-weight: var(--salt-text-fontWeight-strong);

0 commit comments

Comments
 (0)