@uniai-fe/uds-templates 0.1.5 → 0.1.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.
Files changed (6) hide show
  1. package/dist/styles.css +37 -25
  2. package/package.json +1 -1
  3. package/src/modal/core/components/FooterButtons.tsx +3 -1
  4. package/src/modal/core/components/Root.tsx +1 -1
  5. package/src/modal/styles/base.scss +36 -15
  6. package/src/modal/styles/container.scss +12 -18
package/dist/styles.css CHANGED
@@ -11,15 +11,27 @@
11
11
  --frame-device-width,
12
12
  480px
13
13
  );
14
- --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
15
- --uds-modal-surface-bg: var(--color-bg-surface-static-white);
16
- --uds-modal-surface-radius: var(--theme-radius-large-1);
17
- --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
18
- --uds-modal-max-width: min(
19
- 360px,
20
- calc(100vw - var(--spacing-padding-10) * 2)
14
+ --modal-overlay-bg: rgba(5, 6, 12, 0.55);
15
+ --modal-panel-width: 360px;
16
+ --modal-panel-max-width: calc(100vw - var(--spacing-padding-10, 32px) * 2);
17
+ --modal-panel-max-height: calc(100vh - var(--spacing-padding-10, 32px) * 2);
18
+ --modal-panel-bg: var(--color-bg-surface-static-white);
19
+ --modal-panel-radius: var(--theme-radius-large-1);
20
+ --modal-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
21
+ --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
22
+ --modal-footer-border-color: var(--modal-border-color);
23
+ --modal-stack-index: 0;
24
+ --modal-alert-body-color: var(--color-label-standard, #232629);
25
+ --modal-alert-body-font-size: var(--font-body-small-size, 14px);
26
+ --modal-dialog-title-color: var(--color-label-strong, #090a0b);
27
+ --modal-dialog-title-font-size: var(--font-heading-xsmall-size, 20px);
28
+ --modal-dialog-title-line-height: var(
29
+ --font-heading-xsmall-line-height,
30
+ 28px
21
31
  );
22
- --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
32
+ --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
33
+ --modal-dialog-body-color: var(--color-label-standard, #232629);
34
+ --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
23
35
  --auth-container-max-width: 335px;
24
36
  --auth-container-gap: var(--spacing-padding-7, 28px);
25
37
  --auth-container-padding-inline: var(--spacing-padding-6, 24px);
@@ -91,7 +103,7 @@
91
103
  .uds-modal-root {
92
104
  position: fixed;
93
105
  inset: 0;
94
- z-index: calc(400 + var(--uds-modal-index, 0));
106
+ z-index: calc(400 + var(--modal-stack-index, 0));
95
107
  display: flex;
96
108
  align-items: center;
97
109
  justify-content: center;
@@ -102,11 +114,11 @@
102
114
  .uds-modal-surface {
103
115
  position: relative;
104
116
  width: 100%;
105
- max-width: var(--uds-modal-max-width);
106
- max-height: var(--uds-modal-max-height);
107
- background-color: var(--uds-modal-surface-bg);
108
- border-radius: var(--uds-modal-surface-radius);
109
- box-shadow: var(--uds-modal-surface-shadow);
117
+ max-width: min(var(--modal-panel-width, 360px), var(--modal-panel-max-width, calc(100vw - var(--spacing-padding-10, 32px) * 2)));
118
+ max-height: var(--modal-panel-max-height, calc(100vh - var(--spacing-padding-10, 32px) * 2));
119
+ background-color: var(--modal-panel-bg, var(--color-bg-surface-static-white));
120
+ border-radius: var(--modal-panel-radius, var(--theme-radius-large-1));
121
+ box-shadow: var(--modal-panel-shadow, 0px 18px 40px rgba(8, 11, 30, 0.18));
110
122
  pointer-events: auto;
111
123
  display: flex;
112
124
  flex-direction: column;
@@ -116,7 +128,7 @@
116
128
  .uds-modal-dimmer {
117
129
  position: absolute;
118
130
  inset: 0;
119
- background-color: var(--uds-modal-overlay-bg);
131
+ background-color: var(--modal-overlay-bg, rgba(5, 6, 12, 0.55));
120
132
  pointer-events: auto;
121
133
  }
122
134
 
@@ -172,13 +184,13 @@
172
184
  padding: 0;
173
185
  gap: 0;
174
186
  min-height: var(--notice-dialog-action-height, 56px);
175
- border-top: 1px solid var(--uds-modal-footer-border-color, var(--dialog-border-color, var(--color-border-standard-cool-gray, #e4e5e7)));
187
+ border-top: 1px solid var(--modal-footer-border-color, var(--color-border-standard-cool-gray, #e4e5e7));
176
188
  }
177
189
  .uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button {
178
190
  border-radius: 0;
179
191
  }
180
192
  .uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button + .uds-modal-footer-button {
181
- border-left: 1px solid var(--uds-modal-footer-border-color, var(--dialog-border-color, var(--color-border-standard-cool-gray, #e4e5e7)));
193
+ border-left: 1px solid var(--modal-footer-border-color, var(--color-border-standard-cool-gray, #e4e5e7));
182
194
  }
183
195
 
184
196
  .uds-modal-footer-button-solid {
@@ -194,7 +206,7 @@
194
206
  .uds-modal-alert-message {
195
207
  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
196
208
  text-align: center;
197
- color: var(--dialog-body-color);
209
+ color: var(--modal-alert-body-color);
198
210
  word-break: keep-all;
199
211
  }
200
212
  .uds-modal-alert-message > p,
@@ -202,7 +214,7 @@
202
214
  .uds-modal-alert-message > strong,
203
215
  .uds-modal-alert-message > em {
204
216
  margin: 0;
205
- font-size: var(--dialog-body-font-size);
217
+ font-size: var(--modal-alert-body-font-size);
206
218
  line-height: 1.5em;
207
219
  font-weight: var(--font-body-small-weight, 400);
208
220
  word-break: inherit;
@@ -223,16 +235,16 @@
223
235
  }
224
236
  .uds-modal-dialog-header-content > h3 {
225
237
  margin: 0;
226
- color: var(--dialog-title-color);
227
- font-size: var(--dialog-title-font-size);
228
- line-height: var(--dialog-title-line-height);
229
- font-weight: var(--dialog-title-weight);
238
+ color: var(--modal-dialog-title-color);
239
+ font-size: var(--modal-dialog-title-font-size);
240
+ line-height: var(--modal-dialog-title-line-height);
241
+ font-weight: var(--modal-dialog-title-weight);
230
242
  }
231
243
 
232
244
  .uds-modal-dialog-body-content {
233
245
  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
234
246
  text-align: center;
235
- color: var(--dialog-body-color);
247
+ color: var(--modal-dialog-body-color);
236
248
  word-break: keep-all;
237
249
  }
238
250
  .uds-modal-dialog-body-content > p,
@@ -240,7 +252,7 @@
240
252
  .uds-modal-dialog-body-content > strong,
241
253
  .uds-modal-dialog-body-content > em {
242
254
  margin: 0;
243
- font-size: var(--dialog-body-font-size);
255
+ font-size: var(--modal-dialog-body-font-size);
244
256
  line-height: 1.5em;
245
257
  font-weight: var(--font-body-small-weight, 400);
246
258
  word-break: inherit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-templates",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "UNIAI Design System; UI Templates Package",
5
5
  "type": "module",
6
6
  "private": false,
package/src/modal/core/components/FooterButtons.tsx CHANGED
@@ -92,8 +92,8 @@ export function ModalFooterButtons({
92
92
  : "uds-modal-footer-button-solid",
93
93
  defaultOptions.className,
94
94
  );
95
+ const buttonKey = `modal/${stackKey}/footer/${button.role}/${index}`;
95
96
  const commonProps = {
96
- key: `uds-modal-footer-button-${button.stackKey}-${button.role}-${index}`,
97
97
  className: baseClassName,
98
98
  disabled: defaultOptions.disabled,
99
99
  block: resolvedBlock,
@@ -108,6 +108,7 @@ export function ModalFooterButtons({
108
108
  : "secondary";
109
109
  return (
110
110
  <Button.Text
111
+ key={buttonKey}
111
112
  {...commonProps}
112
113
  size={defaultOptions.textSize ?? "large"}
113
114
  priority={textPriority}
@@ -119,6 +120,7 @@ export function ModalFooterButtons({
119
120
 
120
121
  return (
121
122
  <Button.Default
123
+ key={buttonKey}
122
124
  {...commonProps}
123
125
  scale={defaultOptions.scale ?? "solid-large"}
124
126
  priority={defaultOptions.priority ?? "primary"}
package/src/modal/core/components/Root.tsx CHANGED
@@ -60,7 +60,7 @@ export function ModalRoot({
60
60
  const layerStyle = useMemo(
61
61
  () =>
62
62
  ({
63
- "--uds-modal-index": index,
63
+ "--modal-stack-index": index,
64
64
  }) as CSSProperties,
65
65
  [index],
66
66
  );
package/src/modal/styles/base.scss CHANGED
@@ -1,20 +1,32 @@
1
1
  /* foundation CSS는 소비 앱 루트에서 한 번만 로드된다는 전제하에 토큰만 참조한다. */
2
2
  :root {
3
- --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
4
- --uds-modal-surface-bg: var(--color-bg-surface-static-white);
5
- --uds-modal-surface-radius: var(--theme-radius-large-1);
6
- --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
7
- --uds-modal-max-width: min(
8
- 360px,
9
- calc(100vw - var(--spacing-padding-10) * 2)
3
+ --modal-overlay-bg: rgba(5, 6, 12, 0.55);
4
+ --modal-panel-width: 360px;
5
+ --modal-panel-max-width: calc(100vw - var(--spacing-padding-10, 32px) * 2);
6
+ --modal-panel-max-height: calc(100vh - var(--spacing-padding-10, 32px) * 2);
7
+ --modal-panel-bg: var(--color-bg-surface-static-white);
8
+ --modal-panel-radius: var(--theme-radius-large-1);
9
+ --modal-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
10
+ --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
11
+ --modal-footer-border-color: var(--modal-border-color);
12
+ --modal-stack-index: 0;
13
+ --modal-alert-body-color: var(--color-label-standard, #232629);
14
+ --modal-alert-body-font-size: var(--font-body-small-size, 14px);
15
+ --modal-dialog-title-color: var(--color-label-strong, #090a0b);
16
+ --modal-dialog-title-font-size: var(--font-heading-xsmall-size, 20px);
17
+ --modal-dialog-title-line-height: var(
18
+ --font-heading-xsmall-line-height,
19
+ 28px
10
20
  );
11
- --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
21
+ --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
22
+ --modal-dialog-body-color: var(--color-label-standard, #232629);
23
+ --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
12
24
  }
13
25
 
14
26
  .uds-modal-root {
15
27
  position: fixed;
16
28
  inset: 0;
17
- z-index: calc(400 + var(--uds-modal-index, 0));
29
+ z-index: calc(400 + var(--modal-stack-index, 0));
18
30
  display: flex;
19
31
  align-items: center;
20
32
  justify-content: center;
@@ -25,11 +37,20 @@
25
37
  .uds-modal-surface {
26
38
  position: relative;
27
39
  width: 100%;
28
- max-width: var(--uds-modal-max-width);
29
- max-height: var(--uds-modal-max-height);
30
- background-color: var(--uds-modal-surface-bg);
31
- border-radius: var(--uds-modal-surface-radius);
32
- box-shadow: var(--uds-modal-surface-shadow);
40
+ max-width: min(
41
+ var(--modal-panel-width, 360px),
42
+ var(
43
+ --modal-panel-max-width,
44
+ calc(100vw - var(--spacing-padding-10, 32px) * 2)
45
+ )
46
+ );
47
+ max-height: var(
48
+ --modal-panel-max-height,
49
+ calc(100vh - var(--spacing-padding-10, 32px) * 2)
50
+ );
51
+ background-color: var(--modal-panel-bg, var(--color-bg-surface-static-white));
52
+ border-radius: var(--modal-panel-radius, var(--theme-radius-large-1));
53
+ box-shadow: var(--modal-panel-shadow, 0px 18px 40px rgba(8, 11, 30, 0.18));
33
54
  pointer-events: auto;
34
55
  display: flex;
35
56
  flex-direction: column;
@@ -39,6 +60,6 @@
39
60
  .uds-modal-dimmer {
40
61
  position: absolute;
41
62
  inset: 0;
42
- background-color: var(--uds-modal-overlay-bg);
63
+ background-color: var(--modal-overlay-bg, rgba(5, 6, 12, 0.55));
43
64
  pointer-events: auto;
44
65
  }
package/src/modal/styles/container.scss CHANGED
@@ -40,11 +40,8 @@
40
40
  min-height: var(--notice-dialog-action-height, 56px);
41
41
  border-top: 1px solid
42
42
  var(
43
- --uds-modal-footer-border-color,
44
- var(
45
- --dialog-border-color,
46
- var(--color-border-standard-cool-gray, #e4e5e7)
47
- )
43
+ --modal-footer-border-color,
44
+ var(--color-border-standard-cool-gray, #e4e5e7)
48
45
  );
49
46
 
50
47
  .uds-modal-footer-button {
@@ -54,11 +51,8 @@
54
51
  .uds-modal-footer-button + .uds-modal-footer-button {
55
52
  border-left: 1px solid
56
53
  var(
57
- --uds-modal-footer-border-color,
58
- var(
59
- --dialog-border-color,
60
- var(--color-border-standard-cool-gray, #e4e5e7)
61
- )
54
+ --modal-footer-border-color,
55
+ var(--color-border-standard-cool-gray, #e4e5e7)
62
56
  );
63
57
  }
64
58
  }
@@ -77,7 +71,7 @@
77
71
  .uds-modal-alert-message {
78
72
  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
79
73
  text-align: center;
80
- color: var(--dialog-body-color);
74
+ color: var(--modal-alert-body-color);
81
75
  word-break: keep-all;
82
76
 
83
77
  > p,
@@ -85,7 +79,7 @@
85
79
  > strong,
86
80
  > em {
87
81
  margin: 0;
88
- font-size: var(--dialog-body-font-size);
82
+ font-size: var(--modal-alert-body-font-size);
89
83
  line-height: 1.5em;
90
84
  font-weight: var(--font-body-small-weight, 400);
91
85
  word-break: inherit;
@@ -108,17 +102,17 @@
108
102
 
109
103
  > h3 {
110
104
  margin: 0;
111
- color: var(--dialog-title-color);
112
- font-size: var(--dialog-title-font-size);
113
- line-height: var(--dialog-title-line-height);
114
- font-weight: var(--dialog-title-weight);
105
+ color: var(--modal-dialog-title-color);
106
+ font-size: var(--modal-dialog-title-font-size);
107
+ line-height: var(--modal-dialog-title-line-height);
108
+ font-weight: var(--modal-dialog-title-weight);
115
109
  }
116
110
  }
117
111
 
118
112
  .uds-modal-dialog-body-content {
119
113
  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
120
114
  text-align: center;
121
- color: var(--dialog-body-color);
115
+ color: var(--modal-dialog-body-color);
122
116
  word-break: keep-all;
123
117
 
124
118
  > p,
@@ -126,7 +120,7 @@
126
120
  > strong,
127
121
  > em {
128
122
  margin: 0;
129
- font-size: var(--dialog-body-font-size);
123
+ font-size: var(--modal-dialog-body-font-size);
130
124
  line-height: 1.5em;
131
125
  font-weight: var(--font-body-small-weight, 400);
132
126
  word-break: inherit;