@operato/styles 10.16.2 → 11.0.0
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/CHANGELOG.md +27 -0
- package/dist/src/box-padding-editor-styles.d.ts +5 -0
- package/dist/src/box-padding-editor-styles.js +56 -83
- package/dist/src/box-padding-editor-styles.js.map +1 -1
- package/dist/src/button-container-styles.js +21 -16
- package/dist/src/button-container-styles.js.map +1 -1
- package/dist/src/common-header-styles.js +20 -15
- package/dist/src/common-header-styles.js.map +1 -1
- package/dist/src/line-styles.js +34 -21
- package/dist/src/line-styles.js.map +1 -1
- package/dist/src/property-grid-styles.js +321 -37
- package/dist/src/property-grid-styles.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [11.0.0](https://github.com/hatiolab/operato/compare/v10.29.0...v11.0.0) (2026-09-26)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/styles
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [10.23.0](https://github.com/hatiolab/operato/compare/v10.22.0...v10.23.0) (2026-09-24)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :sparkles: Styling
|
|
18
|
+
|
|
19
|
+
* **property-panel,input,styles:** quiet inspector, one vocabulary in both schemes ([40e67e9](https://github.com/hatiolab/operato/commit/40e67e9aced202151a4f2f8d7ef96ec840defc18))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### :bug: Bug Fix
|
|
23
|
+
|
|
24
|
+
* **styles:** word choices in a property radio row keep their width and wrap ([8554a3d](https://github.com/hatiolab/operato/commit/8554a3d2151859c3da57250e4520de91a582f2df))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### :rocket: New Features
|
|
28
|
+
|
|
29
|
+
* **font:** specimen cards for the font list; themeable danger buttons ([e3cafc0](https://github.com/hatiolab/operato/commit/e3cafc03eec6e5cb9e76ae640c05dd9129e4893f))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
### [10.16.2](https://github.com/hatiolab/operato/compare/v10.16.1...v10.16.2) (2026-09-18)
|
|
7
34
|
|
|
8
35
|
**Note:** Version bump only for package @operato/styles
|
|
@@ -1 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The padding editor: four numbers around a small box, laid out as the box they describe.
|
|
3
|
+
* Drawn in CSS from the scheme's tokens (the old version was a PNG sprite of brown blocks that
|
|
4
|
+
* ignored the theme entirely).
|
|
5
|
+
*/
|
|
1
6
|
export declare const BoxPaddingEditorStyles: import("lit").CSSResult;
|
|
@@ -1,99 +1,72 @@
|
|
|
1
|
-
import { css
|
|
2
|
-
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* The padding editor: four numbers around a small box, laid out as the box they describe.
|
|
4
|
+
* Drawn in CSS from the scheme's tokens (the old version was a PNG sprite of brown blocks that
|
|
5
|
+
* ignored the theme entirely).
|
|
6
|
+
*/
|
|
3
7
|
export const BoxPaddingEditorStyles = css `
|
|
4
|
-
:
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
+
/* The editor is the four numbers, not a slab: no fill or frame on the whole block. */
|
|
9
|
+
.property-grid > .box-padding.custom-editor,
|
|
8
10
|
.box-padding {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.box-padding .
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.box-padding .slide3 {
|
|
36
|
-
background-position: 100% -440px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.box-padding .slide4 {
|
|
40
|
-
background-position: 0 -360px;
|
|
41
|
-
background-color: rgba(69, 46, 41, 0.2);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.box-padding .slide5 {
|
|
45
|
-
background: none;
|
|
46
|
-
text-align: center;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.box-padding .slide6 {
|
|
50
|
-
background-position: 100% -160px;
|
|
51
|
-
background-color: rgba(69, 46, 41, 0.2);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.box-padding .slide7 {
|
|
55
|
-
background-position: 0 100%;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.box-padding .slide8 {
|
|
59
|
-
background-position: 50% -320px;
|
|
60
|
-
background-color: rgba(69, 46, 41, 0.2);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.box-padding .slide9 {
|
|
64
|
-
background-position: 0 0px;
|
|
11
|
+
background: transparent;
|
|
12
|
+
border: 0;
|
|
13
|
+
box-shadow: none;
|
|
14
|
+
min-height: 0;
|
|
15
|
+
display: grid;
|
|
16
|
+
grid-template-columns: 1fr auto 1fr;
|
|
17
|
+
grid-template-rows: auto auto auto;
|
|
18
|
+
grid-template-areas:
|
|
19
|
+
'. top .'
|
|
20
|
+
'left inner right'
|
|
21
|
+
'. bottom .';
|
|
22
|
+
gap: 2px 4px;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-items: center;
|
|
25
|
+
padding: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.box-padding .inner {
|
|
29
|
+
grid-area: inner;
|
|
30
|
+
width: 34px;
|
|
31
|
+
height: 18px;
|
|
32
|
+
border-radius: 3px;
|
|
33
|
+
border: 1px dashed var(--md-sys-color-outline);
|
|
34
|
+
opacity: 0.7;
|
|
65
35
|
}
|
|
66
36
|
|
|
67
37
|
.box-padding input {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
padding: 0px;
|
|
72
|
-
clear: both;
|
|
73
|
-
float: initial;
|
|
74
|
-
border: 1px solid #fff;
|
|
75
|
-
border-width: 0 0 1px 0;
|
|
38
|
+
width: 38px;
|
|
39
|
+
min-height: 22px;
|
|
40
|
+
padding: 1px 4px;
|
|
76
41
|
text-align: right;
|
|
77
|
-
font-size:
|
|
42
|
+
font-size: 0.76rem;
|
|
43
|
+
font-variant-numeric: tabular-nums;
|
|
44
|
+
color: var(--md-sys-color-on-surface);
|
|
45
|
+
background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));
|
|
46
|
+
border: 1px solid transparent;
|
|
47
|
+
border-radius: 6px;
|
|
48
|
+
outline: none;
|
|
78
49
|
}
|
|
79
50
|
|
|
80
|
-
.
|
|
81
|
-
|
|
82
|
-
display: block;
|
|
83
|
-
margin: auto;
|
|
51
|
+
.box-padding input:hover {
|
|
52
|
+
border-color: var(--md-sys-color-outline-variant);
|
|
84
53
|
}
|
|
85
54
|
|
|
86
|
-
.
|
|
87
|
-
|
|
55
|
+
.box-padding input:focus {
|
|
56
|
+
border-color: var(--md-sys-color-primary);
|
|
88
57
|
}
|
|
89
58
|
|
|
90
|
-
.
|
|
91
|
-
|
|
92
|
-
margin-top: -25px;
|
|
59
|
+
.box-padding input.top {
|
|
60
|
+
grid-area: top;
|
|
93
61
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
62
|
+
.box-padding input.left {
|
|
63
|
+
grid-area: left;
|
|
64
|
+
}
|
|
65
|
+
.box-padding input.right {
|
|
66
|
+
grid-area: right;
|
|
67
|
+
}
|
|
68
|
+
.box-padding input.bottom {
|
|
69
|
+
grid-area: bottom;
|
|
97
70
|
}
|
|
98
71
|
`;
|
|
99
72
|
//# sourceMappingURL=box-padding-editor-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../src/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../src/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The padding editor: four numbers around a small box, laid out as the box they describe.\n * Drawn in CSS from the scheme's tokens (the old version was a PNG sprite of brown blocks that\n * ignored the theme entirely).\n */\nexport const BoxPaddingEditorStyles = css`\n /* The editor is the four numbers, not a slab: no fill or frame on the whole block. */\n .property-grid > .box-padding.custom-editor,\n .box-padding {\n background: transparent;\n border: 0;\n box-shadow: none;\n min-height: 0;\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n '. top .'\n 'left inner right'\n '. bottom .';\n gap: 2px 4px;\n align-items: center;\n justify-items: center;\n padding: 0;\n }\n\n .box-padding .inner {\n grid-area: inner;\n width: 34px;\n height: 18px;\n border-radius: 3px;\n border: 1px dashed var(--md-sys-color-outline);\n opacity: 0.7;\n }\n\n .box-padding input {\n width: 38px;\n min-height: 22px;\n padding: 1px 4px;\n text-align: right;\n font-size: 0.76rem;\n font-variant-numeric: tabular-nums;\n color: var(--md-sys-color-on-surface);\n background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));\n border: 1px solid transparent;\n border-radius: 6px;\n outline: none;\n }\n\n .box-padding input:hover {\n border-color: var(--md-sys-color-outline-variant);\n }\n\n .box-padding input:focus {\n border-color: var(--md-sys-color-primary);\n }\n\n .box-padding input.top {\n grid-area: top;\n }\n .box-padding input.left {\n grid-area: left;\n }\n .box-padding input.right {\n grid-area: right;\n }\n .box-padding input.bottom {\n grid-area: bottom;\n }\n`\n"]}
|
|
@@ -157,32 +157,37 @@ export const ButtonContainerStyles = css `
|
|
|
157
157
|
[danger],
|
|
158
158
|
button[danger],
|
|
159
159
|
md-assist-chip[danger] {
|
|
160
|
-
|
|
161
|
-
|
|
160
|
+
/*
|
|
161
|
+
* The destructive fill. The scheme's error tokens are the default; a theme may hand in its
|
|
162
|
+
* own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red
|
|
163
|
+
* figures reads as a sticker rather than a button.
|
|
164
|
+
*/
|
|
165
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
166
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
162
167
|
|
|
163
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-on-error);
|
|
164
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
|
|
168
|
+
--md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
169
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
165
170
|
|
|
166
|
-
--md-assist-chip-hover-label-text-color: var(--md-sys-color-error);
|
|
167
|
-
--md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);
|
|
171
|
+
--md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
172
|
+
--md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
168
173
|
|
|
169
|
-
color: var(--md-sys-color-on-error);
|
|
170
|
-
background-color: var(--md-sys-color-error);
|
|
171
|
-
border-color: var(--md-sys-color-error);
|
|
174
|
+
color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
175
|
+
background-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
176
|
+
border-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
172
177
|
|
|
173
178
|
md-icon {
|
|
174
|
-
color: var(--md-sys-color-on-error);
|
|
179
|
+
color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
175
180
|
}
|
|
176
181
|
|
|
177
182
|
&:hover {
|
|
178
|
-
--md-assist-chip-outline-color: var(--md-sys-color-error);
|
|
179
|
-
--md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
|
|
183
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
184
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
180
185
|
|
|
181
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-error);
|
|
182
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-error);
|
|
186
|
+
--md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
187
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
183
188
|
|
|
184
|
-
color: var(--md-sys-color-error);
|
|
185
|
-
background-color: var(--md-sys-color-on-error);
|
|
189
|
+
color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
190
|
+
background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
186
191
|
}
|
|
187
192
|
}
|
|
188
193
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-container-styles.js","sourceRoot":"","sources":["../../src/button-container-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,iCAAiC,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAExG,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;2CAaG,iBAAiB,CAAC,yBAAyB,CAAC;6CAC1C,iBAAiB,CAAC,yBAAyB,CAAC;yCAChD,iBAAiB,CAAC,yBAAyB,CAAC;6CACxC,iBAAiB,CAAC,yBAAyB,CAAC;iDACxC,iBAAiB,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;cAyB/E,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAoDtC,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2C5C,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC;;;;;;UAMlG,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC
|
|
1
|
+
{"version":3,"file":"button-container-styles.js","sourceRoot":"","sources":["../../src/button-container-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,iCAAiC,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAExG,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;2CAaG,iBAAiB,CAAC,yBAAyB,CAAC;6CAC1C,iBAAiB,CAAC,yBAAyB,CAAC;yCAChD,iBAAiB,CAAC,yBAAyB,CAAC;6CACxC,iBAAiB,CAAC,yBAAyB,CAAC;iDACxC,iBAAiB,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;cAyB/E,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAoDtC,YAAY,CAAC,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2C5C,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC;;;;;;UAMlG,YAAY,CAAC,yBAAyB,CAAC;UACvC,iBAAiB,CAAC,yBAAyB,EAAE,iCAAiC,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E3G,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { ACTION_HEIGHT_PLATFORM_EXCEPTIONS, actionHeight, suiteActionHeight } from './action-heights.js'\n\nexport const ButtonContainerStyles = css`\n .button-container {\n display: flex;\n margin-left: auto;\n padding: var(--spacing-small);\n gap: var(--spacing-small);\n\n text-transform: capitalize;\n\n /*\n * In the operato products a Material button in this bar takes the bar's height. Elsewhere the\n * declaration is empty and Material keeps its own (ADR-0060 decision 6-1).\n */\n --md-filled-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-outlined-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-text-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-elevated-button-container-height: ${suiteActionHeight('--context-action-height')};\n --md-filled-tonal-button-container-height: ${suiteActionHeight('--context-action-height')};\n }\n\n /*\n * 동작 버튼 — 페이지의 발행·취소·내보내기.\n *\n * ── 왜 칩이 아니라 button 인가 (2026-08-31) ────────────────────────────\n * 한동안 이 자리를 md-assist-chip 으로 그렸다. 머티리얼 버튼이 기본 40px 에 좌우 여백 24px 이라\n * 버튼이 서넛 놓이는 툴바에 크기 때문이었다. 그런데 칩은 두 가지를 잃는다.\n *\n * 뜻 칩은 「고를 수 있는 것」이고 버튼은 「하는 것」이다. 화면 낭독기가 그대로 읽는다\n * 위계 칩에는 단계 구분이 없다 — 「발행」과 「취소」가 똑같이 보인다\n *\n * 두 번째가 크다. 이 부품은 emphasis: { raised, danger } 를 이미 받고 있는데, 칩으로는 그 뜻을\n * 그리지 못해 raised 가 그림자 하나로 끝났다. 받은 것을 그리지 못하는 것이 문제였다.\n *\n * 크기는 토큰으로 정한다 — 머티리얼 기본값에 매이지 않으면 작게 만들 수 있다.\n */\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-small);\n\n box-sizing: border-box;\n height: ${actionHeight('--context-action-height')};\n padding: 0 var(--spacing-large);\n border: 1px solid var(--md-sys-color-outline-variant);\n border-radius: var(--button-border-radius, var(--md-sys-shape-corner-small));\n\n background-color: var(--button-background-color, var(--md-sys-color-surface-container-lowest));\n color: var(--button-color, var(--md-sys-color-on-surface));\n\n font-family: inherit;\n font-size: var(--fontsize-small);\n /* 본문과 같은 굵기면 문장인지 버튼인지 구별되지 않는다. */\n font-weight: 600;\n line-height: 1;\n text-wrap: nowrap;\n\n cursor: pointer;\n transition:\n background-color 0.12s,\n border-color 0.12s,\n color 0.12s;\n\n md-icon {\n --md-icon-size: var(--icon-size-small);\n\n flex: none;\n /* 아이콘만 강조색 — 버튼 전체를 칠하면 여럿 나란히 놓였을 때 화면이 시끄럽다. */\n color: var(--md-sys-color-primary);\n }\n\n &:hover {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n border-color: var(--md-sys-color-secondary);\n }\n\n /*\n * 키보드로 왔을 때. :focus 가 아니라 :focus-visible — 마우스로 눌러도 테두리가 남으면\n * 사용자는 「눌린 채로 있다」로 읽는다.\n */\n &:focus-visible {\n outline: 2px solid var(--md-sys-color-primary);\n outline-offset: 2px;\n }\n\n &:disabled {\n opacity: 0.38;\n cursor: default;\n pointer-events: none;\n }\n\n /* 아이콘만 있는 버튼 — 정사각. 글자가 없으므로 부르는 쪽이 title 을 붙인다. */\n &[icon-only] {\n width: ${actionHeight('--context-action-height')};\n padding: 0;\n }\n }\n\n /*\n * 주 동작 — 화면에서 하나만. emphasis: { raised: true } 로 선언한다.\n * 둘 이상을 이렇게 두면 어느 것도 주 동작이 아니게 된다.\n */\n button[raised],\n md-assist-chip[raised] {\n --md-assist-chip-outline-color: var(--md-sys-color-primary);\n --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);\n --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);\n --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);\n\n background-color: var(--md-sys-color-primary);\n border-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-on-primary);\n\n md-icon {\n color: var(--md-sys-color-on-primary);\n }\n\n /* 채운 버튼은 색을 바꾸지 않고 한 단계 어둡게 — 흰 글자가 계속 읽혀야 한다. */\n &:hover {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);\n border-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, black);\n color: var(--md-sys-color-on-primary);\n\n md-icon {\n color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n /*\n * With a finger. The platform keeps 44px; the operato products use one height for mouse and finger\n * (their suite value). A screen that raises --context-action-height still wins through max().\n */\n @media (pointer: coarse) {\n button {\n height: max(\n ${actionHeight('--context-action-height')},\n ${suiteActionHeight('--context-action-height', ACTION_HEIGHT_PLATFORM_EXCEPTIONS.contextActionTouch)}\n );\n }\n\n button[icon-only] {\n width: max(\n ${actionHeight('--context-action-height')},\n ${suiteActionHeight('--context-action-height', ACTION_HEIGHT_PLATFORM_EXCEPTIONS.contextActionTouch)}\n );\n }\n }\n\n [filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n [danger],\n button[danger],\n md-assist-chip[danger] {\n /*\n * The destructive fill. The scheme's error tokens are the default; a theme may hand in its\n * own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red\n * figures reads as a sticker rather than a button.\n */\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));\n\n --md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-color, var(--md-sys-color-on-error));\n background-color: var(--danger-button-background, var(--md-sys-color-error));\n border-color: var(--danger-button-background, var(--md-sys-color-error));\n\n md-icon {\n color: var(--danger-button-color, var(--md-sys-color-on-error));\n }\n\n &:hover {\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-hover-color, var(--md-sys-color-error));\n background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n }\n }\n\n select,\n input[type='text'] {\n background-color: var(--button-background-color, var(--md-sys-color-secondary-container));\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--button-border-radius);\n padding: 0 var(--spacing-tiny);\n\n font-size: var(--fontsize-default);\n color: var(--button-color, var(--md-sys-color-on-secondary-container));\n }\n\n [filler] {\n flex: 1;\n }\n\n @media screen and (max-width: 460px) {\n .button-container {\n padding: 0;\n gap: 0;\n }\n\n button,\n md-icon {\n border-radius: 0;\n }\n\n button:not(:last-child),\n md-icon:not(:last-child) {\n border-right-width: 0;\n }\n }\n`\n"]}
|
|
@@ -265,28 +265,33 @@ export const CommonHeaderStyles = css `
|
|
|
265
265
|
[danger],
|
|
266
266
|
button[danger],
|
|
267
267
|
md-assist-chip[danger] {
|
|
268
|
-
|
|
269
|
-
|
|
268
|
+
/*
|
|
269
|
+
* The destructive fill. The scheme's error tokens are the default; a theme may hand in its
|
|
270
|
+
* own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red
|
|
271
|
+
* figures reads as a sticker rather than a button.
|
|
272
|
+
*/
|
|
273
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
274
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
270
275
|
|
|
271
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-on-error);
|
|
272
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
|
|
276
|
+
--md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
277
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
273
278
|
|
|
274
|
-
--md-assist-chip-hover-label-text-color: var(--md-sys-color-error);
|
|
275
|
-
--md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);
|
|
279
|
+
--md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
280
|
+
--md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
276
281
|
|
|
277
|
-
color: var(--md-sys-color-on-error);
|
|
278
|
-
background-color: var(--md-sys-color-error);
|
|
279
|
-
border-color: var(--md-sys-color-error);
|
|
282
|
+
color: var(--danger-button-color, var(--md-sys-color-on-error));
|
|
283
|
+
background-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
284
|
+
border-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
280
285
|
|
|
281
286
|
&:hover {
|
|
282
|
-
--md-assist-chip-outline-color: var(--md-sys-color-error);
|
|
283
|
-
--md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
|
|
287
|
+
--md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));
|
|
288
|
+
--md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
284
289
|
|
|
285
|
-
--md-assist-chip-label-text-color: var(--md-sys-color-error);
|
|
286
|
-
--md-assist-chip-leading-icon-color: var(--md-sys-color-error);
|
|
290
|
+
--md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
291
|
+
--md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
287
292
|
|
|
288
|
-
color: var(--md-sys-color-error);
|
|
289
|
-
background-color: var(--md-sys-color-on-error);
|
|
293
|
+
color: var(--danger-button-hover-color, var(--md-sys-color-error));
|
|
294
|
+
background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));
|
|
290
295
|
}
|
|
291
296
|
}
|
|
292
297
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common-header-styles.js","sourceRoot":"","sources":["../../src/common-header-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuIjB,YAAY,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLxD,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { actionHeight } from './action-heights.js'\n\nexport const CommonHeaderStyles = css`\n .header {\n display: grid;\n grid-template-areas:\n 'title actions'\n 'filters filters';\n gap: var(--spacing-small) var(--spacing-medium);\n\n /*\n * ── 이 여백이 머리 줄의 위아래 숨이다 ──────────────────────────────────\n * 머리는 그리스트 맨 위에 얹히고, 본문은 머리가 끝나는 자리에서 시작한다. 그래서 머리 안의\n * 내용(필터 칩 · 필터 폼) 위아래 여백은 **이 padding 하나가 정한다** — 한쪽만 넓어지는 일이\n * 없다.\n *\n * 4px(= medium/2)이었을 때 좁아 보였다. 눈금의 다음 값이 8px 이고, 그것이 마침 가로와 같아서\n * **네 면을 한 값으로** 쓴다 — 눈금에 없는 값을 위해 토큰을 새로 지어내지 않는다.\n *\n * 가로가 그리스트의 좌우 padding 과 같은 값이어야 머리 안의 첫 요소가 표의 첫 칸과 **같은 왼쪽\n * 기준선**에 선다. 그건 취향이 아니라 맞춰야 하는 값이고, 세로도 같은 값이면 어긋날 일이 없다.\n */\n padding: var(--spacing-medium);\n\n align-items: center;\n\n .title {\n grid-area: title;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n\n font: var(--subtitle-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n\n .filters {\n grid-area: filters;\n border: none;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-medium) var(--spacing-large);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-large);\n\n .filter {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--spacing-small);\n }\n\n label {\n font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))\n var(--fontsize-default) var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n }\n\n .filters:empty {\n display: none;\n }\n\n .actions {\n grid-area: actions;\n margin-left: auto;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: var(--spacing-small);\n\n * {\n cursor: pointer;\n }\n\n .textbtn,\n .iconbtn {\n background-color: var(--md-sys-color-secondary-container);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n\n color: var(--md-sys-color-on-secondary-container);\n font: var(--button-font);\n\n &:hover {\n border: var(--button-activ-border);\n background-color: var(--button-activ-background-color);\n box-shadow: var(--button-active-box-shadow);\n\n color: var(--md-sys-color-on-secondary);\n }\n }\n\n .iconbtn {\n line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--icon-size-medium);\n }\n }\n\n button {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n }\n }\n\n :empty {\n padding: 0;\n }\n }\n\n .footer {\n display: flex;\n flex-direction: row;\n text-align: right;\n background-color: var(--md-sys-color-surface-variant);\n padding: 0;\n\n /*\n * The footer is a popup's action row, so it reads the popup token (ADR-0060 decision 6). One use,\n * one token: popups moving to <ox-popup-actions> and popups still on this footer stay the same\n * height while the move is under way.\n */\n button {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n justify-content: center;\n min-height: ${actionHeight('--popup-action-height')};\n padding: var(--spacing-tiny) var(--spacing-medium);\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n line-height: 2;\n border-width: 0;\n border-radius: 0;\n border-left: 1px solid var(--md-sys-color-surface);\n }\n\n button[ok],\n button[done] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n [filler] {\n margin-left: auto;\n }\n\n /*\n * ── 손가락과 마우스는 다른 바닥을 원한다 ──────────────────────────────\n *\n * 위의 모양은 **휴대폰의 하단 액션바**다. 회색 띠에 각진 단추가 칸막이 선으로 붙어 화면 폭을\n * 꽉 채운다 — 엄지로 누르는 자리라 그게 맞다.\n *\n * 마우스로 쓰는 화면에서는 그 문법이 답답하다. 상자 안에 또 하나의 띠가 들어앉고, 단추 글자가\n * 본문(14px)보다 큰 16px 에 줄높이 2 라 띠가 두꺼워진다. 각진 단추와 칸막이 선은 이 제품의\n * 다른 컨트롤(알약 · 둥근 카드)과도 어긋난다.\n *\n * 폭이 아니라 **입력 장치**로 가른다 — 좁은 창에서 마우스를 쓰는 사람에게 액션바를 줄 이유가\n * 없고, 큰 태블릿에서 손가락으로 누르는 사람에게는 줘야 한다. 메뉴 레일이 같은 규칙을 쓴다.\n */\n @media (pointer: fine) {\n & {\n /* 띠를 걷는다. 바닥은 팝업의 면 그대로이고, 위쪽 실선 한 올이 경계를 맡는다. */\n background-color: transparent;\n border-top: 1px solid var(--md-sys-color-outline-variant);\n gap: var(--spacing-small, 4px);\n padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px);\n align-items: center;\n }\n\n button {\n padding: 0 var(--spacing-large, 12px);\n gap: var(--spacing-small, 4px);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n line-height: 1.4;\n /*\n * ── 모서리는 **담는 면**을 따른다 (동심 모서리) ────────────────────────\n *\n * 페이지 담는 면 0 — 꽉 찬 평면, 직각 격자 → 컨트롤 6px (저장)\n * 팝업 담는 면 16px — 떠 있는 둥근 카드 → 컨트롤 알약\n *\n * 이 바닥은 팝업 안에만 선다(마우스 화면). 그래서 알약이다. 페이지의 저장이 6px 인 것과\n * 갈리는데, 그것이 불일치가 아니라 **같은 원칙을 두 번 적용한 결과**다.\n *\n * ── 한때 5px 로 바꿨다. 되돌렸다 ──────────────────────────────────────\n * 테마가 Material 단추의 모양을 못 박아 둔 것을 보고\n *\n * shell/client/themes/material-theme.css:19-22\n * --md-{text,filled,outlined,elevated}-button-container-shape: var(--md-sys-shape-corner-small)\n *\n * 「제품이 이미 정했으니 알약은 이탈」이라고 판단했다. 그 값은 **페이지 단추를 위한\n * 것**이고 팝업 안이라는 조건을 따로 본 적이 없다. 이제 CommonPopupStyles 가 팝업 안에서\n * 그 토큰을 덮으므로, Material 단추를 쓰는 팝업 열 곳도 함께 알약이다.\n *\n * 값을 팝업이 바꿀 수 있다 — --popup-control-radius 를 내리면 이 바닥이 따른다.\n * CommonPopupStyles 가 그 짝을 선언한다.\n *\n * [확인함] 2026-09-04 · corner-full 999px · 페이지 저장 6px/32px ·\n * 팝업 카드 [overlayed] 16px\n */\n border-radius: var(--popup-control-radius, 999em);\n /* 칸막이 선을 걷는다 — 단추가 저마다 자기 모양을 가지므로 나눌 필요가 없다. */\n border-left: none;\n cursor: pointer;\n transition: background-color 0.12s ease-out;\n }\n\n /* 곁 동작은 글자 단추다. 눌릴 수 있다는 것은 마우스를 올릴 때 면으로 말한다. */\n button:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n /*\n * 값을 지우는 동작은 왼쪽 끝에 따로 선다. 한 단 흐리게 둔다 — 자주 쓰는 일이 아니고,\n * 확정과 같은 무게로 두면 잘못 누른다.\n */\n button[clear] {\n color: var(--md-sys-color-on-surface-variant);\n }\n\n button[clear]:hover {\n color: var(--md-sys-color-on-surface);\n }\n\n button md-icon {\n --md-icon-size: 18px;\n }\n\n /*\n * ── 할 수 없는 단추는 **할 수 없어 보인다** ──────────────────────────\n *\n * 아무 일도 하지 않는 단추를 그대로 두면, 누른 사람이 자기가 무엇을 잘못했는지 모른다.\n * 참조 팝업에서 고른 것이 없을 때 확인이 그랬다 — 눌리기는 하고 아무 일이 없었다.\n *\n * 채움을 걷고 잉크를 흐린다. 마우스 커서도 바꾼다 — 올려 보면 알 수 있어야 한다.\n */\n button[disabled],\n button[disabled]:hover {\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n cursor: default;\n box-shadow: none;\n }\n\n /* 주 동작 하나만 채운다. 둘을 채우면 어느 쪽이 그 일인지 흐려진다. */\n button[ok]:hover,\n button[done]:hover {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary));\n }\n }\n }\n\n [danger],\n button[danger],\n md-assist-chip[danger] {\n --md-assist-chip-outline-color: var(--md-sys-color-error);\n --md-assist-chip-elevated-container-color: var(--md-sys-color-error);\n\n --md-assist-chip-label-text-color: var(--md-sys-color-on-error);\n --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);\n\n --md-assist-chip-hover-label-text-color: var(--md-sys-color-error);\n --md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);\n\n color: var(--md-sys-color-on-error);\n background-color: var(--md-sys-color-error);\n border-color: var(--md-sys-color-error);\n\n &:hover {\n --md-assist-chip-outline-color: var(--md-sys-color-error);\n --md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);\n\n --md-assist-chip-label-text-color: var(--md-sys-color-error);\n --md-assist-chip-leading-icon-color: var(--md-sys-color-error);\n\n color: var(--md-sys-color-error);\n background-color: var(--md-sys-color-on-error);\n }\n }\n\n @media only screen and (max-width: 460px) {\n .header {\n padding: 0;\n gap: 0;\n\n grid-template-areas:\n 'actions'\n 'filters';\n\n .title {\n display: none;\n }\n\n .filters {\n flex-wrap: wrap;\n gap: var(--spacing-medium);\n border: none;\n }\n\n .actions {\n background-color: var(--md-sys-color-on-secondary-container);\n margin: 0;\n }\n }\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"common-header-styles.js","sourceRoot":"","sources":["../../src/common-header-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuIjB,YAAY,CAAC,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLxD,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { actionHeight } from './action-heights.js'\n\nexport const CommonHeaderStyles = css`\n .header {\n display: grid;\n grid-template-areas:\n 'title actions'\n 'filters filters';\n gap: var(--spacing-small) var(--spacing-medium);\n\n /*\n * ── 이 여백이 머리 줄의 위아래 숨이다 ──────────────────────────────────\n * 머리는 그리스트 맨 위에 얹히고, 본문은 머리가 끝나는 자리에서 시작한다. 그래서 머리 안의\n * 내용(필터 칩 · 필터 폼) 위아래 여백은 **이 padding 하나가 정한다** — 한쪽만 넓어지는 일이\n * 없다.\n *\n * 4px(= medium/2)이었을 때 좁아 보였다. 눈금의 다음 값이 8px 이고, 그것이 마침 가로와 같아서\n * **네 면을 한 값으로** 쓴다 — 눈금에 없는 값을 위해 토큰을 새로 지어내지 않는다.\n *\n * 가로가 그리스트의 좌우 padding 과 같은 값이어야 머리 안의 첫 요소가 표의 첫 칸과 **같은 왼쪽\n * 기준선**에 선다. 그건 취향이 아니라 맞춰야 하는 값이고, 세로도 같은 값이면 어긋날 일이 없다.\n */\n padding: var(--spacing-medium);\n\n align-items: center;\n\n .title {\n grid-area: title;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n\n font: var(--subtitle-font);\n color: var(--md-sys-color-on-secondary-container);\n text-transform: capitalize;\n }\n\n .filters {\n grid-area: filters;\n border: none;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n background-color: var(--md-sys-color-surface);\n padding: var(--spacing-medium) var(--spacing-large);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-large);\n\n .filter {\n display: flex;\n flex-direction: row;\n\n align-items: center;\n gap: var(--spacing-small);\n }\n\n label {\n font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))\n var(--fontsize-default) var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n }\n\n .filters:empty {\n display: none;\n }\n\n .actions {\n grid-area: actions;\n margin-left: auto;\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: var(--spacing-small);\n\n * {\n cursor: pointer;\n }\n\n .textbtn,\n .iconbtn {\n background-color: var(--md-sys-color-secondary-container);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n\n color: var(--md-sys-color-on-secondary-container);\n font: var(--button-font);\n\n &:hover {\n border: var(--button-activ-border);\n background-color: var(--button-activ-background-color);\n box-shadow: var(--button-active-box-shadow);\n\n color: var(--md-sys-color-on-secondary);\n }\n }\n\n .iconbtn {\n line-height: 0.9;\n\n md-icon {\n --md-icon-size: var(--icon-size-medium);\n }\n }\n\n button {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--spacing-small);\n padding: var(--spacing-tiny) var(--spacing-small);\n }\n }\n\n :empty {\n padding: 0;\n }\n }\n\n .footer {\n display: flex;\n flex-direction: row;\n text-align: right;\n background-color: var(--md-sys-color-surface-variant);\n padding: 0;\n\n /*\n * The footer is a popup's action row, so it reads the popup token (ADR-0060 decision 6). One use,\n * one token: popups moving to <ox-popup-actions> and popups still on this footer stay the same\n * height while the move is under way.\n */\n button {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n justify-content: center;\n min-height: ${actionHeight('--popup-action-height')};\n padding: var(--spacing-tiny) var(--spacing-medium);\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n line-height: 2;\n border-width: 0;\n border-radius: 0;\n border-left: 1px solid var(--md-sys-color-surface);\n }\n\n button[ok],\n button[done] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n [filler] {\n margin-left: auto;\n }\n\n /*\n * ── 손가락과 마우스는 다른 바닥을 원한다 ──────────────────────────────\n *\n * 위의 모양은 **휴대폰의 하단 액션바**다. 회색 띠에 각진 단추가 칸막이 선으로 붙어 화면 폭을\n * 꽉 채운다 — 엄지로 누르는 자리라 그게 맞다.\n *\n * 마우스로 쓰는 화면에서는 그 문법이 답답하다. 상자 안에 또 하나의 띠가 들어앉고, 단추 글자가\n * 본문(14px)보다 큰 16px 에 줄높이 2 라 띠가 두꺼워진다. 각진 단추와 칸막이 선은 이 제품의\n * 다른 컨트롤(알약 · 둥근 카드)과도 어긋난다.\n *\n * 폭이 아니라 **입력 장치**로 가른다 — 좁은 창에서 마우스를 쓰는 사람에게 액션바를 줄 이유가\n * 없고, 큰 태블릿에서 손가락으로 누르는 사람에게는 줘야 한다. 메뉴 레일이 같은 규칙을 쓴다.\n */\n @media (pointer: fine) {\n & {\n /* 띠를 걷는다. 바닥은 팝업의 면 그대로이고, 위쪽 실선 한 올이 경계를 맡는다. */\n background-color: transparent;\n border-top: 1px solid var(--md-sys-color-outline-variant);\n gap: var(--spacing-small, 4px);\n padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px);\n align-items: center;\n }\n\n button {\n padding: 0 var(--spacing-large, 12px);\n gap: var(--spacing-small, 4px);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n line-height: 1.4;\n /*\n * ── 모서리는 **담는 면**을 따른다 (동심 모서리) ────────────────────────\n *\n * 페이지 담는 면 0 — 꽉 찬 평면, 직각 격자 → 컨트롤 6px (저장)\n * 팝업 담는 면 16px — 떠 있는 둥근 카드 → 컨트롤 알약\n *\n * 이 바닥은 팝업 안에만 선다(마우스 화면). 그래서 알약이다. 페이지의 저장이 6px 인 것과\n * 갈리는데, 그것이 불일치가 아니라 **같은 원칙을 두 번 적용한 결과**다.\n *\n * ── 한때 5px 로 바꿨다. 되돌렸다 ──────────────────────────────────────\n * 테마가 Material 단추의 모양을 못 박아 둔 것을 보고\n *\n * shell/client/themes/material-theme.css:19-22\n * --md-{text,filled,outlined,elevated}-button-container-shape: var(--md-sys-shape-corner-small)\n *\n * 「제품이 이미 정했으니 알약은 이탈」이라고 판단했다. 그 값은 **페이지 단추를 위한\n * 것**이고 팝업 안이라는 조건을 따로 본 적이 없다. 이제 CommonPopupStyles 가 팝업 안에서\n * 그 토큰을 덮으므로, Material 단추를 쓰는 팝업 열 곳도 함께 알약이다.\n *\n * 값을 팝업이 바꿀 수 있다 — --popup-control-radius 를 내리면 이 바닥이 따른다.\n * CommonPopupStyles 가 그 짝을 선언한다.\n *\n * [확인함] 2026-09-04 · corner-full 999px · 페이지 저장 6px/32px ·\n * 팝업 카드 [overlayed] 16px\n */\n border-radius: var(--popup-control-radius, 999em);\n /* 칸막이 선을 걷는다 — 단추가 저마다 자기 모양을 가지므로 나눌 필요가 없다. */\n border-left: none;\n cursor: pointer;\n transition: background-color 0.12s ease-out;\n }\n\n /* 곁 동작은 글자 단추다. 눌릴 수 있다는 것은 마우스를 올릴 때 면으로 말한다. */\n button:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n /*\n * 값을 지우는 동작은 왼쪽 끝에 따로 선다. 한 단 흐리게 둔다 — 자주 쓰는 일이 아니고,\n * 확정과 같은 무게로 두면 잘못 누른다.\n */\n button[clear] {\n color: var(--md-sys-color-on-surface-variant);\n }\n\n button[clear]:hover {\n color: var(--md-sys-color-on-surface);\n }\n\n button md-icon {\n --md-icon-size: 18px;\n }\n\n /*\n * ── 할 수 없는 단추는 **할 수 없어 보인다** ──────────────────────────\n *\n * 아무 일도 하지 않는 단추를 그대로 두면, 누른 사람이 자기가 무엇을 잘못했는지 모른다.\n * 참조 팝업에서 고른 것이 없을 때 확인이 그랬다 — 눌리기는 하고 아무 일이 없었다.\n *\n * 채움을 걷고 잉크를 흐린다. 마우스 커서도 바꾼다 — 올려 보면 알 수 있어야 한다.\n */\n button[disabled],\n button[disabled]:hover {\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n cursor: default;\n box-shadow: none;\n }\n\n /* 주 동작 하나만 채운다. 둘을 채우면 어느 쪽이 그 일인지 흐려진다. */\n button[ok]:hover,\n button[done]:hover {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary));\n }\n }\n }\n\n [danger],\n button[danger],\n md-assist-chip[danger] {\n /*\n * The destructive fill. The scheme's error tokens are the default; a theme may hand in its\n * own pair - in a dark scheme the error tone is a pastel, and a pastel plate with dark red\n * figures reads as a sticker rather than a button.\n */\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-background, var(--md-sys-color-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-color, var(--md-sys-color-on-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-color, var(--md-sys-color-on-error));\n\n --md-assist-chip-hover-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-hover-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-color, var(--md-sys-color-on-error));\n background-color: var(--danger-button-background, var(--md-sys-color-error));\n border-color: var(--danger-button-background, var(--md-sys-color-error));\n\n &:hover {\n --md-assist-chip-outline-color: var(--danger-button-background, var(--md-sys-color-error));\n --md-assist-chip-elevated-container-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n\n --md-assist-chip-label-text-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n --md-assist-chip-leading-icon-color: var(--danger-button-hover-color, var(--md-sys-color-error));\n\n color: var(--danger-button-hover-color, var(--md-sys-color-error));\n background-color: var(--danger-button-hover-background, var(--md-sys-color-on-error));\n }\n }\n\n @media only screen and (max-width: 460px) {\n .header {\n padding: 0;\n gap: 0;\n\n grid-template-areas:\n 'actions'\n 'filters';\n\n .title {\n display: none;\n }\n\n .filters {\n flex-wrap: wrap;\n gap: var(--spacing-medium);\n border: none;\n }\n\n .actions {\n background-color: var(--md-sys-color-on-secondary-container);\n margin: 0;\n }\n }\n }\n`\n"]}
|
package/dist/src/line-styles.js
CHANGED
|
@@ -15,40 +15,53 @@ else {
|
|
|
15
15
|
setIconProperties();
|
|
16
16
|
}
|
|
17
17
|
export const LineStyles = css `
|
|
18
|
+
/*
|
|
19
|
+
* Line previews are drawn, not loaded: a 2px stroke in the current ink, dashed by CSS, so they
|
|
20
|
+
* follow the scheme (the PNG sprite they replace was black on white in both).
|
|
21
|
+
*/
|
|
18
22
|
.line-type {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
min-height: 20px;
|
|
26
|
+
padding: 0 6px;
|
|
27
|
+
color: var(--md-sys-color-on-surface);
|
|
22
28
|
}
|
|
23
|
-
|
|
24
|
-
|
|
29
|
+
|
|
30
|
+
.line-type::before {
|
|
31
|
+
content: '';
|
|
32
|
+
display: block;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 2px;
|
|
35
|
+
background: currentColor;
|
|
25
36
|
}
|
|
26
|
-
|
|
27
|
-
|
|
37
|
+
|
|
38
|
+
.line-type.round-dot::before {
|
|
39
|
+
height: 3px;
|
|
40
|
+
background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 6px 3px repeat-x;
|
|
28
41
|
}
|
|
29
|
-
.line-type.square-dot {
|
|
30
|
-
background
|
|
42
|
+
.line-type.square-dot::before {
|
|
43
|
+
background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px);
|
|
31
44
|
}
|
|
32
|
-
.line-type.dash {
|
|
33
|
-
background
|
|
45
|
+
.line-type.dash::before {
|
|
46
|
+
background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px);
|
|
34
47
|
}
|
|
35
|
-
.line-type.dash-dot {
|
|
36
|
-
background
|
|
48
|
+
.line-type.dash-dot::before {
|
|
49
|
+
background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px, currentColor 11px 13px, transparent 13px 16px);
|
|
37
50
|
}
|
|
38
|
-
.line-type.long-dash {
|
|
39
|
-
background
|
|
51
|
+
.line-type.long-dash::before {
|
|
52
|
+
background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 19px);
|
|
40
53
|
}
|
|
41
|
-
.line-type.long-dash-dot {
|
|
42
|
-
background
|
|
54
|
+
.line-type.long-dash-dot::before {
|
|
55
|
+
background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px);
|
|
43
56
|
}
|
|
44
|
-
.line-type.long-dash-dot-dot {
|
|
45
|
-
background
|
|
57
|
+
.line-type.long-dash-dot-dot::before {
|
|
58
|
+
background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px, currentColor 22px 24px, transparent 24px 27px);
|
|
46
59
|
}
|
|
47
60
|
|
|
48
61
|
.arrow-type {
|
|
49
62
|
background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
|
|
50
|
-
min-height:
|
|
51
|
-
padding:
|
|
63
|
+
min-height: 20px;
|
|
64
|
+
padding: 0 6px;
|
|
52
65
|
}
|
|
53
66
|
.arrow-type.begin-none {
|
|
54
67
|
background-position: 50% 16px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-styles.js","sourceRoot":"","sources":["../../src/line-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,yBAAyB,GAAG,IAAI,GAAG,CAAC,2CAA2C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAC5G,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,4CAA4C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE9G,SAAS,iBAAiB;IACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,yBAAyB,GAAG,CAAC,CAAA;IACvG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,OAAO,0BAA0B,GAAG,CAAC,CAAA;AAC3G,CAAC;AAED,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;IACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAA;AAClE,CAAC;KAAM,CAAC;IACN,iBAAiB,EAAE,CAAA;AACrB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"line-styles.js","sourceRoot":"","sources":["../../src/line-styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,yBAAyB,GAAG,IAAI,GAAG,CAAC,2CAA2C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAC5G,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,4CAA4C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE9G,SAAS,iBAAiB;IACxB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,OAAO,yBAAyB,GAAG,CAAC,CAAA;IACvG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,OAAO,0BAA0B,GAAG,CAAC,CAAA;AAC3G,CAAC;AAED,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;IACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAA;AAClE,CAAC;KAAM,CAAC;IACN,iBAAiB,EAAE,CAAA;AACrB,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJ5B,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nconst ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href\nconst ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href\n\nfunction setIconProperties() {\n document.body.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)\n document.body.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)\n}\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', setIconProperties)\n} else {\n setIconProperties()\n}\n\nexport const LineStyles = css`\n /*\n * Line previews are drawn, not loaded: a 2px stroke in the current ink, dashed by CSS, so they\n * follow the scheme (the PNG sprite they replace was black on white in both).\n */\n .line-type {\n display: flex;\n align-items: center;\n min-height: 20px;\n padding: 0 6px;\n color: var(--md-sys-color-on-surface);\n }\n\n .line-type::before {\n content: '';\n display: block;\n width: 100%;\n height: 2px;\n background: currentColor;\n }\n\n .line-type.round-dot::before {\n height: 3px;\n background: radial-gradient(circle, currentColor 1.4px, transparent 1.6px) 0 0 / 6px 3px repeat-x;\n }\n .line-type.square-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px);\n }\n .line-type.dash::before {\n background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 12px);\n }\n .line-type.dash-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px, currentColor 11px 13px, transparent 13px 16px);\n }\n .line-type.long-dash::before {\n background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 19px);\n }\n .line-type.long-dash-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px);\n }\n .line-type.long-dash-dot-dot::before {\n background: repeating-linear-gradient(90deg, currentColor 0 14px, transparent 14px 17px, currentColor 17px 19px, transparent 19px 22px, currentColor 22px 24px, transparent 24px 27px);\n }\n\n .arrow-type {\n background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;\n min-height: 20px;\n padding: 0 6px;\n }\n .arrow-type.begin-none {\n background-position: 50% 16px;\n }\n .arrow-type.begin-arrow {\n background-position: 50% -39px;\n }\n .arrow-type.begin-open-arrow {\n background-position: 50% -89px;\n }\n .arrow-type.begin-sharp-arrow {\n background-position: 50% -139px;\n }\n .arrow-type.begin-diamond {\n background-position: 50% -190px;\n }\n .arrow-type.begin-oval {\n background-position: 50% -238px;\n }\n .arrow-type.begin-cross {\n background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cline x1='38' y1='25' x2='80' y2='25' stroke='%23888' stroke-width='2'/%3E%3Cline x1='24' y1='17' x2='36' y2='33' stroke='%23888' stroke-width='2'/%3E%3Cline x1='36' y1='17' x2='24' y2='33' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E\") 50% center no-repeat;\n background-size: auto 100%;\n }\n .arrow-type.begin-size1 {\n background-position: 50% -286px;\n }\n .arrow-type.begin-size2 {\n background-position: 50% -336px;\n }\n .arrow-type.begin-size3 {\n background-position: 50% -386px;\n }\n .arrow-type.begin-size4 {\n background-position: 50% -436px;\n }\n .arrow-type.begin-size5 {\n background-position: 50% -486px;\n }\n .arrow-type.begin-size6 {\n background-position: 50% -536px;\n }\n .arrow-type.begin-size7 {\n background-position: 50% -589px;\n }\n .arrow-type.begin-size8 {\n background-position: 50% -639px;\n }\n .arrow-type.begin-size9 {\n background-position: 50% -689px;\n }\n .arrow-type.end-none {\n background-position: 50% 16px;\n }\n .arrow-type.end-arrow {\n background-position: 50% -739px;\n }\n .arrow-type.end-open-arrow {\n background-position: 50% -789px;\n }\n .arrow-type.end-sharp-arrow {\n background-position: 50% -839px;\n }\n .arrow-type.end-diamond {\n background-position: 50% -890px;\n }\n .arrow-type.end-oval {\n background-position: 50% -938px;\n }\n .arrow-type.end-cross {\n background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cline x1='20' y1='25' x2='62' y2='25' stroke='%23888' stroke-width='2'/%3E%3Cline x1='64' y1='17' x2='76' y2='33' stroke='%23888' stroke-width='2'/%3E%3Cline x1='76' y1='17' x2='64' y2='33' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E\") 50% center no-repeat;\n background-size: auto 100%;\n }\n .arrow-type.end-size1 {\n background-position: 50% -986px;\n }\n .arrow-type.end-size2 {\n background-position: 50% -1036px;\n }\n .arrow-type.end-size3 {\n background-position: 50% -1086px;\n }\n .arrow-type.end-size4 {\n background-position: 50% -1136px;\n }\n .arrow-type.end-size5 {\n background-position: 50% -1186px;\n }\n .arrow-type.end-size6 {\n background-position: 50% -1236px;\n }\n .arrow-type.end-size7 {\n background-position: 50% -1289px;\n }\n .arrow-type.end-size8 {\n background-position: 50% -1339px;\n }\n .arrow-type.end-size9 {\n background-position: 50% -1389px;\n }\n`\n"]}
|