@lunit/design-system 1.0.0-a.5 → 1.0.0-b.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.
Files changed (79) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/components/Alert/index.js +1 -1
  3. package/dist/cjs/components/Alert/index.js.map +1 -1
  4. package/dist/cjs/components/Button/index.js +1 -1
  5. package/dist/cjs/components/Button/index.js.map +1 -1
  6. package/dist/cjs/components/Checkbox/index.js +1 -1
  7. package/dist/cjs/components/Checkbox/index.js.map +1 -1
  8. package/dist/cjs/components/Chip/index.js +1 -1
  9. package/dist/cjs/components/Chip/index.js.map +1 -1
  10. package/dist/cjs/components/Radio/index.js +1 -1
  11. package/dist/cjs/components/Radio/index.js.map +1 -1
  12. package/dist/cjs/components/TextField/index.js +1 -1
  13. package/dist/cjs/components/TextField/index.js.map +1 -1
  14. package/dist/cjs/components/Toggle/index.js +1 -1
  15. package/dist/cjs/components/Toggle/index.js.map +1 -1
  16. package/dist/cjs/components/ToggleButton/index.js +1 -1
  17. package/dist/cjs/components/ToggleButton/index.js.map +1 -1
  18. package/dist/cjs/index.js +1 -1
  19. package/dist/cjs/index.js.map +1 -1
  20. package/dist/components/Alert/Alert.styled.js +2 -2
  21. package/dist/components/Alert/Alert.styled.js.map +1 -1
  22. package/dist/components/Alert/Alert.utils.js +12 -12
  23. package/dist/components/Alert/Alert.utils.js.map +1 -1
  24. package/dist/components/Button/Button.styled.js +33 -33
  25. package/dist/components/Button/Button.styled.js.map +1 -1
  26. package/dist/components/Checkbox/Checkbox.js +4 -4
  27. package/dist/components/Checkbox/Checkbox.js.map +1 -1
  28. package/dist/components/Chip/Chip.styled.js +15 -15
  29. package/dist/components/Chip/Chip.styled.js.map +1 -1
  30. package/dist/components/Radio/Radio.js +3 -3
  31. package/dist/components/Radio/Radio.js.map +1 -1
  32. package/dist/components/TextField/TextField.style.js +27 -27
  33. package/dist/components/TextField/TextField.style.js.map +1 -1
  34. package/dist/components/Toast/Toast.styled.js +3 -3
  35. package/dist/components/Toast/Toast.styled.js.map +1 -1
  36. package/dist/components/Toast/Toast.utils.js +4 -4
  37. package/dist/components/Toast/Toast.utils.js.map +1 -1
  38. package/dist/components/Toggle/Toggle.styled.js +20 -20
  39. package/dist/components/Toggle/Toggle.styled.js.map +1 -1
  40. package/dist/components/ToggleButton/ToggleButton.styled.js +7 -7
  41. package/dist/components/ToggleButton/ToggleButton.styled.js.map +1 -1
  42. package/dist/foundation/Elevation/index.js +4 -4
  43. package/dist/foundation/Elevation/index.js.map +1 -1
  44. package/dist/foundation/colors/index.js +3 -2
  45. package/dist/foundation/colors/index.js.map +1 -1
  46. package/dist/index.js +1 -1
  47. package/dist/index.js.map +1 -1
  48. package/dist/theme.js +3 -2
  49. package/dist/theme.js.map +1 -1
  50. package/dist/types/components/Button/Button.styled.d.ts +7 -7
  51. package/dist/types/components/Chip/Chip.styled.d.ts +12 -12
  52. package/dist/types/components/Toggle/Toggle.styled.d.ts +1 -1
  53. package/dist/types/components/ToggleButton/ToggleButton.styled.d.ts +2 -2
  54. package/dist/types/foundation/colors/index.d.ts +6 -6
  55. package/dist/types/foundation/index.d.ts +2 -2
  56. package/dist/types/index.d.ts +1 -1
  57. package/dist/types/theme.d.ts +2 -0
  58. package/package.json +1 -1
  59. package/src/components/Alert/Alert.styled.ts +2 -2
  60. package/src/components/Alert/Alert.utils.ts +12 -12
  61. package/src/components/Button/Button.styled.ts +34 -34
  62. package/src/components/Checkbox/Checkbox.tsx +4 -4
  63. package/src/components/Chip/Chip.styled.ts +15 -15
  64. package/src/components/Radio/Radio.tsx +3 -3
  65. package/src/components/TextField/TextField.style.ts +28 -28
  66. package/src/components/Toast/Toast.styled.ts +3 -3
  67. package/src/components/Toast/Toast.utils.ts +4 -4
  68. package/src/components/Toggle/Toggle.styled.ts +42 -39
  69. package/src/components/ToggleButton/ToggleButton.styled.ts +7 -7
  70. package/src/foundation/Elevation/index.ts +4 -4
  71. package/src/foundation/colors/index.ts +29 -26
  72. package/src/index.ts +1 -1
  73. package/src/stories/components/Alert/Alert.stories.tsx +1 -1
  74. package/src/stories/foundation/Typography/TypographyGroup.tsx +1 -1
  75. package/src/stories/foundation/colors/Colors.stories.tsx +3 -3
  76. package/src/stories/foundation/colors/Token.inComponent.stories.tsx +21 -19
  77. package/src/stories/foundation/colors/TokenPaletteTable.tsx +6 -4
  78. package/src/stories/foundation/colors/styled.ts +1 -1
  79. package/src/theme.ts +5 -3
package/src/stories/foundation/colors/Token.inComponent.stories.tsx CHANGED
@@ -5,13 +5,13 @@ import { Box, styled, TextField, Typography, useTheme } from "@mui/material";
5
5
  export const InComponentWithStyled = () => {
6
6
  const StyledTextField = styled(TextField)(({ theme }) => ({
7
7
  "& .MuiInputBase-root": {
8
- backgroundColor: theme.palette.token.component.textfield_bg,
9
- color: theme.palette.token.core.text_normal,
8
+ backgroundColor: theme.palette.lunit_token.component.textfield_bg,
9
+ color: theme.palette.lunit_token.core.text_normal,
10
10
  "& .MuiInputBase-input": {
11
11
  padding: "8px 16px",
12
12
  },
13
13
  "&.Mui-focused fieldset": {
14
- borderColor: theme.palette.token.core.focused,
14
+ borderColor: theme.palette.lunit_token.core.focused,
15
15
  },
16
16
  },
17
17
  }));
@@ -49,13 +49,13 @@ export const InComponentWithSx = () => {
49
49
  sx={{
50
50
  "& .MuiInputBase-root": {
51
51
  backgroundColor: (theme) =>
52
- theme.palette.token.component.textfield_bg,
53
- color: (theme) => theme.palette.token.core.text_normal,
52
+ theme.palette.lunit_token.component.textfield_bg,
53
+ color: (theme) => theme.palette.lunit_token.core.text_normal,
54
54
  "& .MuiInputBase-input": {
55
55
  padding: "8px 16px",
56
56
  },
57
57
  "&.Mui-focused fieldset": {
58
- borderColor: (theme) => theme.palette.token.core.focused,
58
+ borderColor: (theme) => theme.palette.lunit_token.core.focused,
59
59
  },
60
60
  },
61
61
  }}
@@ -65,10 +65,11 @@ export const InComponentWithSx = () => {
65
65
  <Box
66
66
  sx={{
67
67
  backgroundColor: (theme) =>
68
- theme.palette.token.component.alert_info_bg,
69
- color: (theme) => theme.palette.token.component.alert_info_border,
68
+ theme.palette.lunit_token.component.alert_info_bg,
69
+ color: (theme) =>
70
+ theme.palette.lunit_token.component.alert_info_border,
70
71
  boxShadow: (theme) =>
71
- `20px -10px 5px ${theme.palette.token.core.shadow_01}`,
72
+ `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
72
73
  width: 300,
73
74
  height: 80,
74
75
  }}
@@ -83,13 +84,13 @@ export const InComponentWithSx = () => {
83
84
  sx={{
84
85
  "& .MuiInputBase-root": {
85
86
  backgroundColor: (theme) =>
86
- theme.palette.token.component.textfield_bg,
87
- color: (theme) => theme.palette.token.core.text_normal,
87
+ theme.palette.lunit_token.component.textfield_bg,
88
+ color: (theme) => theme.palette.lunit_token.core.text_normal,
88
89
  "& .MuiInputBase-input": {
89
90
  padding: "8px 16px",
90
91
  },
91
92
  "&.Mui-focused fieldset": {
92
- borderColor: (theme) => theme.palette.token.core.focused,
93
+ borderColor: (theme) => theme.palette.lunit_token.core.focused,
93
94
  },
94
95
  },
95
96
  }}
@@ -99,10 +100,11 @@ export const InComponentWithSx = () => {
99
100
  <Box
100
101
  sx={{
101
102
  backgroundColor: (theme) =>
102
- theme.palette.token.component.alert_info_bg,
103
- color: (theme) => theme.palette.token.component.alert_info_border,
103
+ theme.palette.lunit_token.component.alert_info_bg,
104
+ color: (theme) =>
105
+ theme.palette.lunit_token.component.alert_info_border,
104
106
  boxShadow: (theme) =>
105
- `20px -10px 5px ${theme.palette.token.core.shadow_01}`,
107
+ `20px -10px 5px ${theme.palette.lunit_token.core.shadow_01}`,
106
108
  width: 300,
107
109
  height: 80,
108
110
  }}
@@ -124,7 +126,7 @@ export const InComponentWithInlineStyle = () => {
124
126
  <TextField
125
127
  placeholder="Inline Styled Text Field"
126
128
  style={{
127
- backgroundColor: theme.palette.token.component.textfield_bg,
129
+ backgroundColor: theme.palette.lunit_token.component.textfield_bg,
128
130
  }}
129
131
  />
130
132
  </BaseBox>
@@ -132,7 +134,7 @@ export const InComponentWithInlineStyle = () => {
132
134
  <TextField
133
135
  placeholder="Inline Styled Text Field"
134
136
  style={{
135
- backgroundColor: theme.palette.token.component.textfield_bg,
137
+ backgroundColor: theme.palette.lunit_token.component.textfield_bg,
136
138
  }}
137
139
  />
138
140
  </BaseBox>
@@ -151,13 +153,13 @@ const BaseBox = ({ theme, children }: BaseBoxProps) => {
151
153
  className={theme === "light" ? "light1" : "dark1"}
152
154
  width={500}
153
155
  height={200}
154
- bgcolor={theme === "light" ? `lunit.grey.0.main` : `lunit.grey.80.main`}
156
+ bgcolor={(sxTheme) => sxTheme.palette.lunit_token.core.bg_01}
155
157
  border="1px solid"
156
158
  p={2}
157
159
  >
158
160
  <Typography
159
161
  variant="body1_16_semibold"
160
- color={(theme) => theme.palette.token.core.text_normal}
162
+ color={(sxTheme) => sxTheme.palette.lunit_token.core.text_normal}
161
163
  >
162
164
  {theme === "light" ? "= light1 =" : "= dark1 ="}
163
165
  </Typography>
package/src/stories/foundation/colors/TokenPaletteTable.tsx CHANGED
@@ -25,7 +25,9 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
25
25
  const theme = useTheme();
26
26
 
27
27
  const colorTokenMap = Object.entries(
28
- kind === "core" ? theme.palette.token.core : theme.palette.token.component
28
+ kind === "core"
29
+ ? theme.palette.lunit_token.core
30
+ : theme.palette.lunit_token.component
29
31
  );
30
32
 
31
33
  const TokenPaletteCell = (props: {
@@ -43,8 +45,8 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
43
45
 
44
46
  const boxColorByToken =
45
47
  kind === "core"
46
- ? theme.palette.token.core[paletteKey as keyof ColorToken["core"]]
47
- : theme.palette.token.component[
48
+ ? theme.palette.lunit_token.core[paletteKey as keyof ColorToken["core"]]
49
+ : theme.palette.lunit_token.component[
48
50
  paletteKey as keyof ColorToken["component"]
49
51
  ];
50
52
 
@@ -57,7 +59,7 @@ const TokenPaletteTable = ({ kind }: TokenPaletteTableProps) => {
57
59
  <TableCell
58
60
  className={surface}
59
61
  sx={{
60
- background: theme.palette.token.core.bg_01,
62
+ background: theme.palette.lunit_token.core.bg_01,
61
63
  padding: 0,
62
64
  }}
63
65
  >
package/src/stories/foundation/colors/styled.ts CHANGED
@@ -33,7 +33,7 @@ export const Color = styled(Box)({
33
33
  });
34
34
 
35
35
  export const StyledTypography = styled(Typography)(({ theme }) => ({
36
- color: theme.palette.token.core.text_normal,
36
+ color: theme.palette.lunit_token.core.text_normal,
37
37
  marginLeft: 8,
38
38
  fontSize: "12px",
39
39
  }));
package/src/theme.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { deepmerge } from "@mui/utils";
2
- import { ComponentsOverrides, createTheme } from "@mui/material";
2
+ import { createTheme, ThemeOptions } from "@mui/material";
3
3
  import {
4
4
  foundationCssBaseline,
5
5
  palette,
@@ -9,7 +9,7 @@ import {
9
9
  } from "./foundation";
10
10
  import { componentsCssBaseline } from "./components";
11
11
 
12
- const theme = createTheme({
12
+ export const themeOptions: ThemeOptions = {
13
13
  typography,
14
14
  palette,
15
15
  spacing,
@@ -41,6 +41,8 @@ const theme = createTheme({
41
41
  },
42
42
  // @todo add any MUI components theme exported from ./components/index.ts
43
43
  },
44
- });
44
+ };
45
+
46
+ const theme = createTheme(themeOptions);
45
47
 
46
48
  export default theme;