chroma-sass 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -24
- data/chroma-sass.gemspec +2 -2
- data/sass/chroma/_colour.scss +3 -3
- data/sass/chroma/_functions.scss +56 -13
- data/sass/chroma/_variables.scss +16 -2
- metadata +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c2805923b354ea2912ee2510ae926166569821f7
|
4
|
+
data.tar.gz: 94bfffb798c22174513e3c47c562b4f566f02d98
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7d842b907fd6adc6b5957f92f1d3d67da70d47d11667e4f19aae34960466789e441a84c2d609bda42aadd347f090f00b63d3256039bfd8c6fa11d24fe51d1d09
|
7
|
+
data.tar.gz: 0c973e1dbeaff8632a37f7aabd5756af2f272a44e7fb68105f1371755428c958485579a3496877f5a0e464ac6bb776f7af0285bd986842015b7ba7fd53651cc9
|
data/README.md
CHANGED
@@ -4,7 +4,7 @@ Chroma is a Sass library that manages a project's color names, color variations,
|
|
4
4
|
|
5
5
|
## USAGE
|
6
6
|
|
7
|
-
|
7
|
+
Full documentation is available at [http://johnalbin.github.io/chroma/](http://johnalbin.github.io/chroma/). But here are some quick examples to give you an idea of what Chroma can do.
|
8
8
|
|
9
9
|
```scss
|
10
10
|
@import "chroma";
|
@@ -72,29 +72,7 @@ $chroma-active-scheme: 'functional';
|
|
72
72
|
|
73
73
|
## INSTALLATION
|
74
74
|
|
75
|
-
Chroma
|
76
|
-
|
77
|
-
```sh
|
78
|
-
gem install chroma-sass
|
79
|
-
```
|
80
|
-
|
81
|
-
If you are using Bundler (and you should!) then you can add it to an existing project by editing the project's Gemfile and adding this line:
|
82
|
-
|
83
|
-
```ruby
|
84
|
-
gem 'chroma-sass', '~> 1.0.0'
|
85
|
-
```
|
86
|
-
|
87
|
-
If you are using Compass, edit your project's config.rb and add this line:
|
88
|
-
|
89
|
-
```ruby
|
90
|
-
require 'chroma'
|
91
|
-
```
|
92
|
-
|
93
|
-
You can then start using Chroma in your Sass files. Just add this line to one of your .sass or .scss files and start creating!
|
94
|
-
|
95
|
-
```scss
|
96
|
-
@import "chroma";
|
97
|
-
```
|
75
|
+
Chroma can be installed either as a Ruby Gem, as a Bower component, or as a NPM module. See [Chroma’s online documentation](http://johnalbin.github.io/chroma/) for more information.
|
98
76
|
|
99
77
|
## REQUIREMENTS
|
100
78
|
|
data/chroma-sass.gemspec
CHANGED
@@ -9,8 +9,8 @@ Gem::Specification.new do |spec|
|
|
9
9
|
spec.homepage = 'http://github.com/JohnAlbin/chroma'
|
10
10
|
spec.rubyforge_project =
|
11
11
|
|
12
|
-
spec.version = '1.0.
|
13
|
-
spec.date = '2015-
|
12
|
+
spec.version = '1.0.1'
|
13
|
+
spec.date = '2015-09-09'
|
14
14
|
spec.licenses = ['GPL-2']
|
15
15
|
|
16
16
|
spec.authors = ['John Albin Wilkins']
|
data/sass/chroma/_colour.scss
CHANGED
@@ -47,13 +47,13 @@ $_chroma-spelling: 'colour';
|
|
47
47
|
@return define-color-scheme($scheme, $description, $parent);
|
48
48
|
}
|
49
49
|
|
50
|
-
// define-default-colour-scheme($description)
|
50
|
+
// define-default-colour-scheme([$name,] $description)
|
51
51
|
//
|
52
52
|
// See `define-default-color-scheme()` for the documentation.
|
53
53
|
//
|
54
54
|
// Style guide: colour.define-default-colour-scheme
|
55
|
-
@function define-default-colour-scheme($description) {
|
56
|
-
@return define-color-scheme($
|
55
|
+
@function define-default-colour-scheme($name, $description: null) {
|
56
|
+
@return define-default-color-scheme($name, $description);
|
57
57
|
}
|
58
58
|
|
59
59
|
// add-colours([$scheme,] $colours)
|
data/sass/chroma/_functions.scss
CHANGED
@@ -56,7 +56,7 @@ $chroma: _chroma-init();
|
|
56
56
|
// Check if Sass _has_ converted the color into a hex value that we can't
|
57
57
|
// convert back to a keyword.
|
58
58
|
@else if map-has-key($_chroma-dangerous-converted-keywords, $name) {
|
59
|
-
@error "Sass has converted a
|
59
|
+
@error "Sass has converted a #{$_chroma-spelling} keyword into the hexidecimal value, #{$name}, and Chroma was not be able to determine if the original name was #{map-get($_chroma-dangerous-converted-keywords, $name)}. To prevent this error, use quotes around the keyword.";
|
60
60
|
}
|
61
61
|
}
|
62
62
|
@return false;
|
@@ -75,16 +75,20 @@ $chroma: _chroma-init();
|
|
75
75
|
// hexadecimal value before we can read the name. And some hex values map to
|
76
76
|
// more than one keyword (e.g. gray and grey), so the original name would be
|
77
77
|
// irretrievable.
|
78
|
-
|
79
|
-
|
80
|
-
|
78
|
+
//
|
79
|
+
// While is-dangerous-color-keyword() would normally @error before it
|
80
|
+
// returned, if it does return a true value, we should continue inspecting
|
81
|
+
// $name so we can convert it to a string.
|
82
|
+
$is-dangerous: is-dangerous-color-keyword($name);
|
81
83
|
|
82
84
|
// Convert the color to a string.
|
83
85
|
@if type-of($name) == 'color' {
|
84
86
|
$name: inspect($name);
|
87
|
+
|
88
|
+
@return if(map-has-key($_chroma-css4-color-keywords, $name), map-get($_chroma-css4-color-keywords, $name), false);
|
85
89
|
}
|
86
90
|
|
87
|
-
@return
|
91
|
+
@return false;
|
88
92
|
}
|
89
93
|
|
90
94
|
// chroma-to-string($name)
|
@@ -145,9 +149,10 @@ $chroma: _chroma-init();
|
|
145
149
|
@return map-get($color, 'value');
|
146
150
|
}
|
147
151
|
@else {
|
148
|
-
// The value of $actual-scheme::$name is based on
|
149
|
-
// But one or more of the
|
150
|
-
// to check the full
|
152
|
+
// The value of $actual-scheme::$name is based on colors in $actual-scheme
|
153
|
+
// and its parent schemes. But one or more of the parent colors may be
|
154
|
+
// defined (overridden) in $scheme too, so we need to check the full
|
155
|
+
// reference chain.
|
151
156
|
$ref: map-get($color, 'reference');
|
152
157
|
@while $ref {
|
153
158
|
$actual-scheme: chroma-has-color($ref, $scheme);
|
@@ -208,20 +213,56 @@ $chroma: _chroma-init();
|
|
208
213
|
);
|
209
214
|
}
|
210
215
|
|
211
|
-
// define-default-color-scheme($description)
|
216
|
+
// define-default-color-scheme([$name,] $description)
|
212
217
|
//
|
213
218
|
// Sets the description of the default color scheme.
|
214
219
|
//
|
215
220
|
// Usage:
|
216
221
|
// ```scss
|
217
222
|
// $chroma: define-default-color-scheme('Default colors');
|
223
|
+
// // or:
|
224
|
+
// $chroma: define-default-color-scheme('branding', 'Basic branding colors');
|
218
225
|
// ```
|
219
226
|
//
|
227
|
+
// $name - Optional: default color scheme name; defaults to `default`.
|
220
228
|
// $description - Description of the default color scheme.
|
221
229
|
//
|
222
230
|
// Style guide: functions.define-default-color-scheme
|
223
|
-
@function define-default-color-scheme($description) {
|
224
|
-
@
|
231
|
+
@function define-default-color-scheme($name, $description: null) {
|
232
|
+
@if type-of($description) == 'null' {
|
233
|
+
// The shortcut syntax was used since $description is null. Move the actual
|
234
|
+
// description to the $description parameter.
|
235
|
+
$description: $name;
|
236
|
+
@return define-color-scheme($CHROMA_DEFAULT_SCHEME, $description);
|
237
|
+
}
|
238
|
+
|
239
|
+
// Remove the old default.
|
240
|
+
$schemes: map-remove(map-get($chroma, 'schemes'), $CHROMA_DEFAULT_SCHEME);
|
241
|
+
// Update all child schemes of the default.
|
242
|
+
@each $scheme-name, $map in $schemes {
|
243
|
+
@if map-get($map, 'parent') == $CHROMA_DEFAULT_SCHEME {
|
244
|
+
$schemes: map-merge(
|
245
|
+
$schemes,
|
246
|
+
($scheme-name: (
|
247
|
+
'description': map-get($map, 'description'),
|
248
|
+
'parent': $name,
|
249
|
+
))
|
250
|
+
);
|
251
|
+
}
|
252
|
+
}
|
253
|
+
// Set the new default scheme name.
|
254
|
+
$CHROMA_DEFAULT_SCHEME: $name !global;
|
255
|
+
// Add the default scheme (and the updated schemes) back into $chroma.
|
256
|
+
@return map-merge(
|
257
|
+
$chroma,
|
258
|
+
('schemes': map-merge(
|
259
|
+
$schemes,
|
260
|
+
($name: (
|
261
|
+
'description': $description,
|
262
|
+
'parent': false,
|
263
|
+
))
|
264
|
+
))
|
265
|
+
);
|
225
266
|
}
|
226
267
|
|
227
268
|
// add-colors([$scheme,] $colors)
|
@@ -307,7 +348,7 @@ $chroma: _chroma-init();
|
|
307
348
|
}
|
308
349
|
}
|
309
350
|
@else {
|
310
|
-
@error 'Unexpected value given for
|
351
|
+
@error 'Unexpected value, "#{$color-value}", given for #{$_chroma-spelling} "#{$color-name}".';
|
311
352
|
}
|
312
353
|
}
|
313
354
|
|
@@ -356,7 +397,9 @@ $chroma: _chroma-init();
|
|
356
397
|
// ));
|
357
398
|
// ```
|
358
399
|
//
|
359
|
-
// $skins - A list of color schemes and their
|
400
|
+
// $skins - A list of color schemes and their A CSS parent selectors
|
401
|
+
//
|
402
|
+
// Style guide: skin.define-skins
|
360
403
|
@function define-skins($skins) {
|
361
404
|
@each $scheme, $selector in $skins {
|
362
405
|
$chroma: define-skin($scheme, $selector) !global;
|
data/sass/chroma/_variables.scss
CHANGED
@@ -17,13 +17,27 @@
|
|
17
17
|
//
|
18
18
|
// The colors and meta-data managed by Chroma.
|
19
19
|
//
|
20
|
+
// Chroma stores all of its colors, color schemes, skins etc. in the global
|
21
|
+
// sass variable, `$chroma`. All of Chroma's configuration functions are
|
22
|
+
// designed to save their changes to the system by changing the value of the
|
23
|
+
// `$chroma` variable. For example: `$chroma: add-colors((kermit, #70af00));`
|
24
|
+
//
|
25
|
+
// Note: since the `$chroma` variable is a complex map of data structures, it
|
26
|
+
// is highly recommended to only access `$chroma` through the functions and
|
27
|
+
// mixins provided and not attempt to read data from `$chroma` with Sass'
|
28
|
+
// `map-get()` and `map-set()` functions. (If you find you need more helper
|
29
|
+
// functions, submit a feature request! We're happy to help.)
|
30
|
+
//
|
20
31
|
// Style guide: variables.chroma
|
21
32
|
$chroma: () !default;
|
22
33
|
|
23
34
|
// $CHROMA_DEFAULT_SCHEME
|
24
35
|
//
|
25
|
-
// The name of the default color scheme
|
26
|
-
//
|
36
|
+
// The name of the default color scheme; defaults to `default`. This variable
|
37
|
+
// is READ ONLY; changing its value will break Chroma.
|
38
|
+
//
|
39
|
+
// If you want to change this variable's value, you must use the
|
40
|
+
// `define-default-color-scheme()` function instead.
|
27
41
|
//
|
28
42
|
// Style guide: variables.CHROMA_DEFAULT_SCHEME
|
29
43
|
$CHROMA_DEFAULT_SCHEME: 'default';
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: chroma-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- John Albin Wilkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-
|
11
|
+
date: 2015-09-09 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -61,8 +61,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
61
61
|
- !ruby/object:Gem::Version
|
62
62
|
version: '0'
|
63
63
|
requirements: []
|
64
|
-
rubyforge_project: 1.0.
|
65
|
-
rubygems_version: 2.4.
|
64
|
+
rubyforge_project: 1.0.1
|
65
|
+
rubygems_version: 2.4.8
|
66
66
|
signing_key:
|
67
67
|
specification_version: 4
|
68
68
|
summary: Chroma is the Sass color manager.
|