[do not merge] DEMO: design tokens and CSS variables

.env.development

@@ -1,7 +1,7 @@
 NODE_ENV='development'
 PORT=1995
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='localhost:1995'
+BASE_URL='http://localhost:1995'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
@@ -24,8 +24,8 @@ LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 COLLECT_YEAR_OF_BIRTH=true
-APP_ID=''
-MFE_CONFIG_API_URL=''
+APP_ID='profile'
+MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1'
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER='true'
 ENABLE_SKILLS_BUILDER_PROFILE=''

.gitignore

@@ -14,6 +14,7 @@ temp/babel-plugin-react-intl
 
 ### Emacs ###
 *~
-/temp
-/.vscode
-/module.config.js
+temp
+.vscode
+module.config.js
+.env.config.js

env.config.example.js

@@ -0,0 +1,22 @@
+const config = {
+  PARAGON_THEME_URLS: {
+    core: {
+      urls: {
+        default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/core.min.css',
+        brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@$brandVersion/dist/core.min.css',
+      },
+    },
+    variants: {
+      light: {
+        urls: {
+          default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$paragonVersion/dist/light.min.css',
+          brandOverride: 'https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@$brandVersion/dist/light.min.css',
+        },
+        default: true,
+        dark: false,
+      },
+    },
+  },
+};
+
+export default config;

package.json

@@ -14,7 +14,8 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "replace-scss-with-css": "replace-scss-with-css"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-profile/issues"
@@ -27,11 +28,11 @@
     "extends @edx/browserslist-config"
   ],
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@2.2.0-alpha.9",
     "@edx/frontend-component-footer": "12.0.0",
     "@edx/frontend-component-header": "4.0.0",
     "@edx/frontend-platform": "4.5.0",
-    "@edx/paragon": "^20.32.0",
+    "@edx/paragon": "21.0.0-alpha.36",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -65,8 +66,8 @@
   "devDependencies": {
     "@commitlint/cli": "17.6.3",
     "@commitlint/config-angular": "17.6.3",
-    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.8.38",
+    "@edx/browserslist-config": "1.1.1",
+    "@edx/frontend-build": "github:openedx/frontend-build#ags/2321",
     "@edx/reactifex": "2.2.0",
     "@testing-library/react": "11.2.7",
     "codecov": "3.8.3",

src/index.scss

@@ -1,7 +1,42 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+/**
+ * 1. Remove the prior @edx/paragon and @edx/brand imports:
+ */
+
+// @import "~@edx/brand/paragon/fonts";
+// @import "~@edx/brand/paragon/variables";
+// @import "~@edx/paragon/scss/core/core";
+// @import "~@edx/brand/paragon/overrides";
+
+/**
+ * 2. If using externally hosted CSS, include just the @custom-media breakpoints from @edx/paragon and
+ * @edx/brand. These will allow the use of CSS media queries such as `@media(--min-pgn-size-breakpoint-md) { ... }`
+ * throughout your MFE styles.
+ *
+ * Note: the @edx/brand breakpoints must be imported _after_ the @edx/paragon breakpoints.
+ */
+@use "@edx/paragon/styles/css/core/custom-media-breakpoints.css" as paragonCustomMediaBreakpoints;
+@use "@edx/brand/paragon/css/core/custom-media-breakpoints.css" as brandCustomMediaBreakpoints;
+
+/**
+ * 2(a). If using locally installed CSS, include the core.min.css and light.min.css files from @edx/paragon
+ * and @edx/brand.
+ * 
+ * Note: the light.min.css file should be imported _after_ the core.min.css file. Also, the @edx/brand files should be
+ * imported _after_ the @edx/paragon files.
+ */
+
+// @use "@edx/paragon/dist/core.min.css";
+// @use "@edx/paragon/dist/light.min.css";
+// @use "@edx/brand/dist/core.min.css";
+// @use "@edx/brand/dist/light.min.css";
+
+/**
+ * Note: `@edx/frontend-component-header` uses SCSS variables/mixins that are no longer available when using
+ * already compiled @edx/paragon and @edx/brand CSS styles. For this demo, the `node_module/@edx/frontend-component-header`
+ * styles were modified to use Paragon's new CSS variables instead.
+ * 
+ * See https://github.com/openedx/paragon/issues/2348 for more details.
+ */
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 

src/profile/ProfilePage.jsx

@@ -6,7 +6,7 @@ import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Hyperlink } from '@edx/paragon';
+import { Alert, Button, Hyperlink } from '@edx/paragon';
 
 // Actions
 import {
@@ -60,6 +60,7 @@ class ProfilePage extends React.Component {
     this.handleOpen = this.handleOpen.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.handleToggleParagonThemeVariant = this.handleToggleParagonThemeVariant.bind(this);
   }
 
   componentDidMount() {
@@ -93,6 +94,11 @@ class ProfilePage extends React.Component {
     this.props.updateDraft(name, value);
   }
 
+  handleToggleParagonThemeVariant() {
+    const nextThemeVariant = this.context.paragonTheme.state.themeVariant === 'light' ? 'invalid' : 'light';
+    this.context.paragonTheme.setThemeVariant(nextThemeVariant);
+  }
+
   isYOBDisabled() {
     const { yearOfBirth } = this.props;
     const currentYear = new Date().getFullYear();
@@ -281,6 +287,9 @@ class ProfilePage extends React.Component {
               formId="certificates"
               {...commonFormProps}
             />
+            <Button onClick={this.handleToggleParagonThemeVariant}>
+              Toggle theme
+            </Button>
           </div>
         </div>
       </div>
@@ -346,7 +355,7 @@ ProfilePage.propTypes = {
 
   // Learning Goal form data
   learningGoal: PropTypes.string,
-  visibilityLearningGoal: PropTypes.string.isRequired,
+  visibilityLearningGoal: PropTypes.string,
 
   // Other data we need
   profileImage: PropTypes.shape({
@@ -393,6 +402,7 @@ ProfilePage.defaultProps = {
   draftSocialLinksByPlatform: {},
   bio: null,
   learningGoal: null,
+  visibilityLearningGoal: null,
   languageProficiencies: [],
   courseCertificates: null,
   requiresParentalConsent: null,

src/profile/index.scss

@@ -28,7 +28,7 @@
   position: absolute;
   left: 1.5rem;
   top: 5.25rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
   line-height: 0.9rem;
   font-size: 0.8rem;
   font-style: normal;
@@ -42,24 +42,24 @@
 
 .icon-visibility-off {
   height: 1rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
 }
 
 .profile-page {
   .edit-section-header {
-    @extend .h6;
+    font-size: var(--pgn-typography-font-size-h6);
     display: block;
     font-weight: normal;
     letter-spacing: 0;
     margin: 0;
   }
 
   label.edit-section-header {
-    margin-bottom: $spacer * .5;
+    margin-bottom: var(--pgn-spacing-spacer-2);
   }
 
   .profile-avatar-wrap {
-    @include media-breakpoint-up(md) {
+    @media (--min-pgn-size-breakpoint-md) {
       max-width: 12rem;
       margin-right: 0;
       margin-top: -8rem;
@@ -77,25 +77,25 @@
     align-items: center;
     border-radius: 50%;
 
-    @include media-breakpoint-up(md) {
+    @media (--min-pgn-size-breakpoint-md) {
       background: linear-gradient(to top, rgba(0,0,0,.65) 4rem, rgba(0,0,0,0) 4rem);
       align-items: flex-end;
     }
 
     .btn {
       text-decoration: none;
-      @include media-breakpoint-up(md) {
+      @media (--min-pgn-size-breakpoint-md) {
         margin-bottom: 1.2rem;
       }
     }
 
     .dropdown {
-      @include media-breakpoint-up(md) {
+      @media (--min-pgn-size-breakpoint-md) {
         margin-bottom: 1.2rem;
       }
 
       .btn {
-        color: $white;
+        color: var(--pgn-color-white);
         background: transparent;
         border-color: transparent;
         margin: 0;
@@ -108,7 +108,7 @@
     height: 5rem;
     position: relative;
 
-    @include media-breakpoint-up(md) {
+    @media (--min-pgn-size-breakpoint-md) {
       width: 12rem;
       height: 12rem;
     }
@@ -128,7 +128,7 @@
       border-radius:0;
       transition: opacity 200ms ease;
 
-      @include media-breakpoint-up(md) {
+      @media (--min-pgn-size-breakpoint-md) {
         height: 4rem;
       }
 
@@ -142,7 +142,7 @@
     position: relative;
 
     .certificate-title {
-      font-family: $font-family-serif;
+      font-family: var(--pgn-typography-font-family-serif);
       font-weight: 400;
     }