@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/foundation/_foundation.scss

@@ -1,107 +1,3 @@
-@use '../variables/variables' as variables;
+@forward './foundation-core';
 
-:where(:not(a):not(b):not(bdi):not(bdo):not(cite):not(data):not(del):not(dfn):not(em):not(i):not(ins):not(mark):not(q):not(ruby):not(s):not(samp):not(small):not(span):not(strong):not(sub):not(sup):not(time):not(u):not(svg)) {
-  @include variables.typography();
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-a {
-  text-underline-offset: 0.1em;
-  text-decoration-thickness: 1px;
-}
-
-:where(
-  address,
-  article,
-  aside,
-  blockquote,
-  details,
-  dialog,
-  dd,
-  div,
-  dl,
-  dt,
-  fieldset,
-  figcaption,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  header,
-  hgroup,
-  hr,
-  li,
-  main,
-  nav,
-  ol,
-  p,
-  pre,
-  section,
-  table,
-  ul
-) {
-  margin: 0;
-  padding: 0;
-}
-
-:where(li) {
-  margin-inline-start: 1.5em;
-}
-
-small {
-  font-size: smaller;
-}
-
-sup {
-  font-size: smaller;
-
-  @supports (font-variant-position: super) {
-    font-variant-position: super;
-    vertical-align: baseline;
-    font-size: inherit;
-  }
-}
-
-sub {
-  font-size: smaller;
-
-  @supports (font-variant-position: sub) {
-    font-variant-position: sub;
-    vertical-align: baseline;
-    font-size: inherit;
-  }
-}
-
-img,
-video {
-  height: auto;
-  max-width: 100%;
-}
-
-figure {
-  max-width: 100%;
-}
-
-figcaption {
-  --unitone--font-size: -2;
-
-  margin: var(--unitone--s-2) 0 0;
-  display: block;
-  width: 0;
-  min-width: fit-content !important;
-  text-align: start;
-}
-
-pre {
-  text-spacing-trim: space-all;
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/foundation/foundation' will be removed in a future release. Use '@inc2734/unitone-css/src/foundation' instead.";

package/src/foundation/_index.scss

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

package/src/helper/_helper.scss

@@ -1,43 +1,3 @@
-@use 'align-content';
-@use 'align-items';
-@use 'align-self';
-@use 'align';
-@use 'auto-repeat';
-@use 'auto-phrase';
-@use 'background-clip';
-@use 'gap';
-@use 'gutters';
-@use 'justify-content';
-@use 'justify-items';
-@use 'justify-self';
-@use 'link-decoration';
-@use 'mix-blend-mode';
-@use 'negative-gap';
-@use 'overflow';
-@use 'padding';
-@use 'position';
-@use 'stairs';
-@use 'text-orientation';
-@use 'typography';
+@forward '../behaviors';
 
-@include align-content.align-content();
-@include align-items.align-items();
-@include align-self.align-self();
-@include align.align();
-@include auto-repeat.auto-repeat();
-@include auto-phrase.auto-phrase();
-@include background-clip.background-clip();
-@include gap.gap();
-@include gutters.gutters();
-@include justify-content.justify-content();
-@include justify-items.justify-items();
-@include justify-self.justify-self();
-@include link-decoration.link-decoration();
-@include mix-blend-mode.mix-blend-mode();
-@include negative-gap.negative-gap();
-@include overflow.overflow();
-@include padding.padding();
-@include stairs.stairs();
-@include position.position();
-@include text-orientation.text-orientation();
-@include typography.typography();
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/helper/helper' will be removed in a future release. Use '@inc2734/unitone-css/src/behaviors' instead.";

package/src/layout-primitives/_index.scss

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

package/src/layout-primitives/_layout-primitives-core.scss

@@ -0,0 +1,41 @@
+@use 'both-sides';
+@use 'center';
+@use 'cluster';
+@use 'container';
+@use 'cover';
+@use 'decorator';
+@use 'float';
+@use 'frame';
+@use 'gutters';
+@use 'layers';
+@use 'marquee';
+@use 'masonry';
+@use 'reel';
+@use 'responsive-grid';
+@use 'stack';
+@use 'switcher';
+@use 'text';
+@use 'texture';
+@use 'vertical-writing';
+@use 'with-sidebar';
+
+@include both-sides.both-sides();
+@include center.center();
+@include cluster.cluster();
+@include container.container();
+@include cover.cover();
+@include decorator.decorator();
+@include float.float();
+@include frame.frame();
+@include gutters.gutters();
+@include layers.layers();
+@include marquee.marquee();
+@include masonry.masonry();
+@include reel.reel();
+@include responsive-grid.responsive-grid();
+@include stack.stack();
+@include switcher.switcher();
+@include text.text();
+@include texture.texture();
+@include vertical-writing.vertical-writing();
+@include with-sidebar.with-sidebar();

package/src/layout-primitives/_layout-primitives.scss

@@ -1,43 +1,3 @@
-@use 'both-sides/both-sides';
-@use 'decorator/decorator';
-@use 'center/center';
-@use 'cluster/cluster';
-@use 'cover/cover';
-@use 'float/float';
-@use 'frame/frame';
-@use 'layers/layers';
-@use 'marquee/marquee';
-@use 'masonry/masonry';
-@use 'reel/reel';
-@use 'responsive-grid/responsive-grid';
-@use 'gutters/gutters';
-@use 'stack/stack';
-@use 'switcher/switcher';
-@use 'text/text';
-@use 'texture/texture';
-@use 'vertical-writing/vertical-writing';
-@use 'with-sidebar/with-sidebar';
+@forward './layout-primitives-core';
 
-@use 'container/container';
-
-@include both-sides.both-sides();
-@include decorator.decorator();
-@include center.center();
-@include cluster.cluster();
-@include cover.cover();
-@include float.float();
-@include frame.frame();
-@include layers.layers();
-@include marquee.marquee();
-@include masonry.masonry();
-@include reel.reel();
-@include responsive-grid.responsive-grid();
-@include gutters.gutters();
-@include stack.stack();
-@include switcher.switcher();
-@include text.text();
-@include texture.texture();
-@include vertical-writing.vertical-writing();
-@include with-sidebar.with-sidebar();
-
-@include container.container();
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/layout-primitives' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives' instead.";

package/src/layout-primitives/both-sides/_both-sides-core.scss

@@ -0,0 +1,31 @@
+@mixin abstract-both-sides() {
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--column-gap: var(--unitone--gap);
+  --unitone--row-gap: var(--unitone--gap);
+  --unitone--align-items: start;
+  --unitone--content-width: fit-content;
+  --unitone--content-max-width: 100%;
+
+  display: flex;
+  column-gap: var(--unitone--column-gap);
+  row-gap: var(--unitone--row-gap);
+  flex-wrap: wrap;
+  align-items: var(--unitone--align-items);
+  justify-content: space-between;
+
+  > * {
+    --unitone--max-width: var(--unitone--content-max-width);
+    --unitone--flex-basis: var(--unitone--content-width);
+
+    flex-basis: var(--unitone--flex-basis);
+    flex-grow: 0;
+    max-width: min(100%, var(--unitone--max-width));
+    min-width: 0;
+  }
+}
+
+@mixin both-sides() {
+  [data-unitone-layout~="both-sides"] {
+    @include abstract-both-sides();
+  }
+}

package/src/layout-primitives/both-sides/_both-sides.scss

@@ -1,31 +1,3 @@
-@mixin abstract-both-sides() {
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--column-gap: var(--unitone--gap);
-  --unitone--row-gap: var(--unitone--gap);
-  --unitone--align-items: start;
-  --unitone--content-width: fit-content;
-  --unitone--content-max-width: 100%;
+@forward './both-sides-core';
 
-  display: flex;
-  column-gap: var(--unitone--column-gap);
-  row-gap: var(--unitone--row-gap);
-  flex-wrap: wrap;
-  align-items: var(--unitone--align-items);
-  justify-content: space-between;
-
-  > * {
-    --unitone--max-width: var(--unitone--content-max-width);
-    --unitone--flex-basis: var(--unitone--content-width);
-
-    flex-basis: var(--unitone--flex-basis);
-    flex-grow: 0;
-    max-width: min(100%, var(--unitone--max-width));
-    min-width: 0;
-  }
-}
-
-@mixin both-sides() {
-  [data-unitone-layout~="both-sides"] {
-    @include abstract-both-sides();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/both-sides/both-sides' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/both-sides' instead.";

package/src/layout-primitives/both-sides/_index.scss

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

package/src/layout-primitives/both-sides/react.jsx

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

package/src/layout-primitives/center/_center-core.scss

@@ -0,0 +1,22 @@
+@mixin abstract-center() {
+  --unitone--gutters: 0px;
+  --unitone--max-width: var(--unitone--measure);
+
+  box-sizing: content-box;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: var(--unitone--max-width);
+  padding-right: var(--unitone--gutters);
+  padding-left: var(--unitone--gutters);
+  width: fit-content;
+
+  &[data-unitone-layout~="-with-text"] {
+    text-align: center;
+  }
+}
+
+@mixin center() {
+  [data-unitone-layout~="center"] {
+    @include abstract-center();
+  }
+}

package/src/layout-primitives/center/_center.scss

@@ -1,22 +1,3 @@
-@mixin abstract-center() {
-  --unitone--gutters: 0px;
-  --unitone--max-width: var(--unitone--measure);
+@forward './center-core';
 
-  box-sizing: content-box;
-  margin-right: auto;
-  margin-left: auto;
-  max-width: var(--unitone--max-width);
-  padding-right: var(--unitone--gutters);
-  padding-left: var(--unitone--gutters);
-  width: fit-content;
-
-  &[data-unitone-layout~="-with-text"] {
-    text-align: center;
-  }
-}
-
-@mixin center() {
-  [data-unitone-layout~="center"] {
-    @include abstract-center();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/center/center' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/center' instead.";

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

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

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

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

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

@@ -0,0 +1,126 @@
+@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,126 +1,3 @@
-@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;
+@forward './cluster-core';
 
-  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();
-  }
-}
+@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/cluster/_index.scss

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

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

@@ -0,0 +1,3 @@
+import '../../behaviors/dividers';
+
+export { Cluster } from './index';

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

@@ -0,0 +1,18 @@
+@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,18 +1,3 @@
-@mixin abstract-container() {
-  --unitone--gutters: var(--unitone--global--gutters);
-  --unitone--max-width: var(--unitone--container-max-width);
+@forward './container-core';
 
-  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();
-  }
-}
+@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/container/_index.scss

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

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

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