go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/common/styles/stylesheets.ts (about)

     1  // Copyright 2023 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  /**
    16   * @fileoverview
    17   *
    18   * This file copies CSS rules from other stylesheets and convert them into
    19   * Constructable Stylesheets so they can be used in Lit components.
    20   *
    21   * This helps us remove lit-css-loader from the dependency, which is not
    22   * available in Vite.
    23   *
    24   * TODO: remove this file once all elements have been converted to React.
    25   */
    26  
    27  export const colorClasses = new CSSStyleSheet();
    28  
    29  colorClasses.replace(`
    30  .unexpected {
    31    color: var(--failure-color);
    32  }
    33  .unexpectedly-skipped {
    34    color: var(--critical-failure-color);
    35  }
    36  .flaky {
    37    color: var(--warning-color);
    38  }
    39  span.flaky {
    40    color: var(--warning-text-color);
    41  }
    42  .exonerated {
    43    color: var(--exonerated-color);
    44  }
    45  .expected {
    46    color: var(--success-color);
    47  }
    48  
    49  .scheduled {
    50    color: var(--scheduled-color);
    51  }
    52  .started {
    53    color: var(--started-color);
    54  }
    55  .success {
    56    color: var(--success-color);
    57  }
    58  .failure {
    59    color: var(--failure-color);
    60  }
    61  .infra-failure {
    62    color: var(--critical-failure-color);
    63  }
    64  .canceled {
    65    color: var(--canceled-color);
    66  }
    67  
    68  .scheduled-bg {
    69    border: 1px solid var(--scheduled-color);
    70    background-color: var(--scheduled-bg-color);
    71  }
    72  .started-bg {
    73    border: 1px solid var(--started-color);
    74    background-color: var(--started-bg-color);
    75  }
    76  .success-bg {
    77    border: 1px solid var(--success-color);
    78    background-color: var(--success-bg-color);
    79  }
    80  .failure-bg {
    81    border: 1px solid var(--failure-color);
    82    background-color: var(--failure-bg-color);
    83  }
    84  .infra-failure-bg {
    85    border: 1px solid var(--critical-failure-color);
    86    background-color: var(--critical-failure-bg-color);
    87  }
    88  .canceled-bg {
    89    border: 1px solid var(--canceled-color);
    90    background-color: var(--canceled-bg-color);
    91  }
    92  `);
    93  
    94  export const commonStyles = new CSSStyleSheet();
    95  
    96  commonStyles.replace(`
    97  a {
    98    color: var(--active-text-color);
    99  }
   100  
   101  .active-text {
   102    color: var(--active-text-color);
   103    cursor: pointer;
   104    font-size: 14px;
   105    font-weight: normal;
   106  }
   107  
   108  .duration {
   109    color: var(--light-text-color);
   110    background-color: var(--light-active-color);
   111    display: inline-block;
   112    padding: 0.25em 0.4em;
   113    font-size: 75%;
   114    font-weight: 500;
   115    line-height: 13px;
   116    text-align: center;
   117    white-space: nowrap;
   118    vertical-align: bottom;
   119    border-radius: 0.25rem;
   120    margin-bottom: 3px;
   121    width: 35px;
   122  }
   123  
   124  .duration.ms {
   125    background-color: var(--light-background-color-1);
   126  }
   127  
   128  .duration.s {
   129    background-color: var(--light-background-color-2);
   130  }
   131  
   132  .duration.m {
   133    background-color: var(--light-background-color-3);
   134  }
   135  
   136  .duration.h {
   137    background-color: var(--light-background-color-4);
   138  }
   139  
   140  .duration.d {
   141    color: white;
   142    background-color: var(--active-color);
   143  }
   144  
   145  input[type='checkbox'] {
   146    transform: translateY(1px);
   147  }
   148  
   149  mwc-icon {
   150    /* The icon font can take a while to load.
   151     * Set a default size to reduce page shifting.
   152     */
   153    width: var(--mdc-icon-size, 24px);
   154    height: var(--mdc-icon-size, 24px);
   155  }
   156  
   157  hr {
   158    background-color: var(--divider-color);
   159    border: none;
   160    height: 1px;
   161  }
   162  `);