@deque/cauldron-styles 5.8.1-canary.faf22037 → 5.9.0-canary.07ef06bd

package/dist/index.css

@@ -14,6 +14,7 @@
   --gray-20: #f2f2f2;
   --gray-30: #e0e0e0;
   --gray-40: #cccccc;
+  --gray-50: #757575;
   --gray-60: #666666;
   --gray-80: #4d4d4d;
   --gray-90: #333333;
@@ -135,6 +136,12 @@
   /* radio card */
   --radio-card-width: 255px;
   --radio-card-height: 229px;
+
+  /* target size */
+  /* Note: target-size is deprecated, use --target-size-enhanced or --target-size-minimum */
+  --target-size: 44px;
+  --target-size-enhanced: var(--target-size);
+  --target-size-minimum: 24px;
 }
 
 .cauldron--theme-dark {
@@ -358,6 +365,7 @@ p {
   padding-top: 0;
   display: flex;
   justify-content: center;
+  background-color: transparent;
 }
 
 .Alert__warning .Dialog__heading:focus {
@@ -872,12 +880,18 @@ a.IconButton {
 }
 
 :root {
-  --dialog-background-color: var(--white);
-  --dialog-border-color: #ccc;
-  --dialog-header-background-color: var(--button-background-color-secondary);
+  --dialog-background-color: #fff;
+  --dialog-border-color: var(--gray-40);
+  --dialog-header-background-color: var(--gray-20);
+  --dialog-footer-background-color: var(--gray-20);
+  --dialog-heading-text-color: var(--header-text-color-dark);
   --dialog-padding: var(--space-small);
-  --dialog-header-height: 42px;
-  --target-size: 44px;
+  --dialog-header-height: 2.625rem;
+  --dialog-close-button-size: var(--target-size-minimum);
+}
+
+.cauldron--theme-dark {
+  --dialog-heading-text-color: #fff;
 }
 
 .Dialog {
@@ -906,7 +920,7 @@ a.IconButton {
   border: 1px solid var(--dialog-border-color);
   z-index: var(--z-index-dialog);
   position: relative;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .Dialog__header {
@@ -915,8 +929,7 @@ a.IconButton {
   border-bottom: 1px solid var(--dialog-border-color);
   align-items: center;
   justify-content: space-between;
-  height: var(--dialog-header-height);
-  text-transform: uppercase;
+  min-height: var(--dialog-header-height);
   font-weight: var(--font-weight-bold);
 }
 
@@ -924,20 +937,6 @@ a.IconButton {
 .Dialog__close {
   margin: 0;
   font-size: var(--text-size-small);
-  height: calc(var(--dialog-header-height) - 8px);
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-}
-
-.Dialog__heading:focus,
-.Dialog__close:focus,
-.Dialog__close:hover {
-  border-bottom-color: var(--text-color-base);
-  outline: none;
-}
-
-.Dialog__close:focus {
-  border-top: 4px solid transparent;
 }
 
 .Dialog__heading {
@@ -947,14 +946,50 @@ a.IconButton {
 }
 
 .Dialog__close {
-  color: var(--text-color-base);
-  width: var(--dialog-header-height);
+  color: var(--dialog-heading-text-color);
   background-color: initial;
+  border: 1px solid var(--dialog-border-color);
+  border-radius: 3px;
+  padding: 0;
+  height: var(--dialog-close-button-size);
+  width: var(--dialog-close-button-size);
+  margin-right: var(--space-smallest);
+  position: relative;
+}
+
+.Dialog__close:active {
+  background-color: var(--dialog-border-color);
+}
+
+.Dialog__close:before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.cauldron--theme-dark .Dialog__close:before {
+  top: -3px;
+  right: -3px;
+  bottom: -3px;
+  left: -3px;
+}
+
+.Dialog__close:is(:hover, :focus):before {
+  box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
 }
 
 .Dialog__close svg {
-  height: var(--icon-size);
-  width: var(--icon-size);
+  height: 100%;
+  width: 100%;
+}
+
+.cauldron--theme-dark .Dialog__close {
+  border-width: 2px;
 }
 
 .Dialog__content {
@@ -970,9 +1005,9 @@ a.IconButton {
 }
 
 .Dialog__footer {
-  background-color: #fff;
+  background-color: var(--dialog-footer-background-color);
   border-top: 1px solid var(--dialog-border-color);
-  padding: calc(var(--space-small) - 4px) var(--dialog-padding);
+  padding: var(--dialog-padding);
 }
 
 /**
@@ -980,24 +1015,7 @@ a.IconButton {
 */
 
 .Modal--info .Dialog__header {
-  border: none;
   background-color: transparent;
-  height: auto;
-  align-items: flex-start;
-}
-
-.Modal--info .Dialog__close {
-  padding: var(--space-three-quarters);
-  height: var(--target-size);
-  width: var(--target-size);
-}
-
-.Modal--info .Dialog__heading {
-  flex: 1;
-  justify-content: center;
-  height: auto;
-  padding-top: var(--space-large);
-  margin-left: var(--target-size);
 }
 
 .Modal--info .Dialog__content {
@@ -1009,6 +1027,7 @@ a.IconButton {
 .Modal--info .Dialog__footer {
   display: flex;
   justify-content: center;
+  background-color: transparent;
   border-top: none;
   padding-top: 0;
 }
@@ -1022,11 +1041,11 @@ a.IconButton {
 }
 
 .cauldron--theme-dark .Dialog__header {
-  border-bottom: 1px solid #5d676f;
+  border-bottom: 1px solid var(--stroke-dark);
 }
 
 .cauldron--theme-dark .Dialog__footer {
-  border-top: 1px solid #5d676f;
+  border-top: 1px solid var(--stroke-dark);
 }
 
 .cauldron--theme-dark .Dialog__header,
@@ -1039,20 +1058,14 @@ a.IconButton {
   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 .Dialog__close:active {
+  color: var(--accent-medium);
 }
 
 .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;
+  background-color: transparent;
 }
 
 .cauldron--theme-dark .Modal--info .Dialog__footer {
@@ -1425,6 +1438,21 @@ a.IconButton {
   font-weight: var(--font-weight-ultra-bold);
 }
 
+.text--align-left {
+  text-align: left !important;
+  justify-content: left !important;
+}
+
+.text--align-center {
+  text-align: center !important;
+  justify-content: center !important;
+}
+
+.text--align-right {
+  text-align: right !important;
+  justify-content: right !important;
+}
+
 body .is--hidden {
   display: none;
 }
@@ -1467,7 +1495,8 @@ ul.semantic-only {
   --field-icon-focus-color: var(--focus-light);
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
-  --field-listbox-selected-background-color: var(--accent-secondary-active);
+  --field-listbox-selected-background-color: var(--gray-50);
+  --field-listbox-selected-text-color: #fff;
   --field-font-size: var(--text-size-small);
   --input-min-width: 250px;
   --checkbox-size: var(--icon-size);
@@ -1497,7 +1526,8 @@ ul.semantic-only {
   --field-icon-focus-color: var(--focus-dark);
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
-  --field-listbox-selected-background-color: var(--accent-dark);
+  --field-listbox-selected-background-color: var(--accent-light);
+  --field-listbox-selected-text-color: var(--accent-medium);
 }
 
 input,
@@ -1634,6 +1664,7 @@ textarea.Field--has-error:focus:hover,
 [role='listbox']
   li[role='option']:is([aria-selected='true'], [aria-checked='true']) {
   background-color: var(--field-listbox-selected-background-color);
+  color: var(--field-listbox-selected-text-color);
 }
 
 .Error {
@@ -3529,12 +3560,30 @@ button.TooltipTabstop {
   font-weight: var(--font-weight-normal);
 }
 
+:root {
+  --tag-button-icon-size: 15px;
+}
+
+.TagButton {
+  vertical-align: middle;
+}
+
+.TagButton__icon {
+  margin-left: var(--space-half);
+}
+
+.TagButton__icon svg {
+  width: var(--tag-button-icon-size);
+  height: var(--tag-button-icon-size);
+}
+
 :root {
   --table-header-text-color: var(--gray-90);
   --table-header-background-color: var(--gray-20);
   --table-header-sorting-background-color: #caddec;
-  --table-header-sorting-text-color: var(--gray-90);
   --table-header-background-color-hover: #dddddd;
+  /* --table-header-sorting-text-color will be deprecated */
+  --table-header-sorting-text-color: var(--gray-90);
   --table-cell-text-color: var(--gray-60);
   --table-cell-background-color: var(--white);
   --table-row-border-color: var(--gray-40);
@@ -3546,8 +3595,9 @@ button.TooltipTabstop {
 .cauldron--theme-dark {
   --table-header-text-color: var(--white);
   --table-header-background-color: var(--accent-dark);
-  --table-header-sorting-background-color: #53636e;
+  /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--white);
+  --table-header-sorting-background-color: #53636e;
   --table-header-background-color-hover: #53636e;
   --table-cell-text-color: var(--accent-light);
   --table-cell-background-color: var(--accent-medium);
@@ -3603,6 +3653,8 @@ button.TooltipTabstop {
   border-bottom: 3px solid var(--table-header-sorting-border-color);
 }
 
+/* These styles are not applying and will be deprecated */
+
 .TableHeader--sort-ascending .TableHeader__sort-button,
 .TableHeader--sort-decscending .TableHeader__sort-button {
   color: var(--table-header-sorting-text-color);
@@ -4801,7 +4853,12 @@ fieldset.Panel {
 
   .TwoColumnPanel--hide .TwoColumnPanel__Left,
   .TwoColumnPanel--show .TwoColumnPanel__Left {
-    margin-left: calc(var(--two-column-panel-left-column-width) * -1);
+    max-width: 100%;
+    /* This will constrain the component to the max-width of its container, as well as adjusting the offset margin to the max negative value to prevent incorrect offset when the max-width is less than the column width. */
+    margin-left: max(
+      calc(var(--two-column-panel-left-column-width) * -1),
+      calc(100% * -1)
+    );
     animation: none;
     opacity: 1;
   }
@@ -4947,7 +5004,7 @@ button.Accordion__trigger {
 .Notice .Notice__title,
 .Notice .Notice__title > :is(h1, h2, h3, h4, h5, h6) {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   font-size: var(--text-size-small);
   font-weight: var(--notice-title-font-weight);
   margin: 0;
@@ -5181,6 +5238,7 @@ button.Accordion__trigger {
 }
 
 .ComboboxOption {
+  --field-listbox-selected-text-color: var(--combobox-option-font-color);
   color: var(--combobox-option-font-color);
   padding: var(--space-smallest);
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.8.1-canary.faf22037",
+  "version": "5.9.0-canary.07ef06bd",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",