WordPress.org
Get WordPress

Make WordPress Core

Changeset 63499


Ignore:
Timestamp:
09/05/2026 12:02:19 PM (4 days ago)
Author:
afercia
Message:

Administration: Fix the CSS Coding Standards in _tokens.scss.

Lints the src/wp-admin/css/colors/_tokens.scss file.
Part of the ongoing effort to lint all the admin CSS files.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13174

See #65898.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/colors/_tokens.scss

    r62755 r63499  
    1717// ==========================================================================
    1818
    19 
    20 // --------------------------------------------------------------------------
    21 // Grid Units (Spacing)
    22 // --------------------------------------------------------------------------
    23 // Based on 4px base unit. Use for padding, margin, and gap values.
     19/**
     20 * Grid Units (Spacing)
     21 *
     22 * Based on 4px base unit. Use for padding, margin, and gap values.
     23 */
    2424
    2525$grid-unit-05: 4px;   // Scales/grid unit 05
    … …  
    3333$grid-unit-70: 56px;  // Scales/grid unit 70
    3434
    35 
    36 // --------------------------------------------------------------------------
    37 // Border Radius
    38 // --------------------------------------------------------------------------
     35/**
     36 * Border Radius
     37 */
    3938
    4039$radius-xs: 1px;      // radius-xs
    … …  
    4544$radius-full: 9999px; // radius-full - Pills, avatars, circles
    4645
    47 
    48 // --------------------------------------------------------------------------
    49 // Gray Scale
    50 // --------------------------------------------------------------------------
    51 // Neutral colors for backgrounds, borders, and text.
     46/**
     47 * Gray Scale
     48 *
     49 * Neutral colors for backgrounds, borders, and text.
     50 */
    5251
    5352$gray-100: #f0f0f0;   // Scales/Grays/gray-100 - Page background, disabled inputs
    5453$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
     54$gray-300: #ddd;      // Scales/Grays/gray-300
     55$gray-400: #ccc;      // Scales/Grays/gray-400 - Disabled borders
    5756$gray-600: #949494;   // Scales/Grays/gray-600 - Input borders, disabled text
    5857$gray-700: #757575;   // Scales/Grays/gray-700
    … …  
    6059$gray-900: #1e1e1e;   // Scales/Grays/gray-900 - Primary text
    6160
    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.
     61$white: #fff;         // Scales/Black & White/white
     62
     63/**
     64 * Theme Colors (Static reference values)
     65 *
     66 * For actual theme color usage, use var(--wp-admin-theme-color) instead.
     67 * These are provided for reference and for contexts where CSS vars aren't available.
     68 */
    7069
    7170$theme-reference: #3858e9;           // Scales/Theme/theme (modern scheme)
    … …  
    7776$brand-9: #4465db;    // Scales/brand-9 - Focus ring color (static, not theme-dependent)
    7877
    79 
    80 // --------------------------------------------------------------------------
    81 // Semantic Colors
    82 // --------------------------------------------------------------------------
    83 // Use these for notices, alerts, and status indicators.
    84 // These are intentionally NOT theme-dependent for consistency.
     78/**
     79 * Semantic Colors
     80 *
     81 * Use these for notices, alerts, and status indicators.
     82 * These are intentionally NOT theme-dependent for consistency.
     83 */
    8584
    8685$alert-yellow: #f0b849;    // Scales/Yellow/alert-yellow - Warnings
    … …  
    9695$synced-color: #7a00df;    // Scales/Purple/--wp-block-synced-color
    9796
    98 
    99 // --------------------------------------------------------------------------
    100 // Text Colors
    101 // --------------------------------------------------------------------------
     97/**
     98 * Text Colors
     99 */
    102100
    103101$text-primary: $gray-900;     // Primary text color
    104102$text-secondary: $gray-700;   // Secondary text
    105 $text-tertiary: #5d5d5d;      // Alias/text/text-tertiary - Placeholder, hints
     103$text-tertiary: #5d5d5d;    // Alias/text/text-tertiary - Placeholder, hints
    106104$text-disabled: $gray-600;    // Disabled text
    107105
    108 
    109 // --------------------------------------------------------------------------
    110 // Component Tokens
    111 // --------------------------------------------------------------------------
     106/**
     107 * Component Tokens
     108 */
    112109
    113110// Inputs
    … …  
    155152$page-padding-small: 24px;            // Alias/page-small
    156153
    157 
    158 // --------------------------------------------------------------------------
    159 // Typography Scale
    160 // --------------------------------------------------------------------------
     154/**
     155 * Typography Scale
     156 */
    161157
    162158// Font Sizes
    … …  
    172168$line-height-m: 24px;   // m - Body large
    173169
    174 // --------------------------------------------------------------------------
    175 // Elevation (Box Shadows)
    176 // --------------------------------------------------------------------------
     170/**
     171 * Elevation (Box Shadows)
     172 */
    177173
    178174$elevation-xs:
    179   0 4px 4px rgba(0, 0, 0, 0.01),
    180   0 3px 3px rgba(0, 0, 0, 0.02),
    181   0 1px 2px rgba(0, 0, 0, 0.02),
    182   0 1px 1px rgba(0, 0, 0, 0.03);
     175        0 4px 4px rgba(0, 0, 0, 0.01),
     176        0 3px 3px rgba(0, 0, 0, 0.02),
     177        0 1px 2px rgba(0, 0, 0, 0.02),
     178        0 1px 1px rgba(0, 0, 0, 0.03);
    183179
    184180$elevation-s:
    185   0 8px 8px rgba(0, 0, 0, 0.02),
    186   0 1px 2px rgba(0, 0, 0, 0.05);
     181        0 8px 8px rgba(0, 0, 0, 0.02),
     182        0 1px 2px rgba(0, 0, 0, 0.05);
    187183
    188184$elevation-m:
    189   0 16px 16px rgba(0, 0, 0, 0.02),
    190   0 4px 5px rgba(0, 0, 0, 0.03),
    191   0 2px 3px rgba(0, 0, 0, 0.05);
     185        0 16px 16px rgba(0, 0, 0, 0.02),
     186        0 4px 5px rgba(0, 0, 0, 0.03),
     187        0 2px 3px rgba(0, 0, 0, 0.05);
    192188
    193189$elevation-l:
    194   0 50px 43px rgba(0, 0, 0, 0.02),
    195   0 30px 36px rgba(0, 0, 0, 0.04),
    196   0 15px 27px rgba(0, 0, 0, 0.07),
    197   0 5px 15px rgba(0, 0, 0, 0.08);
    198 
    199 
    200 // --------------------------------------------------------------------------
    201 // Layout
    202 // --------------------------------------------------------------------------
     190        0 50px 43px rgba(0, 0, 0, 0.02),
     191        0 30px 36px rgba(0, 0, 0, 0.04),
     192        0 15px 27px rgba(0, 0, 0, 0.07),
     193        0 5px 15px rgba(0, 0, 0, 0.08);
     194
     195/**
     196 * Layout
     197 */
    203198
    204199$modal-width-small: 384px;    // Layout/Modal small
    205200$modal-width-medium: 512px;   // Layout/Modal medium
    206201$modal-width-large: 840px;    // Layout/Modal large
    207 
Note: See TracChangeset for help on using the changeset viewer.