barbican-reset 3.35.0 → 3.36.0

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 (5) hide show
  1. package/components/BrFormToggle.vue +4 -2
  2. package/package.json +1 -1
  3. package/scss/_br-form-toggle.scss +34 -19
  4. package/scss/_variables.scss +143 -143
  5. package/scss/mixins/card/_membership.scss +1 -2
package/components/BrFormToggle.vue CHANGED
@@ -19,13 +19,15 @@ defineOptions({
19
19
  })
20
20
 
21
21
  const props = defineProps({
22
- class: String,
22
+ drawer: Boolean,
23
23
  })
24
24
 
25
25
  const generateClasses = computed(() => {
26
26
  let result = ['br-form-toggle']
27
27
 
28
- if (props.class) result.push(props.class)
28
+ if (props.drawer) result.push('drawer')
29
+
30
+ if (!props.drawer) result.push('default')
29
31
 
30
32
  return result
31
33
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "barbican-reset",
3
- "version": "3.35.0",
3
+ "version": "3.36.0",
4
4
  "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
5
5
  "main": "index.js",
6
6
  "exports": {
package/scss/_br-form-toggle.scss CHANGED
@@ -1,41 +1,55 @@
1
1
  @use "mixins/input/generic" as *;
2
2
  @use "mixins/breakpoints" as *;
3
3
 
4
+ $circleSize: 1.25rem;
5
+ $circleMargin: 0.25rem;
6
+ $circleTransform: $circleSize;
7
+ $toggleHeight: $circleSize + $circleMargin * 2;
8
+ $toggleWidth: $circleSize * 2 + $circleMargin * 2;
9
+ $toggleRadius: $toggleHeight * 0.5;
10
+
4
11
  .br-form-toggle label {
5
12
  @include generic-input-label;
6
13
 
7
- @include small-up {
8
- max-width: var(--width-layout-xs);
9
- }
10
-
11
14
  & {
12
- grid-template-columns: auto 3.25rem;
15
+ grid-template-columns: auto $toggleWidth;
13
16
  padding-left: var(--padding-md);
14
17
  display: inline-grid;
15
18
  align-items: center;
16
19
  font-weight: normal;
20
+ gap: var(--gap-sm);
17
21
  height: initial;
18
22
  cursor: pointer;
19
23
  width: 100%;
20
- gap: 0.5em;
21
24
  }
22
25
  }
23
26
 
27
+ .br-form-toggle.drawer {
28
+ display: inline-block;
29
+ }
30
+
31
+ .br-form-toggle.drawer label {
32
+ border-top-right-radius: 0;
33
+ border-top-left-radius: 0;
34
+ border-top-width: 0;
35
+ }
36
+
24
37
  .br-form-toggle input[type=checkbox] {
25
38
  background-color: var(--color-black-50-lighten);
26
39
  transition-property: background-color;
40
+ border-radius: $toggleRadius;
27
41
  transition-duration: 200ms;
28
- border-radius: 1.125em;
42
+ height: $toggleHeight;
43
+ width: $toggleWidth;
29
44
  position: relative;
30
45
  appearance: none;
31
- height: 1.875rem;
32
46
  cursor: inherit;
33
- width: 3.25rem;
34
47
  color: white;
35
48
  padding: 0;
36
49
  margin: 0;
37
50
 
38
- &:focus {
51
+ &:hover,
52
+ &:focus-visible {
39
53
  outline-color: var(--color-black-50-lighten);
40
54
  outline-offset: var(--border-width-lg);
41
55
  outline-width: var(--border-width-lg);
@@ -45,27 +59,28 @@
45
59
 
46
60
  .br-form-toggle input[type=checkbox]:before {
47
61
  transition-property: transform;
48
- transition-duration: 200ms;
62
+ transition-duration: 300ms;
49
63
  background-color: white;
64
+ bottom: $circleMargin;
65
+ height: $circleSize;
66
+ left: $circleMargin;
67
+ width: $circleSize;
50
68
  border-radius: 50%;
51
69
  position: absolute;
52
- height: 1.65em;
53
- bottom: 0.3em;
54
- width: 1.65em;
55
- left: 0.3em;
56
70
  content: '';
57
71
  }
58
72
 
59
73
  .br-form-toggle input[type=checkbox]:checked:before {
60
- -webkit-transform: translateX(1.65em);
61
- -ms-transform: translateX(1.65em);
62
- transform: translateX(1.65em);
74
+ -webkit-transform: translateX($circleTransform);
75
+ -ms-transform: translateX($circleTransform);
76
+ transform: translateX($circleTransform);
63
77
  }
64
78
 
65
79
  .br-form-toggle input[type=checkbox]:checked {
66
80
  background-color: var(--color-status-success);
67
81
 
68
- &:focus {
82
+ &:hover,
83
+ &:focus-visible {
69
84
  outline-color: var(--color-status-success);
70
85
  }
71
86
  }
package/scss/_variables.scss CHANGED
@@ -17,227 +17,227 @@
17
17
 
18
18
  // --- Colours: black scale ---
19
19
 
20
- // Black lightened 20% (80% black).
20
+ // Black lightened 20% (80% black)
21
21
  --color-black-80-lighten: color-mix(in oklab, black 80%, white);
22
- // Black lightened 40% (60% black).
22
+ // Black lightened 40% (60% black)
23
23
  --color-black-60-lighten: color-mix(in oklab, black 60%, white);
24
- // Black lightened 50% (50% black).
24
+ // Black lightened 50% (50% black)
25
25
  --color-black-50-lighten: color-mix(in oklab, black 50%, white);
26
- // Black lightened 75% (25% black).
26
+ // Black lightened 75% (25% black)
27
27
  --color-black-25-lighten: color-mix(in oklab, black 25%, white);
28
- // Black lightened 90% (10% black).
28
+ // Black lightened 90% (10% black)
29
29
  --color-black-10-lighten: color-mix(in oklab, black 10%, white);
30
- // Black lightened 95% (5% black).
30
+ // Black lightened 95% (5% black)
31
31
  --color-black-5-lighten: color-mix(in oklab, black 5%, white);
32
32
 
33
33
  // --- Colours: brand — Art ---
34
34
 
35
- // Art brand base colour (`#e60077`).
35
+ // Art brand base colour #e60077
36
36
  --color-brand-art: #e60077;
37
- // Art brand darkened 65%.
37
+ // Art brand darkened 65%
38
38
  --color-brand-art-35-darken: color-mix(in oklab, var(--color-brand-art) 35%, black);
39
- // Art brand darkened 20%.
39
+ // Art brand darkened 20%
40
40
  --color-brand-art-80-darken: color-mix(in oklab, var(--color-brand-art) 80%, black);
41
- // Art brand darkened 10%.
41
+ // Art brand darkened 10%
42
42
  --color-brand-art-90-darken: color-mix(in oklab, var(--color-brand-art) 90%, black);
43
43
  // Art brand base alias.
44
44
  --color-brand-art-100-base: var(--color-brand-art);
45
- // Art brand lightened 40%.
45
+ // Art brand lightened 40%
46
46
  --color-brand-art-60-lighten: color-mix(in oklab, var(--color-brand-art) 60%, white);
47
- // Art brand lightened 70%.
47
+ // Art brand lightened 70%
48
48
  --color-brand-art-30-lighten: color-mix(in oklab, var(--color-brand-art) 30%, white);
49
- // Art brand lightened 85%.
49
+ // Art brand lightened 85%
50
50
  --color-brand-art-15-lighten: color-mix(in oklab, var(--color-brand-art) 15%, white);
51
- // Art brand lightened 95%.
51
+ // Art brand lightened 95%
52
52
  --color-brand-art-5-lighten: color-mix(in oklab, var(--color-brand-art) 5%, white);
53
53
 
54
54
  // --- Colours: brand — Cinema ---
55
55
 
56
- // Cinema brand base colour (`#20882a`).
56
+ // Cinema brand base colour #20882a
57
57
  --color-brand-cinema: #20882a;
58
- // Cinema brand darkened 65%.
58
+ // Cinema brand darkened 65%
59
59
  --color-brand-cinema-35-darken: color-mix(in oklab, var(--color-brand-cinema) 35%, black);
60
- // Cinema brand darkened 20%.
60
+ // Cinema brand darkened 20%
61
61
  --color-brand-cinema-80-darken: color-mix(in oklab, var(--color-brand-cinema) 80%, black);
62
- // Cinema brand darkened 10%.
62
+ // Cinema brand darkened 10%
63
63
  --color-brand-cinema-90-darken: color-mix(in oklab, var(--color-brand-cinema) 90%, black);
64
64
  // Cinema brand base alias.
65
65
  --color-brand-cinema-100-base: var(--color-brand-cinema);
66
- // Cinema brand lightened 40%.
66
+ // Cinema brand lightened 40%
67
67
  --color-brand-cinema-60-lighten: color-mix(in oklab, var(--color-brand-cinema) 60%, white);
68
- // Cinema brand lightened 70%.
68
+ // Cinema brand lightened 70%
69
69
  --color-brand-cinema-30-lighten: color-mix(in oklab, var(--color-brand-cinema) 30%, white);
70
- // Cinema brand lightened 85%.
70
+ // Cinema brand lightened 85%
71
71
  --color-brand-cinema-15-lighten: color-mix(in oklab, var(--color-brand-cinema) 15%, white);
72
- // Cinema brand lightened 95%.
72
+ // Cinema brand lightened 95%
73
73
  --color-brand-cinema-5-lighten: color-mix(in oklab, var(--color-brand-cinema) 5%, white);
74
74
 
75
75
  // --- Colours: brand — Classical ---
76
76
 
77
- // Classical brand base colour (`#946f2e`).
77
+ // Classical brand base colour #946f2e
78
78
  --color-brand-classical: #946f2e;
79
- // Classical brand darkened 65%.
79
+ // Classical brand darkened 65%
80
80
  --color-brand-classical-35-darken: color-mix(in oklab, var(--color-brand-classical) 35%, black);
81
- // Classical brand darkened 20%.
81
+ // Classical brand darkened 20%
82
82
  --color-brand-classical-80-darken: color-mix(in oklab, var(--color-brand-classical) 80%, black);
83
- // Classical brand darkened 10%.
83
+ // Classical brand darkened 10%
84
84
  --color-brand-classical-90-darken: color-mix(in oklab, var(--color-brand-classical) 90%, black);
85
85
  // Classical brand base alias.
86
86
  --color-brand-classical-100-base: var(--color-brand-classical);
87
- // Classical brand lightened 40%.
87
+ // Classical brand lightened 40%
88
88
  --color-brand-classical-60-lighten: color-mix(in oklab, var(--color-brand-classical) 60%, white);
89
- // Classical brand lightened 70%.
89
+ // Classical brand lightened 70%
90
90
  --color-brand-classical-30-lighten: color-mix(in oklab, var(--color-brand-classical) 30%, white);
91
- // Classical brand lightened 85%.
91
+ // Classical brand lightened 85%
92
92
  --color-brand-classical-15-lighten: color-mix(in oklab, var(--color-brand-classical) 15%, white);
93
- // Classical brand lightened 95%.
93
+ // Classical brand lightened 95%
94
94
  --color-brand-classical-5-lighten: color-mix(in oklab, var(--color-brand-classical) 5%, white);
95
95
 
96
96
  // --- Colours: brand — Contemporary ---
97
97
 
98
- // Contemporary brand base colour (`#402f79`).
98
+ // Contemporary brand base colour #402f79
99
99
  --color-brand-contemporary: #402f79;
100
- // Contemporary brand darkened 65%.
100
+ // Contemporary brand darkened 65%
101
101
  --color-brand-contemporary-35-darken: color-mix(in oklab, var(--color-brand-contemporary) 35%, black);
102
- // Contemporary brand darkened 20%.
102
+ // Contemporary brand darkened 20%
103
103
  --color-brand-contemporary-80-darken: color-mix(in oklab, var(--color-brand-contemporary) 80%, black);
104
- // Contemporary brand darkened 10%.
104
+ // Contemporary brand darkened 10%
105
105
  --color-brand-contemporary-90-darken: color-mix(in oklab, var(--color-brand-contemporary) 90%, black);
106
106
  // Contemporary brand base alias.
107
107
  --color-brand-contemporary-100-base: var(--color-brand-contemporary);
108
- // Contemporary brand lightened 40%.
108
+ // Contemporary brand lightened 40%
109
109
  --color-brand-contemporary-60-lighten: color-mix(in oklab, var(--color-brand-contemporary) 60%, white);
110
- // Contemporary brand lightened 70%.
110
+ // Contemporary brand lightened 70%
111
111
  --color-brand-contemporary-30-lighten: color-mix(in oklab, var(--color-brand-contemporary) 30%, white);
112
- // Contemporary brand lightened 85%.
112
+ // Contemporary brand lightened 85%
113
113
  --color-brand-contemporary-15-lighten: color-mix(in oklab, var(--color-brand-contemporary) 15%, white);
114
- // Contemporary brand lightened 95%.
114
+ // Contemporary brand lightened 95%
115
115
  --color-brand-contemporary-5-lighten: color-mix(in oklab, var(--color-brand-contemporary) 5%, white);
116
116
 
117
117
  // --- Colours: brand — Generic ---
118
118
 
119
- // Generic brand base colour (`#d14900`).
119
+ // Generic brand base colour #d14900
120
120
  --color-brand-generic: #d14900;
121
- // Generic brand darkened 65%.
121
+ // Generic brand darkened 65%
122
122
  --color-brand-generic-35-darken: color-mix(in oklab, var(--color-brand-generic) 35%, black);
123
- // Generic brand darkened 20%.
123
+ // Generic brand darkened 20%
124
124
  --color-brand-generic-80-darken: color-mix(in oklab, var(--color-brand-generic) 80%, black);
125
- // Generic brand darkened 10%.
125
+ // Generic brand darkened 10%
126
126
  --color-brand-generic-90-darken: color-mix(in oklab, var(--color-brand-generic) 90%, black);
127
127
  // Generic brand base alias.
128
128
  --color-brand-generic-100-base: var(--color-brand-generic);
129
- // Generic brand lightened 40%.
129
+ // Generic brand lightened 40%
130
130
  --color-brand-generic-60-lighten: color-mix(in oklab, var(--color-brand-generic) 60%, white);
131
- // Generic brand lightened 70%.
131
+ // Generic brand lightened 70%
132
132
  --color-brand-generic-30-lighten: color-mix(in oklab, var(--color-brand-generic) 30%, white);
133
- // Generic brand lightened 85%.
133
+ // Generic brand lightened 85%
134
134
  --color-brand-generic-15-lighten: color-mix(in oklab, var(--color-brand-generic) 15%, white);
135
- // Generic brand lightened 95%.
135
+ // Generic brand lightened 95%
136
136
  --color-brand-generic-5-lighten: color-mix(in oklab, var(--color-brand-generic) 5%, white);
137
137
 
138
138
  // --- Colours: brand — Membership ---
139
139
 
140
- // Membership brand base colour (`#3173dd`).
140
+ // Membership brand base colour #3173dd
141
141
  --color-brand-membership: #3173dd;
142
- // Membership brand darkened 65%.
142
+ // Membership brand darkened 65%
143
143
  --color-brand-membership-35-darken: color-mix(in oklab, var(--color-brand-membership) 35%, black);
144
- // Membership brand darkened 20%.
144
+ // Membership brand darkened 20%
145
145
  --color-brand-membership-80-darken: color-mix(in oklab, var(--color-brand-membership) 80%, black);
146
- // Membership brand darkened 10%.
146
+ // Membership brand darkened 10%
147
147
  --color-brand-membership-90-darken: color-mix(in oklab, var(--color-brand-membership) 90%, black);
148
148
  // Membership brand base alias.
149
149
  --color-brand-membership-100-base: var(--color-brand-membership);
150
- // Membership brand lightened 40%.
150
+ // Membership brand lightened 40%
151
151
  --color-brand-membership-60-lighten: color-mix(in oklab, var(--color-brand-membership) 60%, white);
152
- // Membership brand lightened 70%.
152
+ // Membership brand lightened 70%
153
153
  --color-brand-membership-30-lighten: color-mix(in oklab, var(--color-brand-membership) 30%, white);
154
- // Membership brand lightened 85%.
154
+ // Membership brand lightened 85%
155
155
  --color-brand-membership-15-lighten: color-mix(in oklab, var(--color-brand-membership) 15%, white);
156
- // Membership brand lightened 95%.
156
+ // Membership brand lightened 95%
157
157
  --color-brand-membership-5-lighten: color-mix(in oklab, var(--color-brand-membership) 5%, white);
158
158
 
159
159
  // --- Colours: brand — Programme ---
160
160
 
161
161
  // Programme brand base colour. Derived from `--color-black-60-lighten`.
162
162
  --color-brand-programme: var(--color-black-60-lighten);
163
- // Programme brand darkened 65%.
163
+ // Programme brand darkened 65%
164
164
  --color-brand-programme-35-darken: color-mix(in oklab, var(--color-brand-programme) 35%, black);
165
- // Programme brand darkened 20%.
165
+ // Programme brand darkened 20%
166
166
  --color-brand-programme-80-darken: color-mix(in oklab, var(--color-brand-programme) 80%, black);
167
- // Programme brand darkened 10%.
167
+ // Programme brand darkened 10%
168
168
  --color-brand-programme-90-darken: color-mix(in oklab, var(--color-brand-programme) 90%, black);
169
169
  // Programme brand base alias.
170
170
  --color-brand-programme-100-base: var(--color-brand-programme);
171
- // Programme brand lightened 40%.
171
+ // Programme brand lightened 40%
172
172
  --color-brand-programme-60-lighten: color-mix(in oklab, var(--color-brand-programme) 60%, white);
173
- // Programme brand lightened 70%.
173
+ // Programme brand lightened 70%
174
174
  --color-brand-programme-30-lighten: color-mix(in oklab, var(--color-brand-programme) 30%, white);
175
- // Programme brand lightened 85%.
175
+ // Programme brand lightened 85%
176
176
  --color-brand-programme-15-lighten: color-mix(in oklab, var(--color-brand-programme) 15%, white);
177
- // Programme brand lightened 95%.
177
+ // Programme brand lightened 95%
178
178
  --color-brand-programme-5-lighten: color-mix(in oklab, var(--color-brand-programme) 5%, white);
179
179
 
180
180
  // --- Colours: brand — Shop ---
181
181
 
182
- // Shop brand base colour (`#13866f`).
182
+ // Shop brand base colour #13866f
183
183
  --color-brand-shop: #13866f;
184
- // Shop brand darkened 65%.
184
+ // Shop brand darkened 65%
185
185
  --color-brand-shop-35-darken: color-mix(in oklab, var(--color-brand-shop) 35%, black);
186
- // Shop brand darkened 20%.
186
+ // Shop brand darkened 20%
187
187
  --color-brand-shop-80-darken: color-mix(in oklab, var(--color-brand-shop) 80%, black);
188
- // Shop brand darkened 10%.
188
+ // Shop brand darkened 10%
189
189
  --color-brand-shop-90-darken: color-mix(in oklab, var(--color-brand-shop) 90%, black);
190
190
  // Shop brand base alias.
191
191
  --color-brand-shop-100-base: var(--color-brand-shop);
192
- // Shop brand lightened 40%.
192
+ // Shop brand lightened 40%
193
193
  --color-brand-shop-60-lighten: color-mix(in oklab, var(--color-brand-shop) 60%, white);
194
- // Shop brand lightened 70%.
194
+ // Shop brand lightened 70%
195
195
  --color-brand-shop-30-lighten: color-mix(in oklab, var(--color-brand-shop) 30%, white);
196
- // Shop brand lightened 85%.
196
+ // Shop brand lightened 85%
197
197
  --color-brand-shop-15-lighten: color-mix(in oklab, var(--color-brand-shop) 15%, white);
198
- // Shop brand lightened 95%.
198
+ // Shop brand lightened 95%
199
199
  --color-brand-shop-5-lighten: color-mix(in oklab, var(--color-brand-shop) 5%, white);
200
200
 
201
201
  // --- Colours: brand — Talks ---
202
202
 
203
- // Talks brand base colour (`#5778a2`).
203
+ // Talks brand base colour #5778a2
204
204
  --color-brand-talks: #5778a2;
205
- // Talks brand darkened 65%.
205
+ // Talks brand darkened 65%
206
206
  --color-brand-talks-35-darken: color-mix(in oklab, var(--color-brand-talks) 35%, black);
207
- // Talks brand darkened 20%.
207
+ // Talks brand darkened 20%
208
208
  --color-brand-talks-80-darken: color-mix(in oklab, var(--color-brand-talks) 80%, black);
209
- // Talks brand darkened 10%.
209
+ // Talks brand darkened 10%
210
210
  --color-brand-talks-90-darken: color-mix(in oklab, var(--color-brand-talks) 90%, black);
211
211
  // Talks brand base alias.
212
212
  --color-brand-talks-100-base: var(--color-brand-talks);
213
- // Talks brand lightened 40%.
213
+ // Talks brand lightened 40%
214
214
  --color-brand-talks-60-lighten: color-mix(in oklab, var(--color-brand-talks) 60%, white);
215
- // Talks brand lightened 70%.
215
+ // Talks brand lightened 70%
216
216
  --color-brand-talks-30-lighten: color-mix(in oklab, var(--color-brand-talks) 30%, white);
217
- // Talks brand lightened 85%.
217
+ // Talks brand lightened 85%
218
218
  --color-brand-talks-15-lighten: color-mix(in oklab, var(--color-brand-talks) 15%, white);
219
- // Talks brand lightened 95%.
219
+ // Talks brand lightened 95%
220
220
  --color-brand-talks-5-lighten: color-mix(in oklab, var(--color-brand-talks) 5%, white);
221
221
 
222
222
  // --- Colours: brand — Theatre ---
223
223
 
224
- // Theatre brand base colour (`#017e9d`).
224
+ // Theatre brand base colour #017e9d
225
225
  --color-brand-theatre: #017e9d;
226
- // Theatre brand darkened 65%.
226
+ // Theatre brand darkened 65%
227
227
  --color-brand-theatre-35-darken: color-mix(in oklab, var(--color-brand-theatre) 35%, black);
228
- // Theatre brand darkened 20%.
228
+ // Theatre brand darkened 20%
229
229
  --color-brand-theatre-80-darken: color-mix(in oklab, var(--color-brand-theatre) 80%, black);
230
- // Theatre brand darkened 10%.
230
+ // Theatre brand darkened 10%
231
231
  --color-brand-theatre-90-darken: color-mix(in oklab, var(--color-brand-theatre) 90%, black);
232
232
  // Theatre brand base alias.
233
233
  --color-brand-theatre-100-base: var(--color-brand-theatre);
234
- // Theatre brand lightened 40%.
234
+ // Theatre brand lightened 40%
235
235
  --color-brand-theatre-60-lighten: color-mix(in oklab, var(--color-brand-theatre) 60%, white);
236
- // Theatre brand lightened 70%.
236
+ // Theatre brand lightened 70%
237
237
  --color-brand-theatre-30-lighten: color-mix(in oklab, var(--color-brand-theatre) 30%, white);
238
- // Theatre brand lightened 85%.
238
+ // Theatre brand lightened 85%
239
239
  --color-brand-theatre-15-lighten: color-mix(in oklab, var(--color-brand-theatre) 15%, white);
240
- // Theatre brand lightened 95%.
240
+ // Theatre brand lightened 95%
241
241
  --color-brand-theatre-5-lighten: color-mix(in oklab, var(--color-brand-theatre) 5%, white);
242
242
 
243
243
  // --- Colours: donor ---
@@ -270,21 +270,21 @@
270
270
  // --- Colours: status ---
271
271
 
272
272
  --color-status-error: #893434;
273
- // Error status lightened 90%.
273
+ // Error status lightened 90%
274
274
  --color-status-error-10-lighten: color-mix(in oklab, var(--color-status-error) 10%, white);
275
- // Error status lightened 60%.
275
+ // Error status lightened 60%
276
276
  --color-status-error-40-lighten: color-mix(in oklab, var(--color-status-error) 40%, white);
277
- // Neutral/info status colour (`#006ebd`).
277
+ // Neutral/info status colour #006ebd
278
278
  --color-status-neutral: #006ebd;
279
- // Neutral status lightened 90%.
279
+ // Neutral status lightened 90%
280
280
  --color-status-neutral-10-lighten: color-mix(in oklab, var(--color-status-neutral) 10%, white);
281
- // Neutral status lightened 60%.
281
+ // Neutral status lightened 60%
282
282
  --color-status-neutral-40-lighten: color-mix(in oklab, var(--color-status-neutral) 40%, white);
283
- // Success status colour (`#427b42`).
283
+ // Success status colour #427b42
284
284
  --color-status-success: #427b42;
285
- // Success status lightened 90%.
285
+ // Success status lightened 90%
286
286
  --color-status-success-10-lighten: color-mix(in oklab, var(--color-status-success) 10%, white);
287
- // Success status lightened 60%.
287
+ // Success status lightened 60%
288
288
  --color-status-success-40-lighten: color-mix(in oklab, var(--color-status-success) 40%, white);
289
289
 
290
290
  // --- Colours: Young Barbican ---
@@ -307,36 +307,36 @@
307
307
 
308
308
  // --- Font sizes ---
309
309
 
310
- // Body font size (`17px`).
310
+ // Body font size 17px
311
311
  --font-size-body: 1.0625rem;
312
312
  // Large font size alias. Same as `--font-size-h5`.
313
313
  --font-size-lg: var(--font-size-h5);
314
- // H1 font size (`36px`).
314
+ // H1 font size 36px
315
315
  --font-size-h1: 2.25rem;
316
- // H2 font size (`32px`).
316
+ // H2 font size 32px
317
317
  --font-size-h2: 2rem;
318
- // H3 font size (`28px`).
318
+ // H3 font size 28px
319
319
  --font-size-h3: 1.75rem;
320
- // H4 font size (`24px`).
320
+ // H4 font size 24px
321
321
  --font-size-h4: 1.5rem;
322
- // H5 font size (`20px`).
322
+ // H5 font size 20px
323
323
  --font-size-h5: 1.25rem;
324
- // H6 font size (`16px`).
324
+ // H6 font size 16px
325
325
  --font-size-h6: 1rem;
326
- // Small font size (`14px`).
326
+ // Small font size 14px
327
327
  --font-size-sm: 0.875rem;
328
328
 
329
329
  // --- Gaps ---
330
330
 
331
- // Extra-small gap (`8px`).
331
+ // Extra-small gap 8px
332
332
  --gap-xs: 0.5rem;
333
- // Small gap (`12px`).
333
+ // Small gap 12px
334
334
  --gap-sm: 0.75rem;
335
- // Medium gap (`16px`).
335
+ // Medium gap 16px
336
336
  --gap-md: 1rem;
337
- // Large gap (`24px`).
337
+ // Large gap 24px
338
338
  --gap-lg: 1.5rem;
339
- // Extra-large gap (`32px`).
339
+ // Extra-large gap 32px
340
340
  --gap-xl: 2rem;
341
341
 
342
342
  // --- Line heights ---
@@ -346,24 +346,24 @@
346
346
  --line-height-md: 1.35;
347
347
  --line-height-lg: 1.5;
348
348
 
349
- // Fixed line height for button/menu items (`38px`).
349
+ // Fixed line height for button/menu items 38px
350
350
  --line-height-button-menu: 2.375rem;
351
351
 
352
352
  // --- Margins ---
353
353
 
354
- // Extra-small margin (`5px`).
354
+ // Extra-small margin 5px
355
355
  --margin-xs: 0.3125rem;
356
- // Small margin (`8px`).
356
+ // Small margin 8px
357
357
  --margin-sm: 0.5rem;
358
- // Medium margin (`12px`).
358
+ // Medium margin 12px
359
359
  --margin-md: 0.75rem;
360
- // Large margin (`16px`).
360
+ // Large margin 16px
361
361
  --margin-lg: 1rem;
362
- // Extra-large margin (`24px`).
362
+ // Extra-large margin 24px
363
363
  --margin-xl: 1.5rem;
364
- // 2× extra-large margin (`32px`).
364
+ // 2× extra-large margin 32px
365
365
  --margin-xxl: 2rem;
366
- // 3× extra-large margin (`40px`).
366
+ // 3× extra-large margin 40px
367
367
  --margin-xxxl: 2.5rem;
368
368
 
369
369
  // Negative wrap offset for `--margin-xs`. Used to counteract child margins.
@@ -373,53 +373,53 @@
373
373
 
374
374
  // --- Minimum heights ---
375
375
 
376
- // Minimum button height (`40px`).
376
+ // Minimum button height 40px
377
377
  --min-height-button: 2.5rem;
378
- // Minimum height for small iframes (`440px`).
378
+ // Minimum height for small iframes 440px
379
379
  --min-height-iframe-sm: 27.5rem;
380
- // Minimum height for large iframes (`590px`).
380
+ // Minimum height for large iframes 590px
381
381
  --min-height-iframe-lg: 36.875rem;
382
382
 
383
383
  // --- Offsets & outlines ---
384
384
 
385
385
  // Navlink offset. Negative `--border-width-sm` to align active indicator flush with edge.
386
386
  --offset-navlink: calc(var(--border-width-sm) * -1);
387
- // Large outline inset (`-4px`).
387
+ // Large outline inset -4px
388
388
  --outline-inset-lg: calc(0.25rem * -1);
389
- // Small outline offset (`1px`).
389
+ // Small outline offset 1px
390
390
  --outline-offset-sm: 0.0625rem;
391
- // Medium outline offset (`2px`).
391
+ // Medium outline offset 2px
392
392
  --outline-offset-md: 0.125rem;
393
- // Large outline offset (`3px`).
393
+ // Large outline offset 3px
394
394
  --outline-offset-lg: 0.1875rem;
395
395
 
396
396
  // --- Padding ---
397
397
 
398
- // Extra-small padding (`4px`).
398
+ // Extra-small padding 4px
399
399
  --padding-xs: 0.25rem;
400
- // Small padding (`8px`).
400
+ // Small padding 8px
401
401
  --padding-sm: 0.5rem;
402
- // Medium padding (`12px`).
402
+ // Medium padding 12px
403
403
  --padding-md: 0.75rem;
404
- // Large padding (`16px`).
404
+ // Large padding 16px
405
405
  --padding-lg: 1rem;
406
- // Extra-large padding (`24px`).
406
+ // Extra-large padding 24px
407
407
  --padding-xl: 1.5rem;
408
- // 2× extra-large padding (`32px`).
408
+ // 2× extra-large padding 32px
409
409
  --padding-xxl: 2rem;
410
- // 3× extra-large padding (`40px`).
410
+ // 3× extra-large padding 40px
411
411
  --padding-xxxl: 2.5rem;
412
- // Small card internal padding (`20px`).
412
+ // Small card internal padding 20px
413
413
  --padding-card-sm: 1.25rem;
414
- // Medium card internal padding (`24px`).
414
+ // Medium card internal padding 24px
415
415
  --padding-card-md: 1.5rem;
416
- // Large card internal padding (`28px`).
416
+ // Large card internal padding 28px
417
417
  --padding-card-lg: 1.75rem;
418
- // Content section padding (`60px`).
418
+ // Content section padding 60px
419
419
  --padding-content: 3.75rem;
420
- // Small responsive layout side padding (`5%`).
420
+ // Small responsive layout side padding 5%
421
421
  --padding-layout-sm: 5%;
422
- // Large responsive layout side padding (`10%`).
422
+ // Large responsive layout side padding 10%
423
423
  --padding-layout-lg: 10%;
424
424
 
425
425
  // --- Scale ---
@@ -429,20 +429,20 @@
429
429
 
430
430
  // --- Widths ---
431
431
 
432
- // Standard column width (`80px`).
432
+ // Standard column width 80px
433
433
  --width-column: 5rem;
434
- // Icon container width (`160px`).
434
+ // Icon container width 160px
435
435
  --width-icon: 10rem;
436
- // Title column width (`320px`).
437
- --width-title: 20rem;
438
- // Extra-small layout max-width (`400px`).
436
+ // Title column width 360px
437
+ --width-title: 22.5rem;
438
+ // Extra-small layout max-width 400px
439
439
  --width-layout-xs: 25rem;
440
- // Small layout max-width (`800px`).
440
+ // Small layout max-width 800px
441
441
  --width-layout-sm: 50rem;
442
- // Medium layout max-width (`960px`).
442
+ // Medium layout max-width 960px
443
443
  --width-layout-md: 60rem;
444
- // Large layout max-width (`1200px`).
444
+ // Large layout max-width 1200px
445
445
  --width-layout-lg: 75rem;
446
- // QR code display width (`112px`).
446
+ // QR code display width 112px
447
447
  --width-qrcode: 7rem;
448
448
  }
package/scss/mixins/card/_membership.scss CHANGED
@@ -23,8 +23,7 @@ $gradients: (
23
23
  @mixin br-card--membership {
24
24
  & {
25
25
  background-color: var(--color-black-60-lighten);
26
- max-width: var(--width-layout-xs);
27
- min-height: 12.75rem;
26
+ max-width: var(--width-title);
28
27
  border-width: 0;
29
28
  color: white;
30
29
  width: 100%;