Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

background

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
4,494
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
4 KB
1 contributor
Use background in your project ?
Copied
npm i @bit/grommet.grommet.utils.background
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
background.js
144 Lines(132 sloc)
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import { css } from 'styled-components';

import { colorIsDark, getRGBA, normalizeColor } from './colors';
import { evalStyle } from './styles';

export const normalizeBackground = (background, theme) => {
  // If the background has a light or dark object, use that
  let result = background;
  if (background) {
    if (theme.dark && background.dark && typeof background.dark !== 'boolean') {
      result = background.dark;
    } else if (
      !theme.dark &&
      background.light &&
      typeof background.light !== 'boolean'
    ) {
      result = background.light;
    }
    result = evalStyle(result, theme);
  }
  return result;
};

export const backgroundIsDark = (backgroundArg, theme) => {
  const background = normalizeBackground(backgroundArg, theme);
  let result;
  if (background) {
    if (typeof background === 'object') {
      const { color, dark, opacity } = background;
      if (typeof dark === 'boolean') {
        result = dark;
      } else if (
        color &&
        // weak opacity means we keep the existing darkness
        (!opacity || opacity !== 'weak')
      ) {
        const backgroundColor = normalizeColor(background.color, theme);
        if (backgroundColor) {
          result = colorIsDark(backgroundColor);
        }
      }
    } else {
      const color = normalizeColor(background, theme);
      if (color) {
        result = colorIsDark(color);
      }
    }
  }
  return result;
};

export const backgroundStyle = (backgroundArg, theme, textColorArg) => {
  // If the background has a light or dark object, use that
  const background = normalizeBackground(backgroundArg, theme);
  const textColor = textColorArg || theme.global.colors.text;

  if (typeof background === 'object') {
    const styles = [];
    if (background.image) {
      let color;
      if (background.dark === false) {
        color = textColor.light;
      } else if (background.dark) {
        color = textColor.dark;
      } else if (!textColorArg) {
        color = 'inherit';
      }
      styles.push(css`
        background-image: ___CSS_0___;
        background-repeat: ___CSS_1___;
        background-position: ___CSS_2___;
        background-size: ___CSS_3___;
        color: ___CSS_4___;
      `);
    }
    if (background.color) {
      const color = normalizeColor(background.color, theme);
      const backgroundColor =
        getRGBA(
          color,
          background.opacity === true
            ? theme.global.opacity.medium
            : theme.global.opacity[background.opacity] || background.opacity,
        ) || color;
      styles.push(css`
        background-color: ___CSS_0___;
        ___CSS_1___
      `);
    }
    if (background.dark === false) {
      styles.push(css`
        color: ___CSS_0___;
      `);
    } else if (background.dark) {
      styles.push(css`
        color: ___CSS_0___;
      `);
    }
    return styles;
  }

  if (background) {
    if (background.lastIndexOf('url', 0) === 0) {
      return css`
        background: ___CSS_0___ no-repeat center center;
        background-size: cover;
      `;
    }
    const color = normalizeColor(background, theme);
    if (color) {
      return css`
        background: ___CSS_0___;
        color: ___CSS_1___;
      `;
    }
  }

  return undefined;
};

export const activeStyle = css`
  ___CSS_0___
  color: ___CSS_1___;
`;

export const selectedStyle = css`
  ___CSS_0___
  color: ___CSS_1___;
`;