m3-svelte 6.0.0 → 6.0.2

package/README.md

@@ -1,3 +1,3 @@
-# m3-svelte
+# M3 Svelte
 
 M3 Svelte implements the Material 3 design system in Svelte. See the [website](https://ktibow.github.io/m3-svelte/) for demos and usage instructions.

package/package/buttons/Button.svelte

@@ -55,14 +55,8 @@
 
 <style>
   .m3-container.xs {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
-    height: calc(2rem + (var(--m3v-density) * 0.25rem));
+    @apply --m3-label-large;
+    height: --m3-density(2rem);
     padding: 0 0.75rem;
     gap: 0.5rem;
     --shape: 1rem;
@@ -76,14 +70,8 @@
   }
 
   .m3-container.s {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
-    height: calc(2.5rem + (var(--m3v-density) * 0.25rem));
+    @apply --m3-label-large;
+    height: --m3-density(2.5rem);
     padding: 0 1rem;
     gap: 0.5rem;
     --shape: 1.25rem;
@@ -97,14 +85,8 @@
   }
 
   .m3-container.m {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 500;
-
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    @apply --m3-title-medium;
+    height: --m3-density(3.5rem);
     padding: 0 1.5rem;
     gap: 0.5rem;
     --shape: 1.75rem;
@@ -126,14 +108,8 @@
   }
 
   .m3-container.l {
-    
-  font-family: var(--m3-font);
-  font-size: 1.5rem;
-  line-height: 1.333;
-  letter-spacing: 0;
-  font-weight: 400;
-
-    height: calc(6rem + (var(--m3v-density) * 0.25rem));
+    @apply --m3-headline-small;
+    height: --m3-density(6rem);
     padding: 0 3rem;
     gap: 0.75rem;
     --shape: 3rem;
@@ -155,14 +131,8 @@
   }
 
   .m3-container.xl {
-    
-  font-family: var(--m3-font);
-  font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: 0;
-  font-weight: 400;
-
-    height: calc(8.5rem + (var(--m3v-density) * 0.25rem));
+    @apply --m3-headline-large;
+    height: --m3-density(8.5rem);
     padding: 0 4rem;
     gap: 1rem;
     --shape: 4.25rem;
@@ -202,8 +172,8 @@
 
     &:disabled,
     &:is(:global(input:disabled) + label) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 0.12);
+      color: --translucent(var(--m3c-on-surface), 0.38);
       cursor: auto;
     }
 
@@ -259,7 +229,7 @@
       }
     }
     &.outlined:is(:disabled, :global(input:disabled) + label) {
-      outline-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+      outline-color: --translucent(var(--m3c-on-surface), 0.12);
       background-color: transparent;
     }
     &.text:not(:disabled, :global(input:disabled) + label) {
@@ -271,8 +241,8 @@
       }
     }
 
-    &.square:not(:is(:global(input:checked) + label, :global(:open) > summary)),
-    &:is(:global(input:checked) + label, :global(:open) > summary):not(.square) {
+    &.square:not(:global(input:checked) + label, :global(:open) > summary),
+    &:not(.square):is(:global(input:checked) + label, :global(:open) > summary) {
       border-radius: var(--square-shape);
     }
     &:active:not(:disabled, :global(input:disabled) + label) {
@@ -290,7 +260,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .m3-container:is(.elevated, .filled, .tonal) {

package/package/buttons/FAB.svelte

@@ -59,13 +59,7 @@
     }
   }
   button {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     display: inline-flex;
     border: none;
     position: relative;
@@ -147,7 +141,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     button {

package/package/buttons/SplitButton.svelte

@@ -93,7 +93,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: calc(2.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(2.5rem);
     gap: 0.5rem;
 
     cursor: pointer;
@@ -107,13 +107,7 @@
   }
 
   button {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     padding-inline-start: 1rem;
     padding-inline-end: 0.75rem;
     border-start-start-radius: var(--m3-split-button-outer-shape);
@@ -187,6 +181,5 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
 </style>

package/package/containers/BottomSheet.svelte

@@ -110,7 +110,7 @@
     padding: 0;
   }
   dialog::backdrop {
-    background-color: oklab(from var(--m3c-scrim) l a b / 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: oklab(from var(--m3c-on-surface-variant) l a b / 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: oklab(from var(--m3c-scrim) l a b / 0.5);
+      background-color: --translucent(var(--m3c-scrim), 0.5);
     }
   }
   @keyframes backdropReverse {
     0% {
-      background-color: oklab(from var(--m3c-scrim) l a b / 0.5);
+      background-color: --translucent(var(--m3c-scrim), 0.5);
     }
     100% {
       background-color: transparent;

package/package/containers/Dialog.svelte

@@ -76,13 +76,7 @@
     }
   }
   .headline {
-    
-  font-family: var(--m3-font);
-  font-size: 1.5rem;
-  line-height: 1.333;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-headline-small;
     color: var(--m3c-on-surface);
     margin-top: 0;
     margin-bottom: 1rem;
@@ -91,13 +85,7 @@
     text-align: center;
   }
   .content {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.016rem;
-  font-weight: 400;
-
+    @apply --m3-body-medium;
     color: var(--m3c-on-surface-variant);
     margin-bottom: 1.5rem;
   }
@@ -137,7 +125,7 @@
       opacity var(--m3-easing-fast) 100ms backwards;
   }
   dialog::backdrop {
-    background-color: oklab(from var(--m3c-scrim) l a b / 0.3);
+    background-color: --translucent(var(--m3c-scrim), 0.3);
     animation: opacity var(--m3-timing-function-emphasized-decel) 500ms;
   }
   @keyframes dialogIn {

package/package/containers/ListItem.svelte

@@ -93,13 +93,13 @@
     cursor: pointer;
   }
   .lines-1 {
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
   }
   .lines-2 {
-    height: calc(4.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(4.5rem);
   }
   .lines-3 {
-    height: calc(5.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(5.5rem);
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
     align-items: flex-start;
@@ -113,13 +113,7 @@
     color: var(--m3c-on-surface-variant);
   }
   .trailing {
-    
-  font-family: var(--m3-font);
-  font-size: 0.688rem;
-  line-height: 1.455;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+    @apply --m3-label-small;
   }
   .leading > :global(svg),
   .trailing > :global(svg) {
@@ -132,33 +126,15 @@
     margin: 0;
   }
   .supporting {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.016rem;
-  font-weight: 400;
-
+    @apply --m3-body-medium;
     color: var(--m3c-on-surface-variant);
   }
   .overline- {
-    
-  font-family: var(--m3-font);
-  font-size: 0.688rem;
-  line-height: 1.455;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+    @apply --m3-label-small;
     color: var(--m3c-on-surface-variant);
   }
   .headline {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     color: var(--m3c-on-surface);
   }
 </style>

package/package/containers/MenuItem.svelte

@@ -31,16 +31,10 @@
 
 <style>
   .item {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     display: flex;
     align-items: center;
-    height: calc(3rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3rem);
     padding: 0 0.75rem;
     gap: 0.75rem;
     white-space: nowrap;
@@ -63,10 +57,10 @@
   }
 
   .item:disabled {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: auto;
   }
   .item:disabled > .icon > :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
 </style>

package/package/containers/Snackbar.svelte

@@ -27,7 +27,7 @@
   let shown:
     | { message: string; actions: Record<string, () => void>; closable: boolean }
     | undefined = $state();
-  let timeoutId: number;
+  let timeoutId: ReturnType<typeof setTimeout>;
   _show = (message, actions = {}, closable = false, timeout = 4000) => {
     clearTimeout(timeoutId);
     shown = { message, actions, closable };
@@ -86,13 +86,7 @@
     z-index: 3;
   }
   p {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.016rem;
-  font-weight: 400;
-
+    @apply --m3-body-medium;
     margin-right: auto;
   }
   button {
@@ -114,13 +108,7 @@
   }
 
   .action {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     color: var(--m3c-inverse-primary);
     padding: 0 0.5rem;
   }

package/package/containers/StandardSideSheet.svelte

@@ -38,13 +38,7 @@
     padding: 1.5rem;
   }
   .header > span {
-    
-  font-family: var(--m3-font);
-  font-size: 1.375rem;
-  line-height: 1.273;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-title-large;
   }
   .header > :global(button.m3-container) {
     color: var(--m3c-on-surface-variant);

package/package/forms/Checkbox.svelte

@@ -93,7 +93,7 @@
   }
 
   :global(input:disabled) + .layer-container {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: not-allowed;
   }
 
@@ -101,7 +101,7 @@
     color: transparent;
   }
   :global(input:disabled:checked) + .layer-container .checkbox-box {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.38);
   }
 
   :global(input:disabled) ~ svg {
@@ -110,7 +110,6 @@
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     :global(input:checked) + .layer-container .checkbox-box {

package/package/forms/Chip.svelte

@@ -105,13 +105,7 @@
   }
 
   span {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
   }
 
   .assist {
@@ -147,9 +141,9 @@
   .m3-container:disabled {
     cursor: auto;
     box-shadow: none;
-    border-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+    border-color: --translucent(var(--m3c-on-surface), 0.12);
     background-color: var(--m3c-surface);
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   .selected:disabled,
   .elevated:disabled {
@@ -157,12 +151,11 @@
   }
   .selected:disabled,
   .elevated:disabled {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+    background-color: --translucent(var(--m3c-on-surface), 0.12);
   }
 
   .m3-container {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .selected {

package/package/forms/CircularProgressEstimate.svelte

@@ -55,39 +55,7 @@
   }
 
   .percent {
-    animation: grow
-      linear(
-        0,
-        0.08 1.5%,
-        0.15 2.93%,
-        0.22 4.48%,
-        0.29 6.18%,
-        0.35 7.77%,
-        0.41 9.52%,
-        0.47 11.45%,
-        0.52 13.24%,
-        0.57 15.22%,
-        0.61 16.98%,
-        0.65 18.93%,
-        0.69 21.12%,
-        0.73 23.61%,
-        0.76 25.74%,
-        0.79 28.14%,
-        0.82 30.92%,
-        0.84 33.05%,
-        0.86 35.46%,
-        0.88 38.24%,
-        0.9 41.52%,
-        0.92 45.55%,
-        0.93 47.96%,
-        0.95 54.02%,
-        0.96 58.05%,
-        0.97 63.24%,
-        0.98 70.55%,
-        0.99 83.05%,
-        1
-      )
-      var(--speed) both;
+    animation: grow var(--m3-timing-function-zeno) var(--speed) both;
   }
 
   @keyframes grow {

package/package/forms/DateField.svelte

@@ -116,7 +116,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
   .m3-container {
     position: relative;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     min-width: 15rem;
     background-color: var(--m3c-surface-container-highest);
     border-radius: var(--m3-field-shape) var(--m3-field-shape) 0 0;
@@ -124,13 +124,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     anchor-name: var(--anchor-name);
   }
   input {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     position: absolute;
     inset: 0;
     width: 100%;
@@ -152,13 +146,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     color: var(--m3c-on-surface);
   }
   label {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+    @apply --m3-body-small;
     position: absolute;
     inset-inline-start: 1rem;
     top: 0.5rem;
@@ -185,15 +173,15 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
 
   .m3-container.disabled {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
-    border-bottom-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.04);
+    border-bottom-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled,
   input:disabled + label {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   button:disabled {
-    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface-variant), 0.38);
     cursor: auto;
   }
 

package/package/forms/DateFieldOutlined.svelte

@@ -122,18 +122,12 @@ opacity: ${Math.min(t * 3, 1)};`,
   .m3-container {
     display: inline-flex;
     position: relative;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     min-width: 15rem;
     anchor-name: var(--anchor-name);
   }
   input {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     position: absolute;
     inset: 0;
     width: 100%;
@@ -156,13 +150,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     color: var(--m3c-on-surface);
   }
   label {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+    @apply --m3-body-small;
     position: absolute;
     inset-inline-start: 0.75rem;
     top: 0;
@@ -177,7 +165,7 @@ opacity: ${Math.min(t * 3, 1)};`,
       color: var(--error, var(--m3c-primary));
     }
     &:is(input:disabled ~ label) {
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      color: --translucent(var(--m3c-on-surface), 0.38);
     }
     pointer-events: none;
     transition: color 100ms;
@@ -197,7 +185,7 @@ opacity: ${Math.min(t * 3, 1)};`,
       border-width: 0.125rem;
     }
     &:is(input:disabled ~ .layer) {
-      border-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      border-color: --translucent(var(--m3c-on-surface), 0.38);
     }
   }
 
@@ -221,12 +209,12 @@ opacity: ${Math.min(t * 3, 1)};`,
 
   @media (hover: hover) {
     button:hover {
-      background-color: oklab(from var(--m3c-on-surface-variant) l a b / 0.08);
+      background-color: --translucent(var(--m3c-on-surface-variant), 0.08);
     }
   }
   button:focus-visible,
   button:active {
-    background-color: oklab(from var(--m3c-on-surface-variant) l a b / 0.12);
+    background-color: --translucent(var(--m3c-on-surface-variant), 0.12);
   }
 
   .error {
@@ -241,10 +229,10 @@ opacity: ${Math.min(t * 3, 1)};`,
     opacity: 0.38;
   }
   input:disabled {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   button:disabled {
-    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface-variant), 0.38);
     cursor: auto;
   }