@total_onion/onion-library 1.0.46 → 1.0.48

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 (8) hide show
  1. package/components/block-standard-content-v3/standard-content-v3-extra.scss +1 -1
  2. package/components/block-standard-content-v3/standard-content-v3.scss +0 -5
  3. package/components/component-accent-text-v3/accent-text-v3.scss +21 -22
  4. package/components/component-nav-menu-v3/nav-menu-v3.scss +5 -6
  5. package/components/fields-core-css-modules-v3/core-css-modules-v3.scss +12 -0
  6. package/components/fields-core-functions-v3/core-functions-v3.scss +32 -0
  7. package/components/fields-core-typography-v3/core-typography-v3.scss +0 -10
  8. package/package.json +1 -1
package/components/block-standard-content-v3/standard-content-v3-extra.scss CHANGED
@@ -1,4 +1,4 @@
1
- // @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
1
+ // @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
2
2
  // @use 'Assets/scss/theme/breakpoints';
3
3
  // @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
4
4
  // @use 'Assets/scss/theme/buttons';
package/components/block-standard-content-v3/standard-content-v3.scss CHANGED
@@ -1,17 +1,12 @@
1
1
  // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
2
  @use 'Assets/scss/blocks/standard-content-v3/standard-content-v3-extra';
3
3
  @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
4
- @use 'NodeModules/@pernod-ricard-global-cms/cblvideocontroller/vc-styles';
5
4
  @use 'Assets/scss/modules/library-modules/content-container-v3/content-container-v3';
6
5
 
7
6
  .standard-content-v3 {
8
7
  display: grid;
9
8
  grid-template: 'main' / 1fr;
10
- @include vc-styles.basic();
11
9
  @include core-mixins-v3.responsiveShowHide(grid);
12
- &__video-container {
13
- grid-area: main;
14
- }
15
10
  @include content-container-v3.contentContainerV3();
16
11
  @include standard-content-v3-extra.additionalStyles();
17
12
  }
package/components/component-accent-text-v3/accent-text-v3.scss CHANGED
@@ -1,7 +1,6 @@
1
- @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
- @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
1
+ @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
2
+ @use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
3
3
  @use 'Assets/scss/theme/breakpoints';
4
- // @use 'Assets/scss/modules/library-modules/accent-text-v3/accent-text-v3-extra';
5
4
 
6
5
  @mixin accentTextV3() {
7
6
  &__accent-text {
@@ -14,21 +13,21 @@
14
13
  letter-spacing: 0.8em;
15
14
  text-transform: uppercase;
16
15
 
17
- gap: core-functions.fluidSize(10);
18
- margin-inline: core-functions.fluidSize(5, 'mobile');
19
- font-size: core-functions.fontSize(10, 'mobile');
16
+ gap: core-functions-v3.fluidSize(10);
17
+ margin-inline: core-functions-v3.fluidSize(5, 'mobile');
18
+ font-size: core-functions-v3.fontSize(10, 'mobile');
20
19
 
21
- @include core-mixins.device(breakpoints.$tabPortrait) {
22
- font-size: core-functions.fontSize(10, 'portrait');
23
- margin-inline: core-functions.fluidSize(5, 'portrait');
24
- gap: core-functions.fluidSize(20, 'portrait');
20
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
21
+ font-size: core-functions-v3.fontSize(10, 'portrait');
22
+ margin-inline: core-functions-v3.fluidSize(5, 'portrait');
23
+ gap: core-functions-v3.fluidSize(20, 'portrait');
25
24
  }
26
25
 
27
- @include core-mixins.device(breakpoints.$tabLandscape) {
26
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
28
27
  color: var(--accent-text-colour);
29
- font-size: core-functions.fontSize(10, 'desktop');
30
- margin-inline: core-functions.fluidSize(5, 'desktop');
31
- gap: core-functions.fluidSize(20, 'desktop');
28
+ font-size: core-functions-v3.fontSize(10, 'desktop');
29
+ margin-inline: core-functions-v3.fluidSize(5, 'desktop');
30
+ gap: core-functions-v3.fluidSize(20, 'desktop');
32
31
  }
33
32
 
34
33
  &::before,
@@ -38,21 +37,21 @@
38
37
  --accent-text-colour-mobile,
39
38
  var(--default-text-colour-mobile)
40
39
  );
41
- width: core-functions.fluidSize(20, 'mobile');
42
- height: core-functions.fluidSize(2, 'mobile');
40
+ width: core-functions-v3.fluidSize(20, 'mobile');
41
+ height: core-functions-v3.fluidSize(2, 'mobile');
43
42
 
44
- @include core-mixins.device(breakpoints.$tabPortrait) {
45
- width: core-functions.fluidSize(40, 'portrait');
46
- height: core-functions.fluidSize(2, 'portrait');
43
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
44
+ width: core-functions-v3.fluidSize(40, 'portrait');
45
+ height: core-functions-v3.fluidSize(2, 'portrait');
47
46
  }
48
47
 
49
- @include core-mixins.device(breakpoints.$tabLandscape) {
48
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
50
49
  background-color: var(
51
50
  --accent-text-colour,
52
51
  var(--default-text-colour-desktop)
53
52
  );
54
- width: core-functions.fluidSize(80, 'desktop');
55
- height: core-functions.fluidSize(2, 'desktop');
53
+ width: core-functions-v3.fluidSize(80, 'desktop');
54
+ height: core-functions-v3.fluidSize(2, 'desktop');
56
55
  }
57
56
  }
58
57
 
package/components/component-nav-menu-v3/nav-menu-v3.scss CHANGED
@@ -1,5 +1,4 @@
1
- @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
2
- @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
1
+ @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
3
2
  @use 'Assets/scss/theme/breakpoints';
4
3
 
5
4
  @mixin navMenuV3() {
@@ -8,11 +7,11 @@
8
7
  width: 100%;
9
8
  justify-content: var(--alignment-mobile);
10
9
  align-items: var(--alignment-mobile);
11
- @include core-mixins.device(breakpoints.$tabPortrait) {
10
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
12
11
  justify-content: var(--alignment-portrait);
13
12
  align-items: var(--alignment-portrait);
14
13
  }
15
- @include core-mixins.device(breakpoints.$tabLandscape) {
14
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
16
15
  justify-content: var(--alignment-desktop);
17
16
  }
18
17
  }
@@ -25,12 +24,12 @@
25
24
  flex-direction: var(--menu-direction-mobile);
26
25
  align-items: var(--alignment-mobile);
27
26
  gap: calc(var(--global-inline-spacing) * var(--gap-mobile));
28
- @include core-mixins.device(breakpoints.$tabPortrait) {
27
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
29
28
  gap: calc(var(--global-inline-spacing) * var(--gap-portrait));
30
29
  flex-direction: var(--menu-direction-portrait);
31
30
  align-items: var(--alignment-portrait);
32
31
  }
33
- @include core-mixins.device(breakpoints.$tabLandscape) {
32
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
34
33
  align-items: var(--alignment-desktop);
35
34
  gap: calc(var(--global-inline-spacing) * var(--gap-desktop));
36
35
  flex-direction: var(--menu-direction);
package/components/fields-core-css-modules-v3/core-css-modules-v3.scss ADDED
@@ -0,0 +1,12 @@
1
+ //Modules
2
+ @use 'Assets/scss/modules/library-modules/animations/animations';
3
+ @use 'Assets/scss/modules/library-modules/block-padding/block-padding';
4
+ @use 'Assets/scss/modules/library-modules/block-settings/block-settings';
5
+ @use 'Assets/scss/modules/library-modules/social-networks/social-networks';
6
+ @use 'Assets/scss/modules/library-modules/core-cta/core-cta';
7
+
8
+ @include block-padding.blockPadding();
9
+ @include social-networks.socialNetworks();
10
+ @include animations.animations();
11
+ @include block-settings.blockSettings();
12
+ @include core-cta.core-cta();
package/components/fields-core-functions-v3/core-functions-v3.scss ADDED
@@ -0,0 +1,32 @@
1
+ // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
+ @use 'Assets/scss/theme/breakpoints';
3
+ @use 'sass:math';
4
+
5
+ @function fontSize($size-px, $screen: '') {
6
+ @if $screen == 'static' {
7
+ @return calc(
8
+ (
9
+ ($size-px / var(--desktop-design-reference)) *
10
+ var(--screen-width-static)
11
+ ) *
12
+ var(--font-size-multiplier)
13
+ );
14
+ } @else {
15
+ @return calc(
16
+ (($size-px / var(--design-reference)) * var(--font-reference)) *
17
+ var(--font-size-multiplier)
18
+ );
19
+ }
20
+ }
21
+ @function fluidSize($size-px, $screen: '') {
22
+ @if $screen == 'static' {
23
+ @return calc(
24
+ (($size-px / var(--desktop-design-reference))) *
25
+ var(--screen-width-static)
26
+ );
27
+ } @else {
28
+ @return calc(
29
+ (($size-px / var(--design-reference)) * var(--screen-width))
30
+ );
31
+ }
32
+ }
package/components/fields-core-typography-v3/core-typography-v3.scss CHANGED
@@ -278,19 +278,15 @@ ol {
278
278
  }
279
279
  }
280
280
  }
281
-
282
281
  .font-primary {
283
282
  @include core-mixins-v3.fontPrimary();
284
283
  }
285
-
286
284
  .font-secondary {
287
285
  @include core-mixins-v3.fontSecondary();
288
286
  }
289
-
290
287
  .font-tertiary {
291
288
  @include core-mixins-v3.fontTertiary();
292
289
  }
293
-
294
290
  .font-quaternary {
295
291
  @include core-mixins-v3.fontQuaternary();
296
292
  }
@@ -298,7 +294,6 @@ ol {
298
294
  .h-extra-large {
299
295
  @include core-mixins-v3.h-x-large();
300
296
  }
301
-
302
297
  .h1-sizing,
303
298
  .h-large {
304
299
  @include core-mixins-v3.h-large();
@@ -310,27 +305,22 @@ ol {
310
305
  &-mobile {
311
306
  }
312
307
  }
313
-
314
308
  .h3-sizing,
315
309
  .h-small {
316
310
  @include core-mixins-v3.h-small();
317
311
  }
318
-
319
312
  .h4-sizing,
320
313
  .h-xsmall {
321
314
  @include core-mixins-v3.h-x-small();
322
315
  }
323
-
324
316
  .h5-sizing,
325
317
  .h-xxsmall {
326
318
  @include core-mixins-v3.h-xx-small();
327
319
  }
328
-
329
320
  .h6-sizing,
330
321
  .h-xxxsmall {
331
322
  @include core-mixins-v3.h-xxx-small();
332
323
  }
333
-
334
324
  .sh1-sizing,
335
325
  .sh-extra-large {
336
326
  @include core-mixins-v3.sh-x-large();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "1.0.46",
3
+ "version": "1.0.48",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {