@pisodev/ui-common 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,217 @@
+# @library/common
+
+Shared library for common components, utilities, and design tokens across projects.
+
+## Overview
+
+This package provides:
+- **Design Tokens**: Color system generated from Figma design tokens
+- **Common Components**: Shared UI components (coming soon)
+- **Utilities**: Helper functions and types (coming soon)
+
+## Color System
+
+The color system automatically converts Figma design tokens into hex values for use in CSS and SCSS.
+
+### Features
+
+- **Figma to Code**: Export Figma tokens → Auto-generate hex values
+- **Three Token Types**: Scale, Semantic, and Static tokens
+- **Theme Support**: Built-in light/dark mode switching
+- **Type-Safe**: Full TypeScript support
+
+## Available Tokens
+
+**Scale Tokens** - Base color scales with light/dark mode variants
+```typescript
+grayScale, blue1Scale, blue2Scale, greenScale, purpleScale, yellowScale, redScale
+```
+
+**Alpha Tokens** - Transparent color variants
+```typescript
+grayAlpha, blue1Alpha, blue2Alpha, greenAlpha, purpleAlpha, yellowAlpha, redAlpha, whiteAlpha
+```
+
+**Semantic Tokens** - Purpose-based colors
+```typescript
+graySemantic, semanticPaper, semanticDivider, semanticOverlay, semanticBrand, semanticInformation
+```
+
+**Static Tokens** - Fixed colors across themes
+```typescript
+staticBlack, staticWhite, staticColor
+```
+
+## Quick Start
+
+### Using Colors in Your Project
+
+**CSS:**
+```css
+@import '@library/common/theme/colors.css';
+
+.button {
+  background: var(--blue1-400);
+  color: var(--gray-00);
+}
+```
+
+**SCSS:**
+```scss
+@import '@library/common/theme/colors';
+
+.button {
+  background: $blue1-400;
+  color: $gray-00;
+}
+```
+
+**TypeScript/JavaScript:**
+```typescript
+import { grayScale, semanticBrand } from '@library/common/theme/colors.data';
+
+const primaryColor = grayScale.light['400'];  // '#AAACAE'
+const brandColor = semanticBrand['gluwa-primary'];  // 'var(--blue1-400)'
+```
+
+---
+
+## Updating Colors
+
+When colors change in Figma:
+
+1. **Export** Figma tokens as JSON to `tokens/` directory
+2. **Extract** colors from tokens: `npm run build:extract-colors`
+3. **Build** CSS/SCSS files: `npm run build:colors`
+
+```bash
+npm run build:extract-colors  # Parse JSON → colors.data.ts
+npm run build:colors           # Generate CSS/SCSS
+```
+
+---
+
+## How It Works
+
+### From Figma to Hex Values
+
+The system converts Figma design tokens into hex color values:
+
+**1. Figma Tokens (JSON)**
+```json
+{
+  "scale-blue1": {
+    "400": {
+      "$value": { "hex": "#1473FF" }
+    }
+  }
+}
+```
+
+**2. Generated TypeScript**
+```typescript
+export const blue1Scale = {
+  light: { '400': '#1473FF' },
+  dark: { '400': '#1473FF' }
+}
+```
+
+**3. Generated CSS**
+```css
+:root {
+  --blue1-400: #1473FF;
+}
+```
+
+### Key Features
+
+**Alias References**
+Semantic and static tokens reference scale tokens instead of duplicating hex values:
+```typescript
+'gluwa-primary': 'var(--blue1-400)'  // ✅ References scale token
+```
+
+**Dynamic Generation**
+Adding new colors in Figma automatically includes them in the build:
+- No manual code updates needed
+- Rename-safe across all files
+
+**Sanitization**
+Parentheses in token names are converted to suffixes:
+- `"trugi-primary(legacy)"` → `"trugi-primary-legacy"`
+- Ensures valid CSS/SCSS variable names
+
+## File Structure
+
+```
+src/theme/
+├── extract-colors.ts      # Parses Figma JSON → colors.data.ts
+├── build-colors.ts        # Generates CSS/SCSS from colors.data.ts
+├── colors.data.ts         # TypeScript exports (auto-generated)
+├── colors.css             # CSS variables (auto-generated)
+└── _colors.scss           # SCSS variables (auto-generated)
+
+tokens/
+└── *.json                       # Figma design token JSON files
+```
+
+## Scripts
+
+Add to your `package.json`:
+```json
+{
+  "scripts": {
+    "extract:colors": "tsx src/theme/extract-colors.ts",
+    "build:colors": "npm run extract:colors && tsx src/theme/build-colors.ts"
+  }
+}
+```
+
+## Theme Switching
+
+The generated CSS supports multiple theme modes:
+
+**Auto (OS preference):**
+Automatically switches based on system preference (default behavior)
+
+**Force Light Mode:**
+```html
+<html class="light">
+```
+
+**Force Dark Mode:**
+```html
+<html class="dark">
+```
+
+## Extending the Color System
+
+### Add New Color Scale
+
+1. **In Figma:** Create new color group with `scale-{name}` prefix
+2. **In Code:** Add mapping to [extract-colors.ts](src/theme/extract-colors.ts):
+   ```typescript
+   const SCALE_EXPORT: Record<string, string> = {
+     // ...existing mappings
+     orange: 'orangeScale',
+   };
+   ```
+3. **Build:** Run `npm run build:colors`
+
+### Add New Semantic Token Group
+
+1. **In Figma:** Create new semantic group with `semantic-{name}` prefix
+2. **In Code:** Add mapping to [extract-colors.ts](src/theme/extract-colors.ts):
+   ```typescript
+   const SEMANTIC_GROUP_EXPORT: Record<string, string> = {
+     // ...existing mappings
+     text: 'semanticText',
+   };
+   ```
+3. **Build:** Run `npm run build:colors`
+
+---
+
+## License
+
+MIT

package/dist/theme/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAmBxB,CAAC"}

package/dist/theme/colors.data.d.ts

@@ -1,29 +1,557 @@
 export declare const grayScale: {
-    light: {
-        '00': string;
-        '50': string;
-        '100': string;
-        '200': string;
-        '300': string;
-        '400': string;
-        '500': string;
-        '600': string;
-        '700': string;
-        '800': string;
-        '900': string;
-    };
-    dark: {
-        '00': string;
-        '50': string;
-        '100': string;
-        '200': string;
-        '300': string;
-        '400': string;
-        '500': string;
-        '600': string;
-        '700': string;
-        '800': string;
-        '900': string;
+    readonly light: {
+        readonly '50': "#F6F8FA";
+        readonly '100': "#EEF0F2";
+        readonly '200': "#E6E8EA";
+        readonly '300': "#DADCDD";
+        readonly '400': "#CED0D2";
+        readonly '500': "#AAACAE";
+        readonly '600': "#86888A";
+        readonly '700': "#4C4E50";
+        readonly '800': "#2C2E30";
+        readonly '900': "#0C0E10";
+        readonly '00': "#FFFFFF";
+    };
+    readonly dark: {
+        readonly '50': "#1A1C1E";
+        readonly '100': "#282A2C";
+        readonly '200': "#36383A";
+        readonly '300': "#444648";
+        readonly '400': "#525456";
+        readonly '500': "#66686A";
+        readonly '600': "#888A8C";
+        readonly '700': "#AAACAE";
+        readonly '800': "#CCCED0";
+        readonly '900': "#FFFFFF";
+        readonly '00': "#0C0E10";
+    };
+};
+export declare const blue1Scale: {
+    readonly light: {
+        readonly '50': "#AFCFFF";
+        readonly '100': "#8EBCFF";
+        readonly '200': "#6DA8FF";
+        readonly '300': "#4C95FF";
+        readonly '400': "#1473FF";
+        readonly '500': "#1267E6";
+        readonly '600': "#0F57C2";
+        readonly '700': "#0C4599";
+        readonly '800': "#093370";
+        readonly '900': "#06234D";
+        readonly '00': "#C7DDFF";
+    };
+    readonly dark: {
+        readonly '50': "#0C4599";
+        readonly '100': "#0E51B3";
+        readonly '200': "#105CCC";
+        readonly '300': "#1267E6";
+        readonly '400': "#1473FF";
+        readonly '500': "#4C95FF";
+        readonly '600': "#6DA8FF";
+        readonly '700': "#8ECBFF";
+        readonly '800': "#AFCFFF";
+        readonly '900': "#C7DDFF";
+        readonly '00': "#0A3980";
+    };
+};
+export declare const blue2Scale: {
+    readonly light: {
+        readonly '50': "#A9C4FF";
+        readonly '100': "#85ACFF";
+        readonly '200': "#6194FF";
+        readonly '300': "#3E7CFF";
+        readonly '400': "#0152FF";
+        readonly '500': "#014AE6";
+        readonly '600': "#013EC2";
+        readonly '700': "#013199";
+        readonly '800': "#002470";
+        readonly '900': "#00194D";
+        readonly '00': "#C2D5FF";
+    };
+    readonly dark: {
+        readonly '50': "#1F4699";
+        readonly '100': "#2451B3";
+        readonly '200': "#295DCC";
+        readonly '300': "#2E68E6";
+        readonly '400': "#3374FF";
+        readonly '500': "#6495FF";
+        readonly '600': "#80A9FF";
+        readonly '700': "#9DBCFF";
+        readonly '800': "#BAD0FF";
+        readonly '900': "#CEDEFF";
+        readonly '00': "#1A3A80";
+    };
+};
+export declare const greenScale: {
+    readonly light: {
+        readonly '50': "#B0ECDA";
+        readonly '100': "#90E4CB";
+        readonly '200': "#70DCBB";
+        readonly '300': "#4FD4AC";
+        readonly '400': "#18C792";
+        readonly '500': "#16B383";
+        readonly '600': "#12976F";
+        readonly '700': "#0E7758";
+        readonly '800': "#0B5840";
+        readonly '900': "#073C2C";
+        readonly '00': "#C8F2E5";
+    };
+    readonly dark: {
+        readonly '50': "#128F69";
+        readonly '100': "#15A77B";
+        readonly '200': "#18BE8C";
+        readonly '300': "#1BD69E";
+        readonly '400': "#1EEEAF";
+        readonly '500': "#54F2C2";
+        readonly '600': "#73F4CD";
+        readonly '700': "#93F7D9";
+        readonly '800': "#B2F9E4";
+        readonly '900': "#C9FBEC";
+        readonly '00': "#0F7758";
+    };
+};
+export declare const purpleScale: {
+    readonly light: {
+        readonly '50': "#C0CBFC";
+        readonly '100': "#A7B6FA";
+        readonly '200': "#8DA1F9";
+        readonly '300': "#738BF7";
+        readonly '400': "#4767F5";
+        readonly '500': "#405DDC";
+        readonly '600': "#364EBA";
+        readonly '700': "#2B3E93";
+        readonly '800': "#1F2D6C";
+        readonly '900': "#151F4A";
+        readonly '00': "#D3DAFD";
+    };
+    readonly dark: {
+        readonly '50': "#2C4099";
+        readonly '100': "#344BB3";
+        readonly '200': "#3B56CC";
+        readonly '300': "#4360E6";
+        readonly '400': "#4A6BFF";
+        readonly '500': "#758FFF";
+        readonly '600': "#8FA3FF";
+        readonly '700': "#A8B8FF";
+        readonly '800': "#C1CDFF";
+        readonly '900': "#D4DBFF";
+        readonly '00': "#253580";
+    };
+};
+export declare const yellowScale: {
+    readonly light: {
+        readonly '50': "#FAE7A8";
+        readonly '100': "#F8DD84";
+        readonly '200': "#F6D361";
+        readonly '300': "#F4C93D";
+        readonly '400': "#F0B800";
+        readonly '500': "#D8A600";
+        readonly '600': "#B68C00";
+        readonly '700': "#906E00";
+        readonly '800': "#6A5100";
+        readonly '900': "#483700";
+        readonly '00': "#FBEEC2";
+    };
+    readonly dark: {
+        readonly '50': "#997600";
+        readonly '100': "#B38900";
+        readonly '200': "#CC9D00";
+        readonly '300': "#E6B000";
+        readonly '400': "#FFC400";
+        readonly '500': "#FFD23D";
+        readonly '600': "#FFDA61";
+        readonly '700': "#FFE384";
+        readonly '800': "#FFEBA8";
+        readonly '900': "#FFF1C2";
+        readonly '00': "#806200";
+    };
+};
+export declare const redScale: {
+    readonly light: {
+        readonly '50': "#F8BFBF";
+        readonly '100': "#F5A4A4";
+        readonly '200': "#F38A8A";
+        readonly '300': "#F06F6F";
+        readonly '400': "#EB4242";
+        readonly '500': "#D43B3B";
+        readonly '600': "#B33232";
+        readonly '700': "#8D2828";
+        readonly '800': "#681D1D";
+        readonly '900': "#471414";
+        readonly '00': "#FAD2D2";
+    };
+    readonly dark: {
+        readonly '50': "#992B2B";
+        readonly '100': "#B33232";
+        readonly '200': "#CC3A3A";
+        readonly '300': "#E64141";
+        readonly '400': "#FF4848";
+        readonly '500': "#FF7474";
+        readonly '600': "#FF8E8E";
+        readonly '700': "#FFA7A7";
+        readonly '800': "#FFC1C1";
+        readonly '900': "#FFD3D3";
+        readonly '00': "#802424";
+    };
+};
+export declare const grayAlpha: {
+    readonly light: {
+        readonly '30': "#FFFFFF08";
+        readonly '50': "#FFFFFF0D";
+        readonly '100': "#FFFFFF1A";
+        readonly '200': "#FFFFFF33";
+        readonly '500': "#FFFFFF80";
+    };
+    readonly dark: {
+        readonly '30': "#00000008";
+        readonly '50': "#0000000D";
+        readonly '100': "#0000001A";
+        readonly '200': "#00000033";
+        readonly '500': "#00000080";
+    };
+};
+export declare const blue1Alpha: {
+    readonly light: {
+        readonly '30': "#1473FF0A";
+        readonly '50': "#1473FF14";
+        readonly '100': "#1473FF24";
+        readonly '200': "#1473FF33";
+        readonly '500': "#1473FF80";
+    };
+    readonly dark: {
+        readonly '30': "#1473FF0A";
+        readonly '50': "#1473FF14";
+        readonly '100': "#1473FF24";
+        readonly '200': "#1473FF33";
+        readonly '500': "#1473FF80";
+    };
+};
+export declare const blue2Alpha: {
+    readonly light: {
+        readonly '30': "#0152FF0A";
+        readonly '50': "#0152FF14";
+        readonly '100': "#0152FF24";
+        readonly '200': "#0152FF33";
+        readonly '500': "#0152FF80";
+    };
+    readonly dark: {
+        readonly '30': "#3374FF0A";
+        readonly '50': "#3374FF14";
+        readonly '100': "#3374FF24";
+        readonly '200': "#3374FF33";
+        readonly '500': "#3374FF80";
+    };
+};
+export declare const greenAlpha: {
+    readonly light: {
+        readonly '30': "#18C7920A";
+        readonly '50': "#18C79214";
+        readonly '100': "#18C79224";
+        readonly '200': "#18C7924D";
+        readonly '500': "#18C79299";
+    };
+    readonly dark: {
+        readonly '30': "#1EEEAF0A";
+        readonly '50': "#1EEEAF14";
+        readonly '100': "#1EEEAF24";
+        readonly '200': "#1EEEAF33";
+        readonly '500': "#1EEEAF80";
+    };
+};
+export declare const purpleAlpha: {
+    readonly light: {
+        readonly '30': "#4767F50A";
+        readonly '50': "#4767F514";
+        readonly '100': "#4767F524";
+        readonly '200': "#4767F533";
+        readonly '500': "#4767F580";
+    };
+    readonly dark: {
+        readonly '30': "#4A6BFF0A";
+        readonly '50': "#4A6BFF14";
+        readonly '100': "#4A6BFF24";
+        readonly '200': "#4A6BFF33";
+        readonly '500': "#4A6BFF80";
+    };
+};
+export declare const yellowAlpha: {
+    readonly light: {
+        readonly '30': "#F0B8000A";
+        readonly '50': "#F0B80014";
+        readonly '100': "#F0B80024";
+        readonly '200': "#F0B80033";
+        readonly '500': "#F0B80080";
+    };
+    readonly dark: {
+        readonly '30': "#FFC4000A";
+        readonly '50': "#FFC40014";
+        readonly '100': "#FFC40024";
+        readonly '200': "#FFC40033";
+        readonly '500': "#FFC40080";
+    };
+};
+export declare const redAlpha: {
+    readonly light: {
+        readonly '30': "#EB42420A";
+        readonly '50': "#EB424214";
+        readonly '100': "#EB424224";
+        readonly '200': "#EB424233";
+        readonly '500': "#EB424280";
+    };
+    readonly dark: {
+        readonly '30': "#FF48480A";
+        readonly '50': "#FF484814";
+        readonly '100': "#FF484824";
+        readonly '200': "#FF484833";
+        readonly '500': "#FF484880";
+    };
+};
+export declare const whiteAlpha: {
+    readonly light: {
+        readonly '30': "#00000008";
+        readonly '50': "#0000000D";
+        readonly '100': "#0000001A";
+        readonly '200': "#00000033";
+        readonly '500': "#00000080";
+    };
+    readonly dark: {
+        readonly '30': "#FFFFFF08";
+        readonly '50': "#FFFFFF0D";
+        readonly '100': "#FFFFFF1A";
+        readonly '200': "#FFFFFF33";
+        readonly '500': "#FFFFFF80";
+    };
+};
+export declare const graySemantic: {
+    readonly light: {
+        readonly '50': "#FFFFFF";
+        readonly '100': "#F6F8FA";
+        readonly '00': "#F6F8FA";
+    };
+    readonly dark: {
+        readonly '50': "#1A1C1E";
+        readonly '100': "#282A2C";
+        readonly '00': "#0C0E10";
+    };
+};
+export declare const semanticPaper: {
+    readonly light: {
+        readonly contents: "var(--gray-50)";
+        readonly default: "var(--gray-00)";
+        readonly dialog: "var(--gray-semantic-50)";
+        readonly neutral: "var(--gray-semantic-00)";
+        readonly sheet: "var(--gray-semantic-50)";
+    };
+    readonly dark: {
+        readonly contents: "var(--gray-50)";
+        readonly default: "var(--gray-00)";
+        readonly dialog: "var(--gray-semantic-50)";
+        readonly neutral: "var(--gray-semantic-00)";
+        readonly sheet: "var(--gray-semantic-50)";
+    };
+};
+export declare const semanticDivider: {
+    readonly light: {
+        readonly 'divider-1': "var(--white-alpha-50)";
+        readonly 'divider-2': "var(--gray-100)";
+        readonly 'divider-3': "var(--white-alpha-100)";
+        readonly 'divider-4': "var(--white-alpha-200)";
+    };
+    readonly dark: {
+        readonly 'divider-1': "var(--white-alpha-50)";
+        readonly 'divider-2': "var(--gray-100)";
+        readonly 'divider-3': "var(--white-alpha-100)";
+        readonly 'divider-4': "var(--white-alpha-200)";
+    };
+};
+export declare const semanticOverlay: {
+    readonly light: {
+        readonly 'overlay-dim': "";
+        readonly 'overlay-low': "";
+    };
+    readonly dark: {
+        readonly 'overlay-dim': "";
+        readonly 'overlay-low': "";
+    };
+};
+export declare const semanticBrand: {
+    readonly light: {
+        readonly 'credit-primary': "var(--green-400)";
+        readonly 'credit-primary-hover': "var(--green-600)";
+        readonly 'credit-primary-low': "var(--green-alpha-50)";
+        readonly 'credit-primary-low-hover': "var(--green-alpha-100)";
+        readonly 'credit-primary-low-pressed': "var(--green-alpha-100)";
+        readonly 'credit-primary-pressed': "var(--green-600)";
+        readonly 'gluwa-primary': "var(--blue1-400)";
+        readonly 'gluwa-primary-hover': "var(--blue1-600)";
+        readonly 'gluwa-primary-low': "var(--blue1-alpha-50)";
+        readonly 'gluwa-primary-low-hover': "var(--blue1-alpha-100)";
+        readonly 'gluwa-primary-low-pressed': "var(--blue1-alpha-100)";
+        readonly 'gluwa-primary-pressed': "var(--blue1-600)";
+        readonly 'space-primary': "var(--purple-400)";
+        readonly 'space-primary-hover': "var(--purple-600)";
+        readonly 'space-primary-low': "var(--purple-alpha-50)";
+        readonly 'space-primary-low-hover': "var(--purple-alpha-100)";
+        readonly 'space-primary-low-pressed': "var(--purple-alpha-100)";
+        readonly 'space-primary-pressed': "var(--purple-600)";
+        readonly 'trugi-primary': "var(--blue2-400)";
+        readonly 'trugi-primary-hover': "var(--blue2-600)";
+        readonly 'trugi-primary-legacy': "#2848FEFF";
+        readonly 'trugi-primary-low': "var(--blue2-alpha-50)";
+        readonly 'trugi-primary-low-hover': "var(--blue2-alpha-100)";
+        readonly 'trugi-primary-low-pressed': "var(--blue2-alpha-100)";
+        readonly 'trugi-primary-pressed': "var(--blue2-600)";
+    };
+    readonly dark: {
+        readonly 'credit-primary': "var(--green-400)";
+        readonly 'credit-primary-hover': "var(--green-600)";
+        readonly 'credit-primary-low': "var(--green-alpha-50)";
+        readonly 'credit-primary-low-hover': "var(--green-alpha-100)";
+        readonly 'credit-primary-low-pressed': "var(--green-alpha-100)";
+        readonly 'credit-primary-pressed': "var(--green-600)";
+        readonly 'gluwa-primary': "var(--blue1-400)";
+        readonly 'gluwa-primary-hover': "var(--blue1-600)";
+        readonly 'gluwa-primary-low': "var(--blue1-alpha-50)";
+        readonly 'gluwa-primary-low-hover': "var(--blue1-alpha-100)";
+        readonly 'gluwa-primary-low-pressed': "var(--blue1-alpha-100)";
+        readonly 'gluwa-primary-pressed': "var(--blue1-600)";
+        readonly 'space-primary': "var(--purple-400)";
+        readonly 'space-primary-hover': "var(--purple-600)";
+        readonly 'space-primary-low': "var(--purple-alpha-50)";
+        readonly 'space-primary-low-hover': "var(--purple-alpha-100)";
+        readonly 'space-primary-low-pressed': "var(--purple-alpha-100)";
+        readonly 'space-primary-pressed': "var(--purple-600)";
+        readonly 'trugi-primary': "var(--blue2-400)";
+        readonly 'trugi-primary-hover': "var(--blue2-600)";
+        readonly 'trugi-primary-legacy': "#2848FEFF";
+        readonly 'trugi-primary-low': "var(--blue2-alpha-50)";
+        readonly 'trugi-primary-low-hover': "var(--blue2-alpha-100)";
+        readonly 'trugi-primary-low-pressed': "var(--blue2-alpha-100)";
+        readonly 'trugi-primary-pressed': "var(--blue2-600)";
+    };
+};
+export declare const semanticInformation: {
+    readonly light: {
+        readonly caution: "var(--yellow-400)";
+        readonly 'caution-low': "var(--yellow-alpha-50)";
+        readonly error: "var(--red-400)";
+        readonly 'error-low': "var(--red-alpha-50)";
+        readonly info: "var(--blue1-400)";
+        readonly 'info-low': "var(--blue1-alpha-50)";
+        readonly success: "var(--green-400)";
+        readonly 'success-low': "var(--green-alpha-50)";
+    };
+    readonly dark: {
+        readonly caution: "var(--yellow-400)";
+        readonly 'caution-low': "var(--yellow-alpha-50)";
+        readonly error: "var(--red-400)";
+        readonly 'error-low': "var(--red-alpha-50)";
+        readonly info: "var(--blue1-400)";
+        readonly 'info-low': "var(--blue1-alpha-50)";
+        readonly success: "var(--green-400)";
+        readonly 'success-low': "var(--green-alpha-50)";
+    };
+};
+export declare const staticBlack: {
+    readonly light: {
+        readonly 'alpha-100': "#0000001A";
+        readonly 'alpha-200': "#00000033";
+        readonly 'alpha-30': "#00000008";
+        readonly 'alpha-50': "#0000000D";
+        readonly 'alpha-500': "#00000080";
+        readonly 'alpha-800': "#000000CC";
+        readonly main: "#000000FF";
+    };
+    readonly dark: {
+        readonly 'alpha-100': "#0000001A";
+        readonly 'alpha-200': "#00000033";
+        readonly 'alpha-30': "#00000008";
+        readonly 'alpha-50': "#0000000D";
+        readonly 'alpha-500': "#00000080";
+        readonly 'alpha-800': "#000000CC";
+        readonly main: "#000000FF";
+    };
+};
+export declare const staticWhite: {
+    readonly light: {
+        readonly 'alpha-100': "#FFFFFF1A";
+        readonly 'alpha-200': "#FFFFFF33";
+        readonly 'alpha-30': "#FFFFFF08";
+        readonly 'alpha-50': "#FFFFFF0D";
+        readonly 'alpha-500': "#FFFFFF80";
+        readonly 'alpha-800': "#FFFFFFCC";
+        readonly main: "#FFFFFFFF";
+    };
+    readonly dark: {
+        readonly 'alpha-100': "#FFFFFF1A";
+        readonly 'alpha-200': "#FFFFFF33";
+        readonly 'alpha-30': "#FFFFFF08";
+        readonly 'alpha-50': "#FFFFFF0D";
+        readonly 'alpha-500': "#FFFFFF80";
+        readonly 'alpha-800': "#FFFFFFCC";
+        readonly main: "#FFFFFFFF";
+    };
+};
+export declare const staticColor: {
+    readonly light: {
+        readonly 'blue1-400': "#1473FFFF";
+        readonly 'blue1-700': "#ACD2FFFF";
+        readonly 'blue2-400': "#0152FFFF";
+        readonly 'blue2-700': "#85ACFFFF";
+        readonly 'gluwa-lightblue': "#67CEFFFF";
+        readonly 'gluwa-navy': "#292751FF";
+        readonly 'gray-00': "#0C0E10FF";
+        readonly 'gray-200': "#36383AFF";
+        readonly 'gray-alpha-100': "#0C0E101A";
+        readonly 'gray-alpha-200': "#0C0E1033";
+        readonly 'gray-alpha-500': "#0C0E1080";
+        readonly 'gray-alpha-700': "#0C0E10B2";
+        readonly 'green-400': "#1EEEAFFF";
+        readonly 'green-700': "#93F7D9FF";
+        readonly 'purple-400': "#4A6BFFFF";
+        readonly 'purple-700': "#A8B8FFFF";
+        readonly 'red-400': "#FF4848FF";
+        readonly 'red-700': "#FFA7A7FF";
+        readonly 'trugi-blue-200-legacy': "#D9E8F9FF";
+        readonly 'trugi-blue-300-legacy': "#C0DAF8FF";
+        readonly 'trugi-blue-700-legacy': "#132DBBFF";
+        readonly 'trugi-blue-alpha': "#2848FE24";
+        readonly 'trugi-green': "#4EE28CFF";
+        readonly 'trugi-orange': "#FF8A4BFF";
+        readonly 'trugi-pink': "#FF6CBFFF";
+        readonly 'trugi-purple': "#B5AAFFFF";
+        readonly 'yellow-400': "#FFC400FF";
+        readonly 'yellow-700': "#FFE384FF";
+    };
+    readonly dark: {
+        readonly 'blue1-400': "#1473FFFF";
+        readonly 'blue1-700': "#ACD2FFFF";
+        readonly 'blue2-400': "#0152FFFF";
+        readonly 'blue2-700': "#85ACFFFF";
+        readonly 'gluwa-lightblue': "#67CEFFFF";
+        readonly 'gluwa-navy': "#292751FF";
+        readonly 'gray-00': "#0C0E10FF";
+        readonly 'gray-200': "#36383AFF";
+        readonly 'gray-alpha-100': "#0C0E101A";
+        readonly 'gray-alpha-200': "#0C0E1033";
+        readonly 'gray-alpha-500': "#0C0E1080";
+        readonly 'gray-alpha-700': "#0C0E10B2";
+        readonly 'green-400': "#1EEEAFFF";
+        readonly 'green-700': "#93F7D9FF";
+        readonly 'purple-400': "#4A6BFFFF";
+        readonly 'purple-700': "#A8B8FFFF";
+        readonly 'red-400': "#FF4848FF";
+        readonly 'red-700': "#FFA7A7FF";
+        readonly 'trugi-blue-200-legacy': "#D9E8F9FF";
+        readonly 'trugi-blue-300-legacy': "#C0DAF8FF";
+        readonly 'trugi-blue-700-legacy': "#132DBBFF";
+        readonly 'trugi-blue-alpha': "#2848FE24";
+        readonly 'trugi-green': "#4EE28CFF";
+        readonly 'trugi-orange': "#FF8A4BFF";
+        readonly 'trugi-pink': "#FF6CBFFF";
+        readonly 'trugi-purple': "#B5AAFFFF";
+        readonly 'yellow-400': "#FFC400FF";
+        readonly 'yellow-700': "#FFE384FF";
     };
 };
 //# sourceMappingURL=colors.data.d.ts.map

package/dist/theme/colors.data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.data.d.ts","sourceRoot":"","sources":["../../src/theme/colors.data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC"}
+{"version":3,"file":"colors.data.d.ts","sourceRoot":"","sources":["../../src/theme/colors.data.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BX,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAeZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;CAeX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAehB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAalB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;CASlB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDhB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;CAqBtB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;CAmBd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;CAmBd,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Dd,CAAC"}

package/dist/theme/colors.types.d.ts

@@ -11,9 +11,31 @@ export interface ColorScale {
     '800': string;
     '900': string;
 }
+export interface ColorAlpha {
+    '30': string;
+    '50': string;
+    '100': string;
+    '200': string;
+    '500': string;
+}
 export interface Theme {
     colors: {
         gray: ColorScale;
+        grayAlpha: ColorAlpha;
+        graySemantic: Partial<ColorScale>;
+        whiteAlpha: ColorAlpha;
+        blue1: ColorScale;
+        blue1Alpha: ColorAlpha;
+        blue2: ColorScale;
+        blue2Alpha: ColorAlpha;
+        green: ColorScale;
+        greenAlpha: ColorAlpha;
+        purple: ColorScale;
+        purpleAlpha: ColorAlpha;
+        yellow: ColorScale;
+        yellowAlpha: ColorAlpha;
+        red: ColorScale;
+        redAlpha: ColorAlpha;
     };
 }
 export type ThemeMode = 'light' | 'dark';

package/dist/theme/colors.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../src/theme/colors.types.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE;QACN,IAAI,EAAE,UAAU,CAAC;KAElB,CAAC;CACH;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC"}
+{"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../src/theme/colors.types.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE;QACN,IAAI,EAAE,UAAU,CAAC;QACjB,SAAS,EAAE,UAAU,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,UAAU,EAAE,UAAU,CAAC;QACvB,KAAK,EAAE,UAAU,CAAC;QAClB,UAAU,EAAE,UAAU,CAAC;QACvB,KAAK,EAAE,UAAU,CAAC;QAClB,UAAU,EAAE,UAAU,CAAC;QACvB,KAAK,EAAE,UAAU,CAAC;QAClB,UAAU,EAAE,UAAU,CAAC;QACvB,MAAM,EAAE,UAAU,CAAC;QACnB,WAAW,EAAE,UAAU,CAAC;QACxB,MAAM,EAAE,UAAU,CAAC;QACnB,WAAW,EAAE,UAAU,CAAC;QACxB,GAAG,EAAE,UAAU,CAAC;QAChB,QAAQ,EAAE,UAAU,CAAC;KACtB,CAAC;CACH;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/dist/theme/extract-colors.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=extract-colors.d.ts.map

package/dist/theme/extract-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-colors.d.ts","sourceRoot":"","sources":["../../src/theme/extract-colors.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisodev/ui-common",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "웹과 React Native를 위한 공통 타입 및 테마",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -10,8 +10,9 @@
     "dist"
   ],
   "scripts": {
+    "build:extract-colors": "ts-node src/theme/extract-colors.ts",
     "build:colors": "ts-node src/theme/build-colors.ts",
-    "build": "npm run build:colors && rollup -c rollup.config.js"
+    "build": "npm run build:extract-colors && npm run  build:colors && rollup -c rollup.config.js"
   },
   "keywords": [
     "react",