diff --git a/core/scripts/css/compile.js b/core/scripts/css/compile.js
index 0fe45e8bb706abe8df5f86bfb7d7149d2740576d..1e5a68ce65f30f9b60673a9e735ee8bc86a1aecd 100644
--- a/core/scripts/css/compile.js
+++ b/core/scripts/css/compile.js
@@ -12,7 +12,24 @@ module.exports = (filePath, callback) => {
   // Transform the file.
   fs.readFile(filePath, (err, css) => {
     postcss([
-      postcssImport(),
+      postcssImport({
+        plugins: [
+          // On import, remove the comments from variables.pcss.css so they don't
+          // appear as useless comments at the top files that import these
+          // variables.
+          postcss.plugin('remove-unwanted-comments-from-variables', (options) => {
+            return css => {
+              if (css.source.input.file.indexOf('variables.pcss.css') !== -1) {
+                css.walk(node => {
+                  if (node.type === 'comment') {
+                    node.remove();
+                  }
+                });
+              }
+            };
+          }),
+        ],
+      }),
       postcssCustomProperties({
         // Remove converted properties from the generated code. This needs to be
         // set to ensure that CSS minifiers don't remove the generated values.
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 9d17479b876193959a606e2c54430546d33fc11b..6caeda07fb1d0aabfece63043052e4d2d9a982b3 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -9,50 +9,6 @@
  * Generic elements.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 html {
   font-family: BlinkMacSystemFont
 ,
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 00092a224487ad84f308d0e1c808c2f2d4caed64..968e5dab837a50d95cc70ddd63d9263e3fec54db 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -10,50 +10,6 @@
  * Accordion styles.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .accordion {
   color: #222330;
   border: 1px solid rgba(216, 217, 224, 0.8);
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index c76e40f91446d5d4bc0c1071774d89f8302c9cc8..4eb59c835acef7b2b24098c65d77d78d3bbe6375 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -12,50 +12,6 @@
  * Contains Action link component and the action-links layout styles.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Action links layout.
  */
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index b17d3e9ec4a337a328c0ec50ff279c59f6ece7f9..e7b098cb43c27f8f6aee76672c47efe91433e1eb 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -10,50 +10,6 @@
  * Throbber.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .ajax-progress {
   display: inline-block;
 }
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index 4c49059d3e1bec9be8f4d782eb73724086c43c8f..be8328ac410348892a83a85905a26026f1abba1a 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -12,50 +12,6 @@
  * @see autocomplete.js
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Since the autocomplete library is attached conditionally and not globally,
  * we can be 99% sure that the default icon will be used.
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index b496acca6775eca92f9f79ff1e965994d241103a..1a15aebe8bfc3f6f15c609254ffe3ff8a5dfabda 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -10,50 +10,6 @@
  * Breadcrumbs.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .breadcrumb {
   padding: 0;
   color: #222330;
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index 8594ae4390c9f72833c71d5c91307d55e3763f96..cfb6a50d02842ab5e3c3b3e34a77fcaf05b21c3e 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -12,50 +12,6 @@
  * Apply these classes to button elements (<button>, <input type="button" />).
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Buttons.
  *
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 533f019841687d1a59b261a3829903334079a07f..e859249008a5407d7e1d8ad76eabedd4f75e615c 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -10,50 +10,6 @@
  * Card.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .card {
   display: flex;
   flex-direction: column;
diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index 47ae19d73fbcddf71f589472128848ec018e61a8..05f31281e97a43febf5f2c7b17b18978fd5a69d9 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -9,50 +9,6 @@
  * Content header.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .content-header {
   overflow: hidden;
   margin-bottom: 0.75rem;
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index a36ce5dd2a162b8374d0403acc89fd3e6887cac1..556c25c728f34e682430412b9079d24b4610c610 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -12,50 +12,6 @@
  * @see collapse.js
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Available modifiers are:
  *  - .claro-details--accordion
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index 2bd585d19026e06b0f69a7fc1eca56fbc2df64c2..247e6ab34ef50328f301f88d7dfb675b3a06ce78 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -9,50 +9,6 @@
  * Divider.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .divider {
   height: 1px;
   background-color: rgba(142, 146, 156, 0.5);
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 6c1c90aa790f02f80e3fb6e6505324be52e8a8d2..05a22b046860e5dea6d973d2700795985050001d 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -14,50 +14,6 @@
  *    contrast mode Firefox.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :root {
   /**
   * Dropbutton
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index 6245dea4db96f2ff77ad0c8205ab1c1738fe72a4..eb5bee4553829887e0ba948d8491bfb0aab885b9 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -10,50 +10,6 @@
  * Entity meta.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .entity-meta__header {
   padding: 0.5rem 1rem 1rem;
   color: #222330;
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 06329f359349e4dfc7c61bc1937e377e7e3faebd..e228680ed7f1fbbcdfae987ae56ea2c8aa5ae6d0 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -10,50 +10,6 @@
  * Fieldset styles.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .fieldset {
   min-width: 0;
   margin: 1rem 0;
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 30d5f44cf173a318155e74d6391d82748d260d72..0311964cdf017996bb1fdc7ab9eee047de337b21 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -10,50 +10,6 @@
  * Extends styles of the file link.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .file {
   min-height: 1.0625rem;
   padding-left: 1.5rem; /* LTR */
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 77aa8b72411d3bee22657040cd5118cf66f08f5a..a516e5a5829d700fcdd4c048a6185a48e498669a 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -10,50 +10,6 @@
  * Checkbox and radio input elements styles for IE11 and below.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .form-boolean::-ms-check {
   display: inline-block;
   box-sizing: border-box;
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index ff7aa40edabcb2d429ec081e0bb440262cba16ef..8ee90532b64b73948e683ba64e051fba078afce8 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -10,50 +10,6 @@
  * Checkbox and radio input elements.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Form item modifiers.
  */
diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css
index 67f9110a576d581b8bec0fe4dcbf1f841a2c6ece..8502d6ec4c525c29dd90348b375151b37e74c189 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -10,50 +10,6 @@
  * Styles for multiple field tables.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .field-multiple-table {
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index 4fa4b2ea4118325629be78bb98986a19f565acd1..e846d16fcf399a0265825aa1eac84b4fe157a9e1 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -12,50 +12,6 @@
  * This includes the styles for the file widgets and the image widgets.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * The root element of the file/image widget.
  */
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index 304b1b702ef3bccc978c8ccde7b75e93aed6273c..5caa69a07ab09632347ec93057c841d56a4d48bf 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -10,50 +10,6 @@
  * Visual styles for the Password widgets.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :root {
   /* Weak */
   /* Fair */
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 989ed67d32c1198ef4b5bc653c77c7e1e38f271e..bb1036155f55a6eb755cf9778aefe12d2ca330c4 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -10,50 +10,6 @@
  * Select input elements.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .form-element--type-select {
   padding-right: calc(2rem - 1px);
   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='%23545560'/%3E%3C/svg%3E%0A");
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index f7c7923296c3b14fdcf924ea136b055ca966bfca..86948a5d07ca11ffd60c06f6bafba4526f2ca6fb 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -10,50 +10,6 @@
  * Text and textarea input elements.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .form-element {
   box-sizing: border-box;
   max-width: 100%;
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index ac3f76feab3d4f3dc008604c931ac9a03ee32675..82c4619368d5f6f664cadde65ad06461262d532f 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -10,50 +10,6 @@
  * Main form and form item styles.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :-ms-input-placeholder {
   color: #8e929c;
 }
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index 3d1a03f53c8df0d6403a4806480aa3a94af72f02..965c02e3ddb19090928f37adfe42ec291fabd367 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -10,50 +10,6 @@
  * Image preview component.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Image preview.
  */
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index a24a1af1ed6adeaf0522a965e9f7e28564733614..abb365dc914f2a6abf49796b3831c7f7a3eb61a8 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -11,50 +11,6 @@
  * Overrides /core/assets/vendor/jquery.ui/themes/base/theme.css.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Component containers
  */
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 76985ea47415f249993bc14f9a628e0ac3d115bb..f02aecb611fb95c4572743d3651b742bc751674e 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -12,50 +12,6 @@
  *   has been resolved.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .messages-list {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index 959a33edcaf3b1e0f1de2891fce665258f819b9b..590d0fa2e36901929f296c8a1241249bc4eaa56e 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -10,50 +10,6 @@
  * Page title.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .block-page-title-block {
   margin-bottom: 0.75rem;
 }
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 8af345573b84a8bada636cacc3fd47d4e0299c74..23225581f43191cf88b57987c11fca2e82338566 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -10,50 +10,6 @@
  * Styles for Claro's Pagination.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :root {
   /**
   * Pager.
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 4e86569a9d8266418d4b9c123e672bbf968470ba..69f23f382f9cc54e11c07b9d0d8d9b5323474f97 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -12,50 +12,6 @@
  * @see progress.js
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .progress::after {
   display: table;
   clear: both;
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index a77f8697d483b6ceab62d6f66e62c07df05bb7b2..811c6e813dd03a1bd7a6ffc170fdc7d095b15f77 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -10,50 +10,6 @@
  * Styling for the shortcut module.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :root {
   /**
   * Shortcut action.
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index 1a8b935fedda2cec3b6678f5af2275a15a2af63c..4bce6e4b9c821bdd0adb88f6021feb7d61f5b1b4 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -10,50 +10,6 @@
  * Admin list and admin item modules.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Admin list (wrapper of admin items).
  */
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index 5fee5d9361af8383913cfa45947822c87f3ab145..025c5810a3ddff9f6615c53fcb107cd52072a18d 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -10,50 +10,6 @@
  * System admin module: Panel styling.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .panel {
   margin-top: 1em;
   margin-bottom: 3em;
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index 4f3f3558b6fcbaef49579b3504c23e39c3e7bbac..38cc7234093084ac60b5e15f42707afb2571192a 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -10,50 +10,6 @@
  * Styles for multiple file widget table.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .table-file-multiple-widget tbody {
   vertical-align: top;
 }
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index bf968f446a16b22a600b85327e8acb29fdd1632e..e3d01f24ee13d2990f2d2edf1c55f3fa35a6a56e 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -15,50 +15,6 @@
  * @see tabledrag.js
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 body.drag {
   cursor: move;
 }
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index 8996753aff64ca216add53930e71582728bb23d7..e7c8dd62321af6b5e6ec442d05126ded203b452d 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -10,50 +10,6 @@
  * Claro styles for Tables.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 table {
   width: 100%;
   margin-top: 1.5rem;
diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css
index 0f6bf1e402544a59848922abccf62fa62acafb06..9fed12185a6982595919da8c9e9de69cd25a139a 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -12,50 +12,6 @@
  * @see tableselect.js
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 td.checkbox,
 th.checkbox {
   text-align: center;
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index 969feff8594191562e708890cdb0345076659a85..14b26b1d03a0892ae48f2da30887a937dec6b26b 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -9,50 +9,6 @@
  * Tabs.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :root {
   /**
   * Tabs.
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 9ef276898513d7ff642b0e5d1337845be3d90343..b55f177a0e1b02a236b384705e3db903359b99d1 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -12,50 +12,6 @@
  * Replaces /core/misc/vertical-tabs.css.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Main wrapper of vertical tabs.
  * This wrapper div is added by JavaScript.
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index 1ba2cc82a0f1ddd6a1ebb65581a1eb545d560d57..4aace8f7527a45f43c9ec3f4bdfe2ec89800edc9 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -10,50 +10,6 @@
  * Visual styles for views exposed form.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Use flexbox and some margin resets to make the fields + actions go inline.
  *
diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css
index d87cb095b781f0cc4eb605e6e561f992b78e1d66..f2dc4c79a21d8d3e8977d3bde5818676cda3e382 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -10,50 +10,6 @@
  * Breadcrumb region.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .region-breadcrumb {
   min-height: 1.25rem;
 }
diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css
index 5e67aadb3d937deea4205d92246fac9ebd4755ae..40eeba401f2ff164059db8769900d0c02296a665 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -10,50 +10,6 @@
  * Cards list.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 :root {
   /* Using 100% as base causes issues in IE11. */
 }
diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css
index 38786c74a4d2955c0ab6b89affb83957a04292bd..2b7eb3ef85357d2ac0e28f584cae3db2c6239be5 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -10,50 +10,6 @@
  * Layout styles for local actions.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Action link layout styles.
  */
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index b92d66f7fbbdcaa759e0717e68e647004e6a648c..13d3003a199731eccc95b7e136748010a6e1b8ab 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -9,50 +9,6 @@
  * Layout overrides for node add/edit form.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .layout-region-node-footer__content {
   margin-top: 1.5em;
 }
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index 7772914c29ff0f12ce13bfe891e7da19c70681eb..12c71ab0d79a9d68a49fddc9a3e764b98a59ee25 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -10,50 +10,6 @@
  * CKEditor-native dialogs theming.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .cke_dialog_background_cover {
   display: none;
 }
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index 8fad4a5f7d9b2893d4fd64a2b79082cd6dc3d0f7..815c03d90089eca89bfe50459753b13bb1b6012e 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -8,49 +8,6 @@
  * @file
  * CKEditor appearance overrides.
  */
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
 :root { /* 1px */
   /* Inner border size must be based on chrome border size. */ /* 1px */
   /* Inner border radius must be based on chrome border radius and size. */
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index d31034199232c667ac85cd0904afa23d98ca883d..cc0c24930c0e3ffeda24b18d9540cf44a8ffebd5 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -10,50 +10,6 @@
  * CKEditor frame styles.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .cke_editable:not(.cke_editable_inline) {
   margin: 1em calc(1em - 2px);
 }
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index 9ab712aa5b5185b4d4285fd15b986d6aa4ad4408..848eed52d0c0529e829d99c60cc73ca7f3cae74e 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -10,50 +10,6 @@
  * Replacement styles for Field UI admin.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /* 'Manage fields' and 'Manage display' overviews */
 
 .field-ui-overview .region-title td {
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index 1b1f503c869b5779517b01ecd43734dbb4f6ab46..7ad0b201ddd4ca8b7ac0f20ab56876795b3298a6 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -10,50 +10,6 @@
  * Styling for the Filter module.
  */
 
-:root {
-  /*
-   * Color Palette.
-   */
-  /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
-  /*
-   * Base.
-   */
-  /*
-   * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
-  /**
-   * Spaces.
-   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
-  /*
-   * Common.
-   */
-  /*
-   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
-  /*
-   * Details.
-   */
-  /**
-   * Buttons.
-   */
-  /**
-   * jQuery.UI dropdown.
-   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Filter information under field.
  */