Skip to content

Commit

Permalink
✨ feat(src/colorscales/index.md): Add new color scales for Volcano an…
Browse files Browse the repository at this point in the history 
…d Orange

This commit adds two new color scales, Volcano and Orange, to the existing list of color scales in src/ColorScales/index.md. These new scales are designed for white foreground text at step 10.
  • Loading branch information
@canisminor1990
canisminor1990 committed May 29, 2023
1 parent b3833ed commit 7a6a7ff
Show file tree
Hide file tree
Showing 10 changed files with 699 additions and 1,775 deletions.
163 changes: 23 additions & 140 deletions src/ColorScales/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,131 +5,48 @@ title: ColorScales
description: An overview of all 30 Lobe Colors scales.
---

## Neutral

Lobe Colors provides 6 neutral scales.

### Gray

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="gray" scale={colors.gray} midHighLight={9} />;
```

### Mauve

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="mauve" scale={colors.mauve} midHighLight={9} />;
```

### Slate

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="slate" scale={colors.slate} midHighLight={9} />;
```

### Sage

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="sage" scale={colors.sage} midHighLight={9} />;
```

### Olive

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="olive" scale={colors.olive} midHighLight={9} />;
```

### Sand

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="sand" scale={colors.sand} midHighLight={9} />;
```

## Colors

Lobe Colors provides 15 color scales, designed for white foreground text at step `10`.

### Tomato

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="tomato" scale={colors.tomato} midHighLight={9} />;
```

### Red

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="red" scale={colors.red} midHighLight={9} />;
```

### Crimson
### Volcano

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="crimson" scale={colors.crimson} midHighLight={9} />;
```

### Pink

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="pink" scale={colors.pink} midHighLight={9} />;
```

### Plum

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="plum" scale={colors.plum} midHighLight={9} />;
```

### Purple

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="purple" scale={colors.purple} midHighLight={9} />;
export default () => <ColorScales name="volcano" scale={colors.volcano} midHighLight={9} />;
```

### Violet

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="violet" scale={colors.violet} midHighLight={9} />;
```

### Indigo
### Orange

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="indigo" scale={colors.indigo} midHighLight={9} />;
export default () => <ColorScales name="orange" scale={colors.orange} midHighLight={9} />;
```

### Blue
### Gold

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="blue" scale={colors.blue} midHighLight={9} />;
export default () => <ColorScales name="gold" scale={colors.gold} midHighLight={9} />;
```

### Cyan
### Yellow

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="cyan" scale={colors.cyan} midHighLight={9} />;
export default () => <ColorScales name="yellow" scale={colors.yellow} midHighLight={9} />;
```

### Teal
### Lime

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="teal" scale={colors.teal} midHighLight={9} />;
export default () => <ColorScales name="lime" scale={colors.lime} midHighLight={9} />;
```

### Green
Expand All @@ -139,80 +56,46 @@ import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="green" scale={colors.green} midHighLight={9} />;
```

### Grass

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="grass" scale={colors.grass} midHighLight={9} />;
```

### Orange

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="orange" scale={colors.orange} midHighLight={9} />;
```

### Brown

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="brown" scale={colors.brown} midHighLight={9} />;
```

## Bright Colors

Lobe Colors provides 5 bright scales, designed for black foreground text at step `10`.

### Sky
### Cyan

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="sky" scale={colors.sky} midHighLight={9} />;
export default () => <ColorScales name="cyan" scale={colors.cyan} midHighLight={9} />;
```

### Mint
### Blue

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="mint" scale={colors.mint} midHighLight={9} />;
export default () => <ColorScales name="blue" scale={colors.blue} midHighLight={9} />;
```

### Lime
### Geekblue

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="lime" scale={colors.lime} midHighLight={9} />;
export default () => <ColorScales name="geekblue" scale={colors.geekblue} midHighLight={9} />;
```

### Yellow
### Purple

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="yellow" scale={colors.yellow} midHighLight={9} />;
export default () => <ColorScales name="purple" scale={colors.purple} midHighLight={9} />;
```

### Amber
### Magenta

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="amber" scale={colors.amber} midHighLight={9} />;
export default () => <ColorScales name="magenta" scale={colors.magenta} midHighLight={9} />;
```

## Metals

Lobe Colors provides 2 metal scales.

### Bronze

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="bronze" scale={colors.bronze} midHighLight={9} />;
```
## Neutral

### Gold
### Gray

```tsx
import { colors, ColorScales } from '@lobehub/ui';
export default () => <ColorScales name="gold" scale={colors.gold} midHighLight={9} />;
export default () => <ColorScales name="gray" scale={colors.gray} midHighLight={9} />;
```
68 changes: 32 additions & 36 deletions src/Highlighter/SyntaxHighlighter/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,46 @@ import { memo, useEffect } from 'react';
import { Center } from 'react-layout-kit';
import { shallow } from 'zustand/shallow';
import type { HighlighterProps } from '../index';
import { Prism } from './Prism';

import { useThemeMode } from 'antd-style';
import { useStyles } from './style';

export type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;

const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
({ children, language, theme: appearance }) => {
const { styles, theme } = useStyles();
const { isDarkMode } = useThemeMode();
const isDarkTheme = appearance ? appearance === 'dark' : isDarkMode;
const [codeToHtml, isLoading] = useHighlight((s) => [s.codeToHtml, !s.highlighter], shallow);
const SyntaxHighlighter = memo<SyntaxHighlighterProps>(({ children, language }) => {
const { styles, theme } = useStyles();
const { isDarkMode } = useThemeMode();
const [codeToHtml, isLoading] = useHighlight((s) => [s.codeToHtml, !s.highlighter], shallow);

useEffect(() => {
useHighlight.getState().initHighlighter();
}, []);
useEffect(() => {
useHighlight.getState().initHighlighter();
}, []);

return (
<>
{isLoading ? (
<div className={styles.prism}>
<Prism language={language} isDarkMode={isDarkTheme}>
{children}
</Prism>
</div>
) : (
<div
dangerouslySetInnerHTML={{
__html: codeToHtml(children, language, isDarkMode) || '',
}}
className={styles.shiki}
/>
)}
return (
<>
{isLoading ? (
<div className={styles.prism}>
<pre>
<code>{children}</code>
</pre>
</div>
) : (
<div
dangerouslySetInnerHTML={{
__html: codeToHtml(children, language, isDarkMode) || '',
}}
className={styles.shiki}
/>
)}

{isLoading && (
<Center horizontal gap={8} className={styles.loading}>
<Loading spin style={{ color: theme.colorTextTertiary }} />
shiki rendering...
</Center>
)}
</>
);
},
);
{isLoading && (
<Center horizontal gap={8} className={styles.loading}>
<Loading spin style={{ color: theme.colorTextTertiary }} />
shiki rendering...
</Center>
)}
</>
);
});

export default SyntaxHighlighter;
Loading

0 comments on commit 7a6a7ff

Please sign in to comment.