diff --git a/packages/builder/assets/Inter-Black.woff b/packages/builder/assets/Inter-Black.woff new file mode 100644 index 000000000..07800f4b7 Binary files /dev/null and b/packages/builder/assets/Inter-Black.woff differ diff --git a/packages/builder/assets/Inter-Black.woff2 b/packages/builder/assets/Inter-Black.woff2 new file mode 100644 index 000000000..9a615e6e8 Binary files /dev/null and b/packages/builder/assets/Inter-Black.woff2 differ diff --git a/packages/builder/assets/Inter-Bold.woff b/packages/builder/assets/Inter-Bold.woff new file mode 100644 index 000000000..61e1c25e6 Binary files /dev/null and b/packages/builder/assets/Inter-Bold.woff differ diff --git a/packages/builder/assets/Inter-Bold.woff2 b/packages/builder/assets/Inter-Bold.woff2 new file mode 100644 index 000000000..6c401bb09 Binary files /dev/null and b/packages/builder/assets/Inter-Bold.woff2 differ diff --git a/packages/builder/assets/Inter-ExtraBold.woff b/packages/builder/assets/Inter-ExtraBold.woff new file mode 100644 index 000000000..433fb3285 Binary files /dev/null and b/packages/builder/assets/Inter-ExtraBold.woff differ diff --git a/packages/builder/assets/Inter-ExtraBold.woff2 b/packages/builder/assets/Inter-ExtraBold.woff2 new file mode 100644 index 000000000..5a08b364d Binary files /dev/null and b/packages/builder/assets/Inter-ExtraBold.woff2 differ diff --git a/packages/builder/assets/Inter-Medium.woff b/packages/builder/assets/Inter-Medium.woff new file mode 100644 index 000000000..8c36a6345 Binary files /dev/null and b/packages/builder/assets/Inter-Medium.woff differ diff --git a/packages/builder/assets/Inter-Medium.woff2 b/packages/builder/assets/Inter-Medium.woff2 new file mode 100644 index 000000000..3b31d3350 Binary files /dev/null and b/packages/builder/assets/Inter-Medium.woff2 differ diff --git a/packages/builder/assets/Inter-Regular.woff b/packages/builder/assets/Inter-Regular.woff new file mode 100644 index 000000000..7d587c40b Binary files /dev/null and b/packages/builder/assets/Inter-Regular.woff differ diff --git a/packages/builder/assets/Inter-Regular.woff2 b/packages/builder/assets/Inter-Regular.woff2 new file mode 100644 index 000000000..d5ffd2a1f Binary files /dev/null and b/packages/builder/assets/Inter-Regular.woff2 differ diff --git a/packages/builder/assets/Inter-SemiBold.woff b/packages/builder/assets/Inter-SemiBold.woff new file mode 100644 index 000000000..99df06cbe Binary files /dev/null and b/packages/builder/assets/Inter-SemiBold.woff differ diff --git a/packages/builder/assets/Inter-SemiBold.woff2 b/packages/builder/assets/Inter-SemiBold.woff2 new file mode 100644 index 000000000..df746af99 Binary files /dev/null and b/packages/builder/assets/Inter-SemiBold.woff2 differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff deleted file mode 100644 index 72f120793..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 deleted file mode 100644 index 05fda6ab5..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff deleted file mode 100644 index fb70b7e91..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 deleted file mode 100644 index 96981bc87..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff deleted file mode 100644 index d023f3de3..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 deleted file mode 100644 index fd4921035..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff deleted file mode 100644 index 397450501..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 deleted file mode 100644 index 5cd76971f..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff deleted file mode 100644 index f9849dfbe..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 deleted file mode 100644 index 1f7dd5b89..000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 and /dev/null differ diff --git a/packages/builder/package.json b/packages/builder/package.json index 854bcd3ca..fba1b1f40 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@beyonk/svelte-notifications": "^2.0.3", - "@budibase/bbui": "^1.8.0", + "@budibase/bbui": "^1.9.0", "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", "codemirror": "^5.51.0", diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 3d880cbfa..fcde2e391 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -72,14 +72,14 @@ } .budibase__nav-item:hover { - background: var(--grey-light); + background: var(--grey-1); } .budibase__input { height: 35px; width: 220px; border-radius: 3px; - border: 1px solid var(--grey-dark); + border: 1px solid var(--grey-4); text-align: left; color: var(--ink); font-size: 14px; @@ -100,7 +100,7 @@ } .budibase__table { - border: 1px solid var(--grey-dark); + border: 1px solid var(--grey-4); background: #fff; border-radius: 2px; } @@ -116,12 +116,12 @@ } .budibase__table tr { - border-bottom: 1px solid var(--grey-light); + border-bottom: 1px solid var(--grey-1); } .button--toggled { background: var(--blue-light); - color: var(--ink-light); + color: var(--grey-7); width: 40px; height: 40px; display: flex; diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte index 147737b5c..3af21e439 100644 --- a/packages/builder/src/components/common/ActionButton.svelte +++ b/packages/builder/src/components/common/ActionButton.svelte @@ -41,7 +41,7 @@ .secondary { color: var(--ink); - border: solid 1px var(--grey-dark); + border: solid 1px var(--grey-4); background: white; } diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte index 2e8723ab5..579ec752d 100644 --- a/packages/builder/src/components/common/AppNotification.svelte +++ b/packages/builder/src/components/common/AppNotification.svelte @@ -55,9 +55,8 @@ } :global(.uk-notification-message-danger) { - background: var(--ink-light) !important; + background: var(--grey-7) !important; color: #fff !important; - font-family: Roboto; font-size: 16px !important; } @@ -72,6 +71,6 @@ } :global(.refresh-page-button):hover { - background: var(--grey-light); + background: var(--grey-1); } diff --git a/packages/builder/src/components/common/Button.svelte b/packages/builder/src/components/common/Button.svelte index 5b8f2fb59..a5fe3752a 100644 --- a/packages/builder/src/components/common/Button.svelte +++ b/packages/builder/src/components/common/Button.svelte @@ -42,14 +42,14 @@ /* ---- PRIMARY ----*/ .primary { - background-color: var(--primary100); - border-color: var(--primary100); + background-color: var(--blue); + border-color: var(--blue); color: var(--white); } .primary:hover { - background-color: var(--primary75); - border-color: var(--primary75); + background-color: var(--blue); + border-color: var(--blue); } .primary:active { @@ -59,8 +59,8 @@ .primary-outline { background-color: var(--white); - border-color: var(--primary100); - color: var(--primary100); + border-color: var(--blue); + color: var(--blue); } .primary-outline:hover { @@ -74,8 +74,8 @@ /* ---- secondary ----*/ .secondary { - background-color: var(--secondary100); - border-color: var(--secondary100); + background-color: var(--ink); + border-color: var(--ink); color: var(--white); } @@ -91,8 +91,8 @@ .secondary-outline { background-color: var(--white); - border-color: var(--secondary100); - color: var(--secondary100); + border-color: var(--ink); + color: var(--ink); } .secondary-outline:hover { @@ -136,32 +136,36 @@ /* ---- deletion ----*/ .deletion { - background-color: var(--deletion100); - border-color: var(--deletion100); + background-color: var(--red); + border-color: var(--red); color: var(--white); } .deletion:hover { - background-color: var(--deletion75); - border-color: var(--deletion75); + background-color: var(--red-light); + border-color: var(--red); + color: var(--red); } .deletion:pressed { - background-color: var(--deletiondark); - border-color: var(--deletiondark); + background-color: var(--red-dark); + border-color: var(--red-dark); + color: var(--white); } .deletion-outline { background-color: var(--white); - border-color: var(--deletion100); - color: var(--deletion100); + border-color: var(--red); + color: var(--red); } .deletion-outline:hover { - background-color: var(--deletion10); + background-color: var(--red-light); + color: var(--red); } .deletion-outline:pressed { - background-color: var(--deletion25); + background-color: var(--red-dark); + color: var(--white); } diff --git a/packages/builder/src/components/common/CodeArea.svelte b/packages/builder/src/components/common/CodeArea.svelte index e6a4fac03..afa12dfcc 100644 --- a/packages/builder/src/components/common/CodeArea.svelte +++ b/packages/builder/src/components/common/CodeArea.svelte @@ -11,7 +11,7 @@ padding: 10px; margin-top: 5px; margin-bottom: 10px; - background: var(--secondary80); + background: var(--grey-7); color: var(--white); font-family: "Courier New", Courier, monospace; height: 200px; diff --git a/packages/builder/src/components/common/ConfirmDialog.svelte b/packages/builder/src/components/common/ConfirmDialog.svelte index 98524caa1..cd3ffb9b7 100644 --- a/packages/builder/src/components/common/ConfirmDialog.svelte +++ b/packages/builder/src/components/common/ConfirmDialog.svelte @@ -54,7 +54,7 @@ diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte index 4bdd2a941..0eb368dac 100644 --- a/packages/builder/src/components/common/Select.svelte +++ b/packages/builder/src/components/common/Select.svelte @@ -21,7 +21,7 @@ .select-container { font-size: 14px; position: relative; - border: var(--grey-dark) 1px solid; + border: var(--grey-4) 1px solid; } .adjusted { diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte index 484d52ee0..59c44190a 100644 --- a/packages/builder/src/components/common/Switcher.svelte +++ b/packages/builder/src/components/common/Switcher.svelte @@ -43,7 +43,7 @@ display: flex; flex-direction: column; padding: 20px 20px; - border-left: solid 1px var(--grey); + border-left: solid 1px var(--grey-2); box-sizing: border-box; } @@ -60,10 +60,11 @@ padding: 0; cursor: pointer; font-size: 18px; - font-weight: 700; - color: var(--ink-lighter); + font-weight: 600; + color: var(--grey-5); margin-right: 20px; background: none; + outline: none; } .switcher > .selected { diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte index f1d49894a..f51bc6ad6 100644 --- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte @@ -145,7 +145,7 @@ } table { - border: 1px solid var(--grey-dark); + border: 1px solid var(--grey-4); background: #fff; border-radius: 3px; border-collapse: collapse; @@ -153,7 +153,7 @@ thead { background: var(--blue-light); - border: 1px solid var(--grey-dark); + border: 1px solid var(--grey-4); } thead th { @@ -162,18 +162,17 @@ font-weight: 500; font-size: 14px; text-rendering: optimizeLegibility; - letter-spacing: 1px; } tbody tr { - border-bottom: 1px solid var(--grey-dark); + border-bottom: 1px solid var(--grey-4); transition: 0.3s background-color; color: var(--ink); font-size: 14px; } tbody tr:hover { - background: var(--grey-light); + background: var(--grey-1); } .table-controls { diff --git a/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte b/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte index 52a480f22..508ee60b2 100644 --- a/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte +++ b/packages/builder/src/components/database/ModelDataTable/TablePagination.svelte @@ -58,20 +58,19 @@ padding: 10px; margin: 0; background: #fff; - border: 1px solid #ccc; + border: 1px solid var(--grey-4); text-transform: capitalize; border-radius: 3px; - font-family: Roboto; min-width: 20px; transition: 0.3s background-color; } .pagination__buttons button:hover { cursor: pointer; - background-color: #fafafa; + background-color: var(--grey-1); } .selected { - color: var(--button-text); + color: var(--blue); } diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte index b9208b15a..d50adc2d1 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte @@ -34,7 +34,7 @@ } footer { padding: 20px; - background: #fafafa; + background: var(--grey-1); border-radius: 0.5rem; } diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte index 6264b74e0..1f1485818 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte @@ -128,7 +128,7 @@ } tbody > tr:hover { - background-color: var(--grey-light); + background-color: var(--grey-1); } .table-controls { @@ -154,7 +154,7 @@ } footer { - background-color: var(--grey-light); + background-color: var(--grey-1); margin-top: 40px; padding: 20px 40px 20px 40px; display: flex; diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte index c17a0ac9c..75f658529 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte @@ -94,7 +94,7 @@ border-radius: 0 0 5px 5px; bottom: 0; left: 0; - background: var(--grey-light); + background: var(--grey-1); display: flex; align-items: center; justify-content: flex-end; diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte index 62688d58e..50283b875 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -93,7 +93,7 @@ } footer { padding: 20px; - background: #fafafa; + background: var(--grey-1); border-radius: 0.5rem; } diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte index 4db445e54..de5542826 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte @@ -96,7 +96,7 @@ .snippet-selector__heading { margin-right: 20px; font-size: 14px; - color: var(--ink-lighter); + color: var(--grey-5); } .header { @@ -116,7 +116,7 @@ .buttons { display: flex; justify-content: flex-end; - background-color: var(--grey-light); + background-color: var(--grey-1); margin: 0 40px; padding: 20px 0; } diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte index d5c924405..7a4619b87 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte @@ -59,7 +59,7 @@ .title { font-size: 24px; - font-weight: 700; + font-weight: 600; color: var(--ink); margin-left: 12px; } @@ -74,7 +74,7 @@ align-items: center; justify-content: flex-end; padding: 20px; - background: var(--grey-light); + background: var(--grey-1); border-radius: 0 0 5px 5px; } diff --git a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte index 05ecfcd85..1d46aeb58 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte @@ -37,13 +37,13 @@ diff --git a/packages/builder/src/components/userInterface/ComponentSearch.svelte b/packages/builder/src/components/userInterface/ComponentSearch.svelte index b8583075c..b65a08b5e 100644 --- a/packages/builder/src/components/userInterface/ComponentSearch.svelte +++ b/packages/builder/src/components/userInterface/ComponentSearch.svelte @@ -38,7 +38,7 @@ padding: 5px; border-style: solid; border-width: 0 0 1px 0; - border-color: var(--lightslate); + border-color: var(--grey-1); cursor: pointer; } @@ -48,12 +48,12 @@ .component > .title { font-size: 13pt; - color: var(--secondary100); + color: var(--ink); } .component > .description { font-size: 10pt; - color: var(--primary75); + color: var(--blue); font-style: italic; } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 041377aed..1ebfaaae6 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -89,7 +89,7 @@ font-size: 24px; width: 20px; margin-top: 2px; - color: var(--ink-light); + color: var(--grey-7); } .icon:nth-of-type(2) { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 43473a85a..0795c8f1f 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -90,7 +90,7 @@ } .item:hover { - background: var(--grey-light); + background: var(--grey-1); cursor: pointer; } .item:hover .actions { @@ -105,7 +105,7 @@ } .icon { - color: var(--ink-light); + color: var(--grey-7); margin-right: 8px; } diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9df2a928c..f79c8e1aa 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -55,7 +55,7 @@ display: flex; flex-direction: column; padding: 20px 5px 20px 10px; - border-left: solid 1px var(--grey); + border-left: solid 1px var(--grey-2); } .switcher { @@ -70,8 +70,8 @@ padding: 0; cursor: pointer; font-size: 18px; - font-weight: 700; - color: var(--ink-lighter); + font-weight: 600; + color: var(--grey-5); margin-right: 20px; } diff --git a/packages/builder/src/components/userInterface/EditComponentProps.svelte b/packages/builder/src/components/userInterface/EditComponentProps.svelte index 775957c64..d025b6716 100644 --- a/packages/builder/src/components/userInterface/EditComponentProps.svelte +++ b/packages/builder/src/components/userInterface/EditComponentProps.svelte @@ -53,7 +53,7 @@ .title > div:nth-child(1) { grid-column-start: name; - color: var(--secondary100); + color: var(--ink); } .title > div:nth-child(2) { diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte index 35faac366..8132d502d 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte @@ -165,7 +165,7 @@ padding: 30px 40px; border-bottom-left-radius: 5px; border-bottom-right-radius: 50px; - background-color: var(--grey-light); + background-color: var(--grey-1); } .save { margin-left: 20px; diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index 5a3fde257..6a29fd334 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -93,7 +93,7 @@ .newevent { cursor: pointer; - border: 1px solid var(--grey-dark); + border: 1px solid var(--grey-4); border-radius: 3px; width: 100%; padding: 8px 16px; @@ -109,7 +109,7 @@ } .newevent:hover { - background: var(--grey-light); + background: var(--grey-1); } .icon { @@ -155,7 +155,7 @@ } .selected { - color: var(--button-text); - background: var(--background-button) !important; + color: var(--blue); + background: var(--grey-1) !important; } diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index 2eff1a6be..f5adf488c 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -32,9 +32,8 @@ padding: 8px 2px; text-align: center; background: #ffffff; - color: var(--ink-light); + color: var(--grey-7); border-radius: 5px; - font-family: Roboto; font-size: 14px; font-weight: 400; transition: all 0.3s; @@ -43,8 +42,8 @@ } .selected { - background: var(--ink-light); - color: #ffffff; + background: var(--grey-3); + color: var(--ink); } i { diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index 59fc13bcd..555e6f0bb 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -30,7 +30,7 @@ diff --git a/packages/builder/src/components/userInterface/LayoutEditor.svelte b/packages/builder/src/components/userInterface/LayoutEditor.svelte index 0f3efaec0..b36e6aa4a 100644 --- a/packages/builder/src/components/userInterface/LayoutEditor.svelte +++ b/packages/builder/src/components/userInterface/LayoutEditor.svelte @@ -132,8 +132,8 @@ h3 { text-transform: uppercase; font-size: 13px; - font-weight: 700; - color: #000333; + font-weight: 600; + color: var(--ink); opacity: 0.6; margin-bottom: 10px; } @@ -142,16 +142,15 @@ text-transform: uppercase; font-size: 10px; font-weight: 600; - color: #000333; + color: var(--ink); opacity: 0.4; - letter-spacing: 1px; margin-bottom: 10px; } h5 { font-size: 13px; font-weight: 400; - color: #000333; + color: var(--ink); opacity: 0.8; padding-top: 13px; margin-bottom: 0; diff --git a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte index dc1395bf0..05a92d3e7 100644 --- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte +++ b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte @@ -50,7 +50,7 @@ diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index 8a1e3685f..e00a3ef97 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -151,15 +151,14 @@ cursor: pointer; display: flex; padding: 5px 10px; - background-color: #f2f2f2; - border-radius: 2px; - border: 1px solid var(--grey-dark); + background-color: var(--grey-2); + border-radius: 5px; align-items: center; } .bb-select-anchor > span { - color: #565a66; - font-weight: 500; + color: var(--ink); + font-weight: 400; width: 140px; overflow-x: hidden; } @@ -173,8 +172,8 @@ } .selected { - color: #565a66; - font-weight: 500; + color: var(--ink); + font-weight: 400; } .bb-select-menu { @@ -185,15 +184,15 @@ opacity: 0; width: 160px; z-index: 2; - color: #808192; - font-weight: 500; + color: var(--ink); + font-weight: 400; height: fit-content !important; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; - border-right: 1px solid var(--grey-dark); - border-left: 1px solid var(--grey-dark); - border-bottom: 1px solid var(--grey-dark); - background-color: #f2f2f2; + border-right: 1px solid var(--grey-4); + border-left: 1px solid var(--grey-4); + border-bottom: 1px solid var(--grey-4); + background-color: var(--grey-2); transform: scale(0); transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1); overflow-y: auto; diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index c2ad4b590..4f038ad31 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -73,12 +73,12 @@ display: inline-block; transition: 0.2s; width: 20px; - color: var(--ink-light); + color: var(--grey-7); } .icon-big { font-size: 24px; - color: var(--ink-light); + color: var(--grey-7); } :global(svg) { diff --git a/packages/builder/src/components/userInterface/PageView.svelte b/packages/builder/src/components/userInterface/PageView.svelte index c00e7591f..d60a4082d 100644 --- a/packages/builder/src/components/userInterface/PageView.svelte +++ b/packages/builder/src/components/userInterface/PageView.svelte @@ -59,7 +59,7 @@ padding: 15px; } .help-text { - color: var(--slate); + color: var(--grey-2); font-size: 10pt; } diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte index 5a78ef712..a537feda7 100644 --- a/packages/builder/src/components/userInterface/PagesList.svelte +++ b/packages/builder/src/components/userInterface/PagesList.svelte @@ -46,19 +46,20 @@ padding: 8px 16px; text-align: center; background: #ffffff; - color: var(--ink-light); + color: var(--grey-7); border-radius: 5px; - font-family: Roboto; + font-family: inter; font-size: 14px; font-weight: 400; transition: all 0.3s; text-rendering: optimizeLegibility; border: none !important; transition: 0.2s; + outline: none; } .active { - background: var(--ink-light); - color: var(--white); + background: var(--grey-3); + color: var(--ink); } diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte index 332f039b0..a7053953f 100644 --- a/packages/builder/src/components/userInterface/PropControl.svelte +++ b/packages/builder/src/components/userInterface/PropControl.svelte @@ -38,7 +38,7 @@ word-wrap: break-word; font-size: 13px; font-weight: 400; - color: #000333; + color: var(--ink); opacity: 0.8; padding-top: 13px; margin-bottom: 0; diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index d2924675e..1bf32fd92 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -100,7 +100,7 @@ grid-template-columns: 300px 1fr 300px; height: 100%; width: 100%; - background: #fbfbfb; + background: var(--grey-1); } .ui-nav { @@ -128,23 +128,21 @@ .components-nav-page { font-size: 13px; - color: #000333; + color: var(--ink); text-transform: uppercase; padding-left: 20px; margin-top: 20px; font-weight: 600; opacity: 0.4; - letter-spacing: 1px; } .components-nav-header { font-size: 13px; - color: #000333; + color: var(--ink); text-transform: uppercase; margin-top: 20px; font-weight: 600; opacity: 0.4; - letter-spacing: 1px; } .nav-header { @@ -184,21 +182,20 @@ vertical-align: bottom; grid-column-start: button; cursor: pointer; - color: var(--primary75); + color: var(--blue); } .nav-group-header > div:nth-child(3):hover { - color: var(--primary75); + color: var(--blue); } .navigator-title { font-size: 14px; - color: var(--secondary100); + color: var(--ink); font-weight: 600; text-transform: uppercase; padding: 0 20px 20px 20px; line-height: 1rem !important; - letter-spacing: 1px; } .components-list-container { diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index d2043289c..dcfaa8822 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -14,7 +14,7 @@ export const layout = [ control: OptionSelect, initialValue: "", options: [ - { label: "", value: "" }, + { label: " ", value: " " }, { label: "Flex", value: "flex" }, { label: "Inline Flex", value: "inline-flex" }, ], @@ -103,7 +103,6 @@ export const size = [ key: "width", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -111,7 +110,6 @@ export const size = [ key: "height", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -119,7 +117,6 @@ export const size = [ key: "min-width", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -127,7 +124,6 @@ export const size = [ key: "min-height", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -135,7 +131,6 @@ export const size = [ key: "max-width", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -143,7 +138,6 @@ export const size = [ key: "max-height", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, ] @@ -167,7 +161,6 @@ export const position = [ key: "top", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -175,7 +168,6 @@ export const position = [ key: "right", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -183,7 +175,6 @@ export const position = [ key: "bottom", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -191,7 +182,6 @@ export const position = [ key: "left", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -199,7 +189,6 @@ export const position = [ key: "z-index", control: Input, placeholder: "num", - width: "48px", textAlign: "center", }, ] @@ -242,7 +231,6 @@ export const typography = [ defaultValue: "", control: Input, placeholder: "px", - width: "48px", textAlign: "center", }, { @@ -250,7 +238,6 @@ export const typography = [ key: "line-height", control: Input, placeholder: "lh", - width: "48px", textAlign: "center", }, { diff --git a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte index 9f5136241..3ee07a107 100644 --- a/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte +++ b/packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte @@ -42,7 +42,7 @@ diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte index 2ef2b8c46..626a890b6 100644 --- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte +++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte @@ -35,7 +35,7 @@ border-radius: 5px; transition: 0.3s all; box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08); - background-color: var(--font); + background-color: var(--ink); font-size: 16px; color: var(--white); } @@ -54,17 +54,17 @@ .ACTION { background-color: var(--white); - color: var(--font); + color: var(--ink); } .TRIGGER { - background-color: var(--font); + background-color: var(--ink); color: var(--white); } .LOGIC { background-color: var(--secondary); - color: var(--font); + color: var(--ink); } div:hover { diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte index 523545a92..14fb16c6c 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte @@ -64,18 +64,18 @@ .subtabs span { transition: 0.3s all; text-align: center; - color: var(--dark-grey); + color: var(--grey-7); font-weight: 500; padding: 10px; } .subtabs span.selected { - background: var(--dark-grey); + background: var(--grey-7); color: var(--white); border-radius: 2px; } .subtabs span:not(.selected) { - color: var(--dark-grey); + color: var(--grey-7); } diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte index 739e3e8b5..391f51b80 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte @@ -16,7 +16,7 @@
-
+
@@ -27,19 +27,34 @@ diff --git a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte index 66683182b..d966a5a56 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte @@ -42,7 +42,7 @@ diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte index 96a0dcbb2..1b84a255b 100644 --- a/packages/builder/src/pages/[application]/workflow/_layout.svelte +++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte @@ -22,13 +22,13 @@ diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte index e54102db1..03ea837b4 100644 --- a/packages/builder/src/pages/index.svelte +++ b/packages/builder/src/pages/index.svelte @@ -136,7 +136,7 @@ .banner-button:hover { background-color: var(--white); color: var(--ink); - border: var(--grey-dark) 1px solid; + border: var(--grey-4) 1px solid; } .app-section-header { @@ -149,7 +149,7 @@ .app-section-title { font-size: 20px; color: var(--ink); - font-weight: 700; + font-weight: 600; margin-bottom: 20px; } diff --git a/packages/server/builder/assets/Inter-Black.woff b/packages/server/builder/assets/Inter-Black.woff new file mode 100644 index 000000000..07800f4b7 Binary files /dev/null and b/packages/server/builder/assets/Inter-Black.woff differ diff --git a/packages/server/builder/assets/Inter-Black.woff2 b/packages/server/builder/assets/Inter-Black.woff2 new file mode 100644 index 000000000..9a615e6e8 Binary files /dev/null and b/packages/server/builder/assets/Inter-Black.woff2 differ diff --git a/packages/server/builder/assets/Inter-Bold.woff b/packages/server/builder/assets/Inter-Bold.woff new file mode 100644 index 000000000..61e1c25e6 Binary files /dev/null and b/packages/server/builder/assets/Inter-Bold.woff differ diff --git a/packages/server/builder/assets/Inter-Bold.woff2 b/packages/server/builder/assets/Inter-Bold.woff2 new file mode 100644 index 000000000..6c401bb09 Binary files /dev/null and b/packages/server/builder/assets/Inter-Bold.woff2 differ diff --git a/packages/server/builder/assets/Inter-ExtraBold.woff b/packages/server/builder/assets/Inter-ExtraBold.woff new file mode 100644 index 000000000..433fb3285 Binary files /dev/null and b/packages/server/builder/assets/Inter-ExtraBold.woff differ diff --git a/packages/server/builder/assets/Inter-ExtraBold.woff2 b/packages/server/builder/assets/Inter-ExtraBold.woff2 new file mode 100644 index 000000000..5a08b364d Binary files /dev/null and b/packages/server/builder/assets/Inter-ExtraBold.woff2 differ diff --git a/packages/server/builder/assets/Inter-Medium.woff b/packages/server/builder/assets/Inter-Medium.woff new file mode 100644 index 000000000..8c36a6345 Binary files /dev/null and b/packages/server/builder/assets/Inter-Medium.woff differ diff --git a/packages/server/builder/assets/Inter-Medium.woff2 b/packages/server/builder/assets/Inter-Medium.woff2 new file mode 100644 index 000000000..3b31d3350 Binary files /dev/null and b/packages/server/builder/assets/Inter-Medium.woff2 differ diff --git a/packages/server/builder/assets/Inter-Regular.woff b/packages/server/builder/assets/Inter-Regular.woff new file mode 100644 index 000000000..7d587c40b Binary files /dev/null and b/packages/server/builder/assets/Inter-Regular.woff differ diff --git a/packages/server/builder/assets/Inter-Regular.woff2 b/packages/server/builder/assets/Inter-Regular.woff2 new file mode 100644 index 000000000..d5ffd2a1f Binary files /dev/null and b/packages/server/builder/assets/Inter-Regular.woff2 differ diff --git a/packages/server/builder/assets/Inter-SemiBold.woff b/packages/server/builder/assets/Inter-SemiBold.woff new file mode 100644 index 000000000..99df06cbe Binary files /dev/null and b/packages/server/builder/assets/Inter-SemiBold.woff differ diff --git a/packages/server/builder/assets/Inter-SemiBold.woff2 b/packages/server/builder/assets/Inter-SemiBold.woff2 new file mode 100644 index 000000000..df746af99 Binary files /dev/null and b/packages/server/builder/assets/Inter-SemiBold.woff2 differ diff --git a/packages/server/src/utilities/builder/index.template.html b/packages/server/src/utilities/builder/index.template.html index 2f1f7ed87..80df75662 100644 --- a/packages/server/src/utilities/builder/index.template.html +++ b/packages/server/src/utilities/builder/index.template.html @@ -11,7 +11,7 @@ diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte index 772009499..b335b71a7 100644 --- a/packages/standard-components/src/List.svelte +++ b/packages/standard-components/src/List.svelte @@ -42,7 +42,7 @@ .list { display: flex; flex-direction: column; - font-family: Roboto; + font-family: Inter; } .grid { diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte index b52cc154e..165da75e2 100644 --- a/packages/standard-components/src/Login.svelte +++ b/packages/standard-components/src/Login.svelte @@ -48,48 +48,58 @@ } } - -
-
- {#if _logo} -
- logo +
+
+
+ {#if _logo} +
+ logo +
+ {/if} + +

Log in to {name}

+ +
+
+ +
+ +
+ +
- {/if} - -

Log in to {name}

-
-
- + -
- -
+ {#if error} +
Incorrect username or password
+ {/if}
- - - - {#if error} -
Incorrect username or password
- {/if}