jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-12 12:30:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add themes variables to tile card to change font appearance (#27092)

Browse Source 
* Add themes variables to tile card to change font appearance

* Update documentation header including themes variables

---------

Co-authored-by: Jeremy Cook <jeco@norceresearch.no>
This commit is contained in:
Jeremy Cook
2025-09-24 16:34:43 +02:00
committed by GitHub
parent 7be2c59295
commit e4ca478d01
1 changed files with 74 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/tile/ha-tile-info.ts
View File

@@ -1,6 +1,28 @@
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
/**
* Home Assistant tile info component
*
* @element ha-tile-info
*
* @summary
* A tile info component, used in tile card in Home Assistant to display primary and secondary text.
*
* @slot primary - The primary text container.
* @slot secondary - The secondary text container.
*
* @cssprop --ha-tile-info-primary-font-size - The font size of the primary text. defaults to `var(--ha-font-size-m)`.
* @cssprop --ha-tile-info-primary-font-weight - The font weight of the primary text. defaults to `var(--ha-font-weight-medium)`.
* @cssprop --ha-tile-info-primary-line-height - The line height of the primary text. defaults to `var(--ha-line-height-normal)`.
* @cssprop --ha-tile-info-primary-letter-spacing - The letter spacing of the primary text. defaults to `0.1px`.
* @cssprop --ha-tile-info-primary-color - The color of the primary text. defaults to `var(--primary-text-color)`.
* @cssprop --ha-tile-info-secondary-font-size - The font size of the secondary text. defaults to `var(--ha-font-size-s)`.
* @cssprop --ha-tile-info-secondary-font-weight - The font weight of the secondary text. defaults to `var(--ha-font-weight-normal)`.
* @cssprop --ha-tile-info-secondary-line-height - The line height of the secondary text. defaults to `var(--ha-line-height-condensed)`.
* @cssprop --ha-tile-info-secondary-letter-spacing - The letter spacing of the secondary text. defaults to `0.4px`.
* @cssprop --ha-tile-info-secondary-color - The color of the secondary text. defaults to `var(--primary-text-color)`.
*/
@customElement("ha-tile-info")
export class HaTileInfo extends LitElement {
@property() public primary?: string;
@@ -21,6 +43,48 @@ export class HaTileInfo extends LitElement {
}
static styles = css`
:host {
--tile-info-primary-font-size: var(
--ha-tile-info-primary-font-size,
var(--ha-font-size-m)
);
--tile-info-primary-font-weight: var(
--ha-tile-info-primary-font-weight,
var(--ha-font-weight-medium)
);
--tile-info-primary-line-height: var(
--ha-tile-info-primary-line-height,
var(--ha-line-height-normal)
);
--tile-info-primary-letter-spacing: var(
--ha-tile-info-primary-letter-spacing,
0.1px
);
--tile-info-primary-color: var(
--ha-tile-info-primary-color,
var(--primary-text-color)
);
--tile-info-secondary-font-size: var(
--ha-tile-info-secondary-font-size,
var(--ha-font-size-s)
);
--tile-info-secondary-font-weight: var(
--ha-tile-info-secondary-font-weight,
var(--ha-font-weight-normal)
);
--tile-info-secondary-line-height: var(
--ha-tile-info-secondary-line-height,
var(--ha-line-height-condensed)
);
--tile-info-secondary-letter-spacing: var(
--ha-tile-info-secondary-letter-spacing,
0.4px
);
--tile-info-secondary-color: var(
--ha-tile-info-secondary-color,
var(--primary-text-color)
);
}
.info {
width: 100%;
display: flex;
@@ -36,18 +100,18 @@ export class HaTileInfo extends LitElement {
width: 100%;
}
.primary {
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
line-height: var(--ha-line-height-normal);
letter-spacing: 0.1px;
color: var(--primary-text-color);
font-size: var(--tile-info-primary-font-size);
font-weight: var(--tile-info-primary-font-weight);
line-height: var(--tile-info-primary-line-height);
letter-spacing: var(--tile-info-primary-letter-spacing);
color: var(--tile-info-primary-color);
}
.secondary {
font-size: var(--ha-font-size-s);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
letter-spacing: 0.4px;
color: var(--primary-text-color);
font-size: var(--tile-info-secondary-font-size);
font-weight: var(--tile-info-secondary-font-weight);
line-height: var(--tile-info-secondary-line-height);
letter-spacing: var(--tile-info-secondary-letter-spacing);
color: var(--tile-info-secondary-color);
}
`;
}