144 lines
5.0 KiB
TypeScript
144 lines
5.0 KiB
TypeScript
import { SCREEN_BREAK_POINTS } from '../';
|
|
|
|
export const BREAKPOINTS = {
|
|
xs: `${SCREEN_BREAK_POINTS.XS}px`,
|
|
sm: `${SCREEN_BREAK_POINTS.SM}px`,
|
|
md: `${SCREEN_BREAK_POINTS.MD}px`,
|
|
lg: `${SCREEN_BREAK_POINTS.LG}px`,
|
|
xl: `${SCREEN_BREAK_POINTS.XL}px`,
|
|
xxl: `${SCREEN_BREAK_POINTS.XXL}px`,
|
|
};
|
|
|
|
export const SHORTCUTS = {
|
|
'wh-full': 'w-full h-full',
|
|
'hw-full': 'wh-full',
|
|
'wh-v-full': 'w-100vw h-100vh',
|
|
'hw-v-full': 'wh-v-full',
|
|
|
|
'flex-center': 'flex justify-center items-center',
|
|
'flex-col-center': 'flex-center flex-col',
|
|
'flex-x-center': 'flex justify-center',
|
|
'flex-x-end': 'flex justify-end',
|
|
'flex-x-start': 'flex justify-start',
|
|
'flex-x-between': 'flex justify-between',
|
|
'flex-y-center': 'flex items-center',
|
|
'flex-y-end': 'flex items-end',
|
|
'flex-y-start': 'flex items-start',
|
|
'i-flex-center': 'inline-flex justify-center items-center',
|
|
'i-flex-x-center': 'inline-flex justify-center',
|
|
'i-flex-y-center': 'inline-flex items-center',
|
|
'flex-col': 'flex flex-col',
|
|
'flex-col-stretch': 'flex-col items-stretch',
|
|
'i-flex-col': 'inline-flex flex-col',
|
|
'i-flex-col-stretch': 'i-flex-col items-stretch',
|
|
'flex-1-hidden': 'flex-1 overflow-hidden',
|
|
|
|
'absolute-lt': 'absolute left-0 top-0',
|
|
'absolute-lb': 'absolute left-0 bottom-0',
|
|
'absolute-rt': 'absolute right-0 top-0',
|
|
'absolute-rb': 'absolute right-0 bottom-0',
|
|
'absolute-tl': 'absolute-lt',
|
|
'absolute-tr': 'absolute-rt',
|
|
'absolute-bl': 'absolute-lb',
|
|
'absolute-br': 'absolute-rb',
|
|
'absolute-center': 'absolute transform top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
|
|
'absolute-x-center': 'absolute transform left-1/2 -translate-x-1/2',
|
|
'absolute-y-center': 'absolute transform top-1/2 -translate-y-1/2',
|
|
|
|
'fixed-lt': 'fixed left-0 top-0',
|
|
'fixed-lb': 'fixed left-0 bottom-0',
|
|
'fixed-rt': 'fixed right-0 top-0',
|
|
'fixed-rb': 'fixed right-0 bottom-0',
|
|
'fixed-tl': 'fixed-lt',
|
|
'fixed-tr': 'fixed-rt',
|
|
'fixed-bl': 'fixed-lb',
|
|
'fixed-br': 'fixed-rb',
|
|
'fixed-center': 'fixed-lt flex-center wh-full',
|
|
|
|
'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
|
|
'text-nowrap-ellipsis': 'nowrap-hidden text-ellipsis',
|
|
|
|
'bg-theme-base': 'bg-[var(--color-bg-base)]',
|
|
'bg-theme-base-invert': 'bg-[var(--color-bg-base-invert)]',
|
|
'bg-theme-container': 'bg-[var(--color-bg-container)]',
|
|
'bg-theme-container-invert': 'bg-[var(--color-bg-container-invert)]',
|
|
'bg-theme-elevated': 'bg-[var(--color-bg-elevated)]',
|
|
'bg-theme-elevated-invert': 'bg-[var(--color-bg-elevated-invert)]',
|
|
'bg-theme-layout': 'bg-[var(--color-bg-layout)]',
|
|
'bg-theme-layout-invert': 'bg-[var(--color-bg-layout-invert)]',
|
|
'bg-theme-mask': 'bg-[var(--color-bg-mask)]',
|
|
'bg-theme-mask-invert': 'bg-[var(--color-bg-mask-invert)]',
|
|
'bg-theme-spotlight': 'bg-[var(--color-bg-spotlight)]',
|
|
'bg-theme-spotlight-invert': 'bg-[var(--color-bg-spotlight-invert)]',
|
|
|
|
'text-theme': 'text-[var(--color-text)]',
|
|
'text-theme-invert': 'text-[var(--color-text-invert)]',
|
|
'text-theme-disabled': 'text-[var(--color-text-disabled)]',
|
|
'text-theme-disabled-invert': 'text-[var(--color-text-disabled-invert)]',
|
|
|
|
'text-link-primary': 'text-primary hover:text-primary-hover',
|
|
'text-link-info': 'text-info hover:text-info-hover',
|
|
'text-link-success': 'text-success hover:text-success-hover',
|
|
'text-link-warning': 'text-warning hover:text-warning-hover',
|
|
'text-link-error': 'text-error hover:text-error-hover',
|
|
|
|
'border-theme': 'border-[var(--color-border)]',
|
|
'border-theme-invert': 'border-[var(--color-border-invert)]',
|
|
'border-theme-secondary': 'border-[var(--color-border-secondary)]',
|
|
'border-theme-secondary-invert': 'border-[var(--color-border-secondary-invert)]',
|
|
'border-theme-disabled': 'border-[var(--color-border-disabled)]',
|
|
'border-theme-disabled-invert': 'border-[var(--color-border-disabled-invert)]',
|
|
|
|
dot: 'wh-2 rounded-1/2 bg-primary mx-2',
|
|
};
|
|
|
|
export const COLORS = {
|
|
dark: '#000000',
|
|
white: '#ffffff',
|
|
primary: {
|
|
DEFAULT: 'var(--color-primary)',
|
|
hover: 'var(--color-primary-hover)',
|
|
active: 'var(--color-primary-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-primary-bg)',
|
|
hover: 'var(--color-primary-bg-hover)',
|
|
},
|
|
},
|
|
info: {
|
|
DEFAULT: 'var(--color-info)',
|
|
hover: 'var(--color-info-hover)',
|
|
active: 'var(--color-info-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-info-bg)',
|
|
hover: 'var(--color-info-bg-hover)',
|
|
},
|
|
},
|
|
success: {
|
|
DEFAULT: 'var(--color-success)',
|
|
hover: 'var(--color-success-hover)',
|
|
active: 'var(--color-success-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-success-bg)',
|
|
hover: 'var(--color-success-bg-hover)',
|
|
},
|
|
},
|
|
warning: {
|
|
DEFAULT: 'var(--color-warning)',
|
|
hover: 'var(--color-warning-hover)',
|
|
active: 'var(--color-warning-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-warning-bg)',
|
|
hover: 'var(--color-warning-bg-hover)',
|
|
},
|
|
},
|
|
error: {
|
|
DEFAULT: 'var(--color-error)',
|
|
hover: 'var(--color-error-hover)',
|
|
active: 'var(--color-error-active)',
|
|
bg: {
|
|
DEFAULT: 'var(--color-error-bg)',
|
|
hover: 'var(--color-error-bg-hover)',
|
|
},
|
|
},
|
|
};
|