colors.scss 3.42 KB
Newer Older
1
@use 'sass:color';
Tasso Evangelista's avatar
Tasso Evangelista committed
2 3
@use 'sass:list';
@use 'sass:map';
4 5
@use '~@rocket.chat/fuselage-tokens/colors.scss' as token-colors;

Tasso Evangelista's avatar
Tasso Evangelista committed
6 7 8 9 10 11 12
$-map-type-to-prefix: (
  neutral: 'n',
  primary: 'b',
  info: 'b',
  success: 'g',
  warning: 'y',
  danger: 'r',
Tasso Evangelista's avatar
Tasso Evangelista committed
13 14 15 16 17 18
  red: 'r',
  orange: 'o',
  yellow: 'y',
  green: 'g',
  blue: 'b',
  purple: 'p',
Tasso Evangelista's avatar
Tasso Evangelista committed
19
);
20

Tasso Evangelista's avatar
Tasso Evangelista committed
21 22
@function _get-palette-color($type, $grade, $alpha) {
  @if not ($grade % 100 == 0 and $grade / 100 >= 1 and $grade / 100 <= 9) {
23 24 25
    @error 'invalid color grade';
  }

Tasso Evangelista's avatar
Tasso Evangelista committed
26 27 28
  @if not ($alpha == null or ($alpha >= 0 and $alpha <= 1)) {
    @error 'invalid color alpha';
  }
29

Tasso Evangelista's avatar
Tasso Evangelista committed
30 31 32
  $prefix: map.get($-map-type-to-prefix, $type);
  @if not $prefix {
    @error 'invalid color type';
33 34
  }

Tasso Evangelista's avatar
Tasso Evangelista committed
35
  $base-color: map.get(token-colors.$colors, #{ $prefix }#{ $grade });
36

Tasso Evangelista's avatar
Tasso Evangelista committed
37 38
  @if not $base-color {
    @error 'invalid color reference';
39 40
  }

Tasso Evangelista's avatar
Tasso Evangelista committed
41 42 43 44 45
  @if ($alpha != null) {
    @return (
      --rcx-color-#{ $type }-#{ $grade }-#{ $alpha * 100 },
      color.change($base-color, $alpha: $alpha),
    );
46 47
  }

48
  @return (--rcx-color-#{ $type }-#{ $grade }, $base-color);
49 50
}

Tasso Evangelista's avatar
Tasso Evangelista committed
51 52
@function _refer-palette-color($type, $grade, $alpha: null) {
  $pair: _get-palette-color($type, $grade, $alpha);
Tasso Evangelista's avatar
Tasso Evangelista committed
53
  @return var(list.nth($pair, 1), list.nth($pair, 2));
54 55
}

Tasso Evangelista's avatar
Tasso Evangelista committed
56 57 58 59
@function neutral($grade, $alpha: null) {
  @return _refer-palette-color(neutral, $grade, $alpha);
}

60
@function primary($grade, $alpha: null) {
Tasso Evangelista's avatar
Tasso Evangelista committed
61
  @return _refer-palette-color(primary, $grade, $alpha);
62 63 64
}

@function info($grade, $alpha: null) {
Tasso Evangelista's avatar
Tasso Evangelista committed
65
  @return _refer-palette-color(info, $grade, $alpha);
66 67 68
}

@function success($grade, $alpha: null) {
Tasso Evangelista's avatar
Tasso Evangelista committed
69
  @return _refer-palette-color(success, $grade, $alpha);
70 71 72
}

@function warning($grade, $alpha: null) {
Tasso Evangelista's avatar
Tasso Evangelista committed
73
  @return _refer-palette-color(warning, $grade, $alpha);
74 75 76
}

@function danger($grade, $alpha: null) {
Tasso Evangelista's avatar
Tasso Evangelista committed
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
  @return _refer-palette-color(danger, $grade, $alpha);
}

@function red($grade, $alpha: null) {
  @return _refer-palette-color('red', $grade, $alpha);
}

@function orange($grade, $alpha: null) {
  @return _refer-palette-color('orange', $grade, $alpha);
}

@function yellow($grade, $alpha: null) {
  @return _refer-palette-color('yellow', $grade, $alpha);
}

@function green($grade, $alpha: null) {
  @return _refer-palette-color('green', $grade, $alpha);
}

@function blue($grade, $alpha: null) {
  @return _refer-palette-color('blue', $grade, $alpha);
}

@function purple($grade, $alpha: null) {
  @return _refer-palette-color('purple', $grade, $alpha);
102 103 104 105 106 107 108
}

@function surface() {
  @return var(--rcx-color-surface, white);
}

$-foreground-colors: (
Tasso Evangelista's avatar
Tasso Evangelista committed
109 110 111 112
  default: map.get(token-colors.$colors, n800),
  info: map.get(token-colors.$colors, n700),
  hint: map.get(token-colors.$colors, n600),
  disabled: map.get(token-colors.$colors, n400),
113
  alternative: white,
Tasso Evangelista's avatar
Tasso Evangelista committed
114 115 116 117 118 119 120
  primary: map.get(token-colors.$colors, b500),
  success: map.get(token-colors.$colors, g500),
  danger: map.get(token-colors.$colors, r500),
  warning: map.get(token-colors.$colors, y700),
  link: map.get(token-colors.$colors, b500),
  visited-link: map.get(token-colors.$colors, p500),
  active-link: map.get(token-colors.$colors, r500),
121 122
);

Tasso Evangelista's avatar
Tasso Evangelista committed
123 124
@function _get-foreground-color($type) {
  @if not map.has-key($-foreground-colors, $type) {
125 126 127
    @error 'invalid foreground type';
  }

Tasso Evangelista's avatar
Tasso Evangelista committed
128 129
  $color: map.get($-foreground-colors, $type);

130
  @return (--rcx-color-foreground-#{ $type }, $color);
Tasso Evangelista's avatar
Tasso Evangelista committed
131 132 133 134 135
}

@function foreground($type) {
  $pair: _get-foreground-color($type);
  @return var(list.nth($pair, 1), list.nth($pair, 2));
136 137 138
}

$foreground-types: map-keys($-foreground-colors);