[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: 1px 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      &.disabled {
  40          background: tokens.$gray-100;
  41          border-color: transparent;
  42          color: tokens.$gray-600;
  43          cursor: not-allowed;
  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          outline: 1px solid transparent;
  78      }
  79  
  80      &:active {
  81          background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
  82          border-color: var(--wp-admin-theme-color-darker-20);
  83          color: var(--wp-admin-theme-color-darker-20);
  84          box-shadow: none;
  85      }
  86  
  87      &:disabled,
  88      &.disabled {
  89          background: transparent;
  90          border-color: tokens.$gray-300;
  91          color: tokens.$gray-600;
  92          cursor: not-allowed;
  93      }
  94  }
  95  
  96  /*
  97   * Tertiary button mixin - transparent background, gray text.
  98   */
  99  @mixin button-tertiary() {
 100      background: transparent;
 101      border: 1px solid tokens.$gray-600;
 102      border-radius: tokens.$radius-s;
 103      color: tokens.$gray-900;
 104  
 105      &:hover {
 106          background: rgba(0, 0, 0, 0.05);
 107          border-color: tokens.$gray-700;
 108          color: tokens.$gray-900;
 109      }
 110  
 111      &:focus {
 112          background: transparent;
 113          border-color: var(--wp-admin-theme-color);
 114          color: tokens.$gray-900;
 115          box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 116          outline: 1px solid transparent;
 117      }
 118  
 119      &:active {
 120          background: rgba(0, 0, 0, 0.1);
 121          border-color: tokens.$gray-700;
 122          color: tokens.$gray-900;
 123      }
 124  
 125      &:disabled,
 126      &.disabled {
 127          background: transparent;
 128          border-color: tokens.$gray-400;
 129          color: tokens.$gray-600;
 130          cursor: not-allowed;
 131      }
 132  }