@trebired/configs 0.4.0 → 0.5.0

package/.trebired/frontend/action_control.ts

@@ -0,0 +1,43 @@
+export const primitiveActionControl = {
+  rootBackground: "var(--tbf-ui-btn-root-bg, transparent)",
+  rootBorder: "var(--tbf-ui-btn-root-border, var(--tbf-border-width, 1px) solid var(--tbf-border, currentColor))",
+  rootColor: "var(--tbf-ui-btn-root-color, var(--tbf-text, currentColor))",
+  rootFontFamily: "var(--tbf-font-sans, \"Inter\", sans-serif)",
+  rootFontSize: "var(--tbf-ui-btn-root-font-size, 12px)",
+  rootFontWeight: "var(--tbf-ui-btn-root-font-weight, 600)",
+  rootGap: "var(--tbf-ui-btn-root-gap, 8px)",
+  rootHeight: "var(--tbf-ui-btn-root-height, 28px)",
+  rootMinHeight: "var(--tbf-ui-action-root-height, var(--tbf-ui-btn-root-height, 28px))",
+  rootPadding: "var(--tbf-ui-btn-root-padding, 0 12px)",
+  rootPaddingBlock: "var(--tbf-ui-btn-root-py, 0)",
+  rootRadius: "var(--tbf-ui-btn-root-radius, var(--radius-md, var(--tbf-radius, 0)))",
+  slotIcon: "var(--tbf-ui-btn-slot-icon, currentColor)",
+  states: {
+    disabledOpacity: "var(--tbf-ui-btn-state-disabled-opacity, .55)",
+    hover: {
+      background: "var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))",
+      border: "var(--tbf-ui-btn-state-hover-border, currentColor)",
+      color: "var(--tbf-ui-btn-state-hover-color, currentColor)",
+      icon: "var(--tbf-ui-btn-state-hover-icon, currentColor)",
+    },
+  },
+  tones: {
+    highlight: {
+      background: "var(--tbf-ui-btn-tone-highlight-bg, var(--tbf-ui-btn-root-bg, transparent))",
+      border: "var(--tbf-ui-btn-tone-highlight-border, currentColor)",
+      color: "var(--tbf-ui-btn-tone-highlight-color, currentColor)",
+      icon: "var(--tbf-ui-btn-tone-highlight-icon, currentColor)",
+      states: {
+        hover: {
+          background: [
+            "var(--tbf-ui-btn-tone-highlight-state-hover-bg, var(--tbf-ui-btn-state-hover-bg,",
+            "var(--tbf-ui-btn-root-bg, transparent)))",
+          ].join(" "),
+          border: "var(--tbf-ui-btn-tone-highlight-state-hover-border, currentColor)",
+          color: "var(--tbf-ui-btn-tone-highlight-state-hover-color, currentColor)",
+          icon: "var(--tbf-ui-btn-tone-highlight-state-hover-icon, currentColor)",
+        },
+      },
+    },
+  },
+};

package/.trebired/frontend/button.ts

@@ -0,0 +1,203 @@
+import { semantic, token, ui } from "./tokens";
+
+export const primitiveButton = {
+  root: {
+    background: token.color("gray", 900),
+    border: token.border(semantic.borderSurface2),
+    color: semantic.textColor,
+    fontSize: "12px",
+    fontWeight: "600",
+    gap: "8px",
+    height: "28px",
+    letterSpacing: "normal",
+    padding: "0 12px",
+    paddingBlock: "0",
+    radius: ui.radiusMd,
+    textTransform: "none",
+    whiteSpace: "nowrap",
+    width: "auto",
+  },
+  sizes: {
+    lg: {
+      fontSize: "13px",
+      height: "34px",
+      paddingInline: "14px",
+    },
+    md: {
+      fontSize: "12px",
+      height: "28px",
+      paddingInline: "12px",
+    },
+    sm: {
+      fontSize: "11px",
+      height: "24px",
+      paddingInline: "9px",
+    },
+  },
+  slots: {
+    icon: {
+      color: token.color("gray", 300),
+      fontSize: "15px",
+      radius: "var(--tbf-ui-btn-root-radius, var(--radius-md, var(--tbf-radius, 0)))",
+      size: "28px",
+      sizes: {
+        lg: {
+          fontSize: "18px",
+          size: "34px",
+        },
+        md: {
+          fontSize: "16px",
+          size: "30px",
+        },
+        sm: {
+          fontSize: "14px",
+          size: "26px",
+        },
+        xs: {
+          fontSize: "12px",
+          size: "22px",
+        },
+        xs2: {
+          fontSize: "10px",
+          size: "18px",
+        },
+      },
+    },
+  },
+  states: {
+    disabled: {
+      opacity: "0.55",
+    },
+    hover: {
+      background: token.color("gray", 800),
+      borderColor: token.color("gray", 700),
+      color: token.color("gray", 200),
+      iconColor: "currentColor",
+    },
+  },
+  tones: {
+    green: {
+      borderInlineColor: token.color("green", 700),
+      states: {
+        hover: {
+          background: token.color("green", 800),
+          borderColor: token.color("green", 700),
+          color: token.modeColor("gray", 0, "dark"),
+          iconColor: "currentColor",
+        },
+      },
+    },
+    highlight: {
+      background: token.color("gray", 100),
+      borderColor: token.color("gray", 100),
+      color: token.color("gray", 950),
+      iconColor: token.color("gray", 800),
+      states: {
+        hover: {
+          background: token.color("gray", 200),
+          borderColor: token.color("gray", 100),
+          color: token.color("gray", 900),
+          iconColor: "currentColor",
+        },
+      },
+    },
+    red: {
+      borderInlineColor: token.color("red", 700),
+      states: {
+        hover: {
+          background: token.color("red", 800),
+          borderColor: token.color("red", 700),
+          color: token.modeColor("gray", 50, "dark"),
+          iconColor: "currentColor",
+        },
+      },
+    },
+    yellow: {
+      borderInlineColor: token.color("yellow", 700),
+      states: {
+        hover: {
+          background: token.color("yellow", 700),
+          borderColor: token.color("yellow", 600),
+          color: token.modeColor("gray", 50, "dark"),
+          iconColor: "currentColor",
+        },
+      },
+    },
+  },
+  variants: {
+    chrome: {
+      bg: "transparent",
+      border: "color-mix(in srgb, currentColor 24%, transparent)",
+      color: "currentColor",
+      fontSize: "0.78125rem",
+      height: "2rem",
+      icon: "currentColor",
+      padding: "0 0.625rem",
+      radius: "var(--tbf-ui-btn-root-radius, var(--radius-md, var(--tbf-radius, 0)))",
+      states: {
+        hover: {
+          background: "color-mix(in srgb, currentColor 8%, transparent)",
+          border: "color-mix(in srgb, currentColor 42%, transparent)",
+          color: "currentColor",
+          icon: "currentColor",
+        },
+      },
+    },
+    danger: {
+      background: "transparent",
+      border: "currentColor",
+      color: "var(--tbf-tone-red, var(--tbf-tone-error, currentColor))",
+      icon: "currentColor",
+      states: {
+        hover: {
+          background: "color-mix(in srgb, var(--tbf-tone-red, var(--tbf-tone-error, currentColor)) 12%, transparent)",
+          border: "currentColor",
+          color: "currentColor",
+          icon: "currentColor",
+        },
+      },
+    },
+    ghost: {
+      background: "transparent",
+      border: "transparent",
+      color: "var(--tbf-text, currentColor)",
+      icon: "currentColor",
+      states: {
+        hover: {
+          background: "color-mix(in srgb, currentColor 8%, transparent)",
+          border: "transparent",
+          color: "currentColor",
+          icon: "currentColor",
+        },
+      },
+    },
+    primary: {
+      background: "var(--tbf-text, currentColor)",
+      border: "transparent",
+      color: "var(--tbf-page, canvas)",
+      icon: "currentColor",
+      states: {
+        hover: {
+          background: "color-mix(in srgb, var(--tbf-text, currentColor) 88%, var(--tbf-page, canvas))",
+          border: "transparent",
+          color: "var(--tbf-page, canvas)",
+          icon: "currentColor",
+        },
+      },
+    },
+    secondary: {
+      background: "var(--tbf-ui-btn-root-bg, transparent)",
+      border: "var(--tbf-border, currentColor)",
+      color: "var(--tbf-ui-btn-root-color, var(--tbf-text, currentColor))",
+      icon: "currentColor",
+      states: {
+        hover: {
+          background: "var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))",
+          border: "var(--tbf-border, currentColor)",
+          color: "currentColor",
+          icon: "currentColor",
+        },
+      },
+    },
+  },
+};

package/.trebired/frontend/choice.ts

@@ -0,0 +1,19 @@
+import { token } from "./tokens";
+
+export const primitiveChoice = {
+  checked: {
+    background: token.color("gray", 900),
+    border: "currentColor",
+  },
+  control: {
+    activeIconColor: token.color("gray", 600),
+    borderColor: token.color("gray", 600),
+    checkedBackground: token.color("gray", 100),
+    checkedBorderColor: token.color("gray", 100),
+    checkedColor: token.color("gray", 900),
+    color: token.color("gray", 800),
+    partialBorderColor: token.color("gray", 400),
+    partialColor: token.color("gray", 200),
+    partialIconColor: token.color("gray", 300),
+  },
+};

package/.trebired/frontend/components.ts

@@ -0,0 +1,21 @@
+import type { FrontendComponentsConfig } from "@trebired/frontend/config";
+
+import { data } from "./data";
+import { feedback } from "./feedback";
+import { media } from "./media";
+import { overlays } from "./overlays";
+import { primitives } from "./primitives";
+import { shell } from "./shell";
+import { surfaces } from "./surfaces";
+import { typography } from "./typography";
+
+export const components = {
+  data,
+  feedback,
+  media,
+  overlays,
+  primitives,
+  shell,
+  surfaces,
+  typography,
+} satisfies FrontendComponentsConfig;

package/.trebired/frontend/config.ts

@@ -0,0 +1,40 @@
+import type { FrontendConfig } from "@trebired/frontend/config";
+
+import { components } from "./components";
+import { palette } from "./palette";
+import { systems } from "./systems";
+import { runtime, semantics } from "./theme";
+
+export default {
+  forVersion: "29.10.0",
+  assets: {
+    fonts: {
+      families: {
+        sans: {
+          package: "inter",
+          family: "Inter",
+          subsets: ["latin", "latin-ext"],
+          weights: [100, 400, 500, 600, 700],
+          styles: ["normal", "italic"],
+        },
+      },
+      sans: "\"Inter\", sans-serif",
+    },
+    icons: {
+      endpoint: "/__icons/svg",
+      packs: ["remixicon", "simple-icons", "material-icon-theme"],
+    },
+  },
+  components,
+  design: {
+    interactions: {
+      activePress: {
+        enabled: true,
+      },
+    },
+    palette,
+    semantics,
+  },
+  runtime,
+  systems,
+} satisfies FrontendConfig;

package/.trebired/frontend/data.ts

@@ -0,0 +1,33 @@
+import { token } from "./tokens";
+
+export const data = {
+  graph: {
+    download: {
+      fill: token.colorMix(token.color("blue", 500), "16%"),
+      stroke: token.color("blue", 400),
+    },
+    heatmap: {
+      empty: token.color("gray", 900),
+      level1: token.color("green", 800),
+      level2: token.color("green", 700),
+      level3: token.color("green", 600),
+      level4: token.color("green", 500),
+    },
+    upload: {
+      fill: token.colorMix(token.color("green", 500), "16%"),
+      stroke: token.color("green", 400),
+    },
+  },
+  log: {
+    line: {
+      states: {
+        hover: {
+          background: token.colorMix(token.color("gray", 700), "28%"),
+        },
+      },
+    },
+    selection: {
+      background: token.color("gray", 700),
+    },
+  },
+};

package/.trebired/frontend/disclosure.ts

@@ -0,0 +1,10 @@
+export const primitiveDisclosure = {
+  indicatorColor: "var(--tbf-text-muted, currentColor)",
+  indicatorOffset: "auto",
+  indicatorSize: "1.35em",
+  panelGap: "var(--tbf-gap-sm, 12px)",
+  rootPadding: "var(--tbf-gap-sm, 8px)",
+  triggerColor: "var(--tbf-text, #000)",
+  triggerFontSize: "inherit",
+  triggerFontWeight: "inherit",
+};

package/.trebired/frontend/dot.ts

@@ -0,0 +1,5 @@
+import { token } from "./tokens";
+
+export const primitiveDot = {
+  color: token.color("gray", 600),
+};

package/.trebired/frontend/dropdown.ts

@@ -0,0 +1,25 @@
+import { token } from "./tokens";
+
+export const primitiveDropdown = {
+  arrow: {
+    color: token.color("gray", 500),
+  },
+  menu: {
+    background: token.color("gray", 900),
+  },
+  motion: {
+    closeDuration: "240ms",
+    duration: "120ms",
+    easing: "ease",
+  },
+  option: {
+    states: {
+      hover: {
+        background: token.color("gray", 800),
+      },
+      selected: {
+        background: token.color("gray", 800),
+      },
+    },
+  },
+};

package/.trebired/frontend/feedback.ts

@@ -0,0 +1,56 @@
+import { token, ui } from "./tokens";
+
+export const feedback = {
+  flash: {
+    container: {
+      background: token.color("gray", 900),
+      border: token.border(token.color("gray", 800), "1px"),
+      color: token.color("gray", 100),
+      padding: "15px",
+      radius: ui.radiusLg,
+      shadow: "var(--tbf-shadow, none)",
+    },
+    intents: {
+      error: {
+        iconColor: token.color("red", 500),
+      },
+      info: {
+        iconColor: token.color("gray", 500),
+      },
+      success: {
+        iconColor: token.color("green", 500),
+      },
+      warn: {
+        iconColor: token.color("yellow", 500),
+      },
+    },
+    layout: {
+      actionsGap: "8px",
+      bodyGap: "8px",
+      gap: "10px",
+    },
+    placement: {
+      maxWidth: "520px",
+      offset: "18px",
+    },
+    slotIcon: "currentColor",
+    slots: {
+      description: {
+        color: token.color("gray", 400),
+        fontSize: "0.92rem",
+      },
+      icon: {
+        fontWeight: "700",
+        size: "18px",
+      },
+      progress: {
+        color: token.color("gray", 600),
+        height: "4px",
+      },
+      title: {
+        color: "currentColor",
+        fontWeight: "400",
+      },
+    },
+  },
+};

package/.trebired/frontend/input.ts

@@ -0,0 +1,31 @@
+import { token } from "./tokens";
+
+export const primitiveInput = {
+  file: {
+    button: {
+      background: token.color("gray", 700),
+      states: {
+        hover: {
+          background: token.color("gray", 700),
+        },
+      },
+    },
+  },
+  rootFontSize: "14px",
+  rootPadding: "7px 9px",
+  sizes: {
+    lgFontSize: "15px",
+    lgHeight: "40px",
+    lgPadding: "9px 12px",
+    sm: {
+      fontSize: "13px",
+      height: "24px",
+      padding: "5px 8px",
+    },
+  },
+  states: {
+    focus: {
+      color: token.color("gray", 600),
+    },
+  },
+};

package/.trebired/frontend/loader.ts

@@ -0,0 +1,8 @@
+import { token } from "./tokens";
+
+export const primitiveLoader = {
+  color: token.color("gray", 300),
+  motion: {
+    duration: "1s",
+  },
+};

package/.trebired/frontend/marquee.ts

@@ -0,0 +1,19 @@
+export const primitiveMarquee = {
+  item: {
+    gap: "1.5rem",
+    px: "0.875rem",
+  },
+  root: {
+    background: "transparent",
+    border: "0",
+    color: "inherit",
+    py: "1.1rem",
+  },
+  separator: {
+    fontSize: "1em",
+    opacity: "0.45",
+  },
+  track: {
+    duration: "38s",
+  },
+};

package/.trebired/frontend/media.ts

@@ -0,0 +1,63 @@
+export const media = {
+  carousel: {
+    motion: {
+      controlDuration: "180ms",
+      duration: "1000ms",
+      easing: "ease",
+    },
+  },
+  embedFrame: {
+    motion: {
+      duration: "0.2s",
+      easing: "ease",
+    },
+    ratio: "16 / 9",
+  },
+  expandableImage: {
+    icon: {
+      background: "oklch(14.5% 0 0 / 70%)",
+      blur: "0px",
+      radius: "0",
+      size: "2.5rem",
+    },
+    motion: {
+      easing: "ease",
+      iconDuration: "180ms",
+      zoomDuration: "500ms",
+    },
+    ratio: "auto",
+  },
+  lightbox: {
+    backdrop: {
+      background: "oklch(14.5% 0 0 / 88%)",
+      blur: "0px",
+    },
+    caption: {
+      color: "oklch(100% 0 0 / 70%)",
+      fontSize: "0.875rem",
+      fontWeight: "700",
+    },
+    control: {
+      background: "oklch(14.5% 0 0 / 35%)",
+      blur: "4px",
+      radius: "0",
+      size: "3rem",
+      sizeWide: "3.5rem",
+      states: {
+        hover: {
+          background: "color-mix(in oklch, var(--primary-500), transparent 30%)",
+        },
+      },
+    },
+    image: {
+      radius: "0",
+      shadow: "0 25px 50px -12px oklch(0% 0 0 / 25%)",
+    },
+    motion: {
+      closeDuration: "320ms",
+      controlDuration: "180ms",
+      duration: "300ms",
+      easing: "ease-out",
+    },
+  },
+};