@ttoss/theme 1.4.22 → 1.4.24

package/dist/themes/Bruttal/Bruttal.js

@@ -7,6 +7,11 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = {
+    exports: {}
+  }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
     get: all[name],
@@ -35,6 +40,32 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 
+// ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/loading.js
+var require_loading = __commonJS({
+  "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/loading.js"(exports) {
+    var data = {
+      "width": 24,
+      "height": 24,
+      "body": '<path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity=".5"/><path fill="currentColor" d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"><animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate"/></path>'
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
+// ../../node_modules/.pnpm/@iconify+icons-mdi@1.2.44/node_modules/@iconify/icons-mdi/success-circle.js
+var require_success_circle = __commonJS({
+  "../../node_modules/.pnpm/@iconify+icons-mdi@1.2.44/node_modules/@iconify/icons-mdi/success-circle.js"(exports) {
+    var data = {
+      "width": 24,
+      "height": 24,
+      "body": '<path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/>'
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/themes/Bruttal/Bruttal.ts
 var Bruttal_exports = {};
 __export(Bruttal_exports, {
@@ -46,7 +77,13 @@ module.exports = __toCommonJS(Bruttal_exports);
 // src/themes/Bruttal/BruttalIcons.ts
 var import_react = require("@iconify-icon/react");
 var import_add_filled = __toESM(require("@iconify/icons-carbon/add-filled"));
+var import_arrow_right = __toESM(require("@iconify/icons-carbon/arrow-right"));
+var import_attachment = __toESM(require("@iconify/icons-carbon/attachment"));
 var import_calendar = __toESM(require("@iconify/icons-carbon/calendar"));
+var import_caret_down = __toESM(require("@iconify/icons-carbon/caret-down"));
+var import_caret_up = __toESM(require("@iconify/icons-carbon/caret-up"));
+var import_checkmark = __toESM(require("@iconify/icons-carbon/checkmark"));
+var import_checkmark_outline = __toESM(require("@iconify/icons-carbon/checkmark-outline"));
 var import_checkbox_checked_filled = __toESM(require("@iconify/icons-carbon/checkbox-checked-filled"));
 var import_checkbox = __toESM(require("@iconify/icons-carbon/checkbox"));
 var import_checkbox_indeterminate_filled = __toESM(require("@iconify/icons-carbon/checkbox-indeterminate-filled"));
@@ -59,12 +96,15 @@ var import_close = __toESM(require("@iconify/icons-carbon/close"));
 var import_copy = __toESM(require("@iconify/icons-carbon/copy"));
 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());
 var import_paste = __toESM(require("@iconify/icons-carbon/paste"));
 var import_radio_button_checked = __toESM(require("@iconify/icons-carbon/radio-button-checked"));
 var import_radio_button = __toESM(require("@iconify/icons-carbon/radio-button"));
 var import_renew = __toESM(require("@iconify/icons-carbon/renew"));
+var import_success_circle = __toESM(require_success_circle());
 var import_time = __toESM(require("@iconify/icons-carbon/time"));
 var import_trash_can = __toESM(require("@iconify/icons-carbon/trash-can"));
+var import_upload = __toESM(require("@iconify/icons-carbon/upload"));
 var import_user_avatar_filled_alt = __toESM(require("@iconify/icons-carbon/user-avatar-filled-alt"));
 var import_view_filled = __toESM(require("@iconify/icons-carbon/view-filled"));
 var import_view_off_filled = __toESM(require("@iconify/icons-carbon/view-off-filled"));
@@ -77,17 +117,32 @@ var replicateIcon = {
   width: 48,
   height: 48
 };
+var subtractIcon = {
+  body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 26H34V22H14V26ZM24 44C21.2333 44 18.6333 43.4747 16.2 42.424C13.7667 41.3733 11.65 39.9487 9.85 38.15C8.05 36.35 6.62533 34.2333 5.576 31.8C4.52667 29.3667 4.00133 26.7667 4 24C4 21.2333 4.52533 18.6333 5.576 16.2C6.62667 13.7667 8.05133 11.65 9.85 9.85C11.65 8.05 13.7667 6.62533 16.2 5.576C18.6333 4.52667 21.2333 4.00133 24 4C26.7667 4 29.3667 4.52533 31.8 5.576C34.2333 6.62667 36.35 8.05133 38.15 9.85C39.95 11.65 41.3753 13.7667 42.426 16.2C43.4767 18.6333 44.0013 21.2333 44 24C44 26.7667 43.4747 29.3667 42.424 31.8C41.3733 34.2333 39.9487 36.35 38.15 38.15C36.35 39.95 34.2333 41.3753 31.8 42.426C29.3667 43.4767 26.7667 44.0013 24 44Z" fill="black"/>
+  </svg>
+  `,
+  width: 48,
+  height: 48
+};
 (0, import_react.addIcon)("add", import_add_filled.default);
+(0, import_react.addIcon)("arrow-right", import_arrow_right.default);
+(0, import_react.addIcon)("attachment", import_attachment.default);
 (0, import_react.addIcon)("avatar", import_user_avatar_filled_alt.default);
+(0, import_react.addIcon)("caret-down", import_caret_down.default);
+(0, import_react.addIcon)("caret-up", import_caret_up.default);
 (0, import_react.addIcon)("calendar", import_calendar.default);
 (0, import_react.addIcon)("checkbox-checked", import_checkbox_checked_filled.default);
 (0, import_react.addIcon)("checkbox-indeterminate", import_checkbox_indeterminate_filled.default);
 (0, import_react.addIcon)("checkbox-unchecked", import_checkbox.default);
+(0, import_react.addIcon)("check", import_checkmark.default);
+(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)("delete", import_trash_can.default);
 (0, import_react.addIcon)("error", import_error_filled.default);
 (0, import_react.addIcon)("info", import_information_filled.default);
+(0, import_react.addIcon)("loading", import_loading.default);
 (0, import_react.addIcon)("paste", import_paste.default);
 (0, import_react.addIcon)("picker-down", import_chevron_down.default);
 (0, import_react.addIcon)("picker-up", import_chevron_up.default);
@@ -97,8 +152,11 @@ var replicateIcon = {
 (0, import_react.addIcon)("radio-selected", import_radio_button_checked.default);
 (0, import_react.addIcon)("refresh", import_renew.default);
 (0, import_react.addIcon)("replicate", replicateIcon);
+(0, import_react.addIcon)("subtract", subtractIcon);
+(0, import_react.addIcon)("success-circle", import_success_circle.default);
 (0, import_react.addIcon)("small-close", import_close_filled.default);
 (0, import_react.addIcon)("time", import_time.default);
+(0, import_react.addIcon)("upload", import_upload.default);
 (0, import_react.addIcon)("view-off", import_view_off_filled.default);
 (0, import_react.addIcon)("view-on", import_view_filled.default);
 (0, import_react.addIcon)("warning", import_warning_filled.default);
@@ -146,6 +204,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,
@@ -224,6 +293,7 @@ var BruttalTheme = {
   fontWeights,
   letterSpacings,
   space,
+  lineHeights,
   colors: {
     background: coreColors.white,
     text: coreColors.black,
@@ -261,13 +331,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,
@@ -305,6 +377,7 @@ var BruttalTheme = {
       bg: "positive",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -315,6 +388,7 @@ var BruttalTheme = {
       bg: "danger",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -326,6 +400,7 @@ var BruttalTheme = {
       fontFamily: "caption",
       fontSize: "xs",
       fontWeight: "normal",
+      lineHeight: "base",
       paddingX: "xs",
       paddingY: "2xs",
       borderRadius: "informative",
@@ -337,6 +412,7 @@ var BruttalTheme = {
       bg: "notice",
       fontFamily: "caption",
       fontWeight: "normal",
+      lineHeight: "base",
       fontSize: "xs",
       paddingX: "xs",
       paddingY: "2xs",
@@ -350,14 +426,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: {
@@ -366,9 +441,7 @@ var BruttalTheme = {
       borderRadius: "action",
       borderColor: "primary",
       ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
+        filter: "brightness(90%)"
       },
       ":active": {
         backgroundColor: "primary",
@@ -378,59 +451,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"
       }
     }
   },
@@ -449,6 +526,7 @@ var BruttalTheme = {
     label: {
       color: "text",
       fontFamily: "body",
+      alignItems: "center",
       '&:is([aria-disabled="true"])': {
         color: "onMuted"
       },
@@ -475,9 +553,15 @@ var BruttalTheme = {
       },
       'input[aria-invalid="true"] ~ &': {
         color: "danger"
+      },
+      "input:focus ~ &": {
+        bg: "transparent"
       }
     },
     checkbox: {
+      "input:focus ~ &": {
+        bg: "transparent"
+      },
       "input:not(:checked) ~ &": {
         color: "primary"
       },
@@ -508,8 +592,8 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
-        borderColor: "onMuted",
-        border: "muted"
+        border: "muted",
+        borderColor: "onMuted"
       },
       "&.error": {
         borderColor: "danger"
@@ -527,8 +611,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.22",
+  "version": "1.4.24",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -36,6 +36,8 @@
     "deepmerge": "^4.3.1"
   },
   "devDependencies": {
+    "@iconify/icons-eos-icons": "^1.2.6",
+    "@iconify/icons-mdi": "^1.2.44",
     "@iconify/types": "^2.0.0",
     "@ttoss/config": "^1.29.5",
     "@ttoss/test-utils": "^1.21.5",
@@ -57,5 +59,5 @@
       ]
     }
   },
-  "gitHead": "f30779a5ea50d60cf3099e5fde712e1ef7b7882c"
+  "gitHead": "b473ec0322fbe1a459d81339aab3de60d6bebc9a"
 }

package/src/themes/Bruttal/BruttalIcons.ts

@@ -1,6 +1,12 @@
 import { addIcon } from '@iconify-icon/react';
 import addFilledIcon from '@iconify/icons-carbon/add-filled';
+import arrowRightIcon from '@iconify/icons-carbon/arrow-right';
+import attachmentIcon from '@iconify/icons-carbon/attachment';
 import calendarIcon from '@iconify/icons-carbon/calendar';
+import caretDownIcon from '@iconify/icons-carbon/caret-down';
+import caretUpIcon from '@iconify/icons-carbon/caret-up';
+import checkMarkIcon from '@iconify/icons-carbon/checkmark';
+import checkMarkOutlineIcon from '@iconify/icons-carbon/checkmark-outline';
 import checkboxCheckedFilled from '@iconify/icons-carbon/checkbox-checked-filled';
 import checkboxIcon from '@iconify/icons-carbon/checkbox';
 import checkboxIndeterminateFilledIcon from '@iconify/icons-carbon/checkbox-indeterminate-filled';
@@ -13,12 +19,15 @@ import closeIcon from '@iconify/icons-carbon/close';
 import copyIcon from '@iconify/icons-carbon/copy';
 import errorFilledIcon from '@iconify/icons-carbon/error-filled';
 import informationFilledIcon from '@iconify/icons-carbon/information-filled';
+import loadingIcon from '@iconify/icons-eos-icons/loading';
 import pasteIcon from '@iconify/icons-carbon/paste';
 import radioButtonCheckedIcon from '@iconify/icons-carbon/radio-button-checked';
 import radioButtonIcon from '@iconify/icons-carbon/radio-button';
 import renewIcon from '@iconify/icons-carbon/renew';
+import successCircleIcon from '@iconify/icons-mdi/success-circle';
 import timeIcon from '@iconify/icons-carbon/time';
 import trashCanIcon from '@iconify/icons-carbon/trash-can';
+import uploadIcon from '@iconify/icons-carbon/upload';
 import userAvatarFilledAltIcon from '@iconify/icons-carbon/user-avatar-filled-alt';
 import viewFilledIcon from '@iconify/icons-carbon/view-filled';
 import viewOffFilledIcon from '@iconify/icons-carbon/view-off-filled';
@@ -34,17 +43,33 @@ const replicateIcon: IconifyIcon = {
   height: 48,
 };
 
+const subtractIcon: IconifyIcon = {
+  body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 26H34V22H14V26ZM24 44C21.2333 44 18.6333 43.4747 16.2 42.424C13.7667 41.3733 11.65 39.9487 9.85 38.15C8.05 36.35 6.62533 34.2333 5.576 31.8C4.52667 29.3667 4.00133 26.7667 4 24C4 21.2333 4.52533 18.6333 5.576 16.2C6.62667 13.7667 8.05133 11.65 9.85 9.85C11.65 8.05 13.7667 6.62533 16.2 5.576C18.6333 4.52667 21.2333 4.00133 24 4C26.7667 4 29.3667 4.52533 31.8 5.576C34.2333 6.62667 36.35 8.05133 38.15 9.85C39.95 11.65 41.3753 13.7667 42.426 16.2C43.4767 18.6333 44.0013 21.2333 44 24C44 26.7667 43.4747 29.3667 42.424 31.8C41.3733 34.2333 39.9487 36.35 38.15 38.15C36.35 39.95 34.2333 41.3753 31.8 42.426C29.3667 43.4767 26.7667 44.0013 24 44Z" fill="black"/>
+  </svg>
+  `,
+  width: 48,
+  height: 48,
+};
+
 addIcon('add', addFilledIcon);
+addIcon('arrow-right', arrowRightIcon);
+addIcon('attachment', attachmentIcon);
 addIcon('avatar', userAvatarFilledAltIcon);
+addIcon('caret-down', caretDownIcon);
+addIcon('caret-up', caretUpIcon);
 addIcon('calendar', calendarIcon);
 addIcon('checkbox-checked', checkboxCheckedFilled);
 addIcon('checkbox-indeterminate', checkboxIndeterminateFilledIcon);
 addIcon('checkbox-unchecked', checkboxIcon);
+addIcon('check', checkMarkIcon);
+addIcon('check-mark', checkMarkOutlineIcon);
 addIcon('close', closeIcon);
 addIcon('copy', copyIcon);
 addIcon('delete', trashCanIcon);
 addIcon('error', errorFilledIcon);
 addIcon('info', informationFilledIcon);
+addIcon('loading', loadingIcon);
 addIcon('paste', pasteIcon);
 addIcon('picker-down', chevronDownIcon);
 addIcon('picker-up', chevronUpIcon);
@@ -54,8 +79,11 @@ addIcon('radio-not-selected', radioButtonIcon);
 addIcon('radio-selected', radioButtonCheckedIcon);
 addIcon('refresh', renewIcon);
 addIcon('replicate', replicateIcon);
+addIcon('subtract', subtractIcon);
+addIcon('success-circle', successCircleIcon);
 addIcon('small-close', closeFilledIcon);
 addIcon('time', timeIcon);
+addIcon('upload', uploadIcon);
 addIcon('view-off', viewOffFilledIcon);
 addIcon('view-on', viewFilledIcon);
 addIcon('warning', warningFilledIcon);

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',
+};