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..f8b0bb96 100644 --- a/code/src/data/themes +++ b/code/src/data/themes @@ -1,27 +1,6 @@ -{"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":"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}} 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/components/DesignSystemTitleBar.css b/code/src/ui/src/components/DesignSystemTitleBar.css index dbb43d09..a27fca12 100644 --- a/code/src/ui/src/components/DesignSystemTitleBar.css +++ b/code/src/ui/src/components/DesignSystemTitleBar.css @@ -1,5 +1,5 @@ .titleBarDiv { - width: 100%; + width: 100vw; display: flex; align-items: center; justify-content: space-between; diff --git a/code/src/ui/src/components/DesignSystemTitleBar.tsx b/code/src/ui/src/components/DesignSystemTitleBar.tsx index 5efda5f4..047ae4f1 100644 --- a/code/src/ui/src/components/DesignSystemTitleBar.tsx +++ b/code/src/ui/src/components/DesignSystemTitleBar.tsx @@ -75,7 +75,7 @@ export const DesignSystemTitleBar: React.FC = ({ designSystemNames, desig return ( <> -
+
diff --git a/code/src/ui/src/pages/DesignSystemPage.tsx b/code/src/ui/src/pages/DesignSystemPage.tsx index 2a6bd2fc..3b795b23 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'; @@ -105,7 +105,7 @@ const DesignSystemPage: React.FC = ({user, storage, themeName, setThemeNa // listen for changes in selected accessibility layers so that appropriate // styles can be set - const layerChangeListener = function (event: EventValueChange) { + const layerChangeListener = function (event: EventValueChange) { UpdateContainerLayerInfo(); }; const deviceTargetListener = function (event: EventValueChange) { diff --git a/code/src/ui/src/pages/WelcomePage.css b/code/src/ui/src/pages/WelcomePage.css index 82b6a4d4..323e4636 100644 --- a/code/src/ui/src/pages/WelcomePage.css +++ b/code/src/ui/src/pages/WelcomePage.css @@ -1,15 +1,16 @@ +/* WelcomePage.css */ .welcome-navbar-container { background-color: var(--background); color: black; display: flex; - /*position: fixed;*/ + justify-content: center; + align-items: center; width: 100%; - opacity: 1; height: 90px; - /*z-index: 1;*/ position: sticky; top: 0; z-index: 10; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add some shadow for better visual separation */ } .tb-logo { @@ -19,55 +20,74 @@ padding: 0 var(--spacing-2); } -.welcome-left-nav { - align-items: flex-start; - flex: 20% 0 0; - min-width: 250px; - padding: 20px; - background-color: var(--nav-color) !important; - /* border: 0px solid green; test */ +.hamburger-icon { + display: none; /* Hide by default */ } -.welcome-left-nav button::after { - border: 0; + +.design-system-container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + box-sizing: border-box; } -.welcome-content { +.design-system-editor-content { display: flex; - /* border: 0px solid blue; test */ + width: 100%; + box-sizing: border-box; +} + +.design-system-editor-left-nav { + flex: 0 0 250px; + padding: 20px; + background-color: var(--nav-color) !important; } -.welcome-right-content { +.design-system-editor-right-content { flex-grow: 1; padding: 20px; color: var(--on-background); background: var(--background); vertical-align: top; font-family: var(--primaryFont); - border: 0px solid red; /* test */ + box-sizing: border-box; } -video { - /* override other styles to make responsive */ - width: 100% !important; - height: auto !important; +.design-system-editor-right-content-scrollable { + overflow-y: auto; + max-height: calc(100vh - 180px); /* Ensure the content doesn't overflow the viewport */ + box-sizing: border-box; } -/* -.welcome-right-content button { - display: flex; - align-items: center; - justify-content: center; - background: var(--on-button); - color: var(--on-background); - border-radius: var(--button-radius); - text-align: center; - padding: var(--spacing-1) var(--button-padding); - border: none; - position: relative; - align-self: start; - font: var(--button-font); - letter-spacing: var(--button-character-spacing); - text-transform: var(--button-transform) !important; - cursor: pointer; +@media (max-width: 768px) { + .hamburger-icon { + display: block; /* Show hamburger icon on mobile */ + position: fixed; + left: 20px; + top: 20px; + z-index: 11; + } + + .design-system-editor-content { + flex-direction: column; + align-items: center; + padding: 20px; + } + + .design-system-editor-right-content { + width: 100%; + max-width: 800px; /* Limit the max width */ + margin: 0 auto; /* Center the content */ + padding: 20px; + padding-bottom: 40px; /* Add padding at the bottom */ + } + + .design-system-editor-left-nav { + display: none; /* Hide left nav on mobile */ + } + + .design-system-editor-right-content-scrollable { + max-height: calc(100vh - 130px); /* Adjust for header height */ + } } -*/ diff --git a/code/src/ui/src/pages/WelcomePage.tsx b/code/src/ui/src/pages/WelcomePage.tsx index 1180711b..1cd694ce 100644 --- a/code/src/ui/src/pages/WelcomePage.tsx +++ b/code/src/ui/src/pages/WelcomePage.tsx @@ -1,10 +1,6 @@ -/* - * Copyright (c) 2023 Discover Financial Services - * Licensed under Apache-2.0 License. See License.txt in the project root for license information - */ -import React, { useEffect, useState } from 'react'; -import { Tab, Tabs, List } from "@mui/material"; -import { styled } from '@mui/material'; +import React, { useEffect, useState } from 'react'; +import { List, Drawer, IconButton } from "@mui/material"; +import MenuIcon from '@mui/icons-material/Menu'; import Welcome from './Welcome'; import JumpStart from './JumpStart'; import GetStarted from './GetStarted'; @@ -23,23 +19,56 @@ interface Props { } const WelcomePage: React.FC = ({ user, storage, themeName }) => { - const [showItem, setShowItem] = useState(localStorage.getItem("themebuilder-welcome-selected") || "welcome"); + const [isDrawerOpen, setDrawerOpen] = useState(false); + const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); + useEffect(() => { localStorage.setItem("themebuilder-welcome-selected", showItem) - }, [showItem]) + }, [showItem]); + + useEffect(() => { + const handleResize = () => setIsMobile(window.innerWidth <= 768); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + const handleTabChange = (event: any, newShowItem: string) => { setShowItem(newShowItem); }; const [size, setSize] = useState(window.innerHeight); - window.addEventListener("resize", (event) => { - setSize(window.innerHeight); - }); + useEffect(() => { + const handleResize = () => setSize(window.innerHeight); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + const [divHeight, setDivHeight] = useState(0); const divStyle = { height: (size - divHeight - 4) + "px", - } + }; + + const toggleDrawer = (open: boolean) => (event: any) => { + if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { + return; + } + setDrawerOpen(open); + }; + + const drawerContent = ( + + Design Systems + { setShowItem("welcome") }} /> + { setShowItem("jumpStart") }} /> + { setShowItem("getStarted") }} /> + + ); return ( @@ -48,33 +77,41 @@ const WelcomePage: React.FC = ({ user, storage, themeName }) => {
-
-
- - Design Systems - { setShowItem("welcome") }} /> - { setShowItem("jumpStart") }} /> - { setShowItem("getStarted") }} /> - -
+ + + )} + + {drawerContent} + +
+
+ {drawerContent} +
-
- {showItem === "welcome" && ( - - )} - {showItem === "jumpStart" && ( - - )} - {showItem === "getStarted" && ( - - )} -
+
+ {showItem === "welcome" && ( + + )} + {showItem === "jumpStart" && ( + + )} + {showItem === "getStarted" && ( + + )} +
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..171530c0 100644 --- a/code/src/ui/src/pages/atoms/ColorPaletteAtom.tsx +++ b/code/src/ui/src/pages/atoms/ColorPaletteAtom.tsx @@ -2,172 +2,184 @@ * 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 (