├── .editorconfig ├── .github └── workflows │ └── release.yml ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── frappe.webp ├── latte.webp ├── macchiato.webp ├── mocha.webp └── preview.webp ├── package-lock.json ├── package.json ├── renovate.json └── src ├── _theme.scss ├── frappe.scss ├── latte.scss ├── macchiato.scss └── mocha.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | push: 4 | tags: 5 | - "v*" 6 | 7 | jobs: 8 | release: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v4 13 | - run: npm ci 14 | - run: npm run build 15 | - name: Create Release 16 | uses: softprops/action-gh-release@v1 17 | with: 18 | files: | 19 | ./dist/latte.css 20 | ./dist/frappe.css 21 | ./dist/macchiato.css 22 | ./dist/mocha.css 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for SwayNC 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 |

15 | 16 |

17 | 18 | ## Previews 19 | 20 |
21 | 🌻 Latte 22 | 23 |
24 |
25 | 🪴 Frappé 26 | 27 |
28 |
29 | 🌺 Macchiato 30 | 31 |
32 |
33 | 🌿 Mocha 34 | 35 |
36 | 37 | ## Usage 38 | 39 | 1. Download your preferred flavor from the [latest release](https://github.com/catppuccin/swaync/releases/latest). 40 | 2. Rename the downloaded theme to `style.css` and put it into `~/.config/swaync/`. 41 | 3. If you're using a custom font, you will need to change the line `font-family: 'Ubuntu Nerd Font'` to your font of choice. 42 | 4. Run `swaync-client -rs` to reload swaync css. 43 | - You can let sway manage your swaync theme: 44 | ```sh 45 | set $flavor macchiato 46 | set $version v0.2.0 47 | exec_always if [ ! -f ~/.config/swaync/style.css ]; then $(mkdir -p ~/.config/swaync && curl -L https://github.com/catppuccin/swaync/releases/download/$version/$flavor.css -o ~/.config/swaync/style.css); fi 48 | ``` 49 | 50 | ## 💝 Thanks to 51 | 52 | - [Isabel Roses](https://github.com/isabelroses) 53 | 54 |   55 | 56 |

57 | 58 |

59 | 60 |

61 | Copyright © 2021-present Catppuccin Org 62 |

63 | 64 |

65 | 66 |

67 | -------------------------------------------------------------------------------- /assets/frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/swaync/c3d579525b79b368ea618ab84acd1f22312f4a85/assets/frappe.webp -------------------------------------------------------------------------------- /assets/latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/swaync/c3d579525b79b368ea618ab84acd1f22312f4a85/assets/latte.webp -------------------------------------------------------------------------------- /assets/macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/swaync/c3d579525b79b368ea618ab84acd1f22312f4a85/assets/macchiato.webp -------------------------------------------------------------------------------- /assets/mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/swaync/c3d579525b79b368ea618ab84acd1f22312f4a85/assets/mocha.webp -------------------------------------------------------------------------------- /assets/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/swaync/c3d579525b79b368ea618ab84acd1f22312f4a85/assets/preview.webp -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swaync", 3 | "version": "0.1.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "swaync", 9 | "version": "0.1.0", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "@catppuccin/palette": "^0.1.6", 13 | "sass": "^1.58.3" 14 | } 15 | }, 16 | "node_modules/@catppuccin/palette": { 17 | "version": "0.1.8", 18 | "resolved": "https://registry.npmjs.org/@catppuccin/palette/-/palette-0.1.8.tgz", 19 | "integrity": "sha512-41quIj08vgPMy8kQxQb0+VqxuTlo2xfNYGSgOuiJXNojWnGuhLxBc61jgu2jiZYGNXVqgVNGWwmWEUf6s32jiA==", 20 | "dev": true, 21 | "funding": [ 22 | { 23 | "type": "opencollective", 24 | "url": "https://opencollective.com/catppuccin" 25 | }, 26 | { 27 | "type": "github", 28 | "url": "https://github.com/sponsors/catppuccin" 29 | } 30 | ] 31 | }, 32 | "node_modules/anymatch": { 33 | "version": "3.1.3", 34 | "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", 35 | "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", 36 | "dev": true, 37 | "dependencies": { 38 | "normalize-path": "^3.0.0", 39 | "picomatch": "^2.0.4" 40 | }, 41 | "engines": { 42 | "node": ">= 8" 43 | } 44 | }, 45 | "node_modules/binary-extensions": { 46 | "version": "2.2.0", 47 | "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", 48 | "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", 49 | "dev": true, 50 | "engines": { 51 | "node": ">=8" 52 | } 53 | }, 54 | "node_modules/braces": { 55 | "version": "3.0.2", 56 | "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", 57 | "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", 58 | "dev": true, 59 | "dependencies": { 60 | "fill-range": "^7.0.1" 61 | }, 62 | "engines": { 63 | "node": ">=8" 64 | } 65 | }, 66 | "node_modules/chokidar": { 67 | "version": "3.5.3", 68 | "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", 69 | "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", 70 | "dev": true, 71 | "funding": [ 72 | { 73 | "type": "individual", 74 | "url": "https://paulmillr.com/funding/" 75 | } 76 | ], 77 | "dependencies": { 78 | "anymatch": "~3.1.2", 79 | "braces": "~3.0.2", 80 | "glob-parent": "~5.1.2", 81 | "is-binary-path": "~2.1.0", 82 | "is-glob": "~4.0.1", 83 | "normalize-path": "~3.0.0", 84 | "readdirp": "~3.6.0" 85 | }, 86 | "engines": { 87 | "node": ">= 8.10.0" 88 | }, 89 | "optionalDependencies": { 90 | "fsevents": "~2.3.2" 91 | } 92 | }, 93 | "node_modules/fill-range": { 94 | "version": "7.0.1", 95 | "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", 96 | "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", 97 | "dev": true, 98 | "dependencies": { 99 | "to-regex-range": "^5.0.1" 100 | }, 101 | "engines": { 102 | "node": ">=8" 103 | } 104 | }, 105 | "node_modules/fsevents": { 106 | "version": "2.3.2", 107 | "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", 108 | "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", 109 | "dev": true, 110 | "hasInstallScript": true, 111 | "optional": true, 112 | "os": [ 113 | "darwin" 114 | ], 115 | "engines": { 116 | "node": "^8.16.0 || ^10.6.0 || >=11.0.0" 117 | } 118 | }, 119 | "node_modules/glob-parent": { 120 | "version": "5.1.2", 121 | "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", 122 | "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", 123 | "dev": true, 124 | "dependencies": { 125 | "is-glob": "^4.0.1" 126 | }, 127 | "engines": { 128 | "node": ">= 6" 129 | } 130 | }, 131 | "node_modules/immutable": { 132 | "version": "4.3.0", 133 | "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", 134 | "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", 135 | "dev": true 136 | }, 137 | "node_modules/is-binary-path": { 138 | "version": "2.1.0", 139 | "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", 140 | "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", 141 | "dev": true, 142 | "dependencies": { 143 | "binary-extensions": "^2.0.0" 144 | }, 145 | "engines": { 146 | "node": ">=8" 147 | } 148 | }, 149 | "node_modules/is-extglob": { 150 | "version": "2.1.1", 151 | "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", 152 | "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", 153 | "dev": true, 154 | "engines": { 155 | "node": ">=0.10.0" 156 | } 157 | }, 158 | "node_modules/is-glob": { 159 | "version": "4.0.3", 160 | "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", 161 | "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", 162 | "dev": true, 163 | "dependencies": { 164 | "is-extglob": "^2.1.1" 165 | }, 166 | "engines": { 167 | "node": ">=0.10.0" 168 | } 169 | }, 170 | "node_modules/is-number": { 171 | "version": "7.0.0", 172 | "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", 173 | "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", 174 | "dev": true, 175 | "engines": { 176 | "node": ">=0.12.0" 177 | } 178 | }, 179 | "node_modules/normalize-path": { 180 | "version": "3.0.0", 181 | "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", 182 | "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", 183 | "dev": true, 184 | "engines": { 185 | "node": ">=0.10.0" 186 | } 187 | }, 188 | "node_modules/picomatch": { 189 | "version": "2.3.1", 190 | "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", 191 | "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", 192 | "dev": true, 193 | "engines": { 194 | "node": ">=8.6" 195 | }, 196 | "funding": { 197 | "url": "https://github.com/sponsors/jonschlinkert" 198 | } 199 | }, 200 | "node_modules/readdirp": { 201 | "version": "3.6.0", 202 | "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", 203 | "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", 204 | "dev": true, 205 | "dependencies": { 206 | "picomatch": "^2.2.1" 207 | }, 208 | "engines": { 209 | "node": ">=8.10.0" 210 | } 211 | }, 212 | "node_modules/sass": { 213 | "version": "1.62.0", 214 | "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.0.tgz", 215 | "integrity": "sha512-Q4USplo4pLYgCi+XlipZCWUQz5pkg/ruSSgJ0WRDSb/+3z9tXUOkQ7QPYn4XrhZKYAK4HlpaQecRwKLJX6+DBg==", 216 | "dev": true, 217 | "dependencies": { 218 | "chokidar": ">=3.0.0 <4.0.0", 219 | "immutable": "^4.0.0", 220 | "source-map-js": ">=0.6.2 <2.0.0" 221 | }, 222 | "bin": { 223 | "sass": "sass.js" 224 | }, 225 | "engines": { 226 | "node": ">=14.0.0" 227 | } 228 | }, 229 | "node_modules/source-map-js": { 230 | "version": "1.0.2", 231 | "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", 232 | "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", 233 | "dev": true, 234 | "engines": { 235 | "node": ">=0.10.0" 236 | } 237 | }, 238 | "node_modules/to-regex-range": { 239 | "version": "5.0.1", 240 | "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", 241 | "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", 242 | "dev": true, 243 | "dependencies": { 244 | "is-number": "^7.0.0" 245 | }, 246 | "engines": { 247 | "node": ">=8.0" 248 | } 249 | } 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swaync", 3 | "version": "0.2.2", 4 | "description": "soothing pastel theme for swaync", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/catppuccin/swaync.git" 8 | }, 9 | "scripts": { 10 | "build": "sass -I node_modules --no-charset --no-source-map src:dist" 11 | }, 12 | "author": "Catppuccin Org ", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "@catppuccin/palette": "^0.1.6", 16 | "sass": "^1.58.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>catppuccin/renovate-config" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/_theme.scss: -------------------------------------------------------------------------------- 1 | * { 2 | all: unset; 3 | font-size: 14px; 4 | font-family: "Ubuntu Nerd Font"; 5 | transition: 200ms; 6 | } 7 | 8 | trough highlight { 9 | background: $text; 10 | } 11 | 12 | scale trough { 13 | margin: 0rem 1rem; 14 | background-color: $surface0; 15 | min-height: 8px; 16 | min-width: 70px; 17 | } 18 | 19 | slider { 20 | background-color: $blue; 21 | } 22 | 23 | .floating-notifications.background .notification-row .notification-background { 24 | box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px $surface0; 25 | border-radius: 12.6px; 26 | margin: 18px; 27 | background-color: $base; 28 | color: $text; 29 | padding: 0; 30 | } 31 | 32 | .floating-notifications.background .notification-row .notification-background .notification { 33 | padding: 7px; 34 | border-radius: 12.6px; 35 | } 36 | 37 | .floating-notifications.background .notification-row .notification-background .notification.critical { 38 | box-shadow: inset 0 0 7px 0 $red; 39 | } 40 | 41 | .floating-notifications.background .notification-row .notification-background .notification .notification-content { 42 | margin: 7px; 43 | } 44 | 45 | .floating-notifications.background .notification-row .notification-background .notification .notification-content .summary { 46 | color: $text; 47 | } 48 | 49 | .floating-notifications.background .notification-row .notification-background .notification .notification-content .time { 50 | color: $subtext0; 51 | } 52 | 53 | .floating-notifications.background .notification-row .notification-background .notification .notification-content .body { 54 | color: $text; 55 | } 56 | 57 | .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* { 58 | min-height: 3.4em; 59 | } 60 | 61 | .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action { 62 | border-radius: 7px; 63 | color: $text; 64 | background-color: $surface0; 65 | box-shadow: inset 0 0 0 1px $surface1; 66 | margin: 7px; 67 | } 68 | 69 | .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { 70 | box-shadow: inset 0 0 0 1px $surface1; 71 | background-color: $surface0; 72 | color: $text; 73 | } 74 | 75 | .floating-notifications.background .notification-row .notification-background .notification>*:last-child>* .notification-action:active { 76 | box-shadow: inset 0 0 0 1px $surface1; 77 | background-color: $sapphire; 78 | color: $text; 79 | } 80 | 81 | .floating-notifications.background .notification-row .notification-background .close-button { 82 | margin: 7px; 83 | padding: 2px; 84 | border-radius: 6.3px; 85 | color: $base; 86 | background-color: $red; 87 | } 88 | 89 | .floating-notifications.background .notification-row .notification-background .close-button:hover { 90 | background-color: $maroon; 91 | color: $base; 92 | } 93 | 94 | .floating-notifications.background .notification-row .notification-background .close-button:active { 95 | background-color: $red; 96 | color: $base; 97 | } 98 | 99 | .control-center { 100 | box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.8), inset 0 0 0 1px $surface0; 101 | border-radius: 12.6px; 102 | margin: 18px; 103 | background-color: $base; 104 | color: $text; 105 | padding: 14px; 106 | } 107 | 108 | .control-center .widget-title>label { 109 | color: $text; 110 | font-size: 1.3em; 111 | } 112 | 113 | .control-center .widget-title button { 114 | border-radius: 7px; 115 | color: $text; 116 | background-color: $surface0; 117 | box-shadow: inset 0 0 0 1px $surface1; 118 | padding: 8px; 119 | } 120 | 121 | .control-center .widget-title button:hover { 122 | box-shadow: inset 0 0 0 1px $surface1; 123 | background-color: $surface2; 124 | color: $text; 125 | } 126 | 127 | .control-center .widget-title button:active { 128 | box-shadow: inset 0 0 0 1px $surface1; 129 | background-color: $sapphire; 130 | color: $base; 131 | } 132 | 133 | .control-center .notification-row .notification-background { 134 | border-radius: 7px; 135 | color: $text; 136 | background-color: $surface0; 137 | box-shadow: inset 0 0 0 1px $surface1; 138 | margin-top: 14px; 139 | } 140 | 141 | .control-center .notification-row .notification-background .notification { 142 | padding: 7px; 143 | border-radius: 7px; 144 | } 145 | 146 | .control-center .notification-row .notification-background .notification.critical { 147 | box-shadow: inset 0 0 7px 0 $red; 148 | } 149 | 150 | .control-center .notification-row .notification-background .notification .notification-content { 151 | margin: 7px; 152 | } 153 | 154 | .control-center .notification-row .notification-background .notification .notification-content .summary { 155 | color: $text; 156 | } 157 | 158 | .control-center .notification-row .notification-background .notification .notification-content .time { 159 | color: $subtext0; 160 | } 161 | 162 | .control-center .notification-row .notification-background .notification .notification-content .body { 163 | color: $text; 164 | } 165 | 166 | .control-center .notification-row .notification-background .notification>*:last-child>* { 167 | min-height: 3.4em; 168 | } 169 | 170 | .control-center .notification-row .notification-background .notification>*:last-child>* .notification-action { 171 | border-radius: 7px; 172 | color: $text; 173 | background-color: $crust; 174 | box-shadow: inset 0 0 0 1px $surface1; 175 | margin: 7px; 176 | } 177 | 178 | .control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:hover { 179 | box-shadow: inset 0 0 0 1px $surface1; 180 | background-color: $surface0; 181 | color: $text; 182 | } 183 | 184 | .control-center .notification-row .notification-background .notification>*:last-child>* .notification-action:active { 185 | box-shadow: inset 0 0 0 1px $surface1; 186 | background-color: $sapphire; 187 | color: $text; 188 | } 189 | 190 | .control-center .notification-row .notification-background .close-button { 191 | margin: 7px; 192 | padding: 2px; 193 | border-radius: 6.3px; 194 | color: $base; 195 | background-color: $maroon; 196 | } 197 | 198 | .close-button { 199 | border-radius: 6.3px; 200 | } 201 | 202 | .control-center .notification-row .notification-background .close-button:hover { 203 | background-color: $red; 204 | color: $base; 205 | } 206 | 207 | .control-center .notification-row .notification-background .close-button:active { 208 | background-color: $red; 209 | color: $base; 210 | } 211 | 212 | .control-center .notification-row .notification-background:hover { 213 | box-shadow: inset 0 0 0 1px $surface1; 214 | background-color: $overlay1; 215 | color: $text; 216 | } 217 | 218 | .control-center .notification-row .notification-background:active { 219 | box-shadow: inset 0 0 0 1px $surface1; 220 | background-color: $sapphire; 221 | color: $text; 222 | } 223 | 224 | .notification.critical progress { 225 | background-color: $red; 226 | } 227 | 228 | .notification.low progress, 229 | .notification.normal progress { 230 | background-color: $blue; 231 | } 232 | 233 | .control-center-dnd { 234 | margin-top: 5px; 235 | border-radius: 8px; 236 | background: $surface0; 237 | border: 1px solid $surface1; 238 | box-shadow: none; 239 | } 240 | 241 | .control-center-dnd:checked { 242 | background: $surface0; 243 | } 244 | 245 | .control-center-dnd slider { 246 | background: $surface1; 247 | border-radius: 8px; 248 | } 249 | 250 | .widget-dnd { 251 | margin: 0px; 252 | font-size: 1.1rem; 253 | } 254 | 255 | .widget-dnd>switch { 256 | font-size: initial; 257 | border-radius: 8px; 258 | background: $surface0; 259 | border: 1px solid $surface1; 260 | box-shadow: none; 261 | } 262 | 263 | .widget-dnd>switch:checked { 264 | background: $surface0; 265 | } 266 | 267 | .widget-dnd>switch slider { 268 | background: $surface1; 269 | border-radius: 8px; 270 | border: 1px solid $overlay0; 271 | } 272 | 273 | .widget-mpris .widget-mpris-player { 274 | background: $surface0; 275 | padding: 7px; 276 | } 277 | 278 | .widget-mpris .widget-mpris-title { 279 | font-size: 1.2rem; 280 | } 281 | 282 | .widget-mpris .widget-mpris-subtitle { 283 | font-size: 0.8rem; 284 | } 285 | 286 | .widget-menubar>box>.menu-button-bar>button>label { 287 | font-size: 3rem; 288 | padding: 0.5rem 2rem; 289 | } 290 | 291 | .widget-menubar>box>.menu-button-bar>:last-child { 292 | color: $red; 293 | } 294 | 295 | .power-buttons button:hover, 296 | .powermode-buttons button:hover, 297 | .screenshot-buttons button:hover { 298 | background: $surface0; 299 | } 300 | 301 | .control-center .widget-label>label { 302 | color: $text; 303 | font-size: 2rem; 304 | } 305 | 306 | .widget-buttons-grid { 307 | padding-top: 1rem; 308 | } 309 | 310 | .widget-buttons-grid>flowbox>flowboxchild>button label { 311 | font-size: 2.5rem; 312 | } 313 | 314 | .widget-volume { 315 | padding-top: 1rem; 316 | } 317 | 318 | .widget-volume label { 319 | font-size: 1.5rem; 320 | color: $sapphire; 321 | } 322 | 323 | .widget-volume trough highlight { 324 | background: $sapphire; 325 | } 326 | 327 | .widget-backlight trough highlight { 328 | background: $yellow; 329 | } 330 | 331 | .widget-backlight label { 332 | font-size: 1.5rem; 333 | color: $yellow; 334 | } 335 | 336 | .widget-backlight .KB { 337 | padding-bottom: 1rem; 338 | } 339 | 340 | .image { 341 | padding-right: 0.5rem; 342 | } 343 | -------------------------------------------------------------------------------- /src/frappe.scss: -------------------------------------------------------------------------------- 1 | @use "@catppuccin/palette/scss/frappe" as *; 2 | @import "theme"; 3 | -------------------------------------------------------------------------------- /src/latte.scss: -------------------------------------------------------------------------------- 1 | @use "@catppuccin/palette/scss/latte" as *; 2 | @import "theme"; 3 | -------------------------------------------------------------------------------- /src/macchiato.scss: -------------------------------------------------------------------------------- 1 | @use "@catppuccin/palette/scss/macchiato" as *; 2 | @import "theme"; 3 | -------------------------------------------------------------------------------- /src/mocha.scss: -------------------------------------------------------------------------------- 1 | @use "@catppuccin/palette/scss/mocha" as *; 2 | @import "theme"; 3 | --------------------------------------------------------------------------------