@trebired/frontend 0.5.0 → 1.1.0

package/dist/styles/tokens.scss

@@ -1,22 +1,74 @@
 :root {
+  --border-width: 1px;
+  --outline-width: 2px;
+  --icon-gap: 5px;
+  --header-height: 80px;
+  --viewport-scrollbar-gap-inline-end: 0px;
+  --viewport-scrollbar-gap-block-end: 0px;
+  --transition-1: 120ms;
+  --transition-2: 180ms;
+  --transition-3: 240ms;
+  --transition-4: 320ms;
+  --theme-switch-duration: var(--transition-2, 180ms);
+  --theme-switch-easing: ease;
+  --height-input: var(--height-xs4, 35px);
+  --click-brightness: 0.85;
+  --brightness-1: var(--click-brightness);
+  --brightness-2: 0.75;
+  --brightness-3: 0.65;
+  --shadow-overlay-lg:
+    0 8px 24px rgba(0, 0, 0, 0.2),
+    0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-overlay-sm:
+    0 6px 18px rgba(0, 0, 0, 0.18),
+    0 2px 4px rgba(0, 0, 0, 0.08);
+  --dot-grid:
+    var(--gray-950, #1a1a1b)
+    radial-gradient(var(--gray-700, #303031) 2px, transparent 0) -5px -5px / 30px 30px;
+  --z-bottom-bar: var(--z-index-xs, 900);
+  --z-header-secondary: 910;
+  --z-header-primary: 920;
+  --z-scrollbar-gutter-border: 925;
+  --z-mobile-nav: 930;
+  --z-fullscreen: var(--z-index-sm, 1000);
+  --z-modal: var(--z-index-md, 1010);
+  --z-floating-ui: var(--z-index-lg, 1020);
+  --z-tooltip: var(--z-index-xl, 1100);
   --tbf-radius: var(--radius-md, 0);
   --tbf-radius-sm: var(--radius-sm, 0);
   --tbf-border-width: var(--border-width, 1px);
-  --tbf-border: var(--border-surface-1, #000);
-  --tbf-surface: var(--surface-1, #fff);
-  --tbf-surface-muted: var(--surface-2, #fff);
-  --tbf-text: var(--text-color, #000);
-  --tbf-text-muted: var(--text-color-muted, #000);
+  --tbf-border: var(--border-surface-1, var(--gray-750, #000));
+  --tbf-surface: var(--surface-1, var(--background-surface-1, #fff));
+  --tbf-surface-muted: var(--surface-2, var(--background-surface-2, #fff));
+  --tbf-text: var(--text-color, var(--gray-100, #000));
+  --tbf-text-muted: var(--text-color-muted, var(--gray-300, #000));
   --tbf-focus: var(--focus-color, #000);
   --tbf-shadow: var(--shadow-overlay-lg, 0 0 0 1px #000);
   --tbf-overlay: color-mix(in srgb, var(--tbf-text) 48%, transparent);
   --tbf-transition-fast: var(--transition-2, 180ms);
   --tbf-transition-normal: var(--transition-3, 240ms);
-  --tbf-gap-xs: var(--space-xs, 4px);
-  --tbf-gap-sm: var(--space-sm, 8px);
-  --tbf-gap-md: var(--space-md, 12px);
-  --tbf-gap-lg: var(--space-lg, 16px);
+  --tbf-gap-xs2: var(--space-xs2, 4px);
+  --tbf-gap-xs: var(--space-xs, 8px);
+  --tbf-gap-sm: var(--space-sm, 12px);
+  --tbf-gap-md: var(--space-md, 24px);
+  --tbf-gap-lg: var(--space-lg, 40px);
+  --tbf-canvas-bg: var(--dot-grid);
   --tbf-z-layer: var(--z-layer-root, 1000);
+  --tbf-z-bottom-bar: var(--z-bottom-bar, 900);
+  --tbf-z-header: var(--z-header-primary, 920);
+  --tbf-z-secondary-header: var(--z-header-secondary, 910);
+  --tbf-z-sidebar: var(--z-index-xs, 900);
+  --tbf-z-fullscreen: var(--z-fullscreen, var(--z-index-sm, 1000));
+  --tbf-z-modal: var(--z-modal, var(--z-index-md, 1010));
+  --tbf-z-floating-ui: var(--z-floating-ui, var(--z-index-lg, 1020));
+  --tbf-z-tooltip: var(--z-tooltip, var(--z-index-xl, 1100));
   --tbf-z-progress: var(--z-progress, 99999);
   --tbf-z-confetti: var(--z-confetti, 99998);
 }
+
+:root[data-tbf-theme="light"],
+body[data-tbf-theme="light"] {
+  --dot-grid:
+    var(--gray-950, #f8f8f9)
+    radial-gradient(var(--gray-700, #dbdbdc) 2px, transparent 0) -5px -5px / 30px 30px;
+}

package/dist/styles/utils.scss

@@ -1,3 +1,198 @@
+.tbf-root,
+[data-tbf-layout-document],
+html,
+body {
+  min-width: 0;
+}
+
+[data-scrollbar-gap="y"],
+[data-scrollbar-gap="both"] {
+  scrollbar-gutter: stable;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
+  overscroll-behavior-y: none;
+  color: var(--tbf-text, #000);
+  background-color: var(--background-page, var(--tbf-surface, #fff));
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+html[data-theme-switching="true"],
+html[data-theme-switching="true"] *,
+html[data-theme-switching="true"] *::before,
+html[data-theme-switching="true"] *::after,
+html[data-theme-switching="true"] body::after {
+  transition: none !important;
+  animation: none !important;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+  line-height: var(--tbf-body-line-height, var(--lh-sm, 1.4));
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: var(--viewport-scrollbar-gap-inline-end, 0px);
+  bottom: 0;
+  width: var(--tbf-border-width, 1px);
+  background: var(--tbf-border, #000);
+  pointer-events: none;
+  z-index: var(--z-scrollbar-gutter-border, 925);
+}
+
+body[data-mobile-sidebar-open="true"],
+body[data-tbf-sidebar-open="true"] {
+  overflow: hidden;
+}
+
+::selection {
+  color: var(--tbf-selection-text, var(--gray-200, #fff));
+  background-color: var(--tbf-selection-bg, color-mix(in srgb, var(--gray-500, #888) 50%, transparent)) !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 !important;
+  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+  font-weight: var(--tbf-heading-font-weight, 500) !important;
+  cursor: default;
+}
+
+h1 {
+  font-size: 2.25rem !important;
+}
+
+h2 {
+  font-size: 1.8rem !important;
+}
+
+h3 {
+  font-size: 1.55rem !important;
+}
+
+h4 {
+  font-size: 1.35rem !important;
+}
+
+h5 {
+  font-size: 1.15rem !important;
+}
+
+h6 {
+  font-size: 0.95rem !important;
+}
+
+@media (max-width: 640px) {
+  h1 {
+    font-size: 2rem !important;
+  }
+
+  h2 {
+    font-size: 1.65rem !important;
+  }
+
+  h3 {
+    font-size: 1.45rem !important;
+  }
+
+  h4 {
+    font-size: 1.25rem !important;
+  }
+}
+
+p {
+  font-size: 16px;
+  font-weight: 400;
+  cursor: default;
+}
+
+@media (max-width: 769px) {
+  p {
+    font-size: 15px;
+  }
+}
+
+span {
+  color: inherit;
+}
+
+hr {
+  width: 100%;
+  height: var(--tbf-border-width, 1px);
+  border: 0;
+  background-color: var(--tbf-border, #000);
+}
+
+a {
+  color: var(--tbf-link-color, var(--tbf-text, #000));
+  text-decoration: none;
+}
+
+img {
+  -webkit-user-drag: none;
+  pointer-events: auto;
+}
+
+form {
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+i {
+  font-weight: 100 !important;
+}
+
+.icon-glyph {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.icon-glyph > svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+summary {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+ul {
+  list-style-type: none;
+}
+
 .is-hidden,
 [hidden] {
   display: none !important;
@@ -30,6 +225,9 @@
   --tbf-scroll-min-size: 6px;
   --tbf-scroll-min-track: var(--scroll-track, #fff);
   --tbf-scroll-min-thumb: var(--scroll-thumb, #000);
+  --tbf-scroll-min-thumb-hover: var(--scroll-thumb-hover, var(--tbf-scroll-min-thumb));
+  --scroll-min-horizontal-gap: 6px;
+  --scroll-min-size: var(--tbf-scroll-min-size);
 
   &::-webkit-scrollbar {
     width: var(--tbf-scroll-min-size);
@@ -44,6 +242,16 @@
     border-radius: var(--tbf-radius, 0);
     background-color: var(--tbf-scroll-min-thumb);
   }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--tbf-scroll-min-thumb-hover);
+  }
+
+  &[data-scroll-overflow-x="true"] {
+    padding-bottom: calc(
+      var(--scroll-min-padding-bottom, 0px) + var(--scroll-min-horizontal-gap)
+    );
+  }
 }
 
 .inline-row {
@@ -58,6 +266,10 @@
     max-width: 100%;
   }
 
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
   &.top {
     align-items: flex-start;
   }
@@ -74,6 +286,10 @@
     }
   }
 
+  &.between {
+    justify-content: space-between;
+  }
+
   &.scroll-x {
     @extend .scroll-min;
 
@@ -84,6 +300,11 @@
     > * {
       flex: 0 0 auto;
     }
+
+    > :where(.input, input, textarea, select, [data-dropdown]) {
+      width: var(--inline-row-scroll-field-width, 18rem);
+      min-width: var(--inline-row-scroll-field-width, 18rem);
+    }
   }
 
   > .right {
@@ -100,6 +321,14 @@
   }
 }
 
+.align-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
 .column {
   display: flex;
   min-width: 0;
@@ -138,6 +367,10 @@
   }
 }
 
+.gap-xs2 {
+  gap: var(--tbf-gap-xs2);
+}
+
 .gap-xs {
   gap: var(--tbf-gap-xs);
 }
@@ -158,6 +391,10 @@
   margin-top: var(--tbf-gap-xs);
 }
 
+.mt-xs2 {
+  margin-top: var(--tbf-gap-xs2);
+}
+
 .mt-sm {
   margin-top: var(--tbf-gap-sm);
 }
@@ -174,6 +411,10 @@
   margin-bottom: var(--tbf-gap-xs);
 }
 
+.mb-xs2 {
+  margin-bottom: var(--tbf-gap-xs2);
+}
+
 .mb-sm {
   margin-bottom: var(--tbf-gap-sm);
 }
@@ -200,6 +441,23 @@
   color: var(--tbf-text-muted, #000);
 }
 
+.text-xs {
+  font-size: 12px;
+}
+
+.text-sm,
+.text-small {
+  font-size: 14px;
+}
+
+.text-md {
+  font-size: 16px;
+}
+
+.text-lg {
+  font-size: 20px;
+}
+
 .text-break {
   min-width: 0;
   max-width: 100%;
@@ -218,3 +476,224 @@
   -webkit-user-select: none;
   user-select: none;
 }
+
+.ml-xs {
+  margin-left: var(--tbf-gap-xs);
+}
+
+.ml-xs2 {
+  margin-left: var(--tbf-gap-xs2);
+}
+
+.ml-sm {
+  margin-left: var(--tbf-gap-sm);
+}
+
+.ml-md {
+  margin-left: var(--tbf-gap-md);
+}
+
+.ml-lg {
+  margin-left: var(--tbf-gap-lg);
+}
+
+.mr-xs {
+  margin-right: var(--tbf-gap-xs);
+}
+
+.mr-xs2 {
+  margin-right: var(--tbf-gap-xs2);
+}
+
+.mr-sm {
+  margin-right: var(--tbf-gap-sm);
+}
+
+.mr-md {
+  margin-right: var(--tbf-gap-md);
+}
+
+.mr-lg {
+  margin-right: var(--tbf-gap-lg);
+}
+
+.border {
+  border: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+.border-0 {
+  border: 0;
+}
+
+.border-top {
+  border-top: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+.border-bottom {
+  border-bottom: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+.border-left {
+  border-left: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+.border-right {
+  border-right: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+.border-block {
+  border-block: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+.border-inline {
+  border-inline: var(--tbf-border-width) solid var(--tbf-border);
+}
+
+$tbf-hor-alignments: (
+  left: flex-start,
+  center: center,
+  right: flex-end,
+);
+
+@each $name, $value in $tbf-hor-alignments {
+  .hor-#{$name} {
+    justify-content: $value;
+
+    &.column,
+    &.left-column,
+    &.right-column,
+    &.middle-column {
+      align-items: $value;
+      justify-content: flex-start;
+    }
+  }
+
+  .hor-#{$name}-child {
+    @if $name == left {
+      align-self: flex-start;
+      margin-right: auto;
+    } @else if $name == center {
+      align-self: center;
+      margin-left: auto;
+      margin-right: auto;
+    } @else if $name == right {
+      align-self: flex-end;
+      margin-left: auto;
+    }
+  }
+}
+
+.hor-apart {
+  justify-content: space-between;
+}
+
+.ver-center {
+  display: flex;
+  align-items: center;
+}
+
+.ver-bottom {
+  display: flex;
+  align-items: flex-end;
+}
+
+.ver-center-child {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.ver-bottom-child {
+  margin-top: auto;
+}
+
+.ver-xs {
+  margin-top: var(--tbf-gap-xs2);
+}
+
+.ver-sm {
+  margin-top: var(--tbf-gap-xs);
+}
+
+.ver-md {
+  margin-top: var(--tbf-gap-sm);
+}
+
+.ver-lg {
+  margin-top: var(--tbf-gap-md);
+}
+
+.no-stretch {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: fit-content;
+}
+
+.no-shrink {
+  flex-shrink: 0;
+}
+
+@media (max-width: 900px) {
+  .inline-row.mobile-wrap {
+    flex-wrap: wrap;
+
+    > .column {
+      flex-basis: 100%;
+      width: 100%;
+    }
+  }
+}
+
+.text-break-word {
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  hyphens: auto;
+}
+
+.font-italic {
+  font-style: italic;
+}
+
+.font-mono {
+  font-family:
+  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+  "Courier New", monospace;
+  word-break: break-all;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.label {
+  color: var(--tbf-text-muted, #000);
+  font-size: 14px;
+}
+
+.bg-canvas {
+  background: var(--tbf-canvas-bg, var(--dot-grid)) !important;
+}
+
+.pre-wrap {
+  white-space: pre-wrap !important;
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-auto {
+  cursor: auto;
+}
+
+.cursor-disabled,
+.disabled,
+[disabled] {
+  cursor: not-allowed;
+}