@total_onion/onion-library 1.0.0

package/components/fields-core-cta/core-cta.php

@@ -0,0 +1,240 @@
+<?php
+
+function core_cta()
+{
+    $output = '';
+    if (defined('CTA_STYLES_OPTIONS') && is_array(CTA_STYLES_OPTIONS)) {
+        $options = CTA_STYLES_OPTIONS;
+
+        if ($options && array_key_exists('theme_cta_styles', $options) && is_array($options['theme_cta_styles'])) {
+            $output .= '<style id="core-cta-vars">:root {';
+            foreach ($options['theme_cta_styles'] as $key => $button) {
+                $button_colour = $button['cta_settings']['colour'];
+                $hover_colour = $button['cta_settings']['hover_colour'];
+                $background_colour = $button['cta_settings']['background_colour'];
+                $hover_background_colour = $button['cta_settings']['hover_background_colour'];
+                if (array_key_exists('colour_type', $button['cta_settings'])) {
+
+                    switch (remove_underscore($button['cta_settings']['colour_type'])) {
+                        case 'colour-picker':
+                            $button_colour = $button['cta_settings']['colour'];
+                            break;
+                        case 'post-colour':
+                            $button_colour = 'var(--post-colour)';
+                            break;
+                        case 'post-text-colour-style':
+                            $button_colour = 'var(--post-text-colour-style)';
+                            break;
+                        case 'theme-primary-text-colour':
+                            $button_colour = 'var(--theme-primary-text-colour)';
+                            break;
+                        case 'theme-secondary-text-colour':
+                            $button_colour = 'var(--theme-secondary-text-colour)';
+                            break;
+                        case 'theme-tertiary-text-colour':
+                            $button_colour = 'var(--theme-tertiary-text-colour)';
+                            break;
+                        case 'theme-primary-accent-colour':
+                            $button_colour = 'var(--theme-primary-accent-colour)';
+                            break;
+                        case 'theme-secondary-accent-colour':
+                            $button_colour = 'var(--theme-secondary-accent-colour)';
+                            break;
+                        case 'theme-tertiary-accent-colour':
+                            $button_colour = 'var(--theme-tertiary-accent-colour)';
+                            break;
+                        default:
+                            $button_colour = $button['cta_settings']['colour'];
+                            break;
+                    }
+                };
+
+                if (array_key_exists('hover_colour_type', $button['cta_settings'])) {
+                    switch (remove_underscore($button['cta_settings']['hover_colour_type'])) {
+                        case 'colour-picker':
+                            $hover_colour = $button['cta_settings']['hover_colour'];
+                            break;
+                        case 'post-colour':
+                            $hover_colour = 'var(--post-colour)';
+                            break;
+                        case 'post-text-colour-style':
+                            $hover_colour = 'var(--post-text-colour-style)';
+                            break;
+                        case 'theme-primary-text-colour':
+                            $hover_colour = 'var(--theme-primary-text-colour)';
+                            break;
+                        case 'theme-secondary-text-colour':
+                            $hover_colour = 'var(--theme-secondary-text-colour)';
+                            break;
+                        case 'theme-tertiary-text-colour':
+                            $hover_colour = 'var(--theme-tertiary-text-colour)';
+                            break;
+                        case 'theme-primary-accent-colour':
+                            $hover_colour = 'var(--theme-primary-accent-colour)';
+                            break;
+                        case 'theme-secondary-accent-colour':
+                            $hover_colour = 'var(--theme-secondary-accent-colour)';
+                            break;
+                        case 'theme-tertiary-accent-colour':
+                            $hover_colour = 'var(--theme-tertiary-accent-colour)';
+                            break;
+                        default:
+                            $hover_colour = $button['cta_settings']['hover_colour'];
+                            break;
+                    };
+                };
+                if (array_key_exists('background_colour_type', $button['cta_settings'])) {
+                    switch (remove_underscore($button['cta_settings']['background_colour_type'])) {
+                        case 'colour-picker':
+                            $background_colour = $button['cta_settings']['background_colour'];
+                            break;
+                        case 'post-colour':
+                            $background_colour = 'var(--post-colour)';
+                            break;
+                        case 'post-text-colour-style':
+                            $background_colour = 'var(--post-text-colour-style)';
+                            break;
+                        case 'theme-primary-background-colour':
+                            $background_colour = 'var(--theme-primary-background-colour)';
+                            break;
+                        case 'theme-secondary-background-colour':
+                            $background_colour = 'var(--theme-secondary-background-colour)';
+                            break;
+                        case 'theme-tertiary-background-colour':
+                            $background_colour = 'var(--theme-tertiary-background-colour)';
+                            break;
+                        case 'theme-primary-accent-colour':
+                            $background_colour = 'var(--theme-primary-accent-colour)';
+                            break;
+                        case 'theme-secondary-accent-colour':
+                            $background_colour = 'var(--theme-secondary-accent-colour)';
+                            break;
+                        case 'theme-tertiary-accent-colour':
+                            $background_colour = 'var(--theme-tertiary-accent-colour)';
+                            break;
+                        default:
+                            $background_colour = $button['cta_settings']['background_colour'];
+                            break;
+                    };
+                };
+                if (array_key_exists('hover_background_colour_type', $button['cta_settings'])) {
+                    switch (remove_underscore($button['cta_settings']['hover_background_colour_type'])) {
+                        case 'colour-picker':
+                            $hover_background_colour = $button['cta_settings']['hover_background_colour'];
+                            break;
+                        case 'post-colour':
+                            $hover_background_colour = 'var(--post-colour)';
+                            break;
+                        case 'post-text-colour-style':
+                            $hover_background_colour = 'var(--post-text-colour-style)';
+                            break;
+                        case 'theme-primary-background-colour':
+                            $hover_background_colour = 'var(--theme-primary-text-colour)';
+                            break;
+                        case 'theme-secondary-background-colour':
+                            $hover_background_colour = 'var(--theme-secondary-background-colour)';
+                            break;
+                        case 'theme-secondary-background-colour':
+                            $hover_background_colour = 'var(--theme-secondary-background-colour)';
+                            break;
+                        case 'theme-primary-accent-colour':
+                            $hover_background_colour = 'var(--theme-primary-accent-colour)';
+                            break;
+                        case 'theme-secondary-accent-colour':
+                            $hover_background_colour = 'var(--theme-secondary-accent-colour)';
+                            break;
+                        case 'theme-secondary-accent-colour':
+                            $hover_background_colour = 'var(--theme-secondary-accent-colour)';
+                            break;
+                        default:
+                            $hover_background_colour = $button['cta_settings']['hover_background_colour'];
+                            break;
+                    };
+                };
+
+
+                $output .=
+                    '--cta-style-' . ($key + 1) . '-colour:' . $button_colour . ';
+                        --cta-style-' . ($key + 1) . '-background-colour:' . $background_colour . ';
+                        --cta-style-' . ($key + 1) . '-border-colour:' . $button['cta_settings']['border_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-mobile-colour:' . ($button['cta_settings']['enable_mobile_style'] ? $button['cta_settings']['mobile_colour'] : $button_colour) . ';
+                        --cta-style-' . ($key + 1) . '-mobile-background-colour:' . ($button['cta_settings']['enable_mobile_style'] ? $button['cta_settings']['mobile_background_colour'] : $background_colour) . ';
+                        --cta-style-' . ($key + 1) . '-mobile-border-colour:' . ($button['cta_settings']['enable_mobile_style'] ? $button['cta_settings']['mobile_border_colour'] : $button['cta_settings']['border_colour']) . ';
+                        --cta-style-' . ($key + 1) . '-hover-colour:' . $hover_colour . ';
+                        --cta-style-' . ($key + 1) . '-hover-background-colour:' . $hover_background_colour . ';
+                        --cta-style-' . ($key + 1) . '-hover-border-colour:' . $button['cta_settings']['hover_border_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-mobile-hover-colour:' . ($button['cta_settings']['enable_mobile_style'] ? $button['cta_settings']['mobile_hover_colour'] : $hover_colour) . ';
+                        --cta-style-' . ($key + 1) . '-mobile-hover-background-colour:' . ($button['cta_settings']['enable_mobile_style'] ? $button['cta_settings']['mobile_hover_background_colour'] : $hover_background_colour) . ';
+                        --cta-style-' . ($key + 1) . '-mobile-hover-border-colour:' . ($button['cta_settings']['enable_mobile_style'] ? $button['cta_settings']['mobile_hover_border_colour'] : $button['cta_settings']['hover_border_colour']) . ';
+                        --cta-style-' . ($key + 1) . '-active-colour:' . $button['cta_settings']['active_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-active-background-colour:' . $button['cta_settings']['active_background_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-active-border-colour:' . $button['cta_settings']['active_border_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-focus-colour:' . $button['cta_settings']['focus_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-focus-background-colour:' . $button['cta_settings']['focus_background_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-focus-border-colour:' . $button['cta_settings']['focus_border_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-inactive-colour:' . $button['cta_settings']['inactive_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-inactive-background-colour:' . $button['cta_settings']['inactive_background_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-inactive-border-colour:' . $button['cta_settings']['inactive_border_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-selected-colour:' . $button['cta_settings']['selected_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-selected-background-colour:' . $button['cta_settings']['selected_background_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-selected-border-colour:' . $button['cta_settings']['selected_border_colour'] . ';
+                        --cta-style-' . ($key + 1) . '-min-width-desktop:' . $button['cta_settings']['min_width_desktop'] . ';
+                        --cta-style-' . ($key + 1) . '-min-width-landscape:' . $button['cta_settings']['min_width_landscape'] . ';
+                        --cta-style-' . ($key + 1) . '-min-width-portrait:' . $button['cta_settings']['min_width_portrait'] . ';
+                        --cta-style-' . ($key + 1) . '-min-width-mobile:' . $button['cta_settings']['min_width_mobile'] . ';
+                        --cta-style-' . ($key + 1) . '-font-size-desktop:' . $button['cta_settings']['font_size_desktop'] . ';
+                        --cta-style-' . ($key + 1) . '-font-size-landscape:' . $button['cta_settings']['font_size_landscape'] . ';
+                        --cta-style-' . ($key + 1) . '-font-size-portrait:' . $button['cta_settings']['font_size_portrait'] . ';
+                        --cta-style-' . ($key + 1) . '-font-size-mobile:' . $button['cta_settings']['font_size_mobile'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-inline-desktop:' . $button['cta_settings']['padding_inline_desktop'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-inline-landscape:' . $button['cta_settings']['padding_inline_landscape'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-inline-portrait:' . $button['cta_settings']['padding_inline_portrait'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-inline-mobile:' . $button['cta_settings']['padding_inline_mobile'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-block-desktop:' . $button['cta_settings']['padding_block_desktop'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-block-landscape:' . $button['cta_settings']['padding_block_landscape'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-block-portrait:' . $button['cta_settings']['padding_block_portrait'] . ';
+                        --cta-style-' . ($key + 1) . '-padding-block-mobile:' . $button['cta_settings']['padding_block_mobile'] . ';
+                        --cta-style-' . ($key + 1) . '-border-radius:' . $button['cta_settings']['border_radius'] . ';
+                        --cta-style-' . ($key + 1) . '-border-width:' . $button['cta_settings']['border_width'] . 'px;
+                        --cta-style-' . ($key + 1) . '-font-weight:' . $button['cta_settings']['font_weight'] . ';
+                        --cta-style-' . ($key + 1) . '-letter-spacing:' . $button['cta_settings']['letter_spacing'] . 'em;
+                        --cta-style-' . ($key + 1) . '-line-height:' . $button['cta_settings']['line_height'] . '%;
+                        --cta-style-' . ($key + 1) . '-font-family:' . remove_underscore($button['cta_settings']['font_family']) . ';
+                        --cta-style-' . ($key + 1) . '-text-transform:' . remove_underscore($button['cta_settings']['text_transform']) . ';
+                        --cta-style-' . ($key + 1) . '-font-style:' . remove_underscore($button['cta_settings']['font_style']) . ';
+                        --cta-style-' . ($key + 1) . '-text-align:' . remove_underscore($button['cta_settings']['text_alignment']) . ';
+                        --cta-style-' . ($key + 1) . '-content-vertical-alignment:' . remove_underscore($button['cta_settings']['content_vertical_alignment'] ?? 'center') . ';
+                        --cta-style-' . ($key + 1) . '-decoration-style:' . remove_underscore($button['cta_settings']['cta_decoration_style']) . ';
+                        --cta-style-' . ($key + 1) . '-decoration-colour:' . remove_underscore($button['cta_settings']['cta_decoration_colour']) . ';
+                        --cta-style-' . ($key + 1) . '-decoration-style-hover:' . remove_underscore($button['cta_settings']['cta_decoration_style_hover']) . ';
+                        --cta-style-' . ($key + 1) . '-decoration-colour-hover:' . remove_underscore($button['cta_settings']['cta_decoration_style_hover']) . ';';
+                if (array_key_exists('cta_enable_shadow', $button['cta_settings']) && $button['cta_settings']['cta_enable_shadow'] == true) {
+                    $output .=
+                        '--cta-style-' . ($key + 1) . '-shadow-offset-x:' . $button['cta_settings']['cta_shadow_offset_x'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-offset-y:' . $button['cta_settings']['cta_shadow_offset_y'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-blur:' . $button['cta_settings']['cta_shadow_blur_radius'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-colour:' . $button['cta_settings']['cta_shadow_colour'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-radius:' . $button['cta_settings']['cta_shadow_spread_radius'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-position:' . ($button['cta_settings']['box_shadow_position'] ? 'inset' : '') . ';';
+                }
+                if (array_key_exists('cta_enable_hover_shadow', $button['cta_settings']) && $button['cta_settings']['cta_enable_hover_shadow'] == true) {
+                    $output .=
+                        '--cta-style-' . ($key + 1) . '-shadow-offset-hover-x:' . $button['cta_settings']['cta_shadow_offset_hover_x'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-offset-hover-y:' . $button['cta_settings']['cta_shadow_offset_hover_y'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-hover-blur:' . $button['cta_settings']['cta_shadow_hover_blur_radius'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-hover-colour:' . $button['cta_settings']['cta_shadow_hover_colour'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-hover-radius:' . $button['cta_settings']['cta_shadow_hover_spread_radius'] . ';
+                            --cta-style-' . ($key + 1) . '-shadow-hover-position:' . ($button['cta_settings']['box_shadow_hover_position'] ? 'inset' : '') . ';';
+                }
+                if (array_key_exists('enable_image_background', $button['cta_settings']) && $button['cta_settings']['enable_image_background'] == true) {
+                    $output .=
+                        '--cta-style' . ($key + 1) . '-image-background:' . 'url(' . $button['cta_settings']['image_background']['url'] . ')' . ';
+                    --cta-style' . ($key + 1) . '-image-background-size:' . remove_underscore($button['cta_settings']['image_background_size']) . ';
+                    --cta-style' . ($key + 1) . '-image-background-repeat:' . remove_underscore($button['cta_settings']['image_background_repeat']) . ';';
+                }
+            }
+            $output .= '}</style>';
+        }
+    }
+    return [$output];
+}

package/components/fields-core-cta/core-cta.scss

@@ -0,0 +1,280 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/theme/breakpoints';
+
+@mixin ctaButtonStyles() {
+	[class*='cmpl-cta-style-'] {
+		border: unset;
+		line-height: 100%;
+		position: relative;
+		display: flex;
+		gap: 1em;
+		justify-content: center;
+		align-items: center;
+		text-decoration-line: unset;
+		text-align: center;
+		transition:
+			background-color 0.1s,
+			border-colour 0.1s;
+
+		&:hover,
+		&:active,
+		&:focus {
+			cursor: pointer;
+		}
+
+		&[disabled] {
+			cursor: not-allowed;
+		}
+		margin-bottom: 0;
+		overflow: hidden;
+	}
+
+	.cmpl-cta-span {
+		width: 100%;
+	}
+
+	.cmpl-cta-icon {
+		width: 1em;
+	}
+
+	@for $i from 1 through 20 {
+		.cmpl-cta-style-#{$i} {
+			justify-self: var(--cta-alignment);
+			justify-content: var(
+				--cta-style-#{$i}-content-vertical-alignment,
+				center
+			);
+			background-image: var(--cta-style#{$i}-image-background);
+			background-size: var(--cta-style#{$i}-image-background-size);
+			background-repeat: var(--cta-style#{$i}-image-background-repeat);
+			background-color: var(--cta-style-#{$i}-mobile-background-colour);
+			color: var(--cta-style-#{$i}-mobile-colour);
+			svg * {
+				fill: currentColor;
+				stroke: currentColor;
+			}
+			border: var(--cta-style-#{$i}-border-width)
+				solid
+				var(--cta-style-#{$i}-mobile-border-colour);
+			border-radius: var(--cta-style-#{$i}-border-radius);
+			font-weight: var(--cta-style-#{$i}-font-weight);
+			letter-spacing: var(--cta-style-#{$i}-letter-spacing);
+			line-height: var(--cta-style-#{$i}-line-height);
+			font-family: var(--cta-style-#{$i}-font-family);
+			text-transform: var(--cta-style-#{$i}-text-transform);
+			font-style: var(--cta-style-#{$i}-font-style);
+			text-align: var(--cta-style-#{$i}-text-align);
+			text-decoration: var(--cta-style-#{$i}-decoration-style);
+			text-decoration-color: var(--cta-style-#{$i}-decoration-colour);
+
+			font-size: clamp(
+				var(--cta-style-font-size-min-mobile, 10px),
+				core-functions.fontSize(
+					var(--cta-style-#{$i}-font-size-mobile),
+					'mobile'
+				),
+				var(--cta-style-font-size-max-mobile, 180px)
+			);
+
+			min-width: var(--cta-style-#{$i}-min-width-mobile);
+			padding: core-functions.fluidSize(
+					var(--cta-style-#{$i}-padding-block-mobile),
+					'mobile'
+				)
+				core-functions.fluidSize(
+					var(--cta-style-#{$i}-padding-inline-mobile),
+					'mobile'
+				);
+
+			@include core-mixins.device(breakpoints.$tabPortrait) {
+				font-size: clamp(
+					var(--cta-style-font-size-min-mobile, 10px),
+					core-functions.fontSize(
+						var(--cta-style-#{$i}-font-size-portrait),
+						'portrait'
+					),
+					var(--cta-style-font-size-max-mobile, 180px)
+				);
+				min-width: var(--cta-style-#{$i}-min-width-portrait);
+				padding: core-functions.fluidSize(
+						var(--cta-style-#{$i}-padding-block-portrait),
+						'portrait'
+					)
+					core-functions.fluidSize(
+						var(--cta-style-#{$i}-padding-inline-portrait),
+						'portrait'
+					);
+				background-color: var(--cta-style-#{$i}-background-colour);
+				border: var(--cta-style-#{$i}-border-width) solid
+					var(--cta-style-#{$i}-border-colour);
+				color: var(--cta-style-#{$i}-colour);
+				svg * {
+					fill: currentColor;
+					stroke: currentColor;
+				}
+			}
+
+			@include core-mixins.device(breakpoints.$tabLandscape) {
+				font-size: clamp(
+					var(--cta-style-font-size-min-desktop, 10px),
+					core-functions.fontSize(
+						var(--cta-style-#{$i}-font-size-landscape),
+						'landscape'
+					),
+					var(--cta-style-font-size-max-desktop, 180px)
+				);
+				min-width: var(--cta-style-#{$i}-min-width-landscape);
+				padding: core-functions.fluidSize(
+						var(--cta-style-#{$i}-padding-block-landscape),
+						'landscape'
+					)
+					core-functions.fluidSize(
+						var(--cta-style-#{$i}-padding-inline-landscape),
+						'landscape'
+					);
+			}
+
+			@include core-mixins.device(breakpoints.$desktop) {
+				font-size: clamp(
+					var(--cta-style-font-size-min-desktop, 10px),
+					core-functions.fontSize(
+						var(--cta-style-#{$i}-font-size-desktop),
+						'desktop'
+					),
+					var(--cta-style-font-size-max-desktop, 180px)
+				);
+				min-width: var(--cta-style-#{$i}-min-width-desktop);
+				padding: core-functions.fluidSize(
+						var(--cta-style-#{$i}-padding-block-desktop),
+						'desktop'
+					)
+					core-functions.fluidSize(
+						var(--cta-style-#{$i}-padding-inline-desktop),
+						'desktop'
+					);
+			}
+
+			// this makes hover effect available only on desktops, avoiding the hover effect to stuck on mobile after click
+			@media (hover: hover) {
+				&:hover {
+					text-decoration: var(
+						--cta-style-#{$i}-decoration-style-hover
+					);
+					text-decoration-color: var(
+						--cta-style-#{$i}-decoration-colour-hover
+					);
+					border: var(--cta-style-#{$i}-border-width) solid
+						var(--cta-style-#{$i}-mobile-hover-border-colour);
+					background-color: var(
+						--cta-style-#{$i}-mobile-hover-background-colour
+					);
+					color: var(--cta-style-#{$i}-mobile-hover-colour);
+					svg * {
+						fill: currentColor;
+						stroke: currentColor;
+					}
+
+					// for touch devices fix hover state
+					@media (hover: none) {
+						background-color: var(
+							--cta-style-#{$i}-mobile-background-colour
+						);
+					}
+
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						background-color: var(
+							--cta-style-#{$i}-hover-background-colour
+						);
+						border: var(--cta-style-#{$i}-border-width) solid
+							var(--cta-style-#{$i}-hover-border-colour);
+						color: var(--cta-style-#{$i}-hover-colour);
+						svg * {
+							fill: currentColor;
+							stroke: currentColor;
+						}
+					}
+				}
+			}
+
+			&:active {
+				color: var(--cta-style-#{$i}-active-colour);
+				background-color: var(
+					--cta-style-#{$i}-active-background-colour
+				);
+				border: var(--cta-style-#{$i}-border-width)
+					solid
+					var(--cta-style-#{$i}-active-border-colour);
+			}
+
+			// &:focus {
+			// 	color: var(--cta-style-#{$i}-focus-colour);
+			// 	background-color: var(--cta-style-#{$i}-focus-background-colour);
+			// 	border: var(--cta-style-#{$i}-border-width) solid var(--cta-style-#{$i}-focus-border-colour);
+			// }
+
+			&--inactive,
+			&.cta-style-inactive,
+			&[disabled] {
+				color: var(--cta-style-#{$i}-inactive-colour);
+				background-color: var(
+					--cta-style-#{$i}-inactive-background-colour
+				);
+				border: var(--cta-style-#{$i}-border-width)
+					solid
+					var(--cta-style-#{$i}-inactive-border-colour);
+			}
+
+			&--selected,
+			&.cta-style-selected {
+				color: var(--cta-style-#{$i}-selected-colour);
+				background-color: var(
+					--cta-style-#{$i}-selected-background-colour
+				);
+				border: var(--cta-style-#{$i}-border-width)
+					solid
+					var(--cta-style-#{$i}-selected-border-colour);
+			}
+
+			// shadow
+			--box-shadow-offset-x: var(--cta-style-#{$i}-shadow-offset-x, 0);
+			--box-shadow-offset-y: var(--cta-style-#{$i}-shadow-offset-y, 0);
+			--box-shadow-blur: var(--cta-style-#{$i}-shadow-blur, 0);
+			--box-shadow-spread: var(--cta-style-#{$i}-shado-radius, 0);
+			--box-shadow-colour: var(--cta-style-#{$i}-shadow-colour, 0);
+			--box-shadow-position: var(--cta-style-#{$i}-shadow-position, 0);
+
+			// hover shadow
+			--box-shadow-hover-offset-x: var(
+				--cta-style-#{$i}-shadow-offset-hover-x,
+				0
+			);
+			--box-shadow-hover-offset-y: var(
+				--cta-style-#{$i}-shadow-offset-hover-y,
+				0
+			);
+			--box-shadow-hover-blur: var(
+				--cta-style-#{$i}-shadow-hover-blur,
+				0
+			);
+			--box-shadow-hover-spread: var(
+				--cta-style-#{$i}-shadow-hover-radius,
+				0
+			);
+			--box-shadow-hover-colour: var(
+				--cta-style-#{$i}-shadow-hover-colour,
+				0
+			);
+			--box-shadow-hover-position: var(
+				--cta-style-#{$i}-shadow-hover-position,
+				0
+			);
+			@include core-mixins.boxShadow();
+		}
+	}
+}
+
+@mixin core-cta() {
+	@include ctaButtonStyles();
+}

package/components/fields-core-design-settings/core-design-settings.twig

@@ -0,0 +1,6 @@
+{{function('core_critical_css').0}}
+{{function('core_design_system').0}}
+{{function('core_typography').0}}
+{{function('core_font_modifiers').0}}
+{{function('core_themes').0}}
+{{function('core_cta').0}}

package/components/fields-core-design-system/core-design-system.php

@@ -0,0 +1,44 @@
+<?php
+// @codingStandardsIgnoreStart
+function core_design_system()
+{
+    $output = '';
+    $current_post = [];
+    if (isset($GLOBALS['post'])) {
+        $current_post = Timber::get_post($GLOBALS['post']->ID);
+    }
+    if (defined('GLOBAL_SETTINGS') && is_array(GLOBAL_SETTINGS)) {
+        $options = GLOBAL_SETTINGS;
+        if ($options) {
+            $output = '
+            <style id="core-design-system">
+            :root { 
+                --mobile-inline:' . ($options['mobile_inline'] ?? 0) . '; 
+                --portrait-inline:' . ($options['portrait_inline'] ?? 0) . '; 
+                --landscape-inline:' . ($options['landscape_inline'] ?? 0) . '; 
+                --desktop-inline:' . ($options['desktop_inline'] ?? 0) . '; 
+                --screen-width-fullhd:' . ($options['screen_width_full_hd'] ?? 1920) . ';
+                --font-reference-fullhd:' . ($options['font_reference_full_hd'] ?? 1920) . ';
+                --screen-width-desktop:' . ($options['screen_width_desktop'] ?? 1440) . ';
+                --font-reference-desktop:' . ($options['font_reference_desktop'] ?? 1440) . ';
+                --screen-width-landscape:' . ($options['screen_width_landscape'] ?? 1024) . ';
+                --font-reference-landscape:' . ($options['font_reference_landscape'] ?? 1024) . ';
+                --screen-width-portrait:' . ($options['screen_width_portrait'] ?? 768) . ';
+                --font-reference-portrait:' . ($options['font_reference_portrait'] ?? 768) . ';
+                --font-reference-mobile:' . ($options['font_reference_mobile'] ?? 375) . ';
+                --screen-width-mobile:' . ($options['screen_width_mobile'] ?? 375) . ';
+                --screen-width-static:' . ($options['desktop_design_reference'] ?? 1920) . 'px;
+                --fullhd-design-reference:' . ($options['full_hd_design_reference'] ?? 1920) . ';
+                --desktop-design-reference:' . ($options['desktop_design_reference'] ?? 1440) . ';
+                --landscape-design-reference:' . ($options['landscape_design_reference'] ?? 1024) . ';
+                --portrait-design-reference:' . ($options['portrait_design_reference'] ?? 1024) . ';
+                --mobile-design-reference:' . ($options['mobile_design_reference'] ?? 1024) . ';
+                --global-content-max-width-setting:' . ($options['global_content_max_width_setting'] ?? 1024) . ';
+                --post-colour:' . ($current_post && (property_exists($current_post, 'meta') && isset($current_post->meta['post_colour'])) ? $current_post->meta['post_colour'] : '') . ';
+                --post-text-colour-style:' .  ($current_post && (property_exists($current_post, 'meta') && isset($current_post->meta['post_text_colour_style'])) ? remove_underscore($current_post->meta['post_text_colour_style']) : '') . ';
+                }</style>';
+        }
+    }
+    return [$output];
+} // END function core_design_vars
+// @codingStandardsIgnoreEnd

package/components/fields-core-editor-cta-style-select/core-editor-cta-style-select.js

@@ -0,0 +1,16 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+export default function coreEditorCtaStyleSelect(selectNames) {
+	if (typeof acf != 'undefined') {
+		acf.addAction(
+			'select2_init',
+			function ($select, args, settings, field) {
+				if (selectNames.find((name) => name === field.data.name)) {
+					const selected = $select.find(':selected').val()
+						? $select.find(':selected').val().replace('__', '')
+						: null;
+					$select.val(selected);
+				}
+			}
+		);
+	}
+}

package/components/fields-core-editor-cta-style-select/core-editor-cta-style-select.php

@@ -0,0 +1,18 @@
+<?php
+
+add_filter('acf/load_field/name=cta_style', 'get_cta_style_data');
+
+function get_cta_style_data($field)
+{
+	$field['choices'] = array();
+	$count = 1;
+	$choices = CTA_STYLES_OPTIONS['theme_cta_styles'];
+	if (is_array($choices)) {
+		foreach ($choices as $choice) {
+			$field['choices'][$count] = $choice[array_key_first($choice)];
+			$count++;
+		}
+	}
+
+	return $field;
+}

package/components/fields-core-editor-theme-select/core-editor-theme-select.js

@@ -0,0 +1,16 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+export default function coreEditorThemeSelect(selectNames) {
+	if (typeof acf != 'undefined') {
+		acf.addAction(
+			'select2_init',
+			function ($select, args, settings, field) {
+				if (selectNames.find((name) => name === field.data.name)) {
+					const selected = $select.find(':selected').val()
+						? $select.find(':selected').val().replace('__', '')
+						: null;
+					$select.val(selected);
+				}
+			}
+		);
+	}
+}

package/components/fields-core-editor-theme-select/core-editor-theme-select.php

@@ -0,0 +1,19 @@
+<?php
+
+add_filter('acf/load_field/name=page_theme', 'get_theme_name_data');
+
+function get_theme_name_data($field)
+{
+	$field['choices'] = array();
+	$count = 1;
+	$choices = THEMES_OPTIONS['themes'];
+
+	if (is_array($choices)) {
+		foreach ($choices as $choice) {
+			$field['choices'][$count] = $choice[array_key_first($choice)];
+			$count++;
+		}
+	}
+
+	return $field;
+}