Skip to content

Commit d750bf3

Browse files
aweellaweell
authored
feat(skin): Solve button primary contrast issues (#2547)
* Update o2-new skin to solve contrasst issues * Solve button primary contrast issues in vivo-new * Fix json files issues
1 parent 8f17ab8 commit d750bf3

3 files changed

Lines changed: 53 additions & 40 deletions

File tree

‎tokens/linter/contrastPairs.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@ export const contrastPairs = [
9292
bg: ["buttonPrimaryBackgroundMedia"],
9393
minRatio: normalTextMinRatio,
9494
},
95+
{
96+
fg: ["textButtonPrimaryNegative"],
97+
bg: ["buttonPrimaryBackgroundNegative"],
98+
minRatio: 4.5,
99+
},
95100
{
96101
fg: ["textButtonPrimaryInversePressed"],
97102
bg: [
@@ -116,6 +121,14 @@ export const contrastPairs = [
116121
],
117122
minRatio: normalTextMinRatio,
118123
},
124+
{
125+
fg: ["textButtonPrimaryNegativePressed"],
126+
bg: [
127+
"buttonPrimaryBackgroundNegativeHover",
128+
"buttonPrimaryBackgroundNegativePressed",
129+
],
130+
minRatio: 4.5,
131+
},
119132
{
120133
fg: ["textButtonSecondary"],
121134
bg: [

‎tokens/o2-new.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -360,53 +360,53 @@
360360
"description": "beyondBlue70"
361361
},
362362
"buttonPrimaryBackgroundInverseHover": {
363-
"value": "{palette.beyondBlue30}",
363+
"value": "{palette.beyondBlue10}",
364364
"type": "color",
365-
"description": "beyondBlue30",
365+
"description": "beyondBlue10",
366366
"deprecated": true,
367367
"deprecatedBy": "buttonPrimaryBackgroundBrandHover"
368368
},
369369
"buttonPrimaryBackgroundNegativeHover": {
370-
"value": "{palette.beyondBlue30}",
370+
"value": "{palette.beyondBlue10}",
371371
"type": "color",
372-
"description": "beyondBlue30"
372+
"description": "beyondBlue10"
373373
},
374374
"buttonPrimaryBackgroundBrandHover": {
375-
"value": "{palette.beyondBlue30}",
375+
"value": "{palette.beyondBlue10}",
376376
"type": "color",
377-
"description": "beyondBlue30"
377+
"description": "beyondBlue10"
378378
},
379379
"buttonPrimaryBackgroundMediaHover": {
380-
"value": "{palette.beyondBlue30}",
380+
"value": "{palette.beyondBlue10}",
381381
"type": "color",
382-
"description": "beyondBlue30"
382+
"description": "beyondBlue10"
383383
},
384384
"buttonPrimaryBackgroundPressed": {
385385
"value": "{palette.beyondBlue70}",
386386
"type": "color",
387387
"description": "beyondBlue70"
388388
},
389389
"buttonPrimaryBackgroundInversePressed": {
390-
"value": "{palette.beyondBlue30}",
390+
"value": "{palette.beyondBlue15}",
391391
"type": "color",
392-
"description": "beyondBlue30",
392+
"description": "beyondBlue15",
393393
"deprecated": true,
394394
"deprecatedBy": "buttonPrimaryBackgroundBrandPressed"
395395
},
396396
"buttonPrimaryBackgroundNegativePressed": {
397-
"value": "{palette.beyondBlue30}",
397+
"value": "{palette.beyondBlue15}",
398398
"type": "color",
399-
"description": "beyondBlue30"
399+
"description": "beyondBlue15"
400400
},
401401
"buttonPrimaryBackgroundBrandPressed": {
402-
"value": "{palette.beyondBlue30}",
402+
"value": "{palette.beyondBlue15}",
403403
"type": "color",
404-
"description": "beyondBlue30"
404+
"description": "beyondBlue15"
405405
},
406406
"buttonPrimaryBackgroundMediaPressed": {
407-
"value": "{palette.beyondBlue30}",
407+
"value": "{palette.beyondBlue15}",
408408
"type": "color",
409-
"description": "beyondBlue30"
409+
"description": "beyondBlue15"
410410
},
411411
"buttonSecondaryBackgroundBrand": {
412412
"value": "rgba({palette.white}, 0)",
@@ -1907,9 +1907,9 @@
19071907
"description": "beyondBlue55"
19081908
},
19091909
"buttonPrimaryBackgroundMediaHover": {
1910-
"value": "{palette.beyondBlue30}",
1910+
"value": "{palette.beyondBlue10}",
19111911
"type": "color",
1912-
"description": "beyondBlue30"
1912+
"description": "beyondBlue10"
19131913
},
19141914
"buttonPrimaryBackgroundPressed": {
19151915
"value": "{palette.beyondBlue55}",
@@ -1934,9 +1934,9 @@
19341934
"description": "beyondBlue55"
19351935
},
19361936
"buttonPrimaryBackgroundMediaPressed": {
1937-
"value": "{palette.beyondBlue30}",
1937+
"value": "{palette.beyondBlue15}",
19381938
"type": "color",
1939-
"description": "beyondBlue30"
1939+
"description": "beyondBlue15"
19401940
},
19411941
"buttonSecondaryBackgroundBrand": {
19421942
"value": "rgba({palette.white}, 0)",

‎tokens/vivo-new.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -328,53 +328,53 @@
328328
"description": "vivoPurpleDark"
329329
},
330330
"buttonPrimaryBackgroundInverseHover": {
331-
"value": "{palette.vivoPurpleLight50}",
331+
"value": "{palette.vivoPurpleLight10}",
332332
"type": "color",
333-
"description": "vivoPurpleLight50",
333+
"description": "vivoPurpleLight10",
334334
"deprecated": true,
335335
"deprecatedBy": "buttonPrimaryBackgroundBrandHover"
336336
},
337337
"buttonPrimaryBackgroundNegativeHover": {
338-
"value": "{palette.vivoPurpleLight50}",
338+
"value": "{palette.vivoPurpleLight10}",
339339
"type": "color",
340-
"description": "vivoPurpleLight50"
340+
"description": "vivoPurpleLight10"
341341
},
342342
"buttonPrimaryBackgroundBrandHover": {
343-
"value": "{palette.vivoPurpleLight50}",
343+
"value": "{palette.vivoPurpleLight10}",
344344
"type": "color",
345-
"description": "vivoPurpleLight50"
345+
"description": "vivoPurpleLight10"
346346
},
347347
"buttonPrimaryBackgroundMediaHover": {
348-
"value": "{palette.vivoPurpleLight50}",
348+
"value": "{palette.vivoPurpleLight10}",
349349
"type": "color",
350-
"description": "vivoPurpleLight50"
350+
"description": "vivoPurpleLight10"
351351
},
352352
"buttonPrimaryBackgroundPressed": {
353353
"value": "{palette.vivoPurpleDark}",
354354
"type": "color",
355355
"description": "vivoPurpleDark"
356356
},
357357
"buttonPrimaryBackgroundInversePressed": {
358-
"value": "{palette.vivoPurpleLight50}",
358+
"value": "{palette.vivoPurpleLight20}",
359359
"type": "color",
360-
"description": "vivoPurpleLight50",
360+
"description": "vivoPurpleLight20",
361361
"deprecated": true,
362362
"deprecatedBy": "buttonPrimaryBackgroundBrandPressed"
363363
},
364364
"buttonPrimaryBackgroundNegativePressed": {
365-
"value": "{palette.vivoPurpleLight50}",
365+
"value": "{palette.vivoPurpleLight20}",
366366
"type": "color",
367-
"description": "vivoPurpleLight50"
367+
"description": "vivoPurpleLight20"
368368
},
369369
"buttonPrimaryBackgroundBrandPressed": {
370-
"value": "{palette.vivoPurpleLight50}",
370+
"value": "{palette.vivoPurpleLight20}",
371371
"type": "color",
372-
"description": "vivoPurpleLight50"
372+
"description": "vivoPurpleLight20"
373373
},
374374
"buttonPrimaryBackgroundMediaPressed": {
375-
"value": "{palette.vivoPurpleLight50}",
375+
"value": "{palette.vivoPurpleLight20}",
376376
"type": "color",
377-
"description": "vivoPurpleLight50"
377+
"description": "vivoPurpleLight20"
378378
},
379379
"buttonSecondaryBackgroundBrand": {
380380
"value": "rgba({palette.white}, 0)",
@@ -1875,9 +1875,9 @@
18751875
"description": "vivoPurpleDark"
18761876
},
18771877
"buttonPrimaryBackgroundMediaHover": {
1878-
"value": "{palette.vivoPurpleLight50}",
1878+
"value": "{palette.vivoPurpleLight10}",
18791879
"type": "color",
1880-
"description": "vivoPurpleLight50"
1880+
"description": "vivoPurpleLight10"
18811881
},
18821882
"buttonPrimaryBackgroundPressed": {
18831883
"value": "{palette.vivoPurpleDark}",
@@ -1902,9 +1902,9 @@
19021902
"description": "vivoPurpleDark"
19031903
},
19041904
"buttonPrimaryBackgroundMediaPressed": {
1905-
"value": "{palette.vivoPurpleLight50}",
1905+
"value": "{palette.vivoPurpleLight20}",
19061906
"type": "color",
1907-
"description": "vivoPurpleLight50"
1907+
"description": "vivoPurpleLight20"
19081908
},
19091909
"buttonSecondaryBackgroundBrand": {
19101910
"value": "rgba({palette.white}, 0)",

0 commit comments

Comments
 (0)