@dotconnor/grommet
Version:
focus on the essential experience
1,362 lines (1,286 loc) • 32.8 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.base = exports.generate = void 0;
var _polished = require("polished");
var _Actions = require("grommet-icons/icons/Actions");
var _ClosedCaption = require("grommet-icons/icons/ClosedCaption");
var _Expand = require("grommet-icons/icons/Expand");
var _FormDown = require("grommet-icons/icons/FormDown");
var _FormNext = require("grommet-icons/icons/FormNext");
var _FormPrevious = require("grommet-icons/icons/FormPrevious");
var _FormUp = require("grommet-icons/icons/FormUp");
var _Next = require("grommet-icons/icons/Next");
var _Pause = require("grommet-icons/icons/Pause");
var _Play = require("grommet-icons/icons/Play");
var _Previous = require("grommet-icons/icons/Previous");
var _Subtract = require("grommet-icons/icons/Subtract");
var _Volume = require("grommet-icons/icons/Volume");
var _VolumeLow = require("grommet-icons/icons/VolumeLow");
var _base = require("grommet-icons/themes/base");
var _object = require("../utils/object");
var _mixins = require("../utils/mixins");
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var brandColor = '#7D4CDB';
var accentColors = ['#6FFFB0', '#FD6FFF', '#81FCED', '#FFCA58'];
var neutralColors = ['#00873D', '#3D138D', '#00739D', '#A2423D'];
var statusColors = {
critical: '#FF4040',
error: '#FF4040',
warning: '#FFAA15',
ok: '#00C781',
unknown: '#CCCCCC',
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: (0, _polished.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: (0, _polished.rgba)(255, 255, 255, 0.33),
light: (0, _polished.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];
});
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 = (0, _object.deepMerge)(_base.base, {
global: {
active: {
background: {
color: 'active',
opacity: 'medium'
},
color: {
dark: 'white',
light: 'black'
}
},
animation: {
duration: '1s',
jiggle: {
duration: '0.1s'
}
},
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
},
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.
debounceDelay: 300,
drop: {
background: {
dark: 'black',
light: 'white'
},
border: {
radius: '0px'
},
shadowSize: 'small',
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'
}
},
font: _extends({}, fontSizing(0)),
hover: {
background: {
color: 'active',
opacity: 'medium'
},
color: {
dark: 'white',
light: 'black'
}
},
input: {
padding: {
horizontal: (0, _mixins.parseMetricToNum)(baseSpacing / 2 + "px") - (0, _mixins.parseMetricToNum)(controlBorderWidth + "px") + "px",
vertical: (0, _mixins.parseMetricToNum)(baseSpacing / 2 + "px") - (0, _mixins.parseMetricToNum)(controlBorderWidth + "px") + "px"
},
font: {
// size: undefined,
// height: undefined,
weight: 600
} // deprecate in v3
// weight: undefined,
},
opacity: {
strong: 0.8,
medium: 0.4,
weak: 0.1
},
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%'
}
},
accordion: {
panel: {// border: {
// side: 'bottom',
// color: 'border',
// },
},
border: {
side: 'bottom',
color: 'border'
},
heading: {
level: '4' // level ranges from 1-6
// margin: undefined
},
hover: {
color: {
dark: 'light-4',
light: 'dark-3'
},
// deprecated
heading: {
color: {
dark: 'light-4',
light: 'dark-3'
}
}
},
icons: {
collapse: _FormUp.FormUp,
expand: _FormDown.FormDown // color: { dark: undefined, light: undefined },
}
},
anchor: {
textDecoration: 'none',
fontWeight: 600,
color: {
dark: 'accent-1',
light: 'brand'
},
hover: {
textDecoration: 'underline' // fontWeight: undefined,
// extend: undefined,
} // extend: undefined,
},
avatar: {
// extend: undefined,
size: {
xsmall: baseSpacing * 0.75 + "px",
small: baseSpacing + "px",
medium: baseSpacing * 2 + "px",
// default 48
large: baseSpacing * 3 + "px",
xlarge: baseSpacing * 4 + "px"
},
text: {
size: {
xsmall: 'small',
small: 'medium',
medium: 'large',
large: 'xlarge',
xlarge: 'xxlarge'
} // fontWeight: undefined,
// extend: undefined
}
},
box: {
responsiveBreakpoint: 'small' // when we switch rows to columns
// extend: undefined,
},
button: {
size: {
small: {
border: {
radius: baseSpacing * 0.75 + "px"
},
pad: {
vertical: baseSpacing / 4 - borderWidth + "px",
// 4px
horizontal: baseSpacing - borderWidth * 2 + "px" // 20px,
}
},
medium: {
border: {
radius: baseSpacing * 0.75 + "px" // 18px
},
pad: {
vertical: baseSpacing / 4 - borderWidth + "px",
// 4px
horizontal: baseSpacing - borderWidth + "px" // 22px
}
},
large: {
border: {
radius: baseSpacing + "px" // 24px
},
pad: {
vertical: baseSpacing / 4 + borderWidth + "px",
// 8px
horizontal: baseSpacing + borderWidth * 4 + "px" // 32px,
}
}
},
border: {
// color: { dark: undefined, light: undefined }
width: borderWidth + "px",
radius: baseSpacing * 0.75 + "px"
},
// color: { dark: undefined, light: undefined }
// default: {
// background: undefined,
// border: undefined,
// color: undefined,
// font: {
// weight: undefined,
// },
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// extend: undefined,
// },
// primary: {
// font: {
// weight: undefined,
// },
// background: undefined,
// border: undefined,
// color: undefined,
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// extend: undefined,
// },
// secondary: {
// font: {
// weight: undefined,
// },
// background: undefined,
// border: undefined,
// color: undefined,
// padding: {
// vertical: undefined,
// horizontal: undefined,
// },
// extend: undefined,
// },
// option: {
// background: undefined,
// border: undefined,
// color: undefined,
// padding: {
// vertical: undefined,
// horizontal: 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']
}
},
calendar: {
// daySize must align with global.size
small: {
fontSize: baseFontSize - fontScale + "px",
lineHeight: 1.375,
daySize: baseSpacing * 8 / 7 + "px",
slideDuration: '0.2s'
},
medium: {
fontSize: baseFontSize + "px",
lineHeight: 1.45,
daySize: baseSpacing * 16 / 7 + "px",
slideDuration: '0.5s'
},
large: {
fontSize: baseFontSize + 3 * fontScale + "px",
lineHeight: 1.11,
daySize: baseSpacing * 32 / 7 + "px",
slideDuration: '0.8s'
},
icons: {
previous: _Previous.Previous,
next: _Next.Next,
small: {
previous: _FormPrevious.FormPrevious,
next: _FormNext.FormNext
}
},
heading: {
level: '4'
} // level ranges from 1-6
},
card: {
container: {
round: 'small',
elevation: 'small'
},
header: {},
body: {},
footer: {}
},
carousel: {
icons: {
current: _Subtract.Subtract,
next: _Next.Next,
previous: _Previous.Previous // color: { dark: undefined, light: undefined },
},
animation: {
duration: 1000
},
disabled: {
icons: {// color: { dark: undefined, light: undefined },
}
}
},
chart: {
color: 'graph-0' // 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'
},
// color: { dark: undefined, light: undefined },
// extend: undefined,
// gap: undefined
hover: {
border: {
color: {
dark: 'white',
light: 'black'
}
}
},
icon: {// size: undefined,
// extend: undefined,
},
icons: {// checked: undefined,
// indeterminate: 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,
// },
},
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
},
dateInput: {// icon: {
// size: undefined,
// },
},
dataTable: {
// body: {
// extend: undefined,
// },
// pinned: {
// body: {
// background: undefined,
// extend: undefined,
// },
// header: {
// background: undefined,
// extend: undefined,
// },
// footer: {
// background: undefined,
// extend: undefined,
// },
// },
groupHeader: {
background: {
dark: 'dark-2',
light: 'light-2'
},
border: {
side: 'bottom',
size: 'xsmall'
},
pad: {
horizontal: 'small',
vertical: 'xsmall'
}
},
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'
}
}
},
icons: {
ascending: _FormDown.FormDown,
contract: _FormUp.FormUp,
descending: _FormUp.FormUp,
expand: _FormDown.FormDown // sortable: undefined,
},
primary: {
weight: 'bold'
},
resize: {
border: {
color: 'border',
side: 'end'
} // hover: {
// border: {
// color: undefined,
// side: undefined,
// size: undefined,
// },
// },
}
},
diagram: {
// extend: undefined,
line: {
color: 'graph-0'
}
},
// drop: {
// extend: undefined,
// maxHeight: undefined,
// },
formField: {
border: {
color: 'border',
error: {
color: {
dark: 'white',
light: 'status-critical'
}
},
position: 'inner',
side: 'bottom'
},
content: {
// margin: undefined,
pad: 'small'
},
disabled: {
background: {
color: 'status-disabled',
opacity: 'medium'
} // border: {
// color: undefined,
// },
// label: {
// color: undefined,
// },
},
// focus: {
// 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-3',
margin: {
start: 'small'
}
},
info: {
color: 'text-xweak',
margin: {
vertical: 'xsmall',
horizontal: 'small'
} // container: {}, // any Box props
// icon: undefined,
},
label: {
margin: {
vertical: 'xsmall',
horizontal: 'small'
}
},
margin: {
bottom: 'small'
} // round: undefined,
},
grommet: {// extend: undefined
},
heading: {
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
},
layer: {
background: {
dark: 'black',
light: 'white'
},
border: {
radius: '4px'
},
container: {
zIndex: '20'
},
// extend: undefined,
overlay: {
background: 'rgba(0, 0, 0, 0.5)'
},
responsiveBreakpoint: 'small',
// when Layer takes over the full screen
zIndex: '20'
},
list: {
item: {
// background: undefined,
border: 'horizontal',
pad: {
horizontal: 'medium',
vertical: 'small'
} // extend: undefined,
} // extend: undefined,
},
maskedInput: {// container: {
// extend: undefined,
// },
// extend: undefined,
// disabled: { opacity: undefined },
},
menu: {
// background: undefined,
// extend: undefined,
icons: {
down: _FormDown.FormDown // up: undefined,
// color: { dark: undefined, light: undefined },
}
},
meter: {
color: 'graph-0' // colors: [] || colors: ['graph-0', 'graph-1', 'graph-2', 'graph-3'],
// extend: undefined,
},
paragraph: {
font: {// family: undefined
},
small: _extends({}, fontSizing(-1)),
medium: _extends({}, fontSizing(0)),
large: _extends({}, fontSizing(1)),
xlarge: _extends({}, fontSizing(2)),
xxlarge: _extends({}, fontSizing(4))
},
radioButton: {
border: {
color: {
dark: 'rgba(255, 255, 255, 0.5)',
light: 'rgba(0, 0, 0, 0.15)'
},
width: '2px'
},
check: {
radius: '100%' // background: {
// color: undefined,
// },
// color: { dark: undefined, light: undefined },
// extend: undefined,
},
// color: undefined,
hover: {
// background: {
// color: undefined,
// },
border: {
color: {
dark: 'white',
light: 'black'
}
}
},
icon: {// size: undefined,
// extend: undefined,
},
icons: {// circle: undefined,
},
gap: 'small',
size: baseSpacing + "px",
font: {// weight: undefined,
},
container: {// extend: undefined
}
},
radioButtonGroup: {// container: {}, // any box props
},
rangeInput: {
// extend: undefined
track: {
height: '4px',
color: 'border' // opacity: undefined,
// lower: {
// color: 'undefined',
// opacity: undefined,
// },
// upper: {
// color: undefined,
// opacity: undefined,
// },
// extend: undefined
},
thumb: {// color: { dark: undefined, light: undefined },
// extend: undefined
}
},
rangeSelector: {
background: {
invert: {
color: 'light-4'
}
} // edge: {
// type: undefined,
// },
},
select: {
// background: undefined,
clear: {
container: {
pad: 'small',
background: 'background-contrast'
},
// any box props
text: {
color: 'text-weak'
} // any text props
},
container: {// extend: undefined,
},
control: {// extend: undefined,
// open: undefined,
},
icons: {
// color: { dark: undefined, light: undefined },
margin: {
horizontal: 'small'
},
down: _FormDown.FormDown // up: undefined
},
options: {
container: {
align: 'start',
pad: 'small'
},
text: {
margin: 'none'
}
},
// searchInput: undefined,
step: 20
},
skipLinks: {
position: 'top',
container: {
elevation: 'large',
round: 'small',
pad: 'medium'
},
label: {
margin: {
bottom: 'medium'
},
size: 'medium'
}
},
tab: {
active: {
color: 'text' // background: undefined,
},
// background: undefined,
border: {
side: 'bottom',
size: 'small',
color: {
dark: 'accent-1',
light: 'brand'
},
active: {
color: {
dark: 'white',
light: 'black'
}
},
disabled: {// color: undefined,
},
hover: {
color: {
dark: 'white',
light: 'black'
} // extend: undefined,
}
},
color: 'control',
// disabled: {
// color: undefined,
// },
// extend: undefined,
hover: {
// background: undefined,
// extend: undefined,
color: {
dark: 'white',
light: 'black'
}
},
margin: {
vertical: 'xxsmall',
horizontal: 'small'
},
pad: {
bottom: 'xsmall'
}
},
tabs: {
// background: undefined,
// extend: undefined,
// gap: undefined,
header: {// background: undefined,
// border: {
// side: undefined,
// size: undefined,
// style: undefined,
// color: undefined,
// },
// extend: undefined,
},
panel: {// extend: undefined,
}
},
table: {
header: {
align: 'start',
pad: {
horizontal: 'small',
vertical: 'xsmall'
},
border: 'bottom' // verticalAlign: undefined,
// background: undefined,
// extend: undefined,
},
body: {
align: 'start',
pad: {
horizontal: 'small',
vertical: 'xsmall'
} // background: undefined,
// border: undefined,
// extend: undefined,
},
// row: {
// hover: {
// background: undefined,
// color: undefined,
// },
// },
footer: {
align: 'start',
pad: {
horizontal: 'small',
vertical: 'xsmall'
},
border: 'top' // verticalAlign: undefined,
// background: undefined,
// extend: undefined,
}
},
text: {
font: {// family: undefined
},
xsmall: _extends({}, fontSizing(-1.5)),
small: _extends({}, fontSizing(-1)),
medium: _extends({}, fontSizing(0)),
// 18px
large: _extends({}, fontSizing(1)),
// 22px
xlarge: _extends({}, fontSizing(2)),
xxlarge: _extends({}, fontSizing(4))
},
textArea: {// extend: undefined,
// disabled: { opacity: undefined },
},
textInput: {// extend: undefined,
// disabled: { opacity: undefined },
},
tip: {
content: {
// any Box props
background: 'background-contrast',
elevation: 'small',
margin: 'xsmall',
pad: {
vertical: 'xsmall',
horizontal: 'small'
},
round: 'small'
},
drop: {
// any props for the drop
align: {
top: 'bottom'
} // most common use case is Header with Buttons
}
},
video: {
captions: {
background: 'rgba(0, 0, 0, 0.7)'
},
// controls: { background: undefined },
icons: {
closedCaption: _ClosedCaption.ClosedCaption,
configure: _Actions.Actions,
fullScreen: _Expand.Expand,
pause: _Pause.Pause,
play: _Play.Play,
reduceVolume: _VolumeLow.VolumeLow,
volume: _Volume.Volume // color: { dark: undefined, light: undefined },
},
// scrubber: { track: { color: undefined } },
scrubber: {
color: 'light-4'
}
},
worldMap: {
color: 'light-3',
continent: {
active: '8px',
base: '6px'
},
hover: {
color: 'light-4'
},
place: {
active: '20px',
base: '8px'
}
}
});
return (0, _object.deepFreeze)(result);
};
exports.generate = generate;
var base = generate(24);
exports.base = base;