| @@ -5,10 +5,10 @@ | ||
| 5 | 5 | flex-direction: row; |
| 6 | 6 | align-items: center; |
| 7 | 7 | padding: 12px; |
| 8 | 8 | gap: 10px; |
| 9 | - background: #fff; | |
| 10 | - border: 1px solid #ccc; | |
| 9 | + background: var(--cs-color-surface); | |
| 10 | + border: 1px solid var(--cs-color-border); | |
| 11 | 11 | border-radius: 5px; |
| 12 | 12 | |
| 13 | 13 | p { |
| 14 | 14 | margin: 0; |
| @@ -18,15 +18,15 @@ | ||
| 18 | 18 | text-decoration: none; |
| 19 | 19 | } |
| 20 | 20 | |
| 21 | 21 | .button-primary { |
| 22 | - background-color: theme.$secondary; | |
| 22 | + background-color: var(--cs-color-secondary); | |
| 23 | 23 | border: 0; |
| 24 | 24 | font-weight: bold; |
| 25 | 25 | margin-inline-start: auto; |
| 26 | 26 | |
| 27 | 27 | &:hover, &:focus { |
| 28 | - background-color: #0ca0a9; | |
| 28 | + background-color: var(--cs-color-primary-hover); | |
| 29 | 29 | } |
| 30 | 30 | } |
| 31 | 31 | |
| 32 | 32 | .button-link.button-small { |
| @@ -32,9 +32,9 @@ | ||
| 32 | 32 | .button-link.button-small { |
| 33 | 33 | text-decoration: none; |
| 34 | 34 | font-weight: normal; |
| 35 | 35 | padding: 0; |
| 36 | - color: #646970; | |
| 36 | + color: var(--cs-color-text-muted); | |
| 37 | 37 | line-height: 1; |
| 38 | 38 | border: none; |
| 39 | 39 | } |
| 40 | 40 | } |
| @@ -45,9 +45,9 @@ | ||
| 45 | 45 | font-size: 32px; |
| 46 | 46 | margin: 0; |
| 47 | 47 | |
| 48 | 48 | span { |
| 49 | - color: #d46f4d; | |
| 49 | + color: var(--cs-color-secondary); | |
| 50 | 50 | } |
| 51 | 51 | } |
| 52 | 52 | |
| 53 | 53 | p { |
| @@ -81,9 +81,9 @@ | ||
| 81 | 81 | color: #fff; |
| 82 | 82 | inline-size: 24px; |
| 83 | 83 | block-size: 24px; |
| 84 | 84 | border-radius: 50%; |
| 85 | - background-color: #0ca0a9; | |
| 85 | + background-color: var(--cs-color-primary-hover); | |
| 86 | 86 | display: flex; |
| 87 | 87 | justify-content: center; |
| 88 | 88 | align-items: center; |
| 89 | 89 | } |
| @@ -88,9 +88,9 @@ | ||
| 88 | 88 | align-items: center; |
| 89 | 89 | } |
| 90 | 90 | |
| 91 | 91 | .button.button-large { |
| 92 | - background-color: #d46f4d; | |
| 92 | + background-color: var(--cs-color-secondary); | |
| 93 | 93 | padding-block: 15px; |
| 94 | 94 | padding-inline: 20px; |
| 95 | 95 | font-size: 16px; |
| 96 | 96 | line-height: inherit; |
| @@ -100,11 +100,11 @@ | ||
| 100 | 100 | |
| 101 | 101 | // Matches the specificity of the native-control override in _wp-admin.scss |
| 102 | 102 | // (.wrap .button-primary:not(.button-link):hover:not(:disabled)) so this |
| 103 | 103 | // upsell-specific hover styling isn't overridden by the shared button rule. |
| 104 | - &:hover:not(.button-link, :disabled) { | |
| 105 | - background-color: #0ca0a9; | |
| 106 | - border-color: #0ca0a9; | |
| 104 | + &:is(:hover, :focus):not(.button-link, :disabled) { | |
| 105 | + background-color: var(--cs-color-primary-hover); | |
| 106 | + border-color: var(--cs-color-primary-hover); | |
| 107 | 107 | } |
| 108 | 108 | } |
| 109 | 109 | } |
| 110 | 110 | |
| @@ -120,15 +120,15 @@ | ||
| 120 | 120 | color: #1c3f41; |
| 121 | 121 | line-height: 1.5; |
| 122 | 122 | background: linear-gradient(116.04deg, #edfcff -0.75%, #fcdfd4 93.04%); |
| 123 | 123 | box-shadow: 0 4px 80px rgb(0 0 0 / 10%); |
| 124 | - border-radius: 8px; | |
| 124 | + border-radius: 5px; | |
| 125 | 125 | } |
| 126 | 126 | |
| 127 | 127 | // Bleed the upsell to the full width of the admin content area and fill the |
| 128 | 128 | // remaining viewport height, so it reads as a full page rather than a small |
| 129 | 129 | // boxed card floating in the subpage. 168px accounts for the WP admin bar |
| 130 | -// (32px) plus the plugin toolbar ($toolbar-block-size, 136px in _toolbar.scss). | |
| 130 | +// (32px) plus the plugin toolbar (136px). | |
| 131 | 131 | .code-snippets-upsell-page { |
| 132 | 132 | box-sizing: border-box; |
| 133 | 133 | margin-inline-start: -22px; |
| 134 | 134 | inline-size: calc(100% + 42px); |
