feat: Allow color gradient in color swatch (#1074)

* Allow color gradient in color swatch

* Add story

Author: bjarnef

packages/uui-color-swatch/lib/uui-color-swatch.element.ts

@@ -129,7 +129,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         <div class="color-swatch color-swatch--transparent-bg">
           <div
             class="color-swatch__color"
-            style="background-color: var(--uui-swatch-color, ${this.color ??
+            style="background: var(--uui-swatch-color, ${this.color ??
             this.value})"></div>
           <div
             class="color-swatch__check"

packages/uui-color-swatch/lib/uui-color-swatch.story.ts

@@ -114,3 +114,12 @@ export const Transparent: Story = {
     value: 'rgba(209, 2, 26, 0.4)',
   },
 };
+
+export const Gradient: Story = {
+  args: {
+    value: 'sun',
+    color: 'radial-gradient(orange, red)',
+    label: 'Sun',
+    showLabel: true,
+  },
+};

packages/uui-color-swatches/lib/uui-color-swatches.story.ts

@@ -5,18 +5,57 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { spread } from '../../../storyhelpers';
 import { repeat } from 'lit/directives/repeat.js';
 
-const swatchesColor = [
+const swatches = [
   { label: 'Blood Orange', value: '#d0021b' },
   { label: 'Avocado', value: '#417505' },
   { label: 'Tufts Blue', value: '#4a90e2' },
 ];
 
+const gradients = [
+  {
+    label: 'Vital Ocean',
+    value: 'ocean',
+    color:
+      'linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%)',
+  },
+  {
+    label: 'Disco Club',
+    value: 'avocado',
+    color:
+      'radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%)',
+  },
+  {
+    label: 'Deep Sunset',
+    value: 'sunset',
+    color:
+      'linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%)',
+  },
+  {
+    label: 'Bubble Gum',
+    value: 'gum',
+    color:
+      'radial-gradient(circle,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)',
+  },
+  {
+    label: 'Blue Lagoon',
+    value: 'lagoon',
+    color:
+      'linear-gradient(90deg,rgba(67, 198, 172, 1) 0%, rgba(25, 22, 84, 1) 100%)',
+  },
+  {
+    label: 'Lemon Twist',
+    value: 'lemon-twist',
+    color:
+      'linear-gradient(90deg,rgba(60, 165, 92, 1) 0%, rgba(181, 172, 73, 1) 100%)',
+  },
+];
+
 const meta: Meta = {
   id: 'uui-color-swatches',
   component: 'uui-color-swatches',
   title: 'Inputs/Color/Color Swatches',
   args: {
-    swatches: swatchesColor,
+    swatches: swatches,
   },
   argTypes: {
     value: { control: { type: 'color' } },
@@ -26,14 +65,17 @@ const meta: Meta = {
   render: (args: any) => html`
 <uui-color-swatches
   ${spread(args, ['swatches', 'showLabel'])}
-  label="My color pallette">${repeat(args.swatches, (swatch: any) => {
+  label="My color palette">${repeat(args.swatches, (swatch: any) => {
     const label = typeof swatch === 'string' ? swatch : swatch.label;
     const value = typeof swatch === 'string' ? swatch : swatch.value;
+    const color = typeof swatch === 'string' ? swatch : swatch.color;
     return html`
   <uui-color-swatch
     label="${label}"
     .showLabel=${args.showLabel}
-    .value=${value}></uui-color-swatch>`;
+    .color="${color}"
+    .value=${value}>
+  </uui-color-swatch>`;
   })}
 </uui-color-swatches>
   `,
@@ -72,3 +114,11 @@ export const ShowLabel: Story = {
     showLabel: true,
   },
 };
+
+export const Gradient: Story = {
+  args: {
+    swatches: gradients,
+    showLabel: true,
+    value: 'lemon-twist',
+  },
+};