Skip to content

Commit

Permalink
feat: add design tokens for buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@feerglas
feerglas committed Jul 27, 2021
1 parent 941db15 commit f855ba9
Showing 1 changed file with 337 additions and 6 deletions.
343 changes: 337 additions & 6 deletions designTokens/button.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
primary: {
'primary': {
color: {
active: {
background: {
Expand All @@ -20,7 +20,7 @@ module.exports = {
value: '{core.color.red.regular.value}'
},
text: {
value: '{core.color.white.value}'
value: '{core.color.white.regular.value}'
}
},
disabled: {
Expand All @@ -45,10 +45,341 @@ module.exports = {
value: '{core.color.black.15.value}'
}
}
},
size: {
padding: {
value: '{core.size.spacing.small.value}'
}
},
'primary-negative': {
color: {
active: {
background: {
value: '{core.color.black.14.value}'
},
border: {
value: '{core.color.black.14.value}'
},
text: {
value: '{core.color.red.150.value}'
}
},
default: {
background: {
value: '{core.color.white.regular.value}'
},
border: {
value: '{core.color.white.regular.value}'
},
text: {
value: '{core.color.red.regular.value}'
}
},
disabled: {
background: {
value: '{core.color.black.alpha.10.value}'
},
border: {
value: '{core.color.black.alpha.10.value}'
},
text: {
value: '{core.color.white.alpha.60.value}'
}
},
hover: {
background: {
value: '{core.color.black.15.value}'
},
border: {
value: '{core.color.black.15.value}'
},
text: {
value: '{core.color.red.125.value}'
}
}
}
},
'secondary': {
color: {
active: {
background: {
value: '{core.color.black.14.value}'
},
border: {
value: '{core.color.black.14.value}'
},
text: {
value: '{core.color.black.4.value}'
}
},
default: {
background: {
value: '{core.color.white.regular.value}'
},
border: {
value: '{core.color.black.14.value}'
},
text: {
value: '{core.color.black.2.value}'
}
},
disabled: {
background: {
value: '{core.color.black.15.value}'
},
border: {
value: '{core.color.black.15.value}'
},
text: {
value: '{core.color.black.11.value}'
}
},
hover: {
background: {
value: '{core.color.black.15.value}'
},
border: {
value: '{core.color.black.14.value}'
},
text: {
value: '{core.color.black.3.value}'
}
}
}
},
'secondary-negative': {
color: {
active: {
background: {
value: '{core.color.red.regular.value}'
},
border: {
value: '{core.color.black.14.value}'
},
text: {
value: '{core.color.black.14.value}'
}
},
default: {
background: {
value: '{core.color.red.regular.value}'
},
border: {
value: '{core.color.white.regular.value}'
},
text: {
value: '{core.color.white.regular.value}'
}
},
disabled: {
background: {
value: '{core.color.black.alpha.10.value}'
},
border: {
value: '{core.color.black.alpha.10.value}'
},
text: {
value: '{core.color.white.alpha.60.value}'
}
},
hover: {
background: {
value: '{core.color.red.regular.value}'
},
border: {
value: '{core.color.black.15.value}'
},
text: {
value: '{core.color.black.15.value}'
}
}
}
},
'tertiary': {
color: {
active: {
background: {
value: '{core.color.white.regular.value}'
},
border: {
value: '{core.color.black.2.value}'
},
text: {
value: '{core.color.black.2.value}'
}
},
default: {
background: {
value: '{core.color.white.regular.value}'
},
border: {
value: '{core.color.black.5.value}'
},
text: {
value: '{core.color.black.5.value}'
}
},
disabled: {
background: {
value: '{core.color.black.alpha.10.value}'
},
border: {
value: '{core.color.black.alpha.10.value}'
},
text: {
value: '{core.color.white.regular.value}'
}
},
hover: {
background: {
value: '{core.color.white.regular.value}'
},
border: {
value: '{core.color.black.regular.value}'
},
text: {
value: '{core.color.black.regular.value}'
}
}
}
},
'tertiary-negative': {
color: {
active: {
background: {
value: '{core.color.red.regular.value}'
},
border: {
value: '{core.color.black.14.value}'
},
text: {
value: '{core.color.black.14.value}'
}
},
default: {
background: {
value: '{core.color.red.regular.value}'
},
border: {
value: '{core.color.white.regular.value}'
},
text: {
value: '{core.color.white.regular.value}'
}
},
disabled: {
background: {
value: '{core.color.black.alpha.10.value}'
},
border: {
value: '{core.color.black.alpha.10.value}'
},
text: {
value: '{core.color.white.alpha.60.value}'
}
},
hover: {
background: {
value: '{core.color.red.regular.value}'
},
border: {
value: '{core.color.black.15.value}'
},
text: {
value: '{core.color.black.15.value}'
}
}
}
},
'transparent': {
color: {
active: {
background: {
value: '{core.color.black.alpha.70.value}'
},
border: {
value: '{core.color.black.alpha.70.value}'
},
text: {
value: '{core.color.black.14.value}'
}
},
default: {
background: {
value: '{core.color.black.alpha.50.value}'
},
border: {
value: '{core.color.black.alpha.50.value}'
},
text: {
value: '{core.color.white.regular.value}'
}
},
disabled: {
background: {
value: '{core.color.black.alpha.20.value}'
},
border: {
value: '{core.color.black.alpha.20.value}'
},
text: {
value: '{core.color.black.15.value}'
}
},
hover: {
background: {
value: '{core.color.black.alpha.60.value}'
},
border: {
value: '{core.color.black.alpha.60.value}'
},
text: {
value: '{core.color.black.15.value}'
}
}
}
},
'transparent-negative': {
color: {
active: {
background: {
value: '{core.color.white.alpha.70.value}'
},
border: {
value: '{core.color.white.alpha.70.value}'
},
text: {
value: '{core.color.black.4.value}'
}
},
default: {
background: {
value: '{core.color.white.alpha.50.value}'
},
border: {
value: '{core.color.white.alpha.50.value}'
},
text: {
value: '{core.color.black.2.value}'
}
},
disabled: {
background: {
value: '{core.color.white.alpha.20.value}'
},
border: {
value: '{core.color.white.alpha.20.value}'
},
text: {
value: '{core.color.black.11.value}'
}
},
hover: {
background: {
value: '{core.color.white.alpha.60.value}'
},
border: {
value: '{core.color.white.alpha.60.value}'
},
text: {
value: '{core.color.black.3.value}'
}
}
}
}
Expand Down

0 comments on commit f855ba9

Please sign in to comment.