@deque/cauldron-styles 7.2.0 → 7.3.0-canary.936f8c65

package/dist/index.css

@@ -51,6 +51,9 @@
   --issue-moderate: #f0c4f8;
   --issue-minor: var(--gray-20);
 
+  /* radius */
+  --radius-16: 16px;
+
   /* text colours */
   --text-color-base: var(--gray-60);
   --text-color-light: var(--white);
@@ -3448,6 +3451,7 @@ button.TooltipTabstop {
   --code-text-color: var(--accent-light);
   --code-background-color: var(--accent-dark);
   --code-border-color: var(--stroke-dark);
+  --code-border: 1px solid var(--code-border-color);
 }
 
 .Code__Header {
@@ -3865,8 +3869,7 @@ 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-background-color: var(--white);
   --table-header-background-color-hover: #dddddd;
   /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--gray-90);
@@ -3876,21 +3879,22 @@ button.TooltipTabstop {
   --table-space: var(--space-small);
   --table-header-sorting-border-color: var(--gray-90);
   --table-box-shadow: var(--drop-shadow-raised);
+  /* --table-odd-row-background will be deprecated */
   --table-odd-row-background: var(--gray-10);
   --table-sort-hover-focus-ring-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
   --table-header-text-color: var(--white);
-  --table-header-background-color: var(--accent-medium);
+  --table-header-background-color: var(--accent-dark);
   /* --table-header-sorting-text-color will be deprecated */
   --table-header-sorting-text-color: var(--white);
-  --table-header-sorting-background-color: #53636e;
   --table-header-background-color-hover: #53636e;
   --table-cell-text-color: var(--accent-light);
-  --table-cell-background-color: var(--accent-medium);
+  --table-cell-background-color: var(--accent-dark);
   --table-row-border-color: #5d676f;
   --table-header-sorting-border-color: var(--accent-info);
+  /* --table-odd-row-background will be deprecated */
   --table-odd-row-background: var(--gray-90);
   --table-sort-hover-focus-ring-color: var(--accent-light);
 }
@@ -3932,10 +3936,6 @@ button.TooltipTabstop {
   border-bottom: none;
 }
 
-.TableBody .TableRow:nth-child(odd) .TableCell {
-  background: var(--table-odd-row-background);
-}
-
 .TableHeader[aria-sort] {
   padding: 0;
 }
@@ -4172,6 +4172,70 @@ button.TooltipTabstop {
   }
 }
 
+:root {
+  --metadata-list-column-gap: var(--space-largest);
+  --metadata-list-horizontal-row-gap: var(--space-largest);
+  --metadata-list-vertical-row-gap: var(--space-large);
+  --metadata-list-item-gap: var(--space-half);
+  --metadata-list-padding: var(--space-small) 0;
+  --metadata-list-label-text-color: var(--gray-90);
+  --metadata-list-label-font-size: var(--text-size-small);
+  --metadata-list-label-font-weight: var(--font-weight-medium);
+  --metadata-list-label-line-height: 1.5;
+  --metadata-list-value-text-color: var(--gray-60);
+  --metadata-list-value-font-size: var(--text-size-small);
+  --metadata-list-value-font-weight: var(--font-weight-normal);
+  --metadata-list-value-line-height: 1.5;
+}
+
+.cauldron--theme-dark {
+  --metadata-list-label-text-color: var(--white);
+  --metadata-list-value-text-color: var(--accent-light);
+}
+
+.MetadataList {
+  display: flex;
+  column-gap: var(--metadata-list-column-gap);
+  padding: var(--metadata-list-padding);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.MetadataList.MetadataList--horizontal {
+  flex-wrap: wrap;
+  row-gap: var(--metadata-list-horizontal-row-gap);
+}
+
+.MetadataList.MetadataList--vertical {
+  flex-direction: column;
+  row-gap: var(--metadata-list-vertical-row-gap);
+}
+
+.MetadataList__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--metadata-list-item-gap);
+}
+
+.MetadataList__label,
+.MetadataList__value {
+  margin: 0;
+}
+
+.MetadataList__label {
+  color: var(--metadata-list-label-text-color);
+  font-size: var(--metadata-list-label-font-size);
+  font-weight: var(--metadata-list-label-font-weight);
+  line-height: var(--metadata-list-label-line-height);
+}
+
+.MetadataList__value {
+  color: var(--metadata-list-value-text-color);
+  font-size: var(--metadata-list-value-font-size);
+  font-weight: var(--metadata-list-value-font-weight);
+  line-height: var(--metadata-list-value-line-height);
+}
+
 :root {
   --step-indicator-size: 1.75rem;
   --step-line-height: 0.5rem;
@@ -4323,12 +4387,14 @@ button.TooltipTabstop {
 
 :root {
   --panel-border-color: var(--gray-40);
+  --panel-border-radius: var(--radius-16);
+  --panel-border-width: 1px;
   --panel-background-color: var(--white);
   --panel-heading-color: var(--gray-90);
   --panel-padding: var(--space-small);
   --panel-divider-border-color: var(--gray-40);
   --panel-content-color: var(--gray-80);
-  --panel-border: 1px solid var(--panel-border-color);
+  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
   --panel-box-shadow: var(--drop-shadow-raised);
 }
 
@@ -4336,7 +4402,7 @@ button.TooltipTabstop {
   padding: var(--panel-padding);
   margin: 0;
   border: var(--panel-border);
-  border-radius: 3px;
+  border-radius: var(--panel-border-radius);
   box-shadow: var(--panel-box-shadow);
   background-color: var(--panel-background-color);
   word-break: break-word;
@@ -4371,6 +4437,14 @@ button.TooltipTabstop {
 .Panel__Header {
   margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) 0
     calc(var(--panel-padding) * -1);
+  border-start-start-radius: max(
+    0px,
+    calc(var(--panel-border-radius) - var(--panel-border-width))
+  );
+  border-start-end-radius: max(
+    0px,
+    calc(var(--panel-border-radius) - var(--panel-border-width))
+  );
 }
 
 .Panel--no-padding > :is(.Panel__Heading, .Panel__Header, .Panel__Content) {
@@ -4395,7 +4469,7 @@ button.TooltipTabstop {
 
 .Panel
   :is(.Panel__Header + .Panel__Content, .Panel__Content + .Panel__Content) {
-  border-top: 1px solid var(--panel-divider-border-color);
+  border-top: var(--panel-border-width) solid var(--panel-divider-border-color);
 }
 
 .Panel__Content:last-child {
@@ -4407,7 +4481,8 @@ button.TooltipTabstop {
 }
 
 .Panel > .Panel__Heading {
-  border-bottom: 1px solid var(--panel-divider-border-color);
+  border-bottom: var(--panel-border-width) solid
+    var(--panel-divider-border-color);
 }
 
 .Panel > .Panel__Heading:is(h1, h2, h3, h4, h5, h6),
@@ -4447,6 +4522,7 @@ fieldset.Panel {
 
 .cauldron--theme-dark {
   --panel-border-color: var(--stroke-dark);
+  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
   --panel-background-color: var(--accent-medium);
   --panel-heading-color: #fff;
   --panel-divider-border-color: var(--stroke-dark);

package/package.json

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