@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/color/ColorScales/index.md

@@ -0,0 +1,168 @@
+---
+nav: Colors
+title: ColorScales
+description: The ColorScales component is a memoized component used to display a color scale. It receives props containing the name of the scale, the color scale items, and a number representing the index of the mid-highlight. The component renders a set of ScaleRow components, each representing a different part of the color scale.
+apiHeader:
+  atomId: 'colors, neutrals'
+  pkg: '@lobehub/ui/color'
+  docUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/color/ColorScales/index.md'
+  sourceUrl: 'https://github.com/lobehub/lobe-ui/tree/master/src/color/colors/index.ts'
+---
+
+## Primary
+
+```tsx
+import { ColorScales, primary } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="primary" scale={primary} midHighLight={9} />;
+```
+
+## Colors
+
+### Red
+
+```tsx
+import { ColorScales, red } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="red" scale={red} midHighLight={9} />;
+```
+
+### Volcano
+
+```tsx
+import { ColorScales, volcano } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="volcano" scale={volcano} midHighLight={9} />;
+```
+
+### Orange
+
+```tsx
+import { ColorScales, orange } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="orange" scale={orange} midHighLight={9} />;
+```
+
+### Gold
+
+```tsx
+import { ColorScales, gold } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="gold" scale={gold} midHighLight={9} />;
+```
+
+### Yellow
+
+```tsx
+import { ColorScales, yellow } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="yellow" scale={yellow} midHighLight={9} />;
+```
+
+### Lime
+
+```tsx
+import { ColorScales, lime } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="lime" scale={lime} midHighLight={9} />;
+```
+
+### Green
+
+```tsx
+import { ColorScales, green } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="green" scale={green} midHighLight={9} />;
+```
+
+### Cyan
+
+```tsx
+import { ColorScales, cyan } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="cyan" scale={cyan} midHighLight={9} />;
+```
+
+### Blue
+
+```tsx
+import { ColorScales, blue } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="blue" scale={blue} midHighLight={9} />;
+```
+
+### Geekblue
+
+```tsx
+import { ColorScales, geekblue } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="geekblue" scale={geekblue} midHighLight={9} />;
+```
+
+### Purple
+
+```tsx
+import { ColorScales, purple } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="purple" scale={purple} midHighLight={9} />;
+```
+
+### Magenta
+
+```tsx
+import { ColorScales, magenta } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="magenta" scale={magenta} midHighLight={9} />;
+```
+
+## Neutral
+
+### Gray
+
+```tsx
+import { ColorScales, gray } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="gray" scale={gray} midHighLight={9} />;
+```
+
+## Extra Neutral
+
+### Mauve
+
+```tsx
+import { ColorScales, mauve } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="mauve" scale={mauve} midHighLight={9} />;
+```
+
+### Olive
+
+```tsx
+import { ColorScales, olive } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="olive" scale={olive} midHighLight={9} />;
+```
+
+### Sage
+
+```tsx
+import { ColorScales, sage } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="sage" scale={sage} midHighLight={9} />;
+```
+
+### Sand
+
+```tsx
+import { ColorScales, sand } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="sand" scale={sand} midHighLight={9} />;
+```
+
+### Slate
+
+```tsx
+import { ColorScales, slate } from '@lobehub/ui/color';
+
+export default () => <ColorScales name="slate" scale={slate} midHighLight={9} />;
+```

package/dist/templates/color/ColorScales/index.tsx

@@ -0,0 +1,70 @@
+import { Space } from 'antd';
+import React, { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ColorScaleItem } from '../types';
+import ScaleRow from './ScaleRow';
+import { useStyles } from './style';
+
+export interface ColorScalesProps {
+  /**
+   * @description Index of the mid highlight color in the scale
+   */
+  midHighLight: number;
+  /**
+   * @description Name of the color scale
+   */
+  name: string;
+  /**
+   * @description Color scale item object
+   */
+  scale: ColorScaleItem;
+}
+
+const ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox align={'center'} flex={1} horizontal justify={'center'}>
+      <div style={{ padding: '8px 16px 32px 0' }}>
+        <Space direction={'vertical'} size={2}>
+          <Space key="scale-title" size={2}>
+            <Flexbox align={'center'} className={styles.scaleRowTitle} horizontal key="scale-num" />
+            {Array.from({ length: scale.light.length })
+              .fill('')
+              .map((_, index) => {
+                if (index === 0 || index === 12) return false;
+
+                const isMidHighlight = midHighLight === index;
+
+                return (
+                  <div className={styles.scaleBox} key={`num${index}`}>
+                    <div className={styles.scaleBox}>
+                      <Flexbox
+                        align={'center'}
+                        className={styles.scaleItem}
+                        horizontal
+                        justify={'center'}
+                        style={{
+                          fontWeight: isMidHighlight ? 700 : 400,
+                          opacity: 0.5,
+                        }}
+                      >
+                        {index}
+                      </Flexbox>
+                    </div>
+                  </div>
+                );
+              })}
+          </Space>
+          <ScaleRow key="light" name={name} scale={scale.light} title="light" />
+          <ScaleRow key="lightA" name={name} scale={scale.lightA} title="lightA" />
+          <ScaleRow key="dark" name={name} scale={scale.dark} title="dark" />
+          <ScaleRow key="darkA" name={name} scale={scale.darkA} title="darkA" />
+        </Space>
+      </div>
+    </Flexbox>
+  );
+});
+
+export default ColorScales;

package/dist/templates/color/ColorScales/style.ts

@@ -0,0 +1,42 @@
+import { createStyles } from 'antd-style';
+
+export const alphaBg = {
+  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px',
+  light:
+    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',
+};
+
+export const useStyles = createStyles(({ css, token }) => ({
+  scaleBox: css`
+    cursor: pointer;
+
+    position: relative;
+
+    width: 48px;
+    height: 32px;
+
+    background-position:
+      0 0,
+      0 8px,
+      8px -8px,
+      -8px 0;
+    background-size: 16px 16px;
+
+    transition: scale 400ms ${token.motionEaseOut};
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+  scaleItem: css`
+    width: 100%;
+    height: 100%;
+  `,
+  scaleRowTitle: css`
+    width: 64px;
+    height: 32px;
+  `,
+  text: css`
+    opacity: 0.5;
+  `,
+}));

package/dist/templates/color/colors/blue.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const blue: ColorScaleItem = {
+  dark: [
+    '#000506',
+    '#002126',
+    '#00363f',
+    '#004e59',
+    '#006675',
+    '#008093',
+    '#159ab0',
+    '#47b3ca',
+    '#6acde4',
+    '#8ae8ff',
+    '#b8f0ff',
+    '#def7ff',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(0, 167, 200, 0.03)',
+    'rgba(0, 220, 253, 0.15)',
+    'rgba(0, 216, 252, 0.25)',
+    'rgba(0, 223, 254, 0.35)',
+    'rgba(0, 222, 254, 0.46)',
+    'rgba(0, 221, 253, 0.58)',
+    'rgba(30, 223, 255, 0.69)',
+    'rgba(89, 224, 252, 0.8)',
+    'rgba(118, 228, 253, 0.9)',
+    '#8ae8ff',
+    '#b8f0ff',
+    '#def7ff',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#fbfeff',
+    '#f4fcff',
+    '#eafaff',
+    '#dff7ff',
+    '#d3f5ff',
+    '#c4f2ff',
+    '#b4efff',
+    '#a1ecff',
+    '#8ae8ff',
+    '#159ab0',
+    '#004e59',
+    '#000506',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.01)',
+    'rgba(55, 205, 255, 0.02)',
+    'rgba(35, 195, 255, 0.05)',
+    'rgba(22, 199, 255, 0.09)',
+    'rgba(9, 193, 255, 0.13)',
+    'rgba(11, 199, 255, 0.18)',
+    'rgba(9, 201, 255, 0.24)',
+    'rgba(5, 202, 255, 0.3)',
+    'rgba(1, 204, 255, 0.37)',
+    'rgba(1, 205, 255, 0.46)',
+    'rgba(1, 145, 169, 0.92)',
+    '#004e59',
+    '#000506',
+  ],
+};
+
+export default blue;

package/dist/templates/color/colors/cyan.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const cyan: ColorScaleItem = {
+  dark: [
+    '#000503',
+    '#00221c',
+    '#003930',
+    '#005245',
+    '#006c5b',
+    '#008772',
+    '#2fa28a',
+    '#55bca4',
+    '#75d7be',
+    '#95f3d9',
+    '#bdf7e4',
+    '#dffcf0',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(0, 250, 150, 0.02)',
+    'rgba(0, 243, 200, 0.14)',
+    'rgba(0, 248, 209, 0.23)',
+    'rgba(0, 248, 209, 0.33)',
+    'rgba(0, 251, 212, 0.43)',
+    'rgba(0, 255, 215, 0.53)',
+    'rgba(73, 253, 216, 0.64)',
+    'rgba(115, 254, 222, 0.74)',
+    'rgba(138, 253, 224, 0.85)',
+    'rgba(155, 253, 226, 0.96)',
+    'rgba(195, 255, 235, 0.97)',
+    'rgba(225, 255, 242, 0.99)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f9fffb',
+    '#effff8',
+    '#e3fff4',
+    '#d8fef0',
+    '#ccfcec',
+    '#c0fae8',
+    '#b3f8e3',
+    '#a5f6de',
+    '#95f3d9',
+    '#2fa28a',
+    '#005245',
+    '#000503',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.01)',
+    'rgba(55, 255, 122, 0.03)',
+    'rgba(26, 255, 155, 0.07)',
+    'rgba(0, 255, 155, 0.11)',
+    'rgba(11, 249, 161, 0.16)',
+    'rgba(0, 240, 160, 0.2)',
+    'rgba(3, 235, 163, 0.25)',
+    'rgba(2, 232, 162, 0.3)',
+    'rgba(5, 230, 163, 0.36)',
+    'rgba(3, 226, 165, 0.42)',
+    'rgba(1, 142, 112, 0.82)',
+    '#005245',
+    '#000503',
+  ],
+};
+
+export default cyan;

package/dist/templates/color/colors/geekblue.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const geekblue: ColorScaleItem = {
+  dark: [
+    '#00021b',
+    '#000d4c',
+    '#001a69',
+    '#002a8a',
+    '#003bac',
+    '#004cca',
+    '#005ae0',
+    '#0065ed',
+    '#006cf3',
+    '#0072f5',
+    '#9abeff',
+    '#e2ebff',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(0, 18, 245, 0.11)',
+    'rgba(0, 43, 253, 0.3)',
+    'rgba(0, 62, 250, 0.42)',
+    'rgba(0, 76, 251, 0.55)',
+    'rgba(0, 87, 253, 0.68)',
+    'rgba(0, 95, 252, 0.8)',
+    'rgba(0, 102, 255, 0.88)',
+    'rgba(0, 109, 255, 0.93)',
+    'rgba(0, 112, 253, 0.96)',
+    'rgba(0, 119, 255, 0.96)',
+    '#9abeff',
+    '#e2ebff',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#fcfbff',
+    '#f1f5ff',
+    '#e2ebff',
+    '#cedfff',
+    '#b6d0ff',
+    '#9abeff',
+    '#78a9ff',
+    '#4c90ff',
+    '#0072f5',
+    '#005ae0',
+    '#002a8a',
+    '#00021b',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.01)',
+    'rgba(105, 55, 255, 0.02)',
+    'rgba(22, 88, 255, 0.06)',
+    'rgba(13, 88, 255, 0.12)',
+    'rgba(10, 95, 255, 0.2)',
+    'rgba(3, 93, 255, 0.29)',
+    'rgba(3, 93, 255, 0.4)',
+    'rgba(0, 93, 255, 0.53)',
+    'rgba(3, 99, 255, 0.71)',
+    '#0072f5',
+    '#005ae0',
+    '#002a8a',
+    '#00021b',
+  ],
+};
+
+export default geekblue;

package/dist/templates/color/colors/gold.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const gold: ColorScaleItem = {
+  dark: [
+    '#070300',
+    '#2a1b00',
+    '#483000',
+    '#6a4900',
+    '#916400',
+    '#b77e00',
+    '#d59300',
+    '#eaa100',
+    '#f8aa00',
+    '#ffb224',
+    '#ffdcaf',
+    '#fff4eb',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(233, 100, 0, 0.03)',
+    'rgba(247, 159, 0, 0.17)',
+    'rgba(248, 166, 0, 0.29)',
+    'rgba(252, 174, 0, 0.42)',
+    'rgba(254, 175, 0, 0.57)',
+    'rgba(254, 175, 0, 0.72)',
+    'rgba(254, 175, 0, 0.84)',
+    'rgba(254, 175, 0, 0.92)',
+    'rgba(253, 173, 0, 0.98)',
+    '#ffb224',
+    '#ffdcaf',
+    '#fff4eb',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#fffdff',
+    '#fff9f7',
+    '#fff4eb',
+    '#ffeedc',
+    '#ffe6c8',
+    '#ffdcaf',
+    '#ffd190',
+    '#ffc368',
+    '#ee9e0b',
+    '#d59300',
+    '#6a4900',
+    '#070300',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(255,145,55,0.04)',
+    'rgba(255,155,55,0.08)',
+    'rgba(255, 117, 5, 0.16)',
+    'rgba(255, 134, 5, 0.20)',
+    'rgba(255, 141, 5, 0.26)',
+    'rgba(255, 146, 5, 0.32)',
+    'rgba(255, 150, 3, 0.44)',
+    'rgba(255, 155, 3, 0.6)',
+    'rgba(255, 165, 0, 0.86)',
+    '#d59300',
+    '#6a4900',
+    '#070300',
+  ],
+};
+
+export default gold;

package/dist/templates/color/colors/gray.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const gray: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#0d0d0d',
+    '#1a1a1a',
+    '#202020',
+    '#2d2d2d',
+    '#444444',
+    '#555555',
+    '#666666',
+    '#6f6f6f',
+    '#777777',
+    '#aaaaaa',
+    '#dddddd',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(255, 255, 255, 0.06)',
+    'rgba(255, 255, 255, 0.10)',
+    'rgba(255, 255, 255, 0.16)',
+    'rgba(255, 255, 255, 0.24)',
+    'rgba(255, 255, 255, 0.28)',
+    'rgba(255, 255, 255, 0.32)',
+    'rgba(255, 255, 255, 0.38)',
+    'rgba(255, 255, 255, 0.44)',
+    'rgba(255, 255, 255, 0.5)',
+    'rgba(255, 255, 255, 0.66)',
+    'rgba(255, 255, 255, 0.84)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f8f8f8',
+    '#eeeeee',
+    '#e3e3e3',
+    '#dddddd',
+    '#cccccc',
+    '#bbbbbb',
+    '#aaaaaa',
+    '#999999',
+    '#888888',
+    '#666666',
+    '#333333',
+    '#080808',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(0, 0, 0, 0.03)',
+    'rgba(0, 0, 0, 0.06)',
+    'rgba(0, 0, 0, 0.12)',
+    'rgba(0, 0, 0, 0.18)',
+    'rgba(0, 0, 0, 0.24)',
+    'rgba(0, 0, 0, 0.32)',
+    'rgba(0, 0, 0, 0.38)',
+    'rgba(0, 0, 0, 0.44)',
+    'rgba(0, 0, 0, 0.5)',
+    'rgba(0, 0, 0, 0.68)',
+    'rgba(0, 0, 0, 0.84)',
+    'rgba(0, 0, 0, 0.98)',
+  ],
+};
+
+export default gray;

package/dist/templates/color/colors/green.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const green: ColorScaleItem = {
+  dark: [
+    '#000503',
+    '#001d12',
+    '#002d1d',
+    '#003f28',
+    '#005232',
+    '#00653c',
+    '#007944',
+    '#1b8d4d',
+    '#3ba05a',
+    '#62c473',
+    '#96cd92',
+    '#cde6c3',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(0, 250, 150, 0.02)',
+    'rgba(0, 242, 150, 0.12)',
+    'rgba(0, 250, 161, 0.18)',
+    'rgba(0, 252, 160, 0.25)',
+    'rgba(0, 248, 152, 0.33)',
+    'rgba(0, 252, 150, 0.4)',
+    'rgba(0, 252, 142, 0.48)',
+    'rgba(48, 252, 137, 0.56)',
+    'rgba(94, 254, 143, 0.63)',
+    'rgba(120, 254, 145, 0.71)',
+    'rgba(185, 253, 180, 0.81)',
+    'rgba(225, 253, 214, 0.91)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f4fdeb',
+    '#e7f8dd',
+    '#d8f2ce',
+    '#c7eabd',
+    '#b4e1ac',
+    '#a0d79b',
+    '#89cc8a',
+    '#71c179',
+    '#379d4a',
+    '#007944',
+    '#003f28',
+    '#000503',
+  ],
+  lightA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(117, 230, 5, 0.06)',
+    'rgba(84, 205, 12, 0.10)',
+    'rgba(60, 190, 10, 0.14)',
+    'rgba(40, 174, 1, 0.26)',
+    'rgba(28, 164, 3, 0.33)',
+    'rgba(18, 155, 5, 0.4)',
+    'rgba(4, 146, 6, 0.47)',
+    'rgba(1, 144, 16, 0.56)',
+    'rgba(1, 143, 28, 0.67)',
+    '#007944',
+    '#003f28',
+    '#000503',
+  ],
+};
+
+export default green;