scttcper / tinycolor Goto Github PK

Creating a new TinyColor object from HSV, with s=0, internally somehow also h is set to 0:

c = new TinyColor({ h: 200, s: 0, v: 0.7 }).toHsv();
console.log(c.h, c.s, c.v);
Result: 0, 0, 0.7
Expected result: 200, 0, 0.7

and setting v=0, both h and s are set internally to 0:

c = new TinyColor({ h: 200, s: 0.5, v: 0 }).toHsv();
console.log(c.h, c.s, c.v);
Result: 0, 0, 0
Expected result: 200, 0.5, 0

We've just upgraded to @ctrl/[email protected] and yarn started giving: warning Workspaces can only be enabled in private projects.

Looking into the package.json of the new release, it is marked like a monorepo:

{
...
  "workspaces": [
    "demo"
  ],
...
}

The README has some nice documentation, but none of this appears inside VS Code when using intellisense. For example, hovering on the mix method I see the following tooltip:

The tooltip has no helpful description.

As an example, we can write a description on a method in JSDoc format like this:

Then when we hover on it in other place we see the JSDoc description in the tooltip:

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

https://web.dev/publish-modern-javascript/

import { inputToRGB } from '@ctrl/tinycolor';

then inputToRGB is undefined. because it resolved to @ctrl/tinycolor/dist/index.js

but if i change like this it can work.

import { inputToRGB } from '@ctrl/tinycolor/dist/public_api.js';

seem like package.json entry not working here, but others package is fine, only this package has the problem.

my dependency chain is : @ant-design/[email protected] -> @ant-design/[email protected] -> @ctrl/[email protected]

The other day I wanted to compute the contrast between two colors but the luminance and hence the readability function doesn’t take the alpha canal into account: one need to know the “final” color, in other words what’s the color is on its background, to compute the contrast.

There are probably other uses for being able to compute how a color would appear on a background, and it’s very short to implement. It’s also easy to get it wrong, so I think it makes sense to have a correct and checked implement in a library like this one.

The implementation could simply be (if you’re interested I can make a PR):

onBackground(background: ColorInput): TinyColor {
  const fg = this.toRgb();
  const bg = new TinyColor(background).toRgb();

  return new TinyColor({
    r: bg.r + (fg.r - bg.r) * fg.a,
    g: bg.g + (fg.g - bg.g) * fg.a,
    b: bg.b + (fg.b - bg.b) * fg.a,
  })
}

I also though of rgbaToRgb as a function name but that may be confusing with all the other function with rgb in their names I guess.

Adapted from this StackOverflow answer.

In hsv format the values are in degree , %, % respectively and when we provide color value as hsv(360,1,88), it assumes '1' as '100%'. Apparently for any value x∈[0,1] it converts it in percentage and assumes accordingly.
Thus hsv(360,1,88) is considered as hsv(360,100,88) and there is practically no way to input color values hsv(360,1,88).
The issue can be seen here

The issue can be seen in the attached pictures as well where hsv(360,1,88) is assumed as hsv(360,100,88) but hsv(360,1.0001,88) is correctly rendering color.

Hi,
I have tested your lib on SPFx component (Microsoft Framework for Sharepoint : https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview)

Your lib work perfectly in all modern browser, but i have error with IE11 : (Characters expected on Transform method apparently)

Your lib is compatible with IE11 ?

Thanks

I would like to extent TinyColor class to provide more functionality for my own needs, however its not possible to extend and chain methods because of the return types.

Here is an example of extending class:

export class MyTinyColor extends TinyColor {
  css(): string {
    return 'do some work and return value';
  } 
}

chaining 'css' method will cause compiler error (Property 'css' does not exist on type 'TinyColor'):

const color= new MyTinyColor ('#000').setAlpha(0.54).css(); 

The the reason is that the setAlpha returns TinyColor and TinyColor has not implemented css mehtod.

To solve it we can either not specifying return type or return this:

 setAlpha(alpha?: string | number) : this {
     ...
  }

Not sure if there is any other way!

It it me or compatibility with es5 only browser has been dropped in 3.x branch?
Compiled code contains ES6 syntax which then crash in IE11 with SCRIPT1003: Expected ':'.

^ title says it all

The documentation says that fromRatio accepts both RGB, HSL and HSV objects, but only RGB objects is actually accepted:

See from-ratio.ts:
https://github.com/TypeCtrl/tinycolor/blob/3fb24fbc4e649d6ec25bf12041659a64daefd062/src/from-ratio.ts#L16-L27

This also fails typescript compilation if you try to provide HSL or HSV objects:

I used to import interfaces in my typescript app like this:

import { RGBA } from '@ctrl/tinycolor/interfaces';

but after upgrade to 2.5.0 I get an error:

TS2307: Cannot find module '@ctrl/tinycolor/interfaces'.

Imports must be changed manually:

import { RGBA } from '@ctrl/tinycolor/dist/interfaces';

I found this issue critical, because it can unexpectedly affect each TS app that have tinycolor as a dependency in following manner:

"@ctrl/tinycolor": "^2.2.1",

Like I used to have above entry in my package.json.

It feels a little weird or unnecessary to new up an instance. I was wondering why that design decision was made? What are your thoughts on exposing a function as well, the way @bgrins does in the original repo?

Also & aside from that, great work breathing new life into this! 👏

The Lab color space is part of CSS color 4, and is implemented in Safari already. There are also some operations, like color distance, nicely defined in Lab space.

It's be great to support the lab() syntax in parsing, and toLab() and toLabString() methods.

Hey, in some cases, e.g. when delivering data to iOS you need a ratio rgb color. It would be great if tinycolor could also support toRgbRatio.

I think it would work like this

const color = new TinyColor('red');
color.toRgbRatio(); // { r: 1, g: 0, b: 0, a: 1 }

It should be pretty similar to toPercentageRgb since the ratio is basically a percentage value as a float from 0 to 1.

The documentation refer to getOriginalInput(), but that class method does not exist. It is possible to refer to originalInput class variable, but that differ from the documentation.

So either should the documentation be changed, or the getOriginalInput() class method be added.

The latest version 3.4.0 cause a deployment error on our AWS Elastic Beanstalk server. It makes server unable to start. Error Log:

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 24) /var/app/current/node_modules/@ctrl/tinycolor/dist/module/conversion.js:1 import { bound01, pad2 } from './util'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (/var/app/current/node_modules/@ant-design/colors/dist/index.js:5:18) at Module._compile (internal/modules/cjs/loader.js:999:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) /var/app/current/node_modules/@ctrl/tinycolor/dist/module/conversion.js:1

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

On registry https://registry.npmjs.org/, the "latest" version (v5.0.11) of dependency travis-deploy-once has the following deprecation notice:

We recommend to use Travis Build Stages instead

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about travis-deploy-once's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Numbers can be faster than strings, f.e. when working with the and passing them into WebGL.

It'd be nice to have a method like toFloat, which converts to the numerical equivalent of hex values. F.e. #ffffff would be the same as the JS number 0xffffff. An optional parameter might also allow the value to be represented as a number between 0 and 1 (common in WebGL). 1 would be equivalent to 0xffffff.

There is a problem with the new version 3.4.0
/node_modules/@ctrl/tinycolor/dist/module/conversion.js:1
(function (exports, require, module, __filename, __dirname) { import { bound01, pad2 } from './util';
^

SyntaxError: Unexpected token {
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)

When I switch to 3.3.4, there is no problem

This is an excellent library!

Thanks to a generous PR by @ajmchambers, TinyColor is now being used to power the color picker in Shoelace. 🎉

While reviewing the PR, I noticed a few small parsing blips that could be improved. On the website, the following space-separated color params fail to parse. All of the following are equivalent and should result in white @ 25% alpha, or #ffffff40.

rgb(255 255 255 / 25%) => #ffffffff
rgb(255 255 255 / .25) => #ffffffff

hsl(0 0% 100% / 25%)   => #ffffffff
hsl(0 0% 100% / .25)   => #ffffffff

The resulting values are all white, but with 100% instead of 25% alpha.

Similarly, rgba and hsla are effectively aliases of rgb and hsl now, but alpha is only considered when the alias is used.

rgb(255, 255, 255, 25%)  => #ffffffff
rgb 255 255 255 .25      => #ffffffff

rgba(255, 255, 255, 25%) => #ffffff40
rgba 255 255 255 .25     => #ffffff40

Let me know if you need any additional info on this!

I'm noticing this warning in my local dev terminal since upgrading the package recently.

WARNING in ./node_modules/@ctrl/tinycolor/dist/module/util.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/src/main/webpack/node_modules/@ctrl/tinycolor/src/util.ts' file: Error: ENOENT: no such file or directory, open '/src/main/webpack/node_modules/@ctrl/tinycolor/src/util.ts'
Error: Failed to parse source map from '/src/main/webpack/node_modules/@ctrl/tinycolor/src/util.ts' file: Error: ENOENT: no such file or directory, open '/src/main/webpack/node_modules/@ctrl/tinycolor/src/util.ts'
    at fetchFromFilesystem (/src/main/webpack/node_modules/source-map-loader/dist/utils.js:130:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./node_modules/@ctrl/tinycolor/dist/module/index.js 4:0-54 101:17-27 198:51-58 210:51-58 296:16-23 320:16-23 350:16-23 361:16-23
 @ ./node_modules/@ctrl/tinycolor/dist/module/public_api.js
 @ ./funnel/components/header/header-full-width.tsx
 @ ./funnel/pages/Funnel.tsx
 @ ./funnel/pages/funnel-loader.tsx

util.js is showing a reference to ../src/util.ts

{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,SAAgB,OAAO,CAAC,CAAM,EAAE,GAAW;IACzC,IAAI,cAAc,CAAC,CAAC,CAAC,EAAE;QACrB,CAAC,GAAG,MAAM,CAAC;KACZ;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhE,+CAA+C;IAC/C,IAAI,SAAS,EAAE;QACb,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;KACzC;IAED,wCAAwC;IACxC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,QAAQ,EAAE;QAChC,OAAO,CAAC,CAAC;KACV;IAED,gDAAgD;IAChD,IAAI,GAAG,KAAK,GAAG,EAAE;QACf,kCAAkC;QAClC,sDAAsD;QACtD,4BAA4B;QAC5B,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;KACnE;SAAM;QACL,kCAAkC;QAClC,iDAAiD;QACjD,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IAED,OAAO,CAAC,CAAC;AACX,CAAC;AA/BD,0BA+BC;AAED;;;GAGG;AACH,SAAgB,OAAO,CAAC,GAAW;IACjC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;AACvC,CAAC;AAFD,0BAEC;AAED;;;;GAIG;AACH,SAAgB,cAAc,CAAC,CAAkB;IAC/C,OAAO,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACzE,CAAC;AAFD,wCAEC;AAED;;;GAGG;AACH,SAAgB,YAAY,CAAC,CAAkB;IAC7C,OAAO,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC;AAFD,oCAEC;AAED;;;GAGG;AACH,SAAgB,UAAU,CAAC,CAAmB;IAC5C,CAAC,GAAG,UAAU,CAAC,CAAW,CAAC,CAAC;IAE5B,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;QAC9B,CAAC,GAAG,CAAC,CAAC;KACP;IAED,OAAO,CAAC,CAAC;AACX,CAAC;AARD,gCAQC;AAED;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,CAAkB;IACpD,IAAI,CAAC,IAAI,CAAC,EAAE;QACV,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC;KAC9B;IAED,OAAO,CAAC,CAAC;AACX,CAAC;AAND,kDAMC;AAED;;;GAGG;AACH,SAAgB,IAAI,CAAC,CAAS;IAC5B,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAFD,oBAEC"}

Are the mapping files meant to be part of the distribution? If so, looks like they aren't referencing the distributed .js files.

Currently the isDark and isLight is determined by checking the brightness against a static 128 value, however it would be nice to be able to adjust this value(I've found, for example, that 170 fits my needs better). Potentially add an option in the constructor, maybe as part of TinyColorOptions: {brightnessThreshold: number}.

I'm aware that you can get around it by doing const isDark = tinyColor.getBrightness() < 170;, but this proposal would allow the user to create a wrapper around TinyColor, and have a default brightness threshold across the entire app, and not have to manually specify it every time.

hi, I haven't build my project for about 1 month. Today I tried to build it without any change except that I deleted my node_modules(then npm i). And my builder resulted in this error:

ERROR in ./~/_@[email protected]@@ctrl/tinycolor/dist/index.js
Module parse failed: /Users/sihanzhao/Documents/code/acorn-vc-asset/node_modules/source-map-loader@1.1.3@source-map-loader/dist/cjs.js!/Users/sihanzhao/Documents/code/acorn-vc-asset/node_modules/@[email protected]@@ctrl/tinycolor/dist/index.js Unexpected token (74:43)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (74:43)

@ctrl_tinycolor is not my direct dependencies, I didn't know this package before. can someone help me how can I build through this error? thx

my project can't run after update @ctrl/tinycolor to 4.x!!!

Hello,
I try to use your library direct from browser via import map, but it would not work cause your imports in lack the ".js" extension.

Would it be possible to add them?

https://sass-lang.com/documentation/modules/color/#scale

It would be awesome if an rgba object could be supported as well.

new TinyColor({ r: 255, g: 0, b: 0, a: 0.2 });

import { fromRatio } from '@ctrl/tinycolor';
fromRatio({ r: 1, g: 0, b: 0, a: 0.2 });

Hi there,

Your 3.3.0 update just broke all of our apps. We're using @ant-design/colors, which uses tinycolor, and the 3.3.0 ES module exports broke our apps with this error:

import { tinycolor } from './index';
^^^^^^
Cannot use import statement outside a module

It might be an issue with @ant-design/colors as well, but I don't think 3.3.0 is backward-compatible with 3.2.1. It's always better to respect semver and not make breaking changes on minor version updates 🤞

Hi guys, i was searching a way to show in my aplication a color picker to the user and I saw that in the first TinyColor, in JS, was a possible to show to the color picker so I wanted to know if this TypScript version has this possibility and if is it possible to create a Pallete.

I did not find any credit to the original author of this "cloned" repo:

https://github.com/bgrins/TinyColor

I would like to use your code since it seems better maintained, but I fell that moral demands a credit should be givven since I've been used the real "tinyColor" years ago from the original repo

When doing a production build of next.js 14.0.4 (does not happen in 14.0.3 and below) whenever i construct a TinyColor, it is always considered as pure black. During the development build everything seems to work, but in production build it breaks.

I made an example on code sandbox with this issue here

to reproduce, run a build of the server npm run build (you will see a console log of the #000000 color too) and then start it