diff --git a/src/css/imports/variables.scss b/src/css/imports/variables.scss index bf54353..64f6081 100644 --- a/src/css/imports/variables.scss +++ b/src/css/imports/variables.scss @@ -3,54 +3,93 @@ $bp-s: 40em; $bp-m: 50em; $bp-l: 80em; -$bp-footer-s: 28em; -$bp-footer-m: 60em; - -$bp-hero: $bp-m; - $z-index__header: 100; -:root { - --primary-100: #eff8ff; - --primary-200: #aad4f5; - --primary-300: #63a2d8; - --primary-400: #3183c8; - --primary-500: #2368a2; - --primary-600: #1a4971; - --primary-700: #203d54; - // --primary-800: #203d54; - // --primary-900: #203d54; - --neutral-100: #f8f9fa; - --neutral-200: #e1e7ec; - --neutral-300: #cfd6de; - --neutral-400: #b8c4ce; - --neutral-500: #8895a7; - --neutral-600: #5f6b7a; - --neutral-700: #212934; - // --neutral-800: #212934; - // --neutral-900: #212934; - --accent-primary-100: #e3fcec; - --accent-primary-200: #a8eec1; - --accent-primary-300: #74d99f; - --accent-primary-400: #38c172; - --accent-primary-500: #259d58; - --accent-primary-600: #197741; - --accent-primary-700: #145239; - // --accent-primary-800: #145239; - // --accent-primary-900: #145239; - --accent-secondary-100: #fce8e8; - --accent-secondary-200: #f5aaaa; - --accent-secondary-300: #e46464; - --accent-secondary-400: #dc3030; - --accent-secondary-500: #b82020; - --accent-secondary-600: #891b1b; - --accent-secondary-700: #611818; - // --accent-secondary-800: #611818; - // --accent-secondary-900: #611818; +$color-primary-100: #eff8ff; +$color-primary-200: #aad4f5; +$color-primary-300: #63a2d8; +$color-primary-400: #3183c8; +$color-primary-500: #2368a2; +$color-primary-600: #1a4971; +$color-primary-700: #203d54; +// $color-primary-800: #203d54; +// $color-primary-900: #203d54; +$color-neutral-100: #f8f9fa; +$color-neutral-200: #e1e7ec; +$color-neutral-300: #cfd6de; +$color-neutral-400: #b8c4ce; +$color-neutral-500: #8895a7; +$color-neutral-600: #5f6b7a; +$color-neutral-700: #212934; +// $color-neutral-800: #212934; +// $color-neutral-900: #212934; +$color-accent-primary-100: #e3fcec; +$color-accent-primary-200: #a8eec1; +$color-accent-primary-300: #74d99f; +$color-accent-primary-400: #38c172; +$color-accent-primary-500: #259d58; +$color-accent-primary-600: #197741; +$color-accent-primary-700: #145239; +// $color-accent-primary-800: #145239; +// $color-accent-primary-900: #145239; +$color-accent-secondary-100: #fce8e8; +$color-accent-secondary-200: #f5aaaa; +$color-accent-secondary-300: #e46464; +$color-accent-secondary-400: #dc3030; +$color-accent-secondary-500: #b82020; +$color-accent-secondary-600: #891b1b; +$color-accent-secondary-700: #611818; +// $color-accent-secondary-800: #611818; +// $color-accent-secondary-900: #611818; - // --accent-tertiary-100: #e7ffee; - // --accent-quaternary-100: #fffcf4; - // --accent-quinary-100: #ffeefc; +// $color-accent-tertiary-100: #e7ffee; +// $color-accent-quaternary-100: #fffcf4; +// $color-accent-quinary-100: #ffeefc; + +$color-color__body: $color-neutral-600; +$color-color-bg: $color-neutral-100; + +:root { + --primary-100: #{$color-primary-100}; + --primary-200: #{$color-primary-200}; + --primary-300: #{$color-primary-300}; + --primary-400: #{$color-primary-400}; + --primary-500: #{$color-primary-500}; + --primary-600: #{$color-primary-600}; + --primary-700: #{$color-primary-700}; + // --primary-800: #{$color-primary-800}; + // --primary-900: #{$color-primary-900}; + --neutral-100: #{$color-neutral-100}; + --neutral-200: #{$color-neutral-200}; + --neutral-300: #{$color-neutral-300}; + --neutral-400: #{$color-neutral-400}; + --neutral-500: #{$color-neutral-500}; + --neutral-600: #{$color-neutral-600}; + --neutral-700: #{$color-neutral-700}; + // --neutral-800: #{$color-neutral-800}; + // --neutral-900: #{$color-neutral-900}; + --accent-primary-100: #{$color-accent-primary-100}; + --accent-primary-200: #{$color-accent-primary-200}; + --accent-primary-300: #{$color-accent-primary-300}; + --accent-primary-400: #{$color-accent-primary-400}; + --accent-primary-500: #{$color-accent-primary-500}; + --accent-primary-600: #{$color-accent-primary-600}; + --accent-primary-700: #{$color-accent-primary-700}; + //--accent-primary-800: #{$color-accent-primary-800}; + //--accent-primary-900: #{$color-accent-primary-900}; + --accent-secondary-100: #{$color-accent-secondary-100}; + --accent-secondary-200: #{$color-accent-secondary-200}; + --accent-secondary-300: #{$color-accent-secondary-300}; + --accent-secondary-400: #{$color-accent-secondary-400}; + --accent-secondary-500: #{$color-accent-secondary-500}; + --accent-secondary-600: #{$color-accent-secondary-600}; + --accent-secondary-700: #{$color-accent-secondary-700}; + //--accent-secondary-800: #{$color-accent-secondary-800}; + //--accent-secondary-900: #{$color-accent-secondary-900}; + + //--accent-tertiary-100: #{$color-color-accent-tertiary-100}; + //--accent-quaternary-100: #{$color-accent-quaternary-100}; + //--accent-quinary-100: #{$color-accent-quinary-100}; --color__body: var(--neutral-600); --color-bg: var(--neutral-100);