Merge branch 'develop' into rfc--testing-library

dequelabs · Jan 8, 2024 · e8e244f · e8e244f
2 parents c403f8a + 403a38d
commit e8e244f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/packages/styles/navbar.css b/packages/styles/navbar.css
@@ -26,14 +26,14 @@
   align-items: center;
   background-color: var(--top-nav-background-color);
   color: var(--top-nav-text-color);
-  border-bottom: 1px solid var(--top-nav-border-bottom-color);
 }
 
 .NavBar > ul {
   width: 100%;
   list-style-type: none;
   display: flex;
   z-index: var(--z-index-top-nav);
+  border-bottom: 1px solid var(--top-nav-border-bottom-color);
 }
 
 .NavBar > ul > li {
@@ -45,7 +45,6 @@
   display: flex;
   align-items: center;
   background-color: var(--top-nav-background-color);
-  border-bottom: 1px solid var(--top-nav-border-bottom-color);
   border-right: 1px solid var(--top-nav-box-shadow-color);
   transition: background-color 0.3s ease;
 }
@@ -148,6 +147,12 @@
   margin-right: var(--space-smallest);
 }
 
+@media (max-width: 64rem) {
+  .NavBar {
+    padding: 0 var(--space-small);
+  }
+}
+
 @media (max-width: 61.25rem) {
   .NavBar > ul > li {
     font-size: var(--text-size-small);

diff --git a/packages/styles/tabs.css b/packages/styles/tabs.css
@@ -1,19 +1,23 @@
 :root {
-  --tabs-border-color: #b3bfc6;
+  --tabs-border-color: var(--stroke-light);
   --tab-shadow-color: var(--accent-primary);
-  --tab-inactive-background-color: var(--gray-20);
-  --tab-inactive-text-color: var(--gray-60);
-  --tab-active-background-color: var(--white);
+  --tab-inactive-background-color: #fff;
+  --tab-inactive-text-color: var(--gray-80);
+  --tab-active-background-color: #fff;
+  --tab-hover-background-color: var(--gray-20);
+  --tab-panel-color: var(--gray-80);
   --tabs-active-text-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
-  --tabs-border-color: #5d676f;
+  --tabs-border-color: var(--stroke-dark);
   --tab-shadow-color: var(--accent-info);
   --tab-inactive-background-color: var(--accent-medium);
   --tab-inactive-text-color: var(--accent-light);
-  --tab-active-background-color: var(--accent-dark);
-  --tabs-active-text-color: var(--white);
+  --tab-active-background-color: var(--accent-medium);
+  --tab-hover-background-color: var(--accent-dark);
+  --tab-panel-color: var(--accent-light);
+  --tabs-active-text-color: #fff;
 }
 
 .Tabs {
@@ -29,6 +33,13 @@
   display: inline-block;
 }
 
+.Tabs--horizontal {
+  width: 100%;
+  border: 1px solid var(--tabs-border-color);
+  background-color: var(--tab-inactive-background-color);
+  border-bottom: 0;
+}
+
 .Tablist {
   display: flex;
   flex-direction: row;
@@ -39,6 +50,10 @@
   flex-direction: column;
 }
 
+.Tabs--horizontal .Tablist {
+  border-left: 0;
+}
+
 .Tab {
   display: flex;
   justify-content: center;
@@ -62,32 +77,40 @@
   border-right: none;
 }
 
+.Tabs--horizontal .Tab {
+  border-top: 0;
+}
+
 .cauldron--theme-light .Tabs--vertical .Tab:last-child {
   border-bottom: 1px solid var(--tabs-border-color);
 }
 
 .Tab:hover {
   cursor: pointer;
-  background-color: var(--tab-active-background-color);
+  background-color: var(--tab-hover-background-color);
   color: var(--tabs-active-text-color);
 }
 
 .Tab--active {
   color: var(--tabs-active-text-color);
   background-color: var(--tab-active-background-color);
-  font-weight: bold;
+  font-weight: var(--font-weight-medium);
   text-decoration: none;
   box-shadow: inset 0 4px 0 var(--tab-shadow-color);
   z-index: 1;
 }
 
+.Tab--active:hover {
+  background-color: var(--tab-active-background-color);
+}
+
 .Tabs--vertical .Tab--active {
   box-shadow: inset 4px 0 0 var(--tab-shadow-color);
 }
 
 .TabPanel {
   overflow-wrap: break-word;
-  color: var(--tabs-active-text-color);
+  color: var(--tab-panel-color);
   background-color: var(--tab-active-background-color);
   border: 1px solid var(--tabs-border-color);
   padding: 1rem;