@ttoss/theme 1.4.3 → 1.4.5

package/dist/esm/{chunk-VIAWD6II.js → chunk-3BHEF22W.js}

@@ -184,20 +184,22 @@ var BruttalTheme = {
     background: coreColors.white,
     text: coreColors.black,
     muted: coreColors.gray200,
-    onMuted: coreColors.gray500,
+    onMuted: coreColors.gray600,
     mutedOutline: coreColors.gray300,
     danger: coreColors.red700,
     onDanger: coreColors.white,
     notice: coreColors.amber600,
+    onNotice: coreColors.white,
     positive: coreColors.teal600,
+    onPositive: coreColors.white,
     surface: coreColors.white,
     contentHeader: coreColors.gray200,
     onContentHeader: coreColors.black,
     outline: coreColors.gray500,
     primary: coreColors.main,
     onPrimary: coreColors.white,
-    secondary: coreColors.gray500,
-    onSecondary: coreColors.complimentary,
+    secondary: coreColors.gray100,
+    onSecondary: coreColors.black,
     highlight: coreColors.darkNeutral,
     onHighlight: coreColors.complimentary,
     accent: coreColors.accent,
@@ -218,10 +220,13 @@ var BruttalTheme = {
     caption: coreFonts.monospace
   },
   borders: {
-    default: coreBorders.medium
+    default: coreBorders.medium,
+    muted: coreBorders.thin
   },
   radii: {
-    default: coreRadii.sm
+    informative: coreRadii.xs,
+    default: coreRadii.sm,
+    action: coreRadii.sm
   },
   /**
    * Global styles
@@ -239,22 +244,54 @@ var BruttalTheme = {
    * Components
    */
   badges: {
-    primary: {
-      color: "onPrimary",
-      bg: "primary",
-      fontSize: "sm",
-      paddingX: "sm",
-      borderRadius: "default"
+    positive: {
+      color: "onPositive",
+      bg: "positive",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
+    },
+    negative: {
+      color: "onDanger",
+      bg: "danger",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
+    },
+    neutral: {
+      color: "onSecondary",
+      bg: "secondary",
+      fontFamily: "caption",
+      fontSize: "xs",
+      fontWeight: "normal",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative",
+      border: "muted",
+      borderColor: "onMuted"
+    },
+    informative: {
+      color: "onNotice",
+      bg: "notice",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
     }
   },
   buttons: {
     accent: {
       backgroundColor: "accent",
       color: "onAccent",
-      fontFamily: "highlight",
-      fontWeight: "bold",
-      border: "default",
-      borderRadius: "default",
+      borderRadius: "action",
       borderColor: "accent",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
@@ -270,10 +307,8 @@ var BruttalTheme = {
     primary: {
       backgroundColor: "primary",
       color: "onPrimary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      borderRadius: "action",
+      borderColor: "primary",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -293,10 +328,8 @@ var BruttalTheme = {
     secondary: {
       backgroundColor: "secondary",
       color: "onSecondary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      borderRadius: "action",
+      borderColor: "secondary",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -309,12 +342,10 @@ var BruttalTheme = {
       }
     },
     neutral: {
-      backgroundColor: "neutral",
-      color: "onNeutral",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      backgroundColor: "muted",
+      color: "onMuted",
+      borderRadius: "action",
+      borderColor: "muted",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -327,7 +358,7 @@ var BruttalTheme = {
       }
     },
     danger: {
-      color: "white",
+      color: "onDanger",
       backgroundColor: "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-VIAWD6II.js";
+import { BruttalTheme } from "./chunk-3BHEF22W.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-VIAWD6II.js";
+import { BruttalFonts, BruttalTheme } from "../../chunk-3BHEF22W.js";
 export { BruttalFonts, BruttalTheme };

package/dist/index.js

@@ -223,20 +223,22 @@ var BruttalTheme = {
     background: coreColors.white,
     text: coreColors.black,
     muted: coreColors.gray200,
-    onMuted: coreColors.gray500,
+    onMuted: coreColors.gray600,
     mutedOutline: coreColors.gray300,
     danger: coreColors.red700,
     onDanger: coreColors.white,
     notice: coreColors.amber600,
+    onNotice: coreColors.white,
     positive: coreColors.teal600,
+    onPositive: coreColors.white,
     surface: coreColors.white,
     contentHeader: coreColors.gray200,
     onContentHeader: coreColors.black,
     outline: coreColors.gray500,
     primary: coreColors.main,
     onPrimary: coreColors.white,
-    secondary: coreColors.gray500,
-    onSecondary: coreColors.complimentary,
+    secondary: coreColors.gray100,
+    onSecondary: coreColors.black,
     highlight: coreColors.darkNeutral,
     onHighlight: coreColors.complimentary,
     accent: coreColors.accent,
@@ -257,10 +259,13 @@ var BruttalTheme = {
     caption: coreFonts.monospace
   },
   borders: {
-    default: coreBorders.medium
+    default: coreBorders.medium,
+    muted: coreBorders.thin
   },
   radii: {
-    default: coreRadii.sm
+    informative: coreRadii.xs,
+    default: coreRadii.sm,
+    action: coreRadii.sm
   },
   /**
    * Global styles
@@ -278,22 +283,54 @@ var BruttalTheme = {
    * Components
    */
   badges: {
-    primary: {
-      color: "onPrimary",
-      bg: "primary",
-      fontSize: "sm",
-      paddingX: "sm",
-      borderRadius: "default"
+    positive: {
+      color: "onPositive",
+      bg: "positive",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
+    },
+    negative: {
+      color: "onDanger",
+      bg: "danger",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
+    },
+    neutral: {
+      color: "onSecondary",
+      bg: "secondary",
+      fontFamily: "caption",
+      fontSize: "xs",
+      fontWeight: "normal",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative",
+      border: "muted",
+      borderColor: "onMuted"
+    },
+    informative: {
+      color: "onNotice",
+      bg: "notice",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
     }
   },
   buttons: {
     accent: {
       backgroundColor: "accent",
       color: "onAccent",
-      fontFamily: "highlight",
-      fontWeight: "bold",
-      border: "default",
-      borderRadius: "default",
+      borderRadius: "action",
       borderColor: "accent",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
@@ -309,10 +346,8 @@ var BruttalTheme = {
     primary: {
       backgroundColor: "primary",
       color: "onPrimary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      borderRadius: "action",
+      borderColor: "primary",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -332,10 +367,8 @@ var BruttalTheme = {
     secondary: {
       backgroundColor: "secondary",
       color: "onSecondary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      borderRadius: "action",
+      borderColor: "secondary",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -348,12 +381,10 @@ var BruttalTheme = {
       }
     },
     neutral: {
-      backgroundColor: "neutral",
-      color: "onNeutral",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      backgroundColor: "muted",
+      color: "onMuted",
+      borderRadius: "action",
+      borderColor: "muted",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -366,7 +397,7 @@ var BruttalTheme = {
       }
     },
     danger: {
-      color: "white",
+      color: "onDanger",
       backgroundColor: "danger"
     }
   },

package/dist/themes/Bruttal/Bruttal.js

@@ -227,20 +227,22 @@ var BruttalTheme = {
     background: coreColors.white,
     text: coreColors.black,
     muted: coreColors.gray200,
-    onMuted: coreColors.gray500,
+    onMuted: coreColors.gray600,
     mutedOutline: coreColors.gray300,
     danger: coreColors.red700,
     onDanger: coreColors.white,
     notice: coreColors.amber600,
+    onNotice: coreColors.white,
     positive: coreColors.teal600,
+    onPositive: coreColors.white,
     surface: coreColors.white,
     contentHeader: coreColors.gray200,
     onContentHeader: coreColors.black,
     outline: coreColors.gray500,
     primary: coreColors.main,
     onPrimary: coreColors.white,
-    secondary: coreColors.gray500,
-    onSecondary: coreColors.complimentary,
+    secondary: coreColors.gray100,
+    onSecondary: coreColors.black,
     highlight: coreColors.darkNeutral,
     onHighlight: coreColors.complimentary,
     accent: coreColors.accent,
@@ -261,10 +263,13 @@ var BruttalTheme = {
     caption: coreFonts.monospace
   },
   borders: {
-    default: coreBorders.medium
+    default: coreBorders.medium,
+    muted: coreBorders.thin
   },
   radii: {
-    default: coreRadii.sm
+    informative: coreRadii.xs,
+    default: coreRadii.sm,
+    action: coreRadii.sm
   },
   /**
    * Global styles
@@ -282,22 +287,54 @@ var BruttalTheme = {
    * Components
    */
   badges: {
-    primary: {
-      color: "onPrimary",
-      bg: "primary",
-      fontSize: "sm",
-      paddingX: "sm",
-      borderRadius: "default"
+    positive: {
+      color: "onPositive",
+      bg: "positive",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
+    },
+    negative: {
+      color: "onDanger",
+      bg: "danger",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
+    },
+    neutral: {
+      color: "onSecondary",
+      bg: "secondary",
+      fontFamily: "caption",
+      fontSize: "xs",
+      fontWeight: "normal",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative",
+      border: "muted",
+      borderColor: "onMuted"
+    },
+    informative: {
+      color: "onNotice",
+      bg: "notice",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
+      borderRadius: "informative"
     }
   },
   buttons: {
     accent: {
       backgroundColor: "accent",
       color: "onAccent",
-      fontFamily: "highlight",
-      fontWeight: "bold",
-      border: "default",
-      borderRadius: "default",
+      borderRadius: "action",
       borderColor: "accent",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
@@ -313,10 +350,8 @@ var BruttalTheme = {
     primary: {
       backgroundColor: "primary",
       color: "onPrimary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      borderRadius: "action",
+      borderColor: "primary",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -336,10 +371,8 @@ var BruttalTheme = {
     secondary: {
       backgroundColor: "secondary",
       color: "onSecondary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      borderRadius: "action",
+      borderColor: "secondary",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -352,12 +385,10 @@ var BruttalTheme = {
       }
     },
     neutral: {
-      backgroundColor: "neutral",
-      color: "onNeutral",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
+      backgroundColor: "muted",
+      color: "onMuted",
+      borderRadius: "action",
+      borderColor: "muted",
       ":hover:not(:active,[disabled])": {
         backgroundColor: "highlight",
         color: "onHighlight",
@@ -370,7 +401,7 @@ var BruttalTheme = {
       }
     },
     danger: {
-      color: "white",
+      color: "onDanger",
       backgroundColor: "danger"
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -53,5 +53,5 @@
       ]
     }
   },
-  "gitHead": "792b02e52847725c19fdceffb606c201840d5910"
+  "gitHead": "77d124d6e4c2ccd61058c8852789dcd9bc2f527a"
 }

package/src/themes/Bruttal/BruttalTheme.ts

@@ -73,20 +73,22 @@ export const BruttalTheme: Theme = {
     background: coreColors.white,
     text: coreColors.black,
     muted: coreColors.gray200,
-    onMuted: coreColors.gray500,
+    onMuted: coreColors.gray600,
     mutedOutline: coreColors.gray300,
     danger: coreColors.red700,
     onDanger: coreColors.white,
     notice: coreColors.amber600,
+    onNotice: coreColors.white,
     positive: coreColors.teal600,
+    onPositive: coreColors.white,
     surface: coreColors.white,
     contentHeader: coreColors.gray200,
     onContentHeader: coreColors.black,
     outline: coreColors.gray500,
     primary: coreColors.main,
     onPrimary: coreColors.white,
-    secondary: coreColors.gray500,
-    onSecondary: coreColors.complimentary,
+    secondary: coreColors.gray100,
+    onSecondary: coreColors.black,
     highlight: coreColors.darkNeutral,
     onHighlight: coreColors.complimentary,
     accent: coreColors.accent,
@@ -108,9 +110,12 @@ export const BruttalTheme: Theme = {
   },
   borders: {
     default: coreBorders.medium,
+    muted: coreBorders.thin,
   },
   radii: {
+    informative: coreRadii.xs,
     default: coreRadii.sm,
+    action: coreRadii.sm,
   },
   /**
    * Global styles
@@ -128,22 +133,54 @@ export const BruttalTheme: Theme = {
    * Components
    */
   badges: {
-    primary: {
-      color: 'onPrimary',
-      bg: 'primary',
-      fontSize: 'sm',
-      paddingX: 'sm',
-      borderRadius: 'default',
+    positive: {
+      color: 'onPositive',
+      bg: 'positive',
+      fontFamily: 'caption',
+      fontWeight: 'normal',
+      fontSize: 'xs',
+      paddingX: 'xs',
+      paddingY: '2xs',
+      borderRadius: 'informative',
+    },
+    negative: {
+      color: 'onDanger',
+      bg: 'danger',
+      fontFamily: 'caption',
+      fontWeight: 'normal',
+      fontSize: 'xs',
+      paddingX: 'xs',
+      paddingY: '2xs',
+      borderRadius: 'informative',
+    },
+    neutral: {
+      color: 'onSecondary',
+      bg: 'secondary',
+      fontFamily: 'caption',
+      fontSize: 'xs',
+      fontWeight: 'normal',
+      paddingX: 'xs',
+      paddingY: '2xs',
+      borderRadius: 'informative',
+      border: 'muted',
+      borderColor: 'onMuted',
+    },
+    informative: {
+      color: 'onNotice',
+      bg: 'notice',
+      fontFamily: 'caption',
+      fontWeight: 'normal',
+      fontSize: 'xs',
+      paddingX: 'xs',
+      paddingY: '2xs',
+      borderRadius: 'informative',
     },
   },
   buttons: {
     accent: {
       backgroundColor: 'accent',
       color: 'onAccent',
-      fontFamily: 'highlight',
-      fontWeight: 'bold',
-      border: 'default',
-      borderRadius: 'default',
+      borderRadius: 'action',
       borderColor: 'accent',
       ':hover:not(:active,[disabled])': {
         backgroundColor: 'highlight',
@@ -159,10 +196,8 @@ export const BruttalTheme: Theme = {
     primary: {
       backgroundColor: 'primary',
       color: 'onPrimary',
-      fontFamily: 'body',
-      border: 'default',
-      borderRadius: 'default',
-      borderColor: 'outline',
+      borderRadius: 'action',
+      borderColor: 'primary',
       ':hover:not(:active,[disabled])': {
         backgroundColor: 'highlight',
         color: 'onHighlight',
@@ -182,10 +217,8 @@ export const BruttalTheme: Theme = {
     secondary: {
       backgroundColor: 'secondary',
       color: 'onSecondary',
-      fontFamily: 'body',
-      border: 'default',
-      borderRadius: 'default',
-      borderColor: 'outline',
+      borderRadius: 'action',
+      borderColor: 'secondary',
       ':hover:not(:active,[disabled])': {
         backgroundColor: 'highlight',
         color: 'onHighlight',
@@ -198,12 +231,10 @@ export const BruttalTheme: Theme = {
       },
     },
     neutral: {
-      backgroundColor: 'neutral',
-      color: 'onNeutral',
-      fontFamily: 'body',
-      border: 'default',
-      borderRadius: 'default',
-      borderColor: 'outline',
+      backgroundColor: 'muted',
+      color: 'onMuted',
+      borderRadius: 'action',
+      borderColor: 'muted',
       ':hover:not(:active,[disabled])': {
         backgroundColor: 'highlight',
         color: 'onHighlight',
@@ -216,7 +247,7 @@ export const BruttalTheme: Theme = {
       },
     },
     danger: {
-      color: 'white',
+      color: 'onDanger',
       backgroundColor: 'danger',
     },
   },