angular / angular/components

feat(Theming): mat-sys-space

Open
#31,142 2 comments 3 reactions 0 assignees View on GitHub
area: theming feature gemini-triaged needs: discussion P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Having a new set of `space` token
Proposed space & naming found in the following article https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407

```style
:root {
--mat-sys-space-smallest: 4px; /* BBFE */
--mat-sys-space-smaller: 8px; /* Best friends */
--mat-sys-space-small: 12px;
--mat-sys-space: 16px; /* Close friends */
--mat-sys-space-big: 24px; /* Close-ish friends */
--mat-sys-space-bigger: 32px; /* Friends */
--mat-sys-space-biggest: 64px; /* Acquaintances */
--mat-sys-space-giant: 72px; /* Distant acquaintances */
--mat-sys-space-gargantuan: 128px; /* Stranger */
}
```

### Use Case

Ensure UI coherence across components

Contributor guide

Open the contributing guide

Research direction

No file or test is named in the issue; start by locating the existing Material theming token entry point and related tests. Done means the proposed space tokens use the listed names and values and are available for consistent UI theming across components.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.