web-client-ui/packages/code-studio/src/styleguide/Colors.tsx at main · deephaven/web-client-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from 'react';
import classNames from 'classnames';
import { Swatch } from './Swatch';
import SampleSection from './SampleSection';

function Colors(): React.ReactElement {
  const graySwatches = [
    '100',
    '200',
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '850',
    '8XX',
    '900',
  ].map(swatch => (
    <Swatch
      key={swatch}
      className={classNames('swatch', 'gray-swatch', `gray-swatch-${swatch}`)}
    >
      {swatch === '8XX' ? 'N/A' : `Gray-${swatch}`}
    </Swatch>
  ));

  const baseColorPaletteSwatches = [
    'red',
    'orange',
    'yellow',
    'green',
    'blue',
    'purple',
    'white',
    'black',
  ].map(swatch => (
    <Swatch key={swatch} className={classNames('swatch', `swatch-${swatch}`)}>
      {swatch}
    </Swatch>
  ));

  const colorSwatches = [
    'content-bg',
    'background',
    'foreground',
    'primary',
    'primary-dark',
    'secondary',
    'secondary-hover',
    'success',
    'info',
    'warning',
    'danger',
    'danger-hover',
  ].map(swatch => (
    <Swatch key={swatch} className={classNames('swatch', `swatch-${swatch}`)}>
      {swatch}
    </Swatch>
  ));

  return (
    <SampleSection name="colors">
      <h2 className="ui-title">Colors</h2>
      <div className="row">
        <div className="col">
          {graySwatches}
          {baseColorPaletteSwatches}
        </div>

        <div className="col">{colorSwatches}</div>

        <div className="col">
          <p>
            This section is for legacy reference only. Use the css variable
            based semantic colors in the following sections. You should not be
            using colors defined in the theme color palette directly.
          </p>
        </div>
      </div>
    </SampleSection>
  );
}

export default Colors;