mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
64 lines
2.3 KiB
SCSS
64 lines
2.3 KiB
SCSS
/**
|
|
* @file PHPFlasher Core Theme Styles
|
|
* @description Root styling and CSS variables for the PHPFlasher notification system
|
|
* @author Younes ENNAJI
|
|
*/
|
|
|
|
@use "sass:color";
|
|
@use "sass:meta";
|
|
|
|
/**
|
|
* PHPFlasher CSS Variable System
|
|
*
|
|
* This defines the design token system used throughout all themes.
|
|
* By changing these variables, you can customize the appearance of all themes.
|
|
*/
|
|
:root {
|
|
// State Colors - Used for different notification types
|
|
--fl-success: #10b981; // Green for success messages
|
|
--fl-info: #3b82f6; // Blue for information messages
|
|
--fl-warning: #f59e0b; // Amber for warning messages
|
|
--fl-error: #ef4444; // Red for error messages
|
|
|
|
// Light variants - Used for backgrounds and progress bars
|
|
--fl-success-light: color-mix(in srgb, var(--fl-success) 10%, transparent);
|
|
--fl-info-light: color-mix(in srgb, var(--fl-info) 10%, transparent);
|
|
--fl-warning-light: color-mix(in srgb, var(--fl-warning) 10%, transparent);
|
|
--fl-error-light: color-mix(in srgb, var(--fl-error) 10%, transparent);
|
|
|
|
// Base colors - Used for text and backgrounds
|
|
--fl-white: #ffffff;
|
|
--fl-black: #000000;
|
|
--fl-bg-light: var(--fl-white);
|
|
--fl-bg-dark: rgb(15, 23, 42);
|
|
--fl-text-light: rgb(75, 85, 99);
|
|
--fl-text-dark: var(--fl-white);
|
|
|
|
// Appearance - Used for consistent styling across themes
|
|
--fl-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--fl-border-radius: 4px;
|
|
--fl-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--fl-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.35);
|
|
--fl-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
|
|
|
// Legacy Support - For backward compatibility
|
|
--background-color: var(--fl-bg-light);
|
|
--text-color: var(--fl-text-light);
|
|
--dark-background-color: var(--fl-bg-dark);
|
|
--dark-text-color: var(--fl-text-dark);
|
|
--success-color: var(--fl-success);
|
|
--info-color: var(--fl-info);
|
|
--warning-color: var(--fl-warning);
|
|
--error-color: var(--fl-error);
|
|
--success-color-light: var(--fl-success-light);
|
|
--info-color-light: var(--fl-info-light);
|
|
--warning-color-light: var(--fl-warning-light);
|
|
--error-color-light: var(--fl-error-light);
|
|
}
|
|
|
|
// Import component styles
|
|
@include meta.load-css("wrapper");
|
|
@include meta.load-css("container");
|
|
@include meta.load-css("progress");
|
|
@include meta.load-css("icons");
|