1:root {
2  --mikiop-background-color: #00000007;
3  --mikiop-border-color: #00000020;
4  --mikiop-header-background-color: #00000007;
5  --mikiop-footer-background-color: #00000007;
6
7  --mikiop-primary-text-color: #ffffff;
8  --mikiop-primary-text-hover-color: #ffffff;
9  --mikiop-primary-background-color: #007bff;
10  --mikiop-primary-background-hover-color: #0069d9;
11  --mikiop-primary-border-color: #007bff;
12  --mikiop-primary-border-hover-color: #0062cc;
13  --mikiop-primary-light-text-color: #004085;
14  --mikiop-primary-light-background-color: #cce5ff;
15  --mikiop-primary-light-border-color: #b8daff;
16
17  --mikiop-secondary-text-color: #fff;
18  --mikiop-secondary-text-hover-color: #fff;
19  --mikiop-secondary-background-color: #6c757d;
20  --mikiop-secondary-background-hover-color: #5a6268;
21  --mikiop-secondary-border-color: #6c757d;
22  --mikiop-secondary-border-hover-color: #545b62;
23  --mikiop-secondary-light-text-color: #383d41;
24  --mikiop-secondary-light-background-color: #e2e3e5;
25  --mikiop-secondary-light-border-color: #d6d8db;
26
27  --mikiop-success-text-color: #fff;
28  --mikiop-success-text-hover-color: #fff;
29  --mikiop-success-background-color: #28a745;
30  --mikiop-success-background-hover-color: #218838;
31  --mikiop-success-border-color: #28a745;
32  --mikiop-success-border-hover-color: #1e7e34;
33  --mikiop-success-light-text-color: #155724;
34  --mikiop-success-light-background-color: #d4edda;
35  --mikiop-success-light-border-color: #c3e6cb;
36
37  --mikiop-danger-text-color: #fff;
38  --mikiop-danger-background-color: #dc3545;
39  --mikiop-danger-border-color: #dc3545;
40  --mikiop-danger-text-hover-color: #fff;
41  --mikiop-danger-background-hover-color: #c82333;
42  --mikiop-danger-border-hover-color: #bd2130;
43  --mikiop-danger-light-text-color: #721c24;
44  --mikiop-danger-light-background-color: #f8d7da;
45  --mikiop-danger-light-border-color: #f5c6cb;
46
47  --mikiop-warning-text-color: #fff;
48  --mikiop-warning-background-color: #ffc107;
49  --mikiop-warning-border-color: #ffc107;
50  --mikiop-warning-text-hover-color: #fff;
51  --mikiop-warning-background-hover-color: #e0a800;
52  --mikiop-warning-border-hover-color: #d39e00;
53  --mikiop-warning-light-text-color: #856404;
54  --mikiop-warning-light-background-color: #fff3cd;
55  --mikiop-warning-light-border-color: #ffeeba;
56
57  --mikiop-info-text-color: #fff;
58  --mikiop-info-background-color: #17a2b8;
59  --mikiop-info-border-color: #17a2b8;
60  --mikiop-info-text-hover-color: #fff;
61  --mikiop-info-background-hover-color: #138496;
62  --mikiop-info-border-hover-color: #117a8b;
63  --mikiop-info-light-text-color: #0c5460;
64  --mikiop-info-light-background-color: #d1ecf1;
65  --mikiop-info-light-border-color: #bee5eb;
66
67  --mikiop-light-text-color: #212529;
68  --mikiop-light-background-color: #f8f9fa;
69  --mikiop-light-border-color: #f8f9fa;
70  --mikiop-light-text-hover-color: #212529;
71  --mikiop-light-background-hover-color: #e2e6ea;
72  --mikiop-light-border-hover-color: #dae0e5;
73  --mikiop-light-light-text-color: #818182;
74  --mikiop-light-light-background-color: #fefefe;
75  --mikiop-light-light-border-color: #fdfdfe;
76
77  --mikiop-dark-text-color: #fff;
78  --mikiop-dark-background-color: #343a40;
79  --mikiop-dark-border-color: #343a40;
80  --mikiop-dark-text-hover-color: #fff;
81  --mikiop-dark-background-hover-color: #23272b;
82  --mikiop-dark-border-hover-color: #1d2124;
83  --mikiop-dark-light-text-color: #1b1e21;
84  --mikiop-dark-light-background-color: #d6d8d9;
85  --mikiop-dark-light-border-color: #c6c8ca;
86
87  --mikiop-link-text-color: #007bff;
88  --mikiop-link-background-color: transparent;
89  --mikiop-link-border-color: transparent;
90  --mikiop-link-text-hover-color: #0056b3;
91  --mikiop-link-background-hover-color: transparent;
92  --mikiop-link-border-hover-color: transparent;
93
94  /* Carousel */
95  --mikiop-carousel-title-text-color: #fff;
96  --mikiop-carousel-caption-text-color: #fff;
97  --mikiop-carousel-caption-background-color: #00000080;
98  --mikiop-carousel-control-fill-color: #fff;
99  --mikiop-carousel-control-stroke-color: #000;
100  --mikiop-carousel-indicator-color: #fff;
101
102  /* Steps */
103  --mikiop-steps-step-text-color: inherit;
104  --mikiop-steps-border-color: #00000040;
105  --mikiop-steps-step-background-color: #fff;
106  --mikiop-steps-step-background-complete-color: #f8f8f8;
107
108  /* Tabgroup */
109  --mikiop-tabgroup-tab-text-active-color: #000000d0;
110  --mikiop-tabgroup-tab-background-active-color: #ffffff20;
111  --mikiop-tabgroup-tab-border-hover-color: #00000020;
112
113  /* Tooltip */
114  --mikiop-tooltip-text-color: #333;
115  --mikiop-tooltip-background-color: #fcf3cf;
116  --mikiop-tooltip-border-color: #9a7d0a;
117
118  /* Nav */
119  --mikiop-nav-dropdown-border-width: 1px;
120  --mikiop-nav-dropdown-border-style: solid;
121  --mikiop-nav-dropdown-border-color: #ced4da;
122  --mikiop-nav-dropdown-background-color: #fff;
123  --mikiop-nav-dropdown-hover-color: #e5e5e5;
124  --mikiop-nav-dropdown-shadow: 0 4px 10px rgba(0,0,0,0.3);;
125
126  /* Pagination */
127  --mikiop-pagination-text-color: #007bff;
128  --mikiop-pagination-background-color: transparent;
129  --mikiop-pagination-text-hover-color: #007bff;
130  --mikiop-pagination-background-hover-color: #cce5ff;
131  --mikiop-pagination-border-color: #00000040;
132  --mikiop-pagination-text-active-color: #007bff;
133  --mikiop-pagination-background-active-color: #cce5ff;
134  --mikiop-pagination-background-disabled-opacity: 0.65;
135  --mikiop-pagination-text-disabled-color: #666;
136  --mikiop-pagination-background-disabled-color: transparent;
137}
138
139:root[data-theme="theme-dark"] {
140  --mikiop-background-color: #ffffff20;
141  --mikiop-border-color: #ffffff20;
142  --mikiop-header-background-color: #ffffff07;
143  --mikiop-footer-background-color: #ffffff07;
144
145  /* Steps */
146  --mikiop-steps-step-text-color: #fff;
147  --mikiop-steps-border-color: #ffffff40;
148  --mikiop-steps-step-background-color: #222;
149  --mikiop-steps-step-background-complete-color: #000;
150
151  /* Tabgroup */
152  --mikiop-tabgroup-tab-text-active-color: #ffffffd0;
153  --mikiop-tabgroup-tab-background-active-color: #00000020;
154  --mikiop-tabgroup-tab-border-hover-color: #ffffff20;
155
156  /* Pagination */
157  --mikiop-pagination-text-color: #007bff;
158  --mikiop-pagination-background-color: transparent;
159  --mikiop-pagination-text-hover-color: #007bff;
160  --mikiop-pagination-background-hover-color: #cce5ff;
161  --mikiop-pagination-border-color: #ffffff40;
162  --mikiop-pagination-text-active-color: #007bff;
163  --mikiop-pagination-background-active-color: #cce5ff;
164  --mikiop-pagination-background-disabled-opacity: 1;
165  --mikiop-pagination-text-disabled-color: #666;
166  --mikiop-pagination-background-disabled-color: transparent;
167}