🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@seedcss/seed-color-scheme

Package Overview
Dependencies
Maintainers
3
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@seedcss/seed-color-scheme - npm Package Compare versions

Comparing version

0.0.6
to
0.0.7

17

package.json
{
"name": "@seedcss/seed-color-scheme",
"version": "0.0.6",
"version": "0.0.7",
"description": "Color scheme system pack for Seed",

@@ -47,5 +47,2 @@ "main": "index.js",

],
"engines": {
"node": ">=4"
},
"devDependencies": {

@@ -55,8 +52,8 @@ "mkdirp": "^0.5.1",

"nodemon": "^1.18.4",
"seed-barista": "^1.1.0",
"seed-bistro": "^0.2.0"
"sass-pathfinder": "^0.0.5",
"seed-barista": "^1.1.1",
"seed-bistro": "^0.2.1"
},
"dependencies": {
"@seedcss/seed-config": "^0.0.6",
"sass-pathfinder": "0.0.5"
"@seedcss/seed-config": "^0.0.7"
},

@@ -67,5 +64,3 @@ "publishConfig": {

"prepublish": "npm run build",
"postversion": "npm run build",
"prepack": "npm run build",
"gitHead": "8bf23e91822b26218c812f2ea845a0f33773a62a"
"gitHead": "0749da9715a0e19c23feb2570c6c88583a1fce02"
}

433

README.md

@@ -1,6 +0,9 @@

# seed-color-scheme [![Build Status](https://travis-ci.org/helpscout/seed-color-scheme.svg?branch=master)](https://travis-ci.org/helpscout/seed-color-scheme) [![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-color-scheme.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-color-scheme) [![Dependencies](https://david-dm.org/helpscout/seed-color-scheme.svg)](https://david-dm.org/helpscout/seed-color-scheme)
# seed-color-scheme
Color scheme system pack for [Seed](https://github.com/helpscout/seed)!
[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-color-scheme.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-color-scheme)
> Color scheme system pack for Seed
## Install
```

@@ -14,26 +17,32 @@ npm install @seedcss/seed-color-scheme --save

## Basic Usage
### SCSS
This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:
```javascript
var gulp = require('gulp');
var sass = require('gulp-sass');
var pack = require('seed-color-scheme');
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-color-scheme");
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({
includePaths: pack
}))
.pipe(gulp.dest('./css'));
gulp.task("sass", function() {
return gulp
.src("./sass/**/*.scss")
.pipe(
sass({
includePaths: pathfinder(
// Other includePaths...
pack
)
})
)
.pipe(gulp.dest("./css"));
});
```
Once that is setup, simply `@import` *seed-color-scheme* as needed in your `.scss` file:
Once that is setup, simply `@import` **seed-color-scheme** as needed in your `.scss` file:
```sass
```scss
// Packs

@@ -43,229 +52,215 @@ @import "pack/seed-color-scheme/_index";

## Usage
### Adding colors
Add colors to the global color scheme by using the `_color` mixin:
## Options
```sass
// My awesome custom color scheme
$my-colors: (
red: red,
blue: blue
);
The following variables can be found in `_config.scss`
// Add my colors to the global color scheme
@include _color($my-colors);
```
```scss
// Color :: Config
### Using colors
// Dependencies
@import "./functions/color";
@import "./mixins/color";
After you've successfully added/defined colors in your color scheme, use the `_color` function to use the color:
// Default color scheme map
@if not global-variable-exists(SEED_COLOR_SCHEME__GLOBAL) {
$SEED_COLOR_SCHEME__GLOBAL: true !global;
```sass
.my-class {
color: _color(red);
}
```
// Base
@include _color((
white: #fff,
black: #000,
))
// Colors
@include _color((
// Primary
blue: (
default: #3197d6,
100: #f7fcfe,
200: #daf1ff,
300: #aedfff,
400: #71bff1,
500: #3197d6,
600: #237ab3,
700: #1f5e89,
800: #194c6e,
900: #143d57
),
## Default color scheme
charcoal: (
default: #394956,
200: #93a1af,
300: #72808e,
400: #4f5d6b,
500: #394956,
600: #2a3b47,
700: #253540,
800: #1d2b36
),
Since [v0.1.0](https://github.com/helpscout/seed-color-scheme/releases/tag/v0.1.0), seed-color-scheme provides a default color scheme with default namespaces.
grey: (
default: #d6dde3,
200: #f9fafa,
300: #f1f3f5,
400: #e3e8eb,
500: #d6dde3,
600: #c1cbd4,
700: #b4c0ca,
800: #a5b2bd
),
```sass
// Base
@include _color((
white: #fff,
black: #000,
));
// Secondary
yellow: (
default: #ffc646,
100: #fffdf6,
200: #fff6e2,
300: #ffe8b5,
400: #ffd56d,
500: #ffc646,
600: #f5b126,
700: #d79400,
800: #b37100,
900: #875200
),
// Colors
@include _color((
// Primary
blue: (
default: #3197d6,
100: #f7fcfe,
200: #daf1ff,
300: #aedfff,
400: #71bff1,
500: #3197d6,
600: #237ab3,
700: #1f5e89,
800: #194c6e,
900: #143d57
),
green: (
default: #4bc27d,
100: #fafdfb,
200: #e4fbe6,
300: #c4f0ce,
400: #81dc9e,
500: #4bc27d,
600: #3cb170,
700: #2f9f62,
800: #228350,
900: #23633e
),
charcoal: (
default: #394956,
200: #93a1af,
300: #72808e,
400: #4f5d6b,
500: #394956,
600: #2a3b47,
700: #253540,
800: #1d2b36
),
red: (
default: #e52f28,
100: #fef7f6,
200: #ffe3e2,
300: #ffa2a2,
400: #f45b55,
500: #e52f28,
600: #d21b14,
700: #ba1f19,
800: #9d1f1a,
900: #731814
),
grey: (
default: #d6dde3,
200: #f9fafa,
300: #f1f3f5,
400: #e3e8eb,
500: #d6dde3,
600: #c1cbd4,
700: #b4c0ca,
800: #a5b2bd
),
purple: (
default: #7e80e7,
100: #fbfbfe,
200: #eaeafc,
300: #d1d2f6,
400: #a3a4f3,
500: #7e80e7,
600: #696aca,
700: #585b9e,
800: #45467d,
900: #383966
),
// Secondary
yellow: (
default: #ffc646,
100: #fffdf6,
200: #fff6e2,
300: #ffe8b5,
400: #ffd56d,
500: #ffc646,
600: #f5b126,
700: #d79400,
800: #b37100,
900: #875200
),
orange: (
default: #ff9139,
100: #fff8f2,
200: #ffead8,
300: #ffd3ae,
400: #ffa75a,
500: #ff9139,
600: #e87800,
700: #c76400,
800: #a45300,
900: #813c00
),
), default);
green: (
default: #4bc27d,
100: #fafdfb,
200: #e4fbe6,
300: #c4f0ce,
400: #81dc9e,
500: #4bc27d,
600: #3cb170,
700: #2f9f62,
800: #228350,
900: #23633e
),
// Namespace: Brand
@include _color((
brand: (
primary: _color(blue, 500),
danger: _color(red, 500),
error: _color(red, 500),
info: _color(blue, 500),
success: _color(green, 500),
warning: _color(yellow, 500),
),
), default);
red: (
default: #e52f28,
100: #fef7f6,
200: #ffe3e2,
300: #ffa2a2,
400: #f45b55,
500: #e52f28,
600: #d21b14,
700: #ba1f19,
800: #9d1f1a,
900: #731814
),
// Namespace: Background
@include _color((
background: (
body: #fff,
ui: (
default: #fff,
lighter: _color(grey, 200),
light: _color(grey, 300),
),
),
), default);
purple: (
default: #7e80e7,
100: #fbfbfe,
200: #eaeafc,
300: #d1d2f6,
400: #a3a4f3,
500: #7e80e7,
600: #696aca,
700: #585b9e,
800: #45467d,
900: #383966
),
// Namespace: Border
@include _color((
border: (
default: _color(grey, 400),
divider: _color(grey, 300),
ui: (
default: _color(grey, 500),
dark: _color(grey, 600),
),
),
), default);
orange: (
default: #ff9139,
100: #fff8f2,
200: #ffead8,
300: #ffd3ae,
400: #ffa75a,
500: #ff9139,
600: #e87800,
700: #c76400,
800: #a45300,
900: #813c00
),
), default);
// Namespace: Text
@include _color((
text: (
default: _color(charcoal, 600),
subtle: _color(charcoal, 400),
muted: _color(charcoal, 200),
),
), default);
// Namespace: Brand
@include _color((
brand: (
primary: _color(blue, 500),
danger: _color(red, 500),
error: _color(red, 500),
info: _color(blue, 500),
success: _color(green, 500),
warning: _color(yellow, 500),
),
), default);
// Namespace: Background
@include _color((
background: (
body: #fff,
ui: (
default: #fff,
lighter: _color(grey, 200),
light: _color(grey, 300),
// Namespace: Link
@include _color((
link: (
default: _color(blue, 500),
hover: _color(blue, 400),
),
),
), default);
), default);
// Namespace: Border
@include _color((
border: (
default: _color(grey, 400),
divider: _color(grey, 300),
ui: (
default: _color(grey, 500),
dark: _color(grey, 600),
// Namespace: States
@include _color((
state: (
danger: (
background-color: _color(red, 200),
border-color: _color(red, 500),
color: _color(red, 800)
),
error: (
background-color: _color(red, 200),
border-color: _color(red, 500),
color: _color(red, 800)
),
info: (
background-color: _color(blue, 200),
border-color: _color(blue, 500),
color: _color(blue, 800)
),
success: (
background-color: _color(green, 200),
border-color: _color(green, 500),
color: _color(green, 800)
),
warning: (
background-color: _color(yellow, 200),
border-color: _color(yellow, 500),
color: _color(yellow, 800)
),
),
),
), default);
), default);
}
// Namespace: Text
@include _color((
text: (
default: _color(charcoal, 600),
subtle: _color(charcoal, 400),
muted: _color(charcoal, 200),
),
), default);
// Namespace: Link
@include _color((
link: (
default: _color(blue, 500),
hover: _color(blue, 400),
),
), default);
// Namespace: States
@include _color((
state: (
danger: (
background-color: _color(red, 200),
border-color: _color(red, 500),
color: _color(red, 800)
),
error: (
background-color: _color(red, 200),
border-color: _color(red, 500),
color: _color(red, 800)
),
info: (
background-color: _color(blue, 200),
border-color: _color(blue, 500),
color: _color(blue, 800)
),
success: (
background-color: _color(green, 200),
border-color: _color(green, 500),
color: _color(green, 800)
),
warning: (
background-color: _color(yellow, 200),
border-color: _color(yellow, 500),
color: _color(yellow, 800)
),
),
), default);
```
```

2

scripts/banner.js

@@ -14,3 +14,3 @@ var fs = require('fs');

var banner = ['/**',
' * '+ pkg.name +' v'+ pkg.version + homepage(),
' * '+ pkg.name + homepage(),
' * '+ pkg.description,

@@ -17,0 +17,0 @@ ' * Licensed under '+ pkg.license,

dist/seed-color-scheme.css

Sorry, the diff of this file is not supported yet

dist/seed-color-scheme.min.css

Sorry, the diff of this file is not supported yet