feat(tag): expressive theme update #4166

+  .#{$prefix}--tag--blue {
+    color: $carbon--blue-80;
+  }
+
+  .#{$prefix}--tag--red {
+    color: $carbon--red-80;
+  }
+
+  .#{$prefix}--tag--magenta {
+    color: $carbon--magenta-80;
+  }
+
+  .#{$prefix}--tag--purple {
+    color: $carbon--purple-80;
+  }
+
+  .#{$prefix}--tag--cyan {
+    color: $carbon--cyan-80;
+  }
+
+  .#{$prefix}--tag--teal {
+    color: $carbon--teal-80;
+  }
+
+  .#{$prefix}--tag--green {
+    color: $carbon--green-80;
+  }
+
+  .#{$prefix}--tag--gray {
+    color: $carbon--gray-80;
+  }
+
+  .#{$prefix}--tag--cool-gray {
+    color: $carbon--cool-gray-80;
+  }
+
+  .#{$prefix}--tag--warm-gray {
+    color: $carbon--warm-gray-80;
+  }
+
+  .#{$prefix}--tag--filter {
+    padding-right: $spacing-04;
+  }
+
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
+    color: $disabled-02;
+  }


Wondering the color styles in here were actually needed, as they are implemented in Carbon core.

The main difference between these and those is that the colors here are 80 grade while the others are 70 grade. One of the new things in the Expressive theme is the darkening of the colors. But if there's another way to get 80 grade colors from the Carbon core classes that I'm missing, please let me know!

One of the new things in the Expressive theme is the darkening of the colors.

Thank you for pointing it out @IgnacioBecerra! Sounds that we need more system-wide change, similar to what we do for type tokens. I think we can start with changing color tokens at https://github.com/carbon-design-system/ibm-dotcom-library/blob/v1.11.0/packages/styles/scss/themes/expressive/_tokens.scss#L371-L479.

@jeffchew Is this something worthwhile as a engineering huddle topic?

Sorry, I missed this comment. Let's bring up as a huddle topic @IgnacioBecerra @asudoh .

Cool, done!

oliviaflory · 2020-10-20T22:05:10Z

packages/styles/scss/themes/expressive/components/_tag.scss

@@ -16,6 +16,74 @@
 /// @group tag-expressive
 @mixin tag-expressive {
  .#{$prefix}--tag {
+    @include carbon--type-style('body-long-01');


I don't think we want to change the type token to body-long-01 here because it's increasing the text size to 16px?

I thought the expressive theme token updates should have updated the original token label-01 to 14px per the design specs, unless I am mistaken.

jeffchew · 2020-10-22T13:17:02Z

Recapping some of the bullets from conversations:

update the height in the expressive theme
contribute color changes through Carbon repo so the system stays aligned between Carbon productive/expressive
add the variation for icon before the tag / contribute back

Based on this, we will not be handling the color changes in this PR. @IgnacioBecerra can you update?

@oliviaflory @wonilsuhibm you mentioned also the variation for icon you still want in but we eventually want to contribute back, right?

cc: @asudoh

asudoh

Thanks @IgnacioBecerra for the updates!

asudoh · 2020-10-22T15:42:12Z

packages/styles/scss/themes/expressive/components/_tag.scss

@@ -16,6 +16,36 @@
 /// @group tag-expressive
 @mixin tag-expressive {
  .#{$prefix}--tag {
+    @include carbon--type-style('label-01');
+
+    line-height: 20;


Suggested change

line-height: 20;

line-height: carbon--rem(20px);

asudoh · 2020-10-22T15:43:57Z

packages/styles/scss/themes/expressive/components/_tag.scss

+    width: 1.25rem;
+    height: 1.25rem;


Suggested change

width: 1.25rem;

height: 1.25rem;

width: $icon-size-01;

height: $icon-size-01;

oliviaflory · 2020-10-22T16:15:40Z

@IgnacioBecerra This might be nit picky, but is there a way to change the default label in storybook? It's a bit weird that it says "This is not a tag" when it is a tag..

Ideally it would say "This is a tag"

Realize this might not be in scope, so if it's a difficult thing I can open another issue to address this.

IgnacioBecerra · 2020-10-22T16:33:34Z

@asudoh I had used carbon--rem(20px) before, but eslint doesn't expect the line-height value to have px (weird), so left it at 20. I changed it to carbon--rem(20) since it still appears to work.

@oliviaflory I always thought that was a weird label to have when I was testing, and even the carbon-components Storybook has the regular This is a tag. Changed it to that in the latest commit!

asudoh · 2020-10-22T16:35:31Z

@IgnacioBecerra What specific StyleLint error did you get?

IgnacioBecerra · 2020-10-22T16:41:25Z

@asudoh
The error I got was: unexpected unit px for property line-height

When resolving this issue I found the docs, which said that having line-height without px wasn't considered a violation.

asudoh · 2020-10-22T16:46:51Z

I see, it's hostile to how Carbon core defines one-height`. Also unitless is a different animal from pixel unit. Given those, we have to change the StyleLint rule. I can take a look at it tomorrow.

IgnacioBecerra · 2020-10-22T16:59:33Z

I see, that's good to know unitless is not the same as pixel unit. Thanks Akira!

asudoh · 2020-10-22T23:42:13Z

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.12.0/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js#L80 seems the culprit. A couple of alternatives are:

Remove the rule
Disable the rule for the particular line (Given carbon--rem() makes sure we use the rem unit)

IgnacioBecerra · 2020-10-23T01:50:00Z

@asudoh Ended up disabling the rule for that specific line. 👍

asudoh

Cool, just a suggestion to make the ignore thing more specific.

packages/styles/scss/themes/expressive/components/_tag.scss

Co-authored-by: Akira Sudoh <[email protected]>

asudoh

Thanks @IgnacioBecerra for all the updates!

### Related Ticket(s) carbon-design-system#3669 ### Description Changing the Tag styles used for Expressive Theme. Bigger font, darker colors, more padding is included. ![image](https://user-images.githubusercontent.com/24970122/95804112-a5ca1e80-0cb6-11eb-90e3-9bea60302f0a.png) (Allow icon will be included in a separate PR to the carbon-components repository) ### Changelog **Changed** - Expressive theme styles added - Increased overall padding - Darkened text color - Increased line height and font

IgnacioBecerra added package: styles Work necessary for the Carbon for IBM.com styles package hacktoberfest-accepted labels Oct 7, 2020

kennylam added hacktoberfest and removed hacktoberfest-accepted labels Oct 7, 2020

asudoh reviewed Oct 8, 2020

View reviewed changes

feat(tag): expressive theme update

84142b5

IgnacioBecerra force-pushed the tags-padding-update branch from 6c4666c to 84142b5 Compare October 13, 2020 01:37

IgnacioBecerra marked this pull request as ready for review October 13, 2020 01:39

IgnacioBecerra and others added 2 commits October 13, 2020 15:13

Merge branch 'master' into tags-padding-update

9a1e8c2

Merge branch 'master' into tags-padding-update

cc7dcd2

oliviaflory reviewed Oct 20, 2020

View reviewed changes

feat(tag): expressive theme token update

b4751cd

jeffchew added the hacktoberfest-accepted label Oct 21, 2020

feat(tag): removed color darkening from expressive theme

2706e41

asudoh reviewed Oct 22, 2020

View reviewed changes

IgnacioBecerra added 2 commits October 22, 2020 09:26

feat(tag): used tokens

fd17ae8

feat(tag): renamed tag content in storybook

2ab1b49

feat(tag): reverting to unitless for the moment

15a6981

feat(tag): disabled stylelint for line-height declaration

e8d7206

asudoh reviewed Oct 23, 2020

View reviewed changes

packages/styles/scss/themes/expressive/components/_tag.scss Outdated Show resolved Hide resolved

feat(tag): updated stylelint-disable

233383f

Co-authored-by: Akira Sudoh <[email protected]>

asudoh approved these changes Oct 23, 2020

View reviewed changes

jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Oct 26, 2020

jeffchew and others added 2 commits October 26, 2020 14:42

Merge branch 'master' into tags-padding-update

f6105d9

Merge branch 'master' into tags-padding-update

556d473

kodiakhq bot merged commit 73e13a0 into carbon-design-system:master Oct 26, 2020

jeffchew mentioned this pull request Nov 10, 2020

November 2020 Release Plan (v1.13.0) #3598

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tag): expressive theme update #4166

feat(tag): expressive theme update #4166

IgnacioBecerra commented Oct 7, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 7, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 7, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 7, 2020 •

edited

Loading

asudoh Oct 8, 2020

IgnacioBecerra Oct 8, 2020

asudoh Oct 9, 2020

jeffchew Oct 19, 2020

asudoh Oct 19, 2020

oliviaflory Oct 20, 2020

jeffchew commented Oct 22, 2020

asudoh left a comment

asudoh Oct 22, 2020

asudoh Oct 22, 2020

oliviaflory commented Oct 22, 2020

IgnacioBecerra commented Oct 22, 2020

asudoh commented Oct 22, 2020

IgnacioBecerra commented Oct 22, 2020

asudoh commented Oct 22, 2020

IgnacioBecerra commented Oct 22, 2020

asudoh commented Oct 22, 2020

IgnacioBecerra commented Oct 23, 2020

asudoh left a comment

asudoh left a comment

feat(tag): expressive theme update #4166

feat(tag): expressive theme update #4166

Conversation

IgnacioBecerra commented Oct 7, 2020 • edited Loading

Related Ticket(s)

Description

Changelog

ibmdotcom-bot commented Oct 7, 2020 • edited Loading

ibmdotcom-bot commented Oct 7, 2020 • edited Loading

ibmdotcom-bot commented Oct 7, 2020 • 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

jeffchew commented Oct 22, 2020

asudoh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviaflory commented Oct 22, 2020

IgnacioBecerra commented Oct 22, 2020

asudoh commented Oct 22, 2020

IgnacioBecerra commented Oct 22, 2020

asudoh commented Oct 22, 2020

IgnacioBecerra commented Oct 22, 2020

asudoh commented Oct 22, 2020

IgnacioBecerra commented Oct 23, 2020

asudoh left a comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

IgnacioBecerra commented Oct 7, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 7, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 7, 2020 •

edited

Loading

ibmdotcom-bot commented Oct 7, 2020 •

edited

Loading