@openfin/ui-library 0.1.3-alpha.1616720507 → 0.1.3-alpha.1616720712

package/dist/components/controls/Toggle/toggle.js

@@ -49,8 +49,8 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   border-radius: calc(0.5 * var(--px-toggle));
 
   background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
-  transition: background var(--global-transition),
-    border-color var(--global-transition);
+  transition: background var(--openfin-ui-globalTransition),
+    border-color var(---openfin-ui-globalTransition);
 
   &:focus-within {
     border-color: ${({ theme }) => theme.palette.inputFocused};
@@ -67,7 +67,7 @@ const ToggleKnob = styled_components_1.default.button `
   background: ${({ theme }) => theme.palette.inputColor};
   border: none;
   outline: none;
-  transition: left var(--global-transition);
+  transition: left var(--openfin-ui-globalTransition);
   pointer-events: none; /* Allow pass-thru for native input */
 `;
 const ToggleInput = styled_components_1.default(RawInput_1.RawInput) `

package/dist/components/input/TextInput/textInput.js

@@ -47,7 +47,7 @@ const StyledInputField = styled_components_1.default(RawInput_1.RawInput) `
   color: ${({ theme }) => theme.palette.inputColor};
   font-size: ${({ theme }) => theme.fontSize.base};
   padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
-  transition: border-color var(--global-transition);
+  transition: border-color var(--openfin-ui-globalTransition);
 
   &:focus {
     outline: 0;

package/dist/components/system/GlobalStyles/globalStyles.js

@@ -7,11 +7,14 @@ const helpers_1 = require("../ThemeProvider/lib/helpers");
 exports.GlobalStyles = styled_components_1.createGlobalStyle `
   /** -> Define Global CSS Vars */
   :root {
-    --global-background: ${({ theme }) => theme.palette.background1};
-    --global-text: ${({ theme }) => theme.palette.textDefault};
-    --global-text-placeholder: ${({ theme }) => theme.palette.inputPlaceholder};
-    --global-typography: ${constants_1.Typography.base};
-    --global-transition: ${({ theme }) => theme.transition.base};
+    --openfin-ui-globalBackground: ${({ theme }) => theme.palette.background1};
+    --openfin-ui-globalText: ${({ theme }) => theme.palette.textDefault};
+    --openfin-ui-globalPlaceholder: ${({ theme }) => theme.palette.inputPlaceholder};
+    --openfin-ui-globalTypography: ${constants_1.Typography.base};
+    --openfin-ui-globalTransition: ${({ theme }) => theme.transition.base};
+
+    /* Map over the palette keys and create variables out of them */
+    ${helpers_1.getRootCssVars}
   }
 
   /** -> @font-face Declaration */
@@ -32,19 +35,19 @@ exports.GlobalStyles = styled_components_1.createGlobalStyle `
   /** -> Apply Global Styles */
   :root,
   body {
-    background: var(--global-background);
-    color: var(--global-text);
-    font: var(--global-typography);
+    background: var(--openfin-ui-globalBackground);
+    color: var(--openfin-ui-globalText);
+    font: var(--openfin-ui-globalTypography);
   }
 
   ::placeholder {
-    color: var(--global-text-placeholder);
+    color: var(--openfin-ui-globalPlaceholder);
   }
 
   /** -> Reduced Motion (Accessibility) */
   @media (prefers-reduced-motion) {
     :root {
-      --global-transition: ${({ theme }) => theme.transition.none};
+      --openfin-ui-globalTransition: ${({ theme }) => theme.transition.none};
     }
   }
 `;

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

@@ -12,6 +12,12 @@ export declare type ComponentVariants = {
  * @todo This needs to be typed better
  */
 export declare const getVariantCSS: (variants: ComponentVariants, variantProp: string) => (props: StyledProps<any>) => any;
+/**
+ * Build :root { --var } key value pairs from Palette
+ */
+export declare const getRootCssVars: ({ theme }: {
+    theme: DefaultTheme;
+}) => string;
 /**
  * Lazy Load font-faces based on Theme Configuration
  */

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

@@ -3,9 +3,10 @@ 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.getVariantCSS = void 0;
+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 palette_1 = require("./palette");
 /**
  * Get the CSS associated with a variant key
  * @param variants  -- Component variants data structure
@@ -16,6 +17,13 @@ const getVariantCSS = (variants, variantProp) => (props) => {
     return variants[variantProp][props[variantProp]];
 };
 exports.getVariantCSS = getVariantCSS;
+/**
+ * Build :root { --var } key value pairs from Palette
+ */
+const getRootCssVars = ({ theme }) => Object.keys(palette_1.Palette)
+    .map((key) => `--openfin-ui-${key}: ${theme.palette[key]};`)
+    .join('\n');
+exports.getRootCssVars = getRootCssVars;
 /**
  * Lazy Load font-faces based on Theme Configuration
  */

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

@@ -15,11 +15,12 @@ export declare type TransitionType = keyof typeof Transition;
 export declare type TypographyType = keyof typeof Typography;
 export declare type UnitPxType = keyof typeof UnitPx;
 export declare type UnitType = keyof typeof Unit;
-export declare type PaletteType = Record<keyof typeof Palette, string>;
 export declare type ThemeSet = {
     light: DefaultTheme;
     dark: DefaultTheme;
 };
+export declare type PaletteKeyType = keyof typeof Palette;
+export declare type PaletteType = Record<keyof typeof Palette, string>;
 export declare type ThemePaletteSet = {
     light: {
         palette: PaletteType;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.3-alpha.1616720507",
+  "version": "0.1.3-alpha.1616720712",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",