feat(themes): Add style tokens and web theme
This commit is contained in:
Vlad Piersec
vp8x8
parent
8477ae8daa
commit
8bd874ca70
|
|
@ -2618,6 +2618,142 @@
|
|||
"sdp-transform": "2.3.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "4.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.3.tgz",
|
||||
"integrity": "sha512-Adt40rGW6Uds+cAyk3pVgcErpzU/qxc7KBR94jFHBYretU4AtWZltYcNsbeMn9tXL86jjVL1kuGcIHsgLgFGRw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/styles": "^4.11.3",
|
||||
"@material-ui/system": "^4.11.3",
|
||||
"@material-ui/types": "^5.1.0",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"clsx": "^1.0.4",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"popper.js": "1.16.1-lts",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0",
|
||||
"react-transition-group": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
|
||||
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.13.17",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
|
||||
"integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1-lts",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
|
||||
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "4.11.4",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
|
||||
"integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@material-ui/types": "5.1.0",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"clsx": "^1.0.4",
|
||||
"csstype": "^2.5.2",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"jss": "^10.5.1",
|
||||
"jss-plugin-camel-case": "^10.5.1",
|
||||
"jss-plugin-default-unit": "^10.5.1",
|
||||
"jss-plugin-global": "^10.5.1",
|
||||
"jss-plugin-nested": "^10.5.1",
|
||||
"jss-plugin-props-sort": "^10.5.1",
|
||||
"jss-plugin-rule-value-function": "^10.5.1",
|
||||
"jss-plugin-vendor-prefixer": "^10.5.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "4.11.3",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.3.tgz",
|
||||
"integrity": "sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"csstype": "^2.5.2",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@material-ui/types": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
|
||||
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
|
||||
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"@microsoft/microsoft-graph-client": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-1.1.0.tgz",
|
||||
|
|
@ -3848,11 +3984,46 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
|
||||
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
|
||||
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
|
||||
"integrity": "sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
|
||||
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
"integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/scheduler": {
|
||||
"version": "0.16.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
|
||||
"integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
|
||||
},
|
||||
"@types/stack-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||
|
|
@ -6048,6 +6219,11 @@
|
|||
"shallow-clone": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
|
||||
},
|
||||
"co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
|
|
@ -6686,6 +6862,25 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"css-vendor": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
||||
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"is-in-browser": "^1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.13.17",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
|
||||
"integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
|
||||
|
|
@ -9408,6 +9603,11 @@
|
|||
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
|
||||
"dev": true
|
||||
},
|
||||
"hyphenate-style-name": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
|
||||
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
|
||||
},
|
||||
"i18n-iso-countries": {
|
||||
"version": "3.7.8",
|
||||
"resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-3.7.8.tgz",
|
||||
|
|
@ -9603,6 +9803,14 @@
|
|||
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
|
||||
"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
|
||||
},
|
||||
"indefinite-observable": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
|
||||
"integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
|
||||
"requires": {
|
||||
"symbol-observable": "1.2.0"
|
||||
}
|
||||
},
|
||||
"indexes-of": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
|
||||
|
|
@ -9922,6 +10130,11 @@
|
|||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"is-in-browser": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
|
||||
},
|
||||
"is-map": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
|
||||
|
|
@ -10439,6 +10652,92 @@
|
|||
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
||||
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.6.0.tgz",
|
||||
"integrity": "sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"csstype": "^3.0.2",
|
||||
"indefinite-observable": "^2.0.1",
|
||||
"is-in-browser": "^1.1.3",
|
||||
"tiny-warning": "^1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "3.0.8",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
|
||||
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"jss-plugin-camel-case": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz",
|
||||
"integrity": "sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"hyphenate-style-name": "^1.0.3",
|
||||
"jss": "10.6.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz",
|
||||
"integrity": "sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.6.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz",
|
||||
"integrity": "sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.6.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz",
|
||||
"integrity": "sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.6.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz",
|
||||
"integrity": "sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.6.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz",
|
||||
"integrity": "sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.6.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz",
|
||||
"integrity": "sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"css-vendor": "^2.0.8",
|
||||
"jss": "10.6.0"
|
||||
}
|
||||
},
|
||||
"jssha": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/jssha/-/jssha-3.2.0.tgz",
|
||||
|
|
@ -16892,6 +17191,11 @@
|
|||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-0.0.3.tgz",
|
||||
"integrity": "sha512-SA2YwvDrCITM9fTvHTHRpq9W6L2fBsClbqm3maT5PZux4Z73SPPDYwJMtnoWh6WMgmCkJij/LaOlWiqJqFMK8g=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tlds": {
|
||||
"version": "1.203.1",
|
||||
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.203.1.tgz",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
"@atlaskit/toggle": "12.0.3",
|
||||
"@atlaskit/tooltip": "17.1.2",
|
||||
"@jitsi/js-utils": "1.0.6",
|
||||
"@material-ui/core": "4.11.3",
|
||||
"@microsoft/microsoft-graph-client": "1.1.0",
|
||||
"@react-native-async-storage/async-storage": "1.13.2",
|
||||
"@react-native-community/google-signin": "3.0.1",
|
||||
|
|
@ -145,6 +146,7 @@
|
|||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"lint": "eslint . && flow",
|
||||
"lint-fix": "eslint --fix .",
|
||||
"postinstall": "jetify",
|
||||
"validate": "npm ls",
|
||||
"start": "make dev",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
|||
import React from 'react';
|
||||
|
||||
import { DialogContainer } from '../../base/dialog';
|
||||
import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider';
|
||||
import { ChromeExtensionBanner } from '../../chrome-extension-banner';
|
||||
|
||||
import { AbstractApp } from './AbstractApp';
|
||||
|
|
@ -26,10 +27,12 @@ export class App extends AbstractApp {
|
|||
*/
|
||||
_createMainElement(component, props) {
|
||||
return (
|
||||
<AtlasKitThemeProvider mode = 'dark'>
|
||||
<ChromeExtensionBanner />
|
||||
{ super._createMainElement(component, props) }
|
||||
</AtlasKitThemeProvider>
|
||||
<JitsiThemeProvider>
|
||||
<AtlasKitThemeProvider mode = 'dark'>
|
||||
<ChromeExtensionBanner />
|
||||
{ super._createMainElement(component, props) }
|
||||
</AtlasKitThemeProvider>
|
||||
</JitsiThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,325 @@
|
|||
// @flow
|
||||
|
||||
// Default color pallete
|
||||
export const colors = {
|
||||
error03: '#7A141F',
|
||||
error04: '#A21B29',
|
||||
error05: '#CB2233',
|
||||
error06: '#E04757',
|
||||
error08: '#EAA7AD',
|
||||
|
||||
primary01: '#00112D',
|
||||
primary02: '#00225A',
|
||||
primary03: '#003486',
|
||||
primary04: '#0045B3',
|
||||
primary05: '#0056E0',
|
||||
primary06: '#246FE5',
|
||||
primary07: '#669AEC',
|
||||
primary08: '#99BBF3',
|
||||
primary09: '#CCDDF9',
|
||||
|
||||
surface01: '#040404',
|
||||
surface02: '#141414',
|
||||
surface03: '#292929',
|
||||
surface04: '#3D3D3D',
|
||||
surface05: '#525252',
|
||||
surface06: '#666',
|
||||
surface07: '#858585',
|
||||
surface08: '#A3A3A3',
|
||||
surface09: '#C2C2C2',
|
||||
surface10: '#E0E0E0',
|
||||
surface11: '#FFF',
|
||||
|
||||
success04: '#189B55',
|
||||
success05: '#1EC26A',
|
||||
|
||||
warning05: '#F8AE1A'
|
||||
};
|
||||
|
||||
// Mapping between the token used and the color
|
||||
export const colorMap = {
|
||||
// Default page background
|
||||
uiBackground: 'surface01',
|
||||
|
||||
// Container background
|
||||
ui01: 'surface02',
|
||||
ui02: 'surface03',
|
||||
ui03: 'surface04',
|
||||
ui04: 'surface05',
|
||||
ui05: 'surface06',
|
||||
|
||||
// Primary buttons
|
||||
action01: 'primary05',
|
||||
|
||||
// Hover state for primary buttons
|
||||
action01Hover: 'primary06',
|
||||
|
||||
// Active state for primary buttons
|
||||
action01Active: 'primary04',
|
||||
|
||||
// Focus border color
|
||||
action01Focus: 'primary08',
|
||||
|
||||
// Disabled state for primary buttons
|
||||
action01Disabled: 'primary02',
|
||||
|
||||
// Secondary buttons
|
||||
action02: 'surface04',
|
||||
|
||||
// Hover state for secondary buttons
|
||||
action02Hover: 'surface05',
|
||||
|
||||
// Active state for secondary buttons
|
||||
action02Active: 'surface03',
|
||||
|
||||
// Focus border color
|
||||
action02Focus: 'surface07',
|
||||
|
||||
// Disabled state for secondary buttons
|
||||
action02Disabled: 'surface02',
|
||||
|
||||
// Tertiary buttons
|
||||
action03: 'transparent',
|
||||
|
||||
// Hover state for tertiary buttons
|
||||
action03Hover: 'surface05',
|
||||
|
||||
// Active state for tertiary buttons
|
||||
action03Active: 'surface03',
|
||||
|
||||
// Focus border color
|
||||
action03Focus: 'surface07',
|
||||
|
||||
// Disabled state for tertiary buttons
|
||||
action03Disabled: 'transparent',
|
||||
|
||||
// Danger button background
|
||||
actionDanger: 'error05',
|
||||
|
||||
// Hover state for danger buttons
|
||||
actionDangerHover: 'error06',
|
||||
|
||||
// Active state for danger buttons
|
||||
actionDangerActive: 'error04',
|
||||
|
||||
// Focus border color
|
||||
actionDangerFocus: 'error08',
|
||||
|
||||
// Disabled state for danger buttons
|
||||
actionDangerDisabled: 'error03',
|
||||
|
||||
// Primary text – default color for body copy & headers
|
||||
text01: 'surface11',
|
||||
|
||||
// Secondary text with medium contrast
|
||||
text02: 'surface09',
|
||||
|
||||
// Tertiary text with low contrast – placeholders, disabled actions, label for disabled buttons
|
||||
text03: 'surface07',
|
||||
|
||||
// error messages
|
||||
textError: 'error06',
|
||||
|
||||
// Primary color for icons
|
||||
icon01: 'surface11',
|
||||
|
||||
// Secondary color for input fields
|
||||
icon02: 'surface09',
|
||||
|
||||
// Tertiary color for disabled actions
|
||||
icon03: 'surface07',
|
||||
|
||||
// Error message
|
||||
iconError: 'error06',
|
||||
|
||||
// Forms
|
||||
// Default background for input fields
|
||||
field01: 'surface01',
|
||||
|
||||
// Hover background for input fields
|
||||
field01Hover: 'surface03',
|
||||
|
||||
// Focus border color
|
||||
field01Focus: 'primary05',
|
||||
|
||||
// Disabled background for input fields
|
||||
field01Disabled: 'surface05',
|
||||
|
||||
// Background for high-contrast input fields
|
||||
field02: 'surface11',
|
||||
|
||||
// Background for high-contrast input fields on hover
|
||||
field02Hover: 'primary09',
|
||||
|
||||
// Focus border color
|
||||
field02Focus: 'primary05',
|
||||
|
||||
// Disabled background for high-contrast input fields
|
||||
field02Disabled: 'surface06',
|
||||
|
||||
// Borders
|
||||
// Border for the input fields in hover state
|
||||
border01: 'surface08',
|
||||
|
||||
// Border for the input fields
|
||||
border02: 'surface06',
|
||||
|
||||
// Line separators
|
||||
border03: 'surface04',
|
||||
|
||||
// Color for error border & message
|
||||
borderError: 'error06',
|
||||
|
||||
// Links
|
||||
// Default color for links
|
||||
link01: 'primary07',
|
||||
|
||||
// Color for links in the hover state
|
||||
link01Hover: 'primary08',
|
||||
|
||||
// Color for links in the active state
|
||||
link01Active: 'primary06',
|
||||
|
||||
// Support
|
||||
// Color for positive messages applied to icons & borders
|
||||
success01: 'success05',
|
||||
|
||||
// Color for positive messages applied tobackgrounds
|
||||
success02: 'success05',
|
||||
|
||||
// Color for warning messages applied to icons, borders & backgrounds
|
||||
warning01: 'warning05'
|
||||
};
|
||||
|
||||
|
||||
export const font = {
|
||||
weightRegular: 400,
|
||||
weightSemiBold: 600
|
||||
};
|
||||
|
||||
export const shape = {
|
||||
borderRadius: 6
|
||||
};
|
||||
|
||||
export const spacing = [ 0, 4, 8, 16, 24, 32, 40, 48, 56 ];
|
||||
|
||||
export const typography = {
|
||||
labelRegular: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
fontWeight: font.weightRegular,
|
||||
letterSpacing: 0.16
|
||||
},
|
||||
|
||||
labelBold: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0.16
|
||||
},
|
||||
|
||||
labelButton: {
|
||||
fontSize: 14,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
labelButtonLarge: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
bodyShortRegular: {
|
||||
fontSize: 14,
|
||||
lineHeight: 18,
|
||||
fontWeight: font.weightRegular,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
bodyShortBold: {
|
||||
fontSize: 14,
|
||||
lineHeight: 18,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
bodyShortRegularLarge: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightRegular,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
bodyShortBoldLarge: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
bodyLongRegular: {
|
||||
fontSize: 14,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightRegular,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
bodyLongBold: {
|
||||
fontSize: 14,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading1: {
|
||||
fontSize: 54,
|
||||
lineHeight: 64,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading2: {
|
||||
fontSize: 42,
|
||||
lineHeight: 50,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading3: {
|
||||
fontSize: 32,
|
||||
lineHeight: 40,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading4: {
|
||||
fontSize: 28,
|
||||
lineHeight: 36,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading5: {
|
||||
fontSize: 20,
|
||||
lineHeight: 28,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading6: {
|
||||
fontSize: 16,
|
||||
lineHeight: 26,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
},
|
||||
|
||||
heading7: {
|
||||
fontSize: 14,
|
||||
lineHeight: 24,
|
||||
fontWeight: font.weightSemiBold,
|
||||
letterSpacing: 0
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// @flow
|
||||
|
||||
import { font, colors, colorMap, spacing, shape, typography } from '../Tokens';
|
||||
import { createWebTheme } from '../functions';
|
||||
|
||||
export default createWebTheme({
|
||||
font,
|
||||
colors,
|
||||
colorMap,
|
||||
spacing,
|
||||
shape,
|
||||
typography
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// @flow
|
||||
|
||||
import { ThemeProvider } from '@material-ui/core/styles';
|
||||
import * as React from 'react';
|
||||
|
||||
import BaseTheme from './BaseTheme';
|
||||
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The children of the component.
|
||||
*/
|
||||
children: React.ChildrenArray<any>
|
||||
}
|
||||
|
||||
/**
|
||||
* The theme provider for the web app.
|
||||
*
|
||||
* @param {Object} props - The props of the component.
|
||||
* @returns {React.ReactNode}
|
||||
*/
|
||||
export default function JitsiThemeProvider(props: Props) {
|
||||
return <ThemeProvider theme = { BaseTheme }>{ props.children }</ThemeProvider>;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// @flow
|
||||
|
||||
import { createMuiTheme } from '@material-ui/core/styles';
|
||||
|
||||
/**
|
||||
* Creates the color tokens based on the color theme and the association map.
|
||||
* If a key is not fonund in the association map it defaults to the current value.
|
||||
*
|
||||
* @param {Object} colorMap - A map between the token name and the actual color value.
|
||||
* @param {Object} colors - An object containing all the theme colors.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function createColorTokens(colorMap: Object, colors: Object): Object {
|
||||
return Object.entries(colorMap)
|
||||
.reduce((result, [ token, value ]) =>
|
||||
Object.assign(result, { [token]: colors[value] || value }), {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a MUI theme based on local UI tokens.
|
||||
*
|
||||
* @param {Object} arg - The ui tokens.
|
||||
* @returns {Object}
|
||||
*/
|
||||
export function createWebTheme({ font, colors, colorMap, shape, spacing, typography }: Object) {
|
||||
return createMuiTheme({
|
||||
props: {
|
||||
// disable ripple effect on buttons globally
|
||||
MuiButtonBase: {
|
||||
disableRipple: true
|
||||
}
|
||||
},
|
||||
|
||||
// use token spacing array
|
||||
spacing
|
||||
}, {
|
||||
palette: createColorTokens(colorMap, colors),
|
||||
shape,
|
||||
typography: {
|
||||
font,
|
||||
...typography
|
||||
}
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue