@deque/cauldron-styles 5.6.1 → 5.6.2-canary.14bfe32d

package/dist/index.css

@@ -34,6 +34,7 @@
   --accent-warning-dark: #b88a00;
   --accent-info: #6cdaf2;
   --accent-info-light: #83e4fa;
+  --accent-info-active: #a7e9f7;
   --accent-primary: #3c7aae;
   --accent-primary-active: #316091;
   --accent-secondary: var(--gray-20);
@@ -1623,11 +1624,14 @@ textarea.Field--has-error:focus:hover,
 
 .Error {
   color: var(--field-error-text-color);
-  border-top: 1px solid var(--field-error-border-color);
   text-align: left;
-  font-weight: var(--font-weight-normal);
   font-size: var(--text-size-smallest);
+  font-weight: var(--font-weight-normal);
+}
+
+.Checkbox__wrap .Error {
   margin-top: var(--space-half);
+  border-top: 1px solid var(--field-error-border-color);
   margin-left: calc(var(--icon-size) + 2px + var(--space-half));
   padding: var(--space-half) 0;
 }
@@ -1748,7 +1752,7 @@ textarea.Field--has-error:focus:hover,
   box-sizing: border-box;
   font-size: var(--text-size-small);
   color: var(--field-content-color);
-  min-width: var(--input-min-width);
+  min-width: min(var(--input-min-width), 100%);
 }
 
 .Field__text-input[disabled],
@@ -1761,7 +1765,7 @@ textarea.Field--has-error:focus:hover,
   display: block;
   min-height: 56px;
   font-size: var(--text-size-small);
-  min-width: var(--input-min-width);
+  min-width: min(var(--input-min-width), 100%);
   padding: var(--space-half);
   max-width: 500px;
   color: var(--field-content-color);
@@ -2533,6 +2537,11 @@ p .Link {
   outline-offset: var(--space-quarter);
 }
 
+.Toast__message button.Link:hover,
+.Notice a.Link:hover {
+  color: var(--accent-medium);
+}
+
 .Toast:focus {
   outline: 0;
 }
@@ -4732,3 +4741,90 @@ button.Accordion__trigger {
   border-radius: 0 0 3px 3px;
   box-shadow: 0 2px 3px 0 var(--accordion-box-shadow-color);
 }
+
+:root {
+  --notice-info-color: var(--accent-info-active);
+  --notice-caution-color: var(--accent-caution);
+  --notice-danger-color: var(--accent-warning-light);
+  --notice-text-color: var(--accent-dark);
+  --notice-title-text-color: var(--accent-dark);
+  --notice-title-font-weight: var(--font-weight-medium);
+  --notice-background-color: var(--notice-info-color);
+  --notice-border-color: var(--accent-dark);
+  --notice-link-hover-color: var(--accent-medium);
+  --notice-icon-size: 1.2em;
+}
+
+.Notice--info {
+  --notice-background-color: var(--notice-info-color);
+}
+
+.Notice--caution {
+  --notice-background-color: var(--notice-caution-color);
+}
+
+.Notice--danger {
+  --notice-background-color: var(--notice-danger-color);
+}
+
+.Notice {
+  display: block;
+  padding: var(--space-smaller) var(--space-small);
+  border: 1px solid var(--notice-border-color);
+  background-color: var(--notice-background-color);
+  color: var(--notice-text-color);
+  width: 100%;
+  font-size: var(--text-size-smaller);
+}
+
+.Notice .Notice__title,
+.Notice .Notice__title > :is(h1, h2, h3, h4, h5, h6) {
+  display: flex;
+  align-items: center;
+  font-size: var(--text-size-small);
+  font-weight: var(--notice-title-font-weight);
+  margin: 0;
+  padding: 0;
+  gap: var(--space-three-quarters);
+  color: var(--notice-title-text-color);
+}
+
+.Notice .Notice__title + .Notice__content {
+  margin-top: var(--space-smallest);
+}
+
+.Notice .Icon > svg {
+  height: var(--notice-icon-size);
+  width: var(--notice-icon-size);
+}
+
+.Notice button.Link,
+.Notice a.Link {
+  background: transparent;
+  border: 0;
+  color: currentColor;
+}
+
+.Notice button.Link,
+.Notice a.Link {
+  color: var(--accent-dark);
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-light);
+  text-decoration: underline;
+}
+
+.Notice button.Link:focus,
+.Notice a.Link:focus {
+  outline: 2px solid;
+  color: var(--gray-90);
+}
+
+.Notice button.Link:hover,
+.Notice a.Link:hover {
+  color: var(--notice-link-hover-color);
+}
+
+.Notice .Notice__content > p:first-of-type {
+  margin-top: 0;
+  margin-bottom: var(--space-smallest);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.6.1",
+  "version": "5.6.2-canary.14bfe32d",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",
@@ -22,4 +22,4 @@
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1"
   }
-}
+}