@galaxy-ds/core 2.0.12 → 2.0.13

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 (40) hide show
  1. package/dist/Icons/leap/AutoTimerDarkTheme.d.ts +2 -0
  2. package/dist/Icons/leap/AutoTimerLightTheme.d.ts +2 -0
  3. package/dist/Icons/leap/ManualEntryDarkTheme.d.ts +2 -0
  4. package/dist/Icons/leap/ManualEntryLightTheme.d.ts +2 -0
  5. package/dist/Icons/leap/index.d.ts +4 -0
  6. package/dist/Theme/leap/desktop/design-tokens/components/chip.d.ts +1 -0
  7. package/dist/Theme/leap/web/design-tokens/components/chip.d.ts +1 -0
  8. package/dist/index.esm.js +105 -53
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/index.js +108 -52
  11. package/dist/index.js.map +1 -1
  12. package/dist/package.json +1 -1
  13. package/package.json +1 -1
  14. package/src/Chip/Chip.stories.mdx +17 -74
  15. package/src/Icons/leap/AutoTimer24.tsx +2 -13
  16. package/src/Icons/leap/AutoTimerDarkTheme.tsx +13 -0
  17. package/src/Icons/leap/AutoTimerFilled24.tsx +4 -6
  18. package/src/Icons/leap/AutoTimerLightTheme.tsx +12 -0
  19. package/src/Icons/leap/ManualEntry24.tsx +2 -18
  20. package/src/Icons/leap/ManualEntryDarkTheme.tsx +11 -0
  21. package/src/Icons/leap/ManualEntryFilled24.tsx +1 -18
  22. package/src/Icons/leap/ManualEntryLightTheme.tsx +10 -0
  23. package/src/Icons/leap/Timer24.tsx +4 -6
  24. package/src/Icons/leap/TimerFillled24.tsx +3 -6
  25. package/src/Icons/leap/icons.ts +15 -0
  26. package/src/Icons/leap/index.ts +4 -0
  27. package/src/Icons/leap-icons.stories.mdx +71 -1
  28. package/src/MenuItem/MenuItem.stories.mdx +2 -2
  29. package/src/Theme/leap/desktop/design-tokens/components/chip.ts +2 -1
  30. package/src/Theme/leap/desktop/overrides/Dialog/dialog.ts +5 -4
  31. package/src/Theme/leap/desktop/overrides/listItemIcon.ts +0 -1
  32. package/src/Theme/leap/desktop/overrides/menu.ts +36 -33
  33. package/src/Theme/leap/desktop/overrides/menuItem.ts +38 -10
  34. package/src/Theme/leap/desktop/theme.ts +2 -0
  35. package/src/Theme/leap/web/design-tokens/components/chip.ts +2 -1
  36. package/src/Theme/leap/web/overrides/Dialog/dialog.ts +4 -6
  37. package/src/Theme/leap/web/overrides/menu.ts +8 -6
  38. package/src/Theme/leap/web/overrides/menuItem.ts +19 -8
  39. package/src/Theme/leap/web/theme.ts +2 -0
  40. package/src/stories/ReleaseNotes.stories.mdx +1 -0
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@galaxy-ds/core",
3
- "version": "2.0.12",
3
+ "version": "2.0.13",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.d.ts",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@galaxy-ds/core",
3
- "version": "2.0.12",
3
+ "version": "2.0.13",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.d.ts",
package/src/Chip/Chip.stories.mdx CHANGED
@@ -14,32 +14,8 @@ import Chip from './Chip';
14
14
  </Story>
15
15
  </Canvas>
16
16
 
17
-
18
- ### Colours
19
- Contained chip are high-emphasis and are used for primary actions. use the `color` prop.
20
- <Canvas withToolbar>
21
- <Story name="Colours" parameters={{ docs: { source: { code: `
22
- <Chip color="default" label="Label"/>
23
- <Chip color="primary" label="Label"/>
24
- <Chip color="success" label="Label"/>
25
- <Chip color="warning" label="Label"/>
26
- <Chip color="error" label="Label"/>
27
- <Chip color="info" label="Label"/>
28
- `}}}}>
29
- <Stack direction="row" spacing={1}>
30
- <Chip color="default" label="Label"/>
31
- <Chip color="primary" label="Label"/>
32
- <Chip color="success" label="Label"/>
33
- <Chip color="warning" label="Label"/>
34
- <Chip color="error" label="Label"/>
35
- <Chip color="info" label="Label"/>
36
- </Stack>
37
- </Story>
38
- </Canvas>
39
-
40
-
41
17
  ### Rounded
42
- Contained chip are high-emphasis and are used for primary actions. use the `color` prop.
18
+ Contained chip are high-emphasis and are used for primary actions. Use the `color` prop.
43
19
  <Canvas withToolbar>
44
20
  <Story name="Rounded" parameters={{ docs: { source: { code: `
45
21
  <Chip color="default" rounded label="Label"/>
@@ -60,62 +36,30 @@ Contained chip are high-emphasis and are used for primary actions. use the `colo
60
36
  </Story>
61
37
  </Canvas>
62
38
 
39
+ ### Colours
40
+ Contained chip are high-emphasis and are used for primary actions. Use the `color` prop.
41
+ Note: the `variant` prop is no longer used for colours, change it to `color`.
63
42
 
64
- ### Size
65
- Contained chip are high-emphasis and are used for primary actions. use the `color` prop.
66
- <Canvas withToolbar>
67
- <Story name="Size" parameters={{ docs: { source: { code: `
68
- <Chip color="default" label="Label"/>
69
- <Chip color="default" size="medium" label="Label"/>
70
- `}}}}>
71
- <Stack direction="row" spacing={1}>
72
- <Chip color="default" label="Label"/>
73
- <Chip color="default" size="medium" label="Label"/>
74
- </Stack>
75
- </Story>
76
- </Canvas>
77
-
78
-
79
- ### Outline
80
- Outline chip. use the `outline` prop.
81
43
  <Canvas withToolbar>
82
- <Story name="Outline" parameters={{ docs: { source: { code: `
83
- <Chip color="default" variant="outlined" label="Label"/>
84
- <Chip color="default" variant="outlined" size="medium" label="Label"/>
44
+ <Story name="Colours" parameters={{ docs: { source: { code: `
45
+ <Chip color="default" label="Label"/>
46
+ <Chip color="primary" label="Label"/>
47
+ <Chip color="success" label="Label"/>
48
+ <Chip color="warning" label="Label"/>
49
+ <Chip color="error" label="Label"/>
50
+ <Chip color="info" label="Label"/>
85
51
  `}}}}>
86
52
  <Stack direction="row" spacing={1}>
87
- <Chip color="default" variant="outlined" label="Label"/>
88
- <Chip color="default" variant="outlined" size="medium" label="Label"/>
53
+ <Chip color="default" label="Label"/>
54
+ <Chip color="primary" label="Label"/>
55
+ <Chip color="success" label="Label"/>
56
+ <Chip color="warning" label="Label"/>
57
+ <Chip color="error" label="Label"/>
58
+ <Chip color="info" label="Label"/>
89
59
  </Stack>
90
60
  </Story>
91
61
  </Canvas>
92
62
 
93
- ### Start Icon
94
- use the `icon` prop to add an icon to start.
95
- <Canvas withToolbar>
96
- <Story name="Icon" parameters={{ docs: { source: { code: `
97
- <Chip icon={<SendIcon />} label="Label"/>
98
- <Chip icon={<SendIcon />} color="primary" label="Label"/>
99
- <Chip icon={<SendIcon />} color="secondary" label="Label"/>
100
- <Chip icon={<SendIcon />} color="info" label="Label"/>
101
- `}}}}>
102
- <Stack direction="row" spacing={1}>
103
- <Chip icon={<SearchIcon />} label="Label"/>
104
- <Chip icon={<SearchIcon />} color="primary" label="Label"/>
105
- <Chip icon={<SearchIcon />} color="secondary" label="Label"/>
106
- <Chip icon={<SearchIcon />} color="info" label="Label"/>
107
- </Stack>
108
- </Story>
109
- </Canvas>
110
-
111
-
112
- ### End Icon
113
- Custom Delete Icon. Override the default delete icon element. Shown only if onDelete is set.
114
- <Canvas withToolbar>
115
- <Story name="endIcon">
116
- <Chip onDelete={() => (console.log('onDelete'))} deleteIcon={<CalendarIcon />} color="default" variant="outlined" label="Label"/>
117
- </Story>
118
- </Canvas>
119
63
 
120
64
  ### Delete
121
65
  Using the `onDelete` property, chip can now be used within a text element such as Autocomplete. Shown only if onDelete is set.
@@ -135,6 +79,5 @@ Using the `onDelete` property, chip can now be used within a text element such a
135
79
  </Story>
136
80
  </Canvas>
137
81
 
138
-
139
82
  ## Properties
140
83
  <ArgsTable story="Default" />
package/src/Icons/leap/AutoTimer24.tsx CHANGED
@@ -4,19 +4,8 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
4
4
  export default function AutoTimer24Icon(props: SvgIconProps) {
5
5
  return (
6
6
  <SvgIcon {...props} viewBox="0 0 24 24">
7
- <path
8
- d="M14.5 16.5357L13.6828 14.638M8.5 16.5357L9.41235 14.638M13.6828 14.638L11.5 9.24999L9.41235 14.638M13.6828 14.638H9.41235"
9
- stroke="#1E365E"
10
- strokeWidth="1.5"
11
- strokeLinecap="round"
12
- strokeLinejoin="round"
13
- />
14
- <path
15
- fillRule="evenodd"
16
- clipRule="evenodd"
17
- d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75ZM11.625 6.25C7.68997 6.25 4.5 9.43997 4.5 13.375C4.5 17.31 7.68997 20.5 11.625 20.5C15.56 20.5 18.75 17.31 18.75 13.375C18.75 9.43997 15.56 6.25 11.625 6.25ZM3 13.375C3 8.61154 6.86154 4.75 11.625 4.75C16.3885 4.75 20.25 8.61154 20.25 13.375C20.25 18.1385 16.3885 22 11.625 22C6.86154 22 3 18.1385 3 13.375ZM19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968Z"
18
- fill="#1E365E"
19
- />
7
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4943 8.50002C11.8019 8.49767 12.0797 8.68333 12.1952 8.96838L14.375 14.3488L15.1889 16.2391C15.3527 16.6196 15.1771 17.0608 14.7967 17.2246C14.4162 17.3884 13.975 17.2128 13.8112 16.8323L13.1893 15.388H9.88401L9.17599 16.8607C8.99652 17.234 8.5484 17.3911 8.17509 17.2117C7.80178 17.0322 7.64464 16.5841 7.82411 16.2108L8.7237 14.3395L10.8007 8.97903C10.9118 8.69225 11.1868 8.50237 11.4943 8.50002ZM10.5073 13.888H12.5698L11.5156 11.2858L10.5073 13.888Z" fill="currentColor"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75ZM11.625 6.25C7.68997 6.25 4.5 9.43997 4.5 13.375C4.5 17.31 7.68997 20.5 11.625 20.5C15.56 20.5 18.75 17.31 18.75 13.375C18.75 9.43997 15.56 6.25 11.625 6.25ZM3 13.375C3 8.61154 6.86154 4.75 11.625 4.75C16.3885 4.75 20.25 8.61154 20.25 13.375C20.25 18.1385 16.3885 22 11.625 22C6.86154 22 3 18.1385 3 13.375ZM19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968Z" fill="currentColor"/>
20
9
  </SvgIcon>
21
10
  );
22
11
  }
package/src/Icons/leap/AutoTimerDarkTheme.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
2
+
3
+ export default function AutoTimerIconDarkTheme(props: SvgIconProps) {
4
+ return (
5
+ <SvgIcon {...props} viewBox="0 0 16 16">
6
+ <path fillRule="evenodd" clipRule="evenodd" d="M7.66285 5.66652C7.86788 5.66495 8.05309 5.78872 8.13008 5.97876L9.58328 9.56572L10.1259 10.8259C10.2351 11.0795 10.118 11.3737 9.86441 11.4829C9.61078 11.5921 9.31664 11.475 9.20743 11.2214L8.79281 10.2585H6.5893L6.11729 11.2403C5.99765 11.4892 5.6989 11.5939 5.45002 11.4743C5.20115 11.3546 5.09639 11.0559 5.21604 10.807L5.81576 9.55954L7.20044 5.98586C7.27452 5.79467 7.45781 5.66808 7.66285 5.66652ZM7.00485 9.25849H8.37986L7.67703 7.52368L7.00485 9.25849Z" fill="#3FAF2A"/>
7
+ <path d="M5.83333 1.8335C5.83333 1.55735 6.05719 1.3335 6.33333 1.3335H9.16667C9.44281 1.3335 9.66667 1.55735 9.66667 1.8335C9.66667 2.10964 9.44281 2.3335 9.16667 2.3335H6.33333C6.05719 2.3335 5.83333 2.10964 5.83333 1.8335Z" fill="currentColor"/>
8
+ <path fillRule="evenodd" clipRule="evenodd" d="M2 8.91683C2 5.74119 4.57436 3.16683 7.75 3.16683C10.9256 3.16683 13.5 5.74119 13.5 8.91683C13.5 12.0925 10.9256 14.6668 7.75 14.6668C4.57436 14.6668 2 12.0925 2 8.91683ZM7.75 4.16683C5.12665 4.16683 3 6.29348 3 8.91683C3 11.5402 5.12665 13.6668 7.75 13.6668C10.3734 13.6668 12.5 11.5402 12.5 8.91683C12.5 6.29348 10.3734 4.16683 7.75 4.16683Z" fill="currentColor"/>
9
+ <path d="M12.8536 3.31328C12.6583 3.11802 12.3417 3.11801 12.1465 3.31327C11.9512 3.50853 11.9512 3.82511 12.1464 4.02038L13.1464 5.02038C13.3417 5.21564 13.6582 5.21565 13.8535 5.02039C14.0488 4.82513 14.0488 4.50855 13.8535 4.31328L12.8536 3.31328Z" fill="currentColor"/>
10
+ </SvgIcon>
11
+ );
12
+ }
13
+
package/src/Icons/leap/AutoTimerFilled24.tsx CHANGED
@@ -4,12 +4,10 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
4
4
  export default function AutoTimerFilled24Icon(props: SvgIconProps) {
5
5
  return (
6
6
  <SvgIcon {...props} viewBox="0 0 24 24">
7
- <path
8
- fillRule="evenodd"
9
- clipRule="evenodd"
10
- d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75ZM3 13.375C3 8.61154 6.86154 4.75 11.625 4.75C16.3885 4.75 20.25 8.61154 20.25 13.375C20.25 18.1385 16.3885 22 11.625 22C6.86154 22 3 18.1385 3 13.375ZM19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968ZM12.1951 8.96837C12.0796 8.68332 11.8018 8.49766 11.4943 8.50001C11.1867 8.50236 10.9118 8.69223 10.8007 8.97902L8.72365 14.3395L7.82406 16.2108C7.64459 16.5841 7.80173 17.0322 8.17504 17.2117C8.54835 17.3911 8.99647 17.234 9.17594 16.8607L9.88395 15.388H13.1892L13.8111 16.8323C13.975 17.2128 14.4162 17.3884 14.7966 17.2246C15.1771 17.0608 15.3527 16.6195 15.1889 16.2391L14.3749 14.3488L12.1951 8.96837ZM12.5698 13.888H10.5073L11.5155 11.2857L12.5698 13.888Z"
11
- fill="#1E365E"
12
- />
7
+ <path d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75Z" fill="currentColor"/>
8
+ <path d="M12.5698 13.888H10.5073L11.5155 11.2857L12.5698 13.888Z" fill="currentColor"/>
9
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M3 13.375C3 8.61154 6.86154 4.75 11.625 4.75C16.3885 4.75 20.25 8.61154 20.25 13.375C20.25 18.1385 16.3885 22 11.625 22C6.86154 22 3 18.1385 3 13.375ZM12.1951 8.96837C12.0796 8.68332 11.8018 8.49766 11.4943 8.50001C11.1867 8.50236 10.9118 8.69223 10.8007 8.97902L8.72365 14.3395L7.82406 16.2108C7.64459 16.5841 7.80173 17.0322 8.17504 17.2117C8.54835 17.3911 8.99647 17.234 9.17594 16.8607L9.88395 15.388H13.1892L13.8111 16.8323C13.975 17.2128 14.4162 17.3884 14.7966 17.2246C15.1771 17.0608 15.3527 16.6195 15.1889 16.2391L14.3749 14.3488L12.1951 8.96837Z" fill="currentColor"/>
10
+ <path d="M19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968Z" fill="currentColor"/>
13
11
  </SvgIcon>
14
12
  );
15
13
  }
package/src/Icons/leap/AutoTimerLightTheme.tsx ADDED
@@ -0,0 +1,12 @@
1
+ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
2
+
3
+ export default function AutoTimerIconLightTheme(props: SvgIconProps) {
4
+ return (
5
+ <SvgIcon {...props} viewBox="0 0 16 16">
6
+ <path fillRule="evenodd" clipRule="evenodd" d="M7.66285 5.66652C7.86788 5.66495 8.05309 5.78872 8.13008 5.97876L9.58328 9.56572L10.1259 10.8259C10.2351 11.0795 10.118 11.3737 9.86441 11.4829C9.61078 11.5921 9.31664 11.475 9.20743 11.2214L8.79281 10.2585H6.5893L6.11729 11.2403C5.99765 11.4892 5.6989 11.5939 5.45002 11.4743C5.20115 11.3546 5.09639 11.0559 5.21604 10.807L5.81576 9.55954L7.20044 5.98586C7.27452 5.79467 7.45781 5.66808 7.66285 5.66652ZM7.00485 9.25849H8.37986L7.67703 7.52368L7.00485 9.25849Z" fill="#3FAF2A"/>
7
+ <path d="M5.83333 1.8335C5.83333 1.55735 6.05719 1.3335 6.33333 1.3335H9.16667C9.44281 1.3335 9.66667 1.55735 9.66667 1.8335C9.66667 2.10964 9.44281 2.3335 9.16667 2.3335H6.33333C6.05719 2.3335 5.83333 2.10964 5.83333 1.8335Z" fill="currentColor"/>
8
+ <path fillRule="evenodd" clipRule="evenodd" d="M2 8.91683C2 5.74119 4.57436 3.16683 7.75 3.16683C10.9256 3.16683 13.5 5.74119 13.5 8.91683C13.5 12.0925 10.9256 14.6668 7.75 14.6668C4.57436 14.6668 2 12.0925 2 8.91683ZM7.75 4.16683C5.12665 4.16683 3 6.29348 3 8.91683C3 11.5402 5.12665 13.6668 7.75 13.6668C10.3734 13.6668 12.5 11.5402 12.5 8.91683C12.5 6.29348 10.3734 4.16683 7.75 4.16683Z" fill="currentColor"/>
9
+ <path d="M12.8536 3.31328C12.6583 3.11802 12.3417 3.11801 12.1465 3.31327C11.9512 3.50853 11.9512 3.82511 12.1464 4.02038L13.1464 5.02038C13.3417 5.21564 13.6582 5.21565 13.8535 5.02039C14.0488 4.82513 14.0488 4.50855 13.8535 4.31328L12.8536 3.31328Z" fill="currentColor"/>
10
+ </SvgIcon>
11
+ );
12
+ }
package/src/Icons/leap/ManualEntry24.tsx CHANGED
@@ -4,24 +4,8 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
4
4
  export default function ManualEntry24Icon(props: SvgIconProps) {
5
5
  return (
6
6
  <SvgIcon viewBox="0 0 24 24" {...props}>
7
- <rect
8
- x="2.75"
9
- y="2.75"
10
- width="18.5"
11
- height="18.5"
12
- rx="4.25"
13
- fill="none"
14
- stroke="#1E365E"
15
- strokeWidth="1.5"
16
- />
17
- <path
18
- fill="none"
19
- d="M10.5959 16.0909L7.24165 17.0237L8.14352 13.6385L14.2877 7.49432C14.9579 6.82411 16.042 6.81617 16.722 7.47648C17.4162 8.15062 17.4243 9.26249 16.7401 9.94674L10.5959 16.0909Z"
20
- stroke="#1E365E"
21
- strokeWidth="1.5"
22
- strokeLinecap="round"
23
- strokeLinejoin="round"
24
- />
7
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17 3.5H7C5.067 3.5 3.5 5.067 3.5 7V17C3.5 18.933 5.067 20.5 7 20.5H17C18.933 20.5 20.5 18.933 20.5 17V7C20.5 5.067 18.933 3.5 17 3.5ZM7 2C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2H7Z" fill="currentColor"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2445 6.93844C18.239 7.90415 18.2506 9.4969 17.2705 10.4771L11.1263 16.6212C11.0349 16.7126 10.9215 16.7788 10.7969 16.8135L7.44263 17.7463C7.18345 17.8184 6.90551 17.7461 6.71425 17.5569C6.52299 17.3677 6.44771 17.0906 6.51697 16.8306L7.41884 13.4454C7.45282 13.3178 7.51988 13.2015 7.61323 13.1081L13.7574 6.964C14.7174 6.00393 16.2705 5.99255 17.2445 6.93844ZM16.2098 9.41643C16.5981 9.02811 16.5935 8.39712 16.1995 8.01454C15.8136 7.63981 15.1984 7.64432 14.818 8.02466L9.49649 13.3462C10.0726 13.6794 10.5522 14.1616 10.8823 14.744L16.2098 9.41643ZM9.62942 15.5812C9.41735 15.1598 9.0784 14.8169 8.66365 14.5996L8.30394 15.9498L9.62942 15.5812Z" fill="currentColor"/>
25
9
  </SvgIcon>
26
10
  );
27
11
  }
package/src/Icons/leap/ManualEntryDarkTheme.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
2
+
3
+ export default function ManualEntryIconDarkTheme(props: SvgIconProps) {
4
+ return (
5
+ <SvgIcon {...props} viewBox="0 0 16 16">
6
+ <path fillRule="evenodd" clipRule="evenodd" d="M11.6667 2.3335H4.33333C3.22876 2.3335 2.33333 3.22893 2.33333 4.33349V11.6668C2.33333 12.7714 3.22876 13.6668 4.33333 13.6668H11.6667C12.7712 13.6668 13.6667 12.7714 13.6667 11.6668V4.3335C13.6667 3.22893 12.7712 2.3335 11.6667 2.3335ZM4.33333 1.3335C2.67647 1.3335 1.33333 2.67664 1.33333 4.33349V11.6668C1.33333 13.3237 2.67647 14.6668 4.33333 14.6668H11.6667C13.3235 14.6668 14.6667 13.3237 14.6667 11.6668V4.3335C14.6667 2.67664 13.3235 1.3335 11.6667 1.3335H4.33333Z" fill="currentColor"/>
7
+ <path fillRule="evenodd" clipRule="evenodd" d="M11.4963 4.62567C12.1593 5.26947 12.1671 6.33131 11.5136 6.98476L7.41752 11.0809C7.35659 11.1418 7.28095 11.1859 7.19793 11.209L4.96174 11.8309C4.78894 11.8789 4.60365 11.8308 4.47615 11.7046C4.34864 11.5785 4.29846 11.3938 4.34463 11.2205L4.94587 8.96364C4.96853 8.8786 5.01323 8.80104 5.07547 8.73881L9.17156 4.64271C9.81161 4.00266 10.847 3.99507 11.4963 4.62567ZM10.8065 6.27766C11.0654 6.01878 11.0623 5.59812 10.7997 5.34307C10.5424 5.09325 10.1322 5.09625 9.87867 5.34982L6.32513 8.90335C6.70793 9.1271 7.02755 9.44771 7.2501 9.83407L10.8065 6.27766ZM6.41418 10.389C6.2699 10.1129 6.04613 9.88728 5.77379 9.74049L5.53594 10.6333L6.41418 10.389Z" fill="#32ABE2"/>
8
+ </SvgIcon>
9
+ );
10
+ }
11
+
package/src/Icons/leap/ManualEntryFilled24.tsx CHANGED
@@ -4,24 +4,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
4
4
  export default function ManualEntryFilled24Icon(props: SvgIconProps) {
5
5
  return (
6
6
  <SvgIcon {...props} viewBox="0 0 24 24">
7
- <mask id="path-1-inside-1_6547_1306" fill="white">
8
- <path
9
- fillRule="evenodd"
10
- clipRule="evenodd"
11
- d="M7 2C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2H7ZM17.2704 10.4771C18.2506 9.49689 18.2389 7.90414 17.2445 6.93843C16.2704 5.99254 14.7174 6.00392 13.7573 6.96399L7.61319 13.1081C7.51984 13.2015 7.45278 13.3178 7.4188 13.4454L6.51693 16.8306C6.44767 17.0906 6.52295 17.3677 6.71421 17.5569C6.90547 17.7461 7.18341 17.8183 7.4426 17.7463L10.7969 16.8135C10.9214 16.7788 11.0349 16.7126 11.1263 16.6212L17.2704 10.4771ZM16.1995 8.01452C16.5934 8.3971 16.5981 9.0281 16.2098 9.41641L10.205 15.4211L8.3039 15.9498L8.81636 14.0263L14.818 8.02465C15.1983 7.6443 15.8136 7.63979 16.1995 8.01452Z"
12
- />
13
- </mask>
14
- <path
15
- fillRule="evenodd"
16
- clipRule="evenodd"
17
- d="M7 2C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2H7ZM17.2704 10.4771C18.2506 9.49689 18.2389 7.90414 17.2445 6.93843C16.2704 5.99254 14.7174 6.00392 13.7573 6.96399L7.61319 13.1081C7.51984 13.2015 7.45278 13.3178 7.4188 13.4454L6.51693 16.8306C6.44767 17.0906 6.52295 17.3677 6.71421 17.5569C6.90547 17.7461 7.18341 17.8183 7.4426 17.7463L10.7969 16.8135C10.9214 16.7788 11.0349 16.7126 11.1263 16.6212L17.2704 10.4771ZM16.1995 8.01452C16.5934 8.3971 16.5981 9.0281 16.2098 9.41641L10.205 15.4211L8.3039 15.9498L8.81636 14.0263L14.818 8.02465C15.1983 7.6443 15.8136 7.63979 16.1995 8.01452Z"
18
- fill="#1E365E"
19
- />
20
- <path
21
- d="M17.2445 6.93843L16.1995 8.01452L17.2445 6.93843ZM17.2704 10.4771L18.3311 11.5377L18.3311 11.5377L17.2704 10.4771ZM13.7573 6.96399L12.6967 5.90333L13.7573 6.96399ZM7.61319 13.1081L8.67385 14.1688L7.61319 13.1081ZM7.4188 13.4454L5.96935 13.0592L5.96935 13.0592L7.4188 13.4454ZM6.51693 16.8306L7.96637 17.2168L7.96637 17.2168L6.51693 16.8306ZM6.71421 17.5569L5.65933 18.6233L5.65933 18.6233L6.71421 17.5569ZM7.4426 17.7463L7.04071 16.3011H7.04071L7.4426 17.7463ZM10.7969 16.8135L11.1988 18.2586L11.1988 18.2586L10.7969 16.8135ZM11.1263 16.6212L12.1869 17.6819L12.1869 17.6819L11.1263 16.6212ZM16.1995 8.01452L15.1545 9.09062L16.1995 8.01452ZM10.205 15.4211L10.6069 16.8663L10.9868 16.7606L11.2657 16.4818L10.205 15.4211ZM8.3039 15.9498L6.85446 15.5637L6.1794 18.0975L8.70579 17.395L8.3039 15.9498ZM8.81636 14.0263L7.7557 12.9656L7.47068 13.2506L7.36691 13.6401L8.81636 14.0263ZM14.818 8.02465L13.7573 6.96399L13.7573 6.96399L14.818 8.02465ZM3.5 7C3.5 5.067 5.067 3.5 7 3.5V0.5C3.41015 0.5 0.5 3.41015 0.5 7H3.5ZM3.5 17V7H0.5V17H3.5ZM7 20.5C5.067 20.5 3.5 18.933 3.5 17H0.5C0.5 20.5898 3.41015 23.5 7 23.5V20.5ZM17 20.5H7V23.5H17V20.5ZM20.5 17C20.5 18.933 18.933 20.5 17 20.5V23.5C20.5898 23.5 23.5 20.5898 23.5 17H20.5ZM20.5 7V17H23.5V7H20.5ZM17 3.5C18.933 3.5 20.5 5.067 20.5 7H23.5C23.5 3.41015 20.5898 0.5 17 0.5V3.5ZM7 3.5H17V0.5H7V3.5ZM16.1995 8.01452C16.5934 8.3971 16.5981 9.0281 16.2098 9.41641L18.3311 11.5377C19.9031 9.96569 19.8844 7.41117 18.2895 5.86233L16.1995 8.01452ZM14.818 8.02465C15.1983 7.6443 15.8136 7.63979 16.1995 8.01452L18.2895 5.86233C16.7273 4.34528 14.2365 4.36354 12.6967 5.90333L14.818 8.02465ZM8.67385 14.1688L14.818 8.02465L12.6967 5.90333L6.55253 12.0475L8.67385 14.1688ZM8.86824 13.8315C8.83426 13.9591 8.7672 14.0754 8.67385 14.1688L6.55253 12.0475C6.27248 12.3275 6.07131 12.6765 5.96935 13.0592L8.86824 13.8315ZM7.96637 17.2168L8.86824 13.8315L5.96935 13.0592L5.06749 16.4445L7.96637 17.2168ZM7.76909 16.4905C7.96035 16.6797 8.03563 16.9568 7.96637 17.2168L5.06749 16.4445C4.85972 17.2243 5.08556 18.0557 5.65933 18.6233L7.76909 16.4905ZM7.04071 16.3011C7.29989 16.229 7.57783 16.3013 7.76909 16.4905L5.65933 18.6233C6.23311 19.1909 7.06692 19.4077 7.84448 19.1914L7.04071 16.3011ZM10.395 15.3683L7.04071 16.3011L7.84448 19.1914L11.1988 18.2586L10.395 15.3683ZM10.0656 15.5605C10.157 15.4692 10.2705 15.4029 10.395 15.3683L11.1988 18.2586C11.5723 18.1547 11.9127 17.9561 12.1869 17.6819L10.0656 15.5605ZM16.2098 9.41641L10.0656 15.5606L12.1869 17.6819L18.3311 11.5377L16.2098 9.41641ZM17.2704 10.4771C18.2506 9.49689 18.2389 7.90414 17.2445 6.93843L15.1545 9.09062C14.948 8.89007 14.9455 8.5593 15.1491 8.35575L17.2704 10.4771ZM11.2657 16.4818L17.2704 10.4771L15.1491 8.35575L9.14437 14.3605L11.2657 16.4818ZM8.70579 17.395L10.6069 16.8663L9.80315 13.976L7.90202 14.5047L8.70579 17.395ZM7.36691 13.6401L6.85446 15.5637L9.75335 16.336L10.2658 14.4124L7.36691 13.6401ZM13.7573 6.96399L7.7557 12.9656L9.87702 15.0869L15.8787 9.08531L13.7573 6.96399ZM17.2445 6.93843C16.2704 5.99254 14.7174 6.00392 13.7573 6.96399L15.8787 9.08531C15.6793 9.28469 15.3568 9.28705 15.1545 9.09062L17.2445 6.93843Z"
22
- fill="#1E365E"
23
- mask="url(#path-1-inside-1_6547_1306)"
24
- />
7
+ <path d="M11.6566 17.1515L11.1263 16.6212L11.6566 17.1515L17.8007 11.0074C19.0769 9.73129 19.0617 7.65765 17.767 6.40038C16.4989 5.16891 14.4769 5.18373 13.227 6.43366L7.08286 12.5778C6.89616 12.7645 6.76205 12.9972 6.69408 13.2523L5.79221 16.6375C5.6537 17.1574 5.80426 17.7117 6.18677 18.0901C6.56929 18.4685 7.12517 18.613 7.64354 18.4688L10.9978 17.536C11.2469 17.4668 11.4738 17.3343 11.6566 17.1515ZM2.75 7C2.75 4.65279 4.65279 2.75 7 2.75H17C19.3472 2.75 21.25 4.65279 21.25 7V17C21.25 19.3472 19.3472 21.25 17 21.25H7C4.65279 21.25 2.75 19.3472 2.75 17V7ZM15.677 8.55257C15.7707 8.64359 15.7718 8.7937 15.6794 8.88608L10.9732 13.5923C10.869 13.4758 10.7589 13.3649 10.6432 13.2601L15.3483 8.55498C15.4388 8.4645 15.5852 8.46342 15.677 8.55257Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/>
25
8
  </SvgIcon>
26
9
  );
27
10
  }
package/src/Icons/leap/ManualEntryLightTheme.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
2
+
3
+ export default function ManualEntryIconLightTheme(props: SvgIconProps) {
4
+ return (
5
+ <SvgIcon {...props} viewBox="0 0 16 16">
6
+ <path fillRule="evenodd" clipRule="evenodd" d="M11.6667 2.3335H4.33333C3.22876 2.3335 2.33333 3.22893 2.33333 4.33349V11.6668C2.33333 12.7714 3.22876 13.6668 4.33333 13.6668H11.6667C12.7712 13.6668 13.6667 12.7714 13.6667 11.6668V4.3335C13.6667 3.22893 12.7712 2.3335 11.6667 2.3335ZM4.33333 1.3335C2.67647 1.3335 1.33333 2.67664 1.33333 4.33349V11.6668C1.33333 13.3237 2.67647 14.6668 4.33333 14.6668H11.6667C13.3235 14.6668 14.6667 13.3237 14.6667 11.6668V4.3335C14.6667 2.67664 13.3235 1.3335 11.6667 1.3335H4.33333Z" fill="currentColor"/>
7
+ <path fillRule="evenodd" clipRule="evenodd" d="M11.4963 4.62567C12.1593 5.26947 12.1671 6.33131 11.5136 6.98476L7.41752 11.0809C7.35659 11.1418 7.28095 11.1859 7.19793 11.209L4.96174 11.8309C4.78894 11.8789 4.60365 11.8308 4.47615 11.7046C4.34864 11.5785 4.29846 11.3938 4.34463 11.2205L4.94587 8.96364C4.96853 8.8786 5.01323 8.80104 5.07547 8.73881L9.17156 4.64271C9.81161 4.00266 10.847 3.99507 11.4963 4.62567ZM10.8065 6.27766C11.0654 6.01878 11.0623 5.59812 10.7997 5.34307C10.5424 5.09325 10.1322 5.09625 9.87867 5.34982L6.32513 8.90335C6.70793 9.1271 7.02755 9.44771 7.2501 9.83407L10.8065 6.27766ZM6.41418 10.389C6.2699 10.1129 6.04613 9.88728 5.77379 9.74049L5.53594 10.6333L6.41418 10.389Z" fill="#32ABE2"/>
8
+ </SvgIcon>
9
+ );
10
+ }
package/src/Icons/leap/Timer24.tsx CHANGED
@@ -4,12 +4,10 @@ import React from 'react';
4
4
  export default function Timer24Icon(props: SvgIconProps) {
5
5
  return (
6
6
  <SvgIcon {...props} viewBox="0 0 24 24">
7
- <path
8
- fillRule="evenodd"
9
- clipRule="evenodd"
10
- d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75ZM4.5 13.375C4.5 9.43997 7.68997 6.25 11.625 6.25C15.56 6.25 18.75 9.43997 18.75 13.375C18.75 17.31 15.56 20.5 11.625 20.5C7.68997 20.5 4.5 17.31 4.5 13.375ZM11.625 4.75C6.86154 4.75 3 8.61154 3 13.375C3 18.1385 6.86154 22 11.625 22C16.3885 22 20.25 18.1385 20.25 13.375C20.25 8.61154 16.3885 4.75 11.625 4.75ZM12.3981 9.13348C12.3981 8.71927 12.0623 8.38348 11.6481 8.38348C11.2339 8.38348 10.8981 8.71927 10.8981 9.13348V13.3835C10.8981 13.7977 11.2339 14.1335 11.6481 14.1335C12.0623 14.1335 12.3981 13.7977 12.3981 13.3835V9.13348ZM19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968Z"
11
- fill="#1E365E"
12
- />
7
+ <path d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75Z" fill="currentColor"/>
8
+ <path d="M12.3981 9.13348C12.3981 8.71927 12.0623 8.38348 11.6481 8.38348C11.2339 8.38348 10.8981 8.71927 10.8981 9.13348V13.3835C10.8981 13.7977 11.2339 14.1335 11.6481 14.1335C12.0623 14.1335 12.3981 13.7977 12.3981 13.3835V9.13348Z" fill="currentColor"/>
9
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M11.625 4.75C6.86154 4.75 3 8.61154 3 13.375C3 18.1385 6.86154 22 11.625 22C16.3885 22 20.25 18.1385 20.25 13.375C20.25 8.61154 16.3885 4.75 11.625 4.75ZM4.5 13.375C4.5 9.43997 7.68997 6.25 11.625 6.25C15.56 6.25 18.75 9.43997 18.75 13.375C18.75 17.31 15.56 20.5 11.625 20.5C7.68997 20.5 4.5 17.31 4.5 13.375Z" fill="currentColor"/>
10
+ <path d="M19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968Z" fill="currentColor"/>
13
11
  </SvgIcon>
14
12
  );
15
13
  }
package/src/Icons/leap/TimerFillled24.tsx CHANGED
@@ -4,12 +4,9 @@ import React from 'react';
4
4
  export default function TimerFilled24Icon(props: SvgIconProps) {
5
5
  return (
6
6
  <SvgIcon {...props} viewBox="0 0 24 24">
7
- <path
8
- fillRule="evenodd"
9
- clipRule="evenodd"
10
- d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75ZM3 13.375C3 8.61154 6.86154 4.75 11.625 4.75C16.3885 4.75 20.25 8.61154 20.25 13.375C20.25 18.1385 16.3885 22 11.625 22C6.86154 22 3 18.1385 3 13.375ZM19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968ZM12.3981 9.13348C12.3981 8.71927 12.0623 8.38348 11.6481 8.38348C11.2339 8.38348 10.8981 8.71927 10.8981 9.13348V13.3835C10.8981 13.7977 11.2339 14.1335 11.6481 14.1335C12.0623 14.1335 12.3981 13.7977 12.3981 13.3835V9.13348Z"
11
- fill="#1E365E"
12
- />
7
+ <path d="M8.75 2.75C8.75 2.33579 9.08579 2 9.5 2H13.75C14.1642 2 14.5 2.33579 14.5 2.75C14.5 3.16421 14.1642 3.5 13.75 3.5H9.5C9.08579 3.5 8.75 3.16421 8.75 2.75Z" fill="currentColor"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M3 13.375C3 8.61154 6.86154 4.75 11.625 4.75C16.3885 4.75 20.25 8.61154 20.25 13.375C20.25 18.1385 16.3885 22 11.625 22C6.86154 22 3 18.1385 3 13.375ZM12.3981 9.13348C12.3981 8.71927 12.0623 8.38348 11.6481 8.38348C11.2339 8.38348 10.8981 8.71927 10.8981 9.13348V13.3835C10.8981 13.7977 11.2339 14.1335 11.6481 14.1335C12.0623 14.1335 12.3981 13.7977 12.3981 13.3835V9.13348Z" fill="currentColor"/>
9
+ <path d="M19.2803 4.96968C18.9875 4.67678 18.5126 4.67677 18.2197 4.96966C17.9268 5.26255 17.9268 5.73742 18.2197 6.03032L19.7196 7.53032C20.0125 7.82322 20.4874 7.82323 20.7803 7.53034C21.0732 7.23745 21.0732 6.76258 20.7803 6.46968L19.2803 4.96968Z" fill="currentColor"/>
13
10
  </SvgIcon>
14
11
  );
15
12
  }
package/src/Icons/leap/icons.ts CHANGED
@@ -71,8 +71,12 @@ import {
71
71
  // 24px
72
72
  AutoTimer24Icon,
73
73
  AutoTimerFilled24Icon,
74
+ AutoTimerIconDarkTheme,
75
+ AutoTimerIconLightTheme,
74
76
  ManualEntry24Icon,
75
77
  ManualEntryFilled24Icon,
78
+ ManualEntryIconDarkTheme,
79
+ ManualEntryIconLightTheme,
76
80
  Timer24Icon,
77
81
  TimerFilled24Icon,
78
82
  // Timesheet
@@ -172,3 +176,14 @@ export const leapRibbonIcons = {
172
176
  CalendarRibbonIcon: CalendarRibbonIcon,
173
177
  DeleteRibbonIcon: DeleteRibbonIcon,
174
178
  };
179
+
180
+ export const leapDarkTheme = {
181
+ AutoTimerIconDarkTheme: AutoTimerIconDarkTheme,
182
+ ManualEntryIconDarkTheme: ManualEntryIconDarkTheme,
183
+ };
184
+
185
+ export const leapLightTheme = {
186
+ AutoTimerIconLightTheme: AutoTimerIconLightTheme,
187
+ ManualEntryIconLightTheme: ManualEntryIconLightTheme,
188
+ };
189
+
package/src/Icons/leap/index.ts CHANGED
@@ -71,12 +71,16 @@ export { default as VoiceMemo16Icon } from './VoiceMemo16';
71
71
  export { default as Zyphta16Icon } from './Zyphta16';
72
72
 
73
73
  //24px
74
+ export { default as AutoTimerIconDarkTheme } from './AutoTimerDarkTheme';
75
+ export { default as AutoTimerIconLightTheme } from './AutoTimerLightTheme';
74
76
  export { default as Timer24Icon } from './Timer24';
75
77
  export { default as TimerFilled24Icon } from './TimerFillled24';
76
78
  export { default as AutoTimer24Icon } from './AutoTimer24';
77
79
  export { default as AutoTimerFilled24Icon } from './AutoTimerFilled24';
78
80
  export { default as ManualEntry24Icon } from './ManualEntry24';
79
81
  export { default as ManualEntryFilled24Icon } from './ManualEntryFilled24';
82
+ export { default as ManualEntryIconDarkTheme } from './ManualEntryDarkTheme';
83
+ export { default as ManualEntryIconLightTheme } from './ManualEntryLightTheme';
80
84
 
81
85
  //Ribbon
82
86
  // Grey background
package/src/Icons/leap-icons.stories.mdx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Canvas, Meta, Story } from "@storybook/addon-docs"
2
2
  import Grid from '@mui/material/Grid';
3
3
  import { Icon } from "../Icon"
4
- import { leapIcons, leapIcons16, leapRibbonIcons } from "./leap/icons"
4
+ import { leapIcons, leapIcons16, leapRibbonIcons, leapDarkTheme, leapLightTheme } from "./leap/icons"
5
5
 
6
6
  <Meta title="Design Assets/Leap Icons" />
7
7
 
@@ -146,3 +146,73 @@ import { leapIcons, leapIcons16, leapRibbonIcons } from "./leap/icons"
146
146
  </Grid>
147
147
  </Story>
148
148
  </Canvas>
149
+
150
+ ## Dark Theme
151
+ <Canvas withToolbar>
152
+ <Story
153
+ name="Dark Theme"
154
+ parameters={{
155
+ docs: {
156
+ source: {
157
+ code: `
158
+ <Icon name={AutoTimerIconDarkTheme} sx={{color: "#FAFAFA"}} />
159
+ <Icon name={ManualEntryIconDarkTheme} sx={{color: "#FAFAFA"}} />
160
+ `}},
161
+ backgrounds: {
162
+ default: "dark",
163
+ values: [
164
+ { name: "dark", value: "#1C365F" },
165
+ ],
166
+ },
167
+ }}>
168
+ <Grid container spacing={2}>
169
+ {
170
+ Object.entries(leapDarkTheme).map(([key, value]) => {
171
+ return (
172
+ <Grid key={key} item xs={3} align="center" style={{backgroundColor: "#1C365F", width: "100%"}}>
173
+ <div>
174
+ <Icon name={value} sx={{color: "#FAFAFA"}}/>
175
+ <p style={{color: "#FAFAFA"}}>{key.toString()}</p>
176
+ </div>
177
+ </Grid>
178
+ )
179
+ })
180
+ }
181
+ </Grid>
182
+ </Story>
183
+ </Canvas>
184
+
185
+ ## Light Theme
186
+ <Canvas withToolbar>
187
+ <Story
188
+ name="Light Theme"
189
+ parameters={{
190
+ docs: {
191
+ source: {
192
+ code: `
193
+ <Icon name={AutoTimerIconLightTheme} color="primary" />
194
+ <Icon name={ManualEntryIconLightTheme} color="primary" />
195
+ `}},
196
+ backgrounds: {
197
+ default: "light",
198
+ values: [
199
+ { name: "light", value: "#FAFAFA" },
200
+ ],
201
+ },
202
+ }}>
203
+ <Grid container spacing={2}>
204
+ {
205
+ Object.entries(leapLightTheme).map(([key, value]) => {
206
+ return (
207
+ <Grid key={key} item xs={3} align="center">
208
+ <div>
209
+ <Icon name={value} color="primary" />
210
+ <p>{key.toString()}</p>
211
+ </div>
212
+ </Grid>
213
+ )
214
+ })
215
+ }
216
+ </Grid>
217
+ </Story>
218
+ </Canvas>
package/src/MenuItem/MenuItem.stories.mdx CHANGED
@@ -37,12 +37,12 @@ import { MenuItem } from "./MenuItem"
37
37
 
38
38
  <Canvas>
39
39
  <Story name="Disabled" args={{}} parameters={{ docs: { source: { code: `
40
- <MenuItem disabled startIcon={<Icon name={SvgTick} />}>
40
+ <MenuItem disabled>
41
41
  Menu Item Disabled
42
42
  </MenuItem>
43
43
  `}}}}>
44
44
  {(args) => (
45
- <MenuItem {...args} disabled startIcon={<Icon name={SvgTick} />}>
45
+ <MenuItem {...args} disabled>
46
46
  Menu Item Disabled
47
47
  </MenuItem>
48
48
  )}
package/src/Theme/leap/desktop/design-tokens/components/chip.ts CHANGED
@@ -58,7 +58,8 @@ const chip = {
58
58
  fontWeight: '400',
59
59
  fontSize: '12px',
60
60
  height: '22px',
61
- iconBorder: '1px solid #d4d4d4'
61
+ iconBorder: '1px solid #d4d4d4',
62
+ paddingLabel: '4px',
62
63
  },
63
64
  }
64
65
  }
package/src/Theme/leap/desktop/overrides/Dialog/dialog.ts CHANGED
@@ -60,9 +60,9 @@ export const dialogOverrides: Components<Theme>['MuiDialog'] = {
60
60
  "&.gds-modal--desktop": {
61
61
  '& .gds-modal_paper': {
62
62
  color: "#444444",
63
- border: '1px solid #CCCCCC',
64
- boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.21)',
63
+ boxShadow: theme.shadows[5],
65
64
  maxWidth: 502,
65
+ borderRadius: theme.shapes.md,
66
66
  "&:focus": {
67
67
  outline: 'none',
68
68
  }
@@ -125,9 +125,10 @@ export const dialogOverrides: Components<Theme>['MuiDialog'] = {
125
125
  },
126
126
  }),
127
127
  paper: ({ theme }) => ({
128
- border: '1px solid #CCCCCC',
129
- boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.21)',
128
+ border: '1px solid #BBBDBF',
129
+ boxShadow: theme.shadows[5],
130
130
  background: theme.palette.grey[100],
131
+ borderRadius: theme.shapes.md,
131
132
  "& .MuiDialogTitle-root + .MuiDialogContent-root": {
132
133
  "&:not(.gds-disablePaddings)": {
133
134
  paddingTop: 12,
package/src/Theme/leap/desktop/overrides/listItemIcon.ts CHANGED
@@ -4,7 +4,6 @@ export const listItemIconOverrides: Components<Theme>['MuiListItemIcon'] = {
4
4
  styleOverrides: {
5
5
  root: () => ({
6
6
  minWidth: 'auto',
7
- marginRight: 10,
8
7
  }),
9
8
  },
10
9
  };
package/src/Theme/leap/desktop/overrides/menu.ts CHANGED
@@ -1,40 +1,43 @@
1
1
  import { Components, Theme } from '@mui/material';
2
2
 
3
3
  export const menuOverrides: Components<Theme>['MuiMenu'] = {
4
- styleOverrides: {
5
- root: ({theme}) => ({
6
- "& .MuiPaper-root": {
7
- border: `1px solid #646464`,
8
- boxShadow: '3px 3px 4px rgba(0, 0, 0, 0.4)',
9
- background: '#eeeeee',
10
- },
4
+ styleOverrides: {
5
+ root: ({ theme }) => ({
6
+ '& .MuiPaper-root': {
7
+ border: `1px solid #646464`,
8
+ boxShadow: '3px 3px 4px rgba(0, 0, 0, 0.4)',
9
+ background: '#eeeeee',
10
+ borderRadius: '0',
11
+ },
11
12
 
12
- '& .customDropdown': {
13
- '& .MuiListSubheader-root': {
14
- background: theme.palette.grey[100],
15
- },
13
+ '& .customDropdown': {
14
+ '& .MuiListSubheader-root': {
15
+ background: theme.palette.grey[100],
16
+ },
16
17
 
17
- '& .MuiCheckbox-root + .MuiTypography-root': {
18
- marginLeft: 6,
19
- },
20
- },
18
+ '& .MuiCheckbox-root + .MuiTypography-root': {
19
+ marginLeft: 6,
20
+ },
21
+ },
21
22
 
22
- "&.gds-menu-system .MuiPaper-root": {
23
- color: "#d4d4d4",
24
- border: "1px solid #CCCCCC",
25
- backgroundColor: "#eeeeee",
26
- padding: "0 2px",
27
- minWidth: 180,
28
- "& .MuiListSubheader-root": {
29
- fontSize: theme.typography.body2.fontSize,
30
- },
31
- },
32
- }),
33
- list: {
34
- padding: '2px 0',
35
- '& .MuiListSubheader-root': {
36
- pointerEvents: 'none',
37
- },
23
+ '&.gds-menu-system .MuiPaper-root': {
24
+ color: '#d4d4d4',
25
+ border: '1px solid #CCCCCC',
26
+ boxShadow: theme.shadows[6],
27
+ borderRadius: theme.shapes.sm,
28
+ backgroundColor: '#F9F9F9',
29
+ padding: '0 4px',
30
+ minWidth: 180,
31
+ '& .MuiListSubheader-root': {
32
+ fontSize: theme.typography.body2.fontSize,
38
33
  },
39
- }
40
- }
34
+ },
35
+ }),
36
+ list: {
37
+ padding: 0,
38
+ '& .MuiListSubheader-root': {
39
+ pointerEvents: 'none',
40
+ },
41
+ },
42
+ },
43
+ };