@deque/cauldron-styles 4.0.0 → 4.1.0

package/dist/index.css

@@ -1441,6 +1441,7 @@ ul.semantic-only {
   --field-background-color-disabled: #f7f7f7;
   --field-required-text-color: var(--gray-60);
   --field-label-text-color: var(--gray-90);
+  --field-label-description-text-color: var(--gray-60);
   --input-min-width: 250px;
 }
 
@@ -1456,6 +1457,7 @@ ul.semantic-only {
   --field-background-color-disabled: #5d676f;
   --field-required-text-color: var(--white);
   --field-label-text-color: var(--white);
+  --field-label-description-text-color: rgba(255, 255, 255, 0.8);
 }
 
 input,
@@ -1611,6 +1613,7 @@ textarea.Field--has-error:focus:hover,
   margin-bottom: 0;
   flex-direction: row-reverse;
   justify-content: flex-end;
+  flex-wrap: wrap;
 }
 
 .Checkbox {
@@ -1694,6 +1697,28 @@ textarea.Field--has-error:focus:hover,
   border: 1px solid var(--field-border-color);
 }
 
+.Field__labelDescription {
+  flex-basis: 100%;
+  color: var(--field-label-description-text-color);
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-normal);
+  line-height: 1;
+  margin-left: calc(24px + 2px + var(--space-half));
+  cursor: default;
+}
+
+.Icon + .Error {
+  flex-basis: 100%;
+  margin-top: var(--space-smallest);
+}
+
+.Field__labelDescription + .Error {
+  border-top: 1px solid var(--error);
+  margin-left: calc(24px + 2px + var(--space-half));
+  padding: 4px 0;
+  margin-top: 4px;
+}
+
 .Radio__overlay,
 .Checkbox__overlay {
   border: 1px solid transparent;
@@ -3265,17 +3290,24 @@ button.TooltipTabstop {
 :root {
   --table-header-text-color: var(--gray-90);
   --table-header-background-color: var(--gray-20);
+  --table-header-sorting-background-color: #caddec;
+  --table-header-sorting-text-color: var(--gray-90);
   --table-cell-text-color: var(--gray-60);
   --table-cell-background-color: var(--white);
   --table-row-border-color: var(--gray-40);
   --table-space: 11px;
+  --table-header-sorting-border-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
   --table-header-text-color: var(--white);
   --table-header-background-color: var(--accent-dark);
+  --table-header-sorting-background-color: #53636e;
+  --table-header-sorting-text-color: var(--white);
   --table-cell-text-color: var(--accent-light);
   --table-cell-background-color: var(--accent-medium);
+  --table-row-border-color: #5d676f;
+  --table-header-sorting-border-color: var(--accent-info);
 }
 
 .Table {
@@ -3294,6 +3326,48 @@ button.TooltipTabstop {
   border-bottom: 2px solid var(--table-row-border-color);
 }
 
+.TableHeader[aria-sort] {
+  padding: 0;
+}
+
+.TableHeader .TableHeader__sort-button {
+  background-color: transparent;
+  font-family: inherit;
+  width: 100%;
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-medium);
+  color: var(--table-header-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--table-space) var(--space-smallest);
+}
+
+.TableHeader__sort-button:hover {
+  cursor: pointer;
+}
+
+.TableHeader__sort-button:focus {
+  outline-offset: unset;
+}
+
+.TableHeader--sort-ascending,
+.TableHeader--sort-descending {
+  background: var(--table-header-sorting-background-color);
+  border-bottom: 2px solid var(--table-header-sorting-border-color);
+}
+
+.TableHeader--sort-ascending .TableHeader__sort-button,
+.TableHeader--sort-decscending .TableHeader__sort-button {
+  color: var(--table-header-sorting-text-color);
+}
+
+/* compensate the gap in height between TableHeader and Icon */
+
+.TableHeader__sort-button span {
+  margin: calc(var(--space-half) * -1) 0;
+}
+
 .TableCell {
   background: var(--table-cell-background-color);
   color: var(--table-cell-text-color);

package/package.json

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