feat: change paddings

Orfium · Dec 18, 2024 · 4948a00 · 4948a00
1 parent 0142c79
commit 4948a00
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 25 deletions.
diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-Playground.snap
@@ -48,15 +48,14 @@
 }
 
 .emotion-1[data-orientation='horizontal'] {
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after {
-  inset: -8px -12px;
+  inset: -3px -8px;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'] {
-  padding-bottom: 0.5rem;
   border-bottom: 0.125rem solid rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -90,7 +89,7 @@
 }
 
 .emotion-1[data-orientation='vertical'] [role='tab'] {
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.5rem;
   box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -123,6 +122,7 @@
   -ms-flex-align: center;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem;
 }
 
 .emotion-7 {

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-SimpleTabs.snap
@@ -48,15 +48,14 @@
 }
 
 .emotion-1[data-orientation='horizontal'] {
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after {
-  inset: -8px -12px;
+  inset: -3px -8px;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'] {
-  padding-bottom: 0.5rem;
   border-bottom: 0.125rem solid rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -90,7 +89,7 @@
 }
 
 .emotion-1[data-orientation='vertical'] [role='tab'] {
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.5rem;
   box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -123,6 +122,7 @@
   -ms-flex-align: center;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem;
 }
 
 <div>

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsOrientation.snap
@@ -48,15 +48,14 @@
 }
 
 .emotion-1[data-orientation='horizontal'] {
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after {
-  inset: -8px -12px;
+  inset: -3px -8px;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'] {
-  padding-bottom: 0.5rem;
   border-bottom: 0.125rem solid rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -90,7 +89,7 @@
 }
 
 .emotion-1[data-orientation='vertical'] [role='tab'] {
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.5rem;
   box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -123,6 +122,7 @@
   -ms-flex-align: center;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem;
 }
 
 .emotion-7 {

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithContent.snap
@@ -48,15 +48,14 @@
 }
 
 .emotion-1[data-orientation='horizontal'] {
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after {
-  inset: -8px -12px;
+  inset: -3px -8px;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'] {
-  padding-bottom: 0.5rem;
   border-bottom: 0.125rem solid rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -90,7 +89,7 @@
 }
 
 .emotion-1[data-orientation='vertical'] [role='tab'] {
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.5rem;
   box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -123,6 +122,7 @@
   -ms-flex-align: center;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem;
 }
 
 .emotion-7 {

diff --git a/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap b/src/__storyshots__/Updated Components/Tabs/Tabs-TabsWithCounter.snap
@@ -48,15 +48,14 @@
 }
 
 .emotion-1[data-orientation='horizontal'] {
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'][data-focus-visible]:after {
-  inset: -8px -12px;
+  inset: -3px -8px;
 }
 
 .emotion-1[data-orientation='horizontal'] [role='tab'] {
-  padding-bottom: 0.5rem;
   border-bottom: 0.125rem solid rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -90,7 +89,7 @@
 }
 
 .emotion-1[data-orientation='vertical'] [role='tab'] {
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.5rem;
   box-shadow: inset 0.125rem 0 0 0 rgba(200,206,255,0);
   -webkit-transition: color ease-in-out 0.2s;
   transition: color ease-in-out 0.2s;
@@ -123,6 +122,7 @@
   -ms-flex-align: center;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem;
 }
 
 .emotion-3 {

diff --git a/src/components/Tabs/components/Tab/Tab.style.ts b/src/components/Tabs/components/Tab/Tab.style.ts
@@ -8,4 +8,5 @@ export const containerStyles = () => (theme: Theme) =>
     cursor: pointer;
     ${flexCenterVertical};
     gap: ${theme.globals.spacing.get('4')};
+    padding: ${theme.globals.spacing.get('4')};
   `;
diff --git a/src/components/Tabs/components/TabList/TabList.style.ts b/src/components/Tabs/components/TabList/TabList.style.ts
@@ -28,15 +28,13 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) =>
     }
 
     &[data-orientation='horizontal'] {
-      gap: ${theme.globals.spacing.get('7')};
+      gap: ${theme.globals.spacing.get('5')};
 
       [role='tab'][data-focus-visible]:after {
-        inset: -8px -12px;
+        inset: -3px -8px;
       }
 
       [role='tab'] {
-        padding-bottom: ${theme.globals.spacing.get('4')};
-
         border-bottom: ${theme.globals.borderWidth.get('2')} solid
           ${theme.tokens.colors.get('borderColor.decorative.transparent')};
         transition: color ease-in-out 0.2s;
@@ -64,7 +62,7 @@ export const containerStyles = (sx?: CSSObject) => (theme: Theme) =>
       }
 
       [role='tab'] {
-        padding: ${theme.globals.spacing.get('4')} ${theme.globals.spacing.get('5')};
+        padding: ${theme.globals.spacing.get('5')} ${theme.globals.spacing.get('4')};
 
         box-shadow: inset ${theme.globals.borderWidth.get('2')} 0 0 0
           ${theme.tokens.colors.get('borderColor.decorative.transparent')};