feat(08-01): define design token CSS custom properties for icon sizes and type scale
- New tokens.css.ts exports designTokens with --yj-icon-sm/md/lg and --yj-text-xs/sm/md/lg/xl - Values derived from existing pixel sizes scattered across codebase - :host scoped for component-level adoption via static styles array
This commit is contained in:
@@ -0,0 +1,24 @@
|
|||||||
|
import { css } from 'lit';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Design tokens for consistent sizing across all components.
|
||||||
|
* Import and include in a component's static styles array:
|
||||||
|
*
|
||||||
|
* import { designTokens } from '../../styles/tokens.css';
|
||||||
|
* static styles = [designTokens, css`...`];
|
||||||
|
*/
|
||||||
|
export const designTokens = css`
|
||||||
|
:host {
|
||||||
|
/* ── Icon sizes ── */
|
||||||
|
--yj-icon-sm: 14px;
|
||||||
|
--yj-icon-md: 18px;
|
||||||
|
--yj-icon-lg: 24px;
|
||||||
|
|
||||||
|
/* ── Type scale ── */
|
||||||
|
--yj-text-xs: 11px;
|
||||||
|
--yj-text-sm: 12px;
|
||||||
|
--yj-text-md: 13px;
|
||||||
|
--yj-text-lg: 15px;
|
||||||
|
--yj-text-xl: 18px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
Reference in New Issue
Block a user