_variables.scss

@use 'sass:color';

$colors: (
  'oldblue': #0088ce,
  'blue': #303383,
  'darkblue': #16183d,
  'verydarkblue': #0e0f26,
  'purple': #6e1e78,
  'pink': #a1006b,
  'red': #cd0037,
  'orange': #e05206,
  'yellow': #ffb612,
  'green': #82be00,
  'teal': #d2e100,
  'cyan': #009aa6,
  'white': #fff,
  'black': #000,
  'gray': #333,
  'gray-dark': #343a40,
  'primary': #303383,
  'primary-dark': #202258,
  'secondary': #4d4f53,
  'success': #82be00,
  'info': #009aa6,
  'warning': #ffb612,
  'danger': #cd0037,
  'light': #f2f2f2,
  'dark': #343a40,
  'coolgray1': #f2f2f2,
  'coolgray3': #d7d7d7,
  'coolgray5': #b9b9b9,
  'coolgray7': #a0a0a0,
  'coolgray9': #747678,
  'coolgray11': #4d4f53,
  'coolgray13': #333333,
  'coolgray15': #202020,

  // OSRD Design System
  'ambiantB5': #faf9f5,
  'ambiantB10': #f7f6ee,
  'ambiantB15': #f2f0e4,
  'black5': rgba(0, 0, 0, 0.05),
  'black10': rgba(0, 0, 0, 0.1),
  'black25': rgba(0, 0, 0, 0.25),
  'black100': #000000,
  'error5': #ffeeed,
  'error30': #ff6868,
  'error60': #d91c1c,
  'error80': #6b0000,
  'grey5': #f5f5f5,
  'grey10': #ebebea,
  'grey20': #d3d1cf,
  'grey30': #b6b2af,
  'grey40': #94918e,
  'grey50': #797671,
  'grey60': #5c5955,
  'grey80': #312e2b,
  'grey90': #1f1b17,
  'info5': #e6f7ff,
  'info30': #70c1e5,
  'info60': #216482,
  'info80': #053348,
  'primary40': #3c8aff,
  'primary50': #256afa,
  'primary60': #1844ef,
  'primary80': #1f0f96,
  'primary90': #180f47,
  'selection20': #fff2b3,
  'success30': #3cca80,
  'success60': #0b723c,
  'warning5': #fdf5e1,
  'warning30': #eaa72b,
  'warning60': #7d521e,
  'white75': rgba(255, 255, 255, 0.75),
  'white100': #ffffff,
);

:root {
  --border-radius: 4px; // 0.4375rem;
  --breakpoint-lg: 1024px;
  @each $color, $value in $colors {
    --#{$color}: #{$value};
    --#{$color}-rgb: #{color.channel($value, 'red')}, #{color.channel($value, 'green')},
      #{color.channel($value, 'blue')};
  }

  --modal-gray-transparent-background: rgba(0, 0, 0, 0.1);
  --modal-osrd-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.7) 100%);
}