@ncino/styles 10.0.4 → 10.1.1
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/dist/gator/themes/MUIGatorTheme.js +20 -19
- package/dist/gator/themes/components/menu.js +65 -0
- package/dist/gator/themes/utils/themeConfig.js +44 -4
- package/dist/types/gator/themes/components/menu.d.ts +62 -0
- package/dist/types/gator/themes/utils/themeConfig.d.ts +21 -0
- package/package.json +2 -2
|
@@ -7,22 +7,23 @@ import * as g from "./components/button.js";
|
|
|
7
7
|
import * as h from "./components/card.js";
|
|
8
8
|
import * as c from "./components/checkbox.js";
|
|
9
9
|
import * as f from "./components/chip.js";
|
|
10
|
-
import * as
|
|
11
|
-
import * as
|
|
10
|
+
import * as p from "./components/dialog.js";
|
|
11
|
+
import * as d from "./components/fab.js";
|
|
12
12
|
import * as y from "./components/form-control.js";
|
|
13
|
-
import * as u from "./components/
|
|
14
|
-
import * as _ from "./components/
|
|
15
|
-
import * as b from "./components/
|
|
16
|
-
import * as v from "./components/
|
|
17
|
-
import * as F from "./components/
|
|
18
|
-
import * as W from "./components/
|
|
19
|
-
import
|
|
13
|
+
import * as u from "./components/menu.js";
|
|
14
|
+
import * as _ from "./components/radio.js";
|
|
15
|
+
import * as b from "./components/select.js";
|
|
16
|
+
import * as v from "./components/switch.js";
|
|
17
|
+
import * as F from "./components/table.js";
|
|
18
|
+
import * as W from "./components/tabs.js";
|
|
19
|
+
import * as S from "./components/text-field.js";
|
|
20
|
+
import { createTheme as z } from "@mui/material/styles";
|
|
20
21
|
/* empty css */
|
|
21
22
|
/* empty css */
|
|
22
|
-
import { gatorShadows as
|
|
23
|
-
const
|
|
23
|
+
import { gatorShadows as O, gatorBorderRadius as x, gatorSpacing as H, gatorTypography as t, gatorColorValues as e } from "./utils/themeConfig.js";
|
|
24
|
+
const B = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./components/alert.ts": r, "./components/autocomplete.ts": s, "./components/avatar.ts": l, "./components/badge.ts": m, "./components/button.ts": g, "./components/card.ts": h, "./components/checkbox.ts": c, "./components/chip.ts": f, "./components/dialog.ts": p, "./components/fab.ts": d, "./components/form-control.ts": y, "./components/menu.ts": u, "./components/radio.ts": _, "./components/select.ts": b, "./components/switch.ts": v, "./components/table.ts": F, "./components/tabs.ts": W, "./components/text-field.ts": S }), k = Object.values(B).reduce((n, i) => (Object.keys(i).forEach((o) => {
|
|
24
25
|
o.startsWith("MUIGator") && o.includes("Override") && Object.assign(n, i[o]);
|
|
25
|
-
}), n), {}),
|
|
26
|
+
}), n), {}), w = {
|
|
26
27
|
palette: {
|
|
27
28
|
mode: "light",
|
|
28
29
|
primary: e.brand,
|
|
@@ -153,15 +154,15 @@ const H = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./com
|
|
|
153
154
|
letterSpacing: "var(--letter-spacing-default)"
|
|
154
155
|
}
|
|
155
156
|
},
|
|
156
|
-
spacing:
|
|
157
|
+
spacing: H,
|
|
157
158
|
shape: {
|
|
158
|
-
borderRadius:
|
|
159
|
+
borderRadius: x.xsmall
|
|
159
160
|
},
|
|
160
|
-
shadows:
|
|
161
|
+
shadows: O,
|
|
161
162
|
// Component-specific default props
|
|
162
163
|
components: {
|
|
163
164
|
// Component overrides
|
|
164
|
-
...
|
|
165
|
+
...k,
|
|
165
166
|
// Additional component overrides not in separate files
|
|
166
167
|
MuiLink: {
|
|
167
168
|
styleOverrides: {
|
|
@@ -176,8 +177,8 @@ const H = /* @__PURE__ */ Object.assign({ "./components/accordion.ts": a, "./com
|
|
|
176
177
|
}
|
|
177
178
|
}
|
|
178
179
|
}
|
|
179
|
-
},
|
|
180
|
+
}, R = z(w);
|
|
180
181
|
export {
|
|
181
|
-
|
|
182
|
-
|
|
182
|
+
R as default,
|
|
183
|
+
R as gatorMUITheme
|
|
183
184
|
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
const r = {
|
|
2
|
+
MuiMenu: {
|
|
3
|
+
defaultProps: {
|
|
4
|
+
disableAutoFocusItem: !1
|
|
5
|
+
},
|
|
6
|
+
styleOverrides: {
|
|
7
|
+
paper: ({ theme: o }) => ({
|
|
8
|
+
maxWidth: "16rem",
|
|
9
|
+
marginTop: o.spacing(0.5),
|
|
10
|
+
borderRadius: o.shape.borderRadius * 4,
|
|
11
|
+
boxShadow: o.shadows[3],
|
|
12
|
+
backgroundColor: o.palette.background.default,
|
|
13
|
+
backgroundImage: "none"
|
|
14
|
+
}),
|
|
15
|
+
list: ({ theme: o }) => ({
|
|
16
|
+
padding: `${o.spacing(1)} 0`
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
MuiMenuItem: {
|
|
21
|
+
defaultProps: {
|
|
22
|
+
disableRipple: !0
|
|
23
|
+
},
|
|
24
|
+
styleOverrides: {
|
|
25
|
+
root: ({ theme: o }) => ({
|
|
26
|
+
fontFamily: o.typography.fontFamily,
|
|
27
|
+
fontSize: o.typography.body1.fontSize,
|
|
28
|
+
lineHeight: o.typography.body1.lineHeight,
|
|
29
|
+
color: o.palette.text.primary,
|
|
30
|
+
padding: `${o.spacing(1)} ${o.spacing(2)}`,
|
|
31
|
+
minHeight: "unset",
|
|
32
|
+
"&:hover": {
|
|
33
|
+
backgroundColor: o.palette.primary.light
|
|
34
|
+
},
|
|
35
|
+
"&.Mui-focusVisible": {
|
|
36
|
+
outline: `2px solid ${o.palette.primary.main}`,
|
|
37
|
+
outlineOffset: "-2px",
|
|
38
|
+
backgroundColor: "transparent"
|
|
39
|
+
},
|
|
40
|
+
"&.Mui-selected": {
|
|
41
|
+
backgroundColor: o.palette.primary.light,
|
|
42
|
+
fontWeight: o.typography.fontWeightBold,
|
|
43
|
+
"&:hover": {
|
|
44
|
+
backgroundColor: o.palette.primary.light
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"&.Mui-disabled": {
|
|
48
|
+
opacity: 1,
|
|
49
|
+
color: o.palette.text.disabled
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
MuiDivider: {
|
|
55
|
+
styleOverrides: {
|
|
56
|
+
root: ({ theme: o }) => ({
|
|
57
|
+
borderColor: o.palette.divider,
|
|
58
|
+
margin: `${o.spacing(0.5)} 0`
|
|
59
|
+
})
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
export {
|
|
64
|
+
r as MUIGatorMenuOverrides
|
|
65
|
+
};
|
|
@@ -103,7 +103,7 @@ const F = {
|
|
|
103
103
|
},
|
|
104
104
|
divider: "#BFBFBF"
|
|
105
105
|
// --color-border-primary / --color-neutral-50
|
|
106
|
-
},
|
|
106
|
+
}, r = {
|
|
107
107
|
fontFamily: {
|
|
108
108
|
body: '"Open Sans", system-ui, -apple-system, sans-serif',
|
|
109
109
|
headings: '"Lexend Deca", system-ui, -apple-system, sans-serif'
|
|
@@ -114,7 +114,46 @@ const F = {
|
|
|
114
114
|
semiBold: 600,
|
|
115
115
|
bold: 700
|
|
116
116
|
}
|
|
117
|
-
},
|
|
117
|
+
}, a = 8, e = {
|
|
118
|
+
0: "0",
|
|
119
|
+
// --spacing-0: 0px
|
|
120
|
+
1: "0.0625rem",
|
|
121
|
+
// --spacing-1: 1px
|
|
122
|
+
2: "0.125rem",
|
|
123
|
+
// --spacing-2: 2px
|
|
124
|
+
3: "0.25rem",
|
|
125
|
+
// --spacing-3: 4px
|
|
126
|
+
4: "0.3125rem",
|
|
127
|
+
// --spacing-4: 5px
|
|
128
|
+
5: "0.5rem",
|
|
129
|
+
// --spacing-5: 8px
|
|
130
|
+
6: "0.5625rem",
|
|
131
|
+
// --spacing-6: 9px
|
|
132
|
+
7: "0.75rem",
|
|
133
|
+
// --spacing-7: 12px
|
|
134
|
+
8: "1rem",
|
|
135
|
+
// --spacing-8: 16px
|
|
136
|
+
9: "1.25rem",
|
|
137
|
+
// --spacing-9: 20px
|
|
138
|
+
10: "1.5rem",
|
|
139
|
+
// --spacing-10: 24px
|
|
140
|
+
11: "2rem",
|
|
141
|
+
// --spacing-11: 32px
|
|
142
|
+
12: "2.5rem",
|
|
143
|
+
// --spacing-12: 40px
|
|
144
|
+
13: "3rem",
|
|
145
|
+
// --spacing-13: 48px
|
|
146
|
+
14: "3.5rem",
|
|
147
|
+
// --spacing-14: 56px
|
|
148
|
+
15: "4rem",
|
|
149
|
+
// --spacing-15: 64px
|
|
150
|
+
16: "4.5rem",
|
|
151
|
+
// --spacing-16: 72px
|
|
152
|
+
17: "5rem",
|
|
153
|
+
// --spacing-17: 80px
|
|
154
|
+
18: "7.5rem"
|
|
155
|
+
// --spacing-18: 120px
|
|
156
|
+
}, x = {
|
|
118
157
|
none: 0,
|
|
119
158
|
// --border-radius-no-radius
|
|
120
159
|
xsmall: 2,
|
|
@@ -150,6 +189,7 @@ export {
|
|
|
150
189
|
x as gatorBorderRadius,
|
|
151
190
|
F as gatorColorValues,
|
|
152
191
|
p as gatorShadows,
|
|
153
|
-
|
|
154
|
-
|
|
192
|
+
a as gatorSpacing,
|
|
193
|
+
e as gatorSpacingScale,
|
|
194
|
+
r as gatorTypography
|
|
155
195
|
};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
export declare const MUIGatorMenuOverrides: {
|
|
2
|
+
MuiMenu: {
|
|
3
|
+
defaultProps: {
|
|
4
|
+
disableAutoFocusItem: boolean;
|
|
5
|
+
};
|
|
6
|
+
styleOverrides: {
|
|
7
|
+
paper: ({ theme }: any) => {
|
|
8
|
+
maxWidth: string;
|
|
9
|
+
marginTop: any;
|
|
10
|
+
borderRadius: number;
|
|
11
|
+
boxShadow: any;
|
|
12
|
+
backgroundColor: any;
|
|
13
|
+
backgroundImage: string;
|
|
14
|
+
};
|
|
15
|
+
list: ({ theme }: any) => {
|
|
16
|
+
padding: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
MuiMenuItem: {
|
|
21
|
+
defaultProps: {
|
|
22
|
+
disableRipple: boolean;
|
|
23
|
+
};
|
|
24
|
+
styleOverrides: {
|
|
25
|
+
root: ({ theme }: any) => {
|
|
26
|
+
fontFamily: any;
|
|
27
|
+
fontSize: any;
|
|
28
|
+
lineHeight: any;
|
|
29
|
+
color: any;
|
|
30
|
+
padding: string;
|
|
31
|
+
minHeight: string;
|
|
32
|
+
'&:hover': {
|
|
33
|
+
backgroundColor: any;
|
|
34
|
+
};
|
|
35
|
+
'&.Mui-focusVisible': {
|
|
36
|
+
outline: string;
|
|
37
|
+
outlineOffset: string;
|
|
38
|
+
backgroundColor: string;
|
|
39
|
+
};
|
|
40
|
+
'&.Mui-selected': {
|
|
41
|
+
backgroundColor: any;
|
|
42
|
+
fontWeight: any;
|
|
43
|
+
'&:hover': {
|
|
44
|
+
backgroundColor: any;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
'&.Mui-disabled': {
|
|
48
|
+
opacity: number;
|
|
49
|
+
color: any;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
MuiDivider: {
|
|
55
|
+
styleOverrides: {
|
|
56
|
+
root: ({ theme }: any) => {
|
|
57
|
+
borderColor: any;
|
|
58
|
+
margin: string;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
};
|
|
@@ -78,6 +78,27 @@ export declare const gatorTypography: {
|
|
|
78
78
|
};
|
|
79
79
|
};
|
|
80
80
|
export declare const gatorSpacing = 8;
|
|
81
|
+
export declare const gatorSpacingScale: {
|
|
82
|
+
0: string;
|
|
83
|
+
1: string;
|
|
84
|
+
2: string;
|
|
85
|
+
3: string;
|
|
86
|
+
4: string;
|
|
87
|
+
5: string;
|
|
88
|
+
6: string;
|
|
89
|
+
7: string;
|
|
90
|
+
8: string;
|
|
91
|
+
9: string;
|
|
92
|
+
10: string;
|
|
93
|
+
11: string;
|
|
94
|
+
12: string;
|
|
95
|
+
13: string;
|
|
96
|
+
14: string;
|
|
97
|
+
15: string;
|
|
98
|
+
16: string;
|
|
99
|
+
17: string;
|
|
100
|
+
18: string;
|
|
101
|
+
};
|
|
81
102
|
export declare const gatorBorderRadius: {
|
|
82
103
|
none: number;
|
|
83
104
|
xsmall: number;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/styles",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.1.1",
|
|
5
5
|
"description": "nCino Shared Web Component Styling",
|
|
6
6
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
7
7
|
"publishConfig": {
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"glob": "^13.0.0",
|
|
67
67
|
"rimraf": "^6.1.2",
|
|
68
68
|
"typescript": "^5.9.3",
|
|
69
|
-
"vite": "7.3.
|
|
69
|
+
"vite": "7.3.2",
|
|
70
70
|
"vite-plugin-dts": "4.5.4",
|
|
71
71
|
"vite-plugin-static-copy": "^3.3.0"
|
|
72
72
|
},
|