@ttoss/theme 1.4.4 → 1.4.6

package/dist/esm/{chunk-NZ55XKBO.js → chunk-VECK5LBY.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,9 +220,11 @@ var BruttalTheme = {
     caption: coreFonts.monospace
   },
   borders: {
-    default: coreBorders.medium
+    default: coreBorders.medium,
+    muted: coreBorders.thin
   },
   radii: {
+    informative: coreRadii.xs,
     default: coreRadii.sm,
     action: coreRadii.sm
   },
@@ -240,12 +244,47 @@ 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: {
@@ -389,9 +428,20 @@ var BruttalTheme = {
       fontSize: 4,
       lineSpace: "3.5"
     },
-    error: {
-      '&[role="alert"]': {
-        color: "danger"
+    help: {
+      fontFamily: "caption",
+      color: "text",
+      fontSize: "xs",
+      '&[aria-disabled="true"]': {
+        color: "onMuted"
+      },
+      negative: {
+        color: "danger",
+        fontFamily: "caption",
+        fontSize: "xs",
+        '&[aria-disabled="true"]': {
+          color: "onMuted"
+        }
       }
     },
     h1: {

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { BruttalTheme } from "./chunk-NZ55XKBO.js";
+import { BruttalTheme } from "./chunk-VECK5LBY.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-NZ55XKBO.js";
+import { BruttalFonts, BruttalTheme } from "../../chunk-VECK5LBY.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,9 +259,11 @@ var BruttalTheme = {
     caption: coreFonts.monospace
   },
   borders: {
-    default: coreBorders.medium
+    default: coreBorders.medium,
+    muted: coreBorders.thin
   },
   radii: {
+    informative: coreRadii.xs,
     default: coreRadii.sm,
     action: coreRadii.sm
   },
@@ -279,12 +283,47 @@ 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: {
@@ -428,9 +467,20 @@ var BruttalTheme = {
       fontSize: 4,
       lineSpace: "3.5"
     },
-    error: {
-      '&[role="alert"]': {
-        color: "danger"
+    help: {
+      fontFamily: "caption",
+      color: "text",
+      fontSize: "xs",
+      '&[aria-disabled="true"]': {
+        color: "onMuted"
+      },
+      negative: {
+        color: "danger",
+        fontFamily: "caption",
+        fontSize: "xs",
+        '&[aria-disabled="true"]': {
+          color: "onMuted"
+        }
       }
     },
     h1: {

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,9 +263,11 @@ var BruttalTheme = {
     caption: coreFonts.monospace
   },
   borders: {
-    default: coreBorders.medium
+    default: coreBorders.medium,
+    muted: coreBorders.thin
   },
   radii: {
+    informative: coreRadii.xs,
     default: coreRadii.sm,
     action: coreRadii.sm
   },
@@ -283,12 +287,47 @@ 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: {
@@ -432,9 +471,20 @@ var BruttalTheme = {
       fontSize: 4,
       lineSpace: "3.5"
     },
-    error: {
-      '&[role="alert"]': {
-        color: "danger"
+    help: {
+      fontFamily: "caption",
+      color: "text",
+      fontSize: "xs",
+      '&[aria-disabled="true"]': {
+        color: "onMuted"
+      },
+      negative: {
+        color: "danger",
+        fontFamily: "caption",
+        fontSize: "xs",
+        '&[aria-disabled="true"]': {
+          color: "onMuted"
+        }
       }
     },
     h1: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -53,5 +53,5 @@
       ]
     }
   },
-  "gitHead": "f26363085030df7edfb2bcbf44aefed304d2b328"
+  "gitHead": "ce34db105b7f475a90660d77b194d6ea33b71960"
 }

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,8 +110,10 @@ export const BruttalTheme: Theme = {
   },
   borders: {
     default: coreBorders.medium,
+    muted: coreBorders.thin,
   },
   radii: {
+    informative: coreRadii.xs,
     default: coreRadii.sm,
     action: coreRadii.sm,
   },
@@ -129,12 +133,47 @@ 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: {
@@ -278,9 +317,20 @@ export const BruttalTheme: Theme = {
       fontSize: 4,
       lineSpace: '3.5',
     },
-    error: {
-      '&[role="alert"]': {
+    help: {
+      fontFamily: 'caption',
+      color: 'text',
+      fontSize: 'xs',
+      '&[aria-disabled="true"]': {
+        color: 'onMuted',
+      },
+      negative: {
         color: 'danger',
+        fontFamily: 'caption',
+        fontSize: 'xs',
+        '&[aria-disabled="true"]': {
+          color: 'onMuted',
+        },
       },
     },
     h1: {