Skip to content

E
edx-platform
Commit 4029e6e0 by Andy Armstrong Committed by GitHub
Options

Merge pull request #13144 from edx/andya/update-pattern-library-colors 

Update Pattern Library pages to use new color scheme
parents 6d3edca2 7119357a
Showing with 96 additions and 95 deletions
cms/static/sass/programs/_components.scss
......@@ -20,7 +20,7 @@
&:hover,
&:focus,
&:active {
color: palette(grayscale, black);
color: $black;
}
}
......@@ -42,7 +42,7 @@
&:focus,
&.is-focused {
background: shade($success, 33%);
color: $btn-default-focus-color;
color: palette(primary, accent);
}
// STATE: is pressed or active
......@@ -94,6 +94,6 @@
.form-group {
&.bg-white {
background-color: palette(grayscale, white);
background-color: $white;
}
}
cms/static/sass/programs/_modals.scss
......@@ -8,14 +8,14 @@
right: 0;
bottom: 0;
left: 0;
background-color: palette(grayscale-cool, x-dark);
background-color: palette(grayscale, dark);
opacity: 0.5;
z-index: 1000;
}
.modal-window {
position: absolute;
background-color: palette(grayscale, black);
background-color: $black;
width: 80%;
left: 10%;
top: 40%;
......@@ -25,15 +25,15 @@
.modal-content {
margin: 5px;
padding: 20px;
background-color: palette(grayscale-cool, x-dark);
border-top: 5px solid palette(warning, base);
background-color: palette(grayscale, dark);
border-top: 5px solid palette(warning, accent);
.copy {
color: palette(grayscale, white);
color: $white;
}
.emphasized {
color: palette(grayscale, white-t);
color: $white;
font-weight: font-weight(bold);
}
}
......@@ -42,18 +42,19 @@
padding: 10px 20px;
.btn {
color: palette(grayscale, white-t);
color: palette(grayscale, back);
}
.btn-brand {
background: palette(warning, base);
border-color: palette(warning, base);
background: palette(warning, back);
color: palette(grayscale, dark);
border-color: palette(warning, accent);
&:hover,
&:focus,
&:active {
background: palette(warning, dark);
border-color: palette(warning, dark);;
background: palette(warning, back);
border-color: palette(warning, accent);
}
}
......@@ -63,7 +64,7 @@
&:hover,
&:focus,
&:active {
border-color: palette(grayscale-cool, light)
border-color: palette(grayscale, back)
}
}
}
......
lms/djangoapps/teams/static/teams/templates/team-profile.underscore
......@@ -5,7 +5,7 @@
data-user-create-comment="<%- !readOnly %>"
data-user-create-subcomment="<%- !readOnly %>">
<% if ( !readOnly) { %>
<button type="button" class="btn-neutral btn-small new-post-btn">
<button type="button" class="btn btn-small new-post-btn">
<%- gettext("Add a Post") %>
</button>
<% } %>
......
lms/static/certificates/sass/_base.scss
......@@ -14,7 +14,7 @@ html, body {
height: 100%;
margin: 0;
padding: 0;
background: palette(grayscale, white);
background: $white;
}
// ------------------------------
......
lms/static/certificates/sass/_components.scss
......@@ -22,7 +22,7 @@
// ------------------------------
%hd-subsection {
margin-bottom: spacing-vertical(mid-small);
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(x-small);
}
......@@ -30,20 +30,20 @@
// #DEPTH
// ------------------------------
%depth-base-focus {
background: palette(grayscale, white-t);
background: $white;
padding: spacing-vertical(small) spacing-horizontal(base);
}
%depth-well {
box-shadow: 0 rem(1) rem(3) 0 palette(grayscale-cool, light) inset;
box-shadow: 0 rem(1) rem(3) 0 palette(grayscale, back) inset;
padding: spacing-vertical(small) spacing-horizontal(base);
background: palette(grayscale, x-light);
background: palette(grayscale, x-back);
}
%depth-card {
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale-cool, light);
box-shadow: 0 rem(1) rem(2) 0 palette(grayscale, back);
padding: spacing-vertical(small) spacing-horizontal(base);
background: palette(grayscale, white-t);
background: $white;
}
.depth-base-focus {
......@@ -76,8 +76,8 @@
// ------------------------------
.wrapper-header {
@extend %divider-2;
border-bottom-color: palette(grayscale, xx-trans);
background: palette(grayscale, white-t);
border-bottom-color: palette(grayscale, x-back);
background: $white;
}
.header-app {
......@@ -96,19 +96,19 @@
// message to user-centric banner
.wrapper-banner-user {
box-shadow: inset 0 rem(2) rem(2) 0 palette(grayscale, black-t);
background: palette(grayscale-cool, x-dark);
box-shadow: inset 0 rem(2) rem(2) 0 $black;
background: palette(grayscale, dark);
}
.banner-user {
.message-title {
color: palette(grayscale, white-t);
color: $white;
font-weight: font-weight(semi-bold);
}
.message-copy {
color: palette(grayscale, white);
color: $white;
}
.message-actions .action {
......@@ -116,7 +116,7 @@
// STATE: hover, active, focus
&:hover, &:active, &:focus {
// customizations from UXPL
color: palette(grayscale-cool, x-dark);
color: palette(grayscale, dark);
}
.icon {
......@@ -161,7 +161,7 @@
// main accomplishment
.accomplishment-main {
background: palette(grayscale-cool, x-trans);
background: palette(grayscale, x-back);
}
// brief accomplishment
......@@ -198,13 +198,13 @@
%rendering-section {
margin-bottom: spacing-vertical(base);
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(base);
}
%rendering-hd-section {
margin-bottom: spacing-vertical(mid-small);
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
padding-bottom: spacing-vertical(x-small);
color: $cert-base-color;
@include text-align(center);
......@@ -344,7 +344,7 @@
.value {
@extend %copy-base;
font-weight: font-weight(semi-bold);
color: palette(grayscale, x-dark);
color: palette(grayscale, dark);
}
}
......@@ -360,7 +360,7 @@
.src {
max-height: 100%;
border: rem(4) solid palette(grayscale, white-t);
border: rem(4) solid $white;
}
}
......@@ -384,7 +384,7 @@
.accomplishment-metadata-title {
@extend %hd-subsection;
border-bottom-color: palette(grayscale-cool, light);
border-bottom-color: palette(grayscale, back);
}
// ------------------------------
......@@ -467,7 +467,7 @@
}
.accomplishment-main {
background: transparentize(palette(grayscale-cool, dark), 0.9);
background: palette(grayscale, x-back);
}
.accomplishment-rendering {
......@@ -492,11 +492,11 @@
}
.accomplishment-main {
background: transparentize(palette(primary, accent), 0.9);
background: palette(primary, back);
}
.accomplishment-rendering {
background: palette(grayscale, white-t) url('../images/bg-verified.png') center no-repeat;
background: $white url('../images/bg-verified.png') center no-repeat;
background-size: 65%;
.deco-corner-tl {
......@@ -537,7 +537,7 @@
// #FOOTER
// ------------------------------
.footer-app {
border-top: rem(4) solid palette(grayscale, xx-trans);
border-top: rem(4) solid palette(grayscale, x-back);
padding-top: spacing-vertical(base);
}
......@@ -556,7 +556,7 @@
top: 0;
left: 0;
z-index: z-index(front);
background-color: palette(grayscale, trans); /* dim the background */
background-color: transparentize(palette(grayscale, base), 0.5); /* dim the background */
width: 100%;
height: 100%;
vertical-align: middle;
......@@ -572,8 +572,8 @@
max-width: 50%;
margin-right: auto;
margin-left: auto;
border-top: rem(10) solid palette(primary, light);
background: palette(grayscale, white);
border-top: rem(10) solid palette(primary, back);
background: palette(grayscale, x-back);
padding-right: spacing-horizontal(large);
padding-left: spacing-horizontal(large);
overflow-x: hidden;
......@@ -612,7 +612,7 @@
.modal-hr {
display: block;
border: none;
background-color: palette(grayscale, light);
background-color: palette(grayscale, back);
height: rem(2);
width: 100%;
}
lms/static/certificates/sass/_config.scss
......@@ -7,12 +7,12 @@
// ------------------------------
// certificate characteristics
$cert-base-color: palette(grayscale-cool, dark);
$cert-base-color: palette(grayscale, dark);
$cert-distinguished-color: palette(primary, accent);
$cert-decorative-color: palette(grayscale-cool, light);
$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
$cert-decorative-color: palette(grayscale, back);
$cert-decorative-color-de-emphasized: palette(grayscale, back);
$cert-decorative-color-emphasized: palette(grayscale, accent);
// typography: config
@include font-face(
......
lms/static/certificates/sass/_layouts.scss
......@@ -292,7 +292,7 @@
.wrapper-metadata .metadata {
@extend %divider-2;
margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-light);
border-bottom-color: palette(grayscale, x-back);
padding-bottom: spacing-vertical(small);
&:last-child {
......
lms/static/certificates/sass/_print.scss
......@@ -30,8 +30,8 @@
}
%print-black-on-white {
background: palette(grayscale, white-t) !important;
color: palette(grayscale, black-t) !important;
background: $white !important;
color: $black !important;
}
%print-layout-wrapper {
......@@ -191,7 +191,7 @@
.accomplishment-rendering {
top: 0 !important;
border: rem(1) solid palette(grayscale, light);
border: rem(1) solid palette(grayscale, back);
border-top: rem(2) solid $cert-base-color;
box-shadow: none;
padding: spacing-vertical(small) spacing-horizontal(mid-large);
......@@ -207,7 +207,7 @@
}
.wrapper-statement-and-signatories {
border-bottom: rem(2) solid palette(grayscale-cool, x-light);
border-bottom: rem(2) solid palette(grayscale, x-back);
}
.accomplishment-statement {
......
lms/static/sass/discussion/utilities/_variables-v2.scss
......@@ -13,7 +13,7 @@ $forum-color-staff: $blue !default;
$forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default;
$forum-color-border: palette(grayscale, base) !default;
$forum-color-error: palette(error, base) !default;
$forum-color-error: palette(error, accent) !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
......
lms/static/sass/elements/_banners.scss
......@@ -10,7 +10,7 @@ $full-width-banner-margin: 20px;
width: 100%;
overflow: hidden;
position: relative;
background: palette(grayscale, black-t);
background: $black;
&:before {
content: '';
......@@ -19,7 +19,7 @@ $full-width-banner-margin: 20px;
right: 0;
bottom: 0;
left: 0;
background: palette(grayscale, black-t);
background: $black;
opacity: 0.65;
@include susy-media($bp-screen-md) {
......
lms/static/sass/elements/_course-card.scss
......@@ -56,7 +56,7 @@
}
.select-error {
color: palette(error, base);
color: palette(error, text);
margin-bottom: $baseline/4;
font-size: font-size(small);
visibility: hidden;
......@@ -100,14 +100,14 @@
.cta-primary {
display: inline-block;
background-color: palette(success, dark);
border-color: palette(success, dark);
background-color: palette(success, back);
border-color: palette(success, accent);
&:active,
&:focus,
&:hover {
background-color: palette(success, base);
border-color: palette(success, base);
background-color: palette(success, back);
border-color: palette(success, accent);
}
}
......@@ -138,7 +138,7 @@
.upgrade-message,
.certificate-status {
border-top: 1px solid palette(grayscale, x-trans);
border-top: 1px solid palette(grayscale, back);
padding-top: $baseline;
@include susy-media($bp-screen-md) {
......
lms/static/sass/elements/_icons.scss
......@@ -6,14 +6,14 @@
width: 23px;
height: 20px;
padding: 2px;
background-color: palette(grayscale, white-t);
background-color: $white;
border-style: solid;
border-width: 2px;
}
.green-certificate-icon .certificate-body {
fill: palette(success, dark);
border-color: palette(success, dark);
fill: palette(success, accent);
border-color: palette(success, accent);
}
.blue-certificate-icon .certificate-body {
......
lms/static/sass/elements/_program-card.scss
......@@ -109,7 +109,7 @@
}
.hd-3 {
color: palette(grayscale, x-dark);
color: palette(grayscale, dark);
min-height: ($baseline*3);
line-height: 1;
}
......@@ -146,7 +146,7 @@
.progress {
height: 5px;
background: palette(grayscale-cool, x-light);
background: palette(grayscale, x-back);
.bar {
@include float(left);
......@@ -154,11 +154,11 @@
position: relative;
&.complete {
background: palette(success, dark);
background: palette(success, back);
}
&.in-progress {
background: palette(warning, base);
background: palette(warning, back);
}
}
}
......
lms/static/sass/shared-v2/_footer.scss
......@@ -5,7 +5,7 @@
@include clearfix();
@extend %ui-print-excluded;
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
border-top: 1px solid palette(grayscale, x-back);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;
......
lms/static/sass/shared-v2/_help-tab.scss
......@@ -12,8 +12,8 @@
border: 1px solid $lms-border-color;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize(palette(grayscale, white-t), 0.25);
color: transparentize(palette(grayscale-cool, x-dark), 0.25);
background: $white;
color: palette(grayscale, base);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
......@@ -21,7 +21,7 @@
&:hover,
&:focus {
color: palette(grayscale, white-t);
color: $white;
background: palette(primary, base);
}
}
......@@ -35,7 +35,7 @@
padding: ($baseline*0.75) 0;
text-align: center;
cursor: pointer;
background: palette(grayscale, white-t);
background: $white;
text-decoration: none;
display: block;
border: 1px solid $lms-border-color;
......@@ -52,7 +52,7 @@
&:hover,
&:focus {
color: palette(grayscale, white-t);
color: $white;
background: palette(primary, base);
}
}
......
lms/static/sass/shared-v2/_modal.scss
......@@ -122,9 +122,9 @@
}
.modal-form-error {
background: palette(error, xx-trans);
border: 1px solid palette(error, dark);
color: palette(error, dark);
background: palette(error, back);
border: 1px solid palette(error, accent);
color: palette(error, text);
display: none;
margin-bottom: $baseline;
padding: 12px;
......@@ -155,7 +155,7 @@
.input-group {
@include clearfix();
border-bottom: 1px solid palette(grayscale, light);
border-bottom: 1px solid palette(grayscale, back);
box-shadow: 0 1px 0 0 $white-opacity-60;
margin-bottom: ($baseline*1.5);
padding-bottom: ($baseline/2);
......@@ -171,12 +171,12 @@
&.field-error {
display: block;
color: palette(error, dark);
color: palette(error, text);
+ input,
+ textarea {
border: 1px solid palette(error, dark);
color: palette(error, dark);
border: 1px solid palette(error, accent);
color: palette(error, text);
}
}
}
......@@ -186,7 +186,7 @@
}
textarea {
background: palette(grayscale, white-t);
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;
......@@ -196,7 +196,7 @@
input[type="email"],
input[type="text"],
input[type="password"] {
background: palette(grayscale, white-t);
background: $white;
display: block;
height: 45px;
margin-bottom: $baseline;
......
lms/static/sass/shared-v2/_variables.scss
// LMS variables
$lms-gray: palette(grayscale, base);
$lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different?
$lms-container-background-color: palette(grayscale, white-t);
$lms-border-color: palette(grayscale, light);
$lms-background-color: palette(grayscale, x-back); // Why is the Pattern Library default background different?
$lms-container-background-color: $white;
$lms-border-color: palette(grayscale, back);
$lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base);
......@@ -17,5 +17,5 @@ $light-grey-transparent: rgba(200,200,200, 0);
$light-grey-solid: rgba(200,200,200, 1);
// Icons
$lms-dark-icon-color: palette(grayscale, white-t);
$lms-dark-icon-color: $white;
$lms-dark-icon-background-color: palette(grayscale, black);
lms/static/sass/views/_program-details.scss
......@@ -16,14 +16,14 @@
.title,
.subtitle {
color: palette(grayscale, white-t);
color: $white;
font-weight: font-weight(semi-bold);
}
.org-wrapper {
position: absolute;
top: 0;
background: palette(grayscale, white-t);
background: $white;
opacity: 0.7;
left: 0;
padding: 20px;
......@@ -54,7 +54,7 @@
color: palette(grayscale, dark);
&.active {
color: palette(grayscale, x-dark);
color: palette(grayscale, dark);
}
}
......
lms/templates/discussion/_discussion_course_navigation.html
......@@ -8,7 +8,7 @@ from django_comment_client.permissions import has_permission
<%block name="extratabs">
% if has_permission(user, 'create_thread', course.id):
<li class="right">
<button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
<button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
</li>
% endif
</%block>
lms/templates/discussion/_discussion_inline.html
......@@ -11,7 +11,7 @@ from openedx.core.djangolib.js_utils import js_escaped_string
<span class="show-hide-discussion-icon"></span><span class="button-text">${_("Show Discussion")}</span>
</a>
% if can_create_thread:
<button class="new-post-btn btn-neutral btn-small">${_("Add a Post")}</button>
<button class="new-post-btn btn btn-small">${_("Add a Post")}</button>
% endif
</div>
<script type="text/javascript">
......
lms/templates/ux/reference/course-skeleton.html
......@@ -42,7 +42,7 @@
</div>
<div class="page-header-secondary">
<div class="form-actions">
<button class="btn-neutral btn-small">Click Me!</button>
<button class="btn btn-small">Click Me!</button>
## TODO: note that this search component markup is provisional
## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
## - update the Pattern Library's markup to match
......
package.json
......@@ -5,7 +5,7 @@
"backbone": "~1.3.2",
"backbone-validation": "~0.11.5",
"coffee-script": "1.6.1",
"edx-pattern-library": "0.16.1",
"edx-pattern-library": "0.16.3",
"edx-ui-toolkit": "1.4.1",
"jquery": "~2.2.0",
"jquery-migrate": "^1.4.1",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment