_themes.scss 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. $themes: (
  2. restore: (
  3. baseColorDark: #891c25,
  4. baseColorLight: #e9e9e9,
  5. baseBorder: rgba(0, 0, 0, 0.125),
  6. secondaryColorDark: rgb(120, 58, 58),
  7. secondaryColorLight: #e9e9e9,
  8. panelBackgroundColor: #fff,
  9. panelTextColor: rgb(70, 46, 46),
  10. panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95),
  11. toolsBackground: #e9e9e9,
  12. toolsColor: #891c25,
  13. toolsBackgroundDarker: #ccc4ba,
  14. toolsColorActive: white,
  15. appEntryBoxBackground: #f9f7f5,
  16. appEntryBoxActiveTabBg: #f2ede9,
  17. mainHeaderBackground: white,
  18. mainHeaderColor: #891c25
  19. ),
  20. neutral: (
  21. baseColorDark: #45535a,
  22. baseColorLight: #fff,
  23. baseBorder: rgba(0, 0, 0, 0.125),
  24. secondaryColorDark: #555,
  25. secondaryColorLight: #fff,
  26. panelBackgroundColor: #fff,
  27. panelTextColor: #000,
  28. panelSecondaryBackgroundColor: rgba(255, 255, 255, 0.95),
  29. toolsBackground: #fff,
  30. toolsBackgroundDarker: #ccc,
  31. toolsColor: #000,
  32. toolsColorActive: #ffdd00,
  33. appEntryBoxBackground: #f5f5f5,
  34. appEntryBoxActiveTabBg: #e7e7e7,
  35. ),
  36. modern: (
  37. baseColorDark: #263238,
  38. baseColorLight: #ECEFF1,
  39. baseBorder: rgba(0, 0, 0, 0.125),
  40. secondaryColorDark: #607d8b,
  41. secondaryColorLight: #ECEFF1,
  42. panelBackgroundColor: #fff,
  43. panelTextColor: #000,
  44. panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95),
  45. toolsBackground: #ECEFF1,
  46. toolsColor: #263238,
  47. toolsBackgroundDarker: #b0bec5,
  48. toolsColorActive: #ffdd00,
  49. appEntryBoxBackground: #f1f4f5,
  50. appEntryBoxActiveTabBg: #eaecec,
  51. ),
  52. classic: (
  53. baseColorDark: rgb(54, 45, 40),
  54. baseColorLight: rgb(245, 234, 212),
  55. baseBorder: rgba(0, 0, 0, 0.125),
  56. secondaryColorDark: rgb(143, 119, 106),
  57. secondaryColorLight: rgb(245, 234, 212),
  58. panelBackgroundColor: #fff,
  59. panelTextColor: #000,
  60. panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95),
  61. toolsBackground: #f5ead4,
  62. toolsColor: rgb(54, 45, 40),
  63. toolsBackgroundDarker: #ccc4ba,
  64. toolsColorActive: #ffdd00,
  65. appEntryBoxBackground: #f9f7f5,
  66. appEntryBoxActiveTabBg: #f2ede9,
  67. )
  68. );
  69. // Themify
  70. // This mixin will add a CSS rule for each theme for the CSS rules defined within it.
  71. // The `@each $theme, $map in $themes` tell Sass to loop over the `$themes` map that was defined above.
  72. // On each loop, it assigns these values to `$theme` and `$map` respectively.
  73. // - `$theme` - Theme name
  74. // - `$map` - Map of all theme variables
  75. // Then the `map-get()` function is used to get any theme variable from `$map` and output the correct property for each theme.
  76. // The `&` refer to parent selectors and placing it after `[data-theme="#{$theme}"]` tells Sass to output any parent selectors after the theme name.
  77. // To use this mixin, just be sure that the element for which you are defining the CSS rules is included in a `*[data-theme]="theme-name"` element
  78. // and embody every CSS rule that needs to be themified within the mixin:
  79. // ```
  80. // btn-primary {
  81. // @include themify($themes) {
  82. // color: themed('baseColorDark');
  83. // }
  84. // }
  85. // ```
  86. @mixin themify($themes: $themes) {
  87. @each $theme, $map in $themes {
  88. :host-context([data-theme="#{$theme}"]) &,
  89. [data-theme="#{$theme}"] & {
  90. $theme-map: () !global;
  91. @each $key, $submap in $map {
  92. $value: map-get(map-get($themes, $theme), '#{$key}');
  93. $theme-map: map-merge($theme-map, ($key: $value)) !global;
  94. }
  95. @content;
  96. $theme-map: null !global;
  97. }
  98. }
  99. }
  100. // ThemifySelf
  101. // This mixin will add a CSS rule for each theme for the CSS rules defined within it.
  102. // The `@each $theme, $map in $themes` tell Sass to loop over the `$themes` map that was defined above.
  103. // On each loop, it assigns these values to `$theme` and `$map` respectively.
  104. // - `$theme` - Theme name
  105. // - `$map` - Map of all theme variables
  106. // Then the `map-get()` function is used to get any theme variable from `$map` and output the correct property for each theme.
  107. // To use this mixin, just be sure that the element for which you are defining the CSS rules has the `[data-theme]="theme-name"` attribute
  108. // and embody every CSS rule that needs to be themified within the mixin:
  109. // ```
  110. // btn-primary {
  111. // @include themifySelf($themes) {
  112. // color: themed('baseColorDark');
  113. // }
  114. // }
  115. // ```
  116. @mixin themifySelf($themes: $themes) {
  117. @each $theme, $map in $themes {
  118. &[data-theme="#{$theme}"] {
  119. $theme-map: () !global;
  120. @each $key, $submap in $map {
  121. $value: map-get(map-get($themes, $theme), '#{$key}');
  122. $theme-map: map-merge($theme-map, ($key: $value)) !global;
  123. }
  124. @content;
  125. $theme-map: null !global;
  126. }
  127. }
  128. }
  129. @function themed($key) {
  130. @return map-get($theme-map, $key);
  131. }