styles.ts 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. // @ts-nocheck
  2. export const unit = 12
  3. export const PRIMARY_COLOR = "#211E1E"
  4. export const TEXT_COLOR = "#656363"
  5. export const LINK_COLOR = "#007AFF"
  6. export const LINK_BACKGROUND_COLOR = "#F9F8F8"
  7. export const BACKGROUND_COLOR = "#F0F0F1"
  8. export const SURFACE_DIVIDER_COLOR = "#D5D5D9"
  9. export const body = {
  10. background: BACKGROUND_COLOR,
  11. }
  12. export const container = {
  13. minWidth: "600px",
  14. padding: "64px 0px",
  15. }
  16. export const frame = {
  17. padding: `${unit * 2}px`,
  18. border: `1px solid ${SURFACE_DIVIDER_COLOR}`,
  19. background: "#FFF",
  20. borderRadius: "6px",
  21. boxShadow: `0 1px 2px rgba(0,0,0,0.03),
  22. 0 2px 4px rgba(0,0,0,0.03),
  23. 0 2px 6px rgba(0,0,0,0.03)`,
  24. }
  25. export const baseText = {
  26. fontFamily: "JetBrains Mono, monospace",
  27. }
  28. export const headingText = {
  29. color: PRIMARY_COLOR,
  30. fontSize: "16px",
  31. fontStyle: "normal",
  32. fontWeight: 500,
  33. lineHeight: "normal",
  34. }
  35. export const contentText = {
  36. color: TEXT_COLOR,
  37. fontSize: "14px",
  38. fontStyle: "normal",
  39. fontWeight: 400,
  40. lineHeight: "180%",
  41. }
  42. export const buttonText = {
  43. color: "#FDFCFC",
  44. fontSize: "16px",
  45. fontWeight: 500,
  46. margin: 0,
  47. padding: 0,
  48. display: "inline-flex",
  49. alignItems: "center",
  50. gap: "12px",
  51. }
  52. export const linkText = {
  53. color: LINK_COLOR,
  54. fontSize: "14px",
  55. fontStyle: "normal",
  56. fontWeight: 400,
  57. lineHeight: "150%",
  58. textDecorationLine: "underline",
  59. textDecorationStyle: "solid" as const,
  60. textDecorationSkipInk: "auto" as const,
  61. textDecorationThickness: "auto",
  62. textUnderlineOffset: "auto",
  63. textUnderlinePosition: "from-font",
  64. borderRadius: "4px",
  65. background: LINK_BACKGROUND_COLOR,
  66. padding: "8px 12px",
  67. textAlign: "center" as const,
  68. }
  69. export const contentHighlightText = {
  70. color: PRIMARY_COLOR,
  71. }
  72. export const button = {
  73. display: "inline-grid",
  74. padding: "8px 12px 8px 20px",
  75. justifyContent: "center",
  76. alignItems: "center",
  77. gap: "8px",
  78. flexShrink: "0",
  79. borderRadius: "4px",
  80. backgroundColor: PRIMARY_COLOR,
  81. }