From 1b43e829dcfbefe9f9f968fb193bd817dab7f7e5 Mon Sep 17 00:00:00 2001 From: Aradhya DIxit Date: Sat, 29 Jun 2024 23:15:12 +0530 Subject: [PATCH] fixed the issues that i have listed in the issue 946 --- code/package-lock.json | 218 +++++++++++++ code/package.json | 1 + code/src/data/themes | 27 +- code/src/ui/package.json | 4 +- code/src/ui/src/pages/DesignSystemPage.tsx | 2 +- .../ui/src/pages/atoms/ColorPaletteAtom.css | 5 +- .../ui/src/pages/atoms/ColorPaletteAtom.tsx | 300 +++++++++--------- .../pages/content/BasicColorModeSelector.tsx | 2 +- 8 files changed, 388 insertions(+), 171 deletions(-) diff --git a/code/package-lock.json b/code/package-lock.json index bbd2d4d0..61ec1974 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -20,6 +20,7 @@ "axios": "^1.6.8", "axios-debug-log": "^1.0.0", "body-parser": "^1.20.2", + "color-namer": "^1.4.0", "cookie-parser": "^1.4.6", "express": "^4.19.2", "express-basic-auth": "^1.2.1", @@ -914,6 +915,11 @@ "fsevents": "~2.3.2" } }, + "node_modules/chroma-js": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.4.1.tgz", + "integrity": "sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -932,6 +938,15 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/color-namer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/color-namer/-/color-namer-1.4.0.tgz", + "integrity": "sha512-3mQMY9MJyfdV2uhe+xjQWcKHtYnPtl5svGjt89V2WWT2MlaLAd7C02886Wq7H1MTjjIIEa/NJLYPNF/Lhxhq2A==", + "dependencies": { + "chroma-js": "^1.3.4", + "es6-weak-map": "^2.0.3" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -1012,6 +1027,18 @@ "node": ">= 8" } }, + "node_modules/d": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz", + "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==", + "dependencies": { + "es5-ext": "^0.10.64", + "type": "^2.7.2" + }, + "engines": { + "node": ">=0.12" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1112,6 +1139,54 @@ "node": ">= 0.8" } }, + "node_modules/es5-ext": { + "version": "0.10.64", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz", + "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==", + "hasInstallScript": true, + "dependencies": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "esniff": "^2.0.1", + "next-tick": "^1.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "dependencies": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, + "node_modules/es6-symbol": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz", + "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==", + "dependencies": { + "d": "^1.0.2", + "ext": "^1.7.0" + }, + "engines": { + "node": ">=0.12" + } + }, + "node_modules/es6-weak-map": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz", + "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==", + "dependencies": { + "d": "1", + "es5-ext": "^0.10.46", + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.1" + } + }, "node_modules/escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -1233,6 +1308,20 @@ "node": ">=10.13.0" } }, + "node_modules/esniff": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz", + "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==", + "dependencies": { + "d": "^1.0.1", + "es5-ext": "^0.10.62", + "event-emitter": "^0.3.5", + "type": "^2.7.2" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -1300,6 +1389,15 @@ "node": ">= 0.6" } }, + "node_modules/event-emitter": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz", + "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==", + "dependencies": { + "d": "1", + "es5-ext": "~0.10.14" + } + }, "node_modules/express": { "version": "4.19.2", "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", @@ -1414,6 +1512,14 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/ext": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz", + "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==", + "dependencies": { + "type": "^2.7.2" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -2145,6 +2251,11 @@ "node": ">= 0.6" } }, + "node_modules/next-tick": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", + "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==" + }, "node_modules/nodemon": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz", @@ -2837,6 +2948,11 @@ } } }, + "node_modules/type": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz", + "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -3659,6 +3775,11 @@ "readdirp": "~3.6.0" } }, + "chroma-js": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-1.4.1.tgz", + "integrity": "sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==" + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3674,6 +3795,15 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "color-namer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/color-namer/-/color-namer-1.4.0.tgz", + "integrity": "sha512-3mQMY9MJyfdV2uhe+xjQWcKHtYnPtl5svGjt89V2WWT2MlaLAd7C02886Wq7H1MTjjIIEa/NJLYPNF/Lhxhq2A==", + "requires": { + "chroma-js": "^1.3.4", + "es6-weak-map": "^2.0.3" + } + }, "combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -3736,6 +3866,15 @@ "which": "^2.0.1" } }, + "d": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz", + "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==", + "requires": { + "es5-ext": "^0.10.64", + "type": "^2.7.2" + } + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -3806,6 +3945,47 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==" }, + "es5-ext": { + "version": "0.10.64", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz", + "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==", + "requires": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "esniff": "^2.0.1", + "next-tick": "^1.1.0" + } + }, + "es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "requires": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, + "es6-symbol": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz", + "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==", + "requires": { + "d": "^1.0.2", + "ext": "^1.7.0" + } + }, + "es6-weak-map": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz", + "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==", + "requires": { + "d": "1", + "es5-ext": "^0.10.46", + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.1" + } + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -3897,6 +4077,17 @@ "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true }, + "esniff": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz", + "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==", + "requires": { + "d": "^1.0.1", + "es5-ext": "^0.10.62", + "event-emitter": "^0.3.5", + "type": "^2.7.2" + } + }, "espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -3943,6 +4134,15 @@ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==" }, + "event-emitter": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz", + "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==", + "requires": { + "d": "1", + "es5-ext": "~0.10.14" + } + }, "express": { "version": "4.19.2", "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", @@ -4049,6 +4249,14 @@ } } }, + "ext": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz", + "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==", + "requires": { + "type": "^2.7.2" + } + }, "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -4613,6 +4821,11 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==" }, + "next-tick": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", + "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==" + }, "nodemon": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz", @@ -5074,6 +5287,11 @@ "yn": "3.1.1" } }, + "type": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz", + "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/code/package.json b/code/package.json index e7c62124..b5244d15 100644 --- a/code/package.json +++ b/code/package.json @@ -35,6 +35,7 @@ "axios": "^1.6.8", "axios-debug-log": "^1.0.0", "body-parser": "^1.20.2", + "color-namer": "^1.4.0", "cookie-parser": "^1.4.6", "express": "^4.19.2", "express-basic-auth": "^1.2.1", diff --git a/code/src/data/themes b/code/src/data/themes index e797c9d8..c37efdf3 100644 --- a/code/src/data/themes +++ b/code/src/data/themes @@ -1,27 +1,12 @@ -{"k":"0000000080","o":"0000002870","v":"001"} -{"_id":13,"_uid":29,"_dt":1695223450954,"_s":"efb78dc9a8781c1cb6b3937ee5ff9387"} -{"atoms":{"colorPalette":{"colors":[{"name":"Teal","hex":"#3fb394"}],"defaultColorName":"Teal"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/Teal/lm[4]"},"secondary":{"key":"atoms/ColorPalette/Teal/lm[3]"},"tertiary":{"key":"atoms/ColorPalette/Teal/lm[2]"},"lightModeBackground":{"title":"Primary O-Half/Quarter","primary":{"hex":"#F6FBFA","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"secondary":{"hex":"#EDF8F5","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"secondary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/Teal/lm[2]"},"to":{"key":"atoms/ColorPalette/Teal/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Teal/lm[2]"},"to":{"key":"atoms/ColorPalette/Teal/lm[1]"}},"button":{"key":"atoms/ColorPalette/Teal/lm[5]"},"icon":{"key":"atoms/ColorPalette/Teal/lm[4]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/Teal/lm[4]"},"to":{"key":"atoms/ColorPalette/Teal/lm[6]"}},"accent":{"key":"atoms/ColorPalette/Teal/lm[1]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{"minWidth":6},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1681464745221,"lastUpdateInMs":1695223450893},"colors":{"primary":"#339779","secondary":"#3FB394","tertiary":"#75C8B2","background":"#EDF8F5"}},"id":"My Design","_id":{"$wrap":"$oid","v":13}} -{"k":"0000000080","o":"0000002925","v":"001"} -{"_id":20,"_uid":20,"_dt":1690824035592,"_s":"eba8a3cd8c0b67ffd5db449a794444b0"} -{"atoms":{"colorPalette":{"colors":[{"name":"Blue","hex":"#2d8eac"},{"name":"Purple","hex":"#862fa2"},{"name":"PInk","hex":"#ed5998"}],"defaultColorName":"Blue"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/PInk/lm[5]"},"secondary":{"key":"atoms/ColorPalette/Purple/lm[5]"},"tertiary":{"key":"atoms/ColorPalette/Blue/lm[6]"},"lightModeBackground":{"title":"White/Off White","primary":{"hex":"#FAF9F6","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#FFFFFF","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/PInk/lm[1]"},"to":{"key":"atoms/ColorPalette/PInk/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Purple/lm[1]"},"to":{"key":"atoms/ColorPalette/Purple/lm[3]"}},"button":{"key":"atoms/ColorPalette/Purple/lm[5]"},"icon":{"key":"atoms/ColorPalette/Blue/lm[6]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/PInk/lm[5]"},"to":{"key":"atoms/ColorPalette/Purple/lm[5]"}},"accent":{"key":"atoms/ColorPalette/PInk/lm[0]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1690823904515,"lastUpdateInMs":1690824035555},"colors":{"primary":"#C8457B","secondary":"#9950B1","tertiary":"#216D89","background":"#FFFFFF"}},"id":"Testung","_id":{"$wrap":"$oid","v":20}} -{"k":"0000000080","o":"0000001607","v":"001"} -{"_id":29,"_uid":29,"_dt":1695207281610,"_s":"fc8f4723bf980e313a7910c9c8423b86"} -{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1695207281577,"lastUpdateInMs":1695207281577},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"Testing","_id":{"$wrap":"$oid","v":29}} +{"k":"0000000080","o":"0000003251","v":"001"} +{"_id":13,"_uid":31,"_dt":1698766878824,"_s":"c553788d0b8d71409fb8e74ad543de1b"} +{"atoms":{"colorPalette":{"colors":[{"name":"Teal","hex":"#3fb394"}],"defaultColorName":"Teal"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/Teal/lm[4]"},"secondary":{"key":"atoms/ColorPalette/Teal/lm[3]"},"tertiary":{"key":"atoms/ColorPalette/Teal/lm[2]"},"lightModeBackground":{"title":"Primary O-Half/Quarter","primary":{"hex":"#EDF8F5","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"secondary":{"hex":"#F6FBFA","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"secondary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/Teal/lm[2]"},"to":{"key":"atoms/ColorPalette/Teal/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Teal/lm[2]"},"to":{"key":"atoms/ColorPalette/Teal/lm[1]"}},"button":{"key":"atoms/ColorPalette/Teal/lm[5]"},"icon":{"key":"atoms/ColorPalette/Teal/lm[4]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/Teal/lm[4]"},"to":{"key":"atoms/ColorPalette/Teal/lm[6]"}},"accent":{"key":"atoms/ColorPalette/Teal/lm[1]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"baseFontSize":16,"fontWeights":[300,400,600,700,800]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{"fontWeight":400},"body1Bold":{"fontWeight":700},"body2":{"fontWeight":400},"body2Bold":{"fontWeight":700},"body3":{"fontWeight":400},"body3Bold":{"fontWeight":700}},"smallTextStyles":{"subtitle1":{"fontWeight":600},"subtitle2":{"fontWeight":600},"caption":{"fontWeight":300},"captionBold":{"fontWeight":600},"overline":{"fontWeight":600},"overlineLarge":{"fontWeight":600},"overlineExtraLarge":{"fontWeight":600},"label1":{"fontWeight":600},"label1AllCaps":{"fontWeight":600},"label2":{"fontWeight":600},"label2AllCaps":{"fontWeight":600},"labelSmall":{"fontWeight":600},"callToAction":{"fontWeight":300},"callToActionSmall":{"fontWeight":300},"small":{"fontWeight":300},"smallSemibold":{"fontWeight":600}},"statStyles":{"stat":{"fontWeight":800}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{"minWidth":6},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1681464745221,"lastUpdateInMs":1698766878813},"colors":{"primary":"#339779","secondary":"#3FB394","tertiary":"#75C8B2","background":"#F6FBFA"}},"id":"My Design","_id":{"$wrap":"$oid","v":13}} {"k":"0000000080","o":"0000003309","v":"001"} {"_id":30,"_uid":30,"_dt":1698763263926,"_s":"bd89bbc3b10a7aeb6b0a7ba840aac5d9"} {"atoms":{"colorPalette":{"colors":[{"name":"red","hex":"#8b2020"}],"defaultColorName":"red"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/red/lm[1]"},"secondary":{"key":"atoms/ColorPalette/red/lm[4]"},"tertiary":{"key":"atoms/ColorPalette/red/lm[7]"},"lightModeBackground":{"title":"White/Off White","primary":{"hex":"#FFFFFF","opacity":1,"mode":"atoms/ColorPalette/red/lm"},"secondary":{"hex":"#FAF9F6","opacity":1,"mode":"atoms/ColorPalette/red/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/red/lm"},"secondary":{"hex":"#343231","opacity":1,"mode":"atoms/ColorPalette/red/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/red/lm[1]"},"to":{"key":"atoms/ColorPalette/red/lm[4]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/red/lm[1]"},"to":{"key":"atoms/ColorPalette/red/lm[3]"}},"button":{"key":"atoms/ColorPalette/red/lm[5]"},"icon":{"key":"atoms/ColorPalette/red/lm[5]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/red/lm[5]"},"to":{"key":"atoms/ColorPalette/red/lm[8]"}},"accent":{"key":"atoms/ColorPalette/red/lm[3]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"secondaryFont":"Open Sans","baseFontSize":16,"fontWeights":[300,400,600,700,800]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{"fontWeight":400},"body1Bold":{"fontWeight":700},"body2":{"fontWeight":400},"body2Bold":{"fontWeight":700},"body3":{"fontWeight":400},"body3Bold":{"fontWeight":700}},"smallTextStyles":{"subtitle1":{"fontWeight":600},"subtitle2":{"fontWeight":600},"caption":{"fontWeight":300},"captionBold":{"fontWeight":600},"overline":{"fontWeight":600},"overlineLarge":{"fontWeight":600},"overlineExtraLarge":{"fontWeight":600},"label1":{"fontWeight":600},"label1AllCaps":{"fontWeight":600},"label2":{"fontWeight":600},"label2AllCaps":{"fontWeight":600},"labelSmall":{"fontWeight":600},"callToAction":{"fontWeight":300},"callToActionSmall":{"fontWeight":300},"small":{"fontWeight":300},"smallSemibold":{"fontWeight":600}},"statStyles":{"stat":{"fontWeight":800}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":0.6}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{"hoverAndFocusAnimationDistance":8},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{"minWidth":80,"horizontalPadding":2},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":true,"time":{"createdInMs":1681328870176,"lastUpdateInMs":1698763263905},"colors":{"primary":"#E4CACA","secondary":"#B97878","tertiary":"#8B2020","background":"#FAF9F6"}},"id":"Sample","_id":{"$wrap":"$oid","v":30}} -{"k":"0000000051","o":"0000000000","v":"001"} -{"_id":29,"_uid":30,"_dt":1698766809336,"_a":"del"} - -{"k":"0000000080","o":"0000002925","v":"001"} -{"_id":31,"_uid":31,"_dt":1698766830681,"_s":"1ea6748e5b059a7093fc5eede02a04b6"} -{"atoms":{"colorPalette":{"colors":[{"name":"Blue","hex":"#2d8eac"},{"name":"Purple","hex":"#862fa2"},{"name":"PInk","hex":"#ed5998"}],"defaultColorName":"Blue"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/PInk/lm[5]"},"secondary":{"key":"atoms/ColorPalette/Purple/lm[5]"},"tertiary":{"key":"atoms/ColorPalette/Blue/lm[6]"},"lightModeBackground":{"title":"White/Off White","primary":{"hex":"#FAF9F6","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#FFFFFF","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/PInk/lm[1]"},"to":{"key":"atoms/ColorPalette/PInk/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Purple/lm[1]"},"to":{"key":"atoms/ColorPalette/Purple/lm[3]"}},"button":{"key":"atoms/ColorPalette/Purple/lm[5]"},"icon":{"key":"atoms/ColorPalette/Blue/lm[6]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/PInk/lm[5]"},"to":{"key":"atoms/ColorPalette/Purple/lm[5]"}},"accent":{"key":"atoms/ColorPalette/PInk/lm[0]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1690823904515,"lastUpdateInMs":1698766830663},"colors":{"primary":"#C8457B","secondary":"#9950B1","tertiary":"#216D89","background":"#FFFFFF"}},"id":"Testing","_id":{"$wrap":"$oid","v":31}} -{"k":"0000000051","o":"0000000000","v":"001"} -{"_id":20,"_uid":31,"_dt":1698766830688,"_a":"del"} - {"k":"0000000080","o":"0000003306","v":"001"} {"_id":31,"_uid":31,"_dt":1698766850655,"_s":"ca2caa00f7eff588585535fe73256327"} {"atoms":{"colorPalette":{"colors":[{"name":"Blue","hex":"#2d8eac"},{"name":"Purple","hex":"#862fa2"},{"name":"PInk","hex":"#ed5998"}],"defaultColorName":"Blue"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/PInk/lm[5]"},"secondary":{"key":"atoms/ColorPalette/Purple/lm[5]"},"tertiary":{"key":"atoms/ColorPalette/Blue/lm[6]"},"lightModeBackground":{"title":"White/Off White","primary":{"hex":"#FFFFFF","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#FAF9F6","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"secondary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/PInk/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/PInk/lm[1]"},"to":{"key":"atoms/ColorPalette/PInk/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Purple/lm[1]"},"to":{"key":"atoms/ColorPalette/Purple/lm[3]"}},"button":{"key":"atoms/ColorPalette/Purple/lm[5]"},"icon":{"key":"atoms/ColorPalette/Blue/lm[6]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/PInk/lm[5]"},"to":{"key":"atoms/ColorPalette/Purple/lm[5]"}},"accent":{"key":"atoms/ColorPalette/PInk/lm[0]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"baseFontSize":16,"fontWeights":[300,400,600,700,800]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{"fontWeight":400},"body1Bold":{"fontWeight":700},"body2":{"fontWeight":400},"body2Bold":{"fontWeight":700},"body3":{"fontWeight":400},"body3Bold":{"fontWeight":700}},"smallTextStyles":{"subtitle1":{"fontWeight":600},"subtitle2":{"fontWeight":600},"caption":{"fontWeight":300},"captionBold":{"fontWeight":600},"overline":{"fontWeight":600},"overlineLarge":{"fontWeight":600},"overlineExtraLarge":{"fontWeight":600},"label1":{"fontWeight":600},"label1AllCaps":{"fontWeight":600},"label2":{"fontWeight":600},"label2AllCaps":{"fontWeight":600},"labelSmall":{"fontWeight":600},"callToAction":{"fontWeight":300},"callToActionSmall":{"fontWeight":300},"small":{"fontWeight":300},"smallSemibold":{"fontWeight":600}},"statStyles":{"stat":{"fontWeight":800}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1690823904515,"lastUpdateInMs":1698766850647},"colors":{"primary":"#C8457B","secondary":"#9950B1","tertiary":"#216D89","background":"#FAF9F6"}},"id":"Testing","_id":{"$wrap":"$oid","v":31}} -{"k":"0000000080","o":"0000003251","v":"001"} -{"_id":13,"_uid":31,"_dt":1698766878824,"_s":"c553788d0b8d71409fb8e74ad543de1b"} -{"atoms":{"colorPalette":{"colors":[{"name":"Teal","hex":"#3fb394"}],"defaultColorName":"Teal"},"colorThemes":{"themes":{"default-initial-color-theme-instance":{"primary":{"key":"atoms/ColorPalette/Teal/lm[4]"},"secondary":{"key":"atoms/ColorPalette/Teal/lm[3]"},"tertiary":{"key":"atoms/ColorPalette/Teal/lm[2]"},"lightModeBackground":{"title":"Primary O-Half/Quarter","primary":{"hex":"#EDF8F5","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"secondary":{"hex":"#F6FBFA","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"lighter":true},"darkModeBackground":{"title":"Black/Off Black","primary":{"hex":"#181818","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"secondary":{"hex":"#121212","opacity":1,"mode":"atoms/ColorPalette/Teal/lm"},"lighter":false},"gradient1":{"from":{"key":"atoms/ColorPalette/Teal/lm[2]"},"to":{"key":"atoms/ColorPalette/Teal/lm[3]"}},"gradient2":{"from":{"key":"atoms/ColorPalette/Teal/lm[2]"},"to":{"key":"atoms/ColorPalette/Teal/lm[1]"}},"button":{"key":"atoms/ColorPalette/Teal/lm[5]"},"icon":{"key":"atoms/ColorPalette/Teal/lm[4]"},"gradientHeaderText":{"from":{"key":"atoms/ColorPalette/Teal/lm[4]"},"to":{"key":"atoms/ColorPalette/Teal/lm[6]"}},"accent":{"key":"atoms/ColorPalette/Teal/lm[1]"}}},"defaultTheme":"default-initial-color-theme-instance"},"fontsSettings":{"baseFontSize":16,"fontWeights":[300,400,600,700,800]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{"fontWeight":400},"body1Bold":{"fontWeight":700},"body2":{"fontWeight":400},"body2Bold":{"fontWeight":700},"body3":{"fontWeight":400},"body3Bold":{"fontWeight":700}},"smallTextStyles":{"subtitle1":{"fontWeight":600},"subtitle2":{"fontWeight":600},"caption":{"fontWeight":300},"captionBold":{"fontWeight":600},"overline":{"fontWeight":600},"overlineLarge":{"fontWeight":600},"overlineExtraLarge":{"fontWeight":600},"label1":{"fontWeight":600},"label1AllCaps":{"fontWeight":600},"label2":{"fontWeight":600},"label2AllCaps":{"fontWeight":600},"labelSmall":{"fontWeight":600},"callToAction":{"fontWeight":300},"callToActionSmall":{"fontWeight":300},"small":{"fontWeight":300},"smallSemibold":{"fontWeight":600}},"statStyles":{"stat":{"fontWeight":800}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{"minWidth":6},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1681464745221,"lastUpdateInMs":1698766878813},"colors":{"primary":"#339779","secondary":"#3FB394","tertiary":"#75C8B2","background":"#F6FBFA"}},"id":"My Design","_id":{"$wrap":"$oid","v":13}} +{"k":"0000000080","o":"0000001604","v":"001"} +{"_id":32,"_uid":32,"_dt":1719667182498,"_s":"56f34bafff4924a34a095fd2dbcb5e20"} +{"atoms":{"colorPalette":{"colors":[]},"colorThemes":{"themes":{}},"fontsSettings":{"fontWeights":[null,null,null,null,null]},"displayAndHeaderStyles":{"percentChangeInHeaderDisplaySizes":{"min":0,"max":100},"displayStyles":[{},{}],"headerStyles":[{},{},{},{},{},{}]},"bodyStyles":{"body1":{},"body1Bold":{},"body2":{},"body2Bold":{},"body3":{},"body3Bold":{}},"smallTextStyles":{"subtitle1":{},"subtitle2":{},"caption":{},"captionBold":{},"overline":{},"overlineLarge":{},"overlineExtraLarge":{},"label1":{},"label1AllCaps":{},"label2":{},"label2AllCaps":{},"labelSmall":{},"callToAction":{},"callToActionSmall":{},"small":{},"smallSemibold":{}},"statStyles":{"stat":{}},"gridSettings":{},"minimumTarget":{},"stateSettings":{},"chartColors":{},"borderSettings":{},"focusStates":{},"hotlinks":{},"inputBackground":{"whiteBackground":{"shade":{"hex":"#FFFFFF","opacity":1}}},"elevationSettings":{},"bevelSettings":{"standard":{},"inverse":{}},"glowSettings":{},"animationSettings":{},"colorBlind":{}},"molecules":{"avatars":{},"standardButtons":{},"chartDonut":{"cutoutThickness":{"min":0,"max":100}},"chartPie":{},"chartLine":{},"chartProgress":{"cutoutThickness":{"min":0,"max":100}},"chips":{},"spacing":{},"dropdowns":{},"images":{},"modal":{},"popovers":{},"sliders":{},"toasts":{}},"organisms":{"dataTables":{},"hero":{},"primaryNav":{},"secondaryNav":{},"footerAndCopyright":{}},"layers":{},"metadata":{"sample":false,"time":{"createdInMs":1719667182456,"lastUpdateInMs":1719667182456},"colors":{"primary":"","secondary":"","tertiary":"","background":""}},"id":"jbjb","_id":{"$wrap":"$oid","v":32}} diff --git a/code/src/ui/package.json b/code/src/ui/package.json index 4b928b90..f5db1693 100644 --- a/code/src/ui/package.json +++ b/code/src/ui/package.json @@ -9,8 +9,8 @@ "@finos/a11y-theme-builder-sdk": "^1.0.0", "@mui/icons-material": "^5.15.15", "@mui/material": "^5.15.15", - "@mui/x-data-grid": "^7.1.1", "@mui/system": "^5.15.15", + "@mui/x-data-grid": "^7.1.1", "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.1", "@testing-library/user-event": "^14.5.2", @@ -28,6 +28,7 @@ "axios": "^1.6.8", "buffer": "^6.0.3", "chroma-js": "^2.4.2", + "color-namer": "^1.4.0", "colord": "^2.9.3", "file-saver": "^2.0.5", "html-react-parser": "^5.1.10", @@ -98,6 +99,7 @@ "webpack": "^5.91.0" }, "devDependencies": { + "@types/color-namer": "^1.3.3", "react-scripts": "5.0.1", "webpack": "^5.91.0" } diff --git a/code/src/ui/src/pages/DesignSystemPage.tsx b/code/src/ui/src/pages/DesignSystemPage.tsx index 2a6bd2fc..9b8467fe 100644 --- a/code/src/ui/src/pages/DesignSystemPage.tsx +++ b/code/src/ui/src/pages/DesignSystemPage.tsx @@ -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 React, { useRef, useLayoutEffect, ReactNode } from 'react'; +import React from 'react'; import { useParams } from "react-router-dom"; import { Tab, Tabs, styled } from '@mui/material'; import { useEffect, useState } from 'react'; diff --git a/code/src/ui/src/pages/atoms/ColorPaletteAtom.css b/code/src/ui/src/pages/atoms/ColorPaletteAtom.css index 0e931440..fedf579d 100644 --- a/code/src/ui/src/pages/atoms/ColorPaletteAtom.css +++ b/code/src/ui/src/pages/atoms/ColorPaletteAtom.css @@ -2,4 +2,7 @@ display: flex; align-items: center; gap: 8px; -} \ No newline at end of file +} + + + diff --git a/code/src/ui/src/pages/atoms/ColorPaletteAtom.tsx b/code/src/ui/src/pages/atoms/ColorPaletteAtom.tsx index 8ec7f7ee..e71533f0 100644 --- a/code/src/ui/src/pages/atoms/ColorPaletteAtom.tsx +++ b/code/src/ui/src/pages/atoms/ColorPaletteAtom.tsx @@ -1,173 +1,181 @@ -/* - * Copyright (c) 2023 Discover Financial Services - * Licensed under Apache-2.0 License. See License.txt in the project root for license information - */ -import React from 'react'; -import { Alert, Button, InputLabel, TextField, Grid } from '@mui/material'; -import { ChangeEvent, FocusEvent, useEffect, useState } from 'react'; +import React, { useEffect, useState, ChangeEvent, FocusEvent } from 'react'; +import { Alert, Button, InputLabel, TextField } from '@mui/material'; +import { ChromePicker, ColorResult } from 'react-color'; import { Color, ColorPalette, Shade } from '@finos/a11y-theme-builder-sdk'; -import { ChromePicker, ColorResult } from "react-color"; import { DisplayColorPalette } from '../../components/DisplayColorPalette'; -import './ColorPaletteAtom.css'; import { HeadingSection } from '../../pages/content/HeadingSection'; import { ExampleSection } from '../../pages/content/ExampleSection'; import { SettingsSection } from '../../pages/content/SettingsSection'; import { GeneratedCodeSection } from '../../pages/content/GeneratedCodeSection'; +import namer from 'color-namer'; +import './ColorPaletteAtom.css'; -interface Props { - atom: ColorPalette; - defaultColor?: string; - changeTab(newTabIndex: string): void; -} +// Utility function to determine the text color based on the brightness of the background color +const getTextColor = (hex: string): string => { + hex = hex.replace('#', ''); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + const brightness = (r * 299 + g * 587 + b * 114) / 1000; + return brightness > 128 ? '#000000' : '#FFFFFF'; +}; -export const ColorPaletteAtom: React.FC = ({atom, defaultColor, changeTab}) => { +// Utility function to get color name from hex value +const getColorName = (hex: string): string => { + const names = namer(hex); + return names.basic[0].name; +}; - const [_defaultColor, _setDefaultColor] = useState("#ffffff"); - const [_blockPickerColor, _setBlockPickerColor] = useState(_defaultColor); - const [_blockPickerOnColor, _setBlockPickerOnColor] = useState(_defaultColor); - const [_colorName, _setColorName] = useState(""); - const [_colors, _setColors] = useState([]); - const [_addColorErrorTriggered, _setAddColorErrorTriggered] = useState(false) - const [_addColorInputErrorTriggered, _setAddColorInputErrorTriggered] = useState(false) - const [_addColorError, _setAddColorError] = useState(false) - const [_addColorErrorMessage, _setAddColorErrorMessage] = useState("") +interface Props { + atom: ColorPalette; + defaultColor?: string; + changeTab: (newTabIndex: string) => void; +} - useEffect(() => { - if (defaultColor && defaultColor.length > 0) { - _setDefaultColor(defaultColor); - reflectColorPickerChangeInUI(defaultColor); - } - _setColors(atom.getColors()); - }, []) +export const ColorPaletteAtom: React.FC = ({ atom, defaultColor = "#ffffff", changeTab }) => { + const [_blockPickerColor, _setBlockPickerColor] = useState(defaultColor); + const [_blockPickerOnColor, _setBlockPickerOnColor] = useState(getTextColor(defaultColor)); + const [_colorName, _setColorName] = useState(getColorName(defaultColor)); + const [_colors, _setColors] = useState([]); + const [_addColorErrorTriggered, _setAddColorErrorTriggered] = useState(false); + const [_addColorInputErrorTriggered, _setAddColorInputErrorTriggered] = useState(false); + const [_addColorError, _setAddColorError] = useState(false); + const [_addColorErrorMessage, _setAddColorErrorMessage] = useState(""); - const resetUI = () => { - _setColorName(""); - _setBlockPickerColor(_defaultColor); + useEffect(() => { + _setColors(atom.getColors()); + if (defaultColor) { + reflectColorPickerChangeInUI(defaultColor); } + }, [defaultColor, atom]); - // update color picker states to which other UI - // on the page is bound to, include "on" color - // in updates - const reflectColorPickerChangeInUI = (color: string) => { - // update the _blockPickerColor in case user is manually - // entering a new value, we need the field to update - // as the user types. Even in an error condition. - _setBlockPickerColor(color); - if (!_addColorInputErrorTriggered) { - const shadeForColor = Shade.fromHex(color); - const shadeForOnColor = shadeForColor.getOnShade() - _setBlockPickerOnColor(shadeForOnColor.hex); - } - } + const resetUI = () => { + _setColorName(""); + _setBlockPickerColor(defaultColor); + _setBlockPickerOnColor(getTextColor(defaultColor)); + }; - const handleAddColor = (event: React.MouseEvent) => { - console.log(`add color name: ${_colorName} hex value: ${_blockPickerColor}`); - if (_colorName === "") { - _setAddColorErrorTriggered(true); - return; - } - //TODO: we need to switch this to use a listener (from the SDK) - // to handle changes to the color palette rather than the - // _colors state. - try { - const newColor = atom.addColor(_colorName, _blockPickerColor); - _setAddColorError(false); - console.log(`created new color: `, newColor); //${JSON.stringify(newColor)}`); - console.log(`resulting color palette:`, atom.getColors()); // ${JSON.stringify(designSystem.atoms.colorPalette.getColors())}`); - const colors = _colors; - colors.push(newColor); - _setColors(colors); - // reset the color input field - resetUI(); - } catch (error: any) { - _setAddColorErrorMessage(`${error.message}`); - _setAddColorError(true); - } + const reflectColorPickerChangeInUI = (color: string) => { + _setBlockPickerColor(color); + if (!_addColorInputErrorTriggered) { + const shadeForColor = Shade.fromHex(color); + const shadeForOnColor = shadeForColor.getOnShade(); + _setBlockPickerOnColor(shadeForOnColor.hex); + const colorName = getColorName(color); + _setColorName(colorName); } + }; - const handleColorNameBlur = (event: FocusEvent) => { - if (event.target.value === "") { - _setAddColorErrorTriggered(true); - return; - } - _setAddColorErrorTriggered(false); - _setColorName(event.target.value) + const handleAddColor = () => { + if (_colorName.trim() === "") { + _setAddColorErrorTriggered(true); + return; } - const handleColorValueInputChange = (event: ChangeEvent) => { - if (!/^#[0-9A-F]{6}$/i.test(event.target.value) == true) { - _setAddColorInputErrorTriggered(true); - // need to set _blockPickerColor since UI is tied to - // it, so it needs to update so value in field can - // update as user types - _setBlockPickerColor(event.target.value); - return; - } - _setAddColorInputErrorTriggered(false); - reflectColorPickerChangeInUI(event.target.value); + try { + const newColor = atom.addColor(_colorName, _blockPickerColor); + _setAddColorError(false); + _setColors([..._colors, newColor]); + resetUI(); + } catch (error: any) { + _setAddColorErrorMessage(`${error.message}`); + _setAddColorError(true); } + }; - const handleColorSelected = (color: ColorResult) => { - console.log(`color selected, event: ${JSON.stringify(color)}`); - reflectColorPickerChangeInUI(color.hex) + const handleColorNameBlur = (event: FocusEvent) => { + const value = event.target.value.trim(); + if (value === "") { + _setAddColorErrorTriggered(true); + } else { + _setAddColorErrorTriggered(false); + _setColorName(value); } + }; - const handleColorChange = (event: any) => { - const value = event.target.value; - if (value.match(/^[a-zA-Z0-9\-]*$/)) { - _setColorName(value); - } + const handleColorValueInputChange = (event: ChangeEvent) => { + const value = event.target.value; + if (!/^#[0-9A-F]{6}$/i.test(value)) { + _setAddColorInputErrorTriggered(true); + _setBlockPickerColor(value); + } else { + _setAddColorInputErrorTriggered(false); + reflectColorPickerChangeInUI(value); } + }; - return ( -
- -

Build your extended color palette. Add as many colors as you want.

-

Next, you will create themes under the changeTab("colorThemes")}>Color Theme settings.

- - - + const handleColorSelected = (color: ColorResult) => { + reflectColorPickerChangeInUI(color.hex); + }; - -
-
- Color Name - -
-
- Hex Value - - -
+ const handleColorChange = (event: ChangeEvent) => { + const value = event.target.value; + if (value.match(/^[a-zA-Z0-9\-]*$/)) { + _setColorName(value); + } + }; -
- - {_addColorError && {_addColorErrorMessage}} -
+ return ( +
+ +

Build your extended color palette. Add as many colors as you want.

+

Next, you will create themes under the changeTab("colorThemes")}>Color Theme settings.

+ + + -
- - - -
- ) -} + +
+
+ Color Name + +
+
+ Hex Value + + +
+
+ Selected Color +
+
+
+ + {_addColorError && {_addColorErrorMessage}} +
+
+ + + +
+ ); +}; diff --git a/code/src/ui/src/pages/content/BasicColorModeSelector.tsx b/code/src/ui/src/pages/content/BasicColorModeSelector.tsx index 868741fe..37dce20e 100644 --- a/code/src/ui/src/pages/content/BasicColorModeSelector.tsx +++ b/code/src/ui/src/pages/content/BasicColorModeSelector.tsx @@ -14,7 +14,7 @@ export interface SectionColorModeSelector { export const BasicColorModeSelector: React.FC = ({ colorMode, setColorMode, children }) => { const style = { - marginTop: "40px", + marginTop: "20px", } return (