theme.ts 3.0 KB

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