@wordpress/boot 0.11.0 → 0.11.1-next.v.202604201441.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.
Files changed (13) hide show
  1. package/build-module/components/root/index.mjs +3 -3
  2. package/build-module/components/root/index.mjs.map +2 -2
  3. package/build-module/components/root/single-page.mjs +3 -3
  4. package/build-module/components/root/single-page.mjs.map +2 -2
  5. package/build-module/components/save-panel/use-save-shortcut.mjs.map +2 -2
  6. package/build-module/index.mjs +3 -3
  7. package/build-module/index.mjs.map +2 -2
  8. package/build-style/style-rtl.css +386 -210
  9. package/build-style/style.css +386 -210
  10. package/build-types/components/save-panel/use-save-shortcut.d.ts.map +1 -1
  11. package/package.json +24 -24
  12. package/src/components/root/style.scss +1 -1
  13. package/src/components/save-panel/use-save-shortcut.ts +0 -1
package/build-style/style-rtl.css CHANGED
@@ -3,217 +3,407 @@
3
3
  * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
4
4
  * ------------------------------------------- */
5
5
  :root {
6
- --wpds-border-radius-lg: 8px; /* Large radius */
7
- --wpds-border-radius-md: 4px; /* Medium radius */
8
- --wpds-border-radius-sm: 2px; /* Small radius */
9
- --wpds-border-radius-xs: 1px; /* Extra small radius */
10
- --wpds-border-width-focus: 2px; /* Border width for focus ring */
11
- --wpds-border-width-lg: 8px; /* Large width */
12
- --wpds-border-width-md: 4px; /* Medium width */
13
- --wpds-border-width-sm: 2px; /* Small width */
14
- --wpds-border-width-xs: 1px; /* Extra small width */
15
- --wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */
16
- --wpds-color-bg-interactive-brand-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
17
- --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
18
- --wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
19
- --wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
20
- --wpds-color-bg-interactive-error-active: #fff6f5; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
21
- --wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
22
- --wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
23
- --wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
24
- --wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
25
- --wpds-color-bg-interactive-neutral-strong: #2d2d2d; /* Background color for interactive elements with neutral tone and strong emphasis. */
26
- --wpds-color-bg-interactive-neutral-strong-active: #1e1e1e; /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
27
- --wpds-color-bg-interactive-neutral-strong-disabled: #e6e6e6; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */
28
- --wpds-color-bg-interactive-neutral-weak: #00000000; /* Background color for interactive elements with neutral tone and weak emphasis. */
29
- --wpds-color-bg-interactive-neutral-weak-active: #ededed; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
30
- --wpds-color-bg-interactive-neutral-weak-disabled: #00000000; /* Background color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
31
- --wpds-color-bg-surface-brand: #ecf0fa; /* Background color for surfaces with brand tone and normal emphasis. */
32
- --wpds-color-bg-surface-caution: #fee995; /* Background color for surfaces with caution tone and normal emphasis. */
33
- --wpds-color-bg-surface-caution-weak: #fff9ca; /* Background color for surfaces with caution tone and weak emphasis. */
34
- --wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */
35
- --wpds-color-bg-surface-error-weak: #fff6f5; /* Background color for surfaces with error tone and weak emphasis. */
36
- --wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
37
- --wpds-color-bg-surface-info-weak: #f3f9ff; /* Background color for surfaces with info tone and weak emphasis. */
38
- --wpds-color-bg-surface-neutral: #fcfcfc; /* Background color for surfaces with normal emphasis. */
39
- --wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
40
- --wpds-color-bg-surface-neutral-weak: #f4f4f4; /* Background color for surfaces with weak emphasis. */
41
- --wpds-color-bg-surface-success: #c6f7cd; /* Background color for surfaces with success tone and normal emphasis. */
42
- --wpds-color-bg-surface-success-weak: #ebffed; /* Background color for surfaces with success tone and weak emphasis. */
43
- --wpds-color-bg-surface-warning: #fde6be; /* Background color for surfaces with warning tone and normal emphasis. */
44
- --wpds-color-bg-surface-warning-weak: #fff7e1; /* Background color for surfaces with warning tone and weak emphasis. */
45
- --wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
46
- --wpds-color-bg-thumb-brand-active: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
47
- --wpds-color-bg-thumb-neutral-disabled: #dbdbdb; /* Background color for thumbs with normal emphasis (eg. slider thumb and filled track), in their disabled state, regardless of the tone. */
48
- --wpds-color-bg-thumb-neutral-weak: #8d8d8d; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
49
- --wpds-color-bg-thumb-neutral-weak-active: #6e6e6e; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */
50
- --wpds-color-bg-track-neutral: #dbdbdb; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
51
- --wpds-color-bg-track-neutral-weak: #e4e4e4; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
52
- --wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
53
- --wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */
54
- --wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */
55
- --wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */
56
- --wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */
57
- --wpds-color-fg-content-info-weak: #006bd7; /* Foreground color for content like text with info tone and weak emphasis. */
58
- --wpds-color-fg-content-neutral: #1e1e1e; /* Foreground color for content like text with normal emphasis. */
59
- --wpds-color-fg-content-neutral-weak: #707070; /* Foreground color for content like text with weak emphasis. */
60
- --wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */
61
- --wpds-color-fg-content-success-weak: #008030; /* Foreground color for content like text with success tone and weak emphasis. */
62
- --wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
63
- --wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */
64
- --wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */
65
- --wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
66
- --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
67
- --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
68
- --wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
69
- --wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
70
- --wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
71
- --wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
72
- --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
73
- --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
74
- --wpds-color-fg-interactive-neutral-disabled: #8d8d8d; /* Foreground color for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
75
- --wpds-color-fg-interactive-neutral-strong: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis. */
76
- --wpds-color-fg-interactive-neutral-strong-active: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */
77
- --wpds-color-fg-interactive-neutral-strong-disabled: #8d8d8d; /* Foreground color for interactive elements with strong emphasis, in their disabled state, regardless of the tone. */
78
- --wpds-color-fg-interactive-neutral-weak: #707070; /* Foreground color for interactive elements with neutral tone and weak emphasis. */
79
- --wpds-color-fg-interactive-neutral-weak-disabled: #8d8d8d; /* Foreground color for interactive elements with weak emphasis, in their disabled state, regardless of the tone. */
80
- --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
81
- --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
82
- --wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
83
- --wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
84
- --wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
85
- --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
86
- --wpds-color-stroke-interactive-neutral: #8d8d8d; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
87
- --wpds-color-stroke-interactive-neutral-active: #6e6e6e; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
88
- --wpds-color-stroke-interactive-neutral-disabled: #dbdbdb; /* Accessible stroke color used for interactive elements with normal emphasis, in their disabled state, regardless of the tone. */
89
- --wpds-color-stroke-interactive-neutral-strong: #6e6e6e; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
90
- --wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
91
- --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
92
- --wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
93
- --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
94
- --wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
95
- --wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
96
- --wpds-color-stroke-surface-neutral: #dbdbdb; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
97
- --wpds-color-stroke-surface-neutral-strong: #8d8d8d; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
98
- --wpds-color-stroke-surface-neutral-weak: #e4e4e4; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
99
- --wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
100
- --wpds-color-stroke-surface-success-strong: #008030; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
101
- --wpds-color-stroke-surface-warning: #d0b481; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
102
- --wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
103
- --wpds-cursor-control: pointer; /* Cursor style for interactive controls that are not links (e.g. buttons, checkboxes, and toggles). */
104
- --wpds-dimension-base: 4px; /* Base dimension unit */
105
- --wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
106
- --wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
107
- --wpds-dimension-gap-lg: 16px; /* Large gap */
108
- --wpds-dimension-gap-md: 12px; /* Medium gap */
109
- --wpds-dimension-gap-sm: 8px; /* Small gap */
110
- --wpds-dimension-gap-xl: 24px; /* Extra large gap */
111
- --wpds-dimension-gap-xs: 4px; /* Extra small gap */
112
- --wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
113
- --wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
114
- --wpds-dimension-padding-lg: 16px; /* Large padding */
115
- --wpds-dimension-padding-md: 12px; /* Medium padding */
116
- --wpds-dimension-padding-sm: 8px; /* Small padding */
117
- --wpds-dimension-padding-xl: 20px; /* Extra large padding */
118
- --wpds-dimension-padding-xs: 4px; /* Extra small padding */
119
- --wpds-dimension-surface-width-2xl: 960px; /* 2x extra large surface width */
120
- --wpds-dimension-surface-width-lg: 560px; /* Large surface width */
121
- --wpds-dimension-surface-width-md: 400px; /* Medium surface width */
122
- --wpds-dimension-surface-width-sm: 320px; /* Small surface width */
123
- --wpds-dimension-surface-width-xl: 720px; /* Extra large surface width */
124
- --wpds-dimension-surface-width-xs: 240px; /* Extra small surface width */
125
- --wpds-elevation-lg: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012,
126
- 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */
127
- --wpds-elevation-md: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a,
128
- 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005; /* For components that offer additional actions. Example: Menus, Command Palette */
129
- --wpds-elevation-sm: 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a,
130
- 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005; /* For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. */
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; /* For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. */
133
- --wpds-typography-font-family-body: -apple-system, system-ui, 'Segoe UI',
134
- 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue',
135
- sans-serif; /* Body font family */
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; /* Headings font family */
139
- --wpds-typography-font-family-mono: 'Menlo', 'Consolas', monaco, monospace; /* Monospace font family */
140
- --wpds-typography-font-size-2xl: 32px; /* 2X large font size */
141
- --wpds-typography-font-size-lg: 15px; /* Large font size */
142
- --wpds-typography-font-size-md: 13px; /* Medium font size */
143
- --wpds-typography-font-size-sm: 12px; /* Small font size */
144
- --wpds-typography-font-size-xl: 20px; /* Extra large font size */
145
- --wpds-typography-font-size-xs: 11px; /* Extra small font size */
146
- --wpds-typography-font-weight-medium: 499; /* Medium font weight for emphasis and headings */
147
- --wpds-typography-font-weight-regular: 400; /* Regular font weight for body text */
148
- --wpds-typography-line-height-2xl: 40px; /* 2X large line height */
149
- --wpds-typography-line-height-lg: 28px; /* Large line height */
150
- --wpds-typography-line-height-md: 24px; /* Medium line height */
151
- --wpds-typography-line-height-sm: 20px; /* Small line height */
152
- --wpds-typography-line-height-xl: 32px; /* Extra large line height */
153
- --wpds-typography-line-height-xs: 16px; /* Extra small line height */
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
- --wpds-dimension-gap-2xl: 24px; /* 2x extra large gap */
158
- --wpds-dimension-gap-3xl: 32px; /* 3x extra large gap */
159
- --wpds-dimension-gap-lg: 12px; /* Large gap */
160
- --wpds-dimension-gap-md: 8px; /* Medium gap */
161
- --wpds-dimension-gap-sm: 4px; /* Small gap */
162
- --wpds-dimension-gap-xl: 20px; /* Extra large gap */
163
- --wpds-dimension-gap-xs: 4px; /* Extra small gap */
164
- --wpds-dimension-padding-2xl: 20px; /* 2x extra large padding */
165
- --wpds-dimension-padding-3xl: 24px; /* 3x extra large padding */
166
- --wpds-dimension-padding-lg: 12px; /* Large padding */
167
- --wpds-dimension-padding-md: 8px; /* Medium padding */
168
- --wpds-dimension-padding-sm: 4px; /* Small padding */
169
- --wpds-dimension-padding-xl: 16px; /* Extra large padding */
170
- --wpds-dimension-padding-xs: 4px; /* Extra small 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
- --wpds-dimension-gap-2xl: 40px; /* 2x extra large gap */
175
- --wpds-dimension-gap-3xl: 48px; /* 3x extra large gap */
176
- --wpds-dimension-gap-lg: 20px; /* Large gap */
177
- --wpds-dimension-gap-md: 16px; /* Medium gap */
178
- --wpds-dimension-gap-sm: 12px; /* Small gap */
179
- --wpds-dimension-gap-xl: 32px; /* Extra large gap */
180
- --wpds-dimension-gap-xs: 8px; /* Extra small gap */
181
- --wpds-dimension-padding-2xl: 32px; /* 2x extra large padding */
182
- --wpds-dimension-padding-3xl: 40px; /* 3x extra large padding */
183
- --wpds-dimension-padding-lg: 20px; /* Large padding */
184
- --wpds-dimension-padding-md: 16px; /* Medium padding */
185
- --wpds-dimension-padding-sm: 12px; /* Small padding */
186
- --wpds-dimension-padding-xl: 24px; /* Extra large padding */
187
- --wpds-dimension-padding-xs: 8px; /* Extra small 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
- --wpds-dimension-base: 4px; /* Base dimension unit */
192
- --wpds-dimension-gap-2xl: 32px; /* 2x extra large gap */
193
- --wpds-dimension-gap-3xl: 40px; /* 3x extra large gap */
194
- --wpds-dimension-gap-lg: 16px; /* Large gap */
195
- --wpds-dimension-gap-md: 12px; /* Medium gap */
196
- --wpds-dimension-gap-sm: 8px; /* Small gap */
197
- --wpds-dimension-gap-xl: 24px; /* Extra large gap */
198
- --wpds-dimension-gap-xs: 4px; /* Extra small gap */
199
- --wpds-dimension-padding-2xl: 24px; /* 2x extra large padding */
200
- --wpds-dimension-padding-3xl: 32px; /* 3x extra large padding */
201
- --wpds-dimension-padding-lg: 16px; /* Large padding */
202
- --wpds-dimension-padding-md: 12px; /* Medium padding */
203
- --wpds-dimension-padding-sm: 8px; /* Small padding */
204
- --wpds-dimension-padding-xl: 20px; /* Extra large padding */
205
- --wpds-dimension-padding-xs: 4px; /* Extra small padding */
206
- --wpds-dimension-surface-width-2xl: 960px; /* 2x extra large surface width */
207
- --wpds-dimension-surface-width-lg: 560px; /* Large surface width */
208
- --wpds-dimension-surface-width-md: 400px; /* Medium surface width */
209
- --wpds-dimension-surface-width-sm: 320px; /* Small surface width */
210
- --wpds-dimension-surface-width-xl: 720px; /* Extra large surface width */
211
- --wpds-dimension-surface-width-xs: 240px; /* Extra small surface width */
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
- --wpds-border-width-focus: 1.5px; /* Border width for focus ring */
405
+ /* Border width for focus ring */
406
+ --wpds-border-width-focus: 1.5px;
217
407
  }
218
408
  }
219
409
  .admin-ui-page {
@@ -230,7 +420,7 @@
230
420
  .admin-ui-page__header {
231
421
  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
232
422
  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);
423
+ background: var(--wpds-color-bg-surface-neutral-strong, #fff);
234
424
  position: sticky;
235
425
  top: 0;
236
426
  z-index: 1;
@@ -270,20 +460,6 @@
270
460
  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
271
461
  }
272
462
 
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
463
  /**
288
464
  * SCSS Variables.
289
465
  *