[Summary view] [Print] [Text view]

   1  @use "sass:color";
   2  @use "tokens";
   3  
   4  /*
   5   * Button mixin - creates a primary button effect.
   6   * Uses CSS custom properties for theme color support across color schemes.
   7   */
   8  @mixin button( $button-text-color: #fff ) {
   9      background: var(--wp-admin-theme-color);
  10      border-color: transparent;
  11      border-radius: tokens.$radius-s;
  12      color: $button-text-color;
  13  
  14      &:hover {
  15          background: var(--wp-admin-theme-color-darker-10);
  16          border-color: transparent;
  17          color: $button-text-color;
  18      }
  19  
  20      &:focus {
  21          background: var(--wp-admin-theme-color);
  22          border-color: transparent;
  23          color: $button-text-color;
  24          /* Gutenberg-style focus ring: outer theme color + inset white for contrast */
  25          box-shadow:
  26              0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
  27              inset 0 0 0 1px tokens.$white;
  28          /* Visible in Windows High Contrast mode */
  29          outline: 2px solid transparent;
  30      }
  31  
  32      &:active {
  33          background: var(--wp-admin-theme-color-darker-20);
  34          border-color: transparent;
  35          color: $button-text-color;
  36      }
  37  
  38      &:disabled,
  39      &[aria-disabled="true"],
  40      &.disabled {
  41          background: tokens.$gray-100;
  42          border-color: transparent;
  43          color: tokens.$gray-600;
  44      }
  45  
  46      &.active,
  47      &.active:focus,
  48      &.active:hover {
  49          background: var(--wp-admin-theme-color-darker-10);
  50          color: $button-text-color;
  51          border-color: transparent;
  52          box-shadow: none;
  53      }
  54  }
  55  
  56  /*
  57   * Secondary button mixin - outlined style with theme color.
  58   * Matches Gutenberg's .is-secondary button variant.
  59   */
  60  @mixin button-secondary() {
  61      background: transparent;
  62      border: 1px solid var(--wp-admin-theme-color);
  63      border-radius: tokens.$radius-s;
  64      color: var(--wp-admin-theme-color);
  65  
  66      &:hover {
  67          background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
  68          border-color: var(--wp-admin-theme-color-darker-20);
  69          color: var(--wp-admin-theme-color-darker-20);
  70      }
  71  
  72      &:focus {
  73          background: transparent;
  74          border-color: var(--wp-admin-theme-color);
  75          color: var(--wp-admin-theme-color);
  76          box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
  77          /* Visible in Windows High Contrast mode */
  78          outline: 2px solid transparent;
  79      }
  80  
  81      &:active {
  82          background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
  83          border-color: var(--wp-admin-theme-color-darker-20);
  84          color: var(--wp-admin-theme-color-darker-20);
  85          box-shadow: none;
  86      }
  87  
  88      &:disabled,
  89      &[aria-disabled="true"],
  90      &.disabled {
  91          background: transparent;
  92          border-color: tokens.$gray-300;
  93          color: tokens.$gray-600;
  94      }
  95  }
  96  
  97  /*
  98   * Tertiary button mixin - transparent background, gray text.
  99   */
 100  @mixin button-tertiary() {
 101      background: transparent;
 102      border: 1px solid tokens.$gray-600;
 103      border-radius: tokens.$radius-s;
 104      color: tokens.$gray-900;
 105  
 106      &:hover {
 107          background: rgba(0, 0, 0, 0.05);
 108          border-color: tokens.$gray-700;
 109          color: tokens.$gray-900;
 110      }
 111  
 112      &:focus {
 113          background: transparent;
 114          border-color: var(--wp-admin-theme-color);
 115          color: tokens.$gray-900;
 116          box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 117          /* Visible in Windows High Contrast mode */
 118          outline: 2px solid transparent;
 119      }
 120  
 121      &:active {
 122          background: rgba(0, 0, 0, 0.1);
 123          border-color: tokens.$gray-700;
 124          color: tokens.$gray-900;
 125      }
 126  
 127      &:disabled,
 128      &[aria-disabled="true"],
 129      &.disabled {
 130          background: transparent;
 131          border-color: tokens.$gray-400;
 132          color: tokens.$gray-600;
 133      }
 134  }