Skip to content

Instantly share code, notes, and snippets.

@katsampukas

katsampukas/input.scss

Created July 25, 2023 14:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save katsampukas/afe846323864ed7d7ab9cbc79886e189 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save katsampukas/afe846323864ed7d7ab9cbc79886e189 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
// 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);
}
}
Raw
output.css
html {
background: #f1f1f1;
}
@media (prefers-color-scheme: dark) {
html {
background: red;
}
}
Raw
settings.json
{
"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