@deque/cauldron-styles 6.8.0 → 6.9.0-canary.1dd3478a

package/dist/index.css

@@ -484,6 +484,7 @@ ul.semantic-only {
   --field-border-color-error-hover: #c42f41;
   --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
   --field-border-color-disabled: rgba(204, 204, 204, 0.25);
+  --field-border-radius: 4px;
   --field-background-color-disabled: var(--light-workspace-color);
   --field-placeholder-color: var(--gray-50);
   --field-required-text-color: var(--gray-60);
@@ -511,7 +512,7 @@ ul.semantic-only {
   --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-hover: var(--accent-light);
   --field-border-color-focus: var(--accent-info);
   --field-border-color-focus-hover: var(--accent-info-light);
   --field-border-color-focus-glow: var(--accent-info);
@@ -546,7 +547,6 @@ textarea,
 [role='spinbutton'] {
   width: 100%;
   border: 1px solid var(--field-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--field-background-color);
@@ -820,6 +820,7 @@ textarea.Field--has-error:focus:hover,
   font-size: var(--field-font-size);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
+  border-radius: var(--field-border-radius);
 }
 
 .Field__text-input[disabled],
@@ -836,6 +837,7 @@ textarea.Field--has-error:focus:hover,
   padding: var(--space-half);
   max-width: 500px;
   color: var(--field-content-color);
+  border-radius: var(--field-border-radius);
 }
 
 .Field__textarea[disabled],
@@ -995,9 +997,7 @@ textarea.Field--has-error:focus:hover,
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
   --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
-  --text-field-wrapper-border-hover-color: var(
-    --field-border-color-focus-hover
-  );
+  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
   --text-field-wrapper-border-focus-glow-color: var(
     --field-border-color-focus-glow
   );
@@ -1016,9 +1016,7 @@ textarea.Field--has-error:focus:hover,
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
   --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
-  --text-field-wrapper-border-hover-color: var(
-    --field-border-color-focus-hover
-  );
+  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
   --text-field-wrapper-border-focus-glow-color: var(
     --field-border-color-focus-glow
   );
@@ -1044,7 +1042,7 @@ textarea.Field--has-error:focus:hover,
   display: flex;
   align-items: center;
   border: 1px solid var(--text-field-wrapper-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
+  border-radius: var(--field-border-radius);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--text-field-wrapper-background-color);
@@ -1064,6 +1062,7 @@ textarea.Field--has-error:focus:hover,
 }
 
 .TextFieldWrapper input {
+  border-radius: var(--field-border-radius);
   font-size: var(--text-field-wrapper-font-size);
   color: var(--text-field-wrapper-font-color);
 }
@@ -1193,6 +1192,7 @@ textarea.Field--has-error:focus:hover,
   --button-background-color-secondary-disabled: var(--gray-30);
   --button-outline-color-secondary: var(--gray-90);
   --button-background-color-secondary-active: var(--gray-30);
+  --button-border-color-secondary: var(--gray-40);
 
   --button-background-color-error: var(--error);
   --button-background-color-error-disabled: #db6379;
@@ -1228,6 +1228,7 @@ textarea.Field--has-error:focus:hover,
   grid-auto-flow: column;
   align-items: center;
   justify-items: center;
+  justify-content: center;
   gap: var(--space-smallest);
 }
 
@@ -1311,7 +1312,7 @@ button.Link {
 .Button--tertiary {
   background-color: var(--button-background-color-secondary);
   color: var(--button-text-color-dark);
-  border: 1px solid var(--field-border-color);
+  border: 1px solid var(--button-border-color-secondary);
 }
 
 .Button--tertiary:is(:not(:hover, :focus), [disabled], [aria-disabled='true']) {
@@ -2235,6 +2236,7 @@ a.IconButton {
   padding: var(--space-three-quarters) var(--space-smallest);
   padding-right: var(--space-large);
   border: 1px solid var(--field-border-color);
+  border-radius: var(--field-border-radius);
   font-family: Roboto;
   font-weight: normal;
   font-style: normal;
@@ -5029,7 +5031,7 @@ button.Accordion__trigger {
 .Notice {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: var(--space-small);
+  gap: 0 var(--space-small);
   padding: var(--space-large);
   align-items: start;
   border-radius: 4px;
@@ -5148,7 +5150,7 @@ button.Accordion__trigger {
   );
   --text-field-wrapper-border-hover-color: var(
     --combobox-input-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --combobox-input-border-focus-glow-color,
@@ -5191,7 +5193,7 @@ button.Accordion__trigger {
   );
   --text-field-wrapper-border-hover-color: var(
     --combobox-input-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --combobox-input-border-focus-glow-color,
@@ -5456,7 +5458,7 @@ button.Accordion__trigger {
   );
   --text-field-wrapper-border-hover-color: var(
     --search-field-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --search-field-border-focus-glow-color,
@@ -5499,7 +5501,7 @@ button.Accordion__trigger {
   );
   --text-field-wrapper-border-hover-color: var(
     --search-field-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --search-field-border-focus-glow-color,
@@ -5536,6 +5538,11 @@ button.Accordion__trigger {
   margin-left: var(--space-smallest);
 }
 
+.SearchField input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .TextEllipsis {
   display: block !important;
   white-space: nowrap;
@@ -5595,7 +5602,7 @@ button.Accordion__trigger {
   font-weight: var(--font-weight-medium);
 }
 
-.Badge .Icon {
+.Badge > .Icon {
   margin: 0 var(--space-half) 0 -4px;
 }
 

package/package.json

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