Skip to content

Commit add1dad

Browse files
dimitriehdimitrieh
committed
fix(frontend): migrate Sass variables to CSS custom properties for Tailwind v4
- Convert $ff-* Sass variables to var(--ff-*) CSS custom properties - Move design tokens to @theme inline block in index.css - Fix media queries to use literal pixel values (CSS vars not supported) - Add --ff-grey-500-20 opacity variant for rgba() replacement
1 parent 0222bf7 commit add1dad

File tree

117 files changed

+1045
-1013
lines changed

Some content is hidden

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

117 files changed

+1045
-1013
lines changed

‎frontend/src/components/ExpertButton.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default {
4343
/* Dual-background gradient border technique from flowfuse.com */
4444
.expert-button {
4545
background: linear-gradient(white, white) padding-box,
46-
linear-gradient(135deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
46+
linear-gradient(135deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
4747
border: 1px solid transparent;
4848
animation: gradient-border-rotate 4s linear infinite;
4949
@@ -56,47 +56,47 @@ export default {
5656
@keyframes gradient-border-rotate {
5757
0% {
5858
background: linear-gradient(white, white) padding-box,
59-
linear-gradient(0deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
59+
linear-gradient(0deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
6060
}
6161
10% {
6262
background: linear-gradient(white, white) padding-box,
63-
linear-gradient(36deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
63+
linear-gradient(36deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
6464
}
6565
20% {
6666
background: linear-gradient(white, white) padding-box,
67-
linear-gradient(72deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
67+
linear-gradient(72deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
6868
}
6969
30% {
7070
background: linear-gradient(white, white) padding-box,
71-
linear-gradient(108deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
71+
linear-gradient(108deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
7272
}
7373
40% {
7474
background: linear-gradient(white, white) padding-box,
75-
linear-gradient(144deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
75+
linear-gradient(144deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
7676
}
7777
50% {
7878
background: linear-gradient(white, white) padding-box,
79-
linear-gradient(180deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
79+
linear-gradient(180deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
8080
}
8181
60% {
8282
background: linear-gradient(white, white) padding-box,
83-
linear-gradient(216deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
83+
linear-gradient(216deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
8484
}
8585
70% {
8686
background: linear-gradient(white, white) padding-box,
87-
linear-gradient(252deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
87+
linear-gradient(252deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
8888
}
8989
80% {
9090
background: linear-gradient(white, white) padding-box,
91-
linear-gradient(288deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
91+
linear-gradient(288deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
9292
}
9393
90% {
9494
background: linear-gradient(white, white) padding-box,
95-
linear-gradient(324deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
95+
linear-gradient(324deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
9696
}
9797
100% {
9898
background: linear-gradient(white, white) padding-box,
99-
linear-gradient(360deg, $ff-red-600, #5048e5, $ff-red-600) border-box;
99+
linear-gradient(360deg, var(--ff-red-600), #5048e5, var(--ff-red-600)) border-box;
100100
}
101101
}
102102
</style>

‎frontend/src/components/FileUpload.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,31 +102,31 @@ export default {
102102
.ff-file-upload {
103103
width: 100%;
104104
display: flex;
105-
gap: $ff-unit-sm;
105+
gap: var(--ff-unit-sm);
106106
.ff-btn {
107107
flex-shrink: 0;
108108
}
109109
}
110110
.ff-file-upload--empty,
111111
.ff-file-upload--file {
112112
flex-grow: 1;
113-
border: 1px solid $ff-grey-300;
114-
padding: $ff-unit-sm $ff-unit-md;
115-
border-radius: $ff-unit-sm;
113+
border: 1px solid var(--ff-grey-300);
114+
padding: var(--ff-unit-sm) var(--ff-unit-md);
115+
border-radius: var(--ff-unit-sm);
116116
display: flex;
117117
align-items: center;
118-
gap: $ff-unit-sm;
118+
gap: var(--ff-unit-sm);
119119
white-space: nowrap;
120120
text-overflow: ellipsis;
121121
overflow-x: hidden;
122122
}
123123
.ff-file-upload--empty {
124-
color: $ff-grey-400;
124+
color: var(--ff-grey-400);
125125
}
126126
.ff-file-upload--clear {
127127
cursor: pointer;
128128
&:hover {
129-
color: $ff-blue-600;
129+
color: var(--ff-blue-600);
130130
}
131131
}
132132
</style>

‎frontend/src/components/IconLink.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ justify-content: space-between;
4646
align-items: center;
4747
position: relative;
4848
49-
border-radius: $ff-unit-sm;
50-
border: 1px solid $ff-grey-300;
49+
border-radius: var(--ff-unit-sm);
50+
border: 1px solid var(--ff-grey-300);
5151
5252
height: 28px;
53-
padding: $ff-unit-sm 5px;
53+
padding: var(--ff-unit-sm) 5px;
5454
55-
font-size: $ff-funit-sm;
55+
font-size: var(--ff-funit-sm);
5656
line-height: 20px;
5757
5858
svg {
@@ -61,13 +61,13 @@ svg {
6161
6262
&:hover {
6363
cursor: pointer;
64-
border-color: $ff-blue-600;
64+
border-color: var(--ff-blue-600);
6565
66-
color: $ff-blue-600;;
67-
background-color: $ff-grey-50;
66+
color: var(--ff-blue-600);;
67+
background-color: var(--ff-grey-50);
6868
6969
.ff-icon {
70-
color: $ff-blue-600;
70+
color: var(--ff-blue-600);
7171
}
7272
}
7373
}

‎frontend/src/components/NotificationsButton.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default {
4242
.notifications-button-wrapper {
4343
4444
.notifications-button {
45-
color: $ff-grey-800;
45+
color: var(--ff-grey-800);
4646
display: flex;
4747
align-items: center;
4848
flex: 1;
@@ -67,7 +67,7 @@ export default {
6767
&:hover {
6868
svg {
6969
will-change: transform ;
70-
color: $ff-indigo-600;
70+
color: var(--ff-indigo-600);
7171
transform: scale(1.25) translateZ(0); /* Using slight adjustments to whole values */
7272
backface-visibility: hidden;
7373
perspective: 1000px;
@@ -83,7 +83,7 @@ export default {
8383
position: absolute;
8484
font-size: 0.65rem;
8585
padding: 0 7px;
86-
background-color: $ff-red-500;
86+
background-color: var(--ff-red-500);
8787
}
8888
}
8989
}

‎frontend/src/components/TeamSelection.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export default {
144144
}
145145
.icon {
146146
svg {
147-
color: $ff-grey-800;
147+
color: var(--ff-grey-800);
148148
width: 80%;
149149
padding-left: 10px;
150150
}
@@ -153,9 +153,9 @@ export default {
153153
}
154154
}
155155
.ff-options .ff-team-selection-option {
156-
border-color: $ff-color--border;
157-
color: $ff-grey-800;
158-
border-bottom: 1px solid $ff-color--border;
156+
border-color: var(--ff-color-border);
157+
color: var(--ff-grey-800);
158+
border-bottom: 1px solid var(--ff-color-border);
159159
display: flex;
160160
align-items: center;
161161
@@ -167,7 +167,7 @@ export default {
167167
width: 100%;
168168
169169
&.selected {
170-
background: $ff-grey-200;
170+
background: var(--ff-grey-200);
171171
}
172172
173173
.ff-icon {

‎frontend/src/components/TeamTypeTile.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default {
101101
.ff-team-type-tile {
102102
position: relative;
103103
border-radius: 6px;
104-
border: 2px solid $ff-grey-300;
104+
border: 2px solid var(--ff-grey-300);
105105
background: white;
106106
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
107107
padding: 24px;
@@ -134,8 +134,8 @@ export default {
134134
// text-shadow: 0 1px 1px #111;
135135
border-top: 1px solid #363636;
136136
border-bottom: 1px solid #202020;
137-
background: $ff-red-500;
138-
// background: linear-gradient($ff-red-500 0%, $ff-red-700 100%);
137+
background: var(--ff-red-500);
138+
// background: linear-gradient(var(--ff-red-500) 0%, var(--ff-red-700) 100%);
139139
border-radius: 2px 2px 0 0;
140140
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
141141
}
@@ -149,7 +149,7 @@ export default {
149149
bottom: calc((-2 * var(--ribbon-overlap)) - 1px);
150150
z-index: -10;
151151
border: var(--ribbon-overlap) solid;
152-
border-color: $ff-red-900 transparent transparent transparent;
152+
border-color: var(--ff-red-900) transparent transparent transparent;
153153
}
154154
.trial-ribbon::before {left: 0;}
155155
.trial-ribbon::after {right: 0;}

‎frontend/src/components/TextCopier.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -109,23 +109,23 @@ export default {
109109
border-radius: 4px;
110110
cursor: pointer;
111111
transition: all 0.2s ease;
112-
color: $ff-grey-600;
112+
color: var(--ff-grey-600);
113113
114114
&:hover {
115-
color: $ff-indigo-600;
116-
background-color: $ff-indigo-50;
115+
color: var(--ff-indigo-600);
116+
background-color: var(--ff-indigo-50);
117117
}
118118
119119
&:active {
120-
background-color: $ff-indigo-100;
120+
background-color: var(--ff-indigo-100);
121121
}
122122
123123
.ff-icon {
124124
pointer-events: none;
125125
}
126126
127127
.ff-icon-check {
128-
color: $ff-green-600;
128+
color: var(--ff-green-600);
129129
}
130130
}
131131
.ff-copied {

‎frontend/src/components/bill-of-materials/DependencyItem.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,12 +122,12 @@ export default {
122122

123123
<style lang="scss">
124124
.dependency-item {
125-
border: 1px solid $ff-grey-300;
125+
border: 1px solid var(--ff-grey-300);
126126
margin-bottom: 12px;
127127
128128
.dependency-header {
129129
cursor: pointer;
130-
background: $ff-grey-100;
130+
background: var(--ff-grey-100);
131131
display: flex;
132132
padding: 6px 9px;
133133
align-items: center;
@@ -145,7 +145,7 @@ export default {
145145
}
146146
147147
p {
148-
color: $ff-grey-500;
148+
color: var(--ff-grey-50)0;
149149
font-weight: 400;
150150
font-size: 80%;
151151
}
@@ -164,7 +164,7 @@ export default {
164164
}
165165
166166
&.open {
167-
border-bottom: 1px solid $ff-grey-300;
167+
border-bottom: 1px solid var(--ff-grey-300);
168168
169169
.ff-toggle {
170170
transform: rotate(90deg);

‎frontend/src/components/bill-of-materials/InstancesItem.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export default {
5656
display: grid;
5757
grid-template-columns: repeat(6, 1fr);
5858
gap: 15px;
59-
background: $ff-grey-50;
60-
border-bottom: 1px solid $ff-grey-300;
59+
background: var(--ff-grey-50);
60+
border-bottom: 1px solid var(--ff-grey-300);
6161
justify-content: space-between;
6262
padding: 6px;
6363
align-items: center;

‎frontend/src/components/bill-of-materials/VersionsList.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,17 +90,17 @@ export default {
9090
button {
9191
display: grid;
9292
grid-template-columns: repeat(12, 1fr);
93-
background: $ff-white;
93+
background: var(--ff-white);
9494
gap: 15px;
9595
border: none;
96-
border-bottom: 1px solid $ff-grey-300;
96+
border-bottom: 1px solid var(--ff-grey-300);
9797
9898
.version {
9999
grid-column-start: 2;
100100
display: flex;
101101
justify-content: flex-start;
102102
span {
103-
color: $ff-black;
103+
color: var(--ff-black);
104104
font-weight: 500;
105105
}
106106
}
@@ -130,13 +130,13 @@ export default {
130130
gap: 15px;
131131
align-items: center;
132132
justify-content: center;
133-
color: $ff-grey-500;
133+
color: var(--ff-grey-50)0;
134134
line-height: 30px;
135135
cursor: pointer;
136136
transition: ease-in-out .3s;
137137
138138
&:hover {
139-
color: $ff-color--action
139+
color: var(--ff-color-action)
140140
}
141141
}
142142
}

0 commit comments

Comments
 (0)