Themes use styles from incorrect external libraries

[josh-tt]

Detailed description

The Carbon themes still reference many incorrect colors from external libraries as mentioned here: https://github.com/carbon-design-system/carbon-website/issues/577

I've gone through the White Theme and documented all the occurrences of references to external libraries so as to get an overview of what is wrong. Each theme might have a unique set of issues, but I haven't got the time to do them all. Took approximately 3hrs to do layer styles.

These examples of errors are for the White theme layer styles. Things I believed to be bugs, I marked as such. styles I wasn't certain about are marked as 'intentional?' and styles that reference other IBM libraries were marked as such, as I wasn't sure if those were known.

If the Theme colors are intended to be easily modifiable by end users, they'll need to have these kinds of issues addressed to ensure that colors are easily replaceable by swapping token values. At the moment to make any changes, requires updating token styles and rogue layer styles, and also assigning styles to layers that have none assigned.

Here is a spreadsheet of the items listed below: https://drive.google.com/open?id=1N0hTph5nEt8lomyLT9wv3lRzuZz3SGE0&authuser=josh@twistedtools.com&usp=drive_fs

Page	Artboard	Instance	Library	Style	Type
Symbols	tag / 01 default / blue / 01 enabled	Tag color	V1	color/blue/20	Bug
Symbols	tag / 01 default / blue / 02 focus	Tag color	V1	color/blue/20	Bug
Symbols	tag / 02 filterable / blue / 01 enabled	Tag color	V1	color/blue/20	Bug
Symbols	tag / 02 filterable / blue / 02 hover	Tag color	V1	color/blue/20	Bug
Symbols	tag / 02 filterable / blue / 03 focus	Tag color	V1	color/blue/20	Bug
symbols	ui shell / right panel / item / link / 05 selected	Rectangle	V1	color/blue/50	Bug
symbols	ui shell / right panel / item / link / 05 selected	Rectangle	V1	color/blue/50	Bug
Symbols	ui shell / left panel / item / sub-menu / with icon / 02 child / 05 selected	Border Right	V1	color/blue/60	Bug
Symbols	ui shell / left panel / item / icon / 05 selected	border-right	V1	color/blue/60	Bug
Symbols	ui shell / left panel / item / link / default / 05 selected	border-right	V1	color/blue/60	Bug
Symbols	ui shell / left panel / item / link / with icon / 05 selected	border-right	V1	color/blue/60	Bug
symbols	ui shell / left panel / item / sub-menu / default / 02 child / 05 selected	border-right	V1	color/blue/60	Bug
Symbols	ui shell / left panel / item / sub-menu / default / 02 child / 05 selected	border-right	V1	color/blue/60	Bug
Symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 05 selected-closed	border-right	V1	color/blue/60	Bug
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 05 selected-closed	border-right	V1	color/blue/60	Bug
symbols	tag / 01 default / cool gray / 01 enabled	Tag color	V1	color/cool gray/20	Bug
symbols	tag / 01 default / cool gray / 02 focus	Tag color	V1	color/cool gray/20	Bug
symbols	tag / 02 filterable / cool gray / 01 enabled	Tag color	V1	color/cool gray/20	Bug
symbols	tag / 02 filterable / cool gray / 02 hover	Tag color	V1	color/cool gray/20	Bug
symbols	tag / 02 filterable / cool gray / 03 focus	Tag color	V1	color/cool gray/20	Bug
symbols	tag / 01 default / cyan / 01 enabled	Tag color	V1	color/cyan/20	Bug
symbols	tag / 01 default / cyan / 02 focus	Tag color	V1	color/cyan/20	Bug
symbols	tag / 02 filterable / cyan / 01 enabled	Tag color	V1	color/cyan/20	Bug
symbols	tag / 02 filterable / cyan / 02 hover	Tag color	V1	color/cyan/20	Bug
symbols	tag / 02 filterable / cyan / 03 focus	Tag color	V1	color/cyan/20	Bug
symbols	tag / 01 default / blue / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / cool gray / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / cyan / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / gray / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / green / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / magenta / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / purple / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / red / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / teal / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / warm gray / 03 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 01 default / warm gray / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / blue / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / cool gray / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / cyan / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / gray / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / green / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / magenta / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / purple / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / red / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / teal / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	tag / 02 filterable / warm gray / 04 disabled	Tag color	V1	color/gray/10	Bug
symbols	ui shell / left panel / item / link / default / 05 selected	background	V1	color/gray/20	Bug
symbols	ui shell / left panel / item / link / with icon / 05 selected	background	V1	color/gray/20	Bug
symbols	ui shell / left panel / item / sub-menu / default / 01 parent / 05 selected-closed	background	V1	color/gray/20	Bug
symbols	ui shell / left panel / item / sub-menu / default / 02 child / 05 selected	background	V1	color/gray/20	Bug
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 05 selected-closed	background	V1	color/gray/20	Bug
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 05 selected-closed	background	V1	color/gray/20	Bug
symbols	ui shell / left panel / item / sub-menu / with icon / 02 child / 05 selected	background	V1	color/gray/20	Bug
symbols	tag / 01 default / gray / 01 enabled	Tag color	V1	color/gray/20	Bug
symbols	tag / 01 default / gray / 02 focus	Tag color	V1	color/gray/20	Bug
symbols	tag / 02 filterable / gray / 01 enabled	Tag color	V1	color/gray/20	Bug
symbols	tag / 02 filterable / gray / 02 hover	Tag color	V1	color/gray/20	Bug
symbols	tag / 02 filterable / gray / 03 focus	Tag color	V1	color/gray/20	Bug
symbols	toggle / small / item / 02 off	background	V1	color/gray/30	Bug
symbols	ui shell / left panel / item / link / default / 04 active	background	V1	color/gray/30	Bug
symbols	ui shell / left panel / item / link / with icon / 04 active	background	V1	color/gray/30	Bug
symbols	ui shell / left panel / item / sub-menu / default / 01 parent / 04 active	background	V1	color/gray/30	Bug
symbols	ui shell / left panel / item / sub-menu / default / 02 child / 04 active	background	V1	color/gray/30	Bug
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 04 active	background	V1	color/gray/30	Bug
symbols	ui shell / left panel / item / sub-menu / with icon / 02 child / 04 active	background	V1	color/gray/30	Bug
symbols	ui shell / header / item / sub-menu / 02 child / 04 active	background	V1	color/gray/70	Bug
symbols	ui shell / header / item / icon button / 04 active	background	V1	color/gray/80	Bug
symbols	ui shell / header / item / link / 04 active	background	V1	color/gray/80	Bug
symbols	ui shell / header / item / sub-menu / 01 parent / 04 active	background	V1	color/gray/80	Bug
symbols	ui shell / right panel / item / link / 04 active	background	V1	color/gray/80	Bug
symbols	ui shell / header / item / sub-menu / 01 parent / 05 open	background	V1	color/gray/90	Bug
symbols	ui shell / header / item / sub-menu / 02 child / 01 enabled	background	V1	color/gray/90	Bug
symbols	ui shell / header / item / sub-menu / 03 menu	background	V1	color/gray/90	Bug
symbols	ui shell / right panel / item / link / 05 selected	background	V1	color/gray/90	Bug
symbols	tag / 01 default / green / 01 enabled	Tag color	V1	color/green/20	Bug
symbols	tag / 01 default / green / 02 focus	Tag color	V1	color/green/20	Bug
symbols	tag / 02 filterable / green / 01 enabled	Tag color	V1	color/green/20	Bug
symbols	tag / 02 filterable / green / 02 hover	Tag color	V1	color/green/20	Bug
symbols	tag / 02 filterable / green / 03 focus	Tag color	V1	color/green/20	Bug
symbols	tag / 01 default / magenta / 01 enabled	Tag color	V1	color/magenta/20	Bug
symbols	tag / 01 default / magenta / 02 focus	Tag color	V1	color/magenta/20	Bug
symbols	tag / 02 filterable / magenta / 01 enabled	Tag color	V1	color/magenta/20	Bug
symbols	tag / 02 filterable / magenta / 02 hover	Tag color	V1	color/magenta/20	Bug
symbols	tag / 02 filterable / magenta / 03 focus	Tag color	V1	color/magenta/20	Bug
symbols	tag / 01 default / purple / 01 enabled	Tag color	V1	color/purple/20	Bug
symbols	tag / 01 default / purple / 02 focus	Tag color	V1	color/purple/20	Bug
symbols	tag / 02 filterable / purple / 01 enabled	Tag color	V1	color/purple/20	Bug
symbols	tag / 02 filterable / purple / 02 hover	Tag color	V1	color/purple/20	Bug
symbols	tag / 02 filterable / purple / 03 focus	Tag color	V1	color/purple/20	Bug
symbols	utilities / spacer / layout / layout-01 (16px)	background	V1	color/purple/60	Bug
symbols	utilities / spacer / layout / layout-02 (24px)	background	V1	color/purple/60	Bug
symbols	utilities / spacer / layout / layout-03 (32px)	background	V1	color/purple/60	Bug
symbols	utilities / spacer / layout / layout-04 (48px)	background	V1	color/purple/60	Bug
symbols	utilities / spacer / layout / layout-05 (64px)	background	V1	color/purple/60	Bug
symbols	utilities / spacer / layout / layout-06 (96px)	background	V1	color/purple/60	Bug
symbols	utilities / spacer / layout / layout-07 (160px)	background	V1	color/purple/60	Bug
symbols	tag / 02 filterable / red / 02 hover	hover	V1	color/red/20	Bug
symbols	tag / 01 default / red / 01 enabled	Tag color	V1	color/red/20	Bug
symbols	tag / 01 default / red / 02 focus	Tag color	V1	color/red/20	Bug
symbols	tag / 02 filterable / red / 01 enabled	Tag color	V1	color/red/20	Bug
symbols	tag / 02 filterable / red / 02 hover	Tag color	V1	color/red/20	Bug
symbols	tag / 02 filterable / red / 03 focus	Tag color	V1	color/red/20	Bug
symbols	tag / 01 default / teal / 01 enabled	Tag color	V1	color/teal/20	Bug
symbols	tag / 01 default / teal / 02 focus	Tag color	V1	color/teal/20	Bug
symbols	tag / 02 filterable / teal / 01 enabled	Tag color	V1	color/teal/20	Bug
symbols	tag / 02 filterable / teal / 02 hover	Tag color	V1	color/teal/20	Bug
symbols	tag / 02 filterable / teal / 03 focus	Tag color	V1	color/teal/20	Bug
symbols	tag / 01 default / warm gray / 01 enabled	Tag color	V1	color/warm gray/20	Bug
symbols	tag / 01 default / warm gray / 02 focus	Tag color	V1	color/warm gray/20	Bug
symbols	tag / 02 filterable / warm gray / 01 enabled	Tag color	V1	color/warm gray/20	Bug
symbols	tag / 02 filterable / warm gray / 02 hover	Tag color	V1	color/warm gray/20	Bug
symbols	tag / 02 filterable / warm gray / 03 focus	Tag color	V1	color/warm gray/20	Bug
symbols	notification / low contrast / 01 inline / warning / 01 default	background	NONE	NONE	Bug
symbols	notification / low contrast / 02 multi-line / warning / 01 default	background	NONE	NONE	Bug
symbols	notification / low contrast / 02 multi-line / warning / 02 with action	background	NONE	NONE	Bug
symbols	notification / low contrast / 03 toast / warning	background	NONE	NONE	Bug
Symbols	progress indicator / pieces / tooltip	background	NONE	NONE	Bug
symbols	notification / low contrast / 01 inline / warning / 02 with action	background	NONE	NONE	Bug
symbols	Notification / Low Contrast / 01	background	V2	color/blue/10	Intentional?
symbols	notification / low contrast / 01 inline / informational / 01 default	background	V2	color/blue/10	Intentional?
symbols	notification / low contrast / 01 inline / informational / 02 with action	background	V2	color/blue/10	Intentional?
symbols	notification / low contrast / 02 multi-line / informational / 01 default	background	V2	color/blue/10	Intentional?
symbols	notification / low contrast / 02 multi-line / informational / 02 with action	background	V2	color/blue/10	Intentional?
symbols	notification / low contrast / 03 toast / informational	background	V2	color/blue/10	Intentional?
symbols	tag / 02 filterable / blue / 02 hover	Hover	V1	color/blue/20 hover	Intentional?
symbols	tag / 02 filterable / cool gray / 02 hover	hover	V1	color/cool gray/20 hover	Intentional?
symbols	tag / 02 filterable / cyan / 02 hover	hover	V1	color/cyan/20 hover	Intentional?
symbols	ui shell / left panel / item / icon / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / icon / 03 alternate hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / icon / 05 selected	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / link / default / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / link / with icon / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / sub-menu / default / 01 parent / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / sub-menu / default / 02 child / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / left panel / item / sub-menu / with icon / 02 child / 02 hover	background	V1	color/gray/10 hover	Intentional?
symbols	ui shell / header / item / icon button / 02 hover	background	V1	color/gray/100 hover	Intentional?
symbols	ui shell / header / item / link / 02 hover	background	V1	color/gray/100 hover	Intentional?
symbols	ui shell / header / item / sub-menu / 01 parent / 02 hover	background	V1	color/gray/100 hover	Intentional?
symbols	ui shell / right panel / item / link / 02 hover	background	V1	color/gray/100 hover	Intentional?
symbols	tag / 02 filterable / gray / 02 hover	Hover	V1	color/gray/20 hover	Intentional?
symbols	ui shell / header / item / sub-menu / 02 child / 02 hover	background	V1	color/gray/90 hover	Intentional?
symbols	ui shell / header / item / sub-menu / 02 child / 03 focus	background	V1	color/gray/90 hover	Intentional?
symbols	notification / low contrast / 01 inline / success / 01 default	background	V2	color/green/10	Intentional?
symbols	notification / low contrast / 01 inline / success / 02 with action	background	V2	color/green/10	Intentional?
symbols	notification / low contrast / 02 multi-line / success / 01 default	background	V2	color/green/10	Intentional?
symbols	notification / low contrast / 02 multi-line / success / 02 with action	background	V2	color/green/10	Intentional?
symbols	notification / low contrast / 03 toast / success	background	V2	color/green/10	Intentional?
symbols	tag / 02 filterable / green / 02 hover	hover	V1	color/green/20 hover	Intentional?
symbols	tag / 02 filterable / magenta / 02 hover	Hover	V1	color/magenta/20 hover	Intentional?
symbols	tag / 02 filterable / purple / 02 hover	Hover	V1	color/magenta/20 hover	Intentional?
symbols	notification / low contrast / 01 inline / error / 01 default	background	V2	color/red/10	Intentional?
symbols	notification / low contrast / 01 inline / error / 02 with action	background	V2	color/red/10	Intentional?
symbols	notification / low contrast / 02 multi-line / error / 01 default	background	V2	color/red/10	Intentional?
symbols	notification / low contrast / 02 multi-line / error / 02 with action	background	V2	color/red/10	Intentional?
symbols	notification / low contrast / 03 toast / error	background	V2	color/red/10	Intentional?
symbols	tag / 02 filterable / teal / 02 hover	Hover	V1	color/teal/20 hover	Intentional?
symbols	tag / 02 filterable / warm gray / 02 hover	Hover	V1	color/warm gray/20 hover	Intentional?
symbols	pagination / piece / select dropdown checked	background	NONE	NONE	Intentional?
symbols	pagination / piece / select dropdown unchecked	background	NONE	NONE	Intentional?
symbols	pagination / standalone / group / 01 enabled	background	NONE	NONE	Intentional?
symbols	pagination / standalone / group / 02 overflow	background	NONE	NONE	Intentional?
symbols	pagination /standalone / item / number / 01 enabled	background	NONE	NONE	Intentional?
symbols	pagination /standalone / item / number / 04 selected	background	NONE	NONE	Intentional?
Symbols	pagination /standalone / item / overflow	background	NONE	NONE	Intentional?
symbols	Notification / low contrast / 01 and 02 (ALL OF THEM)	Borders	NONE	NONE	Intentional?
symbols	ui shell / header / item / icon button / 03 focus	background	Carbon Design System (Gray 100 theme)	state/focus	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / item / link / 03 focus	background	Carbon Design System (Gray 100 theme)	state/focus	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / item / sub-menu / 01 parent / 03 focus	background	Carbon Design System (Gray 100 theme)	state/focus	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / left panel / item / sub-menu / with icon / 01 parent / 03 focus	background	Carbon Design System (White theme)	state/focus	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / right panel / item / link / 03 focus	background	Carbon Design System (Gray 100 theme)	state/focus	Wrong Theme or Points to a theme, not to document itself
Getting Started	Getting Started	background	Carbon Design System (White theme)	ui-01	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + actions	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu + nav + actions	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu + navigation	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu + navigation	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + nav + actions	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + navigation	Border-bottom	Carbon Design System (Gray 100 theme)	Ui-02	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + actions	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu + actions	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu + nav + actions	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + menu + navigation	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + nav + actions	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / group / base + navigation	background	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself
symbols	ui shell / header / item / icon button / 05 selected	cover-up	Carbon Design System (Gray 100 theme)	ui-background	Wrong Theme or Points to a theme, not to document itself

What version of the Carbon Design System Kit are you using?

Latest White Theme downloaded from Sketch Cloud.

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.

See above list and attached spreadsheet.

What did you expect to happen? What happened instead? What would you like to see changed?

Styles are using v1 libraries, other Carbon themes and sometimes have no style assigned at all.

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

Unsure.

Steps to reproduce the issue

1. Open sketch and download the white theme library from sketch cloud.

2. Go to styles listed in this issue or spreadsheet https://drive.google.com/open?id=1N0hTph5nEt8lomyLT9wv3lRzuZz3SGE0&authuser=josh@twistedtools.com&usp=drive_fs

3. Examine styles to see where they come from.

Additional information

• To find these issues, I used 'shared style finder' plugin looking for all instances of referenced external libraries outside the theme and documented them in a spreadsheet.
• I only tested the White theme. Styles that apparently exist in all the themes are listed here https://github.com/carbon-design-system/carbon-website/issues/577 which is good for a quick overview of what styles exist in other themes.

Add labels

Libraries, Bug

[josh-tt]

Just wanted to give you an update on this as I discovered a way to quickly inventory all styles in your sketch doc that's much faster an easier.

If you install the Puzzle Publisher plugin and simply use the 'export html' option, you will get an html file of the entire carbon theme with an inspector that shows you every element in your document and its assigned style. You can filter by style 'source' as well, so you can quickly catch 'rogue' styles in the document. Anyone can do this as well since it's just an html document. It will probably take an hour to go through all the sketch docs and catch any mistakes.

Have a look for example where the filter for IBM v1 catches the v1 styles for tags. https://snipboard.io/kCK5Z3.jpg https://snipboard.io/zEHmdl.jpg

[josh-tt]

I went ahead and exported all the themes in case you find it helpful. Here are all the Themes as clickable HTML with an inspector. Just go lower left and launch the inspector. Toggle the 'show symbol' icon if you're not seeing anything happen in the inspector.

https://josh-tt.github.io/Carbon-Design-System-White-theme-/#library_preview https://josh-tt.github.io/Carbon-Design-System-Gray-100-theme-/#library_preview https://josh-tt.github.io/Carbon-Design-System-Gray-90-theme-/#library_preview https://josh-tt.github.io/Carbon-Design-System--Gray-10-theme-/#library_preview

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[aagonzales]

If the Theme colors are intended to be easily modifiable by end users, they'll need to have these kinds of issues addressed to ensure that colors are easily replaceable by swapping token values. At the moment to make any changes, requires updating token styles and rogue layer styles, and also assigning styles to layers that have none assigned.

If a user wants to create a custom library they will have to download the kit file and then update the token layer styles. This will detach it from the cloud library but as a system (with the 4 IBM themes as our priority) we do not want to make it easy for someone to either accidentally or otherwise update token values associated with those themes. It is a limitation of Sketch that there is no way to feed different value to the same file for theming purposes (otherwise we wouldn't have 4 separate libraries).

[aagonzales]

We will check Tag, UI Shell, Spacer, Notification for lingering Language V1 layer usage. It is intentional that this components are calling custom colors from the Language V2 palette. This mimics also what is done in code.

Some of list item reference background as none? I'm not sure why you have those listed as a problem. I believe all the ones I saw on the list intentional do not have a fill.

[aagonzales]

For these UI shell ones, they are like this in the theme kits because of a limitation of our code. At the moment all 4 themes share exactly the same shell with no color deviation. Once we figure out how to properly theme the UI Shell in code we will update the UI Shell symbols layers to match.

[josh-tt]

Thanks for looking into this. Much appreciated.

Regarding your comments:

1. The ones that say 'none', indicate a layer that has no style assigned. As you mentioned, it's possible that some of them should be that way. I was just making an inventory of possible mistakes. Those listed as 'bugs' I was pretty sure about, those listed as 'Intentional?' I wasn't. However, for example some items, like 'Warning - Low Contrast Notification' have no style assigned at all, but does have a color value. It also has transparency setting for the yellow border, which has no style assigned. This may be intended, but it makes it impossible to edit/customize.

2. You said that "If a user wants to create a custom library they will have to download the kit file and then update the token layer styles. "

This is almost true, but having tried this several times over to do something as seemingly simple as using the provided 'Cool Gray' scheme with a 'Purple' button, it's not so simple at all. Some items don't use tokens (styles) at all or have changes made to things like transparency (as I mentioned above). It becomes a case of figuring out which other colors (beyond the tokens) are used and where, and then manually swapping out colors. Not trivial. You have to find the rogue colors, identify the hex and decipher it's scale step, and use the other colors similar scale step.

Since V1 colors are still used, it means you also need to know the v1 colors scale step value as well, based on the hex alone and the v1 doc has some inconsistencies/errors and is no longer supported. This has to be done in every Carbon theme / library and changes need to be done for all text styles as well. Find / Replace is another solution, but it's a bit of a dirty solution as you're overwriting a Blue with a Purple and still need to hunt down all colors, and the corresponding color's scale step.

Don't get me wrong, I love Carbon. But as a designer looking to do something as simple as changing a background theme and primary button color, there are a lot of roadblocks. If you're looking to get people outside of IBM using the framework that aren't developers, the current implementation of the Sketch docs are simply too difficult to change/manage/improve.

I understand that a big problem is with how Sketch handles styles, and I see two solutions:

1. If the Sketch files need to remain 'as is', with some elements referencing different documents and some elements without styles assigned (or with customizations made - transparency, fx, etc.) provide the designer with SCSS files formatted for use with a plugin such as Puzzle Tokens. Then the user can simply edit the scss variables in a code editor and instantly import the changes into Sketch. This works for text styles and layer styles and is very very fast.

I've been trying to do it myself, but I'm not a developer and the progress is slow. I can currently replace the token values, but for all the special cases where styles aren't assigned and for text styles it's still quite a bit of work to setup. For someone with more experience, it would be easy and probably a matter of a week of work. Then there could be one Sketch theme file and one color document and you'd have the ability to hot swap theme files at the click of a button, by pointing to a different scss file. Something like this is by far the best solution. One could even create a web app front end to generate the scss so that a designer doesn't even need to open the scss file. As a team, it would be easier for you to manage and fix one theme file.

2. Another, less ideal solution, might be to use symbols for tokens with swatches set as overrides. I haven't thought it through completely, but the user would have one IBM Color document with all color variables / swatches. There they could edit each color or add more scales. In each theme, a token would be a 'symbol' with a color from the Color doc assigned to it. Then the user sees UI Background and that it's background color is currently Gray 100. If he/she wants, they can simply swap it out for Cool Gray 100. It's much harder to make a mistake that way than it is to edit a hex value and it's easier to add more colors to your palette this way, without touching the existing colors. The user can probably use a 'state manager' plugin to swap between override states in a single document if one exists. Then all themes would be in one. I'm not sure how this would work with text styles though.

The better solution would be a plugin that allows the user to edit the styles via SCSS.

Thanks again for your time and effort.

[aagonzales]

I believe UI Shell, Notifications, and Tags are the only components that have custom styles (which is also the case for them in code) and to that point they call styles from the IBM Design Language V2 kit. These are the only components that would not be easily updatable with just the layers style. I know this for a fact because updating the layers is how I generated the 3 other theme kits. Sketch also has a feature where you can find and replace color values which is very handy for this situation. For tags is just unrealistic to create a Carbon token or layer style for each custom tag color. Hopefully one day UI Shell and notification will be done 100% with carbon tokens/layer styles once we figure out how to technically do that with the code which we've been having a lot of development trouble with.

Many symbols also have transparent or no fill backgrounds because the layer is only using a border for instance and background is defined in another layer on the symbol. At the moment you cannot apply a separate border layer style and background layer style to the same shape, they have to be two separate shapes. Separating them actually makes them easier to control. To the best of my knowledge these are all intentional. Focus on buttons is an example:

If v1 colors still are being used then that is a bug that I said we would look into. But it is purposefully that v2 color are being pulled directly into UI Shell, Notification and Tags.

To my knowledge there is no easy way to connect type with a layer style. We've had to manually update every value associated with a type style. This is a limitation of the tool.

The purpose of this kit is to match what is in production, it is not to make it easy for any one person to completely customize the layer styles. If you're wanting to make a custom theme, it does have an upfront cost in doing so. At moment, getting the kit to be 100% customizable is not a priority for us. Believe me at of all the people that know how hard and type consuming establishing and maintain a kit library it's me and my co-worker Lauren. We get you 80% of the way there, the rest for the moment is on the user looking to customize as unfortunate as that is. In the past we've actually talked the Sketch product team and have brought up having the ability to easy theme files would be a huge win. Let's hope the tool makes this easier without having to do so many hack and disjointed styles in the future.

Thanks for looking into all of these. We'll try to resolve the issue of remaining v1 style but I think for the moment the rest of the problems are out of scope for us.

[josh-tt]

Thanks for your time and clarifications, Anna. I hope that Sketch finds a better solution and am glad they're aware of the issues you're facing. I understand that some issues are beyond the scope of support, but I would kindly suggest looking into a better solution if you want the user to have the ability to change even little things, such as the Primary color.

Using a SCSS file and plugin to import changes would be a big improvement. Typo and layer styles (using scss variables) are easily changeable together this way and it's much easier to fix/troubleshoot as well. Adding a new color or even a new token is trivial. Of course, that kind of solution would only work for users by the user editing the sketch directory download of the 'theme library' with each update, but would be easy enough to do. I have something like the setup pictured below currently and need to finish it for the special elements that reference outside styles, (or have no styles) and typography. Then any change to the theme colors can be done in a text editor, and saved as a 'template'. I read online that you guys have some internal plugin as well, which I imagine does similar things.

In my opinion, a solution to change theme elements using scss is infinitely easier to manage and less prone to errors. Here I simply find/replace 'gray' with 'cool-gray' for example and blue with 'magenta', without worrying about the scale values.

[image: carbon scss for sketch using puzzle tokens.png]

Please note, that in addition to your summary of the special cases, Lauren had also mentioned in another post that v1 colors are being used for hovers and that is also a fix that is pending code changes. Also, Icons are referencing the icon docs as well for colors.

So, currently the elements with custom colors, incorrect colors or colors referencing other docs are the:

• UI Shell
• Notifications
• Tags
• Hovers
• Icons

Forgive me for insisting, but the real question is does IBM want this to be an open source framework intended for users outside IBM? If so, I imagine one of the first things people will try to do is set up their brand/personal color as the Primary color. Doing so isn't trivial if you want to catch all the other colors based on the Primary color scale in the document(s) as it requires a deeper understanding of the file setup, interconnectivity and exceptions, and bugs. As a new user, the only way to discover these issues and gain an understanding of the system as a whole, was by digging through the sketch file(s) and trying to make sense of it all. From the online Carbon documentation, adding and changing colors is supported, so in Sketch I assumed it would be possible / easy as well. Otherwise what is the point of tokens at all?

I agree with you, that having the special case layers (borders etc.) separated is a plus, not a minus and understand that. My issue is that some of those layers have no style assignment set, making it hard to find and replace if you don't know what you're looking for to begin with. The only way to ensure all changes are made is to find / replace every scale step for each color you are changing, in every document. Also, if you want to change Primary to Magenta by find and replace, you'll also end up with items like 'Blue' tag, being your new color 'Magenta', while remaining named 'Blue'. Same with anywhere a semantic color is used. You also need to find replace all scale steps for that color and their v1 equivalents, since those are used for hovers. This will be easier as you mentioned, once the v1 colors are all gone (or if there was some documentation on the v1 colors that could be referenced). That's quite a bit of work / knowledge to change a Primary color.

I'll summarize some of the issues I had here in case someone wants to tackle them in documentation or if someone else is reading this thread with similar questions. Perhaps it provides more insight into the issues I faced when trying to change the brand color and background colors.

As a user looking to change my Primary color and Background colors to other IBM palette colors, I ran into the following questions:

1. Do I need all the theme files installed and extra libraries installed/updated to successfully make a change to my Primary button color?

Yes. You need all the themes and extra libraries installed. Changes should be made across all documents as they are cross referenced to any item you change.

2. How should I approach changing my primary color and/or background colors, and ensure that all elements are updated?

After installing/downloading all the sketch theme documents and design language documents, go through each theme file and use find/replace to replace an entire scale of colors (changing blue to magenta for example).

Be sure to do this for v1 colors as well (found here - need link), which are used for hovers until further notice.

Do this using find replace for layer styles and text styles, and in all documents. Never update your styles, as doing so will break any customized elements that don't have a style assigned for the customization.

*Note - Doing a find/replace will result in having duplicate colors / wrong colors for items that are color specific, like tags and notifications. For example, your 'Blue' tag will now be 'Magenta' and you'll have two sets of magenta tags. Your 'info' notification will be 'magenta'. If you wish to keep a 'blue' tag and a 'blue' info notification, you must change those back manually.

3. Why are some layers without style assignments at all, while others have style assignments?

Most layers are tokenized (using styles) and will be automatically changed with an update to the token color on the elements page. However, some layers have no sketch style assignments due to Sketch limitations which would require creating extra styles that are too opinionated and break from the token logic. This is a limitation of Sketch. Find/replacing an entire scale of colors in your document should update most elements.

Below is a list of elements without tokens, or that may have customizations (opacity settings), or that reference another theme:

(Answer needs review)

• UI Shell (currently using colors found here (needs link) and/or cross referenced from another theme.
• Notifications (using v2 colors pulled in from the IBM Language doc and some customizations, such as transparency etc.)
• Tags (using v2 colors (and v1 colors - pending a fix) pulled in from the IBM Language doc)
• Hovers (currently using v1 colors found here (pending a fix) - [insert link]) 4. Why are some layer styles referencing different sketch documents? Why are there v1 and v2 colors?

The Sketch themes follow code logic. Therefore, before making changes, be sure to install all themes, and make any changes across all themes to ensure your single theme file updates properly. Use of V1 colors are bugs, with the exception of their use as hover states, for which a fix is pending.

5. Why is Expressive text found only in the IBM Language document and not in the theme documents, with gray variants like Productive fonts in the theme?

?

6. Why are Links without an 'underline', but with an 'underline' on the Carbon website?

?

7. Where is the 'dark' sidebar, as used on the home of the Carbon website?

?

8. Why are some columns in the IBM Shell Template rows not the same size?

• Why are some items in the IBM Shell Template rows not the same size? Is this because they're intended to be rendered on a sub-pixel level by a browser or an error in the sketch do? For example, 1/4 is 256px in col-1 and 254px for the rest of the columns. The 1/8 column is 128px for col-1 and 126px the rest of the columns etc.

?

I hope this post is helpful. I really love Carbon, but wish it was easier to manage and extend. We are using it for our website which is in development and as a foundation for our own internal desktop software framework, and I thank you guys again for the great work.

Cheers

On Thu, Jan 16, 2020 at 12:32 AM Anna Gonzales notifications@github.com wrote:

I believe UI Shell, Notifications, and Tags are the only components that have custom styles (which is also the case for them in code) and to that point they call styles from the IBM Design Language V2 kit. These are the only components that would not be easily updatable with just the layers style. I know this for a fact because updating the layers is how I generated the 3 other theme kits. Sketch also has a feature where you can find and replace color values which is very handy for this situation. For tags is just unrealistic to create a Carbon token or layer style for each custom tag color. Hopefully one day UI Shell and notification will be done 100% with carbon tokens/layer styles once we figure out how to technically do that with the code which we've been having a lot of development trouble with.

Many symbols also have transparent or no fill backgrounds because the layer is only using a border for instance and background is defined in another layer on the symbol. At the moment you cannot apply a separate border layer style and background layer style to the same shape, they have to be two separate shapes. Separating them actually makes them easier to control. To the best of my knowledge these are all intentional. Focus on buttons is an example:

[image: image] https://user-images.githubusercontent.com/11670886/72451422-85018680-3781-11ea-9394-c83370ba73f1.png

If v1 colors still are being used then that is a bug that I said we would look into. But it is purposefully that v2 color are being pulled directly into UI Shell, Notification and Tags.

To my knowledge there is no easy way to connect type with a layer style. We've had to manually update every value associated with a type style. This is a limitation of the tool.

The purpose of this kit is to match what is in production, it is not to make it way for any one person to completely customize the layer styles. If you're wanting to make a custom theme, it does have an upfront cost to doing soon. At moment, getting the kit to be 100% customizable is not a priority for us. Believe me at of all the people that know how hard and type consuming establishing and maintain a kit library it's me and my co-worker Lauren. We get you 80% of the way there, the rest for the moment is on the user looking to customize as unfortunate as that is. In the past we've actually talked the Sketch product team and have brought up having the ability to easy theme files would be a huge win. Let's hope the tool makes this easier without having to do so many hack and disjointed styles in the future.

Thanks for looking into all of these. We'll try to resolve the issue of remaining v1 style but I think for the moment the rest of the problems are out of scope for us at the moment.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/carbon-design-system/carbon-design-kit/issues/240?email_source=notifications&email_token=AHB5UMT26WISDMIEL2EA6P3Q543BDA5CNFSM4JSB3SLKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJA5WRY#issuecomment-574741319, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHB5UMQPHITVRTT6QXCBRODQ543BDANCNFSM4JSB3SLA .

[aagonzales]

Fair point, we could do a better job of documenting some of those concerns and questions.

Updating layer styles will get you 75% of the way there. Type styles are the biggest pain to update because they're not attached to layer styles and have to be individually updated with a new color. We can look into finding a better way to update type colors without doing a find/replace color function (after updating layer styles). And then we can note, as you mentioned, where the customized parts are so they're easier to find and update.

IBM is alway Carbon's first priority and supporting the open-source community is second. Supporting theming more would help with our own workflow but it's not a high priority for our project at the moment but we will continue making improvements where we can. I'll look into the Puzzle token plug-in you've mention.

@josh-tt for the record you're not an IBMer but an open-source community member correct?

[josh-tt]

Yep, I hear you. Thanks for that and I fully understand that IBM must be the number one priority.

Correct, I’m outside IBM. We are using the Vanilla theme currently for the web project. For our desktop software we are using the IBM framework as a starting point for our own framework. Our use case is quite niche (audio software) and so we need lots of customizations and patterns there. We also need pixel perfect sketch files to use for marketing the software online, since the desktop software framework we rely on is unfortunately not retina and doesn’t support text at all (which means rendering all text as pngs). So everything has to be perfect.

Definitely check our Puzzle Tokens. I’m guessing it will save you a lot of time making manual changes to themes via scss if you can get a dev to write the scss. Should be relatively easy, the issue is with the formatting which has some nuances but the team is active on spectrum chat and always helpful.

If I can help in any way to provide insights as an open source community member, please don’t hesitate to ask.

Thanks

Sent from my iPhone

On Jan 17, 2020, at 1:12 AM, Anna Gonzales notifications@github.com wrote:

 Fair point, we could do a better job of documenting some of those concerns and questions.

Updating layer styles will get you 75% of the way there. Type styles are the biggest pain to update because they're not attached to layer styles and have to be individually updated with a new color. We can look into finding a better way to update type colors without doing a find/replace color function (after updating layer styles). And then we can note, as you mentioned, where the customized parts are so they're easier to find and update.

IBM is alway Carbon's first priority and supporting the open-source community is second. Supporting theming more would help with our own workflow but it's not a high priority for our project at the moment but we will continue making improvements where we can. I'll look into the Puzzle token plug-in you've mention.

@josh-tt for the record you're not an IBMer but an open-source community member correct?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.