Change UI font (ScratchAddons#4656)

Replaces the Sora font with Roboto for most text on the settings page and in the popup.
just-a-hriday · Dec 26, 2024 · df58989 · df58989
1 parent 9f8e7d9
commit df58989
Show file tree

Hide file tree

Showing 27 changed files with 187 additions and 57 deletions.
diff --git a/libraries/README.md b/libraries/README.md
@@ -13,5 +13,6 @@ Third-party libraries included are:
 - [Fuse.js 6.6.2](https://unpkg.com/fuse.js@6.6.2/dist/fuse.esm.min.js) (Apache-2.0)
 - [idb 7.1.1](https://unpkg.com/idb@7.1.1/build/umd.js) (ISC)
 - [Sortable.js 1.15.0](https://unpkg.com/sortablejs@1.15.0/Sortable.min.js) (MIT)
+- [Roboto](https://fonts.google.com/specimen/Roboto) (Apache-2.0)
 
 Note that these libraries are either from official release websites or from unpkg (which distributes the content uploaded to NPM as-is).
diff --git a/libraries/license-info.json b/libraries/license-info.json
@@ -56,5 +56,8 @@
     "license": "ISC",
     "year": "2016,",
     "fullname": "Jake Archibald <jaffathecake@gmail.com>"
+  },
+  "Roboto": {
+    "license": "Apache-2.0"
   }
 }
diff --git a/libraries/thirdparty/Roboto.css b/libraries/thirdparty/Roboto.css
@@ -0,0 +1,54 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./Roboto/latin-ext.400.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./Roboto/latin.400.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./Roboto/latin-ext.500.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./Roboto/latin.500.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./Roboto/latin-ext.700.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./Roboto/latin.700.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/libraries/thirdparty/Roboto/latin-ext.400.woff2 b/libraries/thirdparty/Roboto/latin-ext.400.woff2
diff --git a/libraries/thirdparty/Roboto/latin-ext.500.woff2 b/libraries/thirdparty/Roboto/latin-ext.500.woff2
diff --git a/libraries/thirdparty/Roboto/latin-ext.700.woff2 b/libraries/thirdparty/Roboto/latin-ext.700.woff2
diff --git a/libraries/thirdparty/Roboto/latin.400.woff2 b/libraries/thirdparty/Roboto/latin.400.woff2
diff --git a/libraries/thirdparty/Roboto/latin.500.woff2 b/libraries/thirdparty/Roboto/latin.500.woff2
diff --git a/libraries/thirdparty/Roboto/latin.700.woff2 b/libraries/thirdparty/Roboto/latin.700.woff2
diff --git a/popups/cloud-games/popup.css b/popups/cloud-games/popup.css
@@ -21,7 +21,7 @@ body {
   background-color: var(--tooltip-background);
   border-radius: 10px;
   box-shadow: var(--large-shadow);
-  font-weight: 600;
+  font-weight: 500;
   user-select: none;
 }
 
@@ -38,13 +38,13 @@ body {
   text-align: center;
   font-size: 1rem;
   padding-top: 20px;
-  font-weight: 600;
+  font-weight: 500;
   margin: 0 2rem;
   user-select: none;
 }
 
 .title {
-  font-size: 12px;
+  font-size: 14px;
   color: var(--content-text);
   padding: 6px 8px;
   cursor: default;
@@ -62,13 +62,13 @@ body {
 }
 .float-right {
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .project-details {
   padding: 8px;
   color: var(--description-text);
-  font-size: 12px;
+  font-size: 14px;
 }
 .username-list > a {
   display: inline-block;
@@ -98,7 +98,7 @@ body {
 }
 
 .small-icon {
-  height: 14px;
+  height: 16px;
   vertical-align: text-bottom;
   filter: var(--content-icon-filter);
 }

diff --git a/popups/scratch-messaging/popup.css b/popups/scratch-messaging/popup.css
@@ -40,7 +40,7 @@ button {
 }
 
 .message-type-title {
-  font-size: 12px;
+  font-size: 14px;
   color: var(--content-text);
   padding: 6px;
   padding-inline-end: 9px;
@@ -69,7 +69,7 @@ button {
 .thread-list,
 .username-list {
   color: var(--description-text);
-  font-size: 12px;
+  font-size: 14px;
   padding-inline: 16px;
 }
 .fullscreen .thread-list,
@@ -96,7 +96,7 @@ button {
   cursor: pointer;
 }
 .small-icon {
-  height: 14px;
+  height: 16px;
   vertical-align: text-bottom;
 }
 .small-icon:not(.colored) {
@@ -106,8 +106,6 @@ button > .small-icon {
   margin-inline-start: -2px;
   margin-inline-end: 6px;
   vertical-align: middle;
-  width: 16px;
-  height: 16px;
 }
 .message-type-title-text {
   white-space: nowrap;
@@ -125,7 +123,7 @@ a.message-type-title-text {
 .float-right {
   margin-inline-start: 6px;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: 14px;
 }
 .float-right > span {
   display: inline-block;
@@ -145,7 +143,7 @@ a.message-type-title-text {
   border: 1px solid var(--control-border);
   border-radius: 8px;
   margin: 8px;
-  font-size: 12px;
+  font-size: 14px;
 }
 .fullscreen .comment {
   margin-inline: 12px;
@@ -168,7 +166,7 @@ a.message-type-title-text {
   white-space: break-spaces;
 }
 .comment-author {
-  font-weight: 600;
+  font-weight: 500;
   color: var(--dark-red-text);
 }
 .comment-me .comment-author {
@@ -184,8 +182,8 @@ a.message-type-title-text {
 }
 .popout-comment {
   cursor: pointer;
-  height: 10px;
-  vertical-align: baseline;
+  height: 12px;
+  vertical-align: -1px;
   padding-left: 2px;
   filter: var(--content-icon-filter);
   user-select: none;
@@ -201,8 +199,8 @@ a.message-type-title-text {
   padding-top: 2px;
   user-select: none;
 }
-.bold {
-  font-weight: 600;
+.delete-confirm {
+  font-weight: bold;
   color: var(--red);
 }
 .child-comment {
@@ -217,7 +215,7 @@ a.message-type-title-text {
 .reply-button-comment {
   opacity: 0;
   color: var(--blue-text);
-  font-weight: 600;
+  font-weight: 500;
   user-select: none;
 }
 .comment:hover .reply-button-comment,
@@ -229,11 +227,11 @@ a.message-type-title-text {
   width: 100%;
   box-sizing: border-box;
   height: 5rem;
-  font-family: Arial, sans-serif;
+  font-family: inherit;
   padding: 8px;
   resize: vertical;
   margin-top: 8px;
-  font-size: 12px;
+  font-size: 14px;
   border-radius: 4px;
   border: 1px solid var(--control-border);
   background-color: var(--input-background);
@@ -280,7 +278,7 @@ a.message-type-title-text {
   padding-top: 10px;
   padding-bottom: 20px;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   text-align: center;
 }
 .status-container p,
@@ -307,7 +305,7 @@ a.message-type-title-text {
   right: 0;
   background: var(--content-background);
   border-top: 1px solid var(--content-border);
-  font-size: 12px;
+  font-size: 14px;
   text-align: center;
   box-shadow: var(--content-shadow);
   line-height: 15px;
@@ -331,11 +329,11 @@ a.message-type-title-text {
   padding-inline: 5px;
 }
 .marked-as-read {
-  font-weight: 600;
+  font-weight: bold;
 }
 .popout {
-  height: 10px;
-  vertical-align: baseline;
+  height: 12px;
+  vertical-align: -1px;
   margin-inline-start: 5px;
   opacity: 0.6;
   filter: var(--content-icon-filter);

diff --git a/popups/scratch-messaging/popup.html b/popups/scratch-messaging/popup.html
@@ -49,7 +49,7 @@
         <a
           @click="deleteComment()"
           class="delete-btn"
-          :class="{'bold': deleteStep === 1}"
+          :class="{'delete-confirm': deleteStep === 1}"
           v-show="!deleted"
           v-if="canDeleteComment"
           >{{ deleteStep === 0 ? messages.deleteMsg : messages.deleteConfirmMsg }}

diff --git a/webpages/popup/index.html b/webpages/popup/index.html
@@ -12,6 +12,7 @@
     <link rel="icon" href="../../images/icon.png" id="favicon" />
     <link rel="stylesheet" href="style.css" />
     <link href="../../libraries/thirdparty/Sora.css" rel="stylesheet" />
+    <link href="../../libraries/thirdparty/Roboto.css" rel="stylesheet" />
     <script src="../../libraries/thirdparty/vue.js" defer></script>
     <script src="./index.js" type="module"></script>
     <link rel="preload" href="../styles/colors-light.css" as="style" />

diff --git a/webpages/popup/style.css b/webpages/popup/style.css
@@ -8,7 +8,7 @@ body {
   overflow: hidden;
   margin: 0;
   background-color: var(--brand-orange); /* Firefox popup arrow */
-  font-family: "Sora", sans-serif;
+  font-family: "Roboto", sans-serif;
   color: var(--white-text);
 }
 
@@ -40,6 +40,7 @@ body {
   display: flex;
   align-items: center;
   padding: 0 20px;
+  font-family: "Sora", sans-serif;
   user-select: none;
 }
 #logo {
@@ -77,7 +78,7 @@ body {
   justify-content: center;
   align-items: center;
   position: relative;
-  font-size: 12px;
+  font-size: 14px;
   padding-inline-start: 10.5px;
   padding-inline-end: 12px;
   user-select: none;
@@ -124,8 +125,8 @@ body {
 .popout > .popout-img {
   display: inline-block;
   vertical-align: -3px;
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   padding: 2px;
   margin-inline-start: 3px;
   margin-inline-end: -2px;
@@ -152,6 +153,7 @@ iframe {
   margin: 5px;
   text-decoration: none;
   opacity: 0.75;
-  font-size: 12px;
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
   user-select: text;
 }
diff --git a/webpages/settings/components/addon-body.html b/webpages/settings/components/addon-body.html
@@ -121,6 +121,11 @@
     width: 0; /* don't include the description
                  when calculating addon-body size */
     flex-grow: 1;
+    /* Badges have a 2px bottom border which means the text
+       is not vertically centered relative to the addon name
+       and description. Fixed by adding 1px bottom padding
+       here and 1px extra top padding to the badge. */
+    padding-bottom: 1px;
   }
 
   .addon-description-full,
@@ -133,7 +138,7 @@
   .addon-credits,
   .addon-license {
     margin-top: 4px;
-    font-size: 0.9em;
+    font-size: 13px;
   }
   .addon-credits a,
   .addon-license a {
@@ -153,6 +158,11 @@
     height: 100%;
     display: flex;
     align-items: center;
+    /* Badges have a 2px bottom border which means the text
+       is not vertically centered relative to the addon name
+       and description. Fixed by adding 1px bottom padding
+       here and 1px extra top padding to the badge. */
+    padding-bottom: 1px;
   }
   .addon-name > span:empty {
     display: inline-block;
@@ -271,7 +281,7 @@
     padding: 8px;
     border: 2px solid;
     border-radius: 5px;
-    font-weight: 600;
+    font-weight: 500;
     margin: 10px 0;
     display: flex;
     align-items: center;
@@ -302,8 +312,8 @@
     margin-inline-end: 10px;
   }
   .addon-message img {
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     margin-inline-end: 10px;
     user-select: none;
   }