Adds deprecation notice. fixes #4 (#17)

README.md

@@ -2,6 +2,10 @@
 
 # [ColorMe](https://colorme.io) [![Build Status](https://travis-ci.org/tylergaw/colorme.svg)](https://travis-ci.org/tylergaw/colorme)
 
+**NOTE:** the CSS color function here is deprecated. New functions are in
+the works. When a spec is available we’ll get this site updated.
+See [this Github issue](https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198) for background.
+
 Visualize The CSS [Color Function]((https://drafts.csswg.org/css-color/#modifying-colors)).
 
 ## Contributing

public/service-worker.js

@@ -1,5 +1,5 @@
 /* global clients */
-const STATIC_CACHE_NAME = "colorme-v7";
+const STATIC_CACHE_NAME = "colorme-v8";
 const BASE_STATIC_URLS = [
   "/",
   "/index.html",

src/App.js

@@ -12,6 +12,7 @@ import {
 import Banner from 'components/Banner';
 import Colors from 'components/Colors';
 import Controls from 'components/Controls';
+import DeprecationNotice from 'components/DeprecationNotice';
 
 class App extends Component {
   constructor(props) {
@@ -264,6 +265,7 @@ class App extends Component {
     return (
       <main>
         <Banner />
+        <DeprecationNotice />
         <Colors {...colorsProps} />
         <Controls {...controlsProps} />
       </main>

src/components/Banner/Banner.js

@@ -10,7 +10,7 @@ class Banner extends Component {
           ColorMe
         </h1>
         <p className='bannerIntro'>
-          Visualize The CSS Color Function.
+          Visualize The CSS Color Function<b>*</b>.
           {' '}Made by <a href='https://tylergaw.com/articles/introducing-colorme' target='_blank' rel='noopener'>Tyler Gaw</a>.
           {' '}Code on <a href='https://github.com/tylergaw/colorme' target='_blank' rel='noopener'>GitHub</a>.
           {' '}Inspired by <a href='http://jim-nielsen.com/sassme/' target='_blank' rel='noopener'>SassMe</a>.

src/components/Controls/Controls.css

@@ -12,6 +12,10 @@
   padding: 0.75rem 0 0 0;
 }
 
+.controlsHeading.deprecated {
+  color: #c6c6c6;
+}
+
 .colorFunc {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   margin: 0 1rem;
@@ -20,7 +24,7 @@
 .colorFuncInput {
   border: 0;
   box-sizing: border-box;
-  color: #252525;
+  color: #c6c6c6;
   font-size: 1.2rem;
   margin: 1rem 0 0.7rem 0;
   padding: 0;

src/components/Controls/Controls.js

@@ -44,9 +44,9 @@ class Controls extends Component {
     return (
       <div className='controls'>
         <div className='colorFunc'>
-          <label className='controlsHeading' htmlFor='colorFunc'>
-            Color function
-            <button className='btnText' onClick={shortNamesOnClick}>
+          <label className='controlsHeading deprecated' htmlFor='colorFunc'>
+            [deprecated] Color function
+            <button className='btnText deprecated' onClick={shortNamesOnClick}>
               {useShortNames ? 'Use full names' : 'Use short names' }
             </button>
           </label>

src/components/DeprecationNotice/DeprecationNotice.css

@@ -0,0 +1,11 @@
+.deprecation {
+  background-color: #ffd000;
+  background-image: repeating-linear-gradient(
+    -50deg, transparent, transparent 40px,
+    rgba(255,255,255,.15) 40px,
+    rgba(255,255,255,.15) 80px
+  );
+  box-sizing: border-box;
+  padding: 0.6rem 1rem;
+  width: 100%;
+}

src/components/DeprecationNotice/DeprecationNotice.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './DeprecationNotice.css';
+
+const DeprecationNotice = () => (
+  <div className='deprecation'>
+    <b>* Note:</b> the CSS color function here is deprecated. New functions are in
+    the works. When a spec is available we’ll get this site updated.
+    See <a href="https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198">this Github issue</a> for background.
+  </div>
+);
+
+export default DeprecationNotice;

src/components/DeprecationNotice/index.js

@@ -0,0 +1,3 @@
+import DeprecationNotice from './DeprecationNotice';
+
+export default DeprecationNotice;

src/index.css

@@ -66,6 +66,11 @@ a:focus,
   padding: 0.2rem 0;
 }
 
+.btnText.deprecated {
+  border-bottom-color: #dedede;
+  color: #c6c6c6;
+}
+
 label .btnText {
   margin-left: 1rem;
   position: relative;