@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/theme-scope.js

@@ -0,0 +1,127 @@
+import { ScopeContext, merged, scopeFor, useScope } from "./theme/scope.js";
+import { themedStyles } from "./theme/styles.js";
+import { OverlayHost, OverlayHostContext } from "./overlay/host.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme-scope.tsx
+const stylesOf = themedStyles(({ colors }) => StyleSheet.create({ pinned: { backgroundColor: colors.surface } }));
+/**
+* Themes what is inside it.
+*
+* Every component inside reads the scope's tokens: the library's defaults in
+* the scope's scheme, with the `--kui-*` overrides of this scope and every
+* scope around it applied over them. A value is read as a browser would read
+* it, `var()` references included, and one native cannot evaluate, such as a
+* `calc()`, keeps its property at the default and is named in a development
+* warning. Dialogs and sheets follow the scope they open in, since React
+* Native's `Modal` keeps React context.
+*
+* ```tsx
+* const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }
+*
+* <ThemeScope scheme="dark" style={{ flex: 1 }} theme={accent}>
+*   <Stack />
+* </ThemeScope>
+* ```
+*
+* The scope is a `View`, so one wrapping a whole screen takes `flex: 1` to
+* fill it, as any view would.
+*
+* The outermost scope also hosts what the library draws above the screen,
+* over everything inside it, so it belongs at the root of the app and fills
+* it. What draws there follows the scope it was opened in, not the root's.
+*/
+function ThemeScope(t0) {
+	const $ = c(29);
+	let children;
+	let props;
+	let scheme;
+	let style;
+	let theme;
+	if ($[0] !== t0) {
+		({children, scheme, style, theme, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = scheme;
+		$[4] = style;
+		$[5] = theme;
+	} else {
+		children = $[1];
+		props = $[2];
+		scheme = $[3];
+		style = $[4];
+		theme = $[5];
+	}
+	const host = use(OverlayHostContext);
+	const parent = useScope();
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	if ($[6] !== parent.overrides || $[7] !== parent.scheme || $[8] !== props || $[9] !== scheme || $[10] !== style || $[11] !== theme) {
+		const scope = scopeFor(scheme ?? parent.scheme, merged(parent.overrides, theme));
+		const styles = stylesOf(scope.theme);
+		T1 = ScopeContext;
+		t3 = scope;
+		T0 = View;
+		t1 = props;
+		t2 = StyleSheet.compose(scheme === void 0 ? void 0 : styles.pinned, style);
+		$[6] = parent.overrides;
+		$[7] = parent.scheme;
+		$[8] = props;
+		$[9] = scheme;
+		$[10] = style;
+		$[11] = theme;
+		$[12] = T0;
+		$[13] = T1;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else {
+		T0 = $[12];
+		T1 = $[13];
+		t1 = $[14];
+		t2 = $[15];
+		t3 = $[16];
+	}
+	let t4;
+	if ($[17] !== children || $[18] !== host) {
+		t4 = host === null ? /* @__PURE__ */ jsx(OverlayHost, { children }) : children;
+		$[17] = children;
+		$[18] = host;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== T0 || $[21] !== t1 || $[22] !== t2 || $[23] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			style: t2,
+			children: t4
+		});
+		$[20] = T0;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
+	let t6;
+	if ($[25] !== T1 || $[26] !== t3 || $[27] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T1, {
+			value: t3,
+			children: t5
+		});
+		$[25] = T1;
+		$[26] = t3;
+		$[27] = t5;
+		$[28] = t6;
+	} else t6 = $[28];
+	return t6;
+}
+//#endregion
+export { ThemeScope };
+
+//# sourceMappingURL=theme-scope.js.map

package/dist/theme-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope.js","names":["ComponentRef","Ref","ViewProps","use","StyleSheet","View","KuiTheme","OverlayHost","OverlayHostContext","merged","ScopeContext","scopeFor","useScope","themedStyles","stylesOf","colors","create","pinned","backgroundColor","surface","ThemeScopeProps","ref","scheme","theme","ThemeScope","t0","$","_c","children","props","style","host","parent","T0","T1","t1","t2","t3","overrides","scope","styles","compose","undefined","t4","t5","t6","_c"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps } from 'react-native'\n\nimport { use } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport type { KuiTheme } from './tokens/defaults'\n\nimport { OverlayHost, OverlayHostContext } from './overlay/host'\nimport { merged, ScopeContext, scopeFor, useScope } from './theme/scope'\nimport { themedStyles } from './theme/styles'\n\n// A pinned scheme paints the scope's own surface, as on web, so a dark scope\n// on a light screen reads as dark rather than drawing dark-scheme text over a\n// light background. Surface rather than background: the two hold the same\n// colours in both of the library's schemes, and surface is the one Material\n// Design draws content on. Text colour does not inherit in React Native, so\n// on surface, the other half of what web paints, is what the library's text\n// draws in by default rather than something the scope sets.\nconst stylesOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    pinned: {\n      backgroundColor: colors.surface,\n    },\n  }),\n)\n\ntype ThemeScopeProps = ViewProps & {\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * device's appearance asks for, and paints the scope's own surface in it.\n   * Left unset, the scope paints nothing and keeps the scheme around it: the\n   * one an enclosing scope pins, or the device's.\n   */\n  readonly scheme?: 'dark' | 'light' | undefined\n  /**\n   * `--kui-*` overrides for everything inside, as a map of the custom\n   * properties kanso-ui's `tokens.css` lists to CSS values, the same map\n   * web's `ThemeScope` takes. A nested scope's map applies over its parent's.\n   *\n   * The values hold for both schemes. To give light and dark a value each,\n   * keep two maps and hand the scope the one for the scheme in use.\n   *\n   * A map is resolved once for each scheme it is used in, so keep one that\n   * does not change as a constant rather than writing it inline.\n   */\n  readonly theme?: KuiTheme | undefined\n}\n\n/**\n * Themes what is inside it.\n *\n * Every component inside reads the scope's tokens: the library's defaults in\n * the scope's scheme, with the `--kui-*` overrides of this scope and every\n * scope around it applied over them. A value is read as a browser would read\n * it, `var()` references included, and one native cannot evaluate, such as a\n * `calc()`, keeps its property at the default and is named in a development\n * warning. Dialogs and sheets follow the scope they open in, since React\n * Native's `Modal` keeps React context.\n *\n * ```tsx\n * const accent: KuiTheme = { '--kui-color-primary': '#7d5260' }\n *\n * <ThemeScope scheme=\"dark\" style={{ flex: 1 }} theme={accent}>\n *   <Stack />\n * </ThemeScope>\n * ```\n *\n * The scope is a `View`, so one wrapping a whole screen takes `flex: 1` to\n * fill it, as any view would.\n *\n * The outermost scope also hosts what the library draws above the screen,\n * over everything inside it, so it belongs at the root of the app and fills\n * it. What draws there follows the scope it was opened in, not the root's.\n */\nfunction ThemeScope({\n  children,\n  scheme,\n  style,\n  theme,\n  ...props\n}: ThemeScopeProps) {\n  const host = use(OverlayHostContext)\n  const parent = useScope()\n  const scope = scopeFor(\n    scheme ?? parent.scheme,\n    merged(parent.overrides, theme),\n  )\n  const styles = stylesOf(scope.theme)\n\n  return (\n    <ScopeContext value={scope}>\n      <View\n        {...props}\n        style={StyleSheet.compose(\n          scheme === undefined ? undefined : styles.pinned,\n          style,\n        )}\n      >\n        {host === null ? <OverlayHost>{children}</OverlayHost> : children}\n      </View>\n    </ScopeContext>\n  )\n}\n\nexport type { KuiTheme } from './tokens/defaults'\nexport type { ThemeScopeProps }\n\nexport { ThemeScope }\n"],"mappings":"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"}

package/dist/tokens/defaults.d.ts

@@ -0,0 +1,407 @@
+//#region src/tokens/defaults.d.ts
+/**
+ * A theme: any of the `--kui-*` custom properties `tokens.css` lists, each set
+ * to a value in CSS syntax. Hand one to `ThemeScope`'s `theme` prop, and every
+ * component inside reads it.
+ *
+ * The values hold for both schemes. A theme with a value of its own for light
+ * and for dark is two of these, with the scope handed the one for the scheme
+ * in use.
+ */
+type KuiTheme = {
+  /** Defaults to `#fef7ff` in the light scheme and `#141218` in the dark. */
+  readonly '--kui-color-background'?: string;
+  /** Defaults to `#b3261e` in the light scheme and `#f2b8b5` in the dark. */
+  readonly '--kui-color-error'?: string;
+  /** Defaults to `#f9dedc` in the light scheme and `#8c1d18` in the dark. */
+  readonly '--kui-color-error-container'?: string;
+  /** Defaults to `#f5eff7` in the light scheme and `#322f35` in the dark. */
+  readonly '--kui-color-inverse-on-surface'?: string;
+  /** Defaults to `#d0bcff` in the light scheme and `#6750a4` in the dark. */
+  readonly '--kui-color-inverse-primary'?: string;
+  /** Defaults to `#322f35` in the light scheme and `#e6e0e9` in the dark. */
+  readonly '--kui-color-inverse-surface'?: string;
+  /** Defaults to `#a04022` in the light scheme and `#ffb59f` in the dark. */
+  readonly '--kui-color-negative'?: string;
+  /** Defaults to `#ffdbd1` in the light scheme and `#81290c` in the dark. */
+  readonly '--kui-color-negative-container'?: string;
+  /** Defaults to `#1d1b20` in the light scheme and `#e6e0e9` in the dark. */
+  readonly '--kui-color-on-background'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#601410` in the dark. */
+  readonly '--kui-color-on-error'?: string;
+  /** Defaults to `#410e0b` in the light scheme and `#f9dedc` in the dark. */
+  readonly '--kui-color-on-error-container'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#5f1600` in the dark. */
+  readonly '--kui-color-on-negative'?: string;
+  /** Defaults to `#3a0a00` in the light scheme and `#ffdbd1` in the dark. */
+  readonly '--kui-color-on-negative-container'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#003827` in the dark. */
+  readonly '--kui-color-on-positive'?: string;
+  /** Defaults to `#002115` in the light scheme and `#90f6ca` in the dark. */
+  readonly '--kui-color-on-positive-container'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#381e72` in the dark. */
+  readonly '--kui-color-on-primary'?: string;
+  /** Defaults to `#21005d` in the light scheme and `#eaddff` in the dark. */
+  readonly '--kui-color-on-primary-container'?: string;
+  /** Defaults to `#21005d`. */
+  readonly '--kui-color-on-primary-fixed'?: string;
+  /** Defaults to `#4f378b`. */
+  readonly '--kui-color-on-primary-fixed-variant'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#332d41` in the dark. */
+  readonly '--kui-color-on-secondary'?: string;
+  /** Defaults to `#1d192b` in the light scheme and `#e8def8` in the dark. */
+  readonly '--kui-color-on-secondary-container'?: string;
+  /** Defaults to `#1d192b`. */
+  readonly '--kui-color-on-secondary-fixed'?: string;
+  /** Defaults to `#4a4458`. */
+  readonly '--kui-color-on-secondary-fixed-variant'?: string;
+  /** Defaults to `#1d1b20` in the light scheme and `#e6e0e9` in the dark. */
+  readonly '--kui-color-on-surface'?: string;
+  /** Defaults to `#49454f` in the light scheme and `#cac4d0` in the dark. */
+  readonly '--kui-color-on-surface-variant'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#492532` in the dark. */
+  readonly '--kui-color-on-tertiary'?: string;
+  /** Defaults to `#31111d` in the light scheme and `#ffd8e4` in the dark. */
+  readonly '--kui-color-on-tertiary-container'?: string;
+  /** Defaults to `#31111d`. */
+  readonly '--kui-color-on-tertiary-fixed'?: string;
+  /** Defaults to `#633b48`. */
+  readonly '--kui-color-on-tertiary-fixed-variant'?: string;
+  /** Defaults to `#79747e` in the light scheme and `#938f99` in the dark. */
+  readonly '--kui-color-outline'?: string;
+  /** Defaults to `#cac4d0` in the light scheme and `#49454f` in the dark. */
+  readonly '--kui-color-outline-variant'?: string;
+  /** Defaults to `#006c4d` in the light scheme and `#74d9af` in the dark. */
+  readonly '--kui-color-positive'?: string;
+  /** Defaults to `#90f6ca` in the light scheme and `#00513a` in the dark. */
+  readonly '--kui-color-positive-container'?: string;
+  /** Defaults to `#6750a4` in the light scheme and `#d0bcff` in the dark. */
+  readonly '--kui-color-primary'?: string;
+  /** Defaults to `#eaddff` in the light scheme and `#4f378b` in the dark. */
+  readonly '--kui-color-primary-container'?: string;
+  /** Defaults to `#eaddff`. */
+  readonly '--kui-color-primary-fixed'?: string;
+  /** Defaults to `#d0bcff`. */
+  readonly '--kui-color-primary-fixed-dim'?: string;
+  /** Defaults to `#000000`. */
+  readonly '--kui-color-scrim'?: string;
+  /** Defaults to `#625b71` in the light scheme and `#ccc2dc` in the dark. */
+  readonly '--kui-color-secondary'?: string;
+  /** Defaults to `#e8def8` in the light scheme and `#4a4458` in the dark. */
+  readonly '--kui-color-secondary-container'?: string;
+  /** Defaults to `#e8def8`. */
+  readonly '--kui-color-secondary-fixed'?: string;
+  /** Defaults to `#ccc2dc`. */
+  readonly '--kui-color-secondary-fixed-dim'?: string;
+  /** Defaults to `#000000`. */
+  readonly '--kui-color-shadow'?: string;
+  /** Defaults to `#fef7ff` in the light scheme and `#141218` in the dark. */
+  readonly '--kui-color-surface'?: string;
+  /** Defaults to `#fef7ff` in the light scheme and `#3b383e` in the dark. */
+  readonly '--kui-color-surface-bright'?: string;
+  /** Defaults to `#f3edf7` in the light scheme and `#211f26` in the dark. */
+  readonly '--kui-color-surface-container'?: string;
+  /** Defaults to `#ece6f0` in the light scheme and `#2b2930` in the dark. */
+  readonly '--kui-color-surface-container-high'?: string;
+  /** Defaults to `#e6e0e9` in the light scheme and `#36343b` in the dark. */
+  readonly '--kui-color-surface-container-highest'?: string;
+  /** Defaults to `#f7f2fa` in the light scheme and `#1d1b20` in the dark. */
+  readonly '--kui-color-surface-container-low'?: string;
+  /** Defaults to `#ffffff` in the light scheme and `#0f0d13` in the dark. */
+  readonly '--kui-color-surface-container-lowest'?: string;
+  /** Defaults to `#ded8e1` in the light scheme and `#141218` in the dark. */
+  readonly '--kui-color-surface-dim'?: string;
+  /** Defaults to `#6750a4` in the light scheme and `#d0bcff` in the dark. */
+  readonly '--kui-color-surface-tint'?: string;
+  /** Defaults to `#e7e0ec` in the light scheme and `#49454f` in the dark. */
+  readonly '--kui-color-surface-variant'?: string;
+  /** Defaults to `#7d5260` in the light scheme and `#efb8c8` in the dark. */
+  readonly '--kui-color-tertiary'?: string;
+  /** Defaults to `#ffd8e4` in the light scheme and `#633b48` in the dark. */
+  readonly '--kui-color-tertiary-container'?: string;
+  /** Defaults to `#ffd8e4`. */
+  readonly '--kui-color-tertiary-fixed'?: string;
+  /** Defaults to `#efb8c8`. */
+  readonly '--kui-color-tertiary-fixed-dim'?: string;
+  /** Defaults to `450ms`. */
+  readonly '--kui-motion-duration-long1'?: string;
+  /** Defaults to `500ms`. */
+  readonly '--kui-motion-duration-long2'?: string;
+  /** Defaults to `600ms`. */
+  readonly '--kui-motion-duration-long3'?: string;
+  /** Defaults to `250ms`. */
+  readonly '--kui-motion-duration-medium1'?: string;
+  /** Defaults to `300ms`. */
+  readonly '--kui-motion-duration-medium2'?: string;
+  /** Defaults to `350ms`. */
+  readonly '--kui-motion-duration-medium3'?: string;
+  /** Defaults to `100ms`. */
+  readonly '--kui-motion-duration-short1'?: string;
+  /** Defaults to `150ms`. */
+  readonly '--kui-motion-duration-short2'?: string;
+  /** Defaults to `200ms`. */
+  readonly '--kui-motion-duration-short3'?: string;
+  /** Defaults to `cubic-bezier(0.2, 0, 0, 1)`. */
+  readonly '--kui-motion-easing-emphasized'?: string;
+  /** Defaults to `cubic-bezier(0.3, 0, 0.8, 0.15)`. */
+  readonly '--kui-motion-easing-emphasized-accelerate'?: string;
+  /** Defaults to `cubic-bezier(0.05, 0.7, 0.1, 1)`. */
+  readonly '--kui-motion-easing-emphasized-decelerate'?: string;
+  /** Defaults to `cubic-bezier(0.34, 1.56, 0.64, 1)`. */
+  readonly '--kui-motion-easing-spring-fast'?: string;
+  /** Defaults to `cubic-bezier(0.16, 1, 0.3, 1)`. */
+  readonly '--kui-motion-easing-spring-slow'?: string;
+  /** Defaults to `cubic-bezier(0.2, 0, 0, 1)`. */
+  readonly '--kui-motion-easing-standard'?: string;
+  /** Defaults to `9999px`. */
+  readonly '--kui-radius-circle'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-radius-lg'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-radius-md'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-radius-none'?: string;
+  /** Defaults to `9999px`. */
+  readonly '--kui-radius-pill'?: string;
+  /** Defaults to `8px`. */
+  readonly '--kui-radius-sm'?: string;
+  /** Defaults to `28px`. */
+  readonly '--kui-radius-xl'?: string;
+  /** Defaults to `4px`. */
+  readonly '--kui-radius-xs'?: string;
+  /** Defaults to `0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation1'?: string;
+  /** Defaults to `0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation2'?: string;
+  /** Defaults to `0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation3'?: string;
+  /** Defaults to `0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation4'?: string;
+  /** Defaults to `0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)`. */
+  readonly '--kui-shadow-elevation5'?: string;
+  /** Defaults to `56px`. */
+  readonly '--kui-sizing-control-lg'?: string;
+  /** Defaults to `48px`. */
+  readonly '--kui-sizing-control-md'?: string;
+  /** Defaults to `40px`. */
+  readonly '--kui-sizing-control-sm'?: string;
+  /** Defaults to `96px`. */
+  readonly '--kui-sizing-control-xl'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-sizing-control-xs'?: string;
+  /** Defaults to `136px`. */
+  readonly '--kui-sizing-control-xxl'?: string;
+  /** Defaults to `88px`. */
+  readonly '--kui-sizing-row-lg'?: string;
+  /** Defaults to `72px`. */
+  readonly '--kui-sizing-row-md'?: string;
+  /** Defaults to `56px`. */
+  readonly '--kui-sizing-row-sm'?: string;
+  /** Defaults to `48px`. */
+  readonly '--kui-sizing-row-xs'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-spacing-lg'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-spacing-md'?: string;
+  /** Defaults to `8px`. */
+  readonly '--kui-spacing-sm'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-spacing-xl'?: string;
+  /** Defaults to `4px`. */
+  readonly '--kui-spacing-xs'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-spacing-xxl'?: string;
+  /** Defaults to `2px`. */
+  readonly '--kui-spacing-xxs'?: string;
+  /** Defaults to `40px`. */
+  readonly '--kui-spacing-xxxl'?: string;
+  /** Defaults to `0.12`. */
+  readonly '--kui-state-layer-opacity-disabled-container'?: string;
+  /** Defaults to `0.38`. */
+  readonly '--kui-state-layer-opacity-disabled-content'?: string;
+  /** Defaults to `0.16`. */
+  readonly '--kui-state-layer-opacity-dragged'?: string;
+  /** Defaults to `0.1`. */
+  readonly '--kui-state-layer-opacity-focus'?: string;
+  /** Defaults to `0.08`. */
+  readonly '--kui-state-layer-opacity-hover'?: string;
+  /** Defaults to `0.1`. */
+  readonly '--kui-state-layer-opacity-pressed'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-body-large-font'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-typography-body-large-line-height'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-body-large-size'?: string;
+  /** Defaults to `0.5px`. */
+  readonly '--kui-typography-body-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-body-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-body-medium-font'?: string;
+  /** Defaults to `20px`. */
+  readonly '--kui-typography-body-medium-line-height'?: string;
+  /** Defaults to `14px`. */
+  readonly '--kui-typography-body-medium-size'?: string;
+  /** Defaults to `0.25px`. */
+  readonly '--kui-typography-body-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-body-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-body-small-font'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-body-small-line-height'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-typography-body-small-size'?: string;
+  /** Defaults to `0.4px`. */
+  readonly '--kui-typography-body-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-body-small-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-display-large-font'?: string;
+  /** Defaults to `64px`. */
+  readonly '--kui-typography-display-large-line-height'?: string;
+  /** Defaults to `57px`. */
+  readonly '--kui-typography-display-large-size'?: string;
+  /** Defaults to `-0.25px`. */
+  readonly '--kui-typography-display-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-display-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-display-medium-font'?: string;
+  /** Defaults to `52px`. */
+  readonly '--kui-typography-display-medium-line-height'?: string;
+  /** Defaults to `45px`. */
+  readonly '--kui-typography-display-medium-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-display-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-display-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-display-small-font'?: string;
+  /** Defaults to `44px`. */
+  readonly '--kui-typography-display-small-line-height'?: string;
+  /** Defaults to `36px`. */
+  readonly '--kui-typography-display-small-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-display-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-display-small-weight'?: string;
+  /** Defaults to `'Roboto Serif', 'Iowan Old Style', Georgia, serif`. */
+  readonly '--kui-typography-font-family-brand'?: string;
+  /** Defaults to `'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace`. */
+  readonly '--kui-typography-font-family-mono'?: string;
+  /** Defaults to `'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`. */
+  readonly '--kui-typography-font-family-plain'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-headline-large-font'?: string;
+  /** Defaults to `40px`. */
+  readonly '--kui-typography-headline-large-line-height'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-typography-headline-large-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-headline-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-headline-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-headline-medium-font'?: string;
+  /** Defaults to `36px`. */
+  readonly '--kui-typography-headline-medium-line-height'?: string;
+  /** Defaults to `28px`. */
+  readonly '--kui-typography-headline-medium-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-headline-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-headline-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-headline-small-font'?: string;
+  /** Defaults to `32px`. */
+  readonly '--kui-typography-headline-small-line-height'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-typography-headline-small-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-headline-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-headline-small-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-label-large-font'?: string;
+  /** Defaults to `20px`. */
+  readonly '--kui-typography-label-large-line-height'?: string;
+  /** Defaults to `14px`. */
+  readonly '--kui-typography-label-large-size'?: string;
+  /** Defaults to `0.1px`. */
+  readonly '--kui-typography-label-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-label-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-label-medium-font'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-label-medium-line-height'?: string;
+  /** Defaults to `12px`. */
+  readonly '--kui-typography-label-medium-size'?: string;
+  /** Defaults to `0.5px`. */
+  readonly '--kui-typography-label-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-label-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-label-small-font'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-label-small-line-height'?: string;
+  /** Defaults to `11px`. */
+  readonly '--kui-typography-label-small-size'?: string;
+  /** Defaults to `0.5px`. */
+  readonly '--kui-typography-label-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-label-small-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-brand, 'Roboto Serif', 'Iowan Old Style', Georgia, serif)`. */
+  readonly '--kui-typography-title-large-font'?: string;
+  /** Defaults to `28px`. */
+  readonly '--kui-typography-title-large-line-height'?: string;
+  /** Defaults to `22px`. */
+  readonly '--kui-typography-title-large-size'?: string;
+  /** Defaults to `0px`. */
+  readonly '--kui-typography-title-large-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-regular, 400)`. */
+  readonly '--kui-typography-title-large-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-title-medium-font'?: string;
+  /** Defaults to `24px`. */
+  readonly '--kui-typography-title-medium-line-height'?: string;
+  /** Defaults to `16px`. */
+  readonly '--kui-typography-title-medium-size'?: string;
+  /** Defaults to `0.15px`. */
+  readonly '--kui-typography-title-medium-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-title-medium-weight'?: string;
+  /** Defaults to `var(--kui-typography-font-family-plain, 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)`. */
+  readonly '--kui-typography-title-small-font'?: string;
+  /** Defaults to `20px`. */
+  readonly '--kui-typography-title-small-line-height'?: string;
+  /** Defaults to `14px`. */
+  readonly '--kui-typography-title-small-size'?: string;
+  /** Defaults to `0.1px`. */
+  readonly '--kui-typography-title-small-tracking'?: string;
+  /** Defaults to `var(--kui-typography-weight-medium, 500)`. */
+  readonly '--kui-typography-title-small-weight'?: string;
+  /** Defaults to `700`. */
+  readonly '--kui-typography-weight-bold'?: string;
+  /** Defaults to `500`. */
+  readonly '--kui-typography-weight-medium'?: string;
+  /** Defaults to `400`. */
+  readonly '--kui-typography-weight-regular'?: string;
+};
+/**
+ * The lower bound of each window size class, in dp. A media query cannot read
+ * a custom property, so on web these are compiled in rather than overridable,
+ * and they are constants here for the same contract.
+ */
+declare const breakpoints: {
+  readonly compact: 0;
+  readonly medium: 600;
+  readonly expanded: 840;
+  readonly large: 1200;
+  readonly extraLarge: 1600;
+};
+//#endregion
+export { type KuiTheme, breakpoints };
+//# sourceMappingURL=defaults.d.ts.map