@ncino/styles 9.0.0-preview.6 → 9.0.0-preview.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -3
- package/src/gator/_fonts.css +8 -0
- package/src/gator/_gator-grid.css +81 -0
- package/src/gator/_gator-sizing.css +179 -0
- package/src/gator/_gator-typography.css +171 -0
- package/src/gator/fonts/OpenSans-VariableFont.woff2 +0 -0
- package/src/gator/gator-global-styles.css +31 -0
- package/src/gator/themes/MUIGatorTheme.ts +237 -0
- package/src/gator/themes/components/accordion.ts +67 -0
- package/src/gator/themes/components/alert.ts +53 -0
- package/src/gator/themes/components/autocomplete.ts +156 -0
- package/src/gator/themes/components/avatar.ts +65 -0
- package/src/gator/themes/components/badge.ts +55 -0
- package/src/gator/themes/components/button.ts +71 -0
- package/src/gator/themes/components/card.ts +202 -0
- package/src/gator/themes/components/checkbox.ts +73 -0
- package/src/gator/themes/components/chip.ts +270 -0
- package/src/gator/themes/components/dialog.ts +62 -0
- package/src/gator/themes/components/form-control.ts +103 -0
- package/src/gator/themes/components/radio.ts +53 -0
- package/src/gator/themes/components/select.ts +74 -0
- package/src/gator/themes/components/text-field.ts +100 -0
- package/src/gator/themes/utils/themeConfig.ts +111 -0
- package/src/gator/tokens/_gator-global-tokens.css +4 -0
- package/src/gator/tokens/primitive.tokens.css +113 -0
- package/src/gator/tokens/semantic.tokens.css +349 -0
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { gatorTypography } from '../utils/themeConfig';
|
|
2
|
+
|
|
3
|
+
export const MUIGatorFormControlOverrides = {
|
|
4
|
+
|
|
5
|
+
MuiFormControl: {
|
|
6
|
+
styleOverrides: {
|
|
7
|
+
root: {
|
|
8
|
+
// Radio group label (legend)
|
|
9
|
+
'& .MuiFormLabel-root': {
|
|
10
|
+
fontFamily: gatorTypography.fontFamily.body,
|
|
11
|
+
fontSize: 'var(--font-size-body-1)',
|
|
12
|
+
lineHeight: 'var(--line-height-body-1)',
|
|
13
|
+
color: 'var(--color-text-primary)',
|
|
14
|
+
letterSpacing: 'var(--letter-spacing-default)',
|
|
15
|
+
fontWeight: gatorTypography.fontWeight.regular,
|
|
16
|
+
marginBottom: '8px',
|
|
17
|
+
position: 'relative',
|
|
18
|
+
transform: 'none',
|
|
19
|
+
|
|
20
|
+
'&.Mui-focused': {
|
|
21
|
+
color: 'var(--color-text-primary)',
|
|
22
|
+
},
|
|
23
|
+
|
|
24
|
+
'&.Mui-disabled': {
|
|
25
|
+
color: 'var(--color-text-disabled)',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
// Help text (FormHelperText)
|
|
30
|
+
'& .MuiFormHelperText-root': {
|
|
31
|
+
fontFamily: gatorTypography.fontFamily.body,
|
|
32
|
+
fontSize: 'var(--font-size-body-2)',
|
|
33
|
+
lineHeight: 'var(--line-height-body-2)',
|
|
34
|
+
color: 'var(--color-text-secondary)',
|
|
35
|
+
letterSpacing: 'var(--letter-spacing-default)',
|
|
36
|
+
marginLeft: 0,
|
|
37
|
+
marginTop: '8px',
|
|
38
|
+
|
|
39
|
+
'&.Mui-error': {
|
|
40
|
+
color: 'var(--color-text-error)',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
MuiFormLabel: {
|
|
47
|
+
styleOverrides: {
|
|
48
|
+
root: {
|
|
49
|
+
fontFamily: gatorTypography.fontFamily.body,
|
|
50
|
+
fontSize: 'var(--font-size-body-1)',
|
|
51
|
+
lineHeight: 'var(--line-height-body-1)',
|
|
52
|
+
color: 'var(--color-text-primary)',
|
|
53
|
+
letterSpacing: 'var(--letter-spacing-default)',
|
|
54
|
+
fontWeight: gatorTypography.fontWeight.regular,
|
|
55
|
+
'&.Mui-error': {
|
|
56
|
+
color: 'var(--color-text-primary)',
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
MuiFormControlLabel: {
|
|
62
|
+
styleOverrides: {
|
|
63
|
+
root: {
|
|
64
|
+
marginLeft: 0,
|
|
65
|
+
marginRight: 0,
|
|
66
|
+
gap: '4px',
|
|
67
|
+
alignItems: 'center',
|
|
68
|
+
|
|
69
|
+
// Label styling
|
|
70
|
+
'& .MuiFormControlLabel-label': {
|
|
71
|
+
fontFamily: gatorTypography.fontFamily.body,
|
|
72
|
+
fontSize: 'var(--font-size-body-1)',
|
|
73
|
+
lineHeight: 'var(--line-height-body-1)',
|
|
74
|
+
color: 'var(--color-text-primary)',
|
|
75
|
+
letterSpacing: 'var(--letter-spacing-default)',
|
|
76
|
+
paddingTop: '0px', // Aligns with center of radio
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
// Disabled label
|
|
80
|
+
'&.Mui-disabled .MuiFormControlLabel-label': {
|
|
81
|
+
color: 'var(--color-text-disabled)',
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
// Error label
|
|
85
|
+
'&.Mui-error .MuiFormLabel-root': {
|
|
86
|
+
color: 'var(--color-text-primary)',
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
// Checkbox adjustment
|
|
90
|
+
'& .MuiCheckbox-root': {
|
|
91
|
+
marginLeft: '-5px',
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
MuiFormGroup: {
|
|
97
|
+
styleOverrides: {
|
|
98
|
+
root: {
|
|
99
|
+
gap: '8px',
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
},
|
|
103
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gator Design System - MUI Radio & Radio Group Component Overrides
|
|
3
|
+
*
|
|
4
|
+
* Maps Gator Radio design specifications to MUI Radio and RadioGroup components.
|
|
5
|
+
* Supports all interactive states (default, hover, focus, disabled, error) aligned with Gator tokens.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const MUIGatorRadioOverrides = {
|
|
9
|
+
MuiRadio: {
|
|
10
|
+
defaultProps: {
|
|
11
|
+
disableFocusRipple: true,
|
|
12
|
+
disableTouchRipple: true,
|
|
13
|
+
},
|
|
14
|
+
styleOverrides: {
|
|
15
|
+
root: {
|
|
16
|
+
padding: '3px', // Centers the 18px radio in a 24px container
|
|
17
|
+
color: 'var(--color-border-primary)',
|
|
18
|
+
|
|
19
|
+
'&:hover svg': {
|
|
20
|
+
fill: 'var(--color-border-brand)',
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
'&.Mui-focusVisible': {
|
|
24
|
+
outline: '3px solid var(--color-border-focus)',
|
|
25
|
+
outlineOffset: '-2px'
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
'&.Mui-checked': {
|
|
29
|
+
color: 'var(--color-border-brand)',
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
'&.Mui-disabled': {
|
|
33
|
+
color: 'var(--color-border-disabled)',
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
'.Mui-error &': {
|
|
37
|
+
color: 'var(--color-feedback-error-secondary)',
|
|
38
|
+
'&:hover': {
|
|
39
|
+
backgroundColor: 'var(--color-surface-error)',
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
'.Mui-error &.Mui-checked': {
|
|
44
|
+
color: 'var(--color-feedback-error-secondary)',
|
|
45
|
+
},
|
|
46
|
+
|
|
47
|
+
'.Mui-error &:hover svg': {
|
|
48
|
+
fill: 'var(--color-feedback-error-secondary)',
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
};
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { gatorTypography } from '../utils/themeConfig';
|
|
2
|
+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
3
|
+
|
|
4
|
+
export const MUIGatorSelectOverrides = {
|
|
5
|
+
MuiSelect: {
|
|
6
|
+
defaultProps: {
|
|
7
|
+
MenuProps: {
|
|
8
|
+
PaperProps: {
|
|
9
|
+
sx: {
|
|
10
|
+
backgroundColor: 'var(--color-surface-primary)',
|
|
11
|
+
maxHeight: '14rem',
|
|
12
|
+
marginTop: 'var(--spacing-3)',
|
|
13
|
+
borderRadius: 'var(--border-radius-medium)',
|
|
14
|
+
boxShadow: 'var(--shadow-3-dropdown)',
|
|
15
|
+
|
|
16
|
+
'& .MuiMenuItem-root': {
|
|
17
|
+
padding: 'var(--spacing-5) var(--spacing-12)',
|
|
18
|
+
minHeight: '40px',
|
|
19
|
+
fontFamily: gatorTypography.fontFamily.body,
|
|
20
|
+
fontSize: 'var(--font-size-body-1)',
|
|
21
|
+
lineHeight: 'var(--line-height-body-1)',
|
|
22
|
+
color: 'var(--color-text-primary)',
|
|
23
|
+
|
|
24
|
+
'&:hover': {
|
|
25
|
+
backgroundColor: 'var(--color-surface-hover)',
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
'&.Mui-focusVisible': {
|
|
29
|
+
outline: '2px solid var(--color-border-focus)',
|
|
30
|
+
outlineOffset: '-2px',
|
|
31
|
+
backgroundColor: 'transparent',
|
|
32
|
+
},
|
|
33
|
+
|
|
34
|
+
'&.Mui-selected': {
|
|
35
|
+
backgroundColor: 'var(--color-surface-brand)',
|
|
36
|
+
color: 'var(--color-text-primary)',
|
|
37
|
+
fontWeight: gatorTypography.fontWeight.bold,
|
|
38
|
+
paddingLeft: 'var(--spacing-8)',
|
|
39
|
+
'::before': {
|
|
40
|
+
content: '"\u2713"',
|
|
41
|
+
display: 'inline-block',
|
|
42
|
+
marginRight: 'var(--spacing-6)',
|
|
43
|
+
color: 'var(--color-icon-primary)',
|
|
44
|
+
fontWeight: gatorTypography.fontWeight.regular,
|
|
45
|
+
},
|
|
46
|
+
|
|
47
|
+
'&:hover': {
|
|
48
|
+
backgroundColor: 'var(--color-surface-brand-secondary)',
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
'&.Mui-disabled': {
|
|
53
|
+
opacity: 1,
|
|
54
|
+
color: 'var(--color-text-disabled)',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
IconComponent: ExpandMoreIcon as any,
|
|
61
|
+
},
|
|
62
|
+
styleOverrides: {
|
|
63
|
+
root: {
|
|
64
|
+
'& .MuiSelect-select': {
|
|
65
|
+
padding: 'var(--spacing-7) var(--spacing-8)',
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
icon: {
|
|
70
|
+
right: 'var(--spacing-8)',
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
};
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
export const MUIGatorTextFieldOverrides = {
|
|
2
|
+
MuiInputLabel: {
|
|
3
|
+
defaultProps: {
|
|
4
|
+
shrink: true,
|
|
5
|
+
},
|
|
6
|
+
},
|
|
7
|
+
MuiInputBase: {
|
|
8
|
+
styleOverrides: {
|
|
9
|
+
root: {
|
|
10
|
+
borderRadius: 'var(--border-radius-x-small)',
|
|
11
|
+
fontSize: 'var(--font-size-body-1)',
|
|
12
|
+
lineHeight: 'var(--line-height-body-1)',
|
|
13
|
+
background: 'var(--color-surface-primary)',
|
|
14
|
+
padding: 'var(--spacing-7) var(--spacing-8)',
|
|
15
|
+
border: '1px solid var(--color-border-primary)',
|
|
16
|
+
marginTop: '0 !important',
|
|
17
|
+
'&:before': {
|
|
18
|
+
display: 'none',
|
|
19
|
+
},
|
|
20
|
+
'&:after': {
|
|
21
|
+
display: 'none',
|
|
22
|
+
},
|
|
23
|
+
'&:hover': {
|
|
24
|
+
borderColor: 'var(--color-border-brand-secondary)',
|
|
25
|
+
},
|
|
26
|
+
'&.Mui-focused': {
|
|
27
|
+
outline: '2px solid var(--color-border-focus)',
|
|
28
|
+
},
|
|
29
|
+
'&.Mui-disabled': {
|
|
30
|
+
background: 'var(--color-surface-tertiary)',
|
|
31
|
+
color: 'var(--color-text-disabled)',
|
|
32
|
+
borderColor: 'transparent',
|
|
33
|
+
},
|
|
34
|
+
'&.Mui-error': {
|
|
35
|
+
borderColor: 'var(--color-border-error-secondary)',
|
|
36
|
+
},
|
|
37
|
+
'&.Mui-readOnly': {
|
|
38
|
+
background: 'var(--color-surface-tertiary)',
|
|
39
|
+
borderColor: 'var(--color-border-secondary)',
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
input: {
|
|
43
|
+
padding: 0,
|
|
44
|
+
color: 'var(--color-text-primary)',
|
|
45
|
+
fontSize: 'var(--font-size-body-1)',
|
|
46
|
+
lineHeight: 'var(--line-height-body-1)',
|
|
47
|
+
'&::placeholder': {
|
|
48
|
+
color: 'var(--color-text-placeholder)',
|
|
49
|
+
opacity: 1
|
|
50
|
+
},
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
MuiOutlinedInput: {
|
|
55
|
+
defaultProps: {
|
|
56
|
+
notched: false,
|
|
57
|
+
},
|
|
58
|
+
styleOverrides: {
|
|
59
|
+
root: {
|
|
60
|
+
padding: 0,
|
|
61
|
+
'fieldset': {
|
|
62
|
+
display: 'none'
|
|
63
|
+
},
|
|
64
|
+
input: {
|
|
65
|
+
padding: 'var(--spacing-7) var(--spacing-8)',
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
MuiFilledInput: {
|
|
71
|
+
defaultProps: {
|
|
72
|
+
disableUnderline: true,
|
|
73
|
+
},
|
|
74
|
+
styleOverrides: {
|
|
75
|
+
root: {
|
|
76
|
+
backgroundColor: 'var(--color-surface-primary)',
|
|
77
|
+
'&:hover': {
|
|
78
|
+
backgroundColor: 'var(--color-surface-primary)',
|
|
79
|
+
},
|
|
80
|
+
'&.Mui-focused': {
|
|
81
|
+
backgroundColor: 'var(--color-surface-primary)',
|
|
82
|
+
},
|
|
83
|
+
'&.Mui-disabled': {
|
|
84
|
+
backgroundColor: 'var(--color-surface-tertiary)',
|
|
85
|
+
},
|
|
86
|
+
'&.Mui-readOnly': {
|
|
87
|
+
backgroundColor: 'var(--color-surface-tertiary)',
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
input: {
|
|
91
|
+
padding: 0
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
MuiTextField: {
|
|
96
|
+
defaultProps: {
|
|
97
|
+
variant: 'standard',
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
};
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
export const gatorColorValues = {
|
|
2
|
+
brand: {
|
|
3
|
+
main: '#103656', // --color-brand-30
|
|
4
|
+
light: '#F0F5FA', // --color-brand-0
|
|
5
|
+
dark: '#0D2B45', // --color-brand-40
|
|
6
|
+
contrastText: '#FFFFFF',
|
|
7
|
+
},
|
|
8
|
+
error: {
|
|
9
|
+
main: '#D44011', // --color-red-30
|
|
10
|
+
light: '#FAEBE7', // --color-red-10
|
|
11
|
+
dark: '#AA330E', // --color-red-40
|
|
12
|
+
contrastText: '#FFFFFF',
|
|
13
|
+
},
|
|
14
|
+
success: {
|
|
15
|
+
main: '#22A969', // --color-green-30
|
|
16
|
+
light: '#E9F7F0', // --color-green-10
|
|
17
|
+
dark: '#1B8754', // --color-green-40
|
|
18
|
+
contrastText: '#FFFFFF',
|
|
19
|
+
},
|
|
20
|
+
warning: {
|
|
21
|
+
main: '#EC7000', // --color-orange-30
|
|
22
|
+
light: '#FEF1E6', // --color-orange-10
|
|
23
|
+
dark: '#BD5A00', // --color-orange-40
|
|
24
|
+
contrastText: '#040404', // Dark text for better contrast on orange
|
|
25
|
+
},
|
|
26
|
+
info: {
|
|
27
|
+
main: '#3355FF', // --color-blue-30
|
|
28
|
+
light: '#E8ECFF', // --color-blue-10
|
|
29
|
+
dark: '#2A46D4', // --color-blue-40
|
|
30
|
+
contrastText: '#FFFFFF',
|
|
31
|
+
},
|
|
32
|
+
ai: {
|
|
33
|
+
main: '#8000FF', // --color-purple-30
|
|
34
|
+
light: '#F6EEFF', // --color-purple-10
|
|
35
|
+
dark: '#6600CC', // --color-purple-40
|
|
36
|
+
contrastText: '#FFFFFF',
|
|
37
|
+
},
|
|
38
|
+
secondary: {
|
|
39
|
+
main: '#18A600', // --color-gator-green-30
|
|
40
|
+
light: '#EFFAED', // --color-gator-green-10
|
|
41
|
+
dark: '#107000', // --color-gator-green-40
|
|
42
|
+
contrastText: '#FFFFFF',
|
|
43
|
+
},
|
|
44
|
+
neutral: {
|
|
45
|
+
0: '#FFFFFF', // --color-neutral-0
|
|
46
|
+
10: '#F7F7F7', // --color-neutral-10
|
|
47
|
+
20: '#F2F2F2', // --color-neutral-20
|
|
48
|
+
30: '#E5E5E5', // --color-neutral-30
|
|
49
|
+
35: '#DBDBDB', // --color-neutral-35
|
|
50
|
+
40: '#BFBFBF', // --color-neutral-40
|
|
51
|
+
45: '#808080', // --color-neutral-45
|
|
52
|
+
50: '#6D6D6D', // --color-neutral-50
|
|
53
|
+
60: '#404040', // --color-neutral-60
|
|
54
|
+
70: '#1F1F1F', // --color-neutral-70
|
|
55
|
+
80: '#040404', // --color-neutral-80
|
|
56
|
+
},
|
|
57
|
+
text: {
|
|
58
|
+
primary: '#1F1F1F', // --color-text-primary / --color-neutral-70
|
|
59
|
+
secondary: '#6D6D6D', // --color-text-secondary / --color-neutral-50
|
|
60
|
+
disabled: '#BFBFBF', // --color-text-disabled / --color-neutral-40
|
|
61
|
+
},
|
|
62
|
+
background: {
|
|
63
|
+
default: '#FFFFFF', // --color-background-primary / --color-neutral-0
|
|
64
|
+
paper: '#F7F7F7', // --color-background-secondary / --color-neutral-10
|
|
65
|
+
},
|
|
66
|
+
divider: '#BFBFBF', // --color-border-primary / --color-neutral-50
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export const gatorTypography = {
|
|
70
|
+
fontFamily: {
|
|
71
|
+
body: '"Open Sans", system-ui, -apple-system, sans-serif',
|
|
72
|
+
headings: '"Lexend Deca", system-ui, -apple-system, sans-serif',
|
|
73
|
+
},
|
|
74
|
+
fontWeight: {
|
|
75
|
+
regular: 400,
|
|
76
|
+
medium: 500,
|
|
77
|
+
semiBold: 600,
|
|
78
|
+
bold: 700,
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// Gator uses 8px base spacing which aligns with MUI's default
|
|
83
|
+
// Gator spacing scale: 1=2px, 2=4px, 3=8px, 4=16px, 6=24px, 7=32px
|
|
84
|
+
// MUI multiplies by 8, so spacing(1)=8px, spacing(2)=16px, etc.
|
|
85
|
+
export const gatorSpacing = 8;
|
|
86
|
+
|
|
87
|
+
export const gatorBorderRadius = {
|
|
88
|
+
none: 0, // --border-radius-no-radius
|
|
89
|
+
xsmall: 2, // --border-radius-x-small (0.125rem = 2px)
|
|
90
|
+
small: 4, // --border-radius-small (0.25rem = 4px)
|
|
91
|
+
medium: 8, // --border-radius-medium (0.5rem = 8px)
|
|
92
|
+
large: 12, // --border-radius-large (0.75rem = 12px)
|
|
93
|
+
xlarge: 16, // --border-radius-x-large (1rem = 16px)
|
|
94
|
+
xxlarge: 24, // --border-radius-xx-large (1.5rem = 24px)
|
|
95
|
+
xxxlarge: 32, // --border-radius-xxx-large (2rem = 32px)
|
|
96
|
+
circle: 9999, // --border-radius-circle
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
export const gatorShadows = [
|
|
100
|
+
'none',
|
|
101
|
+
// shadow-1-card
|
|
102
|
+
'0 1px 1.5px 0px rgba(31, 31, 31, 0.04), 0 2px 5px 0px rgba(31, 31, 31, 0.05), 0 3px 9px 6px rgba(31, 31, 31, 0.08)',
|
|
103
|
+
// shadow-2-card-raised
|
|
104
|
+
'0 5px 10px 0px rgba(31, 31, 31, 0.05), 0 7px 14px 0px rgba(31, 31, 31, 0.08), 0 3px 6px 0px rgba(31, 31, 31, 0.04)',
|
|
105
|
+
// shadow-3-dropdown
|
|
106
|
+
'0 7px 12px 0px rgba(31, 31, 31, 0.05), 0 8px 16px 0px rgba(31, 31, 31, 0.08), 0 9px 18px 0px rgba(31, 31, 31, 0.10)',
|
|
107
|
+
// shadow-4-modal
|
|
108
|
+
'0 9px 15px 0px rgba(31, 31, 31, 0.05), 0 10px 20px 0px rgba(31, 31, 31, 0.08), 0 9px 20px 0px rgba(31, 31, 31, 0.10)',
|
|
109
|
+
// Repeat shadow-4-modal for indices 5-24 (MUI requires 25 shadow values)
|
|
110
|
+
...Array(20).fill('0 9px 15px 0px rgba(31, 31, 31, 0.05), 0 10px 20px 0px rgba(31, 31, 31, 0.08), 0 9px 20px 0px rgba(31, 31, 31, 0.10)'),
|
|
111
|
+
] as [string, ...string[]];
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
:host, :root {
|
|
2
|
+
/* Brand Colors */
|
|
3
|
+
/* Base HSL components (set by JavaScript utility) */
|
|
4
|
+
--color-brand-hue-default: 208;
|
|
5
|
+
--color-brand-saturation-default: 69%;
|
|
6
|
+
|
|
7
|
+
/* Solid brand scale using HSL calculations */
|
|
8
|
+
--color-brand-0: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), 50%, 96%); /* #F0F5FA */
|
|
9
|
+
--color-brand-10: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), 44%, 90%); /* #DAE7F1 */
|
|
10
|
+
--color-brand-20: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), 30%, 80%); /* #BDCDDC */
|
|
11
|
+
--color-brand-30: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%); /* #103656 */
|
|
12
|
+
--color-brand-40: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 16%); /* #0D2B45 */
|
|
13
|
+
--color-brand-50: hsl(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 8%); /* #061622 */
|
|
14
|
+
|
|
15
|
+
/* Alpha variations */
|
|
16
|
+
--color-brand-30-alpha-70: hsla(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%, 0.7);
|
|
17
|
+
--color-brand-30-alpha-50: hsla(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%, 0.5);
|
|
18
|
+
--color-brand-30-alpha-30: hsla(var(--color-brand-hue, var(--color-brand-hue-default)), var(--color-brand-saturation, var(--color-brand-saturation-default)), 20%, 0.3);
|
|
19
|
+
|
|
20
|
+
/* Neutral Colors */
|
|
21
|
+
--color-neutral-0: #FFFFFF;
|
|
22
|
+
--color-neutral-10: #F7F7F7;
|
|
23
|
+
--color-neutral-20: #F2F2F2;
|
|
24
|
+
--color-neutral-30: #E5E5E5;
|
|
25
|
+
--color-neutral-35: #DBDBDB;
|
|
26
|
+
--color-neutral-40: #BFBFBF;
|
|
27
|
+
--color-neutral-45: #808080;
|
|
28
|
+
--color-neutral-50: #6D6D6D;
|
|
29
|
+
--color-neutral-60: #404040;
|
|
30
|
+
--color-neutral-70: #1F1F1F;
|
|
31
|
+
--color-neutral-80: #040404;
|
|
32
|
+
|
|
33
|
+
/* Neutral Alpha Colors */
|
|
34
|
+
--color-neutral-40-alpha-70: rgba(191, 191, 191, 0.70);
|
|
35
|
+
--color-neutral-40-alpha-50: rgba(191, 191, 191, 0.50);
|
|
36
|
+
--color-neutral-40-alpha-30: rgba(191, 191, 191, 0.30);
|
|
37
|
+
--color-neutral-40-alpha-10: rgba(191, 191, 191, 0.10);
|
|
38
|
+
--color-neutral-40-alpha-8: rgba(191, 191, 191, 0.08);
|
|
39
|
+
--color-neutral-40-alpha-5: rgba(191, 191, 191, 0.05);
|
|
40
|
+
--color-neutral-40-alpha-4: rgba(191, 191, 191, 0.04);
|
|
41
|
+
|
|
42
|
+
--color-neutral-70-alpha-10: rgba(31, 31, 31, 0.10);
|
|
43
|
+
--color-neutral-70-alpha-8: rgba(31, 31, 31, 0.08);
|
|
44
|
+
--color-neutral-70-alpha-5: rgba(31, 31, 31, 0.05);
|
|
45
|
+
--color-neutral-70-alpha-4: rgba(31, 31, 31, 0.04);
|
|
46
|
+
|
|
47
|
+
--color-neutral-80-alpha-60: rgba(4, 4, 4, 0.60);
|
|
48
|
+
--color-neutral-80-alpha-10: rgba(4, 4, 4, 0.10);
|
|
49
|
+
|
|
50
|
+
/* Green Colors */
|
|
51
|
+
--color-green-0: #F2F7F5;
|
|
52
|
+
--color-green-10: #E9F7F0;
|
|
53
|
+
--color-green-20: #90D4B4;
|
|
54
|
+
--color-green-30: #22A969;
|
|
55
|
+
--color-green-40: #1B8754;
|
|
56
|
+
--color-green-50: #14653F;
|
|
57
|
+
|
|
58
|
+
/* Orange Colors */
|
|
59
|
+
--color-orange-0: #FEFBF9;
|
|
60
|
+
--color-orange-10: #FEF1E6;
|
|
61
|
+
--color-orange-20: #F5B77F;
|
|
62
|
+
--color-orange-30: #EC7000;
|
|
63
|
+
--color-orange-40: #BD5A00;
|
|
64
|
+
--color-orange-50: #8D4300;
|
|
65
|
+
|
|
66
|
+
/* Red Colors */
|
|
67
|
+
--color-red-0: #FAF6F5;
|
|
68
|
+
--color-red-10: #FAEBE7;
|
|
69
|
+
--color-red-20: #E99F88;
|
|
70
|
+
--color-red-30: #D44011;
|
|
71
|
+
--color-red-40: #AA330E;
|
|
72
|
+
--color-red-50: #9E2500;
|
|
73
|
+
|
|
74
|
+
/* Purple Colors */
|
|
75
|
+
--color-purple-0: #FCFAFF;
|
|
76
|
+
--color-purple-10: #F6EEFF;
|
|
77
|
+
--color-purple-20: #E5CCFF;
|
|
78
|
+
--color-purple-30: #8000FF;
|
|
79
|
+
--color-purple-40: #6600CC;
|
|
80
|
+
--color-purple-50: #4C0099;
|
|
81
|
+
|
|
82
|
+
/* Blue Colors */
|
|
83
|
+
--color-blue-0: #FAFBFF;
|
|
84
|
+
--color-blue-10: #E8ECFF;
|
|
85
|
+
--color-blue-20: #BBC6FF;
|
|
86
|
+
--color-blue-30: #3355FF;
|
|
87
|
+
--color-blue-40: #2A46D4;
|
|
88
|
+
--color-blue-50: #2238AA;
|
|
89
|
+
|
|
90
|
+
/* Aqua Colors */
|
|
91
|
+
--color-aqua-0: #F7FBFC;
|
|
92
|
+
--color-aqua-10: #EFF9FC;
|
|
93
|
+
--color-aqua-20: #A2DBF0;
|
|
94
|
+
--color-aqua-30: #009FD9;
|
|
95
|
+
--color-aqua-40: #0F6F91;
|
|
96
|
+
--color-aqua-50: #0A5069;
|
|
97
|
+
|
|
98
|
+
/* Gator Green Colors */
|
|
99
|
+
--color-gator-green-0: #F6FAF5;
|
|
100
|
+
--color-gator-green-10: #EFFAED;
|
|
101
|
+
--color-gator-green-20: #BDE1B7;
|
|
102
|
+
--color-gator-green-30: #18A600;
|
|
103
|
+
--color-gator-green-40: #107000;
|
|
104
|
+
--color-gator-green-50: #0D5700;
|
|
105
|
+
|
|
106
|
+
/* Yellow Colors */
|
|
107
|
+
--color-yellow-0: #FEFDF9;
|
|
108
|
+
--color-yellow-10: #FEFBF4;
|
|
109
|
+
--color-yellow-20: #FDE399;
|
|
110
|
+
--color-yellow-30: #FFBB00;
|
|
111
|
+
--color-yellow-40: #966F00;
|
|
112
|
+
--color-yellow-50: #735500;
|
|
113
|
+
}
|