@designbasekorea/theme 0.1.0

package/dist/index.js

@@ -0,0 +1,187 @@
+'use strict';
+
+/**
+ * Designbase Theme 메인 엔트리 포인트
+ *
+ * 목적: 테마 관련 TypeScript 유틸리티와 타입 정의 제공
+ * 기능: CSS 변수 헬퍼, 테마 전환, 유틸리티 함수
+ * 사용법: import { setTheme, getTheme } from '@designbase/theme'
+ */
+/**
+ * 현재 활성 테마 가져오기
+ */
+function getTheme() {
+    if (typeof document === 'undefined') {
+        return 'light';
+    }
+    const element = document.documentElement;
+    const themeAttr = element.getAttribute('data-theme');
+    if (themeAttr === 'dark') {
+        return themeAttr;
+    }
+    return 'light';
+}
+/**
+ * 테마 설정
+ */
+function setTheme(theme) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+    // 로컬 스토리지에 저장
+    try {
+        localStorage.setItem('designbase-theme', theme);
+    }
+    catch (error) {
+        // 로컬 스토리지를 사용할 수 없는 환경
+        console.warn('Cannot save theme preference to localStorage');
+    }
+}
+/**
+ * 저장된 테마 불러오기
+ */
+function loadSavedTheme() {
+    if (typeof document === 'undefined') {
+        return 'light';
+    }
+    try {
+        const savedTheme = localStorage.getItem('designbase-theme');
+        if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
+            return savedTheme;
+        }
+    }
+    catch (error) {
+        // 로컬 스토리지를 사용할 수 없는 환경
+    }
+    // 시스템 다크 모드 확인
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    }
+    return 'light';
+}
+/**
+ * 테마 자동 초기화
+ */
+function initializeTheme() {
+    const savedTheme = loadSavedTheme();
+    setTheme(savedTheme);
+}
+/**
+ * CSS 변수 값 가져오기
+ */
+function getCSSVariable(variableName) {
+    if (typeof document === 'undefined') {
+        return '';
+    }
+    const computedStyle = getComputedStyle(document.documentElement);
+    return computedStyle.getPropertyValue(`--${variableName}`).trim();
+}
+/**
+ * CSS 변수 설정
+ */
+function setCSSVariable(variableName, value) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.documentElement.style.setProperty(`--${variableName}`, value);
+}
+/**
+ * 테마 토글
+ */
+function toggleTheme() {
+    const currentTheme = getTheme();
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    return newTheme;
+}
+/**
+ * 테마 변경 감지 훅 (React 등에서 사용)
+ */
+function createThemeWatcher(callback) {
+    if (typeof document === 'undefined') {
+        return () => { };
+    }
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes' &&
+                mutation.attributeName === 'data-theme') {
+                const newTheme = getTheme();
+                callback(newTheme);
+            }
+        });
+    });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+    });
+    // cleanup 함수 반환
+    return () => observer.disconnect();
+}
+// 브라우저 환경에서 자동 초기화
+if (typeof document !== 'undefined') {
+    // DOM이 로드된 후 실행
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeTheme);
+    }
+    else {
+        initializeTheme();
+    }
+}
+/**
+ * 토큰 CSS 파일들을 동적으로 로드
+ * @param basePath 토큰 CSS 파일의 기본 경로 (기본값: @designbase/tokens/dist/css)
+ */
+function loadTokens(basePath = '@designbase/tokens/dist/css') {
+    return new Promise((resolve) => {
+        if (typeof document === 'undefined') {
+            resolve();
+            return;
+        }
+        // 1) 테마 CSS가 이미 토큰을 병합 포함하는지 빠른 확인
+        const themeLink = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
+            .find((l) => typeof l.getAttribute === 'function' && /theme\.css$/.test(l.getAttribute('href') || ''));
+        if (themeLink) {
+            // theme.css 상단에 토큰이 병합되어 배포되는 경우 추가 로드 불필요
+            resolve();
+            return;
+        }
+        // 2) 병합되어 있지 않다면 단일 tokens.css 만 로드 (dark는 data-theme="dark"로 오버라이드됨)
+        const href = `${basePath}/tokens.css`;
+        const existingLink = document.querySelector(`link[href="${href}"]`);
+        if (existingLink) {
+            resolve();
+            return;
+        }
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.onload = () => resolve();
+        link.onerror = () => {
+            console.warn(`Failed to load token CSS: ${href}`);
+            resolve();
+        };
+        document.head.appendChild(link);
+    });
+}
+/**
+ * 토큰 CSS가 로드되었는지 확인
+ */
+function areTokensLoaded() {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    const tokenLinks = document.querySelectorAll('link[href*="tokens"]');
+    return tokenLinks.length > 0;
+}
+
+exports.areTokensLoaded = areTokensLoaded;
+exports.createThemeWatcher = createThemeWatcher;
+exports.getCSSVariable = getCSSVariable;
+exports.getTheme = getTheme;
+exports.initializeTheme = initializeTheme;
+exports.loadSavedTheme = loadSavedTheme;
+exports.loadTokens = loadTokens;
+exports.setCSSVariable = setCSSVariable;
+exports.setTheme = setTheme;
+exports.toggleTheme = toggleTheme;

package/dist/index.umd.js

@@ -0,0 +1,193 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DesignbaseTheme = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * Designbase Theme 메인 엔트리 포인트
+     *
+     * 목적: 테마 관련 TypeScript 유틸리티와 타입 정의 제공
+     * 기능: CSS 변수 헬퍼, 테마 전환, 유틸리티 함수
+     * 사용법: import { setTheme, getTheme } from '@designbase/theme'
+     */
+    /**
+     * 현재 활성 테마 가져오기
+     */
+    function getTheme() {
+        if (typeof document === 'undefined') {
+            return 'light';
+        }
+        const element = document.documentElement;
+        const themeAttr = element.getAttribute('data-theme');
+        if (themeAttr === 'dark') {
+            return themeAttr;
+        }
+        return 'light';
+    }
+    /**
+     * 테마 설정
+     */
+    function setTheme(theme) {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.documentElement.setAttribute('data-theme', theme);
+        // 로컬 스토리지에 저장
+        try {
+            localStorage.setItem('designbase-theme', theme);
+        }
+        catch (error) {
+            // 로컬 스토리지를 사용할 수 없는 환경
+            console.warn('Cannot save theme preference to localStorage');
+        }
+    }
+    /**
+     * 저장된 테마 불러오기
+     */
+    function loadSavedTheme() {
+        if (typeof document === 'undefined') {
+            return 'light';
+        }
+        try {
+            const savedTheme = localStorage.getItem('designbase-theme');
+            if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
+                return savedTheme;
+            }
+        }
+        catch (error) {
+            // 로컬 스토리지를 사용할 수 없는 환경
+        }
+        // 시스템 다크 모드 확인
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+        return 'light';
+    }
+    /**
+     * 테마 자동 초기화
+     */
+    function initializeTheme() {
+        const savedTheme = loadSavedTheme();
+        setTheme(savedTheme);
+    }
+    /**
+     * CSS 변수 값 가져오기
+     */
+    function getCSSVariable(variableName) {
+        if (typeof document === 'undefined') {
+            return '';
+        }
+        const computedStyle = getComputedStyle(document.documentElement);
+        return computedStyle.getPropertyValue(`--${variableName}`).trim();
+    }
+    /**
+     * CSS 변수 설정
+     */
+    function setCSSVariable(variableName, value) {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.documentElement.style.setProperty(`--${variableName}`, value);
+    }
+    /**
+     * 테마 토글
+     */
+    function toggleTheme() {
+        const currentTheme = getTheme();
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        setTheme(newTheme);
+        return newTheme;
+    }
+    /**
+     * 테마 변경 감지 훅 (React 등에서 사용)
+     */
+    function createThemeWatcher(callback) {
+        if (typeof document === 'undefined') {
+            return () => { };
+        }
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'data-theme') {
+                    const newTheme = getTheme();
+                    callback(newTheme);
+                }
+            });
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+        // cleanup 함수 반환
+        return () => observer.disconnect();
+    }
+    // 브라우저 환경에서 자동 초기화
+    if (typeof document !== 'undefined') {
+        // DOM이 로드된 후 실행
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', initializeTheme);
+        }
+        else {
+            initializeTheme();
+        }
+    }
+    /**
+     * 토큰 CSS 파일들을 동적으로 로드
+     * @param basePath 토큰 CSS 파일의 기본 경로 (기본값: @designbase/tokens/dist/css)
+     */
+    function loadTokens(basePath = '@designbase/tokens/dist/css') {
+        return new Promise((resolve) => {
+            if (typeof document === 'undefined') {
+                resolve();
+                return;
+            }
+            // 1) 테마 CSS가 이미 토큰을 병합 포함하는지 빠른 확인
+            const themeLink = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
+                .find((l) => typeof l.getAttribute === 'function' && /theme\.css$/.test(l.getAttribute('href') || ''));
+            if (themeLink) {
+                // theme.css 상단에 토큰이 병합되어 배포되는 경우 추가 로드 불필요
+                resolve();
+                return;
+            }
+            // 2) 병합되어 있지 않다면 단일 tokens.css 만 로드 (dark는 data-theme="dark"로 오버라이드됨)
+            const href = `${basePath}/tokens.css`;
+            const existingLink = document.querySelector(`link[href="${href}"]`);
+            if (existingLink) {
+                resolve();
+                return;
+            }
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            link.onload = () => resolve();
+            link.onerror = () => {
+                console.warn(`Failed to load token CSS: ${href}`);
+                resolve();
+            };
+            document.head.appendChild(link);
+        });
+    }
+    /**
+     * 토큰 CSS가 로드되었는지 확인
+     */
+    function areTokensLoaded() {
+        if (typeof document === 'undefined') {
+            return false;
+        }
+        const tokenLinks = document.querySelectorAll('link[href*="tokens"]');
+        return tokenLinks.length > 0;
+    }
+
+    exports.areTokensLoaded = areTokensLoaded;
+    exports.createThemeWatcher = createThemeWatcher;
+    exports.getCSSVariable = getCSSVariable;
+    exports.getTheme = getTheme;
+    exports.initializeTheme = initializeTheme;
+    exports.loadSavedTheme = loadSavedTheme;
+    exports.loadTokens = loadTokens;
+    exports.setCSSVariable = setCSSVariable;
+    exports.setTheme = setTheme;
+    exports.toggleTheme = toggleTheme;
+
+}));

package/dist/stories/ThemeTokens.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Spacing: StoryObj;
+export declare const Radius: StoryObj;
+//# sourceMappingURL=ThemeTokens.stories.d.ts.map

package/dist/stories/ThemeTokens.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeTokens.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ThemeTokens.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AAoCpB,eAAO,MAAM,OAAO,EAAE,QAkDrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAsBpB,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "@designbasekorea/theme",
+    "version": "0.1.0",
+    "description": "Designbase 테마 시스템 - CSS 변수, 테마 프리셋, 유틸리티 클래스를 제공",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "style": "dist/css/theme.css",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "require": "./dist/index.js",
+            "default": "./dist/index.esm.js"
+        },
+        "./css": "./dist/css/theme.css"
+    },
+    "files": [
+        "dist",
+        "scss"
+    ],
+    "scripts": {
+        "build": "npm run build:css && node scripts/merge-tokens-into-theme.js && rollup -c",
+        "build:css": "sass scss/index.scss dist/css/theme.css --style=compressed",
+        "dev": "npm run build:css -- --watch",
+        "clean": "rimraf dist",
+        "lint": "eslint src --ext .ts,.tsx",
+        "test": "jest"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^25.0.4",
+        "@rollup/plugin-node-resolve": "^15.2.1",
+        "@rollup/plugin-typescript": "^11.1.3",
+        "rimraf": "^5.0.1",
+        "rollup": "^3.29.2",
+        "sass": "^1.68.0",
+        "typescript": "^5.2.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/designbasekorea/Designbase-Library.git",
+        "directory": "packages/theme"
+    }
+}

package/scss/_reset.scss

@@ -0,0 +1,245 @@
+/**
+ * CSS Reset & Normalize
+ * 
+ * 목적: 브라우저별 기본 스타일 차이를 제거하고 일관된 기준점 제공
+ * 기능: Modern CSS reset + Figma 플러그인 최적화
+ * 참고: Josh Comeau's CSS Reset + 피그마 플러그인 특화 스타일
+ */
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/*
+  2. Remove default margin
+*/
+* {
+    margin: 0;
+}
+
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+    height: 100%;
+}
+
+/*
+  Typographic tweaks!
+  4. Add accessible line-height
+  5. Improve text rendering
+*/
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+/*
+  6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+/*
+  7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/*
+  8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+    isolation: isolate;
+}
+
+/*
+  10. Figma Plugin specific resets
+*/
+body {
+    font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    font-size: var(--font-size-sm, 14px);
+    color: var(--color-text-primary, #111827);
+    background-color: var(--color-bg-primary, #ffffff);
+
+    /* Prevent text selection in UI elements (can be overridden) */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+/*
+  11. Button resets
+*/
+button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    outline: none;
+}
+
+/*
+  12. List resets
+*/
+ul,
+ol {
+    list-style: none;
+    padding: 0;
+}
+
+/*
+  13. Link resets
+*/
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+/*
+  14. Form element resets
+*/
+input,
+textarea,
+select {
+    background: transparent;
+    border: none;
+    outline: none;
+    appearance: none;
+
+    &::placeholder {
+        color: var(--color-text-muted, #6b7280);
+    }
+}
+
+/*
+  15. Table resets
+*/
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+/*
+  16. Accessibility: Respect user's motion preferences
+*/
+@media (prefers-reduced-motion: reduce) {
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/*
+  17. Focus management for accessibility
+*/
+*:focus {
+    outline: none;
+}
+
+*:focus-visible {
+    outline: 2px solid var(--color-border-focus, #3b82f6);
+    outline-offset: 2px;
+}
+
+/*
+  18. Scrollbar styling (Webkit)
+*/
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary, #f3f4f6);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-border-secondary, #d1d5db);
+    border-radius: var(--border-radius-base, 4px);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border-primary, #e5e7eb);
+}
+
+/*
+  19. Selection styling
+*/
+::selection {
+    background-color: var(--color-text-link, #2563eb);
+    color: var(--color-text-inverse, #ffffff);
+}
+
+/*
+  20. Print styles
+*/
+@media print {
+
+    *,
+    *::before,
+    *::after {
+        background: transparent !important;
+        color: black !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    img {
+        page-break-inside: avoid;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}