New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(website): show text color token pairings #3034
Changes from all commits
69cb797
1bfcdf4
e5e2055
e4307d0
554f298
2329439
f540ab0
3a4611c
ca7f45e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
--- | ||
'@twilio-paste/design-tokens': patch | ||
'@twilio-paste/core': patch | ||
--- | ||
|
||
[Design Tokens]: correct color contrast token pair naming for decorative background 10 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
imports: | ||
- ../../../aliases/box-shadow.yml | ||
- ../../../aliases/offset.yml | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. offset file was empty, might as well inherit the base |
||
- ./color-palette.yml | ||
- ./color.yml | ||
- ./offset.yml | ||
aliases: | ||
shadow-elevation-0: "none" | ||
shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}" | ||
|
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -155,31 +155,15 @@ props: | |
color-text-decorative-10: | ||
value: "{!palette-gray-20}" | ||
comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | ||
text_contrast_pairing: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need to declare the pairings at the theme level. The pairings are set at the system level, so every theme should meet the same token pair requirements as they are used in the same places across the theme. |
||
- color-background | ||
- color-background-body | ||
- color-background-decorative-10 | ||
color-text-decorative-20: | ||
value: "{!palette-blue-20}" | ||
comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | ||
text_contrast_pairing: | ||
- color-background | ||
- color-background-body | ||
- color-background-decorative-20 | ||
color-text-decorative-30: | ||
value: "{!palette-green-30}" | ||
comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | ||
text_contrast_pairing: | ||
- color-background | ||
- color-background-body | ||
- color-background-decorative-30 | ||
color-text-decorative-40: | ||
value: "{!palette-purple-20}" | ||
comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | ||
text_contrast_pairing: | ||
- color-background | ||
- color-background-body | ||
- color-background-decorative-40 | ||
|
||
# user | ||
color-text-user: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
imports: | ||
- ../../../aliases/box-shadow.yml | ||
- ../../../aliases/offset.yml | ||
- ./color-palette.yml | ||
- ./color.yml | ||
- ./offset.yml | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. copy pasta from the other theme that didn't need the empty file |
||
aliases: | ||
shadow-elevation-0: "none" | ||
shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}" | ||
|
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,7 +3,6 @@ global: | |
category: box-shadow | ||
imports: | ||
- ../../../global/box-shadow.yml | ||
- ../aliases/box-shadow.yml | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. redundant file |
||
props: | ||
shadow-focus: | ||
value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} 5px {!palette-blue-20}" | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -49,10 +49,6 @@ props: | |
color-text-decorative-30: | ||
value: "{!palette-green-80}" | ||
comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | ||
text_contrast_pairing: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. More copy pasta |
||
- color-background | ||
- color-background-body | ||
- color-background-decorative-30 | ||
|
||
# user | ||
color-text-user: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import {getTokenContrastPairs} from '../components/tokens-list/helpers'; | ||
|
||
describe('Color token pairing display', () => { | ||
describe('getTokenContrastPairs', () => { | ||
it('should only return an object of tokens with their accessbile pairings', () => { | ||
const mockTokens = { | ||
tokens: { | ||
'background-colors': [ | ||
{ | ||
type: 'color', | ||
value: 'rgb(244, 244, 246)', | ||
comment: 'Default background color for any container.', | ||
name: 'color-background', | ||
altValue: '#F4F4F6', | ||
category: 'background-color', | ||
}, | ||
{ | ||
type: 'color', | ||
value: 'rgb(20, 176, 83)', | ||
comment: 'Background color used to represent an entity or person as "available".', | ||
name: 'color-background-available', | ||
altValue: '#14B053', | ||
category: 'background-color', | ||
}, | ||
], | ||
'text-colors': [ | ||
{ | ||
type: 'color', | ||
value: 'rgb(96, 107, 133)', | ||
comment: 'Weak body text for visual hierarchy.', | ||
text_contrast_pairing: [ | ||
'color-background', | ||
'color-background-body', | ||
'color-background-neutral-weakest', | ||
'color-background-warning-weakest', | ||
'color-background-error-weakest', | ||
'color-background-row-striped', | ||
'color-background-primary-weakest', | ||
'color-background-destructive-weakest', | ||
], | ||
name: 'color-text-weak', | ||
altValue: '#606B85', | ||
category: 'text-color', | ||
}, | ||
{ | ||
type: 'color', | ||
value: 'rgb(96, 107, 133)', | ||
name: 'color-text', | ||
altValue: '#606B85', | ||
category: 'text-color', | ||
}, | ||
{ | ||
type: 'color', | ||
value: 'rgb(96, 107, 133)', | ||
text_contrast_pairing: ['color-background', 'color-background-body'], | ||
name: 'color-text-strong', | ||
altValue: '#606B85', | ||
category: 'text-color', | ||
}, | ||
], | ||
}, | ||
}; | ||
expect(getTokenContrastPairs(mockTokens)).toEqual({ | ||
'color-text-weak': [ | ||
'color-background', | ||
'color-background-body', | ||
'color-background-neutral-weakest', | ||
'color-background-warning-weakest', | ||
'color-background-error-weakest', | ||
'color-background-row-striped', | ||
'color-background-primary-weakest', | ||
'color-background-destructive-weakest', | ||
], | ||
'color-text-strong': ['color-background', 'color-background-body'], | ||
}); | ||
}); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
incorrect annotations here. These tokens don't exist.