Skip to content

Commit ee96af2

Browse files
andhongandhong
authored
Merge pull request #159 from lumihq/status-pill-color-change
Added additional accent colors and added background fill to pills
2 parents 7875209 + 4cf8744 commit ee96af2

File tree

5 files changed

+51
-11
lines changed

5 files changed

+51
-11
lines changed

‎docs/Examples/Color.example.purs

+9-3
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,17 @@ links"""
8585
"""Input dropdown row hover background color
8686
selected table row background color"""
8787
, colorPanel _.accent1 "Accent 1" """Indicates good or complete status"""
88-
, colorPanel _.accent13 "Accent 1 - 15%" """Faded for focus borders/backgrounds"""
88+
, colorPanel _.accent11 "Accent 1 - 60%" """Faded for focus borders/backgrounds"""
89+
, colorPanel _.accent12 "Accent 1 - 30%" """Status pills, small accent backgrounds"""
90+
, colorPanel _.accent13 "Accent 1 - 20%" """Banner backgrounds, large accent backgrounds"""
8991
, colorPanel _.accent2 "Accent 2" """Indicates pending, needs attention"""
90-
, colorPanel _.accent23 "Accent 2 - 15%" """Faded for focus borders/backgrounds"""
92+
, colorPanel _.accent21 "Accent 2 - 60%" """Faded for focus borders/backgrounds"""
93+
, colorPanel _.accent22 "Accent 2 - 30%" """Status pills, small accent backgrounds"""
94+
, colorPanel _.accent23 "Accent 2 - 20%" """Banner backgrounds"""
9195
, colorPanel _.accent3 "Accent 3" """Indicates a problem, warning"""
92-
, colorPanel _.accent33 "Accent 3 - 15%" """Faded for focus borders/backgrounds"""
96+
, colorPanel _.accent31 "Accent 3 - 60%" """Faded for focus borders/backgrounds"""
97+
, colorPanel _.accent32 "Accent 3 - 30%" """Status pills, small accent backgrounds"""
98+
, colorPanel _.accent33 "Accent 3 - 20%" """Banner backgrounds, large accent backgrounds"""
9399
, colorPanel _.white "White" """Primary button text"""
94100
]
95101
]

‎src/Lumi/Components/Button.purs

+6
Original file line numberDiff line numberDiff line change
@@ -265,10 +265,16 @@ styles = jss
265265
, "&[data-color=\"primary-3\"]": buttonColorHoverMixin colors.primary3
266266
, "&[data-color=\"primary-4\"]": buttonColorHoverMixin colors.primary4
267267
, "&[data-color=\"accent-1\"]": buttonColorHoverMixin colors.accent1
268+
, "&[data-color=\"accent-1-1\"]": buttonColorHoverMixin colors.accent11
269+
, "&[data-color=\"accent-1-2\"]": buttonColorHoverMixin colors.accent12
268270
, "&[data-color=\"accent-1-3\"]": buttonColorHoverMixin colors.accent13
269271
, "&[data-color=\"accent-2\"]": buttonColorHoverMixin colors.accent2
272+
, "&[data-color=\"accent-2-1\"]": buttonColorHoverMixin colors.accent21
273+
, "&[data-color=\"accent-2-2\"]": buttonColorHoverMixin colors.accent22
270274
, "&[data-color=\"accent-2-3\"]": buttonColorHoverMixin colors.accent23
271275
, "&[data-color=\"accent-3\"]": buttonColorHoverMixin colors.accent3
276+
, "&[data-color=\"accent-3-1\"]": buttonColorHoverMixin colors.accent31
277+
, "&[data-color=\"accent-3-2\"]": buttonColorHoverMixin colors.accent32
272278
, "&[data-color=\"accent-3-3\"]": buttonColorHoverMixin colors.accent33
273279
, "&[data-color=\"white\"]": buttonColorHoverMixin colors.white
274280
, "&[data-color=\"finished\"]": buttonColorHoverMixin colors.primary

‎src/Lumi/Components/Color.purs

+18
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,16 @@ type ColorMap a =
3333
, primary4 :: a
3434
, secondary :: a
3535
, accent1 :: a
36+
, accent11 :: a
37+
, accent12 :: a
3638
, accent13 :: a
3739
, accent2 :: a
40+
, accent21 :: a
41+
, accent22 :: a
3842
, accent23 :: a
3943
, accent3 :: a
44+
, accent31 :: a
45+
, accent32 :: a
4046
, accent33 :: a
4147
, white :: a
4248
, transparent :: a
@@ -60,10 +66,16 @@ colors =
6066
, primary4: rgb 0xed 0xf2 0xfd
6167
, secondary: rgb 0x91 0x90 0x8d
6268
, accent1: rgb 0x49 0xb8 0x60
69+
, accent11: rgb 0x78 0xdd 0x8d
70+
, accent12: rgb 0xbc 0xee 0xc6
6371
, accent13: rgb 0xe4 0xf5 0xe7
6472
, accent2: rgb 0xff 0xa5 0x02
73+
, accent21: rgb 0xff 0xb9 0x67
74+
, accent22: rgb 0xff 0xdc 0xb3
6575
, accent23: rgb 0xff 0xee 0xd9
6676
, accent3: rgb 0xf1 0x50 0x0d
77+
, accent31: rgb 0xf7 0x96 0x6d
78+
, accent32: rgb 0xfb 0xca 0xb6
6779
, accent33: rgb 0xfd 0xe5 0xdb
6880
, white: rgb 0xff 0xff 0xff
6981
, transparent: rgba 0 0 0 0.0
@@ -87,10 +99,16 @@ colorNames =
8799
, primary4: ColorName "primary-4"
88100
, secondary: ColorName "secondary"
89101
, accent1: ColorName "accent-1"
102+
, accent11: ColorName "accent-1-1"
103+
, accent12: ColorName "accent-1-2"
90104
, accent13: ColorName "accent-1-3"
91105
, accent2: ColorName "accent-2"
106+
, accent21: ColorName "accent-2-1"
107+
, accent22: ColorName "accent-2-2"
92108
, accent23: ColorName "accent-2-3"
93109
, accent3: ColorName "accent-3"
110+
, accent31: ColorName "accent-3-1"
111+
, accent32: ColorName "accent-3-2"
94112
, accent33: ColorName "accent-3-3"
95113
, white: ColorName "white"
96114
, transparent: ColorName "transparent"

‎src/Lumi/Components/Pill.purs

+12-8
Original file line numberDiff line numberDiff line change
@@ -51,23 +51,27 @@ styles = jss
5151
, whiteSpace: "nowrap"
5252

5353
, "&[data-status=\"active\"]":
54-
{ color: cssStringHSLA colors.accent1
55-
, borderColor: cssStringHSLA colors.accent1
54+
{ color: cssStringHSLA colors.black
55+
, borderColor: cssStringHSLA colors.accent12
56+
, backgroundColor: cssStringHSLA colors.accent12
5657
}
5758

5859
, "&[data-status=\"warning\"]":
59-
{ color: cssStringHSLA colors.accent2
60-
, borderColor: cssStringHSLA colors.accent2
60+
{ color: cssStringHSLA colors.black
61+
, borderColor: cssStringHSLA colors.accent22
62+
, backgroundColor: cssStringHSLA colors.accent22
6163
}
6264

6365
, "&[data-status=\"error\"]":
64-
{ color: cssStringHSLA colors.accent3
65-
, borderColor: cssStringHSLA colors.accent3
66+
{ color: cssStringHSLA colors.black
67+
, borderColor: cssStringHSLA colors.accent32
68+
, backgroundColor: cssStringHSLA colors.accent32
6669
}
6770

6871
, "&[data-status=\"unknown\"]":
69-
{ color: cssStringHSLA colors.black1
70-
, borderColor: cssStringHSLA colors.black1
72+
{ color: cssStringHSLA colors.black
73+
, borderColor: cssStringHSLA colors.black4
74+
, backgroundColor: cssStringHSLA colors.black4
7175
}
7276
}
7377
}

‎src/Lumi/Components/Text.purs

+6
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,16 @@ styles =
194194
, "&[data-color=\"primary-3\"]": { color: cssStringHSLA colors.primary3 }
195195
, "&[data-color=\"primary-4\"]": { color: cssStringHSLA colors.primary4 }
196196
, "&[data-color=\"accent-1\"]": { color: cssStringHSLA colors.accent1 }
197+
, "&[data-color=\"accent-1-1\"]": { color: cssStringHSLA colors.accent11 }
198+
, "&[data-color=\"accent-1-2\"]": { color: cssStringHSLA colors.accent12 }
197199
, "&[data-color=\"accent-1-3\"]": { color: cssStringHSLA colors.accent13 }
198200
, "&[data-color=\"accent-2\"]": { color: cssStringHSLA colors.accent2 }
201+
, "&[data-color=\"accent-2-1\"]": { color: cssStringHSLA colors.accent21 }
202+
, "&[data-color=\"accent-2-2\"]": { color: cssStringHSLA colors.accent22 }
199203
, "&[data-color=\"accent-2-3\"]": { color: cssStringHSLA colors.accent23 }
200204
, "&[data-color=\"accent-3\"]": { color: cssStringHSLA colors.accent3 }
205+
, "&[data-color=\"accent-3-1\"]": { color: cssStringHSLA colors.accent31 }
206+
, "&[data-color=\"accent-3-2\"]": { color: cssStringHSLA colors.accent32 }
201207
, "&[data-color=\"accent-3-3\"]": { color: cssStringHSLA colors.accent33 }
202208
, "&[data-color=\"white\"]": { color: cssStringHSLA colors.white }
203209
, "&[data-color=\"secondary\"]": { color: cssStringHSLA colors.black1 }

0 commit comments

Comments
 (0)