m3-svelte 6.0.0 → 6.0.1

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) {

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;

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);

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

@@ -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 {

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,7 +151,7 @@
   }
   .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 {

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;
   }
 

package/package/forms/RadioAnim1.svelte

@@ -79,7 +79,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;
   }
 

package/package/forms/RadioAnim2.svelte

@@ -79,7 +79,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;
   }
 

package/package/forms/RadioAnim3.svelte

@@ -79,7 +79,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;
   }
 

package/package/forms/Select.svelte

@@ -70,13 +70,7 @@
     }
   }
   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;
     top: 0.5rem;
     inset-inline: 1rem;
@@ -94,16 +88,10 @@
   }
 
   select {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     display: flex;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     padding-top: 1rem;
     padding-inline: 1rem;
 
@@ -181,7 +169,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
-    padding-block: calc((calc(3rem + (var(--m3v-density) * 0.25rem)) - 1lh) / 2);
+    padding-block: calc((--m3-density(3rem) - 1lh) / 2);
     &:first-child {
       margin-top: 0.5rem;
     }

package/package/forms/SelectOutlined.svelte

@@ -86,13 +86,7 @@
     transition: all 100ms;
   }
   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;
     top: 0;
     inset-inline-start: 0.75rem;
@@ -113,16 +107,10 @@
   }
 
   select {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     display: flex;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     padding-inline: 1rem;
 
     border-radius: var(--m3-field-outlined-shape);
@@ -188,7 +176,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
-    padding-block: calc((calc(3rem + (var(--m3v-density) * 0.25rem)) - 1lh) / 2);
+    padding-block: calc((--m3-density(3rem) - 1lh) / 2);
     &:first-child {
       margin-top: 0.5rem;
     }