@stackoverfloweth/prefect-design/src/styles/index.css

A collection of low-level Vue components.

@import "@fontsource-variable/inconsolata";
@import "@fontsource-variable/inter";
@import "./scrollbar.css";

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

:root {
  color-scheme: light dark;
}

.dark:root {
  color-scheme: dark;
}
.light:root {
  color-scheme: light;
}

@layer base {
  :root {
    --p-spacing-focus-ring: 2px;
    --p-spacing-focus-ring-offset: 1px;
    --p-radius-default: 6px;
    --p-scrollbar-width: 12px;
    --p-accordion-content-height: 36px;
    /* Prefect Blue is 219, 100, 50  */
    --p-primary-hue: 228;


    --p-destructive: 4 74% 49%;
    --p-destructive-foreground: 0.0 0.0% 100.0%;
    --p-positive: 142 71% 45%;
    --p-neutral: var(--p-primary-hue) 5% 46%;
    --p-warning: 40 92% 50%;

    --p-color-sentiment-positive: hsl(var(--p-positive));
    --p-color-sentiment-neutral: hsl(var(--p-neutral));
    --p-color-sentiment-warning: hsl(var(--p-warning));
    --p-color-sentiment-negative: hsl(var(--p-destructive));
  }

  .dark {
    color-scheme: dark;
    --p-background: var(--p-primary-hue) 6% 16%;

    --p-primary: var(--p-primary-hue) 80.34% 44%;
    --p-primary-foreground: 0.0 0.0% 100.0%;
    --p-accent: var(--p-primary-hue) 6% 24%;
    --p-accent-foreground: 0.0 0.0% 100.0%;
    --p-destructive: 4 74% 49%;
    --p-destructive-foreground: 0.0 0.0% 100.0%;
    --p-card: var(--p-primary-hue) 6% 12%;
    --p-card-foreground: 0.0 0.0% 100.0%;
    --p-border: var(--p-primary-hue) 6% 32%;
    --p-input: var(--p-primary-hue) 6% 32%;
    --p-popover: var(--p-primary-hue) 6% 12%;
    --p-popover-foreground: 0.0 0.0% 100.0%;
    --p-foreground: 0.0 0.0% 100.0%;
    --p-muted: var(--p-primary-hue) 6% 24%;
    --p-ring: var(--p-primary-hue) 87.25% 52%;

    /* Background */
    --p-color-bg-0: hsl(var(--p-primary-hue), 6%, 16%);
    --p-color-bg-1: hsl(var(--p-primary-hue), 6%, 12%);
    --p-color-bg-2: hsl(var(--p-primary-hue), 6%, 16%);
    --p-color-bg-3: hsl(var(--p-primary-hue), 6%, 20%);

    --p-color-bg-floating: hsl(var(--p-primary-hue), 6%, 24%);
    --p-color-bg-floating-sticky: hsl(var(--p-primary-hue) 6% 12% / 0.9);
    --p-color-bg-code: hsl(var(--p-primary-hue), 6%, 8%);
    --p-color-bg-overlay: hsl(0.0 0.0% 0.0% / 0.5);

    /* Root Tokens */
    
    --p-color-divider: hsl(var(--p-border));
    --p-color-divider-subdued: hsl(var(--p-border));
    --p-color-selection-highlight: hsl(var(--p-primary-hue) 100.0% 64% / 0.4);
    --p-color-scrollbar-thumb: hsl(var(--p-primary-hue), 1.98%, 36%);
    --p-color-selected: hsl(var(--p-primary-hue) 20.32% 52% / 0.4);
    --p-color-selectable-hover: hsl(var(--p-primary-hue) 20.32% 52% / 0.24);
    --p-color-focus-ring: hsl(var(--p-primary-hue), 80.0%, 52%);
    --p-color-focus-ring-offset: var(--p-color-bg-0);

    --p-color-live: hsl(var(--p-primary-hue), 100.0%, 68%);

    /* Text */
    
    --p-color-text-default: hsl(var(--p-primary-foreground));
    --p-color-text-subdued: hsl(0.0, 0.0%, 67.84%);
    --p-color-text-inverse: hsl(0.0, 0.0%, 9.02%);
    --p-color-text-link: hsl(206.8, 97.7%, 65.88%);
    --p-color-text-code: hsl(var(--p-primary-hue), 11.71%, 78%);
    --p-color-text-invalid: var(--p-color-sentiment-negative);
    --p-color-text-selected: hsl(195.0, 52.38%, 50.59%);

    /* Syntax Highlighting */
    --p-color-syntax-comment: hsl(var(--p-primary-hue), 9.57%, 44%);
    --p-color-syntax-selector: hsl(356.6, 69.31%, 60.39%);
    --p-color-syntax-parameter: hsl(36.1, 73.21%, 59.02%);
    --p-color-syntax-attribute: hsl(21.7, 69.05%, 50.59%);
    --p-color-syntax-symbol: hsl(159.9, 82.27%, 39.8%);
    --p-color-syntax-title: hsl(var(--p-primary-hue), 100.0%, 68%);
    --p-color-syntax-keyword: hsl(313.3, 69.31%, 60.39%);

    /* Input */
    --p-color-input-bg: var(--p-color-bg-0);
    --p-color-input-border: var(--p-color-divider);
    --p-color-input-text: var(--p-color-text-default);
    --p-color-input-placeholder: var(--p-color-text-subdued);

    --p-color-input-bg-focus: var(--p-color-input-bg);
    --p-color-input-border-focus: var(--p-color-text-subdued);

    --p-color-input-bg-invalid: var(--p-color-input-bg);
    --p-color-input-border-invalid: var(--p-color-sentiment-negative);
    --p-color-input-text-invalid-icon: var(--p-color-sentiment-negative);

    --p-color-input-checked-bg: hsl(var(--p-primary-hue), 80.34%, 44%);
    --p-color-input-checked-border: var(--p-color-selected);
    --p-color-input-checked-text: var(--p-color-text-default);

    --p-input-checkbox-indeterminate-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");

    /* Toggle */
    --p-color-toggle-bg: var(--p-color-divider);
    --p-color-toggle-trigger: var(--p-color-input-text);
    --p-color-toggle-bg-checked: var(--p-color-sentiment-positive);

    /* Button */
    --p-color-button-default-bg: transparent;
    --p-color-button-default-border: var(--p-color-divider);
    --p-color-button-default-text: var(--p-color-text-default);
    --p-color-button-default-bg-hover: var(--p-color-button-default-bg);
    --p-color-button-default-border-hover: var(--p-color-text-subdued);
    --p-color-button-default-text-hover: var(--p-color-button-default-text);
    --p-color-button-default-bg-active: hsl(var(--p-primary-hue), 6%, 8%);
    --p-color-button-default-border-active: var(--p-color-button-default-border-hover);
    --p-color-button-default-text-active: var(--p-color-button-default-text-hover);

    --p-color-button-primary-bg: hsl(var(--p-primary-hue), 80.34%, 44%);
    --p-color-button-primary-border: transparent;
    --p-color-button-primary-text: var(--p-color-text-default);
    --p-color-button-primary-bg-hover: hsl(var(--p-primary-hue), 89.92%, 52%);
    --p-color-button-primary-border-hover: var(--p-color-button-primary-border);
    --p-color-button-primary-text-hover: var(--p-color-button-primary-text);
    --p-color-button-primary-bg-active: hsl(var(--p-primary-hue), 89.8%, 40%);
    --p-color-button-primary-border-active: var(--p-color-button-primary-border-hover);
    --p-color-button-primary-text-active: var(--p-color-button-primary-text-hover);

    --p-color-button-danger-bg: transparent;
    --p-color-button-danger-border: var(--p-color-sentiment-negative);
    --p-color-button-danger-text: var(--p-color-text-default);
    --p-color-button-danger-bg-hover: hsl(3.9 73.6% 49.02% / 0.2);
    --p-color-button-danger-border-hover: var(--p-color-button-danger-border);
    --p-color-button-danger-text-hover: var(--p-color-button-danger-text);
    --p-color-button-danger-bg-active: hsl(3.9 73.6% 49.02% / 0.4);
    --p-color-button-danger-border-active: var(--p-color-button-danger-border-hover);
    --p-color-button-danger-text-active: var(--p-color-button-danger-text-hover);

    --p-color-button-primary-danger-bg: var(--p-color-sentiment-negative);
    --p-color-button-primary-danger-border: transparent;
    --p-color-button-primary-danger-text: var(--p-color-text-default);
    --p-color-button-primary-danger-bg-hover: hsl(3.9, 99.02%, 60.0%);
    --p-color-button-primary-danger-border-hover: var(--p-color-button-primary-danger-border);
    --p-color-button-primary-danger-text-hover: var(--p-color-button-primary-danger-text);
    --p-color-button-primary-danger-bg-active: hsl(4.1, 82.08%, 41.57%);
    --p-color-button-primary-danger-border-active: var(--p-color-button-primary-danger-border-hover);
    --p-color-button-primary-danger-text-active: var(--p-color-button-primary-danger-text-hover);

    --p-color-button-flat-bg: transparent;
    --p-color-button-flat-border: transparent;
    --p-color-button-flat-text: var(--p-color-text-default);
    --p-color-button-flat-bg-hover: hsl(var(--p-primary-hue) 4.68% 44% / 0.4);
    --p-color-button-flat-border-hover: var(--p-color-button-flat-border);
    --p-color-button-flat-text-hover: var(--p-color-button-flat-text);
    --p-color-button-flat-bg-active: hsl(var(--p-primary-hue) 4.68% 48% / 0.8);
    --p-color-button-flat-border-active: var(--p-color-button-flat-border-hover);
    --p-color-button-flat-text-active: var(--p-color-button-flat-text-hover);

    --p-color-button-flat-danger-bg: transparent;
    --p-color-button-flat-danger-border: transparent;
    --p-color-button-flat-danger-text: var(--p-color-sentiment-negative);
    --p-color-button-flat-danger-bg-hover: hsl(3.9 73.6% 49.02% / 0.2);
    --p-color-button-flat-danger-border-hover: var(--p-color-button-flat-danger-border);
    --p-color-button-flat-danger-text-hover: var(--p-color-button-flat-danger-text);
    --p-color-button-flat-danger-bg-active: hsl(3.9 73.6% 49.02% / 0.4);
    --p-color-button-flat-danger-border-active: var(--p-color-button-flat-danger-border-hover);
    --p-color-button-flat-danger-text-active: var(--p-color-button-flat-danger-text-hover);

    --p-color-button-selected-bg: var(--p-color-selected);
    --p-color-button-selected-border: transparent;
    --p-color-button-selected-text: var(--p-color-text-default);

    /* Message */
    --p-color-message-info-bg: hsl(var(--p-primary-hue), 42.17%, 32%);
    --p-color-message-info-text: var(--p-color-text-default);

    --p-color-message-warning-bg: var(--p-color-sentiment-warning);
    --p-color-message-warning-text: var(--p-color-text-inverse);

    --p-color-message-error-bg: var(--p-color-sentiment-negative);
    --p-color-message-error-text: var(--p-color-text-default);

    --p-color-message-success-bg: var(--p-color-sentiment-positive);
    --p-color-message-success-text: var(--p-color-text-default);

    /* Tag */
    --p-color-tag-bg: var(--p-color-divider);
    --p-color-tag-border: transparent;
    --p-color-tag-text: var(--p-color-text-default);
  }

  .light {
    color-scheme: light;
    --p-background: var(--p-primary-hue) 3.23% 92%;

    --p-primary: var(--p-primary-hue) 80.34% 44%;
    --p-primary-foreground: var(--p-primary-hue) 0.0% 100.0%;
    --p-accent: var(--p-primary-hue) 0.0% 92%;
    --p-accent-foreground: var(--p-primary-hue) 6% 9.02%;
    --p-destructive: 4 74% 49%;
    --p-destructive-foreground: 0.0 0.0% 100.0%;
    --p-input: var(--p-primary-hue) 11.3% 76%;
    --p-card: var(--p-primary-hue) 0.0% 100.0%;
    --p-card-foreground: var(--p-primary-hue) 6% 9.02%;
    --p-border: var(--p-primary-hue) 11.3% 76%;
    --p-popover: var(--p-primary-hue) 0.0% 100.0%;
    --p-popover-foreground: var(--p-primary-hue) 6% 9.02%;
    --p-foreground: var(--p-primary-hue) 6% 9.02%;
    --p-muted: var(--p-primary-hue) 6% 86%;
    --p-ring: var(--p-primary-hue) 87.25% 52%;

    /* Background */
    --p-color-bg-0: hsl(var(--p-primary-hue), 3.23%, 92%);
    --p-color-bg-1: hsl(var(--p-primary-hue), 0.0%, 100.0%);
    --p-color-bg-2: hsl(var(--p-primary-hue), 0.0%, 96%);
    --p-color-bg-3: hsl(var(--p-primary-hue), 0.0%, 92%);
    --p-color-bg-floating: hsl(var(--p-primary-hue), 0.0%, 100%);
    --p-color-bg-floating-sticky: hsl(var(--p-primary-hue) 0.0% 100.0% / 0.8);
    --p-color-bg-code: hsl(var(--p-primary-hue), 8.2%, 88%);
    --p-color-bg-overlay: hsl(0.0 0.0% 0.0% / 0.5);

    /* Root Tokens */
    --p-color-divider: hsl(var(--p-border));
    --p-color-divider-subdued: hsl(var(--p-primary-hue), 14.29%, 96%);
    --p-color-selection-highlight: hsl(var(--p-primary-hue) 100.0% 64% / 0.4);
    --p-color-scrollbar-thumb: hsl(var(--p-primary-hue), 1.04%, 64%);
    --p-color-selected: hsl(var(--p-primary-hue) 17.93% 50.78% / 0.24);
    --p-color-selectable-hover: hsl(var(--p-primary-hue) 17.93% 52% / 0.16);
    --p-color-focus-ring: hsl(var(--p-primary-hue), 87.25%, 52%);
    --p-color-focus-ring-offset: var(--p-color-bg-1);

    --p-color-live: hsl(var(--p-primary-hue), 100.0%, 64%);

    /* Text */
    --p-color-text-default: hsl(var(--p-primary-hue), 6%, 9.02%);
    --p-color-text-subdued: hsl(var(--p-primary-hue), 6%, 48%);
    --p-color-text-inverse: hsl(0.0, 0.0%, 100.0%);
    --p-color-text-link: hsl(var(--p-primary-hue), 87.25%, 52%);
    --p-color-text-code: hsl(0.0, 0.0%, 23.92%);
    --p-color-text-invalid: var(--p-color-sentiment-negative);
    --p-color-text-selected: hsl(195.1, 58.38%, 38.63%);

    /* Syntax Highlighting */
    --p-color-syntax-comment: hsl(var(--p-primary-hue), 9.57%, 44%);
    --p-color-syntax-selector: hsl(356.7, 81.22%, 51.96%);
    --p-color-syntax-parameter: hsl(36.1, 100.0%, 39.8%);
    --p-color-syntax-attribute: hsl(21.8, 100.0%, 43.73%);
    --p-color-syntax-symbol: hsl(159.7, 77.38%, 32.94%);
    --p-color-syntax-title: hsl(var(--p-primary-hue), 100.0%, 68%);
    --p-color-syntax-keyword: hsl(313.3, 69.31%, 60.39%);

    /* Input */
    --p-color-input-bg: var(--p-color-bg-1);
    --p-color-input-border: var(--p-color-divider);
    --p-color-input-text: var(--p-color-text-default);
    --p-color-input-placeholder: var(--p-color-text-subdued);

    --p-color-input-bg-focus: var(--p-color-input-bg);
    --p-color-input-border-focus: var(--p-color-text-subdued);

    --p-color-input-bg-invalid: var(--p-color-input-bg);
    --p-color-input-border-invalid: var(--p-color-sentiment-negative);
    --p-color-input-text-invalid-icon: var(--p-color-sentiment-negative);

    --p-color-input-checked-bg: hsl(var(--p-primary-hue), 96.24%, 60%);
    --p-color-input-checked-border: var(--p-color-selected);
    --p-color-input-checked-text: var(--p-color-text-default);

    /* Note: this url has a hardcoded usage of `--p-color-text-default` here however it uses `%23171717` instead of `hsl(0.0, 0.0%, 9.02%)` since `#` within a url is a fragment. -*/
    --p-input-checkbox-indeterminate-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='' viewBox='0 0 16 16'%3e%3cpath stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");

    /* Toggle */
    --p-color-toggle-bg: var(--p-color-input-border);
    --p-color-toggle-trigger: var(--p-color-text-inverse);
    --p-color-toggle-bg-checked: var(--p-color-sentiment-positive);

    /* Button */
    --p-color-button-default-bg: var(--p-color-bg-1);
    --p-color-button-default-border: var(--p-color-divider);
    --p-color-button-default-text: var(--p-color-text-default);
    --p-color-button-default-bg-hover: var(--p-color-button-default-bg);
    --p-color-button-default-border-hover: var(--p-color-text-subdued);
    --p-color-button-default-text-hover: var(--p-color-button-default-text);
    --p-color-button-default-bg-active: hsl(var(--p-primary-hue), 11.63%, 92%);
    --p-color-button-default-border-active: var(--p-color-button-default-border-hover);
    --p-color-button-default-text-active: var(--p-color-button-default-text-hover);

    --p-color-button-primary-bg: hsl(var(--p-primary));
    --p-color-button-primary-border: transparent;
    --p-color-button-primary-text: var(--p-color-text-inverse);
    --p-color-button-primary-bg-hover: hsl(var(--p-primary-hue), 89.92%, 52%);
    --p-color-button-primary-border-hover: var(--p-color-button-primary-border);
    --p-color-button-primary-text-hover: var(--p-color-button-primary-text);
    --p-color-button-primary-bg-active: hsl(var(--p-primary-hue), 89.8%, 40%);
    --p-color-button-primary-border-active: var(--p-color-button-primary-border-hover);
    --p-color-button-primary-text-active: var(--p-color-button-primary-text-hover);

    --p-color-button-danger-bg: var(--p-color-button-default-bg);
    --p-color-button-danger-border: var(--p-color-sentiment-negative);
    --p-color-button-danger-text: var(--p-color-text-default);
    --p-color-button-danger-bg-hover: hsl(4.0, 71.43%, 95.88%);
    --p-color-button-danger-border-hover: var(--p-color-button-danger-border);
    --p-color-button-danger-text-hover: var(--p-color-button-danger-text);
    --p-color-button-danger-bg-active: hsl(3.2, 72.55%, 90.0%);
    --p-color-button-danger-border-active: var(--p-color-button-danger-border-hover);
    --p-color-button-danger-text-active: var(--p-color-button-danger-text-hover);

    --p-color-button-primary-danger-bg: var(--p-color-sentiment-negative);
    --p-color-button-primary-danger-border: transparent;
    --p-color-button-primary-danger-text: var(--p-color-text-inverse);
    --p-color-button-primary-danger-bg-hover: hsl(3.9, 99.02%, 60.0%);
    --p-color-button-primary-danger-border-hover: var(--p-color-button-primary-danger-border);
    --p-color-button-primary-danger-text-hover: var(--p-color-button-primary-danger-text);
    --p-color-button-primary-danger-bg-active: hsl(4.1, 82.08%, 41.57%);
    --p-color-button-primary-danger-border-active: var(--p-color-button-primary-danger-border-hover);
    --p-color-button-primary-danger-text-active: var(--p-color-button-primary-danger-text-hover);

    --p-color-button-flat-bg: transparent;
    --p-color-button-flat-border: transparent;
    --p-color-button-flat-text: var(--p-color-text-default);
    --p-color-button-flat-bg-hover: hsla(var(--p-primary-hue), 6%, 48%, 0.4);
    --p-color-button-flat-border-hover: var(--p-color-button-flat-border);
    --p-color-button-flat-text-hover: var(--p-color-button-flat-text);
    --p-color-button-flat-bg-active: hsl(var(--p-primary-hue) 4.68% 48% / 0.8);
    --p-color-button-flat-border-active: var(--p-color-button-flat-border-hover);
    --p-color-button-flat-text-active: var(--p-color-button-flat-text-hover);

    --p-color-button-flat-danger-bg: transparent;
    --p-color-button-flat-danger-border: transparent;
    --p-color-button-flat-danger-text: var(--p-color-sentiment-negative);
    --p-color-button-flat-danger-bg-hover: hsl(3.9 73.6% 49.02% / 0.2);
    --p-color-button-flat-danger-border-hover: var(--p-color-button-flat-danger-border);
    --p-color-button-flat-danger-text-hover: var(--p-color-button-flat-danger-text);
    --p-color-button-flat-danger-bg-active: hsl(3.9 73.6% 49.02% / 0.4);
    --p-color-button-flat-danger-border-active: var(--p-color-button-flat-danger-border-hover);
    --p-color-button-flat-danger-text-active: var(--p-color-button-flat-danger-text-hover);

    --p-color-button-selected-bg: var(--p-color-selected);
    --p-color-button-selected-border: var(--p-color-button-default-border);
    --p-color-button-selected-text: var(--p-color-text-default);

    /* Message */
    --p-color-message-info-bg: hsl(var(--p-primary-hue), 100.0%, 84%);
    --p-color-message-info-text: var(--p-color-text-default);

    --p-color-message-warning-bg: var(--p-color-sentiment-warning);
    --p-color-message-warning-text: var(--p-color-text-default);

    --p-color-message-error-bg: var(--p-color-sentiment-negative);
    --p-color-message-error-text: var(--p-color-text-inverse);

    --p-color-message-success-bg: var(--p-color-sentiment-positive);
    --p-color-message-success-text: var(--p-color-text-inverse);

    /* Tag */
    --p-color-tag-bg: hsl(var(--p-primary-hue), 13.43%, 88%);
    --p-color-tag-border: transparent;
    --p-color-tag-text: var(--p-color-text-default);
  }
}



html {
  transition: inherit;
}

html,
body {
  background-color: var(--p-color-bg-0);
  color: var(--p-color-text-default);
  scrollbar-width: thin;
}

*::selection {
  background-color: var(--p-color-selection-highlight);
  
}

.p-background {
  background-color: var(--p-color-bg-1);
}
.p-background .p-background {
  background-color: var(--p-color-bg-2);
}
.p-background .p-background .p-background {
  background-color: var(--p-color-bg-3);
}