@deque/cauldron-styles 6.0.0-canary.bdf14131 → 6.0.0-canary.f84823fa

package/dist/index.css

@@ -3052,21 +3052,25 @@ button.TooltipTabstop {
 }
 
 :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 {
@@ -3083,6 +3087,13 @@ button.TooltipTabstop {
   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;
@@ -3093,6 +3104,10 @@ button.TooltipTabstop {
   flex-direction: column;
 }
 
+.Tabs--horizontal .Tablist {
+  border-left: 0;
+}
+
 .Tab {
   display: flex;
   justify-content: center;
@@ -3116,32 +3131,40 @@ button.TooltipTabstop {
   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;
@@ -3251,7 +3274,16 @@ button.TooltipTabstop {
   background: var(--table-header-background-color);
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
-  border-bottom: 3px solid var(--table-row-border-color);
+  border-bottom: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableRow:last-child .TableHeader {
+  border-bottom: none;
 }
 
 .TableHeader[aria-sort] {
@@ -3338,6 +3370,11 @@ button.TooltipTabstop {
   border-bottom: 2px solid var(--gray-40);
 }
 
+.Table--border .TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,
@@ -3871,7 +3908,6 @@ fieldset.Panel {
   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 {
@@ -3879,6 +3915,7 @@ fieldset.Panel {
   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 {
@@ -3890,7 +3927,6 @@ fieldset.Panel {
   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;
 }
@@ -3995,6 +4031,12 @@ fieldset.Panel {
   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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.0.0-canary.bdf14131",
+  "version": "6.0.0-canary.f84823fa",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",