@highlight-ui/color-picker - npm Package Compare versions

Comparing version 4.3.2 to 4.3.3

dist/cjs/index.js

@@ -11,3 +11,2 @@ 'use strict';
 var typography = require('@highlight-ui/typography');
-var tokens = require('@highlight-ui/tokens');
 function _interopDefaultLegacy(e) {
@@ -51,22 +50,21 @@ return e && typeof e === 'object' && 'default' in e ? e : {
   identifier: 'support-red-100',
-  backgroundColor: tokens.colorTokens['support-red-100'],
-  highlight: tokens.colorTokens['support-red-100']
+  backgroundColor: '#F55549',
+  highlight: '#F55549'
 }, {
   identifier: 'support-pink-100',
-  backgroundColor: tokens.colorTokens['support-pink-100'],
-  highlight: tokens.colorTokens['support-pink-100']
+  backgroundColor: '#E8467C',
+  highlight: '#E8467C'
 }, {
   identifier: 'support-purple-100',
-  backgroundColor: tokens.colorTokens['support-purple-100'],
-  highlight: tokens.colorTokens['support-purple-100']
+  backgroundColor: '#9F3EB0',
+  highlight: '#9F3EB0'
 }, {
   identifier: 'support-purple-80',
-  backgroundColor: tokens.colorTokens['support-purple-80'],
-  highlight: tokens.colorTokens['support-purple-80']
+  backgroundColor: '#7D5CB8',
+  highlight: '#7D5CB8'
 }, {
   identifier: 'support-dark-blue-100',
-  backgroundColor: tokens.colorTokens['support-dark-blue-100'],
-  highlight: tokens.colorTokens['support-dark-blue-100']
+  backgroundColor: '#0D34A2',
+  highlight: '#0D34A2'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'cyan',
@@ -77,14 +75,13 @@ backgroundColor: '#0db5df',
   identifier: 'support-green-100',
-  backgroundColor: tokens.colorTokens['support-green-100'],
-  highlight: tokens.colorTokens['support-green-100']
+  backgroundColor: '#3C968D',
+  highlight: '#3C968D'
 }, {
   identifier: 'support-light-green-100',
-  backgroundColor: tokens.colorTokens['support-light-green-100'],
-  highlight: tokens.colorTokens['support-light-green-100']
+  backgroundColor: '#8BC34A',
+  highlight: '#8BC34A'
 }, {
   identifier: 'support-yellow-100',
-  backgroundColor: tokens.colorTokens['support-yellow-100'],
-  highlight: tokens.colorTokens['support-yellow-100']
+  backgroundColor: '#F4E453',
+  highlight: '#F4E453'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'orange',
@@ -95,8 +92,8 @@ backgroundColor: '#ffa319',
   identifier: 'support-brown-100',
-  backgroundColor: tokens.colorTokens['support-brown-100'],
-  highlight: tokens.colorTokens['support-brown-100']
+  backgroundColor: '#795548',
+  highlight: '#795548'
 }, {
   identifier: 'support-grey-110',
-  backgroundColor: tokens.colorTokens['support-grey-110'],
-  highlight: tokens.colorTokens['support-grey-110']
+  backgroundColor: '#5A7886',
+  highlight: '#5A7886'
 }]);
@@ -107,23 +104,21 @@ var pastelPalette = function (p) {
   identifier: 'support-red-10',
-  backgroundColor: tokens.colorTokens['support-red-10'],
-  highlight: tokens.colorTokens['support-red-100']
+  backgroundColor: '#F8CCC9',
+  highlight: '#F55549'
 }, {
   identifier: 'support-pink-10',
-  backgroundColor: tokens.colorTokens['support-pink-10'],
-  highlight: tokens.colorTokens['support-pink-100']
+  backgroundColor: '#F5C3D4',
+  highlight: '#E8467C'
 }, {
   identifier: 'support-purple-10',
-  backgroundColor: tokens.colorTokens['support-purple-10'],
-  highlight: tokens.colorTokens['support-purple-100']
+  backgroundColor: '#D5CAE9',
+  highlight: '#9F3EB0'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'light-purple',
   backgroundColor: '#e1c5e7',
-  highlight: tokens.colorTokens['support-purple-80']
+  highlight: '#7D5CB8'
 }, {
   identifier: 'support-dark-blue-10',
-  backgroundColor: tokens.colorTokens['support-dark-blue-10'],
-  highlight: tokens.colorTokens['support-dark-blue-100']
+  backgroundColor: '#CFD6EC',
+  highlight: '#0D34A2'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'light-cyan',
@@ -134,12 +129,12 @@ backgroundColor: '#bbe5f8',
   identifier: 'support-green-10',
-  backgroundColor: tokens.colorTokens['support-green-10'],
-  highlight: tokens.colorTokens['support-green-100']
+  backgroundColor: '#BBE1DD',
+  highlight: '#3C968D'
 }, {
   identifier: 'support-light-green-10',
-  backgroundColor: tokens.colorTokens['support-light-green-10'],
-  highlight: tokens.colorTokens['support-light-green-100']
+  backgroundColor: '#DEECCE',
+  highlight: '#8BC34A'
 }, {
   identifier: 'support-yellow-10',
-  backgroundColor: tokens.colorTokens['support-yellow-10'],
-  highlight: tokens.colorTokens['support-yellow-100']
+  backgroundColor: '#FBF6CA',
+  highlight: '#F4E453'
 }, {
@@ -152,20 +147,20 @@ // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'support-brown-10',
-  backgroundColor: tokens.colorTokens['support-brown-10'],
-  highlight: tokens.colorTokens['support-brown-100']
+  backgroundColor: '#D9D0CD',
+  highlight: '#795548'
 }, {
   identifier: 'support-grey-10',
-  backgroundColor: tokens.colorTokens['support-grey-10'],
-  highlight: tokens.colorTokens['support-grey-110']
+  backgroundColor: '#D3DADE',
+  highlight: '#5A7886'
 }]);
 var styles = {
-  "colorOption": "ColorPicker-module__FYnj0znF__v4-3-2",
-  "button": "ColorPicker-module__SOXvFt0b__v4-3-2",
-  "colorPicker": "ColorPicker-module__iT9dyWOR__v4-3-2",
-  "focus": "ColorPicker-module__9aA16Fvg__v4-3-2",
-  "active": "ColorPicker-module__nntKqhC3__v4-3-2",
-  "disabled": "ColorPicker-module__SSj3wtEw__v4-3-2",
-  "buttonArrow": "ColorPicker-module__s0S9P-x5__v4-3-2",
-  "colorDot": "ColorPicker-module__tAkCpZCm__v4-3-2",
-  "panel": "ColorPicker-module__j47-5ppo__v4-3-2",
-  "colorOptions": "ColorPicker-module__bPum-aBR__v4-3-2"
+  "colorOption": "ColorPicker-module__FYnj0znF__v4-3-3",
+  "button": "ColorPicker-module__SOXvFt0b__v4-3-3",
+  "colorPicker": "ColorPicker-module__iT9dyWOR__v4-3-3",
+  "focus": "ColorPicker-module__9aA16Fvg__v4-3-3",
+  "active": "ColorPicker-module__nntKqhC3__v4-3-3",
+  "disabled": "ColorPicker-module__SSj3wtEw__v4-3-3",
+  "buttonArrow": "ColorPicker-module__s0S9P-x5__v4-3-3",
+  "colorDot": "ColorPicker-module__tAkCpZCm__v4-3-3",
+  "panel": "ColorPicker-module__j47-5ppo__v4-3-3",
+  "colorOptions": "ColorPicker-module__bPum-aBR__v4-3-3"
 };
@@ -172,0 +167,0 @@ var ColorPicker = function (_a) {

dist/cjs/src/palettes.d.ts

@@ -9,3 +9,3 @@ export declare type PaletteTypes = 'main' | 'pastel';
 export declare type PastelPaletteColors = typeof pastelPalette[number]['identifier'];
-export declare const mainPalette: readonly TPalette<"support-red-100" | "support-pink-100" | "support-purple-80" | "support-purple-100" | "support-dark-blue-100" | "support-green-100" | "support-light-green-100" | "support-yellow-100" | "support-brown-100" | "support-grey-110" | "cyan" | "orange">[];
-export declare const pastelPalette: readonly TPalette<"support-red-10" | "support-pink-10" | "support-purple-10" | "support-dark-blue-10" | "support-green-10" | "support-light-green-10" | "support-yellow-10" | "support-brown-10" | "support-grey-10" | "light-purple" | "light-cyan" | "light-orange">[];
+export declare const mainPalette: readonly TPalette<"support-red-100" | "support-pink-100" | "support-purple-100" | "support-purple-80" | "support-dark-blue-100" | "cyan" | "support-green-100" | "support-light-green-100" | "support-yellow-100" | "orange" | "support-brown-100" | "support-grey-110">[];
+export declare const pastelPalette: readonly TPalette<"support-red-10" | "support-pink-10" | "support-purple-10" | "light-purple" | "support-dark-blue-10" | "light-cyan" | "support-green-10" | "support-light-green-10" | "support-yellow-10" | "light-orange" | "support-brown-10" | "support-grey-10">[];

dist/esm/index.js

@@ -6,3 +6,2 @@ import React, { useState, useRef, useEffect } from 'react';
 import { Heading } from '@highlight-ui/typography';
-import { colorTokens } from '@highlight-ui/tokens';
 
@@ -40,22 +39,21 @@ /******************************************************************************
   identifier: 'support-red-100',
-  backgroundColor: colorTokens['support-red-100'],
-  highlight: colorTokens['support-red-100']
+  backgroundColor: '#F55549',
+  highlight: '#F55549'
 }, {
   identifier: 'support-pink-100',
-  backgroundColor: colorTokens['support-pink-100'],
-  highlight: colorTokens['support-pink-100']
+  backgroundColor: '#E8467C',
+  highlight: '#E8467C'
 }, {
   identifier: 'support-purple-100',
-  backgroundColor: colorTokens['support-purple-100'],
-  highlight: colorTokens['support-purple-100']
+  backgroundColor: '#9F3EB0',
+  highlight: '#9F3EB0'
 }, {
   identifier: 'support-purple-80',
-  backgroundColor: colorTokens['support-purple-80'],
-  highlight: colorTokens['support-purple-80']
+  backgroundColor: '#7D5CB8',
+  highlight: '#7D5CB8'
 }, {
   identifier: 'support-dark-blue-100',
-  backgroundColor: colorTokens['support-dark-blue-100'],
-  highlight: colorTokens['support-dark-blue-100']
+  backgroundColor: '#0D34A2',
+  highlight: '#0D34A2'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'cyan',
@@ -66,14 +64,13 @@ backgroundColor: '#0db5df',
   identifier: 'support-green-100',
-  backgroundColor: colorTokens['support-green-100'],
-  highlight: colorTokens['support-green-100']
+  backgroundColor: '#3C968D',
+  highlight: '#3C968D'
 }, {
   identifier: 'support-light-green-100',
-  backgroundColor: colorTokens['support-light-green-100'],
-  highlight: colorTokens['support-light-green-100']
+  backgroundColor: '#8BC34A',
+  highlight: '#8BC34A'
 }, {
   identifier: 'support-yellow-100',
-  backgroundColor: colorTokens['support-yellow-100'],
-  highlight: colorTokens['support-yellow-100']
+  backgroundColor: '#F4E453',
+  highlight: '#F4E453'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'orange',
@@ -84,8 +81,8 @@ backgroundColor: '#ffa319',
   identifier: 'support-brown-100',
-  backgroundColor: colorTokens['support-brown-100'],
-  highlight: colorTokens['support-brown-100']
+  backgroundColor: '#795548',
+  highlight: '#795548'
 }, {
   identifier: 'support-grey-110',
-  backgroundColor: colorTokens['support-grey-110'],
-  highlight: colorTokens['support-grey-110']
+  backgroundColor: '#5A7886',
+  highlight: '#5A7886'
 }]);
@@ -96,23 +93,21 @@ var pastelPalette = function (p) {
   identifier: 'support-red-10',
-  backgroundColor: colorTokens['support-red-10'],
-  highlight: colorTokens['support-red-100']
+  backgroundColor: '#F8CCC9',
+  highlight: '#F55549'
 }, {
   identifier: 'support-pink-10',
-  backgroundColor: colorTokens['support-pink-10'],
-  highlight: colorTokens['support-pink-100']
+  backgroundColor: '#F5C3D4',
+  highlight: '#E8467C'
 }, {
   identifier: 'support-purple-10',
-  backgroundColor: colorTokens['support-purple-10'],
-  highlight: colorTokens['support-purple-100']
+  backgroundColor: '#D5CAE9',
+  highlight: '#9F3EB0'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'light-purple',
   backgroundColor: '#e1c5e7',
-  highlight: colorTokens['support-purple-80']
+  highlight: '#7D5CB8'
 }, {
   identifier: 'support-dark-blue-10',
-  backgroundColor: colorTokens['support-dark-blue-10'],
-  highlight: colorTokens['support-dark-blue-100']
+  backgroundColor: '#CFD6EC',
+  highlight: '#0D34A2'
 }, {
-  // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'light-cyan',
@@ -123,12 +118,12 @@ backgroundColor: '#bbe5f8',
   identifier: 'support-green-10',
-  backgroundColor: colorTokens['support-green-10'],
-  highlight: colorTokens['support-green-100']
+  backgroundColor: '#BBE1DD',
+  highlight: '#3C968D'
 }, {
   identifier: 'support-light-green-10',
-  backgroundColor: colorTokens['support-light-green-10'],
-  highlight: colorTokens['support-light-green-100']
+  backgroundColor: '#DEECCE',
+  highlight: '#8BC34A'
 }, {
   identifier: 'support-yellow-10',
-  backgroundColor: colorTokens['support-yellow-10'],
-  highlight: colorTokens['support-yellow-100']
+  backgroundColor: '#FBF6CA',
+  highlight: '#F4E453'
 }, {
@@ -141,20 +136,20 @@ // TODO: Replace hardcoded color with a color token in DST-2558
   identifier: 'support-brown-10',
-  backgroundColor: colorTokens['support-brown-10'],
-  highlight: colorTokens['support-brown-100']
+  backgroundColor: '#D9D0CD',
+  highlight: '#795548'
 }, {
   identifier: 'support-grey-10',
-  backgroundColor: colorTokens['support-grey-10'],
-  highlight: colorTokens['support-grey-110']
+  backgroundColor: '#D3DADE',
+  highlight: '#5A7886'
 }]);
 var styles = {
-  "colorOption": "ColorPicker-module__FYnj0znF__v4-3-2",
-  "button": "ColorPicker-module__SOXvFt0b__v4-3-2",
-  "colorPicker": "ColorPicker-module__iT9dyWOR__v4-3-2",
-  "focus": "ColorPicker-module__9aA16Fvg__v4-3-2",
-  "active": "ColorPicker-module__nntKqhC3__v4-3-2",
-  "disabled": "ColorPicker-module__SSj3wtEw__v4-3-2",
-  "buttonArrow": "ColorPicker-module__s0S9P-x5__v4-3-2",
-  "colorDot": "ColorPicker-module__tAkCpZCm__v4-3-2",
-  "panel": "ColorPicker-module__j47-5ppo__v4-3-2",
-  "colorOptions": "ColorPicker-module__bPum-aBR__v4-3-2"
+  "colorOption": "ColorPicker-module__FYnj0znF__v4-3-3",
+  "button": "ColorPicker-module__SOXvFt0b__v4-3-3",
+  "colorPicker": "ColorPicker-module__iT9dyWOR__v4-3-3",
+  "focus": "ColorPicker-module__9aA16Fvg__v4-3-3",
+  "active": "ColorPicker-module__nntKqhC3__v4-3-3",
+  "disabled": "ColorPicker-module__SSj3wtEw__v4-3-3",
+  "buttonArrow": "ColorPicker-module__s0S9P-x5__v4-3-3",
+  "colorDot": "ColorPicker-module__tAkCpZCm__v4-3-3",
+  "panel": "ColorPicker-module__j47-5ppo__v4-3-3",
+  "colorOptions": "ColorPicker-module__bPum-aBR__v4-3-3"
 };
@@ -161,0 +156,0 @@ var ColorPicker = function (_a) {

dist/esm/src/palettes.d.ts

@@ -9,3 +9,3 @@ export declare type PaletteTypes = 'main' | 'pastel';
 export declare type PastelPaletteColors = typeof pastelPalette[number]['identifier'];
-export declare const mainPalette: readonly TPalette<"support-red-100" | "support-pink-100" | "support-purple-80" | "support-purple-100" | "support-dark-blue-100" | "support-green-100" | "support-light-green-100" | "support-yellow-100" | "support-brown-100" | "support-grey-110" | "cyan" | "orange">[];
-export declare const pastelPalette: readonly TPalette<"support-red-10" | "support-pink-10" | "support-purple-10" | "support-dark-blue-10" | "support-green-10" | "support-light-green-10" | "support-yellow-10" | "support-brown-10" | "support-grey-10" | "light-purple" | "light-cyan" | "light-orange">[];
+export declare const mainPalette: readonly TPalette<"support-red-100" | "support-pink-100" | "support-purple-100" | "support-purple-80" | "support-dark-blue-100" | "cyan" | "support-green-100" | "support-light-green-100" | "support-yellow-100" | "orange" | "support-brown-100" | "support-grey-110">[];
+export declare const pastelPalette: readonly TPalette<"support-red-10" | "support-pink-10" | "support-purple-10" | "light-purple" | "support-dark-blue-10" | "light-cyan" | "support-green-10" | "support-light-green-10" | "support-yellow-10" | "light-orange" | "support-brown-10" | "support-grey-10">[];

package.json

 {
   "name": "@highlight-ui/color-picker",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "author": "Personio GmbH & Co. KG",
@@ -50,3 +50,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "04cf00419ab20016f26ec56db2d1096b266078e9"
+  "gitHead": "af80302a3952f660d9de8974e2dc3884d1831f71"
 }

No alert changes

Worsened metrics

Total package byte prevSize

88500

decreased by-7.48%

Lines of code

760

decreased by-1.3%

No dependency changes