Skip to content

Commit

Permalink
Implement legacyCSS option
Browse files Browse the repository at this point in the history
  • Loading branch information
@elchininet
elchininet committed Jul 12, 2023
1 parent 41c8855 commit 3048239
Show file tree
Hide file tree
Showing 23 changed files with 2,269 additions and 1,004 deletions.
49 changes: 27 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,17 +103,17 @@ The most wonderful thing about `colortranslator` is that you don‘t need to spe
| `rgb(255, 0, 255)` | Functional RGB notation |
| `rgba(255, 0, 255, 0.5)` | Functional RGB notation with alpha |
| `rgb(255 0 255)` | Functional RGB notation (CSS Colors 4 space-separated) |
| `rgba(255 0 255 / 0.5)` | Functional RGB notation with alpha (CSS Colors 4 space-separated) |
| `rgba(255 0 255 / 50%)` | Functional RGB notation CSS with alpha in percenatages (Colors 4 space-separated) |
| `rgb(255 0 255 / 0.5)` | Functional RGB notation with alpha (CSS Colors 4 space-separated) |
| `rgb(255 0 255 / 50%)` | Functional RGB notation CSS with alpha in percenatages (Colors 4 space-separated) |
| `hsl(300, 100%, 50%)` | Functional HSL notation |
| `hsl(300grad, 100%, 50%)` | Functional HSL notation with hue in grads |
| `hsl(300deg, 100%, 50%)` | Functional HSL notation with hue in degrees |
| `hsl(5.24rad, 100%, 50%)` | Functional HSL notation with hue in radians |
| `hsl(0.83turn, 100%, 50%)` | Functional HSL notation with hue in turns |
| `hsla(300, 100%, 50%, 0.5)` | Functional HSL notation with alpha |
| `hsl(300 100% 50%)` | Functional HSL notation (CSS Colors 4 space-separated) |
| `hsla(300 100% 50% / 0.5)` | Functional HSL notation with alpha (CSS Colors 4 space-separated) |
| `hsla(300 100% 50% / 50%)` | Functional HSL notation with alpha in percentages (CSS Colors 4 space-separated) |
| `hsl(300 100% 50% / 0.5)` | Functional HSL notation with alpha (CSS Colors 4 space-separated) |
| `hsl(300 100% 50% / 50%)` | Functional HSL notation with alpha in percentages (CSS Colors 4 space-separated) |
| `cmyk(0%, 100%, 100%, 0%)` | Functional CMYK notation with percentages |
| `cmyk(0%, 100%, 100%, 0%, 1)` | Functional CMYK notation with percentages and alpha |
| `cmyk(0% 100% 100% 0%)` | Functional CMYK notation with percentages (CSS Colors 4 space-separated) |
Expand Down Expand Up @@ -165,7 +165,8 @@ It is possible to instantiate the class using any of the previous inputs.

```typescript
interface Options {
decimals?: number; // defaults to 6
decimals?: number; // defaults to 6
legacyCSS: boolean; // defaults to false
}
```

Expand All @@ -178,7 +179,7 @@ const hex = new ColorTranslator('#FF00FF');

const rgb = new ColorTranslator('rgb(255, 0, 0)');

const hsl = new ColorTranslator('hsl(50, 20%, 90%)');
const hsl = new ColorTranslator('hsl(50 20% 90% / 0.5)');

const hsla = new ColorTranslator({ r: 115, g: 200, b: 150, a: 0.5 });

Expand Down Expand Up @@ -281,8 +282,8 @@ const color = new ColorTranslator('#FF00FF', { decimals: 2 });
color.R; // 255
color.G; // 0
color.B; // 255
color.RGB; // rgb(255,0,255)
color.HSLA; // hsla(300,100%,50%,1)
color.RGB; // rgb(255 0 255)
color.HSLA; // hsl(300 100% 50% / 1)
color.options; // { decimals: 2 }
```

Expand All @@ -292,6 +293,10 @@ For the static methods, it is not needed to specify the input color model, the A

There are 43 static methods available, 16 of them to convert colors, 12 to create color blends, 12 to mix colors, one to get shades, one to get tints, and one to create color harmonies.

>Note: the library tries to detect some options automatically if you don‘t send them in the [options object](#options-object). These are the rules for this autodetection:
>
> * `legacyCSS`: if this option is set, then its value prevail, if it is not set, and all the CSS inputs are provided in CSS Level 3, then this option will be `true`, otherwise it will take its default value which is `false`.
###### Color conversion static methods

The static methods to convert colors accept any of the mentioned inputs as the first parameter, the second parameter is optional and it is an [options object](#options-object) (this second option is not present in the methods to generate HEX colors):
Expand Down Expand Up @@ -326,35 +331,35 @@ convertColorStaticMethod(
```javascript
ColorTranslator.toHEX('gold'); // #FFD700

ColorTranslator.toRGB('#FF00FF'); // rgb(255,0,255)
ColorTranslator.toRGB('#FF00FF'); // rgb(255 0 255)

ColorTranslator.toRGBA(
'hsl(50, 20%, 90%)',
{ decimals: 0 }
); // rgba(235,233,224,1)

ColorTranslator.toHSL('rgb(255, 0, 0)'); // hsl(0,100%,50%)
ColorTranslator.toHSL('rgb(255 0 0)'); // hsl(0 100% 50%)

ColorTranslator.toHSLA('rgba(0, 255, 255, 0.5)'); // hsla(180,100%,50%,0.5)

ColorTranslator.toCMYKObject('#F0F'); // {c: 0, m: 100, y: 0, k: 0}

ColorTranslator.toCMYK('#F0F'); // cmyk(0%,100%,0%,0%)
ColorTranslator.toCMYK('#F0F'); // cmyk(0% 100% 0% 0%)

ColorTranslator.toRGB(
{ h: 115, s: '70%', l: '45%' },
{ decimals: 0 }
); // rgb(48,195,34)
); // rgb(48 195 34)

ColorTranslator.toHSLA(
{ r: 115, g: 200, b: 150, a: 0.5 },
{ decimals: 1 }
); // hsla(144.7,43.6%,61.8%,0.5)
); // hsl(144.7 43.6% 61.8% / 0.5)

ColorTranslator.toHSLA(
{ r: 95, g: 23, b: 12, a: Math.SQRT1_2 },
{ decimals: 4 }
); // hsla(7.9518,77.5701%,20.9804%,0.7071)
); // hsl(7.9518 77.5701% 20.9804% / 0.7071)
```

You can also consult the [demo 3](https://elchininet.github.io/ColorTranslator/#demo3), and the [demo 4](https://elchininet.github.io/ColorTranslator/#demo4) to check the use of these static methods.
Expand Down Expand Up @@ -405,9 +410,9 @@ ColorTranslator.getBlendHEX('#FF0000', '#0000FF', 5);
ColorTranslator.getBlendHSLA('#FF000000', '#0000FFFF', 3);

// [
// "hsla(0,100%,50%,0)",
// "hsla(300,100%,25%,0.5)",
// "hsla(240,100%,50%,1)"
// "hsl(0 100% 50% / 0)",
// "hsl(300 100% 25% / 0.5)",
// "hsl(240 100% 50% / 1)"
// ]

ColorTranslator.getBlendRGBAObject('#F000', 'rgba(0,0,255,1)', 5);
Expand Down Expand Up @@ -463,7 +468,7 @@ ColorTranslator.getMixHEX(['#FF0000', '#0000FF']);

ColorTranslator.getMixHSL(['rgba(255, 0, 0, 1)', '#00FF00']);

// hsl(60,100%,50%)
// hsl(60 100% 50%)

ColorTranslator.getMixHEXAObject(['#F00', 'rgb(0, 0, 255)'], Mix.ADDITIVE);

Expand Down Expand Up @@ -565,12 +570,12 @@ ColorTranslator.getHarmony('#FF00FF');

// ["#FF00FF", "#00FF00"]

ColorTranslator.getHarmony('rgba(0, 255, 255, 0.5)', Harmony.ANALOGOUS);
ColorTranslator.getHarmony('rgba(0 255 255 / 0.5)', Harmony.ANALOGOUS);

// [
// "rgba(0,255,255,0.5)",
// "rgba(0,127.5,255,0.5)",
// "rgba(0,255,127.5,0.5)"
// "rgba(0 255 255 / 0.5)",
// "rgba(0 127.5 255 / 0.5)",
// "rgba(0 255 127.5 / 0.5)"
// ]

ColorTranslator.getHarmony(
Expand Down
2 changes: 1 addition & 1 deletion dist/web/colortranslator.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/scripts/bundle.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/@types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export interface ObjectProps<T> {

export interface Options {
decimals: number;
legacyCSS: boolean;
}

export type InputOptions = Partial<Options>;
54 changes: 41 additions & 13 deletions src/color/css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {
HSLObject,
CMYKObject,
Color,
NumberOrString
NumberOrString,
Options
} from '@types';
import {
ColorModel,
Expand Down Expand Up @@ -54,25 +55,52 @@ export const CSS = {
: '#{1}{2}{3}';
return getResultFromTemplate(template, values);
},
[ColorModel.RGB]: (color: RGBObject): string => {
[ColorModel.RGB]: (color: RGBObject, options: Options): string => {
const { legacyCSS } = options;
const values = prepareColorForCss(color);
const template = values.length === 4
? 'rgba({1},{2},{3},{4})'
: 'rgb({1},{2},{3})';
const template = legacyCSS
? (
values.length === 4
? 'rgba({1},{2},{3},{4})'
: 'rgb({1},{2},{3})'
)
: (
values.length === 4
? 'rgb({1} {2} {3} / {4})'
: 'rgb({1} {2} {3})'
);
return getResultFromTemplate(template, values);
},
[ColorModel.HSL]: (color: HSLObject): string => {
[ColorModel.HSL]: (color: HSLObject, options: Options): string => {
const { legacyCSS } = options;
const values = prepareColorForCss(color);
const template = values.length === 4
? 'hsla({1},{2}%,{3}%,{4})'
: 'hsl({1},{2}%,{3}%)';
const template = legacyCSS
? (
values.length === 4
? 'hsla({1},{2}%,{3}%,{4})'
: 'hsl({1},{2}%,{3}%)'
)
: (
values.length === 4
? 'hsl({1} {2}% {3}% / {4})'
: 'hsl({1} {2}% {3}%)'
);
return getResultFromTemplate(template, values);
},
[ColorModel.CMYK]: (color: CMYKObject): string => {
[ColorModel.CMYK]: (color: CMYKObject, options: Options): string => {
const { legacyCSS } = options;
const values = prepareColorForCss(color);
const template = values.length === 5
? 'cmyk({1}%,{2}%,{3}%,{4}%,{5})'
: 'cmyk({1}%,{2}%,{3}%,{4}%)';
const template = legacyCSS
? (
values.length === 5
? 'device-cmyk({1}%,{2}%,{3}%,{4}%,{5})'
: 'device-cmyk({1}%,{2}%,{3}%,{4}%)'
)
: (
values.length === 5
? 'device-cmyk({1}% {2}% {3}% {4}% / {5})'
: 'device-cmyk({1}% {2}% {3}% {4}%)'
);
return getResultFromTemplate(template, values);
}
};
Loading

0 comments on commit 3048239

Please sign in to comment.