@orioncactuscorp/ui 1.1.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.1.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';

package/src/scss/mixins/_element.scss

@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
 @use './motion' as *;
 
 @mixin element-button {
@@ -25,28 +28,85 @@
   user-select: none;
 }
 
-@mixin inset-stroke($width, $color: currentcolor) {
+@function _oc-border-is-half-px($width) {
+  @if meta.type-of($width) != 'number' or math.unit($width) != 'px' {
+    @return false;
+  }
+
+  $pixels: math.div($width, 1px);
+
+  @return $pixels == math.floor($pixels) + 0.5;
+}
+
+@function _oc-border-webkit-base-spread($width) {
+  $pixels: math.floor(math.div($width, 1px));
+
+  @if $pixels < 1 {
+    @return 1px;
+  }
+
+  @return $pixels * 1px;
+}
+
+@function _oc-border-webkit-device-spread($width, $dppx) {
+  $pixels: math.div($width, 1px);
+  $device-pixels: math.ceil($pixels * $dppx);
+  $spread: math.div($device-pixels, $dppx);
+  $precision: math.pow(10, 4);
+
+  @return math.div(math.floor($spread * $precision), $precision) * 1px;
+}
+
+@function _oc-border-args($args) {
+  $count: list.length($args);
+
+  @if $count == 0 {
+    @return (1px, currentColor);
+  }
+
+  @if $count == 1 {
+    $value: list.nth($args, 1);
+
+    @if meta.type-of($value) == 'number' {
+      @return ($value, currentColor);
+    }
+
+    @return (1px, $value);
+  }
+
+  @if $count == 2 {
+    @return (list.nth($args, 1), list.nth($args, 2));
+  }
+
+  @error 'oc-border accepts zero, one, or two arguments.';
+}
+
+@mixin oc-border($args...) {
+  $resolved: _oc-border-args($args);
+  $width: list.nth($resolved, 1);
+  $color: list.nth($resolved, 2);
+
   box-shadow: inset 0 0 0 $width $color;
 
-  @if $width == 1.5px {
-    /* stylelint-disable block-no-redundant-nested-style-rules -- WebKit rounds 1.5px inset strokes differently by DPR; nested selectors keep the correction scoped. */
+  @if _oc-border-is-half-px($width) {
+    /* stylelint-disable block-no-redundant-nested-style-rules, media-feature-range-notation -- WebKit rounds fractional inset strokes differently by DPR; nested selectors keep the correction scoped. */
     @supports (-webkit-backdrop-filter: none) {
       & {
-        box-shadow: inset 0 0 0 1px $color;
+        box-shadow: inset 0 0 0 _oc-border-webkit-base-spread($width) $color;
       }
 
       @media only screen and (resolution: 2dppx) {
         & {
-          box-shadow: inset 0 0 0 1.5px $color;
+          box-shadow: inset 0 0 0 _oc-border-webkit-device-spread($width, 2) $color;
         }
       }
 
       @media only screen and (resolution: 3dppx) {
         & {
-          box-shadow: inset 0 0 0 1.6666px $color;
+          box-shadow: inset 0 0 0 _oc-border-webkit-device-spread($width, 3) $color;
         }
       }
     }
-    /* stylelint-enable block-no-redundant-nested-style-rules */
+    /* stylelint-enable block-no-redundant-nested-style-rules, media-feature-range-notation */
   }
 }

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

@@ -1,14 +1,48 @@
 import { compileString } from 'sass';
 import { describe, expect, it } from 'vitest';
 
-describe('inset-stroke mixin', () => {
-  it('emits a direct inset stroke for integer widths', () => {
+describe('oc-border mixin', () => {
+  it('emits a 1px currentColor inset border by default', () => {
     const result = compileString(
       `
       @use 'element' as *;
 
       .target {
-        @include inset-stroke(2px, var(--stroke));
+        @include oc-border;
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1px currentColor;');
+  });
+
+  it('treats a single non-number argument as the border color', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(black);
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1px black;');
+  });
+
+  it('emits a direct inset border for integer widths', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(2px, var(--stroke));
       }
       `,
       {
@@ -20,13 +54,13 @@ describe('inset-stroke mixin', () => {
     expect(result.css).not.toContain('@supports');
   });
 
-  it('adds WebKit DPR correction for 1.5px strokes', () => {
+  it('adds WebKit DPR correction for 1.5px borders', () => {
     const result = compileString(
       `
       @use 'element' as *;
 
       .target {
-        @include inset-stroke(1.5px);
+        @include oc-border(1.5px);
       }
       `,
       {
@@ -34,11 +68,64 @@ describe('inset-stroke mixin', () => {
       },
     );
 
-    expect(result.css).toContain('box-shadow: inset 0 0 0 1.5px currentcolor;');
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1.5px currentColor;');
     expect(result.css).toContain('@supports (-webkit-backdrop-filter: none)');
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1px currentColor;');
+    expect(result.css).toContain('@media only screen and (resolution: 2dppx)');
     expect(result.css).toContain('@media only screen and (resolution: 3dppx)');
     expect(result.css).toContain(
-      'box-shadow: inset 0 0 0 1.6666px currentcolor;',
+      'box-shadow: inset 0 0 0 1.6666px currentColor;',
     );
   });
+
+  it('generalizes WebKit DPR correction for half-pixel borders', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .two {
+        @include oc-border(2.5px, var(--stroke));
+      }
+
+      .three {
+        @include oc-border(3.5px, var(--stroke));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: inset 0 0 0 2px var(--stroke);');
+    expect(result.css).toContain(
+      'box-shadow: inset 0 0 0 2.5px var(--stroke);',
+    );
+    expect(result.css).toContain(
+      'box-shadow: inset 0 0 0 2.6666px var(--stroke);',
+    );
+    expect(result.css).toContain('box-shadow: inset 0 0 0 3px var(--stroke);');
+    expect(result.css).toContain(
+      'box-shadow: inset 0 0 0 3.5px var(--stroke);',
+    );
+    expect(result.css).toContain(
+      'box-shadow: inset 0 0 0 3.6666px var(--stroke);',
+    );
+  });
+
+  it('does not expose the removed inset-stroke mixin', () => {
+    expect(() =>
+      compileString(
+        `
+        @use 'element' as *;
+
+        .target {
+          @include inset-stroke(1px);
+        }
+        `,
+        {
+          loadPaths: ['src/scss/mixins'],
+        },
+      ),
+    ).toThrow('Undefined mixin');
+  });
 });