chore(design-tokens): replace last batch legacy tokens (#851)

kronostechnologies · Jun 3, 2024 · e220e02 · e220e02
1 parent 39b81fc
commit e220e02
Show file tree

Hide file tree

Showing 43 changed files with 333 additions and 237 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 })<NavLinkProps>`
     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
@@ -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`] = `
   >
     <svg
       aria-hidden="true"
-      color="#60666E"
+      class="c2"
+      color="currentColor"
       focusable="false"
       height="1rem"
       width="1rem"
     />
     <span
-      class="c2"
+      class="c3"
     >
       Option 1
     </span>
@@ -277,13 +288,14 @@ exports[`Menu matches the snapshot (menu with icons) 1`] = `
   >
     <svg
       aria-hidden="true"
-      color="#60666E"
+      class="c2"
+      color="currentColor"
       focusable="false"
       height="1rem"
       width="1rem"
     />
     <span
-      class="c2"
+      class="c3"
     >
       Option 2
     </span>