@openfin/ui-library 0.1.3 → 0.1.4

package/README.md

@@ -204,6 +204,15 @@ This triggers a Github Action to automatically build the latest version of the `
 - useColorScheme
 - useTheme
 
+## [Mixins](./src/components/system/ThemeProvider/lib/mixins.ts)
+
+CSS fragments that you can include in any styled component
+
+- `${Mixins.noSelect}`
+- `${Mixins.textOverflow}`
+- `${Mixins.scrollbar.base}`
+- `${Mixins.scrollbar.small}`
+
 ## Variants
 
 ### What are variants?

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/layout/Box/box.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
+const mixins_1 = require("../../system/ThemeProvider/lib/mixins");
 const palette_1 = require("../../system/ThemeProvider/lib/palette");
 /**
  * ## BackgroundLevels
@@ -27,6 +28,11 @@ const BackgroundLevels = {
  * - None of the child properties should be applied unless specified.
  */
 exports.Box = styled_components_1.default.div `
+  /**
+   * Style Scrollbar for Boxes with overflow
+   */
+  ${mixins_1.Mixins.scrollbar.base}
+
   display: ${({ display = 'flex' }) => display};
   flex-direction: ${({ flexDirection = 'row' }) => flexDirection};
   flex-wrap: ${({ flexWrap = 'nowrap' }) => flexWrap};

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/index.d.ts

@@ -1,6 +1,7 @@
 export * from './lib/constants';
 export * from './lib/helpers';
 export * from './lib/interface';
+export * from './lib/mixins';
 export * from './lib/palette';
 export * from './lib/types';
 export * from './themeProvider';

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

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/constants"), exports);
 __exportStar(require("./lib/helpers"), exports);
 __exportStar(require("./lib/interface"), exports);
+__exportStar(require("./lib/mixins"), exports);
 __exportStar(require("./lib/palette"), exports);
 __exportStar(require("./lib/types"), exports);
 __exportStar(require("./themeProvider"), exports);

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

@@ -517,11 +517,3 @@ export declare const IconSize: {
     readonly xxlarge: "32px";
     readonly xxxlarge: "48px";
 };
-/**
- * Mixins --
- * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
- */
-export declare const Mixins: {
-    readonly noSelect: import("styled-components").FlattenSimpleInterpolation;
-    readonly textOverflow: import("styled-components").FlattenSimpleInterpolation;
-};

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

@@ -19,9 +19,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Mixins = 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.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 styled_components_1 = require("styled-components");
 const OpenFinIcons = __importStar(require("../../../elements/Icon/openfin"));
 /**
  * Color --
@@ -254,17 +253,3 @@ exports.IconSize = {
     [exports.Size.xxlarge]: exports.UnitPx.xxxlarge,
     [exports.Size.xxxlarge]: exports.UnitPx.xxxxlarge,
 };
-/**
- * Mixins --
- * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
- */
-exports.Mixins = {
-    noSelect: styled_components_1.css `
-    user-select: none;
-  `,
-    textOverflow: styled_components_1.css `
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
-};

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/mixins.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Mixins --
+ * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
+ */
+export declare const Mixins: {
+    readonly noSelect: import("styled-components").FlattenSimpleInterpolation;
+    readonly textOverflow: import("styled-components").FlattenSimpleInterpolation;
+    readonly scrollbar: {
+        readonly base: import("styled-components").FlattenSimpleInterpolation;
+        readonly small: import("styled-components").FlattenSimpleInterpolation;
+    };
+};

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mixins = void 0;
+const constants_1 = require("./constants");
+const styled_components_1 = require("styled-components");
+/**
+ * Mixins
+ */
+/**
+ * Prevent User Selection
+ */
+const noSelect = styled_components_1.css `
+  user-select: none;
+`;
+/**
+ * Prevent Text from Wrapping and truncate with ellipsis
+ * when it overflows the parent container
+ */
+const textOverflow = styled_components_1.css `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+/**
+ * Scrollbar (4px)
+ * @link https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components?node-id=2048%3A7477
+ */
+const scrollbar = styled_components_1.css `
+  &::-webkit-scrollbar {
+    width: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    height: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${constants_1.Color.neutralGray};
+    border-radius: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    opacity: 0.8;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${constants_1.Color.white};
+    width: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    height: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    border-radius: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    opacity: 0.8;
+  }
+`;
+/**
+ * Scrollbar Tiny (2px)
+ * Extends the regular scrollbar
+ */
+const scrollbarSmall = styled_components_1.css `
+  --scrollbarSize: 2px;
+  ${scrollbar};
+`;
+/**
+ * Mixins --
+ * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
+ */
+exports.Mixins = {
+    noSelect,
+    textOverflow,
+    scrollbar: {
+        [constants_1.Size.base]: scrollbar,
+        [constants_1.Size.small]: scrollbarSmall,
+    },
+};

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",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",