@neo4j-ndl/base 0.3.0 → 0.3.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 (8) hide show
  1. package/lib/neo4j-ds-styles.css +248 -43
  2. package/lib/optimised.config.js +5 -0
  3. package/lib/optimised.config.js.map +1 -1
  4. package/lib/tokens/css/tokens.css +2 -2
  5. package/lib/tokens/js/tokens-raw.js +3 -3
  6. package/lib/tokens/js/tokens.js +2 -2
  7. package/lib/tokens/scss/tokens.scss +2 -2
  8. package/package.json +2 -3
package/lib/neo4j-ds-styles.css CHANGED
@@ -420,7 +420,7 @@ Ensure the default browser behavior of the `hidden` attribute.
420
420
  */
421
421
  /**
422
422
  * Do not edit directly
423
- * Generated on Thu, 28 Apr 2022 14:52:48 GMT
423
+ * Generated on Fri, 06 May 2022 16:12:13 GMT
424
424
  */
425
425
  :root {
426
426
  --border-radius-sm: 4px;
@@ -518,7 +518,7 @@ Ensure the default browser behavior of the `hidden` attribute.
518
518
  --palette-light-neutral-bg-strong: 230, 233, 238 /* #E6E9EE */;
519
519
  --palette-light-neutral-bg-strongest: 83, 91, 102 /* #535B66 */;
520
520
  --palette-light-neutral-border-weak: 238, 241, 246 /* #EEF1F6 */;
521
- --palette-light-neutral-border-strong: 178, 183, 189 /* #B2B7BD */;
521
+ --palette-light-neutral-border-strong: 196, 200, 205 /* #C4C8CD */;
522
522
  --palette-light-neutral-hover: rgba(113,119,128,0.1);
523
523
  --palette-light-neutral-pressed: rgba(113,119,128,0.2);
524
524
  --palette-light-primary-text: 0, 111, 214 /* #006FD6 */;
@@ -718,7 +718,7 @@ h6,
718
718
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
719
719
  --tw-ring-offset-width: 2px;
720
720
  }
721
- .ndl-btn.disabled, .ndl-btn.loading{
721
+ .ndl-btn.loading{
722
722
  cursor: default;
723
723
  opacity: 0.5;
724
724
  }
@@ -780,27 +780,50 @@ h6,
780
780
  width: 3rem;
781
781
  padding: 0.75rem;
782
782
  }
783
+ /* State: Filled */
783
784
  .ndl-btn.filled{
784
785
  border-width: 0px;
785
786
  --tw-text-opacity: 1;
786
787
  color: rgb(255 255 255 / var(--tw-text-opacity));
787
- --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.04);
788
- --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
789
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
790
788
  }
789
+ .ndl-btn.filled.disabled{
790
+ cursor: default;
791
+ --tw-bg-opacity: 1;
792
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
793
+ --tw-text-opacity: 1;
794
+ color: rgb(178 183 189 / var(--tw-text-opacity));
795
+ }
796
+ /* State: Outlined */
791
797
  .ndl-btn.outlined{
792
798
  border-width: 1px;
793
799
  border-style: solid;
794
800
  --tw-bg-opacity: 1;
795
801
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
796
- --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.04);
797
- --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
798
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
799
802
  }
803
+ .ndl-btn.outlined.disabled{
804
+ cursor: default;
805
+ --tw-border-opacity: 1;
806
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
807
+ --tw-bg-opacity: 1;
808
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
809
+ --tw-text-opacity: 1;
810
+ color: rgb(178 183 189 / var(--tw-text-opacity));
811
+ }
812
+ /* State: Text */
800
813
  .ndl-btn.text{
801
814
  border-style: none;
802
815
  background-color: transparent;
803
816
  }
817
+ .ndl-btn.text.disabled{
818
+ cursor: default;
819
+ --tw-text-opacity: 1;
820
+ color: rgb(178 183 189 / var(--tw-text-opacity));
821
+ }
822
+ .ndl-btn.floating-btn:not(.disabled):not(.text){
823
+ --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
824
+ --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
825
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
826
+ }
804
827
  a.ndl-btn{
805
828
  -webkit-text-decoration-line: none;
806
829
  text-decoration-line: none;
@@ -856,6 +879,11 @@ a.ndl-btn{
856
879
  height: 0.5rem;
857
880
  width: 0.5rem;
858
881
  }
882
+ .ndl-label .label-text{
883
+ overflow: hidden;
884
+ text-overflow: ellipsis;
885
+ white-space: nowrap;
886
+ }
859
887
  .ndl-label.clean .label-text{
860
888
  --tw-text-opacity: 1;
861
889
  color: rgb(21 30 41 / var(--tw-text-opacity));
@@ -890,16 +918,15 @@ a.ndl-btn{
890
918
  * You should have received a copy of the GNU General Public License
891
919
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
892
920
  */
893
- .ndl-tabs.underline {
921
+ .ndl-tabs.underline-tab {
894
922
  border-bottom-style: solid;
895
- /* @apply n-border-b-light-neutral-border-weak n-text-light-neutral-text-weak n-relative; */
896
923
  position: relative;
897
924
  }
898
925
  /**
899
926
  * We use an :after pseudo element to draw the
900
927
  * underline inside the component
901
928
  */
902
- .ndl-tabs.underline.small:after {
929
+ .ndl-tabs.underline-tab.small:after {
903
930
  content: '';
904
931
  position: absolute;
905
932
  width: 100%;
@@ -911,7 +938,7 @@ a.ndl-btn{
911
938
  --tw-bg-opacity: 1;
912
939
  background-color: rgb(238 241 246 / var(--tw-bg-opacity));
913
940
  }
914
- .ndl-tabs.underline.large:after {
941
+ .ndl-tabs.underline-tab.large:after {
915
942
  content: '';
916
943
  position: absolute;
917
944
  width: 100%;
@@ -965,33 +992,33 @@ a.ndl-btn{
965
992
  --tw-text-opacity: 1;
966
993
  color: rgb(178 183 189 / var(--tw-text-opacity));
967
994
  }
968
- .ndl-tabs .tab.underline {
995
+ .ndl-tabs .tab.underline-tab {
969
996
  /* To be always above bottom border */
970
997
  z-index: 1;
971
998
  }
972
- .ndl-tabs .tab.underline:not(.selected){
999
+ .ndl-tabs .tab.underline-tab:not(.selected){
973
1000
  --tw-text-opacity: 1;
974
1001
  color: rgb(83 91 102 / var(--tw-text-opacity));
975
1002
  }
976
- .ndl-tabs .tab.underline.disabled{
1003
+ .ndl-tabs .tab.underline-tab.disabled{
977
1004
  --tw-text-opacity: 1;
978
1005
  color: rgb(178 183 189 / var(--tw-text-opacity));
979
1006
  }
980
- .ndl-tabs .tab.underline.small {
1007
+ .ndl-tabs .tab.underline-tab.small {
981
1008
  /* We need to have a total of 36px in Height */
982
1009
  padding-bottom: 12px;
983
1010
  }
984
- .ndl-tabs .tab.underline.small .tab-underline {
1011
+ .ndl-tabs .tab.underline-tab.small .tab-underline {
985
1012
  height: 2px;
986
1013
  }
987
- .ndl-tabs .tab.underline.large {
1014
+ .ndl-tabs .tab.underline-tab.large {
988
1015
  /* We need to have a total of 46px in Height */
989
1016
  padding-bottom: 14px;
990
1017
  }
991
- .ndl-tabs .tab.underline.large .tab-underline {
1018
+ .ndl-tabs .tab.underline-tab.large .tab-underline {
992
1019
  height: 4px;
993
1020
  }
994
- .ndl-tabs .tab.underline .tab-underline {
1021
+ .ndl-tabs .tab.underline-tab .tab-underline {
995
1022
  height: 4px;
996
1023
  position: absolute;
997
1024
  left: 0px;
@@ -1001,45 +1028,45 @@ a.ndl-btn{
1001
1028
  border-top-right-radius: 4px;
1002
1029
  background-color: transparent;
1003
1030
  }
1004
- .ndl-tabs .tab.underline:focus-visible {
1031
+ .ndl-tabs .tab.underline-tab:focus-visible {
1005
1032
  outline: none;
1006
1033
  }
1007
- .ndl-tabs .tab.underline:focus-visible .tab-underline{
1034
+ .ndl-tabs .tab.underline-tab:focus-visible .tab-underline{
1008
1035
  --tw-bg-opacity: 1;
1009
1036
  background-color: rgb(1 139 255 / var(--tw-bg-opacity));
1010
1037
  }
1011
- .ndl-tabs .tab.underline:hover:not(.disabled):not(.selected) .tab-underline{
1038
+ .ndl-tabs .tab.underline-tab:hover:not(.disabled):not(.selected) .tab-underline{
1012
1039
  --tw-bg-opacity: 1;
1013
1040
  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1014
1041
  }
1015
- .ndl-tabs .tab.underline:active:not(.disabled):not(.selected) .tab-underline{
1042
+ .ndl-tabs .tab.underline-tab:active:not(.disabled):not(.selected) .tab-underline{
1016
1043
  --tw-bg-opacity: 1;
1017
1044
  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1018
1045
  }
1019
- .ndl-tabs .tab.underline.selected:not(.disabled){
1046
+ .ndl-tabs .tab.underline-tab.selected:not(.disabled){
1020
1047
  --tw-text-opacity: 1;
1021
1048
  color: rgb(0 111 214 / var(--tw-text-opacity));
1022
1049
  }
1023
- .ndl-tabs .tab.underline.selected:not(.disabled):not(:focus-visible) .tab-underline{
1050
+ .ndl-tabs .tab.underline-tab.selected:not(.disabled):not(:focus-visible) .tab-underline{
1024
1051
  --tw-bg-opacity: 1;
1025
1052
  background-color: rgb(0 111 214 / var(--tw-bg-opacity));
1026
1053
  }
1027
- .ndl-tabs .tab.underline.selected.disabled:not(:focus-visible) .tab-underline{
1054
+ .ndl-tabs .tab.underline-tab.selected.disabled:not(:focus-visible) .tab-underline{
1028
1055
  --tw-bg-opacity: 1;
1029
1056
  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1030
1057
  }
1031
- .ndl-tabs .tab.filled{
1058
+ .ndl-tabs .tab.filled-tab{
1032
1059
  border-radius: 4px;
1033
1060
  padding-top: 0.25rem;
1034
1061
  padding-bottom: 0.25rem;
1035
1062
  --tw-text-opacity: 1;
1036
1063
  color: rgb(83 91 102 / var(--tw-text-opacity));
1037
1064
  }
1038
- .ndl-tabs .tab.filled.disabled{
1065
+ .ndl-tabs .tab.filled-tab.disabled{
1039
1066
  --tw-text-opacity: 1;
1040
1067
  color: rgb(178 183 189 / var(--tw-text-opacity));
1041
1068
  }
1042
- .ndl-tabs .tab.filled:focus-visible {
1069
+ .ndl-tabs .tab.filled-tab:focus-visible {
1043
1070
  outline: none;
1044
1071
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1045
1072
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1047,15 +1074,15 @@ a.ndl-btn{
1047
1074
  --tw-ring-opacity: 1;
1048
1075
  --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
1049
1076
  }
1050
- .ndl-tabs .tab.filled:hover:not(.disabled):not(.selected){
1077
+ .ndl-tabs .tab.filled-tab:hover:not(.disabled):not(.selected){
1051
1078
  background-color: rgb(113 119 128 / var(--tw-bg-opacity));
1052
1079
  --tw-bg-opacity: 0.1;
1053
1080
  }
1054
- .ndl-tabs .tab.filled:active:not(.disabled):not(.selected){
1081
+ .ndl-tabs .tab.filled-tab:active:not(.disabled):not(.selected){
1055
1082
  background-color: rgb(113 119 128 / var(--tw-bg-opacity));
1056
1083
  --tw-bg-opacity: 0.2;
1057
1084
  }
1058
- .ndl-tabs .tab.filled.selected{
1085
+ .ndl-tabs .tab.filled-tab.selected{
1059
1086
  --tw-bg-opacity: 1;
1060
1087
  background-color: rgb(230 248 255 / var(--tw-bg-opacity));
1061
1088
  --tw-text-opacity: 1;
@@ -1971,7 +1998,7 @@ a.ndl-btn{
1971
1998
  color: rgb(83 91 102 / var(--tw-text-opacity));
1972
1999
  outline-style: solid;
1973
2000
  outline-width: 1px;
1974
- outline-color: #B2B7BD;
2001
+ outline-color: #C4C8CD;
1975
2002
  }
1976
2003
  .ndl-view-selector > button{
1977
2004
  cursor: pointer;
@@ -2236,7 +2263,7 @@ a.ndl-btn{
2236
2263
  border-left-width: 1px;
2237
2264
  border-right-width: 1px;
2238
2265
  --tw-border-opacity: 1;
2239
- border-color: rgb(178 183 189 / var(--tw-border-opacity));
2266
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
2240
2267
  --tw-bg-opacity: 1;
2241
2268
  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
2242
2269
  }
@@ -2287,7 +2314,7 @@ a.ndl-btn{
2287
2314
  border-radius: 6px;
2288
2315
  border-width: 1px;
2289
2316
  --tw-border-opacity: 1;
2290
- border-color: rgb(178 183 189 / var(--tw-border-opacity));
2317
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
2291
2318
  --tw-bg-opacity: 1;
2292
2319
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2293
2320
  padding-left: 0.75rem;
@@ -2681,7 +2708,7 @@ a.ndl-btn{
2681
2708
  }
2682
2709
  .n-border-light-neutral-border-strong{
2683
2710
  --tw-border-opacity: 1;
2684
- border-color: rgb(178 183 189 / var(--tw-border-opacity));
2711
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
2685
2712
  }
2686
2713
  .n-border-light-neutral-hover{
2687
2714
  border-color: rgba(113,119,128,0.1);
@@ -3071,7 +3098,7 @@ a.ndl-btn{
3071
3098
  }
3072
3099
  .n-bg-light-neutral-border-strong{
3073
3100
  --tw-bg-opacity: 1;
3074
- background-color: rgb(178 183 189 / var(--tw-bg-opacity));
3101
+ background-color: rgb(196 200 205 / var(--tw-bg-opacity));
3075
3102
  }
3076
3103
  .n-bg-light-neutral-hover{
3077
3104
  background-color: rgba(113,119,128,0.1);
@@ -3537,7 +3564,7 @@ a.ndl-btn{
3537
3564
  }
3538
3565
  .n-text-light-neutral-border-strong{
3539
3566
  --tw-text-opacity: 1;
3540
- color: rgb(178 183 189 / var(--tw-text-opacity));
3567
+ color: rgb(196 200 205 / var(--tw-text-opacity));
3541
3568
  }
3542
3569
  .n-text-light-neutral-hover{
3543
3570
  color: rgba(113,119,128,0.1);
@@ -3763,7 +3790,7 @@ html {
3763
3790
  }
3764
3791
  .hover\:n-border-light-neutral-border-strong:hover{
3765
3792
  --tw-border-opacity: 1;
3766
- border-color: rgb(178 183 189 / var(--tw-border-opacity));
3793
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
3767
3794
  }
3768
3795
  .hover\:n-border-light-neutral-hover:hover{
3769
3796
  border-color: rgba(113,119,128,0.1);
@@ -4145,7 +4172,7 @@ html {
4145
4172
  }
4146
4173
  .hover\:n-bg-light-neutral-border-strong:hover{
4147
4174
  --tw-bg-opacity: 1;
4148
- background-color: rgb(178 183 189 / var(--tw-bg-opacity));
4175
+ background-color: rgb(196 200 205 / var(--tw-bg-opacity));
4149
4176
  }
4150
4177
  .hover\:n-bg-light-neutral-hover:hover{
4151
4178
  background-color: rgba(113,119,128,0.1);
@@ -4530,7 +4557,7 @@ html {
4530
4557
  }
4531
4558
  .hover\:n-text-light-neutral-border-strong:hover{
4532
4559
  --tw-text-opacity: 1;
4533
- color: rgb(178 183 189 / var(--tw-text-opacity));
4560
+ color: rgb(196 200 205 / var(--tw-text-opacity));
4534
4561
  }
4535
4562
  .hover\:n-text-light-neutral-hover:hover{
4536
4563
  color: rgba(113,119,128,0.1);
@@ -4666,6 +4693,184 @@ html {
4666
4693
  --tw-text-opacity: 1;
4667
4694
  color: rgb(152 237 203 / var(--tw-text-opacity));
4668
4695
  }
4696
+ .active\:n-bg-light-neutral-text-weakest:active{
4697
+ --tw-bg-opacity: 1;
4698
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
4699
+ }
4700
+ .active\:n-bg-light-neutral-text-weaker:active{
4701
+ --tw-bg-opacity: 1;
4702
+ background-color: rgb(113 119 128 / var(--tw-bg-opacity));
4703
+ }
4704
+ .active\:n-bg-light-neutral-text-weak:active{
4705
+ --tw-bg-opacity: 1;
4706
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
4707
+ }
4708
+ .active\:n-bg-light-neutral-text-default:active{
4709
+ --tw-bg-opacity: 1;
4710
+ background-color: rgb(21 30 41 / var(--tw-bg-opacity));
4711
+ }
4712
+ .active\:n-bg-light-neutral-text-inverse:active{
4713
+ --tw-bg-opacity: 1;
4714
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4715
+ }
4716
+ .active\:n-bg-light-neutral-bg-weak:active{
4717
+ --tw-bg-opacity: 1;
4718
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4719
+ }
4720
+ .active\:n-bg-light-neutral-bg-default:active{
4721
+ --tw-bg-opacity: 1;
4722
+ background-color: rgb(245 247 250 / var(--tw-bg-opacity));
4723
+ }
4724
+ .active\:n-bg-light-neutral-bg-strong:active{
4725
+ --tw-bg-opacity: 1;
4726
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
4727
+ }
4728
+ .active\:n-bg-light-neutral-bg-strongest:active{
4729
+ --tw-bg-opacity: 1;
4730
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
4731
+ }
4732
+ .active\:n-bg-light-neutral-border-weak:active{
4733
+ --tw-bg-opacity: 1;
4734
+ background-color: rgb(238 241 246 / var(--tw-bg-opacity));
4735
+ }
4736
+ .active\:n-bg-light-neutral-border-strong:active{
4737
+ --tw-bg-opacity: 1;
4738
+ background-color: rgb(196 200 205 / var(--tw-bg-opacity));
4739
+ }
4740
+ .active\:n-bg-light-neutral-hover:active{
4741
+ background-color: rgba(113,119,128,0.1);
4742
+ }
4743
+ .active\:n-bg-light-neutral-pressed:active{
4744
+ background-color: rgba(113,119,128,0.2);
4745
+ }
4746
+ .active\:n-bg-light-primary-text:active{
4747
+ --tw-bg-opacity: 1;
4748
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
4749
+ }
4750
+ .active\:n-bg-light-primary-icon:active{
4751
+ --tw-bg-opacity: 1;
4752
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
4753
+ }
4754
+ .active\:n-bg-light-primary-bg-strong:active{
4755
+ --tw-bg-opacity: 1;
4756
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
4757
+ }
4758
+ .active\:n-bg-light-primary-bg-weak:active{
4759
+ --tw-bg-opacity: 1;
4760
+ background-color: rgb(230 248 255 / var(--tw-bg-opacity));
4761
+ }
4762
+ .active\:n-bg-light-primary-border-strong:active{
4763
+ --tw-bg-opacity: 1;
4764
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
4765
+ }
4766
+ .active\:n-bg-light-primary-border-weak:active{
4767
+ --tw-bg-opacity: 1;
4768
+ background-color: rgb(122 209 255 / var(--tw-bg-opacity));
4769
+ }
4770
+ .active\:n-bg-light-primary-focus:active{
4771
+ --tw-bg-opacity: 1;
4772
+ background-color: rgb(1 139 255 / var(--tw-bg-opacity));
4773
+ }
4774
+ .active\:n-bg-light-primary-hover-weak:active{
4775
+ background-color: rgba(1,139,255,0.08);
4776
+ }
4777
+ .active\:n-bg-light-primary-hover-strong:active{
4778
+ --tw-bg-opacity: 1;
4779
+ background-color: rgb(0 86 179 / var(--tw-bg-opacity));
4780
+ }
4781
+ .active\:n-bg-light-primary-pressed-weak:active{
4782
+ background-color: rgba(1,139,255,0.12);
4783
+ }
4784
+ .active\:n-bg-light-primary-pressed-strong:active{
4785
+ --tw-bg-opacity: 1;
4786
+ background-color: rgb(0 64 146 / var(--tw-bg-opacity));
4787
+ }
4788
+ .active\:n-bg-light-danger-text:active{
4789
+ --tw-bg-opacity: 1;
4790
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
4791
+ }
4792
+ .active\:n-bg-light-danger-icon:active{
4793
+ --tw-bg-opacity: 1;
4794
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
4795
+ }
4796
+ .active\:n-bg-light-danger-bg-strong:active{
4797
+ --tw-bg-opacity: 1;
4798
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
4799
+ }
4800
+ .active\:n-bg-light-danger-bg-weak:active{
4801
+ --tw-bg-opacity: 1;
4802
+ background-color: rgb(255 230 233 / var(--tw-bg-opacity));
4803
+ }
4804
+ .active\:n-bg-light-danger-border-strong:active{
4805
+ --tw-bg-opacity: 1;
4806
+ background-color: rgb(204 37 75 / var(--tw-bg-opacity));
4807
+ }
4808
+ .active\:n-bg-light-danger-border-weak:active{
4809
+ --tw-bg-opacity: 1;
4810
+ background-color: rgb(255 184 196 / var(--tw-bg-opacity));
4811
+ }
4812
+ .active\:n-bg-light-danger-hover-weak:active{
4813
+ background-color: rgba(237,18,82,0.08);
4814
+ }
4815
+ .active\:n-bg-light-danger-hover-strong:active{
4816
+ --tw-bg-opacity: 1;
4817
+ background-color: rgb(161 0 59 / var(--tw-bg-opacity));
4818
+ }
4819
+ .active\:n-bg-light-danger-pressed-weak:active{
4820
+ background-color: rgba(237,18,82,0.12);
4821
+ }
4822
+ .active\:n-bg-light-danger-pressed-strong:active{
4823
+ --tw-bg-opacity: 1;
4824
+ background-color: rgb(122 0 49 / var(--tw-bg-opacity));
4825
+ }
4826
+ .active\:n-bg-light-warning-text:active{
4827
+ --tw-bg-opacity: 1;
4828
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
4829
+ }
4830
+ .active\:n-bg-light-warning-icon:active{
4831
+ --tw-bg-opacity: 1;
4832
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
4833
+ }
4834
+ .active\:n-bg-light-warning-bg-strong:active{
4835
+ --tw-bg-opacity: 1;
4836
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
4837
+ }
4838
+ .active\:n-bg-light-warning-bg-weak:active{
4839
+ --tw-bg-opacity: 1;
4840
+ background-color: rgb(255 251 222 / var(--tw-bg-opacity));
4841
+ }
4842
+ .active\:n-bg-light-warning-border-strong:active{
4843
+ --tw-bg-opacity: 1;
4844
+ background-color: rgb(150 108 46 / var(--tw-bg-opacity));
4845
+ }
4846
+ .active\:n-bg-light-warning-border-weak:active{
4847
+ --tw-bg-opacity: 1;
4848
+ background-color: rgb(255 234 140 / var(--tw-bg-opacity));
4849
+ }
4850
+ .active\:n-bg-light-success-text:active{
4851
+ --tw-bg-opacity: 1;
4852
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
4853
+ }
4854
+ .active\:n-bg-light-success-icon:active{
4855
+ --tw-bg-opacity: 1;
4856
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
4857
+ }
4858
+ .active\:n-bg-light-success-bg-strong:active{
4859
+ --tw-bg-opacity: 1;
4860
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
4861
+ }
4862
+ .active\:n-bg-light-success-bg-weak:active{
4863
+ --tw-bg-opacity: 1;
4864
+ background-color: rgb(225 250 239 / var(--tw-bg-opacity));
4865
+ }
4866
+ .active\:n-bg-light-success-border-strong:active{
4867
+ --tw-bg-opacity: 1;
4868
+ background-color: rgb(50 125 96 / var(--tw-bg-opacity));
4869
+ }
4870
+ .active\:n-bg-light-success-border-weak:active{
4871
+ --tw-bg-opacity: 1;
4872
+ background-color: rgb(152 237 203 / var(--tw-bg-opacity));
4873
+ }
4669
4874
  @media (min-width: 640px){
4670
4875
  .sm\:n-space-y-0 > :not([hidden]) ~ :not([hidden]){
4671
4876
  --tw-space-y-reverse: 0;
package/lib/optimised.config.js CHANGED
@@ -51,6 +51,11 @@ module.exports = {
51
51
  pattern: /^(hover:)?n-bg-(light|primary|danger|warning|success|blueberry|mint|neutral)-/,
52
52
  variants: ['hover']
53
53
  },
54
+ {
55
+ // For clicked classes
56
+ pattern: /^(active:)?n-bg-light-/,
57
+ variants: ['active']
58
+ },
54
59
  {
55
60
  pattern: /^(hover:)?n-border-light-/,
56
61
  variants: ['hover']
package/lib/optimised.config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"optimised.config.js","sourceRoot":"","sources":["../src/optimised.config.js"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;AAEH,IAAM,cAAc,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAEtD;;;;GAIG;AACH,MAAM,CAAC,OAAO,GAAG;IACf,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,CAAC,kCAAkC,CAAC;IAC7C,mEAAmE;IACnE,qDAAqD;IACrD,iDAAiD;IACjD,QAAQ,EAAE;QACR;YACE,OAAO,EACL,iFAAiF;YACnF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;QACD;YACE,OAAO,EACL,+EAA+E;YACjF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;QACD;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF;IACD,KAAK,wBACA,cAAc,KACjB,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,WAAW,EAAE,aAAa;gBAC1B,OAAO,EAAE,cAAc;aACxB;SACF,GACF;IACD,gCAAgC;IAChC,0DAA0D;IAC1D,OAAO,EAAE,EAAE;CACZ,CAAC"}
1
+ {"version":3,"file":"optimised.config.js","sourceRoot":"","sources":["../src/optimised.config.js"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;AAEH,IAAM,cAAc,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAEtD;;;;GAIG;AACH,MAAM,CAAC,OAAO,GAAG;IACf,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,CAAC,kCAAkC,CAAC;IAC7C,mEAAmE;IACnE,qDAAqD;IACrD,iDAAiD;IACjD,QAAQ,EAAE;QACR;YACE,OAAO,EACL,iFAAiF;YACnF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;QACD;YACE,OAAO,EACL,+EAA+E;YACjF,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;QACD;YACE,sBAAsB;YACtB,OAAO,EAAE,wBAAwB;YACjC,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB;QACD;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,CAAC,OAAO,CAAC;SACpB;KACF;IACD,KAAK,wBACA,cAAc,KACjB,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,WAAW,EAAE,aAAa;gBAC1B,OAAO,EAAE,cAAc;aACxB;SACF,GACF;IACD,gCAAgC;IAChC,0DAA0D;IAC1D,OAAO,EAAE,EAAE;CACZ,CAAC"}
package/lib/tokens/css/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Apr 2022 14:52:48 GMT
3
+ * Generated on Fri, 06 May 2022 16:12:13 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -99,7 +99,7 @@
99
99
  --palette-light-neutral-bg-strong: 230, 233, 238 /* #E6E9EE */;
100
100
  --palette-light-neutral-bg-strongest: 83, 91, 102 /* #535B66 */;
101
101
  --palette-light-neutral-border-weak: 238, 241, 246 /* #EEF1F6 */;
102
- --palette-light-neutral-border-strong: 178, 183, 189 /* #B2B7BD */;
102
+ --palette-light-neutral-border-strong: 196, 200, 205 /* #C4C8CD */;
103
103
  --palette-light-neutral-hover: rgba(113,119,128,0.1);
104
104
  --palette-light-neutral-pressed: rgba(113,119,128,0.2);
105
105
  --palette-light-primary-text: 0, 111, 214 /* #006FD6 */;
package/lib/tokens/js/tokens-raw.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 28 Apr 2022 14:52:48 GMT
3
+ * Generated on Fri, 06 May 2022 16:12:13 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1864,11 +1864,11 @@ module.exports = {
1864
1864
  ]
1865
1865
  },
1866
1866
  "strong": {
1867
- "value": "#B2B7BD",
1867
+ "value": "#C4C8CD",
1868
1868
  "filePath": "src/tokens/palette.json",
1869
1869
  "isSource": true,
1870
1870
  "original": {
1871
- "value": "{colors.neutral.60.value}"
1871
+ "value": "{colors.neutral.50.value}"
1872
1872
  },
1873
1873
  "name": "PaletteLightNeutralBorderStrong",
1874
1874
  "attributes": {
package/lib/tokens/js/tokens.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Thu, 28 Apr 2022 14:52:48 GMT
4
+ * Generated on Fri, 06 May 2022 16:12:13 GMT
5
5
  */
6
6
  module.exports = {
7
7
  "borderRadius": {
@@ -133,7 +133,7 @@ module.exports = {
133
133
  },
134
134
  "border": {
135
135
  "weak": "#EEF1F6",
136
- "strong": "#B2B7BD"
136
+ "strong": "#C4C8CD"
137
137
  },
138
138
  "hover": "rgba(113,119,128,0.1)",
139
139
  "pressed": "rgba(113,119,128,0.2)"
package/lib/tokens/scss/tokens.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 28 Apr 2022 14:52:48 GMT
3
+ // Generated on Fri, 06 May 2022 16:12:13 GMT
4
4
 
5
5
  $border-radius-sm: 4px;
6
6
  $border-radius-md: 6px;
@@ -97,7 +97,7 @@ $palette-light-neutral-bg-default: #F5F7FA;
97
97
  $palette-light-neutral-bg-strong: #E6E9EE;
98
98
  $palette-light-neutral-bg-strongest: #535B66;
99
99
  $palette-light-neutral-border-weak: #EEF1F6;
100
- $palette-light-neutral-border-strong: #B2B7BD;
100
+ $palette-light-neutral-border-strong: #C4C8CD;
101
101
  $palette-light-neutral-hover: rgba(113,119,128,0.1);
102
102
  $palette-light-neutral-pressed: rgba(113,119,128,0.2);
103
103
  $palette-light-primary-text: #006FD6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "",
@@ -37,6 +37,5 @@
37
37
  "tailwindcss": "^3.0.0",
38
38
  "ts-node": "^10.4.0",
39
39
  "typescript": "^4.4.4"
40
- },
41
- "gitHead": "40d840bea97d8d42c563808e27b57f4f0c9b7011"
40
+ }
42
41
  }