@ardium-ui/ui 5.0.0-alpha.69 → 5.0.0-alpha.70

package/public-api.d.ts

@@ -22,7 +22,6 @@ export * from './lib/slide-toggle';
 export * from './lib/slider';
 export * from './lib/star/rating-input';
 export * from './lib/star/star-button';
-export * from './lib/statebox';
 export * from './lib/calendar';
 export * from './lib/checkbox-list';
 export * from './lib/badge';

package/themes/default/badge.scss

@@ -1,5 +1,29 @@
 @use './coloring' as CM;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-badge-small-font-size: 0.55rem;
+  // --ard-badge-small-size: ;
+  --ard-badge-small-font-weight: 400;
+  --ard-badge-small-letter-spacing: 0.2px;
+  // --ard-badge-small-rounded-radius: ;
+
+  --ard-badge-medium-font-size: 0.667rem;
+  // --ard-badge-medium-size: ;
+  --ard-badge-medium-font-weight: 500;
+  --ard-badge-medium-letter-spacing: 0.2px;
+  // --ard-badge-medium-rounded-radius: ;
+
+  --ard-badge-large-font-size: 0.8125rem;
+  // --ard-badge-large-size: ;
+  --ard-badge-large-font-weight: 600;
+  --ard-badge-large-letter-spacing: 0.2px;
+  // --ard-badge-large-rounded-radius: ;
+
+  --ard-badge-overlap-offset: 0.3em;
+}
+
 .ard-badge-host {
   position: relative;
 }
@@ -19,7 +43,7 @@
     border-radius: 9999px;
   }
   &.ard-variant-rounded {
-    border-radius: calc(var(--ard-_badge-size) * 0.25);
+    border-radius: var(--ard-_badge-radius);
   }
   &.ard-variant-sharp {
     border-radius: 0;
@@ -31,32 +55,41 @@
   }
 
   //! sizes
-  font-size: var(--ard-_badge-size);
-  min-width: calc(var(--ard-_badge-size) * 1.375);
-  height: calc(var(--ard-_badge-size) * 1.375);
+  font-size: var(--ard-_badge-font-size);
+  min-width: var(--ard-_badge-size);
+  height: var(--ard-_badge-size);
 
   .ard-badge-content {
-    padding: 0 calc(var(--ard-_badge-size) * 0.5);
+    padding: 0 var(--ard-_badge-padding);
   }
 
   &.ard-badge-size-small {
-    --ard-_badge-size: 0.55rem;
-    font-weight: 400;
-    letter-spacing: 0.2px;
+    --ard-_badge-font-size: var(--ard-badge-small-font-size, 0.55rem);
+    --ard-_badge-size: var(--ard-badge-small-size, calc(var(--ard-badge-small-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-small-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-small-rounded-radius, calc(var(--ard-badge-small-font-size) * 0.25));
+    font-weight: var(--ard-badge-small-font-weight, 400);
+    letter-spacing: var(--ard-badge-small-letter-spacing, 0.2px);
   }
   &.ard-badge-size-medium {
-    --ard-_badge-size: 0.667rem;
-    font-weight: 500;
-    letter-spacing: 0.2px;
+    --ard-_badge-font-size: var(--ard-badge-medium-font-size, 0.667rem);
+    --ard-_badge-size: var(--ard-badge-medium-size, calc(var(--ard-badge-medium-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-medium-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-medium-rounded-radius, calc(var(--ard-badge-medium-font-size) * 0.25));
+    font-weight: var(--ard-badge-medium-font-weight, 500);
+    letter-spacing: var(--ard-badge-medium-letter-spacing, 0.2px);
   }
   &.ard-badge-size-large {
-    --ard-_badge-size: 0.8125rem;
-    font-weight: 600;
-    letter-spacing: 0.2px;
+    --ard-_badge-font-size: var(--ard-badge-large-font-size, 0.8125rem);
+    --ard-_badge-size: var(--ard-badge-large-size, calc(var(--ard-badge-large-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-large-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-large-rounded-radius, calc(var(--ard-badge-large-font-size) * 0.25));
+    font-weight: var(--ard-badge-large-font-weight, 600);
+    letter-spacing: var(--ard-badge-large-letter-spacing, 0.2px);
   }
 
   //! overlap
-  --ard-_badge-overlap-offset-x: 0.3em;
+  --ard-_badge-overlap-offset-x: var(--ard-badge-overlap-offset, 0.3em);
 
   &.ard-badge-overlap {
     --ard-_badge-overlap-offset-x: 50%;

package/themes/default/card.scss

@@ -1,9 +1,43 @@
 @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: ;
+
+  --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-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-action-buttons-padding: 0.5em;
+}
+
 ard-card,
 .ard-card {
   position: relative;
-  background: ARD.$bg;
+  background: var(--ard-card-bg, #{ARD.$bg});
   box-sizing: border-box;
   width: 100%;
   height: max-content;
@@ -11,7 +45,7 @@ ard-card,
 
   //! appearances
   &.ard-appearance-outlined {
-    border: 1px solid ARD.$border-light;
+    border: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
   }
   &.ard-appearance-raised {
     box-shadow: ARD.$card-shadow;
@@ -21,15 +55,18 @@ ard-card,
     border-radius: 0;
   }
   &.ard-variant-rounded {
-    border-radius: 8px;
+    border-radius: var(--ard-card-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
   }
 }
 //! header
 ard-card-header {
-  padding: 0.5em 1em 0 1em;
+  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: 1em;
+  margin-bottom: var(--ard-card-header-margin-bottom, 1em);
   max-width: 100%;
 
   .ard-card-header-title-container {
@@ -39,37 +76,41 @@ ard-card-header {
   }
 
   &:first-child {
-    padding-top: 1em;
+    padding-top: var(--ard-card-content-padding-top, 0.5em);
   }
 }
 .ard-card-title,
 .ard-card-subtitle {
-  line-height: normal;
   display: block;
   margin: 0;
-  font-weight: 500;
 }
 .ard-card-title {
-  font-size: 1.375em;
-  letter-spacing: 0.0125em;
-  color: ARD.$text;
+  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 {
-  font-size: 1em;
-  letter-spacing: 0.0078125em;
-  color: ARD.$text3;
-  margin-top: 0.125rem;
+  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: 3em;
-  height: 3em;
+  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 {
-    padding: 0 1em;
+    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
@@ -93,20 +134,23 @@ ard-card-header {
 ard-card,
 .ard-card {
   .ard-appearance-outlined .ard-image {
-    border-bottom: 1px solid ARD.$border-light;
+    border-bottom: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
   }
 }
 //! content
 .ard-card-content {
-  padding: 0 1em;
+  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%;
 
   &:first-child {
-    padding-top: 1em;
+    padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
   }
   &:last-child {
-    padding-bottom: 1em;
+    padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
   }
 
   > :last-child {
@@ -115,7 +159,7 @@ ard-card,
 }
 //! action buttons
 .ard-card-action-buttons {
-  padding: 0.5em;
+  padding: var(--ard-card-action-buttons-padding, 0.5em);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -124,7 +168,7 @@ ard-card,
   &.ard-align-left {
     justify-content: flex-start;
   }
-  &.ard-align-middle {
+  &.ard-align-center {
     justify-content: center;
   }
   &.ard-align-right {

package/themes/default/checkbox.scss

@@ -2,14 +2,28 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-checkbox-size: 1.25em;
+  --ard-checkbox-icon-size: 1em;
+  --ard-checkbox-icon-size: 1.8em;
+  --ard-checkbox-hitbox-offset: -4px;
+  --ard-checkbox-overlay-offset: 0.4em;
+  --ard-checkbox-unselected-disabled-opacity: 40%;
+  --ard-checkbox-indeterminate-disabled-opacity: 50%;
+  --ard-checkbox-selected-disabled-opacity: 50%;
+  // --ard-checkbox-base-color: ;
+}
+
 .ard-checkbox {
   @include coloringMixins.typeColors();
   @include coloringMixins.typeColors('unsel-cmpcl');
   position: relative;
   cursor: pointer;
   user-select: none;
-  width: 1.25em;
-  height: 1.25em;
+  width: var(--ard-checkbox-size, 1.25em);
+  height: var(--ard-checkbox-size, 1.25em);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -17,76 +31,31 @@
   background: none;
   padding: 0;
   outline: none;
-  color: ARD.$text2;
+  color: var(--ard-checkbox-base-color, #{ARD.$text2});
+  font-size: var(--ard-checkbox-icon-size, 1em); // ard-icon component will inherit this font-size to determine its size
 
-  &.ard-color-currentColor {
+  &.ard-color-currentColor.ard-state-selected {
     color: currentColor;
   }
 
   .ard-hitbox {
     position: absolute;
-    left: -4px;
-    right: -4px;
-    bottom: -4px;
-    top: -4px;
+    left: var(--ard-checkbox-hitbox-offset, -4px);
+    right: var(--ard-checkbox-hitbox-offset, -4px);
+    bottom: var(--ard-checkbox-hitbox-offset, -4px);
+    top: var(--ard-checkbox-hitbox-offset, -4px);
   }
   .ard-focus-overlay {
-    @include defaultMixins.focus-overlay(0.4em);
-    border-radius: 999px;
+    @include defaultMixins.focus-overlay(var(--ard-checkbox-overlay-offset, 0.4em));
+    border-radius: 9999px;
     background: currentColor;
   }
-  .ard-checkbox-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    height: 1.8em; //the height of the icon
-    display: none;
-    opacity: 80%;
-    transition: opacity 0.2s ARD.$timing-fn;
-
-    &::after {
-      @include defaultMixins.icon(0, 600);
-    }
-  }
-  .ard-icon-for-selected::after {
-    @include defaultMixins.icon(1, 500);
-    content: 'check_box';
-  }
-  .ard-icon-for-indeterminate::after {
-    content: 'indeterminate_check_box';
-  }
-  .ard-icon-for-unselected::after {
-    content: 'check_box_outline_blank';
-  }
 
   &.ard-checkbox-selected {
     color: var(--ard-unsel-cmpcl--bg-colored);
-
-    .ard-checkbox-icon {
-      opacity: 90%;
-    }
-  }
-  &.ard-checkbox-selected {
-    .ard-icon-for-selected {
-      display: block;
-    }
-  }
-  &.ard-checkbox-indeterminate {
-    .ard-icon-for-indeterminate {
-      display: block;
-    }
-  }
-  &.ard-checkbox-unselected {
-    .ard-icon-for-unselected {
-      display: block;
-    }
   }
   &:hover,
   &:focus {
-    .ard-checkbox-icon {
-      opacity: 100%;
-    }
     .ard-focus-overlay {
       opacity: 10%;
     }
@@ -100,10 +69,12 @@
 //! disabled state
 .ard-disabled .ard-checkbox {
   pointer-events: none;
-  opacity: 40%;
+  opacity: var(--ard-checkbox-unselected-disabled-opacity, 40%);
 
-  &.ard-checkbox-selected,
+  &.ard-checkbox-selected {
+    opacity: var(--ard-checkbox-selected-disabled-opacity, 50%);
+  }
   &.ard-checkbox-indeterminate {
-    opacity: 50%;
+    opacity: var(--ard-checkbox-indeterminate-disabled-opacity, 50%);
   }
 }

package/themes/default/chips.scss

@@ -46,7 +46,7 @@
   border-radius: var(--ard-variant-border-radius);
   padding: 0;
   margin: var(--ard-chip-margin, 0);
-  vertical-align: middle;
+  vertical-align: center;
   display: flex;
   align-items: center;
   font-size: var(--ard-chip-font-size, 0.875rem);

package/themes/default/color-display.scss

@@ -1,26 +1,36 @@
 @use 'sass:math';
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-color-display-gap: 0.3ch;
+  --ard-color-display-size: 1em * math.div(19, 16);
+  --ard-color-display-font-size: 1.15em;
+  --ard-color-display-rounded-corner-radius: 0.25em;
+  // --ard-color-display-border-color: ;
+}
+
 .ard-color-display-wrapper {
-  gap: 0.3ch;
+  gap: var(--ard-color-display-gap, 0.3ch);
   align-items: center;
 
   .ard-color-display {
-    width: 1em * math.div(19, 16);
-    height: 1em * math.div(19, 16);
+    width: var(--ard-color-dsiplay-size, #{1em * math.div(19, 16)});
+    height: var(--ard-color-dsiplay-size, #{1em * math.div(19, 16)});
     font-size: inherit;
     cursor: help;
-    border: math.div(1em, 16) solid transparent;
+    border: 1px solid transparent;
   }
 
   .ard-color-display-label {
     font-family: var(--ard-font-family-mono);
-    font-size: 1.15em;
+    font-size: var(--ard-color-display-font-size, 1.15em);
   }
 
   &.ard-appearance-rounded {
     .ard-color-display {
-      border-radius: 0.25em;
+      border-radius: var(--ard-color-display-rounded-corner-radius, 0.25em);
     }
   }
   &.ard-appearance-circle {
@@ -35,7 +45,7 @@
   }
   &.ard-with-border {
     .ard-color-display {
-      border-color: ARD.$text;
+      border-color: var(--ard-color-display-border-color, #{ARD.$text});
     }
   }
 }

package/themes/default/divider.scss

@@ -1,13 +1,113 @@
 @use '../variables' as ARD;
 
-ard-divider {
-  margin: 0;
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-divider-margin-size: 0.5rem;
+  --ard-divider-color: red;
+  --ard-divider-width: 1px;
+  --ard-divider-middle-inset: 1rem;
+  --ard-divider-content-padding: 0.5rem;
+  --ard-divider-content-font-size: 0.875rem;
+  --ard-divider-align-inset: 10%;
+  --ard-divider-align-min-inset: 1rem;
+  --ard-divider-align-max-inset: unset;
+  --ard-divider-style: solid;
+}
+
+.ard-divider {
+  border: none;
+  position: relative;
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: var(--ard-divider-content-font-size, 0.875rem);
+
+  &::before,
+  &::after {
+    content: '';
+    flex-grow: 1;
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+  &.ard-divider__horizontal {
+    width: 100%;
+    min-height: var(--ard-divider-width, 1px);
+    margin: var(--ard-divider-margin-size, 0.5rem) 0;
+
+    &::before,
+    &::after {
+      height: var(--ard-divider-width, 1px);
+      border-top: var(--ard-divider-width, 1px) var(--ard-divider-style, solid)
+        var(--ard-divider-color, #{ARD.$detail-ultralight});
+    }
+    &.ard-divider__flex-item {
+      align-self: stretch;
+      width: auto;
+    }
+  }
+  &.ard-divider__vertical {
+    height: 100%;
+    min-width: var(--ard-divider-width, 1px);
+    margin: 0 var(--ard-divider-margin-size, 0.5rem);
+    flex-direction: column;
 
-  &:not(.ard-divider-vertical) {
-    border-top: 1px solid ARD.$detail-ultralight;
+    &::before,
+    &::after {
+      width: var(--ard-divider-width, 1px);
+      border-left: var(--ard-divider-width, 1px) var(--ard-divider-style, solid)
+        var(--ard-divider-color, #{ARD.$detail-ultralight});
+    }
+    &.ard-divider__flex-item {
+      align-self: stretch;
+      height: auto;
+    }
   }
 
-  &.ard-divider-vertical {
-    border-left: 1px solid ARD.$detail-ultralight;
+  //! content styling
+  &:not(:empty) {
+    &.ard-divider__horizontal {
+      &::before {
+        margin-right: var(--ard-divider-content-padding, 0.5rem);
+      }
+      &::after {
+        margin-left: var(--ard-divider-content-padding, 0.5rem);
+      }
+    }
+    &.ard-divider__vertical {
+      &::before {
+        margin-bottom: var(--ard-divider-content-padding, 0.5rem);
+      }
+      &::after {
+        margin-top: var(--ard-divider-content-padding, 0.5rem);
+      }
+    }
+  }
+
+  //! variants
+  &.ard-divider__full {
+    padding: 0;
+  }
+  &.ard-divider__middle {
+    padding: 0 var(--ard-divider-middle-inset, 1rem);
+  }
+
+  //! text aligns
+  &.ard-divider__text-align-start {
+    &::before {
+      width: var(--ard-divider-align-inset, 10%);
+      min-width: var(--ard-divider-align-min-inset, 1rem);
+      max-width: var(--ard-divider-align-max-inset, unset);
+      flex-grow: 0;
+    }
+  }
+  &.ard-divider__text-align-end {
+    &::after {
+      width: var(--ard-divider-align-inset, 10%);
+      min-width: var(--ard-divider-align-min-inset, 1rem);
+      max-width: var(--ard-divider-align-max-inset, unset);
+      flex-grow: 0;
+    }
   }
 }

package/themes/default/dropdown-panel.scss

@@ -1,20 +1,33 @@
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  // --ard-dropdown-panel-bg: ;
+  --ard-dropdown-panel-margin: 0.375rem 0;
+  --ard-dropdown-panel-margin-compact: 0.25rem 0;
+  --ard-dropdown-panel-z-index: 5;
+  --ard-dropdown-panel-rounded-corner-radius: 0.5rem;
+  --ard-dropdown-panel-rounded-corner-radius-compact: 0.375rem;
+  // --ard-dropdown-panel-border-color: ;
+  // --ard-dropdown-panel-shadow: ;
+}
+
 ard-dropdown-panel {
   width: 100%;
 }
 .ard-dropdown-panel-container {
   position: relative;
-  background: ARD.$bg;
-  margin: 0.375rem 0;
-  z-index: 5;
+  background: var(--ard-dropdown-panel-bg, #{ARD.$bg});
+  margin: var(--ard-dropdown-panel-margin, 0.375rem 0);
+  z-index: var(--ard-dropdown-panel-z-index, 5);
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
 
   //! variants
   &.ard-variant-rounded {
-    border-radius: 0.5rem;
+    border-radius: var(--ard-dropdown-panel-rounded-corner-radius, 0.5rem);
   }
   &.ard-variant-sharp {
     border-radius: 0;
@@ -22,10 +35,10 @@ ard-dropdown-panel {
 
   //! appearances
   &.ard-appearance-outlined {
-    border: 1px solid ARD.$border;
+    border: 1px solid var(--ard-dropdown-panel-border-color, #{ARD.$border});
   }
   &.ard-appearance-raised {
-    box-shadow: ARD.$box-shadow;
+    box-shadow: var(--ard-dropdown-panel-shadow, #{ARD.$box-shadow});
   }
 
   //! connected
@@ -36,10 +49,10 @@ ard-dropdown-panel {
 
   //! compact
   &.ard-compact {
-    margin: 0.25rem 0;
+    margin: var(--ard-dropdown-panel-margin-compact, 0.25rem 0);
 
     &.ard-variant-rounded {
-      border-radius: 0.4rem;
+      border-radius: var(--ard-dropdown-panel-rounded-corner-radius-compact, 0.375rem);
     }
   }
 }