@ardium-ui/ui 5.0.0-alpha.9 → 5.0.0-alpha.91

package/themes/default/kbd.scss

@@ -1,21 +1,40 @@
 @use '../variables' as ARD;
 
-.ard-kbd {
-  border-radius: 0.2em;
-  font-family: monospace;
-  font-size: 0.9em;
-  margin: 0 0.125em;
-  color: ARD.$text2;
-
-  //! appearance
-  &.ard-appearance-outlined,
-  &.ard-appearance-filled {
-    border: 1px solid ARD.$detail-ultralight;
-    box-shadow: inset 0 -1px 0 ARD.$darken-overlay;
-    padding: 0.15em 0.35em;
-    background-color: ARD.$bg;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-kbd-font-size: ;
+    --ard-kbd-border-radius: 0.1875em;
+    --ard-kbd-margin: 0 0.125em;
+    --ard-kbd-padding: 0.125em 0.375em;
+    --ard-kbd-border-width: 1px;
+    --ard-kbd-border-style: solid;
+    --ard-kbd-border-color: ;
+    --ard-kbd-box-shadow-settings: inset 0 -1px 0;
+    // --ard-kbd-box-shadow-color: ;
+    // --ard-kbd-bg: ;
+    // --ard-kbd-filled-bg: ;
   }
-  &.ard-appearance-filled {
-    background: ARD.$bg-d;
+
+  .ard-kbd {
+    border-radius: var(--ard-kbd-border-radius, 0.1875em);
+    font-family: var(--ard-font-family-mono);
+    font-size: var(--ard-kbd-font-size, 0.875em);
+    margin: var(--ard-kbd-margin, 0 0.125em);
+    color: ARD.$text2;
+
+    //! appearance
+    &.ard-appearance-outlined,
+    &.ard-appearance-filled {
+      border: var(--ard-kbd-border-width, 1px) var(--ard-kbd-border-style, solid)
+        var(--ard-kbd-border-color, #{ARD.$detail-ultralight});
+      box-shadow: var(--ard-kbd-box-shadow-settings, inset 0 -1px 0) var(--ard-kbd-box-shadow-color, #{ARD.$detail-light});
+      padding: var(--ard-kbd-padding, 0.125em 0.375em);
+      background-color: var(--ard-kbd-bg, #{ARD.$bg});
+    }
+    &.ard-appearance-filled {
+      background: var(--ard-kbd-filled-bg, #{ARD.$bg-d});
+    }
   }
 }

package/themes/default/modal.scss

@@ -1,92 +1,128 @@
 @use '../variables' as ARD;
 
-.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;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-modal-width: ;
+    // --ard-modal-height: ;
+    // --ard-modal-min-width: ;
+    // --ard-modal-min-height: ;
+    // --ard-modal-max-width: ;
+    // --ard-modal-max-height: ;
+    --ard-modal-viewport-spacing: 2rem;
+    --ard-modal-padding: 1.25rem;
+    --ard-modal-padding-top: 1rem;
+    --ard-modal-gap: 1.5rem;
+    // --ard-modal-bg: ;
+    --ard-modal-no-heading-gap: 0.25rem;
+    --ard-modal-close-button-offset: 0.5rem;
+    --ard-modal-heading-padding-right: 2rem;
+    --ard-modal-heading-font-size: 1.25rem;
+    --ard-modal-heading-font-weight: 500;
+    // --ard-modal-heading-color: ;
+    --ard-modal-rounded-border-radius: 8px;
+    --ard-modal-font-size: 1rem;
+    --ard-modal-font-size-compact: 0.875rem;
+    --ard-modal-padding-compact: 0.75rem 2rem 1rem 2rem;
+    --ard-modal-gap-compact: 1rem;
+    --ard-modal-close-button-offset-compact: 0.25rem;
   }
-  .ard-modal-panel {
-    padding: 1.25rem;
-    padding-top: 1rem;
-    background: ARD.$bg;
-    max-width: calc(100vw - 4rem);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1.5rem;
 
-    &.ard-modal-no-heading-text {
-      gap: 0.25rem;
+  .ard-modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    place-items: center;
 
-      .ard-modal-close-button {
-        position: absolute;
-        right: 0.5rem;
-        top: 0.5rem;
-      }
+    &.ard-modal-backdrop {
+      background: ARD.$darken-overlay-strong;
     }
-    &.ard-modal-has-close-button {
-      .ard-modal-heading {
-        padding-right: 2rem;
+    .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-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 {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
 
-    .ard-modal-heading-text {
-      font-size: 1.25rem;
-      color: ARD.$text;
-      font-weight: 500;
-      font-family: Roboto;
-    }
-    .ard-modal-close-button {
-      position: absolute;
-      right: 0.5rem;
-      top: 0.5rem;
+      .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;
+    //! appearances
+    &.ard-appearance-raised {
+      .ard-modal-panel {
+        box-shadow: ARD.$simple-shadow2;
+      }
     }
-  }
-  //! variants
-  &.ard-variant-rounded {
-    .ard-modal-panel {
-      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: 90%;
-      padding: 0.75rem 2rem 1rem 2rem;
-      gap: 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: 0.25rem;
+        &.ard-modal-no-heading-text {
+          gap: var(--ard-modal-no-heading-gap, 0.25rem);
 
-        .ard-modal-close-button {
-          position: absolute;
-          right: 0.25rem;
-          top: 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);
+@layer ard-ui {
+  // 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%;
   }
 
-  //! variants
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-  &.ard-variant-pill {
-    border-radius: 9999px;
-  }
+  .ard-progress-bar {
+    @include CM.typeColors();
+    width: var(--ard-progress-bar-width, 100%);
+    margin: var(--ard-progress-bar-margin, 0.5rem 0);
+    overflow: hidden;
 
-  //! sizes
-  &.ard-progress-bar__size-default {
-    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__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

@@ -1,56 +1,64 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-.ard-progress-circle {
-  @include coloringMixins.typeColors;
-  width: 3em;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-progress-circle-size: 3em;
+    // --ard-progress-circle-colorless-background-color: ;
+    --ard-progress-circle-colorless-background-opacity: 100%;
+    --ard-progress-circle-colored-background-opacity: 100%;
+    --ard-progress-circle-value-font-size: 0.875em;
+  }
 
-  --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+  .ard-progress-circle {
+    @include coloringMixins.typeColors;
+    width: var(--ard-progress-circle-size, 3em);
+    height: var(--ard-progress-circle-size, 3em);
 
-  //! appearances
-  &.ard-appearance-transparent {
-    .ard-progress-circle-background {
-      background: transparent;
-    }
-  }
-  &.ard-appearance-colorless {
-    .ard-progress-circle-background {
-      background: ARD.$darken-overlay-medium;
+    --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+
+    //! appearances
+    &.ard-appearance-transparent {
+      .ard-progress-circle-background {
+        background: transparent;
+      }
     }
-  }
-  &.ard-appearance-colored {
-    .ard-progress-circle-background {
-      opacity: 16%;
-      background: var(--ard-cmpcl--bg-colored);
+    &.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%);
+      }
     }
-    //special case for no coloring
-    &.ard-color-none {
+    &.ard-appearance-colored {
       .ard-progress-circle-background {
-        opacity: 8%;
+        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: 0.9em;
-  }
-  &.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;
+      }
     }
   }
 }