Skip to content

Commit 4b8789a

Browse files
kmcfaulkmcfaul
committed
update docs tokens, fix docs build
1 parent 3412822 commit 4b8789a

14 files changed

Lines changed: 138 additions & 89 deletions

File tree

‎packages/react-core/src/components/Skeleton/examples/Skeleton.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,42 @@ cssPrefix: pf-v5-c-skeleton
55
propComponents: ['Skeleton']
66
---
77

8-
import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
9-
import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
10-
import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
11-
import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
12-
import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
13-
import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
14-
import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
8+
import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
9+
import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
10+
import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
11+
import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
12+
import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
13+
import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
14+
import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
1515

1616
## Examples
1717

1818
### Default
1919

2020
```ts file="./SkeletonDefault.tsx"
21+
2122
```
2223

2324
### Percentage widths
2425

2526
```ts file="./SkeletonPercentageWidth.tsx"
27+
2628
```
2729

2830
### Percentage heights
2931

3032
```ts file="./SkeletonPercentageHeight.tsx"
33+
3134
```
3235

3336
### Text modifiers
3437

3538
```ts file="./SkeletonText.tsx"
39+
3640
```
3741

3842
### Shapes
3943

4044
```ts file="./SkeletonShapes.tsx"
45+
4146
```

‎packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
import React from 'react';
22
import { Skeleton } from '@patternfly/react-core';
33
/* eslint-disable camelcase */
4-
import global_FontSize_4xl from '@patternfly/react-tokens/dist/esm/global_FontSize_4xl';
5-
import global_FontSize_3xl from '@patternfly/react-tokens/dist/esm/global_FontSize_3xl';
6-
import global_FontSize_2xl from '@patternfly/react-tokens/dist/esm/global_FontSize_2xl';
7-
import global_FontSize_xl from '@patternfly/react-tokens/dist/esm/global_FontSize_xl';
8-
import global_FontSize_lg from '@patternfly/react-tokens/dist/esm/global_FontSize_lg';
9-
import global_FontSize_md from '@patternfly/react-tokens/dist/esm/global_FontSize_md';
10-
import global_FontSize_sm from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
4+
import global_font_size_4xl from '@patternfly/react-tokens/dist/esm/global_font_size_4xl';
5+
import global_font_size_3xl from '@patternfly/react-tokens/dist/esm/global_font_size_3xl';
6+
import global_font_size_2xl from '@patternfly/react-tokens/dist/esm/global_font_size_2xl';
7+
import global_font_size_xl from '@patternfly/react-tokens/dist/esm/global_font_size_xl';
8+
import global_font_size_lg from '@patternfly/react-tokens/dist/esm/global_font_size_lg';
9+
import global_font_size_md from '@patternfly/react-tokens/dist/esm/global_font_size_md';
10+
import global_font_size_sm from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
1111

1212
export const SkeletonText: React.FunctionComponent = () => (
1313
<React.Fragment>
14-
{global_FontSize_4xl.name}
14+
{global_font_size_4xl.name}
1515
<Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
1616
<br />
17-
{global_FontSize_3xl.name}
17+
{global_font_size_3xl.name}
1818
<Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
1919
<br />
20-
{global_FontSize_2xl.name}
20+
{global_font_size_2xl.name}
2121
<Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
2222
<br />
23-
{global_FontSize_xl.name}
23+
{global_font_size_xl.name}
2424
<Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
2525
<br />
26-
{global_FontSize_lg.name}
26+
{global_font_size_lg.name}
2727
<Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
2828
<br />
29-
{global_FontSize_md.name}
29+
{global_font_size_md.name}
3030
<Skeleton fontSize="md" screenreaderText="Loading font size md" />
3131
<br />
32-
{global_FontSize_sm.name}
32+
{global_font_size_sm.name}
3333
<Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
3434
</React.Fragment>
3535
);

‎packages/react-core/src/demos/CardDemos.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_
1515
import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
1616
import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_red_100';
1717
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
18-
import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
19-
import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
20-
import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
21-
import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200';
18+
import global_color_status_success_default from '@patternfly/react-tokens/dist/esm/global_color_status_success_default';
19+
import global_color_status_warning_default from '@patternfly/react-tokens/dist/esm/global_color_status_warning_default';
20+
import global_color_status_danger_default from '@patternfly/react-tokens/dist/esm/global_color_status_danger_default';
21+
import global_color_brand_200 from '@patternfly/react-tokens/dist/esm/global_color_brand_200';
2222
import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
2323
import text from '@patternfly/react-styles/css/utilities/Text/text';
2424
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';

‎packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-
1616
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
1717
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
1818
import TimesCircleIcon from '@patternfly/react-icons/dist/js/icons/times-circle-icon';
19-
import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
20-
import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100';
21-
import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
19+
import global_color_status_success_default from '@patternfly/react-tokens/dist/esm/global_color_status_success_default';
20+
import global_color_status_warning_default from '@patternfly/react-tokens/dist/esm/global_color_status_warning_default';
21+
import global_color_status_danger_default from '@patternfly/react-tokens/dist/esm/global_color_status_danger_default';
2222
import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
2323

2424
interface ContentType {
@@ -46,7 +46,7 @@ const cardData: CardData = {
4646
title: '5 Clusters',
4747
content: [
4848
{
49-
icon: <CheckCircleIcon color={global_success_color_100.var} />
49+
icon: <CheckCircleIcon color={global_color_status_success_default.var} />
5050
}
5151
],
5252
layout: 'icon'
@@ -55,7 +55,7 @@ const cardData: CardData = {
5555
title: '15 Clusters',
5656
content: [
5757
{
58-
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />
58+
icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />
5959
}
6060
],
6161
layout: 'icon'
@@ -64,7 +64,7 @@ const cardData: CardData = {
6464
title: '3 Clusters',
6565
content: [
6666
{
67-
icon: <TimesCircleIcon color={global_danger_color_100.var} />
67+
icon: <TimesCircleIcon color={global_color_status_danger_default.var} />
6868
}
6969
],
7070
layout: 'icon'
@@ -75,11 +75,11 @@ const cardData: CardData = {
7575
title: '10 Hosts',
7676
content: [
7777
{
78-
icon: <ExclamationCircleIcon color={global_success_color_100.var} />,
78+
icon: <ExclamationCircleIcon color={global_color_status_success_default.var} />,
7979
count: 2
8080
},
8181
{
82-
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
82+
icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
8383
count: 1
8484
}
8585
],
@@ -89,11 +89,11 @@ const cardData: CardData = {
8989
title: '50 Hosts',
9090
content: [
9191
{
92-
icon: <CheckCircleIcon color={global_success_color_100.var} />,
92+
icon: <CheckCircleIcon color={global_color_status_success_default.var} />,
9393
count: 5
9494
},
9595
{
96-
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
96+
icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
9797
count: 12
9898
}
9999
],
@@ -103,11 +103,11 @@ const cardData: CardData = {
103103
title: '12 Hosts',
104104
content: [
105105
{
106-
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
106+
icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
107107
count: 3
108108
},
109109
{
110-
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
110+
icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
111111
count: 7
112112
}
113113
],
@@ -119,12 +119,12 @@ const cardData: CardData = {
119119
title: '13 Hosts',
120120
content: [
121121
{
122-
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
122+
icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
123123
status: '2 errors',
124124
subtitle: 'subtitle'
125125
},
126126
{
127-
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
127+
icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
128128
status: '1 warning',
129129
subtitle: 'subtitle'
130130
}
@@ -135,12 +135,12 @@ const cardData: CardData = {
135135
title: '3 Hosts',
136136
content: [
137137
{
138-
icon: <CheckCircleIcon color={global_success_color_100.var} />,
138+
icon: <CheckCircleIcon color={global_color_status_success_default.var} />,
139139
status: '2 successes',
140140
subtitle: 'subtitle'
141141
},
142142
{
143-
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
143+
icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
144144
status: '3 warnings',
145145
subtitle: 'subtitle'
146146
}
@@ -151,12 +151,12 @@ const cardData: CardData = {
151151
title: '50 Hosts',
152152
content: [
153153
{
154-
icon: <ExclamationTriangleIcon color={global_warning_color_100.var} />,
154+
icon: <ExclamationTriangleIcon color={global_color_status_warning_default.var} />,
155155
status: '7 warnings',
156156
subtitle: 'subtitle'
157157
},
158158
{
159-
icon: <TimesCircleIcon color={global_danger_color_100.var} />,
159+
icon: <TimesCircleIcon color={global_color_status_danger_default.var} />,
160160
status: '1 error',
161161
subtitle: 'subtitle'
162162
}

‎packages/react-core/src/demos/examples/Card/CardStatus.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
2626
import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
2727
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
2828
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
29-
import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
30-
import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
31-
import global_Color_200 from '@patternfly/react-tokens/dist/esm/global_Color_200';
29+
import global_color_status_success_default from '@patternfly/react-tokens/dist/esm/global_color_status_success_default';
30+
import global_color_status_danger_default from '@patternfly/react-tokens/dist/esm/global_color_status_danger_default';
31+
import global_color_brand_200 from '@patternfly/react-tokens/dist/esm/global_color_brand_200';
3232

3333
export const CardStatus: React.FunctionComponent = () => {
3434
const [drawerExpanded, setDrawerExpanded] = React.useState(false);
@@ -140,7 +140,7 @@ export const CardStatus: React.FunctionComponent = () => {
140140
<GridItem>
141141
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
142142
<FlexItem>
143-
<CheckCircleIcon color={global_success_color_100.var} />
143+
<CheckCircleIcon color={global_color_status_success_default.var} />
144144
</FlexItem>
145145
<FlexItem>
146146
<span>Cluster</span>
@@ -150,7 +150,7 @@ export const CardStatus: React.FunctionComponent = () => {
150150
<GridItem>
151151
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
152152
<FlexItem>
153-
<ExclamationCircleIcon color={global_danger_color_100.var} />
153+
<ExclamationCircleIcon color={global_color_status_danger_default.var} />
154154
</FlexItem>
155155
<FlexItem>
156156
<Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px">
@@ -164,29 +164,29 @@ export const CardStatus: React.FunctionComponent = () => {
164164
<GridItem>
165165
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
166166
<FlexItem>
167-
<ExclamationCircleIcon color={global_danger_color_100.var} />
167+
<ExclamationCircleIcon color={global_color_status_danger_default.var} />
168168
</FlexItem>
169169
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
170170
<FlexItem>
171171
<a href="#">Operators</a>
172172
</FlexItem>
173173
<FlexItem>
174-
<span style={{ color: global_Color_200.var }}>1 degraded</span>
174+
<span style={{ color: global_color_brand_200.var }}>1 degraded</span>
175175
</FlexItem>
176176
</Flex>
177177
</Flex>
178178
</GridItem>
179179
<GridItem>
180180
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
181181
<FlexItem>
182-
<CheckCircleIcon color={global_success_color_100.var} />
182+
<CheckCircleIcon color={global_color_status_success_default.var} />
183183
</FlexItem>
184184
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
185185
<FlexItem>
186186
<a href="#">Image Vulnerabilities</a>
187187
</FlexItem>
188188
<FlexItem>
189-
<span style={{ color: global_Color_200.var }}>0 vulnerabilities</span>
189+
<span style={{ color: global_color_brand_200.var }}>0 vulnerabilities</span>
190190
</FlexItem>
191191
</Flex>
192192
</Flex>

‎packages/react-docs/patternfly-docs/pages/icons.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Tooltip, Text, Grid, GridItem, PageSection } from '@patternfly/react-core';
33
import spacerMd from '@patternfly/react-tokens/dist/esm/global_spacer_md';
4-
import labelFontSize from '@patternfly/react-tokens/dist/esm/global_FontSize_sm';
4+
import labelFontSize from '@patternfly/react-tokens/dist/esm/global_font_size_sm';
55
import * as IconsModule from '@patternfly/react-icons/dist/esm';
66

77
const iconsPage = () => {

‎packages/react-docs/patternfly-docs/patternfly-docs.css.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,3 @@ import '@patternfly/patternfly/patternfly-addons.css';
1919

2020
// Charts
2121
import '@patternfly/patternfly/patternfly-charts.css';
22-
23-
// Dark theme
24-
import '@patternfly/patternfly/patternfly-charts-theme-dark.css';

0 commit comments

Comments
 (0)