@linagora/twake-mui 4.1.0 → 4.2.0

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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/lib/makePalette.d.ts +5 -2
  3. package/dist/lib/makePalette.js +112 -30
  4. package/dist/lib/palette.json +64 -70
  5. package/dist/lib/types.d.ts +0 -1
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # @linagora/twake-mui [4.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.1.1...@linagora/twake-mui@4.2.0) (2026-08-27)
2
+
3
+
4
+ ### Features
5
+
6
+ * Update palette to match cozy-ui palette ([1102658](https://github.com/linagora/twake-ui/commit/11026581150e966982672a724aaa2c7c099cc896))
7
+
8
+ ## @linagora/twake-mui [4.1.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.1.0...@linagora/twake-mui@4.1.1) (2026-08-27)
9
+
10
+
11
+ ### Dependencies
12
+
13
+ * **@linagora/twake-icons:** upgraded to 2.9.0
14
+
1
15
  # @linagora/twake-mui [4.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@4.0.0...@linagora/twake-mui@4.1.0) (2026-08-26)
2
16
 
3
17
 
package/dist/lib/makePalette.d.ts CHANGED
@@ -1,3 +1,6 @@
1
1
  import { PaletteOptions } from '@mui/material/styles';
2
- import { PaletteJson } from './types';
3
- export declare const makePalette: (mode?: "light" | "dark", palette?: PaletteJson) => PaletteOptions;
2
+ import { PaletteJson, BackgroundPalette, GreyPalette } from './types';
3
+ export declare const makePalette: (mode?: "light" | "dark", palette?: PaletteJson) => PaletteOptions & {
4
+ background: BackgroundPalette;
5
+ grey: GreyPalette;
6
+ };
package/dist/lib/makePalette.js CHANGED
@@ -2,42 +2,124 @@ import { alpha } from '@mui/material/styles';
2
2
  import paletteJson from './palette.json';
3
3
  const paletteData = paletteJson;
4
4
  export const makePalette = (mode = 'light', palette = paletteData) => {
5
+ if (mode === 'dark') {
6
+ return {
7
+ mode,
8
+ primary: {
9
+ light: palette.Primary[300],
10
+ main: palette.Primary[400],
11
+ dark: palette.Primary[500],
12
+ contrastText: alpha(palette.Grey[900], 0.9)
13
+ },
14
+ secondary: {
15
+ light: palette.Grey[300],
16
+ main: palette.Grey[400],
17
+ dark: palette.Grey[500],
18
+ contrastText: alpha(palette.Grey[900], 0.9)
19
+ },
20
+ error: {
21
+ light: palette.Error[300],
22
+ main: palette.Error[400],
23
+ dark: palette.Error[500],
24
+ contrastText: alpha(palette.Grey[900], 0.9)
25
+ },
26
+ warning: {
27
+ light: palette.Warning[300],
28
+ main: palette.Warning[400],
29
+ dark: palette.Warning[500],
30
+ contrastText: alpha(palette.Grey[900], 0.9)
31
+ },
32
+ success: {
33
+ light: palette.Success[300],
34
+ main: palette.Success[400],
35
+ dark: palette.Success[500],
36
+ contrastText: alpha(palette.Grey[900], 0.9)
37
+ },
38
+ info: {
39
+ light: palette.Info[300],
40
+ main: palette.Info[400],
41
+ dark: palette.Info[500],
42
+ contrastText: alpha(palette.Grey[900], 0.9)
43
+ },
44
+ grey: {
45
+ 50: palette.Grey[50],
46
+ 100: palette.Grey[100],
47
+ 200: palette.Grey[200],
48
+ 300: palette.Grey[300],
49
+ 400: palette.Grey[400],
50
+ 500: palette.Grey[500],
51
+ 600: palette.Grey[600],
52
+ 700: palette.Grey[700],
53
+ 800: palette.Grey[800],
54
+ 900: palette.Grey[900],
55
+ A100: palette.Grey.A100,
56
+ A200: palette.Grey.A200,
57
+ A400: palette.Grey.A400,
58
+ A700: palette.Grey.A700,
59
+ A900: palette.Grey.A900
60
+ },
61
+ text: {
62
+ primary: palette.Common.white,
63
+ secondary: alpha(palette.Common.white, 0.64),
64
+ disabled: alpha(palette.Common.white, 0.4)
65
+ },
66
+ background: {
67
+ default: palette.Grey.A400,
68
+ paper: palette.Grey[800],
69
+ contrast: alpha(palette.Common.white, 0.072)
70
+ },
71
+ divider: alpha(palette.Common.white, 0.16),
72
+ action: {
73
+ active: palette.Common.white,
74
+ hover: alpha(palette.Common.white, 0.08),
75
+ hoverOpacity: 0.08,
76
+ selected: alpha(palette.Common.white, 0.16),
77
+ selectedOpacity: 0.18,
78
+ disabled: alpha(palette.Common.white, 0.32),
79
+ disabledOpacity: 0.32,
80
+ disabledBackground: alpha(palette.Common.white, 0.12),
81
+ focus: alpha(palette.Common.white, 0.24),
82
+ focusOpacity: 0.24,
83
+ activatedOpacity: 0.24
84
+ }
85
+ };
86
+ }
5
87
  return {
6
88
  mode,
7
89
  primary: {
8
- light: palette.Primary[300],
90
+ light: palette.Primary[200],
9
91
  main: palette.Primary[600],
10
- dark: palette.Primary[800],
92
+ dark: palette.Primary[700],
11
93
  contrastText: palette.Primary.ContrastText
12
94
  },
13
95
  secondary: {
14
- light: palette.Secondary[300],
96
+ light: palette.Secondary[200],
15
97
  main: palette.Secondary[600],
16
- dark: palette.Secondary[800],
98
+ dark: palette.Secondary[700],
17
99
  contrastText: palette.Secondary.ContrastText
18
100
  },
19
101
  error: {
20
- light: palette.Error[300],
102
+ light: palette.Error[200],
21
103
  main: palette.Error[600],
22
- dark: palette.Error[800],
104
+ dark: palette.Error[700],
23
105
  contrastText: palette.Error.ContrastText
24
106
  },
25
107
  warning: {
26
- light: palette.Warning[300],
27
- main: palette.Warning[500],
108
+ light: palette.Warning[200],
109
+ main: palette.Warning[600],
28
110
  dark: palette.Warning[700],
29
111
  contrastText: palette.Warning.ContrastText
30
112
  },
31
113
  success: {
32
- light: palette.Success[300],
114
+ light: palette.Success[200],
33
115
  main: palette.Success[600],
34
- dark: palette.Success[800],
116
+ dark: palette.Success[700],
35
117
  contrastText: palette.Success.ContrastText
36
118
  },
37
119
  info: {
38
- light: palette.Info[300],
120
+ light: palette.Info[200],
39
121
  main: palette.Info[600],
40
- dark: palette.Info[800],
122
+ dark: palette.Info[700],
41
123
  contrastText: '#fff'
42
124
  },
43
125
  grey: {
@@ -58,28 +140,28 @@ export const makePalette = (mode = 'light', palette = paletteData) => {
58
140
  A900: palette.Grey.A900
59
141
  },
60
142
  text: {
61
- primary: mode === 'dark'
62
- ? palette.Common['white']
63
- : alpha(palette.Grey[900], 0.9),
64
- secondary: mode === 'dark'
65
- ? alpha(palette.Common['white'], 0.64)
66
- : alpha(palette.Grey['900'], 0.64),
67
- disabled: mode === 'dark'
68
- ? alpha(palette.Common['white'], 0.4)
69
- : alpha(palette.Grey['900'], 0.32)
143
+ primary: alpha(palette.Grey[900], 0.9),
144
+ secondary: alpha(palette.Grey[900], 0.64),
145
+ disabled: alpha(palette.Grey[900], 0.32)
70
146
  },
71
147
  background: {
72
- default: '#FFFFFF',
73
- paper: '#FFFFFF'
148
+ default: palette.Grey[100],
149
+ paper: palette.Common.white,
150
+ contrast: alpha(palette.Grey[900], 0.048)
74
151
  },
75
- divider: '#E1E3E6',
152
+ divider: alpha(palette.Grey[900], 0.12),
76
153
  action: {
77
- active: palette.Primary['A400'],
78
- hover: 'rgba(246, 126, 53, 0.04)',
79
- selected: 'rgba(246, 126, 53, 0.08)',
80
- disabled: 'rgba(0, 0, 0, 0.32)',
81
- disabledBackground: 'rgba(0, 0, 0, 0.12)',
82
- focus: 'rgba(246, 126, 53, 0.12)'
154
+ active: alpha(palette.Grey[900], 0.56),
155
+ hover: alpha(palette.Grey[900], 0.04),
156
+ hoverOpacity: 0.04,
157
+ selected: alpha(palette.Grey[900], 0.08),
158
+ selectedOpacity: 0.18,
159
+ disabled: alpha(palette.Grey[900], 0.24),
160
+ disabledOpacity: 0.32,
161
+ disabledBackground: alpha(palette.Grey[900], 0.12),
162
+ focus: alpha(palette.Grey[900], 0.12),
163
+ focusOpacity: 0.12,
164
+ activatedOpacity: 0.12
83
165
  }
84
166
  };
85
167
  };
package/dist/lib/palette.json CHANGED
@@ -1,86 +1,80 @@
1
1
  {
2
2
  "Primary": {
3
- "50": "#FFF9F6",
4
- "100": "#FFF5F0",
5
- "200": "#FFF1E3",
6
- "300": "#FFD8BF",
7
- "400": "#FFAE7B",
8
- "500": "#FF8D46",
9
- "600": "#F67E35",
10
- "700": "#F66F35",
11
- "800": "#E55B31",
12
- "900": "#7A411E",
13
- "ContrastText": "#fff",
14
- "A400": "#2C3039"
3
+ "50": "#f6fbff",
4
+ "100": "#e3f1ff",
5
+ "200": "#d2e9ff",
6
+ "300": "#bfdfff",
7
+ "400": "#7bbdff",
8
+ "500": "#46a2ff",
9
+ "600": "#0a84ff",
10
+ "700": "#006bd8",
11
+ "800": "#0157ad",
12
+ "900": "#082139",
13
+ "ContrastText": "#fff"
15
14
  },
16
15
  "Secondary": {
17
- "50": "#F9FCFF",
18
- "100": "#F6F9FC",
19
- "200": "#F3F6F9",
20
- "300": "#F2F6FA",
21
- "400": "#F1F4F7",
22
- "500": "#F0F2F5",
23
- "600": "#EDF0F2",
24
- "700": "#DAD9DB",
25
- "800": "#BEBEBF",
26
- "900": "#7A797A",
27
- "ContrastText": "#fff",
28
- "A400": "#343439"
16
+ "50": "#f1f5fa",
17
+ "100": "#e8f0fa",
18
+ "200": "#d1e0f2",
19
+ "300": "#b5d1f1",
20
+ "400": "#96bce8",
21
+ "500": "#85b5ec",
22
+ "600": "#5c9ce6",
23
+ "700": "#5085c3",
24
+ "800": "#243b55",
25
+ "900": "#081f39",
26
+ "ContrastText": "#fff"
29
27
  },
30
28
  "Error": {
31
- "50": "#FFFBFE",
32
- "100": "#FCEEEE",
33
- "200": "#FFD2D7",
34
- "300": "#FF939D",
35
- "400": "#FF7A87",
36
- "500": "#FF4D5E",
37
- "600": "#FF3347",
38
- "700": "#D32C3C",
39
- "800": "#B52C39",
40
- "900": "#7A1E27",
41
- "ContrastText": "#fff",
42
- "A400": "#550F0F"
29
+ "50": "#fffbfe",
30
+ "100": "#fceeee",
31
+ "200": "#ffd2d7",
32
+ "300": "#ff939d",
33
+ "400": "#ff7a87",
34
+ "500": "#ff4d5e",
35
+ "600": "#ff3347",
36
+ "700": "#d32c3c",
37
+ "800": "#b52c39",
38
+ "900": "#7a1e27",
39
+ "ContrastText": "#fff"
43
40
  },
44
41
  "Warning": {
45
- "50": "#FFF8E1",
46
- "100": "#FFECB3",
47
- "200": "#FFE082",
48
- "300": "#FFD54F",
49
- "400": "#FFCA28",
50
- "500": "#FFB300",
51
- "600": "#FF8F00",
52
- "700": "#FF6F00",
53
- "800": "#B5672C",
54
- "900": "#281C07",
55
- "ContrastText": "#fff",
56
- "A400": "#3F2B06"
42
+ "50": "#fff8e1",
43
+ "100": "#ffecb3",
44
+ "200": "#ffe082",
45
+ "300": "#ffd54f",
46
+ "400": "#ffca28",
47
+ "500": "#ffb300",
48
+ "600": "#ff8f00",
49
+ "700": "#ff6f00",
50
+ "800": "#b5672c",
51
+ "900": "#281c07",
52
+ "ContrastText": "#fff"
57
53
  },
58
54
  "Success": {
59
- "50": "#F3FFF5",
60
- "100": "#E3FFE7",
61
- "200": "#B9F6CA",
62
- "300": "#97ECA1",
63
- "400": "#66E475",
64
- "500": "#38C949",
65
- "600": "#00C853",
66
- "700": "#00AD48",
55
+ "50": "#f3fff5",
56
+ "100": "#e3ffe7",
57
+ "200": "#b9f6ca",
58
+ "300": "#97eca1",
59
+ "400": "#66e475",
60
+ "500": "#38c949",
61
+ "600": "#00c853",
62
+ "700": "#00ad48",
67
63
  "800": "#245538",
68
- "900": "#08250B",
69
- "ContrastText": "#fff",
70
- "A400": "#07390D"
64
+ "900": "#08250b",
65
+ "ContrastText": "#fff"
71
66
  },
72
67
  "Info": {
73
- "50": "#EDFFFF",
74
- "100": "#D4FEFF",
75
- "200": "#AFFDFF",
76
- "300": "#86F5F7",
77
- "400": "#4EE2E5",
78
- "500": "#1DE9B6",
79
- "600": "#00BFA5",
80
- "700": "#00796B",
68
+ "50": "#edffff",
69
+ "100": "#d4feff",
70
+ "200": "#affdff",
71
+ "300": "#86f5f7",
72
+ "400": "#4ee2e5",
73
+ "500": "#1de9b6",
74
+ "600": "#00bfa5",
75
+ "700": "#00796b",
81
76
  "800": "#004345",
82
- "900": "#002526",
83
- "A400": "#013436"
77
+ "900": "#002526"
84
78
  },
85
79
  "Grey": {
86
80
  "50": "#FBFDFF",
@@ -95,7 +89,7 @@
95
89
  "900": "#424244",
96
90
  "A100": "#FCFCFC",
97
91
  "A200": "#E5ECF3",
98
- "A400": "#37383A",
92
+ "A400": "#2C3039",
99
93
  "A700": "#5D6169",
100
94
  "A900": "#1C1B1F"
101
95
  },
package/dist/lib/types.d.ts CHANGED
@@ -15,7 +15,6 @@ export interface PaletteColor {
15
15
  800: string;
16
16
  900: string;
17
17
  ContrastText?: string;
18
- A400?: string;
19
18
  }
20
19
  export interface GreyPalette {
21
20
  50: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@linagora/twake-mui",
3
3
  "type": "module",
4
- "version": "4.1.0",
4
+ "version": "4.2.0",
5
5
  "description": "MUI v9 theme system for Twake applications",
6
6
  "author": "Twake",
7
7
  "license": "MIT",
@@ -50,7 +50,7 @@
50
50
  "peerDependencies": {
51
51
  "@emotion/react": "^11.5.0",
52
52
  "@emotion/styled": "^11.3.0",
53
- "@linagora/twake-icons": "2.8.0",
53
+ "@linagora/twake-icons": "2.9.0",
54
54
  "@mui/lab": "^9.0.0-beta.6",
55
55
  "@mui/material": "^9.2.0",
56
56
  "react": "^18",
@@ -61,7 +61,7 @@
61
61
  "@argos-ci/storybook": "5.3.2",
62
62
  "@emotion/react": "^11.5.0",
63
63
  "@emotion/styled": "^11.3.0",
64
- "@linagora/twake-icons": "2.8.0",
64
+ "@linagora/twake-icons": "2.9.0",
65
65
  "@mui/icons-material": "^9.2.0",
66
66
  "@mui/lab": "^9.0.0-beta.6",
67
67
  "@mui/material": "^9.2.0",