Skip to content

Instantly share code, notes, and snippets.

@nirazul

nirazul/input.scss

Created February 6, 2024 10:18
Download ZIP

Revisions

  1. nirazul created this gist Feb 6, 2024.
    30 changes: 30 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    @use 'sass:color' as color;

    $brand-colors: (
    'brand-turquoise-shade-1': color.mix(#1bade8, #ffffff, 10%),
    'brand-turquoise-shade-2': color.mix(#1bade8, #ffffff, 30%),
    'brand-turquoise-shade-3': color.mix(#1bade8, #ffffff, 50%),
    'brand-turquoise-shade-4': color.mix(#1bade8, #000000, 50%),
    'brand-turquoise-shade-5': color.mix(#1bade8, #000000, 30%),
    'brand-turquoise-shade-6': color.mix(#1bade8, #000000, 10%),

    'brand-blue-shade-1': color.mix(#0074d9, #ffffff, 20%),
    'brand-blue-shade-2': color.mix(#0074d9, #ffffff, 40%),
    'brand-blue-shade-3': color.mix(#0074d9, #ffffff, 60%),
    'brand-blue-shade-4': color.mix(#0074d9, #000000, 60%),
    'brand-blue-shade-5': color.mix(#0074d9, #000000, 40%),
    'brand-blue-shade-6': color.mix(#0074d9, #000000, 20%),

    '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};
    }
    }
    71 changes: 71 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    brand-turquoise-shade-1 {
    color: #e8f7fd;
    }

    brand-turquoise-shade-2 {
    color: #bbe6f8;
    }

    brand-turquoise-shade-3 {
    color: #8dd6f4;
    }

    brand-turquoise-shade-4 {
    color: #0e5774;
    }

    brand-turquoise-shade-5 {
    color: #083446;
    }

    brand-turquoise-shade-6 {
    color: #031117;
    }

    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;
    }
    9 changes: 9 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }