@trebired/configs 0.4.0 → 0.5.0

package/.trebired/frontend/overlays.ts

@@ -0,0 +1,111 @@
+import { semantic, token, ui } from "./tokens";
+
+export const overlays = {
+  modal: {
+    backdrop: {
+      background: token.colorMix(token.color("gray", 1000), "48%"),
+      blur: "8px",
+      opacity: "1",
+      padding: "24px",
+    },
+    content: {
+      background: semantic.backgroundPage,
+      border: token.border(semantic.borderSurface1),
+      color: semantic.textColor,
+      maxHeight: "min(80vh, 720px)",
+      padding: "20px",
+      radius: ui.radiusLg,
+      shadow: token.variable("shadow-overlay-lg"),
+      width: "min(720px, calc(100vw - 48px))",
+    },
+    motion: {
+      duration: ui.transitionFast,
+      easing: "ease",
+      initialScale: "0.96",
+      openScale: "1",
+    },
+  },
+  popover: {
+    group: {
+      border: "var(--tbf-border-width, 1px) solid color-mix(in srgb, currentColor 12%, transparent)",
+      color: "color-mix(in srgb, var(--tbf-text, currentColor) 72%, transparent)",
+      fontSize: ".85rem",
+      fontWeight: "800",
+      gap: "8px",
+      hoverColor: "var(--tbf-text, currentColor)",
+      indicatorOffset: "0",
+      padding: "11px 12px 9px",
+      radius: "var(--tbf-radius-sm, 0)",
+    },
+    item: {
+      root: {
+        background: "transparent",
+        border: "0",
+        color: "var(--tbf-text-muted, currentColor)",
+        gap: "10px",
+        height: "35px",
+        padding: "5px 10px",
+        radius: ui.radiusSm,
+      },
+      stacked: {
+        gap: "2px",
+        metaColor: "inherit",
+        metaFontSize: ".72rem",
+        paddingBlock: "6px",
+        titleFontSize: ".85rem",
+        titleFontWeight: "800",
+      },
+      state: {
+        hover: {
+          color: "var(--tbf-text, currentColor)",
+        },
+        selected: {
+          color: "var(--tbf-text, currentColor)",
+        },
+      },
+      states: {
+        hover: {
+          background: token.color("gray", 800),
+        },
+        selected: {
+          background: token.color("gray", 800),
+        },
+      },
+    },
+    panel: {
+      background: semantic.backgroundSurface1,
+      border: token.border(semantic.borderSurface1),
+      color: semantic.textColor,
+      gap: "2px",
+      gutter: "1.5rem",
+      "max-w": "20rem",
+      minW: "13.75rem",
+      padding: "8px",
+      radius: ui.radiusLg,
+      shadow: "var(--tbf-shadow, 0 0 0 1px #000)",
+    },
+    trigger: {
+      indicator: {
+        display: "none",
+        size: "0.4rem",
+      },
+    },
+  },
+  tooltip: {
+    motion: {
+      duration: "170ms",
+      easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+    panel: {
+      background: semantic.backgroundSurface1,
+      border: token.border(semantic.borderSurface1),
+      color: semantic.textColor,
+      fontFamily: ui.fontSans,
+      fontSize: "12px",
+      lineHeight: "1.3",
+      padding: "7px 9px",
+      radius: ui.radiusMd,
+      shadow: "var(--tbf-shadow, 0 8px 24px rgba(0, 0, 0, .12))",
+    },
+  },
+};

package/.trebired/frontend/palette.ts

@@ -0,0 +1,111 @@
+import type { FrontendPaletteConfig } from "@trebired/frontend/config";
+
+const grayDark = {
+  0: "#ffffff",
+  50: "#e3e3e4",
+  100: "#cacacb",
+  150: "#bdbdbe",
+  200: "#b1b1b2",
+  250: "#9e9e9f",
+  300: "#8c8c8d",
+  350: "#7a7a7b",
+  400: "#69696a",
+  450: "#5b5b5c",
+  500: "#4e4e4f",
+  550: "#454546",
+  600: "#3d3d3e",
+  650: "#363637",
+  700: "#303031",
+  750: "#2b2b2c",
+  800: "#262627",
+  850: "rgb(34 34 35)",
+  900: "#1f1f20",
+  950: "#1a1a1b",
+  1000: "#141415",
+};
+
+const grayLight = {
+  0: "#141415",
+  50: "#2b2b2c",
+  100: "#3c3c3d",
+  150: "#454546",
+  200: "#4d4d4e",
+  250: "#5c5c5d",
+  300: "#6b6b6c",
+  350: "#7c7c7d",
+  400: "#8e8e8f",
+  450: "#9f9fa0",
+  500: "#afafb0",
+  550: "#bbbbbc",
+  600: "#c8c8c9",
+  650: "#d2d2d3",
+  700: "#dbdbdc",
+  750: "#e2e2e3",
+  800: "#e9e9ea",
+  850: "#eeeeef",
+  900: "#f3f3f4",
+  950: "#f8f8f9",
+  1000: "#ffffff",
+};
+
+export const palette = {
+  modes: {
+    dark: {
+      scale: {
+        blue: { 400: "#bbd0fb", 500: "#81a7ec", 600: "#5d83d8", 700: "#4966b4" },
+        cyan: { 400: "#99e3ef", 500: "#52c2d8", 600: "#2c9ab2", 700: "#1f7689" },
+        gray: grayDark,
+        green: { 400: "#95e0a7", 500: "#4fc56d", 600: "#30994f", 700: "#24783d", 800: "#1c5e2f" },
+        indigo: { 400: "#c0c2fb", 500: "#9090f1", 600: "#6c68e6", 700: "#5350b7" },
+        orange: { 400: "#ffd1aa", 500: "#f0a360", 600: "#e58a3e", 700: "#d2762f" },
+        red: { 400: "#f7b3b3", 500: "#f06f6f", 600: "#dd4e4e", 700: "#b52f2f", 800: "rgb(145 34 34)" },
+        ruby: { 400: "#f1b0cc", 500: "#df6295", 600: "#c13268", 700: "#9d1e50" },
+        yellow: { 400: "#f3e0a3", 500: "#eec757", 600: "#ddb02b", 700: "#bf9517" },
+      },
+    },
+    light: {
+      scale: {
+        blue: { 400: "#273659", 500: "#315290", 600: "#486cbf", 700: "#6989da" },
+        cyan: { 400: "#00383f", 500: "#00525f", 600: "#007286", 700: "#4293a7" },
+        gray: grayLight,
+        green: { 400: "#00411b", 500: "#005a23", 600: "#028037", 700: "#4c9c5f", 800: "#76b783" },
+        indigo: { 400: "#393867", 500: "#5652ad", 600: "#6f6cea", 700: "#8c8ffd" },
+        orange: { 400: "#4b2800", 500: "#713d00", 600: "#894700", 700: "#a35100" },
+        red: { 400: "#652e30", 500: "#ae3239", 600: "#d04143", 700: "#f36962", 800: "#ff9289" },
+        ruby: { 400: "#632e48", 500: "#b43a70", 600: "#e75687", 700: "#ff7da3" },
+        yellow: { 400: "#362a00", 500: "#493800", 600: "#5b4600", 700: "#745900" },
+      },
+    },
+  },
+  semantic: {
+    "background-page": { family: "gray", step: "950" },
+    "background-surface-1": { family: "gray", step: "900" },
+    "background-surface-2": { family: "gray", step: "800" },
+    "border-surface-1": { family: "gray", step: "750" },
+    "border-surface-2": { family: "gray", step: "700" },
+    "canvas-ansi-0": { family: "gray", step: "1000" },
+    "canvas-ansi-1": { family: "red", step: "700" },
+    "canvas-ansi-2": { family: "green", step: "700" },
+    "canvas-ansi-3": { family: "yellow", step: "700" },
+    "canvas-ansi-4": { family: "blue", step: "700" },
+    "canvas-ansi-5": { family: "ruby", step: "700" },
+    "canvas-ansi-6": { family: "cyan", step: "700" },
+    "canvas-ansi-7": { family: "gray", step: "300" },
+    "canvas-ansi-8": { family: "gray", step: "700" },
+    "canvas-ansi-9": { family: "red", step: "500" },
+    "canvas-ansi-10": { family: "green", step: "500" },
+    "canvas-ansi-11": { family: "yellow", step: "500" },
+    "canvas-ansi-12": { family: "blue", step: "500" },
+    "canvas-ansi-13": { family: "ruby", step: "500" },
+    "canvas-ansi-14": { family: "cyan", step: "500" },
+    "canvas-ansi-15": { family: "gray", step: "200" },
+    "focus-color": { family: "blue", step: "500" },
+    "scroll-thumb": { family: "gray", step: "400" },
+    "scroll-thumb-hover": { family: "gray", step: "350" },
+    "scroll-track": { family: "gray", step: "600" },
+    "surface-1": { family: "gray", step: "900" },
+    "surface-2": { family: "gray", step: "800" },
+    "text-color": { family: "gray", step: "100" },
+    "text-color-muted": { family: "gray", step: "300" },
+  },
+} satisfies FrontendPaletteConfig;

package/.trebired/frontend/pill.ts

@@ -0,0 +1,12 @@
+import { token } from "./tokens";
+
+export const primitivePill = {
+  background: token.color("gray", 800),
+  rootBackground: "var(--tbf-ui-pill-bg, transparent)",
+  rootBorder: "var(--tbf-border-width, 1px) solid var(--tbf-border, currentColor)",
+  rootColor: "var(--tbf-text, currentColor)",
+  rootFontSize: "13px",
+  rootGap: "var(--tbf-gap-xs2, 4px)",
+  rootPadding: "3px 8px",
+  rootRadius: "var(--tbf-radius-sm, .5rem)",
+};

package/.trebired/frontend/primitives.ts

@@ -0,0 +1,39 @@
+import { primitiveActionControl } from "./action_control";
+import { primitiveButton } from "./button";
+import { primitiveChoice } from "./choice";
+import { primitiveDisclosure } from "./disclosure";
+import { primitiveDot } from "./dot";
+import { primitiveDropdown } from "./dropdown";
+import { primitiveInput } from "./input";
+import { primitiveLoader } from "./loader";
+import { primitiveMarquee } from "./marquee";
+import { primitivePill } from "./pill";
+import { primitiveProgress } from "./progress";
+import { primitiveQuote } from "./quote";
+import { primitiveSteps } from "./steps";
+import { primitiveTabs } from "./tabs";
+import { primitiveTextLink } from "./text_link";
+import { primitiveToggle } from "./toggle";
+import { primitiveUpload } from "./upload";
+import { primitiveWizard } from "./wizard";
+
+export const primitives = {
+  actionControl: primitiveActionControl,
+  button: primitiveButton,
+  choice: primitiveChoice,
+  disclosure: primitiveDisclosure,
+  dot: primitiveDot,
+  dropdown: primitiveDropdown,
+  input: primitiveInput,
+  loader: primitiveLoader,
+  marquee: primitiveMarquee,
+  pill: primitivePill,
+  progress: primitiveProgress,
+  quote: primitiveQuote,
+  steps: primitiveSteps,
+  tabs: primitiveTabs,
+  textLink: primitiveTextLink,
+  toggle: primitiveToggle,
+  upload: primitiveUpload,
+  wizard: primitiveWizard,
+};

package/.trebired/frontend/progress.ts

@@ -0,0 +1,11 @@
+import { token } from "./tokens";
+
+export const primitiveProgress = {
+  color: token.color("gray", 400),
+  motion: {
+    duration: "180ms",
+    easing: "ease",
+    slideDuration: "1.05s",
+  },
+  track: token.colorMix(token.color("gray", 400), "22%"),
+};

package/.trebired/frontend/quote.ts

@@ -0,0 +1,13 @@
+export const primitiveQuote = {
+  citeColor: "var(--tbf-text-muted, currentColor)",
+  citeFontSize: ".95rem",
+  citeFontWeight: "600",
+  markColor: "var(--tbf-text-muted, currentColor)",
+  markSize: "2.5rem",
+  rootBorder: "color-mix(in srgb, currentColor 22%, transparent)",
+  rootBorderWidth: "3px",
+  rootGap: "var(--tbf-gap-sm, 12px)",
+  rootPaddingInline: "var(--tbf-gap-lg, 24px)",
+  textFontSize: "inherit",
+  textLineHeight: "1.45",
+};

package/.trebired/frontend/shell.ts

@@ -0,0 +1,251 @@
+import { token } from "./tokens";
+
+export const shell = {
+  bottomBar: {
+    background: "var(--tbf-page, var(--background-page, #fff))",
+    border: "var(--tbf-border-width, 1px) solid var(--tbf-border, #000)",
+    height: "52px",
+    itemActiveColor: "var(--tbf-text, #000)",
+    itemColor: "var(--tbf-text-muted, #666)",
+    itemGap: "3px",
+    itemPadding: "7px 5px",
+    labelFontSize: "11px",
+    radius: "var(--tbf-radius, 0)",
+    shadow: "none",
+  },
+  breadcrumb: {
+    fontSize: "0.875rem",
+  },
+  category: {
+    gap: "var(--tbf-shell-footer-column-gap, var(--tbf-gap-sm, 12px))",
+    linksGap: "var(--tbf-shell-footer-links-gap, var(--tbf-gap-sm, 12px))",
+    spacing: "var(--tbf-shell-footer-column-groups-gap, var(--tbf-gap-lg, 40px))",
+  },
+  error: {
+    actions: {
+      align: "center",
+      gap: "0.75rem",
+      offset: "var(--tbf-gap-xs, 8px)",
+    },
+    body: {
+      align: "center",
+      gap: "0.75rem",
+      max: "40rem",
+      textAlign: "center",
+    },
+    lead: {
+      color: "var(--tbf-text-muted, #666)",
+      fontSize: "1.05rem",
+      lineHeight: "1.6",
+      max: "36rem",
+    },
+    locale: {
+      offset: "clamp(1rem, 3vw, 2rem)",
+    },
+    root: {
+      background: "var(--tbf-page, #fff)",
+      color: "var(--tbf-text, #000)",
+      minHeight: "100svh",
+      px: "clamp(1rem, 3vw, 2rem)",
+      py: "clamp(3rem, 8vw, 7rem)",
+    },
+    status: {
+      color: "var(--tbf-text, #000)",
+      fontFamily: "inherit",
+      fontSize: "clamp(4.5rem, 18vw, 10rem)",
+      fontWeight: "900",
+      letterSpacing: "-0.02em",
+      lineHeight: ".9",
+    },
+    title: {
+      fontSize: "clamp(1.25rem, 3vw, 1.75rem)",
+      lineHeight: "1.15",
+    },
+  },
+  footer: {
+    brand: {
+      gap: "var(--tbf-gap-md, 24px)",
+    },
+    column: {
+      gap: "var(--tbf-gap-sm, 12px)",
+      groupsGap: "var(--tbf-gap-lg, 40px)",
+    },
+    columns: {
+      gap: "var(--tbf-gap-lg, 40px)",
+      min: "9rem",
+    },
+    inner: {
+      columns: "minmax(0, 5fr) minmax(0, 7fr)",
+      gap: "var(--tbf-gap-lg, 40px)",
+    },
+    links: {
+      gap: "var(--tbf-gap-sm, 12px)",
+    },
+    maxWidth: "72rem",
+    note: {
+      border: "var(--tbf-border-width, 1px) solid color-mix(in srgb, currentColor 15%, transparent)",
+      fontSize: ".85rem",
+      gap: "var(--tbf-gap-xs2, 4px)",
+      linksGap: "var(--tbf-gap-md, 24px)",
+      paddingBlock: "var(--tbf-gap-md, 24px)",
+    },
+    root: {
+      background: "var(--tbf-page, #fff)",
+      border: "0",
+      color: "var(--tbf-text, #000)",
+      fontSize: "inherit",
+      gap: "var(--tbf-gap-md, 24px)",
+      paddingBlock: "var(--tbf-gap-lg, 40px)",
+      paddingInline: "var(--tbf-container-px, 24px)",
+    },
+    site: {
+      border: "var(--tbf-border-width, 1px) solid color-mix(in srgb, currentColor 15%, transparent)",
+      gap: "var(--tbf-gap-lg, 40px)",
+      links: {
+        gap: "var(--tbf-gap-md, 24px)",
+      },
+      paddingBlock: "var(--tbf-gap-lg, 40px)",
+    },
+    socialColor: "color-mix(in srgb, currentColor 70%, transparent)",
+    socialGap: "6px",
+    socialHoverBackground: "color-mix(in srgb, currentColor 12%, transparent)",
+    socialHoverColor: "inherit",
+    socialIconSize: "1.1rem",
+    socialOffset: "var(--tbf-gap-sm, 12px)",
+    socialRadius: "var(--tbf-radius-sm, 0)",
+    socialSize: "2rem",
+    tagline: {
+      fontSize: "var(--text-size-md, 1rem)",
+      max: "20rem",
+    },
+    tone: {
+      inverse: {
+        background: "var(--tbf-ground, #000)",
+      },
+      muted: {
+        background: "var(--tbf-surface-muted, #eee)",
+      },
+    },
+  },
+  header: {
+    actionsGap: ".5rem",
+    barPaddingInlineWide: "var(--tbf-shell-header-bar-px, var(--tbf-container-px, 1rem))",
+    brand: {
+      btnColor: "currentColor",
+      btnGap: "8px",
+      btnHoverBackground: "transparent",
+      btnHoverColor: "currentColor",
+      btnRadius: "var(--tbf-radius-sm, 0)",
+      color: "var(--tbf-text, currentColor)",
+      fontFamily: "inherit",
+      fontSize: "1.125rem",
+      fontWeight: "700",
+      hoverOpacity: "1",
+      letterSpacing: "normal",
+      logoMaxWidth: "220px",
+      tag: {
+        offsetY: "6px",
+      },
+      verticalGap: "2px",
+    },
+    burger: {
+      duration: "300ms",
+      easing: "ease",
+      fadeDuration: "200ms",
+    },
+    gap: "1rem",
+    maxWidth: "72rem",
+    menuBackground: "var(--tbf-ground, #fff)",
+    menuBorder: "var(--tbf-border-width, 1px) solid var(--tbf-border, currentColor)",
+    menuColor: "var(--tbf-text, currentColor)",
+    menuDividerBorder: "1px solid color-mix(in srgb, currentColor 14%, transparent)",
+    menuFooterGap: ".75rem",
+    menuGap: ".25rem",
+    menuGroupIndent: ".75rem",
+    menuGroupLabelColor: "var(--tbf-text-muted, currentColor)",
+    menuGroupLabelFontFamily: "inherit",
+    menuGroupLabelFontSize: ".875rem",
+    menuGroupLabelFontWeight: "inherit",
+    menuGroupLabelLetterSpacing: "inherit",
+    menuGroupLabelTextTransform: "none",
+    menuLinkPaddingBlock: "0",
+    menuLinksGap: "0",
+    menuPaddingBlock: ".75rem",
+    menuShadow: "0 24px 32px -24px rgba(0, 0, 0, .18)",
+    motionDuration: ".5s",
+    motionEasing: "cubic-bezier(.22, 1, .36, 1)",
+    navGap: ".25rem",
+    paddingBlock: ".5rem",
+    "root-z-index": "var(--tbf-z-header, 920)",
+    rootBackground: "var(--tbf-ground, #fff)",
+    rootBorder: "1px solid color-mix(in srgb, currentColor 14%, transparent)",
+    rootColor: "var(--tbf-text, currentColor)",
+    rootPosition: "sticky",
+    toggleColor: "var(--tbf-text, currentColor)",
+    toggleOffset: "-.5rem",
+    toggleRadius: ".5rem",
+    tone: {
+      duration: "320ms",
+      easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    },
+  },
+  language: {
+    option: {
+      states: {
+        current: {
+          background: token.color("gray", 850),
+          color: "var(--tbf-text, currentColor)",
+        },
+      },
+    },
+  },
+  outline: {
+    border: "var(--tbf-border-width, 1px) solid color-mix(in srgb, currentColor 16%, transparent)",
+    "dock-z": "40",
+    dockBackground: "var(--tbf-overlay-popover-panel-bg, var(--tbf-ground, #fff))",
+    dockBorder: "var(--tbf-border-width, 1px) solid color-mix(in srgb, currentColor 16%, transparent)",
+    dockDuration: ".32s",
+    dockEasing: "cubic-bezier(.22, 1, .36, 1)",
+    dockInset: "var(--tbf-container-px, 16px)",
+    dockMaxHeight: "min(60vh, 26rem)",
+    dockPanelPaddingBlock: ".875rem",
+    dockPanelPaddingInline: "1.125rem",
+    dockShadow: "0 8px 28px color-mix(in srgb, #000 22%, transparent)",
+    dockToggleMax: "min(16rem, 100vw - var(--tbf-shell-outline-dock-inset, var(--tbf-container-px, 16px)) * 2)",
+    dockWidth: "18rem",
+    fontSize: ".8125rem",
+    frame: {
+      asidePaddingBlock: "var(--tbf-gap-lg, 32px)",
+      gutter: "var(--tbf-container-px, 24px)",
+      measure: "72rem",
+      offset: "0",
+    },
+    gap: "var(--tbf-gap-xs, 8px)",
+    layout: {
+      column: "13rem",
+      gap: "var(--tbf-gap-lg, 32px)",
+    },
+    linkActiveBorder: "currentColor",
+    linkActiveColor: "currentColor",
+    linkBorder: "2px solid transparent",
+    linkColor: "color-mix(in srgb, currentColor 55%, transparent)",
+    linkHoverColor: "currentColor",
+    linkPaddingBlock: ".15rem",
+    linkPaddingInline: ".75rem",
+    markerDuration: ".32s",
+    markerEasing: "cubic-bezier(.22, 1, .36, 1)",
+    markerWidth: "2px",
+    maxWidth: "100%",
+    offset: "1.5rem",
+  },
+  theme: {
+    option: {
+      states: {
+        current: {
+          background: token.color("gray", 850),
+          color: "var(--text-color)",
+        },
+      },
+    },
+  },
+};

package/.trebired/frontend/steps.ts

@@ -0,0 +1,6 @@
+export const primitiveSteps = {
+  motion: {
+    duration: "180ms",
+    easing: "ease",
+  },
+};