@things-factory/shell 10.0.13 → 10.0.18
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.
|
@@ -17,6 +17,13 @@ body {
|
|
|
17
17
|
--oops-note-icon-font: normal 18px var(--md-icon-font, 'Material Symbols Outlined');
|
|
18
18
|
--oops-note-title-font: bold 13px var(--theme-font);
|
|
19
19
|
--oops-note-title-margin: var(--margin-narrow) 0 2px 0;
|
|
20
|
-
|
|
20
|
+
/*
|
|
21
|
+
* 좁은 화면에서도 설명은 남긴다.
|
|
22
|
+
*
|
|
23
|
+
* 전에는 여기가 `normal 0px` 이었다. 글자 크기를 0 으로 만들어 설명을 지운 것이라, 460px 아래에서는
|
|
24
|
+
* 제목만 남고 무엇을 하면 되는지가 사라졌다. 홈 화면이 그 상태였다 — 「HOME DASHBOARD」한 줄만
|
|
25
|
+
* 보이고 다음에 할 일이 안 보였다. 자리가 좁으면 글자를 줄이고, 없애지 않는다.
|
|
26
|
+
*/
|
|
27
|
+
--oops-note-description-font: normal 11px var(--theme-font);
|
|
21
28
|
}
|
|
22
29
|
}
|
|
@@ -1,6 +1,55 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* 상태 의미색 — 정상·주의·정보·위험. 모든 앱이 여기서 가져다 쓴다.
|
|
3
|
+
*
|
|
4
|
+
* ── 왜 라이트·다크로 갈리나 (2026-08-30) ────────────────────────────────────
|
|
5
|
+
* 전에는 `:root` 한 벌뿐이었다. 그래서 다크 테마에서 밝은 초록·주황이 어두운 바탕에 그대로 얹혔고,
|
|
6
|
+
* 앱들이 각자 자기 값을 따로 갖게 됐다(operato-twin 이 `--twin-good`·`--twin-warn` 을 직접 들고 있었다).
|
|
7
|
+
* 두 화면을 나란히 놓으면 「정상」이 서로 다른 초록이었다.
|
|
8
|
+
*
|
|
9
|
+
* ── 값을 어떻게 잡았나 ──────────────────────────────────────────────────────
|
|
10
|
+
* 이 색들은 **글자색으로 쓰인다.** 그래서 WCAG AA(4.5:1)를 기준으로, 가장 불리한 바탕에 대고 잡았다.
|
|
11
|
+
*
|
|
12
|
+
* ```
|
|
13
|
+
* 라이트 기준 바탕 rgb(238 241 243) 앱들 중 가장 어두운 라이트 surface
|
|
14
|
+
* 다크 기준 바탕 rgb(51 52 58) 가장 밝은 다크 surface-container-highest
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* 색상(hue)과 채도는 그대로 두고 명도만 옮겼다 — 초록은 초록으로, 주황은 주황으로 남는다.
|
|
18
|
+
*
|
|
19
|
+
* ```
|
|
20
|
+
* 이전(라이트) 지금(라이트) 지금(다크)
|
|
21
|
+
* success #35a24a 2.88 #297d39 4.53 #35c46e 5.48
|
|
22
|
+
* warning #ee8d03 2.19 #9f5e02 4.54 #e0a24a 5.57
|
|
23
|
+
* info #398ace 3.25 #2b72ad 4.50 #61a2d8 4.53
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* 주의(warning)는 AA 를 맞추면 갈색에 가까워진다. 주황을 살리려면 3:1(#c97703)에서 멈춰야 하는데,
|
|
27
|
+
* 그러면 글자색으로 쓸 수 없다. **읽히는 쪽을 골랐다** — 상태는 색만으로 전하지 않고 글자를 함께
|
|
28
|
+
* 보이므로, 그 글자가 읽혀야 한다.
|
|
29
|
+
*
|
|
30
|
+
* ── danger 는 여기서 값을 정하지 않는다 ─────────────────────────────────────
|
|
31
|
+
* `--md-sys-color-error` 를 그대로 쓴다. 위험은 md 역할색에 대응이 있어서 팔레트가 정하는 것이 맞다.
|
|
32
|
+
* 다만 그 값의 대비는 앱 팔레트마다 다르다(셸 라이트 #fe594e 는 2.74 로 낮다) — 팔레트 쪽에서 볼 일이다.
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
/* 테마 클래스가 붙기 전 · 붙지 않는 앱을 위한 기본값. 라이트와 같다. */
|
|
1
36
|
:root {
|
|
2
37
|
--status-danger-color: var(--md-sys-color-error, #d14946);
|
|
3
|
-
--status-warning-color: #
|
|
4
|
-
--status-info-color: #
|
|
5
|
-
--status-success-color: #
|
|
38
|
+
--status-warning-color: #9f5e02;
|
|
39
|
+
--status-info-color: #2b72ad;
|
|
40
|
+
--status-success-color: #297d39;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.light {
|
|
44
|
+
--status-danger-color: var(--md-sys-color-error, #d14946);
|
|
45
|
+
--status-warning-color: #9f5e02;
|
|
46
|
+
--status-info-color: #2b72ad;
|
|
47
|
+
--status-success-color: #297d39;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dark {
|
|
51
|
+
--status-danger-color: var(--md-sys-color-error, #fbafa9);
|
|
52
|
+
--status-warning-color: #e0a24a;
|
|
53
|
+
--status-info-color: #61a2d8;
|
|
54
|
+
--status-success-color: #35c46e;
|
|
6
55
|
}
|
|
@@ -28,3 +28,40 @@
|
|
|
28
28
|
.dark {
|
|
29
29
|
color-scheme: dark;
|
|
30
30
|
}
|
|
31
|
+
|
|
32
|
+
/*
|
|
33
|
+
* 앱 글꼴을 md 타이포스케일에 잇는다.
|
|
34
|
+
*
|
|
35
|
+
* [무엇이 어긋나 있었나]
|
|
36
|
+
* 셸은 `--theme-font` 를 정의하고(`app-theme.css`) 자기 파생 토큰 15개에만 썼다. md 타이포스케일이
|
|
37
|
+
* 참조하는 `--md-ref-typeface-*` 에는 아무도 값을 넣지 않았다. 그래서 md 기반 공통 위젯 — 확인
|
|
38
|
+
* 대화상자(`ox-prompt`)·버튼 라벨·토스트 — 이 앱 글꼴을 못 받고 각자의 폴백(Roboto)으로 갈렸다.
|
|
39
|
+
* 한 화면 안에서 본문과 대화상자의 글꼴이 달랐다.
|
|
40
|
+
*
|
|
41
|
+
* 부품이 스타일을 빠뜨린 것이 아니다. 부품은 토큰으로 받도록 이미 짜여 있고, 그 토큰을 정한 곳이
|
|
42
|
+
* 없었을 뿐이다. 그러므로 고칠 자리는 부품이 아니라 토큰이다.
|
|
43
|
+
*
|
|
44
|
+
* [왜 여기인가]
|
|
45
|
+
* `app-theme.css` 에 넣으면 그 파일을 override 하는 앱이 이 규칙을 통째로 잃는다(파일 단위 대체).
|
|
46
|
+
* `theme-base.css` 는 어떤 앱도 같은 이름으로 두지 않으므로 항상 번들에 들어간다.
|
|
47
|
+
*
|
|
48
|
+
* [plain 과 brand 둘 다]
|
|
49
|
+
* md 타이포스케일은 본문·라벨(plain)과 제목(brand)을 다른 토큰으로 읽는다. 하나만 걸면 같은
|
|
50
|
+
* 대화상자에서 제목과 본문의 글꼴이 갈린다(operato-twin 에서 실제로 그랬다).
|
|
51
|
+
*
|
|
52
|
+
* [body 까지 짚는 이유]
|
|
53
|
+
* 셸은 `--theme-font` 를 body 에 정한다. 상속은 가까운 조상이 이기므로 html 에만 두면 body 아래에
|
|
54
|
+
* 붙는 토스트는 여전히 셸 값을 물려받는다. `body.light`·`body.dark` 로 한 번 더 짚어, 테마 파일의
|
|
55
|
+
* 병합 순서에 기대지 않고 앱 값이 이기게 한다.
|
|
56
|
+
*
|
|
57
|
+
* `:root` 를 빼고 body 만 짚는다: `--theme-font` 는 body 에 정의되므로, html 에서는 `var()` 가
|
|
58
|
+
* 풀리지 않아 값이 비어 버린다. 대화상자·토스트를 포함해 눈에 보이는 것은 모두 body 아래에 있다.
|
|
59
|
+
*
|
|
60
|
+
* 글꼴 값 자체는 여기서 정하지 않는다 — 앱이 `--theme-font` 하나만 정하면 된다.
|
|
61
|
+
*/
|
|
62
|
+
body,
|
|
63
|
+
body.light,
|
|
64
|
+
body.dark {
|
|
65
|
+
--md-ref-typeface-plain: var(--theme-font);
|
|
66
|
+
--md-ref-typeface-brand: var(--theme-font);
|
|
67
|
+
}
|