@ardium-ui/ui 5.0.0-alpha.2 → 5.0.0-alpha.21

package/themes/default/inputs/number-input.scss

@@ -2,33 +2,46 @@
 @use '../mixins' as defaultMixins;
 @use '../../variables' as ARD;
 
-ard-number-input {
-  width: 9.5rem;
+:root {
+  --ard-number-input-width: 9.5rem;
+  --ard-number-input-height: var(--ard-form-field-height);
+  --ard-number-input-height-compact: var(--ard-form-field-height-compact);
+  --ard-number-input-font-size: var(--ard-form-field-font-size);
+  --ard-number-input-font-size-compact: var(--ard-form-field-font-size-compact);
+  --ard-number-input-padding: var(--ard-form-field-padding);
+  --ard-number-input-padding-compact: var(--ard-form-field-padding-compact);
+  --ard-number-input-rounded-border-radius: 8px;
+}
 
-  &:not(:has(.ard-quick-change-button)) {
-    width: 6rem;
-  }
+ard-number-input {
+  width: var(--ard-number-input-width, 9.5rem);
 }
 
 .ard-number-input {
   @include inputMixin.genericInput();
   @include defaultMixins.formAppearances();
-  min-height: 2.1875rem;
-  height: 2.1875rem;
+  min-height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
+  height: var(--ard-form-field-height, var(--ard-number-input-height, 2.3125rem));
   gap: 0;
   width: 100%;
+  font-size: var(--ard-number-input-font-size, var(--ard-form-field-font-size, 1rem));
 
   .ard-input-container {
     height: 100%;
     max-width: 100%;
+    padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
 
     & > input {
       width: 100%;
     }
   }
+  .ard-placeholder {
+    padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
+  }
 
   .ard-quick-change-button {
     position: relative;
+    min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
 
     .ard-button {
       height: 100%;
@@ -63,11 +76,11 @@ ard-number-input {
 
   //! variants
   &.ard-variant-rounded {
-    border-radius: 8px;
+    border-radius: var(--ard-number-input-rounded-border-radius, 8px);
 
     &.ard-quick-change-false {
       .ard-input-container {
-        border-radius: 8px;
+        border-radius: var(--ard-number-input-rounded-border-radius, 8px);
       }
     }
   }
@@ -79,8 +92,8 @@ ard-number-input {
 
     .ard-button {
       border-radius: 9999px !important;
-      height: 30px;
-      width: 30px;
+      width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
+      height: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
       margin: 0 2px;
     }
 
@@ -111,9 +124,19 @@ ard-number-input {
 
   //! compact
   &.ard-compact {
-    min-height: 1.6875rem;
-    height: 1.6875rem;
-    font-size: 0.925rem;
+    min-height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
+    height: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
+    font-size: var(--ard-number-input-font-size-compact, var(--ard-form-field-font-size-compact, 0.9375rem));
+
+    .ard-input-container {
+      padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
+    }
+    .ard-placeholder {
+      padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
+    }
+    .ard-quick-change-button {
+      min-width: var(--ard-form-field-height-compact, var(--ard-number-input-height-compact, 1.6875rem));
+    }
   }
 }
 

package/themes/default/modal.scss

@@ -15,8 +15,9 @@
   .ard-modal-panel {
     padding: 1.25rem;
     padding-top: 1rem;
-    background: ARD.$bg;
     max-width: calc(100vw - 4rem);
+    max-height: calc(100vh - 4rem);
+    background: ARD.$bg;
     position: relative;
     display: flex;
     flex-direction: column;

package/themes/default/radio.scss

@@ -19,14 +19,16 @@ ard-radio {
   outline: none;
   font-size: 1em;
   display: flex;
-  gap: 0.375em;
+  align-items: center;
+  gap: 0.75rem;
   padding: 0;
   width: 100%;
 
   > .ard-radio-circles {
     position: relative;
     width: 1.25em;
-    height: 1.25em;
+    min-width: 1.25em;
+    aspect-ratio: 1;
 
     > .ard-radio-outer-circle {
       position: absolute;
@@ -34,7 +36,7 @@ ard-radio {
       right: 0;
       top: 0;
       bottom: 0;
-      border: 2px solid ARD.$detail;
+      border: 0.125em solid ARD.$detail;
       border-radius: 9999px;
       transition: border-color 0.2s ARD.$timing-fn;
     }