Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NFX-171 adding custom font api added #4

Merged
merged 2 commits into from
Aug 7, 2024
Merged

NFX-171 adding custom font api added #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4431299
NFX-171 adding custom font api added
vikas-cldcvr Aug 7, 2024
d59f14d
NFX-171 adding custom font api added
vikas-cldcvr Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
25 changes: 24 additions & 1 deletion .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
<div
style="background-color:var(--color-surface-default);color:var(--color-text-default);font-family:var(--flow-font);height:inherit;padding: 0px;"
Expand Down
1 change: 0 additions & 1 deletion .storybook/storybook.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@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");

body * {
font-family: var(--flow-font);
Expand Down
6 changes: 6 additions & 0 deletions packages/flow-core-config/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

# Change Log

## [1.1.4] - 2023-08-07

### Patch Changes

- setting custom font api added

## [1.1.3] - 2023-10-12

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/flow-core-config/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@nonfx/flow-core-config",
"version": "1.1.3",
"version": "1.1.4",
"description": "Shared configuration for the Flow UI library",
"module": "dist/index.es.js",
"main": "dist/index.cjs.js",
Expand Down
28 changes: 28 additions & 0 deletions packages/flow-core-config/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export type FlowCoreConfig = {
// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
theme: "f-dark" | "f-light" | string;
iconPack: Record<string, string> | null;
customFont?: {
default: string;
mono?: string;
};
};

export const themeSubject = new Subject<string>();
Expand All @@ -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}`);
Expand Down
7 changes: 7 additions & 0 deletions packages/flow-core/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/flow-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/flow-core/src/components/f-div/f-div-global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"] {
Expand Down
5 changes: 0 additions & 5 deletions packages/flow-core/src/mixins/components/f-root/f-root-global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading