ThunderNetworkRaD/Dynamic_Design
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Added Colors + Themes

Browse source
This commit is contained in:
Gabriele Giambrone 2024-02-22 19:00:13 +01:00
parent 301209b363
commit c3a21735cd
8 changed files with 237 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/index.ts
View file

@ -0,0 +1,10 @@
export {
DefaultColorScheme,
} from './styles/index';
export type {
Theme,
ColorSchemedTheme,
UnColorSchemedTheme,
ColorScheme,
} from './types/index';

172
src/styles/Colors.ts Normal file
View file

@ -0,0 +1,172 @@
import type { ColorScheme } from "../index";
export const DefaultColorScheme: ColorScheme = {
dark: [
"#C9C9C9",
"#B8B8B8",
"#828282",
"#696969",
"#424242",
"#3B3B3B",
"#2E2E2E",
"#242424",
"#1F1F1F",
"#141414",
],
gray: [
"#F8F9FA",
"#F1F3F5",
"#E9ECEF",
"#DEE2E6",
"#CED4DA",
"#ADB5BD",
"#868E96",
"#495057",
"#343A40",
"#212529",
],
red: [
"#FFF5F5",
"#FFE3E3",
"#FFC9C9",
"#FFA8A8",
"#FF8787",
"#FF6B6B",
"#FA5252",
"#F03E3E",
"#E03131",
"#C92A2A",
],
pink: [
"#FFF0F6",
"#FFDEEB",
"#FCC2D7",
"#FAA2C1",
"#F783AC",
"#F06595",
"#E64980",
"#D6336C",
"#C2255C",
"#A61E4D",
],
grape: [
"#F8F0FC",
"#F3D9FA",
"#EEBEFA",
"#E599F7",
"#DA77F2",
"#CC5DE8",
"#BE4BDB",
"#AE3EC9",
"#9C36B5",
"#862E9C",
],
violet: [
"#F3F0FF",
"#E5DBFF",
"#D0BFFF",
"#B197FC",
"#9775FA",
"#845EF7",
"#7950F2",
"#7048E8",
"#6741D9",
"#5F3DC4",
],
indigo: [
"#EDF2FF",
"#DBE4FF",
"#BAC8FF",
"#91A7FF",
"#748FFC",
"#5C7CFA",
"#4C6EF5",
"#4263EB",
"#3B5BDB",
"#364FC7",
],
blue: [
"#E7F5FF",
"#D0EBFF",
"#A5D8FF",
"#74C0FC",
"#4DABF7",
"#339AF0",
"#228BE6",
"#1C7ED6",
"#1971C2",
"#1864AB",
],
cyan: [
"#E3FAFC",
"#C5F6FA",
"#99E9F2",
"#66D9E8",
"#3BC9DB",
"#22B8CF",
"#15AABF",
"#1098AD",
"#0C8599",
"#0B7285",
],
teal: [
"#E6FCF5",
"#C3FAE8",
"#96F2D7",
"#63E6BE",
"#38D9A9",
"#20C997",
"#12B886",
"#0CA678",
"#099268",
"#087F5B",
],
green: [
"#EBFBEE",
"#D3F9D8",
"#B2F2BB",
"#8CE99A",
"#69DB7C",
"#51CF66",
"#40C057",
"#37B24D",
"#2F9E44",
"#2B8A3E",
],
lime: [
"#F4FCE3",
"#E9FAC8",
"#D8F5A2",
"#C0EB75",
"#A9E34B",
"#94D82D",
"#82C91E",
"#74B816",
"#66A80F",
"#5C940D",
],
yellow: [
"#FFF9DB",
"#FFF3BF",
"#FFEC99",
"#FFE066",
"#FFD43B",
"#FCC419",
"#FAB005",
"#F59F00",
"#F08C00",
"#E67700",
],
orange: [
"#FFF4E6",
"#FFE8CC",
"#FFD8A8",
"#FFC078",
"#FFA94D",
"#FF922B",
"#FD7E14",
"#F76707",
"#E8590C",
"#D9480F",
],
};

1
src/styles/index.ts Normal file
View file

@ -0,0 +1 @@
export { DefaultColorScheme } from './Colors';

32
src/types/core/Theme.ts Normal file
View file

@ -0,0 +1,32 @@
import { ColorScheme } from "../../index";
export interface Theme {
colorScheme: "light" | "dark" | "auto" | "disabled";
colors: ColorScheme;
fontFamily: string;
lineHeight: string;
primaryColor: string;
radius: string;
spacing: string;
shadows: string;
headings: {
fontFamily: string;
fontWeight: string;
sizes: {
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
};
};
};
export interface ColorSchemedTheme extends Theme {
colorScheme: "light" | "dark" | "auto",
};
export interface UnColorSchemedTheme extends Theme {
colorScheme: "disabled",
};

5
src/types/core/index.ts Normal file
View file

@ -0,0 +1,5 @@
export {
Theme,
ColorSchemedTheme,
UnColorSchemedTheme,
} from './Theme';

9
src/types/index.ts
View file

@ -0,0 +1,9 @@
export {
Theme,
ColorSchemedTheme,
UnColorSchemedTheme,
} from './core/index';
export {
ColorScheme,
} from './styles/index';

7
src/types/styles/Colors.ts Normal file
View file

@ -0,0 +1,7 @@
type ColorArray = [string, string, string, string, string, string, string, string, string, string];
type ColorNames = 'dark' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange';
export type ColorScheme = {
[K in ColorNames]: ColorArray;
};

1
src/types/styles/index.ts Normal file
View file

@ -0,0 +1 @@
export { ColorScheme } from './Colors';