diff --git a/scripts/scss-scaling-generator.js b/scripts/scss-scaling-generator.js index df40e5ab4..ac30dae75 100644 --- a/scripts/scss-scaling-generator.js +++ b/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};