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

package/scss/state/focus/_variables.scss

@@ -1,36 +0,0 @@
-// Variables referencing custom properties.
-
-@use "../../variables" as base;
-@use "../../theme/variables" as theme;
-@use "defaults";
-
-$focus-width: var(--#{defaults.$prefix}-focus-width, #{base.$border-width});
-$focus-outline-color: var(
-  --#{defaults.$prefix}-focus-outline-color,
-  #{theme.$theme-active--dark}
-);
-$focus-outline-width: var(
-  --#{defaults.$prefix}-focus-outline-width,
-  #{$focus-width}
-);
-$focus-outline-style: var(
-  --#{defaults.$prefix}-focus-outline-style,
-  #{defaults.$focus-outline-style}
-);
-$focus-outline-offset: var(
-  --#{defaults.$prefix}-focus-outline-offset,
-  calc(-1 * #{$focus-outline-width})
-);
-$focus-box-shadow-color: var(
-  --#{defaults.$prefix}-focus-box-shadow-color,
-  #{theme.$theme-active--light}
-);
-$focus-box-shadow-style: var(
-  --#{defaults.$prefix}-focus-box-shadow-style,
-  #{defaults.$focus-box-shadow-style}
-);
-$focus-box-shadow: var(
-  --#{defaults.$prefix}-focus-box-shadow,
-  #{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style} #{$focus-box-shadow-color},
-  0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}
-);

package/scss/state/focus/focus.scss

@@ -1,3 +0,0 @@
-// Focus state styles.
-
-@forward "index";

package/scss/theme/_defaults.scss

@@ -1,56 +0,0 @@
-// 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(235deg 40% 95%),
-  200: hsl(235deg 30% 80%),
-  300: hsl(235deg 20% 65%),
-  400: hsl(235deg 15% 55%),
-  500: hsl(235deg 15% 50%),
-  600: hsl(235deg 15% 45%),
-  700: hsl(235deg 20% 35%),
-  800: hsl(235deg 30% 20%),
-  900: hsl(235deg 40% 10%),
-) !default;
-$tertiary: (
-  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

@@ -1,53 +0,0 @@
-// 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--secondary--dark: #{$theme-dark--secondary--dark};
-    --#{defaults.$prefix}-theme-active--secondary--light: #{$theme-dark--secondary--light};
-    --#{defaults.$prefix}-theme-active--tertiary: #{$theme-dark--tertiary};
-    --#{defaults.$prefix}-theme-active--tertiary--dark: #{$theme-dark--tertiary--dark};
-    --#{defaults.$prefix}-theme-active--tertiary--light: #{$theme-dark--tertiary--light};
-    --#{defaults.$prefix}-theme-active--light: #{$theme-dark--light};
-    --#{defaults.$prefix}-theme-active--dark: #{$theme-dark--dark};
-    --#{defaults.$prefix}-theme-active--shade--light: #{$theme-dark--shade--light};
-    --#{defaults.$prefix}-theme-active--shade--dark: #{$theme-dark--shade--dark};
-
-    color-scheme: 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--secondary--dark: #{$theme-light--secondary--dark};
-    --#{defaults.$prefix}-theme-active--secondary--light: #{$theme-light--secondary--light};
-    --#{defaults.$prefix}-theme-active--tertiary: #{$theme-light--tertiary};
-    --#{defaults.$prefix}-theme-active--tertiary--dark: #{$theme-light--tertiary--dark};
-    --#{defaults.$prefix}-theme-active--tertiary--light: #{$theme-light--tertiary--light};
-    --#{defaults.$prefix}-theme-active--light: #{$theme-light--light};
-    --#{defaults.$prefix}-theme-active--dark: #{$theme-light--dark};
-    --#{defaults.$prefix}-theme-active--shade--light: #{$theme-light--shade--light};
-    --#{defaults.$prefix}-theme-active--shade--dark: #{$theme-light--shade--dark};
-
-    color-scheme: light;
-  }
-}

package/scss/theme/_variables.scss

@@ -1,297 +0,0 @@
-// 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)}
-    ),
-);
-
-// Tertiary theme colours.
-$tertiary: (
-  100:
-    var(
-      --#{defaults.$prefix}-tertiary--100,
-      #{map.get(defaults.$tertiary, 100)}
-    ),
-  200:
-    var(
-      --#{defaults.$prefix}-tertiary--200,
-      #{map.get(defaults.$tertiary, 200)}
-    ),
-  300:
-    var(
-      --#{defaults.$prefix}-tertiary--300,
-      #{map.get(defaults.$tertiary, 300)}
-    ),
-  400:
-    var(
-      --#{defaults.$prefix}-tertiary--400,
-      #{map.get(defaults.$tertiary, 400)}
-    ),
-  500:
-    var(
-      --#{defaults.$prefix}-tertiary--500,
-      #{map.get(defaults.$tertiary, 500)}
-    ),
-  600:
-    var(
-      --#{defaults.$prefix}-tertiary--600,
-      #{map.get(defaults.$tertiary, 600)}
-    ),
-  700:
-    var(
-      --#{defaults.$prefix}-tertiary--700,
-      #{map.get(defaults.$tertiary, 700)}
-    ),
-  800:
-    var(
-      --#{defaults.$prefix}-tertiary--800,
-      #{map.get(defaults.$tertiary, 800)}
-    ),
-  900:
-    var(
-      --#{defaults.$prefix}-tertiary--900,
-      #{map.get(defaults.$tertiary, 900)}
-    ),
-);
-
-// Theme colours.
-// Colour primary.
-$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}
-);
-
-// Color secondary.
-$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}
-);
-
-// Colour tertiary.
-$theme-light--tertiary: var(
-  --#{defaults.$prefix}-theme-light--tertiary,
-  #{map.get($tertiary, 700)}
-);
-$theme-light--tertiary--dark: var(
-  --#{defaults.$prefix}-theme-light--tertiary--dark,
-  #{map.get($tertiary, 800)}
-);
-$theme-light--tertiary--light: var(
-  --#{defaults.$prefix}-theme-light--tertiary--light,
-  #{map.get($tertiary, 600)}
-);
-$theme-dark--tertiary: var(
-  --#{defaults.$prefix}-theme-dark--tertiary,
-  #{map.get($tertiary, 300)}
-);
-$theme-dark--tertiary--dark: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--dark,
-  #{map.get($tertiary, 200)}
-);
-$theme-dark--tertiary--light: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--light,
-  #{map.get($tertiary, 400)}
-);
-$theme-active--tertiary: var(
-  --#{defaults.$prefix}-theme-active--tertiary,
-  #{$theme-light--tertiary}
-);
-$theme-active--tertiary--dark: var(
-  --#{defaults.$prefix}-theme-active--tertiary--dark,
-  #{$theme-light--tertiary--dark}
-);
-$theme-active--tertiary--light: var(
-  --#{defaults.$prefix}-theme-active--tertiary--light,
-  #{$theme-light--tertiary--light}
-);
-
-// Colour 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}
-);
-
-// Colour dark.
-$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}
-);
-
-// Colour shade.
-$theme-light--shade--light: var(
-  --#{defaults.$prefix}-theme-light--shade--light,
-  #{map.get($primary, 200)}
-);
-$theme-light--shade--dark: var(
-  --#{defaults.$prefix}-theme-light--shade--dark,
-  #{map.get($primary, 300)}
-);
-$theme-dark--shade--light: var(
-  --#{defaults.$prefix}-theme-dark--shade--light,
-  #{map.get($primary, 800)}
-);
-$theme-dark--shade--dark: var(
-  --#{defaults.$prefix}-theme-dark--shade--dark,
-  #{map.get($primary, 700)}
-);
-$theme-active--shade--light: var(
-  --#{defaults.$prefix}-theme-active--shade--light,
-  #{$theme-light--shade--light}
-);
-$theme-active--shade--dark: var(
-  --#{defaults.$prefix}-theme-active--shade--dark,
-  #{$theme-light--shade--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

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