diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9661c455..9e0c3100 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,6 @@ { "recommendations": [ - "unifiedjs.vscode-mdx" + "unifiedjs.vscode-mdx", + "somewhatstationery.some-sass" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index fab96555..84a3065a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,11 +6,16 @@ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, + "emmet.excludeLanguages": [ + "markdown", + "scss" + ], "files.associations": { "*.svx": "mdx" }, "[mdx]": { "editor.wordWrap": "on" }, + "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/.vscode/svelte.scripts.code-snippets b/.vscode/svelte.scripts.code-snippets deleted file mode 100644 index e06f1ed3..00000000 --- a/.vscode/svelte.scripts.code-snippets +++ /dev/null @@ -1,43 +0,0 @@ -{ - "Static assets path": { - "scope": "javascript", - "prefix": "static", - "body": [ - "import { getPath } from '$utils/statics';", - "", - "getPath('${1:filepath}')" - ], - "description": "Add a static assets file path" - }, - "SvelteKit $app/env": { - "scope": "javascript", - "prefix": "env", - "body": [ - "import { browser, dev, prerendering } from '$app/env';" - ], - "description": "SvelteKit $app/env stores" - }, - "Fetch script module": { - "scope": "svelte", - "prefix": "fetch-module", - "body": [ - "" - ] - } -} \ No newline at end of file diff --git a/.vscode/svelte.styles.code-snippets b/.vscode/svelte.styles.code-snippets index bc626671..5ea10d1a 100644 --- a/.vscode/svelte.styles.code-snippets +++ b/.vscode/svelte.styles.code-snippets @@ -8,42 +8,5 @@ "" ], "description": "Add a Svelte SCSS style tag" - }, - "Reuters Graphics styles theme": { - "scope": "svelte", - "prefix": "theme", - "body": [ - "" - ], - "description": "Add Reuters Graphics theme to page" - }, - "Reuters Graphics fonts mixins": { - "scope": "scss", - "prefix": "fonts-mixins", - "body": [ - "@import \"~@reuters-graphics/style-main/scss/fonts/mixins\";", - "", - "$1 {", - " @include font-sans;", - "}" - ], - "description": "Add Reuters Graphics fonts mixins" - }, - "Reuters Graphics fonts variables": { - "scope": "scss", - "prefix": "fonts-variables", - "body": [ - "@import \"~@reuters-graphics/style-main/scss/fonts/variables\";", - "", - "$1 {", - " font-family: $font-family-sans-serif;", - "}" - ], - "description": "Add Reuters Graphics fonts variables" } } \ No newline at end of file diff --git a/package.json b/package.json index d1e3dd18..97d9a4d7 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@storybook/addon-interactions": "^7.1.0", "@storybook/addon-links": "^7.1.0", "@storybook/addon-mdx-gfm": "^7.1.0", - "@storybook/addon-svelte-csf": "3.0.5--canary.113.02ce02a.0", + "@storybook/addon-svelte-csf": "3.0.5--canary.113.529e422.0", "@storybook/blocks": "^7.1.0", "@storybook/builder-vite": "^7.1.0", "@storybook/manager-api": "^7.1.0", diff --git a/src/components/Analytics/Analytics.stories.svelte b/src/components/Analytics/Analytics.stories.svelte index 3cd2390c..4c316c78 100644 --- a/src/components/Analytics/Analytics.stories.svelte +++ b/src/components/Analytics/Analytics.stories.svelte @@ -15,7 +15,7 @@ diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte index 6f80376c..dafcf84b 100644 --- a/src/components/Spinner/Spinner.svelte +++ b/src/components/Spinner/Spinner.svelte @@ -23,7 +23,7 @@
-
-
+
+
@@ -48,21 +48,14 @@ transform: rotate(360deg); } } - .component-container { - display: flex; - align-items: center; - justify-content: center; - } .spinner-container { - position: relative; height: 0; padding-bottom: 100%; color: var(--spinner-colour, #666); } .spinner { - position: absolute; top: 0; left: 0; width: 100%; @@ -71,7 +64,6 @@ border: var(--spinner-ring-width, 6px) solid transparent; border-top-color: currentColor; animation: spinner var(--spinner-speed, 0.8s) linear infinite; - box-sizing: border-box; &::before { content: ''; diff --git a/src/scss/fonts/_font-faces.scss b/src/scss/fonts/_font-faces.scss index 90f3d448..ae98d3f3 100644 --- a/src/scss/fonts/_font-faces.scss +++ b/src/scss/fonts/_font-faces.scss @@ -1,9 +1,9 @@ /* REUTERS KNOWLEDGE */ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-RegularItalic.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-RegularItalic.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-RegularItalic.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-RegularItalic.woff') format('woff'); font-weight: normal; font-style: italic; @@ -12,9 +12,9 @@ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Black.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Black.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Black.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Black.woff') format('woff'); font-weight: 900; font-style: normal; @@ -23,9 +23,9 @@ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Light.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Light.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Light.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Light.woff') format('woff'); font-weight: 300; font-style: normal; @@ -34,9 +34,9 @@ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Regular.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Regular.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Regular.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Regular.woff') format('woff'); font-weight: normal; font-style: normal; @@ -45,9 +45,9 @@ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-UltraLight.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-UltraLight.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-UltraLight.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-UltraLight.woff') format('woff'); font-weight: 200; font-style: normal; @@ -56,9 +56,9 @@ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Bold.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Bold.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Bold.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Bold.woff') format('woff'); font-weight: bold; font-style: normal; @@ -67,9 +67,9 @@ @font-face { font-family: 'Knowledge'; - src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Medium.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Medium.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Medium.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/Knowledge2017-Medium.woff') format('woff'); font-weight: 500; font-style: normal; @@ -79,9 +79,9 @@ /* SOURCE SANS PRO */ @font-face { font-family: 'Source Sans Pro'; - src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Light.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Light.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Light.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Light.woff') format('woff'); font-weight: 300; font-style: normal; @@ -90,9 +90,9 @@ @font-face { font-family: 'Source Sans Pro'; - src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Italic.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Italic.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Italic.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Italic.woff') format('woff'); font-weight: normal; font-style: italic; @@ -101,9 +101,9 @@ @font-face { font-family: 'Source Sans Pro'; - src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Bold.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Bold.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Bold.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Bold.woff') format('woff'); font-weight: bold; font-style: normal; @@ -112,9 +112,9 @@ @font-face { font-family: 'Source Sans Pro'; - src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-SemiBold.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-SemiBold.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-SemiBold.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; @@ -123,9 +123,9 @@ @font-face { font-family: 'Source Sans Pro'; - src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Regular.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Regular.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Regular.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/SourceSansPro-Regular.woff') format('woff'); font-weight: normal; font-style: normal; @@ -135,9 +135,9 @@ /* FREIGHT TEXT */ @font-face { font-family: 'FreightText'; - src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBold.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBold.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBold.woff') format('woff'); font-weight: bold; font-style: normal; @@ -146,9 +146,9 @@ @font-face { font-family: 'FreightText'; - src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBook.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBook.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBook.woff') format('woff'); font-weight: normal; font-style: normal; @@ -157,9 +157,9 @@ @font-face { font-family: 'FreightText'; - src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBookItalic.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBookItalic.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextBookItalic.woff') format('woff'); font-weight: normal; font-style: italic; @@ -168,9 +168,9 @@ @font-face { font-family: 'FreightText'; - src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextLight.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/FreightTextLight.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextLight.woff') format('woff'); font-weight: 300; font-style: normal; @@ -179,9 +179,9 @@ @font-face { font-family: 'FreightText'; - src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextMedium.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/FreightTextMedium.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/FreightTextMedium.woff') format('woff'); font-weight: 500; font-style: normal; @@ -191,9 +191,9 @@ /* NOTO SANS JAPANESE */ @font-face { font-family: 'Noto Sans JP'; - src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Bold.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Bold.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Bold.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Bold.woff') format('woff'); font-weight: bold; font-style: normal; @@ -202,9 +202,9 @@ @font-face { font-family: 'Noto Sans JP'; - src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Light.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Light.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Light.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Light.woff') format('woff'); font-weight: 300; font-style: normal; @@ -213,9 +213,9 @@ @font-face { font-family: 'Noto Sans JP'; - src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-ExtraLight.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-ExtraLight.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-ExtraLight.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; @@ -224,9 +224,9 @@ @font-face { font-family: 'Noto Sans JP'; - src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Medium.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Medium.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Medium.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Medium.woff') format('woff'); font-weight: 500; font-style: normal; @@ -235,9 +235,9 @@ @font-face { font-family: 'Noto Sans JP'; - src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Regular.woff2') + src: url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Regular.woff2') format('woff2'), - url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Regular.woff') + url('//graphics.thomsonreuters.com/style-assets/fonts/v1/NotoSansJP-Regular.woff') format('woff'); font-weight: normal; font-style: normal; diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss index b6fb1a6d..c722e376 100644 --- a/src/scss/reset/_typography.scss +++ b/src/scss/reset/_typography.scss @@ -5,7 +5,9 @@ body { @include font-sans; @include font-normal; @include leading-normal; + // Font-smoothing -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } ///////////// @@ -18,7 +20,6 @@ h3, h5, h6 { @include text-primary; - -webkit-font-smoothing: antialiased; } h1 { @include font-hed; @@ -77,7 +78,6 @@ h6 { @include font-normal; @include leading-normal; @include text-primary; - -webkit-font-smoothing: antialiased; } p { diff --git a/src/scss/tokens/text/_font-family.scss b/src/scss/tokens/text/_font-family.scss index b984c64b..e8aa7b50 100644 --- a/src/scss/tokens/text/_font-family.scss +++ b/src/scss/tokens/text/_font-family.scss @@ -27,8 +27,8 @@ .font-knowledge { @include font-knowledge; } -.font-freight-book { - @include font-freight-book; +.font-freight-text { + @include font-freight-text; } .font-noto-sans-jp { @include font-noto-sans-jp; @@ -60,8 +60,8 @@ .\!font-knowledge { @include \!font-knowledge; } -.\!font-freight-book { - @include \!font-freight-book; +.\!font-freight-text { + @include \!font-freight-text; } .\!font-noto-sans-jp { @include \!font-noto-sans-jp; diff --git a/src/scss/tokens/text/mixins/_font-family.scss b/src/scss/tokens/text/mixins/_font-family.scss index c977ada8..a0d63e78 100644 --- a/src/scss/tokens/text/mixins/_font-family.scss +++ b/src/scss/tokens/text/mixins/_font-family.scss @@ -25,7 +25,7 @@ @mixin font-knowledge { font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif; } -@mixin font-freight-book { +@mixin font-freight-text { font-family: 'FreightText', serif; } @mixin font-noto-sans-jp { @@ -58,7 +58,7 @@ @mixin \!font-knowledge { font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important; } -@mixin \!font-freight-book { +@mixin \!font-freight-text { font-family: 'FreightText', serif !important; } @mixin \!font-noto-sans-jp { diff --git a/yarn.lock b/yarn.lock index 727b0910..7d2d08d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2565,10 +2565,10 @@ "@storybook/types" "7.1.0" ts-dedent "^2.0.0" -"@storybook/addon-svelte-csf@3.0.5--canary.113.02ce02a.0": - version "3.0.5--canary.113.02ce02a.0" - resolved "https://registry.yarnpkg.com/@storybook/addon-svelte-csf/-/addon-svelte-csf-3.0.5--canary.113.02ce02a.0.tgz#0ceedfd46445658c72d639bf99763af3807a6442" - integrity sha512-rIVyzB6bbfsmK+iokmiQMHwPNTanIh3wbhwDNpbIDy7jN1QytIvdCIhRwNuYqt+U63JgDIWMnasqe9FOicVuNA== +"@storybook/addon-svelte-csf@3.0.5--canary.113.529e422.0": + version "3.0.5--canary.113.529e422.0" + resolved "https://registry.yarnpkg.com/@storybook/addon-svelte-csf/-/addon-svelte-csf-3.0.5--canary.113.529e422.0.tgz#f0780e5f7f63a54ab9ea9b343c3d39ab704bf775" + integrity sha512-kvxPs/i93ogAyp9oJj8jwe/48hSAEVBDtiVfvmnQ8rjA0HCt4ZsfuDRUvpaHfAdYskhhi+mk4WT2c4kwNxwmXw== dependencies: "@babel/runtime" "^7.22.6" dedent "^1.2.0"