theme.ts 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. interface Theme {
  2. dark: boolean,
  3. colors: {
  4. 'primary': string,
  5. 'n-primary': string,
  6. 'primary-alt': string,
  7. 'n-primary-alt': string,
  8. 'secondary': string,
  9. 'n-secondary': string,
  10. 'secondary-alt': string,
  11. 'n-secondary-alt': string,
  12. 'neutral-strong': string,
  13. 'n-neutral-strong': string,
  14. 'neutral': string,
  15. 'n-neutral': string,
  16. 'neutral-soft': string,
  17. 'n-neutral-soft': string,
  18. 'danger': string,
  19. 'n-danger': string,
  20. 'success': string,
  21. 'n-success': string,
  22. 'warning': string,
  23. 'n-warning': string,
  24. 'info': string,
  25. 'n-info': string,
  26. 'x-create-btn': string,
  27. 'n-x-create-btn': string
  28. }
  29. }
  30. export const lightTheme: Theme = {
  31. dark: false,
  32. colors: {
  33. /**
  34. * @see Cf. doc/colors.md pour le rôle de chaque couleur
  35. */
  36. // Global
  37. 'primary': '#00ad8e',
  38. 'n-primary': '#ffffff',
  39. 'primary-alt': '#a9e0d6',
  40. 'n-primary-alt': '#777777',
  41. 'secondary': '#324150',
  42. 'n-secondary': '#f5f5f5',
  43. 'secondary-alt': '#2c3a48',
  44. 'n-secondary-alt': '#ffffff',
  45. 'neutral-strong': '#777777',
  46. 'n-neutral-strong': '#ecf0f5',
  47. 'neutral': '#f5f5f5',
  48. 'n-neutral': '#777777',
  49. 'neutral-soft': '#ecf0f5',
  50. 'n-neutral-soft': '#464646',
  51. // Content
  52. 'danger': '#f56954',
  53. 'n-danger': '#ffffff',
  54. 'success': '#00a65a',
  55. 'n-success': '#ffffff',
  56. 'warning': '#f39c12',
  57. 'n-warning': '#ffffff',
  58. 'info': '#3c8dbc',
  59. 'n-info': '#ffffff',
  60. // Special cases
  61. // TODO: voir ceux dont on peut se passer
  62. 'x-create-btn': '#f39c12',
  63. 'n-x-create-btn': '#ffffff',
  64. }
  65. }
  66. export const darkTheme: Theme = {
  67. dark: true,
  68. colors: {
  69. /**
  70. * @see Cf. doc/colors.md pour le rôle de chaque couleur
  71. */
  72. // Global
  73. 'primary': '#00ad8e',
  74. 'n-primary': '#ffffff',
  75. 'primary-alt': '#a9e0d6',
  76. 'n-primary-alt': '#777777',
  77. 'secondary': '#324150',
  78. 'n-secondary': '#f5f5f5',
  79. 'secondary-alt': '#2c3a48',
  80. 'n-secondary-alt': '#ffffff',
  81. 'neutral-strong': '#595959',
  82. 'n-neutral-strong': '#ecf0f5',
  83. 'neutral': '#777777',
  84. 'n-neutral': '#f5f5f5',
  85. 'neutral-soft': '#090c11',
  86. 'n-neutral-soft': '#cccccc',
  87. // Content
  88. 'danger': '#f56954',
  89. 'n-danger': '#ffffff',
  90. 'success': '#00a65a',
  91. 'n-success': '#ffffff',
  92. 'warning': '#f39c12',
  93. 'n-warning': '#ffffff',
  94. // TODO: on ne pourrait pas utiliser la couleur 'success' à la place?
  95. 'info': '#3c8dbc',
  96. 'n-info': '#ffffff',
  97. // Special cases
  98. // TODO: voir ceux dont on peut se passer
  99. 'x-create-btn': '#f39c12',
  100. 'n-x-create-btn': '#ffffff',
  101. }
  102. }