dunkirk.sh / pstream-ng
pstream is dead; long live pstream taciturnaxolotl.github.io/pstream-ng/
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

New theme

Ivan Evans bdc2e131 1a2e3ca9

+479 -405
+1 -1
src/assets/locales/da.json
··· 541 541 "gray": "Grå", 542 542 "red": "Rød", 543 543 "teal": "Blågrøn", 544 - "blck": "BLCK" 544 + "classic": "Classic" 545 545 }, 546 546 "title": "Udseende" 547 547 },
+1 -1
src/assets/locales/en.json
··· 565 565 "gray": "Gray", 566 566 "red": "Red", 567 567 "teal": "Teal", 568 - "blck": "BLCK" 568 + "classic": "Classic" 569 569 }, 570 570 "title": "Appearance" 571 571 },
+3 -3
src/pages/parts/settings/ThemePart.tsx
··· 31 31 key: "settings.appearance.themes.gray", 32 32 }, 33 33 { 34 - id: "blck", 35 - selector: "theme-blck", 36 - key: "settings.appearance.themes.blck", 34 + id: "classic", 35 + selector: "theme-classic", 36 + key: "settings.appearance.themes.classic", 37 37 }, 38 38 ]; 39 39
+2 -2
themes/all.ts
··· 2 2 import blue from "./list/blue"; 3 3 import red from "./list/red"; 4 4 import gray from "./list/gray"; 5 - import blck from "./list/blck"; 5 + import classic from "./list/classic"; 6 6 7 7 export const allThemes = [ 8 8 teal, 9 9 blue, 10 10 gray, 11 11 red, 12 - blck 12 + classic 13 13 ]
+129 -121
themes/default.ts
··· 1 1 const tokens = { 2 - black: "#000000", 3 - white: "#FFFFFF", 2 + black: { 3 + c50: "#000000", 4 + c75: "#030303", 5 + c80: "#080808", 6 + c100: "#0d0d0d", 7 + c125: "#141414", 8 + c150: "#1a1a1a", 9 + c200: "#262626", 10 + c250: "#333333" 11 + }, 12 + white: "#FFFFFF", // General white color 4 13 semantic: { 5 14 red: { 6 - c100: "#F46E6E", 7 - c200: "#E44F4F", 8 - c300: "#D74747", 9 - c400: "#B43434", 15 + c100: "#F46E6E", // Error text 16 + c200: "#E44F4F", // Video player scraping error 17 + c300: "#D74747", // Danger button 18 + c400: "#B43434", // Not currently used 10 19 }, 11 20 green: { 12 - c100: "#60D26A", 13 - c200: "#40B44B", 14 - c300: "#31A33C", 15 - c400: "#237A2B", 21 + c100: "#60D26A", // Success text 22 + c200: "#40B44B", // Video player scraping success 23 + c300: "#31A33C", // Not currently used 24 + c400: "#237A2B", // Not currently used 16 25 }, 17 26 silver: { 18 - c100: "#DEDEDE", 19 - c200: "#B6CAD7", 20 - c300: "#8EA3B0", 21 - c400: "#617A8A", 27 + c100: "#DEDEDE", // Primary button hover 28 + c200: "#B6CAD7", // Not currently used 29 + c300: "#8EA3B0", // Secondary button text 30 + c400: "#617A8A", // Main text in video player context 22 31 }, 23 32 yellow: { 24 - c100: "#FFF599", 25 - c200: "#FCEC61", 26 - c300: "#D8C947", 27 - c400: "#AFA349", 33 + c100: "#FFF599", // Best onboarding highlight 34 + c200: "#FCEC61", // Dropdown highlight hover 35 + c300: "#D8C947", // Not currently used 36 + c400: "#AFA349", // Dropdown highlight 28 37 }, 29 38 rose: { 30 - c100: "#DB3D61", 31 - c200: "#8A293B", 32 - c300: "#812435", 33 - c400: "#701B2B", 39 + c100: "#DB3D61", // Authentication error text 40 + c200: "#8A293B", // Danger button hover 41 + c300: "#812435", // Danger button 42 + c400: "#701B2B", // Not currently used 34 43 }, 35 44 }, 36 45 blue: { 37 - c50: "#ADADF5", 38 - c100: "#7979CC", 39 - c200: "#5D5DAE", 40 - c300: "#3B3B8C", 41 - c400: "#2A2A71", 42 - c500: "#1F1F50", 43 - c600: "#1B1B41", 44 - c700: "#171736", 45 - c800: "#101020", 46 - c900: "#0B0B13", 46 + c50: "#ccccd6", 47 + c100: "#a2a2a2", 48 + c200: "#868686", 49 + c300: "#646464", 50 + c400: "#4e4e4e", 51 + c500: "#383838", 52 + c600: "#2e2e2e", 53 + c700: "#272727", 54 + c800: "#181818", 55 + c900: "#0f0f0f" 47 56 }, 48 57 purple: { 49 - c50: "#D5AAFF", 50 - c100: "#C082FF", 51 - c200: "#A359EC", 52 - c300: "#8D44D6", 53 - c400: "#7831BF", 54 - c500: "#572887", 55 - c600: "#411F64", 56 - c700: "#31184A", 57 - c800: "#221134", 58 - c900: "#160B22", 58 + c50: "#aaafff", 59 + c100: "#8288fe", 60 + c200: "#5a62eb", 61 + c300: "#454cd4", 62 + c400: "#333abe", 63 + c500: "#292d86", 64 + c600: "#1f2363", 65 + c700: "#191b4a", 66 + c800: "#111334", // Lightbar 67 + c900: "#0b0d22" 59 68 }, 60 69 ash: { 61 - c50: "#7F8D9B", 62 - c100: "#5B6B7B", 63 - c200: "#445464", 64 - c300: "#2B3D4E", 65 - c400: "#203242", 66 - c500: "#1C2C3C", 67 - c600: "#172532", 68 - c700: "#131E29", 69 - c800: "#101820", 70 - c900: "#0C1216", 70 + c50: "#8d8d8d", 71 + c100: "#6b6b6b", 72 + c200: "#545454", 73 + c300: "#3c3c3c", 74 + c400: "#313131", 75 + c500: "#2c2c2c", 76 + c600: "#252525", 77 + c700: "#1e1e1e", 78 + c800: "#181818", 79 + c900: "#111111" 71 80 }, 72 81 shade: { 73 - c25: "#5d5db3", 74 - c50: "#676790", 75 - c100: "#52527A", 76 - c200: "#3F3F60", 77 - c300: "#32324F", 78 - c400: "#272741", 79 - c500: "#1E1E32", 80 - c600: "#171728", 81 - c700: "#131322", 82 - c800: "#0F0F1B", 83 - c900: "#0A0A12", 82 + c25: "#939393", // Media card hover accent 83 + c50: "#7c7c7c", 84 + c100: "#666666", 85 + c200: "#4f4f4f", 86 + c300: "#404040", 87 + c400: "#343434", 88 + c500: "#282828", 89 + c600: "#202020", 90 + c700: "#1a1a1a", 91 + c800: "#151515", 92 + c900: "#0e0e0e" 84 93 }, 85 94 }; 86 95 ··· 88 97 extend: { 89 98 colors: { 90 99 themePreview: { 91 - primary: tokens.blue.c200, 92 - secondary: tokens.shade.c50, 100 + primary: tokens.black.c80, 101 + secondary: tokens.black.c100, 93 102 ghost: tokens.white, 94 103 }, 95 104 96 105 // Branding 97 106 pill: { 98 - background: tokens.shade.c300, 99 - backgroundHover: tokens.shade.c200, 107 + background: tokens.black.c100, 108 + backgroundHover: tokens.black.c125, 100 109 highlight: tokens.blue.c200, 101 - 102 - activeBackground: tokens.shade.c300, 110 + activeBackground: tokens.shade.c700, 103 111 }, 104 112 105 113 // meta data for the theme itself ··· 110 118 111 119 // light bar 112 120 lightBar: { 113 - light: tokens.blue.c400, 121 + light: tokens.purple.c800, 114 122 }, 115 123 116 124 // Buttons 117 125 buttons: { 118 126 toggle: tokens.purple.c300, 119 - toggleDisabled: tokens.ash.c500, 127 + toggleDisabled: tokens.black.c200, 120 128 danger: tokens.semantic.rose.c300, 121 129 dangerHover: tokens.semantic.rose.c200, 122 130 123 - secondary: tokens.ash.c700, 131 + secondary: tokens.black.c100, 124 132 secondaryText: tokens.semantic.silver.c300, 125 - secondaryHover: tokens.ash.c700, 133 + secondaryHover: tokens.black.c150, 126 134 primary: tokens.white, 127 - primaryText: tokens.black, 135 + primaryText: tokens.black.c50, 128 136 primaryHover: tokens.semantic.silver.c100, 129 - purple: tokens.purple.c500, 137 + purple: tokens.purple.c600, 130 138 purpleHover: tokens.purple.c400, 131 - cancel: tokens.ash.c500, 132 - cancelHover: tokens.ash.c300, 139 + cancel: tokens.black.c100, 140 + cancelHover: tokens.black.c150 133 141 }, 134 142 135 143 // only used for body colors/textures 136 144 background: { 137 - main: tokens.shade.c900, 138 - secondary: tokens.shade.c600, 139 - secondaryHover: tokens.shade.c400, 140 - accentA: tokens.purple.c500, 141 - accentB: tokens.blue.c500, 145 + main: tokens.black.c75, 146 + secondary: tokens.black.c75, 147 + secondaryHover: tokens.black.c75, 148 + accentA: tokens.purple.c600, 149 + accentB: tokens.black.c100 142 150 }, 143 151 144 152 // Modals ··· 157 165 danger: tokens.semantic.red.c100, 158 166 success: tokens.semantic.green.c100, 159 167 link: tokens.purple.c100, 160 - linkHover: tokens.purple.c50, 168 + linkHover: tokens.purple.c50 161 169 }, 162 170 163 171 // search bar 164 172 search: { 165 - background: tokens.shade.c500, 166 - hoverBackground: tokens.shade.c600, 167 - focused: tokens.shade.c400, 168 - placeholder: tokens.shade.c100, 169 - icon: tokens.shade.c100, 173 + background: tokens.black.c100, 174 + hoverBackground: tokens.shade.c900, 175 + focused: tokens.black.c125, 176 + placeholder: tokens.shade.c200, 177 + icon: tokens.shade.c500, 170 178 text: tokens.white, 171 179 }, 172 180 173 181 // media cards 174 182 mediaCard: { 175 - hoverBackground: tokens.shade.c600, 176 - hoverAccent: tokens.shade.c25, 177 - hoverShadow: tokens.shade.c900, 178 - shadow: tokens.shade.c700, 183 + hoverBackground: tokens.shade.c900, 184 + hoverAccent: tokens.black.c250, 185 + hoverShadow: tokens.black.c50, 186 + shadow: tokens.shade.c800, 179 187 barColor: tokens.ash.c200, 180 188 barFillColor: tokens.purple.c100, 181 189 badge: tokens.shade.c700, 182 - badgeText: tokens.ash.c100, 190 + badgeText: tokens.ash.c100 183 191 }, 184 192 185 193 // Large card 186 194 largeCard: { 187 - background: tokens.shade.c600, 195 + background: tokens.black.c100, 188 196 icon: tokens.purple.c400, 189 197 }, 190 198 191 199 // Dropdown 192 200 dropdown: { 193 - background: tokens.shade.c600, 194 - altBackground: tokens.shade.c700, 195 - hoverBackground: tokens.shade.c500, 201 + background: tokens.black.c100, 202 + altBackground: tokens.black.c80, 203 + hoverBackground: tokens.black.c150, 196 204 highlight: tokens.semantic.yellow.c400, 197 205 highlightHover: tokens.semantic.yellow.c200, 198 206 text: tokens.shade.c50, 199 207 secondary: tokens.shade.c100, 200 208 border: tokens.shade.c400, 201 - contentBackground: tokens.shade.c500, 209 + contentBackground: tokens.black.c50 202 210 }, 203 211 204 212 // Passphrase 205 213 authentication: { 206 214 border: tokens.shade.c300, 207 - inputBg: tokens.shade.c600, 208 - inputBgHover: tokens.shade.c500, 215 + inputBg: tokens.black.c100, 216 + inputBgHover: tokens.black.c150, 209 217 wordBackground: tokens.shade.c500, 210 218 copyText: tokens.shade.c100, 211 219 copyTextHover: tokens.ash.c50, ··· 215 223 // Settings page 216 224 settings: { 217 225 sidebar: { 218 - activeLink: tokens.shade.c600, 226 + activeLink: tokens.black.c100, 219 227 badge: tokens.shade.c900, 220 228 221 229 type: { 222 230 secondary: tokens.shade.c200, 223 231 inactive: tokens.shade.c50, 224 - icon: tokens.shade.c50, 232 + icon: tokens.black.c200, 225 233 iconActivated: tokens.purple.c200, 226 - activated: tokens.purple.c50, 234 + activated: tokens.purple.c100 227 235 }, 228 236 }, 229 237 230 238 card: { 231 - border: tokens.shade.c400, 232 - background: tokens.shade.c400, 233 - altBackground: tokens.shade.c400, 239 + border: tokens.shade.c700, 240 + background: tokens.black.c100, 241 + altBackground: tokens.black.c100 234 242 }, 235 243 236 244 saveBar: { 237 - background: tokens.shade.c800, 245 + background: tokens.black.c50 238 246 }, 239 247 }, 240 248 241 249 // Utilities 242 250 utils: { 243 - divider: tokens.ash.c300, 251 + divider: tokens.ash.c300 244 252 }, 245 253 246 254 // Onboarding ··· 258 266 259 267 // Error page 260 268 errors: { 261 - card: tokens.shade.c800, 269 + card: tokens.black.c75, 262 270 border: tokens.ash.c500, 263 271 264 272 type: { ··· 268 276 269 277 // About page 270 278 about: { 271 - circle: tokens.ash.c500, 272 - circleText: tokens.ash.c50, 279 + circle: tokens.black.c100, 280 + circleText: tokens.ash.c50 273 281 }, 274 282 275 283 // About page 276 284 editBadge: { 277 285 bg: tokens.ash.c500, 278 286 bgHover: tokens.ash.c400, 279 - text: tokens.ash.c50, 287 + text: tokens.ash.c50 280 288 }, 281 289 282 290 progress: { ··· 287 295 288 296 // video player 289 297 video: { 290 - buttonBackground: tokens.ash.c200, 298 + buttonBackground: tokens.ash.c600, 291 299 292 300 autoPlay: { 293 - background: tokens.ash.c700, 294 - hover: tokens.ash.c500, 301 + background: tokens.ash.c800, 302 + hover: tokens.ash.c600, 295 303 }, 296 304 297 305 scraping: { 298 - card: tokens.shade.c700, 306 + card: tokens.black.c50, 299 307 error: tokens.semantic.red.c200, 300 308 success: tokens.semantic.green.c200, 301 309 loading: tokens.purple.c200, 302 - noresult: tokens.ash.c100, 310 + noresult: tokens.black.c200 303 311 }, 304 312 305 313 audio: { ··· 307 315 }, 308 316 309 317 context: { 310 - background: tokens.ash.c900, 318 + background: tokens.black.c50, 311 319 light: tokens.shade.c50, 312 320 border: tokens.ash.c600, 313 321 hoverColor: tokens.ash.c600, 314 322 buttonFocus: tokens.ash.c500, 315 323 flagBg: tokens.ash.c500, 316 - inputBg: tokens.ash.c600, 324 + inputBg: tokens.black.c100, 317 325 buttonOverInputHover: tokens.ash.c500, 318 326 inputPlaceholder: tokens.ash.c200, 319 327 cardBorder: tokens.ash.c700, 320 - slider: tokens.ash.c50, 328 + slider: tokens.black.c200, 321 329 sliderFilled: tokens.purple.c200, 322 330 error: tokens.semantic.red.c200, 323 331 ··· 329 337 closeHover: tokens.ash.c800, 330 338 331 339 type: { 332 - main: tokens.semantic.silver.c400, 340 + main: tokens.semantic.silver.c300, 333 341 secondary: tokens.ash.c200, 334 342 accent: tokens.purple.c200, 335 343 },
-277
themes/list/blck.ts
··· 1 - import { createTheme } from "../types"; 2 - 3 - const tokens = { 4 - white: "#FFFFFF", 5 - black: { 6 - c50: "#000000", 7 - c75: "#030303", 8 - c80: "#080808", 9 - c100: "#0d0d0d", 10 - c125: "#141414", 11 - c150: "#1a1a1a", 12 - c200: "#262626", 13 - c250: "#333333" 14 - }, 15 - semantic: { 16 - silver: { 17 - c100: "#DEDEDE", 18 - c200: "#B6CAD7", 19 - c300: "#8EA3B0", 20 - c400: "#617A8A", 21 - }, 22 - }, 23 - purple: { 24 - c50: "#aaafff", 25 - c100: "#8288fe", 26 - c200: "#5a62eb", 27 - c300: "#454cd4", 28 - c400: "#333abe", 29 - c500: "#292d86", 30 - c600: "#1f2363", 31 - c700: "#191b4a", 32 - c800: "#111334", 33 - c900: "#0b0d22" 34 - }, 35 - shade: { 36 - c50: "#7c7c7c", 37 - c100: "#666666", 38 - c200: "#4f4f4f", 39 - c300: "#404040", 40 - c400: "#343434", 41 - c500: "#282828", 42 - c600: "#202020", 43 - c700: "#1a1a1a", 44 - c800: "#151515", 45 - c900: "#0e0e0e" 46 - }, 47 - ash: { 48 - c50: "#8d8d8d", 49 - c100: "#6b6b6b", 50 - c200: "#545454", 51 - c300: "#3c3c3c", 52 - c400: "#313131", 53 - c500: "#2c2c2c", 54 - c600: "#252525", 55 - c700: "#1e1e1e", 56 - c800: "#181818", 57 - c900: "#111111" 58 - }, 59 - blue: { 60 - c50: "#ccccd6", 61 - c100: "#a2a2a2", 62 - c200: "#868686", 63 - c300: "#646464", 64 - c400: "#4e4e4e", 65 - c500: "#383838", 66 - c600: "#2e2e2e", 67 - c700: "#272727", 68 - c800: "#181818", 69 - c900: "#0f0f0f" 70 - } 71 - } 72 - 73 - export default createTheme({ 74 - name: "blck", 75 - extend: { 76 - colors: { 77 - themePreview: { 78 - primary: tokens.black.c80, 79 - secondary: tokens.black.c100 80 - }, 81 - 82 - pill: { 83 - background: tokens.black.c100, 84 - backgroundHover: tokens.black.c125, 85 - highlight: tokens.blue.c200, 86 - activeBackground: tokens.shade.c700, 87 - }, 88 - 89 - global: { 90 - accentA: tokens.blue.c200, 91 - accentB: tokens.blue.c300 92 - }, 93 - 94 - lightBar: { 95 - light: tokens.shade.c900, 96 - }, 97 - 98 - buttons: { 99 - toggle: tokens.purple.c300, 100 - toggleDisabled: tokens.black.c200, 101 - secondary: tokens.black.c100, 102 - secondaryHover: tokens.black.c150, 103 - purple: tokens.purple.c600, 104 - purpleHover: tokens.purple.c400, 105 - cancel: tokens.black.c100, 106 - cancelHover: tokens.black.c150 107 - }, 108 - 109 - background: { 110 - main: tokens.black.c75, 111 - secondary: tokens.black.c75, 112 - secondaryHover: tokens.black.c75, 113 - accentA: tokens.purple.c600, 114 - accentB: tokens.black.c100 115 - }, 116 - 117 - modal: { 118 - background: tokens.shade.c800, 119 - }, 120 - 121 - type: { 122 - logo: tokens.purple.c100, 123 - text: tokens.shade.c50, 124 - dimmed: tokens.shade.c50, 125 - divider: tokens.ash.c500, 126 - secondary: tokens.ash.c100, 127 - link: tokens.purple.c100, 128 - linkHover: tokens.purple.c50 129 - }, 130 - 131 - search: { 132 - background: tokens.black.c100, 133 - hoverBackground: tokens.shade.c900, 134 - focused: tokens.black.c125, 135 - placeholder: tokens.shade.c200, 136 - icon: tokens.shade.c500 137 - }, 138 - 139 - mediaCard: { 140 - hoverBackground: tokens.shade.c900, 141 - hoverAccent: tokens.black.c250, 142 - hoverShadow: tokens.black.c50, 143 - shadow: tokens.shade.c800, 144 - barColor: tokens.ash.c200, 145 - barFillColor: tokens.purple.c100, 146 - badge: tokens.shade.c700, 147 - badgeText: tokens.ash.c100 148 - }, 149 - 150 - largeCard: { 151 - background: tokens.black.c100, 152 - icon: tokens.purple.c400 153 - }, 154 - 155 - dropdown: { 156 - background: tokens.black.c100, 157 - altBackground: tokens.black.c80, 158 - hoverBackground: tokens.black.c150, 159 - text: tokens.shade.c50, 160 - secondary: tokens.shade.c100, 161 - border: tokens.shade.c400, 162 - contentBackground: tokens.black.c50 163 - }, 164 - 165 - authentication: { 166 - border: tokens.shade.c300, 167 - inputBg: tokens.black.c100, 168 - inputBgHover: tokens.black.c150, 169 - wordBackground: tokens.shade.c500, 170 - copyText: tokens.shade.c100, 171 - copyTextHover: tokens.ash.c50 172 - }, 173 - 174 - settings: { 175 - sidebar: { 176 - activeLink: tokens.black.c100, 177 - badge: tokens.shade.c900, 178 - 179 - type: { 180 - secondary: tokens.shade.c200, 181 - inactive: tokens.shade.c50, 182 - icon: tokens.black.c200, 183 - iconActivated: tokens.purple.c200, 184 - activated: tokens.purple.c100 185 - } 186 - }, 187 - 188 - card: { 189 - border: tokens.shade.c700, 190 - background: tokens.black.c100, 191 - altBackground: tokens.black.c100 192 - }, 193 - 194 - saveBar: { 195 - background: tokens.black.c50 196 - } 197 - }, 198 - 199 - utils: { 200 - divider: tokens.ash.c300 201 - }, 202 - 203 - errors: { 204 - card: tokens.black.c75, 205 - border: tokens.ash.c500, 206 - 207 - type: { 208 - secondary: tokens.ash.c100 209 - } 210 - }, 211 - 212 - about: { 213 - circle: tokens.black.c100, 214 - circleText: tokens.ash.c50 215 - }, 216 - 217 - editBadge: { 218 - bg: tokens.ash.c500, 219 - bgHover: tokens.ash.c400, 220 - text: tokens.ash.c50 221 - }, 222 - 223 - progress: { 224 - background: tokens.ash.c50, 225 - preloaded: tokens.ash.c50, 226 - filled: tokens.purple.c200 227 - }, 228 - 229 - video: { 230 - buttonBackground: tokens.ash.c600, 231 - 232 - autoPlay: { 233 - background: tokens.ash.c800, 234 - hover: tokens.ash.c600 235 - }, 236 - 237 - scraping: { 238 - card: tokens.black.c50, 239 - loading: tokens.purple.c200, 240 - noresult: tokens.black.c200 241 - }, 242 - 243 - audio: { 244 - set: tokens.purple.c200 245 - }, 246 - 247 - context: { 248 - background: tokens.black.c50, 249 - light: tokens.shade.c50, 250 - border: tokens.ash.c600, 251 - hoverColor: tokens.ash.c600, 252 - buttonFocus: tokens.ash.c500, 253 - flagBg: tokens.ash.c500, 254 - inputBg: tokens.black.c100, 255 - buttonOverInputHover: tokens.ash.c500, 256 - inputPlaceholder: tokens.ash.c200, 257 - cardBorder: tokens.ash.c700, 258 - slider: tokens.black.c200, 259 - sliderFilled: tokens.purple.c200, 260 - 261 - buttons: { 262 - list: tokens.ash.c700, 263 - active: tokens.ash.c900 264 - }, 265 - 266 - closeHover: tokens.ash.c800, 267 - 268 - type: { 269 - secondary: tokens.ash.c200, 270 - accent: tokens.purple.c200, 271 - main: tokens.semantic.silver.c300 272 - } 273 - } 274 - } 275 - } 276 - } 277 - });
+343
themes/list/classic.ts
··· 1 + import { createTheme } from "../types"; 2 + 3 + const tokens = { 4 + black: "#000000", // General black color 5 + white: "#FFFFFF", // General white color 6 + semantic: { 7 + red: { 8 + c100: "#F46E6E", // Error text 9 + c200: "#E44F4F", // Video player scraping error 10 + c300: "#D74747", // Danger button 11 + c400: "#B43434", // Not currently used 12 + }, 13 + green: { 14 + c100: "#60D26A", // Success text 15 + c200: "#40B44B", // Video player scraping success 16 + c300: "#31A33C", // Not currently used 17 + c400: "#237A2B", // Not currently used 18 + }, 19 + silver: { 20 + c100: "#DEDEDE", // Primary button hover 21 + c200: "#B6CAD7", // Not currently used 22 + c300: "#8EA3B0", // Secondary button text 23 + c400: "#617A8A", // Main text in video player context 24 + }, 25 + yellow: { 26 + c100: "#FFF599", // Best onboarding highlight 27 + c200: "#FCEC61", // Dropdown highlight hover 28 + c300: "#D8C947", // Not currently used 29 + c400: "#AFA349", // Dropdown highlight 30 + }, 31 + rose: { 32 + c100: "#DB3D61", // Authentication error text 33 + c200: "#8A293B", // Danger button hover 34 + c300: "#812435", // Danger button 35 + c400: "#701B2B", // Not currently used 36 + }, 37 + }, 38 + blue: { 39 + c50: "#ADADF5", // Not currently used 40 + c100: "#7979CC", // Not currently used 41 + c200: "#5D5DAE", // Theme primary color, pill highlight, global accent A 42 + c300: "#3B3B8C", // Global accent B 43 + c400: "#2A2A71", // Light bar color 44 + c500: "#1F1F50", // Background accent B 45 + c600: "#1B1B41", // Not currently used 46 + c700: "#171736", // Not currently used 47 + c800: "#101020", // Not currently used 48 + c900: "#0B0B13", // Not currently used 49 + }, 50 + purple: { 51 + c50: "#D5AAFF", // Link hover, settings tabs titles/text 52 + c100: "#C082FF", // Link, logo text, video player audio set 53 + c200: "#A359EC", // Progress filled, video player scraping loading, video player context accent 54 + c300: "#8D44D6", // Toggle button, onboarding bar filled 55 + c400: "#7831BF", // Large card icon 56 + c500: "#572887", // Background accent A 57 + c600: "#411F64", // Not currently used 58 + c700: "#31184A", // Not currently used 59 + c800: "#221134", // Not currently used 60 + c900: "#160B22", // Not currently used 61 + }, 62 + ash: { 63 + c50: "#7F8D9B", // Authentication copy text hover, progress background, progress preloaded 64 + c100: "#5B6B7B", // Secondary text, badge text, video player scraping no result 65 + c200: "#445464", // Media card bar color, video player button background 66 + c300: "#2B3D4E", // Cancel button hover, utils divider 67 + c400: "#203242", // Card border and background, dropdown border, onboarding bar, edit badge hover, sidebar type 68 + c500: "#1C2C3C", // Toggle disabled, cancel button, modal background, search hover background, media card shadow, settings save bar, errors card, about circle, edit badge background, video player button focus, video player flag background, video player input background, video player button over input hover 69 + c600: "#172532", // Background secondary, dropdown alt background, dropdown border, onboarding card border 70 + c700: "#131E29", // Secondary button, media card badge, onboarding card hover, video player context card border, video player context buttons list, video player close hover 71 + c800: "#101820", // Background main, settings sidebar badge, errors border 72 + c900: "#0C1216", // Media card hover shadow, settings sidebar active link, video player context background 73 + }, 74 + shade: { 75 + c25: "#5d5db3", // Media card hover accent 76 + c50: "#676790", // Theme secondary color, text, dimmed text 77 + c100: "#52527A", // Search placeholder and icon, dropdown secondary text 78 + c200: "#3F3F60", // Pill background hover, onboarding divider 79 + c300: "#32324F", // Pill background, authentication border, onboarding card 80 + c400: "#272741", // Background secondary hover, dropdown border, onboarding bar, onboarding divider 81 + c500: "#1E1E32", // Search background, search focus, dropdown hover background, dropdown content background, authentication input background hover, authentication word background 82 + c600: "#171728", // Modal background, dropdown background, onboarding card border 83 + c700: "#131322", // Dropdown alt background 84 + c800: "#0F0F1B", // Background main, settings save bar, onboarding card 85 + c900: "#0A0A12", // Media card hover shadow 86 + }, 87 + } 88 + 89 + export default createTheme({ 90 + name: "classic", 91 + extend: { 92 + colors: { 93 + themePreview: { 94 + primary: tokens.blue.c200, 95 + secondary: tokens.shade.c50, 96 + ghost: tokens.white, 97 + }, 98 + 99 + // Branding 100 + pill: { 101 + background: tokens.shade.c300, 102 + backgroundHover: tokens.shade.c200, 103 + highlight: tokens.blue.c200, 104 + 105 + activeBackground: tokens.shade.c300, 106 + }, 107 + 108 + // meta data for the theme itself 109 + global: { 110 + accentA: tokens.blue.c200, 111 + accentB: tokens.blue.c300, 112 + }, 113 + 114 + // light bar 115 + lightBar: { 116 + light: tokens.blue.c400, 117 + }, 118 + 119 + // Buttons 120 + buttons: { 121 + toggle: tokens.purple.c300, 122 + toggleDisabled: tokens.ash.c500, 123 + danger: tokens.semantic.rose.c300, 124 + dangerHover: tokens.semantic.rose.c200, 125 + 126 + secondary: tokens.ash.c700, 127 + secondaryText: tokens.semantic.silver.c300, 128 + secondaryHover: tokens.ash.c700, 129 + primary: tokens.white, 130 + primaryText: tokens.black, 131 + primaryHover: tokens.semantic.silver.c100, 132 + purple: tokens.purple.c500, 133 + purpleHover: tokens.purple.c400, 134 + cancel: tokens.ash.c500, 135 + cancelHover: tokens.ash.c300, 136 + }, 137 + 138 + // only used for body colors/textures 139 + background: { 140 + main: tokens.shade.c900, 141 + secondary: tokens.shade.c600, 142 + secondaryHover: tokens.shade.c400, 143 + accentA: tokens.purple.c500, 144 + accentB: tokens.blue.c500, 145 + }, 146 + 147 + // Modals 148 + modal: { 149 + background: tokens.shade.c800, 150 + }, 151 + 152 + // typography 153 + type: { 154 + logo: tokens.purple.c100, 155 + emphasis: tokens.white, 156 + text: tokens.shade.c50, 157 + dimmed: tokens.shade.c50, 158 + divider: tokens.ash.c500, 159 + secondary: tokens.ash.c100, 160 + danger: tokens.semantic.red.c100, 161 + success: tokens.semantic.green.c100, 162 + link: tokens.purple.c100, 163 + linkHover: tokens.purple.c50, 164 + }, 165 + 166 + // search bar 167 + search: { 168 + background: tokens.shade.c500, 169 + hoverBackground: tokens.shade.c600, 170 + focused: tokens.shade.c400, 171 + placeholder: tokens.shade.c100, 172 + icon: tokens.shade.c100, 173 + text: tokens.white, 174 + }, 175 + 176 + // media cards 177 + mediaCard: { 178 + hoverBackground: tokens.shade.c600, 179 + hoverAccent: tokens.shade.c25, 180 + hoverShadow: tokens.shade.c900, 181 + shadow: tokens.shade.c700, 182 + barColor: tokens.ash.c200, 183 + barFillColor: tokens.purple.c100, 184 + badge: tokens.shade.c700, 185 + badgeText: tokens.ash.c100, 186 + }, 187 + 188 + // Large card 189 + largeCard: { 190 + background: tokens.shade.c600, 191 + icon: tokens.purple.c400, 192 + }, 193 + 194 + // Dropdown 195 + dropdown: { 196 + background: tokens.shade.c600, 197 + altBackground: tokens.shade.c700, 198 + hoverBackground: tokens.shade.c500, 199 + highlight: tokens.semantic.yellow.c400, 200 + highlightHover: tokens.semantic.yellow.c200, 201 + text: tokens.shade.c50, 202 + secondary: tokens.shade.c100, 203 + border: tokens.shade.c400, 204 + contentBackground: tokens.shade.c500, 205 + }, 206 + 207 + // Passphrase 208 + authentication: { 209 + border: tokens.shade.c300, 210 + inputBg: tokens.shade.c600, 211 + inputBgHover: tokens.shade.c500, 212 + wordBackground: tokens.shade.c500, 213 + copyText: tokens.shade.c100, 214 + copyTextHover: tokens.ash.c50, 215 + errorText: tokens.semantic.rose.c100, 216 + }, 217 + 218 + // Settings page 219 + settings: { 220 + sidebar: { 221 + activeLink: tokens.shade.c600, 222 + badge: tokens.shade.c900, 223 + 224 + type: { 225 + secondary: tokens.shade.c200, 226 + inactive: tokens.shade.c50, 227 + icon: tokens.shade.c50, 228 + iconActivated: tokens.purple.c200, 229 + activated: tokens.purple.c50, 230 + }, 231 + }, 232 + 233 + card: { 234 + border: tokens.shade.c400, 235 + background: tokens.shade.c400, 236 + altBackground: tokens.shade.c400, 237 + }, 238 + 239 + saveBar: { 240 + background: tokens.shade.c800, 241 + }, 242 + }, 243 + 244 + // Utilities 245 + utils: { 246 + divider: tokens.ash.c300, 247 + }, 248 + 249 + // Onboarding 250 + onboarding: { 251 + bar: tokens.shade.c400, 252 + barFilled: tokens.purple.c300, 253 + divider: tokens.shade.c200, 254 + card: tokens.shade.c800, 255 + cardHover: tokens.shade.c700, 256 + border: tokens.shade.c600, 257 + good: tokens.purple.c100, 258 + best: tokens.semantic.yellow.c100, 259 + link: tokens.purple.c100, 260 + }, 261 + 262 + // Error page 263 + errors: { 264 + card: tokens.shade.c800, 265 + border: tokens.ash.c500, 266 + 267 + type: { 268 + secondary: tokens.ash.c100, 269 + }, 270 + }, 271 + 272 + // About page 273 + about: { 274 + circle: tokens.ash.c500, 275 + circleText: tokens.ash.c50, 276 + }, 277 + 278 + // About page 279 + editBadge: { 280 + bg: tokens.ash.c500, 281 + bgHover: tokens.ash.c400, 282 + text: tokens.ash.c50, 283 + }, 284 + 285 + progress: { 286 + background: tokens.ash.c50, 287 + preloaded: tokens.ash.c50, 288 + filled: tokens.purple.c200, 289 + }, 290 + 291 + // video player 292 + video: { 293 + buttonBackground: tokens.ash.c200, 294 + 295 + autoPlay: { 296 + background: tokens.ash.c700, 297 + hover: tokens.ash.c500, 298 + }, 299 + 300 + scraping: { 301 + card: tokens.shade.c700, 302 + error: tokens.semantic.red.c200, 303 + success: tokens.semantic.green.c200, 304 + loading: tokens.purple.c200, 305 + noresult: tokens.ash.c100, 306 + }, 307 + 308 + audio: { 309 + set: tokens.purple.c200, 310 + }, 311 + 312 + context: { 313 + background: tokens.ash.c900, 314 + light: tokens.shade.c50, 315 + border: tokens.ash.c600, 316 + hoverColor: tokens.ash.c600, 317 + buttonFocus: tokens.ash.c500, 318 + flagBg: tokens.ash.c500, 319 + inputBg: tokens.ash.c600, 320 + buttonOverInputHover: tokens.ash.c500, 321 + inputPlaceholder: tokens.ash.c200, 322 + cardBorder: tokens.ash.c700, 323 + slider: tokens.ash.c50, 324 + sliderFilled: tokens.purple.c200, 325 + error: tokens.semantic.red.c200, 326 + 327 + buttons: { 328 + list: tokens.ash.c700, 329 + active: tokens.ash.c900, 330 + }, 331 + 332 + closeHover: tokens.ash.c800, 333 + 334 + type: { 335 + main: tokens.semantic.silver.c400, 336 + secondary: tokens.ash.c200, 337 + accent: tokens.purple.c200, 338 + }, 339 + }, 340 + }, 341 + }, 342 + }, 343 + })