@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/core/scroll-track.ts

@@ -0,0 +1,106 @@
+import { whileVisible } from './loop';
+
+/*
+ * How far an element has travelled through the viewport, 0 → 1, between two
+ * ScrollTrigger-style positions ("<element edge> <viewport line>"), read from
+ * its box every frame while it is near the screen. Siena's trackers read a
+ * smooth-scrolled position (Lenis, .1 a frame); on a page that scrolls natively
+ * the effects follow it exactly (lerp 1), so a picture never drifts behind its
+ * frame — pass lerp .1 to smooth the effect alone. Parallax, depth grid and
+ * frame zoom render from it.
+ */
+
+export interface ScrollTrackOptions {
+  /** "<top|center|bottom|n%> <top|center|bottom|n%>" — default "top bottom" (the element enters). */
+  start?: string;
+  /** Default "bottom top" (the element has left). */
+  end?: string;
+  /** Share of the distance covered each 60 fps frame (default 1: follow the page exactly). */
+  lerp?: number;
+  onUpdate?: (value: number) => void;
+}
+
+export interface ScrollTrack {
+  readonly value: number;
+  readonly target: number;
+  /** Raw progress now, from the element's box. */
+  measure(): number;
+  /** Measure and ease one frame (dt = 1 at 60 Hz). */
+  update(dt?: number): void;
+  /** Jump to a value (manual control). */
+  set(value: number): void;
+  destroy(): void;
+}
+
+const clamp01 = (value: number) => Math.min(1, Math.max(0, value));
+
+function edgeOf(box: DOMRect, edge: string) {
+  if (edge === 'top') return box.top;
+  if (edge === 'bottom') return box.bottom;
+  if (edge === 'center') return box.top + box.height / 2;
+  if (edge.endsWith('%')) return box.top + (box.height * parseFloat(edge)) / 100;
+  return box.top + (parseFloat(edge) || 0);
+}
+
+function lineOf(height: number, line: string) {
+  if (line === 'top') return 0;
+  if (line === 'bottom') return height;
+  if (line === 'center') return height / 2;
+  if (line.endsWith('%')) return (height * parseFloat(line)) / 100;
+  return parseFloat(line) || 0;
+}
+
+export function trackScroll(
+  el: Element,
+  { start = 'top bottom', end = 'bottom top', lerp = 1, onUpdate }: ScrollTrackOptions = {},
+): ScrollTrack {
+  const [startEdge = 'top', startLine = 'bottom'] = start.trim().split(/\s+/);
+  const [endEdge = 'bottom', endLine = 'top'] = end.trim().split(/\s+/);
+  let destroyed = false;
+
+  const measure = () => {
+    const box = el.getBoundingClientRect();
+    const height = window.innerHeight;
+    // Both grow as the page scrolls down; their difference is the distance travelled.
+    const fromStart = lineOf(height, startLine) - edgeOf(box, startEdge);
+    const fromEnd = lineOf(height, endLine) - edgeOf(box, endEdge);
+    const distance = fromStart - fromEnd;
+    if (distance <= 0) return fromStart >= 0 ? 1 : 0;
+    return clamp01(fromStart / distance);
+  };
+
+  let target = measure();
+  let value = target;
+  onUpdate?.(value);
+
+  const update = (dt = 1) => {
+    if (destroyed) return;
+    target = measure();
+    const step = lerp >= 1 ? 1 : 1 - Math.pow(1 - Math.max(lerp, 0), dt);
+    value += (target - value) * step;
+    if (Math.abs(target - value) < 1e-4) value = target;
+    onUpdate?.(value);
+  };
+  const stop = whileVisible(el, update, '200px');
+
+  return {
+    get value() {
+      return value;
+    },
+    get target() {
+      return target;
+    },
+    measure,
+    update,
+    set(next: number) {
+      if (destroyed) return;
+      value = target = clamp01(next);
+      onUpdate?.(value);
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      stop();
+    },
+  };
+}

package/src/core/split.ts

@@ -0,0 +1,68 @@
+/**
+ * Split text for animation and put it back afterwards. Words become inline-block
+ * spans (so they can move); spaces stay plain text so lines still wrap. Elements
+ * matched by `exclude` (tables, code) are left whole.
+ */
+export interface Split {
+  parts: HTMLElement[];
+  revert(): void;
+}
+
+export interface SplitWordsOptions {
+  exclude?: string[];
+  className?: string;
+}
+
+export function splitWords(el: HTMLElement, { exclude = ['table', 'pre'], className = 'mk-split-word' }: SplitWordsOptions = {}): Split {
+  const parts: HTMLElement[] = [];
+  const replaced: Array<[Text, Node[]]> = [];
+  const skip = exclude.join(',');
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  const texts: Text[] = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const parent = (node as Text).parentElement;
+    if (skip && parent?.closest(skip) && el.contains(parent.closest(skip))) continue;
+    if ((node as Text).data.trim()) texts.push(node as Text);
+  }
+  for (const text of texts) {
+    const pieces = text.data.split(/(\s+)/);
+    const nodes: Node[] = [];
+    for (const piece of pieces) {
+      if (!piece) continue;
+      if (/^\s+$/.test(piece)) {
+        nodes.push(document.createTextNode(piece));
+        continue;
+      }
+      const span = document.createElement('span');
+      span.className = className;
+      span.style.display = 'inline-block';
+      span.textContent = piece;
+      parts.push(span);
+      nodes.push(span);
+    }
+    text.replaceWith(...nodes);
+    replaced.push([text, nodes]);
+  }
+  let reverted = false;
+  return {
+    parts,
+    revert() {
+      if (reverted) return;
+      reverted = true;
+      for (const [text, nodes] of replaced.reverse()) {
+        nodes[0]?.parentNode?.insertBefore(text, nodes[0]);
+        for (const node of nodes) node.parentNode?.removeChild(node);
+      }
+      el.normalize();
+    },
+  };
+}
+
+type Segmenter = { segment(text: string): Iterable<{ segment: string }> };
+
+/** User-perceived characters (emoji with modifiers stay whole), at most `limit`. */
+export function splitGraphemes(text: string, limit = 64): string[] {
+  const Ctor = (Intl as unknown as { Segmenter?: new (locale?: string, options?: { granularity: string }) => Segmenter }).Segmenter;
+  const all = Ctor ? Array.from(new Ctor(undefined, { granularity: 'grapheme' }).segment(text), (part) => part.segment) : Array.from(text);
+  return all.slice(0, limit);
+}

package/src/core/spring.ts

@@ -0,0 +1,22 @@
+export interface Vec { x: number; y: number }
+export interface Spring {
+  current: Vec;
+  target: Vec;
+  velocity: Vec;
+  update(dt?: number): void;
+}
+
+/** Spencer Gabor's spring (stiffness .05, friction .8), normalised so dt = 1 is one 60 Hz frame. */
+export function createSpring(stiffness = 0.05, friction = 0.8): Spring {
+  const current = { x: 0, y: 0 };
+  const target = { x: 0, y: 0 };
+  const velocity = { x: 0, y: 0 };
+  function update(dt = 1) {
+    const decay = Math.pow(friction, dt);
+    for (const axis of ['x', 'y'] as const) {
+      velocity[axis] = velocity[axis] * decay + (target[axis] - current[axis]) * stiffness * dt;
+      current[axis] = Math.round((current[axis] + velocity[axis] * dt) * 100) / 100;
+    }
+  }
+  return { current, target, velocity, update };
+}

package/src/core/styles.ts

@@ -0,0 +1,31 @@
+/**
+ * Remove inline properties GSAP wrote, without asking GSAP. `gsap.set(el,
+ * { clearProps: 'transform' })` measures the element first, and an element
+ * that is not rendered (a closed <dialog>, display: none) is moved to the end of
+ * the document and back to be measured — which reorders text around it and
+ * disconnects custom elements inside. This only edits the style attribute and
+ * drops GSAP's cache so the next tween starts from scratch.
+ */
+export function clearStyles(targets: Iterable<Element>, properties: string[]) {
+  for (const element of targets) {
+    const style = (element as HTMLElement).style;
+    if (!style) continue;
+    for (const property of properties) style.removeProperty(property);
+    if (element.getAttribute('style') === '') element.removeAttribute('style');
+    delete (element as unknown as { _gsap?: unknown })._gsap;
+  }
+}
+
+/** What the surface morphs write. */
+export const MORPH_STYLES = [
+  'transform',
+  'translate',
+  'rotate',
+  'scale',
+  'transform-origin',
+  'clip-path',
+  'opacity',
+  'visibility',
+  'filter',
+  'will-change',
+];

package/src/core/timing.ts

@@ -0,0 +1,204 @@
+/**
+ * Every Stepbro duration in one place (seconds, like GSAP, unless the name says
+ * ms). Recipes and components take their defaults from here, so a timing is
+ * changed once. Sources: Stepbro replication kit, tasks/especificacion-replicacion.json
+ * and money/replication-catalog.json.
+ */
+export const TIMING = Object.freeze({
+  flow: 0.5,
+  flowStagger: 0.05,
+  stepChange: 0.5,
+  reveal: Object.freeze({
+    fast: [0.5, 0.25],
+    normal: [0.7, 0.35],
+    slow: [1.05, 0.5],
+    slower: [1.6, 0.75],
+  } as const),
+  details: 0.32,
+  chevron: 0.25,
+  indicator: 0.45,
+  number: 0.6,
+  numberPricing: 0.7,
+  revealCounter: 0.9,
+  layoutTravel: 0.62,
+  /** New items in a reflow enter in this share of the travel time. */
+  layoutEnterFactor: 0.6,
+  menu: Object.freeze({ duration: 0.35, stagger: 0.04, delay: 0.1 }),
+  palette: Object.freeze({ duration: 0.1, stagger: 0.01 }),
+  form: Object.freeze({ duration: 0.35, stagger: 0.04 }),
+  landing: Object.freeze({ duration: 0.4, stagger: 0.05, delay: 0.15 }),
+  content: Object.freeze({ duration: 0.6, stagger: 0.06 }),
+  bubble: 0.7,
+  bubbleStagger: 0.06,
+  word: 0.25,
+  wordStagger: 0.05,
+  chatScroll: 0.35,
+  composer: 0.18,
+  slot: Object.freeze({ durationMs: 300, staggerMs: 45, exitOffsetMs: 50, colorFadeMs: 280, maxTilt: 5, minResizeMs: 140 }),
+  swatch: 0.5,
+  swatchLight: 3.5,
+  swatchBackground: 4.5,
+  /** ModalHost (modal-origin, modal-close-origin, modal-fallback, modal-auto-resize). */
+  dialog: Object.freeze({
+    /** The surface travels from its opener. */
+    open: 0.7,
+    /** The opener's colour hands over to the surface's. */
+    surfaceColor: 0.3,
+    /** Back into the opener. */
+    close: 0.5,
+    /** While closing, the content heads for the opener on a 2 s path cut at `close`. */
+    contentReturn: 2,
+    originHide: 0.08,
+    originShow: 0.3,
+    originShowDelay: 0.2,
+    /** No opener on screen: scale .92 → 1. */
+    fallback: 0.35,
+    autoResize: 0.45,
+    /** Backdrop tint on the signature curve. */
+    backdrop: 0.5,
+    /** Items of a list that opens from its control. */
+    list: 0.25,
+  }),
+  /** modal-liquid (spring channels; springs are stiffness/damping, not times). */
+  liquid: Object.freeze({
+    size: 0.3,
+    radius: 0.7,
+    content: 0.3,
+    color: 0.4,
+    colorDelay: 0.15,
+    ghost: 0.25,
+    ghostDelay: 0.05,
+    closeSize: 0.25,
+    closeContent: 0.3,
+    originRestore: 0.3,
+    originRestoreDelay: 0.2,
+    safetyMs: 1100,
+  }),
+  /** modal-drag: the spring back when a drag is not far enough. */
+  drag: Object.freeze({ restore: 0.5, radiusRestore: 0.3 }),
+  /** modal-float. */
+  float: Object.freeze({ shadow: 0.45, glideDecay: 0.18, sizeSmoothing: 0.08 }),
+  /** chat-loader-delay, chat-confirmation-bar. */
+  chat: Object.freeze({ pendingDelayMs: 500, confirmWordStagger: 0.1 }),
+  /** onboarding-busy-background, step-change, onboarding-reveal-counter. */
+  onboarding: Object.freeze({ busy: 0.8, idle: 0.6, step: 0.5, counter: 0.9 }),
+  /** task-drag: lift, land (FA .62), crossfade (66 % of the land), neighbours shifting (FA .52). */
+  sortable: Object.freeze({ lift: 0.18, land: 0.42, landFade: 0.42 * 0.66, shift: 0.62 }),
+  /** toast-deck, toast-morph, toast-character-reveal. */
+  toast: Object.freeze({
+    relayout: 0.6,
+    expand: 0.55,
+    expandStagger: 0.06,
+    enter: 0.5,
+    exit: 0.3,
+    collapseDelayMs: 150,
+    morphSize: 0.32,
+    morphRadius: 0.7,
+    morphContent: 0.32,
+    morphColor: 0.4,
+    morphColorDelay: 0.15,
+    morphShadow: 0.6,
+    morphShadowDelay: 0.05,
+    safetyMs: 1100,
+    chars: 0.4,
+    charsDelay: 0.225,
+    charsStagger: 0.02,
+  }),
+  /** Dousan's glass (CSS): surface/shadow transitions, ring and shine. */
+  glass: Object.freeze({ hover: 0.4, ring: 0.5 }),
+  /** Stepbro's utility animations (css/effects/anim.css), by name. */
+  effects: Object.freeze({
+    out: 0.5,
+    'out-left': 0.5,
+    'out-bottom': 0.5,
+    collapse: 0.25,
+    highlight: 1,
+    shake: 0.5,
+    'shake-strong': 0.4,
+    fade: 0.3,
+    wipe: 0.7,
+    'progress-in': 1,
+  }),
+  /** Dousan's success confetti, per 60 fps frame. */
+  confetti: Object.freeze({
+    count: 45,
+    speed: [2, 8] as const,
+    lift: 2,
+    radius: [3, 7] as const,
+    decay: [0.015, 0.03] as const,
+    gravity: 0.15,
+    drag: 0.98,
+    spin: 2.5,
+  }),
+  /** Dousan's project sheet. */
+  sheet: Object.freeze({ open: 0.72, close: 0.72, underlayScale: 0.98, underlayOpacity: 0.4 }),
+  /** Dousan's springs as Motion declares them: [stiffness, damping]. */
+  springs: Object.freeze({
+    press: [400, 10] as const,
+    success: [260, 18] as const,
+    underlay: [300, 30] as const,
+    letters: [300, 10] as const,
+    cursorFollow: [800, 35] as const,
+    cursorAppear: [500, 30] as const,
+    bentoEnter: [60, 15] as const,
+    bentoRepel: [300, 25] as const,
+    dockPill: [380, 30] as const,
+  }),
+  /** OFFFICE's masked type (Siena's case titles start at 120 %). */
+  maskText: Object.freeze({ duration: 1.2, delay: 0.1, stagger: 0.02, exitStagger: 0.002, y: 100, threshold: 0.8 }),
+  /** Siena's reveal group (rules, fades, rises). */
+  cascade: Object.freeze({ duration: 1.2, step: 0.03, rise: 200, threshold: 0.3 }),
+  /** Siena's slot title: each letter turns 8–14 times inside a 2 s expo.out envelope. */
+  textRoll: Object.freeze({ duration: 2, stagger: 0.04, turns: [8, 14] as const, interval: 6000, quietMs: 1000 }),
+  /** Dousan's hero letters: scale on hover, pastel blink. */
+  letters: Object.freeze({
+    scale: 1.3,
+    y: -5,
+    step: 0.03,
+    blink: 0.6,
+    blinkStart: 0.6,
+    blinkRepeatDelay: 0.1,
+    blinkDelays: [0.1, 0.6, 0.2, 1, 0.4, 1.2, 0.15, 0.8, 0.3] as const,
+  }),
+  /** Siena's image parallax. */
+  parallax: Object.freeze({ travel: 10, scale: 1.2, strongScale: 1.3, lerp: 1 }),
+  /** Siena's About grid gathering from depth. */
+  depthGrid: Object.freeze({
+    perspective: 600,
+    distance: 900,
+    depth: -3000,
+    rotate: -160,
+    opacity: 0.05,
+    scale: 0.4,
+    stagger: 0.15,
+    lerp: 1,
+  }),
+  /** Siena's video mask: the frame and the picture inside scale in opposite directions. */
+  frameZoom: Object.freeze({
+    outer: [80, 20] as const,
+    inner: [130, 20] as const,
+    phoneOuter: [95, 5] as const,
+    phoneInner: [105, 5] as const,
+    open: 1,
+    lerp: 1,
+  }),
+  /** Siena's marquee: seconds per item, at most 14 counted. */
+  marquee: Object.freeze({ perItem: 2, maxItems: 14 }),
+  /** Dousan's glass chip and Siena's dot cursor. */
+  cursor: Object.freeze({ gutter: 10, circle: 96, dotLerp: 0.2, light: 180 }),
+  /** iyo.ai's floating navbar: enters from −300 % over 1.8 s; rows follow 0.15 s + 0.025 s each. */
+  island: Object.freeze({ entrance: 1.8, offset: -300, delay: 0.15, step: 0.025, focus: 150 }),
+  /** iyo.ai's product dock: spread for 1.6 s on load; tablet range re-checked 250 ms after a resize. */
+  cardDock: Object.freeze({ intro: 1600, resizeDebounce: 250 }),
+  /** iyo.ai's phone cards: 5 s a card, 2 s wait after a touch, 0.5 s after it shows. */
+  snapStrip: Object.freeze({ interval: 5000, resume: 2000, delay: 500 }),
+  /** iyo.ai's fill-text: letters from .2, 0.5 s each, 0.1 s apart, top 90 % → centre 40 %. */
+  fillText: Object.freeze({ from: 0.2, duration: 0.5, stagger: 0.1, start: 'top 90%', end: 'center 40%' }),
+  /** iyo.ai's particle hero (adapted): fade in 1 s after 0.3 s, morph cycles, pointer push. */
+  particleHero: Object.freeze({ fadeIn: 1, fadeDelay: 0.3, size: 128, pointSize: 1.7, maxDpr: 1.5, stillSteps: 110 }),
+  ticketMenu: Object.freeze({ open: 0.9, content: 1.1, stagger: 0.02, from: 150 }),
+  infiniteReel: Object.freeze({ friction: 0.95, wheel: 0.05, dragThreshold: 5 }),
+  repelBento: Object.freeze({ offset: 0.6, stagger: 0.006, strength: 5000, distance: 30, breakpoint: 1024 }),
+  rotator: Object.freeze({ interval: 8000, duration: 0.25, y: 5 }),
+  dragRuler: Object.freeze({ min: 0, max: 8, step: 0.1, pixelsPerUnit: 60 }),
+});

package/src/core/types.ts

@@ -0,0 +1,20 @@
+/** Every recipe returns at least this. `destroy()` is idempotent and leaves the DOM as it found it. */
+export interface Instance {
+  destroy(): void;
+}
+
+export type Cleanup = () => void;
+
+/** Instance returned when a recipe cannot start (missing root or children). */
+export function inert<T extends Instance = Instance>(extra?: Omit<T, 'destroy'>): T {
+  return { destroy() {}, ...extra } as T;
+}
+
+const warned = new Set<string>();
+
+/** Warn once per message, so a misconfigured recipe inside a loop does not flood the console. */
+export function warnOnce(message: string) {
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(`[motion-kit] ${message}`);
+}

package/src/core/visible.ts

@@ -0,0 +1,19 @@
+/*
+ * IntersectionObserver helpers. Chromium only reports an entry as intersecting
+ * once it crosses the first threshold; Firefox and Safari report the first
+ * visible pixel. Entrances check the share themselves so they start at the same
+ * point everywhere.
+ */
+
+/** Thresholds that keep reporting while a block moves through the screen (and `threshold` itself). */
+export function thresholds(threshold: number): number[] {
+  const steps = Array.from({ length: 11 }, (_, i) => i / 10);
+  return [...new Set([...steps, threshold])].sort((a, b) => a - b);
+}
+
+/** `threshold` of the target shows — or, for a target taller than the screen, that share of the screen. */
+export function shows(entry: IntersectionObserverEntry, threshold: number): boolean {
+  if (!entry.isIntersecting) return false;
+  if (entry.intersectionRatio >= threshold) return true;
+  return entry.rootBounds ? entry.intersectionRect.height >= entry.rootBounds.height * threshold : false;
+}

package/src/css/base.css

@@ -0,0 +1,142 @@
+/* Base helpers: visually hidden text, the type scale as classes, and an app shell. */
+.mk-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Page colours and font from the theme: put it on <body> (or any root). */
+.mk-app {
+  background: var(--mk-bg);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+}
+
+.mk-type-display-large {
+  font-family: var(--md-sys-typescale-display-large-font);
+  font-size: var(--md-sys-typescale-display-large-size);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+  font-weight: var(--md-sys-typescale-display-large-weight);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+}
+
+.mk-type-display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font);
+  font-size: var(--md-sys-typescale-display-medium-size);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+  font-weight: var(--md-sys-typescale-display-medium-weight);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+}
+
+.mk-type-display-small {
+  font-family: var(--md-sys-typescale-display-small-font);
+  font-size: var(--md-sys-typescale-display-small-size);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+  font-weight: var(--md-sys-typescale-display-small-weight);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+}
+
+.mk-type-headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font);
+  font-size: var(--md-sys-typescale-headline-large-size);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+  font-weight: var(--md-sys-typescale-headline-large-weight);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+}
+
+.mk-type-headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font);
+  font-size: var(--md-sys-typescale-headline-medium-size);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+  font-weight: var(--md-sys-typescale-headline-medium-weight);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+}
+
+.mk-type-headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font);
+  font-size: var(--md-sys-typescale-headline-small-size);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  font-weight: var(--md-sys-typescale-headline-small-weight);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+}
+
+.mk-type-title-large {
+  font-family: var(--md-sys-typescale-title-large-font);
+  font-size: var(--md-sys-typescale-title-large-size);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  font-weight: var(--md-sys-typescale-title-large-weight);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+}
+
+.mk-type-title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font);
+  font-size: var(--md-sys-typescale-title-medium-size);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  font-weight: var(--md-sys-typescale-title-medium-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+}
+
+.mk-type-title-small {
+  font-family: var(--md-sys-typescale-title-small-font);
+  font-size: var(--md-sys-typescale-title-small-size);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  font-weight: var(--md-sys-typescale-title-small-weight);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+}
+
+.mk-type-body-large {
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  font-weight: var(--md-sys-typescale-body-large-weight);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+
+.mk-type-body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  font-weight: var(--md-sys-typescale-body-medium-weight);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+}
+
+.mk-type-body-small {
+  font-family: var(--md-sys-typescale-body-small-font);
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  font-weight: var(--md-sys-typescale-body-small-weight);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+
+.mk-type-label-large {
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+
+.mk-type-label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  font-weight: var(--md-sys-typescale-label-medium-weight);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
+
+.mk-type-label-small {
+  font-family: var(--md-sys-typescale-label-small-font);
+  font-size: var(--md-sys-typescale-label-small-size);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  font-weight: var(--md-sys-typescale-label-small-weight);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+}