@ttoss/theme 2.7.4 → 2.8.0

package/dist/esm/chunk-UFX5KJF4.js

@@ -0,0 +1,213 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+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 __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = {
+    exports: {}
+  }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  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));
+
+// src/defaultTokens/borderRadius.ts
+var radii = Object.freeze({
+  none: "0",
+  "2xs": "0.0625rem",
+  xs: "0.125rem",
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  "3xl": "1.5rem",
+  "4xl": "2rem",
+  full: "9999px"
+});
+
+// src/defaultTokens/borders.ts
+var borders = Object.freeze({
+  none: "0px solid",
+  xs: "0.5px solid",
+  sm: "1px solid",
+  md: "2px solid",
+  lg: "4px solid",
+  xl: "8px solid"
+});
+
+// src/defaultTokens/breakpoints.ts
+var breakpoints = Object.freeze({
+  sm: "480px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+});
+
+// src/defaultTokens/sizes.ts
+var sizes = Object.freeze({
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem",
+  container: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px"
+  }
+});
+
+// src/defaultTokens/spacing.ts
+var spacing = Object.freeze({
+  px: "1px",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem"
+});
+
+// src/defaultTokens/typography.ts
+var fontSizes = Object.freeze({
+  "4xs": "0.375rem",
+  "3xs": "0.5rem",
+  "2xs": "0.625rem",
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "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"
+});
+var fontWeights = Object.freeze({
+  hairline: 100,
+  thin: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+});
+var lineHeights = Object.freeze({
+  normal: "normal",
+  none: 1,
+  shorter: 1.25,
+  short: 1.375,
+  moderate: 1.5,
+  tall: 1.625,
+  taller: "2"
+});
+var letterSpacings = Object.freeze({
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+});
+
+// src/defaultTokens/zIndex.ts
+var zIndices = Object.freeze({
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1e3,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipNav: 1600,
+  toast: 1700,
+  tooltip: 1800,
+  max: 2147483647
+});
+
+// src/themes/default/defaultTheme.ts
+var defaultTheme = {
+  breakpoints: Object.values(breakpoints),
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+  radii,
+  sizes,
+  space: spacing,
+  zIndices,
+  borders
+};
+export { __name, __commonJS, __toESM, defaultTheme };

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { createTheme } from "./chunk-6CR6ONEI.js";
+import "./chunk-UFX5KJF4.js";
+export { createTheme };

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

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

package/dist/esm/themes/Oca/Oca.js

@@ -0,0 +1,351 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { createTheme } from "../../chunk-6CR6ONEI.js";
+import { BrutalIcons, BruttalTheme } from "../../chunk-B7KNWUWT.js";
+import { defaultTheme } from "../../chunk-UFX5KJF4.js";
+
+// src/themes/Oca/OcaFonts.ts
+var OcaFonts = ["https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap", "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap"];
+
+// src/themes/Oca/OcaSpacing.ts
+var ocaSpace = Object.freeze({
+  px: "1px",
+  1: "0.25rem",
+  2: "0.375rem",
+  3: "0.5rem",
+  4: "0.5625rem",
+  5: "0.75rem",
+  6: "1rem",
+  7: "1.25rem",
+  8: "1.5rem",
+  9: "1.75rem",
+  10: "2.2rem"
+});
+
+// src/themes/Oca/OcaTheme.ts
+var defaultBorders = defaultTheme.borders;
+var OcaTheme = createTheme({
+  colors: {
+    navigation: {
+      background: {
+        primary: {
+          default: "#FFFFFF"
+        },
+        muted: {
+          default: "#F3F4F6"
+        }
+      },
+      text: {
+        primary: {
+          default: "#111827"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        accent: {
+          default: "#03FF7A"
+        },
+        muted: {
+          default: "#6B7280"
+        }
+      },
+      border: {
+        primary: {
+          default: "#E5E7EB"
+        },
+        muted: {
+          default: "#9CA3AF"
+        }
+      }
+    },
+    input: {
+      border: {
+        muted: {
+          default: "#E5E7EB"
+        },
+        accent: {
+          default: "#03FF7A"
+        }
+      },
+      background: {
+        primary: {
+          default: "#FFFFFF"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        accent: {
+          default: "#03FF7A"
+        },
+        muted: {
+          default: "#F3F4F6",
+          active: "#F3F4F6",
+          disabled: "#9CA3AF"
+        },
+        negative: {
+          default: "red"
+        }
+      },
+      text: {
+        primary: {
+          default: "#111827"
+        },
+        accent: {
+          default: "#03FF7A"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        muted: {
+          default: "#6B7280",
+          active: "#6B7280"
+        },
+        negative: {
+          default: "red"
+        }
+      }
+    },
+    action: {
+      background: {
+        primary: {
+          default: "#111827",
+          active: "#111827",
+          disabled: "#F3F4F6"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        accent: {
+          default: "#03FF7A",
+          active: "#03FF7A"
+        },
+        caution: {
+          default: "orange"
+        },
+        muted: {
+          default: "#F3F4F6"
+        },
+        negative: {
+          default: "red"
+        }
+      },
+      text: {
+        primary: {
+          default: "#FFFFFF"
+        },
+        accent: {
+          default: "#000000"
+        },
+        secondary: {
+          default: "#FFFFFF"
+        },
+        muted: {
+          default: "#6B7280"
+        },
+        caution: {
+          default: "white"
+        },
+        negative: {
+          default: "white"
+        }
+      }
+    },
+    display: {
+      background: {
+        primary: {
+          default: "#FFFFFF"
+        },
+        secondary: {
+          default: "#FFFFFF"
+        },
+        muted: {
+          default: "#F3F4F6"
+        }
+      },
+      text: {
+        primary: {
+          default: "#111827"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        accent: {
+          default: "#03FF7A"
+        },
+        muted: {
+          default: "#6B7280",
+          active: "#6B7280"
+        },
+        negative: {
+          default: "red"
+        }
+      },
+      border: {
+        primary: {
+          default: "#111827"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        muted: {
+          default: "#E5E7EB",
+          active: "#E5E7EB"
+        },
+        negative: {
+          default: "red"
+        },
+        accent: {
+          default: "#03FF7A"
+        }
+      }
+    },
+    feedback: {
+      text: {
+        primary: {
+          default: "#FFFFFF"
+        },
+        secondary: {
+          default: "#FFFFFF"
+        },
+        caution: {
+          default: "#764B00"
+        },
+        negative: {
+          default: "#7D0202"
+        },
+        positive: {
+          default: "#064002"
+        }
+      },
+      border: {
+        primary: {
+          default: "#eef9fd"
+        },
+        secondary: {
+          default: "#465A69"
+        },
+        muted: {
+          default: "#E5E7EB"
+        },
+        negative: {
+          default: "#ffebec"
+        },
+        caution: {
+          default: "#fff8e6",
+          active: "#eead2d"
+        },
+        positive: {
+          default: "#e6f6e6"
+        }
+      },
+      background: {
+        primary: {
+          default: "#eef9fd"
+        },
+        secondary: {
+          default: "#FFFFFF"
+        },
+        muted: {
+          default: "#F3F4F6"
+        },
+        negative: {
+          default: "#ffebec"
+        },
+        caution: {
+          default: "#fff8e6"
+        },
+        positive: {
+          default: "#e6f6e6"
+        }
+      }
+    }
+  },
+  fonts: {
+    heading: '"Outfit", sans-serif',
+    body: '"Source Sans Pro", sans-serif',
+    mono: '"Inconsolata", sans-serif'
+  },
+  borders: {
+    none: defaultBorders.none,
+    xs: defaultBorders.xs,
+    sm: defaultBorders.xs,
+    md: defaultBorders.sm,
+    lg: defaultBorders.md,
+    xl: defaultBorders.lg
+  },
+  space: {
+    ...defaultTheme.space,
+    ...ocaSpace
+  },
+  radii: defaultTheme.radii,
+  /**
+   * Global styles
+   */
+  styles: {
+    root: {
+      /**
+      * select out of forms
+      */
+      ".react-select__control": {
+        color: "display.text.secondary.default",
+        backgroundColor: "display.background.primary.default",
+        borderColor: "display.border.muted.default",
+        borderRadius: "lg",
+        "&.react-select__control--is-disabled": {
+          border: "md",
+          backgroundColor: "input.background.muted.default",
+          borderColor: "display.border.muted.default"
+        }
+      }
+    }
+  },
+  /**
+   * Components
+   */
+  layout: {
+    container: {
+      maxWidth: ["100%", "1100px"],
+      minWidth: ["100%", "1100px"]
+    }
+  },
+  buttons: {
+    accent: {
+      borderRadius: "full"
+    },
+    primary: {
+      borderRadius: "full"
+    },
+    secondary: {
+      borderRadius: "full",
+      border: "none"
+    },
+    destructive: {
+      borderRadius: "full"
+    },
+    closeButton: {
+      borderRadius: "lg"
+    },
+    actionButton: {
+      default: {
+        border: "none",
+        ":is(:focus-within, :hover)": {
+          backgroundColor: "action.background.primary.default"
+        }
+      }
+    }
+  },
+  forms: {
+    input: {
+      borderRadius: "lg"
+    },
+    inputNumber: {
+      borderRadius: "lg"
+    },
+    select: {
+      borderRadius: "lg"
+    },
+    textarea: {
+      borderRadius: "lg"
+    }
+  }
+}, BruttalTheme);
+export { OcaFonts, BrutalIcons as OcaIcons, OcaTheme };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from 'theme-ui';
+export { Theme } from 'theme-ui';
+
+declare const createTheme: (theme: Theme, base?: Theme) => Theme;
+
+export { createTheme };

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

@@ -0,0 +1,9 @@
+export { B as BrutalIcons } from '../../BruttalIcons-f07qZPrW.js';
+import { Theme } from 'theme-ui';
+import '@ttoss/react-icons';
+
+declare const BruttalFonts: string[];
+
+declare const BruttalTheme: Theme;
+
+export { BruttalFonts, BruttalTheme };

package/dist/themes/Oca/Oca.d.ts

@@ -0,0 +1,9 @@
+export { B as OcaIcons } from '../../BruttalIcons-f07qZPrW.js';
+import { Theme } from 'theme-ui';
+import '@ttoss/react-icons';
+
+declare const OcaFonts: string[];
+
+declare const OcaTheme: Theme;
+
+export { OcaFonts, OcaTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/theme",
-  "version": "2.7.4",
+  "version": "2.8.0",
   "description": "Theme for packages.",
   "license": "MIT",
   "author": "ttoss",