@ttoss/theme 1.2.3 → 1.2.5

package/dist/index.js

@@ -1,8 +1,10 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,192 +33,258 @@ var src_exports = {};
 __export(src_exports, {
   BruttalFonts: () => BruttalFonts,
   BruttalTheme: () => BruttalTheme,
-  DefaultFonts: () => DefaultFonts,
-  DefaultTheme: () => DefaultTheme
+  createTheme: () => createTheme
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/themes/defaultTheme.ts
-var DefaultTheme = {
-  colors: {
-    text: "#000",
-    background: "#fff",
-    primary: "#07c",
-    secondary: "#639",
-    gray: "#555",
-    muted: "#f6f6f6",
-    danger: "red"
-  },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
-  fonts: {
-    body: '"Asap", sans-serif',
-    heading: '"Overpass", sans-serif',
-    monospace: '"Overpass Mono", sans-serif'
-  },
-  styles: {
-    root: {
-      fontFamily: "body",
-      fontWeight: "body"
-    },
-    a: {
-      color: "primary",
-      textDecoration: "underline",
-      cursor: "pointer",
-      fontFamily: "body"
-    },
-    progress: {
-      color: "primary",
-      backgroundColor: "background"
-    }
-  },
-  buttons: {
-    cta: {
-      color: "white",
-      backgroundColor: "primary"
-    },
-    muted: {
-      color: "text",
-      backgroundColor: "muted"
-    },
-    danger: {
-      color: "white",
-      backgroundColor: "danger"
-    }
-  },
-  cards: {
-    primary: {
-      backgroundColor: "background",
-      border: "1px solid black",
-      padding: [4, 5],
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "fit-content"
-    }
-  },
-  forms: {
-    input: {
-      fontFamily: "body"
-    }
-  },
-  text: {
-    default: {
-      color: "text",
-      fontFamily: "body"
-    },
-    title: {
-      fontFamily: "heading",
-      fontSize: 4,
-      lineSpace: "3.5"
-    }
-  }
+// 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/themes/bruttalTheme.ts
+// 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: "#f5f5f5",
+  main: "#292c2a",
+  darkNeutral: "#515389",
+  accent: "#0000ff",
+  lightNeutral: "#e3e3e3"
+};
+var coreColors = {
+  ...brandColors,
+  gray100: "#f0f1f3",
+  gray200: "#ced1d7",
+  gray300: "#acb1ba",
+  gray400: "#8b919e",
+  gray500: "#6b7280",
+  gray600: "#535863",
+  gray700: "#3b3f46",
+  gray800: "#23252a",
+  gray900: "#0b0b0d",
+  black: "#000000",
+  red100: "#ffebeb",
+  red200: "#fdbfbf",
+  red300: "#f99595",
+  red400: "#f56c6c",
+  red500: "#ef4444",
+  red600: "#e42828",
+  red700: "#c62121",
+  white: "#ffffff"
+};
+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: {
-    text: "#0D0D0D",
-    background: "#fff",
-    backgroundBrand: "#C2C2C2",
-    primary: "#0D0D0D",
-    secondary: "#639",
-    gray: "#555",
-    muted: "#f6f6f6",
-    danger: "red",
-    accent: "#0000FF",
-    textOnSurface: "#FFFFFF"
+    background: coreColors.lightNeutral,
+    text: coreColors.gray900,
+    muted: coreColors.gray200,
+    outline: coreColors.gray200,
+    primary: coreColors.main,
+    onPrimary: coreColors.white,
+    secondary: coreColors.gray500,
+    onSecondary: coreColors.white,
+    highlight: coreColors.darkNeutral,
+    onHighlight: coreColors.white,
+    accent: coreColors.accent,
+    onAccent: coreColors.white,
+    neutral: coreColors.white,
+    onNeutral: coreColors.gray900
   },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
   fonts: {
-    body: '"Inconsolata", sans-serif',
-    heading: '"Work Sans", sans-serif',
-    monospace: '"Inconsolata", sans-serif'
-  },
-  fontSizes: {
-    xxs: "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"
+    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
   },
-  fontWeights: {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800
+  borders: {
+    default: coreBorders.medium
   },
-  letterSpacings: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0em",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em"
+  radii: {
+    default: coreRadii.sm
   },
+  /**
+   * Global styles
+   */
   styles: {
     root: {
       fontFamily: "body",
       fontWeight: "normal"
-    },
-    a: {
-      color: "primary",
-      textDecoration: "underline",
-      cursor: "pointer",
-      fontFamily: "body"
-    },
-    progress: {
-      color: "primary",
-      backgroundColor: "background"
     }
   },
-  borders: [0, "3px solid #0D0D0D"],
+  /**
+   * Components
+   */
   buttons: {
-    cta: {
-      color: "white",
-      backgroundColor: "primary"
-    },
-    muted: {
-      color: "text",
-      backgroundColor: "muted"
-    },
-    danger: {
-      color: "white",
-      backgroundColor: "danger"
+    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": {
-        backgroundColor: "backgroundBrand",
-        cursor: "default"
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
       }
     },
     secondary: {
-      color: "text",
-      backgroundColor: "white",
-      borderColor: "text",
-      borderWidth: 1,
-      borderStyle: "solid",
+      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": {
-        opacity: 0.5,
-        cursor: "default"
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
       }
+    },
+    danger: {
+      color: "white",
+      backgroundColor: "danger"
     }
   },
   cards: {
     primary: {
-      backgroundColor: "background",
+      backgroundColor: "primary",
       border: "1px solid black",
       padding: [4, 5],
       display: "flex",
@@ -265,23 +341,21 @@ var BruttalTheme = {
   }
 };
 
-// src/themes/bruttalFonts.ts
+// src/createTheme.ts
+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"
-];
-
-// src/themes/defaultFonts.ts
-var DefaultFonts = [
-  "https://fonts.googleapis.com/css?family=Asap",
-  "https://fonts.googleapis.com/css?family=Overpass",
-  "https://fonts.googleapis.com/css?family=Overpass+Mono",
-  "https://fonts.googleapis.com/css?family=Flamenco"
+  "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,
-  DefaultFonts,
-  DefaultTheme
+  createTheme
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -15,20 +15,21 @@
     "tsconfig.json"
   ],
   "scripts": {
-    "build": "tsup-node",
+    "build": "tsup",
     "test": "jest"
   },
+  "sideEffects": false,
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "theme-ui": "^0.15.4"
+    "deepmerge": "^4.3.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.28.0",
-    "@ttoss/test-utils": "^1.20.2"
+    "@ttoss/config": "^1.28.2",
+    "@ttoss/test-utils": "^1.20.4"
   },
   "keywords": [],
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7852c1c6c570e30cd03a603902f45fb4849c7701"
+  "gitHead": "8ba4361ab9cf6c0ab275ee771a371d4c2ba8cebe"
 }

package/src/createTheme.ts

@@ -0,0 +1,7 @@
+import { BruttalTheme } from './themes/Bruttal/BruttalTheme';
+import deepmerge from 'deepmerge';
+import type { Theme } from 'theme-ui';
+
+export const createTheme = (theme: Theme): Theme => {
+  return deepmerge(BruttalTheme, theme);
+};

package/src/index.ts

@@ -1,2 +1,4 @@
-export * from './themes/themes';
-export * from './themes/fonts';
+export { createTheme } from './createTheme';
+
+export { BruttalTheme } from './themes/Bruttal/BruttalTheme';
+export { BruttalFonts } from './themes/Bruttal/BruttalFonts';

package/src/themes/{bruttalFonts.ts → Bruttal/BruttalFonts.ts}

@@ -1,4 +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/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap',
 ];