Image-Editor/theme.css at main · sham-jadhav03/Image-Editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Colors - HSL for flexibility */
    --hue-primary: 260;
    /* Violet/Indigo */
    --hue-danger: 0;
    --hue-success: 145;

    /* Base Backgrounds */
    --bg-main: #0f0f13;
    --bg-panel: rgba(30, 30, 35, 0.7);
    /* Glass effect base */
    --bg-panel-hover: rgba(40, 40, 45, 0.8);

    /* Interactive Elements */
    --primary-color: hsl(var(--hue-primary), 100%, 65%);
    --primary-hover: hsl(var(--hue-primary), 100%, 70%);
    --bg-active-color: hsla(var(--hue-primary), 80%, 60%, 0.15);

    /* Utility Colors */
    --bg-danger-color: hsl(var(--hue-danger), 80%, 55%);
    --bg-success-color: hsl(var(--hue-success), 65%, 45%);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #52525b;
    --text-on-accent: #ffffff;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    /* Effects */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 15px hsla(var(--hue-primary), 70%, 60%, 0.3);

    --backdrop-blur: blur(12px);
    --border-light: 1px solid rgba(255, 255, 255, 0.1);
    --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}