@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/layout-primitives/vertical-writing/_vertical-writing.scss

@@ -1,118 +1,3 @@
-@mixin abstract-vertical-writing() {
-  --unitone--gap: var(--unitone--global--text-gap);
-  --unitone--column-gap: var(--unitone--global--gap);
-  --unitone--row-gap: var(--unitone--gap);
+@forward './vertical-writing-core';
 
-  --unitone--max-height: var(--unitone--vertical-writing--max-height, 25rem);
-  --unitone--text-orientation: mixed;
-  --unitone--threshold: 0px;
-
-  position: relative;
-  writing-mode: vertical-rl;
-  column-count: 1;
-  column-gap: var(--unitone--column-gap);
-  text-orientation: var(--unitone--text-orientation);
-  visibility: hidden;
-
-  &[data-unitone-layout~="vertical-writing\:initialized"] {
-    visibility: visible;
-  }
-
-  &[data-unitone-layout~="vertical-writing\:safari"] {
-    column-count: 2
-  }
-
-  > * {
-    max-inline-size: var(--unitone--max-height);
-    box-sizing: content-box;
-  }
-
-  > [data-unitone-layout~="vertical-writing__thresholder"] {
-    height: 0 !important;
-    position: absolute !important;
-    inset: auto auto 0 0 !important;
-    z-index: -1 !important;
-    pointer-events: none !important;
-    width: var(--unitone--threshold) !important;
-  }
-
-  &[data-unitone-layout~="-force-switch"] {
-    column-count: auto;
-    writing-mode: horizontal-tb;
-
-    > * {
-      box-sizing: border-box;
-      max-inline-size: none;
-    }
-  }
-
-  @media (orientation: portrait) and (max-width: 599px) {
-    &[data-unitone-layout~="-switch"] {
-      column-count: auto;
-      writing-mode: horizontal-tb;
-
-      > * {
-        box-sizing: border-box;
-      }
-    }
-  }
-
-  > *:not(:first-child) {
-    margin-block-start: calc(var(--unitone--margin-block-start, 1) * var(--unitone--row-gap));
-  }
-
-  > *:not(:last-child) {
-    margin-block-end: calc(var(--unitone--margin-block-end, 1) * var(--unitone--row-gap));
-  }
-
-  > h1 {
-    --unitone--font-size: 4;
-  }
-
-  > :where(h2, h3, h4, h5, h6) {
-    --unitone--margin-block-start: 2;
-
-    & + :where(h2, h3, h4, h5, h6) {
-      --unitone--margin-block-start: 1;
-    }
-  }
-
-  > h2 {
-    --unitone--font-size: 3;
-  }
-
-  > h3 {
-    --unitone--font-size: 2;
-  }
-
-  > h4 {
-    --unitone--font-size: 1;
-  }
-
-  > h5 {
-    --unitone--font-size: 0;
-
-    & + * {
-      --unitone--margin-block-start: .5;
-    }
-  }
-
-  > h6 {
-    --unitone--font-size: 0;
-
-    & + * {
-      --unitone--margin-block-start: .5;
-    }
-  }
-}
-
-@mixin vertical-writing() {
-  [data-unitone-layout~="vertical-writing-wrapper"] {
-    display: flex;
-    flex-direction: column;
-  }
-
-  [data-unitone-layout~="vertical-writing"] {
-    @include abstract-vertical-writing();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/vertical-writing/vertical-writing' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/vertical-writing' instead.";

package/src/layout-primitives/vertical-writing/behavior.js

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

package/src/layout-primitives/vertical-writing/react.jsx

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

package/src/layout-primitives/with-sidebar/_index.scss

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

package/src/layout-primitives/with-sidebar/_with-sidebar-core.scss

@@ -0,0 +1,337 @@
+@use 'sass:list';
+@use 'sass:selector';
+@use 'sass:string';
+
+@mixin _aside() {
+  flex-basis: var(--unitone--sidebar-width);
+  flex-grow: 1;
+  min-width: 1rem;
+}
+
+@mixin _main() {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-width: min(100%, var(--unitone--content-min-width));
+  max-width: min(100%, var(--unitone--content-max-width));
+}
+
+$selector-main-aside: (
+  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:right"]',
+  ':not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar:left"])',
+  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:left"]'
+);
+
+$selector-aside-main: (
+  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:left"]',
+  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:right"]',
+  '[data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar:left"])'
+);
+
+$selector-right-sidebar: (
+  '[data-unitone-layout~="-sidebar:right"]',
+  ':not([data-unitone-layout~="-sidebar:left"])'
+);
+
+$selector-left-sidebar: (
+  '[data-unitone-layout~="-sidebar:left"]',
+);
+
+@mixin abstract-with-sidebar() {
+  --unitone--sidebar-width: auto;
+  --unitone--content-min-width: 50%;
+  --unitone--content-max-width: 100%;
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--column-gap: var(--unitone--gap);
+  --unitone--row-gap: var(--unitone--gap);
+  --unitone--align-items: stretch;
+  --unitone--overflow: visible;
+
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--unitone--column-gap);
+  row-gap: var(--unitone--row-gap);
+  align-items: var(--unitone--align-items);
+  overflow: var(--unitone--overflow);
+
+  &:where(#{ $selector-main-aside }) > :first-child,
+  &:where(#{ $selector-aside-main }) > :nth-child(2) {
+    @include _main();
+  }
+
+  &:where(#{ $selector-main-aside }) > :nth-child(2),
+  &:where(#{ $selector-aside-main }) > :first-child {
+    @include _aside();
+  }
+
+  &[data-unitone-layout~="-revert"] {
+    flex-direction: row-reverse;
+  }
+
+  &: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);
+    }
+
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      // When -bol / -linewrap is added, the vertical/horizontal layout may switch.
+      // This will break the design.
+      // This is necessary to prevent this.
+      --unitone--content-min-width: 100% !important;
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:stripe"] {
+    align-items: stretch;
+
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      row-gap: 0;
+
+      &:where(#{ $selector-main-aside }) > :first-child,
+      &:where(#{ $selector-aside-main }) > :nth-child(2) {
+        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+
+        &::before {
+          border-top-width: var(--unitone--divider-width);
+          border-bottom-width: var(--unitone--divider-width);
+        }
+      }
+
+      &:where(#{ $selector-aside-main }) > :first-child {
+        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+        padding-bottom: calc(var(--unitone--row-gap));
+
+        &::before {
+          border-top-width: var(--unitone--divider-width);
+        }
+      }
+
+       &:where(#{ $selector-main-aside }) > :nth-child(2) {
+        padding-top: var(--unitone--row-gap);
+        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+
+        &::before {
+          border-bottom-width: var(--unitone--divider-width);
+        }
+      }
+    }
+
+    // For horizontal layout.
+    &:not([data-unitone-layout~="-stack"]) {
+      column-gap: 0;
+
+      > * {
+        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+      }
+
+      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
+      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
+        &::before {
+          border-right-width: var(--unitone--divider-width);
+          border-left-width: var(--unitone--divider-width);
+        }
+      }
+
+      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
+      &:where([data-unitone-layout~="-revert"]) > :first-child {
+        &::before {
+          border-right-width: var(--unitone--divider-width);
+        }
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:divide"] {
+    align-items: stretch;
+
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      row-gap: 0;
+
+      > :first-child {
+        &::before {
+          border-width: 0 0 var(--unitone--divider-width);
+        }
+      }
+
+      &:where(#{ $selector-main-aside }) > :first-child {
+        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+
+      &:where(#{ $selector-main-aside }) > :nth-child(2) {
+        padding-top: var(--unitone--row-gap);
+      }
+
+      &:where(#{ $selector-aside-main }) > :first-child {
+        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+
+      &:where(#{ $selector-aside-main }) > :nth-child(2) {
+        padding-top: var(--unitone--row-gap);
+      }
+    }
+
+    // For horizontal layout.
+    &:not([data-unitone-layout~="-stack"]) {
+      column-gap: 0;
+
+      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
+      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
+        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+
+        &::before {
+          border-right-width: var(--unitone--divider-width);
+        }
+      }
+
+      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
+      &:where([data-unitone-layout~="-revert"]) > :first-child {
+        padding-left: var(--unitone--column-gap);
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:slash"] {
+    --unitone--divider-height: 2rem;
+
+    gap: 0;
+    align-items: stretch;
+
+    > :first-child::before {
+      right: auto;
+      height: var(--unitone--divider-height);
+      border-left-width: var(--unitone--divider-width);
+      border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
+      transform: rotate(22.5deg);
+    }
+
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      > :first-child {
+        padding-bottom: var(--unitone--row-gap);
+
+        &::before {
+          inset:
+            100%
+            auto
+            auto
+            calc(50% - var(--unitone--divider-width) / 2);
+        }
+      }
+
+      > :nth-child(2) {
+        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-height));
+      }
+    }
+
+    // For horizontal layout.
+    &:not([data-unitone-layout~="-stack"]) {
+      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
+      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
+        padding-right: var(--unitone--column-gap);
+
+        &::before {
+          right: auto;
+          bottom: auto;
+          left: 100%;
+        }
+      }
+
+      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
+      &:where([data-unitone-layout~="-revert"]) > :first-child {
+        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:bordered"] {
+    gap: 0;
+    align-items: stretch;
+
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      > ::before {
+        border-width: var(--unitone--divider-width);
+      }
+
+      > :nth-child(2)::before {
+        border-top-width: 0;
+      }
+
+      &:where(#{ $selector-main-aside }) > :first-child {
+        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+
+      &:where(#{ $selector-main-aside }) > :nth-child(2) {
+        padding:
+          var(--unitone--row-gap)
+          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
+          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+
+      &:where(#{ $selector-aside-main }) > :first-child {
+        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+
+      &:where(#{ $selector-aside-main }) > :nth-child(2) {
+        padding:
+          var(--unitone--row-gap)
+          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
+          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+    }
+
+    // For horizontal layout.
+    &:not([data-unitone-layout~="-stack"]) {
+      > * {
+        padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+
+        &::before {
+          border-width: var(--unitone--divider-width);
+        }
+      }
+
+      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
+      &:where([data-unitone-layout~="-revert"]) > :first-child {
+        padding-left: var(--unitone--column-gap);
+
+        &::before {
+          border-left: 0;
+        }
+      }
+    }
+  }
+}
+
+@mixin with-sidebar() {
+  [data-unitone-layout~="with-sidebar"] {
+    @include abstract-with-sidebar();
+  }
+}