Skip to content

Commit f08f247

Browse files
paanSinghCoderpaanSinghCoder
authored
Fix/css vars v1 5489 (#256)
* refactor: css vars changes * css: fix button var
1 parent cd363a7 commit f08f247

File tree

4 files changed

+48
-48
lines changed

4 files changed

+48
-48
lines changed

‎apps/www/examples/shield-ts/assets.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export const Assets = () => {
239239
Small Headline (h3)
240240
</Headline>
241241

242-
<Headline size="medium" as="h4" style={{ color: "var(--rs-color-text-accent-primary)" }}>
242+
<Headline size="medium" as="h4" style={{ color: "var(--rs-color-foreground-accent-primary)" }}>
243243
Custom Styled Headline (h4)
244244
</Headline>
245245
</Flex>

‎packages/raystack/v1/components/avatar/avatar.module.css‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -52,48 +52,48 @@
5252
}
5353

5454
.avatar-color-sky {
55-
--avatar-hue: var(--rs-visualization-sky-sky-9);
56-
--avatar-color: var(--rs-viz-sky-11);
55+
--avatar-hue: var(--rs-color-viz-sky-9);
56+
--avatar-color: var(--rs-color-viz-sky-11);
5757
}
5858

5959
.avatar-color-lime {
60-
--avatar-hue: var(--rs-visualization-lime-lime-9);
61-
--avatar-color: var(--rs-viz-lime-11);
60+
--avatar-hue: var(--rs-color-viz-lime-9);
61+
--avatar-color: var(--rs-color-viz-lime-11);
6262
}
6363

6464
.avatar-color-grass {
65-
--avatar-hue: var(--rs-visualization-grass-grass-9);
66-
--avatar-color: var(--rs-viz-grass-11);
65+
--avatar-hue: var(--rs-color-viz-grass-9);
66+
--avatar-color: var(--rs-color-viz-grass-11);
6767
}
6868

6969
.avatar-color-cyan {
70-
--avatar-hue: var(--rs-visualization-cyan-cyan-9);
71-
--avatar-color: var(--rs-viz-cyan-11);
70+
--avatar-hue: var(--rs-color-viz-cyan-9);
71+
--avatar-color: var(--rs-color-viz-cyan-11);
7272
}
7373

7474
.avatar-color-iris {
75-
--avatar-hue: var(--rs-visualization-iris-iris-9);
76-
--avatar-color: var(--rs-viz-iris-11);
75+
--avatar-hue: var(--rs-color-viz-iris-9);
76+
--avatar-color: var(--rs-color-viz-iris-11);
7777
}
7878

7979
.avatar-color-purple {
80-
--avatar-hue: var(--rs-visualization-purple-purple-9);
81-
--avatar-color: var(--rs-viz-purple-11);
80+
--avatar-hue: var(--rs-color-viz-purple-9);
81+
--avatar-color: var(--rs-color-viz-purple-11);
8282
}
8383

8484
.avatar-color-pink {
85-
--avatar-hue: var(--rs-visualization-pink-pink-9);
86-
--avatar-color: var(--rs-viz-pink-11);
85+
--avatar-hue: var(--rs-color-viz-pink-9);
86+
--avatar-color: var(--rs-color-viz-pink-11);
8787
}
8888

8989
.avatar-color-crimson {
90-
--avatar-hue: var(--rs-visualization-crimson-crimson-9);
91-
--avatar-color: var(--rs-viz-crimson-11);
90+
--avatar-hue: var(--rs-color-viz-crimson-9);
91+
--avatar-color: var(--rs-color-viz-crimson-11);
9292
}
9393

9494
.avatar-color-gold {
95-
--avatar-hue: var(--rs-visualization-gold-gold-9);
96-
--avatar-color: var(--rs-viz-gold-11);
95+
--avatar-hue: var(--rs-color-viz-gold-9);
96+
--avatar-color: var(--rs-color-viz-gold-11);
9797
}
9898

9999
.avatar-solid-indigo {
@@ -117,48 +117,48 @@
117117
}
118118

119119
.avatar-solid-sky {
120-
background-color: var(--rs-visualization-sky-sky-9);
121-
color: var(--rs-viz-sky-11);
120+
background-color: var(--rs-color-viz-sky-9);
121+
color: var(--rs-color-viz-sky-11);
122122
}
123123

124124
.avatar-solid-lime {
125-
background-color: var(--rs-visualization-lime-lime-9);
126-
color: var(--rs-viz-lime-11);
125+
background-color: var(--rs-color-viz-lime-9);
126+
color: var(--rs-color-viz-lime-11);
127127
}
128128

129129
.avatar-solid-grass {
130-
background-color: var(--rs-visualization-grass-grass-8);
131-
color: var(--rs-viz-grass-11);
130+
background-color: var(--rs-color-viz-grass-8);
131+
color: var(--rs-color-viz-grass-11);
132132
}
133133

134134
.avatar-solid-cyan {
135-
background-color: var(--rs-visualization-cyan-cyan-8);
136-
color: var(--rs-viz-cyan-11);
135+
background-color: var(--rs-color-viz-cyan-8);
136+
color: var(--rs-color-viz-cyan-11);
137137
}
138138

139139
.avatar-solid-iris {
140-
background-color: var(--rs-visualization-iris-iris-8);
141-
color: var(--rs-viz-iris-11);
140+
background-color: var(--rs-color-viz-iris-8);
141+
color: var(--rs-color-viz-iris-11);
142142
}
143143

144144
.avatar-solid-purple {
145-
background-color: var(--rs-visualization-purple-purple-8);
146-
color: var(--rs-viz-purple-11);
145+
background-color: var(--rs-color-viz-purple-8);
146+
color: var(--rs-color-viz-purple-11);
147147
}
148148

149149
.avatar-solid-pink {
150-
background-color: var(--rs-visualization-pink-pink-8);
151-
color: var(--rs-viz-pink-11);
150+
background-color: var(--rs-color-viz-pink-8);
151+
color: var(--rs-color-viz-pink-11);
152152
}
153153

154154
.avatar-solid-crimson {
155-
background-color: var(--rs-visualization-crimson-crimson-8);
156-
color: var(--rs-viz-crimson-11);
155+
background-color: var(--rs-color-viz-crimson-8);
156+
color: var(--rs-color-viz-crimson-11);
157157
}
158158

159159
.avatar-solid-gold {
160-
background-color: var(--rs-visualization-gold-gold-8);
161-
color: var(--rs-viz-gold-11);
160+
background-color: var(--rs-color-viz-gold-8);
161+
color: var(--rs-color-viz-gold-11);
162162
}
163163

164164
/* Soft Variants */
@@ -179,39 +179,39 @@
179179
}
180180

181181
.avatar-soft-sky {
182-
background-color: var(--rs-visualization-sky-sky-6);
182+
background-color: var(--rs-color-viz-sky-6);
183183
}
184184

185185
.avatar-soft-lime {
186-
background-color: var(--rs-visualization-lime-lime-6);
186+
background-color: var(--rs-color-viz-lime-6);
187187
}
188188

189189
.avatar-soft-grass {
190-
background-color: var(--rs-visualization-grass-grass-6);
190+
background-color: var(--rs-color-viz-grass-6);
191191
}
192192

193193
.avatar-soft-cyan {
194-
background-color: var(--rs-visualization-cyan-cyan-6);
194+
background-color: var(--rs-color-viz-cyan-6);
195195
}
196196

197197
.avatar-soft-iris {
198-
background-color: var(--rs-visualization-iris-iris-6);
198+
background-color: var(--rs-color-viz-iris-6);
199199
}
200200

201201
.avatar-soft-purple {
202-
background-color: var(--rs-visualization-purple-purple-6);
202+
background-color: var(--rs-color-viz-purple-6);
203203
}
204204

205205
.avatar-soft-pink {
206-
background-color: var(--rs-visualization-pink-pink-6);
206+
background-color: var(--rs-color-viz-pink-6);
207207
}
208208

209209
.avatar-soft-crimson {
210-
background-color: var(--rs-visualization-crimson-crimson-6);
210+
background-color: var(--rs-color-viz-crimson-6);
211211
}
212212

213213
.avatar-soft-gold {
214-
background-color: var(--rs-visualization-gold-gold-6);
214+
background-color: var(--rs-color-viz-gold-6);
215215
}
216216

217217
.imageWrapper {

‎packages/raystack/v1/components/button/button.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
font-weight: 500;
1111
width: fit-content;
1212
padding: var(--rs-space-3) var(--rs-space-4);
13-
border-radius: var(--br-4);
13+
border-radius: var(--rs-radius-2);
1414
text-wrap: nowrap;
1515
}
1616

‎packages/raystack/v1/components/headline/headline.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
margin: 0;
55
font-weight: 400;
66
font-family: var(--rs-font-title);
7-
color: var(--rs-color-text-base-primary);
7+
color: var(--rs-color-foreground-base-primary);
88
width: 100%;
99
}
1010

0 commit comments

Comments
 (0)