[Summary view] [Print] [Text view]

   1  // ==========================================================================
   2  // WordPress Design System Tokens
   3  // ==========================================================================
   4  //
   5  // These tokens are derived from the WordPress Design System in Figma:
   6  // https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System
   7  //
   8  // IMPORTANT: Do NOT expose these as CSS custom properties.
   9  // Use these Sass variables to compile to static CSS values.
  10  // The only CSS custom properties available are those in wp-base-styles:
  11  // - --wp-admin-theme-color
  12  // - --wp-admin-theme-color--rgb
  13  // - --wp-admin-theme-color-darker-10
  14  // - --wp-admin-theme-color-darker-20
  15  // - --wp-admin-border-width-focus
  16  //
  17  // ==========================================================================
  18  
  19  
  20  // --------------------------------------------------------------------------
  21  // Grid Units (Spacing)
  22  // --------------------------------------------------------------------------
  23  // Based on 4px base unit. Use for padding, margin, and gap values.
  24  
  25  $grid-unit-05: 4px;   // Scales/grid unit 05
  26  $grid-unit-10: 8px;   // Scales/grid unit 10
  27  $grid-unit-15: 12px;  // Scales/grid unit 15
  28  $grid-unit-20: 16px;  // Scales/grid unit 20
  29  $grid-unit-30: 24px;  // Scales/grid unit 30
  30  $grid-unit-40: 32px;  // Scales/grid unit 40
  31  $grid-unit-50: 40px;  // Scales/grid unit 50
  32  $grid-unit-60: 48px;  // Scales/grid unit 60
  33  $grid-unit-70: 56px;  // Scales/grid unit 70
  34  
  35  
  36  // --------------------------------------------------------------------------
  37  // Border Radius
  38  // --------------------------------------------------------------------------
  39  
  40  $radius-xs: 1px;      // radius-xs
  41  $radius-s: 2px;       // radius-s - Buttons, inputs
  42  $radius-m: 4px;       // radius-m - Focus rings
  43  $radius-l: 8px;       // radius-l - Cards, dashboard widgets
  44  $radius-30: 12px;     // Radius 30
  45  $radius-full: 9999px; // radius-full - Pills, avatars, circles
  46  
  47  
  48  // --------------------------------------------------------------------------
  49  // Gray Scale
  50  // --------------------------------------------------------------------------
  51  // Neutral colors for backgrounds, borders, and text.
  52  
  53  $gray-100: #f0f0f0;   // Scales/Grays/gray-100 - Page background, disabled inputs
  54  $gray-200: #e0e0e0;   // Scales/Grays/gray-200
  55  $gray-300: #dddddd;   // Scales/Grays/gray-300
  56  $gray-400: #cccccc;   // Scales/Grays/gray-400 - Disabled borders
  57  $gray-600: #949494;   // Scales/Grays/gray-600 - Input borders, disabled text
  58  $gray-700: #757575;   // Scales/Grays/gray-700
  59  $gray-800: #2f2f2f;   // Scales/Grays/gray-800
  60  $gray-900: #1e1e1e;   // Scales/Grays/gray-900 - Primary text
  61  
  62  $white: #ffffff;      // Scales/Black & White/white
  63  
  64  
  65  // --------------------------------------------------------------------------
  66  // Theme Colors (Static reference values)
  67  // --------------------------------------------------------------------------
  68  // For actual theme color usage, use var(--wp-admin-theme-color) instead.
  69  // These are provided for reference and for contexts where CSS vars aren't available.
  70  
  71  $theme-reference: #3858e9;           // Scales/Theme/theme (modern scheme)
  72  $theme-darker-10-reference: #2145e6; // Scales/Theme/theme-darker-10
  73  $theme-darker-20-reference: #183ad6; // Scales/Theme/theme-darker-20
  74  $theme-alpha-04: rgba(56, 88, 233, 0.04); // Scales/Theme/theme-alpha-04 (4% opacity)
  75  $theme-alpha-08: rgba(56, 88, 233, 0.08); // Scales/Theme/theme-alpha-08 (8% opacity)
  76  
  77  $brand-9: #4465db;    // Scales/brand-9 - Focus ring color (static, not theme-dependent)
  78  
  79  
  80  // --------------------------------------------------------------------------
  81  // Semantic Colors
  82  // --------------------------------------------------------------------------
  83  // Use these for notices, alerts, and status indicators.
  84  // These are intentionally NOT theme-dependent for consistency.
  85  
  86  $alert-yellow: #f0b849;    // Scales/Yellow/alert-yellow - Warnings
  87  $alert-green: #4ab866;     // Scales/Green/alert-green - Success
  88  $alert-red: #cc1818;       // Scales/Red/alert-red - Errors
  89  $alert-blue: #3858e9;      // Info notices (matches modern theme)
  90  
  91  // Background tints for notices
  92  $alert-yellow-bg: #fef8ee; // Warning notice background
  93  $alert-green-bg: #eff9f1;  // Success notice background
  94  $alert-red-bg: #fcf0f0;    // Error notice background
  95  
  96  $synced-color: #7a00df;    // Scales/Purple/--wp-block-synced-color
  97  
  98  
  99  // --------------------------------------------------------------------------
 100  // Text Colors
 101  // --------------------------------------------------------------------------
 102  
 103  $text-primary: $gray-900;     // Primary text color
 104  $text-secondary: $gray-700;   // Secondary text
 105  $text-tertiary: #5d5d5d;      // Alias/text/text-tertiary - Placeholder, hints
 106  $text-disabled: $gray-600;    // Disabled text
 107  
 108  
 109  // --------------------------------------------------------------------------
 110  // Component Tokens
 111  // --------------------------------------------------------------------------
 112  
 113  // Inputs
 114  $input-bg: $white;                    // Alias/bg/bg-input
 115  $input-border-color: $gray-600;       // Default input border
 116  $input-border-color-disabled: $gray-400;
 117  $input-bg-disabled: $gray-100;
 118  $input-border-width-default: 1px;     // Input/Default
 119  $input-border-width-focus: 1.5px;     // Input/Focus
 120  $field-spacing-horizontal: 8px;       // Alias/field-spacing-horizontal
 121  
 122  // Checkboxes and Radios
 123  $checkbox-size: 16px;                 // Alias/checkbox
 124  $radio-size: 16px;                    // Alias/radio
 125  
 126  // Toggles
 127  $toggle-width: 32px;                  // Alias/toggle-width
 128  $toggle-height: 16px;                 // Alias/toggle-height
 129  
 130  // Buttons
 131  // Note: Gutenberg is transitioning to 40px as the default button size.
 132  // The "compact" size (32px) is available for space-constrained contexts.
 133  $button-height-default: 40px;         // Default button height (next-default-40px)
 134  $button-height-compact: 32px;         // Compact button height
 135  $button-height-small: 24px;           // Small button height
 136  
 137  // Cards and Surfaces
 138  $card-bg: $white;
 139  $card-border-color: rgba(0, 0, 0, 0.1);
 140  $card-border-width: 1px;
 141  $card-border-radius: $radius-l;           // 8px for dashboard widgets
 142  $card-border-radius-metabox: 0;           // 0 for post editor metaboxes
 143  $card-divider-color: rgba(0, 0, 0, 0.1);
 144  
 145  // Card Padding Sizes
 146  $card-padding-xs: $grid-unit-10;          // 8px - xSmall cards
 147  $card-padding-sm: $grid-unit-20;          // 16px - Small cards (metaboxes, dashboard widgets)
 148  $card-padding-md-h: $grid-unit-30;        // 24px - Medium cards horizontal
 149  $card-padding-md-v: $grid-unit-20;        // 16px - Medium cards vertical
 150  $card-padding-lg-h: $grid-unit-40;        // 32px - Large cards horizontal
 151  $card-padding-lg-v: $grid-unit-30;        // 24px - Large cards vertical
 152  
 153  // Page Layout
 154  $page-padding-large: 48px;            // Alias/page-large
 155  $page-padding-small: 24px;            // Alias/page-small
 156  
 157  
 158  // --------------------------------------------------------------------------
 159  // Typography Scale
 160  // --------------------------------------------------------------------------
 161  
 162  // Font Sizes
 163  $font-size-xs: 11px;    // xs - Small labels, button small
 164  $font-size-s: 12px;     // s - Body small
 165  $font-size-m: 13px;     // m - Base body text, buttons
 166  $font-size-l: 15px;     // l - Body large, heading large
 167  $font-size-xl: 20px;    // xl - Heading XL
 168  
 169  // Line Heights
 170  $line-height-xs: 16px;  // xs
 171  $line-height-s: 20px;   // s - Most UI elements
 172  $line-height-m: 24px;   // m - Body large
 173  
 174  // Font Weights
 175  $font-weight-regular: 400;  // Regular - Body text
 176  $font-weight-medium: 500;   // Medium - Headings, buttons
 177  
 178  
 179  // --------------------------------------------------------------------------
 180  // Elevation (Box Shadows)
 181  // --------------------------------------------------------------------------
 182  
 183  $elevation-xs:
 184    0 4px 4px rgba(0, 0, 0, 0.01),
 185    0 3px 3px rgba(0, 0, 0, 0.02),
 186    0 1px 2px rgba(0, 0, 0, 0.02),
 187    0 1px 1px rgba(0, 0, 0, 0.03);
 188  
 189  $elevation-s:
 190    0 8px 8px rgba(0, 0, 0, 0.02),
 191    0 1px 2px rgba(0, 0, 0, 0.05);
 192  
 193  $elevation-m:
 194    0 16px 16px rgba(0, 0, 0, 0.02),
 195    0 4px 5px rgba(0, 0, 0, 0.03),
 196    0 2px 3px rgba(0, 0, 0, 0.05);
 197  
 198  $elevation-l:
 199    0 50px 43px rgba(0, 0, 0, 0.02),
 200    0 30px 36px rgba(0, 0, 0, 0.04),
 201    0 15px 27px rgba(0, 0, 0, 0.07),
 202    0 5px 15px rgba(0, 0, 0, 0.08);
 203  
 204  
 205  // --------------------------------------------------------------------------
 206  // Layout
 207  // --------------------------------------------------------------------------
 208  
 209  $modal-width-small: 384px;    // Layout/Modal small
 210  $modal-width-medium: 512px;   // Layout/Modal medium
 211  $modal-width-large: 840px;    // Layout/Modal large
 212