m3-svelte 6.0.0 → 6.0.1

package/package/forms/Slider.svelte

@@ -266,7 +266,7 @@
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .track-1) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 0.38);
       @media screen and (forced-colors: active) {
         background-color: canvastext;
       }
@@ -295,7 +295,7 @@
       background-color: canvastext;
     }
     &:is(input:disabled ~ .track-2) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+      background-color: --translucent(var(--m3c-on-surface), 0.12);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -324,7 +324,7 @@
     &:is(.track-2 > .stop) {
       background-color: var(--m3c-primary);
       &:is(input:disabled ~ .track-2 > .stop) {
-        background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+        background-color: --translucent(var(--m3c-on-surface), 0.38);
       }
     }
     pointer-events: none;
@@ -352,7 +352,7 @@
       background-color: selecteditem;
     }
     &:is(input:disabled ~ .handle) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      background-color: --translucent(var(--m3c-on-surface), 0.38);
       @media screen and (forced-colors: active) {
         background-color: graytext;
       }
@@ -360,13 +360,7 @@
   }
 
   .value {
-    
-  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;
     justify-content: center;

package/package/forms/Switch.svelte

@@ -159,10 +159,10 @@
     color: var(--m3c-on-primary-container);
   }
   .m3-container:hover > input ~ .hover {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
+    background-color: --translucent(var(--m3c-on-surface), 0.08);
   }
   .m3-container:hover > input:checked ~ .hover {
-    background-color: oklab(from var(--m3c-primary) l a b / 0.08);
+    background-color: --translucent(var(--m3c-primary), 0.08);
   }
 
   input:checked {
@@ -189,23 +189,23 @@
   }
 
   input:disabled {
-    background-color: oklab(from var(--m3c-surface-container-highest) l a b / 0.12);
-    border-color: oklab(from var(--m3c-outline) l a b / 0.12);
+    background-color: --translucent(var(--m3c-surface-container-highest), 0.12);
+    border-color: --translucent(var(--m3c-outline), 0.12);
     cursor: auto;
   }
   input:disabled:checked {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.12);
+    background-color: --translucent(var(--m3c-on-surface), 0.12);
     border-color: transparent;
   }
   input:disabled + .handle {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.38);
     cursor: auto;
   }
   input:disabled:checked + .handle {
     background-color: var(--m3c-surface);
   }
   input:disabled:checked + .handle > :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled ~ .hover {
     display: none;

package/package/forms/TextField.svelte

@@ -69,17 +69,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     min-width: 15rem;
   }
   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%;
@@ -92,13 +86,7 @@
     color: var(--m3c-on-surface);
   }
   label {
-    
-  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-inline-start: 1rem;
     top: 50%;
@@ -111,16 +99,10 @@
       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);
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ 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;
       top: 0.5rem;
       translate: 0 0;
     }
@@ -140,7 +122,7 @@
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
+      background-color: --translucent(var(--m3c-on-surface), 0.08);
     }
   }
   .layer::after {
@@ -203,14 +185,14 @@
     --error: var(--m3c-on-error-container);
   }
   input:disabled {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.04);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled ~ .layer::after {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   input:disabled ~ :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
 
   .m3-container {

package/package/forms/TextFieldMultiline.svelte

@@ -63,17 +63,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: calc(5rem + (var(--m3v-density) * 0.25rem));
+    min-height: --m3-density(5rem);
     min-width: 15rem;
   }
   textarea {
-    
-  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%;
@@ -87,13 +81,7 @@
     resize: none;
   }
   label {
-    
-  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-inline-start: 1rem;
     top: 50%;
@@ -106,16 +94,10 @@
       color: var(--error, var(--m3c-primary));
     }
     &:is(textarea:disabled ~ label) {
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      color: --translucent(var(--m3c-on-surface), 0.38);
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ 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;
       top: 0.5rem;
       translate: 0 0;
     }
@@ -135,7 +117,7 @@
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {
-      background-color: oklab(from var(--m3c-on-surface) l a b / 0.08);
+      background-color: --translucent(var(--m3c-on-surface), 0.08);
     }
   }
   .layer::after {
@@ -177,14 +159,14 @@
     --error: var(--m3c-on-error-container);
   }
   textarea:disabled {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.04);
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.04);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ .layer::after {
-    background-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    background-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
 
   .m3-container {

package/package/forms/TextFieldOutlined.svelte

@@ -72,17 +72,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: calc(3.5rem + (var(--m3v-density) * 0.25rem));
+    height: --m3-density(3.5rem);
     min-width: 15rem;
   }
   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%;
@@ -95,13 +89,7 @@
     color: var(--m3c-on-surface);
   }
   label {
-    
-  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-inline-start: 0.75rem;
     top: 50%;
@@ -116,16 +104,10 @@
       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);
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ 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;
       top: 0;
     }
     pointer-events: none;
@@ -197,13 +179,13 @@
   }
 
   input:disabled {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   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);
   }
   input:disabled ~ :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
 
   .m3-container {

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -67,17 +67,11 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: calc(5rem + (var(--m3v-density) * 0.25rem));
+    min-height: --m3-density(5rem);
     min-width: 15rem;
   }
   textarea {
-    
-  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%;
@@ -91,13 +85,7 @@
     resize: none;
   }
   label {
-    
-  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-inline-start: 0.75rem;
     top: 50%;
@@ -112,16 +100,10 @@
       color: var(--error, var(--m3c-primary));
     }
     &:is(textarea:disabled ~ label) {
-      color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+      color: --translucent(var(--m3c-on-surface), 0.38);
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ 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;
       top: 0;
     }
     pointer-events: none;
@@ -172,13 +154,13 @@
   }
 
   textarea:disabled {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ .layer {
-    border-color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    border-color: --translucent(var(--m3c-on-surface), 0.38);
   }
   textarea:disabled ~ :global(svg) {
-    color: oklab(from var(--m3c-on-surface) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface), 0.38);
   }
 
   .m3-container {

package/package/forms/_picker/CalendarPicker.svelte

@@ -58,13 +58,7 @@
     gap: 0.25rem;
   }
   .day {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+    @apply --m3-body-small;
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;

package/package/forms/_picker/FocusPicker.svelte

@@ -35,13 +35,7 @@
     margin-bottom: 1.25rem;
   }
   button {
-    
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+    @apply --m3-body-large;
     display: inline-flex;
     align-items: center;
     height: 3rem;

package/package/forms/_picker/Header.svelte

@@ -108,17 +108,11 @@
   }
   button:disabled {
     cursor: auto;
-    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface-variant), 0.38);
   }
 
   .chooser {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-label-large;
     flex-grow: 1;
   }
   .chooser :global(svg) {

package/package/forms/_picker/Item.svelte

@@ -30,13 +30,7 @@
 
 <style>
   .item {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+    @apply --m3-body-small;
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;
@@ -53,7 +47,7 @@
   }
   button:disabled {
     cursor: auto;
-    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
+    color: --translucent(var(--m3c-on-surface-variant), 0.38);
   }
   .today {
     border: solid 1px var(--m3c-primary);

package/package/misc/recommended-styles.css

@@ -32,7 +32,7 @@
 }
 
 [placeholder]::placeholder {
-  color: oklab(from var(--m3c-on-background) l a b / 0.5);
+  color: --translucent(var(--m3c-on-background), 0.5);
   opacity: 1;
 }
 ::selection {

package/package/misc/styles.css

@@ -11,20 +11,20 @@
     --m3-elevation-0: none;
     --m3-elevation-1:
     /* Spot */
-      0px 1px 2px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      /* Ambient */ 0px 1px 3px 1px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 1px 2px 0px --translucent(var(--m3c-shadow), 0.3),
+      /* Ambient */ 0px 1px 3px 1px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-2:
-      0px 1px 2px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 2px 6px 2px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 1px 2px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 2px 6px 2px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-3:
-      0px 1px 3px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 4px 8px 3px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 1px 3px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 4px 8px 3px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-4:
-      0px 2px 3px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 6px 10px 4px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 2px 3px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 6px 10px 4px --translucent(var(--m3c-shadow), 0.15);
     --m3-elevation-5:
-      0px 4px 4px 0px oklab(from var(--m3c-shadow) l a b / 0.3),
-      0px 8px 12px 6px oklab(from var(--m3c-shadow) l a b / 0.15);
+      0px 4px 4px 0px --translucent(var(--m3c-shadow), 0.3),
+      0px 8px 12px 6px --translucent(var(--m3c-shadow), 0.15);
 
     /* Shapes */
     --m3-shape-none: 0;

package/package/misc/tailwind-styles.css

@@ -125,139 +125,49 @@
 }
 
 @utility m3-font-display-large {
-  
-  font-family: var(--m3-font);
-  font-size: 3.563rem;
-  line-height: 1.123;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-display-large;
 }
 @utility m3-font-display-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 2.813rem;
-  line-height: 1.156;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-display-medium;
 }
 @utility m3-font-display-small {
-  
-  font-family: var(--m3-font);
-  font-size: 2.25rem;
-  line-height: 1.222;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-display-small;
 }
 @utility m3-font-headline-large {
-  
-  font-family: var(--m3-font);
-  font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-headline-large;
 }
 @utility m3-font-headline-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 1.75rem;
-  line-height: 1.286;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-headline-medium;
 }
 @utility m3-font-headline-small {
-  
-  font-family: var(--m3-font);
-  font-size: 1.5rem;
-  line-height: 1.333;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-headline-small;
 }
 @utility m3-font-title-large {
-  
-  font-family: var(--m3-font);
-  font-size: 1.375rem;
-  line-height: 1.273;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-title-large;
 }
 @utility m3-font-title-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 500;
-
+  @apply --m3-title-medium;
 }
 @utility m3-font-title-small {
-  
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+  @apply --m3-title-small;
 }
 @utility m3-font-label-large {
-  
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+  @apply --m3-label-large;
 }
 @utility m3-font-label-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+  @apply --m3-label-medium;
 }
 @utility m3-font-label-small {
-  
-  font-family: var(--m3-font);
-  font-size: 0.688rem;
-  line-height: 1.455;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+  @apply --m3-label-small;
 }
 @utility m3-font-body-large {
-  
-  font-family: var(--m3-font);
-  font-size: 1rem;
-  line-height: 1.5;
-  letter-spacing: 0;
-  font-weight: 400;
-
+  @apply --m3-body-large;
 }
 @utility m3-font-body-medium {
-  
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.016rem;
-  font-weight: 400;
-
+  @apply --m3-body-medium;
 }
 @utility m3-font-body-small {
-  
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.025rem;
-  font-weight: 400;
-
+  @apply --m3-body-small;
 }
 
 @layer base {