Skip to content

Commit 4f79d5e

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
feat(labs): add spacing system stylesheet
PiperOrigin-RevId: 906465683
1 parent 5aab804 commit 4f79d5e

3 files changed

Lines changed: 181 additions & 0 deletions

File tree

‎labs/gb/styles/m3.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
@import 'icon/md-icon';
1010
@import 'motion/md-motion-tokens-easing';
1111
@import 'shape/md-shape-tokens';
12+
@import 'space/md-space-tokens';
1213
@import 'typography/md-typography-tokens';
1314
// go/keep-sorted end

‎labs/gb/styles/space/md-space-tokens.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/*!
2+
* Copyright 2026 Google LLC
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
@layer md.sys.space {
7+
:root {
8+
--md-sys-space-unit: 8px;
9+
--md-sys-space-0: calc(var(--md-sys-space-unit) * 0);
10+
--md-sys-space-25: calc(var(--md-sys-space-unit) * 0.25);
11+
--md-sys-space-50: calc(var(--md-sys-space-unit) * 0.5);
12+
--md-sys-space-75: calc(var(--md-sys-space-unit) * 0.75);
13+
--md-sys-space-100: var(--md-sys-space-unit);
14+
--md-sys-space-125: calc(var(--md-sys-space-unit) * 1.25);
15+
--md-sys-space-150: calc(var(--md-sys-space-unit) * 1.5);
16+
--md-sys-space-175: calc(var(--md-sys-space-unit) * 1.75);
17+
--md-sys-space-200: calc(var(--md-sys-space-unit) * 2);
18+
--md-sys-space-250: calc(var(--md-sys-space-unit) * 2.5);
19+
--md-sys-space-300: calc(var(--md-sys-space-unit) * 3);
20+
--md-sys-space-400: calc(var(--md-sys-space-unit) * 4);
21+
--md-sys-space-450: calc(var(--md-sys-space-unit) * 4.5);
22+
--md-sys-space-500: calc(var(--md-sys-space-unit) * 5);
23+
--md-sys-space-600: calc(var(--md-sys-space-unit) * 6);
24+
--md-sys-space-700: calc(var(--md-sys-space-unit) * 7);
25+
--md-sys-space-800: calc(var(--md-sys-space-unit) * 8);
26+
--md-sys-space-900: calc(var(--md-sys-space-unit) * 9);
27+
}
28+
}

‎labs/gb/styles/tailwind.scss‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/*!
2+
* Copyright 2026 Google LLC
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
// stylelint-disable scss/at-rule-no-unknown -- Uses TailwindCSS at-rules.
7+
8+
// Cascade `md` layer between `base` reset styles and `utilities` for overrides.
9+
@layer theme, base, md, components, utilities;
10+
@theme inline {
11+
// Color
12+
#{'--color-*'}: initial; // Do not use Tailwind's default color utilities.
13+
--color-primary: var(--md-sys-color-primary);
14+
--color-on-primary: var(--md-sys-color-on-primary);
15+
--color-primary-container: var(--md-sys-color-primary-container);
16+
--color-on-primary-container: var(--md-sys-color-on-primary-container);
17+
--color-primary-fixed: var(--md-sys-color-primary-fixed);
18+
--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
19+
--color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
20+
--color-on-primary-fixed-variant: var(
21+
--md-sys-color-on-primary-fixed-variant
22+
);
23+
--color-secondary: var(--md-sys-color-secondary);
24+
--color-on-secondary: var(--md-sys-color-on-secondary);
25+
--color-secondary-container: var(--md-sys-color-secondary-container);
26+
--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
27+
--color-secondary-fixed: var(--md-sys-color-secondary-fixed);
28+
--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
29+
--color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
30+
--color-on-secondary-fixed-variant: var(
31+
--md-sys-color-on-secondary-fixed-variant
32+
);
33+
--color-tertiary: var(--md-sys-color-tertiary);
34+
--color-on-tertiary: var(--md-sys-color-on-tertiary);
35+
--color-tertiary-container: var(--md-sys-color-tertiary-container);
36+
--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
37+
--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
38+
--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
39+
--color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
40+
--color-on-tertiary-fixed-variant: var(
41+
--md-sys-color-on-tertiary-fixed-variant
42+
);
43+
--color-error: var(--md-sys-color-error);
44+
--color-on-error: var(--md-sys-color-on-error);
45+
--color-error-container: var(--md-sys-color-error-container);
46+
--color-on-error-container: var(--md-sys-color-on-error-container);
47+
--color-surface: var(--md-sys-color-surface);
48+
--color-surface-dim: var(--md-sys-color-surface-dim);
49+
--color-surface-bright: var(--md-sys-color-surface-bright);
50+
--color-surface-container-lowest: var(
51+
--md-sys-color-surface-container-lowest
52+
);
53+
--color-surface-container-low: var(--md-sys-color-surface-container-low);
54+
--color-surface-container: var(--md-sys-color-surface-container);
55+
--color-surface-container-high: var(--md-sys-color-surface-container-high);
56+
--color-surface-container-highest: var(
57+
--md-sys-color-surface-container-highest
58+
);
59+
--color-on-surface: var(--md-sys-color-on-surface);
60+
--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
61+
--color-outline: var(--md-sys-color-outline);
62+
--color-outline-variant: var(--md-sys-color-outline-variant);
63+
--color-inverse-surface: var(--md-sys-color-inverse-surface);
64+
--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
65+
--color-inverse-primary: var(--md-sys-color-inverse-primary);
66+
--color-scrim: var(--md-sys-color-scrim);
67+
--color-shadow: var(--md-sys-color-shadow);
68+
69+
// Typography
70+
#{'--font-*'}: initial; // Do not use Tailwind's default font utilities.
71+
--font-brand: var(--md-ref-typeface-brand);
72+
--font-plain: var(--md-ref-typeface-plain);
73+
#{'--text-*'}: initial; // Do not use Tailwind's default text utilities.
74+
#{'--tracking-*'}: initial;
75+
#{'--leading-*'}: initial;
76+
// Use the `typescale-<name>-<size>` utility to apply typography tokens.
77+
--typescale-label-sm: var(--md-sys-typescale-label-sm);
78+
--typescale-label-sm-tracking: var(--md-sys-typescale-label-sm-tracking);
79+
--typescale-label-md: var(--md-sys-typescale-label-md);
80+
--typescale-label-md-tracking: var(--md-sys-typescale-label-md-tracking);
81+
--typescale-label-lg: var(--md-sys-typescale-label-lg);
82+
--typescale-label-lg-tracking: var(--md-sys-typescale-label-lg-tracking);
83+
--typescale-body-sm: var(--md-sys-typescale-body-sm);
84+
--typescale-body-sm-tracking: var(--md-sys-typescale-body-sm-tracking);
85+
--typescale-body-md: var(--md-sys-typescale-body-md);
86+
--typescale-body-md-tracking: var(--md-sys-typescale-body-md-tracking);
87+
--typescale-body-lg: var(--md-sys-typescale-body-lg);
88+
--typescale-body-lg-tracking: var(--md-sys-typescale-body-lg-tracking);
89+
--typescale-title-sm: var(--md-sys-typescale-title-sm);
90+
--typescale-title-sm-tracking: var(--md-sys-typescale-title-sm-tracking);
91+
--typescale-title-md: var(--md-sys-typescale-title-md);
92+
--typescale-title-md-tracking: var(--md-sys-typescale-title-md-tracking);
93+
--typescale-title-lg: var(--md-sys-typescale-title-lg);
94+
--typescale-title-lg-tracking: var(--md-sys-typescale-title-lg-tracking);
95+
--typescale-headline-sm: var(--md-sys-typescale-headline-sm);
96+
--typescale-headline-sm-tracking: var(
97+
--md-sys-typescale-headline-sm-tracking
98+
);
99+
--typescale-headline-md: var(--md-sys-typescale-headline-md);
100+
--typescale-headline-md-tracking: var(
101+
--md-sys-typescale-headline-md-tracking
102+
);
103+
--typescale-headline-lg: var(--md-sys-typescale-headline-lg);
104+
--typescale-headline-lg-tracking: var(
105+
--md-sys-typescale-headline-lg-tracking
106+
);
107+
--typescale-display-sm: var(--md-sys-typescale-display-sm);
108+
--typescale-display-sm-tracking: var(--md-sys-typescale-display-sm-tracking);
109+
--typescale-display-md: var(--md-sys-typescale-display-md);
110+
--typescale-display-md-tracking: var(--md-sys-typescale-display-md-tracking);
111+
--typescale-display-lg: var(--md-sys-typescale-display-lg);
112+
--typescale-display-lg-tracking: var(--md-sys-typescale-display-lg-tracking);
113+
#{'--font-weight-*'}: initial; // Material supports a limited set of font weights.
114+
--font-weight-normal: var(--md-ref-typeface-weight-regular);
115+
--font-weight-medium: var(--md-ref-typeface-weight-medium);
116+
--font-weight-bold: var(--md-ref-typeface-weight-bold);
117+
118+
// Shape
119+
--radius-xs: var(--md-sys-shape-corner-xs);
120+
--radius-sm: var(--md-sys-shape-corner-sm);
121+
--radius-md: var(--md-sys-shape-corner-md);
122+
--radius-lg: var(--md-sys-shape-corner-lg);
123+
--radius-xl: var(--md-sys-shape-corner-lg-increased);
124+
--radius-2xl: var(--md-sys-shape-corner-xl);
125+
--radius-3xl: var(--md-sys-shape-corner-xl-increased);
126+
--radius-4xl: var(--md-sys-shape-corner-xxl);
127+
128+
// Elevation
129+
--shadow-2xs: initial; // Material does not have a 2xs shadow.
130+
--shadow-xs: var(--md-sys-elevation-shadow-1);
131+
--shadow-sm: var(--md-sys-elevation-shadow-2);
132+
--shadow-md: var(--md-sys-elevation-shadow-3);
133+
--shadow-lg: var(--md-sys-elevation-shadow-4);
134+
--shadow-xl: var(--md-sys-elevation-shadow-5);
135+
--shadow-2xl: initial; // Material does not have a 2xl shadow.
136+
137+
// Space
138+
--spacing: var(--md-sys-shape-unit);
139+
140+
// Breakpoints
141+
--breakpoint-sm: 600px; // medium
142+
--breakpoint-md: 840px; // expanded
143+
--breakpoint-lg: 1200px; // large
144+
--breakpoint-xl: 1600px; // extra-large
145+
--breakpoint-2xl: initial; // Material does not have a 2xl breakpoint.
146+
}
147+
148+
// Use the `typescale-<name>-<size>` utility to apply typography tokens.
149+
@utility typescale-* {
150+
font: #{'--value(--typescale-*)'};
151+
letter-spacing: #{'--value(--typescale-*-tracking)'};
152+
}

0 commit comments

Comments
 (0)