@for-the-people-initiative/design-system 1.3.1

package/src/scss/mixins/accent-gradient.scss

@@ -0,0 +1,43 @@
+@use "../../../dist/scss/tokens" as *;
+
+/// Accent gradient mixin for consistent gradient backgrounds across components
+/// Used for checked states, active indicators, filled tracks, etc.
+/// @param {string} $state - Gradient state: default or hover
+/// @param {number} $angle - Gradient angle in degrees (default: 135deg)
+@mixin accent-gradient($state: "default", $angle: 135deg) {
+  @if $state == "default" {
+    background: linear-gradient(
+      #{$angle},
+      var(--accent-gradient-start, $accent-gradient-start),
+      var(--accent-gradient-end, $accent-gradient-end)
+    );
+  } @else if $state == "hover" {
+    background: linear-gradient(
+      #{$angle},
+      var(--accent-gradient-hoverStart, $accent-gradient-hoverStart),
+      var(--accent-gradient-hoverEnd, $accent-gradient-hoverEnd)
+    );
+  }
+}
+
+/// Accent gradient text for vibrant text elements
+/// @param {string} $state - Gradient state: default or hover
+@mixin accent-gradient-text($state: "default") {
+  @if $state == "default" {
+    background: linear-gradient(
+      135deg,
+      var(--accent-gradient-start, $accent-gradient-start),
+      var(--accent-gradient-end, $accent-gradient-end)
+    );
+  } @else if $state == "hover" {
+    background: linear-gradient(
+      135deg,
+      var(--accent-gradient-hoverStart, $accent-gradient-hoverStart),
+      var(--accent-gradient-hoverEnd, $accent-gradient-hoverEnd)
+    );
+  }
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}

package/src/scss/mixins/border.scss

@@ -0,0 +1,28 @@
+@use "../../../dist/scss/tokens" as *;
+
+/// Border mixin for consistent border treatments
+/// @param {string} $tier - Border tier: subtle, default, strong, or vibrant
+/// @param {color} $bg - Background color for gradient border (required for vibrant with border-radius)
+@mixin border($tier: "default", $bg: null) {
+  @if $tier == "subtle" {
+    border: 1px solid $border-subtle;
+  } @else if $tier == "default" {
+    border: 1px solid $border-default;
+  } @else if $tier == "strong" {
+    border: 1px solid $border-strong;
+  } @else if $tier == "vibrant" {
+    // Gradient border that works with border-radius
+    // Uses double background trick: solid bg on padding-box, gradient on border-box
+    border: 2px solid transparent;
+    @if $bg {
+      background:
+        linear-gradient($bg, $bg) padding-box,
+        linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end) border-box;
+    } @else {
+      // Default to white background
+      background:
+        linear-gradient(#fff, #fff) padding-box,
+        linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end) border-box;
+    }
+  }
+}

package/src/scss/mixins/breakpoint.scss

@@ -0,0 +1,80 @@
+// Defined based on statcounter stats end 2023
+// Phone - https://gs.statcounter.com/screen-resolution-stats/mobile/netherlands#monthly-202210-202310
+// Tablet - https://gs.statcounter.com/screen-resolution-stats/tablet/netherlands#monthly-202210-202310
+// Desktop - https://gs.statcounter.com/screen-resolution-stats/tablet/netherlands#monthly-202210-202310
+
+@use "sass:map";
+
+$breakpoints: (
+  phone: (
+    from: 0px,
+    to: 767px,
+  ),
+  phone-portrait: (
+    from: 0px,
+    to: 429px,
+  ),
+  phone-landscape: (
+    from: 430px,
+    to: 767px,
+  ),
+  tablet: (
+    from: 768px,
+    to: 1280px,
+  ),
+  tablet-portrait: (
+    from: 768px,
+    to: 1023px,
+  ),
+  tablet-landscape: (
+    from: 1024px,
+    to: 1280px,
+  ),
+  laptop: (
+    from: 1281px,
+    to: 1919px,
+  ),
+  desktop: (
+    from: 1920px,
+    to: 2559px,
+  ),
+  wide-screen: (
+    from: 2560px,
+    to: 10000px,
+  ),
+);
+
+@mixin breakpoint-from($bp) {
+  $from: map.get(map.get($breakpoints, $bp), from);
+
+  @media (min-width: $from) {
+    @content;
+  }
+}
+
+@mixin breakpoint-to($bp) {
+  $from: map.get(map.get($breakpoints, $bp), from);
+  $max-width: $from - 1;
+
+  @media (max-width: $max-width) {
+    @content;
+  }
+}
+
+@mixin breakpoint-on($bp) {
+  $from: map.get(map.get($breakpoints, $bp), from);
+  $to: map.get(map.get($breakpoints, $bp), to);
+
+  @media (max-width: $to) and (min-width: $from) {
+    @content;
+  }
+}
+
+@mixin breakpoint-from-to($bp-from, $bp-to) {
+  $from: map.get(map.get($breakpoints, $bp-from), from);
+  $to: map.get(map.get($breakpoints, $bp-to), to);
+
+  @media (max-width: $to) and (min-width: $from) {
+    @content;
+  }
+}

package/src/scss/mixins/container.scss

@@ -0,0 +1,33 @@
+@use "./breakpoint.scss" as bp;
+@use "../../dist/scss/tokens" as tokens;
+
+@mixin container() {
+  padding-left: tokens.$inset-m;
+  padding-right: tokens.$inset-m;
+  width: 100%;
+  box-sizing: border-box;
+
+  @include bp.breakpoint-from(tablet) {
+    padding: 0 tokens.$inset-2xl;
+  }
+
+  @include bp.breakpoint-from(laptop) {
+    padding: 0 80px; // Larger container padding
+  }
+}
+
+@mixin container-with-dna() {
+  $extra-space: 48px;
+  padding-left: tokens.$inset-l;
+  padding-right: calc(#{tokens.$inset-l} + #{$extra-space});
+
+  @include bp.breakpoint-from(tablet) {
+    padding-left: tokens.$inset-2xl;
+    padding-right: calc(#{tokens.$inset-2xl} + #{$extra-space});
+  }
+
+  @include bp.breakpoint-from(laptop) {
+    padding-left: 80px;
+    padding-right: calc(80px + #{$extra-space});
+  }
+}

package/src/scss/mixins/elevation.scss

@@ -0,0 +1,43 @@
+// Surface elevation mixin
+// Usage: @include elevation(2) — gives background, border, and shadow for layer 2
+
+@mixin elevation($level: 1) {
+  @if $level == 0 {
+    background: var(--surface-canvas);
+    border: none;
+    box-shadow: none;
+  } @else if $level == 1 {
+    background: var(--surface-panel);
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-xs);
+  } @else if $level == 2 {
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-s);
+  } @else if $level == 3 {
+    background: var(--surface-raised);
+    border: 1px solid var(--border-strong);
+    box-shadow: var(--shadow-m);
+  } @else if $level == 4 {
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-strong);
+    box-shadow: var(--shadow-xl);
+  }
+
+  border-radius: var(--radius-rounded);
+}
+
+// Muted/recessed surface (for inputs inside a card)
+@mixin surface-muted {
+  background: var(--surface-muted);
+  border: 1px solid var(--border-subtle);
+}
+
+// Accent surface (for highlighted cards)
+@mixin surface-accent {
+  background: var(--surface-accent);
+  border: 1px solid transparent;
+  border-image: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end)) 1;
+  // Or use a wrapper approach for border-radius compatibility:
+  // outline: 1px solid var(--border-vibrant-start);
+}

package/src/scss/mixins/grid.scss

@@ -0,0 +1,23 @@
+@use "./breakpoint.scss" as *;
+@use "./container.scss" as *;
+@use "../../dist/scss/tokens" as *;
+
+@mixin grid() {
+  display: grid;
+  gap: $inline-l;
+  grid-template-columns: 1fr;
+
+  @include breakpoint-from(tablet) {
+    grid-template-columns: repeat(4, 1fr);
+    gap: $inline-xl;
+  }
+
+  @include breakpoint-from(laptop) {
+    grid-template-columns: repeat(6, 1fr);
+    gap: $inline-2xl;
+  }
+
+  @include breakpoint-from(laptop) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}

package/src/scss/mixins/levitation.scss

@@ -0,0 +1,15 @@
+@use "../../dist/scss/tokens" as *;
+
+@mixin levitate($level: "m") {
+  @if ($level == "xs") {
+    box-shadow: $shadow-xs;
+  } @else if ($level == "s") {
+    box-shadow: $shadow-s;
+  } @else if ($level == "m") {
+    box-shadow: $shadow-m;
+  } @else if ($level == "l") {
+    box-shadow: $shadow-l;
+  } @else if ($level == "xl") {
+    box-shadow: $shadow-xl;
+  }
+}

package/src/scss/mixins/list.scss

@@ -0,0 +1,5 @@
+@mixin list-clean {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/src/scss/mixins/surface-atmospheric.scss

@@ -0,0 +1,93 @@
+@use "../../../dist/scss/tokens" as *;
+
+// Navy palette values — not in semantic tokens, hardcoded from design palette
+// navy-950: #0a0e27 (deepest navy), navy-900: #0f1535 (deep navy)
+$navy-950: #0a0e27;
+$navy-900: #0f1535;
+
+/// Atmospheric surface background with layered gradients and warm glow
+/// Creates a rich, deep space-like background with ambient lighting
+///
+/// @param {String} $glow-position - Position of warm glow: 'top', 'center', 'bottom'
+/// @param {Number} $glow-intensity - Intensity of the warm glow (0-1)
+/// @param {Boolean} $include-noise - Whether to include noise texture
+@mixin surface-atmospheric($glow-position: 'top', $glow-intensity: 0.15, $include-noise: true) {
+  // Calculate glow position
+  $glow-y: 30%;
+  @if $glow-position == 'center' {
+    $glow-y: 50%;
+  } @else if $glow-position == 'bottom' {
+    $glow-y: 70%;
+  }
+
+  // Base background with layered gradients
+  background:
+    // Warm ambient glow (orange/amber)
+    radial-gradient(
+      ellipse 80% 50% at 50% #{$glow-y},
+      rgba(255, 160, 60, $glow-intensity) 0%,
+      rgba(255, 120, 40, calc($glow-intensity * 0.5)) 30%,
+      transparent 70%
+    ),
+    // Secondary subtle glow for depth
+    radial-gradient(
+      ellipse 60% 40% at 30% calc(#{$glow-y} - 10%),
+      rgba(255, 180, 80, calc($glow-intensity * 0.3)) 0%,
+      transparent 50%
+    ),
+    // Vignette effect (darker edges)
+    radial-gradient(
+      ellipse 100% 100% at 50% 50%,
+      transparent 40%,
+      rgba(0, 0, 0, 0.3) 100%
+    ),
+    // Base gradient
+    linear-gradient(
+      180deg,
+      var(--navy-950, $navy-950) 0%,
+      var(--navy-900, $navy-900) 40%,
+      var(--navy-900, $navy-900) 60%,
+      var(--navy-950, $navy-950) 100%
+    );
+
+  background-color: var(--navy-950, $navy-950);
+
+  // Noise texture overlay
+  @if $include-noise {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      opacity: 0.4;
+      pointer-events: none;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+      background-repeat: repeat;
+      background-size: 256px 256px;
+      mix-blend-mode: overlay;
+      z-index: 0;
+    }
+
+    // Ensure content stays above noise
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+  }
+}
+
+/// Simplified atmospheric surface without noise (better performance)
+@mixin surface-atmospheric-simple($glow-position: 'top', $glow-intensity: 0.15) {
+  @include surface-atmospheric($glow-position, $glow-intensity, false);
+}
+
+/// Dark atmospheric variant with minimal glow
+@mixin surface-atmospheric-dark() {
+  @include surface-atmospheric('center', 0.08, true);
+}
+
+/// Vibrant atmospheric variant with stronger glow
+@mixin surface-atmospheric-vibrant() {
+  @include surface-atmospheric('top', 0.25, true);
+}

package/src/scss/mixins/surface.scss

@@ -0,0 +1,19 @@
+@use "../../../dist/scss/tokens" as *;
+
+/// Surface mixin for background treatments
+/// @param {string} $type - Surface type: canvas, panel, elevated, muted, accent, or gradient
+@mixin surface($type: "canvas") {
+  @if $type == "canvas" {
+    background-color: $surface-canvas;
+  } @else if $type == "panel" {
+    background-color: $surface-panel;
+  } @else if $type == "elevated" {
+    background-color: $surface-elevated;
+  } @else if $type == "muted" {
+    background-color: $surface-muted;
+  } @else if $type == "accent" {
+    background-color: $surface-accent;
+  } @else if $type == "gradient" {
+    background: linear-gradient(180deg, $surface-gradient-start, $surface-gradient-end);
+  }
+}

package/src/scss/mixins/typography.scss

@@ -0,0 +1,91 @@
+@use "../../dist/scss/tokens" as *;
+@use "./breakpoint.scss" as *;
+
+@mixin heading($name) {
+  font-weight: 500;
+  line-height: 1.25;
+  color: $text-heading;
+  @if ($name == "xs") {
+    font-size: 20px;
+  } @else if ($name == "s") {
+    font-size: 24px;
+  } @else if ($name == "m") {
+    font-size: 32px;
+  } @else if ($name == "l") {
+    font-size: 40px;
+  } @else if ($name == "xl") {
+    font-size: 48px;
+  } @else if ($name == "2xl") {
+    font-size: 64px;
+    line-height: 1.1;
+  }
+}
+
+@mixin text($name, $isStrong: false) {
+  line-height: 1.5;
+
+  @if ($isStrong) {
+    font-weight: 600;
+  }
+
+  @if ($name == "3xs") {
+    font-size: 10px;
+  } @else if ($name == "2xs") {
+    font-size: 12px;
+  } @else if ($name == "xs") {
+    font-size: 14px;
+  } @else if ($name == "s") {
+    font-size: 16px;
+  } @else if ($name == "m") {
+    font-size: 18px;
+  } @else if ($name == "l") {
+    font-size: 20px;
+  } @else if ($name == "xl") {
+    font-size: 24px;
+    line-height: 1.25;
+  } @else if ($name == "2xl") {
+    font-size: 28px;
+    line-height: 1.25;
+  }
+}
+
+@mixin static-typography($category: "heading", $type: "l", $isStrong: false) {
+  @if ($category == "heading") {
+    font-family: Manrope, sans-serif;
+    @include heading($type);
+  } @else {
+    font-family: "DM Sans", sans-serif;
+    @include text($type, $isStrong);
+  }
+}
+
+@mixin typography($category: "heading", $type, $isStrong: false) {
+  @if ($category == "heading") {
+    @if ($type == "2xl") {
+      @include static-typography("heading", "xl");
+
+      @include breakpoint-from(laptop) {
+        @include static-typography($category, $type);
+      }
+    } @else if ($type == "xl") {
+      @include static-typography("heading", "l");
+      @include breakpoint-from(laptop) {
+        @include static-typography($category, $type);
+      }
+    } @else if ($type == "l") {
+      @include static-typography("heading", "m");
+      @include breakpoint-from(laptop) {
+        @include static-typography($category, $type);
+      }
+    } @else if ($type == "m") {
+      @include static-typography("heading", "s");
+      @include breakpoint-from(laptop) {
+        @include static-typography($category, $type);
+      }
+    } @else {
+      @include static-typography($category, $type, $isStrong);
+    }
+  } @else if ($category == "text") {
+    @include static-typography($category, $type, $isStrong);
+  }
+}

package/src/scss/utility-classes/utility-classes-spacing.scss

@@ -0,0 +1,34 @@
+// Spacing utility classes using design tokens (CSS custom properties)
+// Prefix: ftp- (For the People)
+
+// Spacing scale mapped to CSS custom properties
+$_spacing-scale: (
+  1: var(--stack-3xs, 0.25rem),
+  2: var(--stack-2xs, 0.5rem),
+  3: var(--stack-xs, 0.75rem),
+  4: var(--stack-sm, 1rem),
+  5: var(--stack-md, 1.25rem),
+  6: var(--stack-lg, 1.5rem),
+  8: var(--stack-xl, 2rem),
+  10: var(--stack-2xl, 2.5rem),
+  12: var(--stack-3xl, 3rem),
+  14: 3.5rem,
+  16: 4rem,
+  20: 5rem,
+  24: 6rem,
+  32: 8rem,
+);
+
+@each $size, $value in $_spacing-scale {
+  .ftp-m-#{$size} { margin: #{$value}; }
+  .ftp-mt-#{$size} { margin-top: #{$value}; }
+  .ftp-mr-#{$size} { margin-right: #{$value}; }
+  .ftp-mb-#{$size} { margin-bottom: #{$value}; }
+  .ftp-ml-#{$size} { margin-left: #{$value}; }
+
+  .ftp-p-#{$size} { padding: #{$value}; }
+  .ftp-pt-#{$size} { padding-top: #{$value}; }
+  .ftp-pr-#{$size} { padding-right: #{$value}; }
+  .ftp-pb-#{$size} { padding-bottom: #{$value}; }
+  .ftp-pl-#{$size} { padding-left: #{$value}; }
+}

package/src/scss/utility-classes/utility-classes-typography.scss

@@ -0,0 +1,114 @@
+@use "../fonts.scss" as *;
+@use "../mixins/typography.scss" as *;
+
+.pzh-heading-xs {
+  @include typography("heading", "xs");
+}
+
+.pzh-heading-s {
+  @include typography("heading", "s");
+}
+
+.pzh-heading-m {
+  @include typography("heading", "m");
+}
+
+.pzh-heading-l {
+  @include typography("heading", "l");
+}
+
+.pzh-heading-xl {
+  @include typography("heading", "xl");
+}
+
+.pzh-heading-2xl {
+  @include typography("heading", "2xl");
+}
+
+.pzh-text-3xs {
+  @include typography("text", "3xs");
+}
+
+.pzh-text-2xs {
+  @include typography("text", "2xs");
+}
+
+.pzh-text-xs {
+  @include typography("text", "xs");
+}
+
+.pzh-text-s {
+  @include typography("text", "s");
+}
+
+.pzh-text-m {
+  @include typography("text", "m");
+}
+
+.pzh-text-l {
+  @include typography("text", "l");
+}
+
+.pzh-text-xl {
+  @include typography("text", "xl");
+}
+
+.pzh-text-2xl {
+  @include typography("text", "2xl");
+}
+
+.pzh-heading-static-xs {
+  @include static-typography("heading", "xs");
+}
+
+.pzh-heading-static-s {
+  @include static-typography("heading", "s");
+}
+
+.pzh-heading-static-m {
+  @include static-typography("heading", "m");
+}
+
+.pzh-heading-static-l {
+  @include static-typography("heading", "l");
+}
+
+.pzh-heading-static-xl {
+  @include static-typography("heading", "xl");
+}
+
+.pzh-heading-static-2xl {
+  @include static-typography("heading", "2xl");
+}
+
+.pzh-text-static-3xs {
+  @include static-typography("text", "3xs");
+}
+
+.pzh-text-static-2xs {
+  @include static-typography("text", "2xs");
+}
+
+.pzh-text-static-xs {
+  @include static-typography("text", "xs");
+}
+
+.pzh-text-static-s {
+  @include static-typography("text", "s");
+}
+
+.pzh-text-static-m {
+  @include static-typography("text", "m");
+}
+
+.pzh-text-static-l {
+  @include static-typography("text", "l");
+}
+
+.pzh-text-static-xl {
+  @include static-typography("text", "xl");
+}
+
+.pzh-text-static-2xl {
+  @include static-typography("text", "2xl");
+}