@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

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

@@ -3,30 +3,61 @@
 @use './clear-button' as clearButton;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  // --ard-chip-font-size: ;
+  // --ard-chip-font-size-compact: ;
+  --ard-chip-margin: 0;
+  --ard-chip-height: 2rem;
+  --ard-chip-height-compact: 1.4375rem;
+  --ard-chip-padding: 0 0.75rem;
+  --ard-chip-padding-compact: 0 0.5625rem;
+  --ard-chip-padding-align-left: 0.125rem;
+  --ard-chip-padding-align-left-deletable: 0.25rem;
+  --ard-chip-padding-align-right: 0.125rem;
+  --ard-chip-padding-align-right-deletable: 0.25rem;
+  --ard-chip-selection-icon-padding: 0.5rem;
+  --ard-chip-selection-icon-margin: -0.125rem;
+  --ard-chip-selection-icon-padding-compact: 0.25rem;
+  --ard-chip-selection-icon-margin-compact: -0.25rem;
+  --ard-chip-content-wrapper-padding: 0.5rem;
+  --ard-chip-selectable-hover-overlay-opacity: 7.5%;
+  --ard-chip-selectable-active-overlay-opacity: 20%;
+  --ard-chip-outlined-hover-overlay-opacity: 4%;
+  --ard-chip-outlined-active-overlay-opacity: 10%;
+  --ard-chip-outlined-selected-overlay-opacity: 12%;
+  --ard-chip-outlined-selected-hover-overlay-opacity: 17%;
+  --ard-chip-outlined-selected-active-overlay-opacity: 22%;
+  --ard-chip-transition: 0.15s ease;
+  --ard-chip-disabled-opacity: 60%;
+  --ard-chip-disabled-selected-opacity: 40%;
+}
+
 //! general css
 .ard-chip-wrapper {
   @include coloringMixins.typeColors();
   @include clearButton.clearButton();
   @include defaultMixins.formVariants();
 
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--ard-font-family);
   color: ARD.$text2;
   background: ARD.$bg;
   border-radius: var(--ard-variant-border-radius);
   padding: 0;
-  margin: 6px;
-  vertical-align: middle;
+  margin: var(--ard-chip-margin, 0);
+  vertical-align: center;
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: var(--ard-chip-font-size, 0.875rem);
   position: relative;
   outline: none;
   user-select: none;
   overflow: hidden;
-  height: 32px;
+  height: var(--ard-chip-height, 2rem);
 
   > .ard-chip-content-wrapper {
-    padding: 0 12px;
+    padding: var(--ard-chip-padding, 0 0.75rem);
   }
   > .ard-focus-overlay {
     @include defaultMixins.focus-overlay;
@@ -42,12 +73,12 @@
     &:hover,
     &:focus {
       > .ard-focus-overlay {
-        opacity: 7.5%;
+        opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
       }
     }
     &:active {
       > .ard-focus-overlay {
-        opacity: 20%;
+        opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
       }
     }
 
@@ -68,10 +99,7 @@
     &.ard-chip-selectable {
       background-color: ARD.$bg-f;
       color: ARD.$text2;
-      transition:
-        color 0.15s ease,
-        border-color 0.15s ease,
-        background-color 0.15s ease;
+      transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease), background-color var(--ard-chip-transition, 0.15s ease);
 
       &.ard-chip-selected {
         color: var(--ard-cmpcl--on-bg-colored);
@@ -88,9 +116,7 @@
     font-weight: 600;
 
     &.ard-chip-selectable {
-      transition:
-        color 0.15s ease,
-        border-color 0.15s ease;
+      transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease);
 
       > .ard-focus-overlay {
         opacity: 0;
@@ -99,30 +125,31 @@
       &:hover,
       &:focus {
         > .ard-focus-overlay {
-          opacity: 4%;
+          opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
         }
       }
       &:active {
         > .ard-focus-overlay {
-          opacity: 10%;
+          opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
         }
       }
 
       &.ard-chip-selected {
         color: var(--ard-cmpcl--content);
+        border-color: var(--ard-cmpcl--content);
 
         > .ard-focus-overlay {
-          opacity: 7.5%;
+          opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
         }
         &:hover,
         &:focus {
           > .ard-focus-overlay {
-            opacity: 15%;
+            opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
           }
         }
         &:active {
           > .ard-focus-overlay {
-            opacity: 20%;
+            opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
           }
         }
       }
@@ -130,60 +157,64 @@
   }
   &.ard-appearance-outlined-strong {
     > .ard-focus-overlay {
-      opacity: 7.5%;
+      opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
       background: var(--ard-cmpcl--bg-colored);
     }
+    &.ard-chip-selectable {
+      color: var(--ard-text2);
+      border: 1px solid var(--ard-detail-light);
+    }
   }
 
   //! alignments
   &.ard-chip-align-left {
     flex-direction: row;
-    padding-left: 2px;
+    padding-left: var(--ard-chip-padding-align-left, 0.125rem);
 
     .ard-chip-selection-icon {
-      padding-left: 8px;
-      margin-right: -2px;
+      padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
+      margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
     }
     &.ard-chip-deletable {
-      padding-left: 4px;
+      padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
 
       .ard-chip-content-wrapper {
-        padding-left: 8px;
+        padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
       }
     }
   }
   &.ard-chip-align-right {
     flex-direction: row-reverse;
-    padding-right: 2px;
+    padding-right: var(--ard-chip-padding-align-right, 0.125rem);
 
     .ard-chip-selection-icon {
-      padding-right: 8px;
-      margin-left: -2px;
+      padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
+      margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
     }
     &.ard-chip-deletable {
-      padding-right: 4px;
+      padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
 
       .ard-chip-content-wrapper {
-        padding-right: 8px;
+        padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
       }
     }
   }
   //! compact
   &.ard-compact {
-    height: 23px;
-    font-size: 13px;
+    height: var(--ard-chip-height-compact, 1.4375rem);
+    font-size: var(--ard-chip-font-size-compact, 0.8125rem);
 
     > .ard-chip-content-wrapper {
-      padding: 0 9px;
+      padding: var(--ard-chip-padding-compact, 0 0.5625rem);
     }
 
     &.ard-chip-align-left .ard-chip-selection-icon {
-      padding-left: 4px;
-      margin-right: -4px;
+      padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
+      margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
     }
     &.ard-chip-align-right .ard-chip-selection-icon {
-      padding-right: 4px;
-      margin-left: -4px;
+      padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
+      margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
     }
   }
 }
@@ -191,10 +222,10 @@
 .ard-disabled {
   .ard-chip-wrapper {
     pointer-events: none;
-    opacity: 60%;
+    opacity: var(--ard-chip-disabled-opacity, 60%);
 
     &.ard-chip-selected {
-      opacity: 40%;
+      opacity: var(--ard-chip-disabled-selected-opacity, 40%);
     }
   }
 }

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: monospace;
-    font-size: 1.15em;
+    font-family: var(--ard-font-family-mono);
+    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/core.scss

@@ -30,16 +30,39 @@
   --ard-lighten-overlay-light: rgba(255, 255, 255, 5%);
   --ard-darken-overlay: rgba(0, 0, 0, 12.5%);
   --ard-darken-overlay-strong: rgba(0, 0, 0, 20%);
+  --ard-darken-overlay-medium-strong: rgba(0, 0, 0, 13%);
   --ard-darken-overlay-medium: rgba(0, 0, 0, 10%);
   --ard-darken-overlay-light: rgba(0, 0, 0, 5%);
   --ard-darken-overlay-ultralight: rgba(0, 0, 0, 3%);
 
+  --ard-font-family: 'Roboto', sans-serif;
+  --ard-font-family-mono: monospace;
+
   --ard-gold: #ffc107;
 
   --ard-clear-button-size: 0.9rem;
   --ard-dropdown-button-size: 0.4rem;
   --ard-form-field-height: 2.3125rem;
-  --ard-form-field-compact-height: 1.6875rem;
+  --ard-form-field-height-compact: 1.6875rem;
+  --ard-form-field-font-size: 1rem;
+  --ard-form-field-font-size-compact: 1rem;
+  --ard-form-field-padding-top: 0;
+  --ard-form-field-padding-right: 0.375rem;
+  --ard-form-field-padding-bottom: 0;
+  --ard-form-field-padding-left: 0.375rem;
+  --ard-form-field-padding-top-compact: 0;
+  --ard-form-field-padding-right-compact: 0.375rem;
+  --ard-form-field-padding-bottom-compact: 0;
+  --ard-form-field-padding-left-compact: 0.375rem;
+  --ard-form-field-transitions-duration: 150ms;
+  --ard-form-field-hover-overlay-opacity: 3%;
+  --ard-form-field-focus-overlay-opacity: 6%;
+  --ard-form-field-disabled-opacity: 50%;
+  --ard-form-field-disabled-transparent-overlay-opacity: 4.5%;
+
+  --ard-rounded-corner-radius: 0.375rem;
+
+  --ard-grid-spacing-unit: 0.25rem;
 
   --ard-primary-50: 234, 235, 243;
   --ard-primary-100: 159, 167, 228;

package/themes/default/dialog.scss

@@ -1,7 +1,14 @@
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-dialog-content-actions-gap: 1rem;
+  --ard-dialog-buttons-gap: 1rem;
+}
+
 .ard-dialog-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--ard-dialog-content-actions-gap, 1rem);
 }
 
 .ard-dialog-buttons {
@@ -11,6 +18,6 @@
 
 .ard-dialog-buttons-container {
   display: flex;
-  gap: 1rem;
+  gap: var(--ard-dialog-buttons-gap, 1rem);
   align-items: center;
 }

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);
     }
   }
 }