styles/consts.js at master · AegisJSProject/styles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {
	colorLight, colorDark, bgLight, bgDark, borderLight, borderDark, btnPrimary, btnPrimaryActive,
	btnPrimaryHover, btnDisabled, btnSuccess, btnSuccessActive, btnSuccessHover, btnDanger, btnDangerActive,
	btnDangerHover, btnWarning, btnWarningActive, btnWarningHover, btnSecondary, btnSecondaryHover,
	btnSecondaryActive, btnInfo, btnInfoHover, btnInfoActive, btnDark, btnDarkHover, btnDarkActive,
	btnLightActive, btnLightHover, btnLight, btnLink, btnLinkHover, btnLinkActive, linkColor,
	scrollbarColor, scrollbarTrack,
} from './palette/aegis.js';

export const customProperties = {
	'font': { initialValue: 'system-ui', syntax: '<custom-ident> | <string>' },
	'btn-border-radius': { initialValue: '5px', syntax: '<length>' },
	'btn-border-width': { initialValue: '0px', syntax: '<length>' },
	'color-light': { initialValue: colorLight, syntax: '<color>' },
	'color-dark': { initialValue: colorDark, syntax: '<color>' },
	'bg-light': { initialValue: bgLight, syntax: '<color>' },
	'bg-dark': { initialValue: bgDark, syntax: '<color>' },
	'border-color-light': { initialValue: borderLight, syntax: '<color>' },
	'border-color-dark': { initialValue: borderDark, syntax: '<color>' },
	'border-radius': { initialValue: '8px', syntax: '<length>' },
	'btn-primary': { initialValue: btnPrimary, syntax: '<color>' },
	'btn-primary-hover': { initialValue: btnPrimaryHover, syntax: '<color>' },
	'btn-primary-active': { initialValue: btnPrimaryActive, syntax: '<color>' },
	'btn-primary-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-secondary': { initialValue: btnSecondary, syntax: '<color>' },
	'btn-secondary-hover': { initialValue: btnSecondaryHover, syntax: '<color>' },
	'btn-secondary-active': { initialValue: btnSecondaryActive, syntax: '<color>' },
	'btn-success': { initialValue: btnSuccess, syntax: '<color>' },
	'btn-success-hover': { initialValue: btnSuccessHover, syntax: '<color>' },
	'btn-success-active': { initialValue: btnSuccessActive, syntax: '<color>' },
	'btn-success-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-info': { initialValue: btnInfo, syntax: '<color>' },
	'btn-info-hover': { initialValue: btnInfoHover, syntax: '<color>' },
	'btn-info-active': { initialValue: btnInfoActive, syntax: '<color>' },
	'btn-info-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-warning': { initialValue: btnWarning, syntax: '<color>' },
	'btn-warning-hover': { initialValue: btnWarningHover, syntax: '<color>' },
	'btn-warning-active': { initialValue: btnWarningActive, syntax: '<color>' },
	'btn-warning-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-danger': { initialValue: btnDanger, syntax: '<color>' },
	'btn-danger-hover': { initialValue: btnDangerHover, syntax: '<color>' },
	'btn-danger-active': { initialValue: btnDangerActive, syntax: '<color>' },
	'btn-danger-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-dark': { initialValue: btnDark, syntax: '<color>' },
	'btn-dark-hover': { initialValue: btnDarkHover, syntax: '<color>' },
	'btn-dark-active': { initialValue: btnDarkActive, syntax: '<color>' },
	'btn-dark-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-light': { initialValue: btnLight, syntax: '<color>' },
	'btn-light-hover': { initialValue: btnLightHover, syntax: '<color>' },
	'btn-light-active': { initialValue: btnLightActive, syntax: '<color>' },
	'btn-light-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'btn-link': { initialValue: btnLink, syntax: '<color>' },
	'btn-link-hover': { initialValue: btnLinkHover, syntax: '<color>' },
	'btn-link-active': { initialValue: btnLinkActive, syntax: '<color>' },
	'btn-link-disabled': { initialValue: btnDisabled, syntax: '<color>' },
	'link-color': { initialValue: linkColor, syntax: '<color>' },
	'scrollbar-color': { initialValue: scrollbarColor, syntax: '<color>' },
	'scrollbar-track': { initialValue: scrollbarTrack, syntax: '<color>' },
	'scrollbar-width': { initialValue: 'auto', syntax: '<custom-ident>' },
	'blink-speed': { initialValue: '200ms', syntax: '<time>' },
	'fast-speed': { initialValue: '400ms', syntax: '<time>' },
	'normal-speed': { initialValue: '600ms', syntax: '<time>' },
	'slow-speed': { initialValue: '800ms', syntax: '<time>' },
	'crawl-speed': { initialValue: '1200ms', syntax: '<time>' },
	'btn-disabled-opacity': { initialValue: 0.65, syntax: '<number>' },
	'btn-disabled-saturation': { initialValue: '50%', syntax: '<percentage>' },
	'btn-disabled-brightness': { initialValue: '90%', syntax: '<percentage>' },
};

export const SUPPORTS_CUSTOM_STATES = CSS.supports('selector(:state(foo))');