angular / angular/components

feat(Theming): mat-sys-corner

Open
#31,833 1 comment 1 reaction 0 assignees View on GitHub
feature material spec P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Having a new set of `corner` or `shape` token that can be used for other purpose.
```scss
:root {
--mat-sys-corner-extra-small: 4px; // Extra small : Menu, Snackbars, Text fields
--mat-sys-corner-small: 8px; // Small : Chips, Rich tooltip
--mat-sys-corner-medium: 10px; // Medium : Cards, Small FABs
--mat-sys-corner-large: 16px; // Large : FABs, Navigation drawers
--mat-sys-corner-extra-large: 28px; // Extra large : Dialogs, Large FABs, Search view (full-screen), Time picker, Time input
--mat-sys-corner-full: 9999px; // Full : Badge, Buttons, Sliders, Switches, Search bards
}
```

Which will then be editable through the
```scss
@include mat.theme-overrides((
corner-large: 32px
))
```

### Use Case

This is actually hard to use the angular token, as they all are related to a specific component.
But what if I'd like to design my own thing ?

Then I would welcome being able to use already predefined set of angular css variables.

Contributor guide

Open the contributing guide

Research direction

Start by tracing the Angular Material theming entry point represented by mat.theme-overrides and the existing system-token definitions. Done means the proposed corner tokens are available as reusable CSS variables and can be customized through the shown corner-large override; the issue names no files or tests to run.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.