JezK
Edit File: _mixins.scss
@use 'sass:color'; @use 'tokens'; /* * Button mixin - creates a primary button effect. * Uses CSS custom properties for theme color support across color schemes. */ @mixin button( $button-text-color: #fff ) { background: var(--wp-admin-theme-color); border-color: transparent; border-radius: tokens.$radius-s; color: $button-text-color; &:hover { background: var(--wp-admin-theme-color-darker-10); border-color: transparent; color: $button-text-color; } &:focus { background: var(--wp-admin-theme-color); border-color: transparent; color: $button-text-color; /* Gutenberg-style focus ring: outer theme color + inset white for contrast */ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px tokens.$white; /* Visible in Windows High Contrast mode */ outline: 1px solid transparent; } &:active { background: var(--wp-admin-theme-color-darker-20); border-color: transparent; color: $button-text-color; } &:disabled, &.disabled { background: tokens.$gray-100; border-color: transparent; color: tokens.$gray-600; cursor: not-allowed; } &.active, &.active:focus, &.active:hover { background: var(--wp-admin-theme-color-darker-10); color: $button-text-color; border-color: transparent; box-shadow: none; } } /* * Secondary button mixin - outlined style with theme color. * Matches Gutenberg's .is-secondary button variant. */ @mixin button-secondary() { background: transparent; border: 1px solid var(--wp-admin-theme-color); border-radius: tokens.$radius-s; color: var(--wp-admin-theme-color); &:hover { background: rgba(var(--wp-admin-theme-color--rgb), 0.04); border-color: var(--wp-admin-theme-color-darker-20); color: var(--wp-admin-theme-color-darker-20); } &:focus { background: transparent; border-color: var(--wp-admin-theme-color); color: var(--wp-admin-theme-color); box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); outline: 1px solid transparent; } &:active { background: rgba(var(--wp-admin-theme-color--rgb), 0.08); border-color: var(--wp-admin-theme-color-darker-20); color: var(--wp-admin-theme-color-darker-20); box-shadow: none; } &:disabled, &.disabled { background: transparent; border-color: tokens.$gray-300; color: tokens.$gray-600; cursor: not-allowed; } } /* * Tertiary button mixin - transparent background, gray text. */ @mixin button-tertiary() { background: transparent; border: 1px solid tokens.$gray-600; border-radius: tokens.$radius-s; color: tokens.$gray-900; &:hover { background: rgba(0, 0, 0, 0.05); border-color: tokens.$gray-700; color: tokens.$gray-900; } &:focus { background: transparent; border-color: var(--wp-admin-theme-color); color: tokens.$gray-900; box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); outline: 1px solid transparent; } &:active { background: rgba(0, 0, 0, 0.1); border-color: tokens.$gray-700; color: tokens.$gray-900; } &:disabled, &.disabled { background: transparent; border-color: tokens.$gray-400; color: tokens.$gray-600; cursor: not-allowed; } }