@orioncactuscorp/ui 1.9.2 → 1.11.0

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

@@ -21,11 +21,13 @@
   --oc-atomic-shadow-normal-xlarge: initial;
   --oc-atomic-shadow-normal-xsmall: initial;
   --oc-atomic-shadow-spread-small: initial;
+  --oc-atomic-shadow-spread-xlarge: initial;
   --oc-atomic-width-content: initial;
   --oc-atomic-width-section-large: initial;
   --oc-atomic-width-section-medium: initial;
   --oc-atomic-width-section-small: initial;
   --oc-atomic-width-section-xsmall: initial;
+  --oc-breakpoint-hg: initial;
   --oc-breakpoint-lg: initial;
   --oc-breakpoint-md: initial;
   --oc-breakpoint-sm: initial;
@@ -142,6 +144,7 @@
   --oc-color-global-neutral-95: initial;
   --oc-color-global-neutral-99: initial;
   --oc-color-global-opacity-0: initial;
+  --oc-color-global-opacity-100: initial;
   --oc-color-global-opacity-12: initial;
   --oc-color-global-opacity-16: initial;
   --oc-color-global-opacity-22: initial;
@@ -266,6 +269,7 @@
   --oc-color-theme-fill-alternative: initial;
   --oc-color-theme-fill-normal: initial;
   --oc-color-theme-fill-strong: initial;
+  --oc-color-theme-focus-ring: initial;
   --oc-color-theme-interaction-disable: initial;
   --oc-color-theme-interaction-inactive: initial;
   --oc-color-theme-inverse-background: initial;
@@ -285,6 +289,7 @@
   --oc-color-theme-line-solid-neutral: initial;
   --oc-color-theme-line-solid-normal: initial;
   --oc-color-theme-line-solid-strong: initial;
+  --oc-color-theme-material-dimmer: initial;
   --oc-color-theme-primary-normal: initial;
   --oc-color-theme-static-black: initial;
   --oc-color-theme-static-transparent: initial;
@@ -292,6 +297,8 @@
   --oc-color-theme-status-cautionary: initial;
   --oc-color-theme-status-negative: initial;
   --oc-color-theme-status-positive: initial;
+  --oc-focus-ring-offset: initial;
+  --oc-focus-ring-width: initial;
   --oc-motion-distance-factor: initial;
   --oc-motion-distance-factor-reject: initial;
   --oc-motion-distance-factor-spatial: initial;
@@ -338,6 +345,7 @@
   --oc-motion-timing-sheet-release: initial;
   --oc-motion-timing-surface: initial;
   --oc-motion-timing-surface-exit: initial;
+  --oc-space-item-gap-atom: initial;
   --oc-space-item-gap-huge: initial;
   --oc-space-item-gap-large: initial;
   --oc-space-item-gap-medium: initial;
@@ -368,6 +376,7 @@
   --oc-space-section-padding-viewport-inline-safe-start: initial;
   --oc-space-section-padding-viewport-x: initial;
   --oc-space-section-padding-viewport-y: initial;
+  --oc-spring-bouncy-duration-scale: initial;
   --oc-spring-bouncy-timing: initial;
   --oc-spring-smooth-duration-scale: initial;
   --oc-spring-smooth-timing: initial;
@@ -379,6 +388,7 @@
   --oc-typo-height-body2: initial;
   --oc-typo-height-body2reading: initial;
   --oc-typo-height-caption1: initial;
+  --oc-typo-height-caption2: initial;
   --oc-typo-height-display1: initial;
   --oc-typo-height-display2: initial;
   --oc-typo-height-display3: initial;
@@ -397,6 +407,7 @@
   --oc-typo-size-body2: initial;
   --oc-typo-size-body2reading: initial;
   --oc-typo-size-caption1: initial;
+  --oc-typo-size-caption2: initial;
   --oc-typo-size-display1: initial;
   --oc-typo-size-display2: initial;
   --oc-typo-size-display3: initial;
@@ -445,6 +456,7 @@
   --oc-typo-weight-caption1-bold: initial;
   --oc-typo-weight-caption1-medium: initial;
   --oc-typo-weight-caption1-normal: initial;
+  --oc-typo-weight-caption2-bold: initial;
   --oc-typo-weight-caption2-medium: initial;
   --oc-typo-weight-caption2-normal: initial;
   --oc-typo-weight-display1-bold: initial;
@@ -491,4 +503,5 @@
   --oc-zindex-2: initial;
   --oc-zindex-3: initial;
   --oc-zindex-4: initial;
+  --oc-zindex-5: initial;
 }

package/docs/editor-setup.md

@@ -0,0 +1,42 @@
+# Editor Setup
+
+## VS Code CSS Variable Autocomplete
+
+package는 VS Code CSS variable autocomplete 확장이 읽을 수 있는 foundation token index를 함께 배포합니다.
+
+```text
+node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css
+```
+
+consumer repository에서 `phoenisx.cssvar` 확장을 사용할 경우 `.vscode/settings.json`에 아래 설정을 추가합니다.
+
+```json
+{
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "off",
+    "strings": "off"
+  },
+  "editor.suggestOnTriggerCharacters": true,
+  "editor.inlineSuggest.suppressSuggestions": false,
+  "cssvar.files": [
+    "./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css"
+  ],
+  "cssvar.ignore": [],
+  "cssvar.extensions": ["css", "scss", "sass", "js", "jsx", "ts", "tsx"]
+}
+```
+
+기존 `cssvar.files`가 있다면 덮어쓰지 말고 위 경로를 추가합니다. 단, oc-ui token 자동완성용으로 `@orioncactuscorp/ui/scss/foundations/*` source file을 fallback처럼 함께 추가하지 않습니다. `color.theme.light.scss`와 `color.theme.dark.scss`는 같은 `--oc-color-theme-*` semantic token 이름을 theme별 값으로 다시 선언하므로, raw source file을 같이 읽으면 completion 후보가 중복됩니다.
+
+`phoenisx.cssvar`의 기본 `cssvar.ignore`는 `**/node_modules/**`를 제외하므로, node_modules 안의 oc-ui index를 읽으려면 `cssvar.ignore`에서 해당 제외를 제거해야 합니다. 위 예시는 oc-ui index만 명시적으로 읽는 설정이므로 빈 배열을 사용합니다.
+
+`phoenisx.cssvar`는 빈 CSS value 위치에서 전체 token 목록을 먼저 띄우지 않습니다. `padding: --`처럼 CSS variable 이름을 직접 입력하거나 `padding: var(--`처럼 `var()` 안에서 `--`를 입력하면 oc-ui token completion이 표시됩니다.
+
+VS Code Insiders 또는 Copilot inline suggestion이 켜진 환경에서 token이 회색 inline suggestion으로만 보이고 completion popup이 열리지 않으면, 위 예시처럼 `editor.quickSuggestions`, `editor.suggestOnTriggerCharacters`, `editor.inlineSuggest.suppressSuggestions`를 함께 설정합니다.
+
+이 파일은 `foundations.css`에서 생성되므로 설치된 `@orioncactuscorp/ui` package 버전의 `--oc-*` foundation token과 자동완성 목록이 함께 움직입니다. 자동완성 전용 index이므로 runtime stylesheet로 import하지 않습니다.
+
+## oc-ui source repository에서의 설정
+
+oc-ui source repository에서도 `.vscode/settings.json`은 `packages/ui/dist/vscode/oc-ui-vars.css`를 읽습니다. 이 index는 `foundations.css`에서 token 이름만 dedupe해 생성한 자동완성 전용 파일입니다. source checkout에서는 extension의 default CSS scan이나 이전 cache가 compiled CSS를 다시 읽지 않도록 `packages/ui/dist/styles.css`, `packages/ui/dist/foundations.css`, `packages/ui/dist/foundations/**`, `packages/ui/src/scss/foundations/**`를 `cssvar.ignore`에 둡니다. source checkout에서 index 파일이 없다면 `bun run --cwd packages/ui build:css`를 먼저 실행합니다.