Repository: phocus/gtk
Branch: master
Commit: 63bfcb7b127c
Files: 56
Total size: 33.1 KB

Directory structure:
gitextract_bvlo78u6/

├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── index.theme
├── package.json
└── scss/
    └── gtk-3.0/
        ├── _colors.scss
        ├── _config.scss
        ├── applications/
        │   ├── _chromium.scss
        │   ├── _firefox.scss
        │   ├── _index.scss
        │   ├── _nautilus.scss
        │   └── _nemo.scss
        ├── gtk.scss
        └── widgets/
            ├── _actionbar.scss
            ├── _button.scss
            ├── _calendar.scss
            ├── _check.scss
            ├── _checkbutton.scss
            ├── _combobox.scss
            ├── _dialog.scss
            ├── _entry.scss
            ├── _expander.scss
            ├── _frame.scss
            ├── _headerbar.scss
            ├── _iconview.scss
            ├── _index.scss
            ├── _infobar.scss
            ├── _label.scss
            ├── _levelbar.scss
            ├── _list.scss
            ├── _menu.scss
            ├── _menubar.scss
            ├── _notebook.scss
            ├── _overshoot.scss
            ├── _paned.scss
            ├── _pathbar.scss
            ├── _placessidebar.scss
            ├── _popover.scss
            ├── _progressbar.scss
            ├── _radio.scss
            ├── _radiobutton.scss
            ├── _revealer.scss
            ├── _rubberband.scss
            ├── _scale.scss
            ├── _scrollbar.scss
            ├── _separator.scss
            ├── _spinbutton.scss
            ├── _spinner.scss
            ├── _switch.scss
            ├── _tabs.scss
            ├── _textview.scss
            ├── _toolbar.scss
            ├── _tooltip.scss
            ├── _treeview.scss
            └── _window.scss

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules/
/gtk-3.0/
.idea/


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2019 Philipp Schaffrath

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: Makefile
================================================
PREFIX = /usr
DESTDIR ?=
INSTALL_DIR ?= $(DESTDIR)$(PREFIX)/share/themes/phocus

all:
	npm install && npm run build

install:
	@install -v -d "$(INSTALL_DIR)"
	@install -m 0644 -v index.theme "$(INSTALL_DIR)"
	@cp -rv assets gtk-3.0 "$(INSTALL_DIR)"

uninstall:
	@rm -vrf "$(INSTALL_DIR)"

.PHONY: all install uninstall


================================================
FILE: README.md
================================================
# Phocus GTK3 Theme
This GTK3 theme is part of the [Phocus](https://github.com/phocus/) theme collection.

## About GTK4
Libadwaita applications can't be themed through a GTK4 theme. The amount of non-libadwaita GTK4 apps is so little, that it is not worth adding a phocus GTK4 theme.

You can manually overwrite the libadwaita colors to somewhat get a phocus feeling. Feel free to copy this example from my dotfiles [~/.config/gtk-4.0/gtk.css](https://github.com/phisch/dotfiles/blob/master/.config/gtk-4.0/gtk.css). This won't get you the phocus look you are used to, but it is the best we can do.

May proper GTK4 theming rest in piece 🪦

## Installation From source
Make sure to install the following dependency:

- [npm](https://www.npmjs.com/)

Clone the phocus/gtk repository and build/install it using make:

```bash
git clone https://github.com/phocus/gtk.git phocus-gtk
cd phocus-gtk
make
sudo make install
```

## Installation on Arch
Install the AUR package [phocus-gtk-theme-git](https://aur.archlinux.org/packages/phocus-gtk-theme-git/) with your favourite AUR helper (or by hand, won't judge).
```bash
paru -S phocus-gtk-theme-git
```

## Development
To make development as easy as possible, clone the repository and symlink it into your users `~/.themes` directory:
```bash
git clone https://github.com/phocus/gtk.git ~/code/phocus
ln -s ~/code/phocus ~/.themes/phocus
```

Install its npm dependencies:
```bash
cd ~/.themes/phocus
npm install
```

### Build
Build the theme by running its build script:
```bash
npm run build
```

### Watch
Start a watcher that automatically builds when you modify a file:
```bash
cd ~/themes/phocus
npm run watch
```

### Reload GTK Theme
Make all open GTK applications reload the phocus theme by running:
```bash
npm run reload_gtk_theme
```

This requires you to have [xsettingsd](https://github.com/derat/xsettingsd) installed.

### Watch and reload - *ultimate comfort*
Automatically build on modifications, and make all open GTK applications reload the phocus theme:
```bash
npm run watch_and_reload
```

Enjoy this quick demo of the ultimate comfort workflow:
![ultimate comfort demo](https://i.imgur.com/UjUpmG1.gif)

## Desktop Makers

<a href="https://discord.gg/RqKTeA4uxW" title="Desktop Makers Discord"><img align="left" width="72" alt="type=discord" src="https://user-images.githubusercontent.com/1282767/161089772-d7ad28bf-76eb-4951-b0f0-985afd5ea57a.png"></a>

I am actively working on phocus and other cool projects on the [Desktop Makers Discord](https://discord.gg/RqKTeA4uxW). It aims to be a community for communities of Linux desktop related projects. If you are looking to collaborate with or want to contribute to great projects, this might be the right place for you.


================================================
FILE: index.theme
================================================
[Desktop Entry]
Type=X-GNOME-Metatheme
Name=phocus
Comment=the phocus theme
Encoding=UTF-8

[X-GNOME-Metatheme]
GtkTheme=phocus
MetacityTheme=phocus
IconTheme=gnome
CursorTheme=DMZ-Black
ButtonLayout=menu:minimize,maximize,close


================================================
FILE: package.json
================================================
{
  "name": "phisch",
  "version": "0.0.1",
  "description": "GTK3 theme based on the Phocus colors.",
  "scripts": {
    "build": "sass scss:.",
    "watch": "sass scss:. -w --no-source-map --color",
    "reload_gtk_theme": "xsettingsd -c <(echo 'Net/ThemeName \"phocus\"') >/dev/null 2>&1 & sleep 0.2 && kill $!",
    "watch_and_reload": "npm run watch | tee /dev/tty | grep --line-buffered 'Compiled' | while read -r l; do npm run reload_gtk_theme --silent; done;"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/phocus/gtk.git"
  },
  "keywords": [
    "gtk3",
    "gtk3-theme",
    "theme"
  ],
  "author": "Philipp Schaffrath",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/phocus/gtk/issues"
  },
  "homepage": "https://github.com/phocus/gtk#readme",
  "devDependencies": {
    "sass": "^1.32.12"
  }
}


================================================
FILE: scss/gtk-3.0/_colors.scss
================================================
$surface-strongest: rgb(10, 10, 10);
$surface-strong: rgb(20, 20, 20);
$surface-moderate: rgb(28, 28, 28);
$surface-weak: rgb(34, 34, 34);
$surface-weakest: rgb(40, 40, 40);

$white-strongest: rgb(255, 255, 255);
$white-strong: rgba(255, 255, 255, 0.87);
$white-moderate: rgba(255, 255, 255, 0.34);
$white-weak: rgba(255, 255, 255, 0.14);
$white-weakest: rgba(255, 255, 255, 0.06);

$black-strongest: rgb(0, 0, 0);
$black-strong: rgba(0, 0, 0, 0.87);
$black-moderate: rgba(0, 0, 0, 0.42);
$black-weak: rgba(0, 0, 0, 0.15);
$black-weakest: rgba(0, 0, 0, 0.06);

$red-normal: rgb(218, 88, 88);
$red-light:rgb(227, 109, 109);
$orange-normal: rgb(237, 148, 84);
$orange-light: rgb(252, 166, 105);
$yellow-normal: rgb(232, 202, 94);
$yellow-light: rgb(250, 221, 117);
$green-normal: rgb(63, 198, 97);
$green-light: rgb(97, 214, 126);
$cyan-normal: rgb(92, 216, 230);
$cyan-light: rgb(126, 234, 246);
$blue-normal: rgb(73, 126, 233);
$blue-light: rgb(93, 141, 238);
$purple-normal: rgb(113, 84, 242);
$purple-light: rgb(128, 102, 245);
$pink-normal: rgb(213, 108, 195);
$pink-light: rgb(223, 129, 207);

$accent-primary: $purple-normal;
$accent-secondary: $green-normal;

// TODO: is there a better way to do this? this is for example used in gnome-calculator for the result top-border
@define-color borders #{"" +$surface-strong};

================================================
FILE: scss/gtk-3.0/_config.scss
================================================
$spacing-small: 0.3em;
$spacing-medium: 0.6em;
$spacing-large: 0.9em;

$tint-weak: 0.3;
$tint-medium: 0.6;
$tint-strong: 0.8;

$border-size: 0.2em;

$radius: 0.5em;

$disabled-opacity: 0.3;

================================================
FILE: scss/gtk-3.0/applications/_chromium.scss
================================================
@use '../colors';

// TODO: theme "this tab is playing audio" tooltip section
// TODO: find out how bookmark drag and drop boxes render their buggy 1px border
// TODO: check how separators are rendered. `separator, .separator` background affects a larger area than wanted.

window.background.chromium {
  // active tab and toolbar colors
  background: lighten(colors.$surface-weak, 2%);
  color: colors.$white-strong;

  button {
    border: 1px solid lighten(colors.$surface-weak, 2%);
  }

  .titlebutton {
    border: transparent;
  }

  entry {
    // chromium manipulates this color, so it is impossible to set a specific one
    // using black at least guarantees a light, monochrome color
    &:focus {
      border-color: colors.$black-strongest;
    }
  }

  // context menu colors
  menu {
    background: colors.$surface-moderate;
    menuitem {
      color: colors.$white-strong;
      &:hover {
        background: colors.$white-weakest;
      }
      &:disabled label {
        color: colors.$white-weakest;
      }
    }
  }

  // tab bar / headerbar
  headerbar, menubar {
    background: colors.$surface-strongest;

    label {
      color: colors.$white-moderate;
    }

    // this is a workaround to position titlebuttons to the very right
    .titlebutton {
      padding: 100px 80px;
    }
  }

  scrollbar {
    button {
      background: colors.$white-weakest;
      color: colors.$white-strong;
    }

    trough {
      background: transparent;
    }
    slider {
      background: colors.$white-weakest;
    }
    junction {
      background: colors.$white-weakest;
    }
  }

  // address bar
  textview {
    background-color: colors.$surface-strong;
    color: colors.$white-strong;
  }
}

================================================
FILE: scss/gtk-3.0/applications/_firefox.scss
================================================
@use 'sass:color';
@use '../colors';

#MozillaGtkWidget {
  // by default firefox mixes -moz-dialog 85& with pure white with in srgb space and uses that as the background
  // it's possible to kinda bypass it by either using color.adjust (what is currently being done) or modifying --toolbar-non-lwt-bgcolor and setting it to `-moz-dialog !important`
  // see: https://searchfox.org/mozilla-central/source/toolkit/themes/shared/global-shared.css#46
  background: color.adjust(colors.$surface-weak, $lightness: - 15%);
  color: colors.$white-strong;
  
  // bar that contains inactive tabs
  // TODO: find out if the gtk headerbar (the one with decorations) can be themed as well
  menubar {
    color: colors.$white-moderate;
    background: colors.$surface-strongest;
  }

  // address-bar, side-bar (bookmarks), burger menu, account menu
  text {
    background: colors.$surface-moderate;
  }

  // context menus
  menu {
    background: colors.$surface-weak;

    // TODO: check if this can go into default menu styles, or if this is a weird selector for firefox
    :disabled {
      color: colors.$white-weakest;
    }

    // TODO: could potentially go into default styles, at the very least make it consistent
    separator {
      padding: 8px;
    }
  }

  // borders in menus, sidebars, navigation bar and more
  border {
    border: 1px solid colors.$surface-weak;
  }
}


================================================
FILE: scss/gtk-3.0/applications/_index.scss
================================================
@use "chromium";
@use "firefox";
@use "nautilus";
@use "nemo";

================================================
FILE: scss/gtk-3.0/applications/_nautilus.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

window.nautilus-window {
  // those are the items inside the nautilus canvas
  .nautilus-canvas-item {
    border-radius: config.$radius;
    &:selected, &:active {
      background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
    }
  }

  // this is the floating bar usually shown at the bottom right of nautilus when elements are selected
  .floating-bar {
    background: colors.$surface-strong;
    color: colors.$white-strong;
    padding: config.$spacing-small;

    &.bottom.left {
      border-top-right-radius: config.$radius;
    }
    &.bottom.right {
      border-top-left-radius: config.$radius;
    }
  }

  .nautilus-path-bar {
    background: colors.$white-weakest;
      border-radius: config.$radius;

    > button {
      background: transparent;
      &:hover {
        background: colors.$white-weakest;
      }
    }

    .path-buttons-box {
      button {
        background: transparent;
        &:hover:not(.current-dir) {
          background: transparent;
          label {
            color: colors.$white-moderate;
          }
        }
      }
      .dim-label {
        color: colors.$white-weak;
        opacity: 1;
      }
    }
  }

  .operations-list {
    background: transparent;
    row {
      background: transparent;
    }
  }
}


================================================
FILE: scss/gtk-3.0/applications/_nemo.scss
================================================
@use "sass:color";
@use "../colors";
@use "../config";

.nemo-window {
  .nemo-places-sidebar {
    background: colors.$surface-strong;
  }

  .primary-toolbar {
    background: colors.$surface-moderate;
    padding: config.$spacing-small;
  }

  menubar ~ separator {
    min-width: 0;
    min-height: 0;
  }

  .toolbar {
    background: colors.$surface-moderate;
    margin: -0.1em;
  }

  .nemo-window-pane {
    :selected {
      background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
    }
    :active {
      background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
    }
  }
}

================================================
FILE: scss/gtk-3.0/gtk.scss
================================================
@use "applications";
@use "widgets";

================================================
FILE: scss/gtk-3.0/widgets/_actionbar.scss
================================================
@use '../colors';
@use "../config";

actionbar {
  padding: config.$spacing-medium;
  background: colors.$surface-strong;
  border-top: 1px solid colors.$white-weakest;
}

================================================
FILE: scss/gtk-3.0/widgets/_button.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

button {
  transition: background-color 100ms ease-in;
  background: colors.$white-weakest;
  padding: config.$spacing-medium;
  border-radius: config.$radius;

  &:hover:not(:active) { background: colors.$white-weak; }
  &:disabled { opacity: config.$disabled-opacity; }

  &:checked, &.suggested-action {
    background: color.change(colors.$purple-normal, $alpha: config.$tint-medium);
    color: colors.$white-strong;
    &:hover:not(:active) {
      background: color.change(colors.$purple-light, $alpha: config.$tint-medium);
    }
  }

  &.image-button:not(.text-button) {
    padding: calc(config.$spacing-medium + 0.2em);
  }

  &.destructive-action {
    background: color.change(colors.$red-normal, $alpha: config.$tint-medium);
    color: colors.$white-strongest;
    &:hover:not(:active) {
      background: color.change(colors.$red-light, $alpha: config.$tint-medium);
    }
  }

  &.circular {
    border-radius: 100%;
    padding: calc(config.$spacing-medium + 0.2em);
  }

  &.flat {
    background: transparent;
    &:hover {
      background: colors.$white-weakest;
    }
    &:active, &:checked {
      background: colors.$white-weak;
    }
  }

  label + & {
    margin-left: config.$spacing-medium;
  }

  &.small-button {
    image:only-child {
      padding: config.$spacing-small;
    }
  }

  .linked.horizontal & {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .linked.vertical & {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &:not(:last-child) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_calendar.scss
================================================
@use '../colors';

calendar {
  background: colors.$surface-strong;

  &.button {
    background: colors.$surface-moderate;
    color: colors.$white-moderate;

    &:hover { color: colors.$white-strong; }
    &:disabled { color: colors.$white-weakest; }
  }

  &.header {
    background: colors.$surface-moderate;
  }

  &.highlight {
    color: colors.$white-moderate;
  }

  &:selected {
    color: colors.$white-strongest;
    border-radius: 0.5em;
    background: colors.$accent-primary;
  }

  &:indeterminate {
    color: colors.$white-weak;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_check.scss
================================================
@use '../colors';

check {
  -gtk-icon-source: -gtk-recolor(url('../assets/symbolic/check.symbolic.png'));
  -gtk-icon-transform: scale(0);
  color: colors.$white-strongest;
  border: 0.2em solid colors.$white-weakest;
  border-radius: 0.3em;
  padding: 0.1em;
  min-width: 0.7em;
  min-height: 0.7em;

  // TODO: extract transitions into separate directory
  transition: -gtk-icon-transform 200ms;

  &:hover {
    border-color: colors.$white-weak;
  }

  &:active, &:checked {
    background: colors.$white-weakest;
  }

  &:checked {
    background: colors.$accent-primary;
    -gtk-icon-transform: scale(1);
    border-color: colors.$accent-primary;
    &:active { background: transparent; }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_checkbutton.scss
================================================
checkbutton {
  label { padding-left: 5px; }
  &:disabled { opacity: 0.3; }
}

================================================
FILE: scss/gtk-3.0/widgets/_combobox.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

// TODO: add right to left support (doable with negative margin on the entry)
combobox {
  entry {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &:focus + button {
      border: config.$border-size solid color.change(colors.$accent-primary, $alpha: config.$tint-strong);
      border-left: 0;
      margin-right: -#{config.$border-size};

      &:hover {
        background-clip: padding-box;
      }
    }

    + button.combo {
      border-radius: 0 config.$radius config.$radius 0;
    }
  }

  .linked button.combo {
    padding: calc(config.$spacing-medium - 0.1em);
    border-radius: config.$radius;
    
    arrow {
      min-width: 1em;
      -gtk-icon-source: -gtk-icontheme("go-down-symbolic");
    }
  }

  .linked.horizontal & {
    &:not(:first-child) button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:last-child) button {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  .linked.vertical & {
    &:not(:first-child) button {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &:not(:last-child) button {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_dialog.scss
================================================
@use "../colors";
@use "../config";

dialog, messagedialog {
  background: colors.$surface-strong;

  .dialog-action-box {
    background: colors.$surface-moderate;
    padding: config.$spacing-medium;
    margin: -0.4em;
    margin-top: 0;
  }

  fontchooser, colorchooser {
    padding: config.$spacing-medium;
  }

  filechooser {
    & + .dialog-action-box {
      margin: 0;
    }

    #pathbarbox {
      padding: config.$spacing-small;
      background: colors.$surface-moderate;
    }
  
    treeview {
      background: colors.$surface-strongest;
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_entry.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

entry {
  padding: calc(config.$spacing-medium - config.$border-size);
  border-radius: config.$radius;
  border: config.$border-size solid colors.$white-weakest;
  background: colors.$white-weakest;
  background-clip: padding-box;

  &:focus {
    border-color: color.change(colors.$accent-primary, $alpha: config.$tint-strong);
  }

  &:disabled {
    opacity: config.$disabled-opacity;
  }

  image {
    &.left {
      margin-right: config.$spacing-medium;
    }
    &.right {
      margin-left: config.$spacing-medium;
    }
  }

  selection {
    color: colors.$white-strong;
    background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
  }

  .linked.horizontal & {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .linked.vertical & {
    &:not(:first-child) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    &:not(:last-child) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_expander.scss
================================================
@use "../colors";
@use "../config";

expander {
  title {
    color: colors.$white-moderate;
    padding: config.$spacing-medium;

    arrow {
      -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
      min-width: 1em;
      min-height: 1em;
      margin-right: config.$spacing-medium;

      &:checked {
        -gtk-icon-source: -gtk-icontheme("go-down-symbolic");
        color: colors.$white-strong;
        
        & + label {
          color: colors.$white-strong;
        }
      }
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_frame.scss
================================================
@use '../colors';

frame > border, .frame {
  border: 1px solid colors.$surface-moderate;
}

scrolledwindow {
  viewport.frame {
    border-style: none;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_headerbar.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

headerbar {
  background: colors.$surface-moderate;
  padding: config.$spacing-medium;

  button.titlebutton {
    padding: calc(config.$spacing-medium + 0.2em);
  }

  button.titlebutton:not(.appmenu) {
    background: transparent;

    &.close {
      color: colors.$red-normal;
      &:hover {
        color: colors.$red-light;
        background: color.change(colors.$red-normal, $alpha: config.$tint-weak);
      }
    }

    &.minimize {
      color: colors.$yellow-normal;
      &:hover {
        color: colors.$yellow-light;
        background: color.change(colors.$yellow-normal, $alpha: config.$tint-weak);
      }
    }

    &.maximize {
      color: colors.$green-normal;
      &:hover {
        color: colors.$green-light;
        background: color.change(colors.$green-normal, $alpha: config.$tint-weak);
      }
    }
  }

  button.titlebutton.appmenu {
    &:not(:active):not(:checked) {
      background: transparent;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_iconview.scss
================================================
@use '../colors';

iconview {
  background: colors.$surface-moderate;
  padding: 0.3em;

  &:selected {
    color: colors.$white-strongest;
    background: colors.$accent-primary;
    border-radius: 0.5em;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_index.scss
================================================
@use "actionbar";
@use "button";
@use "calendar";
@use "check";
@use "checkbutton";
@use "combobox";
@use "dialog";
@use "entry";
@use "expander";
@use "frame";
@use "headerbar";
@use "iconview";
@use "infobar";
@use "label";
@use "levelbar";
@use "list";
@use "menu";
@use "menubar";
@use "notebook";
@use "overshoot";
@use "paned";
@use "pathbar";
@use "placessidebar";
@use "popover";
@use "progressbar";
@use "radio";
@use "radiobutton";
@use "revealer";
@use "rubberband";
@use "scale";
@use "scrollbar";
@use "separator";
@use "spinbutton";
@use "spinner";
@use "switch";
@use "tabs";
@use "textview";
@use "toolbar";
@use "tooltip";
@use "treeview";
@use "window";

================================================
FILE: scss/gtk-3.0/widgets/_infobar.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

infobar {
  color: colors.$white-strong;
  padding: config.$spacing-small;
  background: colors.$surface-strong;

  &.info {
    background: color.change(colors.$blue-normal, $alpha: config.$tint-medium);
  }
  &.warning {
    background: color.change(colors.$orange-normal, $alpha: config.$tint-medium);
  }
  &.error {
    background: color.change(colors.$red-normal, $alpha: config.$tint-medium);
  }
  &.question {
    background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_label.scss
================================================
@use '../colors';

label {
  &.dim-label, &:disabled { opacity: 0.3; }

  selection {
    background: colors.$accent-primary;
    color: lighten(colors.$white-strong, 50%);
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_levelbar.scss
================================================
@use '../colors';

levelbar {
  trough {
    block {
      padding: 3px;
      border-radius: 3px;

      &.filled { background: colors.$accent-secondary; }
      &.empty { background: colors.$surface-moderate; }
    }
  }

  &.discrete {
    block:not(:first-child) {
      margin-left: 5px;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_list.scss
================================================
@use '../colors';
@use '../config';

list {
  background: colors.$surface-strongest;

  row {
    background: colors.$surface-strong;
    padding: config.$spacing-medium;
    &:hover {
      background: colors.$surface-moderate;
    }
  }

  > label {
    padding: config.$spacing-small;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_menu.scss
================================================
@use '../colors';
@use '../config';

menu {
  background: colors.$surface-weak;
  menuitem {
    padding: config.$spacing-medium;
    &:hover {
      background: colors.$white-weakest;
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_menubar.scss
================================================
@use '../colors';
@use '../config';

menubar {
  background: colors.$surface-strongest;

  menuitem {
    padding: config.$spacing-medium;

    &:hover {
      background: colors.$white-weakest;
    }

    check, radio {
      margin-right: config.$spacing-medium;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_notebook.scss
================================================
@use '../colors';

notebook {
  stack {
    &:only-child { background: colors.$surface-strongest; }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_overshoot.scss
================================================
@use '../colors';

@mixin overshoot($side, $color: colors.$surface-moderate) {
  $position-per-side: (
    top: center top,
    right: right center,
    bottom: center bottom,
    left: left center
  );
  $position: map-get($position-per-side, $side);

  background-image: -gtk-gradient(
    radial,
    $position, 0,
    $position, 0.6,
    from(transparentize($color, 0.8)),
    to(transparentize($color, 1))
  );

  background-size: map-get((top: 100% 60%, right: 60% 100%, bottom: 100% 60%, left: 60% 100%), $side);
  background-repeat: no-repeat;
  background-position: $position;
}


overshoot {
  &.top { @include overshoot(top); }
  &.bottom { @include overshoot(bottom); }
  &.left { @include overshoot(left); }
  &.right { @include overshoot(right); }
}


================================================
FILE: scss/gtk-3.0/widgets/_paned.scss
================================================
@use '../colors';

paned {}

================================================
FILE: scss/gtk-3.0/widgets/_pathbar.scss
================================================
@use "../config";

.linked.path-bar {
    button {
      image:not(:only-child) {
        margin-right: config.$spacing-medium;
      }

      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

================================================
FILE: scss/gtk-3.0/widgets/_placessidebar.scss
================================================
@use "sass:color";
@use "../colors";
@use "../config";

placessidebar {
  background: colors.$surface-strong;

  list {
    background: transparent;

    row {
      &:hover {
        background: colors.$white-weakest;
      }

      &:active {
        background: colors.$white-weak;
      }

      &:selected {
        background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
      }

      .sidebar-icon {
        margin-right: config.$spacing-medium;
      }
    }
  }

  &.frame,
  .frame {
    border: 0;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_popover.scss
================================================
@use '../colors';

popover {
  background: colors.$surface-weakest;
  box-shadow: 0 0 5px colors.$black-moderate;
  border-radius: 0.5em;
  padding: 0.5em;

  box {
    modelbutton {
      padding: 0.4em 1em;
      margin: 0 -0.5em;
      border-radius: 0.5em;

      &:hover {
        background: colors.$white-weakest;
      }
    }
  }

  &.menu:first-child {
    border-top-left-radius: 0;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_progressbar.scss
================================================
@use '../colors';

progressbar {

  trough {
    background: colors.$white-weakest;
    progress {
      background: colors.$accent-secondary;
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_radio.scss
================================================
@use '../colors';

radio {
  -gtk-icon-source: -gtk-recolor(url('../assets/symbolic/radio.symbolic.png'));
  -gtk-icon-transform: scale(0);
  color: colors.$white-strongest;
  border: 0.2em solid colors.$white-weakest;
  border-radius: 100%;
  padding: 0.1em;
  min-width: 0.6em;
  min-height: 0.6em;

  // TODO: extract transitions into separate directory
  transition: -gtk-icon-transform 200ms;

  &:hover {
    border-color: colors.$white-weak;
  }

  &:active, &:checked {
    background: colors.$white-weakest;
  }

  &:checked {
    -gtk-icon-transform: scale(1);
    border-color: colors.$accent-primary;
    background: colors.$accent-primary;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_radiobutton.scss
================================================
radiobutton {
  label { padding-left: 5px; }
  &:disabled { opacity: 0.38; }
}

================================================
FILE: scss/gtk-3.0/widgets/_revealer.scss
================================================
@use "../colors";
@use "../config";

revealer {
  frame.app-notification border {
    border-radius: config.$radius;
    background: colors.$surface-moderate;
    padding: config.$spacing-medium;
  }

  @each $side in ('top', 'right', 'bottom', 'left') {
    &.#{$side} frame.app-notification border {
      margin-#{$side}: config.$spacing-medium;
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_rubberband.scss
================================================
@use "sass:color";
@use '../colors';
@use '../config';

rubberband, .rubberband {
  background-color: colors.$white-weakest;
  border: config.$border-size solid color.change(colors.$accent-primary, $alpha: config.$tint-medium);
}

================================================
FILE: scss/gtk-3.0/widgets/_scale.scss
================================================
@use '../colors';

scale {
  padding: 8px 0;

  contents {

    trough {
      background: colors.$surface-moderate;
      slider {
        background: lighten(colors.$surface-moderate, 25%);
        padding: 8px;
        margin: -5px;
        border-radius: 100%;
      }
      highlight {
        background: colors.$accent-primary;
      }
    }
  }

  // TODO: marks can be at the top or bottom, maybe also on the right or left depending on scale.horizontal/vertical
  marks {
    mark {
      padding-top: 5px;
      indicator {
        color: colors.$surface-moderate;
        min-height: 8px;
        min-width: 1px;
      }
    }
  }

  &:disabled { opacity: 0.3; }
}

================================================
FILE: scss/gtk-3.0/widgets/_scrollbar.scss
================================================
@use '../colors';

scrollbar {
  -GtkScrollbar-has-backward-stepper: false;
  -GtkScrollbar-has-forward-stepper: false;

  slider {
    padding: 0.2em;
    border-radius: 1em;
    background: colors.$white-weakest;
    &:hover { background: colors.$white-weak;}
    &:active { background: colors.$accent-primary; }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_separator.scss
================================================
@use '../colors';

separator {
  background-image: image(colors.$white-weakest);
  background-size: 1px 1px;
  background-position: center center;

  min-width: 7px;
  min-height: 7px;

  background-repeat: repeat-x;
  margin: -3px 0;

  &.vertical, .horizontal > & {
    background-repeat: repeat-y;
    margin: 0 -3px;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_spinbutton.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

spinbutton {

  button {
    border: config.$border-size solid transparent;
  }

  &:focus {
    button {
      &:hover {
        background-clip: padding-box;
      }
      border-color: color.change(colors.$purple-normal, $alpha: config.$tint-strong);
    }
  }

  &:disabled {
    opacity: config.$disabled-opacity;
  }

  &.horizontal {
    :nth-child(3) {
      border-radius: config.$radius 0 0 config.$radius;
      border-right: 0;
    }
  
    :nth-child(4) {
      border-radius: 0;
      border-width: config.$border-size 0;
    }
  
    :nth-child(5) {
      border-radius: 0 config.$radius config.$radius 0;
      border-left: 0;
    }
  }

  &.vertical {
    entry {
      padding: config.$spacing-medium 0;
    }

    :nth-child(3) {
      border-radius: config.$radius config.$radius 0 0;
      border-bottom: 0;
    }
  
    :nth-child(4) {
      border-radius: 0;
      border-width: 0 config.$border-size;
    }
  
    :nth-child(5) {
      border-radius: 0 0 config.$radius config.$radius;
      border-top: 0;
    }
  }

  .linked.horizontal & {
    &:not(:first-child) {
      :nth-child(3) { border-top-left-radius: 0; }
      :nth-child(5) { border-bottom-left-radius: 0; }
    }

    &:not(:last-child) {
      :nth-child(3) { border-top-right-radius: 0; }
      :nth-child(5) { border-bottom-right-radius: 0; }
    }
  }

  .linked.vertical & {
    &:not(:first-child) {
      :nth-child(3) { border-top-left-radius: 0; }
      :nth-child(5) { border-top-right-radius: 0; }
    }

    &:not(:last-child) {
      :nth-child(3) { border-bottom-left-radius: 0; }
      :nth-child(5) { border-bottom-right-radius: 0; }
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_spinner.scss
================================================
@use '../colors';

@keyframes rotate {
  to { -gtk-icon-transform: rotate(1turn); }
}

spinner {
  -gtk-icon-source: none;
  &:checked {
    -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
    animation: rotate 1s linear infinite;
  }

  &:disabled { opacity: 0.3; }
}

================================================
FILE: scss/gtk-3.0/widgets/_switch.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

switch {
  background: colors.$white-weakest;
  border-radius: 1em;
  min-width: 3em;
  border: config.$border-size solid transparent;

  slider {
    background: colors.$white-moderate;
    border-radius: 100%;
    min-width: 1.5em;
    min-height: 1.5em;
  }

  :nth-child(2) { color: transparent; }
  :nth-child(3) { color: colors.$white-moderate; }

  &:checked {
    background: color.change(colors.$accent-primary, $alpha: config.$tint-weak);
    
    slider {
      background: color.change(colors.$accent-primary, $alpha: config.$tint-strong);
    }

    :nth-child(2) { color: colors.$white-strong; }
    :nth-child(3) { color: transparent; }
  }

  &:disabled { opacity: config.$disabled-opacity; }

  &:hover {
    slider {
      box-shadow: 0 0 0 config.$spacing-small colors.$white-weak;
    }

    &:checked slider {
      box-shadow: 0 0 0 config.$spacing-small color.change(colors.$accent-primary, $alpha: config.$tint-weak);
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_tabs.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

tabs {
  background: colors.$surface-strongest;

  @each $class, $side in (
    'top': 'bottom',
    'right': 'left',
    'bottom': 'top',
    'left': 'right'
  ) {
    .#{$class} > & {
      border-#{$side}: config.$border-size solid colors.$surface-moderate;
      tab {
        border-#{$side}: config.$border-size solid transparent;
        margin-#{$side}: -#{config.$border-size};
      }
    }
  }

  tab {
    padding: config.$spacing-medium;
    color: colors.$white-moderate;

    header &:checked {
      border-color: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
      color: colors.$white-strong;
    }

    header &:hover:not(:checked) {
      border-color: colors.$white-weakest;
      color: colors.$white-strong;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_textview.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

textview {
  background: colors.$white-weakest;
  padding: config.$spacing-medium config.$spacing-small;

  &:disabled {
    opacity: config.$disabled-opacity;
  }

  selection {
    background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
    color: colors.$white-strongest;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_toolbar.scss
================================================
@use '../colors';
@use '../config';

toolbar, .toolbar {
  background: colors.$surface-strong;
  padding: config.$spacing-medium;

  &.osd {
    background: colors.$surface-weak;
    padding: config.$spacing-medium;
    border-radius: config.$radius;
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_tooltip.scss
================================================
@use '../colors';
@use '../config';

tooltip {
  background: colors.$surface-weakest;

  > * {
    margin: config.$spacing-medium;
  }

  grid {
    label {
      margin: config.$spacing-small 0;
    }
    
    image {
      margin-right: config.$spacing-medium;
    }
  }
}


================================================
FILE: scss/gtk-3.0/widgets/_treeview.scss
================================================
@use 'sass:color';
@use '../colors';
@use '../config';

// TODO: check if full width horizontal separators are possible

treeview {
  -GtkTreeView-expander-size: 16;
  -GtkTreeView-grid-line-pattern: '';
  -GtkTreeView-tree-line-pattern: '';
  -GtkTreeView-horizontal-separator: 12;
  -GtkTreeView-vertical-separator: 12;

  border-left-color: colors.$white-weakest; // TODO: check if there is going to be a new way to define tree-lines
  border-top-color: colors.$white-weakest; // TODO: check if there is going to be a new way to define column-lines

  &:hover {
    background: colors.$white-weakest;
  }

  &:selected {
    background: color.change(colors.$accent-primary, $alpha: config.$tint-medium);
    color: colors.$white-strongest;
  }

  header { 
    button {
      padding: config.$spacing-medium;
      background: colors.$surface-strong;
      border-radius: 0;
      color: colors.$white-moderate;

      &:hover:not(:active) {
        color: colors.$white-strong;
        background: colors.$surface-strong;
      }

      &:not(:last-child) {
        // TODO: check if there is a way to thicken threeview borders (other than this one)
        border-right: 1px solid colors.$white-weakest;
      }
    }
  }
}

================================================
FILE: scss/gtk-3.0/widgets/_window.scss
================================================
@use '../colors';

window, assistant {
  background: colors.$surface-strongest;
  color: colors.$white-strong;
}

window {
  &.csd {
    decoration {
      box-shadow: 0 0 8px 0 black;
      margin: 8px;
    }
  }
}