8142176f84
* Remove --medium-border variable * Implement color palette using Sass maps I hand-picked the gray tones, the other colors are from the Tailwind CSS v3 palette. Significant changes: - light theme is brighter - dark theme is darker - borders are softer I also deleted some platform- and night-mode-specific code. * Use custom colors for note view switch * Use same placeholder color for all inputs * Skew color palette for more dark values by removing gray[3], which wasn't used anywhere. Slight adjustments were made to the darker tones. * Adjust frame- window- and border colors * Give deck browser entries --frame-bg as background color * Define styling for QComboBox and QLineEdit globally * Experiment with CSS filter for inline-colors Inside darker inputs, some colors like dark blue will be hard to read, so we could try to improve text-color contrast with global adjustments depending on the theme. * Use different map structure for _vars.scss after @hgiesel's idea: https://github.com/ankitects/anki/pull/2016#discussion_r947087871 * Move custom QLineEdit styles out of searchbar.py * Merge branch 'main' into color-palette * Revert QComboBox stylesheet override * Align gray color palette more with macOS * Adjust light theme * Use --slightly-grey-text for options tab color * Replace gray tones with more neutral values * Improve categorization of global colors by renaming almost all of them and sorting them into separate maps. * Saturate highlight-bg in light theme * Tweak gray tones * Adjust box-shadow of EditingArea to make fields look inset * Add Sass functions to access color palette and semantic variables in response to https://github.com/ankitects/anki/pull/2016#issuecomment-1220571076 * Showcase use of access functions in several locations @hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."? * Fix focus box shadow transition and remove default shadow for a cleaner look I couldn't quite get the inset look the way I wanted, because inset box-shadows do not respect the border radius, therefore causing aliasing. * Tweak light theme border and shadow colors * Add functions and colors to base_lib * Add vars_lib as dependency to base_lib and button_mixins_lib * Improve uses of default-themed variables * Use old --frame-bg color and use darker tone for canvas-default * Return CSS var by default and add palette-of function for raw value * Showcase use of palette-of function The #{...} syntax is required only because the use cases are CSS var definitions. In other cases a simple palette-of(keyword, theme) would suffice. * Light theme: decrease brightness of canvas-default and adjust fg-default * Use canvas-inset variable for switch knob * Adjust light theme * Add back box-shadow to EditingArea * Light theme: darken background and flatten transition also set hue and saturation of gray-8 to 0 (like all the other grays). * Reduce flag colors to single default value * Tweak card/note accent colors * Experiment with inset look for fields again Is this too dark in night mode? It's the same color used for all other text inputs. * Dark theme: make border-default one shade darker * Tweak inset shadow color * Dark theme: make border-faint darker than canvas-default meaning two shades darker than it currently was. * Fix PlainTextInput not expanding * Dark theme: use less saturated flag colors * Adjust gray tones * Fix nested variables not getting extracted correctly * Rename canvas-outset to canvas-elevated * Light theme: darken canvas-default * Make canvas-elevated a bit darker * Rename variables and use them in various components * Refactor button mixins * Remove fusion vars from Anki * Adjust button gradients * Refactor button mixins * Fix deck browser table td background color * Use color function in buttons.scss * Rework QTabWidget stylesheet * Fix crash on browser open * Perfect QTableView header * Fix bottom toolbar button gradient * Fix focus outline of bottom toolbar buttons * Fix custom webview scrollbar * Fix uses of vars in various webviews The command @use vars as * lead to repeated inclusion of the CSS vars. * Enable primary button color with mixin * Run prettier * Fix Python code style issues * Tweak colors * Lighten scrollbar shades in light theme * Fix code style issues caused by merge * Fix harsh border color in editor caused by leftover --medium-border variables, probably introduced with a merge commit. * Compile Sass before extracting Python colors/props This means the Python side doesn't need to worry about the map structure and Sass functions, just copy the output CSS values. * Desaturate primary button colors by 10% * Convert accidentally capitalized variable names to lowercase * Simplify color definitions with qcolor function * Remove default border-focus variable * Remove redundant colon * Apply custom scrollbar CSS only on Windows and Linux * Make border-subtle color brighter than background in dark theme * Make border-subtle color a shade brighter in light theme * Use border-subtle for NoteEditor and EditorToolbar border * Small patches
214 lines
4.0 KiB
SCSS
214 lines
4.0 KiB
SCSS
/* Copyright: Ankitects Pty Ltd and contributors
|
|
* License: GNU AGPL, version 3 or later, http://www.gnu.org/licenses/agpl.html
|
|
*
|
|
* Anki Color Palette
|
|
* custom gray, rest from Tailwind CSS v3 palette
|
|
* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
|
|
|
|
$colors: (
|
|
lightgray: (
|
|
0: #fcfcfc,
|
|
1: #fafafa,
|
|
2: #f5f5f5,
|
|
3: #eeeeee,
|
|
4: #e4e4e4,
|
|
5: #d6d6d6,
|
|
6: #c4c4c4,
|
|
7: #afafaf,
|
|
8: #999999,
|
|
9: #858585,
|
|
),
|
|
darkgray: (
|
|
0: #737373,
|
|
1: #636363,
|
|
2: #545454,
|
|
3: #454545,
|
|
4: #363636,
|
|
5: #2c2c2c,
|
|
6: #252525,
|
|
7: #1f1f1f,
|
|
8: #141414,
|
|
9: #020202,
|
|
),
|
|
red: (
|
|
0: #fef2f2,
|
|
1: #fee2e2,
|
|
2: #fecaca,
|
|
3: #fca5a5,
|
|
4: #f87171,
|
|
5: #ef4444,
|
|
6: #dc2626,
|
|
7: #b91c1c,
|
|
8: #991b1b,
|
|
9: #7f1d1d,
|
|
),
|
|
orange: (
|
|
0: #fff7ed,
|
|
1: #ffedd5,
|
|
2: #fed7aa,
|
|
3: #fdba74,
|
|
4: #fb923c,
|
|
5: #f97316,
|
|
6: #ea580c,
|
|
7: #c2410c,
|
|
8: #9a3412,
|
|
9: #7c2d12,
|
|
),
|
|
amber: (
|
|
0: #fffbeb,
|
|
1: #fef3c7,
|
|
2: #fde68a,
|
|
3: #fcd34d,
|
|
4: #fbbf24,
|
|
5: #f59e0b,
|
|
6: #d97706,
|
|
7: #b45309,
|
|
8: #92400e,
|
|
9: #78350f,
|
|
),
|
|
yellow: (
|
|
0: #fefce8,
|
|
1: #fef9c3,
|
|
2: #fef08a,
|
|
3: #fde047,
|
|
4: #facc15,
|
|
5: #eab308,
|
|
6: #ca8a04,
|
|
7: #a16207,
|
|
8: #854d0e,
|
|
9: #713f12,
|
|
),
|
|
lime: (
|
|
0: #f7fee7,
|
|
1: #ecfccb,
|
|
2: #d9f99d,
|
|
3: #bef264,
|
|
4: #a3e635,
|
|
5: #84cc16,
|
|
6: #65a30d,
|
|
7: #4d7c0f,
|
|
8: #3f6212,
|
|
9: #365314,
|
|
),
|
|
green: (
|
|
0: #f0fdf4,
|
|
1: #dcfce7,
|
|
2: #bbf7d0,
|
|
3: #86efac,
|
|
4: #4ade80,
|
|
5: #22c55e,
|
|
6: #16a34a,
|
|
7: #15803d,
|
|
8: #166534,
|
|
9: #14532d,
|
|
),
|
|
teal: (
|
|
0: #f0fdfa,
|
|
1: #ccfbf1,
|
|
2: #99f6e4,
|
|
3: #5eead4,
|
|
4: #2dd4bf,
|
|
5: #14b8a6,
|
|
6: #0d9488,
|
|
7: #0f766e,
|
|
8: #115e59,
|
|
9: #134e4a,
|
|
),
|
|
cyan: (
|
|
0: #ecfeff,
|
|
1: #cffafe,
|
|
2: #a5f3fc,
|
|
3: #67e8f9,
|
|
4: #22d3ee,
|
|
5: #06b6d4,
|
|
6: #0891b2,
|
|
7: #0e7490,
|
|
8: #155e75,
|
|
9: #164e63,
|
|
),
|
|
sky: (
|
|
0: #f0f9ff,
|
|
1: #e0f2fe,
|
|
2: #bae6fd,
|
|
3: #7dd3fc,
|
|
4: #38bdf8,
|
|
5: #0ea5e9,
|
|
6: #0284c7,
|
|
7: #0369a1,
|
|
8: #075985,
|
|
9: #0c4a6e,
|
|
),
|
|
blue: (
|
|
0: #eff6ff,
|
|
1: #dbeafe,
|
|
2: #bfdbfe,
|
|
3: #93c5fd,
|
|
4: #60a5fa,
|
|
5: #3b82f6,
|
|
6: #2563eb,
|
|
7: #1d4ed8,
|
|
8: #1e40af,
|
|
9: #1e3a8a,
|
|
),
|
|
indigo: (
|
|
0: #eef2ff,
|
|
1: #e0e7ff,
|
|
2: #c7d2fe,
|
|
3: #a5b4fc,
|
|
4: #818cf8,
|
|
5: #6366f1,
|
|
6: #4f46e5,
|
|
7: #4338ca,
|
|
8: #3730a3,
|
|
9: #312e81,
|
|
),
|
|
violet: (
|
|
0: #f5f3ff,
|
|
1: #ede9fe,
|
|
2: #ddd6fe,
|
|
3: #c4b5fd,
|
|
4: #a78bfa,
|
|
5: #8b5cf6,
|
|
6: #7c3aed,
|
|
7: #6d28d9,
|
|
8: #5b21b6,
|
|
9: #4c1d95,
|
|
),
|
|
purple: (
|
|
0: #faf5ff,
|
|
1: #f3e8ff,
|
|
2: #e9d5ff,
|
|
3: #d8b4fe,
|
|
4: #c084fc,
|
|
5: #a855f7,
|
|
6: #9333ea,
|
|
7: #7e22ce,
|
|
8: #6b21a8,
|
|
9: #581c87,
|
|
),
|
|
fuchsia: (
|
|
0: #fdf4ff,
|
|
1: #fae8ff,
|
|
2: #f5d0fe,
|
|
3: #f0abfc,
|
|
4: #e879f9,
|
|
5: #d946ef,
|
|
6: #c026d3,
|
|
7: #a21caf,
|
|
8: #86198f,
|
|
9: #701a75,
|
|
),
|
|
pink: (
|
|
0: #fdf2f8,
|
|
1: #fce7f3,
|
|
2: #fbcfe8,
|
|
3: #f9a8d4,
|
|
4: #f472b6,
|
|
5: #ec4899,
|
|
6: #db2777,
|
|
7: #be185d,
|
|
8: #9d174d,
|
|
9: #831843,
|
|
),
|
|
);
|