@ncino/styles 10.5.0 → 10.5.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.
Files changed (7) hide show
  1. package/dist/gator/themes/components/button.js +10 -0
  2. package/dist/gator/themes/components/checkbox.js +17 -17
  3. package/dist/gator/themes/components/select.js +34 -33
  4. package/dist/types/gator/themes/components/button.d.ts +10 -0
  5. package/dist/types/gator/themes/components/checkbox.d.ts +7 -7
  6. package/dist/types/gator/themes/components/select.d.ts +22 -22
  7. package/package.json +1 -1
package/dist/gator/themes/components/button.js CHANGED
@@ -16,6 +16,16 @@ const t = {
16
16
  boxShadow: o.shadows[2]
17
17
  }
18
18
  }),
19
+ startIcon: ({ theme: o }) => ({
20
+ marginRight: o.spacing(5),
21
+ height: "18px",
22
+ width: "18px"
23
+ }),
24
+ endIcon: ({ theme: o }) => ({
25
+ marginLeft: o.spacing(5),
26
+ height: "18px",
27
+ width: "18px"
28
+ }),
19
29
  sizeLarge: ({ theme: o }) => ({
20
30
  height: "3rem",
21
31
  minWidth: "6rem",
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/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/types/gator/themes/components/button.d.ts CHANGED
@@ -16,6 +16,16 @@ export declare const MUIGatorButtonOverrides: {
16
16
  boxShadow: any;
17
17
  };
18
18
  };
19
+ startIcon: ({ theme }: any) => {
20
+ marginRight: any;
21
+ height: string;
22
+ width: string;
23
+ };
24
+ endIcon: ({ theme }: any) => {
25
+ marginLeft: any;
26
+ height: string;
27
+ width: string;
28
+ };
19
29
  sizeLarge: ({ theme }: any) => {
20
30
  height: string;
21
31
  minWidth: string;
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/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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/styles",
3
3
  "author": "nCino",
4
- "version": "10.5.0",
4
+ "version": "10.5.2",
5
5
  "description": "nCino Shared Web Component Styling",
6
6
  "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
7
7
  "publishConfig": {