1707ad0b66
The responsive version of the demo app was buggy, so we need to make it shiny! Fixes #275
462 lines
14 KiB
SCSS
462 lines
14 KiB
SCSS
$themes: (
|
|
'default': (
|
|
'theme': (
|
|
'colors': (
|
|
'secondary-text': #555F6B,
|
|
'secondary-100': #F2F7FC,
|
|
'secondary-200': #EBF3FA,
|
|
'secondary-300': #E2EEF8,
|
|
'secondary-400': #DDEAF7,
|
|
'secondary-500': #D4E5F5,
|
|
'secondary-600': #C1D0DF,
|
|
'secondary-700': #97A3AE,
|
|
'secondary-800': #757E87,
|
|
'secondary-900': #596067,
|
|
'info-text': #FFFFFF,
|
|
'info-100': #EBF2FC,
|
|
'info-200': #8CB5EA,
|
|
'info-300': #5894E1,
|
|
'info-400': #377FDB,
|
|
'info-500': #055FD2,
|
|
'info-600': #0556BF,
|
|
'info-700': #044395,
|
|
'info-800': #033474,
|
|
'info-900': #022858,
|
|
'greyscale-100': #FAFAFB,
|
|
'greyscale-200': #F3F4F4,
|
|
'greyscale-300': #E7E8EA,
|
|
'greyscale-400': #C2C6CA,
|
|
'greyscale-500': #9EA3AA,
|
|
'greyscale-600': #79818A,
|
|
'greyscale-700': #555F6B,
|
|
'greyscale-800': #303C4B,
|
|
'greyscale-900': #0C1A2B,
|
|
'greyscale-000': #FFFFFF,
|
|
'primary-100': #EBF2FC,
|
|
'primary-200': #8CB5EA,
|
|
'primary-300': #5894E1,
|
|
'primary-400': #377FDB,
|
|
'primary-500': #055FD2,
|
|
'primary-600': #0556BF,
|
|
'primary-700': #044395,
|
|
'primary-800': #033474,
|
|
'primary-900': #022858,
|
|
'success-100': #EFFCD3,
|
|
'success-200': #DBFAA9,
|
|
'success-300': #BEF27C,
|
|
'success-400': #A0E659,
|
|
'success-500': #76D628,
|
|
'success-600': #5AB81D,
|
|
'success-700': #419A14,
|
|
'success-800': #2C7C0C,
|
|
'success-900': #1D6607,
|
|
'warning-100': #FFF8CD,
|
|
'warning-200': #FFEF9B,
|
|
'warning-300': #FFE469,
|
|
'warning-400': #FFDA43,
|
|
'warning-500': #FFC805,
|
|
'warning-600': #DBA603,
|
|
'warning-700': #B78702,
|
|
'warning-800': #936901,
|
|
'warning-900': #7A5400,
|
|
'danger-100': #F4B0B0,
|
|
'danger-200': #EE8A8A,
|
|
'danger-300': #E65454,
|
|
'danger-400': #E13333,
|
|
'danger-500': #DA0000,
|
|
'danger-600': #C60000,
|
|
'danger-700': #9B0000,
|
|
'danger-800': #780000,
|
|
'danger-900': #5C0000,
|
|
'primary-text': #FFFFFF,
|
|
'success-text': #FFFFFF,
|
|
'warning-text': #FFFFFF,
|
|
'danger-text': #FFFFFF
|
|
),
|
|
'font': (
|
|
'sizes': (
|
|
'h1': 1.75rem,
|
|
'h2': 1.375rem,
|
|
'h3': 1.125rem,
|
|
'h4': 0.8125rem,
|
|
'h5': 0.625rem,
|
|
'h6': 0.5rem,
|
|
'l': 1rem,
|
|
'm': 0.8125rem,
|
|
's': 0.6875rem
|
|
),
|
|
'weights': (
|
|
'thin': 200,
|
|
'light': 300,
|
|
'regular': 400,
|
|
'medium': 500,
|
|
'bold': 600,
|
|
'extrabold': 700,
|
|
'black': 800
|
|
),
|
|
'families': (
|
|
'base': #{\Roboto Flex Variable\, sans-serif},
|
|
'accent': #{\Roboto Flex Variable\, sans-serif}
|
|
),
|
|
'letterSpacings': (
|
|
'h1': normal,
|
|
'h2': normal,
|
|
'h3': normal,
|
|
'h4': normal,
|
|
'h5': 1px,
|
|
'h6': normal,
|
|
'l': normal,
|
|
'm': normal,
|
|
's': normal
|
|
)
|
|
),
|
|
'spacings': (
|
|
'xl': 4rem,
|
|
'l': 3rem,
|
|
'b': 1.625rem,
|
|
's': 1rem,
|
|
't': 0.5rem,
|
|
'st': 0.25rem
|
|
),
|
|
'transitions': (
|
|
'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)},
|
|
'ease-out': #{cubic-bezier(0.33, 1, 0.68, 1)},
|
|
'ease-in-out': #{cubic-bezier(0.65, 0, 0.35, 1)},
|
|
'duration': 250ms
|
|
),
|
|
'breakpoints': (
|
|
'xs': 0,
|
|
'sm': 576px,
|
|
'md': 768px,
|
|
'lg': 992px,
|
|
'xl': 1200px,
|
|
'xxl': 1400px
|
|
)
|
|
)
|
|
),
|
|
'dark': (
|
|
'theme': (
|
|
'colors': (
|
|
'greyscale-100': #182536,
|
|
'greyscale-200': #303C4B,
|
|
'greyscale-300': #555F6B,
|
|
'greyscale-400': #79818A,
|
|
'greyscale-500': #9EA3AA,
|
|
'greyscale-600': #C2C6CA,
|
|
'greyscale-700': #E7E8EA,
|
|
'greyscale-800': #F3F4F4,
|
|
'greyscale-900': #FAFAFB,
|
|
'greyscale-000': #0C1A2B,
|
|
'primary-100': #3B4C62,
|
|
'primary-200': #4D6481,
|
|
'primary-300': #6381A6,
|
|
'primary-400': #7FA5D5,
|
|
'primary-500': #8CB5EA,
|
|
'primary-600': #A3C4EE,
|
|
'primary-700': #C3D8F4,
|
|
'primary-800': #DDE9F8,
|
|
'primary-900': #F4F8FD,
|
|
'success-100': #EEF8D7,
|
|
'success-200': #D9F1B2,
|
|
'success-300': #BDE985,
|
|
'success-400': #A0E25D,
|
|
'success-500': #76D628,
|
|
'success-600': #5BB520,
|
|
'success-700': #43941A,
|
|
'success-800': #307414,
|
|
'success-900': #225D10,
|
|
'warning-100': #F7F3D5,
|
|
'warning-200': #F0E5AA,
|
|
'warning-300': #E8D680,
|
|
'warning-400': #E3C95F,
|
|
'warning-500': #D9B32B,
|
|
'warning-600': #BD9721,
|
|
'warning-700': #9D7B1C,
|
|
'warning-800': #7E6016,
|
|
'warning-900': #684D12,
|
|
'danger-100': #F8D0D0,
|
|
'danger-200': #F09898,
|
|
'danger-300': #F09898,
|
|
'danger-400': #ED8585,
|
|
'danger-500': #E96666,
|
|
'danger-600': #DD6666,
|
|
'danger-700': #C36666,
|
|
'danger-800': #AE6666,
|
|
'danger-900': #9D6666
|
|
)
|
|
),
|
|
'components': (
|
|
'card': (
|
|
'border-width': none,
|
|
'box-shadow': #{rgba(0, 8, 16, 0.3) 0px 16px 24px}
|
|
)
|
|
)
|
|
),
|
|
'redflux_dark': (
|
|
'theme': (
|
|
'colors': (
|
|
'primary-text': #FFFFFF,
|
|
'primary-100': #FA8D92,
|
|
'primary-200': #F95B63,
|
|
'primary-300': #F72A35,
|
|
'primary-400': #E50914,
|
|
'primary-500': #C30811,
|
|
'primary-600': #A0060E,
|
|
'primary-700': #7E050B,
|
|
'primary-800': #5C0408,
|
|
'primary-900': #390205,
|
|
'secondary-text': #FFF,
|
|
'secondary-100': #1b5ad7,
|
|
'secondary-200': #146cea,
|
|
'secondary-300': #007ffe,
|
|
'secondary-400': #008eff,
|
|
'secondary-500': #279eff,
|
|
'secondary-600': #56b0ff,
|
|
'secondary-700': #8ac6ff,
|
|
'secondary-800': #b9dcff,
|
|
'secondary-900': #e2f1ff,
|
|
'greyscale-000': #000000BB,
|
|
'greyscale-100': #191919BB,
|
|
'greyscale-200': #232323,
|
|
'greyscale-300': #292929,
|
|
'greyscale-400': #343434,
|
|
'greyscale-500': #404040,
|
|
'greyscale-600': #aaaaaa,
|
|
'greyscale-700': #cccccc,
|
|
'greyscale-800': #eeeeee,
|
|
'greyscale-900': #f7f7f7,
|
|
'danger-900': #FACED0,
|
|
'danger-800': #F7A9AD,
|
|
'danger-700': #F38389,
|
|
'danger-600': #F05E66,
|
|
'danger-500': #EC3942,
|
|
'danger-400': #D8151F,
|
|
'danger-300': #A51017,
|
|
'danger-200': #720B10,
|
|
'danger-100': #3F0609,
|
|
'info-900': #53A4FD,
|
|
'info-800': #2B8FFC,
|
|
'info-700': #047AFA,
|
|
'info-600': #0366D2,
|
|
'info-500': #0255AF,
|
|
'info-400': #02448C,
|
|
'info-300': #013368,
|
|
'info-200': #012245,
|
|
'info-100': #001122,
|
|
'success-900': #A9F7C0,
|
|
'success-800': #8DF4AC,
|
|
'success-700': #71F198,
|
|
'success-600': #55EF83,
|
|
'success-500': #39EC6F,
|
|
'success-400': #14CF4C,
|
|
'success-300': #0E9236,
|
|
'success-200': #085620,
|
|
'success-100': #021909,
|
|
'warning-900': #EAC88B,
|
|
'warning-800': #E4BA6D,
|
|
'warning-700': #DFAB4F,
|
|
'warning-600': #D99D31,
|
|
'warning-500': #B68121,
|
|
'warning-400': #8A621A,
|
|
'warning-300': #5F4412,
|
|
'warning-200': #34250A,
|
|
'warning-100': #090702
|
|
),
|
|
'font': (
|
|
'families': (
|
|
'base': #{Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif},
|
|
'accent': #{Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif}
|
|
)
|
|
)
|
|
),
|
|
'components': (
|
|
'button': (
|
|
'border-radius': 0.1875rem
|
|
),
|
|
'forms-input': (
|
|
'border-radius': 0.1875rem,
|
|
'border-color': #9EA3AA,
|
|
'border-color--hover': #79818A,
|
|
'background-color': #FAFAFB,
|
|
'label-color--focus': #555F6B
|
|
),
|
|
'forms-select': (
|
|
'border-radius': 0.1875rem,
|
|
'border-color': #9EA3AA,
|
|
'border-color--hover': #79818A,
|
|
'background-color': #FAFAFB,
|
|
'border-color--focus': #555F6B,
|
|
'label-color--focus': #555F6B,
|
|
'menu-background-color': #191919,
|
|
'item-background-color--selected': #0556BF
|
|
),
|
|
'forms-datepicker': (
|
|
'border-radius': 0.1875rem,
|
|
'border-color': #9EA3AA,
|
|
'border-color--hover': #79818A,
|
|
'background-color': #FAFAFB,
|
|
'border-color--focus': #555F6B,
|
|
'label-color--focus': #555F6B,
|
|
'menu-background-color': #191919,
|
|
'grid-cell--border-color--today': #303C4B,
|
|
'grid-cell--color--today': #303C4B,
|
|
'range-selection-background-color': #022858,
|
|
'item-background-color--selected': #0556BF
|
|
),
|
|
'forms-fileuploader': (
|
|
'border-color': #9EA3AA,
|
|
'border-color--hover': #79818A,
|
|
'background-color': #FAFAFB,
|
|
'background-color--active': #9EA3AA,
|
|
'accent-color': #303C4B
|
|
),
|
|
'forms-textarea': (
|
|
'border-radius': 0.1875rem,
|
|
'border-color': #9EA3AA,
|
|
'border-color--hover': #79818A,
|
|
'background-color': #FAFAFB,
|
|
'border-color--focus': #555F6B,
|
|
'label-color--focus': #555F6B
|
|
),
|
|
'forms-checkbox': (
|
|
'border-radius': 0.1875rem,
|
|
'accent-color': #FAFAFB,
|
|
'background-color': #303C4B
|
|
),
|
|
'forms-switch': (
|
|
'handle-border-radius': 0.3rem,
|
|
'rail-border-radius': 0.500rem,
|
|
'accent-color': #303C4B,
|
|
'handle-background-color': #FAFAFB,
|
|
'rail-background-color': #C2C6CA
|
|
),
|
|
'forms-radio': (
|
|
'accent-color': #FAFAFB,
|
|
'background-color': #303C4B
|
|
),
|
|
'modal': (
|
|
'border-radius': 0.1875rem,
|
|
'background-color': #191919,
|
|
'backdrop-color': #FFFFFF
|
|
),
|
|
'card': (
|
|
'border-radius': 0.1875rem,
|
|
'border-width': none,
|
|
'box-shadow': #{rgba(255, 220, 220, 0.05) 0px 0px 60px 10px}
|
|
)
|
|
)
|
|
),
|
|
'blueney_dark': (
|
|
'theme': (
|
|
'colors': (
|
|
'primary-text': #FFFFFF,
|
|
'primary-900': #53B0FF,
|
|
'primary-800': #39A4FF,
|
|
'primary-700': #2099FF,
|
|
'primary-600': #068DFF,
|
|
'primary-500': #0080EB,
|
|
'primary-400': #0072D2,
|
|
'primary-300': #00549A,
|
|
'primary-200': #003562,
|
|
'primary-100': #00172A,
|
|
'greyscale-900': #FAFAFC,
|
|
'greyscale-800': #DBDDE7,
|
|
'greyscale-700': #BCC0D3,
|
|
'greyscale-600': #9EA2BF,
|
|
'greyscale-500': #7F85AB,
|
|
'greyscale-400': #626995,
|
|
'greyscale-300': #4E5376,
|
|
'greyscale-200': #393E57,
|
|
'greyscale-100': #1B1D29,
|
|
'greyscale-000': #151823
|
|
),
|
|
'font': (
|
|
'families': (
|
|
'base': #{Avenir, sans-serif},
|
|
'accent': #{Avenir, sans-serif}
|
|
)
|
|
)
|
|
),
|
|
'components': (
|
|
'card': (
|
|
'border-radius': 0.25rem,
|
|
'border-width': none,
|
|
'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px}
|
|
),
|
|
'button': (
|
|
'border-radius': 0.25rem
|
|
),
|
|
'forms-input': (
|
|
'border-radius': 0.25rem,
|
|
'border-color': transparent,
|
|
'border-color--hover': transparent,
|
|
'border-color--focus': #555F6B,
|
|
'background-color': #F3F4F4,
|
|
'label-color--focus': #555F6B,
|
|
'label-color': #555F6B
|
|
),
|
|
'forms-select': (
|
|
'border-radius': 0.25rem,
|
|
'border-color': transparent,
|
|
'border-color--hover': transparent,
|
|
'border-color--focus': #555F6B,
|
|
'background-color': #F3F4F4,
|
|
'label-color--focus': #555F6B,
|
|
'menu-background-color': #F3F4F4,
|
|
'item-background-color--hover': #E7E8EA,
|
|
'item-background-color--selected': #377FDB
|
|
),
|
|
'forms-datepicker': (
|
|
'border-radius': 0.25rem,
|
|
'border-color': transparent,
|
|
'border-color--hover': transparent,
|
|
'border-color--focus': #555F6B,
|
|
'background-color': #F3F4F4,
|
|
'label-color--focus': #555F6B,
|
|
'menu-background-color': #F3F4F4,
|
|
'grid-cell--border-color--today': #9EA3AA,
|
|
'grid-cell--color--today': #555F6B,
|
|
'grid-cell--color--selected': #0556BF,
|
|
'range-selection-background-color': #EBF2FC,
|
|
'item-background-color--hover': #E7E8EA,
|
|
'item-background-color--selected': #377FDB
|
|
),
|
|
'forms-fileuploader': (
|
|
'background-color': #F3F4F4,
|
|
'background-color--active': #E7E8EA,
|
|
'border-color': transparent
|
|
),
|
|
'forms-textarea': (
|
|
'border-color': transparent,
|
|
'border-color--hover': transparent,
|
|
'border-color--focus': #555F6B,
|
|
'border-radius': 0.25rem,
|
|
'background-color': #F3F4F4,
|
|
'label-color--focus': #555F6B
|
|
),
|
|
'forms-checkbox': (
|
|
'border-radius': 0.25rem,
|
|
'border-color': #E7E8EA,
|
|
'accent-color': #0C1A2B,
|
|
'background-color': #F3F4F4
|
|
),
|
|
'forms-switch': (
|
|
'rail-background-color': #F3F4F4,
|
|
'accent-color': #377FDB
|
|
),
|
|
'forms-radio': (
|
|
'border-color': #E7E8EA,
|
|
'accent-color': #0C1A2B,
|
|
'background-color': #F3F4F4
|
|
),
|
|
'modal': (
|
|
'border-radius': 0.25rem,
|
|
'background-color': #FAFAFB,
|
|
'backdrop-color': #00172AAB,
|
|
'border-color': transparent,
|
|
'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px}
|
|
)
|
|
)
|
|
)
|
|
) !default;
|