A design system in a box.
hip-ui.tngl.io/docs/introduction
fix progress bar
+20
-20
+10
-10
apps/docs/src/components/progress-bar/index.tsx
+10
-10
apps/docs/src/components/progress-bar/index.tsx
···
40
40
width: "100%",
41
41
42
42
height: {
43
-
":is([data-size=sm])": spacing["1"],
44
-
":is([data-size=md])": spacing["2"],
45
-
":is([data-size=lg])": spacing["3"],
43
+
":is([data-size=sm] *)": spacing["1"],
44
+
":is([data-size=md] *)": spacing["2"],
45
+
":is([data-size=lg] *)": spacing["3"],
46
46
},
47
47
},
48
48
valueLabel: {
···
52
52
justifySelf: "flex-end",
53
53
54
54
fontSize: {
55
-
":is([data-size=sm])": fontSize["xs"],
56
-
":is([data-size=md])": fontSize["sm"],
57
-
":is([data-size=lg])": fontSize["base"],
55
+
":is([data-size=sm] *)": fontSize["xs"],
56
+
":is([data-size=md] *)": fontSize["sm"],
57
+
":is([data-size=lg] *)": fontSize["base"],
58
58
},
59
59
lineHeight: {
60
-
":is([data-size=sm])": lineHeight["xs"],
61
-
":is([data-size=md])": lineHeight["sm"],
62
-
":is([data-size=lg])": lineHeight["base"],
60
+
":is([data-size=sm] *)": lineHeight["xs"],
61
+
":is([data-size=md] *)": lineHeight["sm"],
62
+
":is([data-size=lg] *)": lineHeight["base"],
63
63
},
64
64
},
65
65
fill: {
66
66
backgroundColor: primaryColor.solid1,
67
67
height: "100%",
68
68
transform: "translateX(-100%)",
69
-
transitionDuration: "10ms",
69
+
transitionDuration: "150ms",
70
70
transitionProperty: "transform",
71
71
transitionTimingFunction: "linear",
72
72
width: "100%",
+10
-10
packages/hip-ui/src/components/progress-bar/index.tsx
+10
-10
packages/hip-ui/src/components/progress-bar/index.tsx
···
40
40
width: "100%",
41
41
42
42
height: {
43
-
":is([data-size=sm])": spacing["1"],
44
-
":is([data-size=md])": spacing["2"],
45
-
":is([data-size=lg])": spacing["3"],
43
+
":is([data-size=sm] *)": spacing["1"],
44
+
":is([data-size=md] *)": spacing["2"],
45
+
":is([data-size=lg] *)": spacing["3"],
46
46
},
47
47
},
48
48
valueLabel: {
···
52
52
justifySelf: "flex-end",
53
53
54
54
fontSize: {
55
-
":is([data-size=sm])": fontSize["xs"],
56
-
":is([data-size=md])": fontSize["sm"],
57
-
":is([data-size=lg])": fontSize["base"],
55
+
":is([data-size=sm] *)": fontSize["xs"],
56
+
":is([data-size=md] *)": fontSize["sm"],
57
+
":is([data-size=lg] *)": fontSize["base"],
58
58
},
59
59
lineHeight: {
60
-
":is([data-size=sm])": lineHeight["xs"],
61
-
":is([data-size=md])": lineHeight["sm"],
62
-
":is([data-size=lg])": lineHeight["base"],
60
+
":is([data-size=sm] *)": lineHeight["xs"],
61
+
":is([data-size=md] *)": lineHeight["sm"],
62
+
":is([data-size=lg] *)": lineHeight["base"],
63
63
},
64
64
},
65
65
fill: {
66
66
backgroundColor: primaryColor.solid1,
67
67
height: "100%",
68
68
transform: "translateX(-100%)",
69
-
transitionDuration: "10ms",
69
+
transitionDuration: "150ms",
70
70
transitionProperty: "transform",
71
71
transitionTimingFunction: "linear",
72
72
width: "100%",