Skip to content

Instantly share code, notes, and snippets.

@nirazul
Created February 2, 2024 19:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nirazul/2f67044c29268205b9367f0e54133598 to your computer and use it in GitHub Desktop.
Save nirazul/2f67044c29268205b9367f0e54133598 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use 'sass:color' as color;
$brand-colors: (
'brand-turquoise-shade-1': color.mix(#0074d9, #ffffff, 10%),
'brand-turquoise-shade-2': color.mix(#0074d9, #ffffff, 30%),
'brand-turquoise-shade-3': color.mix(#0074d9, #ffffff, 50%),
'brand-turquoise-shade-4': color.mix(#0074d9, #000000, 60%),
'brand-turquoise-shade-5': color.mix(#0074d9, #000000, 40%),
'brand-turquoise-shade-6': color.mix(#0074d9, #000000, 20%),
'brand-blue-shade-1': #cce3f7,
'brand-blue-shade-2': #99c7f0,
'brand-blue-shade-3': #66ace8,
'brand-blue-shade-4': #004682,
'brand-blue-shade-5': #002e57,
'brand-blue-shade-6': #00172b,
'brand-indigo-shade-1': color.mix(#34558b, #ffffff, 20%),
'brand-indigo-shade-2': color.mix(#34558b, #ffffff, 40%),
'brand-indigo-shade-3': color.mix(#34558b, #ffffff, 60%),
'brand-indigo-shade-4': color.mix(#34558b, #000000, 60%),
'brand-indigo-shade-5': color.mix(#34558b, #000000, 40%),
'brand-indigo-shade-6': color.mix(#34558b, #000000, 20%)
);
@each $name, $color in $brand-colors {
#{$name} {
color: #{$color};
}
}
brand-turquoise-shade-1 {
color: #e6f1fb;
}
brand-turquoise-shade-2 {
color: #b3d5f4;
}
brand-turquoise-shade-3 {
color: #80baec;
}
brand-turquoise-shade-4 {
color: #004682;
}
brand-turquoise-shade-5 {
color: #002e57;
}
brand-turquoise-shade-6 {
color: #00172b;
}
brand-blue-shade-1 {
color: #cce3f7;
}
brand-blue-shade-2 {
color: #99c7f0;
}
brand-blue-shade-3 {
color: #66ace8;
}
brand-blue-shade-4 {
color: #004682;
}
brand-blue-shade-5 {
color: #002e57;
}
brand-blue-shade-6 {
color: #00172b;
}
brand-indigo-shade-1 {
color: #d6dde8;
}
brand-indigo-shade-2 {
color: #aebbd1;
}
brand-indigo-shade-3 {
color: #8599b9;
}
brand-indigo-shade-4 {
color: #1f3353;
}
brand-indigo-shade-5 {
color: #152238;
}
brand-indigo-shade-6 {
color: #0a111c;
}
{
"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