TIDY UP: Sass files/clean up (#684)

## What's Changed? - Made all remaining `.css` files into `.scss` files - Deleted some blank `.css` files - Switched all `css` variables to `scss` variables and refactored base stylesheets accordingly - Switched all `@import` statements to `@use` statements - Switched (almost) all quotes in `scss` files to single quotes for the sake of consistency (except where this breaks things) closes #679 --------- Co-authored-by: loiswells97 <[email protected]> Co-authored-by: Lois Wells <[email protected]>
RaspberryPiFoundation · Oct 4, 2023 · 4af5e36 · 4af5e36
1 parent 4cf4e1c
commit 4af5e36
Show file tree

Hide file tree

Showing 55 changed files with 209 additions and 186 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Tidied up stylesheets (#684)
+
 ## [0.19.1]
 
 ### Fixed

diff --git a/src/App.scss b/src/App.scss
@@ -1,6 +1,6 @@
-@use "./tabs.scss";
-@use "./font-size" as *;
-@use "./colours.scss" as *;
+@use './tabs' as *;
+@use './font-size' as *;
+@use './colours' as *;
 
 a {
   border: 3px solid transparent;
@@ -20,8 +20,8 @@ button {
 }
 
 input {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
 }
 
@@ -56,8 +56,8 @@ input {
 #app {
   display: flex;
   flex-flow: column;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   @include font-size-1(regular);
 }

diff --git a/src/Modal.scss b/src/Modal.scss
@@ -1,7 +1,9 @@
 @use './spacing' as *;
 @use './font-size' as *;
-@import './colours.scss';
-@import './mixins.scss';
+@use './font-weight' as *;
+@use './line-height' as *;
+@use './colours' as *;
+@use './mixins' as *;
 
 .modal-overlay {
   display: flex;
@@ -23,7 +25,7 @@
   flex-direction: column;
 
   label, legend {
-    font-weight: var(--font-weight-bold);
+    font-weight: $font-weight-bold;
   }
 
   input[type=text] {
@@ -70,17 +72,17 @@
 .modal-content__subheading {
   @include font-size-1(regular);
   margin: 0;
-  font-weight: var(--font-weight-bold);
+  font-weight: $font-weight-bold;
 }
 
 .modal-content__text {
   margin: 0;
-  line-height: var(--line-height-regular);
+  line-height: $line-height-regular;
 }
 
 .modal-content__help-text {
   margin: $space-0-25 0;
-  font-weight: var(--font-weight-regular);
+  font-weight: $font-weight-regular;
 }
 
 .modal-content__inputs {

diff --git a/src/components/AstroPiModel/AstroPiModel.scss b/src/components/AstroPiModel/AstroPiModel.scss
@@ -1,6 +1,7 @@
-@use "../../spacing" as *;
-@use "../../font-size" as *;
-@import "../../colours.scss";
+@use '../../spacing' as *;
+@use '../../font-size' as *;
+@use '../../font-weight' as *;
+@use '../../colours' as *;
 
 .sense-hat {
   width: 100%;
@@ -40,7 +41,7 @@
         @include font-size-0-75(regular);
         flex: 1;
         text-transform: uppercase;
-        font-weight: var(--font-weight-bold);
+        font-weight: $font-weight-bold;
         margin: 0 $space-0-5;
       }
 
@@ -67,7 +68,7 @@
 
     &-heading {
       @include font-size-1(regular);
-      font-weight: var(--font-weight-base);
+      font-weight: $font-weight-regular;
       margin: 0;
       margin-bottom: $space-0-5;
     }
@@ -98,7 +99,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+          font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
             monospace;
 
           &-timer {
@@ -128,7 +129,7 @@
           transform: rotate(270deg);
         }
 
-        input[type="color"] {
+        input[type='color'] {
           border-radius: 5px;
           flex: 1;
           width: 100%;
@@ -192,15 +193,15 @@
 
       &-panel {
         &__control {
-          box-shadow: inset 0 0 var(--spacing-2) $rpf-grey-700;
+          box-shadow: inset 0 0 $space-3 $rpf-grey-700;
           background-color: $rpf-grey-700;
 
           &-reading {
             background-color: $rpf-grey-800;
             border: 1px solid $rpf-grey-500;
           }
 
-          input[type="color"] {
+          input[type='color'] {
             background-color: $rpf-grey-800;
             border: 1px solid $rpf-grey-500;
           }
@@ -246,15 +247,15 @@
 
       &-panel {
         &__control {
-          box-shadow: inset 0 0 var(--spacing-2) $rpf-grey-100;
+          box-shadow: inset 0 0 $space-3 $rpf-grey-100;
           background-color: $rpf-grey-50;
 
           &-reading {
             background-color: $rpf-grey-100;
             border: 2px solid $rpf-grey-300;
           }
 
-          input[type="color"] {
+          input[type='color'] {
             background-color: $rpf-white;
             border: 2px solid $rpf-grey-300;
           }

diff --git a/src/components/BetaBanner/BetaBanner.scss b/src/components/BetaBanner/BetaBanner.scss
@@ -1,5 +1,6 @@
-@use "../../spacing" as *;
-@import "../../colours.scss";
+@use '../../spacing' as *;
+@use '../../font-weight' as *;
+@use '../../colours' as *;
 
 .editor-banner {
   display: flex;
@@ -19,7 +20,7 @@
     padding: $space-0-25;
     border-radius: 8px;
     background-color: $rpf-teal-200;
-    font-weight: var(--font-weight-bold);
+    font-weight: $font-weight-bold;
     margin-right: $space-1-5;
   }
 }
@@ -30,7 +31,7 @@
 
 .editor-banner__link {
   display: inline;
-  font-weight: var(--font-weight-bold);
+  font-weight: $font-weight-bold;
   padding-left: 0;
   padding-right: 0;
   text-decoration: underline;

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -1,5 +1,6 @@
 @use '../../spacing' as *;
-@import '../../colours.scss';
+@use '../../font-weight' as *;
+@use '../../colours' as *;
 
 @mixin button-styling($bg, $active-bg, $dis-bg, $dis-c, $focus-bg, $hover-bg, $c: default) {
   background-color: $bg;
@@ -53,7 +54,7 @@
   display: inline-flex;
   font-family: sans-serif;
   font-size: inherit;
-  font-weight: var(--font-weight-bold);
+  font-weight: $font-weight-bold;
   gap: $space-0-5;
   justify-content: center;
   margin: 6px;

diff --git a/src/components/DesignSystemButton/DesignSystemButton.scss b/src/components/DesignSystemButton/DesignSystemButton.scss
@@ -1,4 +1,4 @@
-@use '../../colours.scss' as *;
+@use '../../colours' as *;
 
 :root * {
   --rpf-button-primary-background-color: #{$rpf-teal-primary-default};

diff --git a/src/components/Editor/DraggableTabs/DraggableTabs.scss b/src/components/Editor/DraggableTabs/DraggableTabs.scss
@@ -1,4 +1,4 @@
-@use "../../../colours" as *;
+@use '../../../colours' as *;
 @use '../../../spacing' as *;
 
 .draggable-tab {

diff --git a/src/components/Editor/Editor.js b/src/components/Editor/Editor.js
@@ -1,4 +1,3 @@
-// import './editor.css'
 import React, { useRef, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { update } from "./EditorSlice";

diff --git a/src/components/Editor/ImageUploadButton/ImageUploadButton.js b/src/components/Editor/ImageUploadButton/ImageUploadButton.js
@@ -1,4 +1,4 @@
-import "./ImageUploadButton.css";
+import "./ImageUploadButton.scss";
 
 import { useCallback, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

diff --git a/...r/ImageUploadButton/ImageUploadButton.css → .../ImageUploadButton/ImageUploadButton.scss b/...r/ImageUploadButton/ImageUploadButton.css → .../ImageUploadButton/ImageUploadButton.scss
@@ -1,3 +1,5 @@
+@use '../../../font-weight' as *;
+
 .dropzone-area {
     border: 1px dashed black;
     border-radius: 10px;
@@ -6,7 +8,7 @@
 }
 
 .dropzone-info {
-    font-weight: bold;
+    font-weight: $font-weight-bold;
 }
 
 .modal-footer {

diff --git a/src/components/Editor/Project/Project.scss b/src/components/Editor/Project/Project.scss
@@ -1,5 +1,5 @@
-@use "../../../spacing" as *;
-@use "../../../colours" as *;
+@use '../../../spacing' as *;
+@use '../../../colours' as *;
 
 .proj {
   display: flex;

diff --git a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.scss b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.scss
@@ -1,5 +1,5 @@
 @use '../../../../colours' as *;
-@import '../../../../mixins.scss';
+@use '../../../../mixins' as *;
 
 .htmlrunner-container {
   container-type: inline-size;

diff --git a/src/components/Editor/Runners/PythonRunner/OutputViewToggle.scss b/src/components/Editor/Runners/PythonRunner/OutputViewToggle.scss
@@ -1,5 +1,5 @@
 @use '../../../../spacing' as *;
-@import '../../../../colours.scss';
+@use '../../../../colours' as *;
 
 .output-view-toggle__button {
   height: 100%;

diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.scss b/src/components/Editor/Runners/PythonRunner/PythonRunner.scss
@@ -1,6 +1,6 @@
 @use '../../../../spacing' as *;
 @use '../../../../font-size' as *;
-@import '../../../../colours.scss';
+@use '../../../../colours' as *;
 
 .pythonrunner-container {
   display: flex;

diff --git a/src/components/EmbeddedViewer/EmbeddedViewer.scss b/src/components/EmbeddedViewer/EmbeddedViewer.scss
@@ -1,4 +1,4 @@
-@import '../../colours.scss';
+@use '../../colours' as *;
 
 .embedded-viewer {
   display: flex;

diff --git a/src/components/GlobalNav/GlobalNav.scss b/src/components/GlobalNav/GlobalNav.scss
@@ -1,6 +1,7 @@
 @use '../../spacing' as *;
-@import '../../colours.scss';
-@import '../../mixins.scss';
+@use '../../font-weight' as *;
+@use '../../colours' as *;
+@use '../../mixins' as *;
 
 .editor-global-nav-wrapper {
   flex: 0 1 auto;
@@ -45,7 +46,7 @@
     align-items: center;
     margin-left: $space-2;
     padding: $space-0-5 0;
-    font-weight: var(--font-weight-bold);
+    font-weight: $font-weight-bold;
     text-decoration: none;
     color: $rpf-white;
 

diff --git a/src/components/LandingPage/LandingPage.scss b/src/components/LandingPage/LandingPage.scss
@@ -1,7 +1,8 @@
-@use "../../spacing" as *;
-@use "../../font-size" as *;
-@import "../../colours.scss";
-@import "../../mixins.scss";
+@use '../../spacing' as *;
+@use '../../font-size' as *;
+@use '../../font-weight' as *;
+@use '../../colours' as *;
+@use '../../mixins' as *;
 
 .landing-page-wrapper {
   display: flex;
@@ -35,7 +36,7 @@
 
 .landing-page__projects--subtitle {
   @include font-size-1-5(regular);
-  font-weight: var(--font-weight-regular);
+  font-weight: $font-weight-regular;
   margin: $space-1;
 
   @media screen and (min-width: 375px) {
@@ -46,7 +47,7 @@
 .landing-page__projects--login {
   @include font-size-1-25(regular);
   button {
-    font-weight: var(--font-weight-bold);
+    font-weight: $font-weight-bold;
     padding: 0;
     text-decoration: underline;
   }
@@ -81,7 +82,7 @@
 
 .landing-page__paths--title {
   @include font-size-1-5(regular);
-  font-weight: var(--font-weight-bold);
+  font-weight: $font-weight-bold;
 }
 
 .landing-page__button * {
@@ -98,13 +99,13 @@
 
 .landing-page__paths--start {
   @include font-size-1-5(regular);
-  font-weight: var(--font-weight-bold);
+  font-weight: $font-weight-bold;
 }
 
 .landing-page__paths--description {
   @include font-size-1(regular);
   a {
-    font-weight: var(--font-weight-bold);
+    font-weight: $font-weight-bold;
   }
 }
 

diff --git a/src/components/Menus/ContextMenu/ContextMenu.scss b/src/components/Menus/ContextMenu/ContextMenu.scss
@@ -1,5 +1,5 @@
 @use '../../../spacing' as *;
-@import '../../../colours.scss';
+@use '../../../colours' as *;
 
 .context-menu__drop {
   display: flex;

diff --git a/src/components/Menus/Dropdown/Dropdown.scss b/src/components/Menus/Dropdown/Dropdown.scss
@@ -1,5 +1,6 @@
 @use '../../../spacing' as *;
-@import '../../../colours.scss';
+@use '../../../font-weight' as *;
+@use '../../../colours' as *;
 
 .dropdown {
   display: flex;
@@ -52,7 +53,7 @@
         cursor: pointer;
         font: inherit;
         justify-content: left;
-        font-weight: var(--font-weight-regular);
+        font-weight: $font-weight-regular;
         text-decoration: none;
         padding: $space-0-5 $space-0-25;
         border-radius: 5px;

diff --git a/src/components/Menus/FileMenu/FileMenu.scss b/src/components/Menus/FileMenu/FileMenu.scss
@@ -1,5 +1,5 @@
 @use '../../../spacing' as *;
-@import '../../../colours.scss';
+@use '../../../colours' as *;
 
 .file-menu__drop {
     display: flex;