Andal.LND/frontend-app-learner-dashboard
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat!: add design tokens support (#665)

Browse Source 
BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

Co-authored-by: Diana Olarte <diana.olarte@edunext.co>
This commit is contained in:
Brian Smith
2025-06-18 15:05:17 -04:00
committed by GitHub
parent 75865290bf
commit 2e59e24876
12 changed files with 2169 additions and 915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.scss
View File

@@ -1,13 +1,10 @@
// frontend-app-*/src/index.scss
@import "~@edx/brand/paragon/fonts";
@import "~@edx/brand/paragon/variables";
@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
@import "~@edx/frontend-component-header/dist/index";
@import "~@edx/frontend-component-footer/dist/_footer";

10
src/containers/CourseCard/CourseCard.scss
View File

@@ -1,10 +1,8 @@
@import "@openedx/paragon/scss/core/core";
.course-card {
.card {
.pgn__card-wrapper-image-cap.vertical {
display: flex;
min-height: $card-image-vertical-max-height;
min-height: var(--pgn-size-card-image-vertical-max-height);
}
.pgn__card-image-cap {
border-bottom-left-radius: 0 !important;
@@ -53,11 +51,11 @@
> .alert {
border-radius: 0;
box-shadow: none;
padding: map-get($spacers, 3) map-get($spacers, 4);
padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
&:last-of-type {
border-bottom-left-radius: $alert-border-radius;
border-bottom-right-radius: $alert-border-radius;
border-bottom-left-radius: var(--pgn-size-alert-border-radius);
border-bottom-right-radius: var(--pgn-size-alert-border-radius);
}
}

6
src/containers/CourseCard/components/CourseCardDetails/index.scss
View File

@@ -1,7 +1,3 @@
@import "~@edx/brand/paragon/variables";
@import "~@openedx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";
a.course-card-title {
color: $black;
color: var(--pgn-color-black);
}

12
src/containers/CoursesPanel/NoCoursesView/index.scss
View File

@@ -1,15 +1,13 @@
@import "@openedx/paragon/scss/core/core";
#no-courses-content-view {
border: 2px solid $light-400;
border: 2px solid var(--pgn-color-light-400);
flex-direction: column;
padding-bottom: map-get($spacers, 5);
padding-top: map-get($spacers, 5);
padding-bottom: var(--pgn-spacing-spacer-5);
padding-top: var(--pgn-spacing-spacer-5);
height: 100%;
& > * {
margin-top: map-get($spacers, 3);
margin-bottom: map-get($spacers, 3);
margin-top: var(--pgn-spacing-spacer-3);
margin-bottom: var(--pgn-spacing-spacer-3);
}
}

12
src/containers/CoursesPanel/index.scss
View File

@@ -1,5 +1,3 @@
@import "@openedx/paragon/scss/core/core";
.course-list-heading-container {
display: flex;
flex-direction: row;
@@ -8,8 +6,8 @@
}
.course-list-title {
font-size: $h2-font-size;
margin: map-get($spacers, 3) 0;
font-size: var(--pgn-typography-font-size-h2-base);
margin: var(--pgn-spacing-spacer-3) 0;
}
.course-list-loading {
@@ -24,7 +22,7 @@
align-self: center;
}
@include media-breakpoint-down(md) {
@media (--pgn-size-breakpoint-max-width-md) {
.course-list-heading-container {
flex-direction: column-reverse;
align-items: flex-start;
@@ -36,7 +34,7 @@
}
.course-list-title {
font-size: $h3-font-size;
margin: map-get($spacers, 2) 0;
font-size: var(--pgn-typography-font-size-h3-base);
margin: var(--pgn-spacing-spacer-2) 0;
}
}

18
src/containers/Dashboard/index.scss
View File

@@ -1,29 +1,27 @@
@import "@openedx/paragon/scss/core/core";
.course-list-column {
padding: 0 map-get($spacers, 4);
padding: 0 var(--pgn-spacing-spacer-4);
}
.sidebar-column {
padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
padding: 0 var(--pgn-spacing-spacer-3) 0 var(--pgn-spacing-spacer-1);
&.not-collapsed {
padding-top: map-get($spacers, 2);
padding-top: var(--pgn-spacing-spacer-2);
& >:first-child {
margin-top: map-get($spacers, 5\.5);
margin-top: var(--pgn-spacing-spacer-5-5);
}
}
}
@include media-breakpoint-down(lg) {
@media (--pgn-size-breakpoint-max-width-lg) {
.sidebar-column {
// grid are inheriting dir="ltr" from the body, so we need to override it
[dir=ltr] & {
padding: 0 map-get($spacers, 3);
padding: 0 var(--pgn-spacing-spacer-3);
}
[dir=rtl] & {
padding: 0 map-get($spacers, 3);
padding: 0 var(--pgn-spacing-spacer-3);
}
}
}
}

22
src/containers/MasqueradeBar/index.scss
View File

@@ -1,38 +1,36 @@
@import "@openedx/paragon/scss/core/core";
.masquerade-bar {
display: flex;
align-items: flex-start;
padding: map-get($spacers, 3);
margin-bottom: map-get($spacers, 2);
padding: var(--pgn-spacing-spacer-3);
margin-bottom: var(--pgn-spacing-spacer-2);
.masquerade-form-label {
padding: map-get($spacers, 2) map-get($spacers, 3);
padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
display: flex;
align-items: center;
margin-bottom: 0;
white-space: nowrap;
&>.pgn__icon {
margin-right: map-get($spacers, 3);
margin-right: var(--pgn-spacing-spacer-3);
}
}
.masquerade-form-input {
margin-bottom: 0;
flex-grow: 1;
max-width: map-get($grid-breakpoints, 'md');
max-width: var(--pgn-size-breakpoint-md);
}
.masquerade-chip {
padding: map-get($spacers, 2) map-get($spacers, 3);
font-size: $font-size-base;
padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
font-size: var(--pgn-typography-font-size-base);
}
}
@include media-breakpoint-down(md) {
@media (--pgn-size-breakpoint-max-width-md) {
.masquerade-bar {
margin: auto;
padding: map-get($spacers, 3) map-get($spacers, 4);
padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
}
}
}