Tabs-Pin-Manager-Extension/shared.css at main · alexandre-leng/Tabs-Pin-Manager-Extension · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/* Tabs Pin — Shared Design Tokens */
/* ================================================================ */

:root {
  /* Colors — Light theme */
  --primary-color: #0060df;
  --primary-hover: #0250bb;
  --primary-light: rgba(0, 96, 223, 0.1);
  --error-color: #d70022;
  --error-bg: rgba(215, 0, 34, 0.08);
  --success-color: #2ac3a2;
  --success-bg: rgba(42, 195, 162, 0.08);
  --warning-color: #e29b00;
  --warning-bg: rgba(226, 155, 0, 0.08);

  /* Surfaces — Light */
  --background-primary: #ffffff;
  --background-secondary: #f9f9fb;
  --background-tertiary: #f0f0f4;
  --background-elevated: #ffffff;

  /* Text — Light */
  --text-primary: #15141a;
  --text-secondary: #5b5b66;
  --text-muted: #8f8f9d;
  --text-link: #0060df;

  /* Borders — Light */
  --border-color: #d7d7db;
  --border-color-hover: #b1b1b9;

  /* Shadows — Light */
  --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Radius */
  --border-radius: 8px;
  --border-radius-large: 12px;
  --border-radius-small: 4px;

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-small: 12px;
  --font-size-base: 14px;
  --font-size-large: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 24px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-hover: #4c9aff;
    --primary-light: rgba(0, 221, 255, 0.1);
    --error-bg: rgba(255, 79, 79, 0.12);
    --success-bg: rgba(42, 195, 162, 0.12);
    --warning-bg: rgba(226, 155, 0, 0.12);

    --background-primary: #1c1b22;
    --background-secondary: #2b2a33;
    --background-tertiary: #42414d;
    --background-elevated: #2b2a33;

    --text-primary: #fbfbfe;
    --text-secondary: #cfcfd8;
    --text-muted: #8f8f9d;
    --text-link: #00ddff;

    --border-color: #52525e;
    --border-color-hover: #6f6f7e;

    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
}

/* Shared utility classes */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}