Copy ColorPicker to compatibility-server (again)

This version should be Vaadin 7 compatible, using v7 versions
of Slider, ComboBox, etc.

Change-Id: I3d79ded7cc3f4cc645ac68ca6766fe096f6c0494

13 files changed, 2744 insertions, 0 deletions

diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/AbstractColorPicker.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/AbstractColorPicker.java
new file mode 100644
index 0000000000..d8d491ff31
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/AbstractColorPicker.java
@@ -0,0 +1,593 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui;
+
+import java.io.Serializable;
+import java.lang.reflect.Method;
+import java.util.Collection;
+
+import org.jsoup.nodes.Attributes;
+import org.jsoup.nodes.Element;
+
+import com.vaadin.ui.AbstractComponent;
+import com.vaadin.ui.UI;
+import com.vaadin.ui.Window.CloseEvent;
+import com.vaadin.ui.Window.CloseListener;
+import com.vaadin.ui.declarative.DesignAttributeHandler;
+import com.vaadin.ui.declarative.DesignContext;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+import com.vaadin.v7.shared.ui.colorpicker.ColorPickerServerRpc;
+import com.vaadin.v7.shared.ui.colorpicker.ColorPickerState;
+import com.vaadin.v7.ui.components.colorpicker.ColorChangeEvent;
+import com.vaadin.v7.ui.components.colorpicker.ColorChangeListener;
+import com.vaadin.v7.ui.components.colorpicker.ColorPickerPopup;
+import com.vaadin.v7.ui.components.colorpicker.ColorSelector;
+
+/**
+ * An abstract class that defines default implementation for a color picker
+ * component.
+ *
+ * @since 7.0.0
+ */
+@Deprecated
+public abstract class AbstractColorPicker extends AbstractComponent
+        implements CloseListener, ColorSelector {
+    private static final Method COLOR_CHANGE_METHOD;
+    static {
+        try {
+            COLOR_CHANGE_METHOD = ColorChangeListener.class.getDeclaredMethod(
+                    "colorChanged", new Class[] { ColorChangeEvent.class });
+        } catch (final java.lang.NoSuchMethodException e) {
+            // This should never happen
+            throw new java.lang.RuntimeException(
+                    "Internal error finding methods in ColorPicker");
+        }
+    }
+
+    /**
+     * Interface for converting 2d-coordinates to a Color
+     */
+    @Deprecated
+    public interface Coordinates2Color extends Serializable {
+
+        /**
+         * Calculate color from coordinates
+         *
+         * @param x
+         *            the x-coordinate
+         * @param y
+         *            the y-coordinate
+         *
+         * @return the color
+         */
+        public Color calculate(int x, int y);
+
+        /**
+         * Calculate coordinates from color
+         *
+         * @param c
+         *            the c
+         *
+         * @return the integer array with the coordinates
+         */
+        public int[] calculate(Color c);
+    }
+
+    @Deprecated
+    public enum PopupStyle {
+        POPUP_NORMAL("normal"), POPUP_SIMPLE("simple");
+
+        private String style;
+
+        PopupStyle(String styleName) {
+            style = styleName;
+        }
+
+        @Override
+        public String toString() {
+            return style;
+        }
+    }
+
+    private ColorPickerServerRpc rpc = new ColorPickerServerRpc() {
+
+        @Override
+        public void openPopup(boolean open) {
+            showPopup(open);
+        }
+    };
+
+    protected static final String STYLENAME_DEFAULT = "v-colorpicker";
+    protected static final String STYLENAME_BUTTON = "v-button";
+    protected static final String STYLENAME_AREA = "v-colorpicker-area";
+
+    protected PopupStyle popupStyle = PopupStyle.POPUP_NORMAL;
+
+    /** The popup window. */
+    private ColorPickerPopup window;
+
+    /** The color. */
+    protected Color color;
+
+    /** The UI. */
+    private UI parent;
+
+    protected String popupCaption = null;
+    private int positionX = 0;
+    private int positionY = 0;
+
+    protected boolean rgbVisible = true;
+    protected boolean hsvVisible = true;
+    protected boolean swatchesVisible = true;
+    protected boolean historyVisible = true;
+    protected boolean textfieldVisible = true;
+
+    /**
+     * Instantiates a new color picker.
+     */
+    public AbstractColorPicker() {
+        this("Colors", Color.WHITE);
+    }
+
+    /**
+     * Instantiates a new color picker.
+     *
+     * @param popupCaption
+     *            the caption of the popup window
+     */
+    public AbstractColorPicker(String popupCaption) {
+        this(popupCaption, Color.WHITE);
+    }
+
+    /**
+     * Instantiates a new color picker.
+     *
+     * @param popupCaption
+     *            the caption of the popup window
+     * @param initialColor
+     *            the initial color
+     */
+    public AbstractColorPicker(String popupCaption, Color initialColor) {
+        super();
+        registerRpc(rpc);
+        setColor(initialColor);
+        this.popupCaption = popupCaption;
+        setDefaultStyles();
+        setCaption("");
+    }
+
+    @Override
+    public void setColor(Color color) {
+        this.color = color;
+
+        if (window != null) {
+            window.setColor(color);
+        }
+        getState().color = color.getCSS();
+    }
+
+    @Override
+    public Color getColor() {
+        return color;
+    }
+
+    /**
+     * Set true if the component should show a default caption (css-code for the
+     * currently selected color, e.g. #ffffff) when no other caption is
+     * available.
+     *
+     * @param enabled
+     */
+    public void setDefaultCaptionEnabled(boolean enabled) {
+        getState().showDefaultCaption = enabled;
+    }
+
+    /**
+     * Returns true if the component shows the default caption (css-code for the
+     * currently selected color, e.g. #ffffff) if no other caption is available.
+     */
+    public boolean isDefaultCaptionEnabled() {
+        return getState(false).showDefaultCaption;
+    }
+
+    /**
+     * Sets the position of the popup window
+     *
+     * @param x
+     *            the x-coordinate
+     * @param y
+     *            the y-coordinate
+     */
+    public void setPosition(int x, int y) {
+        positionX = x;
+        positionY = y;
+
+        if (window != null) {
+            window.setPositionX(x);
+            window.setPositionY(y);
+        }
+    }
+
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        addListener(ColorChangeEvent.class, listener, COLOR_CHANGE_METHOD);
+    }
+
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        removeListener(ColorChangeEvent.class, listener);
+    }
+
+    @Override
+    public void windowClose(CloseEvent e) {
+        if (e.getWindow() == window) {
+            getState().popupVisible = false;
+        }
+    }
+
+    /**
+     * Fired when a color change event occurs
+     *
+     * @param event
+     *            The color change event
+     */
+    protected void colorChanged(ColorChangeEvent event) {
+        setColor(event.getColor());
+        fireColorChanged();
+    }
+
+    /**
+     * Notifies the listeners that the selected color has changed
+     */
+    public void fireColorChanged() {
+        fireEvent(new ColorChangeEvent(this, color));
+    }
+
+    /**
+     * The style for the popup window
+     *
+     * @param style
+     *            The style
+     */
+    public void setPopupStyle(PopupStyle style) {
+        popupStyle = style;
+
+        switch (style) {
+        case POPUP_NORMAL: {
+            setRGBVisibility(true);
+            setHSVVisibility(true);
+            setSwatchesVisibility(true);
+            setHistoryVisibility(true);
+            setTextfieldVisibility(true);
+            break;
+        }
+
+        case POPUP_SIMPLE: {
+            setRGBVisibility(false);
+            setHSVVisibility(false);
+            setSwatchesVisibility(true);
+            setHistoryVisibility(false);
+            setTextfieldVisibility(false);
+            break;
+        }
+        }
+    }
+
+    /**
+     * Gets the style for the popup window
+     *
+     * @since 7.5.0
+     * @return popup window style
+     */
+    public PopupStyle getPopupStyle() {
+        return popupStyle;
+    }
+
+    /**
+     * Set the visibility of the RGB Tab
+     *
+     * @param visible
+     *            The visibility
+     */
+    public void setRGBVisibility(boolean visible) {
+
+        if (!visible && !hsvVisible && !swatchesVisible) {
+            throw new IllegalArgumentException("Cannot hide all tabs.");
+        }
+
+        rgbVisible = visible;
+        if (window != null) {
+            window.setRGBTabVisible(visible);
+        }
+    }
+
+    /**
+     * Gets the visibility of the RGB Tab
+     *
+     * @since 7.5.0
+     * @return visibility of the RGB tab
+     */
+    public boolean getRGBVisibility() {
+        return rgbVisible;
+    }
+
+    /**
+     * Set the visibility of the HSV Tab
+     *
+     * @param visible
+     *            The visibility
+     */
+    public void setHSVVisibility(boolean visible) {
+        if (!visible && !rgbVisible && !swatchesVisible) {
+            throw new IllegalArgumentException("Cannot hide all tabs.");
+        }
+
+        hsvVisible = visible;
+        if (window != null) {
+            window.setHSVTabVisible(visible);
+        }
+    }
+
+    /**
+     * Gets the visibility of the HSV Tab
+     *
+     * @since 7.5.0
+     * @return visibility of the HSV tab
+     */
+    public boolean getHSVVisibility() {
+        return hsvVisible;
+    }
+
+    /**
+     * Set the visibility of the Swatches Tab
+     *
+     * @param visible
+     *            The visibility
+     */
+    public void setSwatchesVisibility(boolean visible) {
+        if (!visible && !hsvVisible && !rgbVisible) {
+            throw new IllegalArgumentException("Cannot hide all tabs.");
+        }
+
+        swatchesVisible = visible;
+        if (window != null) {
+            window.setSwatchesTabVisible(visible);
+        }
+    }
+
+    /**
+     * Gets the visibility of the Swatches Tab
+     *
+     * @since 7.5.0
+     * @return visibility of the swatches tab
+     */
+    public boolean getSwatchesVisibility() {
+        return swatchesVisible;
+    }
+
+    /**
+     * Sets the visibility of the Color History
+     *
+     * @param visible
+     *            The visibility
+     */
+    public void setHistoryVisibility(boolean visible) {
+        historyVisible = visible;
+        if (window != null) {
+            window.setHistoryVisible(visible);
+        }
+    }
+
+    /**
+     * Gets the visibility of the Color History
+     *
+     * @since 7.5.0
+     * @return visibility of color history
+     */
+    public boolean getHistoryVisibility() {
+        return historyVisible;
+    }
+
+    /**
+     * Sets the visibility of the CSS color code text field
+     *
+     * @param visible
+     *            The visibility
+     */
+    public void setTextfieldVisibility(boolean visible) {
+        textfieldVisible = visible;
+        if (window != null) {
+            window.setPreviewVisible(visible);
+        }
+    }
+
+    /**
+     * Gets the visibility of CSS color code text field
+     *
+     * @since 7.5.0
+     * @return visibility of css color code text field
+     */
+    public boolean getTextfieldVisibility() {
+        return textfieldVisible;
+    }
+
+    @Override
+    protected ColorPickerState getState() {
+        return (ColorPickerState) super.getState();
+    }
+
+    @Override
+    protected ColorPickerState getState(boolean markAsDirty) {
+        return (ColorPickerState) super.getState(markAsDirty);
+    }
+
+    /**
+     * Sets the default styles of the component
+     *
+     */
+    abstract protected void setDefaultStyles();
+
+    /**
+     * Shows a popup-window for color selection.
+     */
+    public void showPopup() {
+        showPopup(true);
+    }
+
+    /**
+     * Hides a popup-window for color selection.
+     */
+    public void hidePopup() {
+        showPopup(false);
+    }
+
+    /**
+     * Shows or hides popup-window depending on the given parameter. If there is
+     * no such window yet, one is created.
+     *
+     * @param open
+     */
+    protected void showPopup(boolean open) {
+        if (open && !isReadOnly()) {
+            if (parent == null) {
+                parent = getUI();
+            }
+
+            if (window == null) {
+
+                // Create the popup
+                window = new ColorPickerPopup(color);
+                window.setCaption(popupCaption);
+
+                window.setRGBTabVisible(rgbVisible);
+                window.setHSVTabVisible(hsvVisible);
+                window.setSwatchesTabVisible(swatchesVisible);
+                window.setHistoryVisible(historyVisible);
+                window.setPreviewVisible(textfieldVisible);
+
+                window.setImmediate(true);
+                window.addCloseListener(this);
+                window.addColorChangeListener(new ColorChangeListener() {
+                    @Override
+                    public void colorChanged(ColorChangeEvent event) {
+                        AbstractColorPicker.this.colorChanged(event);
+                    }
+                });
+
+                window.getHistory().setColor(color);
+                parent.addWindow(window);
+                window.setVisible(true);
+                window.setPositionX(positionX);
+                window.setPositionY(positionY);
+
+            } else if (!parent.equals(window.getParent())) {
+
+                window.setRGBTabVisible(rgbVisible);
+                window.setHSVTabVisible(hsvVisible);
+                window.setSwatchesTabVisible(swatchesVisible);
+                window.setHistoryVisible(historyVisible);
+                window.setPreviewVisible(textfieldVisible);
+
+                window.setColor(color);
+                window.getHistory().setColor(color);
+                window.setVisible(true);
+                parent.addWindow(window);
+            }
+
+        } else if (window != null) {
+            window.setVisible(false);
+            parent.removeWindow(window);
+        }
+        getState().popupVisible = open;
+    }
+
+    /**
+     * Set whether the caption text is rendered as HTML or not. You might need
+     * to re-theme component to allow higher content than the original text
+     * style.
+     *
+     * If set to true, the captions are passed to the browser as html and the
+     * developer is responsible for ensuring no harmful html is used. If set to
+     * false, the content is passed to the browser as plain text.
+     *
+     * @param htmlContentAllowed
+     *            <code>true</code> if caption is rendered as HTML,
+     *            <code>false</code> otherwise
+     * @deprecated as of , use {@link #setCaptionAsHtml(boolean)} instead
+     */
+    @Deprecated
+    public void setHtmlContentAllowed(boolean htmlContentAllowed) {
+        setCaptionAsHtml(htmlContentAllowed);
+    }
+
+    /**
+     * Return HTML rendering setting
+     *
+     * @return <code>true</code> if the caption text is to be rendered as HTML,
+     *         <code>false</code> otherwise
+     * @deprecated as of , use {@link #isCaptionAsHtml()} instead
+     */
+    @Deprecated
+    public boolean isHtmlContentAllowed() {
+        return isCaptionAsHtml();
+    }
+
+    @Override
+    public void readDesign(Element design, DesignContext designContext) {
+        super.readDesign(design, designContext);
+
+        Attributes attributes = design.attributes();
+        if (design.hasAttr("color")) {
+            // Ignore the # character
+            String hexColor = DesignAttributeHandler
+                    .readAttribute("color", attributes, String.class)
+                    .substring(1);
+            setColor(new Color(Integer.parseInt(hexColor, 16)));
+        }
+        if (design.hasAttr("popup-style")) {
+            setPopupStyle(PopupStyle.valueOf(
+                    "POPUP_" + attributes.get("popup-style").toUpperCase()));
+        }
+        if (design.hasAttr("position")) {
+            String[] position = attributes.get("position").split(",");
+            setPosition(Integer.parseInt(position[0]),
+                    Integer.parseInt(position[1]));
+        }
+    }
+
+    @Override
+    public void writeDesign(Element design, DesignContext designContext) {
+        super.writeDesign(design, designContext);
+
+        Attributes attribute = design.attributes();
+        DesignAttributeHandler.writeAttribute("color", attribute,
+                color.getCSS(), Color.WHITE.getCSS(), String.class);
+        DesignAttributeHandler.writeAttribute("popup-style", attribute,
+                (popupStyle == PopupStyle.POPUP_NORMAL ? "normal" : "simple"),
+                "normal", String.class);
+        DesignAttributeHandler.writeAttribute("position", attribute,
+                positionX + "," + positionY, "0,0", String.class);
+    }
+
+    @Override
+    protected Collection<String> getCustomAttributes() {
+        Collection<String> result = super.getCustomAttributes();
+        result.add("color");
+        result.add("position");
+        result.add("popup-style");
+        return result;
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/ColorPicker.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/ColorPicker.java
new file mode 100644
index 0000000000..5f6c857c2e
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/ColorPicker.java
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui;
+
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+
+/**
+ * A class that defines default (button-like) implementation for a color picker
+ * component.
+ *
+ * @since 7.0.0
+ *
+ * @see ColorPickerArea
+ *
+ */
+@Deprecated
+public class ColorPicker extends AbstractColorPicker {
+
+    /**
+     * Instantiates a new color picker.
+     */
+    public ColorPicker() {
+        super();
+    }
+
+    /**
+     * Instantiates a new color picker.
+     *
+     * @param popupCaption
+     *            caption of the color select popup
+     */
+    public ColorPicker(String popupCaption) {
+        super(popupCaption);
+    }
+
+    /**
+     * Instantiates a new color picker.
+     *
+     * @param popupCaption
+     *            caption of the color select popup
+     * @param initialColor
+     *            the initial color
+     */
+    public ColorPicker(String popupCaption, Color initialColor) {
+        super(popupCaption, initialColor);
+        setDefaultCaptionEnabled(true);
+    }
+
+    @Override
+    protected void setDefaultStyles() {
+        setPrimaryStyleName(STYLENAME_BUTTON);
+        addStyleName(STYLENAME_DEFAULT);
+    }
+
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/ColorPickerArea.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/ColorPickerArea.java
new file mode 100644
index 0000000000..06166196d9
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/ColorPickerArea.java
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui;
+
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+
+/**
+ * A class that defines area-like implementation for a color picker component.
+ *
+ * @since 7.0.0
+ *
+ * @see ColorPicker
+ *
+ */
+@Deprecated
+public class ColorPickerArea extends AbstractColorPicker {
+
+    /**
+     * Instantiates a new color picker.
+     */
+    public ColorPickerArea() {
+        super();
+    }
+
+    /**
+     * Instantiates a new color picker.
+     *
+     * @param popupCaption
+     *            caption of the color select popup
+     */
+    public ColorPickerArea(String popupCaption) {
+        super(popupCaption);
+    }
+
+    /**
+     * Instantiates a new color picker.
+     *
+     * @param popupCaption
+     *            caption of the color select popup
+     * @param initialColor
+     *            the initial color
+     */
+    public ColorPickerArea(String popupCaption, Color initialColor) {
+        super(popupCaption, initialColor);
+        setDefaultCaptionEnabled(false);
+    }
+
+    @Override
+    protected void setDefaultStyles() {
+        // state already has correct default
+    }
+
+    @Override
+    public void beforeClientResponse(boolean initial) {
+        super.beforeClientResponse(initial);
+
+        if ("".equals(getState().height)) {
+            getState().height = "30px";
+        }
+        if ("".equals(getState().width)) {
+            getState().width = "30px";
+        }
+    }
+
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorChangeEvent.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorChangeEvent.java
new file mode 100644
index 0000000000..db8331c539
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorChangeEvent.java
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import com.vaadin.ui.Component;
+import com.vaadin.ui.Component.Event;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+
+/**
+ * The color changed event which is passed to the listeners when a color change
+ * occurs.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorChangeEvent extends Event {
+    private final Color color;
+
+    public ColorChangeEvent(Component source, Color color) {
+        super(source);
+
+        this.color = color;
+    }
+
+    /**
+     * Returns the new color.
+     */
+    public Color getColor() {
+        return color;
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorChangeListener.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorChangeListener.java
new file mode 100644
index 0000000000..6a32e173e2
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorChangeListener.java
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.io.Serializable;
+
+/**
+ * The listener interface for receiving colorChange events. The class that is
+ * interested in processing a {@link ColorChangeEvent} implements this
+ * interface, and the object created with that class is registered with a
+ * component using the component's <code>addColorChangeListener</code> method.
+ * When the colorChange event occurs, that object's appropriate method is
+ * invoked.
+ * 
+ * @since 7.0.0
+ * 
+ * @see ColorChangeEvent
+ */
+@Deprecated
+public interface ColorChangeListener extends Serializable {
+
+    /**
+     * Called when a new color has been selected.
+     * 
+     * @param event
+     *            An event containing information about the color change.
+     */
+    void colorChanged(ColorChangeEvent event);
+
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerGradient.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerGradient.java
new file mode 100644
index 0000000000..d9f5f891b8
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerGradient.java
@@ -0,0 +1,145 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.lang.reflect.Method;
+
+import com.vaadin.ui.AbstractComponent;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+import com.vaadin.v7.shared.ui.colorpicker.ColorPickerGradientServerRpc;
+import com.vaadin.v7.shared.ui.colorpicker.ColorPickerGradientState;
+import com.vaadin.v7.ui.AbstractColorPicker.Coordinates2Color;
+
+/**
+ * A component that represents a color gradient within a color picker.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorPickerGradient extends AbstractComponent implements
+        ColorSelector {
+
+    private static final Method COLOR_CHANGE_METHOD;
+    static {
+        try {
+            COLOR_CHANGE_METHOD = ColorChangeListener.class.getDeclaredMethod(
+                    "colorChanged", new Class[] { ColorChangeEvent.class });
+        } catch (final java.lang.NoSuchMethodException e) {
+            // This should never happen
+            throw new java.lang.RuntimeException(
+                    "Internal error finding methods in ColorPicker");
+        }
+    }
+
+    private ColorPickerGradientServerRpc rpc = new ColorPickerGradientServerRpc() {
+
+        @Override
+        public void select(int cursorX, int cursorY) {
+            x = cursorX;
+            y = cursorY;
+            color = converter.calculate(x, y);
+
+            fireColorChanged(color);
+        }
+    };
+
+    /** The converter. */
+    private Coordinates2Color converter;
+
+    /** The foreground color. */
+    private Color color;
+
+    /** The x-coordinate. */
+    private int x = 0;
+
+    /** The y-coordinate. */
+    private int y = 0;
+
+    private ColorPickerGradient() {
+        registerRpc(rpc);
+        // width and height must be set here instead of in theme, otherwise
+        // coordinate calculations fail
+        getState().width = "220px";
+        getState().height = "220px";
+    }
+
+    /**
+     * Instantiates a new color picker gradient.
+     * 
+     * @param id
+     *            the id
+     * @param converter
+     *            the converter
+     */
+    public ColorPickerGradient(String id, Coordinates2Color converter) {
+        this();
+        addStyleName(id);
+        this.converter = converter;
+    }
+
+    @Override
+    public void setColor(Color c) {
+        color = c;
+
+        int[] coords = converter.calculate(c);
+        x = coords[0];
+        y = coords[1];
+
+        getState().cursorX = x;
+        getState().cursorY = y;
+
+    }
+
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        addListener(ColorChangeEvent.class, listener, COLOR_CHANGE_METHOD);
+    }
+
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        removeListener(ColorChangeEvent.class, listener);
+    }
+
+    /**
+     * Sets the background color.
+     * 
+     * @param color
+     *            the new background color
+     */
+    public void setBackgroundColor(Color color) {
+        getState().bgColor = color.getCSS();
+    }
+
+    @Override
+    public Color getColor() {
+        return color;
+    }
+
+    /**
+     * Notifies the listeners that the color has changed
+     * 
+     * @param color
+     *            The color which it changed to
+     */
+    public void fireColorChanged(Color color) {
+        fireEvent(new ColorChangeEvent(this, color));
+    }
+
+    @Override
+    protected ColorPickerGradientState getState() {
+        return (ColorPickerGradientState) super.getState();
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerGrid.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerGrid.java
new file mode 100644
index 0000000000..2278bde171
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerGrid.java
@@ -0,0 +1,259 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.awt.Point;
+import java.lang.reflect.Method;
+import java.util.HashMap;
+import java.util.Map;
+
+import com.vaadin.ui.AbstractComponent;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+import com.vaadin.v7.shared.ui.colorpicker.ColorPickerGridServerRpc;
+import com.vaadin.v7.shared.ui.colorpicker.ColorPickerGridState;
+
+/**
+ * A component that represents a color selection grid within a color picker.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorPickerGrid extends AbstractComponent implements
+        ColorSelector {
+
+    private static final String STYLENAME = "v-colorpicker-grid";
+
+    private static final Method COLOR_CHANGE_METHOD;
+    static {
+        try {
+            COLOR_CHANGE_METHOD = ColorChangeListener.class.getDeclaredMethod(
+                    "colorChanged", new Class[] { ColorChangeEvent.class });
+        } catch (final java.lang.NoSuchMethodException e) {
+            // This should never happen
+            throw new java.lang.RuntimeException(
+                    "Internal error finding methods in ColorPicker");
+        }
+    }
+
+    private ColorPickerGridServerRpc rpc = new ColorPickerGridServerRpc() {
+
+        @Override
+        public void select(int x, int y) {
+            ColorPickerGrid.this.x = x;
+            ColorPickerGrid.this.y = y;
+
+            fireColorChanged(colorGrid[y][x]);
+        }
+
+        @Override
+        public void refresh() {
+            for (int row = 0; row < rows; row++) {
+                for (int col = 0; col < columns; col++) {
+                    changedColors.put(new Point(row, col), colorGrid[row][col]);
+                }
+            }
+            sendChangedColors();
+            markAsDirty();
+        }
+    };
+
+    /** The x-coordinate. */
+    private int x = 0;
+
+    /** The y-coordinate. */
+    private int y = 0;
+
+    /** The rows. */
+    private int rows;
+
+    /** The columns. */
+    private int columns;
+
+    /** The color grid. */
+    private Color[][] colorGrid = new Color[1][1];
+
+    /** The changed colors. */
+    private final Map<Point, Color> changedColors = new HashMap<>();
+
+    /**
+     * Instantiates a new color picker grid.
+     */
+    public ColorPickerGrid() {
+        registerRpc(rpc);
+        setPrimaryStyleName(STYLENAME);
+        setColorGrid(new Color[1][1]);
+        setColor(Color.WHITE);
+    }
+
+    /**
+     * Instantiates a new color picker grid.
+     * 
+     * @param rows
+     *            the rows
+     * @param columns
+     *            the columns
+     */
+    public ColorPickerGrid(int rows, int columns) {
+        registerRpc(rpc);
+        setPrimaryStyleName(STYLENAME);
+        setColorGrid(new Color[rows][columns]);
+        setColor(Color.WHITE);
+    }
+
+    /**
+     * Instantiates a new color picker grid.
+     * 
+     * @param colors
+     *            the colors
+     */
+    public ColorPickerGrid(Color[][] colors) {
+        registerRpc(rpc);
+        setPrimaryStyleName(STYLENAME);
+        setColorGrid(colors);
+    }
+
+    private void setColumnCount(int columns) {
+        this.columns = columns;
+        getState().columnCount = columns;
+    }
+
+    private void setRowCount(int rows) {
+        this.rows = rows;
+        getState().rowCount = rows;
+    }
+
+    private void sendChangedColors() {
+        if (!changedColors.isEmpty()) {
+            String[] colors = new String[changedColors.size()];
+            String[] XCoords = new String[changedColors.size()];
+            String[] YCoords = new String[changedColors.size()];
+            int counter = 0;
+            for (Point p : changedColors.keySet()) {
+                Color c = changedColors.get(p);
+                if (c == null) {
+                    continue;
+                }
+
+                String color = c.getCSS();
+
+                colors[counter] = color;
+                XCoords[counter] = String.valueOf((int) p.getX());
+                YCoords[counter] = String.valueOf((int) p.getY());
+                counter++;
+            }
+            getState().changedColor = colors;
+            getState().changedX = XCoords;
+            getState().changedY = YCoords;
+
+            changedColors.clear();
+        }
+    }
+
+    /**
+     * Sets the color grid.
+     * 
+     * @param colors
+     *            the new color grid
+     */
+    public void setColorGrid(Color[][] colors) {
+        setRowCount(colors.length);
+        setColumnCount(colors[0].length);
+        colorGrid = colors;
+
+        for (int row = 0; row < rows; row++) {
+            for (int col = 0; col < columns; col++) {
+                changedColors.put(new Point(row, col), colorGrid[row][col]);
+            }
+        }
+        sendChangedColors();
+
+        markAsDirty();
+    }
+
+    /**
+     * Adds a color change listener
+     * 
+     * @param listener
+     *            The color change listener
+     */
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        addListener(ColorChangeEvent.class, listener, COLOR_CHANGE_METHOD);
+    }
+
+    @Override
+    public Color getColor() {
+        return colorGrid[x][y];
+    }
+
+    /**
+     * Removes a color change listener
+     * 
+     * @param listener
+     *            The listener
+     */
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        removeListener(ColorChangeEvent.class, listener);
+    }
+
+    @Override
+    public void setColor(Color color) {
+        colorGrid[x][y] = color;
+        changedColors.put(new Point(x, y), color);
+        sendChangedColors();
+        markAsDirty();
+    }
+
+    /**
+     * Sets the position.
+     * 
+     * @param x
+     *            the x
+     * @param y
+     *            the y
+     */
+    public void setPosition(int x, int y) {
+        if (x >= 0 && x < columns && y >= 0 && y < rows) {
+            this.x = x;
+            this.y = y;
+        }
+    }
+
+    /**
+     * Gets the position.
+     * 
+     * @return the position
+     */
+    public int[] getPosition() {
+        return new int[] { x, y };
+    }
+
+    /**
+     * Notifies the listeners that a color change has occurred
+     * 
+     * @param color
+     *            The color which it changed to
+     */
+    public void fireColorChanged(Color color) {
+        fireEvent(new ColorChangeEvent(this, color));
+    }
+
+    @Override
+    protected ColorPickerGridState getState() {
+        return (ColorPickerGridState) super.getState();
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerHistory.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerHistory.java
new file mode 100644
index 0000000000..111800b94f
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerHistory.java
@@ -0,0 +1,218 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.lang.reflect.Method;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.Iterator;
+import java.util.List;
+import java.util.concurrent.ArrayBlockingQueue;
+
+import com.vaadin.ui.CustomComponent;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+
+/**
+ * A component that represents color selection history within a color picker.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorPickerHistory extends CustomComponent implements
+        ColorSelector, ColorChangeListener {
+
+    private static final String STYLENAME = "v-colorpicker-history";
+
+    private static final Method COLOR_CHANGE_METHOD;
+    static {
+        try {
+            COLOR_CHANGE_METHOD = ColorChangeListener.class.getDeclaredMethod(
+                    "colorChanged", new Class[] { ColorChangeEvent.class });
+        } catch (final java.lang.NoSuchMethodException e) {
+            // This should never happen
+            throw new java.lang.RuntimeException(
+                    "Internal error finding methods in ColorPicker");
+        }
+    }
+
+    /** The rows. */
+    private static final int rows = 4;
+
+    /** The columns. */
+    private static final int columns = 15;
+
+    /** Temporary color history for when the component is detached. */
+    private ArrayBlockingQueue<Color> tempHistory = new ArrayBlockingQueue<>(
+            rows * columns);
+
+    /** The grid. */
+    private final ColorPickerGrid grid;
+
+    /**
+     * Instantiates a new color picker history.
+     */
+    public ColorPickerHistory() {
+        setPrimaryStyleName(STYLENAME);
+
+        grid = new ColorPickerGrid(rows, columns);
+        grid.setWidth("100%");
+        grid.setPosition(0, 0);
+        grid.addColorChangeListener(this);
+
+        setCompositionRoot(grid);
+    }
+
+    @Override
+    public void attach() {
+        super.attach();
+        createColorHistoryIfNecessary();
+    }
+
+    private void createColorHistoryIfNecessary() {
+        List<Color> tempColors = new ArrayList<>(tempHistory);
+        if (getSession().getAttribute("colorPickerHistory") == null) {
+            getSession().setAttribute("colorPickerHistory",
+                    new ArrayBlockingQueue<Color>(rows * columns));
+        }
+        for (Color color : tempColors) {
+            setColor(color);
+        }
+        tempHistory.clear();
+    }
+
+    @SuppressWarnings("unchecked")
+    private ArrayBlockingQueue<Color> getColorHistory() {
+        if (isAttached()) {
+            Object colorHistory = getSession().getAttribute(
+                    "colorPickerHistory");
+            if (colorHistory instanceof ArrayBlockingQueue<?>) {
+                return (ArrayBlockingQueue<Color>) colorHistory;
+            }
+        }
+        return tempHistory;
+    }
+
+    @Override
+    public void setHeight(String height) {
+        super.setHeight(height);
+        grid.setHeight(height);
+    }
+
+    @Override
+    public void setColor(Color color) {
+
+        ArrayBlockingQueue<Color> colorHistory = getColorHistory();
+
+        // Check that the color does not already exist
+        boolean exists = false;
+        Iterator<Color> iter = colorHistory.iterator();
+        while (iter.hasNext()) {
+            if (color.equals(iter.next())) {
+                exists = true;
+                break;
+            }
+        }
+
+        // If the color does not exist then add it
+        if (!exists) {
+            if (!colorHistory.offer(color)) {
+                colorHistory.poll();
+                colorHistory.offer(color);
+            }
+        }
+
+        List<Color> colorList = new ArrayList<>(colorHistory);
+
+        // Invert order of colors
+        Collections.reverse(colorList);
+
+        // Move the selected color to the front of the list
+        Collections.swap(colorList, colorList.indexOf(color), 0);
+
+        // Create 2d color map
+        Color[][] colors = new Color[rows][columns];
+        iter = colorList.iterator();
+
+        for (int row = 0; row < rows; row++) {
+            for (int col = 0; col < columns; col++) {
+                if (iter.hasNext()) {
+                    colors[row][col] = iter.next();
+                } else {
+                    colors[row][col] = Color.WHITE;
+                }
+            }
+        }
+
+        grid.setColorGrid(colors);
+        grid.markAsDirty();
+    }
+
+    @Override
+    public Color getColor() {
+        return getColorHistory().peek();
+    }
+
+    /**
+     * Gets the history.
+     * 
+     * @return the history
+     */
+    public List<Color> getHistory() {
+        ArrayBlockingQueue<Color> colorHistory = getColorHistory();
+        Color[] array = colorHistory.toArray(new Color[colorHistory.size()]);
+        return Collections.unmodifiableList(Arrays.asList(array));
+    }
+
+    /**
+     * Checks if the history contains given color.
+     * 
+     * @param c
+     *            the color
+     * 
+     * @return true, if successful
+     */
+    public boolean hasColor(Color c) {
+        return getColorHistory().contains(c);
+    }
+
+    /**
+     * Adds a color change listener
+     * 
+     * @param listener
+     *            The listener
+     */
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        addListener(ColorChangeEvent.class, listener, COLOR_CHANGE_METHOD);
+    }
+
+    /**
+     * Removes a color change listener
+     * 
+     * @param listener
+     *            The listener
+     */
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        removeListener(ColorChangeEvent.class, listener);
+    }
+
+    @Override
+    public void colorChanged(ColorChangeEvent event) {
+        fireEvent(new ColorChangeEvent(this, event.getColor()));
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerPopup.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerPopup.java
new file mode 100644
index 0000000000..03f920c92b
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerPopup.java
@@ -0,0 +1,780 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.lang.reflect.Method;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashSet;
+import java.util.Iterator;
+import java.util.List;
+import java.util.Set;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+
+import com.vaadin.shared.ui.MarginInfo;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Layout;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.Window;
+import com.vaadin.v7.data.Property.ValueChangeEvent;
+import com.vaadin.v7.data.Property.ValueChangeListener;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+import com.vaadin.v7.ui.AbstractColorPicker.Coordinates2Color;
+import com.vaadin.v7.ui.Slider;
+import com.vaadin.v7.ui.Slider.ValueOutOfBoundsException;
+
+/**
+ * A component that represents color selection popup within a color picker.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorPickerPopup extends Window implements ClickListener,
+        ColorChangeListener, ColorSelector {
+
+    private static final String STYLENAME = "v-colorpicker-popup";
+
+    private static final Method COLOR_CHANGE_METHOD;
+    static {
+        try {
+            COLOR_CHANGE_METHOD = ColorChangeListener.class.getDeclaredMethod(
+                    "colorChanged", new Class[] { ColorChangeEvent.class });
+        } catch (final java.lang.NoSuchMethodException e) {
+            // This should never happen
+            throw new java.lang.RuntimeException(
+                    "Internal error finding methods in ColorPicker");
+        }
+    }
+
+    /** The tabs. */
+    private final TabSheet tabs = new TabSheet();
+
+    private Component rgbTab;
+
+    private Component hsvTab;
+
+    private Component swatchesTab;
+
+    /** The layout. */
+    private final VerticalLayout layout;
+
+    /** The ok button. */
+    private final Button ok = new Button("OK");
+
+    /** The cancel button. */
+    private final Button cancel = new Button("Cancel");
+
+    /** The resize button. */
+    private final Button resize = new Button("show/hide history");
+
+    /** The selected color. */
+    private Color selectedColor = Color.WHITE;
+
+    /** The history. */
+    private ColorPickerHistory history;
+
+    /** The history container. */
+    private Layout historyContainer;
+
+    /** The rgb gradient. */
+    private ColorPickerGradient rgbGradient;
+
+    /** The hsv gradient. */
+    private ColorPickerGradient hsvGradient;
+
+    /** The red slider. */
+    private Slider redSlider;
+
+    /** The green slider. */
+    private Slider greenSlider;
+
+    /** The blue slider. */
+    private Slider blueSlider;
+
+    /** The hue slider. */
+    private Slider hueSlider;
+
+    /** The saturation slider. */
+    private Slider saturationSlider;
+
+    /** The value slider. */
+    private Slider valueSlider;
+
+    /** The preview on the rgb tab. */
+    private ColorPickerPreview rgbPreview;
+
+    /** The preview on the hsv tab. */
+    private ColorPickerPreview hsvPreview;
+
+    /** The preview on the swatches tab. */
+    private ColorPickerPreview selPreview;
+
+    /** The color select. */
+    private ColorPickerSelect colorSelect;
+
+    /** The selectors. */
+    private final Set<ColorSelector> selectors = new HashSet<>();
+
+    /**
+     * Set true while the slider values are updated after colorChange. When
+     * true, valueChange reactions from the sliders are disabled, because
+     * otherwise the set color may become corrupted as it is repeatedly re-set
+     * in valueChangeListeners using values from sliders that may not have been
+     * updated yet.
+     */
+    private boolean updatingColors = false;
+
+    private ColorPickerPopup() {
+        // Set the layout
+        layout = new VerticalLayout();
+        layout.setSpacing(false);
+        layout.setMargin(false);
+        layout.setWidth("100%");
+        layout.setHeight(null);
+
+        setContent(layout);
+        setStyleName(STYLENAME);
+        setResizable(false);
+        setImmediate(true);
+        // Create the history
+        history = new ColorPickerHistory();
+        history.addColorChangeListener(this);
+    }
+
+    /**
+     * Instantiates a new color picker popup.
+     */
+    public ColorPickerPopup(Color initialColor) {
+        this();
+        selectedColor = initialColor;
+        initContents();
+    }
+
+    private void initContents() {
+        // Create the preview on the rgb tab
+        rgbPreview = new ColorPickerPreview(selectedColor);
+        rgbPreview.setWidth("240px");
+        rgbPreview.setHeight("20px");
+        rgbPreview.addColorChangeListener(this);
+        selectors.add(rgbPreview);
+
+        // Create the preview on the hsv tab
+        hsvPreview = new ColorPickerPreview(selectedColor);
+        hsvPreview.setWidth("240px");
+        hsvPreview.setHeight("20px");
+        hsvPreview.addColorChangeListener(this);
+        selectors.add(hsvPreview);
+
+        // Create the preview on the swatches tab
+        selPreview = new ColorPickerPreview(selectedColor);
+        selPreview.setWidth("100%");
+        selPreview.setHeight("20px");
+        selPreview.addColorChangeListener(this);
+        selectors.add(selPreview);
+
+        // Create the tabs
+        rgbTab = createRGBTab(selectedColor);
+        tabs.addTab(rgbTab, "RGB", null);
+
+        hsvTab = createHSVTab(selectedColor);
+        tabs.addTab(hsvTab, "HSV", null);
+
+        swatchesTab = createSelectTab();
+        tabs.addTab(swatchesTab, "Swatches", null);
+
+        // Add the tabs
+        tabs.setWidth("100%");
+
+        layout.addComponent(tabs);
+
+        // Add the history
+        history.setWidth("97%");
+        history.setHeight("22px");
+
+        // Create the default colors
+        List<Color> defaultColors = new ArrayList<>();
+        defaultColors.add(Color.BLACK);
+        defaultColors.add(Color.WHITE);
+
+        // Create the history
+        VerticalLayout innerContainer = new VerticalLayout();
+        innerContainer.setWidth("100%");
+        innerContainer.setHeight(null);
+        innerContainer.addComponent(history);
+
+        VerticalLayout outerContainer = new VerticalLayout();
+        outerContainer.setWidth("99%");
+        outerContainer.setHeight("27px");
+        outerContainer.addComponent(innerContainer);
+        historyContainer = outerContainer;
+
+        layout.addComponent(historyContainer);
+
+        // Add the resize button for the history
+        resize.addClickListener(this);
+        resize.setData(new Boolean(false));
+        resize.setWidth("100%");
+        resize.setHeight("10px");
+        resize.setPrimaryStyleName("resize-button");
+        layout.addComponent(resize);
+
+        // Add the buttons
+        ok.setWidth("70px");
+        ok.addClickListener(this);
+
+        cancel.setWidth("70px");
+        cancel.addClickListener(this);
+
+        HorizontalLayout buttons = new HorizontalLayout();
+        buttons.addComponent(ok);
+        buttons.addComponent(cancel);
+        buttons.setWidth("100%");
+        buttons.setHeight("30px");
+        buttons.setComponentAlignment(ok, Alignment.MIDDLE_CENTER);
+        buttons.setComponentAlignment(cancel, Alignment.MIDDLE_CENTER);
+        layout.addComponent(buttons);
+    }
+
+    /**
+     * Creates the RGB tab.
+     * 
+     * @return the component
+     */
+    private Component createRGBTab(Color color) {
+        VerticalLayout rgbLayout = new VerticalLayout();
+        rgbLayout.setMargin(new MarginInfo(false, false, true, false));
+        rgbLayout.addComponent(rgbPreview);
+        rgbLayout.setStyleName("rgbtab");
+
+        // Add the RGB color gradient
+        rgbGradient = new ColorPickerGradient("rgb-gradient", RGBConverter);
+        rgbGradient.setColor(color);
+        rgbGradient.addColorChangeListener(this);
+        rgbLayout.addComponent(rgbGradient);
+        selectors.add(rgbGradient);
+
+        // Add the RGB sliders
+        VerticalLayout sliders = new VerticalLayout();
+        sliders.setStyleName("rgb-sliders");
+
+        redSlider = createRGBSlider("Red", "red");
+        greenSlider = createRGBSlider("Green", "green");
+        blueSlider = createRGBSlider("Blue", "blue");
+        setRgbSliderValues(color);
+
+        redSlider.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                double red = (Double) event.getProperty().getValue();
+                if (!updatingColors) {
+                    Color newColor = new Color((int) red, selectedColor
+                            .getGreen(), selectedColor.getBlue());
+                    setColor(newColor);
+                }
+            }
+        });
+
+        sliders.addComponent(redSlider);
+
+        greenSlider.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                double green = (Double) event.getProperty().getValue();
+                if (!updatingColors) {
+                    Color newColor = new Color(selectedColor.getRed(),
+                            (int) green, selectedColor.getBlue());
+                    setColor(newColor);
+                }
+            }
+        });
+        sliders.addComponent(greenSlider);
+
+        blueSlider.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                double blue = (Double) event.getProperty().getValue();
+                if (!updatingColors) {
+                    Color newColor = new Color(selectedColor.getRed(),
+                            selectedColor.getGreen(), (int) blue);
+                    setColor(newColor);
+                }
+            }
+        });
+        sliders.addComponent(blueSlider);
+
+        rgbLayout.addComponent(sliders);
+
+        return rgbLayout;
+    }
+
+    private Slider createRGBSlider(String caption, String styleName) {
+        Slider redSlider = new Slider(caption, 0, 255);
+        redSlider.setImmediate(true);
+        redSlider.setStyleName("rgb-slider");
+        redSlider.setWidth("220px");
+        redSlider.addStyleName(styleName);
+        return redSlider;
+    }
+
+    /**
+     * Creates the hsv tab.
+     * 
+     * @return the component
+     */
+    private Component createHSVTab(Color color) {
+        VerticalLayout hsvLayout = new VerticalLayout();
+        hsvLayout.setMargin(new MarginInfo(false, false, true, false));
+        hsvLayout.addComponent(hsvPreview);
+        hsvLayout.setStyleName("hsvtab");
+
+        // Add the hsv gradient
+        hsvGradient = new ColorPickerGradient("hsv-gradient", HSVConverter);
+        hsvGradient.setColor(color);
+        hsvGradient.addColorChangeListener(this);
+        hsvLayout.addComponent(hsvGradient);
+        selectors.add(hsvGradient);
+
+        VerticalLayout sliders = new VerticalLayout();
+        sliders.setStyleName("hsv-sliders");
+
+        hueSlider = new Slider("Hue", 0, 360);
+        saturationSlider = new Slider("Saturation", 0, 100);
+        valueSlider = new Slider("Value", 0, 100);
+
+        float[] hsv = color.getHSV();
+        setHsvSliderValues(hsv);
+
+        hueSlider.setStyleName("hsv-slider");
+        hueSlider.addStyleName("hue-slider");
+        hueSlider.setWidth("220px");
+        hueSlider.setImmediate(true);
+        hueSlider.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                if (!updatingColors) {
+                    float hue = (Float.parseFloat(event.getProperty()
+                            .getValue().toString())) / 360f;
+                    float saturation = (Float.parseFloat(saturationSlider
+                            .getValue().toString())) / 100f;
+                    float value = (Float.parseFloat(valueSlider.getValue()
+                            .toString())) / 100f;
+
+                    // Set the color
+                    Color color = new Color(Color.HSVtoRGB(hue, saturation,
+                            value));
+                    setColor(color);
+
+                    /*
+                     * Set the background color of the hue gradient. This has to
+                     * be done here since in the conversion the base color
+                     * information is lost when color is black/white
+                     */
+                    Color bgColor = new Color(Color.HSVtoRGB(hue, 1f, 1f));
+                    hsvGradient.setBackgroundColor(bgColor);
+                }
+            }
+        });
+        sliders.addComponent(hueSlider);
+
+        saturationSlider.setStyleName("hsv-slider");
+        saturationSlider.setWidth("220px");
+        saturationSlider.setImmediate(true);
+        saturationSlider.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                if (!updatingColors) {
+                    float hue = (Float.parseFloat(hueSlider.getValue()
+                            .toString())) / 360f;
+                    float saturation = (Float.parseFloat(event.getProperty()
+                            .getValue().toString())) / 100f;
+                    float value = (Float.parseFloat(valueSlider.getValue()
+                            .toString())) / 100f;
+                    Color color = new Color(Color.HSVtoRGB(hue, saturation,
+                            value));
+                    setColor(color);
+                }
+            }
+        });
+        sliders.addComponent(saturationSlider);
+
+        valueSlider.setStyleName("hsv-slider");
+        valueSlider.setWidth("220px");
+        valueSlider.setImmediate(true);
+        valueSlider.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                if (!updatingColors) {
+                    float hue = (Float.parseFloat(hueSlider.getValue()
+                            .toString())) / 360f;
+                    float saturation = (Float.parseFloat(saturationSlider
+                            .getValue().toString())) / 100f;
+                    float value = (Float.parseFloat(event.getProperty()
+                            .getValue().toString())) / 100f;
+
+                    Color color = new Color(Color.HSVtoRGB(hue, saturation,
+                            value));
+                    setColor(color);
+                }
+            }
+        });
+
+        sliders.addComponent(valueSlider);
+        hsvLayout.addComponent(sliders);
+
+        return hsvLayout;
+    }
+
+    /**
+     * Creates the select tab.
+     * 
+     * @return the component
+     */
+    private Component createSelectTab() {
+        VerticalLayout selLayout = new VerticalLayout();
+        selLayout.setMargin(new MarginInfo(false, false, true, false));
+        selLayout.addComponent(selPreview);
+        selLayout.addStyleName("seltab");
+
+        colorSelect = new ColorPickerSelect();
+        colorSelect.addColorChangeListener(this);
+        selLayout.addComponent(colorSelect);
+
+        return selLayout;
+    }
+
+    @Override
+    public void buttonClick(ClickEvent event) {
+        // History resize was clicked
+        if (event.getButton() == resize) {
+            boolean state = (Boolean) resize.getData();
+
+            // minimize
+            if (state) {
+                historyContainer.setHeight("27px");
+                history.setHeight("22px");
+
+                // maximize
+            } else {
+                historyContainer.setHeight("90px");
+                history.setHeight("85px");
+            }
+
+            resize.setData(new Boolean(!state));
+        }
+
+        // Ok button was clicked
+        else if (event.getButton() == ok) {
+            history.setColor(getColor());
+            fireColorChanged();
+            close();
+        }
+
+        // Cancel button was clicked
+        else if (event.getButton() == cancel) {
+            close();
+        }
+
+    }
+
+    /**
+     * Notifies the listeners that the color changed
+     */
+    public void fireColorChanged() {
+        fireEvent(new ColorChangeEvent(this, getColor()));
+    }
+
+    /**
+     * Gets the history.
+     * 
+     * @return the history
+     */
+    public ColorPickerHistory getHistory() {
+        return history;
+    }
+
+    @Override
+    public void setColor(Color color) {
+        if (color == null) {
+            return;
+        }
+
+        selectedColor = color;
+
+        hsvGradient.setColor(selectedColor);
+        hsvPreview.setColor(selectedColor);
+
+        rgbGradient.setColor(selectedColor);
+        rgbPreview.setColor(selectedColor);
+
+        selPreview.setColor(selectedColor);
+    }
+
+    @Override
+    public Color getColor() {
+        return selectedColor;
+    }
+
+    /**
+     * Gets the color history.
+     * 
+     * @return the color history
+     */
+    public List<Color> getColorHistory() {
+        return Collections.unmodifiableList(history.getHistory());
+    }
+
+    @Override
+    public void colorChanged(ColorChangeEvent event) {
+        setColor(event.getColor());
+
+        updatingColors = true;
+
+        setRgbSliderValues(selectedColor);
+        float[] hsv = selectedColor.getHSV();
+        setHsvSliderValues(hsv);
+
+        updatingColors = false;
+
+        for (ColorSelector s : selectors) {
+            if (event.getSource() != s && s != this
+                    && s.getColor() != selectedColor) {
+                s.setColor(selectedColor);
+            }
+        }
+    }
+
+    private void setRgbSliderValues(Color color) {
+        try {
+            redSlider.setValue(((Integer) color.getRed()).doubleValue());
+            blueSlider.setValue(((Integer) color.getBlue()).doubleValue());
+            greenSlider.setValue(((Integer) color.getGreen()).doubleValue());
+        } catch (ValueOutOfBoundsException e) {
+            getLogger().log(
+                    Level.WARNING,
+                    "Unable to set RGB color value to " + color.getRed() + ","
+                            + color.getGreen() + "," + color.getBlue(), e);
+        }
+    }
+
+    private void setHsvSliderValues(float[] hsv) {
+        try {
+            hueSlider.setValue(((Float) (hsv[0] * 360f)).doubleValue());
+            saturationSlider.setValue(((Float) (hsv[1] * 100f)).doubleValue());
+            valueSlider.setValue(((Float) (hsv[2] * 100f)).doubleValue());
+        } catch (ValueOutOfBoundsException e) {
+            getLogger().log(
+                    Level.WARNING,
+                    "Unable to set HSV color value to " + hsv[0] + "," + hsv[1]
+                            + "," + hsv[2], e);
+        }
+    }
+
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        addListener(ColorChangeEvent.class, listener, COLOR_CHANGE_METHOD);
+    }
+
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        removeListener(ColorChangeEvent.class, listener);
+    }
+
+    /**
+     * Checks the visibility of the given tab
+     * 
+     * @param tab
+     *            The tab to check
+     * @return true if tab is visible, false otherwise
+     */
+    private boolean tabIsVisible(Component tab) {
+        Iterator<Component> tabIterator = tabs.getComponentIterator();
+        while (tabIterator.hasNext()) {
+            if (tabIterator.next() == tab) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * How many tabs are visible
+     * 
+     * @return The number of tabs visible
+     */
+    private int tabsNumVisible() {
+        Iterator<Component> tabIterator = tabs.getComponentIterator();
+        int tabCounter = 0;
+        while (tabIterator.hasNext()) {
+            tabIterator.next();
+            tabCounter++;
+        }
+        return tabCounter;
+    }
+
+    /**
+     * Checks if tabs are needed and hides them if not
+     */
+    private void checkIfTabsNeeded() {
+        tabs.hideTabs(tabsNumVisible() == 1);
+    }
+
+    /**
+     * Set RGB tab visibility
+     * 
+     * @param visible
+     *            The visibility of the RGB tab
+     */
+    public void setRGBTabVisible(boolean visible) {
+        if (visible && !tabIsVisible(rgbTab)) {
+            tabs.addTab(rgbTab, "RGB", null);
+            checkIfTabsNeeded();
+        } else if (!visible && tabIsVisible(rgbTab)) {
+            tabs.removeComponent(rgbTab);
+            checkIfTabsNeeded();
+        }
+    }
+
+    /**
+     * Set HSV tab visibility
+     * 
+     * @param visible
+     *            The visibility of the HSV tab
+     */
+    public void setHSVTabVisible(boolean visible) {
+        if (visible && !tabIsVisible(hsvTab)) {
+            tabs.addTab(hsvTab, "HSV", null);
+            checkIfTabsNeeded();
+        } else if (!visible && tabIsVisible(hsvTab)) {
+            tabs.removeComponent(hsvTab);
+            checkIfTabsNeeded();
+        }
+    }
+
+    /**
+     * Set Swatches tab visibility
+     * 
+     * @param visible
+     *            The visibility of the Swatches tab
+     */
+    public void setSwatchesTabVisible(boolean visible) {
+        if (visible && !tabIsVisible(swatchesTab)) {
+            tabs.addTab(swatchesTab, "Swatches", null);
+            checkIfTabsNeeded();
+        } else if (!visible && tabIsVisible(swatchesTab)) {
+            tabs.removeComponent(swatchesTab);
+            checkIfTabsNeeded();
+        }
+    }
+
+    /**
+     * Set the History visibility
+     * 
+     * @param visible
+     */
+    public void setHistoryVisible(boolean visible) {
+        historyContainer.setVisible(visible);
+        resize.setVisible(visible);
+    }
+
+    /**
+     * Set the preview visibility
+     * 
+     * @param visible
+     */
+    public void setPreviewVisible(boolean visible) {
+        hsvPreview.setVisible(visible);
+        rgbPreview.setVisible(visible);
+        selPreview.setVisible(visible);
+    }
+
+    /** RGB color converter */
+    private Coordinates2Color RGBConverter = new Coordinates2Color() {
+
+        @Override
+        public Color calculate(int x, int y) {
+            float h = (x / 220f);
+            float s = 1f;
+            float v = 1f;
+
+            if (y < 110) {
+                s = y / 110f;
+            } else if (y > 110) {
+                v = 1f - (y - 110f) / 110f;
+            }
+
+            return new Color(Color.HSVtoRGB(h, s, v));
+        }
+
+        @Override
+        public int[] calculate(Color color) {
+
+            float[] hsv = color.getHSV();
+
+            int x = Math.round(hsv[0] * 220f);
+            int y = 0;
+
+            // lower half
+            if (hsv[1] == 1f) {
+                y = Math.round(110f - (hsv[1] + hsv[2]) * 110f);
+            } else {
+                y = Math.round(hsv[1] * 110f);
+            }
+
+            return new int[] { x, y };
+        }
+    };
+
+    /** HSV color converter */
+    Coordinates2Color HSVConverter = new Coordinates2Color() {
+        @Override
+        public int[] calculate(Color color) {
+
+            float[] hsv = color.getHSV();
+
+            // Calculate coordinates
+            int x = Math.round(hsv[2] * 220.0f);
+            int y = Math.round(220 - hsv[1] * 220.0f);
+
+            // Create background color of clean color
+            Color bgColor = new Color(Color.HSVtoRGB(hsv[0], 1f, 1f));
+            hsvGradient.setBackgroundColor(bgColor);
+
+            return new int[] { x, y };
+        }
+
+        @Override
+        public Color calculate(int x, int y) {
+            float saturation = 1f - (y / 220.0f);
+            float value = (x / 220.0f);
+            float hue = Float.parseFloat(hueSlider.getValue().toString())
+                    / 360f;
+
+            Color color = new Color(Color.HSVtoRGB(hue, saturation, value));
+            return color;
+        }
+    };
+
+    private static Logger getLogger() {
+        return Logger.getLogger(ColorPickerPopup.class.getName());
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerPreview.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerPreview.java
new file mode 100644
index 0000000000..2b627efbe7
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerPreview.java
@@ -0,0 +1,199 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.lang.reflect.Method;
+
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.v7.data.Property.ValueChangeEvent;
+import com.vaadin.v7.data.Property.ValueChangeListener;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+import com.vaadin.v7.ui.TextField;
+
+/**
+ * A component that represents color selection preview within a color picker.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorPickerPreview extends CssLayout implements ColorSelector,
+        ValueChangeListener {
+
+    private static final String STYLE_DARK_COLOR = "v-textfield-dark";
+    private static final String STYLE_LIGHT_COLOR = "v-textfield-light";
+
+    private static final Method COLOR_CHANGE_METHOD;
+    static {
+        try {
+            COLOR_CHANGE_METHOD = ColorChangeListener.class.getDeclaredMethod(
+                    "colorChanged", new Class[] { ColorChangeEvent.class });
+        } catch (final java.lang.NoSuchMethodException e) {
+            // This should never happen
+            throw new java.lang.RuntimeException(
+                    "Internal error finding methods in ColorPicker");
+        }
+    }
+
+    /** The color. */
+    private Color color;
+
+    /** The field. */
+    private final TextField field;
+
+    /** The old value. */
+    private String oldValue;
+
+    private ColorPickerPreview() {
+        setStyleName("v-colorpicker-preview");
+        setImmediate(true);
+        field = new TextField();
+        field.setImmediate(true);
+        field.setSizeFull();
+        field.setStyleName("v-colorpicker-preview-textfield");
+        field.setData(this);
+        field.addValueChangeListener(this);
+        addComponent(field);
+    }
+
+    /**
+     * Instantiates a new color picker preview.
+     */
+    public ColorPickerPreview(Color color) {
+        this();
+        setColor(color);
+    }
+
+    @Override
+    public void setColor(Color color) {
+        this.color = color;
+
+        // Unregister listener
+        field.removeValueChangeListener(this);
+
+        String colorCSS = color.getCSS();
+        field.setValue(colorCSS);
+
+        if (field.isValid()) {
+            oldValue = colorCSS;
+        } else {
+            field.setValue(oldValue);
+        }
+
+        // Re-register listener
+        field.addValueChangeListener(this);
+
+        // Set the text color
+        field.removeStyleName(STYLE_DARK_COLOR);
+        field.removeStyleName(STYLE_LIGHT_COLOR);
+        if (this.color.getRed() + this.color.getGreen() + this.color
+                .getBlue() < 3 * 128) {
+            field.addStyleName(STYLE_DARK_COLOR);
+        } else {
+            field.addStyleName(STYLE_LIGHT_COLOR);
+        }
+
+        markAsDirty();
+    }
+
+    @Override
+    public Color getColor() {
+        return color;
+    }
+
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        addListener(ColorChangeEvent.class, listener, COLOR_CHANGE_METHOD);
+    }
+
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        removeListener(ColorChangeEvent.class, listener);
+    }
+
+    @Override
+    public void valueChange(ValueChangeEvent event) {
+        String value = (String) event.getProperty().getValue();
+        try {
+            if (value != null) {
+                /*
+                 * Description of supported formats see
+                 * http://www.w3schools.com/cssref/css_colors_legal.asp
+                 */
+                if (value.length() == 7 && value.startsWith("#")) {
+                    // CSS color format (e.g. #000000)
+                    int red = Integer.parseInt(value.substring(1, 3), 16);
+                    int green = Integer.parseInt(value.substring(3, 5), 16);
+                    int blue = Integer.parseInt(value.substring(5, 7), 16);
+                    color = new Color(red, green, blue);
+
+                } else if (value.startsWith("rgb")) {
+                    // RGB color format rgb/rgba(255,255,255,0.1)
+                    String[] colors = value.substring(value.indexOf("(") + 1,
+                            value.length() - 1).split(",");
+
+                    int red = Integer.parseInt(colors[0]);
+                    int green = Integer.parseInt(colors[1]);
+                    int blue = Integer.parseInt(colors[2]);
+                    if (colors.length > 3) {
+                        int alpha = (int) (Double.parseDouble(colors[3])
+                                * 255d);
+                        color = new Color(red, green, blue, alpha);
+                    } else {
+                        color = new Color(red, green, blue);
+                    }
+
+                } else if (value.startsWith("hsl")) {
+                    // HSL color format hsl/hsla(100,50%,50%,1.0)
+                    String[] colors = value.substring(value.indexOf("(") + 1,
+                            value.length() - 1).split(",");
+
+                    int hue = Integer.parseInt(colors[0]);
+                    int saturation = Integer.parseInt(colors[1]
+                            .replace("%", ""));
+                    int lightness = Integer
+                            .parseInt(colors[2].replace("%", ""));
+                    int rgb = Color.HSLtoRGB(hue, saturation, lightness);
+
+                    if (colors.length > 3) {
+                        int alpha = (int) (Double.parseDouble(colors[3])
+                                * 255d);
+                        color = new Color(rgb);
+                        color.setAlpha(alpha);
+                    } else {
+                        color = new Color(rgb);
+                    }
+                }
+
+                oldValue = value;
+                fireEvent(new ColorChangeEvent((Component) field.getData(),
+                        color));
+            }
+
+        } catch (NumberFormatException nfe) {
+            // Revert value
+            field.setValue(oldValue);
+        }
+    }
+
+    /**
+     * Called when the component is refreshing
+     */
+    @Override
+    protected String getCss(Component c) {
+        return "background: " + color.getCSS();
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerSelect.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerSelect.java
new file mode 100644
index 0000000000..63d46d6cc4
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorPickerSelect.java
@@ -0,0 +1,236 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import com.vaadin.ui.CustomComponent;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.v7.data.Property.ValueChangeEvent;
+import com.vaadin.v7.data.Property.ValueChangeListener;
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+import com.vaadin.v7.ui.ComboBox;
+
+/**
+ * A component that represents color selection swatches within a color picker.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public class ColorPickerSelect extends CustomComponent implements
+        ColorSelector, ValueChangeListener {
+
+    /** The range. */
+    private final ComboBox range;
+
+    /** The grid. */
+    private final ColorPickerGrid grid;
+
+    /**
+     * The Enum ColorRangePropertyId.
+     */
+    private enum ColorRangePropertyId {
+        ALL("All colors"), RED("Red colors"), GREEN("Green colors"), BLUE(
+                "Blue colors");
+
+        /** The caption. */
+        private String caption;
+
+        /**
+         * Instantiates a new color range property id.
+         * 
+         * @param caption
+         *            the caption
+         */
+        ColorRangePropertyId(String caption) {
+            this.caption = caption;
+        }
+
+        @Override
+        public String toString() {
+            return caption;
+        }
+    }
+
+    /**
+     * Instantiates a new color picker select.
+     * 
+     * @param rows
+     *            the rows
+     * @param columns
+     *            the columns
+     */
+    public ColorPickerSelect() {
+
+        VerticalLayout layout = new VerticalLayout();
+        setCompositionRoot(layout);
+
+        setStyleName("colorselect");
+        setWidth("100%");
+
+        range = new ComboBox();
+        range.setImmediate(true);
+        range.setImmediate(true);
+        range.setNullSelectionAllowed(false);
+        range.setNewItemsAllowed(false);
+        range.setWidth("100%");
+        range.addValueChangeListener(this);
+
+        for (ColorRangePropertyId id : ColorRangePropertyId.values()) {
+            range.addItem(id);
+        }
+        range.select(ColorRangePropertyId.ALL);
+
+        layout.addComponent(range);
+
+        grid = new ColorPickerGrid(createAllColors(14, 10));
+        grid.setWidth("100%");
+
+        layout.addComponent(grid);
+    }
+
+    /**
+     * Creates the all colors.
+     * 
+     * @param rows
+     *            the rows
+     * @param columns
+     *            the columns
+     * 
+     * @return the color[][]
+     */
+    private Color[][] createAllColors(int rows, int columns) {
+        Color[][] colors = new Color[rows][columns];
+
+        for (int row = 0; row < rows; row++) {
+            for (int col = 0; col < columns; col++) {
+
+                // Create the color grid by varying the saturation and value
+                if (row < (rows - 1)) {
+                    // Calculate new hue value
+                    float hue = ((float) col / (float) columns);
+                    float saturation = 1f;
+                    float value = 1f;
+
+                    // For the upper half use value=1 and variable
+                    // saturation
+                    if (row < (rows / 2)) {
+                        saturation = ((row + 1f) / (rows / 2f));
+                    } else {
+                        value = 1f - ((row - (rows / 2f)) / (rows / 2f));
+                    }
+
+                    colors[row][col] = new Color(Color.HSVtoRGB(hue,
+                            saturation, value));
+                }
+
+                // The last row should have the black&white gradient
+                else {
+                    float hue = 0f;
+                    float saturation = 0f;
+                    float value = 1f - ((float) col / (float) columns);
+
+                    colors[row][col] = new Color(Color.HSVtoRGB(hue,
+                            saturation, value));
+                }
+            }
+        }
+
+        return colors;
+    }
+
+    /**
+     * Creates the color.
+     * 
+     * @param color
+     *            the color
+     * @param rows
+     *            the rows
+     * @param columns
+     *            the columns
+     * 
+     * @return the color[][]
+     */
+    private Color[][] createColors(Color color, int rows, int columns) {
+        Color[][] colors = new Color[rows][columns];
+
+        float[] hsv = color.getHSV();
+
+        float hue = hsv[0];
+        float saturation = 1f;
+        float value = 1f;
+
+        for (int row = 0; row < rows; row++) {
+            for (int col = 0; col < columns; col++) {
+
+                int index = row * columns + col;
+                saturation = 1f;
+                value = 1f;
+
+                if (index <= ((rows * columns) / 2)) {
+                    saturation = index
+                            / (((float) rows * (float) columns) / 2f);
+                } else {
+                    index -= ((rows * columns) / 2);
+                    value = 1f - index
+                            / (((float) rows * (float) columns) / 2f);
+                }
+
+                colors[row][col] = new Color(Color.HSVtoRGB(hue, saturation,
+                        value));
+            }
+        }
+
+        return colors;
+    }
+
+    @Override
+    public Color getColor() {
+        return grid.getColor();
+    }
+
+    @Override
+    public void setColor(Color color) {
+        grid.getColor();
+    }
+
+    @Override
+    public void addColorChangeListener(ColorChangeListener listener) {
+        grid.addColorChangeListener(listener);
+    }
+
+    @Override
+    public void removeColorChangeListener(ColorChangeListener listener) {
+        grid.removeColorChangeListener(listener);
+    }
+
+    @Override
+    public void valueChange(ValueChangeEvent event) {
+        if (grid == null) {
+            return;
+        }
+
+        if (event.getProperty().getValue() == ColorRangePropertyId.ALL) {
+            grid.setColorGrid(createAllColors(14, 10));
+        } else if (event.getProperty().getValue() == ColorRangePropertyId.RED) {
+            grid.setColorGrid(createColors(new Color(0xFF, 0, 0), 14, 10));
+        } else if (event.getProperty()
+                .getValue() == ColorRangePropertyId.GREEN) {
+            grid.setColorGrid(createColors(new Color(0, 0xFF, 0), 14, 10));
+        } else if (event.getProperty()
+                .getValue() == ColorRangePropertyId.BLUE) {
+            grid.setColorGrid(createColors(new Color(0, 0, 0xFF), 14, 10));
+        }
+    }
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorSelector.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorSelector.java
new file mode 100644
index 0000000000..47e46a6496
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/ColorSelector.java
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.io.Serializable;
+
+import com.vaadin.v7.shared.ui.colorpicker.Color;
+
+/**
+ * An interface for a color selector.
+ * 
+ * @since 7.0.0
+ */
+@Deprecated
+public interface ColorSelector extends Serializable, HasColorChangeListener {
+
+    /**
+     * Sets the color.
+     * 
+     * @param color
+     *            the new color
+     */
+    public void setColor(Color color);
+
+    /**
+     * Gets the color.
+     * 
+     * @return the color
+     */
+    public Color getColor();
+}
diff --git a/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/HasColorChangeListener.java b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/HasColorChangeListener.java
new file mode 100644
index 0000000000..5901443a2d
--- /dev/null
+++ b/compatibility-server/src/main/java/com/vaadin/v7/ui/components/colorpicker/HasColorChangeListener.java
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.v7.ui.components.colorpicker;
+
+import java.io.Serializable;
+
+@Deprecated
+public interface HasColorChangeListener extends Serializable {
+
+    /**
+     * Adds a {@link ColorChangeListener} to the component.
+     * 
+     * @param listener
+     */
+    void addColorChangeListener(ColorChangeListener listener);
+
+    /**
+     * Removes a {@link ColorChangeListener} from the component.
+     * 
+     * @param listener
+     */
+    void removeColorChangeListener(ColorChangeListener listener);
+
+}