@trebired/frontend 4.0.0 → 4.0.2

package/dist/styles/utils.scss

@@ -1,714 +1,7 @@
-.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;
-  }
-}
-
-.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;
-  }
-}
-
-.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);
-}
-
-.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;
-}
-
-.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;
-}
+@use "./utils/base";
+@use "./utils/layout-grid";
+@use "./utils/spacing/block";
+@use "./utils/text/core";
+@use "./utils/spacing/inline";
+@use "./utils/alignment";
+@use "./utils/text/extra";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebired/frontend",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,