Skip to content

[_]: fix/update index colors and styles #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xabg2 merged 1 commit into from
Feb 25, 2026
Merged

[_]: fix/update index colors and styles #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ export default [
...eslintConfigInternxt,
{
languageOptions: {
parser: typescriptParser
parser: typescriptParser,
},
rules: {
'@typescript-eslint/no-explicit-any': 'warn',
'react/react-in-jsx-scope': 'off',
'max-len': 'off',
},
ignores: ['dist', 'tmp', 'scripts', 'node_modules', '!.storybook'],
}
},
];

278 changes: 146 additions & 132 deletions src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,172 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('tailwindcss');

// @import url('./assets/fonts/InstrumentSans/font.css');

// COLORS

:root,
#root {
background: rgb(var(--color-surface));
font-family: 'Instrument Sans', sans-serif;
height: 100%;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
@theme {
--color-surface: rgb(var(--color-surface-rgb));
--color-highlight: rgb(var(--color-highlight-rgb));
--color-primary: rgb(var(--color-primary-rgb));
--color-primary-dark: rgb(var(--color-primary-dark-rgb));
--color-red: rgb(var(--color-red-rgb));
--color-red-dark: rgb(var(--color-red-dark-rgb));
--color-orange: rgb(var(--color-orange-rgb));
--color-orange-dark: rgb(var(--color-orange-dark-rgb));
--color-yellow: rgb(var(--color-yellow-rgb));
--color-yellow-dark: rgb(var(--color-yellow-dark-rgb));
--color-green: rgb(var(--color-green-rgb));
--color-green-dark: rgb(var(--color-green-dark-rgb));
--color-pink: rgb(var(--color-pink-rgb));
--color-pink-dark: rgb(var(--color-pink-dark-rgb));
--color-indigo: rgb(var(--color-indigo-rgb));
--color-indigo-dark: rgb(var(--color-indigo-dark-rgb));
--color-gray-1: rgb(var(--color-gray-1-rgb));
--color-gray-5: rgb(var(--color-gray-5-rgb));
--color-gray-10: rgb(var(--color-gray-10-rgb));
--color-gray-20: rgb(var(--color-gray-20-rgb));
--color-gray-30: rgb(var(--color-gray-30-rgb));
--color-gray-40: rgb(var(--color-gray-40-rgb));
--color-gray-50: rgb(var(--color-gray-50-rgb));
--color-gray-60: rgb(var(--color-gray-60-rgb));
--color-gray-70: rgb(var(--color-gray-70-rgb));
--color-gray-80: rgb(var(--color-gray-80-rgb));
--color-gray-90: rgb(var(--color-gray-90-rgb));
--color-gray-100: rgb(var(--color-gray-100-rgb));
}

--footer-height: 1rem;
button {
cursor: pointer;
}

@media (prefers-color-scheme: light) {
:root {
color-scheme: light;

--color-primary: 0 102 255;
--color-primary-dark: 0 88 219;
--color-red: 255 13 0;
--color-red-dark: 230 11 0;
--color-orange: 255 149 0;
--color-orange-dark: 230 134 0;
--color-yellow: 255 204 0;
--color-yellow-dark: 230 184 0;
--color-green: 50 195 86;
--color-green-dark: 45 174 77;
--color-pink: 255 36 76;
--color-pink-dark: 235 0 63;
--color-indigo: 81 78 212;
--color-indigo-dark: 60 58 207;
--color-surface: 255 255 255;
--color-highlight: 17 17 17;
--color-gray-1: 249 249 252;
--color-gray-5: 243 243 248;
--color-gray-10: 229 229 235;
--color-gray-20: 209 209 215;
--color-gray-30: 199 199 205;
--color-gray-40: 174 174 179;
--color-gray-50: 142 142 148;
--color-gray-60: 99 99 103;
--color-gray-70: 72 72 75;
--color-gray-80: 58 58 59;
--color-gray-90: 44 44 48;
--color-gray-100: 24 24 27;
--color-primary-rgb: 0 102 255;
--color-primary-dark-rgb: 0 88 219;
--color-red-rgb: 255 13 0;
--color-red-dark-rgb: 230 11 0;
--color-orange-rgb: 255 149 0;
--color-orange-dark-rgb: 230 134 0;
--color-yellow-rgb: 255 204 0;
--color-yellow-dark-rgb: 230 184 0;
--color-green-rgb: 50 195 86;
--color-green-dark-rgb: 45 174 77;
--color-pink-rgb: 255 36 76;
--color-pink-dark-rgb: 235 0 63;
--color-indigo-rgb: 81 78 212;
--color-indigo-dark-rgb: 60 58 207;
--color-surface-rgb: 255 255 255;
--color-highlight-rgb: 17 17 17;
--color-gray-1-rgb: 249 249 252;
--color-gray-5-rgb: 243 243 248;
--color-gray-10-rgb: 229 229 235;
--color-gray-20-rgb: 209 209 215;
--color-gray-30-rgb: 199 199 205;
--color-gray-40-rgb: 174 174 179;
--color-gray-50-rgb: 142 142 148;
--color-gray-60-rgb: 99 99 103;
--color-gray-70-rgb: 72 72 75;
--color-gray-80-rgb: 58 58 59;
--color-gray-90-rgb: 44 44 48;
--color-gray-100-rgb: 24 24 27;
}

:root.dark {
color-scheme: dark;

--color-primary: 20 114 255;
--color-primary-dark: 0 96 240;
--color-red: 255 61 51;
--color-red-dark: 255 36 26;
--color-orange: 255 164 36;
--color-orange-dark: 255 153 10;
--color-yellow: 255 214 51;
--color-yellow-dark: 255 209 26;
--color-green: 72 208 106;
--color-green-dark: 52 203 90;
--color-pink: 255 71 105;
--color-pink-dark: 255 15 80;
--color-indigo: 106 103 218;
--color-indigo-dark: 85 83 213;
--color-surface: 17 17 17;
--color-highlight: 255 255 255;
--color-gray-1: 24 24 27;
--color-gray-5: 44 44 48;
--color-gray-10: 58 58 59;
--color-gray-20: 72 72 75;
--color-gray-30: 99 99 103;
--color-gray-40: 142 142 148;
--color-gray-50: 174 174 179;
--color-gray-60: 199 199 205;
--color-gray-70: 209 209 215;
--color-gray-80: 229 229 235;
--color-gray-90: 243 243 248;
--color-gray-100: 249 249 252;
--color-primary-rgb: 20 114 255;
--color-primary-dark-rgb: 0 96 240;
--color-red-rgb: 255 61 51;
--color-red-dark-rgb: 255 36 26;
--color-orange-rgb: 255 164 36;
--color-orange-dark-rgb: 255 153 10;
--color-yellow-rgb: 255 214 51;
--color-yellow-dark-rgb: 255 209 26;
--color-green-rgb: 72 208 106;
--color-green-dark-rgb: 52 203 90;
--color-pink-rgb: 255 71 105;
--color-pink-dark-rgb: 255 15 80;
--color-indigo-rgb: 106 103 218;
--color-indigo-dark-rgb: 85 83 213;
--color-surface-rgb: 17 17 17;
--color-highlight-rgb: 255 255 255;
--color-gray-1-rgb: 24 24 27;
--color-gray-5-rgb: 44 44 48;
--color-gray-10-rgb: 58 58 59;
--color-gray-20-rgb: 72 72 75;
--color-gray-30-rgb: 99 99 103;
--color-gray-40-rgb: 142 142 148;
--color-gray-50-rgb: 174 174 179;
--color-gray-60-rgb: 199 199 205;
--color-gray-70-rgb: 209 209 215;
--color-gray-80-rgb: 229 229 235;
--color-gray-90-rgb: 243 243 248;
--color-gray-100-rgb: 249 249 252;
}
}

@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;

--color-primary: 20 114 255;
--color-primary-dark: 0 96 240;
--color-red: 255 61 51;
--color-red-dark: 255 36 26;
--color-orange: 255 164 36;
--color-orange-dark: 255 153 10;
--color-yellow: 255 214 51;
--color-yellow-dark: 255 209 26;
--color-green: 72 208 106;
--color-green-dark: 52 203 90;
--color-pink: 255 71 105;
--color-pink-dark: 255 15 80;
--color-indigo: 106 103 218;
--color-indigo-dark: 85 83 213;
--color-surface: 17 17 17;
--color-highlight: 255 255 255;
--color-gray-1: 24 24 27;
--color-gray-5: 44 44 48;
--color-gray-10: 58 58 59;
--color-gray-20: 72 72 75;
--color-gray-30: 99 99 103;
--color-gray-40: 142 142 148;
--color-gray-50: 174 174 179;
--color-gray-60: 199 199 205;
--color-gray-70: 209 209 215;
--color-gray-80: 229 229 235;
--color-gray-90: 243 243 248;
--color-gray-100: 249 249 252;
--color-primary-rgb: 20 114 255;
--color-primary-dark-rgb: 0 96 240;
--color-red-rgb: 255 61 51;
--color-red-dark-rgb: 255 36 26;
--color-orange-rgb: 255 164 36;
--color-orange-dark-rgb: 255 153 10;
--color-yellow-rgb: 255 214 51;
--color-yellow-dark-rgb: 255 209 26;
--color-green-rgb: 72 208 106;
--color-green-dark-rgb: 52 203 90;
--color-pink-rgb: 255 71 105;
--color-pink-dark-rgb: 255 15 80;
--color-indigo-rgb: 106 103 218;
--color-indigo-dark-rgb: 85 83 213;
--color-surface-rgb: 17 17 17;
--color-highlight-rgb: 255 255 255;
--color-gray-1-rgb: 24 24 27;
--color-gray-5-rgb: 44 44 48;
--color-gray-10-rgb: 58 58 59;
--color-gray-20-rgb: 72 72 75;
--color-gray-30-rgb: 99 99 103;
--color-gray-40-rgb: 142 142 148;
--color-gray-50-rgb: 174 174 179;
--color-gray-60-rgb: 199 199 205;
--color-gray-70-rgb: 209 209 215;
--color-gray-80-rgb: 229 229 235;
--color-gray-90-rgb: 243 243 248;
--color-gray-100-rgb: 249 249 252;
}

:root:not(.dark) {
color-scheme: light;

--color-primary: 0 102 255;
--color-primary-dark: 0 88 219;
--color-red: 255 13 0;
--color-red-dark: 230 11 0;
--color-orange: 255 149 0;
--color-orange-dark: 230 134 0;
--color-yellow: 255 204 0;
--color-yellow-dark: 230 184 0;
--color-green: 50 195 86;
--color-green-dark: 45 174 77;
--color-pink: 255 36 76;
--color-pink-dark: 235 0 63;
--color-indigo: 81 78 212;
--color-indigo-dark: 60 58 207;
--color-surface: 255 255 255;
--color-highlight: 17 17 17;
--color-gray-1: 249 249 252;
--color-gray-5: 243 243 248;
--color-gray-10: 229 229 235;
--color-gray-20: 209 209 215;
--color-gray-30: 199 199 205;
--color-gray-40: 174 174 179;
--color-gray-50: 142 142 148;
--color-gray-60: 99 99 103;
--color-gray-70: 72 72 75;
--color-gray-80: 58 58 59;
--color-gray-90: 44 44 48;
--color-gray-100: 24 24 27;
--color-primary-rgb: 0 102 255;
--color-primary-dark-rgb: 0 88 219;
--color-red-rgb: 255 13 0;
--color-red-dark-rgb: 230 11 0;
--color-orange-rgb: 255 149 0;
--color-orange-dark-rgb: 230 134 0;
--color-yellow-rgb: 255 204 0;
--color-yellow-dark-rgb: 230 184 0;
--color-green-rgb: 50 195 86;
--color-green-dark-rgb: 45 174 77;
--color-pink-rgb: 255 36 76;
--color-pink-dark-rgb: 235 0 63;
--color-indigo-rgb: 81 78 212;
--color-indigo-dark-rgb: 60 58 207;
--color-surface-rgb: 255 255 255;
--color-highlight-rgb: 17 17 17;
--color-gray-1-rgb: 249 249 252;
--color-gray-5-rgb: 243 243 248;
--color-gray-10-rgb: 229 229 235;
--color-gray-20-rgb: 209 209 215;
--color-gray-30-rgb: 199 199 205;
--color-gray-40-rgb: 174 174 179;
--color-gray-50-rgb: 142 142 148;
--color-gray-60-rgb: 99 99 103;
--color-gray-70-rgb: 72 72 75;
--color-gray-80-rgb: 58 58 59;
--color-gray-90-rgb: 44 44 48;
--color-gray-100-rgb: 24 24 27;
}
}
}