feat: introduce o visual effects (#1877)

* feat: introduce and use o-private-foundation/o-visual-effects * chore: update package-lock.json * chore: move o-visual-effects, replace broken import
Financial-Times · Nov 27, 2024 · 198c976 · 198c976
1 parent 3a2b910
commit 198c976
Show file tree

Hide file tree

Showing 33 changed files with 124 additions and 79 deletions.
diff --git a/components/o-autocomplete/main.scss b/components/o-autocomplete/main.scss
@@ -9,7 +9,7 @@
 @import '@financial-times/o-private-foundation/src/scss/o-normalise/main';
 @import '@financial-times/o-spacing/main';
 @import '@financial-times/o-typography/main';
-@import '@financial-times/o-visual-effects/main';
+@import '@financial-times/o-private-foundation/src/scss/o-visual-effects/main';
 
 @import 'src/scss/variables';
 @import 'src/scss/brand';
@@ -70,7 +70,7 @@
 	}
 
 	.o-autocomplete__menu {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		top: oSpacingByName('s1');
 		background-color: oColorsByName('white');
 		border-top: 0;
@@ -98,7 +98,7 @@
 	}
 
 	.o-autocomplete__menu--overlay {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		box-sizing: border-box;
 	}
 
@@ -165,7 +165,7 @@
 		grid-row: 2;
 	}
 	.o-autocomplete__menu-loading-container {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		display: flex;
 		justify-content: center;
 		align-items: center;

diff --git a/components/o-autocomplete/package.json b/components/o-autocomplete/package.json
@@ -39,8 +39,7 @@
     "@financial-times/o-normalise": "^3.3.0",
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-typography": "^7.4.1",
-    "@financial-times/o-private-foundation": "0.0.0",
-    "@financial-times/o-visual-effects": "^4.0.1"
+    "@financial-times/o-private-foundation": "0.0.0"
   },
   "devDependencies": {
     "@financial-times/o-forms": "^9.9.0",

diff --git a/components/o-banner/main.scss b/components/o-banner/main.scss
@@ -5,7 +5,7 @@
 @import '@financial-times/o-grid/main';
 @import "@financial-times/o-icons/main";
 @import "@financial-times/o-typography/main";
-@import "@financial-times/o-visual-effects/main";
+@import "@financial-times/o-private-foundation/src/scss/o-visual-effects/main";
 
 @import "src/scss/brand";
 @import "src/scss/variables";

diff --git a/components/o-banner/package.json b/components/o-banner/package.json
@@ -31,7 +31,6 @@
     "@financial-times/o-icons": "^7.0.1",
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-typography": "^7.4.1",
-    "@financial-times/o-visual-effects": "^4.0.1",
     "@financial-times/o-private-foundation": "0.0.0"
   },
   "devDependencies": {

diff --git a/components/o-banner/src/scss/_mixins.scss b/components/o-banner/src/scss/_mixins.scss
@@ -41,7 +41,7 @@
 }
 
 @mixin _oBannerOuter {
-	@include oVisualEffectsShadowContent('high');
+	@include oPrivateVisualEffectsShadowContent('high');
 	background: _oBannerGet('background-color');
 	color: _oBannerGet('text-color');
 	border-bottom: $_o-banner-brand-border solid transparent;

diff --git a/components/o-banner/src/scss/layouts/_compact.scss b/components/o-banner/src/scss/layouts/_compact.scss
@@ -27,7 +27,7 @@
 }
 
 @mixin _oBannerCompactInner {
-	@include oVisualEffectsShadowContent('high');
+	@include oPrivateVisualEffectsShadowContent('high');
 	@include oTypographySans($scale: 0);
 	background: _oBannerGet('background-color');
 	display: block;

diff --git a/components/o-banner/src/scss/layouts/_small.scss b/components/o-banner/src/scss/layouts/_small.scss
@@ -27,7 +27,7 @@
 }
 
 @mixin _oBannerSmallInner {
-	@include oVisualEffectsShadowContent('high');
+	@include oPrivateVisualEffectsShadowContent('high');
 	@include oTypographySans($scale: 2);
 	background: _oBannerGet('background-color');
 	display: block;

diff --git a/components/o-cookie-message/main.scss b/components/o-cookie-message/main.scss
@@ -1,7 +1,7 @@
 @import '@financial-times/math';
 @import "@financial-times/o-typography/main";
 @import "@financial-times/o-spacing/main";
-@import "@financial-times/o-visual-effects/main";
+@import "@financial-times/o-private-foundation/src/scss/o-visual-effects/main";
 @import "@financial-times/o-buttons/main";
 
 @import "src/scss/variables";

diff --git a/components/o-cookie-message/package.json b/components/o-cookie-message/package.json
@@ -36,7 +36,7 @@
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-typography": "^7.4.1",
     "@financial-times/o-viewport": "^5.0.0",
-    "@financial-times/o-visual-effects": "^4.0.1"
+    "@financial-times/o-private-foundation": "0.0.0"
   },
   "devDependencies": {
     "@financial-times/o-fonts": "^5.2.0",

diff --git a/components/o-cookie-message/src/scss/_mixins.scss b/components/o-cookie-message/src/scss/_mixins.scss
@@ -42,13 +42,13 @@
 	}
 
 	.o-cookie-message__outer {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		background: oColorsByName('white');
 		color: oColorsByName('black');
 	}
 
 	.o-cookie-message__inner {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		@include oTypographySans($scale: 0);
 		// sass-lint:disable no-vendor-prefixes
 		-webkit-font-smoothing: antialiased;

diff --git a/components/o-header-services/main.scss b/components/o-header-services/main.scss
@@ -5,7 +5,7 @@
 @import '@financial-times/o-icons/main';
 @import '@financial-times/o-grid/main';
 @import '@financial-times/o-typography/main';
-@import '@financial-times/o-visual-effects/main';
+@import '@financial-times/o-private-foundation/src/scss/o-visual-effects/main';
 
 @import 'src/scss/brand';
 @import 'src/scss/base';

diff --git a/components/o-header-services/package.json b/components/o-header-services/package.json
@@ -34,8 +34,7 @@
     "@financial-times/o-private-foundation": "^0.0.0",
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-typography": "^7.4.1",
-    "@financial-times/o-utils": "^2.0.0",
-    "@financial-times/o-visual-effects": "^4.0.0"
+    "@financial-times/o-utils": "^2.0.0"
   },
   "devDependencies": {
     "@financial-times/o-fonts": "^5.2.0",

diff --git a/components/o-header-services/src/scss/_drawer.scss b/components/o-header-services/src/scss/_drawer.scss
@@ -19,13 +19,13 @@
 		bottom: 0;
 		visibility: hidden;
 		display: block;
-		transition: visibility 0.01s linear, opacity 0.5s $o-visual-effects-timing-fade;
+		transition: visibility 0.01s linear, opacity 0.5s $o-pf-visual-effects-timing-fade;
 		// So the drawer stays on top of other elements.
 		z-index: 1;
 
 		// Drawer nav.
 		.o-header-services__primary-nav-list {
-			@include oVisualEffectsShadowContent('mid');
+			@include oPrivateVisualEffectsShadowContent('mid');
 			flex-direction: column;
 			display: block;
 			margin: 0;
@@ -35,7 +35,7 @@
 			width: 75vw;
 			background-color: _oHeaderServicesGet('drawer-background');
 			transform: translateX(-100%);
-			transition: transform 0.5s $o-visual-effects-timing-expand;
+			transition: transform 0.5s $o-pf-visual-effects-timing-expand;
 		}
 
 		// First level nav item.

diff --git a/components/o-header-services/src/scss/_secondary-nav.scss b/components/o-header-services/src/scss/_secondary-nav.scss
@@ -116,7 +116,7 @@
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		transition: opacity 0.5s $o-visual-effects-timing-fade;
+		transition: opacity 0.5s $o-pf-visual-effects-timing-fade;
 
 		&[disabled] {
 			opacity: 0;

diff --git a/components/o-header/main.scss b/components/o-header/main.scss
@@ -3,6 +3,8 @@
 @import '@financial-times/o-colors/main';
 @import '@financial-times/o-icons/main';
 @import '@financial-times/o-grid/main';
+@import "@financial-times/o-private-foundation/src/scss/o-visual-effects/main";
+@import "@financial-times/o-private-foundation/src/scss/o-normalise/main";
 @import '@financial-times/o-private-foundation/main';
 @import '@financial-times/o-typography/main';
 @import '@financial-times/o-visual-effects/main';

diff --git a/components/o-header/package.json b/components/o-header/package.json
@@ -34,7 +34,6 @@
 		"@financial-times/o-typography": "^7.4.1",
 		"@financial-times/o-utils": "^2.0.0",
 		"@financial-times/o-viewport": "^5.1.1",
-		"@financial-times/o-visual-effects": "^4.0.1",
 		"@financial-times/o-forms": "^9.12.1",
 		"@financial-times/o-private-foundation": "0.0.0"
 	},

diff --git a/components/o-header/src/scss/features/_drawer.scss b/components/o-header/src/scss/features/_drawer.scss
@@ -7,7 +7,7 @@
 		transition: transform 0.5s cubic-bezier(1, 0, 0.5, 1.2);
 
 		&[data-o-header-drawer--js] {
-			@include oVisualEffectsShadowContent('low');
+			@include oPrivateVisualEffectsShadowContent('low');
 			display: none;
 			position: fixed;
 			top: 0;

diff --git a/components/o-header/src/scss/features/_megamenu.scss b/components/o-header/src/scss/features/_megamenu.scss
@@ -10,7 +10,7 @@
 
 	.o-header__mega {
 		@include oTypographySans(0);
-		@include oVisualEffectsShadowContent('low');
+		@include oPrivateVisualEffectsShadowContent('low');
 		display: none;
 		position: absolute;
 		top: 100%;

diff --git a/components/o-header/src/scss/features/_sticky.scss b/components/o-header/src/scss/features/_sticky.scss
@@ -6,7 +6,7 @@
 		width: 100%;
 		z-index: $_o-header-sticky-z-index;
 		transform: translateY(-100%);
-		transition: transform 0.35s $o-visual-effects-timing-slide;
+		transition: transform 0.35s $o-pf-visual-effects-timing-slide;
 		will-change: transform;
 
 		// because the transition is slightly bouncy it will reveal some of the background
@@ -19,7 +19,7 @@
 	}
 
 	.o-header--sticky-active {
-		@include oVisualEffectsShadowContent('mid');
+		@include oPrivateVisualEffectsShadowContent('mid');
 		transform: translateY(0);
 	}
 }
diff --git a/components/o-layout/main.scss b/components/o-layout/main.scss
@@ -4,7 +4,7 @@
 @import '@financial-times/o-colors/main';
 @import '@financial-times/o-normalise/main';
 @import '@financial-times/o-typography/main';
-@import '@financial-times/o-visual-effects/main';
+@import '@financial-times/o-private-foundation/src/scss/o-visual-effects/main';
 @import '@financial-times/o-quote/main';
 
 @import 'src/scss/brand';

diff --git a/components/o-layout/package.json b/components/o-layout/package.json
@@ -33,7 +33,7 @@
     "@financial-times/o-quote": "^5.0.1",
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-typography": "^7.4.1",
-    "@financial-times/o-visual-effects": "^4.0.0"
+    "@financial-times/o-private-foundation": "0.0.0"
   },
   "devDependencies": {
     "@financial-times/o-buttons": "^7.8.0",

diff --git a/components/o-layout/src/scss/_mixins.scss b/components/o-layout/src/scss/_mixins.scss
@@ -244,7 +244,7 @@
 		&:target .o-layout__linked-heading__link {
 			animation-delay: 0;
 			animation-duration: 5s;
-			animation-timing-function: $o-visual-effects-timing-fade;
+			animation-timing-function: $o-pf-visual-effects-timing-fade;
 			animation-name: o-layout-linked-heading-fade;
 		}
 

diff --git a/components/o-overlay/main.scss b/components/o-overlay/main.scss
@@ -7,7 +7,7 @@
 @import '@financial-times/o-spacing/main';
 @import '@financial-times/o-normalise/main';
 @import '@financial-times/o-icons/main';
-@import '@financial-times/o-visual-effects/main';
+@import '@financial-times/o-private-foundation/src/scss/o-visual-effects/main';
 @import 'src/scss/variables';
 @import 'src/scss/brand';
 @import 'src/scss/close';

diff --git a/components/o-overlay/package.json b/components/o-overlay/package.json
@@ -39,7 +39,7 @@
     "@financial-times/o-spacing": "^3.0.0",
     "@financial-times/o-typography": "^7.4.1",
     "@financial-times/o-viewport": "^5.0.0",
-    "@financial-times/o-visual-effects": "^4.0.1"
+    "@financial-times/o-private-foundation": "0.0.0"
   },
   "devDependencies": {
     "@financial-times/o-buttons": "^7.8.0",

diff --git a/components/o-overlay/src/scss/_mixins.scss b/components/o-overlay/src/scss/_mixins.scss
@@ -8,7 +8,7 @@
 /// @access private
 @mixin _oOverlayBase {
 	.o-overlay {
-		@include oVisualEffectsShadowContent($elevation: 'high');
+		@include oPrivateVisualEffectsShadowContent($elevation: 'high');
 		@include oTypographySans($scale: 0);
 		position: fixed;
 		z-index: 11; // Must always be higher than the shadow z-index

diff --git a/components/o-private-foundation/src/scss/o-visual-effects/main.scss b/components/o-private-foundation/src/scss/o-visual-effects/main.scss
@@ -0,0 +1,4 @@
+@import '@financial-times/o-colors/main';
+
+@import 'scss/shadows';
+@import 'scss/variables';
diff --git a/components/o-private-foundation/src/scss/o-visual-effects/scss/_shadows.scss b/components/o-private-foundation/src/scss/o-visual-effects/scss/_shadows.scss
@@ -0,0 +1,31 @@
+/// Elevation
+/// @param {String} $elevation [] - 'ultra', 'low', 'mid' or 'high'
+/// @param {Color} $color []
+/// @output A repeating linear gradient background
+@mixin oPrivateVisualEffectsShadowContent($elevation: 'low', $color: $_o-pf-visual-effects-shadow-color) {
+	box-shadow: oPrivateVisualEffectsShadow($elevation, $color);
+}
+
+/// Elevation
+/// @param {String} $elevation [] - 'ultra', 'low', 'mid' or 'high'
+/// @param {Color} $color []
+/// @output A repeating linear gradient background
+@function oPrivateVisualEffectsShadow($elevation: 'low', $color: $_o-pf-visual-effects-shadow-color) {
+	@if $elevation == 'ultralow' {
+		@return 0 2px 2px rgba($color, 0.12), 0 4px 6px rgba($color, 0.1);
+	}
+
+	@if $elevation == 'low' {
+		@return 0 1px 2px rgba($color, 0.25), 0 4px 6px rgba($color, 0.1);
+	}
+
+	@if $elevation == 'mid' {
+		@return 0 1px 3px rgba($color, 0.2), 0 6px 10px rgba($color, 0.15);
+	}
+
+	@if $elevation == 'high' {
+		@return 0 1px 4px rgba($color, 0.15), 0 8px 14px rgba($color, 0.2);
+	}
+
+	@error 'A shadow with elevation "#{$elevation}" is not supported. Must be one of: "ultralow", "low", "mid", or "high".';
+}
diff --git a/components/o-private-foundation/src/scss/o-visual-effects/scss/_variables.scss b/components/o-private-foundation/src/scss/o-visual-effects/scss/_variables.scss
@@ -0,0 +1,13 @@
+/// Timing function for elements that slide in and out
+$o-pf-visual-effects-timing-slide: cubic-bezier(1, 0, 0.5, 1.275) !default;
+
+/// Timing function for elements that expand and contract
+$o-pf-visual-effects-timing-expand: cubic-bezier(0.215, 0.61, 0.355, 1) !default;
+
+/// Timing function for elements that fade in and out
+$o-pf-visual-effects-timing-fade: cubic-bezier(0.165, 0.84, 0.44, 1) !default;
+
+/// The base dropdown shadow colour.
+/// Used with opacity for shadows of different levels.
+/// @type Color
+$_o-pf-visual-effects-shadow-color: oColorsByName('black-70');
diff --git a/components/o-table/main.scss b/components/o-table/main.scss
@@ -6,7 +6,7 @@
 @import '@financial-times/o-grid/main';
 @import '@financial-times/o-icons/main';
 @import '@financial-times/o-typography/main';
-@import '@financial-times/o-visual-effects/main';
+@import '@financial-times/o-private-foundation/src/scss/o-visual-effects/main';
 @import '@financial-times/o-private-foundation/main';
 
 // Branding

diff --git a/components/o-table/package.json b/components/o-table/package.json
@@ -37,7 +37,6 @@
 		"@financial-times/o-icons": "^7.0.1",
 		"@financial-times/o-spacing": "^3.0.0",
 		"@financial-times/o-typography": "^7.4.1",
-		"@financial-times/o-visual-effects": "^4.0.1",
 		"@financial-times/o-private-foundation": "^0.0.0"
 	},
 	"devDependencies": {

diff --git a/components/o-table/src/scss/_responsive-overflow.scss b/components/o-table/src/scss/_responsive-overflow.scss
@@ -47,7 +47,7 @@
 			@supports (pointer-events: none) {
 				position: absolute;
 				top: calc(50% - 20px);
-				transition: opacity 0.3s $o-visual-effects-timing-fade;
+				transition: opacity 0.3s $o-pf-visual-effects-timing-fade;
 			}
 			z-index: 1;
 		}

diff --git a/components/o-tooltip/main.scss b/components/o-tooltip/main.scss
@@ -1,7 +1,7 @@
 @import "@financial-times/o-grid/main";
 @import '@financial-times/o-private-foundation/src/scss/o-normalise/main';
 @import "@financial-times/o-overlay/main";
-@import "@financial-times/o-visual-effects/main";
+@import "@financial-times/o-private-foundation/src/scss/o-visual-effects/main";
 @import "@financial-times/o-typography/main";
 
 @import "src/scss/variables";
@@ -27,13 +27,13 @@
 	@include oGridSurfaceCurrentLayout();
 
 	.o-tooltip {
-		@include oVisualEffectsShadowContent($elevation: 'high');
+		@include oPrivateVisualEffectsShadowContent($elevation: 'high');
 		@include _oTooltipThemeContent(); // Style for the default theme.
 		position: absolute;
 		z-index: 10;
 		box-sizing: border-box;
 		opacity: 0;
-		transition: opacity $_o-tooltip-animation-duration $o-visual-effects-timing-fade, transform $_o-tooltip-animation-duration $o-visual-effects-timing-slide;
+		transition: opacity $_o-tooltip-animation-duration $o-pf-visual-effects-timing-fade, transform $_o-tooltip-animation-duration $o-pf-visual-effects-timing-slide;
 		border: 0;
 		display: none;