chore: Reflects latest theme changes from Nyxt master on docs

1 files changed, 47 insertions, 36 deletions

diff --git a/README b/README
index 7abd086..b3c9655 100644
--- a/README
+++ b/README
@@ -6,7 +6,7 @@
 To install the extension, you should download the source and place it in Nyxt's extensions path, given by the value of =(nyxt-source-registry)= (by default =~/.local/share/nyxt/extensions=).
 
 #+begin_src sh
-git clone https://github.com/efimerspan/nx-tailor ~/.local/share/nyxt/nx-tailor
+git clone https://github.com/efimerspan/nx-tailor ~/.local/share/nyxt/extensions/nx-tailor
 #+end_src
 
 The extension works with *Nyxt 3 onward*, so ensure to use it with the latest version of Nyxt master for the time being.
@@ -45,23 +45,23 @@ Where =/path/to/tailor.lisp= is a custom file that should be created to provide
     (list
      (make-theme "Modus Operandi"
                  :background-color "white"
-                 :text-color "black"
+                 :on-background-color "black"
                  :primary-color "#093060"
-                 :secondary-color "#f0f0f0"
-                 :tertiary-color "#dfdfdf"
-                 :quaternary-color "#005a5f"
+                 :secondary-color "#dfdfdf"
+                 :on-secondary-color "#f0f0f0"
                  :accent-color "#8f0075"
+                 :on-accent-color "#005a5f"
                  :font-family "Iosevka"
                  :cut (make-instance 'tailor:cut))
      (make-theme "Modus Vivendi"
                  :dark-p t
                  :background-color "black"
-                 :text-color "white"
+                 :on-background-color "white"
                  :primary-color "#c6eaff"
                  :secondary-color "#323232"
-                 :tertiary-color "#323232"
-                 :quaternary-color "#a8a8a8"
+                 :on-secondary-color "#323232"
                  :accent-color "#afafef"
+                 :on-accent-color "#a8a8a8"
                  :font-family "Iosevka"
                  :cut (make-instance 'tailor:cut))))))
 #+end_src
@@ -69,6 +69,8 @@ Where =/path/to/tailor.lisp= is a custom file that should be created to provide
 Above, we define some themes with a name and a set of theme attributes from the built-in =nyxt/theme= library. Optionally, each internal theme can take a =cut=, a list of CSS rules for various UI elements to give the browser a more custom look and allowing dynamic theme change without having to restart the browser, useful if you're the kind of person who switches between light and dark themes depending on the time of the day. A =cut= effectively aims at simplifying themeing, which is normally achieved by having to look through the =style= slot of multiple classes.
 
 #+begin_src lisp
+(import 'tailor:make-important)
+
 (define-configuration tailor:cut
   ((tailor:name "Minimal")
    (tailor:prompt
@@ -76,19 +78,21 @@ Above, we define some themes with a name and a set of theme attributes from the
       ("#prompt-modes"
        :display "none")
       ("#prompt-area"
-       :background-color theme:tertiary
-       :color theme:quaternary
+       :background-color theme:secondary
+       :color theme:on-secondary
        :border "1px solid"
-       :border-color (if (theme:dark-p theme:theme) theme:quaternary theme:text))
+       :border-color (if (theme:dark-p theme:theme)
+                         theme:on-secondary
+                         theme:on-background))
       ("#input"
-       :background-color theme:tertiary
-       :color theme:text)
+       :background-color theme:secondary
+       :color theme:on-background)
       (".source-content"
        :border "none"
        :border-collapse collapse)
       (".source-name"
        :background-color theme:background
-       :color theme:text
+       :color theme:on-background
        :font-style "italic")
       (".source-content th"
        :padding-left "0"
@@ -99,43 +103,49 @@ Above, we define some themes with a name and a set of theme attributes from the
       ("#selection"
        :font-weight "bold"
        :background-color theme:secondary
-       :color theme:text)))
+       :color theme:on-background)))
    (tailor:user-buffer
-    '((body
+    '(("*, body, div, section, input"
        :font-family theme:font-family
        :background-color theme:background
-       :color theme:text)
+       :color theme:on-background)
       ("h1,h2,h3,h4,h5,h6"
        :font-family "IBM Plex Sans"
-       :color theme:primary)
-      ("p,pre,td"
+       :color (make-important theme:primary))
+      ("p,pre,td,dt"
        :font-family "IBM Plex Sans"
-       :color theme:text)
+       :color theme:on-background)
       (pre
-       :background-color theme:tertiary)
-      ("button,a:link"
-       :color theme:text
+       :font-family "Iosevka"
+       :background-color (make-important theme:background))
+      ("button, a, a:link"
+       :color theme:on-background
        :font-family "IBM Plex Sans")
       (".button, .button:hover , .button:visited, .button:active"
        :background-color theme:secondary
        :border "1px solid"
-       :border-color (if (theme:dark-p theme:theme) theme:quaternary theme:text)
-       :color theme:text)
+       :border-color (if (theme:dark-p theme:theme)
+                         theme:on-secondary
+                         theme:on-background)
+       :color theme:on-background)
       (code
        :font-family "Iosevka"
-       :background-color theme:tertiary)))
+       :color (make-important theme:on-background)
+       :background-color (make-important theme:secondary))))
    (tailor:status
     '((body
        :font-family theme:font-family
        :height "100%"
        :width "100%"
        :border "1px solid"
-       :border-color (if (theme:dark-p theme:theme) theme:quaternary theme:text)
+       :border-color (if (theme:dark-p theme:theme)
+                         theme:on-secondary
+                         theme:on-background)
        :box-sizing "border-box"
        :line-height "20px"
        :display "flex"
        :flex-direction "column"
-       :background theme:tertiary
+       :background theme:secondary
        :flex-wrap "wrap")
       ("#container"
        :display "flex"
@@ -155,24 +165,25 @@ Above, we define some themes with a name and a set of theme attributes from the
        :max-width "60%"
        :padding-right "0"
        :padding-left "5px"
-       :background-color theme:tertiary
-       :color theme:text
+       :text-overflow "ellipsis"
+       :background-color theme:secondary
+       :color theme:on-background
        :box-sizing "border-box"
        :z-index "auto")
       ("#tabs, #controls" :display "none")
       ("#modes"
        :padding-right "2px"
-       :background-color theme:tertiary
+       :background-color theme:secondary
        :box-sizing "border-box"
-       :color theme:text
+       :color theme:on-background
        :display "flex"
        :justify-contents "flex-end"
        :z-index "auto")
       (.button
-       :color theme:text)))
+       :color theme:on-background)))
    (tailor:message
     '((body
-       :color theme:text
+       :color theme:on-background
        :background-color theme:background
        :font-family theme:font-family)))
    (tailor:hint
@@ -181,8 +192,8 @@ Above, we define some themes with a name and a set of theme attributes from the
        :color theme:background
        :font-weight "bold"
        :padding "0px 3px"
-       :border-radius "2px"
-       :z-index #.(1- (expt 2 31)))))))
+       :opacity 1
+       :border-radius "2px")))))
 #+end_src
 
 The above is an example =cut= which I use in my configuration to achieve a more compact look to Nyxt. However, you're free to modify or not each slot to your heart's content. You can pass different =cut='s to different themes, allowing you to change both the color palette and the layout of Nyxt per theme.