Last active
May 13, 2023 06:38
-
-
Save phreakin/7fcc523e9f3081024d066fb710556c35 to your computer and use it in GitHub Desktop.
_variables.scss
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
| // Root Colors | |
| :root { | |
| --primary: #446e9b; | |
| --secondary: #373a3c; | |
| --success: #93c54b; | |
| --info: #5bc0de; | |
| --warning: #f0ad4e; | |
| --danger: #e74c3c; | |
| --light: #f7f7f7; | |
| --dark: #333333; | |
| --white: #fff; | |
| --black: #000; | |
| --blue: #007bff; | |
| --indigo: #6610f2; | |
| --purple: #6f42c1; | |
| --pink: #e83e8c; | |
| --red: #dc3545; | |
| --orange: #fd7e14; | |
| --yellow: #ffc107; | |
| --green: #28a745; | |
| --teal: #20c997; | |
| --cyan: #17a2b8; | |
| --gray: #868e96; | |
| --gray-light: #e9ecef; | |
| --gray-lighter: #f7f7f7; | |
| --gray-lightest: #f8f9fa; | |
| --gray-dark: #343a40; | |
| --gray-darker: #212529; | |
| --gray-darkest: #1d2124; | |
| --gray-100: #f8f9fa; | |
| --gray-200: #e9ecef; | |
| --gray-300: #dee2e6; | |
| --gray-400: #ced4da; | |
| --gray-500: #adb5bd; | |
| --gray-600: #868e96; | |
| --gray-700: #495057; | |
| --gray-800: #343a40; | |
| --gray-900: #212529; | |
| --brand-primary: var(--primary); | |
| --brand-secondary: var(--secondary); | |
| --brand-success: var(--success); | |
| --brand-info: var(--info); | |
| --brand-warning: var(--warning); | |
| --brand-danger: var(--danger); | |
| --brand-light: var(--light); | |
| --brand-dark: var(--dark); | |
| --brand-white: var(--white); | |
| --brand-black: var(--black); | |
| --brand-transparent: var(--transparent); | |
| --brand-blue: var(--blue); | |
| --brand-indigo: var(--indigo); | |
| --brand-purple: var(--purple); | |
| --brand-pink: var(--pink); | |
| --brand-red: var(--red); | |
| --brand-orange: var(--orange); | |
| --brand-yellow: var(--yellow); | |
| --brand-green: var(--green); | |
| --brand-teal: var(--teal); | |
| --brand-cyan: var(--cyan); | |
| --amazon: #ff9900; | |
| --american-express: #005ba6; | |
| --android: #a4c639; | |
| --apple: #b6bcca; | |
| --bitbucket: #205081; | |
| --codepen: #000000; | |
| --css3: #1572b6; | |
| --discover: #ff6000; | |
| --dribbble: #ea4c89; | |
| --drupal: #0077c0; | |
| --ebay: #e53238; | |
| --envato: #82b541; | |
| --etsy: #f56400; | |
| --evernote: #2dbe60; | |
| --facebook: #3b5998; | |
| --flickr: #ff0084; | |
| --github: #333333; | |
| --gitlab: #fca326; | |
| --google: #4285f4; | |
| --google-plus: #db4437; | |
| --instagram: #517fa4; | |
| --joomla: #5091cd; | |
| --jsfiddle: #000000; | |
| --linkedin: #0077b5; | |
| --mastercard: #ff5f00; | |
| --medium: #02b875; | |
| --paypal: #009cde; | |
| --pinterest: #bd081c; | |
| --playstation: #003087; | |
| --reddit: #ff4500; | |
| --skype: #00aff0; | |
| --slack: #2eb67d; | |
| --snapchat: #fffc00; | |
| --soundcloud: #ff5500; | |
| --spotify: #1db954; | |
| --stack-overflow: #fe7a15; | |
| --stripe: #008cdd; | |
| --telegram: #0088cc; | |
| --trello: #0079bf; | |
| --tumblr: #35465c; | |
| --twitch: #6441a5; | |
| --twitter: #1da1f2; | |
| --vimeo: #1ab7ea; | |
| --visa: #142d67; | |
| --vk: #4a76a8; | |
| --whatsapp: #25d366; | |
| --wikipedia: #000000; | |
| --windows: #0078d6; | |
| --wordpress: #21759b; | |
| --xbox: #107c10; | |
| --yahoo: #410093; | |
| --yelp: #af0606; | |
| --youtube: #ff0000; | |
| --zalando: #ff6900; | |
| --zendesk: #03363d; | |
| --zoom: #2d8cff; | |
| --zurb: #008cba; | |
| } | |
| // Flat Colors | |
| $flat{ | |
| $primary: #446e9b; | |
| $secondary: #373a3c; | |
| $success: #93c54b; | |
| $info: #5bc0de; | |
| $warning: #f0ad4e; | |
| $danger: #e74c3c; | |
| $light: #f7f7f7; | |
| $dark: #333333; | |
| $white: #fff; | |
| $black: #000; | |
| $blue: #007bff; | |
| $indigo: #6610f2; | |
| $purple: #6f42c1; | |
| $pink: #e83e8c; | |
| $red: #dc3545; | |
| $orange: #fd7e14; | |
| $yellow: #ffc107; | |
| $green: #28a745; | |
| $teal: #20c997; | |
| $cyan: #17a2b8; | |
| } | |
| // Grays | |
| $grays{ | |
| $gray: #868e96; | |
| $gray-light: #e9ecef; | |
| $gray-lighter: #f7f7f7; | |
| $gray-lightest: #f8f9fa; | |
| $gray-dark: #343a40; | |
| $gray-darker: #212529; | |
| $gray-darkest: #1d2124; | |
| $gray-100: #f8f9fa; | |
| $gray-200: #e9ecef; | |
| $gray-300: #dee2e6; | |
| $gray-400: #ced4da; | |
| $gray-500: #adb5bd; | |
| $gray-600: #868e96; | |
| $gray-700: #495057; | |
| $gray-800: #343a40; | |
| $gray-900: #212529; | |
| } | |
| // Brand Colors | |
| $brand{ | |
| $primary: $primary; | |
| $secondary: $secondary; | |
| $success: $success; | |
| $info: $info; | |
| $warning: $warning; | |
| $danger: $danger; | |
| $light: $light; | |
| $dark: $dark; | |
| $white: $white; | |
| $black: $black; | |
| $blue: $blue; | |
| $indigo: $indigo; | |
| $purple: $purple; | |
| $pink: $pink; | |
| $red: $red; | |
| $orange: $orange; | |
| $yellow: $yellow; | |
| $green: $green; | |
| $teal: $teal; | |
| $cyan: $cyan; | |
| } | |
| // Social Colors | |
| $social{ | |
| $amazon: #ff9900; | |
| $american-express: #005ba6; | |
| $android: #a4c639; | |
| $apple: #b6bcca; | |
| $apple: #b6bcca; | |
| $bitbucket: #205081; | |
| $codepen: #000000; | |
| $css3: #1572b6; | |
| $discover: #ff6000; | |
| $dribbble: #ea4c89; | |
| $drupal: #0077c0; | |
| $ebay: #e53238; | |
| $envato: #82b541; | |
| $etsy: #f56400; | |
| $evernote: #2dbe60; | |
| $facebook: #3b5998; | |
| $flickr: #ff0084; | |
| $github: #333333; | |
| $gitlab: #e24329; | |
| $google: #dd4b39; | |
| $html5: #e44d26; | |
| $instagram: #517fa4; | |
| $joomla: #f44321; | |
| $jsfiddle: #000000; | |
| $linkedin: #007bb6; | |
| $linux: #000000; | |
| $linux: #000000; | |
| $mastercard: #cc0000; | |
| $medium: #02b875; | |
| $paypal: #003087; | |
| $pinterest: #cb2027; | |
| $quora: #a82400; | |
| $reddit: #ff4500; | |
| $slack: #3aaf85; | |
| $slideshare: #0077b5; | |
| $spotify: #1db954; | |
| $stack-exchange: #1e5397; | |
| $stack-overflow: #f48024; | |
| $stumbleupon: #eb4924; | |
| $telegram: #0088cc; | |
| $tumblr: #32506d; | |
| $twitter: #55acee; | |
| $visa: #142787; | |
| $vk: #45668e; | |
| $wechat: #7bb32e; | |
| $whatsapp: #25d366; | |
| $wikipedia: #000000; | |
| $windows: #00a4ef; | |
| $wordpress: #21759b; | |
| $yahoo: #430297; | |
| $yandex: #ffcc00; | |
| $yelp: #af0606; | |
| $youtube: #bb0000; | |
| $zalando: #ff6900; | |
| $zendesk: #03363d; | |
| $zoom: #2d8cff; | |
| $zurb: #008cba; | |
| } | |
| // Social Colors | |
| $social_colors{ | |
| $social-amazon: $amazon; | |
| $social-american-express: $american-express; | |
| $social-android: $android; | |
| $social-apple: $apple; | |
| $social-apple: $apple; | |
| $social-bitbucket: $bitbucket; | |
| $social-codepen: $codepen; | |
| $social-css3: $css3; | |
| $social-discover: $discover; | |
| $social-dribbble: $dribbble; | |
| $social-drupal: $drupal; | |
| $social-ebay: $ebay; | |
| $social-envato: $envato; | |
| $social-etsy: $etsy; | |
| $social-evernote: $evernote; | |
| $social-facebook: $facebook; | |
| $social-flickr: $flickr; | |
| $social-github: $github; | |
| $social-gitlab: $gitlab; | |
| $social-google: $google; | |
| $social-html5: $html5; | |
| $social-instagram: $instagram; | |
| $social-joomla: $joomla; | |
| $social-jsfiddle: $jsfiddle; | |
| $social-linkedin: $linkedin; | |
| $social-linux: $linux; | |
| $social-linux: $linux; | |
| $social-mastercard: $mastercard; | |
| $social-medium: $medium; | |
| $social-paypal: $paypal; | |
| $social-pinterest: $pinterest; | |
| $social-quora: $quora; | |
| $social-reddit: $reddit; | |
| $social-slack: $slack; | |
| $social-slideshare: $slideshare; | |
| $social-spotify: $spotify; | |
| $social-stack-exchange: $stack-exchange; | |
| $social-stack-overflow: $stack-overflow; | |
| $social-stumbleupon: $stumbleupon; | |
| $social-telegram: $telegram; | |
| $social-tumblr: $tumblr; | |
| $social-twitter: $twitter; | |
| $social-visa: $visa; | |
| $social-vk: $vk; | |
| $social-wechat: $wechat; | |
| $social-whatsapp: $whatsapp; | |
| $social-wikipedia: $wikipedia; | |
| $social-windows: $windows; | |
| $social-wordpress: $wordpress; | |
| $social-yahoo: $yahoo; | |
| $social-yandex: $yandex; | |
| $social-yelp: $yelp; | |
| $social-youtube: $youtube; | |
| } | |
| // Social Colors | |
| $social: ( | |
| "amazon": $amazon, | |
| "american-express": $american-express, | |
| "android": $android, | |
| "apple": $apple, | |
| "apple": $apple, | |
| "bitbucket": $bitbucket, | |
| "codepen": $codepen, | |
| "css3": $css3, | |
| "discover": $discover, | |
| "dribbble": $dribbble, | |
| "drupal": $drupal, | |
| "ebay": $ebay, | |
| "envato": $envato, | |
| "etsy": $etsy, | |
| "evernote": $evernote, | |
| "facebook": $facebook, | |
| "flickr": $flickr, | |
| "github": $github, | |
| "gitlab": $gitlab, | |
| "google": $google, | |
| "html5": $html5, | |
| "instagram": $instagram, | |
| "joomla": $joomla, | |
| "jsfiddle": $jsfiddle, | |
| "linkedin": $linkedin, | |
| "linux": $linux, | |
| "linux": $linux, | |
| "mastercard": $mastercard, | |
| "medium": $medium, | |
| "paypal": $paypal, | |
| "pinterest": $pinterest, | |
| "quora": $quora, | |
| "reddit": $reddit, | |
| "slack": $slack, | |
| "slideshare": $slideshare, | |
| "spotify": $spotify, | |
| "stack-exchange": $stack-exchange, | |
| "stack-overflow": $stack-overflow, | |
| "stumbleupon": $stumbleupon, | |
| "telegram": $telegram, | |
| "tumblr": $tumblr, | |
| "twitter": $twitter, | |
| "visa": $visa, | |
| "vk": $vk, | |
| "wechat": $wechat, | |
| "whatsapp": $whatsapp, | |
| "wikipedia": $wikipedia, | |
| "windows": $windows, | |
| "wordpress": $wordpress, | |
| "yahoo": $yahoo, | |
| "yandex": $yandex, | |
| "yelp": $yelp, | |
| "youtube": $youtube | |
| ); | |
| // Material Colors | |
| $material: ( | |
| "red": #f44336, | |
| "pink": #e91e63, | |
| "purple": #9c27b0, | |
| "deep-purple": #673ab7, | |
| "indigo": #3f51b5, | |
| "blue": #2196f3, | |
| "light-blue": #03a9f4, | |
| "cyan": #00bcd4, | |
| "teal": #009688, | |
| "green": #4caf50, | |
| "light-green": #8bc34a, | |
| "lime": #cddc39, | |
| "yellow": #ffeb3b, | |
| "amber": #ffc107, | |
| "orange": #ff9800, | |
| "deep-orange": #ff5722, | |
| "brown": #795548, | |
| "grey": #9e9e9e, | |
| "blue-grey": #607d8b | |
| ); | |
| // Neon Colors | |
| $neon: ( | |
| "neon-red": #ff0000, | |
| "neon-pink": #ff0099, | |
| "neon-purple": #cc00ff, | |
| "neon-blue": #0099ff, | |
| "neon-green": #00ff00, | |
| "neon-yellow": #ffff00, | |
| "neon-orange": #ff9900 | |
| ); | |
| //Bootswatch Colors | |
| $bootswatch: ( | |
| "cerulean": #2fa4e7, | |
| "cosmo": #2780e3, | |
| "cyborg": #060606, | |
| "darkly": #373a3c, | |
| "flatly": #2c3e50, | |
| "journal": #eb6864, | |
| "lumen": #158cba, | |
| "paper": #f9f9f9, | |
| "readable": #222, | |
| "sandstone": #93c54b, | |
| "simplex": #d9230f, | |
| "slate": #464646, | |
| "spacelab": #446e9b, | |
| "superhero": #df691a, | |
| "united": #e95420, | |
| "yeti": #008cba | |
| ); | |
| // Bootswatch Slate Colors | |
| $bootswatch-slate: ( | |
| "slate": #464646, | |
| "slate-light": #5e5e5e, | |
| "slate-dark": #333333, | |
| "slate-primary": #446e9b, | |
| "slate-secondary": #373a3c, | |
| "slate-success": #93c54b, | |
| "slate-info": #5bc0de, | |
| "slate-warning": #f0ad4e, | |
| "slate-danger": #d9534f | |
| ); | |
| // Material Design Colors | |
| $material-design: ( | |
| "red": #f44336, | |
| "pink": #e91e63, | |
| "purple": #9c27b0, | |
| "deep-purple": #673ab7, | |
| "indigo": #3f51b5, | |
| "blue": #2196f3, | |
| "light-blue": #03a9f4, | |
| "cyan": #00bcd4, | |
| "teal": #009688, | |
| "green": #4caf50, | |
| "light-green": #8bc34a, | |
| "lime": #cddc39, | |
| "yellow": #ffeb3b, | |
| "amber": #ffc107, | |
| "orange": #ff9800, | |
| "deep-orange": #ff5722, | |
| "brown": #795548, | |
| "grey": #9e9e9e, | |
| "blue-grey": #607d8b | |
| ); | |
| /* Typography */ | |
| $typography{ | |
| $font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| $font-family-monospace: "Roboto Mono", "Courier New", Courier, monospace; | |
| $font-family-handwriting: "Permanent Marker", cursive; | |
| $font-family-condensed: "Roboto Condensed", sans-serif; | |
| $font-family-slab: "Roboto Slab", serif; | |
| $font-family-serif: "Roboto Slab", serif; | |
| } | |
| /* Font Sizes */ | |
| $font-sizes{ | |
| $font-size-xxs: 0.5rem; | |
| $font-size-xs: 0.75rem; | |
| $font-size-sm: 0.875rem; | |
| $font-size-md: 1rem; | |
| $font-size-lg: 1.25rem; | |
| $font-size-xl: 1.5rem; | |
| $font-size-xxl: 2rem; | |
| $font-size-xxxl: 3rem; | |
| } | |
| /* Font Weights */ | |
| $font-weights{ | |
| $font-weight-thin: 100; | |
| $font-weight-light: 300; | |
| $font-weight-normal: 400; | |
| $font-weight-bold: 700; | |
| $font-weight-black: 900; | |
| } | |
| /* Font Styles */ | |
| $font-styles{ | |
| $font-style-normal: normal; | |
| $font-style-italic: italic; | |
| $font-style-oblique: oblique; | |
| $font-style-inherit: inherit; | |
| $font-style-initial: initial; | |
| } | |
| /* Font Variants */ | |
| $font-variants{ | |
| $font-variant-normal: normal; | |
| $font-variant-small-caps: small-caps; | |
| $font-variant-inherit: inherit; | |
| $font-variant-initial: initial; | |
| $font-variant-unicase: unicase; | |
| $font-variant-titling-caps: titling-caps; | |
| } | |
| /* Font Stretches */ | |
| $font-stretches{ | |
| $font-stretch-ultra-condensed: ultra-condensed; | |
| $font-stretch-extra-condensed: extra-condensed; | |
| $font-stretch-condensed: condensed; | |
| $font-stretch-semi-condensed: semi-condensed; | |
| $font-stretch-normal: normal; | |
| $font-stretch-semi-expanded: semi-expanded; | |
| $font-stretch-expanded: expanded; | |
| $font-stretch-extra-expanded: extra-expanded; | |
| $font-stretch-ultra-expanded: ultra-expanded; | |
| } | |
| /* Font Line Heights */ | |
| $font-line-heights{ | |
| $font-line-height-xxs: 0.5; | |
| $font-line-height-xs: 0.75; | |
| $font-line-height-sm: 0.875; | |
| $font-line-height-md: 1; | |
| $font-line-height-lg: 1.25; | |
| $font-line-height-xl: 1.5; | |
| $font-line-height-xxl: 2; | |
| $font-line-height-xxxl: 3; | |
| } | |
| // Map of all font variables | |
| $font: ( | |
| "family": ( | |
| "sans-serif": $font-family-sans-serif, | |
| "monospace": $font-family-monospace, | |
| "handwriting": $font-family-handwriting, | |
| "condensed": $font-family-condensed, | |
| "slab": $font-family-slab, | |
| "serif": $font-family-serif | |
| ), | |
| "size": ( | |
| "xxs": $font-size-xxs, | |
| "xs": $font-size-xs, | |
| "sm": $font-size-sm, | |
| "md": $font-size-md, | |
| "lg": $font-size-lg, | |
| "xl": $font-size-xl, | |
| "xxl": $font-size-xxl, | |
| "xxxl": $font-size-xxxl | |
| ), | |
| "weight": ( | |
| "thin": $font-weight-thin, | |
| "light": $font-weight-light, | |
| "normal": $font-weight-normal, | |
| "bold": $font-weight-bold, | |
| "black": $font-weight-black | |
| ), | |
| "style": ( | |
| "normal": $font-style-normal, | |
| "italic": $font-style-italic, | |
| "oblique": $font-style-oblique, | |
| "inherit": $font-style-inherit, | |
| "initial": $font-style-initial | |
| ), | |
| "variant": ( | |
| "normal": $font-variant-normal, | |
| "small-caps": $font-variant-small-caps, | |
| "inherit": $font-variant-inherit, | |
| "initial": $font-variant-initial, | |
| "unicase": $font-variant-unicase, | |
| "titling-caps": $font-variant-titling-caps | |
| ), | |
| "stretch": ( | |
| "ultra-condensed": $font-stretch-ultra-condensed, | |
| "extra-condensed": $font-stretch-extra-condensed, | |
| "condensed": $font-stretch-condensed, | |
| "semi-condensed": $font-stretch-semi-condensed, | |
| "normal": $font-stretch-normal, | |
| "semi-expanded": $font-stretch-semi-expanded, | |
| "expanded": $font-stretch-expanded, | |
| "extra-expanded": $font-stretch-extra-expanded, | |
| "ultra-expanded": $font-stretch-ultra-expanded | |
| ), | |
| "line-height": ( | |
| "xxs": $font-line-height-xxs, | |
| "xs": $font-line-height-xs, | |
| "sm": $font-line-height-sm, | |
| "md": $font-line-height-md, | |
| "lg": $font-line-height-lg, | |
| "xl": $font-line-height-xl, | |
| "xxl": $font-line-height-xxl, | |
| "xxxl": $font-line-height-xxxl | |
| ) | |
| ); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment