🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@dhis2/ui-constants

Package Overview
Dependencies
Maintainers
2
Versions
487
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dhis2/ui-constants - npm Package Compare versions

Comparing version
10.16.2
 to
10.16.3-alpha.1
+75
src/colors.js
export const colors = {
/*blue*/
blue900: '#093371',
blue800: '#0d47a1',
blue700: '#1565c0',
blue600: '#147cd7',
blue500: '#2196f3',
blue400: '#42a5f5',
blue300: '#90caf9',
blue200: '#c5e3fc',
blue100: '#e3f2fd',
blue050: '#f5fbff',
/*teal*/
teal900: '#00332b',
teal800: '#004d40',
teal700: '#00695c',
teal600: '#00796b',
teal500: '#00897b',
teal400: '#009688',
teal300: '#4db6ac',
teal200: '#b2dfdb',
teal100: '#e0f2f1',
teal050: '#f1f9f9',
/*red*/
red900: '#330202',
red800: '#891515',
red700: '#b71c1c',
red600: '#c62828',
red500: '#d32f2f',
red400: '#f44336',
red300: '#e57373',
red200: '#ffcdd2',
red100: '#ffe5e8',
red050: '#fff5f6',
/*yellow*/
yellow900: '#6f3205',
yellow800: '#bb460d',
yellow700: '#e56408',
yellow600: '#ff8302',
yellow500: '#ff9302',
yellow400: '#ffa902',
yellow300: '#ffc324',
yellow200: '#ffe082',
yellow100: '#ffecb3',
yellow050: '#fff8e1',
/*green*/
green900: '#103713',
green800: '#1b5e20',
green700: '#2e7d32',
green600: '#388e3c',
green500: '#43a047',
green400: '#4caf50',
green300: '#a5d6a7',
green200: '#c8e6c9',
green100: '#e8f5e9',
green050: '#f4fbf4',
/*grey*/
grey900: '#212934',
grey800: '#404b5a',
grey700: '#4a5768',
grey600: '#6C7787',
grey500: '#a0adba',
grey400: '#d5dde5',
grey300: '#e8edf2',
grey200: '#f3f5f7',
grey100: '#f8f9fa',
grey050: '#fbfcfd',
white: '#ffffff',
}
+8
src/elevations.js
export const elevations = {
e100: '0px 1px 2px rgba(33,41,52,0.06), 0px 1px 3px rgba(33,41,52,0.1)',
e200: '0px 0px 1px rgba(33,41,52,0.1), 0px 4px 6px -1px rgba(33,41,52,0.1), 0px 2px 4px -1px rgba(33,41,52,0.06)',
e300: '0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05)',
e400: '0px 25px 50px -12px rgba(33, 41, 52, 0.25)',
popover:
'0 4px 12px rgba(12, 14, 16, 0.15), 0 0 0 1px rgba(12, 14, 16, 0.05)',
}
+7
src/index.js
export * from './colors.js'
export * from './theme.js'
export * from './layers.js'
export * from './spacers.js'
export * from './elevations.js'
export * as sharedPropTypes from './shared-prop-types.js'
+5
src/layers.js
export const layers = {
applicationTop: 2000,
blocking: 3000,
alert: 9999,
}
+146
src/shared-prop-types.js
import { mutuallyExclusive } from '@dhis2/prop-types'
import PropTypes from 'prop-types'
/**
* Status propType
* @return {PropType} Mutually exclusive status: valid/warning/error
*/
export const statusPropType = mutuallyExclusive(
['valid', 'warning', 'error'],
PropTypes.bool
)
// Exported for storybook
export const statusArgType = {
table: {
type: {
summary: 'bool',
detail: "'valid', 'warning', and 'error' are mutually exclusive props",
},
},
control: { type: 'boolean' },
}
export const buttonVariantArgType =
// No description because it should be set for the component description
{
table: { type: { summary: 'bool' } },
control: { type: 'boolean' },
}
/**
* Size variant propType
* @return {PropType} Mutually exclusive variants:
* small/large
*/
export const sizePropType = mutuallyExclusive(
['small', 'large', 'extrasmall', 'fluid'],
PropTypes.bool
)
export const sizeArgType = {
// No description because it should be set in the component description
table: {
type: {
summary: 'bool',
detail: 'size props are mutually exclusive',
},
},
control: {
type: 'boolean',
},
}
/**
* Inside alignment props
* @return {PropType} PropType that validates the inside alignment.
*/
export const insideAlignmentPropType = PropTypes.oneOf([
'top',
'middle',
'bottom',
])
export const insideAlignmentArgType = {
description: 'Inside alignment of the component',
table: {
type: {
summary: "'top' | 'middle' | 'bottom'",
},
},
control: {
type: 'select',
options: ['top', 'middle', 'bottom'],
},
}
/**
* Placement properties against reference element
* @return {PropType} PropType that validates placements.
*/
export const popperPlacementPropType = PropTypes.oneOf([
'auto',
'auto-start',
'auto-end',
'top',
'top-start',
'top-end',
'bottom',
'bottom-start',
'bottom-end',
'right',
'right-start',
'right-end',
'left',
'left-start',
'left-end',
])
export const popperPlacementArgType = {
description: 'Placement properties relative to reference element',
table: {
type: {
summary: 'string (one of several)',
detail: 'see options in menu',
},
},
control: {
type: 'select',
options: [
'auto',
'auto-start',
'auto-end',
'top',
'top-start',
'top-end',
'bottom',
'bottom-start',
'bottom-end',
'right',
'right-start',
'right-end',
'left',
'left-start',
'left-end',
],
},
}
/**
* Either a DOM node, React ref or a virtual element
* @return {PropType} Validate that prop is either a function or an
* instance of an Element.
*/
export const popperReferencePropType = PropTypes.oneOfType([
// DOM node
PropTypes.instanceOf(Element),
// React ref - React.useRef() or React.createRef()
PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
// Virtual element
PropTypes.shape({ getBoundingClientRect: PropTypes.func }),
])
export const popperReferenceArgType = {
description:
'A reference to the element to position against: either a DOM node, React ref, \
or an instance of an element',
table: {
type: { summary: 'DOM node | React ref | Virtual element' },
},
control: { type: null },
}
+37
src/spacers.js
/** Number values of the spacer definitions */
export const spacersNum = {
dp4: 4,
dp8: 8,
dp12: 12,
dp16: 16,
dp24: 24,
dp32: 32,
dp48: 48,
dp64: 64,
dp96: 96,
dp128: 128,
dp192: 192,
dp256: 256,
dp384: 384,
dp512: 512,
dp640: 640,
}
/** Pixel values of the spacer definitions */
export const spacers = {
dp4: `${spacersNum.dp4}px`,
dp8: `${spacersNum.dp8}px`,
dp12: `${spacersNum.dp12}px`,
dp16: `${spacersNum.dp16}px`,
dp24: `${spacersNum.dp24}px`,
dp32: `${spacersNum.dp32}px`,
dp48: `${spacersNum.dp48}px`,
dp64: `${spacersNum.dp64}px`,
dp96: `${spacersNum.dp96}px`,
dp128: `${spacersNum.dp128}px`,
dp192: `${spacersNum.dp192}px`,
dp256: `${spacersNum.dp256}px`,
dp384: `${spacersNum.dp384}px`,
dp512: `${spacersNum.dp512}px`,
dp640: `${spacersNum.dp640}px`,
}
+38
src/theme.js
import { colors } from './colors.js'
export const theme = {
/* theme */
fonts: 'Roboto, sans-serif',
/*primary*/
primary900: colors.blue900,
primary800: colors.blue800,
primary700: colors.blue700,
primary600: colors.blue600,
primary500: colors.blue500,
primary400: colors.blue400,
primary300: colors.blue300,
primary200: colors.blue200,
primary100: colors.blue100,
primary050: colors.blue050,
/*secondary*/
secondary900: colors.teal900,
secondary800: colors.teal800,
secondary700: colors.teal700,
secondary600: colors.teal600,
secondary500: colors.teal500,
secondary400: colors.teal400,
secondary300: colors.teal300,
secondary200: colors.teal200,
secondary100: colors.teal100,
secondary050: colors.teal050,
/*status*/
default: colors.grey700,
error: colors.red500,
valid: colors.blue600,
warning: colors.yellow500,
disabled: colors.grey600,
focus: colors.blue600,
}
+3
-2
package.json
{
"name": "@dhis2/ui-constants",
"version": "10.16.2",
"version": "10.16.3-alpha.1",
"description": "Constants used in the UI libs",

@@ -34,5 +34,6 @@ "main": "./build/cjs/index.js",

"build",
"types"
"types",
"src"
],
"types": "types"
}