From 955c7ec33515e4b46dd16209fd34028999d42f66 Mon Sep 17 00:00:00 2001 From: Artur Gaspar Date: Fri, 2 Aug 2024 19:03:34 -0300 Subject: [PATCH] feat: update MFE to use dynamically injected theme Updates the MFE to use alpha version of frontend build, platform and paragon to support runtime theming. --- package-lock.json | 866 ++++++++++++++++++++-- package.json | 8 +- src/index.scss | 11 +- src/sass/_base_component.scss | 80 +- src/sass/_progressive_profiling_page.scss | 2 +- src/sass/_recommendations_card_base.scss | 28 +- src/sass/_recommendations_page.scss | 8 +- src/sass/_registration.scss | 12 +- src/sass/_style.scss | 85 ++- 9 files changed, 946 insertions(+), 154 deletions(-) diff --git a/package-lock.json b/package-lock.json index 19e3f81c61..a415a347fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,14 +9,14 @@ "version": "0.1.0", "license": "AGPL-3.0", "dependencies": { - "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2", - "@edx/frontend-platform": "7.1.3", + "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17", + "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v7.1.2-token-asu-moe/edx-frontend-platform-7.1.2.tgz", "@edx/openedx-atlas": "^0.6.0", "@fortawesome/fontawesome-svg-core": "6.5.2", "@fortawesome/free-brands-svg-icons": "6.5.2", "@fortawesome/free-solid-svg-icons": "6.5.2", "@fortawesome/react-fontawesome": "0.2.0", - "@openedx/paragon": "^22.1.1", + "@openedx/paragon": "23.0.0-alpha.1", "@optimizely/react-sdk": "^2.9.1", "@redux-devtools/extension": "3.3.0", "@testing-library/react": "^12.1.5", @@ -50,7 +50,7 @@ "devDependencies": { "@edx/browserslist-config": "^1.1.1", "@edx/reactifex": "1.1.0", - "@openedx/frontend-build": "13.1.4", + "@openedx/frontend-build": "github:open-craft/frontend-build#asu-moe/redwood-css", "babel-plugin-formatjs": "10.5.14", "eslint-plugin-import": "2.29.1", "glob": "7.2.3", @@ -2276,10 +2276,11 @@ } }, "node_modules/@edx/brand": { - "name": "@openedx/brand-openedx", - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@openedx/brand-openedx/-/brand-openedx-1.2.3.tgz", - "integrity": "sha512-Dn9CtpC8fovh++Xi4NF5NJoeR9yU2yXZnV9IujxIyGd/dn0Phq5t6dzJVfupwq09mpDnzJv7egA8Znz/3ljO+w==" + "name": "@edx/brand-edx.org", + "version": "2.2.0-alpha.17", + "resolved": "https://registry.npmjs.org/@edx/brand-edx.org/-/brand-edx.org-2.2.0-alpha.17.tgz", + "integrity": "sha512-ntchlObl/jQTCASVNj35GLGMmyGwssuciKAHhEoCdzAm4vQAMdD2LT5kHKWVFOH8LZCaGKvdMCBf1f6CTj6AjA==", + "license": "UNLICENSED" }, "node_modules/@edx/browserslist-config": { "version": "1.2.0", @@ -2301,9 +2302,10 @@ } }, "node_modules/@edx/frontend-platform": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-7.1.3.tgz", - "integrity": "sha512-klw0pvFnAo8k8iVPxcR9WCPLaYqV2AFdnz1COF6hJ6gOIFuj2Mb5cuEy9di89INpZFO/0FEHq1IBVojm1rbJcg==", + "version": "7.1.2", + "resolved": "https://github.com/open-craft/frontend-platform/releases/download/v7.1.2-token-asu-moe/edx-frontend-platform-7.1.2.tgz", + "integrity": "sha512-+ivDhlUGVhUhTav/NcCkGmt/HLJNw5QLBYGf6DEBsLaQ8Im3+/SrEW1eq5U5xWRAktKCzOFxyIcKwRfVeMRLyA==", + "license": "AGPL-3.0", "dependencies": { "@cospired/i18n-iso-languages": "4.2.0", "@formatjs/intl-pluralrules": "4.3.3", @@ -2322,7 +2324,7 @@ "lodash.merge": "4.6.2", "lodash.snakecase": "4.1.1", "pubsub-js": "1.9.4", - "react-intl": "6.6.3", + "react-intl": "6.6.2", "universal-cookie": "4.0.4" }, "bin": { @@ -2331,7 +2333,7 @@ }, "peerDependencies": { "@openedx/frontend-build": ">= 13.0.15", - "@openedx/paragon": ">= 21.5.7 < 23.0.0", + "@openedx/paragon": ">= 21.5.7 < 23.0.0 || ^23.0.0-alpha.1", "prop-types": "^15.7.2", "react": "^16.9.0 || ^17.0.0", "react-dom": "^16.9.0 || ^17.0.0", @@ -2340,6 +2342,48 @@ "redux": "^4.0.4" } }, + "node_modules/@edx/frontend-platform/node_modules/@formatjs/ecma402-abstract": { + "version": "1.18.2", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz", + "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==", + "license": "MIT", + "dependencies": { + "@formatjs/intl-localematcher": "0.5.4", + "tslib": "^2.4.0" + } + }, + "node_modules/@edx/frontend-platform/node_modules/@formatjs/intl": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.0.tgz", + "integrity": "sha512-X3xT9guVkKDS86EKV80lS0KxoazUglkJTGZO66sKY7otgl0VeStPA8B3u8UkKT47PexVV98fUzjpkchYmbe9nw==", + "license": "MIT", + "dependencies": { + "@formatjs/ecma402-abstract": "1.18.2", + "@formatjs/fast-memoize": "2.2.0", + "@formatjs/icu-messageformat-parser": "2.7.6", + "@formatjs/intl-displaynames": "6.6.6", + "@formatjs/intl-listformat": "7.5.5", + "intl-messageformat": "10.5.11", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "typescript": "^4.7 || 5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@edx/frontend-platform/node_modules/@formatjs/intl-localematcher": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz", + "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==", + "license": "MIT", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@edx/frontend-platform/node_modules/form-urlencoded": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/form-urlencoded/-/form-urlencoded-4.1.4.tgz", @@ -2358,6 +2402,33 @@ "value-equal": "^1.0.1" } }, + "node_modules/@edx/frontend-platform/node_modules/react-intl": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.2.tgz", + "integrity": "sha512-IpW2IkLtGENSFlX3vfH11rjuCIsW0VyjT0Q1pPKMZPtT2z1FxLt4weFT5Ezti2TScT1xiyb3aQBFth9EB7jzAg==", + "license": "BSD-3-Clause", + "dependencies": { + "@formatjs/ecma402-abstract": "1.18.2", + "@formatjs/icu-messageformat-parser": "2.7.6", + "@formatjs/intl": "2.10.0", + "@formatjs/intl-displaynames": "6.6.6", + "@formatjs/intl-listformat": "7.5.5", + "@types/hoist-non-react-statics": "^3.3.1", + "@types/react": "16 || 17 || 18", + "hoist-non-react-statics": "^3.3.2", + "intl-messageformat": "10.5.11", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "react": "^16.6.0 || 17 || 18", + "typescript": "^4.7 || 5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/@edx/new-relic-source-map-webpack-plugin": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@edx/new-relic-source-map-webpack-plugin/-/new-relic-source-map-webpack-plugin-2.1.0.tgz", @@ -2594,6 +2665,7 @@ "version": "2.10.1", "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.1.tgz", "integrity": "sha512-dsLG15U7xDi8yzKf4hcAWSsCaez3XrjTO2oaRHPyHtXLm1aEzYbDw6bClo/HMHu+iwS5GbDqT3DV+hYP2ylScg==", + "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "1.18.2", "@formatjs/fast-memoize": "2.2.0", @@ -2698,6 +2770,7 @@ "version": "1.18.2", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz", "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==", + "peer": true, "dependencies": { "@formatjs/intl-localematcher": "0.5.4", "tslib": "^2.4.0" @@ -2707,6 +2780,7 @@ "version": "0.5.4", "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz", "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==", + "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -2809,6 +2883,96 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==" }, + "node_modules/@isaacs/cliui": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", + "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "license": "ISC", + "dependencies": { + "string-width": "^5.1.2", + "string-width-cjs": "npm:string-width@^4.2.0", + "strip-ansi": "^7.0.1", + "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", + "wrap-ansi": "^8.1.0", + "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/string-width": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", + "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "license": "MIT", + "dependencies": { + "eastasianwidth": "^0.2.0", + "emoji-regex": "^9.2.2", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@isaacs/cliui/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/@isaacs/cliui/node_modules/wrap-ansi": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", + "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.1.0", + "string-width": "^5.0.1", + "strip-ansi": "^7.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -3951,8 +4115,8 @@ }, "node_modules/@openedx/frontend-build": { "version": "13.1.4", - "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-13.1.4.tgz", - "integrity": "sha512-YqXU6KgFnmDD/vGLvq/A9NP6R8lHfaEx64ajQC50ebFMlF3J7HWUruct4PuroeTupq9UAfRZUilzQHYQZjV08A==", + "resolved": "git+ssh://git@github.com/open-craft/frontend-build.git#a0d301f2f8217c0c44f0ba331250b8c91dc47eb9", + "license": "AGPL-3.0", "dependencies": { "@babel/cli": "7.22.5", "@babel/core": "7.22.5", @@ -3969,6 +4133,7 @@ "@pmmmwh/react-refresh-webpack-plugin": "0.5.11", "@svgr/webpack": "8.1.0", "autoprefixer": "10.4.19", + "axios": "1.4.0", "babel-jest": "26.6.3", "babel-loader": "9.1.3", "babel-plugin-formatjs": "^10.4.0", @@ -3994,6 +4159,7 @@ "image-minimizer-webpack-plugin": "3.8.3", "jest": "26.6.3", "mini-css-extract-plugin": "1.6.2", + "parse5": "7.1.2", "postcss": "8.4.38", "postcss-custom-media": "10.0.4", "postcss-loader": "7.3.4", @@ -4011,7 +4177,8 @@ "webpack-bundle-analyzer": "^4.10.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1", - "webpack-merge": "^5.10.0" + "webpack-merge": "^5.10.0", + "webpack-remove-empty-scripts": "1.0.3" }, "bin": { "fedx-scripts": "bin/fedx-scripts.js" @@ -4225,6 +4392,17 @@ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, + "node_modules/@openedx/frontend-build/node_modules/axios": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", + "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/@openedx/frontend-build/node_modules/cjs-module-lexer": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz", @@ -4928,6 +5106,18 @@ "node": ">=8" } }, + "node_modules/@openedx/frontend-build/node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "license": "MIT", + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/@openedx/frontend-build/node_modules/pretty-format": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz", @@ -5073,9 +5263,10 @@ } }, "node_modules/@openedx/paragon": { - "version": "22.2.1", - "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.2.1.tgz", - "integrity": "sha512-Dd7PzvHwNnUokqbFkuOpugJZ9dHaUBOcYwqAA2aMoN7tgi4xEZWsfDFyP1+se2UPuR7NvNGammEesLAwGQ0Ylw==", + "version": "23.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.0.0-alpha.1.tgz", + "integrity": "sha512-nOQia51h8CT1mMm8r8nBHXZdkJ+KviCC395tmWh8w9/cl8YBOr/LB7sEmd/CxAE4LMaNqfbEk/Mwr5lCPO/MbA==", + "license": "Apache-2.0", "workspaces": [ "example", "component-generator", @@ -5084,20 +5275,30 @@ "dependent-usage-analyzer" ], "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.1.1", - "@fortawesome/react-fontawesome": "^0.1.18", "@popperjs/core": "^2.11.4", + "axios": "^0.27.2", "bootstrap": "^4.6.2", "chalk": "^4.1.2", "child_process": "^1.0.2", + "chroma-js": "^2.4.2", "classnames": "^2.3.1", + "cli-progress": "^3.12.0", + "commander": "^9.4.1", "email-prop-type": "^3.0.0", "file-selector": "^0.6.0", - "font-awesome": "^4.7.0", "glob": "^8.0.3", "inquirer": "^8.2.5", "lodash.uniqby": "^4.7.0", + "log-update": "^4.0.0", "mailto-link": "^2.0.0", + "minimist": "^1.2.8", + "ora": "^5.4.1", + "postcss": "^8.4.21", + "postcss-combine-duplicated-selectors": "^10.0.3", + "postcss-custom-media": "^9.1.2", + "postcss-import": "^15.1.0", + "postcss-map": "^0.11.0", + "postcss-minify": "^1.1.0", "prop-types": "^15.8.1", "react-bootstrap": "^1.6.5", "react-colorful": "^5.6.1", @@ -5110,6 +5311,8 @@ "react-responsive": "^8.2.0", "react-table": "^7.7.0", "react-transition-group": "^4.4.2", + "sass": "^1.58.3", + "style-dictionary": "^3.7.1", "tabbable": "^5.3.3", "uncontrollable": "^7.2.1", "uuid": "^9.0.0" @@ -5123,18 +5326,6 @@ "react-intl": "^5.25.1 || ^6.4.0" } }, - "node_modules/@openedx/paragon/node_modules/@fortawesome/react-fontawesome": { - "version": "0.1.19", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz", - "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", - "react": ">=16.x" - } - }, "node_modules/@openedx/paragon/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -5143,6 +5334,15 @@ "balanced-match": "^1.0.0" } }, + "node_modules/@openedx/paragon/node_modules/commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "license": "MIT", + "engines": { + "node": "^12.20.0 || >=14" + } + }, "node_modules/@openedx/paragon/node_modules/glob": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", @@ -5172,6 +5372,34 @@ "node": ">=10" } }, + "node_modules/@openedx/paragon/node_modules/postcss-custom-media": { + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz", + "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT", + "dependencies": { + "@csstools/cascade-layer-name-parser": "^1.0.2", + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/@optimizely/js-sdk-logging": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/@optimizely/js-sdk-logging/-/js-sdk-logging-0.3.1.tgz", @@ -5279,6 +5507,16 @@ "react": ">=16.8.0" } }, + "node_modules/@pkgjs/parseargs": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", + "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=14" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.11", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz", @@ -6838,6 +7076,19 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/ansis": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/ansis/-/ansis-1.5.2.tgz", + "integrity": "sha512-T3vUABrcgSj/HXv27P+A/JxGk5b/ydx0JjN3lgjBTC2iZUFxQGjh43zCzLSbU4C1QTgmx9oaPeWNJFM+auI8qw==", + "license": "ISC", + "engines": { + "node": ">=12.13" + }, + "funding": { + "type": "patreon", + "url": "https://patreon.com/biodiscus" + } + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -7065,6 +7316,15 @@ "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==" }, + "node_modules/astral-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -7842,6 +8102,17 @@ } ] }, + "node_modules/capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", @@ -7881,6 +8152,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "license": "MIT", + "dependencies": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -7930,6 +8221,12 @@ "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, + "node_modules/chroma-js": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz", + "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==", + "license": "(BSD-3-Clause AND Apache-2.0)" + }, "node_modules/chrome-trace-event": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", @@ -8045,6 +8342,18 @@ "node": ">=8" } }, + "node_modules/cli-progress": { + "version": "3.12.0", + "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz", + "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==", + "license": "MIT", + "dependencies": { + "string-width": "^4.2.3" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/cli-spinners": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz", @@ -8304,6 +8613,17 @@ "node": ">=0.8" } }, + "node_modules/constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -9269,6 +9589,12 @@ "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==" }, + "node_modules/eastasianwidth": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "license": "MIT" + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -10696,14 +11022,6 @@ } } }, - "node_modules/font-awesome": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==", - "engines": { - "node": ">=0.10.3" - } - }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -10720,6 +11038,34 @@ "node": ">=0.10.0" } }, + "node_modules/foreground-child": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz", + "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==", + "license": "ISC", + "dependencies": { + "cross-spawn": "^7.0.0", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/foreground-child/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/fork-ts-checker-webpack-plugin": { "version": "6.5.3", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz", @@ -11373,6 +11719,16 @@ "he": "bin/he" } }, + "node_modules/header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "license": "MIT", + "dependencies": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/history": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", @@ -12744,6 +13100,21 @@ "node": ">=8" } }, + "node_modules/jackspeak": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", + "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + }, + "optionalDependencies": { + "@pkgjs/parseargs": "^0.11.0" + } + }, "node_modules/jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz", @@ -15670,6 +16041,12 @@ "node": ">=6" } }, + "node_modules/jsonc-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz", + "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", + "license": "MIT" + }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -15906,6 +16283,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/log-update": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", + "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==", + "license": "MIT", + "dependencies": { + "ansi-escapes": "^4.3.0", + "cli-cursor": "^3.1.0", + "slice-ansi": "^4.0.0", + "wrap-ansi": "^6.2.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -16193,6 +16588,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/minipass": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", + "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "license": "ISC", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, "node_modules/mixin-deep": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", @@ -16899,6 +17303,12 @@ "node": ">=6" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", + "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==", + "license": "BlueOak-1.0.0" + }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -16966,6 +17376,16 @@ "node": ">=0.10.0" } }, + "node_modules/path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "license": "MIT", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -17000,6 +17420,28 @@ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, + "node_modules/path-scurry": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", + "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^10.2.0", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" + }, + "engines": { + "node": ">=16 || 14 >=14.18" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/path-scurry/node_modules/lru-cache": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "license": "ISC" + }, "node_modules/path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", @@ -17299,6 +17741,21 @@ "postcss": "^8.4.31" } }, + "node_modules/postcss-combine-duplicated-selectors": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz", + "integrity": "sha512-IP0BmwFloCskv7DV7xqvzDXqMHpwdczJa6ZvIW8abgHdcIHs9mCJX2ltFhu3EwA51ozp13DByng30+Ke+eIExA==", + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.0.4" + }, + "engines": { + "node": "^10.0.0 || ^12.0.0 || >=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/postcss-convert-values": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.2.tgz", @@ -17385,6 +17842,23 @@ "postcss": "^8.4.31" } }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, "node_modules/postcss-loader": { "version": "7.3.4", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz", @@ -17436,6 +17910,52 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/postcss-map": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/postcss-map/-/postcss-map-0.11.0.tgz", + "integrity": "sha512-cgHYZrH9aAMds90upYUPhYz8xnAcRD45SwuNns/nQHONIrPQDhpwk3JLsAQGOndQxnRVXfB6nB+3WqSMy8fqlA==", + "license": "Unlicense", + "dependencies": { + "js-yaml": "^3.12.0", + "postcss": "^7.0.2", + "reduce-function-call": "^1.0.1" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/postcss-map/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "license": "ISC" + }, + "node_modules/postcss-map/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "license": "MIT", + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/postcss-map/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/postcss-merge-longhand": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.2.tgz", @@ -17468,6 +17988,19 @@ "postcss": "^8.4.31" } }, + "node_modules/postcss-minify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/postcss-minify/-/postcss-minify-1.1.0.tgz", + "integrity": "sha512-9D64ueIW0DL2FdLajQTlXrnTN8Ox9NjuXqigKMmB819RhdClNPYx5Zp3i5x0ghjjy3vGrLBBYEYvJjY/1eMNbw==", + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.0", + "postcss-value-parser": "^4.1" + }, + "peerDependencies": { + "postcss": "^8.0" + } + }, "node_modules/postcss-minify-font-values": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.1.tgz", @@ -17959,6 +18492,12 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -18445,6 +18984,7 @@ "version": "6.6.3", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.3.tgz", "integrity": "sha512-vLKI0f+Q3pXD5szmCUPikTY7CJDPtxCBMG5YABQZ3IGEKzNB47zlvXyasUFfT25zpgQXeOfhRCdx4q6ubuR6bA==", + "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "1.18.2", "@formatjs/icu-messageformat-parser": "2.7.6", @@ -18471,6 +19011,7 @@ "version": "1.18.2", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.18.2.tgz", "integrity": "sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==", + "peer": true, "dependencies": { "@formatjs/intl-localematcher": "0.5.4", "tslib": "^2.4.0" @@ -18480,6 +19021,7 @@ "version": "0.5.4", "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz", "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==", + "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -18768,6 +19310,24 @@ "prop-types": "^15.7.2" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "license": "MIT", + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/read-cache/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -18908,6 +19468,15 @@ "node": ">=6.0.0" } }, + "node_modules/reduce-function-call": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz", + "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==", + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, "node_modules/redux": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", @@ -19798,6 +20367,17 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, + "node_modules/sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "node_modules/serialize-javascript": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", @@ -20198,6 +20778,23 @@ "node": ">=6" } }, + "node_modules/slice-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "astral-regex": "^2.0.0", + "is-fullwidth-code-point": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, "node_modules/snake-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", @@ -20647,6 +21244,27 @@ "node": ">=8" } }, + "node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/string-width-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "license": "MIT" + }, "node_modules/string-width/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -20724,6 +21342,19 @@ "node": ">=8" } }, + "node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-bom": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz", @@ -20759,6 +21390,96 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-dictionary": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.9.2.tgz", + "integrity": "sha512-M2pcQ6hyRtqHOh+NyT6T05R3pD/gwNpuhREBKvxC1En0vyywx+9Wy9nXWT1SZ9ePzv1vAo65ItnpA16tT9ZUCg==", + "license": "Apache-2.0", + "dependencies": { + "chalk": "^4.0.0", + "change-case": "^4.1.2", + "commander": "^8.3.0", + "fs-extra": "^10.0.0", + "glob": "^10.3.10", + "json5": "^2.2.2", + "jsonc-parser": "^3.0.0", + "lodash": "^4.17.15", + "tinycolor2": "^1.4.1" + }, + "bin": { + "style-dictionary": "bin/style-dictionary" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/style-dictionary/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/style-dictionary/node_modules/commander": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", + "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==", + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, + "node_modules/style-dictionary/node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/style-dictionary/node_modules/glob": { + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "license": "ISC", + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^3.1.2", + "minimatch": "^9.0.4", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^1.11.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/style-dictionary/node_modules/minimatch": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "license": "ISC", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/style-loader": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", @@ -21184,6 +21905,12 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==", + "license": "MIT" + }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -21720,6 +22447,24 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", @@ -22335,6 +23080,25 @@ "node": ">=10.0.0" } }, + "node_modules/webpack-remove-empty-scripts": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/webpack-remove-empty-scripts/-/webpack-remove-empty-scripts-1.0.3.tgz", + "integrity": "sha512-1+Gg43r+4REb+3AUWbgjM3LIlxxE8YIqMnGpOmmhnaYK2rv4q58WbHYhZ9IRhTyt/+1qWoKQoPz/ebze5RnRYA==", + "license": "ISC", + "dependencies": { + "ansis": "1.5.2" + }, + "engines": { + "node": ">=12.14" + }, + "funding": { + "type": "patreon", + "url": "https://patreon.com/biodiscus" + }, + "peerDependencies": { + "webpack": ">=5.32.0" + } + }, "node_modules/webpack-sources": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", @@ -22491,6 +23255,24 @@ "node": ">=8" } }, + "node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/package.json b/package.json index 5b938c2cf6..900b896284 100644 --- a/package.json +++ b/package.json @@ -32,14 +32,14 @@ "url": "https://github.com/openedx/frontend-app-authn/issues" }, "dependencies": { - "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2", - "@edx/frontend-platform": "7.1.3", + "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.17", + "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v7.1.2-token-asu-moe/edx-frontend-platform-7.1.2.tgz", "@edx/openedx-atlas": "^0.6.0", "@fortawesome/fontawesome-svg-core": "6.5.2", "@fortawesome/free-brands-svg-icons": "6.5.2", "@fortawesome/free-solid-svg-icons": "6.5.2", "@fortawesome/react-fontawesome": "0.2.0", - "@openedx/paragon": "^22.1.1", + "@openedx/paragon": "23.0.0-alpha.1", "@optimizely/react-sdk": "^2.9.1", "@redux-devtools/extension": "3.3.0", "@testing-library/react": "^12.1.5", @@ -73,7 +73,7 @@ "devDependencies": { "@edx/browserslist-config": "^1.1.1", "@edx/reactifex": "1.1.0", - "@openedx/frontend-build": "13.1.4", + "@openedx/frontend-build": "github:open-craft/frontend-build#asu-moe/redwood-css", "babel-plugin-formatjs": "10.5.14", "eslint-plugin-import": "2.29.1", "glob": "7.2.3", diff --git a/src/index.scss b/src/index.scss index 1f84d82acf..5f1e86d74e 100755 --- a/src/index.scss +++ b/src/index.scss @@ -1,6 +1,9 @@ -@import "~@edx/brand/paragon/fonts"; -@import "~@edx/brand/paragon/variables"; -@import "~@openedx/paragon/scss/core/core"; -@import "~@edx/brand/paragon/overrides"; +/* @import "~@edx/brand/paragon/fonts"; */ +/* @import "~@edx/brand/paragon/variables"; */ +/* @import "~@openedx/paragon/scss/core/core"; */ +/* @import "~@edx/brand/paragon/overrides"; */ + +@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints; +@use "@edx/brand/paragon/css/core/custom-media-breakpoints.css" as brandCustomMediaBreakpoints; @import "sass/style"; diff --git a/src/sass/_base_component.scss b/src/sass/_base_component.scss index 33ed4395c4..8b776cd9e3 100644 --- a/src/sass/_base_component.scss +++ b/src/sass/_base_component.scss @@ -2,19 +2,19 @@ .layout { display: flex; - @include media-breakpoint-down('lg') { + @media (--pgn-size-breakpoint-max-width-lg) { flex-direction: column; justify-content: center; align-items: center; } - @include media-breakpoint-up('xl') { + @media (--pgn-size-breakpoint-min-width-xl) { justify-content: space-between; } } .content { - @include media-breakpoint-up('xl') { + @media (--pgn-size-breakpoint-min-width-xl) { display: flex; justify-content: center; width: 50vw; @@ -47,7 +47,7 @@ font-weight: 700; line-height: 1; - @include media-breakpoint-down('xl') { + @media (--pgn-size-breakpoint-max-width-xl) { font-size: 3.75rem; } @@ -60,7 +60,7 @@ margin-bottom: 0.5rem; font-weight: 700; - @include media-breakpoint-down('xl') { + @media (--pgn-size-breakpoint-max-width-xl) { font-size: 1.375rem; line-height: 1.75rem; } @@ -72,7 +72,7 @@ } .large-screen-left-container { - @include media-breakpoint-down('xl') { + @media (--pgn-size-breakpoint-max-width-xl) { flex: 0 0 25%; max-width: 25%; } @@ -87,43 +87,43 @@ height: 0.25rem; background-image: linear-gradient( 102.02deg, - $brand-700, - $brand-700 20%, - $brand 20%, + var(--pgn-color-brand-700), + var(--pgn-color-brand-700) 20%, + var(--pgn-color-brand-base) 20%, ); background-repeat: no-repeat; } -@include media-breakpoint-only('md') { +@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) { .medium-screen-top-stripe { display: flex; height: 0.5rem; background-image: linear-gradient( 102.02deg, - $brand-700, - $brand-700 10%, - $brand 10%, - $brand 90%, - $primary-700 90%, - $primary-700 100%, + var(--pgn-color-brand-700), + var(--pgn-color-brand-700) 10%, + var(--pgn-color-brand-base) 10%, + var(--pgn-color-brand-base) 90%, + var(--pgn-color-primary-700) 90%, + var(--pgn-color-primary-700) 100%, ); background-repeat: no-repeat; } } -@include media-breakpoint-only('lg') { +@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg) { .medium-screen-top-stripe { display: flex; height: 0.5rem; background-image: linear-gradient( 102.02deg, - $brand-700 10%, - $brand 10%, - $brand 65%, - $primary-700 65%, - $primary-700 75%, - $accent-a 75%, - $accent-a 75% + var(--pgn-color-brand-700) 10%, + var(--pgn-color-brand-base) 10%, + var(--pgn-color-brand-base) 65%, + var(--pgn-color-primary-700) 65%, + var(--pgn-color-primary-700) 75%, + var(--pgn-color-accent-a) 75%, + var(--pgn-color-accent-a) 75% ); background-repeat: no-repeat; } @@ -131,20 +131,20 @@ .extra-large-screen-top-stripe { display: none; } -@include media-breakpoint-up('xl') { +@media (--pgn-size-breakpoint-min-width-xl) { .extra-large-screen-top-stripe { display: flex; height: 0.5rem; background-image: linear-gradient( 102.02deg, - $brand-700 10%, - $brand 10%, - $brand 45%, - $primary-700 45%, - $primary-700 55%, - $accent-a 55%, - $accent-a 75%, - $info-200 75%, + var(--pgn-color-brand-700) 10%, + var(--pgn-color-brand-base) 10%, + var(--pgn-color-brand-base) 45%, + var(--pgn-color-primary-700) 45%, + var(--pgn-color-primary-700) 55%, + var(--pgn-color-accent-a) 55%, + var(--pgn-color-accent-a) 75%, + var(--pgn-color-info-200) 75%, ); background-repeat: no-repeat; } @@ -152,24 +152,24 @@ .large-screen-svg-light, .large-screen-svg-primary { - fill: $light-200; + fill: var(--pgn-color-light-200); overflow: hidden; position: absolute; } .large-screen-svg-primary { - fill: $primary-400; + fill: var(--pgn-color-primary-400); } .medium-screen-svg-light, .medium-screen-svg-primary { - fill: $light-200; + fill: var(--pgn-color-light-200); overflow: inherit; position: absolute; } .medium-screen-svg-primary { - fill: $primary-400; + fill: var(--pgn-color-primary-400); } [dir=rtl]{ @@ -184,20 +184,20 @@ .small-yellow-line { width: 80px; height: 0; - border: 2px solid $accent-b; + border: 2px solid var(--pgn-color-accent-b); transform: rotate(102.02deg); } .medium-yellow-line { width: 120px; height: 0; - border: 3px solid $accent-b; + border: 3px solid var(--pgn-color-accent-b); transform: rotate(102.02deg); } .large-yellow-line { width: 240px; height: 0; - border: 3px solid $accent-b; + border: 3px solid var(--pgn-color-accent-b); transform: rotate(102.02deg); } diff --git a/src/sass/_progressive_profiling_page.scss b/src/sass/_progressive_profiling_page.scss index ae66b0fdbb..e457394595 100644 --- a/src/sass/_progressive_profiling_page.scss +++ b/src/sass/_progressive_profiling_page.scss @@ -11,7 +11,7 @@ margin-bottom: 0.5rem; font-weight: 700; - @include media-breakpoint-down('md') { + @media (--pgn-size-breakpoint-max-width-md) { line-height: 1.5rem; font-size: 1.125rem; } diff --git a/src/sass/_recommendations_card_base.scss b/src/sass/_recommendations_card_base.scss index f9ee90180b..adae10ac90 100644 --- a/src/sass/_recommendations_card_base.scss +++ b/src/sass/_recommendations_card_base.scss @@ -64,52 +64,52 @@ $header-height: 104px; } &.light { - background-color: $white; + background-color: var(--pgn-color-white); .title { - color: $black; + color: var(--pgn-color-black); } .subtitle { - color: $gray-700; + color: var(--pgn-color-gray-700); } .badge { - background-color: $light-500; - color: $black; + background-color: var(--pgn-color-light-500); + color: var(--pgn-color-black); } .footer-content { - color: $gray-700; + color: var(--pgn-color-gray-700); } } &.dark { - background-color: $primary-500; + background-color: var(--pgn-color-primary-500); .pgn__card-header-title-md { - color: $white; + color: var(--pgn-color-white); } .pgn__card-header-subtitle-md { - color: $light-200; + color: var(--pgn-color-light-200); } .title { - color: $white; + color: var(--pgn-color-white); } .subtitle { - color: $light-200; + color: var(--pgn-color-light-200); } .badge { - background-color: $dark-200; - color: $white; + background-color: var(--pgn-color-dark-200); + color: var(--pgn-color-white); } .footer-content { - color: $light-200; + color: var(--pgn-color-light-200); } } } diff --git a/src/sass/_recommendations_page.scss b/src/sass/_recommendations_page.scss index 49ad0aa277..a15de4ece3 100644 --- a/src/sass/_recommendations_page.scss +++ b/src/sass/_recommendations_page.scss @@ -3,7 +3,7 @@ $card-gap: 24px; .recommendations-container__card-list { gap: $card-gap $card-gap; - @include media-breakpoint-down(sm) { + @media (--pgn-size-breakpoint-max-width-sm) { margin-bottom: 0 !important; } @@ -11,15 +11,15 @@ $card-gap: 24px; flex: 0 1 100%; cursor: pointer; - @include media-breakpoint-up(sm) { + @media (--pgn-size-breakpoint-min-width-sm) { flex: 0 1 calc(50% - #{$card-gap - 12}); } - @include media-breakpoint-up(md) { + @media (--pgn-size-breakpoint-min-width-md) { flex: 0 1 calc(33.333% - #{$card-gap - 8}); } - @include media-breakpoint-up(lg) { + @media (--pgn-size-breakpoint-min-width-lg) { flex: 0 1 calc(25% - #{$card-gap - 6}); } } diff --git a/src/sass/_registration.scss b/src/sass/_registration.scss index 75889601c8..1ce7fbb3ad 100644 --- a/src/sass/_registration.scss +++ b/src/sass/_registration.scss @@ -23,21 +23,21 @@ } .alert-link { - color: $primary !important; + color: var(--pgn-color-primary-base) !important; &:hover { text-decoration: underline; - color: $info-700 !important; + color: var(--pgn-color-info-700) !important; } } } .email-suggestion-alert-warning { - color: $info-500 !important; + color: var(--pgn-color-info-500) !important; &:hover { text-decoration: underline; - color: $info-700 !important; + color: var(--pgn-color-info-700) !important; } } @@ -56,7 +56,7 @@ line-height: 24px; font-size: 12px; font-weight: normal; - color: $primary-700; + color: var(--pgn-color-primary-700); } .username-suggestion--label { @@ -99,7 +99,7 @@ } } -@media (max-width: map-get($grid-breakpoints, "sm")) { +@media (--pgn-size-breakpoint-max-width-xs) { .username-scroll-suggested--form-field { width: 15rem; } diff --git a/src/sass/_style.scss b/src/sass/_style.scss index c62fc3e759..5e5e92bcef 100644 --- a/src/sass/_style.scss +++ b/src/sass/_style.scss @@ -11,7 +11,7 @@ // ---------------------------- // #COLORS // ---------------------------- -$white: #FFFFFF; +$white: var(--pgn-color-white) !default; // social platforms $facebook-blue: #1877F2; @@ -40,7 +40,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .main-content { - @extend .pt-4; + padding-top: var(--pgn-spacing-spacer-4); min-width: 464px !important; } @@ -80,15 +80,15 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); .alert-link { font-weight: normal; text-decoration: underline; - color: $info-300 !important; + color: var(--pgn-color-info-300) !important; &:hover { - color: $info-500 !important; + color: var(--pgn-color-info-500) !important; } } .form-control { - background-color: $white !important; + background-color: var(--pgn-color-white) !important; font-size: 0.875rem; line-height: 1.5; height: 2.75rem; @@ -103,11 +103,11 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); margin-bottom: 1rem; font-size: 14px; - background-color: $white; - border: 1px solid $primary; + background-color: var(--pgn-color-white); + border: 1px solid var(--pgn-color-primary-base); width: 224px; height: 36px; - color: $primary; + color: var(--pgn-color-primary-base); .btn-tpa__image-icon{ background-color: transparent; @@ -132,8 +132,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .btn-tpa__font-container { - background-color: $primary; - color: $white; + background-color: var(--pgn-color-primary-base); + color: var(--pgn-color-white); font-size: 11px; margin-left: -6px; @@ -143,7 +143,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .btn-oa2-facebook { - color: $white; + color: var(--pgn-color-white); border-color: $facebook-blue; background-color: $facebook-blue; @@ -151,12 +151,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); &:focus { background-color: $facebook-focus-blue; border: 1px solid $facebook-focus-blue; - color: $white; + color: var(--pgn-color-white); } } .btn-oa2-google-oauth2 { - color: $white; + color: var(--pgn-color-white); border-color: $google-blue; background-color: $google-blue; @@ -171,12 +171,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); &:focus { background-color: $google-focus-blue; border: 1px solid $google-focus-blue; - color: $white; + color: var(--pgn-color-white); } } .btn-oa2-apple-id { - color: $white; + color: var(--pgn-color-white); border-color: $apple-black; background-color: $apple-black; font-size: 16px; @@ -190,12 +190,12 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); &:focus { background-color: $apple-focus-black; border: 1px solid $apple-focus-black; - color: $white; + color: var(--pgn-color-white); } } .btn-oa2-azuread-oauth2 { - color: $white; + color: var(--pgn-color-white); border-color: $microsoft-black; background-color: $microsoft-black; @@ -203,7 +203,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); &:focus { background-color: $microsoft-focus-black; border: 1px solid $microsoft-focus-black; - color: $white; + color: var(--pgn-color-white); } } @@ -214,9 +214,8 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .institute-icon { - @extend .mr-1; - @extend .text-gray; - + margin-right: var(--pgn-spacing-spacer-1); + color: var(--pgn-color-gray-base) !important; display: inline-block; margin-bottom: 0.25rem; height: 18px; @@ -232,7 +231,7 @@ $elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); } .invalid-feedback { - color: $red; + color: var(--pgn-color-red); } .full-vertical-height { @@ -253,7 +252,15 @@ select.form-control { } #honor-code a span { - @extend .sr-only; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } .font-weight-500 { @@ -290,21 +297,21 @@ select.form-control { #password-requirement-left { opacity: 1; - @extend .x-small; + font-size: var(--pgn-typography-font-size-small-x); filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important; right: 0.2rem !important; .tooltip-inner { - background: $white; + background: var(--pgn-color-white); display: block; - color: $gray-500; + color: var(--pgn-color-gray-500); } .arrow::before { - border-left-color: $white; + border-left-color: var(--pgn-color-white); } } #password-requirement-top { - @extend .x-small; + font-size: var(--pgn-typography-font-size-small-x); filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important; opacity: 1; width: 90%; @@ -314,30 +321,30 @@ select.form-control { .tooltip-inner { min-width: 464px !important; - background: $white; + background: var(--pgn-color-white); display: block; - color: $gray-500; + color: var(--pgn-color-gray-500); } .arrow::before { - border-top-color: $white; + border-top-color: var(--pgn-color-white); } } .yellow-border { - border: 2px solid $accent-b; + border: 2px solid var(--pgn-color-accent-b); } .institutions__heading { - color: $primary-700; + color: var(--pgn-color-primary-700); } .logistration-button { - color: $gray-700; + color: var(--pgn-color-gray-700); } .logistration-button:hover{ - color: $gray-700; + color: var(--pgn-color-gray-700); text-decoration: none; } @@ -352,7 +359,7 @@ select.form-control { width: 2.3rem; } .has-floating-label { - color: $gray-500; + color: var(--pgn-color-gray-500); } .pgn__form-control-floating-label .pgn__form-control-floating-label-content { @@ -366,7 +373,7 @@ select.form-control { .form-group__form-field .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-content { font-size: 16px; - color: $primary-700; + color: var(--pgn-color-primary-700); } .form-group__form-field .form-control:not([value='']):not(:focus) ~ @@ -444,14 +451,14 @@ select.form-control { } .table-striped tbody tr:nth-of-type(odd) { - background-color: $light-200; + background-color: var(--pgn-color-light-200); } .institutions--provider-link { font-weight: normal; font-size: 0.875rem; line-height: 1.5rem; - color: $primary-700 + color: var(--pgn-color-primary-700) } .pgn__form-control-decorator-trailing {