@inc2734/unitone-css 1.3.0 → 1.4.0

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

@@ -11,7 +11,8 @@ export const Switcher = ({
   stairs,
   stairsUp,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -32,6 +33,7 @@ export const Switcher = ({
         '' !== (stairs ?? '') ? `-stairs:${stairs}` : undefined,
         '' !== (stairsUp ?? '') ? `-stairs-up:${stairsUp}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

package/src/layout-primitives/text/_index.scss

@@ -2,7 +2,9 @@
   --unitone--gutters: 0px;
   --unitone--max-width: var(--unitone--measure);
   --unitone--text-gap: var(--unitone--global--text-gap);
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   box-sizing: content-box;
   padding-right: var(--unitone--gutters);
   padding-left: var(--unitone--gutters);

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

@@ -9,7 +9,8 @@ export const Text = ({
   maxWidth,
   columnWidth,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -29,6 +30,7 @@ export const Text = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (gutters ?? '') ? `-gutters:${gutters}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

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

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

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

@@ -1,7 +1,9 @@
 @mixin abstract-vertical-ends() {
   --unitone--gap: var(--unitone--global--text-gap);
   --unitone--align-items: stretch;
+  --unitone--container-type: initial;
 
+  container-type: var(--unitone--container-type);
   display: flex;
   gap: var(--unitone--gap);
   flex-direction: column;

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

@@ -4,7 +4,8 @@ export const VerticalEnds = ({
   gap,
   alignItems,
   containerType,
-  fluidReference,
+  responsiveContext,
+  fluidReference, // @deprecated Kept for backward compatibility. Use responsiveContext on an ancestor instead.
   style,
   ...props
 }) => {
@@ -19,6 +20,7 @@ export const VerticalEnds = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (alignItems ?? '') ? `-align-items:${alignItems}` : undefined,
         '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
+        'container' === responsiveContext ? '-responsive-context:container' : undefined,
         '' !== (fluidReference ?? '') ? `-fluid-reference:${fluidReference}` : undefined,
       ]
         .filter(Boolean)

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

@@ -1,3 +1,5 @@
+@use '../../behaviors/responsive-context';
+
 @mixin abstract-vertical-writing() {
   --unitone--gap: var(--unitone--global--text-gap);
   --unitone--column-gap: var(--unitone--global--gap);
@@ -41,33 +43,19 @@
     writing-mode: horizontal-tb;
 
     > * {
-      box-sizing: border-box;
       max-inline-size: none;
+      box-sizing: border-box;
     }
   }
 
   &[data-unitone-layout~="-switch"] {
-    &:where(:not([data-unitone-layout~="@container"])) {
-      @media (orientation: portrait) and (width < 600px) {
-        column-count: auto;
-        writing-mode: horizontal-tb;
-
-        > * {
-          box-sizing: border-box;
-          max-inline-size: none;
-        }
-      }
-    }
-
-    &:where([data-unitone-layout~="@container"]) {
-      @container (width < 600px) {
-        column-count: auto;
-        writing-mode: horizontal-tb;
+    @include responsive-context.responsive-query('(width < 600px)') {
+      column-count: auto;
+      writing-mode: horizontal-tb;
 
-        > * {
-          box-sizing: border-box;
-          max-inline-size: none;
-        }
+      > * {
+        max-inline-size: none;
+        box-sizing: border-box;
       }
     }
   }

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

@@ -6,8 +6,8 @@ export const VerticalWriting = ({
   maxHeight,
   switchWritingMode,
   threshold,
-  style,
   queryContext,
+  style,
   ...props
 }) => {
   style = {
@@ -24,7 +24,7 @@ export const VerticalWriting = ({
           '' !== (textOrientation ?? '') ? `-text-orientation:${textOrientation}` : undefined,
           '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
           switchWritingMode ? '-switch' : undefined,
-          queryContext ? `@${queryContext}` : undefined,
+          'container' === queryContext ? '@container' : undefined,
         ]
           .filter(Boolean)
           .join(' ')}

package/src/settings/_root.scss

@@ -58,6 +58,10 @@
 
   /**
    * 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)));
 

package/src/variables/_index.scss

@@ -21,54 +21,58 @@ $font-sizes: (
   7: 6xl,
 );
 
-@function generate-global-gutters($context: 'viewport') {
-  $width: var(--unitone--property--100vw);
-  @if $context == 'container' {
-    $width: var(--unitone--property--100cqw);
+@function generate-global-gutters($context: 'viewport', $width: null) {
+  @if $width == null {
+    $width: var(--unitone--property--100vw);
+    @if $context == 'container' {
+      $width: var(--unitone--property--100cqw);
+    }
   }
 
-  @return max(min(#{ $width } * .06, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
+  @return max(min($width * .06, var(--unitone--rem2)), env(safe-area-inset-right), env(safe-area-inset-left));
 }
 
-@function generate-fluid-spacing($min, $max, $context: 'viewport') {
-  $width: var(--unitone--result--100vw-px);
-  @if $context == 'container' {
-    $width: var(--unitone--result--100cqw-px);
+@function generate-fluid-spacing($min, $max, $context: 'viewport', $width: null) {
+  @if $width == null {
+    $width: var(--unitone--result--100vw-px);
+    @if $context == 'container' {
+      $width: var(--unitone--result--100cqw-px);
+    }
   }
 
   @return clamp(
-    #{ $min },
-    #{ $min } + ((#{ $max } - #{ $min }) / (#{ $max-breakpoint - $min-breakpoint } * var(--unitone--result--1rem-px)) * (#{ $width } - (#{ $min-breakpoint } * var(--unitone--result--1rem-px)))),
-    #{ $max }
+    $min,
+    $min + (($max - $min) / (($max-breakpoint - $min-breakpoint) * var(--unitone--result--1rem-px)) * ($width - ($min-breakpoint * var(--unitone--result--1rem-px)))),
+    $max
   );
 }
 
-@function generate-spacing($max, $context: 'viewport') {
+@function generate-spacing($max, $context: 'viewport', $width: null) {
   $quotient: math.div($min-breakpoint, $max-breakpoint);
-  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient });
-  @return generate-fluid-spacing(#{ $min }, #{ $max }, $context);
+  $min: calc(var(--unitone--em1) + $max * $quotient);
+  @return generate-fluid-spacing($min, $max, $context, $width);
 }
 
-@function generate-padding($max, $context: 'viewport') {
+@function generate-padding($max, $context: 'viewport', $width: null) {
   $quotient: math.div($min-breakpoint, $max-breakpoint);
-  $min: calc(var(--unitone--em1) + #{ $max } * #{ $quotient } * .2);
-  @return generate-fluid-spacing(#{ $min }, #{ $max }, $context);
+  $min: calc(var(--unitone--em1) + $max * $quotient * .2);
+  @return generate-fluid-spacing($min, $max, $context, $width);
 }
 
 @function _max-font-size($level) {
-  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - (#{ $level })));
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - ($level)));
 }
 
 @function _min-font-size($level) {
-  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - (#{ $level })) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - ($level)) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
 }
 
 @function _font-size-scale($level) {
-  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - (#{ $level })));
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - ($level)));
 }
 
 @function font-size-rem($level) {
-  @return calc(#{ _font-size-scale($level) } * 1rem);
+  @return calc(_font-size-scale($level) * 1rem);
 }
 
 @function font-size-fluid($level, $context: 'viewport') {
@@ -79,11 +83,20 @@ $font-sizes: (
 
   $max-font-size: _max-font-size($level);
   $min-font-size: _min-font-size($level);
-  $slope: calc((#{ $max-font-size } - #{ $min-font-size }) / (#{ $max-breakpoint - $min-breakpoint }));
-  $intercept: calc(#{-1 * $min-breakpoint } * #{ $slope } + #{ $min-font-size });
-  $preferred-font-size: calc((#{ $intercept } * 1rem) + (#{ $slope } * #{ $width }));
+  $slope: _font-size-slope($min-font-size, $max-font-size);
+
+  @return _fluid-font-size($min-font-size, $max-font-size, $slope, $width);
+}
 
-  @return clamp(var(--unitone--fluid-typography-min-length, calc(1rem * #{ $min-font-size })), #{ $preferred-font-size }, var(--unitone--fluid-typography-max-length, calc(1rem * #{ $max-font-size })));
+@function _font-size-slope($min-font-size, $max-font-size) {
+  @return calc(($max-font-size - $min-font-size) / ($max-breakpoint - $min-breakpoint));
+}
+
+@function _fluid-font-size($min-font-size, $max-font-size, $slope, $width) {
+  $intercept: calc((-1 * $min-breakpoint) * $slope + $min-font-size);
+  $preferred-font-size: calc(($intercept * 1rem) + ($slope * $width));
+
+  @return clamp(var(--unitone--fluid-typography-min-length, calc(1rem * $min-font-size)), $preferred-font-size, var(--unitone--fluid-typography-max-length, calc(1rem * $max-font-size)));
 }
 
 /**
@@ -108,10 +121,10 @@ $font-sizes: (
  * font size the line-height stays close to max (and is clamped there).
  */
 $_min-line-height: calc(var(--unitone--min-line-height) - 0.1);
-$_line-height-amplitude: calc((var(--unitone--max-line-height) - #{ $_min-line-height }) * (var(--unitone--result--1rem-px) + var(--unitone--line-height-curvature)));
+$_line-height-amplitude: calc((var(--unitone--max-line-height) - $_min-line-height) * (var(--unitone--result--1rem-px) + var(--unitone--line-height-curvature)));
 $_line-height: clamp(
   var(--unitone--min-line-height),
-  (#{ $_min-line-height } + #{ $_line-height-amplitude } / (var(--unitone--result--1em-px) + var(--unitone--line-height-curvature))),
+  ($_min-line-height + $_line-height-amplitude / (var(--unitone--result--1em-px) + var(--unitone--line-height-curvature))),
   var(--unitone--max-line-height)
 );
 
@@ -125,6 +138,9 @@ $_line-height: clamp(
   // @todo In Firefox, using tan(atan2()) for line-height is considered invalid.
   // Therefore, a fallback line-height is applied.
   @supports (-moz-appearance: none) {
+    // Break the registered 1em dependency; otherwise Firefox may invalidate font-size: var(...).
+    --unitone--result--1em-px: 0;
+
     line-height: clamp(
       calc(var(--unitone--min-line-height) * 1em),
       calc((var(--unitone--min-line-height) - 0.1) * 1em + (var(--unitone--max-line-height) - (var(--unitone--min-line-height) - 0.1)) * 1rem),
@@ -137,53 +153,69 @@ $container-max-width: $max-breakpoint * 16px; // = 1280px
 $grid-columns: 12;
 $grid-rows: 7;
 
-@mixin spacing-tokens($context: 'viewport') {
-  @if $context == 'viewport' {
-    --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);
+@mixin static-spacing-tokens() {
+  --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);
+}
+
+@mixin spacing-tokens(
+  $context: 'viewport',
+  $width: null,
+  $include-static: $context == 'viewport'
+) {
+  @if $include-static {
+    @include static-spacing-tokens();
   }
 
-  --unitone--s2: #{ generate-spacing(var(--unitone--em2), $context) };
-  --unitone--s3: #{ generate-spacing(var(--unitone--em3), $context) };
-  --unitone--s4: #{ generate-spacing(var(--unitone--em4), $context) };
-  --unitone--s5: #{ generate-spacing(var(--unitone--em5), $context) };
-  --unitone--s6: #{ generate-spacing(var(--unitone--em6), $context) };
-  --unitone--s7: #{ generate-spacing(var(--unitone--em7), $context) };
-
-  --unitone--s1s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1), $context) };
-  --unitone--s2s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2), $context) };
-  --unitone--s3s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3), $context) };
-  --unitone--s4s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4), $context) };
-  --unitone--s5s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5), $context) };
-  --unitone--s6s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6), $context) };
-  --unitone--s7s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7), $context) };
-
-  --unitone--s2m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2), $context) };
-  --unitone--s3m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3), $context) };
-  --unitone--s4m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4), $context) };
-  --unitone--s5m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5), $context) };
-  --unitone--s6m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6), $context) };
-  --unitone--s7m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7), $context) };
-}
-
-@mixin padding-tokens($context: 'viewport') {
-  @if $context == 'viewport' {
-    --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--s2: #{ generate-spacing(var(--unitone--em2), $context, $width) };
+  --unitone--s3: #{ generate-spacing(var(--unitone--em3), $context, $width) };
+  --unitone--s4: #{ generate-spacing(var(--unitone--em4), $context, $width) };
+  --unitone--s5: #{ generate-spacing(var(--unitone--em5), $context, $width) };
+  --unitone--s6: #{ generate-spacing(var(--unitone--em6), $context, $width) };
+  --unitone--s7: #{ generate-spacing(var(--unitone--em7), $context, $width) };
+
+  --unitone--s1s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em1), $context, $width) };
+  --unitone--s2s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em2), $context, $width) };
+  --unitone--s3s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em3), $context, $width) };
+  --unitone--s4s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em4), $context, $width) };
+  --unitone--s5s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em5), $context, $width) };
+  --unitone--s6s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em6), $context, $width) };
+  --unitone--s7s: #{ generate-fluid-spacing(var(--unitone--em-1), var(--unitone--em7), $context, $width) };
+
+  --unitone--s2m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em2), $context, $width) };
+  --unitone--s3m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em3), $context, $width) };
+  --unitone--s4m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em4), $context, $width) };
+  --unitone--s5m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em5), $context, $width) };
+  --unitone--s6m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em6), $context, $width) };
+  --unitone--s7m: #{ generate-fluid-spacing(var(--unitone--em1), var(--unitone--em7), $context, $width) };
+}
+
+@mixin static-padding-tokens() {
+  --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);
+}
+
+@mixin padding-tokens(
+  $context: 'viewport',
+  $width: null,
+  $include-static: $context == 'viewport'
+) {
+  @if $include-static {
+    @include static-padding-tokens();
   }
 
-  --unitone--p2: #{ generate-padding(var(--unitone--em2), $context) };
-  --unitone--p3: #{ generate-padding(var(--unitone--em3), $context) };
-  --unitone--p4: #{ generate-padding(var(--unitone--em4), $context) };
-  --unitone--p5: #{ generate-padding(var(--unitone--em5), $context) };
-  --unitone--p6: #{ generate-padding(var(--unitone--em6), $context) };
-  --unitone--p7: #{ generate-padding(var(--unitone--em7), $context) };
+  --unitone--p2: #{ generate-padding(var(--unitone--em2), $context, $width) };
+  --unitone--p3: #{ generate-padding(var(--unitone--em3), $context, $width) };
+  --unitone--p4: #{ generate-padding(var(--unitone--em4), $context, $width) };
+  --unitone--p5: #{ generate-padding(var(--unitone--em5), $context, $width) };
+  --unitone--p6: #{ generate-padding(var(--unitone--em6), $context, $width) };
+  --unitone--p7: #{ generate-padding(var(--unitone--em7), $context, $width) };
 
   --unitone--p1s: var(--unitone--s1s);
   --unitone--p2s: var(--unitone--s2s);
@@ -201,12 +233,33 @@ $grid-rows: 7;
   --unitone--p7m: var(--unitone--s7m);
 }
 
-@mixin font-size-tokens($context: 'viewport') {
+@mixin static-font-size-tokens() {
   @each $level, $name in $font-sizes {
-    @if $context == 'viewport' {
-      --unitone--font-size-#{ $name }: #{ font-size-rem($level) };
+    --unitone--font-size-#{ $name }: #{ font-size-rem($level) };
+  }
+}
+
+@mixin font-size-tokens(
+  $context: 'viewport',
+  $width: null,
+  $include-static: $context == 'viewport'
+) {
+  @if $width == null {
+    $width: 100vw;
+    @if $context == 'container' {
+      $width: var(--unitone--property--100cqw);
     }
+  }
+
+  @if $include-static {
+    @include static-font-size-tokens();
+  }
+
+  @each $level, $name in $font-sizes {
+    $min: _min-font-size($level);
+    $max: _max-font-size($level);
+    $slope: _font-size-slope($min, $max);
 
-    --unitone--font-size-#{ $name }-fluid: #{ font-size-fluid($level, $context) };
+    --unitone--font-size-#{ $name }-fluid: #{ _fluid-font-size($min, $max, $slope, $width) };
   }
 }