musae 0.3.11 → 0.3.13

package/dist/components/avatar/avatar.cjs

@@ -3,10 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var theme = require('../theme/theme.cjs');
@@ -157,10 +156,10 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   var styled = {
     avatar: stylex.default.props(theme.typography.label[size], styles.avatar({
-      backgroundColor: theme$1.colors[colors.ColorToken.PrimaryContainer],
-      color: theme$1.colors[colors.ColorToken.Primary]
+      backgroundColor: theme$1.colors["primary-container"],
+      color: theme$1.colors.primary
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme$1.colors[colors.ColorToken.OnPrimary]
+      outlineColor: theme$1.colors["on-primary"]
     })),
     loading: stylex.default.props(styles[shape], styles[size]),
     image: stylex.default.props(styles.image, styles[size])

package/dist/components/avatar/avatar.mjs

@@ -1,10 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { forwardRef, useContext } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { Context } from './context.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { AvatarClassToken } from '../../utils/class-name.mjs';
 import { typography } from '../theme/theme.mjs';
@@ -155,10 +154,10 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   var styled = {
     avatar: _stylex.props(typography.label[size], styles.avatar({
-      backgroundColor: theme.colors[ColorToken.PrimaryContainer],
-      color: theme.colors[ColorToken.Primary]
+      backgroundColor: theme.colors["primary-container"],
+      color: theme.colors.primary
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
-      outlineColor: theme.colors[ColorToken.OnPrimary]
+      outlineColor: theme.colors["on-primary"]
     })),
     loading: _stylex.props(styles[shape], styles[size]),
     image: _stylex.props(styles.image, styles[size])

package/dist/components/badge/badge.cjs

@@ -4,11 +4,10 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var relax = require('@aiszlab/relax');
 var componentToken = require('../../utils/component-token.cjs');
 
@@ -104,8 +103,8 @@ var Badge = function Badge(_ref) {
   var styled = {
     badge: stylex.default.props(styles.badge["default"]),
     tail: stylex.default.props(styles.tail["default"]({
-      backgroundColor: theme$1.colors[colors.ColorToken.Primary],
-      color: theme$1.colors[colors.ColorToken.OnPrimary]
+      backgroundColor: theme$1.colors.primary,
+      color: theme$1.colors["on-primary"]
     }), isDot && styles.tail.dot, theme.typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {

package/dist/components/badge/badge.mjs

@@ -2,11 +2,10 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BadgeClassToken } from '../../utils/class-name.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { sizes } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { isVoid, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
@@ -102,8 +101,8 @@ var Badge = function Badge(_ref) {
   var styled = {
     badge: _stylex.props(styles.badge["default"]),
     tail: _stylex.props(styles.tail["default"]({
-      backgroundColor: theme.colors[ColorToken.Primary],
-      color: theme.colors[ColorToken.OnPrimary]
+      backgroundColor: theme.colors.primary,
+      color: theme.colors["on-primary"]
     }), isDot && styles.tail.dot, typography.label.small, invisible && styles.tail.invisible, styles.tail[placement])
   };
   return /*#__PURE__*/React.createElement("span", {

package/dist/components/bench/bench.cjs

@@ -3,13 +3,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
 var index = require('../layout/index.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var divider = require('../divider/divider.cjs');
 var hooks$1 = require('./hooks.cjs');
 var menu = require('../menu/menu.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 
@@ -115,7 +114,7 @@ var Bench = function Bench(_ref) {
     })),
     main: stylex.default.props(styles.bench.main),
     sider: stylex.default.props(styles.bench.sider({
-      outlineColor: theme$1.colors[colors.ColorToken.OutlineVariant]
+      outlineColor: theme$1.colors["outline-variant"]
     })),
     title: stylex.default.props(theme.typography.title.large),
     divider: stylex.default.props(styles.header.divider),

package/dist/components/bench/bench.mjs

@@ -1,13 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
 import { Layout } from '../layout/index.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { elevations } from '../theme/tokens.stylex.mjs';
 import Divider from '../divider/divider.mjs';
 import { useLogo, useNavigations } from './hooks.mjs';
 import Menu from '../menu/menu.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { typography } from '../theme/theme.mjs';
 import { clsx } from '@aiszlab/relax';
 
@@ -113,7 +112,7 @@ var Bench = function Bench(_ref) {
     })),
     main: _stylex.props(styles.bench.main),
     sider: _stylex.props(styles.bench.sider({
-      outlineColor: theme.colors[ColorToken.OutlineVariant]
+      outlineColor: theme.colors["outline-variant"]
     })),
     title: _stylex.props(typography.title.large),
     divider: _stylex.props(styles.header.divider),

package/dist/components/breadcrumb/breadcrumb.cjs

@@ -2,10 +2,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
@@ -37,7 +36,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }
   var styled = {
     breadcrumb: stylex.default.props(theme.typography.label.large, styles.breadcrumb({
-      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+      color: theme$1.colors["on-surface-variant"]
     })),
     navigations: {
       className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -1,9 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
@@ -35,7 +34,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }
   var styled = {
     breadcrumb: _stylex.props(typography.label.large, styles.breadcrumb({
-      color: theme.colors[ColorToken.OnSurfaceVariant]
+      color: theme.colors["on-surface-variant"]
     })),
     navigations: {
       className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"

package/dist/components/breadcrumb/item.cjs

@@ -1,9 +1,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
@@ -67,10 +66,10 @@ var Item = function Item(_ref) {
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Breadcrumb);
   var styled = {
     navigation: stylex.default.props(styles.navigation["default"]({
-      color: theme.colors[colors.ColorToken.OnSurface]
+      color: theme.colors["on-surface"]
     }), isLink && styles.navigation.link({
-      hoveredBackgroundColor: theme.colors[colors.ColorToken.Surface],
-      hoveredColor: theme.colors[colors.ColorToken.OnSurface]
+      hoveredBackgroundColor: theme.colors.surface,
+      hoveredColor: theme.colors["on-surface"]
     })),
     separator: stylex.default.props(styles.separator["default"])
   };

package/dist/components/breadcrumb/item.mjs

@@ -1,7 +1,6 @@
 import React from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { BreadcrumbClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
@@ -65,10 +64,10 @@ var Item = function Item(_ref) {
   var classNames = useClassNames(ComponentToken.Breadcrumb);
   var styled = {
     navigation: _stylex.props(styles.navigation["default"]({
-      color: theme.colors[ColorToken.OnSurface]
+      color: theme.colors["on-surface"]
     }), isLink && styles.navigation.link({
-      hoveredBackgroundColor: theme.colors[ColorToken.Surface],
-      hoveredColor: theme.colors[ColorToken.OnSurface]
+      hoveredBackgroundColor: theme.colors.surface,
+      hoveredColor: theme.colors["on-surface"]
     })),
     separator: _stylex.props(styles.separator["default"])
   };

package/dist/components/button/button.cjs

@@ -5,13 +5,12 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var React = require('react');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
 var hooks$1 = require('./hooks.cjs');
 var ripple = require('../ripple/ripple.cjs');
 var theme = require('../theme/theme.cjs');
-var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var color = require('@aiszlab/fuzzy/color');
@@ -268,18 +267,18 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       color: theme$1.colors["on-".concat(color$1)]
     }), variant === "outlined" && styles.outlined({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin)
     }), variant === "text" && styles.text({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium) : "transparent",
-      color: color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
-      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium) : "transparent",
+      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker),
+      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/button/button.mjs

@@ -3,13 +3,12 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React, { forwardRef } from 'react';
 import { ButtonClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useButton } from './hooks.mjs';
 import Ripple from '../ripple/ripple.mjs';
 import { typography } from '../theme/theme.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import { hexToRgba } from '@aiszlab/fuzzy/color';
@@ -266,18 +265,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: theme.colors["on-".concat(color)]
     }), variant === "outlined" && styles.outlined({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin)
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium) : "transparent",
-      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
-      outlineColor: variant === "outlined" ? hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium) : "transparent",
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker),
+      outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/calendar/calendar.cjs

@@ -5,12 +5,11 @@ var React = require('react');
 var hooks = require('./hooks.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 var button = require('../button/button.cjs');
 var hooks$1 = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var keyboardDoubleArrowLeft = require('../icon/icons/hardware/keyboard-double-arrow-left.cjs');
 var keyboardDoubleArrowRight = require('../icon/icons/hardware/keyboard-double-arrow-right.cjs');
@@ -68,7 +67,7 @@ var Calendar = function Calendar(_ref) {
       className: "musaex-eq5yr9"
     },
     header: stylex.default.props(theme.typography.label.large, styles.header({
-      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+      color: theme$1.colors["on-surface-variant"]
     })),
     heading: {
       className: "musaex-98rzlu musaex-78zum5 musaex-l56j7k"

package/dist/components/calendar/calendar.mjs

@@ -3,12 +3,11 @@ import React from 'react';
 import { useValue, useFocusedAt, useDateCells, useHeadCells } from './hooks.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CalendarClassToken } from '../../utils/class-name.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { clsx } from '@aiszlab/relax';
 import { Button } from '../button/button.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import KeyboardDoubleArrowLeft from '../icon/icons/hardware/keyboard-double-arrow-left.mjs';
 import KeyboardDoubleArrowRight from '../icon/icons/hardware/keyboard-double-arrow-right.mjs';
@@ -66,7 +65,7 @@ var Calendar = function Calendar(_ref) {
       className: "musaex-eq5yr9"
     },
     header: _stylex.props(typography.label.large, styles.header({
-      color: theme.colors[ColorToken.OnSurfaceVariant]
+      color: theme.colors["on-surface-variant"]
     })),
     heading: {
       className: "musaex-98rzlu musaex-78zum5 musaex-l56j7k"

package/dist/components/calendar/contribution.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var dayjs = require('dayjs');
 var React = require('react');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
 var theme = require('../theme/theme.cjs');
 var tooltip = require('../tooltip/tooltip.cjs');

package/dist/components/calendar/contribution.mjs

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import dayjs from 'dayjs';
 import React, { useMemo } from 'react';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { typography } from '../theme/theme.mjs';
 import Tooltip from '../tooltip/tooltip.mjs';

package/dist/components/calendar/hooks.cjs

@@ -7,10 +7,9 @@ var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
 var timespan = require('../../utils/timespan.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var theme = require('../theme/theme.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var button = require('../button/button.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 
@@ -87,7 +86,7 @@ var useHeadCells = function useHeadCells() {
   return React.useMemo(function () {
     var _dayjs$Ls$dayjs$local;
     var styled = stylex.default.props(styles.cell, styles.header({
-      color: theme$1.colors[colors.ColorToken.OnSurfaceVariant]
+      color: theme$1.colors["on-surface-variant"]
     }), theme.typography.body.large);
     return (_dayjs$Ls$dayjs$local = dayjs.Ls[dayjs.locale()].weekdays) === null || _dayjs$Ls$dayjs$local === void 0 ? void 0 : _dayjs$Ls$dayjs$local.map(function (weekday, index) {
       return /*#__PURE__*/React.createElement("th", {
@@ -125,7 +124,7 @@ var useDateCells = function useDateCells(_ref) {
       var isSelected = isFrom || isTo;
       var styled = {
         cell: stylex.default.props(styles.cell, styles.date({
-          backgroundColor: theme$1.colors[colors.ColorToken.SecondaryContainer]
+          backgroundColor: theme$1.colors["secondary-container"]
         }), isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, theme.typography.body.large),
         trigger: {
           className: "musaex-gnae0u musaex-ksl8fa"

package/dist/components/calendar/hooks.mjs

@@ -7,10 +7,9 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CalendarClassToken } from '../../utils/class-name.mjs';
 import { clsx, toArray, useControlledState } from '@aiszlab/relax';
 import { Timespan } from '../../utils/timespan.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { Button } from '../button/button.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
@@ -87,7 +86,7 @@ var useHeadCells = function useHeadCells() {
   return useMemo(function () {
     var _dayjs$Ls$dayjs$local;
     var styled = _stylex.props(styles.cell, styles.header({
-      color: theme.colors[ColorToken.OnSurfaceVariant]
+      color: theme.colors["on-surface-variant"]
     }), typography.body.large);
     return (_dayjs$Ls$dayjs$local = dayjs.Ls[dayjs.locale()].weekdays) === null || _dayjs$Ls$dayjs$local === void 0 ? void 0 : _dayjs$Ls$dayjs$local.map(function (weekday, index) {
       return /*#__PURE__*/React.createElement("th", {
@@ -125,7 +124,7 @@ var useDateCells = function useDateCells(_ref) {
       var isSelected = isFrom || isTo;
       var styled = {
         cell: _stylex.props(styles.cell, styles.date({
-          backgroundColor: theme.colors[ColorToken.SecondaryContainer]
+          backgroundColor: theme.colors["secondary-container"]
         }), isDisabled && styles.hidden, isBetween && styles.range, isFrom && timespan.isRange && styles.from, isTo && timespan.isRange && styles.to, typography.body.large),
         trigger: {
           className: "musaex-gnae0u musaex-ksl8fa"

package/dist/components/checkbox/checkbox.cjs

@@ -7,9 +7,8 @@ var relax = require('@aiszlab/relax');
 var context = require('./context.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var theme = require('../theme/theme.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 var styles = require('./styles.cjs');
@@ -57,13 +56,13 @@ var Checkbox = function Checkbox(_ref) {
   });
   var styled = {
     checkbox: stylex.default.props(styles.default.checkbox["default"], isDisabled && styles.default.checkbox.disabled, styles.default.checkbox.variables({
-      primaryColor: theme$1.colors[colors.ColorToken.Primary],
-      onPrimaryColor: theme$1.colors[colors.ColorToken.OnPrimary],
-      outlineColor: theme$1.colors[colors.ColorToken.Outline]
+      primaryColor: theme$1.colors.primary,
+      onPrimaryColor: theme$1.colors["on-primary"],
+      outlineColor: theme$1.colors.outline
     })),
     trigger: stylex.default.props(styles.default.trigger["default"], isChecked && styles.default.trigger.checked, isDisabled && styles.default.trigger.disabled({
-      backgroundColor: theme$1.colors[colors.ColorToken.OnSurface],
-      color: theme$1.colors[colors.ColorToken.OnPrimary]
+      backgroundColor: theme$1.colors["on-surface"],
+      color: theme$1.colors["on-primary"]
     }), !isChecked && styles.default.trigger.unchecked),
     label: stylex.default.props(styles.default.label["default"], theme.typography.label.small)
   };

package/dist/components/checkbox/checkbox.mjs

@@ -5,9 +5,8 @@ import { useControlledState, useEvent, clsx } from '@aiszlab/relax';
 import Context from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CheckboxClassToken } from '../../utils/class-name.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { typography } from '../theme/theme.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 import styles from './styles.mjs';
@@ -55,13 +54,13 @@ var Checkbox = function Checkbox(_ref) {
   });
   var styled = {
     checkbox: _stylex.props(styles.checkbox["default"], isDisabled && styles.checkbox.disabled, styles.checkbox.variables({
-      primaryColor: theme.colors[ColorToken.Primary],
-      onPrimaryColor: theme.colors[ColorToken.OnPrimary],
-      outlineColor: theme.colors[ColorToken.Outline]
+      primaryColor: theme.colors.primary,
+      onPrimaryColor: theme.colors["on-primary"],
+      outlineColor: theme.colors.outline
     })),
     trigger: _stylex.props(styles.trigger["default"], isChecked && styles.trigger.checked, isDisabled && styles.trigger.disabled({
-      backgroundColor: theme.colors[ColorToken.OnSurface],
-      color: theme.colors[ColorToken.OnPrimary]
+      backgroundColor: theme.colors["on-surface"],
+      color: theme.colors["on-primary"]
     }), !isChecked && styles.trigger.unchecked),
     label: _stylex.props(styles.label["default"], typography.label.small)
   };

package/dist/components/clock/column.cjs

@@ -5,9 +5,8 @@ var menu = require('../menu/menu.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 
 var UNITS = {
@@ -65,8 +64,8 @@ var Column = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [value]);
   var styled = {
     menu: stylex.default.props(styles.menu({
-      scrollbarThumbColor: theme.colors[colors.ColorToken.Secondary],
-      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+      scrollbarThumbColor: theme.colors.secondary,
+      outlineColor: theme.colors["outline-variant"]
     })),
     item: {
       className: "musaex-yueg9c musaex-78zum5 musaex-l56j7k"

package/dist/components/clock/column.mjs

@@ -3,9 +3,8 @@ import Menu from '../menu/menu.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { ClockClassToken } from '../../utils/class-name.mjs';
 import { isVoid, clsx } from '@aiszlab/relax';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
 var UNITS = {
@@ -63,8 +62,8 @@ var Column = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [value]);
   var styled = {
     menu: _stylex.props(styles.menu({
-      scrollbarThumbColor: theme.colors[ColorToken.Secondary],
-      outlineColor: theme.colors[ColorToken.OutlineVariant]
+      scrollbarThumbColor: theme.colors.secondary,
+      outlineColor: theme.colors["outline-variant"]
     })),
     item: {
       className: "musaex-yueg9c musaex-78zum5 musaex-l56j7k"

package/dist/components/collapse/collapse.cjs

@@ -6,12 +6,11 @@ var React = require('react');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('../../utils/class-name.cjs');
 var item = require('./item.cjs');
-var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
 var hooks = require('./hooks.cjs');
 var context = require('./context.cjs');
 var hooks$1 = require('../theme/hooks.cjs');
-var colors = require('../../utils/colors.cjs');
 var componentToken = require('../../utils/component-token.cjs');
 
 var styles = {
@@ -82,7 +81,7 @@ var Collapse = function Collapse(_ref) {
   // no need to render when items is empty
   if (items.length === 0) return null;
   var styled = stylex.default.props(styles.collapse({
-    outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+    outlineColor: theme.colors["outline-variant"]
   }));
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {

package/dist/components/collapse/collapse.mjs

@@ -4,12 +4,11 @@ import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { CollapseClassToken } from '../../utils/class-name.mjs';
 import CollapseItem from './item.mjs';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.8.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { clsx } from '@aiszlab/relax';
 import { useActiveKeys } from './hooks.mjs';
 import { Context } from './context.mjs';
 import { useTheme } from '../theme/hooks.mjs';
-import { ColorToken } from '../../utils/colors.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
@@ -80,7 +79,7 @@ var Collapse = function Collapse(_ref) {
   // no need to render when items is empty
   if (items.length === 0) return null;
   var styled = _stylex.props(styles.collapse({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
+    outlineColor: theme.colors["outline-variant"]
   }));
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {