Skip to content

Commit 9da3441

Browse files
JordanConnorJordanConnor
authored
Use asymmetric colours for the badge background (#172)
1 parent 6d11b28 commit 9da3441

31 files changed

+360
-54
lines changed

‎assets/android/src/SemanticColorsDark.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ val compoundColorsDark = SemanticColors(
3636
bgActionSecondaryHovered = DarkColorTokens.colorAlphaGray200,
3737
bgActionSecondaryPressed = DarkColorTokens.colorAlphaGray300,
3838
bgActionSecondaryRest = DarkColorTokens.colorThemeBg,
39-
bgBadgeAccent = DarkColorTokens.colorAlphaGreen300,
40-
bgBadgeDefault = DarkColorTokens.colorAlphaGray300,
41-
bgBadgeInfo = DarkColorTokens.colorAlphaBlue300,
39+
bgBadgeAccent = DarkColorTokens.colorAlphaGreen500,
40+
bgBadgeDefault = DarkColorTokens.colorAlphaGray500,
41+
bgBadgeInfo = DarkColorTokens.colorAlphaBlue500,
4242
bgCanvasDefault = DarkColorTokens.colorThemeBg,
4343
bgCanvasDefaultLevel1 = DarkColorTokens.colorGray300,
4444
bgCanvasDisabled = DarkColorTokens.colorGray200,

‎assets/android/src/SemanticColorsDarkHc.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ val compoundColorsHcDark = SemanticColors(
3636
bgActionSecondaryHovered = DarkHcColorTokens.colorAlphaGray200,
3737
bgActionSecondaryPressed = DarkHcColorTokens.colorAlphaGray300,
3838
bgActionSecondaryRest = DarkHcColorTokens.colorThemeBg,
39-
bgBadgeAccent = DarkHcColorTokens.colorAlphaGreen300,
40-
bgBadgeDefault = DarkHcColorTokens.colorAlphaGray300,
41-
bgBadgeInfo = DarkHcColorTokens.colorAlphaBlue300,
39+
bgBadgeAccent = DarkHcColorTokens.colorAlphaGreen500,
40+
bgBadgeDefault = DarkHcColorTokens.colorAlphaGray500,
41+
bgBadgeInfo = DarkHcColorTokens.colorAlphaBlue500,
4242
bgCanvasDefault = DarkHcColorTokens.colorThemeBg,
4343
bgCanvasDefaultLevel1 = DarkHcColorTokens.colorGray300,
4444
bgCanvasDisabled = DarkHcColorTokens.colorGray200,

‎assets/android/src/SemanticColorsLight.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ val compoundColorsLight = SemanticColors(
3636
bgActionSecondaryHovered = LightColorTokens.colorAlphaGray200,
3737
bgActionSecondaryPressed = LightColorTokens.colorAlphaGray300,
3838
bgActionSecondaryRest = LightColorTokens.colorThemeBg,
39-
bgBadgeAccent = LightColorTokens.colorAlphaGreen300,
40-
bgBadgeDefault = LightColorTokens.colorAlphaGray300,
41-
bgBadgeInfo = LightColorTokens.colorAlphaBlue300,
39+
bgBadgeAccent = LightColorTokens.colorAlphaGreen400,
40+
bgBadgeDefault = LightColorTokens.colorAlphaGray400,
41+
bgBadgeInfo = LightColorTokens.colorAlphaBlue400,
4242
bgCanvasDefault = LightColorTokens.colorThemeBg,
4343
bgCanvasDefaultLevel1 = LightColorTokens.colorThemeBg,
4444
bgCanvasDisabled = LightColorTokens.colorGray200,

‎assets/android/src/SemanticColorsLightHc.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ val compoundColorsHcLight = SemanticColors(
3636
bgActionSecondaryHovered = LightHcColorTokens.colorAlphaGray200,
3737
bgActionSecondaryPressed = LightHcColorTokens.colorAlphaGray300,
3838
bgActionSecondaryRest = LightHcColorTokens.colorThemeBg,
39-
bgBadgeAccent = LightHcColorTokens.colorAlphaGreen300,
40-
bgBadgeDefault = LightHcColorTokens.colorAlphaGray300,
41-
bgBadgeInfo = LightHcColorTokens.colorAlphaBlue300,
39+
bgBadgeAccent = LightHcColorTokens.colorAlphaGreen400,
40+
bgBadgeDefault = LightHcColorTokens.colorAlphaGray400,
41+
bgBadgeInfo = LightHcColorTokens.colorAlphaBlue400,
4242
bgCanvasDefault = LightHcColorTokens.colorThemeBg,
4343
bgCanvasDefaultLevel1 = LightHcColorTokens.colorThemeBg,
4444
bgCanvasDisabled = LightHcColorTokens.colorGray200,

‎assets/ios/swift/Colors.xcassets/bgBadgeAccent.colorset/Contents.json‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"colors": [
3+
{
4+
"idiom": "universal",
5+
"color": {
6+
"color-space": "srgb",
7+
"components": {
8+
"alpha": "0.2300",
9+
"red": "0.0275",
10+
"green": "0.7137",
11+
"blue": "0.3804"
12+
}
13+
}
14+
},
15+
{
16+
"idiom": "universal",
17+
"appearances": [
18+
{
19+
"appearance": "contrast",
20+
"value": "high"
21+
}
22+
],
23+
"color": {
24+
"color-space": "srgb",
25+
"components": {
26+
"alpha": "0.3200",
27+
"red": "0.0196",
28+
"green": "0.7216",
29+
"blue": "0.4039"
30+
}
31+
}
32+
},
33+
{
34+
"idiom": "universal",
35+
"appearances": [
36+
{
37+
"appearance": "luminosity",
38+
"value": "dark"
39+
}
40+
],
41+
"color": {
42+
"color-space": "srgb",
43+
"components": {
44+
"alpha": "1.0000",
45+
"red": "0.0000",
46+
"green": "0.2392",
47+
"blue": "0.1608"
48+
}
49+
}
50+
},
51+
{
52+
"idiom": "universal",
53+
"appearances": [
54+
{
55+
"appearance": "luminosity",
56+
"value": "dark"
57+
},
58+
{
59+
"appearance": "contrast",
60+
"value": "high"
61+
}
62+
],
63+
"color": {
64+
"color-space": "srgb",
65+
"components": {
66+
"alpha": "1.0000",
67+
"red": "0.0000",
68+
"green": "0.2784",
69+
"blue": "0.1961"
70+
}
71+
}
72+
}
73+
],
74+
"info": {
75+
"author": "xcode",
76+
"version": 1
77+
}
78+
}

‎assets/ios/swift/Colors.xcassets/bgBadgeDefault.colorset/Contents.json‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"colors": [
3+
{
4+
"idiom": "universal",
5+
"color": {
6+
"color-space": "srgb",
7+
"components": {
8+
"alpha": "0.1200",
9+
"red": "0.0196",
10+
"green": "0.1804",
11+
"blue": "0.3804"
12+
}
13+
}
14+
},
15+
{
16+
"idiom": "universal",
17+
"appearances": [
18+
{
19+
"appearance": "contrast",
20+
"value": "high"
21+
}
22+
],
23+
"color": {
24+
"color-space": "srgb",
25+
"components": {
26+
"alpha": "0.1600",
27+
"red": "0.0196",
28+
"green": "0.1451",
29+
"blue": "0.3176"
30+
}
31+
}
32+
},
33+
{
34+
"idiom": "universal",
35+
"appearances": [
36+
{
37+
"appearance": "luminosity",
38+
"value": "dark"
39+
}
40+
],
41+
"color": {
42+
"color-space": "srgb",
43+
"components": {
44+
"alpha": "0.1500",
45+
"red": "0.9569",
46+
"green": "0.9686",
47+
"blue": "0.9804"
48+
}
49+
}
50+
},
51+
{
52+
"idiom": "universal",
53+
"appearances": [
54+
{
55+
"appearance": "luminosity",
56+
"value": "dark"
57+
},
58+
{
59+
"appearance": "contrast",
60+
"value": "high"
61+
}
62+
],
63+
"color": {
64+
"color-space": "srgb",
65+
"components": {
66+
"alpha": "0.2000",
67+
"red": "0.9255",
68+
"green": "0.9373",
69+
"blue": "0.9725"
70+
}
71+
}
72+
}
73+
],
74+
"info": {
75+
"author": "xcode",
76+
"version": 1
77+
}
78+
}

‎assets/ios/swift/Colors.xcassets/bgBadgeInfo.colorset/Contents.json‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"colors": [
3+
{
4+
"idiom": "universal",
5+
"color": {
6+
"color-space": "srgb",
7+
"components": {
8+
"alpha": "0.1600",
9+
"red": "0.0431",
10+
"green": "0.4157",
11+
"blue": "0.9765"
12+
}
13+
}
14+
},
15+
{
16+
"idiom": "universal",
17+
"appearances": [
18+
{
19+
"appearance": "contrast",
20+
"value": "high"
21+
}
22+
],
23+
"color": {
24+
"color-space": "srgb",
25+
"components": {
26+
"alpha": "0.2200",
27+
"red": "0.0196",
28+
"green": "0.3961",
29+
"blue": "0.9608"
30+
}
31+
}
32+
},
33+
{
34+
"idiom": "universal",
35+
"appearances": [
36+
{
37+
"appearance": "luminosity",
38+
"value": "dark"
39+
}
40+
],
41+
"color": {
42+
"color-space": "srgb",
43+
"components": {
44+
"alpha": "0.6300",
45+
"red": "0.0000",
46+
"green": "0.2353",
47+
"blue": "0.7412"
48+
}
49+
}
50+
},
51+
{
52+
"idiom": "universal",
53+
"appearances": [
54+
{
55+
"appearance": "luminosity",
56+
"value": "dark"
57+
},
58+
{
59+
"appearance": "contrast",
60+
"value": "high"
61+
}
62+
],
63+
"color": {
64+
"color-space": "srgb",
65+
"components": {
66+
"alpha": "0.5300",
67+
"red": "0.0039",
68+
"green": "0.3529",
69+
"blue": "0.9961"
70+
}
71+
}
72+
}
73+
],
74+
"info": {
75+
"author": "xcode",
76+
"version": 1
77+
}
78+
}

‎assets/ios/swift/CompoundColorTokens.swift‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ public class CompoundColorTokens {
1717
public let bgActionSecondaryHovered = CompoundCoreColorTokens.alphaGray200
1818
public let bgActionSecondaryPressed = CompoundCoreColorTokens.alphaGray300
1919
public let bgActionSecondaryRest = CompoundCoreColorTokens.themeBg
20-
public let bgBadgeAccent = CompoundCoreColorTokens.alphaGreen300
21-
public let bgBadgeDefault = CompoundCoreColorTokens.alphaGray300
22-
public let bgBadgeInfo = CompoundCoreColorTokens.alphaBlue300
20+
public let bgBadgeAccent = Color("bgBadgeAccent", bundle: Bundle.module)
21+
public let bgBadgeDefault = Color("bgBadgeDefault", bundle: Bundle.module)
22+
public let bgBadgeInfo = Color("bgBadgeInfo", bundle: Bundle.module)
2323
public let bgCanvasDefault = CompoundCoreColorTokens.themeBg
2424
public let bgCanvasDefaultLevel1 = Color("bgCanvasDefaultLevel1", bundle: Bundle.module)
2525
public let bgCanvasDisabled = CompoundCoreColorTokens.gray200

‎assets/ios/swift/CompoundUIColorTokens.swift‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ public class CompoundUIColorTokens {
1717
public let bgActionSecondaryHovered = CompoundCoreUIColorTokens.alphaGray200
1818
public let bgActionSecondaryPressed = CompoundCoreUIColorTokens.alphaGray300
1919
public let bgActionSecondaryRest = CompoundCoreUIColorTokens.themeBg
20-
public let bgBadgeAccent = CompoundCoreUIColorTokens.alphaGreen300
21-
public let bgBadgeDefault = CompoundCoreUIColorTokens.alphaGray300
22-
public let bgBadgeInfo = CompoundCoreUIColorTokens.alphaBlue300
20+
public let bgBadgeAccent = UIColor(named: "bgBadgeAccent", in: Bundle.module, compatibleWith: nil)!
21+
public let bgBadgeDefault = UIColor(named: "bgBadgeDefault", in: Bundle.module, compatibleWith: nil)!
22+
public let bgBadgeInfo = UIColor(named: "bgBadgeInfo", in: Bundle.module, compatibleWith: nil)!
2323
public let bgCanvasDefault = CompoundCoreUIColorTokens.themeBg
2424
public let bgCanvasDefaultLevel1 = UIColor(named: "bgCanvasDefaultLevel1", in: Bundle.module, compatibleWith: nil)!
2525
public let bgCanvasDisabled = CompoundCoreUIColorTokens.gray200

‎assets/web/css/cpd-common-semantic.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,6 @@
4444
--cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
4545
--cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
4646
--cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
47-
--cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
48-
--cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
49-
--cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-300);
5047
--cpd-color-border-disabled: var(--cpd-color-gray-500);
5148
--cpd-color-border-focused: var(--cpd-color-blue-900);
5249
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);

0 commit comments

Comments
 (0)