@weareconceptstudio/account 0.0.0 → 0.0.1

package/dist/styles/helperClass.js

@@ -0,0 +1,278 @@
+import { createGlobalStyle, css } from 'styled-components';
+const AccountHelperClass = createGlobalStyle `${css `
+	//! Primary colors
+	.account-primary-color1 {
+		color: var(--account_primaryColor1);
+
+		&-bg {
+			background-color: var(--account_primaryColor1);
+		}
+	}
+
+	.account-primary-color2 {
+		color: var(--account_primaryColor2);
+
+		&-bg {
+			background-color: var(--account_primaryColor2);
+		}
+	}
+
+	.account-primary-color3 {
+		color: var(--account_primaryColor3);
+
+		&-bg {
+			background-color: var(--account_primaryColor3);
+		}
+	}
+
+	.account-primary-color4 {
+		color: var(--account_primaryColor4);
+
+		&-bg {
+			background-color: var(--account_primaryColor4);
+		}
+	}
+
+	.account-primary-color5 {
+		color: var(--account_primaryColor5);
+
+		&-bg {
+			background-color: var(--account_primaryColor5);
+		}
+	}
+
+	.account-primary-color6 {
+		color: var(--account_primaryColor6);
+
+		&-bg {
+			background-color: var(--account_primaryColor6);
+		}
+	}
+
+	.account-primary-color7 {
+		color: var(--account_primaryColor7);
+
+		&-bg {
+			background-color: var(--account_primaryColor7);
+		}
+	}
+
+	.account-primary-color8 {
+		color: var(--account_primaryColor8);
+
+		&-bg {
+			background-color: var(--account_primaryColor8);
+		}
+	}
+
+	.account-primary-color9 {
+		color: var(--account_primaryColor9);
+
+		&-bg {
+			background-color: var(--account_primaryColor9);
+		}
+	}
+
+	.account-primary-color10 {
+		color: var(--account_primaryColor10);
+
+		&-bg {
+			background-color: var(--account_primaryColor10);
+		}
+	}
+
+	.account-primary-color11 {
+		color: var(--account_primaryColor11);
+
+		&-bg {
+			background-color: var(--account_primaryColor11);
+		}
+	}
+
+	.account-primary-color12 {
+		color: var(--account_primaryColor12);
+
+		&-bg {
+			background-color: var(--account_primaryColor12);
+		}
+	}
+
+	.account-primary-color13 {
+		color: var(--account_primaryColor13);
+
+		&-bg {
+			background-color: var(--account_primaryColor13);
+		}
+	}
+
+	.account-primary-color14 {
+		color: var(--account_primaryColor14);
+
+		&-bg {
+			background-color: var(--account_primaryColor14);
+		}
+	}
+
+	.account-primary-color15 {
+		color: var(--account_primaryColor15);
+
+		&-bg {
+			background-color: var(--account_primaryColor15);
+		}
+	}
+
+	.account-primary-color16 {
+		color: var(--account_primaryColor16);
+
+		&-bg {
+			background-color: var(--account_primaryColor16);
+		}
+	}
+
+	.account-primary-color17 {
+		color: var(--account_primaryColor17);
+
+		&-bg {
+			background-color: var(--account_primaryColor17);
+		}
+	}
+
+	.account-primary-color18 {
+		color: var(--account_primaryColor18);
+
+		&-bg {
+			background-color: var(--account_primaryColor18);
+		}
+	}
+
+	.account-primary-color19 {
+		color: var(--account_primaryColor19);
+
+		&-bg {
+			background-color: var(--account_primaryColor19);
+		}
+	}
+
+	.account-primary-color20 {
+		color: var(--account_primaryColor20);
+
+		&-bg {
+			background-color: var(--account_primaryColor20);
+		}
+	}
+
+	//! Secondary colors
+	.account-secondary-color1 {
+		color: var(--account_secondaryColor1);
+
+		&-bg {
+			background-color: var(--account_secondaryColor1);
+		}
+	}
+
+	.account-secondary-color2 {
+		color: var(--account_secondaryColor2);
+
+		&-bg {
+			background-color: var(--account_secondaryColor2);
+		}
+	}
+
+	.account-secondary-color3 {
+		color: var(--account_secondaryColor3);
+
+		&-bg {
+			background-color: var(--account_secondaryColor3);
+		}
+	}
+
+	.account-secondary-color4 {
+		color: var(--account_secondaryColor4);
+
+		&-bg {
+			background-color: var(--account_secondaryColor4);
+		}
+	}
+
+	.account-secondary-color5 {
+		color: var(--account_secondaryColor5);
+
+		&-bg {
+			background-color: var(--account_secondaryColor5);
+		}
+	}
+
+	.account-secondary-color6 {
+		color: var(--account_secondaryColor6);
+
+		&-bg {
+			background-color: var(--account_secondaryColor6);
+		}
+	}
+
+	.account-secondary-color7 {
+		color: var(--account_secondaryColor7);
+
+		&-bg {
+			background-color: var(--account_secondaryColor7);
+		}
+	}
+
+	.account-secondary-color8 {
+		color: var(--account_secondaryColor8);
+
+		&-bg {
+			background-color: var(--account_secondaryColor8);
+		}
+	}
+
+	.account-secondary-color9 {
+		color: var(--account_secondaryColor9);
+
+		&-bg {
+			background-color: var(--account_secondaryColor9);
+		}
+	}
+
+	//! Background color
+	.account-background-color {
+		color: var(--account_backgroundColor);
+
+		&-bg {
+			background-color: var(--account_backgroundColor);
+		}
+	}
+
+	//! Error color
+	.account-error-color {
+		color: var(--account_errorColor);
+
+		&-bg {
+			background-color: var(--account_errorColorBg);
+		}
+	}
+
+	.account-success-color {
+		color: var(--account_successColor);
+
+		&-bg {
+			background-color: var(--account_successColorBg);
+		}
+	}
+
+	.account-font-regular {
+		font-family: var(--account_Font);
+		font-weight: 400;
+	}
+
+	.account-font-medium {
+		font-family: var(--account_Font);
+		font-weight: 500;
+	}
+
+	.account-font-bold {
+		font-family: var(--account_Font);
+		font-weight: 700;
+	}
+`}`;
+export default AccountHelperClass;

package/dist/styles/theme.d.ts

@@ -0,0 +1,2 @@
+declare function _default(props: any): any;
+export default _default;

package/dist/styles/theme.js

@@ -0,0 +1,63 @@
+export default (props) => ({
+    ...props,
+    account: {
+        colors: {
+            //! Background Color
+            account_backgroundColor: '#FFFFFB',
+            //! Main Colors
+            account_primaryColor1: '#3E583C',
+            account_primaryColor2: '#657A64',
+            account_primaryColor3: '#8C9B8B',
+            account_primaryColor4: '#B2BDB1',
+            account_primaryColor5: '#D9DED8',
+            account_primaryColor6: '#ECEFEC',
+            account_primaryColor7: '#F5F6F5',
+            account_primaryColor8: '#5B635F',
+            account_primaryColor9: '#796E82',
+            account_primaryColor10: '#9579A3',
+            account_primaryColor11: '#A47FB5',
+            account_primaryColor12: '#B384C6',
+            account_primaryColor13: '#C189D7',
+            account_primaryColor14: '#CF8EE8',
+            account_primaryColor15: '#D9A5ED',
+            account_primaryColor16: '#E2BBF1',
+            account_primaryColor17: '#ECD2F6',
+            account_primaryColor18: '#F5E8FA',
+            account_primaryColor19: '#FBF4FD',
+            account_primaryColor20: '#FCF9FE',
+            //! Secondary Colors
+            account_secondaryColor1: '#2A2AD1',
+            account_secondaryColor2: '#EC6A2E',
+            account_secondaryColor3: '#DBFE45',
+            account_secondaryColor4: '#853A18',
+            account_secondaryColor5: '#7C558B',
+            account_secondaryColor6: '#FEF4CC',
+            account_secondaryColor7: '#FFDAD8',
+            account_secondaryColor8: '#D7DBF5',
+            account_secondaryColor9: '#B067CC',
+            //! Error Color
+            account_errorColor: '#DE554E',
+            account_errorColorBg: 'rgba(222, 85, 78, 0.1)',
+            account_successColor: '#4CAF50',
+            account_successColorBg: 'rgba(76, 175, 80, 0.1)',
+            ...props.account?.colors,
+        },
+        mediaQuery: {
+            account_DesktopSizeXL: '2560px',
+            account_DesktopSizeL: '1920px',
+            account_DesktopSizeM: '1510px',
+            account_DesktopSizeS: '1440px',
+            account_DesktopSizeXS: '1280px',
+            account_TabletSize: '1024px',
+            account_TabletSizeS: '768px',
+            account_DesktopSizeXLMin: '2559px',
+            account_DesktopSizeLMin: '1919px',
+            account_DesktopSizeMMin: '1509px',
+            account_DesktopSizeSMin: '1439px',
+            account_DesktopSizeXSMin: '1279px',
+            account_TabletSizeMin: '1023px',
+            account_TabletSizeSMin: '767px',
+            ...props.account?.mediaQuery,
+        },
+    },
+});

package/dist/styles/typography.d.ts

@@ -0,0 +1,2 @@
+export default AccountTypography;
+declare const AccountTypography: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/dist/styles/typography.js

@@ -0,0 +1,129 @@
+import { createGlobalStyle, css } from 'styled-components';
+function columnGenerator(suffix) {
+    let style = '';
+    for (let i = 1; i <= 12; i++) {
+        style += suffix ? `.account-col-${suffix}-${i}` : `.account-col-${i}`;
+        style += `{ width: ${(100 / 12) * i}% } `;
+    }
+    return style;
+}
+const AccountTypography = createGlobalStyle `${css `
+	main {
+		&.use-account {
+			background-color: var(--account_backgroundColor);
+		}
+	}
+
+	//! Font sizes
+	.account-h1 {
+		font-size: var(--account_h1);
+		line-height: var(--account_lineHeightS);
+	}
+
+	.account-h2 {
+		font-size: var(--account_h2);
+		line-height: var(--account_lineHeightS);
+	}
+
+	.account-h3 {
+		font-size: var(--account_h3);
+		line-height: var(--account_lineHeightS);
+	}
+
+	.account-h4 {
+		font-size: var(--account_h4);
+		line-height: var(--account_lineHeightS);
+	}
+
+	.account-h5 {
+		font-size: var(--account_h5);
+		line-height: var(--account_lineHeightS);
+	}
+
+	.account-h6 {
+		font-size: var(--account_h6);
+		line-height: var(--account_lineHeight);
+	}
+
+	.account-p {
+		font-size: var(--account_p);
+		line-height: var(--account_lineHeight);
+
+		--account_p: var(--account_p1);
+
+		&.account-p1 {
+			--account_p: var(--account_p1);
+		}
+
+		&.account-p2 {
+			--account_p: var(--account_p2);
+		}
+
+		&.account-p3 {
+			--account_p: var(--account_p3);
+		}
+
+		&.account-p4 {
+			--account_p: var(--account_p4);
+		}
+
+		&.account-p5 {
+			--account_p: var(--account_p5);
+		}
+	}
+
+	//! Row
+	.account-row {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 calc(var(--account_colPadding) * -1);
+
+		> * {
+			width: 100%;
+			padding: 0 var(--account_colPadding);
+		}
+
+		.account-col {
+			flex: 1 1;
+		}
+
+		/* //! 2560 */
+		${columnGenerator()};
+
+		/* //! 1920 */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_DesktopSizeXLMin}) {
+			${columnGenerator('dl')};
+		}
+
+		/* //! 1510 */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_DesktopSizeLMin}) {
+			${columnGenerator('dm')};
+		}
+
+		/* //! 1440 */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_DesktopSizeMMin}) {
+			${columnGenerator('ds')};
+		}
+
+		/* //! 1280 */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_DesktopSizeSMin}) {
+			${columnGenerator('dxs')};
+		}
+
+		/* //! 1024 */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_DesktopSizeXSMin}) {
+			${columnGenerator('t')};
+		}
+
+		/* //! 768 */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_TabletSizeMin}) {
+			${columnGenerator('ts')};
+		}
+
+		/* //! Mobile */
+		@media only screen and (max-width: ${({ theme }) => theme.account.mediaQuery.account_TabletSizeSMin}) {
+			${columnGenerator('m')};
+		}
+	}
+`}`;
+export default AccountTypography;

package/dist/styles/variables.d.ts

@@ -0,0 +1,2 @@
+export default AccountVariables;
+declare const AccountVariables: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;