@graupl/graupl 1.0.0-alpha.1 → 1.0.0-alpha.3

package/docs/.vitepress/config.js

@@ -1,11 +1,51 @@
 import { defineConfig } from "vitepress";
 
+// Get the current version from the package.json file.
+import { version } from "../../package.json";
+
 export default defineConfig({
   lang: "en-US",
   title: "Graupl",
   description: "A modular and modern CSS framework.",
   base: "/graupl/",
   themeConfig: {
-    socialLinks: [{ icon: "github", url: "https://github.com/Graupl/graupl" }],
+    nav: [
+      {
+        text: "Docs",
+        link: "/introduction",
+      },
+      {
+        text: version,
+        items: [
+          {
+            text: "Current release",
+            link: `https://github.com/Graupl/graupl/releases/tag/v${version}`,
+          },
+          {
+            text: "Changelog",
+            link: "https://github.com/Graupl/graupl/blob/1.x/CHANGELOG.md",
+          },
+          {
+            text: "Contributing",
+            link: "https://github.com/Graupl/graupl/blob/1.x/.github/CONTRIBUTING.md",
+          },
+        ],
+      },
+    ],
+
+    socialLinks: [{ icon: "github", link: "https://github.com/Graupl/graupl" }],
+
+    sidebar: {
+      "/": [
+        {
+          text: "Getting Started",
+          items: [{ text: "Introduction", link: "/introduction" }],
+        },
+        {
+          text: "Advenced Topics",
+          items: [{ text: "Compiling Graupl", link: "/compiling-graupl" }],
+        },
+      ],
+    },
   },
 });

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

@@ -1,35 +1,35 @@
-@use "../../../scss/theme/variables" as theme;
+@use "../../../scss/functions/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.get(primary, 700)};
+  --vp-c-brand-1: #{theme.get(primary, 700)};
+  --vp-c-brand-2: #{theme.get(primary, 700)};
+  --vp-c-brand-3: #{theme.get(primary, 700)};
+  --vp-c-bg: #{theme.get(primary, 100)};
+  --vp-c-bg-alt: #{theme.get(primary, 100)};
+  --vp-c-bg-elv: #{theme.get(primary, 100)};
+  --vp-c-bg-soft: #{theme.get(primary, 100)};
+  --vp-c-border: #{theme.get(tertiary, 700)};
+  --vp-c-divider: #{theme.get(secondary, 700)};
+  --vp-c-gutter: #{theme.get(secondary, 700)};
+  --vp-c-text-1: #{theme.get(primary, 900)};
+  --vp-c-text-2: #{theme.get(primary, 900)};
+  --vp-c-text-3: #{theme.get(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.get(primary, 300)};
+  --vp-c-brand-1: #{theme.get(primary, 300)};
+  --vp-c-brand-2: #{theme.get(primary, 300)};
+  --vp-c-brand-3: #{theme.get(primary, 300)};
+  --vp-c-bg: #{theme.get(primary, 900)};
+  --vp-c-bg-alt: #{theme.get(primary, 900)};
+  --vp-c-bg-elv: #{theme.get(primary, 900)};
+  --vp-c-bg-soft: #{theme.get(primary, 900)};
+  --vp-c-border: #{theme.get(tertiary, 300)};
+  --vp-c-divider: #{theme.get(secondary, 300)};
+  --vp-c-gutter: #{theme.get(secondary, 300)};
+  --vp-c-text-1: #{theme.get(primary, 100)};
+  --vp-c-text-2: #{theme.get(primary, 100)};
+  --vp-c-text-3: #{theme.get(primary, 100)};
 }

package/docs/compiling-graupl.md

@@ -0,0 +1,56 @@
+# Compiling your own version of Graupl
+
+If you want to compile your own version of Graupl, you can! Here's how:
+
+```scss
+// Import Graupl.
+@forward '@graupl/graupl';
+
+// Import your own theme...
+```
+
+## Overriding Graupl's default variables
+
+Graupl's sass variables are all declared with `!default` flag. This means you can override them in your own theme file.
+
+```scss
+// Import the file containing the variables you want to override.
+@forward '@graupl/graupl/defaults' with (
+  $prefix: 'custom',
+);
+
+// Import Graupl.
+@forward '@graupl/graupl';
+
+// Import your own theme...
+```
+
+## Adding new theme colours
+
+You can add new colours to Graupl by adding to the `$custom-colours` map.
+
+```scss
+// Import the theme's defaults.
+@forward "@graupl/graupl/theme/defaults" with (
+  $custom-colors: (
+    custom: (
+      100: #f0f0f0,
+      200: #e0e0e0,
+      300: #d0d0d0,
+      400: #c0c0c0,
+      500: #b0b0b0,
+      600: #a0a0a0,
+      700: #909090,
+      800: #808080,
+      900: #707070,
+    ),
+  ),
+);
+
+// Import Graupl.
+@forward '@graupl/graupl';
+
+// Import your own theme...
+```
+
+These colours will have new classes generated for them, e.g. `background-custom-100`, `color-custom-100`, etc. as well as component variants, e.g. `button custom`, and full dark-mode support.

package/docs/introduction.md

@@ -0,0 +1,5 @@
+# Introduction
+
+Graupl is a collection of Sass utilities and components that can be used to build a website or web application. It is designed to be flexible and customizable, so you can use as much or as little of it as you need.
+
+We need a lot more documentation, so sit tight!

package/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light-mode">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -19,11 +19,15 @@
     <p>Graupl supports light and dark modes out-of-the-box.</p>
     <h2>Buttons</h2>
     <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">
+    <div class="columns count-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>
+      <button class="button" disabled>Default Button</button>
+      <button class="button primary" disabled>Primary Button</button>
+      <button class="button secondary" disabled>Secondary Button</button>
+      <button class="button tertiary" disabled>Tertiary Button</button>
     </div>
     <h2>Form elements</h2>
     <p>Graupl provides default styling for all form elements.</p>
@@ -94,6 +98,11 @@
       <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>

package/package.json

@@ -1,8 +1,34 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "A modular and modern CSS framework.",
   "type": "module",
+  "exports": {
+    ".": {
+      "sass": "./scss"
+    },
+    "./base": {
+      "sass": "./scss/base"
+    },
+    "./components": {
+      "sass": "./scss/component"
+    },
+    "./layout": {
+      "sass": "./scss/layout"
+    },
+    "./mixins": {
+      "sass": "./scss/mixins"
+    },
+    "./state": {
+      "sass": "./scss/state"
+    },
+    "./theme": {
+      "sass": "./scss/theme"
+    },
+    "./utilities": {
+      "sass": "./scss/utilities"
+    }
+  },
   "scripts": {
     "prepare": "husky install",
     "commit": "git cz",

package/postcss.config.cjs

@@ -4,7 +4,7 @@ const config = {
     require("autoprefixer"),
     // @todo: add cssnano when ready
     // Waiting on upstream issue for postcss-calc: https://github.com/postcss/postcss-calc/issues/77
-    // require("cssnano"),
+    require("cssnano"),
     require("postcss-discard-comments"),
   ],
 };

package/scss/_defaults.scss

@@ -7,6 +7,9 @@
 // Prefix for custom properties and other naming conventions.
 $prefix: "graupl" !default;
 
+// Settings.
+$use-important: true !default;
+
 // Layout properties.
 $content-max-width: 96ch !default;
 

package/scss/_index.scss

@@ -0,0 +1,14 @@
+// Graupl Components.
+//
+// Forwards all components for easy development.
+
+// Forward the layer initialization.
+@forward "init";
+
+// Forward all layers.
+@forward "base";
+@forward "layout";
+@forward "component";
+@forward "state";
+@forward "theme";
+@forward "utilities";

package/scss/_init.scss

@@ -0,0 +1,3 @@
+// Graupl layer initialization.
+
+@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;

package/scss/base/form/_index.scss

@@ -31,6 +31,14 @@
     border-style: $fieldset-border-style;
     border-radius: $fieldset-border-radius;
     font-size: $fieldset-font-size;
+
+    &:disabled {
+      input,
+      textarea,
+      select {
+        cursor: not-allowed;
+      }
+    }
   }
 }
 
@@ -73,6 +81,10 @@
     &:disabled {
       border-color: $fieldset-disabled-border-color;
       color: $fieldset-disabled-color;
+
+      label {
+        color: $label-disabled-color;
+      }
     }
   }
 }

package/scss/base/form/_variables.scss

@@ -1,9 +1,9 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
 @use "sass:map";
+@use "../../functions/theme";
 
 $input-padding-x: var(--#{defaults.$prefix}-input-padding-x, #{base.$gap});
 $input-padding-y: var(
@@ -47,7 +47,7 @@ $fieldset-font-size: var(
 // Background properties.
 $input-background: var(
   --#{defaults.$prefix}-input-background,
-  #{theme.$theme-active--light}
+  #{theme.get(primary, 100)}
 );
 $fieldset-background: var(
   --#{defaults.$prefix}-fieldset-background,
@@ -57,17 +57,17 @@ $fieldset-background: var(
 // Text properties.
 $input-color: var(
   --#{defaults.$prefix}-input-color,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
 );
 $input-placeholder-color: var(
   --#{defaults.$prefix}-input-placeholder-color,
-  #{theme.$theme-active--secondary--light}
+  #{theme.get(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--light}
+  #{theme.get(secondary, 400)}
 );
 $input-disabled-placeholder-color: var(
   --#{defaults.$prefix}-input-disabled-placeholder-color,
@@ -111,11 +111,11 @@ $fieldset-border-radius: var(
 // Border colour properties.
 $input-border-color: var(
   --#{defaults.$prefix}-input-border-color,
-  #{theme.$theme-active--secondary}
+  #{theme.get(secondary, 700)}
 );
 $input-disabled-border-color: var(
   --#{defaults.$prefix}-input-disabled-border-color,
-  #{theme.$theme-active--shade--light}
+  #{theme.get(secondary, 200)}
 );
 $fieldset-border-color: var(
   --#{defaults.$prefix}-fieldset-border-color,
@@ -129,5 +129,5 @@ $fieldset-disabled-border-color: var(
 // Accent color properties.
 $input-accent-color: var(
   --#{defaults.$prefix}-input-accent-color,
-  #{theme.$theme-active--primary}
+  #{theme.get(primary, 700)}
 );

package/scss/base/link/_variables.scss

@@ -1,8 +1,8 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
+@use "../../functions/theme";
 
 // Link properties.
 $link-text-decoration: var(
@@ -13,19 +13,16 @@ $link-text-decoration-thickness: var(
   --#{defaults.$prefix}-link-text-decoration-thickness,
   #{base.$border-width}
 );
-$link-color: var(
-  --#{defaults.$prefix}-link-color,
-  #{theme.$theme-active--primary}
-);
+$link-color: var(--#{defaults.$prefix}-link-color, #{theme.get(primary, 700)});
 $link-hover-color: var(
   --#{defaults.$prefix}-link-hover-color,
-  #{theme.$theme-active--tertiary}
+  #{theme.get(tertiary, 700)}
 );
 $link-active-color: var(
   --#{defaults.$prefix}-link-active-color,
-  #{theme.$theme-active--tertiary}
+  #{theme.get(tertiary, 700)}
 );
 $link-visited-color: var(
   --#{defaults.$prefix}-link-visited-color,
-  #{theme.$theme-active--primary}
+  #{theme.get(primary, 700)}
 );

package/scss/component/button/_defaults.scss

@@ -7,4 +7,6 @@
 @forward "../../defaults";
 
 $button-hover-transform: none !default;
+$button-hover-transform-reduced-motion: none !default;
 $button-active-transform: scale(0.95) !default;
+$button-active-transform-reduced-motion: scale(0.98) !default;

package/scss/component/button/_index.scss

@@ -4,6 +4,8 @@
 @use "../../theme/variables" as theme;
 @use "variables" as *;
 @use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+@use "sass:map";
 
 @include layer(component) {
   .button {
@@ -27,6 +29,29 @@
     &:active {
       transform: $button-active-transform;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      &:hover,
+      &:active {
+        transform: none;
+      }
+    }
+  }
+
+  @include animation-off {
+    .button {
+      transition: $button-transition-reduced-motion;
+
+      &:hover {
+        transform: $button-hover-transform-reduced-motion;
+      }
+
+      &:active {
+        transform: $button-active-transform-reduced-motion;
+      }
+    }
   }
 }
 
@@ -48,28 +73,31 @@
       color: $button-active-color;
     }
 
-    &.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};
-    }
+    &:disabled {
+      border-color: $button-disabled-border-color;
+      background: $button-disabled-background;
+      color: $button-disabled-color;
 
-    &.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};
+      &:hover,
+      &:active {
+        border-color: $button-disabled-border-color;
+        background: $button-disabled-background;
+        color: $button-disabled-color;
+      }
     }
 
-    &.tertiary {
-      --#{defaults.$prefix}-button-hover-background: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-active-background: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-border-color: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-hover-border-color: #{theme.$theme-active--tertiary};
-      --#{defaults.$prefix}-button-active-border-color: #{theme.$theme-active--tertiary};
+    @each $color, $map in theme.$theme-active {
+      &.#{$color} {
+        --#{defaults.$prefix}-button-hover-background: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-active-background: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-border-color: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-hover-border-color: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-active-border-color: #{map.get($map, 700)};
+        --#{defaults.$prefix}-button-disabled-border-color: #{map.get(
+            $map,
+            200
+          )};
+      }
     }
   }
 }

package/scss/component/button/_variables.scss

@@ -1,9 +1,9 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
 @use "sass:map";
+@use "../../functions/theme";
 
 // Button properties.
 $button-min-width: var(
@@ -34,6 +34,12 @@ $button-transition: var(
   border-color #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
   transform #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function}
 );
+$button-transition-reduced-motion: var(
+  --#{defaults.$prefix}-button-transition-reduced-motion,
+  background #{map.get(base.$transition-duration, none)} #{base.$transition-timing-function},
+  color #{map.get(base.$transition-duration, none)} #{base.$transition-timing-function},
+  border-color #{map.get(base.$transition-duration, none)} #{base.$transition-timing-function}
+);
 
 // Transform properties.
 $button-hover-transform: var(
@@ -44,33 +50,49 @@ $button-active-transform: var(
   --#{defaults.$prefix}-button-active-transform,
   #{defaults.$button-active-transform}
 );
+$button-hover-transform-reduced-motion: var(
+  --#{defaults.$prefix}-button-hover-transform-reduced-motion,
+  #{defaults.$button-hover-transform-reduced-motion}
+);
+$button-active-transform-reduced-motion: var(
+  --#{defaults.$prefix}-button-active-transform-reduced-motion,
+  #{defaults.$button-active-transform-reduced-motion}
+);
 
 // Background properties.
 $button-background: var(
   --#{defaults.$prefix}-button-background,
-  #{theme.$theme-active--light}
+  #{theme.get(primary, 100)}
 );
 $button-hover-background: var(
   --#{defaults.$prefix}-button-hover-background,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
 );
 $button-active-background: var(
   --#{defaults.$prefix}-button-active-background,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
+);
+$button-disabled-background: var(
+  --#{defaults.$prefix}-button-disabled-background,
+  #{theme.get(primary, 100)}
 );
 
 // Text properties.
 $button-color: var(
   --#{defaults.$prefix}-button-color,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
 );
 $button-hover-color: var(
   --#{defaults.$prefix}-button-hover-color,
-  #{theme.$theme-active--light}
+  #{theme.get(primary, 100)}
 );
 $button-active-color: var(
   --#{defaults.$prefix}-button-active-color,
-  #{theme.$theme-active--light}
+  #{theme.get(primary, 100)}
+);
+$button-disabled-color: var(
+  --#{defaults.$prefix}-button-disabled-color,
+  #{theme.get(primary, 200)}
 );
 
 // Border properties.
@@ -90,13 +112,17 @@ $button-border-radius: var(
 // Border colour properties.
 $button-border-color: var(
   --#{defaults.$prefix}-button-border-color,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
 );
 $button-hover-border-color: var(
   --#{defaults.$prefix}-button-hover-border-color,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
 );
 $button-active-border-color: var(
   --#{defaults.$prefix}-button-active-border-color,
-  #{theme.$theme-active--dark}
+  #{theme.get(primary, 900)}
+);
+$button-disabled-border-color: var(
+  --#{defaults.$prefix}-button-disabled-border-color,
+  #{theme.get(primary, 200)}
 );

package/scss/functions/_important.scss

@@ -0,0 +1,11 @@
+// A function to determine if the !important flag should be added to a property.
+
+@use "../defaults";
+
+@function insert($value) {
+  @if defaults.$use-important {
+    @return #{$value !important};
+  }
+
+  @return #{$value};
+}

package/scss/functions/_theme.scss

@@ -0,0 +1,11 @@
+// A function to get the specific theme shades.
+
+@use "sass:map";
+@use "../theme/variables" as theme;
+
+@function get($color, $shade) {
+  $color-map: map.get(theme.$theme-active, $color);
+  $value: map.get($color-map, $shade);
+
+  @return $value;
+}

package/scss/graupl.scss

@@ -2,8 +2,4 @@
 //
 // Forwards all components for easy development.
 
-@forward "base";
-@forward "layout";
-@forward "component";
-@forward "state";
-@forward "theme";
+@forward "index";

package/scss/layout/columns/_index.scss

@@ -20,7 +20,7 @@
   }
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    .columns-#{$i} {
+    .count-#{$i} {
       --#{defaults.$prefix}-columns-count: #{$i};
     }