grommet
Version:
focus on the essential experience
2,139 lines (2,138 loc) • 62.9 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import { Actions } from 'grommet-icons/icons/Actions';
import { AssistListening } from 'grommet-icons/icons/AssistListening';
import { CircleInformation } from 'grommet-icons/icons/CircleInformation';
import { ClosedCaption } from 'grommet-icons/icons/ClosedCaption';
import { Expand } from 'grommet-icons/icons/Expand';
import { FormClose } from 'grommet-icons/icons/FormClose';
import { FormDown } from 'grommet-icons/icons/FormDown';
import { FormNext } from 'grommet-icons/icons/FormNext';
import { FormPrevious } from 'grommet-icons/icons/FormPrevious';
import { FormUp } from 'grommet-icons/icons/FormUp';
import { Next } from 'grommet-icons/icons/Next';
import { Pause } from 'grommet-icons/icons/Pause';
import { Play } from 'grommet-icons/icons/Play';
import { FormPin } from 'grommet-icons/icons/FormPin';
import { Previous } from 'grommet-icons/icons/Previous';
import { StatusCriticalSmall } from 'grommet-icons/icons/StatusCriticalSmall';
import { StatusGoodSmall } from 'grommet-icons/icons/StatusGoodSmall';
import { StatusWarningSmall } from 'grommet-icons/icons/StatusWarningSmall';
import { StatusUnknownSmall } from 'grommet-icons/icons/StatusUnknownSmall';
import { Subtract } from 'grommet-icons/icons/Subtract';
import { Volume } from 'grommet-icons/icons/Volume';
import { VolumeLow } from 'grommet-icons/icons/VolumeLow';
import { base as iconBase } from 'grommet-icons/themes/base';
import { deepFreeze, deepMerge } from '../utils/object';
import { parseMetricToNum } from '../utils/mixins';
var brandColor = '#7D4CDB';
var accentColors = ['#6FFFB0', '#FD6FFF', '#81FCED', '#FFCA58'];
var neutralColors = ['#00873D', '#3D138D', '#00739D', '#A2423D'];
var statusColors = {
critical: '#EB0000',
error: '#B30000',
warning: '#C27B00',
ok: '#009E67',
unknown: '#919191',
disabled: '#CCCCCC'
};
var darkColors = ['#333333', '#555555', '#777777', '#999999', '#999999', '#999999'];
var lightColors = ['#F8F8F8', '#F2F2F2', '#EDEDED', '#DADADA', '#DADADA', '#DADADA'];
var focusColor = accentColors[0];
var colors = {
active: 'rgba(221, 221, 221, 0.5)',
'background-back': {
dark: '#33333308',
light: '#EDEDED'
},
'background-front': {
dark: '#444444',
light: '#FFFFFF'
},
'background-contrast': {
light: '#33333310',
dark: '#FFFFFF18'
},
'active-background': 'background-contrast',
'active-text': 'text-strong',
black: '#000000',
border: {
dark: 'rgba(255, 255, 255, 0.33)',
light: 'rgba(0, 0, 0, 0.33)'
},
brand: brandColor,
control: {
dark: 'accent-1',
light: 'brand'
},
focus: focusColor,
'graph-0': 'accent-1',
'graph-1': 'neutral-1',
'graph-2': 'neutral-2',
'graph-3': 'neutral-3',
'graph-4': 'neutral-4',
placeholder: '#AAAAAA',
selected: 'brand',
text: {
dark: '#f8f8f8',
light: '#444444'
},
'text-strong': {
dark: '#FFFFFF',
light: '#000000'
},
'text-weak': {
dark: '#CCCCCC',
light: '#555555'
},
'text-xweak': {
dark: '#BBBBBB',
light: '#666666'
},
icon: {
dark: '#f8f8f8',
light: '#666666'
},
'selected-background': 'brand',
'selected-text': 'text-strong',
white: '#FFFFFF'
};
var colorArray = function colorArray(array, prefix) {
return array.forEach(function (color, index) {
colors[prefix + "-" + (index + 1)] = color;
});
};
colorArray(accentColors, 'accent');
colorArray(darkColors, 'dark');
colorArray(lightColors, 'light');
colorArray(neutralColors, 'neutral');
Object.keys(statusColors).forEach(function (color) {
colors["status-" + color] = statusColors[color];
});
export var generate = function generate(baseSpacing, scale) {
if (baseSpacing === void 0) {
baseSpacing = 24;
}
if (scale === void 0) {
scale = 6;
}
// 24
var baseFontSize = baseSpacing * 0.75; // 18
var fontScale = baseSpacing / scale; // 4
var fontSizing = function fontSizing(factor) {
return {
size: baseFontSize + factor * fontScale + "px",
height: baseSpacing + factor * fontScale + "px",
// maxWidth chosen to be ~50 characters wide
// see: https://ux.stackexchange.com/a/34125
maxWidth: baseSpacing * (baseFontSize + factor * fontScale) + "px"
};
};
var borderWidth = 2;
var controlBorderWidth = 1;
var result = deepMerge(iconBase, {
global: {
active: {
background: {
color: 'active',
opacity: 'medium'
},
color: {
dark: 'white',
light: 'black'
}
},
animation: {
duration: '1s',
jiggle: {
duration: '0.1s'
}
},
// backgrounds: undefined,
borderSize: {
xsmall: '1px',
small: '2px',
medium: baseSpacing / 6 + "px",
// 4
large: baseSpacing / 2 + "px",
// 12
xlarge: baseSpacing + "px" // 24
},
breakpoints: {
small: {
value: baseSpacing * 32,
// 768
borderSize: {
xsmall: '1px',
small: '2px',
medium: baseSpacing / 6 + "px",
// 4
large: baseSpacing / 4 + "px",
// 6
xlarge: baseSpacing / 2 + "px" // 12
},
edgeSize: {
none: '0px',
hair: '1px',
// for Chart
xxsmall: '2px',
xsmall: baseSpacing / 8 + "px",
// 3
small: baseSpacing / 4 + "px",
// 6
medium: baseSpacing / 2 + "px",
// 12
large: baseSpacing + "px",
// 24
xlarge: baseSpacing * 2 + "px" // 48
},
// radius: {},
size: {
xxsmall: baseSpacing + "px",
// 24
xsmall: baseSpacing * 2 + "px",
// 48
small: baseSpacing * 4 + "px",
// 96
medium: baseSpacing * 8 + "px",
// 192
large: baseSpacing * 16 + "px",
// 384
xlarge: baseSpacing * 32 + "px",
// 768
full: '100%'
}
},
medium: {
value: baseSpacing * 64 // 1536
},
large: {} // anything above 'medium'
},
// Breakpoints used at Server Side Rendering for the initial rendering
// These values correspond to the theme breakpoints
deviceBreakpoints: {
phone: 'small',
tablet: 'medium',
computer: 'large'
},
colors: colors,
control: {
border: {
width: controlBorderWidth + "px",
radius: '4px',
color: 'border'
},
disabled: {
opacity: 0.3
}
},
// The time to wait after the user stopped typing, measured in ms.
// A half second (500ms) debounce can be a helpful starting point.
// You want to give the user time to fill out a field, but capture
// their attention before they move on past it. 2 second (2000ms)
// might be too long depending on how fast people type, and 200ms
// would be an eye blink
debounceDelay: 500,
// deprecated: {
// backgrounds: [
// {
// name: string,
// message: string,
// },
// ],
// colors: [
// {
// name: string,
// message: string,
// },
// ],
// button: {
// kind: [
// {
// name: string,
// message: string,
// },
// ],
// },
// },
drop: {
// intelligentMargin: undefined,
background: {
dark: 'black',
light: 'white'
},
border: {
radius: '0px'
},
// margin: undefined
shadowSize: 'small',
// shadowSize is deprecated, use 'elevation'
zIndex: '20'
},
edgeSize: {
none: '0px',
hair: '1px',
// for Chart
xxsmall: baseSpacing / 8 + "px",
// 3
xsmall: baseSpacing / 4 + "px",
// 6
small: baseSpacing / 2 + "px",
// 12
medium: baseSpacing + "px",
// 24
large: baseSpacing * 2 + "px",
// 48
xlarge: baseSpacing * 4 + "px",
// 96
responsiveBreakpoint: 'small'
},
elevation: {
light: {
none: 'none',
xsmall: '0px 1px 2px rgba(0, 0, 0, 0.20)',
small: '0px 2px 4px rgba(0, 0, 0, 0.20)',
medium: '0px 4px 8px rgba(0, 0, 0, 0.20)',
large: '0px 8px 16px rgba(0, 0, 0, 0.20)',
xlarge: '0px 12px 24px rgba(0, 0, 0, 0.20)'
},
dark: {
none: 'none',
xsmall: '0px 2px 2px rgba(255, 255, 255, 0.40)',
small: '0px 4px 4px rgba(255, 255, 255, 0.40)',
medium: '0px 6px 8px rgba(255, 255, 255, 0.40)',
large: '0px 8px 16px rgba(255, 255, 255, 0.40)',
xlarge: '0px 12px 24px rgba(255, 255, 255, 0.40)'
}
},
focus: {
// shadow or outline are required for accessibility
border: {
// remove to only have shadow
color: 'focus'
},
// outline: { color: undefined, size: undefined },
shadow: {
color: 'focus',
size: '2px'
},
twoColor: undefined,
inset: {
border: {
// remove to only have shadow
color: 'focus'
},
outline: {
color: 'focus',
size: '2px',
offset: '-2px'
},
shadow: undefined,
twoColor: undefined
}
},
font: _extends({}, fontSizing(0)),
hover: {
background: {
color: 'active',
opacity: 'medium'
},
color: {
dark: 'white',
light: 'black'
}
},
input: {
padding: {
horizontal: parseMetricToNum(baseSpacing / 2 + "px") - parseMetricToNum(controlBorderWidth + "px") + "px",
vertical: parseMetricToNum(baseSpacing / 2 + "px") - parseMetricToNum(controlBorderWidth + "px") + "px"
},
font: {
// size: undefined,
// height: undefined,
weight: 600
},
// deprecate in v3
// weight: undefined,
readOnly: {
// background: undefined,
// border: {
// color: undefined,
// },
}
},
opacity: {
strong: 0.8,
medium: 0.4,
weak: 0.1
},
// radius: {},
selected: {
background: 'selected',
color: 'white'
},
spacing: baseSpacing + "px",
size: {
xxsmall: baseSpacing * 2 + "px",
// 48
xsmall: baseSpacing * 4 + "px",
// 96
small: baseSpacing * 8 + "px",
// 192
medium: baseSpacing * 16 + "px",
// 384
large: baseSpacing * 32 + "px",
// 768
xlarge: baseSpacing * 48 + "px",
// 1152
xxlarge: baseSpacing * 64 + "px",
// 1536
full: '100%'
}
},
// icon: {
// extend: undefined,
// matchSize: undefined,
// size: undefined,
// },
accordion: {
icon: {
container: {
pad: {
horizontal: 'small'
}
}
},
label: {
container: {
pad: {
horizontal: 'xsmall'
}
}
},
panel: {
// border: {
// side: 'bottom',
// color: 'border',
// },
},
border: {
side: 'bottom',
color: 'border'
},
heading: {
level: '4' // level ranges from 1-6
// margin: undefined
},
hover: {
// background: undefined,
color: {
dark: 'light-4',
light: 'dark-3'
},
// deprecated
heading: {
color: {
dark: 'light-4',
light: 'dark-3'
}
}
},
icons: {
collapse: FormUp,
expand: FormDown
// color: { dark: undefined, light: undefined },
}
},
anchor: {
color: {
dark: 'accent-1',
light: 'brand'
},
gap: 'small',
hover: {
textDecoration: 'underline'
// fontWeight: undefined,
// extend: undefined,
},
// icon: {
// color: undefined
// },
iconOnly: {
pad: 'small'
},
textDecoration: 'none',
fontWeight: 600
// size: {
// medium: {
// color: undefined,
// fontWeight: undefined,
// textDecoration: undefined,
// gap: undefined,
// },
// },
// extend: undefined,
},
avatar: {
// extend: undefined,
size: {
xsmall: baseSpacing * 0.75 + "px",
// 18px
small: baseSpacing + "px",
// 24px
medium: baseSpacing * 2 + "px",
// default 48px
large: baseSpacing * 3 + "px",
// 72px
xlarge: baseSpacing * 4 + "px",
// 96px
'2xl': baseSpacing * 5 + "px",
// 120px
'3xl': baseSpacing * 6 + "px",
// 144px
'4xl': baseSpacing * 7 + "px",
// 168px
'5xl': baseSpacing * 8 + "px" // 192px
},
text: {
size: {
xsmall: 'small',
// 14px
small: 'medium',
// 18px
medium: 'large',
// 22px
large: 'xlarge',
// 26px
xlarge: 'xxlarge',
// 34px
'2xl': '3xl',
// 42px
'3xl': '4xl',
// 54px
'4xl': '5xl',
// 70px
'5xl': '6xl' // 90px
}
// fontWeight: undefined,
// extend: undefined
}
},
box: {
border: {
offset: 'xsmall'
},
responsiveBreakpoint: 'small' // when we switch rows to columns
// extend: undefined,
},
button: {
intelligentPad: true,
// background: undefined,
badge: {
// align: undefined,,
container: {
background: 'brand'
// pad: undefined,
// extend: undefined,
},
size: {
medium: baseSpacing + "px" // 24px
},
text: {
size: {
medium: 'small' // 14px
}
}
},
busy: {
gap: 'small'
// icons: {
// success: undefined,
// },
},
gap: 'small',
size: {
small: {
border: {
radius: baseSpacing * 0.75 + "px"
},
pad: {
vertical: baseSpacing / 4 - borderWidth + "px",
// 4px
horizontal: baseSpacing - borderWidth * 2 + "px" // 20px,
}
// iconOnly: {
// pad: undefined,
// },
},
medium: {
border: {
radius: baseSpacing * 0.75 + "px" // 18px
},
pad: {
vertical: baseSpacing / 4 - borderWidth + "px",
// 4px
horizontal: baseSpacing - borderWidth + "px" // 22px
}
// iconOnly: {
// pad: undefined,
// },
},
large: {
border: {
radius: baseSpacing + "px" // 24px
},
pad: {
vertical: baseSpacing / 4 + borderWidth + "px",
// 8px
horizontal: baseSpacing + borderWidth * 4 + "px" // 32px,
}
// iconOnly: {
// pad: undefined,
// },
}
},
border: {
// color: { dark: undefined, light: undefined }
width: borderWidth + "px",
radius: baseSpacing * 0.75 + "px"
},
// color: { dark: undefined, light: undefined },
// elevation: undefined,
// default: {
// background: undefined,
// border: undefined,
// color: undefined,
// direction: undefined,
// elevation: undefined,
// font: {
// size: undefined,
// weight: undefined,
// },
// icon: undefined,
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// reverse: undefined,
// extend: undefined,
// },
// primary: {
// font: {
// size: undefined,
// weight: undefined,
// },
// background: undefined,
// border: undefined,
// color: undefined,
// direction: undefined,
// elevation: undefined,
// icon: undefined,
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// reverse: undefined,
// extend: undefined,
// },
// secondary: {
// font: {
// size: undefined,
// weight: undefined,
// },
// background: undefined,
// border: undefined,
// color: undefined,
// direction: undefined,
// elevation: undefined,
// icon: undefined,
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// reverse: undefined,
// extend: undefined,
// },
// option: {
// background: undefined,
// border: undefined,
// color: undefined,
// direction: undefined,
// elevation: undefined,
// icon: undefined,
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// reverse: undefined,
// extend: undefined,
// },
active: {
background: 'active-background',
// border: undefined,
color: 'active-text'
// extend: undefined,
// default: {},
// primary: {},
// secondary: {},
},
disabled: {
// background: undefined,
// border: undefined,
// color: undefined,
opacity: 0.3
// extend: undefined,
// default: {},
// primary: {},
// secondary: {},
},
// hover: {
// background: undefined,
// border: undefined,
// color: undefined,
// extend: undefined,
// default: {},
// primary: {},
// secondary: {},
// },
padding: {
vertical: baseSpacing / 4 - borderWidth + "px",
horizontal: baseSpacing - borderWidth + "px"
},
transition: {
timing: 'ease-in-out',
duration: 0.1,
properties: ['color', 'background-color', 'border-color', 'box-shadow']
},
skeleton: {
width: {
min: '100px'
}
}
},
calendar: {
day: {
// adjacent: {
// color: undefined,
// },
hover: {
background: 'active-background'
// color: undefined,
},
selected: {
// background: undefined,
// color: undefined,
font: {
weight: 'bold'
}
// hover: {
// background: undefined,
// color: undefined,
// },
},
inRange: {
// color: undefined,
font: {
weight: 'bold'
}
// hover: {
// background: undefined,
// color: undefined,
// },
}
// extend: undefined,
},
// range: {
// background: undefined,
// },
// daySize must align with global.size
small: {
// day: {
// round: undefined,
// },
// range: {
// round: undefined,
// start: {
// round: undefined,
// },
// end: {
// round: undefined,
// },
// },
// title: {},
fontSize: baseFontSize - fontScale + "px",
title: {
container: {
pad: {
horizontal: 'xsmall'
}
}
},
lineHeight: 1.375,
daySize: baseSpacing * 8 / 7 + "px",
slideDuration: '0.2s'
},
medium: {
// day: {
// round: undefined,
// },
// range: {
// round: undefined,
// start: {
// round: undefined,
// },
// end: {
// round: undefined,
// },
// },
// title: {},
fontSize: baseFontSize + "px",
title: {
container: {
pad: {
horizontal: 'small'
}
}
},
lineHeight: 1.45,
daySize: baseSpacing * 16 / 7 + "px",
slideDuration: '0.5s'
},
large: {
// day: {
// round: undefined,
// },
// range: {
// round: undefined,
// start: {
// round: undefined,
// },
// end: {
// round: undefined,
// },
// },
// title: {},
fontSize: baseFontSize + 3 * fontScale + "px",
title: {
container: {
pad: {
horizontal: 'medium'
}
}
},
lineHeight: 1.11,
daySize: baseSpacing * 32 / 7 + "px",
slideDuration: '0.8s'
},
icons: {
previous: Previous,
next: Next,
small: {
previous: FormPrevious,
next: FormNext
}
},
heading: {
level: '4'
} // level ranges from 1-6
},
card: {
container: {
round: 'small',
elevation: 'small'
// extend: undefined,
},
// hover: {
// container: {
// elevation: undefined,
// },
// },
header: {},
body: {},
footer: {}
},
cards: {
container: {
// any box props
gap: 'xsmall'
// extend: undefined,
},
grid: {
columns: 'small',
gap: 'medium'
}
},
carousel: {
icons: {
current: Subtract,
next: Next,
previous: Previous
// color: { dark: undefined, light: undefined },
},
animation: {
duration: 1000
},
disabled: {
icons: {
// color: { dark: undefined, light: undefined },
}
}
},
chart: {
color: 'graph-0',
height: 'small',
thickness: 'medium',
width: 'medium'
// extend: undefined,
},
checkBox: {
border: {
color: {
dark: 'rgba(255, 255, 255, 0.5)',
light: 'rgba(0, 0, 0, 0.15)'
},
width: '2px'
},
check: {
// extend: undefined,
radius: '4px',
thickness: '4px'
},
label: {
align: 'center'
},
// color: { dark: undefined, light: undefined },
// extend: undefined,
gap: 'small',
hover: {
border: {
color: {
dark: 'white',
light: 'black'
}
}
// background: undefined,
// extend: undefined,
},
icon: {
// size: undefined,
// extend: undefined,
},
icons: {
// checked: undefined,
// indeterminate: undefined,
},
// pad: undefined,
size: baseSpacing + "px",
toggle: {
// background: undefined
color: {
dark: '#d9d9d9',
light: '#d9d9d9'
},
knob: {
// extend: undefined,
},
radius: baseSpacing + "px",
size: baseSpacing * 2 + "px"
// extend: undefined,
}
},
checkBoxGroup: {
container: {
// // any box props
// extend: undefined,
gap: 'small'
}
},
clock: {
analog: {
// extend: undefined,
hour: {
color: {
dark: 'light-2',
light: 'dark-3'
},
width: baseSpacing / 3 + "px",
size: baseSpacing + "px",
shape: 'round'
},
minute: {
color: {
dark: 'light-4',
light: 'dark-3'
},
width: baseSpacing / 6 + "px",
size: Math.round(baseSpacing / 2) + "px",
shape: 'round'
},
second: {
color: {
dark: 'accent-1',
light: 'accent-1'
},
width: baseSpacing / 8 + "px",
size: Math.round(baseSpacing / 2.666) + "px",
shape: 'round'
},
size: {
xsmall: baseSpacing * 2 + "px",
small: baseSpacing * 3 + "px",
medium: baseSpacing * 4 + "px",
large: baseSpacing * 6 + "px",
xlarge: baseSpacing * 9 + "px",
xxlarge: baseSpacing * 12 + "px",
huge: baseSpacing * 12 + "px" // kept for backwards compatibility
}
},
digital: {
text: {
xsmall: {
size: baseFontSize - 2 * fontScale + "px",
height: 1.5
},
small: {
size: baseFontSize - fontScale + "px",
height: 1.43
},
medium: {
size: baseFontSize + "px",
height: 1.375
},
large: {
size: baseFontSize + fontScale + "px",
height: 1.167
},
xlarge: {
size: baseFontSize + 2 * fontScale + "px",
height: 1.1875
},
xxlarge: {
size: baseFontSize + 4 * fontScale + "px",
height: 1.125
}
}
}
},
collapsible: {
minSpeed: 200,
baseline: 500
},
data: {
// button: {
// kind: undefined,
// },
drop: {
pad: 'small'
},
toolbar: {
gap: 'medium'
}
},
dataChart: {
// colors: [],
gap: 'small',
// granularity: {
// y: {},
// },
detail: {
gap: 'xsmall',
pad: 'small'
},
halfPad: {
xlarge: 'large',
large: 'medium',
medium: 'small',
small: 'xsmall',
xsmall: 'xxsmall'
},
legend: {
margin: {
top: 'small'
},
gap: 'small',
item: {
gap: 'xsmall',
pad: {
horizontal: 'small',
vertical: 'xsmall'
}
}
},
// orderedSizes: undefined,
size: {
height: 'small'
},
thickness: {
veryDense: 'hair',
dense: 'xsmall',
heavy: 'small',
moderate: 'medium',
light: 'large',
sparse: 'xlarge'
},
thicknessPad: {
xlarge: 'large',
large: 'medium',
medium: 'small',
small: 'xsmall',
xsmall: 'xxsmall'
}
},
dataFilter: {
rangeSelector: {
size: 'full',
round: 'small'
},
selectMultiple: {
dropHeight: 'medium'
}
},
dataFilters: {
// icons: {
// close: undefined,
// filter: undefined,
// }
footer: {
actions: {
margin: {
top: 'medium'
},
gap: 'small'
}
},
clearControl: {
margin: {
start: 'small'
}
},
pad: 'medium',
width: {
min: 'medium'
}
},
dateInput: {
button: {
margin: 'small'
},
container: {
round: 'xxsmall'
},
icon: {
// calendar: undefined,
size: 'medium'
}
},
dataSearch: {
// icons: {
// search: undefined,
// },
},
dataSort: {
// icons: {
// control: undefined,
// },
},
dataSummary: {
margin: {
vertical: 'xsmall'
},
separator: {
margin: {
horizontal: 'small'
}
}
},
dataTable: {
// body: {
// extend: undefined,
// row: {
// extend: undefined,
// }
// selected: undefined,
// },
expand: {
size: 'xxsmall'
},
pinned: {
// body: {
// background: undefined,
// extend: undefined,
// },
header: {
background: {
opacity: 'strong'
}
// extend: undefined,
},
footer: {
background: {
opacity: 'strong'
}
// extend: undefined,
}
},
container: {
// any box props
gap: 'xsmall'
// extend: undefined,
},
groupHeader: {
// background: undefined,
// border: undefined,
// pad: undefined,
},
groupEnd: {
border: {
side: 'bottom',
size: 'xsmall'
}
},
header: {
// background: undefined,
// border: undefined,
// color: undefined,
// extend: undefined,
// font: {
// weight: undefined,
// size: undefined,
// },
gap: 'small',
// hover: {
// background: undefined,
// },
// pad: undefined,
units: {
color: 'text-xweak',
margin: {
left: 'xsmall'
},
alignSelf: 'end'
}
},
icons: {
ascending: FormDown,
contract: FormUp,
descending: FormUp,
expand: FormDown
// resizeDecrease: undefined,
// resizeIncrease: undefined,
// search: undefined,
// sortable: undefined,
},
primary: {
weight: 'bold'
},
resize: {
border: {
color: 'border',
side: 'end'
},
// hover: {
// border: {
// color: undefined,
// side: undefined,
// size: undefined,
// },
// },
padding: {
vertical: 'xsmall'
}
},
search: {
pad: {
left: 'small'
},
text: {
pad: {
horizontal: 'small'
}
}
},
sort: {
gap: 'xsmall'
}
},
dataTableColumns: {
// icons: {
// control: undefined,
// pinned: undefined,
// search: undefined,
// }
tabs: {
pad: 'small'
},
selectColumns: {
pad: {
vertical: 'small'
},
gap: 'xsmall'
},
orderColumns: {
pad: {
top: 'small'
}
}
},
diagram: {
// extend: undefined,
line: {
color: 'graph-0'
}
},
distribution: {
gap: 'xsmall'
},
// drop: {
// extend: undefined,
// maxHeight: undefined,
// },
fileInput: {
anchor: {
margin: 'small'
},
// background: {},
border: {
// color: undefined,
side: 'all',
size: 'small',
style: 'dashed'
},
dragOver: {
border: {
color: 'control'
}
// extend: undefined,
},
hover: {
border: {
color: 'brand'
}
// extend: undefined,
},
icons: {
// error: undefined,
remove: FormClose
},
// pad: {},
label: {
gap: 'xsmall',
margin: 'small'
// extend: undefined,
},
message: {
margin: 'small'
// extend: undefined,
}
// extend: undefined,
},
footer: {
gap: 'medium'
},
formField: {
// [inputname]: {
// container: {
// extend: undefined,
// }
// }
border: {
color: 'border',
error: {
color: {
dark: 'white',
light: 'status-critical'
}
},
position: 'inner',
side: 'bottom'
},
// checkBox: {
// pad: undefined,
// },
content: {
// margin: undefined,
pad: 'small'
},
disabled: {
background: {
color: 'status-disabled',
opacity: 'medium'
}
// border: {
// color: undefined,
// },
// label: {
// color: undefined,
// },
// help: {
// color: undefined,
// },
// info: {
// color: undefined,
// },
},
focus: {
containerFocus: true
// background: {
// color: undefined,
// },
// border: {
// color: undefined,
// },
},
error: {
color: 'status-critical',
margin: {
vertical: 'xsmall',
horizontal: 'small'
}
// background: undefined,
// container: {}, // any Box props
// icon: undefined,
},
// extend: undefined,
help: {
color: 'dark-2',
margin: {
start: 'small'
}
},
info: {
color: 'text-xweak',
margin: {
vertical: 'xsmall',
horizontal: 'small'
}
// container: {}, // any Box props
// icon: undefined,
},
label: {
margin: {
vertical: 'xsmall',
horizontal: 'small'
}
// requiredIndicator: undefined,
},
margin: {
bottom: 'small'
},
// round: undefined,
survey: {
label: {
margin: {
bottom: 'xsmall'
},
size: 'medium',
weight: 400
}
}
},
grommet: {
// extend: undefined
},
header: {
sticky: {
zIndex: '20'
},
gap: 'medium'
},
heading: {
// color: undefined,
font: {
// family: undefined
},
level: {
1: {
font: {
// family: undefined,
// weight: undefined,
},
small: _extends({}, fontSizing(4)),
medium: _extends({}, fontSizing(8)),
large: _extends({}, fontSizing(16)),
xlarge: _extends({}, fontSizing(24))
},
2: {
font: {
// family: undefined,
// weight: undefined,
},
small: _extends({}, fontSizing(2)),
medium: _extends({}, fontSizing(4)),
large: _extends({}, fontSizing(8)),
xlarge: _extends({}, fontSizing(12))
},
3: {
font: {
// family: undefined,
// weight: undefined,
},
small: _extends({}, fontSizing(1)),
medium: _extends({}, fontSizing(2)),
large: _extends({}, fontSizing(4)),
xlarge: _extends({}, fontSizing(6))
},
4: {
font: {
// family: undefined,
// weight: undefined,
},
small: _extends({}, fontSizing(0)),
medium: _extends({}, fontSizing(0)),
large: _extends({}, fontSizing(0)),
xlarge: _extends({}, fontSizing(0))
},
5: {
font: {
// family: undefined,
// weight: undefined,
},
small: _extends({}, fontSizing(-0.5)),
medium: _extends({}, fontSizing(-0.5)),
large: _extends({}, fontSizing(-0.5)),
xlarge: _extends({}, fontSizing(-0.5))
},
6: {
font: {
// family: undefined,
// weight: undefined,
},
small: _extends({}, fontSizing(-1)),
medium: _extends({}, fontSizing(-1)),
large: _extends({}, fontSizing(-1)),
xlarge: _extends({}, fontSizing(-1))
}
},
responsiveBreakpoint: 'small',
// when we scale the font size down
weight: 600,
skeleton: {
width: {
min: '150px',
max: '200px'
}
}
},
layer: {
background: {
dark: 'black',
light: 'white'
},
border: {
radius: '4px'
// intelligentRounding: undefined,
},
container: {
// elevation: undefined,
zIndex: '20',
height: {
min: 'xxsmall'
}
},
// extend: undefined,
overlay: {
background: 'rgba(0, 0, 0, 0.5)'
// backdropFilter: undefined,
},
responsiveBreakpoint: 'small',
// when Layer takes over the full screen
zIndex: '20'
},
list: {
container: {
// any box props
gap: 'xsmall'
// extend: undefined,
},
item: {
// background: undefined,
border: 'horizontal',
disabled: {
color: 'status-disabled',
cursor: 'default'
},
gap: 'medium',
pinned: {
background: 'background-contrast',
icon: {
size: 'medium',
pad: 'small'
}
},
pad: {
horizontal: 'medium',
vertical: 'small'
}
// extend: undefined,
},
primaryKey: {
// any text props
weight: 'bold'
},
icons: {
down: FormDown,
up: FormUp,
pin: FormPin
}
// extend: undefined,
},
maskedInput: {
// container: {
// extend: undefined,
// },
// extend: undefined,
// disabled: { opacity: undefined },
},
menu: {
// background: undefined,
// extend: undefined,
// item: undefined,
drop: {
align: {
top: 'top',
left: 'left'
}
// any drop props
},
// container: {
// // any box props
// },
group: {
container: {
pad: {
vertical: 'xsmall'
}
},
separator: {
color: 'border',
size: 'xsmall',
pad: {
horizontal: 'small'
}
}
},
icons: {
down: FormDown
// up: undefined,
// color: { dark: undefined, light: undefined },
}
},
meter: {
background: {
color: 'light-2',
opacity: 'medium'
},
color: 'graph-0'
// colors: [] || colors: ['graph-0', 'graph-1', 'graph-2', 'graph-3'],
// extend: undefined,
// gap: undefined,
},
nameValueList: {
gap: {
column: 'large',
row: 'small'
},
pair: {
column: {
gap: {
column: 'large',
row: 'medium'
}
}
},
name: {
width: 'small'
},
value: {
width: 'medium'
}
},
nameValuePair: {
column: {
gap: 'xxsmall'
},
name: {
// any text props
color: 'text',
weight: 'bold'
},
value: {
// any text props
color: 'text'
}
},
nav: {
gap: 'medium'
},
notification: {
actions: {
// any anchor props
margin: {
right: 'xsmall'
}
},
direction: 'column',
container: {
// any box props
round: 'xsmall',
pad: {
horizontal: 'small',
vertical: 'xsmall'
},
background: {
color: 'background-front'
}
},
gap: 'small',
global: {
direction: 'row',
container: {
// any box props
round: 'none',
pad: {
horizontal: 'large',
vertical: 'xsmall'
}
}
},
toast: {
// direction: undefined,
container: {
// any box props
elevation: 'medium',
width: 'medium'
},
layer: {
position: 'top',
margin: 'medium'
},
time: 8000
},
iconContainer: {
// any box props
pad: {
right: 'small'
},
flex: false
},
textContainer: {
// any box props
gap: 'medium'
},
title: {
// any text props
weight: 'bold'
},
message: {
// any text props
margin: 'none',
// fill: undefined,
text: {
margin: {
right: 'xsmall'
}
}
},
close: {
icon: FormClose
},
critical: {
icon: StatusCriticalSmall,
background: {
color: 'status-critical',
opacity: 'weak'
},
color: 'status-critical',
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
// global: {},
toast: {
background: 'background-front'
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
}
},
warning: {
icon: StatusWarningSmall,
background: {
color: 'status-warning',
opacity: 'weak'
},
color: 'status-warning',
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
// global: {},
toast: {
background: 'background-front'
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
}
},
normal: {
icon: StatusGoodSmall,
background: {
color: 'status-ok',
opacity: 'weak'
},
color: 'status-ok',
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
// global: {},
toast: {
background: 'background-front'
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
}
},
info: {
icon: CircleInformation,
background: 'background-contrast',
color: 'text-strong',
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
// global: {},
toast: {
background: 'background-front'
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
}
},
unknown: {
icon: StatusUnknownSmall,
background: {
color: 'status-unknown',
opacity: 'weak'
},
color: 'status-unknown',
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
// global: {},
toast: {
background: 'background-front'
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
}
},
// deprecate "undefined" in v3
// and if undefined, no icon
undefined: {
icon: StatusUnknownSmall,
// background: undefined,
color: 'status-unknown'
// message: {
// color: undefined,
// },
// title: {
// color: undefined,
// },
// global: {},
// toast: {},
}
},
page: {
wide: {
alignSelf: 'center',
width: {
min: 'medium',
max: 'xxlarge'
},
small: {
pad: {
horizontal: 'large'
}
},
medium: {
pad: {
horizontal: 'medium'
}
},
large: {
pad: {
horizontal: 'large'
}
}
},
narrow: {
alignSelf: 'center',
width: {
min: 'medium',
max: 'large'
},
small: {
pad: {
horizontal: 'large'
}
},
medium: {
pad: {
horizontal: 'medium'
}
},
large: {
pad: {
horizontal: 'large'
}
}
},
full: {
alignSelf: 'start',
width: {
min: 'medium',
max: '100%'
},
small: {
pad: {
horizontal: 'large'
}
},
medium: {
pad: {
horizontal: 'medium'
}
},
large: {
pad: {
horizontal: 'large'
}
}
}
},
pageHeader: {
actions: {
// any box props
align: 'end'
},
pad: {
top: 'large',
bottom: 'medium'
},
parent: {
// any box props
align: 'start'
},
responsive: {
actions: {
// any box props
align: 'start',
pad: {
top: 'small'
}
},
areas: [['parent'], ['title'], ['subtitle'], ['actions']],
breakpoints: ['small'],
columns: ['auto'],
rows: ['auto']
// gap: undefined,
},
subtitle: {
// any paragraph props
margin: 'none'
},
title: {
// any heading props
margin: 'none',
fill: true
},
size: {
small: {
pad: {
top: 'medium',
bottom: 'small'
},
subtitle: {
size: 'small'
},
title: {
size: 'small'
}
},
// medium: {
// // pad: undefined,
// // subtitle: {},
// // title: {},
// },
large: {
pad: {
top: 'xlarge',
bottom: 'large'
},
subtitle: {
size: 'large'
},
title: {
size: 'large'
}
}
},
small: {
areas: [['parent', 'parent'], ['title', 'actions'], ['subtitle', 'actions']],
columns: [['small', 'flex'], 'auto'],
rows: ['auto', 'auto', 'auto'],
gap: {
row: 'xsmall',
column: 'large'
}
},
medium: {
areas: [['parent', 'parent'], ['title', 'actions'], ['subtitle', 'actions']],
columns: [['medium', 'flex'], 'auto'],
rows: ['auto', 'auto', 'auto'],
gap: {
row: 'xsmall',
column: 'medium'
}
},
large: {
areas: [['parent', 'parent'], ['title', 'actions'], ['subtitle', 'actions']],
columns: [['medium', 'flex'], 'auto'],
rows: ['auto', 'auto', 'auto'],
gap: {
row: 'xsmall',
column: 'large'
}
}
},
pagination: {
button: {
active: {
background: {
color: 'active-background'
}
},
color: 'text-strong',
hover: {
background: {
color: 'background-contrast'
},
color: undefined
},
size: {
small: {
border: {
radius: baseSpacing / 8 + "px",
// 3
width: '2px'
},
pad: {
vertical: "4px",
horizontal: "4px"
},
font: _extends({}, fontSizing(-1)),
height: baseSpacing * 1.25 + "px",
width: baseSpacing * 1.25 + "px"
},
medium: {
border: {
radius: baseSpacing / 6 + "px",
// 4
width: '2px'
},
pad: {
vertical: "4px",
horizontal: "4px"
},
font: _extends({}, fontSizing(0)),
height: baseSpacing * 1.5 + "px",
width: baseSpacing * 1.5 + "px"
},
large: {
border: {
radius: baseSpacing / 4 + "px",
// 6
width: '2px'
},
pad: {
vertical: "4px",
horizontal: "4px"
},
font: _extends({}, fontSizing(1)),
height: baseSpacing * 2 + "px",
width: baseSpacing * 2 + "px"
}
}
},
container: {
gap: {
column: 'xsmall',
row: 'small'
}
// any box props,
// extend: undefined,
},
controls: {
align: 'center',
direction: 'row',
gap: 'xxsmall',
margin: 'none',
pad: 'none'
},
icons: {
// color: undefined,
next: Next,
previous: Previous
},
step: {
container: {
gap: 'xsmall'
}
}
},
paragraph: {
font: {
// family: undefined
},
small: _extends({}, fontSizing(-1)),
medium: _extends({}, fontSizing(0)),
large: _extends({}, fontSizing(1)),
xlarge: _extends({}, fontSizing(2)),
xxlarge: _extends({}, fontSizing(4)),
skeleton: {
gap: 'xsmall'
}
},
thumbsRating: {
// dislike: {
// color: undefined,
// },
// icons: {
// dislike: undefined,
// dislikeSelec