diff --git a/cms/envs/common.py b/cms/envs/common.py
index 71389ff71444e0375d8ba2d848183c608cf3a4c5..d1459204068736c302bef56976e7e8163d7b6468 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -568,20 +568,6 @@ PIPELINE_CSS = {
],
'output_filename': 'css/cms-style-vendor-tinymce-skin.css',
},
- 'style-main': {
- # this is unnecessary and can be removed
- 'source_filenames': [
- 'css/studio-main.css',
- ],
- 'output_filename': 'css/studio-main.css',
- },
- 'style-main-rtl': {
- # this is unnecessary and can be removed
- 'source_filenames': [
- 'css/studio-main-rtl.css',
- ],
- 'output_filename': 'css/studio-main-rtl.css',
- },
'style-edx-icons': {
'source_filenames': [
'css/edx-icons.css',
diff --git a/cms/static/sass/_build.scss b/cms/static/sass/_build-v1.scss
similarity index 98%
rename from cms/static/sass/_build.scss
rename to cms/static/sass/_build-v1.scss
index 57a133fa83aa4d5319ea1d7a102eb4934df77a4e..f6770f4b9b2fdd44ef52b276733729607d29a63e 100644
--- a/cms/static/sass/_build.scss
+++ b/cms/static/sass/_build-v1.scss
@@ -1,5 +1,6 @@
// ------------------------------
// Studio: Shared Build Compile
+// Version 1 styling (pre-Pattern Library)
// About: Sass compile for Studio that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the studio-main-*.scss files.
diff --git a/cms/static/sass/_build-v2.scss b/cms/static/sass/_build-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a032042f63fea8f94a84b3d78bf488c055e9814
--- /dev/null
+++ b/cms/static/sass/_build-v2.scss
@@ -0,0 +1,9 @@
+// ------------------------------
+// Studio: Shared Build Compile
+// Version 2 - introduces the Pattern Library
+
+
+// Configuration
+@import 'config';
+
+// Extensions
diff --git a/cms/static/sass/_config.scss b/cms/static/sass/_config.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a1c263754bb0d9ac375af0059073150770818a11
--- /dev/null
+++ b/cms/static/sass/_config.scss
@@ -0,0 +1,7 @@
+// ------------------------------
+// Studio configuration settings
+
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------
diff --git a/cms/static/sass/studio-main-rtl.scss b/cms/static/sass/studio-main-v1-rtl.scss
similarity index 88%
rename from cms/static/sass/studio-main-rtl.scss
rename to cms/static/sass/studio-main-v1-rtl.scss
index 7bd76516bb6eb4e0e9448f6bd37559e99e39faeb..83150f360775495fd4a67edf0b48b3a9dca1054d 100644
--- a/cms/static/sass/studio-main-rtl.scss
+++ b/cms/static/sass/studio-main-v1-rtl.scss
@@ -17,4 +17,4 @@
@import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-@import 'build'; // shared app style assets/rendering
+@import 'build-v1'; // shared app style assets/rendering
diff --git a/cms/static/sass/studio-main.scss b/cms/static/sass/studio-main-v1.scss
similarity index 76%
rename from cms/static/sass/studio-main.scss
rename to cms/static/sass/studio-main-v1.scss
index 00db34fabee3f272810e6d2d867000cf0d605b4c..4c40522015ec6b56921e34df279bb0bdac9a426c 100644
--- a/cms/static/sass/studio-main.scss
+++ b/cms/static/sass/studio-main-v1.scss
@@ -1,4 +1,5 @@
-// studio - css architecture
+// Studio - css architecture
+// Version 1 styling (pre-Pattern Library)
// ====================
// Table of Contents
@@ -17,4 +18,4 @@
@import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
-@import 'build'; // shared app style assets/rendering
+@import 'build-v1'; // shared app style assets/rendering
diff --git a/cms/static/sass/studio-main-v2-rtl.scss b/cms/static/sass/studio-main-v2-rtl.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9f0643502f1e9833dc4b1f0fa840c4a3fc2d3737
--- /dev/null
+++ b/cms/static/sass/studio-main-v2-rtl.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// Studio main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror main-ltr w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Load the shared build
+@import 'build-v2';
diff --git a/cms/static/sass/studio-main-v2.scss b/cms/static/sass/studio-main-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cd355d5a7d162c456a414be561dc66044887aad5
--- /dev/null
+++ b/cms/static/sass/studio-main-v2.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// Studio main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror main-rtl w/ the exception of bi-app references.
+
+
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Load the shared build
+@import 'build-v2';
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 8dc7502e1091ac01b64da93086fff0594adf4646..c71e9cc6bcefaa747ffa38b1170845df1e89d93c 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -1,4 +1,10 @@
## coding=utf-8
+
+## Pages currently use v1 styling by default. Once the Pattern Library
+## rollout has been completed, this default can be switched to v2.
+<%! main_css = "css/studio-main-v1.css" %>
+
+## Standard imports
<%namespace name='static' file='static_content.html'/>
<%!
from django.utils.translation import ugettext as _
@@ -7,6 +13,7 @@ from openedx.core.djangolib.js_utils import (
dump_js_escaped_json, js_escaped_string
)
%>
+
<%page expression_filter="h"/>
<!doctype html>
<!--[if lte IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
@@ -36,7 +43,8 @@ from openedx.core.djangolib.js_utils import (
<%static:css group='style-vendor'/>
<%static:css group='style-vendor-tinymce-content'/>
<%static:css group='style-vendor-tinymce-skin'/>
- <%static:css group='style-main'/>
+
+ <%static:css group='${self.attr.main_css}'/>
<%include file="widgets/segment-io.html" />
diff --git a/cms/templates/ux/reference/index.html b/cms/templates/ux/reference/index.html
index 4121778dcde1f26fd47e4dfecef1968086f4d8b7..5f7c6d1aeb8c8f76e60a7a867baa1a9ca504632f 100644
--- a/cms/templates/ux/reference/index.html
+++ b/cms/templates/ux/reference/index.html
@@ -24,6 +24,7 @@
<ul>
<li><a href="container.html">Container page</a></li>
<li><a href="unit.html">Unit page</a></li>
+ <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
</ul>
</section>
</li>
diff --git a/cms/templates/ux/reference/pattern-library-test.html b/cms/templates/ux/reference/pattern-library-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..21ee51c129e9987a95b50acb6cb9bc175a6a800e
--- /dev/null
+++ b/cms/templates/ux/reference/pattern-library-test.html
@@ -0,0 +1,23 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "css/studio-main-v2.css" %>
+
+<%inherit file="../../base.html" />
+
+<%block name="title">Pattern Library Test Page</%block>
+<%block name="bodyclass">is-signedin pattern-library</%block>
+
+<%block name="content">
+<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
+<div class="example-set">
+ <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
+ <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+
+ <div class="alert-message">
+ <p class="alert-copy">
+ Interesting pattern library content to come...
+ </p>
+ </div>
+
+ </div>
+</div>
+</%block>
diff --git a/common/djangoapps/pipeline_mako/__init__.py b/common/djangoapps/pipeline_mako/__init__.py
index d8987550a40b4e56a7d18ab4bb9d68aae11ab20f..734c5d2e11781de7c0984a0bdc6a8b739e18cb40 100644
--- a/common/djangoapps/pipeline_mako/__init__.py
+++ b/common/djangoapps/pipeline_mako/__init__.py
@@ -10,7 +10,7 @@ from django.contrib.staticfiles.storage import staticfiles_storage
def compressed_css(package_name, raw=False):
- package = settings.PIPELINE_CSS.get(package_name, {})
+ package = pipeline_css_info(package_name)
if package:
package = {package_name: package}
packager = Packager(css_packages=package, js_packages={})
@@ -24,6 +24,28 @@ def compressed_css(package_name, raw=False):
return render_individual_css(package, paths, raw=raw)
+def pipeline_css_info(package_name):
+ """
+ Returns information about a CSS package needed for the Django pipeline.
+
+ Note: if the package name was not registered, then the information
+ returned is based on the package_name being a relative path to a
+ single CSS file.
+
+ Args:
+ package_name: The name of the CSS package.
+
+ Returns:
+ A dictionary with information about the CSS package.
+ """
+ if package_name in settings.PIPELINE_CSS:
+ return settings.PIPELINE_CSS[package_name]
+ return {
+ 'source_filenames': [package_name],
+ 'output_filename': package_name,
+ }
+
+
def render_css(package, path, raw=False):
template_name = package.template_name or "mako/css.html"
context = package.extra_context
diff --git a/common/djangoapps/pipeline_mako/templates/static_content.html b/common/djangoapps/pipeline_mako/templates/static_content.html
index 9a2754f89244965c53b60478c330d21d4f0c6b06..00a0c0dd1634acbccaffdd1e90fecc1fa69cdc6f 100644
--- a/common/djangoapps/pipeline_mako/templates/static_content.html
+++ b/common/djangoapps/pipeline_mako/templates/static_content.html
@@ -1,6 +1,6 @@
<%!
from django.contrib.staticfiles.storage import staticfiles_storage
-from pipeline_mako import compressed_css, compressed_js
+from pipeline_mako import compressed_css, compressed_js, pipeline_css_info
from django.utils.translation import get_language_bidi
from mako.exceptions import TemplateLookupException
@@ -40,7 +40,7 @@ except:
% if settings.PIPELINE_ENABLED:
${compressed_css(group, raw=raw)}
% else:
- % for filename in settings.PIPELINE_CSS[group]['source_filenames']:
+ % for filename in pipeline_css_info(group)['source_filenames']:
<link rel="stylesheet" href="${staticfiles_storage.url(filename.replace('.scss', '.css'))}${"?raw" if raw else ""}" type="text/css" media="all" / >
% endfor
%endif
diff --git a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
index 54ef5ff84fd3eb3294980f752b9483857b4dcb7f..dcc8d104852ab1cb17c93e3883e103728f6846ea 100644
--- a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
+++ b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
@@ -104,8 +104,8 @@ class TestComprehensiveTheming(TestCase):
"""
Test that static files finders are adjusted according to the applied comprehensive theme.
"""
- result = staticfiles.finders.find('red-theme/css/lms-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('red-theme/css/lms-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
@@ -117,8 +117,8 @@ class TestComprehensiveTheming(TestCase):
"""
Test default css is served if no theme is applied
"""
- result = staticfiles.finders.find('css/lms-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('css/lms-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
diff --git a/lms/envs/common.py b/lms/envs/common.py
index 6c84403569a04299198cb674ca43685c71ece96e..e5dd407e2dc772a3a16d568c37720bfb0def79ea 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1390,20 +1390,6 @@ PIPELINE_CSS = {
],
'output_filename': 'css/lms-style-vendor-tinymce-skin.css',
},
- 'style-main': {
- # this is unnecessary and can be removed
- 'source_filenames': [
- 'css/lms-main.css',
- ],
- 'output_filename': 'css/lms-main.css',
- },
- 'style-main-rtl': {
- # this is unnecessary and can be removed
- 'source_filenames': [
- 'css/lms-main-rtl.css',
- ],
- 'output_filename': 'css/lms-main-rtl.css',
- },
'style-course-vendor': {
'source_filenames': [
'js/vendor/CodeMirror/codemirror.css',
diff --git a/lms/static/certificates/sass/_build.scss b/lms/static/certificates/sass/_build.scss
index c97b1b0c37c25aad495b197bb67a41f59130e6df..11bd2e994776406bee258a5fac0736086747fcfd 100644
--- a/lms/static/certificates/sass/_build.scss
+++ b/lms/static/certificates/sass/_build.scss
@@ -1,19 +1,15 @@
// ------------------------------
// Open edX Certificates: Shared Build Compile
-// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files.
+// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI.
+// Configuration and vendor specific imports happen before this shared set of imports are compiled
+// in the main-*.scss files.
-// ------------------------------
-// #CONFIG + LIB
-// ------------------------------
-@import 'lib';
+// Configuration
@import 'config';
-@import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library';
-// ------------------------------
-// #EXTENSIONS
-// ------------------------------
+// Extensions
@import 'utilities';
@import 'base';
@import 'components';
diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss
index d8e3a022d503ac23f8595b14b58be9c38bbd726b..911c68dd9a93be1f199dfe1c1400de12956192a8 100644
--- a/lms/static/certificates/sass/_config.scss
+++ b/lms/static/certificates/sass/_config.scss
@@ -1,14 +1,10 @@
// ------------------------------
// Open edX Certificates: Config
-// About: variable and configuration overrides
-
-// #VARIABLES
// ------------------------------
// #VARIABLES
// ------------------------------
-$pattern-library-path: '../../edx-pattern-library' !default;
// certificate characteristics
$cert-base-color: palette(grayscale-cool, dark);
diff --git a/lms/static/certificates/sass/_lib.scss b/lms/static/certificates/sass/_lib.scss
deleted file mode 100644
index 83b0a5588284bc6f363bf414c202fc5a0d9b8d8e..0000000000000000000000000000000000000000
--- a/lms/static/certificates/sass/_lib.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: third party libraries and dependencies import
-
-
-@import '../../../../node_modules/edx-pattern-library/node_modules/bourbon/app/assets/stylesheets/bourbon';
-@import '../../../../node_modules/edx-pattern-library/node_modules/susy/sass/susy';
-@import '../../../../node_modules/edx-pattern-library/node_modules/breakpoint-sass/stylesheets/breakpoint';
diff --git a/lms/static/certificates/sass/_ltr.scss b/lms/static/certificates/sass/_ltr.scss
deleted file mode 100644
index 392f53d3ddfa1e3039cf8067972928944553fd7e..0000000000000000000000000000000000000000
--- a/lms/static/certificates/sass/_ltr.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: Sass partial for defining settings and utilities for LTR-centric layouts.
-
-// #SETTINGS
-// #LIB
-
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$layout-direction: ltr;
-
-// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
-$grid-direction-default: ltr;
-$grid-direction-reversed: ltr;
-
-
-// ----------------------------
-// #LIB
-// ----------------------------
-@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-ltr';
diff --git a/lms/static/certificates/sass/_rtl.scss b/lms/static/certificates/sass/_rtl.scss
deleted file mode 100644
index ba219f69f8f54c60460831549d3560ba0a9d1d14..0000000000000000000000000000000000000000
--- a/lms/static/certificates/sass/_rtl.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: Sass partial for defining settings and utilities for LTR-centric layouts.
-
-// #SETTINGS
-// #LIB
-
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$layout-direction: rtl;
-
-// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
-$grid-direction-default: rtl;
-$grid-direction-reversed: ltr;
-
-
-// ----------------------------
-// #LIB
-// ----------------------------
-@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-rtl';
diff --git a/lms/static/certificates/sass/main-ltr.scss b/lms/static/certificates/sass/main-ltr.scss
index db0e51c41e9d3c47faf84a2639614a0dfb50b4d8..41f638c2b441498400c863748ed9f2a66716099d 100644
--- a/lms/static/certificates/sass/main-ltr.scss
+++ b/lms/static/certificates/sass/main-ltr.scss
@@ -3,16 +3,13 @@
// About: Sass compile for the Open edX Certificates Elements.
-// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references.
+// NOTE: This is the left to right (LTR) configured style compile.
+// It should mirror main-rtl w/ the exception of bi-app references.
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-@import 'ltr'; // LTR-specifc settings and utilities
-
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build'; // shared compile/build order for both LTR and RTL UI
+// Load the shared build
+@import 'build';
diff --git a/lms/static/certificates/sass/main-rtl.scss b/lms/static/certificates/sass/main-rtl.scss
index 54a6ec443c60e8de48471dc79c6b286d8b2f657e..faea15b67e080cd0bd5a1ac18abde8166c97fd7d 100644
--- a/lms/static/certificates/sass/main-rtl.scss
+++ b/lms/static/certificates/sass/main-rtl.scss
@@ -3,16 +3,13 @@
// About: Sass compile for the Open edX Certificates Elements.
-// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references.
+// NOTE: This is the right to left (RTL) configured style compile.
+// It should mirror main-ltr w/ the exception of bi-app references.
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-@import 'rtl'; // RTL-specifc settings and utilities
-
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build'; // shared compile/build order for both LTR and RTL UI
+// Load the shared build
+@import 'build';
diff --git a/lms/static/sass/_build-lms.scss b/lms/static/sass/_build-lms-v1.scss
similarity index 100%
rename from lms/static/sass/_build-lms.scss
rename to lms/static/sass/_build-lms-v1.scss
diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a982b28c2afc02c8e58abc3c996210997c8f2ea5
--- /dev/null
+++ b/lms/static/sass/_build-lms-v2.scss
@@ -0,0 +1,9 @@
+// ------------------------------
+// LMS: Shared Build Compile
+// Version 2 - introduces the Pattern Library
+
+
+// Configuration
+@import 'config';
+
+// Extensions
diff --git a/lms/static/sass/_config.scss b/lms/static/sass/_config.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3a6ab63c1766e94db849c1b1d014b8c4571595a
--- /dev/null
+++ b/lms/static/sass/_config.scss
@@ -0,0 +1,7 @@
+// ------------------------------
+// LMS configuration settings
+
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------
diff --git a/lms/static/sass/lms-main-rtl.scss b/lms/static/sass/lms-main-v1-rtl.scss
similarity index 78%
rename from lms/static/sass/lms-main-rtl.scss
rename to lms/static/sass/lms-main-v1-rtl.scss
index 7ab3e3cd35f78d68c340578045e597b686f6e216..0988836b425678e895acf85a8261b242f7553afe 100644
--- a/lms/static/sass/lms-main-rtl.scss
+++ b/lms/static/sass/lms-main-v1-rtl.scss
@@ -1,4 +1,5 @@
-// lms - css application architecture
+// LMS - CSS application architecture
+// Version 1 styling (pre-Pattern Library)
// ====================
// libs and resets *do not edit*
@@ -18,4 +19,4 @@
// theme, for old-style deprecated theming.
//<THEME-OVERRIDE>
-@import 'build-lms'; // shared app style assets/rendering
+@import 'build-lms-v1'; // shared app style assets/rendering
diff --git a/lms/static/sass/lms-main.scss b/lms/static/sass/lms-main-v1.scss
similarity index 76%
rename from lms/static/sass/lms-main.scss
rename to lms/static/sass/lms-main-v1.scss
index 1a79ca04426f8716bd4ea1c43ed85a0e1b680278..ca36fb3acb95820f79092268e72907e7919749e9 100644
--- a/lms/static/sass/lms-main.scss
+++ b/lms/static/sass/lms-main-v1.scss
@@ -1,4 +1,5 @@
-// lms - css application architecture
+// LMS - CSS application architecture
+// Version 1 styling (pre-Pattern Library)
// ====================
// libs and resets *do not edit*
@@ -17,4 +18,4 @@
// theme, for old-style deprecated theming.
//<THEME-OVERRIDE>
-@import 'build-lms'; // shared app style assets/rendering
+@import 'build-lms-v1'; // shared app style assets/rendering
diff --git a/lms/static/sass/lms-main-v2-rtl.scss b/lms/static/sass/lms-main-v2-rtl.scss
new file mode 100644
index 0000000000000000000000000000000000000000..195b752386a162a1758afd4d5585ce2a9601dfd9
--- /dev/null
+++ b/lms/static/sass/lms-main-v2-rtl.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// LMS main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror lms-main-v2 w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Load the shared build
+@import 'build-lms-v2';
diff --git a/lms/static/sass/lms-main-v2.scss b/lms/static/sass/lms-main-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ca43dfc041af52aa4443aa1092b02a677a4552f1
--- /dev/null
+++ b/lms/static/sass/lms-main-v2.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// LMS main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror lms-main-v2-rtl w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Load the shared build
+@import 'build-lms-v2';
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 827e578234a5cc38fbae80a4158a24ce25552c70..8f04585647d30108658955cab8e270f2fe0b02fb 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -1,4 +1,10 @@
## coding=utf-8
+
+## Pages currently use v1 styling by default. Once the Pattern Library
+## rollout has been completed, this default can be switched to v2.
+<%! main_css = "css/lms-main-v1.css" %>
+
+
<%namespace name='static' file='static_content.html'/>
<%!
from django.core.urlresolvers import reverse
@@ -49,17 +55,7 @@ from pipeline_mako import render_require_js_path_overrides
<link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
<%static:css group='style-vendor'/>
- ## We could do <%static:css group='style-main'/>, but that's only useful
- ## if the group contains multiple files, and the 'style-main' group doesn't.
- ## Instead, we'll construct this <link> element manually, to improve clarity.
- ## When nothing in the system is referencing the 'style-main' group, it can
- ## be removed from the environment file.
- <%
- application_css_path = "css/lms-main{rtl}.css".format(
- rtl="-rtl" if get_language_bidi() else "",
- )
- %>
- <link rel="stylesheet" href="${static.url(application_css_path)}" type="text/css" media="all" />
+ <%static:css group='${self.attr.main_css}'/>
% if disable_courseware_js:
<%static:js group='base_vendor'/>
diff --git a/lms/templates/ux/reference/index.html b/lms/templates/ux/reference/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..e4ce1d11429c902b050b8d29d4fbc98a0d3e1908
--- /dev/null
+++ b/lms/templates/ux/reference/index.html
@@ -0,0 +1,27 @@
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+<%namespace name='static' file='/static_content.html'/>
+
+<%block name="pagetitle">UX Reference</%block>
+<%block name="nav_skip">#content</%block>
+
+<%block name="bodyclass">view-ux-reference</%block>
+
+<%block name="content">
+<div class="main-wrapper">
+ <div class="inner-wrapper">
+ <div class="main-column">
+ <article class="window unit-body">
+ <h1>UX Style Reference</h1>
+
+ <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
+ <h2>Page Types</h2>
+ <ul>
+ <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
+ </ul>
+ </section>
+ </article>
+ </div>
+ </div>
+</div>
+</%block>
diff --git a/lms/templates/ux/reference/pattern-library-test.html b/lms/templates/ux/reference/pattern-library-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..4a33fa56c88393c5eacad485e9afa03babd18975
--- /dev/null
+++ b/lms/templates/ux/reference/pattern-library-test.html
@@ -0,0 +1,26 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "css/lms-main-v2.css" %>
+
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Pattern Library Test</%block>
+<%block name="nav_skip">#content</%block>
+
+<%block name="bodyclass">pattern-library</%block>
+
+<%block name="content">
+<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
+<div class="example-set">
+ <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
+ <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+
+ <div class="alert-message">
+ <p class="alert-copy">
+ Interesting pattern library content to come...
+ </p>
+ </div>
+
+ </div>
+</div>
+</%block>
diff --git a/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py b/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py
index b7852249d96d4b515249324149585e10810614f5..defc2502762363554dc087e273acf5383ee63c72 100644
--- a/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py
+++ b/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py
@@ -63,8 +63,8 @@ class TestComprehensiveThemeLMS(TestCase):
"""
Test that theme sass files are used instead of default sass files.
"""
- result = staticfiles.finders.find('test-theme/css/lms-main.css')
- self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('test-theme/css/lms-main-v1.css')
+ self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
@@ -115,8 +115,8 @@ class TestComprehensiveThemeCMS(TestCase):
"""
Test that theme sass files are used instead of default sass files.
"""
- result = staticfiles.finders.find('test-theme/css/studio-main.css')
- self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main.css")
+ result = staticfiles.finders.find('test-theme/css/studio-main-v1.css')
+ self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main-v1.css")
cms_main_css = ""
with open(result) as css_file:
@@ -161,8 +161,8 @@ class TestComprehensiveThemeDisabledLMS(TestCase):
"""
Test that default css files served without comprehensive themes applied.
"""
- result = staticfiles.finders.find('css/lms-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('css/lms-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
@@ -208,8 +208,8 @@ class TestComprehensiveThemeDisabledCMS(TestCase):
"""
Test that default css files served without comprehensive themes applied..
"""
- result = staticfiles.finders.find('css/studio-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main.css")
+ result = staticfiles.finders.find('css/studio-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main-v1.css")
cms_main_css = ""
with open(result) as css_file:
diff --git a/package.json b/package.json
index 5b9cffa68b56a6a3fdcb31613193620908804168..35cc6a98292425290af50cc2014b0985ccc8ab76 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
"version": "0.1.0",
"dependencies": {
"coffee-script": "1.6.1",
- "edx-pattern-library": "0.10.4",
- "edx-ui-toolkit": "0.9.0",
+ "edx-pattern-library": "~0.12.1",
+ "edx-ui-toolkit": "~0.9.1",
"requirejs": "~2.1.22",
"uglify-js": "2.4.24",
"underscore": "~1.8.3",
diff --git a/pavelib/assets.py b/pavelib/assets.py
index 3124979c6f86cdccb0e0acc414ad6170ab2f6755..78c249b2df5f7ad276d9300a0092b2adcb9749f2 100644
--- a/pavelib/assets.py
+++ b/pavelib/assets.py
@@ -33,9 +33,12 @@ SYSTEMS = {
}
# Common lookup paths that are added to the lookup paths for all sass compilations
-COMMON_LOOKUP_DIRS = [
+COMMON_LOOKUP_PATHS = [
path("common/static"),
path("common/static/sass"),
+ path("node_modules"),
+ path("node_modules/edx-pattern-library/node_modules"),
+
]
# A list of NPM installed libraries that should be copied into the common
@@ -108,10 +111,7 @@ def get_common_sass_directories():
applicable_directories.append({
"sass_source_dir": path("common/static/sass"),
"css_destination_dir": path("common/static/css"),
- "lookup_paths": [
- path("common/static"),
- path("common/static/sass"),
- ],
+ "lookup_paths": COMMON_LOOKUP_PATHS,
})
return applicable_directories
@@ -223,7 +223,7 @@ def get_watcher_dirs(themes_base_dir=None, themes=None):
(list): dirs that need to be added to sass watchers.
"""
dirs = []
- dirs.extend(COMMON_LOOKUP_DIRS)
+ dirs.extend(COMMON_LOOKUP_PATHS)
if themes_base_dir and themes:
# Register sass watchers for all the given themes
theme_dirs = [(path(themes_base_dir) / theme) for theme in themes if theme]
@@ -559,7 +559,7 @@ def _compile_sass(system, theme, debug, force, timing_info):
else:
sass.compile(
dirname=(sass_source_dir, css_dir),
- include_paths=COMMON_LOOKUP_DIRS + lookup_paths,
+ include_paths=COMMON_LOOKUP_PATHS + lookup_paths,
source_comments=source_comments,
output_style=output_style,
)
diff --git a/pavelib/paver_tests/test_assets.py b/pavelib/paver_tests/test_assets.py
index 4f6f2116158a0611d9f5f52f79e2949c3cfe9cb2..ede0949ca16e61bb848b562cd700bfde3a9b1225 100644
--- a/pavelib/paver_tests/test_assets.py
+++ b/pavelib/paver_tests/test_assets.py
@@ -148,6 +148,8 @@ class TestPaverWatchAssetTasks(TestCase):
self.expected_sass_directories = [
path('common/static/sass'),
path('common/static'),
+ path('node_modules'),
+ path('node_modules/edx-pattern-library/node_modules'),
path('lms/static/sass/partials'),
path('lms/static/sass'),
path('lms/static/certificates/sass'),
@@ -156,6 +158,10 @@ class TestPaverWatchAssetTasks(TestCase):
]
super(TestPaverWatchAssetTasks, self).setUp()
+ def tearDown(self):
+ self.expected_sass_directories = []
+ super(TestPaverWatchAssetTasks, self).tearDown()
+
def test_watch_assets(self):
"""
Test the "compile_sass" task.
@@ -198,7 +204,3 @@ class TestPaverWatchAssetTasks(TestCase):
self.assertIsInstance(sass_watcher_args[0], PollingObserver)
self.assertIsInstance(sass_watcher_args[1], list)
self.assertItemsEqual(sass_watcher_args[1], self.expected_sass_directories)
-
- def tearDown(self):
- self.expected_sass_directories = []
- super(TestPaverWatchAssetTasks, self).tearDown()