Grammarly Dark by aruncveli

/* ==UserStyle==
@name           Grammarly Dark
@namespace      github.com/aruncveli/userstyles
@version        24.10.14
@description    description
@author         Arun Chandanaveli <aruncveli@gmail.com> (https://github.com/aruncveli)
@homepageURL    https://github.com/aruncveli/userstyles
@supportURL     https://github.com/aruncveli/userstyles/issues
@license        MIT
@preprocessor   stylus
@var color cfg "Foreground" white
@var color cbg "Background" black
@var color cbg1 "Background lightened 1" #111111
@var color cbg2 "Background lightened 2" #222222
==/UserStyle== */

fg()
  color cfg

bg(color = cbg)
  background-color color

bg1()
  bg(cbg1)

bg2()
  bg(cbg2)

bsu()
  box-shadow unset

@-moz-document url-prefix("https://app.grammarly.com/ddocs")
  :root
    color-scheme dark

    c = --color-
    b = -base-
    bgb = background + b
    tb = text + b
    ib = icon + b
    bdb = border + b
    d = default
    s = subdued
    {c}{bgb}{d} cbg
    {c}{bgb}{s} cbg1
    {c}background-neutral-{d} cbg
    {c}{bdb}{s} cbg
    {c}{bdb}{d} cbg1
    {c}{tb}{d} cfg
    {c}{tb}{s} cfg
    {c}{ib}{d} cfg
    {c}elevation-outline-{d}{"-1"} cbg

    bt = --button-tertiary-
    h = hover
    bgh = background- + h
    t = text-
    {bt}{bgh} cbg2
    {bt}border-{h} unset
    {bt}{t}{d} cfg
    {bt}{t}{h} cfg
    {bt}background-active cbg1
    {bt}{t}active cfg

  .toolbar-
    &toolbarTitleContainer_f18wroqg
      background cbg
    &wordCounter_ftobdvv
      bg()
    &headerTitle
      &Highlight_f11ekwp8
      &ContainerFocused_fpo367h
        &:before
          bg1()

  .fqelrj5 // Editor content
  .fal6plv // Name
  .f1riuydc // Score/performance modal texts
  .fq061rn // Headings in Performance dialog
  .f10buadf // Smaller texts in Readability section
  .f1vn8v6g // Saved status
  .fhsusol // Overall score
  ._b08aac52-footer-footerLabel // Readability score label
  .f1rx9jzm // Document heading
  .fjlhwhm // Goals dialog headings
  .fc6omth // Assistant suggestion content
  .feu4lv1 // Assistant suggestions headings
    fg()

  ._f0f464d7-footer-footerWrapper
  ._de72bac6-footer-fContainer
  .fkhz08q // Assistant footer
  main
  .f10wkw6u .f113r6od:not([data-active='true'])
  .f113r6od
  .fe88rpf
  .fqa53j6
  .f1dyakn9
    bg()


  .f1aw243f // Suggestions tooltip
  .listItem_f18hii0e // Suggestions tooltip item
    bg1()

  .f1fk53u7:hover // Suggestions tooltip item
    bg2()

  .f1aunnt9
    fg()
    &:not([data-disabled='true'])[data-hovered='true'] // weird buttons in the left side panel
      bg1()

  dataIds2 = ":not([data-disabled='true']):not([aria-disabled='true'])"
  dataIds3 = dataIds2 + "[data-hovered='true']"

  .f1lo3unn:not([data-disabled='true'])[data-hovered='true'] // Suggestions tooltip button
    bg2()

  .fvnnys1{dataIds3}
    bg1()
    fg()

  .f1u61vn1
    fg()
    &{dataIds3}
      bg1()
      box-shadow unset

  .fsk4xi
    &{dataIds3}
      bg1()
    &{dataIds2}[data-active='true']
      bg2()
    > i
      fill fg !important

  .f1todjtg
    &:hover
    &:focus
      bg1()


  ._8dab8e44-document_settings-separator
  ._fbad2f66-synonyms-wrapper
  ._c203692f-synonyms-emptyResultWrapper
    bg1()

  ._8bbcd63e-formatting-toolbar-item
    &[data-active=false][data-hovered=false]>i[data-role=icon]>svg
    &[data-active=false][data-hovered=true]>i[data-role=icon]>svg
      fill fg
    &:hover
      bg1()

  ._70c2ea48-document_settings-documentSettings
    bg()
  .modal-
    &body_f1orqs7k
    &footer_f1v9ogc7
      bg()
  .modalHeader_ffbp2bq
    bg()

  // weird buttons
  .f1u0d4ph:not([data-disabled='true']):not([aria-disabled='true']):hover
  :not([data-disabled='true'])[data-hovered='true'] > .cheetah_button-buttonContent_fq5jbwy
  .triggerButton_f1l4zisq[data-active="true"]
    bg1()

  .navigation-outcomeBtnBorders_f1kskyj5[data-active='true']
    bg1()
    fg()

  .menuItem_ffsq1m9
    &:hover
    &:focus-visible
    &:focus
      bg1()

  ._f564a3b5-document_settings-menuHead
    bsu()

  .oggyWrapper_f16zfgaf
    bg()
    bsu()

  .f115rtmw // Assistant header
    border-bottom unset

  // Assistant
  .oggy-oggyWrapper
    &_f1y9tgv0 > div
      border unset
      bsu()
    &WithNavigation_fx1921y > div
      bsu()

  // Plagiarism and AI text
  .fk78ga
    border-top-width 0px

  .header-
    &performanceBtnHigh_f1h0pymt
    &headerBtn_f6q89uo
      border unset

  ._1d9f2970-document_actions-outcomeDocumentActionsFull:before
    background unset

  .cheetah_button-button
    &Content_fq5jbwy
      bg()
      fg()
    &_f1ncib7
      border unset

  .toolbarIcon_f1qxzied
    stroke fg

  gb = ".gds-button-"
  {gb}tertiary{gb}pressed
    bsu()

  // 4. Tone (violet)
  for frame in fd4lfih f14nvp94 f12ab1sv f1flb63c
    @keyframes frame
      100%
        bg1()

  // Performance/score dialog headings
  .sectionHeader
    &Underline_fs3keob
    &Wrapper_f10kg88j
      border-bottom-color cbg

  // Goals dialog
  .modalHeader_ffbp2bq:after
    bg()
  .row_fmjb5au:not(:last-child)
    border-bottom-color cbg