Key Updates: Mobile Improvements and a small fix for Teasers.

🚀 New Feature​

mobile​

Chameleon-Kotlin Updates:​

Introduced a new theme provider in our Kotlin-based applications for a more personalized user experience.

Chameleon-Swift Adjustments:​

Improved mathematical functionality to support direct number input.

chameleon-kotlin​

features​

Add theme provider for individual theme !1269

chores​

• format code after generating it
• update plugin com.android.library to v8.1.3
• update kotlin 1.9.10 with related compose dependencies
• codegen kotlin/pipeline test results missing !1282
• update gradle to 8.4 !1236

chameleon-swift​

fixes​

• math should allow numbers directly !1281

chores​

• fix factory dependency to 4.3.1 !1289

🏠 Internal​

• chore(release): automate release procedure
• fix(chameleon-native-publish): more generic to allow publish of components !1285

🐛 Bug Fix​

web​

• Raise Specificity of the Heading inside the Teaser, to prevent the underlying Header to overwrite it !1276

🐛 Bug Fix​

web​

• Stop unwanted shrinking of Icon if parent is flex and the content next to it takes up much space. !2478
• Fix a bug caused by a SVGO as a dependency of SVGR where viewport got removed from SVGs, leading to SVG's having a wrong size. !2478

🏠 Internal​

release​

• Run the CDN-upload on every release, if not we created an unstable Logo component.

🎨 Themes​

• Updated the value of semantic.foreground.accent.adaptive.default.fill (for teaser label) and semantic.foreground.base.adaptive.default.fill (general text color) to match the Figma designs for chameleon-theme-lw !1260

🚀 New Feature​

• New automated CDN using Focus. More info

web​

• <DefaultTeaser /> and <TextOnImageTeaser /> now support clamping of the introduction. This is done via the introductionOptions property (where clamp is set to an amount of lines). More info

mobile​

chameleon-kotlin​

• Add support for tokens with different features

  • boolean: a bool value to activate features in a component
  • composition: type used to describe padding
  • dimension: dimensions of a component
  • format: format strings describing (like date format)
  • gradient: data to form a gradient, no drawing code yet
  • number: various numbers to be used in designs
  • sizing: the size of breakpoints
  • textDecoration: underline/strikethrough/... text

• Add drawable assets for all themes

  • x icon to social-x
  • 💥 BREAKING: the naming of the drawables changed to theme-name-kind where kind is icon, illustration or logo

• Support for Typography in both compose and for legacy Typeface

  • increase and decrease the font size of a typography token to any desired value

chameleon-swift​

• increase and decrease the font size of a typography token to any desired value

🐛 Bug Fix​

web​

• Raise the specificity for the title inside the <DefaultTeaser /> component, so its color doesn't get overridden. !1254.

🎨 Themes​

• Onboarded Dagblad van het Noorden. Welcome chameleon-theme-dvn! !1161 !1205
• Added input.placeholder.fill for all themes. !1196
• Updated color.primary.60 for chameleon-theme-lw, resolving an a11y contrast issue. !1163
• Updated semantic.foreground.base.adaptive.soft.fill for chameleon-theme-ge, chameleon-theme-hd, chameleon-theme-nhd, chameleon-theme-yc and chameleon-theme-ld; resolving an a11y contrast issue. !1191
• Updated teaser.background.highlight.fill for chameleon-theme-az. !1193
• Updated branded-heading typography tokens for chameleon-theme-lw. !1220
• Updated tag.typography.font.size for chameleon-theme-co. !1220

🚀 New Feature​

general​

• Added the new X (formerly known as Twitter) icon as social-x. !1242 !1251

chameleon-react​

• A big update to our new teaser components: making sure they are fully SSR! Major kudos @wannes.debacker! 💫 !1186
• This release brings yet another new teaser component! Welcome to our component family, <RelatedTeaser />! !1187
• Another new addition to said component family, <Quote />! !1179
• You can now supply dateTimeOptions to all teaser components. (this replaces the dateTimeFormat prop, which is technically a breaking change! 💥) !1219
• The articleType prop on <DefaultTeaser /> received an extra option "podcast" . !1214

🐛 Bug Fix​

general​

• Backported the new Arnhem fonts for chameleon-theme-ds to legacy as well. !1247

web​

• Fixed an issue on iOS mobile safari making icons in <IconButton /> too small. !1190
• Fixed an issue with the <Stack /> component hindering you from setting inline styles. !1189

app​

• Fixed an issue with boxshadow and border tokens containing references. !1172
• Fixed an obscure issue in turkish locales where the percentage sign is placed differently. !1167

🏠 Internal​

• Added Renovate! We switched our dependency updater from Dependabot to Renovate for a smoother workflow. !1100
• Our token setup is never finished, we keep improving it. This time by more dogfooding in our own components. !1169
• Reworked our native install and publish scripts, moving away from chameleon-swift-scripts !1170
• Added a pre-release-ceremony script you should run before publishing chameleon packages. !1185
• Added JUnit style test reports to our CI setup. !1202 !1208
• Web typography tokens can now use italic font-styles !1221
• Moved to Swift 5.9 !1195
• Releases from CI! !1198
• style-dictionary for Swift output now also uses ts/resolveMath !1216
• Allow development against new macOS versions including the new Sonoma !1166
• Updates to dependencies
  • @docusaurus/core: 2.4.0 -> 2.4.3
  • @docusaurus/preset-classic: 2.4.0 -> 2.4.3
  • @docusaurus/theme-common: 2.4.0 -> 2.4.3
  • @easyops-cn/docusaurus-search-local: 0.35.0 -> 0.36.0
  • @mediahuis/scripts: 2.0.0 -> 2.1.0-next.2
  • @tokens-studio/sd-transforms: 0.10.1 -> 0.11.6
  • androidx.lifecycle:lifecycle-runtime-ktx: 2.6.1 -> 2.6.2
  • apple/swift-crypto: 1.0.0 -> 1.1.7
  • apple/swift-log: 1.4.4 -> 1.5.3
  • com.android.library: 8.1.1 -> 8.1.2
  • doozMen/swift-snapshot-testing-cli: 1.0.0 -> 1.0.1
  • hmlongco/Factory: 2.3.0 -> 2.3.2
  • Zollerboy1/SwiftCommand: 1.3.0 -> 1.4.0
  • org.jlleitschuh.gradle.ktlint: 11.5.0 -> 11.6.1

The Big Tease(r)!​

Our Chameleon 4.0.0 release is not even cold, and yet here we are with a 4.1.0 release! Not a major version, but nonetheless another major leap forward: this release brings you teasers and subtheming.

🎨 Themes​

• Subtheming! We're taking our first baby steps in harnessing the power our new token setup brought. The first themes getting this upgrade are:

  • chameleon-theme-az: sponsored-content
  • chameleon-theme-lw: sponsored-content and accent
  • chameleon-theme-lt: sponsored-content and accent
  • chameleon-theme-vl: sponsored-content and accent
  • chameleon-theme-co: sponsored-content and accent !1145

• The styling for BrandedHeading has been improved for chameleon-theme-lw, chameleon-theme-lt, chameleon-theme-vl and chameleon-theme-co. !1131

• Updates the placeholder illustration for chameleon-theme-indo. !1141

• Updates the complete icon set for chameleon-theme-az. This also adds puzzle and puzzle-fill icons for all brands. !1141

• A slew of token updates for chameleon-theme-ds, chameleon-theme-hmc, chameleon-theme-nb and chameleon-theme-hmc. !1151 !1157

• Added the XTR logo (brand-sponsored-content) for chameleon-theme-ds !1160

🚀 New Feature​

chameleon-react​

• Teasers! This release marks Chameleon's first adventure into larger component territory. In this version, we bring you <DefaultTeaser />, <TextOnImageTeaser /> and <ListTeaser />. !1073
• <Tag />, you’re it! A brand new, small, but necessary addition to our component library. !1108
• A new block prop has been added to <LinkText />. !1121
• The <AutoComplete /> component now marks your search query in the suggestions by default. !1139

🐛 Bug Fix​

web​

• We’ve added stylelint-value-no-unknown-custom-properties to our setup, which immediately brought some CSS oversights from our 4.0.0 release to light. !1135
• We’ve made some fixes to our <AutoComplete /> component in chameleon-react. Specifically:
  • the onInputChange handler nog longer fires when selecting a suggestion.
  • The loader now also shows when there are no suggestions yet. !1139
• Fixed an issue with cdn-logos.js import. !1143
• Fixed an issue with convertDateToTimeZone. !1148
• Fixed an issue with brand-square-icon-name-horizontal-white CDN logo config for chameleon-theme-az. !1154

app​

• Gave a bit more love to our lib-android export. !1138
• Fixes an issue with camelcasing in tokens. !1137

🏠 Internal​

• We’ve updated the minimum required react version to 16.14.0 !1142

✨🌈 Time to shed that old skin: welcome Chameleon 4.0.0!​

Remember our old design token setup? Our new major version is a complete overhaul of our design token setup, making the old one look like a chameleon in a black and white movie. #NewSkinWhoDis?

Be sure to check out our migration guide to help guide you through the process of upgrading.

🎨 Themes​

• 💥 BREAKING: We’ve completely overhauled our design token setup. Don't worry, we’ve also provided a way to keep using the legacy setup for now. Be sure to check out our migration guide. (In the process of doing so, there have been numerous little tweaks to a lot of themes.)

🚀 New Feature​

• <a> tags are able to look like buttons now when placed in <RichContent /> component. !1104
• Added a pickerFooter prop to our <DatePicker /> component. !1071
• Added a timeZone prop to our <DateTime /> component. !1014

🏠 Internal​

• Updates to dependencies
  • react-day-picker: 7.4.10 -> 8.7.1
  • storybook/*: 6.5.16 -> 7.0.9
• Our design tokens are now synced with Figma Tokens Studio.
• Total revamp of chameleon-scripts.
• Lots of performance updates to our CI setup and a lot more yet to come.
• Switched from yarn to pnpm package manager. !1098
• Switched from jest to vitest testing library. !1098
• Drastically improved our CI workflow for Percy snapshot testing !1074
• Started stylelinting our .css files. !1028
• Migrated to storybook v7 !949

🦦 Other​

• 💥 BREAKING: in the process of upgrading to our new setup, there have been numerous tweaks to all of our chameleon-react components. Be sure to check out our migration guide.
• 💥 BREAKING: regarding fonts, our web packages will only contain .woff2 files from now on.
• 💥 BREAKING: chameleon-react and chameleon-swift have had to make some changes, again, please check out our migration guide.

🎨 Themes​

• Updated brand, & brand-fil icons for chameleon-theme-lt. !986
• Updated the Arnhem font to include more glyphs and made some minor edits to the typography scale for chameleon-theme-ds. !1040
• Updated all logos, favicons and color foundations for chameleon-theme-indo. !1042 !1044 !1047

🏠 Internal​

• Updates to dependencies
  • @percy/cli: 1.21.0 -> 1.26.1
  • @percy/storybook: 4.3.5 -> 4.3.6
• Major updates to our CI pipeline including a dockerized node_modules approach. !862

🐛 Bug Fix​

• Fixed an issue with the image-placeholder illustrations for chameleon-theme-lt and chameleon-theme-lt !964

🎨 Themes​

• Updated brand-main, brand-square-icon-name-horizontal & brand-square-icon-name-horizontal-white for chameleon-theme-az. !951

🎨 Themes​

• We’ve updated the brand and brand-fill icons for chameleon-theme-co. !944