Merge pull request #205 from balena-io-modules/better-theme-integration

Better design token integration in the theme

https://balena.fibery.io/Work/Project/Better-theme-integration-in-the-dashboard-1076

Author: drskullster

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-	"*.{ts,tsx}": ["balena-lint --fix"]
+	"src/**/*.{ts,tsx}": ["balena-lint --fix"]
 }

.storybook/global.css

@@ -13,7 +13,7 @@ html {
 
 html,
 body {
-    font-family: var(--typography-fontfamily-body);
+    font-family: var(--typography-fontFamily-body);
     height: 100%;
     margin: 0;
     padding: 0;

.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming/create';
+import { create } from '@storybook/theming';
 import { color, typography } from '@balena/design-tokens';
 
 import '@balena/design-tokens/build/css/tokens.css';
@@ -12,7 +12,7 @@ export const balenaTheme = create({
 	brandImage: '/images/logo.svg',
 	brandTarget: '_blank',
 
-	fontBase: typography.fontfamily.body.value,
+	fontBase: typography.fontFamily.body.value,
 
 	textColor: color.text.value,
 

package-lock.json

@@ -10,7 +10,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@balena/design-tokens": "^0.11.0",
+    "@balena/design-tokens": "^1.0.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.10.6",

package.json

@@ -47,7 +47,7 @@ export const AnimatedText = ({
 	if (animationType === 'grow') {
 		return (
 			<Grow in={showSlide} timeout={{ enter: 800, exit: 1200 }}>
-				<Typography variant="inherit" component="div" color="hubYellow.main">
+				<Typography variant="inherit" component="div">
 					{words[wordIndex]}
 				</Typography>
 			</Grow>
@@ -56,7 +56,7 @@ export const AnimatedText = ({
 	if (animationType === 'zoom') {
 		return (
 			<Zoom in={showSlide} timeout={{ enter: 800, exit: 1200 }}>
-				<Typography variant="inherit" component="div" color="hubYellow.main">
+				<Typography variant="inherit" component="div">
 					{words[wordIndex]}
 				</Typography>
 			</Zoom>
@@ -69,7 +69,7 @@ export const AnimatedText = ({
 				in={showSlide}
 				timeout={{ enter: 800, exit: 1200 }}
 			>
-				<Typography variant="inherit" component="div" color="hubYellow.main">
+				<Typography variant="inherit" component="div">
 					{words[wordIndex]}
 				</Typography>
 			</Slide>
@@ -78,7 +78,7 @@ export const AnimatedText = ({
 	if (animationType === 'fade') {
 		return (
 			<Fade in={showSlide} timeout={{ enter: 800, exit: 1200 }}>
-				<Typography variant="inherit" component="div" color="hubYellow.main">
+				<Typography variant="inherit" component="div">
 					{words[wordIndex]}
 				</Typography>
 			</Fade>
@@ -93,7 +93,6 @@ export const AnimatedText = ({
 			<Typography
 				variant="inherit"
 				component="div"
-				color="hubYellow.main"
 				sx={{ overflow: 'hidden', whiteSpace: 'nowrap' }}
 			>
 				{words[wordIndex]}

src/components/AnimatedText/index.tsx

@@ -11,11 +11,11 @@ import {
 } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
-import { shape } from '@balena/design-tokens';
 import { IconButtonWithTracking } from '../IconButtonWithTracking';
 import { useEffect } from 'react';
 import { useAnalyticsContext } from '../../contexts/AnalyticsContext';
 import type { SnackbarCloseReason } from '@mui/material/Snackbar/Snackbar';
+import { token } from '../../utils/token';
 
 export type AnnouncementCloseReason =
 	| SnackbarCloseReason
@@ -41,7 +41,7 @@ const AnnouncementRoot = styled(Box, {
 })(({ theme }) => ({
 	alignItems: 'center',
 	backgroundColor: 'white',
-	borderRadius: shape.border_radius.md.value + 'px',
+	borderRadius: token('shape.borderRadius.md'),
 	boxShadow: '0px 0px 8px 0px rgba(35, 68, 94, 0.3)', // TODO add a design token for box shadows
 	display: 'flex',
 	gap: theme.spacing(3),
@@ -156,7 +156,7 @@ export const Announcement = React.forwardRef<HTMLDivElement, AnnouncementProps>(
 								onClick={(e) => {
 									onClose?.(e, 'closeButtonClick');
 								}}
-								sx={(theme) => ({ ml: 'auto', my: `-${theme.spacing(1)}` })}
+								sx={{ ml: 'auto', my: -1 }}
 							>
 								<FontAwesomeIcon icon={faClose} />
 							</IconButtonWithTracking>

src/components/Announcement/index.tsx

@@ -4,7 +4,7 @@ import { Box, styled, useThemeProps } from '@mui/material';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Severity } from '../../theme';
 import { severityIcons } from '../../theme';
-import { color } from '@balena/design-tokens';
+import { token } from '../../utils/token';
 
 export interface CalloutProps {
 	children: React.ReactNode;
@@ -24,24 +24,24 @@ const CalloutRoot = styled(Box, {
 	borderLeft: 'solid 3px',
 	borderLeftColor: 'var(--callout-border-color)',
 	...(ownerState.variant === 'default' && {
-		backgroundColor: color.bg.value,
+		backgroundColor: token('color.bg'),
 	}),
 	...(ownerState.variant === 'subtle' && {
-		backgroundColor: color.bg.subtlest.value,
+		backgroundColor: token('color.bg.subtlest'),
 	}),
-	'--callout-border-color': color.border.info.value,
-	'--callout-icon-color': color.icon.info.value,
+	'--callout-border-color': token('color.border.info'),
+	'--callout-icon-color': token('color.icon.info'),
 	...(ownerState.severity === 'success' && {
-		'--callout-border-color': color.border.success.value,
-		'--callout-icon-color': color.icon.success.value,
+		'--callout-border-color': token('color.border.success'),
+		'--callout-icon-color': token('color.icon.success'),
 	}),
 	...(ownerState.severity === 'warning' && {
-		'--callout-border-color': color.border.warning.value,
-		'--callout-icon-color': color.icon.warning.value,
+		'--callout-border-color': token('color.border.warning'),
+		'--callout-icon-color': token('color.icon.warning'),
 	}),
 	...(ownerState.severity === 'danger' && {
-		'--callout-border-color': color.border.danger.value,
-		'--callout-icon-color': color.icon.danger.value,
+		'--callout-border-color': token('color.border.danger'),
+		'--callout-icon-color': token('color.icon.danger'),
 	}),
 }));
 

src/components/Callout/index.tsx

@@ -1,7 +1,7 @@
 import type { TypographyProps } from '@mui/material';
 import { Typography } from '@mui/material';
-import { color } from '@balena/design-tokens';
 import { forwardRef } from 'react';
+import { token } from '../../utils/token';
 
 /**
  * This component will display a text as code.
@@ -12,9 +12,9 @@ export const Code = forwardRef<TypographyProps['ref'], TypographyProps>(
 			<Typography
 				sx={[
 					{
-						background: color.bg.code.value,
-						color: color.text.code.value,
-						borderRadius: 1,
+						backgroundColor: token('color.bg.code'),
+						color: token('color.text.code'),
+						borderRadius: token('shape.borderRadius.sm'),
 						px: 1,
 						py: '2px',
 					},

src/components/Code/index.tsx

@@ -1,9 +1,9 @@
-import { color } from '@balena/design-tokens';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import { faCaretUp } from '@fortawesome/free-solid-svg-icons/faCaretUp';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Box, Button, Fade, Typography, Stack } from '@mui/material';
 import { useMemo, useState } from 'react';
+import { token } from '../../utils/token';
 
 export interface CollectionSummaryProps {
 	items: string[];
@@ -36,15 +36,17 @@ export const CollectionSummary = ({
 	return (
 		<Box>
 			{items.length === 1 ? (
-				<Typography color="text.secondary">{stringifyItems}</Typography>
+				<Typography color={token('color.text.subtle')}>
+					{stringifyItems}
+				</Typography>
 			) : (
 				<Stack alignItems="start">
 					<Button
 						onClick={() => {
 							setIsExpanded(!isExpanded);
 						}}
 						variant="text"
-						sx={{ color: color.text.subtle.value, minWidth: 'unset' }}
+						sx={{ color: token('color.text.subtle'), minWidth: 'unset' }}
 						endIcon={
 							isExpanded ? (
 								<FontAwesomeIcon icon={faCaretUp} />
@@ -58,7 +60,7 @@ export const CollectionSummary = ({
 					</Button>
 
 					<Fade in={isExpanded} appear={!isExpanded} unmountOnExit>
-						<Typography variant="bodySm" color="text.secondary">
+						<Typography variant="bodySm" color={token('color.text.subtle')}>
 							{stringifyItems}
 						</Typography>
 					</Fade>