Skip to content

Commit

Permalink
Merge pull request #342 from department-of-veterans-affairs/feature/1…
Browse files Browse the repository at this point in the history 
…78-jessica-button-tokens

[Feature] Add semantic tokens for button
  • Loading branch information
@jessicawoodin
jessicawoodin authored Jun 3, 2024
2 parents d268758 + 06d4eb5 commit d325f8f
Show file tree
Hide file tree
Showing 4 changed files with 297 additions and 0 deletions.
48 changes: 48 additions & 0 deletions packages/tokens/figma/dark.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,14 +439,58 @@
"$value": "{uswds-system-color-gray-30}",
"$type": "color"
},
"vads-color-action-border-base-on-dark": {
"$value": "{vads-color-base-lightest}",
"$type": "color"
},
"vads-color-action-border-default-active-on-dark": {
"$value": "{vads-color-primary-alt-lightest}",
"$type": "color"
},
"vads-color-action-border-default-on-dark": {
"$value": "{uswds-system-color-blue-vivid-30}",
"$type": "color"
},
"vads-color-action-foreground-base-active-on-dark": {
"$value": "{uswds-system-color-gray-30}",
"$type": "color"
},
"vads-color-action-foreground-base-on-dark": {
"$value": "{vads-color-base-lightest}",
"$type": "color"
},
"vads-color-action-foreground-default-active-on-dark": {
"$value": "{vads-color-primary-alt-lightest}",
"$type": "color"
},
"vads-color-action-foreground-default-on-dark": {
"$value": "{uswds-system-color-blue-vivid-30}",
"$type": "color"
},
"vads-color-action-foreground-inverse-on-dark": {
"$value": "{vads-color-black}",
"$type": "color"
},
"vads-color-action-surface-base-active-on-dark": {
"$value": "{uswds-system-color-gray-30}",
"$type": "color"
},
"vads-color-action-surface-base-on-dark": {
"$value": "{vads-color-base-lightest}",
"$type": "color"
},
"vads-color-action-surface-default-active-on-dark": {
"$value": "{vads-color-primary-alt-lightest}",
"$type": "color"
},
"vads-color-action-surface-default-on-dark": {
"$value": "{uswds-system-color-blue-vivid-30}",
"$type": "color"
},
"vads-color-action-surface-destructive-active-on-dark": {
"$value": "{vads-color-error-lighter}",
"$type": "color"
},
"vads-color-action-surface-destructive-on-dark": {
"$value": "{uswds-system-color-red-vivid-40}",
"$type": "color"
Expand Down Expand Up @@ -771,6 +815,10 @@
"$value": "{uswds-system-color-green-cool-5}",
"$type": "color"
},
"vads-color-surface-default-on-dark": {
"$value": "{uswds-system-color-gray-80}",
"$type": "color"
},
"vads-color-surface-inverse-on-dark": {
"$value": "{vads-color-base-lightest}",
"$type": "color"
Expand Down
60 changes: 60 additions & 0 deletions packages/tokens/figma/light.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,14 +455,70 @@
"$value": "{uswds-system-color-gray-80}",
"$type": "color"
},
"vads-color-action-border-base-on-light": {
"$value": "{vads-color-gray-medium}",
"$type": "color"
},
"vads-color-action-border-default-active-on-light": {
"$value": "{vads-color-primary-darker}",
"$type": "color"
},
"vads-color-action-border-default-on-light": {
"$value": "{vads-color-primary}",
"$type": "color"
},
"vads-color-action-focus-on-light": {
"$value": "{uswds-system-color-yellow-vivid-20}",
"$type": "color"
},
"vads-color-action-foreground-base-active-on-light": {
"$value": "{uswds-system-color-gray-80}",
"$type": "color"
},
"vads-color-action-foreground-base-on-light": {
"$value": "{vads-color-gray-medium}",
"$type": "color"
},
"vads-color-action-foreground-default-active-on-light": {
"$value": "{vads-color-primary-darker}",
"$type": "color"
},
"vads-color-action-foreground-default-on-light": {
"$value": "{vads-color-primary}",
"$type": "color"
},
"vads-color-action-foreground-inverse-on-light": {
"$value": "{vads-color-white}",
"$type": "color"
},
"vads-color-action-surface-base-active-on-light": {
"$value": "{uswds-system-color-gray-80}",
"$type": "color"
},
"vads-color-action-surface-base-on-light": {
"$value": "{vads-color-gray-medium}",
"$type": "color"
},
"vads-color-action-surface-default-active-on-light": {
"$value": "{vads-color-primary-darker}",
"$type": "color"
},
"vads-color-action-surface-default-on-light": {
"$value": "{vads-color-primary}",
"$type": "color"
},
"vads-color-action-surface-destructive-active-on-light": {
"$value": "{uswds-system-color-red-vivid-80}",
"$type": "color"
},
"vads-color-action-surface-destructive-on-light": {
"$value": "{vads-color-secondary-dark}",
"$type": "color"
},
"vads-color-background-default-on-light": {
"$value": "{vads-color-base-lightest}",
"$type": "color"
},
"vads-color-base": {
"$value": "{uswds-system-color-gray-90}",
"$type": "color"
Expand Down Expand Up @@ -779,6 +835,10 @@
"$value": "{uswds-system-color-green-cool-5}",
"$type": "color"
},
"vads-color-surface-default-on-light": {
"$value": "{vads-color-white}",
"$type": "color"
},
"vads-color-surface-inverse-on-light": {
"$value": "{vads-color-base-darkest}",
"$type": "color"
Expand Down
84 changes: 84 additions & 0 deletions packages/tokens/src/tokens/color/semantic-dark.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
{
"vads-color-surface-default-on-dark": {
"name": "vads-color-surface-default-on-dark",
"value": "{uswds-system-color-gray-80}",
"attributes": {
"category": "color"
}
},
"vads-color-foreground-default-on-dark": {
"name": "vads-color-foreground-default-on-dark",
"value": "{vads-color-base-lightest.*.value}",
Expand Down Expand Up @@ -27,13 +34,90 @@
"category": "color"
}
},
"vads-color-action-border-default-on-dark": {
"name": "vads-color-action-border-default-on-dark",
"value": "{uswds-system-color-blue-vivid-30}",
"attributes": {
"category": "color"
}
},
"vads-color-action-border-default-active-on-dark": {
"name": "vads-color-action-border-default-active-on-dark",
"value": "{vads-color-primary-alt-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-border-base-on-dark": {
"name": "vads-color-action-border-base-on-dark",
"value": "{vads-color-base-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-inverse-on-dark": {
"name": "vads-color-action-foreground-inverse-on-dark",
"value": "{vads-color-black.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-default-on-dark": {
"name": "vads-color-action-foreground-default-on-dark",
"value": "{uswds-system-color-blue-vivid-30}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-default-active-on-dark": {
"name": "vads-color-action-foreground-default-active-on-dark",
"value": "{vads-color-primary-alt-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-base-on-dark": {
"name": "vads-color-action-foreground-base-on-dark",
"value": "{vads-color-base-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-base-active-on-dark": {
"name": "vads-color-action-foreground-base-active-on-dark",
"value": "{uswds-system-color-gray-30}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-default-active-on-dark": {
"name": "vads-color-action-surface-default-active-on-dark",
"value": "{vads-color-primary-alt-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-base-on-dark": {
"name": "vads-color-action-surface-base-on-dark",
"value": "{vads-color-base-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-base-active-on-dark": {
"name": "vads-color-action-surface-base-active-on-dark",
"value": "{uswds-system-color-gray-30}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-destructive-active-on-dark": {
"name": "vads-color-action-surface-destructive-active-on-dark",
"value": "{vads-color-error-lighter.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-feedback-border-info-on-dark": {
"name": "vads-color-feedback-border-info-on-dark",
"value": "{vads-color-primary-alt-light.*.value}",
Expand Down
105 changes: 105 additions & 0 deletions packages/tokens/src/tokens/color/semantic-light.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
{
"vads-color-background-default-on-light": {
"name": "vads-color-background-default-on-light",
"value": "{vads-color-base-lightest.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-surface-default-on-light": {
"name": "vads-color-surface-default-on-light",
"value": "{vads-color-white.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-foreground-default-on-light": {
"name": "vads-color-foreground-default-on-light",
"value": "{vads-color-base.*.value}",
Expand Down Expand Up @@ -27,13 +41,104 @@
"category": "color"
}
},
"vads-color-action-border-default-on-light": {
"name": "vads-color-action-border-default-on-light",
"value": "{vads-color-primary.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-border-default-active-on-light": {
"name": "vads-color-action-border-default-active-on-light",
"value": "{vads-color-primary-darker.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-border-base-on-light": {
"name": "vads-color-action-border-base-on-light",
"value": "{vads-color-gray-medium.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-inverse-on-light": {
"name": "vads-color-action-foreground-inverse-on-light",
"value": "{vads-color-white.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-default-on-light": {
"name": "vads-color-action-foreground-default-on-light",
"value": "{vads-color-primary.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-default-active-on-light": {
"name": "vads-color-action-foreground-default-active-on-light",
"value": "{vads-color-primary-darker.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-base-on-light": {
"name": "vads-color-action-foreground-base-on-light",
"value": "{vads-color-gray-medium.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-foreground-base-active-on-light": {
"name": "vads-color-action-foreground-base-active-on-light",
"value": "{uswds-system-color-gray-80}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-default-on-light": {
"name": "vads-color-action-surface-default-on-light",
"value": "{vads-color-primary.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-default-active-on-light": {
"name": "vads-color-action-surface-default-active-on-light",
"value": "{vads-color-primary-darker.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-base-on-light": {
"name": "vads-color-action-surface-base-on-light",
"value": "{vads-color-gray-medium.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-base-active-on-light": {
"name": "vads-color-action-surface-base-active-on-light",
"value": "{uswds-system-color-gray-80}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-destructive-on-light": {
"name": "vads-color-action-surface-destructive-on-light",
"value": "{vads-color-secondary-dark.*.value}",
"attributes": {
"category": "color"
}
},
"vads-color-action-surface-destructive-active-on-light": {
"name": "vads-color-action-surface-destructive-active-on-light",
"value": "{uswds-system-color-red-vivid-80}",
"attributes": {
"category": "color"
}
},
"vads-color-feedback-border-info-on-light": {
"name": "vads-color-feedback-border-info-on-light",
"value": "{vads-color-info.*.value}",
Expand Down

0 comments on commit d325f8f

Please sign in to comment.