@orioncactuscorp/ui 1.2.0 → 1.4.0

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

@@ -22,51 +22,51 @@ describe('motion utilities', () => {
     `);
 
     expect(result.css).toContain(
-      'background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
+      'background-color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
     );
     expect(result.css).toContain(
-      'color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
+      'color calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
     );
     expect(result.css).toContain(
-      'box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
+      'box-shadow calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-quick) * 1) var(--oc-motion-timing-feedback)',
     );
   });
 
-  it('keeps numeric duration scale separate from pace', () => {
+  it('keeps numeric duration factor separate from pace', () => {
     const result = compileMotion(`
       .target {
-        transition: oc-motion(opacity, feedback, $pace: slow, $duration-scale: 0.9);
+        transition: oc-motion(opacity, feedback, $pace: slow, $duration-factor: 0.9);
       }
     `);
 
     expect(result.css).toContain(
-      'opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-slow) * 0.9) var(--oc-motion-timing-feedback)',
+      'opacity calc(var(--oc-motion-duration-feedback) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-slow) * 0.9) var(--oc-motion-timing-feedback)',
     );
   });
 
-  it('scales transform amplitude through motion scale tokens', () => {
+  it('scales transform amplitude through motion scale factor tokens', () => {
     const result = compileMotion(`
       .feedback {
         transform: scale(oc-motion-scale(0.95, feedback));
       }
 
-      .reveal {
-        transform: scale(oc-motion-scale(var(--local-scale), reveal));
+      .surface {
+        transform: scale(oc-motion-scale(var(--local-scale), surface));
       }
     `);
 
     expect(result.css).toContain(
-      'transform: scale(max(0, 1 + (0.95 - 1) * var(--oc-motion-scale-feedback)))',
+      'transform: scale(max(0, 1 + (0.95 - 1) * var(--oc-motion-scale-factor-feedback)))',
     );
     expect(result.css).toContain(
-      'transform: scale(max(0, 1 + (var(--local-scale) - 1) * var(--oc-motion-scale-reveal)))',
+      'transform: scale(max(0, 1 + (var(--local-scale) - 1) * var(--oc-motion-scale-factor-spatial)))',
     );
   });
 
-  it('scales transform distance through motion distance tokens', () => {
+  it('scales transform distance through motion distance factor tokens', () => {
     const result = compileMotion(`
-      .reveal {
-        transform: translateY(oc-motion-distance(-1rem, reveal));
+      .sheet {
+        transform: translateY(oc-motion-distance(-1rem, sheet));
       }
 
       .reject {
@@ -75,10 +75,10 @@ describe('motion utilities', () => {
     `);
 
     expect(result.css).toContain(
-      'transform: translateY(calc(-1rem * var(--oc-motion-distance-scale-reveal)))',
+      'transform: translateY(calc(-1rem * var(--oc-motion-distance-factor-spatial)))',
     );
     expect(result.css).toContain(
-      'transform: translateX(calc(var(--local-distance) * var(--oc-motion-distance-scale-reject)))',
+      'transform: translateX(calc(var(--local-distance) * var(--oc-motion-distance-factor-reject)))',
     );
   });
 
@@ -90,31 +90,80 @@ describe('motion utilities', () => {
     `);
 
     expect(result.css).toContain(
-      'opacity calc(var(--local-feedback-time) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)',
+      'opacity calc(var(--local-feedback-time) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-feedback)',
     );
     expect(result.css).toContain(
-      'transition-duration: calc(var(--local-feedback-time) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * 1);',
+      'transition-duration: calc(var(--local-feedback-time) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);',
     );
     expect(result.css).toContain(
       'transition-timing-function: var(--oc-motion-timing-feedback);',
     );
   });
 
-  it('uses smooth opacity and snappy transform for reveal motion', () => {
+  it('uses smooth opacity and snappy transform for disclosure motion', () => {
     const result = compileMotion(`
       .target {
-        transition: oc-motion((opacity, transform), reveal);
+        transition: oc-motion((opacity, transform), disclosure);
       }
     `);
 
     expect(result.css).toContain(
-      'transition: opacity calc(0.561s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      'transition: opacity calc(0.374s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
     expect(result.css).toContain(
-      ', transform calc(0.58s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      ', transform calc(0.382s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
   });
 
+  it('uses role-specific profiles for disclosure, surface, sheet, and expand motion', () => {
+    const result = compileMotion(`
+      .disclosure {
+        transition: oc-motion((opacity, transform), disclosure, $phase: enter);
+      }
+
+      .surface {
+        transition: oc-motion(transform, surface, $phase: enter);
+      }
+
+      .sheet {
+        transition: oc-motion(transform, sheet, $phase: release);
+      }
+
+      .expand {
+        transition: oc-motion(opacity, expand, $phase: exit);
+      }
+    `);
+
+    expect(result.css).toContain(
+      '.disclosure {\n  transition: opacity calc(0.374s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      ', transform calc(0.382s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      '.surface {\n  transition: transform calc(0.486s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      '.sheet {\n  transition: transform calc(0.617s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      '.expand {\n  transition: opacity calc(0.449s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+  });
+
+  it('keeps disclosure exit on the token accelerate easing path', () => {
+    const result = compileMotion(`
+      .exit {
+        transition: oc-motion((opacity, transform), disclosure, $phase: exit);
+      }
+    `);
+
+    expect(result.css).toContain(
+      '.exit {\n  transition: opacity calc(var(--oc-motion-duration-disclosure-exit) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-disclosure-exit), transform calc(var(--oc-motion-duration-disclosure-exit) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-disclosure-exit);',
+    );
+    expect(result.css).not.toContain('linear(');
+  });
+
   it('uses spring timing for reject feedback motion', () => {
     const result = compileMotion(`
       .target {
@@ -128,86 +177,98 @@ describe('motion utilities', () => {
 
     expect(result.css).toContain('.target {\n  transition: transform calc(');
     expect(result.css).toContain(
-      ' * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      ' * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
     expect(result.css).toContain(
-      '.exit {\n  transition: transform calc(var(--oc-motion-duration-reject) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-reject);',
+      '.exit {\n  transition: transform calc(var(--oc-motion-duration-reject) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-reject);',
     );
   });
 
-  it('uses snappy spring timing for feedback settle motion', () => {
+  it('uses snappy spring timing for gesture release motion', () => {
     const result = compileMotion(`
       .target {
-        transition: oc-motion(transform, feedback, $phase: settle);
+        transition: oc-motion(transform, gesture, $phase: release);
       }
     `);
 
+    expect(result.css).toContain('.target {\n  transition: transform calc(');
     expect(result.css).toContain(
-      'transform calc(0.326s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      ' * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).not.toContain(
+      'var(--oc-motion-duration-gesture-release)',
     );
-    expect(result.css).not.toContain('var(--oc-motion-duration-feedback)');
   });
 
-  it('keeps gesture settle on the token easing path', () => {
+  it('applies runtime duration factor and pace tokens to spring-backed motion duration', () => {
     const result = compileMotion(`
       .target {
-        transition: oc-motion(transform, gesture, $phase: settle);
+        transition: oc-motion(transform, surface, $pace: slow, $duration-factor: 0.9);
       }
     `);
 
     expect(result.css).toContain(
-      'transform calc(var(--oc-motion-duration-gesture-settle) * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-gesture-settle)',
+      'transform calc(0.486s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-slow) * 0.9) linear(',
     );
-    expect(result.css).not.toContain('linear(');
   });
 
-  it('applies runtime duration scale and pace tokens to spring-backed motion duration', () => {
+  it('uses smooth spring for surface exit motion', () => {
     const result = compileMotion(`
       .target {
-        transition: oc-motion(transform, reveal, $pace: slow, $duration-scale: 0.9);
+        transition: oc-motion((opacity, transform), surface, $phase: exit);
       }
     `);
 
     expect(result.css).toContain(
-      'transform calc(0.58s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-slow) * 0.9) linear(',
+      'opacity calc(0.449s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
+    );
+    expect(result.css).toContain(
+      ', transform calc(0.449s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
   });
 
-  it('uses smooth spring for reveal exit motion', () => {
+  it('allows spring-backed motion to override extra bounce', () => {
     const result = compileMotion(`
-      .target {
-        transition: oc-motion((opacity, transform), reveal, $phase: exit);
+      .default {
+        transition: oc-motion(transform, disclosure, $phase: enter);
+      }
+
+      .low {
+        transition: oc-motion(transform, disclosure, $phase: enter, $extra-bounce: 0);
+      }
+
+      .high {
+        transition: oc-motion(transform, disclosure, $phase: enter, $extra-bounce: 0.18);
       }
     `);
 
     expect(result.css).toContain(
-      'opacity calc(0.233s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
-    );
-    expect(result.css).toContain(
-      ', transform calc(0.233s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      '.default {\n  transition: transform calc(0.382s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
+    expect(result.css).toContain('.low {\n  transition: transform calc(');
+    expect(result.css).toContain('.high {\n  transition: transform calc(');
   });
 
   it('emits reduced motion policy from the mixin', () => {
     const result = compileMotion(`
       .target {
-        @include oc-motion((opacity, transform), reveal);
+        @include oc-motion((opacity, transform), surface);
       }
     `);
 
     expect(result.css).toContain(
-      'transition: opacity calc(0.561s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      'transition: opacity calc(0.486s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
     expect(result.css).toContain(
-      ', transform calc(0.58s * var(--oc-motion-duration-scale) * var(--oc-motion-pace-normal) * 1) linear(',
+      ', transform calc(0.486s * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) linear(',
     );
     expect(result.css).toContain('@media (prefers-reduced-motion: reduce)');
     expect(result.css).toContain('transition-property: opacity;');
     expect(result.css).toContain(
-      'transition-duration: calc(var(--oc-motion-duration-reveal) * var(--oc-motion-duration-scale-reduced) * var(--oc-motion-pace-normal) * 1);',
+      'transition-duration: calc(var(--oc-motion-duration-surface) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);',
     );
     expect(result.css).toContain(
-      'transition-timing-function: var(--oc-motion-timing-reveal);',
+      'transition-timing-function: var(--oc-motion-timing-surface);',
     );
     expect(result.css).toContain('transform: none;');
   });
@@ -224,7 +285,7 @@ describe('motion utilities', () => {
     );
 
     expect(reducedCss).toContain(
-      'transition-duration: calc(var(--oc-motion-duration-move) * var(--oc-motion-duration-scale-preserve) * var(--oc-motion-pace-normal) * 1);',
+      'transition-duration: calc(var(--oc-motion-duration-move) * var(--oc-motion-duration-factor-preserve) * var(--oc-motion-pace-normal) * 1);',
     );
     expect(reducedCss).toContain(
       'transition-timing-function: var(--oc-motion-timing-move);',
@@ -268,14 +329,14 @@ describe('motion utilities', () => {
     ).toThrow('Unknown oc-motion pace: 0.85. Use quick, normal, or slow.');
   });
 
-  it('rejects negative duration scale values', () => {
+  it('rejects negative duration factor values', () => {
     expect(() =>
       compileMotion(`
         .target {
-          transition: oc-motion(opacity, feedback, $duration-scale: -0.1);
+          transition: oc-motion(opacity, feedback, $duration-factor: -0.1);
         }
       `),
-    ).toThrow('oc-motion $duration-scale must be greater than or equal to 0.');
+    ).toThrow('oc-motion $duration-factor must be greater than or equal to 0.');
   });
 
   it('rejects unit scale values', () => {
@@ -302,11 +363,11 @@ describe('motion utilities', () => {
     expect(() =>
       compileMotion(`
         .target {
-          transition: oc-motion(opacity, reveal, $phase: leave);
+          transition: oc-motion(opacity, disclosure, $phase: leave);
         }
       `),
     ).toThrow(
-      'Unknown oc-motion phase: leave. Use change, enter, exit, settle, or loop.',
+      'Unknown oc-motion phase: leave. Use change, enter, exit, release, or loop.',
     );
   });
 
@@ -314,7 +375,7 @@ describe('motion utilities', () => {
     expect(() =>
       compileMotion(`
         .target {
-          transition: oc-motion(opacity, reveal, $duration-token: var(--local-reveal-time));
+          transition: oc-motion(opacity, surface, $duration-token: var(--local-surface-time));
         }
       `),
     ).toThrow(
@@ -322,6 +383,28 @@ describe('motion utilities', () => {
     );
   });
 
+  it('rejects extra bounce overrides for non-spring motion', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transition: oc-motion(opacity, feedback, $extra-bounce: 0.1);
+        }
+      `),
+    ).toThrow(
+      'oc-motion $extra-bounce is only supported for spring-backed motion.',
+    );
+  });
+
+  it('rejects unit extra bounce values', () => {
+    expect(() =>
+      compileMotion(`
+        .target {
+          transition: oc-motion(transform, surface, $extra-bounce: 10%);
+        }
+      `),
+    ).toThrow('oc-motion $extra-bounce must be a unitless number.');
+  });
+
   it('rejects unknown reduced policies', () => {
     expect(() =>
       compileMotion(`

package/src/scss/mixins/_radius.scss

@@ -0,0 +1,3 @@
+@function oc-radius($radius, $factor-token: var(--oc-atomic-radius-factor)) {
+  @return max(0px, calc(#{$radius} * #{$factor-token}));
+}

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

@@ -0,0 +1,52 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('radius utilities', () => {
+  const compileRadius = (scss: string) =>
+    compileString(
+      `
+      @use 'mixins/radius' as *;
+
+      ${scss}
+      `,
+      {
+        loadPaths: ['src/scss'],
+      },
+    );
+
+  it('applies the atomic radius factor to length values', () => {
+    const result = compileRadius(`
+      .target {
+        border-radius: oc-radius(0.5rem);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'border-radius: max(0px, 0.5rem * var(--oc-atomic-radius-factor));',
+    );
+  });
+
+  it('keeps em radius values relative while applying the radius factor', () => {
+    const result = compileRadius(`
+      .target {
+        --local-radius: #{oc-radius(0.4em)};
+      }
+    `);
+
+    expect(result.css).toContain(
+      '--local-radius: max(0px, 0.4em * var(--oc-atomic-radius-factor));',
+    );
+  });
+
+  it('accepts a custom factor token', () => {
+    const result = compileRadius(`
+      .target {
+        border-radius: oc-radius(12px, var(--local-radius-factor));
+      }
+    `);
+
+    expect(result.css).toContain(
+      'border-radius: max(0px, 12px * var(--local-radius-factor));',
+    );
+  });
+});

package/src/scss/mixins/_typo.scss

@@ -4,8 +4,8 @@
 @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));
+  font-size: calc(var(--oc-typo-size-#{$variant}) * var(--oc-typo-size-factor, 1));
+  line-height: calc(var(--oc-typo-height-#{$variant}) * var(--oc-typo-size-factor, 1));
   letter-spacing: var(--oc-typo-spacing-#{$variant});
 
   @if $weight == normal {