a-ui · TriangleJuice · Dec 10, 2024 · Dec 10, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/.github/workflows/aws.yml b/.github/workflows/aws.yml
@@ -10,10 +10,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node 20.x
+      - name: Use Node 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Install dependencies
         run: npm ci
       - name: Build library

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,10 +14,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node 20.x
+      - name: Use Node 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Install dependencies
         run: npm ci
       - name: Build documentation

diff --git a/.stylelintignore b/.stylelintignore
diff --git a/.stylelintrc b/.stylelintrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,45 @@
 
 ## Unreleased
 
+## [7.0.0] - 2025-xx-xx
+
+### Added
+
+- Added the possibility for a third brand color
+- Added info color to utility classes
+- Added info color to buttons
+- Added CSS variable for selection color
+- Added CSS variables for z-index
+- Added more variants for existing colors to enhance accessibility across all components
+- Added more variants for background and text utilities
+
+### Changed
+
+- [BREAKING] Changed color naming to provide a better wat to build up themes
+  - Changed THEME to BRAND
+  - Changed gray to neutral
+  - Realigned Sass color naming
+- [BREAKING] Added better state colors
+- Tweaked some colors to better match their other variants
+- Optimized font loading by only offering woff2 format which should be enough for all modern browsers
+- Tweaked the design of the avatar
+- Tweaked the design of the breadcrumb
+- Tweaked the copyright animation in an image
+- Tweaked the design of the pagination
+- Tweaked the design of the range slider
+- Tweaked the design of the upload
+
+### Fixed
+
+- [BREAKING] Fixed breakpoint variables
+
+### Removed
+
+- [BREAKING] Removed `.u-bg-light` in favor of `.u-bg`
+- [BREAKING] Removed Sass variables except for colors and breakpoints
+- [BREAKING] Removed Sass helper functions
+- [BREAKING] Removed all Twitter related components
+
 ## [6.6.6] - 2024-06-20
 
 ### Fixed
@@ -944,6 +983,7 @@
 
 - Initial release.
 
+[7.0.0]: https://github.com/a-ui/core_branding_scss/tree/v7.0.0
 [6.6.6]: https://github.com/a-ui/core_branding_scss/tree/v6.6.6
 [6.6.5]: https://github.com/a-ui/core_branding_scss/tree/v6.6.5
 [6.6.4]: https://github.com/a-ui/core_branding_scss/tree/v6.6.4

diff --git a/README.md b/README.md
@@ -7,13 +7,13 @@ This project contains Antwerp's digital styling and styling guidelines. It is th
 In its simplest form you can just include the following line in the `<head>` section of your app.
 
 ```
-<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css">
+<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.1/main.min.css">
 ```
 
 You can even import it directly in your (S)CSS:
 
 ```
-@import url("https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css");
+@import url("https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.1/main.min.css");
 ```
 
 > We adopt semantic versioning. If you want to use another version of the Core Branding you can do so by adjusting the version in the URL address. See the changelog for all available versions.

diff --git a/docs/fonts/Antwerpen-Regular.woff b/docs/fonts/Antwerpen-Regular.woff
diff --git a/docs/fonts/AntwerpenSmallCaps-Regular.woff b/docs/fonts/AntwerpenSmallCaps-Regular.woff
diff --git a/docs/fonts/AntwerpenTall-Tall.woff b/docs/fonts/AntwerpenTall-Tall.woff
diff --git a/docs/fonts/SunAntwerpen_300.woff b/docs/fonts/SunAntwerpen_300.woff
diff --git a/docs/fonts/SunAntwerpen_300_italic.woff b/docs/fonts/SunAntwerpen_300_italic.woff
diff --git a/docs/fonts/SunAntwerpen_500.woff b/docs/fonts/SunAntwerpen_500.woff
diff --git a/docs/fonts/SunAntwerpen_500_italic.woff b/docs/fonts/SunAntwerpen_500_italic.woff
diff --git a/docs/fonts/SunAntwerpen_700.woff b/docs/fonts/SunAntwerpen_700.woff
diff --git a/docs/fonts/SunAntwerpen_700_italic.woff b/docs/fonts/SunAntwerpen_700_italic.woff
diff --git a/docs/fonts/SunAntwerpen_800.woff b/docs/fonts/SunAntwerpen_800.woff
diff --git a/docs/fonts/SunAntwerpen_800_italic.woff b/docs/fonts/SunAntwerpen_800_italic.woff
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/scripts/main.js b/docs/scripts/main.js
@@ -2,6 +2,20 @@
 
 document.addEventListener('DOMContentLoaded', () => {
     // Set indeterminate state of some checkboxes
+    const accordions = document.querySelectorAll(".m-accordion__header");
+
+    for (let index = 0; index < accordions.length; index++) {
+        const accordionEl = accordions[index];
+
+        accordionEl.onclick = () => {
+            if (accordionEl.getAttribute("aria-expanded") == "true") {
+                accordionEl.setAttribute("aria-expanded", "false");
+            } else {
+                accordionEl.setAttribute("aria-expanded", "true");
+            }
+        }
+    }
+
     const checkboxes = document.querySelectorAll("#checkbox-indeterminate, #table-checkbox1");
 
     for (let index = 0; index < checkboxes.length; index++) {
@@ -40,6 +54,20 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    const toggles = document.querySelectorAll(".a-toggle__button");
+
+    for (let index = 0; index < toggles.length; index++) {
+        const toggleEl = toggles[index];
+
+        toggleEl.onclick = () => {
+            if (toggleEl.getAttribute("aria-expanded") == "true") {
+                toggleEl.setAttribute("aria-expanded", "false");
+            } else {
+                toggleEl.setAttribute("aria-expanded", "true");
+            }
+        }
+    }
+
     const tags = document.querySelectorAll("button.m-tag");
 
     for (let index = 0; index < tags.length; index++) {