@yourdash/uikit 1.0.42 → 1.0.43

package/dist/defaultTheme.module.scss

@@ -1,16 +1,16 @@
+@use "themeValues" as *;
+
 /*!
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * Copyright ©2025 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-@use "themeValues" as *;
-
 .theme {
   overflow-x: hidden;
   overflow-y: auto;
   height: 100%;
 
-  background: var(#{$theme+$background});
+  background: rgb(var(#{$theme+$background}));
   #{$theme}-author: "Ewsgit";
   #{$theme}-name: "YourDash Classic Dark";
   #{$theme}-version: "0.0.1";
@@ -26,12 +26,12 @@
 }
 
 .level0 {
-  color: var(#{$theme+$color});
+  color: rgb(var(#{$theme+$color}));
 
-  #{$theme+$color}: #ffffff;
-  #{$theme+$subcolor}: #bbbbbb;
-  #{$theme+$background}: #222222;
-  #{$theme+$accent}: #768ce7;
+  #{$theme+$color}: 255, 255, 255;
+  #{$theme+$subcolor}: 187, 187, 187;
+  #{$theme+$background}: 34, 34, 34;
+  #{$theme+$accent}: 118, 140, 231;
   #{$theme+$border}: 1px solid #555555;
   #{$theme+$radius}: 1rem;
   #{$theme+$padding}: 1rem;
@@ -39,7 +39,7 @@
   #{$theme+$transition}: all 200ms ease-in-out;
   #{$theme+$transition+$transition}: 200ms ease-in-out;
   #{$theme+$separator+$size}: 1px;
-  #{$theme+$separator+$color}: #444444;
+  #{$theme+$separator+$color}: 68, 68, 68;
   #{$theme+$scrollbar+$width}: 0.4rem;
   #{$theme+$scrollbar+$radius}: 0.1rem;
 
@@ -58,288 +58,288 @@
   #{$theme+$heading+$h6+$size}: 0.875rem;
 
   // input
-  #{$theme+$input+$color}: #ffffff;
-  #{$theme+$input+$background}: #222222;
+  #{$theme+$input+$color}: 255, 255, 255;
+  #{$theme+$input+$background}: 34, 34, 34;
   #{$theme+$input+$border}: 1px solid #444444;
   #{$theme+$input+$radius}: 0.5rem;
   #{$theme+$input+$height}: 2rem;
   #{$theme+$input+$padding+$horizontal}: 0.5rem;
   #{$theme+$input+$transition}: all 0.2s ease-in-out;
   // focus
-  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$focus}#{$background}: #333333;
-  #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
+  #{$theme+$input+$focus+$color}: 255, 255, 255;
+  #{$theme+$input+$focus+$background}: 51, 51, 51;
+  #{$theme+$input+$focus+$border}: 1px solid #666666;
 
   // button
-  #{$theme}#{$button}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$background}: #444444;
-  #{$theme}#{$button}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
-  #{$theme}#{$button}#{$font}#{$weight}: 400;
-  #{$theme}#{$button}#{$radius}: 0.5rem;
-  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
-  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  #{$theme+$button+$color}: 255, 255, 255;
+  #{$theme+$button+$background}: 68, 68, 68;
+  #{$theme+$button+$border}: 0px solid #666666;
+  #{$theme+$button+$font+$size}: 0.9rem;
+  #{$theme+$button+$font+$weight}: 400;
+  #{$theme+$button+$radius}: 0.5rem;
+  #{$theme+$button+$padding+$horizontal}: 0.5rem;
+  #{$theme+$button+$transition}: all 0.2s ease-in-out;
   // hover
-  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$hover}#{$background}: #555555;
-  #{$theme}#{$button}#{$hover}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$hover}#{$radius}: 0.5rem;
-  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  #{$theme+$button+$hover+$color}: 255, 255, 255;
+  #{$theme+$button+$hover+$background}: 85, 85, 85;
+  #{$theme+$button+$hover+$border}: 0px solid #666666;
+  #{$theme+$button+$hover+$radius}: 0.5rem;
+  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
   // active
-  #{$theme}#{$button}#{$active}#{$color}: #000000;
-  #{$theme}#{$button}#{$active}#{$background}: #666666;
-  #{$theme}#{$button}#{$active}#{$border}: 0px solid #777777;
-  #{$theme}#{$button}#{$active}#{$radius}: 0.5rem;
-  #{$theme}#{$button}#{$active}#{$transition}: all 50ms ease-in-out;
+  #{$theme+$button+$active+$color}: 0, 0, 0;
+  #{$theme+$button+$active+$background}: 102, 102, 102;
+  #{$theme+$button+$active+$border}: 0px solid #777777;
+  #{$theme+$button+$active+$radius}: 0.5rem;
+  #{$theme+$button+$active+$transition}: all 50ms ease-in-out;
 
   // text button
   #{$theme+$textbutton+$font+$weight}: 700;
 
   // font
-  #{$theme}#{$font}#{$family}: Inter;
-  #{$theme}#{$font}#{$size}: 0.9rem;
-  #{$theme}#{$font}#{$weight}: 400;
+  #{$theme+$font+$family}: Inter;
+  #{$theme+$font+$size}: 0.9rem;
+  #{$theme+$font+$weight}: 400;
 
   // header
-  #{$theme}#{$header}#{$color}: #ffffff;
-  #{$theme}#{$header}#{$font}#{$family}: Inter;
-  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
-  #{$theme}#{$header}#{$font}#{$weight}: 700;
-  #{$theme}#{$header}#{$padding}#{$vertical}: 1rem;
-  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme+$header+$color}: 255, 255, 255;
+  #{$theme+$header+$font+$family}: Inter;
+  #{$theme+$header+$font+$size}: 1.2rem;
+  #{$theme+$header+$font+$weight}: 700;
+  #{$theme+$header+$padding+$vertical}: 1rem;
+  #{$theme+$header+$padding+$horizontal}: 0.5rem;
 }
 
 .level1 {
-  color: var(#{$theme+$color});
-
-  #{$theme}#{$color}: #ffffff;
-  #{$theme}#{$background}: #333333;
-  #{$theme}#{$border}: 1px solid #666666;
-  #{$theme}#{$accent}: #768ce7;
-  #{$theme}#{$radius}: 0.5rem;
-  #{$theme}#{$font}#{$family}: Inter;
-  #{$theme}#{$font}#{$radius}: 0.9rem;
-  #{$theme}#{$font}#{$weight}: 400;
-  #{$theme}#{$padding}: 0.75rem;
-  #{$theme}#{$gap}: 0.5rem;
-  #{$theme}#{$transition}: all 200ms ease-in-out;
-  #{$theme}#{$separator}#{$size}: 1px;
-  #{$theme}#{$separator}#{$color}: #555555;
+  color: rgb(var(#{$theme+$color}));
+
+  #{$theme+$color}: 255, 255, 255;
+  #{$theme+$background}: 51, 51, 51;
+  #{$theme+$border}: 1px solid #666666;
+  #{$theme+$accent}: 118, 140, 231;
+  #{$theme+$radius}: 0.5rem;
+  #{$theme+$font+$family}: Inter;
+  #{$theme+$font+$radius}: 0.9rem;
+  #{$theme+$font+$weight}: 400;
+  #{$theme+$padding}: 0.75rem;
+  #{$theme+$gap}: 0.5rem;
+  #{$theme+$transition}: all 200ms ease-in-out;
+  #{$theme+$separator+$size}: 1px;
+  #{$theme+$separator+$color}: 85, 85, 85;
 
   // heading
-  #{$theme}#{$heading}#{$h1}#{$weight}: 800;
-  #{$theme}#{$heading}#{$h1}#{$size}: 3rem;
-  #{$theme}#{$heading}#{$h2}#{$weight}: 700;
-  #{$theme}#{$heading}#{$h2}#{$size}: 2.5rem;
-  #{$theme}#{$heading}#{$h3}#{$weight}: 600;
-  #{$theme}#{$heading}#{$h3}#{$size}: 2rem;
-  #{$theme}#{$heading}#{$h4}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h4}#{$size}: 1.5rem;
-  #{$theme}#{$heading}#{$h5}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h5}#{$size}: 1rem;
-  #{$theme}#{$heading}#{$h6}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h6}#{$size}: 0.875rem;
+  #{$theme+$heading+$h1+$weight}: 800;
+  #{$theme+$heading+$h1+$size}: 3rem;
+  #{$theme+$heading+$h2+$weight}: 700;
+  #{$theme+$heading+$h2+$size}: 2.5rem;
+  #{$theme+$heading+$h3+$weight}: 600;
+  #{$theme+$heading+$h3+$size}: 2rem;
+  #{$theme+$heading+$h4+$weight}: 500;
+  #{$theme+$heading+$h4+$size}: 1.5rem;
+  #{$theme+$heading+$h5+$weight}: 500;
+  #{$theme+$heading+$h5+$size}: 1rem;
+  #{$theme+$heading+$h6+$weight}: 500;
+  #{$theme+$heading+$h6+$size}: 0.875rem;
 
   // input
-  #{$theme}#{$input}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$background}: #222222;
-  #{$theme}#{$input}#{$border}: 1px solid #444444;
-  #{$theme}#{$input}#{$radius}: 0.5rem;
-  #{$theme}#{$input}#{$height}: 2rem;
-  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
-  #{$theme}#{$input}#{$transition}: all 0.2s ease-in-out;
+  #{$theme+$input+$color}: 255, 255, 255;
+  #{$theme+$input+$background}: 34, 34, 34;
+  #{$theme+$input+$border}: 1px solid #444444;
+  #{$theme+$input+$radius}: 0.5rem;
+  #{$theme+$input+$height}: 2rem;
+  #{$theme+$input+$padding+$horizontal}: 0.5rem;
+  #{$theme+$input+$transition}: all 0.2s ease-in-out;
   // focus
-  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$focus}#{$background}: #333333;
-  #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
+  #{$theme+$input+$focus+$color}: 255, 255, 255;
+  #{$theme+$input+$focus+$background}: 51, 51, 51;
+  #{$theme+$input+$focus+$border}: 1px solid #666666;
 
   // button
-  #{$theme}#{$button}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$background}: #444444;
-  #{$theme}#{$button}#{$border}: 0px solid #444444;
-  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
-  #{$theme}#{$button}#{$font}#{$weight}: 400;
-  #{$theme}#{$button}#{$radius}: 0.5rem;
-  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
-  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  #{$theme+$button+$color}: 255, 255, 255;
+  #{$theme+$button+$background}: 68, 68, 68;
+  #{$theme+$button+$border}: 0px solid #444444;
+  #{$theme+$button+$font+$size}: 0.9rem;
+  #{$theme+$button+$font+$weight}: 400;
+  #{$theme+$button+$radius}: 0.5rem;
+  #{$theme+$button+$padding+$horizontal}: 0.5rem;
+  #{$theme+$button+$transition}: all 0.2s ease-in-out;
   // hover
-  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$hover}#{$background}: #555555;
-  #{$theme}#{$button}#{$hover}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$hover}#{$radius}: 0.5rem;
-  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  #{$theme+$button+$hover+$color}: 255, 255, 255;
+  #{$theme+$button+$hover+$background}: 85, 85, 85;
+  #{$theme+$button+$hover+$border}: 0px solid #666666;
+  #{$theme+$button+$hover+$radius}: 0.5rem;
+  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
   // active
-  #{$theme}#{$button}#{$active}#{$color}: #000000;
-  #{$theme}#{$button}#{$active}#{$background}: #666666;
-  #{$theme}#{$button}#{$active}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$active}#{$radius}: 0.5rem;
+  #{$theme+$button+$active+$color}: 0, 0, 0;
+  #{$theme+$button+$active+$background}: 102, 102, 102;
+  #{$theme+$button+$active+$border}: 0px solid #666666;
+  #{$theme+$button+$active+$radius}: 0.5rem;
 
   // header
-  #{$theme}#{$header}#{$color}: #ffffff;
-  #{$theme}#{$header}#{$font}#{$family}: Inter;
-  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
-  #{$theme}#{$header}#{$font}#{$weight}: 700;
-  #{$theme}#{$header}#{$padding}#{$vertical}: 0.5rem;
-  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.25rem;
+  #{$theme+$header+$color}: 255, 255, 255;
+  #{$theme+$header+$font+$family}: Inter;
+  #{$theme+$header+$font+$size}: 1.2rem;
+  #{$theme+$header+$font+$weight}: 700;
+  #{$theme+$header+$padding+$vertical}: 0.5rem;
+  #{$theme+$header+$padding+$horizontal}: 0.25rem;
 }
 
 .level2 {
-  color: var(#{$theme+$color});
-
-  #{$theme}#{$color}: #ffffff;
-  #{$theme}#{$background}: #444444;
-  #{$theme}#{$border}: 1px solid #666666;
-  #{$theme}#{$accent}: #768ce7;
-  #{$theme}#{$radius}: 0.25rem;
-  #{$theme}#{$padding}: 0.5rem;
-  #{$theme}#{$gap}: 0.75rem;
-  #{$theme}#{$transition}: all 200ms ease-in-out;
-  #{$theme}#{$separator}#{$size}: 1px;
-  #{$theme}#{$separator}#{$color}: #555555;
+  color: rgb(var(#{$theme+$color}));
+
+  #{$theme+$color}: 255, 255, 255;
+  #{$theme+$background}: 68, 68, 68;
+  #{$theme+$border}: 1px solid #666666;
+  #{$theme+$accent}: 118, 140, 231;
+  #{$theme+$radius}: 0.25rem;
+  #{$theme+$padding}: 0.5rem;
+  #{$theme+$gap}: 0.75rem;
+  #{$theme+$transition}: all 200ms ease-in-out;
+  #{$theme+$separator+$size}: 1px;
+  #{$theme+$separator+$color}: 85, 85, 85;
 
   // heading
-  #{$theme}#{$heading}#{$h1}#{$weight}: 900;
-  #{$theme}#{$heading}#{$h1}#{$size}: 3rem;
-  #{$theme}#{$heading}#{$h2}#{$weight}: 700;
-  #{$theme}#{$heading}#{$h2}#{$size}: 2rem;
-  #{$theme}#{$heading}#{$h3}#{$weight}: 600;
-  #{$theme}#{$heading}#{$h3}#{$size}: 1.5rem;
-  #{$theme}#{$heading}#{$h4}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h4}#{$size}: 1.25rem;
-  #{$theme}#{$heading}#{$h5}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h5}#{$size}: 1rem;
-  #{$theme}#{$heading}#{$h6}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h6}#{$size}: 0.875rem;
+  #{$theme+$heading+$h1+$weight}: 900;
+  #{$theme+$heading+$h1+$size}: 3rem;
+  #{$theme+$heading+$h2+$weight}: 700;
+  #{$theme+$heading+$h2+$size}: 2rem;
+  #{$theme+$heading+$h3+$weight}: 600;
+  #{$theme+$heading+$h3+$size}: 1.5rem;
+  #{$theme+$heading+$h4+$weight}: 500;
+  #{$theme+$heading+$h4+$size}: 1.25rem;
+  #{$theme+$heading+$h5+$weight}: 500;
+  #{$theme+$heading+$h5+$size}: 1rem;
+  #{$theme+$heading+$h6+$weight}: 500;
+  #{$theme+$heading+$h6+$size}: 0.875rem;
 
   // text button
   #{$theme+$textbutton+$font+$weight}: 700;
 
   // font
-  #{$theme}#{$font}#{$family}: Inter;
-  #{$theme}#{$font}#{$size}: 0.9rem;
-  #{$theme}#{$font}#{$weight}: 400;
+  #{$theme+$font+$family}: Inter;
+  #{$theme+$font+$size}: 0.9rem;
+  #{$theme+$font+$weight}: 400;
 
   // input
-  #{$theme}#{$input}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$background}: #222222;
-  #{$theme}#{$input}#{$border}: 1px solid #444444;
-  #{$theme}#{$input}#{$radius}: 0.5rem;
-  #{$theme}#{$input}#{$height}: 2rem;
-  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
-  #{$theme}#{$input}#{$transition}: all 0.2s ease-in-out;
+  #{$theme+$input+$color}: 255, 255, 255;
+  #{$theme+$input+$background}: 34, 34, 34;
+  #{$theme+$input+$border}: 1px solid #444444;
+  #{$theme+$input+$radius}: 0.5rem;
+  #{$theme+$input+$height}: 2rem;
+  #{$theme+$input+$padding+$horizontal}: 0.5rem;
+  #{$theme+$input+$transition}: all 0.2s ease-in-out;
   // focus
-  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$focus}#{$background}: #333333;
-  #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
+  #{$theme+$input+$focus+$color}: 255, 255, 255;
+  #{$theme+$input+$focus+$background}: 51, 51, 51;
+  #{$theme+$input+$focus+$border}: 1px solid #666666;
 
   // button
-  #{$theme}#{$button}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$background}: #555555;
-  #{$theme}#{$button}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$font}#{$family}: Inter;
-  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
-  #{$theme}#{$button}#{$font}#{$weight}: 400;
-  #{$theme}#{$button}#{$radius}: 0.25rem;
-  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
-  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  #{$theme+$button+$color}: 255, 255, 255;
+  #{$theme+$button+$background}: 85, 85, 85;
+  #{$theme+$button+$border}: 0px solid #666666;
+  #{$theme+$button+$font+$family}: Inter;
+  #{$theme+$button+$font+$size}: 0.9rem;
+  #{$theme+$button+$font+$weight}: 400;
+  #{$theme+$button+$radius}: 0.25rem;
+  #{$theme+$button+$padding+$horizontal}: 0.5rem;
+  #{$theme+$button+$transition}: all 0.2s ease-in-out;
   // hover
-  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$hover}#{$background}: #666666;
-  #{$theme}#{$button}#{$hover}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$hover}#{$radius}: 0.25rem;
-  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  #{$theme+$button+$hover+$color}: 255, 255, 255;
+  #{$theme+$button+$hover+$background}: 102, 102, 102;
+  #{$theme+$button+$hover+$border}: 0px solid #666666;
+  #{$theme+$button+$hover+$radius}: 0.25rem;
+  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
   // active
-  #{$theme}#{$button}#{$active}#{$color}: #000000;
-  #{$theme}#{$button}#{$active}#{$background}bg: #666666;
-  #{$theme}#{$button}#{$active}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$active}#{$radius}: 0.25rem;
+  #{$theme+$button+$active+$color}: 0, 0, 0;
+  #{$theme+$button+$active+$background}: 102, 102, 102;
+  #{$theme+$button+$active+$border}: 0px solid #666666;
+  #{$theme+$button+$active+$radius}: 0.25rem;
 
   // header
-  #{$theme}#{$header}#{$color}: #ffffff;
-  #{$theme}#{$header}#{$font}#{$family}: Inter;
-  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
-  #{$theme}#{$header}#{$font}#{$weight}: 700;
-  #{$theme}#{$header}#{$padding}#{$vertical}: 0.5rem;
-  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.25rem;
+  #{$theme+$header+$color}: 255, 255, 255;
+  #{$theme+$header+$font+$family}: Inter;
+  #{$theme+$header+$font+$size}: 1.2rem;
+  #{$theme+$header+$font+$weight}: 700;
+  #{$theme+$header+$padding+$vertical}: 0.5rem;
+  #{$theme+$header+$padding+$horizontal}: 0.25rem;
 }
 
 .level3 {
-  color: var(#{$theme+$color});
-
-  #{$theme}#{$color}: #ffffff;
-  #{$theme}#{$background}: #555555;
-  #{$theme}#{$border}: 1px solid #666666;
-  #{$theme}#{$accent}: #768ce7;
-  #{$theme}#{$radius}: 1px;
-  #{$theme}#{$padding}: 0.5rem;
-  #{$theme}#{$gap}: 1rem;
-  #{$theme}#{$transition}: all 200ms ease-in-out;
-  #{$theme}#{$separator}#{$size}: 1px;
-  #{$theme}#{$separator}#{$color}: #555555;
+  color: rgb(var(#{$theme+$color}));
+
+  #{$theme+$color}: 255, 255, 255;
+  #{$theme+$background}: 85, 85, 85;
+  #{$theme+$border}: 1px solid #666666;
+  #{$theme+$accent}: 118, 140, 231;
+  #{$theme+$radius}: 1px;
+  #{$theme+$padding}: 0.5rem;
+  #{$theme+$gap}: 1rem;
+  #{$theme+$transition}: all 200ms ease-in-out;
+  #{$theme+$separator+$size}: 1px;
+  #{$theme+$separator+$color}: 85, 85, 85;
 
   // heading
-  #{$theme}#{$heading}#{$h1}#{$weight}: 900;
-  #{$theme}#{$heading}#{$h1}#{$size}: 3rem;
-  #{$theme}#{$heading}#{$h2}#{$weight}: 700;
-  #{$theme}#{$heading}#{$h2}#{$size}: 2rem;
-  #{$theme}#{$heading}#{$h3}#{$weight}: 600;
-  #{$theme}#{$heading}#{$h3}#{$size}: 1.5rem;
-  #{$theme}#{$heading}#{$h4}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h4}#{$size}: 1.25rem;
-  #{$theme}#{$heading}#{$h5}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h5}#{$size}: 1rem;
-  #{$theme}#{$heading}#{$h6}#{$weight}: 500;
-  #{$theme}#{$heading}#{$h6}#{$size}: 0.875rem;
+  #{$theme+$heading+$h1+$weight}: 900;
+  #{$theme+$heading+$h1+$size}: 3rem;
+  #{$theme+$heading+$h2+$weight}: 700;
+  #{$theme+$heading+$h2+$size}: 2rem;
+  #{$theme+$heading+$h3+$weight}: 600;
+  #{$theme+$heading+$h3+$size}: 1.5rem;
+  #{$theme+$heading+$h4+$weight}: 500;
+  #{$theme+$heading+$h4+$size}: 1.25rem;
+  #{$theme+$heading+$h5+$weight}: 500;
+  #{$theme+$heading+$h5+$size}: 1rem;
+  #{$theme+$heading+$h6+$weight}: 500;
+  #{$theme+$heading+$h6+$size}: 0.875rem;
 
   // text button
   #{$theme+$textbutton+$font+$weight}: 700;
 
   // font
-  #{$theme}#{$family}: Inter;
-  #{$theme}#{$size}: 0.9rem;
-  #{$theme}#{$weight}: 400;
+  #{$theme+$family}: Inter;
+  #{$theme+$size}: 0.9rem;
+  #{$theme+$weight}: 400;
 
   // input
-  #{$theme}#{$input}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$background}: #222222;
-  #{$theme}#{$input}#{$border}: 1px solid #444444;
-  #{$theme}#{$input}#{$radius}: 0.5rem;
-  #{$theme}#{$input}#{$height}: 2rem;
-  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
-  #{$theme}#{$input}#{$transition}: all 0.2s ease-in-out;
+  #{$theme+$input+$color}: 255, 255, 255;
+  #{$theme+$input+$background}: 34, 34, 34;
+  #{$theme+$input+$border}: 1px solid #444444;
+  #{$theme+$input+$radius}: 0.5rem;
+  #{$theme+$input+$height}: 2rem;
+  #{$theme+$input+$padding+$horizontal}: 0.5rem;
+  #{$theme+$input+$transition}: all 0.2s ease-in-out;
   // focus
-  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
-  #{$theme}#{$input}#{$focus}#{$background}: #333333;
-  #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
+  #{$theme+$input+$focus+$color}: 255, 255, 255;
+  #{$theme+$input+$focus+$background}: 51, 51, 51;
+  #{$theme+$input+$focus+$border}: 1px solid #666666;
 
   // button
-  #{$theme}#{$button}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$background}: #666666;
-  #{$theme}#{$button}#{$border}: 0px solid #666666;
-  #{$theme}#{$button}#{$font}#{$family}: Inter;
-  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
-  #{$theme}#{$button}#{$font}#{$weight}: 400;
-  #{$theme}#{$button}#{$radius}: 0.25rem;
-  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme+$button+$color}: 255, 255, 255;
+  #{$theme+$button+$background}: 102, 102, 102;
+  #{$theme+$button+$border}: 0px solid #666666;
+  #{$theme+$button+$font+$family}: Inter;
+  #{$theme+$button+$font+$size}: 0.9rem;
+  #{$theme+$button+$font+$weight}: 400;
+  #{$theme+$button+$radius}: 0.25rem;
+  #{$theme+$button+$padding+$horizontal}: 0.5rem;
   // hover
-  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
-  #{$theme}#{$button}#{$hover}#{$background}: #777777;
-  #{$theme}#{$button}#{$hover}#{$border}: 0px solid #777777;
-  #{$theme}#{$button}#{$hover}#{$radius}: 0.25rem;
-  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  #{$theme+$button+$hover+$color}: 255, 255, 255;
+  #{$theme+$button+$hover+$background}: 119, 119, 119;
+  #{$theme+$button+$hover+$border}: 0px solid #777777;
+  #{$theme+$button+$hover+$radius}: 0.25rem;
+  #{$theme+$button+$hover+$transition}: all 50ms ease-in-out;
   // active
-  #{$theme}#{$button}#{$active}#{$color}: #000000;
-  #{$theme}#{$button}#{$active}#{$background}: #777777;
-  #{$theme}#{$button}#{$active}#{$border}: 0px solid #777777;
-  #{$theme}#{$button}#{$active}#{$radius}: 0.25rem;
+  #{$theme+$button+$active+$color}: 0, 0, 0;
+  #{$theme+$button+$active+$background}: 119, 119, 119;
+  #{$theme+$button+$active+$border}: 0px solid #777777;
+  #{$theme+$button+$active+$radius}: 0.25rem;
 
   // header
-  #{$theme}#{$header}#{$color}: #ffffff;
-  #{$theme}#{$header}#{$font}#{$family}: Inter;
-  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
-  #{$theme}#{$header}#{$font}#{$weight}: 700;
-  #{$theme}#{$header}#{$padding}#{$vertical}: 0.5rem;
-  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.25rem;
+  #{$theme+$header+$color}: 255, 255, 255;
+  #{$theme+$header+$font+$family}: Inter;
+  #{$theme+$header+$font+$size}: 1.2rem;
+  #{$theme+$header+$font+$weight}: 700;
+  #{$theme+$header+$padding+$vertical}: 0.5rem;
+  #{$theme+$header+$padding+$horizontal}: 0.25rem;
 }
 
 .mobile {

package/dist/dependabot-16-ybT9-lhR.js

@@ -2,3 +2,4 @@ const a = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   a as default
 };
+//# sourceMappingURL=dependabot-16-ybT9-lhR.js.map

package/dist/dependabot-16-ybT9-lhR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependabot-16-ybT9-lhR.js","sources":["../src/core/icons/dependabot-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M5.75%207.5a.75.75%200%2001.75.75v1.5a.75.75%200%2001-1.5%200v-1.5a.75.75%200%2001.75-.75zm5.25.75a.75.75%200%2000-1.5%200v1.5a.75.75%200%20001.5%200v-1.5z'%20/%3e%3cpath%20fill-rule='evenodd'%20fill='%23ffffff'%20d='M6.25%200a.75.75%200%20000%201.5H7.5v2H3.75A2.25%202.25%200%20001.5%205.75V8H.75a.75.75%200%20000%201.5h.75v2.75a2.25%202.25%200%20002.25%202.25h8.5a2.25%202.25%200%20002.25-2.25V9.5h.75a.75.75%200%20000-1.5h-.75V5.75a2.25%202.25%200%2000-2.25-2.25H9V.75A.75.75%200%20008.25%200h-2zM3%205.75A.75.75%200%20013.75%205h8.5a.75.75%200%2001.75.75v6.5a.75.75%200%2001-.75.75h-8.5a.75.75%200%2001-.75-.75v-6.5z'%20/%3e%3c/svg%3e\""],"names":["dependabot16"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/desktop-download-16-1OhnJTN6.js

@@ -2,3 +2,4 @@ const a = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   a as default
 };
+//# sourceMappingURL=desktop-download-16-1OhnJTN6.js.map

package/dist/desktop-download-16-1OhnJTN6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-download-16-1OhnJTN6.js","sources":["../src/core/icons/desktop-download-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M4.927%205.427l2.896%202.896a.25.25%200%2000.354%200l2.896-2.896A.25.25%200%200010.896%205H8.75V.75a.75.75%200%2010-1.5%200V5H5.104a.25.25%200%2000-.177.427z'/%3e%3cpath%20d='M1.573%202.573a.25.25%200%2000-.073.177v7.5a.25.25%200%2000.25.25h12.5a.25.25%200%2000.25-.25v-7.5a.25.25%200%2000-.25-.25h-3a.75.75%200%20110-1.5h3A1.75%201.75%200%200116%202.75v7.5A1.75%201.75%200%200114.25%2012h-3.727c.099%201.041.52%201.872%201.292%202.757A.75.75%200%200111.25%2016h-6.5a.75.75%200%2001-.565-1.243c.772-.885%201.192-1.716%201.292-2.757H1.75A1.75%201.75%200%20010%2010.25v-7.5A1.75%201.75%200%20011.75%201h3a.75.75%200%20010%201.5h-3a.25.25%200%2000-.177.073zM6.982%2012a5.72%205.72%200%2001-.765%202.5h3.566a5.72%205.72%200%2001-.765-2.5H6.982z'/%3e%3c/svg%3e\""],"names":["desktopDownload16"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/device-camera-16-Bh1yGmqu.js

@@ -2,3 +2,4 @@ const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   e as default
 };
+//# sourceMappingURL=device-camera-16-Bh1yGmqu.js.map

package/dist/device-camera-16-Bh1yGmqu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-camera-16-Bh1yGmqu.js","sources":["../src/core/icons/device-camera-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill-rule='evenodd'%20fill='%23ffffff'%20d='M15%203H7c0-.55-.45-1-1-1H2c-.55%200-1%20.45-1%201-.55%200-1%20.45-1%201v9c0%20.55.45%201%201%201h14c.55%200%201-.45%201-1V4c0-.55-.45-1-1-1zM6%205H2V4h4v1zm4.5%207C8.56%2012%207%2010.44%207%208.5S8.56%205%2010.5%205%2014%206.56%2014%208.5%2012.44%2012%2010.5%2012zM13%208.5c0%201.38-1.13%202.5-2.5%202.5S8%209.87%208%208.5%209.13%206%2010.5%206%2013%207.13%2013%208.5z'%20/%3e%3c/svg%3e\""],"names":["deviceCamera16"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/device-camera-video-16-BmT22xsn.js

@@ -2,3 +2,4 @@ const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   e as default
 };
+//# sourceMappingURL=device-camera-video-16-BmT22xsn.js.map

package/dist/device-camera-video-16-BmT22xsn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-camera-video-16-BmT22xsn.js","sources":["../src/core/icons/device-camera-video-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill-rule='evenodd'%20fill='%23ffffff'%20d='M16%203.75a.75.75%200%2000-1.136-.643L11%205.425V4.75A1.75%201.75%200%20009.25%203h-7.5A1.75%201.75%200%20000%204.75v6.5C0%2012.216.784%2013%201.75%2013h7.5A1.75%201.75%200%200011%2011.25v-.675l3.864%202.318A.75.75%200%200016%2012.25v-8.5zm-5%205.075l3.5%202.1v-5.85l-3.5%202.1v1.65zM9.5%206.75v-2a.25.25%200%2000-.25-.25h-7.5a.25.25%200%2000-.25.25v6.5c0%20.138.112.25.25.25h7.5a.25.25%200%2000.25-.25v-4.5z'%20/%3e%3c/svg%3e\""],"names":["deviceCameraVideo16"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/device-desktop-16-m5wh49qs.js

@@ -2,3 +2,4 @@ const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   e as default
 };
+//# sourceMappingURL=device-desktop-16-m5wh49qs.js.map

package/dist/device-desktop-16-m5wh49qs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-desktop-16-m5wh49qs.js","sources":["../src/core/icons/device-desktop-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill-rule='evenodd'%20fill='%23ffffff'%20d='M1.75%202.5h12.5a.25.25%200%2001.25.25v7.5a.25.25%200%2001-.25.25H1.75a.25.25%200%2001-.25-.25v-7.5a.25.25%200%2001.25-.25zM14.25%201H1.75A1.75%201.75%200%20000%202.75v7.5C0%2011.216.784%2012%201.75%2012h3.727c-.1%201.041-.52%201.872-1.292%202.757A.75.75%200%20004.75%2016h6.5a.75.75%200%2000.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75%201.75%200%200016%2010.25v-7.5A1.75%201.75%200%200014.25%201zM9.018%2012H6.982a5.72%205.72%200%2001-.765%202.5h3.566a5.72%205.72%200%2001-.765-2.5z'%20/%3e%3c/svg%3e\""],"names":["deviceDesktop16"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/device-mobile-16-C1ZEWPwb.js

@@ -2,3 +2,4 @@ const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   e as default
 };
+//# sourceMappingURL=device-mobile-16-C1ZEWPwb.js.map

package/dist/device-mobile-16-C1ZEWPwb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-mobile-16-C1ZEWPwb.js","sources":["../src/core/icons/device-mobile-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill-rule='evenodd'%20fill='%23ffffff'%20d='M3.75%200A1.75%201.75%200%20002%201.75v12.5c0%20.966.784%201.75%201.75%201.75h8.5A1.75%201.75%200%200014%2014.25V1.75A1.75%201.75%200%200012.25%200h-8.5zM3.5%201.75a.25.25%200%2001.25-.25h8.5a.25.25%200%2001.25.25v12.5a.25.25%200%2001-.25.25h-8.5a.25.25%200%2001-.25-.25V1.75zM8%2013a1%201%200%20100-2%201%201%200%20000%202z'%20/%3e%3c/svg%3e\""],"names":["deviceMobile16"],"mappings":"AAAA,MAAeA,IAAA;"}

package/dist/diamond-16-D-w62P-X.js

@@ -2,3 +2,4 @@ const a = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20widt
 export {
   a as default
 };
+//# sourceMappingURL=diamond-16-D-w62P-X.js.map

package/dist/diamond-16-D-w62P-X.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diamond-16-D-w62P-X.js","sources":["../src/core/icons/diamond-16.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill-rule='evenodd'%20fill='%23ffffff'%20d='M.527%209.237a1.75%201.75%200%20010-2.474L6.777.512a1.75%201.75%200%20012.475%200l6.251%206.25a1.751%201.751%200%20010%202.475l-6.25%206.251a1.751%201.751%200%2001-2.475%200L.527%209.238v-.001zm1.06-1.414a.25.25%200%20000%20.354l6.251%206.25a.25.25%200%2000.354%200l6.25-6.25a.25.25%200%20000-.354l-6.25-6.25a.25.25%200%2000-.354%200l-6.25%206.25h-.001z'%20/%3e%3c/svg%3e\""],"names":["diamond16"],"mappings":"AAAA,MAAeA,IAAA;"}