@trebired/frontend 1.19.5 → 4.0.1

package/dist/styles/utils/alignment.scss

@@ -0,0 +1,93 @@
+$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%;
+    }
+  }
+}

package/dist/styles/utils/base.scss

@@ -0,0 +1,337 @@
+.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,
+.tbf-root,
+[data-tbf-layout-document] {
+  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+}
+
+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(--text-color, #fff));
+  background-color: var(--tbf-selection-bg, color-mix(in srgb, var(--tbf-focus, currentColor) 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;
+}
+
+.hide-mobile {
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+}
+
+.display-block {
+  display: block;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
+
+.scroll {
+  overflow: auto;
+  min-height: 0;
+}
+
+.scroll-min {
+  --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);
+    height: var(--tbf-scroll-min-size);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--tbf-scroll-min-track);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    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 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  gap: var(--tbf-gap-sm);
+
+  &.fit-content {
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.top {
+    align-items: flex-start;
+  }
+
+  &.bottom {
+    align-items: flex-end;
+  }
+
+  &.apart {
+    justify-content: space-between;
+
+    > * {
+      flex: 0 0 auto;
+    }
+  }
+
+  &.between {
+    justify-content: space-between;
+  }
+
+  &.scroll-x {
+    @extend .scroll-min;
+
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    > * {
+      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 {
+    margin-left: auto;
+  }
+
+  > .left {
+    margin-right: auto;
+  }
+
+  > .center {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}

package/dist/styles/utils/layout-grid.scss

@@ -0,0 +1,45 @@
+.align-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.column {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+
+  &.center {
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: var(--tbf-grid-template-columns, minmax(0, 1fr) minmax(0, 1fr));
+  align-items: start;
+  gap: var(--tbf-gap-md);
+
+  &.auto-sm {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+
+  &.auto-md {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+
+  &.auto-lg {
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  }
+
+  &.cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/styles/utils/spacing/block.scss

@@ -0,0 +1,59 @@
+.gap-xs2 {
+  gap: var(--tbf-gap-xs2);
+}
+
+.gap-xs {
+  gap: var(--tbf-gap-xs);
+}
+
+.gap-sm {
+  gap: var(--tbf-gap-sm);
+}
+
+.gap-md {
+  gap: var(--tbf-gap-md);
+}
+
+.gap-lg {
+  gap: var(--tbf-gap-lg);
+}
+
+.mt-xs {
+  margin-top: var(--tbf-gap-xs);
+}
+
+.mt-xs2 {
+  margin-top: var(--tbf-gap-xs2);
+}
+
+.mt-sm {
+  margin-top: var(--tbf-gap-sm);
+}
+
+.mt-md {
+  margin-top: var(--tbf-gap-md);
+}
+
+.mt-lg {
+  margin-top: var(--tbf-gap-lg);
+}
+
+.mb-xs {
+  margin-bottom: var(--tbf-gap-xs);
+}
+
+.mb-xs2 {
+  margin-bottom: var(--tbf-gap-xs2);
+}
+
+.mb-sm {
+  margin-bottom: var(--tbf-gap-sm);
+}
+
+.mb-md {
+  margin-bottom: var(--tbf-gap-md);
+}
+
+.mb-lg {
+  margin-bottom: var(--tbf-gap-lg);
+}

package/dist/styles/utils/spacing/inline.scss

@@ -0,0 +1,71 @@
+.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);
+}

package/dist/styles/utils/text/core.scss

@@ -0,0 +1,49 @@
+.width-max {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.width-fit {
+  width: fit-content !important;
+  max-width: 100% !important;
+}
+
+.text-muted {
+  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%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.truncate-1 {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-select {
+  -webkit-user-select: none;
+  user-select: none;
+}

package/dist/styles/utils/text/extra.scss

@@ -0,0 +1,54 @@
+.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;
+}