@trebired/configs 0.4.0 → 0.6.0

package/.trebired/frontend/preset_01/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/preset_01/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/preset_01/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/preset_01/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/preset_01/theme.ts

@@ -0,0 +1,51 @@
+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),
+  },
+  targetMin: "1.5rem",
+} 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/preset_01/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/preset_01/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/preset_01/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/preset_01/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/preset_01/wizard.ts

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

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `@trebired/configs` will be documented here.
 
 This project follows semantic versioning once published.
 
+## 0.6.0
+
+- Breaking: every preset has a name under its tool. The Code Discipline baseline moved to `.trebired/code-discipline/preset_01/config.ts`, named `@trebired/configs/code-discipline/preset_01`, and the frontend preset to `.trebired/frontend/preset_01/config.ts`, named `@trebired/configs/frontend/preset_01`. The bare `@trebired/configs` and the package's root export are gone; tools resolve the names through `@trebired/utils`.
+- Retargeted the Code Discipline preset at `@trebired/code-discipline` 8.0, the first line that reads named presets. 8.0.1 is its first published release.
+- Set the touch-target floor in the frontend `preset_01` to the dense 1.5rem, so text inputs, dropdowns and buttons keep the preset's control heights.
+- Retargeted the frontend `preset_01` at `@trebired/frontend` 29.11.0 and raised the peer range to `^29.11.0`.
+
+## 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.