@openfin/ui-library 0.1.8-alpha.1618009013 → 0.1.8-alpha.1618538299

package/dist/assets/fonts/index.d.ts

@@ -0,0 +1,6 @@
+export declare const Fonts: {
+    regular: any;
+    italic: any;
+    semiBold: any;
+    semiBoldItalic: any;
+};

package/dist/assets/fonts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fonts = void 0;
+const Inter_Regular_woff2_1 = __importDefault(require("./Inter-Regular.woff2"));
+const Inter_Italic_woff2_1 = __importDefault(require("./Inter-Italic.woff2"));
+const Inter_SemiBold_woff2_1 = __importDefault(require("./Inter-SemiBold.woff2"));
+const Inter_SemiBoldItalic_woff2_1 = __importDefault(require("./Inter-SemiBoldItalic.woff2"));
+exports.Fonts = { regular: Inter_Regular_woff2_1.default, italic: Inter_Italic_woff2_1.default, semiBold: Inter_SemiBold_woff2_1.default, semiBoldItalic: Inter_SemiBoldItalic_woff2_1.default };

package/dist/assets/fonts/index.ts

@@ -0,0 +1,6 @@
+import regular from './Inter-Regular.woff2';
+import italic from './Inter-Italic.woff2';
+import semiBold from './Inter-SemiBold.woff2';
+import semiBoldItalic from './Inter-SemiBoldItalic.woff2';
+
+export const Fonts = { regular, italic, semiBold, semiBoldItalic };

package/dist/components/system/ThemeProvider/index.d.ts

@@ -1,5 +1,6 @@
 export * from './lib/constants';
 export * from './lib/createTheme';
+export * from './lib/createFontFaceCss';
 export * from './lib/helpers';
 export * from './lib/interface';
 export * from './lib/mixins';

package/dist/components/system/ThemeProvider/index.js

@@ -12,6 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/constants"), exports);
 __exportStar(require("./lib/createTheme"), exports);
+__exportStar(require("./lib/createFontFaceCss"), exports);
 __exportStar(require("./lib/helpers"), exports);
 __exportStar(require("./lib/interface"), exports);
 __exportStar(require("./lib/mixins"), exports);

package/dist/components/system/ThemeProvider/lib/config.d.ts

@@ -1,7 +1,19 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
 /**
- * Configuration
+ * ThemeProvider Configuration
  */
-export declare type ConfigurationType = {
-    fontLoading: 'cdn' | 'base64';
+export declare type ConfigurationType = CDNFontConfig | ImportFontConfig;
+/**
+ * Custom import and handling for font loading.
+ */
+export declare type ImportFontConfig = {
+    fontLoading: 'import';
+    fontCss: FlattenSimpleInterpolation;
+};
+/**
+ * Use fonts from the Openfin CDN.
+ */
+export declare type CDNFontConfig = {
+    fontLoading: 'cdn';
 };
 export declare const Configuration: ConfigurationType;

package/dist/components/system/ThemeProvider/lib/config.js

@@ -1,7 +1,4 @@
 "use strict";
-/**
- * Configuration
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Configuration = void 0;
 exports.Configuration = {

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -517,3 +517,8 @@ export declare const IconSize: {
     readonly xxlarge: "32px";
     readonly xxxlarge: "48px";
 };
+/**
+ * @font-face --
+ * Generate @font-face CSS for CDN Loaded fonts
+ */
+export declare const cdnFontFaceCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -19,9 +19,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
+exports.cdnFontFaceCss = exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
 const RadixIcons = __importStar(require("@modulz/radix-icons"));
 const OpenFinIcons = __importStar(require("../../../elements/Icon/openfin"));
+const createFontFaceCss_1 = require("./createFontFaceCss");
 /**
  * Color --
  * Color maps names to values.
@@ -253,3 +254,13 @@ exports.IconSize = {
     [exports.Size.xxlarge]: exports.UnitPx.xxxlarge,
     [exports.Size.xxxlarge]: exports.UnitPx.xxxxlarge,
 };
+/**
+ * @font-face --
+ * Generate @font-face CSS for CDN Loaded fonts
+ */
+exports.cdnFontFaceCss = createFontFaceCss_1.createFontFaceCss({
+    regular: '//cdn.openfin.co/fonts/inter/Inter-Regular.woff2?v3.15',
+    italic: '//cdn.openfin.co/fonts/inter/Inter-Italic.woff2?v3.15',
+    semiBold: '//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff2?v3.15',
+    semiBoldItalic: '//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff2?v3.15',
+});

package/dist/components/system/ThemeProvider/lib/createFontFaceCss.d.ts

@@ -0,0 +1,11 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+export interface ImportFonts {
+    regular: string;
+    italic: string;
+    semiBold: string;
+    semiBoldItalic: string;
+}
+/**
+ * Import global fonts using your own config.
+ */
+export declare function createFontFaceCss(fonts: ImportFonts): FlattenSimpleInterpolation;

package/dist/components/system/ThemeProvider/lib/createFontFaceCss.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFontFaceCss = void 0;
+const styled_components_1 = require("styled-components");
+const constants_1 = require("./constants");
+/**
+ * Import global fonts using your own config.
+ */
+function createFontFaceCss(fonts) {
+    return styled_components_1.css `
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.regular}) format('woff2');
+      font-weight: ${constants_1.FontWeight.normal};
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.italic}) format('woff2');
+      font-weight: ${constants_1.FontWeight.normal};
+      font-style: italic;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.semiBold}) format('woff2');
+      font-weight: ${constants_1.FontWeight.bold};
+      font-style: normal;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.semiBoldItalic}) format('woff2');
+      font-weight: ${constants_1.FontWeight.bold};
+      font-style: italic;
+      font-display: swap;
+    }
+  `;
+}
+exports.createFontFaceCss = createFontFaceCss;

package/dist/components/system/ThemeProvider/lib/fonts.d.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/system/ThemeProvider/lib/helpers.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStatusColor = exports.getFontFaces = exports.getRootCssVars = exports.getVariantCSS = void 0;
-const font_face_base64_1 = __importDefault(require("./font-face-base64"));
-const font_face_cdn_1 = __importDefault(require("./font-face-cdn"));
+const constants_1 = require("./constants");
 const palette_1 = require("./palette");
 /**
  * Get the CSS associated with a variant key
@@ -29,11 +25,11 @@ exports.getRootCssVars = getRootCssVars;
  */
 const getFontFaces = ({ theme }) => {
     switch (theme._config.fontLoading) {
-        case 'base64':
-            return font_face_base64_1.default;
+        case 'import':
+            return theme._config.fontCss;
         case 'cdn':
         default:
-            return font_face_cdn_1.default;
+            return constants_1.cdnFontFaceCss;
     }
 };
 exports.getFontFaces = getFontFaces;

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export * from './components/typography/Heading';
 export * from './components/typography/Text';
 export * from './hooks/useColorScheme';
 export * from './hooks/useMediaQuery';
+export * from './assets/fonts';
 export * as StoryHelpers from './storybookHelpers';

package/dist/index.js

@@ -37,4 +37,5 @@ __exportStar(require("./components/typography/Heading"), exports);
 __exportStar(require("./components/typography/Text"), exports);
 __exportStar(require("./hooks/useColorScheme"), exports);
 __exportStar(require("./hooks/useMediaQuery"), exports);
+__exportStar(require("./assets/fonts"), exports);
 exports.StoryHelpers = __importStar(require("./storybookHelpers"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.8-alpha.1618009013",
+  "version": "0.1.8-alpha.1618538299",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -72,17 +72,18 @@
   },
   "scripts": {
     "start": "yarn storybook",
-    "build": "yarn build:clean && yarn build:bundle",
+    "build": "yarn build:clean && yarn build:bundle && yarn build:copy",
     "build:bundle": "yarn build:scripts && yarn build:types",
     "build:clean": "rimraf dist",
+    "build:copy": "node scripts/copy src/assets dist/assets",
     "build:dev": "yarn build && yalc push",
     "build:scripts": "cross-env NODE_ENV=production babel src -d dist --extensions '.ts,.tsx'",
     "build:types": "tsc -p tsconfig.bundle.json",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "yarn lint:typescript && yarn lint:styles",
-    "lint:typescript": "eslint './src/**/*.{ts,tsx}'",
-    "lint:styles": "stylelint './src/**/*.{ts,tsx}'",
+    "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
+    "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
     "storybook": "yarn storybook:cache-clear && start-storybook -p 6006 -s public",
     "storybook:build": "build-storybook -s public",
     "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook",

package/dist/components/system/ThemeProvider/lib/font-face-base64.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("styled-components").FlattenSimpleInterpolation;
-export default _default;