Implement chip

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",

global-styles.css

@@ -13,8 +13,10 @@
 @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";
+@import "src/components/chip/chip.css";
 @import "src/components/form-field/form-field.css";
 @import "src/components/input/input.css";

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
 

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,43 +15,32 @@
   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;
   }
 
   &: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%;
-  }
-}

src/components/chip/Overview.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Subtitle, Title } from "@storybook/blocks";
+
+import * as stories from "./chip.stories";
+
+<Meta of={stories} />
+
+<Title />
+<Subtitle>The chip component is implemented using only CSS.</Subtitle>
+
+### Display
+
+<Canvas of={stories.Display} />
+
+### Display soft
+
+<Canvas of={stories.DisplaySoft} />
+
+### Removable
+
+<Canvas of={stories.Removable} />