Skip to content

Commit 62ef0e9

Browse files
mficzelmficzel
committed
FEATURE: Add css method that will parse css color values to instantiate the color helper
1 parent a11fa2a commit 62ef0e9

File tree

3 files changed

+110
-34
lines changed

3 files changed

+110
-34
lines changed

‎Classes/Eel/Color.php‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ class Color implements ProtectedContextAwareInterface
2323
private $alpha = 1;
2424

2525
/**
26-
* @param int $hue
27-
* @param int $saturation
28-
* @param int $lightness
29-
* @param float $alpha
26+
* @param int $hue 0-356
27+
* @param int $saturation 0-100
28+
* @param int $lightness 0-100
29+
* @param float $alpha 0-1
3030
* @return Color
3131
* @throws \Exception
3232
*/
@@ -57,14 +57,15 @@ public static function createFromHSL(int $hue, int $saturation, int $lightness,
5757
$color->saturation = $saturation;
5858
$color->lightness = $lightness;
5959
$color->alpha = $alpha;
60+
6061
return $color;
6162
}
6263

6364
/**
64-
* @param int $red
65-
* @param int $green
66-
* @param int $blue
67-
* @param float $alpha
65+
* @param int $red number 0-255
66+
* @param int $green 0-255
67+
* @param int $blue 0-255
68+
* @param float $alpha 0-1
6869
* @return Color
6970
* @throws \Exception
7071
*/
@@ -173,38 +174,41 @@ public function getAlpha(): float
173174

174175
public function __toString(): string
175176
{
176-
if ($this->alpha == 1) {
177-
return $this->hex();
178-
} else {
179-
return $this->rgb();
180-
}
177+
return $this->hex();
181178
}
182179

183180
public function rgb(): string
184181
{
185182
if ($this->alpha == 1) {
186-
return sprintf('rgb( %s, %s, %s)', $this->red, $this->green, $this->blue);
183+
return sprintf('rgb(%s, %s, %s)', $this->red, $this->green, $this->blue);
187184
} else {
188-
return sprintf('rgba( %s, %s, %s, %s)', $this->red, $this->green, $this->blue, $this->alpha);
185+
return sprintf('rgba(%s, %s, %s, %s)', $this->red, $this->green, $this->blue, $this->alpha);
189186
}
190187
}
191188

192189
public function hsl(): string
193190
{
194191
if ($this->alpha == 1) {
195-
return sprintf('hsl( %s, %s%%, %s%%)', $this->hue, $this->saturation, $this->lightness);
192+
return sprintf('hsl(%s, %s%%, %s%%)', $this->hue, $this->saturation, $this->lightness);
196193
} else {
197-
return sprintf('hsla( %s, %s%%, %s%%, %s)', $this->hue, $this->saturation, $this->lightness, $this->alpha);
194+
return sprintf('hsla(%s, %s%%, %s%%, %s)', $this->hue, $this->saturation, $this->lightness, $this->alpha);
198195
}
199196
}
200197

201198
public function hex(): string
202199
{
203-
return '#' . ColorLibrary::rgbToHex([
204-
'R' => $this->red,
205-
'G' => $this->green,
206-
'B' => $this->blue
207-
]);
200+
if ($this->alpha == 1) {
201+
return '#'
202+
. str_pad(dechex($this->red), 2, '0')
203+
. str_pad(dechex($this->green), 2, '0')
204+
. str_pad(dechex($this->blue), 2, '0');
205+
} else {
206+
return '#'
207+
. str_pad(dechex($this->red), 2, '0')
208+
. str_pad(dechex($this->green), 2, '0')
209+
. str_pad(dechex($this->blue), 2, '0')
210+
. str_pad(dechex(round($this->alpha * 255)), 2, '0');
211+
}
208212
}
209213

210214
/**
@@ -313,7 +317,6 @@ public function fadein(int $amount = self::DEFAULT_ADJUSTMENT): self
313317
);
314318
}
315319

316-
317320
/**
318321
* @param int $amount to desaturate the color
319322
* @return string

‎Classes/Eel/ColorHelper.php‎

Lines changed: 71 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,34 @@
66
class ColorHelper implements ProtectedContextAwareInterface
77
{
88

9+
const PATTERN_HEX_LONG = '/^#?(?<red>[0-9abcdefABCDEF]{2})(?<green>[0-9abcdefABCDEF]{2})(?<blue>[0-9abcdefABCDEF]{2})(?:(?<alpha>[0-9abcdefABCDEF]{2}))?^$/u';
10+
11+
const PATTERN_HEX_SHORT = '/#?(?<red>[0-9abcdefABCDEF]{1})(?<green>[0-9abcdefABCDEF]{1})(?<blue>[0-9abcdefABCDEF]{1})(?:(?<alpha>[0-9abcdefABCDEF]{1}))?$/u';
12+
13+
const PATTERN_RGBA = '/^rgba?\\s*\\(\\s*(?<red>[0-9\\.]+%?)\\s*,?\\s*(?<green>[0-9\\.]+%?)\\s*,?\\s*(?<blue>[0-9\\.]+%?)\\s*(?:,?\\s*(?<alpha>[0-9\\.]+%?)\\s*)?\\)$/u';
14+
15+
const PATTERN_HSLA = '/hsla?\\s*\\(\\s*(?<hue>[0-9\\.]+)\\s*,?\\s*(?<saturation>[0-9\\.]+%)\\s*,?\\s*(?<lightness>[0-9\\.]+%)\\s*(?:,?\\s*(?<alpha>[0-9\\.]+%?)\\s*)?\\)$/u';
16+
917
/**
10-
* @param $red
11-
* @param $green
12-
* @param $blue
13-
* @param $alpha
18+
* @param $red 0-255
19+
* @param $green 0-255
20+
* @param $blue 0-255
21+
* @param $alpha 0-255
1422
* @return Color
1523
*/
16-
public function rgb($red, $green, $blue, $alpha = 1): Color
24+
public function rgb($red, $green, $blue, $alpha = 255): Color
1725
{
1826
return Color::createFromRgb($red, $green, $blue, $alpha);
1927
}
2028

2129
/**
22-
* @param $hue
23-
* @param $saturatiom
24-
* @param $lightness
25-
* @param $alpha
30+
* @param $hue 0-355
31+
* @param $saturatiom 0-100
32+
* @param $lightness 0-100
33+
* @param $alpha 0-100
2634
* @return Color
2735
*/
28-
public function hsl($hue, $saturatiom, $lightness, $alpha = 1): Color
36+
public function hsl($hue, $saturatiom, $lightness, $alpha = 100): Color
2937
{
3038
return Color::createFromHSL($hue, $saturatiom, $lightness, $alpha);
3139
}
@@ -39,6 +47,59 @@ public function hex($hex): Color
3947
return Color::createFromHex($hex);
4048
}
4149

50+
/**
51+
* @param string $colorString
52+
* @return Color
53+
* @throws \Exception
54+
*/
55+
public function css(string $colorString): Color
56+
{
57+
if (preg_match(self::PATTERN_HEX_SHORT, $colorString, $matches)) {
58+
$red = hexdec($matches['red'].$matches['red']);
59+
$green = hexdec($matches['green'].$matches['green']);
60+
$blue = hexdec($matches['blue'].$matches['blue']);
61+
$alpha = hexdec(isset($matches['alpha']) ? $matches['alpha'] . $matches['alpha'] : 1.0);
62+
return Color::createFromRgb($red, $green, $blue, $alpha);
63+
} elseif (preg_match(self::PATTERN_HEX_LONG, $colorString, $matches)) {
64+
$red = hexdec($matches['red']);
65+
$green = hexdec($matches['green']);
66+
$blue = hexdec($matches['blue']);
67+
$alpha = hexdec($matches['alpha'] ?? 1);
68+
return Color::createFromRgb($red, $green, $blue, $alpha);
69+
} elseif (preg_match(self::PATTERN_RGBA, $colorString, $matches)) {
70+
$red = $this->parseNumber($matches['red']);
71+
$green = $this->parseNumber($matches['red']);
72+
$blue = $this->parseNumber($matches['red']);
73+
$alpha = $this->parseNumber($matches['alpha'] ?? 1, 1);
74+
return Color::createFromRgb($red, $green, $blue, $alpha);
75+
} elseif (preg_match(self::PATTERN_HSLA, $colorString, $matches)) {
76+
$hue = $this->parseNumber($matches['hue'], 355);
77+
$saturation = $this->parseNumber($matches['saturation'], 100);
78+
$lightness = $this->parseNumber($matches['lightness'], 100);
79+
$alpha = $this->parseNumber($matches['alpha'] ?? 1, 1);
80+
return Color::createFromHSL($hue, $saturation, $lightness, $alpha);
81+
} else {
82+
return Color::createFromRgb(0,0,0,1);
83+
}
84+
}
85+
86+
/**
87+
* @param string $value
88+
* @param int $max
89+
* @return float
90+
*/
91+
protected function parseNumber(string $value, int $max = 255): float
92+
{
93+
if (substr($value, -1) == '%') {
94+
$number = (int)(
95+
substr($value, 0, -1)
96+
);
97+
return $max * ($number / 100);
98+
} else {
99+
return (float) $value;
100+
}
101+
}
102+
42103
/**
43104
* @param string $methodName
44105
* @return bool

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
This internally uses a copy of mexitek/phpcolors to do the conversions
55
between hex, rgb and hsl color representations.
66

7+
**Attention: This package is a first kind of naive prototype to implement
8+
color transformations for Fusion. If this turns out to be valuable it should
9+
be impoved with netter color math and pronbly a fully fledged css color
10+
parser.**
11+
712
## Usage
813

914
The package provides the `Color` helper that exposes the following methods to Fusion.
@@ -16,7 +21,14 @@ Colors can be created from hex, rgb and hsl values
1621
- `color = ${ Color.hsl(156, 25, 75) }` expects three integers a degree 0-355 and two percent values 0-100
1722

1823
The methods rgb and hsl allow to specify the alpha as fourth argument
19-
expecting a float between 0 and 1 `color = ${ Color.hsl(156, 25, 75, 0.5) }`
24+
expecting a float between 0 and 1 `color = ${ Color.hsl(156, 25, 75, 0.5) }`
25+
26+
If you have a color value specified as css color string you can use the
27+
`Color.css` method to instantiate the color.
28+
29+
- `color = ${ Color.css('#80e619') }`
30+
- `color = ${ Color.css('rbg( 10%, 50%, 0%, 50%)') }`
31+
- `color = ${ Color.css('hsl( 270, 10%, 50%, 0.5)') }`
2032

2133
### Manipulating
2234

0 commit comments

Comments
 (0)