colors.stories.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import React from 'react';
  2. import styled from '@emotion/styled';
  3. import theme, {aliases} from 'app/utils/theme';
  4. export default {
  5. title: 'Core/Style/Colors',
  6. };
  7. const DESCRIPTIONS = {
  8. textColor: 'Primary text color',
  9. subText: 'Text that should not have as much emphasis',
  10. bodyBackground: 'Background for the main content area of a page?',
  11. background: 'Primary background color',
  12. backgroundSecondary:
  13. 'Secondary background color used as a slight contrast against primary background',
  14. headerBackground: 'Background for the header of a page',
  15. border: 'Primary border color',
  16. success: 'A color that denotes a "success", or something good',
  17. error: 'A color that denotes an error, or something that is wrong',
  18. disabled:
  19. 'A color that indicates something is disabled where user can not interact or use it in the usual manner (implies that there is an "enabled" state)',
  20. active: 'Indicates that something is "active" or "selected"',
  21. linkColor: 'Link color indicates that something is clickable',
  22. secondaryButton: '...',
  23. sidebarGradient: 'Gradient for sidebar',
  24. formPlaceholder: 'Form placeholder text color',
  25. formText: 'Default form text color',
  26. rowBackground: ' ',
  27. chartLineColor:
  28. 'Color of lines that flow across the background of the chart to indicate axes levels',
  29. chartLabel: 'Color for chart label text',
  30. };
  31. export const Default = () => {
  32. const colorsToDisplay = Object.entries(theme).filter(([_name, val]) => {
  33. return typeof val === 'string' && val.match(/^\#[0-9a-fA-F]{6}$/);
  34. });
  35. return (
  36. <React.Fragment>
  37. <h2>Aliases</h2>
  38. <p>
  39. These are the color aliases you should be using (if possible) instead of using the
  40. direct colors.
  41. </p>
  42. <Aliases>
  43. {Object.keys(aliases).map(alias => (
  44. <React.Fragment key={alias}>
  45. <Swatch color={aliases[alias]}>{alias}</Swatch>
  46. <div>{DESCRIPTIONS[alias] || 'No description available'}</div>
  47. </React.Fragment>
  48. ))}
  49. </Aliases>
  50. <h2>All Colors</h2>
  51. <Swatches>
  52. {colorsToDisplay.map(([name, color]) => (
  53. <Swatch key={name} color={color}>
  54. {name}
  55. </Swatch>
  56. ))}
  57. </Swatches>
  58. </React.Fragment>
  59. );
  60. };
  61. Default.storyName = 'Colors';
  62. const Swatches = styled('div')`
  63. display: grid;
  64. grid-template-columns: repeat(auto-fill, 80px);
  65. grid-gap: 16px;
  66. `;
  67. const Swatch = styled('div')`
  68. display: flex;
  69. align-items: center;
  70. justify-content: center;
  71. background-color: ${p => p.color};
  72. color: ${p =>
  73. /[0-8]{1}/.test(p.color) ? p.theme.backgroundSecondary : p.theme.gray500};
  74. font-size: ${p => p.theme.fontSizeSmall};
  75. height: 80px;
  76. text-align: center;
  77. word-break: break-all;
  78. line-height: 1.4em;
  79. `;
  80. const Aliases = styled('div')`
  81. display: grid;
  82. align-items: center;
  83. grid-template-columns: max-content auto;
  84. grid-gap: 16px;
  85. margin-bottom: 30px;
  86. ${Swatch} {
  87. height: auto;
  88. padding: 8px;
  89. }
  90. `;