@zendeskgarden/react-theming 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/elements/ThemeProvider.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React from 'react';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import DEFAULT_THEME from './theme/index.js';
+
+const ThemeProvider = _ref => {
+  let {
+    theme,
+    ...other
+  } = _ref;
+  return React.createElement(ThemeProvider$1, Object.assign({
+    theme: theme
+  }, other));
+};
+ThemeProvider.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { ThemeProvider };

package/dist/esm/elements/palette/index.js

@@ -0,0 +1,283 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const PALETTE = {
+  black: '#000',
+  white: '#fff',
+  product: {
+    support: '#00a656',
+    message: '#37b8af',
+    explore: '#30aabc',
+    gather: '#f6c8be',
+    guide: '#eb4962',
+    connect: '#ff6224',
+    chat: '#f79a3e',
+    talk: '#efc93d',
+    sell: '#c38f00'
+  },
+  grey: {
+    100: '#f4f6f6',
+    200: '#e4e7e9',
+    300: '#c7cdd0',
+    400: '#afb7bd',
+    500: '#88929d',
+    600: '#7f8a95',
+    700: '#65707a',
+    800: '#4b565f',
+    900: '#2e373f',
+    1000: '#1e252a',
+    1100: '#171b1f',
+    1200: '#101316'
+  },
+  blue: {
+    100: '#edf7ff',
+    200: '#d9eaf7',
+    300: '#b3d0e7',
+    400: '#92bbdb',
+    500: '#5896c9',
+    600: '#4b8ec5',
+    700: '#1f73b7',
+    800: '#18578b',
+    900: '#103859',
+    1000: '#0b253b',
+    1100: '#081c2d',
+    1200: '#061420'
+  },
+  red: {
+    100: '#fff2f3',
+    200: '#fde1e3',
+    300: '#f5bfc4',
+    400: '#f2a0a6',
+    500: '#e76973',
+    600: '#e35c67',
+    700: '#cd3642',
+    800: '#9d2933',
+    900: '#6c1219',
+    1000: '#431418',
+    1100: '#2d1315',
+    1200: '#1b1011'
+  },
+  yellow: {
+    100: '#fff3e4',
+    200: '#ffe2c2',
+    300: '#ffc079',
+    400: '#fba246',
+    500: '#d87916',
+    600: '#ce7117',
+    700: '#ac5918',
+    800: '#874114',
+    900: '#512d17',
+    1000: '#312016',
+    1100: '#221913',
+    1200: '#17120f'
+  },
+  green: {
+    100: '#eef8f4',
+    200: '#d7ede4',
+    300: '#b4d3c6',
+    400: '#91bfae',
+    500: '#3fa17e',
+    600: '#329974',
+    700: '#037f52',
+    800: '#186045',
+    900: '#0b3e2b',
+    1000: '#0c291e',
+    1100: '#0b1e17',
+    1200: '#0a1511'
+  },
+  kale: {
+    100: '#ecf9f9',
+    200: '#d8ebeb',
+    300: '#b3d2d0',
+    400: '#94bebd',
+    500: '#5e9b9c',
+    600: '#579394',
+    700: '#40787a',
+    800: '#275c5f',
+    900: '#0a3c42',
+    1000: '#02282d',
+    1100: '#041e22',
+    1200: '#061517'
+  },
+  fuschia: {
+    100: '#fbf3f8',
+    200: '#f6e2ef',
+    300: '#ecc0dc',
+    400: '#e3a2cc',
+    500: '#d36faf',
+    600: '#cf63a8',
+    700: '#b34496',
+    800: '#971688',
+    900: '#640e59',
+    1000: '#430a3d',
+    1100: '#34072f',
+    1200: '#260523',
+    M400: '#cf62a8',
+    M600: '#a8458c'
+  },
+  pink: {
+    100: '#fcf4f5',
+    200: '#f7e3e8',
+    300: '#edc1ca',
+    400: '#e4a5b3',
+    500: '#d57388',
+    600: '#e35b72',
+    700: '#d62054',
+    800: '#94304e',
+    900: '#611f32',
+    1000: '#401522',
+    1100: '#31101a',
+    1200: '#230b12',
+    M400: '#d57287',
+    M600: '#b23a5d'
+  },
+  crimson: {
+    100: '#fbf4f3',
+    200: '#f6e4e1',
+    300: '#eac3bc',
+    400: '#e1a89e',
+    500: '#d1796a',
+    600: '#cd6e5d',
+    700: '#be4938',
+    800: '#a32217',
+    900: '#6b160f',
+    1000: '#480f0a',
+    1100: '#370c08',
+    1200: '#280806',
+    M400: '#cc6c5b',
+    M600: '#b24a3c'
+  },
+  orange: {
+    100: '#fdf3ed',
+    200: '#f9e3d3',
+    300: '#f2c39f',
+    400: '#eda671',
+    500: '#e2721e',
+    600: '#d26e20',
+    700: '#af5626',
+    800: '#85421d',
+    900: '#562b13',
+    1000: '#3a1c0d',
+    1100: '#2c150a',
+    1200: '#1f0f07',
+    M400: '#d4772c',
+    M600: '#b35827'
+  },
+  lemon: {
+    100: '#fff6cf',
+    200: '#ffe682',
+    300: '#ffc417',
+    400: '#eda900',
+    500: '#ba8900',
+    600: '#b08100',
+    700: '#8f6900',
+    800: '#6d5000',
+    900: '#463300',
+    1000: '#2f2200',
+    1100: '#231a00',
+    1200: '#191200',
+    M400: '#e7a500',
+    M600: '#c38f00'
+  },
+  lime: {
+    100: '#ebfae6',
+    200: '#c9f2bd',
+    300: '#88e270',
+    400: '#4ecf2a',
+    500: '#4da42a',
+    600: '#489b20',
+    700: '#3d7e19',
+    800: '#385f23',
+    900: '#243c16',
+    1000: '#18280f',
+    1100: '#121e0b',
+    1200: '#0d1508',
+    M400: '#519e2d',
+    M600: '#47782c'
+  },
+  mint: {
+    100: '#d6ffeb',
+    200: '#83ffc3',
+    300: '#00ea79',
+    400: '#00d16d',
+    500: '#00a756',
+    600: '#279b65',
+    700: '#2d7d55',
+    800: '#225f41',
+    900: '#163d2a',
+    1000: '#0f291c',
+    1100: '#0b1e15',
+    1200: '#08150f',
+    M400: '#299c66',
+    M600: '#2e8057'
+  },
+  teal: {
+    100: '#d6fefa',
+    200: '#70fdef',
+    300: '#03e5ce',
+    400: '#03ccb8',
+    500: '#02a392',
+    600: '#1f998b',
+    700: '#367a74',
+    800: '#2e5c59',
+    900: '#1e3b39',
+    1000: '#142726',
+    1100: '#0f1d1c',
+    1200: '#0a1514',
+    M400: '#2d9e8f',
+    M600: '#3c7873'
+  },
+  azure: {
+    100: '#f0f7fe',
+    200: '#d7eafb',
+    300: '#a8d1f7',
+    400: '#7fbbf3',
+    500: '#3795ed',
+    600: '#598ad0',
+    700: '#2770c4',
+    800: '#2c5689',
+    900: '#1d3758',
+    1000: '#13253a',
+    1100: '#0e1b2c',
+    1200: '#0a131f',
+    M400: '#5f8dcf',
+    M600: '#3a70b2'
+  },
+  royal: {
+    100: '#f5f6fc',
+    200: '#e3e6f7',
+    300: '#c5cbee',
+    400: '#abb3e7',
+    500: '#7f8cda',
+    600: '#7182e1',
+    700: '#4d67d3',
+    800: '#1f40d8',
+    900: '#142a8d',
+    1000: '#0e1c5f',
+    1100: '#0a1548',
+    1200: '#070f34',
+    M400: '#7986d8',
+    M600: '#4b61c3'
+  },
+  purple: {
+    100: '#f9f4fb',
+    200: '#efe3f5',
+    300: '#ddc3e9',
+    400: '#cea8e0',
+    500: '#b57acf',
+    600: '#b16ecf',
+    700: '#9256b1',
+    800: '#722eb8',
+    900: '#491b7f',
+    1000: '#311256',
+    1100: '#250e41',
+    1200: '#1b0a2e',
+    M400: '#b072cc',
+    M600: '#9358b0'
+  }
+};
+
+export { PALETTE as default };

package/dist/esm/elements/palette/v8.js

@@ -0,0 +1,149 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const PALETTE_V8 = {
+  black: '#000',
+  white: '#fff',
+  product: {
+    support: '#00a656',
+    message: '#37b8af',
+    explore: '#30aabc',
+    gather: '#f6c8be',
+    guide: '#eb4962',
+    connect: '#ff6224',
+    chat: '#f79a3e',
+    talk: '#efc93d',
+    sell: '#c38f00'
+  },
+  grey: {
+    100: '#f8f9f9',
+    200: '#e9ebed',
+    300: '#d8dcde',
+    400: '#c2c8cc',
+    500: '#87929d',
+    600: '#68737d',
+    700: '#49545c',
+    800: '#2f3941'
+  },
+  blue: {
+    100: '#edf7ff',
+    200: '#cee2f2',
+    300: '#adcce4',
+    400: '#5293c7',
+    500: '#337fbd',
+    600: '#1f73b7',
+    700: '#144a75',
+    800: '#0f3554'
+  },
+  red: {
+    100: '#fff0f1',
+    200: '#f5d5d8',
+    300: '#f5b5ba',
+    400: '#e35b66',
+    500: '#d93f4c',
+    600: '#cc3340',
+    700: '#8c232c',
+    800: '#681219'
+  },
+  yellow: {
+    100: '#fff7ed',
+    200: '#ffeedb',
+    300: '#fed6a8',
+    400: '#ffb057',
+    500: '#f79a3e',
+    600: '#ed8f1c',
+    700: '#ad5918',
+    800: '#703815'
+  },
+  green: {
+    100: '#edf8f4',
+    200: '#d1e8df',
+    300: '#aecfc2',
+    400: '#5eae91',
+    500: '#228f67',
+    600: '#038153',
+    700: '#186146',
+    800: '#0b3b29'
+  },
+  kale: {
+    100: '#f5fcfc',
+    200: '#daeded',
+    300: '#bdd9d7',
+    400: '#90bbbb',
+    500: '#498283',
+    600: '#17494d',
+    700: '#03363d',
+    800: '#012b30'
+  },
+  fuschia: {
+    400: '#d653c2',
+    600: '#a81897',
+    M400: '#cf62a8',
+    M600: '#a8458c'
+  },
+  pink: {
+    400: '#ec4d63',
+    600: '#d42054',
+    M400: '#d57287',
+    M600: '#b23a5d'
+  },
+  crimson: {
+    400: '#e34f32',
+    600: '#c72a1c',
+    M400: '#cc6c5b',
+    M600: '#b24a3c'
+  },
+  orange: {
+    400: '#de701d',
+    600: '#bf5000',
+    M400: '#d4772c',
+    M600: '#b35827'
+  },
+  lemon: {
+    400: '#ffd424',
+    600: '#ffbb10',
+    M400: '#e7a500',
+    M600: '#c38f00'
+  },
+  lime: {
+    400: '#43b324',
+    600: '#2e8200',
+    M400: '#519e2d',
+    M600: '#47782c'
+  },
+  mint: {
+    400: '#00a656',
+    600: '#058541',
+    M400: '#299c66',
+    M600: '#2e8057'
+  },
+  teal: {
+    400: '#02a191',
+    600: '#028079',
+    M400: '#2d9e8f',
+    M600: '#3c7873'
+  },
+  azure: {
+    400: '#3091ec',
+    600: '#1371d6',
+    M400: '#5f8dcf',
+    M600: '#3a70b2'
+  },
+  royal: {
+    400: '#5d7df5',
+    600: '#3353e2',
+    M400: '#7986d8',
+    M600: '#4b61c3'
+  },
+  purple: {
+    400: '#b552e2',
+    600: '#6a27b8',
+    M400: '#b072cc',
+    M600: '#9358b0'
+  }
+};
+
+export { PALETTE_V8 as default };

package/dist/esm/elements/theme/index.js

@@ -0,0 +1,209 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import PALETTE from '../palette/index.js';
+
+const BASE = 4;
+const borderRadii = {
+  sm: `${BASE / 2}px`,
+  md: `${BASE}px`
+};
+const borderStyles = {
+  solid: 'solid'
+};
+const borderWidths = {
+  sm: '1px',
+  md: '3px'
+};
+const borders = {
+  sm: `${borderWidths.sm} ${borderStyles.solid}`,
+  md: `${borderWidths.md} ${borderStyles.solid}`
+};
+const breakpoints = {
+  xs: '0px',
+  sm: `${BASE * 144}px`,
+  md: `${BASE * 192}px`,
+  lg: `${BASE * 248}px`,
+  xl: `${BASE * 300}px`
+};
+const colors = {
+  primaryHue: 'blue',
+  dangerHue: 'red',
+  warningHue: 'yellow',
+  successHue: 'green',
+  neutralHue: 'grey',
+  chromeHue: 'kale',
+  variables: {
+    dark: {
+      background: {
+        default: 'neutralHue.1100',
+        raised: 'neutralHue.1000',
+        recessed: 'neutralHue.1200',
+        subtle: 'neutralHue.1000',
+        emphasis: 'neutralHue.600',
+        primary: 'primaryHue.900',
+        success: 'successHue.1000',
+        warning: 'warningHue.1000',
+        danger: 'dangerHue.1000',
+        primaryEmphasis: 'primaryHue.600',
+        successEmphasis: 'successHue.600',
+        warningEmphasis: 'warningHue.600',
+        dangerEmphasis: 'dangerHue.600'
+      },
+      border: {
+        default: 'neutralHue.800',
+        emphasis: 'neutralHue.600',
+        subtle: 'neutralHue.900',
+        success: 'successHue.800',
+        warning: 'warningHue.800',
+        danger: 'dangerHue.800',
+        primaryEmphasis: 'primaryHue.600',
+        successEmphasis: 'successHue.600',
+        warningEmphasis: 'warningHue.600',
+        dangerEmphasis: 'dangerHue.600'
+      },
+      foreground: {
+        default: 'neutralHue.300',
+        subtle: 'neutralHue.500',
+        onEmphasis: 'neutralHue.1100',
+        primary: 'primaryHue.600',
+        success: 'successHue.400',
+        warning: 'warningHue.400',
+        danger: 'dangerHue.400',
+        successEmphasis: 'successHue.300',
+        warningEmphasis: 'warningHue.300',
+        dangerEmphasis: 'dangerHue.300'
+      }
+    },
+    light: {
+      background: {
+        default: 'palette.white',
+        raised: 'palette.white',
+        recessed: 'neutralHue.100',
+        subtle: 'neutralHue.100',
+        emphasis: 'neutralHue.700',
+        primary: 'primaryHue.100',
+        success: 'successHue.100',
+        warning: 'warningHue.100',
+        danger: 'dangerHue.100',
+        primaryEmphasis: 'primaryHue.700',
+        successEmphasis: 'successHue.700',
+        warningEmphasis: 'warningHue.700',
+        dangerEmphasis: 'dangerHue.700'
+      },
+      border: {
+        default: 'neutralHue.300',
+        emphasis: 'neutralHue.600',
+        subtle: 'neutralHue.200',
+        success: 'successHue.300',
+        warning: 'warningHue.300',
+        danger: 'dangerHue.300',
+        primaryEmphasis: 'primaryHue.700',
+        successEmphasis: 'successHue.700',
+        warningEmphasis: 'warningHue.700',
+        dangerEmphasis: 'dangerHue.700'
+      },
+      foreground: {
+        default: 'neutralHue.900',
+        subtle: 'neutralHue.700',
+        onEmphasis: 'palette.white',
+        primary: 'primaryHue.700',
+        success: 'successHue.700',
+        warning: 'warningHue.700',
+        danger: 'dangerHue.700',
+        successEmphasis: 'successHue.900',
+        warningEmphasis: 'warningHue.900',
+        dangerEmphasis: 'dangerHue.900'
+      }
+    }
+  }
+};
+const fonts = {
+  mono: ['SFMono-Regular' , 'Consolas' , '"Liberation Mono"' , 'Menlo', 'Courier', 'monospace'].join(','),
+  system: ['system-ui' , '-apple-system' , 'BlinkMacSystemFont' , '"Segoe UI"' , 'Roboto' , 'Oxygen-Sans' , 'Ubuntu' , 'Cantarell' , '"Helvetica Neue"', 'Arial', 'sans-serif'].join(',')
+};
+const fontSizes = {
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '22px',
+  xxl: '26px',
+  xxxl: '36px'
+};
+const fontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+const iconSizes = {
+  sm: '12px',
+  md: '16px',
+  lg: '26px'
+};
+const lineHeights = {
+  sm: `${BASE * 4}px`,
+  md: `${BASE * 5}px`,
+  lg: `${BASE * 6}px`,
+  xl: `${BASE * 7}px`,
+  xxl: `${BASE * 8}px`,
+  xxxl: `${BASE * 11}px`
+};
+const palette = {
+  ...PALETTE
+};
+delete palette.product;
+const shadowWidths = {
+  xs: '1px',
+  sm: '2px',
+  md: '3px'
+};
+const shadows = {
+  xs: color => `0 0 0 ${shadowWidths.xs} ${color}`,
+  sm: color => `0 0 0 ${shadowWidths.sm} ${color}`,
+  md: color => `0 0 0 ${shadowWidths.md} ${color}`,
+  lg: (offsetY, blurRadius, color) => `0 ${offsetY} ${blurRadius} 0 ${color}`
+};
+const space = {
+  base: BASE,
+  xxs: `${BASE}px`,
+  xs: `${BASE * 2}px`,
+  sm: `${BASE * 3}px`,
+  md: `${BASE * 5}px`,
+  lg: `${BASE * 8}px`,
+  xl: `${BASE * 10}px`,
+  xxl: `${BASE * 12}px`
+};
+const DEFAULT_THEME = {
+  borders,
+  borderRadii,
+  borderStyles,
+  borderWidths,
+  breakpoints,
+  colors: {
+    base: 'light',
+    ...colors
+  },
+  components: {},
+  fonts,
+  fontSizes,
+  fontWeights,
+  iconSizes,
+  lineHeights,
+  palette,
+  rtl: false,
+  shadowWidths,
+  shadows,
+  space
+};
+
+export { DEFAULT_THEME as default };

package/dist/esm/index.js

@@ -0,0 +1,26 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { ThemeProvider } from './elements/ThemeProvider.js';
+export { default as DEFAULT_THEME } from './elements/theme/index.js';
+export { default as PALETTE } from './elements/palette/index.js';
+export { default as PALETTE_V8 } from './elements/palette/v8.js';
+export { default as retrieveComponentStyles } from './utils/retrieveComponentStyles.js';
+export { getArrowPosition } from './utils/getArrowPosition.js';
+export { getColor } from './utils/getColor.js';
+export { getColorV8 } from './utils/getColorV8.js';
+export { getFloatingPlacements } from './utils/getFloatingPlacements.js';
+export { getFocusBoxShadow } from './utils/getFocusBoxShadow.js';
+export { default as getLineHeight } from './utils/getLineHeight.js';
+export { getMenuPosition } from './utils/getMenuPosition.js';
+export { default as mediaQuery } from './utils/mediaQuery.js';
+export { default as arrowStyles } from './utils/arrowStyles.js';
+export { useDocument } from './utils/useDocument.js';
+export { useWindow } from './utils/useWindow.js';
+export { useText } from './utils/useText.js';
+export { default as menuStyles } from './utils/menuStyles.js';
+export { SELECTOR_FOCUS_VISIBLE, focusStyles } from './utils/focusStyles.js';
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT } from './types/index.js';

package/dist/esm/types/index.js

@@ -0,0 +1,11 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const ARROW_POSITION = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
+const MENU_POSITION = ['top', 'right', 'bottom', 'left'];
+const PLACEMENT = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+
+export { ARROW_POSITION, MENU_POSITION, PLACEMENT };