From 50dbc27ef4c5182c4d152760d3610ab88c6b9d8a Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Thu, 28 Nov 2024 12:30:54 +0100
Subject: [PATCH 1/7] chore: start with chips

---
 src/components/chip/chip.stories.ts | 22 ++++++++
 src/components/chip/chip.ts         | 78 +++++++++++++++++++++++++++++
 src/components/chip/index.ts        |  1 +
 src/components/chip/package.json    | 12 +++++
 src/components/chip/react.ts        | 10 ++++
 5 files changed, 123 insertions(+)
 create mode 100644 src/components/chip/chip.stories.ts
 create mode 100644 src/components/chip/chip.ts
 create mode 100644 src/components/chip/index.ts
 create mode 100644 src/components/chip/package.json
 create mode 100644 src/components/chip/react.ts

diff --git a/src/components/chip/chip.stories.ts b/src/components/chip/chip.stories.ts
new file mode 100644
index 0000000..3e0203c
--- /dev/null
+++ b/src/components/chip/chip.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import './chip';
+
+export default {
+  title: 'Components/Chip',
+} satisfies Meta;
+
+export const Default: StoryObj = {
+  render: ({ variant }) => html`<cx-chip variant=${variant}>I'm a chip</cx-chip>`,
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary'],
+      description: 'Changes the visual appearance of the button',
+    },
+  },
+  args: {
+    variant: 'primary',
+  },
+};
diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
new file mode 100644
index 0000000..b47bd10
--- /dev/null
+++ b/src/components/chip/chip.ts
@@ -0,0 +1,78 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+@customElement('cx-chip')
+export class Chip extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .cx-chip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--cx-spacing-05) var(--cx-spacing-1);
+      gap: var(--cx-spacing-1);
+      border-radius: var(---cx-radius-mini);
+
+      color: var(---cx-color-text-static-dark);
+    }
+  `;
+
+  /**
+   * @description Controls the variant of the chip
+   * @default "display"
+   */
+  @property()
+  variant: 'display' | 'display-soft' | 'removable' = 'display';
+
+  /**
+   * @description Controls the color of the chip
+   * @default "purple"
+   */
+  @property()
+  color: 'purple' | 'dark-blue' | 'blue' | 'yellow' | 'green' | 'red' = 'purple';
+
+  private colorClasses = {
+    purple: this.color === 'purple',
+    'dark-blue': this.color === 'dark-blue',
+    blue: this.color === 'blue',
+    yellow: this.color === 'yellow',
+    green: this.color === 'green',
+    red: this.color === 'red',
+  };
+
+  render() {
+    if (this.variant === 'removable') {
+      return html`
+        <button
+          type="button"
+          class=${classMap({ 'cx-chip': true, soft: true, interactive: true, ...this.colorClasses })}
+        >
+          <slot></slot>
+        </button>
+      `;
+    }
+
+    return html`
+      <div
+        class=${classMap({
+          'cx-chip': true,
+          regular: this.variant === 'display',
+          soft: this.variant === 'display-soft',
+          ...this.colorClasses,
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-chip': Chip;
+  }
+}
diff --git a/src/components/chip/index.ts b/src/components/chip/index.ts
new file mode 100644
index 0000000..4cd623d
--- /dev/null
+++ b/src/components/chip/index.ts
@@ -0,0 +1 @@
+export * from './chip';
diff --git a/src/components/chip/package.json b/src/components/chip/package.json
new file mode 100644
index 0000000..433fe6e
--- /dev/null
+++ b/src/components/chip/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@computas/designsystem-chip",
+  "version": "1.0.0",
+  "type": "module",
+  "private": "true",
+  "scripts": {
+    "build": "tsup"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  }
+}
diff --git a/src/components/chip/react.ts b/src/components/chip/react.ts
new file mode 100644
index 0000000..04ac9a9
--- /dev/null
+++ b/src/components/chip/react.ts
@@ -0,0 +1,10 @@
+import { createComponent } from '@lit/react';
+import * as React from 'react';
+
+import { Chip } from './index';
+
+export const CxChip = createComponent({
+  tagName: 'cx-chip',
+  elementClass: Chip,
+  react: React,
+});

From 2444b505c365b3060a1b032b61e8886b2a00da3e Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Mon, 2 Dec 2024 13:35:56 +0100
Subject: [PATCH 2/7] chore: start with a css chip

---
 global-styles.css                   |   1 +
 src/components/chip/chip.css        | 207 ++++++++++++++++++++++++++++
 src/components/chip/chip.stories.ts |  47 +++++--
 3 files changed, 240 insertions(+), 15 deletions(-)
 create mode 100644 src/components/chip/chip.css

diff --git a/global-styles.css b/global-styles.css
index d35d184..ef1c640 100644
--- a/global-styles.css
+++ b/global-styles.css
@@ -16,5 +16,6 @@
 
 /* Components */
 @import "src/components/button/button.css";
+@import "src/components/chip/chip.css";
 @import "src/components/form-field/form-field.css";
 @import "src/components/input/input.css";
diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
new file mode 100644
index 0000000..7f4db69
--- /dev/null
+++ b/src/components/chip/chip.css
@@ -0,0 +1,207 @@
+.cx-btn__primary,
+.cx-btn__secondary,
+.cx-btn__tertiary,
+.cx-btn__danger {
+  --highlight-color: var(--cx-color-blue);
+  --highlight-background: var(--cx-color-grey-700);
+  --highlight-size: 500%;
+  --background-transition-duration: 150ms;
+
+  position: relative;
+  display: inline-flex;
+  gap: var(--cx-spacing-1);
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1rem;
+  padding: var(--cx-spacing-4) var(--cx-spacing-6);
+  min-width: 6rem;
+  border-radius: var(--cx-radius-pill);
+  transition: scale 20ms ease, background-color var(--background-transition-duration) ease, color 300ms ease,
+    box-shadow 300ms ease;
+
+  &:active {
+    scale: 0.99;
+  }
+
+  &:hover,
+  &:focus-visible {
+    --background-transition-duration: 300ms;
+    box-shadow: none;
+    background-color: transparent;
+
+    &::before {
+      opacity: 1;
+      transition-duration: 150ms;
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(
+      ellipse at center,
+      var(--highlight-color),
+      var(--highlight-background) 50%,
+      var(--highlight-background)
+    );
+
+    border-radius: inherit;
+    background-size: var(--highlight-size) var(--highlight-size);
+    background-position: 70% 30%;
+    animation: cx-btn-highlight-rotate 5s linear infinite;
+    transition: opacity 300ms ease;
+    z-index: -1;
+    opacity: 0;
+  }
+}
+
+:is(.cx-btn__primary, .cx-btn__secondary, .cx-btn__tertiary):is(:hover, :focus-visible) {
+  color: var(--cx-color-text-static-light);
+}
+
+.cx-btn__primary {
+  color: var(--cx-color-text-inverted);
+  background-color: var(--cx-color-background-accent-1);
+}
+
+.cx-btn__secondary {
+  color: var(--cx-color-text-primary);
+  background-color: var(--cx-color-background-primary);
+  box-shadow: inset 0 0 0 1px var(--cx-color-border-primary);
+}
+
+.cx-btn__tertiary {
+  color: var(--cx-color-text-primary);
+
+  &::before {
+    opacity: 0;
+  }
+}
+
+.cx-btn__danger {
+  --highlight-color: var(--cx-color-grey-700);
+  --highlight-background: var(--cx-color-signal-danger);
+  --highlight-size: 700%;
+
+  color: var(--cx-color-text-static-dark);
+  background-color: var(--cx-color-signal-danger);
+}
+
+.cx-btn__sm {
+  padding: var(--cx-spacing-3) var(--cx-spacing-4);
+  font-size: 0.75rem;
+  min-width: 5rem;
+}
+
+.cx-btn__lg {
+  padding: var(--cx-spacing-6) var(--cx-spacing-8);
+  font-size: 1.125rem;
+}
+
+.cx-btn__icon {
+  --icon-size: var(--cx-spacing-6);
+  padding: var(--cx-spacing-3);
+  min-width: unset;
+
+  > * {
+    width: var(--icon-size);
+    height: var(--icon-size);
+  }
+}
+
+.cx-btn__icon.cx-btn__sm {
+  --icon-size: var(--cx-spacing-4);
+  padding: var(--cx-spacing-3);
+}
+
+.cx-btn__icon.cx-btn__lg {
+  --icon-size: var(--cx-spacing-8);
+  padding: var(--cx-spacing-4);
+}
+
+@keyframes cx-btn-highlight-rotate {
+  0%,
+  100% {
+    background-position: 70% 30%;
+  }
+
+  5% {
+    background-position: 62% 24%;
+  }
+
+  10% {
+    background-position: 54% 22%;
+  }
+
+  15% {
+    background-position: 46% 22%;
+  }
+
+  20% {
+    background-position: 38% 24%;
+  }
+
+  25% {
+    background-position: 30% 30%;
+  }
+
+  30% {
+    background-position: 24% 38%;
+  }
+
+  35% {
+    background-position: 22% 46%;
+  }
+
+  40% {
+    background-position: 22% 54%;
+  }
+
+  45% {
+    background-position: 24% 62%;
+  }
+
+  50% {
+    background-position: 30% 70%;
+  }
+
+  55% {
+    background-position: 38% 76%;
+  }
+
+  60% {
+    background-position: 46% 78%;
+  }
+
+  65% {
+    background-position: 54% 78%;
+  }
+
+  70% {
+    background-position: 62% 76%;
+  }
+
+  75% {
+    background-position: 70% 70%;
+  }
+
+  80% {
+    background-position: 76% 62%;
+  }
+
+  85% {
+    background-position: 78% 54%;
+  }
+
+  90% {
+    background-position: 78% 46%;
+  }
+
+  95% {
+    background-position: 76% 38%;
+  }
+}
diff --git a/src/components/chip/chip.stories.ts b/src/components/chip/chip.stories.ts
index 3e0203c..e8813a6 100644
--- a/src/components/chip/chip.stories.ts
+++ b/src/components/chip/chip.stories.ts
@@ -1,22 +1,39 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
-
-import './chip';
+import { html } from 'lit';
 
 export default {
   title: 'Components/Chip',
 } satisfies Meta;
 
-export const Default: StoryObj = {
-  render: ({ variant }) => html`<cx-chip variant=${variant}>I'm a chip</cx-chip>`,
-  argTypes: {
-    variant: {
-      control: 'radio',
-      options: ['primary', 'secondary'],
-      description: 'Changes the visual appearance of the button',
-    },
-  },
-  args: {
-    variant: 'primary',
-  },
+export const Display: StoryObj = {
+  render: () => html`
+    <div class="cx-chip cx-chip__purple cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__dark-blue cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__blue cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__yellow cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__green cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__red">Chip text</div>
+  `,
+};
+
+export const DisplaySoft: StoryObj = {
+  render: () => html`
+    <div class="cx-chip cx-chip__soft cx-chip__purple cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__soft cx-chip__dark-blue cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__soft cx-chip__blue cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__soft cx-chip__yellow cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__soft cx-chip__green cx-mr-6">Chip text</div>
+<div class="cx-chip cx-chip__soft cx-chip__red">Chip text</div>
+  `,
+};
+
+export const Removable: StoryObj = {
+  render: () => html`
+    <button class="cx-chip cx-chip__purple cx-mr-6">Chip text</button>
+<button class="cx-chip cx-chip__dark-blue cx-mr-6">Chip text</button>
+<button class="cx-chip cx-chip__blue cx-mr-6">Chip text</button>
+<button class="cx-chip cx-chip__yellow cx-mr-6">Chip text</button>
+<button class="cx-chip cx-chip__green cx-mr-6">Chip text</button>
+<button class="cx-chip cx-chip__red">Chip text</button>
+  `,
 };

From d680ab03299ffc7ff91ef451e900876f7fa7c836 Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Mon, 2 Dec 2024 16:13:02 +0100
Subject: [PATCH 3/7] feat(chip): implement chip

---
 dist/package.json                       |   2 +-
 global-styles.css                       |   1 +
 src/components/button/button.css        | 160 +++-----------
 src/components/chip/Overview.mdx        |  24 +++
 src/components/chip/chip.css            | 270 ++++++++++--------------
 src/components/chip/chip.ts             |  78 -------
 src/components/chip/index.ts            |   1 -
 src/components/chip/package.json        |  12 --
 src/components/chip/react.ts            |  10 -
 src/global-css/animations.css           |  82 +++++++
 src/global-css/purpose-color-tokens.css |  20 ++
 11 files changed, 275 insertions(+), 385 deletions(-)
 create mode 100644 src/components/chip/Overview.mdx
 delete mode 100644 src/components/chip/chip.ts
 delete mode 100644 src/components/chip/index.ts
 delete mode 100644 src/components/chip/package.json
 delete mode 100644 src/components/chip/react.ts
 create mode 100644 src/global-css/animations.css

diff --git a/dist/package.json b/dist/package.json
index b3f99e1..5505ab4 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@computas/designsystem",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "The Computas design system",
   "type": "module",
   "license": "MIT",
diff --git a/global-styles.css b/global-styles.css
index ef1c640..135e9a4 100644
--- a/global-styles.css
+++ b/global-styles.css
@@ -13,6 +13,7 @@
 @import "src/global-css/a11y.css";
 @import "src/global-css/margins.css";
 @import "src/global-css/typography.css";
+@import "src/global-css/animations.css";
 
 /* Components */
 @import "src/components/button/button.css";
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 7f4db69..c3a043f 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -2,12 +2,8 @@
 .cx-btn__secondary,
 .cx-btn__tertiary,
 .cx-btn__danger {
-  --highlight-color: var(--cx-color-blue);
-  --highlight-background: var(--cx-color-grey-700);
-  --highlight-size: 500%;
-  --background-transition-duration: 150ms;
+  --cx-gradient-highlight-size: 500%;
 
-  position: relative;
   display: inline-flex;
   gap: var(--cx-spacing-1);
   align-items: center;
@@ -19,8 +15,21 @@
   padding: var(--cx-spacing-4) var(--cx-spacing-6);
   min-width: 6rem;
   border-radius: var(--cx-radius-pill);
-  transition: scale 20ms ease, background-color var(--background-transition-duration) ease, color 300ms ease,
-    box-shadow 300ms ease;
+  transition:
+    scale 20ms ease,
+    color 300ms ease,
+    box-shadow 300ms ease,
+    --cx-gradient-highlight 300ms ease,
+    --cx-gradient-background 300ms ease;
+
+  background-image: radial-gradient(
+    ellipse at center,
+    var(--cx-gradient-highlight),
+    var(--cx-gradient-background) 50%,
+    var(--cx-gradient-background)
+  );
+  background-size: var(--cx-gradient-highlight-size) var(--cx-gradient-highlight-size);
+  animation: cx-gradient-background-rotation 5s linear infinite;
 
   &:active {
     scale: 0.99;
@@ -28,34 +37,10 @@
 
   &:hover,
   &:focus-visible {
-    --background-transition-duration: 300ms;
-    box-shadow: none;
-    background-color: transparent;
-
-    &::before {
-      opacity: 1;
-      transition-duration: 150ms;
-    }
-  }
+    --cx-gradient-highlight: var(--cx-color-blue);
+    --cx-gradient-background: var(--cx-color-grey-700);
 
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(
-      ellipse at center,
-      var(--highlight-color),
-      var(--highlight-background) 50%,
-      var(--highlight-background)
-    );
-
-    border-radius: inherit;
-    background-size: var(--highlight-size) var(--highlight-size);
-    background-position: 70% 30%;
-    animation: cx-btn-highlight-rotate 5s linear infinite;
-    transition: opacity 300ms ease;
-    z-index: -1;
-    opacity: 0;
+    box-shadow: none;
   }
 }
 
@@ -64,31 +49,37 @@
 }
 
 .cx-btn__primary {
+  --cx-gradient-highlight: var(--cx-color-background-accent-1);
+  --cx-gradient-background: var(--cx-color-background-accent-1);
+
   color: var(--cx-color-text-inverted);
-  background-color: var(--cx-color-background-accent-1);
 }
 
 .cx-btn__secondary {
+  --cx-gradient-highlight: var(--cx-color-background-primary);
+  --cx-gradient-background: var(--cx-color-background-primary);
+
   color: var(--cx-color-text-primary);
-  background-color: var(--cx-color-background-primary);
   box-shadow: inset 0 0 0 1px var(--cx-color-border-primary);
 }
 
 .cx-btn__tertiary {
   color: var(--cx-color-text-primary);
-
-  &::before {
-    opacity: 0;
-  }
 }
 
 .cx-btn__danger {
-  --highlight-color: var(--cx-color-grey-700);
-  --highlight-background: var(--cx-color-signal-danger);
-  --highlight-size: 700%;
+  --cx-gradient-highlight: var(--cx-color-signal-danger);
+  --cx-gradient-background: var(--cx-color-signal-danger);
+  --cx-gradient-highlight-size: 700%;
 
   color: var(--cx-color-text-static-dark);
   background-color: var(--cx-color-signal-danger);
+
+  &:focus-visible,
+  &:hover {
+    --cx-gradient-highlight: var(--cx-color-grey-700);
+    --cx-gradient-background: var(--cx-color-signal-danger);
+  }
 }
 
 .cx-btn__sm {
@@ -122,86 +113,3 @@
   --icon-size: var(--cx-spacing-8);
   padding: var(--cx-spacing-4);
 }
-
-@keyframes cx-btn-highlight-rotate {
-  0%,
-  100% {
-    background-position: 70% 30%;
-  }
-
-  5% {
-    background-position: 62% 24%;
-  }
-
-  10% {
-    background-position: 54% 22%;
-  }
-
-  15% {
-    background-position: 46% 22%;
-  }
-
-  20% {
-    background-position: 38% 24%;
-  }
-
-  25% {
-    background-position: 30% 30%;
-  }
-
-  30% {
-    background-position: 24% 38%;
-  }
-
-  35% {
-    background-position: 22% 46%;
-  }
-
-  40% {
-    background-position: 22% 54%;
-  }
-
-  45% {
-    background-position: 24% 62%;
-  }
-
-  50% {
-    background-position: 30% 70%;
-  }
-
-  55% {
-    background-position: 38% 76%;
-  }
-
-  60% {
-    background-position: 46% 78%;
-  }
-
-  65% {
-    background-position: 54% 78%;
-  }
-
-  70% {
-    background-position: 62% 76%;
-  }
-
-  75% {
-    background-position: 70% 70%;
-  }
-
-  80% {
-    background-position: 76% 62%;
-  }
-
-  85% {
-    background-position: 78% 54%;
-  }
-
-  90% {
-    background-position: 78% 46%;
-  }
-
-  95% {
-    background-position: 76% 38%;
-  }
-}
diff --git a/src/components/chip/Overview.mdx b/src/components/chip/Overview.mdx
new file mode 100644
index 0000000..0fd87fe
--- /dev/null
+++ b/src/components/chip/Overview.mdx
@@ -0,0 +1,24 @@
+import { Canvas, Meta, Subtitle, Title } from "@storybook/blocks";
+
+import * as stories from "./chip.stories";
+
+<Meta of={stories} />
+
+<Title />
+<Subtitle>
+  The input component is implemented using only CSS. It is required that the top
+  level element is a `label` element, since this enforces good accessibility.
+  Below you'll find the different appearances that are currently supported.
+</Subtitle>
+
+### Display
+
+<Canvas of={stories.Display} />
+
+### Display soft
+
+<Canvas of={stories.DisplaySoft} />
+
+### Removable
+
+<Canvas of={stories.Removable} />
diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
index 7f4db69..4c7fae3 100644
--- a/src/components/chip/chip.css
+++ b/src/components/chip/chip.css
@@ -1,207 +1,163 @@
-.cx-btn__primary,
-.cx-btn__secondary,
-.cx-btn__tertiary,
-.cx-btn__danger {
-  --highlight-color: var(--cx-color-blue);
-  --highlight-background: var(--cx-color-grey-700);
-  --highlight-size: 500%;
-  --background-transition-duration: 150ms;
-
-  position: relative;
+.cx-chip {
   display: inline-flex;
-  gap: var(--cx-spacing-1);
   align-items: center;
   justify-content: center;
-  text-align: center;
+  padding: var(--cx-spacing-2) var(--cx-spacing-2);
+  gap: var(--cx-spacing-2);
+  border-radius: var(--cx-radius-mini);
+  background-color: var(--cx-color-background-accent-6);
+
+  color: var(--cx-color-text-static-dark);
+  line-height: 1rem;
+  text-transform: uppercase;
   font-size: 0.875rem;
   font-weight: 500;
-  line-height: 1rem;
-  padding: var(--cx-spacing-4) var(--cx-spacing-6);
-  min-width: 6rem;
-  border-radius: var(--cx-radius-pill);
-  transition: scale 20ms ease, background-color var(--background-transition-duration) ease, color 300ms ease,
-    box-shadow 300ms ease;
+  letter-spacing: 0.28px;
+}
 
-  &:active {
-    scale: 0.99;
-  }
+.cx-chip__soft {
+  color: var(--cx-color-text-primary);
+  background-color: var(--cx-color-background-accent-6-soft);
+}
 
-  &:hover,
-  &:focus-visible {
-    --background-transition-duration: 300ms;
-    box-shadow: none;
-    background-color: transparent;
+button.cx-chip {
+  --cx-gradient-highlight: var(--cx-color-background-accent-6-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-6-soft);
 
-    &::before {
-      opacity: 1;
-      transition-duration: 150ms;
-    }
-  }
+  position: relative;
+  border-radius: var(--cx-radius-pill);
+  padding: var(--cx-spacing-3) var(--cx-spacing-10) var(--cx-spacing-3) var(--cx-spacing-4);
+  transition: scale 20ms ease, color 300ms ease, --cx-gradient-highlight 300ms ease, --cx-gradient-background
+    300ms ease;
+  color: var(--cx-color-text-primary);
 
-  &::before {
+  background-image: radial-gradient(
+    ellipse at center,
+    var(--cx-gradient-highlight),
+    var(--cx-gradient-background) 50%,
+    var(--cx-gradient-background)
+  );
+  background-size: 500% 500%;
+  animation: cx-gradient-background-rotation 5s linear infinite;
+
+  &::before,
+  &::after {
     content: "";
     position: absolute;
-    inset: 0;
-    background-image: radial-gradient(
-      ellipse at center,
-      var(--highlight-color),
-      var(--highlight-background) 50%,
-      var(--highlight-background)
-    );
-
-    border-radius: inherit;
-    background-size: var(--highlight-size) var(--highlight-size);
-    background-position: 70% 30%;
-    animation: cx-btn-highlight-rotate 5s linear infinite;
-    transition: opacity 300ms ease;
-    z-index: -1;
-    opacity: 0;
+    right: var(--cx-spacing-2);
+    top: 50%;
+    translate: -50% 0;
+    width: 1rem;
+    height: 0.0625rem;
+    background-color: var(--cx-color-text-primary);
+    transition: background-color 300ms ease;
   }
-}
 
-:is(.cx-btn__primary, .cx-btn__secondary, .cx-btn__tertiary):is(:hover, :focus-visible) {
-  color: var(--cx-color-text-static-light);
-}
+  &::before {
+    rotate: 45deg;
+  }
 
-.cx-btn__primary {
-  color: var(--cx-color-text-inverted);
-  background-color: var(--cx-color-background-accent-1);
-}
+  &::after {
+    rotate: -45deg;
+  }
 
-.cx-btn__secondary {
-  color: var(--cx-color-text-primary);
-  background-color: var(--cx-color-background-primary);
-  box-shadow: inset 0 0 0 1px var(--cx-color-border-primary);
-}
+  &:active {
+    scale: 0.99;
+  }
 
-.cx-btn__tertiary {
-  color: var(--cx-color-text-primary);
+  &:hover,
+  &:focus-visible {
+    color: var(--cx-color-text-static-light);
+    --cx-gradient-highlight: var(--cx-color-blue);
+    --cx-gradient-background: var(--cx-color-grey-700);
 
-  &::before {
-    opacity: 0;
+    &::before,
+    &::after {
+      background-color: var(--cx-color-text-static-light);
+    }
   }
 }
 
-.cx-btn__danger {
-  --highlight-color: var(--cx-color-grey-700);
-  --highlight-background: var(--cx-color-signal-danger);
-  --highlight-size: 700%;
-
-  color: var(--cx-color-text-static-dark);
-  background-color: var(--cx-color-signal-danger);
+/* Basic chip colors */
+.cx-chip__purple {
+  background-color: var(--cx-color-background-accent-6);
 }
 
-.cx-btn__sm {
-  padding: var(--cx-spacing-3) var(--cx-spacing-4);
-  font-size: 0.75rem;
-  min-width: 5rem;
+.cx-chip__dark-blue:not(.cx-chip__soft):not(button) {
+  color: var(--cx-color-text-inverted);
+  background-color: var(--cx-color-background-accent-1);
 }
 
-.cx-btn__lg {
-  padding: var(--cx-spacing-6) var(--cx-spacing-8);
-  font-size: 1.125rem;
+.cx-chip__blue {
+  background-color: var(--cx-color-background-accent-5);
 }
 
-.cx-btn__icon {
-  --icon-size: var(--cx-spacing-6);
-  padding: var(--cx-spacing-3);
-  min-width: unset;
-
-  > * {
-    width: var(--icon-size);
-    height: var(--icon-size);
-  }
+.cx-chip__yellow {
+  background-color: var(--cx-color-background-accent-3);
 }
 
-.cx-btn__icon.cx-btn__sm {
-  --icon-size: var(--cx-spacing-4);
-  padding: var(--cx-spacing-3);
+.cx-chip__green {
+  background-color: var(--cx-color-background-accent-2);
 }
 
-.cx-btn__icon.cx-btn__lg {
-  --icon-size: var(--cx-spacing-8);
-  padding: var(--cx-spacing-4);
+.cx-chip__red {
+  background-color: var(--cx-color-background-accent-4);
 }
 
-@keyframes cx-btn-highlight-rotate {
-  0%,
-  100% {
-    background-position: 70% 30%;
-  }
-
-  5% {
-    background-position: 62% 24%;
-  }
-
-  10% {
-    background-position: 54% 22%;
-  }
-
-  15% {
-    background-position: 46% 22%;
-  }
-
-  20% {
-    background-position: 38% 24%;
-  }
-
-  25% {
-    background-position: 30% 30%;
+/* Soft chip colors */
+.cx-chip__soft {
+  &.cx-chip__purple {
+    background-color: var(--cx-color-background-accent-6-soft);
   }
 
-  30% {
-    background-position: 24% 38%;
+  &.cx-chip__dark-blue {
+    background-color: var(--cx-color-background-accent-1-soft);
   }
 
-  35% {
-    background-position: 22% 46%;
+  &.cx-chip__blue {
+    background-color: var(--cx-color-background-accent-5-soft);
   }
 
-  40% {
-    background-position: 22% 54%;
+  &.cx-chip__yellow {
+    background-color: var(--cx-color-background-accent-3-soft);
   }
 
-  45% {
-    background-position: 24% 62%;
+  &.cx-chip__green {
+    background-color: var(--cx-color-background-accent-2-soft);
   }
 
-  50% {
-    background-position: 30% 70%;
-  }
-
-  55% {
-    background-position: 38% 76%;
-  }
-
-  60% {
-    background-position: 46% 78%;
-  }
-
-  65% {
-    background-position: 54% 78%;
+  &.cx-chip__red {
+    background-color: var(--cx-color-background-accent-4-soft);
   }
+}
 
-  70% {
-    background-position: 62% 76%;
-  }
+/* Removable chip colors */
+button.cx-chip__purple {
+  --cx-gradient-highlight: var(--cx-color-background-accent-6-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-6-soft);
+}
 
-  75% {
-    background-position: 70% 70%;
-  }
+button.cx-chip__dark-blue {
+  --cx-gradient-highlight: var(--cx-color-background-accent-1-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-1-soft);
+}
 
-  80% {
-    background-position: 76% 62%;
-  }
+button.cx-chip__blue {
+  --cx-gradient-highlight: var(--cx-color-background-accent-5-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-5-soft);
+}
 
-  85% {
-    background-position: 78% 54%;
-  }
+button.cx-chip__yellow {
+  --cx-gradient-highlight: var(--cx-color-background-accent-3-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-3-soft);
+}
 
-  90% {
-    background-position: 78% 46%;
-  }
+button.cx-chip__green {
+  --cx-gradient-highlight: var(--cx-color-background-accent-2-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-2-soft);
+}
 
-  95% {
-    background-position: 76% 38%;
-  }
+button.cx-chip__red {
+  --cx-gradient-highlight: var(--cx-color-background-accent-4-soft);
+  --cx-gradient-background: var(--cx-color-background-accent-4-soft);
 }
diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts
deleted file mode 100644
index b47bd10..0000000
--- a/src/components/chip/chip.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-@customElement('cx-chip')
-export class Chip extends LitElement {
-  static styles = css`
-    :host {
-      display: inline-block;
-    }
-
-    .cx-chip {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--cx-spacing-05) var(--cx-spacing-1);
-      gap: var(--cx-spacing-1);
-      border-radius: var(---cx-radius-mini);
-
-      color: var(---cx-color-text-static-dark);
-    }
-  `;
-
-  /**
-   * @description Controls the variant of the chip
-   * @default "display"
-   */
-  @property()
-  variant: 'display' | 'display-soft' | 'removable' = 'display';
-
-  /**
-   * @description Controls the color of the chip
-   * @default "purple"
-   */
-  @property()
-  color: 'purple' | 'dark-blue' | 'blue' | 'yellow' | 'green' | 'red' = 'purple';
-
-  private colorClasses = {
-    purple: this.color === 'purple',
-    'dark-blue': this.color === 'dark-blue',
-    blue: this.color === 'blue',
-    yellow: this.color === 'yellow',
-    green: this.color === 'green',
-    red: this.color === 'red',
-  };
-
-  render() {
-    if (this.variant === 'removable') {
-      return html`
-        <button
-          type="button"
-          class=${classMap({ 'cx-chip': true, soft: true, interactive: true, ...this.colorClasses })}
-        >
-          <slot></slot>
-        </button>
-      `;
-    }
-
-    return html`
-      <div
-        class=${classMap({
-          'cx-chip': true,
-          regular: this.variant === 'display',
-          soft: this.variant === 'display-soft',
-          ...this.colorClasses,
-        })}
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'cx-chip': Chip;
-  }
-}
diff --git a/src/components/chip/index.ts b/src/components/chip/index.ts
deleted file mode 100644
index 4cd623d..0000000
--- a/src/components/chip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './chip';
diff --git a/src/components/chip/package.json b/src/components/chip/package.json
deleted file mode 100644
index 433fe6e..0000000
--- a/src/components/chip/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "@computas/designsystem-chip",
-  "version": "1.0.0",
-  "type": "module",
-  "private": "true",
-  "scripts": {
-    "build": "tsup"
-  },
-  "devDependencies": {
-    "tsup": "^8.3.5"
-  }
-}
diff --git a/src/components/chip/react.ts b/src/components/chip/react.ts
deleted file mode 100644
index 04ac9a9..0000000
--- a/src/components/chip/react.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createComponent } from '@lit/react';
-import * as React from 'react';
-
-import { Chip } from './index';
-
-export const CxChip = createComponent({
-  tagName: 'cx-chip',
-  elementClass: Chip,
-  react: React,
-});
diff --git a/src/global-css/animations.css b/src/global-css/animations.css
new file mode 100644
index 0000000..5525b99
--- /dev/null
+++ b/src/global-css/animations.css
@@ -0,0 +1,82 @@
+@keyframes cx-gradient-background-rotation {
+  0%,
+  100% {
+    background-position: 70% 30%;
+  }
+
+  5% {
+    background-position: 62% 24%;
+  }
+
+  10% {
+    background-position: 54% 22%;
+  }
+
+  15% {
+    background-position: 46% 22%;
+  }
+
+  20% {
+    background-position: 38% 24%;
+  }
+
+  25% {
+    background-position: 30% 30%;
+  }
+
+  30% {
+    background-position: 24% 38%;
+  }
+
+  35% {
+    background-position: 22% 46%;
+  }
+
+  40% {
+    background-position: 22% 54%;
+  }
+
+  45% {
+    background-position: 24% 62%;
+  }
+
+  50% {
+    background-position: 30% 70%;
+  }
+
+  55% {
+    background-position: 38% 76%;
+  }
+
+  60% {
+    background-position: 46% 78%;
+  }
+
+  65% {
+    background-position: 54% 78%;
+  }
+
+  70% {
+    background-position: 62% 76%;
+  }
+
+  75% {
+    background-position: 70% 70%;
+  }
+
+  80% {
+    background-position: 76% 62%;
+  }
+
+  85% {
+    background-position: 78% 54%;
+  }
+
+  90% {
+    background-position: 78% 46%;
+  }
+
+  95% {
+    background-position: 76% 38%;
+  }
+}
diff --git a/src/global-css/purpose-color-tokens.css b/src/global-css/purpose-color-tokens.css
index dea1b93..a12935a 100644
--- a/src/global-css/purpose-color-tokens.css
+++ b/src/global-css/purpose-color-tokens.css
@@ -1,3 +1,23 @@
+/**
+ * These custom properties are meant as semantic tokens
+ * that can be used to animate colors used in gradients.
+ * We define them globally, so that we don't need to define
+ * custom properties each time we want to animate a colors.
+ */
+@layer cx-gradient-background-colors {
+  @property --cx-gradient-highlight {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+  }
+
+  @property --cx-gradient-background {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+  }
+}
+
 @layer computas-purpose-color-tokens {
   .cx-theme-light,
   :root:not(.cx-theme-dark) {

From 23a7013aa4ee893954e0558eb203ed7d497c3c78 Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Mon, 2 Dec 2024 16:17:30 +0100
Subject: [PATCH 4/7] docs: update subtitle for button- and chip-docs

---
 src/components/button/Overview.mdx | 6 +-----
 src/components/chip/Overview.mdx   | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/button/Overview.mdx b/src/components/button/Overview.mdx
index 1e06d83..8f1c62f 100644
--- a/src/components/button/Overview.mdx
+++ b/src/components/button/Overview.mdx
@@ -5,11 +5,7 @@ import * as buttonStories from "./button.stories";
 <Meta of={buttonStories} />
 
 <Title />
-<Subtitle>
-  The input component is implemented using only CSS. It is required that the top
-  level element is a `label` element, since this enforces good accessibility.
-  Below you'll find the different appearances that are currently supported.
-</Subtitle>
+<Subtitle>The button component is implemented using only CSS.</Subtitle>
 
 ### Primary
 
diff --git a/src/components/chip/Overview.mdx b/src/components/chip/Overview.mdx
index 0fd87fe..b49b858 100644
--- a/src/components/chip/Overview.mdx
+++ b/src/components/chip/Overview.mdx
@@ -5,11 +5,7 @@ import * as stories from "./chip.stories";
 <Meta of={stories} />
 
 <Title />
-<Subtitle>
-  The input component is implemented using only CSS. It is required that the top
-  level element is a `label` element, since this enforces good accessibility.
-  Below you'll find the different appearances that are currently supported.
-</Subtitle>
+<Subtitle>The chip component is implemented using only CSS.</Subtitle>
 
 ### Display
 

From 1c29919cc8acdc89320fde2d635b9853a0337425 Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Mon, 2 Dec 2024 16:18:26 +0100
Subject: [PATCH 5/7] chore: fix typo

---
 src/global-css/purpose-color-tokens.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/global-css/purpose-color-tokens.css b/src/global-css/purpose-color-tokens.css
index a12935a..4412212 100644
--- a/src/global-css/purpose-color-tokens.css
+++ b/src/global-css/purpose-color-tokens.css
@@ -2,7 +2,7 @@
  * These custom properties are meant as semantic tokens
  * that can be used to animate colors used in gradients.
  * We define them globally, so that we don't need to define
- * custom properties each time we want to animate a colors.
+ * custom properties each time we want to animate colors in gradients.
  */
 @layer cx-gradient-background-colors {
   @property --cx-gradient-highlight {

From 20c2bab119cd332d2f2de624059b01b27c67ec8a Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Mon, 2 Dec 2024 20:47:44 +0100
Subject: [PATCH 6/7] chore(chip): merge padding into a single value

---
 src/components/chip/chip.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
index 4c7fae3..4e81276 100644
--- a/src/components/chip/chip.css
+++ b/src/components/chip/chip.css
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--cx-spacing-2) var(--cx-spacing-2);
+  padding: var(--cx-spacing-2);
   gap: var(--cx-spacing-2);
   border-radius: var(--cx-radius-mini);
   background-color: var(--cx-color-background-accent-6);

From a72646d90831ec0269b5aee1dded64224cbef07d Mon Sep 17 00:00:00 2001
From: Erik Tallang <e.tallang@gmail.com>
Date: Mon, 2 Dec 2024 22:16:18 +0100
Subject: [PATCH 7/7] feat(chip, button): slow down hover gradient rotation

---
 src/components/button/button.css | 2 +-
 src/components/chip/chip.css     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button/button.css b/src/components/button/button.css
index c3a043f..8f8822e 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -29,7 +29,7 @@
     var(--cx-gradient-background)
   );
   background-size: var(--cx-gradient-highlight-size) var(--cx-gradient-highlight-size);
-  animation: cx-gradient-background-rotation 5s linear infinite;
+  animation: cx-gradient-background-rotation 7s linear infinite;
 
   &:active {
     scale: 0.99;
diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
index 4e81276..ebd8b3d 100644
--- a/src/components/chip/chip.css
+++ b/src/components/chip/chip.css
@@ -38,7 +38,7 @@ button.cx-chip {
     var(--cx-gradient-background)
   );
   background-size: 500% 500%;
-  animation: cx-gradient-background-rotation 5s linear infinite;
+  animation: cx-gradient-background-rotation 7s linear infinite;
 
   &::before,
   &::after {