Created
July 25, 2023 14:30
-
-
Save katsampukas/afe846323864ed7d7ab9cbc79886e189 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
// Colors Tokens | |
// design Documentation: https://zeroheight.com/5305a4b9d/v/latest/p/00072e-colors/b/66c1df | |
// Usage Example | |
// .foo { | |
// background: color(background, neutral, strong); // category, role, prominence | |
// color: color(text, success, default); | |
// border: $border-width-thin solid color(border, informative, weak); | |
// } | |
@function map-deep-get($map, $keys...) { | |
@each $key in $keys { | |
$map: map-get($map, $key); | |
} | |
@return $map; | |
} | |
// Base | |
$color-base-white: #fff; | |
$color-base-black: #000; | |
// Neutral | |
$color-neutral-100: #f8f8f8; | |
$color-neutral-200: #f1f1f1; | |
$color-neutral-300: #e8e8e8; | |
$color-neutral-400: #dcdcdc; | |
$color-neutral-500: #bbb; | |
$color-neutral-600: #999; | |
$color-neutral-700: #707070; | |
$color-neutral-800: #363636; | |
$color-neutral-900: #101010; | |
// Primary | |
$color-primary-100: #ebf6fe; | |
$color-primary-200: #d3eafd; | |
$color-primary-300: #8ac7fa; | |
$color-primary-400: #59aff8; | |
$color-primary-500: #2898f5; | |
$color-primary-600: #0971c8; | |
$color-primary-700: #0863b0; | |
$color-primary-800: #075597; | |
$color-primary-900: #06487f; | |
// Success | |
$color-success-100: #ebf7e9; | |
$color-success-200: #e0f2df; | |
$color-success-300: #bde3bb; | |
$color-success-400: #88cd85; | |
$color-success-500: #65bf60; | |
$color-success-600: #49a844; | |
$color-success-700: #398435; | |
$color-success-800: #295f27; | |
$color-success-900: #1a3b18; | |
// Informative | |
$color-informative-100: #ebf6fe; | |
$color-informative-200: #d3eafd; | |
$color-informative-300: #8ac7fa; | |
$color-informative-400: #59aff8; | |
$color-informative-500: #2898f5; | |
$color-informative-600: #0971c8; | |
$color-informative-700: #0863b0; | |
$color-informative-800: #075597; | |
$color-informative-900: #06487f; | |
// Warning | |
$color-warning-100: #fffbe5; | |
$color-warning-200: #fff8cc; | |
$color-warning-300: #fff099; | |
$color-warning-400: #ffe966; | |
$color-warning-500: #ffe133; | |
$color-warning-600: #ffda00; | |
$color-warning-700: #ccae00; | |
$color-warning-800: #998300; | |
$color-warning-900: #665700; | |
// danger | |
$color-danger-100: #fcebeb; | |
$color-danger-200: #fce1e0; | |
$color-danger-300: #f8b3b2; | |
$color-danger-400: #f38583; | |
$color-danger-500: #ef5754; | |
$color-danger-600: #e21915; | |
$color-danger-700: #cb1613; | |
$color-danger-800: #b31411; | |
$color-danger-900: #9c110f; | |
// accent | |
$color-accent-100: #fef3e8; | |
$color-accent-200: #fde6cf; | |
$color-accent-300: #fcd9b7; | |
$color-accent-400: #fabf86; | |
$color-accent-500: #f8a555; | |
$color-accent-600: #f68b24; | |
$color-accent-700: #de7109; | |
$color-accent-800: #ad5807; | |
$color-accent-900: #7c3f05; | |
// Marketplace | |
$color-marketplace-100: #ebf7e9; | |
$color-marketplace-200: #e0f2df; | |
$color-marketplace-300: #bde3bb; | |
$color-marketplace-400: #88cd85; | |
$color-marketplace-500: #65bf60; | |
$color-marketplace-600: #49a844; | |
$color-marketplace-700: #398435; | |
$color-marketplace-800: #295f27; | |
$color-marketplace-900: #1a3b18; | |
// Plus | |
$color-plus-100: #efe9fc; | |
$color-plus-200: #cfbdf5; | |
$color-plus-300: #ae90ef; | |
$color-plus-400: #8e63e9; | |
$color-plus-500: #6e37e2; | |
$color-plus-600: #541dc9; | |
$color-plus-700: #41179c; | |
$color-plus-800: #2f1070; | |
$color-plus-900: #1c0a43; | |
// Favorite | |
$color-favorite-100: #fde5e3; | |
$color-favorite-200: #fabab3; | |
$color-favorite-300: #f78e83; | |
$color-favorite-400: #f46353; | |
$color-favorite-500: #f13723; | |
$color-favorite-600: #d3210e; | |
$color-favorite-700: #a31a0a; | |
// Color mixin | |
@function color($category, $role, $prominence, $dark: false) { | |
$color: ( | |
"background": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"default": $color-neutral-100, | |
"strong": $color-neutral-200, | |
"stronger": $color-neutral-300, | |
"strongest": $color-neutral-800 | |
), | |
"success": ( | |
"weak": $color-success-100, | |
"default": $color-success-700 | |
), | |
"informative": ( | |
"weak": $color-informative-100, | |
"default": $color-informative-600 | |
), | |
"warning": ( | |
"weak": $color-warning-100, | |
"default": $color-warning-600, | |
"strong": $color-warning-900 | |
), | |
"danger": ( | |
"weak": $color-danger-100, | |
"default": $color-danger-600 | |
), | |
"accent": ( | |
"weak": $color-accent-100, | |
"default": $color-accent-600 | |
), | |
"marketplace": ( | |
"weak": $color-marketplace-200, | |
"default": $color-marketplace-700 | |
), | |
"plus": ( | |
"weak": $color-plus-100, | |
"default": $color-plus-600 | |
), | |
"favorite": ( | |
"default": $color-favorite-400 | |
) | |
), | |
"border": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"default": $color-neutral-300, | |
"strong": $color-neutral-500 | |
), | |
"primary": ( | |
"default": $color-primary-600 | |
), | |
"success": ( | |
"weak": $color-success-300, | |
"default": $color-success-700 | |
), | |
"informative": ( | |
"weak": $color-informative-300, | |
"default": $color-informative-600 | |
), | |
"warning": ( | |
"default": $color-warning-600, | |
"strong": $color-warning-700 | |
), | |
"danger": ( | |
"weak": $color-danger-300, | |
"default": $color-danger-600 | |
), | |
"accent": ( | |
"default": $color-accent-600 | |
), | |
"plus": ( | |
"default": $color-plus-600 | |
) | |
), | |
"text": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"weak": $color-neutral-700, | |
"default": $color-neutral-800, | |
"strong": $color-neutral-900 | |
), | |
"primary": ( | |
"default": $color-primary-600, | |
"strong": $color-primary-700 | |
), | |
"success": ( | |
"default": $color-success-700, | |
"strong": $color-success-800 | |
), | |
"warning": ( | |
"default": $color-warning-900 | |
), | |
"danger": ( | |
"default": $color-danger-600, | |
"strong": $color-danger-800 | |
), | |
"accent": ( | |
"default": $color-accent-600, | |
"strong": $color-accent-900 | |
), | |
"marketplace": ( | |
"default": $color-marketplace-700, | |
"strong": $color-marketplace-800 | |
), | |
"plus": ( | |
"default": $color-plus-600, | |
"strong": $color-plus-800 | |
) | |
), | |
"icon": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"weak": $color-neutral-500, | |
"default": $color-neutral-700, | |
"strong": $color-neutral-800 | |
), | |
"success": ( | |
"default": $color-success-700 | |
), | |
"informative": ( | |
"default": $color-informative-600 | |
), | |
"warning": ( | |
"default": $color-warning-800 | |
), | |
"danger": ( | |
"default": $color-danger-600 | |
), | |
"accent": ( | |
"default": $color-accent-600 | |
), | |
"marketplace": ( | |
"default": $color-marketplace-700, | |
"strong": $color-marketplace-800 | |
), | |
"plus": ( | |
"default": $color-plus-600, | |
"strong": $color-plus-800 | |
), | |
"favorite": ( | |
"default": $color-favorite-400 | |
) | |
), | |
"divider": ( | |
"neutral": ( | |
"weak": $color-neutral-300, | |
"default": $color-neutral-400, | |
"strong": $color-neutral-500 | |
) | |
) | |
); | |
$color-dark: ( | |
"background": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"default": $color-neutral-100, | |
"strong": red, | |
"stronger": $color-neutral-300, | |
"strongest": $color-neutral-800 | |
), | |
"success": ( | |
"weak": $color-success-100, | |
"default": $color-success-700 | |
), | |
"informative": ( | |
"weak": $color-informative-100, | |
"default": $color-informative-600 | |
), | |
"warning": ( | |
"weak": $color-warning-100, | |
"default": $color-warning-600, | |
"strong": $color-warning-900 | |
), | |
"danger": ( | |
"weak": $color-danger-100, | |
"default": $color-danger-600 | |
), | |
"accent": ( | |
"weak": $color-accent-100, | |
"default": $color-accent-600 | |
), | |
"marketplace": ( | |
"weak": $color-marketplace-200, | |
"default": $color-marketplace-700 | |
), | |
"plus": ( | |
"weak": $color-plus-100, | |
"default": $color-plus-600 | |
), | |
"favorite": ( | |
"default": $color-favorite-400 | |
) | |
), | |
"border": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"default": $color-neutral-300, | |
"strong": $color-neutral-500 | |
), | |
"primary": ( | |
"default": $color-primary-600 | |
), | |
"success": ( | |
"weak": $color-success-300, | |
"default": $color-success-700 | |
), | |
"informative": ( | |
"weak": $color-informative-300, | |
"default": $color-informative-600 | |
), | |
"warning": ( | |
"default": $color-warning-600, | |
"strong": $color-warning-700 | |
), | |
"danger": ( | |
"weak": $color-danger-300, | |
"default": $color-danger-600 | |
), | |
"accent": ( | |
"default": $color-accent-600 | |
), | |
"plus": ( | |
"default": $color-plus-600 | |
) | |
), | |
"text": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"weak": $color-neutral-700, | |
"default": $color-neutral-800, | |
"strong": $color-neutral-900 | |
), | |
"primary": ( | |
"default": $color-primary-600, | |
"strong": $color-primary-700 | |
), | |
"success": ( | |
"default": $color-success-700, | |
"strong": $color-success-800 | |
), | |
"warning": ( | |
"default": $color-warning-900 | |
), | |
"danger": ( | |
"default": $color-danger-600, | |
"strong": $color-danger-800 | |
), | |
"accent": ( | |
"default": $color-accent-600, | |
"strong": $color-accent-900 | |
), | |
"marketplace": ( | |
"default": $color-marketplace-700, | |
"strong": $color-marketplace-800 | |
), | |
"plus": ( | |
"default": $color-plus-600, | |
"strong": $color-plus-800 | |
) | |
), | |
"icon": ( | |
"base": ( | |
"default": $color-base-white | |
), | |
"neutral": ( | |
"weak": $color-neutral-500, | |
"default": $color-neutral-700, | |
"strong": $color-neutral-800 | |
), | |
"success": ( | |
"default": $color-success-700 | |
), | |
"informative": ( | |
"default": $color-informative-600 | |
), | |
"warning": ( | |
"default": $color-warning-800 | |
), | |
"danger": ( | |
"default": $color-danger-600 | |
), | |
"accent": ( | |
"default": $color-accent-600 | |
), | |
"marketplace": ( | |
"default": $color-marketplace-700, | |
"strong": $color-marketplace-800 | |
), | |
"plus": ( | |
"default": $color-plus-600, | |
"strong": $color-plus-800 | |
), | |
"favorite": ( | |
"default": $color-favorite-400 | |
) | |
), | |
"divider": ( | |
"neutral": ( | |
"weak": $color-neutral-300, | |
"default": $color-neutral-400, | |
"strong": $color-neutral-500 | |
) | |
) | |
); | |
@if $dark { | |
@return map-deep-get($color-dark, $category, $role, $prominence); | |
} | |
@return map-deep-get($color, $category, $role, $prominence); | |
} | |
html { | |
background: color(background, neutral, strong); | |
} | |
@media (prefers-color-scheme: dark) { | |
html { | |
background: color(background, neutral, strong, true); | |
} | |
} |
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
html { | |
background: #f1f1f1; | |
} | |
@media (prefers-color-scheme: dark) { | |
html { | |
background: red; | |
} | |
} |
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.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