Merge pull request #2444 from adevinta/rm-useless-color-tokens

feat: removed pressed and focused color token
adevinta · Oct 2, 2024 · b84b045 · b84b045
2 parents 01c28a1 + 7396d0e
commit b84b045
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 219 deletions.
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -83,7 +83,7 @@ export const decorators = [
  <a
  href={`/iframe.html?${params.toString()}`}
  target="_blank"
- className="text-basic hover:text-basic-hovered focus:text-basic-focused enabled:active:text-basic-pressed"
+ className="text-basic hover:text-basic-hovered focus:text-basic-hovered enabled:active:text-basic-hovered"
  >
  <Icon size="sm" label="expand">
  <ShareExpand />

diff --git a/packages/components/button/src/variants/contrast.ts b/packages/components/button/src/variants/contrast.ts
@@ -7,8 +7,8 @@ export const contrastVariants = [
  class: tw([
  'text-main',
  'hover:bg-main-container-hovered',
- 'enabled:active:bg-main-container-pressed',
- 'focus-visible:bg-main-container-focused',
+ 'enabled:active:bg-main-container-hovered',
+ 'focus-visible:bg-main-container-hovered',
  ]),
  },
  {
@@ -17,8 +17,8 @@ export const contrastVariants = [
  class: tw([
  'text-support',
  'hover:bg-support-container-hovered',
- 'enabled:active:bg-support-container-pressed',
- 'focus-visible:bg-support-container-focused',
+ 'enabled:active:bg-support-container-hovered',
+ 'focus-visible:bg-support-container-hovered',
  ]),
  },
  {
@@ -27,8 +27,8 @@ export const contrastVariants = [
  class: tw([
  'text-accent',
  'hover:bg-accent-container-hovered',
- 'enabled:active:bg-accent-container-pressed',
- 'focus-visible:bg-accent-container-focused',
+ 'enabled:active:bg-accent-container-hovered',
+ 'focus-visible:bg-accent-container-hovered',
  ]),
  },
  {
@@ -37,8 +37,8 @@ export const contrastVariants = [
  class: tw([
  'text-basic',
  'hover:bg-basic-container-hovered',
- 'enabled:active:bg-basic-container-pressed',
- 'focus-visible:bg-basic-container-focused',
+ 'enabled:active:bg-basic-container-hovered',
+ 'focus-visible:bg-basic-container-hovered',
  ]),
  },
  {
@@ -47,8 +47,8 @@ export const contrastVariants = [
  class: tw([
  'text-success',
  'hover:bg-success-container-hovered',
- 'enabled:active:bg-success-container-pressed',
- 'focus-visible:bg-success-container-focused',
+ 'enabled:active:bg-success-container-hovered',
+ 'focus-visible:bg-success-container-hovered',
  ]),
  },
  {
@@ -57,8 +57,8 @@ export const contrastVariants = [
  class: tw([
  'text-alert',
  'hover:bg-alert-container-hovered',
- 'enabled:active:bg-alert-container-pressed',
- 'focus-visible:bg-alert-container-focused',
+ 'enabled:active:bg-alert-container-hovered',
+ 'focus-visible:bg-alert-container-hovered',
  ]),
  },
  {
@@ -67,8 +67,8 @@ export const contrastVariants = [
  class: tw([
  'text-error',
  'hover:bg-error-container-hovered',
- 'enabled:active:bg-error-container-pressed',
- 'focus-visible:bg-error-container-focused',
+ 'enabled:active:bg-error-container-hovered',
+ 'focus-visible:bg-error-container-hovered',
  ]),
  },
  {
@@ -77,8 +77,8 @@ export const contrastVariants = [
  class: tw([
  'text-info',
  'hover:bg-info-container-hovered',
- 'enabled:active:bg-info-container-pressed',
- 'focus-visible:bg-info-container-focused',
+ 'enabled:active:bg-info-container-hovered',
+ 'focus-visible:bg-info-container-hovered',
  ]),
  },
  {
@@ -87,8 +87,8 @@ export const contrastVariants = [
  class: tw([
  'text-neutral',
  'hover:bg-neutral-container-hovered',
- 'enabled:active:bg-neutral-container-pressed',
- 'focus-visible:bg-neutral-container-focused',
+ 'enabled:active:bg-neutral-container-hovered',
+ 'focus-visible:bg-neutral-container-hovered',
  ]),
  },
  {
@@ -97,8 +97,8 @@ export const contrastVariants = [
  class: tw([
  'text-on-surface',
  'hover:bg-surface-hovered',
- 'enabled:active:bg-surface-pressed',
- 'focus-visible:bg-surface-focused',
+ 'enabled:active:bg-surface-hovered',
+ 'focus-visible:bg-surface-hovered',
  ]),
  },
 ] as const
diff --git a/packages/components/button/src/variants/filled.ts b/packages/components/button/src/variants/filled.ts
@@ -9,8 +9,8 @@ export const filledVariants = [
  'bg-main',
  'text-on-main',
  'hover:bg-main-hovered',
- 'enabled:active:bg-main-pressed',
- 'focus-visible:bg-main-focused',
+ 'enabled:active:bg-main-hovered',
+ 'focus-visible:bg-main-hovered',
  ]),
  },
  // Support
@@ -21,8 +21,8 @@ export const filledVariants = [
  'bg-support',
  'text-on-support',
  'hover:bg-support-hovered',
- 'enabled:active:bg-support-pressed',
- 'focus-visible:bg-support-focused',
+ 'enabled:active:bg-support-hovered',
+ 'focus-visible:bg-support-hovered',
  ]),
  },
  // Accent
@@ -33,8 +33,8 @@ export const filledVariants = [
  'bg-accent',
  'text-on-accent',
  'hover:bg-accent-hovered',
- 'enabled:active:bg-accent-pressed',
- 'focus-visible:bg-accent-focused',
+ 'enabled:active:bg-accent-hovered',
+ 'focus-visible:bg-accent-hovered',
  ]),
  },
  // Basic
@@ -45,8 +45,8 @@ export const filledVariants = [
  'bg-basic',
  'text-on-basic',
  'hover:bg-basic-hovered',
- 'enabled:active:bg-basic-pressed',
- 'focus-visible:bg-basic-focused',
+ 'enabled:active:bg-basic-hovered',
+ 'focus-visible:bg-basic-hovered',
  ]),
  },
  // Success
@@ -57,8 +57,8 @@ export const filledVariants = [
  'bg-success',
  'text-on-success',
  'hover:bg-success-hovered',
- 'enabled:active:bg-success-pressed',
- 'focus-visible:bg-success-focused',
+ 'enabled:active:bg-success-hovered',
+ 'focus-visible:bg-success-hovered',
  ]),
  },
  // Alert
@@ -69,8 +69,8 @@ export const filledVariants = [
  'bg-alert',
  'text-on-alert',
  'hover:bg-alert-hovered',
- 'enabled:active:bg-alert-pressed',
- 'focus-visible:bg-alert-focused',
+ 'enabled:active:bg-alert-hovered',
+ 'focus-visible:bg-alert-hovered',
  ]),
  },
  // Danger
@@ -79,8 +79,8 @@ export const filledVariants = [
  design: 'filled',
  class: tw([
  'text-on-error bg-error',
- 'hover:bg-error-hovered enabled:active:bg-error-pressed',
- 'focus-visible:bg-error-focused',
+ 'hover:bg-error-hovered enabled:active:bg-error-hovered',
+ 'focus-visible:bg-error-hovered',
  ]),
  },
  // Info
@@ -89,8 +89,8 @@ export const filledVariants = [
  design: 'filled',
  class: tw([
  'text-on-error bg-info',
- 'hover:bg-info-hovered enabled:active:bg-info-pressed',
- 'focus-visible:bg-info-focused',
+ 'hover:bg-info-hovered enabled:active:bg-info-hovered',
+ 'focus-visible:bg-info-hovered',
  ]),
  },
  // Neutral
@@ -101,8 +101,8 @@ export const filledVariants = [
  'bg-neutral',
  'text-on-neutral',
  'hover:bg-neutral-hovered',
- 'enabled:active:bg-neutral-pressed',
- 'focus-visible:bg-neutral-focused',
+ 'enabled:active:bg-neutral-hovered',
+ 'focus-visible:bg-neutral-hovered',
  ]),
  },
  // Surface
@@ -113,8 +113,8 @@ export const filledVariants = [
  'bg-surface',
  'text-on-surface',
  'hover:bg-surface-hovered',
- 'enabled:active:bg-surface-pressed',
- 'focus-visible:bg-surface-focused',
+ 'enabled:active:bg-surface-hovered',
+ 'focus-visible:bg-surface-hovered',
  ]),
  },
 ] as const
diff --git a/packages/components/button/src/variants/tinted.ts b/packages/components/button/src/variants/tinted.ts
@@ -8,8 +8,8 @@ export const tintedVariants = [
  'bg-main-container',
  'text-on-main-container',
  'hover:bg-main-container-hovered',
- 'enabled:active:bg-main-container-pressed',
- 'focus-visible:bg-main-container-focused',
+ 'enabled:active:bg-main-container-hovered',
+ 'focus-visible:bg-main-container-hovered',
  ]),
  },
  {
@@ -19,8 +19,8 @@ export const tintedVariants = [
  'bg-support-container',
  'text-on-support-container',
  'hover:bg-support-container-hovered',
- 'enabled:active:bg-support-container-pressed',
- 'focus-visible:bg-support-container-focused',
+ 'enabled:active:bg-support-container-hovered',
+ 'focus-visible:bg-support-container-hovered',
  ]),
  },
  {
@@ -30,8 +30,8 @@ export const tintedVariants = [
  'bg-accent-container',
  'text-on-accent-container',
  'hover:bg-accent-container-hovered',
- 'enabled:active:bg-accent-container-pressed',
- 'focus-visible:bg-accent-container-focused',
+ 'enabled:active:bg-accent-container-hovered',
+ 'focus-visible:bg-accent-container-hovered',
  ]),
  },
  {
@@ -41,8 +41,8 @@ export const tintedVariants = [
  'bg-basic-container',
  'text-on-basic-container',
  'hover:bg-basic-container-hovered',
- 'enabled:active:bg-basic-container-pressed',
- 'focus-visible:bg-basic-container-focused',
+ 'enabled:active:bg-basic-container-hovered',
+ 'focus-visible:bg-basic-container-hovered',
  ]),
  },
  {
@@ -52,8 +52,8 @@ export const tintedVariants = [
  'bg-success-container',
  'text-on-success-container',
  'hover:bg-success-container-hovered',
- 'enabled:active:bg-success-container-pressed',
- 'focus-visible:bg-success-container-focused',
+ 'enabled:active:bg-success-container-hovered',
+ 'focus-visible:bg-success-container-hovered',
  ]),
  },
  {
@@ -63,8 +63,8 @@ export const tintedVariants = [
  'bg-alert-container',
  'text-on-alert-container',
  'hover:bg-alert-container-hovered',
- 'enabled:active:bg-alert-container-pressed',
- 'focus-visible:bg-alert-container-focused',
+ 'enabled:active:bg-alert-container-hovered',
+ 'focus-visible:bg-alert-container-hovered',
  ]),
  },
  {
@@ -74,8 +74,8 @@ export const tintedVariants = [
  'bg-error-container',
  'text-on-error-container',
  'hover:bg-error-container-hovered',
- 'enabled:active:bg-error-container-pressed',
- 'focus-visible:bg-error-container-focused',
+ 'enabled:active:bg-error-container-hovered',
+ 'focus-visible:bg-error-container-hovered',
  ]),
  },
  {
@@ -85,8 +85,8 @@ export const tintedVariants = [
  'bg-info-container',
  'text-on-info-container',
  'hover:bg-info-container-hovered',
- 'enabled:active:bg-info-container-pressed',
- 'focus-visible:bg-info-container-focused',
+ 'enabled:active:bg-info-container-hovered',
+ 'focus-visible:bg-info-container-hovered',
  ]),
  },
  {
@@ -96,8 +96,8 @@ export const tintedVariants = [
  'bg-neutral-container',
  'text-on-neutral-container',
  'hover:bg-neutral-container-hovered',
- 'enabled:active:bg-neutral-container-pressed',
- 'focus-visible:bg-neutral-container-focused',
+ 'enabled:active:bg-neutral-container-hovered',
+ 'focus-visible:bg-neutral-container-hovered',
  ]),
  },
  {
@@ -107,8 +107,8 @@ export const tintedVariants = [
  'bg-surface',
  'text-on-surface',
  'hover:bg-surface-hovered',
- 'enabled:active:bg-surface-pressed',
- 'focus-visible:bg-surface-focused',
+ 'enabled:active:bg-surface-hovered',
+ 'focus-visible:bg-surface-hovered',
  ]),
  },
 ] as const