diff --git a/core/scripts/css/compile.js b/core/scripts/css/compile.js
index aaf25cbaa65dbe28c14063837d5e89eac2289616..af16a01b8ec8ade798076723ecaa379c921cd7a7 100644
--- a/core/scripts/css/compile.js
+++ b/core/scripts/css/compile.js
@@ -13,7 +13,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 92f9c7fb9526fab05011f174bab2b89b600dd2d2..899971f078e710d418cf36fdb228066ad743516c 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -9,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 html {
   font-family: BlinkMacSystemFont
 ,
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
index 2e42193f1b0c5ca3dc1843533508e9014ac0a0f1..5e2c412d5b1fd66409b4d7490c5a0e91a5d39e0b 100644
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -12,53 +12,6 @@
  * Contains overrides for jQuery UI dialog.
  */
 
-: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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /* Style the dialog-off-canvas container. */
 
 .ui-dialog.ui-dialog-off-canvas {
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index ffa62b38ff6fe53cdc26ce8728c2308dcb80de85..83b83d090b1a8129549168555b13121330b4c154 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 f573a6684e58f0ff81e8d47aea2b26d15616b309..5e7ef9affc6f604723770c12520291176ff8c8e1 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 707ff3cd8f509d11dc4810975b155d4974a2cc25..1feb9dc5abe3eca77975c2a1e1c8f61850a5f4a5 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 f4e79323ca4e8e454952708353cd5f7a52050f6d..c2bb486a5a730e64158c123ef655ec15f456a162 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 70a7ae25efbd23e32491a0d7017ccf91480a5ee0..8bdee53e8e2b67b412587c73aa632377d4fb44bf 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 ffe9155cb55b703b4504ef552dcfff75b9826aef..a1dacb66579aeb0efca43b6a4440c7d646513893 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 28024590d2b9b9870c6ef251a442a5acebe9695a..e4a0725baf4cda8fff46a761a2e562ebc0c751cf 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 0e30ab77cf6665bfe5de20f31d5deb043b31eec0..814cfbb5341aa6c37e290d80251f61f483ab9a61 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -9,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 9dee79b377cf48a57237f3bf0a5da31bb2689e37..d3938d2c6fe179c5b3f9b8118ab1bc5f766f01c8 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Available modifiers are:
  *  - .claro-details--accordion
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 0b7708e77df17b9173aaca70a9878762ba44dfad..e93d59e3cc616d35b226608782e5617f8e9d1018 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -10,53 +10,6 @@
  * Presentational styles for Drupal dialogs.
  */
 
-: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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .ui-dialog {
   padding: 0;
   border: 0;
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index 2bcd2dedbbbef4a443335a3841a8dbc7a34b9c33..c5836b3f61b76d0b831a19c721f733d5c5ca2be1 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -9,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 18678113b7478611d063f8ff8910155527823e77..6d297e2f73a0d8877aad881b60d170c7ecdde50f 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -14,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 0a66978711140570e23d9747442e5b13d3f5fcd1..2f82300aa2b0dda8801d783254455155d6138df4 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 5fcf6d4dea5ef5c331d4f29f54fe409480bdd1d2..fffbfc5a2dbe86ab6296e9413b130bb1951fe07b 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 d060f2c89c3b51384dd351fc7b3dbb1381905453..1e83b71c8215848ec251997154bce902951f4964 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 464aa0cd5b9a57d322973ce050f5326593a71071..799f5b1fcb8585519166c9d93f6b5fcd9e6ef26c 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 874ed5d57a054045b08a014cbf0a9683f58760d2..05084daceaaaf2f5ef95304f40a455ac37383b7c 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 4ca64d7205d4d6badcfb7bc80eed848714e8d400..6cc3337d961de298d8fbc7844536ae786c667585 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 dd4b30f98f5c35342ee92ab4aaca4fc6ed756954..f98245f21ea449d46623e5f4f839192f35a54f9f 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 aed9c2bec1f11093275ef08fecbe68377d61196f..0bc31cabb355126316cb684bc91c967c8eb4bcf9 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 063e96077c10f7b5dae3d2292e6c3b3d305c161f..4d86e147898660a6327e1cc3263846d16852d91d 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index a4ec1ca5e498b5f484c2d1b82598212cc940fccb..d6f254d7fe3bcd85b21233dbd1e52194cc3e965d 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 0638d300a443716cae990a1cb8d0872c6ff3880b..c99c8b46737f00f968bf13c8db5c8ec9af961028 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 ff2c2d66b897536ab6a7cb428380aa070717a1b1..772b1e85849efef0b58f25510087a19c205545bc 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 ba7ff2623d3b6a0aa9104d1aa5096cea9bdf6c34..f8cae13287249dc0133b6f504378ce1c92cd47ba 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -11,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Component containers
  */
diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css
index 20a038df8e92685d958cf98016b125195b51b552..018271d1322c3cd8ccaa419a2330020261f5578a 100644
--- a/core/themes/claro/css/components/media-library.ui.css
+++ b/core/themes/claro/css/components/media-library.ui.css
@@ -10,53 +10,6 @@
  * Styles for the Media Library UI.
  */
 
-: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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .media-library-selected-count {
   margin: 0 1.5rem;
 }
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 6cb9cd9c1db37de9b4e4c6a630fda938d5b0e6c0..ad27e3e1c05243abe012c3746d8ed5bc815c1200 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 31699cc2195bed8637529e2f5c245e6e666b3acb..99b3612ccfcb88ef5690a8d8154febcd7c8f5b52 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 785eaab110004ed944fb25a8465d963555ae8e15..3fd0f09b5a4acb37d274d2278415879a3f5269f5 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 6dc9a7549e15eeb548a73ac6803c43a23da06914..efdf4defe4f92b2d3c9057f5e9a6e298eb4d2816 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 f9384c830c8b6183025fbfc031ed6e09a69173cc..9974b9dc0a4deaadd1e6d5378f8f3ed575c1f303 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 bd2a7ea079892c26024cb3b931b2e20931174e80..c9c072afeaefc8a8d14bbf10ddcf59b5f9de9f8d 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 d45b4d95b5606f3ec55a9c0e2894707a0eb4d749..d0cba306071a502d601a8585d3b0208a9d1734fe 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 b7f88d3d85e4ef968052cc0f942828a107e29e00..299640b97ee4c2c26a88040168fac9fffedfc755 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 39ae18e2c684932c9e1821ee8279dd65756ed98c..32f98408ea931a9396ac47be34776ed801e47806 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -14,53 +14,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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 b59d94772e6b59e1a3940c2f9871bb477857b062..da617a597e555efe5186363754595b5c16c5d3e5 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 f335a9dbfe5bf159b8bd6ee1d5f85ee7851e393e..0f5382b68dc37c1dcc740b1df23d88bb7537f796 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 c2d5233156de888223fa6d2c1d21e5e6d491dcdd..30dac3da5299b028dfa697666e4c5f399a1d0ad9 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -9,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 2e46e8942a07289a1286b356327c10a2dd30d456..be93482645c42874ab13232376737fe34d07afa2 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -12,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 71fffe487907aed62aad8774c8b390e33b483168..9a47ec1a4f513fc8e8095a8ffe387050a10ac5a1 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 520a8969f973006e30bdc6c067d2b482c9db881a..88524e82fac9b0bc13ce0a2dcc297a9310c02b99 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 5da854a64224b47f406977cc78624ec0f7e3987b..230b5dfee02d81fd4db4526a5eb8f46a8426d515 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 18a6051ed0e87f769f06e27e73321cfa3c610225..9fa0e3e46c47679a49b54fa5d63abe74bd8877b5 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 8492379c0613e0f3a65c905aca5173bf21617104..72e32c4fbeac095e3fe07fd045d78d30f8bae2fc 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -9,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 e6b3f894ceab7a875fdb44d2ba3167d86c15f036..2564bcdff0f2f3b85d435de1803538787adccb34 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 0bc8a385a4f68d28b40a0deb5f3e49d897dc727d..c2c273ad4bb4d4481d6d19bc8d9ec54ab2605f1f 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -8,52 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 e02957cc425b315f90a2f66df56fd6edb30a5fce..fa25f18fd7094dde7d782e6753f654b2d4dbd453 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 a4d6f428a89f7a278faf2956617de0c6ce486729..b3d5e3b07d01643df0856d597ceba45d77614e43 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * 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 b198bafe7f1c4b9d48d952ae74270290b1faafa8..3917904e4e4e6414a18525c0d37ae6426463909c 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -10,53 +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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 /**
  * Filter information under field.
  */
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index 0074497dbc85dd60a7b96e2f18faf6b469749be2..30d1cca1ec66c81591bc8e0f4b404ec9c8108c89 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -12,53 +12,6 @@
  * Replaces the styles provided by the views_ui 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 gray 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. */
-  /**
-   * jQuery.UI dialog.
-   */
-  /**
-   * Progress bar.
-   */
-  /**
-   * Tabledrag icon size.
-   */ /* 17px */
-  /**
-   * Ajax progress.
-   */
-  /**
-   * Breadcrumb.
-   */
-}
-
 .views-admin .links {
   margin: 0;
   list-style: none outside none;