github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/constants.scss (about)

     1  // TYPOGRAPHY
     2  $font-monospace: "Inconsolata", monospace;
     3  $font-sans-serif: "Montserrat", sans-serif;
     4  $font-size: 20px;
     5  $font-size-large: 26px;
     6  $font-size-small: 16px;
     7  $font-size-smallest: 13px;
     8  $font-size-icon: 24px;
     9  
    10  // COLORS
    11  // Monochrome
    12  $color-white: #ffffff;
    13  $color-off-white: #eef1f1;
    14  $color-black: #000000;
    15  $color-gray-50: #586e75; // Solarized base01
    16  $color-gray-30: #073642; // Solarized base02
    17  $color-gray-20: #002b36; // Solarized base03 (darkest bg tone)
    18  $color-gray-10: #001b20; // Brand
    19  
    20  // Legacy grayscale
    21  $color-gray-darker: #00242d;
    22  $color-gray-lightest: #93a1a1; // Solarized base1 (darkest content tone)
    23  
    24  // Brand Colors
    25  $color-green: #20ba31;
    26  $color-green-light: #70d37b;
    27  $color-blue: #03c7d3;
    28  $color-blue-light: #5edbe3;
    29  $color-blue-dark: #007d82;
    30  $color-purple: #6378ba;
    31  $color-red: #f6685c;
    32  $color-pink: #ef5aa0;
    33  $color-yellow: #fcb41e;
    34  
    35  $translucent: 0.3;
    36  $translucent-ish: 0.7;
    37  
    38  // LAYOUT
    39  $spacing-unit: 32px;
    40  
    41  $topbar-height: $spacing-unit * 2.25;
    42  $tabnav-height: $topbar-height;
    43  $tabnav-width: 160px; // Fits our current labels
    44  $analyticsNudge-height: $tabnav-height * 1.5;
    45  $alert-badge: $spacing-unit * 0.75;
    46  $modal-width: $spacing-unit * 15;
    47  
    48  $logLine-separator-height: 2px;
    49  $logLine-gutter-width: 6px;
    50  
    51  $statusbar-tiltPanel-width: $spacing-unit * 1.75;
    52  
    53  $tablet-width: 1500px;
    54  
    55  $statusbar-height: $spacing-unit * 1.5; // Height.statusbar
    56  
    57  // Z-Index
    58  $z-modal: 3000;
    59  $z-analyticsNudge: 2000;
    60  
    61  // MISC
    62  $animation-timing: 200ms;
    63  
    64  @mixin button-text() {
    65    font-family: $font-sans-serif;
    66    line-height: 1;
    67    font-size: $font-size-small;
    68    text-transform: uppercase;
    69  }
    70  
    71  .u-hide {
    72    display: none !important;
    73    visibility: hidden !important;
    74  }
    75  .u-flexColumn {
    76    display: flex !important;
    77    flex-direction: column !important;
    78  }
    79  .u-flexRow {
    80    display: flex !important;
    81    flex-direction: row !important;
    82  }