@uniai-fe/uds-primitives 0.9.1 → 0.9.3

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 +17 -14
  2. package/package.json +3 -3
  3. package/src/components/button/styles/variables.scss +12 -14
  4. package/src/components/info-box/styles/info-box.scss +1 -0
  5. package/src/components/input/styles/foundation.scss +6 -0
  6. package/src/components/input/styles/variables.scss +1 -1
package/dist/styles.css CHANGED
@@ -117,33 +117,34 @@
117
117
  --button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
118
118
  --button-round-radius-large: 30px;
119
119
  /* typography */
120
+ --button-default-font-weight: 400;
120
121
  --button-default-font-body-medium-family: var(--font-body-medium-family);
121
122
  --button-default-font-body-medium-size: var(--font-body-medium-size);
122
- --button-default-font-body-medium-weight: var(--font-body-medium-weight);
123
+ --button-default-font-body-medium-weight: var(--button-default-font-weight);
123
124
  --button-default-font-body-medium-line-height: var(
124
125
  --font-body-medium-line-height
125
126
  );
126
127
  --button-default-font-body-medium-letter-spacing: var(
127
128
  --font-body-medium-letter-spacing
128
129
  );
129
- --button-default-font-label-medium-size: var(--font-label-medium-size);
130
- --button-default-font-label-medium-weight: var(--font-label-medium-weight);
130
+ --button-default-font-label-medium-size: var(--font-body-xxsmall-size);
131
+ --button-default-font-label-medium-weight: var(--button-default-font-weight);
131
132
  --button-default-font-label-medium-line-height: var(
132
- --font-label-medium-line-height
133
+ --font-body-xxsmall-line-height
133
134
  );
134
135
  --button-default-font-label-medium-letter-spacing: var(
135
- --font-label-medium-letter-spacing
136
+ --font-body-xxsmall-letter-spacing
136
137
  );
137
- --button-default-font-label-large-size: var(--font-label-large-size);
138
- --button-default-font-label-large-weight: var(--font-label-large-weight);
138
+ --button-default-font-label-large-size: var(--font-body-xsmall-size);
139
+ --button-default-font-label-large-weight: var(--button-default-font-weight);
139
140
  --button-default-font-label-large-line-height: var(
140
- --font-label-large-line-height
141
+ --font-body-xsmall-line-height
141
142
  );
142
143
  --button-default-font-label-large-letter-spacing: var(
143
- --font-label-large-letter-spacing
144
+ --font-body-xsmall-letter-spacing
144
145
  );
145
146
  --button-default-font-body-large-size: var(--font-body-large-size);
146
- --button-default-font-body-large-weight: var(--font-body-large-weight);
147
+ --button-default-font-body-large-weight: var(--button-default-font-weight);
147
148
  --button-default-font-body-large-line-height: var(
148
149
  --font-body-large-line-height
149
150
  );
@@ -152,15 +153,13 @@
152
153
  );
153
154
  /* 변경: table 버튼은 caption-large 스케일(12px)을 사용한다. */
154
155
  --button-default-font-caption-large-size: var(--font-caption-large-size);
155
- /* 변경: table 버튼 텍스트는 font-weight를 400으로 고정한다. */
156
- --button-default-font-caption-large-weight: 400;
156
+ --button-default-font-caption-large-weight: var(--button-default-font-weight);
157
157
  --button-default-font-caption-large-line-height: var(
158
158
  --font-caption-large-line-height
159
159
  );
160
160
  --button-default-font-caption-large-letter-spacing: var(
161
161
  --font-caption-large-letter-spacing
162
162
  );
163
- --button-default-font-weight: 400;
164
163
  /* default button colors (priority 기반) */
165
164
  --button-default-neutral-foreground: var(--color-neutral-20);
166
165
  --button-default-neutral-disabled-bg: var(--color-surface-standard);
@@ -427,7 +426,7 @@
427
426
  --input-default-radius-base: var(--theme-radius-large-1);
428
427
  --input-tertiary-radius-base: var(--theme-radius-large-2);
429
428
  --input-table-radius-base: 0;
430
- --input-tertiary-element-min-height: var(--theme-size-medium-2);
429
+ --input-tertiary-element-min-height: 1.5em;
431
430
  --input-textarea-min-height: calc(var(--input-default-height-medium) * 2);
432
431
  --input-textarea-height: 128px;
433
432
  /* TextArea size token은 Input 기본 size token을 재할당해 축을 일치시킨다. */
@@ -3712,6 +3711,7 @@ figure.chip {
3712
3711
  border: 1px solid var(--info-box-border-color);
3713
3712
  border-radius: var(--info-box-radius);
3714
3713
  background-color: var(--info-box-background-color);
3714
+ text-align: left;
3715
3715
  }
3716
3716
 
3717
3717
  .info-box:where([data-state="info"]) {
@@ -3892,6 +3892,9 @@ figure.chip {
3892
3892
  --input-line-height: var(--input-text-medium-line-height);
3893
3893
  --input-font-weight: var(--input-text-medium-weight);
3894
3894
  --input-letter-spacing: var(--input-text-medium-letter-spacing);
3895
+ --input-label-font-size: var(--font-label-medium-size);
3896
+ --input-label-line-height: var(--font-label-medium-line-height);
3897
+ --input-label-color: var(--color-label-neutral);
3895
3898
  row-gap: var(--input-tertiary-row-gap);
3896
3899
  column-gap: var(--input-default-gap);
3897
3900
  flex-wrap: wrap;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-primitives",
3
- "version": "0.9.1",
3
+ "version": "0.9.3",
4
4
  "description": "UNIAI Design System; Primitives Components Package",
5
5
  "type": "module",
6
6
  "private": false,
@@ -89,9 +89,9 @@
89
89
  "typescript": "6.0.3",
90
90
  "@uniai-fe/eslint-config": "0.2.0",
91
91
  "@uniai-fe/next-devkit": "0.3.0",
92
- "@uniai-fe/tsconfig": "0.2.0",
93
92
  "@uniai-fe/uds-foundation": "0.5.0",
94
- "@uniai-fe/util-functions": "0.4.0"
93
+ "@uniai-fe/tsconfig": "0.2.0",
94
+ "@uniai-fe/util-functions": "0.4.1"
95
95
  },
96
96
  "scripts": {
97
97
  "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",
package/src/components/button/styles/variables.scss CHANGED
@@ -60,33 +60,34 @@
60
60
  --button-round-radius-large: 30px;
61
61
 
62
62
  /* typography */
63
+ --button-default-font-weight: 400;
63
64
  --button-default-font-body-medium-family: var(--font-body-medium-family);
64
65
  --button-default-font-body-medium-size: var(--font-body-medium-size);
65
- --button-default-font-body-medium-weight: var(--font-body-medium-weight);
66
+ --button-default-font-body-medium-weight: var(--button-default-font-weight);
66
67
  --button-default-font-body-medium-line-height: var(
67
68
  --font-body-medium-line-height
68
69
  );
69
70
  --button-default-font-body-medium-letter-spacing: var(
70
71
  --font-body-medium-letter-spacing
71
72
  );
72
- --button-default-font-label-medium-size: var(--font-label-medium-size);
73
- --button-default-font-label-medium-weight: var(--font-label-medium-weight);
73
+ --button-default-font-label-medium-size: var(--font-body-xxsmall-size);
74
+ --button-default-font-label-medium-weight: var(--button-default-font-weight);
74
75
  --button-default-font-label-medium-line-height: var(
75
- --font-label-medium-line-height
76
+ --font-body-xxsmall-line-height
76
77
  );
77
78
  --button-default-font-label-medium-letter-spacing: var(
78
- --font-label-medium-letter-spacing
79
+ --font-body-xxsmall-letter-spacing
79
80
  );
80
- --button-default-font-label-large-size: var(--font-label-large-size);
81
- --button-default-font-label-large-weight: var(--font-label-large-weight);
81
+ --button-default-font-label-large-size: var(--font-body-xsmall-size);
82
+ --button-default-font-label-large-weight: var(--button-default-font-weight);
82
83
  --button-default-font-label-large-line-height: var(
83
- --font-label-large-line-height
84
+ --font-body-xsmall-line-height
84
85
  );
85
86
  --button-default-font-label-large-letter-spacing: var(
86
- --font-label-large-letter-spacing
87
+ --font-body-xsmall-letter-spacing
87
88
  );
88
89
  --button-default-font-body-large-size: var(--font-body-large-size);
89
- --button-default-font-body-large-weight: var(--font-body-large-weight);
90
+ --button-default-font-body-large-weight: var(--button-default-font-weight);
90
91
  --button-default-font-body-large-line-height: var(
91
92
  --font-body-large-line-height
92
93
  );
@@ -95,16 +96,13 @@
95
96
  );
96
97
  /* 변경: table 버튼은 caption-large 스케일(12px)을 사용한다. */
97
98
  --button-default-font-caption-large-size: var(--font-caption-large-size);
98
- /* 변경: table 버튼 텍스트는 font-weight를 400으로 고정한다. */
99
- --button-default-font-caption-large-weight: 400;
99
+ --button-default-font-caption-large-weight: var(--button-default-font-weight);
100
100
  --button-default-font-caption-large-line-height: var(
101
101
  --font-caption-large-line-height
102
102
  );
103
103
  --button-default-font-caption-large-letter-spacing: var(
104
104
  --font-caption-large-letter-spacing
105
105
  );
106
- --button-default-font-weight: 400;
107
-
108
106
  /* default button colors (priority 기반) */
109
107
  --button-default-neutral-foreground: var(--color-neutral-20);
110
108
  --button-default-neutral-disabled-bg: var(--color-surface-standard);
package/src/components/info-box/styles/info-box.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  border: 1px solid var(--info-box-border-color);
10
10
  border-radius: var(--info-box-radius);
11
11
  background-color: var(--info-box-background-color);
12
+ text-align: left;
12
13
  }
13
14
 
14
15
  .info-box:where([data-state="info"]) {
package/src/components/input/styles/foundation.scss CHANGED
@@ -140,11 +140,17 @@
140
140
  border-radius: var(--input-tertiary-radius-base);
141
141
  background-color: var(--input-surface-color);
142
142
  min-height: var(--input-tertiary-height-base);
143
+
143
144
  // tertiary는 단일 사이즈지만 Figma에서 body-medium typography를 사용한다.
144
145
  --input-font-size: var(--input-text-medium-size);
145
146
  --input-line-height: var(--input-text-medium-line-height);
146
147
  --input-font-weight: var(--input-text-medium-weight);
147
148
  --input-letter-spacing: var(--input-text-medium-letter-spacing);
149
+
150
+ --input-label-font-size: var(--font-label-medium-size);
151
+ --input-label-line-height: var(--font-label-medium-line-height);
152
+ --input-label-color: var(--color-label-neutral);
153
+
148
154
  row-gap: var(--input-tertiary-row-gap);
149
155
  column-gap: var(--input-default-gap);
150
156
  flex-wrap: wrap;
package/src/components/input/styles/variables.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  --input-default-radius-base: var(--theme-radius-large-1);
21
21
  --input-tertiary-radius-base: var(--theme-radius-large-2);
22
22
  --input-table-radius-base: 0;
23
- --input-tertiary-element-min-height: var(--theme-size-medium-2);
23
+ --input-tertiary-element-min-height: 1.5em;
24
24
  --input-textarea-min-height: calc(var(--input-default-height-medium) * 2);
25
25
  --input-textarea-height: 128px;
26
26
  /* TextArea size token은 Input 기본 size token을 재할당해 축을 일치시킨다. */