index.css

/**
 * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
 * Licensed under the GNU Affero General Public License (AGPL).
 * See License.AGPL.txt in the project root for license information.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Setup colors for different themes */
    /* Using rgb color channels here to work well w/ tailwind classes */
    /* https: //tailwindcss.com/docs/customizing-colors#using-css-variables */
    :root {
        /* Setup RGB color channel variables */
        --black: 22 22 22; /* #161616 */
        --white: 255 255 255; /* #FFFFFF */
        /* TODO: determine if these are the reds we want - need to have correct contrast */
        --red-600: 220 38 38;
        --red-400: 248 68 68;
        --gray-900: 18 16 12; /* #12100C */
        --gray-850: 21 19 16; /* #151310 */
        --gray-800: 35 33 30; /* #23211E */
        --gray-750: 44 43 40; /* #2C2B28 */
        --gray-700: 81 79 77; /* #514F4D */
        --gray-600: 86 84 81; /* #565451 */
        --gray-500: 102 101 100; /* #666564 */
        --gray-450: 153 151 149; /* #999795 */
        --gray-400: 116 115 114; /* #747372 */
        --gray-300: 218 218 218; /* #DADADA */
        --gray-200: 236 231 229; /* #ECE7E5 */
        --gray-100: 245 244 244; /* #F5F4F4 */
        --gray-50: 249 249 249; /* #F9F9F9 */

        /* Content */
        --content-primary: var(--gray-900);
        --content-secondary: var(--gray-600);
        --content-tertiary: var(--gray-400);
        --content-disabled: var(--gray-450);
        --content-invert-primary: var(--gray-200);
        --content-invert-secondary: var(--gray-400);
        --content-danger: var(--red-600);

        /* Surfaces */
        --surface-primary: var(--white);
        --surface-secondary: var(--gray-50);
        --surface-tertiary: var(--gray-100);
        --surface-labels: var(--gray-200);
        --surface-invert: var(--gray-850);
        --surface-01: var(--dark-surface-01);

        /* Borders */
        --border-base: var(--gray-200);
        --border-light: var(--gray-100);
        --border-strong: var(--gray-500);
        --border-invert: var(--gray-600);
    }

    /* Dark mode color adjustments */
    :root[class~="dark"] {
        /* Content */
        --content-primary: var(--gray-200);
        --content-secondary: var(--gray-450);
        --content-tertiary: var(--gray-500);
        --content-disabled: var(--gray-600);
        --content-invert-primary: var(--gray-900);
        --content-invert-secondary: var(--gray-450);
        --content-danger: var(--red-400);

        /* Surfaces */
        --surface-primary: var(--gray-850);
        --surface-secondary: var(--gray-800);
        --surface-tertiary: var(--gray-750);
        --surface-labels: var(--gray-700);
        --surface-invert: var(--gray-50);
        --surface-01: var(--gray-100);

        /* Borders */
        --border-base: var(--gray-700);
        --border-light: var(--gray-800);
        --border-strong: var(--gray-500);
        --border-invert: var(--gray-400);
    }

    html,
    body {
        @apply h-full;
    }
    body {
        @apply bg-white dark:bg-gitpod-black text-black dark:text-white;
    }
    body[style] {
        /* https://github.com/gitpod-io/gitpod/pull/18979#discussion_r1380773740 */
        margin: 0 auto !important;
    }
    p {
        @apply text-sm text-pk-content-secondary;
    }

    .app-container {
        @apply lg:px-28 px-4;
    }
    .dark .dark\:filter-invert {
        @apply filter-invert;
    }
    .grayed {
        filter: grayscale(100%);
    }
    .grayed:hover {
        filter: none;
    }
}

@layer components {
    .gp-link {
        @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 cursor-pointer;
    }

    code {
        @apply bg-gray-100 dark:bg-gray-800 text-pk-content-primary px-1.5 py-0.5 rounded-md text-sm font-mono font-medium;
    }

    textarea,
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    select {
        @apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-lg border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
    }
    textarea::placeholder,
    input[type="text"]::placeholder,
    input[type="tel"]::placeholder,
    input[type="number"]::placeholder,
    input[type="search"]::placeholder,
    input[type="password"]::placeholder,
    input[type="email"]::placeholder,
    input[type="url"]::placeholder {
        @apply text-gray-400 dark:text-gray-500;
    }
    input[type="text"].error,
    input[type="tel"].error,
    input[type="number"].error,
    input[type="search"].error,
    input[type="password"].error,
    input[type="email"].error,
    input[type="url"].error,
    select.error {
        @apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
    }
    select[disabled],
    textarea[disabled],
    input[disabled] {
        @apply bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500;
    }
    input[type="radio"] {
        @apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
    }

    /* Search */
    input[type="search"] {
        @apply border-0 dark:bg-gray-800 bg-gray-50 text-gray-600 dark:text-gray-400 rounded-lg focus:border-gray-400 dark:focus:border-gray-400 focus:outline-none focus:ring ring-0 focus:ring-blue-400 dark:focus:ring-blue-500 transition ease-in-out;
    }
    input[type="checkbox"] {
        @apply disabled:opacity-50;
    }
    progress {
        @apply h-2 rounded;
    }
    progress::-webkit-progress-bar {
        @apply rounded-md bg-gray-200 dark:bg-gray-600;
    }
    progress::-webkit-progress-value {
        @apply rounded-md bg-green-500;
    }
    progress::-moz-progress-bar {
        @apply rounded-md bg-green-500;
    }
}