Added Colors + Themes
This commit is contained in:
parent
301209b363
commit
c3a21735cd
8 changed files with 237 additions and 0 deletions
10
src/index.ts
10
src/index.ts
|
|
@ -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
172
src/styles/Colors.ts
Normal 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
1
src/styles/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { DefaultColorScheme } from './Colors';
|
||||
32
src/types/core/Theme.ts
Normal file
32
src/types/core/Theme.ts
Normal 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
5
src/types/core/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export {
|
||||
Theme,
|
||||
ColorSchemedTheme,
|
||||
UnColorSchemedTheme,
|
||||
} from './Theme';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export {
|
||||
Theme,
|
||||
ColorSchemedTheme,
|
||||
UnColorSchemedTheme,
|
||||
} from './core/index';
|
||||
|
||||
export {
|
||||
ColorScheme,
|
||||
} from './styles/index';
|
||||
7
src/types/styles/Colors.ts
Normal file
7
src/types/styles/Colors.ts
Normal 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
1
src/types/styles/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { ColorScheme } from './Colors';
|
||||
Loading…
Reference in a new issue