Replace font-weight 500 with 600 as source sans pro does not have a 500 weight, and update autoscreens and templates to use source sans pro

5 years ago · f00ebcf7d6
37 changed files with 51 additions and 204 deletions
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@ -39,7 +39,7 @@
    color: white;
    display: grid;
    place-items: center;
-    font-weight: 500;
+    font-weight: 600;
    background: #3aab87;
    border-radius: 50%;
    overflow: hidden;
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@ -50,7 +50,7 @@
  .name {
    text-align: left;
    font-size: 14px;
-    font-weight: 500;
+    font-weight: 600;
    letter-spacing: 0.14px;
    color: var(--ink);
    flex: 1 1 auto;
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@ -343,7 +343,7 @@
  .extension {
    color: var(--spectrum-global-color-gray-600);
    text-transform: uppercase;
-    font-weight: 500;
+    font-weight: 600;
    margin-bottom: 5px;
  }

--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@ -49,7 +49,7 @@
    border: 1px solid var(--spectrum-global-color-gray-300);
    border-radius: 2px;
    text-transform: uppercase;
-    font-weight: 500;
+    font-weight: 600;
    font-size: 11px;
  }
 </style>
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@ -1,157 +0,0 @@
-/* Budibase Component Styles */
-
-
-.budibase__title {
-    font-weight: 900;
-    font-size: 42px;
-}
-
-.budibase__title--2 {
-    font-weight: 700;
-    font-size: 32px;
-}
-
-.budibase__title--3 {
-    font-weight: 700;
-    font-size: 24px;
-}
-
-.budibase__title--4 {
-    font-weight: 700;
-    font-size: 18px;
-}
-
-.budibase__label--big {
-    font-weight: 400;
-    font-size: 14px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__label--medium {
-    font-weight: 500;
-    font-size: 13px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__label--small {
-    font-weight: 500;
-    font-size: 10px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__sub-heading {
-    font-weight: 500;
-    font-size: 16px;
-    opacity: 0.6;
-}
-
-.budibase__nav-item {
-    cursor: pointer;
-    padding: 0 4px 0 2px;
-    height: 36px;
-    margin: 0px 0px 0px 0px;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    transition: 0.2s;
-    border-top: var(--grey-1) .5px solid;
-}
-
-.budibase__nav-item.selected {
-    color: var(--ink);
-    background: var(--grey-2);
-}
-
-.budibase__nav-item:hover {
-    background: var(--grey-1);
-}
-
-.budibase__input {
-    height: 36px;
-    background-color: var(--grey-2);
-    border: none;
-    border-radius: 5px;
-    width: 100%;
-    text-align: left;
-    color: var(--ink);
-    font-size: 14px;
-    padding-left: 8px;
-    -moz-box-sizing: border-box; 
-    -webkit-box-sizing: border-box; 
-     box-sizing: border-box; 
-}
-
-.budibase__table {
-    border: 1px solid var(--grey-4);
-    background: #fff;
-    border-radius: 2px;
-}
-
-.budibase__table thead {
-    background: var(--blue-light);
-}
-
-.budibase__table thead > tr > th {
-    color: var(--ink);
-    text-transform: capitalize;
-    font-weight: 500;
-}
-
-.budibase__table tr {
-    border-bottom: 1px solid var(--grey-1);
-}
-
-.button--toggled {
-    background: var(--blue-light);
-    color: var(--grey-7);
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-}
-
-/* Table styles */
-.bb-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    margin-bottom: var(--spacing-xl);
-}
-
-* + .bb-table { 
-    margin-top: var(--spacing-xl)
-}
-
-.bb-table th {
-    padding: var(--spacing-l) var(--spacing-m);
-    text-align: left;
-    vertical-align: bottom;
-}
-
-.bb-table td {
-    padding: var(--spacing-l) var(--spacing-m);
-    vertical-align: top;
-}
-
-.bb-table td > :last-child { margin-bottom: 0; }
-
-.bb__alert {
-    position: relative;
-    margin-bottom: var(--spacing-m);
-    padding: var(--spacing-l);
-}
-
-.bb__alert--danger {
-    background: #fef4f6;
-    color: #f0506e;
-}
-
-a {
-    text-decoration: none;
-}
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@ -32,7 +32,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
    "border-width": "0",
    "border-style": "None",
    color: "#fff",
-    "font-weight": "500",
+    "font-weight": "600",
    "font-size": "14px",
  })

@ -42,7 +42,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
      "border-width": "0",
      "border-style": "None",
      color: "#9e9e9e",
-      "font-weight": "500",
+      "font-weight": "600",
      "font-size": "14px",
      "margin-right": "8px",
      "margin-left": "16px",
--- a/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
@ -24,7 +24,7 @@ function generateTitleContainer(table) {
      "border-width": "0",
      "border-style": "None",
      color: "#fff",
-      "font-weight": "500",
+      "font-weight": "600",
      "font-size": "14px",
    })
    .hoverStyle({
@ -110,7 +110,7 @@ const createScreen = table => {
    .instanceName("View Button")
    .normalStyle({
      background: "transparent",
-      "font-weight": "500",
+      "font-weight": "600",
      color: "#888",
      "border-width": "0",
    })
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -67,7 +67,7 @@

  header {
    font-size: 16px;
-    font-weight: 500;
+    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -130,7 +130,7 @@
  }

  .block-label {
-    font-weight: 500;
+    font-weight: 600;
    font-size: var(--font-size-s);
    color: var(--grey-7);
  }
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@ -99,7 +99,7 @@

  .block-label {
    font-size: var(--spectrum-global-dimension-font-size-75);
-    font-weight: 500;
+    font-weight: 600;
    color: var(--grey-7);
  }
 </style>
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
@ -88,7 +88,7 @@
    text-align: justify;
  }
  .finished-text {
-    font-weight: 500;
+    font-weight: 600;
    text-align: center;
    color: var(--blue);
  }
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -143,7 +143,7 @@
  }
  .table-title h1 {
    font-size: var(--font-size-m);
-    font-weight: 500;
+    font-weight: 600;
    margin: 0;
  }
  .table-title > div {
@ -158,7 +158,7 @@
    gap: var(--spacing-s);
  }
  .popovers :global(button) {
-    font-weight: 500;
+    font-weight: 600;
    margin-top: var(--spacing-l);
  }
  .popovers :global(button svg) {
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@ -170,7 +170,7 @@
  .field-status {
    color: var(--green);
    justify-self: center;
-    font-weight: 500;
+    font-weight: 600;
  }

  .error {
@ -192,7 +192,7 @@
  label {
    font-family: var(--font-sans);
    cursor: pointer;
-    font-weight: 500;
+    font-weight: 600;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--border-radius-s);
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@ -115,7 +115,7 @@

  div.delete-items div {
    margin-top: 4px;
-    font-weight: 500;
+    font-weight: 600;
  }

  .actions {
@ -127,7 +127,7 @@

  h5 {
    margin: 0;
-    font-weight: 500;
+    font-weight: 600;
  }

  footer {
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@ -48,7 +48,7 @@
  }

  .title {
-    font-weight: 500;
+    font-weight: 600;
  }

  .subtitle {
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@ -23,7 +23,7 @@

  .error {
    font-size: var(--font-size-xs);
-    font-weight: 500;
+    font-weight: 600;
  }
  .error:first-letter {
    text-transform: uppercase;
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@ -98,7 +98,7 @@

  .text {
    flex: 1 1 auto;
-    font-weight: 500;
+    font-weight: 600;
    font-size: var(--spectrum-global-dimension-font-size-75);
    overflow: hidden;
    text-overflow: ellipsis;
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@ -141,7 +141,7 @@
    cursor: pointer;
  }
  .binding__label {
-    font-weight: 500;
+    font-weight: 600;
    text-transform: capitalize;
  }
  .binding__description {
@ -160,7 +160,7 @@
    border-radius: var(--border-radius-m);
    padding: 2px;
    margin-left: 2px;
-    font-weight: 500;
+    font-weight: 600;
  }

  .syntax-error {
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@ -209,7 +209,7 @@

  .deploy-time {
    color: var(--grey-7);
-    font-weight: 500;
+    font-weight: 600;
    font-size: var(--font-size-s);
  }

@ -224,7 +224,7 @@
    font-size: var(--font-size-s);
    padding: var(--spacing-s);
    border-radius: var(--border-radius-s);
-    font-weight: 500;
+    font-weight: 600;
    text-transform: lowercase;
    width: 80px;
    text-align: center;
@ -235,7 +235,7 @@

  a {
    color: var(--blue);
-    font-weight: 500;
+    font-weight: 600;
    font-size: var(--font-size-s);
  }

--- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte
@ -24,7 +24,7 @@
    align-items: center;
    list-style: none;
    font-size: var(--font-size-m);
-    font-weight: 500;
+    font-weight: 600;
    height: 24px;
  }

--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -87,7 +87,7 @@
    font-size: var(--spectrum-global-dimension-font-size-75);
    margin-bottom: var(--spacing-m);
    margin-top: var(--spacing-xs);
-    font-weight: 500;
+    font-weight: 600;
    color: var(--grey-7);
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@ -252,7 +252,7 @@

  i:hover {
    transform: scale(1.1);
-    font-weight: 500;
+    font-weight: 600;
    cursor: pointer;
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@ -144,7 +144,7 @@
    margin-bottom: var(--spacing-m);
    font-size: var(--font-size-s);
    color: var(--grey-7);
-    font-weight: 500;
+    font-weight: 600;
  }

  .action-header:hover,
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte
@ -30,7 +30,7 @@
    color: var(--grey-7);
    border-radius: var(--border-radius-m);
    font-size: var(--spectrum-global-dimension-font-size-75);
-    font-weight: 500;
+    font-weight: 600;
    transition: all 0.3s;
    text-rendering: optimizeLegibility;
  }
--- a/packages/builder/src/components/feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/feedback/FeedbackNavLink.svelte
@ -36,7 +36,7 @@
    cursor: pointer;
    color: var(--grey-7);
    margin: 0 12px 0 0;
-    font-weight: 500;
+    font-weight: 600;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@ -25,7 +25,7 @@
    cursor: pointer;
    color: var(--grey-7);
    margin: 0 12px 0 0;
-    font-weight: 500;
+    font-weight: 600;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
--- a/packages/builder/src/components/settings/tabs/APIKeys.svelte
+++ b/packages/builder/src/components/settings/tabs/APIKeys.svelte
@ -57,6 +57,6 @@

  span {
    font-size: var(--font-size-xs);
-    font-weight: 500;
+    font-weight: 600;
  }
 </style>
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@ -36,6 +36,9 @@ body {
 .hoverable:hover {
    cursor: pointer;
 }
+a {
+    text-decoration: none;
+}

 /* Top bottom spacing */
 .bb-margin-m {
@ -44,11 +47,9 @@ body {
 * + .bb-margin-m {
    margin-top: var(--spacing-m);
 }
-
 .bb-margin-xl {
    margin-bottom: var(--spacing-xl);
 }
-
 * + .bb-margin-xl {
    margin-top: var(--spacing-xl);
 }
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@ -7,7 +7,6 @@ import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
 import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
-import "./budibase.css"

 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 loadSpectrumIcons()
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -172,7 +172,7 @@

  .topnavitemright a:hover {
    color: var(--ink);
-    font-weight: 500;
+    font-weight: 600;
  }

  .home-logo {
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -186,7 +186,7 @@
  span {
    overflow: hidden;
    text-overflow: ellipsis;
-    font-weight: 500;
+    font-weight: 600;
  }
  .content {
    overflow: auto;
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/NotificationDisplay.svelte
@ -55,6 +55,6 @@
    padding: 10px;
    display: block;
    color: white;
-    font-weight: 500;
+    font-weight: 600;
  }
 </style>
--- a/packages/server/src/constants/layouts.js
+++ b/packages/server/src/constants/layouts.js
@ -98,7 +98,6 @@ const BASE_LAYOUTS = [
                  "margin-left": "auto",
                  "margin-right": "auto",
                  padding: "20px",
-                  color: "#757575",
                  "font-weight": "400",
                  "font-size": "16px",
                  flex: "1 1 auto",
@ -120,9 +119,7 @@ const BASE_LAYOUTS = [
                  _component: "@budibase/standard-components/link",
                  _styles: {
                    normal: {
-                      "font-family": "Inter",
-                      "font-weight": "500",
-                      color: "#000000",
+                      "font-weight": "600",
                      "text-decoration-line": "none",
                      "font-size": "16px",
                    },
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@ -33,5 +33,6 @@
    user-select: none;
    white-space: nowrap;
    text-align: center;
+    font-family: var(--font-sans);
  }
 </style>
--- a/packages/standard-components/src/CardStat.svelte
+++ b/packages/standard-components/src/CardStat.svelte
@ -28,14 +28,14 @@
  .title {
    font-size: 0.85rem;
    color: #9e9e9e;
-    font-weight: 500;
+    font-weight: 600;
    margin: 1rem 1.5rem 0.5rem 1.5rem;
    white-space: pre-wrap;
  }

  .value {
    font-size: 2rem;
-    font-weight: 500;
+    font-weight: 600;
    margin: 0 1.5rem 1.5rem 1.5rem;
    color: inherit;
    white-space: pre-wrap;
--- a/packages/standard-components/src/ErrorsBox.svelte
+++ b/packages/standard-components/src/ErrorsBox.svelte
@ -22,7 +22,7 @@

  .error {
    font-size: var(--font-size-xs);
-    font-weight: 500;
+    font-weight: 600;
    color: var(--red-dark);
  }
  .error:first-letter {
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -23,3 +23,9 @@
    <slot />
  </a>
 {/if}
+
+<style>
+  a {
+    color: var(--spectrum-alias-text-color);
+  }
+</style>