@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

package/themes/default/card.scss

@@ -1,179 +1,181 @@
 @use '../variables' as ARD;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-card-bg: ;
-  // --ard-card-rounded-corner-radius: ;
-  // --ard-card-border-color: ;
+@layer ard-theme {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-card-bg: ;
+    // --ard-card-rounded-corner-radius: ;
+    // --ard-card-border-color: ;
 
-  --ard-card-content-padding-top: 0;
-  --ard-card-content-padding-right: 1em;
-  --ard-card-content-padding-bottom: 0;
-  --ard-card-content-padding-left: 1em;
+    --ard-card-content-padding-top: 0;
+    --ard-card-content-padding-right: 1em;
+    --ard-card-content-padding-bottom: 0;
+    --ard-card-content-padding-left: 1em;
 
-  --ard-card-header-padding-top: 0.5em;
-  --ard-card-header-padding-right: 1em;
-  --ard-card-header-padding-bottom: 0;
-  --ard-card-header-padding-left: 1em;
-  --ard-card-header-margin-bottom: 1em;
+    --ard-card-header-padding-top: 0.5em;
+    --ard-card-header-padding-right: 1em;
+    --ard-card-header-padding-bottom: 0;
+    --ard-card-header-padding-left: 1em;
+    --ard-card-header-margin-bottom: 1em;
 
-  // --ard-card-title-color: ;
-  --ard-card-title-font-size: 1.375em;
-  --ard-card-title-letter-spacing: 0.0125em;
-  --ard-card-title-font-weight: 500;
-  --ard-card-title-margin-top: 0;
-  // --ard-card-subtitle-color: ;
-  --ard-card-subtitle-font-size: 1.375em;
-  --ard-card-subtitle-letter-spacing: 0.0125em;
-  --ard-card-subtitle-font-weight: 500;
-  --ard-card-subtitle-margin-top: 0;
+    // --ard-card-title-color: ;
+    --ard-card-title-font-size: 1.375em;
+    --ard-card-title-letter-spacing: 0.0125em;
+    --ard-card-title-font-weight: 500;
+    --ard-card-title-margin-top: 0;
+    // --ard-card-subtitle-color: ;
+    --ard-card-subtitle-font-size: 1.375em;
+    --ard-card-subtitle-letter-spacing: 0.0125em;
+    --ard-card-subtitle-font-weight: 500;
+    --ard-card-subtitle-margin-top: 0;
 
-  --ard-card-avatar-size: 3em;
+    --ard-card-avatar-size: 3em;
 
-  --ard-card-action-buttons-padding: 0.5em;
-}
-
-ard-card,
-.ard-card {
-  position: relative;
-  background: var(--ard-card-bg, #{ARD.$bg});
-  box-sizing: border-box;
-  width: 100%;
-  height: max-content;
-  display: block;
-
-  //! appearances
-  &.ard-appearance-outlined {
-    border: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
-  }
-  &.ard-appearance-raised {
-    box-shadow: ARD.$card-shadow;
+    --ard-card-action-buttons-padding: 0.5em;
   }
-  //! variants
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-  &.ard-variant-rounded {
-    border-radius: var(--ard-card-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
-  }
-}
-//! header
-ard-card-header {
-  padding-top: var(--ard-card-header-padding-top, var(--ard-card-content-padding-top, 0.5em));
-  padding-right: var(--ard-card-header-padding-right, var(--ard-card-content-padding-right, 1em));
-  padding-bottom: var(--ard-card-header-padding-bottom, var(--ard-card-content-padding-bottom, 0));
-  padding-left: var(--ard-card-header-padding-left, var(--ard-card-content-padding-left, 1em));
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--ard-card-header-margin-bottom, 1em);
-  max-width: 100%;
 
-  .ard-card-header-title-container {
+  ard-card,
+  .ard-card {
+    position: relative;
+    background: var(--ard-card-bg, #{ARD.$bg});
+    box-sizing: border-box;
+    width: 100%;
+    height: max-content;
+    display: block;
+
+    //! appearances
+    &.ard-appearance-outlined {
+      border: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
+    }
+    &.ard-appearance-raised {
+      box-shadow: ARD.$card-shadow;
+    }
+    //! variants
+    &.ard-variant-sharp {
+      border-radius: 0;
+    }
+    &.ard-variant-rounded {
+      border-radius: var(--ard-card-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
+    }
+  }
+  //! header
+  ard-card-header {
+    padding-top: var(--ard-card-header-padding-top, var(--ard-card-content-padding-top, 0.5em));
+    padding-right: var(--ard-card-header-padding-right, var(--ard-card-content-padding-right, 1em));
+    padding-bottom: var(--ard-card-header-padding-bottom, var(--ard-card-content-padding-bottom, 0));
+    padding-left: var(--ard-card-header-padding-left, var(--ard-card-content-padding-left, 1em));
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
+    align-items: center;
+    margin-bottom: var(--ard-card-header-margin-bottom, 1em);
+    max-width: 100%;
 
-  &:first-child {
-    padding-top: var(--ard-card-content-padding-top, 0.5em);
-  }
-}
-.ard-card-title,
-.ard-card-subtitle {
-  display: block;
-  margin: 0;
-}
-.ard-card-title {
-  color: var(--ard-card-title-color, #{ARD.$text});
-  font-size: var(--ard-card-title-font-size, 1.375em);
-  letter-spacing: var(--ard-card-title-letter-spacing, 0.0125em);
-  font-weight: var(--ard-card-title-font-weight, 500);
-  margin-top: var(--ard-card-title-margin-top, 0);
-}
-.ard-card-subtitle {
-  color: var(--ard-card-subtitle-color, #{ARD.$text3});
-  font-size: var(--ard-card-subtitle-font-size, 1.375em);
-  letter-spacing: var(--ard-card-subtitle-letter-spacing, 0.0125em);
-  font-weight: var(--ard-card-subtitle-font-weight, 500);
-  margin-top: var(--ard-card-subtitle-margin-top, 0);
-}
-.ard-card-avatar {
-  display: block;
-  width: var(--ard-card-avatar-size, 3em);
-  height: var(--ard-card-avatar-size, 3em);
-  border-radius: 9999px;
-  flex-shrink: 0;
-  object-fit: cover;
+    .ard-card-header-title-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
 
-  ~ .ard-card-header-title-container {
-    padding-top: var(--ard-card-content-padding-top, 0);
-    padding-right: var(--ard-card-content-padding-right, 1em);
-    padding-bottom: var(--ard-card-content-padding-bottom, 0);
-    padding-left: var(--ard-card-content-padding-left, 0);
-  }
-}
-//! image
-.ard-card-image {
-  position: relative;
-  box-sizing: border-box;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  max-width: 100%;
+    &:first-child {
+      padding-top: var(--ard-card-content-padding-top, 0.5em);
+    }
+  }
+  .ard-card-title,
+  .ard-card-subtitle {
+    display: block;
+    margin: 0;
+  }
+  .ard-card-title {
+    color: var(--ard-card-title-color, #{ARD.$text});
+    font-size: var(--ard-card-title-font-size, 1.375em);
+    letter-spacing: var(--ard-card-title-letter-spacing, 0.0125em);
+    font-weight: var(--ard-card-title-font-weight, 500);
+    margin-top: var(--ard-card-title-margin-top, 0);
+  }
+  .ard-card-subtitle {
+    color: var(--ard-card-subtitle-color, #{ARD.$text3});
+    font-size: var(--ard-card-subtitle-font-size, 1.375em);
+    letter-spacing: var(--ard-card-subtitle-letter-spacing, 0.0125em);
+    font-weight: var(--ard-card-subtitle-font-weight, 500);
+    margin-top: var(--ard-card-subtitle-margin-top, 0);
+  }
+  .ard-card-avatar {
+    display: block;
+    width: var(--ard-card-avatar-size, 3em);
+    height: var(--ard-card-avatar-size, 3em);
+    border-radius: 9999px;
+    flex-shrink: 0;
+    object-fit: cover;
 
-  &:first-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-  &:last-child {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-}
-ard-card,
-.ard-card {
-  .ard-appearance-outlined .ard-image {
-    border-bottom: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
-  }
-}
-//! content
-.ard-card-content {
-  padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
-  padding-right: var(--ard-card-content-padding-right, var(--ard-card-content-padding, 1em));
-  padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
-  padding-left: var(--ard-card-content-padding-left, var(--ard-card-content-padding, 1em));
-  display: block;
-  max-width: 100%;
+    ~ .ard-card-header-title-container {
+      padding-top: var(--ard-card-content-padding-top, 0);
+      padding-right: var(--ard-card-content-padding-right, 1em);
+      padding-bottom: var(--ard-card-content-padding-bottom, 0);
+      padding-left: var(--ard-card-content-padding-left, 0);
+    }
+  }
+  //! image
+  .ard-card-image {
+    position: relative;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    max-width: 100%;
 
-  &:first-child {
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+  }
+  ard-card,
+  .ard-card {
+    .ard-appearance-outlined .ard-image {
+      border-bottom: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
+    }
+  }
+  //! content
+  .ard-card-content {
     padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
-  }
-  &:last-child {
+    padding-right: var(--ard-card-content-padding-right, var(--ard-card-content-padding, 1em));
     padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
-  }
+    padding-left: var(--ard-card-content-padding-left, var(--ard-card-content-padding, 1em));
+    display: block;
+    max-width: 100%;
 
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-//! action buttons
-.ard-card-action-buttons {
-  padding: var(--ard-card-action-buttons-padding, 0.5em);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 100%;
+    &:first-child {
+      padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
+    }
+    &:last-child {
+      padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
+    }
 
-  &.ard-align-left {
-    justify-content: flex-start;
-  }
-  &.ard-align-center {
-    justify-content: center;
-  }
-  &.ard-align-right {
-    justify-content: flex-end;
+    > :last-child {
+      margin-bottom: 0;
+    }
   }
+  //! action buttons
+  .ard-card-action-buttons {
+    padding: var(--ard-card-action-buttons-padding, 0.5em);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+
+    &.ard-align-left {
+      justify-content: flex-start;
+    }
+    &.ard-align-center {
+      justify-content: center;
+    }
+    &.ard-align-right {
+      justify-content: flex-end;
+    }
+  }
+  //! footer
+  //no styling needed
 }
-//! footer
-//no styling needed

package/themes/default/checkbox-list.scss

@@ -1,109 +1,111 @@
 @use './mixins' as CM;
 @use '../variables' as ARD;
 
-:root {
-  --ard-checkbox-list-padding: 0.375rem 0;
-  --ard-checkbox-list-item-hover-opacity: 5%;
-  --ard-checkbox-list-item-active-opacity: 15%;
-  --ard-checkbox-list-item-height: 3rem;
-  --ard-checkbox-list-item-height-compact: 2rem;
-  --ard-checkbox-list-checkbox-min-width: 1.25rem;
-  --ard-checkbox-list-checkbox-padding: 0.625rem;
-  --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
-  --ard-checkbox-list-gap: 0;
-  --ard-checkbox-list-gap-compact: 0;
-  --ard-checkbox-list-item-gap: 0.5rem;
-  --ard-checkbox-list-item-gap-compact: 0.325rem;
-  --ard-checkbox-list-disabled-opacity: 50%;
-}
-
-.ard-checkbox-list {
-  display: flex;
-  flex-direction: column;
-  padding: var(--ard-checkbox-list-padding, 0.375rem 0);
-  gap: var(--ard-checkbox-list-gap, 0);
+@layer ard-theme {
+  :root {
+    --ard-checkbox-list-padding: 0.375rem 0;
+    --ard-checkbox-list-item-hover-opacity: 5%;
+    --ard-checkbox-list-item-active-opacity: 15%;
+    --ard-checkbox-list-item-height: 3rem;
+    --ard-checkbox-list-item-height-compact: 2rem;
+    --ard-checkbox-list-checkbox-min-width: 1.25rem;
+    --ard-checkbox-list-checkbox-padding: 0.625rem;
+    --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
+    --ard-checkbox-list-gap: 0;
+    --ard-checkbox-list-gap-compact: 0;
+    --ard-checkbox-list-item-gap: 0.5rem;
+    --ard-checkbox-list-item-gap-compact: 0.325rem;
+    --ard-checkbox-list-disabled-opacity: 50%;
+  }
 
-  .ard-checkbox-list__item {
+  .ard-checkbox-list {
     display: flex;
-    align-items: center;
-    justify-content: stretch;
-    gap: var(--ard-checkbox-list-item-gap, 0.5rem);
-    padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
-    position: relative;
-    cursor: pointer;
-    height: max-content;
-    min-height: var(--ard-checkbox-list-item-height, 3rem);
+    flex-direction: column;
+    padding: var(--ard-checkbox-list-padding, 0.375rem 0);
+    gap: var(--ard-checkbox-list-gap, 0);
 
-    > label {
-      pointer-events: none;
-      user-select: none;
-      flex-grow: 1;
-      padding: 0;
-      min-height: var(--ard-checkbox-list-item-height, 3rem);
+    .ard-checkbox-list__item {
       display: flex;
       align-items: center;
-    }
-    > .ard-focus-overlay {
-      @include CM.focus-overlay();
-      background: ARD.$overlay;
-    }
-    &.ard-item-highlighted {
-      > .ard-focus-overlay {
-        opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
+      justify-content: stretch;
+      gap: var(--ard-checkbox-list-item-gap, 0.5rem);
+      padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
+      position: relative;
+      cursor: pointer;
+      height: max-content;
+      min-height: var(--ard-checkbox-list-item-height, 3rem);
+
+      > label {
+        pointer-events: none;
+        user-select: none;
+        flex-grow: 1;
+        padding: 0;
+        min-height: var(--ard-checkbox-list-item-height, 3rem);
+        display: flex;
+        align-items: center;
       }
-    }
-    &:active {
       > .ard-focus-overlay {
-        opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
+        @include CM.focus-overlay();
+        background: ARD.$overlay;
       }
-    }
-    ard-checkbox {
-      padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
-      min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
+      &.ard-item-highlighted {
+        > .ard-focus-overlay {
+          opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
+        }
+      }
+      &:active {
+        > .ard-focus-overlay {
+          opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
+        }
+      }
+      ard-checkbox {
+        padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
+        min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
 
-      .ard-checkbox {
-        .ard-focus-overlay {
-          display: none;
+        .ard-checkbox {
+          .ard-focus-overlay {
+            display: none;
+          }
         }
       }
-    }
-    &.ard-item-disabled {
-      pointer-events: none;
+      &.ard-item-disabled {
+        pointer-events: none;
 
-      > label {
-        opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
+        > label {
+          opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
+        }
       }
     }
-  }
-  &.ard-compact {
-    gap: var(--ard-checkbox-list-gap-compact, 0);
+    &.ard-compact {
+      gap: var(--ard-checkbox-list-gap-compact, 0);
 
-    .ard-checkbox-list__item {
-      gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
-      height: var(--ard-checkbox-list-item-height-compact, 2rem);
+      .ard-checkbox-list__item {
+        gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
+        height: var(--ard-checkbox-list-item-height-compact, 2rem);
+      }
     }
-  }
-  //! ALIGN TYPES
-  &.ard-align-left-clumped,
-  &.ard-align-right-split {
-    .ard-checkbox-list__item {
-      label {
-        justify-content: flex-start;
+    //! ALIGN TYPES
+    &.ard-align-left-clumped,
+    &.ard-align-right-split {
+      .ard-checkbox-list__item {
+        label {
+          justify-content: flex-start;
+        }
       }
     }
-  }
-  &.ard-align-left-split,
-  &.ard-align-right-clumped {
-    .ard-checkbox-list__item {
-      label {
-        justify-content: flex-end;
+    &.ard-align-left-split,
+    &.ard-align-right-clumped {
+      .ard-checkbox-list__item {
+        label {
+          justify-content: flex-end;
+        }
       }
     }
-  }
-  &.ard-align-right-split,
-  &.ard-align-right-clumped {
-    .ard-checkbox-list__item {
-      flex-direction: row-reverse;
+    &.ard-align-right-split,
+    &.ard-align-right-clumped {
+      .ard-checkbox-list__item {
+        flex-direction: row-reverse;
+      }
     }
   }
 }