@trebired/configs 0.4.0 → 0.5.0

package/.trebired/frontend/surfaces.ts

@@ -0,0 +1,276 @@
+import { semantic, token, ui } from "./tokens";
+
+export const surfaces = {
+  brandCanvas: {
+    art: {
+      border: "1px solid color-mix(in srgb, currentColor 24%, transparent)",
+    },
+    caption: {
+      fontSize: ".8rem",
+      gap: "0.75rem",
+    },
+    clear: {
+      space: "2rem",
+    },
+    guide: {
+      border: "1px dashed color-mix(in srgb, currentColor 38%, transparent)",
+    },
+    measure: {
+      color: "color-mix(in srgb, currentColor 62%, transparent)",
+      fontSize: "0.68rem",
+      offset: "0.75rem",
+    },
+    root: {
+      gap: "0.75rem",
+    },
+    spec: {
+      color: "var(--tbf-text-muted, #666)",
+      fontSize: "0.72rem",
+    },
+    stage: {
+      background: "var(--tbf-page, #fff)",
+      border: "var(--border-width, 1px) solid color-mix(in srgb, currentColor 14%, transparent)",
+      color: "var(--tbf-text, #000)",
+      minHeight: "14rem",
+      padding: "2.5rem",
+      radius: "var(--tbf-radius, 0)",
+    },
+    tones: {
+      accent: {
+        background: "var(--tbf-focus, #000)",
+        color: "var(--tbf-page, #fff)",
+      },
+      inverse: {
+        background: "var(--tbf-ink, #000)",
+        color: "var(--tbf-page, #fff)",
+      },
+      muted: {
+        background: "var(--tbf-surface-muted, #eee)",
+        color: "var(--tbf-text, #000)",
+      },
+    },
+  },
+  button: {
+    root: {
+      background: token.color("gray", 900),
+      border: token.border(semantic.borderSurface2),
+      color: semantic.textColor,
+      fontFamily: "var(--tbf-font-sans, \"Inter\", sans-serif)",
+      fontSize: "12px",
+      fontWeight: "600",
+      gap: "8px",
+      height: "28px",
+      letterSpacing: "var(--tbf-ui-btn-root-letter-spacing, normal)",
+      minHeight: "var(--tbf-surf-btn-root-height, var(--tbf-ui-btn-root-height, 28px))",
+      padding: "0 12px",
+      paddingBlock: "0",
+      radius: ui.radiusMd,
+      textTransform: "var(--tbf-ui-btn-root-text-transform, none)",
+      transition: [
+        "var(--tbf-ui-btn-root-transition, background-color var(--tbf-transition-fast, .18s)",
+        "var(--tbf-transition-easing, ease), border-color var(--tbf-transition-fast, .18s)",
+        "var(--tbf-transition-easing, ease), color var(--tbf-transition-fast, .18s)",
+        "var(--tbf-transition-easing, ease))",
+      ].join(" "),
+      whiteSpace: "var(--tbf-ui-btn-root-white-space, nowrap)",
+      width: "var(--tbf-ui-btn-root-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),
+      },
+    },
+    states: {
+      disabled: {
+        opacity: "0.55",
+      },
+      hover: {
+        background: token.color("gray", 800),
+        borderColor: token.color("gray", 700),
+        color: token.color("gray", 200),
+        iconColor: "currentColor",
+      },
+    },
+    tones: {
+      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",
+          },
+        },
+      },
+    },
+  },
+  card: {
+    body: {
+      divider: {
+        background: semantic.borderSurface1,
+      },
+    },
+    iconRadius: "var(--radius-md, var(--tbf-radius, 0))",
+    root: {
+      background: semantic.backgroundPage,
+      border: token.border(semantic.borderSurface1),
+      color: "var(--tbf-text, #000)",
+      minHeight: ui.heightXs4,
+      padding: "14px 14px 12px 14px",
+      radius: ui.radiusLg,
+      transition: [
+        "background-color var(--tbf-transition-fast, .18s) var(--tbf-transition-easing, ease),",
+        "border-color var(--tbf-transition-fast, .18s) var(--tbf-transition-easing, ease), color",
+        "var(--tbf-transition-fast, .18s) var(--tbf-transition-easing, ease)",
+      ].join(" "),
+    },
+    row: {
+      background: "transparent",
+      border: token.border(semantic.borderSurface1),
+      padding: "9px 12px",
+      radius: ui.radiusLg,
+      states: {
+        excluded: {
+          border: "var(--border-surface-1)",
+        },
+        hover: {
+          background: token.color("gray", 900),
+        },
+        selected: {
+          background: semantic.backgroundSurface1,
+        },
+      },
+    },
+    sectionPadding: "var(--tbf-surf-card-root-padding, 12px)",
+    sizes: {
+      lg: {
+        padding: "var(--tbf-gap-lg, 40px)",
+      },
+      md: {
+        padding: "var(--tbf-gap-md, 24px)",
+      },
+      sm: {
+        padding: "var(--tbf-gap-sm, 12px)",
+      },
+    },
+    states: {
+      hover: {
+        border: "var(--tbf-focus, #000)",
+      },
+    },
+    title: {
+      fontSize: "15px",
+      fontWeight: "700",
+      margin: "0 0 10px 0",
+    },
+    tones: {
+      accent: {
+        color: "var(--tbf-page, #fff)",
+        states: {
+          hover: {
+            background: "var(--tbf-ui-card-tone-accent-state-hover-bg, transparent)",
+            border: "var(--tbf-ui-card-tone-accent-state-hover-border, currentColor)",
+          },
+        },
+        textMuted: "color-mix(in srgb, currentColor 70%, transparent)",
+      },
+      inverse: {
+        color: "var(--tbf-page, #fff)",
+        states: {
+          hover: {
+            background: "var(--tbf-ui-card-tone-inverse-state-hover-bg, transparent)",
+            border: "var(--tbf-ui-card-tone-inverse-state-hover-border, currentColor)",
+          },
+        },
+        textMuted: "color-mix(in srgb, currentColor 62%, transparent)",
+      },
+      muted: {
+        color: "var(--tbf-text, #000)",
+        states: {
+          hover: {
+            background: "var(--tbf-ui-card-tone-muted-state-hover-bg, transparent)",
+            border: "var(--tbf-ui-card-tone-muted-state-hover-border, currentColor)",
+          },
+        },
+      },
+      surface: {
+        background: "var(--tbf-ui-card-tone-surface-bg, var(--tbf-ui-card-root-bg, transparent))",
+        border: "var(--tbf-ui-card-tone-surface-border, currentColor)",
+        states: {
+          hover: {
+            background: "var(--tbf-ui-card-tone-surface-state-hover-bg, transparent)",
+            border: "var(--tbf-ui-card-tone-surface-state-hover-border, currentColor)",
+          },
+        },
+      },
+    },
+  },
+  hairline: {
+    cell: {
+      background: "var(--tbf-page, #fff)",
+      backgroundInverse: "var(--tbf-ink, #000)",
+      color: "var(--tbf-text, #000)",
+      colorInverse: "var(--tbf-page, #fff)",
+      padding: "var(--tbf-gap-md, 24px)",
+      textMuted: "color-mix(in srgb, currentColor 62%, transparent)",
+      textMutedInverse: "color-mix(in srgb, currentColor 62%, transparent)",
+    },
+    motion: {
+      duration: "0.3s",
+      easing: "ease",
+    },
+    root: {
+      background: "var(--tbf-border, color-mix(in srgb, currentColor 10%, transparent))",
+      border: "var(--tbf-border-width, 1px) solid var(--tbf-border, currentColor)",
+      gap: "var(--border-width, 1px)",
+      min: "16rem",
+      radius: "var(--radius-lg, var(--tbf-radius, 0))",
+    },
+  },
+  logo: {
+    root: {
+      height: "2rem",
+      max: "100%",
+    },
+  },
+  motif: {
+    root: {
+      color: "inherit",
+      opacity: "1",
+    },
+  },
+  scrollbar: {
+    root: {
+      gutter: "stable",
+      scheme: "light dark",
+      thumb: "auto",
+      track: "transparent",
+      width: "auto",
+    },
+  },
+  visibility: {
+    duration: "320ms",
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+  },
+};

package/.trebired/frontend/systems.ts

@@ -0,0 +1,20 @@
+import type { FrontendConfig } from "@trebired/frontend/config";
+
+export const systems = {
+  actions: true,
+  flash: true,
+  fullscreen: true,
+  icons: true,
+  inputs: true,
+  layer: true,
+  language: true,
+  layout: true,
+  modal: true,
+  popover: true,
+  primitives: true,
+  progress: true,
+  sidebar: true,
+  surface: true,
+  theme: true,
+  tooltip: true,
+} satisfies FrontendConfig["systems"];

package/.trebired/frontend/tabs.ts

@@ -0,0 +1,42 @@
+import { semantic, token, ui } from "./tokens";
+
+export const primitiveTabs = {
+  list: {
+    gap: "0.5rem",
+  },
+  motion: {
+    duration: "290ms",
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    offset: "8px",
+  },
+  nestedIndicatorColor: "var(--tbf-text-muted, currentColor)",
+  responsive: {
+    mobile: {
+      fontSize: "0.8125rem",
+      height: "2.25rem",
+    },
+  },
+  root: {
+    background: "transparent",
+    border: token.border(semantic.borderSurface1),
+    color: semantic.textColor,
+    fontFamily: ui.fontSans,
+    fontSize: "14px",
+    fontWeight: "inherit",
+    height: "34px",
+    paddingInline: "14px",
+    radius: ui.radiusSm,
+  },
+  states: {
+    active: {
+      background: semantic.backgroundSurface1,
+      borderColor: semantic.borderSurface1,
+      color: "var(--tbf-text, currentColor)",
+    },
+    hover: {
+      background: semantic.backgroundSurface1,
+      borderColor: semantic.borderSurface1,
+      color: "var(--tbf-text, currentColor)",
+    },
+  },
+};

package/.trebired/frontend/text_link.ts

@@ -0,0 +1,37 @@
+import { semantic } from "./tokens";
+
+export const primitiveTextLink = {
+  motion: {
+    duration: ".3s",
+    easing: "ease",
+  },
+  root: {
+    color: semantic.textMuted,
+    decorationUnderlineOffset: ".1875rem",
+    fontWeight: "inherit",
+    letterSpacing: "normal",
+    textDecorationColor: "currentColor",
+    textDecorationLine: "underline",
+    textDecorationStyle: "dotted",
+    textDecorationThickness: "1px",
+    textTransform: "none",
+    textUnderlineOffset: "3px",
+    underlineColor: "currentColor",
+    underlineGap: "calc(.35em + .375rem)",
+    underlineHeight: "max(1px, .0625em)",
+    underlineMidline: ".325em",
+    underlineRadius: ".3em",
+  },
+  states: {
+    active: {
+      color: "var(--tbf-ui-link-state-hover-color, var(--tbf-text, currentColor))",
+      underlineColor: "var(--tbf-ui-link-root-underline-color, currentColor)",
+    },
+    hover: {
+      color: semantic.textColor,
+      decorationLine: "var(--tbf-ui-link-root-decoration-line, none)",
+      textDecorationColor: "currentColor",
+      textDecorationStyle: "solid",
+    },
+  },
+};

package/.trebired/frontend/theme.ts

@@ -0,0 +1,50 @@
+import type {
+  FrontendDesignConfig,
+  FrontendRuntimeConfig,
+  FrontendThemeConfig,
+} from "@trebired/frontend/config";
+
+import { token } from "./tokens";
+
+export const semantics = {
+  selection: {
+    bg: token.colorMix(token.color("gray", 500), "50%"),
+    text: token.color("gray", 200),
+  },
+  status: {
+    error: { color: token.color("red", 500) },
+    success: { color: token.color("green", 500) },
+    warning: { color: token.color("yellow", 500) },
+  },
+  tone: {
+    blue: token.color("blue", 600),
+    cyan: token.color("cyan", 600),
+    error: token.color("red", 600),
+    gray: token.color("gray", 600),
+    green: token.color("green", 600),
+    info: token.color("blue", 600),
+    muted: token.color("gray", 600),
+    purple: token.color("ruby", 600),
+    red: token.color("red", 600),
+    success: token.color("green", 600),
+    warning: token.color("yellow", 600),
+    yellow: token.color("yellow", 600),
+  },
+} satisfies NonNullable<FrontendDesignConfig["semantics"]>;
+
+export const theme = {
+  dark: "dark",
+  defaultMode: "dark",
+  light: "light",
+  modes: {
+    dark: { scheme: "dark" },
+    light: { scheme: "light" },
+  },
+} satisfies FrontendThemeConfig;
+
+export const runtime = {
+  progress: {
+    color: token.color("gray", 600),
+  },
+  theme,
+} satisfies FrontendRuntimeConfig;

package/.trebired/frontend/toggle.ts

@@ -0,0 +1,17 @@
+import { token } from "./tokens";
+
+export const primitiveToggle = {
+  active: {
+    color: token.color("gray", 100),
+  },
+  motion: {
+    duration: "140ms",
+    easing: "ease",
+  },
+  thumb: {
+    background: token.color("gray", 400),
+  },
+  track: {
+    background: token.color("gray", 100),
+  },
+};

package/.trebired/frontend/tokens.ts

@@ -0,0 +1,37 @@
+import { createFrontendTokenHelpers } from "@trebired/frontend/config";
+
+import { palette } from "./palette";
+
+const token = createFrontendTokenHelpers(palette);
+
+const semantic = {
+  backgroundPage: token.semantic("background-page"),
+  backgroundSurface1: token.semantic("background-surface-1"),
+  backgroundSurface2: token.semantic("background-surface-2"),
+  borderSurface1: token.semantic("border-surface-1"),
+  borderSurface2: token.semantic("border-surface-2"),
+  focusColor: token.semantic("focus-color"),
+  scrollThumb: token.semantic("scroll-thumb"),
+  scrollThumbHover: token.semantic("scroll-thumb-hover"),
+  scrollTrack: token.semantic("scroll-track"),
+  surface1: token.semantic("surface-1"),
+  surface2: token.semantic("surface-2"),
+  textColor: token.semantic("text-color"),
+  textMuted: token.semantic("text-color-muted"),
+};
+
+const ui = {
+  borderWidth: token.variable("border-width"),
+  fontSans: token.variable("tbf-font-sans", "\"Inter\", sans-serif"),
+  gapSm: token.variable("tbf-gap-sm"),
+  heightXs4: token.variable("height-xs4", "35px"),
+  radiusSm: token.variable("radius-sm"),
+  radiusMd: token.variable("radius-md", token.variable("tbf-radius", "0")),
+  radiusLg: token.variable("radius-lg", token.variable("tbf-radius", "0")),
+  transitionFast: token.variable(
+    "transition-fast",
+    token.variable("tbf-transition-fast", "120ms ease"),
+  ),
+};
+
+export { semantic, token, ui };

package/.trebired/frontend/typography.ts

@@ -0,0 +1,20 @@
+export const typography = {
+  indent: {
+    border: "var(--tbf-border-width, 1px) solid var(--tbf-border, currentColor)",
+    flow: "0px",
+    size: "var(--tbf-gap-md, 24px)",
+  },
+  label: {
+    caps: {
+      color: "var(--tbf-text-muted, #000)",
+      fontSize: "0.72rem",
+      fontWeight: "600",
+      letterSpacing: "normal",
+    },
+  },
+  outline: {
+    color: "var(--tbf-text, #000)",
+    fill: "var(--tbf-page, #fff)",
+    width: "0.125rem",
+  },
+};

package/.trebired/frontend/upload.ts

@@ -0,0 +1,108 @@
+import { semantic, token, ui } from "./tokens";
+
+export const primitiveUpload = {
+  actions: {
+    gap: ui.gapSm,
+  },
+  content: {
+    gap: ui.gapSm,
+  },
+  cropper: {
+    actions: {
+      gap: ui.gapSm,
+    },
+    description: {
+      color: semantic.textMuted,
+    },
+    header: {
+      gap: "4px",
+    },
+    modal: {
+      maxHeight: "min(90vh, 920px)",
+      width: "min(960px, calc(100vw - 40px))",
+    },
+    rootGap: "var(--tbf-gap-md, 12px)",
+    stage: {
+      background: semantic.backgroundSurface1,
+      border: token.border(semantic.borderSurface1),
+      faceColor: token.colorMix(token.color("gray", 0), "14%"),
+      guideWidth: "1px",
+      height: "min(62vh, 640px)",
+      lineColor: token.color("gray", 0),
+      lineContrastColor: token.color("gray", 1000),
+      lineWidth: "1px",
+      minHeight: "320px",
+      overlayColor: token.colorMix(token.color("gray", 1000), "72%"),
+      pointBackground: token.color("gray", 0),
+      pointBorder: token.border(token.color("gray", 1000), "1px"),
+      pointInset: "0",
+      pointRadius: ui.radiusSm,
+      pointSize: "12px",
+      radius: ui.radiusLg,
+    },
+  },
+  filename: {
+    fontSize: "0.95rem",
+    lineHeight: "1.15",
+  },
+  hint: {
+    color: semantic.textMuted,
+    fontSize: "0.92rem",
+    lineHeight: "1.15",
+  },
+  list: {
+    gap: "4px",
+    maxHeight: "5.25rem",
+    paddingLeft: "18px",
+  },
+  meta: {
+    gap: "0.5rem",
+  },
+  preview: {
+    background: semantic.backgroundSurface2,
+    border: token.border(semantic.borderSurface1),
+    emptyColor: semantic.textMuted,
+    emptyFontSize: "0.82rem",
+    emptyLineHeight: "1.1",
+    emptyPadding: "4px",
+    radius: ui.radiusLg,
+    roundRadius: "999px",
+    size: "64px",
+  },
+  responsive: {
+    mobile: {
+      actionsGap: "0.25rem",
+      cropperModalMaxHeight: "calc(100vh - 24px)",
+      cropperModalWidth: "calc(100vw - 24px)",
+      cropperStageHeight: "min(52vh, 420px)",
+      cropperStageMinHeight: "260px",
+      surfaceGap: "0.5rem",
+      surfacePadding: "0.5rem",
+    },
+  },
+  root: {
+    color: semantic.textColor,
+    gap: ui.gapSm,
+  },
+  surface: {
+    background: semantic.backgroundSurface1,
+    border: token.border(semantic.borderSurface1),
+    color: semantic.textColor,
+    gap: "12px",
+    minHeight: "72px",
+    padding: "12px",
+    radius: ui.radiusLg,
+    states: {
+      drag: {
+        background: semantic.backgroundSurface2,
+        borderColor: semantic.focusColor,
+        shadow: "0 0 0 2px var(--tbf-focus, #000)",
+      },
+      dropBorderStyle: "dashed",
+      hasFiles: {
+        borderStyle: "solid",
+      },
+    },
+    transition: "border-color .14s ease, background .14s ease, box-shadow .14s ease",
+  },
+};

package/.trebired/frontend/wizard.ts

@@ -0,0 +1,6 @@
+export const primitiveWizard = {
+  motion: {
+    duration: "var(--tbf-transition-normal, 240ms)",
+    easing: "ease",
+  },
+};

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to `@trebired/configs` will be documented here.
 
 This project follows semantic versioning once published.
 
+## 0.5.0
+
+- Added the `@trebired/frontend` preset at `.trebired/frontend/config.ts`. An application loads it with `presets: { use: ["@trebired/configs"] }`, the same shape as the Code Discipline preset. It sets fonts, icon packs, palette, semantic tokens, theme, runtime options, systems and every component token, motion included.
+- Added `@trebired/frontend` `^29.10.0` as an optional peer dependency.
+
 ## 0.4.0
 
 - Retargeted the preset at `@trebired/code-discipline` 7.2.0. It named 7.1.2, so every project loading this preset failed its gate once code-discipline reached 7.2.

package/README.md

@@ -1,8 +1,8 @@
 # @trebired/configs
 
-Shared Trebired configuration presets for package tooling.
+Shared Trebired configuration presets for Code Discipline and `@trebired/frontend`.
 
-This package owns reusable Trebired tool configuration payloads. Callers own their repository-specific overrides, banned patterns, source boundaries, and package-specific runtime configs.
+This package owns reusable Trebired configuration payloads. Callers own their repository-specific overrides, banned patterns, source boundaries, and their own `@trebired/frontend` containers.
 
 ## Install
 
@@ -34,15 +34,40 @@ The root export points at `.trebired/code-discipline/config.ts`. The config decl
 
 Repositories add only their own overrides in `.trebired/code-discipline/config.ts`.
 
+### Frontend
+
+`.trebired/frontend/config.ts` is a complete `@trebired/frontend` config: fonts, icon packs, the palette with its dark and light modes, semantic tokens, the theme, runtime options, systems, and every token of every package component, motion included. An application loads it the same way it loads the Code Discipline preset:
+
+```ts
+import { defineConfig } from "@trebired/frontend/config";
+
+import { containers } from "./containers";
+
+export default defineConfig({
+  forVersion: "29.10.0",
+  presets: {
+    use: ["@trebired/configs"],
+  },
+  containers,
+});
+```
+
+`@trebired/frontend` reads the preset from this package's `.trebired/frontend/config.ts` and merges the application's own config over it. The preset declares the `@trebired/frontend` version it targets through `forVersion`.
+
+The application installs the packages the preset names: `@fontsource/inter`, `remixicon`, `simple-icons` and `material-icon-theme`. A missing icon pack renders no icons from that pack.
+
+`@trebired/frontend` is an optional peer dependency. A repository that loads only the Code Discipline preset does not install it.
+
 ## Public API
 
-The package exports one default config object from the package root. It does not export helper functions.
+The package root default-exports the Code Discipline preset. The frontend preset is read from `.trebired/frontend/config.ts` by `@trebired/frontend`, not imported. The package exports no helper functions.
 
 ## What It Does Not Do
 
 This package does not:
 
 - Own application-specific banned patterns.
-- Own package runtime config.
+- Own an application's frontend containers. The preset styles the package's components; each application declares its own boxes.
+- Set `forVersion` for an application's frontend config. The application states the `@trebired/frontend` version it targets.
 - Wrap or replace `@trebired/code-discipline`.
 - Ship generated alias maps for consuming repositories.