Created
March 2, 2022 18:26
-
-
Save GiselaMD/76d1ff7ac8a41222968d3398433fe4ef to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is the default html and body font-size for the base rem value. | |
| $rem-base: 16px !default; | |
| $base-font-family: 'din-2014', Arial, sans-serif; | |
| $fallback-font-family: Arial, sans-serif; | |
| // --- Colors --- | |
| $colors: ( | |
| primary: ( | |
| enterpriseGreen: #169a5a, | |
| black: #181918, | |
| white: #ffffff | |
| ), | |
| secondary: ( | |
| orange: #ce810d, | |
| darkGreen: #006639, | |
| midGreen: #127f4a, | |
| calendarGreen: #6fc099, | |
| backgroundGray: #f3f3f3, | |
| lightGray: #c3c3c3, | |
| midGray: #656565, | |
| darkGray: #393a3b | |
| ), | |
| tertiary: ( | |
| yellow: #f7d727, | |
| red: #e10300, | |
| blue: #a4ceff | |
| ), | |
| tiers: ( | |
| gold-tier: #cfb67f, | |
| platinum-tier: #272727, | |
| silver-tier: #757575 | |
| ) | |
| ); | |
| /** | |
| * @returns hex color value from colors defined in '_settings.colors.scss' | |
| */ | |
| @function color($color-group: primary, $color-name: enterpriseGreen) { | |
| $colors: map-get($colors, $color-group); | |
| @return map-get($colors, $color-name); | |
| } | |
| // TODO: larger header | |
| $heading: ( | |
| // name font-size weight font-style line-height letter-spacing text-transform color | |
| mobile: | |
| ( | |
| h1 26px 800 normal 1.23 0.15px capitalize color(primary, black), | |
| h2 21px 800 normal 1.19 -0.25px capitalize color(primary, black), | |
| h3 18px 700 normal 1.33 -0.25px capitalize color(primary, black), | |
| h4 21px 400 normal 1.19 -0.25px capitalize color(primary, black), | |
| h5 14px 700 normal 1.29 0px capitalize color(primary, black), | |
| h6 14px 700 normal 1.29 0px uppercase color(primary, black), | |
| ), | |
| desktop: ( | |
| h1 36px 800 normal 1.11 0.5px capitalize color(primary, black), | |
| h2 26px 800 normal 1.23 0.15px capitalize color(primary, black), | |
| h3 21px 700 normal 1.19 -0.25px capitalize color(primary, black), | |
| h4 21px 400 normal 1.19 -0.25px capitalize color(primary, black), | |
| h5 14px 700 normal 1.29 0px capitalize color(primary, black), | |
| h6 14px 700 normal 1.29 0px uppercase color(primary, black) | |
| ) | |
| ); | |
| $body: ( | |
| // name font-size weight font-style line-height letter-spacing text-transform color | |
| default: | |
| ( | |
| paragraph 18px 400 normal 1.33 -0.25px none color(primary, black), | |
| // paragraph | |
| smaller-paragraph 15px 400 normal 1.33 -0.25px none color(primary, black), | |
| // smaller paragraph | |
| descriptor 14px 500 normal 1.29 -0.25px none color(primary, black), | |
| // descriptor | |
| tooltip 12px 600 normal 1.5 -0.25px none color(primary, black), | |
| // tooltip | |
| pull-quote 28px 500 italic 1.14 -0.25px none color(secondary, midGray), // quote | |
| eyebrow 14px 700 normal 1.29 2px uppercase color(primary, black) // eyebrow | |
| ) | |
| ); | |
| $style-list: ( | |
| heading: $heading, | |
| body: $body, | |
| ); | |
| $breakpoints: ( | |
| 'mobile': 576px, | |
| 'tablet': 768px, | |
| 'desktop': 1024px, | |
| 'wide': 1440px | |
| ) !default; | |
| // min-width breakpoints | |
| @mixin breakpoint($breakpoint) { | |
| // If the key exists in the map | |
| @if map-has-key($breakpoints, $breakpoint) { | |
| // Prints a media query based on the value | |
| @media (min-width: map-get($breakpoints, $breakpoint)) { | |
| @content; | |
| } | |
| } | |
| // If the key doesn't exist in the map | |
| @else { | |
| @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " | |
| + "Available breakpoints are: #{map-keys($breakpoints)}."; | |
| } | |
| } | |
| @mixin list-gen($font, $size, $weight, $style, $line-height, $letter-spacing, $text-transform, $color) { | |
| font-family: $font; | |
| font-size: $size; | |
| font-weight: $weight; | |
| font-style: $style; | |
| line-height: $line-height; | |
| letter-spacing: $letter-spacing; | |
| text-transform: $text-transform; | |
| color: $color; | |
| } | |
| @function findItemInLists($lists, $arg){ | |
| @each $list in $lists { | |
| @if type-of($list) == list { | |
| @if index($list, $arg) != null { | |
| @return $list; | |
| } | |
| } | |
| } | |
| @error 'There is no #{$arg} in #{$lists}'; | |
| } | |
| @mixin add-list-gen($data){ | |
| @include list-gen( | |
| $base-font-family, | |
| nth($data, 2), | |
| nth($data, 3), | |
| nth($data, 4), | |
| nth($data, 5), | |
| nth($data, 6), | |
| nth($data, 7), | |
| nth($data, 8) | |
| ); | |
| } | |
| @mixin get-style($list, $style, $breakpoint: null) { | |
| $type: map-get($style-list, $list); | |
| @if ($type == null) { | |
| @error 'There is no $variable in $style-list with the name #{$list}'; | |
| } | |
| $bp: map-get($type, $breakpoint); | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| @if ($bp == null) { | |
| @if(map-get($type, mobile) != null){ | |
| // $data: nth(map-get($type, mobile), $style); | |
| $data: findItemInLists(map-get($type, mobile), $style); | |
| @include add-list-gen($data); | |
| @include breakpoint(tablet) { | |
| // $data: nth(map-get($type, desktop), $style); | |
| $data: findItemInLists(map-get($type, desktop), $style); | |
| @include add-list-gen($data); | |
| } | |
| } | |
| @else { | |
| $data: findItemInLists(map-get($type, default), $style); | |
| @include add-list-gen($data); | |
| } | |
| } | |
| /* a specific breakpoint has been specified, so only render that breakpoint. */ | |
| @else { | |
| // $data: nth(map-get($type, $breakpoint), $style); | |
| $data: findItemInLists(map-get($type, $breakpoint), $style); | |
| @include add-list-gen($data); | |
| } | |
| } | |
| /** | |
| This generates the h1-h6 styling based on the $heading variable in '_settings.typography.scss'. | |
| */ | |
| @each $list, $breakpoint in $heading { | |
| @each $style in $breakpoint { | |
| @if (nth($list, 1) != 'desktop') { | |
| #{nth($style, 1)}, | |
| .#{nth($style, 1)}, | |
| #{'%' + nth($style, 1)} { | |
| @include add-list-gen($style); | |
| } | |
| } @else { | |
| @include breakpoint(tablet) { | |
| #{nth($style, 1)}, | |
| .#{nth($style, 1)}, | |
| #{'%' + nth($style, 1)} { | |
| @include add-list-gen($style); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| This generates the body styling based on the $body variable in '_settings.typography.scss'. | |
| */ | |
| @each $list, $breakpoint in $body { | |
| @each $style in $breakpoint { | |
| .#{nth($style, 1)}, | |
| #{'%' + nth($style, 1)} { | |
| @include add-list-gen($style); | |
| } | |
| } | |
| } | |
| p { | |
| @include get-style(body, paragraph); | |
| } | |
| // Tests | |
| .test-1 { | |
| @extend %h1; | |
| } | |
| .test-2 { | |
| @include get-style(heading, h1, mobile); | |
| // This will add only mobile style | |
| } | |
| .test-3 { | |
| @include get-style(heading, h2); | |
| // This will add both mobile and desktop styles | |
| } | |
| .test-4 { | |
| @include get-style(heading, h3, desktop); | |
| // This will add only desktop style | |
| } | |
| .test-5 { | |
| @include get-style(body, paragraph); | |
| // This will add the default style | |
| } | |
| .test-6 { | |
| @include get-style(body, smaller-paragraph); | |
| } | |
| .test-7 { | |
| @include get-style(body, descriptor); | |
| } | |
| .test-8 { | |
| @include get-style(body, tooltip); | |
| } | |
| .test-9 { | |
| @include get-style(body, pull-quote); | |
| } | |
| .test-10 { | |
| @include get-style(body, eyebrow); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @returns hex color value from colors defined in '_settings.colors.scss' | |
| */ | |
| /** | |
| This generates the h1-h6 styling based on the $heading variable in '_settings.typography.scss'. | |
| */ | |
| h1, | |
| .h1, | |
| .test-1 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 26px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.23; | |
| letter-spacing: 0.15px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| h2, | |
| .h2 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 21px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.19; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| h3, | |
| .h3 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 18px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.33; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| h4, | |
| .h4 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 21px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.19; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| h5, | |
| .h5 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: 0px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| h6, | |
| .h6 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: 0px; | |
| text-transform: uppercase; | |
| color: #181918; | |
| } | |
| @media (min-width: 768px) { | |
| h1, | |
| .h1, | |
| .test-1 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 36px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.11; | |
| letter-spacing: 0.5px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| h2, | |
| .h2 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 26px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.23; | |
| letter-spacing: 0.15px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| h3, | |
| .h3 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 21px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.19; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| h4, | |
| .h4 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 21px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.19; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| h5, | |
| .h5 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: 0px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| h6, | |
| .h6 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: 0px; | |
| text-transform: uppercase; | |
| color: #181918; | |
| } | |
| } | |
| /** | |
| This generates the body styling based on the $body variable in '_settings.typography.scss'. | |
| */ | |
| .paragraph { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 18px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.33; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .smaller-paragraph { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 15px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.33; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .descriptor { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .tooltip { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 12px; | |
| font-weight: 600; | |
| font-style: normal; | |
| line-height: 1.5; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .pull-quote { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 28px; | |
| font-weight: 500; | |
| font-style: italic; | |
| line-height: 1.14; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #656565; | |
| } | |
| .eyebrow { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: #181918; | |
| } | |
| p { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 18px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.33; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .test-2 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 26px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.23; | |
| letter-spacing: 0.15px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| .test-3 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 21px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.19; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| @media (min-width: 768px) { | |
| .test-3 { | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 26px; | |
| font-weight: 800; | |
| font-style: normal; | |
| line-height: 1.23; | |
| letter-spacing: 0.15px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| } | |
| .test-4 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 21px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.19; | |
| letter-spacing: -0.25px; | |
| text-transform: capitalize; | |
| color: #181918; | |
| } | |
| .test-5 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 18px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.33; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .test-6 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 15px; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.33; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .test-7 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .test-8 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 12px; | |
| font-weight: 600; | |
| font-style: normal; | |
| line-height: 1.5; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #181918; | |
| } | |
| .test-9 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 28px; | |
| font-weight: 500; | |
| font-style: italic; | |
| line-height: 1.14; | |
| letter-spacing: -0.25px; | |
| text-transform: none; | |
| color: #656565; | |
| } | |
| .test-10 { | |
| /* There are no map of values in the list ($list) at the key of ($breakpoint), so we want to render both mobile and desktop. */ | |
| font-family: "din-2014", Arial, sans-serif; | |
| font-size: 14px; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.29; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: #181918; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.32.12", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment