@trebired/frontend 26.2.0 → 28.0.0

package/dist/surface/styles/blocks.scss

@@ -1,174 +0,0 @@
-@use "@trebired/bundler/namespace" as ns;
-
-#{ns.class("band")} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-block: var(#{ns.css-var("surf-band-root-py")}, clamp(2.5rem, 5vw, 4rem));
-  padding-inline: var(#{ns.css-var("surf-band-root-px")}, clamp(1rem, 3vw, 2rem));
-  color: var(#{ns.css-var("surf-band-root-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-band-root-bg")}, var(#{ns.css-var("page")}, #fff));
-}
-
-#{ns.class("band")} > * {
-  width: min(var(#{ns.css-var("surf-band-root-max")}, 80rem), 100%);
-  min-width: 0;
-}
-
-#{ns.class("band")}--muted {
-  color: var(#{ns.css-var("surf-band-tone-muted-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-band-tone-muted-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-}
-
-#{ns.class("band")}--inverse {
-  #{ns.css-var("text-muted")}: var(
-    #{ns.css-var("surf-band-tone-inverse-text-muted")},
-    color-mix(in srgb, currentColor 62%, transparent)
-  );
-  color: var(#{ns.css-var("surf-band-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-band-tone-inverse-bg")}, var(#{ns.css-var("ink")}, #000));
-}
-
-#{ns.class("tile")} {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: var(#{ns.css-var("surf-tile-root-size")}, 3rem);
-  height: var(#{ns.css-var("surf-tile-root-size")}, 3rem);
-  border-radius: var(#{ns.css-var("surf-tile-root-radius")}, var(#{ns.css-var("radius")}, 0));
-  color: var(#{ns.css-var("surf-tile-root-color")}, currentColor);
-  background: var(#{ns.css-var("surf-tile-root-bg")}, transparent);
-  transition: background-color var(#{ns.css-var("transition-fast")}, 180ms) ease,
-  color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.class("tile")} #{ns.class("icon-glyph")} {
-  font-size: var(#{ns.css-var("surf-tile-root-glyph")}, 1.5rem);
-}
-
-#{ns.class("tile")}--sm {
-  #{ns.css-var("surf-tile-root-size")}: var(#{ns.css-var("surf-tile-sizes-sm-size")}, 2.5rem);
-  #{ns.css-var("surf-tile-root-glyph")}: var(#{ns.css-var("surf-tile-sizes-sm-glyph")}, 1rem);
-}
-
-#{ns.class("tile")}--lg {
-  #{ns.css-var("surf-tile-root-size")}: var(#{ns.css-var("surf-tile-sizes-lg-size")}, 4rem);
-  #{ns.css-var("surf-tile-root-glyph")}: var(#{ns.css-var("surf-tile-sizes-lg-glyph")}, 1.75rem);
-}
-
-#{ns.class("tile")}--muted {
-  color: var(#{ns.css-var("surf-tile-tone-muted-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-tile-tone-muted-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-}
-
-#{ns.class("tile")}--inverse {
-  color: var(#{ns.css-var("surf-tile-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tile-tone-inverse-bg")}, var(#{ns.css-var("text")}, #000));
-}
-
-#{ns.class("tile")}--accent {
-  color: var(#{ns.css-var("surf-tile-tone-accent-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tile-tone-accent-bg")}, var(#{ns.css-var("focus")}, #000));
-}
-
-#{ns.class("tile")}#{ns.data("tile-glyph", "accent")} {
-  color: var(#{ns.css-var("surf-tile-slot-glyph-accent")}, var(#{ns.css-var("focus")}, #000));
-}
-
-#{ns.class("rule")} {
-  border-inline-start: var(#{ns.css-var("surf-rule-root-width")}, 4px)
-  solid var(#{ns.css-var("surf-rule-root-color")}, currentColor);
-  padding-inline-start: var(#{ns.css-var("surf-rule-root-gap")}, 0.75rem);
-}
-
-#{ns.class("action-row")} {
-  display: flex;
-  align-items: center;
-  gap: var(#{ns.css-var("surf-action-row-root-gap")}, var(#{ns.css-var("gap-sm")}, 12px));
-  min-width: 0;
-  padding: var(#{ns.css-var("surf-action-row-root-padding")}, var(#{ns.css-var("gap-sm")}, 12px));
-  color: var(#{ns.css-var("surf-action-row-root-color")}, inherit);
-  background: var(#{ns.css-var("surf-action-row-root-bg")}, transparent);
-  transition: background-color var(#{ns.css-var("transition-fast")}, 180ms) ease,
-  color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("action-row", "body")} {
-  display: grid;
-  flex: 1;
-  gap: var(#{ns.css-var("surf-action-row-body-gap")}, var(#{ns.css-var("gap-xs2")}, 4px));
-  min-width: 0;
-}
-
-#{ns.element-class("action-row", "value")} {
-  overflow-wrap: break-word;
-  color: var(#{ns.css-var("surf-action-row-value-color")}, inherit);
-  font-size: min(
-    var(#{ns.css-var("surf-action-row-value-font-size")}, 1.25rem),
-    max(0.85rem, 4.2vw)
-  );
-  font-weight: var(#{ns.css-var("surf-action-row-value-font-weight")}, 700);
-  transition: color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("action-row", "arrow")} {
-  flex: 0 0 auto;
-  color: var(#{ns.css-var("surf-action-row-arrow-color")}, var(#{ns.css-var("text-muted")}, #666));
-  transition: color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("action-row", "arrow")} #{ns.class("icon-glyph")} {
-  font-size: var(#{ns.css-var("surf-action-row-arrow-glyph")}, 1.25rem);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  #{ns.class("action-row")}#{ns.data("interactive", "true")}:hover {
-    #{ns.css-var("text-muted")}: var(
-      #{ns.css-var("surf-action-row-state-hover-text-muted")},
-      color-mix(in srgb, currentColor 72%, transparent)
-    );
-    color: var(#{ns.css-var("surf-action-row-state-hover-color")}, inherit);
-    background: var(#{ns.css-var("surf-action-row-state-hover-bg")}, transparent);
-  }
-
-  #{ns.class("action-row")}#{ns.data("interactive", "true")}:hover
-  #{ns.element-class("action-row", "value")},
-  #{ns.class("action-row")}#{ns.data("interactive", "true")}:hover
-  #{ns.element-class("action-row", "arrow")} {
-    color: var(#{ns.css-var("surf-action-row-state-hover-color")}, inherit);
-  }
-}
-
-#{ns.class("tile")}--surface {
-  color: var(#{ns.css-var("surf-tile-tone-surface-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-tile-tone-surface-bg")}, var(#{ns.css-var("surface")}, #fff));
-}
-
-#{ns.class("tag")} {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(#{ns.css-var("surf-tag-root-gap")}, var(#{ns.css-var("gap-xs2")}, 4px));
-  padding: var(#{ns.css-var("surf-tag-root-padding")}, 0.5rem 0.75rem);
-  border-radius: var(#{ns.css-var("surf-tag-root-radius")}, var(#{ns.css-var("radius")}, 0));
-  color: var(#{ns.css-var("surf-tag-root-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-tag-root-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-  font-size: var(#{ns.css-var("surf-tag-root-font-size")}, 0.75rem);
-  font-weight: var(#{ns.css-var("surf-tag-root-font-weight")}, 700);
-  letter-spacing: var(#{ns.css-var("surf-tag-root-letter-spacing")}, normal);
-  line-height: 1;
-  text-transform: var(#{ns.css-var("surf-tag-root-text-transform")}, none);
-  white-space: nowrap;
-}
-
-#{ns.class("tag")}--inverse {
-  color: var(#{ns.css-var("surf-tag-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tag-tone-inverse-bg")}, var(#{ns.css-var("text")}, #000));
-}
-
-#{ns.class("tag")}--accent {
-  color: var(#{ns.css-var("surf-tag-tone-accent-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tag-tone-accent-bg")}, var(#{ns.css-var("focus")}, #000));
-}

package/dist/surface/styles/track.scss

@@ -1,91 +0,0 @@
-@use "@trebired/bundler/namespace" as ns;
-
-#{ns.class("pinned-split")} {
-  display: grid;
-  gap: var(#{ns.css-var("surf-pinned-root-gap")}, var(#{ns.css-var("gap-lg")}, 40px));
-  align-items: start;
-}
-
-#{ns.element-class("pinned-split", "aside")} {
-  min-width: 0;
-}
-
-#{ns.element-class("pinned-split", "body")} {
-  min-width: 0;
-}
-
-@media (min-width: 900px) {
-  #{ns.class("pinned-split")} {
-    grid-template-columns: var(#{ns.css-var("surf-pinned-aside-width")}, minmax(0, 20rem)) minmax(0, 1fr);
-  }
-
-  #{ns.element-class("pinned-split", "aside")} {
-    position: sticky;
-    top: var(#{ns.css-var("surf-pinned-aside-top")}, 7rem);
-  }
-
-  #{ns.data("pinned-aside", "end")} {
-    grid-template-columns: minmax(0, 1fr) var(#{ns.css-var("surf-pinned-aside-width")}, minmax(0, 20rem));
-  }
-
-  #{ns.data("pinned-aside", "end")} #{ns.element-class("pinned-split", "aside")} {
-    order: 2;
-  }
-}
-
-#{ns.class("track")} {
-  display: grid;
-  gap: var(#{ns.css-var("surf-track-root-gap")}, var(#{ns.css-var("gap-lg")}, 40px));
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-#{ns.element-class("track", "item")} {
-  position: relative;
-  display: grid;
-  grid-template-columns: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem) minmax(0, 1fr);
-  gap: var(#{ns.css-var("surf-track-item-gap")}, var(#{ns.css-var("gap-md")}, 24px));
-  align-items: start;
-}
-
-#{ns.element-class("track", "item")}::before {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: calc(var(#{ns.css-var("surf-track-mark-size")}, 2.5rem) / 2);
-  width: var(#{ns.css-var("border-width")}, 1px);
-  background: var(#{ns.css-var("border")}, currentColor);
-  content: "";
-  translate: -50% 0;
-}
-
-#{ns.element-class("track", "item")}:last-child::before {
-  inset-block-end: auto;
-  height: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem);
-}
-
-#{ns.element-class("track", "mark")} {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  width: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem);
-  height: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem);
-  place-items: center;
-  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, currentColor);
-  border-radius: 50%;
-  color: var(#{ns.css-var("text")}, currentColor);
-  background: var(#{ns.css-var("page")}, canvas);
-  font-size: var(#{ns.css-var("surf-track-mark-font-size")}, 0.8rem);
-}
-
-#{ns.element-class("track", "body")} {
-  display: grid;
-  gap: var(#{ns.css-var("surf-track-body-gap")}, var(#{ns.css-var("gap-xs")}, 8px));
-  min-width: 0;
-  padding-block-end: var(#{ns.css-var("surf-track-body-pb")}, var(#{ns.css-var("gap-sm")}, 12px));
-}
-
-#{ns.element-class("track", "body")} > * {
-  min-width: 0;
-  overflow-wrap: break-word;
-}