@deque/cauldron-styles 6.5.0 → 6.6.0-canary.9834621f

package/dist/index.css

@@ -915,6 +915,17 @@ textarea.Field--has-error:focus:hover,
           appearance: none;
 }
 
+.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay.Icon {
+  color: var(--field-icon-checked-color);
+}
+
+.Checkbox
+  input[type='checkbox']:indeterminate
+  ~ .Checkbox__overlay--disabled.Icon {
+  color: var(--field-icon-checked-disabled-color);
+  cursor: default;
+}
+
 .Checkbox__overlay.Checkbox__overlay--focused,
 .Radio__overlay.Radio__overlay--focused {
   box-shadow: 0 0 0 2px var(--field-icon-focus-color);
@@ -942,6 +953,29 @@ textarea.Field--has-error:focus:hover,
   border: 1px solid currentColor;
 }
 
+.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay:before {
+  content: '';
+  display: block;
+  position: absolute;
+  height: calc(var(--icon-size) - 8px);
+  width: calc(var(--icon-size) - 8px);
+  background: currentColor;
+  transform: translate(4px, 4px);
+}
+
+.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay:after {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 3px;
+  width: calc(var(--icon-size) / 3);
+  background-color: var(--field-background-color);
+  transform: translate(
+    calc(var(--icon-size) / 3),
+    calc(var(--icon-size) / 2 * -1 - 1.5px)
+  );
+}
+
 .Checkbox input[type='checkbox'] {
   position: absolute;
   opacity: 0;
@@ -1231,7 +1265,7 @@ button.Link {
 }
 
 .Button--tag:before {
-  border-radius: 11px;
+  border-radius: var(--button-height);
 }
 
 .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
@@ -1364,6 +1398,15 @@ button.Link {
   padding: 0 var(--space-small);
 }
 
+.Button--condensed {
+  min-width: var(--button-height);
+  padding: 0;
+}
+
+.Button--condensed:is(.Button--thin) {
+  min-width: var(--button-thin-height);
+}
+
 [class*='Button--'] + [class*='Button--'] {
   margin-left: var(--space-smallest);
 }
@@ -3495,9 +3538,12 @@ button.TooltipTabstop {
 
 :root {
   --tag-text-color: var(--gray-90);
-  --tag-label-text-color: var(--gray-60);
-  --tag-background-color: var(--gray-20);
-  --tag-border-color: var(--gray-90);
+  --tag-background-color: var(--background-light);
+  --tag-border-color: var(--gray-30);
+
+  --tag-height: var(--button-height);
+  --tag-small-height: 1.5rem;
+  --tag-font-size: var(--text-size-body-small);
 }
 
 .cauldron--theme-dark {
@@ -3510,20 +3556,24 @@ button.TooltipTabstop {
 .Tag {
   color: var(--tag-text-color);
   background-color: var(--tag-background-color);
-  font-size: var(--text-size-smaller);
   border: 1px solid var(--tag-border-color);
-  border-radius: 11px;
+  border-radius: var(--tag-height);
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 2px 8px;
-  font-weight: var(--font-weight-medium);
+  padding: 0 var(--space-smallest);
+  min-height: var(--tag-height);
+  font-size: var(--tag-font-size);
+}
+
+.Tag--small {
+  border-radius: var(--tag-small-height);
+  min-height: var(--tag-small-height);
 }
 
 .Tag__label {
-  color: var(--tag-label-text-color);
   margin-right: 3px;
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-medium);
 }
 
 :root {

package/package.json

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