Skip to content

Commit 122f981

Browse files
cdransfcdransf
committed
chore(full-fidelity): consistently rename status light css properties
1 parent ef08c23 commit 122f981

1 file changed

Lines changed: 50 additions & 50 deletions

File tree

‎2nd-gen/packages/swc/components/status-light/status-light.css‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@
2222
}
2323

2424
.swc-StatusLight {
25-
--_swc-status-light-padding-block: var(--swc-statuslight-padding-block, token("component-padding-vertical-100"));
26-
--_swc-status-light-top-to-dot: var(--swc-statuslight-top-to-dot, token("status-light-top-to-dot-medium"));
27-
--_swc-status-light-text-to-visual: var(--swc-statuslight-text-to-visual, token("status-light-text-to-visual-100"));
28-
--_swc-status-light-line-height: var(--swc-statuslight-line-height, token("line-height-font-size-100"));
25+
--_swc-status-light-padding-block: var(--swc-status-light-padding-block, token("component-padding-vertical-100"));
26+
--_swc-status-light-top-to-dot: var(--swc-status-light-top-to-dot, token("status-light-top-to-dot-medium"));
27+
--_swc-status-light-text-to-visual: var(--swc-status-light-text-to-visual, token("status-light-text-to-visual-100"));
28+
--_swc-status-light-line-height: var(--swc-status-light-line-height, token("line-height-font-size-100"));
2929

3030
display: flex;
3131
gap: var(--_swc-status-light-text-to-visual);
3232
align-items: flex-start;
33-
min-block-size: var(--swc-statuslight-height, token("component-height-100"));
33+
min-block-size: var(--swc-status-light-height, token("component-height-100"));
3434
padding-block: var(--_swc-status-light-padding-block);
35-
font-size: var(--swc-statuslight-font-size, token("font-size-100"));
35+
font-size: var(--swc-status-light-font-size, token("font-size-100"));
3636
font-style: token("default-font-style");
3737
font-weight: token("regular-font-weight");
3838
line-height: var(--_swc-status-light-line-height);
@@ -46,131 +46,131 @@
4646

4747
/* Dot */
4848
&::before {
49-
--_swc-status-light-dot-size: var(--swc-statuslight-dot-size, token("status-light-dot-size-medium"));
49+
--_swc-status-light-dot-size: var(--swc-status-light-dot-size, token("status-light-dot-size-medium"));
5050

5151
flex-grow: 0;
5252
flex-shrink: 0;
5353
inline-size: var(--_swc-status-light-dot-size);
5454
block-size: var(--_swc-status-light-dot-size);
5555
margin-block-start: calc(var(--_swc-status-light-top-to-dot) - var(--_swc-status-light-padding-block));
56-
background-color: var(--swc-statuslight-dot-color);
56+
background-color: var(--swc-status-light-dot-color);
5757
border-radius: token("corner-radius-full");
5858
content: "";
5959
}
6060
}
6161

6262
:host([size="s"]) {
63-
--swc-statuslight-padding-block: token("component-padding-vertical-75");
64-
--swc-statuslight-top-to-dot: token("status-light-top-to-dot-small");
65-
--swc-statuslight-text-to-visual: token("status-light-text-to-visual-75");
66-
--swc-statuslight-height: token("component-height-75");
67-
--swc-statuslight-dot-size: token("status-light-dot-size-small");
68-
--swc-statuslight-font-size: token("font-size-75");
69-
--swc-statuslight-line-height: token("line-height-font-size-75");
63+
--swc-status-light-padding-block: token("component-padding-vertical-75");
64+
--swc-status-light-top-to-dot: token("status-light-top-to-dot-small");
65+
--swc-status-light-text-to-visual: token("status-light-text-to-visual-75");
66+
--swc-status-light-height: token("component-height-75");
67+
--swc-status-light-dot-size: token("status-light-dot-size-small");
68+
--swc-status-light-font-size: token("font-size-75");
69+
--swc-status-light-line-height: token("line-height-font-size-75");
7070
}
7171

7272
:host([size="l"]) {
73-
--swc-statuslight-padding-block: token("component-padding-vertical-200");
74-
--swc-statuslight-top-to-dot: token("status-light-top-to-dot-large");
75-
--swc-statuslight-text-to-visual: token("status-light-text-to-visual-200");
76-
--swc-statuslight-height: token("component-height-200");
77-
--swc-statuslight-dot-size: token("status-light-dot-size-large");
78-
--swc-statuslight-font-size: token("font-size-200");
79-
--swc-statuslight-line-height: token("line-height-font-size-200");
73+
--swc-status-light-padding-block: token("component-padding-vertical-200");
74+
--swc-status-light-top-to-dot: token("status-light-top-to-dot-large");
75+
--swc-status-light-text-to-visual: token("status-light-text-to-visual-200");
76+
--swc-status-light-height: token("component-height-200");
77+
--swc-status-light-dot-size: token("status-light-dot-size-large");
78+
--swc-status-light-font-size: token("font-size-200");
79+
--swc-status-light-line-height: token("line-height-font-size-200");
8080
}
8181

8282
:host([size="xl"]) {
83-
--swc-statuslight-padding-block: token("component-padding-vertical-300");
84-
--swc-statuslight-top-to-dot: token("status-light-top-to-dot-extra-large");
85-
--swc-statuslight-text-to-visual: token("status-light-text-to-visual-300");
86-
--swc-statuslight-height: token("component-height-300");
87-
--swc-statuslight-dot-size: token("status-light-dot-size-extra-large");
88-
--swc-statuslight-font-size: token("font-size-300");
89-
--swc-statuslight-line-height: token("line-height-font-size-300");
83+
--swc-status-light-padding-block: token("component-padding-vertical-300");
84+
--swc-status-light-top-to-dot: token("status-light-top-to-dot-extra-large");
85+
--swc-status-light-text-to-visual: token("status-light-text-to-visual-300");
86+
--swc-status-light-height: token("component-height-300");
87+
--swc-status-light-dot-size: token("status-light-dot-size-extra-large");
88+
--swc-status-light-font-size: token("font-size-300");
89+
--swc-status-light-line-height: token("line-height-font-size-300");
9090
}
9191

9292
/* Semantic colors */
9393
:host([variant="neutral"]) {
94-
--swc-statuslight-content-color: token("gray-600");
95-
--swc-statuslight-dot-color: token("neutral-visual-color");
94+
--swc-status-light-content-color: token("gray-600");
95+
--swc-status-light-dot-color: token("neutral-visual-color");
9696
}
9797

9898
:host([variant="info"]) {
99-
--swc-statuslight-dot-color: token("informative-visual-color");
99+
--swc-status-light-dot-color: token("informative-visual-color");
100100
}
101101

102102
:host([variant="negative"]) {
103-
--swc-statuslight-dot-color: token("negative-visual-color");
103+
--swc-status-light-dot-color: token("negative-visual-color");
104104
}
105105

106106
:host([variant="notice"]) {
107-
--swc-statuslight-dot-color: token("notice-visual-color");
107+
--swc-status-light-dot-color: token("notice-visual-color");
108108
}
109109

110110
:host([variant="positive"]) {
111-
--swc-statuslight-dot-color: token("positive-visual-color");
111+
--swc-status-light-dot-color: token("positive-visual-color");
112112
}
113113

114114
/* Non-semantic colors */
115115
.swc-StatusLight--yellow {
116-
--swc-statuslight-dot-color: token("yellow-visual-color");
116+
--swc-status-light-dot-color: token("yellow-visual-color");
117117
}
118118

119119
.swc-StatusLight--chartreuse {
120-
--swc-statuslight-dot-color: token("chartreuse-visual-color");
120+
--swc-status-light-dot-color: token("chartreuse-visual-color");
121121
}
122122

123123
.swc-StatusLight--celery {
124-
--swc-statuslight-dot-color: token("celery-visual-color");
124+
--swc-status-light-dot-color: token("celery-visual-color");
125125
}
126126

127127
.swc-StatusLight--seafoam {
128-
--swc-statuslight-dot-color: token("seafoam-visual-color");
128+
--swc-status-light-dot-color: token("seafoam-visual-color");
129129
}
130130

131131
.swc-StatusLight--cyan {
132-
--swc-statuslight-dot-color: token("cyan-visual-color");
132+
--swc-status-light-dot-color: token("cyan-visual-color");
133133
}
134134

135135
.swc-StatusLight--indigo {
136-
--swc-statuslight-dot-color: token("indigo-visual-color");
136+
--swc-status-light-dot-color: token("indigo-visual-color");
137137
}
138138

139139
.swc-StatusLight--purple {
140-
--swc-statuslight-dot-color: token("purple-visual-color");
140+
--swc-status-light-dot-color: token("purple-visual-color");
141141
}
142142

143143
.swc-StatusLight--fuchsia {
144-
--swc-statuslight-dot-color: token("fuchsia-visual-color");
144+
--swc-status-light-dot-color: token("fuchsia-visual-color");
145145
}
146146

147147
.swc-StatusLight--magenta {
148-
--swc-statuslight-dot-color: token("magenta-visual-color");
148+
--swc-status-light-dot-color: token("magenta-visual-color");
149149
}
150150

151151
.swc-StatusLight--pink {
152-
--swc-statuslight-dot-color: token("pink-visual-color");
152+
--swc-status-light-dot-color: token("pink-visual-color");
153153
}
154154

155155
.swc-StatusLight--turquoise {
156-
--swc-statuslight-dot-color: token("turquoise-visual-color");
156+
--swc-status-light-dot-color: token("turquoise-visual-color");
157157
}
158158

159159
.swc-StatusLight--cinnamon {
160-
--swc-statuslight-dot-color: token("cinnamon-visual-color");
160+
--swc-status-light-dot-color: token("cinnamon-visual-color");
161161
}
162162

163163
.swc-StatusLight--brown {
164-
--swc-statuslight-dot-color: token("brown-visual-color");
164+
--swc-status-light-dot-color: token("brown-visual-color");
165165
}
166166

167167
.swc-StatusLight--silver {
168-
--swc-statuslight-dot-color: token("silver-visual-color");
168+
--swc-status-light-dot-color: token("silver-visual-color");
169169
}
170170

171171
@media (forced-colors: active) {
172172
.swc-StatusLight {
173-
--swc-statuslight-content-color: CanvasText;
173+
--swc-status-light-content-color: CanvasText;
174174

175175
forced-color-adjust: none;
176176

0 commit comments

Comments
 (0)