@designbasekorea/theme 0.1.0 → 0.1.1

package/scss/_semantic.scss

@@ -1,629 +0,0 @@
-/**
- * 기본 시맨틱 HTML 태그 테마별 스타일
- * 
- * 목적: 기본 HTML 요소들에 대한 테마별 일관된 스타일 제공
- * 기능: 라이트/다크/브랜드 테마에 따른 자동 색상 적용
- * 사용법: 자동으로 적용되며, data-theme 속성에 따라 색상 변경
- */
-
-// ============================================================================
-// 기본 시맨틱 태그 스타일
-// ============================================================================
-
-// 제목 태그들 (h1 ~ h6)
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
-    line-height: 1.2;
-    color: var(--db-text-primary);
-    transition: color 0.3s ease;
-}
-
-h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: var(--db-margin-l);
-}
-
-h2 {
-    font-size: 2rem;
-    font-weight: 600;
-    margin-bottom: var(--db-margin-m);
-}
-
-h3 {
-    font-size: 1.75rem;
-    font-weight: 600;
-    margin-bottom: var(--db-margin-m);
-}
-
-h4 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: var(--db-margin-s);
-}
-
-h5 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: var(--db-margin-s);
-}
-
-h6 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: var(--db-margin-xs);
-}
-
-// 단락 태그
-p {
-    margin: 0 0 var(--db-margin-m) 0;
-    line-height: 1.6;
-    color: var(--db-text-primary);
-    transition: color 0.3s ease;
-}
-
-// 링크 태그
-a {
-    color: var(--db-text-link);
-    text-decoration: none;
-    transition: all 0.3s ease;
-    cursor: pointer;
-
-    &:hover {
-        color: var(--db-text-link-hover);
-        text-decoration: underline;
-    }
-
-    &:active {
-        color: var(--db-text-link);
-    }
-
-    &:focus {
-        outline: 2px solid var(--db-border-focus);
-        outline-offset: 2px;
-    }
-}
-
-// 강조 태그
-strong,
-b {
-    font-weight: 600;
-    color: var(--db-text-primary);
-}
-
-em,
-i {
-    font-style: italic;
-    color: var(--db-text-primary);
-}
-
-// 인용 태그
-blockquote {
-    margin: var(--db-margin-m) 0;
-    padding: var(--db-padding-m) var(--db-padding-l);
-    border-left: 4px solid var(--db-border-primary);
-    background-color: var(--db-bg-secondary);
-    color: var(--db-text-secondary);
-    font-style: italic;
-    border-radius: 0 8px 8px 0;
-}
-
-// 코드 태그
-code {
-    background-color: var(--db-bg-tertiary);
-    color: var(--db-text-primary);
-    padding: 0.125rem 0.25rem;
-    border-radius: 4px;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 0.875em;
-    border: 1px solid var(--db-border-muted);
-}
-
-pre {
-    background-color: var(--db-bg-tertiary);
-    color: var(--db-text-primary);
-    padding: var(--db-padding-m);
-    border-radius: 8px;
-    overflow-x: auto;
-    border: 1px solid var(--db-border-muted);
-    margin: var(--db-margin-m) 0;
-
-    code {
-        background: none;
-        border: none;
-        padding: 0;
-        color: inherit;
-    }
-}
-
-// 목록 태그
-ul,
-ol {
-    margin: 0 0 var(--db-margin-m) 0;
-    padding-left: var(--db-padding-l);
-    color: var(--db-text-primary);
-}
-
-li {
-    margin-bottom: var(--db-margin-s);
-    line-height: 1.6;
-    color: var(--db-text-primary);
-}
-
-// 정의 목록
-dl {
-    margin: 0 0 var(--db-margin-m) 0;
-}
-
-dt {
-    font-weight: 600;
-    color: var(--db-text-primary);
-    margin-bottom: var(--db-margin-xs);
-}
-
-dd {
-    margin: 0 0 var(--db-margin-s) var(--db-padding-l);
-    color: var(--db-text-secondary);
-}
-
-// 구분선
-hr {
-    border: none;
-    height: 1px;
-    background-color: var(--db-border-muted);
-    margin: var(--db-margin-xl) 0;
-}
-
-// 테이블 태그
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: var(--db-margin-m) 0;
-    color: var(--db-text-primary);
-}
-
-th,
-td {
-    padding: var(--db-padding-s);
-    text-align: left;
-    border-bottom: 1px solid var(--db-border-muted);
-}
-
-th {
-    background-color: var(--db-bg-secondary);
-    font-weight: 600;
-    color: var(--db-text-primary);
-}
-
-tr:hover {
-    background-color: var(--db-bg-secondary);
-}
-
-// 폼 요소들
-input,
-textarea,
-select {
-    font-family: inherit;
-    font-size: inherit;
-    color: var(--db-text-primary);
-    background-color: var(--db-bg-primary);
-    border: 1px solid var(--db-border-primary);
-    border-radius: 6px;
-    padding: var(--db-padding-s) var(--db-padding-s);
-    transition: all 0.3s ease;
-
-    &:focus {
-        outline: none;
-        border-color: var(--db-border-focus);
-        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
-    }
-
-    &:disabled {
-        background-color: var(--db-bg-tertiary);
-        color: var(--db-text-disabled);
-        cursor: not-allowed;
-    }
-
-    &::placeholder {
-        color: var(--db-text-muted);
-    }
-}
-
-// 버튼 태그
-button {
-    font-family: inherit;
-    font-size: inherit;
-    color: var(--db-text-primary);
-    background-color: var(--db-bg-primary);
-    border: 1px solid var(--db-border-primary);
-    border-radius: 6px;
-    padding: var(--db-padding-s) var(--db-padding-m);
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:hover {
-        background-color: var(--db-bg-secondary);
-        border-color: var(--db-border-focus);
-    }
-
-    &:active {
-        transform: translateY(1px);
-    }
-
-    &:focus {
-        outline: none;
-        border-color: var(--db-border-focus);
-        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
-    }
-
-    &:disabled {
-        background-color: var(--db-bg-tertiary);
-        color: var(--db-text-disabled);
-        cursor: not-allowed;
-    }
-}
-
-// 라벨 태그
-label {
-    display: inline-block;
-    margin-bottom: var(--db-margin-s);
-    font-weight: 500;
-    color: var(--db-text-primary);
-}
-
-// 필드셋과 레전드
-fieldset {
-    border: 1px solid var(--db-border-muted);
-    border-radius: 8px;
-    padding: var(--db-padding-m);
-    margin: var(--db-margin-m) 0;
-}
-
-legend {
-    padding: 0 var(--db-padding-s);
-    font-weight: 600;
-    color: var(--color-text-primary);
-}
-
-// 체크박스와 라디오 버튼
-input[type="checkbox"],
-input[type="radio"] {
-    margin-right: var(--db-margin-s);
-    width: auto;
-    height: auto;
-}
-
-// 범위 슬라이더
-input[type="range"] {
-    background: transparent;
-    border: none;
-    padding: 0;
-    height: 6px;
-    border-radius: 3px;
-    background: var(--color-border-muted);
-
-    &::-webkit-slider-thumb {
-        appearance: none;
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background: var(--color-action-primary-bg);
-        cursor: pointer;
-        border: 2px solid var(--color-bg-primary);
-    }
-
-    &::-moz-range-thumb {
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background: var(--color-action-primary-bg);
-        cursor: pointer;
-        border: 2px solid var(--color-bg-primary);
-    }
-}
-
-// 진행바
-progress {
-    width: 100%;
-    height: 8px;
-    border-radius: 4px;
-    background-color: var(--color-bg-tertiary);
-    border: none;
-
-    &::-webkit-progress-bar {
-        background-color: var(--color-bg-tertiary);
-        border-radius: 4px;
-    }
-
-    &::-webkit-progress-value {
-        background-color: var(--color-action-primary-bg);
-        border-radius: 4px;
-    }
-
-    &::-moz-progress-bar {
-        background-color: var(--color-action-primary-bg);
-        border-radius: 4px;
-    }
-}
-
-// 미터
-meter {
-    width: 100%;
-    height: 8px;
-    border-radius: 4px;
-    background-color: var(--color-bg-tertiary);
-    border: none;
-
-    &::-webkit-meter-bar {
-        background-color: var(--color-bg-tertiary);
-        border-radius: 4px;
-    }
-
-    &::-webkit-meter-optimum-value {
-        background-color: var(--color-green-500);
-        border-radius: 4px;
-    }
-
-    &::-webkit-meter-suboptimum-value {
-        background-color: var(--color-yellow-500);
-        border-radius: 4px;
-    }
-
-    &::-webkit-meter-even-less-good-value {
-        background-color: var(--color-red-500);
-        border-radius: 4px;
-    }
-}
-
-// 상세 정보
-details {
-    margin: var(--db-margin-m) 0;
-    border: 1px solid var(--color-border-muted);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-summary {
-    padding: var(--db-padding-m);
-    background-color: var(--db-bg-secondary);
-    color: var(--db-text-primary);
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-        background-color: var(--db-bg-tertiary);
-    }
-
-    &::-webkit-details-marker {
-        color: var(--db-text-muted);
-    }
-}
-
-details[open] summary {
-    border-bottom: 1px solid var(--db-border-muted);
-}
-
-details>div {
-    padding: var(--db-padding-m);
-    color: var(--db-text-primary);
-}
-
-// 마크 태그
-mark {
-    background-color: var(--db-yellow-200);
-    color: var(--db-yellow-900);
-    padding: var(--db-padding-xxs) var(--db-padding-xs);
-    border-radius: 3px;
-}
-
-// 삭제된 텍스트
-del,
-s {
-    color: var(--db-text-muted);
-    text-decoration: line-through;
-}
-
-// 삽입된 텍스트
-ins,
-u {
-    color: var(--db-text-primary);
-    text-decoration: underline;
-}
-
-// 작은 텍스트
-small {
-    font-size: 0.875em;
-    color: var(--db-text-muted);
-}
-
-// 큰 텍스트
-big {
-    font-size: 1.125em;
-    color: var(--db-text-primary);
-}
-
-// 인용
-cite {
-    font-style: italic;
-    color: var(--db-text-secondary);
-}
-
-// 시간
-time {
-    color: var(--color-text-muted);
-    font-size: 0.875em;
-}
-
-// 주소
-address {
-    font-style: normal;
-    color: var(--color-text-secondary);
-    margin: var(--db-margin-m) 0;
-}
-
-// 아티클과 섹션
-article,
-section {
-    margin: var(--db-margin-xl) 0;
-}
-
-// 헤더와 푸터
-header,
-footer {
-    padding: var(--db-padding-m) 0;
-    color: var(--db-text-primary);
-}
-
-// 네비게이션
-nav {
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: var(--db-gap-m);
-    }
-
-    a {
-        color: var(--db-text-primary);
-        text-decoration: none;
-        padding: var(--db-padding-s);
-        border-radius: 4px;
-        transition: all 0.3s ease;
-
-        &:hover {
-            background-color: var(--db-bg-secondary);
-            color: var(--db-text-primary);
-        }
-
-        &.active {
-            background-color: var(--db-color-primary);
-            color: var(--db-text-inverse);
-        }
-    }
-}
-
-// 메인 콘텐츠
-main {
-    min-height: 100vh;
-    color: var(--db-text-primary);
-}
-
-// 사이드바
-aside {
-    background-color: var(--db-bg-secondary);
-    padding: var(--db-padding-m);
-    border-radius: 8px;
-    color: var(--db-text-primary);
-}
-
-// 그림
-figure {
-    margin: var(--db-margin-xl) 0;
-    text-align: center;
-}
-
-figcaption {
-    margin-top: var(--db-margin-s);
-    color: var(--db-text-secondary);
-    font-size: 0.875em;
-}
-
-// 비디오와 오디오
-video,
-audio {
-    max-width: 100%;
-    border-radius: 8px;
-}
-
-// 캔버스
-canvas {
-    border: 1px solid var(--db-border-muted);
-    border-radius: 8px;
-}
-
-// 선택된 텍스트
-::selection {
-    background-color: var(--db-color-primary);
-    color: var(--db-text-inverse);
-}
-
-::-moz-selection {
-    background-color: var(--db-color-primary);
-    color: var(--db-text-inverse);
-}
-
-// 포커스 표시
-:focus-visible {
-    outline: 2px solid var(--db-border-focus);
-    outline-offset: 2px;
-}
-
-// 스크롤바 스타일링
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--db-bg-tertiary);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--db-border-muted);
-    border-radius: 4px;
-
-    &:hover {
-        background: var(--db-border-primary);
-    }
-}
-
-// 다크 모드 지원
-[data-theme="dark"] {
-
-    // 다크 모드에서 추가적인 스타일 조정
-    code,
-    pre {
-        background-color: var(--db-bg-tertiary);
-        border-color: var(--db-border-primary);
-    }
-
-    blockquote {
-        background-color: var(--db-bg-tertiary);
-        border-left-color: var(--db-border-primary);
-    }
-
-    input,
-    textarea,
-    select {
-        background-color: var(--db-bg-primary);
-        border-color: var(--db-border-primary);
-    }
-}
-
-// 브랜드 테마 지원
-[data-theme="brand"] {
-
-    // 브랜드 테마에서 추가적인 스타일 조정
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        color: var(--db-text-primary);
-    }
-
-    a {
-        color: var(--db-text-link);
-    }
-}