Migration
A migration guide that outlines what to do to upgrade to certain Chameleon versions
6.0.0
In Q3 of 2024 we will release another major version for chameleon containing some breaking changes.
Assets unification
In an effort to streamline our assets and ensure a consistent visual style, we have undertaken a comprehensive unification process. This guide outlines the key changes made to our libraries and provides instructions for updating your application or project to align with these.
Illustrations
We're starting from an almost clean state regarding illustrations. Only the page-not-found (404), placeholder and avatar illustrations seem to be used in future products. If more cross-brands illustrations are necessary, please contact us.
Icons
The main difference is that the new icon library is deduplicated. Previously we had every icon available in 2 styles (outline and fill) but only one style was dominantly used.
-
Find & replace
- Rename
plate-filltoplate-fullandstar-filltostar-full - Rename all other icons ending with
-fillto-active - Rename
recently-viewedtoshow, andvideocamtovideo - Prepend all social media icons with
social-(apple,facebook,github,google,instagram,linkedin,pinterest,skype,spotify,tiktok,twitter,whatsappandyoutube)
- Rename
-
Check and review usage
-
Check to see if you use
-activeicons that belong to the deleted set and use the default version (without-active) where possible (see table below). If no default version exists or no alternative is proposed, contact us. -
Some icons are updated visually. For example:
playandsportforchameleon-theme-hbvl. We’ve addedplay-buttonto be more consistent in naming, andtrophyorfootballforsport.
-
-
Still missing something?
Check the table below
-
Still haven’t found what you’re looking for?
Let us know!
Migration table
Legend
- ❌ this icon no longer exists
- 💫 this icon is visually updated
- 🆕 this icon is newly added
| old | new |
|---|---|
| apple | social-apple |
| archive | ❌ |
| backward | chevron-back |
| bookmark-fill | bookmark-active |
| bot, bot-fill | ❌ |
| brand-fill | brand-active |
| breaking, breaking-fill | ❌ |
| bullet-fill | bullet |
| camera-fill | camera |
| 🆕 | cast-active |
| chevron-double-back | ❌ |
| chevron-double-forward | ❌ |
| clipboard | ❌ |
| clock-fill | clock-active |
| comment-fill | comment |
| conditions, conditions-fill | document |
| country-fill | country-active |
| customer-support-fill | customer-support |
| discover, discover-fill | ❌ |
| drag | ❌ |
| 🆕 | economy |
| edit | ❌ |
| 🆕 | europe |
| error-fill | error |
| exit | ❌ |
| expand | ❌ |
| social-facebook | |
| favourite-fill | favourite-active |
| feedback-fill | feedback |
| filter, filter-fill | ❌ |
| flag, flag-fill | ❌ |
| folder | ❌ |
| football-fill | football-active |
| 🆕 | forward-30 |
| gallery-fill | gallery |
| gift, gift-fill | ❌ |
| github | social-github |
| social-google | |
| history | ❌ |
| home-fill | home |
| inbox | ❌ |
| info-fill | info |
| social-instagram | |
| layout, layout-grid, layout-grid-fill | ❌ |
| 🆕 | lifestyle |
| social-linkedin | |
| list, list-fill | ❌ |
| live-fill | ❌ |
| lock-closed | ❌ |
| lock-open | ❌ |
| mail-fill | |
| menu-fill | menu-active |
| 🆕 | menu-close |
| 🆕 | menu-search |
| mic-fill | mic |
| more-horizontal-fill | more-horizontal-active |
| more-vertical, more-vertical-fill | ❌ |
| music, music-fill | ❌ |
| 🆕 | newspaper |
| notification-fill | notification |
| opinion | feedback |
| opinion-fill | feedback |
| pause | 💫 |
| 🆕 | pause-button |
| person-fill | person |
| phone-fill | phone |
| pin-fill | pin-active |
| social-pinterest | |
| plate-fill | plate-full |
| play | 💫 |
| play-arrow | play |
| play-fill | play-button |
| 🆕 | play-button |
| podcast-fill | podcast-active |
| print-fill | |
| puzzle-fill | puzzle-active |
| recently-viewed | show |
| 🆕 | rewind-15 |
| rss-fill | rss |
| save | ❌ |
| search-fill | search |
| settings-fill | settings |
| shape | ❌ |
| share-fill | share |
| shield-fill | shield |
| shopping-bag | ❌ |
| skype | social-skype |
| 🆕 | sleep |
| sound, sound-fill | ❌ |
| spinner | ❌ |
| spotify | social-spotify |
| star-fill | star-full |
| stop | 💫 |
| stop-fill | stop-button |
| 🆕 | stop-button |
| tag-fill | tag |
| thumbs-down | thumbs-down |
| thumbs-up | thumbs-up |
| tiktok | social-tiktok |
| trending | 💫 |
| trending-fill | trending |
| 🆕 | trophy |
| 🆕 | trophy-active |
| tune-fill | tune |
| social-twitter | |
| videocam | video |
| videocam-fill | video-active |
| warning-fill | warning |
| social-whatsapp | |
| youtube | social-youtube |
| zoom-in | ❌ |
| zoom-out | ❌ |
Logos
We noticed inconsistent and/or unused logos. Some were added multiple times under different names (eg. as brand-square-main but also as brand-square-icon).
Please note, in addition to changes in naming, there may be changes in sizing (width/height) as well.
-
Use the table below to migrate your old logo names to the new ones.
-
Haven’t found what you’re looking for? Let us know!
Migration table
Legend
- ❌ this logo no longer exists
- 💫 this logo is visually updated
- 🆕 this logo is newly added
| brand | old | new |
|---|---|---|
| AZ | brand-square-main | logo-square-main |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-square-icon | logo-square-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-icon-name-horizontal | logo-main | |
| brand-square-icon-name-horizontal-white | logo-main-inverse | |
| brand-main | logo-main | |
| brand-icon | logo-icon | |
| brand-icon-white | logo-icon-inverse | |
| BELTEL | brand-square-main | logo-square-main |
| brand-square-icon-white | logo-square-inverse | |
| brand-square-icon | logo-square | |
| brand-plus-main | logo-premium-main | |
| brand-main | logo-main | |
| brand-plus-main-white | logo-premium-main | |
| brand-icon | logo-icon | |
| brand-icon-inverse | logo-icon-inverse | |
| 🆕 | logo-main-inverse | |
| CO | brand-square-main | logo-square-main |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-rectangle-name | ❌ | |
| brand-plus-main | logo-premium-main | |
| brand-main | logo-main | |
| brand-name-white | logo-main-inverse | |
| brand-icon | logo-icon | |
| brand-icon-white | logo-icon-inverse | |
| DL | brand-square-main | logo-square-main |
| brand-square-icon-white | logo-square-inverse | |
| brand-square-icon | logo-square | |
| brand-plus-main | logo-premium-main | |
| brand-plus-white | logo-premium-main-inverse | |
| brand-name-white | logo-main-inverse | |
| brand-name | logo-main 💫 | |
| brand-icon | logo-icon | |
| brand-main | logo-main 💫 | |
| 🆕 | logo-main-inverse | |
| brand-icon-white | logo-icon-inverse | |
| abo-zaterdag-extra | ❌ | |
| brand-icon-name-vertical | logo-vertical-icon-name | |
| abo-digitaal | ❌ | |
| abo-digitaal-extra | ❌ | |
| abo-compleet | ❌ | |
| 🆕 | logo-vertical-icon-name-inverse | |
| DS | plus-icon | plus-icon |
| plus-icon-inverse | plus-icon-inverse | |
| plus-icon-name | plus-icon-name | |
| plus-icon-name-inverse | plus-icon-name-inverse | |
| plus-brand-square-gva | plus-logo-square-gva | |
| plus-brand-square-hbvl | plus-logo-square-hbvl | |
| plus-brand-square-nb | plus-logo-square-nb | |
| plus-brand-square-dg | plus-logo-square-dg | |
| plus-brand-square-ds | plus-logo-square-ds | |
| plus-wknd | plus-wknd | |
| plus-digi | plus-digi | |
| plus-full | plus-full | |
| plus-26 | plus-26 | |
| plus-basic | plus-basic | |
| brand-square-main | logo-square-main | |
| brand-sponsored-content | logo-sponsored-content | |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-square-icon | logo-square-main | |
| brand-plus-white | logo-premium-main-inverse | |
| brand-plus | logo-premium-main | |
| brand-plus-main | logo-premium-main | |
| brand-name-white | logo-main-inverse | |
| brand-main | logo-main | |
| brand-icon | logo-icon | |
| brand-icon-white | logo-icon-inverse | |
| audio | ❌ | |
| abo-super | ❌ | |
| abo-snel | ❌ | |
| abo-slim | ❌ | |
| abo-digitaal | ❌ | |
| DVN | brand-square-main | logo-square-main |
| brand-square-icon | logo-square-main | |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-plus-main | logo-premium-main | |
| brand-name-horizontal-white | logo-main-inverse | |
| brand-name-horizontal | logo-main | |
| brand-main | logo-main | |
| FRD | brand-main-inverse | logo-main-inverse |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| GE, HD, LD, NHD, YC | brand-square-main | logo-square-main |
| brand-sponsored-content | logo-sponsored-content | |
| brand-plus-main | logo-premium-main | |
| brand-plus-long | logo-premium-long | |
| brand-main | logo-main | |
| brand-main-inverse | logo-main-inverse | |
| 🆕 | logo-premium-long | |
| GVA | abo-digitaal | ❌ |
| abo-slim | ❌ | |
| abo-snel | ❌ | |
| abo-super | ❌ | |
| brand-icon-inverse | logo-icon-inverse | |
| brand-icon-newspaper | ❌ | |
| brand-icon-white | logo-icon-inverse | |
| brand-icon | logo-icon | |
| brand-main | logo-main 💫 | |
| brand-name-white | logo-name-inverse 💫 | |
| brand-name | logo-name | |
| brand-plus-main | logo-premium-main | |
| brand-plus | logo-premium-main | |
| brand-square-icon-name-horizontal-white | logo-main-inverse | |
| brand-square-icon-name-horizontal | logo-main | |
| brand-square-icon-name-vertical | ❌ | |
| brand-square-icon-white | logo-square-main-inverse 💫 | |
| brand-square-icon | logo-square-main 💫 | |
| brand-square-main | logo-square-main 💫 | |
| plus-26 | plus-26 | |
| plus-basic | plus-basic | |
| plus-brand-square-dg | plus-logo-square-dg | |
| plus-brand-square-ds | plus-logo-square-ds | |
| plus-brand-square-gva | plus-logo-square-gva | |
| plus-brand-square-hbvl | plus-logo-square-hbvl | |
| plus-brand-square-nb | plus-logo-square-nb | |
| plus-digi | plus-digi | |
| plus-full | plus-full | |
| plus-icon-inverse | plus-icon-inverse | |
| plus-icon-name-inverse | plus-icon-name-inverse | |
| plus-icon-name | plus-icon-name | |
| plus-icon | plus-icon | |
| plus-wknd | plus-wknd | |
| HBVL | abo-digitaal | ❌ |
| abo-slim | ❌ | |
| abo-snel | ❌ | |
| abo-super | ❌ | |
| abo-weekend | ❌ | |
| brand-icon-abbreviation-horizontal | logo-main 💫 | |
| brand-icon-news | ❌ | |
| brand-icon-newspaper | ❌ | |
| brand-icon | logo-icon | |
| brand-main | logo-main 💫 | |
| 🆕 | logo-main-inverse | |
| brand-name-white | logo-name-inverse | |
| brand-name | logo-name | |
| brand-plus-main | logo-premium-main | |
| brand-plus | logo-premium-main | |
| brand-square-icon-name-horizontal | logo-main 💫 | |
| brand-square-icon | logo-square-main | |
| brand-square-main | logo-square-main | |
| plus-26 | plus-26 | |
| plus-basic | plus-basic | |
| plus-brand-square-dg | plus-logo-square-dg | |
| plus-brand-square-ds | plus-logo-square-ds | |
| plus-brand-square-gva | plus-logo-square-gva | |
| plus-brand-square-hbvl | plus-logo-square-hbvl | |
| plus-brand-square-nb | plus-logo-square-nb | |
| plus-digi | plus-digi | |
| plus-full | plus-full | |
| plus-icon-inverse | plus-icon-inverse | |
| plus-icon-name-inverse | plus-icon-name-inverse | |
| plus-icon-name | plus-icon-name | |
| plus-icon | plus-icon | |
| plus-wknd | plus-wknd | |
| HCO | brand-main-inverse | logo-main-inverse |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| HUB | brand-square-white | logo-square-main-inverse |
| brand-square-main | logo-square-main | |
| brand-plus-main | logo-premium-main | |
| brand-name-white | logo-main-inverse | |
| brand-main | logo-main | |
| INDO | brand-square-main | logo-square-main |
| brand-square-icon | logo-square | |
| brand-square-icon-white | logo-square-inverse | |
| brand-plus-main | logo-premium-main | |
| brand-main | logo-main | |
| brand-icon-white | logo-icon-inverse | |
| brand-icon | logo-icon | |
| brand-icon-name-horizontal | logo-main | |
| brand-icon-name-horizontal-white | logo-main-inverse | |
| brand-icon-inverse | logo-icon-inverse | |
| LCD | brand-square-main | logo-square-main |
| brand-square-main-inverse | logo-square-main-inverse | |
| brand-plus-main | logo-premium-main | |
| brand-main | logo-main | |
| brand-main-inverse | logo-main-inverse | |
| brand-icon | logo-icon | |
| brand-icon-inverse | logo-icon-inverse | |
| LT | brand-square-main | logo-square-main |
| brand-plus-main | logo-premium-main | |
| brand-rectangle-name | ❌ | |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-main | logo-main | |
| brand-name-white | logo-main-inverse | |
| brand-icon | logo-icon | |
| brand-icon-white | logo-icon-inverse | |
| LW | brand-square-main | logo-square-main |
| brand-plus-main | logo-premium-main | |
| brand-rectangle-name | ❌ | |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-main | logo-main | |
| brand-name-white | logo-main-inverse | |
| brand-icon-white | logo-icon-inverse | |
| brand-icon | logo-icon | |
| MCO | brand-main-inverse | logo-main-inverse |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| MH | brand-square | logo-icon |
| brand-square-main | logo-square-main | |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-icon-white | logo-icon-inverse | |
| brand-icon | logo-icon | |
| brand-letter | logo-main | |
| brand-icon-name-horizontal-white | logo-main-inverse | |
| brand-icon-name-horizontal | logo-main | |
| NB | sub-logo-icon-dg | sub-logo-icon-dg |
| plus-wknd | plus-wknd | |
| plus-icon-name-inverse | plus-icon-name-inverse | |
| plus-icon-name | plus-icon-name | |
| plus-icon | plus-icon | |
| plus-digi | plus-digi | |
| plus-full | plus-full | |
| plus-icon-inverse | plus-icon-inverse | |
| plus-brand-square-nb | plus-logo-square-nb | |
| plus-brand-square-ds | plus-logo-square-ds | |
| plus-brand-square-gva | plus-logo-square-gva | |
| plus-brand-square-hbvl | plus-logo-square-hbvl | |
| plus-brand-square-dg | plus-logo-square-dg | |
| plus-26 | plus-26 | |
| plus-basic | plus-basic | |
| brand-square-icon | logo-square | |
| brand-square-main | logo-square-main | |
| brand-rectangle-icon-name-horizontal | logo-main | |
| brand-square-icon-name-vertical | ❌ | |
| brand-rectangle-icon-name-horizontal-white | logo-main-inverse | |
| brand-plus-main | logo-premium-main | |
| brand-name | ❌ | |
| brand-main | logo-main | |
| brand-name-white | ❌ | |
| brand-icon-white | logo-icon-inverse | |
| brand-icon | logo-icon | |
| brand-icon-name-vertical | logo-square-main-inverse | |
| brand-icon-newspaper | ❌ | |
| abo-super | ❌ | |
| abo-snel | ❌ | |
| abo-slim | ❌ | |
| abo-digitaal | ❌ | |
| NOF | brand-main | logo-main |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| NOS | brand-main-inverse | logo-main-inverse |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| SCO | brand-main-inverse | logo-main-inverse |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| STW | brand-main-inverse | logo-main-inverse |
| brand-main | logo-main | |
| brand-plus-main | logo-premium-main | |
| brand-square-main | logo-square-main | |
| SW | brand-square-main | logo-square-main |
| brand-plus-main | logo-premium-main | |
| brand-name-white | logo-main-inverse | |
| brand-main | logo-main | |
| TC | brand-square-main | logo-square-main |
| brand-rectangle-name | ❌ | |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-name-white | logo-main-inverse | |
| brand-name | logo-name | |
| brand-plus-main | logo-premium-main | |
| brand-icon-white | logo-icon-inverse | |
| brand-icon | logo-icon | |
| brand-main | logo-main | |
| TEL | brand-square-main | logo-square-main |
| brand-square-icon | logo-square-main | |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-plus-main | logo-premium-main | |
| brand-name-white | logo-main-inverse | |
| brand-name | logo-main | |
| brand-main | logo-main | |
| VL | brand-square-main | logo-square-main |
| brand-square-icon-white | logo-square-main-inverse | |
| brand-square-icon | logo-square-main | |
| brand-plus-white | logo-premium-main-inverse | |
| brand-plus | logo-premium-main | |
| brand-plus-main | logo-premium-main | |
| brand-name-white | logo-main-inverse | |
| brand-name | logo-main | |
| brand-main | logo-main | |
| WL | brand-square-icon | ❌ |
| brand-square-icon-inverse | ❌ | |
| brand-square-icon-name-horizontal-inverse | ❌ | |
| brand-square-icon-name-horizontal | ❌ | |
| brand-plus-long | logo-premium-long | |
| brand-plus-main | logo-premium-main | |
| brand-name-inverse | logo-main-inverse | |
| brand-name | logo-main | |
| brand-main | logo-main | |
| brand-plus-inverse | logo-premium-main-inverse | |
| brand-icon-name-vertical | ❌ | |
| brand-icon-name-vertical-inverse | ❌ | |
| abo-snel | ❌ | |
| abo-slim | ❌ | |
| abo-digitaal | ❌ |
React
This section details the breaking changes for chameleon-react introduced with version 6.0.0.
Developers are encouraged to review these changes carefully and adjust their codebases accordingly to ensure compatibility.
Property Changes
-
Image Aspect Ratio Update:
- The
imageAspectRatioproperty has been moved toimageOptions.aspectRatiowithin theDefaultTeaserandTextOnImageTeaser. The functionality remains the same. Update references to this property accordingly.
- The
-
AccordionItem Focus Adjustment:
- The misspelled
focussedproperty has been removed fromAccordionItem. Use the correctedfocusedproperty instead. The functionality remains unchanged.
- The misspelled
-
Table Alignment:
- The
textAlignproperty onTablehas been removed. Continue to manage text alignment using thetextAlignproperty within thecolumnsobject of the table.
- The
Updated Peer-Dependencies
- Dependencies Upgrade:
date-fnsversion requirement has been updated from>=2.27.0to>=v3.6.0.reactversion requirement has been updated from>=v16.14.0to>=v18.2.0.
Deprecated Features Removed
-
Locale Handling:
- The
getLocalefunction has been removed from thelocaleexport. UsedefaultLocaleor specify the locale directly to replace this functionality.
- The
-
Accordion Import Change:
AccordionItemis no longer available from theAccordionexport. ImportAccordionItemdirectly from its new main import location.
Importing of Icons/Logos/Illustrations
Significant updates have been made to our icon, logo, and illustration libraries to streamline and harmonize our asset portfolio. As a result:
- Some assets have been renamed or removed entirely.
- Ensure that you replace any references to outdated assets with the updated names or alternatives provided in the Assets unification section.
- Directly remove references to assets that no longer exist and adjust your implementation accordingly.
For a detailed guide on the new asset names and the removals, please refer to the Assets unification section. This documentation is crucial for maintaining visual consistency across your projects and leveraging our updated design language.
Further Assistance
For additional support during your migration process, please reach out to our technical support team. We are here to assist you in updating your application or project to align with the new version requirements.
Kotlin
Remove ChCard component.
Api changes
- We wanted to align the Native api's for Kotlin and Swift more so there are name changes. The old
SubThemeis now calledSubThemeStorebecause the name is more suitable as it stores tokens for a certain SubTheme. - There is still a SubTheme class but now it acts more as a SubTheme and it has 2 types
EmbeddedandCustom. Embeddedis used for all the subthemes that exist for the brands in Chameleon (default, sport, ...)Customis used to register custom subthemes on themes to override the values certain tokens.- The
ChameleonThemedcomposable api also changed to
ChameleonThemed
- Replaced
SubTheme.keywithSubTheme - Added
StyleContextwhich acts as a wrapper for a combination of subtheme, windowsizeclass and colorScheme
//replace
@Composable
fun ChameleonThemed(
theme: ChameleonTheme = TC.theme,
subThemeKey: SubTheme.Key = TC.subThemeKey,
darkTheme: Boolean = isSystemInDarkTheme(),
richContentParsingEnabled: Boolean = TC.richContentParsingEnabled,
content: @Composable () -> Unit
)
//with
@Composable
fun ChameleonThemed(
theme: ChameleonTheme = TC.theme,
subTheme: SubTheme = TC.subTheme,
colorScheme: ColorScheme = TC.colorScheme,
windowSizeClass: WindowSizeClass = TC.windowSizeClass,
richContentParsingEnabled: Boolean = TC.richContentParsingEnabled,
content: @Composable () -> Unit
)
//or
@Composable
fun ChameleonThemed(
theme: ChameleonTheme = TC.theme,
styleContext: StyleContext = StyleContext(TC.subTheme, TC.colorScheme, TC.windowSizeClass),
richContentParsingEnabled: Boolean = TC.richContentParsingEnabled,
content: @Composable () -> Unit
)
Register Subthemes
- You will find token groups on
SubThemeStoreinstead of onSubTheme - Uses SubThemes instead of SubTheme.Key (see more info in SubTheme section)
V5
TC.registerSubTheme(
subThemeKey = SubTheme.Key("zephr1", false),
theme = ChameleonTheme.Wl,
darkMode = false,
keyPath = keyPath(SubTheme::colors),
tokens = colors
)
V6
TC.registerSubTheme(
subTheme = SubTheme.Custom("zephr1"),
theme = ChameleonTheme.Wl,
colorScheme = ColorScheme.LIGHT,
keyPath = keyPath(SubThemeStore::colors),
tokens = colors
)
SubThemes
- Replace
SubTheme.Key()everywhere withSubTheme.Custom()for custom subthemes - Replace
SubTheme.Key()everywhere withSubTheme.Embedded()for chameleon subthemes
//Existing subthemes
//replace
SubTheme.Key.defaultLight
//with
SubTheme.Embedded(SubThemeName.Default)
//Custom SubThemes subthemes
//replace
SubTheme.Key("custom", false)
//with
SubTheme.Custom("custom")
SubTheme.Embedded(SubThemeName.Default)
We now have SubTheme.embedded (defaults, sport,…) and SubTheme.custom (everything you want)
Autoregister is replaced by bootstrap
Themes will now be bootstrapped with the bootstrap function instead of with the autoRegister function
- Replace
autoregister()everywhere withbootstrap() - Replace
TC.autoRegister =everywhere withTC.bootstrap =
Swift
-
Remove
ChCardcomponent. -
SubThemeis now an enum and no longer requires keyPaths. This should reflect more that most sub-theme's are embedded in theChameleonTheme<#x#>library but that a team can create there own custom sub-theme. Most of the time you create a subTheme using the initializertry SubTheme(name: "sponsored-content")which will let you know if the sub-theme is valid for the current theme. Steps to migrate:- Find and replace all
SubTheme.Kind.keyPath(\withSubTheme.embedded(\orSubTheme.Kind.string(\withSubTheme.custom(\See the documentation inSubTheme. - If you use custom sub-themes then the sub-theme name has become a struct instead of a string. It adopts
ExpressibleByStringInterpolationso you can instantiate it with a string. But it will warn you if the name is a embedded name. In cases where you have avar name: String = "sub-theme name"use the name aslet subTheme: SubTheme = .custom("\(name)")wrapping it is needed do to it no longer being aStringtype.
- Find and replace all
-
Find and replace all
ColorValuewithRGBAColorto align with Kotlin names and avoid confusion.ColorValueis now deprecated. -
TC.setSubThemeis removed as it caused issues with leaking subTheme changes outside of sdk/app boundaries. You should wrap every token resolution intocamouflage(context) { TC.shared.someToken() }or consider moving to the newChameleon.Styleapi. -
Due to conflicts and too many loads the autoRegister is removed in favour of manual bootstrap. This means that the app should call
ChameleonTheme<X>.bootstrap()manually. See theswift-componentreadme for more info. -
In previews you can now uses the
view.styleChameleonAll()andview.styleComponents()to style the components. The latter will also be used in the sdk/app entrypoint to style the app. You should move away from setting theview.environment(\.theme, .wl)or others to style the app but use the styling functions. For now the environment keeps working but as the components will move to the new styling this will only work if you change the environment in the parent view of the view where you call the styling funcion, like in an sdk enty point. This is is to avoid redundant lookups on the token container and improve performance. -
ChameleonAll/boostrapAll()has been removed due to performance issues. Useview.styleChameleonAll()instead which bootstraps the theme lazily only when needed instead of preloading all up front.
App startup and styling
This add's to V6 the removal of autoRegister in favour of manual bootstrap. It also add a reusable Style to Chameleon that can be used to style components.
In code these changes have 3 main consequences
- app startup should call bootstrap manually
ChameleonTheme<X>.bootstrap() - the entrypoint of sdk/app (main ContentView) should load the style
view.styleComponents() - when styling the app/skd/block the context should be passed to the custom style function for the app/sdk or the reuse the components style function
view.styleComponents(subTheme: .embeded(.sport))
Writing previews
Previously it was hard to write previews. This will improve via the styling introduced in V6. The roadmap
5.12.0
Swift
-
Remove
ChCardcomponent. -
SubThemeis now an enum and no longer requires keyPaths. Find and replace allSubTheme.Kind.keyPath(\withSubTheme.embedded(\orSubTheme.Kind.string(\withSubTheme.custom(\See the documentation inSubTheme. -
Find and replace all
ColorValuewithRGBAColorto align with Kotlin names and avoid confusion.ColorValueis now deprecated.
5.12.0
Swift
The following migration steps are suggestions to do already now to be compatible with the upcoming 6.0.0 release. But they are not required for the 5.10.1 release.
Tip: Optional tokens are tokens that refer to an optional value. They are used on the token container =
TCto register a value per subTheme. They are used internally and hence are now removed from the public api. The main used is in theDynamicLoader.
-
Library
ChameleonPromisedwas removed as it is integrated intoChameleon. RemoveChameleonPromisedfrom your dependencies in xcode or your package manager swift file. Everywhere youimport ChameleonPromiseduseimport Chameleon -
Optional tokens on
TCand optional groups onTCDynamiclikeTC.shared._<#some token name#>andTCDynamic()._<#some group name#>are now hidden from the api. This improves the code completion and build time significantly. Hense typingTC.shared.color...will now show available tokens not duplicated with the irrelevant optional tokens. If however you need to access the optional tokens you can change the import to@_spi(ChameleonTokenOptional) import Chameleon.
5.9.0
kotlin
- subTheme keys now all start with lowercase so they are conform with "default"
- e.g. SubTheme.key.name for Sport will be "sport"
- e.g. SubTheme.key.name for SponsoredContent will be "sponsoredContent"
//Shouldn't use it this way but if you do it changes from
val sponsoredContentLight = SubTheme.Key(name = "sponsoredContent", false)
//into the following
val sponsoredContentLight = SubTheme.Key(name = "SponsoredContent", false)
//You should only use the constructor for SubTheme.Key when you want to create a custom Subtheme.
//By doing this you can avoid problems when the api changes
//If you use subthemes like default, sport, sponsoredcontent use the provided subthemes
SubTheme.key.defaultLight
SubTheme.key.sportLight
SubTheme.key.sponsoredContentLight
SubTheme.key.defaultDark
SubTheme.key.sportDark
SubTheme.key.sponsoredContentDark
Swift
- chameleon legacy split
- colorScheme case
.systemremoved
ColorScheme .system removed
- Mostly follow the deprecation warnings in Xcode
- Replace
.systemwith.lightor.darkdepending on the context - find replace .factory(.light) -> ""
.color()->.drawable- equality of the colorvalue is now based on the hex value instead of the id, this should not have impact.
ChameleonLegacy split
This update moves the ChameleonLegacy library and its themes to a new swift package named chameleon-swift-tokens-legacy.
Impact Analysis:
Affected Projects: Projects using the ChameleonLegacy library. Unaffected Projects: Projects not using any legacy libraries or specific ChameleonTheme enum cases. These will only need a version number update.
Required Actions:
Xcode Configuration:
- Navigate to
Xcode project > Settings > Swift Packages.
- Add chameleon-swift-tokens-legacy with URL git@gitlab.mediahuisgroup.com:frontend/chameleon-swift-tokens-legacy.git and version 5.8.0.
- CI System Update: Request access from the chameleon team for your deploy key to access the new swift package.
- Code Changes: Update ChameleonTheme enum cases to reflect the new structure, e.g., replace instances of ChameleonTheme.wlLegacy with ChameleonLegacy.ChameleonTheme.wlLegacy.
Testing:
Run all tests as usual to ensure stability and functionality.
5.0.0
Our 5.0.0 release contains some breaking changes for chameleon-kotlin. Take the following steps to ensure a proper migration:
TC.themeBootstrapperhas been removed and has been replaced by the following :
TC.bootstrapFontFamilyTypefaceRegistry = ::chameleonAllTypeFaceRegister
TC.autoRegister = ::chameleonAllAutoRegister
- Retrieving token groups (
RGBAColorGroup,BorderGroup, etc...) has changed
old
bootstrapBorderGroup(
theme: ChameleonTheme = ChameleonTheme.Wl,
subTheme: String, isDarkTheme: Boolean
)
bootstrapRGBAColorGroup(
theme: ChameleonTheme = ChameleonTheme.Wl,
subTheme: String, isDarkTheme: Boolean
)
new
registeredSubThemes[theme]?.get(SubTheme.Key.defaultLight)?.colors?.group
registeredSubThemes[theme]?.get(SubTheme.Key.defaultLight)?.border?.group
4.0.0
Migrate to new design tokens
We have completely refactored our design tokens. Everything has been renamed and shuffled around, new tokens have been added and others have been removed.
chameleon-react
Every chameleon-react component now uses the new tokens.
System props
A major change going forward, is the removal of all system props. This was needed/preferred due to the way our new design tokens are set up. That means you can no longer add color, bgColor, p, m, borderColor, and the whole shebang of other props on each and every component.
To migrate, we propose using CSS and CSS classes in conjunction with CSS custom properties, but of course, you do you!
Component updates
<Avatar />:circularprop has been removedsizeprop possible values have been renamed:['small', 'medium', 'large', 'xLarge']is now['sm', 'md', 'lg', 'xl']
<Box />component has been removed. This was mostly a vessel for system props, so it has been removed.<BrandedHeading />:appearanceprop has been removedactionprop has been split up inactionUrlandactionLabel. You can no longer pass a component.sizeprop possible values have been renamed:['small', 'large']is now['sm', 'lg']
<Button />:appearanceprop possible values have changed from['primary', 'secondary', 'plain', 'outline']to['default', 'primary', 'secondary', 'tertiary']. The default value has changed fromprimarytodefault.sizeprop possible values have been renamed:['small', 'large']is now['sm', 'lg']
<Caption />:levelprop has been renamed tosize, values are:['sm', 'lg']fontFamilyprop has been renamed tofont, values are:['default', 'alt']fontWeightprop has been renamed toweight, values are:['default', 'strong']colorprop now accepts only kebabcased token names (also note that tokens have been renamed ofcourse)
<DatePicker>:- Underlying dependency has been updated to the new
react-day-pickerversion 8.x.x. More information can be found in the react-day-picker documentation.
- Underlying dependency has been updated to the new
<DateTime />:- The dateTime formats have been updated to comply with the
date-fnslogic, replacing the previousdayjscompatibility. More information can be found in the date-fns formats documentation. - A new
localeprop has been added which allows users to input a locale-file for customized locale configuration. - A new
timeZoneprop has been introduced, enabling users to define the timezone, thereby ensuring consistency between server-side and client-side rendering.
- The dateTime formats have been updated to comply with the
<Divider />:colorprop has been removed
<Flex />:- This component has been removed. Use the
<Stack />component instead.
- This component has been removed. Use the
<Heading />:sizeprop has been added, possible values are:['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'display']levelprop default value has been changed from1to2colorprop now accepts only kebabcased token names (also note that tokens have been renamed ofcourse)
<Icon />:sizeprop possible values have been renamed:['small', 'medium', 'large', 'xLarge']is now['sm', 'md', 'lg', 'xl']colorprop now accepts only kebabcased token names (also note that tokens have been renamed ofcourse)
<IconButton />:appearanceprop possible values have changed from['default', 'primary', 'secondary', 'plain', 'outline']to['default', 'primary', 'secondary', 'tertiary'].sizeprop possible values have been renamed:['small', 'large']is now['sm', 'lg']colorprop has been removed
<LinkText />:brandedprop has been removed
<ListItem />:- The
iconColorprop is removed. You can supply a color on the passed<Icon />component.
- The
<Loader />:sizeprop possible values have been renamed:['small', 'medium', 'large', 'xLarge', 'xxLarge']is now['sm', 'md', 'lg', 'xl', '2xl']
<Paragraph />:sizeprop has been added, possible values are:['sm', 'lg']fontFamilyprop has been renamed tofont, values are:['default', 'alt']fontWeightprop has been renamed toweight, values are:['default', 'strong']colorprop has been added
<Text />component has been removed. Use<Paragraph />,<Heading />or<Caption />instead<WideList />:avatarCircularprop has been removedelevationprop has been removed
chameleon-theme-*
- Design tokens are exported differently from before.
- For CSS: you just need to import
/lib/tokens/css/tokens.cssand/lib/tokens/css/tokens-custom-media.css(chameleon-reactdoes this for you) - For JSON, JS or SCSS there are different sets of tokens. Each theme includes a
defaulttokenset. On top of that themes (will) have a :darktokenset that overwrites some tokens for darkmodedesktoptokenset for overwrites for larger screenssubthemes/*tokenset for overwrites for any subthemes a brand may have. (for example: a brand could have a "sport" subtheme)
- For CSS: you just need to import
- Exports have been shuffled around a bit. For reference: this is the (relevant part of the) export map of each theme package
"exports": {
"./*": "./*",
...
"./tokens": {
"types": "./lib/tokens/js/default.d.ts",
"require": "./lib/tokens/js/default.js",
"import": "./lib/tokens/js/default.js",
"sass": "./lib/tokens/scss/default.scss",
"style": "./lib/tokens/css/tokens.css"
},
"./tokens/js/css-custom-properties": {
"require": "./lib/tokens/js/css-custom-properties.js",
"import": "./lib/tokens/js/css-custom-properties.js"
},
"./tokens/*": {
"types": "./lib/tokens/js/*.d.ts",
"require": "./lib/tokens/js/*.js",
"import": "./lib/tokens/js/*.js",
"sass": "./lib/tokens/scss/*.scss",
"style": "./lib/tokens/css/*.css"
},
"./icons": "./lib/icons.js",
"./illustrations": "./lib/illustrations.js",
"./logos": "./lib/logos.js",
"./fonts/*": "./lib/fonts/fonts/*",
"./fonts.css": "./lib/fonts/fonts.css"
},
Upgrade to v4 but keep using v3 tokens, components and component props
If you would like to upgrade to v4 without migrating to the new design token setup, we’ve provided a way for you to keep using chameleon.
This approach could be useful to you as we will keep fixing bugs for this (but no new features will be added).
- The
chameleon-reactfromv3has been renamed tochameleon-react-legacy. Rename the package in your dependencies. - add the
legacyflag to yourchameleon-postcss-pluginPostCSS configuration:
require('@mediahuis/chameleon-postcss-plugin')({
theme: chameleonTheme,
legacy: true,
});
- the current exports of theme packages will be placed under
legacy/*. For example:
import { Checkmark } from '@mediahuis/chameleon-theme-wl/icons';
import { space5 } from '@mediahuis/chameleon-theme-wl';
needs to be updated to:
import { Checkmark } from '@mediahuis/chameleon-theme-wl/legacy/icons';
import { space5 } from '@mediahuis/chameleon-theme-wl/legacy/web/tokens.js';
- in theme packages, everything under the
lib/folder has been moved to thelib-legacy/folder. - For reference: this is the (relevant part of the) export map of each theme package
"exports": {
...
"./legacy/*": "./lib-legacy/*",
"./legacy/icons": "./lib-legacy/web/icons.js",
"./legacy/illustrations": "./lib-legacy/web/illustrations.js",
"./legacy/logos": "./lib-legacy/web/logos.js",
"./legacy/tokens": {
"types": "./lib-legacy/web/tokens.d.ts",
"require": "./lib-legacy/web/tokens.js",
"import": "./lib-legacy/web/tokens.js",
"sass": "./lib-legacy/web/tokens.scss",
"style": "./lib-legacy/web/tokens.css"
},
"./legacy/fonts/*": "./lib-legacy/web/fonts/*",
"./legacy/fonts.css": "./lib-legacy/web/fonts.css",
...
},
You should rename any relevant paths in your application to reflect the new locations.
chameleon-swift
Swift tokens are still available in the repo Front-end / chameleon-swift · GitLab but the Package.swift has some new products.
Chameleon: new tokens and structure. You can find more info in the published package underDemo/v4.md.ChameleonLegacy: depends onChameleonso it has a new structure but maintains the old tokens.ChameleonPromised: a new product that contains the tokens as a promise. This is useful when building a component libraryChameleonAll: This contains the new tokens as well as the now legacy tokens. Use the same function as beforebootstrap(theme: .<#theme#>)to get the new tokens. To get the legacy tokens, suffix the theme withLegacy. So for examplebootstrap(theme: .wlLegacy)will give you the legacy tokens.
Note: Also see chameleon-swift/Package.swift
Besides these structural changes there are also changes to how you would configure your target. Details about that setup can be found in the readme of getting started/swift.
In detail
To make the switch to V4 less painful (but still requiring work) you should include ChameleonLegacy in your project first and only then migrate to Chameleon afterwards.
- [Breaking] The
ChameleonThemeenum has a legacy alternative for every brand. If you switch onChameleonThemevalues make sure to add the legacy value too everywhere. - Some types where moved to
Chameleonand some toChameleonLegacy. It is likely that in your code where you importChameleonyou now have to importChameleonLegacytoo. ColorAssetwas available (but unused) inChameleon. It is no longer available inChameleon(except in tests).
** Factory 2.0 ** See hmlongco/Factory: 2.0
ChameleonLegacy
- Factory 2.0 required some major change. All global factories per type, like
colorFactory, are no longer available. You should change them from@injected(colorFactory)to@injected(\.color)and fromcolorFactory()toContainer.shared.color() - protocol
ChameleonLegacy.Bootstraphas been removed in favor of Factory 2.0 feature to autoRegister, hence in your code you can also remove the call tobootstrap(), the registration of the correct factories is now automatic.- This also means you can remove the ChameleonBootstrap plugin in the app targets build phase
- Instead, in your appdelegate (which is specific for the chosen theme) you have to import the picked theme once. This will then load the dynamic properties (but you do not have to use anything of from that import). See the demo app for more info.
- The theme that used to be accessible via bootstrap is now available as an extension on Container so you can use it
@injected(\.theme) var theme: ChameleonThemeorCamo.shared.theme() - [major]
ChameleonContainerno longer exists as there is no real use for it anymore.
To migrate to Chameleon you should:
- Check the designs in figma if they are using the tokens from
Chameleonand find out if there tokens for the component you are building - Import the
ChameleonTheme<#x#>once in your theme target. It will then autoRegister the tokens. - Remove the import of
ChameleonLegacyand maintainChameleon - Use one of the available property wrappers to get the token.
struct Foo: View {
@Color(\.primaryBase) var primaryBase
@Token(\.paddingForButton) var padding: Pixel
}- [not advisable] If you use strings, use the dynamic path via
let color: ColorValue = TC.shared.tcDynamic()[dynamicMember: "token name"]
- [not advisable] If you use strings, use the dynamic path via
- [Optional] if you need to use a subtheme, wrap the view creation in
camouflage(\.sport) { Foo()}
Tip: Take a look at the various demo apps/libs to see how they are using the new tokens.
3.0.0
3.0.0 is a pretty big new major version with lots of (breaking) changes.
The rename
One of the biggest breaking changes is the renaming of some of our
chameleon-theme-* packages. This is the full list of the theme packages that
have been renamed.
chameleon-theme-gva-summer-2020->chameleon-theme-gvachameleon-theme-hbvl-summer-2020->chameleon-theme-hbvlchameleon-theme-hmc-ge->chameleon-theme-gechameleon-theme-hmc-hd->chameleon-theme-hdchameleon-theme-hmc-ld->chameleon-theme-ldchameleon-theme-hmc-nhd->chameleon-theme-nhdchameleon-theme-hmc-yc->chameleon-theme-ycchameleon-theme-nb->chameleon-theme-nb-legacychameleon-theme-nb-winter-2021->chameleon-theme-nbchameleon-theme-swcom->chameleon-theme-swchameleon-theme-wort-de->chameleon-theme-lwchameleon-theme-wort-en->chameleon-theme-ltchameleon-theme-wort-pt->chameleon-theme-cochameleon-theme-wort-tc->chameleon-theme-tc
To migrate: rename these packages in your dependencies
chameleon-react
The breaking changes in our React components are:
AutoComplete
The already deprecated onSuggestionSelected prop is now removed.
To migrate: use the onSelect prop instead
Choice
The caption prop has been renamed to message.
To migrate: Update your implementations from <Choice caption="..." /> to
<Choice message="..." />
IconButton
The already deprecated name prop is now removed
To migrate: Update your implementations from <IconButton name="..." /> to
<IconButton icon={...} />
Image
The already deprecated <Image /> component is now removed
To migrate: Use the native HTML <img /> tag.
DatePicker
We fixed the readOnly prop on <DatePicker />: it was only limiting the
manual input on the input field, but edits made through the picker dialog were
still possible. Setting the readOnly prop now creates a 100% read-only input.
The previous behavior is moved to a new pickerInputOnly prop.
To migrate: Do nothing, unless you really want the old readOnly behavior.
In that case, update your implementations from <DatePicker readOnly /> to
<DatePicker pickerInputOnly />
WideList
The clickable prop no longer adds a <ChevronForward /> icon by default to
show that it is clickable.
To migrate: Update your implementations from <WideListItem clickable /> to
<WideListItem clickable iconRight={ChevronForward} />
The icon prop is removed and 2 new props are added: iconLeft and
iconRight.
To migrate: Update your implementations from <WideListItem icon={Add} />
to <WideListItem iconLeft={Add} /> or
<WideListItem iconLeft={<Icon as={Add} />} />
The iconColor prop is removed.
To migrate: Update your implementations from
<WideListItem icon={Add} iconColor="primaryBase" /> to
<WideListItem iconLeft={<Icon as={Add} color="primaryBase" />} />
chameleon-swift
Starting with this release, we provide an implementation created specifically
for Swift. The lib/ios folder in each chameleon-theme-* NPM package has been
deleted.
To migrate: Use the dedicated chameleon-swift package.
2.0.0
We’ve completely overhauled our CSS architecture in chameleon-react and now
use vanilla CSS instead of SCSS. This also means we now use CSS Custom
Properties instead of SCSS variables! (An SCSS output of all design tokens still
remains available for you to use for the time being.) To be able to use it, you
now have to include a little
PostCSS configuration
to make it work.
Components
- The
<Fonts />component has been removed. Please import@mediahuis/chameleon-theme-wl/lib/web/fonts.cssinstead of using this component. - The
<Reset />component has been removed. Please import@mediahuis/chameleon-resetinstead of using this component.
1.13.0
Components
- The
<Fonts />component has been removed. Please import@mediahuis/chameleon-theme-wl/lib/web/fonts.cssinstead of using this component. - The
<Reset />component has been removed. Please import@mediahuis/chameleon-resetinstead of using this component.
1.9.0
Components
Import @mediahuis/chameleon-reset instead of using this component. For more information see: chameleon-reset
1.8.0
Components
Autocomplete
<AutoComplete onSuggestionSelected={e => console.log(e.target.value)} /> -> <AutoComplete onSelect={selectedItem => console.log(selectedItem)} />
1.7.0
Components
Illustration
Import the used illustration from chameleon-theme-wl/illustration. Replace
name with as (the imported illustration).
import { PageNotFound } from '@mediahuis/chameleon-theme-wl/illustrations;'
<Illustration name="PageNotFound" /> -> <Illustration as={PageNotFound} />
1.5.0
Components
Icon
Import the used icon from chameleon-theme-wl/icons. Replace name with as (the
imported icon).
import { Add } from '@mediahuis/chameleon-theme-wl/icons;'
<Icon name="Add" /> -> <Icon as={Add} />
IconButton
Import the used icon from chameleon-theme-wl/icons. Replace name with icon
(the imported icon).
import { Add } from '@mediahuis/chameleon-theme-wl/icons;'
<IconButton name="Add" /> -> <IconButton icon={Add} />
Button
Import the used icon from chameleon-theme-wl/icons. Replace iconLeft and
iconRight with the imported icon.
import { Add } from '@mediahuis/chameleon-theme-wl/icons;'
<Button iconLeft="Add" iconRight="Add" /> -> <Button iconLeft={Add} iconRight={Add} />
TextField, Select
Import the used icon from chameleon-theme-wl/icons. Replace iconLeft with the
imported icon.
import { Add } from '@mediahuis/chameleon-theme-wl/icons;'
<TextField iconLeft="Add" /> -> <TextField iconLeft={Add} />
<Select iconLeft="Add" /> -> <Select iconLeft={Add} />
AutoComplete, ListItem, WideListItem
Import the used icon from chameleon-theme-wl/icons. Replace icon with the
imported icon.
import { Add } from '@mediahuis/chameleon-theme-wl/icons;'
<AutoComplete icon="Add" /> -> <AutoComplete icon={Add} />
<WideListItem icon="Add" /> -> <WideListItem icon={Add} />
<ListItem icon="Add" /> -> <ListItem icon={Add} />
1.0.0
Components
AutoComplete
- Switched to a controlled component. This means that the
valueprop is now required but can thus be cleared if needed. - Removed
defaultValueprop as this is now controlled byvalue.
Checkbox
- Removed
experimentalLabelPropsin favor oflabelProps.
Dialog
- Renamed
closeButtonLabeltoaccessibilityLabelCloseButton.
Fieldset
- Removed
formIdin favor of the nativeformprop.
IconButton
- Renamed
labeltoaccessibilityLabel.
ListItem
- Renamed
labeltoaccessibilityLabel.
Loader
- Renamed
labeltoaccessibilityLabel.
Radio
- Removed
experimentalLabelPropsin favor oflabelProps.
Stepper
- Renamed
activeLabeltoaccessibilityLabelActive. - Renamed
completedLabeltoaccessibilityLabelCompleted.
Switch
- Removed
experimentalLabelPropsin favor oflabelProps.
TextField
- Renamed
clearButtonLabeltoaccessibilityLabelClearButton.
Tokens
Most of these tokens were deprecated for a few minor versions already. This release, we're effectively removing them.
Border-radius
border-radius-x-small -> border-radius-1 border-radius-small -> border-radius-2
border-radius-medium -> border-radius-3
Layout
layout-01 -> space-5 layout-02 -> space-6 layout-03 -> space-7
layout-04 -> space-9 layout-05 -> space-10 layout-06 -> space-11 layout-07 ->
removed
Space
space-xx-small -> space-1 space-x-small -> space-2 space-small -> space-3
space-medium -> space-5 space-large -> space-6 space-x-large -> space-7
space-xx-large -> space-9
space-inset-xx-small -> space-1 space-inset-x-small -> space-2 space-inset-small
-> space-3
space-inset-medium -> space-5 space-inset-large -> space-6 space-inset-x-large
-> space-7
space-inset-xx-large -> space-9
space-01 -> space-1 space-02 -> space-2 space-03 -> space-3 space-04 -> space-4
space-05 -> space-5 space-06 -> space-6 space-07 -> space-7 space-08 -> space-8
space-09 -> space-9
Shadow
shadow-inner -> shadow-inset-1 shadow-none -> shadow-0 shadow-base -> shadow-1
shadow-floating -> shadow-2 shadow-raised -> shadow-3 shadow-selected ->
shadow-4
Input
input-hover-border-color -> alias-field-border-color-hover
Button
button-font-adjustment is removed. We realigned our fonts to not need this
anymore.