Skip to content

Instantly share code, notes, and snippets.

@ronaldpoi

ronaldpoi/input.scss

Created May 2, 2022 23:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ronaldpoi/1162256b6f83d2a20fc6ba15b7993082 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ronaldpoi/1162256b6f83d2a20fc6ba15b7993082 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
$colors-primitives: (
brand-navy-800: #0E162F,
brand-navy-700: #1B2A58,
brand-navy-600: #394876,
brand-navy-500: #616A85,
brand-navy-400: #868A97,
brand-navy-300: #A8ACBB,
brand-navy-200: #C1C5D0,
brand-navy-100: #D7DAE4,
brand-navy-50: #E9EDF3,
brand-yellow-800: #846B00,
brand-yellow-700: #AC930D,
brand-yellow-600: #D0B41F,
brand-yellow-500: #EBCA0A,
brand-yellow-400: #FFDE11,
brand-yellow-300: #FFEB33,
brand-yellow-200: #FFF096,
brand-yellow-100: #FFF7C3,
brand-yellow-50: #FFFCE7,
brand-red-800: #970201,
brand-red-700: #B01005,
brand-red-600: #C11802,
brand-red-500: #D02910,
brand-red-400: #E43D24,
brand-red-300: #F46C55,
brand-red-200: #F19E91,
brand-red-100: #F8CEC8,
brand-red-50: #FCECE9,
brand-blue-800: #0E1630,
brand-blue-700: #071644,
brand-blue-600: #142C7D,
brand-blue-500: #324A9B,
brand-blue-400: #5068B9,
brand-blue-300: #778BD0,
brand-blue-200: #ACB8E1,
brand-blue-100: #DFE5F6,
brand-blue-50: #EBEDF5,
neutral-lc: #FFFFFF,
neutral-hc: #1F1F1F,
gray-800: #333333,
gray-700: #484848,
gray-600: #646464,
gray-500: #868686,
gray-400: #A3A3A3,
gray-300: #C2C2C2,
gray-200: #D9D9D9,
gray-100: #EAEAEA,
gray-50: #F8F8F8,
emerald-800: #08740A,
emerald-700: #269228,
emerald-600: #3AA63C,
emerald-500: #58C45A,
emerald-400: #73D775,
emerald-300: #8EE590,
emerald-200: #ACF1AB,
emerald-100: #C6F5C8,
emerald-50: #DCFADC,
scarlet-800: #8E0000,
scarlet-700: #AC0000,
scarlet-600: #CA0F1C,
scarlet-500: #DA3737,
scarlet-400: #E85454,
scarlet-300: #FC8078,
scarlet-200: #F7A199,
scarlet-100: #F5C0B7,
scarlet-50: #FFDED5,
pacific-800: #001E8E,
pacific-700: #003CAC,
pacific-600: #0F5ACA,
pacific-500: #236EDE,
pacific-400: #418CFC,
pacific-300: #64AAFF,
pacific-200: #82C8FF,
pacific-100: #AAE4FF,
pacific-50: #C5F0FB,
carrot-800: #8F3600,
carrot-700: #AD5400,
carrot-600: #C16800,
carrot-500: #DF8600,
carrot-400: #F39A14,
carrot-300: #FFAE28,
carrot-200: #F6BE41,
carrot-100: #FFD178,
carrot-50: #FFE2AA,
lemon-800: #805C00,
lemon-700: #A88400,
lemon-600: #D0AC00,
lemon-500: #EECA04,
lemon-400: #F9D816,
lemon-300: #FFEA6D,
lemon-200: #FFEE87,
lemon-100: #FFFCAA,
lemon-50: #FCFCC1,
ocean-800: #004D4D,
ocean-700: #006B6B,
ocean-600: #009D9D,
ocean-500: #0AC5C5,
ocean-400: #3BD9D9,
ocean-300: #90E3DE,
ocean-200: #9EEBE6,
ocean-100: #C2F2F1,
ocean-50: #E7FEFE,
);
$colors-core: (
surface: neutral-lc,
on-surface: gray-800,
primary: brand-yellow-400,
secondary: brand-navy-800,
interactive: brand-red-600,
system-critical: scarlet-600,
system-warning: carrot-500,
system-success: emerald-600,
system-highlight: pacific-600,
system-alert: lemon-300,
system-critical-light: scarlet-100,
system-warning-light: carrot-100,
system-success-light: emerald-100,
system-highlight-light: pacific-100,
system-alert-light: lemon-100,
system-completed-light: gray-100,
);
$colors-action: (
actions-primary-default: brand-yellow-400,
actions-primary-hover: brand-yellow-600,
actions-primary-disabled: brand-yellow-200,
actions-secondary-default: brand-navy-800,
actions-secondary-hover: brand-navy-600,
actions-secondary-disabled: brand-navy-500,
actions-critical-default: system-critical,
actions-critical-hover: scarlet-400,
actions-critical-disabled: scarlet-100,
actions-action-on-hc-default: neutral-lc,
actions-action-on-hc-hover: gray-50,
actions-action-on-hc-disabled: gray-100,
);
$colors-background: (
background-default: gray-50,
background-hover: gray-100,
background-pressed: gray-200,
background-selected: gray-300,
background-hc: gray-100,
background-hc-hover: gray-200,
background-hc-pressed: gray-300,
background-hc-selected: gray-400,
);
$colors-text: (
text-default: black,
text-subdued: gray-600,
text-disabled: gray-300,
text-critical: system-critical,
text-success: emerald-800,
text-on-primary: gray-800,
text-on-secondary: white,
text-on-hollow: gray-800,
text-on-interactive: white,
text-on-alert: gray-800,
);
$colors-stroke: (
stroke-default: gray-300,
stroke-subdued: gray-200,
stroke-hover: gray-400,
stroke-critical: system-critical,
stroke-critical-hover: scarlet-400,
stroke-critical-disabled: scarlet-100,
stroke-active: brand-yellow-400,
stroke-active-subdued: brand-yellow-600,
stroke-success: system-success,
stroke-success-subdued: emerald-400,
stroke-on-hc: neutral-lc,
stroke-on-interactive: neutral-lc,
);
$colors-surface: (
surface-default: neutral-lc,
surface-subdued: gray-50,
surface-hover: gray-100,
surface-depressed: gray-200,
surface-disabled: gray-100,
surface-pressed: gray-400,
surface-selected-default: brand-navy-800,
surface-selected-hover: brand-navy-600,
surface-selected-disabled: brand-navy-500,
surface-hc: brand-navy-800,
surface-hc-hover: brand-navy-600,
surface-success-default: emerald-600,
surface-success-hover: emerald-400,
surface-success-pressed: emerald-800,
);
// Move to functions
@function map-collect($maps...) {
$collection: ();
@each $map in $maps {
$collection: map-merge($collection, $map);
}
@return $collection;
}
$colors-list: map-collect(
$colors-core,
$colors-action,
$colors-background,
$colors-text,
$colors-stroke,
$colors-surface,
);
:root {
/*
Colors primitives generator
*/
@each $color, $value in $colors-primitives {
--color-#{$color}: #{$value};
}
/*
Colors generator
*/
@each $color, $value in $colors-list {
--color-#{$color}: var(--color-#{$value});
}
}
@function color($arg) {
@return --color-#{$arg};
}
@mixin color-type($color) {
color: var(--color-#{$color});
}
@mixin color-border($color) {
border-color: var(--color-#{$color});
}
@mixin color-background($color) {
background-color: var(--color-#{$color});
}
div {
@include color-type(surface);
@include color-background(stroke);
@include color-border(stroke-default);
border: 2px solid color(stroke-default);
&:hover {
@include color-border(stroke-hover)
}
}
Raw
output.css
:root {
/*
Colors primitives generator
*/
--color-brand-navy-800: #0E162F;
--color-brand-navy-700: #1B2A58;
--color-brand-navy-600: #394876;
--color-brand-navy-500: #616A85;
--color-brand-navy-400: #868A97;
--color-brand-navy-300: #A8ACBB;
--color-brand-navy-200: #C1C5D0;
--color-brand-navy-100: #D7DAE4;
--color-brand-navy-50: #E9EDF3;
--color-brand-yellow-800: #846B00;
--color-brand-yellow-700: #AC930D;
--color-brand-yellow-600: #D0B41F;
--color-brand-yellow-500: #EBCA0A;
--color-brand-yellow-400: #FFDE11;
--color-brand-yellow-300: #FFEB33;
--color-brand-yellow-200: #FFF096;
--color-brand-yellow-100: #FFF7C3;
--color-brand-yellow-50: #FFFCE7;
--color-brand-red-800: #970201;
--color-brand-red-700: #B01005;
--color-brand-red-600: #C11802;
--color-brand-red-500: #D02910;
--color-brand-red-400: #E43D24;
--color-brand-red-300: #F46C55;
--color-brand-red-200: #F19E91;
--color-brand-red-100: #F8CEC8;
--color-brand-red-50: #FCECE9;
--color-brand-blue-800: #0E1630;
--color-brand-blue-700: #071644;
--color-brand-blue-600: #142C7D;
--color-brand-blue-500: #324A9B;
--color-brand-blue-400: #5068B9;
--color-brand-blue-300: #778BD0;
--color-brand-blue-200: #ACB8E1;
--color-brand-blue-100: #DFE5F6;
--color-brand-blue-50: #EBEDF5;
--color-neutral-lc: #FFFFFF;
--color-neutral-hc: #1F1F1F;
--color-gray-800: #333333;
--color-gray-700: #484848;
--color-gray-600: #646464;
--color-gray-500: #868686;
--color-gray-400: #A3A3A3;
--color-gray-300: #C2C2C2;
--color-gray-200: #D9D9D9;
--color-gray-100: #EAEAEA;
--color-gray-50: #F8F8F8;
--color-emerald-800: #08740A;
--color-emerald-700: #269228;
--color-emerald-600: #3AA63C;
--color-emerald-500: #58C45A;
--color-emerald-400: #73D775;
--color-emerald-300: #8EE590;
--color-emerald-200: #ACF1AB;
--color-emerald-100: #C6F5C8;
--color-emerald-50: #DCFADC;
--color-scarlet-800: #8E0000;
--color-scarlet-700: #AC0000;
--color-scarlet-600: #CA0F1C;
--color-scarlet-500: #DA3737;
--color-scarlet-400: #E85454;
--color-scarlet-300: #FC8078;
--color-scarlet-200: #F7A199;
--color-scarlet-100: #F5C0B7;
--color-scarlet-50: #FFDED5;
--color-pacific-800: #001E8E;
--color-pacific-700: #003CAC;
--color-pacific-600: #0F5ACA;
--color-pacific-500: #236EDE;
--color-pacific-400: #418CFC;
--color-pacific-300: #64AAFF;
--color-pacific-200: #82C8FF;
--color-pacific-100: #AAE4FF;
--color-pacific-50: #C5F0FB;
--color-carrot-800: #8F3600;
--color-carrot-700: #AD5400;
--color-carrot-600: #C16800;
--color-carrot-500: #DF8600;
--color-carrot-400: #F39A14;
--color-carrot-300: #FFAE28;
--color-carrot-200: #F6BE41;
--color-carrot-100: #FFD178;
--color-carrot-50: #FFE2AA;
--color-lemon-800: #805C00;
--color-lemon-700: #A88400;
--color-lemon-600: #D0AC00;
--color-lemon-500: #EECA04;
--color-lemon-400: #F9D816;
--color-lemon-300: #FFEA6D;
--color-lemon-200: #FFEE87;
--color-lemon-100: #FFFCAA;
--color-lemon-50: #FCFCC1;
--color-ocean-800: #004D4D;
--color-ocean-700: #006B6B;
--color-ocean-600: #009D9D;
--color-ocean-500: #0AC5C5;
--color-ocean-400: #3BD9D9;
--color-ocean-300: #90E3DE;
--color-ocean-200: #9EEBE6;
--color-ocean-100: #C2F2F1;
--color-ocean-50: #E7FEFE;
/*
Colors generator
*/
--color-surface: var(--color-neutral-lc);
--color-on-surface: var(--color-gray-800);
--color-primary: var(--color-brand-yellow-400);
--color-secondary: var(--color-brand-navy-800);
--color-interactive: var(--color-brand-red-600);
--color-system-critical: var(--color-scarlet-600);
--color-system-warning: var(--color-carrot-500);
--color-system-success: var(--color-emerald-600);
--color-system-highlight: var(--color-pacific-600);
--color-system-alert: var(--color-lemon-300);
--color-system-critical-light: var(--color-scarlet-100);
--color-system-warning-light: var(--color-carrot-100);
--color-system-success-light: var(--color-emerald-100);
--color-system-highlight-light: var(--color-pacific-100);
--color-system-alert-light: var(--color-lemon-100);
--color-system-completed-light: var(--color-gray-100);
--color-actions-primary-default: var(--color-brand-yellow-400);
--color-actions-primary-hover: var(--color-brand-yellow-600);
--color-actions-primary-disabled: var(--color-brand-yellow-200);
--color-actions-secondary-default: var(--color-brand-navy-800);
--color-actions-secondary-hover: var(--color-brand-navy-600);
--color-actions-secondary-disabled: var(--color-brand-navy-500);
--color-actions-critical-default: var(--color-system-critical);
--color-actions-critical-hover: var(--color-scarlet-400);
--color-actions-critical-disabled: var(--color-scarlet-100);
--color-actions-action-on-hc-default: var(--color-neutral-lc);
--color-actions-action-on-hc-hover: var(--color-gray-50);
--color-actions-action-on-hc-disabled: var(--color-gray-100);
--color-background-default: var(--color-gray-50);
--color-background-hover: var(--color-gray-100);
--color-background-pressed: var(--color-gray-200);
--color-background-selected: var(--color-gray-300);
--color-background-hc: var(--color-gray-100);
--color-background-hc-hover: var(--color-gray-200);
--color-background-hc-pressed: var(--color-gray-300);
--color-background-hc-selected: var(--color-gray-400);
--color-text-default: var(--color-black);
--color-text-subdued: var(--color-gray-600);
--color-text-disabled: var(--color-gray-300);
--color-text-critical: var(--color-system-critical);
--color-text-success: var(--color-emerald-800);
--color-text-on-primary: var(--color-gray-800);
--color-text-on-secondary: var(--color-white);
--color-text-on-hollow: var(--color-gray-800);
--color-text-on-interactive: var(--color-white);
--color-text-on-alert: var(--color-gray-800);
--color-stroke-default: var(--color-gray-300);
--color-stroke-subdued: var(--color-gray-200);
--color-stroke-hover: var(--color-gray-400);
--color-stroke-critical: var(--color-system-critical);
--color-stroke-critical-hover: var(--color-scarlet-400);
--color-stroke-critical-disabled: var(--color-scarlet-100);
--color-stroke-active: var(--color-brand-yellow-400);
--color-stroke-active-subdued: var(--color-brand-yellow-600);
--color-stroke-success: var(--color-system-success);
--color-stroke-success-subdued: var(--color-emerald-400);
--color-stroke-on-hc: var(--color-neutral-lc);
--color-stroke-on-interactive: var(--color-neutral-lc);
--color-surface-default: var(--color-neutral-lc);
--color-surface-subdued: var(--color-gray-50);
--color-surface-hover: var(--color-gray-100);
--color-surface-depressed: var(--color-gray-200);
--color-surface-disabled: var(--color-gray-100);
--color-surface-pressed: var(--color-gray-400);
--color-surface-selected-default: var(--color-brand-navy-800);
--color-surface-selected-hover: var(--color-brand-navy-600);
--color-surface-selected-disabled: var(--color-brand-navy-500);
--color-surface-hc: var(--color-brand-navy-800);
--color-surface-hc-hover: var(--color-brand-navy-600);
--color-surface-success-default: var(--color-emerald-600);
--color-surface-success-hover: var(--color-emerald-400);
--color-surface-success-pressed: var(--color-emerald-800);
}
div {
color: var(--color-surface);
background-color: var(--color-stroke);
border-color: var(--color-stroke-default);
border: 2px solid --color-stroke-default;
}
div:hover {
border-color: var(--color-stroke-hover);
}
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