@ardium-ui/ui 5.0.0-alpha.74 → 5.0.0-alpha.76

package/themes/default/modal.scss

@@ -28,99 +28,101 @@
   --ard-modal-close-button-offset-compact: 0.25rem;
 }
 
-.ard-modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: grid;
-  place-items: center;
+@layer ard-theme {
+  .ard-modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    place-items: center;
 
-  &.ard-modal-backdrop {
-    background: ARD.$darken-overlay-strong;
-  }
-  .ard-modal-panel {
-    padding: var(--ard-modal-padding, 1.25rem);
-    padding-top: var(--ard-modal-padding-top, 1rem);
-    width: var(--ard-modal-width);
-    height: var(--ard-modal-height);
-    min-width: var(--ard-modal-min-width);
-    min-height: var(--ard-modal-min-height);
-    max-width: var(--ard-modal-max-width, calc(100vw - var(--ard-modal-viewport-spacing, 2rem) * 2));
-    max-height: var(--ard-modal-max-height, calc(100vh - var(--ard-modal-viewport-spacing, 2rem) * 2));
-    background: var(--ard-modal-bg, #{ARD.$bg});
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--ard-modal-gap, 1.5rem);
-    font-size: 1rem;
+    &.ard-modal-backdrop {
+      background: ARD.$darken-overlay-strong;
+    }
+    .ard-modal-panel {
+      padding: var(--ard-modal-padding, 1.25rem);
+      padding-top: var(--ard-modal-padding-top, 1rem);
+      width: var(--ard-modal-width);
+      height: var(--ard-modal-height);
+      min-width: var(--ard-modal-min-width);
+      min-height: var(--ard-modal-min-height);
+      max-width: var(--ard-modal-max-width, calc(100vw - var(--ard-modal-viewport-spacing, 2rem) * 2));
+      max-height: var(--ard-modal-max-height, calc(100vh - var(--ard-modal-viewport-spacing, 2rem) * 2));
+      background: var(--ard-modal-bg, #{ARD.$bg});
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--ard-modal-gap, 1.5rem);
+      font-size: 1rem;
 
-    &.ard-modal-no-heading-text {
-      gap: var(--ard-modal-no-heading-gap, 0.25rem);
+      &.ard-modal-no-heading-text {
+        gap: var(--ard-modal-no-heading-gap, 0.25rem);
 
+        .ard-modal-close-button {
+          position: absolute;
+          right: var(--ard-modal-close-button-offset, 0.5rem);
+          top: var(--ard-modal-close-button-offset, 0.5rem);
+        }
+      }
+      &.ard-modal-has-close-button {
+        .ard-modal-heading {
+          padding-right: var(--ard-modal-heading-padding-right, 2rem);
+        }
+      }
+    }
+    .ard-modal-heading {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+
+      .ard-modal-heading-text {
+        font-size: var(--ard-modal-heading-font-size, 1.25rem);
+        color: var(--ard-modal-heading-color, #{ARD.$text});
+        font-weight: var(--ard-modal-heading-font-weight, 500);
+        font-family: var(--ard-font-family);
+      }
       .ard-modal-close-button {
         position: absolute;
         right: var(--ard-modal-close-button-offset, 0.5rem);
         top: var(--ard-modal-close-button-offset, 0.5rem);
       }
     }
-    &.ard-modal-has-close-button {
-      .ard-modal-heading {
-        padding-right: var(--ard-modal-heading-padding-right, 2rem);
+    //! appearances
+    &.ard-appearance-raised {
+      .ard-modal-panel {
+        box-shadow: ARD.$simple-shadow2;
       }
     }
-  }
-  .ard-modal-heading {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-
-    .ard-modal-heading-text {
-      font-size: var(--ard-modal-heading-font-size, 1.25rem);
-      color: var(--ard-modal-heading-color, #{ARD.$text});
-      font-weight: var(--ard-modal-heading-font-weight, 500);
-      font-family: var(--ard-font-family);
-    }
-    .ard-modal-close-button {
-      position: absolute;
-      right: var(--ard-modal-close-button-offset, 0.5rem);
-      top: var(--ard-modal-close-button-offset, 0.5rem);
-    }
-  }
-  //! appearances
-  &.ard-appearance-raised {
-    .ard-modal-panel {
-      box-shadow: ARD.$simple-shadow2;
-    }
-  }
-  //! variants
-  &.ard-variant-rounded {
-    .ard-modal-panel {
-      border-radius: var(--ard-modal-rounded-border-radius, 8px);
+    //! variants
+    &.ard-variant-rounded {
+      .ard-modal-panel {
+        border-radius: var(--ard-modal-rounded-border-radius, 8px);
+      }
     }
-  }
-  &.ard-variant-sharp {
-    .ard-modal-panel {
-      border-radius: 0;
+    &.ard-variant-sharp {
+      .ard-modal-panel {
+        border-radius: 0;
+      }
     }
-  }
 
-  //! compact
-  &.ard-compact {
-    .ard-modal-panel {
-      font-size: var(--ard-modal-font-size-compact, 0.875rem);
-      padding: var(--ard-modal-padding-compact, 0.75rem 2rem 1rem 2rem);
-      gap: var(--ard-modal-gap-compact, 1rem);
+    //! compact
+    &.ard-compact {
+      .ard-modal-panel {
+        font-size: var(--ard-modal-font-size-compact, 0.875rem);
+        padding: var(--ard-modal-padding-compact, 0.75rem 2rem 1rem 2rem);
+        gap: var(--ard-modal-gap-compact, 1rem);
 
-      &.ard-modal-no-heading-text {
-        gap: var(--ard-modal-no-heading-gap, 0.25rem);
+        &.ard-modal-no-heading-text {
+          gap: var(--ard-modal-no-heading-gap, 0.25rem);
 
-        .ard-modal-close-button {
-          position: absolute;
-          right: var(--ard-modal-close-button-offset-compact, 0.25rem);
-          top: var(--ard-modal-close-button-offset-compact, 0.25rem);
+          .ard-modal-close-button {
+            position: absolute;
+            right: var(--ard-modal-close-button-offset-compact, 0.25rem);
+            top: var(--ard-modal-close-button-offset-compact, 0.25rem);
+          }
         }
       }
     }

package/themes/default/progress-bar.scss

@@ -1,127 +1,151 @@
 @use './coloring' as CM;
 @use '../variables' as ARD;
 
-.ard-progress-bar {
-  @include CM.typeColors();
-  width: 100%;
-  margin: 0.5rem 0;
-  overflow: hidden;
-
-  .ard-progress-bar__background,
-  .ard-progress-bar__overlay {
-    position: absolute;
-    background-color: var(--ard-cmpcl--bg-colored);
-    top: 0;
-    bottom: 0;
-    left: 0;
-  }
-  .ard-progress-bar__background {
-    background-color: var(--ard-cmpcl--bg-colored-light);
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 30%;
-  }
-  .ard-progress-bar__overlay {
-    width: var(--ard-_progress-bar-main, 0);
-  }
-
-  //! variants
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-  &.ard-variant-pill {
-    border-radius: 9999px;
-  }
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-progress-bar-width: 100%;
+  --ard-progress-bar-height: 0.25rem;
+  --ard-progress-bar-margin: 0.5rem 0;
+  // --ard-progress-bar-foreground-color: ;
+  // --ard-progress-bar-background-color: ;
+  // --ard-progress-bar-buffer-color: ;
+  --ard-progress-bar-background-opacity: 30%;
+  --ard-progress-bar-buffer-opacity: 100%;
+  --ard-progress-bar-transition-duration: 0.1s;
+  --ard-progress-bar-indeterminate-animation-duration: 2.1s;
+  --ard-progress-bar-buffer-animation-distance: 0.5rem;
+  --ard-progress-bar-buffer-animation-duration: 0.4s;
+  --ard-progress-bar-currentColor-background-opacity: 22.5%;
+  --ard-progress-bar-currentColor-overlay-buffer-opacity: 30%;
+}
 
-  //! sizes
-  &.ard-progress-bar__size-default {
-    height: 0.25rem;
-  }
-  &.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
-    height: 100%;
-  }
+@layer ard-theme {
+  .ard-progress-bar {
+    @include CM.typeColors();
+    width: var(--ard-progress-bar-width, 100%);
+    margin: var(--ard-progress-bar-margin, 0.5rem 0);
+    overflow: hidden;
 
-  //! modes
-  &.ard-progress-bar__mode-determinate,
-  &.ard-progress-bar__mode-buffer {
+    .ard-progress-bar__background,
     .ard-progress-bar__overlay {
-      transition: width 0.1s ARD.$timing-fn;
+      position: absolute;
+      background-color: var(--ard-progress-bar-foreground-color, var(--ard-cmpcl--bg-colored));
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+    .ard-progress-bar__background {
+      background-color: var(--ard-progress-bar-background-color, var(--ard-cmpcl--bg-colored-light));
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      opacity: var(--ard-progress-bar-background-opacity, 30%);
     }
-  }
-  &.ard-progress-bar__mode-indeterminate,
-  &.ard-progress-bar__mode-query {
     .ard-progress-bar__overlay {
-      position: unset;
+      width: var(--ard-_progress-bar-main, 0);
+    }
 
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        background-color: inherit;
-        top: 0;
-        left: 0;
-        bottom: 0;
-      }
-      &::before {
-        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    //! variants
+    &.ard-variant-sharp {
+      border-radius: 0;
+    }
+    &.ard-variant-pill {
+      border-radius: 9999px;
+    }
+
+    //! sizes
+    &.ard-progress-bar__size-default {
+      height: var(--ard-progress-bar-height, 0.25rem);
+    }
+    &.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
+      height: 100%;
+    }
+
+    //! modes
+    &.ard-progress-bar__mode-determinate,
+    &.ard-progress-bar__mode-buffer {
+      .ard-progress-bar__overlay {
+        transition: width var(--ard-progress-bar-transition-duration, 0.1s) ARD.$timing-fn;
       }
-      &::after {
-        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-        animation-delay: 1.15s;
+    }
+    &.ard-progress-bar__mode-indeterminate,
+    &.ard-progress-bar__mode-query {
+      .ard-progress-bar__overlay {
+        position: unset;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          background-color: inherit;
+          top: 0;
+          left: 0;
+          bottom: 0;
+        }
+        &::before {
+          animation: indeterminate var(--ard-progress-bar-indeterminate-animation-duration, 2.1s)
+            cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        }
+        &::after {
+          animation: indeterminate-short var(--ard-progress-bar-indeterminate-animation-duration, 2.1s)
+            cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+          animation-delay: calc(var(--ard-progress-bar-indeterminate-animation-duration, 2.1s) * 0.55);
+        }
       }
     }
-  }
-  &.ard-progress-bar__mode-query {
-    transform: rotate(180deg);
-  }
-  &.ard-progress-bar__mode-buffer {
-    .ard-progress-bar__background {
-      background: none !important;
-      left: var(--ard-_progress-bar-buffer, 100%);
-      overflow: hidden;
+    &.ard-progress-bar__mode-query {
+      transform: rotate(180deg);
+    }
+    &.ard-progress-bar__mode-buffer {
+      .ard-progress-bar__background {
+        background: none !important;
+        left: var(--ard-_progress-bar-buffer, 100%);
+        overflow: hidden;
 
-      &::after {
-        content: '';
+        &::after {
+          content: '';
+          position: absolute;
+          right: calc(var(--ard-progress-bar-buffer-animation-distance, 0.5rem) * -1);
+          top: 0;
+          bottom: 0;
+          width: 9999px;
+          animation: buffer var(--ard-progress-bar-buffer-animation-duration, 0.4s) linear infinite;
+          border-bottom: var(--ard-progress-bar-height, 0.25rem) dotted var(--ard-cmpcl--bg-colored);
+        }
+      }
+      .ard-progress-bar__overlay-buffer {
+        background: var(--ard-progress-bar-buffer-color, var(--ard-cmpcl--bg-colored-light));
+        opacity: var(--ard-progress-bar-buffer-opacity, 100%);
         position: absolute;
-        right: -0.5rem;
+        left: 0;
+        width: var(--ard-_progress-bar-buffer, 0);
         top: 0;
         bottom: 0;
-        width: 9999px;
-        animation: buffer 0.4s linear infinite;
-        border-bottom: 0.25rem dotted var(--ard-cmpcl--bg-colored);
+        transition: width var(--ard-progress-bar-transition-duration, 0.1s) ARD.$timing-fn;
       }
     }
-    .ard-progress-bar__overlay-buffer {
-      background: var(--ard-cmpcl--bg-colored-light);
-      position: absolute;
-      left: 0;
-      width: var(--ard-_progress-bar-buffer, 0);
-      top: 0;
-      bottom: 0;
-      transition: width 0.1s ARD.$timing-fn;
-    }
-  }
 
-  //! hiding the value
-  &.ard-progress-bar__size-default,
-  &.ard-progress-bar__hide-value,
-  &.ard-progress-bar__mode-buffer {
-    > .ard-progress-bar__value {
-      display: none;
+    //! hiding the value
+    &.ard-progress-bar__size-default,
+    &.ard-progress-bar__hide-value,
+    &.ard-progress-bar__mode-buffer {
+      > .ard-progress-bar__value {
+        display: none;
+      }
     }
-  }
 
-  //! currentColor special case
-  &.ard-color-currentColor {
-    .ard-progress-bar__background {
-      opacity: 22.5%;
-      background: var(--ard-cmpcl--bg-colored);
-    }
-    .ard-progress-bar__overlay-buffer {
-      opacity: 30%;
-      background: var(--ard-cmpcl--bg-colored);
+    //! currentColor special case
+    &.ard-color-currentColor {
+      .ard-progress-bar__background {
+        opacity: var(--ard-progress-bar-currentColor-background-opacity, 22.5%);
+        background: var(--ard-cmpcl--bg-colored);
+      }
+      .ard-progress-bar__overlay-buffer {
+        opacity: var(--ard-progress-bar-currentColor-overlay-buffer-opacity, 30%);
+        background: var(--ard-cmpcl--bg-colored);
+      }
     }
   }
 }

package/themes/default/progress-circle.scss

@@ -11,52 +11,54 @@
   --ard-progress-circle-value-font-size: 0.875em;
 }
 
-.ard-progress-circle {
-  @include coloringMixins.typeColors;
-  width: var(--ard-progress-circle-size, 3em);
-  height: var(--ard-progress-circle-size, 3em);
+@layer ard-theme {
+  .ard-progress-circle {
+    @include coloringMixins.typeColors;
+    width: var(--ard-progress-circle-size, 3em);
+    height: var(--ard-progress-circle-size, 3em);
 
-  --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+    --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
 
-  //! appearances
-  &.ard-appearance-transparent {
-    .ard-progress-circle-background {
-      background: transparent;
+    //! appearances
+    &.ard-appearance-transparent {
+      .ard-progress-circle-background {
+        background: transparent;
+      }
     }
-  }
-  &.ard-appearance-colorless {
-    .ard-progress-circle-background {
-      background: var(--ard-progress-circle-colorless-background-color, #{ARD.$darken-overlay-medium});
-      opacity: var(--ard-progress-circle-colorless-background-opacity, 100%);
+    &.ard-appearance-colorless {
+      .ard-progress-circle-background {
+        background: var(--ard-progress-circle-colorless-background-color, #{ARD.$darken-overlay-medium});
+        opacity: var(--ard-progress-circle-colorless-background-opacity, 100%);
+      }
     }
-  }
-  &.ard-appearance-colored {
-    .ard-progress-circle-background {
-      opacity: var(--ard-progress-circle-colored-background-opacity, 100%);
-      background: var(--ard-cmpcl--bg-colored);
+    &.ard-appearance-colored {
+      .ard-progress-circle-background {
+        opacity: var(--ard-progress-circle-colored-background-opacity, 100%);
+        background: var(--ard-cmpcl--bg-colored);
+      }
     }
-  }
-  //! ring variant
-  &.ard-progress-circle-variant-ring {
-    .ard-progress-circle-background,
-    .ard-progress-circle-overlay {
-      //magic number
-      //don't know why this value specifically looks good
-      mask: radial-gradient(transparent 59%, #000 59%);
+    //! ring variant
+    &.ard-progress-circle-variant-ring {
+      .ard-progress-circle-background,
+      .ard-progress-circle-overlay {
+        //magic number
+        //don't know why this value specifically looks good
+        mask: radial-gradient(transparent 59%, #000 59%);
+      }
     }
-  }
-  //! value
-  .ard-progress-circle-value {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-weight: bold;
-    font-size: var(--ard-progress-circle-value-font-size, 0.875em);
-  }
-  &.ard-progress-circle-variant-full {
+    //! value
     .ard-progress-circle-value {
-      display: none;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-weight: bold;
+      font-size: var(--ard-progress-circle-value-font-size, 0.875em);
+    }
+    &.ard-progress-circle-variant-full {
+      .ard-progress-circle-value {
+        display: none;
+      }
     }
   }
 }