refactor: reduce project bar size

src/assets/stylesheets/InternalStyles.scss

@@ -48,7 +48,7 @@
 
 .--light {
   // Theme colours
-  --editor-color-layer-1: var(--rpf-teal-100);
+  --editor-color-layer-1: var(--rpf-grey-50);
   --editor-color-layer-2: var(--rpf-white);
   --editor-color-layer-3: var(--rpf-white);
   --editor-color-outline: var(--rpf-grey-150);
@@ -114,6 +114,7 @@
 
   // Form controls
   --rpf-input-background-color: var(--editor-color-layer-3);
+  --rpf-input-background-color-readonly: var(--rpf-grey-600);
   --rpf-input-border-colour: var(--editor-color-text);
   --rpf-input-color: var(--editor-color-text);
   --rpf-input-outline-color: var(--editor-color-theme);

src/assets/stylesheets/OfflineIndicator.scss

@@ -1,19 +1,16 @@
-@use "./rpf_design_system/colours" as *;
-@use "./rpf_design_system/spacing" as *;
-
 .offline-badge {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: $space-0-5;
-  padding-inline: $space-0-5;
-  padding-block: $space-0-5;
+  gap: var(--space-1);
+  padding-inline: var(--space-1);
+  padding-block: var(--space-0-5);
   border-radius: 100vw;
-  border: 3px solid $rpf-red-400;
-  color: $rpf-red-900;
+  border: 3px solid var(--rpf-red-400);
+  color: var(--rpf-red-900);
   white-space: nowrap;
   cursor: default;
-  background-color: $rpf-red-100;
+  background-color: var(--rpf-red-100);
   font-weight: bold;
 
   svg {
@@ -22,13 +19,13 @@
 
   &__tooltip {
     position: absolute;
-    inset-block-start: calc(100% + $space-1);
+    inset-block-start: calc(100% + var(--space-2));
     inset-inline-end: 0;
     inline-size: 12rem;
-    padding: $space-1;
-    border-radius: $space-0-5;
-    background: #1d1d1d;
-    color: #fff;
+    padding: var(--space-2);
+    border-radius: var(--space-1);
+    background: var(--rpf-black);
+    color: var(--rpf-white);
     font-size: 1rem;
     white-space: normal;
     opacity: 0;
@@ -46,14 +43,14 @@
       block-size: 0;
       border-inline-start: 8px solid transparent;
       border-inline-end: 8px solid transparent;
-      border-block-end: 8px solid #1d1d1d;
+      border-block-end: 8px solid var(--rpf-black);
     }
 
     p {
       margin: 0;
 
       & + p {
-        margin-block-start: $space-1-5;
+        margin-block-start: var(--space-2);
       }
     }
   }

src/assets/stylesheets/ProjectBar.scss

@@ -1,110 +1,33 @@
-@use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/colours" as *;
-
 .project-bar {
+  padding: var(--space-0-5) var(--space-1);
+
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 var(--space-1);
+  justify-content: space-between;
   z-index: 1;
   container-type: inline-size;
   background-color: var(--editor-color-layer-3);
   border-block-end: 1px solid var(--editor-color-outline);
   border-inline-start: 1px solid var(--editor-color-outline);
   border-block-start: 1px solid var(--editor-color-outline);
-  border-start-start-radius: $space-0-5;
-
-  @container (max-width: 367px) {
-    flex-direction: column;
-    block-size: fit-content;
-    justify-content: left;
-  }
-
-  .rpf-button {
-    border-radius: var(--project-bar-button-radius, $space-0-5);
-    &:hover,
-    &:active,
-    &:focus-visible,
-    &::before {
-      border-radius: var(--project-bar-button-radius, $space-0-5);
-    }
-  }
+  border-start-start-radius: var(--border-radius);
 
-  .btn--save {
-    @container (min-width: 560px) {
-      .icon {
-        display: none;
-      }
-    }
-  }
-
-  .project-name {
-    border-inline-end: 1px solid var(--editor-color-outline);
-    margin-inline-end: -1px;
-    min-inline-size: 0px;
-
-    @container (max-width: 365px) {
-      inline-size: 100%;
-      box-sizing: border-box;
-      border-inline-end: none;
-    }
-  }
-
-  .project-bar__btn-wrapper {
-    display: flex;
-    block-size: 100%;
-  }
-
-  .project-bar__btn-wrapper:not(:last-child) {
-    border-inline-end: 1px solid var(--editor-color-outline);
+  * {
+    box-sizing: border-box;
   }
 
   &.scratch-project-bar {
-    border-end-start-radius: $space-0-5;
+    border-end-start-radius: var(--border-radius);
   }
 }
 
 .project-bar__right {
-  border-inline-start: 1px solid var(--editor-color-outline);
-  margin-inline-start: auto;
   display: flex;
   align-items: center;
-  block-size: 100%;
-  flex-shrink: 0;
-  max-inline-size: 55%;
-
-  @container (max-width: 365px) {
-    margin-inline-start: 0;
-    border-inline-start: none;
-    border-block-start: 1px solid var(--editor-color-outline);
-    block-size: fit-content;
-    inline-size: 100%;
-    max-inline-size: 100%;
-
-    .save-status {
-      flex: 1;
-      justify-content: center;
-    }
-  }
-}
-
-.project-bar__btn {
-  border-radius: $space-0-5;
-  justify-content: center;
-
-  margin: $space-0-5;
-  gap: $space-0-5;
-
-  .text {
-    display: none;
-  }
-
-  &:hover & {
-    border-radius: inherit;
-  }
+  gap: 0;
 
   @container (min-width: 560px) {
-    .text {
-      min-inline-size: auto;
-      display: block;
-    }
+    gap: 0 var(--space-1);
   }
 }

src/assets/stylesheets/ProjectName.scss

@@ -1,73 +1,76 @@
-@use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/font-size" as *;
-@use "./rpf_design_system/font-weight" as *;
-@use "./rpf_design_system/colours" as *;
+@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as
+  typography;
 
 .project-name {
-  align-items: center;
   display: flex;
-  block-size: 100%;
-  padding-inline-start: $space-0-5;
+  align-items: center;
+  flex: 1 1 calc(5rem + var(--min-target-size));
+  min-block-size: var(--min-target-size);
+  min-inline-size: calc(5rem + var(--min-target-size));
+  max-inline-size: 16em;
+}
+
+.project-name__value {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.project-name__title,
+.project-name__input {
+  @include typography.style-1;
+  box-sizing: border-box;
+
+  min-block-size: var(--sm-target-size);
+  inline-size: 100%;
+  padding: var(--space-0-5) var(--space-1);
+  border-radius: var(--border-radius);
 }
 
 .project-name__title {
-  @include font-size-1-25(bold);
-  font-weight: $font-weight-bold;
-  margin-block: $space-1;
-  margin-inline-start: $space-0-5;
-  margin-inline-end: $space-1;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
+  align-self: center;
+  border: 2px solid var(--rpf-grey-50);
+  background-color: var(--rpf-grey-50);
+}
+
+.project-name__action {
+  flex: none;
 }
 
 .project-name__label {
-  @include font-size-1(regular);
-  font-weight: $font-weight-bold;
-  margin-block-end: $space-0-5;
+  @include typography.style-1;
   display: block;
 }
 
 .project-name__input {
-  @include font-size-1(regular);
-  padding: 0 $space-1-5;
-  block-size: $space-3;
-  border-radius: $space-0-5;
-  border: none;
-  color: inherit;
-  background-color: inherit;
-  text-overflow: ellipsis;
-  inline-size: 100%;
-}
-
-.project-name__button {
-  margin: $space-0-5;
+  outline: none;
 
-  svg {
-    block-size: $space-1-5;
-    inline-size: $space-1-5;
-    margin: 0;
-  }
+  background-color: inherit;
+  border: 2px solid var(--rpf-text-primary);
 }
 
 .--dark {
   .project-name__input {
-    background-color: $rpf-grey-600;
-
     &:focus-visible {
-      background-color: inherit;
-      outline: 2px solid $rpf-white;
+      outline: 2px solid var(--editor-focus-color);
     }
   }
 }
 
 .--light {
   .project-name__input {
-    background-color: $rpf-grey-50;
-
     &:focus-visible {
       background-color: inherit;
-      outline: 2px solid $rpf-text-primary;
+      outline: 2px solid var(--editor-focus-color);
     }
   }
 }
+
+.--dark {
+  .project-name__title {
+    border: 2px solid var(--rpf-grey-850);
+    background-color: var(--rpf-grey-850);
+  }
+}

src/assets/stylesheets/ProjectsPanel.scss

@@ -1,6 +1,5 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/colours" as *;
-@use "./rpf_design_system/font-size" as *;
 
 .projects-panel-wrapper {
   .projects-panel__your-projects-button {
@@ -21,16 +20,23 @@
     justify-content: center;
   }
 
-  .project-name {
-    block-size: auto;
-    padding-inline-start: 0;
+  .projects-panel__project-name {
+    display: grid;
+    align-items: end;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--space-0-5);
 
-    &__label {
-      padding-inline-start: 0;
+    > div:first-child,
+    .rpf-input-field {
+      min-inline-size: 0;
     }
 
-    &__input {
-      padding: 0 $space-1;
+    .rpf-input-field {
+      margin-block-end: 0;
+    }
+
+    .rpf-input {
+      min-inline-size: 0;
     }
   }
 

src/assets/stylesheets/SaveStatus.scss

@@ -1,14 +1,13 @@
-@use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/font-size" as *;
-@use "./rpf_design_system/colours" as *;
+@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as
+  typography;
 
 .save-status {
   align-items: center;
   display: flex;
   gap: var(--space-1);
   justify-content: flex-end;
   margin-block: 0;
-  padding-inline: var(--space-2);
+  padding: var(--space-1);
 }
 
 .save-status--mobile {
@@ -17,7 +16,7 @@
   gap: var(--space-0-5);
 
   .save-status__text {
-    @include font-size-0-75(regular);
+    @include typography.style-0-75;
   }
 
   .save-status__icon {