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

package/themes/default/file-drop-area.scss

@@ -1,5 +1,51 @@
 @use './coloring' as CM;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-file-drop-area-min-width: 15rem;
+  --ard-file-drop-area-min-height: 10rem;
+  --ard-file-drop-area-padding: 0.625rem;
+  --ard-file-drop-area-outline-border-width: 2px;
+  --ard-file-drop-area-outline-border-style: dashed;
+  --ard-file-drop-area-outline-padding: 0.375rem;
+  --ard-file-drop-area-content-gap-min: 0.2rem;
+  --ard-file-drop-area-content-gap-preferred: 10%;
+  --ard-file-drop-area-content-gap-max: 1rem;
+  --ard-file-drop-area-icon-font-size: 220%;
+  --ard-file-drop-area-drop-text-font-weight: 500;
+  --ard-file-drop-area-drop-text-font-size: 105%;
+  --ard-file-drop-area-or-text-font-weight: 400;
+  --ard-file-drop-area-or-text-font-size: 95%;
+  --ard-file-drop-area-dragover-text-font-weight: 500;
+  --ard-file-drop-area-dragover-text-font-size: 105%;
+  --ard-file-drop-area-dragover-amount-font-weight: 600;
+  --ard-file-drop-area-dragover-amount-font-size: 120%;
+  --ard-file-drop-area-uploaded-container-gap: 0.75rem;
+  --ard-file-drop-area-uploaded-message-font-weight: 500;
+  --ard-file-drop-area-uploaded-message-font-size: 105%;
+  --ard-file-drop-area-uploaded-amount-font-weight: 600;
+  --ard-file-drop-area-uploaded-amount-font-size: 100%;
+  --ard-file-drop-area-uploaded-files-gap: 0.45rem;
+  --ard-file-drop-area-file-gap: 0.75rem;
+  --ard-file-drop-area-file-icon-font-size: 220%;
+  --ard-file-drop-area-file-info-gap: 0.5ch;
+  --ard-file-drop-area-filename-gap: 0;
+  --ard-file-drop-area-filename-name-line-height: 1;
+  --ard-file-drop-area-filename-name-height: 1em;
+  --ard-file-drop-area-filesize-font-weight: 500;
+  --ard-file-drop-area-filesize-font-size: 83%;
+  --ard-file-drop-area-filesize-opacity: 60%;
+  --ard-file-drop-area-variant-rounded-corner-radius: 0.875rem;
+  --ard-file-drop-area-outline-corner-radius: 0.25rem;
+  --ard-file-drop-area-font-size-compact: 85%;
+  --ard-file-drop-area-min-width-compact: 12rem;
+  --ard-file-drop-area-min-height-compact: 8rem;
+  --ard-file-drop-area-content-gap-min-compact: 0.1667rem;
+  --ard-file-drop-area-content-gap-preferred-compact: 10%;
+  --ard-file-drop-area-content-gap-max-compact: 0.75rem;
+}
+
 ard-file-drop-area {
   display: block;
   width: 100%;
@@ -14,9 +60,9 @@ ard-file-drop-area {
   max-width: 100%;
   height: 100%;
   max-height: 100%;
-  min-width: 15rem;
-  min-height: 10rem;
-  padding: 0.625rem;
+  min-width: var(--ard-file-drop-area-min-width, 15rem);
+  min-height: var(--ard-file-drop-area-min-height, 10rem);
+  padding: var(--ard-file-drop-area-padding, 0.625rem);
   box-sizing: border-box;
   background: var(--ard-cmpcl--bg-colored-verylight);
   display: flex;
@@ -25,8 +71,9 @@ ard-file-drop-area {
     width: 100%;
     min-height: 100%;
     box-sizing: border-box;
-    border: 2px dashed var(--ard-cmpcl--border);
-    padding: 0.375rem;
+    border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed)
+      var(--ard-cmpcl--border);
+    padding: var(--ard-file-drop-area-outline-padding, 0.375rem);
     pointer-events: none;
 
     * {
@@ -40,22 +87,27 @@ ard-file-drop-area {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: clamp(0.2rem, 10%, 1rem);
-    padding: 0.2rem 0;
+    gap: clamp(
+      var(--ard-file-drop-area-content-gap-min, 0.2rem),
+      var(--ard-file-drop-area-content-gap-preferred, 10%),
+      var(--ard-file-drop-area-content-gap-max, 1rem)
+    );
+    padding: var(--ard-file-drop-area-content-padding, 0.2rem 0);
     box-sizing: border-box;
   }
 
   //! state-specific styling
   //idle
   .ard-file-drop-area-icon {
-    font-size: 220%;
+    font-size: var(--ard-file-drop-area-icon-font-size, 220%);
   }
   .ard-file-drop-area-drop-text {
-    font-weight: 500;
-    font-size: 105%;
+    font-weight: var(--ard-file-drop-area-drop-text-font-weight, 500);
+    font-size: var(--ard-file-drop-area-drop-text-font-size, 105%);
   }
   .ard-file-drop-area-or-text {
-    font-size: 95%;
+    font-weight: var(--ard-file-drop-area-or-text-font-weight, 400);
+    font-size: var(--ard-file-drop-area-or-text-font-size, 95%);
   }
   .ard-file-drop-area-browse-button > button {
     border: 1px solid var(--ard-cmpcl--border);
@@ -63,12 +115,12 @@ ard-file-drop-area {
   }
   //dragover
   .ard-file-drop-area-dragover-text {
-    font-weight: 500;
-    font-size: 105%;
+    font-weight: var(--ard-file-drop-area-dragover-text-font-weight, 500);
+    font-size: var(--ard-file-drop-area-dragover-text-font-size, 105%);
   }
   .ard-file-drop-area-dragover-amount {
-    font-weight: 600;
-    font-size: 120%;
+    font-weight: var(--ard-file-drop-area-dragover-amount-font-weight, 600);
+    font-size: var(--ard-file-drop-area-dragover-amount-font-size, 120%);
   }
   //uploaded
   .ard-file-drop-area-uploaded-container {
@@ -78,15 +130,16 @@ ard-file-drop-area {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: max-content 1fr;
-    gap: 0.75rem;
+    gap: var(--ard-file-drop-area-uploaded-container-gap, 0.75rem);
     justify-items: center;
   }
   .ard-file-drop-area-uploaded-message {
-    font-weight: 500;
-    font-size: 105%;
+    font-weight: var(--ard-file-drop-area-uploaded-message-font-weight, 500);
+    font-size: var(--ard-file-drop-area-uploaded-message-font-size, 105%);
   }
   .ard-file-drop-area-uploaded-amount {
-    font-weight: 600;
+    font-weight: var(--ard-file-drop-area-uploaded-amount-font-weight, 600);
+    font-size: var(--ard-file-drop-area-uploaded-amount-font-size, 100%);
   }
   .ard-file-drop-area-uploaded-files {
     max-width: 100%;
@@ -94,7 +147,7 @@ ard-file-drop-area {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.45rem;
+    gap: var(--ard-file-drop-area-uploaded-files-gap, 0.45rem);
     overflow: hidden auto;
     box-sizing: border-box;
 
@@ -103,36 +156,36 @@ ard-file-drop-area {
       display: grid;
       align-items: center;
       grid-template-columns: max-content 1fr;
-      gap: 0.75rem;
+      gap: var(--ard-file-drop-area-file-gap, 0.75rem);
       max-height: min-content;
 
       ard-icon {
-        font-size: 220%;
+        font-size: var(--ard-file-drop-area-file-icon-font-size, 220%);
       }
       .ard-file-drop-area-file-info {
         display: flex;
         flex-direction: column;
         line-height: 1;
-        gap: 0.5ch;
+        gap: var(--ard-file-drop-area-file-info-gap, 0.5ch);
       }
       .ard-file-drop-area-filename {
         max-width: 100%;
         display: grid;
         grid-template-columns: 1fr max-content;
-        gap: 0;
+        gap: var(--ard-file-drop-area-filename-gap, 0);
       }
       .ard-file-drop-area-filename-name {
         max-width: 100%;
-        line-height: 1;
+        line-height: var(--ard-file-drop-area-filename-name-line-height, 1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        height: 1em;
+        height: var(--ard-file-drop-area-filename-name-height, 1em);
       }
       .ard-file-drop-area-filesize {
-        font-weight: 500;
-        font-size: 83%;
-        opacity: 60%;
+        font-weight: var(--ard-file-drop-area-filesize-font-weight, 500);
+        font-size: var(--ard-file-drop-area-filesize-font-size, 83%);
+        opacity: var(--ard-file-drop-area-filesize-opacity, 60%);
       }
     }
   }
@@ -140,10 +193,10 @@ ard-file-drop-area {
   //! variant
   &.ard-variant-rounded,
   &.ard-variant-pill {
-    border-radius: 0.875rem;
+    border-radius: var(--ard-file-drop-area-variant-rounded-corner-radius, 0.875rem);
 
     .ard-file-drop-area-outline {
-      border-radius: 0.25rem;
+      border-radius: var(--ard-file-drop-area-outline-corner-radius, 0.25rem);
     }
   }
   &.ard-variant-sharp {
@@ -151,12 +204,16 @@ ard-file-drop-area {
   }
   //! compact
   &.ard-compact {
-    font-size: 85%;
-    min-width: 12rem;
-    min-height: 8rem;
+    font-size: var(--ard-file-drop-area-font-size-compact, 85%);
+    min-width: var(--ard-file-drop-area-min-width-compact, 12rem);
+    min-height: var(--ard-file-drop-area-min-height-compact, 8rem);
 
     .ard-file-drop-area-content {
-      gap: clamp(0.1667rem, 10%, 0.75rem);
+      gap: clamp(
+        var(--ard-file-drop-area-content-gap-min-compact, 0.1667rem),
+        var(--ard-file-drop-area-content-gap-preferred-compact, 10%),
+        var(--ard-file-drop-area-content-gap-max-compact, 0.75rem)
+      );
     }
   }
 }

package/themes/default/form-field-frame.scss

@@ -10,9 +10,7 @@
   align-items: center;
   justify-content: stretch;
   position: relative;
-  font-size: 1rem;
-  line-height: 1.25em;
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--ard-font-family);
 
   .ard-form-field-content-container {
     flex-grow: 1;
@@ -30,17 +28,15 @@
     align-items: center;
   }
   .ard-form-field-prefix-container {
-    padding-left: 0.375em;
+    padding-left: var(--ard-form-field-padding-left, 0.375rem);
   }
   .ard-form-field-suffix-container {
-    padding-right: 0.375em;
+    padding-right: var(--ard-form-field-padding-right, 0.375rem);
   }
 
   //! compact
   &.ard-compact {
     min-height: ARD.$form-field-compact-height;
-    font-size: 0.85rem;
-    line-height: 1;
   }
 
   //! appearance & variant
@@ -48,34 +44,46 @@
   @include defaultMixins.formVariants();
   background: var(--ard-appearance-background);
   border: var(--ard-appearance-border);
-  transition: border-color 0.15s ARD.$timing-fn;
 
   .ard-form-field-overlay {
     background: ARD.$overlay;
     opacity: 0;
-    transition:
-      opacity 0.15s ARD.$timing-fn,
-      background-color 0.15s ARD.$timing-fn;
   }
 
   &:hover {
     .ard-form-field-overlay {
-      opacity: 3%;
+      opacity: var(--ard-form-field-hover-overlay-opacity, 3%);
     }
   }
   &.ard-focused {
     .ard-form-field-overlay {
-      opacity: 6%;
+      opacity: var(--ard-form-field-focus-overlay-opacity, 6%);
+    }
+  }
+  &.ard-enable-transitions {
+    transition: border-color var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn;
+
+    .ard-form-field-overlay {
+      transition:
+        opacity var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn,
+        background-color var(--ard-form-field-transitions-duration, 150ms) ARD.$timing-fn;
     }
   }
 }
 .ard-disabled .ard-form-field-frame {
   pointer-events: none;
-  opacity: 50%;
+  opacity: var(--ard-form-field-disabled-opacity, 50%);
 
   &.ard-appearance-transparent {
     .ard-form-field-overlay {
-      opacity: 4.5%;
+      opacity: var(--ard-form-field-disabled-transparent-overlay-opacity, 4.5%);
+    }
+  }
+}
+.ard-readonly .ard-form-field-frame {
+  &:hover {
+    .ard-form-field-overlay {
+      opacity: 0;
     }
   }
 }

package/themes/default/form-field.scss

@@ -1,5 +1,32 @@
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
+  --ard-form-field-label-font-size: 0.9375rem;
+  --ard-form-field-label-font-weight: 500;
+  --ard-form-field-label-required-font-weight: 500;
+  --ard-form-field-label-required-font-size: 112.5%;
+  --ard-form-field-label-required-color: orangered;
+  --ard-form-field-label-optional-font-weight: 400;
+  --ard-form-field-label-optional-font-size: 0.8125rem;
+  // --ard-form-field-label-optional-color: ;
+  --ard-form-field-label-optional-font-style: italic;
+  // --ard-form-field-error-color: ;
+  // --ard-form-field-success-color: ;
+  --ard-form-field-hint-padding: 0.125rem 0 0.25rem 0.125rem;
+  --ard-form-field-hint-font-size: 0.8125rem;
+  --ard-form-field-hint-line-height: 1.2;
+  --ard-form-field-hint-right-padding-left: 0.5rem;
+  --ard-form-field-hint-error-line-height: 1.2;
+  --ard-form-field-hint-error-gap: 0.375em;
+  --ard-form-field-label-disabled-opacity: 40%;
+  --ard-form-field-hint-disabled-opacity: 50%;
+  --ard-form-field-error-animation-duration: 0.25s;
+  --ard-horizontal-form-field-gap: 0.5rem;
+}
+
 ard-form-field,
 ard-horizontal-form-field {
   display: block;
@@ -12,80 +39,84 @@ ard-horizontal-form-field {
   flex-direction: column;
 
   .ard-label {
-    padding: 0.25rem 0 0.125rem 0.125rem;
-    font-size: 0.9375rem;
-    font-weight: 500;
+    padding: var(--ard-form-field-label-padding, 0.25rem 0 0.125rem 0.125rem);
+    font-size: var(--ard-form-field-label-font-size, 0.9375rem);
+    font-weight: var(--ard-form-field-label-font-weight, 500);
 
     .ard-label__required {
       .ard-label__required-optional-text {
-        font-weight: 500;
-        color: orangered;
-        font-size: 112.5%;
+        font-weight: var(--ard-form-field-label-required-font-weight, 500);
+        font-size: var(--ard-form-field-label-required-font-size, 112.5%);
+        color: var(--ard-form-field-label-required-color, orangered);
         line-height: 1;
       }
     }
     .ard-label__optional {
       .ard-label__required-optional-text {
-        font-weight: 400;
-        font-size: 0.8125rem;
-        font-style: italic;
+        font-weight: var(--ard-form-field-label-optional-font-weight, 400);
+        font-size: var(--ard-form-field-label-optional-font-size, 0.8125rem);
+        color: var(--ard-form-field-label-optional-color, #{ARD.$text2});
+        font-style: var(--ard-form-field-label-optional-font-style, italic);
       }
     }
   }
   .ard-form-field__hints {
-    padding: 0.125rem 0 0.25rem 0.125rem;
-    font-size: 0.8125rem;
-    line-height: 1.1;
+    padding: var(--ard-form-field-hint-padding, 0.125rem 0 0.25rem 0.125rem);
+    font-size: var(--ard-form-field-hint-font-size, 0.8125rem);
+    line-height: var(--ard-form-field-hint-line-height, 1.1);
 
     &.ard-form-field__reserve-hint-line {
       box-sizing: content-box;
-      min-height: 1.1em;
+      min-height: calc(var(--ard-form-field-hint-line-height, 1.1) * 1em);
     }
   }
   .ard-form-field__hints-right,
   .ard-form-field__errors-right {
     > * {
-      padding-left: 0.5rem;
+      padding-left: var(--ard-form-field-hint-right-padding-left, 0.5rem);
     }
   }
   .ard-hint,
   .ard-error {
     font-size: 1em;
-    line-height: 1.1;
+    line-height: var(--ard-form-field-hint-error-line-height, 1.2);
     display: inline-grid;
-    min-height: 1.1em;
+    min-height: calc(var(--ard-form-field-hint-error-line-height, 1.2) * 1em);
   }
   .ard-hint {
-    color: ARD.$text2;
+    color: var(--ard-form-field-hint-color, #{ARD.$text2});
   }
   .ard-error:not(.ard-hint-error),
   .ard-form-field__errors .ard-hint-error {
-    color: ARD.$danger700;
+    color: var(--ard-form-field-error-color, #{ARD.$danger700});
     overflow: hidden;
   }
   .ard-error:not(.ard-hint-error) {
-    animation: errorAppear 0.25s ARD.$timing-fn forwards;
+    animation: errorAppear var(--ard-form-field-error-animation-duration, 0.25s) ARD.$timing-fn forwards;
   }
-  .ard-form-field__default-hint, .ard-form-field__default-error {
-    gap: 0.375em;
+  .ard-form-field__default-hint,
+  .ard-form-field__default-error {
+    gap: var(--ard-form-field-hint-error-gap, 0.375em);
   }
 
   &.ard-form-field__with-error {
-    .ard-label {
-      color: ARD.$danger700;
+    .ard-label,
+    ard-label {
+      color: var(--ard-form-field-error-color, #{ARD.$danger700});
     }
   }
   &.ard-form-field__is-success {
-    .ard-label {
-      color: ARD.$success700;
+    .ard-label,
+    ard-label {
+      color: var(--ard-form-field-success-color, #{ARD.$success700});
     }
   }
   &.ard-form-field__control-disabled {
     .ard-label {
-      opacity: 40%;
+      opacity: var(--ard-form-field-label-disabled-opacity, 40%);
     }
     .ard-form-field__hints {
-      opacity: 50%;
+      opacity: var(--ard-form-field-hint-disabled-opacity, 50%);
     }
   }
 }
@@ -93,10 +124,11 @@ ard-horizontal-form-field {
   align-items: flex-start;
   justify-content: stretch;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: var(--ard-horizontal-form-field-gap, 0.5rem);
 
   .ard-form-field__label-container {
     width: var(--ard-horizontal-form-field-label-width, 12rem);
+    min-width: var(--ard-horizontal-form-field-label-width, 12rem);
     height: ARD.$form-field-height;
     display: flex;
     align-items: center;
@@ -113,6 +145,10 @@ ard-horizontal-form-field {
   }
 }
 
+ard-label {
+  display: flex;
+}
+
 @keyframes errorAppear {
   from {
     grid-template-rows: 0fr;

package/themes/default/inputs/_shared.scss

@@ -3,32 +3,69 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@mixin genericInput() {
+@mixin genericInput(
+  $height,
+  $height-compact,
+  $gap,
+  $font-size,
+  $font-size-compact,
+  $line-height,
+  $line-height-compact,
+  $font-weight,
+  $padding-top,
+  $padding-right,
+  $padding-bottom,
+  $padding-left,
+  $padding-top-compact,
+  $padding-right-compact,
+  $padding-bottom-compact,
+  $padding-left-compact,
+  $color,
+  $placeholder-color,
+  $placeholder-opacity
+) {
+  height: $height;
   position: relative;
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--ard-font-family);
   display: flex;
   align-items: center;
   justify-content: stretch;
-  gap: 0.625em;
+  gap: $gap;
   cursor: text;
   box-sizing: border-box;
-  font-size: 1rem;
-  line-height: 1.25em;
+  font-size: $font-size;
+  line-height: $line-height;
+  font-weight: $font-weight;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
+  color: $color;
 
   .ard-input-container {
     flex-grow: 1;
     text-size-adjust: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
+    position: relative;
 
+    > * {
+      position: absolute;
+      inset: 0;
+      max-width: 100%;
+      padding: 0;
+    }
     .ard-placeholder {
       font: inherit;
-      opacity: 60%;
+      opacity: $placeholder-opacity;
+      color: $placeholder-color;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 100%;
       pointer-events: none;
+      display: flex;
+      align-items: center;
     }
 
     input {
@@ -36,15 +73,18 @@
       background: transparent;
       outline: none;
       font: inherit;
-      padding: 0;
+      color: inherit;
       display: block;
-      width: 100%;
     }
   }
   //! compact
   &.ard-compact {
-    height: 1.5625em;
-    font-size: 0.85em;
-    line-height: 1;
+    height: $height-compact;
+    font-size: $font-size-compact;
+    line-height: $line-height-compact;
+    padding-left: $padding-left-compact;
+    padding-right: $padding-right-compact;
+    padding-top: $padding-top-compact;
+    padding-bottom: $padding-bottom-compact;
   }
 }