@royaloperahouse/harmonic 0.2.3-g → 0.2.3-i

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 (11) hide show
  1. package/dist/components/Typography/Typography.d.ts +0 -1
  2. package/dist/components/Typography/utils.d.ts +3 -0
  3. package/dist/harmonic.cjs.development.css +231 -260
  4. package/dist/harmonic.cjs.development.js +84 -14
  5. package/dist/harmonic.cjs.development.js.map +1 -1
  6. package/dist/harmonic.cjs.production.min.js +1 -1
  7. package/dist/harmonic.cjs.production.min.js.map +1 -1
  8. package/dist/harmonic.esm.js +81 -19
  9. package/dist/harmonic.esm.js.map +1 -1
  10. package/dist/index.d.ts +2 -1
  11. package/package.json +1 -1
package/dist/components/Typography/Typography.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
3
- import './styles.css';
4
3
  export declare const DisplayHeader: ({ children, size, em, color, serif, className }: IGenericTypographyProps) => React.JSX.Element;
5
4
  export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag, className, }: IHarmonicHeaderProps) => React.JSX.Element;
6
5
  export declare const HarmonicSubtitle: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
package/dist/components/Typography/utils.d.ts CHANGED
@@ -3,5 +3,8 @@ export declare const createClassNames: (baseClass: string, options: {
3
3
  color?: string;
4
4
  serif?: boolean;
5
5
  em?: boolean;
6
+ bold?: boolean;
6
7
  className?: string;
8
+ }, styles: {
9
+ [key: string]: string;
7
10
  }) => string;
package/dist/harmonic.cjs.development.css CHANGED
@@ -1,322 +1,293 @@
1
- /* ~~~~~ General Styling Classes ~~~~~ */
2
- .styles_color-primary__UYod1 {
3
- color: var(--color-primary);
1
+ /* Base classes */
2
+ .typography-module_display__ZHsz9 {
3
+ margin: 0;
4
+ font-family: var(--font-family-sans);
5
+ line-height: 100%;
4
6
  }
5
7
 
6
- .styles_color-black__a05Fo {
7
- color: var(--color-base-black);
8
+ .typography-module_header__FVsLI {
9
+ margin: 0;
10
+ font-family: var(--font-family-sans);
11
+ font-weight: 500;
8
12
  }
9
13
 
10
- .styles_color-white__HiYDT {
11
- color: var(--color-base-white);
14
+ .typography-module_subtitle__x3sSn {
15
+ margin: 0;
16
+ font-family: var(--font-family-sans);
17
+ font-weight: 500;
12
18
  }
13
19
 
14
- .styles_color-red__zwTZW {
15
- color: var(--color-primary-red);
20
+ .typography-module_bodycopy__-BY2U {
21
+ margin: 0;
22
+ font-family: var(--font-family-sans);
23
+ font-weight: 400;
16
24
  }
17
25
 
18
- .styles_color-grey__Gc0wv {
19
- color: var(--color-base-dark-grey);
26
+ .typography-module_overline__y1yCC {
27
+ margin: 0;
28
+ font-family: var(--font-family-sans);
29
+ font-weight: 500;
30
+ text-transform: uppercase;
20
31
  }
21
32
 
22
- .styles_color-inherit__Y12df {
23
- color: inherit;
33
+ .typography-module_buttontext__Gp0W- {
34
+ margin: 0;
35
+ font-family: var(--font-family-sans);
36
+ font-weight: 400;
24
37
  }
25
38
 
26
- .styles_em__v4FoO {
27
- font-style: italic;
39
+ .typography-module_captiontext__zyA-- {
40
+ margin: 0;
41
+ font-family: var(--font-family-sans);
42
+ font-weight: 400;
28
43
  }
29
- /* ~~~ */
30
44
 
31
- /* Display Headers */
32
- .styles_display__VgnTB {
45
+ .typography-module_navigationtext__Qj6Zw {
33
46
  margin: 0;
34
47
  font-family: var(--font-family-sans);
35
- line-height: 100%;
36
-
37
- &.styles_large__vqVxY {
38
- font-size: 96px;
39
- font-weight: 700;
40
- letter-spacing: -5px;
41
- }
48
+ font-weight: 500;
49
+ }
42
50
 
43
- &.styles_small__e7YDe {
44
- font-size: 68px;
45
- font-weight: 500;
46
- letter-spacing: -3px;
47
- }
51
+ /* Size modifiers */
52
+ .typography-module_display--large__RwPQD {
53
+ font-size: 96px;
54
+ font-weight: 700;
55
+ letter-spacing: -5px;
56
+ }
48
57
 
49
- /* Serif and Italic styles */
50
- &.styles_serif__b-ZjM,
51
- &.styles_em__v4FoO {
52
- font-family: var(--font-family-serif);
53
- font-weight: 500;
54
- }
58
+ .typography-module_display--small__XWUSJ {
59
+ font-size: 68px;
60
+ font-weight: 500;
61
+ letter-spacing: -3px;
62
+ }
55
63
 
56
- /* Serif and Italic adjustments */
57
- &.styles_large__vqVxY.styles_serif__b-ZjM,
58
- &.styles_large__vqVxY.styles_em__v4FoO {
59
- letter-spacing: -3px;
60
- }
64
+ .typography-module_header--large__2vP3p {
65
+ font-size: 44px;
66
+ line-height: 48px;
67
+ letter-spacing: -1.5px;
68
+ }
61
69
 
62
- &.styles_small__e7YDe.styles_serif__b-ZjM,
63
- &.styles_small__e7YDe.styles_em__v4FoO {
64
- letter-spacing: -2px;
65
- }
70
+ .typography-module_header--medium__OgzlB {
71
+ font-size: 34px;
72
+ line-height: 40px;
73
+ letter-spacing: -1px;
74
+ }
66
75
 
67
- @media (max-width: 699px) {
68
- &.styles_large__vqVxY {
69
- font-size: 38px;
70
- letter-spacing: -1.5px;
71
- }
72
-
73
- &.styles_small__e7YDe {
74
- font-size: 32px;
75
- letter-spacing: -1.5px;
76
- }
77
-
78
- &.styles_large__vqVxY.styles_serif__b-ZjM,
79
- &.styles_large__vqVxY.styles_em__v4FoO,
80
- &.styles_small__e7YDe.styles_serif__b-ZjM,
81
- &.styles_small__e7YDe.styles_em__v4FoO {
82
- letter-spacing: -0.5px;
83
- }
84
- }
76
+ .typography-module_header--small__zLuFf {
77
+ font-size: 26px;
78
+ line-height: 32px;
79
+ letter-spacing: -0.5px;
85
80
  }
86
81
 
87
- /* Headers */
88
- .styles_header__UDH-H {
89
- margin: 0;
90
- font-family: var(--font-family-sans);
91
- font-weight: 500;
82
+ .typography-module_subtitle--large__1Ep9J {
83
+ font-size: 24px;
84
+ line-height: 32px;
85
+ letter-spacing: -0.5px;
86
+ }
92
87
 
93
- &.styles_large__vqVxY {
94
- font-size: 44px;
95
- line-height: 48px;
96
- letter-spacing: -1.5px;
97
- }
88
+ .typography-module_subtitle--medium__8FxeU {
89
+ font-size: 20px;
90
+ line-height: 28px;
91
+ letter-spacing: -0.5px;
92
+ }
98
93
 
99
- &.styles_medium__WQPZj {
100
- font-size: 34px;
101
- line-height: 40px;
102
- letter-spacing: -1px;
103
- }
94
+ .typography-module_subtitle--small__Vt9bZ {
95
+ font-size: 17px;
96
+ line-height: 24px;
97
+ letter-spacing: -0.5px;
98
+ }
104
99
 
105
- &.styles_small__e7YDe {
106
- font-size: 26px;
107
- line-height: 32px;
108
- letter-spacing: -0.5px;
109
- }
100
+ .typography-module_bodycopy--large__BNzf2 {
101
+ font-size: 20px;
102
+ line-height: 28px;
103
+ letter-spacing: -0.5px;
104
+ }
110
105
 
111
- /* Serif and Italic styles */
112
- &.styles_serif__b-ZjM,
113
- &.styles_em__v4FoO {
114
- font-family: var(--font-family-serif);
115
- }
106
+ .typography-module_bodycopy--medium__cwJEu {
107
+ font-size: 17px;
108
+ line-height: 24px;
109
+ letter-spacing: -0.5px;
110
+ }
116
111
 
117
- /* Serif and Italic letter-spacing overrides */
118
- &.styles_large__vqVxY.styles_serif__b-ZjM,
119
- &.styles_large__vqVxY.styles_em__v4FoO {
120
- letter-spacing: -0.5px;
121
- }
112
+ .typography-module_bodycopy--small__fTLSM {
113
+ font-size: 15px;
114
+ line-height: 20px;
115
+ letter-spacing: -0.25px;
116
+ }
122
117
 
123
- &.styles_medium__WQPZj.styles_serif__b-ZjM,
124
- &.styles_medium__WQPZj.styles_em__v4FoO {
125
- letter-spacing: -0.5px;
126
- }
118
+ .typography-module_overline--large__79WUM {
119
+ font-size: 17px;
120
+ line-height: 24px;
121
+ letter-spacing: 1.7px;
122
+ }
127
123
 
128
- &.styles_small__e7YDe.styles_serif__b-ZjM,
129
- &.styles_small__e7YDe.styles_em__v4FoO {
130
- letter-spacing: -0.5px;
131
- }
124
+ .typography-module_overline--medium__Y5z3w {
125
+ font-size: 15px;
126
+ line-height: 20px;
127
+ letter-spacing: 1.5px;
128
+ }
132
129
 
133
- @media (max-width: 699px) {
134
- &.styles_large__vqVxY {
135
- font-size: 28px;
136
- line-height: 34px;
137
- letter-spacing: -1.5px;
138
- }
139
-
140
- &.styles_medium__WQPZj {
141
- font-size: 24px;
142
- line-height: 28px;
143
- letter-spacing: -1px;
144
- }
145
-
146
- &.styles_small__e7YDe {
147
- font-size: 20px;
148
- line-height: 26px;
149
- letter-spacing: -0.75px;
150
- }
151
-
152
- /* Mobile overrides for serif/italic letter-spacing */
153
- &.styles_large__vqVxY.styles_serif__b-ZjM,
154
- &.styles_large__vqVxY.styles_em__v4FoO,
155
- &.styles_medium__WQPZj.styles_serif__b-ZjM,
156
- &.styles_medium__WQPZj.styles_em__v4FoO,
157
- &.styles_small__e7YDe.styles_serif__b-ZjM,
158
- &.styles_small__e7YDe.styles_em__v4FoO {
159
- letter-spacing: -0.5px;
160
- }
161
- }
130
+ .typography-module_overline--small__MGEG6 {
131
+ font-size: 13px;
132
+ line-height: 16px;
133
+ letter-spacing: 1.3px;
162
134
  }
163
135
 
164
- /* Subtitle */
165
- .styles_subtitle__os3DH {
166
- margin: 0;
167
- font-family: var(--font-family-sans);
168
- font-weight: 500;
136
+ /* Button, Caption, Navigation text */
137
+ .typography-module_buttontext__Gp0W- {
138
+ font-size: 17px;
139
+ line-height: 20px;
140
+ letter-spacing: -0.5px;
141
+ }
169
142
 
170
- &.styles_large__vqVxY {
171
- font-size: 19px;
172
- line-height: 26px;
173
- letter-spacing: -0.5px;
174
- }
143
+ .typography-module_captiontext__zyA-- {
144
+ font-size: 17px;
145
+ line-height: 24px;
146
+ letter-spacing: -0.5px;
147
+ }
175
148
 
176
- &.styles_small__e7YDe {
177
- font-size: 17px;
178
- line-height: 24px;
179
- letter-spacing: -0.5px;
180
- }
149
+ .typography-module_navigationtext__Qj6Zw {
150
+ font-size: 19px;
151
+ line-height: 19px;
152
+ letter-spacing: 0.4px;
153
+ }
181
154
 
182
- @media (max-width: 699px) {
183
- &.styles_large__vqVxY {
184
- font-size: 17px;
185
- line-height: 24px;
186
- letter-spacing: -0.5px;
187
- }
188
-
189
- &.styles_small__e7YDe {
190
- font-size: 14px;
191
- line-height: 20px;
192
- letter-spacing: -0.2px;
193
- }
194
- }
155
+ /* Color modifiers */
156
+ .typography-module_display--primary__9sTwU,
157
+ .typography-module_header--primary__KF0PJ,
158
+ .typography-module_subtitle--primary__yL-hS,
159
+ .typography-module_bodycopy--primary__5Uo2D,
160
+ .typography-module_overline--primary__a2NSa,
161
+ .typography-module_buttontext--primary__HnmE3,
162
+ .typography-module_captiontext--primary__mmafI,
163
+ .typography-module_navigationtext--primary__vIsUl {
164
+ color: var(--color-primary);
195
165
  }
196
166
 
197
- /* Body Copy */
198
- .styles_bodycopy__uEx9r {
199
- margin: 0;
200
- font-family: var(--font-family-sans);
201
- font-weight: 400;
202
167
 
203
- &.styles_large__vqVxY {
204
- font-size: 19px;
205
- line-height: 26px;
206
- letter-spacing: -0.5px;
207
- }
168
+ .typography-module_display--black__8hmsx,
169
+ .typography-module_header--black__M3I14,
170
+ .typography-module_subtitle--black__IQRSo,
171
+ .typography-module_bodycopy--black__J8BNP,
172
+ .typography-module_overline--black__RUDoj,
173
+ .typography-module_buttontext--black__irjmz,
174
+ .typography-module_captiontext--black__7axhP,
175
+ .typography-module_navigationtext--black__wDz-G {
176
+ color: var(--color-base-black);
177
+ }
208
178
 
209
- &.styles_medium__WQPZj {
210
- font-size: 17px;
211
- line-height: 24px;
212
- letter-spacing: -0.5px;
213
- }
179
+ .typography-module_display--white__3QA6W,
180
+ .typography-module_header--white__mm-ex,
181
+ .typography-module_subtitle--white__VzQ3K,
182
+ .typography-module_bodycopy--white__NJ8J8,
183
+ .typography-module_overline--white__cV5QV,
184
+ .typography-module_buttontext--white__rrr8U,
185
+ .typography-module_captiontext--white__OMFwW,
186
+ .typography-module_navigationtext--white__5YDdY {
187
+ color: var(--color-base-white);
188
+ }
214
189
 
215
- &.styles_small__e7YDe {
216
- font-size: 14px;
217
- line-height: 20px;
218
- letter-spacing: -0.5px;
219
- }
190
+ .typography-module_display--red__khdLJ,
191
+ .typography-module_header--red__hxuj9,
192
+ .typography-module_subtitle--red__gSK7d,
193
+ .typography-module_bodycopy--red__P5Mau,
194
+ .typography-module_overline--red__OW5dE,
195
+ .typography-module_buttontext--red__mlRi2,
196
+ .typography-module_captiontext--red__jMQIK,
197
+ .typography-module_navigationtext--red__-QADV {
198
+ color: var(--color-primary-red);
199
+ }
220
200
 
221
- @media (max-width: 699px) {
222
- &.styles_large__vqVxY {
223
- font-size: 17px;
224
- line-height: 24px;
225
- letter-spacing: -0.5px;
226
- }
227
-
228
- &.styles_medium__WQPZj {
229
- font-size: 14px;
230
- line-height: 20px;
231
- letter-spacing: -0.2px;
232
- }
233
-
234
- &.styles_small__e7YDe {
235
- font-size: 11px;
236
- line-height: 16px;
237
- letter-spacing: -0.2px;
238
- }
239
- }
201
+ .typography-module_display--grey__RsgTf,
202
+ .typography-module_header--grey__rC0vN,
203
+ .typography-module_subtitle--grey__1nkEx,
204
+ .typography-module_bodycopy--grey__SNnaU,
205
+ .typography-module_overline--grey__lGOsK,
206
+ .typography-module_buttontext--grey__1Y4oX,
207
+ .typography-module_captiontext--grey__V0MLc,
208
+ .typography-module_navigationtext--grey__xi3sz {
209
+ color: var(--color-base-dark-grey);
240
210
  }
241
211
 
242
- /* Overline */
243
- .styles_overline__5xGDa {
244
- margin: 0;
245
- font-family: var(--font-family-sans);
246
- font-weight: 500;
247
- text-transform: uppercase;
212
+ .typography-module_display--inherit__ZNOHM,
213
+ .typography-module_header--inherit__qmHQE,
214
+ .typography-module_subtitle--inherit__mly-X,
215
+ .typography-module_bodycopy--inherit__CoC-f,
216
+ .typography-module_overline--inherit__Cq4ni,
217
+ .typography-module_buttontext--inherit__vguWx,
218
+ .typography-module_captiontext--inherit__ya6gm,
219
+ .typography-module_navigationtext--inherit__cJLWf {
220
+ color: inherit;
221
+ }
248
222
 
249
- &.styles_large__vqVxY {
250
- font-size: 14px;
251
- line-height: 18px;
252
- letter-spacing: 0.3px;
253
- }
223
+ /* Typography variants */
224
+ .typography-module_display--serif__C0-Ve,
225
+ .typography-module_header--serif__uTGCc {
226
+ font-family: var(--font-family-serif);
227
+ }
254
228
 
255
- &.styles_small__e7YDe {
256
- font-size: 12px;
257
- line-height: 14px;
258
- letter-spacing: 0.2px;
259
- }
229
+ .typography-module_display--em__h2bPV,
230
+ .typography-module_header--em__UFQIA {
231
+ font-family: var(--font-family-serif);
232
+ font-style: italic;
233
+ }
260
234
 
261
- @media (max-width: 699px) {
262
- &.styles_large__vqVxY {
263
- line-height: 17px;
264
- letter-spacing: 0.3px; /* Added to ensure it stays */
265
- }
266
-
267
- &.styles_small__e7YDe {
268
- line-height: 14px;
269
- letter-spacing: 0.3px;
270
- }
271
- }
235
+ .typography-module_display--bold__PG-8g,
236
+ .typography-module_header--bold__InvJk,
237
+ .typography-module_subtitle--bold__Subov,
238
+ .typography-module_bodycopy--bold__nZX3C,
239
+ .typography-module_overline--bold__3mUXy,
240
+ .typography-module_buttontext--bold__rBKIJ,
241
+ .typography-module_captiontext--bold__ebTyV,
242
+ .typography-module_navigationtext--bold__SRlV2 {
243
+ font-weight: 700;
272
244
  }
273
245
 
274
- /* Button Text */
275
- .styles_buttontext__UPumF {
276
- margin: 0;
277
- font-family: var(--font-family-sans);
278
- font-size: 17px;
279
- line-height: 20px;
280
- letter-spacing: -0.5px;
281
- font-weight: 400;
246
+ /* Media queries */
247
+ @media (max-width: 699px) {
248
+ .typography-module_display--large__RwPQD {
249
+ font-size: 38px;
250
+ letter-spacing: -1.5px;
251
+ }
282
252
 
283
- @media (max-width: 699px) {
284
- font-weight: 500;
285
- line-height: 17px;
253
+ .typography-module_display--small__XWUSJ {
254
+ font-size: 32px;
255
+ letter-spacing: -1.5px;
286
256
  }
287
- }
288
257
 
289
- /* Caption Text */
290
- .styles_captiontext__-TA6x {
291
- margin: 0;
292
- font-family: var(--font-family-sans);
293
- font-weight: 400;
294
- font-size: 17px;
295
- line-height: 24px;
296
- letter-spacing: -0.5px;
258
+ .typography-module_header--large__2vP3p {
259
+ font-size: 28px;
260
+ line-height: 34px;
261
+ letter-spacing: -1.5px;
262
+ }
297
263
 
298
- @media (max-width: 699px) {
299
- font-size: 14px;
300
- line-height: 20px;
301
- letter-spacing: -0.2px;
264
+ .typography-module_header--medium__OgzlB {
265
+ font-size: 24px;
266
+ line-height: 28px;
267
+ letter-spacing: -1px;
302
268
  }
303
- }
304
269
 
305
- /* Navigation Text */
306
- .styles_navigationtext__qnnIo {
307
- margin: 0;
308
- font-family: var(--font-family-sans);
309
- font-size: 19px;
310
- line-height: 19px;
311
- letter-spacing: 0.4px;
312
- font-weight: 500;
270
+ .typography-module_header--small__zLuFf {
271
+ font-size: 20px;
272
+ line-height: 26px;
273
+ letter-spacing: -0.75px;
274
+ }
313
275
 
314
- @media (max-width: 699px) {
276
+ .typography-module_subtitle--large__1Ep9J {
277
+ font-size: 20px;
278
+ line-height: 28px;
279
+ }
280
+
281
+ .typography-module_subtitle--medium__8FxeU {
315
282
  font-size: 17px;
316
- line-height: 17px;
283
+ line-height: 24px;
284
+ }
285
+
286
+ .typography-module_bodycopy--large__BNzf2 {
287
+ font-size: 17px;
288
+ line-height: 24px;
317
289
  }
318
290
  }
319
-
320
291
  @font-face {
321
292
  font-family: 'GreyLLTT';
322
293
  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');