@orioncactuscorp/ui 1.0.0

package/src/scss/mixins/_spring.scss

@@ -0,0 +1,396 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+$oc-spring-preset-bounce: (
+  smooth: 0,
+  snappy: 0.15,
+  bouncy: 0.3,
+) !default;
+$oc-spring-epsilon: 0.0001 !default;
+$oc-spring-stability-window: 100ms !default;
+$oc-spring-time-step: 1ms !default;
+$oc-spring-max-duration: 20s !default;
+$oc-spring-samples-per-response: 64 !default;
+$oc-spring-max-samples: 240 !default;
+
+@function _oc-spring-round($value, $digits) {
+  $factor: math.pow(10, $digits);
+
+  @return math.div(math.round($value * $factor), $factor);
+}
+
+@function _oc-spring-seconds($time, $name) {
+  @if meta.type-of($time) != 'number' or not math.compatible($time, 1s) {
+    @error '#{$name} must be a time value.';
+  }
+
+  @if $time <= 0s {
+    @error '#{$name} must be greater than 0s.';
+  }
+
+  @return math.div($time, 1s);
+}
+
+@function _oc-spring-optional-seconds($time, $name) {
+  @if meta.type-of($time) != 'number' or not math.compatible($time, 1s) {
+    @error '#{$name} must be a time value.';
+  }
+
+  @if $time < 0s {
+    @error '#{$name} must be greater than or equal to 0s.';
+  }
+
+  @return math.div($time, 1s);
+}
+
+@function _oc-spring-number($value, $name) {
+  @if meta.type-of($value) != 'number' or not math.is-unitless($value) {
+    @error '#{$name} must be a unitless number.';
+  }
+
+  @return $value;
+}
+
+@function _oc-spring-positive-number($value, $name) {
+  $number: _oc-spring-number($value, $name);
+
+  @if $number <= 0 {
+    @error '#{$name} must be greater than 0.';
+  }
+
+  @return $number;
+}
+
+@function _oc-spring-bounce-to-damping-ratio($bounce) {
+  $bounce: _oc-spring-number($bounce, 'bounce');
+
+  @if $bounce <= -1 or $bounce >= 1 {
+    @error 'bounce must be greater than -1 and less than 1.';
+  }
+
+  @if $bounce > 0 {
+    @return 1 - $bounce;
+  }
+
+  @return math.div(1, $bounce + 1);
+}
+
+@function _oc-spring-duration-parameters($duration, $bounce) {
+  $duration-seconds: _oc-spring-seconds($duration, 'duration');
+  $mass: 1;
+  $stiffness: math.div(4 * math.$pi * math.$pi * $mass, $duration-seconds * $duration-seconds);
+  $damping-ratio: _oc-spring-bounce-to-damping-ratio($bounce);
+  $damping: $damping-ratio * 2 * math.sqrt($mass * $stiffness);
+
+  @return (mass: $mass, stiffness: $stiffness, damping: $damping, perceptual-duration: $duration-seconds, bounce: $bounce);
+}
+
+@function _oc-spring-physical-parameters($mass, $stiffness, $damping) {
+  @return (mass: _oc-spring-positive-number($mass, 'mass'), stiffness: _oc-spring-positive-number($stiffness, 'stiffness'), damping: _oc-spring-positive-number($damping, 'damping'), perceptual-duration: null, bounce: null);
+}
+
+@function _oc-spring-resolve-parameters($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping) {
+  $has-physical: $mass != null or $stiffness != null or $damping != null;
+
+  @if $has-physical {
+    @if $mass == null or $stiffness == null or $damping == null {
+      @error 'physical spring requires $mass, $stiffness, and $damping.';
+    }
+
+    @return _oc-spring-physical-parameters($mass, $stiffness, $damping);
+  }
+
+  @if $duration == null {
+    @error 'duration is required for preset and bounce springs.';
+  }
+
+  @if $bounce == null {
+    @if not map.has-key($oc-spring-preset-bounce, $preset) {
+      @error 'Unknown spring preset: #{$preset}.';
+    }
+
+    $base-bounce: map.get($oc-spring-preset-bounce, $preset);
+    $bounce: $base-bounce + _oc-spring-number($extra-bounce, 'extra-bounce');
+  }
+
+  @return _oc-spring-duration-parameters($duration, $bounce);
+}
+
+@function _oc-spring-damping-ratio($parameters) {
+  $mass: map.get($parameters, mass);
+  $stiffness: map.get($parameters, stiffness);
+  $damping: map.get($parameters, damping);
+
+  @return math.div($damping, 2 * math.sqrt($stiffness * $mass));
+}
+
+@function _oc-spring-natural-response-duration($parameters) {
+  $mass: map.get($parameters, mass);
+  $stiffness: map.get($parameters, stiffness);
+
+  @return math.div(2 * math.$pi, math.sqrt(math.div($stiffness, $mass)));
+}
+
+@function _oc-spring-value($time, $parameters, $initial-velocity) {
+  $mass: map.get($parameters, mass);
+  $stiffness: map.get($parameters, stiffness);
+  $damping: map.get($parameters, damping);
+  $angular-frequency: math.sqrt(math.div($stiffness, $mass));
+  $damping-ratio: _oc-spring-damping-ratio($parameters);
+  $displacement: -1;
+
+  @if $damping-ratio < 1 {
+    $damped-frequency: $angular-frequency * math.sqrt(1 - $damping-ratio * $damping-ratio);
+    $velocity-coefficient: math.div($initial-velocity + $damping-ratio * $angular-frequency * $displacement, $damped-frequency);
+
+    @return 1 + math.pow(math.$e, -$damping-ratio * $angular-frequency * $time) * ($displacement * math.cos($damped-frequency * $time) + $velocity-coefficient * math.sin($damped-frequency * $time));
+  }
+
+  @if math.abs($damping-ratio - 1) < 0.0001 {
+    $velocity-coefficient: $initial-velocity + $angular-frequency * $displacement;
+
+    @return 1 + ($displacement + $velocity-coefficient * $time) * math.pow(math.$e, -$angular-frequency * $time);
+  }
+
+  $ratio-root: math.sqrt($damping-ratio * $damping-ratio - 1);
+  $root-a: -$angular-frequency * ($damping-ratio - $ratio-root);
+  $root-b: -$angular-frequency * ($damping-ratio + $ratio-root);
+  $coefficient-a: math.div($initial-velocity - $root-b * $displacement, $root-a - $root-b);
+  $coefficient-b: $displacement - $coefficient-a;
+
+  @return 1 + $coefficient-a * math.pow(math.$e, $root-a * $time) + $coefficient-b * math.pow(math.$e, $root-b * $time);
+}
+
+@function _oc-spring-settle-seconds($parameters, $initial-velocity, $epsilon, $stability-window, $max-duration) {
+  $epsilon: _oc-spring-positive-number($epsilon, 'epsilon');
+  $initial-velocity: _oc-spring-number($initial-velocity, 'initial-velocity');
+  $stability-seconds: _oc-spring-optional-seconds($stability-window, 'stability-window');
+  $max-seconds: _oc-spring-seconds($max-duration, 'max-duration');
+  $step-seconds: _oc-spring-seconds($oc-spring-time-step, 'time-step');
+  $stable-steps: math.max(1, math.ceil(math.div($stability-seconds, $step-seconds)));
+  $stable-count: 0;
+  $max-steps: math.ceil(math.div($max-seconds, $step-seconds));
+
+  @for $step from 0 through $max-steps {
+    $time: $step * $step-seconds;
+    $value: _oc-spring-value($time, $parameters, $initial-velocity);
+    $next-value: _oc-spring-value($time + $step-seconds, $parameters, $initial-velocity);
+
+    @if math.abs($value - 1) < $epsilon and math.abs($next-value - $value) < $epsilon {
+      $stable-count: $stable-count + 1;
+
+      @if $stable-count >= $stable-steps {
+        @return math.max(0, $time - $stability-seconds);
+      }
+    } @else {
+      $stable-count: 0;
+    }
+  }
+
+  @error 'Spring did not settle within #{$max-duration}.';
+}
+
+@function _oc-spring-sample-count($samples, $parameters, $settle-seconds) {
+  @if $samples != auto {
+    $samples: _oc-spring-number($samples, 'samples');
+
+    @if math.round($samples) != $samples or $samples < 2 {
+      @error 'samples must be an integer greater than or equal to 2.';
+    }
+
+    @return $samples;
+  }
+
+  $response-duration: _oc-spring-natural-response-duration($parameters);
+  $duration-scale: math.max(1, math.div($settle-seconds, $response-duration));
+
+  @return math.min($oc-spring-max-samples, math.ceil($oc-spring-samples-per-response * $duration-scale));
+}
+
+@function _oc-spring-model($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping, $initial-velocity, $epsilon, $stability-window, $max-duration) {
+  $parameters: _oc-spring-resolve-parameters($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping);
+  $settle-seconds: _oc-spring-settle-seconds($parameters, $initial-velocity, $epsilon, $stability-window, $max-duration);
+
+  @return (parameters: $parameters, settle-seconds: $settle-seconds);
+}
+
+@function oc-spring-timing($duration: null, $preset: smooth, $extra-bounce: 0, $bounce: null, $mass: null, $stiffness: null, $damping: null, $initial-velocity: 0, $epsilon: $oc-spring-epsilon, $stability-window: $oc-spring-stability-window, $max-duration: $oc-spring-max-duration, $samples: auto) {
+  $model: _oc-spring-model($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping, $initial-velocity, $epsilon, $stability-window, $max-duration);
+  $parameters: map.get($model, parameters);
+  $settle-seconds: map.get($model, settle-seconds);
+  $sample-count: _oc-spring-sample-count($samples, $parameters, $settle-seconds);
+  $segments: '';
+
+  @for $index from 0 through $sample-count {
+    $offset: math.div($index, $sample-count);
+    $value: _oc-spring-value($settle-seconds * $offset, $parameters, $initial-velocity);
+
+    @if $index == 0 {
+      $value: 0;
+    } @else if $index == $sample-count {
+      $value: 1;
+    }
+
+    $segment: '#{_oc-spring-round($value, 4)} #{_oc-spring-round($offset * 100, 2)}%';
+
+    @if $segments == '' {
+      $segments: $segment;
+    } @else {
+      $segments: '#{$segments}, #{$segment}';
+    }
+  }
+
+  @return string.unquote('linear(#{$segments})');
+}
+
+@function oc-spring-settle-duration($duration: null, $preset: smooth, $extra-bounce: 0, $bounce: null, $mass: null, $stiffness: null, $damping: null, $initial-velocity: 0, $epsilon: $oc-spring-epsilon, $stability-window: $oc-spring-stability-window, $max-duration: $oc-spring-max-duration) {
+  $model: _oc-spring-model($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping, $initial-velocity, $epsilon, $stability-window, $max-duration);
+
+  @return _oc-spring-round(map.get($model, settle-seconds), 4) * 1s;
+}
+
+@function oc-spring-duration-scale($duration, $preset: smooth, $extra-bounce: 0, $bounce: null, $initial-velocity: 0, $epsilon: $oc-spring-epsilon, $stability-window: $oc-spring-stability-window, $max-duration: $oc-spring-max-duration) {
+  $duration-seconds: _oc-spring-seconds($duration, 'duration');
+  $settle-duration: oc-spring-settle-duration($duration, $preset, $extra-bounce, $bounce, $initial-velocity: $initial-velocity, $epsilon: $epsilon, $stability-window: $stability-window, $max-duration: $max-duration);
+
+  @return _oc-spring-round(math.div(math.div($settle-duration, 1s), $duration-seconds), 4);
+}
+
+@function _oc-spring-transition-options($duration: null, $preset: smooth, $extra-bounce: 0, $bounce: null, $mass: null, $stiffness: null, $damping: null, $initial-velocity: 0, $delay: null, $epsilon: $oc-spring-epsilon, $stability-window: $oc-spring-stability-window, $max-duration: $oc-spring-max-duration, $samples: auto) {
+  $options: ();
+  $options: map.set($options, duration, $duration);
+  $options: map.set($options, preset, $preset);
+  $options: map.set($options, extra-bounce, $extra-bounce);
+  $options: map.set($options, bounce, $bounce);
+  $options: map.set($options, mass, $mass);
+  $options: map.set($options, stiffness, $stiffness);
+  $options: map.set($options, damping, $damping);
+  $options: map.set($options, initial-velocity, $initial-velocity);
+  $options: map.set($options, delay, $delay);
+  $options: map.set($options, epsilon, $epsilon);
+  $options: map.set($options, stability-window, $stability-window);
+  $options: map.set($options, max-duration, $max-duration);
+  $options: map.set($options, samples, $samples);
+
+  @return $options;
+}
+
+@function _oc-spring-transition-item($property, $options) {
+  $duration: map.get($options, duration);
+  $preset: map.get($options, preset);
+  $extra-bounce: map.get($options, extra-bounce);
+  $bounce: map.get($options, bounce);
+  $mass: map.get($options, mass);
+  $stiffness: map.get($options, stiffness);
+  $damping: map.get($options, damping);
+  $initial-velocity: map.get($options, initial-velocity);
+  $delay: map.get($options, delay);
+  $epsilon: map.get($options, epsilon);
+  $stability-window: map.get($options, stability-window);
+  $max-duration: map.get($options, max-duration);
+  $samples: map.get($options, samples);
+  $settle-duration: oc-spring-settle-duration($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping, $initial-velocity, $epsilon, $stability-window, $max-duration);
+  $timing: oc-spring-timing($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping, $initial-velocity, $epsilon, $stability-window, $max-duration, $samples);
+
+  @if $delay == null {
+    @return string.unquote('#{$property} #{$settle-duration} #{$timing}');
+  }
+
+  @return string.unquote('#{$property} #{$settle-duration} #{$timing} #{$delay}');
+}
+
+@function _oc-spring-validate-config-map($base-options, $config) {
+  @if list.length($config) == 0 {
+    @error 'oc-spring property config map must not be empty.';
+  }
+
+  @each $key, $value in $config {
+    @if not map.has-key($base-options, $key) {
+      @error 'Unknown oc-spring property config key: #{$key}.';
+    }
+  }
+
+  @return $config;
+}
+
+@function _oc-spring-options-from-config-map($base-options, $config) {
+  $config: _oc-spring-validate-config-map($base-options, $config);
+  $options: $base-options;
+
+  @each $key, $value in $config {
+    $options: map.set($options, $key, $value);
+  }
+
+  @return $options;
+}
+
+@function _oc-spring-options-from-config-list($base-options, $config) {
+  $length: list.length($config);
+
+  @if $length == 0 {
+    @error 'oc-spring property config tuple must not be empty.';
+  }
+
+  @if $length > 5 {
+    @error 'oc-spring property config tuple accepts up to 5 values: duration, preset, extra-bounce, delay, samples.';
+  }
+
+  $options: $base-options;
+  $keys: duration, preset, extra-bounce, delay, samples;
+
+  @for $index from 1 through $length {
+    $options: map.set($options, list.nth($keys, $index), list.nth($config, $index));
+  }
+
+  @return $options;
+}
+
+@function _oc-spring-options-from-config($base-options, $config) {
+  @if meta.type-of($config) == 'map' {
+    @return _oc-spring-options-from-config-map($base-options, $config);
+  }
+
+  @if meta.type-of($config) == 'list' {
+    @return _oc-spring-options-from-config-list($base-options, $config);
+  }
+
+  @error 'oc-spring property config must be a tuple or map.';
+}
+
+@function oc-spring($property, $duration: null, $preset: smooth, $extra-bounce: 0, $bounce: null, $mass: null, $stiffness: null, $damping: null, $initial-velocity: 0, $delay: null, $epsilon: $oc-spring-epsilon, $stability-window: $oc-spring-stability-window, $max-duration: $oc-spring-max-duration, $samples: auto) {
+  $base-options: _oc-spring-transition-options($duration, $preset, $extra-bounce, $bounce, $mass, $stiffness, $damping, $initial-velocity, $delay, $epsilon, $stability-window, $max-duration, $samples);
+
+  @if meta.type-of($property) == 'map' {
+    @if list.length($property) == 0 {
+      @error 'oc-spring property map must not be empty.';
+    }
+
+    $transitions: ();
+
+    @each $item-property, $config in $property {
+      $item-options: _oc-spring-options-from-config($base-options, $config);
+      $transitions: list.append($transitions, _oc-spring-transition-item($item-property, $item-options), $separator: comma);
+    }
+
+    @return $transitions;
+  }
+
+  @if meta.type-of($property) == 'list' {
+    @if list.length($property) == 0 {
+      @error 'oc-spring property list must not be empty.';
+    }
+
+    $transitions: ();
+
+    @each $item-property in $property {
+      $transitions: list.append($transitions, _oc-spring-transition-item($item-property, $base-options), $separator: comma);
+    }
+
+    @return $transitions;
+  }
+
+  @return _oc-spring-transition-item($property, $base-options);
+}

package/src/scss/mixins/_spring.test.ts

@@ -0,0 +1,128 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('spring utilities', () => {
+  const compileSpring = (scss: string) =>
+    compileString(
+      `
+      @use 'spring' as *;
+
+      ${scss}
+      `,
+      {
+        loadPaths: ['src/scss'],
+      },
+    );
+
+  it('emits a transition item with corrected settling duration', () => {
+    const result = compileSpring(`
+      .target {
+        transition: oc-spring(transform, 0.5s, bouncy, $samples: 8);
+      }
+    `);
+
+    expect(result.css).toContain('transition: transform 0.932s linear(');
+    expect(result.css).toContain('100%');
+  });
+
+  it('accepts CSS transition-like positional extra bounce', () => {
+    const result = compileSpring(`
+      .target {
+        transition: oc-spring(transform, 0.5s, snappy, 0.1, $samples: 8);
+      }
+    `);
+
+    expect(result.css).toContain('transition: transform');
+    expect(result.css).toContain('linear(');
+  });
+
+  it('supports custom bounce and physical springs', () => {
+    const result = compileSpring(`
+      .target {
+        transition:
+          oc-spring(transform, 0.6s, $bounce: 0.2, $samples: 8),
+          oc-spring(opacity, $mass: 1, $stiffness: 100, $damping: 10, $samples: 8);
+      }
+    `);
+
+    expect(result.css).toContain('transition: transform');
+    expect(result.css).toContain('opacity');
+    expect(result.css).toContain('linear(');
+  });
+
+  it('emits transition lists for multiple properties with shared spring options', () => {
+    const result = compileSpring(`
+      .target {
+        transition: oc-spring((opacity, transform), 0.3s, snappy, $samples: 8);
+      }
+    `);
+
+    expect(result.css).toContain('transition: opacity 0.489s linear(');
+    expect(result.css).toContain(', transform 0.489s linear(');
+  });
+
+  it('emits transition lists with property-specific spring options', () => {
+    const result = compileSpring(`
+      .target {
+        transition: oc-spring((
+          opacity: (0.2s, snappy),
+          transform: (0.3s, snappy, 0.1),
+        ), $samples: 8);
+      }
+    `);
+
+    expect(result.css).toContain('transition: opacity');
+    expect(result.css).toContain(', transform');
+    expect(result.css).toContain('0.326s');
+  });
+
+  it('supports named property config maps for advanced options', () => {
+    const result = compileSpring(`
+      .target {
+        transition: oc-spring((
+          opacity: (duration: 0.2s, preset: snappy, delay: 50ms, samples: 8),
+          transform: (mass: 1, stiffness: 100, damping: 10, samples: 8),
+        ));
+      }
+    `);
+
+    expect(result.css).toContain('opacity');
+    expect(result.css).toContain('50ms');
+    expect(result.css).toContain('transform');
+    expect(result.css).toContain('linear(');
+  });
+
+  it('rejects unknown property config keys', () => {
+    expect(() =>
+      compileSpring(`
+        .target {
+          transition: oc-spring((opacity: (duration: 0.2s, easing: snappy)));
+        }
+      `),
+    ).toThrow('Unknown oc-spring property config key: easing.');
+  });
+
+  it('rejects overlong property config tuples', () => {
+    expect(() =>
+      compileSpring(`
+        .target {
+          transition: oc-spring((opacity: (0.2s, snappy, 0.1, 50ms, 8, extra)));
+        }
+      `),
+    ).toThrow('oc-spring property config tuple accepts up to 5 values');
+  });
+
+  it('exposes timing and duration escape hatches', () => {
+    const result = compileSpring(`
+      .target {
+        transition-duration: oc-spring-settle-duration(0.5s, snappy);
+        transition-timing-function: oc-spring-timing(0.5s, snappy, $samples: 8);
+        --scale: #{oc-spring-duration-scale(0.5s, snappy)};
+      }
+    `);
+
+    expect(result.css).toContain('transition-duration: 0.815s;');
+    expect(result.css).toContain('transition-timing-function: linear(');
+    expect(result.css).toContain('--scale: 1.63;');
+  });
+});

package/src/scss/mixins/_typo.scss

@@ -0,0 +1,67 @@
+@use 'sass:list';
+@use 'sass:map';
+@use './breakpoint' as *;
+@use './utils' as *;
+
+@mixin typo($variant, $weight: normal) {
+  font-size: calc(var(--oc-typo-size-#{$variant}) * var(--oc-typo-scale, 1));
+  line-height: calc(var(--oc-typo-height-#{$variant}) * var(--oc-typo-scale, 1));
+  letter-spacing: var(--oc-typo-spacing-#{$variant});
+
+  @if $weight == normal {
+    font-weight: var(--oc-typo-weight-#{$variant}-normal);
+  } @else if $weight == bold {
+    font-weight: var(--oc-typo-weight-#{$variant}-bold);
+  } @else if $weight == medium {
+    font-weight: var(--oc-typo-weight-#{$variant}-medium);
+  }
+}
+
+@mixin typo-responsive($var-name, $config) {
+  @if map.has-key($config, default) {
+    --oc-#{$var-name}: #{toRem(map.get($config, default))};
+  }
+
+  @each $key, $value in $config {
+    @if $key != default {
+      $from: list.nth($value, 1);
+      $to: list.nth($value, 2);
+      $basis: list.nth($value, 3);
+      $anchor: to;
+
+      @if list.length($value) >= 4 {
+        $anchor: list.nth($value, 4);
+      }
+
+      $clamp: fluidClamp(toRem($from), $basis, $anchor, toRem($to));
+
+      @if $key == sm {
+        @include respond-to(sm) {
+          --oc-#{$var-name}: #{$clamp};
+        }
+      } @else if $key == md {
+        @include respond-to(md) {
+          --oc-#{$var-name}: #{$clamp};
+        }
+      } @else if $key == min-md {
+        @include respond-to(min, md) {
+          --oc-#{$var-name}: #{$clamp};
+        }
+      } @else if $key == lg {
+        @include respond-to(lg) {
+          --oc-#{$var-name}: #{$clamp};
+        }
+      } @else if $key == xl {
+        @include respond-to(xl) {
+          --oc-#{$var-name}: #{$clamp};
+        }
+      } @else if $key == hg {
+        @include respond-to(hg) {
+          --oc-#{$var-name}: #{$clamp};
+        }
+      } @else {
+        @warn "typo-responsive: '#{$key}' 는 지원하지 않는 breakpoint 키. 허용: sm, md, min-md, lg, xl, hg, default";
+      }
+    }
+  }
+}

package/src/scss/mixins/_typo.test.ts

@@ -0,0 +1,28 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('typo-responsive mixin', () => {
+  it('adds the oc prefix automatically', () => {
+    const result = compileString(
+      `
+      @use 'typo' as *;
+      @use 'breakpoint' as *;
+
+      :root {
+        @include typo-responsive(typo-size-heading2, (
+          default: 20,
+          md: (20, 20, 375),
+          min-md: (20, 22, $breakpoint-lg),
+        ));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('--oc-typo-size-heading2: 1.25rem;');
+    expect(result.css).toContain('@media screen and (max-width: 768px)');
+    expect(result.css).toContain('@media screen and (min-width: 769px)');
+  });
+});

package/src/scss/mixins/_utils.scss

@@ -0,0 +1,26 @@
+@use 'sass:math';
+
+$rem-unit: 16;
+
+@function toRem($px) {
+  @return math.div($px, $rem-unit) * 1rem;
+}
+
+@function stripUnit($value) {
+  @if math.is-unitless($value) {
+    @return $value;
+  }
+  @return math.div($value, ($value * 0 + 1));
+}
+
+@function fluidClamp($from, $bp, $anchor: to, $to) {
+  $basis: $to;
+  @if $anchor == from {
+    $basis: $from;
+  }
+  $basis-num: stripUnit($basis);
+  $bp-num: stripUnit($bp);
+  $basis-px: $basis-num * $rem-unit;
+
+  @return clamp(#{$from}, calc(#{$basis-px} / #{$bp-num} * 100vw), #{$to});
+}

package/src/scss/spring.scss

@@ -0,0 +1 @@
+@forward './mixins/spring';