<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>

<div class="container">
    <h1>CSS Custom Properties (don't know that name? What about CSS Variables?)</h1>
    <p>In this talk, we'll walk through refactoring a standard set of vanilla CSS into code using custom properties.</p>
   
</div>

<div class="container">
    <h1>This is a standard button style</h1>
    <p>You've probably seen and written this code hundreds of time. You've probably also been fancier with it...</p>
<pre>
<code class="language-css">
.button {
    background-color: tomato;
    color: white;
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 3px;
    text-decoration: none;
}
</code>
</pre>

    <a href="#" class="button">
    This is a button style   
    </a>
    
</div>
             



<div class="container">
    <h1>Convert the styles to custom properties</h1>
    <p>Let's make the styles more flexible using custom properties</p>
    
    <h2>Set and Get your Custom Properties</h2>
    <p>We use the syntax <code>--variable-name: variable-value</code> to set a variable and <code>var(--variable-name)</code> to get the variable value. When we set values that we want to be globally accessed, we set them on the <code>:root</code> pseudo-element.</p>
    
    <h3>Set</h3>
    
    <pre>
        <code class="language-css">
        :root {
            --button-background: tomato;
            --button-foreground: white;
            --button-display: inline-block;
            --button-padding: .5rem 1rem;
            --button-corners: 3px;
            --button-decoration: none;
            --button-text-align: center;

        }
</code>
    
</pre>
    
    <h3>Get</h3>
<pre>
<code class="language-css">
.button-withvars {
    background-color: var(--button-background);
    color: var(--button-foreground);
    display: var(--button-display);
    padding: var(--button-padding);
    border-radius: var(--button-corners);
    text-decoration: var(--button-decoration);
    text-align: var(--button-text-align);

}
</code>
</pre>

    <a href="#" class="button-withvars">
    This is a button style   
    </a>
    
</div>
             
<div class="container special">
    <h1>Use Cascade and specificity for scoping</h1>
    <p>We may have set the variables on the document's root, but we can update them at various scope levels throughout our CSS. We don't even have to change button classes. We can do this by one of its parents' classes!</p>
    <h3>HTML</h3>
    <pre>
        <code class="language-html">
 &lt;div class="container special">
     &lt;a href="#" class="button-withvars">
    This is a button style   
     &lt;/a>
 &lt;/div>
        </code>
    </pre>
    
    <h3>CSS</h3>
    <pre>
    <code class="language-css">
.special {
    --button-background: lightblue;
    --button-foreground: #333;
    --button-display: block;
}
    </code>
    </pre>
    <a href="#" class="button-withvars">
    This is a button style   
    </a>
</div>


                              
<div class="container">
    <h1>Use JS to set globally</h1>
    <p>Dark mode anyone?</p>
    
    <h3>Set them by JS</h3>
    
    <pre>
        <code class="language-js">
    
    
let darkModeToggle = document.querySelectorAll('.darkMode');

darkModeToggle.forEach(toggler => toggler.addEventListener('click', e => {
    e.preventDefault();
    document.documentElement.style.setProperty('--color', '#fff');
    document.documentElement.style.setProperty('--bg-color', '#333');
    document.documentElement.style.setProperty('--button-background', '#7d483e');
    document.documentElement.style.setProperty('--button-foreground', '#eee');

}));
        </code>
    </pre>
    
    <h3>Or Toggle the class and set your colors</h3>
    <h4>JS</h4>
    <pre>
        <code class="language-js">
let darkModeToggle = document.querySelectorAll('.darkModeToggle');
let body = document.querySelector('body');

darkModeToggle.forEach(toggler => toggler.addEventListener('click', e => {
    e.preventDefault();
    body.classList.toggle('darkMode')
}));
        </code>
    </pre>
    
    <h4>CSS</h4>
        <pre>
        <code class="language-css">
.darkMode {
    --button-background: #7d483e;
    --button-foreground: #eee;    
    --color: #fff;
    --bg-color: #333;
}
        </code>
        </pre>
    <a href="#" class="button-withvars darkModeToggle">
    Toggle Dark Mode   
    </a>
    
</div>



<div class="container themed">
    <h1>Make your own theme on the fly!</h1>
    <p>Let's use JS to allow a user to adjust the site's theme on the fly! See the CodePen Panels for the code for this one. It's a lot for this little window!</p>
    
    
    <form action="" class="theme-change">
        <h4>Page options</h4>
        <label for="" >page background-color</label>
        <input type="color" id="bg-color" name="bg-color" class="text">
        <label for="">page font color</label>
        <input type="color" name="color"  id="color" class="text">
        
        <h4>Button Options</h4>
        <a href="#" class="button-withvars">Visual reference button</a> <br><br>
        <label for="button-display">Full width?</label>
        <select name="button-display" id="button-display">
            <option value="inline-block">No</option>
            <option value="block">Yes</option>
        </select>
        <br>
        <label for="button-background" >button background-color</label>
        <input type="color" id="button-background" name="button-background" class="text">
        <label for="button-foreground" >button foreground-color</label>
        <input type="color" id="button-foreground" name="button-foreground" class="text">
        
        <br>
        <label>Border Radius:</label>
        <input data-suffix="true" type="range" id="button-corners" min="0" max="25" value="10">

    </form>
</div>