github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/style-helpers.ts (about)

     1  import { keyframes } from "styled-components"
     2  
     3  export enum Color {
     4    // Brand Colors
     5    green = "#20ba31",
     6    greenLight = "#70d37b",
     7    blue = "#03c7d3",
     8    blueLight = "#5edbe3",
     9    blueDark = "#007d82",
    10    red = "#f6685c",
    11    redLight = "#f7aaa4",
    12    yellow = "#fcb41e",
    13    yellowLight = "#fdcf6f",
    14    purple = "#6378ba",
    15    white = "#ffffff",
    16  
    17    offWhite = "#eef1f1",
    18    gray70 = "#CCDADE",
    19    gray60 = "#7095A0",
    20    gray50 = "#586e75", // Solarized base01
    21    gray40 = "#2D4D55",
    22    gray30 = "#073642", // Solarized base02
    23    gray20 = "#002b36", // Solarized base03 (darkest bg tone)
    24    gray10 = "#001b20", // Brand
    25    black = "#000000",
    26  
    27    // Legacy gray scale
    28    grayLightest = "#93a1a1", // Solarized base1 (darkest content tone)
    29    grayDarker = "#00242d",
    30  
    31    text = "#073642",
    32  }
    33  
    34  export enum ColorAlpha {
    35    almostTransparent = 0.1,
    36    translucent = 0.3,
    37    almostOpaque = 0.7,
    38  }
    39  
    40  export function ColorRGBA(hex: string, alpha: number) {
    41    let r = parseInt(hex.slice(1, 3), 16),
    42      g = parseInt(hex.slice(3, 5), 16),
    43      b = parseInt(hex.slice(5, 7), 16)
    44  
    45    return `rgba(${r}, ${g}, ${b}, ${alpha})`
    46  }
    47  
    48  export enum Font {
    49    sansSerif = '"Montserrat", "Open Sans", "Helvetica", "Arial", sans-serif',
    50    monospace = '"Inconsolata", "Monaco", "Courier New", "Courier", monospace',
    51  }
    52  
    53  export enum FontSize {
    54    largest = "40px",
    55    large = "26px",
    56    default = "20px",
    57    small = "16px",
    58    smallest = "13px",
    59    smallester = "10px",
    60  }
    61  
    62  let unit = 32
    63  
    64  export function SizeUnit(multiplier: number) {
    65    return `${unit * multiplier}px`
    66  }
    67  
    68  export enum Width {
    69    sidebarDefault = 336,
    70    sidebarBreakpoint = 320,
    71    sidebarMinimum = 32,
    72    smallScreen = 1500,
    73    statusIcon = 22,
    74    statusIconMarginRight = 10,
    75  }
    76  
    77  export const overviewItemBorderRadius = "6px"
    78  
    79  // When adding new z-index values, check to see
    80  // if there are conflicting values in constants.scss
    81  export enum ZIndex {
    82    ApiButton = 5,
    83    TableStickyHeader = 999,
    84    SocketBar = 1000,
    85  }
    86  
    87  export enum AnimDuration {
    88    short = "0.15s",
    89    default = "0.3s",
    90    long = "0.6s",
    91  }
    92  
    93  export const mixinHideOnSmallScreen = `
    94  @media screen and (max-width: ${Width.smallScreen}px) {
    95    display: none;
    96  }`
    97  
    98  export const mixinResetListStyle = `
    99    margin: 0;
   100    list-style: none;
   101  `
   102  
   103  export const mixinResetButtonStyle = `
   104    background-color: transparent;
   105    border: 0 none;
   106    padding: 0;
   107    margin: 0;
   108    font-family: inherit;
   109    cursor: pointer;
   110  
   111    // undo Material UI's Button styling
   112    // TODO - maybe we should be doing it like this? https://material-ui.com/customization/globals/#css
   113    letter-spacing: normal;
   114    min-width: 0px;
   115    text-transform: none;
   116    line-height: normal;
   117    font-size: ${FontSize.smallest};
   118    &:hover {
   119      background-color: transparent;
   120    }
   121  `
   122  
   123  export const mixinTruncateText = `
   124    white-space: nowrap;
   125    overflow: hidden;
   126    text-overflow: ellipsis;
   127  `
   128  
   129  export namespace Glow {
   130    export const white = keyframes`
   131      0% {
   132        background-color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
   133      }
   134      50% {
   135        background-color: ${ColorRGBA(Color.white, ColorAlpha.almostTransparent)};
   136      }
   137    `
   138  
   139    export const dark = keyframes`
   140      0% {
   141        background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
   142      }
   143      50% {
   144        background-color: ${ColorRGBA(
   145          Color.gray30,
   146          ColorAlpha.almostTransparent
   147        )};
   148      }
   149    `
   150  
   151    export const opacity = keyframes`
   152      0% {
   153        opacity: 1;
   154      }
   155      50% {
   156        opacity: 0.5;
   157      }
   158    `
   159  }
   160  
   161  export const spin = keyframes`
   162    from {
   163      transform: rotate(0deg);
   164    }
   165  
   166    to {
   167      transform: rotate(360deg);
   168    }
   169  `
   170  
   171  export const barberpole = keyframes`
   172  100% {
   173    background-position: 100% 100%;
   174  }
   175  `