@inc2734/unitone-css 0.97.2 → 0.98.0

package/src/layout-primitives/stack/index.jsx

@@ -1,12 +1,28 @@
 import React from 'react';
 
-export const Stack = ({ divider, gap, negative, revert, style, ...props }) => {
+export const Stack = ({
+  gap,
+  negative,
+  revert,
+  divider,
+  dividerWidth,
+  dividerStyle,
+  dividerColor,
+  tagName = 'div',
+  style,
+  ...props
+}) => {
+  const Tag = tagName;
+
   style = {
     ...style,
+    '--unitone--divider-width': '' !== dividerWidth ? dividerWidth : undefined,
+    '--unitone--divider-style': '' !== dividerStyle ? dividerStyle : undefined,
+    '--unitone--divider-color': '' !== dividerColor ? dividerColor : undefined,
   };
 
   return (
-    <div
+    <Tag
       data-unitone-layout={[
         'stack',
         revert ? '-revert' : undefined,
@@ -20,6 +36,6 @@ export const Stack = ({ divider, gap, negative, revert, style, ...props }) => {
       {...props}
     >
       {props.children}
-    </div>
+    </Tag>
   );
 };

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

@@ -11,7 +11,7 @@
     --unitone--gap: inherit !important;
   }
 
-  @for $i from -2 through 7 {
+  @for $i from -3 through 7 {
     &[data-unitone-layout~="-gap\:#{ $i }"] {
       --unitone--column-gap: var(--unitone--s#{ $i }) !important;
     }

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

@@ -11,6 +11,8 @@
 	--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;
 
@@ -203,7 +205,7 @@
 
   &[data-unitone-layout~="-texture\:wave"]::before {
 		background-color: var(--unitone--texture-color);
-		border-radius: 0;
+		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>'),
@@ -226,6 +228,40 @@
   &[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() {

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

@@ -14,6 +14,8 @@ export const Texture = ({
   textureBorderTopRightRadius,
   textureBorderBottomLeftRadius,
   textureBorderBottomRightRadius,
+  textureBandTopSize,
+  textureBandBottomSize,
   style,
   ...props
 }) => {
@@ -36,6 +38,9 @@ export const Texture = ({
       '' !== textureBorderBottomLeftRadius ? textureBorderBottomLeftRadius : undefined,
     '--unitone--texture-border-bottom-right-radius':
       '' !== textureBorderBottomRightRadius ? textureBorderBottomRightRadius : undefined,
+    '--unitone--texture-band-top-size': '' !== textureBandTopSize ? textureBandTopSize : undefined,
+    '--unitone--texture-band-bottom-size':
+      '' !== textureBandBottomSize ? textureBandBottomSize : undefined,
   };
 
   return (

package/src/layout-primitives/with-sidebar/index.jsx

@@ -11,6 +11,9 @@ export const WithSidebar = ({
   alignItems,
   overflow,
   divider,
+  dividerWidth,
+  dividerStyle,
+  dividerColor,
   style,
   ...props
 }) => {
@@ -18,6 +21,9 @@ export const WithSidebar = ({
     ...style,
     '--unitone--sidebar-width': '' !== sidebarWidth ? sidebarWidth : undefined,
     '--unitone--content-min-width': '' !== contentMinWidth ? contentMinWidth : undefined,
+    '--unitone--divider-width': '' !== dividerWidth ? dividerWidth : undefined,
+    '--unitone--divider-style': '' !== dividerStyle ? dividerStyle : undefined,
+    '--unitone--divider-color': '' !== dividerColor ? dividerColor : undefined,
   };
 
   return (

package/src/settings/_body.scss

@@ -1,4 +1,5 @@
 :where(body) {
+  margin: 0;
   background-color: var(--unitone--color--background);
   color: var(--unitone--color--text);
   font-family: var(--unitone--font-family);

package/src/settings/_root.scss

@@ -132,6 +132,7 @@
  * Modular scales for spaces (em based).
  */
 :root {
+  --unitone--em-3: calc((1lh - 1em) / 2);
   --unitone--em-2: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
   --unitone--em-1: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
   --unitone--em0: 0em;
@@ -144,6 +145,7 @@
   --unitone--em7: calc(max(1lh, var(--unitone--min-line-height) * 1em) / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
 
   @supports not (top: 1lh) {
+    --unitone--em-3: calc((var(--unitone--line-height) * 1em - 1em) / 2);
     --unitone--em-2: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
     --unitone--em-1: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
     --unitone--em1: calc(var(--unitone--line-height) * 1em / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
@@ -160,6 +162,7 @@
  * Modular scales for spaces (rem based).
  */
 :root {
+  --unitone--rem-3: calc((1rlh - 1rem) / 2);
   --unitone--rem-2: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
   --unitone--rem-1: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
   --unitone--rem0: 0em;
@@ -172,6 +175,7 @@
   --unitone--rem7: calc(1rlh / 3 * #{ list.nth(variables.$fibonacci-sequence, 9) });
 
   @supports not (top: 1rlh) {
+    --unitone--rem-3: calc((var(--unitone--line-height) * 1rem - 1rem) / 2);
     --unitone--rem-2: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 1) });
     --unitone--rem-1: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 2) });
     --unitone--rem1: calc(var(--unitone--line-height) * 1rem / 3 * #{ list.nth(variables.$fibonacci-sequence, 3) });
@@ -188,6 +192,7 @@
  * Modular scales for spaces.
  */
 :root {
+  --unitone--s-3: var(--unitone--em-3);
   --unitone--s-2: var(--unitone--em-2);
   --unitone--s-1: var(--unitone--em-1);
   --unitone--s0: var(--unitone--em0);
@@ -222,6 +227,7 @@
  * For this reason, we prepare special scales.
  */
 :root {
+  --unitone--p-3: var(--unitone--em-3);
   --unitone--p-2: var(--unitone--em-2);
   --unitone--p-1: var(--unitone--em-1);
   --unitone--p0: var(--unitone--em0);
@@ -299,6 +305,8 @@
   --unitone--color--text-alt: #fff; // Inversion color
   --unitone--color--text-immutable: #222; // Colors not inverted in dark mode
 
+  --unitone--color--white: #fff;
+
   --unitone--color--pale-gray: #f9fafb;
   --unitone--color--bright-gray: #f3f4f6;
   --unitone--color--light-gray: #e5e7eb;

package/src/utilities/_align-content.scss

@@ -0,0 +1,13 @@
+@each $value in (
+  start,
+  center,
+  end,
+  space-between,
+  space-around,
+  space-evenly,
+  stretch
+) {
+  .-align-content\:#{ $value } {
+    align-content: #{ $value };
+  }
+}

package/src/utilities/_align-items.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  start,
+  center,
+  end,
+  baseline,
+  stretch
+) {
+  .-align-items\:#{ $value } {
+    align-items: #{ $value };
+  }
+}

package/src/utilities/_align-self.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  start,
+  center,
+  end,
+  stretch,
+  auto
+) {
+  .-align-self\:#{ $value } {
+    align-self: #{ $value };
+  }
+}

package/src/utilities/_background-color.scss

@@ -0,0 +1,111 @@
+/**
+ * This color palette is based on Tailwind.
+ * @see https://tailwindcss.com/docs/customizing-colors
+ */
+.-background-color {
+  &\:background { background-color: var(--unitone--color--background); }
+  &\:background-alt { background-color: var(--unitone--color--background-alt); }
+  &\:text { background-color: var(--unitone--color--text); }
+  &\:text-alt { background-color: var(--unitone--color--text-alt); }
+  &\:text-immutable { background-color: var(--unitone--color--text-immutable); }
+
+  &\:white { background-color: var(--unitone--color--white); }
+
+  &\:pale-gray { background-color: var(--unitone--color--pale-gray); }
+  &\:bright-gray { background-color: var(--unitone--color--bright-gray); }
+  &\:light-gray { background-color: var(--unitone--color--light-gray); }
+  &\:gray { background-color: var(--unitone--color--gray); }
+  &\:dark-gray { background-color: var(--unitone--color--dark-gray); }
+  &\:heavy-gray { background-color: var(--unitone--color--heavy-gray); }
+
+  &\:twilight-light { background-color: var(--unitone--color--twilight-light); }
+  &\:twilight { background-color: var(--unitone--color--twilight); }
+  &\:twilight-heavy { background-color: var(--unitone--color--twilight-heavy); }
+  &\:dimmed-light { background-color: var(--unitone--color--dimmed-light); }
+  &\:dimmed { background-color: var(--unitone--color--dimmed); }
+  &\:dimmed-heavy { background-color: var(--unitone--color--dimmed-heavy); }
+
+  &\:pale-red { background-color: var(--unitone--color--pale-red); }
+  &\:bright-red { background-color: var(--unitone--color--bright-red); }
+  &\:light-red { background-color: var(--unitone--color--light-red); }
+  &\:red { background-color: var(--unitone--color--red); }
+  &\:dark-red { background-color: var(--unitone--color--dark-red); }
+  &\:heavy-red { background-color: var(--unitone--color--heavy-red); }
+
+  &\:pale-orange { background-color: var(--unitone--color--pale-orange); }
+  &\:bright-orange { background-color: var(--unitone--color--bright-orange); }
+  &\:light-orange { background-color: var(--unitone--color--light-orange); }
+  &\:orange { background-color: var(--unitone--color--orange); }
+  &\:dark-orange { background-color: var(--unitone--color--dark-orange); }
+  &\:heavy-orange { background-color: var(--unitone--color--heavy-orange); }
+
+  &\:pale-yellow { background-color: var(--unitone--color--pale-yellow); }
+  &\:bright-yellow { background-color: var(--unitone--color--bright-yellow); }
+  &\:light-yellow { background-color: var(--unitone--color--light-yellow); }
+  &\:yellow { background-color: var(--unitone--color--yellow); }
+  &\:dark-yellow { background-color: var(--unitone--color--dark-yellow); }
+  &\:heavy-yellow { background-color: var(--unitone--color--heavy-yellow); }
+
+  &\:pale-lime { background-color: var(--unitone--color--pale-lime); }
+  &\:bright-lime { background-color: var(--unitone--color--bright-lime); }
+  &\:light-lime { background-color: var(--unitone--color--light-lime); }
+  &\:lime { background-color: var(--unitone--color--lime); }
+  &\:dark-lime { background-color: var(--unitone--color--dark-lime); }
+  &\:heavy-lime { background-color: var(--unitone--color--heavy-lime); }
+
+  &\:pale-green { background-color: var(--unitone--color--pale-green); }
+  &\:bright-green { background-color: var(--unitone--color--bright-green); }
+  &\:light-green { background-color: var(--unitone--color--light-green); }
+  &\:green { background-color: var(--unitone--color--green); }
+  &\:dark-green { background-color: var(--unitone--color--dark-green); }
+  &\:heavy-green { background-color: var(--unitone--color--heavy-green); }
+
+  &\:pale-teal { background-color: var(--unitone--color--pale-teal); }
+  &\:bright-teal { background-color: var(--unitone--color--bright-teal); }
+  &\:light-teal { background-color: var(--unitone--color--light-teal); }
+  &\:teal { background-color: var(--unitone--color--teal); }
+  &\:dark-teal { background-color: var(--unitone--color--dark-teal); }
+  &\:heavy-teal { background-color: var(--unitone--color--heavy-teal); }
+
+  &\:pale-cyan { background-color: var(--unitone--color--pale-cyan); }
+  &\:bright-cyan { background-color: var(--unitone--color--bright-cyan); }
+  &\:light-cyan { background-color: var(--unitone--color--light-cyan); }
+  &\:cyan { background-color: var(--unitone--color--cyan); }
+  &\:dark-cyan { background-color: var(--unitone--color--dark-cyan); }
+  &\:heavy-cyan { background-color: var(--unitone--color--heavy-cyan); }
+
+  &\:pale-blue { background-color: var(--unitone--color--pale-blue); }
+  &\:bright-blue { background-color: var(--unitone--color--bright-blue); }
+  &\:light-blue { background-color: var(--unitone--color--light-blue); }
+  &\:blue { background-color: var(--unitone--color--blue); }
+  &\:dark-blue { background-color: var(--unitone--color--dark-blue); }
+  &\:heavy-blue { background-color: var(--unitone--color--heavy-blue); }
+
+  &\:pale-indigo { background-color: var(--unitone--color--pale-indigo); }
+  &\:bright-indigo { background-color: var(--unitone--color--bright-indigo); }
+  &\:light-indigo { background-color: var(--unitone--color--light-indigo); }
+  &\:indigo { background-color: var(--unitone--color--indigo); }
+  &\:dark-indigo { background-color: var(--unitone--color--dark-indigo); }
+  &\:heavy-indigo { background-color: var(--unitone--color--heavy-indigo); }
+
+  &\:pale-violet { background-color: var(--unitone--color--pale-violet); }
+  &\:bright-violet { background-color: var(--unitone--color--bright-violet); }
+  &\:light-violet { background-color: var(--unitone--color--light-violet); }
+  &\:violet { background-color: var(--unitone--color--violet); }
+  &\:dark-violet { background-color: var(--unitone--color--dark-violet); }
+  &\:heavy-violet { background-color: var(--unitone--color--heavy-violet); }
+
+  &\:pale-purple { background-color: var(--unitone--color--pale-purple); }
+  &\:bright-purple { background-color: var(--unitone--color--bright-purple); }
+  &\:light-purple { background-color: var(--unitone--color--light-purple); }
+  &\:purple { background-color: var(--unitone--color--purple); }
+  &\:dark-purple { background-color: var(--unitone--color--dark-purple); }
+  &\:heavy-purple { background-color: var(--unitone--color--heavy-purple); }
+
+  &\:pale-pink { background-color: var(--unitone--color--pale-pink); }
+  &\:bright-pink { background-color: var(--unitone--color--bright-pink); }
+  &\:light-pink { background-color: var(--unitone--color--light-pink); }
+  &\:pink { background-color: var(--unitone--color--pink); }
+  &\:dark-pink { background-color: var(--unitone--color--dark-pink); }
+  &\:heavy-pink { background-color: var(--unitone--color--heavy-pink); }
+}

package/src/utilities/_color.scss

@@ -0,0 +1,111 @@
+/**
+ * This color palette is based on Tailwind.
+ * @see https://tailwindcss.com/docs/customizing-colors
+ */
+.-color {
+  &\:background { color: var(--unitone--color--background); }
+  &\:background-alt { color: var(--unitone--color--background-alt); }
+  &\:text { color: var(--unitone--color--text); }
+  &\:text-alt { color: var(--unitone--color--text-alt); }
+  &\:text-immutable { color: var(--unitone--color--text-immutable); }
+
+  &\:white { color: var(--unitone--color--white); }
+
+  &\:pale-gray { color: var(--unitone--color--pale-gray); }
+  &\:bright-gray { color: var(--unitone--color--bright-gray); }
+  &\:light-gray { color: var(--unitone--color--light-gray); }
+  &\:gray { color: var(--unitone--color--gray); }
+  &\:dark-gray { color: var(--unitone--color--dark-gray); }
+  &\:heavy-gray { color: var(--unitone--color--heavy-gray); }
+
+  &\:twilight-light { color: var(--unitone--color--twilight-light); }
+  &\:twilight { color: var(--unitone--color--twilight); }
+  &\:twilight-heavy { color: var(--unitone--color--twilight-heavy); }
+  &\:dimmed-light { color: var(--unitone--color--dimmed-light); }
+  &\:dimmed { color: var(--unitone--color--dimmed); }
+  &\:dimmed-heavy { color: var(--unitone--color--dimmed-heavy); }
+
+  &\:pale-red { color: var(--unitone--color--pale-red); }
+  &\:bright-red { color: var(--unitone--color--bright-red); }
+  &\:light-red { color: var(--unitone--color--light-red); }
+  &\:red { color: var(--unitone--color--red); }
+  &\:dark-red { color: var(--unitone--color--dark-red); }
+  &\:heavy-red { color: var(--unitone--color--heavy-red); }
+
+  &\:pale-orange { color: var(--unitone--color--pale-orange); }
+  &\:bright-orange { color: var(--unitone--color--bright-orange); }
+  &\:light-orange { color: var(--unitone--color--light-orange); }
+  &\:orange { color: var(--unitone--color--orange); }
+  &\:dark-orange { color: var(--unitone--color--dark-orange); }
+  &\:heavy-orange { color: var(--unitone--color--heavy-orange); }
+
+  &\:pale-yellow { color: var(--unitone--color--pale-yellow); }
+  &\:bright-yellow { color: var(--unitone--color--bright-yellow); }
+  &\:light-yellow { color: var(--unitone--color--light-yellow); }
+  &\:yellow { color: var(--unitone--color--yellow); }
+  &\:dark-yellow { color: var(--unitone--color--dark-yellow); }
+  &\:heavy-yellow { color: var(--unitone--color--heavy-yellow); }
+
+  &\:pale-lime { color: var(--unitone--color--pale-lime); }
+  &\:bright-lime { color: var(--unitone--color--bright-lime); }
+  &\:light-lime { color: var(--unitone--color--light-lime); }
+  &\:lime { color: var(--unitone--color--lime); }
+  &\:dark-lime { color: var(--unitone--color--dark-lime); }
+  &\:heavy-lime { color: var(--unitone--color--heavy-lime); }
+
+  &\:pale-green { color: var(--unitone--color--pale-green); }
+  &\:bright-green { color: var(--unitone--color--bright-green); }
+  &\:light-green { color: var(--unitone--color--light-green); }
+  &\:green { color: var(--unitone--color--green); }
+  &\:dark-green { color: var(--unitone--color--dark-green); }
+  &\:heavy-green { color: var(--unitone--color--heavy-green); }
+
+  &\:pale-teal { color: var(--unitone--color--pale-teal); }
+  &\:bright-teal { color: var(--unitone--color--bright-teal); }
+  &\:light-teal { color: var(--unitone--color--light-teal); }
+  &\:teal { color: var(--unitone--color--teal); }
+  &\:dark-teal { color: var(--unitone--color--dark-teal); }
+  &\:heavy-teal { color: var(--unitone--color--heavy-teal); }
+
+  &\:pale-cyan { color: var(--unitone--color--pale-cyan); }
+  &\:bright-cyan { color: var(--unitone--color--bright-cyan); }
+  &\:light-cyan { color: var(--unitone--color--light-cyan); }
+  &\:cyan { color: var(--unitone--color--cyan); }
+  &\:dark-cyan { color: var(--unitone--color--dark-cyan); }
+  &\:heavy-cyan { color: var(--unitone--color--heavy-cyan); }
+
+  &\:pale-blue { color: var(--unitone--color--pale-blue); }
+  &\:bright-blue { color: var(--unitone--color--bright-blue); }
+  &\:light-blue { color: var(--unitone--color--light-blue); }
+  &\:blue { color: var(--unitone--color--blue); }
+  &\:dark-blue { color: var(--unitone--color--dark-blue); }
+  &\:heavy-blue { color: var(--unitone--color--heavy-blue); }
+
+  &\:pale-indigo { color: var(--unitone--color--pale-indigo); }
+  &\:bright-indigo { color: var(--unitone--color--bright-indigo); }
+  &\:light-indigo { color: var(--unitone--color--light-indigo); }
+  &\:indigo { color: var(--unitone--color--indigo); }
+  &\:dark-indigo { color: var(--unitone--color--dark-indigo); }
+  &\:heavy-indigo { color: var(--unitone--color--heavy-indigo); }
+
+  &\:pale-violet { color: var(--unitone--color--pale-violet); }
+  &\:bright-violet { color: var(--unitone--color--bright-violet); }
+  &\:light-violet { color: var(--unitone--color--light-violet); }
+  &\:violet { color: var(--unitone--color--violet); }
+  &\:dark-violet { color: var(--unitone--color--dark-violet); }
+  &\:heavy-violet { color: var(--unitone--color--heavy-violet); }
+
+  &\:pale-purple { color: var(--unitone--color--pale-purple); }
+  &\:bright-purple { color: var(--unitone--color--bright-purple); }
+  &\:light-purple { color: var(--unitone--color--light-purple); }
+  &\:purple { color: var(--unitone--color--purple); }
+  &\:dark-purple { color: var(--unitone--color--dark-purple); }
+  &\:heavy-purple { color: var(--unitone--color--heavy-purple); }
+
+  &\:pale-pink { color: var(--unitone--color--pale-pink); }
+  &\:bright-pink { color: var(--unitone--color--bright-pink); }
+  &\:light-pink { color: var(--unitone--color--light-pink); }
+  &\:pink { color: var(--unitone--color--pink); }
+  &\:dark-pink { color: var(--unitone--color--dark-pink); }
+  &\:heavy-pink { color: var(--unitone--color--heavy-pink); }
+}

package/src/utilities/_display.scss

@@ -0,0 +1,14 @@
+@each $value in (
+  none,
+  inline,
+  inline-block,
+  block,
+  flex,
+  grid,
+  inline-flex,
+  inline-grid,
+) {
+  .-display\:#{ $value } {
+    display: #{ $value };
+  }
+}

package/src/utilities/_flex-direction.scss

@@ -0,0 +1,10 @@
+@each $value in (
+  row,
+  row-reverse,
+  column,
+  column-reverse
+) {
+  .-flex-direction\:#{ $value } {
+    flex-direction: #{ $value };
+  }
+}

package/src/utilities/_flex-wrap.scss

@@ -0,0 +1,8 @@
+@each $value in (
+  wrap,
+  nowrap
+) {
+  .-flex-wrap\:#{ $value } {
+    flex-wrap: #{ $value };
+  }
+}

package/src/utilities/_font-size.scss

@@ -0,0 +1,17 @@
+@each $key, $value in (
+  -2: xs,
+  -1: s,
+  0: m,
+  1: l,
+  2: xl,
+  3: 2xl,
+  4: 3xl,
+  5: 4xl,
+  6: 5xl,
+  7: 6xl,
+  8: 7xl,
+) {
+  .-font-size\:#{ $value } {
+    --unitone--font-size: #{ $key } !important;
+  }
+}

package/src/utilities/_font-weight.scss

@@ -0,0 +1,8 @@
+@each $value in (
+  normal,
+  bold,
+) {
+  .-font-weight\:#{ $value } {
+    font-weight: #{ $value };
+  }
+}

package/src/utilities/_gap.scss

@@ -0,0 +1,17 @@
+@for $i from -3 through 7 {
+  .-gap\:#{ $i } { gap: var(--unitone--s#{ $i }); }
+  .-column-gap\:#{ $i } { column-gap: var(--unitone--s#{ $i }); }
+  .-row-gap\:#{ $i } { row-gap: var(--unitone--s#{ $i }); }
+}
+
+@for $i from 1 through 7 {
+  .-gap\:#{ $i }s { gap: var(--unitone--s#{ $i }s); }
+  .-column-gap\:#{ $i }s { column-gap: var(--unitone--s#{ $i }s); }
+  .-row-gap\:#{ $i }s { row-gap: var(--unitone--s#{ $i }s); }
+}
+
+@for $i from 2 through 7 {
+  .-gap\:#{ $i }m { gap: var(--unitone--s#{ $i }m); }
+  .-column-gap\:#{ $i }m { column-gap: var(--unitone--s#{ $i }m); }
+  .-row-gap\:#{ $i }m { row-gap: var(--unitone--s#{ $i }m); }
+}

package/src/utilities/_global.scss

@@ -0,0 +1,19 @@
+.-box-shadow {
+  box-shadow: var(--unitone--global--box-shadow);
+}
+
+.-border-radius {
+  border-radius: var(--unitone--global--border-radius);
+}
+
+.-gutters {
+  padding-inline: var(--unitone--global--gutters);
+}
+
+.-max-width\:content-size {
+  max-width: var(--unitone--measure);
+}
+
+.-max-width\:wide-size {
+  max-width: var(--unitone--container-max-width);
+}

package/src/utilities/_index.scss

@@ -0,0 +1,21 @@
+@use './align-content';
+@use './align-items';
+@use './align-self';
+@use './background-color';
+@use './color';
+@use './display';
+@use './flex-direction';
+@use './flex-wrap';
+@use './font-size';
+@use './font-weight';
+@use './gap';
+@use './global';
+@use './justify-content';
+@use './justify-items';
+@use './justify-self';
+@use './mix-blend-mode';
+@use './overflow';
+@use './padding';
+@use './position';
+@use './text-align';
+@use './typography';

package/src/utilities/_justify-content.scss

@@ -0,0 +1,12 @@
+@each $value in (
+  start,
+  center,
+  end,
+  space-between,
+  space-around,
+  space-evenly
+) {
+  .-justify-content\:#{ $value } {
+    justify-content: #{ $value };
+  }
+}

package/src/utilities/_justify-items.scss

@@ -0,0 +1,10 @@
+@each $value in (
+  start,
+  center,
+  end,
+  stretch
+) {
+  .-justify-items\:#{ $value } {
+    justify-items: #{ $value };
+  }
+}

package/src/utilities/_justify-self.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  start,
+  center,
+  end,
+  stretch,
+  auto
+) {
+  .-justify-self\:#{ $value } {
+    justify-self: #{ $value };
+  }
+}

package/src/utilities/_mix-blend-mode.scss

@@ -0,0 +1,22 @@
+@each $value in (
+  normal,
+  multiply,
+  screen,
+  overlay,
+  darken,
+  lighten,
+  color-dodge,
+  color-burn,
+  hard-light,
+  soft-light,
+  difference,
+  exclusion,
+  hue,
+  saturation,
+  color,
+  luminosity
+) {
+  .-mix-blend-mode\:#{ $value } {
+    mix-blend-mode: #{ $value };
+  }
+}

package/src/utilities/_overflow.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  visible,
+  hidden,
+  scroll,
+  auto,
+  clip
+) {
+  .-overflow\:#{ $value } {
+    overflow: #{ $value };
+  }
+}