Merge branch 'feat/NDS-87_tabs_v5' into feat/NDS-1017_tabstepper

Orfium · Dec 16, 2024 · b250db9 · b250db9
2 parents 14ded55 + 0142c79
commit b250db9
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 50 deletions.
diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap
@@ -25,24 +25,25 @@
   width: fit-content;
   font-family: Roboto;
   font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.015625rem;
+  color: #111530;
 }
 
 .emotion-1 [role='tab'][data-selected] {
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
 }
 
 .emotion-1 [role='tab'][data-focus-visible]:after {
   content: '';
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.125rem;
   border: 0.25rem solid #A566FF;
 }
 
@@ -71,9 +72,9 @@
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
   border-color: #175BF5;
 }
 
@@ -97,6 +98,10 @@
   transition: box-shadow 0.2s;
 }
 
+.emotion-1[data-orientation='vertical'] [role='tab']:hover {
+  box-shadow: inset 0.125rem 0 0 0 #8EAAEC;
+}
+
 .emotion-1[data-orientation='vertical'] [role='tab'][data-selected] {
   box-shadow: inset 0.125rem 0 0 0 #175BF5;
 }

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap
@@ -25,24 +25,25 @@
   width: fit-content;
   font-family: Roboto;
   font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.015625rem;
+  color: #111530;
 }
 
 .emotion-1 [role='tab'][data-selected] {
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
 }
 
 .emotion-1 [role='tab'][data-focus-visible]:after {
   content: '';
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.125rem;
   border: 0.25rem solid #A566FF;
 }
 
@@ -71,9 +72,9 @@
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
   border-color: #175BF5;
 }
 
@@ -97,6 +98,10 @@
   transition: box-shadow 0.2s;
 }
 
+.emotion-1[data-orientation='vertical'] [role='tab']:hover {
+  box-shadow: inset 0.125rem 0 0 0 #8EAAEC;
+}
+
 .emotion-1[data-orientation='vertical'] [role='tab'][data-selected] {
   box-shadow: inset 0.125rem 0 0 0 #175BF5;
 }

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap
@@ -25,24 +25,25 @@
   width: fit-content;
   font-family: Roboto;
   font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.015625rem;
+  color: #111530;
 }
 
 .emotion-1 [role='tab'][data-selected] {
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
 }
 
 .emotion-1 [role='tab'][data-focus-visible]:after {
   content: '';
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.125rem;
   border: 0.25rem solid #A566FF;
 }
 
@@ -71,9 +72,9 @@
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
   border-color: #175BF5;
 }
 
@@ -97,6 +98,10 @@
   transition: box-shadow 0.2s;
 }
 
+.emotion-1[data-orientation='vertical'] [role='tab']:hover {
+  box-shadow: inset 0.125rem 0 0 0 #8EAAEC;
+}
+
 .emotion-1[data-orientation='vertical'] [role='tab'][data-selected] {
   box-shadow: inset 0.125rem 0 0 0 #175BF5;
 }

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap
@@ -25,24 +25,25 @@
   width: fit-content;
   font-family: Roboto;
   font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.015625rem;
+  color: #111530;
 }
 
 .emotion-1 [role='tab'][data-selected] {
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
 }
 
 .emotion-1 [role='tab'][data-focus-visible]:after {
   content: '';
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.125rem;
   border: 0.25rem solid #A566FF;
 }
 
@@ -71,9 +72,9 @@
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
   border-color: #175BF5;
 }
 
@@ -97,6 +98,10 @@
   transition: box-shadow 0.2s;
 }
 
+.emotion-1[data-orientation='vertical'] [role='tab']:hover {
+  box-shadow: inset 0.125rem 0 0 0 #8EAAEC;
+}
+
 .emotion-1[data-orientation='vertical'] [role='tab'][data-selected] {
   box-shadow: inset 0.125rem 0 0 0 #175BF5;
 }

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap
@@ -25,24 +25,25 @@
   width: fit-content;
   font-family: Roboto;
   font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.015625rem;
+  color: #111530;
 }
 
 .emotion-1 [role='tab'][data-selected] {
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
 }
 
 .emotion-1 [role='tab'][data-focus-visible]:after {
   content: '';
   position: absolute;
-  border-radius: 0.25rem;
+  border-radius: 0.125rem;
   border: 0.25rem solid #A566FF;
 }
 
@@ -71,9 +72,9 @@
   color: #194DCC;
   font-family: Roboto;
   font-weight: 500;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
   border-color: #175BF5;
 }
 
@@ -97,6 +98,10 @@
   transition: box-shadow 0.2s;
 }
 
+.emotion-1[data-orientation='vertical'] [role='tab']:hover {
+  box-shadow: inset 0.125rem 0 0 0 #8EAAEC;
+}
+
 .emotion-1[data-orientation='vertical'] [role='tab'][data-selected] {
   box-shadow: inset 0.125rem 0 0 0 #175BF5;
 }

diff --git a/src/components/Tabs/components/TabList/TabList.style.ts b/src/components/Tabs/components/TabList/TabList.style.ts
@@ -9,21 +9,22 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) =>
     [role='tab'] {
       position: relative;
       width: fit-content;
-      ${theme.tokens.typography.get('normal.body02')};
+      ${theme.tokens.typography.get('normal.body01')};
+      color: ${theme.tokens.colors.get('textColor.default.primary')};
     }
 
     [role='tab'][data-selected] {
       color: ${theme.tokens.colors.get('textColor.default.active')};
-      ${theme.tokens.typography.get('normal.label02')};
+      ${theme.tokens.typography.get('normal.label01')};
     }
 
     [role='tab'][data-focus-visible]:after {
       content: '';
       position: absolute;
 
-      border-radius: ${theme.globals.borderRadius.get('2')};
+      border-radius: ${theme.dimension.borderRadius.get('sm')};
       border: ${theme.dimension.borderWidth.get('focused')} solid
-        ${theme.tokens.colors.get('borderColor.interactive.upsell')};
+        ${theme.tokens.colors.get('borderColor.interactive.focused')};
     }
 
     &[data-orientation='horizontal'] {
@@ -48,7 +49,7 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) =>
 
       [role='tab'][data-selected] {
         color: ${theme.tokens.colors.get('textColor.default.active')};
-        ${theme.tokens.typography.get('normal.label02')};
+        ${theme.tokens.typography.get('normal.label01')};
 
         border-color: ${theme.tokens.colors.get('borderColor.interactive.active')};
       }
@@ -72,6 +73,11 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) =>
         transition: box-shadow 0.2s;
       }
 
+      [role='tab']:hover {
+        box-shadow: inset ${theme.globals.borderWidth.get('2')} 0 0 0
+          ${theme.tokens.colors.get('borderColor.interactive.default')};
+      }
+
       [role='tab'][data-selected] {
         box-shadow: inset ${theme.globals.borderWidth.get('2')} 0 0 0
           ${theme.tokens.colors.get('borderColor.interactive.active')};