|
23 | 23 | height: auto; |
24 | 24 | } |
25 | 25 |
|
26 | | -/* Tonic theme */ |
27 | | - |
28 | | -body { |
29 | | - --tonic-body: 'Inter', sans-serif; |
30 | | - --tonic-header: 'Inter Black', sans-serif; |
31 | | - --tonic-subheader: 'Inter Medium', sans-serif; |
32 | | - --tonic-monospace: 'FiraMono', monospace; |
33 | | -} |
34 | | - |
35 | | -@media (prefers-color-scheme: light) { |
36 | | - body, *[theme="light"] { |
37 | | - --tonic-background: rgba(245, 245, 245, 1); |
38 | | - --tonic-background-dark: rgba(238, 238, 238, 1); |
39 | | - --tonic-window: rgba(255, 255, 255, 1); |
40 | | - --tonic-accent: rgba(56, 185, 255, 1); |
41 | | - --tonic-primary: rgba(54, 57, 61, 1); |
42 | | - --tonic-secondary: rgba(160, 160, 160, 1); |
43 | | - --tonic-light: rgba(153, 157, 160, 1); |
44 | | - --tonic-medium: rgba(153, 157, 160, 1); |
45 | | - --tonic-shadow: rgba(150, 150, 150, 0.25); |
46 | | - --tonic-dark: rgba(54, 57, 61, 1); |
47 | | - --tonic-disabled: rgba(152, 161, 175, 1); |
48 | | - --tonic-button-text: rgba(54, 57, 61, 1); |
49 | | - --tonic-button-shadow: rgba(0, 0, 0, 33%); |
50 | | - --tonic-button-background: rgba(245, 245, 245, 1); |
51 | | - --tonic-button-background-hover: rgba(230, 230, 230, 1); |
52 | | - --tonic-button-background-focus: rgba(237, 237, 237, 1); |
53 | | - --tonic-input-text: rgba(54, 57, 61, 1); |
54 | | - --tonic-input-text-hover: rgba(228, 228, 228, 1); |
55 | | - --tonic-input-border: rgba(201, 201, 201, 1); |
56 | | - --tonic-input-border-hover: rgba(54, 57, 61, 1); |
57 | | - --tonic-input-background: rgba(248, 248, 248, 1); |
58 | | - --tonic-input-background-focus: rgba(238, 238, 238, 1); |
59 | | - --tonic-border: rgba(224, 224, 224, 1); |
60 | | - --tonic-border-accent: rgba(206, 206, 206, 1); |
61 | | - --tonic-error: rgba(240, 102, 83, 1); |
62 | | - --tonic-notification: rgba(240, 102, 83, 1); |
63 | | - --tonic-danger: rgba(240, 102, 83, 1); |
64 | | - --tonic-success: rgba(133, 178, 116, 1); |
65 | | - --tonic-warning: rgba(249, 169, 103, 1); |
66 | | - --tonic-info: rgba(153, 157, 160, 1); |
67 | | - --tonic-overlay: rgba(255, 255, 255, 0.75); |
68 | | - } |
69 | | -} |
70 | | - |
71 | | -@media (prefers-color-scheme: dark) { |
72 | | - body, *[theme="dark"] { |
73 | | - --tonic-background: rgba(0, 0, 0, 1); |
74 | | - --tonic-background-dark: rgba(26, 26, 26, 1); |
75 | | - --tonic-window: rgba(32, 32, 32, 1); |
76 | | - --tonic-accent: rgba(56, 185, 255, 1); |
77 | | - --tonic-primary: rgba(242, 242, 242, 1); |
78 | | - --tonic-secondary: rgba(195, 195, 195, 1); |
79 | | - --tonic-medium: rgba(153, 157, 160, 1); |
80 | | - --tonic-dark: rgba(41, 41, 41, 1); |
81 | | - --tonic-shadow: rgba(0, 0, 0, 0.3); |
82 | | - --tonic-disabled: rgba(170, 170, 170, 1); |
83 | | - --tonic-button-text: rgba(255, 255, 255, 1); |
84 | | - --tonic-button-shadow: rgba(0, 0, 0, 1); |
85 | | - --tonic-button-background: rgba(74, 74, 74, 1); |
86 | | - --tonic-button-background-hover: rgba(94, 94, 94, 1); |
87 | | - --tonic-button-background-focus: rgba(84, 84, 84, 1); |
88 | | - --tonic-input-text: rgba(255, 255, 255, 1); |
89 | | - --tonic-input-text-hover: rgba(255, 255, 255, 1); |
90 | | - --tonic-input-background: rgba(12, 12, 12, 1); |
91 | | - --tonic-input-background-focus: rgba(18, 18, 18, 1); |
92 | | - --tonic-input-border: rgba(80, 80, 80, 1); |
93 | | - --tonic-input-border-hover: rgba(105, 105, 105, 1); |
94 | | - --tonic-border: rgba(72, 72, 72, 1); |
95 | | - --tonic-border-accent: rgba(90, 90, 90, 1); |
96 | | - --tonic-error: rgba(240, 102, 83, 1); |
97 | | - --tonic-notification: rgba(240, 102, 83, 1); |
98 | | - --tonic-caution: rgba(240, 102, 83, 1); |
99 | | - --tonic-success: rgba(133, 178, 116, 1); |
100 | | - --tonic-warn: rgba(249, 169, 103, 1); |
101 | | - --tonic-overlay: rgba(0, 0, 0, 0.40); |
102 | | - } |
103 | | -} |
104 | | - |
105 | 26 | /* Placeholder Styles */ |
106 | 27 | body { |
107 | 28 | height: 100vh; |
|
0 commit comments