@ncino/styles 9.1.0 → 9.2.0-preview.2
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
CHANGED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gator Design System - MUI Switch Component Overrides
|
|
3
|
+
*
|
|
4
|
+
* Maps Gator Switch design specifications to MUI Switch component.
|
|
5
|
+
* Based on ngcSwitch component styling (packages/web-components/src/components/switch/gator/).
|
|
6
|
+
*
|
|
7
|
+
* Supports interactive states:
|
|
8
|
+
* - Default (unchecked) with gray track
|
|
9
|
+
* - Checked with brand color track
|
|
10
|
+
* - Disabled with gray track (no shadow)
|
|
11
|
+
* - Focus with brand color outline
|
|
12
|
+
* - Hover with ripple effect on thumb
|
|
13
|
+
*
|
|
14
|
+
* Reference: packages/web-components/src/components/switch/gator/switch.gator.scss
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export const MUIGatorSwitchOverrides = {
|
|
18
|
+
MuiFormControlLabel: {
|
|
19
|
+
styleOverrides: {
|
|
20
|
+
root: {
|
|
21
|
+
// Spacing between switch and label
|
|
22
|
+
marginLeft: 0,
|
|
23
|
+
marginRight: 0,
|
|
24
|
+
|
|
25
|
+
// Label positioning
|
|
26
|
+
'& .MuiFormControlLabel-label': {
|
|
27
|
+
marginLeft: '0.5rem',
|
|
28
|
+
fontFamily: 'var(--font-family-body)',
|
|
29
|
+
fontSize: 'var(--font-size-body-2)',
|
|
30
|
+
color: 'var(--color-text-primary)',
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
// Disabled label color
|
|
34
|
+
'&.Mui-disabled .MuiFormControlLabel-label': {
|
|
35
|
+
color: 'var(--color-text-secondary)',
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
|
|
41
|
+
MuiSwitch: {
|
|
42
|
+
defaultProps: {
|
|
43
|
+
disableRipple: true
|
|
44
|
+
},
|
|
45
|
+
styleOverrides: {
|
|
46
|
+
root: {
|
|
47
|
+
// Size root container to match ngcSwitch dimensions (2.375rem × 1.25rem)
|
|
48
|
+
width: '2.375rem',
|
|
49
|
+
height: '1.25rem',
|
|
50
|
+
padding: 0,
|
|
51
|
+
overflow: 'visible',
|
|
52
|
+
|
|
53
|
+
// Hover ripple effect - unchecked (only when not disabled)
|
|
54
|
+
'&:hover .MuiSwitch-switchBase:not(.Mui-disabled):not(.Mui-checked) .MuiSwitch-thumb': {
|
|
55
|
+
outline: '0.5rem solid var(--color-surface-alpha-neutral-medium)'
|
|
56
|
+
},
|
|
57
|
+
|
|
58
|
+
// Hover ripple effect - checked (only when not disabled)
|
|
59
|
+
'&:hover .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb': {
|
|
60
|
+
outline: '0.5rem solid var(--color-surface-alpha-brand-subtle)'
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
// Active (mouse down) ripple effect - unchecked (only when not disabled)
|
|
64
|
+
'&:active .MuiSwitch-switchBase:not(.Mui-disabled):not(.Mui-checked) .MuiSwitch-thumb': {
|
|
65
|
+
outline: '0.5rem solid var(--color-surface-alpha-neutral-strong)'
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
// Active (mouse down) ripple effect - checked (only when not disabled)
|
|
69
|
+
'&:active .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb': {
|
|
70
|
+
outline: '0.5rem solid var(--color-surface-alpha-brand-strong)'
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
|
|
74
|
+
switchBase: {
|
|
75
|
+
// Position the thumb with 2px offset (0.125rem from ngcSwitch)
|
|
76
|
+
padding: '0.125rem',
|
|
77
|
+
top: 0,
|
|
78
|
+
left: 0,
|
|
79
|
+
|
|
80
|
+
// Transform for checked state - move thumb to right (1.25rem from left edge = 1.125rem transform)
|
|
81
|
+
'&.Mui-checked': {
|
|
82
|
+
transform: 'translateX(1.125rem)',
|
|
83
|
+
|
|
84
|
+
// Checked state track color
|
|
85
|
+
'& + .MuiSwitch-track': {
|
|
86
|
+
backgroundColor: 'var(--color-feedback-brand)',
|
|
87
|
+
opacity: 1
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
|
|
91
|
+
// Disabled state
|
|
92
|
+
'&.Mui-disabled': {
|
|
93
|
+
// Disabled track color (overrides checked)
|
|
94
|
+
'& + .MuiSwitch-track': {
|
|
95
|
+
backgroundColor: 'var(--color-surface-disabled)',
|
|
96
|
+
opacity: 1
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
// Remove thumb shadow when disabled
|
|
100
|
+
'& .MuiSwitch-thumb': {
|
|
101
|
+
boxShadow: 'none',
|
|
102
|
+
outline: 'none'
|
|
103
|
+
},
|
|
104
|
+
|
|
105
|
+
'& .MuiSwitch-thumb:hover': {
|
|
106
|
+
outline: 'none'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
|
|
110
|
+
// Focus state - apply outline to the track when switchBase is focused
|
|
111
|
+
'&.Mui-focusVisible + .MuiSwitch-track': {
|
|
112
|
+
outline: '0.125rem solid var(--color-border-focus)',
|
|
113
|
+
outlineOffset: '0.125rem',
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
track: {
|
|
118
|
+
// Track dimensions to match root (2.375rem × 1.25rem)
|
|
119
|
+
width: '2.375rem',
|
|
120
|
+
height: '1.25rem',
|
|
121
|
+
borderRadius: '0.625rem',
|
|
122
|
+
|
|
123
|
+
// Base unchecked state - gray background
|
|
124
|
+
backgroundColor: 'var(--color-surface-neutral-secondary)',
|
|
125
|
+
opacity: 1,
|
|
126
|
+
border: 'none',
|
|
127
|
+
|
|
128
|
+
// Smooth color transition when toggling
|
|
129
|
+
transition: 'background-color 0.3s ease'
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
thumb: {
|
|
133
|
+
// Base dimensions and styling (1rem = 16px from ngcSwitch)
|
|
134
|
+
width: '1rem',
|
|
135
|
+
height: '1rem',
|
|
136
|
+
borderRadius: '50%',
|
|
137
|
+
backgroundColor: 'var(--color-surface-primary)',
|
|
138
|
+
boxShadow: 'var(--shadow-1-card)',
|
|
139
|
+
|
|
140
|
+
// Set color context for ripple currentColor inheritance (inherits track color)
|
|
141
|
+
color: 'var(--color-surface-neutral-secondary)',
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
};
|