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

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,59 @@ 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;
+}
+
+.cauldron--theme-dark .IconButton--secondary {
+  color: var(--white);
+}
+
+.cauldron--theme-dark .IconButton--error {
+  background-color: var(--accent-danger);
+}
+
+.cauldron--theme-dark .IconButton--primary:active {
+  background-color: #e5ebec;
 }
 
-.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:active {
+  background-color: var(--accent-dark);
 }
 
-.IconButton--dark:active {
-  background-color: var(--icon-button-background-color-dark-active);
+.cauldron--theme-dark
+  .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--accent-light);
+}
+
+.cauldron--theme-dark
+  .IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--white);
 }
 
 :root {
@@ -910,6 +929,52 @@ button.Link {
   border-top: none;
 }
 
+/* Dark Theme */
+
+.cauldron--theme-dark .Dialog__inner {
+  background-color: var(--accent-medium);
+  color: var(--white);
+  border: 1px solid var(--gray-70);
+}
+
+.cauldron--theme-dark .Dialog__header {
+  border-bottom: 1px solid var(--gray-70);
+}
+
+.cauldron--theme-dark .Dialog__footer {
+  border-top: 1px solid var(--gray-70);
+}
+
+.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 +1539,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 +1670,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 +1931,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;
@@ -1882,11 +1968,11 @@ p .Link {
 }
 
 .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);
 }
 
 .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 +1987,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 +2001,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 +2010,32 @@ 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);
+}
+
+.cauldron--theme-dark .SideBar li:not([aria-controls]).MenuItem--active a {
+  color: var(--white);
+  font-weight: var(--font-weight-medium);
+}
+
 :root {
   --tile-background-color: var(--white);
   --list-separator: rgba(153, 153, 153, 0.15);
@@ -2263,8 +2377,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,9 +2387,6 @@ 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);
@@ -2322,7 +2431,7 @@ button.TooltipTabstop {
   height: var(--top-bar-height-thin);
 }
 
-.TopBar--light > ul > .TopBar__menu-trigger {
+.TopBar > ul > .TopBar__menu-trigger {
   border-bottom: solid 1px var(--top-bar-border-bottom-color-light);
 }
 
@@ -2338,12 +2447,7 @@ 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);
 }
 
@@ -2357,12 +2461,8 @@ button.TooltipTabstop {
 }
 
 .TopBar a {
-  color: var(--top-bar-text-color);
-  text-decoration: none;
-}
-
-.TopBar--light a {
   color: var(--top-bar-text-color-light);
+  text-decoration: none;
 }
 
 .TopBar .MenuItem--align-right {
@@ -2371,11 +2471,6 @@ button.TooltipTabstop {
 
 .TopBar li.MenuItem--active,
 .TopBar [aria-current='page'] {
-  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);
 }
 
@@ -2387,15 +2482,10 @@ 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);
 }
@@ -2411,11 +2501,42 @@ button.TooltipTabstop {
 }
 
 .MenuItem--separator {
+  border-left: 1px solid var(--top-bar-menuitem-separator-light);
+}
+
+/* Dark Theme */
+
+.cauldron--theme-dark .TopBar {
+  background-color: var(--top-bar-background-color);
+  color: var(--top-bar-text-color);
+  border-bottom: solid 1px var(--gray-70);
+}
+
+.cauldron--theme-dark .MenuItem--separator {
   border-left: 1px solid var(--top-bar-menuitem-separator);
 }
 
-.TopBar--light .MenuItem--separator {
-  border-left: 1px solid var(--top-bar-menuitem-separator-light);
+.cauldron--theme-dark .TopBar__menu-trigger {
+  background-color: var(--top-bar-background-color);
+  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);
+}
+
+.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 +2635,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 +2653,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 +2677,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 +2699,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);
@@ -2993,3 +3134,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.f18f47cf",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",