create-catalyst-app 0.0.1-beta.0

package/templates/common/src/static/css/base/animations.js

@@ -0,0 +1,38 @@
+export const pageTransitions = {
+    hidden: () => {
+        return {
+            x: 0,
+            opacity: 0,
+        }
+    },
+    visible: () => {
+        return {
+            x: 0,
+            opacity: 1,
+            transition: {
+                type: "spring",
+                delay: 0,
+                stiffness: 800,
+                damping: 65,
+                mass: 2,
+            },
+        }
+    },
+
+    exit: (params) => {
+        if (params?.showPageTransition === false) return { x: 0 }
+        else {
+            return {
+                x: params?.action === "POP" ? "50vw" : "-50vw",
+                opacity: 0,
+                transition: {
+                    type: "spring",
+                    delay: 0,
+                    stiffness: 800,
+                    damping: 65,
+                    mass: 2,
+                },
+            }
+        }
+    },
+}

package/templates/common/src/static/css/base/index.scss

@@ -0,0 +1,8 @@
+@import "typography";
+@import "layout";
+@import "styles";
+@import "overrides";
+
+
+@import "../resources/variables";
+@import "../resources/mixins";

package/templates/common/src/static/css/base/layout.scss

@@ -0,0 +1,242 @@
+.minHeight100 {
+    height: 100vh;
+}
+
+.containerFluid {
+    width: 100%;
+    padding: 8px 16px 16px;
+}
+
+.container-fluid {
+    // only to be used on VISUALLY root level elements (containers containing components) which do not have full width atoms/molecules inside it
+    width: 100%;
+    padding-left: 12px; // the only exception in the entire DLS to ensure an imaginary 16px indentation
+    padding-right: 12px;
+}
+
+.container-fluid-padded {
+    // same as the above
+    width: 100%;
+    padding: makespace(2) 12px;
+}
+
+.container-fluid-padded-xl {
+    width: 100%;
+    padding: makespace(3) 12px;
+}
+
+.gutter-only {
+    // to be used only in very very crucial scenarios. You almost NEVER need it, if think you do, you're doing something wrong at the atom level
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.fullWidth {
+    width: 100%;
+}
+
+.col-1 {
+    width: $col;
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.col-2 {
+    width: calc(calc(#{$col} * 2) + 8px);
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.col-3 {
+    width: calc(calc(#{$col} * 3) + 16px);
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.col-4 {
+    width: calc(calc(#{$col} * 4) + 24px);
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.col-5 {
+    width: calc(calc(#{$col} * 5) + 32px);
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.col-6 {
+    width: calc(calc(#{$col} * 6) + 40px);
+    margin-left: $gutter;
+    margin-right: $gutter;
+}
+
+.marginTop-4 {
+    margin-top: $gutter;
+}
+
+.marginTop-8 {
+    margin-top: makespace(1);
+}
+
+.marginTop-16 {
+    margin-top: makespace(2);
+}
+
+.marginTop-24 {
+    margin-top: makespace(3);
+}
+
+.marginTop-32 {
+    margin-top: makespace(4);
+}
+
+.marginTop-40 {
+    margin-top: makespace(5);
+}
+
+.marginTop-48 {
+    margin-top: makespace(6);
+}
+
+.marginBottom-24 {
+    margin-bottom: makespace(3);
+}
+
+.marginTop-96 {
+    margin-top: makespace(12);
+}
+
+.marginBoth-4 {
+    margin-top: $gutter;
+    margin-bottom: $gutter;
+}
+
+.marginBoth-8 {
+    margin-top: makespace(1);
+    margin-bottom: makespace(1);
+}
+
+.marginBoth-16 {
+    margin-top: makespace(2);
+    margin-bottom: makespace(2);
+}
+
+.marginBoth-24 {
+    margin-top: makespace(3);
+    margin-bottom: makespace(3);
+}
+
+.marginBoth-40 {
+    margin-top: makespace(5);
+    margin-bottom: makespace(5);
+}
+
+.marginBoth-48 {
+    margin-top: makespace(6);
+    margin-bottom: makespace(6);
+}
+
+.paddingBoth-8 {
+    padding-top: makespace(1);
+    padding-bottom: makespace(1);
+}
+
+.paddingBoth-16 {
+    padding-top: makespace(2);
+    padding-bottom: makespace(2);
+}
+
+.paddingBoth-40 {
+    padding-top: makespace(5);
+    padding-bottom: makespace(5);
+}
+
+// This is where most used flex attributes throughout our codebase should go
+
+.flex {
+    display: flex;
+}
+
+.flexColumn {
+    display: flex;
+    flex-direction: column;
+}
+
+.flexWrap {
+    flex-wrap: wrap;
+}
+
+.alignCenter {
+    align-items: center;
+}
+
+.alignBase {
+    align-items: baseline;
+}
+
+.alignFlexEnd {
+    align-items: flex-end;
+}
+
+.justifyCenter {
+    justify-content: center;
+}
+
+.justifyBetween {
+    justify-content: space-between;
+}
+
+.justifyEnd {
+    justify-content: flex-end;
+}
+
+.spaceAround {
+    justify-content: space-around;
+}
+
+.middleDivider {
+    margin-left: makespace(2);
+    margin-right: makespace(2);
+}
+
+.insetDivider {
+    margin-left: makespace(1);
+    margin-right: makespace(1);
+}
+
+.displayNone {
+    display: none;
+}
+
+.textCenter {
+    text-align: center;
+}
+
+.textRight {
+    text-align: right;
+}
+
+.textUnderline {
+    text-decoration: underline;
+}
+
+.minHeight-100 {
+    min-height: 100vh;
+}
+
+.smallBorderRadius {
+    border-radius: 4px;
+}
+
+.borderRadius {
+    border-radius: makespace(1);
+}
+
+//WIDGET
+
+.widget-container {
+    width: 100%;
+    padding-top: makespace(1);
+    padding-bottom: makespace(2);
+}

package/templates/common/src/static/css/base/styles.scss

@@ -0,0 +1,163 @@
+html {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    font-family: Inter, Poppins, Avenir, "Century Gothic", Arial, sans-serif;
+    -webkit-tap-highlight-color: transparent;
+    margin: 0;
+}
+body {
+    &.preventYAxisScroll {
+        position: relative;
+        overflow-y: hidden;
+    }
+
+    &.preventXAxisScroll {
+        position: relative;
+        overflow-x: hidden;
+    }
+
+    &.preventScroll {
+        position: relative;
+        overflow: hidden;
+    }
+
+    &.offline {
+        input,
+        button,
+        a {
+            pointer-events: none;
+        }
+    }
+}
+
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+}
+
+#loader-portal {
+    position: absolute;
+    z-index: 100;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+.select-element-portal {
+    position: fixed;
+    z-index: 1300;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.bottom-sheet-element {
+    position: fixed;
+    z-index: 100;
+    transition: all 0.2s ease-in;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0;
+    overflow: hidden;
+    transform: translate3d(0, 0, 0);
+}
+
+#bottom-sheet-root {
+    position: relative;
+    z-index: 100;
+
+    &.open {
+        height: 100%;
+
+        .bottom-sheet-backdrop {
+            background: $grey-backdrop;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 99;
+        }
+
+        .bottom-sheet-element {
+            &.full {
+                height: 95vh;
+            }
+
+            &.small {
+                height: 40vh;
+            }
+
+            &.medium {
+                height: calc(100% - 82px);
+            }
+        }
+    }
+}
+
+.bottomsheet-portal {
+    height: 100%;
+}
+
+.loader {
+    margin: makespace(1) auto;
+    border: makespace(1) solid $highlighted-background;
+    border-top: makespace(1) solid $action-primary;
+    border-radius: 50%;
+    width: makespace(6);
+    height: makespace(6);
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.shimmer {
+    border-radius: $gutter;
+    background: #f6f7f8;
+    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+    background-repeat: no-repeat;
+    background-size: 200vw 100vh;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: shimmer;
+    animation-timing-function: linear;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: forwards;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-name: shimmer;
+    -webkit-animation-timing-function: linear;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -100vw 0;
+    }
+
+    100% {
+        background-position: 100vw 0;
+    }
+}

package/templates/common/src/static/css/base/typography.scss

@@ -0,0 +1,285 @@
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 300;
+    font-display: block;
+    src: local("Inter Light"), local("Inter-Light"), url($font_url + "Inter-Light-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: local("Inter Regular"), local("Inter-Regular"), url($font_url + "Inter-Regular-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 400;
+    font-display: block;
+    src: local("Inter Italic"), local("Inter-Italic"), url($font_url + "Inter-Italic-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: local("Inter Medium"), local("Inter-Medium"), url($font_url + "Inter-Medium-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: local("Inter SemiBold"), local("Inter-SemiBold"), url($font_url + "Inter-SemiBold-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+    src: local("Inter Bold"), local("Inter-Bold"), url($font_url + "Inter-Bold-Subset.otf");
+    unicode-range: U+0020-007F, U+201C, U+201D, U+00A;
+}
+
+html {
+    font-size: $font-size-body + px;
+    line-height: $line-height-base;
+}
+
+h1 {
+    font-size: remy($font-size-l3);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+    margin: 0;
+}
+
+h2 {
+    font-size: remy($font-size-l4);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+    margin: 0;
+}
+
+h3 {
+    font-size: remy($font-size-l5);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+    margin: 0;
+}
+
+p {
+    font-size: remy($font-size-body);
+    line-height: $line-height-base;
+    margin: 0;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.heroSemiBold {
+    font-size: remy($font-size-hero);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.heroMedium {
+    font-size: remy($font-size-hero);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.heroRegular {
+    font-size: remy($font-size-hero);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.l1SemiBold {
+    font-size: remy($font-size-l1);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.l1Medium {
+    font-size: remy($font-size-l1);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.l1Regular {
+    font-size: remy($font-size-l1);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.l2SemiBold {
+    font-size: remy($font-size-l2);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.l2Medium {
+    font-size: remy($font-size-l2);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.l2Regular {
+    font-size: remy($font-size-l2);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.l3SemiBold {
+    font-size: remy($font-size-l3);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.l3Medium {
+    font-size: remy($font-size-l3);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.l3Regular {
+    font-size: remy($font-size-l3);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.l4SemiBold {
+    font-size: remy($font-size-l4);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.l4Medium {
+    font-size: remy($font-size-l4);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.l4Regular {
+    font-size: remy($font-size-l4);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.l5SemiBold {
+    font-size: remy($font-size-l5);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.l5Medium {
+    font-size: remy($font-size-l5);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.l5Regular {
+    font-size: remy($font-size-l5);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.bodySemiBold {
+    font-size: remy($font-size-body);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.bodyMedium {
+    font-size: remy($font-size-body);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.bodyRegular {
+    font-size: remy($font-size-body);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.smallSemiBold {
+    font-size: remy($font-size-small);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-base;
+}
+
+.smallMedium {
+    font-size: remy($font-size-small);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+}
+
+.smallRegular {
+    font-size: remy($font-size-small);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-base;
+}
+
+.xSmallSemiBold {
+    font-size: remy($font-size-x-small);
+    font-weight: $font-weight-semi-bold;
+    line-height: $line-height-x-small;
+}
+
+.xSmallMedium {
+    font-size: remy($font-size-x-small);
+    font-weight: $font-weight-medium;
+    line-height: $line-height-x-small;
+}
+
+.xSmallRegular {
+    font-size: remy($font-size-x-small);
+    font-weight: $font-weight-regular;
+    line-height: $line-height-x-small;
+}
+
+.textPrimary {
+    color: $information-primary;
+}
+
+.textSecondary {
+    color: $information-secondary;
+}
+
+.textTertiary {
+    color: $information-tertiary;
+}
+
+//EXCEPTIONS Please fix it in DLS 2.0
+.errorColor {
+    background-color: $error-background;
+    color: $error;
+}
+
+.cautionColor {
+    background-color: $caution-background;
+    color: $caution;
+}
+
+.successColor {
+    background-color: $success-background;
+    color: $success;
+}
+
+.noAnchorColor {
+    color: $information-primary;
+}
+
+.breakWord {
+    word-break: break-word;
+}