@deque/cauldron-styles 2.0.0-canary.22e43f33 → 2.0.0-canary.4fab7c98

package/dist/index.css

@@ -768,6 +768,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 +935,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 +959,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,
@@ -1961,14 +1962,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 +2031,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 +2039,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);
@@ -2358,15 +2368,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 +2393,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 +2438,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 +2454,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 +2467,7 @@ button.TooltipTabstop {
 }
 
 .TopBar a {
-  color: var(--top-bar-text-color-light);
+  color: var(--top-bar-text-color);
   text-decoration: none;
 }
 
@@ -2471,7 +2477,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 +2492,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 +2507,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: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .cauldron--theme-dark .MenuItem--separator {
@@ -2521,7 +2535,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 +2747,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 +2763,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 +2784,7 @@ button.TooltipTabstop {
 }
 
 .Code .hljs-string {
-  color: #8abeb7;
+  color: var(--gray-60);
 }
 
 .Code .hljs-doctag {
@@ -2792,36 +2795,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 +2817,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 {
@@ -3166,3 +3174,57 @@ 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;
+}
+
+.Panel__Header-title {
+  flex-grow: 1;
+  display: flex;
+  padding: var(--space-half) 0;
+}
+
+.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 {
+  --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.4fab7c98",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",