testprojekt/rss/css/variables.scss

/* variables.scss (drop-in) */
@use "sass:map";
@use "sass:color";
@use "./palette" as *;

/* --------------------------------------------
   Helpers
-------------------------------------------- */
@function rgb-channels($c) {
  @return #{color.channel($c, "red", $space: rgb)}
          #{color.channel($c, "green", $space: rgb)}
          #{color.channel($c, "blue", $space: rgb)};
}

/* --------------------------------------------
   Breakpoints
-------------------------------------------- */
$breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1400px
);

/* --------------------------------------------
   Spacing
-------------------------------------------- */
$spacer: 1rem;

$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 2,
  6: $spacer * 3,
  7: $spacer * 4
);

/* --------------------------------------------
   Elevation
-------------------------------------------- */
$elevation: (
  0: none,
  1: (0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)),
  2: (0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)),
  4: (0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)),
  8: (0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)),
  12:(0 7px 8px -4px rgba(0,0,0,.2), 0 12px 17px 2px rgba(0,0,0,.14), 0 5px 22px 4px rgba(0,0,0,.12)),
  16:(0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12)),
  24:(0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12))
);

/* --------------------------------------------
   Radius
-------------------------------------------- */
$radius-none: 0;
$radius-sm: 0.25rem;
$radius-md: 0.5rem;
$radius-lg: 1rem;
$radius-xl: 1.5rem;
$radius-pill: 50rem;

/* --------------------------------------------
   Typography
-------------------------------------------- */
$font-family-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
$font-family-alt: "Poppins", sans-serif;

$weight-light: 300;
$weight-normal: 400;
$weight-medium: 500;
$weight-bold: 700;

$font-sizes: (
  "h1": 2.5rem,
  "h2": 2rem,
  "h3": 1.75rem,
  "h4": 1.5rem,
  "h5": 1.25rem,
  "h6": 1rem,
  "body": 1rem,
  "small": 0.875rem,
  "xs": 0.75rem
);

$line-height-tight: 1.2;
$line-height-base: 1.5;
$line-height-loose: 1.8;

/* --------------------------------------------
   Theme tokens
-------------------------------------------- */
$primary-color: map.get(map.get($colors, "teal"), 700);
$primary-color-dark: map.get(map.get($colors, "teal"), 300);

:root {
  /* Brand */
  --primary:       #{$primary-color};
  --primary-light: #{map.get(map.get($colors, "teal"), 100)};
  --primary-dark:  #{map.get(map.get($colors, "teal"), 950)};
  --accent:        #{map.get(map.get($colors, "orange"), 500)};
  

  /* RGB channels for focus rings etc */
  --primary-rgb:   #{rgb-channels($primary-color)};

  /* Status */
  --success: #{map.get(map.get($colors, "green"), 600)};
  --info:    #{map.get(map.get($colors, "blue"), 500)};
  --warning: #{map.get(map.get($colors, "yellow"), 500)};
  --danger:  #{map.get(map.get($colors, "red"), 600)};

  /* Surfaces */
  --bg-app:       #{map.get(map.get($colors, "gray"), 50)};
  --bg-surface:   #{map.get(map.get($colors, "gray"), 100)};
  --bg-card:      #{$white};
  --border-color: #{map.get(map.get($colors, "gray"), 200)};

  /* Text */
  --text-main:    #{map.get(map.get($colors, "gray"), 900)};
  --text-muted:   #{map.get(map.get($colors, "gray"), 700)};
  --text-light:   #{map.get(map.get($colors, "gray"), 500)};
  --text-inverse: #{$white};

  --table-header-bg: var(--bg-surface);
  --table-striped-bg: #{map.get(map.get($colors, "gray"), 50)};
  --table-hover-bg: rgba(var(--primary-rgb), 0.06);
}

[data-theme="dark"] {
  --primary:       #{$primary-color-dark};
  --primary-light: #{map.get(map.get($colors, "teal"), 800)};
  --primary-rgb:   #{rgb-channels($primary-color-dark)};

  --bg-app:        #{map.get(map.get($colors, "gray"), 950)};
  --bg-surface:    #{map.get(map.get($colors, "gray"), 900)};
  --bg-card:       #{map.get(map.get($colors, "gray"), 800)};
  --border-color:  #{map.get(map.get($colors, "gray"), 700)};

  --text-main:     #{map.get(map.get($colors, "gray"), 100)};
  --text-muted:    #{map.get(map.get($colors, "gray"), 400)};
  --text-light:    #{map.get(map.get($colors, "gray"), 600)};

  --table-header-bg: var(--bg-surface);
  --table-striped-bg: rgba(255,255,255,0.03);
  --table-hover-bg: rgba(var(--primary-rgb), 0.10);
}

/* --------------------------------------------
   SASS aliases to CSS vars
-------------------------------------------- */
$primary: var(--primary);
$primary-light: var(--primary-light);
$primary-dark: var(--primary-dark);
$accent: var(--accent);

$success: var(--success);
$info: var(--info);
$warning: var(--warning);
$danger: var(--danger);

$bg-app: var(--bg-app);
$bg-surface: var(--bg-surface);
$bg-card: var(--bg-card);
$border-color: var(--border-color);

$text-main: var(--text-main);
$text-muted: var(--text-muted);
$text-light: var(--text-light);
$text-inverse: var(--text-inverse);

/* --------------------------------------------
   Z-index
-------------------------------------------- */
$z-index: (
  "deep": -1,
  "default": 1,
  "sticky": 100,
  "sidebar": 200,
  "header": 300,
  "backdrop": 400,
  "modal": 500,
  "dropdown": 600,
  "popover": 700,
  "tooltip": 800,
  "toast": 900
);

/* --------------------------------------------
   Grid & layout maps
-------------------------------------------- */
$container-max-widths: (
  "sm": 540px,
  "md": 720px,
  "lg": 960px,
  "xl": 1140px,
  "xxl": 1320px
);

$grid-columns: 12;
$grid-gutter-width: map.get($spacers, 3);

$flex-directions: (row, row-reverse, column, column-reverse);
$justify-content: (
  "start": flex-start,
  "end": flex-end,
  "center": center,
  "between": space-between,
  "around": space-around,
  "evenly": space-evenly
);
$align-items: (
  "start": flex-start,
  "end": flex-end,
  "center": center,
  "baseline": baseline,
  "stretch": stretch
);
$display-values: (none, block, inline, inline-block, flex, inline-flex, grid);

/* --------------------------------------------
   Components baseline tokens
-------------------------------------------- */
$input-height: 2.5rem;
$input-height-sm: 2rem;
$input-height-lg: 3.25rem;

$input-padding-y: map.get($spacers, 2);
$input-padding-x: map.get($spacers, 3);

$label-margin-bottom: map.get($spacers, 1);
$label-font-size: map.get($font-sizes, "small");
$label-font-weight: $weight-medium;

$card-padding: map.get($spacers, 4);
$card-border-width: 1px;
$card-border-radius: $radius-md;

$table-cell-padding-y: map.get($spacers, 3);
$table-cell-padding-x: map.get($spacers, 3);
$table-header-bg: var(--table-header-bg);
$table-header-color: $text-muted;
$table-striped-bg: var(--table-striped-bg);
$table-hover-bg: var(--table-hover-bg);

$scrollbar-width: 8px;
$scrollbar-track: map.get(map.get($colors, "gray"), 100);
$scrollbar-thumb: map.get(map.get($colors, "gray"), 300);
$scrollbar-thumb-hover: map.get(map.get($colors, "gray"), 400);

/* sizing maps */
$sizes: (
  25: 25%,
  33: 33.33%,
  50: 50%,
  66: 66.66%,
  75: 75%,
  100: 100%,
  "auto": auto,
  "screen-v": 100vh,
  "screen-h": 100vw
);

$spacing-properties: ("m": "margin", "p": "padding");
$spacing-sides: (
  "t": "top",
  "b": "bottom",
  "s": "start",
  "e": "end",
  "x": ("left", "right"),
  "y": ("top", "bottom"),
  "a": ""
);

$object-fits: (contain, cover, fill, scale-down);
$aspect-ratios: (
  "1x1": 100%,
  "4x3": 75%,
  "16x9": 56.25%,
  "21x9": 42.85%
);

/* motion */
$standard: cubic-bezier(0.4, 0, 0.2, 1);
$duration-fast: 150ms;
$duration-base: 250ms;
$duration-slow: 400ms;

$hover-brightness: 95%;
$active-brightness: 90%;

$hover-lift: translateY(-2px);
$hover-shadow: map.get($elevation, 4);

/* focus ring */
$focus-ring-width: 3px;
$focus-ring-color: rgba(var(--primary-rgb), 0.35);

/* sidebar */
$sidebar-width: 280px;
$sidebar-collapsed: 84px;