Issue #3454731: Themed update/maintenance page

dist/css/components/maintenance_page.css

+.maintenance-page {
+  --color-absolutezero: var(--gin-color-primary);
+  --color-absolutezero-hover: var(--gin-color-primary-hover);
+  --color-absolutezero-active: var(--gin-color-primary-active);
+  --color-gray: var(--gin-color-text);
+  --color-gray-700: var(--gin-color-text-disabled);
+  --color-bgblue-active: var(--gin-color-primary-light);
+  --font-size-h1: var(--gin-font-size-h1);
+  --font-size-h2: var(--gin-font-size-h2);
+  --font-size-h3: var(--gin-font-size-h3);
+  --shadow-z3: var(--gin-shadow-l1);
+  background: var(--gin-bg-app);
+}
+
+.layout-container {
+  padding-block: var(--gin-spacing-l);
+  background: var(--gin-bg-layer);
+  border-radius: var(--gin-border-l);
+}
+
+.site-name {
+  font-size: var(--gin-font-size-h1);
+  font-weight: var(--gin-font-weight-bold);
+  line-height: normal;
+  letter-spacing: -0.05em;
+  color: var(--gin-color-title);
+}
+
+.title {
+  -webkit-margin-before: var(--gin-spacing-m);
+          margin-block-start: var(--gin-spacing-m);
+  -webkit-margin-after: var(--gin-spacing-s);
+          margin-block-end: var(--gin-spacing-s);
+}
+
+.button {
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+}
+
+.task-list li.is-active {
+  font-weight: var(--gin-font-weight-bold);
+}
+

gin.libraries.yml

@@ -352,6 +352,17 @@ settings_tray_edit:
     component:
       dist/css/components/settings_tray_edit.css: { minified: false }
 
+maintenance_page:
+  css:
+    theme:
+      dist/css/components/maintenance_page.css: {}
+  dependencies:
+    - system/maintenance
+    - gin/gin
+    - gin/gin_accent
+    - gin/gin_init
+
+
 # Modules
 
 paragraphs:

styles/components/maintenance_page.scss

+.maintenance-page {
+  --color-absolutezero: var(--gin-color-primary);
+  --color-absolutezero-hover: var(--gin-color-primary-hover);
+  --color-absolutezero-active: var(--gin-color-primary-active);
+  --color-gray: var(--gin-color-text);
+  --color-gray-700: var(--gin-color-text-disabled);
+  --color-bgblue-active: var(--gin-color-primary-light);
+  --font-size-h1: var(--gin-font-size-h1);
+  --font-size-h2: var(--gin-font-size-h2);
+  --font-size-h3: var(--gin-font-size-h3);
+  --shadow-z3: var(--gin-shadow-l1);
+
+  background: var(--gin-bg-app);
+}
+
+.layout-container {
+  padding-block: var(--gin-spacing-l);
+  background: var(--gin-bg-layer);
+  border-radius: var(--gin-border-l);
+}
+
+.site-name {
+  font-size: var(--gin-font-size-h1);
+  font-weight: var(--gin-font-weight-bold);
+  line-height: normal;
+  letter-spacing: -.05em;
+  color: var(--gin-color-title);
+}
+
+.title {
+  margin-block-start: var(--gin-spacing-m);
+  margin-block-end: var(--gin-spacing-s);
+}
+
+.button {
+  margin-block-end: 0;
+}
+
+.task-list li.is-active {
+  font-weight: var(--gin-font-weight-bold);
+}

webpack.config.js

@@ -52,6 +52,7 @@ module.exports = {
     'components/layout_paragraphs': ['./styles/components/layout_paragraphs.scss'],
     'components/layout_paragraphs_2.0': ['./styles/components/layout_paragraphs_2.0.scss'],
     'components/linkit': ['./styles/components/linkit.scss'],
+    'components/maintenance_page': ['./styles/components/maintenance_page.scss'],
     'components/media_library': ['./styles/components/media_library.scss'],
     'components/module_filter': ['./styles/components/module_filter.scss'],
     'components/node_preview': ['./styles/components/node_preview.scss'],