@ncino/styles 10.5.1 → 10.5.3

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.
Files changed (9) hide show
  1. package/dist/gator/themes/components/checkbox.js +17 -17
  2. package/dist/gator/themes/components/drawer.js +3 -1
  3. package/dist/gator/themes/components/select.js +34 -33
  4. package/dist/gator/themes/components/text-field.js +33 -33
  5. package/dist/types/gator/themes/components/checkbox.d.ts +7 -7
  6. package/dist/types/gator/themes/components/drawer.d.ts +1 -0
  7. package/dist/types/gator/themes/components/select.d.ts +22 -22
  8. package/dist/types/gator/themes/components/text-field.d.ts +23 -23
  9. package/package.json +1 -1
package/dist/gator/themes/components/checkbox.js CHANGED
@@ -1,14 +1,14 @@
1
- const r = {
1
+ const o = {
2
2
  MuiCheckbox: {
3
3
  defaultProps: {
4
4
  disableRipple: !0
5
5
  },
6
6
  styleOverrides: {
7
- root: {
7
+ root: ({ theme: r }) => ({
8
8
  padding: "3px",
9
9
  // Default unchecked state
10
10
  "&:not(.Mui-checked):not(.MuiCheckbox-indeterminate)": {
11
- color: "var(--color-border-primary)",
11
+ color: r.palette.divider,
12
12
  svg: {
13
13
  display: "none"
14
14
  },
@@ -22,48 +22,48 @@ const r = {
22
22
  outlineOffset: "-1px",
23
23
  borderRadius: "2px",
24
24
  margin: "7px",
25
- backgroundColor: "var(--color-surface-primary)"
25
+ backgroundColor: r.palette.background.default
26
26
  },
27
27
  "&:hover::before": {
28
- color: "var(--color-feedback-brand-secondary)",
29
- backgroundColor: "var(--color-surface-brand)"
28
+ color: r.palette.primary.dark,
29
+ backgroundColor: r.palette.primary.light
30
30
  }
31
31
  },
32
32
  // Checked & Indeterminate states
33
33
  "&.Mui-checked, &.MuiCheckbox-indeterminate": {
34
- color: "var(--color-feedback-brand)",
34
+ color: r.palette.primary.main,
35
35
  "&:hover": {
36
- color: "var(--color-feedback-brand-secondary)"
36
+ color: r.palette.primary.dark
37
37
  }
38
38
  },
39
39
  // Focus state
40
40
  "&.Mui-focusVisible": {
41
- outline: "3px solid var(--color-border-focus)",
41
+ outline: `3px solid ${r.palette.text.primary}`,
42
42
  outlineOffset: "-3px",
43
43
  borderRadius: "8px"
44
44
  },
45
45
  // Disabled state
46
46
  "&.Mui-disabled": {
47
- color: "var(--color-border-disabled) !important",
47
+ color: `${r.palette.text.disabled} !important`,
48
48
  "::before": {
49
- backgroundColor: "var(--color-surface-secondary) !important"
49
+ backgroundColor: `${r.palette.background.paper} !important`
50
50
  }
51
51
  },
52
52
  // Error state
53
53
  ".Mui-error &": {
54
- color: "var(--color-feedback-error) !important",
54
+ color: `${r.palette.error.main} !important`,
55
55
  "&:hover svg": {
56
- color: "var(--color-feedback-error-secondary) !important"
56
+ color: `${r.palette.error.dark} !important`
57
57
  },
58
58
  "&:hover::before": {
59
- backgroundColor: "var(--color-surface-error) !important",
60
- color: "var(--color-feedback-error) !important"
59
+ backgroundColor: `${r.palette.error.light} !important`,
60
+ color: `${r.palette.error.main} !important`
61
61
  }
62
62
  }
63
- }
63
+ })
64
64
  }
65
65
  }
66
66
  };
67
67
  export {
68
- r as MUIGatorCheckboxOverrides
68
+ o as MUIGatorCheckboxOverrides
69
69
  };
package/dist/gator/themes/components/drawer.js CHANGED
@@ -15,6 +15,7 @@ const n = {
15
15
  flexDirection: "column",
16
16
  boxShadow: o.shadows[4],
17
17
  border: "none",
18
+ borderRadius: "0px",
18
19
  // Bottom anchor
19
20
  "&.MuiDrawer-paperAnchorBottom": {
20
21
  width: "100%",
@@ -31,7 +32,8 @@ const n = {
31
32
  // Usage: add className="gator-panel-header" etc. to your child elements
32
33
  // -------------------------------------------------------
33
34
  "& .gator-panel-header": {
34
- borderBottom: `1px solid ${o.palette.divider}`,
35
+ borderBottom: "1px solid #E5E5E5",
36
+ // --color-border-tertiary / --color-neutral-30
35
37
  padding: o.spacing(8),
36
38
  fontSize: a.heading3,
37
39
  fontWeight: r.fontWeight.semiBold,
package/dist/gator/themes/components/select.js CHANGED
@@ -1,69 +1,70 @@
1
- import { gatorTypography as o } from "../utils/themeConfig.js";
2
- import r from "@mui/icons-material/ExpandMore";
3
- const i = {
1
+ import { chevronDownIcon as r } from "../icons/chevron-down.js";
2
+ import { GatorIcon as i } from "../icons/gatorIcon.js";
3
+ import { createElement as a } from "react";
4
+ const l = {
4
5
  MuiSelect: {
5
6
  defaultProps: {
6
7
  MenuProps: {
7
8
  PaperProps: {
8
- sx: {
9
- backgroundColor: "var(--color-surface-primary)",
9
+ sx: (o) => ({
10
+ backgroundColor: o.palette.background.default,
10
11
  maxHeight: "14rem",
11
- marginTop: "var(--spacing-3)",
12
- borderRadius: "var(--border-radius-medium)",
13
- boxShadow: "var(--shadow-3-dropdown)",
12
+ marginTop: o.spacing(3),
13
+ borderRadius: o.shape.borderRadius * 4,
14
+ boxShadow: o.shadows[3],
14
15
  "& .MuiMenuItem-root": {
15
- padding: "var(--spacing-5) var(--spacing-12)",
16
+ padding: `${o.spacing(5)} ${o.spacing(12)}`,
16
17
  minHeight: "40px",
17
- fontFamily: o.fontFamily.body,
18
- fontSize: "var(--font-size-body-1)",
19
- lineHeight: "var(--line-height-body-1)",
20
- color: "var(--color-text-primary)",
18
+ fontFamily: o.typography.fontFamily,
19
+ fontSize: o.typography.body1.fontSize,
20
+ lineHeight: o.typography.body1.lineHeight,
21
+ color: o.palette.text.primary,
21
22
  "&:hover": {
22
- backgroundColor: "var(--color-surface-hover)"
23
+ backgroundColor: o.palette.primary.light
23
24
  },
24
25
  "&.Mui-focusVisible": {
25
- outline: "2px solid var(--color-border-focus)",
26
+ outline: `2px solid ${o.palette.primary.main}`,
26
27
  outlineOffset: "-2px",
27
28
  backgroundColor: "transparent"
28
29
  },
29
30
  "&.Mui-selected": {
30
- backgroundColor: "var(--color-surface-brand)",
31
- color: "var(--color-text-primary)",
32
- fontWeight: o.fontWeight.bold,
33
- paddingLeft: "var(--spacing-8)",
31
+ backgroundColor: o.palette.primary.light,
32
+ color: o.palette.text.primary,
33
+ fontWeight: o.typography.fontWeightBold,
34
+ paddingLeft: o.spacing(8),
34
35
  "::before": {
35
36
  content: '"✓"',
36
37
  display: "inline-block",
37
- marginRight: "var(--spacing-6)",
38
- color: "var(--color-icon-primary)",
39
- fontWeight: o.fontWeight.regular
38
+ marginRight: o.spacing(6),
39
+ color: o.palette.text.primary,
40
+ fontWeight: o.typography.fontWeightRegular
40
41
  },
41
42
  "&:hover": {
42
- backgroundColor: "var(--color-surface-brand-secondary)"
43
+ backgroundColor: o.palette.primary.light
43
44
  }
44
45
  },
45
46
  "&.Mui-disabled": {
46
47
  opacity: 1,
47
- color: "var(--color-text-disabled)"
48
+ color: o.palette.text.disabled
48
49
  }
49
50
  }
50
- }
51
+ })
51
52
  }
52
53
  },
53
- IconComponent: r
54
+ IconComponent: ((o) => a(i, { svg: r, ...o }))
54
55
  },
55
56
  styleOverrides: {
56
- root: {
57
+ root: ({ theme: o }) => ({
57
58
  "& .MuiSelect-select": {
58
- padding: "var(--spacing-7) var(--spacing-8)"
59
+ padding: `${o.spacing(7)} ${o.spacing(8)}`
59
60
  }
60
- },
61
- icon: {
62
- right: "var(--spacing-8)"
63
- }
61
+ }),
62
+ icon: ({ theme: o }) => ({
63
+ right: o.spacing(8)
64
+ })
64
65
  }
65
66
  }
66
67
  };
67
68
  export {
68
- i as MUIGatorSelectOverrides
69
+ l as MUIGatorSelectOverrides
69
70
  };
package/dist/gator/themes/components/text-field.js CHANGED
@@ -1,4 +1,4 @@
1
- const r = {
1
+ const a = {
2
2
  MuiInputLabel: {
3
3
  defaultProps: {
4
4
  shrink: !0
@@ -6,13 +6,13 @@ const r = {
6
6
  },
7
7
  MuiInputBase: {
8
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)",
9
+ root: ({ theme: r }) => ({
10
+ borderRadius: r.shape.borderRadius,
11
+ fontSize: r.typography.body1.fontSize,
12
+ lineHeight: r.typography.body1.lineHeight,
13
+ background: r.palette.background.default,
14
+ padding: `${r.spacing(7)} ${r.spacing(8)}`,
15
+ border: `1px solid ${r.palette.divider}`,
16
16
  marginTop: "0 !important",
17
17
  "&:before": {
18
18
  display: "none"
@@ -21,34 +21,34 @@ const r = {
21
21
  display: "none"
22
22
  },
23
23
  "&:hover": {
24
- borderColor: "var(--color-border-brand-secondary)"
24
+ borderColor: r.palette.primary.dark
25
25
  },
26
26
  "&.Mui-focused": {
27
- outline: "2px solid var(--color-border-focus)"
27
+ outline: `2px solid ${r.palette.text.primary}`
28
28
  },
29
29
  "&.Mui-disabled": {
30
- background: "var(--color-surface-tertiary)",
31
- color: "var(--color-text-disabled)",
30
+ background: r.palette.background.paper,
31
+ color: r.palette.text.disabled,
32
32
  borderColor: "transparent"
33
33
  },
34
34
  "&.Mui-error": {
35
- borderColor: "var(--color-border-error-secondary)"
35
+ borderColor: r.palette.error.dark
36
36
  },
37
37
  "&.Mui-readOnly": {
38
- background: "var(--color-surface-tertiary)",
39
- borderColor: "var(--color-border-secondary)"
38
+ background: r.palette.background.paper,
39
+ borderColor: r.palette.action.disabled
40
40
  }
41
- },
42
- input: {
41
+ }),
42
+ input: ({ theme: r }) => ({
43
43
  padding: 0,
44
- color: "var(--color-text-primary)",
45
- fontSize: "var(--font-size-body-1)",
46
- lineHeight: "var(--line-height-body-1)",
44
+ color: r.palette.text.primary,
45
+ fontSize: r.typography.body1.fontSize,
46
+ lineHeight: r.typography.body1.lineHeight,
47
47
  "&::placeholder": {
48
- color: "var(--color-text-placeholder)",
48
+ color: r.palette.text.secondary,
49
49
  opacity: 1
50
50
  }
51
- }
51
+ })
52
52
  }
53
53
  },
54
54
  MuiOutlinedInput: {
@@ -56,15 +56,15 @@ const r = {
56
56
  notched: !1
57
57
  },
58
58
  styleOverrides: {
59
- root: {
59
+ root: ({ theme: r }) => ({
60
60
  padding: 0,
61
61
  fieldset: {
62
62
  display: "none"
63
63
  },
64
64
  input: {
65
- padding: "var(--spacing-7) var(--spacing-8)"
65
+ padding: `${r.spacing(7)} ${r.spacing(8)}`
66
66
  }
67
- }
67
+ })
68
68
  }
69
69
  },
70
70
  MuiFilledInput: {
@@ -72,21 +72,21 @@ const r = {
72
72
  disableUnderline: !0
73
73
  },
74
74
  styleOverrides: {
75
- root: {
76
- backgroundColor: "var(--color-surface-primary)",
75
+ root: ({ theme: r }) => ({
76
+ backgroundColor: r.palette.background.default,
77
77
  "&:hover": {
78
- backgroundColor: "var(--color-surface-primary)"
78
+ backgroundColor: r.palette.background.default
79
79
  },
80
80
  "&.Mui-focused": {
81
- backgroundColor: "var(--color-surface-primary)"
81
+ backgroundColor: r.palette.background.default
82
82
  },
83
83
  "&.Mui-disabled": {
84
- backgroundColor: "var(--color-surface-tertiary)"
84
+ backgroundColor: r.palette.background.paper
85
85
  },
86
86
  "&.Mui-readOnly": {
87
- backgroundColor: "var(--color-surface-tertiary)"
87
+ backgroundColor: r.palette.background.paper
88
88
  }
89
- },
89
+ }),
90
90
  input: {
91
91
  padding: 0
92
92
  }
@@ -99,5 +99,5 @@ const r = {
99
99
  }
100
100
  };
101
101
  export {
102
- r as MUIGatorTextFieldOverrides
102
+ a as MUIGatorTextFieldOverrides
103
103
  };
package/dist/types/gator/themes/components/checkbox.d.ts CHANGED
@@ -4,10 +4,10 @@ export declare const MUIGatorCheckboxOverrides: {
4
4
  disableRipple: boolean;
5
5
  };
6
6
  styleOverrides: {
7
- root: {
7
+ root: ({ theme }: any) => {
8
8
  padding: string;
9
9
  '&:not(.Mui-checked):not(.MuiCheckbox-indeterminate)': {
10
- color: string;
10
+ color: any;
11
11
  svg: {
12
12
  display: string;
13
13
  };
@@ -21,17 +21,17 @@ export declare const MUIGatorCheckboxOverrides: {
21
21
  outlineOffset: string;
22
22
  borderRadius: string;
23
23
  margin: string;
24
- backgroundColor: string;
24
+ backgroundColor: any;
25
25
  };
26
26
  '&:hover::before': {
27
- color: string;
28
- backgroundColor: string;
27
+ color: any;
28
+ backgroundColor: any;
29
29
  };
30
30
  };
31
31
  '&.Mui-checked, &.MuiCheckbox-indeterminate': {
32
- color: string;
32
+ color: any;
33
33
  '&:hover': {
34
- color: string;
34
+ color: any;
35
35
  };
36
36
  };
37
37
  '&.Mui-focusVisible': {
package/dist/types/gator/themes/components/drawer.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare const MUIGatorDrawerOverrides: {
16
16
  flexDirection: string;
17
17
  boxShadow: any;
18
18
  border: string;
19
+ borderRadius: string;
19
20
  '&.MuiDrawer-paperAnchorBottom': {
20
21
  width: string;
21
22
  height: string;
package/dist/types/gator/themes/components/select.d.ts CHANGED
@@ -3,21 +3,21 @@ export declare const MUIGatorSelectOverrides: {
3
3
  defaultProps: {
4
4
  MenuProps: {
5
5
  PaperProps: {
6
- sx: {
7
- backgroundColor: string;
6
+ sx: (theme: any) => {
7
+ backgroundColor: any;
8
8
  maxHeight: string;
9
- marginTop: string;
10
- borderRadius: string;
11
- boxShadow: string;
9
+ marginTop: any;
10
+ borderRadius: number;
11
+ boxShadow: any;
12
12
  '& .MuiMenuItem-root': {
13
13
  padding: string;
14
14
  minHeight: string;
15
- fontFamily: string;
16
- fontSize: string;
17
- lineHeight: string;
18
- color: string;
15
+ fontFamily: any;
16
+ fontSize: any;
17
+ lineHeight: any;
18
+ color: any;
19
19
  '&:hover': {
20
- backgroundColor: string;
20
+ backgroundColor: any;
21
21
  };
22
22
  '&.Mui-focusVisible': {
23
23
  outline: string;
@@ -25,24 +25,24 @@ export declare const MUIGatorSelectOverrides: {
25
25
  backgroundColor: string;
26
26
  };
27
27
  '&.Mui-selected': {
28
- backgroundColor: string;
29
- color: string;
30
- fontWeight: number;
31
- paddingLeft: string;
28
+ backgroundColor: any;
29
+ color: any;
30
+ fontWeight: any;
31
+ paddingLeft: any;
32
32
  '::before': {
33
33
  content: string;
34
34
  display: string;
35
- marginRight: string;
36
- color: string;
37
- fontWeight: number;
35
+ marginRight: any;
36
+ color: any;
37
+ fontWeight: any;
38
38
  };
39
39
  '&:hover': {
40
- backgroundColor: string;
40
+ backgroundColor: any;
41
41
  };
42
42
  };
43
43
  '&.Mui-disabled': {
44
44
  opacity: number;
45
- color: string;
45
+ color: any;
46
46
  };
47
47
  };
48
48
  };
@@ -51,13 +51,13 @@ export declare const MUIGatorSelectOverrides: {
51
51
  IconComponent: any;
52
52
  };
53
53
  styleOverrides: {
54
- root: {
54
+ root: ({ theme }: any) => {
55
55
  '& .MuiSelect-select': {
56
56
  padding: string;
57
57
  };
58
58
  };
59
- icon: {
60
- right: string;
59
+ icon: ({ theme }: any) => {
60
+ right: any;
61
61
  };
62
62
  };
63
63
  };
package/dist/types/gator/themes/components/text-field.d.ts CHANGED
@@ -6,11 +6,11 @@ export declare const MUIGatorTextFieldOverrides: {
6
6
  };
7
7
  MuiInputBase: {
8
8
  styleOverrides: {
9
- root: {
10
- borderRadius: string;
11
- fontSize: string;
12
- lineHeight: string;
13
- background: string;
9
+ root: ({ theme }: any) => {
10
+ borderRadius: any;
11
+ fontSize: any;
12
+ lineHeight: any;
13
+ background: any;
14
14
  padding: string;
15
15
  border: string;
16
16
  marginTop: string;
@@ -21,31 +21,31 @@ export declare const MUIGatorTextFieldOverrides: {
21
21
  display: string;
22
22
  };
23
23
  '&:hover': {
24
- borderColor: string;
24
+ borderColor: any;
25
25
  };
26
26
  '&.Mui-focused': {
27
27
  outline: string;
28
28
  };
29
29
  '&.Mui-disabled': {
30
- background: string;
31
- color: string;
30
+ background: any;
31
+ color: any;
32
32
  borderColor: string;
33
33
  };
34
34
  '&.Mui-error': {
35
- borderColor: string;
35
+ borderColor: any;
36
36
  };
37
37
  '&.Mui-readOnly': {
38
- background: string;
39
- borderColor: string;
38
+ background: any;
39
+ borderColor: any;
40
40
  };
41
41
  };
42
- input: {
42
+ input: ({ theme }: any) => {
43
43
  padding: number;
44
- color: string;
45
- fontSize: string;
46
- lineHeight: string;
44
+ color: any;
45
+ fontSize: any;
46
+ lineHeight: any;
47
47
  '&::placeholder': {
48
- color: string;
48
+ color: any;
49
49
  opacity: number;
50
50
  };
51
51
  };
@@ -56,7 +56,7 @@ export declare const MUIGatorTextFieldOverrides: {
56
56
  notched: boolean;
57
57
  };
58
58
  styleOverrides: {
59
- root: {
59
+ root: ({ theme }: any) => {
60
60
  padding: number;
61
61
  fieldset: {
62
62
  display: string;
@@ -72,19 +72,19 @@ export declare const MUIGatorTextFieldOverrides: {
72
72
  disableUnderline: boolean;
73
73
  };
74
74
  styleOverrides: {
75
- root: {
76
- backgroundColor: string;
75
+ root: ({ theme }: any) => {
76
+ backgroundColor: any;
77
77
  '&:hover': {
78
- backgroundColor: string;
78
+ backgroundColor: any;
79
79
  };
80
80
  '&.Mui-focused': {
81
- backgroundColor: string;
81
+ backgroundColor: any;
82
82
  };
83
83
  '&.Mui-disabled': {
84
- backgroundColor: string;
84
+ backgroundColor: any;
85
85
  };
86
86
  '&.Mui-readOnly': {
87
- backgroundColor: string;
87
+ backgroundColor: any;
88
88
  };
89
89
  };
90
90
  input: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/styles",
3
3
  "author": "nCino",
4
- "version": "10.5.1",
4
+ "version": "10.5.3",
5
5
  "description": "nCino Shared Web Component Styling",
6
6
  "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
7
7
  "publishConfig": {