@ozen-ui/kit 0.23.1 → 0.24.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 (53) hide show
  1. package/Calendar/package.json +5 -0
  2. package/__inner__/cjs/components/Badge/Badge.css +1 -1
  3. package/__inner__/cjs/components/Breadcrumbs/Breadcrumbs.css +1 -1
  4. package/__inner__/cjs/components/Button/Button.css +30 -29
  5. package/__inner__/cjs/components/Button/Button.d.ts +3 -1
  6. package/__inner__/cjs/components/Button/Button.js +6 -7
  7. package/__inner__/cjs/components/DataList/DataList.js +3 -3
  8. package/__inner__/cjs/components/Drawer/Drawer.css +1 -2
  9. package/__inner__/cjs/components/ThemeProvider/ThemeProvider.css +11 -8
  10. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +172 -0
  11. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +141 -120
  12. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css +143 -122
  13. package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css +141 -120
  14. package/__inner__/cjs/components/ThemeProvider/index.d.ts +1 -0
  15. package/__inner__/cjs/components/ThemeProvider/index.js +1 -0
  16. package/__inner__/cjs/components/ThemeProvider/themes/helper.d.ts +1 -1
  17. package/__inner__/cjs/components/ThemeProvider/themes/helper.js +34 -13
  18. package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDark.d.ts +14 -0
  19. package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDark.js +31 -0
  20. package/__inner__/cjs/components/Typography/Typography.css +3 -3
  21. package/__inner__/cjs/components/Typography/Typography.d.ts +1 -1
  22. package/__inner__/cjs/components/Typography/Typography.js +1 -1
  23. package/__inner__/cjs/hooks/useDeviceDetect/index.d.ts +1 -0
  24. package/__inner__/cjs/hooks/useDeviceDetect/index.js +4 -0
  25. package/__inner__/cjs/hooks/useDeviceDetect/useDeviceDetect.d.ts +6 -0
  26. package/__inner__/cjs/hooks/useDeviceDetect/useDeviceDetect.js +47 -0
  27. package/__inner__/esm/components/Badge/Badge.css +1 -1
  28. package/__inner__/esm/components/Breadcrumbs/Breadcrumbs.css +1 -1
  29. package/__inner__/esm/components/Button/Button.css +30 -29
  30. package/__inner__/esm/components/Button/Button.d.ts +3 -1
  31. package/__inner__/esm/components/Button/Button.js +6 -7
  32. package/__inner__/esm/components/DataList/DataList.js +3 -3
  33. package/__inner__/esm/components/Drawer/Drawer.css +1 -2
  34. package/__inner__/esm/components/ThemeProvider/ThemeProvider.css +11 -8
  35. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDark.css +172 -0
  36. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css +141 -120
  37. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDark.css +143 -122
  38. package/__inner__/esm/components/ThemeProvider/_color/Theme_color_ozenDefault.css +141 -120
  39. package/__inner__/esm/components/ThemeProvider/index.d.ts +1 -0
  40. package/__inner__/esm/components/ThemeProvider/index.js +1 -0
  41. package/__inner__/esm/components/ThemeProvider/themes/helper.d.ts +1 -1
  42. package/__inner__/esm/components/ThemeProvider/themes/helper.js +34 -13
  43. package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDark.d.ts +14 -0
  44. package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDark.js +28 -0
  45. package/__inner__/esm/components/Typography/Typography.css +3 -3
  46. package/__inner__/esm/components/Typography/Typography.d.ts +1 -1
  47. package/__inner__/esm/components/Typography/Typography.js +1 -1
  48. package/__inner__/esm/hooks/useDeviceDetect/index.d.ts +1 -0
  49. package/__inner__/esm/hooks/useDeviceDetect/index.js +1 -0
  50. package/__inner__/esm/hooks/useDeviceDetect/useDeviceDetect.d.ts +6 -0
  51. package/__inner__/esm/hooks/useDeviceDetect/useDeviceDetect.js +43 -0
  52. package/package.json +1 -1
  53. package/useDeviceDetect/package.json +5 -0
@@ -1,130 +1,150 @@
1
1
  .Theme_color_ozenDefault {
2
- --color-content-primary: #080808;
3
- --color-content-secondary: #707070;
4
- --color-additional-h3: #e1e4e7;
5
- --color-content-tertiary: #949494;
6
- --color-content-disabled: #949494;
7
- --color-content-ghost-disabled: rgb(255 255 255 / 47%);
8
- --color-content-action: #379535;
9
- --color-content-action-hover: #2a7329;
10
- --color-content-action-pressed: #1e521d;
11
- --color-content-action-dark: #184117;
2
+ --color-content-primary: #1e1d22;
3
+ --color-content-secondary: #636574;
4
+ --color-content-tertiary: #9a9eb5;
5
+ --color-content-disabled: #9a9eb5;
6
+ --color-content-ghost-disabled: rgb(255 255 255 / 40%);
7
+ --color-content-action: #0b0;
8
+ --color-content-action-hover: #039904;
9
+ --color-content-action-pressed: #067607;
10
+ --color-content-action-dark: #0a540b;
11
+ --color-content-action-secondary: #023dff;
12
+ --color-content-action-secondary-hover: #0534d0;
13
+ --color-content-action-secondary-pressed: #082ba0;
14
+ --color-content-action-secondary-dark: #0a2171;
12
15
  --color-content-action-on: #fff;
13
- --color-content-error: #cd1b10;
14
- --color-content-error-hover: #a4150d;
15
- --color-content-error-pressed: #7a1009;
16
- --color-content-error-dark: #660d07;
17
- --color-content-warning: #c2420b;
18
- --color-content-warning-hover: #943209;
19
- --color-content-warning-pressed: #652306;
20
- --color-content-warning-dark: #4e1b05;
21
- --color-content-success: #379535;
22
- --color-content-success-hover: #2a7329;
23
- --color-content-success-pressed: #1e521d;
24
- --color-content-success-dark: #184117;
25
- --color-content-info: #5e1db1;
26
- --color-content-info-hover: #481688;
27
- --color-content-info-pressed: #33105e;
28
- --color-content-info-dark: #280c4a;
16
+ --color-content-error: #ff5959;
17
+ --color-content-error-hover: #cf4a4b;
18
+ --color-content-error-pressed: #9f3b3d;
19
+ --color-content-error-dark: #702d2e;
20
+ --color-content-warning: #f90;
21
+ --color-content-warning-hover: #cf7d04;
22
+ --color-content-warning-pressed: #9f6207;
23
+ --color-content-warning-dark: #70460b;
24
+ --color-content-success: #0b0;
25
+ --color-content-success-hover: #039904;
26
+ --color-content-success-pressed: #067607;
27
+ --color-content-success-dark: #0a540b;
28
+ --color-content-info: #8002ff;
29
+ --color-content-info-hover: #6a05d0;
30
+ --color-content-info-pressed: #5307a0;
31
+ --color-content-info-dark: #3d0a71;
29
32
  --color-content-primary-inverse: #fff;
30
- --color-content-accent-main: #a0a0a0;
31
- --color-accent-main: #181818;
32
- --color-content-accent-primary: #dcdcdc;
33
- --color-accent-primary: #282828;
34
- --color-content-accent-disabled: #606060;
33
+ --color-content-accent-secondary: #989aa5;
34
+ --color-accent-main: #14151b;
35
+ --color-content-accent-primary: #c7c8ce;
36
+ --color-accent-primary: #1b1c24;
37
+ --color-content-accent-disabled: #7b7e8c;
35
38
  --color-background-main: #fff;
36
- --color-background-main-hover: #f5f5f5;
37
- --color-background-main-pressed: #e8e8e8;
38
- --color-background-primary: #f5f5f5;
39
- --color-background-primary-hover: #e8e8e8;
40
- --color-background-primary-pressed: #dcdcdc;
41
- --color-background-secondary: #e8e8e8;
42
- --color-background-secondary-hover: #dcdcdc;
43
- --color-background-secondary-pressed: #c7c7c7;
44
- --color-background-tertiary: #dcdcdc;
45
- --color-background-tertiary-hover: #c7c7c7;
46
- --color-background-tertiary-pressed: #b2b2b2;
47
- --color-background-disabled: #e8e8e8;
48
- --color-background-action: #43b741;
49
- --color-background-action-hover: #2a7329;
50
- --color-background-action-pressed: #1e521d;
51
- --color-background-action-active-disabled: #b6e3b5;
52
- --color-background-action-light: #d7f0d6;
53
- --color-background-action-light-hover: #c6e9c6;
54
- --color-background-action-light-pressed: #b6e3b5;
55
- --color-background-error: #f62114;
56
- --color-background-error-hover: #a4150d;
57
- --color-background-error-pressed: #7a1009;
58
- --color-background-error-light: #fdd9d6;
59
- --color-background-error-light-hover: #fcc4c1;
60
- --color-background-error-light-pressed: #fcb0ab;
61
- --color-background-warning: #f0520e;
62
- --color-background-warning-hover: #943209;
63
- --color-background-warning-pressed: #652306;
64
- --color-background-warning-light: #fde6dd;
65
- --color-background-warning-light-hover: #fbd6c6;
66
- --color-background-warning-light-pressed: #fac5af;
67
- --color-background-success: #43b741;
68
- --color-background-success-hover: #2a7329;
69
- --color-background-success-pressed: #1e521d;
70
- --color-background-success-light: #d7f0d6;
71
- --color-background-success-light-hover: #c6e9c6;
72
- --color-background-success-light-pressed: #b6e3b5;
73
- --color-background-info: #7424da;
74
- --color-background-info-hover: #481688;
75
- --color-background-info-pressed: #33105e;
76
- --color-background-info-light: #e9dcf9;
77
- --color-background-info-light-hover: #dcc8f6;
78
- --color-background-info-light-pressed: #deb7f7;
79
- --color-background-main-inverse: #121212;
80
- --color-background-overlay: rgb(0 0 0 / 55%);
81
- --color-background-ghost: rgb(255 255 255 / 12%);
82
- --color-background-ghost-hover: rgb(255 255 255 / 24%);
83
- --color-background-ghost-pressed: rgb(255 255 255 / 32%);
84
- --color-background-ghost-disabled: rgb(255 255 255 / 47%);
85
- --color-background-accent-action-light-hover: #1e521d;
86
- --color-background-accent-action-light-pressed: #184117;
87
- --color-background-accent-error-light-hover: #7a1009;
88
- --color-background-accent-error-light-pressed: #660d07;
89
- --color-background-accent-warning-light-hover: #652306;
90
- --color-background-accent-warning-light-pressed: #4e1b05;
39
+ --color-background-main-hover: #f5f5f8;
40
+ --color-background-main-pressed: #ebecf0;
41
+ --color-background-primary: #f5f5f8;
42
+ --color-background-primary-hover: #ebecf0;
43
+ --color-background-primary-pressed: #d7d8e1;
44
+ --color-background-secondary: #ebecf0;
45
+ --color-background-secondary-hover: #d7d8e1;
46
+ --color-background-secondary-pressed: #c2c5d3;
47
+ --color-background-tertiary: #d7d8e1;
48
+ --color-background-tertiary-hover: #c2c5d3;
49
+ --color-background-tertiary-pressed: #aeb1c4;
50
+ --color-background-disabled: #d7d8e1;
51
+ --color-background-action: #0b0;
52
+ --color-background-action-hover: #039904;
53
+ --color-background-action-pressed: #067607;
54
+ --color-background-action-active-disabled: #99e499;
55
+ --color-background-action-light: #e5f8e5;
56
+ --color-background-action-light-hover: #ccf1cc;
57
+ --color-background-action-light-pressed: #99e499;
58
+ --color-background-accent-action-light: #067607;
59
+ --color-background-accent-action-light-hover: #0a540b;
60
+ --color-background-accent-action-light-pressed: #0d310e;
61
+ --color-background-action-secondary: #023dff;
62
+ --color-background-action-secondary-hover: #0534d0;
63
+ --color-background-action-secondary-pressed: #082ba0;
64
+ --color-background-action-secondary-active-disabled: #9ab1ff;
65
+ --color-background-action-secondary-light: #e6ecff;
66
+ --color-background-action-secondary-light-hover: #ccd8ff;
67
+ --color-background-action-secondary-light-pressed: #9ab1ff;
68
+ --color-background-accent-action-secondary-light: #082ba0;
69
+ --color-background-accent-action-secondary-light-hover: #0a2171;
70
+ --color-background-accent-action-secondary-light-pressed: #0d1841;
71
+ --color-background-error: #ff5959;
72
+ --color-background-error-hover: #cf4a4b;
73
+ --color-background-error-pressed: #9f3b3d;
74
+ --color-background-error-light: #fee;
75
+ --color-background-error-light-hover: #ffdede;
76
+ --color-background-error-light-pressed: #ffbdbd;
77
+ --color-background-accent-error-light: #9f3b3d;
78
+ --color-background-accent-error-light-hover: #702d2e;
79
+ --color-background-accent-error-light-pressed: #401e20;
80
+ --color-background-warning: #f90;
81
+ --color-background-warning-hover: #cf7d04;
82
+ --color-background-warning-pressed: #9f6207;
83
+ --color-background-warning-light: #fff5e5;
84
+ --color-background-warning-light-hover: #ffebcc;
85
+ --color-background-warning-light-pressed: #ffd699;
86
+ --color-background-accent-warning-light: #9f6207;
87
+ --color-background-accent-warning-light-hover: #70460b;
88
+ --color-background-accent-warning-light-pressed: #402b0e;
89
+ --color-background-success: #0b0;
90
+ --color-background-success-hover: #039904;
91
+ --color-background-success-pressed: #067607;
92
+ --color-background-success-light: #e5f8e5;
93
+ --color-background-success-light-hover: #ccf1cc;
94
+ --color-background-success-light-pressed: #99e499;
95
+ --color-background-accent-success-light: #067607;
91
96
  --color-background-accent-success-light-hover: #1e521d;
92
97
  --color-background-accent-success-light-pressed: #184117;
93
- --color-background-accent-info-light-hover: #33105e;
94
- --color-background-accent-info-light-pressed: #280c4a;
95
- --color-border-main: #c7c7c7;
96
- --color-border-main-hover: #b2b2b2;
97
- --color-border-main-pressed: #949494;
98
- --color-border-secondary: #e8e8e8;
99
- --color-border-secondary-hover: #c7c7c7;
100
- --color-border-secondary-pressed: #b2b2b2;
101
- --color-border-disabled: #c7c7c7;
102
- --color-border-ghost-disabled: rgb(255 255 255 / 47%);
103
- --color-border-focused: #85d083;
104
- --color-border-action: #379535;
105
- --color-border-action-hover: #2a7329;
106
- --color-border-action-pressed: #184117;
107
- --color-border-error: #cd1b10;
108
- --color-border-warning: #c2420b;
109
- --color-border-success: #379535;
110
- --color-border-info: #5e1db1;
98
+ --color-background-info: #8002ff;
99
+ --color-background-info-hover: #6a05d0;
100
+ --color-background-info-pressed: #5307a0;
101
+ --color-background-info-light: #f4e8ff;
102
+ --color-background-info-light-hover: #e6ccff;
103
+ --color-background-info-light-pressed: #cd9aff;
104
+ --color-background-accent-info-light: #5307a0;
105
+ --color-background-accent-info-light-hover: #3d0a71;
106
+ --color-background-accent-info-light-pressed: #270d41;
107
+ --color-background-main-inverse: #1e1d22;
108
+ --color-background-overlay: rgb(0 0 0 / 50%);
109
+ --color-background-ghost: rgb(255 255 255 / 10%);
110
+ --color-background-ghost-hover: rgb(255 255 255 / 20%);
111
+ --color-background-ghost-pressed: rgb(255 255 255 / 30%);
112
+ --color-background-ghost-disabled: rgb(255 255 255 / 40%);
113
+ --color-border-main: #c2c5d3;
114
+ --color-border-main-hover: #aeb1c4;
115
+ --color-border-main-pressed: #9a9eb5;
116
+ --color-border-secondary: #ebecf0;
117
+ --color-border-secondary-hover: #d7d8e1;
118
+ --color-border-secondary-pressed: #c2c5d3;
119
+ --color-border-disabled: #c2c5d3;
120
+ --color-border-ghost-disabled: rgb(255 255 255 / 40%);
121
+ --color-border-focused: #99e499;
122
+ --color-border-action: #0b0;
123
+ --color-border-action-hover: #039904;
124
+ --color-border-action-pressed: #067607;
125
+ --color-border-action-secondary: #023dff;
126
+ --color-border-action-secondary-hover: #0534d0;
127
+ --color-border-action-secondary-pressed: #082ba0;
128
+ --color-border-error: #ff5959;
129
+ --color-border-warning: #f90;
130
+ --color-border-success: #0b0;
131
+ --color-border-info: #8002ff;
111
132
  --color-border-main-on: #fff;
112
- --color-border-accent-main: #a0a0a0;
113
- --color-border-accent-disabled: #606060;
114
- --color-border-accent-focused: #184117;
115
- --color-accent-main-hover: #282828;
116
- --color-accent-main-pressed: #383838;
117
- --color-accent-primary-hover: #383838;
118
- --color-accent-primary-pressed: #484848;
119
- --color-accent-secondary: #383838;
120
- --color-accent-secondary-hover: #484848;
121
- --color-accent-secondary-pressed: #585858;
122
- --color-accent-tertiary: #484848;
123
- --color-accent-tertiary-hover: #585858;
124
- --color-accent-tertiary-pressed: #686868;
125
- --color-accent-disabled: #484848;
126
- --color-accent-secondary-inverse: #808080;
127
- --color-accent-main-inverse: #dcdcdc;
133
+ --color-border-accent-main: #989aa5;
134
+ --color-border-accent-disabled: #5f6374;
135
+ --color-border-accent-focused: #0a540b;
136
+ --color-accent-main-hover: #1b1c24;
137
+ --color-accent-main-pressed: #252732;
138
+ --color-accent-primary-hover: #252732;
139
+ --color-accent-primary-pressed: #2f3240;
140
+ --color-accent-secondary: #252732;
141
+ --color-accent-secondary-hover: #393c4d;
142
+ --color-accent-secondary-pressed: #393c4d;
143
+ --color-accent-tertiary: #2f3240;
144
+ --color-accent-tertiary-hover: #393c4d;
145
+ --color-accent-tertiary-pressed: #43475b;
146
+ --color-accent-disabled: #2f3240;
147
+ --color-accent-main-inverse: #c7c8ce;
128
148
  --color-additional-a1: #0b6abe;
129
149
  --color-additional-a2: #1899e9;
130
150
  --color-additional-a3: #b3f1ff;
@@ -148,4 +168,5 @@
148
168
  --color-additional-g3: #f4d37d;
149
169
  --color-additional-h1: #747e89;
150
170
  --color-additional-h2: #bdc4cb;
171
+ --color-additional-h3: #e1e4e7;
151
172
  }
@@ -2,6 +2,7 @@ export * from './ThemeProvider';
2
2
  export * from './themes/themeOzenDark';
3
3
  export * from './themes/themeOzenDefault';
4
4
  export * from './themes/themeBBusinessDefault';
5
+ export * from './themes/themeBBusinessDark';
5
6
  export * as themeHelper from './themes/helper';
6
7
  export { useTheme } from './ThemeProviderContext';
7
8
  export * from './localization/localization';
@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./ThemeProvider"), exports);
6
6
  tslib_1.__exportStar(require("./themes/themeOzenDark"), exports);
7
7
  tslib_1.__exportStar(require("./themes/themeOzenDefault"), exports);
8
8
  tslib_1.__exportStar(require("./themes/themeBBusinessDefault"), exports);
9
+ tslib_1.__exportStar(require("./themes/themeBBusinessDark"), exports);
9
10
  exports.themeHelper = tslib_1.__importStar(require("./themes/helper"));
10
11
  var ThemeProviderContext_1 = require("./ThemeProviderContext");
11
12
  Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeProviderContext_1.useTheme; } });
@@ -1,4 +1,4 @@
1
- export declare const color: readonly ["--color-content-primary", "--color-content-secondary", "--color-additional-h3", "--color-content-tertiary", "--color-content-disabled", "--color-content-ghost-disabled", "--color-content-action", "--color-content-action-hover", "--color-content-action-pressed", "--color-content-action-dark", "--color-content-action-on", "--color-content-error", "--color-content-error-hover", "--color-content-error-pressed", "--color-content-error-dark", "--color-content-warning", "--color-content-warning-hover", "--color-content-warning-pressed", "--color-content-warning-dark", "--color-content-success", "--color-content-success-hover", "--color-content-success-pressed", "--color-content-success-dark", "--color-content-info", "--color-content-info-hover", "--color-content-info-pressed", "--color-content-info-dark", "--color-content-primary-inverse", "--color-content-accent-main", "--color-accent-main", "--color-content-accent-primary", "--color-accent-primary", "--color-content-accent-disabled", "--color-background-main", "--color-background-main-hover", "--color-background-main-pressed", "--color-background-primary", "--color-background-primary-hover", "--color-background-primary-pressed", "--color-background-secondary", "--color-background-secondary-hover", "--color-background-secondary-pressed", "--color-background-tertiary", "--color-background-tertiary-hover", "--color-background-tertiary-pressed", "--color-background-disabled", "--color-background-action", "--color-background-action-hover", "--color-background-action-pressed", "--color-background-action-active-disabled", "--color-background-action-light", "--color-background-action-light-hover", "--color-background-action-light-pressed", "--color-background-error", "--color-background-error-hover", "--color-background-error-pressed", "--color-background-error-light", "--color-background-error-light-hover", "--color-background-error-light-pressed", "--color-background-warning", "--color-background-warning-hover", "--color-background-warning-pressed", "--color-background-warning-light", "--color-background-warning-light-hover", "--color-background-warning-light-pressed", "--color-background-success", "--color-background-success-hover", "--color-background-success-pressed", "--color-background-success-light", "--color-background-success-light-hover", "--color-background-success-light-pressed", "--color-background-info", "--color-background-info-hover", "--color-background-info-pressed", "--color-background-info-light", "--color-background-info-light-hover", "--color-background-info-light-pressed", "--color-background-main-inverse", "--color-background-overlay", "--color-background-ghost", "--color-background-ghost-hover", "--color-background-ghost-pressed", "--color-background-ghost-disabled", "--color-background-accent-action-light-hover", "--color-background-accent-action-light-pressed", "--color-background-accent-error-light-hover", "--color-background-accent-error-light-pressed", "--color-background-accent-warning-light-hover", "--color-background-accent-warning-light-pressed", "--color-background-accent-success-light-hover", "--color-background-accent-success-light-pressed", "--color-background-accent-info-light-hover", "--color-background-accent-info-light-pressed", "--color-border-main", "--color-border-main-hover", "--color-border-main-pressed", "--color-border-secondary", "--color-border-secondary-hover", "--color-border-secondary-pressed", "--color-border-disabled", "--color-border-ghost-disabled", "--color-border-focused", "--color-border-action", "--color-border-action-hover", "--color-border-action-pressed", "--color-border-error", "--color-border-warning", "--color-border-success", "--color-border-info", "--color-border-main-on", "--color-border-accent-main", "--color-border-accent-disabled", "--color-border-accent-focused", "--color-accent-main-hover", "--color-accent-main-pressed", "--color-accent-primary-hover", "--color-accent-primary-pressed", "--color-accent-secondary", "--color-accent-secondary-hover", "--color-accent-secondary-pressed", "--color-accent-tertiary", "--color-accent-tertiary-hover", "--color-accent-tertiary-pressed", "--color-accent-disabled", "--color-accent-secondary-inverse", "--color-accent-main-inverse", "--color-additional-a1", "--color-additional-a2", "--color-additional-a3", "--color-additional-b1", "--color-additional-b2", "--color-additional-b3", "--color-additional-c1", "--color-additional-c2", "--color-additional-c3", "--color-additional-d1", "--color-additional-d2", "--color-additional-d3", "--color-additional-e1", "--color-additional-e2", "--color-additional-e3", "--color-additional-f1", "--color-additional-f2", "--color-additional-f3", "--color-additional-g1", "--color-additional-g2", "--color-additional-g3", "--color-additional-h1", "--color-additional-h2"];
1
+ export declare const color: readonly ["--color-content-primary", "--color-content-secondary", "--color-content-tertiary", "--color-content-disabled", "--color-content-ghost-disabled", "--color-content-action", "--color-content-action-hover", "--color-content-action-pressed", "--color-content-action-dark", "--color-content-action-secondary", "--color-content-action-secondary-hover", "--color-content-action-secondary-pressed", "--color-content-action-secondary-dark", "--color-content-action-on", "--color-content-error", "--color-content-error-hover", "--color-content-error-pressed", "--color-content-error-dark", "--color-content-warning", "--color-content-warning-hover", "--color-content-warning-pressed", "--color-content-warning-dark", "--color-content-success", "--color-content-success-hover", "--color-content-success-pressed", "--color-content-success-dark", "--color-content-info", "--color-content-info-hover", "--color-content-info-pressed", "--color-content-info-dark", "--color-content-primary-inverse", "--color-content-accent-secondary", "--color-accent-main", "--color-content-accent-primary", "--color-accent-primary", "--color-content-accent-disabled", "--color-background-main", "--color-background-main-hover", "--color-background-main-pressed", "--color-background-primary", "--color-background-primary-hover", "--color-background-primary-pressed", "--color-background-secondary", "--color-background-secondary-hover", "--color-background-secondary-pressed", "--color-background-tertiary", "--color-background-tertiary-hover", "--color-background-tertiary-pressed", "--color-background-disabled", "--color-background-action", "--color-background-action-hover", "--color-background-action-pressed", "--color-background-action-active-disabled", "--color-background-action-light", "--color-background-action-light-hover", "--color-background-action-light-pressed", "--color-background-accent-action-light", "--color-background-accent-action-light-hover", "--color-background-accent-action-light-pressed", "--color-background-action-secondary", "--color-background-action-secondary-hover", "--color-background-action-secondary-pressed", "--color-background-action-secondary-active-disabled", "--color-background-action-secondary-light", "--color-background-action-secondary-light-hover", "--color-background-action-secondary-light-pressed", "--color-background-accent-action-secondary-light", "--color-background-accent-action-secondary-light-hover", "--color-background-accent-action-secondary-light-pressed", "--color-background-error", "--color-background-error-hover", "--color-background-error-pressed", "--color-background-error-light", "--color-background-error-light-hover", "--color-background-error-light-pressed", "--color-background-accent-error-light", "--color-background-accent-error-light-hover", "--color-background-accent-error-light-pressed", "--color-background-warning", "--color-background-warning-hover", "--color-background-warning-pressed", "--color-background-warning-light", "--color-background-warning-light-hover", "--color-background-warning-light-pressed", "--color-background-accent-warning-light", "--color-background-accent-warning-light-hover", "--color-background-accent-warning-light-pressed", "--color-background-success", "--color-background-success-hover", "--color-background-success-pressed", "--color-background-success-light", "--color-background-success-light-hover", "--color-background-success-light-pressed", "--color-background-accent-success-light", "--color-background-accent-success-light-hover", "--color-background-accent-success-light-pressed", "--color-background-info", "--color-background-info-hover", "--color-background-info-pressed", "--color-background-info-light", "--color-background-info-light-hover", "--color-background-info-light-pressed", "--color-background-accent-info-light", "--color-background-accent-info-light-hover", "--color-background-accent-info-light-pressed", "--color-background-main-inverse", "--color-background-overlay", "--color-background-ghost", "--color-background-ghost-hover", "--color-background-ghost-pressed", "--color-background-ghost-disabled", "--color-border-main", "--color-border-main-hover", "--color-border-main-pressed", "--color-border-secondary", "--color-border-secondary-hover", "--color-border-secondary-pressed", "--color-border-disabled", "--color-border-ghost-disabled", "--color-border-focused", "--color-border-action", "--color-border-action-hover", "--color-border-action-pressed", "--color-border-action-secondary", "--color-border-action-secondary-hover", "--color-border-action-secondary-pressed", "--color-border-error", "--color-border-warning", "--color-border-success", "--color-border-info", "--color-border-main-on", "--color-border-accent-main", "--color-border-accent-disabled", "--color-border-accent-focused", "--color-accent-main-hover", "--color-accent-main-pressed", "--color-accent-primary-hover", "--color-accent-primary-pressed", "--color-accent-secondary", "--color-accent-secondary-hover", "--color-accent-secondary-pressed", "--color-accent-tertiary", "--color-accent-tertiary-hover", "--color-accent-tertiary-pressed", "--color-accent-disabled", "--color-accent-main-inverse", "--color-additional-a1", "--color-additional-a2", "--color-additional-a3", "--color-additional-b1", "--color-additional-b2", "--color-additional-b3", "--color-additional-c1", "--color-additional-c2", "--color-additional-c3", "--color-additional-d1", "--color-additional-d2", "--color-additional-d3", "--color-additional-e1", "--color-additional-e2", "--color-additional-e3", "--color-additional-f1", "--color-additional-f2", "--color-additional-f3", "--color-additional-g1", "--color-additional-g2", "--color-additional-g3", "--color-additional-h1", "--color-additional-h2", "--color-additional-h3"];
2
2
  export declare const borderRadius: readonly ["--border-radius-l", "--border-radius-xl", "--border-radius-m", "--border-radius-s", "--border-radius-xs", "--border-radius-2xs"];
3
3
  export declare const borderWidth: readonly ["--border-width-s", "--border-width-m"];
4
4
  export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"];
@@ -4,7 +4,6 @@ exports.transition = exports.typography = exports.control = exports.spacing = ex
4
4
  exports.color = [
5
5
  '--color-content-primary',
6
6
  '--color-content-secondary',
7
- '--color-additional-h3',
8
7
  '--color-content-tertiary',
9
8
  '--color-content-disabled',
10
9
  '--color-content-ghost-disabled',
@@ -12,6 +11,10 @@ exports.color = [
12
11
  '--color-content-action-hover',
13
12
  '--color-content-action-pressed',
14
13
  '--color-content-action-dark',
14
+ '--color-content-action-secondary',
15
+ '--color-content-action-secondary-hover',
16
+ '--color-content-action-secondary-pressed',
17
+ '--color-content-action-secondary-dark',
15
18
  '--color-content-action-on',
16
19
  '--color-content-error',
17
20
  '--color-content-error-hover',
@@ -30,7 +33,7 @@ exports.color = [
30
33
  '--color-content-info-pressed',
31
34
  '--color-content-info-dark',
32
35
  '--color-content-primary-inverse',
33
- '--color-content-accent-main',
36
+ '--color-content-accent-secondary',
34
37
  '--color-accent-main',
35
38
  '--color-content-accent-primary',
36
39
  '--color-accent-primary',
@@ -55,46 +58,61 @@ exports.color = [
55
58
  '--color-background-action-light',
56
59
  '--color-background-action-light-hover',
57
60
  '--color-background-action-light-pressed',
61
+ '--color-background-accent-action-light',
62
+ '--color-background-accent-action-light-hover',
63
+ '--color-background-accent-action-light-pressed',
64
+ '--color-background-action-secondary',
65
+ '--color-background-action-secondary-hover',
66
+ '--color-background-action-secondary-pressed',
67
+ '--color-background-action-secondary-active-disabled',
68
+ '--color-background-action-secondary-light',
69
+ '--color-background-action-secondary-light-hover',
70
+ '--color-background-action-secondary-light-pressed',
71
+ '--color-background-accent-action-secondary-light',
72
+ '--color-background-accent-action-secondary-light-hover',
73
+ '--color-background-accent-action-secondary-light-pressed',
58
74
  '--color-background-error',
59
75
  '--color-background-error-hover',
60
76
  '--color-background-error-pressed',
61
77
  '--color-background-error-light',
62
78
  '--color-background-error-light-hover',
63
79
  '--color-background-error-light-pressed',
80
+ '--color-background-accent-error-light',
81
+ '--color-background-accent-error-light-hover',
82
+ '--color-background-accent-error-light-pressed',
64
83
  '--color-background-warning',
65
84
  '--color-background-warning-hover',
66
85
  '--color-background-warning-pressed',
67
86
  '--color-background-warning-light',
68
87
  '--color-background-warning-light-hover',
69
88
  '--color-background-warning-light-pressed',
89
+ '--color-background-accent-warning-light',
90
+ '--color-background-accent-warning-light-hover',
91
+ '--color-background-accent-warning-light-pressed',
70
92
  '--color-background-success',
71
93
  '--color-background-success-hover',
72
94
  '--color-background-success-pressed',
73
95
  '--color-background-success-light',
74
96
  '--color-background-success-light-hover',
75
97
  '--color-background-success-light-pressed',
98
+ '--color-background-accent-success-light',
99
+ '--color-background-accent-success-light-hover',
100
+ '--color-background-accent-success-light-pressed',
76
101
  '--color-background-info',
77
102
  '--color-background-info-hover',
78
103
  '--color-background-info-pressed',
79
104
  '--color-background-info-light',
80
105
  '--color-background-info-light-hover',
81
106
  '--color-background-info-light-pressed',
107
+ '--color-background-accent-info-light',
108
+ '--color-background-accent-info-light-hover',
109
+ '--color-background-accent-info-light-pressed',
82
110
  '--color-background-main-inverse',
83
111
  '--color-background-overlay',
84
112
  '--color-background-ghost',
85
113
  '--color-background-ghost-hover',
86
114
  '--color-background-ghost-pressed',
87
115
  '--color-background-ghost-disabled',
88
- '--color-background-accent-action-light-hover',
89
- '--color-background-accent-action-light-pressed',
90
- '--color-background-accent-error-light-hover',
91
- '--color-background-accent-error-light-pressed',
92
- '--color-background-accent-warning-light-hover',
93
- '--color-background-accent-warning-light-pressed',
94
- '--color-background-accent-success-light-hover',
95
- '--color-background-accent-success-light-pressed',
96
- '--color-background-accent-info-light-hover',
97
- '--color-background-accent-info-light-pressed',
98
116
  '--color-border-main',
99
117
  '--color-border-main-hover',
100
118
  '--color-border-main-pressed',
@@ -107,6 +125,9 @@ exports.color = [
107
125
  '--color-border-action',
108
126
  '--color-border-action-hover',
109
127
  '--color-border-action-pressed',
128
+ '--color-border-action-secondary',
129
+ '--color-border-action-secondary-hover',
130
+ '--color-border-action-secondary-pressed',
110
131
  '--color-border-error',
111
132
  '--color-border-warning',
112
133
  '--color-border-success',
@@ -126,7 +147,6 @@ exports.color = [
126
147
  '--color-accent-tertiary-hover',
127
148
  '--color-accent-tertiary-pressed',
128
149
  '--color-accent-disabled',
129
- '--color-accent-secondary-inverse',
130
150
  '--color-accent-main-inverse',
131
151
  '--color-additional-a1',
132
152
  '--color-additional-a2',
@@ -151,6 +171,7 @@ exports.color = [
151
171
  '--color-additional-g3',
152
172
  '--color-additional-h1',
153
173
  '--color-additional-h2',
174
+ '--color-additional-h3',
154
175
  ];
155
176
  exports.borderRadius = [
156
177
  '--border-radius-l',
@@ -0,0 +1,14 @@
1
+ import '@ozen-ui/fonts';
2
+ import type { Theme } from '../index';
3
+ import '../_color/Theme_color_bBusinessDark.css';
4
+ import '../_typography/Theme_typography_ozenDefault.css';
5
+ import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
6
+ import '../_space/Theme_space_ozenDefault.css';
7
+ import '../_spacing/Theme_spacing_ozenDefault.css';
8
+ import '../_control/Theme_control_ozenDefault.css';
9
+ import '../_shadow/Theme_shadow_ozenDefault.css';
10
+ import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
11
+ import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
12
+ import '../_zIndex/Theme_zIndex_ozenDefault.css';
13
+ import '../_transition/Theme_transition_ozenDefault.css';
14
+ export declare const themeBBusinessDark: Theme;
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.themeBBusinessDark = void 0;
4
+ require("@ozen-ui/fonts");
5
+ require("../_color/Theme_color_bBusinessDark.css");
6
+ require("../_typography/Theme_typography_ozenDefault.css");
7
+ require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
8
+ require("../_space/Theme_space_ozenDefault.css");
9
+ require("../_spacing/Theme_spacing_ozenDefault.css");
10
+ require("../_control/Theme_control_ozenDefault.css");
11
+ require("../_shadow/Theme_shadow_ozenDefault.css");
12
+ require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
13
+ require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
14
+ require("../_zIndex/Theme_zIndex_ozenDefault.css");
15
+ require("../_transition/Theme_transition_ozenDefault.css");
16
+ exports.themeBBusinessDark = {
17
+ tokens: {
18
+ color: 'bBusinessDark',
19
+ space: 'ozenDefault',
20
+ spacing: 'ozenDefault',
21
+ control: 'ozenDefault',
22
+ typography: 'ozenDefault',
23
+ borderRadius: 'ozenDefault',
24
+ borderWidth: 'ozenDefault',
25
+ shadow: 'ozenDefault',
26
+ breakpoint: 'ozenDefault',
27
+ zIndex: 'ozenDefault',
28
+ transition: 'ozenDefault',
29
+ },
30
+ defaultProps: {},
31
+ };
@@ -110,12 +110,12 @@
110
110
  .Typography_color_infoDark {
111
111
  color: var(--color-content-info-dark);
112
112
  }
113
- .Typography_color_accentMain {
114
- color: var(--color-content-accent-main);
115
- }
116
113
  .Typography_color_accentPrimary {
117
114
  color: var(--color-content-accent-primary);
118
115
  }
116
+ .Typography_color_accentSecondary {
117
+ color: var(--color-content-accent-secondary);
118
+ }
119
119
  .Typography_color_accentDisabled {
120
120
  color: var(--color-content-accent-disabled);
121
121
  }
@@ -7,7 +7,7 @@ export declare const typographyDisplayVariant: readonly ["block", "inline", "inl
7
7
  export type TypographyDisplayVariant = (typeof typographyDisplayVariant)[number];
8
8
  export declare const typographyAlignVariant: readonly ["left", "center", "right"];
9
9
  export type TypographyAlignVariant = (typeof typographyAlignVariant)[number];
10
- export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentMain", "accentPrimary", "accentDisabled"];
10
+ export declare const typographyColorVariant: readonly ["primary", "secondary", "tertiary", "disabled", "ghostDisabled", "action", "actionPressed", "actionHover", "actionDark", "actionOn", "error", "errorHover", "errorPressed", "errorDark", "warning", "warningHover", "warningPressed", "warningDark", "success", "successHover", "successDark", "successPressed", "info", "infoHover", "infoPressed", "infoDark", "primaryInverse", "accentPrimary", "accentSecondary", "accentDisabled"];
11
11
  export type TypographyColorVariant = (typeof typographyColorVariant)[number];
12
12
  export type TypographyBaseProps = {
13
13
  /** Вариант типографики */
@@ -71,8 +71,8 @@ exports.typographyColorVariant = [
71
71
  'infoPressed',
72
72
  'infoDark',
73
73
  'primaryInverse',
74
- 'accentMain',
75
74
  'accentPrimary',
75
+ 'accentSecondary',
76
76
  'accentDisabled',
77
77
  ];
78
78
  exports.cnTypography = (0, classname_1.cn)('Typography');
@@ -0,0 +1 @@
1
+ export * from './useDeviceDetect';
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./useDeviceDetect"), exports);
@@ -0,0 +1,6 @@
1
+ export type Platform = 'undetermined' | 'macos' | 'ios' | 'windows' | 'android' | 'linux';
2
+ export type UseDeviceDetectReturn = {
3
+ isMobile: boolean;
4
+ platform: Platform;
5
+ };
6
+ export declare function useDeviceDetect(): UseDeviceDetectReturn;
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useDeviceDetect = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var react_1 = require("react");
6
+ var useIsomorphicEffect_1 = require("../useIsomorphicEffect");
7
+ function getPlatform(userAgent) {
8
+ var iosPlatforms = /iphone|ipad|ipod/i.test(userAgent);
9
+ var windowsPlatforms = /windows/i.test(userAgent);
10
+ var macosPlatforms = /macintosh|macintel|macppc|mac68k/i.test(userAgent);
11
+ var linuxPlatforms = /linux/i.test(userAgent);
12
+ var androidPlatforms = /android/i.test(userAgent);
13
+ if (iosPlatforms) {
14
+ return 'ios';
15
+ }
16
+ if (macosPlatforms) {
17
+ return 'macos';
18
+ }
19
+ if (windowsPlatforms) {
20
+ return 'windows';
21
+ }
22
+ /** Android обязательно должен быть перед Linux т.к Android использует ядро Linux и определяется двумя ОС */
23
+ if (androidPlatforms) {
24
+ return 'android';
25
+ }
26
+ if (linuxPlatforms) {
27
+ return 'linux';
28
+ }
29
+ return 'undetermined';
30
+ }
31
+ function detectIsMobile(userAgent) {
32
+ return Boolean(userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i));
33
+ }
34
+ function useDeviceDetect() {
35
+ var _a = tslib_1.__read((0, react_1.useState)(false), 2), isMobile = _a[0], setIsMobile = _a[1];
36
+ var _b = tslib_1.__read((0, react_1.useState)('undetermined'), 2), platform = _b[0], setPlatform = _b[1];
37
+ (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
38
+ if (typeof window === 'undefined') {
39
+ return;
40
+ }
41
+ var userAgent = window.navigator.userAgent;
42
+ setPlatform(getPlatform(userAgent));
43
+ setIsMobile(detectIsMobile(userAgent));
44
+ }, []);
45
+ return { isMobile: isMobile, platform: platform };
46
+ }
47
+ exports.useDeviceDetect = useDeviceDetect;
@@ -67,7 +67,7 @@
67
67
  }
68
68
  .Badge-Content_color_neutralDark {
69
69
  color: var(--color-content-action-on);
70
- background-color: var(--color-space-space-95);
70
+ background-color: var(--color-content-primary);
71
71
  }
72
72
  .Badge-Content_color_neutralLight {
73
73
  color: var(--color-content-primary);
@@ -13,6 +13,6 @@
13
13
  align-items: center;
14
14
  }
15
15
 
16
- .Breadcrumbs-Item .Button-Label {
16
+ .BreadcrumbItem {
17
17
  color: var(--color-content-secondary);
18
18
  }