@things-factory/shell 10.0.6 → 10.0.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.
|
@@ -1,10 +1,33 @@
|
|
|
1
1
|
body {
|
|
2
|
-
|
|
2
|
+
/*
|
|
3
|
+
* 크롬(헤더바·좌측 레일)의 색. 두 모드가 서로 달라야 하므로 여기서 라이트 값을 두고
|
|
4
|
+
* 파일 아래 .dark 에서 갈라 놓는다. body(0,0,1) 보다 .dark(0,1,0) 가 우선하므로
|
|
5
|
+
* 같은 파일 안에서 결정된다 — 테마 파일 로드 순서에 의존하지 않는다.
|
|
6
|
+
*
|
|
7
|
+
* 라이트 = 브랜드 헤더(primary). primary 는 라이트 스킴에서 중간 톤이라 흰 글자와 짝을 이루는
|
|
8
|
+
* 앱 바로 적절하다. 클래스가 아직 붙지 않은 초기 렌더에도 이 값이 쓰이는데, 그 시점 화면은
|
|
9
|
+
* 라이트이므로 맞다.
|
|
10
|
+
*
|
|
11
|
+
* 앱이 직접 정하려면 --app-bar-background / --app-bar-color / --app-bar-border 를 지정한다.
|
|
12
|
+
*/
|
|
13
|
+
--app-bar-background: var(--md-sys-color-primary);
|
|
14
|
+
--app-bar-color: var(--md-sys-color-on-primary);
|
|
15
|
+
/*
|
|
16
|
+
* 크롬과 본문의 경계. 색차만으로는 팔레트에 따라 구분이 사라진다 —
|
|
17
|
+
* operato-board 다크에서 레일(primary-container rgb(55 51 49))과 본문(background rgb(53 51 48))이
|
|
18
|
+
* 대비 1.02 로 사실상 같은 색이었다. 그래서 경계선을 기본으로 둔다.
|
|
19
|
+
*/
|
|
20
|
+
--app-bar-border: 1px solid var(--md-sys-color-outline-variant);
|
|
21
|
+
|
|
22
|
+
--header-bar-background-color: var(--app-bar-background);
|
|
3
23
|
--header-bar-title: bold 17.5px var(--theme-font);
|
|
4
|
-
--header-bar-color: var(--
|
|
24
|
+
--header-bar-color: var(--app-bar-color);
|
|
25
|
+
--header-bar-border: var(--app-bar-border);
|
|
5
26
|
--header-bar-height: 42px;
|
|
6
27
|
|
|
7
|
-
|
|
28
|
+
/* 레일도 헤더와 같은 크롬 표면으로 묶는다 — 이전에는 서로 다른 역할이라 색이 갈라졌다 */
|
|
29
|
+
--nav-bar-background-color: var(--app-bar-background);
|
|
30
|
+
--nav-bar-border: var(--app-bar-border);
|
|
8
31
|
|
|
9
32
|
--group-bar-background-color: var(--md-sys-color-secondary-container);
|
|
10
33
|
--group-bar-textbutton: 16px/32px var(--theme-font);
|
|
@@ -40,6 +63,21 @@ body {
|
|
|
40
63
|
--splitter-hover-background-color: var(--md-sys-color-surface-variant);
|
|
41
64
|
}
|
|
42
65
|
|
|
66
|
+
/*
|
|
67
|
+
* 다크 크롬 — 팔레트 역할로 구성한다.
|
|
68
|
+
*
|
|
69
|
+
* 다크에서 브랜드 역할을 쓰면 밝은 띠가 되고(primary), primary-container 는 8개 팔레트 중 7개에서
|
|
70
|
+
* 본문보다 **밝아서**(↑) 크롬이 떠 보인다. surface-container-lowest 는 표면 계단의 최하단이라
|
|
71
|
+
* 전 팔레트에서 본문보다 어둡고(↓), 흰 글자 대비도 14.5~17.1 로 넉넉하다.
|
|
72
|
+
*
|
|
73
|
+
* .dark(0,1,0) 가 body(0,0,1) 보다 우선하므로 같은 파일 안에서 결정된다 —
|
|
74
|
+
* 테마 파일 로드 순서에 의존하지 않는다.
|
|
75
|
+
*/
|
|
76
|
+
.dark {
|
|
77
|
+
--app-bar-background: var(--md-sys-color-surface-container-lowest);
|
|
78
|
+
--app-bar-color: var(--md-sys-color-on-surface);
|
|
79
|
+
}
|
|
80
|
+
|
|
43
81
|
@media only screen and (max-width: 460px) {
|
|
44
82
|
body {
|
|
45
83
|
--button-container-margin: 0 -15px;
|