| @@ -1,28 +1,48 @@ | ||
| 1 | +@use 'checkbox'; | |
| 1 | 2 | @use 'theme'; |
| 2 | 3 | |
| 4 | +// Match the active subnavigation tile so it blends into the admin canvas. | |
| 5 | +body.wp-admin { | |
| 6 | + background: var(--cs-color-surface-muted); | |
| 7 | +} | |
| 8 | + | |
| 9 | +// Remove the WordPress core 10px top margin on the import and manage snippets containers | |
| 10 | +// so the subnav band sits flush against the toolbar. | |
| 11 | +#import-container.wrap, | |
| 12 | +#manage-snippets-container.wrap { | |
| 13 | + margin-block-start: 0; | |
| 14 | +} | |
| 15 | + | |
| 3 | 16 | /** |
| 4 | - * WordPress 7.0 admin compatibility. | |
| 17 | + * Native form control styling. | |
| 5 | 18 | * |
| 6 | - * WP 7.0 ships the "modern" admin redesign, which enlarges native form controls | |
| 7 | - * (40px tall vs. 30/32px), reduces their corner radius (2px vs. 3/4px) and recolours | |
| 8 | - * secondary buttons with a transparent fill and the modern accent (#3858E9). Our admin | |
| 9 | - * UI was designed against the classic control metrics and the brand accent (#2271b1), | |
| 10 | - * so the redesign throws our spacing and colours out of alignment. | |
| 11 | - * | |
| 12 | - * These rules restore the classic control metrics for native elements inside our admin | |
| 13 | - * pages so the layout renders consistently on both WP 6.9 and WP 7.0. They deliberately | |
| 14 | - * leave the admin menu, admin bar and `@wordpress/components` React widgets untouched — | |
| 15 | - * only native inputs/buttons rendered inside our own markup are normalised. | |
| 19 | + * WordPress core ships different control metrics between versions (30/32px classic, | |
| 20 | + * 40px with a 2px radius in the WP 7.0 "modern" redesign) and recolours secondary | |
| 21 | + * buttons with the modern accent (#3858E9). These rules apply the plugin's own control | |
| 22 | + * tokens — 38px height, 5px radius, theme control borders and the brand accent — | |
| 23 | + * to native elements inside our admin pages so the layout renders consistently across | |
| 24 | + * WP versions. They deliberately leave the admin menu, admin bar and | |
| 25 | + * `@wordpress/components` React widgets untouched — only native inputs/buttons | |
| 26 | + * rendered inside our own markup are normalised. | |
| 16 | 27 | */ |
| 17 | 28 | |
| 18 | -@mixin classic-controls { | |
| 19 | - // Native single-line text controls and selects: restore 30px height + classic border. | |
| 29 | +// Scope to our admin page content. We intentionally keep this to a single `.wrap` class so | |
| 30 | +// the rules sit just above WordPress core defaults (which we must override) but below the | |
| 31 | +// plugin's own more-specific per-control rules, which are emitted later in each bundle and so | |
| 32 | +// win on equal specificity. This lets bespoke controls (conditions button, row-action links, | |
| 33 | +// priority input, etc.) keep their intended styling without per-element exclusions here. | |
| 34 | +.wrap, | |
| 35 | +// Modals render through a portal on `document.body`, outside the page wrapper, so | |
| 36 | +// the plugin's own dialogs are listed here to pick up the same control tokens. | |
| 37 | +.code-snippets-preview-modal, | |
| 38 | +.code-snippets-modal { | |
| 39 | + // Native single-line text controls and selects: token height + border. | |
| 20 | 40 | // `@wordpress/components` inputs/selects (`.components-*`) keep their own design — they |
| 21 | 41 | // are excluded so React widgets such as the tags token field are left untouched. |
| 22 | 42 | // `.snippet-priority` (the borderless list-table priority field) is excluded so it keeps |
| 23 | 43 | // its plain transparent styling rather than gaining a bordered box. |
| 24 | - input[type='text']:not([class*='components-']), | |
| 44 | + input[type='text']:not([class*='components-'], [id^='react-select-']), | |
| 25 | 45 | input[type='search']:not([class*='components-']), |
| 26 | 46 | input[type='number']:not([class*='components-'], .snippet-priority), |
| 27 | 47 | input[type='email']:not([class*='components-']), |
| 28 | 48 | input[type='url']:not([class*='components-']), |
| @@ -27,22 +47,22 @@ | ||
| 27 | 47 | input[type='email']:not([class*='components-']), |
| 28 | 48 | input[type='url']:not([class*='components-']), |
| 29 | 49 | input[type='password']:not([class*='components-']), |
| 30 | 50 | input[type='tel']:not([class*='components-']) { |
| 31 | - // `min-block-size` (not a fixed `block-size`) so controls floor at 30px but can still | |
| 32 | - // flex-stretch where the layout calls for it (e.g. the 54px cloud search bar). | |
| 33 | - min-block-size: theme.$control-height; | |
| 51 | + // `min-block-size` (not a fixed `block-size`) so controls floor at the token height but | |
| 52 | + // can still flex-stretch where the layout calls for it (e.g. the 54px cloud search bar). | |
| 53 | + min-block-size: var(--cs-control-height); | |
| 34 | 54 | padding-block: 0; |
| 35 | 55 | padding-inline: 8px; |
| 36 | - border: 1px solid theme.$control-border; | |
| 37 | - border-radius: 4px; | |
| 56 | + border: 1px solid var(--cs-color-border); | |
| 57 | + border-radius: var(--cs-control-radius); | |
| 38 | 58 | line-height: 2; |
| 39 | - color: theme.$control-text; | |
| 59 | + color: var(--cs-color-text); | |
| 40 | 60 | font-size: 14px; |
| 41 | 61 | |
| 42 | 62 | &:focus { |
| 43 | - border-color: theme.$accent; | |
| 44 | - box-shadow: 0 0 0 1px theme.$accent; | |
| 63 | + border-color: var(--cs-color-accent); | |
| 64 | + box-shadow: 0 0 0 1px var(--cs-color-accent); | |
| 45 | 65 | outline: 2px solid transparent; |
| 46 | 66 | } |
| 47 | 67 | } |
| 48 | 68 | |
| @@ -49,47 +69,51 @@ | ||
| 49 | 69 | // Selects: same metrics, but preserve room for the WP dropdown chevron on the inline-end |
| 50 | 70 | // side. WP 7.0 keeps the chevron as a background image; clamping both paddings to 8px (as |
| 51 | 71 | // for text inputs) would let the arrow overlap the text, so the inline-end padding is wider. |
| 52 | 72 | select:not([class*='components-']) { |
| 53 | - min-block-size: theme.$control-height; | |
| 73 | + min-inline-size: 170px; | |
| 74 | + field-sizing: content; | |
| 75 | + min-block-size: var(--cs-control-height); | |
| 54 | 76 | padding-block: 0; |
| 55 | 77 | padding-inline: 8px 24px; |
| 56 | - border: 1px solid theme.$control-border; | |
| 57 | - border-radius: 3px; | |
| 78 | + border: 1px solid var(--cs-color-border); | |
| 79 | + border-radius: var(--cs-control-radius); | |
| 58 | 80 | |
| 59 | - // WP 7.0 leaves a tall (≈38px) line-height on selects, pushing the value off-centre in | |
| 60 | - // the 30px control. Pin it so the text stays vertically centred. | |
| 81 | + // WP 7.0 leaves a tall (≈38px) line-height on selects, pushing the value off-centre. | |
| 82 | + // Pin it so the text stays vertically centred within the token height. | |
| 61 | 83 | line-height: 2; |
| 62 | - color: theme.$control-text; | |
| 84 | + color: var(--cs-color-text); | |
| 63 | 85 | font-size: 14px; |
| 64 | 86 | |
| 65 | 87 | &:focus { |
| 66 | - border-color: theme.$accent; | |
| 67 | - box-shadow: 0 0 0 1px theme.$accent; | |
| 88 | + border-color: var(--cs-color-accent); | |
| 89 | + box-shadow: 0 0 0 1px var(--cs-color-accent); | |
| 68 | 90 | outline: 2px solid transparent; |
| 69 | 91 | } |
| 70 | 92 | } |
| 71 | 93 | |
| 72 | - // Secondary buttons: restore classic geometry, the grey fill and the brand accent | |
| 73 | - // border/text in place of WP 7.0's transparent + modern-blue treatment. `.button-primary` | |
| 74 | - // is excluded so its solid fill below is not overwritten. | |
| 75 | - .button:not(.button-primary), | |
| 76 | - .button-secondary { | |
| 77 | - min-block-size: theme.$control-height; | |
| 94 | + // Secondary buttons: token geometry, the grey fill and the brand accent border/text in | |
| 95 | + // place of WP 7.0's transparent + modern-blue treatment. `.button-primary` is excluded | |
| 96 | + // so its solid fill below is not overwritten. The line-height centres text vertically | |
| 97 | + // in anchor-based buttons, which lack a button element's automatic centring. | |
| 98 | + .button:not(.button-primary, .button-link), | |
| 99 | + .button-secondary, | |
| 100 | + .page-title-action { | |
| 101 | + min-block-size: var(--cs-control-height); | |
| 78 | 102 | padding-block: 0; |
| 79 | 103 | padding-inline: 12px; |
| 80 | - border-radius: 3px; | |
| 81 | - line-height: 2.3077; | |
| 82 | - font-size: 13px; | |
| 104 | + border-radius: var(--cs-control-radius); | |
| 105 | + line-height: 2.5715; | |
| 106 | + font-size: 14px; | |
| 83 | 107 | font-weight: 400; |
| 84 | - background: #f6f7f7; | |
| 85 | - border-color: theme.$accent; | |
| 86 | - color: theme.$accent; | |
| 108 | + background: var(--cs-color-surface-subtle); | |
| 109 | + border-color: var(--cs-color-accent); | |
| 110 | + color: var(--cs-color-accent); | |
| 87 | 111 | |
| 88 | 112 | &:hover:not(:disabled) { |
| 89 | - background: #f0f0f1; | |
| 90 | - border-color: theme.$accent-hover; | |
| 91 | - color: theme.$accent-hover; | |
| 113 | + background: var(--cs-color-surface-muted); | |
| 114 | + border-color: var(--cs-color-accent-hover); | |
| 115 | + color: var(--cs-color-accent-hover); | |
| 92 | 116 | } |
| 93 | 117 | |
| 94 | 118 | &:focus:not(:disabled) { |
| 95 | 119 | border-color: #3582c4; |
| @@ -98,31 +122,33 @@ | ||
| 98 | 122 | } |
| 99 | 123 | } |
| 100 | 124 | |
| 101 | 125 | // Primary buttons: WP 7.0 recolours these with the modern accent and drops the solid |
| 102 | - // fill. Restore the classic solid brand-accent fill with white text. | |
| 103 | - .button-primary { | |
| 104 | - min-block-size: theme.$control-height; | |
| 126 | + // fill. Restore the classic solid brand-accent fill with white text. The `:not` | |
| 127 | + // matches the secondary rule's specificity so a `.button-small.button-primary` | |
| 128 | + // keeps the token height instead of collapsing to the 26px small size. | |
| 129 | + .button-primary:not(.button-link) { | |
| 130 | + min-block-size: var(--cs-control-height); | |
| 105 | 131 | padding-block: 0; |
| 106 | 132 | padding-inline: 12px; |
| 107 | - border-radius: 3px; | |
| 108 | - line-height: 2.3077; | |
| 109 | - font-size: 13px; | |
| 110 | - font-weight: 400; | |
| 111 | - background: theme.$accent; | |
| 112 | - border-color: theme.$accent; | |
| 133 | + border-radius: var(--cs-control-radius); | |
| 134 | + line-height: 2.5715; | |
| 135 | + font-size: 14px; | |
| 136 | + font-weight: 700; | |
| 137 | + background: var(--cs-color-accent); | |
| 138 | + border-color: var(--cs-color-accent); | |
| 113 | 139 | color: #fff; |
| 114 | 140 | |
| 115 | 141 | &:hover:not(:disabled) { |
| 116 | - background: theme.$accent-hover; | |
| 117 | - border-color: theme.$accent-hover; | |
| 142 | + background: var(--cs-color-accent-hover); | |
| 143 | + border-color: var(--cs-color-accent-hover); | |
| 118 | 144 | color: #fff; |
| 119 | 145 | } |
| 120 | 146 | |
| 121 | 147 | &:focus:not(:disabled) { |
| 122 | - background: theme.$accent-hover; | |
| 123 | - border-color: theme.$accent-hover; | |
| 124 | - box-shadow: 0 0 0 1px #fff, 0 0 0 3px theme.$accent; | |
| 148 | + background: var(--cs-color-accent-hover); | |
| 149 | + border-color: var(--cs-color-accent-hover); | |
| 150 | + box-shadow: 0 0 0 1px var(--cs-color-surface), 0 0 0 3px var(--cs-color-accent); | |
| 125 | 151 | outline: 2px solid transparent; |
| 126 | 152 | } |
| 127 | 153 | } |
| 128 | 154 | |
| @@ -131,21 +157,32 @@ | ||
| 131 | 157 | min-block-size: 26px; |
| 132 | 158 | line-height: 2.1818; |
| 133 | 159 | font-size: 11px; |
| 134 | 160 | } |
| 161 | +} | |
| 135 | 162 | |
| 163 | +.wp-core-ui .wrap .button .dashicons { | |
| 164 | + color: inherit; | |
| 165 | + | |
| 136 | 166 | // WP 7.0's taller button line-height leaks onto dashicon glyphs inside buttons (e.g. the |
| 137 | 167 | // conditions badge icon), pushing them out of vertical alignment. Reset it so icons stay |
| 138 | 168 | // centred — mirrors the existing `.button svg` rule for SVG icons. |
| 139 | - .button .dashicons { | |
| 140 | - line-height: 1; | |
| 169 | + line-height: 1; | |
| 170 | +} | |
| 171 | + | |
| 172 | +// The Screen Options panel sits outside the page wrapper, in WordPress' own | |
| 173 | +// screen meta region. These stylesheets are only loaded on the plugin's screens, | |
| 174 | +// so its checkboxes are styled to match the ones in the page below it. | |
| 175 | +#adv-settings { | |
| 176 | + input[type='checkbox'] { | |
| 177 | + @include checkbox.canonical; | |
| 141 | 178 | } |
| 142 | -} | |
| 143 | 179 | |
| 144 | -// Scope to our admin page content. We intentionally keep this to a single `.wrap` class so | |
| 145 | -// the rules sit just above WordPress core defaults (which we must override) but below the | |
| 146 | -// plugin's own more-specific per-control rules, which are emitted later in each bundle and so | |
| 147 | -// win on equal specificity. This lets bespoke controls (conditions button, row-action links, | |
| 148 | -// priority input, etc.) keep their intended styling without per-element exclusions here. | |
| 149 | -.wrap { | |
| 150 | - @include classic-controls; | |
| 180 | + // The canonical checkbox drops the margin WordPress relies on here, and the | |
| 181 | + // gap otherwise comes from whitespace in the markup, which differs between | |
| 182 | + // the fieldsets this plugin prints and the ones WordPress prints. | |
| 183 | + label { | |
| 184 | + display: inline-flex; | |
| 185 | + align-items: center; | |
| 186 | + gap: 6px; | |
| 187 | + } | |
| 151 | 188 | } |
