@aotearoan/neon 23.2.4 → 23.3.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 (34) hide show
  1. package/dist/common/enums/NeonFunctionalColor.cjs.js +1 -1
  2. package/dist/common/enums/NeonFunctionalColor.cjs.js.map +1 -1
  3. package/dist/common/enums/NeonFunctionalColor.es.js +1 -1
  4. package/dist/common/enums/NeonFunctionalColor.es.js.map +1 -1
  5. package/dist/components/user-input/field/NeonField.vue.cjs.js +1 -1
  6. package/dist/components/user-input/field/NeonField.vue.cjs.js.map +1 -1
  7. package/dist/components/user-input/field/NeonField.vue.es.js +3 -3
  8. package/dist/components/user-input/field/NeonField.vue.es.js.map +1 -1
  9. package/dist/components/user-input/number/NeonNumber.cjs.js +1 -1
  10. package/dist/components/user-input/number/NeonNumber.cjs.js.map +1 -1
  11. package/dist/components/user-input/number/NeonNumber.es.js +13 -9
  12. package/dist/components/user-input/number/NeonNumber.es.js.map +1 -1
  13. package/dist/components/user-input/number/NeonNumber.vue.cjs.js +1 -1
  14. package/dist/components/user-input/number/NeonNumber.vue.cjs.js.map +1 -1
  15. package/dist/components/user-input/number/NeonNumber.vue.es.js +7 -6
  16. package/dist/components/user-input/number/NeonNumber.vue.es.js.map +1 -1
  17. package/dist/src/common/enums/NeonFunctionalColor.d.ts +2 -0
  18. package/dist/src/components/user-input/number/NeonNumber.d.ts +85 -104
  19. package/package.json +1 -1
  20. package/src/sass/color-variables.scss +11 -0
  21. package/src/sass/components/_banner.scss +5 -0
  22. package/src/sass/components/_button.scss +4 -1
  23. package/src/sass/components/_date-picker.scss +2 -0
  24. package/src/sass/components/_icon.scss +16 -0
  25. package/src/sass/components/_menu.scss +17 -10
  26. package/src/sass/components/_mobile-menu.scss +6 -6
  27. package/src/sass/components/_select.scss +2 -0
  28. package/src/sass/components/_stepper.scss +0 -7
  29. package/src/sass/global/_base-html.scss +4 -0
  30. package/src/sass/global/_typography.scss +4 -0
  31. package/src/sass/includes/_palettes.scss +2 -0
  32. package/src/sass/palette.scss +10 -0
  33. package/src/sass/theme.scss +1 -0
  34. package/src/sass/variables.scss +42 -7
package/src/sass/palette.scss CHANGED
@@ -55,6 +55,16 @@
55
55
  --neon-rgb-brand-d3: 87, 40, 119;
56
56
  --neon-rgb-brand-d4: 56, 30, 74;
57
57
  --neon-rgb-brand-d5: 33, 25, 37;
58
+ --neon-rgb-accent-l5: 255, 238, 250;
59
+ --neon-rgb-accent-l4: 255, 204, 239;
60
+ --neon-rgb-accent-l3: 255, 171, 227;
61
+ --neon-rgb-accent-l2: 251, 140, 212;
62
+ --neon-rgb-accent-l1: 239, 108, 196;
63
+ --neon-rgb-accent-d1: 171, 41, 134;
64
+ --neon-rgb-accent-d2: 145, 40, 114;
65
+ --neon-rgb-accent-d3: 110, 31, 86;
66
+ --neon-rgb-accent-d4: 70, 25, 55;
67
+ --neon-rgb-accent-d5: 38, 23, 32;
58
68
  --neon-rgb-primary-l5: 245, 241, 255;
59
69
  --neon-rgb-primary-l4: 222, 214, 255;
60
70
  --neon-rgb-primary-l3: 197, 187, 255;
package/src/sass/theme.scss CHANGED
@@ -15,6 +15,7 @@ $neon-components: null !default;
15
15
  @include color-mixins.generate-color-classes('low-contrast');
16
16
  @include color-mixins.generate-color-classes('high-contrast');
17
17
  @include color-mixins.generate-color-classes('brand');
18
+ @include color-mixins.generate-color-classes('accent');
18
19
  @include color-mixins.generate-color-classes('primary');
19
20
  @include color-mixins.generate-color-classes('info');
20
21
  @include color-mixins.generate-color-classes('success');
package/src/sass/variables.scss CHANGED
@@ -2,12 +2,6 @@
2
2
  @import './palette';
3
3
  @import './color-variables';
4
4
 
5
- @include responsive.responsive(mobile-large) {
6
- body {
7
- font-size: 17px; // don't use rems here - body font must be defined in pixels
8
- }
9
- }
10
-
11
5
  .neon {
12
6
  /*********************
13
7
  * Global Variables
@@ -290,7 +284,11 @@
290
284
  /* menu */
291
285
  --neon-font-family-menu: var(--neon-font-family-body);
292
286
  --neon-font-weight-menu: var(--neon-font-weight-bold);
287
+ --neon-text-transform-menu: none;
293
288
  --neon-height-menu-indicator: 4rem;
289
+ --neon-font-size-menu-s: var(--neon-font-size-s);
290
+ --neon-font-size-menu-m: var(--neon-font-size-m);
291
+ --neon-font-size-menu-l: var(--neon-font-size-l);
294
292
 
295
293
  /* mobile menu */
296
294
  --neon-font-family-mobile-menu: var(--neon-font-family-body);
@@ -309,6 +307,7 @@
309
307
  --neon-border-radius-button-xl: var(--neon-border-radius);
310
308
  --neon-border-width-outline-button: 1rem;
311
309
  --neon-text-transform-button: none;
310
+ --neon-font-family-button: var(--neon-font-family-body);
312
311
  --neon-font-weight-button: var(--neon-font-weight-medium);
313
312
  --neon-letter-spacing-button: var(--neon-letter-spacing-m);
314
313
 
@@ -479,6 +478,7 @@
479
478
  --neon-rgb-neutral: var(--neon-rgb-neutral-l1);
480
479
  --neon-rgb-high-contrast: var(--neon-rgb-high-contrast-l1);
481
480
  --neon-rgb-brand: var(--neon-rgb-brand-l1);
481
+ --neon-rgb-accent: var(--neon-rgb-accent-l1);
482
482
  --neon-rgb-primary: var(--neon-rgb-primary-l1);
483
483
  --neon-rgb-info: var(--neon-rgb-info-l1);
484
484
  --neon-rgb-success: var(--neon-rgb-success-l1);
@@ -489,6 +489,7 @@
489
489
  --neon-color-neutral: var(--neon-color-neutral-l1);
490
490
  --neon-color-high-contrast: var(--neon-color-high-contrast-l1);
491
491
  --neon-color-brand: var(--neon-color-brand-l1);
492
+ --neon-color-accent: var(--neon-color-accent-l1);
492
493
  --neon-color-primary: var(--neon-color-primary-l1);
493
494
  --neon-color-info: var(--neon-color-info-l1);
494
495
  --neon-color-success: var(--neon-color-success-l1);
@@ -500,6 +501,7 @@
500
501
  --neon-background-color-neutral: var(--neon-color-neutral-d1);
501
502
  --neon-background-color-high-contrast: var(--neon-color-high-contrast-d1);
502
503
  --neon-background-color-brand: var(--neon-color-brand-d1);
504
+ --neon-background-color-accent: var(--neon-color-accent-d1);
503
505
  --neon-background-color-primary: var(--neon-color-primary-d1);
504
506
  --neon-background-color-info: var(--neon-color-info-d1);
505
507
  --neon-background-color-success: var(--neon-color-success-d1);
@@ -551,6 +553,10 @@
551
553
  --neon-background-rgb-solid-button-dark-brand: var(--neon-rgb-brand-l1);
552
554
  --neon-background-solid-button-dark-brand: var(--neon-color-brand-l1);
553
555
 
556
+ --neon-background-solid-button-light-accent: var(--neon-color-accent-l2);
557
+ --neon-background-rgb-solid-button-dark-accent: var(--neon-rgb-accent-l1);
558
+ --neon-background-solid-button-dark-accent: var(--neon-color-accent-l1);
559
+
554
560
  --neon-background-solid-button-light-primary: var(--neon-color-primary-l2);
555
561
  --neon-background-rgb-solid-button-dark-primary: var(--neon-rgb-primary-l1);
556
562
  --neon-background-solid-button-dark-primary: var(--neon-color-primary-l1);
@@ -587,6 +593,9 @@
587
593
  --neon-background-outline-button-hover-brand: var(--neon-color-brand-l2);
588
594
  --neon-background-outline-button-active-brand: var(--neon-color-brand-l1);
589
595
 
596
+ --neon-background-outline-button-hover-accent: var(--neon-color-accent-l2);
597
+ --neon-background-outline-button-active-accent: var(--neon-color-accent-l1);
598
+
590
599
  --neon-background-outline-button-hover-primary: var(--neon-color-primary-l2);
591
600
  --neon-background-outline-button-active-primary: var(--neon-color-primary-l1);
592
601
 
@@ -620,9 +629,15 @@
620
629
  /* action menu */
621
630
  --neon-color-action-menu-hover: var(--neon-color-neutral-d3);
622
631
 
632
+ /* menu */
633
+ --neon-color-menu: var(--neon-color-text-tertiary);
634
+ --neon-color-menu-active: var(--neon-color-text-primary);
635
+
623
636
  /* mobile menu */
624
637
  --neon-border-top-mobile-menu: var(--neon-height-mobile-menu-indicator) var(--neon-border-style) var(--neon-border-color);
625
638
  --neon-background-color-mobile-menu: var(--neon-background-color-card);
639
+ --neon-color-mobile-menu: var(--neon-color-text-tertiary);
640
+ --neon-color-mobile-menu-active: var(--neon-color-text-primary);
626
641
 
627
642
  /* selection */
628
643
  --neon-background-rgb-selection: var(--neon-rgb-info-l1);
@@ -700,6 +715,7 @@
700
715
  --neon-color-tab-selected-neutral: var(--neon-color-neutral-l1);
701
716
  --neon-color-tab-selected-high-contrast: var(--neon-color-high-contrast-l1);
702
717
  --neon-color-tab-selected-brand: var(--neon-color-brand-l1);
718
+ --neon-color-tab-selected-accent: var(--neon-color-accent-l1);
703
719
  --neon-color-tab-selected-primary: var(--neon-color-primary-l1);
704
720
  --neon-color-tab-selected-info: var(--neon-color-info-l1);
705
721
  --neon-color-tab-selected-success: var(--neon-color-success-l1);
@@ -709,6 +725,7 @@
709
725
  --neon-color-tab-hover-neutral: var(--neon-color-neutral-l2);
710
726
  --neon-color-tab-hover-high-contrast: var(--neon-color-high-contrast-l2);
711
727
  --neon-color-tab-hover-brand: var(--neon-color-brand-l2);
728
+ --neon-color-tab-hover-accent: var(--neon-color-accent-l2);
712
729
  --neon-color-tab-hover-primary: var(--neon-color-primary-l2);
713
730
  --neon-color-tab-hover-info: var(--neon-color-info-l2);
714
731
  --neon-color-tab-hover-success: var(--neon-color-success-l2);
@@ -725,7 +742,7 @@
725
742
  --neon-color-loading-3: rgba(82, 82, 82, 0.5);
726
743
 
727
744
  /* scrollbars */
728
- --neon-color-scrollbar: rgba(255, 255, 255, 0.05);
745
+ --neon-color-scrollbar: rgba(255, 255, 255, 0.125);
729
746
 
730
747
  /* overlays */
731
748
  --neon-background-color-overlay: rgba(var(--neon-rgb-neutral-d5), 0.75);
@@ -801,6 +818,7 @@
801
818
  --neon-rgb-neutral: var(--neon-rgb-neutral-d1);
802
819
  --neon-rgb-high-contrast: var(--neon-rgb-high-contrast-d1);
803
820
  --neon-rgb-brand: var(--neon-rgb-brand-d1);
821
+ --neon-rgb-accent: var(--neon-rgb-accent-d1);
804
822
  --neon-rgb-primary: var(--neon-rgb-primary-d1);
805
823
  --neon-rgb-info: var(--neon-rgb-info-d1);
806
824
  --neon-rgb-success: var(--neon-rgb-success-d1);
@@ -811,6 +829,7 @@
811
829
  --neon-color-neutral: var(--neon-color-neutral-d1);
812
830
  --neon-color-high-contrast: var(--neon-color-high-contrast-d1);
813
831
  --neon-color-brand: var(--neon-color-brand-d1);
832
+ --neon-color-accent: var(--neon-color-accent-d1);
814
833
  --neon-color-primary: var(--neon-color-primary-d1);
815
834
  --neon-color-info: var(--neon-color-info-d1);
816
835
  --neon-color-success: var(--neon-color-success-d1);
@@ -822,6 +841,7 @@
822
841
  --neon-background-color-neutral: var(--neon-color-neutral-l1);
823
842
  --neon-background-color-high-contrast: var(--neon-color-high-contrast-l1);
824
843
  --neon-background-color-brand: var(--neon-color-brand-l1);
844
+ --neon-background-color-accent: var(--neon-color-accent-l1);
825
845
  --neon-background-color-primary: var(--neon-color-primary-l1);
826
846
  --neon-background-color-info: var(--neon-color-info-l1);
827
847
  --neon-background-color-success: var(--neon-color-success-l1);
@@ -873,6 +893,10 @@
873
893
  --neon-background-rgb-solid-button-dark-brand: var(--neon-rgb-brand-d2);
874
894
  --neon-background-solid-button-dark-brand: var(--neon-color-brand-d2);
875
895
 
896
+ --neon-background-solid-button-light-accent: var(--neon-color-accent-d1);
897
+ --neon-background-rgb-solid-button-dark-accent: var(--neon-rgb-accent-d2);
898
+ --neon-background-solid-button-dark-accent: var(--neon-color-accent-d2);
899
+
876
900
  --neon-background-solid-button-light-primary: var(--neon-color-primary-d1);
877
901
  --neon-background-rgb-solid-button-dark-primary: var(--neon-rgb-primary-d2);
878
902
  --neon-background-solid-button-dark-primary: var(--neon-color-primary-d2);
@@ -909,6 +933,9 @@
909
933
  --neon-background-outline-button-hover-brand: var(--neon-color-brand-d1);
910
934
  --neon-background-outline-button-active-brand: var(--neon-color-brand-d2);
911
935
 
936
+ --neon-background-outline-button-hover-accent: var(--neon-color-accent-d1);
937
+ --neon-background-outline-button-active-accent: var(--neon-color-accent-d2);
938
+
912
939
  --neon-background-outline-button-hover-primary: var(--neon-color-primary-d1);
913
940
  --neon-background-outline-button-active-primary: var(--neon-color-primary-d2);
914
941
 
@@ -942,9 +969,15 @@
942
969
  /* action menu */
943
970
  --neon-color-action-menu-hover: var(--neon-color-neutral-l4);
944
971
 
972
+ /* menu */
973
+ --neon-color-menu: var(--neon-color-text-tertiary);
974
+ --neon-color-menu-active: var(--neon-color-text-primary);
975
+
945
976
  /* mobile menu */
946
977
  --neon-border-top-mobile-menu: var(--neon-height-mobile-menu-indicator) var(--neon-border-style) var(--neon-border-color);
947
978
  --neon-background-color-mobile-menu: var(--neon-background-color-card);
979
+ --neon-color-mobile-menu: var(--neon-color-text-tertiary);
980
+ --neon-color-mobile-menu-active: var(--neon-color-text-primary);
948
981
 
949
982
  /* selection */
950
983
  --neon-background-rgb-selection: var(--neon-rgb-info-d1);
@@ -1022,6 +1055,7 @@
1022
1055
  --neon-color-tab-selected-neutral: var(--neon-color-neutral-d2);
1023
1056
  --neon-color-tab-selected-high-contrast: var(--neon-color-high-contrast-d2);
1024
1057
  --neon-color-tab-selected-brand: var(--neon-color-brand-d2);
1058
+ --neon-color-tab-selected-accent: var(--neon-color-accent-d2);
1025
1059
  --neon-color-tab-selected-primary: var(--neon-color-primary-d2);
1026
1060
  --neon-color-tab-selected-info: var(--neon-color-info-d2);
1027
1061
  --neon-color-tab-selected-success: var(--neon-color-success-d2);
@@ -1031,6 +1065,7 @@
1031
1065
  --neon-color-tab-hover-neutral: var(--neon-color-neutral-d1);
1032
1066
  --neon-color-tab-hover-high-contrast: var(--neon-color-high-contrast-d1);
1033
1067
  --neon-color-tab-hover-brand: var(--neon-color-brand-d1);
1068
+ --neon-color-tab-hover-accent: var(--neon-color-accent-d1);
1034
1069
  --neon-color-tab-hover-primary: var(--neon-color-primary-d1);
1035
1070
  --neon-color-tab-hover-info: var(--neon-color-info-d1);
1036
1071
  --neon-color-tab-hover-success: var(--neon-color-success-d1);