@inc2734/unitone-css 0.102.3 → 1.0.0

package/src/layout-primitives/cluster/_cluster-core.scss

@@ -1,126 +0,0 @@
-@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\:"]) {
-    --unitone--divider-width: 1px;
-    --unitone--divider-style: solid;
-    --unitone--divider-color: var(--unitone--color--gray);
-
-    visibility: hidden;
-
-    &[data-unitone-layout~="divider:initialized"] {
-      visibility: visible;
-    }
-
-    > * {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: var(--unitone--align-items);
-    }
-
-    > ::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      user-select: none;
-      pointer-events: none;
-      border-width: 0;
-      border-style: var(--unitone--divider-style);
-      border-color: var(--unitone--divider-color);
-    }
-  }
-
-  &[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/cluster/_cluster.scss

@@ -1,3 +0,0 @@
-@forward './cluster-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/cluster/cluster' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/cluster' instead.";

package/src/layout-primitives/container/_container-core.scss

@@ -1,18 +0,0 @@
-@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/container/_container.scss

@@ -1,3 +0,0 @@
-@forward './container-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/container/container' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/container' instead.";

package/src/layout-primitives/cover/_cover-core.scss

@@ -1,86 +0,0 @@
-@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/cover/_cover.scss

@@ -1,3 +0,0 @@
-@forward './cover-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/cover/cover' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/cover' instead.";

package/src/layout-primitives/decorator/_decorator-core.scss

@@ -1,109 +0,0 @@
-@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/decorator/_decorator.scss

@@ -1,3 +0,0 @@
-@forward './decorator-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/decorator/decorator' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/decorator' instead.";

package/src/layout-primitives/float/_float-core.scss

@@ -1,29 +0,0 @@
-@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/float/_float.scss

@@ -1,3 +0,0 @@
-@forward './float-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/float/float' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/float' instead.";

package/src/layout-primitives/frame/_frame-core.scss

@@ -1,36 +0,0 @@
-@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/frame/_frame.scss

@@ -1,3 +0,0 @@
-@forward './frame-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/frame/frame' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/frame' instead.";

package/src/layout-primitives/gutters/_gutters-core.scss

@@ -1,12 +0,0 @@
-@mixin abstract-gutters() {
-  --unitone--padding: var(--unitone--s4);
-
-  padding-top: var(--unitone--padding);
-  padding-bottom: var(--unitone--padding);
-}
-
-@mixin gutters() {
-  [data-unitone-layout~="gutters"] {
-    @include abstract-gutters();
-  }
-}

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

@@ -1,3 +0,0 @@
-@forward './gutters-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/gutters/gutters' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/gutters' instead.";

package/src/layout-primitives/layers/_layers-core.scss

@@ -1,141 +0,0 @@
-@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: none;
-      --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/layers/_layers.scss

@@ -1,3 +0,0 @@
-@forward './layers-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/layers/layers' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/layers' instead.";

package/src/layout-primitives/marquee/_marquee-core.scss

@@ -1,73 +0,0 @@
-@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/marquee/_marquee.scss

@@ -1,3 +0,0 @@
-@forward './marquee-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/marquee/marquee' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/marquee' instead.";