Skip to content

Commit 2164e45

Browse files
PKulkoRaccoonGangviktorrusakov
PKulkoRaccoonGang
and
viktorrusakov
committed
feat: remove SCSS variable usages in components (openedx#2137)
* feat: removed SCSS variable usages in components and other custom styles * feat: removed SCSS variable files in components * refactor: code refactoring * refactor: deleted old logic to search SCSS variables * refactor: refactoring variables and Anotation component * feat: added CSS hooks plus tokens for IconButton * refactor: refacoring IconButton component * refactor: some refactoring * feat: update replace-scss-vars script to handle interpolation expressions * feat: remove SCSS variables in docs site and start using custom media queries --------- Co-authored-by: Viktor Rusakov <[email protected]>
1 parent 98ec140 commit 2164e45

File tree

134 files changed

+4997
-4342
lines changed

Some content is hidden

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

134 files changed

+4997
-4342
lines changed

‎package-lock.json

+7-15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ActionRow/_index.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import "variables";
2-
31
.pgn__action-row {
42
display: flex;
53
flex-grow: 1;
@@ -11,7 +9,7 @@
119
}
1210

1311
& > * + * {
14-
margin-inline-start: $action-row-gap-x;
12+
margin-inline-start: var(--pgn-spacing-action-row-gap-x);
1513
}
1614
}
1715

@@ -27,7 +25,7 @@
2725
}
2826

2927
& > * + * {
30-
margin-bottom: $action-row-gap-y;
28+
margin-bottom: var(--pgn-spacing-action-row-gap-y);
3129
}
3230
}
3331

‎src/ActionRow/_variables.scss

-2
This file was deleted.

‎src/Alert/_variables.scss

-36
This file was deleted.

‎src/Alert/index.scss

+28-30
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import "variables";
2-
31
//
42
// Override Bootstrap's alert definition.
53
// We do this to get more control over colors
@@ -12,13 +10,13 @@
1210

1311
.alert {
1412
position: relative;
15-
padding: $alert-padding-y $alert-padding-x;
16-
margin-bottom: $alert-margin-bottom;
17-
border: $alert-border-width solid var(--pgn-alert-border-color, transparent);
13+
padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
14+
margin-bottom: var(--pgn-spacing-alert-margin-bottom);
15+
border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent);
1816
color: inherit;
1917
background-color: var(--pgn-alert-bg, transparent);
2018

21-
@include border-radius($alert-border-radius);
19+
@include border-radius(var(--pgn-size-alert-border-radius));
2220
@include pgn-box-shadow(1, "down");
2321

2422
.alert-message-content > :last-child {
@@ -28,7 +26,7 @@
2826
.alert-icon {
2927
color: var(--pgn-alert-icon-color, inherit);
3028
float: left;
31-
margin-inline-end: $alert-icon-space;
29+
margin-inline-end: var(--pgn-spacing-alert-icon-space);
3230
width: 1.5rem;
3331
height: 1.5rem;
3432
flex-shrink: 0;
@@ -37,17 +35,17 @@
3735

3836
// Headings for larger alerts
3937
.alert-heading {
40-
// Specified to prevent conflicts of changing $headings-color
41-
color: $alert-title-color;
38+
// Specified to prevent conflicts of changing var(--pgn-color-headings-base)
39+
color: var(--pgn-color-alert-title);
4240
display: flex;
4341
}
4442

4543
// added to align content and icon
4644
.alert-content {
4745
display: flex;
48-
font-size: $alert-font-size;
49-
line-height: $alert-line-height;
50-
color: $alert-content-color;
46+
font-size: var(--pgn-typography-alert-font-size);
47+
line-height: var(--pgn-typography-alert-line-height);
48+
color: var(--pgn-color-alert-content);
5149
text-align: start;
5250

5351
div {
@@ -57,7 +55,7 @@
5755

5856
// Provide class for links that match alerts
5957
.alert-link {
60-
font-weight: $alert-link-font-weight;
58+
font-weight: var(--pgn-typography-alert-font-weight-link);
6159
text-decoration: underline;
6260

6361
&:hover {
@@ -69,16 +67,16 @@
6967
//
7068
// Expand the right padding and account for the close button's positioning.
7169

72-
// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
70+
// Baking in $close-font-size: var(--pgn-typography-font-size-base) * 1.5 !default; to avoid any dependency
7371
.alert-dismissible {
74-
padding-right: calc((#{$font-size-base} * 1.5) + (#{$alert-padding-x} * 2));
72+
padding-right: calc((var(--pgn-typography-font-size-base) * 1.5) + (var(--pgn-spacing-alert-padding-x) * 2));
7573

7674
// Adjust close link position
7775
.close {
7876
position: absolute;
7977
top: 0;
8078
right: 0;
81-
padding: $alert-padding-y $alert-padding-x;
79+
padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
8280
color: inherit;
8381
}
8482
}
@@ -88,38 +86,38 @@
8886
align-items: center;
8987

9088
.pgn__alert-actions {
91-
margin-inline-start: $alert-actions-gap;
89+
margin-inline-start: var(--pgn-spacing-alert-actions-gap);
9290
}
9391
}
9492

9593
.pgn__alert-message-wrapper-stacked {
9694
.pgn__alert-actions {
97-
margin-top: $alert-actions-gap;
95+
margin-top: var(--pgn-spacing-alert-actions-gap);
9896
}
9997
}
10098

10199
// Alternate styles
102100

103101
.alert-success {
104-
--pgn-alert-bg: #{$alert-success-bg};
105-
--pgn-alert-border-color: #{$alert-success-border-color};
106-
--pgn-alert-icon-color: #{$alert-success-icon-color};
102+
--pgn-alert-bg: var(--pgn-color-alert-bg-success);
103+
--pgn-alert-border-color: var(--pgn-color-alert-border-success);
104+
--pgn-alert-icon-color: var(--pgn-color-alert-icon-success);
107105
}
108106

109107
.alert-info {
110-
--pgn-alert-bg: #{$alert-info-bg};
111-
--pgn-alert-border-color: #{$alert-info-border-color};
112-
--pgn-alert-icon-color: #{$alert-info-icon-color};
108+
--pgn-alert-bg: var(--pgn-color-alert-bg-info);
109+
--pgn-alert-border-color: var(--pgn-color-alert-border-info);
110+
--pgn-alert-icon-color: var(--pgn-color-alert-icon-info);
113111
}
114112

115113
.alert-danger {
116-
--pgn-alert-bg: #{$alert-danger-bg};
117-
--pgn-alert-border-color: #{$alert-danger-border-color};
118-
--pgn-alert-icon-color: #{$alert-danger-icon-color};
114+
--pgn-alert-bg: var(--pgn-color-alert-bg-danger);
115+
--pgn-alert-border-color: var(--pgn-color-alert-border-danger);
116+
--pgn-alert-icon-color: var(--pgn-color-alert-icon-danger);
119117
}
120118

121119
.alert-warning {
122-
--pgn-alert-bg: #{$alert-warning-bg};
123-
--pgn-alert-border-color: #{$alert-warning-border-color};
124-
--pgn-alert-icon-color: #{$alert-warning-icon-color};
120+
--pgn-alert-bg: var(--pgn-color-alert-bg-warning);
121+
--pgn-alert-border-color: var(--pgn-color-alert-border-warning);
122+
--pgn-alert-icon-color: var(--pgn-color-alert-icon-warning);
125123
}

‎src/Annotation/_mixins.scss

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@mixin annotation-triangle($triangle-color, $triangle-direction) {
2+
content: "";
3+
height: 0;
4+
width: 0;
5+
position: absolute;
6+
border: solid transparent;
7+
8+
@if $triangle-direction == top {
9+
border-bottom-color: $triangle-color;
10+
border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width);
11+
right: 0;
12+
left: 0;
13+
top: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
14+
margin: 0 auto;
15+
}
16+
17+
@else if $triangle-direction == right {
18+
border-left-color: $triangle-color;
19+
border-width:
20+
var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width)
21+
var(--pgn-size-annotation-arrow-border-width);
22+
top: 0;
23+
bottom: 0;
24+
right: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
25+
margin: auto 0;
26+
}
27+
28+
@else if $triangle-direction == bottom {
29+
border-top-color: $triangle-color;
30+
border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0;
31+
right: 0;
32+
left: 0;
33+
bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
34+
margin: 0 auto;
35+
}
36+
37+
@else if $triangle-direction == left {
38+
border-right-color: $triangle-color;
39+
border-width:
40+
var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width)
41+
var(--pgn-size-annotation-arrow-border-width) 0;
42+
top: 0;
43+
bottom: 0;
44+
left: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
45+
margin: auto 0;
46+
}
47+
48+
@else {
49+
@error "Unknown direction #{$triangle-direction}.";
50+
}
51+
}
52+
53+
@mixin annotation-variant($bg-color, $text-color, $direction) {
54+
background-color: $bg-color;
55+
color: $text-color;
56+
57+
// set additional margin to arrow side of the Annotation
58+
margin-#{$direction}:
59+
calc(
60+
var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
61+
);
62+
63+
[dir="rtl"] & {
64+
@if $direction == left {
65+
margin-left: 0;
66+
margin-right:
67+
calc(
68+
var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
69+
);
70+
}
71+
72+
@else if $direction == right {
73+
margin-right: 0;
74+
margin-left:
75+
calc(
76+
var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
77+
);
78+
}
79+
}
80+
81+
&::after {
82+
@include annotation-triangle($bg-color, $direction);
83+
84+
[dir="rtl"] & {
85+
@if $direction == left {
86+
left: initial;
87+
right: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
88+
border-width:
89+
var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width)
90+
var(--pgn-size-annotation-arrow-border-width);
91+
border-left-color: $bg-color;
92+
}
93+
94+
@else if $direction == right {
95+
right: initial;
96+
left: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
97+
border-width:
98+
var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width)
99+
var(--pgn-size-annotation-arrow-border-width) 0;
100+
border-right-color: $bg-color;
101+
}
102+
}
103+
}
104+
}

0 commit comments

Comments
 (0)