@ttoss/theme 1.4.36 → 1.4.38

package/dist/esm/{chunk-34FGL5GX.js → chunk-WAU2QT6N.js}

@@ -164,7 +164,7 @@ 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";
@@ -396,6 +396,7 @@ var BruttalTheme = {
       color: "text",
       fontFamily: "body",
       textDecorationLine: "underline",
+      lineHeight: "base",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
@@ -410,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: {
@@ -520,6 +516,31 @@ var BruttalTheme = {
         border: "highlight",
         borderColor: "highlight"
       }
+    },
+    actionButton: {
+      default: {
+        backgroundColor: "secondary",
+        color: "onSecondary",
+        border: "default",
+        borderColor: "onSecondary",
+        transition: "all 0.2s",
+        ":is(:focus-within, :hover)": {
+          backgroundColor: "highlight",
+          borderColor: "highlight",
+          color: "onHighlight"
+        }
+      },
+      accent: {
+        backgroundColor: "accent",
+        color: "onAccent",
+        border: "none"
+      },
+      quiet: {
+        backgroundColor: "transparent",
+        color: "text",
+        border: "none",
+        borderColor: "transparent"
+      }
     }
   },
   cards: {
@@ -543,12 +564,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 +626,8 @@ var BruttalTheme = {
       borderColor: "onMuted",
       borderRadius: "action",
       backgroundColor: "surface",
+      fontSize: "base",
+      lineHeight: "base",
       "::placeholder": {
         color: "onMuted"
       },
@@ -616,7 +643,7 @@ var BruttalTheme = {
       '&[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-34FGL5GX.js";
+import { BruttalTheme } from "./chunk-WAU2QT6N.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-34FGL5GX.js";
+import { BruttalFonts, BruttalTheme } from "../../chunk-WAU2QT6N.js";
 export { BruttalFonts, BruttalTheme };

package/dist/index.js

@@ -411,6 +411,7 @@ var BruttalTheme = {
       color: "text",
       fontFamily: "body",
       textDecorationLine: "underline",
+      lineHeight: "base",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
@@ -425,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: {
@@ -535,6 +531,31 @@ var BruttalTheme = {
         border: "highlight",
         borderColor: "highlight"
       }
+    },
+    actionButton: {
+      default: {
+        backgroundColor: "secondary",
+        color: "onSecondary",
+        border: "default",
+        borderColor: "onSecondary",
+        transition: "all 0.2s",
+        ":is(:focus-within, :hover)": {
+          backgroundColor: "highlight",
+          borderColor: "highlight",
+          color: "onHighlight"
+        }
+      },
+      accent: {
+        backgroundColor: "accent",
+        color: "onAccent",
+        border: "none"
+      },
+      quiet: {
+        backgroundColor: "transparent",
+        color: "text",
+        border: "none",
+        borderColor: "transparent"
+      }
     }
   },
   cards: {
@@ -558,12 +579,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"
       },
@@ -616,6 +641,8 @@ var BruttalTheme = {
       borderColor: "onMuted",
       borderRadius: "action",
       backgroundColor: "surface",
+      fontSize: "base",
+      lineHeight: "base",
       "::placeholder": {
         color: "onMuted"
       },
@@ -631,7 +658,7 @@ var BruttalTheme = {
       '&[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

@@ -183,7 +183,7 @@ var subtractIcon = {
 (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";
@@ -415,6 +415,7 @@ var BruttalTheme = {
       color: "text",
       fontFamily: "body",
       textDecorationLine: "underline",
+      lineHeight: "base",
       "&.quiet:not(:hover)": {
         textDecorationLine: "none"
       },
@@ -429,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: {
@@ -539,6 +535,31 @@ var BruttalTheme = {
         border: "highlight",
         borderColor: "highlight"
       }
+    },
+    actionButton: {
+      default: {
+        backgroundColor: "secondary",
+        color: "onSecondary",
+        border: "default",
+        borderColor: "onSecondary",
+        transition: "all 0.2s",
+        ":is(:focus-within, :hover)": {
+          backgroundColor: "highlight",
+          borderColor: "highlight",
+          color: "onHighlight"
+        }
+      },
+      accent: {
+        backgroundColor: "accent",
+        color: "onAccent",
+        border: "none"
+      },
+      quiet: {
+        backgroundColor: "transparent",
+        color: "text",
+        border: "none",
+        borderColor: "transparent"
+      }
     }
   },
   cards: {
@@ -562,12 +583,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"
       },
@@ -620,6 +645,8 @@ var BruttalTheme = {
       borderColor: "onMuted",
       borderRadius: "action",
       backgroundColor: "surface",
+      fontSize: "base",
+      lineHeight: "base",
       "::placeholder": {
         color: "onMuted"
       },
@@ -635,7 +662,7 @@ var BruttalTheme = {
       '&[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.36",
+  "version": "1.4.38",
   "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/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: {
@@ -282,6 +278,31 @@ export const BruttalTheme: Theme = {
         borderColor: 'highlight',
       },
     },
+    actionButton: {
+      default: {
+        backgroundColor: 'secondary',
+        color: 'onSecondary',
+        border: 'default',
+        borderColor: 'onSecondary',
+        transition: 'all 0.2s',
+        ':is(:focus-within, :hover)': {
+          backgroundColor: 'highlight',
+          borderColor: 'highlight',
+          color: 'onHighlight',
+        },
+      },
+      accent: {
+        backgroundColor: 'accent',
+        color: 'onAccent',
+        border: 'none',
+      },
+      quiet: {
+        backgroundColor: 'transparent',
+        color: 'text',
+        border: 'none',
+        borderColor: 'transparent',
+      },
+    },
   },
   cards: {
     primary: {
@@ -304,12 +325,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',
       },
@@ -362,6 +387,8 @@ export const BruttalTheme: Theme = {
       borderColor: 'onMuted',
       borderRadius: 'action',
       backgroundColor: 'surface',
+      fontSize: 'base',
+      lineHeight: 'base',
       '::placeholder': {
         color: 'onMuted',
       },
@@ -377,7 +404,7 @@ export const BruttalTheme: Theme = {
       '&[aria-invalid="true"]': {
         borderColor: 'danger',
       },
-      '&[aria-invalid="true"]+span>iconify-icon': {
+      '&[aria-invalid="true"] ~ span:has(iconify-icon)': {
         color: 'danger',
       },
     },