@ryanhelsing/ry-ui 1.0.10 → 1.0.12

package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/dist/style.css

@@ -1,126 +0,0 @@
-*,
-*::before,
-*::after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.all, .ring::before, .ring::after, .led::before, .led::after, .face::before, .face::after {
-  content: "";
-  display: block;
-  position: absolute;
-}
-
-html,
-body {
-  font-size: 100%;
-  min-height: 100%;
-}
-
-body {
-  background: #151917;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyMTIxMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFjMjExZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #121212), color-stop(100%, #1c211f));
-  background: -moz-linear-gradient(top left, #121212, #1c211f);
-  background: -webkit-linear-gradient(top left, #121212, #1c211f);
-  background: linear-gradient(to bottom right, #121212, #1c211f);
-}
-
-.ring {
-  height: 14em;
-  width: 14em;
-  margin: 4em auto;
-  position: relative;
-  z-index: -5;
-  -moz-border-radius: 7em;
-  -webkit-border-radius: 7em;
-  border-radius: 7em;
-  background: #050505;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1MDUwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA2MDYwOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #050505), color-stop(100%, #060609));
-  background: -moz-linear-gradient(top, #050505, #060609);
-  background: -webkit-linear-gradient(top, #050505, #060609);
-  background: linear-gradient(to bottom, #050505, #060609);
-}
-
-.led {
-  height: 7em;
-  width: 7em;
-  position: absolute;
-  top: 50%;
-  z-index: -4;
-  -moz-border-radius-bottomleft: 7em;
-  -webkit-border-bottom-left-radius: 7em;
-  border-bottom-left-radius: 7em;
-  -moz-box-shadow: 0 0 2em #d7c6d4;
-  -webkit-box-shadow: 0 0 2em #d7c6d4;
-  box-shadow: 0 0 2em #d7c6d4;
-  background-color: #d7c6d4;
-}
-
-.inner-glow {
-  height: 6.72em;
-  width: 6.72em;
-  position: absolute;
-  top: 50%;
-  left: 0.3em;
-  -moz-border-radius-bottomleft: 7em;
-  -webkit-border-bottom-left-radius: 7em;
-  border-bottom-left-radius: 7em;
-  -moz-box-shadow: inset 0 0 2em rgba(215, 198, 212, 0.5), 0 0 2em rgba(215, 198, 212, 0.75);
-  -webkit-box-shadow: inset 0 0 2em rgba(215, 198, 212, 0.5), 0 0 2em rgba(215, 198, 212, 0.75);
-  box-shadow: inset 0 0 2em rgba(215, 198, 212, 0.5), 0 0 2em rgba(215, 198, 212, 0.75);
-  background-color: transparent;
-}
-
-.face {
-  height: 12.5em;
-  width: 12.5em;
-  position: absolute;
-  top: 0.75em;
-  left: 0.75em;
-  -moz-border-radius: 6.5em;
-  -webkit-border-radius: 6.5em;
-  border-radius: 6.5em;
-  background: #534b4d;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNGI0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBiMDgwYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #534b4d), color-stop(100%, #0b080c));
-  background: -moz-linear-gradient(top, #534b4d, #0b080c);
-  background: -webkit-linear-gradient(top, #534b4d, #0b080c);
-  background: linear-gradient(to bottom, #534b4d, #0b080c);
-  -moz-box-shadow: inset 1px -1px 10px rgba(215, 198, 212, 0.2);
-  -webkit-box-shadow: inset 1px -1px 10px rgba(215, 198, 212, 0.2);
-  box-shadow: inset 1px -1px 10px rgba(215, 198, 212, 0.2);
-}
-.face::before {
-  height: 11.875em;
-  width: 11.875em;
-  top: 0.3125em;
-  left: 0.3125em;
-  -moz-border-radius: 6em;
-  -webkit-border-radius: 6em;
-  border-radius: 6em;
-  background: #101312;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEwMTMxMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4MTExNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #101312), color-stop(100%, #181114));
-  background: -moz-linear-gradient(top right, #101312, #181114);
-  background: -webkit-linear-gradient(top right, #101312, #181114);
-  background: linear-gradient(to bottom left, #101312, #181114);
-}
-.face::after {
-  height: 13.4375em;
-  width: 13.4375em;
-  top: -0.46875em;
-  left: -0.46875em;
-  z-index: -3;
-  -moz-border-radius: 7em;
-  -webkit-border-radius: 7em;
-  border-radius: 7em;
-  background: #171c1a;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE0MWYxYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzEzMTAxNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #141f1b), color-stop(100%, #131014));
-  background: -moz-linear-gradient(top, #141f1b, #131014);
-  background: -webkit-linear-gradient(top, #141f1b, #131014);
-  background: linear-gradient(to bottom, #141f1b, #131014);
-}

package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/src/index.html

@@ -1,5 +0,0 @@
-<div class="ring">
-  <div class="led"></div>
-  <div class="inner-glow"></div>
-  <div class="face"></div>
-</div>

package/examples/themes/skeuomorphic/css-dark-neon-led-volume-dial/src/style.scss

@@ -1,161 +0,0 @@
-@import "compass/css3";
-
-*,
-*::before,
-*::after {
-  @include box-sizing(border-box);
-}
-
-.all {
-    // Required
-    content: "";
-    display: block;
-    position: absolute;
-  }
-
-html,
-body {
-  font-size: 100%;
-  min-height: 100%;
-}
-
-body {
-  // Background
-  background: hsl(150, 8, 9%);
-  
-  // Gradient
-  @include background(linear-gradient(top left, hsl(0,0,7%), hsl(150,8,12%)));
-}
-
-.ring {
-  // Dimensions
-  height: 14em;
-  width: 14em;
-    
-  // Positioning
-  margin: 4em auto;  
-  position: relative;
-  z-index: -5;
-  
-  // Border Radius
-  @include border-radius(7em);
-  
-  // Background
-  background: hsl(0,0,2%);
-  
-  // Gradient
-  @include background(linear-gradient(top, hsl(0,0,2%), hsl(240,18,3%)));
-  
-  &::before, &::after {
-    @extend .all;
-  }
-}
-
-.led {
-  // Dimensions
-  height: 7em;
-  width: 7em;
-  
-  // Positioning
-  position: absolute;
-  top: 50%;
-  z-index: -4;  
-  
-  // Border Radius
-  @include border-bottom-left-radius(7em);
-  
-  // Box Shadow
-  @include box-shadow(0 0 2em hsla(310,18,81%,1));
-  
-  // Background
-  background-color: hsl(310,18,81%);
-  
-  &::before, &::after {
-    @extend .all;
-  }
-}
-
-.inner-glow {
-  // Dimensions
-  height: 6.72em;
-  width: 6.72em;
-  
-  // Positioning
-  position: absolute;
-  top: 50%;
-  left: 0.3em;
-  
-  // Border Radius
-  @include border-bottom-left-radius(7em);
-  
-  // Box Shadow
-  @include box-shadow(inset 0 0 2em hsla(310,18,81%,0.5),0 0 2em hsla(310,18,81%,0.75));
-  
-  // Background
-  background-color: transparent;
-}
-
-.face {
-  // Dimensions
-  height: 12.5em;
-  width: 12.5em;
-    
-  // Positioning
-  position: absolute;
-  top: 0.75em;
-  left: 0.75em;
-    
-  // Border Radius
-  @include border-radius(6.5em);
-  
-  // Background
-  background: hsl(345,5,31%);
-  
-  // Gradient
-  @include background(linear-gradient(top, hsl(345,5,31%), hsl(280,17,4%)));
-  
-  @include box-shadow(inset 1px -1px 10px hsla(310,17,81%,0.2));
-  
-  &::before, &::after {
-    @extend .all;
-  }
-  
-  &::before {
-    // Dimensions
-    height: 11.875em;
-    width: 11.875em;
-  
-    // Positioning
-    top: 0.3125em;
-    left: 0.3125em;
-    
-    // Border Radius
-    @include border-radius(6em);
-  
-    // Background
-    background: hsl(150,9,7%);
-  
-    // Gradient
-    @include background(linear-gradient(top right, hsl(150,9,7%), hsl(330,18,8%)));
-  }
-  
-  &::after {
-    // Dimensions
-    height: 13.4375em;
-    width: 13.4375em;
-    
-    // Positioning
-    top: -0.46875em;
-    left: -0.46875em;
-    z-index: -3;
-    
-    // Border Radius
-    @include border-radius(7em);
-    
-    // Background
-    background: hsl(158,8,10%);
-    
-    // Gradient
-  @include background(linear-gradient(top, hsl(158,22,10%), hsl(280,12,7%)));
-  }
-}

package/examples/themes/skeuomorphic/led-controls/LICENSE.txt

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2026 Jon Kantner (https://codepen.io/jkantner/pen/JoPXzJJ)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/examples/themes/skeuomorphic/led-controls/README.md

@@ -1,7 +0,0 @@
-# LED Controls
-
-A Pen created on CodePen.
-
-Original URL: [https://codepen.io/jkantner/pen/JoPXzJJ](https://codepen.io/jkantner/pen/JoPXzJJ).
-
-iOS/iPadOS brightness and volume controls as grids of LED lights.

package/examples/themes/skeuomorphic/led-controls/dist/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-  <head>
-    <meta charset="UTF-8">
-    <title>LED Controls</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
-
-  </head>
-    
-  <body>
-  <div id="root"></div>
-    <script type="module" src="./script.js"></script>
-
-  </body>
-  
-</html>

package/examples/themes/skeuomorphic/led-controls/dist/script.js

@@ -1,27 +0,0 @@
-import React, { StrictMode, useState } from "https://esm.sh/react";
-import { createRoot } from "https://esm.sh/react-dom/client";
-createRoot(document.getElementById("root")).render(React.createElement(StrictMode, null,
-    React.createElement("main", null,
-        React.createElement("div", { className: "grid" },
-            React.createElement(LedControl, { icon: "sun", label: "Brightness", id: "brightness", name: "brightness", value: 30 }),
-            React.createElement(LedControl, { icon: "audio", label: "Volume", id: "volume", name: "volume", value: 20 })))));
-function LedControl({ icon, label, id, name, value = 0 }) {
-    const [val, setVal] = useState(value);
-    const clipIncrements = 44;
-    const clip = 1 - val / clipIncrements;
-    const clipPercent = clip * 100;
-    const clipA = {
-        clipPath: `polygon(0 0,100% 0,100% ${clipPercent}%,0 ${clipPercent}%)`
-    };
-    const clipB = {
-        clipPath: `polygon(0 ${clipPercent}%,100% ${clipPercent}%,100% 100%,0 100%)`
-    };
-    return (React.createElement("div", { className: "led-control" },
-        React.createElement("div", { className: "led-control__layer-wrap" },
-            React.createElement("div", { className: "led-control__layer", style: clipA },
-                React.createElement("div", { className: `led-control__icon led-control__icon--${icon}` })),
-            React.createElement("div", { className: "led-control__layer led-control__layer--inverted", style: clipB },
-                React.createElement("div", { className: `led-control__icon led-control__icon--${icon}` }))),
-        React.createElement("label", { className: "led-control__label", htmlFor: name }, label),
-        React.createElement("input", { className: "led-control__input", type: "range", id: id, name: name, value: val, step: 1, min: 0, max: clipIncrements, onChange: e => setVal(+e.target.value) })));
-}

package/examples/themes/skeuomorphic/led-controls/dist/style.css

@@ -1,135 +0,0 @@
-* {
-  border: 0;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-:root {
-  --hue: 223;
-  --sat: 10%;
-  --bg: hsl(var(--hue),var(--sat),30%);
-  --fg: hsl(var(--hue),var(--sat),90%);
-  font-size: 12px;
-}
-
-body,
-input {
-  font: 1em/1.5 sans-serif;
-}
-
-body {
-  background-color: var(--bg);
-  color: var(--fg);
-  display: flex;
-  height: 100vh;
-}
-
-input {
-  outline: transparent;
-  -webkit-appearance: none;
-  appearance: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-main {
-  display: flex;
-  overflow-x: hidden;
-  padding: 1.5em 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-.grid {
-  display: grid;
-  gap: 1.5em;
-  grid-template-columns: repeat(2, 1fr);
-  margin: auto;
-}
-
-.led-control {
-  margin: auto;
-  position: relative;
-  width: 10.5em;
-  height: 22em;
-}
-.led-control__icon {
-  color: #eee;
-  bottom: 2.5em;
-  left: 2.5em;
-  width: 5.5em;
-  height: 5.5em;
-}
-.led-control__icon, .led-control__icon:before {
-  position: absolute;
-}
-.led-control__icon:before {
-  border-radius: 50%;
-  content: "";
-  display: block;
-  filter: drop-shadow(1px 1px var(--bg)) drop-shadow(-1px 0 var(--bg)) drop-shadow(0 -1px var(--bg));
-  top: 0.0625em;
-  left: 0.0625em;
-  width: 0.375em;
-  height: 0.375em;
-}
-.led-control__icon--audio:before {
-  box-shadow: 2.5em 0.5em, 2em 1em, 2.5em 1em, 1.5em 1.5em, 2em 1.5em, 2.5em 1.5em, 4.5em 1.5em, 0.5em 2em, 1em 2em, 1.5em 2em, 2em 2em, 2.5em 2em, 4em 2em, 0.5em 2.5em, 1em 2.5em, 1.5em 2.5em, 2em 2.5em, 2.5em 2.5em, 4.5em 2.5em, 0.5em 3em, 1em 3em, 1.5em 3em, 2em 3em, 2.5em 3em, 4em 3em, 1.5em 3.5em, 2em 3.5em, 2.5em 3.5em, 4.5em 3.5em, 2em 4em, 2.5em 4em, 2.5em 4.5em;
-}
-.led-control__icon--sun:before {
-  box-shadow: 2.5em 0em, 0.5em 0.5em, 2.5em 0.5em, 4.5em 0.5em, 1em 1em, 2em 1em, 2.5em 1em, 3em 1em, 4em 1em, 1.5em 1.5em, 3.5em 1.5em, 1em 2em, 4em 2em, 0em 2.5em, 0.5em 2.5em, 1em 2.5em, 4em 2.5em, 4.5em 2.5em, 5em 2.5em, 1em 3em, 4em 3em, 1.5em 3.5em, 3.5em 3.5em, 1em 4em, 2em 4em, 2.5em 4em, 3em 4em, 4em 4em, 0.5em 4.5em, 2.5em 4.5em, 4.5em 4.5em, 2.5em 5em;
-}
-.led-control__input, .led-control__label, .led-control__layer, .led-control__layer-wrap {
-  position: absolute;
-}
-.led-control__input {
-  background-color: transparent;
-  box-shadow: 0 0 0 0.25em transparent;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-90deg);
-  width: 22em;
-  height: 10.5em;
-}
-.led-control__input:focus-visible {
-  box-shadow: 0 0 0 0.25em var(--fg);
-}
-.led-control__input::-webkit-slider-thumb {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  cursor: pointer;
-  width: 2.5em;
-  height: 10.5em;
-  -webkit-appearance: none;
-}
-.led-control__input::-moz-range-thumb {
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  cursor: pointer;
-  width: 2.5em;
-  height: 10.5em;
-}
-.led-control__label {
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-}
-.led-control__layer {
-  background: url("data:image/svg+xml,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle fill='%23111' cx='4' cy='4' r='3' /></svg>") 0 0/0.5em 0.5em;
-}
-.led-control__layer, .led-control__layer-wrap {
-  inset: 0;
-}
-.led-control__layer-wrap {
-  clip-path: polygon(1em 0em, 9.5em 0em, 9.5em 0.5em, 10em 0.5em, 10em 1em, 10.5em 1em, 10.5em 21em, 10em 21em, 10em 21em, 10em 21.5em, 9.5em 21.5em, 9.5em 22em, 1em 22em, 1em 21.5em, 0.5em 21.5em, 0.5em 21em, 0em 21em, 0em 1em, 0.5em 1em, 0.5em 0.5em, 1em 0.5em);
-}
-.led-control__layer--inverted {
-  background-image: url("data:image/svg+xml,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle fill='%23eee' cx='4' cy='4' r='3' /></svg>");
-}
-.led-control__layer--inverted .led-control__icon {
-  color: #111;
-}

package/examples/themes/skeuomorphic/led-controls/src/index.html

@@ -1 +0,0 @@
-<div id="root"></div>

package/examples/themes/skeuomorphic/led-controls/src/script.ts

@@ -1,59 +0,0 @@
-import React, { StrictMode, useState } from "https://esm.sh/react";
-import { createRoot } from "https://esm.sh/react-dom/client";
-
-createRoot(document.getElementById("root")!).render(
-	<StrictMode>
-		<main>
-			<div className="grid">
-				<LedControl icon="sun" label="Brightness" id="brightness" name="brightness" value={30} />
-				<LedControl icon="audio" label="Volume" id="volume" name="volume" value={20} />
-			</div>
-		</main>
-	</StrictMode>
-);
-
-function LedControl({ icon, label, id, name, value = 0 }: LedControlProps) {
-	const [val, setVal] = useState(value);
-	const clipIncrements = 44;
-	const clip = 1 - val / clipIncrements;
-	const clipPercent = clip * 100;
-	const clipA = {
-		clipPath: `polygon(0 0,100% 0,100% ${clipPercent}%,0 ${clipPercent}%)`
-	};
-	const clipB = {
-		clipPath: `polygon(0 ${clipPercent}%,100% ${clipPercent}%,100% 100%,0 100%)`
-	};
-
-	return (
-		<div className="led-control">
-			<div className="led-control__layer-wrap">
-				<div className="led-control__layer" style={clipA}>
-					<div className={`led-control__icon led-control__icon--${icon}`}></div>
-				</div>
-				<div className="led-control__layer led-control__layer--inverted" style={clipB}>
-					<div className={`led-control__icon led-control__icon--${icon}`}></div>
-				</div>
-			</div>
-			<label className="led-control__label" htmlFor={name}>{label}</label>
-			<input
-				className="led-control__input"
-				type="range"
-				id={id}
-				name={name}
-				value={val}
-				step={1}
-				min={0}
-				max={clipIncrements}
-				onChange={e => setVal(+e.target.value)}
-			/>
-		</div>
-	);
-}
-
-type LedControlProps = {
-    icon: string;
-    label: string;
-    id: string;
-    name: string;
-    value?: number;
-};