@deque/cauldron-styles 5.8.0-canary.b09c14c1 → 5.8.0-canary.c7e293cc

package/dist/index.css

@@ -40,7 +40,7 @@
   --accent-secondary: var(--gray-20);
   --accent-secondary-active: var(--gray-30);
   --focus-light: #b51ad1;
-  --focus-dark: #eb94ff;
+  --focus-dark: #f5a4ff;
   --issue-critical: var(--accent-danger);
   --issue-serious: var(--accent-warning);
   --issue-moderate: #f0c4f8;
@@ -466,7 +466,7 @@ button.Link {
 }
 
 .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
-  box-shadow: 0 0 0 1px var(--button-outline-color-primary);
+  box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
 }
 
 .Button--primary:focus:before,
@@ -1468,7 +1468,10 @@ ul.semantic-only {
   --field-error-text-color: var(--error);
   --field-error-border-color: var(--error);
   --field-listbox-selected-background-color: var(--accent-secondary-active);
+  --field-font-size: var(--text-size-small);
   --input-min-width: 250px;
+  --checkbox-size: var(--icon-size);
+  --radio-size: var(--icon-size);
 }
 
 .cauldron--theme-dark {
@@ -1760,7 +1763,7 @@ textarea.Field--has-error:focus:hover,
 .Field__text-input {
   padding: var(--space-smallest);
   box-sizing: border-box;
-  font-size: var(--text-size-small);
+  font-size: var(--field-font-size);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
 }
@@ -1774,7 +1777,7 @@ textarea.Field--has-error:focus:hover,
 .Field__textarea {
   display: block;
   min-height: 56px;
-  font-size: var(--text-size-small);
+  font-size: var(--field-font-size);
   min-width: min(var(--input-min-width), 100%);
   padding: var(--space-half);
   max-width: 500px;
@@ -1794,11 +1797,18 @@ textarea.Field--has-error:focus:hover,
   font-weight: var(--font-weight-normal);
   line-height: 1;
   margin-top: var(--space-half);
-  margin-left: calc(24px + 2px + var(--space-half));
   cursor: default;
   display: flex;
 }
 
+.Checkbox__wrap .Field__labelDescription {
+  margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
+}
+
+.Radio__wrap .Field__labelDescription {
+  margin-left: calc(var(--radio-size) + 2px + var(--space-half));
+}
+
 .Field__labelDescription + .Error {
   margin-top: var(--space-smallest);
 }
@@ -1826,6 +1836,16 @@ textarea.Field--has-error:focus:hover,
   pointer-events: none;
 }
 
+.Radio__overlay svg {
+  height: var(--radio-size);
+  width: var(--radio-size);
+}
+
+.Checkbox__overlay svg {
+  height: var(--checkbox-size);
+  width: var(--checkbox-size);
+}
+
 .Radio__overlay:active:not(.Radio__overlay--disabled),
 .Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
   background-color: var(--field-icon-active-color);
@@ -4969,3 +4989,252 @@ button.Accordion__trigger {
   margin-top: 0;
   margin-bottom: var(--space-smallest);
 }
+
+:root {
+  --combobox-input-border-color: var(--field-border-color);
+  --combobox-input-background-color: var(--field-background-color);
+  --combobox-input-border-focus-color: var(--field-border-color-focus);
+  --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
+  --combobox-input-border-focus-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-error-border-color: var(--field-border-color-error);
+  --combobox-input-error-focus-border-color: var(
+    --field-border-color-error-hover
+  );
+  --combobox-input-error-focus-border-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-font-size: var(--field-font-size);
+  --combobox-input-font-color: var(--field-content-color);
+  --combobox-listbox-border-color: var(--gray-40);
+  --combobox-listbox-background-color: #fff;
+  --combobox-option-font-color: var(--gray-90);
+  --combobox-option-hover-background-color: var(--gray-20);
+  --combobox-option-description-font-color: var(--gray-60);
+  --combobox-option-description-font-size: var(--text-size-smaller);
+  --combobox-option-min-height: 2.625rem;
+  --combobox-group-label-background-color: var(--gray-20);
+  --combobox-group-label-font-size: var(--text-size-smaller);
+  --combobox-option-selected-icon-color: var(--accent-success-dark);
+}
+
+.cauldron--theme-dark {
+  --combobox-input-border-color: var(--field-border-color);
+  --combobox-input-background-color: var(--field-background-color);
+  --combobox-input-border-focus-color: var(--field-border-color-focus);
+  --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
+  --combobox-input-border-focus-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-error-border-color: var(--field-border-color-error);
+  --combobox-input-error-focus-border-color: var(
+    --field-border-color-error-hover
+  );
+  --combobox-input-error-focus-border-glow-color: var(
+    --field-border-color-focus-glow
+  );
+  --combobox-input-font-color: var(--field-content-color);
+  --combobox-option-font-color: var(--text-color-light);
+  --combobox-option-hover-background-color: var(--accent-dark);
+  --combobox-option-description-font-color: var(--accent-light);
+  --combobox-listbox-background-color: var(--accent-medium);
+  --combobox-group-label-background-color: var(--accent-dark);
+  --combobox-option-selected-icon-color: var(--accent-success-light);
+}
+
+.Combobox {
+  --field-listbox-selected-background-color: transparent;
+  position: relative;
+}
+
+.Combobox input:is(*, :focus, :hover) {
+  border: none;
+  box-shadow: none;
+  margin: initial;
+  padding: var(--space-smallest);
+}
+
+.Combobox__input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--combobox-input-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(--combobox-input-background-color);
+}
+
+.cauldron--theme-dark .Combobox__input {
+  border: 1px solid var(--combobox-input-border-color);
+}
+
+.Combobox__input:hover,
+.cauldron--theme-dark .Combobox__input:hover {
+  border-color: var(--combobox-input-border-hover-color);
+}
+
+.Combobox__input input[type='text'] {
+  font-size: var(--combobox-input-font-size);
+  color: var(--combobox-input-font-color);
+  margin-right: 1.25rem;
+}
+
+.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),
+    0 0 5px var(--combobox-input-border-focus-glow-color),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.Combobox__arrow {
+  width: 2rem;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  pointer-events: none;
+}
+
+.Combobox__arrow:before {
+  content: '';
+  display: inline-block;
+  border-top: 7px solid currentColor;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-radius: 2px;
+}
+
+.Combobox__listbox {
+  display: none;
+  position: absolute;
+  min-width: 100%;
+  border: 1px solid var(--combobox-listbox-border-color);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+  background-color: var(--combobox-listbox-background-color);
+  z-index: var(--z-index-listbox);
+  max-width: var(--combobox-listbox-max-width, 100%);
+  max-height: var(
+    --combobox-listbox-max-height,
+    calc(var(--combobox-option-min-height) * 10)
+  );
+  overflow-y: auto;
+  animation: combobox-animate-in ease-out 150ms;
+}
+
+@keyframes combobox-animate-in {
+  from {
+    transform: translateY(-8px);
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .Combobox__listbox {
+    animation: none;
+  }
+}
+
+.Combobox__listbox:hover {
+  border-color: var(--combobox-listbox-border-color);
+}
+
+/* 
+ * Note: Firefox doesn't yet have full support for :has, so .Combobox__listbox--open
+ * is provided as a fallback selector to indicate open listboxes
+ * see: https://caniuse.com/css-has
+ */
+
+.Combobox:has([role='combobox'][aria-expanded='true']) .Combobox__listbox,
+.Combobox__listbox--open {
+  display: block;
+}
+
+.Combobox__listbox li {
+  list-style-type: none;
+}
+
+.Combobox__listbox > ul[role='group']:not(:last-child) {
+  border-bottom: 1px solid var(--combobox-listbox-border-color);
+}
+
+.ComboboxGroup__label {
+  background-color: var(--combobox-group-label-background-color);
+  padding: var(--space-smallest);
+  font-size: var(--combobox-group-label-font-size);
+  font-weight: var(--font-weight-medium);
+  border-bottom: 1px solid var(--combobox-listbox-border-color);
+}
+
+.ComboboxGroup--hidden {
+  display: none !important;
+}
+
+.ComboboxOption {
+  color: var(--combobox-option-font-color);
+  padding: var(--space-smallest);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-half);
+  justify-content: space-between;
+  min-height: var(--combobox-option-min-height);
+}
+
+.ComboboxOption:not(:last-child) {
+  border-bottom: 1px solid var(--combobox-listbox-border-color);
+}
+
+.ComboboxOption--active {
+  box-shadow: inset 0 0 0 1px var(--combobox-listbox-background-color),
+    inset 0 0 0 3px var(--focus);
+}
+
+.ComboboxOption:is(:hover, [role='option'][aria-selected='true']:hover) {
+  background-color: var(--combobox-option-hover-background-color);
+}
+
+.ComboboxOption .Icon {
+  color: var(--combobox-option-selected-icon-color);
+}
+
+.ComboboxOption .Icon svg {
+  padding: 4px;
+  height: 1.6em;
+  width: 1.6em;
+  border: 2.5px solid currentColor;
+  border-radius: 50%;
+}
+
+.ComboboxOption__match {
+  text-decoration: underline;
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+}
+
+.ComboboxOption__description {
+  padding-top: var(--space-half);
+  padding-bottom: var(--space-quarter);
+  color: var(--combobox-option-description-font-color);
+  font-size: var(--combobox-option-description-font-size);
+}
+
+.Combobox__input--error {
+  border: 1px solid var(--combobox-input-error-border-color);
+}
+
+.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);
+}
+
+.ComboboxListbox__empty {
+  padding: var(--space-smaller);
+  text-align: center;
+}

package/package.json

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