@orioncactuscorp/ui 1.13.0 → 1.15.0

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

@@ -0,0 +1,111 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+function compile(source: string) {
+  return compileString(
+    `
+      @use 'gradient' as *;
+
+      ${source}
+    `,
+    {
+      loadPaths: ['src/scss/mixins'],
+      style: 'compressed',
+    },
+  ).css;
+}
+
+describe('gradient helpers', () => {
+  it.each(['top', 'right', 'bottom', 'left'] as const)(
+    'creates a smooth easing gradient toward %s',
+    direction => {
+      const css = compile(`
+        .sample {
+          background-image: oc-easing-gradient(${direction}, red, transparent);
+        }
+      `);
+
+      expect(css).toContain(`linear-gradient(to ${direction}, red 0%`);
+      expect(css).toContain(
+        'color-mix(in srgb, red 95.703125%, transparent) calc(0% + (100% - 0%) * 0.125)',
+      );
+      expect(css).toContain(
+        'color-mix(in srgb, red 50%, transparent) calc(0% + (100% - 0%) * 0.5)',
+      );
+      expect(css).toContain('transparent 100%');
+    },
+  );
+
+  it('applies a two-sided mask with variable fade and content sizes', () => {
+    const css = compile(`
+      .sample {
+        @include oc-gradient-mask(
+          right,
+          var(--example-start-fade-size),
+          var(--example-end-fade-size),
+          var(--example-content-size)
+        );
+      }
+    `);
+
+    expect(css).toContain('-webkit-mask-image:linear-gradient(to right');
+    expect(css).toContain('mask-image:linear-gradient(to right');
+    expect(css).toContain('transparent 0px');
+    expect(css).toContain('black var(--example-start-fade-size)');
+    expect(css).toContain(
+      'black calc(var(--example-content-size) - var(--example-end-fade-size))',
+    );
+    expect(css).toContain('transparent var(--example-content-size)');
+  });
+
+  it('keeps zero-length fades valid with the default mask sizes', () => {
+    const css = compile(`
+      .sample {
+        @include oc-gradient-mask(bottom);
+      }
+    `);
+
+    expect(css).toContain('linear-gradient(to bottom, transparent 0px');
+    expect(css).toContain('black 0px');
+    expect(css).toContain('black calc(100% - 0px)');
+    expect(css).toContain('transparent 100%');
+  });
+
+  it('intersects block and inline masks for four independently sized edges', () => {
+    const css = compile(`
+      .sample {
+        @include oc-gradient-mask-edges(
+          var(--example-top-fade-size),
+          var(--example-right-fade-size),
+          var(--example-bottom-fade-size),
+          var(--example-left-fade-size),
+          var(--example-inline-content-size),
+          var(--example-block-content-size)
+        );
+      }
+    `);
+
+    expect(css).toContain('-webkit-mask-composite:source-in');
+    expect(css).toContain('mask-composite:intersect');
+    expect(css).toContain('-webkit-mask-image:linear-gradient(to bottom');
+    expect(css).toContain('),linear-gradient(to right');
+    expect(css).toContain('black var(--example-top-fade-size)');
+    expect(css).toContain('black var(--example-left-fade-size)');
+    expect(css).toContain(
+      'calc(var(--example-block-content-size) - var(--example-bottom-fade-size))',
+    );
+    expect(css).toContain(
+      'calc(var(--example-inline-content-size) - var(--example-right-fade-size))',
+    );
+  });
+
+  it('rejects unsupported directions', () => {
+    expect(() =>
+      compile(`
+        .sample {
+          background-image: oc-easing-gradient(inline-start, red, blue);
+        }
+      `),
+    ).toThrow('Unknown gradient direction: inline-start');
+  });
+});

package/src/scss/mixins/_responsive.scss

@@ -4,6 +4,7 @@
 @use 'sass:meta';
 @use '../foundations/responsive.config' as *;
 @use './breakpoint' as *;
+@use './fluid' as *;
 @use './utils' as *;
 
 $oc-responsive-stop-order: (min, sm, md, lg, xl, hg);
@@ -155,7 +156,7 @@ $oc-responsive-point-order: (min-sm, min-md, min-lg, min-xl, min-hg);
   }
 
   @if $oc-responsive-mode == fluid {
-    @return fluidClamp($from, $basis, $anchor, $to);
+    @return oc-fluid($from, $to, $basis, $anchor);
   }
 
   @error "Unknown responsive mode '#{$oc-responsive-mode}'.";

package/src/scss/mixins/_typo.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use './breakpoint' as *;
+@use './fluid' as *;
 @use './utils' as *;
 
 @mixin typo($variant, $weight: normal) {
@@ -33,7 +34,7 @@
         $anchor: list.nth($value, 4);
       }
 
-      $clamp: fluidClamp(toRem($from), $basis, $anchor, toRem($to));
+      $clamp: oc-fluid(toRem($from), toRem($to), $basis, $anchor);
 
       @if $key == sm {
         @include respond-to(sm) {

package/src/scss/mixins/_units.scss

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

package/src/scss/mixins/_utils.scss

@@ -1,26 +1,7 @@
-@use 'sass:math';
+@use './fluid' as *;
 
-$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));
-}
+@forward './units';
 
 @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});
+  @return oc-fluid($from, $to, $bp, $anchor);
 }