tesseract/showcases/web-kitchensink-reactnext/src/styles/globals.css

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

/* TODO add to tesseract plugin */
@layer base {
  :root {
    --color-sidebar: 29 29 29;
    --color-topbar: 19 19 19;
  }

  h1 {
    @apply font-headings lowercase text-5xl font-thin leading-none my-8;
  }

  h2 {
    @apply font-headings lowercase text-4xl font-light leading-none my-8;
  }

  h3 {
    @apply font-headings lowercase text-3xl leading-none my-8;
  }

  h4 {
    @apply font-headings lowercase text-2xl leading-none my-8;
  }

  h5 {
    @apply font-headings lowercase text-xl leading-none my-8;
  }

  h6 {
    @apply font-headings lowercase text-lg leading-none my-8;
  }

  p {
    @apply my-8;
  }

  small {
    font-size: 0.75em;
  }

  a {
    @apply ring-secondary/50 rounded text-primary p-1 -m-1 underline;
  }

  a.no-underline {
    text-decoration: none;
  }

  a:focus {
    @apply ring-4 text-secondary;
    outline: 0;
  }

  a:active {
    @apply ring-tertiary/50 text-tertiary;
  }

  a.focus\:text-negative:focus {
    color: rgb(var(--color-negative));
  }

  a.active\:text-negative:active {
    color: rgb(var(--color-negative));
  }

  /*pre {*/
  /*  overflow: auto;*/
  /*  margin: 0 -1rem;*/
  /*  padding: 0 1rem;*/
  /*  line-height: 1.2;*/
  /*  box-sizing: border-box;*/
  /*}*/

  @media only print {
    pre, pre * {
      color: inherit !important;
    }

    code, code * {
      color: inherit !important;
    }

    img {
      filter: grayscale(100%);
    }

    :root {
      --color-accent: black !important;
      --color-active: black !important;
    }
  }
}

:root .rti--container {
  --rti-bg: transparent;
  --rti-border: transparent;
  --rti-main: transparent;
  --rti-radius: 0;
  --rti-s: 0.5rem;
  --rti-tag: transparent;
  --rti-tag-remove: transparent;
  --rti-tag-padding: 0 0;
}

.highlight .token.number { color: rgb(var(--color-code-number)); }
.highlight .token.keyword { color: rgb(var(--color-code-keyword)); }
.highlight .token.tag { color: rgb(var(--color-code-keyword)); }
.highlight .token.type { color: rgb(var(--color-code-type)); }
.highlight .token.instance-attribute { color: rgb(var(--color-code-instance-attribute)); }
.highlight .token.maybe-class-name { color: rgb(var(--color-code-function)); font-style: italic; }
.highlight .token.function { color: rgb(var(--color-code-function)); font-style: italic; }
.highlight .token.parameter { color: rgb(var(--color-code-parameter)); }
.highlight .token.property { color: rgb(var(--color-code-property)); }
.highlight .token.attr-name { color: rgb(var(--color-code-property)); font-style: italic; }
.highlight .token.string { color: rgb(var(--color-code-string)); }
.highlight .token.attr-value { color: rgb(var(--color-code-string)); }
.highlight .token.attr-value .attr-equals { color: rgb(var(--color-positive)); }
.highlight .token.variable { color: rgb(var(--color-code-variable)); }
.highlight .token.regexp { color: rgb(var(--color-code-regexp)); }
.highlight .token.url { color: rgb(var(--color-code-url)); }
.highlight .token.global { color: rgb(var(--color-code-global)); }
.highlight .token.comment { opacity: 0.5; }

.highlight .x00 { color: rgb(var(--color-code-keyword)); }
.highlight .x10 { color: rgb(var(--color-code-global)); }
.highlight .x20 { color: rgb(var(--color-code-string)); }
.highlight .x30 { color: rgb(var(--color-code-number)); }
.highlight .x40 { color: rgb(var(--color-code-url)); }
.highlight .x50 { color: rgb(var(--color-code-type)); }
.highlight .x60 { color: rgb(var(--color-code-parameter)); }
.highlight .x70 { color: rgb(var(--color-code-property)); }
.highlight .x80 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-keyword)); }
.highlight .x90 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-global)); }
.highlight .xa0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-string)); }
.highlight .xb0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-number)); }
.highlight .xc0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-url)); }
.highlight .xd0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-type)); }
.highlight .xe0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-parameter)); }
.highlight .xf0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-property)); }

.focus\:outline-0:-moz-focusring {
  outline: 0;
}