From ea564190b365c086cd0c7e791da236e81c66a026 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:34:28 +0200
Subject: [PATCH] chore(documentation): add deprecated message on accent colors
 (#3195)

---
 .changeset/famous-emus-appear.md                            | 5 +++++
 .../src/stories/components/button/button.docs.mdx           | 5 +++++
 .../src/stories/foundation/color/color.docs.mdx             | 6 ++++++
 3 files changed, 16 insertions(+)
 create mode 100644 .changeset/famous-emus-appear.md

diff --git a/.changeset/famous-emus-appear.md b/.changeset/famous-emus-appear.md
new file mode 100644
index 0000000000..b6908b5b94
--- /dev/null
+++ b/.changeset/famous-emus-appear.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Deprecated accent colors.
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 71f21d6f3a..be5b9cdbcd 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -36,6 +36,11 @@ Inverted buttons don't need special classes anymore, just use any of the [backgr
 
 ### Accent colors
 
+<div className="alert alert-md alert-warning">
+  <h2 className="alert-heading">The accent colors are deprecated</h2>
+  <p>The CSS classes to apply to the buttons will be removed in the future.</p>
+</div>
+
 There are a number of accent colors that you can apply to buttons instead of the usual colors.
 
 <Canvas of={ButtonStories.AccentColors} />
diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
index 703efbecb1..b0da9534b4 100644
--- a/packages/documentation/src/stories/foundation/color/color.docs.mdx
+++ b/packages/documentation/src/stories/foundation/color/color.docs.mdx
@@ -60,6 +60,12 @@ These colors are also available via the **Sass map** `$signal-background-colors`
 </section>
 
 ## Accent colors
+
+<div className="alert alert-md alert-warning">
+  <h2 className="alert-heading">The accent colors are deprecated</h2>
+  <p>Its CSS and SASS variables will be removed in the future.</p>
+</div>
+
 These colors are also available via the **Sass map** `$accent-colors`.
 
 <section className="color-swatch__section">