@aotearoan/neon 5.0.2 → 5.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.
- package/dist/@aotearoan/components/feedback/linear-progress/NeonLinearProgress.d.ts +60 -0
- package/dist/@aotearoan/components/feedback/linear-progress/NeonLinearProgress.spec.d.ts +1 -0
- package/dist/@aotearoan/components/user-input/input/NeonInput.d.ts +4 -0
- package/dist/@aotearoan/components.d.ts +2 -1
- package/dist/@aotearoan/neon.common.js +233 -66
- package/dist/@aotearoan/neon.umd.js +233 -66
- package/dist/@aotearoan/neon.umd.min.js +3 -3
- package/package.json +1 -1
- package/src/sass/_input.scss +9 -0
- package/src/sass/_linear-progress.scss +69 -0
- package/src/sass/_note.scss +4 -1
- package/src/sass/colors/_button.scss +2 -2
- package/src/sass/colors/_input.scss +4 -0
- package/src/sass/colors/_linear-progress.scss +37 -0
- package/src/sass/colors/_note.scss +4 -4
- package/src/sass/colors/_toggle-chip.scss +1 -1
- package/src/sass/colors/color-components.scss +6 -1
- package/src/sass/common.scss +7 -1
- package/themes/classic/dark.scss +3 -2
- package/themes/classic/light.scss +3 -2
- package/themes/classic/theme.scss +7 -2
- package/themes/sharp/dark.scss +3 -2
- package/themes/sharp/light.scss +3 -2
- package/themes/sharp/theme.scss +6 -1
- package/themes/smooth/dark.scss +3 -2
- package/themes/smooth/light.scss +3 -2
- package/themes/smooth/theme.scss +7 -2
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aotearoan/neon",
|
|
3
3
|
"description": "Neon is a lightweight design library of VueJS components with minimal dependencies. It supports light and dark modes and can be extended to support multiple themes",
|
|
4
|
-
"version": "5.0
|
|
4
|
+
"version": "5.2.0",
|
|
5
5
|
"main": "dist/@aotearoan/neon.umd.js",
|
|
6
6
|
"types": "dist/@aotearoan/components.d.ts",
|
|
7
7
|
"files": [
|
package/src/sass/_input.scss
CHANGED
|
@@ -73,6 +73,15 @@
|
|
|
73
73
|
font-family: $neon-body-font-family;
|
|
74
74
|
letter-spacing: $neon-letter-spacing-s;
|
|
75
75
|
}
|
|
76
|
+
|
|
77
|
+
&-counter {
|
|
78
|
+
position: absolute;
|
|
79
|
+
bottom: 2 * $neon-base-space;
|
|
80
|
+
right: 2 * $neon-base-space;
|
|
81
|
+
user-select: none;
|
|
82
|
+
font-size: $neon-font-size-s;
|
|
83
|
+
letter-spacing: $neon-letter-spacing-s;
|
|
84
|
+
}
|
|
76
85
|
}
|
|
77
86
|
|
|
78
87
|
&:not(.neon-input--placeholder-visible) {
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@mixin neon-linear-progress-import {
|
|
2
|
+
.neon-linear-progress {
|
|
3
|
+
user-select: none;
|
|
4
|
+
flex-direction: row;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
|
|
8
|
+
&__bar {
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
border-radius: $neon-border-radius;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&,
|
|
14
|
+
&__container,
|
|
15
|
+
&__bar,
|
|
16
|
+
&__indicator {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex: 1 0 auto;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__icon {
|
|
22
|
+
width: $neon-font-size-l;
|
|
23
|
+
height: $neon-font-size-l;
|
|
24
|
+
margin-left: 2 * $neon-base-space;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&--s {
|
|
28
|
+
.neon-linear-progress__bar,
|
|
29
|
+
.neon-linear-progress__indicator {
|
|
30
|
+
height: $neon-base-space;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--m {
|
|
35
|
+
.neon-linear-progress__bar,
|
|
36
|
+
.neon-linear-progress__indicator {
|
|
37
|
+
height: 2 * $neon-base-space;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&--l {
|
|
42
|
+
.neon-linear-progress__bar,
|
|
43
|
+
.neon-linear-progress__indicator {
|
|
44
|
+
height: 3 * $neon-base-space;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&__indicator {
|
|
49
|
+
align-items: flex-end;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
border-top-left-radius: $neon-border-radius;
|
|
52
|
+
border-bottom-left-radius: $neon-border-radius;
|
|
53
|
+
border-top-right-radius: $neon-border-radius-progress-indicator;
|
|
54
|
+
border-bottom-right-radius: $neon-border-radius-progress-indicator;
|
|
55
|
+
transition: all 25ms ease-in-out;
|
|
56
|
+
|
|
57
|
+
&--completed {
|
|
58
|
+
border-top-right-radius: $neon-border-radius;
|
|
59
|
+
border-bottom-right-radius: $neon-border-radius;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&__output {
|
|
64
|
+
margin-left: 2 * $neon-base-space;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
font-variant: tabular-nums;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
package/src/sass/_note.scss
CHANGED
|
@@ -23,7 +23,10 @@
|
|
|
23
23
|
flex-direction: row;
|
|
24
24
|
width: 100%;
|
|
25
25
|
margin: 0;
|
|
26
|
-
border-radius:
|
|
26
|
+
border-top-left-radius: 0;
|
|
27
|
+
border-bottom-left-radius: 0;
|
|
28
|
+
border-top-right-radius: $neon-border-radius;
|
|
29
|
+
border-bottom-right-radius: $neon-border-radius;
|
|
27
30
|
|
|
28
31
|
span {
|
|
29
32
|
display: inline;
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
&:active:not(:disabled),
|
|
10
10
|
&:hover:not(:disabled) {
|
|
11
11
|
background: linear-gradient(
|
|
12
|
-
$neon-background-gradient-angle
|
|
13
|
-
$from-color $neon-background-gradient-offset,
|
|
12
|
+
$neon-background-gradient-angle,
|
|
13
|
+
$from-color $neon-background-gradient-offset-hover,
|
|
14
14
|
$to-color 100%
|
|
15
15
|
);
|
|
16
16
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@mixin neon-linear-progress-color-import {
|
|
2
|
+
.neon-linear-progress {
|
|
3
|
+
@each $color, $palette in $neon-functional-colors {
|
|
4
|
+
&.neon-linear-progress--#{$color} {
|
|
5
|
+
$progress-color: map-get($palette, $neon-base-color);
|
|
6
|
+
|
|
7
|
+
.neon-linear-progress__bar {
|
|
8
|
+
background: rgba($progress-color, $neon-opacity-background-progress);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.neon-linear-progress__indicator {
|
|
12
|
+
background: $progress-color;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@each $alternateColor, $alternatePalette in $neon-functional-colors {
|
|
16
|
+
&.neon-linear-progress--alternate-color-#{$alternateColor} {
|
|
17
|
+
.neon-linear-progress__indicator {
|
|
18
|
+
//@if ($neon-mode == light) {
|
|
19
|
+
background: linear-gradient(
|
|
20
|
+
90deg,
|
|
21
|
+
map-get($alternatePalette, $neon-color-gradient-alternate) 0%,
|
|
22
|
+
$progress-color 100%
|
|
23
|
+
);
|
|
24
|
+
//} @else {
|
|
25
|
+
// background: linear-gradient(
|
|
26
|
+
// 90deg,
|
|
27
|
+
// map-get($alternatePalette, $neon-color-gradient-alternate) 0%,
|
|
28
|
+
// $progress-color 100%
|
|
29
|
+
// );
|
|
30
|
+
//}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
@each $color, $palette in $neon-functional-colors {
|
|
10
10
|
&--#{$color} {
|
|
11
|
-
background-color:
|
|
12
|
-
border: $neon-border-width-note $neon-border-style map-get($palette, $neon-border-color-note);
|
|
11
|
+
background-color: $neon-background-color-note;
|
|
12
|
+
border-left: $neon-border-width-note $neon-border-style map-get($palette, $neon-border-color-note);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -34,6 +34,6 @@ blockquote {
|
|
|
34
34
|
color: $neon-color-text;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
background-color:
|
|
38
|
-
border: $neon-border-width-note $neon-border-style map-get($neon-primary-palette, $neon-border-color-note);
|
|
37
|
+
background-color: $neon-background-color-note;
|
|
38
|
+
border-left: $neon-border-width-note $neon-border-style map-get($neon-primary-palette, $neon-border-color-note);
|
|
39
39
|
}
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
@import 'toast';
|
|
141
|
-
@if index($neon-components,
|
|
141
|
+
@if index($neon-components, NeonAlert) {
|
|
142
142
|
@include neon-toast-color-import;
|
|
143
143
|
}
|
|
144
144
|
|
|
@@ -201,3 +201,8 @@
|
|
|
201
201
|
@if index($neon-components, NeonRangeSlider) {
|
|
202
202
|
@include neon-range-slider-color-import;
|
|
203
203
|
}
|
|
204
|
+
|
|
205
|
+
@import 'linear-progress';
|
|
206
|
+
@if index($neon-components, NeonLinearProgress) {
|
|
207
|
+
@include neon-linear-progress-color-import;
|
|
208
|
+
}
|
package/src/sass/common.scss
CHANGED
|
@@ -84,6 +84,7 @@ $neon-component-dependencies: (
|
|
|
84
84
|
NeonExpansionIndicator,
|
|
85
85
|
NeonIcon,
|
|
86
86
|
NeonLink],
|
|
87
|
+
NeonLinearProgress: [NeonIcon],
|
|
87
88
|
NeonPage: [],
|
|
88
89
|
NeonPassword: [NeonInput,
|
|
89
90
|
NeonIcon],
|
|
@@ -326,7 +327,7 @@ $neon-error-palette: generate-palette($neon-color-error) !default;
|
|
|
326
327
|
}
|
|
327
328
|
|
|
328
329
|
@import 'toast';
|
|
329
|
-
@if index($neon-components,
|
|
330
|
+
@if index($neon-components, NeonAlert) {
|
|
330
331
|
@include neon-toast-import;
|
|
331
332
|
}
|
|
332
333
|
|
|
@@ -394,3 +395,8 @@ $neon-error-palette: generate-palette($neon-color-error) !default;
|
|
|
394
395
|
@if index($neon-components, NeonDialog) {
|
|
395
396
|
@include neon-dialog-import;
|
|
396
397
|
}
|
|
398
|
+
|
|
399
|
+
@import 'linear-progress';
|
|
400
|
+
@if index($neon-components, NeonLinearProgress) {
|
|
401
|
+
@include neon-linear-progress-import;
|
|
402
|
+
}
|
package/themes/classic/dark.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$neon-mode: 'dark';
|
|
2
|
+
|
|
1
3
|
$neon-base-color: l1 !default;
|
|
2
4
|
|
|
3
5
|
$neon-background-color-card: $neon-color-neutral-d4 !default;
|
|
@@ -73,8 +75,7 @@ $neon-color-label: $neon-base-color !default;
|
|
|
73
75
|
|
|
74
76
|
/* note */
|
|
75
77
|
$neon-border-color-note: $neon-base-color !default;
|
|
76
|
-
$neon-background-color-note:
|
|
77
|
-
$neon-background-opacity-note: 0.125 !default;
|
|
78
|
+
$neon-background-color-note: rgba($neon-color-high-contrast-d3, 0.5) !default;
|
|
78
79
|
$neon-color-note: $neon-color-text !default;
|
|
79
80
|
|
|
80
81
|
/* link */
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$neon-mode: 'light';
|
|
2
|
+
|
|
1
3
|
$neon-base-color: d1 !default;
|
|
2
4
|
|
|
3
5
|
$neon-background-color-card: $neon-color-neutral-l5 !default;
|
|
@@ -72,8 +74,7 @@ $neon-color-label: $neon-base-color !default;
|
|
|
72
74
|
|
|
73
75
|
/* note */
|
|
74
76
|
$neon-border-color-note: $neon-base-color !default;
|
|
75
|
-
$neon-background-color-note:
|
|
76
|
-
$neon-background-opacity-note: 0.125 !default;
|
|
77
|
+
$neon-background-color-note: rgba($neon-color-high-contrast-l3, 0.5) !default;
|
|
77
78
|
$neon-color-note: $neon-color-text !default;
|
|
78
79
|
|
|
79
80
|
/* link */
|
|
@@ -107,9 +107,10 @@ $neon-logo-width-multiplier: 3.84776 !default; // logo ratio of width to height
|
|
|
107
107
|
/* components */
|
|
108
108
|
|
|
109
109
|
/* gradient config */
|
|
110
|
-
$neon-background-gradient-angle:
|
|
110
|
+
$neon-background-gradient-angle: 90deg !default;
|
|
111
111
|
/* % offset where background gradient switches to alternate-color */
|
|
112
112
|
$neon-background-gradient-offset: 33% !default;
|
|
113
|
+
$neon-background-gradient-offset-hover: 50% !default;
|
|
113
114
|
|
|
114
115
|
/* smaller sizes for labels only */
|
|
115
116
|
$neon-size-xxs: 4 * $neon-base-space !default;
|
|
@@ -194,7 +195,7 @@ $neon-border-radius-switch: 4 * $neon-base-space !default;
|
|
|
194
195
|
$neon-border-radius-switch-indicator: 50% !default;
|
|
195
196
|
|
|
196
197
|
/* note */
|
|
197
|
-
$neon-border-width-note:
|
|
198
|
+
$neon-border-width-note: 6px !default;
|
|
198
199
|
|
|
199
200
|
/* slider & range slider */
|
|
200
201
|
$neon-height-slider-track: 8px !default;
|
|
@@ -230,4 +231,8 @@ $neon-max-width-dialog: 250px !default;
|
|
|
230
231
|
$neon-min-height-dialog: 275px !default;
|
|
231
232
|
$neon-font-style-dialog: italic !default;
|
|
232
233
|
|
|
234
|
+
/* progress linear */
|
|
235
|
+
$neon-opacity-background-progress: 0.0625 !default;
|
|
236
|
+
$neon-border-radius-progress-indicator: $neon-base-space !default;
|
|
237
|
+
|
|
233
238
|
@import '../../src/sass/common';
|
package/themes/sharp/dark.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$neon-mode: 'dark';
|
|
2
|
+
|
|
1
3
|
$neon-base-color: l1 !default;
|
|
2
4
|
|
|
3
5
|
$neon-background-color-card: $neon-color-neutral-d5 !default;
|
|
@@ -71,8 +73,7 @@ $neon-color-label: $neon-base-color !default;
|
|
|
71
73
|
|
|
72
74
|
/* note */
|
|
73
75
|
$neon-border-color-note: $neon-base-color !default;
|
|
74
|
-
$neon-background-color-note:
|
|
75
|
-
$neon-background-opacity-note: 0 !default;
|
|
76
|
+
$neon-background-color-note: $neon-color-high-contrast-d1 !default;
|
|
76
77
|
$neon-color-note: $neon-color-text !default;
|
|
77
78
|
|
|
78
79
|
/* link */
|
package/themes/sharp/light.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$neon-mode: 'light';
|
|
2
|
+
|
|
1
3
|
$neon-base-color: d1 !default;
|
|
2
4
|
|
|
3
5
|
$neon-background-color-card: $neon-color-neutral-l5 !default;
|
|
@@ -70,8 +72,7 @@ $neon-color-label: $neon-base-color !default;
|
|
|
70
72
|
|
|
71
73
|
/* note */
|
|
72
74
|
$neon-border-color-note: $neon-base-color !default;
|
|
73
|
-
$neon-background-color-note:
|
|
74
|
-
$neon-background-opacity-note: 0 !default;
|
|
75
|
+
$neon-background-color-note: $neon-color-high-contrast-l3 !default;
|
|
75
76
|
$neon-color-note: $neon-color-text !default;
|
|
76
77
|
|
|
77
78
|
/* link */
|
package/themes/sharp/theme.scss
CHANGED
|
@@ -110,6 +110,7 @@ $neon-logo-width-multiplier: 3.84776 !default; // logo ratio of width to height
|
|
|
110
110
|
$neon-background-gradient-angle: 90deg !default;
|
|
111
111
|
/* % offset where background gradient switches to alternate-color */
|
|
112
112
|
$neon-background-gradient-offset: 33% !default;
|
|
113
|
+
$neon-background-gradient-offset-hover: 50% !default;
|
|
113
114
|
|
|
114
115
|
/* smaller sizes for labels only */
|
|
115
116
|
$neon-size-xxs: 4 * $neon-base-space !default;
|
|
@@ -193,7 +194,7 @@ $neon-border-radius-switch: 0 !default;
|
|
|
193
194
|
$neon-border-radius-switch-indicator: 0 !default;
|
|
194
195
|
|
|
195
196
|
/* note */
|
|
196
|
-
$neon-border-width-note:
|
|
197
|
+
$neon-border-width-note: 6px !default;
|
|
197
198
|
|
|
198
199
|
/* slider & range slider */
|
|
199
200
|
$neon-height-slider-track: 8px !default;
|
|
@@ -230,4 +231,8 @@ $neon-max-width-dialog: 250px !default;
|
|
|
230
231
|
$neon-min-height-dialog: 275px !default;
|
|
231
232
|
$neon-font-style-dialog: italic !default;
|
|
232
233
|
|
|
234
|
+
/* progress linear */
|
|
235
|
+
$neon-opacity-background-progress: 0.0625 !default;
|
|
236
|
+
$neon-border-radius-progress-indicator: 0 !default;
|
|
237
|
+
|
|
233
238
|
@import '../../src/sass/common';
|
package/themes/smooth/dark.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$neon-mode: 'dark';
|
|
2
|
+
|
|
1
3
|
$neon-base-color: l1 !default;
|
|
2
4
|
|
|
3
5
|
$neon-background-color-card: $neon-color-neutral-d4 !default;
|
|
@@ -75,8 +77,7 @@ $neon-color-label: $neon-base-color !default;
|
|
|
75
77
|
|
|
76
78
|
/* note */
|
|
77
79
|
$neon-border-color-note: $neon-base-color !default;
|
|
78
|
-
$neon-background-color-note: $neon-
|
|
79
|
-
$neon-background-opacity-note: 0.125 !default;
|
|
80
|
+
$neon-background-color-note: rgba($neon-color-high-contrast-d3, 0.5) !default;
|
|
80
81
|
$neon-color-note: $neon-color-text !default;
|
|
81
82
|
|
|
82
83
|
/* link */
|
package/themes/smooth/light.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
$neon-mode: 'light';
|
|
2
|
+
|
|
1
3
|
$neon-base-color: d1 !default;
|
|
2
4
|
|
|
3
5
|
$neon-background-color-card: $neon-color-high-contrast-l5 !default;
|
|
@@ -73,8 +75,7 @@ $neon-color-label: $neon-base-color !default;
|
|
|
73
75
|
|
|
74
76
|
/* note */
|
|
75
77
|
$neon-border-color-note: $neon-base-color !default;
|
|
76
|
-
$neon-background-color-note: $neon-
|
|
77
|
-
$neon-background-opacity-note: 0.25 !default;
|
|
78
|
+
$neon-background-color-note: rgba($neon-color-high-contrast-l3, 0.5) !default;
|
|
78
79
|
$neon-color-note: $neon-color-text !default;
|
|
79
80
|
|
|
80
81
|
/* link */
|
package/themes/smooth/theme.scss
CHANGED
|
@@ -107,9 +107,10 @@ $neon-logo-width-multiplier: 3.84776 !default; // logo ratio of width to height
|
|
|
107
107
|
/* components */
|
|
108
108
|
|
|
109
109
|
/* gradient config */
|
|
110
|
-
$neon-background-gradient-angle:
|
|
110
|
+
$neon-background-gradient-angle: 90deg !default;
|
|
111
111
|
/* % offset where background gradient switches to alternate-color */
|
|
112
112
|
$neon-background-gradient-offset: 33% !default;
|
|
113
|
+
$neon-background-gradient-offset-hover: 50% !default;
|
|
113
114
|
|
|
114
115
|
/* smaller sizes for labels only */
|
|
115
116
|
$neon-size-xxs: 4 * $neon-base-space !default;
|
|
@@ -193,7 +194,7 @@ $neon-border-radius-switch: 4 * $neon-base-space !default;
|
|
|
193
194
|
$neon-border-radius-switch-indicator: 50% !default;
|
|
194
195
|
|
|
195
196
|
/* note */
|
|
196
|
-
$neon-border-width-note:
|
|
197
|
+
$neon-border-width-note: 6px !default;
|
|
197
198
|
|
|
198
199
|
/* slider & range slider */
|
|
199
200
|
$neon-height-slider-track: 8px !default;
|
|
@@ -229,4 +230,8 @@ $neon-max-width-dialog: 250px !default;
|
|
|
229
230
|
$neon-min-height-dialog: 275px !default;
|
|
230
231
|
$neon-font-style-dialog: italic !default;
|
|
231
232
|
|
|
233
|
+
/* progress linear */
|
|
234
|
+
$neon-opacity-background-progress: 0.0625 !default;
|
|
235
|
+
$neon-border-radius-progress-indicator: 2 * $neon-base-space !default;
|
|
236
|
+
|
|
232
237
|
@import '../../src/sass/common';
|