@deque/cauldron-styles 2.0.0-canary.4fab7c98 → 2.0.0-canary.765c0018

package/dist/index.css

@@ -516,8 +516,6 @@ button.Link {
   --button-background-color-error-active: #fea7a6;
 
   --button-focus-ring-color: var(--focus-dark);
-
-  --header-text-color-dark: var(--white);
   --field-label-text-color: var(--accent-light);
   --field-border-color-error: var(--accent-danger);
   --error: var(--accent-danger);
@@ -1018,7 +1016,7 @@ button.Link {
 }
 
 .TopBar .Dropdown {
-  top: 42px;
+  top: var(--top-bar-height);
   right: 0;
 }
 
@@ -2101,7 +2099,7 @@ p .Link {
 .Toast {
   top: var(--top-bar-height);
   position: fixed;
-  color: var(--top-bar-background-color-active);
+  color: #0b0e11;
   font-size: var(--text-size-small);
   z-index: var(--z-index-toast);
   align-items: center;
@@ -2523,7 +2521,7 @@ button.TooltipTabstop {
 .cauldron--theme-dark .TopBar {
   background-color: var(--top-bar-background-color);
   color: var(--top-bar-text-color);
-  border-bottom: solid 1px var(--top-bar-border-bottom-color);
+  border-bottom: none;
 }
 
 .cauldron--theme-dark .MenuItem--separator {
@@ -2900,6 +2898,98 @@ button.TooltipTabstop {
   border: 1px solid #ccc;
 }
 
+:root {
+  --tabs-border-color: #b3bfc6;
+  --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);
+  --tabs-active-text-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --tabs-border-color: #5d676f;
+  --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);
+}
+
+.Tabs {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.Tablist {
+  display: flex;
+  flex-direction: row;
+  border-left: 1px solid var(--tabs-border-color);
+}
+
+.Tab {
+  display: block;
+  text-align: center;
+  height: 2.875rem;
+  width: 9.375rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  list-style-type: none;
+  border-top: 1px solid var(--tabs-border-color);
+  border-right: 1px solid var(--tabs-border-color);
+  text-decoration: underline;
+  background-color: var(--tab-inactive-background-color);
+  color: var(--tab-inactive-text-color);
+  padding: var(--space-small);
+}
+
+.Tab:hover {
+  cursor: pointer;
+  background-color: var(--tab-active-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;
+  text-decoration: none;
+  box-shadow: inset 0px 4px 0px var(--tab-shadow-color);
+  z-index: 1;
+}
+
+.TabPanel {
+  overflow-wrap: break-word;
+  color: var(--tabs-active-text-color);
+  background-color: var(--tab-active-background-color);
+  border: 1px solid var(--tabs-border-color);
+  padding: 1rem;
+}
+
+.TabPanel > * {
+  margin-top: 0;
+}
+
+.TabPanel--hidden {
+  display: none;
+}
+
+.Tabs--thin .Tab {
+  height: 2.125rem;
+  padding: var(--space-smallest);
+}
+
+/* variant */
+
+.Tablist--full-width {
+  justify-content: space-evenly;
+}
+
+.Tab--full-width {
+  width: 100%;
+}
+
 :root {
   --tag-text-color: var(--gray-90);
   --tag-label-text-color: var(--gray-60);
@@ -3194,12 +3284,14 @@ button.TooltipTabstop {
   display: flex;
   border-bottom: 1px solid var(--panel-border-color);
   align-items: center;
+  padding: var(--space-half) 0;
 }
 
 .Panel__Header-title {
   flex-grow: 1;
   display: flex;
-  padding: var(--space-half) 0;
+  font-weight: var(--font-weight-bold);
+  padding-left: var(--space-small);
 }
 
 .Panel__Header-actions {
@@ -3217,7 +3309,7 @@ button.TooltipTabstop {
 
 /* Dark Theme */
 
-.cauldron--theme-dark .Panel {
+.cauldron--theme-dark {
   --panel-border-color: #5d676f;
   --panel-header-background-color: var(--accent-dark);
   --panel-header-color: var(--white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "2.0.0-canary.4fab7c98",
+  "version": "2.0.0-canary.765c0018",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",