@webitel/styleguide 26.2.4 → 26.2.6

package/src/lib/primevue/semantic/sizes/player/index.ts

@@ -1,110 +1,110 @@
 export default {
-  counter: {
-    padding: '0.25rem',
-    gap: '0.25rem',
-    borderRadius: '{border-radius.xl}',
-    positionPadding: {
-      sm: '0.5rem',
-      md: '1rem',
-      lg: '1rem',
-    }
-  },
-  screenshot: {
-    sm: {
-      borderRadius: '{border-radius.sm}',
-      width: '56px',
-      height: '37px',
-      closeBtnGap: '0px',
-    },
-    md: {
-      borderRadius: '{border-radius.xl}',
-      width: '108px',
-      height: '72px',
-      closeBtnGap: '4px',
-    },
-    lg: {
-      borderRadius: '{border-radius.xl}',
-      width: '128px',
-      height: '85px',
-      closeBtnGap: '4px',
-    },
-  },
-  camPreview: {
-    sm: {
-      borderRadius: '{border-radius.sm}',
-      width: '56px',
-      height: '37px',
-      closeBtnGap: '0.5rem',
-    },
-    md: {
-      borderRadius: '{border-radius.xl}',
-      width: '108px',
-      height: '72px',
-      closeBtnGap: '0.5rem',
-    },
-    lg: {
-      borderRadius: '{border-radius.xl}',
-      width: '128px',
-      height: '85px',
-      closeBtnGap: '0.5rem',
-    },
-  },
-  wrapper: {
-    sm: {
-      borderRadius: '{border-radius.lg}',
-      width: '256px',
-      height: '201px',
-      aspectRatio: 256 / 201,   // aspect ratio of width / height, need for css
-    },
-    md: {
-      borderRadius: '{border-radius.xl}',
-      width: '740px',
-      height: '494px',
-    },
-    lg: {
-      borderRadius: '{border-radius.xl}',
-      width: '100%',
-      height: '100%',
-    },
-  },
-  headline: {
-    sm: {
-      borderRadius: '{border-radius.lg}',
-      padding: '0.5rem',
-      gap: '0.5rem',
-    },
-    md: {
-      borderRadius: '{border-radius.xl}',
-      padding: '1rem',
-      gap: '1rem',
-    },
-    lg: {
-      borderRadius: '{border-radius.xl}',
-      padding: '1rem',
-      gap: '1rem',
-    },
-  },
-  controlBar: {
-    sm: {
-      borderRadius: '{border-radius.lg}',
-      padding: '0.5rem',
-      gap: '0.5rem',
-      height: '48px'
-    },
-    md: {
-      borderRadius: '{border-radius.xl}',
-      padding: '1rem',
-      gap: '1rem',
-    },
-    lg: {
-      borderRadius: '{border-radius.xl}',
-      padding: '1rem',
-      gap: '1rem',
-    },
-    positionPadding: {
-      sm: '0',
-      md: '1rem',
-      lg: '1rem',
-    }
-  },
-}
+	counter: {
+		padding: '0.25rem',
+		gap: '0.25rem',
+		borderRadius: '{border-radius.xl}',
+		positionPadding: {
+			sm: '0.5rem',
+			md: '1rem',
+			lg: '1rem',
+		},
+	},
+	screenshot: {
+		sm: {
+			borderRadius: '{border-radius.sm}',
+			width: '56px',
+			height: '37px',
+			closeBtnGap: '0px',
+		},
+		md: {
+			borderRadius: '{border-radius.xl}',
+			width: '108px',
+			height: '72px',
+			closeBtnGap: '4px',
+		},
+		lg: {
+			borderRadius: '{border-radius.xl}',
+			width: '128px',
+			height: '85px',
+			closeBtnGap: '4px',
+		},
+	},
+	camPreview: {
+		sm: {
+			borderRadius: '{border-radius.sm}',
+			width: '56px',
+			height: '37px',
+			closeBtnGap: '0.5rem',
+		},
+		md: {
+			borderRadius: '{border-radius.xl}',
+			width: '108px',
+			height: '72px',
+			closeBtnGap: '0.5rem',
+		},
+		lg: {
+			borderRadius: '{border-radius.xl}',
+			width: '128px',
+			height: '85px',
+			closeBtnGap: '0.5rem',
+		},
+	},
+	wrapper: {
+		sm: {
+			borderRadius: '{border-radius.lg}',
+			width: '256px',
+			height: '201px',
+			aspectRatio: 256 / 201, // aspect ratio of width / height, need for css
+		},
+		md: {
+			borderRadius: '{border-radius.xl}',
+			width: '740px',
+			height: '494px',
+		},
+		lg: {
+			borderRadius: '{border-radius.xl}',
+			width: '100%',
+			height: '100%',
+		},
+	},
+	headline: {
+		sm: {
+			borderRadius: '{border-radius.lg}',
+			padding: '0.5rem',
+			gap: '0.5rem',
+		},
+		md: {
+			borderRadius: '{border-radius.xl}',
+			padding: '1rem',
+			gap: '1rem',
+		},
+		lg: {
+			borderRadius: '{border-radius.xl}',
+			padding: '1rem',
+			gap: '1rem',
+		},
+	},
+	controlBar: {
+		sm: {
+			borderRadius: '{border-radius.lg}',
+			padding: '0.5rem',
+			gap: '0.5rem',
+			height: '48px',
+		},
+		md: {
+			borderRadius: '{border-radius.xl}',
+			padding: '1rem',
+			gap: '1rem',
+		},
+		lg: {
+			borderRadius: '{border-radius.xl}',
+			padding: '1rem',
+			gap: '1rem',
+		},
+		positionPadding: {
+			sm: '0',
+			md: '1rem',
+			lg: '1rem',
+		},
+	},
+};

package/src/lib/primevue/semantic/sizes/typography/index.ts

@@ -0,0 +1,95 @@
+import { WtTypography } from '@webitel/styleguide/enums';
+
+/**
+ * refers to the typography.css file
+ */
+export default {
+	[WtTypography.Heading1]: {
+		font: {
+			size: '32px',
+			weight: '600',
+		},
+		lineHeight: '48px',
+		textTransform: 'none',
+	},
+	[WtTypography.Heading2]: {
+		font: {
+			size: '24px',
+			weight: '600',
+		},
+		lineHeight: '40px',
+		textTransform: 'none',
+	},
+	[WtTypography.Heading3]: {
+		font: {
+			size: '20px',
+			weight: '600',
+		},
+		lineHeight: '32px',
+		textTransform: 'none',
+	},
+	[WtTypography.Heading4]: {
+		font: {
+			size: '16px',
+			weight: '600',
+		},
+		lineHeight: '24px',
+		textTransform: 'none',
+	},
+	[WtTypography.Subtitle1]: {
+		font: {
+			size: '14px',
+			weight: '500',
+		},
+		lineHeight: '24px',
+		textTransform: 'none',
+	},
+	[WtTypography.Subtitle2]: {
+		font: {
+			size: '12px',
+			weight: '500',
+		},
+		lineHeight: '20px',
+		textTransform: 'none',
+	},
+	[WtTypography.Body1]: {
+		font: {
+			size: '14px',
+			weight: '400',
+		},
+		lineHeight: '24px',
+		textTransform: 'none',
+	},
+	[WtTypography.Body2]: {
+		font: {
+			size: '12px',
+			weight: '400',
+		},
+		lineHeight: '16px',
+		textTransform: 'none',
+	},
+	[WtTypography.Button]: {
+		font: {
+			size: '12px',
+			weight: '500',
+		},
+		lineHeight: '24px',
+		textTransform: 'uppercase',
+	},
+	[WtTypography.Caption]: {
+		font: {
+			size: '10px',
+			weight: '400',
+		},
+		lineHeight: '16px',
+		textTransform: 'none',
+	},
+	[WtTypography.Overline]: {
+		font: {
+			size: '12px',
+			weight: '500',
+		},
+		lineHeight: '20px',
+		textTransform: 'uppercase',
+	},
+};

package/src/lib/styleguide/border-radius/border-radius.css

@@ -0,0 +1,4 @@
+:root {
+	--border-radius: var(--spacing-2xs);
+	--border-radius--pill: 50px;
+}

package/src/lib/styleguide/colors/colors.css

@@ -0,0 +1,206 @@
+@import "./palette.css";
+@import "./deprecated.css";
+@import "./reusable/text-field.css";
+
+:root {
+	/* dp colors */
+	--dp-24-surface-color: hsl(0, 0%, 100%);
+	--dp-23-surface-color: hsl(225, 20%, 99%);
+	--dp-22-surface-color: hsl(225, 20%, 98%);
+	--dp-21-surface-color: hsl(225, 20%, 97%);
+	--dp-20-surface-color: hsl(225, 20%, 96%);
+	--dp-19-surface-color: hsl(225, 20%, 95%);
+	--dp-18-surface-color: hsl(225, 20%, 94%);
+	--dp-17-surface-color: hsl(225, 20%, 93%);
+	--dp-16-surface-color: hsl(225, 20%, 92%);
+	--dp-15-surface-color: hsl(225, 20%, 91%);
+	--dp-14-surface-color: hsl(225, 20%, 90%);
+	--dp-13-surface-color: hsl(225, 20%, 89%);
+	--dp-12-surface-color: hsl(225, 20%, 88%);
+	--dp-11-surface-color: hsl(225, 20%, 87%);
+	--dp-10-surface-color: hsl(225, 20%, 86%);
+	--dp-9-surface-color: hsl(225, 20%, 85%);
+	--dp-8-surface-color: hsl(225, 20%, 84%);
+	--dp-7-surface-color: hsl(225, 20%, 83%);
+	--dp-6-surface-color: hsl(225, 20%, 82%);
+	--dp-5-surface-color: hsl(225, 20%, 81%);
+	--dp-4-surface-color: hsl(225, 20%, 80%);
+	--dp-3-surface-color: hsl(225, 20%, 79%);
+	--dp-2-surface-color: hsl(225, 20%, 78%);
+	--dp-1-surface-color: hsl(225, 20%, 77%);
+
+	/* content wrapper */
+	--content-wrapper-color: var(--p-content-background);
+	--content-wrapper-hover-color: var(--p-content-hover-background);
+
+	/* success colors */
+	--success-color: var(--green-darken-4);
+	--success-hover-color: var(--green-darken-3);
+	--success-light-color: var(--green-lighten-4);
+	--success-on-color: var(--white);
+
+	/* warning colors */
+	--warning-color: var(--orange-accent-2);
+	--warning-hover-color: var(--orange-accent-1);
+	--warning-light-color: var(--orange-lighten-4);
+	--warning-on-color: var(--black);
+
+	/* error colors */
+	--error-color: var(--red-accent-2);
+	--error-hover-color: var(--red-lighten-2);
+	--error-light-color: var(--red-lighten-4);
+	--error-on-color: var(--white);
+
+	/* info colors */
+	--info-color: var(--blue-darken-1);
+	--info-hover-color: var(--blue-lighten-1);
+	--info-light-color: var(--blue-lighten-4);
+	--info-on-color: var(--black);
+
+	/* job colors */
+	--job-color: var(--blue-darken-1);
+	--job-hover-color: var(--blue-lighten-1);
+	--job-light-color: var(--blue-lighten-4);
+	--job-on-color: var(--black);
+
+	/* chat colors */
+	--chat-color: var(--indigo-accent-2);
+	--chat-hover-color: var(--indigo-accent-1);
+	--chat-light-color: var(--indigo-lighten-4);
+	--chat-on-color: var(--black);
+
+	/* transfer colors */
+	--transfer-color: var(--indigo-lighten-1);
+	--transfer-hover-color: var(--indigo-lighten-2);
+	--transfer-light-color: var(--indigo-lighten-4);
+	--transfer-on-color: var(--white);
+
+	/* primary colors */
+	--primary-color: var(--amber-accent-3);
+	--primary-hover-color: var(--amber-accent-2);
+	--primary-light-color: var(--amber-lighten-3);
+	--primary-on-color: var(--black);
+
+	/* secondary colors */
+	--secondary-color: var(--dp-10-surface-color);
+	--secondary-hover-color: var(--dp-14-surface-color);
+	--secondary-light-color: var(--dp-16-surface-color);
+	--secondary-on-color: var(--grey-darken-4);
+
+	/* email colors */
+	--email-color: var(--blue-darken-3);
+	--email-hover-color: var(--blue-darken-2);
+	--email-light-color: var(--blue-lighten-2);
+	--email-on-color: var(--black);
+
+	/* accent colors */
+	--accent-color: var(--purple-lighten-1);
+	--sub-accent-color: var(--indigo-darken-3);
+
+	/* typography colors */
+	--text-main-color: var(--grey-darken-3);
+	--text-disabled-color: var(--grey-lighten-1);
+	--text-error-color: var(--error-color);
+	--text-success-color: var(--success-color);
+	--text-link-color: var(--info-color);
+	/* typography on colors */
+	--text-on-brand-color: var(--white);
+}
+
+:root.theme--dark {
+	/* dp colors */
+	--dp-24-surface-color: hsl(225, 20%, 25%);
+	--dp-23-surface-color: hsl(225, 20%, 24%);
+	--dp-22-surface-color: hsl(225, 20%, 23%);
+	--dp-21-surface-color: hsl(225, 20%, 22%);
+	--dp-20-surface-color: hsl(225, 20%, 21%);
+	--dp-19-surface-color: hsl(225, 20%, 20%);
+	--dp-18-surface-color: hsl(225, 20%, 19%);
+	--dp-17-surface-color: hsl(225, 20%, 18%);
+	--dp-16-surface-color: hsl(225, 20%, 17%);
+	--dp-15-surface-color: hsl(225, 20%, 16%);
+	--dp-14-surface-color: hsl(225, 20%, 15%);
+	--dp-13-surface-color: hsl(225, 20%, 14%);
+	--dp-12-surface-color: hsl(225, 20%, 13%);
+	--dp-11-surface-color: hsl(225, 20%, 12%);
+	--dp-10-surface-color: hsl(225, 20%, 11%);
+	--dp-9-surface-color: hsl(225, 20%, 10%);
+	--dp-8-surface-color: hsl(225, 20%, 9%);
+	--dp-7-surface-color: hsl(225, 20%, 8%);
+	--dp-6-surface-color: hsl(225, 20%, 7%);
+	--dp-5-surface-color: hsl(225, 20%, 6%);
+	--dp-4-surface-color: hsl(225, 20%, 5%);
+	--dp-3-surface-color: hsl(225, 20%, 4%);
+	--dp-2-surface-color: hsl(225, 20%, 3%);
+	--dp-1-surface-color: hsl(225, 20%, 2%);
+
+	/* success colors */
+	--success-color: var(--green-darken-4);
+	--success-hover-color: var(--green-darken-3);
+	--success-light-color: var(--green-lighten-3);
+	--success-on-color: var(--black);
+
+	/* warning colors */
+	--warning-color: var(--orange-accent-2);
+	--warning-hover-color: var(--orange-accent-1);
+	--warning-light-color: var(--orange-lighten-3);
+	--warning-on-color: var(--black);
+
+	/* error colors */
+	--error-color: var(--red-accent-2);
+	--error-hover-color: var(--red-lighten-2);
+	--error-light-color: var(--red-lighten-3);
+	--error-on-color: var(--black);
+
+	/* info colors */
+	--info-color: var(--blue-darken-1);
+	--info-hover-color: var(--blue-lighten-1);
+	--info-light-color: var(--blue-lighten-3);
+	--info-on-color: var(--white);
+
+	/* job colors */
+	--job-color: var(--blue-darken-1);
+	--job-hover-color: var(--blue-lighten-1);
+	--job-light-color: var(--blue-lighten-3);
+	--job-on-color: var(--white);
+
+	/* chat colors */
+	--chat-color: var(--indigo-accent-2);
+	--chat-hover-color: var(--indigo-accent-1);
+	--chat-light-color: var(--indigo-lighten-3);
+	--chat-on-color: var(--white);
+
+	/* transfer colors */
+	--transfer-color: var(--indigo-darken-1);
+	--transfer-hover-color: var(--indigo-lighten-1);
+	--transfer-light-color: var(--indigo-lighten-4);
+	--transfer-on-color: var(--white);
+
+	/* primary colors */
+	--primary-color: var(--amber-darken-2);
+	--primary-hover-color: var(--amber-darken-1);
+	--primary-light-color: var(--amber-darken-4);
+	--primary-on-color: var(--black);
+
+	/* secondary colors */
+	--secondary-on-color: var(--grey-lighten-4);
+
+	/* email colors */
+	--email-color: var(--blue-darken-3);
+	--email-hover-color: var(--blue-darken-2);
+	--email-light-color: var(--blue-lighten-1);
+	--email-on-color: var(--white);
+
+	/* accent colors */
+	--accent-color: var(--purple-lighten-1);
+	--sub-accent-color: var(--indigo-darken-3);
+
+	/* typography colors */
+	--text-main-color: var(--grey-lighten-3);
+	--text-disabled-color: var(--grey-darken-1);
+	--text-error-color: var(--error-color);
+	--text-success-color: var(--success-color);
+	--text-link-color: var(--info-color);
+	/* typography on colors */
+	--text-on-brand-color: var(--white);
+}