Update spinner colours & default variant (#77)

Co-authored-by: Claude <claude@users.noreply.github.com>

Author: Shrinks99

packages/demo/src/content/components/spinner.mdx

@@ -5,50 +5,69 @@ heading: "Spinner"
 
 import { Spinner } from "@eqtylab/equality";
 
-## Size Variants
+## Overview
 
-### Extra Small (xs)
+The Spinner component provides a visual loading indicator to communicate that content or an action is in progress. Use it when fetching data, submitting forms, or during any asynchronous operation where the user should wait.
 
-<Spinner client:only="react" size="xs" />
+## Usage
 
-### Small (sm)
+Import the component:
 
-<Spinner client:only="react" size="sm" />
-
-### Medium (md) - Default
-
-<Spinner client:only="react" size="md" />
-
-### Large (lg)
-
-<Spinner client:only="react" size="lg" />
-
-### Extra Large (xl)
-
-<Spinner client:only="react" size="xl" />
-
-## Color Variants
-
-This component supports color variants using either the brand primary color or status options. Available variants are `primary` (brand primary color), `success`, `danger`, and `warning`. Use these to visually distinguish loading spinners according to your design needs.
-
-The special `neutral` variant adapts the spinner to use the primary text color, automatically switching between light and dark themes according to your app's current appearance mode.
-
-### Neutral
-
-<Spinner client:only="react" variant="neutral" />
-
-### Primary
-
-<Spinner client:only="react" variant="primary" />
-
-### Success
-
-<Spinner client:only="react" variant="success" />
-
-### Danger
-
-<Spinner client:only="react" variant="danger" />
-
-### Warning
-
-<Spinner client:only="react" variant="warning" />
+```ts
+import { Spinner } from "@eqtylab/equality";
+```
+
+Basic usage with default properties:
+
+```tsx
+<Spinner />
+```
+
+## Variants
+
+### Size
+
+The Spinner supports five size variants to fit different contexts, from inline indicators to full-page loading states.
+
+<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+  <Spinner client:only="react" size="xs" />
+  <Spinner client:only="react" size="sm" />
+  <Spinner client:only="react" size="md" />
+  <Spinner client:only="react" size="lg" />
+  <Spinner client:only="react" size="xl" />
+</div>
+
+```tsx
+<Spinner size="xs" />
+<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner size="lg" />
+<Spinner size="xl" />
+```
+
+### Color
+
+The Spinner supports color variants using either the brand primary color or status options.
+
+<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+  <Spinner client:only="react" variant="neutral" />
+  <Spinner client:only="react" variant="primary" />
+  <Spinner client:only="react" variant="success" />
+  <Spinner client:only="react" variant="danger" />
+  <Spinner client:only="react" variant="warning" />
+</div>
+
+```tsx
+<Spinner variant="neutral" />
+<Spinner variant="primary" />
+<Spinner variant="success" />
+<Spinner variant="danger" />
+<Spinner variant="warning" />
+```
+
+## Props
+
+| Name      | Description                           | Type                                                 | Default   | Required |
+| --------- | ------------------------------------- | ---------------------------------------------------- | --------- | -------- |
+| `size`    | Controls the size of the spinner      | `xs`, `sm`, `md`, `lg`, `xl`                         | `md`      | ❌       |
+| `variant` | Sets the color variant of the spinner | `neutral`, `primary`, `success`, `danger`, `warning` | `primary` | ❌       |

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
@@ -16,6 +16,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"

packages/ui/src/components/spinner/spinner.module.css

@@ -12,7 +12,7 @@
 }
 
 .spinner-background {
-  @apply border-greyscale-800;
+  @apply border-background-sunken;
   @apply rounded-full;
   @apply absolute inset-0;
 }

packages/ui/src/components/spinner/spinner.tsx

@@ -6,7 +6,7 @@ interface SpinnerProps {
   variant?: 'neutral' | 'primary' | 'success' | 'danger' | 'warning';
 }
 
-export const Spinner = ({ size = 'md', variant = 'neutral' }: SpinnerProps) => {
+export const Spinner = ({ size = 'md', variant = 'primary' }: SpinnerProps) => {
   return (
     <div className={styles['spinner-container']}>
       <div className={cn(styles['spinner'], styles[size], styles[variant])} />