github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/base/color/frame-placeholders.scss (about)

     1  /*TODO: Move this to the reset */
     2  * {
     3    border-width: 0;
     4  }
     5  %frame-border-000 {
     6    /* same as decor-border-000 - but need to think about being able to import color on its own*/
     7    border-style: solid;
     8    // border-width: 0;
     9  }
    10  %frame-yellow-500 {
    11    @extend %frame-border-000;
    12    background-color: $ui-yellow-050;
    13    border-color: $ui-color-warning;
    14  }
    15  %frame-green-500 {
    16    @extend %frame-border-000;
    17    background-color: $ui-green-050;
    18    border-color: $ui-green-500;
    19    color: $ui-green-500;
    20  }
    21  %frame-gray-500 {
    22    @extend %frame-border-000;
    23    background-color: $ui-gray-050;
    24    border-color: $ui-gray-300;
    25    color: $ui-gray-400;
    26  }
    27  %frame-blue-600 {
    28    @extend %frame-border-000;
    29    background-color: $ui-blue-200;
    30    border-color: $ui-gray-400;
    31    color: $ui-blue-050;
    32  }
    33  %frame-blue-700 {
    34    @extend %frame-border-000;
    35    background-color: $ui-blue-400;
    36    border-color: $ui-blue-800;
    37    color: $ui-white;
    38  }
    39  %frame-blue-800 {
    40    @extend %frame-border-000;
    41    background-color: $ui-blue-500;
    42    border-color: $ui-blue-800;
    43    color: $ui-white;
    44  }
    45  %frame-blue-900 {
    46    @extend %frame-border-000;
    47    background-color: $ui-blue-700;
    48    border-color: $ui-blue-800;
    49    color: $ui-white;
    50  }
    51  %frame-red-300 {
    52    @extend %frame-border-000;
    53    background-color: $ui-white;
    54    border-color: $ui-red-500;
    55    color: $ui-red-500;
    56  }
    57  %frame-red-500 {
    58    @extend %frame-border-000;
    59    background-color: $ui-red-050;
    60    border-color: $ui-red-500;
    61    color: $ui-red-800;
    62  }
    63  %frame-red-600 {
    64    @extend %frame-border-000;
    65    background-color: $ui-red-200;
    66    border-color: $ui-gray-400;
    67    color: $ui-white;
    68  }
    69  %frame-red-700 {
    70    @extend %frame-border-000;
    71    background-color: $ui-red-500;
    72    border-color: $ui-red-800;
    73    color: $ui-white;
    74  }
    75  %frame-red-900 {
    76    @extend %frame-border-000;
    77    background-color: $ui-red-700;
    78    border-color: $ui-red-800;
    79    color: $ui-white;
    80  }
    81  %frame-magenta-300 {
    82    @extend %frame-border-000;
    83    background-color: $ui-white;
    84    border-color: $brand-magenta-600;
    85    color: $brand-magenta-600;
    86  }