@webitel/styleguide 26.2.5 → 26.2.7

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

@@ -4,92 +4,92 @@ 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',
-    },
-};
+	[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

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