@inc2734/unitone-css 0.102.3 → 1.0.0

package/src/layout-primitives/cluster/_index.scss

@@ -1 +1,104 @@
-@forward './cluster-core';
+@mixin abstract-cluster() {
+  --unitone--align-items: strech;
+  --unitone--gap: var(--unitone--global--text-gap);
+  --unitone--column-gap: var(--unitone--gap);
+  --unitone--row-gap: var(--unitone--gap);
+  --unitone--justify-content: start;
+
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--unitone--column-gap);
+  row-gap: var(--unitone--row-gap);
+  justify-content: var(--unitone--justify-content);
+  align-items: var(--unitone--align-items);
+  list-style: none;
+
+  > * {
+    margin: 0;
+    min-width: 0;
+  }
+
+  &:where([data-unitone-layout~="-nowrap"]) {
+    flex-wrap: nowrap;
+    width: max-content;
+
+    > * {
+      flex-shrink: 0;
+    }
+  }
+
+  &:where([data-unitone-layout*="-divider\:"]) {
+    > * {
+      display: flex;
+      flex-direction: column;
+      justify-content: var(--unitone--align-items);
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:stripe"] {
+    column-gap: 0;
+    align-items: stretch;
+
+    > * {
+      padding: 0 calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+
+      &::before {
+        border-width: 0 var(--unitone--divider-width);
+      }
+    }
+
+    > :not([data-unitone-layout~="-bol"]) {
+      padding-left: var(--unitone--column-gap);
+
+      &::before {
+        border-left: 0;
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:slash"] {
+    column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
+    align-items: stretch;
+
+    > * + :not([data-unitone-layout~="-bol"])::before {
+      right: auto;
+      left: calc(var(--unitone--column-gap) * -1 - var(--unitone--divider-width));
+      border-left-width: var(--unitone--divider-width);
+      border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
+      transform: rotate(22.5deg) scale(.8);
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:bordered"] {
+    gap: 0;
+    align-items: stretch;
+
+    > * {
+      padding:
+        calc(var(--unitone--row-gap) + var(--unitone--divider-width))
+        calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+
+      &::before {
+        border-width: var(--unitone--divider-width);
+      }
+    }
+
+    > :not([data-unitone-layout~="-bol"]) {
+      padding-left: var(--unitone--column-gap);
+
+      &::before {
+        border-left-width: 0;
+      }
+    }
+
+    > [data-unitone-layout~="-linewrap"] {
+      margin-top: calc(var(--unitone--divider-width) * -1);
+    }
+  }
+}
+
+@mixin cluster() {
+  [data-unitone-layout~="cluster"] {
+    @include abstract-cluster();
+  }
+}

package/src/layout-primitives/container/_index.scss

@@ -1 +1,18 @@
-@forward './container-core';
+@mixin abstract-container() {
+  --unitone--gutters: var(--unitone--global--gutters);
+  --unitone--max-width: var(--unitone--container-max-width);
+
+  box-sizing: content-box;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--unitone--gutters);
+  padding-left: var(--unitone--gutters);
+  max-width: 100%;
+  width: min(100% - var(--unitone--gutters) * 2, var(--unitone--max-width));
+}
+
+@mixin container() {
+  [data-unitone-layout~="container"] {
+    @include abstract-container();
+  }
+}

package/src/layout-primitives/cover/_index.scss

@@ -1 +1,86 @@
-@forward './cover-core';
+@mixin abstract-cover() {
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--padding: var(--unitone--gap);
+  --unitone--padding-top: var(--unitone--padding);
+  --unitone--padding-right: var(--unitone--padding);
+  --unitone--padding-bottom: var(--unitone--padding);
+  --unitone--padding-left: var(--unitone--padding);
+  --unitone--min-height: 100svh;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--unitone--gap);
+  min-height: var(--unitone--min-height);
+  padding-top: var(--unitone--padding-top);
+  padding-right: var(--unitone--padding-right);
+  padding-bottom: var(--unitone--padding-bottom);
+  padding-left: var(--unitone--padding-left);
+
+  > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  // @deprecated
+  &[data-unitone-layout~="-no-padding"] {
+    padding: 0;
+  }
+}
+
+@mixin abstract-cover__content() {
+  --unitone--position: static;
+  --unitone--top: initial;
+  --unitone--right: initial;
+  --unitone--bottom: initial;
+  --unitone--left: initial;
+  --unitone--z-index: initial;
+
+  position: var(--unitone--position) !important;
+  top: var(--unitone--top);
+  right: var(--unitone--right);
+  bottom: var(--unitone--bottom);
+  left: var(--unitone--left);
+  z-index: var(--unitone--z-index);
+  margin-top: auto;
+  margin-bottom: auto;
+
+  &:is(
+    [data-unitone-layout~="-valign:top"],
+    [data-unitone-layout~="-valign:start"]
+  ) {
+    margin-top: 0;
+    margin-bottom: auto;
+  }
+
+  &[data-unitone-layout~="-valign:center"] {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  &:is(
+    [data-unitone-layout~="-valign:bottom"],
+    [data-unitone-layout~="-valign:end"]
+  ) {
+    margin-top: auto;
+    margin-bottom: 0;
+  }
+
+  &:is([data-unitone-layout~="-valign:top"], [data-unitone-layout~="-valign:start"]) + &[data-unitone-layout~="-valign:center"] {
+    margin-top: 0;
+  }
+
+  &[data-unitone-layout~="-valign:center"] + &:is([data-unitone-layout~="-valign:bottom"], [data-unitone-layout~="-valign:end"]) {
+    margin-top: 0;
+  }
+}
+
+@mixin cover() {
+  [data-unitone-layout~="cover"] {
+    @include abstract-cover();
+  }
+
+  [data-unitone-layout~="cover__content"] {
+    @include abstract-cover__content();
+  }
+}

package/src/layout-primitives/decorator/_index.scss

@@ -1 +1,109 @@
-@forward './decorator-core';
+@mixin abstract-decorator() {
+  --unitone--background-color: transparent;
+  --unitone--color: inherit;
+  --unitone--border-color: transparent;
+  --unitone--border-width: 0;
+  --unitone--border-radius: 0;
+  --unitone--max-height: none;
+  --unitone--min-height: 0px;
+  --unitone--max-width: 100%;
+  --unitone--min-width: 0;
+  --unitone--padding: 0px;
+  --unitone--padding-top: var(--unitone--padding);
+  --unitone--padding-right: var(--unitone--padding);
+  --unitone--padding-bottom: var(--unitone--padding);
+  --unitone--padding-left: var(--unitone--padding);
+  --unitone--box-shadow: none;
+  --unitone--mix-blend-mode: normal;
+  --unitone--overflow: visible;
+  --unitone--backdrop-filter: none;
+
+  --unitone--align-content: normal;
+  --unitone--justify-items: legacy;
+  --unitone--gap: 0px;
+
+	--unitone--progressive-backdrop-filter-angle: 180deg;
+  --unitone--progressive-backdrop-filter-start: 0%;
+
+  --unitone--position: static;
+  --unitone--top: initial;
+  --unitone--right: initial;
+  --unitone--bottom: initial;
+  --unitone--left: initial;
+  --unitone--z-index: initial;
+
+  appearance: none;
+  border: var(--unitone--border-width) solid var(--unitone--border-color);
+  border-radius: var(--unitone--border-radius);
+  color: var(--unitone--color);
+  background-color: var(--unitone--background-color);
+  box-shadow: var(--unitone--box-shadow);
+  max-height: var(--unitone--max-height);
+  min-height: var(--unitone--min-height);
+  max-width: var(--unitone--max-width);
+  padding-top: var(--unitone--padding-top);
+  padding-right: var(--unitone--padding-right);
+  padding-bottom: var(--unitone--padding-bottom);
+  padding-left: var(--unitone--padding-left);
+  mix-blend-mode: var(--unitone--mix-blend-mode);
+  overflow: var(--unitone--overflow);
+  backdrop-filter: var(--unitone--backdrop-filter);
+  position: var(--unitone--position) !important;
+  top: var(--unitone--top);
+  right: var(--unitone--right);
+  bottom: var(--unitone--bottom);
+  left: var(--unitone--left);
+  z-index: var(--unitone--z-index);
+
+  // There are primitives that affect the min-width of child elements,
+  // so we will increase the specificity a little to avoid this effect.
+  &:not(:root) {
+    min-width: var(--unitone--min-width);
+  }
+
+  &:where([data-unitone-layout~="-shadow"]) {
+    --unitone--box-shadow: var(--unitone--global--box-shadow);
+  }
+
+  &:where([data-unitone-layout~="-progressive-backdrop-filter"]) {
+    mask-image: linear-gradient(
+      var(--unitone--progressive-backdrop-filter-angle),
+      rgba(0 0 0 / 0%) calc(var(--unitone--progressive-backdrop-filter-start) - 20%),
+      rgba(0 0 0 / 100%) var(--unitone--progressive-backdrop-filter-start)
+    );
+  }
+
+  &:where(
+    [data-unitone-layout*="-gap\:"],
+    [style*="--unitone--gap\:"],
+    [data-unitone-layout*="-align-content\:"],
+    [data-unitone-layout*="-justify-items\:"]
+  ) {
+    display: grid;
+
+    > * {
+      min-width: 0;
+    }
+  }
+
+  &:where(
+    [data-unitone-layout*="-gap\:"],
+    [style*="--unitone--gap\:"]
+  ) {
+    gap: var(--unitone--gap);
+  }
+
+  &:where([data-unitone-layout*="-align-content\:"]) {
+    align-content: var(--unitone--align-content);
+  }
+
+  &:where([data-unitone-layout*="-justify-items\:"]) {
+    justify-items: var(--unitone--justify-items);
+  }
+}
+
+@mixin decorator() {
+  [data-unitone-layout~="decorator"] {
+    @include abstract-decorator();
+  }
+}

package/src/layout-primitives/float/_index.scss

@@ -1 +1,29 @@
-@forward './float-core';
+@mixin abstract-float() {
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--min-measure: calc(var(--unitone--measure) / 2);
+  --unitone--min-width: 33.33333%;
+
+  width: max(
+    min(var(--unitone--min-width), 100%),
+    min((var(--unitone--min-width) + var(--unitone--gap) + var(--unitone--min-measure) - 100%) * 999, 100%)
+  );
+
+  &[data-unitone-layout~="-position\:left"],
+  &:not([data-unitone-layout~="-position\:right"]) {
+    float: left;
+    margin-right: var(--unitone--gap);
+    margin-bottom: var(--unitone--gap);
+  }
+
+  &[data-unitone-layout~="-position\:right"] {
+    float: right;
+    margin-left: var(--unitone--gap);
+    margin-bottom: var(--unitone--gap);
+  }
+}
+
+@mixin float() {
+  [data-unitone-layout~="float"] {
+    @include abstract-float();
+  }
+}

package/src/layout-primitives/frame/_index.scss

@@ -1 +1,36 @@
-@forward './frame-core';
+@mixin abstract-frame() {
+  --unitone--ratio: 16/9;
+
+  position: relative;
+  aspect-ratio: var(--unitone--ratio) !important;
+  overflow: hidden;
+
+  > * {
+    height: 100%;
+    width: 100%;
+  }
+
+  img,
+  video {
+    height: 100% !important;
+    width: 100% !important;
+    max-height: 100% !important;
+    max-width: 100% !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    object-fit: cover;
+    vertical-align: top;
+  }
+
+  @media (orientation: portrait) and (max-width: 599px) {
+    &[data-unitone-layout~="-switch"] {
+      aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
+    }
+  }
+}
+
+@mixin frame() {
+  [data-unitone-layout~="frame"] {
+    @include abstract-frame();
+  }
+}

package/src/layout-primitives/gutters/_index.scss

@@ -1 +1,30 @@
-@forward './gutters-core';
+@mixin abstract-gutters() {
+  --unitone--padding: var(--unitone--s4);
+
+  padding-top: var(--unitone--padding);
+  padding-bottom: var(--unitone--padding);
+
+  @for $i from -3 through 7 {
+    &[data-unitone-layout~="-padding\:#{ $i }"] {
+      --unitone--padding: var(--unitone--s#{ $i }) !important;
+    }
+  }
+
+  @for $i from 1 through 7 {
+    &[data-unitone-layout~="-padding\:#{ $i }s"] {
+      --unitone--padding: var(--unitone--s#{ $i }s) !important;
+    }
+  }
+
+  @for $i from 2 through 7 {
+    &[data-unitone-layout~="-padding\:#{ $i }m"] {
+      --unitone--padding: var(--unitone--s#{ $i }m) !important;
+    }
+  }
+}
+
+@mixin gutters() {
+  [data-unitone-layout~="gutters"] {
+    @include abstract-gutters();
+  }
+}

package/src/layout-primitives/layers/_index.scss

@@ -1 +1,141 @@
-@forward './layers-core';
+@mixin abstract-layers() {
+  --unitone--columns: var(--unitone--grid-columns);
+  --unitone--rows: var(--unitone--grid-rows);
+  --unitone--row-track-size: 1fr;
+  --unitone--gap: initial;
+  --unitone--column-gap: var(--unitone--gap, var(--unitone--global--text-gap));
+  --unitone--row-gap: var(--unitone--gap, 1lh);
+  --unitone--min-height: 0;
+  --unitone--blur: 75px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--unitone--columns), 1fr);
+  grid-template-rows: repeat(
+    var(--unitone--rows),
+    var(--unitone--row-track-size)
+  );
+  column-gap: min(3.33333%, var(--unitone--column-gap));
+  row-gap: var(--unitone--row-gap);
+  min-height: var(--unitone--min-height);
+
+  @media (orientation: portrait) and (max-width: 599px) {
+    &[data-unitone-layout~="-portrait"] {
+      --unitone--columns: var(--unitone--grid-rows);
+      --unitone--rows: var(--unitone--grid-columns);
+    }
+  }
+
+  > * {
+    --unitone--align-self: stretch;
+    --unitone--justify-self: stretch;
+    --unitone--grid-column: 1/-1;
+    --unitone--grid-row: 1/-1;
+    --unitone--mix-blend-mode: normal;
+
+    grid-column: var(--unitone--grid-column);
+    grid-row: var(--unitone--grid-row);
+    align-self: var(--unitone--align-self);
+    justify-self: var(--unitone--justify-self);
+    min-width: 0;
+    mix-blend-mode: var(--unitone--mix-blend-mode);
+  }
+
+  @at-root {
+    :where(#{ & } > *) {
+      --unitone--max-width: 100%;
+      --unitone--min-height: auto;
+
+      position: relative;
+      max-width: var(--unitone--max-width);
+      min-height: var(--unitone--min-height);
+    }
+  }
+
+  &[data-unitone-layout~="-cover"],
+  &[data-unitone-layout~="-fill"],
+  &[data-unitone-layout~="-fixed"] {
+    position: relative;
+
+    > figure:first-child,
+    > :first-child figure {
+      margin: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    > img:first-child,
+    > video:first-child,
+    > :first-child img,
+    > :first-child video {
+      display: block;
+      object-fit: cover;
+      object-position: 50% 50%;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &[data-unitone-layout~="-cover"] {
+    > img:first-child,
+    > video:first-child,
+    > :first-child img,
+    > :first-child video {
+      position: absolute;
+      inset: 0;
+    }
+
+    @at-root {
+      :where(#{ & } > *) {
+        position: relative;
+      }
+
+      // @todo Since decorator's position is !important, it must be overridden by CSS variables.
+      :where(#{ & } > [data-unitone-layout~="decorator"]) {
+        --unitone--position: relative;
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-fixed"] {
+    clip-path: inset(0);
+
+    > img:first-child,
+    > video:first-child,
+    > :first-child img,
+    > :first-child video {
+      position: fixed;
+      inset: 0;
+    }
+
+    @at-root {
+      // @todo Since decorator's position is !important, it must be overridden by CSS variables.
+      :where(#{ & } > [data-unitone-layout~="decorator"]) {
+        --unitone--position: relative;
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-blur"] {
+    overflow: hidden;
+
+    &[data-unitone-layout~="-cover"],
+    &[data-unitone-layout~="-fill"] {
+      > :where(img:first-child, video:first-child),
+      > :first-child :where(img, video) {
+        transform: scale(1.5);
+      }
+    }
+
+    > :where(img:first-child, video:first-child),
+    > :first-child :where(img, video) {
+      filter: blur(var(--unitone--blur));
+    }
+  }
+}
+
+@mixin layers() {
+  [data-unitone-layout~="layers"] {
+    @include abstract-layers();
+  }
+}

package/src/layout-primitives/marquee/_index.scss

@@ -1 +1,73 @@
-@forward './marquee-core';
+@mixin abstract-marquee-wrapper() {
+  --unitone--animation-duration: 20s;
+  --unitone--gap: var(--unitone--global--text-gap);
+  --unitone--item-width: auto;
+
+  display: flex;
+  gap: var(--unitone--gap);
+  overflow: clip;
+
+  &[data-unitone-layout~="-reverse"] {
+    flex-direction: row-reverse;
+
+    > [data-unitone-layout~="marquee:initialized"] {
+      animation-name: marquee-reverse;
+    }
+  }
+
+  @media (any-hover: hover) {
+    &[data-unitone-layout~="-pause-on-hover"]:hover {
+      > [data-unitone-layout~="marquee:initialized"] {
+        animation-play-state: paused;
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-pause-on-hover"]:focus-within {
+    > [data-unitone-layout~="marquee:initialized"] {
+      animation-play-state: paused;
+    }
+  }
+}
+
+@mixin abstract-marquee() {
+  flex-shrink: 0;
+  display: flex;
+  gap: inherit;
+  align-items: center;
+  justify-content: space-around;
+  min-width: 100%;
+
+  &[data-unitone-layout~="marquee:initialized"] {
+    animation-name: marquee;
+    animation-timing-function: linear;
+    animation-duration: var(--unitone--animation-duration);
+    animation-iteration-count: infinite;
+  }
+
+  > * {
+    flex: 0 0 var(--unitone--item-width);
+    max-width: var(--unitone--item-width);
+    min-width: 0;
+  }
+}
+
+@mixin marquee() {
+  [data-unitone-layout~="marquee-wrapper"] {
+    @include abstract-marquee-wrapper();
+  }
+
+  [data-unitone-layout~="marquee"] {
+    @include abstract-marquee();
+  }
+}
+
+@keyframes marquee {
+    0% { translate: 0; }
+  100% { translate: calc(-100% - var(--unitone--gap)); }
+}
+
+@keyframes marquee-reverse {
+    0% { translate: 0; }
+  100% { translate: calc(100% + var(--unitone--gap)); }
+}

package/src/layout-primitives/masonry/_index.scss

@@ -1 +1,26 @@
-@forward './masonry-core';
+@mixin abstract-masonry() {
+  --unitone--gap: var(--unitone--s-2);
+  --unitone--column-width: calc(var(--unitone--measure) / 3);
+
+  display: block;
+  gap: var(--unitone--gap);
+  column-width: var(--unitone--column-width);
+
+  > * + * {
+    margin-top: var(--unitone--gap);
+  }
+
+  > figure,
+  > figure img,
+  > img {
+    width: 100%;
+    max-width: 100%;
+    break-inside: avoid;
+  }
+}
+
+@mixin masonry() {
+  [data-unitone-layout~="masonry"] {
+    @include abstract-masonry();
+  }
+}

package/src/layout-primitives/popover/_index.scss

@@ -60,7 +60,6 @@
   --unitone--color: #fff;
   --unitone--border-radius: var(--unitone--global--border-radius);
   --unitone--box-shadow: none;
-  --unitone--font-size: -1;
   --unitone--padding: var(--unitone--s-1);
 
   margin-inline: auto;
@@ -70,6 +69,7 @@
   border-radius: var(--unitone--border-radius);
   padding: calc(var(--unitone--padding) / 2) var(--unitone--padding);
   width: fit-content;
+  font-size: var(--unitone--font-size-s);
 
   &:where([data-unitone-layout~="-shadow"]) {
     --unitone--box-shadow: var(--unitone--global--box-shadow);