Skip to content

Commit

Permalink
refactor(cxl-ui): clear typography style overrides
Browse files Browse the repository at this point in the history
  • Loading branch information
freudFlintstone committed Sep 29, 2023
1 parent 5a54075 commit 24ead3f
Show file tree
Hide file tree
Showing 12 changed files with 14 additions and 120 deletions.
62 changes: 0 additions & 62 deletions packages/cxl-lumo-styles/scss/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,65 +43,3 @@
max-width: $max-width;
}
}

/*
* Typography Styles mixins
*/

@mixin light {
font-weight: 300;
}

@mixin regular {
font-weight: 400;
}

@mixin bold {
font-weight: 900;
}

@mixin italic {
font-style: italic;
}

@mixin label {
font-size: var(--lumo-font-size-s);
line-height: var(--cxl-lumo-line-height-m); // closest
}

@mixin title {
@extend bold;
font-size: var(--lumo-font-size-xxxl);
line-height: var(--cxl-lumo-line-height-xs);
}

@mixin subtitle {
@extend light;
font-size: var(--lumo-font-size-xxl);
line-height: var(--cxl-lumo-line-height-xs); // same as 35px, closest value to target (36px)
}

@mixin heading-2 {
@extend bold;
font-size: calc(2 * var(--lumo-font-size-xxs));
line-height: var(--cxl-lumo-line-height-s); // closest
}

@mixin heading-4 {
@extend bold;
font-size: var(--lumo-font-size-l);
line-height: var(--cxl-lumo-line-height-s); // closest
}

@mixin component-text {
@extend regular;
font-size: var(--lumo-font-size-m);
line-height: var(--cxl-lumo-line-height-m);
}

@mixin body-text {
@extend regular;
font-family: var(cxl-lumo-font-secondary);
font-size: var(--lumo-font-size-m);
line-height: var(--cxl-lumo-line-height-l);
}
7 changes: 4 additions & 3 deletions packages/cxl-lumo-styles/scss/typography.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* stylelint-disable selector-no-qualifying-type */
@use "./icons";
@use "./mq";
@use "./mixins";
Expand Down Expand Up @@ -48,16 +49,16 @@ h4,
h5,
h6 {
font-weight: 700;
line-height: var(--cxl-lumo-line-height-xs);
word-break: break-word;
line-height: var(--lumo-line-height-xs);
}

h1 {
margin-top: 0;
margin-bottom: 0.75em;
font-size: var(--cxl-lumo-font-size-hero);
line-height: calc(var(--cxl-lumo-line-height-xl) / 2);
font-weight: 900;
line-height: calc(var(--cxl-lumo-line-height-xl) / 2);
b,
strong {
font-weight: inherit;
Expand All @@ -71,6 +72,7 @@ h2 {
&.wp-block-heading {
&.no-separator {
&::after {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
Expand Down Expand Up @@ -122,7 +124,6 @@ h2 {
background: var(--lumo-contrast-20pct);
}
}

}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/cxl-ui/scss/cxl-base-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ header {
font-size: var(--lumo-font-size-xl);
font-style: normal;
font-weight: 700;
line-height: var(--lumo-line-height-xs);
line-height: var(--cxl-lumo-line-height-xs);
}

.attributes {
Expand Down
6 changes: 3 additions & 3 deletions packages/cxl-ui/scss/cxl-course-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ header .name {

.content-wrapper {
height: 100%;
min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights
line-height: var(--lumo-line-height-s);
min-height: calc(var(--cxl-lumo-line-height-s) * 6); // Six standard line-heights
line-height: var(--cxl-lumo-line-height-s);

.content {
@include mixins.ellipsis-for-lines(5);
Expand Down Expand Up @@ -73,7 +73,7 @@ footer {
&::part(content) {
padding-bottom: 0;
font-size: var(--lumo-font-size-s);
line-height: var(--lumo-line-height-s);
line-height: var(--cxl-lumo-line-height-s);
}
}

Expand Down
27 changes: 2 additions & 25 deletions packages/cxl-ui/scss/cxl-dashboard-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,33 +45,10 @@
}
}

.icon-bell {
position: relative;
margin-right: 14px;

&::after {
position: absolute;
top: 4px;
right: -7px;
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
font-size: 8px;
font-weight: 700;
color: var(--lumo-tint);
content: attr(count);
background-color: var(--lumo-primary-color);
border: 2px solid var(--cxl-color-dark-gray);
border-radius: 100%;
}
}

.title {
margin: 0;
font-size: var(--lumo-font-size-xxxl);
line-height: 1.4;
// font-size: var(--lumo-font-size-xxxl);
// line-height: 1.4;
}

.content {
Expand Down
1 change: 0 additions & 1 deletion packages/cxl-ui/scss/cxl-dashboard-notification.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@
height: 12px;
font-size: 8px;
font-weight: 700;
line-height: normal;
color: var(--lumo-tint);
content: attr(count);
background-color: var(--lumo-primary-color);
Expand Down
2 changes: 1 addition & 1 deletion packages/cxl-ui/scss/cxl-like-or-dislike.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

span {
margin-left: var(--lumo-space-s);
line-height: var(--lumo-line-height-xs);
line-height: var(--cxl-lumo-line-height-xs);
}
}

Expand Down
4 changes: 0 additions & 4 deletions packages/cxl-ui/scss/global/cxl-card.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
cxl-card {
p {
font-family: inherit;
}

.entry-header {
.thumbnail {
margin: 0 auto;
Expand Down
4 changes: 0 additions & 4 deletions packages/cxl-ui/scss/global/cxl-course-dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,6 @@ vaadin-dialog-overlay[theme="cxl-course-dialog"] {
max-width: 75%;
padding-bottom: var(--lumo-space-l);
margin: 0 auto;

p {
font-family: var(--cxl-lumo-font-secondary);
}
}

.content-tags {
Expand Down
1 change: 0 additions & 1 deletion packages/cxl-ui/scss/global/cxl-playbook-accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ cxl-playbook-accordion {
.entry-title {
margin-top: 0.5em; /* match h3 */
margin-right: var(--lumo-space-m);
font-size: var(--lumo-font-size-m);
}

> vaadin-checkbox {
Expand Down
16 changes: 2 additions & 14 deletions packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ cxl-vaadin-accordion {
--vaadin-icon-width: var(--vaadin-icon-height);
}

p {
font-family: inherit;
}

.entry {
//mixin affects: .entry-header > label
@include mixins.label-contrast("> .entry-header") {
Expand Down Expand Up @@ -43,7 +39,7 @@ cxl-vaadin-accordion {

.entry-title {
flex: 1;
height: calc(var(--lumo-line-height-xs) * 4em);
height: calc(var(--cxl-lumo-line-height-xs) * 4em);
font-size: var(--lumo-font-size-xl);
word-break: break-word;
}
Expand Down Expand Up @@ -96,10 +92,6 @@ cxl-vaadin-accordion {
* Theme "cxl-minidegree-course".
*/
&[theme~="cxl-minidegree-course"] {
p {
font-family: inherit;
}

.entry-header {
display: grid;
grid-column-gap: var(--lumo-space-m);
Expand Down Expand Up @@ -156,10 +148,6 @@ cxl-vaadin-accordion {
--vaadin-icon-width: var(--vaadin-icon-height);
}

p {
font-family: inherit;
}

.entry {
@include mixins.label-contrast("> .entry-header") {
flex-basis: 100%;
Expand Down Expand Up @@ -216,7 +204,7 @@ cxl-vaadin-accordion {
flex: 1;
flex-basis: auto;
/* stylelint-disable-next-line declaration-no-important */
height: calc(var(--lumo-line-height-xs) * 3em) !important;
height: calc(var(--cxl-lumo-line-height-xs) * 3em) !important;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion packages/cxl-ui/scss/jw-player/chapter.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
padding: var(--lumo-space-s) 0;
margin-bottom: var(--lumo-space-s);
font-size: var(--lumo-font-size-s);
line-height: var(--lumo-line-height-xs);
line-height: var(--cxl-lumo-line-height-xs);
cursor: pointer;
}

Expand Down

0 comments on commit 24ead3f

Please sign in to comment.