barbican-reset 1.8.5 → 1.8.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/helpers/functions/index.scss +4 -0
  2. package/helpers/variables/colors/brand/_generic.scss +10 -5
  3. package/library/scss/colors/generic.scss +6 -4
  4. package/library/scss/styles.scss +9 -1
  5. package/library/static/styles.css +20 -7
  6. package/library/views/index.pug +5 -3
  7. package/package.json +1 -1
  8. package/scss/_atomic.scss +1 -1
  9. package/scss/_close-icon.scss +1 -1
package/helpers/functions/index.scss CHANGED
@@ -4,4 +4,8 @@
4
4
 
5
5
  @function shade($color, $percentage) {
6
6
  @return mix(black, $color, $percentage);
7
+ }
8
+
9
+ @function generic($s:100%, $l:41%) {
10
+ @return hsl(21, $s, $l);
7
11
  }
package/helpers/variables/colors/brand/_generic.scss CHANGED
@@ -1,9 +1,14 @@
1
1
 
2
- $c-brand-generic: hsl(21, 100%, 41%);
2
+ $c-brand-generic: generic(100%, 41%);
3
3
 
4
- $c-brand-generic-tint-98: tint($c-brand-generic, 98%); // faint
5
- $c-brand-generic-tint-82-dsat-25: desaturate(tint($c-brand-generic, 82%), 25%); // light or shade
4
+ $c-brand-generic-tint-98: tint($c-brand-generic, 98%);
6
5
  $c-brand-generic-tint-70: tint($c-brand-generic, 70%);
7
6
  $c-brand-generic-tint-40: tint($c-brand-generic, 40%);
8
- $c-brand-generic-shade-7: shade($c-brand-generic, 7%); // dark
9
- $c-brand-generic-shade-64: shade($c-brand-generic, 64%); // x-dark
7
+
8
+ $c-brand-generic-s60-l99: generic(60%, 99%); // faint
9
+ $c-brand-generic-s100-l95: generic(100%, 95%); // light
10
+ $c-brand-generic-s50-l90: generic(50%, 90%); // shade
11
+ $c-brand-generic-s100-l38: generic(100%, 38%); // dark
12
+ $c-brand-generic-s100-l15: generic(100%, 15%); // x-dark
13
+
14
+ $c-brand-generic-test: hsl(21, 100%, 98%);
package/library/scss/colors/generic.scss CHANGED
@@ -1,11 +1,13 @@
1
1
 
2
2
  > li {
3
- background-color: $c-brand-generic;
3
+ background-color: $c-brand-generic;
4
4
 
5
5
  &.tint-98 { background-color: $c-brand-generic-tint-98; }
6
- &.tint-82-dsat-25 { background-color: $c-brand-generic-tint-82-dsat-25; }
7
6
  &.tint-70 { background-color: $c-brand-generic-tint-70; }
8
7
  &.tint-40 { background-color: $c-brand-generic-tint-40; }
9
- &.shade-7 { background-color: $c-brand-generic-shade-7; }
10
- &.shade-64 { background-color: $c-brand-generic-shade-64; }
8
+ &.s60-l99 { background-color: $c-brand-generic-s60-l99; }
9
+ &.s100-l95 { background-color: $c-brand-generic-s100-l95; }
10
+ &.s50-l90 { background-color: $c-brand-generic-s50-l90; }
11
+ &.s100-l38 { background-color: $c-brand-generic-s100-l38; }
12
+ &.s100-l15 { background-color: $c-brand-generic-s100-l15; }
11
13
  }
package/library/scss/styles.scss CHANGED
@@ -25,6 +25,14 @@ body {
25
25
  .br-color--sample {
26
26
  background: grey;
27
27
  height: 6.25rem;
28
- width: 6.25rem;
28
+ width: 6.25rem;
29
+
30
+ &.test {
31
+ text-transform: uppercase;
32
+ place-content: center;
33
+ font-weight: bold;
34
+ color: grey;
35
+ display: grid;
36
+ }
29
37
  }
30
38
 
package/library/static/styles.css CHANGED
@@ -83,24 +83,37 @@ body {
83
83
  .br-color--palette.generic > li.tint-98 {
84
84
  background-color: #fefbfa;
85
85
  }
86
- .br-color--palette.generic > li.tint-82-dsat-25 {
87
- background-color: #f0e0d8;
88
- }
89
86
  .br-color--palette.generic > li.tint-70 {
90
87
  background-color: #f1c8b3;
91
88
  }
92
89
  .br-color--palette.generic > li.tint-40 {
93
90
  background-color: #e39266;
94
91
  }
95
- .br-color--palette.generic > li.shade-7 {
96
- background-color: #c24400;
92
+ .br-color--palette.generic > li.s60-l99 {
93
+ background-color: hsl(21deg, 60%, 99%);
94
+ }
95
+ .br-color--palette.generic > li.s100-l95 {
96
+ background-color: hsl(21deg, 100%, 95%);
97
+ }
98
+ .br-color--palette.generic > li.s50-l90 {
99
+ background-color: hsl(21deg, 50%, 90%);
97
100
  }
98
- .br-color--palette.generic > li.shade-64 {
99
- background-color: #4b1a00;
101
+ .br-color--palette.generic > li.s100-l38 {
102
+ background-color: hsl(21deg, 100%, 38%);
103
+ }
104
+ .br-color--palette.generic > li.s100-l15 {
105
+ background-color: hsl(21deg, 100%, 15%);
100
106
  }
101
107
 
102
108
  .br-color--sample {
103
109
  background: grey;
104
110
  height: 6.25rem;
105
111
  width: 6.25rem;
112
+ }
113
+ .br-color--sample.test {
114
+ text-transform: uppercase;
115
+ place-content: center;
116
+ font-weight: bold;
117
+ color: grey;
118
+ display: grid;
106
119
  }
package/library/views/index.pug CHANGED
@@ -6,11 +6,13 @@ block content
6
6
  ul.br-color--palette.generic
7
7
  li.br-color--sample
8
8
  li.br-color--sample.tint-98
9
- li.br-color--sample.tint-82-dsat-25
10
9
  li.br-color--sample.tint-70
11
10
  li.br-color--sample.tint-40
12
- li.br-color--sample.shade-7
13
- li.br-color--sample.shade-64
11
+ li.br-color--sample.s60-l99
12
+ li.br-color--sample.s100-l95
13
+ li.br-color--sample.s50-l90
14
+ li.br-color--sample.s100-l38
15
+ li.br-color--sample.s100-l15
14
16
 
15
17
  //- include mixins/test
16
18
  //- +test()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "barbican-reset",
3
- "version": "1.8.5",
3
+ "version": "1.8.6",
4
4
  "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/_atomic.scss CHANGED
@@ -76,5 +76,5 @@ $paddings05: "padding-top", "padding-bottom", "padding-right", "padding-left";
76
76
  }
77
77
 
78
78
  .background-color-alt {
79
- background-color: $c-brand-generic-faint;
79
+ background-color: $c-brand-generic-tint-98;
80
80
  }
package/scss/_close-icon.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .fill {
11
- fill: $c-brand-generic-faint;
11
+ fill: $c-brand-generic-tint-98;
12
12
  }
13
13
  }
14
14