@uplatform/brand 0.1.1 → 0.1.2

package/README.md

@@ -52,11 +52,32 @@ Files for places that cannot run code: `@uplatform/brand/media/motion/<id>-{reve
 the outline pattern `patterns/u-outline.svg` (one color — tint it with CSS `mask`), and the iyulab wordmark
 `marks/iyulab-wordmark.svg` / `-reverse.svg` (keep it at least 100 px wide).
 
+## TypeScript
+
+Importing the package adds both tags to `HTMLElementTagNameMap`, so `document.querySelector('u-mark')` and
+`document.createElement('uplatform-affiliation')` are typed as `UMark` and `UplatformAffiliation`. The attribute values
+are exported as `UMarkAttributes` and `UplatformAffiliationAttributes` — reuse them when you declare the elements for
+your framework (for example React's `JSX.IntrinsicElements`):
+
+```ts
+import type { UMarkAttributes } from '@uplatform/brand'
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'u-mark': React.HTMLAttributes<HTMLElement> & UMarkAttributes
+    }
+  }
+}
+```
+
 ## Placement rules
 
 - Put it in the footer, or in your menu's information area. Where exactly is your product's call.
 - Keep the mark at least 16 px and leave clear space around it equal to the mark's stroke weight.
-- To match your background, set `--uplatform-fg` and `--uplatform-bg` on the element.
+- To match your background, set `--uplatform-fg` and `--uplatform-bg` on the element. Without them the product
+  list sits on white (light) or `#14161A` (dark) — the grounds the product colors are tuned for (at least 5.5:1 on
+  white, 6.9:1 on `#14161A`). Keep a background of your own near those; don't put the marks on mid gray.
 - For layout only (placement, spacing, sizing), the shadow parts are exposed: `::part(link)`, `::part(toggle)`
   and `::part(list)`. Colors and type stay with the element — nothing else is themable on purpose.
 - It makes no network requests and sets no cookies; the product list is built into the package, so it

package/dist/affiliation.d.ts

@@ -1,3 +1,4 @@
+type Theme = 'light' | 'dark';
 export declare class UplatformAffiliation extends HTMLElement {
     #private;
     static observedAttributes: string[];
@@ -6,3 +7,18 @@ export declare class UplatformAffiliation extends HTMLElement {
     attributeChangedCallback(): void;
 }
 export declare function defineAffiliation(registry?: CustomElementRegistry): void;
+/** `<uplatform-affiliation>` 의 속성 값 — 프레임워크별 엘리먼트 선언(JSX 등)이 다시 쓴다. */
+export interface UplatformAffiliationAttributes {
+    /** 이 화면의 제품 id — 목록에서 빠진다. 모르는 id 면 아무것도 빼지 않는다. */
+    product?: string;
+    /** 언어 태그. 주 태그가 `en` 이면(`en` · `en-US` …) 영어, 그 밖은 한국어. */
+    lang?: string;
+    /** 없으면 OS 설정을 따른다. */
+    theme?: Theme;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uplatform-affiliation': UplatformAffiliation;
+    }
+}
+export {};

package/dist/affiliation.js

@@ -2,6 +2,7 @@
 // 제품 UI 안에 놓이지만 그 UI 와 스타일이 서로 새지 않는다. 호스트는 --uplatform-fg · --uplatform-bg 로 대비만 맞춘다.
 import { products, umbrella, HUB } from './products.js';
 import { MARKS } from './generated/marks.js';
+import { GROUND } from './ground.js';
 const TEXT = {
     ko: { toggle: 'U-Platform 제품', solutions: '업무 시스템', system: '시스템 통합', cross: '독립 제품' },
     en: { toggle: 'U-Platform products', solutions: 'Business systems', system: 'System integration', cross: 'Standalone products' },
@@ -19,9 +20,9 @@ svg { width: 1.25rem; height: 1.25rem; flex: none; }
 button { font: inherit; color: inherit; background: none; border: 0; padding: 0.15rem 0.3rem; cursor: pointer; border-radius: 0.25rem; }
 a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
 [part="list"] { position: absolute; inset-inline-start: 0; inset-block-end: calc(100% + 0.4rem); min-width: 14rem;
-  background: var(--uplatform-bg, #fff); border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+  background: var(--uplatform-bg, ${GROUND.light}); border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
   border-radius: 0.5rem; padding: 0.5rem; z-index: 10; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
-:host([data-resolved-theme="dark"]) [part="list"] { background: var(--uplatform-bg, #1c1f24); }
+:host([data-resolved-theme="dark"]) [part="list"] { background: var(--uplatform-bg, ${GROUND.dark}); }
 [part="list"][hidden] { display: none; }
 [role="group"] + [role="group"] { margin-top: 0.5rem; }
 .label { font-size: 0.75em; opacity: 0.7; margin: 0 0 0.25rem; }

package/dist/ground.d.ts

@@ -0,0 +1,10 @@
+/** 키트 «사용 규칙»: 밝은 바탕은 흰색, 어두운 바탕은 `#14161A`(아이콘 바탕 `#1F2937` 은 앱 아이콘 전용). */
+export declare const GROUND: {
+    readonly light: '#FFFFFF';
+    readonly dark: '#14161A';
+};
+/** 키트 «체계 · 제품 색»: 흰 바탕 5.5:1 이상, 어두운 바탕 6.9:1 이상(WCAG 2.2 대비비). */
+export declare const MARK_CONTRAST_FLOOR: {
+    readonly light: 5.5;
+    readonly dark: 6.9;
+};

package/dist/ground.js

@@ -0,0 +1,5 @@
+// 마크를 놓는 바탕과 제품 색의 대비 하한 — 키트 README 의 규칙을 옮겨 적은 값이다(키트 토큰에 아직 없다).
+/** 키트 «사용 규칙»: 밝은 바탕은 흰색, 어두운 바탕은 `#14161A`(아이콘 바탕 `#1F2937` 은 앱 아이콘 전용). */
+export const GROUND = { light: '#FFFFFF', dark: '#14161A' };
+/** 키트 «체계 · 제품 색»: 흰 바탕 5.5:1 이상, 어두운 바탕 6.9:1 이상(WCAG 2.2 대비비). */
+export const MARK_CONTRAST_FLOOR = { light: 5.5, dark: 6.9 };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { products, umbrella, productHref, HUB, type Product } from './products.ts';
-export { UplatformAffiliation, defineAffiliation } from './affiliation.ts';
-export { UMark, defineMark } from './mark.ts';
+export { UplatformAffiliation, defineAffiliation, type UplatformAffiliationAttributes } from './affiliation.ts';
+export { UMark, defineMark, type UMarkAttributes } from './mark.ts';

package/dist/mark.d.ts

@@ -1,3 +1,4 @@
+type Theme = 'light' | 'dark';
 export declare class UMark extends HTMLElement {
     #private;
     static observedAttributes: string[];
@@ -6,3 +7,20 @@ export declare class UMark extends HTMLElement {
     attributeChangedCallback(name: string): void;
 }
 export declare function defineMark(registry?: CustomElementRegistry): void;
+/** `<u-mark>` 의 속성 값 — 프레임워크별 엘리먼트 선언(JSX 등)이 다시 쓴다. 모르는 제품이면 아무것도 그리지 않는다. */
+export interface UMarkAttributes {
+    /** 제품 id(`u-cmms` …). 없으면 `u-platform`. */
+    product?: string;
+    /** `reveal` = 한 번 그려 보인다 · `chase` = 로딩 동안 돈다 · 그 밖(없음 · `none`) = 완성된 마크. 움직임 줄이기에서는 늘 완성된 마크. */
+    motion?: 'none' | 'reveal' | 'chase';
+    /** 없으면 OS 설정을 따른다. */
+    theme?: Theme;
+    /** `visible` 이면 `reveal` 을 화면에 절반 이상 보일 때 시작한다. */
+    play?: 'visible';
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-mark': UMark;
+    }
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uplatform/brand",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "U-Platform affiliation kit — product list, marks, the <uplatform-affiliation> and <u-mark> elements, mark renders and patterns.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",