@orioncactuscorp/ui 1.2.0 → 1.3.0

package/dist/vscode/oc-ui-vars.css

@@ -4,6 +4,7 @@
 :root {
   --oc-atomic-blur-compact: initial;
   --oc-atomic-blur-normal: initial;
+  --oc-atomic-radius-factor: initial;
   --oc-atomic-radius-huge: initial;
   --oc-atomic-radius-large: initial;
   --oc-atomic-radius-max: initial;
@@ -291,34 +292,48 @@
   --oc-color-theme-status-cautionary: initial;
   --oc-color-theme-status-negative: initial;
   --oc-color-theme-status-positive: initial;
-  --oc-motion-distance-scale: initial;
-  --oc-motion-distance-scale-reject: initial;
-  --oc-motion-distance-scale-reveal: initial;
+  --oc-motion-distance-factor: initial;
+  --oc-motion-distance-factor-reject: initial;
+  --oc-motion-distance-factor-spatial: initial;
   --oc-motion-duration-ambient: initial;
+  --oc-motion-duration-disclosure: initial;
+  --oc-motion-duration-disclosure-exit: initial;
+  --oc-motion-duration-expand: initial;
+  --oc-motion-duration-expand-exit: initial;
+  --oc-motion-duration-factor: initial;
+  --oc-motion-duration-factor-preserve: initial;
+  --oc-motion-duration-factor-reduced: initial;
   --oc-motion-duration-feedback: initial;
   --oc-motion-duration-gesture: initial;
-  --oc-motion-duration-gesture-settle: initial;
+  --oc-motion-duration-gesture-release: initial;
   --oc-motion-duration-move: initial;
   --oc-motion-duration-reject: initial;
-  --oc-motion-duration-reveal: initial;
-  --oc-motion-duration-reveal-exit: initial;
-  --oc-motion-duration-scale: initial;
-  --oc-motion-duration-scale-preserve: initial;
-  --oc-motion-duration-scale-reduced: initial;
+  --oc-motion-duration-sheet: initial;
+  --oc-motion-duration-sheet-exit: initial;
+  --oc-motion-duration-sheet-release: initial;
+  --oc-motion-duration-surface: initial;
+  --oc-motion-duration-surface-exit: initial;
   --oc-motion-pace-normal: initial;
   --oc-motion-pace-quick: initial;
   --oc-motion-pace-slow: initial;
-  --oc-motion-scale: initial;
-  --oc-motion-scale-feedback: initial;
-  --oc-motion-scale-reveal: initial;
+  --oc-motion-scale-factor: initial;
+  --oc-motion-scale-factor-feedback: initial;
+  --oc-motion-scale-factor-spatial: initial;
   --oc-motion-timing-ambient: initial;
+  --oc-motion-timing-disclosure: initial;
+  --oc-motion-timing-disclosure-exit: initial;
+  --oc-motion-timing-expand: initial;
+  --oc-motion-timing-expand-exit: initial;
   --oc-motion-timing-feedback: initial;
   --oc-motion-timing-gesture: initial;
-  --oc-motion-timing-gesture-settle: initial;
+  --oc-motion-timing-gesture-release: initial;
   --oc-motion-timing-move: initial;
   --oc-motion-timing-reject: initial;
-  --oc-motion-timing-reveal: initial;
-  --oc-motion-timing-reveal-exit: initial;
+  --oc-motion-timing-sheet: initial;
+  --oc-motion-timing-sheet-exit: initial;
+  --oc-motion-timing-sheet-release: initial;
+  --oc-motion-timing-surface: initial;
+  --oc-motion-timing-surface-exit: initial;
   --oc-space-item-gap-huge: initial;
   --oc-space-item-gap-large: initial;
   --oc-space-item-gap-medium: initial;
@@ -373,7 +388,6 @@
   --oc-typo-height-title1: initial;
   --oc-typo-height-title2: initial;
   --oc-typo-height-title3: initial;
-  --oc-typo-scale: initial;
   --oc-typo-size-body1: initial;
   --oc-typo-size-body1reading: initial;
   --oc-typo-size-body2: initial;
@@ -382,6 +396,7 @@
   --oc-typo-size-display1: initial;
   --oc-typo-size-display2: initial;
   --oc-typo-size-display3: initial;
+  --oc-typo-size-factor: initial;
   --oc-typo-size-heading1: initial;
   --oc-typo-size-heading2: initial;
   --oc-typo-size-headline1: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioncactuscorp/ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "orioncactus UI foundations and core primitives",
   "private": false,
   "type": "module",
@@ -119,7 +119,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@orioncactuscorp/icons": "^1.0.0",
+    "@orioncactuscorp/icons": "^1.3.0",
     "@base-ui-components/react": "^1.0.0-rc.0"
   }
 }

package/src/scss/foundations/atomic.scss

@@ -1,18 +1,20 @@
 @use '../mixins/breakpoint' as *;
 @use '../mixins/color' as *;
+@use '../mixins/radius' as *;
 @use '../mixins/utils' as *;
 
 :root {
-  --oc-atomic-radius-max: 10000px;
-  --oc-atomic-radius-huge: #{fluidClamp(toRem(24), $breakpoint-md, from, toRem(64))};
-  --oc-atomic-radius-xlarge: #{fluidClamp(toRem(12), $breakpoint-md, from, toRem(32))};
-  --oc-atomic-radius-large: #{fluidClamp(toRem(12), $breakpoint-md, from, toRem(24))};
-  --oc-atomic-radius-medium: #{fluidClamp(toRem(12), $breakpoint-md, from, toRem(16))};
-  --oc-atomic-radius-small: #{fluidClamp(toRem(10), $breakpoint-md, from, toRem(12))};
-  --oc-atomic-radius-xsmall: #{fluidClamp(toRem(8), $breakpoint-md, from, toRem(10))};
-  --oc-atomic-radius-mini: #{fluidClamp(toRem(6), $breakpoint-md, from, toRem(8))};
-  --oc-atomic-radius-tiny: #{fluidClamp(toRem(4), $breakpoint-md, from, toRem(6))};
-  --oc-atomic-radius-micro: #{toRem(4)};
+  --oc-atomic-radius-factor: 1;
+  --oc-atomic-radius-max: #{oc-radius(10000px)};
+  --oc-atomic-radius-huge: #{oc-radius(fluidClamp(toRem(24), $breakpoint-md, from, toRem(64)))};
+  --oc-atomic-radius-xlarge: #{oc-radius(fluidClamp(toRem(12), $breakpoint-md, from, toRem(32)))};
+  --oc-atomic-radius-large: #{oc-radius(fluidClamp(toRem(12), $breakpoint-md, from, toRem(24)))};
+  --oc-atomic-radius-medium: #{oc-radius(fluidClamp(toRem(12), $breakpoint-md, from, toRem(16)))};
+  --oc-atomic-radius-small: #{oc-radius(fluidClamp(toRem(10), $breakpoint-md, from, toRem(12)))};
+  --oc-atomic-radius-xsmall: #{oc-radius(fluidClamp(toRem(8), $breakpoint-md, from, toRem(10)))};
+  --oc-atomic-radius-mini: #{oc-radius(fluidClamp(toRem(6), $breakpoint-md, from, toRem(8)))};
+  --oc-atomic-radius-tiny: #{oc-radius(fluidClamp(toRem(4), $breakpoint-md, from, toRem(6)))};
+  --oc-atomic-radius-micro: #{oc-radius(toRem(4))};
 
   --oc-atomic-width-content: 35em;
   --oc-atomic-width-section-large: 60rem;

package/src/scss/foundations/atomic.test.ts

@@ -0,0 +1,34 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('atomic foundation', () => {
+  const compileAtomic = () =>
+    compileString("@use 'foundations/atomic' as *;", {
+      loadPaths: ['src/scss'],
+    });
+
+  it('exposes a global atomic radius factor', () => {
+    const result = compileAtomic();
+
+    expect(result.css).toContain('--oc-atomic-radius-factor: 1;');
+  });
+
+  it('applies the radius factor to max and fixed radius tokens', () => {
+    const result = compileAtomic();
+
+    expect(result.css).toContain(
+      '--oc-atomic-radius-max: max(0px, 10000px * var(--oc-atomic-radius-factor));',
+    );
+    expect(result.css).toContain(
+      '--oc-atomic-radius-micro: max(0px, 0.25rem * var(--oc-atomic-radius-factor));',
+    );
+  });
+
+  it('applies the radius factor to fluid radius tokens', () => {
+    const result = compileAtomic();
+
+    expect(result.css).toContain(
+      '--oc-atomic-radius-medium: max(0px, clamp(0.75rem, 12 / 768 * 100vw, 1rem) * var(--oc-atomic-radius-factor));',
+    );
+  });
+});

package/src/scss/foundations/motion.scss

@@ -1,15 +1,15 @@
 @use '../spring' as *;
 
 :root {
-  --oc-motion-duration-scale: 1;
-  --oc-motion-duration-scale-reduced: 0.75;
-  --oc-motion-duration-scale-preserve: 1;
-  --oc-motion-scale: 1;
-  --oc-motion-scale-feedback: var(--oc-motion-scale);
-  --oc-motion-scale-reveal: var(--oc-motion-scale);
-  --oc-motion-distance-scale: 1;
-  --oc-motion-distance-scale-reject: var(--oc-motion-distance-scale);
-  --oc-motion-distance-scale-reveal: var(--oc-motion-distance-scale);
+  --oc-motion-duration-factor: 1;
+  --oc-motion-duration-factor-reduced: 0.75;
+  --oc-motion-duration-factor-preserve: 1;
+  --oc-motion-scale-factor: 1;
+  --oc-motion-scale-factor-feedback: var(--oc-motion-scale-factor);
+  --oc-motion-scale-factor-spatial: var(--oc-motion-scale-factor);
+  --oc-motion-distance-factor: 1;
+  --oc-motion-distance-factor-reject: var(--oc-motion-distance-factor);
+  --oc-motion-distance-factor-spatial: var(--oc-motion-distance-factor);
 
   /* Pace tokens are unitless duration multipliers. */
   --oc-motion-pace-quick: 0.75;
@@ -17,19 +17,33 @@
   --oc-motion-pace-slow: 1.35;
   --oc-motion-duration-feedback: 0.2s;
   --oc-motion-duration-reject: #{oc-spring-settle-duration(0.32s, smooth)};
-  --oc-motion-duration-reveal: 0.3s;
-  --oc-motion-duration-reveal-exit: 0.125s;
+  --oc-motion-duration-disclosure: 0.2s;
+  --oc-motion-duration-disclosure-exit: 0.14s;
+  --oc-motion-duration-surface: 0.26s;
+  --oc-motion-duration-surface-exit: 0.24s;
+  --oc-motion-duration-sheet: 0.26s;
+  --oc-motion-duration-sheet-exit: 0.33s;
+  --oc-motion-duration-sheet-release: 0.33s;
+  --oc-motion-duration-expand: 0.3s;
+  --oc-motion-duration-expand-exit: 0.24s;
   --oc-motion-duration-move: 0.3s;
   --oc-motion-duration-gesture: 0.2s;
-  --oc-motion-duration-gesture-settle: 0.52s;
+  --oc-motion-duration-gesture-release: 0.52s;
   --oc-motion-duration-ambient: 1.2s;
   --oc-motion-timing-feedback: ease;
   --oc-motion-timing-reject: #{oc-spring-timing(0.32s, smooth, $samples: 64)};
-  --oc-motion-timing-reveal: ease;
-  --oc-motion-timing-reveal-exit: ease-in;
+  --oc-motion-timing-disclosure: ease;
+  --oc-motion-timing-disclosure-exit: cubic-bezier(0.8, 0, 1, 1);
+  --oc-motion-timing-surface: ease;
+  --oc-motion-timing-surface-exit: ease-in;
+  --oc-motion-timing-sheet: ease;
+  --oc-motion-timing-sheet-exit: ease-in;
+  --oc-motion-timing-sheet-release: ease;
+  --oc-motion-timing-expand: ease;
+  --oc-motion-timing-expand-exit: ease-in;
   --oc-motion-timing-move: cubic-bezier(0.32, 0.72, 0, 1);
   --oc-motion-timing-gesture: ease;
-  --oc-motion-timing-gesture-settle: cubic-bezier(0.32, 0.72, 0, 1);
+  --oc-motion-timing-gesture-release: cubic-bezier(0.32, 0.72, 0, 1);
   --oc-motion-timing-ambient: linear;
   --oc-spring-smooth-timing: #{oc-spring-timing(0.5s, smooth, $samples: 64)};
   --oc-spring-smooth-duration-scale: #{oc-spring-duration-scale(0.5s, smooth)};
@@ -41,6 +55,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --oc-motion-duration-scale: var(--oc-motion-duration-scale-reduced);
+    --oc-motion-duration-factor: var(--oc-motion-duration-factor-reduced);
   }
 }

package/src/scss/foundations/typo.scss

@@ -364,7 +364,7 @@ $oc-typo-responsive-segments: (
  */
 :root {
   --oc-typo-font-family: #{$oc-typo-font-family};
-  --oc-typo-scale: 1;
+  --oc-typo-size-factor: 1;
 
   @include oc-emit-responsive-tokens('typo-size', $oc-typo-size-stops, $oc-typo-responsive-segments, $oc-responsive-typo-stops, '$oc-responsive-typo-stops');
   @include oc-emit-responsive-tokens('typo-height', $oc-typo-height-stops, $oc-typo-responsive-segments, $oc-responsive-typo-stops, '$oc-responsive-typo-stops');

package/src/scss/index.scss

@@ -14,5 +14,6 @@
 @forward './mixins/color';
 @forward './mixins/typo';
 @forward './mixins/element';
+@forward './mixins/radius';
 @forward './mixins/motion';
 @forward './spring';