@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/layout-primitives/stack/_stack.scss

@@ -1,201 +1,3 @@
-@mixin abstract-stack() {
-  --unitone--gap: var(--unitone--global--text-gap);
-  --unitone--negative-gap: var(--unitone--global--text-gap);
+@forward './stack-core';
 
-  display: flex;
-  flex-direction: column;
-  gap: var(--unitone--gap);
-  list-style: none;
-
-  > * {
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-
-  > li {
-    margin-left: 0;
-  }
-
-  &:only-child {
-    height: 100%;
-  }
-
-  &[data-unitone-layout~="-revert"] {
-    flex-direction: column-reverse;
-  }
-
-  &:where([data-unitone-layout*="-divider\:"]) {
-    --unitone--divider-width: 1px;
-    --unitone--divider-style: solid;
-    --unitone--divider-color: var(--unitone--color--gray);
-
-    gap: 0;
-
-    > * {
-      position: relative;
-    }
-
-    > ::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"] {
-    > * {
-      padding: calc(var(--unitone--gap) + var(--unitone--divider-width)) 0;
-
-      &::before {
-        border-width: var(--unitone--divider-width) 0;
-      }
-    }
-
-    &:where(:not([data-unitone-layout~="-revert"])) {
-      > :not(:first-child) {
-        padding-top: var(--unitone--gap);
-
-        &::before {
-          border-top-width: 0;
-        }
-      }
-    }
-
-    &:where([data-unitone-layout~="-revert"]) {
-      > :not(:last-child) {
-        padding-top: var(--unitone--gap);
-
-        &::before {
-          border-top-width: 0;
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:underline"] {
-    > * {
-      padding-top: var(--unitone--gap);
-      padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
-
-      &::before {
-        border-width: 0 0 var(--unitone--divider-width);
-      }
-    }
-
-    &:where(:not([data-unitone-layout~="-revert"])) {
-      > :first-child {
-        padding-top: 0;
-      }
-    }
-
-    &:where([data-unitone-layout~="-revert"]) {
-      > :last-child {
-        padding-top: 0;
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:bordered"] {
-    > * {
-      padding: calc(var(--unitone--gap) + var(--unitone--divider-width));
-
-      &::before {
-        border-width: var(--unitone--divider-width);
-      }
-    }
-
-    &:where(:not([data-unitone-layout~="-revert"])) {
-      > :not(:first-child) {
-        padding-top: var(--unitone--gap);
-
-        &::before {
-          border-top-width: 0;
-        }
-      }
-    }
-
-    &:where([data-unitone-layout~="-revert"]) {
-      > :not(:last-child) {
-        padding-top: var(--unitone--gap);
-
-        &::before {
-          border-top-width: 0;
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:divide"] {
-    > * {
-      padding-top: var(--unitone--gap);
-      padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
-    }
-
-    &:where(:not([data-unitone-layout~="-revert"])) {
-      > :first-child {
-        padding-top: 0;
-      }
-
-      > :last-child {
-        padding-bottom: 0;
-      }
-
-      > :not(:last-child) {
-        &::before {
-          border-width: 0 0 var(--unitone--divider-width);
-        }
-      }
-    }
-
-    &:where([data-unitone-layout~="-revert"]) {
-      > :first-child {
-        padding-bottom: 0;
-      }
-
-      > :last-child {
-        padding-top: 0;
-      }
-
-      > :not(:first-child) {
-        &::before {
-          border-width: 0 0 var(--unitone--divider-width);
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-negative"] {
-    gap: 0;
-
-    &:where(:not([data-unitone-layout~="-revert"])) {
-      > :not(:first-child) {
-        margin-top: calc(-1 * var(--unitone--negative-gap));
-      }
-    }
-
-    &:where([data-unitone-layout~="-revert"]) {
-      > :not(:last-child) {
-        margin-top: calc(-1 * var(--unitone--negative-gap));
-      }
-    }
-  }
-}
-
-@mixin stack() {
-  [data-unitone-layout~="stack"] {
-    @include abstract-stack();
-
-    // @todo
-    // Specify a component whose width is specified by max-width of the child element, not by itself.
-    > [data-unitone-layout~="text"]:where(:not([data-unitone-layout*="align\:"])) {
-      margin-right: 0;
-      margin-left: 0;
-      max-width: none;
-    }
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/stack/stack' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/stack' instead.";

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

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

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

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

package/src/layout-primitives/switcher/_switcher-core.scss

@@ -0,0 +1,70 @@
+@mixin abstract-switcher() {
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--column-gap: var(--unitone--gap);
+  --unitone--row-gap: var(--unitone--gap);
+  --unitone--threshold: var(--unitone--measure);
+  --unitone--align-items: stretch;
+
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--unitone--column-gap);
+  row-gap: var(--unitone--row-gap);
+  align-items: var(--unitone--align-items);
+
+  &[data-unitone-layout~="-revert"] {
+    flex-direction: row-reverse;
+  }
+
+  &:where([data-unitone-layout*="-stairs\:"]) {
+    --unitone--align-items: start;
+
+    padding-bottom: calc(var(--unitone--stairs-step-overflow-volume, 0) * 1px);
+    visibility: hidden;
+
+    &[data-unitone-layout~="stairs:initialized"] {
+      visibility: visible;
+    }
+
+    > :where([style*="--unitone--stairs-step:"]) {
+      position: relative;
+    }
+
+    &:where(:not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-stairs-up\:right"])),
+    &:where([data-unitone-layout~="-revert"][data-unitone-layout~="-stairs-up\:right"]) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
+      }
+    }
+
+    &:where(:not([data-unitone-layout~="-revert"])[data-unitone-layout~="-stairs-up\:right"]),
+    &:where([data-unitone-layout~="-revert"]:not([data-unitone-layout~="-stairs-up\:right"])) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
+      }
+    }
+
+    &:where([data-unitone-layout~="-stairs-up\:up-down"]) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
+      }
+    }
+
+    &:where([data-unitone-layout~="-stairs-up\:down-up"]) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
+      }
+    }
+  }
+
+  > * {
+    flex-grow: 1;
+    flex-basis: calc((var(--unitone--threshold) - 100%) * 999);
+    min-width: 0;
+  }
+}
+
+@mixin switcher() {
+  [data-unitone-layout~="switcher"] {
+    @include abstract-switcher();
+  }
+}

package/src/layout-primitives/switcher/_switcher.scss

@@ -1,70 +1,3 @@
-@mixin abstract-switcher() {
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--column-gap: var(--unitone--gap);
-  --unitone--row-gap: var(--unitone--gap);
-  --unitone--threshold: var(--unitone--measure);
-  --unitone--align-items: stretch;
+@forward './switcher-core';
 
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: var(--unitone--column-gap);
-  row-gap: var(--unitone--row-gap);
-  align-items: var(--unitone--align-items);
-
-  &[data-unitone-layout~="-revert"] {
-    flex-direction: row-reverse;
-  }
-
-  &:where([data-unitone-layout*="-stairs\:"]) {
-    --unitone--align-items: start;
-
-    padding-bottom: calc(var(--unitone--stairs-step-overflow-volume, 0) * 1px);
-    visibility: hidden;
-
-    &[data-unitone-layout~="stairs:initialized"] {
-      visibility: visible;
-    }
-
-    > :where([style*="--unitone--stairs-step:"]) {
-      position: relative;
-    }
-
-    &:where(:not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-stairs-up\:right"])),
-    &:where([data-unitone-layout~="-revert"][data-unitone-layout~="-stairs-up\:right"]) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
-      }
-    }
-
-    &:where(:not([data-unitone-layout~="-revert"])[data-unitone-layout~="-stairs-up\:right"]),
-    &:where([data-unitone-layout~="-revert"]:not([data-unitone-layout~="-stairs-up\:right"])) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
-      }
-    }
-
-    &:where([data-unitone-layout~="-stairs-up\:up-down"]) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
-      }
-    }
-
-    &:where([data-unitone-layout~="-stairs-up\:down-up"]) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
-      }
-    }
-  }
-
-  > * {
-    flex-grow: 1;
-    flex-basis: calc((var(--unitone--threshold) - 100%) * 999);
-    min-width: 0;
-  }
-}
-
-@mixin switcher() {
-  [data-unitone-layout~="switcher"] {
-    @include abstract-switcher();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/switcher/switcher' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/switcher' instead.";

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

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

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

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

package/src/layout-primitives/text/_text-core.scss

@@ -0,0 +1,169 @@
+@mixin abstract-text() {
+  --unitone--gutters: 0px;
+  --unitone--max-width: var(--unitone--measure);
+
+  box-sizing: content-box;
+  padding-right: var(--unitone--gutters);
+  padding-left: var(--unitone--gutters);
+  max-width: none;
+
+  &[data-unitone-layout*="-gap\:"] {
+    --unitone--gap: inherit !important;
+  }
+
+  @for $i from -2 through 7 {
+    &[data-unitone-layout~="-gap\:#{ $i }"] {
+      --unitone--column-gap: var(--unitone--s#{ $i }) !important;
+    }
+
+    &[data-unitone-layout~="-gap\:#{ $i }"] > * {
+      --unitone--text-gap: var(--unitone--s#{ $i }) !important;
+    }
+  }
+
+  @for $i from 1 through 7 {
+    &[data-unitone-layout~="-gap\:#{ $i }s"] {
+      --unitone--column-gap: var(--unitone--s#{ $i }s) !important;
+    }
+
+    &[data-unitone-layout~="-gap\:#{ $i }s"] > * {
+      --unitone--text-gap: var(--unitone--s#{ $i }s) !important;
+    }
+  }
+
+  @for $i from 2 through 7 {
+    &[data-unitone-layout~="-gap\:#{ $i }m"] {
+      --unitone--column-gap: var(--unitone--s#{ $i }m) !important;
+    }
+
+    &[data-unitone-layout~="-gap\:#{ $i }m"] > * {
+      --unitone--text-gap: var(--unitone--s#{ $i }m) !important;
+    }
+  }
+
+  @at-root {
+    :where(& > *) {
+      margin-right: auto;
+      margin-left: auto;
+      max-width: min(100%, var(--unitone--max-width));
+    }
+  }
+
+  > * {
+    --unitone--text-gap-scale: 1;
+    --unitone--text-gap: var(--unitone--global--text-gap);
+    --unitone--text-gap-increment: 0px;
+  }
+
+  > h1 {
+    --unitone--font-size: 4;
+  }
+
+  > h2 {
+    --unitone--font-size: 3;
+  }
+
+  > h3 {
+    --unitone--font-size: 2;
+  }
+
+  > h4 {
+    --unitone--font-size: 1;
+  }
+
+  > h5 {
+    --unitone--font-size: 0;
+  }
+
+  > h6 {
+    --unitone--font-size: 0;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    text-wrap: pretty;
+  }
+
+  &:lang(ja) {
+    font-feature-settings: "palt" 0;
+    font-kerning: none;
+
+    > :where(h1, h2, h3, h4, h5) {
+      font-feature-settings: "palt" 1;
+      font-kerning: normal;
+    }
+  }
+
+  &:where([data-unitone-layout~="-align\:start"]),
+  &:where([data-unitone-layout~="-align\:center"]),
+  &:where([data-unitone-layout~="-align\:end"]) {
+    max-width: var(--unitone--max-width);
+  }
+}
+
+@mixin abstract-text--gap() {
+  > * {
+    --unitone--margin-block: calc(var(--unitone--text-gap-scale) * var(--unitone--text-gap) + var(--unitone--text-gap-increment));
+
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  // We want to put a larger space than usual before and after paragraphs with large font sizes.
+  > * + :where(:not(:is(:last-child, h2, h3, h4, h5, h6))) {
+    margin-block-end: var(--unitone--margin-block);
+  }
+
+  > * + * {
+    margin-block-start: var(--unitone--margin-block);
+  }
+
+  > :where(h2, h3, h4, h5, h6) {
+    --unitone--text-gap-scale: 1.5;
+
+    & + :where(h2, h3, h4, h5, h6) {
+      --unitone--text-gap-scale: 1;
+    }
+  }
+
+  > h5 + * {
+    --unitone--text-gap-scale: .5;
+  }
+
+  > h6 + * {
+    --unitone--text-gap-scale: .5;
+  }
+}
+
+@mixin abstract-text--column() {
+  --unitone--column-gap: var(--unitone--text-gap);
+  --unitone--column-width: var(--unitone--measure);
+  --unitone--max-width: 100%;
+
+  margin-right: auto;
+  margin-left: auto;
+  column-width: var(--unitone--column-width);
+  column-gap: calc(var(--unitone--column-gap) + (1em * var(--unitone--half-leading)));
+  max-width: var(--unitone--max-width);
+
+  > * {
+    max-width: none;
+  }
+}
+
+@mixin text() {
+  [data-unitone-layout~="text"] {
+    @include abstract-text();
+  }
+
+  [data-unitone-layout~="text"]:where([data-unitone-layout~="-gap"]) {
+    @include abstract-text--gap();
+  }
+
+  [data-unitone-layout~="text"]:where([data-unitone-layout~="-column"]) {
+    @include abstract-text--column();
+  }
+
+  :where([data-unitone-layout~="text"][data-unitone-layout~="-center"]) > * {
+    width: fit-content;
+  }
+}

package/src/layout-primitives/text/_text.scss

@@ -1,169 +1,3 @@
-@mixin abstract-text() {
-  --unitone--gutters: 0px;
-  --unitone--max-width: var(--unitone--measure);
+@forward './text-core';
 
-  box-sizing: content-box;
-  padding-right: var(--unitone--gutters);
-  padding-left: var(--unitone--gutters);
-  max-width: none;
-
-  &[data-unitone-layout*="-gap\:"] {
-    --unitone--gap: inherit !important;
-  }
-
-  @for $i from -2 through 7 {
-    &[data-unitone-layout~="-gap\:#{ $i }"] {
-      --unitone--column-gap: var(--unitone--s#{ $i }) !important;
-    }
-
-    &[data-unitone-layout~="-gap\:#{ $i }"] > * {
-      --unitone--text-gap: var(--unitone--s#{ $i }) !important;
-    }
-  }
-
-  @for $i from 1 through 7 {
-    &[data-unitone-layout~="-gap\:#{ $i }s"] {
-      --unitone--column-gap: var(--unitone--s#{ $i }s) !important;
-    }
-
-    &[data-unitone-layout~="-gap\:#{ $i }s"] > * {
-      --unitone--text-gap: var(--unitone--s#{ $i }s) !important;
-    }
-  }
-
-  @for $i from 2 through 7 {
-    &[data-unitone-layout~="-gap\:#{ $i }m"] {
-      --unitone--column-gap: var(--unitone--s#{ $i }m) !important;
-    }
-
-    &[data-unitone-layout~="-gap\:#{ $i }m"] > * {
-      --unitone--text-gap: var(--unitone--s#{ $i }m) !important;
-    }
-  }
-
-  @at-root {
-    :where(& > *) {
-      margin-right: auto;
-      margin-left: auto;
-      max-width: min(100%, var(--unitone--max-width));
-    }
-  }
-
-  > * {
-    --unitone--text-gap-scale: 1;
-    --unitone--text-gap: var(--unitone--global--text-gap);
-    --unitone--text-gap-increment: 0px;
-  }
-
-  > h1 {
-    --unitone--font-size: 4;
-  }
-
-  > h2 {
-    --unitone--font-size: 3;
-  }
-
-  > h3 {
-    --unitone--font-size: 2;
-  }
-
-  > h4 {
-    --unitone--font-size: 1;
-  }
-
-  > h5 {
-    --unitone--font-size: 0;
-  }
-
-  > h6 {
-    --unitone--font-size: 0;
-  }
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    text-wrap: pretty;
-  }
-
-  &:lang(ja) {
-    font-feature-settings: "palt" 0;
-    font-kerning: none;
-
-    > :where(h1, h2, h3, h4, h5) {
-      font-feature-settings: "palt" 1;
-      font-kerning: normal;
-    }
-  }
-
-  &:where([data-unitone-layout~="-align\:start"]),
-  &:where([data-unitone-layout~="-align\:center"]),
-  &:where([data-unitone-layout~="-align\:end"]) {
-    max-width: var(--unitone--max-width);
-  }
-}
-
-@mixin abstract-text--gap() {
-  > * {
-    --unitone--margin-block: calc(var(--unitone--text-gap-scale) * var(--unitone--text-gap) + var(--unitone--text-gap-increment));
-
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-  // We want to put a larger space than usual before and after paragraphs with large font sizes.
-  > * + :where(:not(:is(:last-child, h2, h3, h4, h5, h6))) {
-    margin-block-end: var(--unitone--margin-block);
-  }
-
-  > * + * {
-    margin-block-start: var(--unitone--margin-block);
-  }
-
-  > :where(h2, h3, h4, h5, h6) {
-    --unitone--text-gap-scale: 1.5;
-
-    & + :where(h2, h3, h4, h5, h6) {
-      --unitone--text-gap-scale: 1;
-    }
-  }
-
-  > h5 + * {
-    --unitone--text-gap-scale: .5;
-  }
-
-  > h6 + * {
-    --unitone--text-gap-scale: .5;
-  }
-}
-
-@mixin abstract-text--column() {
-  --unitone--column-gap: var(--unitone--text-gap);
-  --unitone--column-width: var(--unitone--measure);
-  --unitone--max-width: 100%;
-
-  margin-right: auto;
-  margin-left: auto;
-  column-width: var(--unitone--column-width);
-  column-gap: calc(var(--unitone--column-gap) + (1em * var(--unitone--half-leading)));
-  max-width: var(--unitone--max-width);
-
-  > * {
-    max-width: none;
-  }
-}
-
-@mixin text() {
-  [data-unitone-layout~="text"] {
-    @include abstract-text();
-  }
-
-  [data-unitone-layout~="text"]:where([data-unitone-layout~="-gap"]) {
-    @include abstract-text--gap();
-  }
-
-  [data-unitone-layout~="text"]:where([data-unitone-layout~="-column"]) {
-    @include abstract-text--column();
-  }
-
-  :where([data-unitone-layout~="text"][data-unitone-layout~="-center"]) > * {
-    width: fit-content;
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/text/text' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/text' instead.";

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

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

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

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