Finish theming implementation (finally...)

2026-06-16 16:20:04 +00:00 · 2024-05-14 10:22:17 +02:00
parent 47f8febbd2
commit f9d4e16604
45 changed files with 475 additions and 14951 deletions
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Blue: Theme = {
+    name: 'blue',
+    colors: {
+        primary: {
+            50: '#e3eeff',
+            100: '#b6cdfe',
+            200: '#88abf7',
+            300: '#5b8af1',
+            400: '#2d69ec',
+            500: '#134fd2',
+            600: '#0b3da4',
+            700: '#052c77',
+            800: '#001a4a',
+            900: '#00091e',
+            DEFAULT: '#2563EB'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const GameyfinBlue: Theme = {
+    name: 'gameyfin-blue',
+    colors: {
+        primary: {
+            50: '#e7eaff',
+            100: '#bdc3f9',
+            200: '#919bee',
+            300: '#6672e5',
+            400: '#3c4add',
+            500: '#2231c3',
+            600: '#1a2699',
+            700: '#101b6f',
+            800: '#070f45',
+            900: '#02041d',
+            DEFAULT: '#2332c8'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const GameyfinClassic: Theme = {
+    name: 'gameyfin-classic',
+    colors: {
+        primary: {
+            50: '#e1ffec',
+            100: '#b8f7cf',
+            200: '#8ef0b2',
+            300: '#62ea94',
+            400: '#38e476',
+            500: '#20ca5d',
+            600: '#159d47',
+            700: '#0b7032',
+            800: '#02431d',
+            900: '#001804',
+            DEFAULT: '#16A34A'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const GameyfinViolet: Theme = {
+    name: 'gameyfin-violet',
+    colors: {
+        primary: {
+            50: '#f3ebff',
+            100: '#d5c7ed',
+            200: '#b7a4dd',
+            300: '#9a7fce',
+            400: '#7d5abe',
+            500: '#6441a5',
+            600: '#4e3281',
+            700: '#37235d',
+            800: '#21153a',
+            900: '#0d0519',
+            DEFAULT: '#6441a5'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Neutral: Theme = {
+    name: 'neutral',
+    colors: {
+        primary: {
+            50: '#fceff2',
+            100: '#ddd7d9',
+            200: '#c1bfbf',
+            300: '#a6a6a6',
+            400: '#8c8c8c',
+            500: '#737373',
+            600: '#595959',
+            700: '#413f40',
+            800: '#292526',
+            900: '#16090d',
+            DEFAULT: '#525252'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Orange: Theme = {
+    name: 'orange',
+    colors: {
+        primary: {
+            50: '#ffedde',
+            100: '#ffcdb2',
+            200: '#fbac84',
+            300: '#f78c54',
+            400: '#f46c25',
+            500: '#da520b',
+            600: '#ab3f07',
+            700: '#7a2d03',
+            800: '#4b1900',
+            900: '#1f0600',
+            DEFAULT: '#EA580C'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from "../theme";
+
+export const Purple: Theme = {
+    name: 'purple',
+    colors: {
+        primary: {
+            50: '#ffe6ff',
+            100: '#f2b9f9',
+            200: '#e78df3',
+            300: '#dc5fed',
+            400: '#d132e6',
+            500: '#b91acd',
+            600: '#9012a0',
+            700: '#670b73',
+            800: '#3f0547',
+            900: '#19001b',
+            DEFAULT: '#DD62ED'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Red: Theme = {
+    name: 'red',
+    colors: {
+        primary: {
+            50: '#ffe5e5',
+            100: '#f9bbbb',
+            200: '#ef9090',
+            300: '#e76464',
+            400: '#df3939',
+            500: '#c62020',
+            600: '#9b1718',
+            700: '#6f0f11',
+            800: '#450708',
+            900: '#1e0000',
+            DEFAULT: '#DC2626'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from "../theme";
+
+export const Rose: Theme = {
+    name: 'rose',
+    colors: {
+        primary: {
+            50: '#ffe4ed',
+            100: '#fbb9c8',
+            200: '#f28da4',
+            300: '#ec607f',
+            400: '#e5345b',
+            500: '#cb1a41',
+            600: '#9f1233',
+            700: '#730b23',
+            800: '#470415',
+            900: '#1e0006',
+            DEFAULT: '#E11D48'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from "../theme";
+
+export const Slate: Theme = {
+    name: 'slate',
+    colors: {
+        primary: {
+            50: '#eaf3ff',
+            100: '#cfd7e4',
+            200: '#b2bdcd',
+            300: '#95a3b7',
+            400: '#7788a1',
+            500: '#5e6f88',
+            600: '#48566a',
+            700: '#323e4d',
+            800: '#1d2531',
+            900: '#040d17',
+            DEFAULT: '#475569'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Violet: Theme = {
+    name: 'violet',
+    colors: {
+        primary: {
+            50: '#f2e7ff',
+            100: '#d4bdf8',
+            200: '#b592ee',
+            300: '#9867e5',
+            400: '#7b3cdd',
+            500: '#6122c3',
+            600: '#4b1a99',
+            700: '#36126e',
+            800: '#200944',
+            900: '#0d021c',
+            DEFAULT: '#6D28D9'
+        }
+    }
+};
@@ -0,0 +1,20 @@
+import {Theme} from '../theme';
+
+export const Yellow: Theme = {
+    name: 'yellow',
+    colors: {
+        primary: {
+            50: '#fffadb',
+            100: '#feefae',
+            200: '#fce47f',
+            300: '#fbd94e',
+            400: '#face1e',
+            500: '#e1b505',
+            600: '#af8c00',
+            700: '#7d6400',
+            800: '#4c3c00',
+            900: '#1c1400',
+            DEFAULT: '#FACC15'
+        }
+    }
+};