Skip to content

Commit bc9ac1e

Browse files
theo-mesnilcnairi
theo-mesnil
authored and
cnairi
committed
fix: dynamic variables
1 parent fd396fb commit bc9ac1e

File tree

3 files changed

+46
-24
lines changed

3 files changed

+46
-24
lines changed

‎lib/src/components/Stepper/stepper.module.scss‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@
1313
padding-inline: var(--components-dimensions-stepper-padding-inline);
1414
border-width: var(--components-dimensions-stepper-border-width-default);
1515
border-radius: var(--components-dimensions-stepper-border-radius);
16-
border-color: var(--components-colors-stepper-color-border-default);
16+
border-color: var(--stepperBorderColor, var(--components-colors-stepper-color-border-default));
1717
background-color: var(--components-colors-stepper-color-background);
1818
transition-duration: var(--duration-fast);
19-
box-shadow: var(--elevation-10);
19+
box-shadow: var(--stepperBoxShadow, var(--elevation-10));
2020

2121
svg {
2222
width: var(--components-dimensions-stepper-size-icon);
2323
height: var(--components-dimensions-stepper-size-icon);
2424
}
2525

2626
&:hover {
27-
border-color: var(--components-colors-stepper-color-border-hover);
28-
box-shadow: var(--elevation-20);
27+
--stepperBorderColor: var(--components-colors-stepper-color-border-hover);
28+
--stepperBoxShadow: var(--elevation-20);
2929
}
3030
}
3131

@@ -36,7 +36,6 @@
3636
.item {
3737
display: flex;
3838
align-items: center;
39-
border-color: transparent;
4039
transition-property: background-color, border-color, color;
4140
transition-timing-function: ease-in-out;
4241

@@ -46,9 +45,18 @@
4645
padding-inline: var(--components-dimensions-stepper-step-padding-inline);
4746
border-width: var(--components-dimensions-stepper-step-border-width-active);
4847
border-radius: var(--components-dimensions-stepper-step-border-radius);
49-
background-color: var(--components-colors-stepper-step-color-background-unchecked-default);
5048
transition-duration: var(--duration-medium);
51-
color: var(--components-colors-stepper-step-color-text-unchecked-default);
49+
50+
/* VARIABLES FROM REACT PROPS - DEFAULT VALUES */
51+
background-color: var(
52+
--stepperItemBackgroundColor,
53+
var(--components-colors-stepper-step-color-background-unchecked-default)
54+
);
55+
border-color: var(--stepperItemBorderColor, transparent);
56+
color: var(
57+
--stepperItemColor,
58+
var(--components-colors-stepper-step-color-text-unchecked-default)
59+
);
5260

5361
svg {
5462
width: var(--components-dimensions-stepper-step-size-icon);
@@ -62,50 +70,64 @@
6270
/* VARIABLES FROM THEME - CHANGE WITH REACT PROPS */
6371

6472
&[aria-current='true'] {
65-
color: var(--components-colors-stepper-step-color-text-checked-default);
66-
border-color: var(--components-colors-stepper-step-color-border-checked-default);
67-
background-color: var(--components-colors-stepper-step-color-background-checked-default);
73+
--stepperItemColor: var(--components-colors-stepper-step-color-text-checked-default);
74+
--stepperItemBorderColor: var(--components-colors-stepper-step-color-border-checked-default);
75+
--stepperItemBackgroundColor: var(
76+
--components-colors-stepper-step-color-background-checked-default
77+
);
6878

6979
svg {
70-
color: var(--components-colors-stepper-step-color-icon-checked-default);
80+
--stepperItemIconColor: var(--components-colors-stepper-step-color-icon-checked-default);
7181
}
7282
}
7383

7484
&.clickable {
7585
cursor: pointer;
7686

7787
&:hover {
78-
color: var(--components-colors-stepper-step-color-text-unchecked-hover);
79-
background-color: var(--components-colors-stepper-step-color-background-checked-hover);
88+
--stepperItemColor: var(--components-colors-stepper-step-color-text-unchecked-hover);
89+
--stepperItemBackgroundColor: var(
90+
--components-colors-stepper-step-color-background-checked-hover
91+
);
8092

8193
&:not(.completed) {
8294
svg {
83-
color: var(--components-colors-stepper-step-color-icon-unchecked-hover);
95+
--stepperItemIconColor: var(
96+
--components-colors-stepper-step-color-icon-unchecked-hover
97+
);
8498
}
8599
}
86100
}
87101

88102
&[aria-current='true'] {
89-
color: var(--components-colors-stepper-step-color-text-checked-default);
90-
background-color: var(--components-colors-stepper-step-color-background-checked-default);
91-
border-color: var(--components-colors-stepper-step-color-border-checked-default);
103+
--stepperItemColor: var(--components-colors-stepper-step-color-text-checked-default);
104+
--stepperItemBackgroundColor: var(
105+
--components-colors-stepper-step-color-background-checked-default
106+
);
107+
--stepperItemBorderColor: var(
108+
--components-colors-stepper-step-color-border-checked-default
109+
);
92110

93111
&:hover {
94-
background-color: var(--components-colors-stepper-step-color-background-checked-hover);
95-
border-color: var(--components-colors-stepper-step-color-border-checked-hover);
112+
--stepperItemBackgroundColor: var(
113+
--components-colors-stepper-step-color-background-checked-hover
114+
);
115+
--stepperItemBorderColor: var(
116+
--components-colors-stepper-step-color-border-checked-hover
117+
);
96118
}
97119

98120
&:not(.completed) {
99121
svg {
100-
color: var(--components-colors-stepper-step-color-icon-checked-hover);
122+
--stepperItemIconColor: var(--components-colors-stepper-step-color-icon-checked-hover);
101123
}
102124
}
103125
}
104126
}
105127

106128
&.completed {
107129
svg {
108-
color: var(--components-colors-stepper-step-color-icon-success);
130+
--stepperItemIconColor: var(--components-colors-stepper-step-color-icon-success);
109131
}
110132
}
111133
}

‎website/app/components/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const Page = () => {
4040
<Text as="h3" variant="heading-md-strong">
4141
{page.title}
4242
</Text>
43-
{data.isNew ? <Badge variant="primary">New</Badge> : null}
43+
{data.isNew ? <Badge variant="brand">NEW</Badge> : null}
4444
</div>
4545
<Text className="text-neutral-70 mt-sm" lines={3} variant="body-md">
4646
{data?.description}

‎website/build-app/components/Sidebar/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ export const Sidebar = ({ className, isSubPage, menu, onClick }: SidebarProps) =
7070
{title || getName(id)}
7171
</Link>
7272
{isNew ? (
73-
<Badge size="sm" variant="primary">
74-
New
73+
<Badge size="sm" variant="brand">
74+
NEW
7575
</Badge>
7676
) : null}
7777
</li>

0 commit comments

Comments
 (0)