@ttoss/ui 1.30.7 → 1.30.9

package/dist/esm/index.js

@@ -211,23 +211,23 @@ var coreFonts = {
   monospace: '"Inconsolata", sans-serif'
 };
 var brandColors = {
-  complimentary: "#f5f5f5",
-  main: "#292c2a",
-  darkNeutral: "#515389",
-  accent: "#0000ff",
-  lightNeutral: "#e3e3e3"
+  complimentary: "#f4f3f3",
+  main: "#292C2a",
+  darkNeutral: "#325C82",
+  accent: "#0469E3",
+  lightNeutral: "#F8F8F8"
 };
 var coreColors = {
   ...brandColors,
-  gray100: "#f0f1f3",
-  gray200: "#ced1d7",
-  gray300: "#acb1ba",
-  gray400: "#8b919e",
-  gray500: "#6b7280",
-  gray600: "#535863",
-  gray700: "#3b3f46",
-  gray800: "#23252a",
-  gray900: "#0b0b0d",
+  gray100: "#f9f9f9",
+  gray200: "#dedede",
+  gray300: "#c4c4c4",
+  gray400: "#ababab",
+  gray500: "#929292",
+  gray600: "#7a7a7a",
+  gray700: "#626262",
+  gray800: "#4c4c4c",
+  gray900: "#323232",
   black: "#000000",
   red100: "#ffebeb",
   red200: "#fdbfbf",
@@ -236,7 +236,9 @@ var coreColors = {
   red500: "#ef4444",
   red600: "#e42828",
   red700: "#c62121",
-  white: "#ffffff"
+  white: "#ffffff",
+  amber600: "#d97706",
+  teal600: "#0d9488"
 };
 var coreBorders = {
   none: "0px solid",
@@ -264,20 +266,30 @@ var BruttalTheme = {
   letterSpacings,
   space,
   colors: {
-    background: coreColors.lightNeutral,
-    text: coreColors.gray900,
+    background: coreColors.white,
+    text: coreColors.black,
     muted: coreColors.gray200,
-    outline: coreColors.gray200,
+    onMuted: coreColors.gray500,
+    mutedOutline: coreColors.gray300,
+    danger: coreColors.red700,
+    onDanger: coreColors.white,
+    notice: coreColors.amber600,
+    positive: coreColors.teal600,
+    surface: coreColors.white,
+    contentHeader: coreColors.gray200,
+    onContentHeader: coreColors.black,
+    outline: coreColors.gray500,
     primary: coreColors.main,
     onPrimary: coreColors.white,
     secondary: coreColors.gray500,
-    onSecondary: coreColors.white,
+    onSecondary: coreColors.complimentary,
     highlight: coreColors.darkNeutral,
-    onHighlight: coreColors.white,
+    onHighlight: coreColors.complimentary,
     accent: coreColors.accent,
     onAccent: coreColors.white,
-    neutral: coreColors.white,
-    onNeutral: coreColors.gray900
+    neutral: coreColors.darkNeutral,
+    onNeutral: coreColors.lightNeutral,
+    underemphasize: coreColors.gray300
   },
   fonts: {
     h1: coreFonts.contrast,
@@ -404,8 +416,34 @@ var BruttalTheme = {
     }
   },
   forms: {
+    label: {
+      "&:has(+ div > input:invalid)": {
+        "span > iconify-icon": {
+          color: "danger"
+        }
+      }
+    },
     input: {
-      fontFamily: "body"
+      fontFamily: "body",
+      color: "text",
+      paddingY: "md",
+      paddingX: "lg",
+      "::placeholder": {
+        color: "underemphasize"
+      },
+      ":focus-within": {
+        outlineColor: "neutral"
+      },
+      ":disabled": {
+        backgroundColor: "onMuted",
+        borderColor: "muted"
+      },
+      "&.error": {
+        borderColor: "danger"
+      },
+      "&.error+span>iconify-icon": {
+        color: "danger"
+      }
     }
   },
   text: {
@@ -418,6 +456,11 @@ var BruttalTheme = {
       fontSize: 4,
       lineSpace: "3.5"
     },
+    error: {
+      '&[role="alert"]': {
+        color: "danger"
+      }
+    },
     h1: {
       fontFamily: "heading",
       fontSize: "6xl",

package/dist/index.js

@@ -249,23 +249,23 @@ var coreFonts = {
   monospace: '"Inconsolata", sans-serif'
 };
 var brandColors = {
-  complimentary: "#f5f5f5",
-  main: "#292c2a",
-  darkNeutral: "#515389",
-  accent: "#0000ff",
-  lightNeutral: "#e3e3e3"
+  complimentary: "#f4f3f3",
+  main: "#292C2a",
+  darkNeutral: "#325C82",
+  accent: "#0469E3",
+  lightNeutral: "#F8F8F8"
 };
 var coreColors = {
   ...brandColors,
-  gray100: "#f0f1f3",
-  gray200: "#ced1d7",
-  gray300: "#acb1ba",
-  gray400: "#8b919e",
-  gray500: "#6b7280",
-  gray600: "#535863",
-  gray700: "#3b3f46",
-  gray800: "#23252a",
-  gray900: "#0b0b0d",
+  gray100: "#f9f9f9",
+  gray200: "#dedede",
+  gray300: "#c4c4c4",
+  gray400: "#ababab",
+  gray500: "#929292",
+  gray600: "#7a7a7a",
+  gray700: "#626262",
+  gray800: "#4c4c4c",
+  gray900: "#323232",
   black: "#000000",
   red100: "#ffebeb",
   red200: "#fdbfbf",
@@ -274,7 +274,9 @@ var coreColors = {
   red500: "#ef4444",
   red600: "#e42828",
   red700: "#c62121",
-  white: "#ffffff"
+  white: "#ffffff",
+  amber600: "#d97706",
+  teal600: "#0d9488"
 };
 var coreBorders = {
   none: "0px solid",
@@ -302,20 +304,30 @@ var BruttalTheme = {
   letterSpacings,
   space,
   colors: {
-    background: coreColors.lightNeutral,
-    text: coreColors.gray900,
+    background: coreColors.white,
+    text: coreColors.black,
     muted: coreColors.gray200,
-    outline: coreColors.gray200,
+    onMuted: coreColors.gray500,
+    mutedOutline: coreColors.gray300,
+    danger: coreColors.red700,
+    onDanger: coreColors.white,
+    notice: coreColors.amber600,
+    positive: coreColors.teal600,
+    surface: coreColors.white,
+    contentHeader: coreColors.gray200,
+    onContentHeader: coreColors.black,
+    outline: coreColors.gray500,
     primary: coreColors.main,
     onPrimary: coreColors.white,
     secondary: coreColors.gray500,
-    onSecondary: coreColors.white,
+    onSecondary: coreColors.complimentary,
     highlight: coreColors.darkNeutral,
-    onHighlight: coreColors.white,
+    onHighlight: coreColors.complimentary,
     accent: coreColors.accent,
     onAccent: coreColors.white,
-    neutral: coreColors.white,
-    onNeutral: coreColors.gray900
+    neutral: coreColors.darkNeutral,
+    onNeutral: coreColors.lightNeutral,
+    underemphasize: coreColors.gray300
   },
   fonts: {
     h1: coreFonts.contrast,
@@ -442,8 +454,34 @@ var BruttalTheme = {
     }
   },
   forms: {
+    label: {
+      "&:has(+ div > input:invalid)": {
+        "span > iconify-icon": {
+          color: "danger"
+        }
+      }
+    },
     input: {
-      fontFamily: "body"
+      fontFamily: "body",
+      color: "text",
+      paddingY: "md",
+      paddingX: "lg",
+      "::placeholder": {
+        color: "underemphasize"
+      },
+      ":focus-within": {
+        outlineColor: "neutral"
+      },
+      ":disabled": {
+        backgroundColor: "onMuted",
+        borderColor: "muted"
+      },
+      "&.error": {
+        borderColor: "danger"
+      },
+      "&.error+span>iconify-icon": {
+        color: "danger"
+      }
     }
   },
   text: {
@@ -456,6 +494,11 @@ var BruttalTheme = {
       fontSize: 4,
       lineSpace: "3.5"
     },
+    error: {
+      '&[role="alert"]': {
+        color: "danger"
+      }
+    },
     h1: {
       fontFamily: "heading",
       fontSize: "6xl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.30.7",
+  "version": "1.30.9",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -32,7 +32,7 @@
     "@iconify-icon/react": "^1.0.5",
     "@ttoss/config": "^1.28.3",
     "@ttoss/test-utils": "^1.20.5",
-    "@ttoss/theme": "^1.2.6",
+    "@ttoss/theme": "^1.2.8",
     "@types/jest": "^29.4.0",
     "jest": "^29.5.0",
     "tsup": "^6.6.3"
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "56e8cfde36a962deaa5514453618280699824b4f"
+  "gitHead": "fb122458378a96e09d1da7fbad0bf12e72e8d04d"
 }