diff --git a/components/x-follow-button/bower.json b/components/x-follow-button/bower.json index 08ca23073..48cc79ee1 100644 --- 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 index 19b50ddcd..529d088fa 100644 --- 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'; \ No newline at end of file +@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 index 38cfe434a..c144e52ee 100644 --- 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; -} \ No newline at end of file +} 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 index c5e3613f0..302298c94 100644 --- 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 @@ } } } -} \ No newline at end of file +} diff --git a/components/x-follow-button/src/styles/mixins/lozenge/main.scss b/components/x-follow-button/src/styles/mixins/lozenge/main.scss index 1c20fffe2..c0a0d854a 100644 --- 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;