@graupl/graupl 1.0.0-alpha.0

package/scss/theme/_defaults.scss

@@ -0,0 +1,45 @@
+// 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.
+
+@use "sass:map";
+@forward "../defaults";
+
+// Colours.
+$primary: (
+  100: hsl(219deg 100% 95%),
+  200: hsl(219deg 90% 80%),
+  300: hsl(219deg 80% 65%),
+  400: hsl(219deg 75% 55%),
+  500: hsl(219deg 75% 50%),
+  600: hsl(219deg 75% 45%),
+  700: hsl(219deg 80% 35%),
+  800: hsl(219deg 90% 20%),
+  900: hsl(219deg 100% 10%),
+) !default;
+$secondary: (
+  100: hsl(340deg 85% 95%),
+  200: hsl(340deg 75% 80%),
+  300: hsl(340deg 65% 65%),
+  400: hsl(340deg 60% 55%),
+  500: hsl(340deg 60% 50%),
+  600: hsl(340deg 60% 45%),
+  700: hsl(340deg 65% 35%),
+  800: hsl(340deg 75% 20%),
+  900: hsl(340deg 85% 10%),
+) !default;
+
+// Font properties.
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+$font-family:
+  system-ui,
+  -apple-system,
+  blinkmacsystemfont,
+  "Segoe UI",
+  roboto,
+  "Helvetica Neue",
+  arial,
+  sans-serif !default;
+$font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem);

package/scss/theme/_index.scss

@@ -0,0 +1,35 @@
+// Graupl Theme.
+
+@use "variables" as *;
+@use "../mixins/layer" as *;
+@use "defaults";
+@use "sass:map";
+
+@include layer(theme) {
+  :root {
+    background: $theme-active--light;
+    color: $theme-active--dark;
+    font-family: $font-family;
+    font-size: $font-size;
+  }
+
+  // Set the active theme for dark mode.
+  .dark-mode {
+    --#{defaults.$prefix}-theme-active--primary: #{$theme-dark--primary};
+    --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-dark--primary--dark};
+    --#{defaults.$prefix}-theme-active--primary--light: #{$theme-dark--primary--light};
+    --#{defaults.$prefix}-theme-active--secondary: #{$theme-dark--secondary};
+    --#{defaults.$prefix}-theme-active--light: #{$theme-dark--light};
+    --#{defaults.$prefix}-theme-active--dark: #{$theme-dark--dark};
+  }
+
+  // Set the active theme for light mode.
+  .light-mode {
+    --#{defaults.$prefix}-theme-active--primary: #{$theme-light--primary};
+    --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-light--primary--dark};
+    --#{defaults.$prefix}-theme-active--primary--light: #{$theme-light--primary--light};
+    --#{defaults.$prefix}-theme-active--secondary: #{$theme-light--secondary};
+    --#{defaults.$prefix}-theme-active--light: #{$theme-light--light};
+    --#{defaults.$prefix}-theme-active--dark: #{$theme-light--dark};
+  }
+}

package/scss/theme/_variables.scss

@@ -0,0 +1,177 @@
+// Variables referencing custom properties.
+
+@use "defaults";
+@use "sass:map";
+
+// Primary theme colours.
+$primary: (
+  100:
+    var(--#{defaults.$prefix}-primary--100, #{map.get(defaults.$primary, 100)}),
+  200:
+    var(--#{defaults.$prefix}-primary--200, #{map.get(defaults.$primary, 200)}),
+  300:
+    var(--#{defaults.$prefix}-primary--300, #{map.get(defaults.$primary, 300)}),
+  400:
+    var(--#{defaults.$prefix}-primary--400, #{map.get(defaults.$primary, 400)}),
+  500:
+    var(--#{defaults.$prefix}-primary--500, #{map.get(defaults.$primary, 500)}),
+  600:
+    var(--#{defaults.$prefix}-primary--600, #{map.get(defaults.$primary, 600)}),
+  700:
+    var(--#{defaults.$prefix}-primary--700, #{map.get(defaults.$primary, 700)}),
+  800:
+    var(--#{defaults.$prefix}-primary--800, #{map.get(defaults.$primary, 800)}),
+  900:
+    var(--#{defaults.$prefix}-primary--900, #{map.get(defaults.$primary, 900)}),
+);
+
+// Secondary theme colours.
+$secondary: (
+  100:
+    var(
+      --#{defaults.$prefix}-secondary--100,
+      #{map.get(defaults.$secondary, 100)}
+    ),
+  200:
+    var(
+      --#{defaults.$prefix}-secondary--200,
+      #{map.get(defaults.$secondary, 200)}
+    ),
+  300:
+    var(
+      --#{defaults.$prefix}-secondary--300,
+      #{map.get(defaults.$secondary, 300)}
+    ),
+  400:
+    var(
+      --#{defaults.$prefix}-secondary--400,
+      #{map.get(defaults.$secondary, 400)}
+    ),
+  500:
+    var(
+      --#{defaults.$prefix}-secondary--500,
+      #{map.get(defaults.$secondary, 500)}
+    ),
+  600:
+    var(
+      --#{defaults.$prefix}-secondary--600,
+      #{map.get(defaults.$secondary, 600)}
+    ),
+  700:
+    var(
+      --#{defaults.$prefix}-secondary--700,
+      #{map.get(defaults.$secondary, 700)}
+    ),
+  800:
+    var(
+      --#{defaults.$prefix}-secondary--800,
+      #{map.get(defaults.$secondary, 800)}
+    ),
+  900:
+    var(
+      --#{defaults.$prefix}-secondary--900,
+      #{map.get(defaults.$secondary, 900)}
+    ),
+);
+
+// Theme colours.
+$theme-light--primary: var(
+  --#{defaults.$prefix}-theme-light--primary,
+  #{map.get($primary, 700)}
+);
+$theme-light--primary--dark: var(
+  --#{defaults.$prefix}-theme-light--primary--dark,
+  #{map.get($primary, 800)}
+);
+$theme-light--primary--light: var(
+  --#{defaults.$prefix}-theme-light--primary--light,
+  #{map.get($primary, 600)}
+);
+$theme-dark--primary: var(
+  --#{defaults.$prefix}-theme-dark--primary,
+  #{map.get($primary, 300)}
+);
+$theme-dark--primary--dark: var(
+  --#{defaults.$prefix}-theme-dark--primary--dark,
+  #{map.get($primary, 200)}
+);
+$theme-dark--primary--light: var(
+  --#{defaults.$prefix}-theme-dark--primary--light,
+  #{map.get($primary, 400)}
+);
+$theme-active--primary: var(
+  --#{defaults.$prefix}-theme-active--primary,
+  #{$theme-light--primary}
+);
+$theme-active--primary--dark: var(
+  --#{defaults.$prefix}-theme-active--primary--dark,
+  #{$theme-light--primary--dark}
+);
+$theme-active--primary--light: var(
+  --#{defaults.$prefix}-theme-active--primary--light,
+  #{$theme-light--primary--light}
+);
+$theme-light--secondary: var(
+  --#{defaults.$prefix}-theme-light--secondary,
+  #{map.get($secondary, 700)}
+);
+$theme-light--secondary--dark: var(
+  --#{defaults.$prefix}-theme-light--secondary--dark,
+  #{map.get($secondary, 800)}
+);
+$theme-light--secondary--light: var(
+  --#{defaults.$prefix}-theme-light--secondary--light,
+  #{map.get($secondary, 600)}
+);
+$theme-dark--secondary: var(
+  --#{defaults.$prefix}-theme-dark--secondary,
+  #{map.get($secondary, 300)}
+);
+$theme-dark--secondary--dark: var(
+  --#{defaults.$prefix}-theme-dark--secondary--dark,
+  #{map.get($secondary, 200)}
+);
+$theme-dark--secondary--light: var(
+  --#{defaults.$prefix}-theme-dark--secondary--light,
+  #{map.get($secondary, 400)}
+);
+$theme-active--secondary: var(
+  --#{defaults.$prefix}-theme-active--secondary,
+  #{$theme-light--secondary}
+);
+$theme-active--secondary--dark: var(
+  --#{defaults.$prefix}-theme-active--secondary--dark,
+  #{$theme-light--secondary--dark}
+);
+$theme-active--secondary--light: var(
+  --#{defaults.$prefix}-theme-active--secondary--light,
+  #{$theme-light--secondary--light}
+);
+$theme-light--light: var(
+  --#{defaults.$prefix}-theme-light--light,
+  #{map.get($primary, 100)}
+);
+$theme-dark--light: var(
+  --#{defaults.$prefix}-theme-dark--light,
+  #{map.get($primary, 900)}
+);
+$theme-active--light: var(
+  --#{defaults.$prefix}-theme-active--light,
+  #{$theme-light--light}
+);
+$theme-light--dark: var(
+  --#{defaults.$prefix}-theme-light--dark,
+  #{map.get($primary, 900)}
+);
+$theme-dark--dark: var(
+  --#{defaults.$prefix}-theme-dark--dark,
+  #{map.get($primary, 100)}
+);
+$theme-active--dark: var(
+  --#{defaults.$prefix}-theme-active--dark,
+  #{$theme-light--dark}
+);
+
+// Font properties.
+$font-family: var(--#{defaults.$prefix}-font-family, #{defaults.$font-family});
+$font-size: var(--#{defaults.$prefix}-font-size, #{defaults.$font-size});

package/scss/theme/theme.scss

@@ -0,0 +1,3 @@
+// Graupl Theme.
+
+@forward "index";

package/stylelint.config.js

@@ -0,0 +1,14 @@
+const config = {
+  extends: [
+    "stylelint-config-standard-scss",
+    "stylelint-config-sass-guidelines",
+    "stylelint-config-property-sort-order-smacss",
+  ],
+  plugins: ["stylelint-prettier"],
+  rules: {
+    "prettier/prettier": true,
+    "scss/comment-no-empty": null,
+  },
+};
+
+export default config;