@deque/cauldron-styles 5.8.1-canary.02667e00 → 5.8.1-canary.033b4e81

package/dist/index.css

@@ -136,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 {
@@ -359,6 +365,7 @@ p {
   padding-top: 0;
   display: flex;
   justify-content: center;
+  background-color: transparent;
 }
 
 .Alert__warning .Dialog__heading:focus {
@@ -873,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 {
@@ -907,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 {
@@ -916,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);
 }
 
@@ -925,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 {
@@ -948,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 {
@@ -971,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);
 }
 
 /**
@@ -981,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 {
@@ -1010,6 +1027,7 @@ a.IconButton {
 .Modal--info .Dialog__footer {
   display: flex;
   justify-content: center;
+  background-color: transparent;
   border-top: none;
   padding-top: 0;
 }
@@ -1023,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,
@@ -1040,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 {
@@ -1426,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;
 }
@@ -3533,6 +3560,23 @@ 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);
@@ -4809,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;
   }
@@ -5189,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.02667e00",
+  "version": "5.8.1-canary.033b4e81",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",