doc: CSS4 variables

Author: peterpeterparker

README.md

@@ -126,7 +126,9 @@ In order to lazy load the images of your presentation, provide their url using t
 
 ## Theming
 
-Theming is an ongoing improvement I'm currently working on. The already available options are described in the slides [documentation](doc/slides/slides.md). 
+[DeckDeckGo] offers various theming options which could be set using CSS variables and which are described in their respective slides' templates [documentation](doc/slides/slides.md).
+
+*Note: If you would miss or need further theming options, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more theming flexibility and options*
 
 ## Talks
 

doc/slides/slides.md

@@ -63,6 +63,21 @@ This component offers the following options which could be set using attributes:
   </deckgo-slide-title>
 </deckgo-deck>
 ```
+
+### Theming
+
+The following theming options will affect this component if set on its host or parent.
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |:-----------------:|:-----------------:|
+| --background |  |  |
+| --color |  |  |
+| --slide-padding-top | 16px | Padding top of the all slide |
+| --slide-padding-end | 32px | Padding right of the all slide |
+| --slide-padding-bottom | 16px | Padding bottom of the all slide |
+| --slide-padding-start | 32px | Padding left of the all slide |
+| --slide-padding-start | 32px | Modify slotted ul and ol padding-inline-start |
+
 ## Slide: Content
 
 The "Content" slide is a simple slide which display its title and content aligned to the start of the page.
@@ -115,6 +130,20 @@ This component offers the following options which could be set using attributes:
 </deckgo-deck>
 ```
 
+### Theming
+
+The following theming options will affect this component if set on its host or parent.
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |:-----------------:|:-----------------:|
+| --background |  |  |
+| --color |  |  |
+| --slide-padding-top | 16px | Padding top of the all slide |
+| --slide-padding-end | 32px | Padding right of the all slide |
+| --slide-padding-bottom | 16px | Padding bottom of the all slide |
+| --slide-padding-start | 32px | Padding left of the all slide |
+| --slide-padding-start | 32px | Modify slotted ul and ol padding-inline-start |
+
 ## Slide: Split
 
 The "Split" slide is a simple slide which display two panes on the page.
@@ -154,6 +183,30 @@ This component offers the following options which could be set using attributes:
 | reveal | boolean | false | Hide the slotted elements `li`, `p` an `img` and display them when navigating using `slideNext()` or `slidePrev()` (see [documention](/doc/features/navigation.md)) |
 | reveal-show-first | boolean | false | Show the first elements which would be hidden if `reveal` is set to `true` |
 
+### Theming
+
+The following theming options will affect this component if set on its host or parent.
+
+| CSS4 variable                      | Default | Note |
+| -------------------------- |:-----------------:|:-----------------:|
+| --background |  |  |
+| --color |  |  |
+| --slide-split-background-start | | Left split pane background |
+| --slide-split-color-start | | Left split pane color |
+| --slide-split-background-end | | Right split pane background |
+| --slide-split-color-end | | Right split pane color |
+| --slide-split-padding-top | 16px | Padding top of a slide split pane |
+| --slide-split-padding-end | 32px | Padding right of a slide split pane |
+| --slide-split-padding-bottom | 16px | Padding bottom of a slide split pane |
+| --slide-split-padding-start | 32px | Padding left of a slide split pane |
+| --slide-split-title-padding-top | 16px | Padding top of the title of the |
+| --slide-split-title-padding-end | 32px | Padding right of the title of the |
+| --slide-split-title-padding-bottom | 16px | Padding bottom of the title of the |
+| --slide-split-title-padding-start | 32px | Padding left of the title of the |
+| --slide-padding-start | 32px | Modify slotted ul and ol padding-inline-start |
+| --slide-split-align | inherit | Modify for example to center if you want to align the content in the middle |
+| --slide-split-text-align | inherit | Modify for example to center if you want to align the text in the middle |
+
 ## Slide: Code
 
 The "Code" slide is a the slide to use if you would like to showcase code during your talk.

src/components/slides/deckdeckgo-slide-split/deckdeckgo-slide-split.scss

@@ -16,7 +16,7 @@ div.deckgo-slide-split {
   align-items: var(--slide-split-align, inherit);
   text-align: var(--slide-split-text-align, inherit);
 
-  padding: var(--slide-padding-top, 16px) var(--slide-padding-end, 32px) var(--slide-padding-bottom, 16px) var(--slide-padding-start, 32px);
+  padding: var(--slide-split-padding-top, 16px) var(--slide-split-padding-end, 32px) var(--slide-split-padding-bottom, 16px) var(--slide-split-padding-start, 32px);
 
   &.deckgo-slide-split-start {
     background: var(--slide-split-background-start);
@@ -32,6 +32,6 @@ div.deckgo-slide-split {
 ::slotted([slot="title"]) {
   flex: 1 100%;
 
-  padding: var(--slide-padding-top, 16px) var(--slide-padding-end, 32px) var(--slide-padding-bottom, 16px) var(--slide-padding-start, 32px);
+  padding: var(--slide-split-title-padding-top, 16px) var(--slide-split-title-padding-end, 32px) var(--slide-split-title-padding-bottom, 16px) var(--slide-split-title-padding-start, 32px);
 }