diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index c5ffdbbead..1fca06a25f 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -12,21 +12,21 @@
 
 .fieldset {
   min-width: 0;
-  margin: 1rem 0;
+  margin: var(--space-m) 0;
   padding: 0;
-  color: #232429;
-  border: 1px solid #dedfe4;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.fieldset--group {
-  color: inherit;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
+  color: var(--color-text);
+  border: var(--details-border-size) solid var(--details-border-color);
+  border-radius: var(--base-border-radius);
+  background-color: var(--color-white);
+  box-shadow: var(--details-box-shadow);
+
+  &--group {
+    color: inherit;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+  }
 }
 
 /* IE workaround. */
@@ -48,106 +48,105 @@ _:-ms-fullscreen,
   display: contents; /* For Firefox. */
   float: left; /* iOS Safari, Android Chrome, Edge. */
   width: 100%; /* iOS Safari, Android Chrome, Edge. */
-  margin-bottom: 1rem;
-  color: #55565b;
+  margin-bottom: var(--space-m);
+  color: var(--color-gray-800);
   font-weight: bold;
-}
 
-@media screen and (min-width: 48em) {
-  .fieldset__legend {
-    margin-bottom: 1.5rem;
+  &--composite {
+    float: none;
+    width: auto;
+    margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
+    margin-bottom: calc(var(--space-xs)/2); /* 4px */
+    color: inherit;
+    font-size: var(--font-size-s); /* 14px */
+    line-height: 1.125rem; /* 18px */
   }
-}
 
-.fieldset__legend--composite {
-  float: none;
-  width: auto;
-  margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
-  margin-bottom: 0.25rem; /* 4px */
-  color: inherit;
-  font-size: 0.889rem; /* 14px */
-  line-height: 1.125rem; /* 18px */
+  /* This is used only on install configure form. */
+  &--group {
+    text-transform: uppercase;
+    color: inherit;
+  }
 }
 
-/* This is used only on install configure form. */
-
-.fieldset__legend--group {
-  text-transform: uppercase;
-  color: inherit;
+@media screen and (min-width: 48em) {
+  .fieldset__legend {
+    margin-bottom: var(--space-l);
+  }
 }
 
 .fieldset__label {
   display: block;
-  padding: 1rem;
-  line-height: 1rem;
-}
+  padding: var(--space-m);
+  line-height: var(--space-m);
 
-@media screen and (min-width: 48em) {
-  .fieldset__label {
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
+  &--group {
+    padding: 0;
+    line-height: inherit;
   }
 }
 
-.fieldset__label--group {
-  padding: 0;
-  line-height: inherit;
-}
-
 .fieldset__label.is-disabled {
-  color: #828388;
-}
+    color: var(--input--disabled-fg-color);
+  }
 
 .fieldset__label.has-error {
-  color: #dc2323;
+    color: var(--input--error-color);
+  }
+
+@media screen and (min-width: 48em) {
+  .fieldset__label {
+    padding-right: var(--space-l);
+    padding-left: var(--space-l);
+  }
 }
 
 .fieldset__description {
   margin-top: 0.375rem; /* 6px */
   margin-bottom: 0.375rem; /* 6px */
-  color: #55565b;
-  font-size: 0.79rem; /* ~13px */
-  line-height: 1.0625rem; /* 17px */
+  color: var(--input-fg-color--description);
+  font-size: var(--font-size-xs); /* ~13px */
+  line-height: 1.0625rem /* 17px */
 }
 
 .fieldset__description.is-disabled {
-  color: #828388;
-}
+    color: var(--input--disabled-fg-color);
+  }
 
 /* Error message (Inline form errors). */
 
 .fieldset__error-message {
   margin-top: 0.375rem; /* 6px */
   margin-bottom: 0.375rem; /* 6px */
-  color: #dc2323;
-  font-size: 0.79rem; /* ~13px */
+  color: var(--input--error-color);
+  font-size: var(--font-size-xs); /* ~13px */
   font-weight: normal;
   line-height: 1.0625rem; /* 17px */
 }
 
 .fieldset__wrapper {
-  margin: 1rem;
-}
+  margin: var(--space-m);
 
-@media screen and (min-width: 48em) {
-  .fieldset__wrapper {
-    margin: 1.5rem 1.5rem 1.75rem;
+  .fieldset__legend--visible ~ & {
+    margin-top: 0;
   }
-}
 
-.fieldset__legend--visible ~ .fieldset__wrapper {
-  margin-top: 0;
-}
+  &--group {
+    margin: 0;
+  }
 
-.fieldset__wrapper--group {
-  margin: 0;
+  /**
+   * Remove the unnecessary extra padding of container-inline wrapper if it's used
+   * inside a fieldset.
+   */
 }
 
-/**
- * Remove the unnecessary extra padding of container-inline wrapper if it's used
- * inside a fieldset.
- */
-
 .fieldset__wrapper > .container-inline {
-  padding: 0;
+    padding: 0;
+  }
+
+@media screen and (min-width: 48em) {
+  .fieldset__wrapper {
+    margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
+  }
 }
diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css
index 87669f0617..f5e03a4a1d 100644
--- a/core/themes/claro/css/components/fieldset.pcss.css
+++ b/core/themes/claro/css/components/fieldset.pcss.css
@@ -3,8 +3,6 @@
  * Fieldset styles.
  */
 
-@import "../base/variables.pcss.css";
-
 .fieldset {
   min-width: 0;
   margin: var(--space-m) 0;
@@ -14,14 +12,14 @@
   border-radius: var(--base-border-radius);
   background-color: var(--color-white);
   box-shadow: var(--details-box-shadow);
-}
 
-.fieldset--group {
-  color: inherit;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
+  &--group {
+    color: inherit;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+  }
 }
 
 /* IE workaround. */
@@ -43,6 +41,22 @@ _:-ms-fullscreen,
   margin-bottom: var(--space-m);
   color: var(--color-gray-800);
   font-weight: bold;
+
+  &--composite {
+    float: none;
+    width: auto;
+    margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
+    margin-bottom: calc(var(--space-xs) / 2); /* 4px */
+    color: inherit;
+    font-size: var(--font-size-s); /* 14px */
+    line-height: calc(18rem / 16); /* 18px */
+  }
+
+  /* This is used only on install configure form. */
+  &--group {
+    text-transform: uppercase;
+    color: inherit;
+  }
 }
 
 @media screen and (min-width: 48em) {
@@ -51,26 +65,21 @@ _:-ms-fullscreen,
   }
 }
 
-.fieldset__legend--composite {
-  float: none;
-  width: auto;
-  margin-top: 0; /* IE11 and Edge do not collapse this margin. Ideally this would be 4px */
-  margin-bottom: calc(var(--space-xs) / 2); /* 4px */
-  color: inherit;
-  font-size: var(--font-size-s); /* 14px */
-  line-height: calc(18rem / 16); /* 18px */
-}
-
-/* This is used only on install configure form. */
-.fieldset__legend--group {
-  text-transform: uppercase;
-  color: inherit;
-}
-
 .fieldset__label {
   display: block;
   padding: var(--space-m);
   line-height: var(--space-m);
+
+  &--group {
+    padding: 0;
+    line-height: inherit;
+  }
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
+  &.has-error {
+    color: var(--input--error-color);
+  }
 }
 
 @media screen and (min-width: 48em) {
@@ -80,29 +89,16 @@ _:-ms-fullscreen,
   }
 }
 
-.fieldset__label--group {
-  padding: 0;
-  line-height: inherit;
-}
-
-.fieldset__label.is-disabled {
-  color: var(--input--disabled-fg-color);
-}
-
-.fieldset__label.has-error {
-  color: var(--input--error-color);
-}
-
 .fieldset__description {
   margin-top: calc(6rem / 16); /* 6px */
   margin-bottom: calc(6rem / 16); /* 6px */
   color: var(--input-fg-color--description);
   font-size: var(--font-size-xs); /* ~13px */
   line-height: calc(17rem / 16); /* 17px */
-}
 
-.fieldset__description.is-disabled {
-  color: var(--input--disabled-fg-color);
+  &.is-disabled {
+    color: var(--input--disabled-fg-color);
+  }
 }
 
 /* Error message (Inline form errors). */
@@ -117,26 +113,26 @@ _:-ms-fullscreen,
 
 .fieldset__wrapper {
   margin: var(--space-m);
-}
 
-@media screen and (min-width: 48em) {
-  .fieldset__wrapper {
-    margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
+  .fieldset__legend--visible ~ & {
+    margin-top: 0;
   }
-}
 
-.fieldset__legend--visible ~ .fieldset__wrapper {
-  margin-top: 0;
-}
+  &--group {
+    margin: 0;
+  }
 
-.fieldset__wrapper--group {
-  margin: 0;
+  /**
+   * Remove the unnecessary extra padding of container-inline wrapper if it's used
+   * inside a fieldset.
+   */
+  & > .container-inline {
+    padding: 0;
+  }
 }
 
-/**
- * Remove the unnecessary extra padding of container-inline wrapper if it's used
- * inside a fieldset.
- */
-.fieldset__wrapper > .container-inline {
-  padding: 0;
+@media screen and (min-width: 48em) {
+  .fieldset__wrapper {
+    margin: var(--space-l) var(--space-l) calc(var(--space-m) + var(--space-s));
+  }
 }