@inc2734/unitone-css 0.94.3 → 0.95.0

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

@@ -0,0 +1,80 @@
+@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;
+
+  &[data-unitone-layout~="-valign:top"] {
+    margin-top: 0;
+    margin-bottom: auto;
+  }
+
+  &[data-unitone-layout~="-valign:center"] {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  &[data-unitone-layout~="-valign:bottom"] {
+    margin-top: auto;
+    margin-bottom: 0;
+  }
+
+  &[data-unitone-layout~="-valign:top"] + &[data-unitone-layout~="-valign:center"] {
+    margin-top: 0;
+  }
+
+  &[data-unitone-layout~="-valign:center"] + &[data-unitone-layout~="-valign:bottom"] {
+    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,80 +1,3 @@
-@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;
+@forward './cover-core';
 
-  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;
-
-  &[data-unitone-layout~="-valign:top"] {
-    margin-top: 0;
-    margin-bottom: auto;
-  }
-
-  &[data-unitone-layout~="-valign:center"] {
-    margin-top: auto;
-    margin-bottom: auto;
-  }
-
-  &[data-unitone-layout~="-valign:bottom"] {
-    margin-top: auto;
-    margin-bottom: 0;
-  }
-
-  &[data-unitone-layout~="-valign:top"] + &[data-unitone-layout~="-valign:center"] {
-    margin-top: 0;
-  }
-
-  &[data-unitone-layout~="-valign:center"] + &[data-unitone-layout~="-valign:bottom"] {
-    margin-top: 0;
-  }
-}
-
-@mixin cover() {
-  [data-unitone-layout~="cover"] {
-    @include abstract-cover();
-  }
-
-  [data-unitone-layout~="cover__content"] {
-    @include abstract-cover__content();
-  }
-}
+@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/cover/_index.scss

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

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

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

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

@@ -0,0 +1,104 @@
+@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;
+
+  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\:"],
+    [data-unitone-layout*="-align-content\:"],
+    [data-unitone-layout*="-justify-items\:"]
+  ) {
+    display: grid;
+
+    > * {
+      min-width: 0;
+    }
+  }
+
+  &[data-unitone-layout*="-gap\:"] {
+    gap: var(--unitone--gap);
+  }
+
+  &[data-unitone-layout*="-align-content\:"] {
+    align-content: var(--unitone--align-content);
+  }
+
+  &[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,104 +1,3 @@
-@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;
+@forward './decorator-core';
 
-  --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;
-
-  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\:"],
-    [data-unitone-layout*="-align-content\:"],
-    [data-unitone-layout*="-justify-items\:"]
-  ) {
-    display: grid;
-
-    > * {
-      min-width: 0;
-    }
-  }
-
-  &[data-unitone-layout*="-gap\:"] {
-    gap: var(--unitone--gap);
-  }
-
-  &[data-unitone-layout*="-align-content\:"] {
-    align-content: var(--unitone--align-content);
-  }
-
-  &[data-unitone-layout*="-justify-items\:"] {
-    justify-items: var(--unitone--justify-items);
-  }
-}
-
-@mixin decorator() {
-  [data-unitone-layout~="decorator"] {
-    @include abstract-decorator();
-  }
-}
+@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/decorator/_index.scss

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

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

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

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

@@ -0,0 +1,29 @@
+@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,29 +1,3 @@
-@mixin abstract-float() {
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--min-measure: calc(var(--unitone--measure) / 2);
-  --unitone--min-width: 33.33333%;
+@forward './float-core';
 
-  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();
-  }
-}
+@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/float/_index.scss

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

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

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

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

@@ -0,0 +1,36 @@
+@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,36 +1,3 @@
-@mixin abstract-frame() {
-  --unitone--ratio: 16/9;
+@forward './frame-core';
 
-  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();
-  }
-}
+@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/frame/_index.scss

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

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

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

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

@@ -0,0 +1,12 @@
+@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,12 +1,3 @@
-@mixin abstract-gutters() {
-  --unitone--padding: var(--unitone--s4);
+@forward './gutters-core';
 
-  padding-top: var(--unitone--padding);
-  padding-bottom: var(--unitone--padding);
-}
-
-@mixin gutters() {
-  [data-unitone-layout~="gutters"] {
-    @include abstract-gutters();
-  }
-}
+@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/gutters/_index.scss

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

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

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

package/src/layout-primitives/index.js

@@ -1,20 +1,2 @@
-export { BothSides } from './both-sides';
-export { Center } from './center';
-export { Cluster } from './cluster';
-export { Container } from './container';
-export { Cover, CoverContent } from './cover';
-export { Decorator } from './decorator';
-export { Float } from './float';
-export { Frame } from './frame';
-export { Gutters } from './gutters';
-export { Layers } from './layers';
-export { Marquee } from './marquee';
-export { Masonry } from './masonry';
-export { Reel } from './reel';
-export { ResponsiveGrid } from './responsive-grid';
-export { Stack } from './stack';
-export { Switcher } from './switcher';
-export { Text } from './text';
-export { Texture } from './texture';
-export { VerticalWriting } from './vertical-writing';
-export { WithSidebar } from './with-sidebar';
+import './marquee/behavior';
+import './vertical-writing/behavior';

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

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