Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync CTA Button and auro-button tier 3 tokens #234

Merged
merged 4 commits into from
Nov 6, 2024
Merged

Sync CTA Button and auro-button tier 3 tokens #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e88da8
perf: update dependencies
jordanjones243 Nov 5, 2024
a10f467
perf: update rollup config
jordanjones243 Nov 5, 2024
913c13e
perf: support latest version of auro-icon
jordanjones243 Nov 5, 2024
535efe7
perf(cta): match cta tokens with auro-button tokens #213
jordanjones243 Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 47 additions & 47 deletions demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,61 +594,61 @@ The component may be restyled using the following code sample and changing the v
--ds-auro-hyperlink-nav-hover-outline-color-inverse: transparent;
--ds-auro-hyperlink-nav-hover-border-color-inverse: transparent;
--ds-auro-hyperlink-cta-default-color-default: var(--ds-color-text-primary-inverse, #ffffff);
--ds-auro-hyperlink-cta-default-container-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-default-outline-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-default-border-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-default-container-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-default-outline-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-default-border-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-visited-color-default: var(--ds-color-text-primary-inverse, #ffffff);
--ds-auro-hyperlink-cta-visited-container-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-visited-outline-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-visited-border-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-visited-container-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-visited-outline-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-visited-border-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-focus-color-default: var(--ds-color-text-primary-inverse, #ffffff);
--ds-auro-hyperlink-cta-focus-container-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-focus-outline-color-default: var(--ds-color-container-ui-secondary-default-default, #ffffff);
--ds-auro-hyperlink-cta-focus-border-color-default: var(--ds-color-border-ui-focus-default, #2c67b5);
--ds-auro-hyperlink-cta-focus-container-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-focus-outline-color-default: var(--ds-color-border-emphasis-inverse, #f2f7fb);
--ds-auro-hyperlink-cta-focus-border-color-default: var(--ds-color-container-ui-primary-default-default, #2c67b5);
--ds-auro-hyperlink-cta-hover-color-default: var(--ds-color-text-primary-inverse, #ffffff);
--ds-auro-hyperlink-cta-hover-container-color-default: var(--ds-color-container-ui-primary-hover-default, #193d73);
--ds-auro-hyperlink-cta-hover-outline-color-default: var(--ds-color-border-ui-hover-default, #193d73);
--ds-auro-hyperlink-cta-hover-border-color-default: var(--ds-color-border-ui-hover-default, #193d73);
--ds-auro-hyperlink-cta-hover-outline-color-default: var(--ds-color-container-ui-primary-hover-default, #193d73);
--ds-auro-hyperlink-cta-hover-border-color-default: var(--ds-color-container-ui-primary-hover-default, #193d73);
--ds-auro-hyperlink-cta-default-color-inverse: var(--ds-color-text-primary-default, #2a2a2a);
--ds-auro-hyperlink-cta-default-container-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-default-outline-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-default-border-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-default-container-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-default-outline-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-default-border-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-visited-color-inverse: var(--ds-color-text-primary-default, #2a2a2a);
--ds-auro-hyperlink-cta-visited-container-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-visited-outline-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-visited-border-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-visited-container-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-visited-outline-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-visited-border-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-focus-color-inverse: var(--ds-color-text-primary-default, #2a2a2a);
--ds-auro-hyperlink-cta-focus-container-color-inverse: var(--ds-color-ui-default-inverse, #00cff0);
--ds-auro-hyperlink-cta-focus-outline-color-inverse: var(--ds-color-container-ui-secondary-default-default, #ffffff);
--ds-auro-hyperlink-cta-focus-border-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
--ds-auro-hyperlink-cta-focus-container-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-focus-outline-color-inverse: var(--ds-color-border-emphasis-inverse, #f2f7fb);
--ds-auro-hyperlink-cta-focus-border-color-inverse: var(--ds-color-container-ui-primary-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-hover-color-inverse: var(--ds-color-text-primary-default, #2a2a2a);
--ds-auro-hyperlink-cta-hover-container-color-inverse: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-hover-outline-color-inverse: var(--ds-color-border-ui-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-hover-border-color-inverse: var(--ds-color-border-ui-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-secondary-default-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-default-container-color-default: var(--ds-color-background-lightest, #ffffff);
--ds-auro-hyperlink-cta-secondary-default-outline-color-default: var(--ds-color-text-link-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-default-border-color-default: var(--ds-color-text-link-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-visited-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-visited-container-color-default: var(--ds-color-background-lightest, #ffffff);
--ds-auro-hyperlink-cta-secondary-visited-outline-color-default: var(--ds-color-text-link-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-visited-border-color-default: var(--ds-color-text-link-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-focus-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-focus-container-color-default: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));
--ds-auro-hyperlink-cta-hover-outline-color-inverse: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-hover-border-color-inverse: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-secondary-default-color-default: var(--ds-color-text-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-default-container-color-default: var(--ds-color-container-ui-secondary-default-default, #ffffff);
--ds-auro-hyperlink-cta-secondary-default-outline-color-default: var(--ds-color-border-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-default-border-color-default: var(--ds-color-border-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-visited-color-default: var(--ds-color-text-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-visited-container-color-default: var(--ds-color-container-ui-secondary-default-default, #ffffff);
--ds-auro-hyperlink-cta-secondary-visited-outline-color-default: var(--ds-color-border-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-visited-border-color-default: var(--ds-color-border-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-focus-color-default: var(--ds-color-text-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-focus-container-color-default: var(--ds-color-container-ui-secondary-default-default, #ffffff);
--ds-auro-hyperlink-cta-secondary-focus-outline-color-default: var(--ds-color-border-ui-focus-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-focus-border-color-default: var(--ds-color-border-ui-focus-default, #2c67b5);
--ds-auro-hyperlink-cta-secondary-hover-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-secondary-hover-container-color-default: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));
--ds-auro-hyperlink-cta-secondary-hover-color-default: var(--ds-color-text-ui-hover-default, #193d73);
--ds-auro-hyperlink-cta-secondary-hover-container-color-default: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
--ds-auro-hyperlink-cta-secondary-hover-outline-color-default: var(--ds-color-border-ui-hover-default, #193d73);
--ds-auro-hyperlink-cta-secondary-hover-border-color-default: var(--ds-color-border-ui-hover-default, #193d73);
--ds-auro-hyperlink-cta-secondary-default-color-inverse: var(--ds-color-text-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-default-container-color-inverse: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));
--ds-auro-hyperlink-cta-secondary-default-outline-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-default-border-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-default-outline-color-inverse: var(--ds-color-border-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-default-border-color-inverse: var(--ds-color-border-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-visited-color-inverse: var(--ds-color-text-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-visited-container-color-inverse: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));
--ds-auro-hyperlink-cta-secondary-visited-outline-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-visited-border-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-visited-outline-color-inverse: var(--ds-color-border-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-visited-border-color-inverse: var(--ds-color-border-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-focus-color-inverse: var(--ds-color-text-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-secondary-focus-container-color-inverse: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));
--ds-auro-hyperlink-cta-secondary-focus-outline-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
Expand All @@ -657,19 +657,19 @@ The component may be restyled using the following code sample and changing the v
--ds-auro-hyperlink-cta-secondary-hover-container-color-inverse: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));
--ds-auro-hyperlink-cta-secondary-hover-outline-color-inverse: var(--ds-color-border-ui-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-secondary-hover-border-color-inverse: var(--ds-color-border-ui-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-tertiary-default-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-tertiary-default-container-color-default: var(--ds-color-container-tertiary-default, rgba(0, 0, 0, 0.03));
--ds-auro-hyperlink-cta-tertiary-default-color-default: var(--ds-color-text-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-tertiary-default-container-color-default: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));
--ds-auro-hyperlink-cta-tertiary-default-outline-color-default: transparent;
--ds-auro-hyperlink-cta-tertiary-default-border-color-default: transparent;
--ds-auro-hyperlink-cta-tertiary-visited-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-tertiary-visited-container-color-default: var(--ds-color-container-tertiary-default, rgba(0, 0, 0, 0.03));
--ds-auro-hyperlink-cta-tertiary-visited-color-default: var(--ds-color-text-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-tertiary-visited-container-color-default: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));
--ds-auro-hyperlink-cta-tertiary-visited-outline-color-default: transparent;
--ds-auro-hyperlink-cta-tertiary-visited-border-color-default: transparent;
--ds-auro-hyperlink-cta-tertiary-focus-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-tertiary-focus-container-color-default: var(--ds-color-container-tertiary-default, rgba(0, 0, 0, 0.03));
--ds-auro-hyperlink-cta-tertiary-focus-outline-color-default: var(--ds-color-border-ui-focus-default, #2c67b5);
--ds-auro-hyperlink-cta-tertiary-focus-border-color-default: transparent;
--ds-auro-hyperlink-cta-tertiary-hover-color-default: var(--ds-color-ui-default-default, #0074c8);
--ds-auro-hyperlink-cta-tertiary-focus-outline-color-default: var(--ds-color-border-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-tertiary-focus-border-color-default: var(--ds-color-border-ui-default-default, #2c67b5);
--ds-auro-hyperlink-cta-tertiary-hover-color-default: var(--ds-color-text-ui-hover-default, #193d73);
--ds-auro-hyperlink-cta-tertiary-hover-container-color-default: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));
--ds-auro-hyperlink-cta-tertiary-hover-outline-color-default: transparent;
--ds-auro-hyperlink-cta-tertiary-hover-border-color-default: transparent;
Expand All @@ -683,8 +683,8 @@ The component may be restyled using the following code sample and changing the v
--ds-auro-hyperlink-cta-tertiary-visited-border-color-inverse: transparent;
--ds-auro-hyperlink-cta-tertiary-focus-color-inverse: var(--ds-color-text-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-tertiary-focus-container-color-inverse: var(--ds-color-container-ui-secondary-focus-inverse, rgba(255, 255, 255, 0.03));
--ds-auro-hyperlink-cta-tertiary-focus-outline-color-inverse: var(--ds-color-border-ui-focus-inverse, #56bbde);
--ds-auro-hyperlink-cta-tertiary-focus-border-color-inverse: transparent;
--ds-auro-hyperlink-cta-tertiary-focus-outline-color-inverse: var(--ds-color-border-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-tertiary-focus-border-color-inverse: var(--ds-color-border-ui-default-inverse, #56bbde);
--ds-auro-hyperlink-cta-tertiary-hover-color-inverse: var(--ds-color-text-ui-hover-inverse, #a8e9f7);
--ds-auro-hyperlink-cta-tertiary-hover-container-color-inverse: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));
--ds-auro-hyperlink-cta-tertiary-hover-outline-color-inverse: transparent;
Expand Down
Loading