feat(range): range dark/light theme

websublime · Aug 8, 2023 · c8048e5 · c8048e5
1 parent e1a7c5d
commit c8048e5
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 214 deletions.
diff --git a/.changeset/stale-lamps-sing.md b/.changeset/stale-lamps-sing.md
@@ -0,0 +1,9 @@
+---
+'@websublime/vitamin-theme': minor
+'@websublime/vitamin-docs': minor
+'@websublime/vitamin-ui': minor
+---
+
+Range element
+
+Add range element with min and max. Defined how light/dark theme are applied.
diff --git a/packages/theme/src/css/utilities/globals.css b/packages/theme/src/css/utilities/globals.css
@@ -16,203 +16,12 @@
   }
 }
 
-html,
-body,
-p,
-ol,
-ul,
-li,
-dl,
-dt,
-dd,
-blockquote,
-figure,
-fieldset,
-legend,
-textarea,
-pre,
-iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  padding: 0;
+.dark {
+  color-scheme: dark;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
-
-ul {
-  list-style: none;
-}
-
-button,
-input,
-select,
-textarea {
-  margin: 0;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-*, *::before, *::after {
-  box-sizing: inherit;
-}
-
-img,
-video {
-  height: auto;
-  max-width: 100%;
-}
-
-iframe {
-  border: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-td:not([align]),
-th:not([align]) {
-  text-align: inherit;
-}
-
-html {
-  font-size: 16px;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  min-width: 300px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
-}
-
-article,
-aside,
-figure,
-footer,
-header,
-hgroup,
-section {
-  display: block;
-}
-
-body,
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: var(--font-family);
-}
-
-code,
-pre {
-  -moz-osx-font-smoothing: auto;
-  -webkit-font-smoothing: auto;
-  font-family: monospace;
-}
-
-body {
-  font-family: var(--font-family);
-  font-size: var(--font-size, clamp(2rem, 4vw + 1rem, 3rem));
-  /* color: hsla(var(--primary-color) / var(--tw-text-opacity, 1)); */
-}
-
-a {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-a strong {
-  color: currentColor;
-}
-
-code {
-  font-weight: normal;
-  padding: 0.25em 0.5em 0.25em;
-}
-
-hr {
-  background-color: whitesmoke;
-  border: none;
-  display: block;
-  height: 2px;
-  margin: 1.5rem 0;
-}
-
-img {
-  height: auto;
-  max-width: 100%;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: baseline;
-}
-
-small {
-  font-size: 0.875em;
-}
-
-span {
-  font-style: inherit;
-  font-weight: inherit;
-}
-
-strong {
-  font-weight: 700;
-}
-
-fieldset {
-  border: none;
-}
-
-pre {
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  white-space: pre;
-  word-wrap: normal;
-}
-
-pre code {
-  background-color: transparent;
-  color: currentColor;
-  font-size: 1em;
-  padding: 0;
-}
-
-table td,
-table th {
-  vertical-align: top;
-}
-
-table td:not([align]),
-table th:not([align]) {
-  text-align: inherit;
+.light {
+  color-scheme: light;
 }
 
 @keyframes spinAround {

diff --git a/packages/theme/src/css/utilities/properties.css b/packages/theme/src/css/utilities/properties.css
@@ -34,8 +34,43 @@
   --checkbox-hover-color: theme('colors.grey-dark');
   --checkbox-diameter: 20px;
   --checkbox-border-radius: 5px;
-  --checkbox-border-color: theme('colors.grey');;
+  --checkbox-border-color: theme('colors.grey');
   --checkbox-border-width: 1px;
   --checkbox-border-style: solid;
   --checkbox-checkmark-size: 1.2;
 }
+
+.checkbox-props-dark {
+  --checkbox-checked-color: theme('colors.grey-light');
+  --checkbox-background-color: theme('colors.grey-dark');
+  --checkbox-hover-color: theme('colors.grey-light');
+  --checkbox-border-color: theme('colors.white');
+}
+
+.checkbox-props-light {
+  --checkbox-checked-color: theme('colors.grey-dark');
+  --checkbox-background-color: theme('colors.white');
+  --checkbox-hover-color: theme('colors.grey-dark');
+  --checkbox-border-color: theme('colors.grey');
+}
+
+
+.range-props {
+  --range-width: 100%;
+  --range-height: 4px;
+  --range-border-radius: 5px;
+  --range-thumb-width: 15px;
+  --range-thumb-height: 15px;
+  --range-thumb-border-radius: 50%;
+  --range-thumb-hover-box-shadow: 0px 0px 0px 8px theme('colors.grey');
+}
+
+.range-props-dark {
+  --range-background-color: theme('colors.grey');
+  --range-thumb-background-color: theme('colors.white');
+}
+
+.range-props-light {
+  --range-background-color: theme('colors.grey-dark');
+  --range-thumb-background-color: theme('colors.grey-light');
+}
diff --git a/packages/theme/tailwind.config.js b/packages/theme/tailwind.config.js
@@ -3,6 +3,7 @@
 module.exports = {
   content: ['./www/index.html'],
   plugins: [require('./dist/index.js')()],
+  safelist: ['dark', 'light', 'debug'],
   theme: {
     extend: {}
   }

diff --git a/packages/ui/development.mjs b/packages/ui/development.mjs
@@ -32,6 +32,7 @@ const processor = (html = false) =>
           config: {
             content: ['./www/index.html'],
             plugins: [vitaminTheme()],
+            safelist: ['dark', 'light', 'debug'],
             theme: {
               extend: {}
             }
@@ -41,6 +42,7 @@ const processor = (html = false) =>
           config: {
             content: ['./src/**/*.{ts,tsx}'],
             plugins: [vitaminTheme()],
+            safelist: ['dark', 'light'],
             theme: {
               extend: {}
             }

diff --git a/packages/ui/src/elements/checkbox/style.css b/packages/ui/src/elements/checkbox/style.css
@@ -6,6 +6,14 @@
     @apply checkbox-props flex flex-wrap content-center;
   }
 
+  :host-context(html.dark) {
+    @apply checkbox-props-dark;
+  }
+
+  :host-context(html.light) {
+    @apply checkbox-props-light;
+  }
+
   .ui-checkbox-label {
     @apply flex;
   }

diff --git a/packages/ui/src/elements/range/range.ts b/packages/ui/src/elements/range/range.ts
@@ -73,6 +73,7 @@ export class RangeElement extends ComponentElement<RangeElementOptions> {
   render() {
     return html`
       <label for="range">
+        <slot name="min"></slot>
         <input
           type="range"
           .min="${this.min}"
@@ -81,6 +82,7 @@ export class RangeElement extends ComponentElement<RangeElementOptions> {
           @change=${this.handleChange}
           id="range"
         />
+        <slot name="max"></slot>
       </label>
     `;
   }