@spark-web/theme
Version:
--- title: Theme isExperimentalPackage: true ---
1,862 lines • 51.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var polished = require('polished');
var react = require('react');
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var core = require('@capsizecss/core');
var mapValues = require('lodash/mapValues.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _typeof = require('@babel/runtime/helpers/typeof');
var facepaint = require('facepaint');
var omit = require('lodash/omit.js');
var merge = require('lodash/merge.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var react$1 = require('@emotion/react');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var mapValues__default = /*#__PURE__*/_interopDefault(mapValues);
var facepaint__default = /*#__PURE__*/_interopDefault(facepaint);
var omit__default = /*#__PURE__*/_interopDefault(omit);
var merge__default = /*#__PURE__*/_interopDefault(merge);
var smoothSaturation = function smoothSaturation(saturation, luminance) {
var isBright = luminance > 0.6;
if (isBright) {
return saturation * 0.8;
}
return saturation * 0.45;
};
var smoothLightness = function smoothLightness(lightness, luminance) {
var isBright = luminance > 0.6;
if (isBright) {
return 0.95 - lightness * 0.03;
}
return 0.95 - lightness * 0.06;
};
function getLightVariant(color) {
var _parseToHsl3 = polished.parseToHsl(color),
hue = _parseToHsl3.hue,
saturation = _parseToHsl3.saturation,
lightness = _parseToHsl3.lightness;
var luminance = polished.getLuminance(color);
return polished.toColorString({
hue: hue,
saturation: smoothSaturation(saturation, luminance),
lightness: smoothLightness(lightness, luminance)
});
}
var isLight = function isLight(inputColor) {
var _parseToRgb = polished.parseToRgb(inputColor),
red = _parseToRgb.red,
green = _parseToRgb.green,
blue = _parseToRgb.blue;
// Convert RGB to YIQ to better take into account the
// luminance of the separate color channels:
//
// Further reading:
// - YIQ:
// https://en.wikipedia.org/wiki/YIQ
// - Calculating contrast:
// https://24ways.org/2010/calculating-color-contrast/
var yiq = (red * 299 + green * 587 + blue * 114) / 1000;
// Colour is considered `light` if greater than the midpoint:
// eg. 256 / 2 = 128.
return yiq >= 128;
};
var breakpointNames = ['mobile', 'tablet', 'desktop', 'wide'];
var breakpoints = {
mobile: 0,
tablet: 740,
desktop: 992,
wide: 1200
};
/**
* Utilities related to responsive props. Emotion's
* [facepaint](https://github.com/emotion-js/facepaint) ultimately generates
* media queries for the resolved styles.
*/
var makeThemeUtils = function makeThemeUtils() {
// NOTE: the `mobile` key is used to represent "below tablet" in certain
// cases, but it SHOULD NOT create a media query: facepaint will apply the
// first property in the array without a query.
var validBreakpoints = Object.values(breakpointQuery);
return {
mapResponsiveProp: mapResponsiveProp,
mapResponsiveScale: mapResponsiveScale,
optimizeResponsiveArray: optimizeResponsiveArray,
responsiveRange: responsiveRange,
responsiveStyles: responsiveStyles,
resolveResponsiveProps: facepaint__default["default"](validBreakpoints)
};
};
// Responsive props
// ------------------------------
/**
* Helper for mapping keys/breakpoint map to a theme scale e.g.
*
* @example
* mapResponsiveProp('small', { small: 8, large: 16 }) // 8
* mapResponsiveProp(
* { mobile:'small', tablet:'large' },
* { small: 8, large: 16 }
* ) // [8,16]
*/
var mapResponsiveScale = function mapResponsiveScale(value, scaleDefinition) {
if (value === undefined) {
return value;
}
if (_typeof(value) === 'object') {
return resolveResponsiveScale(value, scaleDefinition);
}
return scaleDefinition[value];
};
function resolveResponsiveScale(value, scaleDefinition) {
var valueArray = [];
for (var i = 0; i < breakpointNames.length; i++) {
var breakpoint = breakpointNames[i];
var keyForBreakpoint = value[breakpoint];
// NOTE: media queries are applied by index (facepaint). nullish value
// ensures array length always matches breakpoints
valueArray.push(keyForBreakpoint ? scaleDefinition[keyForBreakpoint] : null);
}
return valueArray;
}
var mapResponsiveProp = function mapResponsiveProp(value) {
if (value != null && _typeof(value) === 'object') {
return resolveResponsiveProp(value);
}
return value;
};
function resolveResponsiveProp(value) {
var valueArray = [];
for (var i = 0; i < breakpointNames.length; i++) {
var _value$breakpoint;
var breakpoint = breakpointNames[i];
valueArray.push((_value$breakpoint = value[breakpoint]) !== null && _value$breakpoint !== void 0 ? _value$breakpoint : null);
}
return valueArray;
}
function createResponsiveMapFn(lookupMap) {
return function mapResponsiveValue(prop) {
if (typeof prop == 'undefined') {
return prop;
}
if (_typeof(prop) === 'object') {
var mobile = prop.mobile,
tablet = prop.tablet,
desktop = prop.desktop,
wide = prop.wide;
return {
mobile: mobile ? lookupMap[mobile] : undefined,
tablet: tablet ? lookupMap[tablet] : undefined,
desktop: desktop ? lookupMap[desktop] : undefined,
wide: wide ? lookupMap[wide] : undefined
};
}
return lookupMap[prop];
};
}
// Responsive range
// ------------------------------
var responsiveRange = function responsiveRange(props) {
var above = props.above,
below = props.below;
if (!above && !below) {
return [false, false, false, false];
}
var startIndex = above ? breakpointNames.indexOf(above) + 1 : 0;
var endIndex = below ? breakpointNames.indexOf(below) - 1 : breakpointNames.length - 1;
var range = breakpointNames.slice(startIndex, endIndex + 1);
var includeMobile = range.indexOf('mobile') >= 0;
var includeTablet = range.indexOf('tablet') >= 0;
var includeDesktop = range.indexOf('desktop') >= 0;
var includeWide = range.indexOf('wide') >= 0;
return [includeMobile, includeTablet, includeDesktop, includeWide];
};
var optimizeResponsiveArray = function optimizeResponsiveArray(value) {
var _values$, _values$2, _values$3, _values$4;
var lastValue;
var values = value.map(function (v) {
if (v !== lastValue && v !== null) {
lastValue = v;
return v;
}
return null;
});
return [(_values$ = values[0]) !== null && _values$ !== void 0 ? _values$ : null, (_values$2 = values[1]) !== null && _values$2 !== void 0 ? _values$2 : null, (_values$3 = values[2]) !== null && _values$3 !== void 0 ? _values$3 : null, (_values$4 = values[3]) !== null && _values$4 !== void 0 ? _values$4 : null];
};
// ==============================
// Experiment
// ==============================
var breakpointQuery = mapValues__default["default"](omit__default["default"](breakpoints, 'mobile'), function (bp) {
return "@media screen and (min-width: ".concat(bp, "px)");
});
var makeMediaQuery = function makeMediaQuery(breakpoint) {
return function (styles) {
return !styles || Object.keys(styles).length === 0 ? {} : _defineProperty({}, breakpointQuery[breakpoint], styles);
};
};
var mediaQuery = {
tablet: makeMediaQuery('tablet'),
desktop: makeMediaQuery('desktop'),
wide: makeMediaQuery('wide')
};
var responsiveStyles = function responsiveStyles(_ref2) {
var mobile = _ref2.mobile,
tablet = _ref2.tablet,
desktop = _ref2.desktop,
wide = _ref2.wide;
return _objectSpread(_objectSpread({}, mobile), tablet || desktop || wide ? _objectSpread(_objectSpread(_objectSpread({}, mediaQuery.tablet(tablet !== null && tablet !== void 0 ? tablet : {})), mediaQuery.desktop(desktop !== null && desktop !== void 0 ? desktop : {})), mediaQuery.wide(wide !== null && wide !== void 0 ? wide : {})) : {});
};
var white = '#ffffff';
var colorPalette$2 = {
neutral: {
'0': white,
'50': '#fafcfe',
'100': '#f1f4fb',
'200': '#dce1ec',
'300': '#c7cedb',
'500': '#98a2b8',
'550': '#8893A5',
'600': '#646f84',
'650': '#2A3A4A',
'700': '#1a2a3a',
'800': '#001A2A'
},
primary: {
'0': white,
'50': '#f5fdf9',
'100': '#edfaf5',
'150': '#CDFDF0',
'200': '#c8eada',
'300': '#9acbb8',
'500': '#00E0A3',
'600': '#00D299',
'700': '#00A97B'
},
secondary: {
'0': white,
'50': '#fef5eb',
'100': '#fff0e0',
'500': '#ffbb66',
'600': '#ffaa44',
'700': '#e58f27'
},
green: {
'0': white,
'50': '#f6fbf8',
'100': '#f0f9f1',
'200': '#cde9d2',
'300': '#b1dab9',
'500': '#1e9c65',
'600': '#2c855d',
'700': '#327e59',
'800': '#05825F'
},
blue: {
'0': white,
'50': '#f6fafd',
'100': '#f3f8fc',
'200': '#d0e4ff',
'300': '#b7d2f4',
'500': '#2b8aed',
'600': '#0677d6',
'700': '#106fb8'
},
red: {
'0': white,
'50': '#fef8f8',
'100': '#fff4f4',
'200': '#ffdad7',
'300': '#fec1b5',
'500': '#f53841',
'600': '#e61e32',
'700': '#c81b0e'
},
yellow: {
'0': white,
'50': '#fefaf6',
'100': '#fff5eb',
'200': '#fdddc4',
'300': '#face9b',
'500': '#ffaa44',
'600': '#be5c1c',
'700': '#ad541a'
}
};
var borderColors$2 = {
neutral: colorPalette$2.neutral[200],
standard: colorPalette$2.neutral[200],
standardInverted: colorPalette$2.neutral[0],
field: colorPalette$2.neutral[200],
fieldHover: colorPalette$2.neutral[300],
fieldAccent: colorPalette$2.primary[500],
fieldDisabled: colorPalette$2.neutral[300],
// tones
primary: colorPalette$2.primary[500],
primaryHover: colorPalette$2.primary[600],
primaryActive: colorPalette$2.primary[700],
secondary: colorPalette$2.secondary[500],
secondaryHover: colorPalette$2.secondary[600],
secondaryActive: colorPalette$2.secondary[700],
accent: '#8b5cf6',
accentMuted: '#997dd8',
caution: colorPalette$2.yellow[600],
cautionMuted: colorPalette$2.yellow[500],
critical: colorPalette$2.red[600],
criticalMuted: colorPalette$2.red[500],
info: colorPalette$2.blue[600],
infoMuted: colorPalette$2.blue[500],
positive: colorPalette$2.green[600],
positiveMuted: colorPalette$2.green[500],
dark: colorPalette$2.neutral[700],
darkHover: colorPalette$2.neutral[650],
darkActive: colorPalette$2.neutral[800]
};
var colors$2 = {
foreground: {
neutral: colorPalette$2.neutral[700],
neutralInverted: colorPalette$2.neutral[0],
muted: colorPalette$2.neutral[600],
mutedInverted: 'hsla(0, 0%, 100%, 0.75)',
link: colorPalette$2.primary[600],
disabled: colorPalette$2.neutral[500],
field: colorPalette$2.neutral[550],
fieldAccent: colorPalette$2.primary[500],
placeholder: colorPalette$2.neutral[600],
// tones
accent: '#8b5cf6',
primary: colorPalette$2.primary[500],
primaryHover: colorPalette$2.primary[600],
primaryActive: colorPalette$2.primary[700],
secondary: colorPalette$2.secondary[500],
secondaryHover: colorPalette$2.secondary[600],
secondaryActive: colorPalette$2.secondary[700],
caution: colorPalette$2.yellow[700],
critical: colorPalette$2.red[700],
info: colorPalette$2.blue[700],
positive: colorPalette$2.green[700],
dark: colorPalette$2.neutral[700],
brandSubtle: colorPalette$2.green[800]
},
background: {
muted: colorPalette$2.neutral[600],
disabled: colorPalette$2.neutral[500],
backdrop: 'hsla(0, 0%, 0%, 0.4)',
body: colorPalette$2.neutral[50],
surface: colorPalette$2.primary[0],
surfaceMuted: colorPalette$2.neutral[50],
surfacePressed: colorPalette$2.neutral[300],
fieldAccent: colorPalette$2.neutral[700],
input: colorPalette$2.primary[0],
inputPressed: colorPalette$2.neutral[100],
inputDisabled: colorPalette$2.neutral[50],
// tones
accent: '#8b5cf6',
accentMuted: '#f7f5ff',
neutral: colorPalette$2.neutral[0],
neutralLow: colorPalette$2.neutral[50],
primary: colorPalette$2.primary[600],
primaryLow: colorPalette$2.primary[100],
primarySoft: colorPalette$2.primary[150],
primaryMuted: colorPalette$2.primary[50],
primaryDark: colorPalette$2.primary[700],
secondary: colorPalette$2.secondary[600],
secondaryLow: colorPalette$2.secondary[100],
secondaryMuted: colorPalette$2.secondary[50],
caution: colorPalette$2.yellow[600],
cautionLow: colorPalette$2.yellow[100],
cautionMuted: colorPalette$2.yellow[50],
critical: colorPalette$2.red[600],
criticalLow: colorPalette$2.red[100],
criticalMuted: colorPalette$2.red[50],
info: colorPalette$2.blue[600],
infoLow: colorPalette$2.blue[100],
infoMuted: colorPalette$2.blue[50],
positive: colorPalette$2.green[600],
positiveLow: colorPalette$2.green[100],
positiveMuted: colorPalette$2.green[50],
dark: colorPalette$2.neutral[700]
},
status: {
// tones for statuses can be either foreground or background
accent: '#8b5cf6',
caution: colorPalette$2.yellow[500],
critical: colorPalette$2.red[500],
info: colorPalette$2.blue[500],
neutral: colorPalette$2.neutral[700],
positive: colorPalette$2.green[500]
}
};
var interactionColors$1 = {
none: colorPalette$2.neutral[0],
primaryActive: colorPalette$2.primary[700],
primaryHover: colorPalette$2.primary[500],
primaryLowHover: colorPalette$2.primary[100],
primaryLowActive: colorPalette$2.primary[200],
secondaryActive: colorPalette$2.secondary[700],
secondaryHover: colorPalette$2.secondary[500],
secondaryLowHover: colorPalette$2.yellow[100],
secondaryLowActive: colorPalette$2.yellow[200],
neutralHover: colorPalette$2.neutral[100],
neutralActive: colorPalette$2.neutral[200],
neutralLowHover: colorPalette$2.neutral[100],
neutralLowActive: colorPalette$2.neutral[200],
cautionLowHover: colorPalette$2.yellow[200],
cautionLowActive: colorPalette$2.yellow[300],
criticalActive: colorPalette$2.red[700],
criticalHover: colorPalette$2.red[500],
criticalLowHover: colorPalette$2.red[200],
criticalLowActive: colorPalette$2.red[300],
infoLowHover: colorPalette$2.blue[200],
infoLowActive: colorPalette$2.blue[300],
positiveHover: colorPalette$2.green[500],
positiveActive: colorPalette$2.green[700],
positiveLowHover: colorPalette$2.green[200],
positiveLowActive: colorPalette$2.green[300],
darkHover: colorPalette$2.neutral[650],
darkActive: colorPalette$2.neutral[800],
darkLowHover: colorPalette$2.neutral[300],
darkLowActive: colorPalette$2.neutral[100]
};
var fontWeight$2 = {
thin: 100,
extralight: 200,
light: 300,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
};
var heading$2 = {
level: {
'1': {
mobile: {
fontWeight: fontWeight$2.semibold,
fontSize: 35,
rows: 9
},
tablet: {
fontWeight: fontWeight$2.semibold,
fontSize: 35,
rows: 11
}
},
'2': {
mobile: {
fontWeight: fontWeight$2.semibold,
fontSize: 23,
rows: 8
},
tablet: {
fontWeight: fontWeight$2.semibold,
fontSize: 23,
rows: 9
}
},
'3': {
mobile: {
fontWeight: fontWeight$2.semibold,
fontSize: 19,
rows: 6
},
tablet: {
fontWeight: fontWeight$2.semibold,
fontSize: 19,
rows: 7
}
},
'4': {
mobile: {
fontWeight: fontWeight$2.semibold,
fontSize: 17,
rows: 5
},
tablet: {
fontWeight: fontWeight$2.semibold,
fontSize: 17,
rows: 7
}
}
}
};
var text$2 = {
xsmall: {
mobile: {
fontSize: 13,
fontWeight: fontWeight$2.regular,
rows: 5
},
tablet: {
fontSize: 13,
fontWeight: fontWeight$2.regular,
rows: 5
}
},
small: {
mobile: {
fontSize: 15,
fontWeight: fontWeight$2.regular,
rows: 5
},
tablet: {
fontSize: 15,
fontWeight: fontWeight$2.regular,
rows: 5
}
},
standard: {
mobile: {
fontSize: 17,
fontWeight: fontWeight$2.regular,
rows: 6
},
tablet: {
fontSize: 17,
fontWeight: fontWeight$2.regular,
rows: 6
}
},
large: {
mobile: {
fontSize: 19,
fontWeight: fontWeight$2.regular,
rows: 7
},
tablet: {
fontSize: 19,
fontWeight: fontWeight$2.regular,
rows: 7
}
},
xlarge: {
mobile: {
fontSize: 24,
fontWeight: fontWeight$2.regular,
rows: 8,
lineHeight: 34
},
tablet: {
fontSize: 24,
fontWeight: fontWeight$2.regular,
rows: 8,
lineHeight: 34
}
},
xxlarge: {
mobile: {
fontSize: 35,
fontWeight: fontWeight$2.regular,
rows: 9,
lineHeight: 49
},
tablet: {
fontSize: 35,
fontWeight: fontWeight$2.regular,
rows: 9,
lineHeight: 49
}
}
};
// NOTE: all tokens are currently assumptions and will need to be reviewed with
// the design team, but the shape shouldn't change too much.
var aesteticoFontMetrics = {
capHeight: 666,
ascent: 980,
descent: -340,
lineGap: 0,
unitsPerEm: 1000
};
var typography$2 = {
fontFamily: {
sans: {
fontMetrics: aesteticoFontMetrics,
name: '"Aestetico", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
},
display: {
fontMetrics: aesteticoFontMetrics,
name: '"Aestetico", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
}
},
fontWeight: fontWeight$2,
heading: heading$2,
text: text$2
};
var baseTokens = {
name: 'Spark default: light',
// tweak for breakpoints
typography: typography$2,
border: {
radius: {
none: 0,
small: 4,
medium: 8,
large: 16
},
width: {
standard: 1,
large: 2
},
color: borderColors$2
},
color: colors$2,
backgroundInteractions: interactionColors$1,
// misc
contentWidth: {
xsmall: 400,
small: 660,
medium: 940,
large: 1280,
xlarge: 1400
},
contentHeight: {
medium: 50,
large: 90,
full: 100
},
elevation: {
dropdownBlanket: 90,
dropdown: 100,
sticky: 200,
modalBlanket: 290,
modal: 300,
notification: 400
},
spacing: {
xxsmall: 2,
xsmall: 4,
small: 8,
medium: 12,
large: 16,
xlarge: 24,
xxlarge: 32,
xxxlarge: 40
},
sizing: {
xxsmall: 16,
xsmall: 24,
small: 32,
medium: 44,
large: 56,
xlarge: 64,
xxlarge: 72
},
shadow: {
small: '0 1px 2px rgba(0, 0, 0, 0.05)',
medium: '0 2px 8px rgba(0, 0, 0, 0.04)',
large: '0 6px 12px rgba(0, 0, 0, 0.1)'
},
animation: {
standard: {
duration: 300,
easing: 'cubic-bezier(0.2, 0, 0, 1)'
}
}
};
var buttonTokens$2 = {
fontWeight: 'semibold',
focus: {
outline: "2px solid ".concat(colorPalette$2.neutral[700]),
outlineOffset: '-2px'
}
};
var checkboxTokens$2 = {
border: {
"default": colorPalette$2.neutral[550],
radius: 'small',
width: 'standard'
},
background: 'surface',
shadow: 'small',
checked: {
background: colors$2.background.primary,
border: {
color: borderColors$2.primaryHover
},
icon: {
stroke: colors$2.foreground.neutralInverted
},
disabled: {
background: borderColors$2.field,
border: borderColors$2.accent,
icon: {
stroke: colors$2.foreground.neutral
},
before: {
background: colors$2.background.fieldAccent
}
}
},
label: {
hover: {
border: borderColors$2.primaryHover
},
checked: {
hover: {
background: interactionColors$1.primaryHover,
border: borderColors$2.fieldAccent
}
}
}
};
var contentDialogTokens$1 = {
borderRadius: 'large',
shadow: 'large'
};
var radioTokens$2 = {
background: 'surface',
backgroundInteractions: {
primaryHover: interactionColors$1.primaryHover,
borderColor: borderColors$2.primary,
borderWidthHover: 0,
borderWidthChecked: 2,
borderColorHover: interactionColors$1.primaryHover,
borderColorFocus: borderColors$2.primary,
backgroundColorHover: colors$2.background.surface
},
color: {
background: {
primary: colors$2.background.primary,
surface: colors$2.background.surface,
fieldAccent: colors$2.background.fieldAccent
}
},
border: {
width: baseTokens.border.width.standard,
"default": colorPalette$2.neutral[550],
radius: {
pseudo: 9999,
full: 'full'
},
color: {
primary: borderColors$2.primary,
fieldAccent: colors$2.background.fieldAccent,
field: borderColors$2.field,
accent: borderColors$2.accent
}
},
radioCardBorder: {
border: {
width: baseTokens.border.width.standard,
radius: baseTokens.border.radius.small
}
}
};
var tabsTokens$1 = {
color: colors$2.foreground.primaryActive,
fontWeight: typography$2.fontWeight.semibold,
background: colors$2.background.primaryMuted,
hover: {
background: colors$2.background.primaryMuted
}
};
var textInputTokens$2 = {
borderColor: colorPalette$2.neutral[200],
borderRadius: baseTokens.border.radius.small,
boxShadow: baseTokens.shadow.small,
menu: {
borderRadius: baseTokens.border.radius.medium,
boxShadow: baseTokens.shadow.medium,
padding: baseTokens.spacing.small
},
menuOption: {
borderRadius: baseTokens.border.radius.small,
active: {
backgroundColor: colors$2.background.surfacePressed
},
focused: {
backgroundColor: colors$2.background.surfaceMuted
},
selected: {
color: colors$2.foreground.primaryActive,
backgroundColor: colors$2.background.primaryMuted,
focused: {
backgroundColor: interactionColors$1.primaryLowHover
},
active: {
backgroundColor: interactionColors$1.positiveLowActive
}
}
}
};
var textLinkTokens$2 = {
a: {
textDecoration: 'underline',
fontWeight: 'bold'
},
span: {
textDecoration: 'underline',
fontWeight: 'bold'
}
};
var defaultTokens = _objectSpread(_objectSpread({}, baseTokens), {}, {
// components
components: {
buttons: buttonTokens$2,
checkbox: checkboxTokens$2,
contentDialog: contentDialogTokens$1,
radio: radioTokens$2,
textInput: textInputTokens$2,
textLink: textLinkTokens$2,
tabs: tabsTokens$1
}
});
var brand$1 = {
brandBlue: '#003478',
primary: {
400: '#FFF500',
500: '#FFE600',
700: '#FFCE00'
},
secondary: {
50: '#E6ECF0',
100: '#B8CAD6',
200: '#A6C1D4',
300: '#218FF8',
400: '#00A3E0',
500: '#4985C4',
600: '#0864BC',
700: '#00295E',
800: '#003478'
}
};
var neutral$1 = {
black: {
'0': '#333333'
},
dark: {
'50': '#918F90',
'65': '#706D6E',
'80': '#4F4C4D'
},
light: {
'5': '#F4F4F4',
'10': '#E9E9E9',
'20': '#B8CAD6'
}
};
var utility$1 = {
utilityRed: '#E1001A',
utilityTangerine: '#F95200',
utilityBlue: '#003478',
utilityGreen: '#00AA00',
accentGreen: '#1A7D1A',
tintGreen: '#ECFEEC',
tintBlue: '#D8EEF9'
};
var neutralColors$1 = {
black: neutral$1.black[0],
dark80: neutral$1.dark[80],
dark65: neutral$1.dark[65],
dark50: neutral$1.dark[50],
light20: neutral$1.light[20],
light10: neutral$1.light[10],
light05: neutral$1.light[5],
white: '#FFFFFF'
};
var colorPalette$1 = _objectSpread(_objectSpread(_objectSpread({}, brand$1), neutralColors$1), utility$1);
var borderColors$1 = merge__default["default"]({}, borderColors$2, {
neutral: colorPalette$1.dark65,
primary: colorPalette$1.secondary[800],
primaryHover: colorPalette$1.secondary[500],
primaryActive: colorPalette$1.secondary[500],
field: colorPalette$1.secondary[200]
});
var colors$1 = merge__default["default"]({}, colors$2, {
foreground: {
neutral: colorPalette$1.black,
neutralLink: colorPalette$1.dark65,
link: colorPalette$1.utilityBlue,
disabled: colorPalette$1.light20,
fieldAccent: colorPalette$1.accentGreen,
accent: colorPalette$1.utilityBlue,
caution: colorPalette$1.utilityTangerine,
critical: colorPalette$1.utilityRed,
info: colorPalette$1.utilityBlue,
positive: colorPalette$1.utilityGreen,
dark: colorPalette$1.secondary[800],
primary: colorPalette$1.primary[500],
primaryActive: colorPalette$1.primary[700],
primaryHover: colorPalette$1.primary[400],
secondary: colorPalette$1.secondary[800],
secondaryHover: colorPalette$1.secondary[500],
secondaryActive: colorPalette$1.secondary[500]
},
background: {
primary: colorPalette$1.primary[500],
primaryDark: colorPalette$1.brandBlue,
disabled: colorPalette$1.dark50,
surface: colorPalette$1.white,
surfaceMuted: colorPalette$1.light10,
surfacePressed: colorPalette$1.light05,
fieldAccent: colorPalette$1.black,
info: colorPalette$1.secondary[600],
infoLow: colorPalette$1.secondary[50]
}
});
var backgroundInteractions$1 = merge__default["default"]({}, interactionColors$1, {
primaryActive: colorPalette$1.primary[700],
primaryHover: colorPalette$1.primary[400]
});
({
buttonHover: colorPalette$1.primary[400],
buttonPressed: colorPalette$1.primary[700]
});
var buttonTokens$1 = merge__default["default"]({}, buttonTokens$2, {
fontWeight: 'bold',
focus: {
outline: "2px dashed ".concat(colorPalette$1.utilityBlue),
outlineOffset: '2px'
}
});
var checkboxTokens$1 = merge__default["default"]({}, checkboxTokens$2, {
border: {
"default": colorPalette$1.light20,
radius: 'small',
width: 'large'
},
checked: {
background: colorPalette$1.secondary[300],
border: {
color: colorPalette$1.secondary[300]
}
},
label: {
hover: {
border: colorPalette$1.black
},
checked: {
hover: {
background: colorPalette$1.secondary[300],
border: colorPalette$1.secondary[300]
}
}
},
focus: {
border: "2px solid ".concat(colorPalette$1.secondary[300]),
outline: "1px solid ".concat(colorPalette$1.secondary[300]),
outlineOffset: '-1px',
checked: {
background: colorPalette$1.secondary[300],
border: {
color: colorPalette$1.secondary[300]
}
}
}
});
var radioTokens$1 = merge__default["default"]({}, radioTokens$2, {
background: colorPalette$1.secondary[300],
backgroundInteractions: {
primaryHover: 'transparent',
borderColor: colorPalette$1.secondary[300],
borderWidthHover: 2,
borderWidthChecked: 2,
borderColorHover: colorPalette$1.secondary[300],
borderColorFocus: colorPalette$1.secondary[300],
backgroundColorHover: colorPalette$1.secondary[300]
},
color: {
background: {
primary: colorPalette$1.white,
surface: colorPalette$1.secondary[300],
fieldAccent: colorPalette$1.secondary[300]
}
},
border: {
width: 2,
"default": colorPalette$1.secondary[100],
radius: {
pseudo: 9999,
full: 'full'
},
color: {
primary: colorPalette$1.secondary[300],
fieldAccent: colorPalette$1.secondary[100],
field: colorPalette$1.secondary[100],
accent: colorPalette$1.secondary[300]
}
},
radioCardBorder: {
border: {
width: baseTokens.border.width.standard,
radius: baseTokens.border.radius.small
}
},
focus: {
outline: "1px solid ".concat(colorPalette$1.secondary[300]),
outlineOffset: '1x'
}
});
var textInputTokens$1 = merge__default["default"]({}, textInputTokens$2, {
borderColor: colorPalette$1.secondary['200'],
borderRadius: baseTokens.border.radius.small,
boxShadow: null,
focused: {
boxShadow: '0 0 0 transparent',
outline: "2px solid ".concat(colorPalette$1.secondary[300]),
outlineOffset: '-2px'
},
menu: {
borderRadius: baseTokens.border.radius.medium,
boxShadow: baseTokens.shadow.medium,
padding: baseTokens.spacing.small
},
menuOption: {
selected: {
color: colors$1.foreground.neutral,
backgroundColor: colorPalette$1.secondary[100],
focused: {
backgroundColor: colorPalette$1.secondary[100]
},
active: {
backgroundColor: colorPalette$1.secondary[100]
}
}
}
});
var textLinkTokens$1 = merge__default["default"]({}, textLinkTokens$2, {
a: {
textDecoration: 'underline',
fontWeight: 'medium',
focus: {
outline: "2px dashed ".concat(colorPalette$1.utilityBlue),
textDecoration: 'none',
borderRadius: 2
}
},
span: {
textDecoration: 'underline',
fontWeight: 'medium',
focus: {
outline: "2px dashed ".concat(colorPalette$1.utilityBlue),
textDecoration: 'none',
borderRadius: 2
}
}
});
var fontWeight$1 = merge__default["default"]({}, fontWeight$2, {
semibold: 500,
bold: 500
});
var heading$1 = {
level: {
'1': {
mobile: {
fontWeight: fontWeight$1.bold,
fontSize: 32,
rows: 9,
lineHeight: 40
},
tablet: {
fontWeight: fontWeight$1.bold,
fontSize: 40,
rows: 11,
lineHeight: 48
}
},
'2': {
mobile: {
fontWeight: fontWeight$1.regular,
fontSize: 28,
rows: 8,
lineHeight: 32
},
tablet: {
fontWeight: fontWeight$1.regular,
fontSize: 36,
rows: 9,
lineHeight: 40
}
},
'3': {
mobile: {
fontWeight: fontWeight$1.regular,
fontSize: 21,
rows: 6,
lineHeight: 28
},
tablet: {
fontWeight: fontWeight$1.regular,
fontSize: 21,
rows: 7,
lineHeight: 28
}
},
'4': {
mobile: {
fontWeight: fontWeight$1.regular,
fontSize: 16,
rows: 5,
lineHeight: 24
},
tablet: {
fontWeight: fontWeight$1.regular,
fontSize: 16,
rows: 7,
lineHeight: 24
}
}
}
};
var text$1 = merge__default["default"]({}, text$2, {
small: {
mobile: {
fontSize: 14,
fontWeight: fontWeight$1.regular,
rows: 5,
lineHeight: 17
},
tablet: {
fontSize: 14,
fontWeight: fontWeight$1.regular,
rows: 5,
lineHeight: 17
}
},
standard: {
mobile: {
fontSize: 16,
fontWeight: fontWeight$1.regular,
lineHeight: 24,
rows: 6
},
tablet: {
fontSize: 16,
fontWeight: fontWeight$1.regular,
rows: 6,
lineHeight: 24
}
},
large: {
mobile: {
fontSize: 20,
fontWeight: fontWeight$1.regular,
rows: 7,
lineHeight: 28
},
tablet: {
fontSize: 20,
fontWeight: fontWeight$1.regular,
rows: 7,
lineHeight: 28
}
}
});
var firaSansFontMetrics = {
capHeight: 718,
ascent: 928,
descent: -244,
lineGap: 0,
unitsPerEm: 1000
};
var typography$1 = merge__default["default"]({}, typography$2, {
fontFamily: {
sans: {
fontMetrics: firaSansFontMetrics,
name: '"Fira Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
},
display: {
fontMetrics: firaSansFontMetrics,
name: '"Fira Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
}
},
fontWeight: fontWeight$1,
heading: heading$1,
text: text$1
});
// Tokens
// ------------------------------
var tokens$2 = merge__default["default"]({}, defaultTokens, {
color: colors$1,
backgroundInteractions: backgroundInteractions$1,
typography: typography$1,
components: {
buttons: buttonTokens$1,
checkbox: checkboxTokens$1,
// contentDialog: contentDialogTokens,
radio: radioTokens$1,
textInput: textInputTokens$1,
textLink: textLinkTokens$1
},
border: _objectSpread(_objectSpread({}, defaultTokens.border), {}, {
color: borderColors$1
})
});
var bravoTokens = _objectSpread(_objectSpread({}, tokens$2), {}, {
name: 'Bravo theme: light'
});
// Tokens
// ------------------------------
var tokens$1 = merge__default["default"]({}, defaultTokens, {});
var brighteTokens = _objectSpread(_objectSpread({}, tokens$1), {}, {
name: 'Brighte theme: light'
});
var brand = {
brandYellow: '#FFCC00',
brandBeacon: '#FAEC20'
};
var neutral = {
black: {
'0': '#1E1E1E'
},
dark: {
'50': '#918F90',
'65': '#706D6E',
'80': '#4F4C4D'
},
light: {
'5': '#F4F4F4',
'10': '#E9E9E9',
'20': '#D3D2D2'
}
};
var utility = {
utilityRed: '#E1001A',
utilityTangerine: '#F95200',
utilityBlue: '#1175B5',
utilityGreen: '#00AA00',
accentGreen: '#1A7D1A',
tintGreen: '#ECFEEC',
tintBlue: '#D8EEF9'
};
var interactionColors = {
buttonHover: '#FFDB4D',
buttonPressed: '#D3A906'
};
var neutralColors = {
black: neutral.black[0],
dark80: neutral.dark[80],
dark65: neutral.dark[65],
dark50: neutral.dark[50],
light20: neutral.light[20],
light10: neutral.light[10],
light05: neutral.light[5],
white: '#FFFFFF'
};
var colorPalette = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brand), neutralColors), interactionColors), utility);
var borderColors = merge__default["default"]({}, borderColors$2, {
neutral: colorPalette.dark65
});
var colors = merge__default["default"]({}, colors$2, {
foreground: {
neutral: colorPalette.black,
neutralLink: colorPalette.dark65,
link: colorPalette.utilityBlue,
disabled: colorPalette.light20,
fieldAccent: colorPalette.accentGreen,
accent: colorPalette.utilityBlue,
primary: colorPalette.black,
primaryActive: colorPalette.brandBeacon,
caution: colorPalette.utilityTangerine,
critical: colorPalette.utilityRed,
info: colorPalette.utilityBlue,
positive: colorPalette.utilityGreen,
dark: colorPalette.black
},
background: {
primary: colorPalette.brandYellow,
disabled: colorPalette.dark50,
surface: colorPalette.white,
surfaceMuted: colorPalette.light10,
surfacePressed: colorPalette.light05,
fieldAccent: colorPalette.black
}
});
var backgroundInteractions = merge__default["default"]({}, interactionColors$1, {
primaryHover: colorPalette.buttonHover,
primaryActive: colorPalette.buttonPressed
});
var buttonTokens = merge__default["default"]({}, buttonTokens$2, {
fontWeight: 'regular',
focus: {
outline: "2px solid ".concat(colorPalette.utilityBlue),
outlineOffset: '-2px'
}
});
var checkboxTokens = merge__default["default"]({}, checkboxTokens$2, {
border: {
"default": colorPalette.black,
radius: 'none',
width: 'large'
},
checked: {
background: colorPalette.black,
border: {
color: colorPalette.black
}
},
label: {
hover: {
border: colorPalette.black
},
checked: {
hover: {
background: colorPalette.black,
border: colorPalette.black
}
}
},
focus: {
border: "2px solid ".concat(colorPalette.utilityBlue),
outline: "1px solid ".concat(colorPalette.utilityBlue),
outlineOffset: '-1px',
checked: {
background: colorPalette.utilityBlue,
border: {
color: colorPalette.utilityBlue
}
}
}
});
var contentDialogTokens = {
borderRadius: 'none',
shadow: null
};
var radioTokens = merge__default["default"]({}, radioTokens$2, {
background: colorPalette.black,
backgroundInteractions: {
primaryHover: 'transparent',
borderColor: colorPalette.black,
borderWidthHover: 2,
borderColorHover: colorPalette.light20,
borderColorFocus: colorPalette.utilityBlue,
backgroundColorHover: colorPalette.black
},
color: {
background: {
primary: colorPalette.white,
surface: colorPalette.black,
fieldAccent: colorPalette.black
}
},
border: {
width: 2,
"default": '2px solid',
color: {
primary: colorPalette.black,
fieldAccent: colorPalette.light20,
field: colorPalette.light20,
accent: colorPalette.black
}
},
radioCardBorder: {
border: {
width: 1,
radius: 0
},
hover: {
// TO DO: find correct vale for boxShadow
boxShadow: "0 0 0 2px ".concat(colorPalette.light05)
}
},
focus: {
border: "2px solid ".concat(colorPalette.utilityBlue),
outline: "1px solid ".concat(colorPalette.utilityBlue),
outlineOffset: '-1px',
checked: {
border: {
width: 3,
color: colorPalette.utilityBlue
}
}
}
});
var tabsTokens = merge__default["default"]({}, tabsTokens$1, {
color: colors.foreground.primary,
fontWeight: 700,
background: 'none',
hover: {
background: 'none'
},
// pseudo border color
pseudoBorder: {
background: colors.background.primary,
height: 4
},
active: {
borderRadius: 'none'
}
});
var textInputTokens = merge__default["default"]({}, textInputTokens$2, {
borderColor: neutralColors.dark65,
borderRadius: baseTokens.border.radius.none,
boxShadow: null,
menu: {
borderRadius: baseTokens.border.radius.none,
padding: 0
},
menuOption: {
borderRadius: baseTokens.border.radius.none,
selected: {
backgroundColor: colors.background.surfaceMuted,
color: colors.foreground.neutral,
active: {
backgroundColor: colors.background.surfaceMuted
},
focused: {
backgroundColor: colors.background.surfaceMuted
}
}
},
hover: {
borderColor: 'unset'
},
focused: {
boxShadow: '0 0 0 transparent',
outline: "2px solid ".concat(colorPalette.utilityBlue),
outlineOffset: '-2px'
}
});
var textLinkTokens = merge__default["default"]({}, textLinkTokens$2, {
a: {
textDecoration: 'underline',
fontWeight: 'regular',
hover: {
textDecoration: 'none'
},
focus: {
outline: "2px solid ".concat(colorPalette.utilityBlue),
paddingTop: 5,
paddingBottom: 5,
textDecoration: 'none'
},
active: {
color: colorPalette.black,
textDecoration: 'none'
}
},
span: {
textDecoration: 'none',
fontWeight: 'regular',
hover: {
textDecoration: 'underline'
},
focus: {
outline: "2px solid ".concat(colorPalette.utilityBlue),
paddingTop: 5,
paddingBottom: 5,
textDecoration: 'none'
},
active: {
color: colorPalette.black,
textDecoration: 'underline'
}
}
});
var fontWeight = merge__default["default"]({}, fontWeight$2);
var heading = {
level: {
'1': {
mobile: {
fontWeight: fontWeight.extrabold,
fontSize: 32,
rows: 9,
lineHeight: 40
},
tablet: {
fontWeight: fontWeight.extrabold,
fontSize: 40,
rows: 11,
lineHeight: 48
}
},
'2': {
mobile: {
fontWeight: fontWeight.extrabold,
fontSize: 24,
rows: 8,
lineHeight: 32
},
tablet: {
fontWeight: fontWeight.extrabold,
fontSize: 32,
rows: 9,
lineHeight: 40
}
},
'3': {
mobile: {
fontWeight: fontWeight.extrabold,
fontSize: 20,
rows: 6,
lineHeight: 28
},
tablet: {
fontWeight: fontWeight.extrabold,
fontSize: 20,
rows: 7,
lineHeight: 28
}
},
'4': {
mobile: {
fontWeight: fontWeight.extrabold,
fontSize: 16,
rows: 5,
lineHeight: 24
},
tablet: {
fontWeight: fontWeight.extrabold,
fontSize: 16,
rows: 7,
lineHeight: 24
}
}
}
};
var text = merge__default["default"]({}, text$2, {
small: {
mobile: {
fontSize: 14,
fontWeight: fontWeight.regular,
rows: 5,
lineHeight: 17
},
tablet: {
fontSize: 14,
fontWeight: fontWeight.regular,
rows: 5,
lineHeight: 17
}
},
standard: {
mobile: {
fontSize: 16,
fontWeight: fontWeight.regular,
lineHeight: 24,
rows: 6
},
tablet: {
fontSize: 16,
fontWeight: fontWeight.regular,
rows: 6,
lineHeight: 24
}
},
large: {
mobile: {
fontSize: 20,
fontWeight: fontWeight.regular,
rows: 7,
lineHeight: 28
},
tablet: {
fontSize: 20,
fontWeight: fontWeight.regular,
rows: 7,
lineHeight: 28
}
}
});
// NOTE: this is directly derived from the default theme font (Aestetico), so we may need to tweak this
// NOTE: all tokens are currently assumptions and will need to be reviewed with
// the design team, but the shape shouldn't change too much.
var beaconSansFontMetrics = {
capHeight: 666,
ascent: 980,
descent: -340,
lineGap: 0,
unitsPerEm: 1000
};
var typography = merge__default["default"]({}, typography$2, {
fontFamily: {
sans: {
fontMetrics: beaconSansFontMetrics,
name: '"CBA Beacon Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
},
display: {
fontMetrics: beaconSansFontMetrics,
name: '"CBA Beacon Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
}
},
heading: heading,
text: text
});
// Tokens
// ------------------------------
var tokens = merge__default["default"]({}, defaultTokens, {
color: colors,
backgroundInteractions: backgroundInteractions,
typography: typography,
components: {
buttons: buttonTokens,
checkbox: checkboxTokens,
contentDialog: contentDialogTokens,
radio: radioTokens,
textInput: textInputTokens,
textLink: textLinkTokens,
tabs: tabsTokens
},
border: _objectSpread(_objectSpread({}, defaultTokens.border), {}, {
color: borderColors
})
});
var pantheonTokens = _objectSpread(_objectSpread({}, tokens), {}, {
name: 'Pantheon theme: light'
});
var _excluded = ["fontSize", "lineHeight"],
_excluded2 = ["border", "color", "sizing", "spacing", "typography"];
// Typography
// ------------------------------
// Adapted from node_modules/@capsizecss/core/dist/declarations/src/types.d.ts
/**
* Afford consumers the simplicity of pixel values for token declarations while
* supporting our users' browser preferences.
*/
function pxToRem(value) {
var px = typeof value === 'string' ? parseFloat(value) : value;
// NOTE: assume default browser settings of 16px root
var modifier = 1 / 16;
return "".concat(px * modifier, "rem");
}
/**
* Calculate leading and trim styles using
* [Capsize](https://seek-oss.github.io/capsize/) to ensure vertical spacing
* around text elements behaves as expected.
*/
function fontSizeToCapHeight(definition, fontMetrics) {
var _definition$lineHeigh;
var rowHeight = 4; // TODO: move to theme?
var capHeight = core.getCapHeight({
fontSize: definition.fontSize,
fontMetrics: fontMetrics
});
var _precomputeValues = core.precomputeValues({
fontSize: definition.fontSize,
leading: (_definition$lineHeigh = definition === null || definition === void 0 ? void 0 : definition.lineHeight) !== null && _definition$lineHeigh !== void 0 ? _definition$lineHeigh : definition.rows * rowHeight,
fontMetrics: fontMetrics
}),
fontSize = _precomputeValues.fontSize,
lineHeight = _precomputeValues.lineHeight,
trims = _objectWithoutProperties(_precomputeValues, _excluded);
return {
fontSize: pxToRem(fontSize),
fontWeight: definition.fontWeight,
lineHeight: pxToRem(lineHeight),
capHeight: pxToRem(capHeight),
trims: trims
};
}
function responsiveTypography(definition, fontMetrics) {
var mobile = definition.mobile,
tablet = definition.tablet;
return {
mobile: fontSizeToCapHeight(mobile, fontMetrics),
tablet: fontSizeToCapHeight(tablet, fontMetrics)
};
}
/**
* Apply "capsized" style rules to the typographic tokens, making them available
* in the theme.
*/
function decorateTypography(typography) {
var _ref = typography || defaultTokens.typography,
heading = _ref.heading,
text = _ref.text,
fontFamily = _ref.fontFamily;
return _objectSpread(_objectSpread({}, typography), {}, {
heading: _objectSpread(_objectSpread({}, heading), {}, {
level: _objectSpread({}, mapValues__default["default"](heading.level, function (definition) {
return responsiveTypography(definition, fontFamily.display.fontMetrics);
}))
}),
text: _objectSpread(_objectSpread({}, text), mapValues__default["default"](text, function (definition) {
return responsiveTypography(definition, fontFamily.sans.fontMetrics);
}))
});
}
function decorateTokens(tokens) {
var _ref2 = tokens || defaultTokens,
border = _ref2.border,
color = _ref2.color,
sizing = _ref2.sizing,
spacing = _ref2.spacing,
typography = _ref2.typography,
restTokens = _objectWithoutProperties(_ref2, _excluded2);
var decoratedTokens = _objectSpread({
breakpoint: breakpoints,
border: _objectSpread(_objectSpread({}, border), {}, {
radius: _objectSpread(_objectSpread({}, border.radius), {}, {
full: 9999 // prefer over percentage to avoid ovals for irregular rectangles
})
}),
color: _objectSpread(_objectSpread({}, color), {}, {
background: _objectSpread(_objectSpread({}, color.background), {}, {
infoLight: getLightVariant(color.background.info),
criticalLight: getLightVariant(color.background.critical),
positiveLight: getLightVariant(color.background.positive),
cautionLight: getLightVariant(color.background.caution)
})
}),
spacing: _objectSpread(_objectSpread({}, spacing), {}, {
none: 0
}),
sizing: _objectSpread(_objectSpread({}, sizing), {}, {
none: 0,
full: '100%'
}),
typography: decorateTypography(typography)
}, restTokens);
return decoratedTokens;
}
// Export
// ------------------------------
function makeSparkTheme(tokens) {
var decoratedTokens = decorateTokens(tokens);
return _objectSpread(_objectSpread({}, decoratedTokens), {}, {
backgroundLightness: mapValues__default["default"](decoratedTokens.color.background, function (background) {
return isLight(background) ? 'light' : 'dark';
}),
utils: makeThemeUtils()
});
}
// Register your themes here
// ------------------------------
var globalTheme = {
brighte: makeSparkTheme(brighteTokens),
pantheon: makeSparkTheme(pantheonTokens),
bravo: makeSparkTheme(bravoTokens)
};
var defaultTheme = makeSparkTheme(brighteTokens);
var GlobalThemeContext = /*#__PURE__*/react.createContext('brighte');
var ThemeContext = /*#__PURE__*/react.createContext(defaultTheme);
var useGlobalTheme = function useGlobalTheme() {
return react.useContext(GlobalThemeContext);
};
var useTheme = function useTheme() {
return react.useContext(ThemeContext);
};
var GlobalThemeProvider = GlobalThemeContext.Provider;
var ThemeProvider = function ThemeProvider(_ref) {
var children = _ref.children,
themeName = _ref.theme;
var globalThemeName = useGlobalTheme();
var theme = react.useMemo(function () {
return globalTheme[themeName !== null && themeName !== void 0 ? themeName : globalThemeName];
}, [globalThemeName, themeName]);
return jsxRuntime.jsx(ThemeContext.Provider, {
value: theme,
children: children
});
};
var FIRA_SANS_REGULAR_URL = 'https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400&display=swap';
var FIRA_SANS_BOLD_URL = 'https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&display=swap';
var FIRA_SANS_EXTRABOLD_URL = 'https://fonts.googleapis.com/css2?family=Fira+Sans:wght@800&display=swap';
var styles$2 = "\n@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;800&display=swap');\n".trim();
function FiraSansStylesheet() {
return jsxRuntime.jsx(react$1.Global, {
styles: styles$2
});
}
var AESTETICO_REGULAR_URL = 'https://static-assets.prod.cloud.brighte.com.au/fonts/Aestetico-Regular.woff2';
var AESTETICO_SEMIBOLD_URL = 'https://static-assets.prod.cloud.brighte.com.au/fonts/Aestetico-SemiBold.woff2';
var styles$1 = "\n@import \"//hello.myfonts.net/count/46e60e\";\n\n@font-face {\n font-family: Aestetico;\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(".concat(AESTETICO_REGULAR_URL, ") format(\"woff2\");\n}\n\n@font-face {\n font-family: Aestetico;\n font-style: normal;\n font-weight: 600;\n font-display: swap;\n src: url(").concat(AESTETICO_SEMIBOLD_URL, ") format(\"woff2\");\n}\n").trim();
function AesteticoStylesheet() {
return jsxRuntime.jsx(react$1.Global, {
styles: styles$1
});
}
var BEACON_SANS_REGULAR_URL = 'https://static-assets.prod.cloud.brighte.com.au/fonts/CBABeaconSans-Regular.woff2';
var BEACON_SANS_EXTRABOLD_URL = 'https://static-assets.prod.cloud.brighte.com.au/fonts/CBABeaconSans-ExtraBold.woff2';
var styles = "\n@font-face {\n font-family: 'CBA Beacon Sans';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(".concat(BEACON_SANS_REGULAR_URL, ") format(\"woff2\");\n}\n\n@font-face {\n font-family: 'CBA Beacon Sans';\n font-style: normal;\n font-weight: 800;\n font-display: swap;\n src: url(").concat(BEACON_SANS_EXTRABOLD_URL, ") format(\"woff2\");\n}\n").trim();
function BeaconSansStylesheet() {
return jsxRuntime.jsx(react$1.Global, {
styles: styles
});
}
exports.AESTETICO_REGULAR_URL = AESTETICO_REGULAR_URL;
exports.AESTETICO_SEMIBOLD_URL = AESTETICO_SEMIBOLD_URL;
exports.AesteticoStylesheet = AesteticoStylesheet;
exports.BEACON_SANS_EXTRABOLD_URL = BEACON_SANS_EXTRABOLD_URL;
exports.BEACON_SANS_REGULAR_URL = BEACON_SANS_REGULAR_URL;
exports.BeaconSansStylesheet = BeaconSansStylesheet;
exports.FIRA_SANS_BOLD_URL = FIRA_SANS_BOLD_URL;
exports.FIRA_SANS_EXTRABOLD_URL = FIRA_SANS_EXTRABOLD_URL;
exports.FIRA_SANS_REGULAR_URL = FIRA_SANS_REGULAR_URL;
exports.FiraSansStylesheet = FiraSansStylesheet;
exports.GlobalThemeContext = GlobalThemeContext;
exports.GlobalThemeProvider = GlobalThemeProvider;
exports.ThemeProvider = ThemeProvider;
exports.createResponsiveMapFn = createResponsiveMapFn;
exports.defaultTheme = defaultTheme;
exports.defaultTokens = defaultTokens;
exports.globalTheme = globalTheme;
exports.isLight = isLight;
exports.makeSparkTheme = makeSparkTheme;
exports.useTheme = useTheme;