refactor!: adjust aura gap and padding property values (#11073)

Author: jouni

dev/aura/aura-theme-editor.js

@@ -82,7 +82,7 @@ customElements.define(
             ></aura-number-control>
             <aura-inset-control></aura-inset-control>
             <aura-number-control property="--aura-base-radius" min="0" max="8" step="0.5"></aura-number-control>
-            <aura-number-control property="--aura-base-size" min="12" max="20"></aura-number-control>
+            <aura-number-control property="--aura-base-size" min="8" max="24" step="4"></aura-number-control>
             <aura-number-control
               property="--aura-base-font-size"
               label="--aura-base-font-size"

packages/aura/src/size.css

@@ -1,7 +1,6 @@
 :where(:root),
 :where(:host) {
   --aura-base-size: 16;
-  --_size-ref: 16;
   --aura-base-radius: 3;
   --vaadin-radius-s: min(0.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
   --vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
@@ -12,33 +11,20 @@
 :where(:root),
 :where(:host),
 :where([theme]) {
-  --vaadin-padding-xs: round(
-    var(--aura-base-size) * 0.25 * pow(var(--aura-base-size) / var(--_size-ref), 0.5) * 1px,
-    1px
-  );
-  --vaadin-padding-s: round(
-    var(--aura-base-size) * 0.5 * pow(var(--aura-base-size) / var(--_size-ref), 0.75) * 1px,
-    1px
-  );
-  --vaadin-padding-m: round(
-    var(--aura-base-size) * 0.75 * pow(var(--aura-base-size) / var(--_size-ref), 0.3) * 1px,
-    1px
-  );
-
-  --vaadin-padding-l: calc(var(--aura-base-size) * 1px);
-  --vaadin-padding-xl: round(
-    var(--aura-base-size) * 1.5 * pow(var(--aura-base-size) / var(--_size-ref), 0.1) * 1px,
-    1px
-  );
+  --vaadin-gap-xs: round(var(--aura-base-size) * 0.25 * 1px, 1px);
+  --vaadin-gap-s: round(var(--aura-base-size) * 0.5 * 1px, 1px);
+  --vaadin-gap-m: round(var(--aura-base-size) * 0.75 * 1px, 1px);
+  --vaadin-gap-l: round(var(--aura-base-size) * 1px, 1px);
+  --vaadin-gap-xl: round(var(--aura-base-size) * 1.5 * 1px, 1px);
 
   --vaadin-padding-block-container: round(var(--vaadin-padding-s) / 1.4, 1px);
   --vaadin-padding-inline-container: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
 
-  --vaadin-gap-xs: var(--vaadin-padding-xs);
-  --vaadin-gap-s: var(--vaadin-padding-s);
-  --vaadin-gap-m: var(--vaadin-padding-m);
-  --vaadin-gap-l: var(--vaadin-padding-l);
-  --vaadin-gap-xl: var(--vaadin-padding-xl);
+  --vaadin-padding-xs: round(var(--aura-base-size) * 0.25 * 1px, 1px);
+  --vaadin-padding-s: round(var(--aura-base-size) * 0.5 * 1px, 1px);
+  --vaadin-padding-m: round(var(--aura-base-size) * 0.75 * 1px, 1px);
+  --vaadin-padding-l: round(var(--aura-base-size) * 1px, 1px);
+  --vaadin-padding-xl: round(var(--aura-base-size) * 1.5 * 1px, 1px);
 }
 
 @media (pointer: coarse) {