anki/sass/_color-palette.scss

214 lines
4.0 KiB
SCSS
Raw Normal View History

Introduce new color palette using Sass maps (#2016) * 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
2022-09-16 06:11:18 +02:00
/* 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
* */
Add comments to Sass variables and tweak main window (#2137) * Prevent multiple inclusion of variables in CSS files * Use dict instead of tuple for variables * Add comments to variables * Improve appearance of main window * Tweak main window styles * Use json.dumps over pprint.format * Make study button primary * Improve header margin * Make bottom toolbar slimmer * Make congrats page more balanced * Fix type issue * Replace day/night with light/dark * Exclude top-level-drag-row from hover effect * Create dataclass for variables * Run formatter * Apply CSS variables from Python side Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future. * Fix typing * Fix rgba values in Qt * Darken button background * Fix palette not being applied in light theme For some odd reason this problem arose much later than #2016. * Tweak default button look * Reformat * Apply CSS vars to ts pages * Include elevation in button_mixins_lib * Cast opacity to int * Add some margin to studiedToday info * Tweak light theme button gradient * Tweak highlight-bg for light theme * Add back default button color as it made the browser sidebar tool icons dark in light theme. * Reformat * Tweak light theme buttons once more Sorry for the back-and-forth. Sass only compiles when there are changes in user files, not when I only change the vars. * Fix bottom toolbar button indicators * Make buttons more clicky * Fix button padding * Handle macOS separately again * Decrease elevation effect for main window buttons to 1 * Imitate box-shadow for Qt elements * Adjust shadow vars * Adjust primary border color because the save button in the deck options had a lighter color than its background gradient. * Boost box-shadow color of primary buttons * Format * Adjust Qt box-shadow imitation and shadow colors * Use more subtle default shadow color * Add some more padding to top toolbar * Revert "Apply CSS vars to ts pages" This reverts commit 5d8e7f6b7ffc8894b6517ecbb8cfba35407fc69a. * Revert "Apply CSS variables from Python side" This reverts commit 87db774412fd2bfd75e2630d2c5e782daef96b5f. * Better match the standard macOS buttons In the dark theme the standard color is a lighter grey, but at least the size/shape is similar again. This doesn't work for the editor buttons. * Reduce the top margin of the congrats screen * Fix illegible buttons when changing theme on macOS; match dark button style
2022-10-29 02:48:53 +02:00
$color-palette: (
Introduce new color palette using Sass maps (#2016) * 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
2022-09-16 06:11:18 +02:00
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,
Add comments to Sass variables and tweak main window (#2137) * Prevent multiple inclusion of variables in CSS files * Use dict instead of tuple for variables * Add comments to variables * Improve appearance of main window * Tweak main window styles * Use json.dumps over pprint.format * Make study button primary * Improve header margin * Make bottom toolbar slimmer * Make congrats page more balanced * Fix type issue * Replace day/night with light/dark * Exclude top-level-drag-row from hover effect * Create dataclass for variables * Run formatter * Apply CSS variables from Python side Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future. * Fix typing * Fix rgba values in Qt * Darken button background * Fix palette not being applied in light theme For some odd reason this problem arose much later than #2016. * Tweak default button look * Reformat * Apply CSS vars to ts pages * Include elevation in button_mixins_lib * Cast opacity to int * Add some margin to studiedToday info * Tweak light theme button gradient * Tweak highlight-bg for light theme * Add back default button color as it made the browser sidebar tool icons dark in light theme. * Reformat * Tweak light theme buttons once more Sorry for the back-and-forth. Sass only compiles when there are changes in user files, not when I only change the vars. * Fix bottom toolbar button indicators * Make buttons more clicky * Fix button padding * Handle macOS separately again * Decrease elevation effect for main window buttons to 1 * Imitate box-shadow for Qt elements * Adjust shadow vars * Adjust primary border color because the save button in the deck options had a lighter color than its background gradient. * Boost box-shadow color of primary buttons * Format * Adjust Qt box-shadow imitation and shadow colors * Use more subtle default shadow color * Add some more padding to top toolbar * Revert "Apply CSS vars to ts pages" This reverts commit 5d8e7f6b7ffc8894b6517ecbb8cfba35407fc69a. * Revert "Apply CSS variables from Python side" This reverts commit 87db774412fd2bfd75e2630d2c5e782daef96b5f. * Better match the standard macOS buttons In the dark theme the standard color is a lighter grey, but at least the size/shape is similar again. This doesn't work for the editor buttons. * Reduce the top margin of the congrats screen * Fix illegible buttons when changing theme on macOS; match dark button style
2022-10-29 02:48:53 +02:00
7: #202020,
Introduce new color palette using Sass maps (#2016) * 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
2022-09-16 06:11:18 +02:00
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,
),
);