@hsds/tokens - npm Package Compare versions

Comparing version 1.4.1-beta.2 to 1.4.1-rc.0

CHANGELOG.md

@@ -5,15 +5,4 @@ # Changelog
 
-## [1.4.1-beta.2](https://github.com/helpscout/hsds/compare/tokens-1.4.1-beta.1...tokens-1.4.1-beta.2) (2024-01-16)
+## [1.4.1-rc.0](https://github.com/helpscout/hsds/compare/tokens-1.4.0...tokens-1.4.1-rc.0) (2024-01-23)
 
-## [1.4.1-beta.1](https://github.com/helpscout/hsds/compare/tokens-1.4.1-beta.0...tokens-1.4.1-beta.1) (2023-12-18)
-
-## [1.4.1-beta.0](https://github.com/helpscout/hsds/compare/tokens-1.4.0...tokens-1.4.1-beta.0) (2023-12-18)
-
-
-### Features
-
-* **tokens:** remap charcoal/grey into a unify scheme ([a514ef5](https://github.com/helpscout/hsds/commit/a514ef5b903d4f142cc510c1188fa7b33e086cf9))
-* **tokens:** remap text colors ([47c7d8b](https://github.com/helpscout/hsds/commit/47c7d8b247702f1d87b40b2417923821fe2925cb))
-* **tokens:** turn off charcoal overwrite ([50aa413](https://github.com/helpscout/hsds/commit/50aa413e67ae2303823545d76836e10ec27e83a9))
-
 ## [1.4.0](https://github.com/helpscout/hsds/compare/tokens-1.3.2...tokens-1.4.0) (2023-11-20)
@@ -20,0 +9,0 @@

package.json

 {
   "name": "@hsds/tokens",
-  "version": "1.4.1-beta.2",
+  "version": "1.4.1-rc.0",
   "peerDependencies": {
@@ -10,3 +10,3 @@ "prop-types": "~15.7.2",
   },
-  "main": "index.cjs",
+  "main": "./index.cjs.js",
   "type": "commonjs",
@@ -13,0 +13,0 @@ "dependencies": {

src/js/default/button.js

@@ -54,4 +54,4 @@ export const button = {
         textHover: '#405261',
-        hover: '#f9fafa',
-        hoverIconOnly: '#f1f3f5',
+        hover: '#F9FAFA',
+        hoverIconOnly: '#F1F3F5',
         textSeamlessHover: '#1d2b36',
@@ -75,3 +75,3 @@ },
     disabled: {
-      main: '#ccd6de',
+      main: '#D5DCE1',
       text: 'white',
@@ -78,0 +78,0 @@ outline: {

src/js/default/color.js

@@ -55,41 +55,37 @@ export const color = {
   charcoal: {
-    100: '#f9fafa',
-    200: '#f1f3f5',
-    300: '#e1e7eb',
-    400: '#ccd6de',
-    500: '#C5CED6',
-    530: '#B7C2CC',
-    550: '#A5B2BD',
-    600: '#93A1B0',
-    650: '#748494',
-    700: '#556575',
-    800: '#405261',
-    900: '#314351',
-    1000: '#253642',
+    200: '#93A1B0',
+    300: '#748494',
+    400: '#556575',
+    500: '#405261',
+    600: '#314351',
+    700: '#253642',
+    800: '#1d2b36',
+    900: '#1d2b36',
+    1000: '#1d2b36',
     1100: '#1d2b36',
     1200: '#1d2b36',
-    default: '#C5CED6',
-    accent: '#C5CED6',
+    default: '#405261',
+    accent: '#405261',
   },
   ash: {
-    200: '#f9fafa',
-    300: '#f1f3f5',
-    400: '#e1e7eb',
-    500: '#ccd6de',
+    200: '#F9FAFA',
+    300: '#F1F3F5',
+    400: '#E5E9EC',
+    500: '#D5DCE1',
     600: '#C5CED6',
     700: '#B7C2CC',
     800: '#A5B2BD',
-    default: '#ccd6de',
-    accent: '#ccd6de',
+    default: '#D5DCE1',
+    accent: '#D5DCE1',
   },
   grey: {
-    200: '#f9fafa',
-    300: '#f1f3f5',
-    400: '#e1e7eb',
-    500: '#ccd6de',
+    200: '#F9FAFA',
+    300: '#F1F3F5',
+    400: '#E5E9EC',
+    500: '#D5DCE1',
     600: '#C5CED6',
     700: '#B7C2CC',
     800: '#A5B2BD',
-    default: '#ccd6de',
-    accent: '#ccd6de',
+    default: '#D5DCE1',
+    accent: '#D5DCE1',
   },
@@ -196,6 +192,6 @@ yellow: {
   border: {
-    default: '#e1e7eb',
-    divider: '#f1f3f5',
+    default: '#E5E9EC',
+    divider: '#F1F3F5',
     ui: {
-      default: '#ccd6de',
+      default: '#D5DCE1',
       dark: '#C5CED6',
@@ -202,0 +198,0 @@ },

src/js/default/datePicker.js

@@ -10,3 +10,3 @@ export const datePicker = {
     current: {
-      background: '#f1f3f5',
+      background: '#F1F3F5',
       text: '#253642',
@@ -13,0 +13,0 @@ },

src/js/default/styled-components.js

@@ -7,3 +7,3 @@ import { css } from 'styled-components'
   --hsds-attachment-color-error: var(--hsds-color-red-500);
-  --hsds-badge-color-default: var(--hsds-color-charcoal-600);
+  --hsds-badge-color-default: var(--hsds-color-charcoal-200);
   --hsds-button-color-blue-main: var(--hsds-color-blue-500);
@@ -45,13 +45,13 @@ --hsds-button-color-blue-hover: var(--hsds-color-blue-600);
   );
-  --hsds-button-color-grey-main: var(--hsds-color-charcoal-700);
-  --hsds-button-color-grey-hover: var(--hsds-color-charcoal-800);
+  --hsds-button-color-grey-main: var(--hsds-color-charcoal-400);
+  --hsds-button-color-grey-hover: var(--hsds-color-charcoal-500);
   --hsds-button-color-grey-text: white;
   --hsds-button-color-grey-outline-border: var(--hsds-color-grey-700);
   --hsds-button-color-grey-outline-borderHover: var(--hsds-color-grey-800);
-  --hsds-button-color-grey-outline-text: var(--hsds-color-charcoal-700);
-  --hsds-button-color-grey-outline-textHover: var(--hsds-color-charcoal-800);
+  --hsds-button-color-grey-outline-text: var(--hsds-color-charcoal-400);
+  --hsds-button-color-grey-outline-textHover: var(--hsds-color-charcoal-500);
   --hsds-button-color-grey-outline-hover: var(--hsds-color-grey-200);
   --hsds-button-color-grey-outline-hoverIconOnly: var(--hsds-color-grey-300);
   --hsds-button-color-grey-outline-textSeamlessHover: var(
-    --hsds-color-charcoal-1100
+    --hsds-color-charcoal-800
   );
@@ -81,11 +81,11 @@ --hsds-button-color-yellow-main: var(--hsds-color-orange-600);
   --hsds-datePicker-color-current-background: var(--hsds-color-grey-300);
-  --hsds-datePicker-color-current-text: var(--hsds-color-charcoal-1000);
-  --hsds-floatingBar-color-background: var(--hsds-color-charcoal-1100);
-  --hsds-floatingBar-color-button-iconDefault: var(--hsds-color-charcoal-600);
+  --hsds-datePicker-color-current-text: var(--hsds-color-charcoal-700);
+  --hsds-floatingBar-color-background: var(--hsds-color-charcoal-800);
+  --hsds-floatingBar-color-button-iconDefault: var(--hsds-color-charcoal-200);
   --hsds-floatingBar-color-button-iconHover: white;
   --hsds-floatingBar-color-button-backgroundDefault: transparent;
   --hsds-floatingBar-color-button-backgroundHover: var(
-    --hsds-color-charcoal-900
+    --hsds-color-charcoal-600
   );
-  --hsds-floatingBar-color-divider: var(--hsds-color-charcoal-800);
+  --hsds-floatingBar-color-divider: var(--hsds-color-charcoal-500);
   --hsds-statusBar-color-light-error-border: var(--hsds-color-red-300);
@@ -197,28 +197,20 @@ --hsds-statusBar-color-light-info-border: var(--hsds-color-blue-300);
   --hsds-color-blue-accent: var(--hsds-color-blue-500);
-  --hsds-color-charcoal-100: #f9fafa;
-  --hsds-color-charcoal-100-rgb: 249, 250, 250;
-  --hsds-color-charcoal-200: #f1f3f5;
-  --hsds-color-charcoal-200-rgb: 241, 243, 245;
-  --hsds-color-charcoal-300: #e1e7eb;
-  --hsds-color-charcoal-300-rgb: 225, 231, 235;
-  --hsds-color-charcoal-400: #ccd6de;
-  --hsds-color-charcoal-400-rgb: 204, 214, 222;
-  --hsds-color-charcoal-500: #c5ced6;
-  --hsds-color-charcoal-500-rgb: 197, 206, 214;
-  --hsds-color-charcoal-530: #b7c2cc;
-  --hsds-color-charcoal-530-rgb: 183, 194, 204;
-  --hsds-color-charcoal-550: #a5b2bd;
-  --hsds-color-charcoal-550-rgb: 165, 178, 189;
-  --hsds-color-charcoal-600: #93a1b0;
-  --hsds-color-charcoal-600-rgb: 147, 161, 176;
-  --hsds-color-charcoal-650: #748494;
-  --hsds-color-charcoal-650-rgb: 116, 132, 148;
-  --hsds-color-charcoal-700: #556575;
-  --hsds-color-charcoal-700-rgb: 85, 101, 117;
-  --hsds-color-charcoal-800: #405261;
-  --hsds-color-charcoal-800-rgb: 64, 82, 97;
-  --hsds-color-charcoal-900: #314351;
-  --hsds-color-charcoal-900-rgb: 49, 67, 81;
-  --hsds-color-charcoal-1000: #253642;
-  --hsds-color-charcoal-1000-rgb: 37, 54, 66;
+  --hsds-color-charcoal-200: #93a1b0;
+  --hsds-color-charcoal-200-rgb: 147, 161, 176;
+  --hsds-color-charcoal-300: #748494;
+  --hsds-color-charcoal-300-rgb: 116, 132, 148;
+  --hsds-color-charcoal-400: #556575;
+  --hsds-color-charcoal-400-rgb: 85, 101, 117;
+  --hsds-color-charcoal-500: #405261;
+  --hsds-color-charcoal-500-rgb: 64, 82, 97;
+  --hsds-color-charcoal-600: #314351;
+  --hsds-color-charcoal-600-rgb: 49, 67, 81;
+  --hsds-color-charcoal-700: #253642;
+  --hsds-color-charcoal-700-rgb: 37, 54, 66;
+  --hsds-color-charcoal-800: #1d2b36;
+  --hsds-color-charcoal-800-rgb: 29, 43, 54;
+  --hsds-color-charcoal-900: #1d2b36;
+  --hsds-color-charcoal-900-rgb: 29, 43, 54;
+  --hsds-color-charcoal-1000: #1d2b36;
+  --hsds-color-charcoal-1000-rgb: 29, 43, 54;
   --hsds-color-charcoal-1100: #1d2b36;
@@ -230,34 +222,34 @@ --hsds-color-charcoal-1100-rgb: 29, 43, 54;
   --hsds-color-charcoal-accent: var(--hsds-color-charcoal-500);
-  --hsds-color-ash-200: var(--hsds-color-charcoal-100);
-  --hsds-color-ash-200-rgb: var(--hsds-color-charcoal-100-rgb);
-  --hsds-color-ash-300: var(--hsds-color-charcoal-200);
-  --hsds-color-ash-300-rgb: var(--hsds-color-charcoal-200-rgb);
-  --hsds-color-ash-400: var(--hsds-color-charcoal-300);
-  --hsds-color-ash-400-rgb: var(--hsds-color-charcoal-300-rgb);
-  --hsds-color-ash-500: var(--hsds-color-charcoal-400);
-  --hsds-color-ash-500-rgb: var(--hsds-color-charcoal-400-rgb);
-  --hsds-color-ash-600: var(--hsds-color-charcoal-500);
-  --hsds-color-ash-600-rgb: var(--hsds-color-charcoal-500-rgb);
-  --hsds-color-ash-700: var(--hsds-color-charcoal-530);
-  --hsds-color-ash-700-rgb: var(--hsds-color-charcoal-530-rgb);
-  --hsds-color-ash-800: var(--hsds-color-charcoal-550);
-  --hsds-color-ash-800-rgb: var(--hsds-color-charcoal-550-rgb);
-  --hsds-color-ash-default: var(--hsds-color-charcoal-400);
-  --hsds-color-ash-accent: var(--hsds-color-charcoal-400);
-  --hsds-color-grey-200: var(--hsds-color-charcoal-100);
-  --hsds-color-grey-200-rgb: var(--hsds-color-charcoal-100-rgb);
-  --hsds-color-grey-300: var(--hsds-color-charcoal-200);
-  --hsds-color-grey-300-rgb: var(--hsds-color-charcoal-200-rgb);
-  --hsds-color-grey-400: var(--hsds-color-charcoal-300);
-  --hsds-color-grey-400-rgb: var(--hsds-color-charcoal-300-rgb);
-  --hsds-color-grey-500: var(--hsds-color-charcoal-400);
-  --hsds-color-grey-500-rgb: var(--hsds-color-charcoal-400-rgb);
-  --hsds-color-grey-600: var(--hsds-color-charcoal-500);
-  --hsds-color-grey-600-rgb: var(--hsds-color-charcoal-500-rgb);
-  --hsds-color-grey-700: var(--hsds-color-charcoal-530);
-  --hsds-color-grey-700-rgb: var(--hsds-color-charcoal-530-rgb);
-  --hsds-color-grey-800: var(--hsds-color-charcoal-550);
-  --hsds-color-grey-800-rgb: var(--hsds-color-charcoal-550-rgb);
-  --hsds-color-grey-default: var(--hsds-color-charcoal-400);
-  --hsds-color-grey-accent: var(--hsds-color-charcoal-400);
+  --hsds-color-ash-200: #f9fafa;
+  --hsds-color-ash-200-rgb: 249, 250, 250;
+  --hsds-color-ash-300: #f1f3f5;
+  --hsds-color-ash-300-rgb: 241, 243, 245;
+  --hsds-color-ash-400: #e5e9ec;
+  --hsds-color-ash-400-rgb: 229, 233, 236;
+  --hsds-color-ash-500: #d5dce1;
+  --hsds-color-ash-500-rgb: 213, 220, 225;
+  --hsds-color-ash-600: #c5ced6;
+  --hsds-color-ash-600-rgb: 197, 206, 214;
+  --hsds-color-ash-700: #b7c2cc;
+  --hsds-color-ash-700-rgb: 183, 194, 204;
+  --hsds-color-ash-800: #a5b2bd;
+  --hsds-color-ash-800-rgb: 165, 178, 189;
+  --hsds-color-ash-default: var(--hsds-color-ash-500);
+  --hsds-color-ash-accent: var(--hsds-color-ash-500);
+  --hsds-color-grey-200: #f9fafa;
+  --hsds-color-grey-200-rgb: 249, 250, 250;
+  --hsds-color-grey-300: #f1f3f5;
+  --hsds-color-grey-300-rgb: 241, 243, 245;
+  --hsds-color-grey-400: #e5e9ec;
+  --hsds-color-grey-400-rgb: 229, 233, 236;
+  --hsds-color-grey-500: #d5dce1;
+  --hsds-color-grey-500-rgb: 213, 220, 225;
+  --hsds-color-grey-600: #c5ced6;
+  --hsds-color-grey-600-rgb: 197, 206, 214;
+  --hsds-color-grey-700: #b7c2cc;
+  --hsds-color-grey-700-rgb: 183, 194, 204;
+  --hsds-color-grey-800: #a5b2bd;
+  --hsds-color-grey-800-rgb: 165, 178, 189;
+  --hsds-color-grey-default: var(--hsds-color-grey-500);
+  --hsds-color-grey-accent: var(--hsds-color-grey-500);
   --hsds-color-yellow-50: #fffbf3;
@@ -399,6 +391,6 @@ --hsds-color-yellow-100: #fff9ef;
   --hsds-color-text-default: currentColor;
-  --hsds-color-text-subtle: var(--hsds-color-charcoal-800);
-  --hsds-color-text-slightlyMuted: var(--hsds-color-charcoal-700);
-  --hsds-color-text-muted: var(--hsds-color-charcoal-650);
-  --hsds-color-text-faint: var(--hsds-color-charcoal-600);
+  --hsds-color-text-subtle: var(--hsds-color-charcoal-500);
+  --hsds-color-text-slightlyMuted: var(--hsds-color-charcoal-400);
+  --hsds-color-text-muted: var(--hsds-color-charcoal-300);
+  --hsds-color-text-faint: var(--hsds-color-charcoal-200);
   --hsds-color-text-extraMuted: var(--hsds-color-grey-600);
@@ -405,0 +397,0 @@ --hsds-color-border-default: var(--hsds-color-grey-400);

src/js/newBrand/badge.js

 export const badge = {
   color: {
-    default: '#253642ff',
+    default: '#253642',
   },
 }

src/js/newBrand/button.js

@@ -46,13 +46,13 @@ export const button = {
     grey: {
-      main: '#556575ff',
-      hover: '#405261ff',
+      main: '#556575',
+      hover: '#405261',
       text: 'white',
       outline: {
-        border: '#c8d3deff',
-        borderHover: '#abb9c7ff',
-        text: '#405261ff',
-        textHover: '#405261ff',
-        hover: '#f9fafaff',
-        hoverIconOnly: '#f1f3f5ff',
-        textSeamlessHover: '#1d2b36ff',
+        border: '#C8D3DE',
+        borderHover: '#ABB9C7',
+        text: '#405261',
+        textHover: '#405261',
+        hover: '#f9fafa',
+        hoverIconOnly: '#f1f3f5',
+        textSeamlessHover: '#1d2b36',
       },
@@ -75,7 +75,7 @@ },
     disabled: {
-      main: '#c8d3deff',
+      main: '#C8D3DE',
       text: 'white',
       outline: {
-        border: '#abb9c7ff',
-        text: '#abb9c7ff',
+        border: '#ABB9C7',
+        text: '#ABB9C7',
       },
@@ -82,0 +82,0 @@ },

src/js/newBrand/color.js

@@ -16,28 +16,33 @@ export const color = {
   charcoal: {
-    100: '#f9fafaff',
-    200: '#f1f3f5ff',
-    300: '#dfe6ebff',
-    400: '#c8d3deff',
-    500: '#abb9c7ff',
-    530: '#abb9c7ff',
-    550: '#abb9c7ff',
-    600: '#7e8e9eff',
-    650: '#7e8e9eff',
-    700: '#556575ff',
-    800: '#405261ff',
-    900: '#314351ff',
-    1000: '#253642ff',
-    1100: '#1d2b36ff',
-    1200: '#131b24ff',
-    default: '#405261ff',
+    200: '#7e8e9e',
+    300: '#7e8e9e',
+    400: '#556575',
+    500: '#405261',
+    600: '#314351',
+    700: '#253642',
+    800: '#1d2b36',
+    900: '#314351',
+    1000: '#253642',
+    1100: '#1d2b36',
+    1200: '#131B24',
+    default: '#405261',
   },
   grey: {
-    200: '#f9fafaff',
-    300: '#f1f3f5ff',
-    400: '#dfe6ebff',
-    500: '#c8d3deff',
-    600: '#abb9c7ff',
-    700: '#abb9c7ff',
-    800: '#abb9c7ff',
+    200: '#f9fafa',
+    300: '#f1f3f5',
+    400: '#DFE6EB',
+    500: '#C8D3DE',
+    600: '#ABB9C7',
+    700: '#ABB9C7',
+    800: '#ABB9C7',
   },
+  ash: {
+    200: '#f9fafa',
+    300: '#f1f3f5',
+    400: '#DFE6EB',
+    500: '#C8D3DE',
+    600: '#ABB9C7',
+    700: '#ABB9C7',
+    800: '#ABB9C7',
+  },
   indigo: {
@@ -115,3 +120,3 @@ 200: '#ebf5ffff',
     focus: '#304ddbff',
-    disabled: '#405261ff',
+    disabled: '#405261',
   },
@@ -123,3 +128,3 @@ focusRing: {
       innerColorOverDark: '#47a3ffff',
-      outerColorOverDark: '#314351ff',
+      outerColorOverDark: '#314351',
     },
@@ -146,15 +151,15 @@ error: {
   text: {
-    default: '#405261ff',
-    subtle: '#405261ff',
-    slightlyMuted: '#556575ff',
-    muted: '#556575ff',
-    faint: '#7e8e9eff',
-    extraMuted: '#abb9c7ff',
+    default: '#405261',
+    subtle: '#405261',
+    slightlyMuted: '#556575',
+    muted: '#556575',
+    faint: '#7e8e9e',
+    extraMuted: '#ABB9C7',
   },
   border: {
-    default: '#dfe6ebff',
-    divider: '#f1f3f5ff',
+    default: '#DFE6EB',
+    divider: '#f1f3f5',
     ui: {
-      default: '#c8d3deff',
-      dark: '#abb9c7ff',
+      default: '#C8D3DE',
+      dark: '#ABB9C7',
     },
@@ -306,9 +311,9 @@ },
       pressed: '#1c2674ff',
-      disabled: '#abb9c7ff',
+      disabled: '#405261',
     },
     text: {
-      headline: '#131b24ff',
-      dark: '#314351ff',
-      default: '#405261ff',
-      light: '#556575ff',
+      headline: '#131B24',
+      dark: '#314351',
+      default: '#1d2b36',
+      light: '#253642',
     },
@@ -315,0 +320,0 @@ success: {

src/js/newBrand/datePicker.js

@@ -10,6 +10,6 @@ export const datePicker = {
     current: {
-      background: '#dfe6ebff',
-      text: '#253642ff',
+      background: '#DFE6EB',
+      text: '#253642',
     },
   },
 }

src/js/newBrand/floatingBar.js

 export const floatingBar = {
   color: {
-    background: '#131b24ff',
+    background: '#131B24',
     button: {
-      iconDefault: '#7e8e9eff',
+      iconDefault: '#7e8e9e',
       iconHover: 'white',
@@ -10,4 +10,4 @@ backgroundDefault: 'transparent',
     },
-    divider: '#314351ff',
+    divider: '#314351',
   },
 }

src/js/newBrand/styled-components.js

@@ -7,3 +7,3 @@ import { css } from 'styled-components'
   --hsds-attachment-color-error: var(--hsds-color-red-600);
-  --hsds-badge-color-default: var(--hsds-color-charcoal-1000);
+  --hsds-badge-color-default: var(--hsds-color-charcoal-700);
   --hsds-button-color-blue-main: var(--hsds-color-cobalt-600);
@@ -43,13 +43,13 @@ --hsds-button-color-blue-hover: var(--hsds-color-cobalt-700);
   );
-  --hsds-button-color-grey-main: var(--hsds-color-charcoal-700);
-  --hsds-button-color-grey-hover: var(--hsds-color-charcoal-800);
+  --hsds-button-color-grey-main: var(--hsds-color-charcoal-400);
+  --hsds-button-color-grey-hover: var(--hsds-color-charcoal-500);
   --hsds-button-color-grey-text: white;
   --hsds-button-color-grey-outline-border: var(--hsds-color-grey-500);
   --hsds-button-color-grey-outline-borderHover: var(--hsds-color-grey-600);
-  --hsds-button-color-grey-outline-text: var(--hsds-color-charcoal-800);
-  --hsds-button-color-grey-outline-textHover: var(--hsds-color-charcoal-800);
+  --hsds-button-color-grey-outline-text: var(--hsds-color-charcoal-500);
+  --hsds-button-color-grey-outline-textHover: var(--hsds-color-charcoal-500);
   --hsds-button-color-grey-outline-hover: var(--hsds-color-grey-200);
   --hsds-button-color-grey-outline-hoverIconOnly: var(--hsds-color-grey-300);
   --hsds-button-color-grey-outline-textSeamlessHover: var(
-    --hsds-color-charcoal-1100
+    --hsds-color-charcoal-800
   );
@@ -81,5 +81,5 @@ --hsds-button-color-yellow-main: var(--hsds-color-orange-600);
   --hsds-datePicker-color-current-background: var(--hsds-color-grey-400);
-  --hsds-datePicker-color-current-text: var(--hsds-color-charcoal-1000);
+  --hsds-datePicker-color-current-text: var(--hsds-color-charcoal-700);
   --hsds-floatingBar-color-background: var(--hsds-color-charcoal-1200);
-  --hsds-floatingBar-color-button-iconDefault: var(--hsds-color-charcoal-600);
+  --hsds-floatingBar-color-button-iconDefault: var(--hsds-color-charcoal-200);
   --hsds-floatingBar-color-button-iconHover: white;
@@ -135,47 +135,53 @@ --hsds-floatingBar-color-button-backgroundDefault: transparent;
   --hsds-color-blue-accent: var(--hsds-color-cobalt-accent);
-  --hsds-color-charcoal-100: #f9fafaff;
-  --hsds-color-charcoal-100-rgb: 249, 250, 250;
-  --hsds-color-charcoal-200: #f1f3f5ff;
-  --hsds-color-charcoal-200-rgb: 241, 243, 245;
-  --hsds-color-charcoal-300: #dfe6ebff;
-  --hsds-color-charcoal-300-rgb: 223, 230, 235;
-  --hsds-color-charcoal-400: #c8d3deff;
-  --hsds-color-charcoal-400-rgb: 200, 211, 222;
-  --hsds-color-charcoal-500: #abb9c7ff;
-  --hsds-color-charcoal-500-rgb: 171, 185, 199;
-  --hsds-color-charcoal-530: var(--hsds-color-charcoal-500);
-  --hsds-color-charcoal-530-rgb: var(--hsds-color-charcoal-500-rgb);
-  --hsds-color-charcoal-550: var(--hsds-color-charcoal-500);
-  --hsds-color-charcoal-550-rgb: var(--hsds-color-charcoal-500-rgb);
-  --hsds-color-charcoal-600: #7e8e9eff;
-  --hsds-color-charcoal-600-rgb: 126, 142, 158;
-  --hsds-color-charcoal-650: var(--hsds-color-charcoal-600);
-  --hsds-color-charcoal-650-rgb: var(--hsds-color-charcoal-600-rgb);
-  --hsds-color-charcoal-700: #556575ff;
-  --hsds-color-charcoal-700-rgb: 85, 101, 117;
-  --hsds-color-charcoal-800: #405261ff;
-  --hsds-color-charcoal-800-rgb: 64, 82, 97;
-  --hsds-color-charcoal-900: #314351ff;
+  --hsds-color-charcoal-200: #7e8e9e;
+  --hsds-color-charcoal-200-rgb: 126, 142, 158;
+  --hsds-color-charcoal-300: #7e8e9e;
+  --hsds-color-charcoal-300-rgb: 126, 142, 158;
+  --hsds-color-charcoal-400: #556575;
+  --hsds-color-charcoal-400-rgb: 85, 101, 117;
+  --hsds-color-charcoal-500: #405261;
+  --hsds-color-charcoal-500-rgb: 64, 82, 97;
+  --hsds-color-charcoal-600: #314351;
+  --hsds-color-charcoal-600-rgb: 49, 67, 81;
+  --hsds-color-charcoal-700: #253642;
+  --hsds-color-charcoal-700-rgb: 37, 54, 66;
+  --hsds-color-charcoal-800: #1d2b36;
+  --hsds-color-charcoal-800-rgb: 29, 43, 54;
+  --hsds-color-charcoal-900: #314351;
   --hsds-color-charcoal-900-rgb: 49, 67, 81;
-  --hsds-color-charcoal-1000: #253642ff;
+  --hsds-color-charcoal-1000: #253642;
   --hsds-color-charcoal-1000-rgb: 37, 54, 66;
-  --hsds-color-charcoal-1100: #1d2b36ff;
+  --hsds-color-charcoal-1100: #1d2b36;
   --hsds-color-charcoal-1100-rgb: 29, 43, 54;
-  --hsds-color-charcoal-1200: #131b24ff;
+  --hsds-color-charcoal-1200: #131b24;
   --hsds-color-charcoal-1200-rgb: 19, 27, 36;
-  --hsds-color-charcoal-default: var(--hsds-color-charcoal-800);
-  --hsds-color-grey-200: var(--hsds-color-charcoal-100);
-  --hsds-color-grey-200-rgb: var(--hsds-color-charcoal-100-rgb);
-  --hsds-color-grey-300: var(--hsds-color-charcoal-200);
-  --hsds-color-grey-300-rgb: var(--hsds-color-charcoal-200-rgb);
-  --hsds-color-grey-400: var(--hsds-color-charcoal-300);
-  --hsds-color-grey-400-rgb: var(--hsds-color-charcoal-300-rgb);
-  --hsds-color-grey-500: var(--hsds-color-charcoal-400);
-  --hsds-color-grey-500-rgb: var(--hsds-color-charcoal-400-rgb);
-  --hsds-color-grey-600: var(--hsds-color-charcoal-500);
-  --hsds-color-grey-600-rgb: var(--hsds-color-charcoal-500-rgb);
-  --hsds-color-grey-700: var(--hsds-color-charcoal-500);
-  --hsds-color-grey-700-rgb: var(--hsds-color-charcoal-500-rgb);
-  --hsds-color-grey-800: var(--hsds-color-charcoal-500);
-  --hsds-color-grey-800-rgb: var(--hsds-color-charcoal-500-rgb);
+  --hsds-color-charcoal-default: var(--hsds-color-charcoal-500);
+  --hsds-color-grey-200: #f9fafa;
+  --hsds-color-grey-200-rgb: 249, 250, 250;
+  --hsds-color-grey-300: #f1f3f5;
+  --hsds-color-grey-300-rgb: 241, 243, 245;
+  --hsds-color-grey-400: #dfe6eb;
+  --hsds-color-grey-400-rgb: 223, 230, 235;
+  --hsds-color-grey-500: #c8d3de;
+  --hsds-color-grey-500-rgb: 200, 211, 222;
+  --hsds-color-grey-600: #abb9c7;
+  --hsds-color-grey-600-rgb: 171, 185, 199;
+  --hsds-color-grey-700: #abb9c7;
+  --hsds-color-grey-700-rgb: 171, 185, 199;
+  --hsds-color-grey-800: #abb9c7;
+  --hsds-color-grey-800-rgb: 171, 185, 199;
+  --hsds-color-ash-200: var(--hsds-color-grey-200);
+  --hsds-color-ash-200-rgb: var(--hsds-color-grey-200-rgb);
+  --hsds-color-ash-300: var(--hsds-color-grey-300);
+  --hsds-color-ash-300-rgb: var(--hsds-color-grey-300-rgb);
+  --hsds-color-ash-400: var(--hsds-color-grey-400);
+  --hsds-color-ash-400-rgb: var(--hsds-color-grey-400-rgb);
+  --hsds-color-ash-500: var(--hsds-color-grey-500);
+  --hsds-color-ash-500-rgb: var(--hsds-color-grey-500-rgb);
+  --hsds-color-ash-600: var(--hsds-color-grey-600);
+  --hsds-color-ash-600-rgb: var(--hsds-color-grey-600-rgb);
+  --hsds-color-ash-700: var(--hsds-color-grey-700);
+  --hsds-color-ash-700-rgb: var(--hsds-color-grey-700-rgb);
+  --hsds-color-ash-800: var(--hsds-color-grey-800);
+  --hsds-color-ash-800-rgb: var(--hsds-color-grey-800-rgb);
   --hsds-color-indigo-200: var(--hsds-color-cobalt-100);
@@ -293,3 +299,3 @@ --hsds-color-indigo-200-rgb: var(--hsds-color-cobalt-100-rgb);
   --hsds-color-link-focus: var(--hsds-color-cobalt-600);
-  --hsds-color-link-disabled: var(--hsds-color-charcoal-800);
+  --hsds-color-link-disabled: var(--hsds-color-charcoal-500);
   --hsds-color-focusRing-default-innerColor: var(--hsds-color-cobalt-600);
@@ -301,3 +307,3 @@ --hsds-color-focusRing-default-outerColor: var(--hsds-color-cobalt-200);
   --hsds-color-focusRing-default-outerColorOverDark: var(
-    --hsds-color-charcoal-900
+    --hsds-color-charcoal-600
   );
@@ -340,7 +346,7 @@ --hsds-color-focusRing-error-innerColor: var(
   );
-  --hsds-color-text-default: var(--hsds-color-charcoal-800);
-  --hsds-color-text-subtle: var(--hsds-color-charcoal-800);
-  --hsds-color-text-slightlyMuted: var(--hsds-color-charcoal-700);
-  --hsds-color-text-muted: var(--hsds-color-charcoal-700);
-  --hsds-color-text-faint: var(--hsds-color-charcoal-600);
+  --hsds-color-text-default: var(--hsds-color-charcoal-500);
+  --hsds-color-text-subtle: var(--hsds-color-charcoal-500);
+  --hsds-color-text-slightlyMuted: var(--hsds-color-charcoal-400);
+  --hsds-color-text-muted: var(--hsds-color-charcoal-400);
+  --hsds-color-text-faint: var(--hsds-color-charcoal-200);
   --hsds-color-text-extraMuted: var(--hsds-color-grey-600);
@@ -347,0 +353,0 @@ --hsds-color-border-default: var(--hsds-color-grey-400);

src/json/default/button.json

@@ -54,4 +54,4 @@ {
         "textHover": "#405261",
-        "hover": "#f9fafa",
-        "hoverIconOnly": "#f1f3f5",
+        "hover": "#F9FAFA",
+        "hoverIconOnly": "#F1F3F5",
         "textSeamlessHover": "#1d2b36"
@@ -75,3 +75,3 @@ }
     "disabled": {
-      "main": "#ccd6de",
+      "main": "#D5DCE1",
       "text": "white",
@@ -78,0 +78,0 @@ "outline": {

src/json/default/color.json

@@ -55,41 +55,37 @@ {
   "charcoal": {
-    "100": "#f9fafa",
-    "200": "#f1f3f5",
-    "300": "#e1e7eb",
-    "400": "#ccd6de",
-    "500": "#C5CED6",
-    "530": "#B7C2CC",
-    "550": "#A5B2BD",
-    "600": "#93A1B0",
-    "650": "#748494",
-    "700": "#556575",
-    "800": "#405261",
-    "900": "#314351",
-    "1000": "#253642",
+    "200": "#93A1B0",
+    "300": "#748494",
+    "400": "#556575",
+    "500": "#405261",
+    "600": "#314351",
+    "700": "#253642",
+    "800": "#1d2b36",
+    "900": "#1d2b36",
+    "1000": "#1d2b36",
     "1100": "#1d2b36",
     "1200": "#1d2b36",
-    "default": "#C5CED6",
-    "accent": "#C5CED6"
+    "default": "#405261",
+    "accent": "#405261"
   },
   "ash": {
-    "200": "#f9fafa",
-    "300": "#f1f3f5",
-    "400": "#e1e7eb",
-    "500": "#ccd6de",
+    "200": "#F9FAFA",
+    "300": "#F1F3F5",
+    "400": "#E5E9EC",
+    "500": "#D5DCE1",
     "600": "#C5CED6",
     "700": "#B7C2CC",
     "800": "#A5B2BD",
-    "default": "#ccd6de",
-    "accent": "#ccd6de"
+    "default": "#D5DCE1",
+    "accent": "#D5DCE1"
   },
   "grey": {
-    "200": "#f9fafa",
-    "300": "#f1f3f5",
-    "400": "#e1e7eb",
-    "500": "#ccd6de",
+    "200": "#F9FAFA",
+    "300": "#F1F3F5",
+    "400": "#E5E9EC",
+    "500": "#D5DCE1",
     "600": "#C5CED6",
     "700": "#B7C2CC",
     "800": "#A5B2BD",
-    "default": "#ccd6de",
-    "accent": "#ccd6de"
+    "default": "#D5DCE1",
+    "accent": "#D5DCE1"
   },
@@ -196,6 +192,6 @@ "yellow": {
   "border": {
-    "default": "#e1e7eb",
-    "divider": "#f1f3f5",
+    "default": "#E5E9EC",
+    "divider": "#F1F3F5",
     "ui": {
-      "default": "#ccd6de",
+      "default": "#D5DCE1",
       "dark": "#C5CED6"
@@ -202,0 +198,0 @@ }

src/json/default/datePicker.json

@@ -10,3 +10,3 @@ {
     "current": {
-      "background": "#f1f3f5",
+      "background": "#F1F3F5",
       "text": "#253642"
@@ -13,0 +13,0 @@ }

src/json/newBrand/badge.json

 {
   "color": {
-    "default": "#253642ff"
+    "default": "#253642"
   }
 }

src/json/newBrand/button.json

@@ -46,13 +46,13 @@ {
     "grey": {
-      "main": "#556575ff",
-      "hover": "#405261ff",
+      "main": "#556575",
+      "hover": "#405261",
       "text": "white",
       "outline": {
-        "border": "#c8d3deff",
-        "borderHover": "#abb9c7ff",
-        "text": "#405261ff",
-        "textHover": "#405261ff",
-        "hover": "#f9fafaff",
-        "hoverIconOnly": "#f1f3f5ff",
-        "textSeamlessHover": "#1d2b36ff"
+        "border": "#C8D3DE",
+        "borderHover": "#ABB9C7",
+        "text": "#405261",
+        "textHover": "#405261",
+        "hover": "#f9fafa",
+        "hoverIconOnly": "#f1f3f5",
+        "textSeamlessHover": "#1d2b36"
       }
@@ -75,7 +75,7 @@ },
     "disabled": {
-      "main": "#c8d3deff",
+      "main": "#C8D3DE",
       "text": "white",
       "outline": {
-        "border": "#abb9c7ff",
-        "text": "#abb9c7ff"
+        "border": "#ABB9C7",
+        "text": "#ABB9C7"
       }
@@ -82,0 +82,0 @@ }

src/json/newBrand/color.json

@@ -16,28 +16,33 @@ {
   "charcoal": {
-    "100": "#f9fafaff",
-    "200": "#f1f3f5ff",
-    "300": "#dfe6ebff",
-    "400": "#c8d3deff",
-    "500": "#abb9c7ff",
-    "530": "#abb9c7ff",
-    "550": "#abb9c7ff",
-    "600": "#7e8e9eff",
-    "650": "#7e8e9eff",
-    "700": "#556575ff",
-    "800": "#405261ff",
-    "900": "#314351ff",
-    "1000": "#253642ff",
-    "1100": "#1d2b36ff",
-    "1200": "#131b24ff",
-    "default": "#405261ff"
+    "200": "#7e8e9e",
+    "300": "#7e8e9e",
+    "400": "#556575",
+    "500": "#405261",
+    "600": "#314351",
+    "700": "#253642",
+    "800": "#1d2b36",
+    "900": "#314351",
+    "1000": "#253642",
+    "1100": "#1d2b36",
+    "1200": "#131B24",
+    "default": "#405261"
   },
   "grey": {
-    "200": "#f9fafaff",
-    "300": "#f1f3f5ff",
-    "400": "#dfe6ebff",
-    "500": "#c8d3deff",
-    "600": "#abb9c7ff",
-    "700": "#abb9c7ff",
-    "800": "#abb9c7ff"
+    "200": "#f9fafa",
+    "300": "#f1f3f5",
+    "400": "#DFE6EB",
+    "500": "#C8D3DE",
+    "600": "#ABB9C7",
+    "700": "#ABB9C7",
+    "800": "#ABB9C7"
   },
+  "ash": {
+    "200": "#f9fafa",
+    "300": "#f1f3f5",
+    "400": "#DFE6EB",
+    "500": "#C8D3DE",
+    "600": "#ABB9C7",
+    "700": "#ABB9C7",
+    "800": "#ABB9C7"
+  },
   "indigo": {
@@ -115,3 +120,3 @@ "200": "#ebf5ffff",
     "focus": "#304ddbff",
-    "disabled": "#405261ff"
+    "disabled": "#405261"
   },
@@ -123,3 +128,3 @@ "focusRing": {
       "innerColorOverDark": "#47a3ffff",
-      "outerColorOverDark": "#314351ff"
+      "outerColorOverDark": "#314351"
     },
@@ -146,15 +151,15 @@ "error": {
   "text": {
-    "default": "#405261ff",
-    "subtle": "#405261ff",
-    "slightlyMuted": "#556575ff",
-    "muted": "#556575ff",
-    "faint": "#7e8e9eff",
-    "extraMuted": "#abb9c7ff"
+    "default": "#405261",
+    "subtle": "#405261",
+    "slightlyMuted": "#556575",
+    "muted": "#556575",
+    "faint": "#7e8e9e",
+    "extraMuted": "#ABB9C7"
   },
   "border": {
-    "default": "#dfe6ebff",
-    "divider": "#f1f3f5ff",
+    "default": "#DFE6EB",
+    "divider": "#f1f3f5",
     "ui": {
-      "default": "#c8d3deff",
-      "dark": "#abb9c7ff"
+      "default": "#C8D3DE",
+      "dark": "#ABB9C7"
     }
@@ -306,9 +311,9 @@ },
       "pressed": "#1c2674ff",
-      "disabled": "#abb9c7ff"
+      "disabled": "#405261"
     },
     "text": {
-      "headline": "#131b24ff",
-      "dark": "#314351ff",
-      "default": "#405261ff",
-      "light": "#556575ff"
+      "headline": "#131B24",
+      "dark": "#314351",
+      "default": "#1d2b36",
+      "light": "#253642"
     },
@@ -315,0 +320,0 @@ "success": {

src/json/newBrand/datePicker.json

@@ -10,6 +10,6 @@ {
     "current": {
-      "background": "#dfe6ebff",
-      "text": "#253642ff"
+      "background": "#DFE6EB",
+      "text": "#253642"
     }
   }
 }

src/json/newBrand/floatingBar.json

 {
   "color": {
-    "background": "#131b24ff",
+    "background": "#131B24",
     "button": {
-      "iconDefault": "#7e8e9eff",
+      "iconDefault": "#7e8e9e",
       "iconHover": "white",
@@ -10,4 +10,4 @@ "backgroundDefault": "transparent",
     },
-    "divider": "#314351ff"
+    "divider": "#314351"
   }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

178843

decreased by-4.24%

Number of package files

55

decreased by-32.93%

Lines of code

4379

decreased by-2.75%

No dependency changes