Skip to content

Commit cfe859e

Browse files
aweellaweell
authored
Merge pull request #630 from dxc-technology/principles-color-neutral-a-tokens
Add neutral transparent color palette
2 parents 67a27e4 + ed998d8 commit cfe859e

File tree

6 files changed

+33
-16
lines changed

6 files changed

+33
-16
lines changed

‎guidelines/components/alert/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,10 @@ Depending on the content that need to be displayed, more detailed descriptions c
8383
| `errorBorderColor` | Container border | `color-red-700` | #d0011b |
8484
| `titleFontColor` | Title | `color-black` | #000000 |
8585
| `inlineTextFontColor` | Inline text | `color-black` | #000000 |
86-
| `hoverActionBackgroundColor` | Action:hover | - | #0000000d |
87-
| `activeActionBackgroundColor` | Action:active | - | #0000001a |
86+
| `hoverActionBackgroundColor` | Action:hover | `color-grey-100-a` | #0000000d |
87+
| `activeActionBackgroundColor` | Action:active | `color-grey-200-a` | #0000001a |
8888
| `focusActionBorderColor` | Action:focus | `color-blue-600` | #0095ff |
89-
| `overlayColor` | Overlay | - | #000000B3 |
89+
| `overlayColor` | Overlay | `color-grey-800-a` | #000000b3 |
9090

9191

9292
### Typography

‎guidelines/components/dialog/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ _Design specifications for dialog component_
5050

5151
| Component token | Element | Core token | Value |
5252
| :----------------------------- | :------------------------- | :--------------------------- | :-------------------- |
53-
| `overlayColor` | Overlay | `color-black` | #000000 |
53+
| `overlayColor` | Overlay | `color-grey-800-a` | #000000b3 |
5454
| `backgroundColor` | Container | `color-white` | #ffffff |
5555
| `boxShadowColor` | Container shadow | - | rgba(0, 0, 0, 0.2) |
5656
| `closeIconColor` | Icon close | `color-black` | #000000 |

‎guidelines/components/header/README.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ _Header design specifications_
5050

5151
### Color
5252

53-
| Component token | Element | Core token | Value |
54-
| :----------------------------- | :--------------- | :--------------- | :--------- |
55-
| `backgroundColor` | Container | `color-white` | #ffffff |
56-
| `underlinedColor` | Container | `color-black` | #000000 |
57-
| `hamburguerHoverColor` | Menu:hover | `color-grey-700` | #666666 |
58-
| `hamburguerFocusColor` | Menu:focus | `color-blue-600` | #0095ff |
59-
| `hamburguerFontColor` | Menu label | `color-black` | #000000 |
60-
| `hamburguerIconColor` | Menu icon | `color-black` | #000000 |
61-
| `menuBackgroundColor` | Menu | `color-white` | #ffffff |
62-
| `overlayColor` | Overlay | `color-black` | #f2f2f2 |
53+
| Component token | Element | Core token | Value |
54+
| :----------------------------- | :--------------- | :---------------------- | :---------- |
55+
| `backgroundColor` | Container | `color-white` | #ffffff |
56+
| `underlinedColor` | Container | `color-black` | #000000 |
57+
| `hamburguerHoverColor` | Menu:hover | `color-grey-700` | #666666 |
58+
| `hamburguerFocusColor` | Menu:focus | `color-blue-600` | #0095ff |
59+
| `hamburguerFontColor` | Menu label | `color-black` | #000000 |
60+
| `hamburguerIconColor` | Menu icon | `color-black` | #000000 |
61+
| `menuBackgroundColor` | Menu | `color-white` | #ffffff |
62+
| `overlayColor` | Overlay | `color-grey-800-a` | #000000b3 |
6363

6464
### Typography
6565

‎guidelines/components/progressbar/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ _Component design specifications_
6868
| `indicatorFontColorOnDark` | Indicator | `color-white` | #ffffff |
6969
| `helperFontColor` | Helper text | `color-black` | #000000 |
7070
| `helperFontColorOnDark` | Helper text | `color-white` | #ffffff |
71-
| `overlayColor` | Overlay | - | #000000 0.80 opacity |
71+
| `overlayColor` | Overlay | `color-grey-800-a` | #000000b3 |
7272

7373
### Size
7474

‎guidelines/components/spinner/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ _Spinner design specifications_
3434
| `fontColor` | Label | `color-black` | #000000 |
3535
| `fontColorOnDark` | Label | `color-white` | #ffffff |
3636
| `fontColor` | Percentage | `color-black` | #000000 |
37-
| `overlayColor` | Overlay | - | #000000 0.80 opacity |
37+
| `overlayColor` | Overlay | `color-grey-800-a` | #000000b3 |
3838

3939

4040
### Size

‎guidelines/principles/colors/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ _Core color families values_
3131

3232
#### Greyscale
3333

34+
##### Solid variants
35+
3436
| Name | Value (hex) | Value (hsl) |
3537
| :------------------------ | :----------- | :--------------- |
3638
| `color-grey-50` | #fafafa | (0, 0%, 98%) |
@@ -45,6 +47,21 @@ _Core color families values_
4547
| `color-grey-900` | #333333 | (0, 0%, 20%) |
4648

4749

50+
##### Trasparent variants
51+
52+
| Token | Opacity | Value (hsla) | Value (#RRGGBBAA) |
53+
| :----------------- |:------- | :------------------- | :---------------- |
54+
| `color-grey-50-a` | 0.02 | hsla(0,0%,0% / 0.02) | #00000005 |
55+
| `color-grey-100-a` | 0.05 | hsla(0,0%,0% / 0.05) | #0000000d |
56+
| `color-grey-200-a` | 0.1 | hsla(0,0%,0% / 0.1) | #0000001a |
57+
| `color-grey-300-a` | 0.2 | hsla(0,0%,0% / 0.2) | #00000033 |
58+
| `color-grey-400-a` | 0.3 | hsla(0,0%,0% / 0.3) | #0000004d |
59+
| `color-grey-500-a` | 0.4 | hsla(0,0%,0% / 0.4) | #00000066 |
60+
| `color-grey-600-a` | 0.5 | hsla(0,0%,0% / 0.5) | #00000080 |
61+
| `color-grey-700-a` | 0.6 | hsla(0,0%,0% / 0.6) | #00000099 |
62+
| `color-grey-800-a` | 0.7 | hsla(0,0%,0% / 0.7) | #000000b3 |
63+
| `color-grey-900-a` | 0.8 | hsla(0,0%,0% / 0.8) | #000000cc |
64+
4865

4966
#### Purple
5067

0 commit comments

Comments
 (0)