@wordpress/boot 0.11.0 → 0.12.0
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.
- package/build-module/components/root/index.mjs +3 -3
- package/build-module/components/root/index.mjs.map +2 -2
- package/build-module/components/root/single-page.mjs +3 -3
- package/build-module/components/root/single-page.mjs.map +2 -2
- package/build-module/components/save-panel/use-save-shortcut.mjs.map +2 -2
- package/build-module/index.mjs +3 -3
- package/build-module/index.mjs.map +2 -2
- package/build-style/style-rtl.css +385 -330
- package/build-style/style.css +385 -330
- package/build-types/components/save-panel/use-save-shortcut.d.ts.map +1 -1
- package/package.json +24 -24
- package/src/components/root/style.scss +1 -1
- package/src/components/save-panel/use-save-shortcut.ts +0 -1
- package/src/style.scss +0 -1
package/build-style/style.css
CHANGED
|
@@ -3,354 +3,409 @@
|
|
|
3
3
|
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
|
|
4
4
|
* ------------------------------------------- */
|
|
5
5
|
:root {
|
|
6
|
-
|
|
7
|
-
--wpds-border-radius-
|
|
8
|
-
|
|
9
|
-
--wpds-border-radius-
|
|
10
|
-
|
|
11
|
-
--wpds-border-
|
|
12
|
-
|
|
13
|
-
--wpds-border-
|
|
14
|
-
|
|
15
|
-
--wpds-
|
|
16
|
-
|
|
17
|
-
--wpds-
|
|
18
|
-
|
|
19
|
-
--wpds-
|
|
20
|
-
|
|
21
|
-
--wpds-
|
|
22
|
-
|
|
23
|
-
--wpds-
|
|
24
|
-
|
|
25
|
-
--wpds-color-bg-
|
|
26
|
-
|
|
27
|
-
--wpds-color-bg-
|
|
28
|
-
|
|
29
|
-
--wpds-color-bg-
|
|
30
|
-
|
|
31
|
-
--wpds-color-bg-surface-brand: #ecf0fa;
|
|
32
|
-
|
|
33
|
-
--wpds-color-bg-surface-
|
|
34
|
-
|
|
35
|
-
--wpds-color-bg-surface-
|
|
36
|
-
|
|
37
|
-
--wpds-color-bg-surface-info
|
|
38
|
-
|
|
39
|
-
--wpds-color-bg-surface-
|
|
40
|
-
|
|
41
|
-
--wpds-color-bg-surface-
|
|
42
|
-
|
|
43
|
-
--wpds-color-bg-surface-warning: #
|
|
44
|
-
|
|
45
|
-
--wpds-color-bg-
|
|
46
|
-
|
|
47
|
-
--wpds-color-bg-
|
|
48
|
-
|
|
49
|
-
--wpds-color-bg-
|
|
50
|
-
|
|
51
|
-
--wpds-color-bg-
|
|
52
|
-
|
|
53
|
-
--wpds-color-
|
|
54
|
-
|
|
55
|
-
--wpds-color-
|
|
56
|
-
|
|
57
|
-
--wpds-color-
|
|
58
|
-
|
|
59
|
-
--wpds-color-
|
|
60
|
-
|
|
61
|
-
--wpds-color-
|
|
62
|
-
|
|
63
|
-
--wpds-color-
|
|
64
|
-
|
|
65
|
-
--wpds-color-
|
|
66
|
-
|
|
67
|
-
--wpds-color-
|
|
68
|
-
|
|
69
|
-
--wpds-color-
|
|
70
|
-
|
|
71
|
-
--wpds-color-
|
|
72
|
-
|
|
73
|
-
--wpds-color-
|
|
74
|
-
|
|
75
|
-
--wpds-color-
|
|
76
|
-
|
|
77
|
-
--wpds-color-
|
|
78
|
-
|
|
79
|
-
--wpds-color-
|
|
80
|
-
|
|
81
|
-
--wpds-color-
|
|
82
|
-
|
|
83
|
-
--wpds-color-
|
|
84
|
-
|
|
85
|
-
--wpds-color-
|
|
86
|
-
|
|
87
|
-
--wpds-color-
|
|
88
|
-
|
|
89
|
-
--wpds-color-
|
|
90
|
-
|
|
91
|
-
--wpds-color-
|
|
92
|
-
|
|
93
|
-
--wpds-color-
|
|
94
|
-
|
|
95
|
-
--wpds-color-
|
|
96
|
-
|
|
97
|
-
--wpds-color-
|
|
98
|
-
|
|
99
|
-
--wpds-color-
|
|
100
|
-
|
|
101
|
-
--wpds-color-
|
|
102
|
-
|
|
103
|
-
--wpds-
|
|
104
|
-
|
|
105
|
-
--wpds-
|
|
106
|
-
|
|
107
|
-
--wpds-
|
|
108
|
-
|
|
109
|
-
--wpds-
|
|
110
|
-
|
|
111
|
-
--wpds-
|
|
112
|
-
|
|
113
|
-
--wpds-
|
|
114
|
-
|
|
115
|
-
--wpds-
|
|
116
|
-
|
|
117
|
-
--wpds-
|
|
118
|
-
|
|
119
|
-
--wpds-
|
|
120
|
-
|
|
121
|
-
--wpds-
|
|
122
|
-
|
|
123
|
-
--wpds-
|
|
124
|
-
|
|
125
|
-
--wpds-
|
|
126
|
-
|
|
127
|
-
--wpds-
|
|
128
|
-
|
|
129
|
-
--wpds-
|
|
130
|
-
|
|
6
|
+
/* Extra small radius */
|
|
7
|
+
--wpds-border-radius-xs: 1px;
|
|
8
|
+
/* Small radius */
|
|
9
|
+
--wpds-border-radius-sm: 2px;
|
|
10
|
+
/* Medium radius */
|
|
11
|
+
--wpds-border-radius-md: 4px;
|
|
12
|
+
/* Large radius */
|
|
13
|
+
--wpds-border-radius-lg: 8px;
|
|
14
|
+
/* Extra small width */
|
|
15
|
+
--wpds-border-width-xs: 1px;
|
|
16
|
+
/* Small width */
|
|
17
|
+
--wpds-border-width-sm: 2px;
|
|
18
|
+
/* Medium width */
|
|
19
|
+
--wpds-border-width-md: 4px;
|
|
20
|
+
/* Large width */
|
|
21
|
+
--wpds-border-width-lg: 8px;
|
|
22
|
+
/* Border width for focus ring */
|
|
23
|
+
--wpds-border-width-focus: 2px;
|
|
24
|
+
/* Background color for surfaces with normal emphasis. */
|
|
25
|
+
--wpds-color-bg-surface-neutral: #fcfcfc;
|
|
26
|
+
/* Background color for surfaces with strong emphasis. */
|
|
27
|
+
--wpds-color-bg-surface-neutral-strong: #fff;
|
|
28
|
+
/* Background color for surfaces with weak emphasis. */
|
|
29
|
+
--wpds-color-bg-surface-neutral-weak: #f4f4f4;
|
|
30
|
+
/* Background color for surfaces with brand tone and normal emphasis. */
|
|
31
|
+
--wpds-color-bg-surface-brand: #ecf0fa;
|
|
32
|
+
/* Background color for surfaces with success tone and normal emphasis. */
|
|
33
|
+
--wpds-color-bg-surface-success: #c6f7cd;
|
|
34
|
+
/* Background color for surfaces with success tone and weak emphasis. */
|
|
35
|
+
--wpds-color-bg-surface-success-weak: #ebffed;
|
|
36
|
+
/* Background color for surfaces with info tone and normal emphasis. */
|
|
37
|
+
--wpds-color-bg-surface-info: #deebfa;
|
|
38
|
+
/* Background color for surfaces with info tone and weak emphasis. */
|
|
39
|
+
--wpds-color-bg-surface-info-weak: #f3f9ff;
|
|
40
|
+
/* Background color for surfaces with warning tone and normal emphasis. */
|
|
41
|
+
--wpds-color-bg-surface-warning: #fde6be;
|
|
42
|
+
/* Background color for surfaces with warning tone and weak emphasis. */
|
|
43
|
+
--wpds-color-bg-surface-warning-weak: #fff7e1;
|
|
44
|
+
/* Background color for surfaces with caution tone and normal emphasis. */
|
|
45
|
+
--wpds-color-bg-surface-caution: #fee995;
|
|
46
|
+
/* Background color for surfaces with caution tone and weak emphasis. */
|
|
47
|
+
--wpds-color-bg-surface-caution-weak: #fff9ca;
|
|
48
|
+
/* Background color for surfaces with error tone and normal emphasis. */
|
|
49
|
+
--wpds-color-bg-surface-error: #f6e6e3;
|
|
50
|
+
/* Background color for surfaces with error tone and weak emphasis. */
|
|
51
|
+
--wpds-color-bg-surface-error-weak: #fff6f5;
|
|
52
|
+
/* Background color for interactive elements with neutral tone and strong emphasis. */
|
|
53
|
+
--wpds-color-bg-interactive-neutral-strong: #2d2d2d;
|
|
54
|
+
/* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
|
|
55
|
+
--wpds-color-bg-interactive-neutral-strong-active: #1e1e1e;
|
|
56
|
+
/* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
|
|
57
|
+
--wpds-color-bg-interactive-neutral-strong-disabled: #e6e6e6;
|
|
58
|
+
/* Background color for interactive elements with neutral tone and weak emphasis. */
|
|
59
|
+
--wpds-color-bg-interactive-neutral-weak: #0000;
|
|
60
|
+
/* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
|
|
61
|
+
--wpds-color-bg-interactive-neutral-weak-active: #ededed;
|
|
62
|
+
/* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
|
|
63
|
+
--wpds-color-bg-interactive-neutral-weak-disabled: #0000;
|
|
64
|
+
/* Background color for interactive elements with brand tone and strong emphasis. */
|
|
65
|
+
--wpds-color-bg-interactive-brand-strong: #3858e9;
|
|
66
|
+
/* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
|
|
67
|
+
--wpds-color-bg-interactive-brand-strong-active: #2e49d9;
|
|
68
|
+
/* Background color for interactive elements with brand tone and weak emphasis. */
|
|
69
|
+
--wpds-color-bg-interactive-brand-weak: #0000;
|
|
70
|
+
/* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
|
|
71
|
+
--wpds-color-bg-interactive-brand-weak-active: #e6eaf4;
|
|
72
|
+
/* Background color for interactive elements with error tone and normal emphasis. */
|
|
73
|
+
--wpds-color-bg-interactive-error: #0000;
|
|
74
|
+
/* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
|
|
75
|
+
--wpds-color-bg-interactive-error-active: #fff6f5;
|
|
76
|
+
/* Background color for interactive elements with error tone and strong emphasis. */
|
|
77
|
+
--wpds-color-bg-interactive-error-strong: #cc1818;
|
|
78
|
+
/* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
|
|
79
|
+
--wpds-color-bg-interactive-error-strong-active: #b90000;
|
|
80
|
+
/* Background color for interactive elements with error tone and weak emphasis. */
|
|
81
|
+
--wpds-color-bg-interactive-error-weak: #0000;
|
|
82
|
+
/* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
|
|
83
|
+
--wpds-color-bg-interactive-error-weak-active: #f6e6e3;
|
|
84
|
+
/* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
|
|
85
|
+
--wpds-color-bg-track-neutral-weak: #e4e4e4;
|
|
86
|
+
/* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
|
|
87
|
+
--wpds-color-bg-track-neutral: #dbdbdb;
|
|
88
|
+
/* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
|
|
89
|
+
--wpds-color-bg-thumb-neutral-weak: #8d8d8d;
|
|
90
|
+
/* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
|
|
91
|
+
--wpds-color-bg-thumb-neutral-weak-active: #6e6e6e;
|
|
92
|
+
/* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
|
|
93
|
+
--wpds-color-bg-thumb-brand: #3858e9;
|
|
94
|
+
/* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
|
|
95
|
+
--wpds-color-bg-thumb-brand-active: #3858e9;
|
|
96
|
+
/* Background color for thumbs with normal emphasis (eg. slider thumb and filled track), in their disabled state, regardless of the tone. */
|
|
97
|
+
--wpds-color-bg-thumb-neutral-disabled: #dbdbdb;
|
|
98
|
+
/* Foreground color for content like text with normal emphasis. */
|
|
99
|
+
--wpds-color-fg-content-neutral: #1e1e1e;
|
|
100
|
+
/* Foreground color for content like text with weak emphasis. */
|
|
101
|
+
--wpds-color-fg-content-neutral-weak: #707070;
|
|
102
|
+
/* Foreground color for content like text with success tone and normal emphasis. */
|
|
103
|
+
--wpds-color-fg-content-success: #002900;
|
|
104
|
+
/* Foreground color for content like text with success tone and weak emphasis. */
|
|
105
|
+
--wpds-color-fg-content-success-weak: #008030;
|
|
106
|
+
/* Foreground color for content like text with info tone and normal emphasis. */
|
|
107
|
+
--wpds-color-fg-content-info: #001b4f;
|
|
108
|
+
/* Foreground color for content like text with info tone and weak emphasis. */
|
|
109
|
+
--wpds-color-fg-content-info-weak: #006bd7;
|
|
110
|
+
/* Foreground color for content like text with warning tone and normal emphasis. */
|
|
111
|
+
--wpds-color-fg-content-warning: #2e1900;
|
|
112
|
+
/* Foreground color for content like text with warning tone and weak emphasis. */
|
|
113
|
+
--wpds-color-fg-content-warning-weak: #926300;
|
|
114
|
+
/* Foreground color for content like text with caution tone and normal emphasis. */
|
|
115
|
+
--wpds-color-fg-content-caution: #281d00;
|
|
116
|
+
/* Foreground color for content like text with caution tone and weak emphasis. */
|
|
117
|
+
--wpds-color-fg-content-caution-weak: #826a00;
|
|
118
|
+
/* Foreground color for content like text with error tone and normal emphasis. */
|
|
119
|
+
--wpds-color-fg-content-error: #470000;
|
|
120
|
+
/* Foreground color for content like text with error tone and weak emphasis. */
|
|
121
|
+
--wpds-color-fg-content-error-weak: #cc1818;
|
|
122
|
+
/* Foreground color for interactive elements with neutral tone and normal emphasis. */
|
|
123
|
+
--wpds-color-fg-interactive-neutral: #1e1e1e;
|
|
124
|
+
/* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
|
|
125
|
+
--wpds-color-fg-interactive-neutral-active: #1e1e1e;
|
|
126
|
+
/* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
|
|
127
|
+
--wpds-color-fg-interactive-neutral-disabled: #8d8d8d;
|
|
128
|
+
/* Foreground color for interactive elements with neutral tone and strong emphasis. */
|
|
129
|
+
--wpds-color-fg-interactive-neutral-strong: #f0f0f0;
|
|
130
|
+
/* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
|
|
131
|
+
--wpds-color-fg-interactive-neutral-strong-active: #f0f0f0;
|
|
132
|
+
/* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
|
|
133
|
+
--wpds-color-fg-interactive-neutral-strong-disabled: #8d8d8d;
|
|
134
|
+
/* Foreground color for interactive elements with neutral tone and weak emphasis. */
|
|
135
|
+
--wpds-color-fg-interactive-neutral-weak: #707070;
|
|
136
|
+
/* Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
|
|
137
|
+
--wpds-color-fg-interactive-neutral-weak-disabled: #8d8d8d;
|
|
138
|
+
/* Foreground color for interactive elements with brand tone and normal emphasis. */
|
|
139
|
+
--wpds-color-fg-interactive-brand: #3858e9;
|
|
140
|
+
/* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
|
|
141
|
+
--wpds-color-fg-interactive-brand-active: #3858e9;
|
|
142
|
+
/* Foreground color for interactive elements with brand tone and strong emphasis. */
|
|
143
|
+
--wpds-color-fg-interactive-brand-strong: #eff0f2;
|
|
144
|
+
/* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
|
|
145
|
+
--wpds-color-fg-interactive-brand-strong-active: #eff0f2;
|
|
146
|
+
/* Foreground color for interactive elements with error tone and normal emphasis. */
|
|
147
|
+
--wpds-color-fg-interactive-error: #cc1818;
|
|
148
|
+
/* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
|
|
149
|
+
--wpds-color-fg-interactive-error-active: #cc1818;
|
|
150
|
+
/* Foreground color for interactive elements with error tone and strong emphasis. */
|
|
151
|
+
--wpds-color-fg-interactive-error-strong: #f2efef;
|
|
152
|
+
/* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
|
|
153
|
+
--wpds-color-fg-interactive-error-strong-active: #f2efef;
|
|
154
|
+
/* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
|
|
155
|
+
--wpds-color-stroke-surface-neutral: #dbdbdb;
|
|
156
|
+
/* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
|
|
157
|
+
--wpds-color-stroke-surface-neutral-weak: #e4e4e4;
|
|
158
|
+
/* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
|
|
159
|
+
--wpds-color-stroke-surface-neutral-strong: #8d8d8d;
|
|
160
|
+
/* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
|
|
161
|
+
--wpds-color-stroke-surface-brand: #a3b1d4;
|
|
162
|
+
/* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
|
|
163
|
+
--wpds-color-stroke-surface-brand-strong: #3858e9;
|
|
164
|
+
/* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
|
|
165
|
+
--wpds-color-stroke-surface-success: #8ac894;
|
|
166
|
+
/* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
|
|
167
|
+
--wpds-color-stroke-surface-success-strong: #008030;
|
|
168
|
+
/* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
|
|
169
|
+
--wpds-color-stroke-surface-info: #9fbcdc;
|
|
170
|
+
/* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
|
|
171
|
+
--wpds-color-stroke-surface-info-strong: #006bd7;
|
|
172
|
+
/* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
|
|
173
|
+
--wpds-color-stroke-surface-warning: #d0b481;
|
|
174
|
+
/* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
|
|
175
|
+
--wpds-color-stroke-surface-warning-strong: #926300;
|
|
176
|
+
/* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
|
|
177
|
+
--wpds-color-stroke-surface-error: #daa39b;
|
|
178
|
+
/* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
|
|
179
|
+
--wpds-color-stroke-surface-error-strong: #cc1818;
|
|
180
|
+
/* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
|
|
181
|
+
--wpds-color-stroke-interactive-neutral: #8d8d8d;
|
|
182
|
+
/* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
|
|
183
|
+
--wpds-color-stroke-interactive-neutral-active: #6e6e6e;
|
|
184
|
+
/* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
|
|
185
|
+
--wpds-color-stroke-interactive-neutral-disabled: #dbdbdb;
|
|
186
|
+
/* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
|
|
187
|
+
--wpds-color-stroke-interactive-neutral-strong: #6e6e6e;
|
|
188
|
+
/* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
|
|
189
|
+
--wpds-color-stroke-interactive-brand: #3858e9;
|
|
190
|
+
/* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
|
|
191
|
+
--wpds-color-stroke-interactive-brand-active: #2337c8;
|
|
192
|
+
/* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
|
|
193
|
+
--wpds-color-stroke-interactive-error: #cc1818;
|
|
194
|
+
/* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
|
|
195
|
+
--wpds-color-stroke-interactive-error-active: #9d0000;
|
|
196
|
+
/* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
|
|
197
|
+
--wpds-color-stroke-interactive-error-strong: #cc1818;
|
|
198
|
+
/* Accessible stroke color applied to focus rings. */
|
|
199
|
+
--wpds-color-stroke-focus-brand: #3858e9;
|
|
200
|
+
/* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
|
|
201
|
+
--wpds-cursor-control: pointer;
|
|
202
|
+
/* Base dimension unit */
|
|
203
|
+
--wpds-dimension-base: 4px;
|
|
204
|
+
/* Extra small padding */
|
|
205
|
+
--wpds-dimension-padding-xs: 4px;
|
|
206
|
+
/* Small padding */
|
|
207
|
+
--wpds-dimension-padding-sm: 8px;
|
|
208
|
+
/* Medium padding */
|
|
209
|
+
--wpds-dimension-padding-md: 12px;
|
|
210
|
+
/* Large padding */
|
|
211
|
+
--wpds-dimension-padding-lg: 16px;
|
|
212
|
+
/* Extra large padding */
|
|
213
|
+
--wpds-dimension-padding-xl: 20px;
|
|
214
|
+
/* 2x extra large padding */
|
|
215
|
+
--wpds-dimension-padding-2xl: 24px;
|
|
216
|
+
/* 3x extra large padding */
|
|
217
|
+
--wpds-dimension-padding-3xl: 32px;
|
|
218
|
+
/* Extra small gap */
|
|
219
|
+
--wpds-dimension-gap-xs: 4px;
|
|
220
|
+
/* Small gap */
|
|
221
|
+
--wpds-dimension-gap-sm: 8px;
|
|
222
|
+
/* Medium gap */
|
|
223
|
+
--wpds-dimension-gap-md: 12px;
|
|
224
|
+
/* Large gap */
|
|
225
|
+
--wpds-dimension-gap-lg: 16px;
|
|
226
|
+
/* Extra large gap */
|
|
227
|
+
--wpds-dimension-gap-xl: 24px;
|
|
228
|
+
/* 2x extra large gap */
|
|
229
|
+
--wpds-dimension-gap-2xl: 32px;
|
|
230
|
+
/* 3x extra large gap */
|
|
231
|
+
--wpds-dimension-gap-3xl: 40px;
|
|
232
|
+
/* Extra small surface width */
|
|
233
|
+
--wpds-dimension-surface-width-xs: 240px;
|
|
234
|
+
/* Small surface width */
|
|
235
|
+
--wpds-dimension-surface-width-sm: 320px;
|
|
236
|
+
/* Medium surface width */
|
|
237
|
+
--wpds-dimension-surface-width-md: 400px;
|
|
238
|
+
/* Large surface width */
|
|
239
|
+
--wpds-dimension-surface-width-lg: 560px;
|
|
240
|
+
/* Extra large surface width */
|
|
241
|
+
--wpds-dimension-surface-width-xl: 720px;
|
|
242
|
+
/* 2x extra large surface width */
|
|
243
|
+
--wpds-dimension-surface-width-2xl: 960px;
|
|
244
|
+
/* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */
|
|
131
245
|
--wpds-elevation-xs: 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005,
|
|
132
|
-
0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003;
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
246
|
+
0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003;
|
|
247
|
+
/* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */
|
|
248
|
+
--wpds-elevation-sm: 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a,
|
|
249
|
+
0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005;
|
|
250
|
+
/* For components that offer additional actions. Example: Menus, Command Palette */
|
|
251
|
+
--wpds-elevation-md: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
|
|
252
|
+
0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005;
|
|
253
|
+
/* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
|
|
254
|
+
--wpds-elevation-lg: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
|
|
255
|
+
0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005;
|
|
256
|
+
/* Headings font family */
|
|
136
257
|
--wpds-typography-font-family-heading: -apple-system, system-ui, 'Segoe UI',
|
|
137
258
|
'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
|
|
138
|
-
sans-serif;
|
|
139
|
-
|
|
140
|
-
--wpds-typography-font-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
--wpds-typography-font-
|
|
145
|
-
|
|
146
|
-
--wpds-typography-font-
|
|
147
|
-
|
|
148
|
-
--wpds-typography-
|
|
149
|
-
|
|
150
|
-
--wpds-typography-
|
|
151
|
-
|
|
152
|
-
--wpds-typography-
|
|
153
|
-
|
|
259
|
+
sans-serif;
|
|
260
|
+
/* Body font family */
|
|
261
|
+
--wpds-typography-font-family-body: -apple-system, system-ui, 'Segoe UI',
|
|
262
|
+
'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
|
|
263
|
+
sans-serif;
|
|
264
|
+
/* Monospace font family */
|
|
265
|
+
--wpds-typography-font-family-mono: 'Menlo', 'Consolas', monaco, monospace;
|
|
266
|
+
/* Extra small font size */
|
|
267
|
+
--wpds-typography-font-size-xs: 11px;
|
|
268
|
+
/* Small font size */
|
|
269
|
+
--wpds-typography-font-size-sm: 12px;
|
|
270
|
+
/* Medium font size */
|
|
271
|
+
--wpds-typography-font-size-md: 13px;
|
|
272
|
+
/* Large font size */
|
|
273
|
+
--wpds-typography-font-size-lg: 15px;
|
|
274
|
+
/* Extra large font size */
|
|
275
|
+
--wpds-typography-font-size-xl: 20px;
|
|
276
|
+
/* 2X large font size */
|
|
277
|
+
--wpds-typography-font-size-2xl: 32px;
|
|
278
|
+
/* Extra small line height */
|
|
279
|
+
--wpds-typography-line-height-xs: 16px;
|
|
280
|
+
/* Small line height */
|
|
281
|
+
--wpds-typography-line-height-sm: 20px;
|
|
282
|
+
/* Medium line height */
|
|
283
|
+
--wpds-typography-line-height-md: 24px;
|
|
284
|
+
/* Large line height */
|
|
285
|
+
--wpds-typography-line-height-lg: 28px;
|
|
286
|
+
/* Extra large line height */
|
|
287
|
+
--wpds-typography-line-height-xl: 32px;
|
|
288
|
+
/* 2X large line height */
|
|
289
|
+
--wpds-typography-line-height-2xl: 40px;
|
|
290
|
+
/* Regular font weight for body text */
|
|
291
|
+
--wpds-typography-font-weight-regular: 400;
|
|
292
|
+
/* Medium font weight for emphasis and headings */
|
|
293
|
+
--wpds-typography-font-weight-medium: 499;
|
|
154
294
|
}
|
|
155
295
|
|
|
156
296
|
[data-wpds-theme-provider-id][data-wpds-density=compact] {
|
|
157
|
-
|
|
158
|
-
--wpds-dimension-
|
|
159
|
-
|
|
160
|
-
--wpds-dimension-
|
|
161
|
-
|
|
162
|
-
--wpds-dimension-
|
|
163
|
-
|
|
164
|
-
--wpds-dimension-padding-
|
|
165
|
-
|
|
166
|
-
--wpds-dimension-padding-
|
|
167
|
-
|
|
168
|
-
--wpds-dimension-padding-
|
|
169
|
-
|
|
170
|
-
--wpds-dimension-padding-
|
|
297
|
+
/* Extra small padding */
|
|
298
|
+
--wpds-dimension-padding-xs: 4px;
|
|
299
|
+
/* Small padding */
|
|
300
|
+
--wpds-dimension-padding-sm: 4px;
|
|
301
|
+
/* Medium padding */
|
|
302
|
+
--wpds-dimension-padding-md: 8px;
|
|
303
|
+
/* Large padding */
|
|
304
|
+
--wpds-dimension-padding-lg: 12px;
|
|
305
|
+
/* Extra large padding */
|
|
306
|
+
--wpds-dimension-padding-xl: 16px;
|
|
307
|
+
/* 2x extra large padding */
|
|
308
|
+
--wpds-dimension-padding-2xl: 20px;
|
|
309
|
+
/* 3x extra large padding */
|
|
310
|
+
--wpds-dimension-padding-3xl: 24px;
|
|
311
|
+
/* Extra small gap */
|
|
312
|
+
--wpds-dimension-gap-xs: 4px;
|
|
313
|
+
/* Small gap */
|
|
314
|
+
--wpds-dimension-gap-sm: 4px;
|
|
315
|
+
/* Medium gap */
|
|
316
|
+
--wpds-dimension-gap-md: 8px;
|
|
317
|
+
/* Large gap */
|
|
318
|
+
--wpds-dimension-gap-lg: 12px;
|
|
319
|
+
/* Extra large gap */
|
|
320
|
+
--wpds-dimension-gap-xl: 20px;
|
|
321
|
+
/* 2x extra large gap */
|
|
322
|
+
--wpds-dimension-gap-2xl: 24px;
|
|
323
|
+
/* 3x extra large gap */
|
|
324
|
+
--wpds-dimension-gap-3xl: 32px;
|
|
171
325
|
}
|
|
172
326
|
|
|
173
327
|
[data-wpds-theme-provider-id][data-wpds-density=comfortable] {
|
|
174
|
-
|
|
175
|
-
--wpds-dimension-
|
|
176
|
-
|
|
177
|
-
--wpds-dimension-
|
|
178
|
-
|
|
179
|
-
--wpds-dimension-
|
|
180
|
-
|
|
181
|
-
--wpds-dimension-padding-
|
|
182
|
-
|
|
183
|
-
--wpds-dimension-padding-
|
|
184
|
-
|
|
185
|
-
--wpds-dimension-padding-
|
|
186
|
-
|
|
187
|
-
--wpds-dimension-padding-
|
|
328
|
+
/* Extra small padding */
|
|
329
|
+
--wpds-dimension-padding-xs: 8px;
|
|
330
|
+
/* Small padding */
|
|
331
|
+
--wpds-dimension-padding-sm: 12px;
|
|
332
|
+
/* Medium padding */
|
|
333
|
+
--wpds-dimension-padding-md: 16px;
|
|
334
|
+
/* Large padding */
|
|
335
|
+
--wpds-dimension-padding-lg: 20px;
|
|
336
|
+
/* Extra large padding */
|
|
337
|
+
--wpds-dimension-padding-xl: 24px;
|
|
338
|
+
/* 2x extra large padding */
|
|
339
|
+
--wpds-dimension-padding-2xl: 32px;
|
|
340
|
+
/* 3x extra large padding */
|
|
341
|
+
--wpds-dimension-padding-3xl: 40px;
|
|
342
|
+
/* Extra small gap */
|
|
343
|
+
--wpds-dimension-gap-xs: 8px;
|
|
344
|
+
/* Small gap */
|
|
345
|
+
--wpds-dimension-gap-sm: 12px;
|
|
346
|
+
/* Medium gap */
|
|
347
|
+
--wpds-dimension-gap-md: 16px;
|
|
348
|
+
/* Large gap */
|
|
349
|
+
--wpds-dimension-gap-lg: 20px;
|
|
350
|
+
/* Extra large gap */
|
|
351
|
+
--wpds-dimension-gap-xl: 32px;
|
|
352
|
+
/* 2x extra large gap */
|
|
353
|
+
--wpds-dimension-gap-2xl: 40px;
|
|
354
|
+
/* 3x extra large gap */
|
|
355
|
+
--wpds-dimension-gap-3xl: 48px;
|
|
188
356
|
}
|
|
189
357
|
|
|
190
358
|
[data-wpds-theme-provider-id][data-wpds-density=default] {
|
|
191
|
-
|
|
192
|
-
--wpds-dimension-
|
|
193
|
-
|
|
194
|
-
--wpds-dimension-
|
|
195
|
-
|
|
196
|
-
--wpds-dimension-
|
|
197
|
-
|
|
198
|
-
--wpds-dimension-
|
|
199
|
-
|
|
200
|
-
--wpds-dimension-padding-
|
|
201
|
-
|
|
202
|
-
--wpds-dimension-padding-
|
|
203
|
-
|
|
204
|
-
--wpds-dimension-padding-
|
|
205
|
-
|
|
206
|
-
--wpds-dimension-
|
|
207
|
-
|
|
208
|
-
--wpds-dimension-
|
|
209
|
-
|
|
210
|
-
--wpds-dimension-
|
|
211
|
-
|
|
359
|
+
/* Base dimension unit */
|
|
360
|
+
--wpds-dimension-base: 4px;
|
|
361
|
+
/* Extra small padding */
|
|
362
|
+
--wpds-dimension-padding-xs: 4px;
|
|
363
|
+
/* Small padding */
|
|
364
|
+
--wpds-dimension-padding-sm: 8px;
|
|
365
|
+
/* Medium padding */
|
|
366
|
+
--wpds-dimension-padding-md: 12px;
|
|
367
|
+
/* Large padding */
|
|
368
|
+
--wpds-dimension-padding-lg: 16px;
|
|
369
|
+
/* Extra large padding */
|
|
370
|
+
--wpds-dimension-padding-xl: 20px;
|
|
371
|
+
/* 2x extra large padding */
|
|
372
|
+
--wpds-dimension-padding-2xl: 24px;
|
|
373
|
+
/* 3x extra large padding */
|
|
374
|
+
--wpds-dimension-padding-3xl: 32px;
|
|
375
|
+
/* Extra small gap */
|
|
376
|
+
--wpds-dimension-gap-xs: 4px;
|
|
377
|
+
/* Small gap */
|
|
378
|
+
--wpds-dimension-gap-sm: 8px;
|
|
379
|
+
/* Medium gap */
|
|
380
|
+
--wpds-dimension-gap-md: 12px;
|
|
381
|
+
/* Large gap */
|
|
382
|
+
--wpds-dimension-gap-lg: 16px;
|
|
383
|
+
/* Extra large gap */
|
|
384
|
+
--wpds-dimension-gap-xl: 24px;
|
|
385
|
+
/* 2x extra large gap */
|
|
386
|
+
--wpds-dimension-gap-2xl: 32px;
|
|
387
|
+
/* 3x extra large gap */
|
|
388
|
+
--wpds-dimension-gap-3xl: 40px;
|
|
389
|
+
/* Extra small surface width */
|
|
390
|
+
--wpds-dimension-surface-width-xs: 240px;
|
|
391
|
+
/* Small surface width */
|
|
392
|
+
--wpds-dimension-surface-width-sm: 320px;
|
|
393
|
+
/* Medium surface width */
|
|
394
|
+
--wpds-dimension-surface-width-md: 400px;
|
|
395
|
+
/* Large surface width */
|
|
396
|
+
--wpds-dimension-surface-width-lg: 560px;
|
|
397
|
+
/* Extra large surface width */
|
|
398
|
+
--wpds-dimension-surface-width-xl: 720px;
|
|
399
|
+
/* 2x extra large surface width */
|
|
400
|
+
--wpds-dimension-surface-width-2xl: 960px;
|
|
212
401
|
}
|
|
213
402
|
|
|
214
403
|
@media (min-resolution: 192dpi) {
|
|
215
404
|
:root {
|
|
216
|
-
|
|
405
|
+
/* Border width for focus ring */
|
|
406
|
+
--wpds-border-width-focus: 1.5px;
|
|
217
407
|
}
|
|
218
408
|
}
|
|
219
|
-
.admin-ui-page {
|
|
220
|
-
display: flex;
|
|
221
|
-
height: 100%;
|
|
222
|
-
background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
|
|
223
|
-
color: var(--wpds-color-fg-content-neutral, #1e1e1e);
|
|
224
|
-
position: relative;
|
|
225
|
-
z-index: 1;
|
|
226
|
-
flex-flow: column;
|
|
227
|
-
text-wrap: pretty;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.admin-ui-page__header {
|
|
231
|
-
padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
|
|
232
|
-
border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4);
|
|
233
|
-
background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
|
|
234
|
-
position: sticky;
|
|
235
|
-
top: 0;
|
|
236
|
-
z-index: 1;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.admin-ui-page__header-title {
|
|
240
|
-
font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
|
|
241
|
-
font-size: var(--wpds-typography-font-size-lg, 15px);
|
|
242
|
-
font-weight: var(--wpds-typography-font-weight-medium, 499);
|
|
243
|
-
line-height: var(--wpds-typography-line-height-lg, 28px);
|
|
244
|
-
margin: 0;
|
|
245
|
-
overflow: hidden;
|
|
246
|
-
text-overflow: ellipsis;
|
|
247
|
-
white-space: nowrap;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.admin-ui-page__sidebar-toggle-slot:empty {
|
|
251
|
-
display: none;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.admin-ui-page__header-subtitle {
|
|
255
|
-
padding-block-end: var(--wpds-dimension-padding-xs, 4px);
|
|
256
|
-
color: var(--wpds-color-fg-content-neutral-weak, #707070);
|
|
257
|
-
font-size: var(--wpds-typography-font-size-md, 13px);
|
|
258
|
-
line-height: var(--wpds-typography-line-height-md, 24px);
|
|
259
|
-
margin: 0;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.admin-ui-page__content {
|
|
263
|
-
flex-grow: 1;
|
|
264
|
-
overflow: auto;
|
|
265
|
-
display: flex;
|
|
266
|
-
flex-direction: column;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.admin-ui-page__content.has-padding {
|
|
270
|
-
padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
|
|
274
|
-
width: auto;
|
|
275
|
-
padding: 0 var(--wpds-dimension-padding-xs, 4px);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
|
|
279
|
-
display: none;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
|
|
283
|
-
content: attr(aria-label);
|
|
284
|
-
font-size: var(--wpds-typography-font-size-sm, 12px);
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* SCSS Variables.
|
|
289
|
-
*
|
|
290
|
-
* Please use variables from this sheet to ensure consistency across the UI.
|
|
291
|
-
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
|
292
|
-
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
|
293
|
-
*/
|
|
294
|
-
/**
|
|
295
|
-
* Colors
|
|
296
|
-
*/
|
|
297
|
-
/**
|
|
298
|
-
* Fonts & basic variables.
|
|
299
|
-
*/
|
|
300
|
-
/**
|
|
301
|
-
* Typography
|
|
302
|
-
*/
|
|
303
|
-
/**
|
|
304
|
-
* Grid System.
|
|
305
|
-
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
|
306
|
-
*/
|
|
307
|
-
/**
|
|
308
|
-
* Radius scale.
|
|
309
|
-
*/
|
|
310
|
-
/**
|
|
311
|
-
* Elevation scale.
|
|
312
|
-
*/
|
|
313
|
-
/**
|
|
314
|
-
* Dimensions.
|
|
315
|
-
*/
|
|
316
|
-
/**
|
|
317
|
-
* Mobile specific styles
|
|
318
|
-
*/
|
|
319
|
-
/**
|
|
320
|
-
* Editor styles.
|
|
321
|
-
*/
|
|
322
|
-
/**
|
|
323
|
-
* Block & Editor UI.
|
|
324
|
-
*/
|
|
325
|
-
/**
|
|
326
|
-
* Block paddings.
|
|
327
|
-
*/
|
|
328
|
-
/**
|
|
329
|
-
* React Native specific.
|
|
330
|
-
* These variables do not appear to be used anywhere else.
|
|
331
|
-
*/
|
|
332
|
-
.admin-ui-breadcrumbs__list {
|
|
333
|
-
font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
|
|
334
|
-
font-size: var(--wpds-typography-font-size-lg, 15px);
|
|
335
|
-
font-weight: var(--wpds-typography-font-weight-medium, 499);
|
|
336
|
-
line-height: var(--wpds-typography-line-height-lg, 28px);
|
|
337
|
-
list-style: none;
|
|
338
|
-
padding: 0;
|
|
339
|
-
margin: 0;
|
|
340
|
-
gap: 0;
|
|
341
|
-
min-height: 32px;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.admin-ui-breadcrumbs__list li:not(:last-child)::after {
|
|
345
|
-
content: "/";
|
|
346
|
-
margin: 0 8px;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
.admin-ui-breadcrumbs__list h1 {
|
|
350
|
-
font-size: inherit;
|
|
351
|
-
line-height: inherit;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
409
|
/**
|
|
355
410
|
* Typography
|
|
356
411
|
*/
|