Skip to content

Commit 2326fa2

Browse files
rzpcibottewarigsaurabhdaware
authored
feat(tokens): add new tokens (#2467)
* feat(tokens): add new tokens * chore: update snap * chore: update react native snaps * fix: build errors * chore: update react native snaps * chore: update snap web * Create thin-horses-attack.md --------- Co-authored-by: tewarig <[email protected]> Co-authored-by: Saurabh Daware <[email protected]>
1 parent eadeae3 commit 2326fa2

File tree

20 files changed

+217
-141
lines changed

20 files changed

+217
-141
lines changed

‎.changeset/thin-horses-attack.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@razorpay/blade": patch
3+
---
4+
5+
feat(tokens): change token values to match figma

‎packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap

+24-24
Original file line numberDiff line numberDiff line change
@@ -1480,13 +1480,13 @@ exports[`<BaseButton /> should render disabled button 1`] = `
14801480
buttonPaddingTop="0px"
14811481
collapsable={false}
14821482
data-blade-component="button"
1483-
defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
1483+
defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
14841484
defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
1485-
focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
1485+
focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
14861486
focusBorderColor="hsla(227, 100%, 59%, 0.18)"
14871487
focusRingColor="hsla(227, 100%, 59%, 0.18)"
14881488
focusable={true}
1489-
hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
1489+
hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
14901490
hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
14911491
isFullWidth={false}
14921492
isLoading={false}
@@ -1515,7 +1515,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
15151515
{
15161516
"alignItems": "center",
15171517
"alignSelf": "center",
1518-
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
1518+
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
15191519
"borderColor": "hsla(227, 100%, 59%, 0.18)",
15201520
"borderRadius": 4,
15211521
"borderStyle": "solid",
@@ -1536,7 +1536,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
15361536
"width": "auto",
15371537
},
15381538
{
1539-
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
1539+
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
15401540
"borderColor": "hsla(227, 100%, 59%, 0.18)",
15411541
},
15421542
]
@@ -1590,7 +1590,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
15901590
style={
15911591
[
15921592
{
1593-
"color": "hsla(227, 100%, 59%, 0.18)",
1593+
"color": "hsla(227, 100%, 59%, 0.32)",
15941594
"fontFamily": "Inter",
15951595
"fontSize": 14,
15961596
"fontStyle": "normal",
@@ -3416,13 +3416,13 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
34163416
buttonPaddingTop="0px"
34173417
collapsable={false}
34183418
data-blade-component="button"
3419-
defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
3419+
defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
34203420
defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
3421-
focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
3421+
focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
34223422
focusBorderColor="hsla(227, 100%, 59%, 0.18)"
34233423
focusRingColor="hsla(227, 100%, 59%, 0.18)"
34243424
focusable={true}
3425-
hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
3425+
hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
34263426
hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
34273427
isFullWidth={false}
34283428
isLoading={false}
@@ -3451,7 +3451,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
34513451
{
34523452
"alignItems": "center",
34533453
"alignSelf": "center",
3454-
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
3454+
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
34553455
"borderColor": "hsla(227, 100%, 59%, 0.18)",
34563456
"borderRadius": 4,
34573457
"borderStyle": "solid",
@@ -3472,7 +3472,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
34723472
"width": "auto",
34733473
},
34743474
{
3475-
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
3475+
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
34763476
"borderColor": "hsla(227, 100%, 59%, 0.18)",
34773477
},
34783478
]
@@ -3526,7 +3526,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
35263526
style={
35273527
[
35283528
{
3529-
"color": "hsla(227, 100%, 59%, 0.18)",
3529+
"color": "hsla(227, 100%, 59%, 0.32)",
35303530
"fontFamily": "Inter",
35313531
"fontSize": 14,
35323532
"fontStyle": "normal",
@@ -3702,7 +3702,7 @@ exports[`<BaseButton /> should render disabled primary color secondary button 1`
37023702
style={
37033703
[
37043704
{
3705-
"color": "hsla(227, 100%, 59%, 0.18)",
3705+
"color": "hsla(227, 100%, 59%, 0.32)",
37063706
"fontFamily": "Inter",
37073707
"fontSize": 14,
37083708
"fontStyle": "normal",
@@ -3768,13 +3768,13 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
37683768
buttonPaddingTop="0px"
37693769
collapsable={false}
37703770
data-blade-component="button"
3771-
defaultBackgroundColor="hsla(211, 20%, 52%, 0.09)"
3771+
defaultBackgroundColor="hsla(211, 20%, 52%, 0.18)"
37723772
defaultBorderColor="hsla(214, 40%, 92%, 1)"
3773-
focusBackgroundColor="hsla(211, 20%, 52%, 0.09)"
3773+
focusBackgroundColor="hsla(211, 20%, 52%, 0.18)"
37743774
focusBorderColor="hsla(214, 40%, 92%, 1)"
37753775
focusRingColor="hsla(227, 100%, 59%, 0.18)"
37763776
focusable={true}
3777-
hoverBackgroundColor="hsla(211, 20%, 52%, 0.09)"
3777+
hoverBackgroundColor="hsla(211, 20%, 52%, 0.18)"
37783778
hoverBorderColor="hsla(214, 40%, 92%, 1)"
37793779
isFullWidth={false}
37803780
isLoading={false}
@@ -3803,7 +3803,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
38033803
{
38043804
"alignItems": "center",
38053805
"alignSelf": "center",
3806-
"backgroundColor": "hsla(211, 20%, 52%, 0.09)",
3806+
"backgroundColor": "hsla(211, 20%, 52%, 0.18)",
38073807
"borderColor": "hsla(214, 40%, 92%, 1)",
38083808
"borderRadius": 4,
38093809
"borderStyle": "solid",
@@ -3824,7 +3824,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
38243824
"width": "auto",
38253825
},
38263826
{
3827-
"backgroundColor": "hsla(211, 20%, 52%, 0.09)",
3827+
"backgroundColor": "hsla(211, 20%, 52%, 0.18)",
38283828
},
38293829
]
38303830
}
@@ -4998,13 +4998,13 @@ exports[`<BaseButton /> should render loading button 1`] = `
49984998
buttonPaddingTop="0px"
49994999
collapsable={false}
50005000
data-blade-component="button"
5001-
defaultBackgroundColor="hsla(227, 100%, 59%, 0.09)"
5001+
defaultBackgroundColor="hsla(227, 100%, 59%, 0.18)"
50025002
defaultBorderColor="hsla(227, 100%, 59%, 0.18)"
5003-
focusBackgroundColor="hsla(227, 100%, 59%, 0.09)"
5003+
focusBackgroundColor="hsla(227, 100%, 59%, 0.18)"
50045004
focusBorderColor="hsla(227, 100%, 59%, 0.18)"
50055005
focusRingColor="hsla(227, 100%, 59%, 0.18)"
50065006
focusable={true}
5007-
hoverBackgroundColor="hsla(227, 100%, 59%, 0.09)"
5007+
hoverBackgroundColor="hsla(227, 100%, 59%, 0.18)"
50085008
hoverBorderColor="hsla(227, 100%, 59%, 0.18)"
50095009
isFullWidth={false}
50105010
isLoading={true}
@@ -5033,7 +5033,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
50335033
{
50345034
"alignItems": "center",
50355035
"alignSelf": "center",
5036-
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
5036+
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
50375037
"borderColor": "hsla(227, 100%, 59%, 0.18)",
50385038
"borderRadius": 4,
50395039
"borderStyle": "solid",
@@ -5054,7 +5054,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
50545054
"width": "auto",
50555055
},
50565056
{
5057-
"backgroundColor": "hsla(227, 100%, 59%, 0.09)",
5057+
"backgroundColor": "hsla(227, 100%, 59%, 0.18)",
50585058
"borderColor": "hsla(227, 100%, 59%, 0.18)",
50595059
},
50605060
]
@@ -5275,7 +5275,7 @@ exports[`<BaseButton /> should render loading button 1`] = `
52755275
style={
52765276
[
52775277
{
5278-
"color": "hsla(227, 100%, 59%, 0.18)",
5278+
"color": "hsla(227, 100%, 59%, 0.32)",
52795279
"fontFamily": "Inter",
52805280
"fontSize": 14,
52815281
"fontStyle": "normal",

‎packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap

+20-20
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
6868
min-height: 36px;
6969
width: auto;
7070
cursor: not-allowed;
71-
background-color: hsla(227,100%,59%,0.09);
71+
background-color: hsla(227,100%,59%,0.18);
7272
border-color: hsla(227,100%,59%,0.18);
7373
border-width: 0px;
7474
border-radius: 4px;
@@ -102,17 +102,17 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
102102
}
103103
104104
.c5.c5.c5.c5.c5:hover {
105-
background-color: hsla(227,100%,59%,0.09);
105+
background-color: hsla(227,100%,59%,0.18);
106106
border-color: hsla(227,100%,59%,0.18);
107107
}
108108
109109
.c5.c5.c5.c5.c5:active {
110-
background-color: hsla(227,100%,59%,0.09);
110+
background-color: hsla(227,100%,59%,0.18);
111111
border-color: hsla(227,100%,59%,0.18);
112112
}
113113
114114
.c5.c5.c5.c5.c5:focus-visible {
115-
background-color: hsla(227,100%,59%,0.09);
115+
background-color: hsla(227,100%,59%,0.18);
116116
border-color: hsla(227,100%,59%,0.18);
117117
outline: 1px solid hsla(227,100%,59%,0.09);
118118
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -213,7 +213,7 @@ exports[`<BaseButton /> should announce button loading accessibilityLabel 1`] =
213213
}
214214
215215
.c10.c10.c10.c10.c10 {
216-
color: hsla(227,100%,59%,0.18);
216+
color: hsla(227,100%,59%,0.32);
217217
font-family: "Inter","Inter Fallback Arial",Arial;
218218
font-size: 0.875rem;
219219
font-weight: 500;
@@ -1393,7 +1393,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
13931393
min-height: 36px;
13941394
width: auto;
13951395
cursor: not-allowed;
1396-
background-color: hsla(227,100%,59%,0.09);
1396+
background-color: hsla(227,100%,59%,0.18);
13971397
border-color: hsla(227,100%,59%,0.18);
13981398
border-width: 0px;
13991399
border-radius: 4px;
@@ -1427,17 +1427,17 @@ exports[`<BaseButton /> should render disabled button 1`] = `
14271427
}
14281428
14291429
.c0.c0.c0.c0.c0:hover {
1430-
background-color: hsla(227,100%,59%,0.09);
1430+
background-color: hsla(227,100%,59%,0.18);
14311431
border-color: hsla(227,100%,59%,0.18);
14321432
}
14331433
14341434
.c0.c0.c0.c0.c0:active {
1435-
background-color: hsla(227,100%,59%,0.09);
1435+
background-color: hsla(227,100%,59%,0.18);
14361436
border-color: hsla(227,100%,59%,0.18);
14371437
}
14381438
14391439
.c0.c0.c0.c0.c0:focus-visible {
1440-
background-color: hsla(227,100%,59%,0.09);
1440+
background-color: hsla(227,100%,59%,0.18);
14411441
border-color: hsla(227,100%,59%,0.18);
14421442
outline: 1px solid hsla(227,100%,59%,0.09);
14431443
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -1485,7 +1485,7 @@ exports[`<BaseButton /> should render disabled button 1`] = `
14851485
}
14861486
14871487
.c4.c4.c4.c4.c4 {
1488-
color: hsla(227,100%,59%,0.18);
1488+
color: hsla(227,100%,59%,0.32);
14891489
font-family: "Inter","Inter Fallback Arial",Arial;
14901490
font-size: 0.875rem;
14911491
font-weight: 500;
@@ -2999,7 +2999,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
29992999
min-height: 36px;
30003000
width: auto;
30013001
cursor: not-allowed;
3002-
background-color: hsla(227,100%,59%,0.09);
3002+
background-color: hsla(227,100%,59%,0.18);
30033003
border-color: hsla(227,100%,59%,0.18);
30043004
border-width: 0px;
30053005
border-radius: 4px;
@@ -3033,17 +3033,17 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
30333033
}
30343034
30353035
.c0.c0.c0.c0.c0:hover {
3036-
background-color: hsla(227,100%,59%,0.09);
3036+
background-color: hsla(227,100%,59%,0.18);
30373037
border-color: hsla(227,100%,59%,0.18);
30383038
}
30393039
30403040
.c0.c0.c0.c0.c0:active {
3041-
background-color: hsla(227,100%,59%,0.09);
3041+
background-color: hsla(227,100%,59%,0.18);
30423042
border-color: hsla(227,100%,59%,0.18);
30433043
}
30443044
30453045
.c0.c0.c0.c0.c0:focus-visible {
3046-
background-color: hsla(227,100%,59%,0.09);
3046+
background-color: hsla(227,100%,59%,0.18);
30473047
border-color: hsla(227,100%,59%,0.18);
30483048
outline: 1px solid hsla(227,100%,59%,0.09);
30493049
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
@@ -3091,7 +3091,7 @@ exports[`<BaseButton /> should render disabled primary color primary button 1`]
30913091
}
30923092
30933093
.c4.c4.c4.c4.c4 {
3094-
color: hsla(227,100%,59%,0.18);
3094+
color: hsla(227,100%,59%,0.32);
30953095
font-family: "Inter","Inter Fallback Arial",Arial;
30963096
font-size: 0.875rem;
30973097
font-weight: 500;
@@ -3237,7 +3237,7 @@ exports[`<BaseButton /> should render disabled primary color secondary button 1`
32373237
}
32383238
32393239
.c4.c4.c4.c4.c4 {
3240-
color: hsla(227,100%,59%,0.18);
3240+
color: hsla(227,100%,59%,0.32);
32413241
font-family: "Inter","Inter Fallback Arial",Arial;
32423242
font-size: 0.875rem;
32433243
font-weight: 500;
@@ -3291,7 +3291,7 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
32913291
min-height: 36px;
32923292
width: auto;
32933293
cursor: not-allowed;
3294-
background-color: hsla(211,20%,52%,0.09);
3294+
background-color: hsla(211,20%,52%,0.18);
32953295
border-color: hsla(214,40%,92%,1);
32963296
border-width: 0px;
32973297
border-radius: 4px;
@@ -3325,15 +3325,15 @@ exports[`<BaseButton /> should render disabled primary color tertiary button 1`]
33253325
}
33263326
33273327
.c0.c0.c0.c0.c0:hover {
3328-
background-color: hsla(211,20%,52%,0.09);
3328+
background-color: hsla(211,20%,52%,0.18);
33293329
}
33303330
33313331
.c0.c0.c0.c0.c0:active {
3332-
background-color: hsla(211,20%,52%,0.09);
3332+
background-color: hsla(211,20%,52%,0.18);
33333333
}
33343334
33353335
.c0.c0.c0.c0.c0:focus-visible {
3336-
background-color: hsla(211,20%,52%,0.09);
3336+
background-color: hsla(211,20%,52%,0.18);
33373337
outline: 1px solid hsla(227,100%,59%,0.09);
33383338
box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18);
33393339
}

0 commit comments

Comments
 (0)