@jetbrains/kotlin-web-site-ui 4.8.0-alpha.8 → 4.8.0-dropms.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 (16) hide show
  1. package/out/components/breakpoints/constants.js +0 -1
  2. package/out/components/breakpoints/hooks.js +1 -5
  3. package/out/components/breakpoints/index.js +1 -1
  4. package/out/components/breakpoints/media.pcss +0 -2
  5. package/out/components/common/index.css +8 -0
  6. package/out/components/common/index.js +1 -0
  7. package/out/components/footer/index.css +1 -10
  8. package/out/components/header/index.css +0 -6
  9. package/out/components/layout/index.css +1 -6
  10. package/out/components/nav-item/index.css +52 -0
  11. package/out/components/nav-item/index.js +34 -0
  12. package/out/components/nav-item/nav-item.module.pcss.js +10 -0
  13. package/out/components/top-menu/index.css +0 -2
  14. package/out/components/typography/index.css +1 -7
  15. package/out/components/youtube-player/index.css +0 -1
  16. package/package.json +1 -1
package/out/components/breakpoints/constants.js CHANGED
@@ -1,5 +1,4 @@
1
1
  const POINTS = {
2
- MS: 374,
3
2
  MM: 472,
4
3
  TS: 616,
5
4
  TM: 808,
package/out/components/breakpoints/hooks.js CHANGED
@@ -1,10 +1,6 @@
1
1
  import { useMedia } from 'the-platform/useMedia';
2
2
  import { BREAKPOINTS_MAX_MEDIA } from './constants.js';
3
3
 
4
- function useMS() {
5
- return useMedia(BREAKPOINTS_MAX_MEDIA.MS, false);
6
- }
7
-
8
4
  function useMM() {
9
5
  return useMedia(BREAKPOINTS_MAX_MEDIA.MM, false);
10
6
  }
@@ -29,4 +25,4 @@ function useDS() {
29
25
  return useMedia(BREAKPOINTS_MAX_MEDIA.DS, false);
30
26
  }
31
27
 
32
- export { useDM, useDS, useMM, useMS, useTL, useTM, useTS };
28
+ export { useDM, useDS, useMM, useTL, useTM, useTS };
package/out/components/breakpoints/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export { BREAKPOINTS, BREAKPOINTS_KEYS, BREAKPOINTS_MAX_MEDIA, BREAKPOINTS_MIN_MEDIA } from './constants.js';
2
- export { useDM, useDS, useMM, useMS, useTL, useTM, useTS } from './hooks.js';
2
+ export { useDM, useDS, useMM, useTL, useTM, useTS } from './hooks.js';
package/out/components/breakpoints/media.pcss CHANGED
@@ -1,11 +1,9 @@
1
- @custom-media --ktl-ms-min (min-width: 375px);
2
1
  @custom-media --ktl-mm-min (min-width: 473px);
3
2
  @custom-media --ktl-ts-min (min-width: 617px);
4
3
  @custom-media --ktl-tm-min (min-width: 809px);
5
4
  @custom-media --ktl-tl-min (min-width: 1001px);
6
5
  @custom-media --ktl-ds-min (min-width: 1191px);
7
6
  @custom-media --ktl-dm-min (min-width: 1281px);
8
- @custom-media --ktl-ms (max-width: 374px);
9
7
  @custom-media --ktl-mm (max-width: 472px);
10
8
  @custom-media --ktl-ts (max-width: 616px);
11
9
  @custom-media --ktl-tm (max-width: 808px);
package/out/components/common/index.css ADDED
@@ -0,0 +1,8 @@
1
+ :focus-visible, :focus[data-focus-method=key] {
2
+ outline: none;
3
+ box-shadow: var(--ktl-focus-outline);
4
+ }
5
+ :root {
6
+ --rs-h2-font-size-mobile: var(--rs-h2-font-size, 35px);
7
+ --rs-h2-line-height-mobile: var(--rs-h2-line-height, 42px);
8
+ }
package/out/components/common/index.js ADDED
@@ -0,0 +1 @@
1
+ import './index.css';
package/out/components/footer/index.css CHANGED
@@ -40,7 +40,6 @@
40
40
  --ktl-mobile-dropdown-list-z-index: 907;
41
41
  --ktl-header-height-mobile: 52px;
42
42
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
43
- --rs-font-family-ui: var(--ktl-font-family-inter);
44
43
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
45
44
  }
46
45
 
@@ -106,7 +105,6 @@
106
105
  --ktl-mobile-dropdown-list-z-index: 907;
107
106
  --ktl-header-height-mobile: 52px;
108
107
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
109
- --rs-font-family-ui: var(--ktl-font-family-inter);
110
108
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
111
109
  }
112
110
 
@@ -192,7 +190,6 @@
192
190
  --ktl-mobile-dropdown-list-z-index: 907;
193
191
  --ktl-header-height-mobile: 52px;
194
192
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
195
- --rs-font-family-ui: var(--ktl-font-family-inter);
196
193
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
197
194
  }
198
195
 
@@ -215,7 +212,6 @@
215
212
  padding: var(--ktl-box-page-m) 0;
216
213
  min-width: 320px;
217
214
  box-sizing: border-box;
218
- font-family: var(--ktl-font-family-inter);
219
215
  text-rendering:optimizeLegibility;
220
216
  -webkit-font-smoothing:antialiased;
221
217
  -moz-osx-font-smoothing:grayscale;
@@ -302,12 +298,7 @@
302
298
  }
303
299
 
304
300
  @media (max-width: 472px) {.ktl-layout {
305
- --ktl-layout-width: 328px;
306
- }
307
- }
308
-
309
- @media (max-width: 374px) {.ktl-layout {
310
- --ktl-layout-width: 272px;
301
+ --ktl-layout-width: 316px;
311
302
  }
312
303
  }
313
304
 
package/out/components/header/index.css CHANGED
@@ -41,7 +41,6 @@
41
41
  --ktl-mobile-dropdown-list-z-index: 907;
42
42
  --ktl-header-height-mobile: 52px;
43
43
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
44
- --rs-font-family-ui: var(--ktl-font-family-inter);
45
44
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
46
45
  }
47
46
 
@@ -107,7 +106,6 @@
107
106
  --ktl-mobile-dropdown-list-z-index: 907;
108
107
  --ktl-header-height-mobile: 52px;
109
108
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
110
- --rs-font-family-ui: var(--ktl-font-family-inter);
111
109
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
112
110
  }
113
111
 
@@ -272,7 +270,6 @@
272
270
  --ktl-mobile-dropdown-list-z-index: 907;
273
271
  --ktl-header-height-mobile: 52px;
274
272
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
275
- --rs-font-family-ui: var(--ktl-font-family-inter);
276
273
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
277
274
  }
278
275
 
@@ -751,7 +748,6 @@
751
748
  --ktl-mobile-dropdown-list-z-index: 907;
752
749
  --ktl-header-height-mobile: 52px;
753
750
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
754
- --rs-font-family-ui: var(--ktl-font-family-inter);
755
751
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
756
752
  }
757
753
 
@@ -830,7 +826,6 @@
830
826
  --ktl-mobile-dropdown-list-z-index: 907;
831
827
  --ktl-header-height-mobile: 52px;
832
828
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
833
- --rs-font-family-ui: var(--ktl-font-family-inter);
834
829
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
835
830
  }
836
831
 
@@ -904,7 +899,6 @@
904
899
  --ktl-mobile-dropdown-list-z-index: 907;
905
900
  --ktl-header-height-mobile: 52px;
906
901
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
907
- --rs-font-family-ui: var(--ktl-font-family-inter);
908
902
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
909
903
  }
910
904
 
package/out/components/layout/index.css CHANGED
@@ -25,12 +25,7 @@
25
25
  }
26
26
 
27
27
  @media (max-width: 472px) {.ktl-layout {
28
- --ktl-layout-width: 328px;
29
- }
30
- }
31
-
32
- @media (max-width: 374px) {.ktl-layout {
33
- --ktl-layout-width: 272px;
28
+ --ktl-layout-width: 316px;
34
29
  }
35
30
  }
36
31
 
package/out/components/nav-item/index.css ADDED
@@ -0,0 +1,52 @@
1
+ .ktl-nav-item-module_navItem_gRy22 {
2
+ padding: 0 12px;
3
+ height: 52px;
4
+ cursor: pointer;
5
+ display: inline-flex;
6
+ align-items: center;
7
+ position: relative;
8
+ box-sizing: border-box;
9
+ border: 0;
10
+ background: none;
11
+ color: #ffffff;
12
+ }
13
+
14
+ .ktl-nav-item-module_navItem_gRy22:hover {
15
+ background: rgba(255, 255, 255, 0.10);
16
+ }
17
+
18
+ .ktl-nav-item-module_navItem_gRy22:active {
19
+ box-shadow: #8979ff 0 0 0 4px;
20
+ outline: none
21
+ }
22
+
23
+ .ktl-nav-item-module_rightIcon_XlxMF {
24
+ flex-direction: row-reverse;
25
+ }
26
+
27
+ .ktl-nav-item-module_navItemActive_gI8Nv::after {
28
+ content: '';
29
+ width: 100%;
30
+ height: 2px;
31
+ background: #ffffff;
32
+ position: absolute;
33
+ bottom: 0;
34
+ left: 0;
35
+ }
36
+
37
+ .ktl-nav-item-module_title_9VXwr {
38
+ display: block;
39
+ }
40
+
41
+ .ktl-nav-item-module_titleWithIcon_CVqpS {
42
+ margin-left: 8px;
43
+ }
44
+
45
+ .ktl-nav-item-module_titleWithIconRight_FwEnm {
46
+ margin-left: 0;
47
+ margin-right: 8px;
48
+ }
49
+
50
+ .ktl-nav-item-module_titleWithoutIcon_XgnMl {
51
+ margin: 0;
52
+ }
package/out/components/nav-item/index.js ADDED
@@ -0,0 +1,34 @@
1
+ import './index.css';
2
+ import React from 'react';
3
+ import cn from 'classnames';
4
+ import styles from './nav-item.module.pcss.js';
5
+ import { useTextStyles } from '@rescui/typography';
6
+
7
+ const NavItem = ({
8
+ children,
9
+ icon,
10
+ active,
11
+ iconPosition,
12
+ onClick
13
+ }) => {
14
+ const textCn = useTextStyles();
15
+ const navItemClass = cn(styles.navItem, {
16
+ [styles.navItemActive]: active,
17
+ [styles.rightIcon]: iconPosition === 'right'
18
+ });
19
+ const textStyles = cn(styles.title, {
20
+ [styles.titleWithIcon]: icon,
21
+ [styles.titleWithIconRight]: iconPosition === 'right',
22
+ [styles.titleWithoutIcon]: !children
23
+ });
24
+ return React.createElement("button", {
25
+ className: navItemClass,
26
+ onClick: onClick
27
+ }, icon ? icon : null, React.createElement("div", {
28
+ className: cn(textCn('rs-text-2', {
29
+ hardness: 'hard'
30
+ }), textStyles)
31
+ }, children));
32
+ };
33
+
34
+ export { NavItem, NavItem as default };
package/out/components/nav-item/nav-item.module.pcss.js ADDED
@@ -0,0 +1,10 @@
1
+ var styles = {
2
+ "navItem": "ktl-nav-item-module_navItem_gRy22",
3
+ "rightIcon": "ktl-nav-item-module_rightIcon_XlxMF",
4
+ "navItemActive": "ktl-nav-item-module_navItemActive_gI8Nv",
5
+ "title": "ktl-nav-item-module_title_9VXwr",
6
+ "titleWithIcon": "ktl-nav-item-module_titleWithIcon_CVqpS",
7
+ "titleWithIconRight": "ktl-nav-item-module_titleWithIconRight_FwEnm",
8
+ "titleWithoutIcon": "ktl-nav-item-module_titleWithoutIcon_XgnMl"
9
+ };
10
+ export { styles as default };
package/out/components/top-menu/index.css CHANGED
@@ -17,7 +17,6 @@
17
17
  --ktl-mobile-dropdown-list-z-index: 907;
18
18
  --ktl-header-height-mobile: 52px;
19
19
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
- --rs-font-family-ui: var(--ktl-font-family-inter);
21
20
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
22
21
  }
23
22
 
@@ -110,7 +109,6 @@
110
109
  --ktl-mobile-dropdown-list-z-index: 907;
111
110
  --ktl-header-height-mobile: 52px;
112
111
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
113
- --rs-font-family-ui: var(--ktl-font-family-inter);
114
112
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
115
113
  }
116
114
 
package/out/components/typography/index.css CHANGED
@@ -17,7 +17,6 @@
17
17
  --ktl-mobile-dropdown-list-z-index: 907;
18
18
  --ktl-header-height-mobile: 52px;
19
19
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
- --rs-font-family-ui: var(--ktl-font-family-inter);
21
20
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
22
21
  }
23
22
 
@@ -190,9 +189,4 @@
190
189
 
191
190
  .ktl-text-3_theme_dark {
192
191
  color: #fff;
193
- }
194
-
195
- :focus-visible, :focus[data-focus-method=key] {
196
- outline: none;
197
- box-shadow: var(--ktl-focus-outline);
198
- }
192
+ }
package/out/components/youtube-player/index.css CHANGED
@@ -17,7 +17,6 @@
17
17
  --ktl-mobile-dropdown-list-z-index: 907;
18
18
  --ktl-header-height-mobile: 52px;
19
19
  --ktl-font-family-inter: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
20
- --rs-font-family-ui: var(--ktl-font-family-inter);
21
20
  --ktl-focus-outline: rgba(107,87,255,.8) 0 0 0 4px;
22
21
  }
23
22
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@jetbrains/kotlin-web-site-ui",
3
3
  "description": "UI components for Kotlin web sites development",
4
- "version": "4.8.0-alpha.8",
4
+ "version": "4.8.0-dropms.1",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "files": [