Skip to content

Commit e9f763c

Browse files
angularpackageangularpackage
authored
Merge pull request #40 from angular-package/develop
v0.18.0-beta
2 parents fe8ed68 + a2a8641 commit e9f763c

11 files changed

+215
-74
lines changed

‎CHANGELOG.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
# @angular-package/sass changelog
22

3+
### v0.18.0-beta [#](https://github.com/angular-package/sass/releases/tag/v0.18.0-beta)
4+
5+
- **Update** `color.palette-create()` handle multiple colors in nested colors and use `variant.create()` function from `palette`. [06544a7]
6+
- **Fix** `variant.indicator-remove()` - remove indicator in nested list, by checking whether element contains indicator. [7eba13a]
7+
- **Add** schema palette submodule with `has-multiple-colors()` function to check whether schema to create palette has multiple colors. [2cefe16]
8+
- **Update** `variant.indicator-index()` use directly `string.index()`. [c21bdb6]
9+
- **Add** `color.palette-variant-create()` function from `palette.create()` to create variant based on schema. [4d5d2b7]
10+
11+
[06544a7]: https://github.com/angular-package/sass/commit/06544a7c55007525da9ea797a3a68112b0e605b1
12+
[7eba13a]: https://github.com/angular-package/sass/commit/7eba13ae7d997ddb0cac01dfd6b3cfbf9af9a2c4
13+
[2cefe16]: https://github.com/angular-package/sass/commit/2cefe16f84eb3ff3b8e353d5af26ea0a0ef477f7
14+
[c21bdb6]: https://github.com/angular-package/sass/commit/c21bdb6f934d70c975f6bc550f82569551edcff3
15+
[4d5d2b7]: https://github.com/angular-package/sass/commit/4d5d2b7c8a25fd9a5be63ef97508a7bdb5e23b8a
16+
317
### v0.17.1-beta [#](https://github.com/angular-package/sass/releases/tag/v0.17.1-beta)
418

519
- **Fix** `palette.create()` - adding color to variant colors. [2f277bf]
@@ -8,7 +22,6 @@
822
[2f277bf]: https://github.com/angular-package/sass/commit/2f277bf3baae46d385921619a2b2455c22d544cc
923
[2ab64bc]: https://github.com/angular-package/sass/commit/2ab64bcb8d161fbc8e8ed5571d3ef43600ecfbce
1024

11-
1225
### v0.17.0-beta [#](https://github.com/angular-package/sass/releases/tag/v0.17.0-beta)
1326

1427
- **Update** `color/functions` - calculate using adjustment (from name too) all hsla values and move retrieve color to each hsla functions.

‎color/palette/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@forward 'color' as color-*;
2+
@forward 'schema' as schema-*;
23
@forward 'variant' as variant-*;
34
@forward 'palette.create.function';
45
@forward 'palette.create.mixin';

‎color/palette/_palette.create.function.scss‎

Lines changed: 93 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,62 +9,101 @@
99
@use '../../variant';
1010
@use '../name';
1111
@use 'color';
12+
@use 'schema';
1213

1314
// Functions.
1415
@use '../../list/get/get.list.function' as list-get-list;
1516
@use '../../list/list.append.function' as list-append;
1617
@use '../../list/list.range.function' as list-range;
1718
@use '../../list/remove/remove.nth.function' as list-remove-nth;
19+
@use 'variant/variant.create.function' as variant-create;
1820

1921
// Module functions.
2022
@use '../functions/color.name.function' as *;
2123

2224
// Add.
2325
function.$functions: map.set(function.$functions, color, name, meta.get-function(name));
2426

25-
// Status: DONE
26-
// NOTE: consider adding bracketed adjust
27+
// Status: REVIEW: Simplify code.
2728
// The `palette.create()` function.
28-
// @arbitrary `$values...`
29+
// @arbitrary `$palettes...`
2930
// @returns
30-
@function create($values...) {
31-
$palette: ();
32-
33-
// FEATURE: Prepare variant colors.
31+
@function create($palettes...) {
32+
// FEATURE: Prepare additional colors.
3433
$additional-colors: ();
3534

36-
// Iterate `$values`.
35+
// Iterate `$palettes`.
3736
$i: 1;
38-
@each $variant in $values {
39-
@if type-of($variant) == map {
40-
@each $class, $colors in $variant {
37+
@each $palette in $palettes {
38+
@if type-of($palette) == map {
39+
@each $palette-name, $colors in $palette {
40+
// Nested variant.
41+
$nested-variant: variant.indicator-index($palette-name, '+');
42+
4143
// Variant colors to add after iterate.
4244
$variant-colors: ();
4345

4446
// Iterate colors to obtain variant colors.
4547
@each $color in $colors {
46-
// Get indicator index.
47-
$indicator-index: variant.indicator-index($color, '+');
48-
49-
// FEATURE: Nest colors.
50-
@if $indicator-index {
48+
// Get nested colors indicator index.
49+
$nested-colors-index: variant.indicator-index($color, '+');
50+
51+
// FEATURE: Nested colors.
52+
@if $nested-colors-index {
53+
$j: 1;
54+
@each $nested-color in $color {
55+
@if type-of($nested-color) == list {
56+
$name: variant.indicator-remove(list-range.range($color, 1, $j - 1), '+');
57+
$k: 1;
58+
@each $part-color in $nested-color {
59+
// FEATURE: Get additional/multiple colors in nested colors.
60+
@if schema.has-multiple-colors($part-color) {
61+
// Retrieve variant color.
62+
$variant-color: name.retrieve(list.nth($part-color, 1), name);
63+
64+
// If variant nested.
65+
@if $nested-variant {
66+
// REVIEW: Check `name.nest()`
67+
$variant-color: list.nth(name.nest(variant.indicator-remove($palette-name, '+'), $name, $variant-color), 1);
68+
} @else {
69+
$variant-color: list.nth(name.nest($name, $variant-color), 1);
70+
}
71+
72+
// Add additional colors from range `2`.
73+
$additional-colors: map.deep-merge(
74+
$additional-colors,
75+
(variant.indicator-remove($palette-name, '+'): ($variant-color: list-range.range($part-color, 2)))
76+
);
77+
$nested-color: list.set-nth($nested-color, $k, list.nth($part-color, 1));
78+
}
79+
80+
$k: $k + 1;
81+
}
82+
83+
$color: list.set-nth($color, $j, $nested-color);
84+
}
85+
86+
$j: $j + 1;
87+
}
88+
89+
// FIX: indicator-remove.
5190
$color: list.set-nth(
5291
$color,
53-
$indicator-index,
54-
variant.indicator-remove(list.nth($color, $indicator-index), '+')
92+
$nested-colors-index,
93+
variant.indicator-remove(list.nth($color, $nested-colors-index), '+'),
5594
);
5695
$variant-colors: values.join((separator: comma), $variant-colors, name.nest($color...));
5796
}
5897

59-
// FEATURE: Get additional colors.
60-
@else if list.separator($color) == space and list.length($color) > 1 and list.length(list-get-list.list($color, last)) == 0 {
98+
// FEATURE: Get additional/multiple colors.
99+
@else if schema.has-multiple-colors($color) {
61100
// Retrieve variant color.
62-
$variant-color: name.retrieve(list.nth($color, 1));
101+
$variant-color: name.retrieve(list.nth($color, 1), name);
63102

64-
// Add additional colors from range 2.
103+
// Add additional colors from range `2`.
65104
$additional-colors: map.deep-merge(
66105
$additional-colors,
67-
(variant.indicator-remove($class, '+'): (map.get($variant-color, name): list-range.range($color, 2)))
106+
(variant.indicator-remove($palette-name, '+'): ($variant-color: list-range.range($color, 2)))
68107
);
69108

70109
// Append color to variant colors.
@@ -74,28 +113,24 @@ function.$functions: map.set(function.$functions, color, name, meta.get-function
74113
}
75114
}
76115

77-
$variant: map.deep-merge($variant, ($class: $variant-colors));
116+
$palette: map.deep-merge($palette, ($palette-name: $variant-colors));
78117
}
79118

80-
$values: list.set-nth($values, $i, $variant);
119+
$palettes: list.set-nth($palettes, $i, $palette);
81120
$i: $i + 1;
82121
}
83122
}
84123

85124
// Nest values.
86-
$variant: variant.nest($values...);
125+
$palettes: variant.nest($palettes...);
87126

88127
// FEATURE: Create variant from list.
89-
@each $class, $color in $variant {
90-
@if type-of($color) == list or type-of($color) == string {
91-
$palette: map.set($palette, $class, variant.create($color, $type: color));
92-
}
93-
}
128+
$palettes: variant-create.create($palettes);
94129

95130
// FEATURE: Add indicator.
96-
@each $name, $variant in $palette {
131+
@each $name, $variant in $palettes {
97132
@each $class, $color in $variant {
98-
$palette: map.deep-merge($palette, ($name: ($class: name.indicator-add($color))));
133+
$palettes: map.deep-merge($palettes, ($name: ($class: name.indicator-add($color))));
99134
}
100135
}
101136

@@ -104,15 +139,31 @@ function.$functions: map.set(function.$functions, color, name, meta.get-function
104139
@each $name, $variant in $additional-colors {
105140
@each $name in if(list.separator($name) == space, ($name,), $name) {
106141
@each $class, $colors in $variant {
107-
$palette: color.add($palette, $name, $class, space, $colors...);
142+
$palettes: color.add($palettes, $name, $class, space, $colors...);
108143
}
109144
}
110145
}
111146
}
112-
@return $palette;
147+
@return $palettes;
113148
}
114149

115150
// Examples.
151+
// Structure
152+
// (palette-name: (color 1, nested-colors, color 2))
153+
154+
// Nested colors
155+
// (palette-name: (color 1, +color prefix (color suffix 1, color suffix 2, color suffix 3), color 2))
156+
157+
// Multiple colors
158+
// (palette-name: (color 1, +color prefix (color suffix 1, (color suffix 2) (additional color 1) (), color suffix 3), color 2))
159+
160+
// Nested variant multiple colors
161+
// (+palette-name: (color 1, +color prefix (color suffix 1, (color suffix 2) (additional color 1) (), color suffix 3), color 2))
162+
163+
// Multiple nested variants and multiple colors
164+
// ((+palette-name-1, +palette-name-2): (color 1, +color prefix (color suffix 1, (color suffix 2) (additional color 1) (), color suffix 3), color 2))
165+
166+
116167
// default variant.
117168
// @debug create((primary: (primary: primary color, primary dark: primary color dark)));
118169

@@ -134,3 +185,10 @@ function.$functions: map.set(function.$functions, color, name, meta.get-function
134185

135186
// Multiple colors
136187
// @debug create(((+accent, primary): (color, ((basic dark) 3% 0.5) (light, 10%) (dark, 5%) (), light, dark)));
188+
189+
// @debug create((
190+
// // +core: (color, +primary test (color, dark, light), (primary dark, 15%) (primary light, 5%) (), error, ),
191+
// // +core: (color, (primary dark, 15%) (primary light, 5%) (), error, ),
192+
193+
// (+core a, test b): (+primary style ((color a, 5%), (dark b, 1%) (else c, 2%) (), (light d, 2%),),),
194+
// ));

‎color/palette/_palette.get-keys.function.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,21 @@
3535
}
3636

3737
// Examples.
38-
$example: (
39-
test basic: (
40-
basic two: (
41-
hue saturation: (
42-
lightness alpha: hsla(15deg, 30%, 35%, 1)
43-
)
44-
),
38+
// $example: (
39+
// test basic: (
40+
// basic two: (
41+
// hue saturation: (
42+
// lightness alpha: hsla(15deg, 30%, 35%, 1)
43+
// )
44+
// ),
4545

46-
extended: (
47-
accent: (
48-
secondary: ()
49-
)
50-
)
51-
)
52-
);
46+
// extended: (
47+
// accent: (
48+
// secondary: ()
49+
// )
50+
// )
51+
// )
52+
// );
5353

5454
// nested 2
5555
// @debug get-keys($example, test, two); // (test basic) (basic two)

‎color/palette/schema/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward 'schema.has-multiple-colors.function';

‎color/palette/schema/_schema.has-multiple-colors.function.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Sass.
2+
@use 'sass:list';
3+
4+
// Functions.
5+
@use '../../../list/get/get.list.function' as list-get-list;
6+
7+
// Status:
8+
// The `schema.has-multiple-colors()` function.
9+
// @param `$schema`
10+
// @returns
11+
@function has-multiple-colors($schema, $indicator: ()) {
12+
@return type-of($schema) == list and
13+
list.separator($schema) == space and
14+
list.length($schema) > 1 and
15+
list-get-list.list($schema, last) == $indicator;
16+
}
17+
18+
// Examples.
19+
// @debug has-multiple-colors((color, 1%) (dark, 3%) (light, 5%) ());
20+
// @debug has-multiple-colors((color, 1%) (dark, 3%) (light, 5%) (), ());
21+
// @debug has-multiple-colors((color, 1%) (dark, 3%) (light, 5%) [], []);

‎color/palette/variant/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@forward 'variant.add.function';
2+
@forward 'variant.create.function';
23
@forward 'variant.exists.function';

‎color/palette/variant/_variant.create.function.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Sass.
2+
@use 'sass:list';
3+
@use 'sass:map';
4+
5+
// Modules.
6+
@use '../../../variant';
7+
@use '../../name';
8+
9+
// Status: DONE
10+
// NOTE: consider adding bracketed adjust
11+
// The `palette.variant-create()` function to create variant from list.
12+
// @param `$palette`
13+
// @param `$name`
14+
// @returns
15+
@function create($palette, $name: null) {
16+
@each $palette-name, $colors in $palette {
17+
$allow: if($name, false, true);
18+
@if type-of($colors) == list or type-of($colors) == string {
19+
@if name.index($palette-name, $name) {
20+
$allow: true;
21+
}
22+
@if $allow {
23+
$palette: map.set($palette, $palette-name, variant.create($colors, $type: color));
24+
}
25+
}
26+
}
27+
@return $palette;
28+
}
29+
30+
// Examples.
31+
// @debug create((accent: (accent color, (accent basic dark) 3% 0.5, accent light, accent dark), primary: (color, (basic dark) 3% 0.5, light, dark)), accent);

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@angular-package/sass",
33
"description": "Extension for sass modules and new modules.",
4-
"version": "0.17.1-beta",
4+
"version": "0.18.0-beta",
55
"main": "./index.scss",
66
"funding": [
77
{

‎variant/indicator/_indicator.index.function.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// Modules.
2-
@use '../../string';
2+
@use '../../string/string.index.function' as string-index;
33

44
// Status: TODO: Consider use `list.indexes()`.
55
// The `indicator.index()` function.
66
// @param `$item`
77
// @param `$indicator`
88
// @returns
99
@function index($item, $indicator) {
10-
@each $value in $item {
11-
@if type-of($value) == string {
12-
$index: string.index(#{$value}, $indicator);
10+
@each $element in $item {
11+
@if type-of($element) == string {
12+
$index: string-index.index(#{$element}, $indicator);
1313
@if $index and $index > 0 {
1414
@return $index;
1515
}
@@ -19,4 +19,6 @@
1919
}
2020

2121
// Examples.
22+
// @debug index(+primary, '+');
2223
// @debug index(+primary test, '+');
24+
// @debug index(primary '+test', '+');

0 commit comments

Comments
 (0)