| @@ -67,8 +67,14 @@ | ||
| 67 | 67 | /** |
| 68 | 68 | * Focus styles. |
| 69 | 69 | */ |
| 70 | 70 | /** |
| 71 | + * Standard focus rings for the WordPress Design System. | |
| 72 | + * | |
| 73 | + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 74 | + * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 75 | + */ | |
| 76 | +/** | |
| 71 | 77 | * Applies editor left position to the selector passed as argument |
| 72 | 78 | */ |
| 73 | 79 | /** |
| 74 | 80 | * Styles that are reused verbatim in a few places |
| @@ -87,14 +93,14 @@ | ||
| 87 | 93 | * Creates a checkerboard pattern background to indicate transparency. |
| 88 | 94 | * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. |
| 89 | 95 | */ |
| 90 | 96 | body.admin-color-light { |
| 91 | - --wp-admin-theme-color: #0085ba; | |
| 92 | - --wp-admin-theme-color--rgb: 0, 133, 186; | |
| 93 | - --wp-admin-theme-color-darker-10: rgb(0, 114.7661290323, 160.5); | |
| 94 | - --wp-admin-theme-color-darker-10--rgb: 0, 114.7661290323, 160.5; | |
| 95 | - --wp-admin-theme-color-darker-20: rgb(0, 96.5322580645, 135); | |
| 96 | - --wp-admin-theme-color-darker-20--rgb: 0, 96.5322580645, 135; | |
| 97 | + --wp-admin-theme-color: #007cba; | |
| 98 | + --wp-admin-theme-color--rgb: 0, 124, 186; | |
| 99 | + --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5); | |
| 100 | + --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5; | |
| 101 | + --wp-admin-theme-color-darker-20: #005a87; | |
| 102 | + --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; | |
| 97 | 103 | --wp-admin-border-width-focus: 2px; |
| 98 | 104 | } |
| 99 | 105 | @media (min-resolution: 192dpi) { |
| 100 | 106 | body.admin-color-light { |
| @@ -117,14 +123,14 @@ | ||
| 117 | 123 | } |
| 118 | 124 | } |
| 119 | 125 | |
| 120 | 126 | body.admin-color-blue { |
| 121 | - --wp-admin-theme-color: #096484; | |
| 122 | - --wp-admin-theme-color--rgb: 9, 100, 132; | |
| 123 | - --wp-admin-theme-color-darker-10: rgb(7.3723404255, 81.914893617, 108.1276595745); | |
| 124 | - --wp-admin-theme-color-darker-10--rgb: 7.3723404255, 81.914893617, 108.1276595745; | |
| 125 | - --wp-admin-theme-color-darker-20: rgb(5.7446808511, 63.829787234, 84.2553191489); | |
| 126 | - --wp-admin-theme-color-darker-20--rgb: 5.7446808511, 63.829787234, 84.2553191489; | |
| 127 | + --wp-admin-theme-color: #437aa8; | |
| 128 | + --wp-admin-theme-color--rgb: 67, 122, 168; | |
| 129 | + --wp-admin-theme-color-darker-10: rgb(59.729787234, 108.7617021277, 149.770212766); | |
| 130 | + --wp-admin-theme-color-darker-10--rgb: 59.729787234, 108.7617021277, 149.770212766; | |
| 131 | + --wp-admin-theme-color-darker-20: rgb(52.4595744681, 95.5234042553, 131.5404255319); | |
| 132 | + --wp-admin-theme-color-darker-20--rgb: 52.4595744681, 95.5234042553, 131.5404255319; | |
| 127 | 133 | --wp-admin-border-width-focus: 2px; |
| 128 | 134 | } |
| 129 | 135 | @media (min-resolution: 192dpi) { |
| 130 | 136 | body.admin-color-blue { |
| @@ -132,14 +138,14 @@ | ||
| 132 | 138 | } |
| 133 | 139 | } |
| 134 | 140 | |
| 135 | 141 | body.admin-color-coffee { |
| 136 | - --wp-admin-theme-color: #46403c; | |
| 137 | - --wp-admin-theme-color--rgb: 70, 64, 60; | |
| 138 | - --wp-admin-theme-color-darker-10: rgb(56.2692307692, 51.4461538462, 48.2307692308); | |
| 139 | - --wp-admin-theme-color-darker-10--rgb: 56.2692307692, 51.4461538462, 48.2307692308; | |
| 140 | - --wp-admin-theme-color-darker-20: rgb(42.5384615385, 38.8923076923, 36.4615384615); | |
| 141 | - --wp-admin-theme-color-darker-20--rgb: 42.5384615385, 38.8923076923, 36.4615384615; | |
| 142 | + --wp-admin-theme-color: #916745; | |
| 143 | + --wp-admin-theme-color--rgb: 145, 103, 69; | |
| 144 | + --wp-admin-theme-color-darker-10: rgb(127.7219626168, 90.726635514, 60.7780373832); | |
| 145 | + --wp-admin-theme-color-darker-10--rgb: 127.7219626168, 90.726635514, 60.7780373832; | |
| 146 | + --wp-admin-theme-color-darker-20: rgb(110.4439252336, 78.453271028, 52.5560747664); | |
| 147 | + --wp-admin-theme-color-darker-20--rgb: 110.4439252336, 78.453271028, 52.5560747664; | |
| 142 | 148 | --wp-admin-border-width-focus: 2px; |
| 143 | 149 | } |
| 144 | 150 | @media (min-resolution: 192dpi) { |
| 145 | 151 | body.admin-color-coffee { |
| @@ -147,14 +153,14 @@ | ||
| 147 | 153 | } |
| 148 | 154 | } |
| 149 | 155 | |
| 150 | 156 | body.admin-color-ectoplasm { |
| 151 | - --wp-admin-theme-color: #523f6d; | |
| 152 | - --wp-admin-theme-color--rgb: 82, 63, 109; | |
| 153 | - --wp-admin-theme-color-darker-10: rgb(69.8430232558, 53.6598837209, 92.8401162791); | |
| 154 | - --wp-admin-theme-color-darker-10--rgb: 69.8430232558, 53.6598837209, 92.8401162791; | |
| 155 | - --wp-admin-theme-color-darker-20: rgb(57.6860465116, 44.3197674419, 76.6802325581); | |
| 156 | - --wp-admin-theme-color-darker-20--rgb: 57.6860465116, 44.3197674419, 76.6802325581; | |
| 157 | + --wp-admin-theme-color: #646c3e; | |
| 158 | + --wp-admin-theme-color--rgb: 100, 108, 62; | |
| 159 | + --wp-admin-theme-color-darker-10: rgb(85, 91.8, 52.7); | |
| 160 | + --wp-admin-theme-color-darker-10--rgb: 85, 91.8, 52.7; | |
| 161 | + --wp-admin-theme-color-darker-20: rgb(70, 75.6, 43.4); | |
| 162 | + --wp-admin-theme-color-darker-20--rgb: 70, 75.6, 43.4; | |
| 157 | 163 | --wp-admin-border-width-focus: 2px; |
| 158 | 164 | } |
| 159 | 165 | @media (min-resolution: 192dpi) { |
| 160 | 166 | body.admin-color-ectoplasm { |
| @@ -162,14 +168,14 @@ | ||
| 162 | 168 | } |
| 163 | 169 | } |
| 164 | 170 | |
| 165 | 171 | body.admin-color-midnight { |
| 166 | - --wp-admin-theme-color: #e14d43; | |
| 167 | - --wp-admin-theme-color--rgb: 225, 77, 67; | |
| 168 | - --wp-admin-theme-color-darker-10: rgb(221.4908256881, 56.1788990826, 45.0091743119); | |
| 169 | - --wp-admin-theme-color-darker-10--rgb: 221.4908256881, 56.1788990826, 45.0091743119; | |
| 170 | - --wp-admin-theme-color-darker-20: rgb(207.8348623853, 44.2201834862, 33.1651376147); | |
| 171 | - --wp-admin-theme-color-darker-20--rgb: 207.8348623853, 44.2201834862, 33.1651376147; | |
| 172 | + --wp-admin-theme-color: #cf4339; | |
| 173 | + --wp-admin-theme-color--rgb: 207, 67, 57; | |
| 174 | + --wp-admin-theme-color-darker-10: rgb(191.9634146341, 56.2317073171, 46.5365853659); | |
| 175 | + --wp-admin-theme-color-darker-10--rgb: 191.9634146341, 56.2317073171, 46.5365853659; | |
| 176 | + --wp-admin-theme-color-darker-20: rgb(171.4390243902, 50.2195121951, 41.5609756098); | |
| 177 | + --wp-admin-theme-color-darker-20--rgb: 171.4390243902, 50.2195121951, 41.5609756098; | |
| 172 | 178 | --wp-admin-border-width-focus: 2px; |
| 173 | 179 | } |
| 174 | 180 | @media (min-resolution: 192dpi) { |
| 175 | 181 | body.admin-color-midnight { |
| @@ -177,14 +183,14 @@ | ||
| 177 | 183 | } |
| 178 | 184 | } |
| 179 | 185 | |
| 180 | 186 | body.admin-color-ocean { |
| 181 | - --wp-admin-theme-color: #627c83; | |
| 182 | - --wp-admin-theme-color--rgb: 98, 124, 131; | |
| 183 | - --wp-admin-theme-color-darker-10: rgb(87.0873362445, 110.192139738, 116.4126637555); | |
| 184 | - --wp-admin-theme-color-darker-10--rgb: 87.0873362445, 110.192139738, 116.4126637555; | |
| 185 | - --wp-admin-theme-color-darker-20: rgb(76.1746724891, 96.384279476, 101.8253275109); | |
| 186 | - --wp-admin-theme-color-darker-20--rgb: 76.1746724891, 96.384279476, 101.8253275109; | |
| 187 | + --wp-admin-theme-color: #567958; | |
| 188 | + --wp-admin-theme-color--rgb: 86, 121, 88; | |
| 189 | + --wp-admin-theme-color-darker-10: rgb(75.4057971014, 106.0942028986, 77.1594202899); | |
| 190 | + --wp-admin-theme-color-darker-10--rgb: 75.4057971014, 106.0942028986, 77.1594202899; | |
| 191 | + --wp-admin-theme-color-darker-20: rgb(64.8115942029, 91.1884057971, 66.3188405797); | |
| 192 | + --wp-admin-theme-color-darker-20--rgb: 64.8115942029, 91.1884057971, 66.3188405797; | |
| 187 | 193 | --wp-admin-border-width-focus: 2px; |
| 188 | 194 | } |
| 189 | 195 | @media (min-resolution: 192dpi) { |
| 190 | 196 | body.admin-color-ocean { |
| @@ -192,14 +198,14 @@ | ||
| 192 | 198 | } |
| 193 | 199 | } |
| 194 | 200 | |
| 195 | 201 | body.admin-color-sunrise { |
| 196 | - --wp-admin-theme-color: #dd823b; | |
| 197 | - --wp-admin-theme-color--rgb: 221, 130, 59; | |
| 198 | - --wp-admin-theme-color-darker-10: rgb(216.8782608696, 116.1847826087, 37.6217391304); | |
| 199 | - --wp-admin-theme-color-darker-10--rgb: 216.8782608696, 116.1847826087, 37.6217391304; | |
| 200 | - --wp-admin-theme-color-darker-20: rgb(195.147826087, 104.5434782609, 33.852173913); | |
| 201 | - --wp-admin-theme-color-darker-20--rgb: 195.147826087, 104.5434782609, 33.852173913; | |
| 202 | + --wp-admin-theme-color: #ad631e; | |
| 203 | + --wp-admin-theme-color--rgb: 173, 99, 30; | |
| 204 | + --wp-admin-theme-color-darker-10: rgb(151.2684729064, 86.5640394089, 26.2315270936); | |
| 205 | + --wp-admin-theme-color-darker-10--rgb: 151.2684729064, 86.5640394089, 26.2315270936; | |
| 206 | + --wp-admin-theme-color-darker-20: rgb(129.5369458128, 74.1280788177, 22.4630541872); | |
| 207 | + --wp-admin-theme-color-darker-20--rgb: 129.5369458128, 74.1280788177, 22.4630541872; | |
| 202 | 208 | --wp-admin-border-width-focus: 2px; |
| 203 | 209 | } |
| 204 | 210 | @media (min-resolution: 192dpi) { |
| 205 | 211 | body.admin-color-sunrise { |