@deque/cauldron-styles 6.16.0-canary.c391cd2e → 6.16.0-canary.d6dc2358

package/dist/index.css

@@ -1195,7 +1195,7 @@ textarea.Field--has-error:focus:hover,
   --button-background-color-primary-active: var(--accent-primary-active);
 
   --button-background-color-secondary: var(--gray-20);
-  --button-background-color-secondary-disabled: var(--gray-30);
+  --button-background-color-secondary-disabled: var(--gray-20);
   --button-outline-color-secondary: var(--gray-90);
   --button-background-color-secondary-active: var(--gray-30);
   --button-border-color-secondary: var(--gray-40);
@@ -4101,7 +4101,7 @@ button.TooltipTabstop {
   --panel-border-color: var(--gray-40);
   --panel-background-color: var(--white);
   --panel-heading-color: var(--gray-90);
-  --panel-padding: var(--space-small);
+  --panel-padding: var(--space-large);
   --panel-divider-border-color: var(--gray-40);
   --panel-content-color: var(--gray-80);
 }
@@ -4110,7 +4110,7 @@ button.TooltipTabstop {
   padding: var(--panel-padding);
   margin: 0;
   border: 1px solid var(--panel-border-color);
-  border-radius: 3px;
+  border-radius: 16px;
   box-shadow: var(--drop-shadow-raised);
   background-color: var(--panel-background-color);
   word-break: break-word;
@@ -5834,3 +5834,74 @@ button.Accordion__trigger {
   padding-bottom: var(--space-small);
   margin-bottom: var(--space-small);
 }
+
+:root {
+  --page-header-overline-color: var(--gray-60);
+}
+
+.cauldron--theme-dark {
+  --page-header-overline-color: var(--accent-light);
+}
+
+.PageHeader__overline {
+  margin: 0 0 var(--space-smallest) 0;
+  padding: 0;
+  color: var(--page-header-overline-color);
+  font-size: var(--text-size-base);
+}
+
+:root {
+  --section-header-description-color: var(--gray-60);
+}
+
+.cauldron--theme-dark {
+  --section-header-description-color: var(--accent-light);
+}
+
+.SectionHeader {
+  container-type: inline-size;
+}
+
+.SectionHeader__content {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    'heading'
+    'description'
+    'children';
+}
+
+.SectionHeader__actions {
+  margin-top: var(--space-small);
+  grid-area: children;
+}
+
+.SectionHeader .SectionHeader__content .SectionHeader__description {
+  margin: var(--space-smallest) 0 0 0;
+  padding: 0;
+  color: var(--section-header-description-color);
+  font-size: var(--text-size-base);
+  grid-area: description;
+}
+
+.SectionHeader :is(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-medium);
+  margin: 0;
+  padding: 0;
+}
+
+@container (min-width: 48rem) {
+  .SectionHeader__content {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'heading children'
+      'description children';
+    align-items: start;
+  }
+
+  .SectionHeader__actions {
+    margin: 0;
+    align-self: center;
+    justify-self: end;
+  }
+}

package/package.json

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