@newtil/materials 0.4.6 → 0.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/spec.json +1 -1
- package/package.json +5 -3
- package/themes/README.md +30 -0
- package/themes/ncafe.css +83 -0
- package/themes/newlecture.css +85 -0
package/dist/spec.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@newtil/materials",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"description": "Material Design 3 구현 CSS 라이브러리 — m3- prefix 기반 컴포넌트 (버튼, 카드, 다이얼로그, 네비 등). @newtil/design-tokens 위에 동작.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
"default": "./dist/index.css"
|
|
22
22
|
},
|
|
23
23
|
"./package.json": "./package.json",
|
|
24
|
-
"./spec.json": "./dist/spec.json"
|
|
24
|
+
"./spec.json": "./dist/spec.json",
|
|
25
|
+
"./themes/*": "./themes/*"
|
|
25
26
|
},
|
|
26
27
|
"keywords": [
|
|
27
28
|
"css",
|
|
@@ -68,6 +69,7 @@
|
|
|
68
69
|
"index.js",
|
|
69
70
|
"index.d.ts",
|
|
70
71
|
"README.md",
|
|
71
|
-
"LICENSE"
|
|
72
|
+
"LICENSE",
|
|
73
|
+
"themes"
|
|
72
74
|
]
|
|
73
75
|
}
|
package/themes/README.md
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# 테마 파일 (Brand theme)
|
|
2
|
+
|
|
3
|
+
newtil 컴포넌트 위에 얹는 **브랜드가 정한 값 한 벌**입니다. 컴포넌트 규격(`dist/spec.json`)이 "무엇이 있고 무엇을 바꿀 수 있는가"라면, 테마는 "이 브랜드는 어느 값을 쓰는가"입니다. 이 층이 없으면 페이지마다 그 결정을 새로 내려 같은 사이트의 화면들이 서로 달라집니다.
|
|
4
|
+
|
|
5
|
+
## 자리와 순서
|
|
6
|
+
|
|
7
|
+
프로젝트마다 테마 파일 하나. 로드 순서는 고정입니다.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<link rel="stylesheet" href="…/@newtil/design-tokens/dist/tokens.css">
|
|
11
|
+
<link rel="stylesheet" href="…/@newtil/materials/dist/index.css">
|
|
12
|
+
<link rel="stylesheet" href="theme/<brand>.css"> <!-- 브랜드 테마 -->
|
|
13
|
+
<link rel="stylesheet" href="page.css"> <!-- 페이지 레이아웃만 -->
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
페이지 CSS 는 레이아웃(그리드·간격·페이지 고유 블록)만 갖고, 컴포넌트 변수(`--btn-*`, `--card-*`, `--field-*` …)는 **테마에서만** 정합니다.
|
|
17
|
+
|
|
18
|
+
## 형식
|
|
19
|
+
|
|
20
|
+
세 부분으로 이루어집니다. `ncafe.css` 가 예시입니다.
|
|
21
|
+
|
|
22
|
+
1. **사용 규약** (머리 주석) — 마크업에서 어느 자리에 어느 옵션을 쓰는지. 기본 버튼·보조 버튼·위험 버튼·크기 단계, 카드 타입, 입력 필드 조합, 배지. 여기 적힌 것만 쓰고 적히지 않은 옵션(`btn-shape` 등)은 쓰지 않습니다. AI·도구는 이 절을 규격처럼 읽습니다.
|
|
23
|
+
2. **브랜드 램프** — `:root` 에서 primitive 램프(`--_hue-*`)를 브랜드 색으로 덮습니다. 라이트·다크가 같이 따라옵니다. 진한 primary 면 라이트 `--color-on-primary` 를 흰색으로.
|
|
24
|
+
3. **컴포넌트 변수** — 컴포넌트 셀렉터(`.m3-btn`, `.m3-card`, `.m3-text-field.field\:outlined.field-label\:top` …)에 변수 값. 옵션으로 되는 것은 옵션으로 두고, 옵션이 없는 것만 여기서.
|
|
25
|
+
|
|
26
|
+
## 만드는 법
|
|
27
|
+
|
|
28
|
+
기존 사이트가 있으면 그 CSS 에서 값을 뽑습니다. 버튼 높이·모서리·글꼴 크기의 최빈값, 카드 모서리·여백, 입력 높이, 브랜드 색과 회색 램프. 없으면 M3 기본값을 그대로 두고 브랜드 램프만 씁니다.
|
|
29
|
+
|
|
30
|
+
테마가 필요한 변수가 규격에 없으면 그건 materials 의 빈 자리입니다. 페이지 CSS 로 우회하지 말고 이슈로 남깁니다.
|
package/themes/ncafe.css
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/* ===== NCafe 브랜드 테마 =====
|
|
2
|
+
* newtil 컴포넌트 위에 얹는 "브랜드가 정한 값" 한 벌. 페이지는 이 파일을 링크만 하고 컴포넌트 변수를 직접 덮지 않는다.
|
|
3
|
+
* 형식 설명: themes/README.md
|
|
4
|
+
* 순서: design-tokens → materials → 이 파일 → 페이지 CSS(레이아웃만).
|
|
5
|
+
*
|
|
6
|
+
* ── 사용 규약 (마크업에서 고를 옵션) ─────────────────────────────────────
|
|
7
|
+
* 버튼 기본 : <button class="m3-btn"> (filled, 40px)
|
|
8
|
+
* 보조 : <button class="m3-btn btn:outlined">
|
|
9
|
+
* 위험 : <button class="m3-btn btn:outlined btn-color:danger">
|
|
10
|
+
* 작게 : + btn-size:xs (표 안·카드 안, 32px)
|
|
11
|
+
* 크게 : + btn-size:md (히어로·폼 제출, 44px)
|
|
12
|
+
* 알약/각진 모서리 옵션(btn-shape)은 쓰지 않는다 — 모서리는 이 테마가 정한다.
|
|
13
|
+
* 카드 <div class="m3-card card:outlined card-padding:self"> (elevated·filled 안 씀)
|
|
14
|
+
* 입력 <div class="m3-text-field field:outlined field-label:top"> <label>…</label> <input> </div>
|
|
15
|
+
* 레이블 없는 필터/검색: field-label:none. select 도 같은 래퍼 안에.
|
|
16
|
+
* 배지 <span class="m3-badge badge:inline badge-color:…">
|
|
17
|
+
* ─────────────────────────────────────────────────────────────────────── */
|
|
18
|
+
|
|
19
|
+
/* 브랜드 램프 — primary 가 이 값을 가리킨다 (라이트 500/600/700/100, 다크 400/300/200/900) */
|
|
20
|
+
:root {
|
|
21
|
+
--_hue-green-100: #f2eae4;
|
|
22
|
+
--_hue-green-200: #d9c3b5;
|
|
23
|
+
--_hue-green-300: #b89e8a;
|
|
24
|
+
--_hue-green-400: #9a7a63;
|
|
25
|
+
--_hue-green-500: #5c3d2e;
|
|
26
|
+
--_hue-green-600: #462d21;
|
|
27
|
+
--_hue-green-700: #35211a;
|
|
28
|
+
--_hue-green-900: #2a1a13;
|
|
29
|
+
|
|
30
|
+
/* 따뜻한 회색 — 표면·글자·테두리 */
|
|
31
|
+
--_hue-gray-50: #faf9f7;
|
|
32
|
+
--_hue-gray-100: #f7f5f2;
|
|
33
|
+
--_hue-gray-200: #e6e1da;
|
|
34
|
+
--_hue-gray-300: #d8d2cb;
|
|
35
|
+
--_hue-gray-400: #b0a79e;
|
|
36
|
+
--_hue-gray-500: #8a817a;
|
|
37
|
+
--_hue-gray-600: #7b736a;
|
|
38
|
+
--_hue-gray-700: #4a423c;
|
|
39
|
+
--_hue-gray-800: #2e2824;
|
|
40
|
+
--_hue-gray-900: #1f1b18;
|
|
41
|
+
--_hue-gray-950: #14110f;
|
|
42
|
+
|
|
43
|
+
--font-family-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
|
|
44
|
+
"Segoe UI", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
45
|
+
}
|
|
46
|
+
/* 진한 primary 위 글자는 흰색 (토큰 기본은 밝은 primary 전제) */
|
|
47
|
+
:root, [data-theme="light"] { --color-on-primary: #ffffff; }
|
|
48
|
+
|
|
49
|
+
/* ── 버튼: 8px 모서리, 단계별 높이 40/32/44 ── */
|
|
50
|
+
.m3-btn {
|
|
51
|
+
--btn-border-radius: var(--radius-3);
|
|
52
|
+
--btn-font-weight: var(--font-weight-semibold);
|
|
53
|
+
--btn-gap: 0.375rem;
|
|
54
|
+
--btn-height-sm: 2.5rem; --btn-padding-sm: 0 1rem; --btn-font-size-sm: 0.875rem;
|
|
55
|
+
--btn-height-xs: 2rem; --btn-padding-xs: 0 0.75rem; --btn-font-size-xs: 0.8125rem;
|
|
56
|
+
--btn-height-md: 2.75rem; --btn-padding-md: 0 1.25rem; --btn-font-size-md: 0.9375rem;
|
|
57
|
+
/* 옵션 없는 기본 = sm 단계 */
|
|
58
|
+
--btn-height: var(--btn-height-sm); --btn-padding: var(--btn-padding-sm); --btn-font-size: var(--btn-font-size-sm);
|
|
59
|
+
}
|
|
60
|
+
.m3-btn.btn\:outlined { --btn-background-color: var(--color-surface); }
|
|
61
|
+
.m3-btn.btn\:outlined.btn-color\:danger { --btn-border-color: var(--color-danger-subtle); }
|
|
62
|
+
|
|
63
|
+
/* ── 카드: 16px 모서리, 24px 여백 ── */
|
|
64
|
+
.m3-card {
|
|
65
|
+
--card-border-radius: 1rem;
|
|
66
|
+
--card-padding-x: 1.5rem;
|
|
67
|
+
--card-padding-y: 1.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* ── 텍스트 필드(외부 레이블·테두리형): 40px, 8px 모서리, 카드와 같은 테두리색 ── */
|
|
71
|
+
.m3-text-field.field\:outlined.field-label\:top,
|
|
72
|
+
.m3-text-field.field\:outlined.field-label\:none {
|
|
73
|
+
--field-input-box-border-radius: var(--radius-3);
|
|
74
|
+
--field-input-box-min-height: 2.5rem;
|
|
75
|
+
--field-min-height: 2.5rem;
|
|
76
|
+
--field-border-radius: var(--radius-3);
|
|
77
|
+
--field-background: var(--color-surface);
|
|
78
|
+
--field-padding-top: 0;
|
|
79
|
+
--field-outline-color: var(--color-border);
|
|
80
|
+
--field-label-weight: var(--font-weight-semibold);
|
|
81
|
+
--field-font-size: 0.875rem;
|
|
82
|
+
--field-outline-color-focus: var(--color-primary);
|
|
83
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* ===== 뉴렉처 브랜드 테마 =====
|
|
2
|
+
* newtil 컴포넌트 위에 얹는 "브랜드가 정한 값" 한 벌. 페이지는 이 파일을 링크만 하고 컴포넌트 변수를 직접 덮지 않는다.
|
|
3
|
+
* 형식 설명: themes/README.md. 값의 출처: newlecture-app frontend/app/globals.css 와 module.css 최빈값 (2026-09-17).
|
|
4
|
+
* 순서: design-tokens → materials → 이 파일 → 페이지 CSS(레이아웃만).
|
|
5
|
+
*
|
|
6
|
+
* ── 사용 규약 (마크업에서 고를 옵션) ─────────────────────────────────────
|
|
7
|
+
* 버튼 기본 : <button class="m3-btn"> (filled 인디고, 40px)
|
|
8
|
+
* 보조 : <button class="m3-btn btn:outlined">
|
|
9
|
+
* 조용 : <button class="m3-btn btn:text"> (툴바·카드 안 링크성 동작)
|
|
10
|
+
* 위험 : <button class="m3-btn btn:outlined btn-color:danger">
|
|
11
|
+
* 작게 : + btn-size:xs (표 안·칩 옆, 32px)
|
|
12
|
+
* 크게 : + btn-size:md (폼 제출·CTA, 44px)
|
|
13
|
+
* 알약/각진 모서리 옵션(btn-shape)은 쓰지 않는다 — 모서리는 이 테마가 정한다.
|
|
14
|
+
* 카드 <div class="m3-card card:outlined card-padding:self"> (슬롯 구조를 쓸 때는 card-padding:self 생략)
|
|
15
|
+
* 입력 <div class="m3-text-field field:outlined field-label:top"> <label>…</label> <input> </div>
|
|
16
|
+
* 레이블 없는 검색·필터: field-label:none. select 도 같은 래퍼 안에.
|
|
17
|
+
* 배지 <span class="m3-badge badge:inline badge-color:…"> (상태 표시. 개수는 badge 기본)
|
|
18
|
+
* ─────────────────────────────────────────────────────────────────────── */
|
|
19
|
+
|
|
20
|
+
/* 브랜드 램프 — 인디고. primary 가 이 값을 가리킨다 (라이트 500/600/700/100, 다크 400/300/200/900) */
|
|
21
|
+
:root {
|
|
22
|
+
--_hue-green-100: #e0e7ff;
|
|
23
|
+
--_hue-green-200: #c7d2fe;
|
|
24
|
+
--_hue-green-300: #a5b4fc;
|
|
25
|
+
--_hue-green-400: #818cf8;
|
|
26
|
+
--_hue-green-500: #4f46e5;
|
|
27
|
+
--_hue-green-600: #4338ca;
|
|
28
|
+
--_hue-green-700: #3730a3;
|
|
29
|
+
--_hue-green-900: #312e81;
|
|
30
|
+
|
|
31
|
+
/* 슬레이트 회색 — 표면·글자·테두리 (앱 globals 의 bg-page/bg-card/text-*/border 값) */
|
|
32
|
+
--_hue-gray-50: #f8fafc;
|
|
33
|
+
--_hue-gray-100: #f1f5f9;
|
|
34
|
+
--_hue-gray-200: #e2e8f0;
|
|
35
|
+
--_hue-gray-300: #cbd5e1;
|
|
36
|
+
--_hue-gray-400: #94a3b8;
|
|
37
|
+
--_hue-gray-500: #64748b;
|
|
38
|
+
--_hue-gray-600: #475569;
|
|
39
|
+
--_hue-gray-700: #334155;
|
|
40
|
+
--_hue-gray-800: #1e293b;
|
|
41
|
+
--_hue-gray-900: #0f172a;
|
|
42
|
+
--_hue-gray-950: #020617;
|
|
43
|
+
|
|
44
|
+
--font-family-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
|
|
45
|
+
"Segoe UI", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
46
|
+
}
|
|
47
|
+
/* 진한 primary 위 글자는 흰색 (토큰 기본은 밝은 primary 전제) */
|
|
48
|
+
:root, [data-theme="light"] { --color-on-primary: #ffffff; }
|
|
49
|
+
|
|
50
|
+
/* ── 버튼: 8px 모서리(앱 최빈 0.5rem), 단계별 높이 40/32/44, 글꼴 14/13/15 ── */
|
|
51
|
+
.m3-btn {
|
|
52
|
+
--btn-border-radius: var(--radius-3);
|
|
53
|
+
--btn-font-weight: var(--font-weight-semibold);
|
|
54
|
+
--btn-gap: 0.375rem;
|
|
55
|
+
--btn-height-sm: 2.5rem; --btn-padding-sm: 0 1rem; --btn-font-size-sm: 0.875rem;
|
|
56
|
+
--btn-height-xs: 2rem; --btn-padding-xs: 0 0.75rem; --btn-font-size-xs: 0.8125rem;
|
|
57
|
+
--btn-height-md: 2.75rem; --btn-padding-md: 0 1.25rem; --btn-font-size-md: 0.9375rem;
|
|
58
|
+
--btn-height: var(--btn-height-sm); --btn-padding: var(--btn-padding-sm); --btn-font-size: var(--btn-font-size-sm);
|
|
59
|
+
}
|
|
60
|
+
.m3-btn.btn\:outlined { --btn-background-color: var(--color-surface); }
|
|
61
|
+
.m3-btn.btn\:outlined.btn-color\:danger { --btn-border-color: var(--color-danger-subtle); }
|
|
62
|
+
|
|
63
|
+
/* ── 카드: 12px 모서리(앱 카드 0.75rem), 24px 여백, 제목은 본문보다 한 단계 큰 굵은 글씨 ── */
|
|
64
|
+
.m3-card {
|
|
65
|
+
--card-border-radius: var(--radius-4);
|
|
66
|
+
--card-padding-x: 1.5rem;
|
|
67
|
+
--card-padding-y: 1.5rem;
|
|
68
|
+
--card-headline-size: var(--font-size-body-lg);
|
|
69
|
+
--card-headline-weight: var(--font-weight-bold);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* ── 텍스트 필드(외부 레이블·테두리형): 40px, 8px 모서리, 카드와 같은 테두리색 ── */
|
|
73
|
+
.m3-text-field.field\:outlined.field-label\:top,
|
|
74
|
+
.m3-text-field.field\:outlined.field-label\:none {
|
|
75
|
+
--field-input-box-border-radius: var(--radius-3);
|
|
76
|
+
--field-input-box-min-height: 2.5rem;
|
|
77
|
+
--field-min-height: 2.5rem;
|
|
78
|
+
--field-border-radius: var(--radius-3);
|
|
79
|
+
--field-background: var(--color-surface);
|
|
80
|
+
--field-padding-top: 0;
|
|
81
|
+
--field-outline-color: var(--color-border);
|
|
82
|
+
--field-label-weight: var(--font-weight-semibold);
|
|
83
|
+
--field-font-size: 0.875rem;
|
|
84
|
+
--field-outline-color-focus: var(--color-primary);
|
|
85
|
+
}
|