💄 - colors plugin done

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Devaunch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/web/package.json

@@ -20,6 +20,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.42.1",
 		"@repo/eslint-config": "workspace:*",
+		"@repo/tailwindcss-plugin": "workspace:*",
 		"@repo/ts-config": "workspace:*",
 		"@sveltejs/adapter-auto": "^3.1.1",
 		"@sveltejs/kit": "^2.5.2",

apps/web/postcss.config.js

@@ -1,6 +1,6 @@
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: [tailwindcss(), autoprefixer()]
+};

apps/web/src/lib/components/AuthBg.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { tweened } from "svelte/motion";
+
+    let mouse = tweened({
+        x: 0,
+        y: 0
+    }, {
+        duration: 50,
+        delay: 0
+    });
+
+    const handleMouseMove = (e: MouseEvent & {
+        currentTarget: EventTarget & HTMLDivElement;
+    }) => {
+        let { left, top } = e.currentTarget.getBoundingClientRect();
+
+        mouse.set({
+            x: e.clientX - left,
+            y: e.clientY - top
+        });
+    }
+</script>
+
+<div on:mousemove={handleMouseMove} role="presentation" 
+    class="relative h-screen w-full flex items-center bg-black justify-center group"
+>
+    <div class="absolute inset-0 bg-dot-thick-neutral-800 pointer-events-none" />
+    <div class="pointer-events-none bg-dot-thick-indigo-500 absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100"
+        style="
+            mask-image: radial-gradient(
+                250px circle at {$mouse.x}px {$mouse.y}px,
+                black 0%,
+                transparent 100%
+            );
+        "
+    >
+        <div class="relative z-20">
+            <slot />
+        </div>
+    </div>
+</div>

apps/web/src/routes/+page.svelte

@@ -1,2 +1,7 @@
-<h1>Web</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+    import AuthBg from "$lib/components/AuthBg.svelte";
+</script>
+
+<main class="min-h-screen w-full">
+    <AuthBg />
+</main>

apps/web/tailwind.config.js

@@ -1,8 +1,11 @@
+import { colors, utils } from '@repo/tailwindcss-plugin';
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}', '../../packages/ui/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
 	},
-	plugins: []
+	darkMode: 'class',
+	plugins: [colors(), utils()]
 };

packages/plugin/colors/blue.ts

@@ -0,0 +1,12 @@
+export default {
+    50: '95.374% 0.0211 252.5',
+    100: '90.703% 0.04336 251.52',
+    200: '81.593% 0.08851 251.95',
+    300: '72.661% 0.13495 253.3',
+    400: '64.678% 0.17809 254.76',
+    500: '56.713% 0.20945 257.94',
+    600: '49.195% 0.18001 257.73',
+    700: '40.117% 0.14362 257.21',
+    800: '30.742% 0.1034 255.59',
+    900: '20.335% 0.06045 251.77'
+} as const;

packages/plugin/colors/common.ts

@@ -0,0 +1,21 @@
+import blue from './blue';
+import cyan from './cyan';
+import green from './green';
+import pink from './pink';
+import purple from './purple';
+import red from './red';
+import yellow from './yellow';
+import zinc from './zinc';
+
+export default {
+    white: '100% 0 0',
+    black: '0% 0 0',
+    zinc,
+    yellow,
+    red,
+    purple,
+    pink,
+    green,
+    cyan,
+    blue
+} as const;

packages/plugin/colors/cyan.ts

@@ -0,0 +1,12 @@
+export default {
+    50: '98.302% 0.01328 214.36',
+    100: '97.162% 0.02165 211.05',
+    200: '95.735% 0.03514 209.81',
+    300: '93.605% 0.05141 210.01',
+    400: '90.623% 0.07485 211.86',
+    500: '87.228% 0.10156 212.16',
+    600: '72.025% 0.12935 218.76',
+    700: '68.28% 0.1229 219.72',
+    800: '58.815% 0.10637 222.33',
+    900: '32.65% 0.05628 219.14'
+} as const;

packages/plugin/colors/green.ts

@@ -0,0 +1,12 @@
+export default {
+    50: '96.908% 0.02304 161.75',
+    100: '93.662% 0.04521 160.37',
+    200: '87.616% 0.09026 159.15',
+    300: '82.35% 0.13283 156.79',
+    400: '77.444% 0.16814 154.24',
+    500: '73.295% 0.19345 150.81',
+    600: '62.205% 0.16271 151.05',
+    700: '50.61% 0.1302 151.36',
+    800: '37.989% 0.09408 152.28',
+    900: '24.572% 0.05513 154.14'
+} as const;

packages/plugin/colors/pink.ts

@@ -0,0 +1,12 @@
+export default {
+    50: '96.406% 0.02576 335.44',
+    100: '93.078% 0.05038 336.24',
+    200: '86.363% 0.10416 337.17',
+    300: '80.395% 0.15604 338.43',
+    400: '75.098% 0.20591 339.76',
+    500: '71.012% 0.24559 341.35',
+    600: '60.177% 0.20619 341.23',
+    700: '48.934% 0.16342 341.09',
+    800: '36.905% 0.11886 340.74',
+    900: '23.987% 0.06714 340.08'
+} as const;

packages/plugin/colors/purple.ts

@@ -0,0 +1,12 @@
+export default {
+    50: '94.795% 0.0229 308.19',
+    100: '89.266% 0.04647 307.88',
+    200: '78.492% 0.09529 307.1',
+    300: '67.84% 0.14506 305.94',
+    400: '57.674% 0.19162 304.03',
+    500: '48.776% 0.22545 300.51',
+    600: '41.659% 0.18927 300.81',
+    700: '34.237% 0.1511 301.27',
+    800: '26.424% 0.10997 302.06',
+    900: '18.072% 0.06359 303.75'
+} as const;

packages/plugin/colors/red.ts

@@ -0,0 +1,12 @@
+export default {
+    50: '94.871% 0.0271 354.51',
+    100: '90.039% 0.05397 356.25',
+    200: '80.415% 0.11271 357.73',
+    300: '72.224% 0.17104 0.42112',
+    400: '65.63% 0.21849 4.6306',
+    500: '61.924% 0.2419 11.332',
+    600: '52.391% 0.20375 10.666',
+    700: '42.648% 0.16398 9.91',
+    800: '32.052% 0.12083 8.8301',
+    900: '20.846% 0.07346 5.5684'
+} as const;

packages/plugin/colors/semantic.ts

@@ -0,0 +1,139 @@
+import { readableColor, swapColorValues } from '../utils';
+import common from './common';
+import type { SemanticBaseColors, ThemeColors } from './types';
+
+const base: SemanticBaseColors = {
+    light: {
+        background: {
+            DEFAULT: '100% 0 0'
+        },
+        foreground: {
+            ...common.zinc,
+            DEFAULT: '20.38% 0.013 233.32'
+        },
+        content1: {
+            DEFAULT: '100% 0 0',
+            foreground: '20.38% 0.013 233.32'
+        },
+        content2: {
+            DEFAULT: common.zinc[100],
+            foreground: common.zinc[800]
+        },
+        content3: {
+            DEFAULT: common.zinc[200],
+            foreground: common.zinc[700]
+        },
+        content4: {
+            DEFAULT: common.zinc[300],
+            foreground: common.zinc[600]
+        }
+    },
+    dark: {
+        background: {
+            DEFAULT: '0% 0 0'
+        },
+        foreground: {
+            ...swapColorValues(common.zinc),
+            DEFAULT: '94.56% 0.002 247.84'
+        },
+        content1: {
+            DEFAULT: common.zinc[900],
+            foreground: common.zinc[50]
+        },
+        content2: {
+            DEFAULT: common.zinc[800],
+            foreground: common.zinc[100]
+        },
+        content3: {
+            DEFAULT: common.zinc[700],
+            foreground: common.zinc[200]
+        },
+        content4: {
+            DEFAULT: common.zinc[600],
+            foreground: common.zinc[300]
+        }
+    }
+};
+
+export const themeColorsLight: ThemeColors = {
+    ...base.light,
+    default: {
+        ...common.zinc,
+        foreground: readableColor(common.zinc[300]),
+        DEFAULT: common.zinc[300]
+    },
+    primary: {
+        ...common.purple,
+        foreground: readableColor(common.purple[500]),
+        DEFAULT: common.purple[500]
+    },
+    secondary: {
+        ...common.blue,
+        foreground: readableColor(common.blue[500]),
+        DEFAULT: common.blue[500]
+    },
+    accent: {
+        ...common.pink,
+        foreground: readableColor(common.pink[500]),
+        DEFAULT: common.pink[500]
+    },
+    success: {
+        ...common.green,
+        foreground: readableColor(common.green[500]),
+        DEFAULT: common.green[500]
+    },
+    warning: {
+        ...common.yellow,
+        foreground: readableColor(common.yellow[500]),
+        DEFAULT: common.yellow[500]
+    },
+    danger: {
+        ...common.red,
+        foreground: common.white,
+        DEFAULT: common.red[500]
+    }
+};
+
+export const themeColorsDark: ThemeColors = {
+    ...base.dark,
+    default: {
+        ...swapColorValues(common.zinc),
+        foreground: readableColor(common.zinc[700]),
+        DEFAULT: common.zinc[700]
+    },
+    primary: {
+        ...swapColorValues(common.purple),
+        foreground: readableColor(common.purple[500]),
+        DEFAULT: common.purple[500]
+    },
+    secondary: {
+        ...swapColorValues(common.blue),
+        foreground: readableColor(common.blue[400]),
+        DEFAULT: common.blue[400]
+    },
+    accent: {
+        ...swapColorValues(common.pink),
+        foreground: readableColor(common.pink[500]),
+        DEFAULT: common.pink[500]
+    },
+    success: {
+        ...swapColorValues(common.green),
+        foreground: readableColor(common.green[500]),
+        DEFAULT: common.green[500]
+    },
+    warning: {
+        ...swapColorValues(common.yellow),
+        foreground: readableColor(common.yellow[500]),
+        DEFAULT: common.yellow[500]
+    },
+    danger: {
+        ...swapColorValues(common.red),
+        foreground: common.white,
+        DEFAULT: common.red[500]
+    }
+};
+
+export const semanticColors = {
+    light: themeColorsLight,
+    dark: themeColorsDark
+};

packages/plugin/colors/types.ts

@@ -0,0 +1,40 @@
+export type ColorScale =
+    | Partial<{
+          50: string;
+          100: string;
+          200: string;
+          300: string;
+          400: string;
+          500: string;
+          600: string;
+          700: string;
+          800: string;
+          900: string;
+          foreground: string;
+          DEFAULT: string;
+      }>
+    | string;
+
+export type BaseColors = {
+    background: ColorScale;
+    foreground: ColorScale;
+    content1: ColorScale;
+    content2: ColorScale;
+    content3: ColorScale;
+    content4: ColorScale;
+};
+
+export type ThemeColors = BaseColors & {
+    default: ColorScale;
+    primary: ColorScale;
+    secondary: ColorScale;
+    accent: ColorScale;
+    success: ColorScale;
+    warning: ColorScale;
+    danger: ColorScale;
+};
+
+export type SemanticBaseColors = {
+    light: BaseColors;
+    dark: BaseColors;
+};