neo.mjs 6.10.1 → 6.10.3
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.
- package/apps/ServiceWorker.mjs +2 -2
- package/apps/learnneo/view/home/HeaderToolbar.mjs +47 -0
- package/apps/learnneo/view/home/MainContainer.mjs +32 -25
- package/apps/newwebsite/app.mjs +2 -2
- package/apps/newwebsite/view/{MainContainer.mjs → Viewport.mjs} +11 -11
- package/buildScripts/convertDesignTokens.mjs +1 -1
- package/examples/ServiceWorker.mjs +2 -2
- package/examples/tab/container/neo-config.json +1 -1
- package/package.json +3 -3
- package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md +18 -21
- package/resources/data/deck/learnneo/p/MainThreadAddonIntro.md +2 -2
- package/resources/data/deck/learnneo/t.json +3 -3
- package/resources/design-tokens/json/component.json +43 -7
- package/resources/design-tokens/json/core.json +45 -24
- package/resources/design-tokens/json/semantic.json +31 -1
- package/resources/scss/src/apps/learnneo/Viewport.scss +3 -3
- package/resources/scss/src/apps/learnneo/home/HeaderToolbar.scss +24 -0
- package/resources/scss/src/apps/learnneo/home/MainContainer.scss +7 -0
- package/resources/scss/src/apps/newwebsite/{MainContainer.scss → Viewport.scss} +1 -1
- package/resources/scss/src/component/Base.scss +26 -0
- package/resources/scss/theme-neo-light/design-tokens/Component.scss +12 -7
- package/resources/scss/theme-neo-light/design-tokens/Core.scss +67 -66
- package/resources/scss/theme-neo-light/design-tokens/Semantic.scss +11 -8
- package/resources/scss/theme-neo-light/tab/Strip.scss +3 -3
- package/resources/scss/theme-neo-light/tab/header/Button.scss +24 -13
- package/src/DefaultConfig.mjs +2 -2
- package/src/calendar/view/week/Component.mjs +64 -64
- package/src/component/Base.mjs +58 -14
- package/src/util/Array.mjs +2 -12
- package/src/worker/App.mjs +8 -2
- package/test/components/files/button/Base.mjs +41 -14
- package/test/components/files/form/field/Select.mjs +21 -29
- package/test/components/siesta.js +32 -2
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.learnneo-header-toolbar {
|
|
2
|
+
margin-bottom: 1px; // fakes a bottom border
|
|
3
|
+
|
|
4
|
+
.logo {
|
|
5
|
+
margin-left: 1em;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.neo-button {
|
|
9
|
+
margin-left: 10px;
|
|
10
|
+
|
|
11
|
+
&.no-text {
|
|
12
|
+
margin-left: 0;
|
|
13
|
+
width : 1.2em;
|
|
14
|
+
|
|
15
|
+
&.github-button {
|
|
16
|
+
margin-left: 5em;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.neo-button-glyph {
|
|
20
|
+
font-size: 24px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -25,3 +25,29 @@
|
|
|
25
25
|
top : -10000px;
|
|
26
26
|
z-index : 1000;
|
|
27
27
|
}
|
|
28
|
+
|
|
29
|
+
.neo-masked {
|
|
30
|
+
position : relative;
|
|
31
|
+
|
|
32
|
+
.neo-load-mask {
|
|
33
|
+
position : absolute;
|
|
34
|
+
inset : 0;
|
|
35
|
+
background-color : inherit;
|
|
36
|
+
z-index : 4;
|
|
37
|
+
display : grid;
|
|
38
|
+
justify-content : center;
|
|
39
|
+
align-content : center;
|
|
40
|
+
overflow : clip;
|
|
41
|
+
|
|
42
|
+
.neo-load-mask-body {
|
|
43
|
+
display : flex;
|
|
44
|
+
flex-flow : row nowrap;
|
|
45
|
+
gap : 0.7em;
|
|
46
|
+
|
|
47
|
+
.fa-spinner {
|
|
48
|
+
width : 1em;
|
|
49
|
+
height : 1em;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
--cmp-breadcrumb-currentpage : var(--sem-color-fg-primary-base);
|
|
4
4
|
--cmp-breadcrumb-gap : var(--sem-spacing-xxsmall);
|
|
5
5
|
--cmp-breadcrumb-pagelevel : var(--sem-color-fg-neutral-default);
|
|
6
|
-
|
|
7
6
|
--cmp-button-borderradius : var(--sem-borderradius-large);
|
|
8
7
|
--cmp-button-borderwidth : 1px;
|
|
9
8
|
--cmp-button-gap : var(--sem-spacing-xxsmall);
|
|
@@ -15,8 +14,6 @@
|
|
|
15
14
|
--cmp-button-ghost-fg-default : var(--sem-color-fg-neutral-contrast);
|
|
16
15
|
--cmp-button-ghost-fg-disabled : var(--sem-color-fg-neutral-disabled);
|
|
17
16
|
--cmp-button-height : var(--height-48);
|
|
18
|
-
--cmp-button-spacinghorizontal : var(--sem-spacing-medium);
|
|
19
|
-
|
|
20
17
|
--cmp-button-primary-bg-active : var(--sem-color-bg-primary-active);
|
|
21
18
|
--cmp-button-primary-bg-default : var(--sem-color-bg-primary-default);
|
|
22
19
|
--cmp-button-primary-bg-disabled : var(--sem-color-bg-primary-disabled);
|
|
@@ -24,7 +21,6 @@
|
|
|
24
21
|
--cmp-button-primary-bg-loading : var(--sem-color-bg-primary-background);
|
|
25
22
|
--cmp-button-primary-fg-default : var(--sem-color-fg-neutral-contrast);
|
|
26
23
|
--cmp-button-primary-fg-disabled : var(--sem-color-fg-neutral-disabled);
|
|
27
|
-
|
|
28
24
|
--cmp-button-secondary-bg-active : var(--sem-color-bg-neutral-active);
|
|
29
25
|
--cmp-button-secondary-bg-default : transparent;
|
|
30
26
|
--cmp-button-secondary-bg-disabled : transparent;
|
|
@@ -61,8 +57,17 @@
|
|
|
61
57
|
--cmp-sidenav-item-gap : var(--sem-spacing-small);
|
|
62
58
|
--cmp-sidenav-item-height : var(--sem-height-xlarge);
|
|
63
59
|
--cmp-sidenav-item-spacex : var(--sem-spacing-medium);
|
|
64
|
-
--cmp-sidenav-spacex : var(--sem-spacing-
|
|
60
|
+
--cmp-sidenav-spacex : var(--sem-spacing-xsmall);
|
|
65
61
|
--cmp-sidenav-spacey : var(--sem-spacing-xsmall);
|
|
66
|
-
|
|
67
|
-
--cmp-tab-
|
|
62
|
+
|
|
63
|
+
--cmp-tab-borderradius : var(--sem-borderradius-large);
|
|
64
|
+
--cmp-tab-gap : var(--sem-spacing-xsmall);
|
|
65
|
+
--cmp-tab-height : var(--sem-height-xxlarge);
|
|
66
|
+
--cmp-tab-spacinghorizontal : var(--sem-spacing-medium);
|
|
67
|
+
--cmp-tab-strip-height : 3px;
|
|
68
|
+
--cmp-tab-strip-selected : var(--sem-color-fg-neutral-contrast);
|
|
69
|
+
--cmp-tab-strip-unselected : transparent;
|
|
70
|
+
--cmp-tab-unselected-bg-active : var(--sem-color-bg-neutral-active);
|
|
71
|
+
--cmp-tab-unselected-bg-default : transparent;
|
|
72
|
+
--cmp-tab-unselected-bg-hover : var(--sem-color-bg-neutral-hover);
|
|
68
73
|
}
|
|
@@ -1,68 +1,69 @@
|
|
|
1
1
|
:root .neo-theme-neo-light {
|
|
2
|
-
--black
|
|
3
|
-
--borderradius-0
|
|
4
|
-
--borderradius-4
|
|
5
|
-
--borderradius-8
|
|
6
|
-
--core-fontfamily-mono
|
|
7
|
-
--core-fontfamily-sans
|
|
8
|
-
--core-fontfamily-serif
|
|
9
|
-
--core-fontsize-body
|
|
10
|
-
--core-fontsize-
|
|
11
|
-
--core-fontsize-
|
|
12
|
-
--core-
|
|
13
|
-
--core-fontweight-
|
|
14
|
-
--core-fontweight-regular
|
|
15
|
-
--core-fontweight-semibold
|
|
16
|
-
--core-lineheight-headline
|
|
17
|
-
--core-lineheight-paragraph
|
|
18
|
-
--gray-100
|
|
19
|
-
--gray-200
|
|
20
|
-
--gray-300
|
|
21
|
-
--gray-400
|
|
22
|
-
--gray-50
|
|
23
|
-
--gray-500
|
|
24
|
-
--gray-600
|
|
25
|
-
--gray-700
|
|
26
|
-
--gray-800
|
|
27
|
-
--gray-900
|
|
28
|
-
--green-
|
|
29
|
-
--green-
|
|
30
|
-
--green-
|
|
31
|
-
--green-
|
|
32
|
-
--green-
|
|
33
|
-
--green-500
|
|
34
|
-
--green-600
|
|
35
|
-
--green-700
|
|
36
|
-
--green-800
|
|
37
|
-
--green-900
|
|
38
|
-
--height-16
|
|
39
|
-
--height-2
|
|
40
|
-
--height-32
|
|
41
|
-
--height-4
|
|
42
|
-
--height-48
|
|
43
|
-
--height-
|
|
44
|
-
--
|
|
45
|
-
--purple-
|
|
46
|
-
--purple-
|
|
47
|
-
--purple-
|
|
48
|
-
--purple-
|
|
49
|
-
--purple-
|
|
50
|
-
--purple-
|
|
51
|
-
--purple-
|
|
52
|
-
--purple-
|
|
53
|
-
--
|
|
54
|
-
--spacing-
|
|
55
|
-
--spacing-
|
|
56
|
-
--spacing-
|
|
57
|
-
--spacing-
|
|
58
|
-
--spacing-
|
|
59
|
-
--spacing-
|
|
60
|
-
--spacing-
|
|
61
|
-
--spacing-
|
|
62
|
-
--spacing-
|
|
63
|
-
--spacing-
|
|
64
|
-
--spacing-
|
|
65
|
-
--spacing-
|
|
66
|
-
--
|
|
67
|
-
--
|
|
2
|
+
--black : #000000;
|
|
3
|
+
--borderradius-0 : 0px;
|
|
4
|
+
--borderradius-4 : 4px;
|
|
5
|
+
--borderradius-8 : 8px;
|
|
6
|
+
--core-fontfamily-mono : 'Source Code Pro';
|
|
7
|
+
--core-fontfamily-sans : 'Source Sans 3';
|
|
8
|
+
--core-fontfamily-serif : 'Source Serif Pro';
|
|
9
|
+
--core-fontsize-body : 16px;
|
|
10
|
+
--core-fontsize-h1 : 2.5rem;
|
|
11
|
+
--core-fontsize-h2 : 1.75rem;
|
|
12
|
+
--core-fontweight-bold : 700;
|
|
13
|
+
--core-fontweight-medium : 500;
|
|
14
|
+
--core-fontweight-regular : 400;
|
|
15
|
+
--core-fontweight-semibold : 600;
|
|
16
|
+
--core-lineheight-headline : 1.2;
|
|
17
|
+
--core-lineheight-paragraph: 1.5;
|
|
18
|
+
--gray-100 : #F0F2F0;
|
|
19
|
+
--gray-200 : #D3D7D2;
|
|
20
|
+
--gray-300 : #B6BDB4;
|
|
21
|
+
--gray-400 : #99A295;
|
|
22
|
+
--gray-50 : #fafafa;
|
|
23
|
+
--gray-500 : #7C8877;
|
|
24
|
+
--gray-600 : #606A5D;
|
|
25
|
+
--gray-700 : #454B42;
|
|
26
|
+
--gray-800 : #292D28;
|
|
27
|
+
--gray-900 : #0E0F0D;
|
|
28
|
+
--green-100 : #{lighten(#29F5AA, 30%)};
|
|
29
|
+
--green-200 : #{lighten(#29F5AA, 25%)};
|
|
30
|
+
--green-300 : #{lighten(#29F5AA, 20%)};
|
|
31
|
+
--green-400 : #{lighten(#29F5AA, 15%)};
|
|
32
|
+
--green-50 : #{lighten(#29F5AA, 35%)};
|
|
33
|
+
--green-500 : #29F5AA;
|
|
34
|
+
--green-600 : #{darken(#29F5AA, 10%)};
|
|
35
|
+
--green-700 : #{darken(#29F5AA, 20%)};
|
|
36
|
+
--green-800 : #{darken(#29F5AA, 30%)};
|
|
37
|
+
--green-900 : #{darken(#29F5AA, 40%)};
|
|
38
|
+
--height-16 : 16px;
|
|
39
|
+
--height-2 : 2px;
|
|
40
|
+
--height-32 : 32px;
|
|
41
|
+
--height-4 : 4px;
|
|
42
|
+
--height-48 : 48px;
|
|
43
|
+
--height-56 : 56px;
|
|
44
|
+
--height-8 : 8px;
|
|
45
|
+
--purple-100 : #efe3ff;
|
|
46
|
+
--purple-200 : #d0aaff;
|
|
47
|
+
--purple-300 : #b071ff;
|
|
48
|
+
--purple-400 : #9039ff;
|
|
49
|
+
--purple-500 : #7100ff;
|
|
50
|
+
--purple-600 : #5800c6;
|
|
51
|
+
--purple-700 : #3f008e;
|
|
52
|
+
--purple-800 : #260055;
|
|
53
|
+
--purple-900 : #0d001c;
|
|
54
|
+
--spacing-12 : 12px;
|
|
55
|
+
--spacing-16 : 16px;
|
|
56
|
+
--spacing-2 : 2px;
|
|
57
|
+
--spacing-20 : 20px;
|
|
58
|
+
--spacing-24 : 24px;
|
|
59
|
+
--spacing-32 : 32px;
|
|
60
|
+
--spacing-4 : 4px;
|
|
61
|
+
--spacing-40 : 40px;
|
|
62
|
+
--spacing-48 : 48px;
|
|
63
|
+
--spacing-64 : 64px;
|
|
64
|
+
--spacing-8 : 8px;
|
|
65
|
+
--spacing-80 : 80px;
|
|
66
|
+
--spacing-96 : 96px;
|
|
67
|
+
--Transparent : rgba(255,255,255,0);
|
|
68
|
+
--white : #FFFFFF;
|
|
68
69
|
}
|
|
@@ -2,25 +2,21 @@
|
|
|
2
2
|
--sem-borderradius-large : var(--borderradius-8);
|
|
3
3
|
--sem-borderradius-medium : var(--borderradius-4);
|
|
4
4
|
--sem-borderradius-none : var(--borderradius-0);
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
--sem-borderwidth-focus : 3px;
|
|
6
|
+
--sem-color-bg-neutral-active : var(--gray-300);
|
|
7
7
|
--sem-color-bg-neutral-default : var(--gray-50);
|
|
8
|
-
--sem-color-bg-neutral-hover : var(--gray-100);
|
|
9
|
-
--sem-color-bg-neutral-active : var(--gray-200);
|
|
10
8
|
--sem-color-bg-neutral-disabled : var(--gray-200);
|
|
11
9
|
--sem-color-bg-neutral-highlighted : var(--white);
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
--sem-color-bg-neutral-hover : var(--gray-200);
|
|
14
11
|
--sem-color-bg-primary-active : var(--green-600);
|
|
15
12
|
--sem-color-bg-primary-background : var(--green-50);
|
|
16
13
|
--sem-color-bg-primary-default : var(--green-400);
|
|
17
14
|
--sem-color-bg-primary-disabled : var(--gray-200);
|
|
18
15
|
--sem-color-bg-primary-hover : var(--green-500);
|
|
19
|
-
|
|
20
16
|
--sem-color-border-contrast : var(--black);
|
|
21
17
|
--sem-color-border-default : var(--gray-200);
|
|
18
|
+
--sem-color-border-focus : #5595F5;
|
|
22
19
|
--sem-color-border-subtle : var(--gray-100);
|
|
23
|
-
|
|
24
20
|
--sem-color-fg-neutral-contrast : var(--black);
|
|
25
21
|
--sem-color-fg-neutral-default : var(--gray-900);
|
|
26
22
|
--sem-color-fg-neutral-disabled : var(--gray-300);
|
|
@@ -33,6 +29,7 @@
|
|
|
33
29
|
--sem-height-small : var(--height-8);
|
|
34
30
|
--sem-height-xlarge : var(--height-48);
|
|
35
31
|
--sem-height-xsmall : var(--height-4);
|
|
32
|
+
--sem-height-xxlarge : var(--height-56);
|
|
36
33
|
--sem-height-xxsmall : var(--height-2);
|
|
37
34
|
--sem-spacing-large : var(--spacing-20);
|
|
38
35
|
--sem-spacing-medium : var(--spacing-16);
|
|
@@ -61,4 +58,10 @@
|
|
|
61
58
|
--sem-typo-h2-fontSize : var(--core-fontsize-h2);
|
|
62
59
|
--sem-typo-h2-fontWeight : var(--core-fontweight-semibold);
|
|
63
60
|
--sem-typo-h2-lineHeight : var(--core-lineheight-headline);
|
|
61
|
+
--sem-typo-label-medium-fontFamily : var(--core-fontfamily-sans);
|
|
62
|
+
--sem-typo-label-medium-fontSize : var(--core-fontsize-body);
|
|
63
|
+
--sem-typo-label-medium-fontWeight : var(--core-fontweight-medium);
|
|
64
|
+
--sem-typo-label-regular-fontFamily : var(--core-fontfamily-sans);
|
|
65
|
+
--sem-typo-label-regular-fontSize : var(--core-fontsize-body);
|
|
66
|
+
--sem-typo-label-regular-fontWeight : var(--core-fontweight-regular);
|
|
64
67
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:root .neo-theme-neo-light { // .neo-tab-strip
|
|
2
|
-
--tab-indicator-background-color-active:
|
|
3
|
-
--tab-strip-background-color :
|
|
4
|
-
--tab-strip-height :
|
|
2
|
+
--tab-indicator-background-color-active: var(--cmp-tab-strip-selected);
|
|
3
|
+
--tab-strip-background-color : transparent;
|
|
4
|
+
--tab-strip-height : var(--cmp-tab-strip-height);
|
|
5
5
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
:root .neo-theme-neo-light { // .neo-tab-header-button
|
|
2
|
-
--tab-button-background-color :
|
|
3
|
-
--tab-button-background-color-active :
|
|
4
|
-
--tab-button-background-color-disabled :
|
|
5
|
-
--tab-button-background-color-hover :
|
|
2
|
+
--tab-button-background-color : var(--cmp-tab-unselected-bg-default);
|
|
3
|
+
--tab-button-background-color-active : var(--cmp-tab-unselected-bg-active);
|
|
4
|
+
--tab-button-background-color-disabled : transparent;
|
|
5
|
+
--tab-button-background-color-hover : var(--cmp-tab-unselected-bg-hover);
|
|
6
6
|
--tab-button-background-image : none;
|
|
7
7
|
--tab-button-background-image-bottom : none;
|
|
8
8
|
--tab-button-background-image-left : none;
|
|
@@ -15,16 +15,27 @@
|
|
|
15
15
|
--tab-button-border-bottom : none;
|
|
16
16
|
--tab-button-border-bottom-pressed : none;
|
|
17
17
|
--tab-button-border-pressed : none;
|
|
18
|
-
--tab-button-border-radius :
|
|
18
|
+
--tab-button-border-radius : var(--cmp-tab-borderradius);
|
|
19
19
|
--tab-button-gap : 0;
|
|
20
|
-
--tab-button-glyph-color :
|
|
21
|
-
--tab-button-glyph-color-active :
|
|
22
|
-
--tab-button-glyph-color-hover :
|
|
23
|
-
--tab-button-glyph-color-pressed :
|
|
24
|
-
--tab-button-height :
|
|
25
|
-
--tab-button-height-pressed :
|
|
20
|
+
--tab-button-glyph-color : var(--sem-color-fg-neutral-subdued);
|
|
21
|
+
--tab-button-glyph-color-active : inherit;
|
|
22
|
+
--tab-button-glyph-color-hover : inherit;
|
|
23
|
+
--tab-button-glyph-color-pressed : inherit;
|
|
24
|
+
--tab-button-height : var(--cmp-tab-height);
|
|
25
|
+
--tab-button-height-pressed : var(--cmp-tab-height);
|
|
26
26
|
--tab-button-margin-bottom : 0;
|
|
27
|
-
--tab-button-padding : 7px
|
|
28
|
-
--tab-button-text-color :
|
|
27
|
+
--tab-button-padding : 7px var(--cmp-tab-spacinghorizontal) 6px;
|
|
28
|
+
--tab-button-text-color : var(--sem-color-fg-neutral-subdued);
|
|
29
29
|
--tab-button-text-transform : uppercase;
|
|
30
30
|
}
|
|
31
|
+
|
|
32
|
+
.neo-button-text {
|
|
33
|
+
font-size: var(--sem-typo-label-regular-fontSize) !important;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.pressed {
|
|
37
|
+
.neo-button-glyph, .neo-button-text {
|
|
38
|
+
color: var(--sem-color-fg-neutral-contrast) !important;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
package/src/DefaultConfig.mjs
CHANGED
|
@@ -236,12 +236,12 @@ const DefaultConfig = {
|
|
|
236
236
|
useVdomWorker: true,
|
|
237
237
|
/**
|
|
238
238
|
* buildScripts/injectPackageVersion.mjs will update this value
|
|
239
|
-
* @default '6.10.
|
|
239
|
+
* @default '6.10.3'
|
|
240
240
|
* @memberOf! module:Neo
|
|
241
241
|
* @name config.version
|
|
242
242
|
* @type String
|
|
243
243
|
*/
|
|
244
|
-
version: '6.10.
|
|
244
|
+
version: '6.10.3'
|
|
245
245
|
};
|
|
246
246
|
|
|
247
247
|
Object.assign(DefaultConfig, {
|