@ttoss/theme 1.2.2 → 1.2.4

package/README.md

@@ -1,6 +1,6 @@
 # @ttoss/theme
 
-**@ttoss/theme** is an theme package
+**@ttoss/theme** is an theme package.
 
 ## Install
 

package/dist/esm/index.js

@@ -1,186 +1,253 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
-// 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",
@@ -237,22 +304,20 @@ var BruttalTheme = {
   }
 };
 
-// src/themes/bruttalFonts.ts
+// 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"
-];
-
-// 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"
 ];
 export {
   BruttalFonts,
   BruttalTheme,
-  DefaultFonts,
-  DefaultTheme
+  createTheme
 };

package/dist/index.d.ts

@@ -1,11 +1,9 @@
 import { Theme } from 'theme-ui';
 
-declare const DefaultTheme: Theme;
+declare const createTheme: (theme: Theme) => Theme;
 
 declare const BruttalTheme: Theme;
 
 declare const BruttalFonts: string[];
 
-declare const DefaultFonts: string[];
-
-export { BruttalFonts, BruttalTheme, DefaultFonts, DefaultTheme };
+export { BruttalFonts, BruttalTheme, createTheme };