@ttoss/theme 1.2.10 → 1.4.0

package/dist/esm/index.js

@@ -1,389 +1,13 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-
-// src/tokens/fontSizes.ts
-var fontSizes = {
-  "2xs": "0.5rem",
-  xs: "0.75rem",
-  sm: "0.875rem",
-  base: "1rem",
-  lg: "1.125rem",
-  xl: "1.25rem",
-  "2xl": "1.5rem",
-  "3xl": "1.875rem",
-  "4xl": "2.25rem",
-  "5xl": "3rem",
-  "6xl": "3.75rem",
-  "7xl": "4.5rem",
-  "8xl": "6rem",
-  "9xl": "8rem"
-};
-
-// src/tokens/fontWeights.ts
-var fontWeights = {
-  thin: 100,
-  extralight: 200,
-  light: 300,
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800
-};
-
-// src/tokens/letterSpacings.ts
-var letterSpacings = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: "0em",
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-};
-
-// src/tokens/space.ts
-var space = {
-  none: 0,
-  "2xs": "2px",
-  xs: "3px",
-  sm: "5px",
-  md: "8px",
-  lg: "13px",
-  xl: "21px",
-  "2xl": "34px",
-  "3xl": "55px",
-  "4xl": "89px",
-  "5xl": "144px",
-  "6xl": "233px",
-  "7xl": "377px"
-};
-
-// src/themes/Bruttal/BruttalTheme.ts
-var coreFonts = {
-  main: '"Atkinson Hyperlegible", sans-serif',
-  contrast: '"Work Sans", sans-serif',
-  monospace: '"Inconsolata", sans-serif'
-};
-var brandColors = {
-  complimentary: "#f4f3f3",
-  main: "#292C2a",
-  darkNeutral: "#325C82",
-  accent: "#0469E3",
-  lightNeutral: "#F8F8F8"
-};
-var coreColors = {
-  ...brandColors,
-  gray100: "#f9f9f9",
-  gray200: "#dedede",
-  gray300: "#c4c4c4",
-  gray400: "#ababab",
-  gray500: "#929292",
-  gray600: "#7a7a7a",
-  gray700: "#626262",
-  gray800: "#4c4c4c",
-  gray900: "#323232",
-  black: "#000000",
-  red100: "#ffebeb",
-  red200: "#fdbfbf",
-  red300: "#f99595",
-  red400: "#f56c6c",
-  red500: "#ef4444",
-  red600: "#e42828",
-  red700: "#c62121",
-  white: "#ffffff",
-  amber600: "#d97706",
-  teal600: "#0d9488"
-};
-var coreBorders = {
-  none: "0px solid",
-  thin: "1px solid",
-  medium: "2px solid",
-  thick: "4px solid"
-};
-var coreRadii = {
-  sharp: "0px",
-  xs: "2px",
-  sm: "4px",
-  md: "6px",
-  lg: "8px",
-  xl: "12px",
-  "2xl": "16px",
-  "3xl": "24px",
-  circle: "9999px"
-};
-var BruttalTheme = {
-  /**
-   * Tokens
-   */
-  fontSizes,
-  fontWeights,
-  letterSpacings,
-  space,
-  colors: {
-    background: coreColors.white,
-    text: coreColors.black,
-    muted: 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.complimentary,
-    highlight: coreColors.darkNeutral,
-    onHighlight: coreColors.complimentary,
-    accent: coreColors.accent,
-    onAccent: coreColors.white,
-    neutral: coreColors.darkNeutral,
-    onNeutral: coreColors.lightNeutral,
-    underemphasize: coreColors.gray300
-  },
-  fonts: {
-    h1: coreFonts.contrast,
-    h2: coreFonts.contrast,
-    h3: coreFonts.contrast,
-    h4: coreFonts.contrast,
-    h5: coreFonts.contrast,
-    h6: coreFonts.contrast,
-    body: coreFonts.main,
-    highlight: coreFonts.main,
-    caption: coreFonts.monospace
-  },
-  borders: {
-    default: coreBorders.medium
-  },
-  radii: {
-    default: coreRadii.sm
-  },
-  /**
-   * Global styles
-   */
-  styles: {
-    root: {
-      fontFamily: "body",
-      fontWeight: "normal"
-    }
-  },
-  /**
-   * Components
-   */
-  badges: {
-    primary: {
-      color: "onPrimary",
-      bg: "primary",
-      fontSize: "sm",
-      paddingX: "sm",
-      borderRadius: "default"
-    }
-  },
-  buttons: {
-    accent: {
-      backgroundColor: "accent",
-      color: "onAccent",
-      fontFamily: "highlight",
-      fontWeight: "bold",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "accent",
-      ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted"
-      }
-    },
-    primary: {
-      backgroundColor: "primary",
-      color: "onPrimary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
-      ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
-      },
-      ":active": {
-        backgroundColor: "primary",
-        color: "onPrimary",
-        borderColor: "outline"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted"
-      }
-    },
-    secondary: {
-      backgroundColor: "secondary",
-      color: "onSecondary",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
-      ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted"
-      }
-    },
-    neutral: {
-      backgroundColor: "neutral",
-      color: "onNeutral",
-      fontFamily: "body",
-      border: "default",
-      borderRadius: "default",
-      borderColor: "outline",
-      ":hover:not(:active,[disabled])": {
-        backgroundColor: "highlight",
-        color: "onHighlight",
-        borderColor: "highlight"
-      },
-      ":disabled": {
-        cursor: "default",
-        backgroundColor: "muted",
-        borderColor: "muted"
-      }
-    },
-    danger: {
-      color: "white",
-      backgroundColor: "danger"
-    }
-  },
-  cards: {
-    primary: {
-      backgroundColor: "primary",
-      border: "1px solid black",
-      padding: [4, 5],
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "fit-content"
-    }
-  },
-  forms: {
-    label: {
-      "&:has(+ div > input.error)": {
-        "span > iconify-icon": {
-          color: "danger"
-        }
-      },
-      '&:has(input[type="checkbox"]:disabled)': {
-        color: "onMuted"
-      }
-    },
-    checkbox: {
-      "input:not(:checked) ~ &": {
-        color: "primary"
-      },
-      "input:disabled ~ &": {
-        color: "muted"
-      },
-      "input:disabled ~ & path": {
-        backgroundColor: "onMuted"
-      }
-    },
-    input: {
-      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: {
-    default: {
-      color: "text",
-      fontFamily: "body"
-    },
-    title: {
-      fontFamily: "heading",
-      fontSize: 4,
-      lineSpace: "3.5"
-    },
-    error: {
-      '&[role="alert"]': {
-        color: "danger"
-      }
-    },
-    h1: {
-      fontFamily: "heading",
-      fontSize: "6xl",
-      fontWeight: "bold",
-      letterSpacing: "normal"
-    },
-    h2: {
-      fontFamily: "heading",
-      fontSize: "5xl",
-      fontWeight: "bold",
-      letterSpacing: "normal"
-    },
-    h3: {
-      fontFamily: "heading",
-      fontSize: "4xl",
-      fontWeight: "bold",
-      letterSpacing: "normal"
-    },
-    h4: {
-      fontFamily: "heading",
-      fontSize: "2xl",
-      fontWeight: "bold",
-      letterSpacing: "normal"
-    },
-    h5: {
-      fontFamily: "heading",
-      fontSize: "xl",
-      fontWeight: "bold",
-      letterSpacing: "normal"
-    }
-  }
-};
+import {
+  BruttalTheme
+} from "./chunk-VIAWD6II.js";
 
 // src/createTheme.ts
 import deepmerge from "deepmerge";
 var createTheme = (theme) => {
   return deepmerge(BruttalTheme, theme);
 };
-
-// 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"
-];
 export {
-  BruttalFonts,
-  BruttalTheme,
   createTheme
 };

package/dist/esm/themes/Bruttal/Bruttal.js

@@ -0,0 +1,9 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import {
+  BruttalFonts,
+  BruttalTheme
+} from "../../chunk-VIAWD6II.js";
+export {
+  BruttalFonts,
+  BruttalTheme
+};

package/dist/index.d.ts

@@ -2,8 +2,4 @@ import { Theme } from 'theme-ui';
 
 declare const createTheme: (theme: Theme) => Theme;
 
-declare const BruttalTheme: Theme;
-
-declare const BruttalFonts: string[];
-
-export { BruttalFonts, BruttalTheme, createTheme };
+export { createTheme };

package/dist/index.js

@@ -31,12 +31,69 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BruttalFonts: () => BruttalFonts,
-  BruttalTheme: () => BruttalTheme,
   createTheme: () => createTheme
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/themes/Bruttal/BruttalIcons.ts
+var import_react = require("@iconify-icon/react");
+var import_add_filled = __toESM(require("@iconify/icons-carbon/add-filled"));
+var import_calendar = __toESM(require("@iconify/icons-carbon/calendar"));
+var import_checkbox_checked_filled = __toESM(require("@iconify/icons-carbon/checkbox-checked-filled"));
+var import_checkbox = __toESM(require("@iconify/icons-carbon/checkbox"));
+var import_checkbox_indeterminate_filled = __toESM(require("@iconify/icons-carbon/checkbox-indeterminate-filled"));
+var import_chevron_down = __toESM(require("@iconify/icons-carbon/chevron-down"));
+var import_chevron_left = __toESM(require("@iconify/icons-carbon/chevron-left"));
+var import_chevron_right = __toESM(require("@iconify/icons-carbon/chevron-right"));
+var import_chevron_up = __toESM(require("@iconify/icons-carbon/chevron-up"));
+var import_close_filled = __toESM(require("@iconify/icons-carbon/close-filled"));
+var import_copy = __toESM(require("@iconify/icons-carbon/copy"));
+var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
+var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
+var import_paste = __toESM(require("@iconify/icons-carbon/paste"));
+var import_radio_button_checked = __toESM(require("@iconify/icons-carbon/radio-button-checked"));
+var import_radio_button = __toESM(require("@iconify/icons-carbon/radio-button"));
+var import_renew = __toESM(require("@iconify/icons-carbon/renew"));
+var import_time = __toESM(require("@iconify/icons-carbon/time"));
+var import_trash_can = __toESM(require("@iconify/icons-carbon/trash-can"));
+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_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">
+  <path d="M42 15V42H15V15H42ZM42 12H15C14.2044 12 13.4413 12.3161 12.8787 12.8787C12.3161 13.4413 12 14.2044 12 15V42C12 42.7956 12.3161 43.5587 12.8787 44.1213C13.4413 44.6839 14.2044 45 15 45H42C42.7956 45 43.5587 44.6839 44.1213 44.1213C44.6839 43.5587 45 42.7956 45 42V15C45 14.2044 44.6839 13.4413 44.1213 12.8787C43.5587 12.3161 42.7956 12 42 12Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.76389C3 4.23744 4.26071 3 5.81588 3H29V5.57963H5.81588C5.71221 5.57963 5.62816 5.66213 5.62816 5.76389V28.994C5.62816 29.0957 5.71221 29.1782 5.81588 29.1782H22.2607L18.7784 25.7602L20.6368 23.9361L27.2916 30.4681L20.6368 37L18.7784 35.1759L22.2607 31.7579H5.81588C4.26071 31.7579 3 30.5204 3 28.994V5.76389Z" fill="currentColor"/>
+  </svg>`,
+  width: 48,
+  height: 48
+};
+(0, import_react.addIcon)("add", import_add_filled.default);
+(0, import_react.addIcon)("avatar", import_user_avatar_filled_alt.default);
+(0, import_react.addIcon)("calendar", import_calendar.default);
+(0, import_react.addIcon)("checkbox-checked", import_checkbox_checked_filled.default);
+(0, import_react.addIcon)("checkbox-indeterminate", import_checkbox_indeterminate_filled.default);
+(0, import_react.addIcon)("checkbox-unchecked", import_checkbox.default);
+(0, import_react.addIcon)("close", import_close_filled.default);
+(0, import_react.addIcon)("copy", import_copy.default);
+(0, import_react.addIcon)("delete", import_trash_can.default);
+(0, import_react.addIcon)("error", import_error_filled.default);
+(0, import_react.addIcon)("info", import_information_filled.default);
+(0, import_react.addIcon)("paste", import_paste.default);
+(0, import_react.addIcon)("picker-down", import_chevron_down.default);
+(0, import_react.addIcon)("picker-up", import_chevron_up.default);
+(0, import_react.addIcon)("picker-left", import_chevron_left.default);
+(0, import_react.addIcon)("picker-right", import_chevron_right.default);
+(0, import_react.addIcon)("radio-not-selected", import_radio_button.default);
+(0, import_react.addIcon)("radio-selected", import_radio_button_checked.default);
+(0, import_react.addIcon)("refresh", import_renew.default);
+(0, import_react.addIcon)("replicate", replicateIcon);
+(0, import_react.addIcon)("small-close", import_close_filled.default);
+(0, import_react.addIcon)("time", import_time.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);
+
 // src/tokens/fontSizes.ts
 var fontSizes = {
   "2xs": "0.5rem",
@@ -204,7 +261,10 @@ var BruttalTheme = {
   styles: {
     root: {
       fontFamily: "body",
-      fontWeight: "normal"
+      fontWeight: "normal",
+      fontSize: "base",
+      margin: 0,
+      padding: 0
     }
   },
   /**
@@ -412,16 +472,7 @@ var import_deepmerge = __toESM(require("deepmerge"));
 var createTheme = (theme) => {
   return (0, import_deepmerge.default)(BruttalTheme, theme);
 };
-
-// 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"
-];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BruttalFonts,
-  BruttalTheme,
   createTheme
 });

package/dist/themes/Bruttal/Bruttal.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from 'theme-ui';
+
+declare const BruttalFonts: string[];
+
+declare const BruttalTheme: Theme;
+
+export { BruttalFonts, BruttalTheme };