Skip to content

Commit e60ee90

Browse files
adenvtadenvt
authored
Merge pull request #1426 from privy-open-source/fix/change-brand-accent
Fix/change brand accent
2 parents 9c0fecd + a8dc09e commit e60ee90

File tree

10 files changed

+63
-43
lines changed

10 files changed

+63
-43
lines changed

‎packages/tailwind-preset/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ module.exports = {
99
brand: {
1010
logo : theme.colors.red[40],
1111
action: theme.colors.red[40],
12-
accent: theme.colors.red[40],
12+
accent: theme.colors.blue[40],
1313
},
1414
dark: {
1515
brand: {
1616
logo : theme.colors.gray[0],
1717
action: theme.colors.red[30],
18-
accent: theme.colors.red[30],
18+
accent: theme.colors.blue[30],
1919
},
2020
},
2121
},

‎src/components/calendar/Calendar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -396,8 +396,8 @@ watch([viewmode, cursor], ([vm, cursor], [vmOld, cursorOld]) => {
396396
}
397397
398398
&[active="true"] {
399-
@apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
400-
@apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
399+
@apply bg-brand-accent border-brand-accent text-state-emphasis cursor-default;
400+
@apply dark:bg-dark-brand-accent dark:border-dark-brand-accent dark:text-dark-state-emphasis;
401401
}
402402
403403
&[disabled][active="false"] {

‎src/components/checkbox/Checkbox.vue

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,8 @@ defineSlots<{
143143
&.checkbox {
144144
&--checked {
145145
.card {
146-
@apply border-info-emphasis;
147-
@apply dark:border-dark-info-emphasis;
146+
@apply border-brand-accent;
147+
@apply dark:border-dark-brand-accent;
148148
}
149149
}
150150
}
@@ -159,22 +159,22 @@ defineSlots<{
159159
}
160160
161161
/**
162-
* give color of checkbox label
162+
* give color of
163+
* checkbox label
163164
*/
164165
&__label {
165166
@apply text-default;
166167
@apply dark:text-dark-default;
167168
}
168169
169170
/**
170-
* give info background and
171-
* white checked icon
171+
* checkbox checked
172172
*/
173173
&--checked,
174174
&--indeterminate {
175175
.checkbox__icon {
176-
@apply bg-info-emphasis border-info-emphasis;
177-
@apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
176+
@apply bg-brand-accent border-brand-accent;
177+
@apply dark:bg-dark-brand-accent dark:border-dark-brand-accent;
178178
179179
> svg {
180180
@apply fill-default;
@@ -203,7 +203,8 @@ defineSlots<{
203203
}
204204
205205
/**
206-
* checkbox in dropdown menu
206+
* checkbox in
207+
* dropdown menu
207208
*/
208209
.dropdown__menu > .dropdown__subitem > .dropdown__item > &,
209210
.dropdown__menu > .dropdown__subitem > & {

‎src/components/input-range/InputRange.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -267,8 +267,8 @@ watch([startValue, endValue], ([startVal, endVal]) => {
267267
@apply h-2 rounded;
268268
269269
&-active {
270-
@apply bg-info-emphasis relative text-center;
271-
@apply dark:bg-dark-info-emphasis;
270+
@apply bg-brand-accent relative text-center;
271+
@apply dark:bg-dark-brand-accent;
272272
}
273273
274274
&-upper {
@@ -282,8 +282,8 @@ watch([startValue, endValue], ([startVal, endVal]) => {
282282
283283
&:hover,
284284
&:active {
285-
@apply ring ring-info border-info-emphasis;
286-
@apply dark:ring-dark-info dark:border-dark-info-emphasis;
285+
@apply ring ring-info border-brand-accent;
286+
@apply dark:ring-dark-info dark:border-dark-brand-accent;
287287
}
288288
289289
&-start {

‎src/components/progress/Progress.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ const item = computed<ProgressLabel>(() => {
132132
133133
&--active {
134134
.progress__point {
135-
@apply bg-info-emphasis text-state-emphasis;
136-
@apply dark:bg-dark-info-emphasis dark:text-dark-state-emphasis;
135+
@apply bg-brand-accent text-state-emphasis;
136+
@apply dark:bg-dark-brand-accent dark:text-dark-state-emphasis;
137137
}
138138
}
139139

‎src/components/progressbar/Progressbar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ const classNames = computed(() => {
7878
7979
&__bar {
8080
@apply transition-[width] will-change-[width] duration-75 ease-out;
81-
@apply bg-info-emphasis rounded-full h-full origin-center;
82-
@apply dark:bg-dark-info-emphasis;
81+
@apply bg-brand-accent rounded-full h-full origin-center;
82+
@apply dark:bg-dark-brand-accent;
8383
}
8484
8585
&--indeterminate {

‎src/components/radio/Radio.vue

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<circle
3030
cx="7"
3131
cy="7"
32-
r="6.25" />
32+
r="6" />
3333
</svg>
3434
</span>
3535
<span class="radio__label">
@@ -134,7 +134,7 @@ defineSlots<{
134134
* with custom icon
135135
*/
136136
&__icon {
137-
@apply w-5 h-5 border shrink-0 rounded-full border-subtle inline-flex items-center justify-center bg-default;
137+
@apply w-4 h-4 border shrink-0 rounded-full border-subtle inline-flex items-center justify-center bg-default;
138138
@apply dark:border-dark-subtle dark:bg-dark-default;
139139
140140
> svg {
@@ -144,7 +144,8 @@ defineSlots<{
144144
}
145145
146146
/**
147-
* give color of checkbox label
147+
* give color of
148+
* checkbox label
148149
*/
149150
&__label {
150151
@apply text-default grow;
@@ -171,17 +172,31 @@ defineSlots<{
171172
}
172173
173174
/**
174-
* give info background and
175-
* white checked icon
175+
* checked radio
176176
*/
177177
&&--checked {
178+
&:not(.radio--checkbox) {
179+
.radio__icon {
180+
@apply bg-default;
181+
@apply dark:bg-dark-inverse;
182+
}
183+
}
184+
178185
.radio__icon {
179-
@apply bg-info-emphasis border-info-emphasis;
180-
@apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
186+
@apply border-brand-accent;
187+
@apply dark:border-dark-brand-accent;
188+
189+
> svg {
190+
@apply fill-brand-accent;
191+
@apply dark:fill-dark-brand-accent;
192+
}
181193
}
182194
183195
&.radio--checkbox {
184196
.radio__icon {
197+
@apply bg-brand-accent;
198+
@apply dark:bg-dark-brand-accent;
199+
185200
> svg {
186201
@apply fill-default;
187202
@apply dark:fill-dark-inverse;
@@ -191,7 +206,8 @@ defineSlots<{
191206
}
192207
193208
/**
194-
* radio with checkbox appearance
209+
* radio with checkbox
210+
* appearance
195211
*/
196212
&&--checkbox {
197213
.radio__icon {
@@ -200,7 +216,8 @@ defineSlots<{
200216
}
201217
202218
/**
203-
* radio with option appearance
219+
* radio with option
220+
* appearance
204221
*/
205222
&&--option {
206223
.radio__icon {
@@ -227,15 +244,16 @@ defineSlots<{
227244
@apply dark:text-dark-info;
228245
229246
> svg {
230-
@apply fill-info-emphasis;
231-
@apply dark:fill-dark-info-emphasis;
247+
@apply fill-brand-accent;
248+
@apply dark:fill-dark-brand-accent;
232249
}
233250
}
234251
}
235252
}
236253
237254
/**
238-
* radio with appearance none
255+
* radio with
256+
* appearance none
239257
*/
240258
&&--none {
241259
.radio__icon {
@@ -255,7 +273,8 @@ defineSlots<{
255273
}
256274
257275
/**
258-
* checkbox in dropdown menu
276+
* checkbox in
277+
* dropdown menu
259278
*/
260279
.dropdown__menu > .dropdown__subitem > .dropdown__item > &,
261280
.dropdown__menu > .dropdown__subitem > & {

‎src/components/select/Select.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -551,8 +551,8 @@ defineSlots<{
551551
}
552552
553553
.selected .select__option-checked {
554-
@apply bg-info-emphasis border-info-emphasis;
555-
@apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
554+
@apply bg-brand-accent border-brand-accent;
555+
@apply dark:bg-dark-brand-accent dark:border-dark-brand-accent;
556556
}
557557
558558
.dropdown__item:disabled:not(.selected) .select__option-checked {

‎src/components/toggle/Toggle.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,8 @@ function toggle () {
174174
175175
&.toggle--checked {
176176
.toggle__switch {
177-
@apply bg-info-emphasis border-info-emphasis;
178-
@apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
177+
@apply bg-brand-accent border-brand-accent;
178+
@apply dark:bg-dark-brand-accent dark:border-dark-brand-accent;
179179
}
180180
181181
.toggle__pointer {

‎src/foundation/colors/Colors.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -894,9 +894,9 @@
894894
{
895895
"id" : 3,
896896
"token" : "brand.accent",
897-
"figma" : "main/red/40",
898-
"hex" : "#E42E2C",
899-
"parentToken" : "$red.40"
897+
"figma" : "main/blue/40",
898+
"hex" : "#0065D1",
899+
"parentToken" : "$blue.40"
900900
}
901901
]
902902
}
@@ -924,9 +924,9 @@
924924
{
925925
"id" : 3,
926926
"token" : "brand.accent",
927-
"figma" : "main/red/30",
928-
"hex" : "#EA5C5A",
929-
"parentToken" : "$red.30"
927+
"figma" : "main/blue/30",
928+
"hex" : "#3887DB",
929+
"parentToken" : "$blue.30"
930930
}
931931
]
932932
}

0 commit comments

Comments
 (0)