@ttoss/theme 1.8.6 → 2.0.1

package/dist/esm/themes/Bruttal/Bruttal.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __commonJS, __toESM } from "../../chunk-ICKGF6JN.js";
+import { __commonJS, __toESM, defaultTheme } from "../../chunk-ZYSSWTLH.js";
 
 // ../../node_modules/.pnpm/@iconify+icons-carbon@1.2.20/node_modules/@iconify/icons-carbon/add-filled.js
 var require_add_filled = __commonJS({
@@ -765,190 +765,11 @@ Object.entries(BrutalIcons).forEach(([key, icon]) => {
 // src/themes/Bruttal/BruttalFonts.ts
 var BruttalFonts = ["https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css?family=Work+Sans:wght@0,400;0,700;1,400;1,700&display=swap", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
 
-// src/themes/Bruttal/helpers/geometricCalc.ts
-var SIZE_TYPE = "rem";
-var calcMultiplyingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
-  const result = initialValue * Math.pow(base, ratio);
-  return `${result.toFixed(2)}${sizeType}`;
-};
-var calcDividingValues = (initialValue, base, ratio, sizeType = SIZE_TYPE) => {
-  const result = initialValue / Math.pow(base, ratio);
-  return `${result.toFixed(2)}${sizeType}`;
-};
-
-// src/themes/Bruttal/tokens/fontSizes.ts
-var SIZE_TYPE2 = "rem";
-var BASE = 1;
-var MULTIPLIER_FACTOR = 1.333;
-var fontSizes = {
-  "2xs": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -3),
-  xs: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -2),
-  sm: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, -1),
-  base: `${BASE}${SIZE_TYPE2}`,
-  lg: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 1),
-  xl: calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 2),
-  "2xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 3),
-  "3xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 4),
-  "4xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 5),
-  "5xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 6),
-  "6xl": calcMultiplyingValues(BASE, MULTIPLIER_FACTOR, 7)
-};
-
-// src/themes/Bruttal/tokens/fontWeights.ts
-var fontWeights = {
-  thin: 100,
-  extralight: 200,
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800
-};
-
-// src/themes/Bruttal/tokens/letterSpacings.ts
-var letterSpacings = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  regular: "0em",
-  wide: "0.05em",
-  wider: "0.1em",
-  widest: "0.5em"
-};
-
-// src/themes/Bruttal/tokens/lineHeights.ts
-var BASE2 = 100;
-var MULTIPLIER_FACTOR2 = 1.333;
-var SIZE_TYPE3 = "%";
-var lineHeights = {
-  "2xs": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -3, SIZE_TYPE3),
-  xs: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, -2, SIZE_TYPE3),
-  sm: calcDividingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
-  base: "normal",
-  lg: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 1, SIZE_TYPE3),
-  xl: calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 2, SIZE_TYPE3),
-  "2xl": calcMultiplyingValues(BASE2, MULTIPLIER_FACTOR2, 3, SIZE_TYPE3),
-  flat: "100%"
-};
-
-// src/themes/Bruttal/tokens/space.ts
-var SIZE_TYPE4 = "rem";
-var MD = 0.5;
-var MULTIPLIER_FACTOR3 = 1.618;
-var space = {
-  none: 0,
-  "2xs": calcDividingValues(MD, MULTIPLIER_FACTOR3, 3),
-  xs: calcDividingValues(MD, MULTIPLIER_FACTOR3, 2),
-  sm: calcDividingValues(MD, MULTIPLIER_FACTOR3, 1),
-  md: `${MD}${SIZE_TYPE4}`,
-  lg: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 1),
-  xl: calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 2),
-  "2xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 3),
-  "3xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 4),
-  "4xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 5),
-  "5xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 6),
-  "6xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 7),
-  "7xl": calcMultiplyingValues(MD, MULTIPLIER_FACTOR3, 8)
-};
-
-// src/themes/Bruttal/tokens/zIndices.ts
-var zIndices = {
-  deep: -9999,
-  behind: -1,
-  auto: "auto",
-  base: 0,
-  docked: 10,
-  /**
-   * Sticky is a CSS property that can be applied to an element to make it
-   * "stick" or remain fixed in a specific position relative to the viewport
-   * as the user scrolls the page. When an element is set as sticky, it will
-   * initially behave like a normal element but once the user scrolls past a
-   * certain threshold, it will stick to the designated position.
-   */
-  sticky: 100,
-  /**
-   * An overlay is a graphical element used in user interfaces to cover or
-   * partially obscure the underlying content. It is typically a
-   * semi-transparent or opaque layer that is positioned above other elements
-   * on the screen. Overlays are commonly employed to provide visual effects,
-   * create modal or pop-up dialogs, highlight or focus user attention, or
-   * serve as a background for elements such as tooltips, modals, or dropdown
-   * menus. They are often used to add depth, dimension, and visual hierarchy
-   * to the interface by visually separating or layering content.
-   */
-  overlay: 1e3,
-  /**
-   * A modal is a user interface component that appears as a dialog or window
-   * overlay on top of the main content, temporarily interrupting the user's
-   * interaction flow. It is commonly used to display additional information,
-   * request user input, or confirm an action. Modals typically have a higher
-   * z-index value than other elements on the page to ensure they are visually
-   * prominent and receive the user's full attention. They often feature a
-   * close button or an overlay click outside the modal to dismiss them and
-   * return to the underlying content. Modals help to focus user attention and
-   * provide a context-specific interaction within a larger interface.
-   */
-  modal: 2e3,
-  /**
-   * A dropdown is a user interface component that presents a list of
-   * selectable options when triggered by a user action, such as clicking on a
-   * dropdown button or input field. When activated, a dropdown expands
-   * vertically to reveal a list of choices, allowing the user to select a
-   * single option. The selected option is then displayed in the closed state
-   * of the dropdown. Dropdowns are commonly used to conserve space on a page
-   * or provide a convenient way to choose from a predefined set of options.
-   * They can be found in various contexts, such as navigation menus, form
-   * inputs, or filter controls. Dropdowns enhance user interaction by
-   * providing a compact and organized selection mechanism within the interface.
-   */
-  dropdown: 3e3,
-  /**
-   * A popover is a user interface component that provides contextual
-   * information or options when triggered by a user action, such as hovering
-   * over an element or clicking a button. It typically appears as a small
-   * overlay near the triggering element, offering additional details, actions,
-   * or related content. Popovers are designed to be non-intrusive and provide
-   * concise information or quick actions without requiring the user to
-   * navigate to a different page or screen. They are often used to enhance the
-   * user's understanding or provide supplementary functionality within a
-   * specific context. Popovers are commonly positioned above other elements in
-   * the interface to ensure visibility and accessibility.
-   */
-  popover: 4e3,
-  /**
-   * A tooltip is a small, informative message or hint that appears when a user
-   * hovers over or interacts with an element, such as a button, link, or icon.
-   * It is typically displayed as a brief, contextual text or label that
-   * provides additional information or clarifies the purpose of the element.
-   * Tooltips are used to improve the user's understanding of interface
-   * elements and enhance usability. They are generally positioned near the
-   * associated element, often appearing as a small box or bubble that pops up
-   * temporarily and disappears when the user moves the cursor away from the
-   * element. Tooltips are designed to be unobtrusive and provide helpful
-   * guidance or supplementary details without requiring the user to take any
-   * additional actions.
-   */
-  tooltip: 5e3,
-  /**
-   * A toast is a brief, temporary notification or message that appears on the
-   *  screen to provide important information or alerts to the user. It
-   * typically appears as a small box or banner positioned in a non-intrusive
-   * area of the interface, such as the top or bottom of the screen. Toasts are
-   * used to communicate updates, notifications, or status messages that may
-   * require the user's attention but do not require immediate action. They are
-   *  designed to be unobtrusive and automatically disappear after a short
-   * period, often with a fade-out animation. Toasts are commonly used in web
-   * and mobile applications to provide timely feedback or inform the user
-   * about completed actions, errors, or system updates.
-   */
-  toast: 6e3
-};
-
 // src/themes/Bruttal/BruttalTheme.ts
 var coreFonts = {
-  main: '"Atkinson Hyperlegible", sans-serif',
-  contrast: '"Work Sans", sans-serif',
-  monospace: '"Inconsolata", sans-serif'
+  body: '"Atkinson Hyperlegible", sans-serif',
+  heading: '"Work Sans", sans-serif',
+  mono: '"Inconsolata", sans-serif'
 };
 var brandColors = {
   complimentary: "#f4f3f3",
@@ -980,81 +801,212 @@ var coreColors = {
   amber600: "#d97706",
   teal600: "#0d9488"
 };
-var coreBorders = {
-  none: "0px solid",
-  thin: "1px solid",
-  medium: "2px solid",
-  thick: "4px solid"
-};
-var coreRadii = {
-  sharp: "0px",
-  xs: "2px",
-  sm: "4px",
-  md: "6px",
-  lg: "8px",
-  xl: "12px",
-  "2xl": "16px",
-  "3xl": "24px",
-  circle: "9999px"
-};
 var BruttalTheme = {
   /**
    * Tokens
    */
-  fontSizes,
-  fontWeights,
-  letterSpacings,
-  space,
-  lineHeights,
-  zIndices,
+  borders: defaultTheme.borders,
+  fontSizes: defaultTheme.fontSizes,
+  fontWeights: defaultTheme.fontWeights,
+  letterSpacings: defaultTheme.letterSpacings,
+  space: defaultTheme.space,
+  lineHeights: defaultTheme.lineHeights,
+  zIndices: defaultTheme.zIndices,
   colors: {
-    background: coreColors.complimentary,
-    text: coreColors.black,
-    muted: coreColors.gray200,
-    onMuted: coreColors.gray600,
-    mutedOutline: coreColors.gray300,
-    danger: coreColors.red700,
-    onDanger: coreColors.white,
-    notice: coreColors.amber600,
-    onNotice: coreColors.white,
-    positive: coreColors.teal600,
-    onPositive: coreColors.white,
-    surface: coreColors.white,
-    contentHeader: coreColors.gray200,
-    onContentHeader: coreColors.black,
-    outline: coreColors.gray500,
-    primary: coreColors.main,
-    onPrimary: coreColors.white,
-    secondary: coreColors.gray100,
-    onSecondary: coreColors.black,
-    highlight: coreColors.darkNeutral,
-    onHighlight: coreColors.complimentary,
-    accent: coreColors.accent,
-    onAccent: coreColors.white,
-    neutral: coreColors.darkNeutral,
-    onNeutral: coreColors.lightNeutral,
-    underemphasize: coreColors.gray300
-  },
-  fonts: {
-    main: coreColors.main,
-    contrast: coreFonts.contrast,
-    body: coreFonts.main,
-    highlight: coreFonts.main,
-    caption: coreFonts.main
-  },
-  borders: {
-    default: coreBorders.thin,
-    secondary: coreBorders.medium,
-    muted: coreBorders.thin,
-    interaction: coreBorders.medium,
-    danger: coreBorders.medium,
-    highlight: coreBorders.medium
-  },
-  radii: {
-    informative: coreRadii.xs,
-    default: coreRadii.sm,
-    action: coreRadii.sm
+    navigation: {
+      backgound: {
+        primary: {
+          default: coreColors.complimentary
+        }
+      },
+      text: {
+        primary: {
+          default: coreColors.black
+        },
+        accent: {
+          default: coreColors.darkNeutral
+        },
+        muted: {
+          default: coreColors.gray600
+        },
+        negative: {
+          default: coreColors.red700
+        }
+      }
+    },
+    action: {
+      text: {
+        primary: {
+          default: coreColors.black
+        },
+        secondary: {
+          default: coreColors.white,
+          active: coreColors.complimentary
+        },
+        accent: {
+          default: coreColors.white
+        },
+        negative: {
+          default: coreColors.white
+        },
+        caution: {
+          default: coreColors.white
+        },
+        muted: {
+          default: coreColors.gray600
+        }
+      },
+      background: {
+        primary: {
+          default: coreColors.main,
+          active: coreColors.complimentary
+        },
+        secondary: {
+          default: coreColors.gray100,
+          active: coreColors.darkNeutral
+        },
+        negative: {
+          default: coreColors.red700
+        },
+        accent: {
+          default: coreColors.accent,
+          active: coreColors.teal600
+        },
+        caution: {
+          default: coreColors.amber600
+        },
+        muted: {
+          default: coreColors.gray200
+        }
+      },
+      border: {
+        primary: {
+          default: coreColors.black
+        },
+        secondary: {
+          default: coreColors.gray500,
+          active: coreColors.darkNeutral
+        },
+        muted: {
+          default: coreColors.gray600
+        },
+        accent: {
+          default: coreColors.accent
+        }
+      }
+    },
+    input: {
+      text: {
+        primary: {
+          default: coreColors.white
+        },
+        secondary: {
+          default: coreColors.black
+        },
+        muted: {
+          default: coreColors.gray200,
+          active: coreColors.gray600
+        },
+        accent: {
+          default: coreColors.accent
+        },
+        negative: {
+          default: coreColors.red700
+        }
+      },
+      background: {
+        primary: {
+          default: coreColors.main,
+          active: coreColors.complimentary
+        },
+        secondary: {
+          default: coreColors.gray200,
+          active: coreColors.white
+        },
+        muted: {
+          default: coreColors.gray600,
+          active: coreColors.gray200,
+          disabled: coreColors.gray200
+        },
+        accent: {
+          default: coreColors.accent
+        },
+        negative: {
+          default: coreColors.red700
+        }
+      },
+      border: {
+        primary: {
+          default: coreColors.main
+        },
+        secondary: {
+          default: coreColors.black,
+          active: coreColors.darkNeutral
+        },
+        muted: {
+          default: coreColors.gray600
+        },
+        accent: {
+          default: coreColors.accent
+        },
+        caution: {
+          default: coreColors.gray500
+        },
+        negative: {
+          default: coreColors.red700
+        }
+      }
+    },
+    display: {
+      background: {
+        primary: {
+          default: coreColors.main
+        },
+        secondary: {
+          default: coreColors.white
+        },
+        muted: {
+          default: coreColors.gray200
+        }
+      },
+      text: {
+        primary: {
+          default: coreColors.black
+        },
+        secondary: {
+          default: coreColors.darkNeutral
+        },
+        muted: {
+          default: coreColors.gray600,
+          active: coreColors.gray200
+        },
+        accent: coreColors.accent,
+        negative: {
+          default: coreColors.red700
+        }
+      },
+      border: {
+        primary: {
+          default: coreColors.main
+        },
+        secondary: {
+          default: coreColors.black
+        },
+        muted: {
+          default: coreColors.gray600,
+          active: coreColors.darkNeutral
+        },
+        accent: {
+          default: coreColors.accent
+        },
+        negative: {
+          default: coreColors.red700
+        }
+      }
+    }
   },
+  fonts: coreFonts,
+  radii: defaultTheme.radii,
   /**
    * Global styles
    */
@@ -1062,11 +1014,15 @@ var BruttalTheme = {
     root: {
       fontFamily: "body",
       fontWeight: "normal",
-      fontSize: "base",
+      fontSize: "md",
       zIndex: "base",
       margin: 0,
       padding: 0,
-      backgroundColor: "background",
+      backgroundColor: "navigation.background.primary.default",
+      ".react-select__control": {
+        border: "md",
+        borderRadius: "sm"
+      },
       /**
        * HTML elements
        */
@@ -1074,27 +1030,27 @@ var BruttalTheme = {
         borderCollapse: "collapse"
       },
       th: {
-        paddingX: "md",
-        paddingY: "md"
+        paddingX: "4",
+        paddingY: "4"
       },
       tr: {
         borderBottom: "default"
       },
       td: {
-        paddingX: "xl",
-        paddingY: "md"
+        paddingX: "6",
+        paddingY: "4"
       }
     },
     a: {
-      color: "text",
+      color: "navigation.text.primary.default",
       fontFamily: "body",
       textDecorationLine: "underline",
-      lineHeight: "base",
+      lineHeight: "normal",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
       ":visited": {
-        color: "highlight"
+        color: "navigation.text.accent.default"
       }
     }
   },
@@ -1103,133 +1059,130 @@ var BruttalTheme = {
    */
   badges: {
     positive: {
-      color: "onPositive",
-      bg: "positive"
+      color: "action.text.accent.default",
+      bg: "action.background.accent.active"
     },
     negative: {
-      color: "onDanger",
-      bg: "danger"
+      color: "action.text.negative.default",
+      bg: "action.background.negative.default"
     },
     neutral: {
-      color: "onSecondary",
-      bg: "secondary",
-      border: "muted",
-      borderColor: "onMuted"
+      color: "action.text.primary.default",
+      bg: "action.background.secondary.default",
+      border: "sm",
+      borderColor: "action.border.muted.default"
     },
     informative: {
-      color: "onNotice",
-      bg: "notice"
+      color: "action.text.caution.default",
+      bg: "action.background.caution.default"
     },
     muted: {
-      color: "onMuted",
-      bg: "muted"
+      color: "action.text.muted.default",
+      bg: "action.background.muted.default"
     }
   },
   buttons: {
     accent: {
-      backgroundColor: "accent",
-      color: "onAccent",
-      borderRadius: "action",
-      borderColor: "accent",
+      backgroundColor: "action.background.accent.default",
+      color: "action.text.accent.default",
+      borderRadius: "sm",
       ":hover:not(:active,[disabled])": {
         filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default"
       }
     },
     primary: {
-      backgroundColor: "primary",
-      color: "onPrimary",
-      borderRadius: "action",
-      borderColor: "primary",
+      backgroundColor: "action.background.primary.default",
+      color: "action.text.secondary.default",
+      borderRadius: "sm",
       ":hover:not(:active,[disabled])": {
         filter: "brightness(90%)"
       },
       ":active": {
-        backgroundColor: "primary",
-        color: "onPrimary",
-        borderColor: "outline"
+        backgroundColor: "action.background.primary.default",
+        color: "action.text.secondary.default"
       },
       ":disabled": {
         cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default"
       }
     },
     secondary: {
-      backgroundColor: "secondary",
-      color: "onSecondary",
-      borderRadius: "action",
-      border: "secondary",
-      borderColor: "onSecondary",
+      backgroundColor: "action.background.secondary.default",
+      color: "action.text.primary.default",
+      borderRadius: "sm",
+      border: "md",
+      borderColor: "action.border.primary.default",
       ":hover:not(:active,[disabled])": {
         filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default"
       }
     },
     destructive: {
-      color: "onDanger",
-      backgroundColor: "danger",
+      color: "action.text.negative.default",
+      backgroundColor: "action.background.negative.default",
       ":hover:not(:active,[disabled])": {
         filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted",
-        color: "onMuted"
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default"
       }
     },
     closeButton: {
-      backgroundColor: "background",
-      color: "primary",
-      border: "default",
-      borderColor: "primary",
-      borderRadius: "action",
+      backgroundColor: "action.background.primary.active",
+      color: "action.text.primary.default",
+      border: "sm",
+      borderColor: "action.border.primary.default",
+      borderRadius: "sm",
       ":disabled": {
-        border: "muted",
-        borderColor: "onMuted",
-        backgroundColor: "muted",
-        color: "onMuted",
+        border: "sm",
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default",
         cursor: "not-allowed"
       },
       ":is(:focus-within, :hover):not(:disabled)": {
-        color: "onHighlight",
-        backgroundColor: "highlight",
-        borderColor: "highlight"
+        color: "action.text.secondary.active",
+        backgroundColor: "action.background.secondary.active",
+        borderColor: "action.border.secondary.active"
       }
     },
     actionButton: {
       default: {
-        backgroundColor: "secondary",
-        color: "onSecondary",
-        border: "default",
-        borderColor: "onSecondary",
+        backgroundColor: "action.background.secondary.default",
+        color: "action.text.primary.default",
+        border: "sm",
+        borderColor: "action.background.primary.default",
         transition: "all 0.2s",
         ":is(:focus-within, :hover)": {
-          backgroundColor: "highlight",
-          borderColor: "highlight",
-          color: "onHighlight"
+          backgroundColor: "action.background.secondary.active",
+          borderColor: "action.border.secondary.active",
+          color: "action.text.secondary.active"
         }
       },
       accent: {
-        backgroundColor: "accent",
-        color: "onAccent",
+        backgroundColor: "action.background.accent.default",
+        color: "action.text.accent.default",
         border: "none"
       },
       quiet: {
-        backgroundColor: "transparent",
-        color: "text",
+        backgroundColor: "action.background.muted.default",
+        color: "action.text.accent.default",
         border: "none",
         borderColor: "transparent"
       }
@@ -1237,8 +1190,8 @@ var BruttalTheme = {
   },
   cards: {
     primary: {
-      backgroundColor: "primary",
-      border: "1px solid black",
+      backgroundColor: "display.background.secondary.default",
+      border: "sm",
       padding: [4, 5],
       display: "flex",
       flexDirection: "column",
@@ -1248,47 +1201,50 @@ var BruttalTheme = {
   },
   forms: {
     label: {
-      color: "text",
+      color: "display.text.primary.default",
       '&:is([aria-disabled="true"])': {
-        color: "onMuted"
+        color: "display.text.muted.default"
       },
       '& > span[aria-label="tooltip"]': {
         fontSize: "sm",
-        marginLeft: "2xs"
+        marginLeft: "2"
       },
       '&:has(input[type="checkbox"])': {
-        fontSize: "base",
-        gap: "md"
+        fontSize: "md",
+        gap: "2"
       },
       '& > div:has(input[type="checkbox"]) > svg': {
         marginRight: 0
       },
       '&:has(input[type="checkbox"]:disabled)': {
-        color: "onMuted"
+        color: "display.text.muted.default"
       },
       '&:has(div > input[type="radio"])': {
         alignItems: "center"
       },
       '&:has(div > input[type="radio"]:disabled)': {
-        color: "muted"
+        color: "display.text.muted.active"
       }
     },
     radio: {
-      color: "text",
+      color: "input.text.secondary.default",
       fontFamily: "body",
       fontSize: "lg",
       "input:disabled ~ &": {
-        color: "muted"
+        color: "input.text.muted.default"
+      },
+      "input:checked ~ &": {
+        color: "input.text.accent.default"
       },
       'input[aria-invalid="true"] ~ &': {
-        color: "danger"
+        color: "input.text.negative.default"
       },
       "input:focus ~ &": {
         bg: "transparent"
       },
       "&:is(svg, svg + svg)": {
-        width: fontSizes.base,
-        height: fontSizes.base
+        width: "min",
+        height: "min"
       }
     },
     checkbox: {
@@ -1296,207 +1252,210 @@ var BruttalTheme = {
         bg: "transparent"
       },
       "input:not(:checked) ~ &": {
-        color: "primary"
+        color: "input.text.secondary.default"
+      },
+      "input:checked ~ &": {
+        color: "input.text.accent.default"
       },
       "input:disabled ~ &": {
-        color: "muted"
+        color: "input.text.muted.default"
       },
       "input:disabled ~ & path": {
-        backgroundColor: "onMuted"
+        backgroundColor: "input.background.muted.default"
       },
       'input[aria-invalid="true"] ~ &': {
-        color: "danger"
+        color: "display.text.negative.default"
       },
       "&:is(svg, svg + svg)": {
-        width: fontSizes.base,
-        height: fontSizes.base
+        width: "min",
+        height: "min"
       }
     },
     input: {
-      color: "text",
-      border: "interaction",
-      borderColor: "onMuted",
-      borderRadius: "action",
-      backgroundColor: "surface",
-      fontSize: "base",
-      lineHeight: "base",
+      color: "display.text.primary.default",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      borderRadius: "sm",
+      backgroundColor: "display.background.secondary.default",
+      fontSize: "md",
+      lineHeight: "normal",
       "::placeholder": {
-        color: "onMuted"
+        color: "display.text.muted.default"
       },
       ":focus-within": {
-        outlineColor: "neutral"
+        outlineColor: "display.border.muted.active"
       },
       ":disabled": {
-        backgroundColor: "muted",
-        color: "onMuted",
-        border: "muted",
-        borderColor: "onMuted"
+        backgroundColor: "display.background.muted.default",
+        color: "display.text.muted.default",
+        border: "sm",
+        borderColor: "display.border.muted.default"
       },
       '&[aria-invalid="true"]': {
-        borderColor: "danger"
+        borderColor: "display.border.negative.default"
       },
       '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
-        color: "danger"
+        color: "display.text.negative.default"
       }
     },
     inputNumber: {
-      color: "text",
-      border: "interaction",
-      borderColor: "onMuted",
-      borderRadius: "action",
+      color: "display.text.primary.default",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      borderRadius: "sm",
       ":disabled": {
-        border: "muted",
-        borderColor: "onMuted",
-        color: "muted"
+        border: "sm",
+        borderColor: "display.border.muted.default",
+        color: "display.text.muted.active"
       },
       ":disabled ~ span > iconify-icon": {
-        color: "muted",
+        color: "display.text.muted.active",
         cursor: "default"
       },
       ":focus-within": {
-        outlineColor: "highlight"
+        outlineColor: "display.border.muted.active"
       },
       ':not(:disabled, [aria-invalid="true"]):hover': {
-        borderColor: "highlight"
+        borderColor: "display.border.muted.active"
       },
       ':not(:disabled, [aria-invalid="true"]) ~ span:has(iconify-icon):hover': {
-        color: "highlight"
+        color: "display.text.accent.default"
       },
       "& ~ span:has(iconify-icon)": {
-        fontSize: "base"
+        fontSize: "md"
       },
       '&[aria-invalid="true"]': {
-        border: "danger",
-        borderColor: "danger",
-        color: "danger",
-        outlineColor: "danger"
+        border: "md",
+        borderColor: "display.border.negative.default",
+        color: "display.text.negative.default",
+        outlineColor: "display.border.negative.default"
       },
       '&[aria-invalid="true"] ~ span>iconify-icon': {
-        color: "danger"
+        color: "display.text.negative.default"
       }
     },
     select: {
-      color: "text",
-      backgroundColor: "surface",
-      border: "interaction",
-      borderColor: "onMuted",
-      borderRadius: "action",
+      color: "display.text.primary.default",
+      backgroundColor: "display.background.secondary.default",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      borderRadius: "sm",
       ":disabled": {
-        border: "muted",
-        borderColor: "onMuted",
-        backgroundColor: "muted",
-        color: "onMuted"
+        border: "sm",
+        borderColor: "display.border.muted.default",
+        backgroundColor: "display.background.muted.default",
+        color: "display.text.muted.default"
       },
       ":disabled ~ * > span:has(iconify-icon)": {
-        color: "onMuted"
+        color: "display.text.muted.default"
       },
       '&[aria-invalid="true"]': {
-        border: "danger",
-        borderColor: "danger",
-        outlineColor: "danger"
+        border: "md",
+        borderColor: "display.border.negative.default",
+        outlineColor: "display.border.negative.default"
       },
       '&[aria-invalid="true"] ~ * > span.error-icon': {
-        color: "danger"
+        color: "display.text.negative.default"
       }
     },
     textarea: {
-      color: "text",
-      border: "interaction",
-      borderColor: "onMuted",
-      backgroundColor: "surface",
-      borderRadius: "action",
+      color: "display.text.primary.default",
+      border: "md",
+      borderColor: "input.border.muted.default",
+      backgroundColor: "display.background.secondary.default",
+      borderRadius: "sm",
       ":focus-within": {
-        outlineColor: "primary"
+        outlineColor: "input.border.primary.default"
       },
       ":disabled::placeholder": {
-        color: "onMuted"
+        color: "input.text.muted.active"
       },
       ":disabled": {
-        borderColor: "onMuted",
-        backgroundColor: "muted",
-        border: "muted",
-        color: "onMuted"
+        borderColor: "input.border.muted.default",
+        backgroundColor: "input.background.muted.active",
+        border: "sm",
+        color: "input.text.muted.active"
       },
       '&[aria-invalid="true"]': {
-        borderColor: "danger",
-        outlineColor: "danger"
+        borderColor: "input.border.negative.default",
+        outlineColor: "input.border.negative.default"
       },
       '&[aria-invalid="true"]+span>iconify-icon': {
-        color: "danger",
-        fontSize: "base"
+        color: "input.text.negative.default",
+        fontSize: "lg"
       }
     }
   },
   text: {
     default: {
-      color: "text",
+      color: "navigation.text.primary.default",
       fontFamily: "body"
     },
     title: {
       fontFamily: "heading",
-      fontSize: 4,
+      fontSize: "5xl",
       lineSpace: "3.5"
     },
     help: {
-      color: "text",
+      color: "navigation.text.primary.default",
       '&[aria-disabled="true"]': {
-        color: "onMuted"
+        color: "navigation.text.muted.default"
       },
       negative: {
-        color: "danger",
+        color: "navigation.text.negative.default",
         '&[aria-disabled="true"]': {
-          color: "onMuted"
+          color: "navigation.text.muted.default"
         }
       }
     },
     headline: {
-      fontFamily: "contrast",
+      fontFamily: "heading",
       fontWeight: "bold",
-      lineHeight: "flat",
+      lineHeight: "moderate",
       fontSize: "5xl",
-      letterSpacing: "regular"
+      letterSpacing: "wide"
     },
     subheadline: {
-      fontFamily: "main",
+      fontFamily: "body",
       fontWeight: "bold",
-      lineHeight: "base",
+      lineHeight: "normal",
       fontSize: "xl",
-      letterSpacing: "regular"
+      letterSpacing: "wide"
     },
     h1: {
-      fontFamily: "contrast",
+      fontFamily: "heading",
       fontWeight: "extrabold",
-      lineHeight: "base",
+      lineHeight: "normal",
       fontSize: "3xl",
-      letterSpacing: "regular"
+      letterSpacing: "wide"
     },
     h2: {
-      fontFamily: "contrast",
+      fontFamily: "heading",
       fontWeight: "bold",
-      lineHeight: "base",
+      lineHeight: "normal",
       fontSize: "2xl",
-      letterSpacing: "regular"
+      letterSpacing: "wide"
     },
     h3: {
-      fontFamily: "contrast",
+      fontFamily: "heading",
       fontWeight: "bold",
-      lineHeight: "base",
+      lineHeight: "normal",
       fontSize: "xl",
-      letterSpacing: "regular"
+      letterSpacing: "wide"
     },
     h4: {
-      fontFamily: "contrast",
+      fontFamily: "heading",
       fontWeight: "semibold",
-      lineHeight: "base",
+      lineHeight: "normal",
       fontSize: "lg",
-      letterSpacing: "regular"
+      letterSpacing: "wide"
     },
     h5: {
-      fontFamily: "contrast",
+      fontFamily: "heading",
       fontWeight: "semibold",
-      lineHeight: "base",
-      fontSize: "base",
-      letterSpacing: "regular"
+      lineHeight: "normal",
+      fontSize: "md",
+      letterSpacing: "wide"
     }
   }
 };