@deque/cauldron-styles 2.0.0-canary.22e43f33 → 2.0.0-canary.32ba415d

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);
@@ -768,6 +766,7 @@ button.Link {
 
 .cauldron--theme-dark .IconButton--error {
   background-color: var(--accent-danger);
+  color: var(--accent-dark);
 }
 
 .cauldron--theme-dark .IconButton--primary:active {
@@ -934,15 +933,15 @@ button.Link {
 .cauldron--theme-dark .Dialog__inner {
   background-color: var(--accent-medium);
   color: var(--white);
-  border: 1px solid var(--gray-70);
+  border: 4px solid var(--gray-20);
 }
 
 .cauldron--theme-dark .Dialog__header {
-  border-bottom: 1px solid var(--gray-70);
+  border-bottom: 1px solid #5d676f;
 }
 
 .cauldron--theme-dark .Dialog__footer {
-  border-top: 1px solid var(--gray-70);
+  border-top: 1px solid #5d676f;
 }
 
 .cauldron--theme-dark .Dialog__header,
@@ -958,7 +957,7 @@ button.Link {
 .cauldron--theme-dark .Dialog__heading:focus,
 .cauldron--theme-dark .Dialog__close:focus,
 .cauldron--theme-dark .Dialog__close:hover {
-  border-bottom-color: #fff;
+  border-bottom-color: var(--white);
 }
 
 .cauldron--theme-dark .Modal--info .Dialog__header,
@@ -1017,7 +1016,7 @@ button.Link {
 }
 
 .TopBar .Dropdown {
-  top: 42px;
+  top: var(--top-bar-height);
   right: 0;
 }
 
@@ -1961,14 +1960,15 @@ p .Link {
   border-left: var(--border-width) solid transparent;
 }
 
-.SideBar li:not([aria-controls]):hover,
+.SideBar li:not([aria-controls]):not(.MenuItem--active):hover,
 .SideBar li:not([aria-controls]):focus-within {
   outline: 0;
-  border-left: var(--border-width) solid var(--top-bar-text-color);
+  background-color: var(--gray-20);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active {
   border-left: var(--border-width) solid var(--accent-primary);
+  background-color: var(--white);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active a {
@@ -2029,6 +2029,7 @@ p .Link {
 
 .cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active {
   border-left: var(--border-width) solid var(--accent-info);
+  background-color: var(--accent-medium);
 }
 
 .cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active a {
@@ -2036,6 +2037,13 @@ p .Link {
   font-weight: var(--font-weight-medium);
 }
 
+.cauldron--theme-dark
+  .SideBar
+  li:not([aria-controls]):not(.MenuItem--active):hover,
+.cauldron--theme-dark .SideBar li:not([aria-controls]):focus-within {
+  background-color: var(--accent-dark);
+}
+
 :root {
   --tile-background-color: var(--white);
   --list-separator: rgba(153, 153, 153, 0.15);
@@ -2091,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;
@@ -2358,15 +2366,11 @@ button.TooltipTabstop {
 }
 
 :root {
-  --top-bar-background-color: var(--accent-dark);
-  --top-bar-background-color-active: #0b0e11;
-  --top-bar-background-color-light: var(--white);
-  --top-bar-background-color-light-active: var(--white);
-  --top-bar-text-color: var(--accent-light);
-  --top-bar-text-color-light: var(--accent-dark);
-  --top-bar-menuitem-separator: rgba(255, 255, 255, 0.4);
-  --top-bar-menuitem-separator-light: var(--gray-40);
-  --top-bar-border-bottom-color-light: var(--gray-40);
+  --top-bar-background-color: var(--white);
+  --top-bar-background-color-active: var(--white);
+  --top-bar-text-color: var(--accent-dark);
+  --top-bar-menuitem-separator: #b3bfc6;
+  --top-bar-border-bottom-color: var(--gray-40);
   --top-bar-accent-primary: var(--accent-info);
   --top-bar-accent-warning: var(--accent-warning);
   --top-bar-accent-error: var(--accent-danger);
@@ -2387,9 +2391,9 @@ button.TooltipTabstop {
   z-index: var(--z-index-top-bar);
   display: flex;
   align-items: center;
-  background-color: var(--top-bar-background-color-light);
-  color: var(--top-bar-text-color-light);
-  border-bottom: solid 1px var(--top-bar-border-bottom-color-light);
+  background-color: var(--top-bar-background-color);
+  color: var(--top-bar-text-color);
+  border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .TopBar--thin .TopBar {
@@ -2432,7 +2436,7 @@ button.TooltipTabstop {
 }
 
 .TopBar > ul > .TopBar__menu-trigger {
-  border-bottom: solid 1px var(--top-bar-border-bottom-color-light);
+  border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .TopBar > ul > li:focus-within,
@@ -2448,7 +2452,7 @@ button.TooltipTabstop {
   left: 0;
   width: 100%;
   height: var(--border-width);
-  background-color: var(--top-bar-text-color-light);
+  background-color: var(--top-bar-text-color);
 }
 
 .TopBar > ul > li .fa {
@@ -2461,7 +2465,7 @@ button.TooltipTabstop {
 }
 
 .TopBar a {
-  color: var(--top-bar-text-color-light);
+  color: var(--top-bar-text-color);
   text-decoration: none;
 }
 
@@ -2471,7 +2475,7 @@ button.TooltipTabstop {
 
 .TopBar li.MenuItem--active,
 .TopBar [aria-current='page'] {
-  background-color: var(--top-bar-background-color-light-active);
+  background-color: var(--top-bar-background-color-active);
 }
 
 .TopBar li.MenuItem--active:hover,
@@ -2486,8 +2490,8 @@ button.TooltipTabstop {
   padding: 0 var(--space-small);
   align-self: flex-start;
   box-sizing: border-box;
-  background-color: var(--top-bar-background-color-light);
-  color: var(--top-bar-text-color-light);
+  background-color: var(--top-bar-background-color);
+  color: var(--top-bar-text-color);
 }
 
 .TopBar__item--icon {
@@ -2501,15 +2505,23 @@ button.TooltipTabstop {
 }
 
 .MenuItem--separator {
-  border-left: 1px solid var(--top-bar-menuitem-separator-light);
+  border-left: 1px solid var(--top-bar-menuitem-separator);
 }
 
 /* Dark Theme */
 
+.cauldron--theme-dark {
+  --top-bar-background-color: var(--accent-dark);
+  --top-bar-menuitem-separator: #5d676f;
+  --top-bar-border-bottom-color: var(--gray-70);
+  --top-bar-text-color: var(--accent-light);
+  --top-bar-background-color-active: #0b0e11;
+}
+
 .cauldron--theme-dark .TopBar {
   background-color: var(--top-bar-background-color);
   color: var(--top-bar-text-color);
-  border-bottom: solid 1px var(--gray-70);
+  border-bottom: none;
 }
 
 .cauldron--theme-dark .MenuItem--separator {
@@ -2521,7 +2533,6 @@ button.TooltipTabstop {
   color: var(--top-bar-text-color);
 }
 
-.cauldron--theme-dark li.MenuItem--active,
 .cauldron--theme-dark .TopBar [aria-current='page'] {
   background-color: var(--top-bar-background-color-active);
 }
@@ -2734,12 +2745,14 @@ button.TooltipTabstop {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  background: #000;
-  color: #d1d9e1;
+  background: var(--gray-20);
+  color: var(--gray-90);
+  border: 1px solid var(--gray-40);
+  color: var(--accent-primary-active);
 }
 
 .Code .hljs-comment {
-  color: #969896;
+  color: #575957;
   font-style: italic;
 }
 
@@ -2748,24 +2761,12 @@ button.TooltipTabstop {
   font-style: italic;
 }
 
-.Code .hljs-keyword {
-  color: #cc99cc;
-}
-
-.Code .hljs-selector-tag {
-  color: #cc99cc;
-}
-
-.Code .hljs-literal {
-  color: #cc99cc;
-}
-
-.Code .hljs-type {
-  color: #cc99cc;
-}
-
+.Code .hljs-keyword,
+.Code .hljs-selector-tag,
+.Code .hljs-literal,
+.Code .hljs-type,
 .Code .hljs-addition {
-  color: #cc99cc;
+  color: #8a0c8a;
 }
 
 .Code .hljs-number {
@@ -2781,7 +2782,7 @@ button.TooltipTabstop {
 }
 
 .Code .hljs-string {
-  color: #8abeb7;
+  color: var(--gray-60);
 }
 
 .Code .hljs-doctag {
@@ -2792,36 +2793,20 @@ button.TooltipTabstop {
   color: #8abeb7;
 }
 
+.Code .hljs-built_in,
 .Code .hljs-title {
-  color: #b5bd68;
-}
-
-.Code .hljs-name {
-  color: #b5bd68;
-  font-weight: bold;
+  color: var(--accent-dark);
 }
 
+.Code .hljs-name,
 .Code .hljs-section {
-  color: #b5bd68;
+  color: var(--accent-primary-active);
   font-weight: bold;
 }
 
-.Code .hljs-built_in {
-  color: #b5bd68;
-}
-
-.Code .hljs-variable {
-  color: #ffcc66;
-}
-
-.Code .hljs-template-variable {
-  color: #ffcc66;
-}
-
-.Code .hljs-selector-id {
-  color: #ffcc66;
-}
-
+.Code .hljs-variable,
+.Code .hljs-template-variable,
+.Code .hljs-selector-id,
 .Code .hljs-class .hljs-title {
   color: #ffcc66;
 }
@@ -2830,44 +2815,65 @@ button.TooltipTabstop {
   font-weight: bold;
 }
 
-.Code .hljs-symbol {
+.Code .hljs-symbol,
+.Code .hljs-bullet,
+.Code .hljs-subst,
+.Code .hljs-meta,
+.Code .hljs-link {
   color: #f99157;
 }
 
-.Code .hljs-bullet {
-  color: #f99157;
+.Code .hljs-deletion {
+  color: #dc322f;
 }
 
-.Code .hljs-subst {
-  color: #f99157;
+.Code .hljs-formula {
+  background: #eee8d5;
 }
 
-.Code .hljs-meta {
-  color: #f99157;
+.Code .hljs-attr,
+.Code .hljs-attribute {
+  color: var(--accent-error);
 }
 
-.Code .hljs-link {
-  color: #f99157;
+.Code .hljs-emphasis {
+  font-style: italic;
 }
 
-.Code .hljs-deletion {
-  color: #dc322f;
+/* Dark Theme */
+
+.cauldron--theme-dark .Code.hljs {
+  background: var(--accent-dark);
+  color: var(--accent-light);
+  border: 1px solid transparent;
 }
 
-.Code .hljs-formula {
-  background: #eee8d5;
+.cauldron--theme-dark .Code .hljs-string {
+  color: #8abeb7;
 }
 
-.Code .hljs-attr {
-  color: #81a2be;
+.cauldron--theme-dark .Code .hljs-keyword,
+.cauldron--theme-dark .Code .hljs-selector-tag,
+.cauldron--theme-dark .Code .hljs-literal,
+.cauldron--theme-dark .Code .hljs-type,
+.cauldron--theme-dark .Code .hljs-addition {
+  color: #cc99cc;
 }
 
-.Code .hljs-attribute {
-  color: #81a2be;
+.cauldron--theme-dark .Code .hljs-comment {
+  color: #969896;
 }
 
-.Code .hljs-emphasis {
-  font-style: italic;
+.cauldron--theme-dark .Code .hljs-built_in,
+.cauldron--theme-dark .Code .hljs-title,
+.cauldron--theme-dark .Code .hljs-name,
+.cauldron--theme-dark .Code .hljs-section {
+  color: #b5bd68;
+}
+
+.cauldron--theme-dark .Code .hljs-attr,
+.cauldron--theme-dark .Code .hljs-attribute {
+  color: #81a2be;
 }
 
 .Line {
@@ -2892,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);
@@ -3166,3 +3264,59 @@ button.TooltipTabstop {
   background: var(--accent-info);
   color: var(--accent-dark);
 }
+
+:root {
+  --panel-border-color: var(--gray-40);
+  --panel-header-background-color: var(--gray-20);
+  --panel-header-color: var(--gray-90);
+  --panel-content-background-color: var(--white);
+  --panel-content-color: var(--gray-60);
+}
+
+.Panel {
+  border: 1px solid var(--panel-border-color);
+}
+
+.Panel__Header {
+  background-color: var(--panel-header-background-color);
+  color: var(--panel-header-color);
+  font-size: var(--text-size-normal);
+  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;
+  font-weight: var(--font-weight-bold);
+  padding-left: var(--space-small);
+}
+
+.Panel__Header-actions {
+  flex-grow: 1;
+  text-align: right;
+  margin-right: var(--space-smallest);
+}
+
+.Panel__Content {
+  font-size: var(--text-size-smaller);
+  background-color: var(--panel-content-background-color);
+  color: var(--panel-content-color);
+  padding: var(--space-small);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --panel-border-color: #5d676f;
+  --panel-header-background-color: var(--accent-dark);
+  --panel-header-color: var(--white);
+  --panel-content-background-color: var(--accent-medium);
+  --panel-content-color: var(--accent-light);
+}
+
+.cauldron--theme-dark .Panel__Header {
+  border-bottom: 1px solid var(--panel-border-color);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "2.0.0-canary.22e43f33",
+  "version": "2.0.0-canary.32ba415d",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",