@ttoss/theme 1.2.10 → 1.4.0

package/dist/esm/chunk-VIAWD6II.js

@@ -0,0 +1,445 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/themes/Bruttal/BruttalIcons.ts
+import { addIcon } from "@iconify-icon/react";
+import addFilledIcon from "@iconify/icons-carbon/add-filled";
+import calendarIcon from "@iconify/icons-carbon/calendar";
+import checkboxCheckedFilled from "@iconify/icons-carbon/checkbox-checked-filled";
+import checkboxIcon from "@iconify/icons-carbon/checkbox";
+import checkboxIndeterminateFilledIcon from "@iconify/icons-carbon/checkbox-indeterminate-filled";
+import chevronDownIcon from "@iconify/icons-carbon/chevron-down";
+import chevronLeftIcon from "@iconify/icons-carbon/chevron-left";
+import chevronRightIcon from "@iconify/icons-carbon/chevron-right";
+import chevronUpIcon from "@iconify/icons-carbon/chevron-up";
+import closeFilledIcon from "@iconify/icons-carbon/close-filled";
+import copyIcon from "@iconify/icons-carbon/copy";
+import errorFilledIcon from "@iconify/icons-carbon/error-filled";
+import informationFilledIcon from "@iconify/icons-carbon/information-filled";
+import pasteIcon from "@iconify/icons-carbon/paste";
+import radioButtonCheckedIcon from "@iconify/icons-carbon/radio-button-checked";
+import radioButtonIcon from "@iconify/icons-carbon/radio-button";
+import renewIcon from "@iconify/icons-carbon/renew";
+import timeIcon from "@iconify/icons-carbon/time";
+import trashCanIcon from "@iconify/icons-carbon/trash-can";
+import userAvatarFilledAltIcon from "@iconify/icons-carbon/user-avatar-filled-alt";
+import viewFilledIcon from "@iconify/icons-carbon/view-filled";
+import viewOffFilledIcon from "@iconify/icons-carbon/view-off-filled";
+import warningFilledIcon from "@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
+};
+addIcon("add", addFilledIcon);
+addIcon("avatar", userAvatarFilledAltIcon);
+addIcon("calendar", calendarIcon);
+addIcon("checkbox-checked", checkboxCheckedFilled);
+addIcon("checkbox-indeterminate", checkboxIndeterminateFilledIcon);
+addIcon("checkbox-unchecked", checkboxIcon);
+addIcon("close", closeFilledIcon);
+addIcon("copy", copyIcon);
+addIcon("delete", trashCanIcon);
+addIcon("error", errorFilledIcon);
+addIcon("info", informationFilledIcon);
+addIcon("paste", pasteIcon);
+addIcon("picker-down", chevronDownIcon);
+addIcon("picker-up", chevronUpIcon);
+addIcon("picker-left", chevronLeftIcon);
+addIcon("picker-right", chevronRightIcon);
+addIcon("radio-not-selected", radioButtonIcon);
+addIcon("radio-selected", radioButtonCheckedIcon);
+addIcon("refresh", renewIcon);
+addIcon("replicate", replicateIcon);
+addIcon("small-close", closeFilledIcon);
+addIcon("time", timeIcon);
+addIcon("view-off", viewOffFilledIcon);
+addIcon("view-on", viewFilledIcon);
+addIcon("warning", warningFilledIcon);
+
+// 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"
+];
+
+// 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",
+      fontSize: "base",
+      margin: 0,
+      padding: 0
+    }
+  },
+  /**
+   * 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"
+    }
+  }
+};
+
+export {
+  BruttalFonts,
+  BruttalTheme
+};