@progress/kendo-themes-html 6.3.0 → 6.4.0-dev.0

package/src/colorgradient/tests/colorgradient-modes.tsx

@@ -1,7 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
-import { NumericTextbox } from '../../numerictextbox';
-import { Textbox } from '../../textbox';
+import { ColorGradient } from '../../colorgradient';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -25,235 +23,29 @@ root.render(
             <span>RGBA</span>
             <span>RGB</span>
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgba(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient />
             </section>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgba(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                    </div>
-
-                </div>
+                <ColorGradient mode="rgb" />
             </section>
 
             <span>HSVA</span>
             <span>HSV</span>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgba(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider" style={{ "--kendo-slider-end": "100" } as any }>
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">H</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">S</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">V</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient mode="hsva" />
             </section>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgba(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">H</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">S</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">V</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient mode="hsv" />
             </section>
 
             <span>HEX</span>
             <span></span>
 
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgba(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider" style={{ "--kendo-slider-end": "100" } as any }>
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack k-flex-1">
-                            <Textbox className="k-hex-value" showClearButton={false} value="#b88484AA" />
-                            <label className="k-colorgradient-input-label">HEX</label>
-                        </div>
-                    </div>
-
-                </div>
+                <ColorGradient mode="hex" />
             </section>
         </div>
     </>

package/src/colorgradient/tests/colorgradient-rtl.tsx

@@ -1,7 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
-import { Icon } from '../../icon';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorGradient } from '../../colorgradient';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -24,77 +22,7 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>ColorGradient RTL</span>
             <section>
-                <div className="k-colorgradient k-rtl">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-color-contrast k-vbox">
-                        <div className="k-contrast-ratio">
-                            <span className="k-contrast-ratio-text">Contrast ratio: 7.1</span>
-                            <span className="k-contrast-validation !k-text-success">
-                                <Icon name="check" />
-                                <Icon name="check" />
-                            </span>
-                        </div>
-                        <div>
-                            <span>AA: 4.5</span>
-                            <span className="k-contrast-validation !k-text-success">
-                                Pass
-                                <Icon name="check" />
-                            </span>
-                        </div>
-                        <div>
-                            <span>AAA: 7.0</span>
-                            <span className="k-contrast-validation !k-text-error">
-                                Fail
-                                <Icon name="x" />
-                            </span>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient dir="rtl" contrast />
             </section>
         </div>
     </>

package/src/colorgradient/tests/colorgradient-states.tsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorGradient } from '../../colorgradient';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -20,57 +19,21 @@ const styles = `
 root.render(
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
             <span>Focus</span>
+            <span>Disabled</span>
+            <span>Read Only</span>
+
+            <section>
+                <ColorGradient focus />
+            </section>
+
             <section>
-                <div className="k-colorgradient k-focus">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode"></Button>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient disabled />
+            </section>
+            <section>
+
+                <ColorGradient readonly dragHandleStyle={{ top: "0", left: "0" }}/>
             </section>
         </div>
     </>

package/src/colorgradient/tests/colorgradient.tsx

@@ -1,6 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Button } from '../../button';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorGradient } from '../../colorgradient';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -24,59 +23,7 @@ root.render(
 
             <span>ColorGradient</span>
             <section>
-                <div className="k-colorgradient">
-                    <div className="k-colorgradient-canvas k-hstack">
-                        <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                            <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                            </div>
-                        </div>
-                        <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                        <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-colorgradient-inputs k-hstack">
-                        <div className="k-vstack">
-                            <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">R</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">G</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                            <label className="k-colorgradient-input-label">B</label>
-                        </div>
-
-                        <div className="k-vstack">
-                            <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                            <label className="k-colorgradient-input-label">A</label>
-                        </div>
-                    </div>
-                </div>
+                <ColorGradient />
             </section>
         </div>
     </>

package/src/colorpalette/colorpalette.spec.tsx

@@ -70,11 +70,11 @@ export const ColorPalette = (
                     disabled,
                 }),
             )}>
-            <div className="k-colorpalette-table-wrap">
-                <table className="k-colorpalette-table k-palette">
-                    {newChildren.length > 0 ? newChildren : props.children}
-                </table>
-            </div>
+
+            <table className="k-colorpalette-table">
+                {newChildren.length > 0 ? newChildren : props.children}
+            </table>
+
         </div>
     );
 };