clean install

web/themes/gin/styles/theme/accent.scss

@@ -0,0 +1,134 @@
+[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: #{color.red($colorDarkAppBackground)}, #{color.green($colorDarkAppBackground)}, #{color.blue($colorDarkAppBackground)};
+}
+
+// Light mode
+$ginColors: (
+  blue: #0550e6,
+  light_blue: #3275e0,
+  dark_purple: #4300bf,
+  purple: #5b00ff,
+  teal: #10857f,
+  green: #00875f,
+  red: #d8002f,
+  orange: #ef5c20,
+  yellow: #c58900,
+  pink: #e23177,
+  neutral: #111111,
+  custom: #111111,
+);
+
+@each $name, $color in $ginColors {
+  [data-gin-accent=#{'' + $name}] {
+    $bgColor: mix(white, $color, 97%);
+    $lightColor: mix(white, $color, 80%);
+    $stickyColor: mix(white, $color, 92%);
+
+    --gin-color-primary-rgb: #{color.red($color)}, #{color.green($color)}, #{color.blue($color)};
+    --gin-color-primary-light-rgb: #{color.red($lightColor)}, #{color.green($lightColor)}, #{color.blue($lightColor)};
+    --gin-color-primary-hover: #{mix(black, $color, 15%)};
+    --gin-color-primary-active: #{mix(black, $color, 25%)};
+    --gin-bg-app-rgb: #{color.red($bgColor)}, #{color.green($bgColor)}, #{color.blue($bgColor)};
+    --gin-bg-header: #{mix(white, $color, 88%)};
+    --gin-color-sticky-rgb: #{color.red($stickyColor)}, #{color.green($stickyColor)}, #{color.blue($stickyColor)};
+
+    @if $name == dark_purple or $name == purple {
+      --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);
+    }
+  }
+}
+
+// Dark mode
+$ginDarkmodeColors: (
+  blue: #90aeef,
+  claro_blue: #7391d8,
+  light_blue: #82bfe8,
+  dark_purple: #ad8fe8,
+  purple: #dba5ef,
+  teal: #00ead0,
+  green: #6bd4a1,
+  red: #ec8989,
+  orange: #f79576,
+  yellow: #f1c970,
+  pink: #e79da3,
+  neutral: #ffffff,
+  custom: #ffffff,
+);
+
+@each $name, $color in $ginDarkmodeColors {
+  $lightColor: mix(#2A2A2D, $color, 80%);
+
+  .gin--dark-mode[data-gin-accent=#{'' + $name}],
+  .gin--dark-mode [data-gin-accent=#{'' + $name}] {
+    --gin-color-primary-rgb: #{color.red($color)}, #{color.green($color)}, #{color.blue($color)};
+    --gin-color-primary-light-rgb: #{color.red($lightColor)}, #{color.green($lightColor)}, #{color.blue($lightColor)};
+    --gin-color-primary-hover: #{mix(white, $color, 10%)};
+    --gin-color-primary-active: #{mix(white, $color, 15%)};
+    --gin-bg-header: #{mix(#2A2A2D, $color, 87.5%)};
+  }
+}
+
+// High contrast mode
+.gin--high-contrast-mode {
+  $highContrastMode: rgba(0, 0, 0, .8);
+
+  --gin-bg-app: #d9dbde;
+  --gin-color-text: #{$highContrastMode};
+  --gin-color-text-light: #{$highContrastMode};
+  --gin-icon-color: #{$highContrastMode};
+  --gin-color-focus: #{$highContrastMode};
+  --gin-border-color: #{$highContrastMode};
+  --gin-border-color-secondary: rgba(0, 0, 0, .6);
+  --gin-border-color-layer: rgba(0, 0, 0, .6);
+  --gin-border-color-layer2: #{$highContrastMode};
+  --gin-border-color-table: #{$highContrastMode};
+  --gin-border-color-table-header: #{$highContrastMode};
+  --gin-border-color-form-element: #{$highContrastMode};
+
+  .gin--dark-mode & {
+    $highContrastMode: rgba(255, 255, 255, .8);
+
+    --gin-bg-app: #000;
+    --gin-color-text: #{$highContrastMode};
+    --gin-color-text-light: #{$highContrastMode};
+    --gin-icon-color: #{$highContrastMode};
+    --gin-color-focus: #{$highContrastMode};
+    --gin-border-color: #{$highContrastMode};
+    --gin-border-color-secondary: rgba(255, 255, 255, .6);
+    --gin-border-color-layer: rgba(255, 255, 255, .6);
+    --gin-border-color-layer2: #{$highContrastMode};
+    --gin-border-color-table: #{$highContrastMode};
+    --gin-border-color-table-header: #{$highContrastMode};
+    --gin-border-color-form-element: #{$highContrastMode};
+  }
+}
+
+// Focus
+$ginFocusColors: (
+  green: rgba(8, 163, 144, .6), //= #08a390
+  claro: rgba(38, 167, 105, .6), //= #26a769
+  orange: rgba(236, 124, 87, .6), //= #ec7c57
+  dark: var(--gin-color-focus-neutral-rgb),
+  accent: rgba(var(--gin-color-primary-rgb), .6),
+);
+
+@each $name, $color in $ginFocusColors {
+  [data-gin-focus=#{'' + $name}] {
+    --gin-color-focus: #{$color};
+  }
+}

web/themes/gin/styles/theme/ckeditor.scss

@@ -0,0 +1,67 @@
+body.cke_editable_themed {
+  color: var(--gin-color-text);
+
+  &.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_menu {
+    .cke_menubutton_icon {
+      background-color: var(--gin-bg-app);
+      .cke_button_icon {
+        .gin--dark-mode & {
+          filter: invert(1);
+        }
+      }
+    }
+    .cke_menubutton_label {
+      color: var(--gin-color-text);
+    }
+    .cke_menubutton_shortcut {
+      color: var(--gin-color-text-light);
+    }
+
+    a {
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: var(--gin-color-primary-light);
+
+        .cke_menubutton_icon {
+          background-color: var(--gin-color-primary-light);
+        }
+      }
+    }
+  }
+}
+
+// Include quote style
+body.cke_editable_themed {
+  @import "../base/_quotation.scss";
+}

web/themes/gin/styles/theme/dialog.scss

@@ -0,0 +1,5 @@
+.ui-dialog {
+  @import "../base/color-overrides";
+  @import "../base/button";
+  @import "../base/form";
+}

web/themes/gin/styles/theme/font.scss

@@ -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("~font/inter.woff2") format("woff2 supports variations(gvar)"),
+       url("~font/inter.woff2") format("woff2-variations"),
+       url("~font/inter.woff2") format("woff2");
+}

web/themes/gin/styles/theme/legacy.scss

@@ -0,0 +1,161 @@
+body {
+  // Colors
+  --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);
+
+  // Background
+  --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);
+
+  // Color pattern
+  --colorGinPattern: var(--gin-pattern);
+  --colorGinPatternFallback: var(--gin-pattern-fallback);
+  --ginSizePatternSquare: var(--gin-pattern-square);
+
+  // Font
+  --ginFont: var(--gin-font);
+
+  // Font sizes
+  --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);
+
+  // Font weights
+  --ginFontWeightNormal: var(--gin-font-weight-normal);
+  --ginFontWeightSemiBold: var(--gin-font-weight-semibold);
+  --ginFontWeightBold: var(--gin-font-weight-bold);
+  --ginFontWeightUltra: var(--gin-font-weight-heavy);
+
+  // Spacings
+  --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);
+
+  // Density spacings
+  --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);
+
+  // Icons
+  --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);
+
+  // Border
+  --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);
+
+  // Transitions / Animations
+  --ginEasing: var(--gin-easing);
+  --ginTransition: var(--gin-transition);
+  --ginTransitionFast: var(--gin-transition-fast);
+
+  // Shadows
+  --ginShadowLevel1: var(--gin-shadow-l1);
+  --ginShadowLevel2: var(--gin-shadow-l2);
+
+  // Sticky bar
+  --ginStickyHeight: var(--gin-height-sticky);
+
+  // Toolbar
+  --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);
+
+  // Sidebar
+  --ginSidebarWidth: var(--gin-sidebar-width);
+  --ginSidebarOffset: var(--gin-sidebar-offset);
+
+  // Sticky
+  --ginStickyOffset: var(--gin-sticky-offset);
+
+  // Switch
+  --colorGinSwitch: var(--gin-switch);
+
+  // Buttons
+  --colorGinButtonShadow: var(--gin-shadow-button);
+  --colorGinButtonText: var(--gin-color-button-text);
+
+  // Accent
+  --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/styles/theme/variables.scss

@@ -0,0 +1,288 @@
+:root {
+  // Colors
+  --gin-color-title: #222330;
+  --gin-color-text: #222330;
+  --gin-color-text-light: #545560;
+
+  --gin-color-focus: rgba(0, 125, 250, .6); // #059fad; //#00a590; //#0ba77d; //#2297c7;
+  --gin-color-focus-border: rgba(0, 0, 0, .2); //rgb(0, 125, 250);
+  --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: #{mix(black, #efcf64, 60%)};
+  --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: #{mix(black, #dc7f7f, 60%)};
+  --gin-bg-danger-light: rgba(222, 117, 96, .1);
+  --gin-color-green: #058260;
+  --gin-color-green-light: #32cea4;
+  --gin-color-green-lightest:  #{mix(white, #32cea4, 60%)};
+  --gin-bg-green: #{mix(black, #32cea4, 60%)};
+  --gin-bg-green-light: rgba(72, 171, 123, .1);
+  --gin-color-info: #082538;
+  --gin-color-info-light: #589ac5;
+  --gin-bg-info: #{mix(black, #2d6c96, 60%)};
+
+  --gin-color-contextual: var(--gin-color-text);
+  --gin-color-contextual-text: #eee;
+
+  // Background
+  --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; //#e6e8ef;
+
+  // Unpublished
+  --gin-bg-unpublished: var(--gin-bg-danger-light);
+
+  // Color pattern
+  --gin-pattern: var(--gin-border-color);
+  --gin-pattern-fallback: var(--gin-bg-layer2);
+  --gin-pattern-square: .5rem;
+
+  // Font
+  --gin-font: Ginter, Inter, 'Helvetica Neue', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
+
+  // Font sizes
+  --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;
+
+  // Font weights
+  --gin-font-weight-normal: 400;
+  --gin-font-weight-semibold: 525;
+  --gin-font-weight-bold: 575;
+  --gin-font-weight-heavy: 625;
+
+  @include mq(medium) {
+    --gin-font-size-h1: 1.8125rem;
+    --gin-font-size-quote: 1.2em;
+  }
+
+  @include mq(ultra) {
+    --gin-font-size-h1: 2.125rem;
+  }
+
+  // Spacings
+  --gin-spacing-xxxs:#{rem(2px)};
+  --gin-spacing-xxs:#{rem(4px)};
+  --gin-spacing-xs: #{rem(8px)};
+  --gin-spacing-s: #{rem(12px)};
+  --gin-spacing-m: #{rem(16px)};
+  --gin-spacing-l: #{rem(24px)};
+  --gin-spacing-xl: #{rem(32px)};
+  --gin-spacing-xxl: #{rem(48px)};
+  --gin-spacing-xxxl: #{rem(64px)};
+
+  // Icons
+  --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;
+
+  @include mq(medium) {
+    --gin-icon-size-toolbar: 20px;
+  }
+
+  // Border
+  --gin-border-xxs: #{rem(2px)};
+  --gin-border-xs: #{rem(4px)};
+  --gin-border-s: #{rem(6px)};
+  --gin-border-m: #{rem(8px)};
+  --gin-border-l: #{rem(12px)};
+  --gin-border-xl: #{rem(16px)};
+
+  --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);
+
+  // Transitions / Animations
+  --gin-easing: cubic-bezier(.19, 1, .22, 1);
+  --gin-transition: .15s var(--gin-easing);
+  --gin-transition-fast: .3s var(--gin-easing);
+
+  // Shadows
+  --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%);
+
+  // Sticky bar
+  --gin-height-sticky: 60px;
+
+  // Toolbar
+  --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(#2c2d2f, .05)};
+
+  // Offsets
+  --gin-toolbar-y-offset: 0px;
+  --gin-toolbar-x-offset: 0px;
+  --gin-scroll-offset: 0px;
+  --gin-sticky-offset: 0px;
+
+  @include mq(large) {
+    --gin-sticky-offset: var(--gin-height-sticky);
+  }
+
+  // Sidebar
+  --gin-sidebar-width: 320px;
+  --gin-sidebar-offset: var(--gin-sidebar-width);
+  @include mq(wide) {
+    --gin-sidebar-width: 360px;
+  }
+
+  // Switch
+  --gin-switch: #26a769; //#0e9888;
+
+  // Buttons
+  --gin-shadow-button: #00000033;
+  --gin-color-button-text: #fff;
+
+  // Drupal
+  --gin-offset-x: var(--gin-toolbar-x-offset);
+  --gin-offset-y: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));
+
+  // Links
+  --gin-link-decoration-style: dotted;
+
+  // Max line length
+  --gin-max-line-length: 80ch;
+
+  // Form fields
+  --input-line-height: var(--gin-spacing-l);
+  --input-padding-horizontal: var(--gin-spacing-s);
+  --input-padding-vertical: var(--gin-spacing-xs);
+
+  // Claro
+  --jui-dialog-z-index: 1260;
+}
+
+// Density spacings
+@each $name, $density in $ginLayoutDensity {
+  @if $name == 'default' {
+    :root {
+      @each $name, $size in $ginSpacings {
+        --gin-spacing-density-#{$name}: #{rem($size * $density)};
+      }
+    }
+  } @else {
+    [data-gin-layout-density=#{$name}] {
+      @each $name, $size in $ginSpacings {
+        --gin-spacing-density-#{$name}: #{rem($size * $density)};
+      }
+    }
+  }
+}
+
+.gin--dark-mode {
+   // Text
+   --gin-color-title: #fff;
+   --gin-color-text: #d2d3d3;
+   --gin-color-text-light: #9e9fa0;
+
+  // Buttons
+  --gin-shadow-button: rgba(#111, .9);
+  --gin-color-button-text: #111;
+
+  // Focus
+  --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);
+
+  // Disabled
+  --gin-color-disabled: #646464;
+  --gin-color-disabled-border: #646464;
+  --gin-color-disabled-bg: #47474c;
+
+  // Messages
+  --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;
+
+  // Input
+  --gin-bg-input: var(--gin-bg-layer2);
+
+  // Layers
+  --gin-bg-app: #{$colorDarkAppBackground};
+  --gin-bg-layer: #2A2A2D;
+  --gin-bg-layer2: #3B3B3F;
+  --gin-bg-layer3: #47474c;
+  --gin-bg-layer4: #19191b;
+  --gin-bg-secondary: var(--gin-bg-app);
+
+  // Unpublished
+  --gin-bg-unpublished: var(--gin-bg-warning-light);
+
+  // Context
+  --gin-color-contextual: var(--gin-bg-layer3);
+
+  // Borders
+  --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;
+
+  // Tabs
+  --gin-border-color-table-header: rgba(255, 255, 255, .12);
+
+  // Form element
+  --gin-border-color-form-element: var(--gin-border-color-layer2);
+
+  // Table
+  --gin-bg-header: #{$colorDarkAppBackground};
+
+  // Toggle
+  --gin-switch: var(--gin-color-primary);
+
+  // Shadows
+  --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%);
+
+  // Icons
+  --gin-icon-color: #888;
+
+  // Color pattern
+  --gin-pattern-fallback: var(--gin-bg-layer2);
+  --gin-pattern: var(--gin-border-color);
+}