@maggioli-design-system/styles 17.4.0 → 17.6.0

package/dist/css/tokens.editor.css

@@ -85,6 +85,26 @@
     --text-size-code-hack: 0.875rem;
     --text-size-code-hack--font-weight: 400;
     --text-size-code-hack--line-height: 1.25rem;
+    --text-size-title-page: var(--text-size-title-h3);
+    --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
+    --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
+    --text-size-title-page--line-height: var(--text-size-title-h3--line-height);
+    --text-size-title-section: var(--text-size-title-h5);
+    --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
+    --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
+    --text-size-title-section--line-height: var(--text-size-title-h5--line-height);
+    --text-size-title-dialog: var(--text-size-title-h5);
+    --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
+    --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
+    --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
+    --text-size-title-part: var(--text-size-title-h6);
+    --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
+    --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
+    --text-size-title-part--line-height: var(--text-size-title-h6--line-height);
+    --text-size-title-group: var(--text-size-title-h6);
+    --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
+    --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
+    --text-size-title-group--line-height: var(--text-size-title-h6--line-height);
     --leading-2xs: 0.625rem;
     --leading-xs: 1rem;
     --leading-sm: 1.25rem;
@@ -106,7 +126,7 @@
     --spacing-4xl: 96px;
     --spacing-phrase: 50ch;
     --spacing-prose: 65ch;
-    --spacing-text: 75ch;
+    --spacing-text: var(--magma-width-reading, 56ch);
     --spacing-title: 30ch;
     --container-4xs: 128px;
     --container-3xs: 192px;
@@ -122,6 +142,21 @@
     --container-5xl: 1024px;
     --container-6xl: 1152px;
     --container-7xl: 1280px;
+    --magma-rhythm-inline: 12px;
+    --magma-rhythm-title-content: 12px;
+    --magma-rhythm-label-control: 12px;
+    --magma-rhythm-between-containers: 16px;
+    --magma-rhythm-between-fields: 24px;
+    --magma-rhythm-content-actions: 24px;
+    --magma-rhythm-inset: 24px;
+    --magma-rhythm-between-groups: 40px;
+    --magma-rhythm-between-sections: 64px;
+    --magma-width-reading: 56ch;
+    --magma-width-form: var(--magma-width-reading);
+    --magma-width-page: 1280px;
+    --magma-width-page-gutter: 24px;
+    --magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
+    --magma-container-actions: 23.75rem;
     --breakpoint-mobile: 480px;
     --breakpoint-tablet: 768px;
     --breakpoint-desktop: 1024px;
@@ -651,7 +686,7 @@
     --magma-tint-scale-09: var(--tone-neutral-09);
     --magma-tint-scale-10: var(--tone-neutral-10);
     --magma-surface-sunken: var(--magma-tint-sunken); /* Below the page: wells, insets, code blocks, tracks. */
-    --magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping on the page: zebra rows, a subtle section. */
+    --magma-surface-muted: var(--magma-tint-muted); /* Same-plane grouping inside a component: zebra rows; never the background of a section. */
     --magma-surface-default: var(--magma-tint-default); /* The page canvas, the background of the body. */
     --magma-surface-raised: var(--magma-tint-raised); /* Above the page: cards, panels, sticky headers. */
     --magma-surface-overlay: var(--magma-tint-overlay); /* Floating above everything: modal, dropdown, popover, sheet. */
@@ -778,6 +813,18 @@
     --magma-accent-ai-surface-subtle: var(--magma-tint-accent-ai-surface-subtle); /* A background tinted with the AI accent, lighter. */
     --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid fill of the AI accent. */
 
+    /* semantic: theme variants */
+    --magma-preview-business-wash: var(--tone-neutral-09);
+    --magma-preview-business-accent: var(--variant-primary-04);
+    --magma-preview-editorial-wash: var(--tone-bisque-09);
+    --magma-preview-editorial-accent: var(--variant-secondary-04);
+    --magma-preview-default-wash: var(--tone-neutral-09);
+    --magma-preview-default-accent: var(--variant-primary-04);
+    --magma-preview-cool-wash: var(--tone-porcelain-09);
+    --magma-preview-cool-accent: var(--variant-primary-04);
+    --magma-preview-warm-wash: var(--tone-bisque-09);
+    --magma-preview-warm-accent: var(--variant-primary-04);
+
     /* globals */
     --magma-pref-mode: light; /* The active mode preference, as the mds-pref components write it: read it, never set it. */
     --magma-pref-theme-scheme: light; /* The active theme-scheme preference, as the mds-pref components write it: read it, never set it. */
@@ -933,6 +980,7 @@
     --mds-book-color: rgb(36 103 231);
     --mds-book-paper-color: rgb(250 248 242);
     --mds-book-text-color: rgb(255 255 255);
+    --mds-book-publisher-color: rgb(255 255 255);
     --mds-book-page-weight-max: 0.05;
     --mds-book-page-weight-min: 0.1;
 
@@ -997,8 +1045,8 @@
     --mds-calendar-cell-other-month-visibility: visible;
 
     /* component: mds-card */
-    --mds-card-gap: 0;
-    --mds-card-padding: 0;
+    --mds-card-gap: 12px;
+    --mds-card-padding: 24px;
     --mds-card-background: rgb(var(--magma-surface-raised));
 
     /* component: mds-chip */
@@ -1095,6 +1143,7 @@
     --mds-filter-items-padding: 8px;
     --mds-filter-items-radius: 1000px;
     --mds-filter-items-scroll-behavior: smooth;
+    --mds-filter-label-gap: 12px;
     --mds-filter-label-padding: 0 24px;
     --mds-filter-wrapper-shadow-color: rgb(196 196 196);
     --mds-filter-wrapper-shadow-opacity: 0.1;
@@ -1407,6 +1456,8 @@
     --mds-notification-translate-offset-x: -1.75;
     --mds-notification-dot-transition-duration: var(--duration-300);
     --mds-notification-transition-timing-function: var(--ease-out-cubic);
+    --mds-notification-pulse-duration: var(--duration-1000);
+    --mds-notification-pulse-spread: --spacing(200);
 
     /* component: mds-paginator */
     --mds-paginator-background: rgb(225 225 225);

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.3.0
+@magma-design-system/design-tokens v15.5.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 24 Oct 2026 12:12:55 GMT
+Generated at Wed, 04 Nov 2026 15:12:42 GMT
 */
 
 :root {

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.3.0
+@magma-design-system/design-tokens v15.5.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 24 Oct 2026 12:12:55 GMT
+Generated at Wed, 04 Nov 2026 15:12:42 GMT
 */
 
 :root {
@@ -73,6 +73,27 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
   --text-size-code-hack--font-weight: 400;
   --text-size-code-hack--line-height: 1.25rem;
 
+  --text-size-title-page: var(--text-size-title-h3);
+  --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
+  --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
+  --text-size-title-page--line-height: var(--text-size-title-h3--line-height);
+  --text-size-title-section: var(--text-size-title-h5);
+  --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-section--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-dialog: var(--text-size-title-h5);
+  --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-part: var(--text-size-title-h6);
+  --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-part--line-height: var(--text-size-title-h6--line-height);
+  --text-size-title-group: var(--text-size-title-h6);
+  --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-group--line-height: var(--text-size-title-h6--line-height);
+
   --leading-2xs: 0.625rem;
   --leading-xs: 1rem;
   --leading-sm: 1.25rem;
@@ -95,7 +116,7 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
   --spacing-4xl: 96px;
   --spacing-phrase: 50ch;
   --spacing-prose: 65ch;
-  --spacing-text: 75ch;
+  --spacing-text: var(--magma-width-reading, 56ch);
   --spacing-title: 30ch;
 
   --container-4xs: 128px;
@@ -113,6 +134,22 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
   --container-6xl: 1152px;
   --container-7xl: 1280px;
 
+  --magma-rhythm-inline: 12px;
+  --magma-rhythm-title-content: 12px;
+  --magma-rhythm-label-control: 12px;
+  --magma-rhythm-between-containers: 16px;
+  --magma-rhythm-between-fields: 24px;
+  --magma-rhythm-content-actions: 24px;
+  --magma-rhythm-inset: 24px;
+  --magma-rhythm-between-groups: 40px;
+  --magma-rhythm-between-sections: 64px;
+  --magma-width-reading: 56ch;
+  --magma-width-form: var(--magma-width-reading);
+  --magma-width-page: 1280px;
+  --magma-width-page-gutter: 24px;
+  --magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
+  --magma-container-actions: 23.75rem;
+
   --breakpoint-mobile: 480px;
   --breakpoint-tablet: 768px;
   --breakpoint-desktop: 1024px;

package/dist/css/utility-typography.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer utilities {
   .focus-zoom {
@@ -23,6 +23,9 @@
 .typography-title-h1 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h1, 3rem);
   line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
@@ -36,6 +39,9 @@
 .typography-title-h2 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h2, 2.25rem);
   line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
@@ -49,6 +55,9 @@
 .typography-title-h3 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h3, 1.875rem);
   line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
@@ -62,6 +71,9 @@
 .typography-title-h4 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h4, 1.5rem);
   line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
@@ -75,6 +87,9 @@
 .typography-title-h5 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h5, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
@@ -88,6 +103,9 @@
 .typography-title-h6 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h6, 1rem);
   line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
@@ -101,6 +119,9 @@
 .typography-title-action {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-action, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
@@ -110,9 +131,82 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.typography-title-page {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-page, var(--text-size-title-h3, 1.875rem));
+  line-height: var(--tw-leading, var(--text-size-title-page--line-height, var(--text-size-title-h3--line-height, 2.25rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-page--letter-spacing, var(--text-size-title-h3--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-page--font-weight, var(--text-size-title-h3--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-section {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-section, var(--text-size-title-h5, 1.25rem));
+  line-height: var(--tw-leading, var(--text-size-title-section--line-height, var(--text-size-title-h5--line-height, 1.75rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-section--letter-spacing, var(--text-size-title-h5--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-section--font-weight, var(--text-size-title-h5--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-dialog {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-dialog, var(--text-size-title-h5, 1.25rem));
+  line-height: var(--tw-leading, var(--text-size-title-dialog--line-height, var(--text-size-title-h5--line-height, 1.75rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-dialog--letter-spacing, var(--text-size-title-h5--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-dialog--font-weight, var(--text-size-title-h5--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-part {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-part, var(--text-size-title-h6, 1rem));
+  line-height: var(--tw-leading, var(--text-size-title-part--line-height, var(--text-size-title-h6--line-height, 1.5rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-part--letter-spacing, var(--text-size-title-h6--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-part--font-weight, var(--text-size-title-h6--font-weight, 700)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-group {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-group, var(--text-size-title-h6, 1rem));
+  line-height: var(--tw-leading, var(--text-size-title-group--line-height, var(--text-size-title-h6--line-height, 1.5rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-group--letter-spacing, var(--text-size-title-h6--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-group--font-weight, var(--text-size-title-h6--font-weight, 700)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .typography-info-paragraph {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-paragraph, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
@@ -123,6 +217,9 @@
 .typography-info-detail {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-detail, 1rem);
   line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
@@ -133,6 +230,9 @@
 .typography-info-caption {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-caption, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
@@ -143,6 +243,9 @@
 .typography-info-label {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-label, 0.75rem);
   line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
@@ -156,6 +259,9 @@
 .typography-info-option {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-option, 0.625rem);
   line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
@@ -170,6 +276,9 @@
 .typography-info-tip {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-tip, 0.75rem);
   line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
@@ -180,6 +289,9 @@
 .typography-read-paragraph {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-paragraph, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
@@ -192,6 +304,9 @@
 .typography-read-detail {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-detail, 1rem);
   line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
@@ -204,6 +319,9 @@
 .typography-read-caption {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-caption, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
@@ -214,6 +332,9 @@
 .typography-code-snippet {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
   font-size: var(--text-size-code-snippet, 1rem);
   line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
@@ -224,6 +345,9 @@
 .typography-code-hack {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
   font-size: var(--text-size-code-hack, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
@@ -244,7 +368,7 @@
   inherits: false;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-duration: initial;
       --tw-ease: initial;

package/dist/dtcg/globals.tokens.json

@@ -1,6 +1,6 @@
 {
   "magma": {
-    "$description": "The semantic layer: the roles UI code paints with, which follow the mode, the named theme and the contrast preference.",
+    "$description": "The semantic layer: the roles UI code paints with. The colour roles follow the mode, the named theme and the contrast preference; rhythm and width are the spaces and the widths of the design language.",
     "pref": {
       "$description": "The preferences the mds-pref components write on the html element: read them to adapt, never set them by hand.",
       "$extensions": {

package/dist/dtcg/magma.resolver.json

@@ -35,8 +35,30 @@
       "default": "light"
     },
     "theme": {
-      "description": "Named theme (data-theme-name) and contrast preference (pref-contrast-more) together: under a theme the contrast promotions are restated in the theme family, so the two cannot be two modifiers.",
+      "description": "Named theme (data-theme-name) and contrast preference (pref-contrast-more) together: under a theme the contrast promotions are restated in the theme family, so the two cannot be two modifiers. Deprecated, removed in the next major: default (the old name of business: mds-pref-theme still writes it until the next major, when its default becomes business); cool (a worked example of the theme axis, not a product theme: use business or editorial); warm (a worked example of the theme axis, not a product theme: use editorial).",
       "contexts": {
+        "business": [],
+        "business-contrast-more": [
+          {
+            "$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
+          }
+        ],
+        "editorial": [
+          {
+            "$ref": "../../../design-tokens/dist/dtcg/theme-editorial.tokens.json"
+          }
+        ],
+        "editorial-contrast-more": [
+          {
+            "$ref": "../../../design-tokens/dist/dtcg/contrast-more.tokens.json"
+          },
+          {
+            "$ref": "../../../design-tokens/dist/dtcg/theme-editorial.tokens.json"
+          },
+          {
+            "$ref": "../../../design-tokens/dist/dtcg/theme-editorial-contrast-more.tokens.json"
+          }
+        ],
         "default": [],
         "default-contrast-more": [
           {
@@ -76,7 +98,7 @@
           }
         ]
       },
-      "default": "default"
+      "default": "business"
     },
     "corner-shape": {
       "description": "The data-corner-shape attribute: [data-corner-shape='<context>']. The default is the value of the :root block.",

package/dist/tailwind/base.css

@@ -88,8 +88,81 @@
     @apply max-w-title;
   }
 
-  p {
-    @apply max-w-title;
+  /* p takes the cap of the reset, max-w-text (the reading measure, #1204): a cap written
+   * here, in a later layer, would win over it. */
+
+  /* The room of mds-status-bar (#1203): while a bar is visible at the end of the window, the page
+   * ends that far above it, and a field reached with Tab stops above it too (WCAG 2.4.11). No
+   * script measures the bar: the room is its tallest for its content, from its own sheet, plus
+   * rhythm/between-fields. It is a box after the body, not a padding of html: a page that zeroes
+   * the padding of html out of any layer, as many resets do, wins over every layer and would drop
+   * it. A page that scrolls in a box of its own reads the same room from --magma-status-bar-room.
+   * A shorter bar leaves the rest empty, never covered.
+   *
+   * The tallest bar: the margin of its area (800), the inset of the bar (600 twice), the
+   * description on a line of its own (one line of caption, the limit of its content), the gap to
+   * the actions (400) and their row (a button, 900). Up to 480px the bar takes the width of the
+   * window and its actions stack (actions/stacked): each action after the first adds a button and
+   * rhythm/inline, up to three (actions/at-most-three). */
+
+  html:has(mds-status-bar[visible]) {
+    --magma-status-bar-room: calc(
+      --spacing(800) + 2 * --spacing(600) + var(--text-size-info-caption--line-height) +
+        --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+    );
+
+    scroll-padding-bottom: var(--magma-status-bar-room);
+  }
+
+  html:has(mds-status-bar[visible])::after {
+    content: '';
+    display: block;
+    height: var(--magma-status-bar-room);
+  }
+
+  @media (width <= 480px) {
+    html:has(mds-status-bar[visible] > :nth-child(2)) {
+      --magma-status-bar-room: calc(
+        --spacing(800) + 2 * --spacing(600) + var(--text-size-info-caption--line-height) +
+          --spacing(400) + 2 * --spacing(900) + var(--magma-rhythm-inline) +
+          var(--magma-rhythm-between-fields)
+      );
+    }
+
+    html:has(mds-status-bar[visible] > :nth-child(3)) {
+      --magma-status-bar-room: calc(
+        --spacing(800) + 2 * --spacing(600) + var(--text-size-info-caption--line-height) +
+          --spacing(400) + 3 * --spacing(900) + 2 * var(--magma-rhythm-inline) +
+          var(--magma-rhythm-between-fields)
+      );
+    }
+  }
+
+  /* The bar of mds-header (#1189, surfaces/band): the header stands in the flow, sticky, so the
+   * page starts under it by itself; while it stays put it covers the top of the window, and a
+   * field reached with Shift+Tab stops under it (WCAG 2.4.11), rhythm/between-fields lower, as at
+   * the bar of mds-status-bar. No script measures the bar: it is one row, its inset (400 twice) and
+   * a button (900); the floating bar (`inline`) stands its margin lower, 600, and 400 up to 767px
+   * (--mds-header-inline-margin, -mobile). */
+
+  html:has(mds-header) {
+    scroll-padding-top: calc(
+      2 * --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+    );
+  }
+
+  html:has(mds-header[appearance='inline']) {
+    scroll-padding-top: calc(
+      --spacing(600) + 2 * --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+    );
+  }
+
+  @media (width <= 767px) {
+    html:has(mds-header[appearance='inline']) {
+      scroll-padding-top: calc(
+        --spacing(400) + 2 * --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+      );
+    }
   }
 
   /* The box of the hydrated components (against Tailwind's preflight) is kept by