Skip to content

Commit 7c3bbe7

Browse files
te6-inclaude
te6-in
and
claude
authored
feat(rootage,css): increase slider value indicator size; refine motion (#1220)
* feat(rootage,css): increase slider value indicator size and add descriptions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 025f5d8 commit 7c3bbe7

File tree

11 files changed

+108
-102
lines changed

11 files changed

+108
-102
lines changed

‎.changeset/five-symbols-invent.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@seed-design/rootage-artifacts": patch
3+
"@seed-design/css": patch
4+
---
5+
6+
Slider의 Value Indicator 가시성 및 트랜지션을 개선합니다.

‎docs/public/rootage/components/slider.json‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@
7474
"type": "dimension"
7575
},
7676
"paddingX": {
77-
"type": "dimension"
77+
"type": "dimension",
78+
"description": "value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다."
7879
},
7980
"paddingY": {
8081
"type": "dimension"
@@ -106,7 +107,8 @@
106107
"exitTimingFunction": {
107108
"type": "cubicBezier"
108109
}
109-
}
110+
},
111+
"description": "arrow width + paddingX * 2만큼의 최소 너비를 가집니다."
110112
},
111113
"valueIndicatorArrow": {
112114
"properties": {
@@ -123,10 +125,8 @@
123125
"type": "dimension"
124126
},
125127
"gutter": {
126-
"type": "dimension"
127-
},
128-
"padding": {
129-
"type": "dimension"
128+
"type": "dimension",
129+
"description": "arrow와 thumb 사이의 거리를 정의합니다."
130130
}
131131
}
132132
},
@@ -242,15 +242,15 @@
242242
},
243243
"cornerRadius": {
244244
"type": "dimension",
245-
"value": "$radius.r1"
245+
"value": "$radius.r1_5"
246246
},
247247
"paddingX": {
248248
"type": "dimension",
249-
"value": "$dimension.x1_5"
249+
"value": "$dimension.x2"
250250
},
251251
"paddingY": {
252252
"type": "dimension",
253-
"value": "$dimension.x0_5"
253+
"value": "$dimension.x1"
254254
},
255255
"offsetY": {
256256
"type": "dimension",
@@ -296,14 +296,11 @@
296296
},
297297
"width": {
298298
"type": "dimension",
299-
"value": "$dimension.x2_5"
299+
"value": "$dimension.x2"
300300
},
301301
"height": {
302302
"type": "dimension",
303-
"value": {
304-
"value": 7,
305-
"unit": "px"
306-
}
303+
"value": "$dimension.x1_5"
307304
},
308305
"cornerRadius": {
309306
"type": "dimension",
@@ -312,10 +309,6 @@
312309
"gutter": {
313310
"type": "dimension",
314311
"value": "$dimension.x0_5"
315-
},
316-
"padding": {
317-
"type": "dimension",
318-
"value": "$dimension.x0_5"
319312
}
320313
},
321314
"valueIndicatorLabel": {
@@ -325,11 +318,11 @@
325318
},
326319
"fontSize": {
327320
"type": "dimension",
328-
"value": "$font-size.t1"
321+
"value": "$font-size.t3"
329322
},
330323
"lineHeight": {
331324
"type": "dimension",
332-
"value": "$line-height.t1"
325+
"value": "$line-height.t3"
333326
},
334327
"fontWeight": {
335328
"type": "number",

‎packages/css/all.css‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6592,20 +6592,21 @@
65926592
.seed-slider__valueIndicatorRoot {
65936593
box-sizing: border-box;
65946594
background: var(--seed-color-bg-neutral-inverted);
6595-
padding-left: var(--seed-dimension-x1_5);
6596-
padding-right: var(--seed-dimension-x1_5);
6597-
padding-top: var(--seed-dimension-x0_5);
6598-
padding-bottom: var(--seed-dimension-x0_5);
6599-
border-radius: var(--seed-radius-r1);
6595+
padding-left: var(--seed-dimension-x2);
6596+
padding-right: var(--seed-dimension-x2);
6597+
padding-top: var(--seed-dimension-x1);
6598+
padding-bottom: var(--seed-dimension-x1);
6599+
border-radius: var(--seed-radius-r1_5);
66006600
color: var(--seed-color-fg-neutral-inverted);
6601-
font-size: var(--seed-font-size-t1);
6602-
line-height: var(--seed-line-height-t1);
6601+
font-size: var(--seed-font-size-t3);
6602+
line-height: var(--seed-line-height-t3);
66036603
font-weight: var(--seed-font-weight-medium);
66046604
white-space: pre-wrap;
66056605
text-align: center;
6606+
width: max-content;
6607+
min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
66066608
flex-direction: column;
66076609
align-items: center;
6608-
width: max-content;
66096610
display: flex;
66106611
position: absolute;
66116612
top: 50%;
@@ -6626,7 +6627,7 @@
66266627
animation-timing-function: var(--seed-timing-function-enter);
66276628
animation-duration: var(--seed-duration-d4);
66286629
--seed-enter-translate-x: -50%;
6629-
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
6630+
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
66306631
--seed-enter-opacity: 0;
66316632
--seed-enter-scale: .9;
66326633
}
@@ -6636,7 +6637,7 @@
66366637
animation-timing-function: var(--seed-timing-function-enter);
66376638
animation-duration: var(--seed-duration-d4);
66386639
--seed-enter-translate-x: 50%;
6639-
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
6640+
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
66406641
--seed-enter-opacity: 0;
66416642
--seed-enter-scale: .9;
66426643
}
@@ -6646,7 +6647,7 @@
66466647
animation-timing-function: var(--seed-timing-function-easing);
66476648
animation-duration: var(--seed-duration-d4);
66486649
--seed-exit-translate-x: -50%;
6649-
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
6650+
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
66506651
--seed-exit-opacity: 0;
66516652
--seed-exit-scale: 1;
66526653
animation-fill-mode: forwards;
@@ -6657,7 +6658,7 @@
66576658
animation-timing-function: var(--seed-timing-function-easing);
66586659
animation-duration: var(--seed-duration-d4);
66596660
--seed-exit-translate-x: 50%;
6660-
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
6661+
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
66616662
--seed-exit-opacity: 0;
66626663
--seed-exit-scale: 1;
66636664
animation-fill-mode: forwards;
@@ -6668,8 +6669,8 @@
66686669
}
66696670

66706671
.seed-slider__valueIndicatorArrow {
6671-
width: var(--seed-dimension-x2_5);
6672-
height: var(--seed-dimension-x2_5);
6672+
width: var(--seed-dimension-x2);
6673+
height: var(--seed-dimension-x2);
66736674
position: absolute;
66746675
top: 100%;
66756676
}
@@ -6686,8 +6687,8 @@
66866687

66876688
.seed-slider__valueIndicatorArrowTip {
66886689
fill: var(--seed-color-bg-neutral-inverted);
6689-
width: var(--seed-dimension-x2_5);
6690-
height: 7px;
6690+
width: var(--seed-dimension-x2);
6691+
height: var(--seed-dimension-x1_5);
66916692
display: block;
66926693
}
66936694

‎packages/css/all.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/css/recipes/slider.css‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -96,18 +96,19 @@
9696
top: 50%;
9797
box-sizing: border-box;
9898
background: var(--seed-color-bg-neutral-inverted);
99-
padding-left: var(--seed-dimension-x1_5);
100-
padding-right: var(--seed-dimension-x1_5);
101-
padding-top: var(--seed-dimension-x0_5);
102-
padding-bottom: var(--seed-dimension-x0_5);
103-
border-radius: var(--seed-radius-r1);
99+
padding-left: var(--seed-dimension-x2);
100+
padding-right: var(--seed-dimension-x2);
101+
padding-top: var(--seed-dimension-x1);
102+
padding-bottom: var(--seed-dimension-x1);
103+
border-radius: var(--seed-radius-r1_5);
104104
color: var(--seed-color-fg-neutral-inverted);
105-
font-size: var(--seed-font-size-t1);
106-
line-height: var(--seed-line-height-t1);
105+
font-size: var(--seed-font-size-t3);
106+
line-height: var(--seed-line-height-t3);
107107
font-weight: var(--seed-font-weight-medium);
108108
white-space: pre-wrap;
109109
text-align: center;
110110
width: max-content;
111+
min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
111112
}
112113
.seed-slider__valueIndicatorRoot[data-dir='ltr'] {
113114
left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
@@ -122,7 +123,7 @@
122123
animation-timing-function: var(--seed-timing-function-enter);
123124
animation-duration: var(--seed-duration-d4);
124125
--seed-enter-translate-x: -50%;
125-
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
126+
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
126127
--seed-enter-opacity: 0;
127128
--seed-enter-scale: 0.9;
128129
}
@@ -131,7 +132,7 @@
131132
animation-timing-function: var(--seed-timing-function-enter);
132133
animation-duration: var(--seed-duration-d4);
133134
--seed-enter-translate-x: 50%;
134-
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
135+
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
135136
--seed-enter-opacity: 0;
136137
--seed-enter-scale: 0.9;
137138
}
@@ -141,7 +142,7 @@
141142
animation-duration: var(--seed-duration-d4);
142143
animation-fill-mode: forwards;
143144
--seed-exit-translate-x: -50%;
144-
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
145+
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
145146
--seed-exit-opacity: 0;
146147
--seed-exit-scale: 1;
147148
}
@@ -151,16 +152,16 @@
151152
animation-duration: var(--seed-duration-d4);
152153
animation-fill-mode: forwards;
153154
--seed-exit-translate-x: 50%;
154-
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
155+
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - 0.3125rem);
155156
--seed-exit-opacity: 0;
156157
--seed-exit-scale: 1;
157158
}
158159
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
159160
animation-duration: 0s;
160161
}
161162
.seed-slider__valueIndicatorArrow {
162-
width: var(--seed-dimension-x2_5);
163-
height: var(--seed-dimension-x2_5);
163+
width: var(--seed-dimension-x2);
164+
height: var(--seed-dimension-x2);
164165
position: absolute;
165166
top: 100%;
166167
}
@@ -175,6 +176,6 @@
175176
.seed-slider__valueIndicatorArrowTip {
176177
display: block;
177178
fill: var(--seed-color-bg-neutral-inverted);
178-
width: var(--seed-dimension-x2_5);
179-
height: 7px;
179+
width: var(--seed-dimension-x2);
180+
height: var(--seed-dimension-x1_5);
180181
}

‎packages/css/vars/component/slider.d.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@ export declare const vars: {
2323
"cornerRadius": "var(--seed-radius-full)",
2424
"color": "var(--seed-color-bg-neutral-inverted)"
2525
},
26+
/** arrow width + paddingX * 2만큼의 최소 너비를 가집니다. */
2627
"valueIndicatorRoot": {
2728
"color": "var(--seed-color-bg-neutral-inverted)",
28-
"cornerRadius": "var(--seed-radius-r1)",
29-
"paddingX": "var(--seed-dimension-x1_5)",
30-
"paddingY": "var(--seed-dimension-x0_5)",
29+
"cornerRadius": "var(--seed-radius-r1_5)",
30+
/** value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다. */
31+
"paddingX": "var(--seed-dimension-x2)",
32+
"paddingY": "var(--seed-dimension-x1)",
3133
"offsetY": "var(--seed-dimension-x3)",
3234
"enterScale": "0.9",
3335
"enterOpacity": "0",
@@ -40,16 +42,16 @@ export declare const vars: {
4042
},
4143
"valueIndicatorArrow": {
4244
"color": "var(--seed-color-bg-neutral-inverted)",
43-
"width": "var(--seed-dimension-x2_5)",
44-
"height": "7px",
45+
"width": "var(--seed-dimension-x2)",
46+
"height": "var(--seed-dimension-x1_5)",
4547
"cornerRadius": "var(--seed-radius-r0_5)",
46-
"gutter": "var(--seed-dimension-x0_5)",
47-
"padding": "var(--seed-dimension-x0_5)"
48+
/** arrow와 thumb 사이의 거리를 정의합니다. */
49+
"gutter": "var(--seed-dimension-x0_5)"
4850
},
4951
"valueIndicatorLabel": {
5052
"color": "var(--seed-color-fg-neutral-inverted)",
51-
"fontSize": "var(--seed-font-size-t1)",
52-
"lineHeight": "var(--seed-line-height-t1)",
53+
"fontSize": "var(--seed-font-size-t3)",
54+
"lineHeight": "var(--seed-line-height-t3)",
5355
"fontWeight": "var(--seed-font-weight-medium)"
5456
},
5557
"marker": {

‎packages/css/vars/component/slider.mjs‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ export const vars = {
2525
},
2626
"valueIndicatorRoot": {
2727
"color": "var(--seed-color-bg-neutral-inverted)",
28-
"cornerRadius": "var(--seed-radius-r1)",
29-
"paddingX": "var(--seed-dimension-x1_5)",
30-
"paddingY": "var(--seed-dimension-x0_5)",
28+
"cornerRadius": "var(--seed-radius-r1_5)",
29+
"paddingX": "var(--seed-dimension-x2)",
30+
"paddingY": "var(--seed-dimension-x1)",
3131
"offsetY": "var(--seed-dimension-x3)",
3232
"enterScale": "0.9",
3333
"enterOpacity": "0",
@@ -40,16 +40,15 @@ export const vars = {
4040
},
4141
"valueIndicatorArrow": {
4242
"color": "var(--seed-color-bg-neutral-inverted)",
43-
"width": "var(--seed-dimension-x2_5)",
44-
"height": "7px",
43+
"width": "var(--seed-dimension-x2)",
44+
"height": "var(--seed-dimension-x1_5)",
4545
"cornerRadius": "var(--seed-radius-r0_5)",
46-
"gutter": "var(--seed-dimension-x0_5)",
47-
"padding": "var(--seed-dimension-x0_5)"
46+
"gutter": "var(--seed-dimension-x0_5)"
4847
},
4948
"valueIndicatorLabel": {
5049
"color": "var(--seed-color-fg-neutral-inverted)",
51-
"fontSize": "var(--seed-font-size-t1)",
52-
"lineHeight": "var(--seed-line-height-t1)",
50+
"fontSize": "var(--seed-font-size-t3)",
51+
"lineHeight": "var(--seed-line-height-t3)",
5352
"fontWeight": "var(--seed-font-weight-medium)"
5453
},
5554
"marker": {

0 commit comments

Comments
 (0)