From e220e02cbba0713201d4c628b486480aee4bf8ba Mon Sep 17 00:00:00 2001 From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com> Date: Thu, 25 Apr 2024 14:21:23 -0400 Subject: [PATCH] chore(design-tokens): replace last batch legacy tokens (#851) --- .../bento-menu-button.test.tsx.snap | 6 +- .../src/components/combobox/combobox.tsx | 9 +- .../dropdown-menu-button.test.tsx.snap | 4 +- .../dropdown-menu/dropdown-menu.test.tsx.snap | 4 +- .../dropdown-menu/dropdown-menu.tsx | 2 +- .../dropdown-navigation.test.tsx.snap | 9 +- .../global-navigation.test.tsx.snap | 8 +- .../global-navigation/global-navigation.tsx | 32 +++-- .../src/components/menu/menu.test.tsx.snap | 28 +++-- packages/react/src/components/menu/menu.tsx | 11 +- .../modal/modal-dialog.test.tsx.snap | 5 - .../src/components/modal/modal.test.tsx.snap | 5 - packages/react/src/components/modal/modal.tsx | 7 +- .../src/components/nav-list/nav-list-item.tsx | 5 +- .../nav-list/nav-list.test.tsx.snap | 6 +- .../src/components/table/sort-button-icon.tsx | 6 +- .../src/components/table/table-footer.tsx | 2 +- .../src/components/table/table-header.tsx | 4 +- .../react/src/components/table/table-row.tsx | 2 +- .../src/components/table/table.test.tsx.snap | 60 ++++----- packages/react/src/components/table/table.tsx | 6 +- .../components/tooltip/tooltip.test.tsx.snap | 16 +-- .../react/src/components/tooltip/tooltip.tsx | 12 +- .../user-profile/user-profile.test.tsx.snap | 8 +- .../src/themes/tokens/component-tokens.ts | 11 +- .../themes/tokens/component/card-tokens.ts | 2 +- .../tokens/component/combobox-tokens.ts | 6 + .../tokens/component/datepicker-tokens.ts | 2 +- .../tokens/component/dropdown-menu-tokens.ts | 4 +- .../tokens/component/global-navigation.ts | 29 +++++ .../themes/tokens/component/listbox-tokens.ts | 2 +- .../themes/tokens/component/menu-tokens.ts | 12 +- .../themes/tokens/component/modal-tokens.ts | 8 +- .../tokens/component/nav-list-item-tokens.ts | 23 ---- .../tokens/component/nav-list-tokens.ts | 18 +++ .../tokens/component/side-drawer-tokens.ts | 2 +- .../component/sort-button-icon-tokens.ts | 19 --- .../themes/tokens/component/table-tokens.ts | 28 ++++- .../themes/tokens/component/tooltip-tokens.ts | 20 +-- .../themes/tokens/ref/color-utility-tokens.ts | 114 ++++++++++++------ .../storybook/stories/menu-button.stories.tsx | 5 + .../storybook/stories/skip-link.stories.tsx | 6 +- .../stories/utils/inverted-background.tsx | 2 +- 43 files changed, 333 insertions(+), 237 deletions(-) create mode 100644 packages/react/src/themes/tokens/component/global-navigation.ts delete mode 100644 packages/react/src/themes/tokens/component/nav-list-item-tokens.ts delete mode 100644 packages/react/src/themes/tokens/component/sort-button-icon-tokens.ts diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap index 47cdce73fe..5fde7f3c2a 100644 --- a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap +++ b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap @@ -99,7 +99,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`] background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -919,7 +919,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] = background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -1651,7 +1651,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx index 611276bee2..338e1c9a44 100644 --- a/packages/react/src/components/combobox/combobox.tsx +++ b/packages/react/src/components/combobox/combobox.tsx @@ -103,21 +103,20 @@ const ClearButton = styled(IconButton)<{ disabled?: boolean }>` align-items: center; background-color: transparent; border: 0; - color: ${({ disabled, theme }) => (disabled ? theme.greys['mid-grey'] : theme.greys['dark-grey'])}; - display: flex; +color: ${({ disabled, theme }) => (disabled ? theme.component['combobox-clear-button-disabled-icon-color'] : theme.component['combobox-clear-button-icon-color'])}; display: flex; height: var(--size-1x); padding: var(--spacing-half); position: absolute; right: calc(var(--size-1x) + var(--spacing-1halfx)); width: var(--size-1x); - + &::after { - border-right: ${({ theme }) => `1px solid ${theme.greys['mid-grey']}`}; + border-right: ${({ theme }) => `1px solid ${theme.component['combobox-clear-button-border-right-color']}`}; content: ''; height: calc(var(--size-2x) - var(--spacing-2x)); margin-left: var(--spacing-1x); } - + &:hover { background-color: transparent; } diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap index ec3eb741a9..dd0d19f9eb 100644 --- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap +++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap @@ -386,7 +386,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -1049,7 +1049,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; diff --git a/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap b/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap index 11affbdffa..7ef397642a 100644 --- a/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap +++ b/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap @@ -5,7 +5,7 @@ exports[`DropdownMenu Is hidden 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -415,7 +415,7 @@ exports[`DropdownMenu Matches the snapshot 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; diff --git a/packages/react/src/components/dropdown-menu/dropdown-menu.tsx b/packages/react/src/components/dropdown-menu/dropdown-menu.tsx index 919c40e8a5..b951f3d9b1 100644 --- a/packages/react/src/components/dropdown-menu/dropdown-menu.tsx +++ b/packages/react/src/components/dropdown-menu/dropdown-menu.tsx @@ -8,7 +8,7 @@ const List = styled.div` background-color: ${({ theme }) => theme.component['dropdown-menu-background-color']}; border: 1px solid ${({ theme }) => theme.component['dropdown-menu-border-color']}; border-radius: var(--border-radius); - box-shadow: ${({ theme }) => theme.tokens['overlay-box-shadow']}; + box-shadow: 0 10px 20px 0 ${({ theme }) => theme.component['dropdown-menu-box-shadow-color']}; color: ${({ theme }) => theme.component['dropdown-menu-text-color']}; list-style-type: none; position: absolute; diff --git a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap index 28278620ec..f15ec826f9 100644 --- a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap +++ b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap @@ -99,7 +99,7 @@ exports[`DropdownNavigation Matches Snapshot (defaultOpen) 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -126,6 +126,7 @@ exports[`DropdownNavigation Matches Snapshot (defaultOpen) 1`] = ` .c7:hover { background-color: #DBDEE1; + color: #000000; } .c7[disabled] { @@ -361,7 +362,7 @@ exports[`DropdownNavigation Matches Snapshot (tag="nav") 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -388,6 +389,7 @@ exports[`DropdownNavigation Matches Snapshot (tag="nav") 1`] = ` .c7:hover { background-color: #DBDEE1; + color: #000000; } .c7[disabled] { @@ -624,7 +626,7 @@ exports[`DropdownNavigation Matches Snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -651,6 +653,7 @@ exports[`DropdownNavigation Matches Snapshot 1`] = ` .c7:hover { background-color: #DBDEE1; + color: #000000; } .c7[disabled] { diff --git a/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap b/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap index 5d0f9cc78f..77dc4474f9 100644 --- a/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap +++ b/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap @@ -97,7 +97,7 @@ exports[`Global Navigation matches snapshot 1`] = ` .c0 { background-color: #FFFFFF; - box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -129,7 +129,6 @@ exports[`Global Navigation matches snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - background-color: transparent; box-sizing: border-box; color: #60666E; display: -webkit-box; @@ -187,7 +186,8 @@ exports[`Global Navigation matches snapshot 1`] = ` .c8.active { background-color: #E0F0F9; - color: #000000; + color: #003A5A; + font-weight: var(--font-bold); } .c1 { @@ -212,7 +212,7 @@ exports[`Global Navigation matches snapshot 1`] = ` } .c10 { - background-color: #D9DDE2; + background-color: #DBDEE1; border: 0; height: 1px; margin: var(--spacing-1x) auto; diff --git a/packages/react/src/components/global-navigation/global-navigation.tsx b/packages/react/src/components/global-navigation/global-navigation.tsx index 6faadd9229..a9f4c77599 100644 --- a/packages/react/src/components/global-navigation/global-navigation.tsx +++ b/packages/react/src/components/global-navigation/global-navigation.tsx @@ -6,13 +6,9 @@ import { eventIsInside } from '../../utils/events'; import { IconButton, IconButtonProps } from '../buttons/icon-button'; import { Icon, IconName } from '../icon/icon'; -/* TODO change when updating thematization */ -const lightBlue = '#E0F0F9'; -const lightGrey = '#D9DDE2'; - const Wrapper = styled.div` - background-color: ${({ theme }) => theme.greys.white}; - box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); + background-color: ${({ theme }) => theme.component['global-navigation-background-color']}; + box-shadow: 0 10px 20px 0 ${({ theme }) => theme.component['global-navigation-box-shadow-color']}; box-sizing: border-box; display: flex; flex-direction: column; @@ -32,7 +28,7 @@ const NavList = styled.ul` `; const MenuLink = styled(NavLink)` - color: ${({ theme }) => theme.greys.black}; + color: ${({ theme }) => theme.component['global-navigation-item-text-color']}; display: flex; flex-grow: 1; line-height: 1.5rem; @@ -43,18 +39,20 @@ const MenuLink = styled(NavLink)` ${focus}; &:hover { - background-color: ${(props) => props.theme.greys.grey}; + background-color: ${({ theme }) => theme.component['global-navigation-item-hover-background-color']}; } &.active { + background-color: ${({ theme }) => theme.component['global-navigation-item-selected-background-color']}; + color: ${({ theme }) => theme.component['global-navigation-item-selected-text-color']}; font-weight: var(--font-bold); } `; const ShowMoreMenu = styled.ul<{ open?: boolean }>` - background-color: ${(props) => props.theme.greys.white}; + background-color: ${({ theme }) => theme.component['global-navigation-background-color']}; border-radius: var(--border-radius); - box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); + box-shadow: 0 10px 20px 0 ${({ theme }) => theme.component['global-navigation-box-shadow-color']}; display: ${({ open }) => (open ? 'flex' : 'none')}; flex-wrap: wrap; left: 4.5rem; @@ -80,9 +78,8 @@ const ShowMoreMenu = styled.ul<{ open?: boolean }>` const ShowMore = styled.button<{ active?: boolean }>` align-items: center; - background-color: ${({ active, theme }) => (active ? theme.greys.grey : 'transparent')}; box-sizing: border-box; - color: ${({ theme }) => theme.greys['dark-grey']}; + color: ${({ theme }) => theme.component['global-navigation-item-text-color']}; display: flex; justify-content: center; min-height: var(--size-3halfx); @@ -92,8 +89,8 @@ const ShowMore = styled.button<{ active?: boolean }>` ${focus}; &:hover { - background-color: ${(props) => props.theme.greys.grey}; - color: ${(props) => props.theme.greys.black}; + background-color: ${({ theme }) => theme.component['global-navigation-item-hover-background-color']}; + color: ${({ theme }) => theme.component['global-navigation-item-hover-text-color']}; } `; @@ -115,8 +112,9 @@ const ItemLink = styled(ShowMore).attrs({ as: NavLink })` text-decoration: none; &.active { - background-color: ${lightBlue}; - color: ${(props) => props.theme.greys.black}; + background-color: ${({ theme }) => theme.component['global-navigation-item-selected-background-color']}; + color: ${({ theme }) => theme.component['global-navigation-item-selected-text-color']}; + font-weight: var(--font-bold); } `; @@ -136,7 +134,7 @@ const ItemSpan = styled.span` const separatorHeight = 17; const separatorMargins = 16; const Separator = styled.hr` - background-color: ${lightGrey}; + background-color: ${({ theme }) => theme.component['global-navigation-separator-border-color']}; border: 0; height: ${separatorHeight - separatorMargins}px; margin: var(--spacing-1x) auto; diff --git a/packages/react/src/components/menu/menu.test.tsx.snap b/packages/react/src/components/menu/menu.test.tsx.snap index a1084facee..de2ff9fec5 100644 --- a/packages/react/src/components/menu/menu.test.tsx.snap +++ b/packages/react/src/components/menu/menu.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Menu matches the snapshot (menu with groups) 1`] = ` background-color: #FFFFFF; border: 1px solid #878F9A; border-radius: var(--border-radius); - box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0.1); + box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0.2); box-sizing: border-box; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -26,7 +26,7 @@ exports[`Menu matches the snapshot (menu with groups) 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -54,6 +54,7 @@ exports[`Menu matches the snapshot (menu with groups) 1`] = ` .c2:hover { background-color: #DBDEE1; + color: #000000; } .c2[disabled], @@ -173,7 +174,7 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = ` background-color: #FFFFFF; border: 1px solid #878F9A; border-radius: var(--border-radius); - box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0.1); + box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0.2); box-sizing: border-box; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -194,7 +195,7 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -222,6 +223,7 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = ` .c1:hover { background-color: #DBDEE1; + color: #000000; } .c1[disabled], @@ -233,6 +235,14 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = ` } .c2 { + color: #1B1C1E; +} + +.c2:hover { + color: #000000; +} + +.c3 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -257,13 +267,14 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = ` > Option 1 @@ -277,13 +288,14 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = ` > Option 2 diff --git a/packages/react/src/components/menu/menu.tsx b/packages/react/src/components/menu/menu.tsx index 77245a7def..79985add44 100644 --- a/packages/react/src/components/menu/menu.tsx +++ b/packages/react/src/components/menu/menu.tsx @@ -91,6 +91,7 @@ const Button = styled.button` &:hover { background-color: ${({ theme }) => theme.component['menu-item-hover-background-color']}; + color: ${({ theme }) => theme.component['menu-item-hover-text-color']}; } &[disabled], @@ -102,6 +103,13 @@ const Button = styled.button` } `; +const StyledIcon = styled(Icon)` + color: ${({ theme }) => theme.component['menu-item-icon-color']}; + &:hover { + color: ${({ theme }) => theme.component['menu-item-hover-icon-color']}; + } +`; + const GroupLabel = styled.span<{ $device: DeviceContextProps }>` color: ${({ theme }) => theme.component['menu-group-text-color']}; display: block; @@ -361,12 +369,11 @@ export const Menu = forwardRef(({ $withEmptyIcon={hasAnyOptionWithIcon && !opt.iconName} > {opt.iconName && ( - )} diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/modal-dialog.test.tsx.snap index 29f3916f84..989b83dda6 100644 --- a/packages/react/src/components/modal/modal-dialog.test.tsx.snap +++ b/packages/react/src/components/modal/modal-dialog.test.tsx.snap @@ -255,7 +255,6 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -545,7 +544,6 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -906,7 +904,6 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -1313,7 +1310,6 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -1662,7 +1658,6 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; diff --git a/packages/react/src/components/modal/modal.test.tsx.snap b/packages/react/src/components/modal/modal.test.tsx.snap index 09b1b08e3c..794ed39078 100644 --- a/packages/react/src/components/modal/modal.test.tsx.snap +++ b/packages/react/src/components/modal/modal.test.tsx.snap @@ -35,7 +35,6 @@ exports[`Modal Matches snapshot (no close button, desktop) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -125,7 +124,6 @@ exports[`Modal Matches snapshot (no close button, mobile) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -310,7 +308,6 @@ exports[`Modal Matches snapshot (noPadding) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -515,7 +512,6 @@ exports[`Modal Matches snapshot (opened, desktop) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -719,7 +715,6 @@ exports[`Modal Matches snapshot (opened, mobile) 1`] = ` .c1 { background-color: #FFFFFF; - border: 1px solid #60666E; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; diff --git a/packages/react/src/components/modal/modal.tsx b/packages/react/src/components/modal/modal.tsx index cf37f2836e..8f642b4797 100644 --- a/packages/react/src/components/modal/modal.tsx +++ b/packages/react/src/components/modal/modal.tsx @@ -43,7 +43,6 @@ function getModalMinWidth({ breakpoints, isMobile }: StyledModalProps): string { const StyledModal = styled(ReactModal)` background-color: ${({ theme }) => theme.component['modal-background-color']}; - border: 1px solid ${({ theme }) => theme.component['modal-border-color']}; border-radius: var(--border-radius-2x); box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%); box-sizing: border-box; @@ -75,7 +74,7 @@ interface HeaderProps extends ContentProps { isTopScrolled?: boolean; } const Header = styled.header` - border-bottom: 1px solid ${({ isTopScrolled, theme }) => (isTopScrolled ? theme.component['modal-header-border-bottom-color'] : 'transparent')}; + border-bottom: 1px solid ${({ isTopScrolled, theme }) => (isTopScrolled ? theme.component['modal-border-color'] : 'transparent')}; padding: ${getTopPadding} ${getPadding} var(--spacing-2x); & + ${Main} { @@ -93,7 +92,7 @@ interface FooterProps extends ContentProps { isBottomScrolled?: boolean; } const Footer = styled.footer` - border-top: 1px solid ${({ isBottomScrolled, theme }) => (isBottomScrolled ? theme.component['modal-footer-border-top-color'] : 'transparent')}; + border-top: 1px solid ${({ isBottomScrolled, theme }) => (isBottomScrolled ? theme.component['modal-border-color'] : 'transparent')}; padding: var(--spacing-4x) ${getPadding} 0; `; @@ -172,7 +171,7 @@ export const Modal: FunctionComponent> = ({ const customStyles = { overlay: { alignItems: 'center', - backgroundColor: theme.tokens['modal-overlay-background-color'], + backgroundColor: theme.component['modal-overlay-background-color'], display: 'flex', justifyContent: 'center', zIndex: 10000, diff --git a/packages/react/src/components/nav-list/nav-list-item.tsx b/packages/react/src/components/nav-list/nav-list-item.tsx index 4a7beb3818..06664c8520 100644 --- a/packages/react/src/components/nav-list/nav-list-item.tsx +++ b/packages/react/src/components/nav-list/nav-list-item.tsx @@ -37,7 +37,7 @@ const Label = styled.span` const iconSize = '16'; const BaseIcon = styled(Icon).attrs({ size: iconSize })` - color: ${({ theme }) => theme.component['nav-list-item-icon-text-color']}; + color: ${({ theme }) => theme.component['nav-list-item-icon-color']}; min-width: ${iconSize}px; `; @@ -69,9 +69,10 @@ const linkStyles = css` :hover { background-color: ${({ theme }) => theme.component['nav-list-item-hover-background-color']}; + color: ${({ theme }) => theme.component['nav-list-item-text-hover-color']}; ${BaseIcon} { - color: ${({ theme }) => theme.component['nav-list-item-icon-hover-text-color']}; + color: ${({ theme }) => theme.component['nav-list-item-icon-hover-color']}; } } diff --git a/packages/react/src/components/nav-list/nav-list.test.tsx.snap b/packages/react/src/components/nav-list/nav-list.test.tsx.snap index 8dced4aae4..0a92bb7efc 100644 --- a/packages/react/src/components/nav-list/nav-list.test.tsx.snap +++ b/packages/react/src/components/nav-list/nav-list.test.tsx.snap @@ -12,7 +12,7 @@ exports[`NavList Is hidden 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -39,6 +39,7 @@ exports[`NavList Is hidden 1`] = ` .c1:hover { background-color: #DBDEE1; + color: #000000; } .c1[disabled] { @@ -144,7 +145,7 @@ exports[`NavList Matches the snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #000000; + color: #1B1C1E; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -171,6 +172,7 @@ exports[`NavList Matches the snapshot 1`] = ` .c1:hover { background-color: #DBDEE1; + color: #000000; } .c1[disabled] { diff --git a/packages/react/src/components/table/sort-button-icon.tsx b/packages/react/src/components/table/sort-button-icon.tsx index d0c2c558a8..44f363bfc5 100644 --- a/packages/react/src/components/table/sort-button-icon.tsx +++ b/packages/react/src/components/table/sort-button-icon.tsx @@ -18,7 +18,7 @@ export const SortButtonIcon: FunctionComponent ); @@ -27,7 +27,7 @@ export const SortButtonIcon: FunctionComponent ); @@ -36,7 +36,7 @@ export const SortButtonIcon: FunctionComponent ); diff --git a/packages/react/src/components/table/table-footer.tsx b/packages/react/src/components/table/table-footer.tsx index 28a45765ca..30bd3b42b1 100644 --- a/packages/react/src/components/table/table-footer.tsx +++ b/packages/react/src/components/table/table-footer.tsx @@ -23,7 +23,7 @@ const StyledFooter = styled.td<{ $sticky: boolean }>` position: sticky; `} &:before { - border-bottom: 1px solid ${({ theme }) => theme.greys.grey}; + border-bottom: 1px solid ${({ theme }) => theme.component['table-footer-border-color']}; content: ''; height: 1px; position: absolute; diff --git a/packages/react/src/components/table/table-header.tsx b/packages/react/src/components/table/table-header.tsx index 07e015305f..a7ba4f9ea1 100644 --- a/packages/react/src/components/table/table-header.tsx +++ b/packages/react/src/components/table/table-header.tsx @@ -51,11 +51,11 @@ const StyledHeader = styled.th` `} ${({ hasRightBorder }) => hasRightBorder && css` - border-right: 1px solid ${({ theme }) => theme.greys.grey}; + border-right: 1px solid ${({ theme }) => theme.component['table-group-border-color']}; `} &:before { - border-bottom: 1px solid ${({ theme }) => theme.greys.grey}; + border-bottom: 1px solid ${({ theme }) => theme.component['table-header-border-color']}; bottom: 0; content: ''; position: absolute; diff --git a/packages/react/src/components/table/table-row.tsx b/packages/react/src/components/table/table-row.tsx index 9d8fb006c1..ed9fdc1de3 100644 --- a/packages/react/src/components/table/table-row.tsx +++ b/packages/react/src/components/table/table-row.tsx @@ -147,7 +147,7 @@ const StyledCell = styled.td` `} ${({ hasRightBorder }) => hasRightBorder && css` - border-right: 1px solid ${({ theme }) => theme.greys.grey}; + border-right: 1px solid ${({ theme }) => theme.component['table-group-border-color']}; `} `; diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap index d383c8e41e..25f7f02ffe 100644 --- a/packages/react/src/components/table/table.test.tsx.snap +++ b/packages/react/src/components/table/table.test.tsx.snap @@ -70,11 +70,11 @@ exports[`Table has aria-label on header columns 1`] = ` } .c1 { - background: inherit; + background: #FFFFFF; } .c4 { - background: inherit; + background: transparent; } theme.component['table-header-background-color']}; `; const StyledTBody = styled.tbody` - background: inherit; + background: ${({ theme }) => theme.component['table-body-background-color']}; `; const StyledTFoot = styled.tfoot` - background: inherit; + background: ${({ theme }) => theme.component['table-footer-background-color']}; `; const ExpandButton = styled(IconButton) <{ $expanded: boolean }>` diff --git a/packages/react/src/components/tooltip/tooltip.test.tsx.snap b/packages/react/src/components/tooltip/tooltip.test.tsx.snap index c09291b278..2e0d4e0bc1 100644 --- a/packages/react/src/components/tooltip/tooltip.test.tsx.snap +++ b/packages/react/src/components/tooltip/tooltip.test.tsx.snap @@ -202,12 +202,12 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = ` tabIndex={0} > `${({ theme, variant }) => { if (variant === 'success') { - return theme.component['tooltip-success-background-color']; + return theme.component['tooltip-popper-container-success-background-color']; } - return theme.component['tooltip-default-background-color']; + return theme.component['tooltip-popper-container-default-background-color']; }}`; -const tooltipBorderColor = css<{ theme: ThemeType }>`${({ theme }) => theme.component['tooltip-border-color']}`; +const tooltipBorderColor = css<{ theme: ThemeType }>`${({ theme }) => theme.component['tooltip-popper-container-border-color']}`; const TooltipContainer = styled.div` background-color: ${tooltipColor}; @@ -72,7 +72,7 @@ const TooltipContainer = styled.div` border-radius: var(--border-radius-half); box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%); box-sizing: border-box; - color: ${({ theme }) => theme.component['tooltip-text-color']}; + color: ${({ theme }) => theme.component['tooltip-popper-container-text-color']}; display: ${({ visible }) => (visible ? 'flex' : 'none')}; flex-direction: column; font-size: ${({ isMobile }) => (isMobile ? '1rem' : '0.75rem')}; @@ -358,7 +358,9 @@ export const Tooltip: FunctionComponent> = ({ )} diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx.snap b/packages/react/src/components/user-profile/user-profile.test.tsx.snap index 652d4f71b5..496db3ac66 100644 --- a/packages/react/src/components/user-profile/user-profile.test.tsx.snap +++ b/packages/react/src/components/user-profile/user-profile.test.tsx.snap @@ -119,7 +119,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -811,7 +811,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -1511,7 +1511,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; @@ -2192,7 +2192,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = ` background-color: #FFFFFF; border: 1px solid #60666E; border-radius: var(--border-radius); - box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.19); + box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2); color: #000000; list-style-type: none; position: absolute; diff --git a/packages/react/src/themes/tokens/component-tokens.ts b/packages/react/src/themes/tokens/component-tokens.ts index 21e5fde35d..f8cc63a990 100644 --- a/packages/react/src/themes/tokens/component-tokens.ts +++ b/packages/react/src/themes/tokens/component-tokens.ts @@ -13,6 +13,7 @@ import { defaultDropdownMenuTokens, DropdownMenuTokens } from './component/dropd import { defaultExternalLinkTokens, ExternalLinkTokens } from './component/external-link-tokens'; import { defaultFocusTokens, FocusTokens } from './component/focus-tokens'; import { defaultGlobalHeaderTokens, GlobalHeaderTokens } from './component/global-header-tokens'; +import { defaultGlobalNavigationTokens, GlobalNavigationTokens } from './component/global-navigation'; import { defaultHeadingTokens, HeadingTokens } from './component/heading-tokens'; import { defaultFieldTokens, FieldTokens } from './component/field-tokens'; import { defaultTextInputTokens, TextInputTokens } from './component/text-input-tokens'; @@ -32,7 +33,6 @@ import { defaultToggleSwitchTokens, ToggleSwitchTokens } from './component/toggl import { defaultLegendTokens, LegendTokens } from './component/legend-tokens'; import { defaultLozengeTokens, LozengeTokens } from './component/lozenge-tokens'; import { defaultNavListTokens, NavListTokens } from './component/nav-list-tokens'; -import { defaultNavListItemTokens, NavListItemTokens } from './component/nav-list-item-tokens'; import { defaultPaginationTokens, PaginationTokens } from './component/pagination-tokens'; import { defaultProgressCircleTokens, ProgressCircleTokens } from './component/progress-circle-tokens'; import { defaultProgressIndicatorTokens, ProgressIndicatorTokens } from './component/progress-indicator-tokens'; @@ -40,7 +40,6 @@ import { defaultProgressTrackerTokens, ProgressTrackerTokens } from './component import { defaultRouteLinkTokens, RouteLinkTokens } from './component/route-link-tokens'; import { defaultSideDrawerTokens, SideDrawerTokens } from './component/side-drawer-tokens'; import { defaultSkipLinkTokens, SkipLinkTokens } from './component/skip-link-tokens'; -import { defaultSortButtonTokens, SortButtonIconTokens } from './component/sort-button-icon-tokens'; import { defaultTableTokens, TableTokens } from './component/table-tokens'; import { RefTokens, RefTokenValue } from './ref-tokens'; import { BadgeTokens, defaultBadgeTokens } from './component/badge-tokens'; @@ -87,7 +86,6 @@ export type ComponentTokens = | RadioCardTokens | LegendTokens | NavListTokens - | NavListItemTokens | PaginationTokens | ProgressCircleTokens | ProgressIndicatorTokens @@ -109,11 +107,11 @@ export type ComponentTokens = | SideDrawerTokens | GlobalHeaderTokens | CardTokens - | SortButtonIconTokens | TableTokens | DropdownMenuTokens | TabTokens - | LozengeTokens; + | LozengeTokens + | GlobalNavigationTokens; export type ComponentTokenValue = AliasTokens | RefTokens; @@ -132,7 +130,6 @@ export const defaultComponentTokens: ComponentTokenMap = { ...defaultLabelTokens, ...defaultLegendTokens, ...defaultNavListTokens, - ...defaultNavListItemTokens, ...defaultPaginationTokens, ...defaultProgressCircleTokens, ...defaultProgressIndicatorTokens, @@ -175,10 +172,10 @@ export const defaultComponentTokens: ComponentTokenMap = { ...defaultSideDrawerTokens, ...defaultGlobalHeaderTokens, ...defaultCardTokens, - ...defaultSortButtonTokens, ...defaultTableTokens, ...defaultDropdownMenuTokens, ...defaultLozengeTokens, + ...defaultGlobalNavigationTokens, }; export type ResolvedComponentTokenValue = RefTokenValue; diff --git a/packages/react/src/themes/tokens/component/card-tokens.ts b/packages/react/src/themes/tokens/component/card-tokens.ts index 0f9f041d4c..da11c9f3c4 100644 --- a/packages/react/src/themes/tokens/component/card-tokens.ts +++ b/packages/react/src/themes/tokens/component/card-tokens.ts @@ -15,5 +15,5 @@ export type CardTokensMap = { export const defaultCardTokens : CardTokensMap = { 'card-background-color': 'color-white', 'card-border-color': 'color-neutral-05', - 'card-box-shadow-color': 'transparent-20', + 'card-box-shadow-color': 'transparent-dark-20', }; diff --git a/packages/react/src/themes/tokens/component/combobox-tokens.ts b/packages/react/src/themes/tokens/component/combobox-tokens.ts index 7464344a03..afdc1a39d1 100644 --- a/packages/react/src/themes/tokens/component/combobox-tokens.ts +++ b/packages/react/src/themes/tokens/component/combobox-tokens.ts @@ -9,6 +9,9 @@ export type ComboboxTokens = | 'combobox-error-border-color' | 'combobox-disabled-text-color' | 'combobox-placeholder-text-color' + | 'combobox-clear-button-icon-color' + | 'combobox-clear-button-disabled-icon-color' + | 'combobox-clear-button-border-right-color' | 'combobox-arrow-button-background-color' | 'combobox-arrow-button-hover-background-color' | 'combobox-arrow-button-icon-color' @@ -21,6 +24,9 @@ export type ComboboxTokenMap = { }; export const defaultComboboxTokens: ComboboxTokenMap = { + 'combobox-clear-button-border-right-color': 'color-neutral-65', + 'combobox-clear-button-disabled-icon-color': 'color-neutral-30', + 'combobox-clear-button-icon-color': 'color-neutral-65', 'combobox-placeholder-text-color': 'color-neutral-65', 'combobox-arrow-button-background-color': 'transparent-100', 'combobox-arrow-button-hover-background-color': 'transparent-100', diff --git a/packages/react/src/themes/tokens/component/datepicker-tokens.ts b/packages/react/src/themes/tokens/component/datepicker-tokens.ts index ae4f5e6180..2e6ab23b11 100644 --- a/packages/react/src/themes/tokens/component/datepicker-tokens.ts +++ b/packages/react/src/themes/tokens/component/datepicker-tokens.ts @@ -29,7 +29,7 @@ export type DatepickerTokenMap = { export const defaultDatepickerTokens: DatepickerTokenMap = { 'datepicker-background-color': 'color-white', 'datepicker-border-color': 'color-neutral-15', - 'datepicker-box-shadow-color': 'transparent-20', + 'datepicker-box-shadow-color': 'transparent-dark-20', 'datepicker-header-background-color': 'transparent-100', diff --git a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts index 6602ab8835..b5176cc0ec 100644 --- a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts +++ b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts @@ -24,7 +24,8 @@ export type DropdownMenuTokens = | 'dropdown-menu-group-border-color' | 'dropdown-menu-item-content-icon-background-color' | 'dropdown-menu-item-content-icon-border-color' - | 'dropdown-menu-item-content-description-text-color'; + | 'dropdown-menu-item-content-description-text-color' + | 'dropdown-menu-box-shadow-color'; export type DropdownMenuTokenValue = AliasTokens | RefTokens; @@ -56,4 +57,5 @@ export const defaultDropdownMenuTokens: DropdownMenuTokenMap = { 'dropdown-menu-item-content-icon-background-color': 'color-neutral-05', 'dropdown-menu-item-content-icon-border-color': 'color-neutral-15', 'dropdown-menu-item-content-description-text-color': 'color-neutral-65', + 'dropdown-menu-box-shadow-color': 'transparent-dark-20', }; diff --git a/packages/react/src/themes/tokens/component/global-navigation.ts b/packages/react/src/themes/tokens/component/global-navigation.ts new file mode 100644 index 0000000000..d7efb908dc --- /dev/null +++ b/packages/react/src/themes/tokens/component/global-navigation.ts @@ -0,0 +1,29 @@ +import { AliasTokens } from '../alias-tokens'; +import { RefTokens } from '../ref-tokens'; + +export type GlobalNavigationTokens = + | 'global-navigation-background-color' + | 'global-navigation-box-shadow-color' + | 'global-navigation-item-text-color' + | 'global-navigation-item-hover-text-color' + | 'global-navigation-item-hover-background-color' + | 'global-navigation-item-selected-background-color' + | 'global-navigation-item-selected-text-color' + | 'global-navigation-separator-border-color'; + +export type GlobalNavigationTokenValue = AliasTokens | RefTokens; + +export type GlobalNavigationTokenMap = { + [Token in GlobalNavigationTokens]: GlobalNavigationTokenValue; +}; + +export const defaultGlobalNavigationTokens: GlobalNavigationTokenMap = { + 'global-navigation-background-color': 'color-white', + 'global-navigation-box-shadow-color': 'transparent-dark-20', + 'global-navigation-item-hover-background-color': 'color-neutral-15', + 'global-navigation-item-hover-text-color': 'color-black', + 'global-navigation-item-text-color': 'color-neutral-65', + 'global-navigation-item-selected-background-color': 'color-brand-05', + 'global-navigation-item-selected-text-color': 'color-brand-70', + 'global-navigation-separator-border-color': 'color-neutral-15', +}; diff --git a/packages/react/src/themes/tokens/component/listbox-tokens.ts b/packages/react/src/themes/tokens/component/listbox-tokens.ts index 08e2f16233..2818c2fea0 100644 --- a/packages/react/src/themes/tokens/component/listbox-tokens.ts +++ b/packages/react/src/themes/tokens/component/listbox-tokens.ts @@ -32,7 +32,7 @@ export const defaultListboxTokens: ListboxTokenMap = { 'listbox-background-color': 'color-white', 'listbox-border-color': 'color-neutral-50', 'listbox-box-shadow-frame-color': 'color-neutral-15', - 'listbox-box-shadow-depth-color': 'transparent-20', + 'listbox-box-shadow-depth-color': 'transparent-dark-20', 'listbox-checkbox-background-color': 'color-white', 'listbox-checkbox-disabled-background-color': 'color-neutral-05', 'listbox-checkbox-border-color': 'color-neutral-65', diff --git a/packages/react/src/themes/tokens/component/menu-tokens.ts b/packages/react/src/themes/tokens/component/menu-tokens.ts index f5c05ab79e..9ce88b2dad 100644 --- a/packages/react/src/themes/tokens/component/menu-tokens.ts +++ b/packages/react/src/themes/tokens/component/menu-tokens.ts @@ -9,6 +9,9 @@ export type MenuTokens = | 'menu-submenu-border-color' | 'menu-submenu-box-shadow-color' | 'menu-item-text-color' + | 'menu-item-hover-text-color' + | 'menu-item-icon-color' + | 'menu-item-hover-icon-color' | 'menu-item-hover-background-color' | 'menu-item-disabled-text-color' | 'menu-group-text-color'; @@ -25,9 +28,12 @@ export const defaultMenuTokens: MenuTokenMap = { 'menu-group-text-color': 'color-neutral-65', 'menu-item-disabled-text-color': 'color-neutral-30', 'menu-item-hover-background-color': 'color-neutral-15', - 'menu-item-text-color': 'color-black', - 'menu-box-shadow-color': 'transparent-10', + 'menu-item-text-color': 'color-neutral-90', + 'menu-item-hover-text-color': 'color-black', + 'menu-item-icon-color': 'color-neutral-90', + 'menu-item-hover-icon-color': 'color-black', 'menu-submenu-background-color': 'color-white', 'menu-submenu-border-color': 'color-neutral-50', - 'menu-submenu-box-shadow-color': 'transparent-10', + 'menu-box-shadow-color': 'transparent-dark-20', + 'menu-submenu-box-shadow-color': 'transparent-dark-20', }; diff --git a/packages/react/src/themes/tokens/component/modal-tokens.ts b/packages/react/src/themes/tokens/component/modal-tokens.ts index 1c085e0c91..c9e6253780 100644 --- a/packages/react/src/themes/tokens/component/modal-tokens.ts +++ b/packages/react/src/themes/tokens/component/modal-tokens.ts @@ -4,8 +4,7 @@ import { RefTokens } from '../ref-tokens'; export type ModalTokens = | 'modal-background-color' | 'modal-border-color' - | 'modal-header-border-bottom-color' - | 'modal-footer-border-top-color'; + | 'modal-overlay-background-color'; export type ModalTokenValue = AliasTokens | RefTokens; @@ -15,7 +14,6 @@ export type ModalTokenMap = { export const defaultModalTokens: ModalTokenMap = { 'modal-background-color': 'color-white', - 'modal-border-color': 'color-neutral-65', - 'modal-header-border-bottom-color': 'color-neutral-50', - 'modal-footer-border-top-color': 'color-neutral-50', + 'modal-border-color': 'color-neutral-50', + 'modal-overlay-background-color': 'transparent-dark-75', }; diff --git a/packages/react/src/themes/tokens/component/nav-list-item-tokens.ts b/packages/react/src/themes/tokens/component/nav-list-item-tokens.ts deleted file mode 100644 index 12e8f02733..0000000000 --- a/packages/react/src/themes/tokens/component/nav-list-item-tokens.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { AliasTokens } from '../alias-tokens'; -import { RefTokens } from '../ref-tokens'; - -export type NavListItemTokens = - | 'nav-list-item-text-color' - | 'nav-list-item-icon-text-color' - | 'nav-list-item-hover-background-color' - | 'nav-list-item-icon-hover-text-color' - | 'nav-list-item-disabled-text-color' - -export type NavListItemTokenValue = AliasTokens | RefTokens; - -export type NavListItemTokenMap = { - [Token in NavListItemTokens]: NavListItemTokenValue; -}; - -export const defaultNavListItemTokens: NavListItemTokenMap = { - 'nav-list-item-text-color': 'color-black', - 'nav-list-item-icon-text-color': 'color-neutral-65', - 'nav-list-item-hover-background-color': 'color-neutral-15', - 'nav-list-item-icon-hover-text-color': 'color-black', - 'nav-list-item-disabled-text-color': 'color-neutral-30', -}; diff --git a/packages/react/src/themes/tokens/component/nav-list-tokens.ts b/packages/react/src/themes/tokens/component/nav-list-tokens.ts index e3866810ce..a9114f3162 100644 --- a/packages/react/src/themes/tokens/component/nav-list-tokens.ts +++ b/packages/react/src/themes/tokens/component/nav-list-tokens.ts @@ -4,6 +4,13 @@ import { RefTokens } from '../ref-tokens'; export type NavListTokens = | 'nav-list-background-color' | 'nav-list-border-color' + | 'nav-list-item-text-color' + | 'nav-list-item-icon-color' + | 'nav-list-item-hover-background-color' + | 'nav-list-item-text-hover-color' + | 'nav-list-item-icon-hover-color' + | 'nav-list-item-disabled-text-color' + | 'nav-list-box-shadow-color'; export type NavListTokenValue = AliasTokens | RefTokens; @@ -14,4 +21,15 @@ export type NavListTokenMap = { export const defaultNavListTokens: NavListTokenMap = { 'nav-list-background-color': 'color-white', 'nav-list-border-color': 'color-neutral-65', + + 'nav-list-item-icon-color': 'color-neutral-90', + 'nav-list-item-text-color': 'color-neutral-90', + + 'nav-list-item-hover-background-color': 'color-neutral-15', + 'nav-list-item-text-hover-color': 'color-black', + 'nav-list-item-icon-hover-color': 'color-black', + + 'nav-list-item-disabled-text-color': 'color-neutral-30', + + 'nav-list-box-shadow-color': 'transparent-dark-20', }; diff --git a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts index 83c3a33dac..3d985c42e3 100644 --- a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts +++ b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts @@ -13,5 +13,5 @@ export type SideDrawerTokensMap = { export const defaultSideDrawerTokens: SideDrawerTokensMap = { 'side-drawer-background-color': 'color-white', - 'side-drawer-box-shadow-color': 'transparent-10', + 'side-drawer-box-shadow-color': 'transparent-dark-10', }; diff --git a/packages/react/src/themes/tokens/component/sort-button-icon-tokens.ts b/packages/react/src/themes/tokens/component/sort-button-icon-tokens.ts deleted file mode 100644 index 67f6450e49..0000000000 --- a/packages/react/src/themes/tokens/component/sort-button-icon-tokens.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { AliasTokens } from '../alias-tokens'; -import { RefTokens } from '../ref-tokens'; - -export type SortButtonIconTokens = - 'sort-button-ascending-icon-color' | - 'sort-button-descending-icon-color' | - 'sort-button-default-icon-color'; - -export type SortButtonTokensValue = AliasTokens | RefTokens; - -export type SortButtonTokensMap = { - [Token in SortButtonIconTokens]: SortButtonTokensValue; -} - -export const defaultSortButtonTokens: SortButtonTokensMap = { - 'sort-button-ascending-icon-color': 'color-neutral-65', - 'sort-button-descending-icon-color': 'color-neutral-65', - 'sort-button-default-icon-color': 'color-neutral-65', -}; diff --git a/packages/react/src/themes/tokens/component/table-tokens.ts b/packages/react/src/themes/tokens/component/table-tokens.ts index f475d3e9a4..b55f4ac7b2 100644 --- a/packages/react/src/themes/tokens/component/table-tokens.ts +++ b/packages/react/src/themes/tokens/component/table-tokens.ts @@ -4,13 +4,22 @@ import { RefTokens } from '../ref-tokens'; export type TableTokens = | 'table-text-color' | 'table-background-color' + | 'table-header-background-color' + | 'table-header-border-color' + | 'table-body-background-color' + | 'table-footer-background-color' + | 'table-footer-border-color' + | 'table-group-border-color' | 'table-cell-hover-background-color' | 'table-cell-number-text-color' | 'table-row-selected-background-color' | 'table-row-error-background-color' | 'table-row-border-color' | 'table-row-odd-background-color' - | 'table-row-error-border-color'; + | 'table-row-error-border-color' + | 'table-sort-button-ascending-icon-color' + | 'table-sort-button-descending-icon-color' + | 'table-sort-button-default-icon-color'; export type TableRowTokenValue = AliasTokens | RefTokens; @@ -21,11 +30,24 @@ export type TableTokenMap = { export const defaultTableTokens: TableTokenMap = { 'table-text-color': 'color-neutral-90', 'table-background-color': 'color-white', + + 'table-header-background-color': 'color-white', + 'table-header-border-color': 'color-neutral-15', + 'table-body-background-color': 'transparent-100', + 'table-footer-border-color': 'color-neutral-15', + 'table-footer-background-color': 'color-white', + 'table-cell-hover-background-color': 'color-neutral-15', 'table-cell-number-text-color': 'color-neutral-65', - 'table-row-selected-background-color': 'color-brand-05', - 'table-row-error-background-color': 'color-alert-05', + + 'table-group-border-color': 'color-neutral-15', 'table-row-border-color': 'color-neutral-15', 'table-row-odd-background-color': 'color-neutral-02', + 'table-row-selected-background-color': 'color-brand-05', + 'table-row-error-background-color': 'color-alert-05', 'table-row-error-border-color': 'color-alert-50', + + 'table-sort-button-ascending-icon-color': 'color-neutral-65', + 'table-sort-button-descending-icon-color': 'color-neutral-65', + 'table-sort-button-default-icon-color': 'color-neutral-65', }; diff --git a/packages/react/src/themes/tokens/component/tooltip-tokens.ts b/packages/react/src/themes/tokens/component/tooltip-tokens.ts index 6809a6d856..15aa878be4 100644 --- a/packages/react/src/themes/tokens/component/tooltip-tokens.ts +++ b/packages/react/src/themes/tokens/component/tooltip-tokens.ts @@ -2,10 +2,12 @@ import { AliasTokens } from '../alias-tokens'; import { RefTokens } from '../ref-tokens'; export type TooltipTokens = - | 'tooltip-border-color' - | 'tooltip-text-color' - | 'tooltip-success-background-color' - | 'tooltip-default-background-color' + | 'tooltip-icon-color' + | 'tooltip-inverted-icon-color' + | 'tooltip-popper-container-border-color' + | 'tooltip-popper-container-text-color' + | 'tooltip-popper-container-success-background-color' + | 'tooltip-popper-container-default-background-color' export type TooltipTokenValue = AliasTokens | RefTokens; @@ -14,8 +16,10 @@ export type TooltipTokenMap = { }; export const defaultTooltipTokens: TooltipTokenMap = { - 'tooltip-border-color': 'color-white', - 'tooltip-text-color': 'color-white', - 'tooltip-success-background-color': 'color-success-50', - 'tooltip-default-background-color': 'color-neutral-65', + 'tooltip-icon-color': 'color-neutral-90', + 'tooltip-inverted-icon-color': 'color-white', + 'tooltip-popper-container-border-color': 'color-white', + 'tooltip-popper-container-text-color': 'color-white', + 'tooltip-popper-container-success-background-color': 'color-success-50', + 'tooltip-popper-container-default-background-color': 'color-neutral-65', }; diff --git a/packages/react/src/themes/tokens/ref/color-utility-tokens.ts b/packages/react/src/themes/tokens/ref/color-utility-tokens.ts index d4acc636c7..a4aefca481 100644 --- a/packages/react/src/themes/tokens/ref/color-utility-tokens.ts +++ b/packages/react/src/themes/tokens/ref/color-utility-tokens.ts @@ -1,23 +1,42 @@ export type ColorUtilityTokens = - | 'transparent-05' - | 'transparent-10' - | 'transparent-15' - | 'transparent-20' - | 'transparent-25' - | 'transparent-30' - | 'transparent-35' - | 'transparent-40' - | 'transparent-45' - | 'transparent-50' - | 'transparent-55' - | 'transparent-60' - | 'transparent-65' - | 'transparent-70' - | 'transparent-75' - | 'transparent-80' - | 'transparent-85' - | 'transparent-90' - | 'transparent-95' + | 'transparent-dark-5' + | 'transparent-light-5' + | 'transparent-dark-10' + | 'transparent-light-10' + | 'transparent-dark-15' + | 'transparent-light-15' + | 'transparent-dark-20' + | 'transparent-light-20' + | 'transparent-dark-25' + | 'transparent-light-25' + | 'transparent-dark-30' + | 'transparent-light-30' + | 'transparent-dark-35' + | 'transparent-light-35' + | 'transparent-dark-40' + | 'transparent-light-40' + | 'transparent-dark-45' + | 'transparent-light-45' + | 'transparent-dark-50' + | 'transparent-light-50' + | 'transparent-dark-55' + | 'transparent-light-55' + | 'transparent-dark-60' + | 'transparent-light-60' + | 'transparent-dark-65' + | 'transparent-light-65' + | 'transparent-dark-70' + | 'transparent-light-70' + | 'transparent-dark-75' + | 'transparent-light-75' + | 'transparent-dark-80' + | 'transparent-light-80' + | 'transparent-dark-85' + | 'transparent-light-85' + | 'transparent-dark-90' + | 'transparent-light-90' + | 'transparent-dark-95' + | 'transparent-light-95' | 'transparent-100'; export type ColorUtilityValue = string; @@ -27,24 +46,43 @@ export type ColorUtilityTokenMap = { }; export const defaultColorUtilityTokens: ColorUtilityTokenMap = { - 'transparent-05': 'rgb(0 0 0 / 0.05)', - 'transparent-10': 'rgb(0 0 0 / 0.1)', - 'transparent-15': 'rgb(0 0 0 / 0.15)', - 'transparent-20': 'rgb(0 0 0 / 0.2)', - 'transparent-25': 'rgb(0 0 0 / 0.25)', - 'transparent-30': 'rgb(0 0 0 / 0.3)', - 'transparent-35': 'rgb(0 0 0 / 0.35)', - 'transparent-40': 'rgb(0 0 0 / 0.4)', - 'transparent-45': 'rgb(0 0 0 / 0.45)', - 'transparent-50': 'rgb(0 0 0 / 0.5)', - 'transparent-55': 'rgb(0 0 0 / 0.55)', - 'transparent-60': 'rgb(0 0 0 / 0.6)', - 'transparent-65': 'rgb(0 0 0 / 0.65)', - 'transparent-70': 'rgb(0 0 0 / 0.7)', - 'transparent-75': 'rgb(0 0 0 / 0.75)', - 'transparent-80': 'rgb(0 0 0 / 0.8)', - 'transparent-85': 'rgb(0 0 0 / 0.85)', - 'transparent-90': 'rgb(0 0 0 / 0.9)', - 'transparent-95': 'rgb(0 0 0 / 0.95)', + 'transparent-dark-5': 'rgb(0 0 0 / 0.05)', + 'transparent-light-5': 'rgb(255 255 255 / 0.05)', + 'transparent-dark-10': 'rgb(0 0 0 / 0.1)', + 'transparent-light-10': 'rgb(255 255 255 / 0.1)', + 'transparent-dark-15': 'rgb(0 0 0 / 0.15)', + 'transparent-light-15': 'rgb(255 255 255 / 0.15)', + 'transparent-dark-20': 'rgb(0 0 0 / 0.2)', + 'transparent-light-20': 'rgb(255 255 255 / 0.2)', + 'transparent-dark-25': 'rgb(0 0 0 / 0.25)', + 'transparent-light-25': 'rgb(255 255 255 / 0.25)', + 'transparent-dark-30': 'rgb(0 0 0 / 0.3)', + 'transparent-light-30': 'rgb(255 255 255 / 0.3)', + 'transparent-dark-35': 'rgb(0 0 0 / 0.35)', + 'transparent-light-35': 'rgb(255 255 255 / 0.35)', + 'transparent-dark-40': 'rgb(0 0 0 / 0.4)', + 'transparent-light-40': 'rgb(255 255 255 / 0.4)', + 'transparent-dark-45': 'rgb(0 0 0 / 0.45)', + 'transparent-light-45': 'rgb(255 255 255 / 0.45)', + 'transparent-dark-50': 'rgb(0 0 0 / 0.5)', + 'transparent-light-50': 'rgb(255 255 255 / 0.5)', + 'transparent-dark-55': 'rgb(0 0 0 / 0.55)', + 'transparent-light-55': 'rgb(255 255 255 / 0.55)', + 'transparent-dark-60': 'rgb(0 0 0 / 0.6)', + 'transparent-light-60': 'rgb(255 255 255 / 0.6)', + 'transparent-dark-65': 'rgb(0 0 0 / 0.65)', + 'transparent-light-65': 'rgb(255 255 255 / 0.65)', + 'transparent-dark-70': 'rgb(0 0 0 / 0.7)', + 'transparent-light-70': 'rgb(255 255 255 / 0.7)', + 'transparent-dark-75': 'rgb(0 0 0 / 0.75)', + 'transparent-light-75': 'rgb(255 255 255 / 0.75)', + 'transparent-dark-80': 'rgb(0 0 0 / 0.8)', + 'transparent-light-80': 'rgb(255 255 255 / 0.8)', + 'transparent-dark-85': 'rgb(0 0 0 / 0.85)', + 'transparent-light-85': 'rgb(255 255 255 / 0.85)', + 'transparent-dark-90': 'rgb(0 0 0 / 0.9)', + 'transparent-light-90': 'rgb(255 255 255 / 0.9)', + 'transparent-dark-95': 'rgb(0 0 0 / 0.95)', + 'transparent-light-95': 'rgb(255 255 255 / 0.95)', 'transparent-100': 'transparent', }; diff --git a/packages/storybook/stories/menu-button.stories.tsx b/packages/storybook/stories/menu-button.stories.tsx index 09673892e4..25d0c94098 100644 --- a/packages/storybook/stories/menu-button.stories.tsx +++ b/packages/storybook/stories/menu-button.stories.tsx @@ -89,6 +89,11 @@ const optionsWithIcons: MenuButtonProps['options'] = [ iconName: 'settings', onClick: () => console.info('Option 3 clicked'), }, + { + label: 'Option 4', + iconName: 'menu', + disabled: true, + }, ]; const optionsWithIconsAndSubmenu: MenuButtonProps['options'] = [ diff --git a/packages/storybook/stories/skip-link.stories.tsx b/packages/storybook/stories/skip-link.stories.tsx index 907d030d62..b0fee7637c 100644 --- a/packages/storybook/stories/skip-link.stories.tsx +++ b/packages/storybook/stories/skip-link.stories.tsx @@ -9,9 +9,9 @@ export default { const Navigation = styled.nav` align-items: center; - background-color: ${({ theme }) => theme.greys.black}; + background-color: ${({ theme }) => theme.ref['color-black']}; border-radius: var(--border-radius) var(--border-radius) 0 0; - color: ${({ theme }) => theme.greys.white}; + color: ${({ theme }) => theme.ref['color-white']}; display: flex; height: 56px; justify-content: center; @@ -20,7 +20,7 @@ const Navigation = styled.nav` const Main = styled.main` align-items: center; - background-color: ${({ theme }) => theme.greys.grey}; + background-color: ${({ theme }) => theme.ref['color-neutral-15']}; border-radius: 0 0 var(--border-radius) var(--border-radius); display: flex; height: 150px; diff --git a/packages/storybook/stories/utils/inverted-background.tsx b/packages/storybook/stories/utils/inverted-background.tsx index a1fe01a087..c0c3bc2e7b 100644 --- a/packages/storybook/stories/utils/inverted-background.tsx +++ b/packages/storybook/stories/utils/inverted-background.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; export const InvertedBackground = styled.div` - background-color: ${({ theme }) => theme.greys.grey}; + background-color: ${({ theme }) => theme.ref['color-neutral-15']}; border-radius: var(--border-radius); padding: var(--spacing-1x); `;