@deque/cauldron-styles 4.7.0-canary.299bd7ab → 4.7.0-canary.2b7d027e

package/dist/index.css

@@ -39,8 +39,8 @@
   --focus-light: #c11bde;
   --focus-dark: #eb94ff;
   --issue-critical: var(--accent-danger);
-  --issue-serious: #ed9a55;
-  --issue-moderate: var(--accent-warning);
+  --issue-serious: var(--accent-warning);
+  --issue-moderate: #f0c4f8;
   --issue-minor: var(--gray-20);
 
   /* text colours */
@@ -69,7 +69,7 @@
   --space-small: 16px;
   --space-medium: 18px;
   --space-large: 24px;
-  --space-largest: 29px;
+  --space-largest: 32px;
   --space-half: 4px;
   --space-three-quarters: 6px;
   --space-quarter: 2px;
@@ -662,7 +662,7 @@ button.Link {
     --button-background-color-secondary-active
   );
   --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
-  --icon-button-border-color-secondary: #dadada;
+  --icon-button-border-color-secondary: var(--gray-40);
 
   --icon-button-background-color-error: var(--button-background-color-error);
   --icon-button-background-color-error-disabled: var(
@@ -690,6 +690,7 @@ button.Link {
   display: inline-flex;
   justify-content: center;
   align-content: center;
+  align-items: center;
   height: var(--button-thin-height);
   width: var(--button-thin-height);
   border-radius: 3px;
@@ -704,11 +705,12 @@ button.Link {
 
 a.IconButton {
   vertical-align: middle;
+  line-height: unset;
 }
 
 .IconButton .Icon {
-  width: 100%;
-  height: 100%;
+  height: var(--space-small);
+  width: var(--space-small);
   pointer-events: none;
 }
 
@@ -2815,6 +2817,12 @@ button.TooltipTabstop {
   background-color: var(--top-bar-text-color);
 }
 
+@media (max-width: 71.25rem) {
+  .TopBar > ul {
+    border: 0;
+  }
+}
+
 :root {
   --skip-link-background-color: rgba(255, 255, 255, 0.95);
   --skip-link-focus-color: var(--focus-light);
@@ -3433,7 +3441,7 @@ button.TooltipTabstop {
   background: var(--table-header-background-color);
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
-  border-bottom: 2px solid var(--table-row-border-color);
+  border-bottom: 3px solid var(--table-row-border-color);
 }
 
 .TableHeader[aria-sort] {
@@ -3462,10 +3470,11 @@ button.TooltipTabstop {
   outline-offset: unset;
 }
 
+.TableHeader,
 .TableHeader--sort-ascending,
 .TableHeader--sort-descending {
   background: var(--table-header-sorting-background-color);
-  border-bottom: 2px solid var(--table-header-sorting-border-color);
+  border-bottom: 3px solid var(--table-header-sorting-border-color);
 }
 
 .TableHeader--sort-ascending .TableHeader__sort-button,
@@ -3486,7 +3495,8 @@ button.TooltipTabstop {
 }
 
 .TableCell,
-.TableHeader {
+.TableHeader,
+.TableFooter {
   padding: var(--table-space) var(--space-smallest);
 }
 
@@ -3498,25 +3508,41 @@ button.TooltipTabstop {
   box-shadow: var(--table-box-shadow);
 }
 
+.TableCell {
+  color: var(--gray-90);
+}
+
+.cauldron--theme-dark .TableCell {
+  color: var(--white);
+}
+
 .Table--border,
 .Table--border .TableHeader,
+.Table--border .TableFooter,
 .Table--border .TableCell {
   border: 1px solid var(--gray-40);
 }
 
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
+.cauldron--theme-dark .Table--border .TableFooter,
 .cauldron--theme-dark .Table--border .TableCell {
   border-color: var(--stroke-dark);
 }
 
+.TableFooter .TableCell {
+  background: var(--table-header-background-color);
+  font-weight: var(--font-weight-medium);
+  color: var(--table-header-text-color);
+}
+
 :root {
   --data-list-background-color: var(--gray-20);
   --data-list-value-background-color: var(--white);
   --data-list-border-color: var(--gray-40);
   --data-list-text-color: var(--gray-90);
-  --data-list-value-text-color: var(--gray-80);
-  --data-list-space: 11px;
+  --data-list-value-text-color: var(--gray-90);
+  --data-list-space: var(--space-small);
   --data-list-value-width: 187px;
 }
 
@@ -3534,7 +3560,7 @@ button.TooltipTabstop {
   border-radius: 3px;
   border: 1px solid var(--data-list-border-color);
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-  margin-bottom: var(--space-small) 0;
+  margin-bottom: var(--space-small);
 }
 
 .DescriptionList.DescriptionList--collapsed {
@@ -3556,7 +3582,7 @@ button.TooltipTabstop {
 
 .DescriptionList--collapsed .DescriptionList__item {
   border: 0;
-  margin-bottom: var(--space-small);
+  margin-bottom: 12px;
   display: block;
   background-color: var(--data-list-value-background-color);
 }
@@ -3589,6 +3615,7 @@ button.TooltipTabstop {
   background-color: transparent;
   width: auto;
   border-right: none;
+  margin-bottom: 2px;
 }
 
 .DescriptionList__details {
@@ -3620,6 +3647,16 @@ button.TooltipTabstop {
   color: var(--white);
 }
 
+@media screen and (max-width: 32rem) {
+  .DescriptionList {
+    margin-bottom: 0;
+    box-shadow: none;
+    border-bottom: 0;
+    border-left: 1px solid var(--gray-40);
+    border-right: 1px solid var(--gray-40);
+  }
+}
+
 .Stepper {
   --step-indicator-size: 2em;
   --step-line-height: 0.53em;
@@ -3747,7 +3784,7 @@ button.TooltipTabstop {
 }
 
 .Panel {
-  padding: var(--space-large);
+  padding: var(--space-small);
   border: 1px solid var(--panel-border-color);
   border-radius: 3px;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
@@ -4066,6 +4103,7 @@ fieldset.Panel {
   display: flex;
   align-items: center;
   font-size: var(--text-size-small);
+  margin: 0;
 }
 
 .Pagination > ul > li:not(:last-child) {
@@ -4116,6 +4154,16 @@ fieldset.Panel {
   color: var(--accent-light);
 }
 
+@media (max-width: 28.125rem) {
+  .Pagination [role='log'] {
+    margin: 0;
+  }
+
+  .Pagination--thin [role='log'] {
+    margin: 0;
+  }
+}
+
 .Breadcrumb ol {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "4.7.0-canary.299bd7ab",
+  "version": "4.7.0-canary.2b7d027e",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",