1 files changed, 160 insertions, 0 deletions
diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss
new file mode 100644
index 000000000..ebc44106d
--- /dev/null
+++ b/packages/components/src/global/globalCssVariables.scss
@@ -0,0 +1,160 @@
+// colors
+$white: #ffffff;
+$off-white: #fdfdfd;
+$light-gray: #dfdfdf;
+$medium-gray: #9f9f9f;
+$dark-gray: #323232;
+$black: #000000;
+$light-blue: #bdddf5;
+$light-blue-transparent: #bdddf590;
+$medium-blue: #4476f7;
+
+$medium-blue-transparent: #4477f733;
+
+$medium-blue-alt: #4476f73d;
+$pink: #e0217d;
+$yellow: #f5d747;
+
+$close-red: #e48282;
+
+$drop-shadow: '#32323215';
+
+//popup
+$success-green: #4bb543;
+$error-red: #ff9494;
+
+// background
+$hover-background: rgba(0, 0, 0, 0.2);
+$modal-background: rgba(0, 0, 0, 0.3);
+
+// sizes
+$xsmall: 20px;
+$small: 30px;
+$medium: 40px;
+$large: 50px;
+
+// text-sizes
+$icon-fontSize: 15px;
+$large-fontSize: 15px;
+$medium-fontSize: 11px;
+$small-fontSize: 9px;
+$xsmall-fontSize: 7px;
+
+// fonts
+$default-font: 'Roboto', Verdana, sans-serif;
+
+//padding
+$minimum-padding: 4px;
+$medium-padding: 16px;
+$large-padding: 32px;
+
+//icon sizes
+$icon-size: 28px;
+
+// fonts
+$sans-serif: 'Roboto', sans-serif;
+$large-header: 16px;
+$body-text: 12px;
+$small-text: 9px;
+// $sans-serif: "Roboto Slab", sans-serif;
+
+// misc values
+$search-thumnail-size: 130;
+$topbar-height: 50px;
+$antimodemenu-height: 36px;
+
+// dragged items
+$contextMenu-zindex: 100000; // context menu shows up over everything
+$radialMenu-zindex: 100000; // context menu shows up over everything
+
+// borders
+$standard-border: solid 1px #9f9f9f;
+$padding: 0px 5px;
+// border radius
+$standard-border-radius: 5px;
+
+// shadow
+$standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+$standard-button-shadow:
+    rgb(0 0 0 / 20%) 0px 2px 4px -1px,
+    rgb(0 0 0 / 14%) 0px 4px 5px 0px,
+    rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+
+$dashboardselector-height: 32px;
+$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
+$docDecorations-zindex: 998; // then doc decorations appear over everything else
+$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right?
+$COLLECTION_BORDER_WIDTH: 0;
+$SCHEMA_DIVIDER_WIDTH: 4;
+$MINIMIZED_ICON_SIZE: 24;
+$MAX_ROW_HEIGHT: 44px;
+$DFLT_IMAGE_NATIVE_DIM: 900px;
+$LEFT_MENU_WIDTH: 60px;
+$TREE_BULLET_WIDTH: 20px;
+
+:export {
+    contextMenuZindex: $contextMenu-zindex;
+    SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH;
+    COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH;
+    MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE;
+    MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
+    SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
+    ANTIMODEMENU_HEIGHT: $antimodemenu-height;
+    DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height;
+    DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM;
+    LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH;
+    TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH;
+}
+
+.form-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 0px;
+    padding-bottom: 5px;
+
+    .formLabel {
+        display: flex;
+        font-family: $default-font;
+        text-transform: uppercase;
+        opacity: 0.8;
+        min-width: 'fit-content';
+    }
+
+    &.left {
+        flex-direction: row;
+        align-items: center;
+        gap: 3px;
+
+        .formLabel {
+            text-align: left;
+        }
+    }
+
+    &.right {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 3px;
+
+        .formLabel {
+            text-align: right;
+        }
+    }
+
+    &.top {
+        flex-direction: column;
+        gap: 1px;
+    }
+
+    &.top-start {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &.top-end {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}