@inc2734/unitone-css 0.94.2 → 0.95.0

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';

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();
+  }
+}