openspec

2026-07-24 11:52:07 -03:00
parent fedb2b87df
commit d346937782
6 changed files with 99 additions and 0 deletions
@@ -0,0 +1,99 @@
 # swaync-groovebox-theme Specification
 ## Purpose
 TBD - created by archiving change swaync-groovebox-theme. Update Purpose after archive.
 ## Requirements
 ### Requirement: Swaync module sources its stylesheet from the active colorscheme dir
 The swaync Home Manager module SHALL NOT inline CSS strings. Instead, the module SHALL ensure that `~/.config/swaync/style.css` and `~/.config/swaync/colors.css` are sourced from the active theme dir via out-of-store symlinks to `~/.config/colorschemes/.active/swaync/`.
 #### Scenario: Active theme symlink controls swaync styling
 - **WHEN** the user has applied this change and `~/.config/colorschemes/.active` points at `groovebox`
 - **THEN** `~/.config/swaync/style.css` resolves through `~/.config/colorschemes/.active/swaync/style.css`
 - **AND** `~/.config/swaync/colors.css` resolves through `~/.config/colorschemes/.active/swaync/colors.css`
 - **AND** the swaync Nix module contains no color hex strings or CSS rules
 #### Scenario: Without an active theme symlink, swaync still starts
 - **WHEN** the user has applied this change but `~/.config/colorschemes/.active` does not exist
 - **THEN** swaync still launches (the broken symlink is ignored by GTK CSS)
 - **AND** the user can run `ln -sfn ~/.config/colorschemes/groovebox ~/.config/colorschemes/.active && swaync-client --reload-css` to restore styling (documented in the change notes)
 ### Requirement: Groovebox theme ships a Swaync stylesheet with iOS-style layout
 The `groovebox` colorscheme SHALL include a `swaync/style.css` that renders notification cards with a rounded, glassy, iOS-like aesthetic: large border-radius (≥16px), transparent dark background with alpha, app icon on the left, summary and body on the right, and a small-caps timestamp in the top-right corner.
 #### Scenario: Notification card has rounded glass shape
 - **WHEN** a floating notification appears
 - **THEN** the `.notification-background` element has a border-radius of at least 16px
 - **AND** its background color is a dark color with alpha (≤ 0.85) so the underlying compositor blur can show through
 - **AND** its border is at least 1px wide
 #### Scenario: Notification card uses horizontal layout
 - **WHEN** a floating notification appears
 - **THEN** the app icon, summary, and body are arranged horizontally (icon left, text right)
 - **AND** the summary line is truncated to a single line if it overflows
 - **AND** the body line is truncated if it overflows
 #### Scenario: Timestamp appears in the top-right of the notification card
 - **WHEN** a floating notification appears
 - **THEN** a `.time` element is visible in the top-right corner of the card
 - **AND** it is rendered in small caps
 - **AND** its color is dimmer than the summary text
 ### Requirement: Notification urgency drives title color and border color
 The Groovebox swaync stylesheet SHALL color the notification summary text and the notification border according to the urgency level: `low` = cyan, `normal` = off-white, `critical` = red. The colors SHALL be defined via CSS custom properties in `colors.css` so a future theme override is a one-line change.
 #### Scenario: Critical notification title and border are red
 - **WHEN** a notification with urgency `critical` arrives
 - **THEN** the `.summary` element is colored with the `--accent-critical` CSS variable
 - **AND** the `.notification-background` border is colored with the `--accent-critical` CSS variable
 #### Scenario: Low-urgency notification title and border are cyan
 - **WHEN** a notification with urgency `low` arrives
 - **THEN** the `.summary` element is colored with the `--accent-low` CSS variable
 - **AND** the `.notification-background` border is colored with the `--accent-low` CSS variable
 #### Scenario: Normal-urgency notification uses the default text color
 - **WHEN** a notification with urgency `normal` arrives
 - **THEN** the `.summary` element is colored with the `--accent-normal` CSS variable
 - **AND** the `.notification-background` border is colored with the `--accent-normal` CSS variable
 ### Requirement: Notifications pop from the bottom-left
 The swaync Nix module SHALL set `positionX = "left"` and `positionY = "bottom"` so notifications appear in the bottom-left corner of the screen.
 #### Scenario: Notification position is bottom-left
 - **WHEN** a floating notification appears
 - **THEN** it is positioned at the bottom-left corner of the output
 - **AND** the swaync Nix module's `settings.positionX` is `"left"` and `settings.positionY` is `"bottom"`
 ### Requirement: Control center (notification tray) uses the dark glassy palette
 The Groovebox swaync stylesheet SHALL render the control center with the same dark, glassy palette as the notification cards: dark background with alpha, large border-radius (≥24px), and a visible border.
 #### Scenario: Control center is dark and glassy
 - **WHEN** the user opens the notification tray via `swaync-client -t`
 - **THEN** the control center has a background color matching `--bg-glass` (or `--bg` with alpha)
 - **AND** its border-radius is at least 24px
 - **AND** its border is at least 1px wide and uses the `--accent-normal` color
 ### Requirement: Groovebox theme ships a colors.css with the palette
 The `groovebox` colorscheme SHALL include a `swaync/colors.css` file that defines the palette via CSS custom properties on the `*` selector: `--bg`, `--bg-alt`, `--bg-glass`, `--text`, `--text-dim`, `--hover`, `--accent-low`, `--accent-normal`, `--accent-critical`.
 #### Scenario: Groovebox palette is defined
 - **WHEN** the user inspects `~/.config/colorschemes/groovebox/swaync/colors.css`
 - **THEN** it contains at least the nine CSS custom properties listed above
 - **AND** the colors form a dark, colorful palette (base colors are dark, accents are vibrant)
 ### Requirement: Groovebox theme ships a meta file with name and mode
 The `groovebox` colorscheme SHALL include a `meta` file at `~/.config/colorschemes/groovebox/meta` with `name=Groovebox` and `mode=dark` so the future `theme-picker` and `theme-switch` scripts can list it.
 #### Scenario: Groovebox meta file is present
 - **WHEN** the user reads `~/.config/colorschemes/groovebox/meta`
 - **THEN** it contains a line `name=Groovebox`
 - **AND** it contains a line `mode=dark`
 - **AND** the file is plain text with one KEY=value per line