m3-svelte 5.15.5 → 6.0.1

package/package/buttons/Button.svelte

@@ -55,84 +55,113 @@
 
 <style>
   .m3-container.xs {
-    height: calc(2rem + var(--m3-util-density-term));
+    @apply --m3-label-large;
+    height: --m3-density(2rem);
     padding: 0 0.75rem;
     gap: 0.5rem;
-    --m3-button-shape: 1rem;
-    --m3-button-square-shape: var(--m3-util-rounding-medium);
-    --m3-button-pressed-shape: var(--m3-util-rounding-small);
-    font-family: var(--m3-font-label);
-    font-size: var(--m3-font-label-large-size);
-    line-height: var(--m3-font-label-large-height);
-    letter-spacing: var(--m3-font-label-large-tracking);
-    font-weight: var(--m3-font-label-large-weight);
+    --shape: 1rem;
+    --square-shape: var(--m3-shape-medium);
+    --pressed-shape: var(--m3-shape-small);
+
+    &.icon-full {
+      width: 2rem;
+      padding: 0;
+    }
   }
 
   .m3-container.s {
-    height: calc(2.5rem + var(--m3-util-density-term));
+    @apply --m3-label-large;
+    height: --m3-density(2.5rem);
     padding: 0 1rem;
     gap: 0.5rem;
-    --m3-button-shape: 1.25rem;
-    --m3-button-square-shape: var(--m3-util-rounding-medium);
-    --m3-button-pressed-shape: var(--m3-util-rounding-small);
-    font-family: var(--m3-font-label);
-    font-size: var(--m3-font-label-large-size);
-    line-height: var(--m3-font-label-large-height);
-    letter-spacing: var(--m3-font-label-large-tracking);
-    font-weight: var(--m3-font-label-large-weight);
+    --shape: 1.25rem;
+    --square-shape: var(--m3-shape-medium);
+    --pressed-shape: var(--m3-shape-small);
+
+    &.icon-full {
+      width: 2.5rem;
+      padding: 0;
+    }
   }
 
   .m3-container.m {
-    height: calc(3.5rem + var(--m3-util-density-term));
+    @apply --m3-title-medium;
+    height: --m3-density(3.5rem);
     padding: 0 1.5rem;
     gap: 0.5rem;
-    --m3-button-shape: 1.75rem;
-    --m3-button-square-shape: var(--m3-util-rounding-large);
-    --m3-button-pressed-shape: var(--m3-util-rounding-medium);
-    font-family: var(--m3-font-title);
-    font-size: var(--m3-font-title-medium-size);
-    line-height: var(--m3-font-title-medium-height);
-    letter-spacing: var(--m3-font-title-medium-tracking);
-    font-weight: var(--m3-font-title-medium-weight);
+    --shape: 1.75rem;
+    --square-shape: var(--m3-shape-large);
+    --pressed-shape: var(--m3-shape-medium);
+
+    &.icon-left > :global(svg) {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    &.icon-full {
+      width: 3.5rem;
+      padding: 0;
+      > :global(svg) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
   }
 
   .m3-container.l {
-    height: calc(6rem + var(--m3-util-density-term));
+    @apply --m3-headline-small;
+    height: --m3-density(6rem);
     padding: 0 3rem;
     gap: 0.75rem;
-    --m3-button-shape: 3rem;
-    --m3-button-square-shape: var(--m3-util-rounding-extra-large);
-    --m3-button-pressed-shape: var(--m3-util-rounding-large);
-    font-family: var(--m3-font-headline);
-    font-size: var(--m3-font-headline-small-size);
-    line-height: var(--m3-font-headline-small-height);
-    letter-spacing: var(--m3-font-headline-small-tracking);
-    font-weight: var(--m3-font-headline-small-weight);
+    --shape: 3rem;
+    --square-shape: var(--m3-shape-extra-large);
+    --pressed-shape: var(--m3-shape-large);
+
+    &.icon-left > :global(svg) {
+      width: 2rem;
+      height: 2rem;
+    }
+    &.icon-full {
+      width: 6rem;
+      padding: 0;
+      > :global(svg) {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
   }
 
   .m3-container.xl {
-    height: calc(8.5rem + var(--m3-util-density-term));
+    @apply --m3-headline-large;
+    height: --m3-density(8.5rem);
     padding: 0 4rem;
     gap: 1rem;
-    --m3-button-shape: 4.25rem;
-    --m3-button-square-shape: var(--m3-util-rounding-extra-large);
-    --m3-button-pressed-shape: var(--m3-util-rounding-large);
-    font-family: var(--m3-font-headline);
-    font-size: var(--m3-font-headline-large-size);
-    line-height: var(--m3-font-headline-large-height);
-    letter-spacing: var(--m3-font-headline-large-tracking);
-    font-weight: var(--m3-font-headline-large-weight);
+    --shape: 4.25rem;
+    --square-shape: var(--m3-shape-extra-large);
+    --pressed-shape: var(--m3-shape-large);
+
+    &.icon-left > :global(svg) {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+    &.icon-full {
+      width: 8.5rem;
+      padding: 0;
+      > :global(svg) {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+    }
   }
 
   .m3-container {
     display: inline-flex;
     border: none;
-    border-radius: var(--m3-button-shape);
+    border-radius: var(--shape);
     transition:
-      border-radius var(--m3-util-easing-fast-spatial),
-      box-shadow var(--m3-util-easing-fast),
-      background-color var(--m3-util-easing-fast),
-      color var(--m3-util-easing-fast);
+      border-radius var(--m3-easing-fast-spatial),
+      box-shadow var(--m3-easing-fast),
+      background-color var(--m3-easing-fast),
+      color var(--m3-easing-fast);
 
     align-items: center;
     justify-content: center;
@@ -143,43 +172,43 @@
 
     &:disabled,
     &:is(:global(input:disabled) + label) {
-      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
-      color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 0.12);
+      color: --translucent(var(--m3c-on-surface), 0.38);
       cursor: auto;
     }
 
     &.elevated:not(:disabled, :global(input:disabled) + label) {
-      background-color: rgb(var(--m3-scheme-surface-container-low));
-      color: rgb(var(--m3-scheme-primary));
-      box-shadow: var(--m3-util-elevation-1);
+      background-color: var(--m3c-surface-container-low);
+      color: var(--m3c-primary);
+      box-shadow: var(--m3-elevation-1);
       &:is(:global(input:checked) + .m3-container) {
-        background-color: rgb(var(--m3-scheme-primary));
-        color: rgb(var(--m3-scheme-on-primary));
+        background-color: var(--m3c-primary);
+        color: var(--m3c-on-primary);
       }
       @media (hover: hover) {
         &:hover {
-          box-shadow: var(--m3-util-elevation-2);
+          box-shadow: var(--m3-elevation-2);
         }
       }
     }
     &.filled:not(:disabled, :global(input:disabled) + label) {
-      background-color: rgb(var(--m3-scheme-primary));
-      color: rgb(var(--m3-scheme-on-primary));
+      background-color: var(--m3c-primary);
+      color: var(--m3c-on-primary);
       &:is(:global(input:is([type="checkbox"], [type="radio"]):not(:checked)) + label) {
-        background-color: rgb(var(--m3-scheme-surface-container));
-        color: rgb(var(--m3-scheme-on-surface-variant));
+        background-color: var(--m3c-surface-container);
+        color: var(--m3c-on-surface-variant);
       }
     }
     &.tonal:not(:disabled, :global(input:disabled) + label) {
-      background-color: rgb(var(--m3-scheme-secondary-container));
-      color: rgb(var(--m3-scheme-on-secondary-container));
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
       &:is(:global(input:checked) + label) {
-        background-color: rgb(var(--m3-scheme-secondary));
-        color: rgb(var(--m3-scheme-on-secondary));
+        background-color: var(--m3c-secondary);
+        color: var(--m3c-on-secondary);
       }
     }
     &.outlined {
-      outline: 1px solid rgb(var(--m3-scheme-outline-variant));
+      outline: 1px solid var(--m3c-outline-variant);
       outline-offset: -1px;
     }
     &.outlined.l {
@@ -191,96 +220,43 @@
       outline-offset: -3px;
     }
     &.outlined:not(:disabled, :global(input:disabled) + label) {
-      outline-color: rgb(var(--m3-scheme-outline-variant));
-      color: rgb(var(--m3-scheme-on-surface-variant));
+      outline-color: var(--m3c-outline-variant);
+      color: var(--m3c-on-surface-variant);
       &:is(:global(input:checked) + label) {
-        outline-color: rgb(var(--m3-scheme-inverse-surface));
-        background-color: rgb(var(--m3-scheme-inverse-surface));
-        color: rgb(var(--m3-scheme-inverse-on-surface));
+        outline-color: var(--m3c-inverse-surface);
+        background-color: var(--m3c-inverse-surface);
+        color: var(--m3c-inverse-on-surface);
       }
     }
     &.outlined:is(:disabled, :global(input:disabled) + label) {
-      outline-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      outline-color: --translucent(var(--m3c-on-surface), 0.12);
       background-color: transparent;
     }
     &.text:not(:disabled, :global(input:disabled) + label) {
-      color: rgb(var(--m3-scheme-primary));
+      color: var(--m3c-primary);
     }
     @media (hover: hover) {
       &:is(.filled, .tonal):not(:disabled, label):hover {
-        box-shadow: var(--m3-util-elevation-1);
+        box-shadow: var(--m3-elevation-1);
       }
     }
 
     &.square:not(:is(:global(input:checked) + label, :global(:open) > summary)),
     &:is(:global(input:checked) + label, :global(:open) > summary):not(.square) {
-      border-radius: var(--m3-button-square-shape);
+      border-radius: var(--square-shape);
     }
     &:active:not(:disabled, :global(input:disabled) + label) {
-      border-radius: var(--m3-button-pressed-shape) !important;
+      border-radius: var(--pressed-shape) !important;
     }
   }
 
   .m3-container > :global(*) {
     flex-shrink: 0;
   }
-
-  .xs.icon-left > :global(svg),
-  .s.icon-left > :global(svg) {
+  .m3-container > :global(svg) {
     width: 1.25rem;
     height: 1.25rem;
   }
-  .m.icon-left > :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  .l.icon-left > :global(svg) {
-    width: 2rem;
-    height: 2rem;
-  }
-  .xl.icon-left > :global(svg) {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  .xs.icon-full {
-    width: 2rem;
-    padding: 0;
-  }
-  .s.icon-full {
-    width: 2.5rem;
-    padding: 0;
-  }
-  .m.icon-full {
-    width: 3.5rem;
-    padding: 0;
-  }
-  .l.icon-full {
-    width: 6rem;
-    padding: 0;
-  }
-  .xl.icon-full {
-    width: 8.5rem;
-    padding: 0;
-  }
-
-  .xs.icon-full > :global(svg),
-  .s.icon-full > :global(svg) {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-  .m.icon-full > :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  .l.icon-full > :global(svg) {
-    width: 2rem;
-    height: 2rem;
-  }
-  .xl.icon-full > :global(svg) {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
 
   .m3-container {
     print-color-adjust: exact;

package/package/buttons/ConnectedButtons.svelte

@@ -14,7 +14,7 @@
     grid-auto-flow: column;
     grid-auto-columns: 1fr;
     gap: 0.125rem;
-    border-radius: var(--m3-util-rounding-full);
+    border-radius: var(--m3-shape-full);
     overflow: hidden;
 
     > :global(input) {

package/package/buttons/FAB.svelte

@@ -38,7 +38,7 @@
 
 <button
   type="button"
-  class="m3-container m3-font-label-large color-{color} size-{size} elevation-{elevation}"
+  class="m3-container color-{color} size-{size} elevation-{elevation}"
   {...extra}
 >
   <Layer />
@@ -53,12 +53,13 @@
 <style>
   @layer tokens {
     :root {
-      --m3-fab-small-shape: var(--m3-util-rounding-small);
-      --m3-fab-normal-shape: var(--m3-util-rounding-large);
-      --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
+      --m3-fab-small-shape: var(--m3-shape-small);
+      --m3-fab-normal-shape: var(--m3-shape-large);
+      --m3-fab-large-shape: var(--m3-shape-extra-large);
     }
   }
   button {
+    @apply --m3-label-large;
     display: inline-flex;
     border: none;
     position: relative;
@@ -70,10 +71,10 @@
   }
 
   .elevation-normal {
-    box-shadow: var(--m3-util-elevation-3);
+    box-shadow: var(--m3-elevation-3);
   }
   .elevation-lowered {
-    box-shadow: var(--m3-util-elevation-1);
+    box-shadow: var(--m3-elevation-1);
   }
 
   .size-small {
@@ -105,36 +106,36 @@
   }
 
   .color-primary {
-    background-color: rgb(var(--m3-scheme-primary));
-    color: rgb(var(--m3-scheme-on-primary));
+    background-color: var(--m3c-primary);
+    color: var(--m3c-on-primary);
   }
   .color-secondary {
-    background-color: rgb(var(--m3-scheme-secondary));
-    color: rgb(var(--m3-scheme-on-secondary));
+    background-color: var(--m3c-secondary);
+    color: var(--m3c-on-secondary);
   }
   .color-tertiary {
-    background-color: rgb(var(--m3-scheme-tertiary));
-    color: rgb(var(--m3-scheme-on-tertiary));
+    background-color: var(--m3c-tertiary);
+    color: var(--m3c-on-tertiary);
   }
   .color-primary-container {
-    background-color: rgb(var(--m3-scheme-primary-container));
-    color: rgb(var(--m3-scheme-on-primary-container));
+    background-color: var(--m3c-primary-container);
+    color: var(--m3c-on-primary-container);
   }
   .color-secondary-container {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
+    background-color: var(--m3c-secondary-container);
+    color: var(--m3c-on-secondary-container);
   }
   .color-tertiary-container {
-    background-color: rgb(var(--m3-scheme-tertiary-container));
-    color: rgb(var(--m3-scheme-on-tertiary-container));
+    background-color: var(--m3c-tertiary-container);
+    color: var(--m3c-on-tertiary-container);
   }
 
   @media (hover: hover) {
     .elevation-normal:hover {
-      box-shadow: var(--m3-util-elevation-4);
+      box-shadow: var(--m3-elevation-4);
     }
     .elevation-lowered:hover {
-      box-shadow: var(--m3-util-elevation-2);
+      box-shadow: var(--m3-elevation-2);
     }
   }
 

package/package/buttons/SplitButton.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <div class="m3-container {variant}">
-  <button type="button" class="split m3-font-label-large" {...extra}>
+  <button type="button" class="split" {...extra}>
     <Layer />
     {@render children()}
   </button>
@@ -53,8 +53,8 @@
   @layer tokens {
     :root {
       --m3-split-button-outer-shape: 1.25rem;
-      --m3-split-button-half-shape: var(--m3-util-rounding-medium);
-      --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
+      --m3-split-button-half-shape: var(--m3-shape-medium);
+      --m3-split-button-inner-shape: var(--m3-shape-extra-small);
     }
   }
 
@@ -64,28 +64,28 @@
     gap: 0.125rem;
 
     &.elevated .split {
-      background-color: rgb(var(--m3-scheme-surface-container-low));
-      color: rgb(var(--m3-scheme-primary));
-      box-shadow: var(--m3-util-elevation-1);
+      background-color: var(--m3c-surface-container-low);
+      color: var(--m3c-primary);
+      box-shadow: var(--m3-elevation-1);
       &:hover {
-        box-shadow: var(--m3-util-elevation-2);
+        box-shadow: var(--m3-elevation-2);
       }
     }
 
     &.filled .split {
-      background-color: rgb(var(--m3-scheme-primary));
-      color: rgb(var(--m3-scheme-on-primary));
+      background-color: var(--m3c-primary);
+      color: var(--m3c-on-primary);
     }
 
     &.tonal .split {
-      background-color: rgb(var(--m3-scheme-secondary-container));
-      color: rgb(var(--m3-scheme-on-secondary-container));
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
     }
 
     &.outlined .split {
-      outline: 1px solid rgb(var(--m3-scheme-outline-variant));
+      outline: 1px solid var(--m3c-outline-variant);
       outline-offset: -1px;
-      color: rgb(var(--m3-scheme-on-surface-variant));
+      color: var(--m3c-on-surface-variant);
     }
   }
 
@@ -93,7 +93,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: calc(2.5rem + var(--m3-util-density-term));
+    height: --m3-density(2.5rem);
     gap: 0.5rem;
 
     cursor: pointer;
@@ -102,11 +102,12 @@
 
     position: relative;
     transition:
-      box-shadow var(--m3-util-easing-fast),
-      border-radius var(--m3-util-easing-fast);
+      box-shadow var(--m3-easing-fast),
+      border-radius var(--m3-easing-fast);
   }
 
   button {
+    @apply --m3-label-large;
     padding-inline-start: 1rem;
     padding-inline-end: 0.75rem;
     border-start-start-radius: var(--m3-split-button-outer-shape);
@@ -155,11 +156,11 @@
     > :global(svg) {
       /* Push away from the most rounded side */
       --shape-delta: calc(var(--inner-shape) - var(--outer-shape));
-      --correction: calc(var(--m3-util-optical-centering-coefficient) * var(--shape-delta));
+      --correction: calc(var(--m3-optical-centering-coefficient) * var(--shape-delta));
       translate: var(--correction) 0;
       transition:
-        rotate var(--m3-util-easing-fast),
-        translate var(--m3-util-easing-fast);
+        rotate var(--m3-easing-fast),
+        translate var(--m3-easing-fast);
     }
   }
   details > :global(:not(summary)) :global {

package/package/containers/BottomSheet.svelte

@@ -92,7 +92,7 @@
 <style>
   @layer tokens {
     :root {
-      --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
+      --m3-bottom-sheet-shape: var(--m3-shape-extra-large);
     }
   }
 
@@ -103,14 +103,14 @@
     overflow: hidden;
     touch-action: none;
 
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    color: rgb(var(--m3-scheme-on-surface));
+    background-color: var(--m3c-surface-container-low);
+    color: var(--m3c-on-surface);
     border-radius: var(--m3-bottom-sheet-shape) var(--m3-bottom-sheet-shape) 0 0;
     border: none;
     padding: 0;
   }
   dialog::backdrop {
-    background-color: rgb(var(--m3-scheme-scrim) / 0.5);
+    background-color: --translucent(var(--m3c-scrim), 0.5);
     animation: backdrop 400ms;
   }
   dialog:global(.leaving)::backdrop {
@@ -129,7 +129,7 @@
     cursor: grab;
   }
   .handle {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.4);
+    background-color: --translucent(var(--m3c-on-surface-variant), 0.4);
     width: 2rem;
     height: 0.25rem;
     border-radius: 0.25rem;
@@ -139,12 +139,12 @@
       background-color: transparent;
     }
     100% {
-      background-color: rgb(var(--m3-scheme-scrim) / 0.5);
+      background-color: --translucent(var(--m3c-scrim), 0.5);
     }
   }
   @keyframes backdropReverse {
     0% {
-      background-color: rgb(var(--m3-scheme-scrim) / 0.5);
+      background-color: --translucent(var(--m3c-scrim), 0.5);
     }
     100% {
       background-color: transparent;

package/package/containers/Card.svelte

@@ -29,7 +29,7 @@
 <style>
   @layer tokens {
     :root {
-      --m3-card-shape: var(--m3-util-rounding-medium);
+      --m3-card-shape: var(--m3-shape-medium);
     }
   }
 
@@ -40,9 +40,9 @@
     padding: 1rem; /* protip: use margin: -1rem (adjust as needed) to make images stretch to the end */
     border: none;
     border-radius: var(--m3-card-shape);
-    background-color: rgb(var(--m3-scheme-surface));
-    --m3-util-background: rgb(var(--m3-scheme-surface));
-    color: rgb(var(--m3-scheme-on-surface));
+    background-color: var(--m3c-surface);
+    --m3v-background: var(--m3c-surface);
+    color: var(--m3c-on-surface);
   }
 
   button {
@@ -53,24 +53,24 @@
   }
   @media (hover: hover) {
     button:hover {
-      box-shadow: var(--m3-util-elevation-1);
+      box-shadow: var(--m3-elevation-1);
     }
     button.type-elevated:hover {
-      box-shadow: var(--m3-util-elevation-2);
+      box-shadow: var(--m3-elevation-2);
     }
   }
 
   .elevated {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    --m3-util-background: rgb(var(--m3-scheme-surface-container-low));
-    box-shadow: var(--m3-util-elevation-1);
+    background-color: var(--m3c-surface-container-low);
+    --m3v-background: var(--m3c-surface-container-low);
+    box-shadow: var(--m3-elevation-1);
   }
   .filled {
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-    --m3-util-background: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
+    --m3v-background: var(--m3c-surface-container-highest);
   }
   .outlined {
-    border: solid 1px rgb(var(--m3-scheme-outline-variant));
+    border: solid 1px var(--m3c-outline-variant);
   }
 
   @media print, (forced-colors: active) {