element-hq / element-hq/compound

Design Tokens: Add glass material

Open
#239 0 comments 0 reactions 1 assignee Claimed by @janogarcia View on GitHub
T-Component-Design
Dominant language
MDX
Stars
24
Forks
7
PR merge metrics
No merged PRs in 30d

Description

# Context

Formalize the glass material used for some large containers (e.g., current presenter in Element Call, modal containers in Dark theme...). This visual treatment, along with the [expressive border](https://github.com/vector-im/compound/issues/237) and gradients, is part of the “Be in your Element” theme.

- It should include all visual properties used such as color, translucency, blur and stroke.
- It should work for Light and Dark modes.

[Figma — Glass material explorations](https://www.figma.com/file/fq7cTHPNHZX3ttFW1gBEnv/Compound-Element-Call-Components?type=design&node-id=1014-22762&mode=design&t=VJhXdeCJkP81k6Ls-0)

# Platform

- Confirmed: Web.
- Unconfirmed: Android/iOS.

```[tasklist]
# Design phase
- [ ] Tokens are added to Tokens Studio
- [ ] Tokens are published to Compound Styles Figma library
- [ ] Tokens are made available to Themer if necessary
- [ ] Tokens shareout for designers
```

```[tasklist]
# Development phase
- [ ] Tokens are generated for the target platforms
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.