@kanso-labs/kanso-ui 0.2.0

package/dist/hooks/useRipple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.js","names":["rect","width","size","height","positionEvent","startPoint","endPoint","event","target","rippleRef","resolve"],"sources":["../../src/hooks/useRipple.tsx"],"sourcesContent":["import type { MouseEvent, MouseEventHandler, PointerEvent, PointerEventHandler, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport { rippleStyles } from '../styles/ripple';\nimport { motionDurationMs, motionEasing, spacingPx } from '../tokens/values';\n\n// Every timing this file drives is a motion token, spent at the point of use\n// below. They come from tokens/values rather than the StyleX theme because\n// element.animate() and setTimeout both reject a token's var() form, and the\n// same is true of the one geometry token: `PADDING` is added to a radius, and\n// a var() would concatenate rather than add. See src/styles/ripple.ts for the\n// opacity half of the mechanism, whose three timings are deliberately not\n// tokens.\n\n/** How far the ripple grows past the host's corners. `spacing.sm`. */\nconst PADDING = spacingPx.sm;\n\n// The rest are ratios and a pixel floor that no token group covers — spacing\n// is layout rhythm, and nothing in the set holds bare geometric ratios.\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\n\n// Static input, so this is computed once for every consumer of the module\n// rather than once per component instance.\nconst surfaceProps = stylex.props(rippleStyles.surface);\n\n/**\n * On touch: `Inactive -> TouchDelay -> WaitingForClick -> Inactive`, or\n * `Inactive -> TouchDelay -> Holding -> WaitingForClick -> Inactive` for a\n * held press.\n *\n * On mouse or pen: `Inactive -> WaitingForClick -> Inactive`.\n */\nconst RippleState = {\n  /** A touch has been confirmed as a press (held past the touch delay). */\n  Holding: 2,\n  /** No press in progress. Touch down moves to TouchDelay; mouse/pen down moves to WaitingForClick. */\n  Inactive: 0,\n  /** Touch down received; waiting to see if it's a tap or a scroll/swipe. */\n  TouchDelay: 1,\n  /** The press has finished growing; waiting for the click that ends it. */\n  WaitingForClick: 3\n} as const;\ninterface RippleEventHandlers<HostElement extends HTMLElement> {\n  onClick?: MouseEventHandler<HostElement>;\n  onContextMenu?: MouseEventHandler<HostElement>;\n  onPointerCancel?: PointerEventHandler<HostElement>;\n  onPointerDown?: PointerEventHandler<HostElement>;\n  onPointerLeave?: PointerEventHandler<HostElement>;\n  onPointerUp?: PointerEventHandler<HostElement>;\n}\ntype RippleState = (typeof RippleState)[keyof typeof RippleState];\nfunction isTouch(event: PointerEvent) {\n  return event.pointerType === 'touch';\n}\n\n/**\n * Renders a press ripple that grows from the pointer's position, or from\n * the element's center for a keyboard or other non-pointer activation.\n *\n * Growth runs via the Web Animations API on a single reused element (no\n * per-click DOM nodes to clean up), over a fixed duration independent of how\n * long the element is held — a real press-and-hold keeps the ripple\n * growing until release, while a quick tap is still held visible for a\n * minimum duration so it plays a complete animation rather than a flicker.\n *\n * Merges its own handlers with `externalHandlers` (e.g. a component's own\n * consumer-supplied props — ripple's own run first, then the external\n * ones) and returns `handlers` to spread onto the interactive element and\n * `surface`, the node to render as a child. The host element must\n * establish a positioning context (`position: relative` or similar) so\n * `surface`, which fills it via `inset: 0`, clips to its bounds and\n * inherits its shape.\n *\n * Pass `enabled: false` to opt out — no ripple listeners are attached and\n * no surface is rendered, leaving `externalHandlers` and a component's own\n * hover/press state layer (if any) untouched.\n *\n * `handlers` and `surface` are hand-memoized (not left to build-tool\n * optimization) so a consumer rendering many instances — a list of icon\n * buttons, say — can memoize around them too, and so stability doesn't\n * depend on any particular compiler being configured.\n */\nfunction useRipple<HostElement extends HTMLElement = HTMLElement>(enabled = true, externalHandlers: RippleEventHandlers<HostElement> = {}): {\n  handlers: RippleEventHandlers<HostElement>;\n  surface: ReactNode;\n} {\n  const [pressed, setPressed] = useState(false);\n  const rippleRef = useRef<HTMLSpanElement>(null);\n  const state = useRef<RippleState>(RippleState.Inactive);\n  const growAnimation = useRef<Animation | undefined>(undefined);\n  const rippleStartEvent = useRef<PointerEvent<HostElement> | undefined>(undefined);\n  const initialSize = useRef(0);\n  const rippleScale = useRef('1');\n  const shouldReactToEvent = useCallback((event: PointerEvent<HostElement>) => {\n    if (!event.isPrimary) {\n      return false;\n    }\n    const startEvent = rippleStartEvent.current;\n    if (startEvent && startEvent.pointerId !== event.pointerId) {\n      return false;\n    }\n    return isTouch(event) || event.buttons === 1;\n  }, []);\n  const determineRippleSize = useCallback((rect: DOMRect) => {\n    const {\n      height,\n      width\n    } = rect;\n    const maxDimension = Math.max(height, width);\n    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDimension, SOFT_EDGE_MINIMUM_SIZE);\n    const size = Math.floor(maxDimension * INITIAL_ORIGIN_SCALE);\n    const hypotenuse = Math.hypot(width, height);\n    const maxRadius = hypotenuse + PADDING;\n    initialSize.current = size;\n    rippleScale.current = `${(maxRadius + softEdgeSize) / size}`;\n    return `${size}px`;\n  }, []);\n  const getTranslationCoordinates = useCallback((rect: DOMRect, positionEvent?: PointerEvent<HostElement>) => {\n    const {\n      height,\n      left,\n      top,\n      width\n    } = rect;\n    const size = initialSize.current;\n    const endPoint = {\n      x: (width - size) / 2,\n      y: (height - size) / 2\n    };\n    const origin = positionEvent ? {\n      x: positionEvent.clientX - left,\n      y: positionEvent.clientY - top\n    } : {\n      x: width / 2,\n      y: height / 2\n    };\n    const startPoint = {\n      x: origin.x - size / 2,\n      y: origin.y - size / 2\n    };\n    return {\n      endPoint,\n      startPoint\n    };\n  }, []);\n  const startPressAnimation = useCallback((target: HostElement, positionEvent?: PointerEvent<HostElement>) => {\n    const ripple = rippleRef.current;\n    if (!ripple) {\n      return;\n    }\n    setPressed(true);\n    growAnimation.current?.cancel();\n\n    // Read once and share: the two helpers below both only need the\n    // target's rect, and a second `getBoundingClientRect()` call back to\n    // back with the first would be a redundant layout read.\n    const rect = target.getBoundingClientRect();\n    const size = determineRippleSize(rect);\n    const {\n      endPoint,\n      startPoint\n    } = getTranslationCoordinates(rect, positionEvent);\n    ripple.style.width = size;\n    ripple.style.height = size;\n    growAnimation.current = ripple.animate({\n      transform: [`translate(${startPoint.x}px, ${startPoint.y}px) scale(1)`, `translate(${endPoint.x}px, ${endPoint.y}px) scale(${rippleScale.current})`]\n    }, {\n      // Growth runs over a fixed duration regardless of how long the\n      // press is held, so the token is spent here rather than named as a\n      // constant — element.animate() is one of the two places a StyleX\n      // token could not have gone.\n      duration: motionDurationMs.long1,\n      easing: motionEasing.standard,\n      fill: 'forwards'\n    });\n  }, [determineRippleSize, getTranslationCoordinates]);\n  const endPressAnimation = useCallback(async () => {\n    rippleStartEvent.current = undefined;\n    state.current = RippleState.Inactive;\n    const animation = growAnimation.current;\n    const elapsed = typeof animation?.currentTime === 'number' ? animation.currentTime : Infinity;\n\n    // The floor on how briefly a ripple may be visible, so a quick tap reads\n    // as a deliberate ripple rather than a flicker.\n    if (elapsed >= motionDurationMs.medium1) {\n      setPressed(false);\n      return;\n    }\n    await new Promise(resolve => {\n      setTimeout(resolve, motionDurationMs.medium1 - elapsed);\n    });\n    if (growAnimation.current !== animation) {\n      // A newer press started; let it own the pressed state instead.\n      return;\n    }\n    setPressed(false);\n  }, []);\n\n  // Reads through a function so a stale narrowing of `state.current` from\n  // before the `await` below isn't (incorrectly) carried across it — the\n  // ref can change via a different handler while this one is suspended.\n  const getState = useCallback(() => state.current, []);\n  const handlePointerDownAsync = useCallback(async (event: PointerEvent<HostElement>) => {\n    if (!shouldReactToEvent(event)) {\n      return;\n    }\n    rippleStartEvent.current = event;\n    const target = event.currentTarget;\n    if (!isTouch(event)) {\n      state.current = RippleState.WaitingForClick;\n      startPressAnimation(target, event);\n      return;\n    }\n\n    // Delay so a scroll/swipe starting on the element doesn't flash a\n    // ripple — only a held (or quickly released) touch counts as a press.\n    state.current = RippleState.TouchDelay;\n    await new Promise(resolve => {\n      setTimeout(resolve, motionDurationMs.short2);\n    });\n    if (getState() !== RippleState.TouchDelay) {\n      return;\n    }\n    state.current = RippleState.Holding;\n    startPressAnimation(target, event);\n  }, [getState, shouldReactToEvent, startPressAnimation]);\n  const handlePointerDown = useCallback((event: PointerEvent<HostElement>) => {\n    void handlePointerDownAsync(event);\n  }, [handlePointerDownAsync]);\n  const handlePointerUp = useCallback((event: PointerEvent<HostElement>) => {\n    if (!shouldReactToEvent(event)) {\n      return;\n    }\n    if (state.current === RippleState.Holding) {\n      state.current = RippleState.WaitingForClick;\n      return;\n    }\n    if (state.current === RippleState.TouchDelay) {\n      // Released before the delay elapsed: treat as a completed tap.\n      state.current = RippleState.WaitingForClick;\n      startPressAnimation(event.currentTarget, rippleStartEvent.current);\n    }\n  }, [shouldReactToEvent, startPressAnimation]);\n  const handlePointerLeave = useCallback((event: PointerEvent<HostElement>) => {\n    if (isTouch(event) || !shouldReactToEvent(event)) {\n      return;\n    }\n    if (state.current !== RippleState.Inactive) {\n      void endPressAnimation();\n    }\n  }, [endPressAnimation, shouldReactToEvent]);\n  const handlePointerCancel = useCallback((event: PointerEvent<HostElement>) => {\n    if (!shouldReactToEvent(event)) {\n      return;\n    }\n    void endPressAnimation();\n  }, [endPressAnimation, shouldReactToEvent]);\n  const handleClick = useCallback((event: MouseEvent<HostElement>) => {\n    if (state.current === RippleState.WaitingForClick) {\n      void endPressAnimation();\n      return;\n    }\n    if (state.current === RippleState.Inactive) {\n      // No pointerdown preceded this click — keyboard activation, a\n      // programmatic `.click()`, or assistive-tech-synthesized activation.\n      // Play a complete, centered press immediately.\n      startPressAnimation(event.currentTarget);\n      void endPressAnimation();\n    }\n  }, [endPressAnimation, startPressAnimation]);\n  const handleContextMenu = useCallback(() => {\n    void endPressAnimation();\n  }, [endPressAnimation]);\n  const {\n    onClick: onClickProp,\n    onContextMenu: onContextMenuProp,\n    onPointerCancel: onPointerCancelProp,\n    onPointerDown: onPointerDownProp,\n    onPointerLeave: onPointerLeaveProp,\n    onPointerUp: onPointerUpProp\n  } = externalHandlers;\n  const onClick = useCallback((event: MouseEvent<HostElement>) => {\n    handleClick(event);\n    onClickProp?.(event);\n  }, [handleClick, onClickProp]);\n  const onContextMenu = useCallback((event: MouseEvent<HostElement>) => {\n    handleContextMenu();\n    onContextMenuProp?.(event);\n  }, [handleContextMenu, onContextMenuProp]);\n  const onPointerCancel = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerCancel(event);\n    onPointerCancelProp?.(event);\n  }, [handlePointerCancel, onPointerCancelProp]);\n  const onPointerDown = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerDown(event);\n    onPointerDownProp?.(event);\n  }, [handlePointerDown, onPointerDownProp]);\n  const onPointerLeave = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerLeave(event);\n    onPointerLeaveProp?.(event);\n  }, [handlePointerLeave, onPointerLeaveProp]);\n  const onPointerUp = useCallback((event: PointerEvent<HostElement>) => {\n    handlePointerUp(event);\n    onPointerUpProp?.(event);\n  }, [handlePointerUp, onPointerUpProp]);\n  const handlers = useMemo(() => ({\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }), [onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp]);\n  const surface = useMemo(() => <span aria-hidden=\"true\" {...surfaceProps}>\n        <span ref={rippleRef} {...stylex.props(rippleStyles.press, pressed && rippleStyles.pressed)} />\n      </span>, [pressed]);\n\n  // Two separate memos rather than one branching on `enabled`, so that\n  // whichever branch is actually active stays keyed only on its own\n  // inputs — the enabled result doesn't get a new identity every time\n  // `externalHandlers` does (a component typically passes a fresh object\n  // literal each render), and vice versa.\n  const enabledResult = useMemo(() => ({\n    handlers,\n    surface\n  }), [handlers, surface]);\n  const disabledResult = useMemo(() => ({\n    handlers: externalHandlers,\n    surface: null\n  }), [externalHandlers]);\n  return enabled ? enabledResult : disabledResult;\n}\nexport { useRipple };"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import Avatar, { AvatarProps } from "./components/avatar/index.js";
+import Badge, { BadgeProps } from "./components/badge/index.js";
+import Button, { ButtonProps } from "./components/button/index.js";
+import Card, { CardProps } from "./components/card/index.js";
+import Chip, { ChipProps } from "./components/chip/index.js";
+import Currency, { CurrencyProps } from "./components/currency/index.js";
+import IconButton, { IconButtonProps } from "./components/icon-button/index.js";
+import Link, { LinkProps } from "./components/link/index.js";
+import ListItem, { ListItemProps } from "./components/list-item/index.js";
+import Separator, { SeparatorProps } from "./components/separator/index.js";
+import Sheet, { SheetProps } from "./components/sheet/index.js";
+import Tabs, { TabsProps } from "./components/tabs/index.js";
+import Text, { TextProps } from "./components/text/index.js";
+import TextField, { TextFieldProps } from "./components/text-field/index.js";
+import "./components/index.js";
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/index.js

@@ -0,0 +1,15 @@
+import Avatar from "./components/avatar/index.js";
+import Badge from "./components/badge/index.js";
+import Button from "./components/button/index.js";
+import Card from "./components/card/index.js";
+import Chip from "./components/chip/index.js";
+import Currency from "./components/currency/index.js";
+import IconButton from "./components/icon-button/index.js";
+import Link from "./components/link/index.js";
+import ListItem from "./components/list-item/index.js";
+import Separator from "./components/separator/index.js";
+import Sheet from "./components/sheet/index.js";
+import Tabs from "./components/tabs/index.js";
+import Text from "./components/text/index.js";
+import TextField from "./components/text-field/index.js";
+export { Avatar, Badge, Button, Card, Chip, Currency, IconButton, Link, ListItem, Separator, Sheet, Tabs, Text, TextField };

package/dist/node_modules/@stylexjs/stylex/lib/es/stylex.js

@@ -0,0 +1,121 @@
+//#region node_modules/@stylexjs/stylex/lib/es/stylex.mjs
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+	if (hasRequiredStyleq) return styleq;
+	hasRequiredStyleq = 1;
+	Object.defineProperty(styleq, "__esModule", { value: true });
+	styleq.styleq = void 0;
+	var cache = /* @__PURE__ */ new WeakMap();
+	var compiledKey = "$$css";
+	function createStyleq(options) {
+		var disableCache;
+		var disableMix;
+		var transform;
+		if (options != null) {
+			disableCache = options.disableCache === true;
+			disableMix = options.disableMix === true;
+			transform = options.transform;
+		}
+		return function styleq() {
+			var definedProperties = [];
+			var className = "";
+			var inlineStyle = null;
+			var debugString = "";
+			var nextCache = disableCache ? null : cache;
+			var styles = new Array(arguments.length);
+			for (var i = 0; i < arguments.length; i++) styles[i] = arguments[i];
+			while (styles.length > 0) {
+				var possibleStyle = styles.pop();
+				if (possibleStyle == null || possibleStyle === false) continue;
+				if (Array.isArray(possibleStyle)) {
+					for (var _i = 0; _i < possibleStyle.length; _i++) styles.push(possibleStyle[_i]);
+					continue;
+				}
+				var style = transform != null ? transform(possibleStyle) : possibleStyle;
+				if (style.$$css != null) {
+					var classNameChunk = "";
+					if (nextCache != null && nextCache.has(style)) {
+						var cacheEntry = nextCache.get(style);
+						if (cacheEntry != null) {
+							classNameChunk = cacheEntry[0];
+							debugString = cacheEntry[2];
+							definedProperties.push.apply(definedProperties, cacheEntry[1]);
+							nextCache = cacheEntry[3];
+						}
+					} else {
+						var definedPropertiesChunk = [];
+						for (var prop in style) {
+							var value = style[prop];
+							if (prop === compiledKey) {
+								var compiledKeyValue = style[prop];
+								if (compiledKeyValue !== true) debugString = debugString ? compiledKeyValue + "; " + debugString : compiledKeyValue;
+								continue;
+							}
+							if (typeof value === "string" || value === null) {
+								if (!definedProperties.includes(prop)) {
+									definedProperties.push(prop);
+									if (nextCache != null) definedPropertiesChunk.push(prop);
+									if (typeof value === "string") classNameChunk += classNameChunk ? " " + value : value;
+								}
+							} else console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+						}
+						if (nextCache != null) {
+							var weakMap = /* @__PURE__ */ new WeakMap();
+							nextCache.set(style, [
+								classNameChunk,
+								definedPropertiesChunk,
+								debugString,
+								weakMap
+							]);
+							nextCache = weakMap;
+						}
+					}
+					if (classNameChunk) className = className ? classNameChunk + " " + className : classNameChunk;
+				} else if (disableMix) {
+					if (inlineStyle == null) inlineStyle = {};
+					inlineStyle = Object.assign({}, style, inlineStyle);
+				} else {
+					var subStyle = null;
+					for (var _prop in style) {
+						var _value = style[_prop];
+						if (_value !== void 0) {
+							if (!definedProperties.includes(_prop)) {
+								if (_value != null) {
+									if (inlineStyle == null) inlineStyle = {};
+									if (subStyle == null) subStyle = {};
+									subStyle[_prop] = _value;
+								}
+								definedProperties.push(_prop);
+								nextCache = null;
+							}
+						}
+					}
+					if (subStyle != null) inlineStyle = Object.assign(subStyle, inlineStyle);
+				}
+			}
+			return [
+				className,
+				inlineStyle,
+				debugString
+			];
+		};
+	}
+	var styleq$1 = styleq.styleq = createStyleq();
+	styleq$1.factory = createStyleq;
+	return styleq;
+}
+var styleqExports = /*@__PURE__*/ requireStyleq();
+function props(...styles) {
+	const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+	const result = {};
+	if (className != null && className !== "") result.className = className;
+	if (style != null && Object.keys(style).length > 0) result.style = style;
+	if (dataStyleSrc != null && dataStyleSrc !== "") result["data-style-src"] = dataStyleSrc;
+	return result;
+}
+Object.freeze({});
+//#endregion
+export { props };
+
+//# sourceMappingURL=stylex.js.map

package/dist/node_modules/@stylexjs/stylex/lib/es/stylex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylex.js","names":[],"sources":["../../../../../../node_modules/@stylexjs/stylex/lib/es/stylex.mjs"],"sourcesContent":["var styleq = {};\n\nvar hasRequiredStyleq;\n\nfunction requireStyleq () {\n\tif (hasRequiredStyleq) return styleq;\n\thasRequiredStyleq = 1;\n\n\tObject.defineProperty(styleq, \"__esModule\", {\n\t  value: true\n\t});\n\tstyleq.styleq = void 0;\n\tvar cache = new WeakMap();\n\tvar compiledKey = '$$css';\n\tfunction createStyleq(options) {\n\t  var disableCache;\n\t  var disableMix;\n\t  var transform;\n\t  if (options != null) {\n\t    disableCache = options.disableCache === true;\n\t    disableMix = options.disableMix === true;\n\t    transform = options.transform;\n\t  }\n\t  return function styleq() {\n\t    var definedProperties = [];\n\t    var className = '';\n\t    var inlineStyle = null;\n\t    var debugString = '';\n\t    var nextCache = disableCache ? null : cache;\n\t    var styles = new Array(arguments.length);\n\t    for (var i = 0; i < arguments.length; i++) {\n\t      styles[i] = arguments[i];\n\t    }\n\t    while (styles.length > 0) {\n\t      var possibleStyle = styles.pop();\n\t      if (possibleStyle == null || possibleStyle === false) {\n\t        continue;\n\t      }\n\t      if (Array.isArray(possibleStyle)) {\n\t        for (var _i = 0; _i < possibleStyle.length; _i++) {\n\t          styles.push(possibleStyle[_i]);\n\t        }\n\t        continue;\n\t      }\n\t      var style = transform != null ? transform(possibleStyle) : possibleStyle;\n\t      if (style.$$css != null) {\n\t        var classNameChunk = '';\n\t        if (nextCache != null && nextCache.has(style)) {\n\t          var cacheEntry = nextCache.get(style);\n\t          if (cacheEntry != null) {\n\t            classNameChunk = cacheEntry[0];\n\t            debugString = cacheEntry[2];\n\t            definedProperties.push.apply(definedProperties, cacheEntry[1]);\n\t            nextCache = cacheEntry[3];\n\t          }\n\t        } else {\n\t          var definedPropertiesChunk = [];\n\t          for (var prop in style) {\n\t            var value = style[prop];\n\t            if (prop === compiledKey) {\n\t              var compiledKeyValue = style[prop];\n\t              if (compiledKeyValue !== true) {\n\t                debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;\n\t              }\n\t              continue;\n\t            }\n\t            if (typeof value === 'string' || value === null) {\n\t              if (!definedProperties.includes(prop)) {\n\t                definedProperties.push(prop);\n\t                if (nextCache != null) {\n\t                  definedPropertiesChunk.push(prop);\n\t                }\n\t                if (typeof value === 'string') {\n\t                  classNameChunk += classNameChunk ? ' ' + value : value;\n\t                }\n\t              }\n\t            } else {\n\t              console.error(\"styleq: \".concat(prop, \" typeof \").concat(String(value), \" is not \\\"string\\\" or \\\"null\\\".\"));\n\t            }\n\t          }\n\t          if (nextCache != null) {\n\t            var weakMap = new WeakMap();\n\t            nextCache.set(style, [classNameChunk, definedPropertiesChunk, debugString, weakMap]);\n\t            nextCache = weakMap;\n\t          }\n\t        }\n\t        if (classNameChunk) {\n\t          className = className ? classNameChunk + ' ' + className : classNameChunk;\n\t        }\n\t      } else {\n\t        if (disableMix) {\n\t          if (inlineStyle == null) {\n\t            inlineStyle = {};\n\t          }\n\t          inlineStyle = Object.assign({}, style, inlineStyle);\n\t        } else {\n\t          var subStyle = null;\n\t          for (var _prop in style) {\n\t            var _value = style[_prop];\n\t            if (_value !== undefined) {\n\t              if (!definedProperties.includes(_prop)) {\n\t                if (_value != null) {\n\t                  if (inlineStyle == null) {\n\t                    inlineStyle = {};\n\t                  }\n\t                  if (subStyle == null) {\n\t                    subStyle = {};\n\t                  }\n\t                  subStyle[_prop] = _value;\n\t                }\n\t                definedProperties.push(_prop);\n\t                nextCache = null;\n\t              }\n\t            }\n\t          }\n\t          if (subStyle != null) {\n\t            inlineStyle = Object.assign(subStyle, inlineStyle);\n\t          }\n\t        }\n\t      }\n\t    }\n\t    var styleProps = [className, inlineStyle, debugString];\n\t    return styleProps;\n\t  };\n\t}\n\tvar styleq$1 = styleq.styleq = createStyleq();\n\tstyleq$1.factory = createStyleq;\n\treturn styleq;\n}\n\nvar styleqExports = /*@__PURE__*/ requireStyleq();\n\nconst errorForFn = name => new Error(`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`);\nconst errorForType = key => errorForFn(`types.${key}`);\nconst create = function stylexCreate(_styles) {\n  throw errorForFn('create');\n};\nconst createTheme = (_baseTokens, _overrides) => {\n  throw errorForFn('createTheme');\n};\nconst defineConsts = function stylexDefineConsts(_styles) {\n  throw errorForFn('defineConsts');\n};\nconst defineVars = function stylexDefineVars(_styles) {\n  throw errorForFn('defineVars');\n};\nconst unstable_conditional = function stylexConditional(_value) {\n  throw errorForFn('unstable_conditional');\n};\nconst unstable_defineVarsNested = function stylexDefineVarsNested(_styles) {\n  throw errorForFn('unstable_defineVarsNested');\n};\nconst unstable_defineConstsNested = function stylexDefineConstsNested(_styles) {\n  throw errorForFn('unstable_defineConstsNested');\n};\nconst unstable_createThemeNested = (_baseTokens, _overrides) => {\n  throw errorForFn('unstable_createThemeNested');\n};\nconst defineMarker = () => {\n  throw errorForFn('defineMarker');\n};\nconst firstThatWorks = (..._styles) => {\n  throw errorForFn('firstThatWorks');\n};\nconst keyframes = _keyframes => {\n  throw errorForFn('keyframes');\n};\nconst positionTry = _positionTry => {\n  throw errorForFn('positionTry');\n};\nfunction props(...styles) {\n  const [className, style, dataStyleSrc] = styleqExports.styleq(styles);\n  const result = {};\n  if (className != null && className !== '') {\n    result.className = className;\n  }\n  if (style != null && Object.keys(style).length > 0) {\n    result.style = style;\n  }\n  if (dataStyleSrc != null && dataStyleSrc !== '') {\n    result['data-style-src'] = dataStyleSrc;\n  }\n  return result;\n}\nconst toKebabCase = str => str.replace(/([A-Z])/g, '-$1').toLowerCase();\nfunction attrs(...styles) {\n  const {\n    className,\n    style,\n    'data-style-src': dataStyleSrc\n  } = props.apply(this, styles);\n  const result = {};\n  if (className != null) {\n    result.class = className;\n  }\n  if (style != null) {\n    result.style = Object.entries(style).map(([key, value]) => `${toKebabCase(key)}:${value}`).join(';');\n  }\n  if (dataStyleSrc != null) {\n    result['data-style-src'] = dataStyleSrc;\n  }\n  return result;\n}\nconst viewTransitionClass = _viewTransitionClass => {\n  throw errorForFn('viewTransitionClass');\n};\nconst defaultMarker = () => {\n  throw errorForFn('defaultMarker');\n};\nconst when = {\n  ancestor: _p => {\n    throw errorForFn('when.ancestor');\n  },\n  descendant: _p => {\n    throw errorForFn('when.descendant');\n  },\n  siblingBefore: _p => {\n    throw errorForFn('when.siblingBefore');\n  },\n  siblingAfter: _p => {\n    throw errorForFn('when.siblingAfter');\n  },\n  anySibling: _p => {\n    throw errorForFn('when.anySibling');\n  }\n};\nconst env = Object.freeze({});\nconst types = {\n  angle: _v => {\n    throw errorForType('angle');\n  },\n  color: _v => {\n    throw errorForType('color');\n  },\n  url: _v => {\n    throw errorForType('url');\n  },\n  image: _v => {\n    throw errorForType('image');\n  },\n  integer: _v => {\n    throw errorForType('integer');\n  },\n  lengthPercentage: _v => {\n    throw errorForType('lengthPercentage');\n  },\n  length: _v => {\n    throw errorForType('length');\n  },\n  percentage: _v => {\n    throw errorForType('percentage');\n  },\n  number: _v => {\n    throw errorForType('number');\n  },\n  resolution: _v => {\n    throw errorForType('resolution');\n  },\n  time: _v => {\n    throw errorForType('time');\n  },\n  transformFunction: _v => {\n    throw errorForType('transformFunction');\n  },\n  transformList: _v => {\n    throw errorForType('transformList');\n  }\n};\nconst legacyMerge = /*@__PURE__*/ function () {\n  function _legacyMerge(...styles) {\n    const [className] = styleqExports.styleq(styles);\n    return className;\n  }\n  _legacyMerge.create = create;\n  _legacyMerge.createTheme = createTheme;\n  _legacyMerge.defineConsts = defineConsts;\n  _legacyMerge.defineMarker = defineMarker;\n  _legacyMerge.defineVars = defineVars;\n  _legacyMerge.defaultMarker = defaultMarker;\n  _legacyMerge.firstThatWorks = firstThatWorks;\n  _legacyMerge.keyframes = keyframes;\n  _legacyMerge.positionTry = positionTry;\n  _legacyMerge.props = props;\n  _legacyMerge.attrs = attrs;\n  _legacyMerge.types = types;\n  _legacyMerge.when = when;\n  _legacyMerge.viewTransitionClass = viewTransitionClass;\n  _legacyMerge.env = env;\n  _legacyMerge.unstable_conditional = unstable_conditional;\n  _legacyMerge.unstable_defineVarsNested = unstable_defineVarsNested;\n  _legacyMerge.unstable_defineConstsNested = unstable_defineConstsNested;\n  _legacyMerge.unstable_createThemeNested = unstable_createThemeNested;\n  return _legacyMerge;\n}();\n\nexport { attrs, create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, unstable_conditional, unstable_createThemeNested, unstable_defineConstsNested, unstable_defineVarsNested, viewTransitionClass, when };\n"],"x_google_ignoreList":[0],"mappings":"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"}

package/dist/styles/ripple.js

@@ -0,0 +1,33 @@
+//#region src/styles/ripple.ts
+const styles = {
+	press: {
+		kKwaWg: "xliahv6",
+		kbCHJM: "xu96u03",
+		kSiTet: "xg01cxk",
+		kVAEAm: "x10l6tqk",
+		k87sOh: "x13vifvy",
+		k3nNDw: "x1g0ag68",
+		kIyJzY: "xbg8nd6",
+		k1ekBW: "x19991ni",
+		kAMwcw: "xcj1dhv",
+		$$css: true
+	},
+	pressed: {
+		kSiTet: "xjg27g",
+		kIyJzY: "xjl7l83",
+		$$css: true
+	},
+	surface: {
+		kaIpWk: "x1pjcqnp",
+		k1xSpc: "x1lliihq x1c7sf14",
+		kpwlN0: "x10a8y8t",
+		kVQacm: "xb3r6kr",
+		kfzvcC: "x47corl",
+		kVAEAm: "x10l6tqk",
+		$$css: true
+	}
+};
+//#endregion
+export { styles as rippleStyles };
+
+//# sourceMappingURL=ripple.js.map

package/dist/styles/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","names":[],"sources":["../../src/styles/ripple.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../tokens/design.tokens.stylex';\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// Growth and opacity are two independent mechanisms. Growth (width/height/\n// transform) is driven imperatively via the Web Animations API in\n// useRipple, decoupled from press/release timing so it always plays out\n// over a fixed duration. Opacity is what this file owns — toggled by the\n// `pressed` class — with a fast fade-in and a slower fade-out, so a quick\n// tap still reads as a deliberate, visible ripple rather than a flicker.\n//\n// None of the three timings below is a motion token, and that is deliberate\n// rather than an oversight predating them. The fade pair is the asymmetry\n// the paragraph above describes: 105ms in against 375ms out, hand-tuned as\n// a ratio to each other, and neither lands on the scale (105ms is near\n// durationShort1's 100ms; 375ms sits between durationMedium3 and\n// durationLong1). Snapping either to its nearest token would flatten a\n// tuned asymmetry into two arbitrary values, and adding tokens to fit would\n// make a scale that documents itself as three bands of three describe this\n// component instead. `linear` is likewise not on the easing scale, and\n// belongs off it — a fade to and from a state layer wants no acceleration,\n// which is why every curve in the token set is the wrong answer here.\n//\n// These three are now the only ripple timings off the scale. Everything\n// useRipple drives from JS is a token, read through src/tokens/values\n// because element.animate() and setTimeout both reject the StyleX form.\n//\n// The gradient's soft edge (a currentColor disc fading to transparent over\n// its outer 30-35%, capped at 70px) replaces a hard-edged circle so the\n// ripple blends into the surface rather than looking like a solid dot.\n//\n// `closest-side` + a plain circular box means no `border-radius` is needed\n// on the ripple itself — the gradient's own shape reads as a circle.\nconst styles = {\n  press: {\n    kKwaWg: \"xliahv6\",\n    kbCHJM: \"xu96u03\",\n    kSiTet: \"xg01cxk\",\n    kVAEAm: \"x10l6tqk\",\n    k87sOh: \"x13vifvy\",\n    k3nNDw: \"x1g0ag68\",\n    kIyJzY: \"xbg8nd6\",\n    k1ekBW: \"x19991ni\",\n    kAMwcw: \"xcj1dhv\",\n    $$css: true\n  },\n  pressed: {\n    kSiTet: \"xjg27g\",\n    kIyJzY: \"xjl7l83\",\n    $$css: true\n  },\n  surface: {\n    kaIpWk: \"x1pjcqnp\",\n    k1xSpc: \"x1lliihq x1c7sf14\",\n    kpwlN0: \"x10a8y8t\",\n    kVQacm: \"xb3r6kr\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  }\n};\nexport { styles as rippleStyles };"],"mappings":";AAkCA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/tokens/values.js

@@ -0,0 +1,34 @@
+//#region src/tokens/values.ts
+const motionDurationMs = {
+	long1: 450,
+	long2: 500,
+	long3: 600,
+	medium1: 250,
+	medium2: 300,
+	medium3: 350,
+	short1: 100,
+	short2: 150,
+	short3: 200
+};
+const motionEasing = {
+	emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+	emphasizedAccelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)",
+	emphasizedDecelerate: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+	springFast: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+	springSlow: "cubic-bezier(0.16, 1, 0.3, 1)",
+	standard: "cubic-bezier(0.2, 0, 0, 1)"
+};
+const spacingPx = {
+	lg: 16,
+	md: 12,
+	sm: 8,
+	xl: 24,
+	xs: 4,
+	xxl: 32,
+	xxs: 2,
+	xxxl: 40
+};
+//#endregion
+export { motionDurationMs, motionEasing, spacingPx };
+
+//# sourceMappingURL=values.js.map

package/dist/tokens/values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.js","names":[],"sources":["../../src/tokens/values.ts"],"sourcesContent":["// AUTO-GENERATED by scripts/build-tokens.mjs from the sibling design.tokens.json.\n// Do not hand-edit — change design.tokens.json and run `npm run tokens:build`.\n//\n// Tokens as plain JS values, for the code that cannot take a CSS one. Reach for\n// the StyleX theme in design.tokens.stylex.ts anywhere a CSS property value\n// will do: those are var(--kui-*, literal) references, so a consumer who\n// redeclares the custom property moves them. The literals below are frozen at\n// build time and cannot honour such an override, which is the whole cost of\n// using them.\n//\n// So a group appears here only once something has to compute with it rather\n// than declare it, which today means two:\n//\n//   motion  — element.animate() throws a TypeError on a var() duration or\n//             easing, and its duration wants a number of milliseconds, so even\n//             '450ms' throws. setTimeout coerces a string to NaN and fires\n//             immediately, silently.\n//   spacing — useRipple does arithmetic with it, growing the ripple past the\n//             host's corners by a fixed inset. A var() would concatenate into\n//             nonsense rather than add.\n//\n// Colours, radii, shadows, typography and the state-layer opacities are all\n// declared rather than computed, so none of them is generated here.\n\nconst motionDurationMs = {\n  long1: 450,\n  long2: 500,\n  long3: 600,\n  medium1: 250,\n  medium2: 300,\n  medium3: 350,\n  short1: 100,\n  short2: 150,\n  short3: 200,\n} as const\n\nconst motionEasing = {\n  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',\n  emphasizedAccelerate: 'cubic-bezier(0.3, 0, 0.8, 0.15)',\n  emphasizedDecelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1)',\n  springFast: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n  springSlow: 'cubic-bezier(0.16, 1, 0.3, 1)',\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n} as const\n\nconst spacingPx = {\n  lg: 16,\n  md: 12,\n  sm: 8,\n  xl: 24,\n  xs: 4,\n  xxl: 32,\n  xxs: 2,\n  xxxl: 40,\n} as const\n\nexport { motionDurationMs, motionEasing, spacingPx }\n"],"mappings":";AAwBA,MAAM,mBAAmB;CACvB,OAAO;CACP,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;AACV;AAEA,MAAM,eAAe;CACnB,YAAY;CACZ,sBAAsB;CACtB,sBAAsB;CACtB,YAAY;CACZ,YAAY;CACZ,UAAU;AACZ;AAEA,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACL,KAAK;CACL,MAAM;AACR"}

package/dist/tokens.css

@@ -0,0 +1,282 @@
+/* AUTO-GENERATED by scripts/build-tokens.mjs from the sibling design.tokens.json.
+   Do not hand-edit — change design.tokens.json and run `npm run tokens:build`.
+   This is kanso-ui's public theming contract: override any custom property
+   below (e.g. in your app's global stylesheet, after importing this file)
+   to retheme every Kanso component — see the comment at the top of
+   build-tokens.mjs. */
+
+:root {
+  --kui-color-background: #fef7ff;
+  --kui-color-error-container: #f9dedc;
+  --kui-color-error: #b3261e;
+  --kui-color-inverse-on-surface: #f5eff7;
+  --kui-color-inverse-primary: #d0bcff;
+  --kui-color-inverse-surface: #322f35;
+  --kui-color-negative-container: #ffdbd1;
+  --kui-color-negative: #a04022;
+  --kui-color-on-background: #1d1b20;
+  --kui-color-on-error-container: #410e0b;
+  --kui-color-on-error: #ffffff;
+  --kui-color-on-negative-container: #3a0a00;
+  --kui-color-on-negative: #ffffff;
+  --kui-color-on-positive-container: #002115;
+  --kui-color-on-positive: #ffffff;
+  --kui-color-on-primary-container: #21005d;
+  --kui-color-on-primary-fixed-variant: #4f378b;
+  --kui-color-on-primary-fixed: #21005d;
+  --kui-color-on-primary: #ffffff;
+  --kui-color-on-secondary-container: #1d192b;
+  --kui-color-on-secondary-fixed-variant: #4a4458;
+  --kui-color-on-secondary-fixed: #1d192b;
+  --kui-color-on-secondary: #ffffff;
+  --kui-color-on-surface-variant: #49454f;
+  --kui-color-on-surface: #1d1b20;
+  --kui-color-on-tertiary-container: #31111d;
+  --kui-color-on-tertiary-fixed-variant: #633b48;
+  --kui-color-on-tertiary-fixed: #31111d;
+  --kui-color-on-tertiary: #ffffff;
+  --kui-color-outline-variant: #cac4d0;
+  --kui-color-outline: #79747e;
+  --kui-color-positive-container: #90f6ca;
+  --kui-color-positive: #006c4d;
+  --kui-color-primary-container: #eaddff;
+  --kui-color-primary-fixed-dim: #d0bcff;
+  --kui-color-primary-fixed: #eaddff;
+  --kui-color-primary: #6750a4;
+  --kui-color-scrim: #000000;
+  --kui-color-secondary-container: #e8def8;
+  --kui-color-secondary-fixed-dim: #ccc2dc;
+  --kui-color-secondary-fixed: #e8def8;
+  --kui-color-secondary: #625b71;
+  --kui-color-shadow: #000000;
+  --kui-color-surface-bright: #fef7ff;
+  --kui-color-surface-container-high: #ece6f0;
+  --kui-color-surface-container-highest: #e6e0e9;
+  --kui-color-surface-container-low: #f7f2fa;
+  --kui-color-surface-container-lowest: #ffffff;
+  --kui-color-surface-container: #f3edf7;
+  --kui-color-surface-dim: #ded8e1;
+  --kui-color-surface-tint: #6750a4;
+  --kui-color-surface-variant: #e7e0ec;
+  --kui-color-surface: #fef7ff;
+  --kui-color-tertiary-container: #ffd8e4;
+  --kui-color-tertiary-fixed-dim: #efb8c8;
+  --kui-color-tertiary-fixed: #ffd8e4;
+  --kui-color-tertiary: #7d5260;
+  --kui-motion-duration-long1: 450ms;
+  --kui-motion-duration-long2: 500ms;
+  --kui-motion-duration-long3: 600ms;
+  --kui-motion-duration-medium1: 250ms;
+  --kui-motion-duration-medium2: 300ms;
+  --kui-motion-duration-medium3: 350ms;
+  --kui-motion-duration-short1: 100ms;
+  --kui-motion-duration-short2: 150ms;
+  --kui-motion-duration-short3: 200ms;
+  --kui-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+  --kui-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --kui-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --kui-motion-easing-spring-fast: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --kui-motion-easing-spring-slow: cubic-bezier(0.16, 1, 0.3, 1);
+  --kui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --kui-radius-full: 9999px;
+  --kui-radius-lg: 16px;
+  --kui-radius-md: 12px;
+  --kui-radius-none: 0px;
+  --kui-radius-sm: 8px;
+  --kui-radius-xl: 28px;
+  --kui-radius-xs: 4px;
+  --kui-shadow-elevation1:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --kui-shadow-elevation2:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --kui-shadow-elevation3:
+    0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+  --kui-shadow-elevation4:
+    0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+  --kui-shadow-elevation5:
+    0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+  --kui-spacing-lg: 16px;
+  --kui-spacing-md: 12px;
+  --kui-spacing-sm: 8px;
+  --kui-spacing-xl: 24px;
+  --kui-spacing-xs: 4px;
+  --kui-spacing-xxl: 32px;
+  --kui-spacing-xxs: 2px;
+  --kui-spacing-xxxl: 40px;
+  --kui-state-layer-opacity-disabled-container: 0.12;
+  --kui-state-layer-opacity-disabled-content: 0.38;
+  --kui-state-layer-opacity-dragged: 0.16;
+  --kui-state-layer-opacity-focus: 0.12;
+  --kui-state-layer-opacity-hover: 0.08;
+  --kui-state-layer-opacity-pressed: 0.12;
+  --kui-typography-body-large-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-body-large-line-height: 24px;
+  --kui-typography-body-large-size: 16px;
+  --kui-typography-body-large-tracking: 0.5px;
+  --kui-typography-body-large-weight: 400;
+  --kui-typography-body-medium-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-body-medium-line-height: 20px;
+  --kui-typography-body-medium-size: 14px;
+  --kui-typography-body-medium-tracking: 0.25px;
+  --kui-typography-body-medium-weight: 400;
+  --kui-typography-body-small-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-body-small-line-height: 16px;
+  --kui-typography-body-small-size: 12px;
+  --kui-typography-body-small-tracking: 0.4px;
+  --kui-typography-body-small-weight: 400;
+  --kui-typography-display-large-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-display-large-line-height: 64px;
+  --kui-typography-display-large-size: 57px;
+  --kui-typography-display-large-tracking: -0.25px;
+  --kui-typography-display-large-weight: 400;
+  --kui-typography-display-medium-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-display-medium-line-height: 52px;
+  --kui-typography-display-medium-size: 45px;
+  --kui-typography-display-medium-tracking: 0px;
+  --kui-typography-display-medium-weight: 400;
+  --kui-typography-display-small-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-display-small-line-height: 44px;
+  --kui-typography-display-small-size: 36px;
+  --kui-typography-display-small-tracking: 0px;
+  --kui-typography-display-small-weight: 400;
+  --kui-typography-font-family-brand:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-font-family-mono:
+    'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  --kui-typography-font-family-plain:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-headline-large-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-headline-large-line-height: 40px;
+  --kui-typography-headline-large-size: 32px;
+  --kui-typography-headline-large-tracking: 0px;
+  --kui-typography-headline-large-weight: 400;
+  --kui-typography-headline-medium-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-headline-medium-line-height: 36px;
+  --kui-typography-headline-medium-size: 28px;
+  --kui-typography-headline-medium-tracking: 0px;
+  --kui-typography-headline-medium-weight: 400;
+  --kui-typography-headline-small-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-headline-small-line-height: 32px;
+  --kui-typography-headline-small-size: 24px;
+  --kui-typography-headline-small-tracking: 0px;
+  --kui-typography-headline-small-weight: 400;
+  --kui-typography-label-large-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-label-large-line-height: 20px;
+  --kui-typography-label-large-size: 14px;
+  --kui-typography-label-large-tracking: 0.1px;
+  --kui-typography-label-large-weight: 500;
+  --kui-typography-label-medium-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-label-medium-line-height: 16px;
+  --kui-typography-label-medium-size: 12px;
+  --kui-typography-label-medium-tracking: 0.5px;
+  --kui-typography-label-medium-weight: 500;
+  --kui-typography-label-small-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-label-small-line-height: 16px;
+  --kui-typography-label-small-size: 11px;
+  --kui-typography-label-small-tracking: 0.5px;
+  --kui-typography-label-small-weight: 500;
+  --kui-typography-title-large-font:
+    'Roboto Serif', 'Iowan Old Style', Georgia, serif;
+  --kui-typography-title-large-line-height: 28px;
+  --kui-typography-title-large-size: 22px;
+  --kui-typography-title-large-tracking: 0px;
+  --kui-typography-title-large-weight: 400;
+  --kui-typography-title-medium-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-title-medium-line-height: 24px;
+  --kui-typography-title-medium-size: 16px;
+  --kui-typography-title-medium-tracking: 0.15px;
+  --kui-typography-title-medium-weight: 500;
+  --kui-typography-title-small-font:
+    'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    sans-serif;
+  --kui-typography-title-small-line-height: 20px;
+  --kui-typography-title-small-size: 14px;
+  --kui-typography-title-small-tracking: 0.1px;
+  --kui-typography-title-small-weight: 500;
+  --kui-typography-weight-bold: 700;
+  --kui-typography-weight-medium: 500;
+  --kui-typography-weight-regular: 400;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kui-color-background: #141218;
+    --kui-color-error-container: #8c1d18;
+    --kui-color-error: #f2b8b5;
+    --kui-color-inverse-on-surface: #322f35;
+    --kui-color-inverse-primary: #6750a4;
+    --kui-color-inverse-surface: #e6e0e9;
+    --kui-color-negative-container: #81290c;
+    --kui-color-negative: #ffb59f;
+    --kui-color-on-background: #e6e0e9;
+    --kui-color-on-error-container: #f9dedc;
+    --kui-color-on-error: #601410;
+    --kui-color-on-negative-container: #ffdbd1;
+    --kui-color-on-negative: #5f1600;
+    --kui-color-on-positive-container: #90f6ca;
+    --kui-color-on-positive: #003827;
+    --kui-color-on-primary-container: #eaddff;
+    --kui-color-on-primary-fixed-variant: #4f378b;
+    --kui-color-on-primary-fixed: #21005d;
+    --kui-color-on-primary: #381e72;
+    --kui-color-on-secondary-container: #e8def8;
+    --kui-color-on-secondary-fixed-variant: #4a4458;
+    --kui-color-on-secondary-fixed: #1d192b;
+    --kui-color-on-secondary: #332d41;
+    --kui-color-on-surface-variant: #cac4d0;
+    --kui-color-on-surface: #e6e0e9;
+    --kui-color-on-tertiary-container: #ffd8e4;
+    --kui-color-on-tertiary-fixed-variant: #633b48;
+    --kui-color-on-tertiary-fixed: #31111d;
+    --kui-color-on-tertiary: #492532;
+    --kui-color-outline-variant: #49454f;
+    --kui-color-outline: #938f99;
+    --kui-color-positive-container: #00513a;
+    --kui-color-positive: #74d9af;
+    --kui-color-primary-container: #4f378b;
+    --kui-color-primary-fixed-dim: #d0bcff;
+    --kui-color-primary-fixed: #eaddff;
+    --kui-color-primary: #d0bcff;
+    --kui-color-scrim: #000000;
+    --kui-color-secondary-container: #4a4458;
+    --kui-color-secondary-fixed-dim: #ccc2dc;
+    --kui-color-secondary-fixed: #e8def8;
+    --kui-color-secondary: #ccc2dc;
+    --kui-color-shadow: #000000;
+    --kui-color-surface-bright: #3b383e;
+    --kui-color-surface-container-high: #2b2930;
+    --kui-color-surface-container-highest: #36343b;
+    --kui-color-surface-container-low: #1d1b20;
+    --kui-color-surface-container-lowest: #0f0d13;
+    --kui-color-surface-container: #211f26;
+    --kui-color-surface-dim: #141218;
+    --kui-color-surface-tint: #d0bcff;
+    --kui-color-surface-variant: #49454f;
+    --kui-color-surface: #141218;
+    --kui-color-tertiary-container: #633b48;
+    --kui-color-tertiary-fixed-dim: #efb8c8;
+    --kui-color-tertiary-fixed: #ffd8e4;
+    --kui-color-tertiary: #efb8c8;
+  }
+}