zu 0.3.3

Yew web components, implementing Material Design
Documentation 
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

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.

$yiq-contrasted-threshold: 150 !default;

// Color contrast
// From bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
@function getContrastText($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
  @if ($yiq >= $yiq-contrasted-threshold) {
    // TODO(Shaohua): Refers to dark.text.primary
    @return #fff;
  } @else {
    @return rgba(0, 0, 0, 0.87);
  }
}

/// Returns the luminance of `$color` as a float (between 0 and 1)
/// 1 is pure white, 0 is pure black
///
/// FROM: https://css-tricks.com/snippets/sass/luminance-color-function/
/// @param {Color} $color - Color
/// @return {Number}
/// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference
//@function getLuminance($color) {
//  $colors: (
//          'red': red($color),
//          'green': green($color),
//          'blue': blue($color)
//  );
//
//  @each $name, $value in $colors {
//    $adjusted: 0;
//    $value: $value / 255;
//
//    @if $value < 0.03928 {
//      $value: $value / 12.92;
//    } @else {
//      $value: ($value + .055) / 1.055;
//      $value: pow($value, 2.4);
//    }
//
//    $colors: map-merge($colors, ($name: $value));
//  }
//
//  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
//}
//
///// Darken or lighten a color, depending on its luminance.
///// Light colors are darkened, dark colors are lightened.
///// @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
///// @param {number} coefficient=0.15 - multiplier in the range 0 - 1
///// @returns {string} A CSS color string. Hex input values are returned as rgb
//@function emphasize($color, $coefficient) {
//  @if getLuminance($color) > 0.5 {
//    @return darken($color, $coefficient);
//  } @else {
//    @return lighten($color, $coefficient);
//  }
//}