@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/layout-primitives/texture/_texture-core.scss

@@ -0,0 +1,235 @@
+@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);
+
+	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;
+		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);
+	}
+}
+
+@mixin texture() {
+  [data-unitone-layout~="texture"] {
+    @include abstract-texture();
+  }
+}

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

@@ -1,235 +1,3 @@
-@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);
+@forward './texture-core';
 
-	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;
-		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);
-	}
-}
-
-@mixin texture() {
-  [data-unitone-layout~="texture"] {
-    @include abstract-texture();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/texture/texture' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/texture' instead.";

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

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

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

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

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

@@ -0,0 +1,118 @@
+@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 {
+    --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();
+  }
+}