othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes for jsx live blocks

Browse Source
This commit is contained in:
Erik Ziegler 2021-07-14 00:15:02 +02:00
parent 09469e6ac5
commit 7a79e42929
12 changed files with 657 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
platform/docs/docs/component-library/components/Button.mdx
View File

@ -18,8 +18,8 @@ import { Button } from '@ohif/ui';
## Outlined Buttons ## Outlined Buttons
````jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Button variant="outlined" className="m-1"> <Button variant="outlined" className="m-1">
Default Default
</Button> </Button>
@ -32,13 +32,13 @@ import { Button } from '@ohif/ui';
<Button variant="outlined" color="white" className="m-1"> <Button variant="outlined" color="white" className="m-1">
White White
</Button> </Button>
</div> </div>
``` ```
## Contained Buttons ## Contained Buttons
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Button variant="contained" className="m-1"> <Button variant="contained" className="m-1">
Default Default
</Button> </Button>
@ -51,13 +51,13 @@ import { Button } from '@ohif/ui';
<Button variant="contained" color="white" className="m-1"> <Button variant="contained" color="white" className="m-1">
White White
</Button> </Button>
</div> </div>
``` ```
## Text Buttons ## Text Buttons
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Button variant="text" className="m-1"> <Button variant="text" className="m-1">
Default Default
</Button> </Button>
@ -70,13 +70,13 @@ import { Button } from '@ohif/ui';
<Button variant="text" color="white" className="m-1"> <Button variant="text" color="white" className="m-1">
White White
</Button> </Button>
</div> </div>
``` ```
## Rounded Buttons ## Rounded Buttons
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<div className="mb-2"> <div className="mb-2">
<Button variant="contained" rounded="none" className="m-1"> <Button variant="contained" rounded="none" className="m-1">
Non Rounded Non Rounded
@ -95,20 +95,10 @@ import { Button } from '@ohif/ui';
</Button> </Button>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Button <Button variant="contained" rounded="none" color="primary" className="m-1">
variant="contained"
rounded="none"
color="primary"
className="m-1"
>
Non Rounded Non Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="small" color="primary" className="m-1">
variant="contained"
rounded="small"
color="primary"
className="m-1"
>
Small Rounded Small Rounded
</Button> </Button>
<Button <Button
@ -119,20 +109,10 @@ import { Button } from '@ohif/ui';
> >
Medium Rounded Medium Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="large" color="primary" className="m-1">
variant="contained"
rounded="large"
color="primary"
className="m-1"
>
Large Rounded Large Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="full" color="primary" className="m-1">
variant="contained"
rounded="full"
color="primary"
className="m-1"
>
Full Rounded Full Rounded
</Button> </Button>
</div> </div>
@ -185,12 +165,7 @@ import { Button } from '@ohif/ui';
<Button variant="contained" rounded="small" color="white" className="m-1"> <Button variant="contained" rounded="small" color="white" className="m-1">
Small Rounded Small Rounded
</Button> </Button>
<Button <Button variant="contained" rounded="medium" color="white" className="m-1">
variant="contained"
rounded="medium"
color="white"
className="m-1"
>
Medium Rounded Medium Rounded
</Button> </Button>
<Button variant="contained" rounded="large" color="white" className="m-1"> <Button variant="contained" rounded="large" color="white" className="m-1">
@ -200,13 +175,13 @@ import { Button } from '@ohif/ui';
Full Rounded Full Rounded
</Button> </Button>
</div> </div>
</div> </div>
``` ```
## Sizes ## Sizes
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<div> <div>
<Button variant="contained" size="small" className="m-1"> <Button variant="contained" size="small" className="m-1">
Small Small
@ -219,91 +194,45 @@ import { Button } from '@ohif/ui';
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="primary" className="m-1">
variant="contained"
size="small"
color="primary"
className="m-1"
>
Small Small
</Button> </Button>
<Button <Button variant="contained" size="medium" color="primary" className="m-1">
variant="contained"
size="medium"
color="primary"
className="m-1"
>
Medium Medium
</Button> </Button>
<Button <Button variant="contained" size="large" color="primary" className="m-1">
variant="contained"
size="large"
color="primary"
className="m-1"
>
Large Large
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="secondary" className="m-1">
variant="contained"
size="small"
color="secondary"
className="m-1"
>
Small Small
</Button> </Button>
<Button <Button variant="contained" size="medium" color="secondary" className="m-1">
variant="contained"
size="medium"
color="secondary"
className="m-1"
>
Medium Medium
</Button> </Button>
<Button <Button variant="contained" size="large" color="secondary" className="m-1">
variant="contained"
size="large"
color="secondary"
className="m-1"
>
Large Large
</Button> </Button>
</div> </div>
<div> <div>
<Button <Button variant="contained" size="small" color="white" className="m-1">
variant="contained"
size="small"
color="white"
className="m-1"
>
Small Small
</Button> </Button>
<Button <Button variant="contained" size="medium" color="white" className="m-1">
variant="contained"
size="medium"
color="white"
className="m-1"
>
Medium Medium
</Button> </Button>
<Button <Button variant="contained" size="large" color="white" className="m-1">
variant="contained"
size="large"
color="white"
className="m-1"
>
Large Large
</Button> </Button>
</div> </div>
</div> </div>
``` ```
## Buttons with icons ## Buttons with icons
```jsx live ```jsx live
<div className="p-4 flex"> <div className="p-4 flex">
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
@ -329,7 +258,7 @@ import { Button } from '@ohif/ui';
> >
Download Download
</Button> </Button>
</div> </div>
``` ```
## Icon Buttons ## Icon Buttons
@ -338,59 +267,59 @@ Icon buttons are generally used in toolbars.
```javascript ```javascript
import { IconButton } from '@ohif/ui'; import { IconButton } from '@ohif/ui';
````
````jsx live
<div className="p-4 flex flex-col items-center">
<div className="">
<IconButton className="m-2">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="outlined">
<Icon name="settings" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="primary">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="text">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="outlined">
<Icon name="launch-arrow" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="secondary">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="text">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="outlined">
<Icon name="cancel" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="white">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text" color="white">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" variant="outlined" color="white">
<Icon name="cancel" />
</IconButton>
</div>
</div>
``` ```
```jsx live ```jsx live
<div className="p-4"> <div className="p-4 flex flex-col items-center">
<div className="">
<IconButton className="m-2">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="outlined">
<Icon name="settings" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="primary">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="text">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="outlined">
<Icon name="launch-arrow" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="secondary">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="text">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="outlined">
<Icon name="cancel" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="white">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text" color="white">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" variant="outlined" color="white">
<Icon name="cancel" />
</IconButton>
</div>
</div>
```
```jsx live
<div className="p-4">
<div className=""> <div className="">
<IconButton className="m-2"> <IconButton className="m-2">
<Icon name="settings" /> <Icon name="settings" />
@ -435,7 +364,7 @@ import { IconButton } from '@ohif/ui';
<Icon name="cancel" /> <Icon name="cancel" />
</IconButton> </IconButton>
</div> </div>
</div> </div>
``` ```
## Properties ## Properties

18
platform/docs/docs/component-library/components/ButtonGroup.mdx
View File

@ -18,8 +18,8 @@ import { ButtonGroup } from '@ohif/ui';
## Basic button group ## Basic button group
````jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<ButtonGroup color="primary" className="m-2"> <ButtonGroup color="primary" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
@ -35,13 +35,13 @@ import { ButtonGroup } from '@ohif/ui';
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Group sizes and colorss ## Group sizes and colorss
```jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<ButtonGroup color="default" size="small" className="m-2"> <ButtonGroup color="default" size="small" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
@ -57,13 +57,13 @@ import { ButtonGroup } from '@ohif/ui';
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Group orientation ## Group orientation
```jsx live ```jsx live
<div className="p-4 flex flex-row justify-center"> <div className="p-4 flex flex-row justify-center">
<ButtonGroup orientation="vertical" color="primary" className="m-2"> <ButtonGroup orientation="vertical" color="primary" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
@ -89,20 +89,20 @@ import { ButtonGroup } from '@ohif/ui';
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Tree</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Split Button ## Split Button
```jsx live ```jsx live
<div className="p-4 flex flex-col items-center"> <div className="p-4 flex flex-col items-center">
<ButtonGroup color="primary" className="m-2"> <ButtonGroup color="primary" className="m-2">
<Button>Options</Button> <Button>Options</Button>
<IconButton className="mr-2"> <IconButton className="mr-2">
<Icon name="settings" /> <Icon name="settings" />
</IconButton> </IconButton>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
## Properties ## Properties

4
platform/docs/docs/component-library/components/DateRange.mdx
View File

@ -21,8 +21,7 @@ import { DateRange } from '@ohif/ui';
## Date Range ## Date Range
```jsx live ```jsx live
{ function() {
() => {
const [dates, setDates] = useState({ const [dates, setDates] = useState({
startDate: null, startDate: null,
endDate: null, endDate: null,
@ -38,7 +37,6 @@ import { DateRange } from '@ohif/ui';
/> />
</div> </div>
); );
};
} }
``` ```

8
platform/docs/docs/component-library/components/ErrorBoundary.mdx
View File

@ -18,10 +18,10 @@ import { ErrorBoundary } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<ErrorBoundary context="Somewhere"> <ErrorBoundary context="Somewhere">
{() => { function() {
throw new Error('Error!'); throw new Error('Error!');
return <p></p>; return <p></p>;
}} }}
@ -32,7 +32,7 @@ import { ErrorBoundary } from '@ohif/ui';
## Custom error fallback ## Custom error fallback
```jsx live ```jsx live
{() => { function() {
const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => { const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
return ( return (
<div> <div>
@ -43,7 +43,7 @@ import { ErrorBoundary } from '@ohif/ui';
return ( return (
<div className="p-4"> <div className="p-4">
<ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}> <ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
{() => { function() {
throw new Error('Error!'); throw new Error('Error!');
return <p></p>; return <p></p>;
}} }}

10
platform/docs/docs/component-library/components/MeasurementTable.mdx
View File

@ -18,8 +18,8 @@ import { MeasurementTable } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
{() => { function() {
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null); const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
const measurementTableData = { const measurementTableData = {
title: 'Measurements', title: 'Measurements',
@ -38,19 +38,19 @@ import { MeasurementTable } from '@ohif/ui';
<MeasurementTable {...measurementTableData} /> <MeasurementTable {...measurementTableData} />
</div> </div>
); );
}} }
``` ```
## Empty Data ## Empty Data
```jsx live ```jsx live
{() => { function() {
return ( return (
<div className="p-4 w-80"> <div className="p-4 w-80">
<MeasurementTable title="Measurements" /> <MeasurementTable title="Measurements" />
</div> </div>
); );
}} }
``` ```
## Properties ## Properties

12
platform/docs/docs/component-library/components/Select.mdx
View File

@ -16,8 +16,8 @@ import { Select } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56"> <div className="w-56">
<Select <Select
options={[ options={[
@ -28,13 +28,13 @@ import { Select } from '@ohif/ui';
]} ]}
/> />
</div> </div>
</div> </div>
``` ```
## Disabled ## Disabled
```jsx live ```jsx live
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56"> <div className="w-56">
<Select <Select
isDisabled isDisabled
@ -46,7 +46,7 @@ import { Select } from '@ohif/ui';
]} ]}
/> />
</div> </div>
</div> </div>
``` ```
## No Options ## No Options
@ -55,7 +55,7 @@ import { Select } from '@ohif/ui';
<div className="flex flex-col flex-1 p-4 items-center"> <div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56"> <div className="w-56">
<Select <Select
noOptionsMessage={() => { noOptionsMessage=function() {
'No Options'; 'No Options';
}} }}
options={[]} options={[]}

62
platform/docs/docs/component-library/components/SidePanel.mdx
View File

@ -16,59 +16,69 @@ import { SidePanel } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div <div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
style={{ height: '500px' }} style={{ height: '500px' }}
> >
<SidePanel <SidePanel
side="left" side="left"
childComponents={{ childComponents={{
iconName: "group-layers", iconName: 'group-layers',
iconLabel: "Studies", iconLabel: 'Studies',
name: "studies", name: 'studies',
label: "Studies", label: 'Studies',
content: <div className="flex justify-center text-white p-2">panel content</div>, content: (
<div className="flex justify-center text-white p-2">panel content</div>
),
}} }}
/> />
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white"> <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
CONTENT CONTENT
</div> </div>
</div> </div>
``` ```
## Multiple panels ## Multiple panels
```jsx live ```jsx live
<div <div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
style={{ height: '500px' }} style={{ height: '500px' }}
> >
<SidePanel <SidePanel
side="left" side="left"
childComponents={[{ childComponents={[
iconName: "group-layers", {
iconLabel: "Studies", iconName: 'group-layers',
name: "studies", iconLabel: 'Studies',
label: "Studies", name: 'studies',
content: <div className="flex justify-center text-white p-2">studies panel content</div>, label: 'Studies',
content: (
<div className="flex justify-center text-white p-2">
studies panel content
</div>
),
}, },
{ {
iconName: "list-bullets", iconName: 'list-bullets',
iconLabel: "Measure", iconLabel: 'Measure',
name: "measurements", name: 'measurements',
label: "Measurements", label: 'Measurements',
content: <div className="flex justify-center text-white p-2">measure panel content</div>, content: (
}]} <div className="flex justify-center text-white p-2">
measure panel content
</div>
),
},
]}
/> />
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white"> <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
CONTENT CONTENT
</div> </div>
</div> </div>
``` ```
## Properties ## Properties
<Props of={SidePanel} /> <Props of={SidePanel} />

15
platform/docs/docs/component-library/components/ToolbarButton.mdx
View File

@ -4,7 +4,7 @@ menu: General
route: components/toolbarButton route: components/toolbarButton
--- ---
import { useState } from 'react'; import { useState, useCallback } from 'react';
import { ToolbarButton } from '@ohif/ui'; import { ToolbarButton } from '@ohif/ui';
@ -19,17 +19,18 @@ import { ToolbarButton } from '@ohif/ui';
``` ```
```jsx live ```jsx live
function ToolbarButtonExample(props) { function() {
// const [isActive, setIsActive] = useState(false); const [isActive, setIsActive] = useState(false);
const tool = { const tool = {
id: 'Zoom', id: 'Zoom',
label: 'Zoom', label: 'Zoom',
icon: 'tool-zoom', icon: 'tool-zoom',
type: null, type: null,
commandName: 'setToolActive', /*commandName: 'setToolActive',
commandOptions: { toolName: 'Zoom' }, commandOptions: { toolName: 'Zoom' },*/
//onClick: () => setIsActive(true), onInteraction: () => setIsActive(!isActive),
isActive: true, isActive,
}; };
return ( return (

10
platform/docs/docs/component-library/components/Typography.mdx
View File

@ -19,8 +19,8 @@ import { Typography } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Typography variant="h1"> <Typography variant="h1">
h1. The five boxing wizards jump quickly. h1. The five boxing wizards jump quickly.
</Typography> </Typography>
@ -45,7 +45,7 @@ import { Typography } from '@ohif/ui';
<Typography variant="body"> <Typography variant="body">
body. The five boxing wizards jump quickly. body. The five boxing wizards jump quickly.
</Typography> </Typography>
</div> </div>
``` ```
## Changing the HTML element ## Changing the HTML element
@ -56,11 +56,11 @@ a semantic element. The style of a Typography is independent of the semantic
element. element.
```jsx live ```jsx live
<div className="p-4"> <div className="p-4">
<Typography variant="h1" component="h2"> <Typography variant="h1" component="h2">
This is a h2 using the h1 styles. This is a h2 using the h1 styles.
</Typography> </Typography>
</div> </div>
``` ```
## Properties ## Properties

20
platform/docs/docs/component-library/components/ViewportActionBar.mdx
View File

@ -18,8 +18,8 @@ import { ViewportActionBar } from '@ohif/ui';
## Basic usage ## Basic usage
````jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
@ -43,11 +43,11 @@ import { ViewportActionBar } from '@ohif/ui';
}, },
}} }}
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
@ -71,11 +71,11 @@ import { ViewportActionBar } from '@ohif/ui';
}, },
}} }}
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
@ -99,10 +99,11 @@ import { ViewportActionBar } from '@ohif/ui';
}, },
}} }}
/> />
</div> </div>
``` ```
```jsx live ```jsx live
<div className="p-4 h-64"> <div className="p-4 h-64">
<ViewportActionBar <ViewportActionBar
onSeriesChange={direction => alert(`Series ${direction}`)} onSeriesChange={direction => alert(`Series ${direction}`)}
studyData={{ studyData={{
@ -126,9 +127,8 @@ import { ViewportActionBar } from '@ohif/ui';
}, },
}} }}
/> />
</div> </div>
``` ```
</>
## Properties ## Properties

6
platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
View File

@ -22,8 +22,8 @@ component across all application.
## Sample ## Sample
````jsx live ```jsx live
{() => { function() {
const ViewportNotification = ({ hide }) => { const ViewportNotification = ({ hide }) => {
return ( return (
<Notification <Notification
@ -88,7 +88,7 @@ component across all application.
## Example using UIViewportDialogService ## Example using UIViewportDialogService
```jsx live ```jsx live
{() => { function() {
const ViewportNotification = ({ hide }) => { const ViewportNotification = ({ hide }) => {
return ( return (
<Notification <Notification

8
platform/docs/docs/component-library/pages/Colors.mdx
View File

@ -28,14 +28,14 @@ details about color classes.
## Text ## Text
````jsx live ```jsx live
<div className="p-8"> <div className="p-8">
<p className="text-common-bright">text-common-bright</p> <p className="text-common-bright">text-common-bright</p>
<p className="text-common-light">text-common-light</p> <p className="text-common-light">text-common-light</p>
<p className="text-common-main">text-common-main</p> <p className="text-common-main">text-common-main</p>
<p className="text-common-dark">text-common-dark</p> <p className="text-common-dark">text-common-dark</p>
<p className="text-common-active">text-common-active</p> <p className="text-common-active">text-common-active</p>
</div> </div>
``` ```
## Background ## Background
@ -79,4 +79,4 @@ common: {
dark: '#726f7e', dark: '#726f7e',
active: '#2c3074', active: '#2c3074',
}, },
```` ```