ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

merge

master
Martin McKeaveney 6 years ago
parent
35a1b1c03e 83fba4a6f8
commit
835b21e387
112 changed files with 664 additions and 525 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      packages/builder/assets/Inter-Black.woff
  2. BIN
      packages/builder/assets/Inter-Black.woff2
  3. BIN
      packages/builder/assets/Inter-Bold.woff
  4. BIN
      packages/builder/assets/Inter-Bold.woff2
  5. BIN
      packages/builder/assets/Inter-ExtraBold.woff
  6. BIN
      packages/builder/assets/Inter-ExtraBold.woff2
  7. BIN
      packages/builder/assets/Inter-Medium.woff
  8. BIN
      packages/builder/assets/Inter-Medium.woff2
  9. BIN
      packages/builder/assets/Inter-Regular.woff
  10. BIN
      packages/builder/assets/Inter-Regular.woff2
  11. BIN
      packages/builder/assets/Inter-SemiBold.woff
  12. BIN
      packages/builder/assets/Inter-SemiBold.woff2
  13. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-300.woff
  14. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2
  15. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-500.woff
  16. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2
  17. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-700.woff
  18. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2
  19. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-900.woff
  20. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2
  21. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff
  22. BIN
      packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2
  23. 2
      packages/builder/package.json
  24. 22
      packages/builder/src/budibase.css
  25. 2
      packages/builder/src/components/common/ActionButton.svelte
  26. 44
      packages/builder/src/components/common/Button.svelte
  27. 2
      packages/builder/src/components/common/CodeArea.svelte
  28. 2
      packages/builder/src/components/common/ConfirmDialog.svelte
  29. 2
      packages/builder/src/components/common/IconButton.svelte
  30. 19
      packages/builder/src/components/common/Input.svelte
  31. 4
      packages/builder/src/components/common/PlusButton.svelte
  32. 2
      packages/builder/src/components/common/Select.svelte
  33. 7
      packages/builder/src/components/common/Switcher.svelte
  34. 9
      packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
  35. 7
      packages/builder/src/components/database/ModelDataTable/TablePagination.svelte
  36. 2
      packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
  37. 4
      packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
  38. 2
      packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
  39. 4
      packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
  40. 4
      packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
  41. 4
      packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
  42. 3
      packages/builder/src/components/nav/DatabasesList.svelte
  43. 1
      packages/builder/src/components/nav/UsersList.svelte
  44. 12
      packages/builder/src/components/start/AppCard.svelte
  45. 10
      packages/builder/src/components/start/CreateAppModal.svelte
  46. 4
      packages/builder/src/components/userInterface/CategoryTab.svelte
  47. 20
      packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
  48. 9
      packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
  49. 8
      packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
  50. 6
      packages/builder/src/components/userInterface/ComponentSearch.svelte
  51. 8
      packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
  52. 8
      packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
  53. 6
      packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
  54. 1
      packages/builder/src/components/userInterface/DesignView.svelte
  55. 2
      packages/builder/src/components/userInterface/EditComponentProps.svelte
  56. 2
      packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
  57. 8
      packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
  58. 23
      packages/builder/src/components/userInterface/FlatButton.svelte
  59. 1
      packages/builder/src/components/userInterface/FlatButtonGroup.svelte
  60. 20
      packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
  61. 6
      packages/builder/src/components/userInterface/ItemTab/Item.svelte
  62. 9
      packages/builder/src/components/userInterface/LayoutEditor.svelte
  63. 4
      packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
  64. 6
      packages/builder/src/components/userInterface/NewScreen.svelte
  65. 32
      packages/builder/src/components/userInterface/OptionSelect.svelte
  66. 6
      packages/builder/src/components/userInterface/PageLayout.svelte
  67. 2
      packages/builder/src/components/userInterface/PageView.svelte
  68. 12
      packages/builder/src/components/userInterface/PagesList.svelte
  69. 2
      packages/builder/src/components/userInterface/PropControl.svelte
  70. 1
      packages/builder/src/components/userInterface/PropertyControl.svelte
  71. 15
      packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
  72. 379
      packages/builder/src/components/userInterface/propertyCategories.js
  73. 6
      packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
  74. 18
      packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
  75. 6
      packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
  76. 2
      packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
  77. 8
      packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
  78. 22
      packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
  79. 29
      packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
  80. 6
      packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
  81. 6
      packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
  82. 4
      packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
  83. 63
      packages/builder/src/fonts.css
  84. 114
      packages/builder/src/global.css
  85. 11
      packages/builder/src/main.js
  86. 14
      packages/builder/src/pages/[application]/_reset.svelte
  87. 2
      packages/builder/src/pages/[application]/backend/_layout.svelte
  88. 4
      packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
  89. 6
      packages/builder/src/pages/[application]/frontend/_layout.svelte
  90. 6
      packages/builder/src/pages/[application]/workflow/_layout.svelte
  91. 7
      packages/builder/src/pages/_layout.svelte
  92. 6
      packages/builder/src/pages/index.svelte
  93. BIN
      packages/server/builder/assets/Inter-Black.woff
  94. BIN
      packages/server/builder/assets/Inter-Black.woff2
  95. BIN
      packages/server/builder/assets/Inter-Bold.woff
  96. BIN
      packages/server/builder/assets/Inter-Bold.woff2
  97. BIN
      packages/server/builder/assets/Inter-ExtraBold.woff
  98. BIN
      packages/server/builder/assets/Inter-ExtraBold.woff2
  99. BIN
      packages/server/builder/assets/Inter-Medium.woff
  100. BIN
      packages/server/builder/assets/Inter-Medium.woff2

BIN
packages/builder/assets/Inter-Black.woff
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Black.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Bold.woff
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Bold.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-ExtraBold.woff
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-ExtraBold.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Medium.woff
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Medium.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Regular.woff
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-Regular.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-SemiBold.woff
View File

Binary file not shown.

BIN
packages/builder/assets/Inter-SemiBold.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-300.woff
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-500.woff
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-700.woff
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-900.woff
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff
View File

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2
View File

Binary file not shown.

2
packages/builder/package.json
View File

@ -50,7 +50,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@budibase/bbui": "^1.8.0", "@budibase/bbui": "^1.10.1",
"@budibase/client": "^0.0.32", "@budibase/client": "^0.0.32",
"@nx-js/compiler-util": "^2.0.0", "@nx-js/compiler-util": "^2.0.0",
"codemirror": "^5.51.0", "codemirror": "^5.51.0",

22
packages/builder/src/budibase.css
View File

@ -57,13 +57,14 @@
.budibase__nav-item { .budibase__nav-item {
cursor: pointer; cursor: pointer;
padding: 0 4px 0 2px; padding: 0 4px 0 2px;
height: 35px; height: 36px;
margin: 5px 0px 4px 0px; margin: 0px 0px 0px 0px;
border-radius: 0 5px 5px 0; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
transition: 0.2s; transition: 0.2s;
border-top: var(--grey-1) .5px solid;
} }
.budibase__nav-item.selected { .budibase__nav-item.selected {
@ -72,15 +73,14 @@
} }
.budibase__nav-item:hover { .budibase__nav-item:hover {
background: var(--grey-light); background: var(--grey-1);
} }
.budibase__input { .budibase__input {
height: 35px; height: 36px;
width: 100%; width: 220px;
max-width: 220px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
text-align: left; text-align: left;
color: var(--ink); color: var(--ink);
font-size: 14px; font-size: 14px;
@ -100,7 +100,7 @@
} }
.budibase__table { .budibase__table {
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
} }
@ -116,12 +116,12 @@
} }
.budibase__table tr { .budibase__table tr {
border-bottom: 1px solid var(--grey-light); border-bottom: 1px solid var(--grey-1);
} }
.button--toggled { .button--toggled {
background: var(--blue-light); background: var(--blue-light);
color: var(--ink-light); color: var(--grey-7);
width: 40px; width: 40px;
height: 40px; height: 40px;
display: flex; display: flex;

2
packages/builder/src/components/common/ActionButton.svelte
View File

@ -41,7 +41,7 @@
.secondary { .secondary {
color: var(--ink); color: var(--ink);
border: solid 1px var(--grey-dark); border: solid 1px var(--grey-4);
background: white; background: white;
} }

44
packages/builder/src/components/common/Button.svelte
View File

@ -42,14 +42,14 @@
/* ---- PRIMARY ----*/ /* ---- PRIMARY ----*/
.primary { .primary {
background-color: var(--primary100); background-color: var(--blue);
border-color: var(--primary100); border-color: var(--blue);
color: var(--white); color: var(--white);
} }
.primary:hover { .primary:hover {
background-color: var(--primary75); background-color: var(--blue);
border-color: var(--primary75); border-color: var(--blue);
} }
.primary:active { .primary:active {
@ -59,8 +59,8 @@
.primary-outline { .primary-outline {
background-color: var(--white); background-color: var(--white);
border-color: var(--primary100); border-color: var(--blue);
color: var(--primary100); color: var(--blue);
} }
.primary-outline:hover { .primary-outline:hover {
@ -74,8 +74,8 @@
/* ---- secondary ----*/ /* ---- secondary ----*/
.secondary { .secondary {
background-color: var(--secondary100); background-color: var(--ink);
border-color: var(--secondary100); border-color: var(--ink);
color: var(--white); color: var(--white);
} }
@ -91,8 +91,8 @@
.secondary-outline { .secondary-outline {
background-color: var(--white); background-color: var(--white);
border-color: var(--secondary100); border-color: var(--ink);
color: var(--secondary100); color: var(--ink);
} }
.secondary-outline:hover { .secondary-outline:hover {
@ -136,32 +136,36 @@
/* ---- deletion ----*/ /* ---- deletion ----*/
.deletion { .deletion {
background-color: var(--deletion100); background-color: var(--red);
border-color: var(--deletion100); border-color: var(--red);
color: var(--white); color: var(--white);
} }
.deletion:hover { .deletion:hover {
background-color: var(--deletion75); background-color: var(--red-light);
border-color: var(--deletion75); border-color: var(--red);
color: var(--red);
} }
.deletion:pressed { .deletion:pressed {
background-color: var(--deletiondark); background-color: var(--red-dark);
border-color: var(--deletiondark); border-color: var(--red-dark);
color: var(--white);
} }
.deletion-outline { .deletion-outline {
background-color: var(--white); background-color: var(--white);
border-color: var(--deletion100); border-color: var(--red);
color: var(--deletion100); color: var(--red);
} }
.deletion-outline:hover { .deletion-outline:hover {
background-color: var(--deletion10); background-color: var(--red-light);
color: var(--red);
} }
.deletion-outline:pressed { .deletion-outline:pressed {
background-color: var(--deletion25); background-color: var(--red-dark);
color: var(--white);
} }
</style> </style>

2
packages/builder/src/components/common/CodeArea.svelte
View File

@ -11,7 +11,7 @@
padding: 10px; padding: 10px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
background: var(--secondary80); background: var(--grey-7);
color: var(--white); color: var(--white);
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
height: 200px; height: 200px;

2
packages/builder/src/components/common/ConfirmDialog.svelte
View File

@ -54,7 +54,7 @@
<style> <style>
.uk-modal-footer { .uk-modal-footer {
background: var(--lightslate); background: var(--grey-1);
} }
.uk-modal-dialog { .uk-modal-dialog {

2
packages/builder/src/components/common/IconButton.svelte
View File

@ -4,7 +4,7 @@
export let size = 18 export let size = 18
export let icon = "" export let icon = ""
export let style = "" export let style = ""
export let color = "var(--secondary100)" export let color = "var(--ink)"
export let hoverColor = "var(--secondary75)" export let hoverColor = "var(--secondary75)"
export let attributes = {} export let attributes = {}

19
packages/builder/src/components/common/Input.svelte
View File

@ -37,19 +37,18 @@
<style> <style>
input { input {
/* width: 32px; */ /* width: 32px; */
height: 32px; height: 36px;
font-size: 12px; font-size: 14px;
font-weight: 700; font-weight: 400;
margin: 0px 0px 0px 1px; margin: 0px 0px 0px 2px;
color: var(--ink); color: var(--ink);
opacity: 0.7; padding: 0px 8px;
padding: 0px 4px; font-family: inter;
line-height: 1.3;
/* padding: 12px; */
width: 164px; width: 164px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--grey); background-color: var(--grey-2);
border-radius: 2px; border-radius: 4px;
border: 1px solid var(--grey-2);
outline: none; outline: none;
} }

4
packages/builder/src/components/common/PlusButton.svelte
View File

@ -17,7 +17,7 @@
align-items: center; align-items: center;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 700; font-weight: 600;
color: var(--secondary100); color: var(--ink);
} }
</style> </style>

2
packages/builder/src/components/common/Select.svelte
View File

@ -21,7 +21,7 @@
.select-container { .select-container {
font-size: 14px; font-size: 14px;
position: relative; position: relative;
border: var(--grey-dark) 1px solid; border: var(--grey-4) 1px solid;
} }
.adjusted { .adjusted {

7
packages/builder/src/components/common/Switcher.svelte
View File

@ -43,7 +43,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 20px; padding: 20px 20px;
border-left: solid 1px var(--grey); border-left: solid 1px var(--grey-2);
box-sizing: border-box; box-sizing: border-box;
} }
@ -60,10 +60,11 @@
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 600;
color: var(--ink-lighter); color: var(--grey-5);
margin-right: 20px; margin-right: 20px;
background: none; background: none;
outline: none;
} }
.switcher > .selected { .switcher > .selected {

9
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -157,7 +157,7 @@
} }
table { table {
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
border-collapse: collapse; border-collapse: collapse;
@ -165,7 +165,7 @@
thead { thead {
background: var(--blue-light); background: var(--blue-light);
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
} }
thead th { thead th {
@ -174,18 +174,17 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
letter-spacing: 1px;
} }
tbody tr { tbody tr {
border-bottom: 1px solid var(--grey-dark); border-bottom: 1px solid var(--grey-4);
transition: 0.3s background-color; transition: 0.3s background-color;
color: var(--ink); color: var(--ink);
font-size: 14px; font-size: 14px;
} }
tbody tr:hover { tbody tr:hover {
background: var(--grey-light); background: var(--grey-1);
} }
.table-controls { .table-controls {

7
packages/builder/src/components/database/ModelDataTable/TablePagination.svelte
View File

@ -58,20 +58,19 @@
padding: 10px; padding: 10px;
margin: 0; margin: 0;
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid var(--grey-4);
text-transform: capitalize; text-transform: capitalize;
border-radius: 3px; border-radius: 3px;
font-family: Roboto;
min-width: 20px; min-width: 20px;
transition: 0.3s background-color; transition: 0.3s background-color;
} }
.pagination__buttons button:hover { .pagination__buttons button:hover {
cursor: pointer; cursor: pointer;
background-color: #fafafa; background-color: var(--grey-1);
} }
.selected { .selected {
color: var(--button-text); color: var(--blue);
} }
</style> </style>

2
packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
View File

@ -34,7 +34,7 @@
} }
footer { footer {
padding: 20px; padding: 20px;
background: #fafafa; background: var(--grey-1);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
</style> </style>

4
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
View File

@ -130,7 +130,7 @@
} }
tbody > tr:hover { tbody > tr:hover {
background-color: var(--grey-light); background-color: var(--grey-1);
} }
.table-controls { .table-controls {
@ -156,7 +156,7 @@
} }
footer { footer {
background-color: var(--grey-light); background-color: var(--grey-1);
margin-top: 40px; margin-top: 40px;
padding: 20px 40px 20px 40px; padding: 20px 40px 20px 40px;
display: flex; display: flex;

2
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View File

@ -132,7 +132,7 @@
footer { footer {
padding: 20px; padding: 20px;
background: #fafafa; background: var(--grey-1);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
</style> </style>

4
packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
View File

@ -96,7 +96,7 @@
.snippet-selector__heading { .snippet-selector__heading {
margin-right: 20px; margin-right: 20px;
font-size: 14px; font-size: 14px;
color: var(--ink-lighter); color: var(--grey-5);
} }
.header { .header {
@ -116,7 +116,7 @@
.buttons { .buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
background-color: var(--grey-light); background-color: var(--grey-1);
margin: 0 40px; margin: 0 40px;
padding: 20px 0; padding: 20px 0;
} }

4
packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
View File

@ -69,7 +69,7 @@
.title { .title {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 600;
color: var(--ink); color: var(--ink);
margin-left: 12px; margin-left: 12px;
} }
@ -84,7 +84,7 @@
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding: 20px; padding: 20px;
background: var(--grey-light); background: var(--grey-1);
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
} }

4
packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
View File

@ -37,13 +37,13 @@
<style> <style>
.alert { .alert {
color: rgba(255, 0, 31, 1); color: rgba(255, 0, 31, 1);
background: #fafafa; background: var(--grey-1);
padding: 5px; padding: 5px;
} }
.modal-actions { .modal-actions {
padding: 10px; padding: 10px;
background: #fafafa; background: var(--grey-1);
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }

3
packages/builder/src/components/nav/DatabasesList.svelte
View File

@ -50,7 +50,7 @@
<style> <style>
.root { .root {
font-size: 13px; font-size: 13px;
color: var(--secondary100); color: var(--ink);
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
} }
@ -76,7 +76,6 @@
margin: 0 0 0 6px; margin: 0 0 0 6px;
padding: 0; padding: 0;
border: none; border: none;
font-family: Roboto;
font-size: 13px; font-size: 13px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;

1
packages/builder/src/components/nav/UsersList.svelte
View File

@ -64,7 +64,6 @@
margin: 0 0 0 6px; margin: 0 0 0 6px;
padding: 0; padding: 0;
border: none; border: none;
font-family: Roboto;
font-size: 13px; font-size: 13px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;

12
packages/builder/src/components/start/AppCard.svelte
View File

@ -21,23 +21,25 @@
max-width: 400px; max-width: 400px;
max-height: 150px; max-height: 150px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--grey-medium); border: 1px solid var(--grey-4);
} }
.app-button:hover { .app-button:hover {
background-color: var(--grey-light); background-color: var(--grey-1);
text-decoration: none; text-decoration: none;
} }
.app-title { .app-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 600;
color: var(--ink); color: var(--ink);
text-transform: capitalize; text-transform: capitalize;
font-family: Inter;
} }
.app-desc { .app-desc {
color: var(--ink-light); color: var(--grey-7);
font-family: Inter;
} }
.card-footer { .card-footer {
@ -56,7 +58,7 @@
justify-content: center; justify-content: center;
padding: 12px 20px; padding: 12px 20px;
border-radius: 5px; border-radius: 5px;
border: 1px var(--grey) solid; border: 1px var(--grey-2) solid;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;

10
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -142,11 +142,11 @@
background-color: var(--blue-light); background-color: var(--blue-light);
} }
.info { .info {
color: var(--primary100); color: var(--blue);
text-decoration-color: var(--primary100); text-decoration-color: var(--blue);
} }
.info :global(svg) { .info :global(svg) {
fill: var(--primary100); fill: var(--blue);
margin-right: 8px; margin-right: 8px;
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -164,7 +164,7 @@
padding: 30px 40px; padding: 30px 40px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 50px; border-bottom-right-radius: 50px;
background-color: var(--grey-light); background-color: var(--grey-1);
} }
.spinner-container { .spinner-container {
background: white; background: white;
@ -183,7 +183,7 @@
font-size: 2em; font-size: 2em;
} }
.error { .error {
color: var(--deletion100); color: var(--red);
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;
} }

4
packages/builder/src/components/userInterface/CategoryTab.svelte
View File

@ -21,11 +21,11 @@
display: flex; display: flex;
list-style: none; list-style: none;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 600;
} }
li { li {
color: var(--ink-lighter); color: var(--grey-5);
cursor: pointer; cursor: pointer;
margin-right: 20px; margin-right: 20px;
} }

20
packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
View File

@ -151,19 +151,27 @@
<div class="colorpicker-container"> <div class="colorpicker-container">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} /> <div class="palette-panel">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
</div>
<div class="control-panel"> <div class="control-panel">
<div class="alpha-hue-panel"> <div class="alpha-hue-panel">
<div> <div>
<div class="selected-color" style={`background: ${value}`} /> <CheckedBackground borderRadius="50%" backgroundSize="8px">
<div class="selected-color" {style} />
</CheckedBackground>
</div> </div>
<div> <div>
<Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} /> <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
<Slider
type="alpha" <CheckedBackground borderRadius="10px" backgroundSize="7px">
value={a} <Slider
on:change={alpha => setAlpha(alpha.detail)} /> type="alpha"
value={a}
on:change={alpha => setAlpha(alpha.detail)} />
</CheckedBackground>
</div> </div>
</div> </div>

9
packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
View File

@ -41,15 +41,6 @@
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);` $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
</script> </script>
<div
bind:this={palette}
bind:clientHeight={paletteHeight}
bind:clientWidth={paletteWidth}
on:click={handleClick}
class="palette"
{style}>
<div class="picker" style={pickerStyle} />
</div>
<CheckedBackground width="100%"> <CheckedBackground width="100%">
<div <div
bind:this={palette} bind:this={palette}

8
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -257,21 +257,21 @@
.menu li:not(.disabled) { .menu li:not(.disabled) {
cursor: pointer; cursor: pointer;
color: var(--ink-light); color: var(--grey-7);
} }
.menu li:not(.disabled):hover { .menu li:not(.disabled):hover {
color: var(--ink); color: var(--ink);
background-color: var(--grey-light); background-color: var(--grey-1);
} }
.disabled { .disabled {
color: var(--grey-dark); color: var(--grey-4);
cursor: default; cursor: default;
} }
.hr-style { .hr-style {
margin: 8px 0; margin: 8px 0;
color: var(--grey-dark); color: var(--grey-4);
} }
</style> </style>

6
packages/builder/src/components/userInterface/ComponentSearch.svelte
View File

@ -38,7 +38,7 @@
padding: 5px; padding: 5px;
border-style: solid; border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: var(--lightslate); border-color: var(--grey-1);
cursor: pointer; cursor: pointer;
} }
@ -48,12 +48,12 @@
.component > .title { .component > .title {
font-size: 13pt; font-size: 13pt;
color: var(--secondary100); color: var(--ink);
} }
.component > .description { .component > .description {
font-size: 10pt; font-size: 10pt;
color: var(--primary75); color: var(--blue);
font-style: italic; font-style: italic;
} }
</style> </style>

8
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

@ -77,8 +77,7 @@
} }
.title { .title {
margin-left: 10px; margin-left: 14px;
margin-top: 2px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
} }
@ -87,9 +86,8 @@
display: inline-block; display: inline-block;
transition: 0.2s; transition: 0.2s;
font-size: 24px; font-size: 24px;
width: 20px; width: 18px;
margin-top: 2px; color: var(--grey-7);
color: var(--ink-light);
} }
.icon:nth-of-type(2) { .icon:nth-of-type(2) {

8
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -39,7 +39,7 @@
<div <div
class="budibase__nav-item item" class="budibase__nav-item item"
class:selected={currentComponent === component} class:selected={currentComponent === component}
style="padding-left: {level * 20 + 53}px"> style="padding-left: {level * 20 + 40}px">
<div class="nav-item"> <div class="nav-item">
<i class="icon ri-arrow-right-circle-fill" /> <i class="icon ri-arrow-right-circle-fill" />
{get_capitalised_name(component._component)} {get_capitalised_name(component._component)}
@ -73,7 +73,7 @@
padding: 0px 5px 0px 15px; padding: 0px 5px 0px 15px;
margin: auto 0px; margin: auto 0px;
border-radius: 3px; border-radius: 3px;
height: 35px; height: 36px;
align-items: center; align-items: center;
} }
@ -90,7 +90,7 @@
} }
.item:hover { .item:hover {
background: var(--grey-light); background: var(--grey-1);
cursor: pointer; cursor: pointer;
} }
.item:hover .actions { .item:hover .actions {
@ -105,7 +105,7 @@
} }
.icon { .icon {
color: var(--ink-light); color: var(--grey-7);
margin-right: 8px; margin-right: 8px;
} }
</style> </style>

6
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View File

@ -55,7 +55,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 5px 20px 10px; padding: 20px 5px 20px 10px;
border-left: solid 1px var(--grey); border-left: solid 1px var(--grey-2);
} }
.switcher { .switcher {
@ -70,8 +70,8 @@
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 600;
color: var(--ink-lighter); color: var(--grey-5);
margin-right: 20px; margin-right: 20px;
} }

1
packages/builder/src/components/userInterface/DesignView.svelte
View File

@ -19,7 +19,6 @@
{ value: "normal", text: "Normal" }, { value: "normal", text: "Normal" },
{ value: "hover", text: "Hover" }, { value: "hover", text: "Hover" },
{ value: "active", text: "Active" }, { value: "active", text: "Active" },
{ value: "selected", text: "Selected" },
] ]
$: propertyGroupNames = Object.keys(panelDefinition) $: propertyGroupNames = Object.keys(panelDefinition)

2
packages/builder/src/components/userInterface/EditComponentProps.svelte
View File

@ -53,7 +53,7 @@
.title > div:nth-child(1) { .title > div:nth-child(1) {
grid-column-start: name; grid-column-start: name;
color: var(--secondary100); color: var(--ink);
} }
.title > div:nth-child(2) { .title > div:nth-child(2) {

2
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -165,7 +165,7 @@
padding: 30px 40px; padding: 30px 40px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 50px; border-bottom-right-radius: 50px;
background-color: var(--grey-light); background-color: var(--grey-1);
} }
.save { .save {
margin-left: 20px; margin-left: 20px;

8
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View File

@ -93,7 +93,7 @@
.newevent { .newevent {
cursor: pointer; cursor: pointer;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
border-radius: 3px; border-radius: 3px;
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
@ -109,7 +109,7 @@
} }
.newevent:hover { .newevent:hover {
background: var(--grey-light); background: var(--grey-1);
} }
.icon { .icon {
@ -155,7 +155,7 @@
} }
.selected { .selected {
color: var(--button-text); color: var(--blue);
background: var(--background-button) !important; background: var(--grey-1) !important;
} }
</style> </style>

23
packages/builder/src/components/userInterface/FlatButton.svelte
View File

@ -3,20 +3,13 @@
export let value = "" export let value = ""
export let text = "" export let text = ""
export let icon = "" export let icon = ""
export let padding = "8px 5px;"
export let onClick = value => {} export let onClick = value => {}
export let selected = false export let selected = false
export let fontWeight = ""
$: style = buildStyle({ padding, fontWeight })
$: useIcon = !!icon $: useIcon = !!icon
</script> </script>
<div <div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
class="flatbutton"
{style}
class:selected
on:click={() => onClick(value || text)}>
{#if useIcon} {#if useIcon}
<i class={icon} /> <i class={icon} />
{:else} {:else}
@ -29,25 +22,27 @@
<style> <style>
.flatbutton { .flatbutton {
cursor: pointer; cursor: pointer;
max-height: 36px;
padding: 8px 2px; padding: 8px 2px;
display: flex;
align-items: center;
justify-content: center;
text-align: center; text-align: center;
background: #ffffff; background: #ffffff;
color: var(--ink-light); color: var(--grey-7);
border-radius: 5px; border-radius: 5px;
font-family: Roboto;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
transition: all 0.3s; transition: all 0.3s;
margin-left: 5px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
.selected { .selected {
background: var(--ink-light); background: var(--grey-3);
color: #ffffff; color: var(--ink);
} }
i { i {
font-size: 20px; font-size: 16px;
} }
</style> </style>

1
packages/builder/src/components/userInterface/FlatButtonGroup.svelte
View File

@ -46,6 +46,7 @@
<style> <style>
.flatbutton-group { .flatbutton-group {
display: flex; display: flex;
width: 100%;
} }
.button-container { .button-container {

20
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View File

@ -14,10 +14,7 @@
<PagesList /> <PagesList />
<button class="newscreen" on:click={newScreen}> <button class="newscreen" on:click={newScreen}>Create New Screen</button>
<i class="icon ri-add-circle-fill" />
Create New Screen
</button>
<PageLayout layout={$store.pages[$store.currentPageName]} /> <PageLayout layout={$store.pages[$store.currentPageName]} />
@ -30,23 +27,26 @@
<style> <style>
.newscreen { .newscreen {
cursor: pointer; cursor: pointer;
border: 1px solid var(--grey-dark); border: 1px solid var(--purple);
border-radius: 3px; border-radius: 5px;
width: 100%; width: 100%;
height: 36px;
padding: 8px 16px; padding: 8px 16px;
margin: 20px 0px 12px 0px; margin: 20px 0px 12px 0px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: white; background: var(--purple);
color: var(--ink); color: var(--white);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
transition: all 2ms; transition: all 3ms;
outline: none;
} }
.newscreen:hover { .newscreen:hover {
background: var(--grey-light); background: var(--purple-light);
color: var(--purple);
} }
.icon { .icon {

6
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View File

@ -28,12 +28,12 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 8px; margin-right: 8px;
background-color: var(--grey-light); background-color: var(--grey-1);
border-radius: 3px; border-radius: 3px;
} }
.item-item:hover { .item-item:hover {
background: var(--grey); background: var(--grey-2);
border-radius: 3px; border-radius: 3px;
transition: all 0.2s; transition: all 0.2s;
} }
@ -55,6 +55,6 @@
i { i {
font-size: 24px; font-size: 24px;
color: var(--ink-light); color: var(--grey-7);
} }
</style> </style>

9
packages/builder/src/components/userInterface/LayoutEditor.svelte
View File

@ -132,8 +132,8 @@
h3 { h3 {
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 600;
color: #000333; color: var(--ink);
opacity: 0.6; opacity: 0.6;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -142,16 +142,15 @@
text-transform: uppercase; text-transform: uppercase;
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
color: #000333; color: var(--ink);
opacity: 0.4; opacity: 0.4;
letter-spacing: 1px;
margin-bottom: 10px; margin-bottom: 10px;
} }
h5 { h5 {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #000333; color: var(--ink);
opacity: 0.8; opacity: 0.8;
padding-top: 13px; padding-top: 13px;
margin-bottom: 0; margin-bottom: 0;

4
packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
View File

@ -50,7 +50,7 @@
<style> <style>
.selected { .selected {
color: var(--button-text); color: var(--blue);
background: #f9f9f9; background: #f9f9f9;
opacity: 1; opacity: 1;
} }
@ -70,7 +70,7 @@
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
color: #000333; color: var(--ink);
} }
.inputs { .inputs {

6
packages/builder/src/components/userInterface/NewScreen.svelte
View File

@ -137,7 +137,7 @@
padding-bottom: 10px; padding-bottom: 10px;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color: var(--secondary80); color: var(--grey-7);
} }
.uk-input { .uk-input {
@ -148,8 +148,8 @@
.uk-select { .uk-select {
height: 40px !important; height: 40px !important;
font-weight: 500px; font-weight: 500px;
color: var(--secondary60); color: var(--grey-5);
border: 1px solid var(--slate); border: 1px solid var(--grey-2);
border-radius: 3px; border-radius: 3px;
} }
</style> </style>

32
packages/builder/src/components/userInterface/OptionSelect.svelte
View File

@ -142,24 +142,24 @@
position: relative; position: relative;
outline: none; outline: none;
width: 160px; width: 160px;
height: 32px; height: 36px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 14px;
} }
.bb-select-anchor { .bb-select-anchor {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
padding: 5px 10px; padding: 0px 12px;
background-color: #f2f2f2; height: 36px;
border-radius: 2px; background-color: var(--grey-2);
border: 1px solid var(--grey-dark); border-radius: 5px;
align-items: center; align-items: center;
} }
.bb-select-anchor > span { .bb-select-anchor > span {
color: #565a66; color: var(--ink);
font-weight: 500; font-weight: 400;
width: 140px; width: 140px;
overflow-x: hidden; overflow-x: hidden;
} }
@ -173,8 +173,8 @@
} }
.selected { .selected {
color: #565a66; color: var(--ink);
font-weight: 500; font-weight: 400;
} }
.bb-select-menu { .bb-select-menu {
@ -185,15 +185,15 @@
opacity: 0; opacity: 0;
width: 160px; width: 160px;
z-index: 2; z-index: 2;
color: #808192; color: var(--ink);
font-weight: 500; font-weight: 400;
height: fit-content !important; height: fit-content !important;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-right: 1px solid var(--grey-dark); border-right: 1px solid var(--grey-4);
border-left: 1px solid var(--grey-dark); border-left: 1px solid var(--grey-4);
border-bottom: 1px solid var(--grey-dark); border-bottom: 1px solid var(--grey-4);
background-color: #f2f2f2; background-color: var(--grey-2);
transform: scale(0); transform: scale(0);
transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1); transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
overflow-y: auto; overflow-y: auto;

6
packages/builder/src/components/userInterface/PageLayout.svelte
View File

@ -73,12 +73,12 @@
display: inline-block; display: inline-block;
transition: 0.2s; transition: 0.2s;
width: 20px; width: 20px;
color: var(--ink-light); color: var(--grey-7);
} }
.icon-big { .icon-big {
font-size: 24px; font-size: 20px;
color: var(--ink-light); color: var(--grey-7);
} }
:global(svg) { :global(svg) {

2
packages/builder/src/components/userInterface/PageView.svelte
View File

@ -59,7 +59,7 @@
padding: 15px; padding: 15px;
} }
.help-text { .help-text {
color: var(--slate); color: var(--grey-2);
font-size: 10pt; font-size: 10pt;
} }
</style> </style>

12
packages/builder/src/components/userInterface/PagesList.svelte
View File

@ -43,22 +43,24 @@
button { button {
cursor: pointer; cursor: pointer;
padding: 8px 16px; padding: 0px 16px;
height: 36px;
text-align: center; text-align: center;
background: #ffffff; background: #ffffff;
color: var(--ink-light); color: var(--grey-7);
border-radius: 5px; border-radius: 5px;
font-family: Roboto; font-family: inter;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
transition: all 0.3s; transition: all 0.3s;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
border: none !important; border: none !important;
transition: 0.2s; transition: 0.2s;
outline: none;
} }
.active { .active {
background: var(--ink-light); background: var(--grey-3);
color: var(--white); color: var(--ink);
} }
</style> </style>

2
packages/builder/src/components/userInterface/PropControl.svelte
View File

@ -38,7 +38,7 @@
word-wrap: break-word; word-wrap: break-word;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #000333; color: var(--ink);
opacity: 0.8; opacity: 0.8;
padding-top: 13px; padding-top: 13px;
margin-bottom: 0; margin-bottom: 0;

1
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -55,7 +55,6 @@
flex: 0 0 50px; flex: 0 0 50px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0px 5px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;

15
packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
View File

@ -100,7 +100,7 @@
grid-template-columns: 300px 1fr 300px; grid-template-columns: 300px 1fr 300px;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #fbfbfb; background: var(--grey-1);
} }
.ui-nav { .ui-nav {
@ -128,23 +128,21 @@
.components-nav-page { .components-nav-page {
font-size: 13px; font-size: 13px;
color: #000333; color: var(--ink);
text-transform: uppercase; text-transform: uppercase;
padding-left: 20px; padding-left: 20px;
margin-top: 20px; margin-top: 20px;
font-weight: 600; font-weight: 600;
opacity: 0.4; opacity: 0.4;
letter-spacing: 1px;
} }
.components-nav-header { .components-nav-header {
font-size: 13px; font-size: 13px;
color: #000333; color: var(--ink);
text-transform: uppercase; text-transform: uppercase;
margin-top: 20px; margin-top: 20px;
font-weight: 600; font-weight: 600;
opacity: 0.4; opacity: 0.4;
letter-spacing: 1px;
} }
.nav-header { .nav-header {
@ -184,21 +182,20 @@
vertical-align: bottom; vertical-align: bottom;
grid-column-start: button; grid-column-start: button;
cursor: pointer; cursor: pointer;
color: var(--primary75); color: var(--blue);
} }
.nav-group-header > div:nth-child(3):hover { .nav-group-header > div:nth-child(3):hover {
color: var(--primary75); color: var(--blue);
} }
.navigator-title { .navigator-title {
font-size: 14px; font-size: 14px;
color: var(--secondary100); color: var(--ink);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
padding: 0 20px 20px 20px; padding: 0 20px 20px 20px;
line-height: 1rem !important; line-height: 1rem !important;
letter-spacing: 1px;
} }
.components-list-container { .components-list-container {

379
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -1,6 +1,5 @@
import Input from "../common/Input.svelte" import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "./Colorpicker" import Colorpicker from "./Colorpicker"
/* /*
@ -14,7 +13,7 @@ export const layout = [
control: OptionSelect, control: OptionSelect,
initialValue: "", initialValue: "",
options: [ options: [
{ label: "", value: "" }, { label: "N/A ", value: "N/A" },
{ label: "Flex", value: "flex" }, { label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" }, { label: "Inline Flex", value: "inline-flex" },
], ],
@ -73,27 +72,169 @@ export const layout = [
}, },
] ]
const spacingMeta = [ export const margin = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
export const spacing = [
{ {
label: "Margin", label: "All sides",
key: "margin", key: "margin",
control: InputGroup, control: OptionSelect,
meta: spacingMeta, options: [
defaultValue: ["0", "0", "0", "0"], { label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Top",
key: "margin-top",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Right",
key: "margin-right",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
}, },
{ {
label: "Padding", label: "Bottom",
key: "padding-bottom",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Left",
key: "margin-left",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
]
export const padding = [
{
label: "All sides",
key: "padding", key: "padding",
control: InputGroup, control: OptionSelect,
meta: spacingMeta, options: [
defaultValue: ["0", "0", "0", "0"], { label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Top",
key: "padding-top",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Right",
key: "padding-right",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Bottom",
key: "padding-bottom",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Left",
key: "padding-left",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
}, },
] ]
@ -103,7 +244,6 @@ export const size = [
key: "width", key: "width",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
@ -111,39 +251,34 @@ export const size = [
key: "height", key: "height",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Min W", label: "Min Width",
key: "min-width", key: "min-width",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Min H", label: "Max Width",
key: "min-height", key: "max-width",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Max W", label: "Min Height",
key: "max-width", key: "min-height",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Max H", label: "Max Height",
key: "max-height", key: "max-height",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
] ]
@ -153,8 +288,9 @@ export const position = [
label: "Position", label: "Position",
key: "position", key: "position",
control: OptionSelect, control: OptionSelect,
initialValue: "Wrap", initialValue: "None",
options: [ options: [
{ label: "None", value: "none" },
{ label: "Static", value: "static" }, { label: "Static", value: "static" },
{ label: "Relative", value: "relative" }, { label: "Relative", value: "relative" },
{ label: "Fixed", value: "fixed" }, { label: "Fixed", value: "fixed" },
@ -167,7 +303,6 @@ export const position = [
key: "top", key: "top",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
@ -175,7 +310,6 @@ export const position = [
key: "right", key: "right",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
@ -183,7 +317,6 @@ export const position = [
key: "bottom", key: "bottom",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
@ -191,16 +324,13 @@ export const position = [
key: "left", key: "left",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
width: "48px",
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Z-index", label: "Z-index",
key: "z-index", key: "z-index",
control: Input, control: OptionSelect,
placeholder: "num", options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
width: "48px",
textAlign: "center",
}, },
] ]
@ -239,19 +369,28 @@ export const typography = [
{ {
label: "size", label: "size",
key: "font-size", key: "font-size",
defaultValue: "", control: OptionSelect,
control: Input, options: [
placeholder: "px", "8px",
width: "48px", "10px",
"12px",
"14px",
"16px",
"18px",
"20px",
"24px",
"32px",
"48px",
"60px",
"72px",
],
textAlign: "center", textAlign: "center",
}, },
{ {
label: "Line H", label: "Line H",
key: "line-height", key: "line-height",
control: Input, control: OptionSelect,
placeholder: "lh", options: ["1", "1.25", "1.5", "1.75", "2", "4"],
width: "48px",
textAlign: "center",
}, },
{ {
label: "Color", label: "Color",
@ -275,25 +414,20 @@ export const typography = [
key: "text-transform", key: "text-transform",
control: FlatButtonGroup, control: FlatButtonGroup,
buttonProps: [ buttonProps: [
{ text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" }, { text: "BB", value: "uppercase" },
{ text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" }, { text: "Bb", value: "capitalize" },
{ text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" }, { text: "bb", value: "lowercase" },
{ { text: "&times;", value: "none" },
text: "&times;",
padding: "0px 5px",
fontWeight: 500,
value: "none",
},
], ],
}, },
{ {
label: "Decoration", label: "Decoration",
key: "text-decoration-line", key: "text-decoration-line",
control: OptionSelect, control: OptionSelect,
defaultValue: "Underline", defaultValue: "None",
options: [ options: [
{ label: "Underline", value: "underline" },
{ label: "None", value: "none" }, { label: "None", value: "none" },
{ label: "Underline", value: "underline" },
{ label: "Overline", value: "overline" }, { label: "Overline", value: "overline" },
{ label: "Line-through", value: "line-through" }, { label: "Line-through", value: "line-through" },
{ label: "Under Over", value: "underline overline" }, { label: "Under Over", value: "underline overline" },
@ -308,11 +442,64 @@ export const background = [
control: Colorpicker, control: Colorpicker,
defaultValue: "#000", defaultValue: "#000",
}, },
{
label: "Gradient",
key: "background-image",
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "None" },
{
label: "Warm Flame",
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
},
{
label: "Night Fade",
value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
},
{
label: "Spring Warmth",
value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
},
{
label: "Sunny Morning",
value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
},
{
label: "Winter Neva",
value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
},
{
label: "Tempting Azure",
value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
},
{
label: "Heavy Rain",
value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
},
{
label: "Deep Blue",
value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
},
{
label: "Near Moon",
value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
},
{
label: "Wild Apple",
value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
},
{
label: "Plum Plate",
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
},
],
},
{ {
label: "Image", label: "Image",
key: "background-image", key: "background-image",
control: Input, control: Input,
placeholder: "src", placeholder: "Src",
}, },
] ]
@ -324,11 +511,13 @@ export const border = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "small", value: "0.125rem" }, { label: "X Small", value: "0.125rem" },
{ label: "Medium", value: "0.25rem;" }, { label: "Small", value: "0.25rem" },
{ label: "Large", value: "0.375rem" }, { label: "Medium", value: "0.5rem" },
{ label: "Extra large", value: "0.5rem" }, { label: "Large", value: "1rem" },
{ label: "Full", value: "5678px" }, { label: "X Large", value: "2rem" },
{ label: "XX Large", value: "4rem" },
{ label: "Round", value: "5678px" },
], ],
}, },
{ {
@ -338,11 +527,11 @@ export const border = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "0" }, { label: "None", value: "0" },
{ label: "Extra small", value: "0.5px" }, { label: "X Small", value: "0.5px" },
{ label: "Small", value: "1px" }, { label: "Small", value: "1px" },
{ label: "Medium", value: "2px" }, { label: "Medium", value: "2px" },
{ label: "Large", value: "4px" }, { label: "Large", value: "4px" },
{ label: "Extra large", value: "8px" }, { label: "X large", value: "8px" },
], ],
}, },
{ {
@ -357,16 +546,16 @@ export const border = [
control: OptionSelect, control: OptionSelect,
defaultValue: "None", defaultValue: "None",
options: [ options: [
"none", "None",
"hidden", "Hidden",
"dotted", "Dotted",
"dashed", "Dashed",
"solid", "Solid",
"double", "Double",
"groove", "Groove",
"ridge", "Ridge",
"inset", "Inset",
"outset", "Outset",
], ],
}, },
] ]
@ -375,28 +564,27 @@ export const effects = [
{ {
label: "Opacity", label: "Opacity",
key: "opacity", key: "opacity",
control: Input, control: OptionSelect,
width: "48px",
textAlign: "center", textAlign: "center",
placeholder: "%", options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
}, },
{ {
label: "Rotate", label: "Rotate",
key: "transform-rotate", key: "transform",
control: OptionSelect, control: OptionSelect,
defaultValue: "0", defaultValue: "0",
options: [ options: [
"0", { label: "None", value: "0" },
"45deg", { label: "45 deg", value: "rotate(45deg)" },
"90deg", { label: "90 deg", value: "rotate(90deg)" },
"90deg", { label: "135 deg", value: "rotate(135deg)" },
"135deg", { label: "180 deg", value: "rotate(180deg)" },
"180deg", { label: "225 deg", value: "rotate(225deg)" },
"225deg", { label: "270 deg", value: "rotate(270deg)" },
"270deg", { label: "315 deg", value: "rotate(315deg)" },
"315dev", { label: "360 deg", value: "rotate(360deg)" },
], ],
}, //needs special control },
{ {
label: "Shadow", label: "Shadow",
key: "box-shadow", key: "box-shadow",
@ -404,7 +592,7 @@ export const effects = [
defaultValue: "None", defaultValue: "None",
options: [ options: [
{ label: "None", value: "none" }, { label: "None", value: "none" },
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" }, { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{ {
label: "Small", label: "Small",
value: value:
@ -421,7 +609,7 @@ export const effects = [
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
}, },
{ {
label: "Extra large", label: "X Large",
value: value:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
}, },
@ -453,10 +641,10 @@ export const transitions = [
{ {
label: "Duration", label: "Duration",
key: "transition-duration", key: "transition-duration",
control: Input, control: OptionSelect,
width: "48px",
textAlign: "center", textAlign: "center",
placeholder: "sec", placeholder: "sec",
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
}, },
{ {
label: "Ease", label: "Ease",
@ -468,7 +656,8 @@ export const transitions = [
export const all = { export const all = {
layout, layout,
spacing, margin,
padding,
size, size,
position, position,
typography, typography,

6
packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
View File

@ -41,7 +41,7 @@
<style> <style>
header { header {
font-size: 24px; font-size: 24px;
color: var(--font); color: var(--ink);
font-weight: bold; font-weight: bold;
padding: 30px; padding: 30px;
} }
@ -50,7 +50,7 @@
margin-right: 10px; margin-right: 10px;
font-size: 20px; font-size: 20px;
background: var(--secondary); background: var(--secondary);
color: var(--dark-grey); color: var(--grey-4);
padding: 8px; padding: 8px;
} }
@ -69,7 +69,7 @@
grid-gap: 5px; grid-gap: 5px;
grid-auto-columns: 3fr 1fr 1fr; grid-auto-columns: 3fr 1fr 1fr;
padding: 20px; padding: 20px;
background: #fafafa; background: var(--grey-1);
border-radius: 0.5rem; border-radius: 0.5rem;
} }

18
packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
View File

@ -162,7 +162,7 @@
header { header {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 18px; margin-bottom: 18px;
@ -182,15 +182,15 @@
.config-item { .config-item {
margin: 0px 0px 4px 0px; margin: 0px 0px 4px 0px;
padding: 12px; padding: 12px 0px;
background: var(--light-grey);
} }
.budibase_input { .budibase_input {
height: 35px; height: 36px;
width: 220px; width: 244px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--grey-dark); background-color: var(--grey-2);
border: 1px solid var(--grey-2);
text-align: left; text-align: left;
color: var(--ink); color: var(--ink);
font-size: 14px; font-size: 14px;
@ -198,7 +198,7 @@
} }
header > span { header > span {
color: var(--ink-lighter); color: var(--grey-5);
margin-right: 20px; margin-right: 20px;
} }
@ -243,7 +243,7 @@
.workflow-button { .workflow-button {
cursor: pointer; cursor: pointer;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
border-radius: 3px; border-radius: 3px;
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
@ -259,7 +259,7 @@
} }
.workflow-button:hover { .workflow-button:hover {
background: var(--grey-light); background: var(--grey-1);
} }
.access-level { .access-level {

6
packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
View File

@ -67,16 +67,16 @@
<style> <style>
.block-field { .block-field {
border-radius: 3px; border-radius: 3px;
background: var(--grey-light); background: var(--grey-1);
padding: 12px; padding: 12px;
margin: 0px 0px 4px 0px; margin: 0px 0px 4px 0px;
} }
.budibase_input { .budibase_input {
height: 35px; height: 36px;
width: 220px; width: 220px;
border-radius: 3px; border-radius: 3px;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
text-align: left; text-align: left;
color: var(--ink); color: var(--ink);
font-size: 14px; font-size: 14px;

2
packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
View File

@ -85,6 +85,6 @@
} }
.stop-button.highlighted { .stop-button.highlighted {
background: var(--coral); background: var(--red);
} }
</style> </style>

8
packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
View File

@ -35,7 +35,7 @@
border-radius: 5px; border-radius: 5px;
transition: 0.3s all; transition: 0.3s all;
box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08); box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
background-color: var(--font); background-color: var(--ink);
font-size: 16px; font-size: 16px;
color: var(--white); color: var(--white);
} }
@ -54,17 +54,17 @@
.ACTION { .ACTION {
background-color: var(--white); background-color: var(--white);
color: var(--font); color: var(--ink);
} }
.TRIGGER { .TRIGGER {
background-color: var(--font); background-color: var(--ink);
color: var(--white); color: var(--white);
} }
.LOGIC { .LOGIC {
background-color: var(--secondary); background-color: var(--secondary);
color: var(--font); color: var(--ink);
} }
div:hover { div:hover {

22
packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
View File

@ -52,29 +52,31 @@
<style> <style>
.subtabs { .subtabs {
margin-top: 27px; margin-top: 20px;
display: grid; display: grid;
grid-gap: 5px;
grid-auto-flow: column; grid-auto-flow: column;
grid-auto-columns: 1fr 1fr 1fr; grid-auto-columns: 1fr 1fr 1fr;
margin-bottom: 10px; margin-bottom: 12px;
} }
.subtabs span { .subtabs span {
transition: 0.3s all; transition: 0.3s all;
text-align: center; text-align: center;
color: var(--dark-grey); color: var(--grey-7);
font-weight: 500; font-weight: 400;
padding: 10px; padding: 8px 16px;
text-rendering: optimizeLegibility;
border: none !important;
outline: none;
} }
.subtabs span.selected { .subtabs span.selected {
background: var(--dark-grey); background: var(--grey-3);
color: var(--white); color: var(--ink);
border-radius: 2px; border-radius: 5px;
} }
.subtabs span:not(.selected) { .subtabs span:not(.selected) {
color: var(--dark-grey); color: var(--ink);
} }
</style> </style>

29
packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
View File

@ -30,19 +30,34 @@
<style> <style>
.workflow-block { .workflow-block {
display: flex; display: grid;
padding: 20px; grid-template-columns: 40px auto;
align-items: center; align-items: center;
margin-top: 16px;
padding: 16px 0px;
border-radius: var(--border);
}
.workflow-block:hover {
background-color: var(--grey-1);
} }
.workflow-text { .workflow-text {
margin-left: 10px; margin-left: 12px;
}
.icon {
height: 40px;
width: 40px;
background: var(--blue-light);
display: flex;
align-items: center;
justify-content: center;
} }
i { i {
background: var(--secondary); color: var(--grey-7);
color: var(--dark-grey); font-size: 20px;
padding: 10px;
} }
h4 { h4 {
@ -53,7 +68,7 @@
p { p {
font-size: 12px; font-size: 12px;
color: var(--dark-grey); color: var(--grey-7);
margin: 0; margin: 0;
} }
</style> </style>

6
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
View File

@ -41,7 +41,7 @@
<style> <style>
header { header {
font-size: 24px; font-size: 24px;
color: var(--font); color: var(--ink);
font-weight: bold; font-weight: bold;
padding: 30px; padding: 30px;
} }
@ -50,7 +50,7 @@
margin-right: 10px; margin-right: 10px;
font-size: 20px; font-size: 20px;
background: var(--secondary); background: var(--secondary);
color: var(--dark-grey); color: var(--grey-4);
padding: 8px; padding: 8px;
} }
@ -69,7 +69,7 @@
grid-gap: 5px; grid-gap: 5px;
grid-auto-columns: 3fr 1fr 1fr; grid-auto-columns: 3fr 1fr 1fr;
padding: 20px; padding: 20px;
background: #fafafa; background: var(--grey-1);
border-radius: 0.5rem; border-radius: 0.5rem;
} }

6
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
View File

@ -89,7 +89,7 @@
.workflow-item:hover { .workflow-item:hover {
cursor: pointer; cursor: pointer;
background: var(--grey-light); background: var(--grey-1);
} }
.workflow-item.selected { .workflow-item.selected {
@ -98,7 +98,7 @@
.new-workflow-button { .new-workflow-button {
cursor: pointer; cursor: pointer;
border: 1px solid var(--grey-dark); border: 1px solid var(--grey-4);
border-radius: 3px; border-radius: 3px;
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
@ -113,7 +113,7 @@
} }
.new-workflow-button:hover { .new-workflow-button:hover {
background: var(--grey-light); background: var(--grey-1);
} }
.icon { .icon {

4
packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
View File

@ -35,7 +35,7 @@
<style> <style>
header { header {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 600;
background: none; background: none;
display: flex; display: flex;
align-items: center; align-items: center;
@ -47,7 +47,7 @@
} }
span:not(.selected) { span:not(.selected) {
color: var(--ink-lighter); color: var(--grey-5);
} }
span:not(.selected):hover { span:not(.selected):hover {

63
packages/builder/src/fonts.css
View File

@ -1,47 +1,56 @@
/* latin-ext */ /* latin-ext */
/* roboto-regular - latin-ext_latin */ /* Inter-regular - latin-ext_latin */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), src: local('Inter'), local('Inter-Regular'),
url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/_builder/assets/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('/_builder/assets/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* roboto-300 - latin-ext_latin */ /* Inter-500 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 500;
src: local('Roboto Light'), local('Roboto-Light'), src: local('Inter Medium'), local('Inter-Medium'),
url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/_builder/assets/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('/_builder/assets/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* roboto-500 - latin-ext_latin */ /* Inter-600 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 600;
src: local('Roboto Medium'), local('Roboto-Medium'), src: local('Inter SemiBold'), local('Inter-SemiBold'),
url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/_builder/assets/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('/_builder/assets/Inter-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Inter-700 - latin-ext_latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: local('Inter Bold'), local('Inter-Bold'),
url('/_builder/assets/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/_builder/assets/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* roboto-700 - latin-ext_latin */ /* Inter-800 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/_builder/assets/Inter-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('/_builder/assets/Inter-ExtraBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }
/* roboto-900 - latin-ext_latin */ /* Inter-900 - latin-ext_latin */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), src: local('Inter Black'), local('Inter-Black'),
url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/_builder/assets/Inter-Black.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('/_builder/assets/Inter-Black.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} }

114
packages/builder/src/global.css
View File

@ -8,96 +8,42 @@
--blue-dark: #2F4C9B; --blue-dark: #2F4C9B;
--ink: #393C44; --ink: #393C44;
--ink-light: #808192; --grey-7: #808192;
--ink-lighter: #ADAEC4; --grey-5: #ADAEC4;
--grey: #F2F2F2; --grey: #F2F2F2;
--grey-light: #FBFBFB; --grey-1: var(--grey-1);
--grey-medium: #e8e8ef; --grey-4: #e8e8ef;
--grey-dark: #E6E6E6; --grey-4: #E6E6E6;
--red: #E26D69; --red: #E26D69;
--red-light:#FFE6E6; --red-light:#FFE6E6;
--red-dark: #800400; --red-dark: #800400;
--primary100: #0055ff;
--primary80: rgba(0, 85, 255, 0.8);
--primary60: #rgba(0, 85, 255, 0.6);
--primary40: #rgba(0, 85, 255, 0.4);
--primary20: #rgba(0, 85, 255, 0.2);
--primary10: #rgba(0, 85, 255, 0.1);
--primary5: #rgba(0, 85, 255, 0.05);
--primarydark: #0044cc;
--secondary100:#393C44;
--secondary80: rgba(0, 3, 51, 0.8);
--secondary60: rgba(0, 3, 51, 0.6);
--secondary40: rgba(0, 3, 51, 0.4);
--secondary20: rgba(0, 3, 51, 0.2);
--secondary10: rgba(0, 3, 51, 0.1);
--secondary5: rgba(0, 3, 51, 0.05);
--secondarydark: #00021a;
--tertiary: #F2F5F7;
--success100: #49C39EFF;
--success75: #49C39EBF;
--success50: #49C39E80;
--success25: #49C39E40;
--success10: #49C39E1A;
--successdark: #44B492;
--deletion100: #F2545BFF;
--deletion75: #F2545BBF;
--deletion50: #F2545B80;
--deletion25: #F2545B40;
--deletion10: #F2545B1A;
--deletiondark: #CF4046;
--font-black: "Inter Black";
--darkslate: #1a202c; --font-bold: "Inter Bold";
--slate: #d8d8d8; --fontsemibold: "Inter Medium";
--lightslate: #f9f9f9; --font-normal: "Inter";
--borderradius: 2px; --bodytext: var(--font-normal) "regular" var(--secondary100) 16pt;
--borderradiusall: 2px 2px 2px 2px; --bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt;
--smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt;
--fontblack: "Roboto Black"; --lightbodytext: "regular" "normal" 16pt var(--font-normal);
--fontbold: "Roboto Bold"; --heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt;
--fontsemibold: "Roboto Medium"; --quotation: var(--font-normal) "italics" var(--darkslate) 16pt;
--fontnormal: "Roboto"; --smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt;
--fontlight: "Roboto Light";
--bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt;
--bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt;
--smallbodytext: var(--fontnormal) "regular" var(--secondary100) 12pt;
--lightbodytext: "regular" "normal" 16pt var(--fontnormal);
--heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt;
--quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
--smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
--background-button: #f9f9f9;
--button-text: #0055ff;
/* Budibase Styleguide Colors */
--primary: #0055ff;
--secondary: #f1f4fc;
--color: #393c44;
--light-grey: #fbfbfb;
--dark-grey: #808192;
--medium-grey: #e8e8ef;
--background: rgb(251, 251, 251);
--font: #393c44;
--coral: #eb5757;
} }
html, body { html, body {
font-family: var(--fontnormal); font-family: inter;
color: var(--secondary80); color: var(--ink);
padding: 0; padding: 0;
margin: 0; margin: 0;
height:100%; height: 100%;
width:100%; width: 100%;
} }
#app { #app {
@ -107,43 +53,43 @@ html, body {
} }
h1 { h1 {
font-family: var(--fontblack); font-family: var(--font-black);
font-size: 36pt; font-size: 36pt;
color: var(--secondary100); color: var(--secondary100);
} }
h2 { h2 {
font-family: var(--fontbold); font-family: var(--font-bold);
font-size: 30pt; font-size: 30pt;
color: var(--secondary100); color: var(--secondary100);
} }
h3 { h3 {
font-family: var(--fontbold); font-family: var(--font-bold);
font-size: 24pt; font-size: 24pt;
color: var(--secondary60); color: var(--secondary60);
} }
h4 { h4 {
font-family: var(--fontbold); font-family: var(--font-bold);
font-size: 18pt; font-size: 18pt;
color: var(--ink); color: var(--ink);
} }
h5 { h5 {
font-family: var(--fontblack); font-family: var(--font-black);
font-size: 14pt; font-size: 14pt;
color: var(--secondary100); color: var(--secondary100);
} }
h5 { h5 {
font-family: var(--fontblack); font-family: var(--font-black);
font-size: 12pt; font-size: 12pt;
color: var(--darkslate); color: var(--darkslate);
} }
textarea { textarea {
font-family: var(--fontnormal); font-family: var(--font-normal);
} }
.hoverable:hover { .hoverable:hover {

11
packages/builder/src/main.js
View File

@ -1,11 +1,12 @@
import "./global.css" import "./global.css"
import "./fonts.css" import "./fonts.css"
import "./budibase.css" import "./budibase.css"
import "/assets/roboto-v20-latin-ext_latin-300" import "/assets/Inter-Regular"
import "/assets/roboto-v20-latin-ext_latin-400" import "/assets/Inter-Medium"
import "/assets/roboto-v20-latin-ext_latin-500" import "/assets/Inter-SemiBold"
import "/assets/roboto-v20-latin-ext_latin-700" import "/assets/Inter-Bold"
import "/assets/roboto-v20-latin-ext_latin-900" import "/assets/Inter-ExtraBold"
import "/assets/Inter-Black"
import "/_builder/assets/budibase-logo.png" import "/_builder/assets/budibase-logo.png"
import "/_builder/assets/budibase-logo-only.png" import "/_builder/assets/budibase-logo-only.png"
import "uikit/dist/css/uikit.min.css" import "uikit/dist/css/uikit.min.css"

14
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -49,7 +49,7 @@
</span> </span>
{/each} {/each}
<!-- <IconButton icon="home" <!-- <IconButton icon="home"
color="var(--slate)" color="var(--grey-2)"
hoverColor="var(--secondary75)"/> --> hoverColor="var(--secondary75)"/> -->
</div> </div>
<div class="toprightnav"> <div class="toprightnav">
@ -91,7 +91,7 @@
a { a {
text-transform: none; text-transform: none;
color: var(--ink-lighter); color: var(--grey-5);
} }
.top-nav { .top-nav {
@ -103,7 +103,7 @@
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--grey); border-bottom: 1px solid var(--grey-2);
} }
.content > div { .content > div {
@ -122,18 +122,18 @@
.topnavitem { .topnavitem {
cursor: pointer; cursor: pointer;
color: var(--ink-lighter); color: var(--grey-5);
margin: 0px 00px 0px 20px; margin: 0px 00px 0px 20px;
padding-top: 4px; padding-top: 4px;
font-weight: 500; font-weight: 500;
font-size: 1rem; font-size: var(--font-size-md);
height: 100%; height: 100%;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
} }
.topnavitem:hover { .topnavitem:hover {
color: var(--ink-light); color: var(--grey-7);
font-weight: 500; font-weight: 500;
} }
@ -144,7 +144,7 @@
.topnavitemright { .topnavitemright {
cursor: pointer; cursor: pointer;
color: var(--ink-light); color: var(--grey-7);
margin: 0px 20px 0px 0px; margin: 0px 20px 0px 0px;
padding-top: 4px; padding-top: 4px;
font-weight: 500; font-weight: 500;

2
packages/builder/src/pages/[application]/backend/_layout.svelte
View File

@ -23,7 +23,7 @@
.root { .root {
height: 100%; height: 100%;
display: flex; display: flex;
background: #fafafa; background: var(--grey-1);
} }
.content { .content {

4
packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
View File

@ -28,9 +28,7 @@
{:else if $backendUiStore.selectedDatabase._id && selectedModel.name} {:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
<ModelDataTable /> <ModelDataTable />
{:else} {:else}
<i style="color: var(--grey-dark)"> <i style="color: var(--grey-4)">create your first model to start building</i>
create your first model to start building
</i>
{/if} {/if}
<style> <style>

6
packages/builder/src/pages/[application]/frontend/_layout.svelte
View File

@ -75,7 +75,7 @@
display: grid; display: grid;
grid-template-columns: 300px 1fr 300px; grid-template-columns: 300px 1fr 300px;
width: 100%; width: 100%;
background: var(--grey-light); background: var(--grey-1);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
align-items: stretch; align-items: stretch;
@ -116,10 +116,10 @@
vertical-align: bottom; vertical-align: bottom;
grid-column-start: button; grid-column-start: button;
cursor: pointer; cursor: pointer;
color: var(--primary75); color: var(--blue);
} }
.nav-group-header > div:nth-child(3):hover { .nav-group-header > div:nth-child(3):hover {
color: var(--primary75); color: var(--blue);
} }
</style> </style>

6
packages/builder/src/pages/[application]/workflow/_layout.svelte
View File

@ -22,13 +22,13 @@
<style> <style>
.content { .content {
position: relative; position: relative;
background: var(--background); background: var(--grey-1);
} }
.root { .root {
height: 100%; height: 100%;
display: flex; display: flex;
background: var(--grey-light); background: var(--grey-1);
} }
.content { .content {
@ -39,7 +39,7 @@
.nav { .nav {
overflow: auto; overflow: auto;
width: 300px; width: 300px;
border-right: 1px solid var(--grey); border-right: 1px solid var(--grey-2);
background: var(--white); background: var(--white);
} }

7
packages/builder/src/pages/_layout.svelte
View File

@ -36,7 +36,6 @@
<Link icon={DocumentationIcon} title="Documentation" href="/" /> <Link icon={DocumentationIcon} title="Documentation" href="/" />
<Link icon={TutorialsIcon} title="Tutorials" href="/" /> <Link icon={TutorialsIcon} title="Tutorials" href="/" />
<Link icon={CommunityIcon} title="Community" href="/" /> <Link icon={CommunityIcon} title="Community" href="/" />
<Link icon={ContributionIcon} title="Contact" href="/" />
</div> </div>
<div class="nav-section"> <div class="nav-section">
@ -63,7 +62,7 @@
grid-template-columns: 300px 1fr; grid-template-columns: 300px 1fr;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: var(--grey-light); background: var(--grey-1);
} }
.main { .main {
@ -76,7 +75,7 @@
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid var(--grey-medium); border-right: 1px solid var(--grey-4);
} }
.home-logo { .home-logo {
@ -98,7 +97,7 @@
.nav-section-title { .nav-section-title {
font-size: 20px; font-size: 20px;
color: var(--ink); color: var(--ink);
font-weight: 700; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>

6
packages/builder/src/pages/index.svelte
View File

@ -73,7 +73,7 @@
.welcome { .welcome {
font-size: 42px; font-size: 42px;
color: var(--ink); color: var(--ink);
font-weight: 900; font-weight: 700;
margin: 40px 0px 0px 80px; margin: 40px 0px 0px 80px;
} }
@ -136,7 +136,7 @@
.banner-button:hover { .banner-button:hover {
background-color: var(--white); background-color: var(--white);
color: var(--ink); color: var(--ink);
border: var(--grey-dark) 1px solid; border: var(--grey-4) 1px solid;
} }
.app-section-header { .app-section-header {
@ -149,7 +149,7 @@
.app-section-title { .app-section-title {
font-size: 20px; font-size: 20px;
color: var(--ink); color: var(--ink);
font-weight: 700; font-weight: 600;
margin-bottom: 20px; margin-bottom: 20px;
} }
</style> </style>

BIN
packages/server/builder/assets/Inter-Black.woff
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Black.woff2
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Bold.woff
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Bold.woff2
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-ExtraBold.woff
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-ExtraBold.woff2
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Medium.woff
View File

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Medium.woff2
View File

Binary file not shown.

Some files were not shown because too many files changed in this diff

Write Preview
Loading…
Cancel
Save