@deque/cauldron-styles 1.0.0-canary.f7873643 → 2.0.0-canary.4fab7c98

package/dist/index.css

@@ -112,7 +112,11 @@
 }
 
 :root {
-  --workspace-background-color: var(--gray-10);
+  --workspace-background-color: #f0f2f5;
+}
+
+.cauldron--theme-dark {
+  --workspace-background-color: var(--dark-workspace-color);
 }
 
 html {
@@ -270,7 +274,7 @@ p {
 /* Dark Theme */
 
 .cauldron--theme-dark .Layout {
-  background-color: var(--dark--workspace-color);
+  background-color: var(--dark-workspace-color);
   color: var(--white);
 }
 
@@ -540,7 +544,7 @@ button.Link {
 .cauldron--theme-dark .Button--secondary[disabled],
 .cauldron--theme-dark .Button--error[aria-disabled='true'],
 .cauldron--theme-dark .Button--error[disabled] {
-  color: var(--dark--workspace-color);
+  color: var(--dark-workspace-color);
 }
 
 .cauldron--theme-dark .Button--primary:active,
@@ -563,19 +567,19 @@ button.Link {
 
 .cauldron--theme-dark
   .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--dark--workspace-color),
+  box-shadow: 0 0 0 1px var(--dark-workspace-color),
     0 0 0 2px var(--accent-info);
 }
 
 .cauldron--theme-dark
   .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--dark--workspace-color),
+  box-shadow: 0 0 0 1px var(--dark-workspace-color),
     0 0 0 2px var(--accent-light);
 }
 
 .cauldron--theme-dark
   .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--dark--workspace-color),
+  box-shadow: 0 0 0 1px var(--dark-workspace-color),
     0 0 0 2px var(--accent-danger);
 }
 
@@ -685,20 +689,6 @@ button.Link {
   cursor: default;
 }
 
-.IconButton--light[aria-disabled='true'],
-.IconButton--light[disabled] {
-  color: var(--icon-button-content-color-light-disabled);
-  background-color: var(--icon-button-background-color-light);
-  cursor: default;
-}
-
-.IconButton--dark[aria-disabled='true'],
-.IconButton--dark[disabled] {
-  color: var(--icon-button-content-color-dark-disabled);
-  background-color: var(--icon-button-background-color-dark);
-  cursor: default;
-}
-
 .IconButton:focus:before {
   box-shadow: 0 0 1px 2px var(--button-focus-ring-color);
 }
@@ -743,30 +733,60 @@ button.Link {
   background-color: var(--icon-button-background-color-error-active);
 }
 
-.IconButton--light {
-  background-color: var(--icon-button-background-color-light);
-  color: var(--button-text-color-dark);
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --icon-button-border-color-secondary: var(--accent-medium);
+  --icon-button-background-color-secondary: var(--accent-medium);
+  --icon-button-background-color-primary: var(--gray-20);
+  --icon-button-icon-color: var(--white);
 }
 
-.IconButton--light:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-color-light);
+.cauldron--theme-dark .IconButton--error {
+  background-color: var(--accent-dark);
+  color: var(--white);
 }
 
-.IconButton--light:active {
-  background-color: var(--icon-button-background-color-light-active);
+.cauldron--theme-dark .IconButton--primary {
+  color: var(--gray-90);
 }
 
-.IconButton--dark {
-  background-color: var(--icon-button-background-color-dark);
-  color: var(--button-text-color-light);
+.cauldron--theme-dark .IconButton--primary[aria-disabled='true'],
+.cauldron--theme-dark .IconButton--primary[disabled] {
+  background-color: var(--gray-20);
+  color: var(--gray-40);
+}
+
+.cauldron--theme-dark .IconButton--secondary[aria-disabled='true'],
+.cauldron--theme-dark .IconButton--secondary[disabled] {
+  color: #5d676f;
 }
 
-.IconButton--dark:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--icon-button-outline-color-dark);
+.cauldron--theme-dark .IconButton--secondary {
+  color: var(--white);
+}
+
+.cauldron--theme-dark .IconButton--error {
+  background-color: var(--accent-danger);
+  color: var(--accent-dark);
+}
+
+.cauldron--theme-dark .IconButton--primary:active {
+  background-color: #e5ebec;
+}
+
+.cauldron--theme-dark .IconButton--secondary:active {
+  background-color: var(--accent-dark);
+}
+
+.cauldron--theme-dark
+  .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--accent-light);
 }
 
-.IconButton--dark:active {
-  background-color: var(--icon-button-background-color-dark-active);
+.cauldron--theme-dark
+  .IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--white);
 }
 
 :root {
@@ -910,6 +930,52 @@ button.Link {
   border-top: none;
 }
 
+/* Dark Theme */
+
+.cauldron--theme-dark .Dialog__inner {
+  background-color: var(--accent-medium);
+  color: var(--white);
+  border: 4px solid var(--gray-20);
+}
+
+.cauldron--theme-dark .Dialog__header {
+  border-bottom: 1px solid #5d676f;
+}
+
+.cauldron--theme-dark .Dialog__footer {
+  border-top: 1px solid #5d676f;
+}
+
+.cauldron--theme-dark .Dialog__header,
+.cauldron--theme-dark .Dialog__footer {
+  background-color: var(--accent-dark);
+  color: var(--gray-20);
+}
+
+.cauldron--theme-dark .Dialog__close {
+  color: var(--gray-20);
+}
+
+.cauldron--theme-dark .Dialog__heading:focus,
+.cauldron--theme-dark .Dialog__close:focus,
+.cauldron--theme-dark .Dialog__close:hover {
+  border-bottom-color: var(--white);
+}
+
+.cauldron--theme-dark .Modal--info .Dialog__header,
+.cauldron--theme-dark .Modal--info .Dialog__content,
+.cauldron--theme-dark .Modal--info .Dialog__footer {
+  background-color: var(--accent-medium);
+}
+
+.cauldron--theme-dark .Modal--info .Dialog__header {
+  border-bottom: none;
+}
+
+.cauldron--theme-dark .Modal--info .Dialog__footer {
+  border-top: none;
+}
+
 .Dropdown {
   position: absolute;
   padding: 8px;
@@ -1474,10 +1540,6 @@ textarea.Field--has-error:focus,
   cursor: default;
 }
 
-.Field__label.Field__label--disabled {
-  color: var(--disabled);
-}
-
 .Field__required-text {
   flex: 1;
   text-align: right;
@@ -1609,6 +1671,31 @@ textarea.Field--has-error:focus,
   border: 1px solid currentColor;
 }
 
+/* Dark Theme */
+
+.cauldron--theme-dark {
+  --field-label-text-color: var(--white);
+}
+
+.cauldron--theme-dark .Radio__overlay,
+.cauldron--theme-dark .Checkbox__overlay {
+  color: var(--white);
+}
+
+.cauldron--theme-dark .Checkbox__overlay.Icon--checkbox-checked {
+  color: var(--accent-light);
+}
+
+.cauldron--theme-dark .Checkbox__overlay.Field--has-error {
+  color: var(--accent-danger);
+}
+
+.cauldron--theme-dark .Radio__overlay--disabled,
+.cauldron--theme-dark .Checkbox__overlay--disabled.Icon--checkbox-checked,
+.cauldron--theme-dark .Checkbox__overlay--disabled.Icon--checkbox-unchecked {
+  color: #4c99a9;
+}
+
 :root {
   --link-text-color: var(--accent-primary);
   --link-text-color-light: rgba(60, 122, 174, 0.1);
@@ -1845,7 +1932,7 @@ p .Link {
   top: var(--top-bar-height);
   bottom: 0;
   overflow: auto;
-  background-color: var(--top-bar-background-color);
+  background-color: var(--white);
   width: var(--menu-width);
   left: calc(-1 * var(--menu-width));
   box-sizing: border-box;
@@ -1875,18 +1962,19 @@ 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(--top-bar-accent-primary);
+  border-left: var(--border-width) solid var(--accent-primary);
+  background-color: var(--white);
 }
 
 .SideBar li:not([aria-controls]).MenuItem--active a {
-  color: var(--text-color-light);
+  color: var(--gray-90);
   font-weight: var(--font-weight-medium);
 }
 
@@ -1901,10 +1989,12 @@ p .Link {
 }
 
 .SideBar > li {
-  color: var(--top-bar-text-color);
+  color: var(--gray-60);
   font-size: var(--text-size-small);
   font-weight: var(--font-weight-light);
   cursor: pointer;
+  border-right: 1px solid #b3bfc6;
+  border-bottom: 1px solid#b3bfc6;
 }
 
 .SideBar > li:focus {
@@ -1913,7 +2003,7 @@ p .Link {
 
 .SideBar > li a {
   text-decoration: none;
-  color: var(--top-bar-text-color);
+  color: var(--gray-60);
   font-size: var(--text-size-small);
   font-weight: var(--font-weight-light);
 }
@@ -1922,6 +2012,40 @@ p .Link {
   outline: 0;
 }
 
+/* Dark Theme */
+
+.cauldron--theme-dark .SideBar {
+  background-color: var(--accent-medium);
+  color: var(--accent-light);
+}
+
+.cauldron--theme-dark .SideBar > li a {
+  color: var(--accent-light);
+}
+
+.cauldron--theme-dark .SideBar > li {
+  color: var(--accent-light);
+  border-right: 2px solid #5d676f;
+  border-bottom: 2px solid #5d676f;
+}
+
+.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 {
+  color: var(--white);
+  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);
@@ -2244,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);
@@ -2263,8 +2383,6 @@ button.TooltipTabstop {
 }
 
 .TopBar {
-  background-color: var(--top-bar-background-color);
-  color: var(--top-bar-text-color);
   position: fixed;
   width: 100%;
   height: var(--top-bar-height);
@@ -2275,12 +2393,9 @@ button.TooltipTabstop {
   z-index: var(--z-index-top-bar);
   display: flex;
   align-items: center;
-}
-
-.TopBar--light {
-  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 {
@@ -2322,8 +2437,8 @@ button.TooltipTabstop {
   height: var(--top-bar-height-thin);
 }
 
-.TopBar--light > ul > .TopBar__menu-trigger {
-  border-bottom: solid 1px var(--top-bar-border-bottom-color-light);
+.TopBar > ul > .TopBar__menu-trigger {
+  border-bottom: solid 1px var(--top-bar-border-bottom-color);
 }
 
 .TopBar > ul > li:focus-within,
@@ -2338,13 +2453,8 @@ button.TooltipTabstop {
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: var(--top-bar-text-color);
   height: var(--border-width);
-}
-
-.TopBar--light > ul > li:focus-within:before,
-.TopBar--light > ul > li:hover:before {
-  background-color: var(--top-bar-text-color-light);
+  background-color: var(--top-bar-text-color);
 }
 
 .TopBar > ul > li .fa {
@@ -2361,10 +2471,6 @@ button.TooltipTabstop {
   text-decoration: none;
 }
 
-.TopBar--light a {
-  color: var(--top-bar-text-color-light);
-}
-
 .TopBar .MenuItem--align-right {
   margin-left: auto;
 }
@@ -2374,11 +2480,6 @@ button.TooltipTabstop {
   background-color: var(--top-bar-background-color-active);
 }
 
-.TopBar--light li.MenuItem--active,
-.TopBar--light [aria-current='page'] {
-  background-color: var(--top-bar-background-color-light-active);
-}
-
 .TopBar li.MenuItem--active:hover,
 .TopBar [aria-current='page'] {
   border-bottom: var(--border-width) solid transparent !important;
@@ -2387,17 +2488,12 @@ button.TooltipTabstop {
 .TopBar .TopBar__menu-trigger {
   display: flex;
   align-items: center;
-  background-color: var(--top-bar-background-color);
-  color: var(--top-bar-text-color);
   font-size: var(--text-size-medium);
   padding: 0 var(--space-small);
   align-self: flex-start;
   box-sizing: border-box;
-}
-
-.TopBar--light .TopBar__menu-trigger {
-  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 {
@@ -2414,8 +2510,46 @@ button.TooltipTabstop {
   border-left: 1px solid var(--top-bar-menuitem-separator);
 }
 
-.TopBar--light .MenuItem--separator {
-  border-left: 1px solid var(--top-bar-menuitem-separator-light);
+/* 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(--top-bar-border-bottom-color);
+}
+
+.cauldron--theme-dark .MenuItem--separator {
+  border-left: 1px solid var(--top-bar-menuitem-separator);
+}
+
+.cauldron--theme-dark .TopBar__menu-trigger {
+  background-color: var(--top-bar-background-color);
+  color: var(--top-bar-text-color);
+}
+
+.cauldron--theme-dark .TopBar [aria-current='page'] {
+  background-color: var(--top-bar-background-color-active);
+}
+
+.cauldron--theme-dark a {
+  color: var(--top-bar-text-color);
+}
+
+.cauldron--theme-dark .TopBar > ul > .TopBar__menu-trigger {
+  border-bottom: solid 1px var(--top-bar-border-bottom-color);
+}
+
+.cauldron--theme-dark .TopBar > ul > li:focus-within:before,
+.cauldron--theme-dark .TopBar > ul > li:hover:before {
+  background-color: var(--top-bar-text-color);
 }
 
 :root {
@@ -2514,7 +2648,7 @@ button.TooltipTabstop {
 }
 
 .Loader__overlay {
-  background: rgba(255, 255, 255, 0.95);
+  background: var(--workspace-background-color);
   position: absolute;
   display: inline-flex;
   flex-direction: column;
@@ -2532,14 +2666,22 @@ button.TooltipTabstop {
   z-index: var(--z-index-loader);
 }
 
+.cauldron--theme-dark .Loader__overlay {
+  border: 2px solid var(--white);
+}
+
 .Loader {
   font-size: 10px;
   margin: 50px auto;
   width: 7em;
   height: 7em;
   border-radius: 50%;
-  background: #666;
-  background: linear-gradient(to right, #666 10%, rgba(255, 255, 255, 0) 42%);
+  background: var(--gray-60);
+  background: linear-gradient(
+    to right,
+    var(--gray-60) 10%,
+    rgba(255, 255, 255, 0) 42%
+  );
   transform: translateZ(0);
   position: relative;
   animation: load 1.4s linear infinite;
@@ -2548,7 +2690,7 @@ button.TooltipTabstop {
 .Loader:before {
   width: 50%;
   height: 50%;
-  background: #666;
+  background: var(--gray-60);
   border-radius: 100% 0 0 0;
   position: absolute;
   top: 0;
@@ -2570,6 +2712,18 @@ button.TooltipTabstop {
   right: 0;
 }
 
+.cauldron--theme-dark .Loader {
+  background: linear-gradient(
+    to right,
+    var(--white) 10%,
+    var(--workspace-background-color) 45%
+  );
+}
+
+.cauldron--theme-dark .Loader:before {
+  background: var(--white);
+}
+
 @keyframes load {
   0% {
     transform: rotate(0deg);
@@ -2593,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;
 }
 
@@ -2607,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 {
@@ -2640,7 +2784,7 @@ button.TooltipTabstop {
 }
 
 .Code .hljs-string {
-  color: #8abeb7;
+  color: var(--gray-60);
 }
 
 .Code .hljs-doctag {
@@ -2651,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;
 }
@@ -2689,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 {
@@ -2993,3 +3142,89 @@ button.TooltipTabstop {
   background: var(--accent-dark);
   color: var(--white);
 }
+
+/* Dark Theme */
+
+.cauldron--theme-dark .Stepper {
+  color: var(--accent-light);
+  background-color: var(--accent-dark);
+}
+
+.cauldron--theme-dark .Stepper__step-line {
+  border-top: var(--step-line-height) solid var(--accent-medium);
+}
+
+.cauldron--theme-dark .Stepper__step-indicator {
+  color: var(--white);
+  background: var(--accent-medium);
+}
+
+.cauldron--theme-dark .Stepper__step--current .Stepper__step-indicator {
+  background: var(--white);
+  color: var(--accent-dark);
+  box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-info);
+}
+
+.cauldron--theme-dark .Stepper__step--current .Stepper__step-line,
+.cauldron--theme-dark .Stepper__step--complete .Stepper__step-line {
+  border-color: var(--accent-info);
+}
+
+.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator {
+  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": "1.0.0-canary.f7873643",
+  "version": "2.0.0-canary.4fab7c98",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",