@ttoss/theme 1.4.23 → 1.4.25

package/dist/esm/{chunk-ZHO2ZEWA.js → chunk-AHVGJFKI.js}

@@ -77,6 +77,7 @@ import chevronUpIcon from "@iconify/icons-carbon/chevron-up";
 import closeFilledIcon from "@iconify/icons-carbon/close-filled";
 import closeIcon from "@iconify/icons-carbon/close";
 import copyIcon from "@iconify/icons-carbon/copy";
+import editIcon from "@iconify/icons-carbon/edit";
 import errorFilledIcon from "@iconify/icons-carbon/error-filled";
 import informationFilledIcon from "@iconify/icons-carbon/information-filled";
 import pasteIcon from "@iconify/icons-carbon/paste";
@@ -120,6 +121,7 @@ addIcon("check", checkMarkIcon);
 addIcon("check-mark", checkMarkOutlineIcon);
 addIcon("close", closeIcon);
 addIcon("copy", copyIcon);
+addIcon("edit", editIcon);
 addIcon("delete", trashCanIcon);
 addIcon("error", errorFilledIcon);
 addIcon("info", informationFilledIcon);
@@ -185,6 +187,17 @@ var letterSpacings = {
   widest: "0.1em"
 };
 
+// src/tokens/lineHeights.ts
+var lineHeights = {
+  "2xs": "0.422",
+  xs: "0.562",
+  sm: "calc(1 / 1.333)",
+  base: "normal",
+  lg: "calc(1 * 1.333)",
+  xl: "1.776",
+  "2xl": "2.368"
+};
+
 // src/tokens/space.ts
 var space = {
   none: 0,
@@ -263,6 +276,7 @@ var BruttalTheme = {
   fontWeights,
   letterSpacings,
   space,
+  lineHeights,
   colors: {
     background: coreColors.white,
     text: coreColors.black,
@@ -300,13 +314,15 @@ var BruttalTheme = {
     h6: coreFonts.contrast,
     body: coreFonts.main,
     highlight: coreFonts.main,
-    caption: coreFonts.monospace
+    caption: coreFonts.main
   },
   borders: {
-    default: coreBorders.medium,
+    default: coreBorders.thin,
+    secondary: coreBorders.medium,
     muted: coreBorders.thin,
     interaction: coreBorders.medium,
-    danger: coreBorders.medium
+    danger: coreBorders.medium,
+    highlight: coreBorders.medium
   },
   radii: {
     informative: coreRadii.xs,
@@ -344,6 +360,7 @@ var BruttalTheme = {
       bg: "positive",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -354,6 +371,7 @@ var BruttalTheme = {
       bg: "danger",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -365,6 +383,7 @@ var BruttalTheme = {
       fontFamily: "caption",
       fontSize: "xs",
       fontWeight: "normal",
+      lineHeight: "base",
       paddingX: "xs",
       paddingY: "2xs",
       borderRadius: "informative",
@@ -376,6 +395,7 @@ var BruttalTheme = {
       bg: "notice",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -389,14 +409,13 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "accent",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
     primary: {
@@ -405,9 +424,7 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "primary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":active": {
         backgroundColor: "primary",
@@ -417,59 +434,63 @@ var BruttalTheme = {
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
     secondary: {
       backgroundColor: "secondary",
       color: "onSecondary",
       borderRadius: "action",
-      borderColor: "secondary",
+      border: "secondary",
+      borderColor: "onSecondary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
-    neutral: {
-      backgroundColor: "muted",
-      color: "onMuted",
-      borderRadius: "action",
-      borderColor: "muted",
+    destructive: {
+      color: "onDanger",
+      backgroundColor: "danger",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
-    danger: {
-      color: "onDanger",
-      backgroundColor: "danger"
-    },
     closeButton: {
-      backgroundColor: "transparent",
-      color: "text",
+      backgroundColor: "background",
+      fontFamily: "caption",
+      color: "primary",
       fontSize: "xs",
       display: "inline-flex",
       alignItems: "center",
       cursor: "pointer",
+      gap: "sm",
+      padding: "sm",
+      border: "default",
+      borderColor: "primary",
+      width: "fit-content",
       ":disabled": {
-        color: "muted",
+        border: "muted",
+        backgroundColor: "muted",
+        color: "onMuted",
         cursor: "not-allowed"
       },
       ":is(:focus-within, :hover):not(:disabled)": {
-        color: "accent",
-        outlineColor: "transparent"
+        color: "onHighlight",
+        backgroundColor: "highlight",
+        border: "highlight",
+        borderColor: "highlight"
       }
     }
   },
@@ -488,6 +509,7 @@ var BruttalTheme = {
     label: {
       color: "text",
       fontFamily: "body",
+      alignItems: "center",
       '&:is([aria-disabled="true"])': {
         color: "onMuted"
       },
@@ -514,9 +536,15 @@ var BruttalTheme = {
       },
       'input[aria-invalid="true"] ~ &': {
         color: "danger"
+      },
+      "input:focus ~ &": {
+        bg: "transparent"
       }
     },
     checkbox: {
+      "input:focus ~ &": {
+        bg: "transparent"
+      },
       "input:not(:checked) ~ &": {
         color: "primary"
       },
@@ -547,8 +575,8 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
-        borderColor: "onMuted",
-        border: "muted"
+        border: "muted",
+        borderColor: "onMuted"
       },
       "&.error": {
         borderColor: "danger"
@@ -566,8 +594,8 @@ var BruttalTheme = {
       paddingY: "lg",
       paddingX: "xl",
       ":disabled": {
-        borderColor: "onMuted",
         border: "muted",
+        borderColor: "onMuted",
         color: "muted"
       },
       ":disabled ~ span > iconify-icon": {

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { BruttalTheme } from "./chunk-ZHO2ZEWA.js";
+import { BruttalTheme } from "./chunk-AHVGJFKI.js";
 
 // src/createTheme.ts
 import deepmerge from "deepmerge";

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

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { BruttalFonts, BruttalTheme } from "../../chunk-ZHO2ZEWA.js";
+import { BruttalFonts, BruttalTheme } from "../../chunk-AHVGJFKI.js";
 export { BruttalFonts, BruttalTheme };

package/dist/index.js

@@ -93,6 +93,7 @@ var import_chevron_up = __toESM(require("@iconify/icons-carbon/chevron-up"));
 var import_close_filled = __toESM(require("@iconify/icons-carbon/close-filled"));
 var import_close = __toESM(require("@iconify/icons-carbon/close"));
 var import_copy = __toESM(require("@iconify/icons-carbon/copy"));
+var import_edit = __toESM(require("@iconify/icons-carbon/edit"));
 var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
 var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
 var import_loading = __toESM(require_loading());
@@ -138,6 +139,7 @@ var subtractIcon = {
 (0, import_react.addIcon)("check-mark", import_checkmark_outline.default);
 (0, import_react.addIcon)("close", import_close.default);
 (0, import_react.addIcon)("copy", import_copy.default);
+(0, import_react.addIcon)("edit", import_edit.default);
 (0, import_react.addIcon)("delete", import_trash_can.default);
 (0, import_react.addIcon)("error", import_error_filled.default);
 (0, import_react.addIcon)("info", import_information_filled.default);
@@ -200,6 +202,17 @@ var letterSpacings = {
   widest: "0.1em"
 };
 
+// src/tokens/lineHeights.ts
+var lineHeights = {
+  "2xs": "0.422",
+  xs: "0.562",
+  sm: "calc(1 / 1.333)",
+  base: "normal",
+  lg: "calc(1 * 1.333)",
+  xl: "1.776",
+  "2xl": "2.368"
+};
+
 // src/tokens/space.ts
 var space = {
   none: 0,
@@ -278,6 +291,7 @@ var BruttalTheme = {
   fontWeights,
   letterSpacings,
   space,
+  lineHeights,
   colors: {
     background: coreColors.white,
     text: coreColors.black,
@@ -315,13 +329,15 @@ var BruttalTheme = {
     h6: coreFonts.contrast,
     body: coreFonts.main,
     highlight: coreFonts.main,
-    caption: coreFonts.monospace
+    caption: coreFonts.main
   },
   borders: {
-    default: coreBorders.medium,
+    default: coreBorders.thin,
+    secondary: coreBorders.medium,
     muted: coreBorders.thin,
     interaction: coreBorders.medium,
-    danger: coreBorders.medium
+    danger: coreBorders.medium,
+    highlight: coreBorders.medium
   },
   radii: {
     informative: coreRadii.xs,
@@ -359,6 +375,7 @@ var BruttalTheme = {
       bg: "positive",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -369,6 +386,7 @@ var BruttalTheme = {
       bg: "danger",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -380,6 +398,7 @@ var BruttalTheme = {
       fontFamily: "caption",
       fontSize: "xs",
       fontWeight: "normal",
+      lineHeight: "base",
       paddingX: "xs",
       paddingY: "2xs",
       borderRadius: "informative",
@@ -391,6 +410,7 @@ var BruttalTheme = {
       bg: "notice",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -404,14 +424,13 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "accent",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
     primary: {
@@ -420,9 +439,7 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "primary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":active": {
         backgroundColor: "primary",
@@ -432,59 +449,63 @@ var BruttalTheme = {
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
     secondary: {
       backgroundColor: "secondary",
       color: "onSecondary",
       borderRadius: "action",
-      borderColor: "secondary",
+      border: "secondary",
+      borderColor: "onSecondary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
-    neutral: {
-      backgroundColor: "muted",
-      color: "onMuted",
-      borderRadius: "action",
-      borderColor: "muted",
+    destructive: {
+      color: "onDanger",
+      backgroundColor: "danger",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
-    danger: {
-      color: "onDanger",
-      backgroundColor: "danger"
-    },
     closeButton: {
-      backgroundColor: "transparent",
-      color: "text",
+      backgroundColor: "background",
+      fontFamily: "caption",
+      color: "primary",
       fontSize: "xs",
       display: "inline-flex",
       alignItems: "center",
       cursor: "pointer",
+      gap: "sm",
+      padding: "sm",
+      border: "default",
+      borderColor: "primary",
+      width: "fit-content",
       ":disabled": {
-        color: "muted",
+        border: "muted",
+        backgroundColor: "muted",
+        color: "onMuted",
         cursor: "not-allowed"
       },
       ":is(:focus-within, :hover):not(:disabled)": {
-        color: "accent",
-        outlineColor: "transparent"
+        color: "onHighlight",
+        backgroundColor: "highlight",
+        border: "highlight",
+        borderColor: "highlight"
       }
     }
   },
@@ -503,6 +524,7 @@ var BruttalTheme = {
     label: {
       color: "text",
       fontFamily: "body",
+      alignItems: "center",
       '&:is([aria-disabled="true"])': {
         color: "onMuted"
       },
@@ -529,9 +551,15 @@ var BruttalTheme = {
       },
       'input[aria-invalid="true"] ~ &': {
         color: "danger"
+      },
+      "input:focus ~ &": {
+        bg: "transparent"
       }
     },
     checkbox: {
+      "input:focus ~ &": {
+        bg: "transparent"
+      },
       "input:not(:checked) ~ &": {
         color: "primary"
       },
@@ -562,8 +590,8 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
-        borderColor: "onMuted",
-        border: "muted"
+        border: "muted",
+        borderColor: "onMuted"
       },
       "&.error": {
         borderColor: "danger"
@@ -581,8 +609,8 @@ var BruttalTheme = {
       paddingY: "lg",
       paddingX: "xl",
       ":disabled": {
-        borderColor: "onMuted",
         border: "muted",
+        borderColor: "onMuted",
         color: "muted"
       },
       ":disabled ~ span > iconify-icon": {

package/dist/themes/Bruttal/Bruttal.js

@@ -94,6 +94,7 @@ var import_chevron_up = __toESM(require("@iconify/icons-carbon/chevron-up"));
 var import_close_filled = __toESM(require("@iconify/icons-carbon/close-filled"));
 var import_close = __toESM(require("@iconify/icons-carbon/close"));
 var import_copy = __toESM(require("@iconify/icons-carbon/copy"));
+var import_edit = __toESM(require("@iconify/icons-carbon/edit"));
 var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
 var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
 var import_loading = __toESM(require_loading());
@@ -139,6 +140,7 @@ var subtractIcon = {
 (0, import_react.addIcon)("check-mark", import_checkmark_outline.default);
 (0, import_react.addIcon)("close", import_close.default);
 (0, import_react.addIcon)("copy", import_copy.default);
+(0, import_react.addIcon)("edit", import_edit.default);
 (0, import_react.addIcon)("delete", import_trash_can.default);
 (0, import_react.addIcon)("error", import_error_filled.default);
 (0, import_react.addIcon)("info", import_information_filled.default);
@@ -204,6 +206,17 @@ var letterSpacings = {
   widest: "0.1em"
 };
 
+// src/tokens/lineHeights.ts
+var lineHeights = {
+  "2xs": "0.422",
+  xs: "0.562",
+  sm: "calc(1 / 1.333)",
+  base: "normal",
+  lg: "calc(1 * 1.333)",
+  xl: "1.776",
+  "2xl": "2.368"
+};
+
 // src/tokens/space.ts
 var space = {
   none: 0,
@@ -282,6 +295,7 @@ var BruttalTheme = {
   fontWeights,
   letterSpacings,
   space,
+  lineHeights,
   colors: {
     background: coreColors.white,
     text: coreColors.black,
@@ -319,13 +333,15 @@ var BruttalTheme = {
     h6: coreFonts.contrast,
     body: coreFonts.main,
     highlight: coreFonts.main,
-    caption: coreFonts.monospace
+    caption: coreFonts.main
   },
   borders: {
-    default: coreBorders.medium,
+    default: coreBorders.thin,
+    secondary: coreBorders.medium,
     muted: coreBorders.thin,
     interaction: coreBorders.medium,
-    danger: coreBorders.medium
+    danger: coreBorders.medium,
+    highlight: coreBorders.medium
   },
   radii: {
     informative: coreRadii.xs,
@@ -363,6 +379,7 @@ var BruttalTheme = {
       bg: "positive",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -373,6 +390,7 @@ var BruttalTheme = {
       bg: "danger",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -384,6 +402,7 @@ var BruttalTheme = {
       fontFamily: "caption",
       fontSize: "xs",
       fontWeight: "normal",
+      lineHeight: "base",
       paddingX: "xs",
       paddingY: "2xs",
       borderRadius: "informative",
@@ -395,6 +414,7 @@ var BruttalTheme = {
       bg: "notice",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -408,14 +428,13 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "accent",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
     primary: {
@@ -424,9 +443,7 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "primary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":active": {
         backgroundColor: "primary",
@@ -436,59 +453,63 @@ var BruttalTheme = {
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
     secondary: {
       backgroundColor: "secondary",
       color: "onSecondary",
       borderRadius: "action",
-      borderColor: "secondary",
+      border: "secondary",
+      borderColor: "onSecondary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
-    neutral: {
-      backgroundColor: "muted",
-      color: "onMuted",
-      borderRadius: "action",
-      borderColor: "muted",
+    destructive: {
+      color: "onDanger",
+      backgroundColor: "danger",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":disabled": {
         cursor: "default",
         backgroundColor: "muted",
-        borderColor: "muted"
+        borderColor: "muted",
+        color: "onMuted"
       }
     },
-    danger: {
-      color: "onDanger",
-      backgroundColor: "danger"
-    },
     closeButton: {
-      backgroundColor: "transparent",
-      color: "text",
+      backgroundColor: "background",
+      fontFamily: "caption",
+      color: "primary",
       fontSize: "xs",
       display: "inline-flex",
       alignItems: "center",
       cursor: "pointer",
+      gap: "sm",
+      padding: "sm",
+      border: "default",
+      borderColor: "primary",
+      width: "fit-content",
       ":disabled": {
-        color: "muted",
+        border: "muted",
+        backgroundColor: "muted",
+        color: "onMuted",
         cursor: "not-allowed"
       },
       ":is(:focus-within, :hover):not(:disabled)": {
-        color: "accent",
-        outlineColor: "transparent"
+        color: "onHighlight",
+        backgroundColor: "highlight",
+        border: "highlight",
+        borderColor: "highlight"
       }
     }
   },
@@ -507,6 +528,7 @@ var BruttalTheme = {
     label: {
       color: "text",
       fontFamily: "body",
+      alignItems: "center",
       '&:is([aria-disabled="true"])': {
         color: "onMuted"
       },
@@ -533,9 +555,15 @@ var BruttalTheme = {
       },
       'input[aria-invalid="true"] ~ &': {
         color: "danger"
+      },
+      "input:focus ~ &": {
+        bg: "transparent"
       }
     },
     checkbox: {
+      "input:focus ~ &": {
+        bg: "transparent"
+      },
       "input:not(:checked) ~ &": {
         color: "primary"
       },
@@ -566,8 +594,8 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
-        borderColor: "onMuted",
-        border: "muted"
+        border: "muted",
+        borderColor: "onMuted"
       },
       "&.error": {
         borderColor: "danger"
@@ -585,8 +613,8 @@ var BruttalTheme = {
       paddingY: "lg",
       paddingX: "xl",
       ":disabled": {
-        borderColor: "onMuted",
         border: "muted",
+        borderColor: "onMuted",
         color: "muted"
       },
       ":disabled ~ span > iconify-icon": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.4.23",
+  "version": "1.4.25",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -59,5 +59,5 @@
       ]
     }
   },
-  "gitHead": "b40f78fe1adc22d91e947b4d4453d0e51669a358"
+  "gitHead": "a07424c53959642b5b1aedd07994091e79d63ecc"
 }

package/src/themes/Bruttal/BruttalIcons.ts

@@ -17,6 +17,7 @@ import chevronUpIcon from '@iconify/icons-carbon/chevron-up';
 import closeFilledIcon from '@iconify/icons-carbon/close-filled';
 import closeIcon from '@iconify/icons-carbon/close';
 import copyIcon from '@iconify/icons-carbon/copy';
+import editIcon from '@iconify/icons-carbon/edit';
 import errorFilledIcon from '@iconify/icons-carbon/error-filled';
 import informationFilledIcon from '@iconify/icons-carbon/information-filled';
 import loadingIcon from '@iconify/icons-eos-icons/loading';
@@ -66,6 +67,7 @@ addIcon('check', checkMarkIcon);
 addIcon('check-mark', checkMarkOutlineIcon);
 addIcon('close', closeIcon);
 addIcon('copy', copyIcon);
+addIcon('edit', editIcon);
 addIcon('delete', trashCanIcon);
 addIcon('error', errorFilledIcon);
 addIcon('info', informationFilledIcon);

package/src/themes/Bruttal/BruttalTheme.ts

@@ -2,6 +2,7 @@ import { Theme } from 'theme-ui';
 import { fontSizes } from '../../tokens/fontSizes';
 import { fontWeights } from '../../tokens/fontWeights';
 import { letterSpacings } from '../../tokens/letterSpacings';
+import { lineHeights } from '../../tokens/lineHeights';
 import { space } from '../../tokens/space';
 
 const coreFonts = {
@@ -69,6 +70,7 @@ export const BruttalTheme: Theme = {
   fontWeights,
   letterSpacings,
   space,
+  lineHeights,
   colors: {
     background: coreColors.white,
     text: coreColors.black,
@@ -106,13 +108,15 @@ export const BruttalTheme: Theme = {
     h6: coreFonts.contrast,
     body: coreFonts.main,
     highlight: coreFonts.main,
-    caption: coreFonts.monospace,
+    caption: coreFonts.main,
   },
   borders: {
-    default: coreBorders.medium,
+    default: coreBorders.thin,
+    secondary: coreBorders.medium,
     muted: coreBorders.thin,
     interaction: coreBorders.medium,
     danger: coreBorders.medium,
+    highlight: coreBorders.medium,
   },
   radii: {
     informative: coreRadii.xs,
@@ -150,6 +154,7 @@ export const BruttalTheme: Theme = {
       bg: 'positive',
       fontFamily: 'caption',
       fontWeight: 'normal',
+      lineHeight: 'base',
       fontSize: 'xs',
       paddingX: 'xs',
       paddingY: '2xs',
@@ -160,6 +165,7 @@ export const BruttalTheme: Theme = {
       bg: 'danger',
       fontFamily: 'caption',
       fontWeight: 'normal',
+      lineHeight: 'base',
       fontSize: 'xs',
       paddingX: 'xs',
       paddingY: '2xs',
@@ -171,6 +177,7 @@ export const BruttalTheme: Theme = {
       fontFamily: 'caption',
       fontSize: 'xs',
       fontWeight: 'normal',
+      lineHeight: 'base',
       paddingX: 'xs',
       paddingY: '2xs',
       borderRadius: 'informative',
@@ -182,6 +189,7 @@ export const BruttalTheme: Theme = {
       bg: 'notice',
       fontFamily: 'caption',
       fontWeight: 'normal',
+      lineHeight: 'base',
       fontSize: 'xs',
       paddingX: 'xs',
       paddingY: '2xs',
@@ -195,14 +203,13 @@ export const BruttalTheme: Theme = {
       borderRadius: 'action',
       borderColor: 'accent',
       ':hover:not(:active,[disabled])': {
-        backgroundColor: 'highlight',
-        color: 'onHighlight',
-        borderColor: 'highlight',
+        filter: 'brightness(90%)',
       },
       ':disabled': {
         cursor: 'default',
         backgroundColor: 'muted',
         borderColor: 'muted',
+        color: 'onMuted',
       },
     },
     primary: {
@@ -211,9 +218,7 @@ export const BruttalTheme: Theme = {
       borderRadius: 'action',
       borderColor: 'primary',
       ':hover:not(:active,[disabled])': {
-        backgroundColor: 'highlight',
-        color: 'onHighlight',
-        borderColor: 'highlight',
+        filter: 'brightness(90%)',
       },
       ':active': {
         backgroundColor: 'primary',
@@ -224,58 +229,62 @@ export const BruttalTheme: Theme = {
         cursor: 'default',
         backgroundColor: 'muted',
         borderColor: 'muted',
+        color: 'onMuted',
       },
     },
     secondary: {
       backgroundColor: 'secondary',
       color: 'onSecondary',
       borderRadius: 'action',
-      borderColor: 'secondary',
+      border: 'secondary',
+      borderColor: 'onSecondary',
       ':hover:not(:active,[disabled])': {
-        backgroundColor: 'highlight',
-        color: 'onHighlight',
-        borderColor: 'highlight',
+        filter: 'brightness(90%)',
       },
       ':disabled': {
         cursor: 'default',
         backgroundColor: 'muted',
         borderColor: 'muted',
+        color: 'onMuted',
       },
     },
-    neutral: {
-      backgroundColor: 'muted',
-      color: 'onMuted',
-      borderRadius: 'action',
-      borderColor: 'muted',
+    destructive: {
+      color: 'onDanger',
+      backgroundColor: 'danger',
       ':hover:not(:active,[disabled])': {
-        backgroundColor: 'highlight',
-        color: 'onHighlight',
-        borderColor: 'highlight',
+        filter: 'brightness(90%)',
       },
       ':disabled': {
         cursor: 'default',
         backgroundColor: 'muted',
         borderColor: 'muted',
+        color: 'onMuted',
       },
     },
-    danger: {
-      color: 'onDanger',
-      backgroundColor: 'danger',
-    },
     closeButton: {
-      backgroundColor: 'transparent',
-      color: 'text',
+      backgroundColor: 'background',
+      fontFamily: 'caption',
+      color: 'primary',
       fontSize: 'xs',
       display: 'inline-flex',
       alignItems: 'center',
       cursor: 'pointer',
+      gap: 'sm',
+      padding: 'sm',
+      border: 'default',
+      borderColor: 'primary',
+      width: 'fit-content',
       ':disabled': {
-        color: 'muted',
+        border: 'muted',
+        backgroundColor: 'muted',
+        color: 'onMuted',
         cursor: 'not-allowed',
       },
       ':is(:focus-within, :hover):not(:disabled)': {
-        color: 'accent',
-        outlineColor: 'transparent',
+        color: 'onHighlight',
+        backgroundColor: 'highlight',
+        border: 'highlight',
+        borderColor: 'highlight',
       },
     },
   },
@@ -294,6 +303,7 @@ export const BruttalTheme: Theme = {
     label: {
       color: 'text',
       fontFamily: 'body',
+      alignItems: 'center',
       '&:is([aria-disabled="true"])': {
         color: 'onMuted',
       },
@@ -321,8 +331,14 @@ export const BruttalTheme: Theme = {
       'input[aria-invalid="true"] ~ &': {
         color: 'danger',
       },
+      'input:focus ~ &': {
+        bg: 'transparent',
+      },
     },
     checkbox: {
+      'input:focus ~ &': {
+        bg: 'transparent',
+      },
       'input:not(:checked) ~ &': {
         color: 'primary',
       },
@@ -353,8 +369,8 @@ export const BruttalTheme: Theme = {
       },
       ':disabled': {
         backgroundColor: 'muted',
-        borderColor: 'onMuted',
         border: 'muted',
+        borderColor: 'onMuted',
       },
       '&.error': {
         borderColor: 'danger',
@@ -372,8 +388,8 @@ export const BruttalTheme: Theme = {
       paddingY: 'lg',
       paddingX: 'xl',
       ':disabled': {
-        borderColor: 'onMuted',
         border: 'muted',
+        borderColor: 'onMuted',
         color: 'muted',
       },
       ':disabled ~ span > iconify-icon': {

package/src/tokens/lineHeights.ts

@@ -0,0 +1,9 @@
+export const lineHeights = {
+  '2xs': '0.422',
+  xs: '0.562',
+  sm: 'calc(1 / 1.333)',
+  base: 'normal',
+  lg: 'calc(1 * 1.333)',
+  xl: '1.776',
+  '2xl': '2.368',
+};