@inc2734/unitone-css 1.2.2 → 1.3.1

package/dist/layout-primitives/texture/react.js

@@ -1 +1 @@
-"use strict";var t=require("react");function e(){return e=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},e.apply(null,arguments)}function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t){var e=function(t,e){if("object"!=r(t)||!t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var n=o.call(t,e);if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==r(e)?e:e+""}function n(t,e,r){return(e=o(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var u=["texture","textureColor","textureGap","textureSize","textureTop","textureRight","textureBottom","textureLeft","textureBorderRadius","textureBorderTopLeftRadius","textureBorderTopRightRadius","textureBorderBottomLeftRadius","textureBorderBottomRightRadius","textureBandTopSize","textureBandBottomSize","style"];function i(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,o)}return r}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?i(Object(r),!0).forEach(function(e){n(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}exports.Texture=function(r){var o=r.texture,n=r.textureColor,i=r.textureGap,d=r.textureSize,l=r.textureTop,c=r.textureRight,f=r.textureBottom,s=r.textureLeft,x=r.textureBorderRadius,b=r.textureBorderTopLeftRadius,p=r.textureBorderTopRightRadius,y=r.textureBorderBottomLeftRadius,v=r.textureBorderBottomRightRadius,m=r.textureBandTopSize,O=r.textureBandBottomSize,g=r.style,B=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r={};for(var o in t)if({}.hasOwnProperty.call(t,o)){if(-1!==e.indexOf(o))continue;r[o]=t[o]}return r}(t,e);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(t);for(o=0;o<u.length;o++)r=u[o],-1===e.indexOf(r)&&{}.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(r,u);return g=a(a({},g),{},{"--unitone--texture-color":""!==n?n:void 0,"--unitone--texture-gap":""!==i?i:void 0,"--unitone--texture-size":""!==d?d:void 0,"--unitone--texture-top":""!==l?l:void 0,"--unitone--texture-right":""!==c?c:void 0,"--unitone--texture-bottom":""!==f?f:void 0,"--unitone--texture-left":""!==s?s:void 0,"--unitone--texture-border-radius":""!==x?x:void 0,"--unitone--texture-border-top-left-radius":""!==b?b:void 0,"--unitone--texture-border-top-right-radius":""!==p?p:void 0,"--unitone--texture-border-bottom-left-radius":""!==y?y:void 0,"--unitone--texture-border-bottom-right-radius":""!==v?v:void 0,"--unitone--texture-band-top-size":""!==m?m:void 0,"--unitone--texture-band-bottom-size":""!==O?O:void 0}),t.createElement("div",e({"data-unitone-layout":["texture",""!==(null!=o?o:"")?"-texture:".concat(o):void 0].filter(Boolean).join(" "),style:g},B),B.children)};
+"use strict";var t=require("react");function e(){return e=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)({}).hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},e.apply(null,arguments)}function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t){var e=function(t,e){if("object"!=r(t)||!t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var n=o.call(t,e);if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==r(e)?e:e+""}function n(t,e,r){return(e=o(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var i=["texture","textureColor","textureGap","textureSize","textureTop","textureRight","textureBottom","textureLeft","textureBorderRadius","textureBorderTopLeftRadius","textureBorderTopRightRadius","textureBorderBottomLeftRadius","textureBorderBottomRightRadius","textureBandTopSize","textureBandBottomSize","containerType","fluidReference","style"];function u(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,o)}return r}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach(function(e){n(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}exports.Texture=function(r){var o=r.texture,n=r.textureColor,u=r.textureGap,c=r.textureSize,d=r.textureTop,l=r.textureRight,f=r.textureBottom,p=r.textureLeft,s=r.textureBorderRadius,x=r.textureBorderTopLeftRadius,b=r.textureBorderTopRightRadius,y=r.textureBorderBottomLeftRadius,v=r.textureBorderBottomRightRadius,m=r.textureBandTopSize,O=r.textureBandBottomSize,g=r.containerType,B=r.fluidReference,h=r.style,j=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r={};for(var o in t)if({}.hasOwnProperty.call(t,o)){if(-1!==e.indexOf(o))continue;r[o]=t[o]}return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],-1===e.indexOf(r)&&{}.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(r,i);return h=a(a({},h),{},{"--unitone--texture-color":""!==n?n:void 0,"--unitone--texture-gap":""!==u?u:void 0,"--unitone--texture-size":""!==c?c:void 0,"--unitone--texture-top":""!==d?d:void 0,"--unitone--texture-right":""!==l?l:void 0,"--unitone--texture-bottom":""!==f?f:void 0,"--unitone--texture-left":""!==p?p:void 0,"--unitone--texture-border-radius":""!==s?s:void 0,"--unitone--texture-border-top-left-radius":""!==x?x:void 0,"--unitone--texture-border-top-right-radius":""!==b?b:void 0,"--unitone--texture-border-bottom-left-radius":""!==y?y:void 0,"--unitone--texture-border-bottom-right-radius":""!==v?v:void 0,"--unitone--texture-band-top-size":""!==m?m:void 0,"--unitone--texture-band-bottom-size":""!==O?O:void 0}),t.createElement("div",e({"data-unitone-layout":["texture",""!==(null!=o?o:"")?"-texture:".concat(o):void 0,""!==(null!=g?g:"")?"-container-type:".concat(g):void 0,""!==(null!=B?B:"")?"-fluid-reference:".concat(B):void 0].filter(Boolean).join(" "),style:h},j),j.children)};

package/dist/layout-primitives/vertical-ends/react.js

@@ -1 +1 @@
-"use strict";var r=require("react");function t(){return t=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)({}).hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},t.apply(null,arguments)}function e(r){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},e(r)}function n(r){var t=function(r,t){if("object"!=e(r)||!r)return r;var n=r[Symbol.toPrimitive];if(void 0!==n){var o=n.call(r,t);if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(r)}(r,"string");return"symbol"==e(t)?t:t+""}function o(r,t,e){return(t=n(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}var i=["gap","alignItems","style"];function c(r,t){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})),e.push.apply(e,n)}return e}exports.VerticalEnds=function(e){var n=e.gap,l=e.alignItems,u=e.style,a=function(r,t){if(null==r)return{};var e,n,o=function(r,t){if(null==r)return{};var e={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==t.indexOf(n))continue;e[n]=r[n]}return e}(r,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)e=i[n],-1===t.indexOf(e)&&{}.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}(e,i);return u=function(r){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?c(Object(e),!0).forEach(function(t){o(r,t,e[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):c(Object(e)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})}return r}({},u),r.createElement("div",t({"data-unitone-layout":["vertical-ends",""!==(null!=n?n:"")?"-gap:".concat(n):void 0,""!==(null!=l?l:"")?"-align-items:".concat(l):void 0].filter(Boolean).join(" "),style:u},a),a.children)};
+"use strict";var e=require("react");function r(){return r=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.apply(null,arguments)}function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function n(e){var r=function(e,r){if("object"!=t(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,r);if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==t(r)?r:r+""}function o(e,r,t){return(r=n(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var i=["gap","alignItems","containerType","fluidReference","style"];function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}exports.VerticalEnds=function(t){var n=t.gap,l=t.alignItems,u=t.containerType,a=t.fluidReference,f=t.style,y=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==r.indexOf(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],-1===r.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,i);return f=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach(function(r){o(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}({},f),e.createElement("div",r({"data-unitone-layout":["vertical-ends",""!==(null!=n?n:"")?"-gap:".concat(n):void 0,""!==(null!=l?l:"")?"-align-items:".concat(l):void 0,""!==(null!=u?u:"")?"-container-type:".concat(u):void 0,""!==(null!=a?a:"")?"-fluid-reference:".concat(a):void 0].filter(Boolean).join(" "),style:f},y),y.children)};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inc2734/unitone-css",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "",
   "engines": {
     "node": ">=20.19.0",

package/src/behaviors/_fluid-reference.scss

@@ -0,0 +1,26 @@
+@use '../variables' as variables;
+
+/**
+ * Spacing tokens require a unitless real-number value of 100cqw,
+ * so they cannot be defined at :root.
+ */
+@mixin fluid-reference() {
+  [data-unitone-layout~="-fluid-reference\:cqw"] {
+
+    /**
+     * A value to get the unitless px value in trigonometric functions. (For Safari)
+     */
+    --unitone--property--100cqw: 100cqw;
+
+    /**
+     * 100cqw unitless px real value.
+     */
+    --unitone--result--100cqw-px: calc(tan(atan2(var(--unitone--property--100cqw), 1px)));
+
+    --unitone--global--gutters: #{ variables.generate-global-gutters('container') };
+
+    @include variables.font-size-tokens('container');
+    @include variables.spacing-tokens('container');
+    @include variables.padding-tokens('container');
+  }
+}

package/src/behaviors/_font-size.scss

@@ -7,14 +7,5 @@
     [data-unitone-layout~="-font-size\:#{ $name }"][data-unitone-layout~="-fluid-typography"] {
       font-size: var(--unitone--font-size-#{ $name }-fluid);
     }
-
-    :where(
-      [data-unitone-layout~="-container-type\:inline-size"],
-      .-container-type\:inline-size
-    ) {
-      [data-unitone-layout~="-font-size\:#{ $name }"][data-unitone-layout~="-fluid-typography"] {
-        font-size: var(--unitone--font-size-#{ $name }-fluid-c);
-      }
-    }
   }
 }

package/src/behaviors/_index.scss

@@ -7,6 +7,7 @@
 @use './background-clip';
 @use './container-type';
 @use './divider';
+@use './fluid-reference';
 @use './font-size';
 @use './gap';
 @use './gutters';
@@ -31,6 +32,7 @@
 @include background-clip.background-clip();
 @include container-type.container-type();
 @include divider.divider();
+@include fluid-reference.fluid-reference();
 @include font-size.font-size();
 @include gap.gap();
 @include gutters.gutters();

package/src/layout-primitives/both-sides/index.jsx

@@ -1,6 +1,15 @@
 import React from 'react';
 
-export const BothSides = ({ gap, columnGap, rowGap, alignItems, style, ...props }) => {
+export const BothSides = ({
+  gap,
+  columnGap,
+  rowGap,
+  alignItems,
+  containerType,
+  fluidReference,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
   };
@@ -13,6 +22,8 @@ export const BothSides = ({ gap, columnGap, rowGap, alignItems, style, ...props
         '' !== (columnGap ?? '') ? `-column-gap:${columnGap}` : undefined,
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -1,6 +1,14 @@
 import React from 'react';
 
-export const Center = ({ withText, gutters, maxWidth, style, ...props }) => {
+export const Center = ({
+  withText,
+  gutters,
+  maxWidth,
+  containerType,
+  fluidReference,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
     '--unitone--max-width': '' !== maxWidth ? maxWidth : undefined,
@@ -12,6 +20,8 @@ export const Center = ({ withText, gutters, maxWidth, style, ...props }) => {
         'center',
         true === withText ? `-with-text` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -11,6 +11,8 @@ export const Cluster = ({
   rowGap,
   justifyContent,
   nowrap,
+  containerType,
+  fluidReference,
   tagName = 'div',
   style,
   ...props
@@ -34,6 +36,8 @@ export const Cluster = ({
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
         '' !== (justifyContent ?? '') ? `-justify-content:${justifyContent}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
         nowrap ? '-nowrap' : undefined,
       ]
         .filter(Boolean)

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

@@ -1,6 +1,15 @@
 import React from 'react';
 
-export const Container = ({ align, gutters, maxWidth, text, style, ...props }) => {
+export const Container = ({
+  align,
+  gutters,
+  maxWidth,
+  text,
+  containerType,
+  fluidReference,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
     '--unitone--max-width': '' !== maxWidth ? maxWidth : undefined,
@@ -12,6 +21,8 @@ export const Container = ({ align, gutters, maxWidth, text, style, ...props }) =
         'container',
         '' !== (align ?? '') ? `-align:${align}` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -17,6 +17,7 @@ export const Decorator = ({
   gap,
   alignContent,
   containerType,
+  fluidReference,
   justifyItems,
   shadow,
   position,
@@ -67,6 +68,7 @@ export const Decorator = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (alignContent ?? '') ? `-align-content:${alignContent}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
         '' !== (justifyItems ?? '') ? `-justify-items:${justifyItems}` : undefined,
         '' !== (padding ?? '') ? `-padding:${padding}` : undefined,
         '' !== (paddingTop ?? '') ? `-padding-top:${paddingTop}` : undefined,

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

@@ -1,9 +1,14 @@
 import React from 'react';
 
-export const Gutters = ({ padding, style, ...props }) => {
+export const Gutters = ({ padding, containerType, fluidReference, style, ...props }) => {
   return (
     <div
-      data-unitone-layout={['gutters', '' !== (padding ?? '') ? `-padding:${padding}` : undefined]
+      data-unitone-layout={[
+        'gutters',
+        '' !== (padding ?? '') ? `-padding:${padding}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
+      ]
         .filter(Boolean)
         .join(' ')}
       style={style}

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

@@ -15,6 +15,8 @@ export const Layers = ({
   rows,
   rowTrackSize,
   queryContext,
+  containerType,
+  fluidReference,
   style,
   ...props
 }) => {
@@ -40,6 +42,8 @@ export const Layers = ({
         '' !== (columnGap ?? '') ? `-column-gap:${columnGap}` : undefined,
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
         queryContext ? `@${queryContext}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -1,6 +1,16 @@
 import React from 'react';
 
-export const Marquee = ({ duration, gap, itemWidth, reverse, pauseOnHover, style, ...props }) => {
+export const Marquee = ({
+  duration,
+  gap,
+  itemWidth,
+  reverse,
+  pauseOnHover,
+  containerType,
+  fluidReference,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
     '--unitone--animation-duration': '' !== duration ? duration : undefined,
@@ -13,6 +23,8 @@ export const Marquee = ({ duration, gap, itemWidth, reverse, pauseOnHover, style
         'marquee-wrapper',
         reverse ? '-reverse' : undefined,
         pauseOnHover ? '-pause-on-hover' : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -1,6 +1,15 @@
 import React from 'react';
 
-export const Reel = ({ gap, height, itemWidth, noBar, style, ...props }) => {
+export const Reel = ({
+  gap,
+  height,
+  itemWidth,
+  noBar,
+  containerType,
+  fluidReference,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
     '--unitone--height': '' !== height ? height : undefined,
@@ -13,6 +22,8 @@ export const Reel = ({ gap, height, itemWidth, noBar, style, ...props }) => {
         'reel',
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         noBar ? '-no-bar' : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/responsive-grid/index.jsx

@@ -10,6 +10,8 @@ export const ResponsiveGrid = ({
   dividerColor,
   stairs,
   stairsUp,
+  containerType,
+  fluidReference,
   style,
   ...props
 }) => {
@@ -30,6 +32,8 @@ export const ResponsiveGrid = ({
         '' !== (divider ?? '') ? `-divider:${divider}` : undefined,
         '' !== (stairs ?? '') ? `-stairs:${stairs}` : undefined,
         '' !== (stairsUp ?? '') ? `-stairs-up:${stairsUp}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -8,6 +8,8 @@ export const Stack = ({
   dividerWidth,
   dividerStyle,
   dividerColor,
+  containerType,
+  fluidReference,
   tagName = 'div',
   style,
   ...props
@@ -29,6 +31,8 @@ export const Stack = ({
         '' !== (divider ?? '') ? `-divider:${divider}` : undefined,
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         negative ? '-negative' : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -10,6 +10,8 @@ export const Switcher = ({
   alignItems,
   stairs,
   stairsUp,
+  containerType,
+  fluidReference,
   style,
   ...props
 }) => {
@@ -29,6 +31,8 @@ export const Switcher = ({
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
         '' !== (stairs ?? '') ? `-stairs:${stairs}` : undefined,
         '' !== (stairsUp ?? '') ? `-stairs-up:${stairsUp}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -8,6 +8,8 @@ export const Text = ({
   gutters,
   maxWidth,
   columnWidth,
+  containerType,
+  fluidReference,
   style,
   ...props
 }) => {
@@ -26,6 +28,8 @@ export const Text = ({
         applyGap ? '-gap' : undefined,
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

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

@@ -16,6 +16,8 @@ export const Texture = ({
   textureBorderBottomRightRadius,
   textureBandTopSize,
   textureBandBottomSize,
+  containerType,
+  fluidReference,
   style,
   ...props
 }) => {
@@ -45,7 +47,12 @@ export const Texture = ({
 
   return (
     <div
-      data-unitone-layout={['texture', '' !== (texture ?? '') ? `-texture:${texture}` : undefined]
+      data-unitone-layout={[
+        'texture',
+        '' !== (texture ?? '') ? `-texture:${texture}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
+      ]
         .filter(Boolean)
         .join(' ')}
       style={style}

package/src/layout-primitives/vertical-ends/index.jsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
-export const VerticalEnds = ({ gap, alignItems, style, ...props }) => {
+export const VerticalEnds = ({
+  gap,
+  alignItems,
+  containerType,
+  fluidReference,
+  style,
+  ...props
+}) => {
   style = {
     ...style,
   };
@@ -11,6 +18,8 @@ export const VerticalEnds = ({ gap, alignItems, style, ...props }) => {
         'vertical-ends',
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/settings/_root.scss

@@ -1,5 +1,4 @@
 @use 'sass:list';
-@use 'sass:math';
 @use '../variables' as variables;
 
 @property --unitone--property--1em {
@@ -20,6 +19,12 @@
   initial-value: 0px;
 }
 
+@property --unitone--property--100cqw {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 @property --unitone--result--1em-px {
   syntax: "<number> | <length>";
   inherits: false;
@@ -38,40 +43,12 @@
   initial-value: 0;
 }
 
-@function _generate-fluid-spacing($min, $max) {
-  @return clamp(
-    #{ $min },
-    #{ $min } + ((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint } * var(--unitone--result--1rem-px)) * (var(--unitone--result--100vw-px) - (#{ variables.$min-breakpoint } * var(--unitone--result--1rem-px)))),
-    #{ $max }
-  );
-}
-
-@function _generate-spacing($max) {
-  $quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
-  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient });
-  @return _generate-fluid-spacing(#{ $min }, #{ $max });
-}
-
-@function _generate-padding($max) {
-  $quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
-  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient } * .2);
-  @return _generate-fluid-spacing(#{ $min }, #{ $max });
+@property --unitone--result--100cqw-px {
+  syntax: "<number> | <length>";
+  inherits: false;
+  initial-value: 0;
 }
 
-$font-sizes: (
-  -3: 2xs,
-  -2: xs,
-  -1: s,
-  0: m,
-  1: l,
-  2: xl,
-  3: 2xl,
-  4: 3xl,
-  5: 4xl,
-  6: 5xl,
-  7: 6xl,
-);
-
 * {
   /**
    * A value to get the unitless px value in trigonometric functions. (For Safari)
@@ -81,6 +58,10 @@ $font-sizes: (
 
   /**
    * em unitless px real value
+   *
+   * Firefox may invalidate font-size: var(...) when this registered custom
+   * property depends on 1em. It is reset to 0 in the Firefox fallback in
+   * variables.line-height().
    */
   --unitone--result--1em-px: calc(tan(atan2(var(--unitone--property--1em), 1px)));
 
@@ -160,11 +141,7 @@ $font-sizes: (
  * Font size tokens.
  */
 :root {
-  @each $level, $name in $font-sizes {
-    --unitone--font-size-#{ $name }: #{ variables.font-size-rem($level) };
-    --unitone--font-size-#{ $name }-fluid: #{ variables.font-size-fluid($level) };
-    --unitone--font-size-#{ $name }-fluid-c: #{ variables.font-size-fluid($level, 'container') };
-  }
+  @include variables.font-size-tokens();
 }
 
 /**
@@ -231,32 +208,7 @@ $font-sizes: (
  * 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);
-  --unitone--s1: var(--unitone--em1);
-  --unitone--s2: #{ _generate-spacing(var(--unitone--em2)) };
-  --unitone--s3: #{ _generate-spacing(var(--unitone--em3)) };
-  --unitone--s4: #{ _generate-spacing(var(--unitone--em4)) };
-  --unitone--s5: #{ _generate-spacing(var(--unitone--em5)) };
-  --unitone--s6: #{ _generate-spacing(var(--unitone--em6)) };
-  --unitone--s7: #{ _generate-spacing(var(--unitone--em7)) };
-
-  --unitone--s1s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1)) };
-  --unitone--s2s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2)) };
-  --unitone--s3s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3)) };
-  --unitone--s4s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4)) };
-  --unitone--s5s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5)) };
-  --unitone--s6s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6)) };
-  --unitone--s7s: #{ _generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7)) };
-
-  --unitone--s2m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2)) };
-  --unitone--s3m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3)) };
-  --unitone--s4m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4)) };
-  --unitone--s5m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5)) };
-  --unitone--s6m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6)) };
-  --unitone--s7m: #{ _generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7)) };
+  @include variables.spacing-tokens();
 }
 
 /**
@@ -266,32 +218,7 @@ $font-sizes: (
  * 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);
-  --unitone--p1: var(--unitone--em1);
-  --unitone--p2: #{ _generate-padding(var(--unitone--em2)) };
-  --unitone--p3: #{ _generate-padding(var(--unitone--em3)) };
-  --unitone--p4: #{ _generate-padding(var(--unitone--em4)) };
-  --unitone--p5: #{ _generate-padding(var(--unitone--em5)) };
-  --unitone--p6: #{ _generate-padding(var(--unitone--em6)) };
-  --unitone--p7: #{ _generate-padding(var(--unitone--em7)) };
-
-  --unitone--p1s: var(--unitone--s1s);
-  --unitone--p2s: var(--unitone--s2s);
-  --unitone--p3s: var(--unitone--s3s);
-  --unitone--p4s: var(--unitone--s4s);
-  --unitone--p5s: var(--unitone--s5s);
-  --unitone--p6s: var(--unitone--s6s);
-  --unitone--p7s: var(--unitone--s7s);
-
-  --unitone--p2m: var(--unitone--s2m);
-  --unitone--p3m: var(--unitone--s3m);
-  --unitone--p4m: var(--unitone--s4m);
-  --unitone--p5m: var(--unitone--s5m);
-  --unitone--p6m: var(--unitone--s6m);
-  --unitone--p7m: var(--unitone--s7m);
+  @include variables.padding-tokens();
 }
 
 /**
@@ -301,7 +228,7 @@ $font-sizes: (
   /**
    * Default gutters
    */
-  --unitone--global--gutters: max(min(6vw, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
+  --unitone--global--gutters: #{ variables.generate-global-gutters() };
 
   /**
    * Max width of the container.

package/src/utilities/_font-size.scss

@@ -7,14 +7,4 @@
   .-font-size\:#{ $name }.-fluid-typography {
     font-size: var(--unitone--font-size-#{ $name }-fluid) !important;
   }
-
-  :where(
-    [data-unitone-layout~="-container-type\:inline-size"],
-    .-container-type\:inline-size
-  ) {
-    .-font-size\:#{ $name }[data-unitone-layout~="-fluid-typography"],
-    .-font-size\:#{ $name }.-fluid-typography {
-      font-size: var(--unitone--font-size-#{ $name }-fluid-c) !important;
-    }
-  }
 }