Styles

Forms

Global Styles

Import in styles.scss

      @forward 'node_modules/normalize.css/normalize'; 
 @forward 'node_modules/ngx-neo-ui/assets/styles/theme-provider/core/fonts/fonts'; 
 @forward 'node_modules/ngx-neo-ui/assets/styles/theme-provider/base-styles/styles'; 
 @forward 'node_modules/ngx-neo-ui/assets/styles/theme-provider/common/accessibility/accessibility'; 
 @forward 'node_modules/ngx-neo-ui/assets/styles/theme-provider/common/offsets/offsets'; 
 @forward 'node_modules/ngx-neo-ui/assets/styles/theme-provider/base-styles/typography/typography'; 
 @forward 'node_modules/ngx-neo-ui/assets/styles/theme-provider/base-styles/container/container';

And add variables

Common SCSS variables

      $borderRadiusSmall: 0; 
 $borderRadiusBase: 2px; 
 $borderRadiusLarge: 4px; 
 $transitionSmall: .2s; 
 $transitionBase: .4s; 
 $transitionLarge: .8s;

Common CSS variables

      :root { 
 --borderRadiusSmall: #{$borderRadiusSmall}; 
 --borderRadiusBase: #{$borderRadiusBase}; 
 --borderRadiusLarge: #{$borderRadiusLarge}; 
 --transitionSmall: #{$transitionSmall}; 
 --transitionBase: #{$transitionBase}; 
 --transitionLarge: #{$transitionLarge}; 
 }

Palette SCSS variables

      $colorBase: #121314 !default; 
 $colorLight: rgba(#121314, 0.8) !default; 
 $colorLighter: rgba(#121314, 0.6) !default; 
 $colorLightest: rgba(#121314, 0.4) !default; 
 $colorBrand: #5409ff !default; 
 $colorSound: #9280bc !default; 
 $colorSoundLight: rgba(#9280bc, 0.6) !default; 
 $colorSound: #9280bc !default; 
 $bgColorMode: #F9F8F3 !default; 
 $accessibilityBorder: #9b3be5 !default; 
 $accessibilityBackground: #fef0cc !default; 
 $accessibilityColor: $accessibilityBorder !default; 
 $colorError: red !default;

Palette CSS variables

      :root { 
 --colorBase: #{$colorBase}; 
 --colorLight: #{$colorLight}; 
 --colorLighter: #{$colorLighter}; 
 --colorLightest: #{$colorLightest}; 
 --colorBrand: #{$colorBrand}; 
 --colorSound: #{$colorSound}; 
 --colorSoundLight: #{$colorSoundLight}; 
 --bgColorMode: #{$bgColorMode}; 
 --accessibilityBorder: #{$accessibilityBorder}; 
 --accessibilityBackground: #{$accessibilityBackground}; 
 --accessibilityColor: #{$accessibilityColor}; 
 --colorError: #{$colorError}; 
 }