Use space tokens in ha-quick-bar (#27663)

timmo001 · web-flow · commit 48b4df43ab82 · 2025-10-27T13:39:41.000+02:00
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1011,8 +1011,8 @@ export class QuickBar extends LitElement {
             --mdc-dialog-max-width: 800px;
             --mdc-dialog-min-width: 500px;
             --dialog-surface-position: fixed;
-            --dialog-surface-top: 40px;
-            --mdc-dialog-max-height: calc(100% - 72px);
+            --dialog-surface-top: var(--ha-space-10);
+            --mdc-dialog-max-height: calc(100% - var(--ha-space-18));
           }
         }
 
@@ -1055,8 +1055,8 @@ export class QuickBar extends LitElement {
         }
 
         span.command-text {
-          margin-left: 8px;
-          margin-inline-start: 8px;
+          margin-left: var(--ha-space-2);
+          margin-inline-start: var(--ha-space-2);
           margin-inline-end: initial;
           direction: var(--direction);
         }
@@ -1069,17 +1069,17 @@ export class QuickBar extends LitElement {
         ha-md-list-item.two-line {
           --md-list-item-one-line-container-height: 64px;
           --md-list-item-two-line-container-height: 64px;
-          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: 8px;
+          --md-list-item-top-space: var(--ha-space-2);
+          --md-list-item-bottom-space: var(--ha-space-2);
         }
 
         ha-md-list-item.three-line {
           width: 100%;
           --md-list-item-one-line-container-height: 72px;
           --md-list-item-two-line-container-height: 72px;
           --md-list-item-three-line-container-height: 72px;
-          --md-list-item-top-space: 8px;
-          --md-list-item-bottom-space: 8px;
+          --md-list-item-top-space: var(--ha-space-2);
+          --md-list-item-bottom-space: var(--ha-space-2);
         }
 
         ha-md-list-item .code {
@@ -1104,11 +1104,11 @@ export class QuickBar extends LitElement {
         }
 
         ha-tip {
-          padding: 20px;
+          padding: var(--ha-space-5);
         }
 
         .nothing-found {
-          padding: 16px 0px;
+          padding: var(--ha-space-4) var(--ha-space-0);
           text-align: center;
         }
 

Original file line number	Diff line number	Diff line change
`@@ -1011,8 +1011,8 @@ export class QuickBar extends LitElement {`
`1011`	`1011`	`--mdc-dialog-max-width: 800px;`
`1012`	`1012`	`--mdc-dialog-min-width: 500px;`
`1013`	`1013`	`--dialog-surface-position: fixed;`
`1014`		`- --dialog-surface-top: 40px;`
`1015`		`- --mdc-dialog-max-height: calc(100% - 72px);`
	`1014`	`+ --dialog-surface-top: var(--ha-space-10);`
	`1015`	`+ --mdc-dialog-max-height: calc(100% - var(--ha-space-18));`
`1016`	`1016`	`}`
`1017`	`1017`	`}`
`1018`	`1018`
`@@ -1055,8 +1055,8 @@ export class QuickBar extends LitElement {`
`1055`	`1055`	`}`
`1056`	`1056`
`1057`	`1057`	`span.command-text {`
`1058`		`- margin-left: 8px;`
`1059`		`- margin-inline-start: 8px;`
	`1058`	`+ margin-left: var(--ha-space-2);`
	`1059`	`+ margin-inline-start: var(--ha-space-2);`
`1060`	`1060`	`margin-inline-end: initial;`
`1061`	`1061`	`direction: var(--direction);`
`1062`	`1062`	`}`
`@@ -1069,17 +1069,17 @@ export class QuickBar extends LitElement {`
`1069`	`1069`	`ha-md-list-item.two-line {`
`1070`	`1070`	`--md-list-item-one-line-container-height: 64px;`
`1071`	`1071`	`--md-list-item-two-line-container-height: 64px;`
`1072`		`- --md-list-item-top-space: 8px;`
`1073`		`- --md-list-item-bottom-space: 8px;`
	`1072`	`+ --md-list-item-top-space: var(--ha-space-2);`
	`1073`	`+ --md-list-item-bottom-space: var(--ha-space-2);`
`1074`	`1074`	`}`
`1075`	`1075`
`1076`	`1076`	`ha-md-list-item.three-line {`
`1077`	`1077`	`width: 100%;`
`1078`	`1078`	`--md-list-item-one-line-container-height: 72px;`
`1079`	`1079`	`--md-list-item-two-line-container-height: 72px;`
`1080`	`1080`	`--md-list-item-three-line-container-height: 72px;`
`1081`		`- --md-list-item-top-space: 8px;`
`1082`		`- --md-list-item-bottom-space: 8px;`
	`1081`	`+ --md-list-item-top-space: var(--ha-space-2);`
	`1082`	`+ --md-list-item-bottom-space: var(--ha-space-2);`
`1083`	`1083`	`}`
`1084`	`1084`
`1085`	`1085`	`ha-md-list-item .code {`
`@@ -1104,11 +1104,11 @@ export class QuickBar extends LitElement {`
`1104`	`1104`	`}`
`1105`	`1105`
`1106`	`1106`	`ha-tip {`
`1107`		`- padding: 20px;`
	`1107`	`+ padding: var(--ha-space-5);`
`1108`	`1108`	`}`
`1109`	`1109`
`1110`	`1110`	`.nothing-found {`
`1111`		`- padding: 16px 0px;`
	`1111`	`+ padding: var(--ha-space-4) var(--ha-space-0);`
`1112`	`1112`	`text-align: center;`
`1113`	`1113`	`}`
`1114`	`1114`