@openfin/ui-library 0.0.33

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

@@ -0,0 +1,269 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, 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;
+const RadixIcons = __importStar(require("@modulz/radix-icons"));
+const styled_components_1 = require("styled-components");
+/**
+ * Color --
+ * Color maps names to values.
+ * This is the "raw" store of all OpenFin colors
+ * referenced by their Figma names.
+ *
+ * This is the only place Color values should be defined
+ */
+exports.Color = {
+    white: '#FFFFFF',
+    lightGray1: '#F3F5F8',
+    lightGray2: '#ECEEF1',
+    lightGray3: '#DDDFE4',
+    lightGray4: '#C9CBD2',
+    neutralGray: '#7D808A',
+    darkGray1: '#53565F',
+    darkGray2: '#383A40',
+    darkGray3: '#2F3136',
+    darkGray4: '#24262B',
+    darkGray5: '#1E1F23',
+    darkGray6: '#111214',
+    openFinDarkest: '#3D39CD',
+    openFinDarker: '#4642E0',
+    openFin: '#504CFF',
+    openFinLight: '#5254FB',
+    openFinLighter: '#5C5EFE',
+    openFinLightest: '#6864FF',
+    active: '#189FFB',
+    success: '#35C759',
+    warning: '#F48F00',
+    error: '#C93400',
+    accent1: '#8C61FF',
+    accent2: '#36C3FE',
+    accent3: '#00CC88',
+    accent4: '#FFEB00',
+    accent5: '#FF8C4C',
+    accent6: '#FF5E60',
+    accent7: '#FF8FB8',
+    white00: 'rgba(255,255,255,0.0)',
+    white10: 'rgba(255,255,255,0.1)',
+    white20: 'rgba(255,255,255,0.2)',
+    white30: 'rgba(255,255,255,0.3)',
+    white40: 'rgba(255,255,255,0.4)',
+    white50: 'rgba(255,255,255,0.5)',
+    white60: 'rgba(255,255,255,0.6)',
+    white70: 'rgba(255,255,255,0.7)',
+    white80: 'rgba(255,255,255,0.8)',
+    white90: 'rgba(255,255,255,0.9)',
+    black00: 'rgba(0,0,0,0.0)',
+    black10: 'rgba(0,0,0,0.1)',
+    black20: 'rgba(0,0,0,0.2)',
+    black30: 'rgba(0,0,0,0.3)',
+    black40: 'rgba(0,0,0,0.4)',
+    black50: 'rgba(0,0,0,0.5)',
+    black60: 'rgba(0,0,0,0.6)',
+    black70: 'rgba(0,0,0,0.7)',
+    black80: 'rgba(0,0,0,0.8)',
+    black90: 'rgba(0,0,0,0.9)',
+    transparent: 'transparent',
+};
+/**
+ * Size --
+ * Common keys used to describe a range of values
+ * - Unit, UnitPx, Shadow, FontSize
+ */
+exports.Size = {
+    xsmall: 'xsmall',
+    small: 'small',
+    base: 'base',
+    large: 'large',
+    xlarge: 'xlarge',
+    xxlarge: 'xxlarge',
+    xxxlarge: 'xxxlarge',
+    xxxxlarge: 'xxxxlarge',
+};
+/**
+ * SizeName --
+ * Primarly a Storybook Helper for displaying human-friendly size names
+ * It's more intuitive to maintain this if it lives here
+ */
+exports.SizeName = {
+    [exports.Size.xsmall]: 'Extra Small',
+    [exports.Size.small]: 'Small',
+    [exports.Size.base]: 'Base',
+    [exports.Size.large]: 'Large',
+    [exports.Size.xlarge]: 'Extra Large',
+    [exports.Size.xxlarge]: '2X Large',
+    [exports.Size.xxxlarge]: '3X Large',
+    [exports.Size.xxxxlarge]: '4X Large',
+};
+/**
+ * Unit --
+ * Design System works on a 4px Grid
+ * Units are represented as numbers here for convienence in Javascript, e.g. `Unit.base * 4`
+ */
+exports.Unit = {
+    [exports.Size.xsmall]: 4,
+    [exports.Size.small]: 8,
+    [exports.Size.base]: 12,
+    [exports.Size.large]: 16,
+    [exports.Size.xlarge]: 20,
+    [exports.Size.xxlarge]: 24,
+    [exports.Size.xxxlarge]: 32,
+    [exports.Size.xxxxlarge]: 48,
+};
+/**
+ * UnitPx / "px" --
+ * Design System works on a 4px Grid
+ * UnitPx includes the px suffix for convienence in Styled Components
+ */
+exports.UnitPx = {
+    [exports.Size.xsmall]: '4px',
+    [exports.Size.small]: '8px',
+    [exports.Size.base]: '12px',
+    [exports.Size.large]: '16px',
+    [exports.Size.xlarge]: '20px',
+    [exports.Size.xxlarge]: '24px',
+    [exports.Size.xxxlarge]: '32px',
+    [exports.Size.xxxxlarge]: '48px',
+};
+/**
+ * Radius --
+ * The border radius values supported in the design system
+ */
+exports.Radius = {
+    [exports.Size.small]: '4px',
+    [exports.Size.base]: '8px',
+    [exports.Size.large]: '24px',
+    pill: '100vh',
+    round: '50%',
+    none: '0',
+};
+/**
+ * Shadow --
+ * Design System drop shadows
+ * Note: This does not include any `text-shadow`
+ */
+exports.Shadow = {
+    [exports.Size.small]: `0 0 ${exports.UnitPx.base} rgba(0,0,0,0.5)`,
+    [exports.Size.base]: `0 0 ${exports.UnitPx.large} rgba(0,0,0,0.5)`,
+    [exports.Size.large]: `0 0 ${exports.UnitPx.xlarge} rgba(0,0,0,0.5)`,
+};
+const fonts = [
+    'Inter',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'Segoe UI',
+    'Roboto',
+    'Oxygen-Sans',
+    'Ubuntu',
+    'Cantarell',
+    'Helvetica Neue',
+    'sans-serif',
+];
+/**
+ * FontStack --
+ * Design System uses "Inter" and we include @font-face definitions to load a CDN hosted version of the font
+ * The rest of the stack includes reasonable fallbacks for contingency cases where the CDN asset fails to load
+ */
+exports.FontStack = fonts.join(', ');
+/**
+ * FontSize --
+ * Design System font sizes using standard scale
+ */
+exports.FontSize = {
+    [exports.Size.xsmall]: '8px',
+    [exports.Size.small]: '10px',
+    [exports.Size.base]: '12px',
+    [exports.Size.large]: '14px',
+    [exports.Size.xlarge]: '16px',
+    [exports.Size.xxlarge]: '18px',
+    [exports.Size.xxxlarge]: '20px',
+    [exports.Size.xxxxlarge]: '40px',
+};
+/**
+ * FontWeight --
+ * Design System font weights (three)
+ */
+exports.FontWeight = {
+    normal: 400,
+    bold: 600,
+};
+/**
+ * LineHeight --
+ * Read about "unitless" line-height
+ * @link https://css-tricks.com/almanac/properties/l/line-height/#unitless-line-heights
+ */
+exports.LineHeight = {
+    ui: 1,
+    heading: 1.2,
+    text: 1.5,
+};
+/**
+ * Typography --
+ * Design System typography is a full set of values for a `font:...` property.
+ * @example "12px/16px Inter, ..."
+ * @example "20px/24px Inter, ..."
+ */
+exports.Typography = {
+    base: `${exports.FontSize.base}/${exports.LineHeight.text} ${exports.FontStack}`,
+};
+/**
+ * Transitions --
+ * Design System transition easings because UI motion feels better if everything moves the same way.
+ */
+exports.Transition = {
+    base: '250ms ease-in-out',
+    none: '0ms',
+};
+/**
+ * IconSet --
+ * Design System uses Radix Icons `@modulz/radix-icons`
+ * @link https://icons.modulz.app/
+ * @link https://github.com/radix-ui/icons
+ *
+ * This exposes them as a named set through OpenFin UI Library
+ */
+exports.IconSet = Object.assign({}, RadixIcons);
+/**
+ * IconSize --
+ * Design System standard set of icon sizes
+ */
+exports.IconSize = {
+    [exports.Size.xsmall]: exports.UnitPx.small,
+    [exports.Size.small]: exports.UnitPx.base,
+    [exports.Size.base]: exports.UnitPx.large,
+    [exports.Size.large]: exports.UnitPx.xlarge,
+    [exports.Size.xlarge]: exports.UnitPx.xxlarge,
+    [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/font-face-base64.d.ts

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