diff --git a/aries-site/src/components/Login.jsx b/aries-site/src/components/Login.jsx
new file mode 100644
index 0000000000..8814aade26
--- /dev/null
+++ b/aries-site/src/components/Login.jsx
@@ -0,0 +1,51 @@
+import {
+ Form,
+ FormField,
+ TextInput,
+ Button,
+ Page,
+ PageContent,
+ PageHeader,
+} from 'grommet';
+import PropTypes from 'prop-types';
+
+export const Login = ({ setAuthenticated }) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+Login.propTypes = {
+ setAuthenticated: PropTypes.func,
+};
diff --git a/aries-site/src/data/color.js b/aries-site/src/data/color.js
index 2db08cf54a..8363cca6b8 100644
--- a/aries-site/src/data/color.js
+++ b/aries-site/src/data/color.js
@@ -13,7 +13,7 @@ const primaryColors = [
{
name: 'brand',
value: 'brand',
- hex: colors['green!'],
+ hex: colors['green!'].light,
},
];
@@ -21,32 +21,32 @@ const coreColors = [
{
name: 'purple!',
value: 'purple!',
- hex: colors['purple!'],
+ hex: colors['purple!'].light,
},
{
name: 'teal!',
value: 'teal!',
- hex: colors['teal!'],
+ hex: colors['teal!'].light,
},
{
name: 'blue!',
value: 'blue!',
- hex: colors['blue!'],
+ hex: colors['blue!'].light,
},
{
name: 'red!',
value: 'red!',
- hex: colors['red!'],
+ hex: colors['red!'].light,
},
{
name: 'orange!',
value: 'orange!',
- hex: colors['orange!'],
+ hex: colors['orange!'].light,
},
{
name: 'yellow!',
value: 'yellow!',
- hex: colors['yellow!'],
+ hex: colors['yellow!'].light,
},
];
@@ -365,7 +365,7 @@ const focusColor = [
{
name: 'focus',
value: colors['teal!'],
- hex: colors['teal!'],
+ hex: colors['teal!'].light,
},
];
@@ -416,28 +416,38 @@ const layerColor = [
const graphColor = [
{
name: 'graph-0',
- value: colors['orange!'],
- hex: colors['orange!'],
+ value: colors['graph-0'].light,
+ hex: colors['graph-0'].light,
},
{
name: 'graph-1',
- value: colors['blue!'],
- hex: colors['blue!'],
+ value: colors['graph-1'].light,
+ hex: colors['graph-1'].light,
},
{
name: 'graph-2',
- value: colors['purple!'],
- hex: colors['purple!'],
+ value: colors['graph-2'].light,
+ hex: colors['graph-2'].light,
},
{
name: 'graph-3',
- value: colors['yellow!'],
- hex: colors['yellow!'],
+ value: colors['graph-3'].light,
+ hex: colors['graph-3'].light,
},
{
name: 'graph-4',
- value: colors['teal!'],
- hex: colors['teal!'],
+ value: colors['graph-4'].light,
+ hex: colors['graph-4'].light,
+ },
+ {
+ name: 'graph-5',
+ value: colors['graph-5'].light,
+ hex: colors['graph-5'].light,
+ },
+ {
+ name: 'graph-6',
+ value: colors['graph-6'].light,
+ hex: colors['graph-6'].light,
},
];
diff --git a/aries-site/src/examples/foundation/color/ColorPalettes.js b/aries-site/src/examples/foundation/color/ColorPalettes.js
index 53a52683c6..3559e63051 100644
--- a/aries-site/src/examples/foundation/color/ColorPalettes.js
+++ b/aries-site/src/examples/foundation/color/ColorPalettes.js
@@ -220,4 +220,4 @@ export const ElevationDark = () => {
export const Overlay = () => layerColor && generateColorExamples(layerColor);
export const GraphColors = () =>
- graphColor && generateColorExamples(graphColor);
+ graphColor && generateColorExamples(graphColor, 'text-strong');
diff --git a/aries-site/src/layouts/main/Layout.js b/aries-site/src/layouts/main/Layout.js
index 37f5558349..9b903bd850 100644
--- a/aries-site/src/layouts/main/Layout.js
+++ b/aries-site/src/layouts/main/Layout.js
@@ -40,6 +40,7 @@ import { getRelatedContent, getPageDetails } from '../../utils';
import { siteContents } from '../../data/search/contentForSearch';
import { UpdateNotification } from '../content/UpdateNotification';
import { ViewContext } from '../../pages/_app';
+import { Login } from '../../components/Login';
export const Layout = ({
backgroundImage,
@@ -48,6 +49,13 @@ export const Layout = ({
topic,
isLanding = false,
}) => {
+ const [authenticated, setAuthenticated] = useState(
+ localStorage.getItem('theme-update-demo') || false,
+ );
+ useEffect(() => {
+ if (localStorage.getItem('theme-update-demo')) setAuthenticated(true);
+ }, []);
+
useEffect(() => {
if (Config.gaId) {
initialize(Config.gaId);
@@ -143,118 +151,128 @@ export const Layout = ({
{/* When a backgroundImage is present, the main page content becomes
the `last` child. We want this content to drive the layout.
For details on this prop, see here: https://v2.grommet.io/stack#guidingChild */}
-
- {backgroundImage && (
-
- )}
-
- {/* I think Head is redundant at this point,
+ {authenticated ? (
+
+ {backgroundImage && (
+
+ )}
+
+ {/* I think Head is redundant at this point,
but left it as is for now */}
-
-
- <>
-
- {skiplinks.map(({ id, label }) => (
-
- ))}
-
-
-
-
-
-
- {/* row-reverse direction, tab through ToC first */}
-
- {layout !== 'plain' ? (
- <>
- {showInPageNav ? (
-
-
-
+
+
+ <>
+
+ {skiplinks.map(({ id, label }) => (
+
+ ))}
+
+
+
+
+
+
+ {/* row-reverse direction, tab through ToC first */}
+
+ {layout !== 'plain' ? (
+ <>
+ {showInPageNav ? (
+
+
+
+
+ ) : undefined}
+
+ {/* top pad handled by PageHeader */}
+
+
+
+ {pageUpdateReady &&
+ contentHistory[title]?.update && (
+
+ )}
+ {children}
+
+ {relatedContent.length > 0 && (
+
+ )}
+
- ) : undefined}
-
- {/* top pad handled by PageHeader */}
+
+ ) : (
+ <>
-
-
- {pageUpdateReady && contentHistory[title]?.update && (
-
- )}
- {children}
-
- {relatedContent.length > 0 && (
-
- )}
-
-
-
- ) : (
- <>
-
- {children}
-
- )}
-
-
-
-
-
-
+ )}
+
+
+
+
-
-
-
-
-
+ modal
+ onClose={onClose}
+ title="We’d love your feedback"
+ onSubmit={onSubmit}
+ >
+
+
+
+
+
+
+ ) : (
+
+ )}
);
};
diff --git a/aries-site/src/themes/aries.js b/aries-site/src/themes/aries.js
index 1dbcc84fbd..afcda167b3 100644
--- a/aries-site/src/themes/aries.js
+++ b/aries-site/src/themes/aries.js
@@ -1,61 +1,2683 @@
-import { hpe, hpePop } from 'grommet-theme-hpe';
-import { deepMerge } from 'grommet/utils';
-import { Info } from 'grommet-icons';
-
-export const aries = deepMerge(hpe, {
- defaultMode: 'dark',
- // To be stripped out once theme changes are made in grommet-theme-hpe.
- // keeping file for use as playground for future theme adjusments that need
- // to be quickly tested
- buttonGroup: {
- // any Box props
- gap: 'small',
- },
- feedback: {
- closeButton: {
- a11yTitle: `You are in a dialog containing a form to submit feedback.
- To close this layer, press Enter.`,
+/* eslint-disable max-len */
+// import { hpePop } from 'grommet-theme-hpe';
+import { deepMerge, deepFreeze } from 'grommet/utils';
+import {
+ Info,
+ Down,
+ Blank,
+ Close,
+ Up,
+ Hpe,
+ CircleAlert,
+ Ascending,
+ Descending,
+ Unsorted,
+} from 'grommet-icons';
+import { css } from 'styled-components';
+import {
+ dark as localDark,
+ light as localLight,
+ large as localLarge,
+ small as localSmall,
+ global as localGlobal,
+ components as localComponents,
+} from 'hpe-design-tokens';
+
+const MISSING = {
+ color: 'red',
+ weight: 700,
+};
+
+// TO DO should these be added as tokens?
+const backgrounds = {
+ 'datawave-green-1':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/AdobeStock-57301038_800_0_72_RGB+19849.jpg)',
+ 'datawave-green-2':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/AdobeStock_222468625_800_0_72_RGB+19870.jpg)',
+ 'datawave-multi-1':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/AdobeStock-257301038_800_0_72_RGB+19842.jpg)',
+ 'datawave-multi-2':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/HPE_data_satin_01_800_0_72_RGB+20062.jpg)',
+ 'datawave-multi-3':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/HPE_data_satin_02_800_0_72_RGB+20061.jpg)',
+ 'datawave-multi-4':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/HPE_data_slice_01_800_0_72_RGB+20107.jpg)',
+ 'datawave-multi-5':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/HPE_data_slice_02_800_0_72_RGB+20106.jpg)',
+ 'datawave-multi-6':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/HPE_data_slice_03_800_0_72_RGB+20105.jpg)',
+ 'datawave-white-1':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1135685131_800_0_72_RGB+19858.jpg)',
+ 'datawave-white-2':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1278457196_800_0_72_RGB+19857.jpg)',
+ 'datawave-white-3':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1304863046_800_0_72_RGB+19856.jpg)',
+ 'datawave-white-4':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-978721396_800_0_72_RGB+19859.jpg)',
+ 'light-shadow-1':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1135685107_800_0_72_RGB+19853.jpg)',
+ 'light-shadow-2':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1135685108_800_0_72_RGB+19852.jpg)',
+ 'light-shadow-3':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1135685118_800_0_72_RGB+19854.jpg)',
+ 'light-shadow-4':
+ 'url(https://d3hq6blov2iije.cloudfront.net/images/textures/GettyImages-1190757657_800_0_72_RGB+19855.jpg)',
+ 'orange-yellow': `linear-gradient(
+ 45deg,
+ hsl(22deg 100% 50%) 0%,
+ hsl(34deg 100% 50%) 50%,
+ hsl(46deg 100% 50%) 100%
+ );`,
+ 'purple-blue': `linear-gradient(
+ 45deg,
+ hsl(281deg 100% 63%) 1%,
+ hsl(227deg 83% 58%) 50%,
+ hsl(174deg 69% 53%) 99%
+ );`,
+ 'purple-blue-yellow': `linear-gradient(
+ 225deg,
+ hsl(263deg 82% 55%) 0%,
+ hsl(196deg 72% 53%) 25%,
+ hsl(171deg 80% 63%) 50%,
+ hsl(138deg 93% 68%) 75%,
+ hsl(47deg 99% 50%) 100%
+ );`,
+ 'purple-magenta-yellow': `linear-gradient(
+ 45deg,
+ hsl(274deg 100% 50%) 0%,
+ hsl(340deg 100% 50%) 50%,
+ hsl(46deg 100% 50%) 100%
+ );`,
+};
+
+const baseSpacing = 24;
+
+const flattenObject = (obj, delimiter = '.', prefix = '') =>
+ Object.keys(obj).reduce((acc, k) => {
+ const pre = prefix.length ? `${prefix}${delimiter}` : '';
+ if (
+ typeof obj[k] === 'object' &&
+ obj[k] !== null &&
+ Object.keys(obj[k]).length > 0 &&
+ !('$value' in obj[k])
+ )
+ Object.assign(
+ acc,
+ flattenObject(
+ obj[k],
+ delimiter,
+ !['hpe', 'color'].includes(k) ? pre + k : '',
+ ),
+ );
+ else acc[pre + k] = obj[k];
+ return acc;
+ }, {});
+
+const access = (path, object) => {
+ return path.split('.').reduce((o, i) => o[i], object);
+};
+
+const componentSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+const buttonKinds = ['default', 'secondary', 'primary', 'toolbar'];
+const buttonStates = ['hover', 'active', 'disabled'];
+
+const textSizes = [
+ 'xsmall',
+ 'small',
+ 'medium',
+ 'large',
+ 'xlarge',
+ 'xxlarge',
+ '3xl',
+ '4xl',
+ '5xl',
+ '6xl',
+];
+
+const buildTheme = tokens => {
+ const {
+ light,
+ dark,
+ small,
+ large,
+ elevationlight,
+ elevationdark,
+ global,
+ components,
+ } = tokens;
+
+ const flatColors = flattenObject(light, '-');
+ const tokenColors = {};
+ Object.keys(flatColors).forEach(color => {
+ if (!color.includes('elevation')) {
+ const adjustedColor = color.split('-').join('.');
+ tokenColors[color] = {
+ light: access(`hpe.color.${adjustedColor}`, light),
+ dark: access(`hpe.color.${adjustedColor}`, dark),
+ };
+ }
+ });
+ const colors = {
+ // Here we're passing through all the colors from hpe-design-tokens
+ ...tokenColors,
+ // ---- DEPRECATED ---- //
+ 'accent-1': undefined,
+ 'accent-2': undefined,
+ 'accent-3': undefined,
+ 'accent-4': undefined,
+ 'neutral-1': undefined,
+ 'neutral-2': undefined,
+ 'neutral-3': undefined,
+ 'neutral-4': undefined,
+ 'neutral-5': undefined,
+ 'status-error': undefined,
+
+ // ---- TO DO: Tokens do not exist, should they? ---- //
+ brand: MISSING.color,
+ control: MISSING.color,
+ 'active-text': MISSING.color,
+ 'disabled-text': MISSING.color, // deprecated, use text-weak instead
+
+ 'text-primary-button': components.hpe.button.primary.enabled.textColor,
+ 'background-cta-alternate': MISSING.color,
+
+ // ----------- These ones we need to map manually for backwards compatibility -----------
+ // ----------- with current color namespace ---------------
+ 'background-layer-overlay': {
+ dark: dark.hpe.color.background.screenOverlay,
+ light: light.hpe.color.background.screenOverlay,
},
- container: {
- pad: 'medium',
+ 'active-background': {
+ dark: dark.hpe.color.background.active,
+ light: light.hpe.color.background.active,
},
- header: {
- align: 'start',
- direction: 'row',
- justify: 'between',
- gap: 'xsmall',
+ background: {
+ dark: dark.hpe.color.background.default,
+ light: light.hpe.color.background.default,
+ },
+ text: {
+ dark: dark.hpe.color.text.default,
+ light: light.hpe.color.text.default,
+ },
+ border: {
+ dark: dark.hpe.color.border.default,
+ light: light.hpe.color.border.default,
+ },
+ blue: {
+ dark: dark.hpe.color.decorative.blue,
+ light: light.hpe.color.decorative.blue,
+ },
+ 'blue!': {
+ dark: dark.hpe.color.decorative['blue!'],
+ light: light.hpe.color.decorative['blue!'],
+ },
+ green: {
+ dark: dark.hpe.color.decorative.green,
+ light: light.hpe.color.decorative.green,
+ },
+ 'green!': {
+ dark: dark.hpe.color.decorative['green!'],
+ light: light.hpe.color.decorative['green!'],
+ },
+ teal: {
+ dark: dark.hpe.color.decorative.teal,
+ light: light.hpe.color.decorative.teal,
+ },
+ 'teal!': {
+ dark: dark.hpe.color.decorative['teal!'],
+ light: light.hpe.color.decorative['teal!'],
+ },
+ purple: {
+ dark: dark.hpe.color.decorative.purple,
+ light: light.hpe.color.decorative.purple,
+ },
+ 'purple!': {
+ dark: dark.hpe.color.decorative['purple!'],
+ light: light.hpe.color.decorative['purple!'],
+ },
+ red: {
+ dark: dark.hpe.color.decorative.red,
+ light: light.hpe.color.decorative.red,
+ },
+ 'red!': {
+ dark: dark.hpe.color.decorative['red!'],
+ light: light.hpe.color.decorative['red!'],
+ },
+ orange: {
+ dark: dark.hpe.color.decorative.orange,
+ light: light.hpe.color.decorative.orange,
+ },
+ 'orange!': {
+ dark: dark.hpe.color.decorative['orange!'],
+ light: light.hpe.color.decorative['orange!'],
+ },
+ yellow: {
+ dark: dark.hpe.color.decorative.yellow,
+ light: light.hpe.color.decorative.yellow,
+ },
+ 'yellow!': {
+ dark: dark.hpe.color.decorative['yellow!'],
+ light: light.hpe.color.decorative['yellow!'],
+ },
+ 'graph-0': {
+ light: light.hpe.color.dataVis.categorical[10],
+ dark: dark.hpe.color.dataVis.categorical[10],
+ },
+ 'graph-1': {
+ light: light.hpe.color.dataVis.categorical[20],
+ dark: dark.hpe.color.dataVis.categorical[20],
+ },
+ 'graph-2': {
+ light: light.hpe.color.dataVis.categorical[30],
+ dark: dark.hpe.color.dataVis.categorical[30],
+ },
+ 'graph-3': {
+ light: light.hpe.color.dataVis.categorical[40],
+ dark: dark.hpe.color.dataVis.categorical[40],
+ },
+ 'graph-4': {
+ light: light.hpe.color.dataVis.categorical[50],
+ dark: dark.hpe.color.dataVis.categorical[50],
+ },
+ 'graph-5': {
+ light: light.hpe.color.dataVis.categorical[60],
+ dark: dark.hpe.color.dataVis.categorical[60],
+ },
+ 'graph-6': {
+ light: light.hpe.color.dataVis.categorical[70],
+ dark: dark.hpe.color.dataVis.categorical[70],
+ },
+ 'status-critical': {
+ dark: dark.hpe.color.icon.critical,
+ light: light.hpe.color.icon.critical,
+ },
+ 'status-warning': {
+ dark: dark.hpe.color.icon.warning,
+ light: light.hpe.color.icon.warning,
+ },
+ 'status-ok': {
+ dark: dark.hpe.color.icon.ok,
+ light: light.hpe.color.icon.ok,
+ },
+ 'status-unknown': {
+ dark: dark.hpe.color.icon.unknown,
+ light: light.hpe.color.icon.unknown,
+ },
+ 'status-disabled': '#CCCCCC', // deprecated, does not support light and dark.hpe. use text-weak instead
+ 'validation-critical': {
+ light: light.hpe.color.background.critical,
+ dark: dark.hpe.color.background.critical,
+ },
+ 'validation-ok': {
+ light: light.hpe.color.background.ok,
+ dark: dark.hpe.color.background.ok,
+ },
+ 'validation-warning': {
+ light: light.hpe.color.background.warning,
+ dark: dark.hpe.color.background.critical,
+ },
+ icon: {
+ light: light.hpe.color.icon.default,
+ dark: dark.hpe.color.icon.default,
+ },
+ 'selected-background': 'background-selected-strong-enabled',
+ 'selected-text': 'text-onSelectedStrong',
+ placeholder: {
+ light: light.hpe.color.text.placeholder,
+ dark: dark.hpe.color.text.placeholder,
+ },
+ };
+
+ const dimensions = {
+ borderSize: {
+ xsmall: large.hpe.borderWidth.xsmall,
+ small: large.hpe.borderWidth.small,
+ medium: large.hpe.borderWidth.medium,
+ default: large.hpe.borderWidth.default,
+ large: large.hpe.borderWidth.large,
+ xlarge: large.hpe.borderWidth.xlarge,
+ },
+ edgeSize: {
+ none: large.hpe.spacing.none,
+ hair: large.hpe.spacing.hair,
+ xxsmall: large.hpe.spacing.xxsmall,
+ xsmall: large.hpe.spacing.xsmall,
+ small: large.hpe.spacing.small,
+ medium: large.hpe.spacing.medium,
+ large: large.hpe.spacing.large,
+ xlarge: large.hpe.spacing.xlarge,
+ responsiveBreakpoint: 'small',
+ },
+ size: {
+ xxsmall: large.hpe.size.content.xxsmall,
+ xsmall: large.hpe.size.content.xsmall,
+ small: large.hpe.size.content.small,
+ medium: large.hpe.size.content.medium,
+ large: large.hpe.size.content.large,
+ xlarge: large.hpe.size.content.xlarge,
+ xxlarge: large.hpe.size.content.xxlarge,
+ full: '100%',
+ },
+ breakpoints: {
+ xsmall: {
+ borderSize: {
+ xsmall: small.hpe.borderWidth.xsmall,
+ small: small.hpe.borderWidth.small,
+ medium: small.hpe.borderWidth.medium,
+ default: small.hpe.borderWidth.default,
+ large: small.hpe.borderWidth.large,
+ xlarge: small.hpe.borderWidth.xlarge,
+ },
+ edgeSize: {
+ none: small.hpe.spacing.none,
+ hair: small.hpe.spacing.hair,
+ xxsmall: small.hpe.spacing.xxsmall,
+ xsmall: small.hpe.spacing.xsmall,
+ small: small.hpe.spacing.small,
+ medium: small.hpe.spacing.medium,
+ large: small.hpe.spacing.large,
+ xlarge: small.hpe.spacing.xlarge,
+ responsiveBreakpoint: 'small',
+ },
+ size: {
+ xxsmall: small.hpe.size.content.xxsmall,
+ xsmall: small.hpe.size.content.xsmall,
+ small: small.hpe.size.content.small,
+ medium: small.hpe.size.content.medium,
+ large: small.hpe.size.content.large,
+ xlarge: small.hpe.size.content.xlarge,
+ xxlarge: small.hpe.size.content.xxlarge,
+ full: '100%',
+ },
+ value: global.hpe.breakpoint.xsmall,
+ },
+ small: {
+ borderSize: {
+ xsmall: small.hpe.borderWidth.xsmall,
+ small: small.hpe.borderWidth.small,
+ medium: small.hpe.borderWidth.medium,
+ default: small.hpe.borderWidth.default,
+ large: small.hpe.borderWidth.large,
+ xlarge: small.hpe.borderWidth.xlarge,
+ },
+ edgeSize: {
+ none: small.hpe.spacing.none,
+ hair: small.hpe.spacing.hair,
+ xxsmall: small.hpe.spacing.xxsmall,
+ xsmall: small.hpe.spacing.xsmall,
+ small: small.hpe.spacing.small,
+ medium: small.hpe.spacing.medium,
+ large: small.hpe.spacing.large,
+ xlarge: small.hpe.spacing.xlarge,
+ responsiveBreakpoint: 'small',
+ },
+ size: {
+ xxsmall: small.hpe.size.content.xxsmall,
+ xsmall: small.hpe.size.content.xsmall,
+ small: small.hpe.size.content.small,
+ medium: small.hpe.size.content.medium,
+ large: small.hpe.size.content.large,
+ xlarge: small.hpe.size.content.xlarge,
+ xxlarge: small.hpe.size.content.xxlarge,
+ full: '100%',
+ },
+ value: global.hpe.breakpoint.small,
+ },
+ medium: {
+ value: global.hpe.breakpoint.medium,
+ },
+ large: {
+ value: global.hpe.breakpoint.large,
+ },
+ xlarge: {},
+ },
+ };
+
+ // option button kind styles. abstracted so select.emptySearchMessage
+ // can reference pad value
+ const option = {
+ color: components.hpe.select.option.enabled.textColor,
+ border: {
+ radius:
+ dimensions.edgeSize[components.hpe.select.medium.option.borderRadius] ||
+ components.hpe.select.medium.option.borderRadius,
+ width:
+ dimensions.borderSize[
+ components.hpe.select.medium.option.borderWidth
+ ] || components.hpe.select.medium.option.borderWidth,
+ color: components.hpe.select.option.enabled.borderColor,
+ },
+ pad: {
+ horizontal: components.hpe.select.medium.option.paddingX,
+ vertical: components.hpe.select.medium.option.paddingY,
+ },
+ font: {
+ weight: components.hpe.select.option.enabled.fontWeight,
+ },
+ };
+
+ // abstracted so button and pinned list icon can reference
+ const mediumIconOnlyPad = {
+ vertical: components.hpe.button.medium.default.iconOnly.paddingY,
+ horizontal: components.hpe.button.medium.default.iconOnly.paddingX,
+ };
+
+ const anchorSizeTheme = {};
+ textSizes.forEach(size => {
+ anchorSizeTheme[size] = {
+ color: components.hpe.anchor.default.enabled.textColor,
+ textDecoration: components.hpe.anchor.default.enabled.textDecoration,
+ fontWeight: components.hpe.anchor.default.enabled.fontWeight,
+ };
+ });
+
+ const paragraphTheme = {};
+ const textTheme = {};
+ textSizes.forEach(size => {
+ paragraphTheme[size] = {
+ size: large.hpe.text?.[size]?.fontSize,
+ height: large.hpe.text?.[size]?.lineHeight,
+ maxWidth: large.hpe.paragraph?.[size]?.maxWidth,
+ };
+ textTheme[size] = {
+ size: large.hpe.text?.[size].fontSize,
+ height: large.hpe.text?.[size].lineHeight,
+ };
+ });
+
+ const buttonKindTheme = {};
+ buttonKinds.forEach(kind => {
+ buttonKindTheme[kind] = {
+ background: components.hpe.button?.[kind].enabled.background,
+ border: {
+ width:
+ dimensions.borderSize[
+ components.hpe.button.medium?.[kind].borderWidth
+ ] || components.hpe.button.medium?.[kind].borderWidth,
+ color: components.hpe.button?.[kind].enabled.borderColor,
+ radius:
+ dimensions.borderSize[
+ components.hpe.button.medium?.[kind].borderRadius
+ ] || components.hpe.button.medium?.[kind].borderRadius,
+ },
+ color: components.hpe.button?.[kind].enabled.textColor,
+ font: {
+ weight: components.hpe.button?.[kind].enabled.fontWeight,
+ },
+ };
+ });
+
+ const buttonStatesTheme = {};
+ buttonStates.forEach(state => {
+ buttonStatesTheme[state] = {};
+ buttonKinds.forEach(kind => {
+ let adjustedState = state;
+ if (state === 'active') {
+ adjustedState = 'selected';
+ buttonStatesTheme[state][kind] = {
+ background: {
+ color:
+ components.hpe.button?.[kind]?.[adjustedState].enabled.background,
+ },
+ border: {
+ // Q: this token isn't correct
+ color:
+ components.hpe.button?.[kind]?.[adjustedState].enabled
+ .borderColor,
+ },
+ color:
+ components.hpe.button?.[kind]?.[adjustedState].enabled.textColor,
+ font: {
+ weight:
+ components.hpe.button?.[kind]?.[adjustedState].enabled.fontWeight,
+ },
+ };
+ if (!('active' in buttonStatesTheme.hover))
+ buttonStatesTheme.hover.active = {};
+ buttonStatesTheme.hover[state][kind] = {
+ background: {
+ color:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover?.background,
+ },
+ border: {
+ color:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover
+ ?.borderColor,
+ },
+ color:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover?.textColor,
+ font: {
+ weight:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover?.fontWeight,
+ },
+ };
+ } else if (kind === 'option') {
+ if (state === 'active') adjustedState = 'selected';
+ buttonStatesTheme[state][kind] = {
+ background: {
+ color:
+ components.hpe.select.option?.[adjustedState].enabled.background,
+ },
+ border: {
+ color: components.hpe.select.option?.[adjustedState].borderColor,
+ },
+ color: components.hpe.select.option?.[adjustedState].textColor,
+ };
+ } else {
+ buttonStatesTheme[state][kind] = {
+ background: {
+ color: components.hpe.button?.[kind]?.[adjustedState].background,
+ },
+ border: {
+ width: '',
+ color: components.hpe.button?.[kind]?.[adjustedState].borderColor,
+ },
+ color: components.hpe.button?.[kind]?.[adjustedState].textColor,
+ font: {
+ weight: components.hpe.button?.[kind]?.[adjustedState].fontWeight,
+ },
+ };
+ }
+ });
+ });
+
+ const buttonSizesTheme = {};
+ componentSizes.forEach(size => {
+ const kindStyles = {};
+ buttonKinds.forEach(kind => {
+ kindStyles[kind] = {
+ border: {
+ radius: components.hpe.button?.[size]?.[kind].borderRadius,
+ },
+ pad: {
+ vertical: components.hpe.button?.[size]?.[kind].paddingY,
+ horizontal: components.hpe.button?.[size]?.[kind].paddingX,
+ },
+ };
+ });
+ buttonSizesTheme[size] = {
+ border: {
+ radius: components.hpe.button?.[size]?.default.borderRadius,
+ },
+ pad: {
+ vertical: components.hpe.button?.[size]?.default.paddingY,
+ horizontal: components.hpe.button?.[size]?.default.paddingX,
+ },
+ iconOnly: {
+ pad: {
+ vertical: components.hpe.button?.[size]?.default.iconOnly.paddingY,
+ horizontal: components.hpe.button?.[size]?.default.iconOnly.paddingX,
+ },
+ },
+ ...kindStyles,
+ };
+ });
+
+ return deepFreeze({
+ defaultMode: 'light',
+ global: {
+ backgrounds, // TO DO backgrounds
+ ...dimensions,
+ colors,
+ control: {
+ border: {
+ radius: components.hpe.formField.medium.input.container.borderRadius,
+ color: components.hpe.formField.input.container.enabled.borderColor,
+ },
+ },
+ input: {
+ font: {
+ height: 'inherit',
+ weight: components.hpe.formField.medium.valueText.fontWeight,
+ },
+ padding: {
+ horizontal: components.hpe.formField.medium.input.container.paddingX,
+ vertical: components.hpe.formField.medium.input.container.paddingY,
+ },
+ readOnly: {
+ background:
+ components.hpe.formField.input.container.readOnly.background,
+ border: {
+ color:
+ components.hpe.formField.input.container.readOnly.borderColor,
+ },
+ },
+ extend: `
+ &::-webkit-input-placeholder {
+ font-weight: ${components.hpe.formField.medium.placeholderText.fontWeight};
+ }
+
+ &::-moz-placeholder {
+ font-weight: ${components.hpe.formField.medium.placeholderText.fontWeight};
+ }
+
+ &:-ms-input-placeholder {
+ font-weight: ${components.hpe.formField.medium.placeholderText.fontWeight};
+ }
+ `,
+ },
+ font: {
+ family: global.hpe.fontStack.primary,
+ face: `
+ @font-face {
+ font-family: "Metric";
+ src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
+ url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
+ }
+ @font-face {
+ font-family: "Metric";
+ src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
+ url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
+ font-weight: 400;
+ }
+ @font-face {
+ font-family: "Metric";
+ src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff2") format('woff2'),
+ url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff") format('woff');
+ font-weight: 700;
+ }
+ @font-face {
+ font-family: "Metric";
+ src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff2") format('woff2'),
+ url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff") format('woff');
+ font-weight: 600;
+ }
+ @font-face {
+ font-family: "Metric";
+ src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff2") format('woff2'),
+ url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff") format('woff');
+ font-weight: 500;
+ }
+ @font-face {
+ font-family: "Metric";
+ src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Light.woff2") format('woff2'),
+ url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Light.woff") format('woff');
+ font-weight: 100;
+ }`,
+ size: large.hpe.text.medium.fontSize,
+ height: large.hpe.text.medium.lineHeight,
+ },
+ focus: {
+ border: undefined,
+ },
+ active: {
+ background: 'background-active',
+ color: 'active-text',
+ },
+ drop: {
+ background: components.hpe.drop.background,
+ border: {
+ radius:
+ dimensions.edgeSize[components.hpe.drop.borderRadius] ||
+ components.hpe.drop.borderRadius,
+ },
+ margin: components.hpe.drop.margin,
+ intelligentMargin: true,
+ shadowSize: 'medium',
+ /* HPE Global Header/Footer Service a.k.a. HPE Common HFWS sets the header
+ * at a z-index of 101. This adjustment brings Drop in alignment with Layer
+ * which needs an elevated z-index to sit atop the Global header. */
+ zIndex: components.hpe.drop.zIndex,
+ },
+ elevation: {
+ // Elevation values were derived from this Figma file.
+ // https://www.figma.com/file/eZYR3dtWdb9U90QvJ7p3T9/HPE-Color-Styles?node-id=405%3A25
+ // Naming in Figma file is strong/default/weak vs. Grommet t-shirt sizing.
+ // As defined here, default is currently mapping to medium.
+ light: {
+ small: elevationlight
+ ? elevationlight.hpe.elevation.small
+ : light.hpe.shadow.small,
+ medium: elevationlight
+ ? elevationlight.hpe.elevation.medium
+ : light.hpe.shadow.medium,
+ large: elevationlight
+ ? elevationlight.hpe.elevation.large
+ : light.hpe.shadow.large,
+ 'inset-selected': `inset 3px 0 ${light.hpe.color.border.selected}`,
+ },
+ dark: {
+ small: elevationdark
+ ? elevationdark.hpe.elevation.small
+ : dark.hpe.shadow.small,
+ medium: elevationdark
+ ? elevationdark.hpe.elevation.medium
+ : dark.hpe.shadow.medium,
+ large: elevationdark
+ ? elevationdark.hpe.elevation.large
+ : dark.hpe.shadow.large,
+ 'inset-selected': `inset 3px 0 ${dark.hpe.color.border.selected}`,
+ },
+ },
+ hover: {
+ background: 'background-hover',
+ color: MISSING.color, // TO DO
+ },
+ selected: {
+ background: 'background-selected-strong-enabled',
+ color: 'text-onSelectedStrong',
+ },
+ },
+ accordion: {
+ panel: {
+ border: {
+ side: 'horizontal',
+ color: 'border',
+ },
+ },
+ heading: {
+ level: 4, // NOTE: in v3 all accordions were h4
+ margin: { vertical: 'medium', horizontal: 'xsmall' },
+ },
+ hover: {
+ background: 'background-hover',
+ heading: {
+ color: undefined,
+ },
+ },
+ border: undefined,
+ icons: {
+ collapse: Up,
+ expand: Down,
+ color: 'text',
+ },
+ },
+ anchor: {
+ color: components.hpe.anchor.default.enabled.textColor,
+ textDecoration: components.hpe.anchor.default.enabled.textDecoration,
+ fontWeight: components.hpe.anchor.default.enabled.fontWeight,
+ gap: components.hpe.anchor.medium.default.gapX, // TO DO not size specific
+ hover: {
+ textDecoration: components.hpe.anchor.default.hover.textDecoration,
+ },
+ size: anchorSizeTheme,
+ },
+ avatar: {
+ size: {
+ xsmall: components.hpe.element?.xsmall.minHeight,
+ small: components.hpe.element?.small.minHeight, // 24px
+ medium: components.hpe.element?.medium.minHeight, // default 48px
+ large: components.hpe.element?.large.minHeight, // 72px
+ xlarge: components.hpe.element?.xlarge.minHeight, // 96px
+ '2xl': `${baseSpacing * 5}px`, // TO DO no component size, is this a one off?
+ '3xl': `${baseSpacing * 6}px`, // TO DO no component size, is this a one off?
+ '4xl': `${baseSpacing * 7}px`, // TO DO no component size, is this a one off?
+ '5xl': `${baseSpacing * 8}px`, // TO DO no component size, is this a one off?
+ },
+ text: {
+ size: {
+ xsmall: 'xsmall',
+ small: 'small',
+ medium: 'medium',
+ large: 'large',
+ xlarge: 'xlarge',
+ '2xl': '3xl', // TO DO no component size, is this a one off?
+ '3xl': '4xl', // TO DO no component size, is this a one off?
+ '4xl': '5xl', // TO DO no component size, is this a one off?
+ '5xl': '6xl', // TO DO no component size, is this a one off?
+ },
+ },
+ },
+ button: {
+ intelligentPad: false,
+ color: components.hpe.button.default.enabled.textColor,
+ gap: components.hpe.button.medium.default.gapX,
+ badge: {
+ align: 'container', // TO DO this is a grommet-ism?
+ container: {
+ // align badge background to button label color
+ background: 'text-strong',
+ },
+ size: {
+ medium: '18px', // Q: what token should be used here? no token for this at the moments
+ },
+ text: {
+ size: {
+ medium: 'xsmall', // TO DO how to do references for typography sizes
+ },
+ },
+ },
+ // TO DO add cta-primary variant
+ 'cta-primary': {
+ ...buttonKindTheme.primary,
+ icon: ,
+ reverse: true,
+ extend: '',
+ },
+ // TO DO add cta-alternate variant
+ 'cta-alternate': {
+ ...buttonKindTheme.secondary,
+ icon: ,
+ reverse: true,
+ },
+ ...buttonKindTheme,
+ option,
+ active: buttonStatesTheme.active,
+ disabled: {
+ opacity: 1,
+ ...buttonStatesTheme.disabled,
+ },
+ selected: {
+ option: {
+ background: components.hpe.select.option.selected.enabled.background,
+ color: components.hpe.select.option.selected.textColor,
+ font: {
+ weight: components.hpe.select.option.selected.enabled.fontWeight,
+ },
+ elevation: 'inset-selected',
+ },
+ },
+ hover: {
+ 'cta-primary': buttonStatesTheme.hover.primary,
+ 'cta-alternate': {
+ ...buttonStatesTheme.hover.secondary,
+ extend: '', // TO DO can remove when merging, temp to override extend
+ },
+ ...buttonStatesTheme.hover,
+ },
+ size: {
+ xsmall: {
+ border: {
+ radius: '2em',
+ },
+ iconOnly: {
+ pad: {
+ vertical: '3px',
+ horizontal: '3px',
+ },
+ },
+ },
+ ...buttonSizesTheme,
+ },
+ extend: ({ active, kind, sizeProp, theme }) => {
+ let style = '';
+ if (active) {
+ style += `&:hover {
+ background: ${
+ theme.global.colors[
+ components.hpe.button[kind]?.selected?.hover?.background
+ ]?.[theme.dark ? 'dark' : 'light'] ||
+ components.hpe.button[kind]?.selected?.hover?.background
+ };
+ color: ${
+ theme.global.colors[
+ components.hpe.button[kind]?.selected?.hover?.textColor
+ ]?.[theme.dark ? 'dark' : 'light'] ||
+ components.hpe.button[kind]?.selected?.hover?.textColor
+ };
+ }`;
+ }
+ style += `line-height: ${large.hpe.text[sizeProp]?.lineHeight};`;
+ return style;
+ },
+ },
+ calendar: {
+ day: {
+ hover: {
+ background: 'background-hover',
+ color: 'text-strong',
+ },
+ selected: {
+ background: 'background-selected-strong-enabled',
+ color: 'text-onSelectedStrong',
+ hover: {
+ background: 'background-selected-strong-hover',
+ },
+ font: {
+ weight: global.hpe.fontWeight.medium,
+ },
+ },
+ inRange: {
+ color: 'text-onSelectedWeak',
+ hover: {
+ background: 'background-selected-weak-hover',
+ },
+ font: {
+ weight: global.hpe.fontWeight.medium,
+ },
+ },
+ extend: '',
+ },
+ range: {
+ background: 'background-selected-weak-enabled',
+ },
+ icons: {
+ // next: Next,
+ // previous: Previous,
+ },
+ small: {
+ // Q: missing tokens
+ fontSize: '13.6px',
+ lineHeight: 1.375,
+ daySize: '27.43px',
+ title: {
+ size: 'medium',
+ weight: global.hpe.fontWeight.normal,
+ color: 'text-strong',
+ },
+ },
+ medium: {
+ fontSize: '18px',
+ lineHeight: 1.45,
+ daySize: '54.86px',
+ day: {
+ round: 'full',
+ },
+ range: {
+ round: 'none',
+ start: {
+ round: {
+ corner: 'left',
+ size: 'full',
+ },
+ },
+ end: {
+ round: {
+ corner: 'right',
+ size: 'full',
+ },
+ },
+ },
+ title: {
+ size: 'large',
+ weight: global.hpe.fontWeight.normal,
+ color: 'text-strong',
+ },
+ },
+ large: {
+ fontSize: '31.2px',
+ lineHeight: 1.11,
+ daySize: '109.71px',
+ title: {
+ size: 'xlarge',
+ weight: global.hpe.fontWeight.normal,
+ color: 'text-strong',
+ },
+ },
+ },
+ card: {
+ container: {
+ background: 'background-front',
+ elevation: 'medium', // v5
+ // elevation: 'none', // Brand refresh change
+ // Q should this have a token?
+ // A yes, but we haven't filled in "motion" tokens yet
+ extend: 'transition: all 0.3s ease-in-out;',
+ },
+ body: {
+ pad: 'medium',
+ },
+ footer: {
+ pad: { horizontal: 'medium', vertical: 'small' },
+ },
+ header: {
+ pad: 'medium',
+ },
+ hover: {
+ container: {
+ elevation: 'large', // v5
+ },
+ },
+ },
+ checkBox: {
+ hover: {
+ border: {
+ color: components.hpe.checkbox.control.hover.borderColor,
+ width: components.hpe.checkbox.control.hover.borderWidth,
+ },
+ background: {
+ color: 'transparent',
+ },
+ // HPE Design System guidance states that pad="none" should be applied on CheckBox
+ // when its used outside of a FormField. We will apply this hover treatment in
+ // those instances.
+ extend: ({ disabled, pad, theme, toggle }) => css`
+ ${!disabled &&
+ pad === 'none' &&
+ !toggle &&
+ `border: 2px solid ${
+ theme.global.colors[
+ components.hpe.checkbox.control.hover.borderColor
+ ][theme.dark ? 'dark' : 'light']
+ };`}
+ `, // Q: missing token for hover borderWidth? this falls into similar boat as secondary button
+ },
+ color: components.hpe.switch.control.handle.enabled.background,
+ border: {
+ color: components.hpe.checkbox.control.enabled.borderColor,
+ width:
+ dimensions.borderSize[
+ components.hpe.checkbox.medium.control.borderWidth
+ ] || components.hpe.checkbox.medium.control.borderWidth,
+ },
+ check: {
+ radius: components.hpe.checkbox.medium.control.borderRadius,
+ thickness: components.hpe.checkbox.control.hover.borderWidth,
+ extend: ({ theme, checked, indeterminate }) => `
+ margin-block: ${
+ dimensions.borderSize[
+ components.hpe.checkbox.medium.control.marginY
+ ] || components.hpe.checkbox.medium.control.marginY
+ }px;
+ background: ${
+ theme.global.colors[
+ components.hpe.checkbox.control.enabled.background
+ ]?.[theme.dark ? 'dark' : 'light']
+ };
+ background-color: ${
+ checked || indeterminate
+ ? theme.global.colors[
+ components.hpe.checkbox.control.selected.enabled.background
+ ]?.[theme.dark ? 'dark' : 'light']
+ : ''
+ };
+ &:hover {
+ background: ${
+ checked || indeterminate
+ ? theme.global.colors[
+ components.hpe.checkbox.control.selected.hover.background
+ ]?.[theme.dark ? 'dark' : 'light']
+ : theme.global.colors[
+ components.hpe.checkbox.control.hover.background
+ ]?.[theme.dark ? 'dark' : 'light']
+ };
+ }
+ ${(checked || indeterminate) && 'border: none;'}
+ `,
+ },
+ icon: {
+ extend: ({ theme }) => `stroke-width: 2px;
+ stroke: ${
+ theme.global.colors[
+ components.hpe.checkbox.control.selected.enabled.iconColor
+ ]?.[theme.dark ? 'dark' : 'light']
+ }`,
+ },
+ // Q make sure this is 12px is small
+ gap: components.hpe.checkbox.medium.gapX,
+ // Q do we need a token here?
+ // A good question, not sure if this a grommet-ism?
+ label: {
+ align: 'start',
+ },
+ pad: {
+ vertical: components.hpe.element?.medium.paddingY,
+ horizontal: components.hpe.formField.medium.input.container.paddingX, // TO DO is this correct usage?
+ },
+ size: components.hpe.checkbox.medium.control.width, // TO DO should this token be called "size" instead?
+ // Q is toggle and switch the same thing?
+ // A: Yes, we can discuss if this name feels right or not.
+ toggle: {
+ background: components.hpe.switch.control.track.enabled.background,
+ color: components.hpe.switch.control.handle.enabled.background,
+ size: components.hpe.switch.medium.control.track.width,
+ // TO DO need token for handle elevation
+ knob: {
+ extend: ({ theme, checked }) => `
+ box-shadow: ${
+ theme.global.elevation[theme.dark ? 'dark' : 'light'].small
+ };
+ border: ${
+ dimensions.borderSize[
+ components.hpe.switch.medium.control.handle.borderWidth
+ ]
+ } solid ${
+ theme.global.colors[
+ components.hpe.switch.control.handle.enabled.borderColor
+ ][theme.dark ? 'dark' : 'light']
+ };
+ width: ${components.hpe.switch.medium.control.handle.width};
+ height: ${components.hpe.switch.medium.control.handle.height};
+ top: 1px; // TO DO token?
+ ${!checked ? 'left: 1px;' : ''} // TO DO token?
+ `,
+ },
+ extend: ({ checked, theme }) => `
+ ${
+ checked &&
+ `background-color: ${
+ theme.global.colors[
+ components.hpe.switch.control.track.selected.enabled.background
+ ]?.[theme.dark ? 'dark' : 'light']
+ };`
+ }
+ margin-block: ${
+ dimensions.borderSize[
+ components.hpe.switch.medium.control.track.marginY
+ ] || components.hpe.switch.medium.control.track.marginY
+ }px;
+ border-color: ${
+ theme.global.colors[
+ components.hpe.switch.control.track.enabled.borderColor
+ ]?.[theme.dark ? 'dark' : 'light']
+ };
+ `,
+ },
+ // HPE Design System guidance states that pad="none" should be applied on CheckBox
+ // when its used outside of a FormField. We will apply this hover treatment in
+ // those instances.
+ extend: ({ disabled, pad }) => css`
+ ${
+ !disabled &&
+ pad === 'none' &&
+ `&:hover {
+ background-color: unset;
+ }`
+ }
+ font-weight: ${components.hpe.checkbox.medium.label.fontWeight};
+ width: auto;
+ };
+ `,
+ },
+ checkBoxGroup: {
+ container: {
+ gap: 'none', // TO DO missing token
+ margin: {
+ vertical:
+ components.hpe.formField.medium.input.group.container.paddingY,
+ },
+ },
+ },
+ data: {
+ button: {
+ kind: 'toolbar',
+ },
+ },
+ dateInput: {
+ container: {
+ round: components.hpe.formField.medium.input.container.borderRadius,
+ },
+ icon: {
+ size: 'small',
+ },
+ },
+ dataTable: {
+ body: {
+ extend: ({ theme }) => `
+ /* Margin and padding allow room for focus on table body */
+ // TO DO missing tokens
+ margin: ${theme.global.edgeSize.xxsmall} 0px;
+ padding: 0px ${theme.global.edgeSize.xxsmall};
+ `,
+ selected: {
+ background: components.hpe.dataCell.selected?.enabled?.background,
+ },
+ },
+ groupHeader: {
+ // background: undefined,
+ // border: undefined,
+ // pad: undefined,
+ },
+ groupEnd: {
+ border: { side: 'bottom', size: 'xsmall' },
+ },
+ header: {
+ border: { side: 'bottom' },
+ color: components.hpe.headerCell.enabled.textColor,
+ extend: ({ column, sort, sortable, theme }) =>
+ `
+ ${
+ sort &&
+ sort.property === column &&
+ `
+ background: ${
+ theme.global.colors['background-active'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ }
+ `
+ };
+ ${
+ sortable &&
+ sort &&
+ sort.property !== column &&
+ `
+ svg {
+ opacity: 0;
+ }
+ &:hover {
+ svg {
+ opacity: 1;
+ }
+ }
+ `
+ };
+ `,
+ font: {
+ weight: components.hpe.headerCell.fontWeight,
+ },
+ gap: 'none', // TO DO missing token
+ hover: {
+ background: {
+ color: components.hpe.headerCell.hover.background,
+ },
+ },
+ units: {
+ color: components.hpe.headerCell.units.enabled.textColor, // Q: missing token
+ },
+ },
+ icons: {
+ ascending: () => ,
+ descending: () => ,
+ contract: () => ,
+ expand: () => ,
+ sortable: () => ,
+ },
+ pinned: {
+ header: {
+ background: { opacity: 'strong' },
+ extend: 'backdrop-filter: blur(12px);',
+ },
+ body: {
+ background: { opacity: 'strong' },
+ extend: 'backdrop-filter: blur(12px);',
+ },
+ footer: {
+ background: { opacity: 'strong' },
+ extend: 'backdrop-filter: blur(12px);',
+ },
+ },
+ primary: {
+ weight: components.hpe.dataCell.primary.fontWeight,
+ color: components.hpe.dataCell.primary.enabled.textColor,
+ },
+ resize: {
+ // Q: missing tokens
+ border: {
+ color: 'border',
+ side: 'end',
+ },
+ hover: {
+ border: {
+ color: 'border-strong',
+ size: 'small',
+ },
+ },
+ },
+ },
+ fileInput: {
+ border: {
+ // Q: confused on which token to use here formfield.medium.input.group.item.borderWidth?
+ color: components.hpe.formField.input.container.enabled.borderColor,
+ side: 'all',
+ style: 'solid',
+ size: components.hpe.formField.medium.input.container.borderWidth,
+ },
+ button: {
+ background: components.hpe.button.secondary.enabled.background,
+ border: {
+ // Q: is this the correct value?
+ // A: yes
+ radius: components.hpe.button.medium.secondary.borderRadius,
+ },
+ pad: {
+ vertical: components.hpe.button.medium.secondary.paddingY,
+ horizontal: components.hpe.button.medium.secondary.paddingX,
+ },
+ color: components.hpe.button.secondary.enabled.textColor,
+ font: {
+ weight: components.hpe.button.secondary.enabled.fontWeight,
+ },
+ hover: {
+ background: components.hpe.button.secondary.hover.background,
+ color: components.hpe.button.secondary.hover.textColor,
+ },
+ },
+ dragOver: {
+ background: MISSING.color,
+ border: 'none',
+ },
+ hover: {
+ border: {
+ color: 'border',
+ },
+ },
+ icons: {
+ // remove: Close,
+ },
+ label: {
+ margin: 'small',
+ },
+ message: {
+ color: 'placeholder',
+ margin: 'small',
+ },
+ pad: { horizontal: 'xsmall' },
+ extend: `border-radius: ${components.hpe.formField.medium.input.container.borderRadius};`,
+ },
+ formField: {
+ content: {
+ // Q: missing tokens
+ margin: { vertical: 'xsmall' },
+ pad: 'none',
+ },
+ border: {
+ error: {
+ color:
+ components.hpe.formField.input.container.status.critical
+ .borderColor,
+ },
+ color: components.hpe.formField.input.container.enabled.borderColor,
+ side: 'all',
+ },
+ // checkBox: {
+ // pad: 'large',
+ // },
+ disabled: {
+ background:
+ components.hpe.formField.input.group.container.disabled.background,
+ border: {
+ color: components.hpe.formField.input.container.disabled.borderColor,
+ },
+ label: {
+ color: components.hpe.formField.labelText.disabled.textColor,
+ },
+ },
+ error: {
+ background: {
+ color:
+ components.hpe.formField.input.container.status.critical.background,
+ },
+ container: {
+ gap: 'xsmall', // Q: missing token
+ },
+ icon: (
+
+ ), // TO DO need to handle modes
+ size: 'xsmall', // Q: missing token
+ // Q: confused why we have both hpe.formField.errorText.enabled.textColor
+ // and hpe.formField.errorText.disabled.color
+ // A: This is to be able to style text differently in different states
+ color: components.hpe.formField.errorText.enabled.textColor,
+ margin: {
+ // Q: missing token
+ bottom: 'xsmall',
+ top: 'none',
+ horizontal: 'none',
+ },
+ },
+ focus: {
+ background: undefined, // TO DO missing token
+ border: {
+ color: 'border-strong', // Q: missing token
+ },
+ },
+ help: {
+ size: 'xsmall',
+ color: components.hpe.formField.helpText.enabled.color,
+ margin: 'none', // TO DO missing token
+ },
+ info: {
+ size: 'xsmall',
+ color: components.hpe.formField.infoText.enabled.color,
+ margin: {
+ // Q: missing token
+ bottom: 'xsmall',
+ top: 'none',
+ horizontal: 'none',
+ },
+ },
+ label: {
+ size: 'xsmall', // TO DO how to capture this as token, currently we have "fontSize", "lineHeight", "..."
+ color: components.hpe.formField.labelText.enabled.color,
+ margin: {
+ // Q: missing token
+ bottom: 'none',
+ top: 'xsmall',
+ horizontal: 'none',
+ },
+ requiredIndicator: true,
+ weight: components.hpe.formField.medium.labelText.fontWeight,
+ },
+ margin: {
+ bottom: 'none', // TO DO missing token
+ },
+ round: components.hpe.formField.medium.input.container.borderRadius,
+ // TO DO no tokens
+ survey: {
+ label: {
+ margin: { bottom: 'none' },
+ size: 'medium',
+ weight: MISSING.weight,
+ },
+ },
},
heading: {
- level: 2,
+ color: 'heading',
+ weight: large.hpe.heading.xlarge.fontWeight, // Q: not sure what token to point to here
+ level: {
+ 1: {
+ font: {
+ weight: large.hpe.heading.xlarge.fontWeight,
+ },
+ small: {
+ // Q: are these the correct tokens to use? the value is correct but the name seems off
+ // TO DO this value is off because we didn't have the same typography system before
+ size: large.hpe.heading.large.fontSize,
+ height: large.hpe.heading.large.lineHeight,
+ },
+ medium: {
+ size: large.hpe.heading.xlarge.fontSize,
+ height: large.hpe.heading.xlarge.lineHeight,
+ },
+ large: {
+ // Q: missing tokens
+ size: '48px',
+ height: '48px',
+ },
+ xlarge: {
+ // Q: missing tokens
+ size: '60px',
+ height: '60px',
+ },
+ },
+ 2: {
+ font: {
+ // Q: not sure what token to point to here
+ // A: "large" is the default size for h2, so we'll point to that
+ weight: large.hpe.heading.large.fontWeight,
+ },
+ small: {
+ size: large.hpe.heading.medium.fontSize,
+ height: large.hpe.heading.medium.lineHeight,
+ },
+ medium: {
+ size: large.hpe.heading.large.fontSize,
+ height: large.hpe.heading.large.lineHeight,
+ },
+ large: {
+ size: large.hpe.heading.xlarge.fontSize,
+ height: large.hpe.heading.xlarge.lineHeight,
+ },
+ xlarge: {
+ // Q: missing tokens
+ size: '48px',
+ height: '48px',
+ },
+ },
+ 3: {
+ font: {
+ // Q: not sure what token to point to here
+ weight: large.hpe.heading.medium.fontWeight,
+ },
+ small: {
+ size: large.hpe.heading.small.fontSize,
+ height: large.hpe.heading.small.lineHeight,
+ },
+ medium: {
+ size: large.hpe.heading.medium.fontSize,
+ height: large.hpe.heading.medium.lineHeight,
+ },
+ large: {
+ size: large.hpe.heading.large.fontSize,
+ height: large.hpe.heading.large.lineHeight,
+ },
+ xlarge: {
+ size: large.hpe.heading.xlarge.fontSize,
+ height: large.hpe.heading.xlarge.lineHeight,
+ },
+ },
+ 4: {
+ font: {
+ // Q: not sure what token to point to here
+ weight: large.hpe.heading.small.fontWeight,
+ },
+ small: {
+ size: large.hpe.heading.xsmall.fontSize,
+ height: large.hpe.heading.xsmall.lineHeight,
+ },
+ medium: {
+ size: large.hpe.heading.small.fontSize,
+ height: large.hpe.heading.small.lineHeight,
+ },
+ large: {
+ size: large.hpe.heading.medium.fontSize,
+ height: large.hpe.heading.medium.lineHeight,
+ },
+ xlarge: {
+ size: large.hpe.heading.large.fontSize,
+ height: large.hpe.heading.large.lineHeight,
+ },
+ },
+ 5: {
+ font: {
+ // Q: not sure what token to point to here
+ weight: large.hpe.heading.xsmall.fontWeight,
+ },
+ small: {
+ size: large.hpe.heading.xxsmall.fontSize,
+ height: large.hpe.heading.xxsmall.lineHeight,
+ },
+ medium: {
+ size: large.hpe.heading.xsmall.fontSize,
+ height: large.hpe.heading.xsmall.lineHeight,
+ },
+ large: {
+ size: large.hpe.heading.small.fontSize,
+ height: large.hpe.heading.small.lineHeight,
+ },
+ xlarge: {
+ size: large.hpe.heading.medium.fontSize,
+ height: large.hpe.heading.medium.lineHeight,
+ },
+ },
+ 6: {
+ font: {
+ // Q: not sure what token to point to here
+ weight: large.hpe.heading.xxsmall.fontWeight,
+ },
+ small: {
+ size: large.hpe.heading.xxsmall.fontSize,
+ height: large.hpe.heading.xxsmall.lineHeight,
+ },
+ medium: {
+ size: large.hpe.heading.xxsmall.fontSize,
+ height: large.hpe.heading.xxsmall.lineHeight,
+ },
+ large: {
+ size: large.hpe.heading.small.fontSize,
+ height: large.hpe.heading.small.lineHeight,
+ },
+ xlarge: {
+ size: large.hpe.heading.medium.fontSize,
+ height: large.hpe.heading.medium.lineHeight,
+ },
+ },
+ },
+ // This block applies size-specific weights to headings to ensure
+ // that as heading sizes get small, the weight increases and as they
+ // get large, the weight decreases.
+ // This block can be removed once grommet theme structure is enhanced
+ // to support level and size-specific weights.
+ extend: ({ level, size }) => {
+ let fontWeight = '';
+ if (level === 3 && size === 'small') {
+ fontWeight = `font-weight: ${large.hpe.heading.small.fontWeight};`;
+ // undefined necessary so an h4 without size prop explicitly defined
+ // still renders as weight 600
+ } else if (
+ level === 4 &&
+ ['small', 'medium', undefined].includes(size)
+ ) {
+ fontWeight = `font-weight: ${large.hpe.heading.small.fontWeight};`;
+ } else if (level === 5 && size === 'xlarge') {
+ fontWeight = `font-weight: ${large.hpe.heading.small.fontWeight};`;
+ }
+ return fontWeight;
+ },
+ },
+ icon: {
+ disableScaleDown: true,
+ matchSize: true, // NOTE: Disabled this since concept didn't exist in v3
+ size: {
+ xsmall: large.hpe.size.icon.xsmall,
+ small: large.hpe.size.icon.small,
+ medium: large.hpe.size.icon.medium,
+ large: large.hpe.size.icon.large,
+ xlarge: large.hpe.size.icon.xlarge,
+ xxlarge: large.hpe.size.icon.xxlarge,
+ },
+ },
+ layer: {
+ background: 'background-floating',
+ border: {
+ radius: 'small', // TO DO no specific semantic token
+ intelligentRounding: true,
+ },
+ container: {
+ elevation: 'large', // TO DO no specific semantic token
+ },
+ overlay: {
+ background: 'background-layer-overlay',
+ },
+ /* HPE Global Header/Footer Service a.k.a. HPE Common HFWS sets the header
+ * at a z-index of 101. This adjustment allows for Layer modals and side-drawers
+ * to sit atop the Global header. */
+ zIndex: '110', // TO DO no token
+ },
+ list: {
+ container: {
+ // any box props
+ gap: 'xsmall',
+ // extend: undefined,
+ },
+ item: {
+ border: undefined,
+ disabled: {
+ color: 'text-disabled',
+ cursor: 'default',
+ },
+ pinned: {
+ background: 'background-active', // TO DO need a semantic token for the "light grey" selected state
+ icon: {
+ pad: mediumIconOnlyPad,
+ },
+ },
+ },
+ },
+ maskedInput: {
+ container: {
+ extend: ({ theme }) => `
+ svg {
+ fill: ${
+ theme.global.colors['text-strong'][theme.dark ? 'dark' : 'light']
+ };
+ stroke: ${
+ theme.global.colors['text-strong'][theme.dark ? 'dark' : 'light']
+ };
+ }
+ `,
+ },
+ },
+ menu: {
+ drop: {
+ // Q should be tokenized?
+ // A: Not sure, this sort of feels like a grommet-ism
+ align: {
+ top: 'bottom',
+ left: 'left',
+ },
+ },
+ group: {
+ container: {
+ pad: {
+ vertical: components.hpe.menu.medium.group.container.paddingY,
+ },
+ },
+ separator: {
+ color: components.hpe.menu.group.separator.background,
+ size: components.hpe.menu.medium.group.separator.height,
+ pad: 'none', // TO DO no token
+ },
+ },
+ icons: {
+ color: components.hpe.menu.item.enabled.iconColor,
+ down: Down,
+ },
+ item: {
+ pad: {
+ horizontal: components.hpe.menu.medium.item.paddingX,
+ vertical: components.hpe.menu.medium.item.paddingY,
+ },
+ },
+ },
+ nameValuePair: {
+ name: {
+ // TO DO would need to manually adjust, semantic tokens were too generic
+ // should we have a `text-emphasis` and `weight-emphasis` ?
+ color: 'text-strong',
+ weight: global.hpe.fontWeight.medium,
+ },
+ },
+ notification: {
+ close: {
+ icon: Close,
+ },
+ container: {
+ round: 'xsmall',
+ },
+ direction: 'row',
+ global: {
+ direction: 'row',
+ container: {
+ round: 'none',
+ },
+ },
+ message: {
+ color: 'text',
+ },
+ title: {
+ // any text props
+ color: 'text-strong',
+ weight: global.hpe.fontWeight.medium,
+ },
+ critical: {
+ background: 'background-critical',
+ message: {
+ color: 'text-onCritical-default',
+ },
+ title: {
+ color: 'text-onCritical-strong',
+ },
+ global: {
+ background: 'background-critical',
+ message: {
+ color: 'text-onCritical-default',
+ },
+ title: {
+ color: 'text-onCritical-strong',
+ },
+ },
+ toast: {
+ background: 'background-front',
+ message: {
+ color: 'text',
+ },
+ title: {
+ color: 'text-strong',
+ },
+ },
+ },
+ warning: {
+ background: 'background-warning',
+ message: {
+ color: 'text-onWarning-default',
+ },
+ title: {
+ color: 'text-onWarning-strong',
+ },
+ global: {
+ background: 'background-warning',
+ message: {
+ color: 'text-onWarning-default',
+ },
+ title: {
+ color: 'text-onWarning-strong',
+ },
+ },
+ toast: {
+ background: 'background-front',
+ message: {
+ color: 'text',
+ },
+ title: {
+ color: 'text-strong',
+ },
+ },
+ },
+ normal: {
+ background: 'background-ok',
+ message: {
+ color: 'text-onOk-default',
+ },
+ title: {
+ color: 'text-onOk-strong',
+ },
+ global: {
+ background: 'background-ok',
+ message: {
+ color: 'text-onOk-default',
+ },
+ title: {
+ color: 'text-onOk-strong',
+ },
+ },
+ toast: {
+ background: 'background-front',
+ message: {
+ color: 'text',
+ },
+ title: {
+ color: 'text-strong',
+ },
+ },
+ },
+ unknown: {
+ background: 'background-unknown',
+ message: {
+ color: 'text-onUnknown-default',
+ },
+ title: {
+ color: 'text-onUnknown-strong',
+ },
+ global: {
+ background: 'background-unknown',
+ message: {
+ color: 'text-onUnknown-default',
+ },
+ title: {
+ color: 'text-onUnknown-strong',
+ },
+ },
+ toast: {
+ background: 'background-front',
+ message: {
+ color: 'text',
+ },
+ title: {
+ color: 'text-strong',
+ },
+ },
+ },
+ info: {
+ background: 'background-info',
+ message: {
+ color: 'text-onInfo-default',
+ },
+ title: {
+ color: 'text-onInfo-strong',
+ },
+ global: {
+ background: 'background-info',
+ message: {
+ color: 'text-onInfo-default',
+ },
+ title: {
+ color: 'text-onInfo-strong',
+ },
+ },
+ toast: {
+ background: 'background-front',
+ message: {
+ color: 'text',
+ },
+ title: {
+ color: 'text-strong',
+ },
+ },
+ },
+ undefined: {
+ background: 'background-unknown',
+ message: {
+ color: 'text-onUnknown-default',
+ },
+ title: {
+ color: 'text-onUnknown-strong',
+ },
+ global: {
+ background: 'background-ok',
+ message: {
+ color: 'text-onUnknown-default',
+ },
+ title: {
+ color: 'text-onUnknown-strong',
+ },
+ },
+ toast: {
+ background: 'background-front',
+ message: {
+ color: 'text',
+ },
+ title: {
+ color: 'text-strong',
+ },
+ },
+ },
+ },
+ page: {
+ wide: {
+ width: {
+ min: '336px', // 336 + 24 (margin) + 24 (margin) = 384 (e.g. 'medium')
+ max: 'xxlarge',
+ },
+ xsmall: {
+ pad: { horizontal: 'large' },
+ },
+ xlarge: {
+ pad: { horizontal: 'large' },
+ },
+ },
+ narrow: {
+ width: {
+ min: '336px', // 336 + 24 (margin) + 24 (margin) = 384 (e.g. 'medium')
+ max: 'large',
+ },
+ xsmall: {
+ pad: { horizontal: 'large' },
+ },
+ xlarge: {
+ pad: { horizontal: 'large' },
+ },
+ },
+ full: {
+ width: {
+ min: '336px', // 336 + 24 (margin) + 24 (margin) = 384 (e.g. 'medium')
+ max: '100%',
+ },
+ xsmall: {
+ pad: { horizontal: 'large' },
+ },
+ xlarge: {
+ pad: { horizontal: 'large' },
+ },
+ },
+ },
+ pageHeader: {
+ responsive: {
+ breakpoints: ['xsmall', 'small'],
+ },
+ // title: {
+ // size: undefined,
+ // },
+ subtitle: {
+ size: 'large',
+ },
+ xsmall: {
+ areas: [
+ ['parent', 'parent'],
+ ['title', 'actions'],
+ ['subtitle', 'actions'],
+ ],
+ columns: [['small', 'flex'], 'auto'],
+ rows: ['auto', 'auto', 'auto'],
+ gap: { row: 'xsmall', column: 'medium' },
+ },
+ xlarge: {
+ areas: [
+ ['parent', 'parent'],
+ ['title', 'actions'],
+ ['subtitle', 'actions'],
+ ],
+ columns: [['medium', 'large'], 'auto'],
+ rows: ['auto', 'auto', 'auto'],
+ gap: { row: 'xsmall', column: 'large' },
+ },
+ },
+ pagination: {
+ button: {
+ color: components.hpe.button.default.enabled.textColor,
+ border: {
+ radius: components.hpe.button.medium.default.borderRadius,
+ },
+ font: {
+ weight: components.hpe.button.default.enabled.fontWeight,
+ },
+ active: {
+ background: components.hpe.button.default.selected.enabled.background,
+ border: {
+ radius: components.hpe.button.medium.default.borderRadius,
+ },
+ color: components.hpe.button.default.selected.enabled.textColor,
+ font: {
+ weight: components.hpe.button.default.selected.enabled.fontWeight,
+ },
+ },
+ hover: {
+ background: components.hpe.button.default.hover.background,
+ border: {
+ radius: components.hpe.button.medium.default.borderRadius,
+ },
+ color: components.hpe.button.default.hover.textColor,
+ font: {
+ weight: components.hpe.button.default.hover.fontWeight,
+ },
+ },
+ disabled: {
+ background: components.hpe.button.default.disabled.background,
+ border: {
+ radius: components.hpe.button.medium.default.borderRadius,
+ },
+ color: components.hpe.button.default.disabled.textColor,
+ font: {
+ weight: components.hpe.button.default.disabled.fontWeight,
+ },
+ },
+ size: {
+ small: {
+ border: {
+ radius: components.hpe.button.small.default.borderRadius,
+ width:
+ dimensions.borderSize[
+ components.hpe.button.small.default.borderWidth
+ ] || components.hpe.button.small.default.borderWidth,
+ },
+ pad: {
+ vertical: '4px',
+ horizontal: '4px',
+ },
+ font: {
+ size: components.hpe.element?.small.fontSize,
+ height: components.hpe.element?.small.lineHeight,
+ },
+ height: components.hpe.element?.small.minHeight,
+ width: components.hpe.element?.small.minHeight,
+ },
+ medium: {
+ border: {
+ radius: components.hpe.button.medium.default.borderRadius,
+ width:
+ dimensions.borderSize[
+ components.hpe.button.medium.default.borderWidth
+ ] || components.hpe.button.medium.default.borderWidth,
+ },
+ pad: {
+ vertical: '4px',
+ horizontal: '4px',
+ },
+ font: {
+ size: components.hpe.element?.medium.fontSize,
+ height: components.hpe.element?.medium.lineHeight,
+ },
+ height: components.hpe.element?.medium.minHeight,
+ width: components.hpe.element?.medium.minHeight,
+ },
+ large: {
+ border: {
+ radius: components.hpe.button.large.default.borderRadius,
+ width:
+ dimensions.borderSize[
+ components.hpe.button.large.default.borderWidth
+ ] || components.hpe.button.large.default.borderWidth,
+ },
+ pad: {
+ vertical: '4px',
+ horizontal: '4px',
+ },
+ font: {
+ size: components.hpe.element?.large.fontSize,
+ height: components.hpe.element?.large.lineHeight,
+ },
+ height: components.hpe.element?.large.minHeight,
+ width: components.hpe.element?.large.minHeight,
+ },
+ },
+ },
+ },
+ paragraph: {
+ // TO DO this is enabling more than xxlarge
+ ...paragraphTheme,
+ // This block applies size-specific weights to paragraph to ensure
+ // that as paragraph sizes get larger, the weight decreases.
+ // This block can be removed once grommet theme structure is enhanced
+ // to support size-specific weights.
+ extend: ({ size }) => `
+ ${
+ ['xxlarge'].includes(size)
+ ? `font-weight: ${large.hpe.text[size].fontWeight};`
+ : ''
+ };
+ `,
+ },
+ radioButton: {
+ border: {
+ color: components.hpe.radioButton.control.enabled.borderColor,
+ width: components.hpe.radioButton.medium.control.borderWidth, // TO DO want this narrower when not checked
+ },
+ color: components.hpe.radioButton.control.selected.enabled.borderColor,
+ container: {
+ extend: ({ theme }) => `
+ width: auto;
+ padding-inline: ${
+ components.hpe.formField.medium.input.group.item.paddingX
+ };
+ &:has(input[checked]) {
+ background: ${
+ // TO DO how to only do in FormField
+ theme.global.colors['background-selected-weak-enabled'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ };
+ }
+ `,
+ },
+ extend: () => `
+ padding-block: ${components.hpe.formField.medium.input.group.item.paddingY};
+ `,
+ gap: components.hpe.radioButton.medium.gapX,
+ hover: {
+ background: {
+ color: components.hpe.formField.input.group.item.hover.background,
+ },
+ border: {
+ color: components.hpe.radioButton.control.hover.borderColor,
+ },
+ },
+ size: components.hpe.radioButton.medium.control.height,
+ font: {
+ weight: components.hpe.radioButton.medium.label.fontWeight,
+ },
+ icons: {
+ circle: () => (
+
+
+
+ ),
+ },
+ },
+ radioButtonGroup: {
+ container: {
+ gap: 'none', // TO DO should be token?
+ margin: {
+ vertical:
+ components.hpe.formField.medium.input.group.container.paddingY,
+ },
+ },
+ },
+ rangeInput: {
+ thumb: {
+ color: 'background-primary-default', // Should this instead be "control"?
+ },
+ track: {
+ lower: {
+ // TO DO is this the right token for here?
+ color: 'background-primary-default',
+ },
+ upper: {
+ color: 'border',
+ },
+ },
+ },
+ select: {
+ control: {
+ // TO DO should this use input tokens?
+ // or should we have a select.control tokens?
+ extend: ({ disabled }) => css`
+ ${disabled &&
+ `
+ opacity: 0.3;
+ input {
+ cursor: default;
+ }`}
+ `,
+ },
+ emptySearchMessage: {
+ container: {
+ pad: option.pad,
+ },
+ },
+ icons: {
+ color: 'icon',
+ down: Down,
+ // this was not in token
+ margin: {
+ left: 'small',
+ // setting right margin to 12px because on small
+ // screens, Select responsive padding sizes down
+ // which brings the icon too tight with edge of
+ // control.
+ right: '12px',
+ },
+ up: Up,
+ },
+ options: undefined,
+ },
+ spinner: {
+ container: {
+ pad: 'none', // Should we have universal token here for none?
+ color: 'background-primary-default', // Is this the right token for here?
+ // tokens?
+ border: [
+ { color: 'border-weak', side: 'all', size: 'medium' },
+ { color: 'border-weak', side: 'right', size: 'medium' },
+ { color: 'border-weak', side: 'top', size: 'medium' },
+ { color: 'border-weak', side: 'left', size: 'medium' },
+ ],
+ },
+ size: {
+ xsmall: components.hpe.element?.xsmall.minHeight,
+ small: components.hpe.element?.small.minHeight, // TO DO should these align? this was before we standardized on component sizes
+ medium: components.hpe.element?.medium.minHeight,
+ large: components.hpe.element?.large.minHeight,
+ xlarge: components.hpe.element?.xlarge.minHeight,
+ },
+ },
+ starRating: {
+ color: 'background-selected-strong-enabled',
+ },
+ tab: {
+ color: 'text',
+ active: {
+ background: 'background-selected-strong-enabled',
+ color: 'text-onSelectedStrong',
+ weight: 500,
+ },
+ hover: {
+ background: 'background-hover',
+ color: 'text',
+ },
+ border: {
+ side: 'all',
+ color: 'transparent',
+ size:
+ dimensions[components.hpe.element?.medium.borderWidth] ||
+ components.hpe.element?.medium.borderWidth,
+ active: {
+ color: 'transparent',
+ },
+ disabled: {
+ color: undefined,
+ },
+ hover: {
+ color: undefined,
+ },
+ },
+ disabled: {
+ background: 'background-disabled',
+ color: 'text-disabled',
+ },
+ pad: {
+ bottom: components.hpe.element?.medium.paddingY,
+ top: components.hpe.element?.medium.paddingY,
+ horizontal: components.hpe.element?.medium?.paddingX?.wide,
+ },
margin: {
vertical: 'none',
+ horizontal: 'none',
},
+ extend: ({ theme }) => `border-radius: ${theme.global.edgeSize.xsmall};`,
},
- footer: {
+ tabs: {
+ gap: 'small',
+ header: {
+ border: undefined,
+ extend: ({ theme }) => `
+ border-radius: ${theme.global.edgeSize.xsmall};
+ & button[aria-selected="true"]:hover > div {
+ background: ${
+ theme.global.colors['background-selected-strong-hover'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ };
+ color: ${
+ theme.global.colors['text-onSelectedStrong'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ };
+ }
+ `,
+ },
+ step: {
+ xsmall: 1,
+ xlarge: 3,
+ },
+ },
+ table: {
+ header: {
+ extend: `
+ > div {
+ height: 100%;
+ justify-content: center;
+ }
+ // align onSelect checkbox to center of header cell
+ label {
+ justify-content: center;
+ }
+ `,
+ },
+ body: {
+ pad: {
+ top: components.hpe.dataCell.paddingTop,
+ bottom: components.hpe.dataCell.paddingBottom,
+ horizontal: components.hpe.dataCell.paddingX,
+ },
+ border: {
+ side: 'bottom', // TO DO this causes issues on the last row with the footer border
+ color: components.hpe.dataCell.enabled.borderColor,
+ },
+ extend: ({ theme }) =>
+ `
+ &:hover {
+ button {
+ background: ${
+ theme.global.colors['background-hover'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ };
+ }
+ }
+ `,
+ },
+ row: {
+ hover: {
+ background: 'background-hover',
+ },
+ },
+ footer: {
+ extend: `
+ font-weight: ${MISSING.weight};
+ `,
+ },
+ },
+ // use extend for border to use box shadow
+ // TO DO NOTE: Tag dimensions are off because there was a bug in Tag in 3.1.0
+ tag: {
+ border: {
+ color: 'border-weak',
+ },
+ icons: {
+ remove: Close,
+ },
pad: {
- top: 'medium',
+ horizontal: components.hpe.element?.medium?.paddingX?.default,
+ vertical: components.hpe.element?.medium.paddingY,
+ },
+ remove: {
+ kind: 'default',
+ },
+ value: {
+ // Q should this be a token?
+ // A: Good question..similar to other areas, we might want a weight.emphasis or something
+ // weight: MISSING.weight, // TO DO
+ weight: global.hpe.fontWeight.medium,
+ },
+ round: 'xsmall',
+ size: {
+ xsmall: {
+ icon: undefined,
+ pad: {
+ vertical: components.hpe.element?.small.paddingY,
+ horizontal: components.hpe.element?.small?.paddingX?.default,
+ },
+ remove: {
+ size: 'xsmall',
+ margin: {
+ right: 'none',
+ vertical: '-1px', // account for border
+ },
+ },
+ },
+ small: {
+ icon: undefined,
+ pad: {
+ vertical: components.hpe.element?.small.paddingY,
+ horizontal: components.hpe.element?.small?.paddingX?.default,
+ },
+ remove: {
+ size: 'xsmall',
+ margin: {
+ right: '2px',
+ },
+ },
+ },
+ // TO DO tag rounding is overriding "default" rounding, do we expect this?
+ medium: {
+ icon: undefined,
+ pad: {
+ vertical: components.hpe.element?.medium.paddingY,
+ horizontal: components.hpe.element?.medium?.paddingX?.default,
+ },
+ remove: {
+ size: 'small',
+ margin: {
+ right: 'xxsmall',
+ },
+ },
+ },
+ large: {
+ icon: undefined,
+ pad: {
+ vertical: components.hpe.element?.large.paddingY,
+ horizontal: components.hpe.element?.large?.paddingX?.default,
+ },
+ remove: {
+ size: 'medium',
+ margin: {
+ right: 'xxsmall',
+ },
+ },
+ },
+ xlarge: {
+ icon: undefined,
+ pad: {
+ vertical: components.hpe.element?.xlarge.paddingY,
+ horizontal: components.hpe.element?.xlarge?.paddingX?.default,
+ },
+ remove: {
+ size: 'large',
+ margin: {
+ right: 'xsmall',
+ },
+ },
+ },
},
- direction: 'row',
- justify: 'start',
- gap: 'xsmall',
},
- success: {
- color: 'text-strong',
- weight: 500,
- alignSelf: 'end',
+ text: {
+ ...textTheme,
+ extend: '', // TO DO can remove once merging, needed to override current extend
},
- },
+ textInput: {
+ container: {
+ extend: ({ theme }) => `
+ svg {
+ fill: ${
+ theme.global.colors['icon-strong'][theme.dark ? 'dark' : 'light']
+ };
+ stroke: ${
+ theme.global.colors['icon-strong'][theme.dark ? 'dark' : 'light']
+ };
+ }
+ `,
+ },
+ },
+ tip: {
+ content: {
+ background: 'background-floating',
+ border: {
+ color: 'border-weak', // TO DO this isn't specific enough to update automatically in future
+ },
+ margin: 'xxsmall',
+ elevation: 'small', // TO DO this isn't specific enough to update automatically in future
+ pad: {
+ vertical: 'none',
+ horizontal: 'small',
+ },
+ round: components.hpe.drop.borderRadius,
+ },
+ },
+ thumbsRating: {
+ like: {
+ color: 'background-selected-strong-enabled',
+ },
+ dislike: {
+ color: 'background-selected-strong-enabled',
+ },
+ },
+ toggleGroup: {
+ button: {
+ kind: 'toolbar',
+ },
+ container: {
+ border: false,
+ },
+ divider: false,
+ },
+ buttonGroup: {
+ gap: 'small',
+ },
+ // Theme-Designer only parameters
+ name: 'HPE 1',
+ rounding: 4,
+ scale: 1.1,
+ spacing: 24,
+ });
+};
+
+export const aries = buildTheme({
+ light: localLight,
+ dark: localDark,
+ small: localSmall,
+ large: localLarge,
+ global: localGlobal,
+ components: localComponents,
});
export const ariesPop = deepMerge(aries, {
- ...hpePop,
- anchor: {
- // rely on base anchor styling to meet color contrast on background-back
- size: {
- large: undefined,
- xlarge: undefined,
+ // TEMP Adding here
+ heading: {
+ color: 'text-strong',
+ weight: 400,
+ level: {
+ 1: {
+ font: {
+ weight: 400,
+ },
+ small: {
+ size: '48px',
+ height: '48px',
+ },
+ medium: {
+ size: '72px',
+ height: '72px',
+ },
+ large: {
+ size: '96px',
+ height: '96px',
+ },
+ xlarge: {
+ size: '120px',
+ height: '120px',
+ },
+ },
+ 2: {
+ small: {
+ size: '36px',
+ height: '36px',
+ },
+ medium: {
+ size: '48px',
+ height: '48px',
+ },
+ large: {
+ size: '72px',
+ height: '72px',
+ },
+ xlarge: {
+ size: '96px',
+ height: '96px',
+ },
+ },
+ 3: {
+ small: {
+ size: '24px',
+ height: '24px',
+ },
+ medium: {
+ size: '36px',
+ height: '36px',
+ },
+ large: {
+ size: '48px',
+ height: '48px',
+ },
+ xlarge: {
+ size: '72px',
+ height: '72px',
+ },
+ },
+ 4: {
+ font: {
+ weight: 500,
+ },
+ small: {
+ size: '18px',
+ height: '18px',
+ },
+ medium: {
+ size: '24px',
+ height: '24px',
+ },
+ large: {
+ size: '36px',
+ height: '36px',
+ },
+ xlarge: {
+ size: '48px',
+ height: '48px',
+ },
+ },
+ 5: {
+ font: {
+ weight: 500,
+ },
+ small: {
+ size: '16px',
+ height: '16px',
+ },
+ medium: {
+ size: '18px',
+ height: '18px',
+ },
+ large: {
+ size: '24px',
+ height: '24px',
+ },
+ xlarge: {
+ size: '36px',
+ height: '36px',
+ },
+ },
+ 6: {
+ font: {
+ weight: 500,
+ },
+ small: {
+ size: '14px',
+ height: '14px',
+ },
+ medium: {
+ size: '16px',
+ height: '16px',
+ },
+ large: {
+ size: '18px',
+ height: '18px',
+ },
+ xlarge: {
+ size: '24px',
+ height: '24px',
+ },
+ },
+ },
+ extend: '', // TO DO ask about marketing weights
+ },
+ paragraph: {
+ small: {
+ size: '16px',
+ height: '20px',
+ },
+ medium: {
+ size: '18px',
+ height: '22px',
+ },
+ large: {
+ size: '24px',
+ height: '30px',
+ },
+ xlarge: {
+ size: '36px',
+ height: '42px',
+ },
+ xxlarge: {
+ size: '42px',
+ height: '48px',
+ },
+ extend: '', // TO DO ask about marketing weights
+ },
+ text: {
+ xsmall: {
+ // weight needs to be modified at the size level
+ size: '14px',
+ height: '18px',
+ },
+ small: {
+ // weight needs to be modified at the size level
+ size: '16px',
+ height: '20px',
+ },
+ medium: {
+ // weight needs to be modified at the size level
+ size: '18px',
+ height: '22px',
+ },
+ large: {
+ // weight needs to be modified at the size level by bumping down to 300
+ size: '24px',
+ height: '30px',
+ },
+ xlarge: {
+ // weight needs to be modified at the size level by bumping down to 300
+ size: '36px',
+ height: '42px',
+ },
+ // xxlarge is not part of Chris's type exploration
+ xxlarge: {
+ // weight needs to be modified at the size level by bumping down to 300
+ size: '42px',
+ height: '48px',
},
+ extend: '', // TO DO ask about marketing weights
},
+ // anchor: {
+ // // rely on base anchor styling to meet color contrast on background-back
+ // size: {
+ // large: undefined,
+ // xlarge: undefined,
+ // },
+ // },
// this is producing a console warning because it's not a supported status
// proposing that notification should be more flexible to allow other statuses
notification: {
diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json
index e0a1b4ee8a..439e4693d3 100644
--- a/design-tokens/tokens/component/component.default.json
+++ b/design-tokens/tokens/component/component.default.json
@@ -3,29 +3,9 @@
"primary": {
"enabled": {
"background": {
- "$type": "gradient",
- "$value": {
- "angle": 70,
- "stops": [
- {
- "color": "{color.transparent}",
- "position": 0
- },
- {
- "color": "{color.background.primary.default}",
- "position": 0.35
- },
- {
- "color": "{color.transparent}",
- "position": 0.7
- },
- {
- "color": "{color.background.primary.default}",
- "position": 1
- }
- ]
- },
- "$description": "For dev use.",
+ "$type": "color",
+ "$value": "{color.background.primary.default}",
+ "$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
@@ -72,7 +52,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.bold}",
+ "$value": "{fontWeight.semibold}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -81,18 +61,6 @@
"codeSyntax": {}
}
}
- },
- "backgroundColor": {
- "$type": "color",
- "$value": "{color.background.primary.default}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
- "codeSyntax": {}
- }
- }
}
},
"disabled": {
@@ -160,7 +128,7 @@
"hover": {
"background": {
"$type": "color",
- "$value": "{base.color.green.700}",
+ "$value": "{color.background.primary.hover}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -223,7 +191,7 @@
"enabled": {
"background": {
"$type": "color",
- "$value": "{button.default.selected.enabled.background}",
+ "$value": "{color.background.selected.weak.enabled}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -235,7 +203,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.borderColor}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -247,7 +215,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.textColor}",
+ "$value": "{color.text.onSelectedWeak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -259,7 +227,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.iconColor}",
+ "$value": "{color.icon.onSelectedWeak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -271,7 +239,69 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{button.primary.enabled.fontWeight}",
+ "$value": "{fontWeight.semibold}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FONT_STYLE"],
+ "codeSyntax": {}
+ }
+ }
+ }
+ },
+ "hover": {
+ "background": {
+ "$type": "color",
+ "$value": "{color.background.selected.weak.hover}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "borderColor": {
+ "$type": "color",
+ "$value": "{color.transparent}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "textColor": {
+ "$type": "color",
+ "$value": "{color.text.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "iconColor": {
+ "$type": "color",
+ "$value": "{color.icon.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["SHAPE_FILL", "STROKE_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "fontWeight": {
+ "$type": "number",
+ "$value": "{fontWeight.semibold}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -356,6 +386,30 @@
}
}
},
+ "lineHeight": {
+ "$type": "number",
+ "$value": "{button.default.xsmall.lineHeight}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["LINE_HEIGHT"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "gapX": {
+ "$type": "number",
+ "$value": "{button.default.xsmall.gapX}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["GAP"],
+ "codeSyntax": {}
+ }
+ }
+ },
"iconOnly": {
"paddingX": {
"$type": "number",
@@ -417,18 +471,6 @@
}
}
},
- "minWidth": {
- "$type": "number",
- "$value": "{button.default.xsmall.iconOnly.minWidth}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["WIDTH_HEIGHT"],
- "codeSyntax": {}
- }
- }
- },
"fontSize": {
"$type": "number",
"$value": "{button.primary.xsmall.fontSize}",
@@ -465,30 +507,6 @@
}
}
}
- },
- "lineHeight": {
- "$type": "number",
- "$value": "{button.default.xsmall.lineHeight}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["LINE_HEIGHT"],
- "codeSyntax": {}
- }
- }
- },
- "gapX": {
- "$type": "number",
- "$value": "{button.default.xsmall.gapX}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["GAP"],
- "codeSyntax": {}
- }
- }
}
},
"small": {
@@ -857,18 +875,6 @@
}
}
},
- "minWidth": {
- "$type": "number",
- "$value": "{button.default.medium.iconOnly.minWidth}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["ALL_SCOPES"],
- "codeSyntax": {}
- }
- }
- },
"fontSize": {
"$type": "number",
"$value": "{button.primary.medium.fontSize}",
@@ -1041,18 +1047,6 @@
}
}
},
- "minWidth": {
- "$type": "number",
- "$value": "{button.default.large.iconOnly.minWidth}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["WIDTH_HEIGHT"],
- "codeSyntax": {}
- }
- }
- },
"fontSize": {
"$type": "number",
"$value": "{button.primary.large.fontSize}",
@@ -1328,7 +1322,7 @@
"enabled": {
"background": {
"$type": "color",
- "$value": "{button.default.enabled.background}",
+ "$value": "{color.background.contrast}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1340,7 +1334,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.background.primary.default}",
+ "$value": "#00000000",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1352,7 +1346,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.enabled.textColor}",
+ "$value": "{color.text.primary}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1364,7 +1358,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.enabled.iconColor}",
+ "$value": "{color.icon.primary}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1376,7 +1370,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{button.default.enabled.fontWeight}",
+ "$value": "{fontWeight.medium}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1390,7 +1384,7 @@
"hover": {
"background": {
"$type": "color",
- "$value": "{button.default.enabled.background}",
+ "$value": "{base.color.grey.550}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1402,7 +1396,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.selected}",
+ "$value": "{button.secondary.enabled.borderColor}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1414,7 +1408,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.enabled.textColor}",
+ "$value": "{button.secondary.enabled.textColor}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1426,19 +1420,19 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.enabled.iconColor}",
+ "$value": "{button.secondary.enabled.iconColor}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"],
+ "scopes": ["SHAPE_FILL", "STROKE_COLOR"],
"codeSyntax": {}
}
}
},
"fontWeight": {
"$type": "number",
- "$value": "{button.default.enabled.fontWeight}",
+ "$value": "{button.secondary.enabled.fontWeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1464,7 +1458,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.disabled}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1515,7 +1509,7 @@
"enabled": {
"background": {
"$type": "color",
- "$value": "{button.default.selected.enabled.background}",
+ "$value": "{color.background.selected.weak.enabled}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1527,7 +1521,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.borderColor}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1539,7 +1533,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.textColor}",
+ "$value": "{color.text.onSelectedWeak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1551,7 +1545,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.iconColor}",
+ "$value": "{color.icon.onSelectedWeak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1563,7 +1557,69 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{button.default.enabled.fontWeight}",
+ "$value": "{fontWeight.semibold}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FONT_STYLE"],
+ "codeSyntax": {}
+ }
+ }
+ }
+ },
+ "hover": {
+ "background": {
+ "$type": "color",
+ "$value": "{color.background.selected.weak.hover}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "borderColor": {
+ "$type": "color",
+ "$value": "{color.transparent}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "textColor": {
+ "$type": "color",
+ "$value": "{color.text.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "iconColor": {
+ "$type": "color",
+ "$value": "{color.icon.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["SHAPE_FILL", "STROKE_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "fontWeight": {
+ "$type": "number",
+ "$value": "{fontWeight.semibold}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1614,7 +1670,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{button.default.xsmall.borderWidth}",
+ "$value": "{base.static.borderWidth.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1626,7 +1682,7 @@
},
"minHeight": {
"$type": "number",
- "$value": "{button.default.xsmall.minHeight}",
+ "$value": "{element.xsmall.minHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1638,7 +1694,7 @@
},
"fontSize": {
"$type": "number",
- "$value": "{button.default.xsmall.fontSize}",
+ "$value": "{element.xsmall.fontSize}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1650,7 +1706,7 @@
},
"lineHeight": {
"$type": "number",
- "$value": "{button.default.xsmall.lineHeight}",
+ "$value": "{element.xsmall.lineHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1662,7 +1718,7 @@
},
"gapX": {
"$type": "number",
- "$value": "{button.default.xsmall.gapX}",
+ "$value": "{element.xsmall.textToIconX}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1675,7 +1731,7 @@
"iconOnly": {
"paddingX": {
"$type": "number",
- "$value": "{button.default.xsmall.iconOnly.paddingX}",
+ "$value": "{button.secondary.xsmall.iconOnly.paddingY}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1687,7 +1743,7 @@
},
"paddingY": {
"$type": "number",
- "$value": "{button.default.xsmall.iconOnly.paddingY}",
+ "$value": 4,
"$description": "",
"$extensions": {
"com.figma": {
@@ -1723,7 +1779,7 @@
},
"minHeight": {
"$type": "number",
- "$value": "{button.secondary.xsmall.minHeight}",
+ "$value": "{button.toolbar.xsmall.minHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1747,7 +1803,7 @@
},
"fontSize": {
"$type": "number",
- "$value": "{button.secondary.xsmall.fontSize}",
+ "$value": "{button.toolbar.xsmall.fontSize}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1781,35 +1837,12 @@
}
}
}
- },
- "hover": {
- "boxShadow": {
- "$type": "shadow",
- "$value": [
- {
- "offsetX": "{base.static.spacing.none}",
- "offsetY": "{base.static.spacing.none}",
- "blur": "{base.static.spacing.none}",
- "spread": "{base.dimension.25}",
- "color": "{button.secondary.hover.borderColor}",
- "inset": true
- }
- ],
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["ALL_SCOPES"],
- "codeSyntax": {}
- }
- }
- }
}
},
"small": {
"paddingX": {
"$type": "number",
- "$value": "{button.default.small.paddingX}",
+ "$value": "{element.small.paddingX.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1833,7 +1866,7 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{button.default.small.borderRadius}",
+ "$value": "{base.static.radius.xsmall}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1845,7 +1878,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{button.default.small.borderWidth}",
+ "$value": "{base.static.borderWidth.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1857,7 +1890,7 @@
},
"minHeight": {
"$type": "number",
- "$value": "{button.default.small.minHeight}",
+ "$value": "{element.small.minHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1869,7 +1902,7 @@
},
"fontSize": {
"$type": "number",
- "$value": "{button.default.small.fontSize}",
+ "$value": "{element.small.fontSize}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1881,7 +1914,7 @@
},
"lineHeight": {
"$type": "number",
- "$value": "{button.default.small.lineHeight}",
+ "$value": "{element.small.lineHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1893,7 +1926,7 @@
},
"gapX": {
"$type": "number",
- "$value": "{button.default.small.gapX}",
+ "$value": "{element.xsmall.textToIconX}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1906,7 +1939,7 @@
"iconOnly": {
"paddingX": {
"$type": "number",
- "$value": "{button.default.small.iconOnly.paddingX}",
+ "$value": 5,
"$description": "",
"$extensions": {
"com.figma": {
@@ -1918,7 +1951,7 @@
},
"paddingY": {
"$type": "number",
- "$value": "{button.default.small.iconOnly.paddingY}",
+ "$value": 5,
"$description": "",
"$extensions": {
"com.figma": {
@@ -1930,7 +1963,7 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{button.secondary.small.borderRadius}",
+ "$value": "{button.toolbar.small.borderRadius}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1942,7 +1975,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{button.secondary.small.borderWidth}",
+ "$value": "{button.toolbar.small.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1954,7 +1987,7 @@
},
"minHeight": {
"$type": "number",
- "$value": "{button.secondary.small.minHeight}",
+ "$value": "{button.toolbar.small.minHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1966,7 +1999,7 @@
},
"minWidth": {
"$type": "number",
- "$value": "{button.secondary.small.iconOnly.minHeight}",
+ "$value": "{button.default.small.iconOnly.minHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2002,7 +2035,7 @@
},
"gapX": {
"$type": "number",
- "$value": "{button.secondary.small.gapX}",
+ "$value": "{button.toolbar.small.gapX}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2012,35 +2045,12 @@
}
}
}
- },
- "hover": {
- "boxShadow": {
- "$type": "shadow",
- "$value": [
- {
- "offsetX": "{base.static.spacing.none}",
- "offsetY": "{base.static.spacing.none}",
- "blur": "{base.static.spacing.none}",
- "spread": "{base.dimension.25}",
- "color": "{button.secondary.hover.borderColor}",
- "inset": true
- }
- ],
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["ALL_SCOPES"],
- "codeSyntax": {}
- }
- }
- }
}
},
"medium": {
"paddingX": {
"$type": "number",
- "$value": "{element.medium.paddingX.wide}",
+ "$value": "{button.default.medium.paddingX}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2052,7 +2062,7 @@
},
"paddingY": {
"$type": "number",
- "$value": 4,
+ "$value": "{button.default.medium.paddingY}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2076,7 +2086,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{base.static.borderWidth.small}",
+ "$value": "{button.default.medium.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2137,7 +2147,7 @@
"iconOnly": {
"paddingX": {
"$type": "number",
- "$value": "{button.secondary.medium.iconOnly.paddingY}",
+ "$value": "{button.default.medium.iconOnly.paddingX}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2149,7 +2159,7 @@
},
"paddingY": {
"$type": "number",
- "$value": 7,
+ "$value": "{button.default.medium.iconOnly.paddingY}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2197,7 +2207,7 @@
},
"minWidth": {
"$type": "number",
- "$value": "{button.secondary.medium.iconOnly.minHeight}",
+ "$value": "{button.default.medium.iconOnly.minWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2243,29 +2253,6 @@
}
}
}
- },
- "hover": {
- "boxShadow": {
- "$type": "shadow",
- "$value": [
- {
- "offsetX": "{base.static.spacing.none}",
- "offsetY": "{base.static.spacing.none}",
- "blur": "{base.static.spacing.none}",
- "spread": "{base.dimension.25}",
- "color": "{button.secondary.hover.borderColor}",
- "inset": true
- }
- ],
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["ALL_SCOPES"],
- "codeSyntax": {}
- }
- }
- }
}
},
"large": {
@@ -2404,7 +2391,7 @@
},
"minWidth": {
"$type": "number",
- "$value": "{button.secondary.large.iconOnly.minHeight}",
+ "$value": "{button.default.large.iconOnly.minWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2537,18 +2524,6 @@
}
}
},
- "minWidth": {
- "$type": "number",
- "$value": "{button.secondary.xlarge.iconOnly.minHeight}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["WIDTH_HEIGHT"],
- "codeSyntax": {}
- }
- }
- },
"fontSize": {
"$type": "number",
"$value": "{button.secondary.xlarge.fontSize}",
@@ -2624,7 +2599,7 @@
},
"paddingY": {
"$type": "number",
- "$value": 19,
+ "$value": "{button.default.xlarge.paddingY}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2648,7 +2623,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{base.static.borderWidth.small}",
+ "$value": "{button.default.xlarge.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2705,29 +2680,6 @@
"codeSyntax": {}
}
}
- },
- "hover": {
- "boxShadow": {
- "$type": "shadow",
- "$value": [
- {
- "offsetX": "{base.static.spacing.none}",
- "offsetY": "{base.static.spacing.none}",
- "blur": "{base.static.spacing.none}",
- "spread": "{base.dimension.25}",
- "color": "{button.secondary.hover.borderColor}",
- "inset": true
- }
- ],
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["ALL_SCOPES"],
- "codeSyntax": {}
- }
- }
- }
}
}
},
@@ -2783,7 +2735,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.semibold}",
+ "$value": "{fontWeight.medium}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2922,7 +2874,7 @@
"enabled": {
"background": {
"$type": "color",
- "$value": "{color.background.active}",
+ "$value": "{color.background.contrast}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2946,7 +2898,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.enabled.textColor}",
+ "$value": "{color.text.primary}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -2958,19 +2910,81 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.enabled.iconColor}",
+ "$value": "{color.icon.primary}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"],
+ "scopes": ["SHAPE_FILL", "STROKE_COLOR"],
"codeSyntax": {}
}
}
},
"fontWeight": {
"$type": "number",
- "$value": "{button.default.enabled.fontWeight}",
+ "$value": "{fontWeight.semibold}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FONT_STYLE"],
+ "codeSyntax": {}
+ }
+ }
+ }
+ },
+ "hover": {
+ "background": {
+ "$type": "color",
+ "$value": "{color.background.hover}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "borderColor": {
+ "$type": "color",
+ "$value": "{color.transparent}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "textColor": {
+ "$type": "color",
+ "$value": "{color.text.primary}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "iconColor": {
+ "$type": "color",
+ "$value": "{color.icon.primary}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["SHAPE_FILL", "STROKE_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "fontWeight": {
+ "$type": "number",
+ "$value": "{fontWeight.semibold}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -3142,7 +3156,7 @@
},
"minWidth": {
"$type": "number",
- "$value": "{button.default.xsmall.minHeight}",
+ "$value": "{button.default.xsmall.iconOnly.minHeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -3413,7 +3427,7 @@
},
"paddingY": {
"$type": "number",
- "$value": "{element.medium.paddingY}",
+ "$value": 5,
"$description": "",
"$extensions": {
"com.figma": {
@@ -3437,7 +3451,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{base.static.borderWidth.default}",
+ "$value": "{element.medium.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -3461,7 +3475,7 @@
},
"fontSize": {
"$type": "number",
- "$value": "{base.dimension.475}",
+ "$value": "{element.medium.fontSize}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -3621,7 +3635,7 @@
},
"paddingY": {
"$type": "number",
- "$value": "{element.large.paddingY}",
+ "$value": 9,
"$description": "",
"$extensions": {
"com.figma": {
@@ -3633,7 +3647,7 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{base.static.radius.full}",
+ "$value": "{base.static.radius.xlarge}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -3645,7 +3659,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{base.static.borderWidth.default}",
+ "$value": "{element.large.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -3939,7 +3953,7 @@
},
"paddingY": {
"$type": "number",
- "$value": "{element.xlarge.paddingY}",
+ "$value": 20,
"$description": "",
"$extensions": {
"com.figma": {
@@ -3963,7 +3977,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{base.static.borderWidth.default}",
+ "$value": "{element.xlarge.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4039,7 +4053,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4051,7 +4065,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.enabled.textColor}",
+ "$value": "{color.text.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4063,7 +4077,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.enabled.iconColor}",
+ "$value": "{color.icon.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4101,7 +4115,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.disabled}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4175,7 +4189,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.toolbar.enabled.textColor}",
+ "$value": "{color.text.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4187,7 +4201,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.toolbar.enabled.iconColor}",
+ "$value": "{color.icon.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4208,13 +4222,75 @@
"codeSyntax": {}
}
}
- }
- },
- "selected": {
- "enabled": {
+ }
+ },
+ "selected": {
+ "enabled": {
+ "background": {
+ "$type": "color",
+ "$value": "{color.background.selected.weak.enabled}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "borderColor": {
+ "$type": "color",
+ "$value": "{color.border.selected}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "textColor": {
+ "$type": "color",
+ "$value": "{color.text.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "iconColor": {
+ "$type": "color",
+ "$value": "{color.text.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "fontWeight": {
+ "$type": "number",
+ "$value": "{button.default.enabled.fontWeight}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FONT_STYLE"],
+ "codeSyntax": {}
+ }
+ }
+ }
+ },
+ "hover": {
"background": {
"$type": "color",
- "$value": "{button.default.selected.enabled.background}",
+ "$value": "{color.background.selected.weak.hover}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4226,7 +4302,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.borderColor}",
+ "$value": "{color.border.selected}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4238,7 +4314,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.textColor}",
+ "$value": "{color.text.onSelectedWeak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4250,7 +4326,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{button.default.selected.enabled.iconColor}",
+ "$value": "{color.text.onSelectedWeak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4359,10 +4435,22 @@
}
}
},
+ "gapX": {
+ "$type": "number",
+ "$value": "{element.xsmall.textToIconX}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["GAP"],
+ "codeSyntax": {}
+ }
+ }
+ },
"iconOnly": {
"paddingX": {
"$type": "number",
- "$value": "{button.toolbar.xsmall.iconOnly.paddingY}",
+ "$value": 5,
"$description": "",
"$extensions": {
"com.figma": {
@@ -4420,18 +4508,6 @@
}
}
},
- "minWidth": {
- "$type": "number",
- "$value": "{button.default.xsmall.iconOnly.minWidth}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["WIDTH_HEIGHT"],
- "codeSyntax": {}
- }
- }
- },
"fontSize": {
"$type": "number",
"$value": "{button.toolbar.xsmall.fontSize}",
@@ -4468,18 +4544,6 @@
}
}
}
- },
- "gapX": {
- "$type": "number",
- "$value": "{element.xsmall.textToIconX}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["GAP"],
- "codeSyntax": {}
- }
- }
}
},
"small": {
@@ -4705,7 +4769,7 @@
},
"paddingY": {
"$type": "number",
- "$value": "{button.default.medium.paddingY}",
+ "$value": "{element.medium.paddingY}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4717,7 +4781,7 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{base.static.spacing.xsmall}",
+ "$value": "{base.static.radius.xsmall}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -4901,7 +4965,7 @@
"large": {
"paddingX": {
"$type": "number",
- "$value": "{base.dimension.250}",
+ "$value": "{element.large.paddingX.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -5082,7 +5146,7 @@
},
"paddingX": {
"$type": "number",
- "$value": 14,
+ "$value": "{button.default.large.iconOnly.paddingX}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -5211,7 +5275,7 @@
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
- "scopes": ["GAP"],
+ "scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
@@ -5707,7 +5771,7 @@
"option": {
"paddingX": {
"$type": "number",
- "$value": "{formField.medium.input.container.paddingX}",
+ "$value": 11,
"$description": "",
"$extensions": {
"com.figma": {
@@ -5970,7 +6034,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{color.text.onSelectedWeak}",
+ "$value": "{color.text.strong}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6027,7 +6091,7 @@
"hover": {
"background": {
"$type": "color",
- "$value": "{color.background.default}",
+ "$value": "{color.background.hover}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6039,7 +6103,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.strong}",
+ "$value": "{color.border.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6066,7 +6130,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.selected}",
+ "$value": "{color.background.selected.strong.enabled}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6078,7 +6142,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{color.icon.onSelectedStrong}",
+ "$value": "{color.icon.onPrimary}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6092,7 +6156,7 @@
"hover": {
"background": {
"$type": "color",
- "$value": "{color.background.selected.strong.enabled}",
+ "$value": "{color.background.selected.strong.hover}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6104,7 +6168,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.strong}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6116,7 +6180,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{color.icon.onPrimary}",
+ "$value": "{color.icon.onSelectedStrong}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6208,7 +6272,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.selected}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6393,7 +6457,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6431,7 +6495,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{borderWidth.default}",
+ "$value": "{element.medium.borderWidth}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6443,7 +6507,19 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{base.static.radius.xxsmall}",
+ "$value": "{base.static.radius.xsmall}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["CORNER_RADIUS"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "marginY": {
+ "$type": "number",
+ "$value": 0,
"$description": "",
"$extensions": {
"com.figma": {
@@ -6462,7 +6538,7 @@
"enabled": {
"background": {
"$type": "color",
- "$value": "{color.background.default}",
+ "$value": "{base.color.grey.500}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6474,7 +6550,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6488,7 +6564,7 @@
"hover": {
"background": {
"$type": "color",
- "$value": "{color.background.default}",
+ "$value": "#AAAAAA",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6500,7 +6576,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.strong}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6526,7 +6602,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.disabled}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6553,7 +6629,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6622,7 +6698,7 @@
"enabled": {
"background": {
"$type": "color",
- "$value": "{color.background.front}",
+ "$value": "{color.background.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6634,7 +6710,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6713,7 +6789,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6902,7 +6978,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{base.static.borderWidth.default}",
+ "$value": "{borderWidth.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6923,12 +6999,24 @@
"codeSyntax": {}
}
}
+ },
+ "marginY": {
+ "$type": "number",
+ "$value": 0,
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["CORNER_RADIUS"],
+ "codeSyntax": {}
+ }
+ }
}
},
"handle": {
"height": {
"$type": "number",
- "$value": "{base.dimension.550}",
+ "$value": "{base.dimension.500}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -6940,7 +7028,7 @@
},
"width": {
"$type": "number",
- "$value": "{base.dimension.550}",
+ "$value": "{base.dimension.500}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -7041,7 +7129,7 @@
},
"paddingTop": {
"$type": "number",
- "$value": "{base.static.spacing.xsmall}",
+ "$value": "{base.static.spacing.small}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -7053,7 +7141,7 @@
},
"paddingBottom": {
"$type": "number",
- "$value": 5,
+ "$value": 11,
"$description": "",
"$extensions": {
"com.figma": {
@@ -7102,7 +7190,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.transparent}",
+ "$value": "{color.border.weak}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -7262,7 +7350,7 @@
}
}
},
- "backgroundColor": {
+ "background": {
"$type": "color",
"$value": "{dataCell.enabled.background}",
"$description": "",
@@ -7273,16 +7361,44 @@
"codeSyntax": {}
}
}
- },
- "background": {
- "$type": "color",
- "$value": "{dataCell.enabled.background}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
+ }
+ },
+ "selected": {
+ "enabled": {
+ "textColor": {
+ "$type": "color",
+ "$value": "{color.text.onSelectedWeak}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "borderColor": {
+ "$type": "color",
+ "$value": "#00000000",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "background": {
+ "$type": "color",
+ "$value": "{color.background.selected.weak.enabled}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
}
}
}
@@ -7919,7 +8035,7 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{radius.none}",
+ "$value": "{base.static.radius.xsmall}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -7957,7 +8073,7 @@
"container": {
"paddingX": {
"$type": "number",
- "$value": "{spacing.none}",
+ "$value": "{base.static.spacing.xsmall}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8044,7 +8160,7 @@
},
"borderRadius": {
"$type": "number",
- "$value": "{base.static.radius.xsmall}",
+ "$value": "{base.dimension.200}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8119,7 +8235,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8445,7 +8561,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "#ffffff",
+ "$value": "#00000000",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8632,7 +8748,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "#ffffff",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8669,37 +8785,11 @@
}
}
},
- "disabled": {
- "background": {
- "$type": "color",
- "$value": "{color.background.disabled}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- },
- "borderColor": {
- "$type": "color",
- "$value": "{color.border.disabled}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
- "codeSyntax": {}
- }
- }
- }
- },
"status": {
"critical": {
"background": {
"$type": "color",
- "$value": "{color.background.critical}",
+ "$value": "{color.transparent}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8711,7 +8801,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.strong}",
+ "$value": "{color.border.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8722,6 +8812,32 @@
}
}
}
+ },
+ "disabled": {
+ "background": {
+ "$type": "color",
+ "$value": "{color.background.disabled}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "borderColor": {
+ "$type": "color",
+ "$value": "{color.border.disabled}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["STROKE_COLOR", "EFFECT_COLOR"],
+ "codeSyntax": {}
+ }
+ }
+ }
}
}
},
@@ -8815,16 +8931,6 @@
},
"placeholder": {
"disabled": {
- "$type": "color",
- "$value": "{color.text.disabled}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["TEXT_FILL"],
- "codeSyntax": {}
- }
- },
"textColor": {
"$type": "color",
"$value": "{color.text.disabled}",
@@ -8841,7 +8947,7 @@
"enabled": {
"textColor": {
"$type": "color",
- "$value": "{color.text.weak}",
+ "$value": "{color.text.placeholder}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8855,7 +8961,7 @@
"hover": {
"textColor": {
"$type": "color",
- "$value": "{color.text.weak}",
+ "$value": "{color.text.placeholder}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8869,7 +8975,7 @@
"focus": {
"textColor": {
"$type": "color",
- "$value": "{color.text.weak}",
+ "$value": "{color.text.placeholder}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8883,7 +8989,7 @@
"readOnly": {
"textColor": {
"$type": "color",
- "$value": "{color.text.weak}",
+ "$value": "{color.text.placeholder}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -8898,7 +9004,7 @@
"critical": {
"textColor": {
"$type": "color",
- "$value": "{color.text.weak}",
+ "$value": "{color.text.placeholder}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9181,7 +9287,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{color.text.default}",
+ "$value": "{color.text.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9207,7 +9313,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{color.text.default}",
+ "$value": "{color.text.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9234,7 +9340,7 @@
},
"textColor": {
"$type": "color",
- "$value": "{color.text.default}",
+ "$value": "{color.text.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9627,7 +9733,7 @@
"hover": {
"background": {
"$type": "color",
- "$value": "{color.transparent}",
+ "$value": "{color.background.hover}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9639,7 +9745,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.strong}",
+ "$value": "{color.border.default}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9730,7 +9836,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{color.icon.brand}",
+ "$value": "{color.icon.onSelectedStrong}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9756,7 +9862,7 @@
},
"borderColor": {
"$type": "color",
- "$value": "{color.border.strong}",
+ "$value": "{color.border.selected}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9768,7 +9874,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{color.icon.brand}",
+ "$value": "{color.icon.onSelectedStrong}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9806,7 +9912,7 @@
},
"iconColor": {
"$type": "color",
- "$value": "{color.icon.brand}",
+ "$value": "{color.icon.onSelectedStrong}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9941,7 +10047,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -9979,7 +10085,7 @@
},
"borderWidth": {
"$type": "number",
- "$value": "{borderWidth.default}",
+ "$value": "{base.static.borderWidth.large}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10009,7 +10115,7 @@
"enabled": {
"textColor": {
"$type": "color",
- "$value": "{color.text.strong}",
+ "$value": "{color.text.primary}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10033,7 +10139,7 @@
},
"textDecoration": {
"$type": "string",
- "$value": "underline",
+ "$value": "none",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10047,7 +10153,7 @@
"hover": {
"textColor": {
"$type": "color",
- "$value": "{color.text.strong}",
+ "$value": "{anchor.default.enabled.textColor}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10059,7 +10165,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{anchor.default.enabled.fontWeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10085,7 +10191,7 @@
"disabled": {
"textColor": {
"$type": "color",
- "$value": "{color.text.strong}",
+ "$value": "{color.text.disabled}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10097,7 +10203,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{anchor.default.enabled.fontWeight}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -10109,7 +10215,7 @@
},
"textDecoration": {
"$type": "string",
- "$value": "underline",
+ "$value": "none",
"$description": "",
"$extensions": {
"com.figma": {
diff --git a/design-tokens/tokens/primitive/primitives.base.json b/design-tokens/tokens/primitive/primitives.base.json
index 8d2b50b6f1..1b82d960a5 100644
--- a/design-tokens/tokens/primitive/primitives.base.json
+++ b/design-tokens/tokens/primitive/primitives.base.json
@@ -790,6 +790,18 @@
}
}
},
+ "800": {
+ "$type": "color",
+ "$value": "#006750",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["ALL_SCOPES"],
+ "codeSyntax": {}
+ }
+ }
+ },
"900": {
"$type": "color",
"$value": "#074b3b",
@@ -1184,6 +1196,18 @@
}
}
},
+ "550": {
+ "$type": "color",
+ "$value": "#EBEBEB",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["ALL_SCOPES"],
+ "codeSyntax": {}
+ }
+ }
+ },
"600": {
"$type": "color",
"$value": "#8c8c8c",
diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json
index 8a85f36468..2d88c39426 100644
--- a/design-tokens/tokens/semantic/color.dark.json
+++ b/design-tokens/tokens/semantic/color.dark.json
@@ -123,7 +123,19 @@
},
"unknown": {
"$type": "color",
- "$value": "{base.color.white.opacity6}",
+ "$value": "{base.color.grey.1200}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "ok": {
+ "$type": "color",
+ "$value": "{base.color.green.500-Opacity30}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -157,11 +169,37 @@
}
}
},
+ "primary": {
+ "default": {
+ "$type": "color",
+ "$value": "#007C60",
+ "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "hover": {
+ "$type": "color",
+ "$value": "#00513F",
+ "$description": "Hover color variant of the primary color.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ }
+ },
"selected": {
"strong": {
"enabled": {
"$type": "color",
- "$value": "{base.color.brand}",
+ "$value": "{color.background.primary.default}",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$extensions": {
"com.figma": {
@@ -173,7 +211,7 @@
},
"hover": {
"$type": "color",
- "$value": "{base.color.brand}",
+ "$value": "{color.background.primary.hover}",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$extensions": {
"com.figma": {
@@ -211,44 +249,6 @@
}
}
},
- "primary": {
- "default": {
- "$type": "color",
- "$value": "{base.color.green.600}",
- "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- },
- "hover": {
- "$type": "color",
- "$value": "{base.color.green.600}",
- "$description": "Hover color variant of the primary color.",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- }
- },
- "ok": {
- "$type": "color",
- "$value": "{base.color.green.500-Opacity30}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- },
"neutral": {
"xstrong": {
"$type": "color",
@@ -327,7 +327,7 @@
},
"critical": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{color.foreground.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -459,6 +459,18 @@
}
}
},
+ "primary": {
+ "$type": "color",
+ "$value": "{base.color.brand}",
+ "$description": "Brand text color. Use with caution. Currently not accessible for text that is below a bold weight and below 19px.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
"onPrimary": {
"$type": "color",
"$value": "{base.color.white.100}",
@@ -513,7 +525,7 @@
},
"critical": {
"$type": "color",
- "$value": "{color.text.default}",
+ "$value": "{color.foreground.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -801,7 +813,7 @@
},
"critical": {
"$type": "color",
- "$value": "{base.color.red.550}",
+ "$value": "{color.foreground.critical}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -849,7 +861,7 @@
},
"unknown": {
"$type": "color",
- "$value": "{base.color.grey.700}",
+ "$value": "{base.color.grey.800}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -859,6 +871,18 @@
}
}
},
+ "primary": {
+ "$type": "color",
+ "$value": "{base.color.brand}",
+ "$description": "Brand text color. Use with caution. Currently not accessible for text that is below a bold weight and below 19px.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
"onPrimary": {
"$type": "color",
"$value": "{base.color.white.100}",
diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json
index 4c03b25519..31638f051b 100644
--- a/design-tokens/tokens/semantic/color.light.json
+++ b/design-tokens/tokens/semantic/color.light.json
@@ -123,7 +123,19 @@
},
"unknown": {
"$type": "color",
- "$value": "{base.color.black.opacity4}",
+ "$value": "{base.color.grey.50}",
+ "$description": "",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "ok": {
+ "$type": "color",
+ "$value": "{base.color.green.400-Opacity24}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -157,11 +169,37 @@
}
}
},
+ "primary": {
+ "default": {
+ "$type": "color",
+ "$value": "{base.color.green.700}",
+ "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
+ "hover": {
+ "$type": "color",
+ "$value": "{base.color.green.800}",
+ "$description": "Hover color variant of the primary color.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["FRAME_FILL", "SHAPE_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ }
+ },
"selected": {
"strong": {
"enabled": {
"$type": "color",
- "$value": "{base.color.brand}",
+ "$value": "{color.background.primary.default}",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$extensions": {
"com.figma": {
@@ -173,7 +211,7 @@
},
"hover": {
"$type": "color",
- "$value": "{base.color.brand}",
+ "$value": "{color.background.primary.hover}",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.",
"$extensions": {
"com.figma": {
@@ -187,7 +225,7 @@
"weak": {
"enabled": {
"$type": "color",
- "$value": "{base.color.green.100}",
+ "$value": "#CBFAEB",
"$description": "Lower emphasis variant of selected color. Use if selection color needs to be less prominent.",
"$extensions": {
"com.figma": {
@@ -211,44 +249,6 @@
}
}
},
- "primary": {
- "default": {
- "$type": "color",
- "$value": "{base.color.green.600}",
- "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- },
- "hover": {
- "$type": "color",
- "$value": "{base.color.green.600}",
- "$description": "Hover color variant of the primary color.",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- }
- },
- "ok": {
- "$type": "color",
- "$value": "{base.color.green.400-Opacity24}",
- "$description": "",
- "$extensions": {
- "com.figma": {
- "hiddenFromPublishing": false,
- "scopes": ["FRAME_FILL", "SHAPE_FILL"],
- "codeSyntax": {}
- }
- }
- },
"neutral": {
"xstrong": {
"$type": "color",
@@ -315,7 +315,7 @@
},
"selected": {
"$type": "color",
- "$value": "{base.color.green.600}",
+ "$value": "{base.color.green.700}",
"$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggles, active tabs.",
"$extensions": {
"com.figma": {
@@ -327,7 +327,7 @@
},
"critical": {
"$type": "color",
- "$value": "{color.border.default}",
+ "$value": "{base.color.red.800}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -483,6 +483,18 @@
}
}
},
+ "primary": {
+ "$type": "color",
+ "$value": "{base.color.green.800}",
+ "$description": "Brand text color. Use with caution. Currently not accessible for text that is below a bold weight and below 19px.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
"heading": {
"default": {
"$type": "color",
@@ -513,7 +525,7 @@
},
"critical": {
"$type": "color",
- "$value": "{color.text.default}",
+ "$value": "{base.color.red.800}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -585,7 +597,7 @@
},
"onSelectedWeak": {
"$type": "color",
- "$value": "{color.text.strong}",
+ "$value": "{base.color.green.900}",
"$description": "Text color to be used for text sitting on background-selected-strong.",
"$extensions": {
"com.figma": {
@@ -859,6 +871,18 @@
}
}
},
+ "primary": {
+ "$type": "color",
+ "$value": "{base.color.green.800}",
+ "$description": "Brand text color. Use with caution. Currently not accessible for text that is below a bold weight and below 19px.",
+ "$extensions": {
+ "com.figma": {
+ "hiddenFromPublishing": false,
+ "scopes": ["TEXT_FILL"],
+ "codeSyntax": {}
+ }
+ }
+ },
"onPrimary": {
"$type": "color",
"$value": "{base.color.white.100}",
diff --git a/design-tokens/tokens/semantic/dimension.medium.json b/design-tokens/tokens/semantic/dimension.medium.json
index 296e70fa0b..a81ae74199 100644
--- a/design-tokens/tokens/semantic/dimension.medium.json
+++ b/design-tokens/tokens/semantic/dimension.medium.json
@@ -1025,7 +1025,7 @@
"xlarge": {
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1049,7 +1049,7 @@
},
"lineHeight": {
"$type": "number",
- "$value": "{base.lineHeight.500}",
+ "$value": 42,
"$description": "",
"$extensions": {
"com.figma": {
@@ -1063,7 +1063,7 @@
"large": {
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1075,7 +1075,7 @@
},
"fontSize": {
"$type": "number",
- "$value": "{base.fontSize.500}",
+ "$value": 28,
"$description": "",
"$extensions": {
"com.figma": {
@@ -1087,7 +1087,7 @@
},
"lineHeight": {
"$type": "number",
- "$value": "{base.lineHeight.200}",
+ "$value": 34,
"$description": "",
"$extensions": {
"com.figma": {
@@ -1113,7 +1113,7 @@
},
"lineHeight": {
"$type": "number",
- "$value": "{base.lineHeight.100}",
+ "$value": "{base.lineHeight.200}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1125,7 +1125,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1139,7 +1139,7 @@
"small": {
"fontSize": {
"$type": "number",
- "$value": "{base.fontSize.100}",
+ "$value": "{base.fontSize.200}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1151,7 +1151,7 @@
},
"lineHeight": {
"$type": "number",
- "$value": "{base.lineHeight.90}",
+ "$value": "{base.lineHeight.200}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1163,7 +1163,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.medium}",
+ "$value": "{fontWeight.regular}",
"$description": "",
"$extensions": {
"com.figma": {
@@ -1201,7 +1201,7 @@
},
"fontWeight": {
"$type": "number",
- "$value": "{fontWeight.semibold}",
+ "$value": "{fontWeight.medium}",
"$description": "",
"$extensions": {
"com.figma": {
diff --git a/sandbox/grommet-app/index.html b/sandbox/grommet-app/index.html
index 896640d1d0..f28fcc8fcc 100644
--- a/sandbox/grommet-app/index.html
+++ b/sandbox/grommet-app/index.html
@@ -4,7 +4,7 @@
- Design Tokens Demo
+ Design System Demo
diff --git a/sandbox/grommet-app/src/App.jsx b/sandbox/grommet-app/src/App.jsx
index 56b9c1f236..716f0b155f 100644
--- a/sandbox/grommet-app/src/App.jsx
+++ b/sandbox/grommet-app/src/App.jsx
@@ -1,22 +1,18 @@
-import { createContext, useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Grommet, Box } from 'grommet';
import { themes } from './theme';
import Sustainability from './pages/sustainability/index';
import Home from './pages/index';
-import NextDashboard from './pages/next/index';
import StickerSheet from './pages/sticker-sheet/index';
-import Refresh from './pages/refresh/index';
+// import Refresh from './pages/refresh/index';
import { Login } from './Login';
import { GlobalHeader } from './components/GlobalHeader';
-import { FloatingActionButton } from './components';
import { HPEGreenLakeBadge } from './components/HPEGreenLakeBadge';
-// import { useLoading } from './utils/skeleton';
+import { BackgroundContext, WorkspaceContext } from './contexts';
+import { useLoading } from './utils/skeleton';
import './app.css';
-export const BackgroundContext = createContext({});
-export const WorkspaceContext = createContext({});
-
const App = () => {
const [authenticated, setAuthenticated] = useState(
localStorage.getItem('design-tokens-demo') || false,
@@ -48,8 +44,7 @@ const App = () => {
const [workspace, setWorkspace] = useState('Acme Production');
const workspaceContextValue = useMemo(() => ({ workspace }), [workspace]);
- // const loading = useLoading(6000);
- const loading = false; // Temp disabling for sticker sheet
+ const loading = useLoading(6000);
return (
{
) : (
-
+
-
- ) : (
-
- )
- }
- />
+ } />
} />
} />
- } />
+ {/* TO DO unfinished layout */}
+ {/* } /> */}
- {window.location.pathname === '/next' ? (
-
- ) : undefined}
)
diff --git a/sandbox/grommet-app/src/Login.jsx b/sandbox/grommet-app/src/Login.jsx
index 84f20f7bd4..e4ecf61526 100644
--- a/sandbox/grommet-app/src/Login.jsx
+++ b/sandbox/grommet-app/src/Login.jsx
@@ -14,7 +14,7 @@ export const Login = ({ setAuthenticated }) => {
+
{children}
-
+
);
}
@@ -90,7 +101,7 @@ const Compare = ({ children, ...rest }) => {
// eslint-disable-next-line no-nested-ternary
mode === 'Compare diffs'
? { opacity: 0.5, filter: 'invert(1)', color: 'green' }
- : mode === 'tokens'
+ : mode === 'next'
? { visibility: 'hidden' }
: {}
}
@@ -102,7 +113,7 @@ const Compare = ({ children, ...rest }) => {
{children}
@@ -122,7 +133,7 @@ Compare.propTypes = {
const StickerSheet = () => {
const [mode, setMode] = React.useState('Compare diffs');
const [direction, setDirection] = React.useState('row');
-
+ const theme = useContext(ThemeContext);
const contextValue = useMemo(() => {
return {
mode,
@@ -130,14 +141,21 @@ const StickerSheet = () => {
};
}, [mode, direction]);
return (
-
+
} />
+ }
actions={
// eslint-disable-next-line max-len
@@ -153,7 +171,7 @@ const StickerSheet = () => {
-
-
-
-
-
-
-
- {/*
-
- */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {}} />
+
+
+
+
+
+
+ San Francisco
+ California
+
+
+
+
+
+
+
+
+
+ {}}
+ />
+
+
+ {}}
+ />
+
+
+ {}}
+ />
+
+
+ {}}
+ />
+
+
+
+
+
+
+
+
+
+
+ {}}
+ select={['4352351']}
+ columns={[
{
- value: 1,
- icon: ,
+ property: 'id',
+ header: 'ID',
},
{
- value: 2,
- icon:
,
+ property: 'firstName',
+ header: 'First name',
},
{
- value: 3,
- icon: ,
+ property: 'lastName',
+ header: 'Last name',
+ units: 'GB',
},
]}
- />
-
-
-
-
-
- {}} />
-
-
-
-
-
-
-
-
-
-
- San Francisco
- California
-
-
-
- {}}
- />
-
-
- {}}
- />
-
-
- {}}
- />
-
-
- {}}
- />
-
-
- {}}
- />
-
-
-
-
-
-
-
-
-
-
-
- {}}
- select={['4352351']}
- columns={[
- {
- property: 'id',
- header: 'ID',
- },
- {
+ data={[
+ {
+ id: '2341234',
+ firstName: 'Taylor',
+ lastName: 'Seamans',
+ },
+ {
+ id: '4352351',
+ firstName: 'Oliver',
+ lastName: 'Plunkett',
+ },
+ {
+ id: '6439201',
+ firstName: 'Joelle',
+ lastName: 'Gregory',
+ },
+ ]}
+ sort={{
property: 'firstName',
- header: 'First name',
- },
- {
- property: 'lastName',
- header: 'Last name',
- units: 'GB',
- },
- ]}
- data={[
- {
- id: '2341234',
- firstName: 'Taylor',
- lastName: 'Seamans',
- },
- {
- id: '4352351',
- firstName: 'Oliver',
- lastName: 'Plunkett',
- },
- {
- id: '6439201',
- firstName: 'Joelle',
- lastName: 'Gregory',
- },
- ]}
- sort={{
- property: 'firstName',
- direction: 'asc',
- }}
- />
-
-
-
-
+ direction: 'asc',
+ }}
+ />
+
+
+
+
+
+
+
diff --git a/sandbox/grommet-app/src/pages/sustainability/Devices.jsx b/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
index 069b83c051..5be0d9d1d8 100644
--- a/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
+++ b/sandbox/grommet-app/src/pages/sustainability/Devices.jsx
@@ -1424,7 +1424,8 @@ export const Devices = () => {
-
+ {/* TO DO add back when density tokens are added */}
+ {/* */}
) : undefined}
@@ -1438,7 +1439,8 @@ export const Devices = () => {
-
+ {/* TO DO add back when density tokens are added */}
+ {/* */}
}
diff --git a/sandbox/grommet-app/src/pages/sustainability/index.jsx b/sandbox/grommet-app/src/pages/sustainability/index.jsx
index f6eb40e473..4c7f4ba7fe 100644
--- a/sandbox/grommet-app/src/pages/sustainability/index.jsx
+++ b/sandbox/grommet-app/src/pages/sustainability/index.jsx
@@ -7,7 +7,8 @@ import {
Button,
Tabs,
Tab,
- Text,
+ Heading,
+ Paragraph,
} from 'grommet';
import { Link } from 'react-router-dom';
import { Devices } from './Devices';
@@ -36,7 +37,20 @@ function Sustainability() {
- TBD
+
+
+
+
+ No resources to manage
+
+
+ You do not have access to manage resources. Please
+ contact the administrator to request access.
+
+
+
+
+
diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx
index c68a287d90..cc19043797 100644
--- a/sandbox/grommet-app/src/theme.jsx
+++ b/sandbox/grommet-app/src/theme.jsx
@@ -8,26 +8,6 @@ import {
global as localGlobal,
components as localComponents,
} from 'hpe-design-tokens';
-import {
- dark as oldDark,
- light as oldLight,
- large as oldLarge,
- small as oldSmall,
- global as oldGlobal,
- components as oldComponents,
- elevationdark as oldElevationDark,
- elevationlight as oldElevationLight,
-} from 'hpe-design-tokens-old-theme';
-import {
- dark as refreshDark,
- light as refreshLight,
- large as refreshLarge,
- small as refreshSmall,
- global as refreshGlobal,
- components as refreshComponents,
- elevationdark as refreshElevationDark,
- elevationlight as refreshElevationLight,
-} from 'hpe-design-tokens-brand-refresh';
import {
Down,
Blank,
@@ -39,11 +19,7 @@ import {
Descending,
Unsorted,
} from 'grommet-icons';
-
-const MISSING = {
- color: 'red',
- weight: 700,
-};
+import { hpe } from 'grommet-theme-hpe';
// TO DO should these be added as tokens?
const backgrounds = {
@@ -169,7 +145,7 @@ const access = (path, object) => {
const componentSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
const buttonKinds = ['default', 'secondary', 'primary', 'toolbar'];
-const buttonStates = ['active', 'hover', 'disabled'];
+const buttonStates = ['hover', 'active', 'disabled'];
const textSizes = [
'xsmall',
@@ -225,16 +201,18 @@ const buildTheme = tokens => {
'status-error': undefined,
// ---- TO DO: Tokens do not exist, should they? ---- //
- brand: MISSING.color,
- control: MISSING.color,
- 'active-text': MISSING.color,
- 'disabled-text': MISSING.color, // deprecated, use text-weak instead
+ control: 'background-primary-default',
+ 'active-text': 'text-strong',
'text-primary-button': components.hpe.button.primary.enabled.textColor,
- 'background-cta-alternate': MISSING.color,
+ 'background-cta-alternate': 'background-contrast',
// ----------- These ones we need to map manually for backwards compatibility -----------
// ----------- with current color namespace ---------------
+ brand: {
+ dark: dark.hpe.color.decorative.brand,
+ light: light.hpe.color.decorative.brand,
+ },
'background-layer-overlay': {
dark: dark.hpe.color.background.screenOverlay,
light: light.hpe.color.background.screenOverlay,
@@ -378,6 +356,7 @@ const buildTheme = tokens => {
light: light.hpe.color.text.placeholder,
dark: dark.hpe.color.text.placeholder,
},
+ 'disabled-text': 'text-disabled', // deprecate
};
const containerTokens = 'container' in large.hpe.size;
@@ -593,6 +572,25 @@ const buildTheme = tokens => {
components.hpe.button?.[kind]?.[adjustedState].enabled.fontWeight,
},
};
+ if (!('active' in buttonStatesTheme.hover))
+ buttonStatesTheme.hover.active = {};
+ buttonStatesTheme.hover[state][kind] = {
+ background: {
+ color:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover?.background,
+ },
+ border: {
+ color:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover
+ ?.borderColor,
+ },
+ color:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover?.textColor,
+ font: {
+ weight:
+ components.hpe.button?.[kind]?.[adjustedState]?.hover?.fontWeight,
+ },
+ };
} else if (kind === 'option') {
if (state === 'active') adjustedState = 'selected';
buttonStatesTheme[state][kind] = {
@@ -806,6 +804,7 @@ const buildTheme = tokens => {
large: elevationlight
? elevationlight.hpe.elevation.large
: light.hpe.shadow.large,
+ 'inset-selected': `inset 3px 0 ${light.hpe.color.border.selected}`,
},
dark: {
small: elevationdark
@@ -817,11 +816,12 @@ const buildTheme = tokens => {
large: elevationdark
? elevationdark.hpe.elevation.large
: dark.hpe.shadow.large,
+ 'inset-selected': `inset 3px 0 ${dark.hpe.color.border.selected}`,
},
},
hover: {
background: 'background-hover',
- color: MISSING.color, // TO DO
+ color: 'text-default',
},
selected: {
background: 'background-selected-strong-enabled',
@@ -936,6 +936,7 @@ const buildTheme = tokens => {
font: {
weight: components.hpe.select.option.selected.enabled.fontWeight,
},
+ elevation: 'inset-selected',
},
},
hover: {
@@ -995,7 +996,7 @@ const buildTheme = tokens => {
background: 'background-selected-strong-hover',
},
font: {
- weight: global.hpe.fontWeight.bold,
+ weight: global.hpe.fontWeight.medium,
},
},
inRange: {
@@ -1023,27 +1024,35 @@ const buildTheme = tokens => {
daySize: '27.43px',
title: {
size: 'medium',
- weight: MISSING.weight,
- color: MISSING.color,
+ weight: global.hpe.fontWeight.normal,
+ color: 'text-strong',
},
},
medium: {
fontSize: '18px',
lineHeight: 1.45,
daySize: '54.86px',
- day: {},
+ day: {
+ round: 'full',
+ },
range: {
round: 'none',
start: {
- round: 'none',
+ round: {
+ corner: 'left',
+ size: 'full',
+ },
},
end: {
- round: 'none',
+ round: {
+ corner: 'right',
+ size: 'full',
+ },
},
},
title: {
size: 'large',
- weight: global.hpe.fontWeight.medium,
+ weight: global.hpe.fontWeight.normal,
color: 'text-strong',
},
},
@@ -1053,19 +1062,16 @@ const buildTheme = tokens => {
daySize: '109.71px',
title: {
size: 'xlarge',
- weight: MISSING.weight,
- color: MISSING.color,
+ weight: global.hpe.fontWeight.normal,
+ color: 'text-strong',
},
},
},
card: {
container: {
background: 'background-front',
- elevation: 'medium', // v5
- // elevation: 'none', // Brand refresh change
- // Q should this have a token?
- // A yes, but we haven't filled in "motion" tokens yet
- extend: 'transition: all 0.3s ease-in-out;',
+ elevation: 'none',
+ extend: 'transition: all 0.3s ease-in-out;', // TO DO motion tokens
},
body: {
pad: 'medium',
@@ -1078,7 +1084,7 @@ const buildTheme = tokens => {
},
hover: {
container: {
- elevation: 'large', // v5
+ elevation: 'medium',
},
},
},
@@ -1163,10 +1169,11 @@ const buildTheme = tokens => {
label: {
align: 'start',
},
- pad: {
- vertical: components.hpe.element?.medium.paddingY,
- horizontal: components.hpe.formField.medium.input.container.paddingX, // TO DO is this correct usage?
- },
+ // pad: {
+ // vertical: components.hpe.element?.medium.paddingY,
+ // horizontal: components.hpe.formField.medium.input.container.paddingX, // TO DO is this correct usage?
+ // },
+ pad: 'none',
size: components.hpe.checkbox.medium.control.width, // TO DO should this token be called "size" instead?
// Q is toggle and switch the same thing?
// A: Yes, we can discuss if this name feels right or not.
@@ -1176,7 +1183,7 @@ const buildTheme = tokens => {
size: components.hpe.switch.medium.control.track.width,
// TO DO need token for handle elevation
knob: {
- extend: ({ theme }) => `
+ extend: ({ theme, checked }) => `
box-shadow: ${
theme.global.elevation[theme.dark ? 'dark' : 'light'].small
};
@@ -1191,6 +1198,8 @@ const buildTheme = tokens => {
};
width: ${components.hpe.switch.medium.control.handle.width};
height: ${components.hpe.switch.medium.control.handle.height};
+ top: 1px; // TO DO token?
+ ${!checked ? 'left: 1px;' : ''} // TO DO token?
`,
},
extend: ({ checked, theme }) => `
@@ -1217,14 +1226,7 @@ const buildTheme = tokens => {
// HPE Design System guidance states that pad="none" should be applied on CheckBox
// when its used outside of a FormField. We will apply this hover treatment in
// those instances.
- extend: ({ disabled, pad }) => css`
- ${
- !disabled &&
- pad === 'none' &&
- `&:hover {
- background-color: unset;
- }`
- }
+ extend: () => css`
font-weight: ${components.hpe.checkbox.medium.label.fontWeight};
width: auto;
};
@@ -1232,11 +1234,9 @@ const buildTheme = tokens => {
},
checkBoxGroup: {
container: {
- gap: 'none', // TO DO missing token
- margin: {
- vertical:
- components.hpe.formField.medium.input.group.container.paddingY,
- },
+ cssGap: true,
+ gap: 'xsmall', // TO DO missing token
+ margin: 'none',
},
},
data: {
@@ -1361,11 +1361,11 @@ const buildTheme = tokens => {
// Q: confused on which token to use here formfield.medium.input.group.item.borderWidth?
color: components.hpe.formField.input.container.enabled.borderColor,
side: 'all',
- style: 'dashed',
+ style: 'solid',
size: components.hpe.formField.medium.input.container.borderWidth,
},
button: {
- background: components.hpe.button.default.enabled.background,
+ background: components.hpe.button.secondary.enabled.background,
border: {
// Q: is this the correct value?
// A: yes
@@ -1381,17 +1381,17 @@ const buildTheme = tokens => {
? components.hpe.button.medium.default.paddingX
: components.hpe.button.default.medium.paddingX,
},
- color: components.hpe.button.default.enabled.textColor,
+ color: components.hpe.button.secondary.enabled.textColor,
font: {
- weight: components.hpe.button.default.enabled.fontWeight,
+ weight: components.hpe.button.secondary.enabled.fontWeight,
},
hover: {
- background: components.hpe.button.default.hover.background,
- color: components.hpe.button.default.hover.textColor,
+ background: components.hpe.button.secondary.hover.background,
+ color: components.hpe.button.secondary.hover.textColor,
},
},
dragOver: {
- background: MISSING.color,
+ background: 'background-hover',
border: 'none',
},
hover: {
@@ -1413,10 +1413,56 @@ const buildTheme = tokens => {
extend: `border-radius: ${components.hpe.formField.medium.input.container.borderRadius};`,
},
formField: {
+ extend: ({ theme }) => `
+ // TO DO bad practice
+ [class*="ContentBox"] {
+ label {
+ padding-block: ${
+ components.hpe.formField.medium.input.group.item.paddingY
+ };
+ padding-inline: ${
+ components.hpe.formField.medium.input.group.item.paddingX
+ };
+ &:hover {
+ background: ${
+ theme.global.colors[
+ components.hpe.formField.input.group.item.hover.background
+ ][theme.dark ? 'dark' : 'light']
+ };
+ }
+ }
+ [role="group"], [role="radiogroup"] {
+ gap: 0;
+ padding-block: ${
+ components.hpe.formField.medium.input.group.container.paddingY
+ };
+ padding-inline: ${
+ components.hpe.formField.medium.input.group.container.paddingX
+ };
+ label {
+ padding-block: ${
+ components.hpe.formField.medium.input.group.item.paddingY
+ };
+ padding-inline: ${
+ components.hpe.formField.medium.input.group.item.paddingX
+ };
+ border-radius: ${
+ components.hpe.formField.medium.input.group.item.borderRadius
+ };
+ &:hover {
+ background: ${
+ theme.global.colors[
+ components.hpe.formField.input.group.item.hover.background
+ ][theme.dark ? 'dark' : 'light']
+ };
+ }
+ }
+ }
+ }`,
content: {
// Q: missing tokens
margin: { vertical: 'xsmall' },
- pad: 'none',
+ pad: 'none', // TO DO when we have a CheckBoxGroup or RadioButtonGroup, we want padding
},
border: {
error: {
@@ -1427,9 +1473,12 @@ const buildTheme = tokens => {
color: components.hpe.formField.input.container.enabled.borderColor,
side: 'all',
},
- // checkBox: {
- // pad: 'large',
- // },
+ checkBox: {
+ pad: {
+ horizontal: components.hpe.formField.medium.input.group.item.paddingX,
+ vertical: components.hpe.formField.medium.input.group.item.paddingY,
+ },
+ },
disabled: {
background:
components.hpe.formField.input.group.container.disabled.background,
@@ -1450,7 +1499,9 @@ const buildTheme = tokens => {
container: {
gap: 'xsmall', // Q: missing token
},
- icon: , // TO DO need to handle modes
+ icon: (
+
+ ), // TO DO need to handle modes
size: 'xsmall', // Q: missing token
// Q: confused why we have both hpe.formField.errorText.enabled.textColor
// and hpe.formField.errorText.disabled.color
@@ -1512,12 +1563,12 @@ const buildTheme = tokens => {
label: {
margin: { bottom: 'none' },
size: 'medium',
- weight: MISSING.weight,
+ weight: 500,
},
},
},
heading: {
- color: 'heading',
+ color: 'text-heading-default',
weight: large.hpe.heading.xlarge.fontWeight, // Q: not sure what token to point to here
level: {
1: {
@@ -2121,7 +2172,7 @@ const buildTheme = tokens => {
? components.hpe.button.medium.default.borderWidth
: components.hpe.button.default.medium.borderWidth
] || oldTheme
- ? components.hpe.button.medium.default.borderWidth
+ ? components.hpe.button.medium?.default.borderWidth
: components.hpe.button.default.medium.borderWidth,
},
pad: {
@@ -2146,7 +2197,7 @@ const buildTheme = tokens => {
? components.hpe.button.large.default.borderWidth
: components.hpe.button.default.large.borderWidth
] || oldTheme
- ? components.hpe.button.large.default.borderWidth
+ ? components.hpe.button.large?.default.borderWidth
: components.hpe.button.default.large.borderWidth,
},
pad: {
@@ -2185,19 +2236,12 @@ const buildTheme = tokens => {
},
color: components.hpe.radioButton.control.selected.enabled.borderColor,
container: {
- extend: () => `
- width: auto;
- padding-inline: ${components.hpe.formField.medium.input.group.item.paddingX};
- `,
+ extend: () => `width: auto;`,
},
- extend: () => `
- padding-block: ${components.hpe.formField.medium.input.group.item.paddingY};
- `,
+ extend: () => ``,
gap: components.hpe.radioButton.medium.gapX,
hover: {
- background: {
- color: components.hpe.formField.input.group.item.hover.background,
- },
+ background: 'transparent',
border: {
color: components.hpe.radioButton.control.hover.borderColor,
},
@@ -2213,18 +2257,16 @@ const buildTheme = tokens => {
components.hpe.radioButton.control.selected.enabled.iconColor
}
>
-
+
),
},
},
radioButtonGroup: {
container: {
- gap: 'none', // TO DO should be token?
- margin: {
- vertical:
- components.hpe.formField.medium.input.group.container.paddingY,
- },
+ cssGap: true,
+ gap: 'xsmall', // TO DO should be token?
+ margin: 'none',
},
},
rangeInput: {
@@ -2301,52 +2343,64 @@ const buildTheme = tokens => {
tab: {
color: 'text',
active: {
- background: undefined,
- color: 'text-strong',
- weight: 600,
+ background: 'background-selected-strong-enabled',
+ color: 'text-onSelectedStrong',
+ weight: 500,
},
hover: {
- background: 'transparent',
+ background: 'background-hover',
color: 'text',
},
border: {
- side: 'bottom',
+ side: 'all',
color: 'transparent',
- size: 'medium',
+ size:
+ dimensions[components.hpe.element?.medium.borderWidth] ||
+ components.hpe.element?.medium.borderWidth,
active: {
- color: 'brand',
+ color: 'transparent',
},
disabled: {
color: undefined,
},
hover: {
- color: 'border-weak',
+ color: undefined,
},
},
disabled: {
- color: 'text-xweak',
+ background: 'background-disabled',
+ color: 'text-disabled',
},
pad: {
- // top and bottom pad need to be defined individually, specifying
- // "vertical" only applies to top
- bottom: '9px',
- top: '9px',
- // align horizontal pad with button
- horizontal: '18px',
+ bottom: components.hpe.element?.medium.paddingY,
+ top: components.hpe.element?.medium.paddingY,
+ horizontal: components.hpe.element?.medium?.paddingX?.wide,
},
margin: {
- // bring the overall tabs border behind invidual tab borders
- vertical: '-1px',
+ vertical: 'none',
horizontal: 'none',
},
+ extend: ({ theme }) => `border-radius: ${theme.global.edgeSize.xsmall};`,
},
tabs: {
+ gap: 'small',
header: {
- border: {
- side: 'bottom',
- size: 'xsmall',
- color: 'border-weak',
- },
+ border: undefined,
+ extend: ({ theme }) => `
+ border-radius: ${theme.global.edgeSize.xsmall};
+ & button[aria-selected="true"]:hover > div {
+ background: ${
+ theme.global.colors['background-selected-strong-hover'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ };
+ color: ${
+ theme.global.colors['text-onSelectedStrong'][
+ theme.dark ? 'dark' : 'light'
+ ]
+ };
+ }
+ `,
},
step: {
xsmall: 1,
@@ -2396,7 +2450,7 @@ const buildTheme = tokens => {
},
footer: {
extend: `
- font-weight: ${MISSING.weight};
+ font-weight: ${components.hpe.footerCell.fontWeight};
`,
},
},
@@ -2404,7 +2458,7 @@ const buildTheme = tokens => {
// TO DO NOTE: Tag dimensions are off because there was a bug in Tag in 3.1.0
tag: {
border: {
- color: 'border',
+ color: 'border-weak',
},
icons: {
remove: Close,
@@ -2417,12 +2471,9 @@ const buildTheme = tokens => {
kind: 'default',
},
value: {
- // Q should this be a token?
- // A: Good question..similar to other areas, we might want a weight.emphasis or something
- // weight: MISSING.weight, // TO DO
weight: global.hpe.fontWeight.medium,
},
- round: 'large',
+ round: 'xsmall',
size: {
xsmall: {
icon: undefined,
@@ -2451,6 +2502,7 @@ const buildTheme = tokens => {
},
},
},
+ // TO DO tag rounding is overriding "default" rounding, do we expect this?
medium: {
icon: undefined,
pad: {
@@ -2494,6 +2546,7 @@ const buildTheme = tokens => {
},
text: {
...textTheme,
+ extend: '', // TO DO can remove once merging, needed to override current extend
},
textInput: {
container: {
@@ -2534,27 +2587,12 @@ const buildTheme = tokens => {
},
toggleGroup: {
button: {
- pad: {
- // these are fine since it is built with buttons
- vertical: '6px',
- horizontal: '12px',
- },
- iconOnly: {
- // Q this will be a token?
- pad: {
- vertical: parseInt(mediumIconOnlyPad, 10),
- horizontal: parseInt(mediumIconOnlyPad, 10),
- },
- },
+ kind: 'toolbar',
},
container: {
- border: {
- color: components.hpe.button.toolbar.enabled.borderColor,
- size: oldTheme
- ? components.hpe.button.medium.toolbar.borderWidth
- : components.hpe.button.toolbar.medium.borderWidth,
- },
+ border: false,
},
+ divider: false,
},
buttonGroup: {
gap: 'small',
@@ -2576,40 +2614,78 @@ export const current = buildTheme({
components: localComponents,
});
-export const warm = buildTheme({
- light: localLight,
- dark: localDark,
- small: localSmall,
- large: localMedium,
- global: localGlobal,
- components: localComponents,
-});
-
-export const old = buildTheme({
- light: oldLight,
- dark: oldDark,
- small: oldSmall,
- large: oldLarge,
- elevationlight: oldElevationLight,
- elevationdark: oldElevationDark,
- global: oldGlobal,
- components: oldComponents,
-});
+// need to extend hpe with new token namespace to "fill gaps" for sake of demo
+// when toggling between themes
+const newColors = {
+ 'background-floating': 'background-front',
+ 'background-screenOverlay': 'background-layer-overlay',
+ 'background-unknown': 'background-contrast',
+ 'background-info': 'background-contrast',
+ 'background-critical': 'validation-critical',
+ 'background-warning': 'validation-warning',
+ 'background-ok': 'validation-ok',
+ 'background-primary-default': 'brand',
+ 'background-primary-hover': 'brand',
+ 'background-selected-strong-enabled': 'background-primary-default',
+ 'background-selected-strong-hover': 'background-primary-hover',
+ 'background-neutral-xstrong': {},
+ 'border-disabled': 'text-disabled',
+ 'border-selected': 'brand',
+ 'border-critical': 'border',
+ 'border-warning': 'border',
+ 'border-ok': 'border',
+ 'border-info': 'border',
+ 'border-unknown': 'border',
+ 'text-placeholder': 'placeholder',
+ 'text-onPrimary': 'text-primary-button',
+ 'text-critical': 'text',
+ 'text-warning': 'text',
+ 'text-ok': 'text',
+ 'text-info': 'text',
+ 'text-unknown': 'text',
+ 'text-onSelectedStrong': 'text-primary-button',
+ 'text-onSelected': 'text',
+ 'text-heading-default': 'text-strong',
+ 'text-onStrong-default': 'text-primary-button',
+ 'text-onCritical-default': 'text',
+ 'text-onCritical-strong': 'text-strong',
+ 'text-onWarning-default': 'text',
+ 'text-onWarning-strong': 'text-strong',
+ 'text-onOk-default': 'text',
+ 'text-onOk-strong': 'text-strong',
+ 'text-Info-default': 'text',
+ 'text-Info-strong': 'text-strong',
+ 'text-onUnknown-default': 'text',
+ 'text-onUnknown-strong': 'text-strong',
+ 'text-primary': {},
+ 'icon-primary': 'brand',
+ 'icon-default': 'text',
+ 'icon-critical': 'status-critical',
+ 'icon-warning': 'status-warning',
+ 'icon-ok': 'status-ok',
+ 'icon-info': 'text',
+ 'icon-unknown': 'status-unknown',
+ 'icon-onPrimary': 'text-primary-button',
+ 'icon-onSelectedStrong': 'text-primary-button',
+ 'icon-onSelected': 'icon-default',
+ 'foreground-primary': 'brand',
+ 'foreground-critical': 'status-critical',
+ 'foreground-warning': 'status-warning',
+ 'foreground-unknown': 'status-unknown',
+};
-export const refresh = buildTheme({
- light: refreshLight,
- dark: refreshDark,
- small: refreshSmall,
- large: refreshLarge,
- elevationlight: refreshElevationLight,
- elevationdark: refreshElevationDark,
- global: refreshGlobal,
- components: refreshComponents,
- refresh: true,
-});
+const v5 = {
+ ...hpe,
+ global: {
+ ...hpe.global,
+ colors: {
+ ...hpe.global.colors,
+ ...newColors,
+ },
+ },
+};
export const themes = {
- local: current,
- v3: old,
- refresh,
+ next: current,
+ v5,
};
diff --git a/yarn.lock b/yarn.lock
index 9a99afd348..1f6250962a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -243,9 +243,9 @@
throat "5.0.0"
"@babel/cli@^7.19.3":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.25.9.tgz#51036166fd0e9cfb26eee1b9ddc264a0d6d5f843"
- integrity sha512-I+02IfrTiSanpxJBlZQYb18qCxB6c2Ih371cVpfgIrPQrjAYkf45XxomTJOG8JBWX5GY35/+TmhCMdJ4ZPkL8Q==
+ version "7.26.4"
+ resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.26.4.tgz#4101ff8ee5de8447a6c395397a97921056411d20"
+ integrity sha512-+mORf3ezU3p3qr+82WvJSnQNE1GAYeoCfEv4fik6B5/2cvKZ75AX8oawWQdXtM9MmndooQj15Jr9kelRFWsuRw==
dependencies:
"@jridgewell/trace-mapping" "^0.3.25"
commander "^6.2.0"
@@ -258,7 +258,7 @@
"@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
chokidar "^3.6.0"
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2":
version "7.26.2"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
@@ -268,9 +268,9 @@
picocolors "^1.0.0"
"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.9", "@babel/compat-data@^7.26.0":
- version "7.26.2"
- resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e"
- integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.3.tgz#99488264a56b2aded63983abd6a417f03b92ed02"
+ integrity sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==
"@babel/core@^7.1.0", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.18.9", "@babel/core@^7.20.5", "@babel/core@^7.23.2", "@babel/core@^7.23.9", "@babel/core@^7.26.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
version "7.26.0"
@@ -302,13 +302,13 @@
eslint-visitor-keys "^2.1.0"
semver "^6.3.1"
-"@babel/generator@^7.25.9", "@babel/generator@^7.26.0", "@babel/generator@^7.7.2":
- version "7.26.2"
- resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
- integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
+"@babel/generator@^7.26.0", "@babel/generator@^7.26.3", "@babel/generator@^7.7.2":
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.3.tgz#ab8d4360544a425c90c248df7059881f4b2ce019"
+ integrity sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==
dependencies:
- "@babel/parser" "^7.26.2"
- "@babel/types" "^7.26.0"
+ "@babel/parser" "^7.26.3"
+ "@babel/types" "^7.26.3"
"@jridgewell/gen-mapping" "^0.3.5"
"@jridgewell/trace-mapping" "^0.3.25"
jsesc "^3.0.2"
@@ -320,14 +320,6 @@
dependencies:
"@babel/types" "^7.25.9"
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.25.9":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz#f41752fe772a578e67286e6779a68a5a92de1ee9"
- integrity sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==
- dependencies:
- "@babel/traverse" "^7.25.9"
- "@babel/types" "^7.25.9"
-
"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9":
version "7.25.9"
resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875"
@@ -353,12 +345,12 @@
semver "^6.3.1"
"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz#3e8999db94728ad2b2458d7a470e7770b7764e26"
- integrity sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+ integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
dependencies:
"@babel/helper-annotate-as-pure" "^7.25.9"
- regexpu-core "^6.1.1"
+ regexpu-core "^6.2.0"
semver "^6.3.1"
"@babel/helper-define-polyfill-provider@^0.4.4":
@@ -449,14 +441,6 @@
"@babel/helper-optimise-call-expression" "^7.25.9"
"@babel/traverse" "^7.25.9"
-"@babel/helper-simple-access@^7.25.9":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz#6d51783299884a2c74618d6ef0f86820ec2e7739"
- integrity sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==
- dependencies:
- "@babel/traverse" "^7.25.9"
- "@babel/types" "^7.25.9"
-
"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
version "7.25.9"
resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
@@ -509,12 +493,12 @@
regenerator-runtime "^0.14.0"
v8flags "^3.1.1"
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2":
- version "7.26.2"
- resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
- integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
+ integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
dependencies:
- "@babel/types" "^7.26.0"
+ "@babel/types" "^7.26.3"
"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
version "7.25.9"
@@ -845,11 +829,10 @@
"@babel/helper-plugin-utils" "^7.25.9"
"@babel/plugin-transform-exponentiation-operator@^7.22.5", "@babel/plugin-transform-exponentiation-operator@^7.25.9":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz#ece47b70d236c1d99c263a1e22b62dc20a4c8b0f"
- integrity sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+ integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
dependencies:
- "@babel/helper-builder-binary-assignment-operator-visitor" "^7.25.9"
"@babel/helper-plugin-utils" "^7.25.9"
"@babel/plugin-transform-export-namespace-from@^7.25.9":
@@ -921,13 +904,12 @@
"@babel/helper-plugin-utils" "^7.25.9"
"@babel/plugin-transform-modules-commonjs@^7.25.9":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz#d165c8c569a080baf5467bda88df6425fc060686"
- integrity sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+ integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
dependencies:
- "@babel/helper-module-transforms" "^7.25.9"
+ "@babel/helper-module-transforms" "^7.26.0"
"@babel/helper-plugin-utils" "^7.25.9"
- "@babel/helper-simple-access" "^7.25.9"
"@babel/plugin-transform-modules-systemjs@^7.25.9":
version "7.25.9"
@@ -1282,9 +1264,9 @@
esutils "^2.0.2"
"@babel/preset-react@^7.18.6", "@babel/preset-react@^7.22.15":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.25.9.tgz#5f473035dc2094bcfdbc7392d0766bd42dce173e"
- integrity sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.26.3.tgz#7c5e028d623b4683c1f83a0bd4713b9100560caa"
+ integrity sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==
dependencies:
"@babel/helper-plugin-utils" "^7.25.9"
"@babel/helper-validator-option" "^7.25.9"
@@ -1321,22 +1303,22 @@
"@babel/types" "^7.25.9"
"@babel/traverse@^7.18.9", "@babel/traverse@^7.25.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
- version "7.25.9"
- resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
- integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+ version "7.26.4"
+ resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.4.tgz#ac3a2a84b908dde6d463c3bfa2c5fdc1653574bd"
+ integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
dependencies:
- "@babel/code-frame" "^7.25.9"
- "@babel/generator" "^7.25.9"
- "@babel/parser" "^7.25.9"
+ "@babel/code-frame" "^7.26.2"
+ "@babel/generator" "^7.26.3"
+ "@babel/parser" "^7.26.3"
"@babel/template" "^7.25.9"
- "@babel/types" "^7.25.9"
+ "@babel/types" "^7.26.3"
debug "^4.3.1"
globals "^11.1.0"
-"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
- version "7.26.0"
- resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
- integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+ version "7.26.3"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
+ integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
dependencies:
"@babel/helper-string-parser" "^7.25.9"
"@babel/helper-validator-identifier" "^7.25.9"
@@ -2629,9 +2611,9 @@
integrity sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==
"@next/mdx@^14.1.4":
- version "14.2.18"
- resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-14.2.18.tgz#d3c676975e430c6ca829a786fa78f56e57526cd2"
- integrity sha512-dAsPh0ek4H6ifW1D5zk3QLDeUYb6Q+UsQVt2mhPXzGD2MLxViT6LpsS0CnIB5op6oVGrnFwqeRjYFV8vZwEQ+g==
+ version "14.2.20"
+ resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-14.2.20.tgz#ce9738120a97feebdafbf3864fdc336ae5acb66b"
+ integrity sha512-DBO56cbTq5WnW8USiFQY/uwdz4/8/rzxRBhJYMGPUOs2Kex1ZmooMcgM+5yjEGLr3zI3miVG/G+U1HeAyW0V/g==
dependencies:
source-map "^0.7.0"
@@ -3311,9 +3293,9 @@
integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
"@storybook/icons@^1.2.12":
- version "1.2.12"
- resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.2.12.tgz#3e4c939113b67df7ab17b78f805dbb57f4acf0db"
- integrity sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.3.0.tgz#a5c1460fb15a7260e0b638ab86163f7347a0061e"
+ integrity sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==
"@storybook/instrumenter@8.4.6":
version "8.4.6"
@@ -3900,9 +3882,9 @@
integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
"@types/prop-types@*":
- version "15.7.13"
- resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
- integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
+ version "15.7.14"
+ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
+ integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
"@types/qs@*":
version "6.9.17"
@@ -3915,16 +3897,16 @@
integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
"@types/react-dom@^18.2.19", "@types/react-dom@^18.2.22":
- version "18.3.1"
- resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
- integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
+ version "18.3.2"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.2.tgz#b58a9520f5f317a00bbda0271502889b71c345f0"
+ integrity sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==
dependencies:
- "@types/react" "*"
+ "@types/react" "^18"
-"@types/react@*", "@types/react@^18.2.56", "@types/react@^18.2.66":
- version "18.3.12"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"
- integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
+"@types/react@^18", "@types/react@^18.2.56", "@types/react@^18.2.66":
+ version "18.3.14"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.14.tgz#7ce43bbca0e15e1c4f67ad33ea3f83d75aa6756b"
+ integrity sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==
dependencies:
"@types/prop-types" "*"
csstype "^3.0.2"
@@ -4320,9 +4302,9 @@
integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
"@zip.js/zip.js@^2.7.44":
- version "2.7.53"
- resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.53.tgz#bf88e90d8eed562182c01339643bc405446b0578"
- integrity sha512-G6Bl5wN9EXXVaTUIox71vIX5Z454zEBe+akKpV4m1tUboIctT5h7ID3QXCJd/Lfy2rSvmkTmZIucf1jGRR4f5A==
+ version "2.7.54"
+ resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.54.tgz#ef0f46644b1a084155473b0d7710c80a892c2687"
+ integrity sha512-qMrJVg2hoEsZJjMJez9yI2+nZlBUxgYzGV3mqcb2B/6T1ihXp0fWBDYlVHlHquuorgNUQP5a8qSmX6HF5rFJNg==
abab@^2.0.3, abab@^2.0.5, abab@^2.0.6:
version "2.0.6"
@@ -5157,16 +5139,23 @@ bytes@3.1.2:
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
-call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
- version "1.0.7"
- resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
- integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+call-bind-apply-helpers@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.0.tgz#33127b42608972f76812a501d69db5d8ce404979"
+ integrity sha512-CCKAP2tkPau7D3GE8+V8R6sQubA9R5foIzGp+85EXCVSCivuxBNAWqcpn72PKYiIcqoViv/kcUDpaEIMBVi1lQ==
dependencies:
- es-define-property "^1.0.0"
es-errors "^1.3.0"
function-bind "^1.1.2"
+
+call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7, call-bind@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+ integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+ dependencies:
+ call-bind-apply-helpers "^1.0.0"
+ es-define-property "^1.0.0"
get-intrinsic "^1.2.4"
- set-function-length "^1.2.1"
+ set-function-length "^1.2.2"
callsite@^1.0.0:
version "1.0.0"
@@ -5872,10 +5861,10 @@ debug@2.6.9:
dependencies:
ms "2.0.0"
-debug@4, debug@4.3.7, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5:
- version "4.3.7"
- resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
- integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5:
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+ integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
dependencies:
ms "^2.1.3"
@@ -5886,6 +5875,13 @@ debug@4.3.1:
dependencies:
ms "2.1.2"
+debug@4.3.7:
+ version "4.3.7"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+ integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+ dependencies:
+ ms "^2.1.3"
+
debug@^3.2.7:
version "3.2.7"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -6269,6 +6265,15 @@ dotenv@^8.2.0:
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
+dunder-proto@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.0.tgz#c2fce098b3c8f8899554905f4377b6d85dabaa80"
+ integrity sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==
+ dependencies:
+ call-bind-apply-helpers "^1.0.0"
+ es-errors "^1.3.0"
+ gopd "^1.2.0"
+
duplexer@~0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -6464,12 +6469,10 @@ es-array-method-boxes-properly@^1.0.0:
resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
-es-define-property@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
- integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
- dependencies:
- get-intrinsic "^1.2.4"
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+ integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
es-errors@^1.2.1, es-errors@^1.3.0:
version "1.3.0"
@@ -7145,9 +7148,9 @@ expect@^29.0.0, expect@^29.7.0:
jest-util "^29.7.0"
express@^4.17.3:
- version "4.21.1"
- resolved "https://registry.yarnpkg.com/express/-/express-4.21.1.tgz#9dae5dda832f16b4eec941a4e44aa89ec481b281"
- integrity sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==
+ version "4.21.2"
+ resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+ integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
dependencies:
accepts "~1.3.8"
array-flatten "1.1.1"
@@ -7168,7 +7171,7 @@ express@^4.17.3:
methods "~1.1.2"
on-finished "2.4.1"
parseurl "~1.3.3"
- path-to-regexp "0.1.10"
+ path-to-regexp "0.1.12"
proxy-addr "~2.0.7"
qs "6.13.0"
range-parser "~1.2.1"
@@ -7578,15 +7581,18 @@ get-func-name@^2.0.0, get-func-name@^2.0.2:
integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
- integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.5.tgz#dfe7dd1b30761b464fe51bf4bb00ac7c37b681e7"
+ integrity sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==
dependencies:
+ call-bind-apply-helpers "^1.0.0"
+ dunder-proto "^1.0.0"
+ es-define-property "^1.0.1"
es-errors "^1.3.0"
function-bind "^1.1.2"
- has-proto "^1.0.1"
- has-symbols "^1.0.3"
- hasown "^2.0.0"
+ gopd "^1.2.0"
+ has-symbols "^1.1.0"
+ hasown "^2.0.2"
get-nonce@^1.0.0:
version "1.0.1"
@@ -11518,10 +11524,10 @@ path-scurry@^1.11.1:
lru-cache "^10.2.0"
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
-path-to-regexp@0.1.10:
- version "0.1.10"
- resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
- integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+path-to-regexp@0.1.12:
+ version "0.1.12"
+ resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+ integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
path-type@^4.0.0:
version "4.0.0"
@@ -12261,7 +12267,7 @@ reflect.getprototypeof@^1.0.4, reflect.getprototypeof@^1.0.6:
resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.7.tgz#04311b33a1b713ca5eb7b5aed9950a86481858e5"
integrity sha512-bMvFGIUKlc/eSfXNX+aZ+EL95/EgZzuwA0OBPTbZZDEJw/0AkentjMuM1oiRfwHrshqk4RzdgiTg5CcDalXN5g==
dependencies:
- call-bind "^1.0.7"
+ call-bind "^1.0.8"
define-properties "^1.2.1"
es-abstract "^1.23.5"
es-errors "^1.3.0"
@@ -12765,7 +12771,7 @@ set-cookie-parser@^2.5.1:
resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
-set-function-length@^1.2.1:
+set-function-length@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
@@ -13394,9 +13400,9 @@ symbol-tree@^3.2.4:
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
tailwindcss@^3.4.3:
- version "3.4.15"
- resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.15.tgz#04808bf4bf1424b105047d19e7d4bfab368044a9"
- integrity sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==
+ version "3.4.16"
+ resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.16.tgz#35a7c3030844d6000fc271878db4096b6a8d2ec9"
+ integrity sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==
dependencies:
"@alloc/quick-lru" "^5.2.0"
arg "^5.0.2"
@@ -13407,7 +13413,7 @@ tailwindcss@^3.4.3:
glob-parent "^6.0.2"
is-glob "^4.0.3"
jiti "^1.21.6"
- lilconfig "^2.1.0"
+ lilconfig "^3.1.3"
micromatch "^4.0.8"
normalize-path "^3.0.0"
object-hash "^3.0.0"
@@ -13451,9 +13457,9 @@ terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.10:
terser "^5.26.0"
terser@^5.10.0, terser@^5.26.0:
- version "5.36.0"
- resolved "https://registry.yarnpkg.com/terser/-/terser-5.36.0.tgz#8b0dbed459ac40ff7b4c9fd5a3a2029de105180e"
- integrity sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==
+ version "5.37.0"
+ resolved "https://registry.yarnpkg.com/terser/-/terser-5.37.0.tgz#38aa66d1cfc43d0638fab54e43ff8a4f72a21ba3"
+ integrity sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==
dependencies:
"@jridgewell/source-map" "^0.3.3"
acorn "^8.8.2"