From deb2ce691ac0636e16634f850dced59322180fe5 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 14 Nov 2024 10:22:06 +0100
Subject: [PATCH 1/2] Update overlay color

---
 v2/pink-sb/src/lib/Skeleton.svelte | 2 +-
 v2/pink-sb/src/themes/dark.json    | 1 +
 v2/pink-sb/src/themes/light.json   | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/Skeleton.svelte b/v2/pink-sb/src/lib/Skeleton.svelte
index fe681ee2c..20efb2ae6 100644
--- a/v2/pink-sb/src/lib/Skeleton.svelte
+++ b/v2/pink-sb/src/lib/Skeleton.svelte
@@ -19,7 +19,7 @@
         background-image: linear-gradient(
             90deg,
             var(--color-bgcolor-neutral-tertiary) 25%,
-            var(--color-overlay-neutral-hover) 50%,
+            var(--color-overlay-skeleton) 50%,
             var(--color-bgcolor-neutral-tertiary) 75%
         );
         background-size: 200% 100%;
diff --git a/v2/pink-sb/src/themes/dark.json b/v2/pink-sb/src/themes/dark.json
index 4cf2e8252..3599f3e0a 100644
--- a/v2/pink-sb/src/themes/dark.json
+++ b/v2/pink-sb/src/themes/dark.json
@@ -108,6 +108,7 @@
     "color-overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
     "color-overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
     "color-overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
+    "color-overlay-skeleton": "rgba(255, 255, 255, 8%)",
     "color-overlay-scrim": "rgba(0, 0, 0, 48%)",
     "gradient-border-button-secondary-bottom": "var(--color-border-neutral-strong)",
     "gradient-border-button-secondary-top": "var(--color-border-neutral)",
diff --git a/v2/pink-sb/src/themes/light.json b/v2/pink-sb/src/themes/light.json
index 5c7088955..837b7d724 100644
--- a/v2/pink-sb/src/themes/light.json
+++ b/v2/pink-sb/src/themes/light.json
@@ -108,6 +108,7 @@
     "color-overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
     "color-overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
     "color-overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
+    "color-overlay-skeleton": "rgba(25, 25, 28, 4%)",
     "color-overlay-scrim": "rgba(25, 25, 28, 80%)",
     "gradient-border-button-secondary-bottom": "var(--color-border-neutral)",
     "gradient-border-button-secondary-top": "var(--color-border-neutral-strong)",

From 9c1e782c0fae08e8241c989ea3450d4cdb4ac3ad Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 14 Nov 2024 10:34:09 +0100
Subject: [PATCH 2/2] Add story

---
 v2/pink-sb/src/lib/index.ts                   |  1 +
 .../src/stories/Skeleton.stories.svelte       | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 v2/pink-sb/src/stories/Skeleton.stories.svelte

diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index 22314eb3a..3e3c2a56e 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -19,6 +19,7 @@ export { default as ActionList } from './action-list/index.js';
 export { default as Upload } from './upload/index.js';
 export { default as Dialog } from './Dialog.svelte';
 export { default as Empty } from './Empty.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
 export { default as Keyboard } from './Keyboard.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Pagination } from './Pagination.svelte';
diff --git a/v2/pink-sb/src/stories/Skeleton.stories.svelte b/v2/pink-sb/src/stories/Skeleton.stories.svelte
new file mode 100644
index 000000000..7c320389a
--- /dev/null
+++ b/v2/pink-sb/src/stories/Skeleton.stories.svelte
@@ -0,0 +1,34 @@
+<script context="module" lang="ts">
+    import { Skeleton } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/Skeleton',
+        component: Skeleton,
+        args: {
+            variant: 'circle',
+            width: 44,
+            height: 12
+        },
+        argTypes: {
+            variant: {
+                options: ['circle', 'square', 'line'],
+                control: { type: 'select' }
+            }
+        }
+    };
+</script>
+
+<div class="wrapper">
+    <Story name="Default" let:args>
+        <Skeleton {...args} />
+    </Story>
+</div>
+
+<style>
+    .wrapper {
+        margin: 100px auto;
+        width: 400px;
+    }
+</style>