@ttoss/theme 1.4.35 → 1.4.37

package/dist/esm/{chunk-MT6XFJ5D.js → chunk-22ME5GR5.js}

@@ -55,9 +55,23 @@ var require_success_circle = __commonJS({
   }
 });
 
+// ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js
+var require_three_dots_loading = __commonJS({
+  "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js"(exports) {
+    var data = {
+      "width": 24,
+      "height": 24,
+      "body": '<circle cx="18" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="6" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle>'
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/themes/Bruttal/BruttalIcons.ts
 var import_loading = __toESM(require_loading());
 var import_success_circle = __toESM(require_success_circle());
+var import_three_dots_loading = __toESM(require_three_dots_loading());
 import { addIcon } from "@iconify-icon/react";
 import addFilledIcon from "@iconify/icons-carbon/add-filled";
 import arrowRightIcon from "@iconify/icons-carbon/arrow-right";
@@ -91,6 +105,7 @@ 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";
+import warningAltIcon from "@iconify/icons-carbon/warning-alt";
 import warningFilledIcon from "@iconify/icons-carbon/warning-filled";
 var replicateIcon = {
   body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -140,14 +155,16 @@ addIcon("replicate", replicateIcon);
 addIcon("subtract", subtractIcon);
 addIcon("success-circle", import_success_circle.default);
 addIcon("small-close", closeFilledIcon);
+addIcon("three-dots-loading", import_three_dots_loading.default);
 addIcon("time", timeIcon);
 addIcon("upload", uploadIcon);
 addIcon("view-off", viewOffFilledIcon);
 addIcon("view-on", viewFilledIcon);
 addIcon("warning", warningFilledIcon);
+addIcon("warning-alt", warningAltIcon);
 
 // 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@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
+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/helpers/geometricCalc.ts
 var SIZE_TYPE = "rem";
@@ -205,7 +222,7 @@ var lineHeights = {
   "2xs": "0.422",
   xs: "0.562",
   sm: "calc(1 / 1.333)",
-  base: "normal",
+  base: "1",
   lg: "calc(1 * 1.333)",
   xl: "1.776",
   "2xl": "2.368"
@@ -379,6 +396,7 @@ var BruttalTheme = {
       color: "text",
       fontFamily: "body",
       textDecorationLine: "underline",
+      lineHeight: "base",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
@@ -393,30 +411,25 @@ var BruttalTheme = {
   badges: {
     positive: {
       color: "onPositive",
-      bg: "positive",
-      borderRadius: "informative"
+      bg: "positive"
     },
     negative: {
       color: "onDanger",
-      bg: "danger",
-      borderRadius: "informative"
+      bg: "danger"
     },
     neutral: {
       color: "onSecondary",
       bg: "secondary",
-      borderRadius: "informative",
       border: "muted",
       borderColor: "onMuted"
     },
     informative: {
       color: "onNotice",
-      bg: "notice",
-      borderRadius: "informative"
+      bg: "notice"
     },
     muted: {
       color: "onMuted",
-      bg: "muted",
-      borderRadius: "xs"
+      bg: "muted"
     }
   },
   buttons: {
@@ -489,8 +502,10 @@ var BruttalTheme = {
       color: "primary",
       border: "default",
       borderColor: "primary",
+      borderRadius: "action",
       ":disabled": {
         border: "muted",
+        borderColor: "onMuted",
         backgroundColor: "muted",
         color: "onMuted",
         cursor: "not-allowed"
@@ -524,12 +539,16 @@ var BruttalTheme = {
         fontSize: "sm",
         marginLeft: "2xs"
       },
+      '&:has(input[type="checkbox"])': {
+        fontSize: "base",
+        gap: "md"
+      },
+      '& > div:has(input[type="checkbox"]) > svg': {
+        marginRight: 0
+      },
       '&:has(input[type="checkbox"]:disabled)': {
         color: "onMuted"
       },
-      "&:has(+div>:is(input, select, textarea))": {
-        marginBottom: "md"
-      },
       '&:has(div > input[type="radio"])': {
         alignItems: "center"
       },
@@ -582,6 +601,8 @@ var BruttalTheme = {
       borderColor: "onMuted",
       borderRadius: "action",
       backgroundColor: "surface",
+      fontSize: "base",
+      lineHeight: "base",
       "::placeholder": {
         color: "onMuted"
       },
@@ -590,13 +611,14 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
+        color: "onMuted",
         border: "muted",
         borderColor: "onMuted"
       },
       '&[aria-invalid="true"]': {
         borderColor: "danger"
       },
-      '&[aria-invalid="true"]+span>iconify-icon': {
+      '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
         color: "danger"
       }
     },

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { BruttalTheme } from "./chunk-MT6XFJ5D.js";
+import { BruttalTheme } from "./chunk-22ME5GR5.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-MT6XFJ5D.js";
+import { BruttalFonts, BruttalTheme } from "../../chunk-22ME5GR5.js";
 export { BruttalFonts, BruttalTheme };

package/dist/index.js

@@ -66,6 +66,19 @@ var require_success_circle = __commonJS({
   }
 });
 
+// ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js
+var require_three_dots_loading = __commonJS({
+  "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js"(exports) {
+    var data = {
+      "width": 24,
+      "height": 24,
+      "body": '<circle cx="18" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="6" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle>'
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
@@ -103,12 +116,14 @@ var import_radio_button_checked = __toESM(require("@iconify/icons-carbon/radio-b
 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_three_dots_loading = __toESM(require_three_dots_loading());
 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"));
+var import_warning_alt = __toESM(require("@iconify/icons-carbon/warning-alt"));
 var import_warning_filled = __toESM(require("@iconify/icons-carbon/warning-filled"));
 var replicateIcon = {
   body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -158,11 +173,13 @@ var subtractIcon = {
 (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)("three-dots-loading", import_three_dots_loading.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);
+(0, import_react.addIcon)("warning-alt", import_warning_alt.default);
 
 // src/helpers/geometricCalc.ts
 var SIZE_TYPE = "rem";
@@ -220,7 +237,7 @@ var lineHeights = {
   "2xs": "0.422",
   xs: "0.562",
   sm: "calc(1 / 1.333)",
-  base: "normal",
+  base: "1",
   lg: "calc(1 * 1.333)",
   xl: "1.776",
   "2xl": "2.368"
@@ -394,6 +411,7 @@ var BruttalTheme = {
       color: "text",
       fontFamily: "body",
       textDecorationLine: "underline",
+      lineHeight: "base",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
@@ -408,30 +426,25 @@ var BruttalTheme = {
   badges: {
     positive: {
       color: "onPositive",
-      bg: "positive",
-      borderRadius: "informative"
+      bg: "positive"
     },
     negative: {
       color: "onDanger",
-      bg: "danger",
-      borderRadius: "informative"
+      bg: "danger"
     },
     neutral: {
       color: "onSecondary",
       bg: "secondary",
-      borderRadius: "informative",
       border: "muted",
       borderColor: "onMuted"
     },
     informative: {
       color: "onNotice",
-      bg: "notice",
-      borderRadius: "informative"
+      bg: "notice"
     },
     muted: {
       color: "onMuted",
-      bg: "muted",
-      borderRadius: "xs"
+      bg: "muted"
     }
   },
   buttons: {
@@ -504,8 +517,10 @@ var BruttalTheme = {
       color: "primary",
       border: "default",
       borderColor: "primary",
+      borderRadius: "action",
       ":disabled": {
         border: "muted",
+        borderColor: "onMuted",
         backgroundColor: "muted",
         color: "onMuted",
         cursor: "not-allowed"
@@ -539,12 +554,16 @@ var BruttalTheme = {
         fontSize: "sm",
         marginLeft: "2xs"
       },
+      '&:has(input[type="checkbox"])': {
+        fontSize: "base",
+        gap: "md"
+      },
+      '& > div:has(input[type="checkbox"]) > svg': {
+        marginRight: 0
+      },
       '&:has(input[type="checkbox"]:disabled)': {
         color: "onMuted"
       },
-      "&:has(+div>:is(input, select, textarea))": {
-        marginBottom: "md"
-      },
       '&:has(div > input[type="radio"])': {
         alignItems: "center"
       },
@@ -597,6 +616,8 @@ var BruttalTheme = {
       borderColor: "onMuted",
       borderRadius: "action",
       backgroundColor: "surface",
+      fontSize: "base",
+      lineHeight: "base",
       "::placeholder": {
         color: "onMuted"
       },
@@ -605,13 +626,14 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
+        color: "onMuted",
         border: "muted",
         borderColor: "onMuted"
       },
       '&[aria-invalid="true"]': {
         borderColor: "danger"
       },
-      '&[aria-invalid="true"]+span>iconify-icon': {
+      '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
         color: "danger"
       }
     },

package/dist/themes/Bruttal/Bruttal.js

@@ -66,6 +66,19 @@ var require_success_circle = __commonJS({
   }
 });
 
+// ../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js
+var require_three_dots_loading = __commonJS({
+  "../../node_modules/.pnpm/@iconify+icons-eos-icons@1.2.6/node_modules/@iconify/icons-eos-icons/three-dots-loading.js"(exports) {
+    var data = {
+      "width": 24,
+      "height": 24,
+      "body": '<circle cx="18" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".67" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin=".33" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="6" cy="12" r="0" fill="currentColor"><animate attributeName="r" begin="0" calcMode="spline" dur="1.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle>'
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/themes/Bruttal/Bruttal.ts
 var Bruttal_exports = {};
 __export(Bruttal_exports, {
@@ -104,12 +117,14 @@ var import_radio_button_checked = __toESM(require("@iconify/icons-carbon/radio-b
 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_three_dots_loading = __toESM(require_three_dots_loading());
 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"));
+var import_warning_alt = __toESM(require("@iconify/icons-carbon/warning-alt"));
 var import_warning_filled = __toESM(require("@iconify/icons-carbon/warning-filled"));
 var replicateIcon = {
   body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -159,14 +174,16 @@ var subtractIcon = {
 (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)("three-dots-loading", import_three_dots_loading.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);
+(0, import_react.addIcon)("warning-alt", import_warning_alt.default);
 
 // 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@100;200;300;400;500;700;800;900", "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"];
+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/helpers/geometricCalc.ts
 var SIZE_TYPE = "rem";
@@ -224,7 +241,7 @@ var lineHeights = {
   "2xs": "0.422",
   xs: "0.562",
   sm: "calc(1 / 1.333)",
-  base: "normal",
+  base: "1",
   lg: "calc(1 * 1.333)",
   xl: "1.776",
   "2xl": "2.368"
@@ -398,6 +415,7 @@ var BruttalTheme = {
       color: "text",
       fontFamily: "body",
       textDecorationLine: "underline",
+      lineHeight: "base",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
@@ -412,30 +430,25 @@ var BruttalTheme = {
   badges: {
     positive: {
       color: "onPositive",
-      bg: "positive",
-      borderRadius: "informative"
+      bg: "positive"
     },
     negative: {
       color: "onDanger",
-      bg: "danger",
-      borderRadius: "informative"
+      bg: "danger"
     },
     neutral: {
       color: "onSecondary",
       bg: "secondary",
-      borderRadius: "informative",
       border: "muted",
       borderColor: "onMuted"
     },
     informative: {
       color: "onNotice",
-      bg: "notice",
-      borderRadius: "informative"
+      bg: "notice"
     },
     muted: {
       color: "onMuted",
-      bg: "muted",
-      borderRadius: "xs"
+      bg: "muted"
     }
   },
   buttons: {
@@ -508,8 +521,10 @@ var BruttalTheme = {
       color: "primary",
       border: "default",
       borderColor: "primary",
+      borderRadius: "action",
       ":disabled": {
         border: "muted",
+        borderColor: "onMuted",
         backgroundColor: "muted",
         color: "onMuted",
         cursor: "not-allowed"
@@ -543,12 +558,16 @@ var BruttalTheme = {
         fontSize: "sm",
         marginLeft: "2xs"
       },
+      '&:has(input[type="checkbox"])': {
+        fontSize: "base",
+        gap: "md"
+      },
+      '& > div:has(input[type="checkbox"]) > svg': {
+        marginRight: 0
+      },
       '&:has(input[type="checkbox"]:disabled)': {
         color: "onMuted"
       },
-      "&:has(+div>:is(input, select, textarea))": {
-        marginBottom: "md"
-      },
       '&:has(div > input[type="radio"])': {
         alignItems: "center"
       },
@@ -601,6 +620,8 @@ var BruttalTheme = {
       borderColor: "onMuted",
       borderRadius: "action",
       backgroundColor: "surface",
+      fontSize: "base",
+      lineHeight: "base",
       "::placeholder": {
         color: "onMuted"
       },
@@ -609,13 +630,14 @@ var BruttalTheme = {
       },
       ":disabled": {
         backgroundColor: "muted",
+        color: "onMuted",
         border: "muted",
         borderColor: "onMuted"
       },
       '&[aria-invalid="true"]': {
         borderColor: "danger"
       },
-      '&[aria-invalid="true"]+span>iconify-icon': {
+      '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
         color: "danger"
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.4.35",
+  "version": "1.4.37",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",

package/src/themes/Bruttal/BruttalFonts.ts

@@ -1,5 +1,5 @@
 export const 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@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',
 ];

package/src/themes/Bruttal/BruttalIcons.ts

@@ -27,12 +27,14 @@ 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 threeDotsLoadingIcon from '@iconify/icons-eos-icons/three-dots-loading';
 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';
+import warningAltIcon from '@iconify/icons-carbon/warning-alt';
 import warningFilledIcon from '@iconify/icons-carbon/warning-filled';
 import type { IconifyIcon } from '@iconify/types';
 
@@ -86,8 +88,10 @@ addIcon('replicate', replicateIcon);
 addIcon('subtract', subtractIcon);
 addIcon('success-circle', successCircleIcon);
 addIcon('small-close', closeFilledIcon);
+addIcon('three-dots-loading', threeDotsLoadingIcon);
 addIcon('time', timeIcon);
 addIcon('upload', uploadIcon);
 addIcon('view-off', viewOffFilledIcon);
 addIcon('view-on', viewFilledIcon);
 addIcon('warning', warningFilledIcon);
+addIcon('warning-alt', warningAltIcon);

package/src/themes/Bruttal/BruttalTheme.ts

@@ -157,6 +157,7 @@ export const BruttalTheme: Theme = {
       color: 'text',
       fontFamily: 'body',
       textDecorationLine: 'underline',
+      lineHeight: 'base',
       '&.quiet:not(:hover)': {
         textDecorationLine: 'none',
       },
@@ -172,29 +173,24 @@ export const BruttalTheme: Theme = {
     positive: {
       color: 'onPositive',
       bg: 'positive',
-      borderRadius: 'informative',
     },
     negative: {
       color: 'onDanger',
       bg: 'danger',
-      borderRadius: 'informative',
     },
     neutral: {
       color: 'onSecondary',
       bg: 'secondary',
-      borderRadius: 'informative',
       border: 'muted',
       borderColor: 'onMuted',
     },
     informative: {
       color: 'onNotice',
       bg: 'notice',
-      borderRadius: 'informative',
     },
     muted: {
       color: 'onMuted',
       bg: 'muted',
-      borderRadius: 'xs',
     },
   },
   buttons: {
@@ -267,8 +263,10 @@ export const BruttalTheme: Theme = {
       color: 'primary',
       border: 'default',
       borderColor: 'primary',
+      borderRadius: 'action',
       ':disabled': {
         border: 'muted',
+        borderColor: 'onMuted',
         backgroundColor: 'muted',
         color: 'onMuted',
         cursor: 'not-allowed',
@@ -302,12 +300,16 @@ export const BruttalTheme: Theme = {
         fontSize: 'sm',
         marginLeft: '2xs',
       },
+      '&:has(input[type="checkbox"])': {
+        fontSize: 'base',
+        gap: 'md',
+      },
+      '& > div:has(input[type="checkbox"]) > svg': {
+        marginRight: 0,
+      },
       '&:has(input[type="checkbox"]:disabled)': {
         color: 'onMuted',
       },
-      '&:has(+div>:is(input, select, textarea))': {
-        marginBottom: 'md',
-      },
       '&:has(div > input[type="radio"])': {
         alignItems: 'center',
       },
@@ -360,6 +362,8 @@ export const BruttalTheme: Theme = {
       borderColor: 'onMuted',
       borderRadius: 'action',
       backgroundColor: 'surface',
+      fontSize: 'base',
+      lineHeight: 'base',
       '::placeholder': {
         color: 'onMuted',
       },
@@ -368,13 +372,14 @@ export const BruttalTheme: Theme = {
       },
       ':disabled': {
         backgroundColor: 'muted',
+        color: 'onMuted',
         border: 'muted',
         borderColor: 'onMuted',
       },
       '&[aria-invalid="true"]': {
         borderColor: 'danger',
       },
-      '&[aria-invalid="true"]+span>iconify-icon': {
+      '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
         color: 'danger',
       },
     },

package/src/tokens/lineHeights.ts

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