Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-24 04:39:01 +00:00
Code Activity

Add space tokens to developer tools (#28626)

Browse Source
This commit is contained in:
Aidan Timson
2025-12-19 09:33:53 +00:00
committed by GitHub
parent c0a49b3d0b
commit eaa1fb4107
12 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/panels/developer-tools/action/developer-tools-action.ts
View File

@@ -673,12 +673,12 @@ class HaPanelDevAction extends LitElement {
haStyle, haStyle,
css` css`
.content { .content {
padding: 16px; padding: var(--ha-space-4);
max-width: 1200px; max-width: 1200px;
margin: auto; margin: auto;
} }
.button-row { .button-row {
padding: 8px 16px; padding: var(--ha-space-2) var(--ha-space-4);
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);
background: var(--card-background-color); background: var(--card-background-color);
@@ -698,8 +698,8 @@ class HaPanelDevAction extends LitElement {
align-items: center; align-items: center;
} }
.switch-mode-container .error { .switch-mode-container .error {
margin-left: 8px; margin-left: var(--ha-space-2);
margin-inline-start: 8px; margin-inline-start: var(--ha-space-2);
margin-inline-end: initial; margin-inline-end: initial;
} }
.attributes { .attributes {
@@ -732,7 +732,7 @@ class HaPanelDevAction extends LitElement {
} }
.attributes td { .attributes td {
padding: 4px; padding: var(--ha-space-1);
vertical-align: middle; vertical-align: middle;
} }
@@ -748,7 +748,7 @@ class HaPanelDevAction extends LitElement {
.response img { .response img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin-top: 24px; margin-top: var(--ha-space-6);
} }
`, `,
]; ];

14
src/panels/developer-tools/assist/developer-tools-assist.ts
View File

@@ -240,13 +240,13 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
haStyle, haStyle,
css` css`
.content { .content {
padding: 28px 20px 16px; padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
max-width: 1040px; max-width: 1040px;
margin: 0 auto; margin: 0 auto;
} }
.description { .description {
margin: 0; margin: 0;
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
ha-textarea { ha-textarea {
width: 100%; width: 100%;
@@ -255,18 +255,18 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
text-align: right; text-align: right;
} }
.form { .form {
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
.result-toolbar { .result-toolbar {
text-align: center; text-align: center;
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
.result { .result {
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
.sentence { .sentence {
font-weight: var(--ha-font-weight-medium); font-weight: var(--ha-font-weight-medium);
margin-bottom: 8px; margin-bottom: var(--ha-space-2);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@@ -280,7 +280,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
ha-code-editor, ha-code-editor,
ha-alert { ha-alert {
display: block; display: block;
margin-top: 16px; margin-top: var(--ha-space-4);
} }
`, `,
]; ];

6
src/panels/developer-tools/debug/developer-tools-debug.ts
View File

@@ -107,13 +107,13 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
haStyle, haStyle,
css` css`
ha-card { ha-card {
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
.card-content { .card-content {
padding: 8px; padding: var(--ha-space-2);
} }
.content { .content {
padding: 28px 20px 16px; padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
display: block; display: block;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;

6
src/panels/developer-tools/event/developer-tools-event.ts
View File

@@ -148,7 +148,7 @@ class HaPanelDevEvent extends LitElement {
css` css`
.content { .content {
gap: var(--ha-space-4); gap: var(--ha-space-4);
padding: 16px; padding: var(--ha-space-4);
max-width: 1200px; max-width: 1200px;
margin: auto; margin: auto;
} }
@@ -169,7 +169,7 @@ class HaPanelDevEvent extends LitElement {
} }
ha-button { ha-button {
margin-top: 8px; margin-top: var(--ha-space-2);
} }
ha-textfield { ha-textfield {
@@ -178,7 +178,7 @@ class HaPanelDevEvent extends LitElement {
event-subscribe-card { event-subscribe-card {
display: block; display: block;
margin-top: 16px; margin-top: var(--ha-space-4);
direction: var(--direction); direction: var(--direction);
} }

12
src/panels/developer-tools/event/event-subscribe-card.ts
View File

@@ -160,16 +160,16 @@ class EventSubscribeCard extends LitElement {
static styles = css` static styles = css`
ha-textfield { ha-textfield {
display: block; display: block;
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
.error-message { .error-message {
margin-top: 8px; margin-top: var(--ha-space-2);
} }
.event { .event {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
padding-top: 8px; padding-top: var(--ha-space-2);
padding-bottom: 8px; padding-bottom: var(--ha-space-2);
margin: 16px 0; margin: var(--ha-space-4) 0;
} }
.event:last-child { .event:last-child {
border-bottom: 0; border-bottom: 0;
@@ -179,7 +179,7 @@ class EventSubscribeCard extends LitElement {
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
} }
ha-card { ha-card {
margin-bottom: 5px; margin-bottom: var(--ha-space-1);
} }
`; `;
} }

4
src/panels/developer-tools/ha-panel-developer-tools.ts
View File

@@ -176,12 +176,12 @@ class PanelDeveloperTools extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--ha-font-size-xl); font-size: var(--ha-font-size-xl);
padding: 8px 12px; padding: var(--ha-space-2) var(--ha-space-3);
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
box-sizing: border-box; box-sizing: border-box;
} }
:host([narrow]) .toolbar { :host([narrow]) .toolbar {
padding: 4px; padding: var(--ha-space-1);
} }
.main-title { .main-title {
margin: var(--margin-title); margin: var(--margin-title);

8
src/panels/developer-tools/state/developer-tools-state-renderer.ts
View File

@@ -298,7 +298,7 @@ class HaPanelDevStateRenderer extends LitElement {
} }
.cell .padded { .cell .padded {
padding: 4px; padding: var(--ha-space-1);
} }
.entities .row .header:nth-child(1), .entities .row .header:nth-child(1),
@@ -328,11 +328,11 @@ class HaPanelDevStateRenderer extends LitElement {
.entities ha-svg-icon { .entities ha-svg-icon {
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
padding: 4px; padding: var(--ha-space-1);
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
margin-right: 8px; margin-right: var(--ha-space-2);
margin-inline-end: 8px; margin-inline-end: var(--ha-space-2);
margin-inline-start: initial; margin-inline-start: initial;
} }

20
src/panels/developer-tools/state/developer-tools-state.ts
View File

@@ -507,7 +507,7 @@ class HaPanelDevState extends LitElement {
-webkit-user-select: initial; -webkit-user-select: initial;
-moz-user-select: initial; -moz-user-select: initial;
display: block; display: block;
padding: 16px; padding: var(--ha-space-4);
} }
:host search-input { :host search-input {
@@ -525,7 +525,7 @@ class HaPanelDevState extends LitElement {
} }
.heading ha-formfield { .heading ha-formfield {
margin-right: 8px; margin-right: var(--ha-space-2);
--mdc-typography-body2-font-size: var(--ha-font-size-m); --mdc-typography-body2-font-size: var(--ha-font-size-m);
--mdc-typography-body2-font-weight: var(--ha-font-weight-medium); --mdc-typography-body2-font-weight: var(--ha-font-weight-medium);
} }
@@ -534,9 +534,9 @@ class HaPanelDevState extends LitElement {
display: block; display: block;
font-family: var(--ha-font-family-code); font-family: var(--ha-font-family-code);
color: var(--secondary-text-color); color: var(--secondary-text-color);
padding: 0 8px; padding: 0 var(--ha-space-2);
margin-bottom: 8px; margin-bottom: var(--ha-space-2);
margin-top: 4px; margin-top: var(--ha-space-1);
font-size: var(--ha-font-size-s); font-size: var(--ha-font-size-s);
--mdc-icon-size: 14px; --mdc-icon-size: 14px;
--mdc-icon-button-size: 24px; --mdc-icon-button-size: 24px;
@@ -557,15 +557,15 @@ class HaPanelDevState extends LitElement {
} }
.state-input { .state-input {
margin-top: 16px; margin-top: var(--ha-space-4);
} }
ha-expansion-panel { ha-expansion-panel {
margin: 0 8px 16px; margin: 0 var(--ha-space-2) var(--ha-space-4);
} }
ha-expansion-panel p { ha-expansion-panel p {
padding: 0 8px; padding: 0 var(--ha-space-2);
} }
.inputs { .inputs {
@@ -574,12 +574,12 @@ class HaPanelDevState extends LitElement {
} }
.info { .info {
padding: 0 16px; padding: 0 var(--ha-space-4);
} }
.button-row { .button-row {
display: flex; display: flex;
margin: 8px 0; margin: var(--ha-space-2) 0;
align-items: center; align-items: center;
gap: var(--ha-space-2); gap: var(--ha-space-2);
} }

10
src/panels/developer-tools/statistics/developer-tools-statistics.ts
View File

@@ -732,7 +732,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
height: 56px; height: 56px;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 var(--ha-space-4);
gap: var(--ha-space-4); gap: var(--ha-space-4);
box-sizing: border-box; box-sizing: border-box;
background: var(--primary-background-color); background: var(--primary-background-color);
@@ -751,7 +751,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--ha-space-4); gap: var(--ha-space-4);
padding: 0 16px; padding: 0 var(--ha-space-4);
overflow-x: scroll; overflow-x: scroll;
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
@@ -763,7 +763,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 8px 12px; padding: var(--ha-space-2) var(--ha-space-3);
box-sizing: border-box; box-sizing: border-box;
font-size: var(--ha-font-size-m); font-size: var(--ha-font-size-m);
--ha-assist-chip-container-color: var(--card-background-color); --ha-assist-chip-container-color: var(--card-background-color);
@@ -776,8 +776,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
} }
.selection-controls p { .selection-controls p {
margin-left: 8px; margin-left: var(--ha-space-2);
margin-inline-start: 8px; margin-inline-start: var(--ha-space-2);
margin-inline-end: initial; margin-inline-end: initial;
} }

4
src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
View File

@@ -513,7 +513,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
.text-content, .text-content,
ha-selector-datetime, ha-selector-datetime,
ha-selector-number { ha-selector-number {
margin-bottom: 20px; margin-bottom: var(--ha-space-5);
} }
ha-list-item { ha-list-item {
margin: 0 -24px; margin: 0 -24px;
@@ -522,7 +522,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
.table-row { .table-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: var(--ha-space-5);
} }
.stat-list { .stat-list {
min-height: 360px; min-height: 360px;

14
src/panels/developer-tools/template/developer-tools-template.ts
View File

@@ -275,7 +275,7 @@ ${type === "object"
.content { .content {
gap: var(--ha-space-4); gap: var(--ha-space-4);
padding: 16px; padding: var(--ha-space-4);
} }
.content.horizontal { .content.horizontal {
@@ -289,7 +289,7 @@ ${type === "object"
} }
ha-card { ha-card {
margin-bottom: 16px; margin-bottom: var(--ha-space-4);
} }
.edit-pane { .edit-pane {
@@ -307,14 +307,14 @@ ${type === "object"
.render-spinner { .render-spinner {
position: absolute; position: absolute;
top: 8px; top: var(--ha-space-2);
right: 8px; right: var(--ha-space-2);
inset-inline-end: 8px; inset-inline-end: var(--ha-space-2);
inset-inline-start: initial; inset-inline-start: initial;
} }
ha-alert { ha-alert {
margin-bottom: 8px; margin-bottom: var(--ha-space-2);
display: block; display: block;
} }
@@ -325,7 +325,7 @@ ${type === "object"
clear: both; clear: both;
white-space: pre-wrap; white-space: pre-wrap;
background-color: var(--secondary-background-color); background-color: var(--secondary-background-color);
padding: 8px; padding: var(--ha-space-2);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
direction: ltr; direction: ltr;

6
src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
View File

@@ -251,19 +251,19 @@ export class DeveloperYamlConfig extends LitElement {
} }
.content { .content {
padding: 28px 20px 16px; padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
max-width: 1040px; max-width: 1040px;
margin: 0 auto; margin: 0 auto;
} }
ha-card { ha-card {
margin-top: 24px; margin-top: var(--ha-space-6);
} }
.card-actions { .card-actions {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 4px; padding: var(--ha-space-1);
} }
`, `,
]; ];