@orioncactuscorp/ui 1.7.0 → 1.9.0

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

@@ -2,7 +2,7 @@ import { compileString } from 'sass';
 import { describe, expect, it } from 'vitest';
 
 describe('oc-border mixin', () => {
-  it('emits a 1px currentColor inset border by default', () => {
+  it('emits a 1px currentcolor inset border by default', () => {
     const result = compileString(
       `
       @use 'element' as *;
@@ -16,7 +16,7 @@ describe('oc-border mixin', () => {
       },
     );
 
-    expect(result.css).toContain('box-shadow: inset 0 0 0 1px currentColor;');
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1px currentcolor;');
   });
 
   it('treats a single non-number argument as the border color', () => {
@@ -54,6 +54,76 @@ describe('oc-border mixin', () => {
     expect(result.css).not.toContain('@supports');
   });
 
+  it('accepts CSS-like space-separated border shorthand', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(1px solid top outer var(--stroke));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: 0 -1px 0 0 var(--stroke);');
+  });
+
+  it('accepts solid as a no-op style token for border shorthand familiarity', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(1px solid black);
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1px black;');
+  });
+
+  it('emits multiple side shadows in shorthand order', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(1px top right var(--stroke));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain(
+      'box-shadow: inset 0 1px 0 0 var(--stroke), inset -1px 0 0 0 var(--stroke);',
+    );
+  });
+
+  it('keeps comma-separated width and color calls compatible', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(1px, var(--stroke));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: inset 0 0 0 1px var(--stroke);');
+  });
+
   it('adds WebKit DPR correction for 1.5px borders', () => {
     const result = compileString(
       `
@@ -68,14 +138,33 @@ describe('oc-border 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('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('applies WebKit DPR correction to directional outer borders', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include oc-border(1.5px bottom outer var(--stroke));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
     );
+
+    expect(result.css).toContain('box-shadow: 0 1.5px 0 0 var(--stroke);');
+    expect(result.css).toContain('box-shadow: 0 1px 0 0 var(--stroke);');
+    expect(result.css).toContain('box-shadow: 0 1.6666px 0 0 var(--stroke);');
   });
 
   it('generalizes WebKit DPR correction for half-pixel borders', () => {

package/src/scss/mixins/_icon.scss

@@ -0,0 +1,27 @@
+// Sizes an SvgIcon slot from the inherited line box.
+// block-size(높이)만 line box 기준으로 잡고 inline-size는 auto라, SVG viewBox 비율대로
+// 너비가 따라온다. 강제 1:1이 아니라 종횡비 보존.
+// - $inset: line box에서 뺄 breathing room (raw em). 컴포넌트가 $inset-var CSS 변수로
+//   size별 override 가능하고, mixin 인자는 그 변수의 default다.
+// - $fallback: `1lh` 미지원(pre-2023) 브라우저 전용. 생략 시 line height를 1.5em로
+//   가정해 `1.5em - inset*2`로 자동 근사한다. 새 컴포넌트는 신경 쓸 필요 없다.
+@mixin oc-icon-box($size-var, $inset-var, $inset: 0.1875em, $fallback: null) {
+  $inset-expr: var(#{$inset-var}, #{$inset});
+  $fallback-size: $fallback;
+
+  @if $fallback == null {
+    $fallback-size: calc(1.5em - (#{$inset-expr} * 2));
+  }
+
+  inline-size: auto;
+
+  // BEGIN 1lh fallback layer — `1lh`이 완전 baseline이 되면 이 base 선언과 @supports
+  // 래퍼를 지우고 @supports 안의 block-size 한 줄만 이 자리로 올리면 된다. call site 무영향.
+  block-size: var(#{$size-var}, #{$fallback-size});
+  @supports (block-size: 1lh) {
+    // stylelint-disable-next-line no-invalid-position-declaration -- mixin body는 항상 selector 안에서 @include된다
+    block-size: var(#{$size-var}, calc(1lh - (#{$inset-expr} * 2)));
+  }
+
+  // END 1lh fallback layer — 위 base 선언 + @supports 래퍼만 삭제.
+}