clean install

web/themes/gin/dist/css/theme/accent.css

@@ -0,0 +1,311 @@
+[data-gin-accent] {
+  --gin-color-primary: rgb(var(--gin-color-primary-rgb));
+  --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
+  --gin-bg-app: rgb(var(--gin-bg-app-rgb));
+  --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
+  --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
+  --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
+  --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .45);
+}
+
+.gin--dark-mode[data-gin-accent],
+.gin--dark-mode [data-gin-accent] {
+  --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
+  --gin-bg-app-rgb: 27, 27, 29;
+}
+
+[data-gin-accent=blue] {
+  --gin-color-primary-rgb: 5, 80, 230;
+  --gin-color-primary-light-rgb: 205, 220, 250;
+  --gin-color-primary-hover: #0444c4;
+  --gin-color-primary-active: #043cad;
+  --gin-bg-app-rgb: 248, 250, 254;
+  --gin-bg-header: #e1eafc;
+  --gin-color-sticky-rgb: 235, 241, 253;
+}
+
+[data-gin-accent=light_blue] {
+  --gin-color-primary-rgb: 50, 117, 224;
+  --gin-color-primary-light-rgb: 214, 227, 249;
+  --gin-color-primary-hover: #2b63be;
+  --gin-color-primary-active: #2658a8;
+  --gin-bg-app-rgb: 249, 251, 254;
+  --gin-bg-header: #e6eefb;
+  --gin-color-sticky-rgb: 239, 244, 253;
+}
+
+[data-gin-accent=dark_purple] {
+  --gin-color-primary-rgb: 67, 0, 191;
+  --gin-color-primary-light-rgb: 217, 204, 242;
+  --gin-color-primary-hover: #3900a2;
+  --gin-color-primary-active: #32008f;
+  --gin-bg-app-rgb: 249, 247, 253;
+  --gin-bg-header: #e8e0f7;
+  --gin-color-sticky-rgb: 240, 235, 250;
+  --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
+  --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .25);
+  --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .4);
+  --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
+}
+
+[data-gin-accent=purple] {
+  --gin-color-primary-rgb: 91, 0, 255;
+  --gin-color-primary-light-rgb: 222, 204, 255;
+  --gin-color-primary-hover: #4d00d9;
+  --gin-color-primary-active: #4400bf;
+  --gin-bg-app-rgb: 250, 247, 255;
+  --gin-bg-header: #ebe0ff;
+  --gin-color-sticky-rgb: 242, 235, 255;
+  --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
+  --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .25);
+  --gin-shadow-primary-light: rgba(var(--gin-color-primary-rgb), .4);
+  --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
+}
+
+[data-gin-accent=teal] {
+  --gin-color-primary-rgb: 16, 133, 127;
+  --gin-color-primary-light-rgb: 207, 231, 229;
+  --gin-color-primary-hover: #0e716c;
+  --gin-color-primary-active: #0c645f;
+  --gin-bg-app-rgb: 248, 251, 251;
+  --gin-bg-header: #e2f0f0;
+  --gin-color-sticky-rgb: 236, 245, 245;
+}
+
+[data-gin-accent=green] {
+  --gin-color-primary-rgb: 0, 135, 95;
+  --gin-color-primary-light-rgb: 204, 231, 223;
+  --gin-color-primary-hover: #007351;
+  --gin-color-primary-active: #006547;
+  --gin-bg-app-rgb: 247, 251, 250;
+  --gin-bg-header: #e0f1ec;
+  --gin-color-sticky-rgb: 235, 245, 242;
+}
+
+[data-gin-accent=red] {
+  --gin-color-primary-rgb: 216, 0, 47;
+  --gin-color-primary-light-rgb: 247, 204, 213;
+  --gin-color-primary-hover: #b80028;
+  --gin-color-primary-active: #a20023;
+  --gin-bg-app-rgb: 254, 247, 249;
+  --gin-bg-header: #fae0e6;
+  --gin-color-sticky-rgb: 252, 235, 238;
+}
+
+[data-gin-accent=orange] {
+  --gin-color-primary-rgb: 239, 92, 32;
+  --gin-color-primary-light-rgb: 252, 222, 210;
+  --gin-color-primary-hover: #cb4e1b;
+  --gin-color-primary-active: #b34518;
+  --gin-bg-app-rgb: 255, 250, 248;
+  --gin-bg-header: #fdebe4;
+  --gin-color-sticky-rgb: 254, 242, 237;
+}
+
+[data-gin-accent=yellow] {
+  --gin-color-primary-rgb: 197, 137, 0;
+  --gin-color-primary-light-rgb: 243, 231, 204;
+  --gin-color-primary-hover: #a77400;
+  --gin-color-primary-active: #946700;
+  --gin-bg-app-rgb: 253, 251, 247;
+  --gin-bg-header: #f8f1e0;
+  --gin-color-sticky-rgb: 250, 246, 235;
+}
+
+[data-gin-accent=pink] {
+  --gin-color-primary-rgb: 226, 49, 119;
+  --gin-color-primary-light-rgb: 249, 214, 228;
+  --gin-color-primary-hover: #c02a65;
+  --gin-color-primary-active: #aa2559;
+  --gin-bg-app-rgb: 254, 249, 251;
+  --gin-bg-header: #fce6ef;
+  --gin-color-sticky-rgb: 253, 239, 244;
+}
+
+[data-gin-accent=neutral] {
+  --gin-color-primary-rgb: 17, 17, 17;
+  --gin-color-primary-light-rgb: 207, 207, 207;
+  --gin-color-primary-hover: #0e0e0e;
+  --gin-color-primary-active: #0d0d0d;
+  --gin-bg-app-rgb: 248, 248, 248;
+  --gin-bg-header: #e2e2e2;
+  --gin-color-sticky-rgb: 236, 236, 236;
+}
+
+[data-gin-accent=custom] {
+  --gin-color-primary-rgb: 17, 17, 17;
+  --gin-color-primary-light-rgb: 207, 207, 207;
+  --gin-color-primary-hover: #0e0e0e;
+  --gin-color-primary-active: #0d0d0d;
+  --gin-bg-app-rgb: 248, 248, 248;
+  --gin-bg-header: #e2e2e2;
+  --gin-color-sticky-rgb: 236, 236, 236;
+}
+
+.gin--dark-mode[data-gin-accent=blue],
+.gin--dark-mode [data-gin-accent=blue] {
+  --gin-color-primary-rgb: 144, 174, 239;
+  --gin-color-primary-light-rgb: 62, 68, 84;
+  --gin-color-primary-hover: #9bb6f1;
+  --gin-color-primary-active: #a1baf1;
+  --gin-bg-header: #373b45;
+}
+
+.gin--dark-mode[data-gin-accent=claro_blue],
+.gin--dark-mode [data-gin-accent=claro_blue] {
+  --gin-color-primary-rgb: 115, 145, 216;
+  --gin-color-primary-light-rgb: 57, 63, 79;
+  --gin-color-primary-hover: #819cdc;
+  --gin-color-primary-active: #88a2de;
+  --gin-bg-header: #333742;
+}
+
+.gin--dark-mode[data-gin-accent=light_blue],
+.gin--dark-mode [data-gin-accent=light_blue] {
+  --gin-color-primary-rgb: 130, 191, 232;
+  --gin-color-primary-light-rgb: 60, 72, 82;
+  --gin-color-primary-hover: #8fc5ea;
+  --gin-color-primary-active: #95c9eb;
+  --gin-bg-header: #353d44;
+}
+
+.gin--dark-mode[data-gin-accent=dark_purple],
+.gin--dark-mode [data-gin-accent=dark_purple] {
+  --gin-color-primary-rgb: 173, 143, 232;
+  --gin-color-primary-light-rgb: 68, 62, 82;
+  --gin-color-primary-hover: #b59aea;
+  --gin-color-primary-active: #b9a0eb;
+  --gin-bg-header: #3a3744;
+}
+
+.gin--dark-mode[data-gin-accent=purple],
+.gin--dark-mode [data-gin-accent=purple] {
+  --gin-color-primary-rgb: 219, 165, 239;
+  --gin-color-primary-light-rgb: 77, 67, 84;
+  --gin-color-primary-hover: #dfaef1;
+  --gin-color-primary-active: #e0b3f1;
+  --gin-bg-header: #403945;
+}
+
+.gin--dark-mode[data-gin-accent=teal],
+.gin--dark-mode [data-gin-accent=teal] {
+  --gin-color-primary-rgb: 0, 234, 208;
+  --gin-color-primary-light-rgb: 34, 80, 78;
+  --gin-color-primary-hover: #1aecd5;
+  --gin-color-primary-active: #26edd7;
+  --gin-bg-header: #254241;
+}
+
+.gin--dark-mode[data-gin-accent=green],
+.gin--dark-mode [data-gin-accent=green] {
+  --gin-color-primary-rgb: 107, 212, 161;
+  --gin-color-primary-light-rgb: 55, 76, 68;
+  --gin-color-primary-hover: #7ad8aa;
+  --gin-color-primary-active: #81daaf;
+  --gin-bg-header: #323f3c;
+}
+
+.gin--dark-mode[data-gin-accent=red],
+.gin--dark-mode [data-gin-accent=red] {
+  --gin-color-primary-rgb: 236, 137, 137;
+  --gin-color-primary-light-rgb: 81, 61, 63;
+  --gin-color-primary-hover: #ee9595;
+  --gin-color-primary-active: #ef9b9b;
+  --gin-bg-header: #423639;
+}
+
+.gin--dark-mode[data-gin-accent=orange],
+.gin--dark-mode [data-gin-accent=orange] {
+  --gin-color-primary-rgb: 247, 149, 118;
+  --gin-color-primary-light-rgb: 83, 63, 60;
+  --gin-color-primary-hover: #f8a084;
+  --gin-color-primary-active: #f8a58b;
+  --gin-bg-header: #443736;
+}
+
+.gin--dark-mode[data-gin-accent=yellow],
+.gin--dark-mode [data-gin-accent=yellow] {
+  --gin-color-primary-rgb: 241, 201, 112;
+  --gin-color-primary-light-rgb: 82, 74, 58;
+  --gin-color-primary-hover: #f2ce7e;
+  --gin-color-primary-active: #f3d185;
+  --gin-bg-header: #433e35;
+}
+
+.gin--dark-mode[data-gin-accent=pink],
+.gin--dark-mode [data-gin-accent=pink] {
+  --gin-color-primary-rgb: 231, 157, 163;
+  --gin-color-primary-light-rgb: 80, 65, 69;
+  --gin-color-primary-hover: #e9a7ac;
+  --gin-color-primary-active: #ebacb1;
+  --gin-bg-header: #42383c;
+}
+
+.gin--dark-mode[data-gin-accent=neutral],
+.gin--dark-mode [data-gin-accent=neutral] {
+  --gin-color-primary-rgb: 255, 255, 255;
+  --gin-color-primary-light-rgb: 85, 85, 87;
+  --gin-color-primary-hover: white;
+  --gin-color-primary-active: white;
+  --gin-bg-header: #454547;
+}
+
+.gin--dark-mode[data-gin-accent=custom],
+.gin--dark-mode [data-gin-accent=custom] {
+  --gin-color-primary-rgb: 255, 255, 255;
+  --gin-color-primary-light-rgb: 85, 85, 87;
+  --gin-color-primary-hover: white;
+  --gin-color-primary-active: white;
+  --gin-bg-header: #454547;
+}
+
+.gin--high-contrast-mode {
+  --gin-bg-app: #d9dbde;
+  --gin-color-text: rgba(0, 0, 0, .8);
+  --gin-color-text-light: rgba(0, 0, 0, .8);
+  --gin-icon-color: rgba(0, 0, 0, .8);
+  --gin-color-focus: rgba(0, 0, 0, .8);
+  --gin-border-color: rgba(0, 0, 0, .8);
+  --gin-border-color-secondary: rgba(0, 0, 0, .6);
+  --gin-border-color-layer: rgba(0, 0, 0, .6);
+  --gin-border-color-layer2: rgba(0, 0, 0, .8);
+  --gin-border-color-table: rgba(0, 0, 0, .8);
+  --gin-border-color-table-header: rgba(0, 0, 0, .8);
+  --gin-border-color-form-element: rgba(0, 0, 0, .8);
+}
+
+.gin--dark-mode .gin--high-contrast-mode {
+  --gin-bg-app: #000;
+  --gin-color-text: rgba(255, 255, 255, .8);
+  --gin-color-text-light: rgba(255, 255, 255, .8);
+  --gin-icon-color: rgba(255, 255, 255, .8);
+  --gin-color-focus: rgba(255, 255, 255, .8);
+  --gin-border-color: rgba(255, 255, 255, .8);
+  --gin-border-color-secondary: rgba(255, 255, 255, .6);
+  --gin-border-color-layer: rgba(255, 255, 255, .6);
+  --gin-border-color-layer2: rgba(255, 255, 255, .8);
+  --gin-border-color-table: rgba(255, 255, 255, .8);
+  --gin-border-color-table-header: rgba(255, 255, 255, .8);
+  --gin-border-color-form-element: rgba(255, 255, 255, .8);
+}
+
+[data-gin-focus=green] {
+  --gin-color-focus: rgba(8, 163, 144, .6);
+}
+
+[data-gin-focus=claro] {
+  --gin-color-focus: rgba(38, 167, 105, .6);
+}
+
+[data-gin-focus=orange] {
+  --gin-color-focus: rgba(236, 124, 87, .6);
+}
+
+[data-gin-focus=dark] {
+  --gin-color-focus: var(--gin-color-focus-neutral-rgb);
+}
+
+[data-gin-focus=accent] {
+  --gin-color-focus: rgba(var(--gin-color-primary-rgb), .6);
+}
+

web/themes/gin/dist/css/theme/ckeditor.css

@@ -0,0 +1,92 @@
+body.cke_editable_themed {
+  color: var(--gin-color-text);
+}
+
+body.cke_editable_themed.gin--dark-mode {
+  background-color: var(--gin-bg-layer2);
+}
+
+a {
+  color: var(--gin-color-primary);
+}
+
+.cke_panel_grouptitle {
+  color: var(--gin-color-title);
+  background: var(--gin-bg-layer2);
+}
+
+.cke_panel_listItem.cke_selected a,
+.cke_panel_listItem a:hover,
+.cke_panel_listItem a:focus,
+.cke_panel_listItem a:active {
+  background-color: var(--gin-color-primary-light);
+}
+
+.cke_editable {
+  line-height: 1.5;
+}
+
+/* CKE Context Menu */
+
+.cke_panel_block {
+  border-color: var(--gin-border-color-form-element);
+  border-radius: var(--gin-border-m);
+}
+
+.cke_panel_block .cke_menu .cke_menubutton_icon {
+  background-color: var(--gin-bg-app);
+}
+
+.gin--dark-mode .cke_panel_block .cke_menu .cke_menubutton_icon .cke_button_icon {
+  filter: invert(1);
+}
+
+.cke_panel_block .cke_menu .cke_menubutton_label {
+  color: var(--gin-color-text);
+}
+
+.cke_panel_block .cke_menu .cke_menubutton_shortcut {
+  color: var(--gin-color-text-light);
+}
+
+.cke_panel_block .cke_menu a:hover, .cke_panel_block .cke_menu a:focus, .cke_panel_block .cke_menu a:active {
+  background-color: var(--gin-color-primary-light);
+}
+
+.cke_panel_block .cke_menu a:hover .cke_menubutton_icon, .cke_panel_block .cke_menu a:focus .cke_menubutton_icon, .cke_panel_block .cke_menu a:active .cke_menubutton_icon {
+  background-color: var(--gin-color-primary-light);
+}
+
+body.cke_editable_themed blockquote {
+  font-size: var(--gin-font-size-quote);
+  position: relative;
+  margin: var(--gin-spacing-m);
+}
+
+[dir="ltr"] body.cke_editable_themed blockquote {
+  padding-left: var(--gin-spacing-l);
+}
+
+[dir="rtl"] body.cke_editable_themed blockquote {
+  padding-right: var(--gin-spacing-l);
+}
+
+body.cke_editable_themed blockquote::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  background-color: var(--gin-color-primary);
+  border-radius: 2px;
+}
+
+[dir="ltr"] body.cke_editable_themed blockquote::before {
+  left: 0;
+}
+
+[dir="rtl"] body.cke_editable_themed blockquote::before {
+  right: 0;
+}
+

web/themes/gin/dist/css/theme/dialog.css

@@ -0,0 +1,850 @@
+.ui-dialog a,
+.ui-dialog .link,
+.ui-dialog button.link,
+.ui-dialog .tabs__link.is-active,
+.ui-dialog [open] .claro-details__summary--accordion,
+.ui-dialog [open] .claro-details__summary--accordion-item,
+.ui-dialog [open] .claro-details__summary--vertical-tabs-item,
+.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
+  color: var(--gin-color-primary);
+  -webkit-text-decoration-style: var(--gin-link-decoration-style);
+          text-decoration-style: var(--gin-link-decoration-style);
+}
+
+.ui-dialog a:hover,
+.ui-dialog .link:hover,
+.ui-dialog button.link:hover,
+.ui-dialog .tabs__link.is-active:hover,
+.ui-dialog [open] .claro-details__summary--accordion:hover,
+.ui-dialog [open] .claro-details__summary--accordion-item:hover,
+.ui-dialog [open] .claro-details__summary--vertical-tabs-item:hover,
+.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover {
+  color: var(--gin-color-primary-hover);
+}
+
+.ui-dialog a:active,
+.ui-dialog .link:active,
+.ui-dialog button.link:active,
+.ui-dialog .tabs__link.is-active:active,
+.ui-dialog [open] .claro-details__summary--accordion:active,
+.ui-dialog [open] .claro-details__summary--accordion-item:active,
+.ui-dialog [open] .claro-details__summary--vertical-tabs-item:active,
+.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:active {
+  color: var(--gin-color-primary-active);
+}
+
+.ui-dialog *|*:-webkit-any-link:not(svg|a) {
+  text-decoration: underline;
+  -webkit-text-decoration-style: var(--gin-link-decoration-style);
+          text-decoration-style: var(--gin-link-decoration-style);
+}
+
+.ui-dialog *|*:any-link:not(svg|a) {
+  text-decoration: underline;
+  -webkit-text-decoration-style: var(--gin-link-decoration-style);
+          text-decoration-style: var(--gin-link-decoration-style);
+}
+
+.ui-dialog .is-horizontal .tabs__link:hover,
+.ui-dialog .claro-details__summary:hover,
+.ui-dialog .action-link:hover {
+  color: var(--gin-color-primary-hover);
+}
+
+.ui-dialog .claro-details[open] > .claro-details__summary:focus {
+  color: var(--gin-color-primary-active);
+}
+
+.ui-dialog .form-boolean--type-checkbox:checked,
+.ui-dialog .form-boolean--type-radio:checked:not(:disabled),
+.ui-dialog .is-horizontal .tabs__link.is-active::before,
+.ui-dialog .tabs__tab.is-active::before,
+.ui-dialog [open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
+.ui-dialog [open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
+.ui-dialog [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after,
+.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
+  border-color: var(--gin-color-primary);
+}
+
+.ui-dialog .form-boolean--type-checkbox:checked:hover,
+.ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover,
+.ui-dialog .is-horizontal .tabs__link.is-active::before:hover,
+.ui-dialog .tabs__tab.is-active::before:hover,
+.ui-dialog [open] > .claro-details__summary--accordion:not(:focus):not(:active)::after:hover,
+.ui-dialog [open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after:hover,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after:hover,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after:hover,
+.ui-dialog [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after:hover,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after:hover,
+.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before:hover {
+  border-color: var(--gin-color-primary-hover);
+}
+
+.ui-dialog .form-boolean--type-checkbox:checked:active,
+.ui-dialog .form-boolean--type-radio:checked:not(:disabled):active,
+.ui-dialog .is-horizontal .tabs__link.is-active::before:active,
+.ui-dialog .tabs__tab.is-active::before:active,
+.ui-dialog [open] > .claro-details__summary--accordion:not(:focus):not(:active)::after:active,
+.ui-dialog [open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after:active,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after:active,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after:active,
+.ui-dialog [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after:active,
+.ui-dialog .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after:active,
+.ui-dialog .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before:active {
+  border-color: var(--gin-color-primary-active);
+}
+
+.ui-dialog .button,
+.ui-dialog .dropbutton__item:first-of-type > *,
+.ui-dialog .dropbutton__toggle {
+  font-size: var(--gin-font-size-s);
+  font-weight: var(--gin-font-weight-semibold);
+  color: var(--gin-color-primary);
+  background-color: transparent;
+  box-shadow: none;
+  transition: var(--gin-transition);
+}
+
+@media (min-width: 80em) {
+  .ui-dialog .button,
+  .ui-dialog .dropbutton__item:first-of-type > *,
+  .ui-dialog .dropbutton__toggle {
+    font-size: var(--gin-font-size);
+  }
+}
+
+.ui-dialog .button:hover,
+.ui-dialog .dropbutton__item:first-of-type > *:hover,
+.ui-dialog .dropbutton__toggle:hover {
+  background-color: var(--gin-color-primary-hover);
+}
+
+.ui-dialog .button:active, .ui-dialog .button:focus,
+.ui-dialog .dropbutton__item:first-of-type > *:active,
+.ui-dialog .dropbutton__item:first-of-type > *:focus,
+.ui-dialog .dropbutton__toggle:active,
+.ui-dialog .dropbutton__toggle:focus {
+  background-color: var(--gin-color-primary-active);
+}
+
+.ui-dialog .button:hover, .ui-dialog .button:active, .ui-dialog .button:focus,
+.ui-dialog .dropbutton__item:first-of-type > *:hover,
+.ui-dialog .dropbutton__item:first-of-type > *:active,
+.ui-dialog .dropbutton__item:first-of-type > *:focus,
+.ui-dialog .dropbutton__toggle:hover,
+.ui-dialog .dropbutton__toggle:active,
+.ui-dialog .dropbutton__toggle:focus {
+  color: var(--gin-color-button-text);
+}
+
+.ui-dialog .button,
+.ui-dialog .button:not(:focus),
+.ui-dialog .form-actions .button,
+.ui-dialog .action-link--icon-trash.action-link {
+  font-size: var(--gin-font-size-s);
+  padding: calc(var(--gin-spacing-s) - 2px) var(--gin-spacing-m);
+  border: 2px solid var(--gin-color-primary) !important;
+  border-radius: var(--gin-border-m);
+  box-shadow: 0 1px 2px var(--gin-color-primary-light);
+  transition: var(--gin-transition);
+}
+
+.ui-dialog .button:hover,
+.ui-dialog .button:not(:focus):hover,
+.ui-dialog .form-actions .button:hover,
+.ui-dialog .action-link--icon-trash.action-link:hover {
+  background-color: var(--gin-color-primary-hover);
+  border-color: var(--gin-color-primary-hover) !important;
+}
+
+.ui-dialog .button:active, .ui-dialog .button:focus,
+.ui-dialog .button:not(:focus):active,
+.ui-dialog .button:not(:focus):focus,
+.ui-dialog .form-actions .button:active,
+.ui-dialog .form-actions .button:focus,
+.ui-dialog .action-link--icon-trash.action-link:active,
+.ui-dialog .action-link--icon-trash.action-link:focus {
+  border-color: var(--gin-color-primary-active) !important;
+}
+
+.ui-dialog .button:hover, .ui-dialog .button:active, .ui-dialog .button:focus, .ui-dialog .button:hover:focus,
+.ui-dialog .button:not(:focus):hover,
+.ui-dialog .button:not(:focus):active,
+.ui-dialog .button:not(:focus):focus,
+.ui-dialog .button:not(:focus):hover:focus,
+.ui-dialog .form-actions .button:hover,
+.ui-dialog .form-actions .button:active,
+.ui-dialog .form-actions .button:focus,
+.ui-dialog .form-actions .button:hover:focus,
+.ui-dialog .action-link--icon-trash.action-link:hover,
+.ui-dialog .action-link--icon-trash.action-link:active,
+.ui-dialog .action-link--icon-trash.action-link:focus,
+.ui-dialog .action-link--icon-trash.action-link:hover:focus {
+  color: var(--gin-color-button-text);
+}
+
+[dir="ltr"] .ui-dialog .form-actions .button {
+  margin-right: var(--gin-spacing-xs);
+}
+
+[dir="rtl"] .ui-dialog .form-actions .button {
+  margin-left: var(--gin-spacing-xs);
+}
+
+.ui-dialog .button.button--small {
+  padding: calc(var(--gin-spacing-xxs) + 2px) var(--gin-spacing-m);
+  border-radius: var(--gin-border-s);
+}
+
+.ui-dialog .button.button--extrasmall {
+  padding: var(--gin-spacing-xxs) var(--gin-spacing-s);
+  border-radius: var(--gin-border-s);
+}
+
+.ui-dialog .button--primary,
+.ui-dialog .button--primary:not(:focus),
+.ui-dialog .ief-entity-submit {
+  background: var(--gin-color-primary);
+}
+
+[dir="ltr"] .ui-dialog .button--primary,
+[dir="ltr"] .ui-dialog .button--primary:not(:focus),
+[dir="ltr"] .ui-dialog .ief-entity-submit {
+  box-shadow: .1em .25em .5em var(--gin-color-primary-light);
+}
+
+[dir="rtl"] .ui-dialog .button--primary,
+[dir="rtl"] .ui-dialog .button--primary:not(:focus),
+[dir="rtl"] .ui-dialog .ief-entity-submit {
+  box-shadow: -0.1em .25em .5em var(--gin-color-primary-light);
+}
+
+.ui-dialog .button--primary:hover,
+.ui-dialog .button--primary:not(:focus):hover,
+.ui-dialog .ief-entity-submit:hover {
+  background-color: var(--gin-color-primary-hover);
+}
+
+.ui-dialog .button--primary:active, .ui-dialog .button--primary:focus,
+.ui-dialog .button--primary:not(:focus):active,
+.ui-dialog .button--primary:not(:focus):focus,
+.ui-dialog .ief-entity-submit:active,
+.ui-dialog .ief-entity-submit:focus {
+  background-color: var(--gin-color-primary-active);
+}
+
+.ui-dialog .button--primary, .ui-dialog .button--primary:hover, .ui-dialog .button--primary:active, .ui-dialog .button--primary:focus,
+.ui-dialog .button--primary:not(:focus),
+.ui-dialog .button--primary:not(:focus):hover,
+.ui-dialog .button--primary:not(:focus):active,
+.ui-dialog .button--primary:not(:focus):focus,
+.ui-dialog .ief-entity-submit,
+.ui-dialog .ief-entity-submit:hover,
+.ui-dialog .ief-entity-submit:active,
+.ui-dialog .ief-entity-submit:focus {
+  color: var(--gin-color-button-text);
+}
+
+.ui-dialog a.button:hover,
+.ui-dialog a.button:active {
+  color: var(--gin-color-button-text);
+}
+
+.gin--dark-mode .ui-dialog a.button--primary:hover,
+.gin--dark-mode .ui-dialog a.button--primary:active,
+.gin--dark-mode .ui-dialog a.button--primary:focus,
+.gin--dark-mode .ui-dialog a.button--primary:focus:hover {
+  color: var(--gin-bg-app);
+}
+
+.ui-dialog .button.button:disabled, .ui-dialog .button.button:disabled:hover, .ui-dialog .button.button:disabled:active, .ui-dialog .button.button:disabled:focus, .ui-dialog .button.button.is-disabled, .ui-dialog .button.button.is-disabled:hover, .ui-dialog .button.button.is-disabled:active, .ui-dialog .button.button.is-disabled:focus {
+  color: var(--gin-color-disabled);
+  background: transparent;
+  border: 2px solid var(--gin-color-disabled-border) !important;
+  box-shadow: none;
+}
+
+.ui-dialog .button.button--primary:disabled, .ui-dialog .button.button--primary:disabled:hover, .ui-dialog .button.button--primary:disabled:active, .ui-dialog .button.button--primary:disabled:focus, .ui-dialog .button.button--primary.is-disabled, .ui-dialog .button.button--primary.is-disabled:hover, .ui-dialog .button.button--primary.is-disabled:active, .ui-dialog .button.button--primary.is-disabled:focus {
+  color: var(--gin-color-disabled);
+  background-color: var(--gin-color-disabled-bg);
+}
+
+.ui-dialog .action-link.action-link--icon-trash {
+  line-height: 1;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+}
+
+.ui-dialog .action-link.action-link--icon-trash, .ui-dialog .action-link.action-link--icon-trash:hover, .ui-dialog .action-link.action-link--icon-trash:active, .ui-dialog .action-link.action-link--icon-trash:focus, .ui-dialog .action-link.action-link--icon-trash:focus:hover {
+  border: 2px solid var(--gin-color-danger) !important;
+}
+
+.ui-dialog .multiple-fields-remove-button.button {
+  border: 0 none !important;
+  -webkit-mask-image: url("../../media/sprite.svg#remove-view");
+          mask-image: url("../../media/sprite.svg#remove-view");
+  -webkit-mask-size: 16px 16px;
+          mask-size: 16px 16px;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+          mask-position: center center;
+}
+
+.ui-dialog .form-element {
+  color: var(--gin-color-text);
+  line-height: var(--input-line-height);
+  padding: calc(var(--input-padding-vertical) - 1px) var(--input-padding-horizontal);
+  min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
+  background-color: var(--gin-bg-input);
+  border: 1px solid var(--gin-border-color-form-element);
+  border-radius: var(--gin-border-m);
+  box-sizing: border-box;
+  transition: var(--gin-transition);
+}
+
+.ui-dialog .form-element:hover {
+  border-color: var(--gin-color-text);
+  box-shadow: inset 0 0 0 1px var(--gin-color-text);
+}
+
+.ui-dialog .form-element--small, .ui-dialog .form-element--extrasmall {
+  font-size: var(--gin-font-size-s);
+  line-height: 1.5;
+  border-radius: var(--gin-border-s);
+}
+
+.ui-dialog .form-element[disabled], .ui-dialog .form-element[disabled]:hover {
+  cursor: not-allowed;
+  color: var(--gin-color-disabled);
+  background-color: var(--gin-color-disabled-bg) !important;
+  border-color: var(--gin-color-disabled-border);
+  box-shadow: none;
+}
+
+.gin--dark-mode .ui-dialog .form-element {
+  color-scheme: dark;
+}
+
+.ui-dialog .form-textarea-wrapper {
+  border-radius: var(--gin-border-m);
+}
+
+.ui-dialog .form-textarea-wrapper textarea {
+  max-width: 100%;
+}
+
+.ui-dialog .form-item--editor-format,
+.ui-dialog .form-element--editor-format {
+  width: auto;
+}
+
+.ui-dialog .form-item--editor-format .form-item__label,
+.ui-dialog .form-element--editor-format .form-item__label {
+  top: 3px;
+  padding-bottom: 0;
+}
+
+.ui-dialog .password-field {
+  width: 100%;
+}
+
+.ui-dialog .password-confirm {
+  width: 100%;
+  max-width: var(--gin-max-line-length);
+}
+
+.ui-dialog .password-strength__title {
+  color: var(--gin-color-text-light);
+}
+
+.ui-dialog .password-strength__text {
+  color: var(--gin-color-title);
+}
+
+.ui-dialog .password-suggestions {
+  color: var(--gin-color-text-light);
+  border: 1px solid var(--gin-border-color-layer2);
+  background-color: transparent;
+}
+
+[dir="ltr"] .ui-dialog .form-element--type-select {
+  padding-right: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
+}
+
+[dir="rtl"] .ui-dialog .form-element--type-select {
+  padding-left: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
+}
+
+.gin--dark-mode .ui-dialog .form-element--type-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
+}
+
+.ui-dialog .form-element--type-select--small {
+  font-size: var(--gin-font-size-xs);
+  min-height: 2.25rem;
+  line-height: 1.4;
+  padding-top: .474rem;
+  padding-bottom: .474rem;
+}
+
+[dir="ltr"] .ui-dialog .form-element--type-select--small {
+  background-position: 100% 52%;
+}
+
+[dir="rtl"] .ui-dialog .form-element--type-select--small {
+  background-position: 0% 52%;
+}
+
+.ui-dialog .form-boolean {
+  width: 21px;
+  height: 21px;
+  border-color: var(--gin-border-color-form-element);
+  border-radius: var(--gin-border-xs);
+}
+
+.gin--dark-mode .ui-dialog .form-boolean--type-checkbox:not(:checked) {
+  background: var(--gin-bg-input);
+}
+
+.ui-dialog .form-boolean--type-checkbox:checked {
+  background-color: var(--gin-color-primary);
+}
+
+.gin--dark-mode .ui-dialog .form-boolean--type-checkbox:checked:not(:disabled) {
+  background-image: url("../../media/sprite.svg#checked-view");
+}
+
+.ui-dialog .form-boolean--type-checkbox:checked:hover {
+  background-color: var(--gin-color-primary-hover);
+}
+
+.ui-dialog .form-boolean--type-checkbox:checked:active {
+  background-color: var(--gin-color-primary-active);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {
+  position: relative;
+}
+
+[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {
+  margin-left: 0;
+}
+
+[dir="rtl"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {
+  margin-right: 0;
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle {
+  z-index: 0;
+  display: inline-block;
+  vertical-align: top;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: var(--gin-border-l);
+  box-sizing: border-box;
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-clip-path: circle(var(--gin-spacing-l) at 50% 50%);
+          clip-path: circle(var(--gin-spacing-l) at 50% 50%);
+  background-color: var(--gin-color-disabled);
+  border: 3px solid transparent;
+  border-radius: var(--gin-border-l);
+  box-sizing: border-box;
+}
+
+.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner {
+  background-color: var(--gin-bg-input);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 21px;
+  transition: transform .3s;
+}
+
+[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner:before {
+  transform: translateX(-16px);
+}
+
+[dir="rtl"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner:before {
+  transform: translateX(16px);
+}
+
+.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox .checkbox-toggle__inner:before {
+  background-color: var(--gin-border-color-form-element);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  word-wrap: normal;
+  width: 40px;
+  height: 24px;
+  clip: auto;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input {
+  margin-left: 0;
+}
+
+[dir="rtl"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input {
+  margin-right: 0;
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:hover, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:focus, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:active, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:hover:focus, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:active:focus {
+  outline: none;
+  box-shadow: none;
+  border: none;
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:hover ~ .checkbox-toggle {
+  opacity: .9;
+  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle {
+  border-color: var(--gin-color-primary-light-active);
+}
+
+.gin--high-contrast-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle {
+  border-color: var(--gin-border-color);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner {
+  background-color: var(--gin-switch);
+}
+
+.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner {
+  background-color: var(--gin-color-primary-light-active);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner:before {
+  background-color: #fff;
+}
+
+[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner:before {
+  transform: translateX(16px);
+}
+
+[dir="rtl"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner:before {
+  transform: translateX(-16px);
+}
+
+.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner:before {
+  background-color: var(--gin-color-primary-hover);
+}
+
+.gin--high-contrast-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:checked ~ .checkbox-toggle .checkbox-toggle__inner:before {
+  background-color: var(--gin-border-color);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:active ~ .checkbox-toggle .checkbox-toggle__inner, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:focus ~ .checkbox-toggle .checkbox-toggle__inner {
+  box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled {
+  cursor: not-allowed;
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled ~ .checkbox-toggle, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled ~ .checkbox-toggle:hover, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled:checked ~ .checkbox-toggle .checkbox-toggle__inner, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled:checked ~ .checkbox-toggle:hover .checkbox-toggle__inner {
+  background-color: var(--gin-color-disabled);
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled ~ .checkbox-toggle::before, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled ~ .checkbox-toggle:hover::before, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled:checked ~ .checkbox-toggle .checkbox-toggle__inner::before, .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input:disabled:checked ~ .checkbox-toggle:hover .checkbox-toggle__inner::before {
+  background-color: #fff;
+  opacity: .4;
+}
+
+.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox label {
+  z-index: 1;
+  position: relative;
+  padding-bottom: 0;
+  color: var(--gin-color-text);
+}
+
+[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox label {
+  padding-left: var(--gin-spacing-xxs);
+}
+
+[dir="rtl"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox label {
+  padding-right: var(--gin-spacing-xxs);
+}
+
+[dir="ltr"] .ui-dialog table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {
+  margin-left: calc(var(--tabledrag-handle-icon-size, 1.0625rem) + var(--gin-spacing-m));
+}
+
+[dir="rtl"] .ui-dialog table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {
+  margin-right: calc(var(--tabledrag-handle-icon-size, 1.0625rem) + var(--gin-spacing-m));
+}
+
+.gin--dark-mode .ui-dialog .form-boolean:hover, .gin--dark-mode .ui-dialog .form-boolean:active {
+  box-shadow: none;
+  border-color: var(--gin-color-text);
+}
+
+.ui-dialog .form-boolean--type-radio, .ui-dialog .form-boolean--type-radio:hover, .ui-dialog .form-boolean--type-radio:active, .ui-dialog .form-boolean--type-radio:focus, .ui-dialog .form-boolean--type-radio:hover:focus {
+  background-image: none;
+  background-color: var(--gin-bg-input);
+  border-color: var(--gin-border-color-form-element);
+  border-radius: 50%;
+}
+
+.ui-dialog .form-boolean--type-radio:hover {
+  box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);
+}
+
+.ui-dialog .form-boolean--type-radio:hover, .gin--dark-mode .ui-dialog .form-boolean--type-radio:hover {
+  border-color: var(--gin-color-text);
+}
+
+.ui-dialog .form-boolean--type-radio:active, .ui-dialog .form-boolean--type-radio:focus {
+  box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2), 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
+}
+
+.ui-dialog .form-boolean--type-radio:checked:not(:disabled), .ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover {
+  background-image: none;
+  background-color: var(--gin-bg-layer);
+  box-shadow: inset 0 0 0 5px var(--gin-color-primary);
+}
+
+.ui-dialog .form-boolean--type-radio:checked:not(:disabled):active, .ui-dialog .form-boolean--type-radio:checked:not(:disabled):focus, .ui-dialog .form-boolean--type-radio:checked:not(:disabled):hover:focus {
+  box-shadow: inset 0 0 0 5px var(--gin-color-primary), 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
+  border-color: var(--gin-color-focus-border);
+}
+
+.ui-dialog .form-boolean--type-radio:disabled, .ui-dialog .form-boolean--type-radio:disabled:hover {
+  cursor: not-allowed;
+  background: var(--gin-color-disabled-bg);
+  border-color: var(--gin-color-disabled-border);
+}
+
+.ui-dialog .form-boolean--type-radio:checked:disabled, .ui-dialog .form-boolean--type-radio:checked:disabled:hover {
+  background: var(--gin-color-disabled);
+  box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
+}
+
+.ui-dialog .form-boolean--type-checkbox[disabled], .ui-dialog .form-boolean--type-checkbox[disabled]:hover {
+  cursor: not-allowed;
+  background-color: var(--gin-color-disabled-bg);
+  border-color: var(--gin-color-disabled-border);
+}
+
+.ui-dialog .form-boolean--type-checkbox[disabled]:checked, .ui-dialog .form-boolean--type-checkbox[disabled]:hover:checked {
+  border-color: var(--gin-color-disabled-border);
+  background-color: var(--gin-color-disabled-bg);
+  box-shadow: none;
+}
+
+.ui-dialog .form-radios .form-type--boolean,
+.ui-dialog .form-checkboxes .form-type--boolean {
+  margin-top: var(--gin-spacing-xs);
+  margin-bottom: var(--gin-spacing-xs);
+}
+
+.ui-dialog .form-actions {
+  margin-bottom: 0;
+}
+
+.ui-dialog .form-edit .form-actions {
+  padding: 0;
+  margin-bottom: 0;
+  border: 0 none;
+  background-color: transparent;
+}
+
+.ui-dialog fieldset:not(.fieldgroup) {
+  color: var(--gin-color-text-light);
+  padding-top: var(--gin-spacing-xs);
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+  border-color: var(--gin-border-color);
+  border-radius: var(--gin-border-m);
+  box-shadow: none;
+}
+
+.ui-dialog fieldset:not(.fieldgroup) > legend {
+  top: 20px;
+}
+
+.ui-dialog fieldset:not(.fieldgroup) > .fieldset-wrapper {
+  margin-top: 20px;
+}
+
+.ui-dialog fieldset:not(.fieldgroup).error {
+  border: 2px solid var(--gin-color-danger);
+}
+
+.ui-dialog .fieldset__label,
+.ui-dialog .fieldset__label--group,
+.ui-dialog .form-item__label {
+  font-size: var(--gin-font-size-s);
+  font-weight: var(--gin-font-weight-semibold);
+  color: var(--gin-color-title);
+  margin-top: 0;
+  margin-bottom: var(--gin-spacing-xs);
+}
+
+.ui-dialog .form-item__label.has-error,
+.ui-dialog .form-item__error-message {
+  color: var(--gin-color-danger);
+}
+
+.ui-dialog .form-item__description,
+.ui-dialog .fieldset__description {
+  max-width: var(--gin-max-line-length);
+  color: var(--gin-color-text-light);
+}
+
+.ui-dialog .form-item__label.form-required::after,
+.ui-dialog .fieldset__label.form-required::after,
+.ui-dialog .form-required > .fieldset__label::after,
+.ui-dialog .horizontal-tab-button .form-required::after,
+.ui-dialog .vertical-tabs__menu-link .form-required::after {
+  content: "*";
+  color: var(--gin-color-danger);
+  line-height: 1;
+  margin-right: .15em;
+  margin-left: .15em;
+  vertical-align: text-top;
+  background: none;
+}
+
+.ui-dialog .claro-details.error {
+  border: 2px solid var(--gin-color-danger);
+}
+
+.ui-dialog .claro-details__summary:not(.form-required) .required-mark {
+  display: none;
+}
+
+.ui-dialog .form-item__warning {
+  display: inline-block;
+  margin-top: var(--gin-spacing-xs);
+}
+
+[dir="ltr"] .ui-dialog html.js .form-autocomplete {
+  padding-right: 36px;
+}
+
+[dir="rtl"] .ui-dialog html.js .form-autocomplete {
+  padding-left: 36px;
+}
+
+.ui-dialog .entity-form-display-form > .form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ui-dialog .required-mark::after {
+  background: var(--gin-color-danger);
+  -webkit-mask-image: url("../../media/sprite.svg#asterisk-view");
+          mask-image: url("../../media/sprite.svg#asterisk-view");
+  -webkit-mask-position: center center;
+          mask-position: center center;
+  -webkit-mask-size: 100% 100%;
+          mask-size: 100% 100%;
+}
+
+.ui-dialog .form-wrapper .form-item__label,
+.ui-dialog .form-composite .form-item__label {
+  position: relative;
+}
+
+.ui-dialog .field--type-text-with-summary .form-item,
+.ui-dialog .field--widget-text-textarea .form-item {
+  margin-bottom: 0;
+}
+
+.ui-dialog .field--type-text-with-summary .filter-wrapper,
+.ui-dialog .field--widget-text-textarea .filter-wrapper {
+  border: 0 none;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+[dir="ltr"] .ui-dialog html.js input.form-linkit-autocomplete {
+  padding-right: var(--gin-spacing-xl);
+  background-position: right 8px center;
+}
+
+[dir="rtl"] .ui-dialog html.js input.form-linkit-autocomplete {
+  padding-left: var(--gin-spacing-xl);
+  background-position: left 8px center;
+}
+
+.ui-dialog .claro-autocomplete {
+  width: calc(100% - var(--gin-spacing-m));
+}
+
+.ui-dialog .claro-autocomplete .form-autocomplete {
+  width: 100%;
+}
+
+.ui-dialog .no-touchevents .form-element--type-select.form-element--extrasmall {
+  font-size: var(--gin-font-size-s);
+  line-height: 1.5;
+  min-height: 1.75rem;
+}
+
+.ui-dialog #block-gin-content > form > .form-item:first-of-type {
+  margin-top: 0;
+}
+
+[dir="ltr"] .ui-dialog .image-style-new .form-item {
+  margin-right: var(--gin-spacing-xxs);
+}
+
+[dir="rtl"] .ui-dialog .image-style-new .form-item {
+  margin-left: var(--gin-spacing-xxs);
+}
+
+.ui-dialog tr .form-item {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ui-dialog .container-inline .form-item {
+  margin-top: var(--gin-spacing-density-s);
+  margin-bottom: var(--gin-spacing-density-s);
+}
+
+.ui-dialog .field-plugin-settings-edit-form {
+  margin-top: var(--gin-spacing-s);
+}
+
+.ui-dialog .field-plugin-settings-edit-form .form-item {
+  margin-top: var(--gin-spacing-m);
+  margin-bottom: var(--gin-spacing-m);
+}
+
+.ui-dialog .field-plugin-settings-edit-form .form-boolean-group .form-item {
+  margin-top: var(--gin-spacing-xs);
+  margin-bottom: var(--gin-spacing-xs);
+}
+
+.ui-dialog .length-indicator {
+  margin-bottom: var(--gin-spacing-l);
+}
+

web/themes/gin/dist/css/theme/font.css

@@ -0,0 +1,11 @@
+/* Inter v3.19 */
+
+@font-face {
+  font-family: "Ginter";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url(../../media/font/inter.woff2) format("woff2 supports variations(gvar)"), url(../../media/font/inter.woff2) format("woff2-variations"), url(../../media/font/inter.woff2) format("woff2");
+}
+

web/themes/gin/dist/css/theme/legacy.css

@@ -0,0 +1,120 @@
+body {
+  --colorGinTitle: var(--gin-color-title);
+  --colorGinText: var(--gin-color-text);
+  --colorGinTextLight: var(--gin-color-text-light);
+  --colorGinFocus: var(--gin-color-focus);
+  --colorGinFocusBorder: var(--gin-color-focus-border);
+  --colorGinFocusNeutralRGB: var(--gin-color-focus-neutral-rgb);
+  --colorGinDisabled: var(--gin-color-disabled);
+  --colorGinDisabledText: var(--gin-color-disabled-text);
+  --colorGinWarning: var(--gin-color-warning);
+  --colorGinWarningLight: var(--gin-color-warning-light);
+  --colorGinWarningBackground: var(--gin-bg-warning);
+  --colorGinWarningLightBackground: var(--gin-bg-warning-light);
+  --colorGinDanger: var(--gin-color-danger);
+  --colorGinDangerLightest: var(--gin-color-danger-lightest);
+  --colorGinDangerLight: var(--gin-color-danger-light);
+  --colorGinDangerBackground: var(--gin-bg-danger);
+  --colorGinDangerLightBackground: var(--gin-bg-danger-light);
+  --colorGinGreen: var(--gin-color-green);
+  --colorGinGreenLight: var(--gin-color-green-light);
+  --colorGinGreenLightest: var(--gin-color-green-lightest);
+  --colorGinGreenBackground: var(--gin-bg-green);
+  --colorGinGreenLightBackground: var(--gin-bg-green-light);
+  --colorGinInfo: var(--gin-color-info);
+  --colorGinInfoLight: var(--gin-color-info-light);
+  --colorGinInfoBackground: var(--gin-bg-info);
+  --colorGinContextual: var(--gin-color-contextual);
+  --colorGinContextualText: var(--gin-color-contextual-text);
+  --colorGinInputBackground: var(--gin-bg-input);
+  --colorGinLayerBackground: var(--gin-bg-layer);
+  --colorGinLayer2Background: var(--gin-bg-layer2);
+  --colorGinLayer3Background: var(--gin-bg-layer3);
+  --colorGinLayer4Background: var(--gin-bg-layer4);
+  --colorGinSecondaryBackground: var(--gin-bg-secondary);
+  --colorGinTableHeader: var(--gin-bg-header);
+  --colorGinPattern: var(--gin-pattern);
+  --colorGinPatternFallback: var(--gin-pattern-fallback);
+  --ginSizePatternSquare: var(--gin-pattern-square);
+  --ginFont: var(--gin-font);
+  --ginFontSizeSmallest: var(--gin-font-size-xxs);
+  --ginFontSizeSmaller: var(--gin-font-size-xs);
+  --ginFontSizeSmall: var(--gin-font-size-s);
+  --ginFontSize: var(--gin-font-size);
+  --ginFontSizeLarge: var(--gin-font-size-l);
+  --ginFontSizeXLarge: var(--gin-font-size-xl);
+  --ginFontSizeH3: var(--gin-font-size-h3);
+  --ginFontSizeH2: var(--gin-font-size-h2);
+  --ginFontSizeH1: var(--gin-font-size-h1);
+  --ginFontSizeQuote: var(--gin-font-size-quote);
+  --ginFontWeightNormal: var(--gin-font-weight-normal);
+  --ginFontWeightSemiBold: var(--gin-font-weight-semibold);
+  --ginFontWeightBold: var(--gin-font-weight-bold);
+  --ginFontWeightUltra: var(--gin-font-weight-heavy);
+  --ginSpacingTiny: var(--gin-spacing-xxs);
+  --ginSpacingXsmall: var(--gin-spacing-xs);
+  --ginSpacingSmall: var(--gin-spacing-s);
+  --ginSpacingDefault: var(--gin-spacing-m);
+  --ginSpacingMedium: var(--gin-spacing-l);
+  --ginSpacingLarge: var(--gin-spacing-xl);
+  --ginSpacingXlarge: var(--gin-spacing-xxl);
+  --ginSpacingXxlarge: var(--gin-spacing-xxxl);
+  --ginSpacingDensityTiny: var(--gin-spacing-density-xxs);
+  --ginSpacingDensityXsmall: var(--gin-spacing-density-xs);
+  --ginSpacingDensitySmall: var(--gin-spacing-density-s);
+  --ginSpacingDensityDefault: var(--gin-spacing-density-m);
+  --ginSpacingDensityMedium: var(--gin-spacing-density-l);
+  --ginSpacingDensityLarge: var(--gin-spacing-density-xl);
+  --ginSpacingDensityXlarge: var(--gin-spacing-density-xxl);
+  --ginSpacingDensityXxlarge: var(--gin-spacing-density-xxxl);
+  --colorGinIcons: var(--gin-icon-color);
+  --iconGinSecondaryToolbar: var(--gin-icon-size-toolbar-secondary);
+  --iconGinToolbar: var(--gin-icon-size-toolbar);
+  --iconGinSidebarToggle: var(--gin-icon-size-sidebar-toggle);
+  --ginBorderTiny: var(--gin-border-xxs);
+  --ginBorderXSmall: var(--gin-border-xs);
+  --ginBorderSmall: var(--gin-border-s);
+  --ginBorderDefault: var(--gin-border-m);
+  --ginBorderMedium: var(--gin-border-l);
+  --ginBorderLarge: var(--gin-border-xl);
+  --colorGinBorder: var(--gin-border-color);
+  --colorGinSecondaryBorder: var(--gin-border-color-secondary);
+  --colorGinLayerBorder: var(--gin-border-color-layer);
+  --colorGinLayer2Border: var(--gin-border-color-layer2);
+  --colorGinTableBorder: var(--gin-border-color-table);
+  --colorGinTableHeaderBorder: var(--gin-border-color-table-header);
+  --colorGinFormElementBorder: var(--gin-border-color-form-element);
+  --ginEasing: var(--gin-easing);
+  --ginTransition: var(--gin-transition);
+  --ginTransitionFast: var(--gin-transition-fast);
+  --ginShadowLevel1: var(--gin-shadow-l1);
+  --ginShadowLevel2: var(--gin-shadow-l2);
+  --ginStickyHeight: var(--gin-height-sticky);
+  --ginToolbarWidthCollapsed: var(--gin-toolbar-width-collapsed);
+  --ginToolbarWidth: var(--gin-toolbar-width);
+  --ginToolbarHeight: var(--gin-toolbar-height);
+  --ginToolbarSecondaryHeight: var(--gin-toolbar-secondary-height);
+  --ginHorizontalToolbarOffset: var(--gin-toolbar-y-offset);
+  --ginVerticalToolbarOffset: var(--gin-toolbar-x-offset);
+  --ginScrollOffset: var(--gin-scroll-offset);
+  --ginSidebarWidth: var(--gin-sidebar-width);
+  --ginSidebarOffset: var(--gin-sidebar-offset);
+  --ginStickyOffset: var(--gin-sticky-offset);
+  --colorGinSwitch: var(--gin-switch);
+  --colorGinButtonShadow: var(--gin-shadow-button);
+  --colorGinButtonText: var(--gin-color-button-text);
+  --colorGinAppBackground: var(--gin-bg-app);
+  --colorGinAppBackgroundRGB: var(--gin-bg-app-rgb);
+  --colorGinPrimary: var(--gin-color-primary);
+  --colorGinPrimaryHover: var(--gin-color-primary-hover);
+  --colorGinPrimaryActive: var(--gin-color-primary-active);
+  --colorGinPrimaryRGB: var(--gin-color-primary-rgb);
+  --colorGinPrimaryLight: var(--gin-color-primary-light);
+  --colorGinPrimaryLightRGB: var(--gin-color-primary-light-rgb);
+  --colorGinPrimaryLightHover: var(--gin-color-primary-light-hover);
+  --colorGinPrimaryLightActive: var(--gin-color-primary-light-active);
+  --colorGinPrimaryLightShadow: var(--gin-shadow-primary-light);
+  --colorGinItemHover: var(--gin-bg-item-hover);
+  --colorGinStickyRGB: var(--gin-color-sticky-rgb);
+}
+

web/themes/gin/dist/css/theme/variables.css

@@ -0,0 +1,222 @@
+:root {
+  --gin-color-title: #222330;
+  --gin-color-text: #222330;
+  --gin-color-text-light: #545560;
+  --gin-color-focus: rgba(0, 125, 250, .6);
+  --gin-color-focus-border: rgba(0, 0, 0, .2);
+  --gin-color-focus-neutral-rgb: rgba(0, 0, 0, .4);
+  --gin-color-disabled: #8d8d8d;
+  --gin-color-disabled-bg: #eaeaea;
+  --gin-color-disabled-border: #c2c2c2;
+  --gin-color-warning: #d8b234;
+  --gin-color-warning-light: #efcf64;
+  --gin-bg-warning: #605328;
+  --gin-bg-warning-light: rgba(226, 151, 0, .08);
+  --gin-color-danger: #cc3d3d;
+  --gin-color-danger-lightest: #fdd9d9;
+  --gin-color-danger-light: #f39b9d;
+  --gin-bg-danger: #583333;
+  --gin-bg-danger-light: rgba(222, 117, 96, .1);
+  --gin-color-green: #058260;
+  --gin-color-green-light: #32cea4;
+  --gin-color-green-lightest: #adebdb;
+  --gin-bg-green: #145242;
+  --gin-bg-green-light: rgba(72, 171, 123, .1);
+  --gin-color-info: #082538;
+  --gin-color-info-light: #589ac5;
+  --gin-bg-info: #122b3c;
+  --gin-color-contextual: var(--gin-color-text);
+  --gin-color-contextual-text: #eee;
+  --gin-bg-input: #fff;
+  --gin-bg-layer: #fff;
+  --gin-bg-layer2: #edeff5;
+  --gin-bg-layer3: #fff;
+  --gin-bg-layer4: #e2e5ec;
+  --gin-bg-secondary: var(--gin-bg-layer);
+  --gin-bg-header: #eeeff3;
+  --gin-bg-unpublished: var(--gin-bg-danger-light);
+  --gin-pattern: var(--gin-border-color);
+  --gin-pattern-fallback: var(--gin-bg-layer2);
+  --gin-pattern-square: .5rem;
+  --gin-font: Ginter, Inter, "Helvetica Neue", BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+  --gin-font-size-xxs: .75rem;
+  --gin-font-size-xs: small;
+  --gin-font-size-s: .875rem;
+  --gin-font-size: 1rem;
+  --gin-font-size-m: var(--gin-font-size);
+  --gin-font-size-l: 1.125rem;
+  --gin-font-size-xl: 1.25rem;
+  --gin-font-size-h3: 1.5rem;
+  --gin-font-size-h2: 1.75rem;
+  --gin-font-size-h1: 1.6rem;
+  --gin-font-size-quote: 1.1em;
+  --gin-font-weight-normal: 400;
+  --gin-font-weight-semibold: 525;
+  --gin-font-weight-bold: 575;
+  --gin-font-weight-heavy: 625;
+  --gin-spacing-xxxs: .125rem;
+  --gin-spacing-xxs: .25rem;
+  --gin-spacing-xs: .5rem;
+  --gin-spacing-s: .75rem;
+  --gin-spacing-m: 1rem;
+  --gin-spacing-l: 1.5rem;
+  --gin-spacing-xl: 2rem;
+  --gin-spacing-xxl: 3rem;
+  --gin-spacing-xxxl: 4rem;
+  --gin-icon-color: #414247;
+  --gin-icon-size-close: 20px;
+  --gin-icon-size-toolbar-secondary: 17px;
+  --gin-icon-size-toolbar: 17px;
+  --gin-icon-size-sidebar-toggle: 21px;
+  --gin-border-xxs: .125rem;
+  --gin-border-xs: .25rem;
+  --gin-border-s: .375rem;
+  --gin-border-m: .5rem;
+  --gin-border-l: .75rem;
+  --gin-border-xl: 1rem;
+  --gin-border-color: #d4d4d8;
+  --gin-border-color-secondary: rgba(0, 0, 0, .08);
+  --gin-border-color-layer: rgba(0, 0, 0, .08);
+  --gin-border-color-layer2: #d4d4d8;
+  --gin-border-color-table: rgba(0, 0, 0, .1);
+  --gin-border-color-table-header: rgba(0, 0, 0, .2);
+  --gin-border-color-form-element: #8e929c;
+  --size-summary-border-radius: calc(var(--gin-border-m) - 1px);
+  --gin-easing: cubic-bezier(.19, 1, .22, 1);
+  --gin-transition: .15s var(--gin-easing);
+  --gin-transition-fast: .3s var(--gin-easing);
+  --gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
+  --gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%), 0 20px 24px rgb(20 45 82 / 12%);
+  --gin-height-sticky: 60px;
+  --gin-toolbar-width-collapsed: 66px;
+  --gin-toolbar-width: 256px;
+  --gin-toolbar-height: 0px;
+  --gin-toolbar-secondary-height: 0px;
+  --gin-toolbar-bg-level2: #edeff5;
+  --gin-toolbar-bg-level3: rgba(44, 45, 47, .05);
+  --gin-toolbar-y-offset: 0px;
+  --gin-toolbar-x-offset: 0px;
+  --gin-scroll-offset: 0px;
+  --gin-sticky-offset: 0px;
+  --gin-sidebar-width: 320px;
+  --gin-sidebar-offset: var(--gin-sidebar-width);
+  --gin-switch: #26a769;
+  --gin-shadow-button: #00000033;
+  --gin-color-button-text: #fff;
+  --gin-offset-x: var(--gin-toolbar-x-offset);
+  --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
+  --gin-link-decoration-style: dotted;
+  --gin-max-line-length: 80ch;
+  --input-line-height: var(--gin-spacing-l);
+  --input-padding-horizontal: var(--gin-spacing-s);
+  --input-padding-vertical: var(--gin-spacing-xs);
+  --jui-dialog-z-index: 1260;
+}
+
+@media (min-width: 61em) {
+  :root {
+    --gin-font-size-h1: 1.8125rem;
+    --gin-font-size-quote: 1.2em;
+  }
+}
+
+@media (min-width: 90em) {
+  :root {
+    --gin-font-size-h1: 2.125rem;
+  }
+}
+
+@media (min-width: 61em) {
+  :root {
+    --gin-icon-size-toolbar: 20px;
+  }
+}
+
+@media (min-width: 64em) {
+  :root {
+    --gin-sticky-offset: var(--gin-height-sticky);
+  }
+}
+
+@media (min-width: 80em) {
+  :root {
+    --gin-sidebar-width: 360px;
+  }
+}
+
+[data-gin-layout-density=small] {
+  --gin-spacing-density-xxs: .15625rem;
+  --gin-spacing-density-xs: .3125rem;
+  --gin-spacing-density-s: .46875rem;
+  --gin-spacing-density-m: .625rem;
+  --gin-spacing-density-l: .9375rem;
+  --gin-spacing-density-xl: 1.25rem;
+  --gin-spacing-density-xxl: 1.875rem;
+  --gin-spacing-density-xxxl: 2.5rem;
+}
+
+[data-gin-layout-density=medium] {
+  --gin-spacing-density-xxs: .1875rem;
+  --gin-spacing-density-xs: .375rem;
+  --gin-spacing-density-s: .5625rem;
+  --gin-spacing-density-m: .75rem;
+  --gin-spacing-density-l: 1.125rem;
+  --gin-spacing-density-xl: 1.5rem;
+  --gin-spacing-density-xxl: 2.25rem;
+  --gin-spacing-density-xxxl: 3rem;
+}
+
+:root {
+  --gin-spacing-density-xxs: .25rem;
+  --gin-spacing-density-xs: .5rem;
+  --gin-spacing-density-s: .75rem;
+  --gin-spacing-density-m: 1rem;
+  --gin-spacing-density-l: 1.5rem;
+  --gin-spacing-density-xl: 2rem;
+  --gin-spacing-density-xxl: 3rem;
+  --gin-spacing-density-xxxl: 4rem;
+}
+
+.gin--dark-mode {
+  --gin-color-title: #fff;
+  --gin-color-text: #d2d3d3;
+  --gin-color-text-light: #9e9fa0;
+  --gin-shadow-button: rgba(#111, .9);
+  --gin-color-button-text: #111;
+  --gin-color-focus: rgb(81, 168, 255);
+  --gin-color-focus-border: rgba(0, 0, 0, .8);
+  --gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);
+  --gin-color-disabled: #646464;
+  --gin-color-disabled-border: #646464;
+  --gin-color-disabled-bg: #47474c;
+  --gin-color-warning: #dec15f;
+  --gin-bg-warning-light: rgba(222, 193, 95, .1);
+  --gin-color-danger: #ce6060;
+  --gin-color-danger-lightest: #483439;
+  --gin-color-green: #32cea4;
+  --gin-color-info: #559bca;
+  --gin-bg-input: var(--gin-bg-layer2);
+  --gin-bg-app: #1b1b1d;
+  --gin-bg-layer: #2a2a2d;
+  --gin-bg-layer2: #3b3b3f;
+  --gin-bg-layer3: #47474c;
+  --gin-bg-layer4: #19191b;
+  --gin-bg-secondary: var(--gin-bg-app);
+  --gin-bg-unpublished: var(--gin-bg-warning-light);
+  --gin-color-contextual: var(--gin-bg-layer3);
+  --gin-border-color: #43454a;
+  --gin-border-color-secondary: rgba(255, 255, 255, .075);
+  --gin-border-color-layer: rgba(0, 0, 0, .05);
+  --gin-border-color-layer2: #76777b;
+  --gin-border-color-table: #43454a;
+  --gin-border-color-table-header: rgba(255, 255, 255, .12);
+  --gin-border-color-form-element: var(--gin-border-color-layer2);
+  --gin-bg-header: #1b1b1d;
+  --gin-switch: var(--gin-color-primary);
+  --gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%);
+  --gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%), 0 20px 24px rgb(0 0 0 / 12%);
+  --gin-icon-color: #888;
+  --gin-pattern-fallback: var(--gin-bg-layer2);
+  --gin-pattern: var(--gin-border-color);
+}
+