@orioncactuscorp/ui 1.0.0

package/src/scss/foundations/typo.scss

@@ -0,0 +1,381 @@
+@use 'sass:map';
+@use './responsive.config' as *;
+@use '../mixins/breakpoint' as *;
+@use '../mixins/responsive' as *;
+
+$oc-typo-font-family: system-ui, sans-serif !default;
+$oc-typo-size-overrides: () !default;
+$oc-typo-height-overrides: () !default;
+$oc-typo-default-size-stops: (
+  display1: (
+    sm: 48,
+    lg: 64,
+  ),
+  display2: (
+    sm: 40,
+    lg: 48,
+  ),
+  display3: (
+    sm: 36,
+    lg: 40,
+  ),
+  title1: (
+    sm: 32,
+    lg: 36,
+  ),
+  title2: (
+    sm: 28,
+    lg: 32,
+  ),
+  title3: (
+    sm: 24,
+    lg: 28,
+  ),
+  heading1: (
+    sm: 22,
+    lg: 24,
+    xl: 26,
+  ),
+  heading2: (
+    sm: 20,
+    lg: 22,
+    xl: 24,
+  ),
+  headline1: (
+    sm: 18,
+    lg: 20,
+    xl: 22,
+  ),
+  headline2: (
+    sm: 17,
+    lg: 18,
+    xl: 20,
+  ),
+  body1: (
+    sm: 16,
+    md: 17,
+    lg: 18,
+    xl: 20,
+  ),
+  body1reading: (
+    sm: 16,
+    md: 17,
+    lg: 18,
+    xl: 20,
+  ),
+  body2: (
+    sm: 15,
+    md: 16,
+    lg: 17,
+    xl: 18,
+  ),
+  body2reading: (
+    sm: 15,
+    md: 16,
+    lg: 17,
+    xl: 18,
+  ),
+  label1: (
+    sm: 14,
+    md: 15,
+    lg: 16,
+    xl: 17,
+  ),
+  label1reading: (
+    sm: 14,
+    md: 15,
+    lg: 16,
+    xl: 17,
+  ),
+  label2: (
+    sm: 13,
+    md: 14,
+    lg: 15,
+    xl: 16,
+  ),
+  caption1: (
+    sm: 12,
+    md: 13,
+    lg: 14,
+    xl: 15,
+  ),
+  caption2: (
+    sm: 11,
+    md: 12,
+    lg: 13,
+    xl: 14,
+  ),
+);
+$oc-typo-default-height-stops: (
+  display1: (
+    sm: 62,
+    lg: 82,
+  ),
+  display2: (
+    sm: 52,
+    lg: 62,
+  ),
+  display3: (
+    sm: 48,
+    lg: 52,
+  ),
+  title1: (
+    sm: 44,
+    lg: 48,
+  ),
+  title2: (
+    sm: 38,
+    lg: 42,
+  ),
+  title3: (
+    sm: 32,
+    lg: 36,
+  ),
+  heading1: (
+    sm: 30,
+    lg: 32,
+    xl: 34,
+  ),
+  heading2: (
+    sm: 28,
+    lg: 30,
+    xl: 32,
+  ),
+  headline1: (
+    sm: 26,
+    lg: 28,
+    xl: 30,
+  ),
+  headline2: (
+    sm: 24,
+    lg: 26,
+    xl: 28,
+  ),
+  body1: (
+    sm: 24,
+    md: 26,
+    lg: 28,
+    xl: 30,
+  ),
+  body1reading: (
+    sm: 26,
+    md: 28,
+    lg: 30,
+    xl: 32,
+  ),
+  body2: (
+    sm: 22,
+    md: 24,
+    lg: 26,
+    xl: 28,
+  ),
+  body2reading: (
+    sm: 24,
+    md: 26,
+    lg: 28,
+    xl: 30,
+  ),
+  label1: (
+    sm: 20,
+    md: 22,
+    lg: 24,
+    xl: 26,
+  ),
+  label1reading: (
+    sm: 22,
+    md: 24,
+    lg: 26,
+    xl: 28,
+  ),
+  label2: (
+    sm: 18,
+    md: 20,
+    lg: 22,
+    xl: 24,
+  ),
+  caption1: (
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22,
+  ),
+  caption2: (
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+  ),
+);
+$oc-typo-spacing: (
+  display1: 0em,
+  display2: 0em,
+  display3: 0em,
+  title1: 0em,
+  title2: 0em,
+  title3: 0em,
+  heading1: 0em,
+  heading2: 0em,
+  headline1: 0em,
+  headline2: 0em,
+  body1: 0em,
+  body1reading: 0em,
+  body2: 0em,
+  body2reading: 0em,
+  label1: 0.01em,
+  label1reading: 0.01em,
+  label2: 0.01em,
+  caption1: 0.01em,
+  caption2: 0.01em,
+);
+$oc-typo-weight: (
+  display1: (
+    normal: 400,
+    medium: 500,
+    bold: 700,
+  ),
+  display2: (
+    normal: 400,
+    medium: 500,
+    bold: 700,
+  ),
+  display3: (
+    normal: 400,
+    medium: 500,
+    bold: 700,
+  ),
+  title1: (
+    normal: 400,
+    medium: 500,
+    bold: 700,
+  ),
+  title2: (
+    normal: 400,
+    medium: 500,
+    bold: 700,
+  ),
+  title3: (
+    normal: 400,
+    medium: 500,
+    bold: 700,
+  ),
+  heading1: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  heading2: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  headline1: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  headline2: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  body1: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  body1reading: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  body2: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  body2reading: (
+    normal: 400,
+    medium: 500,
+    bold: 600,
+  ),
+  label1: (
+    normal: 400,
+    medium: 500,
+    bold: 550,
+  ),
+  label1reading: (
+    normal: 400,
+    medium: 500,
+    bold: 550,
+  ),
+  label2: (
+    normal: 400,
+    medium: 500,
+    bold: 550,
+  ),
+  caption1: (
+    normal: 400,
+    medium: 500,
+    bold: 540,
+  ),
+  caption2: (
+    normal: 400,
+    medium: 500,
+    bold: 530,
+  ),
+);
+$oc-typo-size-stops: map.deep-merge($oc-typo-default-size-stops, $oc-typo-size-overrides);
+$oc-typo-height-stops: map.deep-merge($oc-typo-default-height-stops, $oc-typo-height-overrides);
+$oc-typo-md-tokens: (body1, body1reading, body2, body2reading, label1, label1reading, label2, caption1, caption2);
+$oc-typo-xl-tokens: (heading1, heading2, headline1, headline2, body1, body1reading, body2, body2reading, label1, label1reading, label2, caption1, caption2);
+$oc-typo-responsive-segments: (
+  default: (
+    stop: sm,
+  ),
+  max-md: (
+    media: md,
+    from: sm,
+    to: md,
+    basis: 375,
+    only: $oc-typo-md-tokens,
+  ),
+  min-md: (
+    media: (
+      min,
+      md,
+    ),
+    from: md,
+    to: lg,
+    basis: $breakpoint-lg,
+  ),
+  min-lg: (
+    media: lg,
+    from: lg,
+    to: xl,
+    basis: $breakpoint-xl,
+    only: $oc-typo-xl-tokens,
+  ),
+);
+
+/**
+ * fluidClamp basis 375px = iPhone standard viewport (iOS HIG body 17pt 호환).
+ * iOS 네이티브 앱이 375+ 환경에서 body 17pt를 쓰는 것과 웹의 16px default 간극을
+ * vw=375에서 17px 도달로 맞춰 시각적 이질감을 해소한다.
+ */
+:root {
+  --oc-typo-font-family: #{$oc-typo-font-family};
+  --oc-typo-scale: 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');
+
+  @each $variant, $spacing in $oc-typo-spacing {
+    --oc-typo-spacing-#{$variant}: #{$spacing};
+  }
+
+  @each $variant, $weights in $oc-typo-weight {
+    --oc-typo-weight-#{$variant}-normal: #{map.get($weights, normal)};
+    --oc-typo-weight-#{$variant}-medium: #{map.get($weights, medium)};
+    --oc-typo-weight-#{$variant}-bold: #{map.get($weights, bold)};
+  }
+}

package/src/scss/foundations/zindex.scss

@@ -0,0 +1,12 @@
+:root {
+  --oc-zindex-0: -1;
+  --oc-zindex-1: 0;
+  --oc-zindex-2: 10;
+  --oc-zindex-3: 1000;
+
+  // Modal uses this as an auto-stacked band for backdrop/content pairs.
+  --oc-zindex-4: 1400;
+
+  // Reserve for floating layers that must appear above Modal, such as Tooltip and Toast.
+  --oc-zindex-5: 1800;
+}

package/src/scss/index.scss

@@ -0,0 +1,18 @@
+@forward './foundations/color.global';
+@forward './foundations/color.theme.light';
+@forward './foundations/color.theme.dark';
+@forward './foundations/breakpoint';
+@forward './foundations/typo';
+@forward './foundations/space';
+@forward './foundations/atomic';
+@forward './foundations/motion';
+@forward './foundations/zindex';
+@forward './foundations/reset';
+@forward './mixins/breakpoint';
+@forward './mixins/utils';
+@forward './mixins/responsive';
+@forward './mixins/color';
+@forward './mixins/typo';
+@forward './mixins/element';
+@forward './mixins/motion';
+@forward './spring';

package/src/scss/mixins/_breakpoint.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+
+$breakpoint-sm: 480px !default;
+$breakpoint-md: 768px !default;
+$breakpoint-lg: 1280px !default;
+$breakpoint-xl: 1600px !default;
+$breakpoint-hg: 1920px !default;
+
+$breakpoints: (
+  sm: $breakpoint-sm,
+  md: $breakpoint-md,
+  lg: $breakpoint-lg,
+  xl: $breakpoint-xl,
+  hg: $breakpoint-hg,
+);
+
+@function _normalize-breakpoint($value) {
+  @if map.has-key($breakpoints, $value) {
+    @return (value: map.get($breakpoints, $value), is-map: true);
+  } @else if meta.type-of($value) == 'number' {
+    $length: $value;
+    @if math.is-unitless($value) {
+      $length: $value * 1px;
+    }
+
+    @return (value: $length, is-map: false);
+  }
+
+  @return null;
+}
+
+@function _bp-value($normalized) {
+  @return map.get($normalized, value);
+}
+
+@function _bp-is-map($normalized) {
+  @return map.get($normalized, is-map);
+}
+
+@mixin respond-to($bp1, $bp2: null) {
+  $normalized-bp1: _normalize-breakpoint($bp1);
+
+  @if $bp2 == null {
+    @if $bp1 == sm or $bp1 == md {
+      @media screen and (max-width: map.get($breakpoints, $bp1)) {
+        @content;
+      }
+    } @else if map.has-key($breakpoints, $bp1) {
+      @media screen and (min-width: calc(map.get($breakpoints, $bp1) + 1px)) {
+        @content;
+      }
+    } @else if $normalized-bp1 != null {
+      @media screen and (min-width: _bp-value($normalized-bp1)) {
+        @content;
+      }
+    } @else {
+      @warn "respond-to(): '#{$bp1}' 는 사용 가능한 값이 아닙니다.";
+    }
+  } @else {
+    $normalized-bp2: _normalize-breakpoint($bp2);
+
+    @if ($bp1 == 'min' or $bp1 == 'max') and $normalized-bp2 != null {
+      @if $bp1 == 'min' {
+        $min-value: _bp-value($normalized-bp2);
+        $min-width: $min-value;
+        @if _bp-is-map($normalized-bp2) {
+          $min-width: calc($min-value + 1px);
+        }
+
+        @media screen and (min-width: $min-width) {
+          @content;
+        }
+      } @else if $bp1 == 'max' {
+        @media screen and (max-width: _bp-value($normalized-bp2)) {
+          @content;
+        }
+      }
+    } @else if $normalized-bp1 != null and $normalized-bp2 != null {
+      $min-normalized: $normalized-bp1;
+      $max-normalized: $normalized-bp2;
+      $min-value: _bp-value($min-normalized);
+      $max-value: _bp-value($max-normalized);
+
+      @if $min-value > $max-value {
+        $min-normalized: $normalized-bp2;
+        $max-normalized: $normalized-bp1;
+        $min-value: _bp-value($min-normalized);
+        $max-value: _bp-value($max-normalized);
+      }
+
+      $min-width: $min-value;
+      @if _bp-is-map($min-normalized) {
+        $min-width: calc($min-value + 1px);
+      }
+
+      @media screen and (min-width: $min-width) and (max-width: $max-value) {
+        @content;
+      }
+    } @else {
+      @warn "respond-to(): 인자 '#{$bp1}', '#{$bp2}' 가 잘못되었거나 사용 가능한 값이 아닙니다.";
+    }
+  }
+}
+
+@mixin inject-breakpoint-vars {
+  :root {
+    --oc-breakpoint-sm: #{$breakpoint-sm};
+    --oc-breakpoint-md: #{$breakpoint-md};
+    --oc-breakpoint-lg: #{$breakpoint-lg};
+    --oc-breakpoint-xl: #{$breakpoint-xl};
+    --oc-breakpoint-hg: #{$breakpoint-hg};
+  }
+}

package/src/scss/mixins/_color.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+@function oc-alpha-value($opacity) {
+  @if meta.type-of($opacity) == 'number' and math.is-unitless($opacity) and $opacity >= 0 and $opacity <= 1 {
+    @return $opacity;
+  }
+
+  @return string.unquote('var(--oc-color-global-opacity-#{$opacity})');
+}
+
+@function oc-color-value($color) {
+  @if meta.type-of($color) == 'color' {
+    @return $color;
+  }
+
+  $text: meta.inspect($color);
+
+  @if string.index($text, 'var(') == 1 {
+    @return $color;
+  }
+
+  @return string.unquote('var(--oc-color-global-#{$color})');
+}
+
+@function oc-alpha($color, $opacity) {
+  @return string.unquote('color-mix(in srgb, #{oc-color-value($color)}, transparent calc(100% - (100% * #{oc-alpha-value($opacity)})))');
+}

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

@@ -0,0 +1,35 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('oc-alpha function', () => {
+  it('resolves global color tokens, css variables, raw colors, and alpha values', () => {
+    const result = compileString(
+      `
+      @use 'color' as *;
+
+      :root {
+        --token-alpha: #{oc-alpha(coolNeutral-50, 88)};
+        --literal-alpha: #{oc-alpha(coolNeutral-50, 0.32)};
+        --var-color: #{oc-alpha(var(--custom-color), 5)};
+        --raw-color: #{oc-alpha(#171719, 0.12)};
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain(
+      '--token-alpha: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * var(--oc-color-global-opacity-88))));',
+    );
+    expect(result.css).toContain(
+      '--literal-alpha: color-mix(in srgb, var(--oc-color-global-coolNeutral-50), transparent calc(100% - (100% * 0.32)));',
+    );
+    expect(result.css).toContain(
+      '--var-color: color-mix(in srgb, var(--custom-color), transparent calc(100% - (100% * var(--oc-color-global-opacity-5))));',
+    );
+    expect(result.css).toContain(
+      '--raw-color: color-mix(in srgb, #171719, transparent calc(100% - (100% * 0.12)));',
+    );
+  });
+});

package/src/scss/mixins/_element.scss

@@ -0,0 +1,52 @@
+@use './motion' as *;
+
+@mixin element-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  will-change: transform;
+  @include oc-motion(transform, feedback);
+
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+@mixin prevent-drag {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@mixin inset-stroke($width, $color: currentcolor) {
+  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. */
+    @supports (-webkit-backdrop-filter: none) {
+      & {
+        box-shadow: inset 0 0 0 1px $color;
+      }
+
+      @media only screen and (resolution: 2dppx) {
+        & {
+          box-shadow: inset 0 0 0 1.5px $color;
+        }
+      }
+
+      @media only screen and (resolution: 3dppx) {
+        & {
+          box-shadow: inset 0 0 0 1.6666px $color;
+        }
+      }
+    }
+    /* stylelint-enable block-no-redundant-nested-style-rules */
+  }
+}

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

@@ -0,0 +1,44 @@
+import { compileString } from 'sass';
+import { describe, expect, it } from 'vitest';
+
+describe('inset-stroke mixin', () => {
+  it('emits a direct inset stroke for integer widths', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include inset-stroke(2px, var(--stroke));
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    expect(result.css).toContain('box-shadow: inset 0 0 0 2px var(--stroke);');
+    expect(result.css).not.toContain('@supports');
+  });
+
+  it('adds WebKit DPR correction for 1.5px strokes', () => {
+    const result = compileString(
+      `
+      @use 'element' as *;
+
+      .target {
+        @include inset-stroke(1.5px);
+      }
+      `,
+      {
+        loadPaths: ['src/scss/mixins'],
+      },
+    );
+
+    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('@media only screen and (resolution: 3dppx)');
+    expect(result.css).toContain(
+      'box-shadow: inset 0 0 0 1.6666px currentcolor;',
+    );
+  });
+});