Created
November 23, 2020 17:20
-
-
Save arvindr21/09de705634fbb841784458d8bef4fb74 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
/// @group fonts | |
/// | |
/* Font family variations | |
************************* */ | |
$font-family-swiss: Swiss-721; | |
$font-swiss: $font-family-swiss; | |
$font-swiss-condensed: SwissCondensed; | |
$font-marriotticons: MarriottIcons; | |
$font-brandLogoIcons: BrandLogoIcons; | |
/*Brand icons with "by Marriott". These brand Icons are used in uni nav brand portfolio card, search results, brand filters,favs page*/ | |
$font-portfolioLogoIcons: PortfolioLogoIcons; | |
/*These font icons are ONLY used in the brand ribbon.*/ | |
$font-family-videoicons: VideoIcons; | |
/* Font size variations | |
*********************** */ | |
$font-xs: 12px; | |
$font-s: 14px; | |
$font-m: 16px; | |
$font-l: 18px; | |
$font-xl: 20px; | |
$font-xxl: 22px; | |
$font-xxxl: 24px; | |
$font-1x: 34px; | |
$font-2x: 36px; | |
$font-3x: 60px; | |
$font-4x: 90px; | |
/* Line Height palette | |
**************** */ | |
$line-height-xs: 16px; | |
$line-height-s: 18px; | |
$line-height-m: 20px; | |
$line-height-l: 22px; | |
$line-height-xl: 24px; | |
$line-height-xxl: 26px; | |
$line-height-xxxl: 38px; | |
$line-height-1x: 44px; | |
$line-height-2x: 64px; | |
/* Font weight variations | |
************************* */ | |
$font-weight-regular: 500; | |
$font-weight-medium: 700; | |
$font-weight-bold: 900; | |
@function str-replace($string, $search, $replace: "") { | |
$index: str-index($string, $search); | |
@if $index { | |
@return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
} | |
@return $string; | |
} | |
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) { | |
$src: null; | |
$extmods: (eot: "?", | |
svg: "#"+ str-replace($name, " ", "_")); | |
$formats: (otf: "opentype", | |
ttf: "truetype" | |
); | |
@each $ext in $exts { | |
$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); | |
$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); | |
$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma); | |
} | |
@font-face { | |
font-family: quote($name); | |
font-style: $style; | |
font-weight: $weight; | |
src: $src; | |
} | |
} | |
$html-font-size: 16px; | |
@function stripUnit($value) { | |
@return $value / ($value * 0+1); | |
} | |
@function toRem($pxValue) { | |
@return #{stripUnit($pxValue) / stripUnit($html-font-size)}rem; | |
} | |
@mixin screen($size, $type: max, $pixels: $breakpoint-small) { | |
@if $size=='small' { | |
@media screen and ($type+-width: $breakpoint-small) { | |
@content; | |
} | |
} | |
@else if $size=='med-small' { | |
@media screen and ($type+-width: $breakpoint-med-small) { | |
@content; | |
} | |
} | |
@else if $size=='med' { | |
@media screen and ($type+-width: $breakpoint-med) { | |
@content; | |
} | |
} | |
@else if $size=='large' { | |
@media screen and ($type+-width: $breakpoint-med) { | |
@content; | |
} | |
} | |
@else if $size=='custom' { | |
@media screen and ($type+-width: $pixels + px) { | |
@content; | |
} | |
} | |
@else { | |
@content; | |
} | |
} | |
@mixin font-attributes($style, | |
$variant, | |
$weight, | |
$size, | |
$line-height, | |
$family) { | |
font: $style $variant $weight #{$size}/#{$line-height} $family; | |
} | |
/// @group Colors | |
/// Standard Palette | |
/// Base | |
$base-10: #1c1c1c; | |
$base-20: #ffffff; | |
/// Accent | |
$accent-10: #ff9662; | |
$accent-20: #b84c16; | |
/// Neutral | |
$neutral-10: #f8f8f8; | |
$neutral-20: #eeeeee; | |
$neutral-30: #c4c4c4; | |
$neutral-40: #707070; | |
$neutral-50: #303030; | |
$neutral-00: #000000; | |
/// Alerts | |
$alert-10: #d0021b; | |
$alert-20: #ffffff; | |
$alert-30: #d0021b; | |
$alert-40: #b94600; | |
$alert-50: #477d00; | |
$alert-60: #0565ae; | |
/// Merchandise | |
$merch-10: #ff9662; | |
$merch-20: #477d00; | |
$merch-30: #1c1c1c; | |
$merch-40: #fbc02d; | |
$merch-50: #ffffff; | |
$merch-60: #ffb995; | |
/// Loyalty Palette solid | |
$member-solid: #ff9662; | |
$member-solidAlt: #f8f8f8; | |
$silver-solid: #707488; | |
$gold-solid: #8c6f49; | |
$platinum-solid: #5e5f61; | |
$titanium-solid: #554749; | |
$ambassador-solid: #231c19; | |
$typography:("title":("s":("font-family":$font-swiss, | |
"font-size":$font-1x, | |
"line-height":$line-height-xxxl, | |
"font-weight":$font-weight-medium, | |
"color":$base-10, | |
"inverse-color":$base-20), | |
"m":("font-family":$font-swiss, | |
"font-size":$font-2x, | |
"line-height":$line-height-1x, | |
"font-weight":$font-weight-medium, | |
"color":$base-10, | |
"inverse-color":$base-20), | |
"l":("font-family":$font-swiss, | |
"font-size":$font-3x, | |
"line-height":$line-height-2x, | |
" font-weight":$font-weight-medium, | |
"color":$base-10, | |
"inverse-color":$base-20))); | |
// https://gist.github.com/HugoGiraudel/9933331 | |
// map-fetch($map, $keys) | |
// | |
// An easy way to fetch a deep value in a multi-level map. Works much like | |
// map-get() except that you pass multiple keys as the second parameter to | |
// go down multiple levels in the nested map. | |
@function map-fetch($map, $keys) { | |
@each $key in $keys { | |
$map: map-get($map, $key); | |
} | |
@return $map; | |
} | |
@each $type, | |
$sizes in $typography { | |
.t-#{$type} { | |
font-size: toRem(map-fetch($typography, "title" "s" "font-size")); | |
// font-size: map-get(map-get(map-get($typography, "title"), "s"), "font-size"); | |
@each $size, | |
$attrList in $sizes { | |
&-#{$size} { | |
@include font-attributes(normal, | |
normal, | |
map-fetch($attrList, "font-weight"), | |
toRem(map-fetch($attrList, "font-size")), | |
toRem(map-fetch($attrList, "line-height")), | |
map-fetch($attrList, "font-family")); | |
} | |
} | |
@each $size, | |
$attrList in $sizes { | |
&-inverse-#{$size} { | |
color: map-fetch($attrList, "inverse-color"); | |
} | |
} | |
} | |
} |
This file contains 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
/* Font family variations | |
************************* */ | |
/*Brand icons with "by Marriott". These brand Icons are used in uni nav brand portfolio card, search results, brand filters,favs page*/ | |
/*These font icons are ONLY used in the brand ribbon.*/ | |
/* Font size variations | |
*********************** */ | |
/* Line Height palette | |
**************** */ | |
/* Font weight variations | |
************************* */ | |
.t-title { | |
font-size: 2.125rem; | |
} | |
.t-title-s { | |
font: normal normal 700 2.125rem/2.375rem Swiss-721; | |
} | |
.t-title-m { | |
font: normal normal 700 2.25rem/2.75rem Swiss-721; | |
} | |
.t-title-l { | |
font: normal normal 3.75rem/4rem Swiss-721; | |
} | |
.t-title-inverse-s { | |
color: #ffffff; | |
} | |
.t-title-inverse-m { | |
color: #ffffff; | |
} | |
.t-title-inverse-l { | |
color: #ffffff; | |
} |
This file contains 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.26.11", | |
"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