@descope/web-components-ui 1.0.50 → 1.0.51

package/src/components/descope-text/index.js

@@ -0,0 +1,5 @@
+import Text, { componentName } from './Text';
+
+customElements.define(componentName, Text);
+
+export { Text };

package/src/index.js

@@ -7,6 +7,7 @@ import './components/descope-password-field';
 import './components/descope-text-area';
 import './components/descope-date-picker';
 import './components/descope-container';
+import './components/descope-text';
 
 export {
 	globalsThemeToStyle,

package/src/theme/components/index.js

@@ -8,6 +8,7 @@ import checkbox from './checkbox';
 import switchToggle from './switchToggle';
 import container from './container';
 import logo from './logo';
+import text from './text';
 
 export default {
 	button,
@@ -19,5 +20,6 @@ export default {
 	checkbox,
 	switchToggle,
 	container,
-	logo
+	logo,
+	text
 };

package/src/theme/components/text.js

@@ -0,0 +1,79 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../themeHelpers';
+import Text from '../../components/descope-text/Text';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = Text.cssVarList;
+
+const text = {
+	[vars.lineHeight]: '1em',
+	[vars.display]: 'inline-block',
+	[vars.textAlign]: 'left',
+	[vars.color]: globalRefs.colors.surface.dark,
+	variant: {
+		h1: {
+			[vars.fontSize]: globalRefs.typography.h1.size,
+			[vars.fontWeight]: globalRefs.typography.h1.weight,
+			[vars.fontFamily]: globalRefs.typography.h1.font
+		},
+		h2: {
+			[vars.fontSize]: globalRefs.typography.h2.size,
+			[vars.fontWeight]: globalRefs.typography.h2.weight,
+			[vars.fontFamily]: globalRefs.typography.h2.font
+		},
+		h3: {
+			[vars.fontSize]: globalRefs.typography.h3.size,
+			[vars.fontWeight]: globalRefs.typography.h3.weight,
+			[vars.fontFamily]: globalRefs.typography.h3.font
+		},
+		subtitle1: {
+			[vars.fontSize]: globalRefs.typography.subtitle1.size,
+			[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+			[vars.fontFamily]: globalRefs.typography.subtitle1.font
+		},
+		subtitle2: {
+			[vars.fontSize]: globalRefs.typography.subtitle2.size,
+			[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+			[vars.fontFamily]: globalRefs.typography.subtitle2.font
+		},
+		body1: {
+			[vars.fontSize]: globalRefs.typography.body1.size,
+			[vars.fontWeight]: globalRefs.typography.body1.weight,
+			[vars.fontFamily]: globalRefs.typography.body1.font
+		},
+		body2: {
+			[vars.fontSize]: globalRefs.typography.body2.size,
+			[vars.fontWeight]: globalRefs.typography.body2.weight,
+			[vars.fontFamily]: globalRefs.typography.body2.font
+		}
+	},
+	mode: {
+		primary: {
+			[vars.color]: globalRefs.colors.primary.main
+		},
+		secondary: {
+			[vars.color]: globalRefs.colors.secondary.main
+		},
+		error: {
+			[vars.color]: globalRefs.colors.error.main
+		},
+		success: {
+			[vars.color]: globalRefs.colors.success.main
+		}
+	},
+	textAlign: {
+		right: { [vars.textAlign]: 'right' },
+		left: { [vars.textAlign]: 'left' },
+		center: { [vars.textAlign]: 'center' }
+	},
+	_fullWidth: {
+		[vars.width]: '100%',
+		[vars.display]: 'block'
+	},
+	_italic: {
+		[vars.fontStyle]: 'italic'
+	}
+};
+
+export default text;

package/src/theme/globals.js

@@ -1,3 +1,4 @@
+import { getThemeRefs } from '../themeHelpers';
 import { genColors } from '../themeHelpers/processColors';
 
 export const colors = genColors({
@@ -12,21 +13,47 @@ export const colors = genColors({
 	error: 'red'
 });
 
+const fonts = {
+	font1: ['Roboto', 'sans-serif'],
+	font2: ['Oswald', 'serif']
+};
+const fontsRef = getThemeRefs({ fonts }).fonts;
+
 const typography = {
 	h1: {
-		font: ['Courier New', 'Arial', 'sans-serif'],
-		weight: '700',
+		font: fontsRef.font1,
+		weight: '900',
 		size: '48px'
 	},
 	h2: {
-		font: ['Courier New', 'sans-serif'],
-		weight: '500',
+		font: fontsRef.font1,
+		weight: '800',
 		size: '38px'
 	},
 	h3: {
-		font: ['Courier New', 'sans-serif'],
-		weight: '300',
+		font: fontsRef.font1,
+		weight: '600',
 		size: '28px'
+	},
+	subtitle1: {
+		font: fontsRef.font2,
+		weight: '500',
+		size: '22px'
+	},
+	subtitle2: {
+		font: fontsRef.font2,
+		weight: '400',
+		size: '20px'
+	},
+	body1: {
+		font: fontsRef.font1,
+		weight: '300',
+		size: '16px'
+	},
+	body2: {
+		font: fontsRef.font1,
+		weight: '200',
+		size: '14px'
 	}
 };
 
@@ -51,20 +78,20 @@ const radius = {
 };
 
 const shadow = {
-		wide: {
-			sm: '0 2px 3px -0.5px',
-			md: '0 4px 6px -1px',
-			lg: '0 10px 15px -3px',
-			xl: '0 20px 25px -5px',
-			'2xl': '0 25px 50px -12px',
-		},
-		narrow: {
-			sm: '0 1px 2px -1px',
-			md: '0 2px 4px -2px',
-			lg: '0 4px 6px -4px',
-			xl: '0 8px 10px -6px',
-			'2xl': '0 16px 16px -8px',
-		}
+	wide: {
+		sm: '0 2px 3px -0.5px',
+		md: '0 4px 6px -1px',
+		lg: '0 10px 15px -3px',
+		xl: '0 20px 25px -5px',
+		'2xl': '0 25px 50px -12px'
+	},
+	narrow: {
+		sm: '0 1px 2px -1px',
+		md: '0 2px 4px -2px',
+		lg: '0 4px 6px -4px',
+		xl: '0 8px 10px -6px',
+		'2xl': '0 16px 16px -8px'
+	}
 };
 
 export default {
@@ -73,5 +100,6 @@ export default {
 	spacing,
 	border,
 	radius,
-	shadow
+	shadow,
+	fonts
 };