Add base Panel component, add Button component based on Panel

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/barbi.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="EMPTY_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/codeStyles/Project.xml

+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file

.idea/codeStyles/codeStyleConfig.xml

+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file

.idea/jsLibraryMappings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/barbi.iml" filepath="$PROJECT_DIR$/.idea/barbi.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/prettier.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.storybook/main.ts

 import type { StorybookConfig } from '@storybook/sveltekit';
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|ts|svelte)"
-  ],
-  "addons": [
-    "@storybook/addon-svelte-csf",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/sveltekit",
-    "options": {}
-  }
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		'@storybook/addon-svelte-csf',
+		'@storybook/addon-essentials',
+		'@chromatic-com/storybook',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/sveltekit',
+		options: {}
+	}
 };
-export default config;
\ No newline at end of file
+export default config;

.storybook/preview.ts

-import type { Preview } from '@storybook/svelte'
+import type { Preview } from '@storybook/svelte';
 
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	},
 };
 
-export default preview;
\ No newline at end of file
+export default preview;

README.md

-# create-svelte
+# Barbi Components
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Barbi is a neo-brutalist web framework for Svelte, so named after famous brutalist structure The Barbican, in London, England.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+## Installation
 
-## Creating a project
+`npm install barbi@placeholder`
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Usage
 
-```bash
-# create a new project in the current directory
-npx sv create
+### Style
 
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+To ensure component styling, include the `<BarbiTheme />` component in your application. This includes two style tags:
+a basic css reset and a definition for the css variables used by the rest of the framework. The reset can be omitted by
+setting the `no-reset` prop on the theme component. Individual variables can be set to custom values by including them
+as props.
 
-```bash
-npm run dev
+```sveltehtml
+<script>
+  import { BarbiTheme } from 'barbi'
+</script>
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+<BarbiTheme no-reset colour-primary="#FF0000"  />
+<!-- Rest of the app -->
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+### Components

package.json

@@ -20,7 +20,12 @@
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"!dist/**/*.stories.*",
+		"src/lib",
+		"!src/lib/**/*.test.*",
+		"!src/lib/**/*.spec.*",
+		"!src/lib/**/*.stories.*"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -32,6 +37,9 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./barbi.css": {
+			"default": "./dist/barbi.css"
 		}
 	},
 	"peerDependencies": {

src/lib/atoms/Button.stories.svelte

+<script module>
+	import { BarbiTheme, Button } from '$lib';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Components/Atoms/Button',
+		component: Button,
+	});
+</script>
+
+<Story name="Simple Button">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Button {...args}>Click Me</Button>
+	{/snippet}
+</Story>
+
+<Story name="Button Variants">
+	{#snippet children(args)}
+		<BarbiTheme />
+
+		<div class="storyboard-grid">
+			<Button {...args} variant="primary">Primary</Button>
+			<Button {...args} variant="secondary">Secondary</Button>
+			<Button {...args} variant="success">Success</Button>
+			<Button {...args} variant="error">Error</Button>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Link Button">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Button href="https://example.com" {...args}>I have a href</Button>
+	{/snippet}
+</Story>
+
+<Story name="Disabled Button">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Button disabled {...args}>You cant click me</Button>
+	{/snippet}
+</Story>
+
+<Story name="Invisible Button">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<p>There is a button on this page, but you can't see it. Use the `placeholder` prop to create a button that occupies only vertical space,
+			with no interaction available. Useful for reserving space.</p>
+		<Button placeholder {...args}>You aren't able to see this button at all!</Button>
+	{/snippet}
+</Story>
+
+<style>
+	.storyboard-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+			grid-auto-rows: max-content;
+			gap: var(--spacing-md);
+	}
+</style>

src/lib/atoms/Button.svelte

+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import Panel from './Panel.svelte';
+
+	export type Props = {
+		children?: HTMLButtonAttributes['children'],
+		variant?: 'primary' | 'secondary' | 'success' | 'error'
+	}
+
+	const { children, variant, placeholder, ...props }: Props = $props()
+	const tag = $derived(props.href != null ? 'a' : 'button')
+
+</script>
+
+<Panel class={['barbi-button', `barbi-button-${variant}`, !!placeholder && 'placeholder']} space="sm" {...props} tag={tag} hover active onclick={() => alert("foo")}>
+	{@render children?.()}
+</Panel>
+
+<style>
+	:global {
+			a.panel.barbi-button,
+			.panel.barbi-button a {
+					text-decoration: none;
+      }
+			.panel.barbi-button {
+					cursor: pointer;
+					--component-background: var(--colour-primary);
+			}
+
+			.panel.barbi-button.placeholder {
+					cursor: inherit;
+					pointer-events: none !important;
+					width: 0 !important;
+					opacity: 0 !important;
+			}
+
+			.panel.barbi-button:disabled {
+					cursor: not-allowed;
+					--component-background: var(--colour-concrete);
+					--component-colour: var(--colour-slate);
+          --border-colour: var(--colour-steel);
+					--colour-shadow: var(--colour-steel);
+			}
+
+			.panel.barbi-button:hover:not(:disabled) {
+					cursor: pointer;
+					--component-background: var(--colour-secondary);
+			}
+
+			.panel.barbi-button.barbi-button-primary:not(:disabled) {
+					--component-background: var(--colour-primary);
+			}
+      .panel.barbi-button.barbi-button-primary:hover:not(:disabled) {
+					--component-background: var(--colour-secondary);
+      }
+
+			.panel.barbi-button.barbi-button-secondary:not(:disabled) {
+					--component-background: var(--colour-emphasis);
+			}
+      .panel.barbi-button.barbi-button-secondary:hover:not(:disabled) {
+					--component-background: var(--colour-mustard);
+      }
+
+			.panel.barbi-button.barbi-button-success:not(:disabled) {
+					--component-background: var(--colour-success);
+			}
+      .panel.barbi-button.barbi-button-success:hover:not(:disabled) {
+					--component-background: var(--colour-pastel);
+      }
+
+			.panel.barbi-button.barbi-button-error:not(:disabled) {
+					--component-background: var(--colour-error);
+			}
+      .panel.barbi-button.barbi-button-error:hover:not(:disabled) {
+					--component-background: var(--colour-mustard);
+      }
+
+	}
+</style>
\ No newline at end of file

src/lib/atoms/Panel.stories.svelte

+<script module>
+	import { BarbiTheme, Panel } from '$lib';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Components/Atoms/Panel',
+		component: Panel,
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Simple Panel">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Panel {...args}>
+			The most basic panel type
+		</Panel>
+		<Panel flat {...args}>
+			A basic panel without shadow
+		</Panel>
+	{/snippet}
+</Story>
+
+<Story name="Sizable Panel">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Panel space="none" {...args}>
+			space="none"
+		</Panel>
+		<Panel space="sm" {...args}>
+			space="sm"
+		</Panel>
+		<Panel space="md" {...args}>
+			space="md"
+		</Panel>
+		<Panel space="lg" {...args}>
+			space="lg"
+		</Panel>
+	{/snippet}
+</Story>
+
+<Story name="Coloured Panel">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<div class="storyboard-grid">
+			<Panel variant="primary" {...args}>
+				variant="primary"
+			</Panel>
+			<Panel variant="secondary" {...args}>
+				variant="secondary"
+			</Panel>
+			<Panel variant="success" {...args}>
+				variant="success"
+			</Panel>
+			<Panel variant="error" {...args}>
+				variant="error"
+			</Panel>
+			<Panel variant="emphasis" {...args}>
+				variant="emphasis"
+			</Panel>
+			<Panel variant="mustard" {...args}>
+				variant="mustard"
+			</Panel>
+			<Panel variant="pastel" {...args}>
+				variant="pastel"
+			</Panel>
+			<Panel variant="brick" {...args}>
+				variant="brick"
+			</Panel>
+			<Panel variant="neon" {...args}>
+				variant="neon"
+			</Panel>
+			<Panel variant="slate" {...args}>
+				variant="slate"
+			</Panel>
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Hover Effect Panel">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Panel {...args} hover>
+			hover={true}
+		</Panel>
+	{/snippet}
+</Story>
+
+<Story name="Press Effect Panel">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<Panel {...args} hover active>
+			hover={true} active={true}
+		</Panel>
+		<Panel {...args} tag="button" hover active>
+			hover={true} active={true}
+		</Panel>
+	{/snippet}
+</Story>
+
+
+<style>
+	.storyboard-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+			grid-auto-rows: max-content;
+			gap: var(--spacing-md);
+	}
+</style>

src/lib/atoms/Panel.svelte

+<script lang="ts" generics="Tag extends keyof HTMLElementTagNameMap">
+	type Props = {
+		tag?: Tag;
+		variant?: 'primary' | 'secondary' | 'success' | 'error' | 'emphasis' | 'default';
+		space?: 'none' | 'sm' | 'md' | 'lg';
+		shadow?: 'none' | 'sm' | 'md' | 'lg';
+		borderless?: boolean;
+		rounded?: boolean;
+		hover?: boolean;
+		active?: boolean;
+		disabled?: boolean;
+		flat?: boolean;
+		full?: boolean;
+	} & HTMLElement;
+
+	const {
+		// @ts-ignore
+		tag = 'div',
+		variant = 'default',
+		space = 'md',
+		shadow = 'md',
+		borderless = false,
+		rounded = false,
+		hover = false,
+		active = false,
+		disabled = false,
+		full = false,
+		flat = false,
+		class: className,
+		children = null,
+		...rest
+	}: Props<Tag> = $props();
+</script>
+
+<svelte:element
+	this={tag}
+	class={[
+		'panel',
+		className,
+		{
+			'shadow-sm': shadow === 'sm',
+			'shadow-md': shadow === 'md',
+			'shadow-lg': shadow === 'lg',
+			hover,
+			active,
+			full,
+			rounded,
+			borderless,
+			disabled,
+			flat
+		},
+		space,
+		variant
+	]}
+	{disabled}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.panel {
+		--component-background: var(--colour-background);
+		--component-colour: var(--colour-contrast);
+
+		display: inline-block;
+		padding: var(--spacing-md);
+		background-color: var(--component-background);
+		color: var(--component-colour);
+		border: var(--border-width) var(--border-style) var(--border-colour);
+		transition: all var(--transition-medium);
+	}
+
+	.panel:not(.flat) {
+		transform: translate3d(0, 0, 0);
+		box-shadow: var(--shadow-md);
+	}
+
+	.panel.primary {
+		--component-background: var(--colour-primary);
+	}
+	.panel.secondary {
+		--component-background: var(--colour-secondary);
+	}
+	.panel.success {
+		--component-background: var(--colour-success);
+	}
+	.panel.error {
+		--component-background: var(--colour-error);
+	}
+	.panel.emphasis {
+		--component-background: var(--colour-emphasis);
+	}
+	.panel.brick {
+		--component-background: var(--colour-brick);
+	}
+	.panel.slate {
+		--component-background: var(--colour-slate);
+		--component-colour: var(--colour-concrete);
+	}
+	.panel.mustard {
+		--component-background: var(--colour-mustard);
+	}
+	.panel.pastel {
+		--component-background: var(--colour-pastel);
+	}
+	.panel.neon {
+		--component-background: var(--colour-neon);
+	}
+
+	.panel.none {
+		padding: 0;
+	}
+	.panel.sm {
+		padding: var(--spacing-sm);
+	}
+	.panel.lg {
+		padding: var(--spacing-lg);
+	}
+
+	.panel.shadow-sm:not(.flat) {
+		box-shadow: var(--shadow-sm);
+	}
+	.panel.shadow-md:not(.flat) {
+		box-shadow: var(--shadow-md);
+	}
+	.panel.shadow-lg:not(.flat) {
+		box-shadow: var(--shadow-lg);
+	}
+
+	.panel.borderless {
+		border: none;
+	}
+	.panel.rounded {
+		border-radius: var(--spacing-sm);
+	}
+
+	.panel.hover:hover:not(.disabled):not(.flat) {
+		transform: translate3d(-2px, -2px, 0);
+		box-shadow: var(--shadow-lg);
+	}
+
+	.panel.hover.active:hover:not(.disabled):not(.flat) {
+		transform: translate3d(2px, 2px, 0);
+		box-shadow: var(--shadow-sm);
+	}
+
+	.panel.hover.active:active:not(.disabled):not(.flat) {
+		transform: translate3d(5px, 5px, 0);
+		box-shadow: none;
+	}
+
+	.panel.full {
+		width: 100%;
+	}
+</style>

src/lib/index.ts

-// Reexport your entry components here
+import BarbiTheme from './theme/BarbiTheme.svelte';
+import Panel from './atoms/Panel.svelte';
+import Button from './atoms/Button.svelte';
+import CheckerboardPattern from './patterns/CheckerboardPattern.svelte';
+
+export { BarbiTheme, CheckerboardPattern, Panel, Button };

src/lib/patterns/CheckerboardPattern.stories.svelte

+<script module>
+	import { BarbiTheme, CheckerboardPattern } from '$lib';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Components/Patterns/Checkerboard',
+		component: CheckerboardPattern,
+		// tags: ['autodocs'],
+		argTypes: {
+			scale: { name: 'Scale', control: 'number' },
+			scrollDirection: { name: 'Scroll Direction', control: 'radio', options: [null, 'up-left'] },
+		},
+		args: {
+			scale: 1,
+		}
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Default Pattern">
+	{#snippet children(args)}
+		<BarbiTheme />
+		<CheckerboardPattern {...args} />
+	{/snippet}
+</Story>
+
+<Story
+	name="Modified Colours"
+	args={{ style: '--pattern-light: #ECA400; --pattern-dark: #27476E;', scale: 2 }}
+>
+	{#snippet children(args)}
+		<BarbiTheme />
+		<CheckerboardPattern {...args} />
+	{/snippet}
+</Story>
+
+<Story
+	name="Scaled Pattern"
+	args={{ scale: 4 }}
+>
+	{#snippet children(args)}
+		<BarbiTheme />
+		<CheckerboardPattern {...args} />
+	{/snippet}
+</Story>
+
+<Story
+	name="Scrolling Pattern"
+	args={{ scale: 4, scrollDirection: 'up-left' }}
+>
+	{#snippet children(args)}
+		<BarbiTheme />
+		<CheckerboardPattern {...args} />
+	{/snippet}
+</Story>

src/lib/patterns/CheckerboardPattern.svelte

+<script>
+	const { scale = 1, scrollDirection = undefined, class: className = undefined, ...props } = $props();
+
+	let height = $state(0)
+	let width = $state(0)
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 {width/scale} {height/scale}"
+	width="100%"
+	height="100%"
+	class={className}
+	bind:clientHeight={height}
+	bind:clientWidth={width}
+	{...props}
+>
+	<defs>
+		<pattern id="checks" patternUnits="userSpaceOnUse" width="16" height="16" class={scrollDirection ? ['scroll', scrollDirection] : []}>
+			<rect width="16" height="16" fill="var(--pattern-light)" />
+			<rect width="8" height="8" x="0" y="0" fill="var(--pattern-dark)" />
+			<rect width="8" height="8" x="8" y="8" fill="var(--pattern-dark)" />
+		</pattern>
+	</defs>
+	<rect width="100%" height="100%" fill="url(#checks)" />
+</svg>
+
+<style>
+		.scroll {
+				animation: scroll-up-left 2s linear infinite;
+		}
+
+		.scroll.up-left {
+				animation-name: scroll-up-left;
+		}
+
+		@keyframes scroll-up-left {
+				0% {
+						transform: translate3d(0px, 0px, 0px);
+				}
+				100% {
+						transform: translate3d(-16px, -16px, 0px);
+				}
+    }
+</style>
\ No newline at end of file

src/lib/theme/BarbiTheme.svelte

+<script lang="ts">
+	export type CSSVariableName =
+		| 'colour-background'
+		| 'colour-white'
+		| 'colour-black'
+		| 'colour-contrast'
+		| 'colour-primary'
+		| 'colour-secondary'
+		| 'colour-success'
+		| 'colour-error'
+		| 'colour-emphasis'
+		| 'colour-concrete'
+		| 'colour-brick'
+		| 'colour-steel'
+		| 'colour-neon'
+		| 'colour-mustard'
+		| 'colour-pastel'
+		| 'colour-slate';
+
+	type Overrides = {
+		[key in CSSVariableName]?: string;
+	};
+
+	export type Props = {
+		'no-reset'?: boolean;
+	} & Overrides;
+
+	const { 'no-reset': noReset, ...props }: Props = $props();
+</script>
+
+<svelte:head>
+	{#if !noReset}
+		<style id="barbi-reset">
+			*,
+			*::before,
+			*::after {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				font-family: var(--font-family-heading);
+				font-weight: bold;
+				text-transform: uppercase;
+			}
+
+			h1 {
+				font-size: var(--font-size-h1);
+			}
+			h2 {
+				font-size: var(--font-size-h2);
+			}
+			h3 {
+				font-size: var(--font-size-h3);
+			}
+			h4 {
+				font-size: var(--font-size-h4);
+			}
+
+			button {
+          font-family: var(--font-family-body);
+          font-size: var(--font-size-base);
+          color: var(--colour-text);
+          line-height: 1.25;
+			}
+
+			/* Set core body defaults */
+			body {
+				font-family: var(--font-family-body);
+				font-size: var(--font-size-base);
+				color: var(--colour-text);
+				background-color: var(--colour-background);
+				line-height: 1.25;
+			}
+		</style>
+	{/if}
+
+	{@html `
+		<style id="barbi-theme">
+				:root {
+					/* Primary Colours */
+          --colour-primary: ${props['colour-primary'] ?? '#4ecdc4'};
+          --colour-secondary: ${props['colour-secondary'] ?? '#ffd93d'};
+          --colour-success: ${props['colour-success'] ?? '#6bff8c'};
+          --colour-error: ${props['colour-error'] ?? '#ff6b6b'};
+          --colour-emphasis: ${props['colour-emphasis'] ?? '#b967ff'};
+
+					/* Shades */
+          --colour-white: ${props['colour-white'] ?? '#ffffff'};
+          --colour-background: ${props['colour-background'] ?? '#f0f0f0'};
+          --colour-concrete: ${props['colour-concrete'] ?? '#c2c2c2'};
+          --colour-steel: ${props['colour-steel'] ?? '#7f8c8d'};
+          --colour-slate: ${props['colour-slate'] ?? '#34495e'};
+          --colour-contrast: ${props['colour-contrast'] ?? '#1a1a1a'};
+          --colour-black: ${props['colour-black'] ?? '#000000'};
+
+          /* Alternate Colours */
+          --colour-brick: ${props['colour-brick'] ?? '#e74c3c'};
+          --colour-neon: ${props['colour-neon'] ?? '#39ff14'};
+          --colour-mustard: ${props['colour-mustard'] ?? '#f39c12'};
+          --colour-pastel: ${props['colour-pastel'] ?? '#fdcb6e'};
+
+					--colour-text: var(--colour-contrast);
+					--colour-shadow: var(--colour-contrast);
+
+					--pattern-light: var(--colour-background);
+					--pattern-dark: var(--colour-steel);
+
+					--colour-button: var(--colour-primary);
+					--colour-button-active: var(--colour-secondary);
+					--colour-button-icon: var(--colour-contrast);
+					--colour-button-icon-active: var(--colour-primary);
+
+					/* Typography */
+					--font-family-heading: "Arial Black", "Helvetica", sans-serif;
+					--font-family-body: "Courier New", monospace;
+					--font-size-base: 16px;
+					--font-size-h1: 3rem;
+					--font-size-h2: 2.5rem;
+					--font-size-h3: 2rem;
+					--font-size-h4: 1.5rem;
+					--font-size-small: 0.875rem;
+
+					/* Spacing */
+					--spacing-xs: 0.25rem;
+					--spacing-sm: 0.5rem;
+					--spacing-md: 1rem;
+					--spacing-lg: 2rem;
+					--spacing-xl: 4rem;
+
+					/* Shadows */
+					--shadow-sm: 3px 3px 0 var(--colour-shadow);
+					--shadow-md: 5px 5px 0 var(--colour-shadow);
+					--shadow-lg: 8px 8px 0 var(--colour-shadow);
+
+					/* Transitions */
+					--transition-fast: 0.2s ease;
+					--transition-medium: 0.3s ease;
+					--transition-slow: 0.5s ease;
+
+					/* Border */
+					--border-width: 3px;
+					--border-style: solid;
+					--border-colour: var(--colour-contrast);
+
+					/* Gradients */
+					--gradient-hsl: linear-gradient(to right,
+						hsl(0deg, 100%, 50%),
+						hsl(60deg, 100%, 50%),
+						hsl(120deg, 100%, 50%),
+						hsl(180deg, 100%, 50%),
+						hsl(240deg, 100%, 50%),
+						hsl(300deg, 100%, 50%),
+						hsl(360deg 100% 60%)
+					);
+				}
+		</style>
+	`}
+</svelte:head>