Skip to content

Commit

Permalink
feat(Progress): make contrast (#1129)
Browse files Browse the repository at this point in the history
  • Loading branch information
Lunory authored Nov 30, 2023
1 parent 348289e commit e1ce48f
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 30 deletions.
10 changes: 4 additions & 6 deletions src/components/Progress/Progress.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ $progress-s-height: 10px;
$progress-xs-height: 4px;

@mixin progress-text {
font-size: 12px;
color: var(--g-color-text-light-primary);
font-size: var(--g-text-body-short-font-size);
font-weight: var(--g-text-body-font-weight);
font-family: var(--g-text-body-font-family);
color: var(--g-color-text-primary);
padding: 0 10px;
box-sizing: border-box;
}
Expand All @@ -24,7 +26,6 @@ $progress-xs-height: 4px;
background-color: var(--g-color-base-generic);

text-align: center;
text-shadow: 0 0 1px var(--g-color-text-dark-primary);

&__text {
@include progress-text;
Expand All @@ -44,8 +45,6 @@ $progress-xs-height: 4px;
}

&__item {
font-size: 12px;

position: relative;

float: left;
Expand All @@ -54,7 +53,6 @@ $progress-xs-height: 4px;
height: 100%;
overflow: hidden;

color: var(--g-color-text-light-primary);
transition: transform 0.6s ease, width 0.6s ease, background-color 0.6s ease;

&_theme_default {
Expand Down
36 changes: 18 additions & 18 deletions src/components/Progress/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,28 @@ Use `theme` property to specify color of the whole progress or the composite par
<ExampleBlock
code={`
<Progress text="default" value={80} />
<Progress text="warning" theme="warning" value={70} />
<Progress text="info" theme="info" value={90} />
<Progress text="success" theme="success" value={90} />
<Progress text="danger" theme="danger" value={80} />
<Progress text="misc" theme="misc" value={60} />
<Progress text="default" value={50} />
<Progress text="warning" theme="warning" value={50} />
<Progress text="info" theme="info" value={50} />
<Progress text="success" theme="success" value={50} />
<Progress text="danger" theme="danger" value={50} />
<Progress text="misc" theme="misc" value={50} />
`}
>
<div style={{width: '30%'}}>
<UIKit.Progress text="default" value={80} />
<UIKit.Progress text="default" value={50} />
<div style={{height: '15px'}} />
<UIKit.Progress text="success" theme="success" value={90} />
<UIKit.Progress text="success" theme="success" value={50} />
</div>
<div style={{width: '30%'}}>
<UIKit.Progress text="warning" theme="warning" value={70} />
<UIKit.Progress text="warning" theme="warning" value={50} />
<div style={{height: '15px'}} />
<UIKit.Progress text="danger" theme="danger" value={80} />
<UIKit.Progress text="danger" theme="danger" value={50} />
</div>
<div style={{width: '30%'}}>
<UIKit.Progress text="info" theme="info "value={90} />
<UIKit.Progress text="info" theme="info "value={50} />
<div style={{height: '15px'}} />
<UIKit.Progress text="misc" theme="misc" value={60} />
<UIKit.Progress text="misc" theme="misc" value={50} />
</div>
</ExampleBlock>
Expand All @@ -48,12 +48,12 @@ LANDING_BLOCK-->
<!--GITHUB_BLOCK-->

```tsx
<Progress text="default" value={80} />
<Progress text="warning" theme="warning" value={70} />
<Progress text="info" theme="info" value={90} />
<Progress text="success" theme="success" value={90} />
<Progress text="danger" theme="danger" value={80} />
<Progress text="misc" theme="misc" value={60} />
<Progress text="default" value={50} />
<Progress text="warning" theme="warning" value={50} />
<Progress text="info" theme="info" value={50} />
<Progress text="success" theme="success" value={50} />
<Progress text="danger" theme="danger" value={50} />
<Progress text="misc" theme="misc" value={50} />
```

<!--/GITHUB_BLOCK-->
Expand Down
12 changes: 6 additions & 6 deletions src/components/Progress/__stories__/Progress.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@ export const Default = Template.bind({value: 50});
const ThemeTemplate: StoryFn<typeof Progress> = (args) => {
return (
<React.Fragment>
<Progress {...args} value={80} theme="default" text="default" />
<Progress {...args} value={50} theme="default" text="default" />
<br />
<Progress {...args} value={90} theme="success" text="success" />
<Progress {...args} value={50} theme="success" text="success" />
<br />
<Progress {...args} value={70} theme="warning" text="warning" />
<Progress {...args} value={50} theme="warning" text="warning" />
<br />
<Progress {...args} value={80} theme="danger" text="danger" />
<Progress {...args} value={50} theme="danger" text="danger" />
<br />
<Progress {...args} value={90} theme="info" text="info" />
<Progress {...args} value={50} theme="info" text="info" />
<br />
<Progress {...args} value={60} theme="misc" text="misc" />
<Progress {...args} value={50} theme="misc" text="misc" />
</React.Fragment>
);
};
Expand Down

0 comments on commit e1ce48f

Please sign in to comment.