Cleanup color tokens

[jorytindall]

📌 Summary

As discovered in the Figma v2.0 Library project:

• Updates the icon colors in the Copy::Button to match Figma and the interactive states of the component
• Updates the Stepper::Indicator::Step to use a surface token instead of a palette token.
• Fixes a bug in the secondary Copy::Snippet where the icon had it's own interactive state, now preventing the color of the icon from changing with the component status = success or error. This matches the experience for the primary variant.

📸 Screenshots

No visual change in the Stepper, but there is a visual change in the CopyButton:

Before

After

🔗 External links

Jira ticket: HDS-3845, HDS-3845
Figma file: CopyButton

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Sep 16, 2024 5:33pm
hds-website	✅ Ready (Inspect)	Visit Preview	Sep 16, 2024 5:33pm

[jorytindall]

I'm not sure if this is the cleanest solution, but it does prevent some repetition in declaring the hover states.

[jorytindall]

Throws an error in the linter, so I'm thinking this is not the best approach.

[didoo]

not necessarily. I think you have a linter different from what is used in the repo. I'll have a look on monday

[jorytindall]

I reworked this a bit passed a comma-separated list of classes rather than chaining multiple :not() pseudo classes together which seems to satisfy the linter.

[didoo]

[suggestion] instead of doing all these not() overrides, I would follow the same approach used for the Copy::Button which is to increase the specificity for the "success/error" state classes (and in this case, since it would be used twice, I would extract it to a local mixin):

@mixin hds-copy-snippet-success-error() {
  &.hds-copy-snippet--status-success {
    background-color: var(--token-color-surface-interactive);

    .hds-copy-snippet__icon {
      color: var(--token-color-foreground-success);
    }
  }

  &.hds-copy-snippet--status-error {
    background-color: var(--token-color-surface-interactive);

    .hds-copy-snippet__icon {
      color: var(--token-color-foreground-critical);
    }
  }
}

.hds-copy-snippet {
  @include hds-focus-ring-with-pseudo-element();

  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.hds-copy-snippet--color-primary {
  color: var(--token-color-foreground-action);
  background-color: transparent;

  &:hover,
  &.mock-hover {
    color: var(--token-color-foreground-action-hover);
    background-color: var(--token-color-surface-interactive);
    border-color: var(--token-color-border-strong);
  }

  &:active,
  &.mock-active {
    color: var(--token-color-foreground-action-active);
    background-color: var(--token-color-surface-interactive-active);
    border-color: var(--token-color-border-strong);
  }

  @include hds-copy-snippet-success-error();
}

.hds-copy-snippet--color-secondary {
  color: var(--token-color-foreground-primary);
  background-color: transparent;

  .hds-copy-snippet__icon {
    color: var(--token-color-foreground-action);
  }

  &:hover,
  &.mock-hover {
    background-color: var(--token-color-surface-interactive);
    border-color: var(--token-color-border-strong);

    .hds-copy-snippet__icon {
      color: var(--token-color-foreground-action-hover);
    }
  }

  &:active,
  &.mock-active {
    background-color: var(--token-color-surface-interactive-active);
    border-color: var(--token-color-border-strong);

    .hds-copy-snippet__icon {
      color: var(--token-color-foreground-action-active);
    }
  }

  @include hds-copy-snippet-success-error();
}

[jorytindall]

This is a great suggestion, much cleaner!

[didoo]

Left a suggestion. Technically not a blocker so I am approving the PR 👍