barbican-reset 2.2.1 → 2.2.3

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 (35) hide show
  1. package/helpers/variables/index.scss +6 -7
  2. package/package.json +13 -11
  3. package/{library → patterns}/gulpfile.js +0 -0
  4. package/{library → patterns}/index.js +0 -0
  5. package/patterns/scss/colors/_brand.scss +72 -0
  6. package/{helpers/variables → patterns/scss}/colors/_docs.scss +0 -0
  7. package/patterns/scss/colors/_grey.scss +6 -0
  8. package/{helpers/variables → patterns/scss}/colors/_llf.scss +0 -0
  9. package/{helpers/variables → patterns/scss}/colors/_power.scss +0 -0
  10. package/{helpers/variables → patterns/scss}/colors/_status.scss +0 -0
  11. package/{helpers/variables → patterns/scss}/colors/_wgp.scss +0 -0
  12. package/{helpers/variables → patterns/scss}/colors/index.scss +1 -1
  13. package/patterns/scss/styles.scss +99 -0
  14. package/patterns/static/styles.css +458 -0
  15. package/patterns/views/index.pug +30 -0
  16. package/{library → patterns}/views/layout.pug +0 -0
  17. package/patterns/views/mixins.pug +12 -0
  18. package/scss/_atomic.scss +2 -3
  19. package/scss/_close-icon.scss +6 -5
  20. package/helpers/variables/colors/_grey.scss +0 -7
  21. package/helpers/variables/colors/brand/_art.scss +0 -7
  22. package/helpers/variables/colors/brand/_cinema.scss +0 -11
  23. package/helpers/variables/colors/brand/_classical.scss +0 -12
  24. package/helpers/variables/colors/brand/_contemporary.scss +0 -7
  25. package/helpers/variables/colors/brand/_generic.scss +0 -17
  26. package/helpers/variables/colors/brand/_membership.scss +0 -17
  27. package/helpers/variables/colors/brand/_programme.scss +0 -6
  28. package/helpers/variables/colors/brand/_shop.scss +0 -4
  29. package/helpers/variables/colors/brand/_talks.scss +0 -7
  30. package/helpers/variables/colors/brand/_theatre.scss +0 -7
  31. package/helpers/variables/colors/brand/index.scss +0 -95
  32. package/library/scss/styles.scss +0 -80
  33. package/library/static/styles.css +0 -282
  34. package/library/views/index.pug +0 -81
  35. package/library/views/mixins/test.pug +0 -2
package/helpers/variables/colors/brand/index.scss DELETED
@@ -1,95 +0,0 @@
1
-
2
- @import "generic";
3
- @import "art";
4
- @import "cinema";
5
- @import "classical";
6
- @import "contemporary";
7
- @import "membership";
8
- @import "programme";
9
- @import "shop";
10
- @import "talks";
11
- @import "theatre";
12
-
13
- $colors: (
14
- contemporary-music: (
15
- tint-98: $c-brand-contemporary-tint-98,
16
- tint-70: $c-brand-contemporary-tint-70,
17
- tint-40: $c-brand-contemporary-tint-40,
18
- base: $c-brand-contemporary,
19
- shade-5: $c-brand-contemporary-shade-5
20
- ),
21
- membership--support: (
22
- tint-98: $c-brand-membership-tint-98,
23
- tint-70: $c-brand-membership-tint-70,
24
- tint-40: $c-brand-membership-tint-40,
25
- base: $c-brand-membership,
26
- shade-5: $c-brand-membership-shade-5
27
- ),
28
- tours--public-spaces: (
29
- tint-98: $c-brand-generic-tint-98,
30
- tint-70: $c-brand-generic-tint-70,
31
- tint-40: $c-brand-generic-tint-40,
32
- base: $c-brand-generic,
33
- shade-5: $c-brand-generic-shade-5
34
- ),
35
- classical-music: (
36
- tint-98: $c-brand-classical-tint-98,
37
- tint-70: $c-brand-classical-tint-70,
38
- tint-40: $c-brand-classical-tint-40,
39
- base: $c-brand-classical,
40
- shade-5: $c-brand-classical-shade-5
41
- ),
42
- theatre--dance: (
43
- tint-98: $c-brand-theatre-tint-98,
44
- tint-70: $c-brand-theatre-tint-70,
45
- tint-40: $c-brand-theatre-tint-40,
46
- base: $c-brand-theatre,
47
- shade-5: $c-brand-theatre-shade-5
48
- ),
49
- talks--events: (
50
- tint-98: $c-brand-talks-tint-98,
51
- tint-70: $c-brand-talks-tint-70,
52
- tint-40: $c-brand-talks-tint-40,
53
- base: $c-brand-talks,
54
- shade-5: $c-brand-talks-shade-5
55
- ),
56
- art--design: (
57
- tint-98: $c-brand-art-tint-98,
58
- tint-70: $c-brand-art-tint-70,
59
- tint-40: $c-brand-art-tint-40,
60
- base: $c-brand-art,
61
- shade-5: $c-brand-art-shade-5
62
- ),
63
- generic: (
64
- tint-98: $c-brand-generic-tint-98,
65
- tint-70: $c-brand-generic-tint-70,
66
- tint-40: $c-brand-generic-tint-40,
67
- base: $c-brand-generic,
68
- shade-5: $c-brand-generic-shade-5
69
- ),
70
- library: (
71
- tint-98: $c-brand-generic-tint-98,
72
- tint-70: $c-brand-generic-tint-70,
73
- tint-40: $c-brand-generic-tint-40,
74
- base: $c-brand-generic,
75
- shade-5: $c-brand-generic-shade-5
76
- ),
77
- cinema: (
78
- tint-98: $c-brand-cinema-tint-98,
79
- tint-70: $c-brand-cinema-tint-70,
80
- tint-40: $c-brand-cinema-tint-40,
81
- base: $c-brand-cinema,
82
- shade-5: $c-brand-cinema-shade-5
83
- ),
84
- hire: (
85
- tint-98: $c-brand-generic-tint-98,
86
- tint-70: $c-brand-generic-tint-70,
87
- tint-40: $c-brand-generic-tint-40,
88
- base: $c-brand-generic,
89
- shade-5: $c-brand-generic-shade-5
90
- ),
91
- );
92
-
93
- @function get-color($color, $variant: base) {
94
- @return map-get(map-get($colors, $color), $variant);
95
- }
package/library/scss/styles.scss DELETED
@@ -1,80 +0,0 @@
1
- @import "../../node_modules/bootstrap/scss/functions";
2
- @import "../../node_modules/bootstrap/scss/variables";
3
- @import "../../node_modules/bootstrap/scss/mixins";
4
- @import "../../helpers/index";
5
-
6
- @import "../../scss/fonts";
7
- @import "../../scss/br-container";
8
-
9
- body {
10
- line-height: $line-height-md;
11
- font-family: $font-family;
12
- color: $c-grey-l21;
13
- }
14
-
15
- @mixin brand {
16
- @each $color, $variant in $colors {
17
- &.#{$color} {
18
- @content ($color, $variant);
19
- }
20
- }
21
- }
22
-
23
- .br-color--palette {
24
- list-style: none;
25
- margin: 0 0 2rem;
26
- display: flex;
27
- gap: 0.125rem;
28
- padding: 0;
29
-
30
- &.grey {
31
- > li {
32
- &.l11 { background-color: $c-grey-l11; }
33
- &.l21 { background-color: $c-grey-l21; }
34
- &.l44 { background-color: $c-grey-l44; }
35
- &.l65 { background-color: $c-grey-l65; }
36
- &.l87 { background-color: $c-grey-l87; }
37
- &.l96 { background-color: $c-grey-l96; }
38
- }
39
- }
40
-
41
- @include brand using($color, $variant) {
42
- > li {
43
- background-color: get-color($color);
44
-
45
- &.tint-98 {
46
- background-color: get-color($color, tint-98);
47
- }
48
- &.tint-70 {
49
- background-color: get-color($color, tint-70);
50
- }
51
- &.tint-40 {
52
- background-color: get-color($color, tint-40);
53
- }
54
- &.shade-5 {
55
- background-color: get-color($color, shade-5);
56
- }
57
- }
58
- }
59
- }
60
-
61
- .br-color--sample {
62
- background: grey;
63
- height: 6.25rem;
64
- width: 6.25rem;
65
- }
66
-
67
- h1 {
68
- border-bottom: 1px solid grey;
69
- padding-bottom: 0.25rem;
70
- margin: 0 0 2rem;
71
- }
72
-
73
- h2 {
74
- margin: 0 0 1rem;
75
- }
76
-
77
- h3 {
78
- margin: 0 0 0.5rem;
79
- }
80
-
package/library/static/styles.css DELETED
@@ -1,282 +0,0 @@
1
- @font-face {
2
- font-family: "FuturaLTPro";
3
- src: url("../fonts/FuturaLTPro-Book.woff") format("woff"), url("../fonts/FuturaLTPro-Book.woff2") format("woff2");
4
- font-style: normal;
5
- }
6
- @font-face {
7
- font-family: "FuturaLTPro";
8
- src: url("../fonts/FuturaLTPro-BookOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BookOblique.woff2") format("woff2");
9
- font-style: italic;
10
- }
11
- @font-face {
12
- font-family: "FuturaLTPro";
13
- src: url("../fonts/FuturaLTPro-Bold.woff") format("woff"), url("../fonts/FuturaLTPro-Bold.woff2") format("woff2");
14
- font-style: normal;
15
- font-weight: bold;
16
- }
17
- @font-face {
18
- font-family: "FuturaLTPro";
19
- src: url("../fonts/FuturaLTPro-BoldOblique.woff") format("woff"), url("../fonts/FuturaLTPro-BoldOblique.woff2") format("woff2");
20
- font-style: italic;
21
- font-weight: bold;
22
- }
23
- .br-container--outer {
24
- padding-right: 5%;
25
- padding-left: 5%;
26
- }
27
- .br-container--outer.splash {
28
- padding-right: 10%;
29
- padding-left: 10%;
30
- }
31
- .br-container--outer.masthead {
32
- box-shadow: 0 0.375rem 0.375rem rgba(0, 0, 0, 0.1);
33
- background-color: white;
34
- }
35
-
36
- .br-container--inner {
37
- max-width: 75rem;
38
- margin: 0 auto;
39
- }
40
- .br-container--inner:not(.footer) {
41
- padding-bottom: 1.5rem;
42
- padding-top: 1.5rem;
43
- }
44
- @media (min-width: 32.5em) {
45
- .br-container--inner:not(.footer) {
46
- padding-bottom: 2.5rem;
47
- padding-top: 2.5rem;
48
- }
49
- }
50
- .br-container--inner.header {
51
- padding-bottom: 1.875rem;
52
- padding-top: 1.875rem;
53
- }
54
- .br-container--inner.thin {
55
- max-width: 50rem;
56
- }
57
- @media (min-width: 32.5em) {
58
- .br-container--inner.masthead {
59
- padding-bottom: 3rem;
60
- padding-top: 3rem;
61
- }
62
- }
63
- .br-container--inner.masthead h1 {
64
- margin: 0;
65
- }
66
-
67
- body {
68
- line-height: 1.4;
69
- font-family: FuturaLTPro, "Helvetica", "Arial", sans-serif;
70
- color: hsl(0deg, 0%, 21%);
71
- }
72
-
73
- .br-color--palette {
74
- list-style: none;
75
- margin: 0 0 2rem;
76
- display: flex;
77
- gap: 0.125rem;
78
- padding: 0;
79
- }
80
- .br-color--palette.grey > li.l11 {
81
- background-color: hsl(0deg, 0%, 11%);
82
- }
83
- .br-color--palette.grey > li.l21 {
84
- background-color: hsl(0deg, 0%, 21%);
85
- }
86
- .br-color--palette.grey > li.l44 {
87
- background-color: hsl(0deg, 0%, 44%);
88
- }
89
- .br-color--palette.grey > li.l65 {
90
- background-color: hsl(0deg, 0%, 65%);
91
- }
92
- .br-color--palette.grey > li.l87 {
93
- background-color: hsl(0deg, 0%, 87%);
94
- }
95
- .br-color--palette.grey > li.l96 {
96
- background-color: hsl(0deg, 0%, 96%);
97
- }
98
- .br-color--palette.contemporary-music > li {
99
- background-color: hsl(254deg, 44%, 33%);
100
- }
101
- .br-color--palette.contemporary-music > li.tint-98 {
102
- background-color: #fbfbfc;
103
- }
104
- .br-color--palette.contemporary-music > li.tint-70 {
105
- background-color: #c6c1d7;
106
- }
107
- .br-color--palette.contemporary-music > li.tint-40 {
108
- background-color: #8c82af;
109
- }
110
- .br-color--palette.contemporary-music > li.shade-5 {
111
- background-color: #3d2d73;
112
- }
113
- .br-color--palette.membership--support > li {
114
- background-color: hsl(217deg, 72%, 53%);
115
- }
116
- .br-color--palette.membership--support > li.tint-98 {
117
- background-color: #fbfcfe;
118
- }
119
- .br-color--palette.membership--support > li.tint-70 {
120
- background-color: #c1d5f5;
121
- }
122
- .br-color--palette.membership--support > li.tint-40 {
123
- background-color: #83abeb;
124
- }
125
- .br-color--palette.membership--support > li.shade-5 {
126
- background-color: #2f6dd2;
127
- }
128
- .br-color--palette.tours--public-spaces > li {
129
- background-color: hsl(21deg, 100%, 41%);
130
- }
131
- .br-color--palette.tours--public-spaces > li.tint-98 {
132
- background-color: #fefbfa;
133
- }
134
- .br-color--palette.tours--public-spaces > li.tint-70 {
135
- background-color: #f1c8b3;
136
- }
137
- .br-color--palette.tours--public-spaces > li.tint-40 {
138
- background-color: #e39266;
139
- }
140
- .br-color--palette.tours--public-spaces > li.shade-5 {
141
- background-color: #c74500;
142
- }
143
- .br-color--palette.classical-music > li {
144
- background-color: hsl(38deg, 53%, 38%);
145
- }
146
- .br-color--palette.classical-music > li.tint-98 {
147
- background-color: #fdfcfb;
148
- }
149
- .br-color--palette.classical-music > li.tint-70 {
150
- background-color: #dfd4c0;
151
- }
152
- .br-color--palette.classical-music > li.tint-40 {
153
- background-color: #bfa982;
154
- }
155
- .br-color--palette.classical-music > li.shade-5 {
156
- background-color: #8d692c;
157
- }
158
- .br-color--palette.theatre--dance > li {
159
- background-color: hsl(192deg, 99%, 31%);
160
- }
161
- .br-color--palette.theatre--dance > li.tint-98 {
162
- background-color: #fafcfd;
163
- }
164
- .br-color--palette.theatre--dance > li.tint-70 {
165
- background-color: #b3d8e2;
166
- }
167
- .br-color--palette.theatre--dance > li.tint-40 {
168
- background-color: #67b2c4;
169
- }
170
- .br-color--palette.theatre--dance > li.shade-5 {
171
- background-color: #017895;
172
- }
173
- .br-color--palette.talks--events > li {
174
- background-color: hsl(214deg, 30%, 49%);
175
- }
176
- .br-color--palette.talks--events > li.tint-98 {
177
- background-color: #fcfcfd;
178
- }
179
- .br-color--palette.talks--events > li.tint-70 {
180
- background-color: #cdd7e3;
181
- }
182
- .br-color--palette.talks--events > li.tint-40 {
183
- background-color: #9aaec7;
184
- }
185
- .br-color--palette.talks--events > li.shade-5 {
186
- background-color: #53729a;
187
- }
188
- .br-color--palette.art--design > li {
189
- background-color: hsl(329deg, 100%, 45%);
190
- }
191
- .br-color--palette.art--design > li.tint-98 {
192
- background-color: #fffafc;
193
- }
194
- .br-color--palette.art--design > li.tint-70 {
195
- background-color: #f8b3d6;
196
- }
197
- .br-color--palette.art--design > li.tint-40 {
198
- background-color: #f066ad;
199
- }
200
- .br-color--palette.art--design > li.shade-5 {
201
- background-color: #db0071;
202
- }
203
- .br-color--palette.generic > li {
204
- background-color: hsl(21deg, 100%, 41%);
205
- }
206
- .br-color--palette.generic > li.tint-98 {
207
- background-color: #fefbfa;
208
- }
209
- .br-color--palette.generic > li.tint-70 {
210
- background-color: #f1c8b3;
211
- }
212
- .br-color--palette.generic > li.tint-40 {
213
- background-color: #e39266;
214
- }
215
- .br-color--palette.generic > li.shade-5 {
216
- background-color: #c74500;
217
- }
218
- .br-color--palette.library > li {
219
- background-color: hsl(21deg, 100%, 41%);
220
- }
221
- .br-color--palette.library > li.tint-98 {
222
- background-color: #fefbfa;
223
- }
224
- .br-color--palette.library > li.tint-70 {
225
- background-color: #f1c8b3;
226
- }
227
- .br-color--palette.library > li.tint-40 {
228
- background-color: #e39266;
229
- }
230
- .br-color--palette.library > li.shade-5 {
231
- background-color: #c74500;
232
- }
233
- .br-color--palette.cinema > li {
234
- background-color: hsl(126deg, 62%, 33%);
235
- }
236
- .br-color--palette.cinema > li.tint-98 {
237
- background-color: #fbfdfb;
238
- }
239
- .br-color--palette.cinema > li.tint-70 {
240
- background-color: #bcdbbf;
241
- }
242
- .br-color--palette.cinema > li.tint-40 {
243
- background-color: #79b87f;
244
- }
245
- .br-color--palette.cinema > li.shade-5 {
246
- background-color: #1e8128;
247
- }
248
- .br-color--palette.hire > li {
249
- background-color: hsl(21deg, 100%, 41%);
250
- }
251
- .br-color--palette.hire > li.tint-98 {
252
- background-color: #fefbfa;
253
- }
254
- .br-color--palette.hire > li.tint-70 {
255
- background-color: #f1c8b3;
256
- }
257
- .br-color--palette.hire > li.tint-40 {
258
- background-color: #e39266;
259
- }
260
- .br-color--palette.hire > li.shade-5 {
261
- background-color: #c74500;
262
- }
263
-
264
- .br-color--sample {
265
- background: grey;
266
- height: 6.25rem;
267
- width: 6.25rem;
268
- }
269
-
270
- h1 {
271
- border-bottom: 1px solid grey;
272
- padding-bottom: 0.25rem;
273
- margin: 0 0 2rem;
274
- }
275
-
276
- h2 {
277
- margin: 0 0 1rem;
278
- }
279
-
280
- h3 {
281
- margin: 0 0 0.5rem;
282
- }
package/library/views/index.pug DELETED
@@ -1,81 +0,0 @@
1
- extends layout
2
- block content
3
- h1 Color Palettes
4
-
5
- h2 Grey
6
- ul.br-color--palette.grey
7
- li.br-color--sample.l96
8
- li.br-color--sample.l87
9
- li.br-color--sample.l65
10
- li.br-color--sample.l44
11
- li.br-color--sample.l21
12
- li.br-color--sample.l11
13
-
14
- h2 Brand
15
-
16
- h3 Generic / Library / Tours / Hire
17
- ul.br-color--palette.generic
18
- li.br-color--sample.tint-98
19
- li.br-color--sample.tint-70
20
- li.br-color--sample.tint-40
21
- li.br-color--sample
22
- li.br-color--sample.shade-5
23
-
24
- h3 Contemporary
25
- ul.br-color--palette.contemporary-music
26
- li.br-color--sample.tint-98
27
- li.br-color--sample.tint-70
28
- li.br-color--sample.tint-40
29
- li.br-color--sample
30
- li.br-color--sample.shade-5
31
-
32
- h3 Membership
33
- ul.br-color--palette.membership--support
34
- li.br-color--sample.tint-98
35
- li.br-color--sample.tint-70
36
- li.br-color--sample.tint-40
37
- li.br-color--sample
38
- li.br-color--sample.shade-5
39
-
40
- h3 Classical
41
- ul.br-color--palette.classical-music
42
- li.br-color--sample.tint-98
43
- li.br-color--sample.tint-70
44
- li.br-color--sample.tint-40
45
- li.br-color--sample
46
- li.br-color--sample.shade-5
47
-
48
- h3 Theatre
49
- ul.br-color--palette.theatre--dance
50
- li.br-color--sample.tint-98
51
- li.br-color--sample.tint-70
52
- li.br-color--sample.tint-40
53
- li.br-color--sample
54
- li.br-color--sample.shade-5
55
-
56
- h3 Talks
57
- ul.br-color--palette.talks--events
58
- li.br-color--sample.tint-98
59
- li.br-color--sample.tint-70
60
- li.br-color--sample.tint-40
61
- li.br-color--sample
62
- li.br-color--sample.shade-5
63
-
64
- h3 Art
65
- ul.br-color--palette.art--design
66
- li.br-color--sample.tint-98
67
- li.br-color--sample.tint-70
68
- li.br-color--sample.tint-40
69
- li.br-color--sample
70
- li.br-color--sample.shade-5
71
-
72
- h3 Cinema
73
- ul.br-color--palette.cinema
74
- li.br-color--sample.tint-98
75
- li.br-color--sample.tint-70
76
- li.br-color--sample.tint-40
77
- li.br-color--sample
78
- li.br-color--sample.shade-5
79
-
80
- //- include mixins/test
81
- //- +test()
package/library/views/mixins/test.pug DELETED
@@ -1,2 +0,0 @@
1
- mixin test()
2
- div test worked