@trebired/frontend 7.1.18 → 8.0.1

package/dist/layout/styles/chrome.scss

@@ -1,62 +1,76 @@
-.tbf-header,
-[data-tbf-header] {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("header")},
+
+#{ns.data("header")} {
   display: flex;
-  min-height: var(--tbf-header-min-height, 67px);
+  min-height: var(#{ns.css-var("header-min-height")}, 67px);
   box-sizing: border-box;
   align-items: center;
-  gap: var(--tbf-gap-sm, 8px);
-  padding: var(--tbf-header-padding, 8px 18px);
-  border-block-end: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-page, var(--background-page, #fff));
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
+  padding: var(#{ns.css-var("header-padding")}, 8px 18px);
+  border-block-end: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("page")}, var(--background-page, #fff));
 }
 
-[data-tbf-header][data-tbf-header-primary],
-[data-tbf-header][data-tbf-header-secondary] {
+#{ns.data("header")}#{ns.data("header-primary")},
+
+#{ns.data("header")}#{ns.data("header-secondary")} {
   position: sticky;
   inset-block-start: 0;
-  z-index: var(--tbf-z-header, 920);
+  z-index: var(#{ns.css-var("z-header")}, 920);
 }
 
-[data-tbf-header][data-tbf-header-secondary] {
-  inset-block-start: var(--tbf-header-height, 0px);
-  z-index: var(--tbf-z-secondary-header, 910);
+#{ns.data("header")}#{ns.data("header-secondary")} {
+  inset-block-start: var(#{ns.css-var("header-height")}, 0px);
+  z-index: var(#{ns.css-var("z-secondary-header")}, 910);
 }
 
-.tbf-header__brand,
-[data-tbf-header-brand],
-.tbf-header__group,
-[data-tbf-header-group],
-.tbf-header__nav,
-[data-tbf-header-nav],
-.tbf-header__actions,
-[data-tbf-header-actions] {
+#{ns.element-class("header", "brand")},
+
+#{ns.data("header-brand")},
+
+#{ns.element-class("header", "group")},
+
+#{ns.data("header-group")},
+
+#{ns.element-class("header", "nav")},
+
+#{ns.data("header-nav")},
+
+#{ns.element-class("header", "actions")},
+
+#{ns.data("header-actions")} {
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-header__brand,
-[data-tbf-header-brand] {
+#{ns.element-class("header", "brand")},
+
+#{ns.data("header-brand")} {
   flex: 0 1 auto;
   font-weight: 700;
 }
 
-.tbf-header__nav,
-[data-tbf-header-nav] {
+#{ns.element-class("header", "nav")},
+
+#{ns.data("header-nav")} {
   flex: 1 1 auto;
   overflow: hidden;
 }
 
-.tbf-header__actions,
-[data-tbf-header-actions] {
+#{ns.element-class("header", "actions")},
+
+#{ns.data("header-actions")} {
   flex: 0 0 auto;
   margin-inline-start: auto;
 }
 
-.tbf-shell-header-brand__link,
-.tbf-shell-header-brand__mark {
+#{ns.element-class("shell-header-brand", "link")},
+
+#{ns.element-class("shell-header-brand", "mark")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
@@ -64,103 +78,107 @@
   text-decoration: none;
 }
 
-.tbf-shell-header-brand__identity {
+#{ns.element-class("shell-header-brand", "identity")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
-  gap: var(--tbf-shell-header-brand-gap, var(--tbf-gap-xs, 6px));
+  gap: var(#{ns.css-var("shell-header-brand-gap")}, var(#{ns.css-var("gap-xs")}, 6px));
 }
 
-.tbf-shell-header-brand__identity[data-tbf-brand-tag-align="vertical"] {
+#{ns.element-class("shell-header-brand", "identity")}#{ns.data("brand-tag-align", "vertical")} {
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--tbf-shell-header-brand-vertical-gap, 2px);
+  gap: var(#{ns.css-var("shell-header-brand-vertical-gap")}, 2px);
 }
 
-.tbf-shell-header-brand__logo,
-.tbf-shell-header-brand__tag,
-.tbf-shell-header-brand__meta {
+#{ns.element-class("shell-header-brand", "logo")},
+
+#{ns.element-class("shell-header-brand", "tag")},
+
+#{ns.element-class("shell-header-brand", "meta")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
 }
 
-.tbf-shell-header-brand__tag {
-  transform: translateY(var(--tbf-shell-header-brand-tag-offset-y, 0));
+#{ns.element-class("shell-header-brand", "tag")} {
+  transform: translateY(var(#{ns.css-var("shell-header-brand-tag-offset-y")}, 0));
 }
 
-.tbf-shell-header-toggle-group {
+#{ns.class("shell-header-toggle-group")} {
   display: none;
   margin-inline-start: auto;
 }
 
-.tbf-mobile-nav,
-[data-tbf-mobile-nav] {
+#{ns.class("mobile-nav")},
+
+#{ns.data("mobile-nav")} {
   position: fixed;
-  z-index: var(--tbf-z-mobile-nav, 940);
+  z-index: var(#{ns.css-var("z-mobile-nav")}, 940);
   inset: 0;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
-  opacity var(--tbf-transition-normal, 180ms) ease,
-  visibility 0s linear var(--tbf-transition-normal, 180ms);
+  opacity var(#{ns.css-var("transition-normal")}, 180ms) ease,
+  visibility 0s linear var(#{ns.css-var("transition-normal")}, 180ms);
 }
 
-[data-tbf-mobile-nav][data-tbf-mobile-nav-open="true"] {
+#{ns.data("mobile-nav")}#{ns.data("mobile-nav-open", "true")} {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition:
-  opacity var(--tbf-transition-normal, 180ms) ease,
+  opacity var(#{ns.css-var("transition-normal")}, 180ms) ease,
   visibility 0s;
 }
 
-.tbf-mobile-nav__scrim {
+#{ns.element-class("mobile-nav", "scrim")} {
   position: absolute;
   inset: 0;
-  background: var(--tbf-overlay, rgb(0 0 0 / 48%));
+  background: var(#{ns.css-var("overlay")}, rgb(0 0 0 / 48%));
 }
 
-.tbf-mobile-nav__panel,
-[data-tbf-mobile-nav-panel] {
+#{ns.element-class("mobile-nav", "panel")},
+
+#{ns.data("mobile-nav-panel")} {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   display: flex;
-  width: min(var(--tbf-mobile-nav-width, 340px), calc(100vw - 38px));
+  width: min(var(#{ns.css-var("mobile-nav-width")}, 340px), calc(100vw - 38px));
   max-width: calc(100vw - 24px);
   box-sizing: border-box;
   flex-direction: column;
-  gap: var(--tbf-gap-md, 12px);
-  padding: var(--tbf-mobile-nav-padding, 16px);
+  gap: var(#{ns.css-var("gap-md")}, 12px);
+  padding: var(#{ns.css-var("mobile-nav-padding")}, 16px);
   overflow-y: auto;
-  color: var(--tbf-text, #000);
-  background: var(--tbf-page, var(--background-page, #fff));
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("page")}, var(--background-page, #fff));
   transform: translateX(-100%);
-  transition: transform var(--tbf-transition-normal, 180ms) ease;
+  transition: transform var(#{ns.css-var("transition-normal")}, 180ms) ease;
 }
 
-[data-tbf-mobile-nav][data-tbf-mobile-nav-open="true"] [data-tbf-mobile-nav-panel] {
+#{ns.data("mobile-nav")}#{ns.data("mobile-nav-open", "true")} #{ns.data("mobile-nav-panel")} {
   transform: translateX(0);
 }
 
-.tbf-shell-mobile-nav {
+#{ns.class("shell-mobile-nav")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-md, 12px);
+  gap: var(#{ns.css-var("gap-md")}, 12px);
 }
 
-.tbf-shell-mobile-nav__head {
+#{ns.element-class("shell-mobile-nav", "head")} {
   display: flex;
   min-width: 0;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-shell-mobile-nav__title {
+#{ns.element-class("shell-mobile-nav", "title")} {
   min-width: 0;
   overflow: hidden;
   font-weight: 700;
@@ -168,97 +186,105 @@
   white-space: nowrap;
 }
 
-.tbf-shell-mobile-nav__section,
-.tbf-shell-support-links {
+#{ns.element-class("shell-mobile-nav", "section")},
+
+#{ns.class("shell-support-links")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-shell-support-links__list {
+#{ns.element-class("shell-support-links", "list")} {
   display: flex;
   min-width: 0;
   flex-direction: row;
   align-items: center;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
-.tbf-shell-support-links__list.inline-row {
+#{ns.element-class("shell-support-links", "list")}.inline-row {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
 }
 
-.tbf-shell-support-links__list.column {
+#{ns.element-class("shell-support-links", "list")}.column {
   flex-direction: column;
   align-items: stretch;
 }
 
-.tbf-header__nav .tbf-shell-support-links,
-[data-tbf-header-nav] .tbf-shell-support-links {
+#{ns.element-class("header", "nav")} #{ns.class("shell-support-links")},
+
+#{ns.data("header-nav")} #{ns.class("shell-support-links")} {
   flex: 1 1 auto;
   overflow: hidden;
 }
 
-.tbf-header__nav .tbf-shell-support-links__list,
-[data-tbf-header-nav] .tbf-shell-support-links__list {
+#{ns.element-class("header", "nav")} #{ns.element-class("shell-support-links", "list")},
+
+#{ns.data("header-nav")} #{ns.element-class("shell-support-links", "list")} {
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
 }
 
-.tbf-shell-mobile-nav__section-label,
-.tbf-shell-support-links__label {
-  color: var(--tbf-text-muted, #666);
-  font-size: var(--tbf-font-size-sm, 0.875rem);
+#{ns.element-class("shell-mobile-nav", "section-label")},
+
+#{ns.element-class("shell-support-links", "label")} {
+  color: var(#{ns.css-var("text-muted")}, #666);
+  font-size: var(#{ns.css-var("font-size-sm")}, 0.875rem);
   font-weight: 700;
 }
 
-.tbf-product-shell-sidebar-footer {
+#{ns.class("product-shell-sidebar-footer")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
   margin-block-start: auto;
 }
 
-.tbf-product-shell-sidebar-controls {
+#{ns.class("product-shell-sidebar-controls")} {
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: var(--tbf-gap-xs, 6px);
-  padding: var(--tbf-spacing-xs, 6px);
+  gap: var(#{ns.css-var("gap-xs")}, 6px);
+  padding: var(#{ns.css-var("spacing-xs")}, 6px);
 }
 
-.tbf-product-shell-sidebar-minimize__collapse,
-.tbf-product-shell-sidebar-minimize__expand {
+#{ns.element-class("product-shell-sidebar-minimize", "collapse")},
+
+#{ns.element-class("product-shell-sidebar-minimize", "expand")} {
   display: inline-flex;
   align-items: center;
 }
 
-[data-tbf-sidebar-minimized="true"]
-.tbf-product-shell-sidebar-minimize__collapse,
-[data-tbf-sidebar-minimized="false"]
-.tbf-product-shell-sidebar-minimize__expand {
+#{ns.data("sidebar-minimized", "true")}
+
+#{ns.element-class("product-shell-sidebar-minimize", "collapse")},
+
+#{ns.data("sidebar-minimized", "false")}
+
+#{ns.element-class("product-shell-sidebar-minimize", "expand")} {
   display: none;
 }
 
-.tbf-mobile-bottom-bar__items {
+#{ns.element-class("mobile-bottom-bar", "items")} {
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
   min-height: 52px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius, 0);
-  background: var(--tbf-page, var(--background-page, #fff));
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius")}, 0);
+  background: var(#{ns.css-var("page")}, var(--background-page, #fff));
   pointer-events: auto;
 }
 
-.tbf-mobile-bottom-bar__item {
+#{ns.element-class("mobile-bottom-bar", "item")} {
   position: relative;
   display: flex;
   min-width: 0;
@@ -267,15 +293,15 @@
   justify-content: center;
   gap: 3px;
   padding: 7px 5px;
-  color: var(--tbf-text-muted, #666);
+  color: var(#{ns.css-var("text-muted")}, #666);
   text-decoration: none;
 }
 
-.tbf-mobile-bottom-bar__item[data-tbf-active="true"] {
-  color: var(--tbf-text, #000);
+#{ns.element-class("mobile-bottom-bar", "item")}#{ns.data("active", "true")} {
+  color: var(#{ns.css-var("text")}, #000);
 }
 
-.tbf-mobile-bottom-bar__label {
+#{ns.element-class("mobile-bottom-bar", "label")} {
   max-width: 100%;
   overflow: hidden;
   font-size: 11px;
@@ -283,31 +309,31 @@
   white-space: nowrap;
 }
 
-.tbf-mobile-bottom-bar__badge {
+#{ns.element-class("mobile-bottom-bar", "badge")} {
   position: absolute;
   inset-block-start: 5px;
   inset-inline-end: 12px;
 }
 
 @media (max-width: 900px) {
-  .tbf-header,
-  [data-tbf-header] {
+  #{ns.class("header")},
+  #{ns.data("header")} {
     flex-wrap: wrap;
     min-height: 10px;
-    padding: var(--tbf-header-mobile-padding, 10px 14px);
+    padding: var(#{ns.css-var("header-mobile-padding")}, 10px 14px);
   }
 
-  .tbf-header__nav,
-  [data-tbf-header-nav] {
+  #{ns.element-class("header", "nav")},
+  #{ns.data("header-nav")} {
     display: none;
   }
 
-  .tbf-shell-header-toggle-group {
+  #{ns.class("shell-header-toggle-group")} {
     display: inline-flex;
   }
 
-  .tbf-header__actions,
-  [data-tbf-header-actions] {
+  #{ns.element-class("header", "actions")},
+  #{ns.data("header-actions")} {
     display: none;
   }
 }