@total_onion/onion-library 1.0.87 → 1.0.89

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/components/fields-core-critical-v3/core-critical-v3.scss +9 -2
  2. package/components/fields-core-css-modules-v3/core-css-modules-v3.scss +7 -6
  3. package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss +78 -77
  4. package/components/fields-core-design-system-v3/core-design-system-v3.php +2 -2
  5. package/components/fields-core-generic-v3/core-generic-v3.scss +119 -118
  6. package/components/fields-core-mixins-v3/core-mixins-v3.scss +0 -989
  7. package/components/fields-core-root-variables-v3/core-root-variables-v3.scss +40 -39
  8. package/components/fields-core-typography-v3/core-typography-v3.php +2 -2
  9. package/components/fields-core-typography-v3/core-typography-v3.scss +1 -1
  10. package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.scss +4 -7
  11. package/package.json +1 -1
package/components/fields-core-critical-v3/core-critical-v3.scss CHANGED
@@ -2,6 +2,13 @@
2
2
  @use 'Assets/scss/modules/library-modules/core-root-variables-v3/core-root-variables-v3';
3
3
  @use 'Assets/scss/modules/library-modules/core-css-sizing-vars-v3/core-css-sizing-vars-v3';
4
4
  @use 'Assets/scss/modules/library-modules/core-typography-v3/core-typography-v3';
5
- @use 'Assets/scss/modules/library-modules/core-generic-v3/core-generic-v3';
6
5
  @use 'Assets/scss/modules/library-modules/core-css-modules-v3/core-css-modules-v3';
7
- @include core-typography-v3.core-typography-v3();
6
+ @use 'Assets/scss/modules/library-modules/core-generic-v3/core-generic-v3';
7
+
8
+ @mixin coreCriticalV3() {
9
+ @include core-root-variables-v3.coreRootVariablesV3();
10
+ @include core-css-sizing-vars-v3.coreCssSizingVarsV3();
11
+ @include core-typography-v3.coreTypographyV3();
12
+ @include core-css-modules-v3.coreCssModulesV3();
13
+ @include core-generic-v3.coreGenericV3();
14
+ }
package/components/fields-core-css-modules-v3/core-css-modules-v3.scss CHANGED
@@ -4,9 +4,10 @@
4
4
  @use 'Assets/scss/modules/library-modules/block-settings/block-settings';
5
5
  @use 'Assets/scss/modules/library-modules/social-networks/social-networks';
6
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();
7
+ @mixin coreCssModulesV3() {
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();
13
+ }
package/components/fields-core-css-sizing-vars-v3/core-css-sizing-vars-v3.scss CHANGED
@@ -2,96 +2,97 @@
2
2
  @use 'Assets/scss/theme/breakpoints';
3
3
  @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
4
4
  @use 'Assets/scss/modules/library-modules/core-functions-v3/core-functions-v3';
5
-
6
- body {
7
- --screen-width: var(--screen-width-mobile);
8
- --font-reference: var(--font-reference-mobile);
9
- --design-reference: var(--mobile-design-reference);
10
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
11
- --screen-width: var(--screen-width-portrait);
12
- --font-reference: var(--font-reference-portrait);
13
- --design-reference: var(--portrait-design-reference);
14
- }
15
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
16
- --screen-width: var(--screen-width-landscape);
17
- --font-reference: var(--font-reference-landscape);
18
- --design-reference: var(--landscape-design-reference);
19
- }
20
- @include core-mixins-v3.device(breakpoints.$desktop) {
21
- --screen-width: var(--screen-width-desktop);
22
- --font-reference: var(--font-reference-desktop);
23
- --design-reference: var(--desktop-design-reference);
5
+ @mixin coreCssSizingVarsV3() {
6
+ body {
7
+ --screen-width: var(--screen-width-mobile);
8
+ --font-reference: var(--font-reference-mobile);
9
+ --design-reference: var(--mobile-design-reference);
10
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
11
+ --screen-width: var(--screen-width-portrait);
12
+ --font-reference: var(--font-reference-portrait);
13
+ --design-reference: var(--portrait-design-reference);
14
+ }
15
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
16
+ --screen-width: var(--screen-width-landscape);
17
+ --font-reference: var(--font-reference-landscape);
18
+ --design-reference: var(--landscape-design-reference);
19
+ }
20
+ @include core-mixins-v3.device(breakpoints.$desktop) {
21
+ --screen-width: var(--screen-width-desktop);
22
+ --font-reference: var(--font-reference-desktop);
23
+ --design-reference: var(--desktop-design-reference);
24
+ }
25
+ @include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
26
+ --screen-width: var(--screen-width-fullhd);
27
+ --font-reference: var(--font-reference-fullhd);
28
+ --design-reference: var(--fullhd-design-reference);
29
+ }
24
30
  }
25
- @include core-mixins-v3.device(breakpoints.$desktop-fullhd) {
26
- --screen-width: var(--screen-width-fullhd);
27
- --font-reference: var(--font-reference-fullhd);
28
- --design-reference: var(--fullhd-design-reference);
29
- }
30
- }
31
- body {
32
- --global-inline-spacing: #{core-functions-v3.fluidSize(
33
- var(--mobile-inline),
34
- 'mobile'
35
- )};
36
-
37
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
31
+ body {
38
32
  --global-inline-spacing: #{core-functions-v3.fluidSize(
39
- var(--portrait-inline),
40
- 'portrait'
33
+ var(--mobile-inline),
34
+ 'mobile'
41
35
  )};
42
- }
43
36
 
44
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
45
- --global-inline-spacing: #{core-functions-v3.fluidSize(
46
- var(--landscape-inline),
47
- 'landscape'
48
- )};
49
- }
37
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
38
+ --global-inline-spacing: #{core-functions-v3.fluidSize(
39
+ var(--portrait-inline),
40
+ 'portrait'
41
+ )};
42
+ }
50
43
 
51
- @include core-mixins-v3.device(breakpoints.$desktop) {
52
- --global-inline-spacing: #{core-functions-v3.fluidSize(
53
- var(--desktop-inline),
54
- 'desktop'
55
- )};
44
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
45
+ --global-inline-spacing: #{core-functions-v3.fluidSize(
46
+ var(--landscape-inline),
47
+ 'landscape'
48
+ )};
49
+ }
50
+
51
+ @include core-mixins-v3.device(breakpoints.$desktop) {
52
+ --global-inline-spacing: #{core-functions-v3.fluidSize(
53
+ var(--desktop-inline),
54
+ 'desktop'
55
+ )};
56
+ }
56
57
  }
57
- }
58
58
 
59
- body {
60
- --heading-block-spacing: var(--heading-block-spacing-mobile);
59
+ body {
60
+ --heading-block-spacing: var(--heading-block-spacing-mobile);
61
61
 
62
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
63
- --heading-block-spacing: var(--heading-block-spacing-portrait);
64
- }
62
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
63
+ --heading-block-spacing: var(--heading-block-spacing-portrait);
64
+ }
65
65
 
66
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
67
- --heading-block-spacing: var(--heading-block-spacing-desktop);
66
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
67
+ --heading-block-spacing: var(--heading-block-spacing-desktop);
68
+ }
68
69
  }
69
- }
70
- body {
71
- --paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
70
+ body {
71
+ --paragraph-block-spacing: var(--paragraph-block-spacing-mobile);
72
72
 
73
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
74
- --paragraph-block-spacing: var(--paragraph-block-spacing-portrait);
75
- }
73
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
74
+ --paragraph-block-spacing: var(--paragraph-block-spacing-portrait);
75
+ }
76
76
 
77
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
78
- --paragraph-block-spacing: var(--paragraph-block-spacing-desktop);
77
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
78
+ --paragraph-block-spacing: var(--paragraph-block-spacing-desktop);
79
+ }
79
80
  }
80
- }
81
- body {
82
- --list-item-block-spacing: var(--list-item-block-spacing-mobile);
81
+ body {
82
+ --list-item-block-spacing: var(--list-item-block-spacing-mobile);
83
83
 
84
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
85
- --list-item-block-spacing: var(--list-item-block-spacing-portrait);
86
- }
84
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
85
+ --list-item-block-spacing: var(--list-item-block-spacing-portrait);
86
+ }
87
87
 
88
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
89
- --list-item-block-spacing: var(--list-item-block-spacing-desktop);
88
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
89
+ --list-item-block-spacing: var(--list-item-block-spacing-desktop);
90
+ }
91
+ }
92
+ body {
93
+ --global-content-max-width: #{core-functions-v3.fluidSize(
94
+ var(--global-content-max-width-setting),
95
+ 'static'
96
+ )};
90
97
  }
91
- }
92
- body {
93
- --global-content-max-width: #{core-functions-v3.fluidSize(
94
- var(--global-content-max-width-setting),
95
- 'static'
96
- )};
97
- }
98
+ } // End of mixin
package/components/fields-core-design-system-v3/core-design-system-v3.php CHANGED
@@ -11,8 +11,8 @@ function core_design_system_v3()
11
11
  $options = GLOBAL_SETTINGS;
12
12
  if ($options) {
13
13
  $output = '
14
- <style id="core-design-system">
15
- :root {
14
+ <style id="core-design-system-v3">
15
+ body {
16
16
  --mobile-inline:' . ($options['mobile_inline'] ?? 0) . ';
17
17
  --portrait-inline:' . ($options['portrait_inline'] ?? 0) . ';
18
18
  --landscape-inline:' . ($options['landscape_inline'] ?? 0) . ';
package/components/fields-core-generic-v3/core-generic-v3.scss CHANGED
@@ -1,140 +1,141 @@
1
- // LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
2
- @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
3
- @use 'Assets/scss/modules/library-modules/core-cta/core-cta';
1
+ @use 'Assets/scss/modules/library-modules/core-mixins-v3/core-mixins-v3';
2
+ @use 'Assets/scss/modules/library-modules/core-typography-mixins-v3/core-typography-mixins-v3';
4
3
  @use 'Assets/scss/theme/breakpoints';
5
4
 
6
- /* Box sizing rules */
7
- *,
8
- *::before,
9
- *::after {
10
- box-sizing: border-box;
11
- }
12
-
13
- html {
14
- min-height: 100%;
15
- container-type: inline-size;
16
- &.lock-position {
17
- @include core-mixins.lockPosition();
5
+ @mixin coreGenericV3() {
6
+ /* Box sizing rules */
7
+ *,
8
+ *::before,
9
+ *::after {
10
+ box-sizing: border-box;
18
11
  }
19
- }
20
-
21
- .lazy-fade {
22
- opacity: 0;
23
- }
24
- .loaded:not(.cmpl-block-animations) {
25
- opacity: 1;
26
- }
27
12
 
28
- .js-enabled-hide {
29
- display: none;
30
- }
31
-
32
- body {
33
- display: flex;
34
- flex-direction: column;
35
- scroll-behavior: smooth;
36
- text-rendering: optimizeSpeed;
37
- margin: 0; //reset default margin
38
- padding: 0; //reset default padding
39
- height: auto;
40
- min-height: 100vh;
41
- position: relative;
42
- @include core-mixins.fontSecondary();
43
- background: var(--body-background-colour);
44
- --default-text-colour-mobile: var(--theme-primary-text-colour);
45
- color: var(--default-text-colour-mobile);
46
-
47
- @include core-mixins.device(breakpoints.$tabLandscape) {
48
- --default-text-colour-desktop: var(--theme-primary-text-colour);
49
- color: var(--default-text-colour-desktop);
50
- }
51
-
52
- &.lock-position {
53
- @include core-mixins.lockPosition();
54
- }
55
-
56
- &.hide-nav {
57
- .site-header {
58
- display: none;
13
+ html {
14
+ min-height: 100%;
15
+ container-type: inline-size;
16
+ &.lock-position {
17
+ @include core-mixins-v3.lockPosition();
59
18
  }
60
19
  }
61
- }
62
20
 
63
- .body-container-background-image,
64
- .page-container-background-image {
65
- &__picture {
66
- height: 100%;
67
- position: var(--body-background-image-position-type);
68
- inset: 0;
21
+ .lazy-fade {
22
+ opacity: 0;
23
+ }
24
+ .loaded:not(.cmpl-block-animations) {
25
+ opacity: 1;
69
26
  }
70
27
 
71
- &__image {
72
- height: 100%;
73
- object-fit: var(--body-background-image-fit);
74
- object-position: var(--body-background-image-position);
28
+ .js-enabled-hide {
29
+ display: none;
75
30
  }
76
- }
77
31
 
78
- .body-container-background-video {
79
- position: fixed;
80
- object-fit: cover;
81
- inset: 0;
82
- width: 100%;
83
- }
32
+ body {
33
+ display: flex;
34
+ flex-direction: column;
35
+ scroll-behavior: smooth;
36
+ text-rendering: optimizeSpeed;
37
+ margin: 0; //reset default margin
38
+ padding: 0; //reset default padding
39
+ height: auto;
40
+ min-height: 100vh;
41
+ position: relative;
42
+ @include core-typography-mixins-v3.fontSecondary();
43
+ background: var(--body-background-colour);
44
+ --default-text-colour-mobile: var(--theme-primary-text-colour);
45
+ color: var(--default-text-colour-mobile);
46
+
47
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
48
+ --default-text-colour-desktop: var(--theme-primary-text-colour);
49
+ color: var(--default-text-colour-desktop);
50
+ }
84
51
 
85
- img {
86
- width: 100%;
87
- height: auto;
88
- display: block;
89
- }
52
+ &.lock-position {
53
+ @include core-mixins-v3.lockPosition();
54
+ }
90
55
 
91
- main {
92
- height: auto;
93
- width: 100%;
94
- max-width: var(--global-content-max-width-main);
95
- margin-inline: auto;
96
- background-image: var(--main-container-background-image);
97
- background-repeat: repeat;
98
- container-type: inline-size;
99
- }
56
+ &.hide-nav {
57
+ .site-header {
58
+ display: none;
59
+ }
60
+ }
61
+ }
100
62
 
101
- header,
102
- footer,
103
- section {
104
- width: 100%;
105
- max-width: 100%;
106
- }
107
- section[data-assetkey] {
108
- // container-type: inline-size;
109
- }
110
- .site-footer-block {
111
- margin-top: auto;
112
- }
113
- .grecaptcha-badge {
114
- z-index: 50;
115
- bottom: 0 !important;
116
- }
63
+ .body-container-background-image,
64
+ .page-container-background-image {
65
+ &__picture {
66
+ height: 100%;
67
+ position: var(--body-background-image-position-type);
68
+ inset: 0;
69
+ }
70
+
71
+ &__image {
72
+ height: 100%;
73
+ object-fit: var(--body-background-image-fit);
74
+ object-position: var(--body-background-image-position);
75
+ }
76
+ }
77
+
78
+ .body-container-background-video {
79
+ position: fixed;
80
+ object-fit: cover;
81
+ inset: 0;
82
+ width: 100%;
83
+ }
117
84
 
118
- .evidon-consent-button,
119
- .evidon-prefdiag-overlay,
120
- .evidon-banner {
121
- color: var(--black);
122
85
  img {
123
- width: auto;
86
+ width: 100%;
87
+ height: auto;
88
+ display: block;
124
89
  }
125
90
 
126
- a {
127
- text-decoration: underline;
128
- font-size: unset;
91
+ main {
92
+ height: auto;
93
+ width: 100%;
94
+ max-width: var(--global-content-max-width-main);
95
+ margin-inline: auto;
96
+ background-image: var(--main-container-background-image);
97
+ background-repeat: repeat;
98
+ container-type: inline-size;
129
99
  }
130
- }
131
100
 
132
- /* Remove all animations and transitions for people that prefer not to see them */
133
- @media (prefers-reduced-motion: reduce) {
134
- * {
135
- animation-duration: 0.01ms !important;
136
- animation-iteration-count: 1 !important;
137
- transition-duration: 0.01ms !important;
138
- scroll-behavior: auto !important;
101
+ header,
102
+ footer,
103
+ section {
104
+ width: 100%;
105
+ max-width: 100%;
106
+ }
107
+ section[data-assetkey] {
108
+ // container-type: inline-size;
109
+ }
110
+ .site-footer-block {
111
+ margin-top: auto;
112
+ }
113
+ .grecaptcha-badge {
114
+ z-index: 50;
115
+ bottom: 0 !important;
116
+ }
117
+
118
+ .evidon-consent-button,
119
+ .evidon-prefdiag-overlay,
120
+ .evidon-banner {
121
+ color: var(--black);
122
+ img {
123
+ width: auto;
124
+ }
125
+
126
+ a {
127
+ text-decoration: underline;
128
+ font-size: unset;
129
+ }
130
+ }
131
+
132
+ /* Remove all animations and transitions for people that prefer not to see them */
133
+ @media (prefers-reduced-motion: reduce) {
134
+ * {
135
+ animation-duration: 0.01ms !important;
136
+ animation-iteration-count: 1 !important;
137
+ transition-duration: 0.01ms !important;
138
+ scroll-behavior: auto !important;
139
+ }
139
140
  }
140
141
  }