@iyulab/components 1.13.0 → 1.14.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.
Files changed (44) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/dist/components/UElement.styles.js +8 -8
  3. package/dist/components/UOverlayElement.styles.js +1 -1
  4. package/dist/components/alert/UAlert.styles.js +21 -21
  5. package/dist/components/avatar/UAvatar.styles.js +5 -5
  6. package/dist/components/badge/UBadge.styles.js +22 -22
  7. package/dist/components/breadcrumb/UBreadcrumb.styles.js +2 -2
  8. package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js +2 -2
  9. package/dist/components/button/UButton.styles.js +28 -28
  10. package/dist/components/card/UCard.styles.js +5 -5
  11. package/dist/components/carousel/UCarousel.styles.js +8 -8
  12. package/dist/components/checkbox/UCheckbox.styles.js +20 -20
  13. package/dist/components/copy-button/UCopyButton.styles.js +2 -2
  14. package/dist/components/dialog/UDialog.styles.js +4 -4
  15. package/dist/components/divider/UDivider.styles.js +2 -2
  16. package/dist/components/drawer/UDrawer.styles.js +3 -3
  17. package/dist/components/field/UField.styles.js +4 -4
  18. package/dist/components/icon-button/UIconButton.styles.js +2 -2
  19. package/dist/components/input/UInput.styles.js +30 -30
  20. package/dist/components/menu/UMenu.styles.js +4 -4
  21. package/dist/components/menu-item/UMenuItem.styles.js +7 -7
  22. package/dist/components/option/UOption.styles.js +9 -9
  23. package/dist/components/progress-bar/UProgressBar.styles.js +12 -12
  24. package/dist/components/progress-ring/UProgressRing.styles.js +11 -11
  25. package/dist/components/radio/URadio.styles.js +6 -6
  26. package/dist/components/rating/URating.styles.js +3 -3
  27. package/dist/components/select/USelect.styles.js +34 -34
  28. package/dist/components/skeleton/USkeleton.d.ts +2 -2
  29. package/dist/components/skeleton/USkeleton.styles.js +5 -5
  30. package/dist/components/slider/USlider.styles.js +10 -10
  31. package/dist/components/spinner/USpinner.styles.js +11 -11
  32. package/dist/components/split-panel/USplitPanel.styles.js +3 -3
  33. package/dist/components/switch/USwitch.styles.js +10 -10
  34. package/dist/components/tab/UTab.styles.js +3 -3
  35. package/dist/components/tab-panel/UTabPanel.styles.js +22 -22
  36. package/dist/components/tag/UTag.styles.js +55 -55
  37. package/dist/components/textarea/UTextarea.styles.js +25 -25
  38. package/dist/components/tooltip/UTooltip.styles.js +3 -3
  39. package/dist/components/tree/UTree.d.ts +1 -1
  40. package/dist/components/tree/UTree.styles.js +6 -3
  41. package/dist/components/tree-item/UTreeItem.styles.js +7 -7
  42. package/dist/utilities/Theme.d.ts +16 -1
  43. package/dist/utilities/Theme.js +22 -1
  44. package/package.json +1 -1
package/dist/components/copy-button/UCopyButton.styles.js CHANGED
@@ -14,12 +14,12 @@ var styles = css`
14
14
  }
15
15
 
16
16
  :host([copied]) u-icon-button {
17
- color: var(--u-success-color-weak);
17
+ color: var(--u-success-color-weak, #4CAF50);
18
18
  }
19
19
 
20
20
  /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
21
21
  :host([copied]) u-button {
22
- color: var(--u-success-color-weak);
22
+ color: var(--u-success-color-weak, #4CAF50);
23
23
  }
24
24
  `;
25
25
  //#endregion
package/dist/components/dialog/UDialog.styles.js CHANGED
@@ -68,7 +68,7 @@ var styles = css`
68
68
  * 테두리는 CanvasText 원색이 과해 옅게 혼합.
69
69
  */
70
70
  border: 1px solid var(--u-border-color, color-mix(in srgb, CanvasText 20%, Canvas));
71
- border-radius: var(--u-radius-lg);
71
+ border-radius: var(--u-radius-lg, 6px);
72
72
  background: var(--u-panel-bg-color, Canvas);
73
73
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
74
74
  pointer-events: auto;
@@ -92,13 +92,13 @@ var styles = css`
92
92
  font-size: 18px;
93
93
  font-weight: 600;
94
94
  line-height: 1.3;
95
- border-bottom: 1px solid var(--u-border-color);
95
+ border-bottom: 1px solid var(--u-border-color, #E0E0E0);
96
96
  }
97
97
  .header .close-btn {
98
98
  flex-shrink: 0;
99
99
  padding: var(--u-space-2xs, 4px);
100
100
  font-size: inherit;
101
- border-radius: var(--u-radius-md);
101
+ border-radius: var(--u-radius-md, 4px);
102
102
  }
103
103
 
104
104
  .body {
@@ -116,7 +116,7 @@ var styles = css`
116
116
  justify-content: flex-end;
117
117
  gap: var(--u-space-sm, 8px);
118
118
  padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
119
- border-top: 1px solid var(--u-border-color);
119
+ border-top: 1px solid var(--u-border-color, #E0E0E0);
120
120
  }
121
121
  `;
122
122
  //#endregion
package/dist/components/divider/UDivider.styles.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --divider-size: 1px;
6
- --divider-color: var(--u-neutral-300);
6
+ --divider-color: var(--u-neutral-300, #E0E0E0);
7
7
  --divider-spacing: 8px;
8
8
  }
9
9
 
@@ -58,7 +58,7 @@ var styles = css`
58
58
  .label {
59
59
  display: none;
60
60
  padding: 0 var(--u-space-md, 12px);
61
- color: var(--u-txt-color-weak);
61
+ color: var(--u-txt-color-weak, #9E9E9E);
62
62
  font-size: 0.85em;
63
63
  white-space: nowrap;
64
64
  user-select: none;
package/dist/components/drawer/UDrawer.styles.js CHANGED
@@ -80,13 +80,13 @@ var styles = css`
80
80
  font-size: 18px;
81
81
  font-weight: 600;
82
82
  line-height: 1.3;
83
- border-bottom: 1px solid var(--u-border-color);
83
+ border-bottom: 1px solid var(--u-border-color, #E0E0E0);
84
84
  }
85
85
  .header .close-btn {
86
86
  flex-shrink: 0;
87
87
  padding: var(--u-space-2xs, 4px);
88
88
  font-size: inherit;
89
- border-radius: var(--u-radius-md);
89
+ border-radius: var(--u-radius-md, 4px);
90
90
  }
91
91
 
92
92
  .body {
@@ -104,7 +104,7 @@ var styles = css`
104
104
  justify-content: flex-end;
105
105
  gap: var(--u-space-sm, 8px);
106
106
  padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
107
- border-top: 1px solid var(--u-border-color);
107
+ border-top: 1px solid var(--u-border-color, #E0E0E0);
108
108
  }
109
109
  `;
110
110
  //#endregion
package/dist/components/field/UField.styles.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  display: block;
6
- color: var(--u-txt-color);
6
+ color: var(--u-txt-color, #212121);
7
7
  font-size: inherit;
8
8
  font-family: var(--u-font-base);
9
9
  }
@@ -12,7 +12,7 @@ var styles = css`
12
12
  cursor: not-allowed;
13
13
  }
14
14
  :host([invalid]) .footer {
15
- color: var(--u-danger-color);
15
+ color: var(--u-danger-color, #E53935);
16
16
  }
17
17
 
18
18
  .header {
@@ -32,12 +32,12 @@ var styles = css`
32
32
  }
33
33
 
34
34
  .required {
35
- color: var(--u-danger-color);
35
+ color: var(--u-danger-color, #E53935);
36
36
  margin-right: 0.2em;
37
37
  }
38
38
 
39
39
  .footer {
40
- color: var(--u-txt-color-weak);
40
+ color: var(--u-txt-color-weak, #9E9E9E);
41
41
  font-size: 0.75em;
42
42
  line-height: 1.2;
43
43
  margin-top: 0.5em;
package/dist/components/icon-button/UIconButton.styles.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  display: inline-flex;
6
- color: var(--u-icon-color);
6
+ color: var(--u-icon-color, #616161);
7
7
  font-size: 20px;
8
8
  }
9
9
 
@@ -11,7 +11,7 @@ var styles = css`
11
11
  color: #fff;
12
12
  }
13
13
  :host([variant="link"]) {
14
- color: var(--u-primary-color-weak);
14
+ color: var(--u-primary-color-weak, #2196F3);
15
15
  }
16
16
 
17
17
  u-button {
package/dist/components/input/UInput.styles.js CHANGED
@@ -12,7 +12,7 @@ var styles = css`
12
12
  flex 컨테이너처럼 block 만으로 늘어나지 않는 맥락을 위해 width 경로도 함께 연다. */
13
13
  display: var(--u-input-display, inline-block);
14
14
  width: var(--u-input-width, auto);
15
- color: var(--u-txt-color);
15
+ color: var(--u-txt-color, #212121);
16
16
  font-size: inherit;
17
17
  font-family: var(--u-font-base);
18
18
  }
@@ -23,51 +23,51 @@ var styles = css`
23
23
  flex-direction: row;
24
24
  align-items: center;
25
25
  padding: 0.3em 0.6em;
26
- border: 1px solid var(--u-input-border-color);
26
+ border: 1px solid var(--u-input-border-color, #E0E0E0);
27
27
  border-radius: 0.25em;
28
- background-color: var(--u-input-bg-color);
28
+ background-color: var(--u-input-bg-color, #FFFFFF);
29
29
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
30
30
  overflow: hidden;
31
31
  }
32
32
  :host([readonly]) .container,
33
33
  :host([disabled]) .container {
34
- border-color: var(--u-border-color-weak);
35
- background-color: var(--u-bg-color-disabled);
34
+ border-color: var(--u-border-color-weak, #EEEEEE);
35
+ background-color: var(--u-bg-color-disabled, #FAFAFA);
36
36
  }
37
37
  :host(:not([readonly]):not([disabled])) .container:hover {
38
- box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
38
+ box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
39
39
  }
40
40
  :host(:not([readonly]):not([disabled])) .container:focus-within {
41
- box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
41
+ box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1E88E5);
42
42
  }
43
43
  :host([invalid]:not([readonly]):not([disabled])) .container {
44
- box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
44
+ box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #E53935);
45
45
  }
46
46
 
47
47
  /* ===== Variant: filled ===== */
48
48
  :host([variant="filled"]) .container {
49
49
  border: none;
50
50
  border-radius: 0.25em 0.25em 0 0;
51
- border-bottom: 2px solid var(--u-input-border-color);
52
- background-color: var(--u-neutral-200);
51
+ border-bottom: 2px solid var(--u-input-border-color, #E0E0E0);
52
+ background-color: var(--u-neutral-200, #EEEEEE);
53
53
  }
54
54
  :host([variant="filled"][readonly]) .container,
55
55
  :host([variant="filled"][disabled]) .container {
56
- background-color: var(--u-bg-color-disabled);
57
- border-bottom-color: var(--u-border-color-weak);
56
+ background-color: var(--u-bg-color-disabled, #FAFAFA);
57
+ border-bottom-color: var(--u-border-color-weak, #EEEEEE);
58
58
  }
59
59
  :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
60
60
  box-shadow: none;
61
- background-color: var(--u-neutral-300);
62
- border-bottom-color: var(--u-input-border-color-hover);
61
+ background-color: var(--u-neutral-300, #E0E0E0);
62
+ border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
63
63
  }
64
64
  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
65
65
  box-shadow: none;
66
- border-bottom-color: var(--u-input-border-color-focus);
66
+ border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
67
67
  }
68
68
  :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
69
69
  box-shadow: none;
70
- border-bottom-color: var(--u-input-border-color-invalid);
70
+ border-bottom-color: var(--u-input-border-color-invalid, #E53935);
71
71
  }
72
72
 
73
73
  /* ===== Variant: underlined ===== */
@@ -75,33 +75,33 @@ var styles = css`
75
75
  padding-left: 0;
76
76
  padding-right: 0;
77
77
  border: none;
78
- border-radius: var(--u-radius-none);
79
- border-bottom: 1px solid var(--u-input-border-color);
78
+ border-radius: var(--u-radius-none, 0);
79
+ border-bottom: 1px solid var(--u-input-border-color, #E0E0E0);
80
80
  background-color: transparent;
81
81
  }
82
82
  :host([variant="underlined"][readonly]) .container,
83
83
  :host([variant="underlined"][disabled]) .container {
84
84
  background-color: transparent;
85
- border-bottom-color: var(--u-border-color-weak);
85
+ border-bottom-color: var(--u-border-color-weak, #EEEEEE);
86
86
  }
87
87
  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
88
88
  box-shadow: none;
89
- border-bottom-color: var(--u-input-border-color-hover);
89
+ border-bottom-color: var(--u-input-border-color-hover, #BDBDBD);
90
90
  }
91
91
  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
92
92
  box-shadow: none;
93
- border-bottom-color: var(--u-input-border-color-focus);
93
+ border-bottom-color: var(--u-input-border-color-focus, #1E88E5);
94
94
  border-bottom-width: 2px;
95
95
  }
96
96
  :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
97
97
  box-shadow: none;
98
- border-bottom-color: var(--u-input-border-color-invalid);
98
+ border-bottom-color: var(--u-input-border-color-invalid, #E53935);
99
99
  }
100
100
 
101
101
  /* ===== Variant: borderless ===== */
102
102
  :host([variant="borderless"]) .container {
103
103
  border: none;
104
- border-radius: var(--u-radius-none);
104
+ border-radius: var(--u-radius-none, 0);
105
105
  background-color: transparent;
106
106
  padding: 0;
107
107
  box-shadow: none;
@@ -120,7 +120,7 @@ var styles = css`
120
120
  line-height: 1.5;
121
121
  }
122
122
  input::placeholder {
123
- color: var(--u-txt-color-weak);
123
+ color: var(--u-txt-color-weak, #9E9E9E);
124
124
  }
125
125
  input:disabled {
126
126
  cursor: not-allowed;
@@ -155,16 +155,16 @@ var styles = css`
155
155
  /* 아이콘 영역 (clear, password toggle 등) */
156
156
  .suffix-item {
157
157
  margin-left: 0.25em;
158
- color: var(--u-icon-color);
158
+ color: var(--u-icon-color, #616161);
159
159
  font-size: 1em;
160
160
  transition: color 0.2s ease;
161
161
  cursor: pointer;
162
162
  }
163
163
  .suffix-item:hover {
164
- color: var(--u-icon-color-hover);
164
+ color: var(--u-icon-color-hover, #1E88E5);
165
165
  }
166
166
  .suffix-item:active {
167
- color: var(--u-icon-color-active);
167
+ color: var(--u-icon-color-active, #1E88E5);
168
168
  }
169
169
 
170
170
  u-popover {
@@ -172,9 +172,9 @@ var styles = css`
172
172
  min-height: var(--input-popover-min-height);
173
173
  max-height: var(--input-popover-max-height);
174
174
  padding: 4px;
175
- border: 1px solid var(--u-border-color);
176
- border-radius: var(--u-radius-lg);
177
- background-color: var(--u-panel-bg-color);
175
+ border: 1px solid var(--u-border-color, #E0E0E0);
176
+ border-radius: var(--u-radius-lg, 6px);
177
+ background-color: var(--u-panel-bg-color, #FFFFFF);
178
178
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
179
179
  overflow-x: auto;
180
180
  overflow-y: auto;
package/dist/components/menu/UMenu.styles.js CHANGED
@@ -9,12 +9,12 @@ var styles = css`
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  min-width: 160px;
12
- border-radius: var(--u-radius-lg);
13
- background-color: var(--u-panel-bg-color);
12
+ border-radius: var(--u-radius-lg, 6px);
13
+ background-color: var(--u-panel-bg-color, #FFFFFF);
14
14
 
15
15
  --menu-padding: var(--u-space-2xs, 4px);
16
16
  --menu-border-width: 1px;
17
- --menu-border-color: var(--u-border-color);
17
+ --menu-border-color: var(--u-border-color, #E0E0E0);
18
18
  }
19
19
 
20
20
  /* 여백/테두리는 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */
@@ -30,7 +30,7 @@ var styles = css`
30
30
  :host([borderless]) {
31
31
  --menu-padding: 0;
32
32
  --menu-border-width: 0;
33
- border-radius: var(--u-radius-none);
33
+ border-radius: var(--u-radius-none, 0);
34
34
  background-color: transparent;
35
35
  }
36
36
  `;
package/dist/components/menu-item/UMenuItem.styles.js CHANGED
@@ -3,7 +3,7 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --menu-item-depth: 0;
6
- --menu-item-color: var(--u-primary-color);
6
+ --menu-item-color: var(--u-primary-color, #1E88E5);
7
7
  }
8
8
 
9
9
  :host {
@@ -44,18 +44,18 @@ var styles = css`
44
44
  /* hover & focus */
45
45
  :host(:not([disabled])) .header:hover,
46
46
  :host(:not([disabled]):focus-visible) .header {
47
- background-color: var(--u-bg-color-hover);
47
+ background-color: var(--u-bg-color-hover, #F5F5F5);
48
48
  }
49
49
 
50
50
  /* indicator: highlight */
51
51
  :host([selected][indicator="highlight"]) .header {
52
52
  font-weight: 600;
53
53
  color: color-mix(in srgb, var(--menu-item-color) 85%, black);
54
- background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color));
54
+ background-color: color-mix(in srgb, var(--menu-item-color) 15%, var(--u-bg-color, #FFFFFF));
55
55
  }
56
56
  :host([selected][indicator="highlight"]) .header:hover,
57
57
  :host([selected][indicator="highlight"]:focus-visible) .header {
58
- background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color));
58
+ background-color: color-mix(in srgb, var(--menu-item-color) 25%, var(--u-bg-color, #FFFFFF));
59
59
  }
60
60
 
61
61
  .prefix-checker {
@@ -136,9 +136,9 @@ var styles = css`
136
136
  display: flex;
137
137
  flex-direction: column;
138
138
  padding: 4px;
139
- border: 1px solid var(--u-border-color);
140
- border-radius: var(--u-radius-md);
141
- background-color: var(--u-panel-bg-color);
139
+ border: 1px solid var(--u-border-color, #E0E0E0);
140
+ border-radius: var(--u-radius-md, 4px);
141
+ background-color: var(--u-panel-bg-color, #FFFFFF);
142
142
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
143
143
  transform: scale(0.8);
144
144
  transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease;
package/dist/components/option/UOption.styles.js CHANGED
@@ -2,18 +2,18 @@ import { css } from "lit";
2
2
  //#region src/components/option/UOption.styles.ts
3
3
  var styles = css`
4
4
  :host {
5
- --option-color: var(--u-primary-color);
5
+ --option-color: var(--u-primary-color, #1E88E5);
6
6
  --option-color-interactive: inherit;
7
- --option-border-color-interactive: var(--u-border-color-hover);
8
- --option-background-color-interactive: var(--u-bg-color-hover);
7
+ --option-border-color-interactive: var(--u-border-color-hover, #BDBDBD);
8
+ --option-background-color-interactive: var(--u-bg-color-hover, #F5F5F5);
9
9
 
10
10
  --option-color-active: inherit;
11
11
  --option-border-color-active: var(--option-color);
12
- --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color));
12
+ --option-background-color-active: color-mix(in srgb, var(--option-color) 15%, var(--u-bg-color, #FFFFFF));
13
13
 
14
14
  --option-color-active-interactive: inherit;
15
15
  --option-border-color-active-interactive: var(--option-color);
16
- --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color));
16
+ --option-background-color-active-interactive: color-mix(in srgb, var(--option-color) 25%, var(--u-bg-color, #FFFFFF));
17
17
  }
18
18
 
19
19
  :host {
@@ -99,9 +99,9 @@ var styles = css`
99
99
  justify-content: center;
100
100
  width: 1.25em;
101
101
  height: 1.25em;
102
- border: 2px solid var(--u-neutral-400);
103
- border-radius: var(--u-radius-circle);
104
- background-color: var(--u-bg-color);
102
+ border: 2px solid var(--u-neutral-400, #BDBDBD);
103
+ border-radius: var(--u-radius-circle, 50%);
104
+ background-color: var(--u-bg-color, #FFFFFF);
105
105
  transition: border-color 0.2s ease, background-color 0.2s ease;
106
106
  }
107
107
  :host([marker="radio"]:not([disabled]):hover) .radio-marker,
@@ -124,7 +124,7 @@ var styles = css`
124
124
  display: block;
125
125
  width: 0.45em;
126
126
  height: 0.45em;
127
- border-radius: var(--u-radius-circle);
127
+ border-radius: var(--u-radius-circle, 50%);
128
128
  background-color: var(--option-color-active);
129
129
  transform: scale(0);
130
130
  transition: transform 0.15s ease;
package/dist/components/progress-bar/UProgressBar.styles.js CHANGED
@@ -3,27 +3,27 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --progress-bar-height: 0.5em;
6
- --progress-bar-color: var(--u-primary-color);
7
- --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color));
8
- --progress-bar-track-color: var(--u-neutral-200);
6
+ --progress-bar-color: var(--u-primary-color, #1E88E5);
7
+ --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color, #FFFFFF));
8
+ --progress-bar-track-color: var(--u-neutral-200, #EEEEEE);
9
9
  }
10
10
 
11
11
  /* === Status Colors === */
12
12
  :host([status="success"]) {
13
- --progress-bar-color: var(--u-success-color);
14
- --progress-bar-buffer-color: var(--u-success-color-weakest);
13
+ --progress-bar-color: var(--u-success-color, #43A047);
14
+ --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7);
15
15
  }
16
16
  :host([status="warning"]) {
17
- --progress-bar-color: var(--u-warning-color-weak);
18
- --progress-bar-buffer-color: var(--u-warning-color-weakest);
17
+ --progress-bar-color: var(--u-warning-color-weak, #FFEB3B);
18
+ --progress-bar-buffer-color: var(--u-warning-color-weakest, #FFF59D);
19
19
  }
20
20
  :host([status="error"]) {
21
- --progress-bar-color: var(--u-danger-color);
22
- --progress-bar-buffer-color: var(--u-danger-color-weakest);
21
+ --progress-bar-color: var(--u-danger-color, #E53935);
22
+ --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
23
23
  }
24
24
  :host([status="info"]) {
25
- --progress-bar-color: var(--u-info-color-weak);
26
- --progress-bar-buffer-color: var(--u-info-color-weakest);
25
+ --progress-bar-color: var(--u-info-color-weak, #2196F3);
26
+ --progress-bar-buffer-color: var(--u-info-color-weakest, #90CAF9);
27
27
  }
28
28
 
29
29
  :host {
@@ -37,7 +37,7 @@ var styles = css`
37
37
 
38
38
  /* === Rounded === */
39
39
  :host([rounded]) {
40
- border-radius: var(--u-radius-pill);
40
+ border-radius: var(--u-radius-pill, 9999px);
41
41
  }
42
42
 
43
43
  /* === Indeterminate === */
package/dist/components/progress-ring/UProgressRing.styles.js CHANGED
@@ -3,28 +3,28 @@ import { css } from "lit";
3
3
  var styles = css`
4
4
  :host {
5
5
  --progress-ring-size: 6em;
6
- --progress-ring-color: var(--u-primary-color);
6
+ --progress-ring-color: var(--u-primary-color, #1E88E5);
7
7
  --progress-ring-track-width: 6;
8
- --progress-ring-track-color: var(--u-neutral-200);
9
- --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color));
8
+ --progress-ring-track-color: var(--u-neutral-200, #EEEEEE);
9
+ --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color, #FFFFFF));
10
10
  }
11
11
 
12
12
  /* === Status Colors === */
13
13
  :host([status="success"]) {
14
- --progress-ring-color: var(--u-success-color);
15
- --progress-ring-buffer-color: var(--u-success-color-weakest);
14
+ --progress-ring-color: var(--u-success-color, #43A047);
15
+ --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
16
16
  }
17
17
  :host([status="warning"]) {
18
- --progress-ring-color: var(--u-warning-color-weak);
19
- --progress-ring-buffer-color: var(--u-warning-color-weakest);
18
+ --progress-ring-color: var(--u-warning-color-weak, #FFEB3B);
19
+ --progress-ring-buffer-color: var(--u-warning-color-weakest, #FFF59D);
20
20
  }
21
21
  :host([status="error"]) {
22
- --progress-ring-color: var(--u-danger-color);
23
- --progress-ring-buffer-color: var(--u-danger-color-weakest);
22
+ --progress-ring-color: var(--u-danger-color, #E53935);
23
+ --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
24
24
  }
25
25
  :host([status="info"]) {
26
- --progress-ring-color: var(--u-info-color-weak);
27
- --progress-ring-buffer-color: var(--u-info-color-weakest);
26
+ --progress-ring-color: var(--u-info-color-weak, #2196F3);
27
+ --progress-ring-buffer-color: var(--u-info-color-weakest, #90CAF9);
28
28
  }
29
29
 
30
30
  /* === Host === */
package/dist/components/radio/URadio.styles.js CHANGED
@@ -2,7 +2,7 @@ import { css } from "lit";
2
2
  //#region src/components/radio/URadio.styles.ts
3
3
  var styles = css`
4
4
  :host {
5
- --radio-color: var(--u-primary-color);
5
+ --radio-color: var(--u-primary-color, #1E88E5);
6
6
  --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
7
7
  }
8
8
 
@@ -12,7 +12,7 @@ var styles = css`
12
12
  gap: 0.5em;
13
13
  font-size: inherit;
14
14
  font-family: var(--u-font-base);
15
- color: var(--u-txt-color);
15
+ color: var(--u-txt-color, #212121);
16
16
  }
17
17
  :host([disabled]) {
18
18
  opacity: 0.6;
@@ -34,11 +34,11 @@ var styles = css`
34
34
  }
35
35
  :host([type="button"]) .container {
36
36
  gap: 0;
37
- border: 1px solid var(--u-neutral-300);
37
+ border: 1px solid var(--u-neutral-300, #E0E0E0);
38
38
  border-radius: 0.35em;
39
39
  }
40
40
  :host([invalid]) .container {
41
- border-color: var(--u-danger-color);
41
+ border-color: var(--u-danger-color, #E53935);
42
42
  }
43
43
 
44
44
  /* Type: default */
@@ -94,7 +94,7 @@ var styles = css`
94
94
  border-radius: 0 0.35em 0.35em 0;
95
95
  }
96
96
  :host([type="button"][orientation="horizontal"]) ::slotted(u-option:not(:last-child)) {
97
- border-right: 1px solid var(--u-neutral-300);
97
+ border-right: 1px solid var(--u-neutral-300, #E0E0E0);
98
98
  }
99
99
 
100
100
  /* === Button - Vertical 배치 === */
@@ -109,7 +109,7 @@ var styles = css`
109
109
  border-radius: 0 0 0.35em 0.35em;
110
110
  }
111
111
  :host([type="button"][orientation="vertical"]) ::slotted(u-option:not(:last-child)) {
112
- border-bottom: 1px solid var(--u-neutral-300);
112
+ border-bottom: 1px solid var(--u-neutral-300, #E0E0E0);
113
113
  }
114
114
  `;
115
115
  //#endregion
package/dist/components/rating/URating.styles.js CHANGED
@@ -2,8 +2,8 @@ import { css } from "lit";
2
2
  //#region src/components/rating/URating.styles.ts
3
3
  var styles = css`
4
4
  :host {
5
- --rating-symbol-color: var(--u-warning-color-weak);
6
- --rating-symbol-off-color: var(--u-neutral-300);
5
+ --rating-symbol-color: var(--u-warning-color-weak, #FFEB3B);
6
+ --rating-symbol-off-color: var(--u-neutral-300, #E0E0E0);
7
7
  }
8
8
 
9
9
  :host {
@@ -32,7 +32,7 @@ var styles = css`
32
32
  transition: color 0.15s ease, transform 0.15s ease;
33
33
  }
34
34
  .symbol:focus-visible {
35
- outline: 2px solid var(--u-primary-color-weak);
35
+ outline: 2px solid var(--u-primary-color-weak, #2196F3);
36
36
  outline-offset: 2px;
37
37
  }
38
38
  :host(:not([disabled]):not([readonly])) .symbol:hover {