feat(css): export mistica tokens as public css custom properties #1161

atabel · 2024-07-01T15:09:40Z

…ties

github-actions · 2024-07-01T15:11:37Z

Size stats

	master	this branch	diff
Total JS	11.9 MB	11.9 MB	0 B
JS without icons	1.98 MB	1.98 MB	0 B
Lib overhead	61 kB	61 kB	0 B
Lib overhead (gzip)	16.3 kB	16.3 kB	0 B

github-actions · 2024-07-01T15:12:23Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

github-actions · 2024-07-01T15:19:48Z

Screenshot tests report

✔️ All passing

github-actions · 2024-07-01T15:21:05Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-8dd4wx3iv-flows-projects-65bb050e.vercel.app

Built with commit 86af5ae.
This pull request is being automatically deployed with vercel-action

atabel · 2024-07-01T15:41:33Z

examples/css/style.css

+button {
+    color: var(--mistica-color-textButtonPrimary);
+    background: var(--mistica-color-buttonPrimaryBackground);
+    border-radius: var(--mistica-border-radius-button);
+    font-size: var(--mistica-font-size-2);
+    line-height: var(--mistica-line-height-2);
+    font-weight: var(--mistica-font-weight-button);
+    border: 1.5px solid transparent;
+    min-width: 104px;
+    padding: 12px 16px;
+    cursor: pointer;
+    outline: none;
+}
+
+button.small {
+    padding: 6px 12px;
+    min-width: 80px;
+}
+
+button:hover {
+    background: var(--mistica-color-buttonPrimaryBackgroundHover);
+}
+
+button:active {
+    background: var(--mistica-color-buttonPrimaryBackgroundSelected);
+}


it could be relatively simple to include some basic classes for some components, like buttons or tags inside mistica-common.css

Nice, also export Boxed style could be nice

I have doubts with this mistica-common file

Need maintenance?

If we only include "some" could be open the door to force us to complete more this file

something like this?

.mistica-boxed { border: 1px solid var(--mistica-color-border); border-radius: var(--mistica-border-radius-container); background: var(--mistica-color-backgroundContainer); }

Implementing inverse logic could be too much

Yes

Good point. I think, in case we include some basic components, we need to be clear about the scope and limitations of this. We can provide classes for basic stuff (components made by a single html element), but not for complex components like cards, because they are built by different pieces (title, subtitle, actions, etc) and we'd need classes for all the internal elements and the author would also need to replicate the correct html structure, so this doesn't scale. The most we can/should do in this cases is provide some examples, like the card I built here

I like it!

You can also include .mistica-boxed-inverse but this is specifically what I was saying in point 2. xDD you can feed this document to infinity

atabel · 2024-07-01T15:42:07Z

examples/css/index.html

This is an example of use. See this file and sytle.css

atabel · 2024-07-01T15:44:02Z

packages/generate-design-tokens/css-generator.js

+        .join('\n');
+
+    const textPresets = {
+        1: {


I've extracted these values from text.tsx, but I think these tokens should be in https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar.json#L1384

Agree we can add this definition in the tokens.json files

Also, reviewing the values there's something weird, text4 and text5 have the same size and line height, and it seems that it starts in text 3, that should be size: 16px mobile and 18 desktop

Telefonica/mistica-design#1817

atabel · 2024-07-01T15:47:00Z

css/mistica-common.css

+/* Responsive layout */
+.mistica-responsive-layout {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    margin: 0 var(--mistica-responsive-layout-margin);
+    --mistica-responsive-layout-margin: 16px;
+}
+
+@media (min-width: 768px) {
+    .mistica-responsive-layout {
+        --mistica-responsive-layout-margin: 24px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .mistica-responsive-layout {
+        --mistica-responsive-layout-margin: 40px;
+    }
+}
+
+@media (min-width: 1368px) {
+    .mistica-responsive-layout {
+        --mistica-responsive-layout-margin: calc((100vw - 1224px) / 2);
+    }
+}


Does it make sense to include some basic utility classes like this here?

At least a basic one like responsive-layout, yes. But I wouldn't add many of them

atabel · 2024-07-01T15:47:43Z

css/mistica-common.css

+}
+
+/* border-radius utility classes */
+.mistica-border-radius-avatar {


I'm not sure if border-radius utility classes are worth, maybe having the css vars is enough. Wdyt?

What is the use case? It seems like the CSS var could be enough

agree. If we need the class in the future, we can add it, but for now I think we can live with the vars

atabel · 2024-07-01T15:50:08Z

src/skins/tu.tsx

-            badge: palette.red70,
+            badge: palette.blue30,


is this change intended? I think the is't enough color contrast to read the number inside the badge now

It is, badges are blue in TU brand by design. They have a 6+:1 contrast, so it souldn't be a problem.

This is dark mode 🤔 I think Abel is right
https://camo.githubusercontent.com/daa3628439047ee6f4e6ede87c2fb3a069051d80a2aca7b8c83f73619275c1c4/68747470733a2f2f6465766d6973746963617765622e626c6f622e636f72652e77696e646f77732e6e65742f6d6973746963612d7765622d313731393939343934393638382f707269766174652d736b696e2d636f6d706f6e656e74732d73637265656e73686f742d746573742d7473782d636f6d706f6e656e74732d696e2d74752d696e76657273652d616e642d6461726b2d6d6f64652d312d646966662e706e67

(anyway, TU dark skin is not ready to use)

aweell · 2024-07-03T07:32:09Z

css/mistica-common.css

+    font-size: var(--mistica-font-size-title2);
+    line-height: var(--mistica-line-height-title2);
+    font-weight: var(--mistica-font-weight-title2);
+}


I'm wondering if we should add title3 to tokens.json so users can have all title sizes available. WDYT @yceballost

Fine by me! and we will need to include also title4 soon, right?

pladaria · 2024-07-04T07:47:30Z

examples/css/style.css

+    color: var(--mistica-color-textButtonPrimary);
+    background: var(--mistica-color-buttonPrimaryBackground);


you could define button as a colorless component and over that, build button-primary, button-secondary

packages/generate-design-tokens/css-generator.js

marcoskolodny · 2024-07-08T09:09:07Z

examples/css/README.md

+
+Naming convention:
+
+- `--mistica-border-radius-{radiusName}`


I think we decided not to create these tokens, right?

hmmm... no, we decided to remove the border-radius utility classes, but we keep the custom properties

# [15.15.0](v15.14.0...v15.15.0) (2024-07-16) ### Bug Fixes * **overscroll color:** background color not changing when switching dark/light mode ([#1172](#1172)) ([9b74fe6](9b74fe6)) ### Features * **Cards:** add role prop for touchable cards ([#1169](#1169)) ([a2a7cbf](a2a7cbf)) * **css:** export mistica tokens as public css custom properties ([#1161](#1161)) ([c5f74bc](c5f74bc)) * **Header:** support headline (Tag) ([#1174](#1174)) ([07d8fae](07d8fae)) * **Text:** support setting heading level to span and header pretitleAs ([#1170](#1170)) ([8abf43e](8abf43e))

tuentisre · 2024-07-16T12:15:33Z

🎉 This PR is included in version 15.15.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

WEB-1703 feat(css): export mistica tokens as public css custom proper…

f0b077f

…ties

atabel commented Jul 1, 2024

View reviewed changes

examples/css/index.html Outdated

Copy link

Collaborator Author

atabel Jul 1, 2024 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an example of use. See this file and sytle.css

atabel commented Jul 1, 2024

View reviewed changes

atabel requested review from yceballost, pladaria, aweell and marcoskolodny July 1, 2024 15:50

update screenshots

7839c66

atabel changed the title ~~WEB-1703 feat(css): export mistica tokens as public css custom properties~~ feat(css): export mistica tokens as public css custom properties Jul 2, 2024

add boxed

7679f36

aweell reviewed Jul 3, 2024

View reviewed changes

pladaria reviewed Jul 4, 2024

View reviewed changes

pladaria approved these changes Jul 4, 2024

View reviewed changes

marcoskolodny reviewed Jul 4, 2024

View reviewed changes

packages/generate-design-tokens/css-generator.js Show resolved Hide resolved

marcoskolodny approved these changes Jul 4, 2024

View reviewed changes

yceballost requested changes Jul 4, 2024

View reviewed changes

packages/generate-design-tokens/css-generator.js Outdated Show resolved Hide resolved

packages/generate-design-tokens/css-generator.js Outdated Show resolved Hide resolved

packages/generate-design-tokens/css-generator.js Show resolved Hide resolved

atabel added 2 commits July 8, 2024 10:51

Merge branch 'master' into atoledano-css

186f32e

fix text presets. Remove border radius utility classes

d01498a

atabel requested a review from yceballost July 8, 2024 09:03

marcoskolodny reviewed Jul 8, 2024

View reviewed changes

update screenshots

86af5ae

yceballost approved these changes Jul 11, 2024

View reviewed changes

aweell approved these changes Jul 15, 2024

View reviewed changes

atabel added this pull request to the merge queue Jul 15, 2024

Merged via the queue into master with commit c5f74bc Jul 15, 2024
11 checks passed

atabel deleted the atoledano-css branch July 15, 2024 13:49

tuentisre added the released label Jul 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(css): export mistica tokens as public css custom properties #1161

feat(css): export mistica tokens as public css custom properties #1161

atabel commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

atabel Jul 1, 2024

yceballost Jul 1, 2024

atabel Jul 2, 2024 •

edited

Loading

yceballost Jul 2, 2024

atabel Jul 1, 2024 •

edited

Loading

atabel Jul 1, 2024

aweell Jul 4, 2024

aweell Jul 4, 2024

aweell Jul 4, 2024

atabel Jul 1, 2024

marcoskolodny Jul 4, 2024

atabel Jul 1, 2024 •

edited

Loading

yceballost Jul 1, 2024

marcoskolodny Jul 4, 2024

atabel Jul 1, 2024

aweell Jul 3, 2024

yceballost Jul 4, 2024 •

edited

Loading

aweell Jul 3, 2024 •

edited

Loading

yceballost Jul 3, 2024

pladaria Jul 4, 2024

marcoskolodny Jul 8, 2024

atabel Jul 8, 2024

tuentisre commented Jul 16, 2024

		color: var(--mistica-color-textButtonPrimary);
		background: var(--mistica-color-buttonPrimaryBackground);

feat(css): export mistica tokens as public css custom properties #1161

feat(css): export mistica tokens as public css custom properties #1161

Conversation

atabel commented Jul 1, 2024 • edited Loading

github-actions bot commented Jul 1, 2024 • edited Loading

github-actions bot commented Jul 1, 2024 • edited Loading

github-actions bot commented Jul 1, 2024 • edited Loading

github-actions bot commented Jul 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atabel Jul 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atabel Jul 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atabel Jul 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yceballost Jul 4, 2024 • edited Loading

Choose a reason for hiding this comment

aweell Jul 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tuentisre commented Jul 16, 2024

atabel commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

atabel Jul 2, 2024 •

edited

Loading

atabel Jul 1, 2024 •

edited

Loading

atabel Jul 1, 2024 •

edited

Loading

yceballost Jul 4, 2024 •

edited

Loading

aweell Jul 3, 2024 •

edited

Loading