import { Design, Theme } from '.';

export const design = new Design<any>('test-design', {
	border: {
		sm: {
			radius: '0.14rem',
			width: '0.04rem',
		},
		df: {
			radius: '0.21rem',
			width: '0.07rem',
		},
		lg: {
			radius: '0.32rem',
			width: '0.14rem',
		},
	},
	breakpoint: {
		xs: {
			query: '(min-width: 45.71em) and (max-width: 68.50em)',
			querySize: 640,
			rootLineHeight: 1.33,
			rootTextSize: '14.94px',
		},
		sm: {
			query: '(min-width: 68.57em) and (max-width: 91.36em)',
			querySize: 960,
			rootLineHeight: 1.42,
			rootTextSize: '15.94px',
		},
		md: {
			query: '(min-width: 91.43em) and (max-width: 114.21em)',
			querySize: 1280,
			rootLineHeight: 1.52,
			rootTextSize: '17.01px',
		},
		lg: {
			query: '(min-width: 114.29em) and (max-width: 137.07em)',
			querySize: 1600,
			rootLineHeight: 1.62,
			rootTextSize: '18.15px',
		},
		xl: {
			query: '(min-width: 137.14em)',
			querySize: 1920,
			rootLineHeight: 1.73,
			rootTextSize: '19.36px',
		},
	},
	heading: {
		l1: {
			letterSpacing: '0.25px',
			lineHeight: 1.5,
			size: '1.14rem',
		},
		l2: {
			letterSpacing: '0.33px',
			lineHeight: 1.69,
			size: '1.43rem',
		},
		l3: {
			letterSpacing: '0.44px',
			lineHeight: 1.9,
			size: '1.79rem',
		},
		l4: {
			letterSpacing: '0.59px',
			lineHeight: 2.14,
			size: '2.23rem',
		},
		l5: {
			letterSpacing: '0.79px',
			lineHeight: 2.4,
			size: '2.79rem',
		},
		l6: {
			letterSpacing: '1.05px',
			lineHeight: 2.7,
			size: '3.49rem',
		},
	},
	shadow: {
		xs: {
			x: '0rem',
			y: '0.14rem',
			blur: '0.14rem',
			spread: '0rem',
		},
		sm: {
			x: '0rem',
			y: '0.23rem',
			blur: '0.25rem',
			spread: '0rem',
		},
		md: {
			x: '0rem',
			y: '0.37rem',
			blur: '0.44rem',
			spread: '0rem',
		},
		lg: {
			x: '0rem',
			y: '0.61rem',
			blur: '0.77rem',
			spread: '0rem',
		},
		xl: {
			x: '0rem',
			y: '0.98rem',
			blur: '1.34rem',
			spread: '0rem',
		},
	},
	spacing: {
		xxs: '0.15rem',
		xs: '0.31rem',
		sm: '0.63rem',
		df: '1.25rem',
		md: '1rem',
		lg: '2.50rem',
		xl: '3.75rem',
		xxl: '5rem',
		type: 'vertical-rhythm',
		unit: 17.5,
	},
	text: {
		sm: {
			lineHeight: 1.25,
			size: '0.89rem',
		},
		df: {
			lineHeight: 1.25,
			size: '1rem',
		},
		lg: {
			lineHeight: 1.25,
			size: '1.13rem',
		},
	},
	typography: {
		font: {
			heading:
				'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
			locale: {},
			monospace: '"Lucida Console", Monaco, monospace',
			text: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
			system:
				'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
		},
		rootLineHeight: 1.25,
		rootTextSize: '14px',
	},
});

export const lightTheme: Theme<any> = design.createTheme(
	{
		contrast: 'normal',
		scheme: 'light',
	},
	{
		palette: {
			brand: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			primary: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			secondary: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			tertiary: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			neutral: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			muted: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			warning: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			danger: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			negative: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
			positive: {
				color: {
					'10': '#fff',
					'20': '#fff',
					'30': '#fff',
					'40': '#fff',
					'50': '#fff',
					'60': '#fff',
					'70': '#fff',
					'80': '#fff',
					'90': '#fff',
					'00': '#fff',
				},
				text: '#fff',
				bg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
				fg: { base: '#fff', disabled: '#fff', focused: '#fff', hovered: '#fff', selected: '#fff' },
			},
		},
	},
);

export const darkTheme: Theme<any> = design.createTheme(
	{
		contrast: 'normal',
		scheme: 'dark',
	},
	{
		palette: {
			brand: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			primary: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			secondary: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			tertiary: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			neutral: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			muted: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			warning: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			danger: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			negative: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
			positive: {
				color: {
					'10': '#000',
					'20': '#000',
					'30': '#000',
					'40': '#000',
					'50': '#000',
					'60': '#000',
					'70': '#000',
					'80': '#000',
					'90': '#000',
					'00': '#000',
				},
				text: '#000',
				bg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
				fg: { base: '#000', disabled: '#000', focused: '#000', hovered: '#000', selected: '#000' },
			},
		},
	},
);