@inc2734/unitone-css 0.102.4 → 1.0.0

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

@@ -1 +1,271 @@
-@forward './texture-core';
+@mixin abstract-texture() {
+  --unitone--texture-color: var(--unitone--color--light-gray);
+  --unitone--texture-gap: 50px;
+  --unitone--texture-size: 1px;
+	--unitone--texture-top: 0px;
+	--unitone--texture-right: 0px;
+	--unitone--texture-bottom: 0px;
+	--unitone--texture-left: 0px;
+	--unitone--texture-border-radius: 0px;
+	--unitone--texture-border-top-left-radius: var(--unitone--texture-border-radius);
+	--unitone--texture-border-top-right-radius: var(--unitone--texture-border-radius);
+	--unitone--texture-border-bottom-left-radius: var(--unitone--texture-border-radius);
+	--unitone--texture-border-bottom-right-radius: var(--unitone--texture-border-radius);
+  --unitone--texture-band-top-size: 0px;
+  --unitone--texture-band-bottom-size: 0px;
+
+	position: relative;
+
+  @at-root {
+    :where(#{ & } > *) {
+      --unitone--position: relative;
+
+      position: var(--unitone--position);
+    }
+  }
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset:
+			var(--unitone--texture-top)
+			var(--unitone--texture-right)
+			var(--unitone--texture-bottom)
+			var(--unitone--texture-left);
+	  background-position: center;
+		border-radius:
+			var(--unitone--texture-border-top-left-radius)
+			var(--unitone--texture-border-top-right-radius)
+			var(--unitone--texture-border-bottom-right-radius)
+			var(--unitone--texture-border-bottom-left-radius);
+	}
+
+
+  &[data-unitone-layout~="-texture\:dots"]::before {
+    background-image:
+      radial-gradient(
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      );
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2);
+  }
+
+  &[data-unitone-layout~="-texture\:offset-dots"]::before {
+    background-image:
+      radial-gradient(
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      ),
+      radial-gradient(
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      );
+    background-position:
+      0
+      0,
+      max(var(--unitone--texture-gap) / 2, var(--unitone--texture-size) * 3 / 2)
+      max(var(--unitone--texture-gap) / 2, var(--unitone--texture-size) * 3 / 2);
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 3)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 3);
+  }
+
+  &[data-unitone-layout~="-texture\:grid"]::before {
+    background-image:
+      linear-gradient(
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      ),
+      linear-gradient(
+        to right,
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      );
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2);
+  }
+
+  &[data-unitone-layout~="-texture\:horizontal-stripe"]::before {
+    background-image:
+      linear-gradient(
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      );
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2);
+  }
+
+  &[data-unitone-layout~="-texture\:vertical-stripe"]::before {
+    background-image:
+      linear-gradient(
+        to right,
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent var(--unitone--texture-size)
+      );
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 2);
+  }
+
+  &[data-unitone-layout~="-texture\:checker-pattern"]::before {
+    background-image:
+      repeating-linear-gradient(
+        45deg,
+        var(--unitone--texture-color) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--unitone--texture-color) 75%,
+        var(--unitone--texture-color)
+      ),
+      repeating-linear-gradient(
+        45deg,
+        var(--unitone--texture-color) 25%,
+        transparent 25%,
+        transparent 75%,
+        var(--unitone--texture-color) 75%,
+        var(--unitone--texture-color)
+      );
+    background-position:
+      0
+      0,
+      var(--unitone--texture-gap)
+      var(--unitone--texture-gap);
+    background-size:
+      calc(var(--unitone--texture-gap) * 2)
+      calc(var(--unitone--texture-gap) * 2);
+  }
+
+  &[data-unitone-layout~="-texture\:graph-paper"]::before {
+    background-image:
+      linear-gradient(
+        var(--unitone--texture-color) calc(var(--unitone--texture-size) * .8),
+        transparent calc(var(--unitone--texture-size) * .8)
+      ),
+      linear-gradient(
+        90deg,
+        var(--unitone--texture-color) calc(var(--unitone--texture-size) * .8),
+        transparent calc(var(--unitone--texture-size) * .8)
+      ),
+      linear-gradient(
+        var(--unitone--texture-color) calc(var(--unitone--texture-size) * .5),
+        transparent calc(var(--unitone--texture-size) * .5)
+      ),
+      linear-gradient(
+        90deg,
+        var(--unitone--texture-color) calc(var(--unitone--texture-size) * .5),
+        transparent calc(var(--unitone--texture-size) * .5)
+      );
+    background-position:
+      calc(var(--unitone--texture-size) * -.8) calc(var(--unitone--texture-size) * -.8),
+      calc(var(--unitone--texture-size) * -.8) calc(var(--unitone--texture-size) * -.8),
+      calc(var(--unitone--texture-size) * -.5) calc(var(--unitone--texture-size) * -.5),
+      calc(var(--unitone--texture-size) * -.5) calc(var(--unitone--texture-size) * -.5);
+    background-size:
+      max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30)
+      calc(max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30) * 2),
+      calc(max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30) * 2)
+      max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30),
+      calc(max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30) / 5)
+      calc(max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30) / 5),
+      calc(max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30) / 5)
+      calc(max(var(--unitone--texture-gap) * 3, var(--unitone--texture-size) * 30) / 5);
+  }
+
+  &[data-unitone-layout~="-texture\:slash"]::before {
+    background-image:
+      repeating-linear-gradient(
+        135deg,
+        var(--unitone--texture-color) 0,
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent 0,
+        transparent 50%
+      );
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 1.5 + 2px)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 1.5 + 2px);
+  }
+
+  &[data-unitone-layout~="-texture\:backslash"]::before {
+    background-image:
+      repeating-linear-gradient(
+        45deg,
+        var(--unitone--texture-color) 0,
+        var(--unitone--texture-color) var(--unitone--texture-size),
+        transparent 0,
+        transparent 50%
+      );
+    background-size:
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 1.5 + 2px)
+      max(var(--unitone--texture-gap), var(--unitone--texture-size) * 1.5 + 2px);
+  }
+
+  &[data-unitone-layout~="-texture\:wave"]::before {
+		background-color: var(--unitone--texture-color);
+		border-radius: 0 !important;
+		mask-image:
+			url('data:image/svg+xml,<svg viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M200 0C173.236 0 146.472 2.68557 119.611 8.05762C79.8049 16.0189 39.9025 19.999 0 19.999V0H200Z"/></svg>'),
+			url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><rect x="0" y="0" height="100" width="100"/></svg>'),
+			url('data:image/svg+xml,<svg viewBox="0 0 200 20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M200 19.999H0C26.7642 19.999 53.5284 17.3134 80.3887 11.9414C120.195 3.98014 160.098 2.69917e-07 200 0V19.999Z"/></svg>');
+		mask-composite: exclude, subtract;
+		mask-position:
+			0 0,
+			0 0,
+			0 100%;
+		mask-size:
+			100% max(40px + var(--unitone--texture-size)),
+			100% 100%,
+			100% max(40px + var(--unitone--texture-size));
+		mask-repeat:
+			repeat-x,
+			repeat,
+			repeat-x;
+  }
+
+  &[data-unitone-layout~="-texture\:solid-color"]::before {
+		background-color: var(--unitone--texture-color);
+	}
+
+  &[data-unitone-layout~="-texture\:slash-shape"] {
+    --unitone--texture-band-top-size: 25%;
+    --unitone--texture-band-bottom-size: 25%;
+
+    &::before {
+      inset: 0 !important;
+      background-color: var(--unitone--texture-color);
+		  border-radius: 0 !important;
+      clip-path: polygon(
+        0 100%,
+        0 min(100%, calc(100% - var(--unitone--texture-band-bottom-size))),
+        100% 0,
+        100% max(0%, var(--unitone--texture-band-top-size))
+      );
+    }
+	}
+
+  &[data-unitone-layout~="-texture\:backslash-shape"] {
+    --unitone--texture-band-top-size: 25%;
+    --unitone--texture-band-bottom-size: 25%;
+
+    &::before {
+      inset: 0 !important;
+      background-color: var(--unitone--texture-color);
+		  border-radius: 0 !important;
+      clip-path: polygon(
+        min(0%, calc(-1 * var(--unitone--texture-band-top-size))) 0%,
+        100% 100%,
+        100% min(100%, calc(100% - var(--unitone--texture-band-bottom-size))),
+        0% 0%
+      );
+    }
+	}
+}
+
+@mixin texture() {
+  [data-unitone-layout~="texture"] {
+    @include abstract-texture();
+  }
+}

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

@@ -1 +1,118 @@
-@forward './vertical-writing-core';
+@mixin abstract-vertical-writing() {
+  --unitone--gap: var(--unitone--global--text-gap);
+  --unitone--column-gap: var(--unitone--global--gap);
+  --unitone--row-gap: var(--unitone--gap);
+
+  --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 {
+    font-size: var(--unitone--font-size-3xl);
+  }
+
+  > :where(h2, h3, h4, h5, h6) {
+    --unitone--margin-block-start: 2;
+
+    & + :where(h2, h3, h4, h5, h6) {
+      --unitone--margin-block-start: 1;
+    }
+  }
+
+  > h2 {
+    font-size: var(--unitone--font-size-2xl);
+  }
+
+  > h3 {
+    font-size: var(--unitone--font-size-xl);
+  }
+
+  > h4 {
+    font-size: var(--unitone--font-size-l);
+  }
+
+  > h5 {
+    font-size: var(--unitone--font-size-m);
+
+    & + * {
+      --unitone--margin-block-start: .5;
+    }
+  }
+
+  > h6 {
+    font-size: var(--unitone--font-size-m);
+
+    & + * {
+      --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();
+  }
+}

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

@@ -1 +1,304 @@
-@forward './with-sidebar-core';
+@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"]):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"]:not([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\:"]) {
+    > * {
+      display: flex;
+      flex-direction: column;
+      justify-content: var(--unitone--align-items);
+    }
+
+    // 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();
+  }
+}