@trebired/frontend 5.1.2 → 6.0.1

package/dist/popover/styles/index.scss

@@ -3,15 +3,15 @@
   position: fixed;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--tbf-overlays-popover-panel-gap, 2px);
   min-width: 220px;
   max-width: min(320px, calc(100vw - 24px));
-  padding: 8px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius, 0);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface, #fff);
-  box-shadow: var(--tbf-shadow, 0 0 0 1px #000);
+  padding: var(--tbf-overlays-popover-panel-padding, 8px);
+  border: var(--tbf-overlays-popover-panel-border, var(--tbf-border-width, 1px) solid var(--tbf-border, #000));
+  border-radius: var(--tbf-overlays-popover-panel-radius, var(--tbf-radius, 0));
+  color: var(--tbf-overlays-popover-panel-color, var(--tbf-text, #000));
+  background: var(--tbf-overlays-popover-panel-background, var(--tbf-surface, #fff));
+  box-shadow: var(--tbf-overlays-popover-panel-shadow, var(--tbf-shadow, 0 0 0 1px #000));
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
@@ -40,16 +40,16 @@
 [data-tbf-popover] > :where(a, button) {
   display: flex;
   width: 100%;
-  height: 35px;
-  min-height: 35px;
+  height: var(--tbf-overlays-popover-item-root-height, 35px);
+  min-height: var(--tbf-overlays-popover-item-root-height, 35px);
   align-items: center;
-  gap: 10px;
-  padding: 5px 10px;
+  gap: var(--tbf-overlays-popover-item-root-gap, 10px);
+  padding: var(--tbf-overlays-popover-item-root-padding, 5px 10px);
   overflow: hidden;
-  border: 0;
-  border-radius: var(--tbf-radius-sm, var(--tbf-radius, 0));
-  color: var(--tbf-text-muted, #666);
-  background: transparent;
+  border: var(--tbf-overlays-popover-item-root-border, 0);
+  border-radius: var(--tbf-overlays-popover-item-root-radius, var(--tbf-radius-sm, var(--tbf-radius, 0)));
+  color: var(--tbf-overlays-popover-item-root-color, var(--tbf-text-muted, #666));
+  background: var(--tbf-overlays-popover-item-root-background, transparent);
   cursor: pointer;
   font: inherit;
   line-height: 1.2;
@@ -71,6 +71,6 @@
 [data-tbf-popover] :where(a, button).popover-item:focus,
 [data-tbf-popover] > :where(a, button):hover,
 [data-tbf-popover] > :where(a, button):focus {
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface-muted, #f4f4f4);
+  color: var(--tbf-overlays-popover-item-states-hover-color, var(--tbf-text, #000));
+  background: var(--tbf-overlays-popover-item-states-hover-background, var(--tbf-surface-muted, #f4f4f4));
 }

package/dist/primitives/styles/_card.scss

@@ -1,36 +1,36 @@
 .card {
-  min-height: var(--tbf-card-min-height, var(--height-xs4, 35px));
-  border-radius: var(--tbf-card-radius, var(--radius-lg, var(--tbf-radius, 0)));
-  border: var(--tbf-card-border, var(--border-width) solid var(--border-surface-1));
-  background: var(--tbf-card-background, var(--background-page));
-  padding: var(--tbf-card-padding, 14px 14px 12px 14px);
+  min-height: var(--tbf-surfaces-card-root-min-height, var(--height-xs4, 35px));
+  border-radius: var(--tbf-surfaces-card-root-radius, var(--radius-lg, var(--tbf-radius, 0)));
+  border: var(--tbf-surfaces-card-root-border, var(--border-width) solid var(--border-surface-1));
+  background: var(--tbf-surfaces-card-root-background, var(--background-page));
+  padding: var(--tbf-surfaces-card-root-padding, 14px 14px 12px 14px);
   overflow: hidden;
 
   h2 {
-    margin: var(--tbf-card-title-margin, 0 0 10px 0);
-    font-size: var(--tbf-card-title-font-size, 15px);
-    font-weight: var(--tbf-card-title-font-weight, 700);
+    margin: var(--tbf-surfaces-card-title-margin, 0 0 10px 0);
+    font-size: var(--tbf-surfaces-card-title-font-size, 15px);
+    font-weight: var(--tbf-surfaces-card-title-font-weight, 700);
   }
 }
 
 .card-row {
   min-height: 0;
-  border-radius: var(--tbf-card-row-radius, var(--radius-lg, var(--tbf-radius, 0)));
-  border: var(--tbf-card-row-border, var(--border-width) solid var(--border-surface-1));
-  background: var(--tbf-card-row-background, transparent);
+  border-radius: var(--tbf-surfaces-card-row-radius, var(--radius-lg, var(--tbf-radius, 0)));
+  border: var(--tbf-surfaces-card-row-border, var(--border-width) solid var(--border-surface-1));
+  background: var(--tbf-surfaces-card-row-background, transparent);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: var(--tbf-card-row-padding, 9px 12px);
+  padding: var(--tbf-surfaces-card-row-padding, 9px 12px);
   transition: all var(--transition-2) ease;
 
   &.excluded {
-    border-color: var(--tbf-card-row-excluded-border-color, var(--border-surface-1));
+    border-color: var(--tbf-surfaces-card-row-states-excluded-border-color, var(--border-surface-1));
   }
 
   &.selected {
-    background: var(--tbf-card-row-selected-background, var(--background-surface-1));
+    background: var(--tbf-surfaces-card-row-states-selected-background, var(--background-surface-1));
   }
 
   > * {
@@ -40,7 +40,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .card-row:hover {
-    background: var(--tbf-card-row-hover-background, var(--background-surface-1, transparent));
+    background: var(--tbf-surfaces-card-row-states-hover-background, var(--background-surface-1, transparent));
   }
 }
 
@@ -77,7 +77,7 @@
   flex: 0 0 auto;
   width: 1px;
   min-width: 1px;
-  background: var(--tbf-card-body-divider-background, var(--border-surface-1));
+  background: var(--tbf-surfaces-card-body-divider-background, var(--border-surface-1));
   border-radius: 999px;
   opacity: 0.9;
 }

package/dist/primitives/styles/_controls.scss

@@ -2,30 +2,30 @@
 @use "./variables" as *;
 
 .btn {
-  --button-icon-color: var(--tbf-button-icon-color, currentColor);
+  --button-icon-color: var(--tbf-primitives-button-slots-icon-color, currentColor);
   box-sizing: border-box;
-  height: var(--tbf-button-height, 28px);
-  min-height: var(--tbf-button-height, 28px);
+  height: var(--tbf-primitives-button-root-height, 28px);
+  min-height: var(--tbf-primitives-button-root-height, 28px);
   width: auto;
   max-width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tbf-button-gap, 8px);
-  padding: var(--tbf-button-padding, 0 12px);
-  padding-block: var(--tbf-button-padding-block, 0);
-  border-radius: var(--tbf-button-radius, var(--radius-md, var(--tbf-radius, 0)));
-  border: var(--tbf-button-border, var(--border-width) solid var(--border-surface-2));
-  background: var(--tbf-button-background, transparent);
-  color: var(--tbf-button-color, var(--text-color));
+  gap: var(--tbf-primitives-button-root-gap, 8px);
+  padding: var(--tbf-primitives-button-root-padding, 0 12px);
+  padding-block: var(--tbf-primitives-button-root-padding-block, 0);
+  border-radius: var(--tbf-primitives-button-root-radius, var(--radius-md, var(--tbf-radius, 0)));
+  border: var(--tbf-primitives-button-root-border, var(--border-width) solid var(--border-surface-2));
+  background: var(--tbf-primitives-button-root-background, transparent);
+  color: var(--tbf-primitives-button-root-color, var(--text-color));
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   font-family: inherit;
   white-space: nowrap;
   text-decoration: none;
-  font-size: var(--tbf-button-font-size, 12px);
-  font-weight: var(--tbf-button-font-weight, 600);
+  font-size: var(--tbf-primitives-button-root-font-size, 12px);
+  font-weight: var(--tbf-primitives-button-root-font-weight, 600);
   line-height: 1.15;
   vertical-align: middle;
   transition:
@@ -37,16 +37,16 @@
   &:hover,
   &[aria-pressed="true"],
   &[data-tbf-active="true"] {
-    --button-icon-color: var(--tbf-button-hover-icon-color, currentColor);
-    background: var(--tbf-button-hover-background, var(--tbf-button-background, transparent));
-    border-color: var(--tbf-button-hover-border-color, currentColor);
-    color: var(--tbf-button-hover-color, currentColor);
+    --button-icon-color: var(--tbf-primitives-button-states-hover-icon-color, currentColor);
+    background: var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent));
+    border-color: var(--tbf-primitives-button-states-hover-border-color, currentColor);
+    color: var(--tbf-primitives-button-states-hover-color, currentColor);
   }
 
   &:disabled,
   &[disabled],
   &.disabled {
-    opacity: var(--tbf-button-disabled-opacity, 0.55);
+    opacity: var(--tbf-primitives-button-states-disabled-opacity, 0.55);
     pointer-events: none;
   }
 
@@ -62,67 +62,67 @@
 
     @each $name, $size in $tbf-primitive-button-sizes {
       &.#{$name} {
-        height: var(--tbf-button-sizes-#{$name}-height, #{list.nth($size, 1)});
-        min-height: var(--tbf-button-sizes-#{$name}-height, #{list.nth($size, 1)});
-        padding-inline: var(--tbf-button-sizes-#{$name}-padding-inline, #{list.nth($size, 2)});
+        height: var(--tbf-primitives-button-sizes-#{$name}-height, #{list.nth($size, 1)});
+        min-height: var(--tbf-primitives-button-sizes-#{$name}-height, #{list.nth($size, 1)});
+        padding-inline: var(--tbf-primitives-button-sizes-#{$name}-padding-inline, #{list.nth($size, 2)});
         padding-block: 0;
-        font-size: var(--tbf-button-sizes-#{$name}-font-size, #{list.nth($size, 3)});
+        font-size: var(--tbf-primitives-button-sizes-#{$name}-font-size, #{list.nth($size, 3)});
       }
     }
   }
 
   &.highlight {
-    --button-icon-color: var(--tbf-button-tones-highlight-icon-color, currentColor);
-    background: var(--tbf-button-tones-highlight-background, var(--tbf-button-background, transparent));
-    color: var(--tbf-button-tones-highlight-color, currentColor);
-    border-color: var(--tbf-button-tones-highlight-border-color, currentColor);
+    --button-icon-color: var(--tbf-primitives-button-tones-highlight-icon-color, currentColor);
+    background: var(--tbf-primitives-button-tones-highlight-background, var(--tbf-primitives-button-root-background, transparent));
+    color: var(--tbf-primitives-button-tones-highlight-color, currentColor);
+    border-color: var(--tbf-primitives-button-tones-highlight-border-color, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
     &[data-tbf-active="true"] {
-      --button-icon-color: var(--tbf-button-tones-highlight-hover-icon-color, currentColor);
-      background: var(--tbf-button-tones-highlight-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)));
-      border-color: var(--tbf-button-tones-highlight-hover-border-color, currentColor);
-      color: var(--tbf-button-tones-highlight-hover-color, currentColor);
+      --button-icon-color: var(--tbf-primitives-button-tones-highlight-states-hover-icon-color, currentColor);
+      background: var(--tbf-primitives-button-tones-highlight-states-hover-background, var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent)));
+      border-color: var(--tbf-primitives-button-tones-highlight-states-hover-border-color, currentColor);
+      color: var(--tbf-primitives-button-tones-highlight-states-hover-color, currentColor);
     }
   }
 
   &.red {
-    border-inline-color: var(--tbf-button-tones-red-border-inline-color, currentColor);
+    border-inline-color: var(--tbf-primitives-button-tones-red-border-inline-color, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
     &[data-tbf-active="true"] {
-      background: var(--tbf-button-tones-red-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)));
-      border-color: var(--tbf-button-tones-red-hover-border-color, currentColor);
-      color: var(--tbf-button-tones-red-hover-color, currentColor);
-      --button-icon-color: var(--tbf-button-tones-red-hover-icon-color, currentColor);
+      background: var(--tbf-primitives-button-tones-red-states-hover-background, var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent)));
+      border-color: var(--tbf-primitives-button-tones-red-states-hover-border-color, currentColor);
+      color: var(--tbf-primitives-button-tones-red-states-hover-color, currentColor);
+      --button-icon-color: var(--tbf-primitives-button-tones-red-states-hover-icon-color, currentColor);
     }
   }
 
   &.yellow {
-    border-inline-color: var(--tbf-button-tones-yellow-border-inline-color, currentColor);
+    border-inline-color: var(--tbf-primitives-button-tones-yellow-border-inline-color, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
     &[data-tbf-active="true"] {
-      --button-icon-color: var(--tbf-button-tones-yellow-hover-icon-color, currentColor);
-      background: var(--tbf-button-tones-yellow-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)));
-      border-color: var(--tbf-button-tones-yellow-hover-border-color, currentColor);
-      color: var(--tbf-button-tones-yellow-hover-color, currentColor);
+      --button-icon-color: var(--tbf-primitives-button-tones-yellow-states-hover-icon-color, currentColor);
+      background: var(--tbf-primitives-button-tones-yellow-states-hover-background, var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent)));
+      border-color: var(--tbf-primitives-button-tones-yellow-states-hover-border-color, currentColor);
+      color: var(--tbf-primitives-button-tones-yellow-states-hover-color, currentColor);
     }
   }
 
   &.green {
-    border-inline-color: var(--tbf-button-tones-green-border-inline-color, currentColor);
+    border-inline-color: var(--tbf-primitives-button-tones-green-border-inline-color, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
     &[data-tbf-active="true"] {
-      --button-icon-color: var(--tbf-button-tones-green-hover-icon-color, currentColor);
-      background: var(--tbf-button-tones-green-hover-background, var(--tbf-button-hover-background, var(--tbf-button-background, transparent)));
-      border-color: var(--tbf-button-tones-green-hover-border-color, currentColor);
-      color: var(--tbf-button-tones-green-hover-color, currentColor);
+      --button-icon-color: var(--tbf-primitives-button-tones-green-states-hover-icon-color, currentColor);
+      background: var(--tbf-primitives-button-tones-green-states-hover-background, var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent)));
+      border-color: var(--tbf-primitives-button-tones-green-states-hover-border-color, currentColor);
+      color: var(--tbf-primitives-button-tones-green-states-hover-color, currentColor);
     }
   }
 
@@ -130,13 +130,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--tbf-button-icon-size, 28px);
-    height: var(--tbf-button-icon-size, 28px);
-    min-width: var(--tbf-button-icon-size, 28px);
-    min-height: var(--tbf-button-icon-size, 28px);
+    width: var(--tbf-primitives-button-slots-icon-size, 28px);
+    height: var(--tbf-primitives-button-slots-icon-size, 28px);
+    min-width: var(--tbf-primitives-button-slots-icon-size, 28px);
+    min-height: var(--tbf-primitives-button-slots-icon-size, 28px);
     gap: 0;
     padding: 0;
-    font-size: var(--tbf-button-icon-font-size, 15px);
+    font-size: var(--tbf-primitives-button-slots-icon-font-size, 15px);
     line-height: 1;
     text-align: center;
     position: relative;
@@ -168,11 +168,11 @@
 
     @each $name, $size in $tbf-primitive-icon-sizes {
       &.#{$name} {
-        width: var(--tbf-button-icon-#{$name}-size, #{list.nth($size, 1)});
-        height: var(--tbf-button-icon-#{$name}-size, #{list.nth($size, 1)});
-        min-width: var(--tbf-button-icon-#{$name}-size, #{list.nth($size, 1)});
-        min-height: var(--tbf-button-icon-#{$name}-size, #{list.nth($size, 1)});
-        font-size: var(--tbf-button-icon-#{$name}-font-size, #{list.nth($size, 2)});
+        width: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
+        height: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
+        min-width: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
+        min-height: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
+        font-size: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-font-size, #{list.nth($size, 2)});
       }
     }
 

package/dist/primitives/styles/_display.scss

@@ -61,16 +61,16 @@
 .tbf-text-link,
 .text-link {
   color: var(
-    --tbf-text-link-color,
+    --tbf-primitives-text-link-root-color,
     var(--text-color-muted, var(--tbf-text-muted, var(--tbf-text, currentColor)))
   );
-  font-weight: var(--tbf-text-link-font-weight, inherit);
-  text-decoration-line: var(--tbf-text-link-text-decoration-line, underline);
-  text-decoration-style: var(--tbf-text-link-text-decoration-style, dotted);
-  text-decoration-thickness: var(--tbf-text-link-text-decoration-thickness, 1px);
-  text-underline-offset: var(--tbf-text-link-text-underline-offset, 3px);
+  font-weight: var(--tbf-primitives-text-link-root-font-weight, inherit);
+  text-decoration-line: var(--tbf-primitives-text-link-root-text-decoration-line, underline);
+  text-decoration-style: var(--tbf-primitives-text-link-root-text-decoration-style, dotted);
+  text-decoration-thickness: var(--tbf-primitives-text-link-root-text-decoration-thickness, 1px);
+  text-underline-offset: var(--tbf-primitives-text-link-root-text-underline-offset, 3px);
   transition: var(
-    --tbf-text-link-transition,
+    --tbf-primitives-text-link-root-transition,
     color var(--transition-fast, var(--tbf-transition-fast, 120ms ease))
   );
 }
@@ -79,8 +79,8 @@
 .tbf-text-link:focus,
 .text-link:hover,
 .text-link:focus {
-  color: var(--tbf-text-link-hover-color, var(--text-color, var(--tbf-text, currentColor)));
-  text-decoration-style: var(--tbf-text-link-hover-text-decoration-style, solid);
+  color: var(--tbf-primitives-text-link-states-hover-color, var(--text-color, var(--tbf-text, currentColor)));
+  text-decoration-style: var(--tbf-primitives-text-link-states-hover-text-decoration-style, solid);
 }
 
 [data-tbf-table] {

package/dist/primitives/styles/_indicators.scss

@@ -8,7 +8,7 @@
   padding: 3px 5px;
   border: var(--border-width) solid transparent;
   border-radius: var(--radius-lg, var(--tbf-radius, 0));
-  background-color: var(--tbf-pill-background, var(--background-surface-1, transparent));
+  background-color: var(--tbf-primitives-pill-background, var(--background-surface-1, transparent));
   color: var(--text-color);
   font-size: 13px;
   line-height: 1;
@@ -38,7 +38,7 @@
 }
 
 .dot {
-  --dot-color: var(--tbf-dot-color, currentColor);
+  --dot-color: var(--tbf-primitives-dot-color, currentColor);
   --dot-size: 10px;
   width: var(--dot-size);
   height: var(--dot-size);
@@ -78,7 +78,7 @@
   aspect-ratio: 1;
   border-radius: 50%;
   border: calc(var(--border-width) * 8) solid;
-  border-color: var(--tbf-loader-color, currentColor) transparent;
+  border-color: var(--tbf-primitives-loader-color, currentColor) transparent;
   animation: tbf-primitive-loader-spin 1s infinite;
 
   &.xs {
@@ -112,8 +112,8 @@
   margin-top: 6px;
   height: 6px;
   border-radius: var(--radius-sm, var(--tbf-radius-sm, 0));
-  --progress-color: var(--tbf-primitive-progress-color, currentColor);
-  --progress-track: var(--tbf-primitive-progress-track, color-mix(in srgb, var(--progress-color) 22%, transparent));
+  --progress-color: var(--tbf-primitives-progress-color, currentColor);
+  --progress-track: var(--tbf-primitives-progress-track, color-mix(in srgb, var(--progress-color) 22%, transparent));
   --progress-percent: 0%;
   color: var(--progress-color);
   background: var(--progress-track);

package/dist/progress/styles/index.scss

@@ -1,9 +1,9 @@
 .tbf-progress {
   position: fixed;
   inset: 0 0 auto 0;
-  height: var(--tbf-progress-height, 3px);
-  --tbf-progress-bar-color: var(
-    --tbf-progress-color,
+  height: var(--tbf-runtime-progress-height, 3px);
+  --tbf-runtime-progress-bar-color: var(
+    --tbf-runtime-progress-color,
     var(--tbf-focus, currentColor)
   );
   pointer-events: none;
@@ -13,7 +13,7 @@
 .tbf-progress__bar {
   display: block;
   height: 100%;
-  background: var(--tbf-progress-bar-color);
+  background: var(--tbf-runtime-progress-bar-color);
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform var(--tbf-transition-fast) ease;