@ttoss/theme 2.12.1 → 2.12.2

package/dist/{Bruttal-BVrlL-IU.mjs → Bruttal-BO7e3GgN.mjs}

@@ -702,12 +702,114 @@ for (const [key, icon] of Object.entries(BrutalIcons)) {
 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"];
 
 //#endregion
-//#region src/themes/Bruttal/BruttalTheme.ts
-var coreFonts = {
-  body: "\"Atkinson Hyperlegible\", sans-serif",
-  heading: "\"Work Sans\", sans-serif",
-  mono: "\"Inconsolata\", sans-serif"
+//#region src/themes/Bruttal/BruttalBadges.ts
+var BruttalBadges = {
+  positive: {
+    color: "action.text.accent.default",
+    bg: "action.background.accent.active"
+  },
+  negative: {
+    color: "action.text.negative.default",
+    bg: "action.background.negative.default"
+  },
+  neutral: {
+    color: "action.text.primary.default",
+    bg: "action.background.secondary.default",
+    border: "sm",
+    borderColor: "action.border.muted.default"
+  },
+  informative: {
+    color: "action.text.caution.default",
+    bg: "action.background.caution.default"
+  },
+  muted: {
+    color: "action.text.muted.default",
+    bg: "action.background.muted.default"
+  }
+};
+
+//#endregion
+//#region src/themes/Bruttal/BruttalButtons.ts
+var BruttalButtons = {
+  accent: {
+    backgroundColor: "action.background.accent.default",
+    color: "action.text.accent.default",
+    borderRadius: "sm",
+    ":hover:not(:active,[disabled])": {
+      filter: "brightness(90%)"
+    },
+    ":disabled": {
+      cursor: "default",
+      backgroundColor: "action.background.muted.default",
+      borderColor: "action.border.muted.default",
+      color: "action.text.muted.default"
+    }
+  },
+  primary: {
+    backgroundColor: "action.background.primary.default",
+    color: "action.text.secondary.default",
+    borderRadius: "sm",
+    ":hover:not(:active,[disabled])": {
+      filter: "brightness(90%)"
+    },
+    ":active": {
+      backgroundColor: "action.background.primary.default",
+      color: "action.text.secondary.default"
+    },
+    ":disabled": {
+      cursor: "default",
+      backgroundColor: "action.background.muted.default",
+      borderColor: "action.border.muted.default",
+      color: "action.text.muted.default"
+    }
+  },
+  secondary: {
+    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: "action.background.muted.default",
+      borderColor: "action.border.muted.default",
+      color: "action.text.muted.default"
+    }
+  },
+  destructive: {
+    color: "action.text.negative.default",
+    backgroundColor: "action.background.negative.default",
+    ":hover:not(:active,[disabled])": {
+      filter: "brightness(90%)"
+    },
+    ":disabled": {
+      cursor: "default",
+      backgroundColor: "action.background.muted.default",
+      borderColor: "action.border.muted.default",
+      color: "action.text.muted.default"
+    }
+  },
+  close: {
+    color: "action.background.primary.default",
+    ":hover:not(:active,[disabled])": {
+      filter: "brightness(90%)",
+      cursor: "pointer"
+    },
+    ":active": {
+      color: "action.background.primary.active"
+    },
+    ":disabled": {
+      cursor: "default",
+      color: "action.background.primary.disabled"
+    }
+  }
 };
+
+//#endregion
+//#region src/themes/Bruttal/BruttalColors.ts
 var coreColors = {
   complimentary: "#f4f3f3",
   main: "#292C2a",
@@ -735,670 +837,594 @@ var coreColors = {
   amber600: "#d97706",
   teal600: "#0d9488"
 };
-var radii = {
-  none: "0",
-  "2xs": "0.0625rem",
-  xs: "0.125rem",
-  sm: "0.25rem",
-  md: "0.375rem",
-  lg: "0.25rem",
-  xl: "0.25rem",
-  "2xl": "0.25rem",
-  "3xl": "0.25rem",
-  "4xl": "0.25rem",
-  full: "9999px"
-};
-var BruttalTheme = {
-  /**
-  * Tokens
-  */
-  borders: defaultTheme.borders,
-  sizes: defaultTheme.sizes,
-  fontSizes: defaultTheme.fontSizes,
-  fontWeights: defaultTheme.fontWeights,
-  letterSpacings: defaultTheme.letterSpacings,
-  space: defaultTheme.space,
-  lineHeights: defaultTheme.lineHeights,
-  zIndices: defaultTheme.zIndices,
-  colors: {
-    navigation: {
-      background: {
-        primary: {
-          default: coreColors.complimentary
-        },
-        muted: {
-          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.gray600,
-          disabled: coreColors.gray200
-        },
-        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
-        }
+var BruttalColors = {
+  navigation: {
+    background: {
+      primary: {
+        default: coreColors.complimentary
       },
-      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
-        }
+      muted: {
+        default: coreColors.complimentary
       }
     },
-    display: {
-      background: {
-        primary: {
-          default: coreColors.white,
-          active: coreColors.main
-        },
-        secondary: {
-          default: coreColors.white
-        },
-        muted: {
-          default: coreColors.gray200
-        }
+    text: {
+      primary: {
+        default: coreColors.black
       },
-      text: {
-        primary: {
-          default: coreColors.black
-        },
-        secondary: {
-          default: coreColors.darkNeutral
-        },
-        muted: {
-          default: coreColors.gray600,
-          active: coreColors.gray200
-        },
-        accent: coreColors.accent,
-        negative: {
-          default: coreColors.red700
-        }
+      accent: {
+        default: coreColors.darkNeutral
       },
-      border: {
-        primary: {
-          default: coreColors.main
-        },
-        secondary: {
-          default: coreColors.black
-        },
-        muted: {
-          default: coreColors.gray600,
-          active: coreColors.darkNeutral
-        },
-        accent: {
-          default: coreColors.accent
-        },
-        negative: {
-          default: coreColors.red700
-        }
-      }
-    },
-    feedback: {
-      background: {
-        primary: {
-          default: coreColors.white
-        }
+      muted: {
+        default: coreColors.gray600
       },
-      text: {
-        primary: {
-          default: coreColors.white
-        },
-        secondary: {
-          default: coreColors.black
-        }
+      negative: {
+        default: coreColors.red700
       }
     }
   },
-  fonts: coreFonts,
-  radii,
-  /**
-  * Global styles
-  */
-  styles: {
-    root: {
-      fontFamily: "body",
-      fontWeight: "normal",
-      fontSize: "md",
-      zIndex: "base",
-      margin: 0,
-      padding: 0,
-      backgroundColor: "navigation.background.primary.default",
-      ".react-select__control": {
-        border: "md",
-        borderRadius: "sm",
-        lineHeight: "normal"
+  action: {
+    text: {
+      primary: {
+        default: coreColors.black
       },
-      /**
-      * HTML elements
-      */
-      table: {
-        borderCollapse: "collapse"
+      secondary: {
+        default: coreColors.white,
+        active: coreColors.complimentary
       },
-      th: {
-        paddingX: "4",
-        paddingY: "4"
+      accent: {
+        default: coreColors.white
       },
-      tr: {
-        borderBottom: "default"
+      negative: {
+        default: coreColors.white
       },
-      td: {
-        paddingX: "6",
-        paddingY: "4"
+      caution: {
+        default: coreColors.white
       },
-      a: {
-        fontFamily: "body",
-        textDecorationLine: "underline",
-        lineHeight: "normal",
-        color: "navigation.text.primary.default",
-        "&[aria-invalid=\"true\"]": {
-          color: "feedback.text.negative.default"
-        },
-        "&.quiet:not(:hover)": {
-          textDecorationLine: "none"
-        },
-        ":visited": {
-          color: "navigation.text.accent.default"
-        },
-        "&.warning": {
-          color: "feedback.text.caution.default"
-        }
+      muted: {
+        default: coreColors.gray600
       }
-    }
-  },
-  /**
-  * Components
-  */
-  badges: {
-    positive: {
-      color: "action.text.accent.default",
-      bg: "action.background.accent.active"
     },
-    negative: {
-      color: "action.text.negative.default",
-      bg: "action.background.negative.default"
-    },
-    neutral: {
-      color: "action.text.primary.default",
-      bg: "action.background.secondary.default",
-      border: "sm",
-      borderColor: "action.border.muted.default"
-    },
-    informative: {
-      color: "action.text.caution.default",
-      bg: "action.background.caution.default"
-    },
-    muted: {
-      color: "action.text.muted.default",
-      bg: "action.background.muted.default"
-    }
-  },
-  buttons: {
-    accent: {
-      backgroundColor: "action.background.accent.default",
-      color: "action.text.accent.default",
-      borderRadius: "sm",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
+    background: {
+      primary: {
+        default: coreColors.main,
+        active: coreColors.gray600,
+        disabled: coreColors.gray200
       },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default"
-      }
-    },
-    primary: {
-      backgroundColor: "action.background.primary.default",
-      color: "action.text.secondary.default",
-      borderRadius: "sm",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
+      secondary: {
+        default: coreColors.gray100,
+        active: coreColors.darkNeutral
       },
-      ":active": {
-        backgroundColor: "action.background.primary.default",
-        color: "action.text.secondary.default"
+      negative: {
+        default: coreColors.red700
       },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default"
-      }
-    },
-    secondary: {
-      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%)"
+      accent: {
+        default: coreColors.accent,
+        active: coreColors.teal600
       },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default"
-      }
-    },
-    destructive: {
-      color: "action.text.negative.default",
-      backgroundColor: "action.background.negative.default",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)"
+      caution: {
+        default: coreColors.amber600
       },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default"
+      muted: {
+        default: coreColors.gray200
       }
     },
-    close: {
-      color: "action.background.primary.default",
-      ":hover:not(:active,[disabled])": {
-        filter: "brightness(90%)",
-        cursor: "pointer"
+    border: {
+      primary: {
+        default: coreColors.black
+      },
+      secondary: {
+        default: coreColors.gray500,
+        active: coreColors.darkNeutral
       },
-      ":active": {
-        color: "action.background.primary.active"
+      muted: {
+        default: coreColors.gray600
       },
-      ":disabled": {
-        cursor: "default",
-        color: "action.background.primary.disabled"
+      accent: {
+        default: coreColors.accent
       }
     }
   },
-  forms: {
-    label: {
-      color: "display.text.primary.default",
-      "&:is([aria-disabled=\"true\"])": {
-        color: "display.text.muted.default"
-      },
-      "& > span[aria-label=\"tooltip\"]": {
-        fontSize: "sm",
-        marginLeft: "2"
+  input: {
+    text: {
+      primary: {
+        default: coreColors.white
       },
-      "& > div:has(input[type=\"checkbox\"]) > svg": {
-        marginRight: 0
+      secondary: {
+        default: coreColors.black
       },
-      "&:has(input[type=\"checkbox\"]:disabled)": {
-        color: "display.text.muted.default"
+      muted: {
+        default: coreColors.gray200,
+        active: coreColors.gray600
       },
-      "&:has(div > input[type=\"radio\"])": {
-        alignItems: "center"
+      accent: {
+        default: coreColors.accent
       },
-      "&:has(div > input[type=\"radio\"]:disabled)": {
-        color: "display.text.muted.active"
+      negative: {
+        default: coreColors.red700
       }
     },
-    radio: {
-      color: "input.text.secondary.default",
-      fontFamily: "body",
-      fontSize: "lg",
-      "input:disabled ~ &": {
-        color: "input.text.muted.default"
+    background: {
+      primary: {
+        default: coreColors.main,
+        active: coreColors.complimentary
       },
-      "input:checked ~ &": {
-        color: "input.text.accent.default"
+      secondary: {
+        default: coreColors.gray200,
+        active: coreColors.white
       },
-      "input[aria-invalid=\"true\"] ~ &": {
-        color: "input.text.negative.default"
+      muted: {
+        default: coreColors.gray600,
+        active: coreColors.gray200,
+        disabled: coreColors.gray200
       },
-      "input:focus ~ &": {
-        bg: "transparent"
+      accent: {
+        default: coreColors.accent
       },
-      "&:is(svg, svg + svg)": {
-        width: "min",
-        height: "min"
+      negative: {
+        default: coreColors.red700
       }
     },
-    checkbox: {
-      "input:focus ~ &": {
-        bg: "transparent"
-      },
-      "input:not(:checked) ~ &": {
-        color: "input.text.secondary.default"
+    border: {
+      primary: {
+        default: coreColors.main
       },
-      "input:checked ~ &": {
-        color: "input.text.accent.default"
+      secondary: {
+        default: coreColors.black,
+        active: coreColors.darkNeutral
       },
-      "input:disabled ~ &": {
-        color: "input.text.muted.default"
+      muted: {
+        default: coreColors.gray600
       },
-      "input:disabled ~ & path": {
-        backgroundColor: "input.background.muted.default"
+      accent: {
+        default: coreColors.accent
       },
-      "input[aria-invalid=\"true\"] ~ &": {
-        color: "display.text.negative.default"
+      caution: {
+        default: coreColors.gray500
       },
-      "&:is(svg, svg + svg)": {
-        width: "min",
-        height: "min"
+      negative: {
+        default: coreColors.red700
       }
-    },
-    input: {
-      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: "display.text.muted.default"
-      },
-      ":focus-within": {
-        outlineColor: "display.border.muted.active"
-      },
-      ":disabled": {
-        backgroundColor: "display.background.muted.default",
-        color: "display.text.muted.default",
-        border: "sm",
-        borderColor: "display.border.muted.default"
-      },
-      "&[aria-invalid=\"true\"]": {
-        borderColor: "display.border.negative.default",
-        ":focus-within": {
-          outlineColor: "display.border.negative.default"
-        }
+    }
+  },
+  display: {
+    background: {
+      primary: {
+        default: coreColors.white,
+        active: coreColors.main
       },
-      "&[aria-invalid=\"true\"] ~ span:has(iconify-icon)": {
-        color: "display.text.negative.default"
+      secondary: {
+        default: coreColors.white
       },
-      ".is-warning &": {
-        border: "md",
-        borderColor: "feedback.border.caution.active",
-        ":focus-within": {
-          outlineColor: "feedback.border.caution.active"
-        }
+      muted: {
+        default: coreColors.gray200
       }
     },
-    inputNumber: {
-      color: "display.text.primary.default",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      borderRadius: "sm",
-      ":disabled": {
-        border: "sm",
-        borderColor: "display.border.muted.default",
-        color: "display.text.muted.active"
+    text: {
+      primary: {
+        default: coreColors.black
       },
-      ":disabled ~ span > iconify-icon": {
-        color: "display.text.muted.active",
-        cursor: "default"
+      secondary: {
+        default: coreColors.darkNeutral
       },
-      ":focus-within": {
-        outlineColor: "display.border.muted.active"
+      muted: {
+        default: coreColors.gray600,
+        active: coreColors.gray200
       },
-      ":not(:disabled, [aria-invalid=\"true\"]):hover": {
-        borderColor: "display.border.muted.active"
+      accent: coreColors.accent,
+      negative: {
+        default: coreColors.red700
+      }
+    },
+    border: {
+      primary: {
+        default: coreColors.main
       },
-      ":not(:disabled, [aria-invalid=\"true\"]) ~ span:has(iconify-icon):hover": {
-        color: "display.text.accent.default"
+      secondary: {
+        default: coreColors.black
       },
-      "& ~ span:has(iconify-icon)": {
-        fontSize: "md"
+      muted: {
+        default: coreColors.gray600,
+        active: coreColors.darkNeutral
       },
-      "&[aria-invalid=\"true\"]": {
-        border: "md",
-        borderColor: "display.border.negative.default",
-        color: "display.text.negative.default",
-        outlineColor: "display.border.negative.default"
+      accent: {
+        default: coreColors.accent
       },
-      "&[aria-invalid=\"true\"] ~ span>iconify-icon": {
-        color: "display.text.negative.default"
+      negative: {
+        default: coreColors.red700
+      }
+    }
+  },
+  feedback: {
+    background: {
+      primary: {
+        default: coreColors.white
       }
     },
-    select: {
-      color: "display.text.primary.default",
-      backgroundColor: "display.background.secondary.default",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      borderRadius: "sm",
-      ":disabled": {
-        border: "sm",
-        borderColor: "display.border.muted.default",
-        backgroundColor: "display.background.muted.default",
-        color: "display.text.muted.default"
+    text: {
+      primary: {
+        default: coreColors.white
       },
-      ":disabled ~ * > span:has(iconify-icon)": {
-        color: "display.text.muted.default"
-      },
-      "&[aria-invalid=\"true\"]": {
-        border: "md",
-        borderColor: "display.border.negative.default",
+      secondary: {
+        default: coreColors.black
+      }
+    }
+  }
+};
+
+//#endregion
+//#region src/themes/Bruttal/BruttalForms.ts
+var BruttalForms = {
+  label: {
+    color: "display.text.primary.default",
+    "&:is([aria-disabled=\"true\"])": {
+      color: "display.text.muted.default"
+    },
+    "& > span[aria-label=\"tooltip\"]": {
+      fontSize: "sm",
+      marginLeft: "2"
+    },
+    "& > div:has(input[type=\"checkbox\"]) > svg": {
+      marginRight: 0
+    },
+    "&:has(input[type=\"checkbox\"]:disabled)": {
+      color: "display.text.muted.default"
+    },
+    "&:has(div > input[type=\"radio\"])": {
+      alignItems: "center"
+    },
+    "&:has(div > input[type=\"radio\"]:disabled)": {
+      color: "display.text.muted.active"
+    }
+  },
+  radio: {
+    color: "input.text.secondary.default",
+    fontFamily: "body",
+    fontSize: "lg",
+    "input:disabled ~ &": {
+      color: "input.text.muted.default"
+    },
+    "input:checked ~ &": {
+      color: "input.text.accent.default"
+    },
+    "input[aria-invalid=\"true\"] ~ &": {
+      color: "input.text.negative.default"
+    },
+    "input:focus ~ &": {
+      bg: "transparent"
+    },
+    "&:is(svg, svg + svg)": {
+      width: "16px",
+      height: "16px",
+      flexShrink: 0
+    }
+  },
+  checkbox: {
+    "input:focus ~ &": {
+      bg: "transparent"
+    },
+    "input:not(:checked) ~ &": {
+      color: "input.text.secondary.default"
+    },
+    "input:checked ~ &": {
+      color: "input.text.accent.default"
+    },
+    "input:disabled ~ &": {
+      color: "input.text.muted.default"
+    },
+    "input:disabled ~ & path": {
+      backgroundColor: "input.background.muted.default"
+    },
+    "input[aria-invalid=\"true\"] ~ &": {
+      color: "display.text.negative.default"
+    },
+    "&:is(svg, svg + svg)": {
+      width: "16px",
+      height: "16px",
+      flexShrink: 0
+    }
+  },
+  input: {
+    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: "display.text.muted.default"
+    },
+    ":focus-within": {
+      outlineColor: "display.border.muted.active"
+    },
+    ":disabled": {
+      backgroundColor: "display.background.muted.default",
+      color: "display.text.muted.default",
+      border: "sm",
+      borderColor: "display.border.muted.default"
+    },
+    "&[aria-invalid=\"true\"]": {
+      borderColor: "display.border.negative.default",
+      ":focus-within": {
         outlineColor: "display.border.negative.default"
-      },
-      "&[aria-invalid=\"true\"] ~ * > span.error-icon": {
-        color: "display.text.negative.default"
       }
     },
-    textarea: {
-      color: "display.text.primary.default",
+    "&[aria-invalid=\"true\"] ~ span:has(iconify-icon)": {
+      color: "display.text.negative.default"
+    },
+    ".is-warning &": {
       border: "md",
-      borderColor: "input.border.muted.default",
-      backgroundColor: "display.background.secondary.default",
-      borderRadius: "sm",
+      borderColor: "feedback.border.caution.active",
       ":focus-within": {
-        outlineColor: "input.border.primary.default"
-      },
-      ":disabled::placeholder": {
-        color: "input.text.muted.active"
-      },
-      ":disabled": {
-        borderColor: "input.border.muted.default",
-        backgroundColor: "input.background.muted.active",
-        border: "sm",
-        color: "input.text.muted.active"
-      },
-      "&[aria-invalid=\"true\"]": {
-        borderColor: "input.border.negative.default",
-        outlineColor: "input.border.negative.default"
-      },
-      "&[aria-invalid=\"true\"]+span>iconify-icon": {
-        color: "input.text.negative.default",
-        fontSize: "lg"
+        outlineColor: "feedback.border.caution.active"
       }
     }
   },
-  text: {
-    default: {
-      color: "navigation.text.primary.default",
-      fontFamily: "body"
+  inputNumber: {
+    color: "display.text.primary.default",
+    border: "md",
+    borderColor: "display.border.muted.default",
+    borderRadius: "sm",
+    ":disabled": {
+      border: "sm",
+      borderColor: "display.border.muted.default",
+      color: "display.text.muted.active"
     },
-    title: {
-      fontFamily: "heading",
-      fontSize: "5xl",
-      lineSpace: "3.5"
+    ":disabled ~ span > iconify-icon": {
+      color: "display.text.muted.active",
+      cursor: "default"
     },
-    help: {
-      color: "navigation.text.primary.default",
-      "&[aria-disabled=\"true\"]": {
-        color: "navigation.text.muted.default"
-      },
-      negative: {
-        color: "navigation.text.negative.default",
-        "&[aria-disabled=\"true\"]": {
-          color: "navigation.text.muted.default"
-        }
-      }
+    ":focus-within": {
+      outlineColor: "display.border.muted.active"
     },
-    headline: {
-      fontFamily: "heading",
-      fontWeight: "bold",
-      lineHeight: "moderate",
-      fontSize: "5xl",
-      letterSpacing: "wide"
+    ":not(:disabled, [aria-invalid=\"true\"]):hover": {
+      borderColor: "display.border.muted.active"
     },
-    subheadline: {
-      fontFamily: "body",
-      fontWeight: "bold",
-      lineHeight: "normal",
-      fontSize: "xl",
-      letterSpacing: "wide"
+    ":not(:disabled, [aria-invalid=\"true\"]) ~ span:has(iconify-icon):hover": {
+      color: "display.text.accent.default"
     },
-    h1: {
-      fontFamily: "heading",
-      fontWeight: "extrabold",
-      lineHeight: "normal",
-      fontSize: "3xl",
-      letterSpacing: "wide"
+    "& ~ span:has(iconify-icon)": {
+      fontSize: "md"
     },
-    h2: {
-      fontFamily: "heading",
-      fontWeight: "bold",
-      lineHeight: "normal",
-      fontSize: "2xl",
-      letterSpacing: "wide"
+    "&[aria-invalid=\"true\"]": {
+      border: "md",
+      borderColor: "display.border.negative.default",
+      color: "display.text.negative.default",
+      outlineColor: "display.border.negative.default"
     },
-    h3: {
-      fontFamily: "heading",
-      fontWeight: "bold",
-      lineHeight: "normal",
-      fontSize: "xl",
-      letterSpacing: "wide"
+    "&[aria-invalid=\"true\"] ~ span>iconify-icon": {
+      color: "display.text.negative.default"
+    }
+  },
+  select: {
+    color: "display.text.primary.default",
+    backgroundColor: "display.background.secondary.default",
+    border: "md",
+    borderColor: "display.border.muted.default",
+    borderRadius: "sm",
+    ":disabled": {
+      border: "sm",
+      borderColor: "display.border.muted.default",
+      backgroundColor: "display.background.muted.default",
+      color: "display.text.muted.default"
     },
-    h4: {
-      fontFamily: "heading",
-      fontWeight: "semibold",
-      lineHeight: "normal",
-      fontSize: "lg",
-      letterSpacing: "wide"
+    ":disabled ~ * > span:has(iconify-icon)": {
+      color: "display.text.muted.default"
+    },
+    "&[aria-invalid=\"true\"]": {
+      border: "md",
+      borderColor: "display.border.negative.default",
+      outlineColor: "display.border.negative.default"
+    },
+    "&[aria-invalid=\"true\"] ~ * > span.error-icon": {
+      color: "display.text.negative.default"
+    }
+  },
+  textarea: {
+    color: "display.text.primary.default",
+    border: "md",
+    borderColor: "input.border.muted.default",
+    backgroundColor: "display.background.secondary.default",
+    borderRadius: "sm",
+    ":focus-within": {
+      outlineColor: "input.border.primary.default"
+    },
+    ":disabled::placeholder": {
+      color: "input.text.muted.active"
+    },
+    ":disabled": {
+      borderColor: "input.border.muted.default",
+      backgroundColor: "input.background.muted.active",
+      border: "sm",
+      color: "input.text.muted.active"
+    },
+    "&[aria-invalid=\"true\"]": {
+      borderColor: "input.border.negative.default",
+      outlineColor: "input.border.negative.default"
+    },
+    "&[aria-invalid=\"true\"]+span>iconify-icon": {
+      color: "input.text.negative.default",
+      fontSize: "lg"
+    }
+  }
+};
+
+//#endregion
+//#region src/themes/Bruttal/BruttalStyles.ts
+var BruttalStyles = {
+  root: {
+    fontFamily: "body",
+    fontWeight: "normal",
+    fontSize: "md",
+    zIndex: "base",
+    margin: 0,
+    padding: 0,
+    backgroundColor: "navigation.background.primary.default",
+    ".react-select__control": {
+      border: "md",
+      borderRadius: "sm",
+      lineHeight: "normal"
     },
-    h5: {
-      fontFamily: "heading",
-      fontWeight: "semibold",
+    /**
+    * HTML elements
+    */
+    table: {
+      borderCollapse: "collapse"
+    },
+    th: {
+      paddingX: "4",
+      paddingY: "4"
+    },
+    tr: {
+      borderBottom: "default"
+    },
+    td: {
+      paddingX: "6",
+      paddingY: "4"
+    },
+    a: {
+      fontFamily: "body",
+      textDecorationLine: "underline",
       lineHeight: "normal",
-      fontSize: "md",
-      letterSpacing: "wide"
+      color: "navigation.text.primary.default",
+      "&[aria-invalid=\"true\"]": {
+        color: "feedback.text.negative.default"
+      },
+      "&.quiet:not(:hover)": {
+        textDecorationLine: "none"
+      },
+      ":visited": {
+        color: "navigation.text.accent.default"
+      },
+      "&.warning": {
+        color: "feedback.text.caution.default"
+      }
+    }
+  }
+};
+
+//#endregion
+//#region src/themes/Bruttal/BruttalText.ts
+var BruttalText = {
+  default: {
+    color: "navigation.text.primary.default",
+    fontFamily: "body"
+  },
+  title: {
+    fontFamily: "heading",
+    fontSize: "5xl",
+    lineSpace: "3.5"
+  },
+  help: {
+    color: "navigation.text.primary.default",
+    "&[aria-disabled=\"true\"]": {
+      color: "navigation.text.muted.default"
+    },
+    negative: {
+      color: "navigation.text.negative.default",
+      "&[aria-disabled=\"true\"]": {
+        color: "navigation.text.muted.default"
+      }
     }
+  },
+  headline: {
+    fontFamily: "heading",
+    fontWeight: "bold",
+    lineHeight: "moderate",
+    fontSize: "5xl",
+    letterSpacing: "wide"
+  },
+  subheadline: {
+    fontFamily: "body",
+    fontWeight: "bold",
+    lineHeight: "normal",
+    fontSize: "xl",
+    letterSpacing: "wide"
+  },
+  h1: {
+    fontFamily: "heading",
+    fontWeight: "extrabold",
+    lineHeight: "normal",
+    fontSize: "3xl",
+    letterSpacing: "wide"
+  },
+  h2: {
+    fontFamily: "heading",
+    fontWeight: "bold",
+    lineHeight: "normal",
+    fontSize: "2xl",
+    letterSpacing: "wide"
+  },
+  h3: {
+    fontFamily: "heading",
+    fontWeight: "bold",
+    lineHeight: "normal",
+    fontSize: "xl",
+    letterSpacing: "wide"
+  },
+  h4: {
+    fontFamily: "heading",
+    fontWeight: "semibold",
+    lineHeight: "normal",
+    fontSize: "lg",
+    letterSpacing: "wide"
+  },
+  h5: {
+    fontFamily: "heading",
+    fontWeight: "semibold",
+    lineHeight: "normal",
+    fontSize: "md",
+    letterSpacing: "wide"
   }
 };
 
+//#endregion
+//#region src/themes/Bruttal/BruttalTheme.ts
+var coreFonts = {
+  body: "\"Atkinson Hyperlegible\", sans-serif",
+  heading: "\"Work Sans\", sans-serif",
+  mono: "\"Inconsolata\", sans-serif"
+};
+var radii = {
+  none: "0",
+  "2xs": "0.0625rem",
+  xs: "0.125rem",
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.25rem",
+  xl: "0.25rem",
+  "2xl": "0.25rem",
+  "3xl": "0.25rem",
+  "4xl": "0.25rem",
+  full: "9999px"
+};
+var BruttalTheme = {
+  /**
+  * Tokens
+  */
+  borders: defaultTheme.borders,
+  sizes: defaultTheme.sizes,
+  fontSizes: defaultTheme.fontSizes,
+  fontWeights: defaultTheme.fontWeights,
+  letterSpacings: defaultTheme.letterSpacings,
+  space: defaultTheme.space,
+  lineHeights: defaultTheme.lineHeights,
+  zIndices: defaultTheme.zIndices,
+  colors: BruttalColors,
+  fonts: coreFonts,
+  radii,
+  /**
+  * Global styles
+  */
+  styles: BruttalStyles,
+  /**
+  * Components
+  */
+  badges: BruttalBadges,
+  buttons: BruttalButtons,
+  forms: BruttalForms,
+  text: BruttalText
+};
+
 //#endregion
 export { BruttalFonts as n, BrutalIcons as r, BruttalTheme as t };