Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
chore: update tokens and inverse styles (#3225)
* feat(design-tokens): add focus inset token, adjust inverse text tokens

* chore(button, help-text, in-page-navigation, input, input-box, label, select, tab, textarea): update styles
  • Loading branch information
nkrantz committed May 17, 2023
1 parent 2d05576 commit 48e5f1e
Show file tree
Hide file tree
Showing 20 changed files with 82 additions and 61 deletions.
14 changes: 14 additions & 0 deletions .changeset/eighty-swans-appear.md
@@ -0,0 +1,14 @@
---
'@twilio-paste/button': patch
'@twilio-paste/help-text': patch
'@twilio-paste/in-page-navigation': patch
'@twilio-paste/input': patch
'@twilio-paste/input-box': patch
'@twilio-paste/label': patch
'@twilio-paste/select': patch
'@twilio-paste/tabs': patch
'@twilio-paste/textarea': patch
'@twilio-paste/core': patch
---

[Button, Help Text, In Page Navigation, Input, Input Box, Label, Select, Tab, Text Area] Update color text tokens for inverse styles
6 changes: 6 additions & 0 deletions .changeset/young-toes-battle.md
@@ -0,0 +1,6 @@
---
'@twilio-paste/design-tokens': minor
'@twilio-paste/core': minor
---

[Design tokens] Add shadow-focus-inverse-inset token, adjust inverse text tokens for navigation ui kit
Expand Up @@ -37,7 +37,7 @@ const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
});

const disabledStyles = merge(BaseStyles.disabled, {
color: 'colorTextInverseWeaker',
color: 'colorTextInverseWeakest',
backgroundColor: 'colorBackgroundInverseStrong',
boxShadow: 'shadowBorderInverseWeakest',
});
Expand Down
Expand Up @@ -11,9 +11,9 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
color: 'colorTextInverse',
textAlign: 'left',
transition: 'none',
_hover: {color: 'colorTextInverseWeak', textDecoration: 'underline'},
_hover: {color: 'colorTextInverseWeaker', textDecoration: 'underline'},
_focus: {boxShadow: 'shadowFocusInverse'},
_active: {color: 'colorTextInverseWeak', textDecoration: 'underline'},
_active: {color: 'colorTextInverseWeaker', textDecoration: 'underline'},
});

const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
Expand All @@ -22,7 +22,7 @@ const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
});

const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {
color: 'colorTextInverseWeaker',
color: 'colorTextInverseWeakest',
textAlign: 'left',
});

Expand Down
Expand Up @@ -574,6 +574,13 @@ export const MultiselectComboboxInModal: StoryFn = () => {
);
};

MultiselectComboboxInModal.parameters = {
a11y: {
// redundant flaky test
disable: true,
},
};

// eslint-disable-next-line import/no-default-export
export default {
title: 'Components/Combobox/MultiselectCombobox',
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/help-text/src/HelpText.tsx
Expand Up @@ -37,7 +37,7 @@ const VariantOptions: VariantOptionsProps = {
icon: null,
},
[HelpTextVariants.INVERSE]: {
textColor: 'colorTextInverseWeak',
textColor: 'colorTextInverseWeaker',
icon: null,
},
[HelpTextVariants.ERROR]: {
Expand Down
Expand Up @@ -44,15 +44,15 @@ const CURRENT_PAGE_STYLES: BoxStyleProps = {
};

const INVERSE_STYLES: BoxStyleProps = {
color: 'colorTextInverseWeak',
color: 'colorTextInverseWeaker',
_focus: {
boxShadow: 'shadowFocusInverse',
outline: 'none',
borderRadius: 'borderRadius20',
},
_hover: {
borderBottomColor: 'colorBorderInverse',
color: 'colorTextInverseWeak',
color: 'colorTextInverseWeaker',
},
};

Expand Down
Expand Up @@ -33,9 +33,9 @@ describe('getInputChevronIconColor util', () => {
expect(getInputChevronIconColor('default', true, true)).toBe('colorTextWeaker');
// inverse
expect(getInputChevronIconColor('inverse', false, false)).toBe('colorTextIconInverse');
expect(getInputChevronIconColor('inverse', true, false)).toBe('colorTextInverseWeaker');
expect(getInputChevronIconColor('inverse', false, true)).toBe('colorTextInverseWeaker');
expect(getInputChevronIconColor('inverse', true, true)).toBe('colorTextInverseWeaker');
expect(getInputChevronIconColor('inverse', true, false)).toBe('colorTextInverseWeakest');
expect(getInputChevronIconColor('inverse', false, true)).toBe('colorTextInverseWeakest');
expect(getInputChevronIconColor('inverse', true, true)).toBe('colorTextInverseWeakest');

// missing args defaults to normal color
expect(getInputChevronIconColor()).toBe('colorTextIcon');
Expand Down
Expand Up @@ -21,8 +21,8 @@ const IconColors: {[variant in Variants]: {[key in StateOptions]: TextColor}} =
},
inverse: {
default: 'colorTextIconInverse',
disabled: 'colorTextInverseWeaker',
readOnly: 'colorTextInverseWeaker',
disabled: 'colorTextInverseWeakest',
readOnly: 'colorTextInverseWeakest',
},
};

Expand Down
8 changes: 4 additions & 4 deletions packages/paste-core/components/input/src/Input.tsx
Expand Up @@ -68,16 +68,16 @@ export const InputElement = React.forwardRef<HTMLInputElement, InputProps>(({ele
variant={props.variant}
ref={ref}
_placeholder={{
color: props.variant === 'inverse' ? 'colorTextInverseWeak' : 'colorTextWeak',
color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeak',
fontStyle: 'italic',
}}
_focus_placeholder={{
color: props.variant === 'inverse' ? 'colorTextInverseWeak' : 'colorTextWeak',
color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeak',
}}
_disabled={{
color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
color: props.variant === 'inverse' ? 'colorTextInverseWeakest' : 'colorTextWeaker',
cursor: 'not-allowed',
'-webkit-text-fill-color': props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
'-webkit-text-fill-color': props.variant === 'inverse' ? 'colorTextInverseWeakest' : 'colorTextWeaker',
'-webkit-opacity': '1',
}}
__webkit_datetime_edit={{
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/label/src/Label.tsx
Expand Up @@ -36,7 +36,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
) => {
let textColor = 'colorText' as TextColor;
if (disabled && variant === 'inverse') {
textColor = 'colorTextInverseWeak';
textColor = 'colorTextInverseWeaker';
} else if (disabled) {
textColor = 'colorTextWeak';
} else if (variant === 'inverse') {
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/select/src/Select.tsx
Expand Up @@ -54,7 +54,7 @@ export const SelectElement = React.forwardRef<HTMLSelectElement, SelectProps>(
resize="none"
width="100%"
_disabled={{
color: variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
color: variant === 'inverse' ? 'colorTextInverseWeakest' : 'colorTextWeaker',
cursor: 'not-allowed',
opacity: 1,
}}
Expand Down
8 changes: 4 additions & 4 deletions packages/paste-core/components/tabs/src/Tab.tsx
Expand Up @@ -25,7 +25,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
borderLeftColor: 'transparent',
borderLeftStyle: 'solid',
borderLeftWidth: 'borderWidth10',
color: isInverse ? 'colorTextInverseWeak' : 'colorTextWeak',
color: isInverse ? 'colorTextInverseWeaker' : 'colorTextWeak',
display: 'block',
marginBottom: 'space40',
paddingBottom: 'space30',
Expand All @@ -41,11 +41,11 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
},
_hover: {
borderLeftColor: isInverse ? 'colorBorderInverse' : 'colorBorderPrimaryStronger',
color: isInverse ? 'colorTextInverseWeak' : 'colorTextLinkStronger',
color: isInverse ? 'colorTextInverseWeaker' : 'colorTextLinkStronger',
},
_disabled: {
borderLeftColor: 'transparent',
color: isInverse ? 'colorTextInverseWeaker' : 'colorTextWeaker',
color: isInverse ? 'colorTextInverseWeakest' : 'colorTextWeaker',
},
_focus: {
boxShadow: isInverse ? 'shadowFocusInverse' : 'shadowFocus',
Expand Down Expand Up @@ -80,7 +80,7 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
/* Disabled state */
_disabled: {
borderBottomColor: 'transparent',
color: isInverse ? 'colorTextInverseWeaker' : 'colorTextWeaker',
color: isInverse ? 'colorTextInverseWeakest' : 'colorTextWeaker',
},
/* Hover states */
_hover: {
Expand Down
8 changes: 4 additions & 4 deletions packages/paste-core/components/textarea/src/TextArea.tsx
Expand Up @@ -52,19 +52,19 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
width: '100%',

'&::placeholder': {
color: props.variant === 'inverse' ? 'colorTextInverseWeak' : 'colorTextWeak',
color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeak',
fontStyle: 'italic',
},

'&:focus::placeholder': {
color: props.variant === 'inverse' ? 'colorTextInverseWeak' : 'colorTextWeak',
color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeak',
},

'&:disabled': {
color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
color: props.variant === 'inverse' ? 'colorTextInverseWeakest' : 'colorTextWeaker',
cursor: 'not-allowed',
// Fixes value color in Safari
'-webkit-text-fill-color': props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
'-webkit-text-fill-color': props.variant === 'inverse' ? 'colorTextInverseWeakest' : 'colorTextWeaker',
'-webkit-opacity': '1',
},
}),
Expand Down
Expand Up @@ -174,6 +174,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"shadow-card\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
\\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\",
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
\\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
Expand Down Expand Up @@ -348,7 +349,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"color-text-icon-neutral\\": \\"rgb(102, 179, 255)\\",
\\"color-text-new\\": \\"rgb(231, 220, 250)\\",
\\"color-text-icon-error\\": \\"rgb(235, 86, 86)\\",
\\"color-text-inverse-weak\\": \\"rgb(174, 178, 193)\\",
\\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
\\"color-text-icon-available\\": \\"rgb(54, 213, 118)\\",
\\"color-text-link-destructive-stronger\\": \\"rgb(254, 236, 236)\\",
\\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
Expand Down Expand Up @@ -379,10 +380,11 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"color-text-icon-busy\\": \\"rgb(255, 179, 122)\\",
\\"color-text-weakest\\": \\"rgb(13, 19, 28)\\",
\\"color-text-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-text-inverse-weaker\\": \\"rgb(75, 86, 113)\\",
\\"color-text-inverse-weaker\\": \\"rgb(136, 145, 170)\\",
\\"color-text-primary-strong\\": \\"rgb(153, 205, 255)\\",
\\"color-text-primary-weak\\": \\"rgb(57, 71, 98)\\",
\\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
\\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
\\"color-text-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-text-warning-strong\\": \\"rgb(250, 194, 160)\\",
\\"color-text-icon-warning\\": \\"rgb(255, 179, 122)\\",
Expand Down Expand Up @@ -576,6 +578,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
\\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
\\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
Expand Down Expand Up @@ -750,7 +753,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
\\"color-text-new\\": \\"rgb(109, 46, 209)\\",
\\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
\\"color-text-inverse-weak\\": \\"rgb(174, 178, 193)\\",
\\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
\\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
\\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
\\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
Expand Down Expand Up @@ -781,10 +784,11 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"color-text-icon-busy\\": \\"rgb(227, 106, 25)\\",
\\"color-text-weakest\\": \\"rgb(255, 255, 255)\\",
\\"color-text-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-text-inverse-weaker\\": \\"rgb(96, 107, 133)\\",
\\"color-text-inverse-weaker\\": \\"rgb(136, 145, 170)\\",
\\"color-text-primary-strong\\": \\"rgb(0, 20, 137)\\",
\\"color-text-primary-weak\\": \\"rgb(153, 205, 255)\\",
\\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
\\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
\\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
\\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
\\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
Expand Down Expand Up @@ -978,6 +982,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
\\"shadow-border-user\\": \\"0 0 0 1px #8c5bd8\\",
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
\\"color-data-visualization-10\\": \\"rgb(235, 86, 86)\\",
Expand Down Expand Up @@ -1152,7 +1157,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
\\"color-text-new\\": \\"rgb(109, 46, 209)\\",
\\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
\\"color-text-inverse-weak\\": \\"rgb(174, 178, 193)\\",
\\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
\\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
\\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
\\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
Expand Down Expand Up @@ -1183,10 +1188,11 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"color-text-icon-busy\\": \\"rgb(227, 106, 25)\\",
\\"color-text-weakest\\": \\"rgb(255, 255, 255)\\",
\\"color-text-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-text-inverse-weaker\\": \\"rgb(96, 107, 133)\\",
\\"color-text-inverse-weaker\\": \\"rgb(136, 145, 170)\\",
\\"color-text-primary-strong\\": \\"rgb(0, 20, 137)\\",
\\"color-text-primary-weak\\": \\"rgb(153, 205, 255)\\",
\\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
\\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
\\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
\\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
\\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
Expand Down Expand Up @@ -1380,6 +1386,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"shadow-card\\": \\"0 2px 4px 0 rgba(0, 0, 0, 0.4)\\",
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #ad1111\\",
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
\\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
\\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
Expand Down Expand Up @@ -1554,7 +1561,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"color-text-icon-neutral\\": \\"rgb(102, 179, 255)\\",
\\"color-text-new\\": \\"rgb(231, 220, 250)\\",
\\"color-text-icon-error\\": \\"rgb(235, 86, 86)\\",
\\"color-text-inverse-weak\\": \\"rgb(136, 145, 170)\\",
\\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
\\"color-text-icon-available\\": \\"rgb(54, 213, 118)\\",
\\"color-text-link-destructive-stronger\\": \\"rgb(246, 177, 177)\\",
\\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
Expand Down Expand Up @@ -1585,10 +1592,11 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"color-text-icon-busy\\": \\"rgb(255, 179, 122)\\",
\\"color-text-weakest\\": \\"rgb(13, 19, 28)\\",
\\"color-text-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-text-inverse-weaker\\": \\"rgb(75, 86, 113)\\",
\\"color-text-inverse-weaker\\": \\"rgb(136, 145, 170)\\",
\\"color-text-primary-strong\\": \\"rgb(153, 205, 255)\\",
\\"color-text-primary-weak\\": \\"rgb(57, 71, 98)\\",
\\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
\\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
\\"color-text-weaker\\": \\"rgb(57, 71, 98)\\",
\\"color-text-warning-strong\\": \\"rgb(250, 194, 160)\\",
\\"color-text-icon-warning\\": \\"rgb(255, 179, 122)\\",
Expand Down Expand Up @@ -1782,6 +1790,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"shadow-card\\": \\"0 2px 8px 0 rgba(18, 28, 45, 0.1)\\",
\\"shadow-border-error-weaker\\": \\"0 0 0 1px #fccfcf\\",
\\"shadow-border-inverse-strongest\\": \\"0 0 0 1px #ffffff\\",
\\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
\\"shadow-border-user\\": \\"0 0 0 1px #e7dcfa\\",
\\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #cce4ff\\",
\\"font-family-text\\": \\"'TwilioSansText', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
Expand Down Expand Up @@ -1956,7 +1965,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"color-text-icon-neutral\\": \\"rgb(3, 11, 93)\\",
\\"color-text-new\\": \\"rgb(109, 46, 209)\\",
\\"color-text-icon-error\\": \\"rgb(199, 35, 35)\\",
\\"color-text-inverse-weak\\": \\"rgb(136, 145, 170)\\",
\\"color-text-inverse-weak\\": \\"rgb(202, 205, 216)\\",
\\"color-text-icon-available\\": \\"rgb(14, 124, 58)\\",
\\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
\\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
Expand Down Expand Up @@ -1987,10 +1996,11 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"color-text-icon-busy\\": \\"rgb(227, 106, 25)\\",
\\"color-text-weakest\\": \\"rgb(255, 255, 255)\\",
\\"color-text-brand-highlight\\": \\"rgb(242, 47, 70)\\",
\\"color-text-inverse-weaker\\": \\"rgb(75, 86, 113)\\",
\\"color-text-inverse-weaker\\": \\"rgb(136, 145, 170)\\",
\\"color-text-primary-strong\\": \\"rgb(0, 20, 137)\\",
\\"color-text-primary-weak\\": \\"rgb(153, 205, 255)\\",
\\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
\\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\",
\\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
\\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
\\"color-text-icon-warning\\": \\"rgb(141, 49, 24)\\",
Expand Down
5 changes: 4 additions & 1 deletion packages/paste-design-tokens/tokens/global/box-shadow.yml
Expand Up @@ -26,9 +26,12 @@ props:
shadow-focus-inset:
value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-blue-60-transparent-70}"
comment: Shadow for inset focus on elements, such as DataGrid cells.
shadow-focus-inverse-inset:
value: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0-transparent-40}"
comment: Shadow for inset focus ring on interactive elements on inverse backgrounds.
shadow-focus-shadow-border:
value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}, {!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}"
comment: Shadow for simultaneous focus and border
comment: Shadow for simultaneous focus and border.
shadow-border-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}"
comment: Weaker shadow border for disabled inputs.
Expand Down
7 changes: 5 additions & 2 deletions packages/paste-design-tokens/tokens/global/text-color.yml
Expand Up @@ -64,14 +64,17 @@ props:
- color-background-primary
- color-background-destructive
color-text-inverse-weak:
value: "{!palette-gray-40}"
value: "{!palette-gray-30}"
comment: Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
text_contrast_pairing:
- color-background-body-inverse
- color-background-brand
color-text-inverse-weaker:
value: "{!palette-gray-60}"
value: "{!palette-gray-50}"
comment: Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
color-text-inverse-weakest:
value: "{!palette-gray-70}"
comment: Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
color-text-brand-inverse:
value: "{!white}"
comment: Text color used on any brand color
Expand Down

0 comments on commit 48e5f1e

Please sign in to comment.