Update x-follow-button for origami major change

So that we can include it in projects that use other components that use the latest changes.
Financial-Times · Dec 4, 2019 · f7474c7 · f7474c7
1 parent 04d7890
commit f7474c7
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 26 deletions.
diff --git a/components/x-follow-button/bower.json b/components/x-follow-button/bower.json
@@ -3,8 +3,8 @@
   "private": true,
   "main": "dist/FollowButton.es5.js",
   "dependencies": {
-    "o-colors": "^4.4.1",
-    "o-icons": "^5.7.1",
-    "o-typography": "^5.7.4"
+    "o-colors": "^5.0.3",
+    "o-icons": "^6.0.0",
+    "o-typography": "^6.1.0"
   }
 }
diff --git a/components/x-follow-button/src/styles/main.scss b/components/x-follow-button/src/styles/main.scss
@@ -1,7 +1,10 @@
+// TODO: update me to not need a system code
+$system-code:'github:Financial-Times/x-dash' !default;
+
 @import 'o-icons/main';
 @import 'o-colors/main';
 @import 'o-typography/main';
 
 @import './mixins/lozenge/main.scss';
 
-@import './components/FollowButton.scss';
+@import './components/FollowButton.scss';
diff --git a/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss b/components/x-follow-button/src/styles/mixins/lozenge/_themes.scss
@@ -2,32 +2,32 @@ $theme-map: null;
 
 $myft-lozenge-themes: (
 	standard: (
-		background: oColorsGetPaletteColor('claret'),
-		text: oColorsGetPaletteColor('white'),
-		highlight: oColorsGetPaletteColor('claret-50'),
-		pressed-highlight: rgba(oColorsGetPaletteColor('black'), 0.05),
-		disabled: rgba(oColorsGetPaletteColor('black'), 0.5)
+		background: oColorsByName('claret'),
+		text: oColorsByName('white'),
+		highlight: oColorsByName('claret-50'),
+		pressed-highlight: rgba(oColorsByName('black'), 0.05),
+		disabled: rgba(oColorsByName('black'), 0.5)
 	),
 	inverse: (
-		background: oColorsGetPaletteColor('white'),
-		text: oColorsGetPaletteColor('claret'),
+		background: oColorsByName('white'),
+		text: oColorsByName('claret'),
 		highlight: rgba(white, 0.8),
 		pressed-highlight: rgba(white, 0.2),
-		disabled: rgba(oColorsGetPaletteColor('white'), 0.5)
+		disabled: rgba(oColorsByName('white'), 0.5)
 	),
 	opinion: (
-		background: oColorsGetPaletteColor('oxford-40'),
-		text: oColorsGetPaletteColor('white'),
-		highlight: oColorsGetPaletteColor('oxford-30'),
-		pressed-highlight: rgba(oColorsGetPaletteColor('oxford-40'), 0.2),
-		disabled: rgba(oColorsGetPaletteColor('black'), 0.5)
+		background: oColorsByName('oxford-40'),
+		text: oColorsByName('white'),
+		highlight: oColorsByName('oxford-30'),
+		pressed-highlight: rgba(oColorsByName('oxford-40'), 0.2),
+		disabled: rgba(oColorsByName('black'), 0.5)
 	),
 	monochrome: (
-		background: oColorsGetPaletteColor('white'),
-		text: oColorsGetPaletteColor('black'),
-		highlight: oColorsGetPaletteColor('white-80'),
-		pressed-highlight: rgba(oColorsGetPaletteColor('white'), 0.2),
-		disabled: rgba(oColorsGetPaletteColor('white'), 0.5)
+		background: oColorsByName('white'),
+		text: oColorsByName('black'),
+		highlight: oColorsByName('white-80'),
+		pressed-highlight: rgba(oColorsByName('white'), 0.2),
+		disabled: rgba(oColorsByName('white'), 0.5)
 	)
 );
 
@@ -39,4 +39,4 @@ $myft-lozenge-themes: (
 	$theme-map: map-get($myft-lozenge-themes, $theme) !global;
 
 	@content;
-}
+}
diff --git a/components/x-follow-button/src/styles/mixins/lozenge/_toggle-icon.scss b/components/x-follow-button/src/styles/mixins/lozenge/_toggle-icon.scss
@@ -1,5 +1,5 @@
 @mixin getIcon($name, $color) {
-	@include oIconsGetIcon($icon-name: $name, $container-width: 10, $color: $color, $iconset-version: 1);
+	@include oIconsContent($icon-name: $name, $size: 10, $color: $color, $iconset-version: 1);
 	content: '';
 }
 
@@ -40,4 +40,4 @@
 			}
 		}
 	}
-}
+}
diff --git a/components/x-follow-button/src/styles/mixins/lozenge/main.scss b/components/x-follow-button/src/styles/mixins/lozenge/main.scss
@@ -42,7 +42,7 @@
 
 @mixin myftLozenge($theme: standard, $with-toggle-icon: false) {
 	@include myftLozengeTheme($theme, $with-toggle-icon);
-	@include oTypographySansBold($scale: -1);
+	@include oTypographySans($scale: -1, $weight: 'semibold');
 
 	border-radius: 100px; // Number that will be larger than any possible height, so that works for all possible button sizes
 	box-sizing: content-box;