@inc2734/unitone-css 0.94.3 → 0.95.0

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

@@ -0,0 +1,139 @@
+@mixin abstract-layers() {
+  --unitone--columns: var(--unitone--grid-columns);
+  --unitone--rows: var(--unitone--grid-rows);
+  --unitone--gap: var(--unitone--grid-gap);
+  --unitone--min-height: 0;
+  --unitone--blur: 75px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--unitone--columns), 1fr);
+  grid-template-rows: repeat(var(--unitone--rows), 1fr);
+  gap: min(3.33333%, var(--unitone--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);
+    }
+  }
+
+  // @todo Firefox corrupts layout if % is used for gap
+  @-moz-document url-prefix() {
+    gap: min(3.33333vw, var(--unitone--gap));
+  }
+
+  > * {
+    --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,139 +1,3 @@
-@mixin abstract-layers() {
-  --unitone--columns: var(--unitone--grid-columns);
-  --unitone--rows: var(--unitone--grid-rows);
-  --unitone--gap: var(--unitone--grid-gap);
-  --unitone--min-height: 0;
-  --unitone--blur: 75px;
+@forward './layers-core';
 
-  display: grid;
-  grid-template-columns: repeat(var(--unitone--columns), 1fr);
-  grid-template-rows: repeat(var(--unitone--rows), 1fr);
-  gap: min(3.33333%, var(--unitone--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);
-    }
-  }
-
-  // @todo Firefox corrupts layout if % is used for gap
-  @-moz-document url-prefix() {
-    gap: min(3.33333vw, var(--unitone--gap));
-  }
-
-  > * {
-    --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();
-  }
-}
+@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/layers/react.jsx

@@ -0,0 +1 @@
+export { Layers } from './index';

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

@@ -0,0 +1 @@
+@forward './marquee-core';

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

@@ -0,0 +1,73 @@
+@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,73 +1,3 @@
-@mixin abstract-marquee-wrapper() {
-  --unitone--animation-duration: 20s;
-  --unitone--gap: var(--unitone--global--text-gap);
-  --unitone--item-width: auto;
+@forward './marquee-core';
 
-  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)); }
-}
+@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.";

package/src/layout-primitives/marquee/behavior.js

@@ -0,0 +1,8 @@
+import { marqueeResizeObserver } from '../../library';
+import { registerLayoutInitializer } from '../../register-layout-initializer';
+
+registerLayoutInitializer({
+  key: 'layout-primitives/marquee',
+  selector: '[data-unitone-layout~="marquee-wrapper"]',
+  initialize: marqueeResizeObserver,
+});

package/src/layout-primitives/marquee/react.jsx

@@ -0,0 +1,3 @@
+import './behavior';
+
+export { Marquee } from './index';

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

@@ -0,0 +1 @@
+@forward './masonry-core';

package/src/layout-primitives/masonry/_masonry-core.scss

@@ -0,0 +1,26 @@
+@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/masonry/_masonry.scss

@@ -1,26 +1,3 @@
-@mixin abstract-masonry() {
-  --unitone--gap: var(--unitone--s-2);
-  --unitone--column-width: calc(var(--unitone--measure) / 3);
+@forward './masonry-core';
 
-  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();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/masonry/masonry' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/masonry' instead.";

package/src/layout-primitives/masonry/react.jsx

@@ -0,0 +1 @@
+export { Masonry } from './index';

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

@@ -0,0 +1 @@
+@forward './reel-core';

package/src/layout-primitives/reel/_reel-core.scss

@@ -0,0 +1,55 @@
+@mixin abstract-reel() {
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--height: auto;
+  --unitone--item-width: calc(var(--unitone--measure) / 2);
+  --unitone--scrollbar-thumb-color: #ddd;
+  --unitone--scrollbar-track-color: transparent;
+
+  display: flex;
+  gap: var(--unitone--gap);
+  height: var(--unitone--height);
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: var(--unitone--s-2);
+  scrollbar-color: var(--unitone--scrollbar-thumb-color) var(--unitone--scrollbar-track-color);
+  scrollbar-width: 1rem;
+
+  &::-webkit-scrollbar {
+    height: 1rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--unitone--scrollbar-track-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--unitone--scrollbar-track-color);
+    background-image: linear-gradient(
+      var(--unitone--scrollbar-track-color) 0,
+      var(--unitone--scrollbar-track-color) 0.375rem,
+      var(--unitone--scrollbar-thumb-color) 0.375rem,
+      var(--unitone--scrollbar-thumb-color) 0.625rem,
+      var(--unitone--scrollbar-track-color) 0.625rem
+    );
+  }
+
+  > * {
+    flex: 0 0 var(--unitone--item-width);
+    min-width: 0;
+  }
+
+  &[data-unitone-layout~="-no-bar"] {
+    scrollbar-width: none;
+    padding-bottom: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+@mixin reel() {
+  [data-unitone-layout~="reel"] {
+    @include abstract-reel();
+  }
+}

package/src/layout-primitives/reel/_reel.scss

@@ -1,55 +1,3 @@
-@mixin abstract-reel() {
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--height: auto;
-  --unitone--item-width: calc(var(--unitone--measure) / 2);
-  --unitone--scrollbar-thumb-color: #ddd;
-  --unitone--scrollbar-track-color: transparent;
+@forward './reel-core';
 
-  display: flex;
-  gap: var(--unitone--gap);
-  height: var(--unitone--height);
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-bottom: var(--unitone--s-2);
-  scrollbar-color: var(--unitone--scrollbar-thumb-color) var(--unitone--scrollbar-track-color);
-  scrollbar-width: 1rem;
-
-  &::-webkit-scrollbar {
-    height: 1rem;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: var(--unitone--scrollbar-track-color);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--unitone--scrollbar-track-color);
-    background-image: linear-gradient(
-      var(--unitone--scrollbar-track-color) 0,
-      var(--unitone--scrollbar-track-color) 0.375rem,
-      var(--unitone--scrollbar-thumb-color) 0.375rem,
-      var(--unitone--scrollbar-thumb-color) 0.625rem,
-      var(--unitone--scrollbar-track-color) 0.625rem
-    );
-  }
-
-  > * {
-    flex: 0 0 var(--unitone--item-width);
-    min-width: 0;
-  }
-
-  &[data-unitone-layout~="-no-bar"] {
-    scrollbar-width: none;
-    padding-bottom: 0;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}
-
-@mixin reel() {
-  [data-unitone-layout~="reel"] {
-    @include abstract-reel();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/reel/reel' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/reel' instead.";

package/src/layout-primitives/reel/react.jsx

@@ -0,0 +1 @@
+export { Reel } from './index';

package/src/layout-primitives/responsive-grid/_index.scss

@@ -0,0 +1 @@
+@forward './responsive-grid-core';