diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 6068b2517..8b3a5bbfc 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -57,6 +57,7 @@ jobs: "@nonfx/flow-md-editor":"packages/flow-md-editor/CHANGELOG.md", "@nonfx/flow-text-editor":"packages/flow-text-editor/CHANGELOG.md", "@nonfx/flow-core":"packages/flow-core/CHANGELOG.md", + "@nonfx/flow-icons":"packages/flow-icons/CHANGELOG.md", "@nonfx/flow-table":"packages/flow-table/CHANGELOG.md", "@nonfx/flow-core-config":"packages/flow-core-config/CHANGELOG.md", "@nonfx/flow-form-builder":"packages/flow-form-builder/CHANGELOG.md", diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 92560dbe0..fdf515a7b 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -93,8 +93,31 @@ export const decorators = [ } } }; + + const link = document.createElement("link"); + + link.rel = "stylesheet"; + link.href = + "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap"; + + document.head.appendChild(link); + + const monolink = document.createElement("link"); + + monolink.rel = "stylesheet"; + monolink.href = + "https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap"; + + document.head.appendChild(monolink); + register(["aws", "gcp", "product", "system", "saas-system", "engineering"]); - ConfigUtil.setConfig({ theme: "f-ollion-dark" }); + ConfigUtil.setConfig({ + theme: "f-light", + customFont: { + default: `"Montserrat", "Montserrat", sans-serif`, + mono: `"Operator Mono", monospace` + } + }); return html`
| null; + customFont?: { + default: string; + mono?: string; + }; }; export const themeSubject = new Subject(); @@ -25,6 +29,30 @@ export const ConfigUtil = { if (cfg.theme) { this.initTheme(); } + if (cfg.customFont) { + const existingStyle = document.documentElement.style.cssText; // Get existing styles + let newStyle = `--flow-font: ${cfg.customFont.default}; + --text-para-x-small-fontfamily: ${cfg.customFont.default}; + --text-para-large-fontfamily: ${cfg.customFont.default}; + --text-para-medium-fontfamily: ${cfg.customFont.default}; + --text-para-small-fontfamily: ${cfg.customFont.default}; + --text-para-x-large-fontfamily: ${cfg.customFont.default}; + --text-heading-x-small-fontfamily: ${cfg.customFont.default}; + --text-heading-small-fontfamily: ${cfg.customFont.default}; + --text-heading-x-large-fontfamily: ${cfg.customFont.default}; + --text-heading-medium-fontfamily: ${cfg.customFont.default}; + --text-heading-large-fontfamily: ${cfg.customFont.default};`; + + if (cfg.customFont.mono) { + newStyle += ` --flow-code-font: ${cfg.customFont.mono}; + --text-code-small-fontfamily: ${cfg.customFont.mono}; + --text-code-large-fontfamily: ${cfg.customFont.mono}; + --text-code-medium-fontfamily: ${cfg.customFont.mono}; + --text-code-x-small-fontfamily: ${cfg.customFont.mono}; + --text-code-x-large-fontfamily: ${cfg.customFont.mono};`; + } + document.documentElement.style.cssText = existingStyle + newStyle; + } }, initTheme() { document.documentElement.setAttribute("data-theme", `${configSubject.value.theme}`); diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index 4b23f7b19..c67f73c93 100644 --- a/packages/flow-core/CHANGELOG.md +++ b/packages/flow-core/CHANGELOG.md @@ -2,6 +2,13 @@ # Change Log +## [2.10.1] - 2024-08-07 + +### Patch Changes + +- loading default font removed +- f-div clickable transition added + ## [2.10.0] - 2024-07-10 ### Minor Changes diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index cc447f1dd..4b7864296 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -1,6 +1,6 @@ { "name": "@nonfx/flow-core", - "version": "2.10.0", + "version": "2.10.1", "description": "Core package of flow design system", "module": "dist/flow-core.es.js", "main": "dist/flow-core.cjs.js", @@ -58,7 +58,7 @@ "web-component-analyzer": "^2.0.0-next.4" }, "peerDependencies": { - "@nonfx/flow-core-config": "*" + "@nonfx/flow-core-config": "^1.1.4" }, "repository": { "type": "git", diff --git a/packages/flow-core/src/components/f-div/f-div-global.scss b/packages/flow-core/src/components/f-div/f-div-global.scss index eac51b028..7c88600bf 100644 --- a/packages/flow-core/src/components/f-div/f-div-global.scss +++ b/packages/flow-core/src/components/f-div/f-div-global.scss @@ -100,6 +100,7 @@ f-div { font-weight: 400; font-size: 14px; color: var(--color-text-default); + transition: background-color 250ms linear; // iterating over gaps and appying respective css @each $gap, $value in $gaps { &[gap="#{$gap}"] { diff --git a/packages/flow-core/src/mixins/components/f-root/f-root-global.scss b/packages/flow-core/src/mixins/components/f-root/f-root-global.scss index 996243f7f..4aef184d5 100644 --- a/packages/flow-core/src/mixins/components/f-root/f-root-global.scss +++ b/packages/flow-core/src/mixins/components/f-root/f-root-global.scss @@ -4,11 +4,6 @@ @import "./../../scss/height"; @import "./../../scss/mixins"; -//https://fonts.google.com/specimen/Montserrat?query=mon -@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap"); -//https://fonts.google.com/betterspecimen/Courier+Prime -@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap"); - html, body { height: 100vh;