feat: input vars for guidelines 3.0 (#182)

feat: added custom vars for input

Co-authored-by: Maximilian Franzke <[email protected]>

Author: annsch

scripts/scss-scaling-generator.js

@@ -9,6 +9,20 @@ const generateScaling = () => {
 	let allClasses = fileHeader;
 
 	const scaleTypeKey = ['regular', 'functional', 'expressive'];
+	const inputCustomVars = {
+		regular: {
+			labelScale: 0.65,
+			focusOpacity: 1
+		},
+		functional: {
+			labelScale: 1,
+			focusOpacity: 0
+		},
+		expressive: {
+			labelScale: 0.55,
+			focusOpacity: 1
+		}
+	};
 
 	for (const scale of scaleTypeKey) {
 		allClasses += `
@@ -32,6 +46,9 @@ const generateScaling = () => {
 \t--db-spacing-responsive-lg: #{$db-spacing-responsive-${scale}-mobile-l};
 \t--db-spacing-responsive-xl: #{$db-spacing-responsive-${scale}-mobile-xl};
 
+\t--db-input-label-scale: ${inputCustomVars[scale].labelScale};
+\t--db-input-focus-opacity: ${inputCustomVars[scale].focusOpacity};
+
 \t@media only screen and (min-width: $db-screens-md) {
 \t\t--db-spacing-responsive-xs: #{$db-spacing-responsive-${scale}-tablet-xs};
 \t\t--db-spacing-responsive-sm: #{$db-spacing-responsive-${scale}-tablet-s};