.gitignore

 /.sass-cache
-/css
+/css/styles.css
+/css/panels
 /.bundle
 /vendor
+._*
+
+# OS/IDE generated files #
+######################
+.DS_Store*
+._.DS_Store*
+ehthumbs.db
+Icon?
+Thumbs.db
+.idea
+*nbproject*

.gitlab-ci.yml

+default:
+  image: ruby:2.7
+
+stages:
+  - build
+
+.commit_setup: &commit_setup
+  - git config --global user.email "noreply+ci@drupal.org"
+  - git config --global user.name "Drupal.org build script"
+  - git remote add origin-rw "git@${CI_SERVER_SHELL_SSH_HOST}:${CI_PROJECT_PATH}.git"
+  - eval "$(ssh-agent -s)"
+  - ssh-add - < "${write_access_ssh_key}"
+  - mkdir ~/.ssh
+  - echo "${known_hosts}" > ~/.ssh/known_hosts
+
+merge-to-branded:
+  stage: build
+  rules:
+    - if: $CI_COMMIT_BRANCH == "7.x-2.x" && $write_access_ssh_key
+  script:
+    - *commit_setup
+    - git fetch origin branded-2.x || exit 0
+    - git checkout branded-2.x
+    - git merge origin/7.x-2.x
+    - git push origin-rw branded-2.x
+
+composss-compile:
+  stage: build
+  rules:
+    - if: $CI_COMMIT_MESSAGE !~ /^Compass compile/ && $write_access_ssh_key
+  script:
+    - bundle config --global frozen 1
+    - bundle install
+    - bundle exec compass compile
+    - test $CI_COMMIT_BRANCH = 'branded-2.x' || exit 0
+    - test -n "$(git status --short css)" || exit 0
+    - git checkout $CI_COMMIT_BRANCH
+    - *commit_setup
+    - git add -A css
+    - git commit -m 'Compass compile'
+    - git push origin-rw branded-2.x

Gemfile

@@ -6,6 +6,8 @@ group :development do
   gem 'sass'                    # Sass.
   gem 'compass'                 # Framework built on Sass.
   gem 'susy'                    # Susy grid framework.
+  gem 'singularitygs'           # Alternative to the Susy grid framework.
+  gem 'toolkit'                 # Compass utility from the fabulous Snugug.
   gem 'breakpoint'              # Manages CSS media queries.
   gem 'sass-globbing'           # Allows you to import many sass or scss files
                                 # in a single import statement.

Gemfile.lock

@@ -5,17 +5,33 @@ GEM
       compass (>= 0.12.1)
       sass (>= 3.2.0)
     chunky_png (1.2.8)
+    color-schemer (0.2.8)
+      compass-blend-modes (~> 0.0.2)
     compass (0.12.2)
       chunky_png (~> 1.2)
       fssm (>= 0.2.7)
       sass (~> 3.1)
+    compass-blend-modes (0.0.2)
+      compass
     fssm (0.2.10)
     sass (3.2.9)
     sass-globbing (1.1.0)
       sass (>= 3.1)
+    sassy-strings (1.0.0)
+      compass (>= 0.12.2)
+    singularitygs (1.1.2)
+      breakpoint (>= 2.0.1)
+      compass (>= 0.12.2)
+      sass (>= 3.2.1)
     susy (1.0.9)
       compass (>= 0.12.2)
       sass (>= 3.2.0)
+    toolkit (1.3.7)
+      breakpoint (>= 2.0.2)
+      color-schemer (>= 0.2.3)
+      compass (>= 0.12.2)
+      sassy-strings (>= 0.1)
+      singularitygs (>= 1.0.7)
 
 PLATFORMS
   ruby
@@ -25,4 +41,6 @@ DEPENDENCIES
   compass
   sass
   sass-globbing
+  singularitygs
   susy
+  toolkit

README.txt → README.md

 This theme is for Drupal.org sites.
 
 
-## Where’s the CSS?
+## Contributing
+
+Work from the `dev` branch, using feature branches named
+`{issue number}-{short-description}`, for example
+`2182993-api-breadcrumb-space`.
+
+See https://www.drupal.org/node/2406727 for more information.
+
+
+### Where’s the CSS?
 
 CSS is compiled with Compass. See https://drupal.org/node/1953368 for more
 information.
 
 Dev VMs come with a pre-compiled version, and Compass set up to compile
-changes:
+changes.
+
+To compile the CSS code, navigate the the `bluecheese` folder, and run:
+
+`$ bundle exec compass compile`
 
-$ bundle exec compass compile
+If the above doesn't work, then try this alternative commands:
+```
+$ /usr/bin/bundle binstubs compass
+$ ./bin/compass compile
+```
 
 See https://drupal.org/node/1018084 for more information.

bluecheese.info

@@ -5,12 +5,14 @@ engine = phptemplate
 core = 7.x
 
 ; -------- regions ---------------
+regions[page_heading] = Page heading
 regions[page_tools] = Page Tools
 regions[sidebar_first] = Sidebar first
 regions[sidebar_second] = Sidebar second
 regions[highlighted] = Highlighted
 regions[navigation] = Navigation
 regions[header] = Header
+regions[banner] = Banner
 regions[content_top] = Content: Top
 regions[content] = Content
 regions[content_bottom] = Content: Bottom
@@ -21,12 +23,12 @@ regions[page_top] = Page top
 regions[page_bottom] = Page bottom
 
 ; -------- Styles ---------------
+stylesheets[all][] = css/global-fonts.css
+stylesheets[all][] = css/global-variables.css
 stylesheets[all][] = css/styles.css
 
 ; -------- Javascript ---------------
 scripts[] = js/bluecheese.js
-scripts[] = js/plugins/responsive_tables.js
 
-
-; -------- Theme based custom Vote Up Down Widgets ---------------
-plugins[vud][widgets] = widgets
+; -------- Panels Layouts ---------------
+plugins[panels][layouts] = 'layouts/panels'

ckeditor.config.js

+/*
+Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.html or http://ckeditor.com/license
+*/
+
+/*
+ WARNING: clear browser's cache after you modify this file.
+ If you don't do this, you may notice that browser is ignoring all your changes.
+ */
+CKEDITOR.editorConfig = function(config) {
+  config.indentClasses = [ 'rteindent1', 'rteindent2', 'rteindent3', 'rteindent4' ];
+
+  // [ Left, Center, Right, Justified ]
+  config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
+
+  // The minimum editor width, in pixels, when resizing it with the resize handle.
+  config.resize_minWidth = 450;
+
+  // Protect PHP code tags (<?...?>) so CKEditor will not break them when
+  // switching from Source to WYSIWYG.
+  // Uncommenting this line doesn't mean the user will not be able to type PHP
+  // code in the source. This kind of prevention must be done in the server
+  // side
+  // (as does Drupal), so just leave this line as is.
+  config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
+
+  // [#1762328] Uncomment the line below to protect <code> tags in CKEditor (hide them in wysiwyg mode).
+  // config.protectedSource.push(/<code>[\s\S]*?<\/code>/gi);
+  //config.extraPlugins = '';
+
+  /*
+    * Append here extra CSS rules that should be applied into the editing area.
+    * Example:
+    * config.extraCss = 'body {color:#FF0000;}';
+    */
+  config.extraCss = '';
+
+  config.templates_files = [Drupal.settings.basePath + 'sites/all/themes/bluecheese/js/ckeditor.custom.templates-v6.js'];
+  config.templates_replaceContent = false;
+
+  /**
+    * CKEditor's editing area body ID & class.
+    * See http://drupal.ckeditor.com/tricks
+    * This setting can be used if CKEditor does not work well with your theme by default.
+    */
+  config.bodyClass = '';
+  config.bodyId = '';
+  /**
+    * Sample bodyClass and BodyId for the "marinelli" theme.
+    */
+  if (Drupal.settings.ckeditor.theme == "marinelli") {
+    config.bodyClass = 'singlepage';
+    config.bodyId = 'primary';
+  }
+
+  // Make CKEditor's edit area as high as the textarea would be.
+  if (this.element.$.rows > 0) {
+    config.height = this.element.$.rows * 20 + 'px';
+  }
+
+  config.codeSnippet_languages = {'php': 'PHP', 'javascript': 'JavaScript', 'html': 'HTML', 'css': 'CSS', 'yaml': 'YAML'};
+  config.FormatSource = false;
+  config.format_code = { element: 'code', attributes: { 'class': 'editorCode' } };
+
+  // Allow img data tags to be passed through ACF.
+  config.extraAllowedContent = 'img[data-orig-src](aside-half);small';
+
+  // Use the browser’s spell check.
+  config.disableNativeSpellChecker = false;
+
+  // Use CSS for image alignment instead of inline styles.
+  config.image2_alignClasses = [
+    'left',
+    'center',
+    'right'
+  ];
+
+  // No &nbsp; in empty <p>.
+  config.fillEmptyBlocks = false;
+}
+
+// Set defaults for tables
+CKEDITOR.on( 'dialogDefinition', function( ev )
+{
+   // Take the dialog name and its definition from the event
+   // data.
+   var dialogName = ev.data.name;
+   var dialogDefinition = ev.data.definition;
+
+   // Check if the definition is from the dialog we're
+   // interested on (the "Table" dialog).
+   if ( dialogName == 'table' )
+   {
+       // Get a reference to the "Table Info" tab.
+       var infoTab = dialogDefinition.getContents( 'info' );
+       txtBorder = infoTab.get( 'txtBorder' );
+       txtBorder['default'] = '0';
+   }
+
+   // Corrects the Image label to notify about local images.
+   if ( dialogName == 'image2') {
+     var imgData = dialogDefinition.getContents('info');
+     urlField = imgData.get('src');
+     urlField['label'] = 'URL (must be hosted on Drupal.org, upload with “Add a new file”)';
+   }
+});

config.rb

-if RUBY_VERSION =~ /1.9/
-  Encoding.default_external = "utf-8"
-end
+Encoding.default_external = "utf-8"
 
 # Require any additional compass plugins here.
+require 'toolkit'
 require 'susy'
 require 'breakpoint'
 require 'sass-globbing'
+require 'singularitygs'
 
 # Set this to the root of your project when deployed:
 http_path = "/sites/all/themes/bluecheese/"

css/global-fonts.css

+/* ---------------------------------------------------------
+
+  FONTS
+
+  --------------------------------------------------------- */
+
+/* ---------------------------------------------------------
+  ZT Gatha
+--------------------------------------------------------- */
+
+/* Webfont: ZTGatha */
+@font-face {
+  font-family: ZTGatha;
+  src:
+    url("../fonts/ZT_Gatha/ZTGatha-Bold.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-Bold.woff2")
+      format("woff2"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-Bold.ttf")
+      format("truetype"); /* Safari, Android, iOS */
+
+  font-weight: bold;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: ZTGatha-BoldAlt */
+@font-face {
+  font-family: ZTGatha-BoldAlt;
+  src:
+    url("../fonts/ZT_Gatha/ZTGatha-AltBold.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-AltBold.woff2")
+      format("woff2"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-AltBold.ttf")
+      format("truetype"); /* Safari, Android, iOS */
+
+  font-weight: bold;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: ZTGatha-SemiBold */
+@font-face {
+  font-family: ZTGatha-SemiBold;
+  src:
+    url("../fonts/ZT_Gatha/ZTGatha-SemiBold.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-SemiBold.woff2")
+      format("woff2"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-SemiBold.ttf")
+      format("truetype"); /* Safari, Android, iOS */
+
+  font-weight: normal;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: ZTGatha-SemiBoldAlt */
+@font-face {
+  font-family: ZTGatha-SemiBoldAlt;
+  src:
+    url("../fonts/ZT_Gatha/ZTGatha-AltSemiBold.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-AltSemiBold.woff2")
+      format("woff2"),
+    /* Modern Browsers */ url("../fonts/ZT_Gatha/ZTGatha-AltSemiBold.ttf")
+      format("truetype"); /* Safari, Android, iOS */
+
+  font-weight: normal;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* ---------------------------------------------------------
+  Noto Sans
+--------------------------------------------------------- */
+
+/* Webfont: NotoSans-BoldItalic */
+@font-face {
+  font-family: NotoSans;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-BoldItalic.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-BoldItalic.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-BoldItalic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: 700;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: NotoSans-Bold */
+@font-face {
+  font-family: NotoSans;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-Bold.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-Bold.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-Bold.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: 700;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: NotoSans-Italic */
+@font-face {
+  font-family: NotoSans;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-Italic.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-Italic.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-Italic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: normal;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: NotoSans-MediumItalic */
+@font-face {
+  font-family: NotoSans-Medium;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-MediumItalic.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-MediumItalic.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-MediumItalic.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: 500;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: NotoSans-Medium */
+@font-face {
+  font-family: NotoSans-Medium;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-Medium.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-Medium.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-Medium.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: 500;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: NotoSans-Regular */
+@font-face {
+  font-family: NotoSans;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-Regular.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-Regular.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-Regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: NotoSans-Light */
+@font-face {
+  font-family: NotoSans;
+  src:
+    url("../fonts/Noto_Sans/NotoSans-Light.woff") format("woff"),
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
+      url("../fonts/Noto_Sans/NotoSans-Light.woff2") format("woff2"),
+    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+      url("../fonts/Noto_Sans/NotoSans-Light.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-weight: 300;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Source Code Pro */
+@font-face {
+  font-family: SourceCodePro;
+  src: url("../fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf")
+    format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Source Code Pro */
+@font-face {
+  font-family: SourceCodePro;
+  src: url("../fonts/Source_Code_Pro/SourceCodePro-Italic-VariableFont_wght.ttf")
+    format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+}

css/global-variables.css

+/* ---------------------------------------------------------
+
+  COLORS
+
+  --------------------------------------------------------- */
+
+:root {
+  /* Drupal brand Colors */
+  --drupal-blue: #009cde;
+  --drupal-dark-blue: #006aa9;
+  --drupal-navy: #12285f;
+  --drupal-dark-navy: #091942;
+  --drupal-light-blue: #ccedf9;
+  --drupal-black: #000;
+  --drupal-white: #fff;
+  --drupal-purple: #ccbaf4;
+  --drupal-yellow: #ffc423;
+  --drupal-red: #f46351;
+  --drupal-dark-red: #c63c00;
+  --drupal-green: #397618;
+  --drupal-gray-darkest: #1f2420;
+  --drupal-gray-darker: #323946;
+  --drupal-gray-dark: #4f5661;
+  --drupal-gray-default: #6d7583;
+  --drupal-gray-mild: #a2acbe;
+  --drupal-gray-milder: #cfd4dd;
+  --drupal-gray-mildest: #f8f9fc;
+  --drupal-gray-disabled: #e7ebf3;
+  /* System/admin colors */
+  --color-absolutezero: #003ecc;
+  --color-maximumred: #dc2323;
+  --color-maximumred-hover: #c61f1f; /* 5% darker than base. */
+  --color-maximumred-active: #b01c1c; /* 10% darker than base. */
+  --color-focus: var(--drupal-purple);
+  --color-white: var(--drupal-white);
+  --color-credited-bg: #e1f6d5;
+  --color-not-credited-bg: var(--drupal-gray-mildest);
+}
+
+/* ---------------------------------------------------------
+
+ GRADIENTS
+
+  --------------------------------------------------------- */
+:root {
+  --blue-striped-gradient: repeating-linear-gradient(
+    45deg,
+    rgba(0, 156, 222, 0.5),
+    /* Drupal Blue with 50% opacity */ rgba(0, 156, 222, 0.5) 12px,
+    /* Drupal Blue with 50% opacity */ rgba(204, 237, 249, 1) 12px,
+    /* Drupal Light Blue with full opacity */ rgba(204, 237, 249, 1) 58px
+      /* Drupal Light Blue with full opacity */
+  );
+  --purple-gradient: linear-gradient(
+    270deg,
+    var(--drupal-purple) -0.5%,
+    #22a5e5 100.62%
+  );
+  --red-yellow-gradient: linear-gradient(
+    270deg,
+    var(--drupal-red) -0.5%,
+    var(--drupal-yellow) 100.62%
+  );
+}
+
+/* ---------------------------------------------------------
+
+  SPACING
+
+    --------------------------------------------------------- */
+:root {
+  --spacing-unit: 0.25rem;
+  --spacing-01: calc(var(--spacing-unit) * 1);
+  --spacing-02: calc(var(--spacing-unit) * 2);
+  --spacing-03: calc(var(--spacing-unit) * 3);
+  --spacing-04: calc(var(--spacing-unit) * 4);
+  --spacing-05: calc(var(--spacing-unit) * 5);
+  --spacing-06: calc(var(--spacing-unit) * 6);
+  --spacing-07: calc(var(--spacing-unit) * 7);
+  --spacing-08: calc(var(--spacing-unit) * 8);
+  --spacing-09: calc(var(--spacing-unit) * 9);
+  --spacing-10: calc(var(--spacing-unit) * 10);
+  --spacing-11: calc(var(--spacing-unit) * 11);
+  --spacing-12: calc(var(--spacing-unit) * 12);
+  --spacing-13: calc(var(--spacing-unit) * 13);
+  --spacing-14: calc(var(--spacing-unit) * 14);
+  --spacing-15: calc(var(--spacing-unit) * 15);
+  --spacing-16: calc(var(--spacing-unit) * 16);
+  --spacing-17: calc(var(--spacing-unit) * 17);
+  --spacing-18: calc(var(--spacing-unit) * 18);
+  --spacing-19: calc(var(--spacing-unit) * 19);
+  --spacing-20: calc(var(--spacing-unit) * 20);
+  --spacing-21: calc(var(--spacing-unit) * 21);
+  --spacing-22: calc(var(--spacing-unit) * 22);
+  --spacing-23: calc(var(--spacing-unit) * 23);
+  --spacing-24: calc(var(--spacing-unit) * 24);
+  --spacing-25: calc(var(--spacing-unit) * 25);
+  --spacing-26: calc(var(--spacing-unit) * 26);
+  --spacing-27: calc(var(--spacing-unit) * 27);
+  --spacing-28: calc(var(--spacing-unit) * 28);
+  --spacing-29: calc(var(--spacing-unit) * 29);
+  --spacing-30: calc(var(--spacing-unit) * 30);
+  --spacing-31: calc(var(--spacing-unit) * 31);
+  --spacing-32: calc(var(--spacing-unit) * 32);
+  --spacing-33: calc(var(--spacing-unit) * 33);
+  --spacing-34: calc(var(--spacing-unit) * 34);
+  --spacing-35: calc(var(--spacing-unit) * 35);
+  --spacing-36: calc(var(--spacing-unit) * 36);
+  --spacing-37: calc(var(--spacing-unit) * 37);
+  --spacing-38: calc(var(--spacing-unit) * 38);
+  --spacing-39: calc(var(--spacing-unit) * 39);
+  --spacing-40: calc(var(--spacing-unit) * 40);
+  --spacing-41: calc(var(--spacing-unit) * 41);
+  --spacing-42: calc(var(--spacing-unit) * 42);
+  --spacing-43: calc(var(--spacing-unit) * 43);
+  --spacing-44: calc(var(--spacing-unit) * 44);
+  --spacing-45: calc(var(--spacing-unit) * 45);
+  --spacing-46: calc(var(--spacing-unit) * 46);
+  --spacing-47: calc(var(--spacing-unit) * 47);
+  --spacing-48: calc(var(--spacing-unit) * 48);
+  --spacing-49: calc(var(--spacing-unit) * 49);
+  --spacing-50: calc(var(--spacing-unit) * 50);
+  --spacing-51: calc(var(--spacing-unit) * 51);
+  --spacing-52: calc(var(--spacing-unit) * 52);
+  --spacing-53: calc(var(--spacing-unit) * 53);
+  --spacing-54: calc(var(--spacing-unit) * 54);
+  --spacing-55: calc(var(--spacing-unit) * 55);
+  --spacing-56: calc(var(--spacing-unit) * 56);
+  --spacing-57: calc(var(--spacing-unit) * 57);
+  --spacing-58: calc(var(--spacing-unit) * 58);
+  --spacing-59: calc(var(--spacing-unit) * 59);
+  --spacing-60: calc(var(--spacing-unit) * 60);
+  --spacing-61: calc(var(--spacing-unit) * 61);
+  --spacing-62: calc(var(--spacing-unit) * 62);
+  --spacing-63: calc(var(--spacing-unit) * 63);
+  --spacing-64: calc(var(--spacing-unit) * 64);
+  /**
+   * Spaces. Todo: convert to above spacing and remove.
+   */
+  --space-xl: 3rem; /* 3 * 16px = 48px */
+  --space-l: 1.5rem; /* 1.5 * 16px = 24px */
+  --space-m: 1rem; /* 1 * 16px = 16px */
+  --space-s: 0.75rem; /* 0.75 * 16px = 12px */
+  --space-xs: 0.5rem; /* 0.5 * 16px = 8px */
+}
+
+/* Font Family variables */
+:root {
+  --larger-header: "ZTGatha-Bold", "NotoSans-Bold", system-ui, sans-serif;
+  --smaller-header: notosans, system-ui, sans-serif;
+  --sans: notosans, system-ui, sans-serif;
+  --body: var(--sans);
+  --code: sourcecodepro, monospace;
+}
+
+/* Font Color Variables */
+:root {
+  --default-text-color: var(--drupal-navy);
+  --default-link-color: var(--drupal-dark-blue);
+}
+
+/* Font Size Variables */
+:root {
+  --default-text-size: 1rem; /* 16px */
+  --default-text-size-mobile: 0.875rem; /* 14px */
+  --default-text-size-desktop: 1rem; /* 16px */
+  --default-text-size-wide: 1.25rem; /* 20px */
+  /* from Claro, only used on forms and widgets. */
+  --font-size-xl: 2.25rem; /* ~36px */
+  --font-size-h1: 2.027rem; /* ~32px */
+  --font-size-h2: 1.802rem; /* ~29px */
+  --font-size-h3: 1.602rem; /* ~26px */
+  --font-size-h4: 1.424rem; /* ~23px */
+  --font-size-h5: 1.266rem; /* ~20px */
+  --font-size-h6: 1.125rem; /* 18px */
+  --font-size-s: 0.889rem; /* ~14px */
+  --font-size-xs: 0.79rem; /* ~13px */
+  --font-size-xxs: 0.702rem; /* ~11px */
+  --font-size-label: var(--font-size-s);
+  --font-size-description: var(--font-size-xs);
+  --base-border-radius: 2px;
+}
+
+/* Grid gutter base variable */
+:root {
+  --grid-gutter: 1rem;
+  --section-margin-mobile: 1rem;
+  --section-margin-tablet: 7rem;
+  --section-margin-wide: 9.5rem;
+}
+
+/*
+  * Inputs. Adapted from Claro.
+  */
+:root {
+  --input-fg-color: var(--default-text-color);
+  --input-bg-color: var(--drupal-white);
+  --input-fg-color--description: var(--drupal-gray-dark);
+  --input-fg-color--placeholder: var(--drupal-gray-default);
+  --input-border-color: var(--drupal-gray-mild);
+  --input--hover-border-color: var(--default-text-color);
+  --input--focus-border-color: var(--color-absolutezero);
+  --input--error-color: var(--color-maximumred);
+  --input--error-border-color: var(--color-maximumred);
+  --input--disabled-color: rgba(
+    109,
+    117,
+    131,
+    0.6
+  ); /* Drupal Default gray with 0.6 opacity. */
+
+  --input--disabled-fg-color: var(--drupal-gray-mild);
+  --input--disabled-bg-color: var(--drupal-gray-disabled);
+  --input--disabled-border-color: var(--drupal-gray-mild); /* Old silver with 0.5 opacity on white bg. */
+  --input--disabled-border-opacity: 0.5;
+  --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
+  --input-border-size: 1px; /* (1/16)em ~ 1px */
+  --input--error-border-size: 2px;
+  --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
+  --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
+  --input-font-size: var(--default-text-size);
+  --input-line-height: var(--space-l);
+  --input-padding-vertical--small: calc(
+    var(--space-xs) - (var(--input-border-size) * 2)
+  );
+  --input-padding-horizontal--small: calc(
+    var(--space-m) - var(--input-border-size)
+  );
+  --input-font-size--small: var(--font-size-xs);
+  --input-line-height--small: 1.3125rem;
+  --input--extrasmall-padding-vertical: calc(
+    0.15rem - var(--input-border-size)
+  );
+  --input--extrasmall-padding-horizontal: calc(
+    var(--space-xs) - var(--input-border-size)
+  );
+  --input--extrasmall-font-size: var(--font-size-s);
+  --input--extrasmall-line-height: calc(
+    var(--space-m) + 0.2rem
+  ); /* Font size is too big to use 1rem for extrasmall line-height */
+
+  --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
+  --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
+  /**
+ * Buttons.
+ */
+  --button--disabled-bg-color: var(--drupal-gray-mildest);
+  --button--disabled-fg-color: var(--drupal-gray-mild);
+  --button-fg-color--primary: var(--color-white);
+  --button-bg-color--primary: var(--color-absolutezero);
+  --button-fg-color--danger: var(--color-white);
+  --button-bg-color--danger: var(--color-maximumred);
+  --button--hover-bg-color--danger: var(--color-maximumred-hover);
+  --button--active-bg-color--danger: var(--color-maximumred-active);
+  --dropbutton-widget-z-index: 100;
+  /**
+ * jQuery.UI dialog.
+ */
+  --jui-dialog-title-color: var(--drupal-white);
+  --jui-dialog-title-bg-color: var(--default-text-color);
+  --jui-dialog-title-font-size: var(--font-size-h4);
+  --jui-dialog-close-button-size: calc(var(--space-m) * 2);
+  --jui-dialog-close-button-border-radius: 50%;
+  --jui-dialog-close-button-reserved-space: calc(var(--space-m) * 4);
+  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--space-m) * 3);
+  --jui-dialog-border-radius: 0.25rem;
+  --jui-dialog-box-shadow: 0 0 var(--space-m) calc(var(--space-m) / -4)
+    var(--color-text);
+  --jui-dialog--focus-outline: 2px dotted transparent;
+  --jui-dialog--focus-box-shadow: 0 0 0 0.1875rem var(--color-focus);
+  --jui-dialog-z-index: 1260;
+  --jui-dialog-off-canvas-z-index: 501;
+  /**
+   * jQuery.UI dropdown.
+   */
+  --jui-dropdown-fg-color: var(--drupal-gray-dark);
+  --jui-dropdown-bg-color: var(--drupal-white);
+  --jui-dropdown--active-fg-color: var(--drupal-white);
+  --jui-dropdown--active-bg-color: var(--drupal-blue);
+  --jui-dropdown-border-color: rgba(
+    216,
+    217,
+    224,
+    0.8
+  ); /* Light gray with 0.8 opacity. */
+
+  --jui-dropdown-shadow-color: rgba(
+    34,
+    35,
+    48,
+    0.1
+  ); /* Text color with 0.1 opacity. */
+  /*
+   * Details.
+   */
+  --details-border-color: var(--drupal-gray-mild);
+  --details-summary-shadow-color: var(--color-focus);
+  --details-summary-focus-border-size: var(--focus-border-size);
+  --details-desktop-wrapper-padding-start: calc(
+    var(--space-m) + var(--space-s) + var(--space-xs)
+  );
+  --details-box-shadow: 0 2px 0.25rem rgba(0, 0, 0, 0.1);
+  --details-border-size: 1px;
+  --details-border-size-radius: 2px;
+  --details-accordion-border-size-radius: var(--base-border-radius);
+  --details-spread-box-shadow-radius: 2px;
+  --details-bg-color-transition-duration: 0.12s;
+  --details-box-shadow-transition-duration: 0.2s;
+  --details-transform-transition-duration: 0.12s;
+  --details-line-height: 1.295rem;
+  /**
+     * Vertical Tabs.
+     *
+     * These are shared between the vertical tabs and media library.
+     * @see ../components/vertical-tabs.pcss.css
+     * @see ../theme/media-library.pcss.css
+     */
+  --vertical-tabs-margin-vertical: var(--space-s);
+  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
+  --vertical-tabs-shadow: var(--details-box-shadow);
+  --vertical-tabs-border-color: var(--details-border-color);
+  --vertical-tabs-border-size: 1px;
+  --vertical-tabs-border: var(--vertical-tabs-border-size) solid
+    var(--vertical-tabs-border-color);
+  --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
+  --vertical-tabs-menu-item--top-margin: calc(
+    var(--vertical-tabs-menu-item-shadow-extraspace) * -2
+  );
+  --vertical-tabs-menu-item--right-margin: calc(
+    var(--vertical-tabs-border-size) * -1
+  );
+  --vertical-tabs-menu-item--bottom-margin: calc(
+    var(--vertical-tabs-menu-item-shadow-extraspace) * -1
+  );
+  --vertical-tabs-menu-item--left-margin: calc(
+    var(--vertical-tabs-menu-item-shadow-extraspace) * -1
+  );
+  --vertical-tabs-menu-separator-color: var(--color-gray-200);
+  --vertical-tabs-menu-separator-size: 1px;
+  --vertical-tabs-menu-width: 20em;
+  --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
+  --vertical-tabs-menu-link-focus-border-size: var(
+    --details-summary-focus-border-size
+  );
+  --vertical-tabs-menu-link--active-border-size: 0.25rem;
+  --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
+  --vertical-tabs-menu--z-index: 0;
+}