Merge pull request #160 from finos/dev

Update main SDK from dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/a11y-theme-builder-sdk",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Accessibility Theme Builder SDK",
   "author": "Keith Smith <[email protected]>",
   "license": "Apache-2.0",
@@ -19,17 +19,17 @@
     "prepare": "tsc"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@types/jest": "^29.5.1",
-    "babel-jest": "^29.5.0",
+    "@babel/preset-env": "^7.25.3",
+    "@types/jest": "^29.5.12",
+    "babel-jest": "^29.7.0",
     "jest": "^29.5.0",
-    "ts-jest": "^29.0.5",
-    "ts-node": "^10.9.1",
-    "typedoc": "^0.23.28",
-    "typescript": "^4.9.4"
+    "ts-jest": "^29.2.4",
+    "ts-node": "^10.9.2",
+    "typedoc": "^0.26.5",
+    "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@types/chroma-js": "^2.1.5",
-    "chroma-js": "^2.4.2"
+    "@types/chroma-js": "^2.4.4",
+    "chroma-js": "^2.6.0"
   }
 }

src/atoms/bevelSettings.ts

@@ -69,9 +69,9 @@ export class BevelSettingsProps {
         this.verticalShadowLength = new PropertyNumberRange(`${p} Vertical Shadow Length`, false, bs, 0, 10, 6);
         this.blurRadius = new PropertyNumberRange(`${p} Blur Radius`, false, bs, 0, 10, 6);
         this.spreadRadius = new PropertyNumberRange(`${p} Spread Radius`, false, bs, 0, 10, 1);
-        this.lightGlowOpacity = new PropertyNumberRange(`${p} Light Glow Opacity`, false, bs, 0, 100, 30);
-        this.darkShadowOpacity = new PropertyNumberRange(`${p} Dark Shadow Opacity`, false, bs, 0, 100, 50);
-        this.percentageChange = new PropertyPercentage(`${p} Percentage Change`, false, bs, 20);
+        this.lightGlowOpacity = new PropertyNumberRange(`${p} Light Glow Opacity`, false, bs, 0, 100, 17);
+        this.darkShadowOpacity = new PropertyNumberRange(`${p} Dark Shadow Opacity`, false, bs, 0, 100, 10);
+        this.percentageChange = new PropertyPercentage(`${p} Percentage Change`, false, bs, 17);
     }
 
     public deserialize(obj: any) {

src/atoms/colorPalette.ts

@@ -2,7 +2,6 @@
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-import * as chroma from "chroma-js";
 import { Node } from "../common/node";
 import { Atom } from "./atom";
 import { MyMap } from "../util/myMap";

src/atoms/colorThemes.ts

@@ -3,7 +3,7 @@
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
 /* eslint-disable */
-import * as chroma from "chroma-js";
+import chroma from "chroma-js";
 import { Atom } from "./atom";
 import { ColorPalette } from "./colorPalette";
 import { Node } from "../common/node";

src/atoms/inputBackground.ts

@@ -2,7 +2,6 @@
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-import * as chroma from "chroma-js";
 import { TitledShade, PropertyTitledShade } from "../common/props";
 import { ColorTheme } from "./colorThemes";
 import { Atom } from "./atom";

src/code/cssGenerator.ts

@@ -1278,7 +1278,7 @@ class CSSTheme {
 
     private genCV1LM2(vk: CSSVariableKind) {
         this.genCV(vk, true, [
-            "1", "primary-050",
+            "1", "primary-0",
             "2", "primary-100",
             "3", "primary-300",
             "4", "primary-500",
@@ -1293,7 +1293,7 @@ class CSSTheme {
 
     private genCV1DM(vk: CSSVariableKind) {
         this.genCV(vk, false, [
-            "1", "primary-050",
+            "1", "primary-0",
             "2", "primary-100",
             "3", "primary-300",
             "4", "primary-500",
@@ -1323,7 +1323,7 @@ class CSSTheme {
 
     private genCV2LM2(vk: CSSVariableKind) {
         this.genCV(vk, true, [
-            "1", "primary-050",
+            "1", "primary-0",
             "2", "primary-100",
             "3", "primary-300",
             "4", "primary-500",
@@ -1338,7 +1338,7 @@ class CSSTheme {
 
     private genCV2DM(vk: CSSVariableKind) {
         this.genCV(vk, false, [
-            "1", "primary-050",
+            "1", "primary-0",
             "2", "primary-100",
             "3", "primary-300",
             "4", "primary-500",
@@ -1368,7 +1368,7 @@ class CSSTheme {
 
     private genCV3LM2(vk: CSSVariableKind) {
         this.genCV(vk, true, [
-            "1", "primary-050",
+            "1", "primary-0",
             "2", "primary-100",
             "3", "primary-300",
             "4", "primary-500",
@@ -1383,7 +1383,7 @@ class CSSTheme {
 
     private genCV3DM(vk: CSSVariableKind) {
         this.genCV(vk, false, [
-            "1", "primary-050",
+            "1", "primary-0",
             "2", "primary-100",
             "3", "primary-300",
             "4", "primary-500",

src/common/shade.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2023 Discover Financial Services
  * Licensed under Apache-2.0 License. See License.txt in the project root for license information
  */
-import * as chroma from "chroma-js";
+import chroma from "chroma-js";
 import { Logger } from "../util/logger";
 import { Util } from "../util/util";
 
@@ -990,9 +990,9 @@ export class Shade {
     public buildComplimentaryShades(): Shade[] {
         const ra = this.rgbArray;
         const rgb = chroma.rgb(ra[0],ra[1],ra[2]);
-        const h = rgb.get('hsv.h');
+        const h = rgb.get('hsv.h') + 180;
         const s = rgb.get('hsv.s');
-        const v = rgb.get('hsv.v') + 180;
+        const v = rgb.get('hsv.v');
         const h0 = h + 30;
         const h1 = h - 30;
         const rgb1 = 'rgb(' + chroma.hsv(h0,s,v).rgb() + ')';