@graupl/graupl 1.0.0-alpha.0 → 1.0.0-alpha.2

package/dist/state/focus/focus.css

@@ -1,9 +1,9 @@
 @layer graupl.state{
   *:focus-visible{
     border-color:transparent;
-    outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
+    outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
     outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
-    box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
+    box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
   }
 }
 

package/dist/state/focus/focus.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qSAAA;IACA,2JCUmB;IDTnB,onBCqBe;ECxBjB;AACF","file":"focus.css"}
+{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI;ECHF;IACE,wBAAA;IACA,qTAAA;IACA,2JCUmB;IDTnB,gpBCqBe;ECxBjB;AACF","file":"focus.css"}

package/dist/theme/theme.css

@@ -1,25 +1,69 @@
 @layer graupl.theme{
   :root{
-    background:var(--graupl-theme-active--light, var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%))));
-    color:var(--graupl-theme-active--dark, var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%))));
+    background:var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));
+    color:var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));
     font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
     font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
   }
   .dark-mode{
-    --graupl-theme-active--primary:var(--graupl-theme-dark--primary, var(--graupl-primary--300, hsl(219, 80%, 65%)));
-    --graupl-theme-active--primary--dark:var(--graupl-theme-dark--primary--dark, var(--graupl-primary--200, hsl(219, 90%, 80%)));
-    --graupl-theme-active--primary--light:var(--graupl-theme-dark--primary--light, var(--graupl-primary--400, hsl(219, 75%, 55%)));
-    --graupl-theme-active--secondary:var(--graupl-theme-dark--secondary, var(--graupl-secondary--300, hsl(340, 65%, 65%)));
-    --graupl-theme-active--light:var(--graupl-theme-dark--light, var(--graupl-primary--900, hsl(219, 100%, 10%)));
-    --graupl-theme-active--dark:var(--graupl-theme-dark--dark, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+    --graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+    --graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));
+    --graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));
+    --graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));
+    --graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
+    --graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));
+    --graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));
+    --graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));
+    --graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+    --graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
+    --graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
+    --graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
+    --graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
+    --graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
+    --graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
+    --graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
+    --graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
+    --graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
+    --graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
+    --graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
+    --graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
+    --graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
+    --graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
+    --graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
+    --graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
+    --graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
+    --graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
+    color-scheme:dark;
   }
   .light-mode{
-    --graupl-theme-active--primary:var(--graupl-theme-light--primary, var(--graupl-primary--700, hsl(219, 80%, 35%)));
-    --graupl-theme-active--primary--dark:var(--graupl-theme-light--primary--dark, var(--graupl-primary--800, hsl(219, 90%, 20%)));
-    --graupl-theme-active--primary--light:var(--graupl-theme-light--primary--light, var(--graupl-primary--600, hsl(219, 75%, 45%)));
-    --graupl-theme-active--secondary:var(--graupl-theme-light--secondary, var(--graupl-secondary--700, hsl(340, 65%, 35%)));
-    --graupl-theme-active--light:var(--graupl-theme-light--light, var(--graupl-primary--100, hsl(219, 100%, 95%)));
-    --graupl-theme-active--dark:var(--graupl-theme-light--dark, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+    --graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));
+    --graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));
+    --graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));
+    --graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));
+    --graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
+    --graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));
+    --graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));
+    --graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));
+    --graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));
+    --graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
+    --graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
+    --graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
+    --graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
+    --graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
+    --graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
+    --graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
+    --graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
+    --graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
+    --graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
+    --graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
+    --graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
+    --graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
+    --graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
+    --graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
+    --graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
+    --graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
+    --graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
+    color-scheme:light;
   }
 }
 

package/dist/theme/theme.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,+HCoJkB;IDnJlB,wHC+JiB;ID9JjB,wICoKU;IDnKV,0ECoKQ;ECzKV;EFSA;IACE,gHAAA;IACA,4HAAA;IACA,8HAAA;IACA,sHAAA;IACA,6GAAA;IACA,2GAAA;EEPF;EFWA;IACE,iHAAA;IACA,6HAAA;IACA,+HAAA;IACA,uHAAA;IACA,8GAAA;IACA,4GAAA;EETF;AACF","file":"theme.css"}
+{"version":3,"sources":["../../scss/mixins/_layer.scss","../../scss/theme/_index.scss","../../scss/theme/_variables.scss","theme.css"],"names":[],"mappings":"AASI;ECDF;IACE,6ICkMyB;IDjMzB,wICiOyB;IDhOzB,wIC0cU;IDzcV,0EC0cQ;EC/cV;EFSA;IAEE,2HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,0HAAA;IACA,2HAAA;IAGA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IACA,gIAAA;IAGA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IACA,6HAAA;IAEA,iBAAA;EEbF;EFiBA;IAEE,4HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,2HAAA;IACA,4HAAA;IAGA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IACA,iIAAA;IAGA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IACA,8HAAA;IAEA,kBAAA;EErBF;AACF","file":"theme.css"}

package/docs/.vitepress/theme/custom.scss

@@ -1,35 +1,35 @@
 @use "../../../scss/theme/variables" as theme;
 
 :root {
-  --vp-c-brand: #{theme.$theme-light--primary--dark};
-  --vp-c-brand-1: #{theme.$theme-light--primary--dark};
-  --vp-c-brand-2: #{theme.$theme-light--primary--dark};
-  --vp-c-brand-3: #{theme.$theme-light--primary--dark};
-  --vp-c-bg: #{theme.$theme-light--light};
-  --vp-c-bg-alt: #{theme.$theme-light--light};
-  --vp-c-bg-elv: #{theme.$theme-light--light};
-  --vp-c-bg-soft: #{theme.$theme-light--light};
-  --vp-c-border: #{theme.$theme-light--secondary--dark};
-  --vp-c-divider: #{theme.$theme-light--secondary--dark};
-  --vp-c-gutter: #{theme.$theme-light--secondary--dark};
-  --vp-c-text-1: #{theme.$theme-light--dark};
-  --vp-c-text-2: #{theme.$theme-light--dark};
-  --vp-c-text-3: #{theme.$theme-light--dark};
+  --vp-c-brand: #{theme.$theme-light--primary--700};
+  --vp-c-brand-1: #{theme.$theme-light--primary--700};
+  --vp-c-brand-2: #{theme.$theme-light--primary--700};
+  --vp-c-brand-3: #{theme.$theme-light--primary--700};
+  --vp-c-bg: #{theme.$theme-light--primary--100};
+  --vp-c-bg-alt: #{theme.$theme-light--primary--100};
+  --vp-c-bg-elv: #{theme.$theme-light--primary--100};
+  --vp-c-bg-soft: #{theme.$theme-light--primary--100};
+  --vp-c-border: #{theme.$theme-light--tertiary--700};
+  --vp-c-divider: #{theme.$theme-light--secondary--700};
+  --vp-c-gutter: #{theme.$theme-light--secondary--700};
+  --vp-c-text-1: #{theme.$theme-light--primary--900};
+  --vp-c-text-2: #{theme.$theme-light--primary--900};
+  --vp-c-text-3: #{theme.$theme-light--primary--900};
 }
 
 .dark {
-  --vp-c-brand: #{theme.$theme-light--primary--light};
-  --vp-c-brand-1: #{theme.$theme-light--primary--light};
-  --vp-c-brand-2: #{theme.$theme-light--primary--light};
-  --vp-c-brand-3: #{theme.$theme-light--primary--light};
-  --vp-c-bg: #{theme.$theme-light--dark};
-  --vp-c-bg-alt: #{theme.$theme-light--dark};
-  --vp-c-bg-elv: #{theme.$theme-light--dark};
-  --vp-c-bg-soft: #{theme.$theme-light--dark};
-  --vp-c-border: #{theme.$theme-light--secondary--light};
-  --vp-c-divider: #{theme.$theme-light--secondary--light};
-  --vp-c-gutter: #{theme.$theme-light--secondary--light};
-  --vp-c-text-1: #{theme.$theme-light--light};
-  --vp-c-text-2: #{theme.$theme-light--light};
-  --vp-c-text-3: #{theme.$theme-light--light};
+  --vp-c-brand: #{theme.$theme-light--primary--300};
+  --vp-c-brand-1: #{theme.$theme-light--primary--300};
+  --vp-c-brand-2: #{theme.$theme-light--primary--300};
+  --vp-c-brand-3: #{theme.$theme-light--primary--300};
+  --vp-c-bg: #{theme.$theme-light--primary--900};
+  --vp-c-bg-alt: #{theme.$theme-light--primary--900};
+  --vp-c-bg-elv: #{theme.$theme-light--primary--900};
+  --vp-c-bg-soft: #{theme.$theme-light--primary--900};
+  --vp-c-border: #{theme.$theme-light--tertiary--300};
+  --vp-c-divider: #{theme.$theme-light--secondary--300};
+  --vp-c-gutter: #{theme.$theme-light--secondary--300};
+  --vp-c-text-1: #{theme.$theme-light--primary--100};
+  --vp-c-text-2: #{theme.$theme-light--primary--100};
+  --vp-c-text-3: #{theme.$theme-light--primary--100};
 }

package/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="light-mode">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,14 +16,91 @@
     <h1>Hello Graupl!</h1>
     <p>Graupl is a modular CSS framework with the goal of making it easy to theme a site.</p>
     <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
-    <p>Graupl support light and dark modes out-of-the-box.</p>
+    <p>Graupl supports light and dark modes out-of-the-box.</p>
     <h2>Buttons</h2>
-    <p>There are 3 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
-    <div class="columns">
-      <button class="button">Button</button>
+    <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.</p>
+    <div class="columns columns-4">
+      <button class="button">Default Button</button>
       <button class="button primary">Primary Button</button>
       <button class="button secondary">Secondary Button</button>
+      <button class="button tertiary">Tertiary Button</button>
     </div>
+    <h2>Form elements</h2>
+    <p>Graupl provides default styling for all form elements.</p>
+    <label for="input">Input</label>
+    <input type="text" placeholder="Input" id="input">
+    <label for="input-readonly">Readonly Input</label>
+    <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input"readonly>
+    <label for="input-disabled">Disabled Input</label>
+    <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
+    <label for="textarea">Textarea</label>
+    <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
+    <label for="textarea-readonly">Readonly Textarea</label>
+    <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly" readonly>Readonly Textarea</textarea>
+    <label for="textarea-disabled">Disabled Textarea</label>
+    <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
+    <label for="select">Select</label>
+    <select id="select">
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <optgroup label="Group 1">
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+        <option value="5">Option 5</option>
+      </optgroup>
+    </select>
+    <label for="select-disabled">Disabled Select</label>
+    <select id="select-disabled" disabled>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <optgroup label="Group 1">
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+        <option value="5">Option 5</option>
+      </optgroup>
+    </select>
+    <label for"multi-select">Multi-select</label>
+    <select id="multi-select" multiple>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <optgroup label="Group 1">
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+        <option value="5">Option 5</option>
+      </optgroup>
+    </select>
+    <label for="multi-select-disabled">Disabled Multi-select</label>
+    <select id="multi-select-disabled" multiple disabled>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <optgroup label="Group 1">
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+        <option value="5">Option 5</option>
+      </optgroup>
+    </select>
+    <fieldset>
+      <legend>Checkboxes</legend>
+      <label for="checkbox">
+      <input type="checkbox" id="checkbox"> Checkbox</label>
+      <label for="checkbox-checked">
+      <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
+      <label for="checkbox-disabled">
+      <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
+    </fieldset>
+    <fieldset>
+      <legend>Radio Buttons</legend>
+      <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
+      <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
+      <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled Radio</label>
+    </fieldset>
+    <fieldset disabled>
+      <legend>Disabled Fieldset</legend>
+      <label for="disabled-fieldset-checkbox">
+      <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
+    </fieldset>
+    <label for="range">Range</label>
+    <input type="range" class="range" id="range">
   </main>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "scripts": {

package/scss/base/_index.scss

@@ -1,3 +1,4 @@
 // Graupl base.
 
+@forward "form";
 @forward "link";

package/scss/base/form/_defaults.scss

@@ -0,0 +1,9 @@
+// Default values for Graupl.
+//
+// Generally, these should not be used directly when styling components.
+// They are mainly used to provide default fallbacks for custom properties
+// which can be found in the `variables.scss` file.
+
+@forward "../../defaults";
+
+$fieldset-direction: column !default;

package/scss/base/form/_index.scss

@@ -0,0 +1,90 @@
+// Graupl form base styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+
+@include layer(base) {
+  input,
+  textarea,
+  select {
+    padding: $input-padding;
+    border-width: $input-border-width;
+    border-style: $input-border-style;
+    border-radius: $input-border-radius;
+    font-size: $input-font-size;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  label {
+    font-size: $label-font-size;
+  }
+
+  fieldset {
+    display: flex;
+    flex-flow: $fieldset-direction wrap;
+    gap: $fieldset-gap;
+    padding: $fieldset-padding;
+    border-width: $fieldset-border-width;
+    border-style: $fieldset-border-style;
+    border-radius: $fieldset-border-radius;
+    font-size: $fieldset-font-size;
+
+    &:disabled {
+      input,
+      textarea,
+      select {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+@include layer(theme) {
+  input,
+  textarea,
+  select {
+    border-color: $input-border-color;
+    background: $input-background;
+    color: $input-color;
+    accent-color: $input-accent-color;
+
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    &:disabled {
+      border-color: $input-disabled-border-color;
+      color: $input-disabled-color;
+
+      &::placeholder {
+        color: $input-disabled-placeholder-color;
+      }
+    }
+  }
+
+  label {
+    color: $label-color;
+
+    &:has(+ input:disabled, + textarea:disabled, + select:disabled) {
+      color: $label-disabled-color;
+    }
+  }
+
+  fieldset {
+    border-color: $fieldset-border-color;
+    background: $fieldset-background;
+    color: $fieldset-color;
+
+    &:disabled {
+      border-color: $fieldset-disabled-border-color;
+      color: $fieldset-disabled-color;
+
+      label {
+        color: $label-disabled-color;
+      }
+    }
+  }
+}

package/scss/base/form/_variables.scss

@@ -0,0 +1,133 @@
+// Variables referencing custom properties.
+
+@use "../../variables" as base;
+@use "../../theme/variables" as theme;
+@use "defaults";
+@use "sass:map";
+
+$input-padding-x: var(--#{defaults.$prefix}-input-padding-x, #{base.$gap});
+$input-padding-y: var(
+  --#{defaults.$prefix}-input-padding-y,
+  calc(#{base.$gap} / 2)
+);
+$input-padding: var(
+  --#{defaults.$prefix}-input-padding,
+  #{$input-padding-y} #{$input-padding-x}
+);
+$input-font-size: var(
+  --#{defaults.$prefix}-input-font-size,
+  #{map.get(base.$font-size, default)}
+);
+$label-font-size: var(
+  --#{defaults.$prefix}-label-font-size,
+  #{$input-font-size}
+);
+$fieldset-direction: var(
+  --#{defaults.$prefix}-fieldset-direction,
+  #{defaults.$fieldset-direction}
+);
+$fieldset-gap: var(--#{defaults.$prefix}-fieldset-gap, calc(#{base.$gap} / 4));
+$fieldset-padding-x: var(
+  --#{defaults.$prefix}-fieldset-padding-x,
+  #{$input-padding-x}
+);
+$fieldset-padding-y: var(
+  --#{defaults.$prefix}-fieldset-padding-y,
+  #{$input-padding-y}
+);
+$fieldset-padding: var(
+  --#{defaults.$prefix}-fieldset-padding,
+  #{$fieldset-padding-y} #{$fieldset-padding-x}
+);
+$fieldset-font-size: var(
+  --#{defaults.$prefix}-fieldset-font-size,
+  #{$input-font-size}
+);
+
+// Background properties.
+$input-background: var(
+  --#{defaults.$prefix}-input-background,
+  #{theme.$theme-active--primary--100}
+);
+$fieldset-background: var(
+  --#{defaults.$prefix}-fieldset-background,
+  #{$input-background}
+);
+
+// Text properties.
+$input-color: var(
+  --#{defaults.$prefix}-input-color,
+  #{theme.$theme-active--primary--900}
+);
+$input-placeholder-color: var(
+  --#{defaults.$prefix}-input-placeholder-color,
+  #{theme.$theme-active--secondary--600}
+);
+$label-color: var(--#{defaults.$prefix}-label-color, #{$input-color});
+$fieldset-color: var(--#{defaults.$prefix}-fieldset-color, #{$input-color});
+$input-disabled-color: var(
+  --#{defaults.$prefix}-input-disabled-color,
+  #{theme.$theme-active--secondary--400}
+);
+$input-disabled-placeholder-color: var(
+  --#{defaults.$prefix}-input-disabled-placeholder-color,
+  #{$input-disabled-color}
+);
+$label-disabled-color: var(
+  --#{defaults.$prefix}-label-disabled-color,
+  #{$input-disabled-color}
+);
+$fieldset-disabled-color: var(
+  --#{defaults.$prefix}-fieldset-disabled-color,
+  #{$input-disabled-color}
+);
+
+// Border properties.
+$input-border-width: var(
+  --#{defaults.$prefix}-input-border-width,
+  #{base.$border-width}
+);
+$input-border-style: var(
+  --#{defaults.$prefix}-botton-border-style,
+  #{base.$border-style}
+);
+$input-border-radius: var(
+  --#{defaults.$prefix}-input-border-radius,
+  #{base.$border-radius}
+);
+$fieldset-border-width: var(
+  --#{defaults.$prefix}-fieldset-border-width,
+  #{$input-border-width}
+);
+$fieldset-border-style: var(
+  --#{defaults.$prefix}-fieldset-border-style,
+  #{$input-border-style}
+);
+$fieldset-border-radius: var(
+  --#{defaults.$prefix}-fieldset-border-radius,
+  #{$input-border-radius}
+);
+
+// Border colour properties.
+$input-border-color: var(
+  --#{defaults.$prefix}-input-border-color,
+  #{theme.$theme-active--secondary--700}
+);
+$input-disabled-border-color: var(
+  --#{defaults.$prefix}-input-disabled-border-color,
+  #{theme.$theme-active--secondary--200}
+);
+$fieldset-border-color: var(
+  --#{defaults.$prefix}-fieldset-border-color,
+  #{$input-border-color}
+);
+$fieldset-disabled-border-color: var(
+  --#{defaults.$prefix}-fieldset-disabled-border-color,
+  #{$input-disabled-border-color}
+);
+
+// Accent color properties.
+$input-accent-color: var(
+  --#{defaults.$prefix}-input-accent-color,
+  #{theme.$theme-active--primary--700}
+);

package/scss/base/form/form.scss

@@ -0,0 +1,3 @@
+// Graupl form base styles.
+
+@forward "index";

package/scss/base/link/_variables.scss

@@ -15,17 +15,17 @@ $link-text-decoration-thickness: var(
 );
 $link-color: var(
   --#{defaults.$prefix}-link-color,
-  #{theme.$theme-active--primary}
+  #{theme.$theme-active--primary--700}
 );
 $link-hover-color: var(
   --#{defaults.$prefix}-link-hover-color,
-  #{theme.$theme-active--secondary}
+  #{theme.$theme-active--tertiary--700}
 );
 $link-active-color: var(
   --#{defaults.$prefix}-link-active-color,
-  #{theme.$theme-active--secondary}
+  #{theme.$theme-active--tertiary--700}
 );
 $link-visited-color: var(
   --#{defaults.$prefix}-link-visited-color,
-  #{theme.$theme-active--primary}
+  #{theme.$theme-active--primary--700}
 );

package/scss/component/button/_index.scss

@@ -49,19 +49,27 @@
     }
 
     &.primary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--primary};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--primary};
+      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--primary--700};
+      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--primary--700};
+      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--primary--700};
+      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--primary--700};
+      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--primary--700};
     }
 
     &.secondary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary};
+      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--secondary--700};
+      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--secondary--700};
+      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--secondary--700};
+      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--secondary--700};
+      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--secondary--700};
+    }
+
+    &.tertiary {
+      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--tertiary--700};
+      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--tertiary--700};
+      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--tertiary--700};
+      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--tertiary--700};
+      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--tertiary--700};
     }
   }
 }

package/scss/component/button/_variables.scss

@@ -48,29 +48,29 @@ $button-active-transform: var(
 // Background properties.
 $button-background: var(
   --#{defaults.$prefix}-button-background,
-  #{theme.$theme-active--light}
+  #{theme.$theme-active--primary--100}
 );
 $button-hover-background: var(
   --#{defaults.$prefix}-button-hover-background,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--primary--900}
 );
 $button-active-background: var(
   --#{defaults.$prefix}-button-active-background,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--primary--900}
 );
 
 // Text properties.
 $button-color: var(
   --#{defaults.$prefix}-button-color,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--primary--900}
 );
 $button-hover-color: var(
   --#{defaults.$prefix}-button-hover-color,
-  #{theme.$theme-active--light}
+  #{theme.$theme-active--primary--100}
 );
 $button-active-color: var(
   --#{defaults.$prefix}-button-active-color,
-  #{theme.$theme-active--light}
+  #{theme.$theme-active--primary--100}
 );
 
 // Border properties.
@@ -90,13 +90,13 @@ $button-border-radius: var(
 // Border colour properties.
 $button-border-color: var(
   --#{defaults.$prefix}-button-border-color,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--primary--900}
 );
 $button-hover-border-color: var(
   --#{defaults.$prefix}-button-hover-border-color,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--primary--900}
 );
 $button-active-border-color: var(
   --#{defaults.$prefix}-button-active-border-color,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--primary--900}
 );