feat: make text-input `theme-able` #563

montezume · 2019-02-21T16:41:50Z

Making UI-Kit `Themeable`

This PR contains two major changes.

New choices

The first change introduces new choices. These choices have more semantically meaningful names that the old choices. For example, color-green, becomes color-primary. For now, this is a non breaking change. The choices are duplicated, and the old choices remain. At some point in the future, we will remove these now deprecated choices. See the table below for the new (and old) names.

(deprecated) choice	new choice	decision (value)
color-green	color-primary	`#00b39e`
color-green-25	color-primary-25	`hsl(172.9608938547486, 100%, 25%)`
color-green-40	color-primary-40	`hsl(172.9608938547486, 100%, 40%)`
color-green-85	color-primary-85	`hsl(172.9608938547486, 100%, 85%)`
color-green-95	color-primary-95	`hsl(172.9608938547486, 100%, 95%)`
color-navy	color-accent	`#213c45`
color-navy-30	color-accent-30	`hsl(195, 35.2941176471%, 30)`
color-navy-40	color-accent-40	`hsl(195, 35.2941176471%, 40)`
color-navy-95	color-accent-95	`hsl(195, 35.2941176471%, 95)`
color-navy-98	color-accent-98	`hsl(195, 35.2941176471%, 98)`
color-gray	color-neutral	`#cccccc`
color-gray-60	color-neutral-60	`hsl(0, 0%, 60%)`
color-gray-90	color-neutral-90	`hsl(0, 0%, 90%)`
color-gray-95	color-neutral-95	`hsl(0, 0%, 95%)`
color-blue	color-info	`#078cdf`
color-blue-85	color-info-85	`hsl(203.05555555555554, 93.9130434783%, 85%)`
color-blue-95	color-info-95	`hsl(203.05555555555554, 93.9130434783%, 95%)`
color-orange	color-warning	`#f16d0e`
color-orange-95	color-warning-95	`hsl(25.110132158590307, 89.0196078431%, 95%)`
color-red	color-error	`#e60050`
color-red-95	color-error-95	`hsl(339.1304347826087, 100%, 95%)`
color-black	color-solid	`#1a1a1a`
color-white	color-surface	`#ffffff`

Internally we now use these new choices for our design tokens.

Introducing the concept of a `theme`

By default, we can think about UI-Kit's theme as being the relationship between a choice and a decision. For example, in our (default) theme, we set the color-surface choice to the decision #FFF.

Overriding the default theme for a specific component.

In this PR, the ability to override the default theme for the component text-input has been added. A user can set a custom theme to the component as follows.

import { ThemeProvider } from 'emotion-theming';
import { TextInput } from '@commercetools-frontend/ui-kit';

const darkTheme = {
  colorSurface: 'black',
  colorSolid: 'white',
  colorDarkAccent98: 'white',
  colorError: 'darkred',
};

const DarkTextInput = ({value, onChange}) => (
    <ThemeProvider theme={darkTheme}>
        <TextInput name="dark-input" value={value} onChange={onChange} />
    </ThemeProvider>
);

Overriding the default theme for an entire application.

ThemeProvider supports nested themes, so once we have added theming to more components, users will be able to override the theme once in their app, and have it propagated everywhere UI-Kit is used.

What's next?

Once this PR has been merged, we can go about supporting themeing in the other components.

montezume · 2019-02-21T16:42:28Z

materials/design-tokens.js

@@ -0,0 +1,18 @@
+export default {
+  backgroundColorForInput: 'colorWhite',


this file would need to be autogenerated

montezume · 2019-02-21T16:44:13Z

src/components/inputs/styles.js

+const getInputStyles = (props, theme) => {
+  const overwrittenVars = {
+    ...vars,
+    ...theme,


basically how it works, is in your theme, you overwrite one of our choices. So for "colorGreen", you can specify "pink".

montezume · 2019-02-21T16:44:27Z

src/components/inputs/styles.js

-    background-color: ${vars.backgroundColorForInput};
-    border: 1px solid ${vars.borderColorForInput};
-    border-radius: ${vars.borderRadiusForInput};
+    background-color: ${overwrittenVars[designTokens.backgroundColorForInput]};


we use design tokens, but the design tokens variables contain "choices"

tdeekens · 2019-02-22T07:40:20Z

Nice. Can you maybe, for us on the outside, give a set of use cases we need theming fir?

emmenko · 2019-02-22T08:08:22Z

Can you maybe, for us on the outside, give a set of use cases we need theming fir?

We wanted to look into it to see if/how we can use the ui-kit components/design tokens for other use cases other than the MC (e.g. documentation websites).

However, I feel like having a "theme-like" structure, will help/force us to keep the design system/tokens more consistent. For example, the color names as we have them now don't make much sense. Instead of --color-green we should probably use --color-primary.

tdeekens · 2019-02-22T08:54:12Z

the color names as we have them now don't make much sense

Yes, that's my main concern. We would need more generic/semantic colour names. Like primary, accent, warning etc pp.

other use cases other than the MC (e.g. documentation websites).

Do we have designs or colour palettes for those? Feels a bit hard to anticipate what we need without. Even though this exploration is obviously great.

_{Sorry for clicking the wrong button}

montezume · 2019-02-22T12:59:46Z

We can support theming without actually coming up with other colour palettes. As you can see from this PR, the code changes are very minimal 😇.

The blocker right now is renaming the choices.

tdeekens · 2019-02-22T14:54:27Z

I like the names!

Shecki · 2019-03-29T10:38:02Z

in the design-team, we had a closer look at the naming and changed three proposals to make it more generic. (bold=new)

green = Primary
navy = accent
Blue = Information
Orange = Warning
Red = Error
Black = solid
Gray = Neutral
White = surface

sorry for mention it so late.. could these one be updated?
This would be awesome! Thanks!

tdeekens · 2019-03-29T11:17:36Z

Thanks. I am a bit worried about these

Black = solid
Gray = Neutral
White = surface

White is not the surface whenever a theme is inverted. Just saying.

emmenko · 2019-03-29T11:44:30Z

I agree with @tdeekens . Think about if you would have a dark theme, what would the color names map to.

Why not keeping black/white as dark/light?

Shecki · 2019-03-29T13:14:39Z

maybe this graphic will help a bit.
if we would use (light) + (dark) all colors have to be at least light or dark.. we already setting limitations

this is why we went for (surface) (solid)

Hope it helps?

emmenko · 2019-03-29T13:17:48Z

Yeah dark/light names for the inverted colors is a bit weird.

I think we all want the same thing eventually, solid/surface for me also feels a bit weird but maybe we just need to get used to it. At least I can't think of any better name...

Thanks

tdeekens · 2019-03-29T13:18:44Z

Thanks. Agreed. Maybe it's just we're not used to it but eventually the smallest evil name :)

montezume · 2019-03-29T15:40:12Z

Okay I updated the color names 👍

montezume · 2019-04-02T08:00:32Z

Sven gave the okay from the design side. Is there anything from the code review side or can I merge? @tdeekens @emmenko ?

tdeekens

Looks good to give it a shot I think. Curious to see where this leads and how it may be used. I presume we consider theming a beta feature for now?

tdeekens · 2019-04-02T08:17:31Z

materials/custom-properties.css

+  --color-primary-25: hsl(172.9608938547486, 100%, 25%);
+  --color-primary-40: hsl(172.9608938547486, 100%, 40%);
+  --color-primary-85: hsl(172.9608938547486, 100%, 85%);
+  --color-primary-95: hsl(172.9608938547486, 100%, 95%);


172.9608938547486 👀

AFAIK these values haven't changed 😆. They are just copy pasted of color-green-25, etc. But yeah, the weird 172.9608938547486 value comes because before we were using some postcss plugin to generate the value. Might make sense to round these 🤔

I guess rounding them would be a separate task but it would make sense.

Or maybe use rgba instead of hsl?

emmenko

Cool, looking forward to see the first results! 🚀

emmenko · 2019-04-02T08:25:04Z

src/components/inputs/text-input/text-input.story.js

+const darkTheme = {
+  colorLight: 'black',
+  colorDark: 'white',
+  colorDarkAccent98: 'white',


Shouldn't those be solid/surface?

oh yeah true, thanks!

🤦‍♂️

montezume requested a review from emmenko February 21, 2019 16:41

montezume changed the title ~~feat: show example of how themeing and design tokens could work together~~ [WIP] show example of how themeing and design tokens could work together Feb 21, 2019

montezume commented Feb 21, 2019

View reviewed changes

emmenko added the 🏕 Technical Exploration label Feb 22, 2019

tdeekens closed this Feb 22, 2019

tdeekens reopened this Feb 22, 2019

montezume force-pushed the ml-theme branch from 21c287a to 04b7146 Compare February 28, 2019 11:22

montezume changed the title ~~[WIP] show example of how themeing and design tokens could work together~~ feat: make text-input theme-able Feb 28, 2019

montezume added the 🖐 Status: On Hold label Feb 28, 2019

montezume force-pushed the ml-theme branch 2 times, most recently from f5db7e3 to 4327dd3 Compare March 29, 2019 08:46

montezume requested a review from tdeekens March 29, 2019 09:57

montezume added 🚀 Type: New Feature Something new Semver: FEATURE and removed 🖐 Status: On Hold labels Mar 29, 2019

montezume self-assigned this Mar 29, 2019

montezume requested a review from Shecki March 29, 2019 09:58

montezume force-pushed the ml-theme branch from 23d17ae to e4b2cc2 Compare March 29, 2019 15:26

montezume added 2 commits April 2, 2019 09:57

feat: show example of how themeing and design tokens could work together

5d2fb15

chore: rename choices

f4d156c

montezume force-pushed the ml-theme branch from e4b2cc2 to f4d156c Compare April 2, 2019 07:58

tdeekens approved these changes Apr 2, 2019

View reviewed changes

emmenko approved these changes Apr 2, 2019

View reviewed changes

chore: fix

6289e71

montezume merged commit 6b49e33 into master Apr 2, 2019

montezume deleted the ml-theme branch April 2, 2019 09:19

montezume mentioned this pull request Apr 5, 2019

Custom styles - theming and what comes next #644

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: make text-input `theme-able` #563

feat: make text-input `theme-able` #563

montezume commented Feb 21, 2019 •

edited

Loading

montezume Feb 21, 2019

montezume Feb 21, 2019

montezume Feb 21, 2019

tdeekens commented Feb 22, 2019

emmenko commented Feb 22, 2019

tdeekens commented Feb 22, 2019 •

edited

Loading

montezume commented Feb 22, 2019

tdeekens commented Feb 22, 2019

Shecki commented Mar 29, 2019 •

edited

Loading

tdeekens commented Mar 29, 2019

emmenko commented Mar 29, 2019

Shecki commented Mar 29, 2019

emmenko commented Mar 29, 2019 •

edited

Loading

tdeekens commented Mar 29, 2019 •

edited

Loading

montezume commented Mar 29, 2019

montezume commented Apr 2, 2019

tdeekens left a comment

tdeekens Apr 2, 2019

montezume Apr 2, 2019

tdeekens Apr 2, 2019 •

edited

Loading

emmenko Apr 2, 2019

emmenko left a comment

emmenko Apr 2, 2019

montezume Apr 2, 2019

montezume Apr 2, 2019

		@@ -0,0 +1,18 @@
		export default {
		backgroundColorForInput: 'colorWhite',

feat: make text-input theme-able #563

feat: make text-input theme-able #563

Conversation

montezume commented Feb 21, 2019 • edited Loading

Making UI-Kit Themeable

New choices

Introducing the concept of a theme

Overriding the default theme for a specific component.

Overriding the default theme for an entire application.

What's next?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdeekens commented Feb 22, 2019

emmenko commented Feb 22, 2019

tdeekens commented Feb 22, 2019 • edited Loading

montezume commented Feb 22, 2019

tdeekens commented Feb 22, 2019

Shecki commented Mar 29, 2019 • edited Loading

tdeekens commented Mar 29, 2019

emmenko commented Mar 29, 2019

Shecki commented Mar 29, 2019

emmenko commented Mar 29, 2019 • edited Loading

tdeekens commented Mar 29, 2019 • edited Loading

montezume commented Mar 29, 2019

montezume commented Apr 2, 2019

tdeekens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tdeekens Apr 2, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmenko left a 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

feat: make text-input `theme-able` #563

feat: make text-input `theme-able` #563

montezume commented Feb 21, 2019 •

edited

Loading

Making UI-Kit `Themeable`

Introducing the concept of a `theme`

tdeekens commented Feb 22, 2019 •

edited

Loading

Shecki commented Mar 29, 2019 •

edited

Loading

emmenko commented Mar 29, 2019 •

edited

Loading

tdeekens commented Mar 29, 2019 •

edited

Loading

tdeekens Apr 2, 2019 •

edited

Loading