mattrguerra.comHouston area
Matt Guerra
  1. 01AI & Automation
  2. 02Photography
  3. 03Design
  4. 04About
  5. 05Notes
  6. 06Contact
Back to the systems

mattrguerra/cortexmainPrivate on GitHub, published here in full

tokens.css

CSS3.7 KB110 lines

src/styles/tokens.css

  1. /* Color and surface tokens. The resolved theme is on <html data-theme>. */
  2. :root {
  3. --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', sans-serif;
  4. --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  5. --radius-sm: 8px;
  6. --radius: 12px;
  7. --radius-lg: 16px;
  8. --blur: 22px;
  9. --saturate: 1.6;
  10. --sidebar: 268px;
  11. --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  12. }
  14. :root[data-theme='light'] {
  15. color-scheme: light;
  16. --backdrop:
  17. radial-gradient(1200px 800px at 12% 8%, #e9e3ff 0%, transparent 60%),
  18. radial-gradient(900px 700px at 92% 18%, #d4f3ec 0%, transparent 55%),
  19. radial-gradient(1000px 900px at 60% 110%, #f6e6f3 0%, transparent 60%), #f3f1f8;
  20. --glass: rgba(255, 255, 255, 0.62);
  21. --glass-strong: rgba(255, 255, 255, 0.97);
  22. --glass-tint: rgba(255, 255, 255, 0.34);
  23. --glass-border: rgba(255, 255, 255, 0.7);
  24. --hairline: rgba(38, 30, 72, 0.1);
  25. --text-1: #1d1a2c;
  26. --text-2: #4d4764;
  27. --text-3: #6a6482;
  28. --accent: #5a3fd1;
  29. --accent-soft: rgba(90, 63, 209, 0.12);
  30. --accent-text: #ffffff;
  31. --teal: #0b7d72;
  32. --user-bubble: rgba(90, 63, 209, 0.1);
  33. --code-bg: rgba(29, 26, 44, 0.05);
  34. --warn: #9a5b00;
  35. --warn-bg: rgba(255, 196, 92, 0.22);
  36. --danger: #b3261e;
  37. --danger-bg: rgba(229, 72, 77, 0.14);
  38. --shadow: 0 1px 1px rgba(20, 14, 50, 0.04), 0 8px 28px rgba(20, 14, 50, 0.1);
  39. --shadow-pop: 0 2px 6px rgba(20, 14, 50, 0.08), 0 24px 60px rgba(20, 14, 50, 0.18);
  40. --focus: 0 0 0 3px rgba(90, 63, 209, 0.35);
  41. }
  43. :root[data-theme='dark'] {
  44. color-scheme: dark;
  45. --backdrop:
  46. radial-gradient(1200px 800px at 12% 8%, #2a2256 0%, transparent 60%),
  47. radial-gradient(900px 700px at 92% 18%, #0d3b39 0%, transparent 55%),
  48. radial-gradient(1000px 900px at 60% 110%, #3a1d3f 0%, transparent 60%), #121019;
  49. --glass: rgba(28, 25, 40, 0.58);
  50. --glass-strong: rgba(34, 31, 48, 0.97);
  51. --glass-tint: rgba(40, 36, 58, 0.34);
  52. --glass-border: rgba(255, 255, 255, 0.09);
  53. --hairline: rgba(255, 255, 255, 0.08);
  54. --text-1: #f1eefb;
  55. --text-2: #c3bdd8;
  56. --text-3: #a39cbb;
  57. --accent: #a894ff;
  58. --accent-soft: rgba(168, 148, 255, 0.16);
  59. --accent-text: #15122a;
  60. --teal: #6fd8c7;
  61. --user-bubble: rgba(168, 148, 255, 0.14);
  62. --code-bg: rgba(0, 0, 0, 0.28);
  63. --warn: #ffcf7a;
  64. --warn-bg: rgba(255, 196, 92, 0.14);
  65. --danger: #ff9a93;
  66. --danger-bg: rgba(229, 72, 77, 0.18);
  67. --shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.35);
  68. --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.5);
  69. --focus: 0 0 0 3px rgba(168, 148, 255, 0.45);
  70. }
  72. /* Under native vibrancy the window material is the frost; panels only tint it.
  73. --tint (0 to 1, from Settings) scales how strongly. */
  74. :root[data-vibrancy='native'] {
  75. --backdrop: transparent;
  76. }
  77. :root[data-vibrancy='native'][data-theme='light'] {
  78. --glass: rgba(255, 255, 255, calc(0.4 * var(--tint, 1)));
  79. --glass-tint: rgba(255, 255, 255, calc(0.18 * var(--tint, 1)));
  80. }
  81. :root[data-vibrancy='native'][data-theme='dark'] {
  82. --glass: rgba(20, 18, 30, calc(0.34 * var(--tint, 1)));
  83. --glass-tint: rgba(20, 18, 30, calc(0.16 * var(--tint, 1)));
  84. }
  86. /* Reduce transparency: opaque surfaces, no blur. Follows the OS or the in-app switch. */
  87. :root[data-reduce-transparency='true'][data-theme='light'] {
  88. --backdrop: #f3f1f8;
  89. --glass: #ffffff;
  90. --glass-strong: #ffffff;
  91. --glass-tint: #f7f6fb;
  92. --glass-border: #e3dfee;
  93. }
  94. :root[data-reduce-transparency='true'][data-theme='dark'] {
  95. --backdrop: #121019;
  96. --glass: #1d1a2a;
  97. --glass-strong: #242134;
  98. --glass-tint: #1a1826;
  99. --glass-border: #2e2a40;
  100. }
  101. :root[data-reduce-transparency='true'] {
  102. --blur: 0px;
  103. --saturate: 1;
  104. }
  105. @media (prefers-reduced-transparency: reduce) {
  106. :root {
  107. --blur: 0px;
  108. --saturate: 1;
  109. }
  110. }