Sakura Knoll
5c8ed4f603
* Replace sw, sns battlesuit images * Add gen guide page * Make supports configurable * Extract DifficultySelect & Improve Ex Signet Ordering style * Extract BattlesuitSelect * Use BattlesuitSelect for support valk * Swap support if duplicated * Add sigil selector * Set initial ex signets * Change layout * Add sigil icon to single value * Add equipment select * Fix difficulty box label * Implement SignetBox * Add Signet form control * Improve rendering perf of stigma and weapon select * Implement image converter * Fix signet select * Remove FontHead * Remove wrong new line * Fix warnings * Add custom style configurator * Make labels of DiffucltyBox and ValkBox configurable * Add background and improve layout * Improve ex signet fontsize * Style boundaries of left bottom boxes * Apply fonts directly * Style signet box * Add Signet group label * Style ValkBox * Add support valk label * Style layout of SignetBox * Add shadow to difficulty box * Add sigil label * Adjust signet group label * Add equipment label * Configure colors of left bottom boxes * Add tag, rank, signature * Add icon to current value of battlesuit select * Adjust form styles * Add signet group select * Implement import/export data * Fix dashed border of difficulty box * Add gen link to elysian realm home * Prefix types
291 lines
6.2 KiB
TypeScript
291 lines
6.2 KiB
TypeScript
import { Theme } from 'theme-ui'
|
|
import { colors } from './colors'
|
|
|
|
export const theme: Theme = {
|
|
breakpoints: ['576px', '768px', '992px', '1200px'],
|
|
config: {
|
|
initialColorModeName: 'light',
|
|
printColorModeName: 'light',
|
|
},
|
|
colors: {
|
|
...colors,
|
|
white: '#fff',
|
|
black: '#000',
|
|
text: '#212529',
|
|
background: '#fff',
|
|
primary: '#007bff',
|
|
transparentPrimary: '#007bff99',
|
|
secondary: '#6c757d',
|
|
muted: colors.gray[5],
|
|
success: '#28a745',
|
|
info: '#17a2b8',
|
|
warning: '#ffc107',
|
|
danger: '#dc3545',
|
|
light: '#f8f9fa',
|
|
dark: '#343a40',
|
|
textMuted: '#6c757d',
|
|
transparent: 'transparent',
|
|
border: colors.gray[5],
|
|
altBackground: colors.gray[2],
|
|
altBorder: colors.gray[3],
|
|
modes: {
|
|
dark: {
|
|
...colors,
|
|
white: '#fff',
|
|
black: '#000',
|
|
text: '#d0d0d0',
|
|
background: '#202124',
|
|
primary: colors.blue[4],
|
|
secondary: '#6c757d',
|
|
muted: '#dee2e6',
|
|
success: '#28a745',
|
|
info: '#17a2b8',
|
|
warning: '#ffc107',
|
|
danger: '#dc3545',
|
|
light: '#f8f9fa',
|
|
dark: '#343a40',
|
|
textMuted: '#6c757d',
|
|
transparent: 'transparent',
|
|
border: colors.gray[7],
|
|
altBorder: colors.gray[8],
|
|
altBackground: colors.gray[8],
|
|
},
|
|
},
|
|
},
|
|
space: ['0rem', '0.25rem', '0.5rem', '1rem', '1.5rem', '3rem'],
|
|
fonts: {
|
|
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
|
|
heading:
|
|
'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
monospace:
|
|
'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
|
|
},
|
|
fontSizes: [
|
|
'0.75rem',
|
|
'0.875rem',
|
|
'1rem',
|
|
'1.25rem',
|
|
'1.5rem',
|
|
'1.75rem',
|
|
'2rem',
|
|
'2.5rem',
|
|
'3.5rem',
|
|
'4.5rem',
|
|
'5.5rem',
|
|
'6rem',
|
|
],
|
|
fontWeights: {
|
|
body: 400,
|
|
heading: 600,
|
|
bold: 700,
|
|
light: 300,
|
|
normal: 400,
|
|
display: 300,
|
|
},
|
|
borders: {
|
|
default: '1px solid var(--theme-ui-colors-border)',
|
|
primary: `1px solid var(--theme-)`,
|
|
},
|
|
lineHeights: {
|
|
body: 1.6,
|
|
heading: 1.2,
|
|
},
|
|
sizes: {
|
|
sm: 540,
|
|
md: 720,
|
|
lg: 960,
|
|
xl: 1140,
|
|
},
|
|
shadows: {
|
|
default: '0 .5rem 1rem rgba(0, 0, 0, .15)',
|
|
sm: '0 .125rem .25rem rgba(0, 0, 0, .075)',
|
|
lg: '0 1rem 3rem rgba(0, 0, 0, .175)',
|
|
},
|
|
radii: {
|
|
default: '0.25rem',
|
|
sm: '0.2rem',
|
|
lg: '0.3rem',
|
|
pill: '50rem',
|
|
},
|
|
text: {
|
|
heading: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
},
|
|
display: {
|
|
fontWeight: 'display',
|
|
lineHeight: 'heading',
|
|
},
|
|
},
|
|
forms: {
|
|
checkbox: {
|
|
color: 'border',
|
|
},
|
|
},
|
|
buttons: {
|
|
primary: {
|
|
color: 'primary',
|
|
borderColor: 'primary',
|
|
borderStyle: 'solid',
|
|
borderWidth: 1,
|
|
bg: 'transparent',
|
|
cursor: 'pointer',
|
|
textDecoration: 'none',
|
|
borderRadius: 'default',
|
|
'&.active, &:active, &:hover:active, &.active:hover': {
|
|
color: 'background',
|
|
bg: 'primary',
|
|
},
|
|
transition:
|
|
'box-shadow 200ms ease-in-out, color 200ms ease-in-out, background-color 200ms ease-in-out',
|
|
'&:hover': {
|
|
bg: 'rgba(0, 123, 255, 0.2)',
|
|
boxShadow: 'default',
|
|
},
|
|
'&.hidden': {
|
|
display: 'none',
|
|
},
|
|
'&:disabled': {
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
secondary: {
|
|
color: 'background',
|
|
bg: 'secondary',
|
|
},
|
|
gray: {
|
|
color: 'background',
|
|
bg: 'gray',
|
|
},
|
|
},
|
|
styles: {
|
|
root: {
|
|
fontFamily: 'body',
|
|
lineHeight: 'body',
|
|
fontWeight: 'body',
|
|
},
|
|
a: {
|
|
color: 'primary',
|
|
textDecoration: 'none',
|
|
},
|
|
p: {
|
|
mb: 3,
|
|
lineHeight: 'body',
|
|
},
|
|
h1: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
fontSize: 7,
|
|
},
|
|
h2: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
fontSize: 6,
|
|
},
|
|
h3: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
fontSize: 5,
|
|
},
|
|
h4: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
fontSize: 4,
|
|
},
|
|
h5: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
fontSize: 3,
|
|
},
|
|
h6: {
|
|
fontFamily: 'heading',
|
|
fontWeight: 'heading',
|
|
lineHeight: 'heading',
|
|
mt: 0,
|
|
mb: 2,
|
|
fontSize: 2,
|
|
},
|
|
blockquote: {
|
|
fontSize: 3,
|
|
mb: 3,
|
|
},
|
|
table: {
|
|
width: '100%',
|
|
marginBottom: 3,
|
|
borderCollapse: 'collapse',
|
|
},
|
|
th: {
|
|
verticalAlign: 'bottom',
|
|
borderTopWidth: 2,
|
|
borderTopStyle: 'solid',
|
|
borderTopColor: 'default',
|
|
borderBottomWidth: 2,
|
|
borderBottomStyle: 'solid',
|
|
borderBottomColor: 'default',
|
|
padding: '.75rem',
|
|
textAlign: 'inherit',
|
|
},
|
|
td: {
|
|
borderBottomWidth: 2,
|
|
borderBottomStyle: 'solid',
|
|
borderBottomColor: 'default',
|
|
verticalAlign: 'top',
|
|
padding: '.75rem',
|
|
},
|
|
inlineCode: {
|
|
color: 'pink',
|
|
},
|
|
img: {
|
|
maxWidth: '100%',
|
|
height: 'auto',
|
|
},
|
|
},
|
|
cards: {
|
|
primary: {
|
|
border: 'default',
|
|
borderColor: 'border',
|
|
borderRadius: 'default',
|
|
|
|
transition:
|
|
'box-shadow 200ms ease-in-out, color 200ms ease-in-out, background-color 200ms ease-in-out',
|
|
'&:hover': {
|
|
boxShadow: 'default',
|
|
},
|
|
},
|
|
stigmata: {
|
|
padding: 2,
|
|
borderRadius: 4,
|
|
borderColor: 'default',
|
|
borderWidth: 1,
|
|
borderStyle: 'solid',
|
|
},
|
|
},
|
|
badges: {
|
|
primary: {
|
|
backgroundColor: 'primary',
|
|
},
|
|
secondary: {
|
|
backgroundColor: 'secondary',
|
|
},
|
|
},
|
|
}
|