@inc2734/unitone-css 0.102.4 → 1.0.1

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

@@ -1,144 +0,0 @@
-@mixin abstract-text() {
-  --unitone--gutters: 0px;
-  --unitone--max-width: var(--unitone--measure);
-  --unitone--text-gap: var(--unitone--global--text-gap);
-
-  box-sizing: content-box;
-  padding-right: var(--unitone--gutters);
-  padding-left: var(--unitone--gutters);
-  max-width: none;
-
-  &[data-unitone-layout*="-gap\:"] {
-    --unitone--text-gap: var(--unitone--gap);
-  }
-
-  &[data-unitone-layout*="-gap\:"] > * {
-    --unitone--text-gap: inherit !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: inherit;
-    --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,3 +0,0 @@
-@forward './text-core';
-
-@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/texture/_texture-core.scss

@@ -1,271 +0,0 @@
-@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/texture/_texture.scss

@@ -1,3 +0,0 @@
-@forward './texture-core';
-
-@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/vertical-writing/_vertical-writing-core.scss

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

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

@@ -1,3 +0,0 @@
-@forward './vertical-writing-core';
-
-@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.";