Skip to content

Commit c861e2e

Browse files
bsastregxbsastregx
authored
[mercury] update globant colors and primary color tokens names (#381)
* update globant "message-green-**" color values * update "primary-blue" colors with just "primary" Now that globant colors have been included, the term "blue" is inconsistent * update showcase files
1 parent 6b1c416 commit c861e2e

File tree

12 files changed

+135
-135
lines changed

12 files changed

+135
-135
lines changed

‎packages/mercury/showcase/all.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mercury/showcase/scss/mercury.scss‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -830,8 +830,8 @@
830830
@mixin spinner($size) {
831831
width: $size;
832832
height: $size;
833-
border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
834-
border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
833+
border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
834+
border-top: calc($size / 5) solid var(--mer-color__primary--300);
835835
border-radius: 50%;
836836
animation: spin var(--mer-timing--regular) linear infinite;
837837

@@ -975,10 +975,10 @@
975975

976976
// TODO: update with Globant colors when available
977977
// 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;
978+
--mer-color__primary--200: #005ac1;
979+
--mer-color__primary--300: #5498e8;
980+
--mer-color__primary--400: #437dc0;
981+
--mer-color__primary--600: #335884;
982982

983983
// neutral
984984
--mer-color__neutral-gray--100: #4a5870;
@@ -1002,12 +1002,12 @@
10021002
--mer-color__tinted-red--60: #fbb2b7;
10031003
--mer-color__tinted-green--5: #f2f7f8;
10041004
--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;
1005+
--mer-color__tinted-primary--5: #f3f6fd;
1006+
--mer-color__tinted-primary--8: #eff5fd;
1007+
--mer-color__tinted-primary--10: #ecf3fd;
1008+
--mer-color__tinted-primary--20: #deebfe;
1009+
--mer-color__tinted-primary--30: #cfe3fe;
1010+
--mer-color__tinted-primary--50: #b1d2fe;
10111011

10121012
// message
10131013
--mer-color__message-green--100: #208e80;
@@ -1024,10 +1024,10 @@
10241024
// Mercury Colors
10251025

10261026
// 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;
1027+
--mer-color__primary--200: #005ac1;
1028+
--mer-color__primary--300: #5498e8;
1029+
--mer-color__primary--400: #437dc0;
1030+
--mer-color__primary--600: #335884;
10311031

10321032
// neutral
10331033
--mer-color__neutral-gray--100: #4a5870;
@@ -1051,12 +1051,12 @@
10511051
--mer-color__tinted-red--60: #fbb2b7;
10521052
--mer-color__tinted-green--5: #f2f7f8;
10531053
--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;
1054+
--mer-color__tinted-primary--5: #f3f6fd;
1055+
--mer-color__tinted-primary--8: #eff5fd;
1056+
--mer-color__tinted-primary--10: #ecf3fd;
1057+
--mer-color__tinted-primary--20: #deebfe;
1058+
--mer-color__tinted-primary--30: #cfe3fe;
1059+
--mer-color__tinted-primary--50: #b1d2fe;
10601060

10611061
// message
10621062
--mer-color__message-green--100: #208e80;
@@ -1077,10 +1077,10 @@
10771077
// Globant Colors
10781078

10791079
// 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;
1080+
--mer-color__primary--200: #bfd732;
1081+
--mer-color__primary--300: #b4cc28;
1082+
--mer-color__primary--400: #96aa22;
1083+
--mer-color__primary--600: #697718;
10841084

10851085
// neutral
10861086
--mer-color__neutral-gray--100: #ededed;
@@ -1105,16 +1105,16 @@
11051105
--mer-color__tinted-red--60: #aa5962;
11061106
--mer-color__tinted-green--5: #1c2830;
11071107
--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;
1108+
--mer-color__tinted-primary--5: #202118;
1109+
--mer-color__tinted-primary--8: #242619;
1110+
--mer-color__tinted-primary--10: #282a1a;
1111+
--mer-color__tinted-primary--20: #383d1c;
1112+
--mer-color__tinted-primary--30: #49501f;
1113+
--mer-color__tinted-primary--50: #6a7624;
11141114

11151115
// message
1116-
--mer-color__message-green--100: #208e80;
1117-
--mer-color__message-green--200: #208e80;
1116+
--mer-color__message-green--100: #b1e1b6;
1117+
--mer-color__message-green--200: #9ccba1;
11181118
--mer-color__message-yellow--100: #dfa135;
11191119
--mer-color__message-yellow--200: #dfa135;
11201120
--mer-color__message-red--100: #da1a27;
@@ -1127,10 +1127,10 @@
11271127
// Mercury Colors
11281128

11291129
// 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;
1130+
--mer-color__primary--200: #5ba7ff;
1131+
--mer-color__primary--300: #5498e8;
1132+
--mer-color__primary--400: #437dc0;
1133+
--mer-color__primary--600: #335884;
11341134

11351135
// neutral
11361136
--mer-color__neutral-gray--100: #e1ecf9;
@@ -1154,12 +1154,12 @@
11541154
--mer-color__tinted-red--60: #aa5962;
11551155
--mer-color__tinted-green--5: #1c2830;
11561156
--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;
1157+
--mer-color__tinted-primary--5: #1d2838;
1158+
--mer-color__tinted-primary--8: #1f2c3f;
1159+
--mer-color__tinted-primary--10: #1f2e43;
1160+
--mer-color__tinted-primary--20: #293d5c;
1161+
--mer-color__tinted-primary--30: #2e4e72;
1162+
--mer-color__tinted-primary--50: #3c689c;
11631163

11641164
// message
11651165
--mer-color__message-green--100: #3fa89b;
@@ -1320,9 +1320,9 @@
13201320

13211321
// Tokens Semantic
13221322
@mixin semantic-accent() {
1323-
--mer-accent__primary: var(--mer-color__primary-blue--200);
1324-
--mer-accent__primary--hover: var(--mer-color__primary-blue--400);
1325-
--mer-accent__primary--active: var(--mer-color__primary-blue--600);
1323+
--mer-accent__primary: var(--mer-color__primary--200);
1324+
--mer-accent__primary--hover: var(--mer-color__primary--400);
1325+
--mer-accent__primary--active: var(--mer-color__primary--600);
13261326
--mer-accent__primary--disabled: var(--mer-color__neutral-gray--500);
13271327
--mer-accent__primary--destructive: var(--mer-color__message-red--100);
13281328
--mer-accent__primary--destructive-hover: var(--mer-color__message-red--300);
@@ -1611,19 +1611,19 @@
16111611
--item__color--enabled: var(--mer-text__on-elevation);
16121612

16131613
// hover
1614-
--item__bg-color--hover: var(--mer-color__tinted-blue--5);
1615-
// --item__border-color--hover: var(--mer-color__tinted-blue--20); // to be defined later with design team
1614+
--item__bg-color--hover: var(--mer-color__tinted-primary--5);
1615+
// --item__border-color--hover: var(--mer-color__tinted-primary--20); // to be defined later with design team
16161616
--item__border-color--hover: transparent;
16171617
--item__color--hover: var(--mer-color__neutral-gray--100);
16181618

16191619
// selected
1620-
--item__bg-color--selected: var(--mer-color__tinted-blue--10);
1621-
--item__border-color--selected: var(--mer-color__tinted-blue--30);
1620+
--item__bg-color--selected: var(--mer-color__tinted-primary--10);
1621+
--item__border-color--selected: var(--mer-color__tinted-primary--30);
16221622
--item__color--selected: var(--mer-color__neutral-gray--100);
16231623

16241624
// selected + hover
1625-
--item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
1626-
--item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
1625+
--item__bg-color--selected-hover: var(--mer-color__tinted-primary--10);
1626+
--item__border-color--selected-hover: var(--mer-color__tinted-primary--20);
16271627
--item__color--selected-hover: var(--mer-color__neutral-gray--100);
16281628

16291629
// disabled
@@ -1738,14 +1738,14 @@
17381738
--tab-caption__color--enabled: var(--mer-text__neutral);
17391739

17401740
// hover
1741-
--tab-caption__bg-color--hover: var(--mer-color__tinted-blue--10);
1741+
--tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10);
17421742

17431743
// selected
17441744
--tab-caption__bg-color--selected-inline: transparent;
1745-
--tab-caption__bg-color--selected-stack: var(--mer-color__tinted-blue--10);
1745+
--tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10);
17461746
--tab-caption__border-color--selected-inline: var(--mer-accent__primary);
17471747
--tab-caption__border-color--selected-stack: var(
1748-
--mer-color__tinted-blue--20
1748+
--mer-color__tinted-primary--20
17491749
);
17501750
--tab-caption__color--selected: var(--mer-text__highlighted);
17511751

@@ -2471,8 +2471,8 @@
24712471
@mixin spinner($size) {
24722472
width: $size;
24732473
height: $size;
2474-
border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
2475-
border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
2474+
border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
2475+
border-top: calc($size / 5) solid var(--mer-color__primary--300);
24762476
border-radius: 50%;
24772477
animation: spin var(--mer-timing--regular) linear infinite;
24782478

@@ -4253,8 +4253,8 @@
42534253
@mixin code-tokens() {
42544254
// TODO: variable names should be updated to something more descriptive
42554255
--code__color-base: var(--mer-text__on-surface);
4256-
--code__color-blue: var(--mer-color__primary-blue--400);
4257-
--code__color-light-blue: var(--mer-color__primary-blue--200);
4256+
--code__color-blue: var(--mer-color__primary--400);
4257+
--code__color-light-blue: var(--mer-color__primary--200);
42584258
--code__color-red: var(--mer-color__message-red--200);
42594259
--code__color-green: var(--mer-color__message-green--200);
42604260
--code__bg-color: var(--mer-surface__elevation--01);
@@ -5065,8 +5065,8 @@
50655065
@mixin spinner($size) {
50665066
width: $size;
50675067
height: $size;
5068-
border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
5069-
border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
5068+
border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
5069+
border-top: calc($size / 5) solid var(--mer-color__primary--300);
50705070
border-radius: 50%;
50715071
animation: spin var(--mer-timing--regular) linear infinite;
50725072

@@ -5301,7 +5301,7 @@
53015301
&__edge {
53025302
$edge-border-width: var(--mer-border__width--lg);
53035303
$edge-border-style: solid;
5304-
$edge-color: var(--mer-color__tinted-blue--20);
5304+
$edge-color: var(--mer-color__tinted-primary--20);
53055305
border-color: transparent;
53065306
transition: var(--mer-timing--fast) border-color;
53075307

@@ -5959,7 +5959,7 @@
59595959
margin-block: var(--mer-spacing--xs);
59605960
padding-block: var(--mer-spacing--xs);
59615961
padding-inline: calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl);
5962-
border-inline-start: 4px solid var(--mer-color__primary-blue--400);
5962+
border-inline-start: 4px solid var(--mer-color__primary--400);
59635963

59645964
// First <p> don't add margin-block-start, because the <blockquote> adds it
59655965
& > p:first-of-type {
@@ -6941,8 +6941,8 @@
69416941
@mixin spinner($size) {
69426942
width: $size;
69436943
height: $size;
6944-
border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
6945-
border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
6944+
border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
6945+
border-top: calc($size / 5) solid var(--mer-color__primary--300);
69466946
border-radius: 50%;
69476947
animation: spin var(--mer-timing--regular) linear infinite;
69486948

@@ -6990,8 +6990,8 @@
69906990
--control__color: var(--mer-text__neutral);
69916991
}
69926992
&--processing {
6993-
--control__border-color: var(--mer-color__tinted-blue--50);
6994-
--control__bg-color: var(--mer-color__tinted-blue--8);
6993+
--control__border-color: var(--mer-color__tinted-primary--50);
6994+
--control__bg-color: var(--mer-color__tinted-primary--8);
69956995
--control__color: var(--mer-accent__primary);
69966996

69976997
// custom processing icon
@@ -8173,7 +8173,7 @@
81738173
// - - - - - - - - - - - - - - - - - - - -
81748174
// track
81758175
--slider-track__block-size: var(--mer-spacing--2xs);
8176-
--slider-track__bg-color--selected: var(--mer-color__primary-blue--200);
8176+
--slider-track__bg-color--selected: var(--mer-color__primary--200);
81778177
--slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650);
81788178
--slider-track__bg-color--selected-disabled: var(
81798179
--mer-accent__primary--disabled
@@ -9768,7 +9768,7 @@
97689768
}
97699769

97709770
%tree-view-drop--after {
9771-
background-color: var(--mer-color__primary-blue--200);
9771+
background-color: var(--mer-color__primary--200);
97729772
}
97739773

97749774
%tree-view-item__header {

‎packages/mercury/src/base/_common.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -585,8 +585,8 @@
585585
@mixin spinner($size) {
586586
width: $size;
587587
height: $size;
588-
border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
589-
border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
588+
border: calc($size / 5) solid var(--mer-color__tinted-primary--50);
589+
border-top: calc($size / 5) solid var(--mer-color__primary--300);
590590
border-radius: 50%;
591591
animation: spin var(--mer-timing--regular) linear infinite;
592592

‎packages/mercury/src/components/code/_tokens.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@mixin code-tokens() {
22
// TODO: variable names should be updated to something more descriptive
33
--code__color-base: var(--mer-text__on-surface);
4-
--code__color-blue: var(--mer-color__primary-blue--400);
5-
--code__color-light-blue: var(--mer-color__primary-blue--200);
4+
--code__color-blue: var(--mer-color__primary--400);
5+
--code__color-light-blue: var(--mer-color__primary--200);
66
--code__color-red: var(--mer-color__message-red--200);
77
--code__color-green: var(--mer-color__message-green--200);
88
--code__bg-color: var(--mer-surface__elevation--01);

‎packages/mercury/src/components/dialog/_dialog-styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
&__edge {
5454
$edge-border-width: var(--mer-border__width--lg);
5555
$edge-border-style: solid;
56-
$edge-color: var(--mer-color__tinted-blue--20);
56+
$edge-color: var(--mer-color__tinted-primary--20);
5757
border-color: transparent;
5858
transition: var(--mer-timing--fast) border-color;
5959

‎packages/mercury/src/components/markdown-viewer/_markdown-viewer-styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
margin-block: var(--mer-spacing--xs);
7474
padding-block: var(--mer-spacing--xs);
7575
padding-inline: calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl);
76-
border-inline-start: 4px solid var(--mer-color__primary-blue--400);
76+
border-inline-start: 4px solid var(--mer-color__primary--400);
7777

7878
// First <p> don't add margin-block-start, because the <blockquote> adds it
7979
& > p:first-of-type {

‎packages/mercury/src/components/pills/_pills-styles.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
--control__color: var(--mer-text__neutral);
3535
}
3636
&--processing {
37-
--control__border-color: var(--mer-color__tinted-blue--50);
38-
--control__bg-color: var(--mer-color__tinted-blue--8);
37+
--control__border-color: var(--mer-color__tinted-primary--50);
38+
--control__bg-color: var(--mer-color__tinted-primary--8);
3939
--control__color: var(--mer-accent__primary);
4040

4141
// custom processing icon

‎packages/mercury/src/components/slider/_slider-styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
// - - - - - - - - - - - - - - - - - - - -
2222
// track
2323
--slider-track__block-size: var(--mer-spacing--2xs);
24-
--slider-track__bg-color--selected: var(--mer-color__primary-blue--200);
24+
--slider-track__bg-color--selected: var(--mer-color__primary--200);
2525
--slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650);
2626
--slider-track__bg-color--selected-disabled: var(
2727
--mer-accent__primary--disabled

‎packages/mercury/src/components/tree-view/_tree-view-styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
%tree-view-drop--after {
26-
background-color: var(--mer-color__primary-blue--200);
26+
background-color: var(--mer-color__primary--200);
2727
}
2828

2929
%tree-view-item__header {

0 commit comments

Comments
 (0)