Skip to content

Commit 10a0a9b

Browse files
shayan-derivshayan-deriv
authored
Merge pull request #112 from deriv-com/aizad/FEQ-1886/add-prefix-css-vars
Aizad/ FEQ-1886 / Add Prefix to Global CSS Variables
2 parents 2f83b0d + 9bc99e8 commit 10a0a9b

File tree

9 files changed

+382
-374
lines changed

9 files changed

+382
-374
lines changed

‎lib/components/Dropdown/Dropdown.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
pointer-events: none;
88

99
& label {
10-
color: var(--system-light-5-active-background, #999);
10+
color: var(--du-system-light-5-active-background, #999);
1111
}
1212
}
1313

@@ -24,7 +24,7 @@
2424
}
2525
&__content {
2626
width: 100%;
27-
background: var(--system-light-8-primary-background, #fff);
27+
background: var(--du-system-light-8-primary-background, #fff);
2828
display: flex;
2929
align-items: center;
3030

@@ -44,7 +44,7 @@
4444
outline: 0;
4545
font-size: 14px;
4646
background-color: transparent;
47-
color: var(--system-light-2-general-text, #333);
47+
color: var(--du-system-light-2-general-text, #333);
4848
transition: border-color 0.2s;
4949
cursor: unset;
5050
user-select: none;
@@ -84,7 +84,7 @@
8484
}
8585

8686
&__field:focus ~ &__label {
87-
color: var(--brand-blue, #85acb0);
87+
color: var(--du-brand-blue, #85acb0);
8888
}
8989

9090
&__items {
@@ -95,13 +95,13 @@
9595
align-items: flex-start;
9696
z-index: 2;
9797
border-radius: 4px;
98-
background: var(--system-light-8-primary-background, #fff);
98+
background: var(--du-system-light-8-primary-background, #fff);
9999
box-shadow: 0 32px 64px 0 rgba(14, 14, 14, 0.14);
100100
overflow-y: auto;
101101
width: 328px;
102102

103103
&--full {
104-
width: 100%;
104+
width: 100%;
105105
}
106106

107107
& > :first-child {
@@ -141,11 +141,11 @@
141141

142142
&:hover:not(&--active) {
143143
cursor: pointer;
144-
background: var(--system-light-6-hover-background, #e6e9e9);
144+
background: var(--du-system-light-6-hover-background, #e6e9e9);
145145
}
146146

147147
&--active {
148-
background: var(--system-light-5-active-background, #d6dadb);
148+
background: var(--du-system-light-5-active-background, #d6dadb);
149149
}
150150
}
151151
}

‎lib/components/LinearProgressBar/LinearProgressBar.scss

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
1-
$inactive_color: var(--general-main-3, #999999);
2-
$success_color: var(--status-success, #4bb4b3 );
3-
$warning_color: var(--status-warning, #ffad3a);
4-
$error_color: var(--status-danger, #ec3f3f);
5-
$active_color:var(--state-active, #d6dadb);
6-
$border_section:var(--border-divider, #f2f3f4);
7-
$state_hover:var(--general-hover, #e6e9e9);
8-
$BORDER_RADIUS:4px;
1+
$inactive_color: var(--du-general-main-3, #999999);
2+
$success_color: var(--du-status-success, #4bb4b3);
3+
$warning_color: var(--du-status-warning, #ffad3a);
4+
$error_color: var(--du-status-danger, #ec3f3f);
5+
$active_color: var(--du-state-active, #d6dadb);
6+
$border_section: var(--du-border-divider, #f2f3f4);
7+
$state_hover: var(--du-general-hover, #e6e9e9);
98

109
.deriv-linear-progress-bar {
1110
position: relative;
1211
width: 100%;
1312
padding: unset;
1413
box-sizing: border-box;
1514
margin: 8px 0;
16-
border-bottom: 1px solid $border_section ;
15+
border-bottom: 1px solid $border_section;
1716

1817
&__track {
1918
background: $inactive_color;
2019
position: relative;
2120
margin: 2px 0 8px;
2221
height: 6px;
2322
width: 100%;
24-
border-radius: #{$BORDER_RADIUS * 2};
23+
border-radius: $border-radius-2;
2524
}
2625

2726
&__line {
@@ -30,7 +29,7 @@ $BORDER_RADIUS:4px;
3029
top: 0;
3130
left: 0;
3231
height: 100%;
33-
border-radius: #{$BORDER_RADIUS * 2};
32+
border-radius: $border-radius-2;
3433
pointer-events: none;
3534
transition: width 0.3s;
3635

@@ -60,7 +59,7 @@ $BORDER_RADIUS:4px;
6059

6160
&:before,
6261
&:after {
63-
content: '';
62+
content: "";
6463
position: absolute;
6564
background-color: inherit;
6665
top: 0;
@@ -69,10 +68,12 @@ $BORDER_RADIUS:4px;
6968
will-change: left, right;
7069
}
7170
&:before {
72-
animation: skelton-loader 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
71+
animation: skelton-loader 2.1s
72+
cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
7373
}
7474
&:after {
75-
animation: skelton-loader-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
75+
animation: skelton-loader-short 2.1s
76+
cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
7677
animation-delay: 1.15s;
7778
}
7879
}

‎lib/components/Tabs/Tabs.scss

+8-8
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@
44
width: 100%;
55
&__btn {
66
display: inline-flex;
7-
gap: 0.8rem;
7+
gap: 8px;
88
align-items: center;
99
justify-content: center;
1010
width: 50%;
1111
border: none;
12-
border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
12+
border-bottom: 2px solid var(--du-light-7-secondary-background, #f2f3f4);
1313
background: none;
14-
padding: 1rem 0;
14+
padding: 10px 0;
1515
cursor: pointer;
1616
&--active {
1717
width: 50%;
1818
border: none;
19-
border-bottom: 0.2rem solid var(--brand-coral, #ff444f);
19+
border-bottom: 2px solid var(--du-brand-coral, #ff444f);
2020
background: none;
21-
padding: 1rem 0;
21+
padding: 10px 0;
2222
}
2323
}
2424
}
@@ -33,14 +33,14 @@
3333

3434
&__btn {
3535
display: inline-flex;
36-
gap: 0.8rem;
36+
gap: 8px;
3737
align-items: center;
3838
justify-content: center;
3939
width: 50%;
4040
border: none;
41-
border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
41+
border-bottom: 2px solid var(--du-light-7-secondary-background, #f2f3f4);
4242
background: none;
43-
padding: 0.5rem 0;
43+
padding: 5px 0;
4444
cursor: pointer;
4545
span {
4646
color: #999;

‎lib/components/Text/Text.scss

+16-32
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1+
// TODO: Refactor this file to use css variables
12
$color-map: (
2-
"general": #333333,
3-
"primary": #999999,
4-
"success": #4bb4b3,
5-
"warning": #ffad3a,
6-
"error": #ec3f3f,
7-
"white": #ffffff,
8-
"black": #000000,
9-
"less-prominent": #999999,
10-
"red": #ff444f,
11-
"blue": #377cfc,
12-
"green": #17eabd,
13-
"orange": #ff9c13,
14-
"system-dark-2-general-text": #c2c2c2,
3+
"prominent": var(--du-text-prominent),
4+
"less-prominent": var(--du-text-less-prominent, #999999),
5+
"general": var(--du-text-general, #333333),
6+
"primary": var(--du-text-primary, #999999),
7+
"success": var(--du-text-profit-success, #4bb4b3),
8+
"warning": var(--du-text-warning, #ffad3a),
9+
"error": var(--du-text-loss-danger, #ec3f3f),
10+
"red": var(--du-text-red, #ff444f),
11+
"blue": var(--du-text-info-blue, #377cfc),
12+
"green": var(--du-text-green, #17eabd),
1513
);
1614

1715
$desktop-font-size-map: (
@@ -116,18 +114,6 @@ $line-height-map: (
116114
"7xl": 36px,
117115
);
118116

119-
$font-weight-map: (
120-
light: 300,
121-
normal: 400,
122-
bold: 700,
123-
);
124-
125-
$font-align-map: (
126-
left: left,
127-
center: center,
128-
right: right,
129-
);
130-
131117
$font-style-map: (
132118
italic: italic,
133119
normal: normal,
@@ -142,16 +128,14 @@ $font-style-map: (
142128

143129
@each $size, $values in $desktop-font-size-map {
144130
&__size--#{$size} {
145-
@include desktop {
146-
font-size: map-get($values, size);
147-
line-height: map-get($values, line_height);
148-
}
131+
font-size: map-get($values, size);
132+
line-height: map-get($values, line_height);
149133
}
150134
}
151135

152136
@each $size, $values in $mobile-font-size-map {
153137
&__size--#{$size} {
154-
@include mobile-up {
138+
@include tablet-down {
155139
font-size: map-get($values, size);
156140
line-height: map-get($values, line_height);
157141
}
@@ -164,13 +148,13 @@ $font-style-map: (
164148
}
165149
}
166150

167-
@each $weight, $value in $font-weight-map {
151+
@each $weight, $value in $font-weights {
168152
&__weight--#{$weight} {
169153
font-weight: $value;
170154
}
171155
}
172156

173-
@each $align, $value in $font-align-map {
157+
@each $align, $value in $font-align {
174158
&__align--#{$align} {
175159
text-align: $value;
176160
}

‎lib/components/Text/index.tsx

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import React, { CSSProperties, ElementType, ReactNode } from "react";
22
import clsx from "clsx";
3-
43
import "./Text.scss";
54

5+
type TextColors =
6+
| "prominent"
7+
| "less-prominent"
8+
| "general"
9+
| "primary"
10+
| "success"
11+
| "warning"
12+
| "error"
13+
| "red"
14+
| "blue"
15+
| "green";
16+
617
type TGenericSizes =
718
| "2xl"
819
| "2xs"
@@ -21,18 +32,11 @@ export interface TextProps {
2132
align?: CSSProperties["textAlign"];
2233
as?: ElementType;
2334
children: ReactNode;
24-
color?:
25-
| CSSProperties["color"]
26-
| "error"
27-
| "general"
28-
| "less-prominent"
29-
| "primary"
30-
| "success"
31-
| "warning";
35+
color?: TextColors;
3236
fontStyle?: CSSProperties["fontStyle"];
3337
lineHeight?: TGenericSizes;
3438
size?: Exclude<TGenericSizes, "3xs" | "6xl" | "7xl">;
35-
weight?: CSSProperties["fontWeight"];
39+
weight?: Exclude<CSSProperties["fontWeight"], "bolder" | "lighter">;
3640
className?: string;
3741
}
3842

‎lib/components/ToggleSwitch/ToggleSwitch.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
position: absolute;
1818
inset: 0;
1919
cursor: pointer;
20-
background-color: var(--light-4-disabled-text, #d6d6d6);
20+
background-color: var(--du-light-4-disabled-text, #d6d6d6);
2121
transition: 0.4s;
2222
border-radius: 1.6rem;
2323

@@ -28,7 +28,7 @@
2828
width: 1.8rem;
2929
left: 0.3rem;
3030
bottom: 0.3rem;
31-
background-color: var(--system-dark-1-prominent-text, #fff);
31+
background-color: var(--du-system-dark-1-prominent-text, #fff);
3232
transition: 0.4s;
3333
border-radius: 50%;
3434

@@ -40,7 +40,7 @@
4040
}
4141

4242
.deriv-toggle-switch input:checked + .deriv-toggle-switch__slider {
43-
background-color: var(--light-status-success, #4bb4b3);
43+
background-color: var(--du-light-status-success, #4bb4b3);
4444
}
4545

4646
.deriv-toggle-switch input:checked + .deriv-toggle-switch__slider:before {

‎lib/styles/abstracts/_typography.scss

+6
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ $font-sizes: (
1414
"3xs": 6px,
1515
);
1616

17+
$font-align: (
18+
"left": left,
19+
"center": center,
20+
"right": right,
21+
);
22+
1723
$font-weights: (
1824
"bold": 700,
1925
"semibold": 500,

0 commit comments

Comments
 (0)