Skip to main content

Migration

A migration guide that outlines what to do to upgrade to certain Chameleon versions

7.0.0​

Legacy Code Removal​

This major version bump removes a significant amount of legacy code.

Removed Packages​

The following packages are no longer available:

  • chameleon-react-legacy
  • chameleon-react-bundled
  • chameleon-theme-nb-legacy
  • chameleon-scripts-legacy (internal)
  • chameleon-tokens (internal)
  • chameleon-swift-tokens-legacy (internal)

Additional Removals​

  • The cdn-logos.js file in each theme package.
  • The lib-legacy folder in each theme package.
  • The src-legacy folder in each theme (internal).

Note: If you are still using any of these legacy components, it is recommended to stay on the latest 6.x version of Chameleon.

chameleon-react​

We are bumping the minimum version of the react peer dependency from v16 to v18.

chameleon-postcss-plugin​

We are bumping the minimum version of the postcss peer dependency from v7 to v8.

chameleon-swift​

The library now relies on the direct output of Figma Tokens Studio, a font export from the chameleon repository, and an asset sync using the Figma API.

StyleDictionary Changes​

StyleDictionary no longer generates the code needed for the token container. You can now use the token values without chameleon-swift by directly depending on token-io.

token-io​

token-io is a new resolver for token values that is significantly faster than StyleDictionary. It is shared between chameleon-swift and chameleon-kotlin. For Swift, this introduces a dependency on git@gitlab.mediahuisgroup.com:frontend/token-io.git.

For local development:

  • You don’t need to configure anything on CI.
  • Ensure the package is accessible, and enable a deploy key for it. Contact @StijnWillems for assistance.

This setup mirrors how chameleon-swift and other Swift packages are accessed by CI.

Token Container​

The token container is now a struct, making it immutable and thread-safe. Consequently, TC.shared no longer exists. To pass the current TC instance to views, use one of the following techniques:

  1. [Recommended] Use SwiftUI's environment to pass the TC instance into views.
  2. For UIKit, consider implementing UIEnvironment. Let us know if you need this, and we can add helpers in chameleon-swift.
  3. Use TaskLocal in structured concurrency to access the current TC instance (reference).
  4. Pass the TC instance directly via initializers.

Dependency on Factory Removed​

The Factory injection framework dependency has been removed due to the following reasons:

  • Injection libraries often use singletons, which conflict with local context changes (e.g., subtheming).
  • The singleton pattern complicated testing and debugging.
  • It degraded developer experience by slowing down previews and reducing performance.

Removing this dependency has significantly improved preview and test performance.

String Path Token Resolution​

Tokens can now be resolved using string paths like teaser.background.color. This approach is faster, thread-safe, and avoids side effects (e.g., unintended color changes). Compiled tokens with camelCase names still exist but are optional.

Camouflage Removed​

Camouflage is no longer necessary. To change the subtheme, simply use:

tc.context.subTheme = .embedded(.sponsoredContent)

White Label Token Values by Default​

By default, token values use white-label settings:

  • Fonts: System fonts.
  • Drawables: SF Symbols.

This setup ensures faster previews and a smoother development experience.

Previews​

Use Xcode 16 for better performance with preview modifiers. Previews or snapshot tests should provide a tc in the environment:

  • For a single theme: 
    .environment(\.tc, ChameleonThemeDs.tc)
  • For all themes: 
    .environment(\.tc, bootstrap(theme: .ds))

Styles​

Separate style objects have been removed. The TC now functions as the style. If you have custom styles:

  1. Remove the make static function.
  2. Replace it with an initializer.

Use the SwiftUI environment outside views to build custom style structures. Ensure the struct conforms to the DynamicProperty protocol.

Tip: Refer to the Banner component as an example.

Custom Subthemes​

With the new resolver, overriding token values with a custom subtheme is easier. Use:

TC.overwrite(_:with:when:)

No DynamicLoader is needed.

Local Overrides​

Token values can now be overridden in a local context. For example:

VStack {
  Button() // Default value

  VStack {
    Button() // Overridden with red
    Button() // Overridden with red
  }
  .environment(\.tc.buttonBackground, "#FF0000FF")
}

Deprecated Ch Prefixes​

The Ch prefixes have been removed. Modules in Swift already provide a namespace, so these prefixes were redundant. Warnings will guide you through automated renaming.

Note: This change allows local tweaking without waiting for Chameleon releases.

Migration Checklist​

  1. Remove Factory:
    • Delete all import Factory instances.
    • Replace TC.shared with a local instance of tc.
  2. Replace Camouflage Wrappers:
    • Use a local tc instance with the correct context.
  3. Update Token Access:
    • Remove parentheses () from property access on tc.
  4. KeyPath Updates:
    • Replace KeyPath<TC, Factory<...>> with KeyPath<TC, ...>.
  5. Remove SPI:
    • Delete all @_spi(...) directives.

Pipeline​

  • You should add -skipMacroValidation to your pipeline xcode build command

6.0.0​

In Q3 of 2024 we will release another major version for chameleon containing some breaking changes.

** Components**

  • remove redundant Ch prefix, namespace is ChameleonComponents use ChameleonComponents.Button if you need to distinguish between the two.

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.

  1. Find & replace

    1. Rename plate-fill to plate-full and star-fill to star-full
    2. Rename all other icons ending with -fill to -active
    3. Rename recently-viewed to show, and videocam to video
    4. Prepend all social media icons with social- (apple, facebook, github, google, instagram, linkedin, pinterest, skype, spotify, tiktok, twitter, whatsapp and youtube)

  2. Check and review usage

    1. Check to see if you use -active icons 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.

    2. Some icons are updated visually. For example: play and sport for chameleon-theme-hbvl. We’ve added play-button to be more consistent in naming, and trophy or football for sport.

  3. Still missing something?

    Check the table below

  4. 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
oldnew
applesocial-apple
archive❌
backwardchevron-back
bookmark-fillbookmark-active
bot, bot-fill❌
brand-fillbrand-active
breaking, breaking-fill❌
bullet-fillbullet
camera-fillcamera
🆕cast-active
chevron-double-back❌
chevron-double-forward❌
clipboard❌
clock-fillclock-active
comment-fillcomment
conditions, conditions-filldocument
country-fillcountry-active
customer-support-fillcustomer-support
discover, discover-fill❌
drag❌
🆕economy
edit❌
🆕europe
error-fillerror
exit❌
expand❌
facebooksocial-facebook
favourite-fillfavourite-active
feedback-fillfeedback
filter, filter-fill❌
flag, flag-fill❌
folder❌
football-fillfootball-active
🆕forward-30
gallery-fillgallery
gift, gift-fill❌
githubsocial-github
googlesocial-google
history❌
home-fillhome
inbox❌
info-fillinfo
instagramsocial-instagram
layout, layout-grid, layout-grid-fill❌
🆕lifestyle
linkedinsocial-linkedin
list, list-fill❌
live-fill❌
lock-closed❌
lock-open❌
mail-fillmail
menu-fillmenu-active
🆕menu-close
🆕menu-search
mic-fillmic
more-horizontal-fillmore-horizontal-active
more-vertical, more-vertical-fill❌
music, music-fill❌
🆕newspaper
notification-fillnotification
opinionfeedback
opinion-fillfeedback
pause💫
🆕pause-button
person-fillperson
phone-fillphone
pin-fillpin-active
pinterestsocial-pinterest
plate-fillplate-full
play💫
play-arrowplay
play-fillplay-button
🆕play-button
podcast-fillpodcast-active
print-fillprint
puzzle-fillpuzzle-active
recently-viewedshow
🆕rewind-15
rss-fillrss
save❌
search-fillsearch
settings-fillsettings
shape❌
share-fillshare
shield-fillshield
shopping-bag❌
skypesocial-skype
🆕sleep
sound, sound-fill❌
spinner❌
spotifysocial-spotify
star-fillstar-full
stop💫
stop-fillstop-button
🆕stop-button
tag-filltag
thumbs-downthumbs-down
thumbs-upthumbs-up
tiktoksocial-tiktok
trending💫
trending-filltrending
🆕trophy
🆕trophy-active
tune-filltune
twittersocial-twitter
videocamvideo
videocam-fillvideo-active
warning-fillwarning
whatsappsocial-whatsapp
youtubesocial-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.

  1. Use the table below to migrate your old logo names to the new ones.

  2. 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
brandoldnew
AZbrand-square-mainlogo-square-main
brand-square-icon-whitelogo-square-main-inverse
brand-square-iconlogo-square-main
brand-plus-mainlogo-premium-main
brand-square-icon-name-horizontallogo-main
brand-square-icon-name-horizontal-whitelogo-main-inverse
brand-mainlogo-main
brand-iconlogo-icon
brand-icon-whitelogo-icon-inverse
BELTELbrand-square-mainlogo-square-main
brand-square-icon-whitelogo-square-inverse
brand-square-iconlogo-square
brand-plus-mainlogo-premium-main
brand-mainlogo-main
brand-plus-main-whitelogo-premium-main
brand-iconlogo-icon
brand-icon-inverselogo-icon-inverse
🆕logo-main-inverse
CObrand-square-mainlogo-square-main
brand-square-icon-whitelogo-square-main-inverse
brand-rectangle-name❌
brand-plus-mainlogo-premium-main
brand-mainlogo-main
brand-name-whitelogo-main-inverse
brand-iconlogo-icon
brand-icon-whitelogo-icon-inverse
DLbrand-square-mainlogo-square-main
brand-square-icon-whitelogo-square-inverse
brand-square-iconlogo-square
brand-plus-mainlogo-premium-main
brand-plus-whitelogo-premium-main-inverse
brand-name-whitelogo-main-inverse
brand-namelogo-main 💫
brand-iconlogo-icon
brand-mainlogo-main 💫
🆕logo-main-inverse
brand-icon-whitelogo-icon-inverse
abo-zaterdag-extra❌
brand-icon-name-verticallogo-vertical-icon-name
abo-digitaal❌
abo-digitaal-extra❌
abo-compleet❌
🆕logo-vertical-icon-name-inverse
DSplus-iconplus-icon
plus-icon-inverseplus-icon-inverse
plus-icon-nameplus-icon-name
plus-icon-name-inverseplus-icon-name-inverse
plus-brand-square-gvaplus-logo-square-gva
plus-brand-square-hbvlplus-logo-square-hbvl
plus-brand-square-nbplus-logo-square-nb
plus-brand-square-dgplus-logo-square-dg
plus-brand-square-dsplus-logo-square-ds
plus-wkndplus-wknd
plus-digiplus-digi
plus-fullplus-full
plus-26plus-26
plus-basicplus-basic
brand-square-mainlogo-square-main
brand-sponsored-contentlogo-sponsored-content
brand-square-icon-whitelogo-square-main-inverse
brand-square-iconlogo-square-main
brand-plus-whitelogo-premium-main-inverse
brand-pluslogo-premium-main
brand-plus-mainlogo-premium-main
brand-name-whitelogo-main-inverse
brand-mainlogo-main
brand-iconlogo-icon
brand-icon-whitelogo-icon-inverse
audio❌
abo-super❌
abo-snel❌
abo-slim❌
abo-digitaal❌
DVNbrand-square-mainlogo-square-main
brand-square-iconlogo-square-main
brand-square-icon-whitelogo-square-main-inverse
brand-plus-mainlogo-premium-main
brand-name-horizontal-whitelogo-main-inverse
brand-name-horizontallogo-main
brand-mainlogo-main
FRDbrand-main-inverselogo-main-inverse
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
GE, HD, LD, NHD, YCbrand-square-mainlogo-square-main
brand-sponsored-contentlogo-sponsored-content
brand-plus-mainlogo-premium-main
brand-plus-longlogo-premium-long
brand-mainlogo-main
brand-main-inverselogo-main-inverse
🆕logo-premium-long
GVAabo-digitaal❌
abo-slim❌
abo-snel❌
abo-super❌
brand-icon-inverselogo-icon-inverse
brand-icon-newspaper❌
brand-icon-whitelogo-icon-inverse
brand-iconlogo-icon
brand-mainlogo-main 💫
brand-name-whitelogo-name-inverse 💫
brand-namelogo-name
brand-plus-mainlogo-premium-main
brand-pluslogo-premium-main
brand-square-icon-name-horizontal-whitelogo-main-inverse
brand-square-icon-name-horizontallogo-main
brand-square-icon-name-vertical❌
brand-square-icon-whitelogo-square-main-inverse 💫
brand-square-iconlogo-square-main 💫
brand-square-mainlogo-square-main 💫
plus-26plus-26
plus-basicplus-basic
plus-brand-square-dgplus-logo-square-dg
plus-brand-square-dsplus-logo-square-ds
plus-brand-square-gvaplus-logo-square-gva
plus-brand-square-hbvlplus-logo-square-hbvl
plus-brand-square-nbplus-logo-square-nb
plus-digiplus-digi
plus-fullplus-full
plus-icon-inverseplus-icon-inverse
plus-icon-name-inverseplus-icon-name-inverse
plus-icon-nameplus-icon-name
plus-iconplus-icon
plus-wkndplus-wknd
HBVLabo-digitaal❌
abo-slim❌
abo-snel❌
abo-super❌
abo-weekend❌
brand-icon-abbreviation-horizontallogo-main 💫
brand-icon-news❌
brand-icon-newspaper❌
brand-iconlogo-icon
brand-mainlogo-main 💫
🆕logo-main-inverse
brand-name-whitelogo-name-inverse
brand-namelogo-name
brand-plus-mainlogo-premium-main
brand-pluslogo-premium-main
brand-square-icon-name-horizontallogo-main 💫
brand-square-iconlogo-square-main
brand-square-mainlogo-square-main
plus-26plus-26
plus-basicplus-basic
plus-brand-square-dgplus-logo-square-dg
plus-brand-square-dsplus-logo-square-ds
plus-brand-square-gvaplus-logo-square-gva
plus-brand-square-hbvlplus-logo-square-hbvl
plus-brand-square-nbplus-logo-square-nb
plus-digiplus-digi
plus-fullplus-full
plus-icon-inverseplus-icon-inverse
plus-icon-name-inverseplus-icon-name-inverse
plus-icon-nameplus-icon-name
plus-iconplus-icon
plus-wkndplus-wknd
HCObrand-main-inverselogo-main-inverse
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
HUBbrand-square-whitelogo-square-main-inverse
brand-square-mainlogo-square-main
brand-plus-mainlogo-premium-main
brand-name-whitelogo-main-inverse
brand-mainlogo-main
INDObrand-square-mainlogo-square-main
brand-square-iconlogo-square
brand-square-icon-whitelogo-square-inverse
brand-plus-mainlogo-premium-main
brand-mainlogo-main
brand-icon-whitelogo-icon-inverse
brand-iconlogo-icon
brand-icon-name-horizontallogo-main
brand-icon-name-horizontal-whitelogo-main-inverse
brand-icon-inverselogo-icon-inverse
LCDbrand-square-mainlogo-square-main
brand-square-main-inverselogo-square-main-inverse
brand-plus-mainlogo-premium-main
brand-mainlogo-main
brand-main-inverselogo-main-inverse
brand-iconlogo-icon
brand-icon-inverselogo-icon-inverse
LTbrand-square-mainlogo-square-main
brand-plus-mainlogo-premium-main
brand-rectangle-name❌
brand-square-icon-whitelogo-square-main-inverse
brand-mainlogo-main
brand-name-whitelogo-main-inverse
brand-iconlogo-icon
brand-icon-whitelogo-icon-inverse
LWbrand-square-mainlogo-square-main
brand-plus-mainlogo-premium-main
brand-rectangle-name❌
brand-square-icon-whitelogo-square-main-inverse
brand-mainlogo-main
brand-name-whitelogo-main-inverse
brand-icon-whitelogo-icon-inverse
brand-iconlogo-icon
MCObrand-main-inverselogo-main-inverse
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
MHbrand-squarelogo-icon
brand-square-mainlogo-square-main
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-icon-whitelogo-icon-inverse
brand-iconlogo-icon
brand-letterlogo-main
brand-icon-name-horizontal-whitelogo-main-inverse
brand-icon-name-horizontallogo-main
NBsub-logo-icon-dgsub-logo-icon-dg
plus-wkndplus-wknd
plus-icon-name-inverseplus-icon-name-inverse
plus-icon-nameplus-icon-name
plus-iconplus-icon
plus-digiplus-digi
plus-fullplus-full
plus-icon-inverseplus-icon-inverse
plus-brand-square-nbplus-logo-square-nb
plus-brand-square-dsplus-logo-square-ds
plus-brand-square-gvaplus-logo-square-gva
plus-brand-square-hbvlplus-logo-square-hbvl
plus-brand-square-dgplus-logo-square-dg
plus-26plus-26
plus-basicplus-basic
brand-square-iconlogo-square
brand-square-mainlogo-square-main
brand-rectangle-icon-name-horizontallogo-main
brand-square-icon-name-vertical❌
brand-rectangle-icon-name-horizontal-whitelogo-main-inverse
brand-plus-mainlogo-premium-main
brand-name❌
brand-mainlogo-main
brand-name-white❌
brand-icon-whitelogo-icon-inverse
brand-iconlogo-icon
brand-icon-name-verticallogo-square-main-inverse
brand-icon-newspaper❌
abo-super❌
abo-snel❌
abo-slim❌
abo-digitaal❌
NOFbrand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
NOSbrand-main-inverselogo-main-inverse
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
SCObrand-main-inverselogo-main-inverse
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
STWbrand-main-inverselogo-main-inverse
brand-mainlogo-main
brand-plus-mainlogo-premium-main
brand-square-mainlogo-square-main
SWbrand-square-mainlogo-square-main
brand-plus-mainlogo-premium-main
brand-name-whitelogo-main-inverse
brand-mainlogo-main
TCbrand-square-mainlogo-square-main
brand-rectangle-name❌
brand-square-icon-whitelogo-square-main-inverse
brand-name-whitelogo-main-inverse
brand-namelogo-name
brand-plus-mainlogo-premium-main
brand-icon-whitelogo-icon-inverse
brand-iconlogo-icon
brand-mainlogo-main
TELbrand-square-mainlogo-square-main
brand-square-iconlogo-square-main
brand-square-icon-whitelogo-square-main-inverse
brand-plus-mainlogo-premium-main
brand-name-whitelogo-main-inverse
brand-namelogo-main
brand-mainlogo-main
VLbrand-square-mainlogo-square-main
brand-square-icon-whitelogo-square-main-inverse
brand-square-iconlogo-square-main
brand-plus-whitelogo-premium-main-inverse
brand-pluslogo-premium-main
brand-plus-mainlogo-premium-main
brand-name-whitelogo-main-inverse
brand-namelogo-main
brand-mainlogo-main
WLbrand-square-icon❌
brand-square-icon-inverse❌
brand-square-icon-name-horizontal-inverse❌
brand-square-icon-name-horizontal❌
brand-plus-longlogo-premium-long
brand-plus-mainlogo-premium-main
brand-name-inverselogo-main-inverse
brand-namelogo-main
brand-mainlogo-main
brand-plus-inverselogo-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 imageAspectRatio property has been moved to imageOptions.aspectRatio within the DefaultTeaser and TextOnImageTeaser. The functionality remains the same. Update references to this property accordingly.

  • AccordionItem Focus Adjustment:

    • The misspelled focussed property has been removed from AccordionItem. Use the corrected focused property instead. The functionality remains unchanged.

  • Table Alignment:

    • The textAlign property on Table has been removed. Continue to manage text alignment using the textAlign property within the columns object of the table.

Updated Peer-Dependencies​

  • Dependencies Upgrade:
    • date-fns version requirement has been updated from >=2.27.0 to >=v3.6.0.
    • react version requirement has been updated from >=v16.14.0 to >=v18.2.0.

Deprecated Features Removed​

  • Locale Handling:

    • The getLocale function has been removed from the locale export. Use defaultLocale or specify the locale directly to replace this functionality.

  • Accordion Import Change:

    • AccordionItem is no longer available from the Accordion export. Import AccordionItem directly 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 SubTheme is now called SubThemeStore because 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 Embeddedand Custom.
  • Embedded is used for all the subthemes that exist for the brands in Chameleon (default, sport, ...)
  • Custom is used to register custom subthemes on themes to override the values certain tokens.
  • The ChameleonThemedcomposable api also changed to

ChameleonThemed​

  • Replaced SubTheme.key with SubTheme
  • Added StyleContext which 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 SubThemeStore instead of on SubTheme
  • 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 with SubTheme.Custom() for custom subthemes
  • Replace SubTheme.Key() everywhere with SubTheme.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 with bootstrap()
  • Replace TC.autoRegister = everywhere with TC.bootstrap =

Swift​

  • Remove ChCard component.

  • SubTheme is now an enum and no longer requires keyPaths. This should reflect more that most sub-theme's are embedded in the ChameleonTheme<#x#> library but that a team can create there own custom sub-theme. Most of the time you create a subTheme using the initializer try 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(\ with SubTheme.embedded(\ or SubTheme.Kind.string(\ with SubTheme.custom(\ See the documentation in SubTheme.
    • If you use custom sub-themes then the sub-theme name has become a struct instead of a string. It adopts ExpressibleByStringInterpolation so you can instantiate it with a string. But it will warn you if the name is a embedded name. In cases where you have a var name: String = "sub-theme name" use the name as let subTheme: SubTheme = .custom("\(name)") wrapping it is needed do to it no longer being a String type.

  • Find and replace all ColorValue with RGBAColor to align with Kotlin names and avoid confusion. ColorValue is now deprecated.

  • TC.setSubTheme is removed as it caused issues with leaking subTheme changes outside of sdk/app boundaries. You should wrap every token resolution into camouflage(context) { TC.shared.someToken() } or consider moving to the new Chameleon.Style api.

  • 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 the swift-component readme for more info.

  • In previews you can now uses the view.styleChameleonAll() and view.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 the view.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. Use view.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

  1. app startup should call bootstrap manually ChameleonTheme<X>.bootstrap()
  2. the entrypoint of sdk/app (main ContentView) should load the style view.styleComponents()
  3. 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 ChCard component.

  • SubTheme is now an enum and no longer requires keyPaths. Find and replace all SubTheme.Kind.keyPath(\ with SubTheme.embedded(\ or SubTheme.Kind.string(\ with SubTheme.custom(\ See the documentation in SubTheme.

  • Find and replace all ColorValue with RGBAColor to align with Kotlin names and avoid confusion. ColorValue is 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 = TC to register a value per subTheme. They are used internally and hence are now removed from the public api. The main used is in the DynamicLoader.

  • Library ChameleonPromised was removed as it is integrated into Chameleon. Remove ChameleonPromised from your dependencies in xcode or your package manager swift file. Everywhere you import ChameleonPromised use import Chameleon

  • Optional tokens on TC and optional groups on TCDynamic like TC.shared._<#some token name#> and TCDynamic()._<#some group name#> are now hidden from the api. This improves the code completion and build time significantly. Hense typing TC.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 .system removed

ColorScheme .system removed​

  • Mostly follow the deprecation warnings in Xcode
  • Replace .system with .light or .dark depending 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:

  1. 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:

  1. TC.themeBootstrapper has been removed and has been replaced by the following :
TC.bootstrapFontFamilyTypefaceRegistry = ::chameleonAllTypeFaceRegister
TC.autoRegister = ::chameleonAllAutoRegister
  1. 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 />:
    • circular prop has been removed
    • size prop 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 />:
    • appearance prop has been removed
    • action prop has been split up in actionUrl and actionLabel. You can no longer pass a component.
    • size prop possible values have been renamed: ['small', 'large'] is now ['sm', 'lg']
  • <Button />:
    • appearance prop possible values have changed from ['primary', 'secondary', 'plain', 'outline'] to ['default', 'primary', 'secondary', 'tertiary']. The default value has changed from primary to default.
    • size prop possible values have been renamed: ['small', 'large'] is now ['sm', 'lg']
  • <Caption />:
    • level prop has been renamed to size, values are: ['sm', 'lg']
    • fontFamily prop has been renamed to font, values are: ['default', 'alt']
    • fontWeight prop has been renamed to weight, values are: ['default', 'strong']
    • color prop 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-picker version 8.x.x. More information can be found in the react-day-picker documentation.
  • <DateTime />:
    • The dateTime formats have been updated to comply with the date-fns logic, replacing the previous dayjs compatibility. More information can be found in the date-fns formats documentation.
    • A new locale prop has been added which allows users to input a locale-file for customized locale configuration.
    • A new timeZone prop has been introduced, enabling users to define the timezone, thereby ensuring consistency between server-side and client-side rendering.
  • <Divider />:
    • color prop has been removed
  • <Flex />:
    • This component has been removed. Use the <Stack /> component instead.
  • <Heading />:
    • size prop has been added, possible values are: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'display']
    • level prop default value has been changed from 1 to 2
    • color prop now accepts only kebabcased token names (also note that tokens have been renamed ofcourse)
  • <Icon />:
    • size prop possible values have been renamed: ['small', 'medium', 'large', 'xLarge'] is now ['sm', 'md', 'lg', 'xl']
    • color prop now accepts only kebabcased token names (also note that tokens have been renamed ofcourse)
  • <IconButton />:
    • appearance prop possible values have changed from ['default', 'primary', 'secondary', 'plain', 'outline'] to ['default', 'primary', 'secondary', 'tertiary'].
    • size prop possible values have been renamed: ['small', 'large'] is now ['sm', 'lg']
    • color prop has been removed
  • <LinkText />:
    • branded prop has been removed
  • <ListItem />:
    • The iconColor prop is removed. You can supply a color on the passed <Icon /> component.
  • <Loader />:
    • size prop possible values have been renamed: ['small', 'medium', 'large', 'xLarge', 'xxLarge'] is now ['sm', 'md', 'lg', 'xl', '2xl']
  • <Paragraph />:
    • size prop has been added, possible values are: ['sm', 'lg']
    • fontFamily prop has been renamed to font, values are: ['default', 'alt']
    • fontWeight prop has been renamed to weight, values are: ['default', 'strong']
    • color prop has been added
  • <Text /> component has been removed. Use <Paragraph />, <Heading /> or <Caption /> instead
  • <WideList />:
    • avatarCircular prop has been removed
    • elevation prop has been removed

chameleon-theme-*​

  • Design tokens are exported differently from before.
    • For CSS: you just need to import /lib/tokens/css/tokens.css and /lib/tokens/css/tokens-custom-media.css (chameleon-react does this for you)
    • For JSON, JS or SCSS there are different sets of tokens. Each theme includes a default tokenset. On top of that themes (will) have a :
      • dark tokenset that overwrites some tokens for darkmode
      • desktop tokenset for overwrites for larger screens
      • subthemes/* tokenset for overwrites for any subthemes a brand may have. (for example: a brand could have a "sport" subtheme)
  • 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-react from v3 has been renamed to chameleon-react-legacy. Rename the package in your dependencies.
  • add the legacy flag to your chameleon-postcss-plugin PostCSS 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 the lib-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 under Demo/v4.md.
  • ChameleonLegacy: depends on Chameleon so 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 library
  • ChameleonAll: This contains the new tokens as well as the now legacy tokens. Use the same function as before bootstrap(theme: .<#theme#>) to get the new tokens. To get the legacy tokens, suffix the theme with Legacy. So for example bootstrap(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 ChameleonTheme enum has a legacy alternative for every brand. If you switch on ChameleonTheme values make sure to add the legacy value too everywhere.
  • Some types where moved to Chameleon and some to ChameleonLegacy. It is likely that in your code where you import Chameleon you now have to import ChameleonLegacy too.
  • ColorAsset was available (but unused) in Chameleon. It is no longer available in Chameleon (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 from colorFactory() to Container.shared.color()
  • protocol ChameleonLegacy.Bootstrap has been removed in favor of Factory 2.0 feature to autoRegister, hence in your code you can also remove the call to bootstrap(), 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: ChameleonTheme or Camo.shared.theme()
  • [major] ChameleonContainer no 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 Chameleon and 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 ChameleonLegacy and maintain Chameleon

  • 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"]

  • [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-gva
  • chameleon-theme-hbvl-summer-2020 -> chameleon-theme-hbvl
  • chameleon-theme-hmc-ge -> chameleon-theme-ge
  • chameleon-theme-hmc-hd -> chameleon-theme-hd
  • chameleon-theme-hmc-ld -> chameleon-theme-ld
  • chameleon-theme-hmc-nhd -> chameleon-theme-nhd
  • chameleon-theme-hmc-yc -> chameleon-theme-yc
  • chameleon-theme-nb -> chameleon-theme-nb-legacy
  • chameleon-theme-nb-winter-2021 -> chameleon-theme-nb
  • chameleon-theme-swcom -> chameleon-theme-sw
  • chameleon-theme-wort-de -> chameleon-theme-lw
  • chameleon-theme-wort-en -> chameleon-theme-lt
  • chameleon-theme-wort-pt -> chameleon-theme-co
  • chameleon-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.css instead of using this component.
  • The <Reset /> component has been removed. Please import @mediahuis/chameleon-reset instead of using this component.

1.13.0​

Components​

  • The <Fonts /> component has been removed. Please import @mediahuis/chameleon-theme-wl/lib/web/fonts.css instead of using this component.
  • The <Reset /> component has been removed. Please import @mediahuis/chameleon-reset instead 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 value prop is now required but can thus be cleared if needed.
  • Removed defaultValue prop as this is now controlled by value.

Checkbox​

  • Removed experimentalLabelProps in favor of labelProps.

Dialog​

  • Renamed closeButtonLabel to accessibilityLabelCloseButton.

Fieldset​

  • Removed formId in favor of the native form prop.

IconButton​

  • Renamed label to accessibilityLabel.

ListItem​

  • Renamed label to accessibilityLabel.

Loader​

  • Renamed label to accessibilityLabel.

Radio​

  • Removed experimentalLabelProps in favor of labelProps.

Stepper​

  • Renamed activeLabel to accessibilityLabelActive.
  • Renamed completedLabel to accessibilityLabelCompleted.

Switch​

  • Removed experimentalLabelProps in favor of labelProps.

TextField​

  • Renamed clearButtonLabel to accessibilityLabelClearButton.

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.