Skip to content

Commit 3c84757

Browse files
birdofpreyrubirdofpreyru
committed
Updates color mixins; fixes a few problems with buttons
See topcoder-platform/community-app#773
1 parent fbc3a84 commit 3c84757

File tree

9 files changed

+65
-43
lines changed

9 files changed

+65
-43
lines changed

‎CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# Topcoder React UI Kit Changelog
22

3+
### v0.2.0
4+
- **[Breaking change]:** The following color constants have been dropped:
5+
`$tc-dark-blue-90`, `$tc-gold-70`, `$tc-gold-30`, `$tc-gold-10`; use instead:
6+
`$tc-dark-blue`, `$tc-yellow-70`, `$tc-yellow-30`, `tc-yellow-10`.
7+
8+
- Values of `$tc-gold`, `$tc-silver`, `$tc-bronze` color constants are updated
9+
(metal colors for placements, etc.). Additional colors introduced:
10+
`$tc-gold-110`, `$tc-gold-130`, `$tc-silver-110`, `$tc-silver-130`,
11+
`$tc-bronze-110`, `$tc-bronze-130`; these are intended for text color
12+
inside areas filled by metal colors: use `110` color variants for middle
13+
font size and larger, use `130` for small text size.
14+
315
### v0.1.0
416
The first release.
517

‎package-lock.json

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

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"prepublishOnly": "npm run build",
3232
"test": "npm run lint && npm run jest"
3333
},
34-
"version": "0.0.6",
34+
"version": "0.2.0",
3535
"dependencies": {
3636
"babel-jest": "^22.1.0",
3737
"react": "^16.2.0",

‎src/shared/components/buttons/themes/danger.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717

1818
.link,
1919
.regular {
20+
&:visited {
21+
color: $tc-white;
22+
}
23+
2024
&:focus {
2125
box-shadow: 0 0 2px 1px #ffd4d1;
2226
border-color: $tc-red;
@@ -36,7 +40,3 @@
3640
border-color: transparent;
3741
}
3842
}
39-
40-
.link:visited {
41-
color: $tc-white;
42-
}

‎src/shared/components/buttons/themes/default.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,14 @@
3434
* and real buttons (rendered as <button> elements). */
3535
.link,
3636
.regular {
37+
/* To prevent different styling of the button-like link once it has been
38+
* visited. */
39+
&:visited {
40+
@include tc-label-lg;
41+
42+
color: $tc-gray-80;
43+
}
44+
3745
&:focus {
3846
box-shadow: 0 0 2px 1px #cfe6ff;
3947
border-color: #59a7ff;
@@ -53,14 +61,6 @@
5361
}
5462
}
5563

56-
/* To prevent different styling of the button-like link once it has been
57-
* visited. */
58-
.link:visited {
59-
@include tc-label-lg;
60-
61-
color: $tc-gray-80;
62-
}
63-
6464
/* And a few extra classes to support XS, SM and LG sizes. */
6565

6666
.xs {

‎src/shared/components/buttons/themes/ghost.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
.button {
88
background: transparent;
99
border-color: transparent;
10-
color: #0b71e6;
10+
color: $tc-dark-blue-110;
1111
}
1212

1313
.disabled {
@@ -16,26 +16,26 @@
1616

1717
.link,
1818
.regular {
19+
&:visited {
20+
color: $tc-dark-blue-110;
21+
}
22+
1923
&:focus {
20-
box-shadow: 0 0 2px 1px #cfe6ff;
21-
border-color: #59a7ff;
24+
box-shadow: 0 0 2px 1px $tc-dark-blue-30;
25+
border-color: $tc-dark-blue-70;
2226
outline: none;
2327
}
2428

2529
&:hover {
2630
background-image: none;
2731
border-color: transparent;
28-
color: #59a7ff;
32+
color: $tc-dark-blue-70;
2933
}
3034

3135
&:active {
3236
background-image: none;
3337
box-shadow: none;
3438
border-color: transparent;
35-
color: $tc-dark-blue-90;
39+
color: $tc-dark-blue;
3640
}
3741
}
38-
39-
.link:visited {
40-
color: #0b71e6;
41-
}

‎src/shared/components/buttons/themes/primary.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import "default";
66

77
.button {
8-
background: $tc-dark-blue-90;
8+
background: $tc-dark-blue;
99
border-color: transparent;
1010
color: $tc-white;
1111
}
@@ -17,6 +17,10 @@
1717

1818
.link,
1919
.regular {
20+
&:visited {
21+
color: $tc-white;
22+
}
23+
2024
&:focus {
2125
box-shadow: 0 0 2px 1px #59a7ff;
2226
border-color: #0b71e6;
@@ -35,7 +39,3 @@
3539
border-color: transparent;
3640
}
3741
}
38-
39-
.link:visited {
40-
color: $tc-white;
41-
}

‎src/shared/components/buttons/themes/secondary.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717

1818
.link,
1919
.regular {
20+
&:visited {
21+
color: $tc-white;
22+
}
23+
2024
&:focus {
2125
box-shadow: 0 0 2px 1px #59a7ff;
2226
border-color: $tc-gray-50;
@@ -36,7 +40,3 @@
3640
border-color: transparent;
3741
}
3842
}
39-
40-
.link:visited {
41-
color: $tc-white;
42-
}

‎src/styles/_mixins/variables.scss

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,22 @@ $tc-purple-70: #b47dd6;
8383
$tc-purple-30: #e2c7f2;
8484
$tc-purple-10: #f8f2fb;
8585

86-
/* TC Metal colors - Badges. */
87-
$tc-gold: #fce217;
88-
$tc-silver: #94bef5;
89-
$tc-bronze: #bd731e;
86+
/* TC Metal colors - Badges.
87+
*
88+
* For metals the level 100 is the base metal color; 110 is for text inside
89+
* the metal-colored areas; and 130 is for small text inside metal-colored
90+
* areas, for better visibility. */
91+
$tc-gold-130: #865e07;
92+
$tc-gold-110: #c99014;
93+
$tc-gold-100: #ffd84d;
94+
95+
$tc-silver-130: #554e48;
96+
$tc-silver-110: #716d67;
97+
$tc-silver-100: #d1d0cf;
98+
99+
$tc-bronze-130: #733d17;
100+
$tc-bronze-110: #854e29;
101+
$tc-bronze-100: #d98d64;
90102

91103
/* Pastel colors, used for levels. */
92104
$tc-pastel-green: #25c089;
@@ -96,6 +108,11 @@ $tc-pastel-crimson: #e6175c;
96108

97109
/* Color aliases. */
98110

111+
/* Base metal colors. */
112+
$tc-gold: $tc-gold-100;
113+
$tc-silver: $tc-silver-100;
114+
$tc-bronze: $tc-bronze-100;
115+
99116
/* Brand colors. */
100117
$tc-dark-blue: $tc-dark-blue-100;
101118
$tc-light-blue: $tc-light-blue-100;
@@ -111,10 +128,3 @@ $tc-level-2: $tc-pastel-green;
111128
$tc-level-3: $tc-pastel-blue;
112129
$tc-level-4: $tc-pastel-yellow;
113130
$tc-level-5: $tc-pastel-crimson;
114-
115-
/* TODO: The following constants are here just for back
116-
* compatibility, they will be removed later, don't use them! */
117-
$tc-dark-blue-90: $tc-dark-blue-100;
118-
$tc-gold-70: $tc-yellow-70;
119-
$tc-gold-30: $tc-yellow-30;
120-
$tc-gold-10: $tc-yellow-10;

0 commit comments

Comments
 (0)