@genexus/mercury 0.9.9 → 0.9.11

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 (4) hide show
  1. package/README.md +1 -0
  2. package/dist/bundles/scss/base/base.scss +1 -0
  3. package/dist/mercury.scss +211 -100
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -87,6 +87,7 @@ npm i @genexus/mercury
87
87
  ```scss
88
88
  $icons-path: "assets/custom/path/icons/";
89
89
  $font-face-path: "assets/custom/path/fonts/";
90
+ $globant-colors: false;
90
91
  ```
91
92
 
92
93
  3. Run the following command to transpile the bundles with the new path for the assets:
package/dist/bundles/scss/base/base.scss CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  $light-theme: true,
8
8
  $dark-theme: true,
9
+ $globant-colors: $globant-colors,
9
10
 
10
11
  $font-face: true,
11
12
  $font-face-path: $font-face-path,
package/dist/mercury.scss CHANGED
@@ -969,102 +969,210 @@
969
969
  --mer-border__radius--xl: 30px;
970
970
  }
971
971
 
972
- @mixin foundation-colors--light() {
973
- // primary
974
- --mer-color__primary-blue--200: #005ac1;
975
- --mer-color__primary-blue--300: #5498e8;
976
- --mer-color__primary-blue--400: #437dc0;
977
- --mer-color__primary-blue--600: #335884;
978
-
979
- // neutral
980
- --mer-color__neutral-gray--100: #4a5870;
981
- --mer-color__neutral-gray--200: #49566d;
982
- --mer-color__neutral-gray--300: #56677a;
983
- --mer-color__neutral-gray--400: #56677a;
984
- --mer-color__neutral-gray--450: #56677a;
985
- --mer-color__neutral-gray--500: #828b96;
986
- --mer-color__neutral-gray--550: #9da9b6;
987
- --mer-color__neutral-gray--600: #aeb9c6;
988
- --mer-color__neutral-gray--650: #c6d1dd;
989
- --mer-color__neutral-gray--700: #e1ecf9;
990
- --mer-color__neutral-gray--800: #fafbfd;
991
- --mer-color__neutral-gray--900: #f0f4fa;
992
- --mer-color__neutral-gray--1000: #ffffff;
993
-
994
- // tinted
995
- --mer-color__tinted-yellow--5: #faf9f6;
996
- --mer-color__tinted-yellow--60: #fafbfd;
997
- --mer-color__tinted-red--5: #faf5f7;
998
- --mer-color__tinted-red--60: #fbb2b7;
999
- --mer-color__tinted-green--5: #f2f7f8;
1000
- --mer-color__tinted-green--60: #94cac4;
1001
- --mer-color__tinted-blue--5: #f3f6fd;
1002
- --mer-color__tinted-blue--8: #eff5fd;
1003
- --mer-color__tinted-blue--10: #ecf3fd;
1004
- --mer-color__tinted-blue--20: #deebfe;
1005
- --mer-color__tinted-blue--30: #cfe3fe;
1006
- --mer-color__tinted-blue--50: #b1d2fe;
1007
-
1008
- // message
1009
- --mer-color__message-green--100: #208e80;
1010
- --mer-color__message-green--200: #208e80;
1011
- --mer-color__message-yellow--100: #dfa135;
1012
- --mer-color__message-yellow--200: #dfa135;
1013
- --mer-color__message-red--100: #da1a27;
1014
- --mer-color__message-red--200: #da1a27;
1015
- --mer-color__message-red--300: #4d0000;
1016
- --mer-color__message-red--400: #800000;
1017
- --mer-color__message-red--500: #ff9999;
1018
- --mer-color__message-red--600: #ff9999;
1019
- }
1020
-
1021
- @mixin foundation-colors--dark() {
1022
- // primary
1023
- --mer-color__primary-blue--200: #5ba7ff;
1024
- --mer-color__primary-blue--300: #5498e8;
1025
- --mer-color__primary-blue--400: #437dc0;
1026
- --mer-color__primary-blue--600: #335884;
1027
-
1028
- // neutral
1029
- --mer-color__neutral-gray--100: #e1ecf9;
1030
- --mer-color__neutral-gray--200: #d2ddeb;
1031
- --mer-color__neutral-gray--300: #c0ccd9;
1032
- --mer-color__neutral-gray--400: #9da9b6;
1033
- --mer-color__neutral-gray--450: #828b96;
1034
- --mer-color__neutral-gray--500: #56677a;
1035
- --mer-color__neutral-gray--550: #485665;
1036
- --mer-color__neutral-gray--600: #394552;
1037
- --mer-color__neutral-gray--650: #2d3a48;
1038
- --mer-color__neutral-gray--700: #242d3c;
1039
- --mer-color__neutral-gray--800: #181f2a;
1040
- --mer-color__neutral-gray--900: #11151c;
1041
- --mer-color__neutral-gray--1000: #1f2225;
1042
-
1043
- // tinted
1044
- --mer-color__tinted-yellow--5: #282a2d;
1045
- --mer-color__tinted-yellow--60: #ad8a53;
1046
- --mer-color__tinted-red--5: #29252f;
1047
- --mer-color__tinted-red--60: #aa5962;
1048
- --mer-color__tinted-green--5: #1c2830;
1049
- --mer-color__tinted-green--60: #317571;
1050
- --mer-color__tinted-blue--5: #1d2838;
1051
- --mer-color__tinted-blue--8: #1f2c3f;
1052
- --mer-color__tinted-blue--10: #1f2e43;
1053
- --mer-color__tinted-blue--20: #293d5c;
1054
- --mer-color__tinted-blue--30: #2e4e72;
1055
- --mer-color__tinted-blue--50: #3c689c;
1056
-
1057
- // message
1058
- --mer-color__message-green--100: #3fa89b;
1059
- --mer-color__message-green--200: #3fa89b;
1060
- --mer-color__message-yellow--100: #f9bd56;
1061
- --mer-color__message-yellow--200: #f9bd56;
1062
- --mer-color__message-red--100: #e35861;
1063
- --mer-color__message-red--200: #d54b54;
1064
- --mer-color__message-red--300: #ff6161;
1065
- --mer-color__message-red--400: #ff9999;
1066
- --mer-color__message-red--500: #800000;
1067
- --mer-color__message-red--600: #4d0000;
972
+ @mixin foundation-colors--light($globant-colors: false) {
973
+ @if $globant-colors {
974
+ // Globant Colors
975
+
976
+ // TODO: update with Globant colors when available
977
+ // primary
978
+ --mer-color__primary-blue--200: #005ac1;
979
+ --mer-color__primary-blue--300: #5498e8;
980
+ --mer-color__primary-blue--400: #437dc0;
981
+ --mer-color__primary-blue--600: #335884;
982
+
983
+ // neutral
984
+ --mer-color__neutral-gray--100: #4a5870;
985
+ --mer-color__neutral-gray--200: #49566d;
986
+ --mer-color__neutral-gray--300: #56677a;
987
+ --mer-color__neutral-gray--400: #56677a;
988
+ --mer-color__neutral-gray--450: #56677a;
989
+ --mer-color__neutral-gray--500: #828b96;
990
+ --mer-color__neutral-gray--550: #9da9b6;
991
+ --mer-color__neutral-gray--600: #aeb9c6;
992
+ --mer-color__neutral-gray--650: #c6d1dd;
993
+ --mer-color__neutral-gray--700: #e1ecf9;
994
+ --mer-color__neutral-gray--800: #fafbfd;
995
+ --mer-color__neutral-gray--900: #f0f4fa;
996
+ --mer-color__neutral-gray--1000: #ffffff;
997
+
998
+ // tinted
999
+ --mer-color__tinted-yellow--5: #faf9f6;
1000
+ --mer-color__tinted-yellow--60: #fafbfd;
1001
+ --mer-color__tinted-red--5: #faf5f7;
1002
+ --mer-color__tinted-red--60: #fbb2b7;
1003
+ --mer-color__tinted-green--5: #f2f7f8;
1004
+ --mer-color__tinted-green--60: #94cac4;
1005
+ --mer-color__tinted-blue--5: #f3f6fd;
1006
+ --mer-color__tinted-blue--8: #eff5fd;
1007
+ --mer-color__tinted-blue--10: #ecf3fd;
1008
+ --mer-color__tinted-blue--20: #deebfe;
1009
+ --mer-color__tinted-blue--30: #cfe3fe;
1010
+ --mer-color__tinted-blue--50: #b1d2fe;
1011
+
1012
+ // message
1013
+ --mer-color__message-green--100: #208e80;
1014
+ --mer-color__message-green--200: #208e80;
1015
+ --mer-color__message-yellow--100: #dfa135;
1016
+ --mer-color__message-yellow--200: #dfa135;
1017
+ --mer-color__message-red--100: #da1a27;
1018
+ --mer-color__message-red--200: #da1a27;
1019
+ --mer-color__message-red--300: #4d0000;
1020
+ --mer-color__message-red--400: #800000;
1021
+ --mer-color__message-red--500: #ff9999;
1022
+ --mer-color__message-red--600: #ff9999;
1023
+ } @else {
1024
+ // Mercury Colors
1025
+
1026
+ // primary
1027
+ --mer-color__primary-blue--200: #005ac1;
1028
+ --mer-color__primary-blue--300: #5498e8;
1029
+ --mer-color__primary-blue--400: #437dc0;
1030
+ --mer-color__primary-blue--600: #335884;
1031
+
1032
+ // neutral
1033
+ --mer-color__neutral-gray--100: #4a5870;
1034
+ --mer-color__neutral-gray--200: #49566d;
1035
+ --mer-color__neutral-gray--300: #56677a;
1036
+ --mer-color__neutral-gray--400: #56677a;
1037
+ --mer-color__neutral-gray--450: #56677a;
1038
+ --mer-color__neutral-gray--500: #828b96;
1039
+ --mer-color__neutral-gray--550: #9da9b6;
1040
+ --mer-color__neutral-gray--600: #aeb9c6;
1041
+ --mer-color__neutral-gray--650: #c6d1dd;
1042
+ --mer-color__neutral-gray--700: #e1ecf9;
1043
+ --mer-color__neutral-gray--800: #fafbfd;
1044
+ --mer-color__neutral-gray--900: #f0f4fa;
1045
+ --mer-color__neutral-gray--1000: #ffffff;
1046
+
1047
+ // tinted
1048
+ --mer-color__tinted-yellow--5: #faf9f6;
1049
+ --mer-color__tinted-yellow--60: #fafbfd;
1050
+ --mer-color__tinted-red--5: #faf5f7;
1051
+ --mer-color__tinted-red--60: #fbb2b7;
1052
+ --mer-color__tinted-green--5: #f2f7f8;
1053
+ --mer-color__tinted-green--60: #94cac4;
1054
+ --mer-color__tinted-blue--5: #f3f6fd;
1055
+ --mer-color__tinted-blue--8: #eff5fd;
1056
+ --mer-color__tinted-blue--10: #ecf3fd;
1057
+ --mer-color__tinted-blue--20: #deebfe;
1058
+ --mer-color__tinted-blue--30: #cfe3fe;
1059
+ --mer-color__tinted-blue--50: #b1d2fe;
1060
+
1061
+ // message
1062
+ --mer-color__message-green--100: #208e80;
1063
+ --mer-color__message-green--200: #208e80;
1064
+ --mer-color__message-yellow--100: #dfa135;
1065
+ --mer-color__message-yellow--200: #dfa135;
1066
+ --mer-color__message-red--100: #da1a27;
1067
+ --mer-color__message-red--200: #da1a27;
1068
+ --mer-color__message-red--300: #4d0000;
1069
+ --mer-color__message-red--400: #800000;
1070
+ --mer-color__message-red--500: #ff9999;
1071
+ --mer-color__message-red--600: #ff9999;
1072
+ }
1073
+ }
1074
+
1075
+ @mixin foundation-colors--dark($globant-colors: false) {
1076
+ @if $globant-colors {
1077
+ // Globant Colors
1078
+
1079
+ // primary
1080
+ --mer-color__primary-blue--200: #bfd732;
1081
+ --mer-color__primary-blue--300: #b4cc28;
1082
+ --mer-color__primary-blue--400: #96aa22;
1083
+ --mer-color__primary-blue--600: #697718;
1084
+
1085
+ // neutral
1086
+ --mer-color__neutral-gray--100: #ededed;
1087
+ --mer-color__neutral-gray--200: #dfdfdf;
1088
+ --mer-color__neutral-gray--300: #cdcdcd;
1089
+ --mer-color__neutral-gray--400: #a9a9a9;
1090
+ --mer-color__neutral-gray--450: #8c8c8c;
1091
+ --mer-color__neutral-gray--500: #686868;
1092
+ --mer-color__neutral-gray--550: #575757;
1093
+ --mer-color__neutral-gray--600: #464646;
1094
+ --mer-color__neutral-gray--650: #3b3b3b;
1095
+ --mer-color__neutral-gray--700: #303030;
1096
+ --mer-color__neutral-gray--800: #212121;
1097
+ --mer-color__neutral-gray--900: #171717;
1098
+ --mer-color__neutral-gray--1000: #000000;
1099
+
1100
+ // tinted
1101
+ //TODO: update 'tinted-blue' with tinted-primary' in globant and mercury.
1102
+ --mer-color__tinted-yellow--5: #282a2d;
1103
+ --mer-color__tinted-yellow--60: #ad8a53;
1104
+ --mer-color__tinted-red--5: #29252f;
1105
+ --mer-color__tinted-red--60: #aa5962;
1106
+ --mer-color__tinted-green--5: #1c2830;
1107
+ --mer-color__tinted-green--60: #317571;
1108
+ --mer-color__tinted-blue--5: #202118;
1109
+ --mer-color__tinted-blue--8: #242619;
1110
+ --mer-color__tinted-blue--10: #282a1a;
1111
+ --mer-color__tinted-blue--20: #383d1c;
1112
+ --mer-color__tinted-blue--30: #49501f;
1113
+ --mer-color__tinted-blue--50: #6a7624;
1114
+
1115
+ // message
1116
+ --mer-color__message-green--100: #208e80;
1117
+ --mer-color__message-green--200: #208e80;
1118
+ --mer-color__message-yellow--100: #dfa135;
1119
+ --mer-color__message-yellow--200: #dfa135;
1120
+ --mer-color__message-red--100: #da1a27;
1121
+ --mer-color__message-red--200: #da1a27;
1122
+ --mer-color__message-red--300: #4d0000;
1123
+ --mer-color__message-red--400: #800000;
1124
+ --mer-color__message-red--500: #ff9999;
1125
+ --mer-color__message-red--600: #ff9999;
1126
+ } @else {
1127
+ // Mercury Colors
1128
+
1129
+ // primary
1130
+ --mer-color__primary-blue--200: #5ba7ff;
1131
+ --mer-color__primary-blue--300: #5498e8;
1132
+ --mer-color__primary-blue--400: #437dc0;
1133
+ --mer-color__primary-blue--600: #335884;
1134
+
1135
+ // neutral
1136
+ --mer-color__neutral-gray--100: #e1ecf9;
1137
+ --mer-color__neutral-gray--200: #d2ddeb;
1138
+ --mer-color__neutral-gray--300: #c0ccd9;
1139
+ --mer-color__neutral-gray--400: #9da9b6;
1140
+ --mer-color__neutral-gray--450: #828b96;
1141
+ --mer-color__neutral-gray--500: #56677a;
1142
+ --mer-color__neutral-gray--550: #485665;
1143
+ --mer-color__neutral-gray--600: #394552;
1144
+ --mer-color__neutral-gray--650: #2d3a48;
1145
+ --mer-color__neutral-gray--700: #242d3c;
1146
+ --mer-color__neutral-gray--800: #181f2a;
1147
+ --mer-color__neutral-gray--900: #11151c;
1148
+ --mer-color__neutral-gray--1000: #1f2225;
1149
+
1150
+ // tinted
1151
+ --mer-color__tinted-yellow--5: #282a2d;
1152
+ --mer-color__tinted-yellow--60: #ad8a53;
1153
+ --mer-color__tinted-red--5: #29252f;
1154
+ --mer-color__tinted-red--60: #aa5962;
1155
+ --mer-color__tinted-green--5: #1c2830;
1156
+ --mer-color__tinted-green--60: #317571;
1157
+ --mer-color__tinted-blue--5: #1d2838;
1158
+ --mer-color__tinted-blue--8: #1f2c3f;
1159
+ --mer-color__tinted-blue--10: #1f2e43;
1160
+ --mer-color__tinted-blue--20: #293d5c;
1161
+ --mer-color__tinted-blue--30: #2e4e72;
1162
+ --mer-color__tinted-blue--50: #3c689c;
1163
+
1164
+ // message
1165
+ --mer-color__message-green--100: #3fa89b;
1166
+ --mer-color__message-green--200: #3fa89b;
1167
+ --mer-color__message-yellow--100: #f9bd56;
1168
+ --mer-color__message-yellow--200: #f9bd56;
1169
+ --mer-color__message-red--100: #e35861;
1170
+ --mer-color__message-red--200: #d54b54;
1171
+ --mer-color__message-red--300: #ff6161;
1172
+ --mer-color__message-red--400: #ff9999;
1173
+ --mer-color__message-red--500: #800000;
1174
+ --mer-color__message-red--600: #4d0000;
1175
+ }
1068
1176
  }
1069
1177
 
1070
1178
  @mixin font() {
@@ -9925,6 +10033,7 @@
9925
10033
  $light-theme: true,
9926
10034
  $prefers-color-scheme-dark: false,
9927
10035
  $prefers-color-scheme-light: false,
10036
+ $globant-colors: false,
9928
10037
 
9929
10038
  // Tokens
9930
10039
  $tokens: true,
@@ -18066,7 +18175,7 @@
18066
18175
  // Fixes issues in elements that force its color based on this property.
18067
18176
  // For example, the font color of the input with autocomplete (:-webkit-autofill)
18068
18177
  color-scheme: light;
18069
- @include foundation-colors--light();
18178
+ @include foundation-colors--light($globant-colors: $globant-colors);
18070
18179
  }
18071
18180
  }
18072
18181
  @if $colors and $tokens and $prefers-color-scheme-light {
@@ -18075,7 +18184,7 @@
18075
18184
  // Fixes issues in elements that force its color based on this property.
18076
18185
  // For example, the font color of the input with autocomplete (:-webkit-autofill)
18077
18186
  color-scheme: light;
18078
- @include foundation-colors--light();
18187
+ @include foundation-colors--light($globant-colors: $globant-colors);
18079
18188
  }
18080
18189
  }
18081
18190
  }
@@ -18086,7 +18195,7 @@
18086
18195
  // Fixes issues in elements that force its color based on this property.
18087
18196
  // For example, the font color of the input with autocomplete (:-webkit-autofill)
18088
18197
  color-scheme: dark;
18089
- @include foundation-colors--dark();
18198
+ @include foundation-colors--dark($globant-colors: $globant-colors);
18090
18199
  }
18091
18200
  }
18092
18201
  @if $colors and $tokens and $prefers-color-scheme-dark {
@@ -18095,7 +18204,7 @@
18095
18204
  // Fixes issues in elements that force its color based on this property.
18096
18205
  // For example, the font color of the input with autocomplete (:-webkit-autofill)
18097
18206
  color-scheme: dark;
18098
- @include foundation-colors--dark();
18207
+ @include foundation-colors--dark($globant-colors: $globant-colors);
18099
18208
  }
18100
18209
  }
18101
18210
  }
@@ -18367,6 +18476,7 @@
18367
18476
  $light-theme: false,
18368
18477
  $prefers-color-scheme-dark: false,
18369
18478
  $prefers-color-scheme-light: false,
18479
+ $globant-colors: false,
18370
18480
 
18371
18481
  // Tokens
18372
18482
  $tokens: false,
@@ -18438,6 +18548,7 @@
18438
18548
  $light-theme: $light-theme,
18439
18549
  $prefers-color-scheme-dark: $prefers-color-scheme-dark,
18440
18550
  $prefers-color-scheme-light: $prefers-color-scheme-light,
18551
+ $globant-colors: $globant-colors,
18441
18552
 
18442
18553
  // Tokens
18443
18554
  $tokens: $tokens,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@genexus/mercury",
3
- "version": "0.9.9",
3
+ "version": "0.9.11",
4
4
  "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
5
5
  "main": "dist/mercury.scss",
6
6
  "module": "dist/assets-manager.js",