Skip to content

Commit e05a162

Browse files
jaclyncjaclync
authored
[Woo POS] [Design System] Create a color palette for POS and corresponding SwiftUI colors (#15063)
2 parents ceb70bd + 877d6b1 commit e05a162

File tree

34 files changed

+1254
-0
lines changed

34 files changed

+1254
-0
lines changed

‎WooCommerce/Classes/POS/Colors/Color+POSColorPalette.swift‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import SwiftUI
2+
3+
extension Color {
4+
// MARK: - Primary Colors
5+
static var posPrimary: Color { Color(.posPrimary) }
6+
static var posOnPrimary: Color { Color(.posOnPrimary) }
7+
static var posPrimaryContainer: Color { Color(.posPrimaryContainer) }
8+
static var posOnPrimaryContainer: Color { Color(.posOnPrimaryContainer) }
9+
10+
// MARK: - Secondary Container Colors
11+
static var posSecondaryContainer: Color { Color(.posSecondaryContainer) }
12+
static var posOnSecondaryContainer: Color { Color(.posOnSecondaryContainer) }
13+
14+
// MARK: - Disabled Container Colors
15+
static var posDisabledContainer: Color { Color(.posDisabledContainer) }
16+
static var posOnDisabledContainer: Color { Color(.posOnDisabledContainer) }
17+
18+
// MARK: - Surface Colors
19+
static var posSurface: Color { Color(.posSurface) }
20+
static var posOnSurface: Color { Color(.posOnSurface) }
21+
static var posSurfaceDim: Color { Color(.posSurfaceDim) }
22+
static var posSurfaceBright: Color { Color(.posSurfaceBright) }
23+
static var posSurfaceContainerLowest: Color { Color(.posSurfaceContainerLowest) }
24+
static var posSurfaceContainerLow: Color { Color(.posSurfaceContainerLow) }
25+
static var posSurfaceContainerHighest: Color { Color(.posSurfaceContainerHighest) }
26+
27+
// MARK: - Surface Variant Colors
28+
static var posOnSurfaceVariantLowest: Color { Color(.posOnSurfaceVariantLowest) }
29+
static var posOnSurfaceVariantHighest: Color { Color(.posOnSurfaceVariantHighest) }
30+
31+
// MARK: - Inverse Surface Colors
32+
static var posInverseSurface: Color { Color(.posInverseSurface) }
33+
static var posOnInverseSurface: Color { Color(.posOnInverseSurface) }
34+
35+
// MARK: - Outline Colors
36+
static var posOutline: Color { Color(.posOutline) }
37+
static var posOutlineVariant: Color { Color(.posOutlineVariant) }
38+
39+
// MARK: - Status Colors
40+
static var posError: Color { Color(.posError) }
41+
static var posOnError: Color { Color(.posOnError) }
42+
static var posSuccess: Color { Color(.posSuccess) }
43+
static var posOnSuccess: Color { Color(.posOnSuccess) }
44+
static var posAlert: Color { Color(.posAlert) }
45+
static var posOnAlert: Color { Color(.posOnAlert) }
46+
47+
// MARK: - Text Colors
48+
static var posTextPrimary: Color { Color(.posTextPrimary) }
49+
static var posTextSecondary: Color { Color(.posTextSecondary) }
50+
static var posTextTertiary: Color { Color(.posTextTertiary) }
51+
52+
// MARK: - Other
53+
static var posShadow: Color { Color(.posShadow) }
54+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/Contents.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"info" : {
3+
"author" : "xcode",
4+
"version" : 1
5+
}
6+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posAlert.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0x18",
9+
"green" : "0x66",
10+
"red" : "0xF1"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0x18",
27+
"green" : "0x66",
28+
"red" : "0xF1"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posDisabledContainer.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xDE",
9+
"green" : "0xDC",
10+
"red" : "0xDC"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0x5E",
27+
"green" : "0x57",
28+
"red" : "0x50"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posError.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0x38",
9+
"green" : "0x36",
10+
"red" : "0xD6"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0x38",
27+
"green" : "0x36",
28+
"red" : "0xD6"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posInverseSurface.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0x17",
9+
"green" : "0x15",
10+
"red" : "0x10"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0xFF",
27+
"green" : "0xFF",
28+
"red" : "0xFF"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posOnAlert.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xFF",
9+
"green" : "0xFF",
10+
"red" : "0xFF"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0xFF",
27+
"green" : "0xFF",
28+
"red" : "0xFF"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posOnDisabledContainer.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xAD",
9+
"green" : "0xAA",
10+
"red" : "0xA7"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0x82",
27+
"green" : "0x7C",
28+
"red" : "0x78"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posOnError.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xFF",
9+
"green" : "0xFF",
10+
"red" : "0xFF"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0xFF",
27+
"green" : "0xFF",
28+
"red" : "0xFF"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posOnInverseSurface.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xFF",
9+
"green" : "0xFF",
10+
"red" : "0xFF"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0x17",
27+
"green" : "0x15",
28+
"red" : "0x10"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

0 commit comments

Comments
 (0)