@trebired/frontend 5.1.1 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable package changes are documented here.
 
+## 6.0.0
+
+- Replaced the flat frontend config shape with structured `assets`, `design`, `runtime`, and grouped `components` sections.
+- Removed legacy top-level config paths such as `fonts`, `icons`, `palette`, `scales`, `theme`, and `interactions`.
+- Reworked component styling tokens into grouped namespaces for primitives, surfaces, overlays, feedback, shell, and data components.
+- Moved active press feedback config to `design.interactions.activePress`, still disabled by default with `0.9` as the default brightness when enabled.
+- Moved progress runtime tokens to `runtime.progress` and flash tokens to `components.feedback.flash`.
+
+## 5.1.2
+
+- Added `createFrontendTokenHelpers()` for typed frontend config references to palette scale, mode-suffixed palette, semantic variables, CSS variable fallbacks, borders, and color mixes.
+
 ## 5.1.1
 
 - Made active press brightness opt-in by default while preserving `0.9` as the default brightness value when enabled.

package/README.md

@@ -33,9 +33,28 @@ import { defineFrontendConfig } from "<package-name>/config";
 
 export default defineFrontendConfig({
   prefix: "tbf",
-  icons: {
-    endpoint: "/__icons/svg",
-    packs: ["remixicon", "simple-icons"],
+  assets: {
+    icons: {
+      endpoint: "/__icons/svg",
+      packs: ["remixicon", "simple-icons"],
+    },
+  },
+  design: {
+    interactions: {
+      activePress: {
+        enabled: false,
+        brightness: 0.9,
+      },
+    },
+  },
+  runtime: {
+    theme: {
+      defaultMode: "dark",
+      modes: {
+        dark: { scheme: "dark" },
+        light: { scheme: "light" },
+      },
+    },
   },
   systems: {
     actions: true,

package/dist/actions/styles/index.scss

@@ -1,32 +1,32 @@
 .tbf-button {
-  --tbf-action-control-current-icon-color: var(
-    --tbf-action-control-icon-color,
-    var(--tbf-button-icon-color, currentColor)
+  --tbf-primitives-action-control-current-icon-color: var(
+    --tbf-primitives-action-control-slots-icon-color,
+    var(--tbf-primitives-button-slots-icon-color, currentColor)
   );
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tbf-action-control-gap, var(--tbf-button-gap, 8px));
-  min-height: var(--tbf-action-control-min-height, var(--tbf-action-control-height, var(--tbf-button-height, 28px)));
+  gap: var(--tbf-primitives-action-control-root-gap, var(--tbf-primitives-button-root-gap, 8px));
+  min-height: var(--tbf-primitives-action-control-root-min-height, var(--tbf-primitives-action-control-root-height, var(--tbf-primitives-button-root-height, 28px)));
   box-sizing: border-box;
-  padding: var(--tbf-action-control-padding, var(--tbf-button-padding, 0 12px));
-  padding-block: var(--tbf-action-control-padding-block, var(--tbf-button-padding-block, 0));
+  padding: var(--tbf-primitives-action-control-root-padding, var(--tbf-primitives-button-root-padding, 0 12px));
+  padding-block: var(--tbf-primitives-action-control-root-padding-block, var(--tbf-primitives-button-root-padding-block, 0));
   border: var(
-    --tbf-action-control-border,
-    var(--tbf-button-border, var(--border-width) solid var(--border-surface-2))
+    --tbf-primitives-action-control-root-border,
+    var(--tbf-primitives-button-root-border, var(--border-width) solid var(--border-surface-2))
   );
   border-radius: var(
-    --tbf-action-control-radius,
-    var(--tbf-button-radius, var(--radius-md, var(--tbf-radius, 0)))
+    --tbf-primitives-action-control-root-radius,
+    var(--tbf-primitives-button-root-radius, var(--radius-md, var(--tbf-radius, 0)))
   );
-  color: var(--tbf-action-control-color, var(--tbf-button-color, var(--text-color)));
-  background: var(--tbf-action-control-background, var(--tbf-button-background, transparent));
+  color: var(--tbf-primitives-action-control-root-color, var(--tbf-primitives-button-root-color, var(--text-color)));
+  background: var(--tbf-primitives-action-control-root-background, var(--tbf-primitives-button-root-background, transparent));
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
-  font-family: var(--tbf-action-control-font-family, var(--tbf-font-sans, "Inter", sans-serif));
-  font-size: var(--tbf-action-control-font-size, var(--tbf-button-font-size, 12px));
-  font-weight: var(--tbf-action-control-font-weight, var(--tbf-button-font-weight, 600));
+  font-family: var(--tbf-primitives-action-control-root-font-family, var(--tbf-font-sans, "Inter", sans-serif));
+  font-size: var(--tbf-primitives-action-control-root-font-size, var(--tbf-primitives-button-root-font-size, 12px));
+  font-weight: var(--tbf-primitives-action-control-root-font-weight, var(--tbf-primitives-button-root-font-weight, 600));
   line-height: 1.15;
   text-decoration: none;
   white-space: nowrap;
@@ -35,19 +35,19 @@
 .tbf-button:hover,
 .tbf-button[aria-pressed="true"],
 .tbf-button[data-tbf-active="true"] {
-  --tbf-action-control-current-icon-color: var(
-    --tbf-action-control-hover-icon-color,
-    var(--tbf-button-hover-icon-color, currentColor)
+  --tbf-primitives-action-control-current-icon-color: var(
+    --tbf-primitives-action-control-states-hover-icon-color,
+    var(--tbf-primitives-button-states-hover-icon-color, currentColor)
   );
-  border-color: var(--tbf-action-control-hover-border-color, var(--tbf-button-hover-border-color, currentColor));
-  color: var(--tbf-action-control-hover-color, var(--tbf-button-hover-color, currentColor));
-  background: var(--tbf-action-control-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)));
+  border-color: var(--tbf-primitives-action-control-states-hover-border-color, var(--tbf-primitives-button-states-hover-border-color, currentColor));
+  color: var(--tbf-primitives-action-control-states-hover-color, var(--tbf-primitives-button-states-hover-color, currentColor));
+  background: var(--tbf-primitives-action-control-states-hover-background, var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent)));
 }
 
 .tbf-button:disabled,
 .tbf-button[disabled],
 .tbf-button.disabled {
-  opacity: var(--tbf-action-control-disabled-opacity, var(--tbf-button-disabled-opacity, 0.55));
+  opacity: var(--tbf-primitives-action-control-states-disabled-opacity, var(--tbf-primitives-button-states-disabled-opacity, 0.55));
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -57,47 +57,47 @@
 .tbf-button > i svg,
 .tbf-button > [data-icon],
 .tbf-button > [data-icon] svg {
-  color: var(--tbf-action-control-current-icon-color);
+  color: var(--tbf-primitives-action-control-current-icon-color);
   flex: 0 0 auto;
 }
 
 .tbf-button--strong {
-  --tbf-action-control-current-icon-color: var(
-    --tbf-action-control-strong-icon-color,
-    var(--tbf-button-tones-highlight-icon-color, currentColor)
+  --tbf-primitives-action-control-current-icon-color: var(
+    --tbf-primitives-action-control-tones-highlight-icon-color,
+    var(--tbf-primitives-button-tones-highlight-icon-color, currentColor)
   );
   border-color: var(
-    --tbf-action-control-strong-border-color,
-    var(--tbf-button-tones-highlight-border-color, currentColor)
+    --tbf-primitives-action-control-tones-highlight-border-color,
+    var(--tbf-primitives-button-tones-highlight-border-color, currentColor)
   );
   color: var(
-    --tbf-action-control-strong-color,
-    var(--tbf-button-tones-highlight-color, currentColor)
+    --tbf-primitives-action-control-tones-highlight-color,
+    var(--tbf-primitives-button-tones-highlight-color, currentColor)
   );
   background: var(
-    --tbf-action-control-strong-background,
-    var(--tbf-button-tones-highlight-background, var(--tbf-button-background, transparent))
+    --tbf-primitives-action-control-tones-highlight-background,
+    var(--tbf-primitives-button-tones-highlight-background, var(--tbf-primitives-button-root-background, transparent))
   );
 }
 
 .tbf-button--strong:hover,
 .tbf-button--strong[aria-pressed="true"],
 .tbf-button--strong[data-tbf-active="true"] {
-  --tbf-action-control-current-icon-color: var(
-    --tbf-action-control-strong-hover-icon-color,
-    var(--tbf-button-tones-highlight-hover-icon-color, currentColor)
+  --tbf-primitives-action-control-current-icon-color: var(
+    --tbf-primitives-action-control-tones-highlight-states-hover-icon-color,
+    var(--tbf-primitives-button-tones-highlight-states-hover-icon-color, currentColor)
   );
   border-color: var(
-    --tbf-action-control-strong-hover-border-color,
-    var(--tbf-button-tones-highlight-hover-border-color, currentColor)
+    --tbf-primitives-action-control-tones-highlight-states-hover-border-color,
+    var(--tbf-primitives-button-tones-highlight-states-hover-border-color, currentColor)
   );
   color: var(
-    --tbf-action-control-strong-hover-color,
-    var(--tbf-button-tones-highlight-hover-color, currentColor)
+    --tbf-primitives-action-control-tones-highlight-states-hover-color,
+    var(--tbf-primitives-button-tones-highlight-states-hover-color, currentColor)
   );
   background: var(
-    --tbf-action-control-strong-hover-background,
-    var(--tbf-button-tones-highlight-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)))
+    --tbf-primitives-action-control-tones-highlight-states-hover-background,
+    var(--tbf-primitives-button-tones-highlight-states-hover-background, var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent)))
   );
 }
 

package/dist/config/component-tokens.d.ts

@@ -1,149 +1,313 @@
 import type { NormalizedFrontendComponentsConfig } from "./types.js";
 declare const DEFAULT_FRONTEND_COMPONENTS_CONFIG: Readonly<{
-    actionButton: Readonly<{}>;
-    button: Readonly<{
-        disabled: {
-            opacity: string;
-        };
-        font: {
-            size: string;
-            weight: string;
-        };
-        gap: "8px";
-        height: "28px";
-        icon: {
-            fontSize: string;
-            size: string;
-            xs2: {
-                fontSize: string;
-                size: string;
+    data: Readonly<{
+        graph: Readonly<{
+            download: Readonly<{}>;
+            heatmap: Readonly<{}>;
+            upload: Readonly<{}>;
+        }>;
+        log: Readonly<{
+            line: Readonly<{}>;
+            selection: Readonly<{}>;
+        }>;
+    }>;
+    feedback: Readonly<{
+        flash: Readonly<{
+            container: {
+                background: string;
+                border: string;
+                color: string;
+                padding: string;
+                radius: string;
             };
-            xs: {
-                fontSize: string;
-                size: string;
+            intents: {
+                error: {};
+                info: {};
+                success: {};
+                warn: {};
             };
-            sm: {
-                fontSize: string;
-                size: string;
+            layout: {
+                actionsGap: string;
+                bodyGap: string;
+                gap: string;
             };
-            md: {
-                fontSize: string;
-                size: string;
+            placement: {
+                maxWidth: string;
+                offset: string;
             };
-            lg: {
-                fontSize: string;
+            slots: {
+                description: {
+                    fontSize: string;
+                };
+                icon: {
+                    fontWeight: string;
+                    size: string;
+                };
+                progress: {
+                    height: string;
+                };
+                title: {
+                    fontWeight: string;
+                };
+            };
+        }>;
+    }>;
+    overlays: Readonly<{
+        modal: Readonly<{}>;
+        popover: Readonly<{
+            item: {
+                root: {
+                    height: string;
+                    padding: string;
+                    radius: string;
+                };
+                states: {
+                    hover: {};
+                    selected: {};
+                };
+            };
+            panel: {
+                background: string;
+                border: string;
+                color: string;
+                gap: string;
+                padding: string;
+                radius: string;
+            };
+        }>;
+        tooltip: Readonly<{
+            arrow: {
+                borderWidth: string;
                 size: string;
             };
-        };
-        padding: "0 12px";
-        paddingBlock: "0";
-        radius: "var(--radius-md, var(--tbf-radius, 0))";
-        sizes: {
-            sm: {
+            motion: {
+                duration: string;
+                easing: string;
+            };
+            panel: {
+                background: string;
+                border: string;
+                color: string;
+                fontFamily: string;
                 fontSize: string;
-                height: string;
-                paddingInline: string;
+                lineHeight: string;
+                padding: string;
+                radius: string;
             };
-            md: {
+        }>;
+    }>;
+    primitives: Readonly<{
+        actionControl: Readonly<{}>;
+        button: Readonly<{
+            root: {
+                background: string;
+                border: string;
+                color: string;
                 fontSize: string;
+                fontWeight: string;
+                gap: string;
                 height: string;
-                paddingInline: string;
+                padding: string;
+                paddingBlock: string;
+                radius: string;
+            };
+            sizes: {
+                lg: {
+                    fontSize: string;
+                    height: string;
+                    paddingInline: string;
+                };
+                md: {
+                    fontSize: string;
+                    height: string;
+                    paddingInline: string;
+                };
+                sm: {
+                    fontSize: string;
+                    height: string;
+                    paddingInline: string;
+                };
+            };
+            slots: {
+                icon: {
+                    fontSize: string;
+                    size: string;
+                    sizes: {
+                        lg: {
+                            fontSize: string;
+                            size: string;
+                        };
+                        md: {
+                            fontSize: string;
+                            size: string;
+                        };
+                        sm: {
+                            fontSize: string;
+                            size: string;
+                        };
+                        xs: {
+                            fontSize: string;
+                            size: string;
+                        };
+                        xs2: {
+                            fontSize: string;
+                            size: string;
+                        };
+                    };
+                };
             };
-            lg: {
+            states: {
+                disabled: {
+                    opacity: string;
+                };
+                hover: {};
+            };
+            tones: {
+                green: {
+                    states: {
+                        hover: {};
+                    };
+                };
+                highlight: {
+                    states: {
+                        hover: {};
+                    };
+                };
+                red: {
+                    states: {
+                        hover: {};
+                    };
+                };
+                yellow: {
+                    states: {
+                        hover: {};
+                    };
+                };
+            };
+        }>;
+        choice: Readonly<{
+            checked: Readonly<{}>;
+            control: Readonly<{}>;
+        }>;
+        dot: Readonly<{}>;
+        dropdown: Readonly<{
+            arrow: Readonly<{}>;
+            menu: Readonly<{}>;
+            option: Readonly<{
+                states: {
+                    hover: {};
+                    selected: {};
+                };
+            }>;
+        }>;
+        input: Readonly<{
+            states: {
+                focus: {};
+            };
+        }>;
+        loader: Readonly<{}>;
+        pill: Readonly<{}>;
+        progress: Readonly<{}>;
+        tabs: Readonly<{
+            list: {
+                gap: string;
+            };
+            responsive: {
+                mobile: {
+                    fontSize: string;
+                    height: string;
+                };
+            };
+            root: {
+                background: string;
+                border: string;
+                color: string;
+                fontFamily: string;
                 fontSize: string;
                 height: string;
                 paddingInline: string;
+                radius: string;
             };
-        };
-    }>;
-    card: Readonly<{
-        minHeight: "var(--height-xs4, 35px)";
-        padding: "14px 14px 12px 14px";
-        radius: "var(--radius-lg, var(--tbf-radius, 0))";
-        row: {
-            padding: string;
-            radius: string;
-        };
-        title: {
-            fontSize: string;
-            fontWeight: string;
-            margin: string;
-        };
-    }>;
-    flash: Readonly<{
-        actionsGap: "8px";
-        bodyGap: "8px";
-        descriptionFontSize: "0.92rem";
-        gap: "10px";
-        icon: {
-            fontSize: string;
-            fontWeight: string;
-        };
-        maxWidth: "520px";
-        offset: "18px";
-        padding: "15px";
-        progressHeight: "4px";
-        radius: "var(--radius-lg, var(--tbf-radius, 0))";
-        title: {
-            fontWeight: string;
-        };
-    }>;
-    header: Readonly<{
-        brand: {
-            tag: {
-                offsetY: string;
+            states: {
+                active: {};
+                hover: {};
             };
-        };
-    }>;
-    progress: Readonly<{
-        height: "3px";
-    }>;
-    surfaceButton: Readonly<{}>;
-    surfaceCard: Readonly<{}>;
-    tabs: Readonly<{
-        font: {
-            family: string;
-            size: string;
-        };
-        gap: "var(--tbf-gap-sm)";
-        height: "34px";
-        mobile: {
-            fontSize: string;
-            height: string;
-        };
-        paddingInline: "14px";
-        radius: "var(--radius-sm, var(--tbf-radius-sm, 0))";
+        }>;
+        textLink: Readonly<{
+            root: {
+                color: string;
+                fontWeight: string;
+                textDecorationLine: string;
+                textDecorationStyle: string;
+                textDecorationThickness: string;
+                textUnderlineOffset: string;
+                transition: string;
+            };
+            states: {
+                hover: {
+                    textDecorationStyle: string;
+                };
+            };
+        }>;
+        toggle: Readonly<{
+            active: Readonly<{}>;
+            thumb: Readonly<{}>;
+            track: Readonly<{}>;
+        }>;
     }>;
-    textLink: Readonly<{
-        color: "var(--text-color-muted, var(--tbf-text-muted, var(--tbf-text, currentColor)))";
-        fontWeight: "inherit";
-        hover: {
-            color: string;
-            textDecorationStyle: string;
-        };
-        textDecorationLine: "underline";
-        textDecorationStyle: "dotted";
-        textDecorationThickness: "1px";
-        textUnderlineOffset: "3px";
-        transition: "color var(--transition-fast, var(--tbf-transition-fast, 120ms ease))";
+    shell: Readonly<{
+        header: Readonly<{
+            brand: {
+                tag: {
+                    offsetY: string;
+                };
+            };
+        }>;
+        language: Readonly<{
+            option: {
+                states: {
+                    current: {};
+                };
+            };
+        }>;
+        sidebar: Readonly<{}>;
+        theme: Readonly<{
+            option: {
+                states: {
+                    current: {};
+                };
+            };
+        }>;
     }>;
-    tooltip: Readonly<{
-        arrow: {
-            background: string;
-            borderColor: string;
-            borderWidth: string;
-            size: string;
-        };
-        border: "var(--tbf-border-width, 1px) solid var(--tbf-border, #000)";
-        duration: "170ms";
-        easing: "cubic-bezier(0.16, 1, 0.3, 1)";
-        font: {
-            family: string;
-            size: string;
-        };
-        lineHeight: "1.3";
-        padding: "7px 9px";
-        radius: "var(--tbf-radius-sm, 0)";
+    surfaces: Readonly<{
+        button: Readonly<{}>;
+        card: Readonly<{
+            body: {
+                divider: {};
+            };
+            root: {
+                background: string;
+                border: string;
+                minHeight: string;
+                padding: string;
+                radius: string;
+            };
+            row: {
+                background: string;
+                padding: string;
+                radius: string;
+                states: {
+                    excluded: {};
+                    hover: {};
+                    selected: {};
+                };
+            };
+            title: {
+                fontSize: string;
+                fontWeight: string;
+                margin: string;
+            };
+        }>;
     }>;
 }>;
 declare function normalizeComponentsConfig(value: unknown): NormalizedFrontendComponentsConfig;

package/dist/config/component-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-tokens.d.ts","sourceRoot":"","sources":["../../../src/config/component-tokens.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kCAAkC,EAGnC,MAAM,YAAY,CAAC;AAIpB,QAAA,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmGO,CAAC;AA8BhD,iBAAS,yBAAyB,CAAC,KAAK,EAAE,OAAO,GAAG,kCAAkC,CAWrF;AAED,OAAO,EACL,kCAAkC,EAClC,yBAAyB,GAC1B,CAAC"}
+{"version":3,"file":"component-tokens.d.ts","sourceRoot":"","sources":["../../../src/config/component-tokens.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kCAAkC,EAGnC,MAAM,YAAY,CAAC;AAIpB,QAAA,MAAM,kCAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2PO,CAAC;AA8ChD,iBAAS,yBAAyB,CAAC,KAAK,EAAE,OAAO,GAAG,kCAAkC,CAiBrF;AAED,OAAO,EACL,kCAAkC,EAClC,yBAAyB,GAC1B,CAAC"}