@aesthetic/system - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

dts/Design.d.ts

@@ -1,4 +0,4 @@
-import Theme from './Theme';
+import { Theme } from './Theme';
 import { DeepPartial, DesignTokens, ThemeOptions, ThemeTokens } from './types';
-export default class Design<T extends object> {
+export declare class Design<T extends object> {
     readonly name: string;
@@ -5,0 +5,0 @@ readonly rootLineHeight: number;

dts/index.d.ts

@@ -5,6 +5,6 @@ /**
  */
-import Design from './Design';
+import { Design } from './Design';
 import * as mixin from './mixins';
-import Theme from './Theme';
-import ThemeRegistry from './ThemeRegistry';
+import { Theme } from './Theme';
+import { ThemeRegistry } from './ThemeRegistry';
 export * from './constants';
@@ -11,0 +11,0 @@ export * from './types';

dts/test.d.ts

@@ -1,2 +0,2 @@
-import { Design, Theme } from './index';
+import { Design, Theme } from '.';
 export declare const design: Design<any>;
@@ -3,0 +3,0 @@ export declare const lightTheme: Theme<any>;

dts/Theme.d.ts

 import { ColorScheme, ContrastLevel, Unit, VariablesMap } from '@aesthetic/types';
-import Design from './Design';
+import type { Design } from './Design';
 import { DeepPartial, MixinType, ThemeOptions, ThemeTokens, Tokens, Utilities, VariableName } from './types';
-export default class Theme<T extends object> implements Utilities<T> {
+export declare class Theme<T extends object> implements Utilities<T> {
     name: string;
@@ -6,0 +6,0 @@ readonly contrast: ContrastLevel;

dts/ThemeRegistry.d.ts

 import { ColorScheme, ContrastLevel, ThemeName } from '@aesthetic/types';
-import Theme from './Theme';
+import { Theme } from './Theme';
 import { ThemeOptions } from './types';
-export default class ThemeRegistry<T extends object> {
+export declare class ThemeRegistry<T extends object> {
     protected darkTheme: string;
@@ -6,0 +6,0 @@ protected defaultTheme: string;

esm/index.js

 // Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: esm
-import { T as Theme } from './bundle-dbc791d5.js';
-export { B as BORDER_SIZES, a as BREAKPOINT_SIZES, b as DEPTHS, D as Design, H as HEADING_LEVELS, c as HEADING_SIZES, P as PALETTE_TYPES, d as SHADE_RANGES, e as SHADOW_SIZES, S as SIZES, f as SPACING_SIZES, g as TEXT_SIZES, T as Theme, m as mixin } from './bundle-dbc791d5.js';
+import { T as Theme } from './bundle-8050ac3c.js';
+export { B as BORDER_SIZES, a as BREAKPOINT_SIZES, b as DEPTHS, D as Design, H as HEADING_LEVELS, c as HEADING_SIZES, P as PALETTE_TYPES, d as SHADE_RANGES, e as SHADOW_SIZES, S as SIZES, f as SPACING_SIZES, g as TEXT_SIZES, T as Theme, m as mixin } from './bundle-8050ac3c.js';
 import '@aesthetic/utils';
 
-var ThemeRegistry = /*#__PURE__*/function () {
-  function ThemeRegistry() {
+class ThemeRegistry {
+  constructor() {
     this.darkTheme = '';
@@ -19,5 +19,3 @@ this.defaultTheme = '';
 
-  var _proto = ThemeRegistry.prototype;
-
-  _proto.getDarkTheme = function getDarkTheme() {
+  getDarkTheme() {
     return this.getTheme(this.darkTheme);
@@ -28,5 +26,5 @@ }
    */
-  ;
 
-  _proto.getLightTheme = function getLightTheme() {
+
+  getLightTheme() {
     return this.getTheme(this.lightTheme);
@@ -38,17 +36,14 @@ }
    */
-  ;
 
-  _proto.getPreferredTheme = function getPreferredTheme(_temp) {
-    var _this = this;
 
-    var _ref = _temp === void 0 ? {} : _temp,
-        matchColorScheme = _ref.matchColorScheme,
-        matchContrastLevel = _ref.matchContrastLevel;
+  getPreferredTheme({
+    matchColorScheme,
+    matchContrastLevel
+  } = {}) {
+    const prefersDarkScheme = matchColorScheme?.('dark');
+    const prefersLightScheme = matchColorScheme?.('light');
+    const prefersHighContrast = matchContrastLevel?.('high');
+    const prefersLowContrast = matchContrastLevel?.('low');
+    const schemeCheckOrder = [];
 
-    var prefersDarkScheme = matchColorScheme == null ? void 0 : matchColorScheme('dark');
-    var prefersLightScheme = matchColorScheme == null ? void 0 : matchColorScheme('light');
-    var prefersHighContrast = matchContrastLevel == null ? void 0 : matchContrastLevel('high');
-    var prefersLowContrast = matchContrastLevel == null ? void 0 : matchContrastLevel('low');
-    var schemeCheckOrder = [];
-
     if (prefersDarkScheme) {
@@ -60,6 +55,6 @@ schemeCheckOrder.push('dark');
 
-    var possibleTheme; // Find a theme based on device preferences
+    let possibleTheme; // Find a theme based on device preferences
 
-    schemeCheckOrder.some(function (scheme) {
-      var contrastCheckOrder = ['normal'];
+    schemeCheckOrder.some(scheme => {
+      const contrastCheckOrder = ['normal'];
 
@@ -72,6 +67,6 @@ if (prefersHighContrast) {
 
-      return contrastCheckOrder.some(function (contrast) {
-        possibleTheme = _this.query({
-          contrast: contrast,
-          scheme: scheme
+      return contrastCheckOrder.some(contrast => {
+        possibleTheme = this.query({
+          contrast,
+          scheme
         });
@@ -84,3 +79,5 @@ return !!possibleTheme;
       return possibleTheme;
-    } else if (this.defaultTheme) {
+    }
+
+    if (this.defaultTheme) {
       return this.getTheme(this.defaultTheme);
@@ -94,17 +91,13 @@ }
    */
-  ;
 
-  _proto.getTheme = function getTheme(name) {
-    if (process.env.NODE_ENV !== "production") {
-      if (!name) {
-        throw new Error('Cannot find a theme without a name.');
-      }
+
+  getTheme(name) {
+    if (process.env.NODE_ENV !== "production" && !name) {
+      throw new Error('Cannot find a theme without a name.');
     }
 
-    var theme = this.themes[name];
+    const theme = this.themes[name];
 
-    if (process.env.NODE_ENV !== "production") {
-      if (!theme) {
-        throw new Error("Theme \"" + name + "\" does not exist. Has it been registered?");
-      }
+    if (process.env.NODE_ENV !== "production" && !theme) {
+      throw new Error(`Theme "${name}" does not exist. Has it been registered?`);
     }
@@ -117,8 +110,8 @@
    */
-  ;
 
-  _proto.query = function query(params) {
-    return Object.values(this.themes).find(function (theme) {
-      var conditions = [];
 
+  query(params) {
+    return Object.values(this.themes).find(theme => {
+      const conditions = [];
+
       if (params.contrast) {
@@ -132,5 +125,3 @@ conditions.push(theme.contrast === params.contrast);
 
-      return conditions.every(function (c) {
-        return c === true;
-      });
+      return conditions.every(c => !!c);
     });
@@ -142,13 +133,7 @@ }
    */
-  ;
 
-  _proto.register = function register(name, theme, isDefault) {
-    if (isDefault === void 0) {
-      isDefault = false;
-    }
 
-    if (process.env.NODE_ENV !== "production") {
-      if (!(theme instanceof Theme)) {
-        throw new TypeError('Only a `Theme` object can be registered.');
-      }
+  register(name, theme, isDefault = false) {
+    if (process.env.NODE_ENV !== "production" && !(theme instanceof Theme)) {
+      throw new TypeError('Only a `Theme` object can be registered.');
     }
@@ -166,3 +151,3 @@
       if (process.env.NODE_ENV !== "production") {
-        throw new Error("Theme \"" + name + "\" has already been registered under \"" + theme.name + "\".");
+        throw new Error(`Theme "${name}" has already been registered under "${theme.name}".`);
       }
@@ -184,5 +169,5 @@ } else {
    */
-  ;
 
-  _proto.reset = function reset() {
+
+  reset() {
     this.darkTheme = '';
@@ -192,8 +177,7 @@ this.lightTheme = '';
     this.themes = {};
-  };
+  }
 
-  return ThemeRegistry;
-}();
+}
 
 export { ThemeRegistry };
 //# sourceMappingURL=index.js.map

esm/test.js

 // Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: esm
-import { D as Design } from './bundle-dbc791d5.js';
+import { D as Design } from './bundle-8050ac3c.js';
 import '@aesthetic/utils';
-var design = new Design('test-design', {
+const design = new Design('test-design', {
   border: {
@@ -151,3 +151,3 @@ sm: {
 });
-var lightTheme = design.createTheme({
+const lightTheme = design.createTheme({
   contrast: 'normal',
@@ -449,3 +449,3 @@ scheme: 'light'
 });
-var darkTheme = design.createTheme({
+const darkTheme = design.createTheme({
   contrast: 'normal',
@@ -452,0 +452,0 @@ scheme: 'dark'

package.json

 {
   "name": "@aesthetic/system",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Web based building blocks for the Aesthetic design system.",
@@ -18,3 +18,4 @@ "keywords": [
   "license": "MIT",
-  "main": "./lib/index.js",
+  "type": "module",
+  "main": "./esm/index.js",
   "module": "./esm/index.js",
@@ -39,4 +40,4 @@ "types": "./dts/index.d.ts",
   "dependencies": {
-    "@aesthetic/types": "^0.5.1",
-    "@aesthetic/utils": "^0.7.0"
+    "@aesthetic/types": "^0.6.0",
+    "@aesthetic/utils": "^0.8.0"
   },
@@ -50,3 +51,3 @@ "packemon": {
   },
-  "gitHead": "83a6f780d304728cd59229f848e04491161c5cca"
+  "gitHead": "6fd0ed93f8f15446ba2f9f0be8054a091997cbec"
 }

src/constants.ts

 import {
-  BorderSize,
-  BreakpointSize,
-  ColorShade,
-  CommonSize,
-  ElevationType,
-  HeadingLevel,
-  HeadingSize,
-  PaletteType,
-  ShadowSize,
-  SpacingSize,
-  TextSize,
+	BorderSize,
+	BreakpointSize,
+	ColorShade,
+	CommonSize,
+	ElevationType,
+	HeadingLevel,
+	HeadingSize,
+	PaletteType,
+	ShadowSize,
+	SpacingSize,
+	TextSize,
 } from './types';
@@ -20,11 +20,11 @@
 export const DEPTHS: Record<ElevationType, number> = {
-  content: 100, // xs
-  navigation: 1000, // sm
-  sheet: 1100, // lg
-  overlay: 1200, // lg
-  modal: 1300, // xl
-  toast: 1400, // md
-  dialog: 1500, // md
-  menu: 1600, // md
-  tooltip: 1700, // sm
+	content: 100, // xs
+	navigation: 1000, // sm
+	sheet: 1100, // lg
+	overlay: 1200, // lg
+	modal: 1300, // xl
+	toast: 1400, // md
+	dialog: 1500, // md
+	menu: 1600, // md
+	tooltip: 1700, // sm
 };
@@ -39,25 +39,25 @@
 export const PALETTE_TYPES: PaletteType[] = [
-  'brand',
-  'primary',
-  'secondary',
-  'tertiary',
-  'neutral',
-  'muted',
-  'danger',
-  'warning',
-  'negative',
-  'positive',
+	'brand',
+	'primary',
+	'secondary',
+	'tertiary',
+	'neutral',
+	'muted',
+	'danger',
+	'warning',
+	'negative',
+	'positive',
 ];
 
 export const SHADE_RANGES: ColorShade[] = [
-  '00',
-  '10',
-  '20',
-  '30',
-  '40',
-  '50',
-  '60',
-  '70',
-  '80',
-  '90',
+	'00',
+	'10',
+	'20',
+	'30',
+	'40',
+	'50',
+	'60',
+	'70',
+	'80',
+	'90',
 ];
@@ -64,0 +64,0 @@

src/Design.ts

 import { deepMerge } from '@aesthetic/utils';
 import { DEPTHS } from './constants';
-import Theme from './Theme';
+import { Theme } from './Theme';
 import { DeepPartial, DesignTokens, ThemeOptions, ThemeTokens } from './types';
 
-export default class Design<T extends object> {
-  readonly name: string;
+export class Design<T extends object> {
+	readonly name: string;
 
-  readonly rootLineHeight: number;
+	readonly rootLineHeight: number;
 
-  readonly rootTextSize: number;
+	readonly rootTextSize: number;
 
-  readonly spacingUnit: number;
+	readonly spacingUnit: number;
 
-  readonly tokens: DesignTokens;
+	readonly tokens: DesignTokens;
 
-  constructor(name: string, tokens: Omit<DesignTokens, 'depth'>) {
-    this.name = name;
-    this.tokens = { ...tokens, depth: DEPTHS };
-    this.rootLineHeight = tokens.typography.rootLineHeight;
-    this.rootTextSize = Number.parseFloat(tokens.typography.rootTextSize);
+	constructor(name: string, tokens: Omit<DesignTokens, 'depth'>) {
+		this.name = name;
+		this.tokens = { ...tokens, depth: DEPTHS };
+		this.rootLineHeight = tokens.typography.rootLineHeight;
+		this.rootTextSize = Number.parseFloat(tokens.typography.rootTextSize);
 
-    // Pre-compiled for the chosen type, no need to calculate manually
-    this.spacingUnit = tokens.spacing.unit;
-  }
+		// Pre-compiled for the chosen type, no need to calculate manually
+		this.spacingUnit = tokens.spacing.unit;
+	}
 
-  /**
-   * Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
-   */
-  createTheme(options: ThemeOptions, tokens: ThemeTokens): Theme<T> {
-    return new Theme(options, tokens, this);
-  }
+	/**
+	 * Create a new theme with the defined theme tokens, while inheriting the shared design tokens.
+	 */
+	createTheme(options: ThemeOptions, tokens: ThemeTokens): Theme<T> {
+		return new Theme(options, tokens, this);
+	}
 
-  /**
-   * Extend and instantiate a new design instance with customized design tokens.
-   */
-  extend(name: string, tokens: DeepPartial<DesignTokens>): Design<T> {
-    return new Design(name, deepMerge(this.tokens, tokens));
-  }
+	/**
+	 * Extend and instantiate a new design instance with customized design tokens.
+	 */
+	extend(name: string, tokens: DeepPartial<DesignTokens>): Design<T> {
+		return new Design(name, deepMerge(this.tokens, tokens));
+	}
 }

src/index.ts

@@ -6,6 +6,6 @@ /**
 
-import Design from './Design';
+import { Design } from './Design';
 import * as mixin from './mixins';
-import Theme from './Theme';
-import ThemeRegistry from './ThemeRegistry';
+import { Theme } from './Theme';
+import { ThemeRegistry } from './ThemeRegistry';
 
@@ -12,0 +12,0 @@ export * from './constants';

src/mixins.ts

@@ -5,137 +5,135 @@ import { objectLoop } from '@aesthetic/utils';
 export function hideOffscreen() {
-  return {
-    clipPath: 'rect(1px, 1px, 1px, 1px)',
-    height: 1,
-    left: '-5vw',
-    overflow: 'hidden',
-    position: 'fixed',
-    width: 1,
-  };
+	return {
+		clipPath: 'rect(1px, 1px, 1px, 1px)',
+		height: 1,
+		left: '-5vw',
+		overflow: 'hidden',
+		position: 'fixed',
+		width: 1,
+	};
 }
 
 export function hideVisually() {
-  return {
-    '@selectors': {
-      ':not(:focus):not(:active)': {
-        border: 0,
-        clip: 'rect(0, 0, 0, 0)',
-        clipPath: 'inset(50%)',
-        height: 1,
-        margin: 0,
-        overflow: 'hidden',
-        padding: 0,
-        position: 'absolute',
-        whiteSpace: 'nowrap',
-        width: 1,
-      },
-    },
-  };
+	return {
+		'@selectors': {
+			':not(:focus):not(:active)': {
+				border: 0,
+				clip: 'rect(0, 0, 0, 0)',
+				clipPath: 'inset(50%)',
+				height: 1,
+				margin: 0,
+				overflow: 'hidden',
+				padding: 0,
+				position: 'absolute',
+				whiteSpace: 'nowrap',
+				width: 1,
+			},
+		},
+	};
 }
 
 export function resetButton() {
-  return {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    border: 0,
-    cursor: 'pointer',
-    display: 'inline-flex',
-    fontSize: 'inherit',
-    margin: 0,
-    padding: 0,
-    textDecoration: 'none',
-    userSelect: 'auto',
-    verticalAlign: 'middle',
-  };
+	return {
+		appearance: 'none',
+		backgroundColor: 'transparent',
+		border: 0,
+		cursor: 'pointer',
+		display: 'inline-flex',
+		fontSize: 'inherit',
+		margin: 0,
+		padding: 0,
+		textDecoration: 'none',
+		userSelect: 'auto',
+		verticalAlign: 'middle',
+	};
 }
 
 export function resetInput() {
-  return {
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    margin: 0,
-    padding: 0,
-    width: '100%',
-    '@selectors': {
-      '::-moz-focus-outer': {
-        border: 0,
-      },
-    },
-  };
+	return {
+		appearance: 'none',
+		backgroundColor: 'transparent',
+		margin: 0,
+		padding: 0,
+		width: '100%',
+		'@selectors': {
+			'::-moz-focus-outer': {
+				border: 0,
+			},
+		},
+	};
 }
 
 export function resetList() {
-  return {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-  };
+	return {
+		listStyle: 'none',
+		margin: 0,
+		padding: 0,
+	};
 }
 
 export function resetMedia() {
-  return {
-    display: 'block',
-    verticalAlign: 'middle',
-  };
+	return {
+		display: 'block',
+		verticalAlign: 'middle',
+	};
 }
 
 export function resetTypography() {
-  return {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    fontWeight: 'normal',
-    wordWrap: 'break-word',
-  };
+	return {
+		fontFamily: 'inherit',
+		fontSize: 'inherit',
+		fontWeight: 'normal',
+		wordWrap: 'break-word',
+	};
 }
 
 export function root(css: Utilities<object>) {
-  const declaration = {
-    backgroundColor: css.var('palette-neutral-color-00'),
-    color: css.var('palette-neutral-text'),
-    fontFamily: css.var('typography-font-text'),
-    fontSize: css.var('typography-root-text-size'),
-    lineHeight: css.var('typography-root-line-height'),
-    textRendering: 'optimizeLegibility',
-    textSizeAdjust: '100%',
-    margin: 0,
-    padding: 0,
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    '@media': {},
-  };
+	const declaration = {
+		backgroundColor: css.var('palette-neutral-color-00'),
+		color: css.var('palette-neutral-text'),
+		fontFamily: css.var('typography-font-text'),
+		fontSize: css.var('typography-root-text-size'),
+		lineHeight: css.var('typography-root-line-height'),
+		textRendering: 'optimizeLegibility',
+		textSizeAdjust: '100%',
+		margin: 0,
+		padding: 0,
+		'-webkit-font-smoothing': 'antialiased',
+		'-moz-osx-font-smoothing': 'grayscale',
+		'@media': {},
+	};
 
-  // Fluid typography!
-  objectLoop(css.tokens.breakpoint, (bp, size) => {
-    (declaration['@media'] as Record<string, object>)[bp.query] = {
-      fontSize: css.var(`breakpoint-${size}-root-text-size` as 'breakpoint-md-root-text-size'),
-      lineHeight: css.var(
-        `breakpoint-${size}-root-line-height` as 'breakpoint-md-root-line-height',
-      ),
-    };
-  });
+	// Fluid typography!
+	objectLoop(css.tokens.breakpoint, (bp, size) => {
+		(declaration['@media'] as Record<string, object>)[bp.query] = {
+			fontSize: css.var(`breakpoint-${size}-root-text-size`),
+			lineHeight: css.var(`breakpoint-${size}-root-line-height`),
+		};
+	});
 
-  return declaration;
+	return declaration;
 }
 
 export function textBreak() {
-  return {
-    overflowWrap: 'break-word',
-    wordWrap: 'break-word',
-    wordBreak: 'break-word',
-  };
+	return {
+		overflowWrap: 'break-word',
+		wordWrap: 'break-word',
+		wordBreak: 'break-word',
+	};
 }
 
 export function textTruncate() {
-  return {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  };
+	return {
+		overflow: 'hidden',
+		textOverflow: 'ellipsis',
+		whiteSpace: 'nowrap',
+	};
 }
 
 export function textWrap() {
-  return {
-    overflowWrap: 'normal',
-    wordWrap: 'normal',
-    wordBreak: 'normal',
-  };
+	return {
+		overflowWrap: 'normal',
+		wordWrap: 'normal',
+		wordBreak: 'normal',
+	};
 }
@@ -145,13 +143,13 @@
 export const MIXIN_MAP: Record<MixinType, MixinTemplate<any>> = {
-  'hide-offscreen': hideOffscreen,
-  'hide-visually': hideVisually,
-  'reset-button': resetButton,
-  'reset-input': resetInput,
-  'reset-list': resetList,
-  'reset-media': resetMedia,
-  'reset-typography': resetTypography,
-  root,
-  'text-break': textBreak,
-  'text-truncate': textTruncate,
-  'text-wrap': textWrap,
+	'hide-offscreen': hideOffscreen,
+	'hide-visually': hideVisually,
+	'reset-button': resetButton,
+	'reset-input': resetInput,
+	'reset-list': resetList,
+	'reset-media': resetMedia,
+	'reset-typography': resetTypography,
+	root,
+	'text-break': textBreak,
+	'text-truncate': textTruncate,
+	'text-wrap': textWrap,
 };

src/test.ts

@@ -1,513 +0,512 @@
-import { Design, Theme } from './index';
+import { Design, Theme } from '.';
 
 export const design = new Design<any>('test-design', {
-  border: {
-    sm: {
-      radius: '0.14rem',
-      width: '0.04rem',
-    },
-    df: {
-      radius: '0.21rem',
-      width: '0.07rem',
-    },
-    lg: {
-      radius: '0.32rem',
-      width: '0.14rem',
-    },
-  },
-  breakpoint: {
-    xs: {
-      query: '(min-width: 45.71em) and (max-width: 68.50em)',
-      querySize: 640,
-      rootLineHeight: 1.33,
-      rootTextSize: '14.94px',
-    },
-    sm: {
-      query: '(min-width: 68.57em) and (max-width: 91.36em)',
-      querySize: 960,
-      rootLineHeight: 1.42,
-      rootTextSize: '15.94px',
-    },
-    md: {
-      query: '(min-width: 91.43em) and (max-width: 114.21em)',
-      querySize: 1280,
-      rootLineHeight: 1.52,
-      rootTextSize: '17.01px',
-    },
-    lg: {
-      query: '(min-width: 114.29em) and (max-width: 137.07em)',
-      querySize: 1600,
-      rootLineHeight: 1.62,
-      rootTextSize: '18.15px',
-    },
-    xl: {
-      query: '(min-width: 137.14em)',
-      querySize: 1920,
-      rootLineHeight: 1.73,
-      rootTextSize: '19.36px',
-    },
-  },
-  heading: {
-    l1: {
-      letterSpacing: '0.25px',
-      lineHeight: 1.5,
-      size: '1.14rem',
-    },
-    l2: {
-      letterSpacing: '0.33px',
-      lineHeight: 1.69,
-      size: '1.43rem',
-    },
-    l3: {
-      letterSpacing: '0.44px',
-      lineHeight: 1.9,
-      size: '1.79rem',
-    },
-    l4: {
-      letterSpacing: '0.59px',
-      lineHeight: 2.14,
-      size: '2.23rem',
-    },
-    l5: {
-      letterSpacing: '0.79px',
-      lineHeight: 2.4,
-      size: '2.79rem',
-    },
-    l6: {
-      letterSpacing: '1.05px',
-      lineHeight: 2.7,
-      size: '3.49rem',
-    },
-  },
-  shadow: {
-    xs: {
-      x: '0rem',
-      y: '0.14rem',
-      blur: '0.14rem',
-      spread: '0rem',
-    },
-    sm: {
-      x: '0rem',
-      y: '0.23rem',
-      blur: '0.25rem',
-      spread: '0rem',
-    },
-    md: {
-      x: '0rem',
-      y: '0.37rem',
-      blur: '0.44rem',
-      spread: '0rem',
-    },
-    lg: {
-      x: '0rem',
-      y: '0.61rem',
-      blur: '0.77rem',
-      spread: '0rem',
-    },
-    xl: {
-      x: '0rem',
-      y: '0.98rem',
-      blur: '1.34rem',
-      spread: '0rem',
-    },
-  },
-  spacing: {
-    xs: '0.31rem',
-    sm: '0.63rem',
-    df: '1.25rem',
-    lg: '2.50rem',
-    xl: '3.75rem',
-    type: 'vertical-rhythm',
-    unit: 17.5,
-  },
-  text: {
-    sm: {
-      lineHeight: 1.25,
-      size: '0.89rem',
-    },
-    df: {
-      lineHeight: 1.25,
-      size: '1rem',
-    },
-    lg: {
-      lineHeight: 1.25,
-      size: '1.13rem',
-    },
-  },
-  typography: {
-    font: {
-      heading:
-        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-      locale: {},
-      monospace: '"Lucida Console", Monaco, monospace',
-      text:
-        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-      system:
-        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    },
-    rootLineHeight: 1.25,
-    rootTextSize: '14px',
-  },
+	border: {
+		sm: {
+			radius: '0.14rem',
+			width: '0.04rem',
+		},
+		df: {
+			radius: '0.21rem',
+			width: '0.07rem',
+		},
+		lg: {
+			radius: '0.32rem',
+			width: '0.14rem',
+		},
+	},
+	breakpoint: {
+		xs: {
+			query: '(min-width: 45.71em) and (max-width: 68.50em)',
+			querySize: 640,
+			rootLineHeight: 1.33,
+			rootTextSize: '14.94px',
+		},
+		sm: {
+			query: '(min-width: 68.57em) and (max-width: 91.36em)',
+			querySize: 960,
+			rootLineHeight: 1.42,
+			rootTextSize: '15.94px',
+		},
+		md: {
+			query: '(min-width: 91.43em) and (max-width: 114.21em)',
+			querySize: 1280,
+			rootLineHeight: 1.52,
+			rootTextSize: '17.01px',
+		},
+		lg: {
+			query: '(min-width: 114.29em) and (max-width: 137.07em)',
+			querySize: 1600,
+			rootLineHeight: 1.62,
+			rootTextSize: '18.15px',
+		},
+		xl: {
+			query: '(min-width: 137.14em)',
+			querySize: 1920,
+			rootLineHeight: 1.73,
+			rootTextSize: '19.36px',
+		},
+	},
+	heading: {
+		l1: {
+			letterSpacing: '0.25px',
+			lineHeight: 1.5,
+			size: '1.14rem',
+		},
+		l2: {
+			letterSpacing: '0.33px',
+			lineHeight: 1.69,
+			size: '1.43rem',
+		},
+		l3: {
+			letterSpacing: '0.44px',
+			lineHeight: 1.9,
+			size: '1.79rem',
+		},
+		l4: {
+			letterSpacing: '0.59px',
+			lineHeight: 2.14,
+			size: '2.23rem',
+		},
+		l5: {
+			letterSpacing: '0.79px',
+			lineHeight: 2.4,
+			size: '2.79rem',
+		},
+		l6: {
+			letterSpacing: '1.05px',
+			lineHeight: 2.7,
+			size: '3.49rem',
+		},
+	},
+	shadow: {
+		xs: {
+			x: '0rem',
+			y: '0.14rem',
+			blur: '0.14rem',
+			spread: '0rem',
+		},
+		sm: {
+			x: '0rem',
+			y: '0.23rem',
+			blur: '0.25rem',
+			spread: '0rem',
+		},
+		md: {
+			x: '0rem',
+			y: '0.37rem',
+			blur: '0.44rem',
+			spread: '0rem',
+		},
+		lg: {
+			x: '0rem',
+			y: '0.61rem',
+			blur: '0.77rem',
+			spread: '0rem',
+		},
+		xl: {
+			x: '0rem',
+			y: '0.98rem',
+			blur: '1.34rem',
+			spread: '0rem',
+		},
+	},
+	spacing: {
+		xs: '0.31rem',
+		sm: '0.63rem',
+		df: '1.25rem',
+		lg: '2.50rem',
+		xl: '3.75rem',
+		type: 'vertical-rhythm',
+		unit: 17.5,
+	},
+	text: {
+		sm: {
+			lineHeight: 1.25,
+			size: '0.89rem',
+		},
+		df: {
+			lineHeight: 1.25,
+			size: '1rem',
+		},
+		lg: {
+			lineHeight: 1.25,
+			size: '1.13rem',
+		},
+	},
+	typography: {
+		font: {
+			heading:
+				'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+			locale: {},
+			monospace: '"Lucida Console", Monaco, monospace',
+			text: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+			system:
+				'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+		},
+		rootLineHeight: 1.25,
+		rootTextSize: '14px',
+	},
 });
 
 export const lightTheme: Theme<any> = design.createTheme(
-  {
-    contrast: 'normal',
-    scheme: 'light',
-  },
-  {
-    palette: {
-      brand: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      primary: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      secondary: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      tertiary: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      neutral: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      muted: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      warning: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      danger: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      negative: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-      positive: {
-        color: {
-          '10': '#fff',
-          '20': '#fff',
-          '30': '#fff',
-          '40': '#fff',
-          '50': '#fff',
-          '60': '#fff',
-          '70': '#fff',
-          '80': '#fff',
-          '90': '#fff',
-          '00': '#fff',
-        },
-        text: '#fff',
-        bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-        fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
-      },
-    },
-  },
+	{
+		contrast: 'normal',
+		scheme: 'light',
+	},
+	{
+		palette: {
+			brand: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			primary: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			secondary: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			tertiary: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			neutral: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			muted: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			warning: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			danger: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			negative: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+			positive: {
+				color: {
+					'10': '#fff',
+					'20': '#fff',
+					'30': '#fff',
+					'40': '#fff',
+					'50': '#fff',
+					'60': '#fff',
+					'70': '#fff',
+					'80': '#fff',
+					'90': '#fff',
+					'00': '#fff',
+				},
+				text: '#fff',
+				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
+			},
+		},
+	},
 );
 
 export const darkTheme: Theme<any> = design.createTheme(
-  {
-    contrast: 'normal',
-    scheme: 'dark',
-  },
-  {
-    palette: {
-      brand: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      primary: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      secondary: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      tertiary: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      neutral: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      muted: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      warning: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      danger: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      negative: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-      positive: {
-        color: {
-          '10': '#000',
-          '20': '#000',
-          '30': '#000',
-          '40': '#000',
-          '50': '#000',
-          '60': '#000',
-          '70': '#000',
-          '80': '#000',
-          '90': '#000',
-          '00': '#000',
-        },
-        text: '#000',
-        bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-        fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
-      },
-    },
-  },
+	{
+		contrast: 'normal',
+		scheme: 'dark',
+	},
+	{
+		palette: {
+			brand: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			primary: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			secondary: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			tertiary: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			neutral: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			muted: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			warning: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			danger: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			negative: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+			positive: {
+				color: {
+					'10': '#000',
+					'20': '#000',
+					'30': '#000',
+					'40': '#000',
+					'50': '#000',
+					'60': '#000',
+					'70': '#000',
+					'80': '#000',
+					'90': '#000',
+					'00': '#000',
+				},
+				text: '#000',
+				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
+			},
+		},
+	},
 );

src/Theme.ts

@@ -5,116 +5,116 @@ /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any */
 import { deepMerge, hyphenate, isObject, objectLoop } from '@aesthetic/utils';
-import Design from './Design';
+import type { Design } from './Design';
 import { MIXIN_MAP } from './mixins';
 import {
-  DeepPartial,
-  MixinType,
-  ThemeOptions,
-  ThemeTokens,
-  Tokens,
-  Utilities,
-  VariableName,
+	DeepPartial,
+	MixinType,
+	ThemeOptions,
+	ThemeTokens,
+	Tokens,
+	Utilities,
+	VariableName,
 } from './types';
 
-export default class Theme<T extends object> implements Utilities<T> {
-  name: string = '';
+export class Theme<T extends object> implements Utilities<T> {
+	name: string = '';
 
-  readonly contrast: ContrastLevel;
+	readonly contrast: ContrastLevel;
 
-  readonly scheme: ColorScheme;
+	readonly scheme: ColorScheme;
 
-  readonly tokens: Tokens;
+	readonly tokens: Tokens;
 
-  private cssVariables?: VariablesMap;
+	private cssVariables?: VariablesMap;
 
-  private design: Design<T>;
+	private design: Design<T>;
 
-  constructor(options: ThemeOptions, tokens: ThemeTokens, design: Design<T>) {
-    this.contrast = options.contrast;
-    this.scheme = options.scheme;
-    this.design = design;
-    this.tokens = { ...design.tokens, ...tokens };
-  }
+	constructor(options: ThemeOptions, tokens: ThemeTokens, design: Design<T>) {
+		this.contrast = options.contrast;
+		this.scheme = options.scheme;
+		this.design = design;
+		this.tokens = { ...design.tokens, ...tokens };
+	}
 
-  /**
-   * Extend and instantiate a new theme instance with customized tokens.
-   */
-  extend(tokens: DeepPartial<ThemeTokens>, options: Partial<ThemeOptions> = {}): Theme<T> {
-    return new Theme(
-      {
-        contrast: this.contrast,
-        scheme: this.scheme,
-        ...options,
-      },
-      deepMerge(this.tokens, tokens),
-      this.design,
-    );
-  }
+	/**
+	 * Extend and instantiate a new theme instance with customized tokens.
+	 */
+	extend(tokens: DeepPartial<ThemeTokens>, options: Partial<ThemeOptions> = {}): Theme<T> {
+		return new Theme(
+			{
+				contrast: this.contrast,
+				scheme: this.scheme,
+				...options,
+			},
+			deepMerge(this.tokens, tokens),
+			this.design,
+		);
+	}
 
-  /**
-   * Return both design and theme tokens as a mapping of CSS variables.
-   */
-  toVariables(): VariablesMap {
-    if (this.cssVariables) {
-      return this.cssVariables;
-    }
+	/**
+	 * Return both design and theme tokens as a mapping of CSS variables.
+	 */
+	toVariables(): VariablesMap {
+		if (this.cssVariables) {
+			return this.cssVariables;
+		}
 
-    const vars: VariablesMap = {};
-    const collapseTree = (data: Record<string, any>, path: string[]) => {
-      objectLoop(data, (value, key) => {
-        const nextPath = [...path, hyphenate(key)];
+		const vars: VariablesMap = {};
+		const collapseTree = (data: Record<string, any>, path: string[]) => {
+			objectLoop(data, (value, key) => {
+				const nextPath = [...path, hyphenate(key)];
 
-        if (isObject(value)) {
-          collapseTree(value, nextPath);
-        } else {
-          vars[`--${nextPath.join('-')}`] = value;
-        }
-      });
-    };
+				if (isObject(value)) {
+					collapseTree(value, nextPath);
+				} else {
+					vars[`--${nextPath.join('-')}`] = value;
+				}
+			});
+		};
 
-    collapseTree(this.tokens, []);
+		collapseTree(this.tokens, []);
 
-    this.cssVariables = vars;
+		this.cssVariables = vars;
 
-    return this.cssVariables;
-  }
+		return this.cssVariables;
+	}
 
-  /**
-   * Return merged CSS properties from the defined mixin, all template overrides,
-   * and the provided additional CSS properties.
-   */
-  mixin = (name: MixinType, rule?: T): T => {
-    const properties: object = {};
-    const mixin = MIXIN_MAP[name];
+	/**
+	 * Return merged CSS properties from the defined mixin, all template overrides,
+	 * and the provided additional CSS properties.
+	 */
+	mixin = (name: MixinType, rule?: T): T => {
+		const properties: object = {};
+		const mixin = MIXIN_MAP[name];
 
-    if (mixin) {
-      Object.assign(properties, mixin(this));
-    } else if (__DEV__) {
-      throw new Error(`Unknown mixin "${name}".`);
-    }
+		if (mixin) {
+			Object.assign(properties, mixin(this));
+		} else if (__DEV__) {
+			throw new Error(`Unknown mixin "${name}".`);
+		}
 
-    if (rule) {
-      return deepMerge(properties, rule);
-    }
+		if (rule) {
+			return deepMerge(properties, rule);
+		}
 
-    return properties as T;
-  };
+		return properties as T;
+	};
 
-  /**
-   * Return a `rem` unit equivalent for the current spacing type and unit.
-   */
-  unit = (...multipliers: number[]): Unit =>
-    multipliers
-      .map(
-        (m) =>
-          `${((this.design.spacingUnit * m) / this.design.rootTextSize)
-            .toFixed(2)
-            .replace('.00', '')}rem`,
-      )
-      .join(' ');
+	/**
+	 * Return a `rem` unit equivalent for the current spacing type and unit.
+	 */
+	unit = (...multipliers: number[]): Unit =>
+		multipliers
+			.map(
+				(m) =>
+					`${((this.design.spacingUnit * m) / this.design.rootTextSize)
+						.toFixed(2)
+						.replace('.00', '')}rem`,
+			)
+			.join(' ');
 
-  /**
-   * Return a CSS variable declaration with the defined name and fallbacks.
-   */
-  var = (name: VariableName, ...fallbacks: (number | string)[]): string =>
-    `var(${[`--${name}`, ...fallbacks].join(', ')})`;
+	/**
+	 * Return a CSS variable declaration with the defined name and fallbacks.
+	 */
+	var = (name: VariableName, ...fallbacks: (number | string)[]): string =>
+		`var(${[`--${name}`, ...fallbacks].join(', ')})`;
 }

src/ThemeRegistry.ts

 import { ColorScheme, ContrastLevel, ThemeName } from '@aesthetic/types';
-import Theme from './Theme';
+import { Theme } from './Theme';
 import { ThemeOptions } from './types';
 
-export default class ThemeRegistry<T extends object> {
-  protected darkTheme: string = '';
+export class ThemeRegistry<T extends object> {
+	protected darkTheme: string = '';
 
-  protected defaultTheme: string = '';
+	protected defaultTheme: string = '';
 
-  protected lightTheme: string = '';
+	protected lightTheme: string = '';
 
-  protected themes: Record<string, Theme<T>> = {};
+	protected themes: Record<string, Theme<T>> = {};
 
-  /**
-   * Return the default dark theme.
-   */
-  getDarkTheme(): Theme<T> {
-    return this.getTheme(this.darkTheme);
-  }
+	/**
+	 * Return the default dark theme.
+	 */
+	getDarkTheme(): Theme<T> {
+		return this.getTheme(this.darkTheme);
+	}
 
-  /**
-   * Return the default light theme.
-   */
-  getLightTheme(): Theme<T> {
-    return this.getTheme(this.lightTheme);
-  }
+	/**
+	 * Return the default light theme.
+	 */
+	getLightTheme(): Theme<T> {
+		return this.getTheme(this.lightTheme);
+	}
 
-  /**
-   * Find an approprite theme based on the user's or device's preferences.
-   * Will check for preferred color schemes and contrast levels.
-   */
-  getPreferredTheme({
-    matchColorScheme,
-    matchContrastLevel,
-  }: {
-    matchColorScheme?: (scheme: ColorScheme) => boolean;
-    matchContrastLevel?: (level: ContrastLevel) => boolean;
-  } = {}): Theme<T> {
-    const prefersDarkScheme = matchColorScheme?.('dark');
-    const prefersLightScheme = matchColorScheme?.('light');
-    const prefersHighContrast = matchContrastLevel?.('high');
-    const prefersLowContrast = matchContrastLevel?.('low');
-    const schemeCheckOrder: ColorScheme[] = [];
+	/**
+	 * Find an approprite theme based on the user's or device's preferences.
+	 * Will check for preferred color schemes and contrast levels.
+	 */
+	getPreferredTheme({
+		matchColorScheme,
+		matchContrastLevel,
+	}: {
+		matchColorScheme?: (scheme: ColorScheme) => boolean;
+		matchContrastLevel?: (level: ContrastLevel) => boolean;
+	} = {}): Theme<T> {
+		const prefersDarkScheme = matchColorScheme?.('dark');
+		const prefersLightScheme = matchColorScheme?.('light');
+		const prefersHighContrast = matchContrastLevel?.('high');
+		const prefersLowContrast = matchContrastLevel?.('low');
+		const schemeCheckOrder: ColorScheme[] = [];
 
-    if (prefersDarkScheme) {
-      schemeCheckOrder.push('dark');
-    } else if (prefersLightScheme) {
-      schemeCheckOrder.push('light');
-    }
+		if (prefersDarkScheme) {
+			schemeCheckOrder.push('dark');
+		} else if (prefersLightScheme) {
+			schemeCheckOrder.push('light');
+		}
 
-    let possibleTheme: Theme<T> | undefined;
+		let possibleTheme: Theme<T> | undefined;
 
-    // Find a theme based on device preferences
-    schemeCheckOrder.some((scheme) => {
-      const contrastCheckOrder: ContrastLevel[] = ['normal'];
+		// Find a theme based on device preferences
+		schemeCheckOrder.some((scheme) => {
+			const contrastCheckOrder: ContrastLevel[] = ['normal'];
 
-      if (prefersHighContrast) {
-        contrastCheckOrder.unshift('high');
-      } else if (prefersLowContrast) {
-        contrastCheckOrder.unshift('low');
-      }
+			if (prefersHighContrast) {
+				contrastCheckOrder.unshift('high');
+			} else if (prefersLowContrast) {
+				contrastCheckOrder.unshift('low');
+			}
 
-      return contrastCheckOrder.some((contrast) => {
-        possibleTheme = this.query({ contrast, scheme });
+			return contrastCheckOrder.some((contrast) => {
+				possibleTheme = this.query({ contrast, scheme });
 
-        return !!possibleTheme;
-      });
-    });
+				return !!possibleTheme;
+			});
+		});
 
-    if (possibleTheme) {
-      return possibleTheme;
-    } else if (this.defaultTheme) {
-      return this.getTheme(this.defaultTheme);
-    }
+		if (possibleTheme) {
+			return possibleTheme;
+		}
+		if (this.defaultTheme) {
+			return this.getTheme(this.defaultTheme);
+		}
 
-    throw new Error('No themes have been registered.');
-  }
+		throw new Error('No themes have been registered.');
+	}
 
-  /**
-   * Return a theme by name or throw an error if not found.
-   */
-  getTheme(name: ThemeName): Theme<T> {
-    if (__DEV__) {
-      if (!name) {
-        throw new Error('Cannot find a theme without a name.');
-      }
-    }
+	/**
+	 * Return a theme by name or throw an error if not found.
+	 */
+	getTheme(name: ThemeName): Theme<T> {
+		if (__DEV__ && !name) {
+			throw new Error('Cannot find a theme without a name.');
+		}
 
-    const theme = this.themes[name];
+		const theme = this.themes[name];
 
-    if (__DEV__) {
-      if (!theme) {
-        throw new Error(`Theme "${name}" does not exist. Has it been registered?`);
-      }
-    }
+		if (__DEV__ && !theme) {
+			throw new Error(`Theme "${name}" does not exist. Has it been registered?`);
+		}
 
-    return theme;
-  }
+		return theme;
+	}
 
-  /**
-   * Query for a theme that matches the defined parameters.
-   */
-  query(params: Partial<ThemeOptions>): Theme<T> | undefined {
-    return Object.values(this.themes).find((theme) => {
-      const conditions: boolean[] = [];
+	/**
+	 * Query for a theme that matches the defined parameters.
+	 */
+	query(params: Partial<ThemeOptions>): Theme<T> | undefined {
+		return Object.values(this.themes).find((theme) => {
+			const conditions: boolean[] = [];
 
-      if (params.contrast) {
-        conditions.push(theme.contrast === params.contrast);
-      }
+			if (params.contrast) {
+				conditions.push(theme.contrast === params.contrast);
+			}
 
-      if (params.scheme) {
-        conditions.push(theme.scheme === params.scheme);
-      }
+			if (params.scheme) {
+				conditions.push(theme.scheme === params.scheme);
+			}
 
-      return conditions.every((c) => c === true);
-    });
-  }
+			return conditions.every((c) => !!c);
+		});
+	}
 
-  /**
-   * Register a theme with a unique name. Can optionally mark a theme
-   * as default for their defined color scheme.
-   */
-  register(name: string, theme: Theme<T>, isDefault: boolean = false): this {
-    if (__DEV__) {
-      if (!(theme instanceof Theme)) {
-        throw new TypeError('Only a `Theme` object can be registered.');
-      }
-    }
+	/**
+	 * Register a theme with a unique name. Can optionally mark a theme
+	 * as default for their defined color scheme.
+	 */
+	register(name: string, theme: Theme<T>, isDefault: boolean = false): this {
+		if (__DEV__ && !(theme instanceof Theme)) {
+			throw new TypeError('Only a `Theme` object can be registered.');
+		}
 
-    if (isDefault) {
-      if (theme.scheme === 'dark') {
-        this.darkTheme = name;
-      } else {
-        this.lightTheme = name;
-      }
-    }
+		if (isDefault) {
+			if (theme.scheme === 'dark') {
+				this.darkTheme = name;
+			} else {
+				this.lightTheme = name;
+			}
+		}
 
-    if (theme.name && theme.name !== name) {
-      if (__DEV__) {
-        throw new Error(`Theme "${name}" has already been registered under "${theme.name}".`);
-      }
-    } else {
-      // eslint-disable-next-line no-param-reassign
-      theme.name = name;
-    }
+		if (theme.name && theme.name !== name) {
+			if (__DEV__) {
+				throw new Error(`Theme "${name}" has already been registered under "${theme.name}".`);
+			}
+		} else {
+			// eslint-disable-next-line no-param-reassign
+			theme.name = name;
+		}
 
-    if (!this.defaultTheme) {
-      this.defaultTheme = name;
-    }
+		if (!this.defaultTheme) {
+			this.defaultTheme = name;
+		}
 
-    this.themes[name] = theme;
+		this.themes[name] = theme;
 
-    return this;
-  }
+		return this;
+	}
 
-  /**
-   * Reset the registry to initial state.
-   */
-  reset() {
-    this.darkTheme = '';
-    this.lightTheme = '';
-    this.defaultTheme = '';
-    this.themes = {};
-  }
+	/**
+	 * Reset the registry to initial state.
+	 */
+	reset() {
+		this.darkTheme = '';
+		this.lightTheme = '';
+		this.defaultTheme = '';
+		this.themes = {};
+	}
 }

src/types.ts

@@ -16,23 +16,23 @@ import { ColorScheme, ContrastLevel, Unit } from '@aesthetic/types';
 export type ElevationType =
-  | 'content'
-  | 'dialog'
-  | 'menu'
-  | 'modal'
-  | 'navigation'
-  | 'overlay'
-  | 'sheet'
-  | 'toast'
-  | 'tooltip';
+	| 'content'
+	| 'dialog'
+	| 'menu'
+	| 'modal'
+	| 'navigation'
+	| 'overlay'
+	| 'sheet'
+	| 'toast'
+	| 'tooltip';
 
 export type PaletteType =
-  | 'brand'
-  | 'danger'
-  | 'muted'
-  | 'negative'
-  | 'neutral'
-  | 'positive'
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'warning';
+	| 'brand'
+	| 'danger'
+	| 'muted'
+	| 'negative'
+	| 'neutral'
+	| 'positive'
+	| 'primary'
+	| 'secondary'
+	| 'tertiary'
+	| 'warning';
 
@@ -52,4 +52,4 @@ export type ShadowSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
 export interface BorderToken {
-  radius: Unit;
-  width: Unit;
+	radius: Unit;
+	width: Unit;
 }
@@ -60,6 +60,6 @@
 export interface BreakpointToken {
-  query: string;
-  querySize: number;
-  rootLineHeight: number;
-  rootTextSize: Unit;
+	query: string;
+	querySize: number;
+	rootLineHeight: number;
+	rootTextSize: Unit;
 }
@@ -74,10 +74,10 @@
 export type ColorStateToken = Record<StateType, Hexcode> & {
-  base: Hexcode;
+	base: Hexcode;
 };
 
 export interface ShadowToken {
-  blur: Unit;
-  spread: Unit;
-  x: Unit;
-  y: Unit;
+	blur: Unit;
+	spread: Unit;
+	x: Unit;
+	y: Unit;
 }
@@ -88,10 +88,10 @@
 export type SpacingTokens = Record<SpacingSize, Unit> & {
-  type: string;
-  unit: number;
+	type: string;
+	unit: number;
 };
 
 export interface HeadingToken {
-  letterSpacing: Unit;
-  lineHeight: number;
-  size: Unit;
+	letterSpacing: Unit;
+	lineHeight: number;
+	size: Unit;
 }
@@ -102,4 +102,4 @@
 export interface TextToken {
-  lineHeight: number;
-  size: Unit;
+	lineHeight: number;
+	size: Unit;
 }
@@ -110,22 +110,22 @@
 export interface TypographyToken {
-  font: {
-    heading: string;
-    locale: Record<string, string>;
-    monospace: string;
-    text: string;
-    system: string;
-  };
-  rootLineHeight: number;
-  rootTextSize: Unit;
+	font: {
+		heading: string;
+		locale: Record<string, string>;
+		monospace: string;
+		text: string;
+		system: string;
+	};
+	rootLineHeight: number;
+	rootTextSize: Unit;
 }
 
 export interface DesignTokens {
-  border: BorderTokens;
-  breakpoint: BreakpointTokens;
-  depth: DepthTokens;
-  heading: HeadingTokens;
-  shadow: ShadowTokens;
-  spacing: SpacingTokens;
-  text: TextTokens;
-  typography: TypographyToken;
+	border: BorderTokens;
+	breakpoint: BreakpointTokens;
+	depth: DepthTokens;
+	heading: HeadingTokens;
+	shadow: ShadowTokens;
+	spacing: SpacingTokens;
+	text: TextTokens;
+	typography: TypographyToken;
 }
@@ -135,100 +135,100 @@
 export interface DesignVariables {
-  'border-sm-radius': Unit;
-  'border-sm-width': Unit;
-  'border-df-radius': Unit;
-  'border-df-width': Unit;
-  'border-lg-radius': Unit;
-  'border-lg-width': Unit;
-  'breakpoint-xs-query': string;
-  'breakpoint-xs-query-size': number;
-  'breakpoint-xs-root-line-height': number;
-  'breakpoint-xs-root-text-size': Unit;
-  'breakpoint-sm-query': string;
-  'breakpoint-sm-query-size': number;
-  'breakpoint-sm-root-line-height': number;
-  'breakpoint-sm-root-text-size': Unit;
-  'breakpoint-md-query': string;
-  'breakpoint-md-query-size': number;
-  'breakpoint-md-root-line-height': number;
-  'breakpoint-md-root-text-size': Unit;
-  'breakpoint-lg-query': string;
-  'breakpoint-lg-query-size': number;
-  'breakpoint-lg-root-line-height': number;
-  'breakpoint-lg-root-text-size': Unit;
-  'breakpoint-xl-query': string;
-  'breakpoint-xl-query-size': number;
-  'breakpoint-xl-root-line-height': number;
-  'breakpoint-xl-root-text-size': Unit;
-  'depth-content': number;
-  'depth-dialog': number;
-  'depth-menu': number;
-  'depth-modal': number;
-  'depth-navigation': number;
-  'depth-overlay': number;
-  'depth-sheet': number;
-  'depth-toast': number;
-  'depth-tooltip': number;
-  'heading-l1-letter-spacing': Unit;
-  'heading-l1-line-height': number;
-  'heading-l1-size': Unit;
-  'heading-l2-letter-spacing': Unit;
-  'heading-l2-line-height': number;
-  'heading-l2-size': Unit;
-  'heading-l3-letter-spacing': Unit;
-  'heading-l3-line-height': number;
-  'heading-l3-size': Unit;
-  'heading-l4-letter-spacing': Unit;
-  'heading-l4-line-height': number;
-  'heading-l4-size': Unit;
-  'heading-l5-letter-spacing': Unit;
-  'heading-l5-line-height': number;
-  'heading-l5-size': Unit;
-  'heading-l6-letter-spacing': Unit;
-  'heading-l6-line-height': number;
-  'heading-l6-size': Unit;
-  'shadow-xs-blur': Unit;
-  'shadow-xs-spread': Unit;
-  'shadow-xs-x': Unit;
-  'shadow-xs-y': Unit;
-  'shadow-sm-blur': Unit;
-  'shadow-sm-spread': Unit;
-  'shadow-sm-x': Unit;
-  'shadow-sm-y': Unit;
-  'shadow-md-blur': Unit;
-  'shadow-md-spread': Unit;
-  'shadow-md-x': Unit;
-  'shadow-md-y': Unit;
-  'shadow-lg-blur': Unit;
-  'shadow-lg-spread': Unit;
-  'shadow-lg-x': Unit;
-  'shadow-lg-y': Unit;
-  'shadow-xl-blur': Unit;
-  'shadow-xl-spread': Unit;
-  'shadow-xl-x': Unit;
-  'shadow-xl-y': Unit;
-  'spacing-xs': Unit;
-  'spacing-sm': Unit;
-  'spacing-df': Unit;
-  'spacing-lg': Unit;
-  'spacing-xl': Unit;
-  'spacing-unit': number;
-  'text-sm-line-height': number;
-  'text-sm-size': Unit;
-  'text-df-line-height': number;
-  'text-df-size': Unit;
-  'text-lg-line-height': number;
-  'text-lg-size': Unit;
-  'typography-font-heading': string;
-  'typography-font-monospace': string;
-  'typography-font-text': string;
-  'typography-font-system': string;
-  'typography-root-line-height': number;
-  'typography-root-text-size': Unit;
+	'border-sm-radius': Unit;
+	'border-sm-width': Unit;
+	'border-df-radius': Unit;
+	'border-df-width': Unit;
+	'border-lg-radius': Unit;
+	'border-lg-width': Unit;
+	'breakpoint-xs-query': string;
+	'breakpoint-xs-query-size': number;
+	'breakpoint-xs-root-line-height': number;
+	'breakpoint-xs-root-text-size': Unit;
+	'breakpoint-sm-query': string;
+	'breakpoint-sm-query-size': number;
+	'breakpoint-sm-root-line-height': number;
+	'breakpoint-sm-root-text-size': Unit;
+	'breakpoint-md-query': string;
+	'breakpoint-md-query-size': number;
+	'breakpoint-md-root-line-height': number;
+	'breakpoint-md-root-text-size': Unit;
+	'breakpoint-lg-query': string;
+	'breakpoint-lg-query-size': number;
+	'breakpoint-lg-root-line-height': number;
+	'breakpoint-lg-root-text-size': Unit;
+	'breakpoint-xl-query': string;
+	'breakpoint-xl-query-size': number;
+	'breakpoint-xl-root-line-height': number;
+	'breakpoint-xl-root-text-size': Unit;
+	'depth-content': number;
+	'depth-dialog': number;
+	'depth-menu': number;
+	'depth-modal': number;
+	'depth-navigation': number;
+	'depth-overlay': number;
+	'depth-sheet': number;
+	'depth-toast': number;
+	'depth-tooltip': number;
+	'heading-l1-letter-spacing': Unit;
+	'heading-l1-line-height': number;
+	'heading-l1-size': Unit;
+	'heading-l2-letter-spacing': Unit;
+	'heading-l2-line-height': number;
+	'heading-l2-size': Unit;
+	'heading-l3-letter-spacing': Unit;
+	'heading-l3-line-height': number;
+	'heading-l3-size': Unit;
+	'heading-l4-letter-spacing': Unit;
+	'heading-l4-line-height': number;
+	'heading-l4-size': Unit;
+	'heading-l5-letter-spacing': Unit;
+	'heading-l5-line-height': number;
+	'heading-l5-size': Unit;
+	'heading-l6-letter-spacing': Unit;
+	'heading-l6-line-height': number;
+	'heading-l6-size': Unit;
+	'shadow-xs-blur': Unit;
+	'shadow-xs-spread': Unit;
+	'shadow-xs-x': Unit;
+	'shadow-xs-y': Unit;
+	'shadow-sm-blur': Unit;
+	'shadow-sm-spread': Unit;
+	'shadow-sm-x': Unit;
+	'shadow-sm-y': Unit;
+	'shadow-md-blur': Unit;
+	'shadow-md-spread': Unit;
+	'shadow-md-x': Unit;
+	'shadow-md-y': Unit;
+	'shadow-lg-blur': Unit;
+	'shadow-lg-spread': Unit;
+	'shadow-lg-x': Unit;
+	'shadow-lg-y': Unit;
+	'shadow-xl-blur': Unit;
+	'shadow-xl-spread': Unit;
+	'shadow-xl-x': Unit;
+	'shadow-xl-y': Unit;
+	'spacing-xs': Unit;
+	'spacing-sm': Unit;
+	'spacing-df': Unit;
+	'spacing-lg': Unit;
+	'spacing-xl': Unit;
+	'spacing-unit': number;
+	'text-sm-line-height': number;
+	'text-sm-size': Unit;
+	'text-df-line-height': number;
+	'text-df-size': Unit;
+	'text-lg-line-height': number;
+	'text-lg-size': Unit;
+	'typography-font-heading': string;
+	'typography-font-monospace': string;
+	'typography-font-text': string;
+	'typography-font-system': string;
+	'typography-root-line-height': number;
+	'typography-root-text-size': Unit;
 }
 
 export interface PaletteToken {
-  color: ColorRangeToken;
-  bg: ColorStateToken;
-  fg: ColorStateToken;
-  text: Hexcode;
+	color: ColorRangeToken;
+	bg: ColorStateToken;
+	fg: ColorStateToken;
+	text: Hexcode;
 }
@@ -239,3 +239,3 @@
 export interface ThemeTokens {
-  palette: PaletteTokens;
+	palette: PaletteTokens;
 }
@@ -245,212 +245,212 @@
 export interface ThemeVariables {
-  'palette-brand-bg-base': Hexcode;
-  'palette-brand-bg-disabled': Hexcode;
-  'palette-brand-bg-focused': Hexcode;
-  'palette-brand-bg-hovered': Hexcode;
-  'palette-brand-bg-selected': Hexcode;
-  'palette-brand-color-00': Hexcode;
-  'palette-brand-color-10': Hexcode;
-  'palette-brand-color-20': Hexcode;
-  'palette-brand-color-30': Hexcode;
-  'palette-brand-color-40': Hexcode;
-  'palette-brand-color-50': Hexcode;
-  'palette-brand-color-60': Hexcode;
-  'palette-brand-color-70': Hexcode;
-  'palette-brand-color-80': Hexcode;
-  'palette-brand-color-90': Hexcode;
-  'palette-brand-fg-base': Hexcode;
-  'palette-brand-fg-disabled': Hexcode;
-  'palette-brand-fg-focused': Hexcode;
-  'palette-brand-fg-hovered': Hexcode;
-  'palette-brand-fg-selected': Hexcode;
-  'palette-brand-text': Hexcode;
-  'palette-danger-bg-base': Hexcode;
-  'palette-danger-bg-disabled': Hexcode;
-  'palette-danger-bg-focused': Hexcode;
-  'palette-danger-bg-hovered': Hexcode;
-  'palette-danger-bg-selected': Hexcode;
-  'palette-danger-color-00': Hexcode;
-  'palette-danger-color-10': Hexcode;
-  'palette-danger-color-20': Hexcode;
-  'palette-danger-color-30': Hexcode;
-  'palette-danger-color-40': Hexcode;
-  'palette-danger-color-50': Hexcode;
-  'palette-danger-color-60': Hexcode;
-  'palette-danger-color-70': Hexcode;
-  'palette-danger-color-80': Hexcode;
-  'palette-danger-color-90': Hexcode;
-  'palette-danger-fg-base': Hexcode;
-  'palette-danger-fg-disabled': Hexcode;
-  'palette-danger-fg-focused': Hexcode;
-  'palette-danger-fg-hovered': Hexcode;
-  'palette-danger-fg-selected': Hexcode;
-  'palette-danger-text': Hexcode;
-  'palette-muted-bg-base': Hexcode;
-  'palette-muted-bg-disabled': Hexcode;
-  'palette-muted-bg-focused': Hexcode;
-  'palette-muted-bg-hovered': Hexcode;
-  'palette-muted-bg-selected': Hexcode;
-  'palette-muted-color-00': Hexcode;
-  'palette-muted-color-10': Hexcode;
-  'palette-muted-color-20': Hexcode;
-  'palette-muted-color-30': Hexcode;
-  'palette-muted-color-40': Hexcode;
-  'palette-muted-color-50': Hexcode;
-  'palette-muted-color-60': Hexcode;
-  'palette-muted-color-70': Hexcode;
-  'palette-muted-color-80': Hexcode;
-  'palette-muted-color-90': Hexcode;
-  'palette-muted-fg-base': Hexcode;
-  'palette-muted-fg-disabled': Hexcode;
-  'palette-muted-fg-focused': Hexcode;
-  'palette-muted-fg-hovered': Hexcode;
-  'palette-muted-fg-selected': Hexcode;
-  'palette-muted-text': Hexcode;
-  'palette-negative-bg-base': Hexcode;
-  'palette-negative-bg-disabled': Hexcode;
-  'palette-negative-bg-focused': Hexcode;
-  'palette-negative-bg-hovered': Hexcode;
-  'palette-negative-bg-selected': Hexcode;
-  'palette-negative-color-00': Hexcode;
-  'palette-negative-color-10': Hexcode;
-  'palette-negative-color-20': Hexcode;
-  'palette-negative-color-30': Hexcode;
-  'palette-negative-color-40': Hexcode;
-  'palette-negative-color-50': Hexcode;
-  'palette-negative-color-60': Hexcode;
-  'palette-negative-color-70': Hexcode;
-  'palette-negative-color-80': Hexcode;
-  'palette-negative-color-90': Hexcode;
-  'palette-negative-fg-base': Hexcode;
-  'palette-negative-fg-disabled': Hexcode;
-  'palette-negative-fg-focused': Hexcode;
-  'palette-negative-fg-hovered': Hexcode;
-  'palette-negative-fg-selected': Hexcode;
-  'palette-negative-text': Hexcode;
-  'palette-neutral-bg-base': Hexcode;
-  'palette-neutral-bg-disabled': Hexcode;
-  'palette-neutral-bg-focused': Hexcode;
-  'palette-neutral-bg-hovered': Hexcode;
-  'palette-neutral-bg-selected': Hexcode;
-  'palette-neutral-color-00': Hexcode;
-  'palette-neutral-color-10': Hexcode;
-  'palette-neutral-color-20': Hexcode;
-  'palette-neutral-color-30': Hexcode;
-  'palette-neutral-color-40': Hexcode;
-  'palette-neutral-color-50': Hexcode;
-  'palette-neutral-color-60': Hexcode;
-  'palette-neutral-color-70': Hexcode;
-  'palette-neutral-color-80': Hexcode;
-  'palette-neutral-color-90': Hexcode;
-  'palette-neutral-fg-base': Hexcode;
-  'palette-neutral-fg-disabled': Hexcode;
-  'palette-neutral-fg-focused': Hexcode;
-  'palette-neutral-fg-hovered': Hexcode;
-  'palette-neutral-fg-selected': Hexcode;
-  'palette-neutral-text': Hexcode;
-  'palette-positive-bg-base': Hexcode;
-  'palette-positive-bg-disabled': Hexcode;
-  'palette-positive-bg-focused': Hexcode;
-  'palette-positive-bg-hovered': Hexcode;
-  'palette-positive-bg-selected': Hexcode;
-  'palette-positive-color-00': Hexcode;
-  'palette-positive-color-10': Hexcode;
-  'palette-positive-color-20': Hexcode;
-  'palette-positive-color-30': Hexcode;
-  'palette-positive-color-40': Hexcode;
-  'palette-positive-color-50': Hexcode;
-  'palette-positive-color-60': Hexcode;
-  'palette-positive-color-70': Hexcode;
-  'palette-positive-color-80': Hexcode;
-  'palette-positive-color-90': Hexcode;
-  'palette-positive-fg-base': Hexcode;
-  'palette-positive-fg-disabled': Hexcode;
-  'palette-positive-fg-focused': Hexcode;
-  'palette-positive-fg-hovered': Hexcode;
-  'palette-positive-fg-selected': Hexcode;
-  'palette-positive-text': Hexcode;
-  'palette-primary-bg-base': Hexcode;
-  'palette-primary-bg-disabled': Hexcode;
-  'palette-primary-bg-focused': Hexcode;
-  'palette-primary-bg-hovered': Hexcode;
-  'palette-primary-bg-selected': Hexcode;
-  'palette-primary-color-00': Hexcode;
-  'palette-primary-color-10': Hexcode;
-  'palette-primary-color-20': Hexcode;
-  'palette-primary-color-30': Hexcode;
-  'palette-primary-color-40': Hexcode;
-  'palette-primary-color-50': Hexcode;
-  'palette-primary-color-60': Hexcode;
-  'palette-primary-color-70': Hexcode;
-  'palette-primary-color-80': Hexcode;
-  'palette-primary-color-90': Hexcode;
-  'palette-primary-fg-base': Hexcode;
-  'palette-primary-fg-disabled': Hexcode;
-  'palette-primary-fg-focused': Hexcode;
-  'palette-primary-fg-hovered': Hexcode;
-  'palette-primary-fg-selected': Hexcode;
-  'palette-primary-text': Hexcode;
-  'palette-secondary-bg-base': Hexcode;
-  'palette-secondary-bg-disabled': Hexcode;
-  'palette-secondary-bg-focused': Hexcode;
-  'palette-secondary-bg-hovered': Hexcode;
-  'palette-secondary-bg-selected': Hexcode;
-  'palette-secondary-color-00': Hexcode;
-  'palette-secondary-color-10': Hexcode;
-  'palette-secondary-color-20': Hexcode;
-  'palette-secondary-color-30': Hexcode;
-  'palette-secondary-color-40': Hexcode;
-  'palette-secondary-color-50': Hexcode;
-  'palette-secondary-color-60': Hexcode;
-  'palette-secondary-color-70': Hexcode;
-  'palette-secondary-color-80': Hexcode;
-  'palette-secondary-color-90': Hexcode;
-  'palette-secondary-fg-base': Hexcode;
-  'palette-secondary-fg-disabled': Hexcode;
-  'palette-secondary-fg-focused': Hexcode;
-  'palette-secondary-fg-hovered': Hexcode;
-  'palette-secondary-fg-selected': Hexcode;
-  'palette-secondary-text': Hexcode;
-  'palette-tertiary-bg-base': Hexcode;
-  'palette-tertiary-bg-disabled': Hexcode;
-  'palette-tertiary-bg-focused': Hexcode;
-  'palette-tertiary-bg-hovered': Hexcode;
-  'palette-tertiary-bg-selected': Hexcode;
-  'palette-tertiary-color-00': Hexcode;
-  'palette-tertiary-color-10': Hexcode;
-  'palette-tertiary-color-20': Hexcode;
-  'palette-tertiary-color-30': Hexcode;
-  'palette-tertiary-color-40': Hexcode;
-  'palette-tertiary-color-50': Hexcode;
-  'palette-tertiary-color-60': Hexcode;
-  'palette-tertiary-color-70': Hexcode;
-  'palette-tertiary-color-80': Hexcode;
-  'palette-tertiary-color-90': Hexcode;
-  'palette-tertiary-fg-base': Hexcode;
-  'palette-tertiary-fg-disabled': Hexcode;
-  'palette-tertiary-fg-focused': Hexcode;
-  'palette-tertiary-fg-hovered': Hexcode;
-  'palette-tertiary-fg-selected': Hexcode;
-  'palette-tertiary-text': Hexcode;
-  'palette-warning-bg-base': Hexcode;
-  'palette-warning-bg-disabled': Hexcode;
-  'palette-warning-bg-focused': Hexcode;
-  'palette-warning-bg-hovered': Hexcode;
-  'palette-warning-bg-selected': Hexcode;
-  'palette-warning-color-00': Hexcode;
-  'palette-warning-color-10': Hexcode;
-  'palette-warning-color-20': Hexcode;
-  'palette-warning-color-30': Hexcode;
-  'palette-warning-color-40': Hexcode;
-  'palette-warning-color-50': Hexcode;
-  'palette-warning-color-60': Hexcode;
-  'palette-warning-color-70': Hexcode;
-  'palette-warning-color-80': Hexcode;
-  'palette-warning-color-90': Hexcode;
-  'palette-warning-fg-base': Hexcode;
-  'palette-warning-fg-disabled': Hexcode;
-  'palette-warning-fg-focused': Hexcode;
-  'palette-warning-fg-hovered': Hexcode;
-  'palette-warning-fg-selected': Hexcode;
-  'palette-warning-text': Hexcode;
+	'palette-brand-bg-base': Hexcode;
+	'palette-brand-bg-disabled': Hexcode;
+	'palette-brand-bg-focused': Hexcode;
+	'palette-brand-bg-hovered': Hexcode;
+	'palette-brand-bg-selected': Hexcode;
+	'palette-brand-color-00': Hexcode;
+	'palette-brand-color-10': Hexcode;
+	'palette-brand-color-20': Hexcode;
+	'palette-brand-color-30': Hexcode;
+	'palette-brand-color-40': Hexcode;
+	'palette-brand-color-50': Hexcode;
+	'palette-brand-color-60': Hexcode;
+	'palette-brand-color-70': Hexcode;
+	'palette-brand-color-80': Hexcode;
+	'palette-brand-color-90': Hexcode;
+	'palette-brand-fg-base': Hexcode;
+	'palette-brand-fg-disabled': Hexcode;
+	'palette-brand-fg-focused': Hexcode;
+	'palette-brand-fg-hovered': Hexcode;
+	'palette-brand-fg-selected': Hexcode;
+	'palette-brand-text': Hexcode;
+	'palette-danger-bg-base': Hexcode;
+	'palette-danger-bg-disabled': Hexcode;
+	'palette-danger-bg-focused': Hexcode;
+	'palette-danger-bg-hovered': Hexcode;
+	'palette-danger-bg-selected': Hexcode;
+	'palette-danger-color-00': Hexcode;
+	'palette-danger-color-10': Hexcode;
+	'palette-danger-color-20': Hexcode;
+	'palette-danger-color-30': Hexcode;
+	'palette-danger-color-40': Hexcode;
+	'palette-danger-color-50': Hexcode;
+	'palette-danger-color-60': Hexcode;
+	'palette-danger-color-70': Hexcode;
+	'palette-danger-color-80': Hexcode;
+	'palette-danger-color-90': Hexcode;
+	'palette-danger-fg-base': Hexcode;
+	'palette-danger-fg-disabled': Hexcode;
+	'palette-danger-fg-focused': Hexcode;
+	'palette-danger-fg-hovered': Hexcode;
+	'palette-danger-fg-selected': Hexcode;
+	'palette-danger-text': Hexcode;
+	'palette-muted-bg-base': Hexcode;
+	'palette-muted-bg-disabled': Hexcode;
+	'palette-muted-bg-focused': Hexcode;
+	'palette-muted-bg-hovered': Hexcode;
+	'palette-muted-bg-selected': Hexcode;
+	'palette-muted-color-00': Hexcode;
+	'palette-muted-color-10': Hexcode;
+	'palette-muted-color-20': Hexcode;
+	'palette-muted-color-30': Hexcode;
+	'palette-muted-color-40': Hexcode;
+	'palette-muted-color-50': Hexcode;
+	'palette-muted-color-60': Hexcode;
+	'palette-muted-color-70': Hexcode;
+	'palette-muted-color-80': Hexcode;
+	'palette-muted-color-90': Hexcode;
+	'palette-muted-fg-base': Hexcode;
+	'palette-muted-fg-disabled': Hexcode;
+	'palette-muted-fg-focused': Hexcode;
+	'palette-muted-fg-hovered': Hexcode;
+	'palette-muted-fg-selected': Hexcode;
+	'palette-muted-text': Hexcode;
+	'palette-negative-bg-base': Hexcode;
+	'palette-negative-bg-disabled': Hexcode;
+	'palette-negative-bg-focused': Hexcode;
+	'palette-negative-bg-hovered': Hexcode;
+	'palette-negative-bg-selected': Hexcode;
+	'palette-negative-color-00': Hexcode;
+	'palette-negative-color-10': Hexcode;
+	'palette-negative-color-20': Hexcode;
+	'palette-negative-color-30': Hexcode;
+	'palette-negative-color-40': Hexcode;
+	'palette-negative-color-50': Hexcode;
+	'palette-negative-color-60': Hexcode;
+	'palette-negative-color-70': Hexcode;
+	'palette-negative-color-80': Hexcode;
+	'palette-negative-color-90': Hexcode;
+	'palette-negative-fg-base': Hexcode;
+	'palette-negative-fg-disabled': Hexcode;
+	'palette-negative-fg-focused': Hexcode;
+	'palette-negative-fg-hovered': Hexcode;
+	'palette-negative-fg-selected': Hexcode;
+	'palette-negative-text': Hexcode;
+	'palette-neutral-bg-base': Hexcode;
+	'palette-neutral-bg-disabled': Hexcode;
+	'palette-neutral-bg-focused': Hexcode;
+	'palette-neutral-bg-hovered': Hexcode;
+	'palette-neutral-bg-selected': Hexcode;
+	'palette-neutral-color-00': Hexcode;
+	'palette-neutral-color-10': Hexcode;
+	'palette-neutral-color-20': Hexcode;
+	'palette-neutral-color-30': Hexcode;
+	'palette-neutral-color-40': Hexcode;
+	'palette-neutral-color-50': Hexcode;
+	'palette-neutral-color-60': Hexcode;
+	'palette-neutral-color-70': Hexcode;
+	'palette-neutral-color-80': Hexcode;
+	'palette-neutral-color-90': Hexcode;
+	'palette-neutral-fg-base': Hexcode;
+	'palette-neutral-fg-disabled': Hexcode;
+	'palette-neutral-fg-focused': Hexcode;
+	'palette-neutral-fg-hovered': Hexcode;
+	'palette-neutral-fg-selected': Hexcode;
+	'palette-neutral-text': Hexcode;
+	'palette-positive-bg-base': Hexcode;
+	'palette-positive-bg-disabled': Hexcode;
+	'palette-positive-bg-focused': Hexcode;
+	'palette-positive-bg-hovered': Hexcode;
+	'palette-positive-bg-selected': Hexcode;
+	'palette-positive-color-00': Hexcode;
+	'palette-positive-color-10': Hexcode;
+	'palette-positive-color-20': Hexcode;
+	'palette-positive-color-30': Hexcode;
+	'palette-positive-color-40': Hexcode;
+	'palette-positive-color-50': Hexcode;
+	'palette-positive-color-60': Hexcode;
+	'palette-positive-color-70': Hexcode;
+	'palette-positive-color-80': Hexcode;
+	'palette-positive-color-90': Hexcode;
+	'palette-positive-fg-base': Hexcode;
+	'palette-positive-fg-disabled': Hexcode;
+	'palette-positive-fg-focused': Hexcode;
+	'palette-positive-fg-hovered': Hexcode;
+	'palette-positive-fg-selected': Hexcode;
+	'palette-positive-text': Hexcode;
+	'palette-primary-bg-base': Hexcode;
+	'palette-primary-bg-disabled': Hexcode;
+	'palette-primary-bg-focused': Hexcode;
+	'palette-primary-bg-hovered': Hexcode;
+	'palette-primary-bg-selected': Hexcode;
+	'palette-primary-color-00': Hexcode;
+	'palette-primary-color-10': Hexcode;
+	'palette-primary-color-20': Hexcode;
+	'palette-primary-color-30': Hexcode;
+	'palette-primary-color-40': Hexcode;
+	'palette-primary-color-50': Hexcode;
+	'palette-primary-color-60': Hexcode;
+	'palette-primary-color-70': Hexcode;
+	'palette-primary-color-80': Hexcode;
+	'palette-primary-color-90': Hexcode;
+	'palette-primary-fg-base': Hexcode;
+	'palette-primary-fg-disabled': Hexcode;
+	'palette-primary-fg-focused': Hexcode;
+	'palette-primary-fg-hovered': Hexcode;
+	'palette-primary-fg-selected': Hexcode;
+	'palette-primary-text': Hexcode;
+	'palette-secondary-bg-base': Hexcode;
+	'palette-secondary-bg-disabled': Hexcode;
+	'palette-secondary-bg-focused': Hexcode;
+	'palette-secondary-bg-hovered': Hexcode;
+	'palette-secondary-bg-selected': Hexcode;
+	'palette-secondary-color-00': Hexcode;
+	'palette-secondary-color-10': Hexcode;
+	'palette-secondary-color-20': Hexcode;
+	'palette-secondary-color-30': Hexcode;
+	'palette-secondary-color-40': Hexcode;
+	'palette-secondary-color-50': Hexcode;
+	'palette-secondary-color-60': Hexcode;
+	'palette-secondary-color-70': Hexcode;
+	'palette-secondary-color-80': Hexcode;
+	'palette-secondary-color-90': Hexcode;
+	'palette-secondary-fg-base': Hexcode;
+	'palette-secondary-fg-disabled': Hexcode;
+	'palette-secondary-fg-focused': Hexcode;
+	'palette-secondary-fg-hovered': Hexcode;
+	'palette-secondary-fg-selected': Hexcode;
+	'palette-secondary-text': Hexcode;
+	'palette-tertiary-bg-base': Hexcode;
+	'palette-tertiary-bg-disabled': Hexcode;
+	'palette-tertiary-bg-focused': Hexcode;
+	'palette-tertiary-bg-hovered': Hexcode;
+	'palette-tertiary-bg-selected': Hexcode;
+	'palette-tertiary-color-00': Hexcode;
+	'palette-tertiary-color-10': Hexcode;
+	'palette-tertiary-color-20': Hexcode;
+	'palette-tertiary-color-30': Hexcode;
+	'palette-tertiary-color-40': Hexcode;
+	'palette-tertiary-color-50': Hexcode;
+	'palette-tertiary-color-60': Hexcode;
+	'palette-tertiary-color-70': Hexcode;
+	'palette-tertiary-color-80': Hexcode;
+	'palette-tertiary-color-90': Hexcode;
+	'palette-tertiary-fg-base': Hexcode;
+	'palette-tertiary-fg-disabled': Hexcode;
+	'palette-tertiary-fg-focused': Hexcode;
+	'palette-tertiary-fg-hovered': Hexcode;
+	'palette-tertiary-fg-selected': Hexcode;
+	'palette-tertiary-text': Hexcode;
+	'palette-warning-bg-base': Hexcode;
+	'palette-warning-bg-disabled': Hexcode;
+	'palette-warning-bg-focused': Hexcode;
+	'palette-warning-bg-hovered': Hexcode;
+	'palette-warning-bg-selected': Hexcode;
+	'palette-warning-color-00': Hexcode;
+	'palette-warning-color-10': Hexcode;
+	'palette-warning-color-20': Hexcode;
+	'palette-warning-color-30': Hexcode;
+	'palette-warning-color-40': Hexcode;
+	'palette-warning-color-50': Hexcode;
+	'palette-warning-color-60': Hexcode;
+	'palette-warning-color-70': Hexcode;
+	'palette-warning-color-80': Hexcode;
+	'palette-warning-color-90': Hexcode;
+	'palette-warning-fg-base': Hexcode;
+	'palette-warning-fg-disabled': Hexcode;
+	'palette-warning-fg-focused': Hexcode;
+	'palette-warning-fg-hovered': Hexcode;
+	'palette-warning-fg-selected': Hexcode;
+	'palette-warning-text': Hexcode;
 }
@@ -473,15 +473,14 @@
 export type MixinType =
-  | 'hide-offscreen'
-  | 'hide-visually'
-  | 'reset-button'
-  | 'reset-input'
-  | 'reset-list'
-  | 'reset-media'
-  | 'reset-typography'
-  | 'root'
-  | 'text-break'
-  | 'text-truncate'
-  | 'text-wrap';
+	| 'hide-offscreen'
+	| 'hide-visually'
+	| 'reset-button'
+	| 'reset-input'
+	| 'reset-list'
+	| 'reset-media'
+	| 'reset-typography'
+	| 'root'
+	| 'text-break'
+	| 'text-truncate'
+	| 'text-wrap';
 
-// eslint-disable-next-line no-use-before-define
 export type MixinTemplate<T extends object> = (utils: Utilities<T>) => T;
@@ -494,21 +493,21 @@
 export interface Utilities<T extends object> {
-  contrast: ContrastLevel;
-  mixin: MixinUtil<T>;
-  scheme: ColorScheme;
-  tokens: Tokens;
-  unit: UnitUtil;
-  var: VarUtil;
+	contrast: ContrastLevel;
+	mixin: MixinUtil<T>;
+	scheme: ColorScheme;
+	tokens: Tokens;
+	unit: UnitUtil;
+	var: VarUtil;
 }
 
 export interface ThemeOptions {
-  contrast: ContrastLevel;
-  scheme: ColorScheme;
+	contrast: ContrastLevel;
+	scheme: ColorScheme;
 }
 
 export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends (infer U)[]
-    ? DeepPartial<U>[]
-    : T[P] extends readonly (infer U)[]
-    ? readonly DeepPartial<U>[]
-    : DeepPartial<T[P]>;
+	[P in keyof T]?: T[P] extends (infer U)[]
+		? DeepPartial<U>[]
+		: T[P] extends readonly (infer U)[]
+		? readonly DeepPartial<U>[]
+		: DeepPartial<T[P]>;
 };

test.js

@@ -1,1 +0,1 @@
-module.exports = require('./lib/test.js');
+export * from './esm/test';

No alert changes

Improved metrics

Number of low supply chain risk alerts

5

decreased by-50%

Is type module

Yes

Worsened metrics

Total package byte prevSize

121714

decreased by-33.59%

Number of package files

27

decreased by-18.18%

Lines of code

3219

decreased by-28.56%

Dependency changes

• + Added@aesthetic/types@0.6.7(transitive)

• + Added@aesthetic/utils@0.8.4(transitive)

• - Removed@aesthetic/types@0.5.1(transitive)

• - Removed@aesthetic/utils@0.7.0(transitive)

• Updated@aesthetic/types@^0.6.0

• Updated@aesthetic/utils@^0.8.0