Skip to content

Commit 5a84d8c

Browse files
brian-smith-tcrildcoa
brian-smith-tcril
and
dcoa
authored
feat!: add design tokens support (#2187)
BREAKING CHANGE: Pre-design-tokens theming is no longer supported. Co-authored-by: Diana Olarte <[email protected]>
1 parent ac7f900 commit 5a84d8c

File tree

102 files changed

+1968
-731
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+1968
-731
lines changed

‎.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,5 @@ ENABLE_CHECKLIST_QUALITY=''
4545
ENABLE_GRADING_METHOD_IN_PROBLEMS=false
4646
# "Multi-level" blocks are unsupported in libraries
4747
LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
48+
# Fallback in local style files
49+
PARAGON_THEME_URLS={}

‎.env.development

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,5 @@ ENABLE_CHECKLIST_QUALITY=true
4848
ENABLE_GRADING_METHOD_IN_PROBLEMS=false
4949
# "Multi-level" blocks are unsupported in libraries
5050
LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
51+
# Fallback in local style files
52+
PARAGON_THEME_URLS={}

‎.env.test

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,4 @@ ENABLE_CHECKLIST_QUALITY=true
4141
ENABLE_GRADING_METHOD_IN_PROBLEMS=false
4242
# "Multi-level" blocks are unsupported in libraries
4343
LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
44+
PARAGON_THEME_URLS=

‎package-lock.json

Lines changed: 1479 additions & 242 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@edx/frontend-component-footer": "^14.9.0",
4949
"@edx/frontend-component-header": "^6.2.0",
5050
"@edx/frontend-enterprise-hotjar": "^7.2.0",
51-
"@edx/frontend-platform": "^8.3.1",
51+
"@edx/frontend-platform": "^8.4.0",
5252
"@edx/openedx-atlas": "^0.7.0",
5353
"@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
5454
"@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
@@ -62,7 +62,7 @@
6262
"@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
6363
"@openedx/frontend-build": "^14.5.0",
6464
"@openedx/frontend-plugin-framework": "^1.7.0",
65-
"@openedx/paragon": "^22.16.0",
65+
"@openedx/paragon": "^23.5.0",
6666
"@redux-devtools/extension": "^3.3.0",
6767
"@reduxjs/toolkit": "1.9.7",
6868
"@tanstack/react-query": "4.36.1",
@@ -110,7 +110,7 @@
110110
"@testing-library/jest-dom": "^6.6.3",
111111
"@testing-library/react": "^16.2.0",
112112
"@testing-library/user-event": "^13.2.1",
113-
"@types/lodash": "^4.17.7",
113+
"@types/lodash": "^4.17.17",
114114
"axios-mock-adapter": "1.22.0",
115115
"eslint-import-resolver-webpack": "^0.13.8",
116116
"fetch-mock-jest": "^1.5.1",

‎plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
@import "~@edx/brand/paragon/variables";
2-
@import "~@openedx/paragon/scss/core/utilities-only";
1+
@import "~@openedx/paragon/styles/scss/core/utilities-only";
32

43
.summary-radio {
54
display: flex;

‎src/advanced-settings/scss/AdvancedSettings.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
bottom: 0;
3333
width: 100%;
3434
padding: 0 .625rem;
35-
z-index: $zindex-modal;
35+
z-index: var(--pgn-elevation-modal-zindex);
3636
}
3737

3838
.alert-proctoring-error {
@@ -66,13 +66,13 @@
6666
.setting-sidebar-supplementary {
6767
.setting-sidebar-supplementary-about {
6868
.setting-sidebar-supplementary-about-title {
69-
font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
70-
color: $headings-color;
69+
font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
70+
color: var(--pgn-color-headings-base);
7171
margin-bottom: 1.25rem;
7272
}
7373

7474
.setting-sidebar-supplementary-about-descriptions {
75-
font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
75+
font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
7676
color: $text-color-base;
7777
}
7878
}
@@ -81,16 +81,16 @@
8181
list-style: none;
8282

8383
.setting-sidebar-supplementary-other-link {
84-
font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
84+
font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base);
8585
line-height: 1.5rem;
86-
color: $info-500;
86+
color: var(--pgn-color-info-500);
8787
margin-bottom: .5rem;
8888
}
8989
}
9090

9191
.setting-sidebar-supplementary-other-title {
92-
font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
93-
color: $headings-color;
92+
font: normal var(--pgn-typography-font-weight-bold) 1.125rem/1.5rem var(--pgn-typography-font-family-base);
93+
color: var(--pgn-color-headings-base);
9494
margin-bottom: 1.25rem;
9595
}
9696
}
@@ -102,7 +102,7 @@
102102
display: inline-block;
103103
margin-right: 5px;
104104
margin-bottom: 5px;
105-
color: $danger;
105+
color: var(--pgn-color-danger-base);
106106
}
107107

108108
.modal-error-item-title {
@@ -113,12 +113,12 @@
113113

114114
.modal-popup-content {
115115
max-width: 200px;
116-
color: $white;
117-
background-color: $black;
116+
color: var(--pgn-color-white);
117+
background-color: var(--pgn-color-black);
118118
filter: drop-shadow(0 2px 4px rgba(0 0 0 / .15));
119119
font-weight: 400;
120120
}
121121

122122
.pgn__modal-popup__arrow::after {
123-
border-top-color: $black;
123+
border-top-color: var(--pgn-color-black);
124124
}

‎src/advanced-settings/scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
$text-color-base: $gray-700;
1+
$text-color-base: var(--pgn-color-gray-700);

‎src/assets/scss/_form.scss

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
.form-group-custom {
22
.pgn__form-label {
3-
font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
4-
color: $gray-500;
3+
font: normal var(--pgn-typography-font-weight-bold) .75rem/1.25rem var(--pgn-typography-font-family-base);
4+
color: var(--pgn-color-gray-500);
55
margin-bottom: .5rem;
66
}
77

88
.pgn__form-control-description,
99
.pgn__form-text {
10-
font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
11-
color: $gray-500;
10+
font: normal var(--pgn-typography-font-weight-normal) .75rem/1.25rem var(--pgn-typography-font-family-base);
11+
color: var(--pgn-color-gray-500);
1212
margin-top: .5rem;
1313
}
1414

@@ -19,12 +19,12 @@
1919

2020
.form-group-custom_isInvalid {
2121
input {
22-
border-color: $form-feedback-invalid-color;
22+
border-color: var(--pgn-color-form-feedback-invalid);
2323
}
2424
}
2525

2626
.feedback-error {
27-
color: $form-feedback-invalid-color;
27+
color: var(--pgn-color-form-feedback-invalid);
2828
}
2929
}
3030

@@ -34,40 +34,40 @@
3434
.datepicker-custom-control {
3535
display: block;
3636
width: 100%;
37-
font-size: $input-font-size;
38-
font-weight: $input-font-weight;
39-
line-height: $input-line-height;
40-
background: $input-bg;
41-
border-color: $input-border-color;
42-
border-width: $input-border-width;
43-
box-shadow: $input-box-shadow;
44-
border-radius: $input-border-radius;
45-
color: $input-color;
46-
padding: $input-padding-y $input-padding-x;
47-
height: $input-height;
37+
font-size: var(--pgn-typography-form-input-font-size-base);
38+
font-weight: var(--pgn-typography-form-input-font-weight);
39+
line-height: var(--pgn-typography-form-input-line-height-base);
40+
background: var(--pgn-color-form-input-bg-base);
41+
border-color: var(--pgn-color-form-input-border);
42+
border-width: var(--pgn-size-form-input-width-border);
43+
box-shadow: var(--pgn-elevation-form-input-base);
44+
border-radius: var(--pgn-size-form-input-radius-border-base);
45+
color: var(--pgn-color-form-input-base);
46+
padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
47+
height: var(--pgn-size-form-input-height-base);
4848
resize: none;
4949

5050
&:focus,
5151
:focus-visible {
52-
color: $input-focus-color;
53-
background-color: $input-bg;
54-
border-color: $input-focus-border-color;
55-
box-shadow: $input-focus-box-shadow;
52+
color: var(--pgn-color-form-input-focus-base);
53+
background-color: var(--pgn-color-form-input-bg-base);
54+
border-color: var(--pgn-color-form-input-focus-border);
55+
box-shadow: var(--pgn-elevation-form-input-focus);
5656
outline: 0;
5757
}
5858

5959
&::placeholder {
60-
color: $input-placeholder-color;
60+
color: var(--pgn-color-form-input-placeholder);
6161
}
6262
}
6363

6464
.datepicker-custom-control_readonly {
6565
border-color: transparent;
66-
background: $input-disabled-bg;
66+
background: var(--pgn-color-form-input-bg-disabled);
6767
}
6868

6969
.datepicker-custom-control_isInvalid {
70-
border-color: $form-feedback-invalid-color;
70+
border-color: var(--pgn-color-form-feedback-invalid);
7171
}
7272

7373
.datepicker-custom-control-icon {
@@ -76,7 +76,7 @@
7676
right: 1.188rem;
7777
top: 50%;
7878
transform: translateY(-50%);
79-
color: $black;
79+
color: var(--pgn-color-black);
8080
}
8181
}
8282

‎src/assets/scss/_utilities.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.text-black {
2-
color: $black;
2+
color: var(--pgn-color-black);
33
}
44

55
.h-200px {

0 commit comments

Comments
 (0)