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

package/themes/default/stars.scss

@@ -2,84 +2,115 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
-.ard-star,
-.ard-star-button,
-.ard-rating-display,
-.ard-rating-input {
-  @include coloringMixins.typeColors();
-  color: var(--ard-cmpcl--bg-colored);
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-star-size: 1.5em;
 
-  &.ard-color-gold {
-    color: ARD.$gold;
-  }
-}
-.ard-star {
-  font-size: inherit;
-  width: 1.5em;
-  height: 1.5em;
-  position: relative;
-}
-.ard-rating-display,
-.ard-rating-input {
-  display: flex;
-  user-select: none;
-}
-.ard-rating-input {
-  cursor: pointer;
+    --ard-star-button-hitbox-offset: -4px;
+    --ard-star-button-overlay-offset: -0.125em;
+    --ard-star-button-hover-overlay-opacity: 10%;
+    --ard-star-button-focus-overlay-opacity: 0;
+    --ard-star-button-focus-visible-overlay-opacity: 10%;
+    --ard-star-button-active-overlay-opacity: 20%;
+    --ard-star-button-disabled-opacity: 50%;
 
-  .ard-star-not-in-value {
-    opacity: 50%;
+    --ard-rating-input-not-in-value-opacity: 50%;
+    --ard-rating-input-disabled-opacity: 50%;
   }
-}
-.ard-star-button {
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  font-size: inherit;
-  width: max-content;
-  height: max-content;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline: none;
 
-  .ard-hitbox {
-    position: absolute;
-    left: -4px;
-    right: -4px;
-    bottom: -4px;
-    top: -4px;
-  }
+  .ard-star,
+  .ard-star-button,
+  .ard-rating-display,
+  .ard-rating-input {
+    @include coloringMixins.typeColors();
+    color: var(--ard-cmpcl--bg-colored);
 
-  .ard-focus-overlay {
-    @include defaultMixins.focus-overlay;
-    position: absolute;
-    left: -0.125em;
-    right: -0.125em;
-    bottom: -0.125em;
-    top: -0.125em;
-    border-radius: 999px;
-    background: currentColor;
+    &.ard-color-gold {
+      color: ARD.$gold;
+    }
   }
-  @include defaultMixins.focus-overlay-scale-addon();
-  &:hover,
-  &:focus {
-    .ard-focus-overlay {
-      opacity: 10%;
+  .ard-star {
+    font-size: inherit;
+    width: var(--ard-star-size, 1.5em);
+    height: var(--ard-star-size, 1.5em);
+    position: relative;
+  }
+  .ard-rating-display,
+  .ard-rating-input {
+    display: flex;
+    user-select: none;
+  }
+  .ard-rating-input {
+    cursor: pointer;
+
+    .ard-star-not-in-value {
+      opacity: var(--ard-rating-input-not-in-value-opacity, 50%);
     }
   }
-  &:active {
+  .ard-star-button {
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    font-size: inherit;
+    width: max-content;
+    height: max-content;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    outline: none;
+
+    .ard-hitbox {
+      position: absolute;
+      left: var(--ard-star-button-hitbox-offset, -4px);
+      right: var(--ard-star-button-hitbox-offset, -4px);
+      bottom: var(--ard-star-button-hitbox-offset, -4px);
+      top: var(--ard-star-button-hitbox-offset, -4px);
+    }
+
     .ard-focus-overlay {
-      opacity: 20%;
+      @include defaultMixins.focus-overlay;
+      position: absolute;
+      left: var(--ard-star-button-overlay-offset, -0.125em);
+      right: var(--ard-star-button-overlay-offset, -0.125em);
+      bottom: var(--ard-star-button-overlay-offset, -0.125em);
+      top: var(--ard-star-button-overlay-offset, -0.125em);
+      border-radius: 999px;
+      background: currentColor;
+    }
+    @include defaultMixins.focus-overlay-scale-addon();
+    &:hover {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-hover-overlay-opacity, 10%);
+      }
+    }
+    &:focus {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-focus-overlay-opacity, 0%);
+      }
+    }
+    &:focus-visible {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-focus-visible-overlay-opacity, 10%);
+      }
+    }
+    &:active {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-active-overlay-opacity, 20%);
+      }
     }
   }
-}
-//! disabled state for star-button
-.ard-disabled {
-  > .ard-star-button,
-  > .ard-rating-input {
-    pointer-events: none;
-    opacity: 50%;
+  //! disabled state for star-button
+  .ard-disabled {
+    > .ard-star-button {
+      pointer-events: none;
+      opacity: var(--ard-star-button-disabled-opacity, 50%);
+    }
+    > .ard-rating-input {
+      pointer-events: none;
+      opacity: var(--ard-rating-input-disabled-opacity, 50%);
+    }
   }
 }

package/themes/default/tabber.scss

@@ -1,87 +1,129 @@
 @use './coloring' as CM;
 @use './mixins' as M;
-@use '../variables' as ARD;
 
-ard-tabber {
-  max-width: 100%;
-}
-
-.ard-tabber {
-  @include CM.typeColors();
-  height: max-content;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  font-family: 'Roboto', sans-serif;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-tabber-tab-height: 2.5em;
+    --ard-tabber-tab-font-size: 0.875rem;
+    --ard-tabber-tab-font-weight: 500;
+    --ard-tabber-tab-border: none;
+    --ard-tabber-tab-background: none;
+    --ard-tabber-tab-padding: 0 1.5rem;
+    --ard-tabber-tab-gap: 0;
+    --ard-tabber-tab-content-gap: 0.375rem;
+    --ard-tabber-separator-border: 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%));
+    // --ard-tabber-tab-overlay-color: ;
+    --ard-tabber-tab-hover-overlay-opacity: 4%;
+    --ard-tabber-tab-active-overlay-opacity: 12%;
+    --ard-tabber-tab-focus-visible-overlay-opacity: 18%;
+    --ard-tabber-tab-disabled-overlay-opacity: 0%;
+    --ard-tabber-tab-disabled-opacity: 50%;
+  }
 
-  .ard-tabber-tabs {
+  ard-tabber {
     max-width: 100%;
+  }
+
+  .ard-tabber {
+    @include CM.typeColors();
+    height: max-content;
+    width: 100%;
     display: flex;
-    flex-wrap: wrap;
-    border-bottom: 1px solid ARD.$detail-ultralight;
+    flex-direction: column;
+    align-items: stretch;
+    font-family: var(--ard-font-family);
 
-    &.ard-tab-align-left {
-      justify-content: left;
-    }
-    &.ard-tab-align-middle {
-      justify-content: center;
-    }
-    &.ard-tab-align-right {
-      justify-content: right;
-    }
-    &.ard-stretch-tabs {
-      justify-content: stretch;
+    .ard-tabber-tabs {
+      max-width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ard-tabber-tab-gap, 0);
+      border-bottom: var(--ard-tabber-separator-border, 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%)));
 
-      .ard-tab-button {
-        flex-grow: 1;
+      &.ard-tab-align-left {
+        justify-content: left;
       }
-    }
-
-    .ard-tab-button {
-      height: 2.5em;
-      font-size: 0.875rem;
-      font-weight: 500;
-      position: relative;
-      border: none;
-      background: none;
-      padding: 0 1.5rem;
-      cursor: pointer;
-      outline: none;
-      font-family: inherit;
-
-      .ard-focus-overlay {
-        @include M.focus-overlay();
-        background: ARD.$bg-alt;
+      &.ard-tab-align-center {
+        justify-content: center;
+      }
+      &.ard-tab-align-right {
+        justify-content: right;
       }
+      &.ard-stretch-tabs {
+        justify-content: stretch;
 
-      &:hover,
-      &:focus {
-        .ard-focus-overlay {
-          opacity: 4%;
+        .ard-tab-button {
+          flex-grow: 1;
         }
       }
-      &.ard-active,
-      &:active {
+
+      .ard-tab-button {
+        height: var(--ard-tabber-tab-height, 2.5em);
+        font-size: var(--ard-tabber-tab-font-size, 0.875rem);
+        font-weight: var(--ard-tabber-tab-font-weight, 500);
+        position: relative;
+        border: var(--ard-tabber-tab-border, none);
+        background: var(--ard-tabber-tab-background, none);
+        padding: var(--ard-tabber-tab-padding, 0 1.5rem);
+        cursor: pointer;
+        outline: none;
+        font-family: inherit;
+
         .ard-focus-overlay {
-          opacity: 12%;
+          @include M.focus-overlay();
+          background: var(--ard-tabber-tab-overlay-color, var(--ard-bg-alt, black));
         }
-      }
-      &:focus-visible {
-        .ard-focus-overlay {
-          opacity: 18%;
+        .ard-button-content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          gap: var(--ard-tabber-tab-content-gap, 0.375rem);
         }
-      }
 
-      &.ard-tab-active {
-        &::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          height: 2px;
-          background: var(--ard-cmpcl--bg-colored);
+        &:hover,
+        &:focus {
+          .ard-focus-overlay {
+            opacity: var(--ard-tabber-tab-hover-overlay-opacity, 4%);
+          }
+        }
+        &.ard-active,
+        &:active {
+          .ard-focus-overlay {
+            opacity: var(--ard-tabber-tab-active-overlay-opacity, 12%);
+          }
+        }
+        &:focus-visible {
+          .ard-focus-overlay {
+            opacity: var(--ard-tabber-tab-focus-visible-overlay-opacity, 18%);
+          }
+        }
+
+        &.ard-tab-active {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 2px;
+            background: var(--ard-cmpcl--bg-colored);
+          }
+        }
+
+        &.ard-tab-disabled {
+          opacity: var(--ard-tabber-tab-disabled-opacity);
+          pointer-events: none;
+
+          .ard-focus-overlay {
+            opacity: var(--ard-tabber-tab-disabled-overlay-opacity, 18%);
+          }
+          &.ard-tab-with-pointer-events-when-disabled {
+            pointer-events: all;
+            cursor: not-allowed;
+          }
         }
       }
     }

package/themes/default/table-pagination.scss

@@ -1,56 +1,72 @@
-.ard-pagination {
-  height: 2.9375rem;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  padding: 0 0.5rem 0 1rem;
-  box-sizing: border-box;
-
-  .ard-pagination__items-per-page {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-table-pagination-height: 2.9375rem;
+    --ard-table-pagination-gap: 2rem;
+    --ard-table-pagination-padding: 0 0.5rem 0 1rem;
+    --ard-table-pagination-items-per-page-gap: 0.5rem;
+    --ard-table-pagination-current-page-gap: 1.25rem;
+    --ard-table-pagination-height-compact: 2.1875rem;
+    --ard-table-pagination-font-size-compact: 0.875rem;
+    --ard-table-pagination-select-padding-left: 0.875em;
+    --ard-table-pagination-disabled-text-opacity: 50%;
   }
-  .ard-pagination__current-page {
+
+  .ard-pagination {
+    height: var(--ard-table-pagination-height, 2.9375rem);
+    width: 100%;
     display: flex;
     align-items: center;
-    gap: 1.25rem;
-  }
+    gap: var(--ard-table-pagination-gap, 2rem);
+    padding: var(--ard-table-pagination-padding, 0 0.5rem 0 1rem);
+    box-sizing: border-box;
 
-  //! compact
-  &.ard-compact {
-    height: 2.1875rem;
-    font-size: 0.875rem;
-  }
+    .ard-pagination__items-per-page {
+      display: flex;
+      align-items: center;
+      gap: var(--ard-table-pagination-items-per-page-gap, 0.5rem);
+    }
+    .ard-pagination__current-page {
+      display: flex;
+      align-items: center;
+      gap: var(--ard-table-pagination-current-page-gap, 1.25rem);
+    }
 
-  //! aligns
-  &.ard-align-left {
-    justify-content: flex-start;
-  }
-  &.ard-align-center {
-    justify-content: center;
-  }
-  &.ard-align-right {
-    justify-content: flex-end;
-  }
-  &.ard-align-split {
-    justify-content: space-between;
-  }
+    //! compact
+    &.ard-compact {
+      height: var(--ard-table-pagination-height-compact, 2.1875rem);
+      font-size: var(--ard-table-pagination-font-size-compact, 0.875rem);
+    }
 
-  //! style overrides
-  .ard-select {
-    padding-left: 0.875em;
+    //! aligns
+    &.ard-align-left {
+      justify-content: flex-start;
+    }
+    &.ard-align-center {
+      justify-content: center;
+    }
+    &.ard-align-right {
+      justify-content: flex-end;
+    }
+    &.ard-align-split {
+      justify-content: space-between;
+    }
+
+    //! style overrides
+    .ard-select {
+      padding-left: var(--ard-table-pagination-select-padding-left, 0.875em);
+    }
   }
-}
 
-.ard-disabled {
-  .ard-pagination {
-    pointer-events: none;
-    user-select: none;
+  .ard-disabled {
+    .ard-pagination {
+      pointer-events: none;
+      user-select: none;
 
-    .ard-pagination__text {
-      opacity: 50%;
+      .ard-pagination__text {
+        opacity: var(--ard-table-pagination-disabled-text-opacity, 50%);
+      }
     }
   }
 }