✨🌈 Hello v7​

Following some management decisions, the Chameleon project is facing an unclear future going forward.

To prepare our beloved Mediahuis design system for this moment, we’ve introduced version 7.0.0. This release focuses on decoupling the native and web parts, along with removing a lot of legacy code.

A heartfelt thank you to all the Chameleons who made this product the gem it truly is. 🦎✨

🚀 New Feature​

chameleon-swift​

• Our game-changing native setup, token-io, now powers chameleon-swift! !1933

chameleon-react​

• 💥 BREAKING: chameleon-react no longer supports React v16. The minimum required version is now react v18.2.X. !1927

chameleon-postcss-plugin​

• The postcss plugin is rewritten, bringing it up to date. (💥 BREAKING: if you haven't already, upgrade your postcss dependency to v8 or up) !1925

Legacy code and packages removal​

💥 BREAKING: We’ve purged a significant amount of legacy code and packages.

The following packages have been removed:

• chameleon-react-legacy
• chameleon-react-bundled
• chameleon-scripts-legacy
• chameleon-theme-nb-legacy
• chameleon-tokens
• chameleon-swift-tokens-legacy

In addition the following things are also no longer available:

• the src-legacy/ folder for each theme
• the cdn-logos.js file for each theme
• the lib-legacy/ folder for each theme is no longer published through NPM
• the lib-android/ folder for each theme is no longer published through NPM

If you need anything mentioned here. Please refrain from updating and keep using the latest 6.x.x version.

!1921

🏠 Internal​

• In finishing token-io and improving on some other parts, we were able to greatly improve our developer and CI workflow. !1893

🎨 Themes​

• Updated some editorialLabel tokens for chameleon-theme-gva and chameleon-theme-ds. !1949
• The breaking subtheme is now made available on other storyblocks as well by updating some tokens. !1947

🏠 Internal​

• Updates to dependencies:
  • androidx.activity:activity-compose: 1.9.0 -> 1.9.3
• Added an example on how to implement darkmode in our app-with-next example. !1950
• Fix some outdated links on the docs site. !1943

🚀 New Feature​

chameleon-react​

• The BrandedHeading component now supports layout tokens, making the padding configurable per brand. !1936

🎨 Themes​

• Updated the Telegraaf theme with a new sport subtheme and improvements to the premium subtheme. !1935

⚠️ Important Note​

• Something went wrong when releasing 6.8.0. Please use version 6.8.1 instead.

🎨 Themes​

• Updated the header.background.accent.fill token for chameleon-theme-dl. !1932

🎨 Themes​

• Updated the dateTime format tokens for chameleon-theme-ds. !1929

🚀 New Feature​

chameleon-react​

• The <TextOnImageTeaser /> and <DefaultTeaser /> components gained a new feature: comments. Two new props allow you to display whether an article has comments and how many. (Please note though that the designs for this will still have to be tweaked for each brand and context, this feature is only delivered on a technical level.) !1930

🏠 Internal​

• Updates to dependencies:
  • @zerodevx/svelte-json-view: 1.0.9 -> 1.0.11
  • @percy/storybook: 6.0.2 -> 6.0.3
  • app-cash-paparazzi-version: 1.3.1 -> 1.3.5
• Our android XML Drawables are now generated directly from codegen-kotlin instead of through a StyleDictionary action. !1919
• Fixed an issue related to Turbo v2 migration. !1918

🎨 Themes​

• Updated the football and football-active icon for chameleon-theme-gva. !1915
• Added new header and topBar tokens, enabling brand independence for the Sports SDK and adding consistency with other implementations. !1911

🐛 Bug Fix​

• Fixed our asset sync process uncovering some unsynced changes in assets coming from Figma (mostly favicons). !1913

🏠 Internal​

• Updates to dependencies:
  • turbo: 1.13.4 -> 2.3.0
• Lowered our usage of eks-custom. !1908
• Updated to kotlin v2. !1904
• Replaced some old CDN urls in our tokens with updated versions. !1910
• Renamed ContextManager to ConfigurationSheet in chameleon-kotlin. !1903
• Fixed a stackoverflow in kotlin-test pipeline jobs. !1912

🎨 Themes​

• Updated the logo-square-main for most MHNO brands: chameleon-theme-frd, chameleon-theme-hco, chameleon-theme-lcd, chameleon-theme-mco, chameleon-theme-sco. !1907

🚀 New Feature​

chameleon-react​

• We've exposed our previously internal <TeaserWrapper /> component so you can create your own custom teaser. !1902 !1906

chameleon-kotlin​

• We've added a lot of new components to our chameleon-kotlin package! Say hello to: LinkText, Switch, IconButton, TextField, TextArea & InputMask. Nice work @dieter.vaesen! 💫 !1872

🐛 Bug Fix​

• Fixed the logo-main and logo-main-inverse drawables for chameleon-theme-ld in chameleon-kotlin as these were causing problems due to some extremely large paths. !1901
• Fixed the play-button icon for chameleon-theme-tel as it was showing a pause icon instead. !1905

🏠 Internal​

• Added some more internal documentation. !1900

🎨 Themes​

• Added the chameleon-theme-hbvl sport subtheme. !1885
• Fixed the design for LinkText color in certain subthemes. !1892
• Added the ext-vrouw icon to chameleon-theme-tel. !1888

🚀 New Feature​

chameleon-react​

• Added a new component, welcome <SegmentedControl />! !1804
• Add a loading prop to <DefaultTeaser />, <TextOnImageTeaser /> and <ListTeaser />. This shows a skeleton where the teaser contents would be, which prevents large layout shifts, providing a smoother loading experience. !1845
• Add a allowOutsideClick prop to <Dialog /> which if true does not prevent a click outside the focus trap. !1890
• Refactored our Teaser components allowing the video play icon button to be hidden when overlayed with a playing video. !1891

chameleon-kotlin​

• Introducing our game-changing token-io setup — a revolutionary overhaul that catapults performance to unprecedented levels. This isn’t just an update; it’s a giant leap forward redifining what's possible for the Chameleon project. With this powerful new integration, we’ve hit another milestone of maturity and capability. Major kudos to @stijn.willems and @dieter.vaesen! 💫 !1760

chameleon-swift​

• Improve the error message for when you try to use a sub-theme that is not available for the current theme. !1832

🐛 Bug Fix​

• Fixed the color of the ripple effect on Button in chameleon-kotlin. !1878
• Fixes some incorrect icons !1888:
  • sorting in chameleon-theme-tel
  • brand-active in chameleon-theme-vl
  • arrow-forward in chameleon-theme-lw
  • thumbs-down in chameleon-theme-nb

🏠 Internal​

• Updates to dependencies:
  • @popperjs/core: 2.11.6 -> 2.11.8
  • @storybook/addon-styling-webpack: 1.0.0 -> 1.0.1
  • doozMen/code-connect: 1.0.4 -> 1.0.6
• Added some tests to improve the quality of the tokens-studio $themes.json file. !1881
• Added some tests to make sure we don't bloat the Kotlin libraries. !1867
• Updated our docker setup making everything faster and simpler. We also started using Node v22, as it is now the LTS version. !1884
• Improved the linting and formatting for chameleon-kotlin in CI. !1889

🎨 Themes​

• Onboarding for chameleon-theme-tel. !1706
• Made some changes to chameleon-theme-gva:
  • Updated the color.primary palette. !1870
  • Updated the color.secondary palette. !1865
  • Updated the sport subtheme. !1864
• Some new icons are available for all themes: crime, politics & entertainment. !1863

🎨 Themes​

• Updated the quotes icon for chameleon-theme-nb, chameleon-theme-dl and chameleon-theme-gva. !1859
• Updated the customer-support icon for all themes. !1859

🏠 Internal​

• Updates to dependencies:
  • @swc/core: 1.7.5 -> 1.7.35
• Refactored some icons in Figma for cleaner SVG output (no visual changes). !1858