_ag-theme-alpine-default-params.scss 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. @import "../../ag-theme-base/sass/ag-theme-base-default-params";
  2. @import "./ag-theme-alpine-font-vars";
  3. $ag-theme-alpine-default-params: (
  4. // COLOURS
  5. // main colours (overridden by alpine-dark)
  6. alpine-active-color: #2196f3,
  7. background-color: #fff,
  8. foreground-color: #181d1f,
  9. secondary-border-color: #dde2eb,
  10. header-background-color: #f8f8f8,
  11. odd-row-background-color: #fcfcfc,
  12. border-color: #babfc7,
  13. control-panel-background-color: #f8f8f8,
  14. subheader-background-color: #fff,
  15. checkbox-checked-color: ag-derived(alpine-active-color),
  16. checkbox-unchecked-color: #999,
  17. checkbox-background-color: ag-derived(background-color),
  18. // derived colours (shared by alpine-dark)
  19. subheader-toolbar-background-color: ag-derived(subheader-background-color, $opacity: 0.5),
  20. selected-row-background-color: ag-derived(alpine-active-color, $opacity: 0.3),
  21. row-hover-color: ag-derived(alpine-active-color, $opacity: 0.1),
  22. chip-background-color: ag-derived(foreground-color, $opacity: 0.07),
  23. secondary-foreground-color: ag-derived(foreground-color),
  24. input-disabled-background-color: ag-derived(background-color, $mix: border-color 20%),
  25. disabled-foreground-color: ag-derived(foreground-color, $opacity: 0.5),
  26. input-border-color: ag-derived(border-color),
  27. header-cell-moving-background-color: ag-derived(background-color),
  28. range-selection-border-color: #2196f3,
  29. // BORDERS
  30. borders: true,
  31. borders-side-button: false,
  32. border-radius: 3px,
  33. selected-tab-underline-transition-speed: 0.3s,
  34. header-column-resize-handle: true,
  35. header-column-resize-handle-width: 2px,
  36. header-column-resize-handle-height: 30%,
  37. // SIZING
  38. grid-size: 6px,
  39. icon-size: 16px,
  40. row-height: ag-derived(grid-size, $times: 7), // if changed, update environment.ts
  41. header-height: ag-derived(grid-size, $times: 8), // if changed, update environment.ts
  42. list-item-height: ag-derived(grid-size, $times: 5), // if changed, update environment.ts
  43. column-select-indent-size: ag-derived(icon-size),
  44. cell-horizontal-padding: ag-derived(grid-size, $times: 3),
  45. cell-widget-spacing: ag-derived(grid-size, $times: 2),
  46. widget-container-vertical-padding: ag-derived(grid-size, $times: 2),
  47. widget-container-horizontal-padding: ag-derived(grid-size, $times: 2),
  48. widget-horizontal-spacing: ag-derived(grid-size, $times: 2),
  49. widget-vertical-spacing: ag-derived(grid-size, $times: 1.5),
  50. toggle-button-height: 18px,
  51. toggle-button-width: 28px,
  52. input-focus-border-color: ag-derived(alpine-active-color, $opacity: 0.4),
  53. input-focus-box-shadow: 0 0 2px 0.1rem ag-derived(input-focus-border-color),
  54. // FONTS
  55. font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif),
  56. font-size: 13px,
  57. icon-font-family: $ag-theme-alpine-icon-font-family,
  58. icons-data: $ag-theme-alpine-icons-data,
  59. icons-font-codes: $ag-theme-alpine-icons-font-codes,
  60. // MISC
  61. selected-tab-underline-color: ag-derived(alpine-active-color),
  62. selected-tab-underline-width: 2px,
  63. full-width-tabs: true,
  64. card-shadow: 0 1px 4px 1px rgba(186, 191, 199, 0.4),
  65. popup-shadow: ag-derived(card-shadow)
  66. );
  67. $ag-theme-alpine-default-params: map-merge($ag-theme-base-default-params, $ag-theme-alpine-default-params);