Skip to content

Commit 0f93d57

Browse files
MaxFrank13MaxFrank13
authored
feat: paragon 23 support (#1000)
1 parent e7b46f7 commit 0f93d57

20 files changed

+27961
-455
lines changed

‎edx_credentials_themes/static/edx.org/base/sass/_base.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@ html, body {
1414
height: 100%;
1515
margin: 0;
1616
padding: 0;
17-
background: $white;
17+
background: var(--pgn-color-white);
1818
}
1919

2020
// ------------------------------
2121
// #TYPOGRAPHY
2222
// ------------------------------
2323
a {
24-
color: $primary-500;
24+
color: var(--pgn-color-primary-500);
2525
&:hover {
26-
color: $gray-700;
26+
color: var(--pgn-color-gray-700);
2727
}
2828
}
2929

‎edx_credentials_themes/static/edx.org/base/sass/_components.scss‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
// ------------------------------
1515
.wrapper-header {
1616
@extend %divider-2;
17-
border-bottom-color: $gray-200;
18-
background: $white;
17+
border-bottom-color: var(--pgn-color-gray-200);
18+
background: var(--pgn-color-white);
1919
}
2020

2121
.header-app {
@@ -30,18 +30,18 @@
3030
// #BANNER
3131
// ------------------------------
3232
.wrapper-banner-user {
33-
background-color: $primary-500;
34-
border-top: 1px solid $gray-400;
35-
border-bottom: 1px solid $gray-400;
36-
color: $gray-100;
33+
background-color: var(--pgn-color-primary-500);
34+
border-top: 1px solid var(--pgn-color-gray-400);
35+
border-bottom: 1px solid var(--pgn-color-gray-400);
36+
color: var(--pgn-color-gray-100);
3737
}
3838

3939
.banner-user {
4040

4141
.message-title {
4242
@extend .h6;
43-
color: $gray-100;
44-
font-weight: $font-weight-bold;
43+
color: var(--pgn-color-gray-100);
44+
font-weight: var(--pgn-typography-font-weight-bold);
4545

4646
@include media-breakpoint-up(md) {
4747
font-size: $font-size-lg; // @extend .h5;
@@ -50,19 +50,19 @@
5050

5151
.message-copy {
5252
@extend %text-meta;
53-
color: $gray-100;
53+
color: var(--pgn-color-gray-100);
5454

5555
@include media-breakpoint-up(md) {
56-
font-size: $font-size-base;
56+
font-size: var(--pgn-typography-font-size-base);
5757
}
5858
}
5959

6060
.message-actions-box {
6161
@extend .p-1;
6262
display: inline-block;
63-
border: 1px solid $gray-100;
64-
border-radius: $card-border-radius;
65-
background-color: $gray-300;
63+
border: 1px solid var(--pgn-color-gray-100);
64+
border-radius: var(--pgn-size-card-border-radius-base);
65+
background-color: var(--pgn-color-gray-300);
6666
}
6767

6868
.action {
@@ -72,7 +72,7 @@
7272
padding: 0.625rem;
7373
background-color: transparent;
7474
font-size: $font-x-large;
75-
color: $gray-600;
75+
color: var(--pgn-color-gray-600);
7676

7777
.share-link {
7878
text-decoration: none;
@@ -101,23 +101,23 @@
101101
}
102102

103103
&:hover {
104-
background-color: $gray-100;
105-
color: $link-hover-color;
104+
background-color: var(--pgn-color-gray-100);
105+
color: var(--pgn-color-link-hover);
106106
}
107107

108108
&.action-share-facebook:hover {
109109
background-color: $facebook-blue;
110-
color: $gray-100;
110+
color: var(--pgn-color-gray-100);
111111
}
112112

113113
&.action-share-twitter:hover {
114114
background-color: $twitter-blue;
115-
color: $gray-100;
115+
color: var(--pgn-color-gray-100);
116116
}
117117

118118
&.action-share-linkedin:hover {
119119
background-color: $linkedin-blue;
120-
color: $gray-100;
120+
color: var(--pgn-color-gray-100);
121121
}
122122
}
123123
}
@@ -143,7 +143,7 @@
143143
}
144144

145145
.emphasized {
146-
font-weight: $font-weight-bold;
146+
font-weight: var(--pgn-typography-font-weight-bold);
147147
}
148148
}
149149

‎edx_credentials_themes/static/edx.org/base/sass/_layouts.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
// ------------------------------
1717
%layout-wrapper {
1818
@extend .mb-5;
19-
padding: 0 ($spacer*2);
19+
padding: 0 calc(var(--pgn-spacing-spacer-base) * .2);
2020
}
2121

2222
%layout {
@@ -28,7 +28,7 @@
2828
// ------------------------------
2929
// app header
3030
.wrapper-header {
31-
border-bottom: 1px solid $gray-500;
31+
border-bottom: 1px solid var(--pgn-color-gray-500);
3232
}
3333

3434
.header-app {
@@ -112,7 +112,7 @@
112112
.record,
113113
.program-record-wrapper {
114114
@extend .container;
115-
background-color: $white;
115+
background-color: var(--pgn-color-white);
116116
margin-top: 2em;
117117
margin-bottom: 2em;
118118
padding: 2em 0;
@@ -148,10 +148,10 @@
148148

149149
.record-card {
150150
margin-bottom: 0;
151-
background: $gray-200;
151+
background: var(--pgn-color-gray-200);
152152

153153
&:nth-of-type(even){
154-
background: $white;
154+
background: var(--pgn-color-white);
155155
}
156156

157157
.record-data-col {
@@ -183,7 +183,7 @@
183183

184184
.inline-data {
185185
padding-right: 0.4em;
186-
color: $primary-700;
186+
color: var(--pgn-color-primary-700);
187187
}
188188

189189
}
@@ -270,7 +270,7 @@
270270
@extend .row;
271271
@extend .p-4;
272272
margin: 0 auto;
273-
border-top: $hr-border-width solid $hr-border-color;
273+
border-top: var(--pgn-size-hr-border-width) solid var(--pgn-color-hr-border);
274274
}
275275

276276
.footer-app-legal {

‎edx_credentials_themes/static/edx.org/base/sass/_lib.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33

44
// About: third party libraries and dependencies import
55

6-
@import '~font-awesome/scss/font-awesome';
7-
@import "@edx/brand/paragon/fonts";
8-
@import "@edx/brand/paragon/variables";
9-
@import "@openedx/paragon/scss/core/core";
10-
@import "@edx/brand/paragon/overrides";
6+
// @import "@fortawesome/fontawesome-svg-core";
7+
@import "@openedx/paragon/styles/css/core/custom-media-breakpoints";
8+
@import "@openedx/paragon/styles/scss/core/core";
9+
@import "@openedx/paragon/styles/css/core/index.css";
10+
@import "@openedx/paragon/styles/css/themes/light/index.css";
11+
12+
@import "@edx/brand/paragon/css/core/index.css";
13+
@import "@edx/brand/paragon/css/themes/light/index.css";

‎edx_credentials_themes/static/edx.org/base/sass/_print.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
}
5252

5353
%print-black-on-white {
54-
background: $white !important;
55-
color: $black !important;
54+
background: var(--pgn-color-white) !important;
55+
color: var(--pgn-color-black) !important;
5656
}
5757

5858
%print-layout-wrapper {

‎edx_credentials_themes/static/edx.org/base/sass/_utilities.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@ $font-xx-small:0.688rem;
3030
$font-xxx-small:0.625rem;
3131

3232
// Font weights
33-
$font-weight-normal:400;
34-
$font-weight-light:300;
33+
$font-weight-normal: var(--pgn-typography-font-weight-normal) !default;
34+
$font-weight-light: var(--pgn-typography-font-weight-light) !default;
3535
$font-weight-x-light:200;
36-
$font-weight-semi-bold:600;
37-
$font-weight-bold:700;
36+
$font-weight-semi-bold: var(--pgn-typography-font-weight-semi-bold) !default;
37+
$font-weight-bold: var(--pgn-typography-font-weight-bold) !default;
3838

3939
//Line height vars
4040
$line-height-large: 1.6;
@@ -67,13 +67,13 @@ $line-height-small: 1.5;
6767

6868
%text-meta {
6969
font-size: $font-size-sm;
70-
line-height: $line-height-lg;
70+
line-height: var(--pgn-typography-line-height-lg);
7171
}
7272

7373
%h7 {
7474
@extend .h6;
7575
@extend %text-meta;
76-
font-weight: $font-weight-semi-bold;
76+
font-weight: var(--pgn-typography-font-weight-semi-bold);
7777
text-transform: uppercase;
7878
letter-spacing: 0.0625rem;
7979
}

‎edx_credentials_themes/static/edx.org/base/sass/views/_program-record.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
$btn-blue: #0075b4;
2-
$table-border-color: #D3D2D2;
2+
$table-border-color: var(--pgn-color-table-border) !default;
33
$record-border-color: #C2C2C2;
44

55
.program-record-wrapper {
6-
color: $gray-700;
6+
color: var(--pgn-color-gray-700);
77

88
.alert-success {
99
@extend .alert-success;
@@ -48,7 +48,7 @@ $record-border-color: #C2C2C2;
4848
}
4949

5050
.btn {
51-
color: $black;
51+
color: var(--pgn-color-black);
5252
border: none;
5353
}
5454
}
@@ -100,7 +100,7 @@ $record-border-color: #C2C2C2;
100100
border: {
101101
top: none;
102102
right: none;
103-
bottom: 2px solid $table-border-color;
103+
bottom: 2px solid var(--pgn-color-table-border);
104104
left: none;
105105
};
106106
}
@@ -133,7 +133,7 @@ $record-border-color: #C2C2C2;
133133
.program-type {
134134
display: flex;
135135
align-items: center;
136-
color: $gray-500;
136+
color: var(--pgn-color-gray-500);
137137
}
138138

139139
.program-icon {

‎edx_credentials_themes/static/edx.org/base/sass/views/_records-list.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ $btn-blue: #0075b4;
33
$btn-blue-hover-light: #F2F8FB;
44

55
.paragraph-grey {
6-
color: $gray-700;
6+
color: var(--pgn-color-gray-700);
77
}
88

99
.certificate-icon {
@@ -17,7 +17,7 @@ $btn-blue-hover-light: #F2F8FB;
1717
}
1818

1919
.icon-fill {
20-
fill: $black;
20+
fill: var(--pgn-color-black);
2121

2222
&.micromasters {
2323
fill: $micromasters-color;
@@ -28,7 +28,7 @@ $btn-blue-hover-light: #F2F8FB;
2828
}
2929

3030
.text-black {
31-
color: $black;
31+
color: var(--pgn-color-black);
3232
}
3333

3434
.top-bar-link {
@@ -46,7 +46,7 @@ $btn-blue-hover-light: #F2F8FB;
4646
}
4747

4848
.view-record-container {
49-
color: $gray-700;
49+
color: var(--pgn-color-gray-700);
5050
height: 100%;
5151
width: 100%;
5252

‎edx_credentials_themes/static/edx.org/base/sass/views/certificate.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.certificate {
2-
background: $gray-100;
2+
background: var(--pgn-color-gray-100);
33

44
a {
5-
color: $info-700;
6-
text-decoration-color: $info-700;
5+
color: var(--pgn-color-info-700);
6+
text-decoration-color: var(--pgn-color-info-700);
77
}
88

99
.accomplishment-rendering {
10-
background-color: $white;
10+
background-color: var(--pgn-color-white);
1111
background-repeat: no-repeat;
1212
background-position: center 30px;
1313
background-size: 80% auto;

0 commit comments

Comments
 (0)