@wordpress/base-styles 9.1.0 → 10.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/_mixins.scss +7 -7
  3. package/_z-index.scss +2 -4
  4. package/build-style/admin-schemes-rtl.css +42 -42
  5. package/build-style/admin-schemes.css +42 -42
  6. package/package.json +2 -3
  7. package/_colors.native.scss +0 -122
package/CHANGELOG.md CHANGED
@@ -2,7 +2,14 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
- ## 9.1.0 (2026-06-04)
5
+ ## 10.0.1 (2026-06-16)
6
+
7
+ ## 10.0.0 (2026-06-10)
8
+
9
+ ### Breaking Changes
10
+
11
+ - Remove the following entries from the `z-index()` helper ([#77773](https://github.com/WordPress/gutenberg/pull/77773)):
12
+ - `.nux-dot-tip`
6
13
 
7
14
  ## 9.0.0 (2026-05-27)
8
15
 
package/_mixins.scss CHANGED
@@ -534,7 +534,7 @@
534
534
 
535
535
  @mixin wordpress-admin-schemes() {
536
536
  body.admin-color-light {
537
- @include admin-scheme(#0085ba);
537
+ @include admin-scheme(#007cba);
538
538
  }
539
539
 
540
540
  body.admin-color-modern {
@@ -542,27 +542,27 @@
542
542
  }
543
543
 
544
544
  body.admin-color-blue {
545
- @include admin-scheme(#096484);
545
+ @include admin-scheme(#437aa8);
546
546
  }
547
547
 
548
548
  body.admin-color-coffee {
549
- @include admin-scheme(#46403c);
549
+ @include admin-scheme(#916745);
550
550
  }
551
551
 
552
552
  body.admin-color-ectoplasm {
553
- @include admin-scheme(#523f6d);
553
+ @include admin-scheme(#646c3e);
554
554
  }
555
555
 
556
556
  body.admin-color-midnight {
557
- @include admin-scheme(#e14d43);
557
+ @include admin-scheme(#cf4339);
558
558
  }
559
559
 
560
560
  body.admin-color-ocean {
561
- @include admin-scheme(#627c83);
561
+ @include admin-scheme(#567958);
562
562
  }
563
563
 
564
564
  body.admin-color-sunrise {
565
- @include admin-scheme(#dd823b);
565
+ @include admin-scheme(#ad631e);
566
566
  }
567
567
  }
568
568
 
package/_z-index.scss CHANGED
@@ -89,6 +89,7 @@ $z-layers: (
89
89
  ".editor-post-template__swap-template-modal": 1000001,
90
90
  ".editor-post-template__create-template-modal": 1000001,
91
91
  ".editor-sync-connection-error-modal": 1000001,
92
+ ".media-editor-modal__footer": 1000001,
92
93
  ".components-snackbar-list.media-editor-modal__snackbar": 1000001,
93
94
 
94
95
  // Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
@@ -112,10 +113,7 @@ $z-layers: (
112
113
  // The focus styles of the region navigation containers should be above their content.
113
114
  ".is-focusing-regions {region} :focus::after": 1000000,
114
115
 
115
- // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
116
- ".nux-dot-tip": 1000001,
117
-
118
- // Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
116
+ // Show tooltips above popovers, wp-admin menus, submenus, and sidebar:
119
117
  ".components-tooltip": 1000002,
120
118
 
121
119
  // Appear under the customizer heading UI, but over anything else.
package/build-style/admin-schemes-rtl.css CHANGED
@@ -88,12 +88,12 @@
88
88
  * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89
89
  */
90
90
  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;
91
+ --wp-admin-theme-color: #007cba;
92
+ --wp-admin-theme-color--rgb: 0, 124, 186;
93
+ --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
94
+ --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
95
+ --wp-admin-theme-color-darker-20: #005a87;
96
+ --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
97
97
  --wp-admin-border-width-focus: 2px;
98
98
  }
99
99
  @media (min-resolution: 192dpi) {
@@ -118,12 +118,12 @@ body.admin-color-modern {
118
118
  }
119
119
 
120
120
  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;
121
+ --wp-admin-theme-color: #437aa8;
122
+ --wp-admin-theme-color--rgb: 67, 122, 168;
123
+ --wp-admin-theme-color-darker-10: rgb(59.729787234, 108.7617021277, 149.770212766);
124
+ --wp-admin-theme-color-darker-10--rgb: 59.729787234, 108.7617021277, 149.770212766;
125
+ --wp-admin-theme-color-darker-20: rgb(52.4595744681, 95.5234042553, 131.5404255319);
126
+ --wp-admin-theme-color-darker-20--rgb: 52.4595744681, 95.5234042553, 131.5404255319;
127
127
  --wp-admin-border-width-focus: 2px;
128
128
  }
129
129
  @media (min-resolution: 192dpi) {
@@ -133,12 +133,12 @@ body.admin-color-blue {
133
133
  }
134
134
 
135
135
  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;
136
+ --wp-admin-theme-color: #916745;
137
+ --wp-admin-theme-color--rgb: 145, 103, 69;
138
+ --wp-admin-theme-color-darker-10: rgb(127.7219626168, 90.726635514, 60.7780373832);
139
+ --wp-admin-theme-color-darker-10--rgb: 127.7219626168, 90.726635514, 60.7780373832;
140
+ --wp-admin-theme-color-darker-20: rgb(110.4439252336, 78.453271028, 52.5560747664);
141
+ --wp-admin-theme-color-darker-20--rgb: 110.4439252336, 78.453271028, 52.5560747664;
142
142
  --wp-admin-border-width-focus: 2px;
143
143
  }
144
144
  @media (min-resolution: 192dpi) {
@@ -148,12 +148,12 @@ body.admin-color-coffee {
148
148
  }
149
149
 
150
150
  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;
151
+ --wp-admin-theme-color: #646c3e;
152
+ --wp-admin-theme-color--rgb: 100, 108, 62;
153
+ --wp-admin-theme-color-darker-10: rgb(85, 91.8, 52.7);
154
+ --wp-admin-theme-color-darker-10--rgb: 85, 91.8, 52.7;
155
+ --wp-admin-theme-color-darker-20: rgb(70, 75.6, 43.4);
156
+ --wp-admin-theme-color-darker-20--rgb: 70, 75.6, 43.4;
157
157
  --wp-admin-border-width-focus: 2px;
158
158
  }
159
159
  @media (min-resolution: 192dpi) {
@@ -163,12 +163,12 @@ body.admin-color-ectoplasm {
163
163
  }
164
164
 
165
165
  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;
166
+ --wp-admin-theme-color: #cf4339;
167
+ --wp-admin-theme-color--rgb: 207, 67, 57;
168
+ --wp-admin-theme-color-darker-10: rgb(191.9634146341, 56.2317073171, 46.5365853659);
169
+ --wp-admin-theme-color-darker-10--rgb: 191.9634146341, 56.2317073171, 46.5365853659;
170
+ --wp-admin-theme-color-darker-20: rgb(171.4390243902, 50.2195121951, 41.5609756098);
171
+ --wp-admin-theme-color-darker-20--rgb: 171.4390243902, 50.2195121951, 41.5609756098;
172
172
  --wp-admin-border-width-focus: 2px;
173
173
  }
174
174
  @media (min-resolution: 192dpi) {
@@ -178,12 +178,12 @@ body.admin-color-midnight {
178
178
  }
179
179
 
180
180
  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;
181
+ --wp-admin-theme-color: #567958;
182
+ --wp-admin-theme-color--rgb: 86, 121, 88;
183
+ --wp-admin-theme-color-darker-10: rgb(75.4057971014, 106.0942028986, 77.1594202899);
184
+ --wp-admin-theme-color-darker-10--rgb: 75.4057971014, 106.0942028986, 77.1594202899;
185
+ --wp-admin-theme-color-darker-20: rgb(64.8115942029, 91.1884057971, 66.3188405797);
186
+ --wp-admin-theme-color-darker-20--rgb: 64.8115942029, 91.1884057971, 66.3188405797;
187
187
  --wp-admin-border-width-focus: 2px;
188
188
  }
189
189
  @media (min-resolution: 192dpi) {
@@ -193,12 +193,12 @@ body.admin-color-ocean {
193
193
  }
194
194
 
195
195
  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;
196
+ --wp-admin-theme-color: #ad631e;
197
+ --wp-admin-theme-color--rgb: 173, 99, 30;
198
+ --wp-admin-theme-color-darker-10: rgb(151.2684729064, 86.5640394089, 26.2315270936);
199
+ --wp-admin-theme-color-darker-10--rgb: 151.2684729064, 86.5640394089, 26.2315270936;
200
+ --wp-admin-theme-color-darker-20: rgb(129.5369458128, 74.1280788177, 22.4630541872);
201
+ --wp-admin-theme-color-darker-20--rgb: 129.5369458128, 74.1280788177, 22.4630541872;
202
202
  --wp-admin-border-width-focus: 2px;
203
203
  }
204
204
  @media (min-resolution: 192dpi) {
package/build-style/admin-schemes.css CHANGED
@@ -88,12 +88,12 @@
88
88
  * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
89
89
  */
90
90
  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;
91
+ --wp-admin-theme-color: #007cba;
92
+ --wp-admin-theme-color--rgb: 0, 124, 186;
93
+ --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
94
+ --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
95
+ --wp-admin-theme-color-darker-20: #005a87;
96
+ --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
97
97
  --wp-admin-border-width-focus: 2px;
98
98
  }
99
99
  @media (min-resolution: 192dpi) {
@@ -118,12 +118,12 @@ body.admin-color-modern {
118
118
  }
119
119
 
120
120
  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;
121
+ --wp-admin-theme-color: #437aa8;
122
+ --wp-admin-theme-color--rgb: 67, 122, 168;
123
+ --wp-admin-theme-color-darker-10: rgb(59.729787234, 108.7617021277, 149.770212766);
124
+ --wp-admin-theme-color-darker-10--rgb: 59.729787234, 108.7617021277, 149.770212766;
125
+ --wp-admin-theme-color-darker-20: rgb(52.4595744681, 95.5234042553, 131.5404255319);
126
+ --wp-admin-theme-color-darker-20--rgb: 52.4595744681, 95.5234042553, 131.5404255319;
127
127
  --wp-admin-border-width-focus: 2px;
128
128
  }
129
129
  @media (min-resolution: 192dpi) {
@@ -133,12 +133,12 @@ body.admin-color-blue {
133
133
  }
134
134
 
135
135
  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;
136
+ --wp-admin-theme-color: #916745;
137
+ --wp-admin-theme-color--rgb: 145, 103, 69;
138
+ --wp-admin-theme-color-darker-10: rgb(127.7219626168, 90.726635514, 60.7780373832);
139
+ --wp-admin-theme-color-darker-10--rgb: 127.7219626168, 90.726635514, 60.7780373832;
140
+ --wp-admin-theme-color-darker-20: rgb(110.4439252336, 78.453271028, 52.5560747664);
141
+ --wp-admin-theme-color-darker-20--rgb: 110.4439252336, 78.453271028, 52.5560747664;
142
142
  --wp-admin-border-width-focus: 2px;
143
143
  }
144
144
  @media (min-resolution: 192dpi) {
@@ -148,12 +148,12 @@ body.admin-color-coffee {
148
148
  }
149
149
 
150
150
  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;
151
+ --wp-admin-theme-color: #646c3e;
152
+ --wp-admin-theme-color--rgb: 100, 108, 62;
153
+ --wp-admin-theme-color-darker-10: rgb(85, 91.8, 52.7);
154
+ --wp-admin-theme-color-darker-10--rgb: 85, 91.8, 52.7;
155
+ --wp-admin-theme-color-darker-20: rgb(70, 75.6, 43.4);
156
+ --wp-admin-theme-color-darker-20--rgb: 70, 75.6, 43.4;
157
157
  --wp-admin-border-width-focus: 2px;
158
158
  }
159
159
  @media (min-resolution: 192dpi) {
@@ -163,12 +163,12 @@ body.admin-color-ectoplasm {
163
163
  }
164
164
 
165
165
  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;
166
+ --wp-admin-theme-color: #cf4339;
167
+ --wp-admin-theme-color--rgb: 207, 67, 57;
168
+ --wp-admin-theme-color-darker-10: rgb(191.9634146341, 56.2317073171, 46.5365853659);
169
+ --wp-admin-theme-color-darker-10--rgb: 191.9634146341, 56.2317073171, 46.5365853659;
170
+ --wp-admin-theme-color-darker-20: rgb(171.4390243902, 50.2195121951, 41.5609756098);
171
+ --wp-admin-theme-color-darker-20--rgb: 171.4390243902, 50.2195121951, 41.5609756098;
172
172
  --wp-admin-border-width-focus: 2px;
173
173
  }
174
174
  @media (min-resolution: 192dpi) {
@@ -178,12 +178,12 @@ body.admin-color-midnight {
178
178
  }
179
179
 
180
180
  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;
181
+ --wp-admin-theme-color: #567958;
182
+ --wp-admin-theme-color--rgb: 86, 121, 88;
183
+ --wp-admin-theme-color-darker-10: rgb(75.4057971014, 106.0942028986, 77.1594202899);
184
+ --wp-admin-theme-color-darker-10--rgb: 75.4057971014, 106.0942028986, 77.1594202899;
185
+ --wp-admin-theme-color-darker-20: rgb(64.8115942029, 91.1884057971, 66.3188405797);
186
+ --wp-admin-theme-color-darker-20--rgb: 64.8115942029, 91.1884057971, 66.3188405797;
187
187
  --wp-admin-border-width-focus: 2px;
188
188
  }
189
189
  @media (min-resolution: 192dpi) {
@@ -193,12 +193,12 @@ body.admin-color-ocean {
193
193
  }
194
194
 
195
195
  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;
196
+ --wp-admin-theme-color: #ad631e;
197
+ --wp-admin-theme-color--rgb: 173, 99, 30;
198
+ --wp-admin-theme-color-darker-10: rgb(151.2684729064, 86.5640394089, 26.2315270936);
199
+ --wp-admin-theme-color-darker-10--rgb: 151.2684729064, 86.5640394089, 26.2315270936;
200
+ --wp-admin-theme-color-darker-20: rgb(129.5369458128, 74.1280788177, 22.4630541872);
201
+ --wp-admin-theme-color-darker-20--rgb: 129.5369458128, 74.1280788177, 22.4630541872;
202
202
  --wp-admin-border-width-focus: 2px;
203
203
  }
204
204
  @media (min-resolution: 192dpi) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/base-styles",
3
- "version": "9.1.0",
3
+ "version": "10.0.1",
4
4
  "description": "Base SCSS utilities and variables for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -33,7 +33,6 @@
33
33
  "./animations": "./_animations.scss",
34
34
  "./breakpoints": "./_breakpoints.scss",
35
35
  "./colors": "./_colors.scss",
36
- "./colors.native": "./_colors.native.scss",
37
36
  "./default-custom-properties": "./_default-custom-properties.scss",
38
37
  "./functions": "./_functions.scss",
39
38
  "./long-content-fade": "./_long-content-fade.scss",
@@ -45,5 +44,5 @@
45
44
  "publishConfig": {
46
45
  "access": "public"
47
46
  },
48
- "gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
47
+ "gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
49
48
  }
package/_colors.native.scss DELETED
@@ -1,122 +0,0 @@
1
- /** @format */
2
-
3
- @use "sass:color";
4
-
5
- // Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
6
- $black: #000;
7
- $white: #fff;
8
-
9
- $light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
10
- $light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
11
-
12
- // Dark opacities, for use with light themes.
13
- $dark-opacity-900: rgba(#000510, 0.9);
14
- $dark-opacity-800: rgba(#00000a, 0.85);
15
- $dark-opacity-600: rgba(#000913, 0.75);
16
-
17
-
18
- // Light opacities, for use with dark themes.
19
- $light-opacity-700: rgba($white, 0.85);
20
- $light-opacity-200: rgba($white, 0.6);
21
- $light-opacity-light-100: rgba($white, 0.1);
22
- $light-opacity-light-700: rgba($white, 0.4);
23
-
24
-
25
- // Alert colors.
26
- $alert-yellow: #f0b849;
27
- $alert-red: #d94f4f;
28
- $alert-green: #4ab866;
29
- $red-30: #f86368;
30
- $red-40: #e65054;
31
- $red-50: #d63638;
32
-
33
- // Primary Accent (Blues)
34
- $blue-wordpress: #0087be;
35
- $blue-medium: #00aadc;
36
- $blue-60: #055d9c;
37
- $blue-500: #016087;
38
- // Primary tint color (light)
39
- $blue-50: #2271b1;
40
- $blue-40: #1689db;
41
- // Primary tint color (dark)
42
- $blue-30: #5198d9;
43
-
44
- // Grays
45
- $gray: #87a6bc;
46
- $gray-light: color.adjust($gray, $lightness: 33%); //#f3f6f8
47
- $gray-dark: color.adjust($gray, $lightness: -38%); //#2e4453
48
- $gray-900: #1a1a1a;
49
- $gray-700: #757575;
50
-
51
- // $gray-text: ideal for standard, non placeholder text
52
- // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
53
- $gray-text: $gray-dark;
54
- $gray-text-min: color.adjust($gray, $lightness: -18%); //#537994
55
-
56
- // Shades of gray
57
- $gray-lighten-10: color.adjust($gray, $lightness: 10%); // #a8bece
58
- $gray-lighten-20: color.adjust($gray, $lightness: 20%); // #c8d7e1
59
- $gray-lighten-30: color.adjust($gray, $lightness: 30%); // #e9eff3
60
- $gray-darken-10: color.adjust($gray, $lightness: -10%);
61
- $gray-darken-20: color.adjust($gray, $lightness: -20%); // #4f748e
62
- $gray-darken-30: color.adjust($gray, $lightness: -30%); // #3d596d
63
-
64
- // Custom
65
- $toolbar-button: #7b9ab1;
66
- $toolbar-button-disabled: $gray-lighten-30;
67
-
68
- $background-dark-elevated: #2e2e2e;
69
- $background-dark-secondary: #1e2327;
70
-
71
- $button-fallback-bg: #595959;
72
-
73
- // color-studio
74
- $gray-0: #f6f7f7;
75
- $gray-5: #dcdcde;
76
- $gray-10: #c3c4c7;
77
- $gray-20: #a7aaad;
78
- $gray-30: #8e9196;
79
- $gray-40: #787c82;
80
- $gray-50: #646970;
81
- $gray-60: #50575e;
82
- $gray-70: #3c434a;
83
- $gray-80: #2c3338;
84
- $gray-90: #1d2327;
85
- $gray-100: #101517;
86
-
87
- $yellow-30: #deb100;
88
- $yellow-50: #9d6e00;
89
-
90
- // neutral (light) - black is a base color in light mode
91
- $light-primary: #000d; //rgba(0, 0, 0, 0.87);
92
- $light-secondary: #0009; //rgba(0, 0, 0, 0.6);
93
- $light-tertiary: #0000006d; //rgba(0, 0, 0, 0.43);
94
- $light-quaternary: #0000003f; //rgba(0, 0, 0, 0.25);
95
- $light-dim: #0000001e; //rgba(0, 0, 0, 0.12);
96
- $light-ultra-dim: #0000000a; //rgba(0, 0, 0, 0.04);
97
-
98
- // neutral (dark) - white is a base color in dark mode
99
- $dark-primary: #fffd; //rgba(255, 255, 255, 0.87);
100
- $dark-secondary: #fff9; //rgba(255, 255, 255, 0.6);
101
- $dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43);
102
- $dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25);
103
- $dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);
104
- $dark-dim: #ffffff1f; //rgba(255, 255, 255, 0.12)
105
-
106
- // Design Token colors
107
- $app-background: $white;
108
- $app-background-dark: $black;
109
- $app-background-dark-alt: $background-dark-elevated;
110
- $app-safe-area-background-dark: #141414;
111
-
112
- $modal-background: $white;
113
- $modal-background-dark: $background-dark-elevated;
114
-
115
- $sub-heading: $gray-text-min;
116
- $sub-heading-dark: $white;
117
- /**
118
- * Deprecated colors.
119
- * Please avoid using these.
120
- */
121
-
122
- $dark-gray-500: #555d66;