@deque/cauldron-styles 6.0.0-canary.f84823fa → 6.1.0-canary.e8a7f45e

package/dist/index.css

@@ -423,6 +423,8 @@ p {
   --button-text-color-light: var(--white);
   --button-focus-ring-color: var(--focus-light);
   --button-thin-height: 23px;
+
+  --button-height: 36px;
 }
 
 .Button--primary,
@@ -436,7 +438,7 @@ p {
   padding: 0 16px;
   position: relative;
   text-align: center;
-  min-height: 36px;
+  min-height: var(--button-height);
   min-width: 100px;
   display: inline-grid;
   grid-auto-flow: column;
@@ -512,7 +514,7 @@ button.Link {
   background-color: var(--button-background-color-primary-disabled);
 }
 
-.Button--primary:active {
+.Button--primary:not([disabled]):not([aria-disabled='true']):active {
   background: var(--button-background-color-primary-active);
 }
 
@@ -528,7 +530,7 @@ button.Link {
   background-color: var(--button-background-color-secondary-disabled);
 }
 
-.Button--secondary:active {
+.Button--secondary:not([disabled]):not([aria-disabled='true']):active {
   background-color: var(--button-background-color-secondary-active);
 }
 
@@ -545,7 +547,7 @@ button.Link {
   background-color: var(--button-background-color-error-disabled);
 }
 
-.Button--error:active {
+.Button--error:not([disabled]):not([aria-disabled='true']):active {
   background-color: var(--button-background-color-error-active);
 }
 
@@ -642,12 +644,15 @@ button.Link {
   color: var(--dark-workspace-color);
 }
 
-.cauldron--theme-dark .Button--primary:active,
-.cauldron--theme-dark .Button--secondary:active {
+.cauldron--theme-dark
+  .Button--primary:not([disabled]):not([aria-disabled='true']):active,
+.cauldron--theme-dark
+  .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
   color: var(--accent-medium);
 }
 
-.cauldron--theme-dark .Button--error:active {
+.cauldron--theme-dark
+  .Button--error:not([disabled]):not([aria-disabled='true']):active {
   background-color: #fea7a6;
   color: var(--accent-medium);
 }
@@ -685,38 +690,37 @@ button.Link {
 }
 
 :root {
+  /* Primary */
+  --icon-button-primary-color: var(--button-text-color-light);
   --icon-button-background-color-primary: var(
     --button-background-color-primary
   );
-  --icon-button-background-color-primary-disabled: var(
-    --button-background-color-primary-disabled
-  );
   --icon-button-background-color-primary-active: var(
     --button-background-color-primary-active
   );
   --icon-button-outline-color-primary: var(--button-outline-color-primary);
 
+  --icon-button-large-height: var(--button-height);
+
+  /* Secondary */
+  --icon-button-secondary-color: var(--button-text-color-dark);
   --icon-button-background-color-secondary: var(
     --button-background-color-secondary
   );
-  --icon-button-background-color-secondary-disabled: var(
-    --button-background-color-secondary-disabled
-  );
   --icon-button-background-color-secondary-active: var(
     --button-background-color-secondary-active
   );
   --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
   --icon-button-border-color-secondary: var(--gray-40);
 
+  /* Error */
   --icon-button-background-color-error: var(--button-background-color-error);
-  --icon-button-background-color-error-disabled: var(
-    --button-background-color-error-disabled
-  );
+  --icon-button-outline-color-error: var(--button-outline-color-error);
   --icon-button-background-color-error-active: var(
     --button-background-color-error-active
   );
-  --icon-button-outline-color-error: var(--button-outline-color-error);
 
+  /* Deprecated variables */
   --icon-button-content-color-light-disabled: #ccc;
   --icon-button-background-color-light: #dadada;
   --icon-button-background-color-light-active: #c2c2c2;
@@ -727,6 +731,12 @@ button.Link {
   --icon-button-background-color-dark-disabled: var(--accent-medium);
   --icon-button-background-color-dark-active: var(--accent-dark);
   --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
+  --icon-button-background-color-secondary-disabled: var(
+    --button-background-color-secondary-disabled
+  );
+  --icon-button-background-color-error-disabled: var(
+    --button-background-color-error-disabled
+  );
 }
 
 .IconButton {
@@ -778,21 +788,26 @@ a.IconButton {
   pointer-events: none;
 }
 
-.IconButton--secondary[aria-disabled='true'],
-.IconButton--secondary[disabled] {
+.IconButton--large {
+  height: var(--icon-button-large-height);
+  width: var(--icon-button-large-height);
+}
+
+.IconButton--secondary:is([aria-disabled='true'], [disabled]),
+.IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
   color: var(--disabled);
   background-color: var(--button-background-color-secondary-disabled);
   cursor: default;
 }
 
-.IconButton--primary[aria-disabled='true'],
-.IconButton--primary[disabled] {
+.IconButton--primary:is([aria-disabled='true'], [disabled]),
+.IconButton--primary:is([aria-disabled='true'], [disabled]):active {
   background-color: var(--button-background-color-primary-disabled);
   cursor: default;
 }
 
-.IconButton--error[aria-disabled='true'],
-.IconButton--error[disabled] {
+.IconButton--error:is([aria-disabled='true'], [disabled]),
+.IconButton--error:is([aria-disabled='true'], [disabled]):active {
   color: var(--button-text-color-light);
   background-color: var(--button-background-color-error-disabled);
   cursor: default;
@@ -804,7 +819,7 @@ a.IconButton {
 
 .IconButton--primary {
   background-color: var(--icon-button-background-color-primary);
-  color: var(--button-text-color-light);
+  color: var(--icon-button-primary-color);
 }
 
 .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
@@ -818,10 +833,12 @@ a.IconButton {
 .IconButton--secondary {
   border: 1px solid var(--icon-button-border-color-secondary);
   background-color: var(--icon-button-background-color-secondary);
-  color: var(--button-text-color-dark);
+  color: var(--icon-button-secondary-color);
 }
 
-.IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
+.IconButton--secondary:not([disabled]):not(
+    [aria-disabled='true']
+  ):hover:before {
   box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
 }
 
@@ -845,57 +862,91 @@ a.IconButton {
 /* 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);
-}
-
-.cauldron--theme-dark .IconButton--error {
-  background-color: var(--accent-dark);
-  color: var(--white);
+  --icon-button-outline-shadow-color: var(--accent-medium);
+  --icon-button-disabled-color: var(--dark-workspace-color);
+  --icon-button-active-color: var(--accent-medium);
+
+  /* Primary */
+  --icon-button-primary-color: var(--white);
+  --icon-button-background-color-primary: var(--accent-medium);
+  --icon-button-background-color-primary-active: var(--accent-info-active);
+  --icon-button-outline-color-primary: var(--accent-info);
+  --icon-button-border-color-primary: var(--accent-info);
+
+  /* Secondary */
+  --icon-button-border-color-secondary: var(--accent-light);
+  --icon-button-background-color-secondary: var(--accent-medium);
+  --icon-button-secondary-color: var(--white);
+  --icon-button-background-color-secondary-active: var(--accent-light);
+  --icon-button-outline-color-secondary: var(--accent-light);
+
+  /* Error */
+  --icon-button-background-color-error: var(--accent-medium);
+  --icon-button-border-color-error: var(--accent-danger);
+  --icon-button-outline-color-error: var(--accent-danger);
+  --icon-button-background-color-error-active: var(
+    --button-background-color-error-active
+  );
 }
 
 .cauldron--theme-dark .IconButton--primary {
-  color: var(--gray-90);
+  border: 2px solid var(--icon-button-border-color-primary);
 }
 
-.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 {
+  border-width: 2px;
 }
 
-.cauldron--theme-dark .IconButton--secondary[aria-disabled='true'],
-.cauldron--theme-dark .IconButton--secondary[disabled] {
-  color: #5d676f;
+.cauldron--theme-dark .IconButton--error {
+  border: 2px solid var(--icon-button-border-color-error);
 }
 
-.cauldron--theme-dark .IconButton--secondary {
-  color: var(--white);
+.cauldron--theme-dark
+  .IconButton--primary:is([aria-disabled='true'], [disabled]),
+.cauldron--theme-dark
+  .IconButton--secondary:is([aria-disabled='true'], [disabled]),
+.cauldron--theme-dark
+  .IconButton--error:is([aria-disabled='true'], [disabled]) {
+  color: var(--icon-button-disabled-color);
 }
 
-.cauldron--theme-dark .IconButton--error {
-  background-color: var(--accent-danger);
-  color: var(--accent-dark);
+.cauldron--theme-dark .IconButton--primary:active,
+.cauldron--theme-dark .IconButton--secondary:active,
+.cauldron--theme-dark .IconButton--error:active {
+  color: var(--icon-button-active-color);
 }
 
-.cauldron--theme-dark .IconButton--primary:active {
-  background-color: #e5ebec;
+.cauldron--theme-dark
+  .IconButton:is([aria-disabled='true'], [disabled]):active {
+  color: var(--icon-button-disabled-color);
 }
 
-.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(--icon-button-outline-shadow-color),
+    0 0 0 2px var(--icon-button-outline-color-primary);
 }
 
 .cauldron--theme-dark
-  .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--accent-light);
+  .IconButton--secondary:not([disabled]):not(
+    [aria-disabled='true']
+  ):hover:before {
+  box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
+    0 0 0 2px var(--icon-button-outline-color-secondary);
 }
 
 .cauldron--theme-dark
-  .IconButton--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--white);
+  .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
+  box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
+    0 0 0 2px var(--icon-button-outline-color-error);
+}
+
+.cauldron--theme-dark .IconButton:focus:before {
+  box-shadow: 0 0 0 2px var(--icon-button-outline-shadow-color),
+    0 0 0 4px var(--button-focus-ring-color, --focus);
 }
 
 :root {
@@ -1228,6 +1279,7 @@ ul.semantic-only {
 .cauldron--theme-dark {
   --field-background-color: var(--accent-medium);
   --field-content-color: var(--white);
+  --field-border-color: #74818b;
   --field-border-color-hover: var(--accent-info-light);
   --field-border-color-focus: var(--accent-info);
   --field-border-color-focus-hover: var(--accent-info-light);
@@ -1289,7 +1341,7 @@ textarea:focus,
 [role='spinbutton']:focus {
   outline: 0;
   border: 1px solid var(--field-border-color-focus);
-  box-shadow: 0 0 0 2px var(--field-border-color-focus),
+  box-shadow: 0 0 0 1px var(--field-border-color-focus),
     0 0 5px var(--field-border-color-focus-glow),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -1314,6 +1366,9 @@ textarea:focus:hover,
 [role='listbox']:focus:hover,
 [role='spinbutton']:focus:hover {
   border: 1px solid var(--field-border-color-focus-hover);
+  box-shadow: 0 0 0 1px var(--field-border-color-focus-hover),
+    0 0 5px var(--field-border-color-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 input.Field--has-error,
@@ -1325,6 +1380,8 @@ textarea.Field--has-error,
 [role='listbox'].Field--has-error,
 [role='spinbutton'].Field--has-error {
   border: 1px solid var(--field-border-color-error);
+  box-shadow: 0 0 0 1px var(--field-border-color-error),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .Checkbox__overlay.Field--has-error {
@@ -1357,9 +1414,9 @@ textarea.Field--has-error:focus,
 [role='listbox'].Field--has-error:focus,
 [role='spinbutton'].Field--has-error:focus {
   border: 1px solid var(--field-border-color-error);
-  box-shadow: 0 0 0 1px var(--field-border-color-error-hover),
-    inset 0 2px 3px 0 rgba(0, 0, 0, 0.05),
-    0 0 5px 0 var(--field-border-color-error-focus-glow);
+  box-shadow: 0 0 0 1px var(--field-border-color-error),
+    0 0 5px var(--field-border-color-error-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 input.Field--has-error:focus:hover,
@@ -3510,15 +3567,62 @@ button.TooltipTabstop {
   }
 }
 
-.Stepper {
-  --step-indicator-size: 2em;
-  --step-line-height: 0.53em;
-  --step-line-offset: 1.33em;
+:root {
+  --step-indicator-size: 1.75rem;
+  --step-line-height: 0.5rem;
+  --step-line-offset: 1.438rem;
+
+  --step-indicator-content-size: 1rem;
+
+  --step-label-color: var(--gray-60);
+  --step-line-color: var(--accent-light);
+  --step-indicator-background: var(--accent-light);
+  --step-indicator-color: var(--gray-90);
+
+  --step-current-indicator-background: #fff;
+  --step-current-indicator-color: var(--accent-dark);
+  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark);
+  --step-current-complete-line-border-color: var(--accent-dark);
+
+  --step-complete-indicator-background: var(--accent-dark);
+  --step-complete-indicator-color: #fff;
+
+  --step-current-label-color: var(--gray-90);
+  --step-complete-indicator-svg-color: var(--accent-success);
+
+  --stepper-color: var(--gray-90);
+}
+
+/* Dark theme variables */
+
+.cauldron--theme-dark {
+  --step-label-color: var(--accent-light);
+  --step-line-color: var(--accent-medium);
+  --step-indicator-color: #fff;
+  --step-indicator-background: var(--accent-medium);
+
+  --step-current-indicator-background: #fff;
+  --step-current-indicator-color: var(--accent-dark);
+  --step-current-indicator-shadow: 0 0 0 2px var(--accent-dark),
+    0 0 0 4px var(--accent-info);
+  --step-current-complete-line-border-color: var(--accent-info);
 
+  --step-complete-indicator-background: var(--accent-info);
+  --step-complete-indicator-color: var(--accent-dark);
+
+  --step-current-label-color: #fff;
+  --step-complete-indicator-svg-color: #000;
+
+  --stepper-color: var(--accent-light);
+  --stepper-background-color: var(--accent-dark);
+}
+
+.Stepper {
   display: flex;
   padding: var(--space-medium);
   align-items: flex-start;
-  color: var(--gray-90);
+  color: var(--stepper-color);
+  background-color: var(--stepper-background-color);
   counter-reset: stepper;
   list-style-type: none;
   margin: 0 auto;
@@ -3536,7 +3640,7 @@ button.TooltipTabstop {
   left: calc(-50% + var(--step-line-offset));
   right: calc(50% + var(--step-line-offset));
   flex: 1 1 auto;
-  border-top: var(--step-line-height) solid var(--accent-light);
+  border-top: var(--step-line-height) solid var(--step-line-color);
 }
 
 .Stepper__step:first-child .Stepper__step-line {
@@ -3553,16 +3657,16 @@ button.TooltipTabstop {
   width: var(--step-indicator-size);
   height: var(--step-indicator-size);
   border-radius: 50%;
-  background: var(--accent-light);
-  color: var(--gray-90);
+  background: var(--step-indicator-background);
+  color: var(--step-indicator-color);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.Stepper__step-indicator::before {
-  font-size: var(--text-size-smallest);
+.Stepper__step-indicator:before {
+  font-size: var(--text-size-small);
   counter-increment: stepper;
   content: counter(stepper);
 }
@@ -3572,62 +3676,46 @@ button.TooltipTabstop {
   width: 100%;
   padding-top: var(--space-smallest);
   font-size: var(--text-size-smaller);
+  color: var(--step-label-color);
 }
 
 /*
   status-specific styles
 */
 
-.Stepper__step--current .Stepper__step-indicator {
-  background: var(--white);
-  color: var(--accent-dark);
-  box-shadow: 0 0 0 2px var(--accent-dark);
+.Stepper__step--current-indicator {
+  background: var(--step-current-indicator-background);
+  color: var(--step-current-indicator-color);
+  box-shadow: var(--step-current-indicator-shadow);
 }
 
-.Stepper__step--current .Stepper__step-label {
-  font-weight: var(--font-weight-bold);
-}
-
-.Stepper__step--current .Stepper__step-line,
-.Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-dark);
-}
-
-.Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-dark);
-  color: var(--white);
-}
-
-/* Dark Theme */
-
-.cauldron--theme-dark .Stepper {
-  color: var(--accent-light);
-  background-color: var(--accent-dark);
+.Stepper__step--current-indicator:before {
+  font-weight: var(--font-weight-medium);
 }
 
-.cauldron--theme-dark .Stepper__step-line {
-  border-top: var(--step-line-height) solid var(--accent-medium);
+.Stepper__step--current-label {
+  font-weight: var(--font-weight-medium);
+  color: var(--step-current-label-color);
 }
 
-.cauldron--theme-dark .Stepper__step-indicator {
-  color: var(--white);
-  background: var(--accent-medium);
+.Stepper__step--current-line,
+.Stepper__step--complete-line {
+  border-color: var(--step-current-complete-line-border-color);
 }
 
-.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);
+.Stepper__step--complete-indicator {
+  background: var(--step-complete-indicator-background);
+  color: var(--step-complete-indicator-color);
 }
 
-.cauldron--theme-dark .Stepper__step--current .Stepper__step-line,
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-line {
-  border-color: var(--accent-info);
+.Stepper__step--complete-indicator:before {
+  content: '';
 }
 
-.cauldron--theme-dark .Stepper__step--complete .Stepper__step-indicator {
-  background: var(--accent-info);
-  color: var(--accent-dark);
+.Stepper__step--complete-indicator svg {
+  height: var(--step-indicator-content-size);
+  width: var(--step-indicator-content-size);
+  color: var(--step-complete-indicator-svg-color);
 }
 
 :root {
@@ -4752,8 +4840,11 @@ button.Accordion__trigger {
   border: 1px solid var(--combobox-input-border-color);
 }
 
-.Combobox__input:hover,
-.cauldron--theme-dark .Combobox__input:hover {
+.cauldron--theme-dark .Combobox__input--error {
+  border: 1px solid var(--combobox-input-error-border-color);
+}
+
+.Combobox__input:hover {
   border-color: var(--combobox-input-border-hover-color);
 }
 
@@ -4765,7 +4856,7 @@ button.Accordion__trigger {
 
 .Combobox__input:focus-within {
   border: 1px solid var(--combobox-input-border-focus-color);
-  box-shadow: 0 0 0 2px var(--combobox-input-border-focus-color),
+  box-shadow: 0 0 0 1px var(--combobox-input-border-focus-color),
     0 0 5px var(--combobox-input-border-focus-glow-color),
     inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -4908,13 +4999,28 @@ button.Accordion__trigger {
 
 .Combobox__input--error {
   border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .Combobox__input--error:focus-within {
   border: 1px solid var(--combobox-input-error-border-color);
-  box-shadow: 0 0 0 1px var(--combobox-input-error-focus-border-color),
-    inset 0 2px 3px 0 rgba(0, 0, 0, 0.05),
-    0 0 5px 0 var(--combobox-input-error-focus-border-glow-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    0 0 5px var(--field-border-color-error-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Combobox__input--error:focus-within:hover {
+  border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    0 0 5px var(--field-border-color-error-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Combobox__input--error:hover {
+  border: 1px solid var(--combobox-input-error-border-color);
+  box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .ComboboxListbox__empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.0.0-canary.f84823fa",
+  "version": "6.1.0-canary.e8a7f45e",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",