-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvariables.css
More file actions
112 lines (97 loc) · 4.2 KB
/
variables.css
File metadata and controls
112 lines (97 loc) · 4.2 KB
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
107
108
109
110
111
112
/* ============================================================
Coretab · variables.css
Design tokens, fonts & mask-based icons (external SVG files)
============================================================ */
/* ------ Inter Variable ------------------------------------ */
@font-face {
font-family: "InterVariable";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
font-family: "InterVariable";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("assets/fonts/InterVariable-Italic.woff2") format("woff2");
}
/* ------ Icon masks (external SVG files) ------------------- */
:root {
--icon-search: url("assets/icons/search.svg");
--icon-settings: url("assets/icons/settings.svg");
--icon-close: url("assets/icons/close.svg");
--icon-delete: url("assets/icons/delete.svg");
--icon-drag: url("assets/icons/drag.svg");
--icon-add: url("assets/icons/add.svg");
--icon-chevron: url("assets/icons/chevron.svg");
--icon-upload: url("assets/icons/upload.svg");
--icon-download: url("assets/icons/download.svg");
--icon-warning: url("assets/icons/warning.svg");
/* Glass surfaces */
--glass-bg: rgba(255 255 255 / 0.08);
--glass-bg-hover: rgba(255 255 255 / 0.14);
--glass-border: rgba(255 255 255 / 0.12);
--glass-blur: 16px;
/* Text */
--text-primary: rgba(255 255 255 / 0.95);
--text-secondary: rgba(255 255 255 / 0.55);
--text-muted: rgba(255 255 255 / 0.32);
/* Accent */
--accent: rgba(255 255 255 / 0.85);
--danger: rgba(255 90 90 / 0.85);
/* Sidebar */
--sidebar-w: 340px;
--sidebar-bg: rgba(14 14 16 / 0.82);
/* Motion */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 160ms;
--dur-med: 280ms;
--dur-slow: 420ms;
/* Typography */
--font-body: "InterVariable", system-ui, -apple-system, sans-serif;
--font-mono: "SF Mono", "Fira Code", ui-monospace, monospace;
--font-serif: ui-serif, Georgia, serif;
--clock-weight: 500;
--clock-opsz: 0;
--clock-tracking: -0.02em;
--clock-size-sm: clamp(3rem, 8vw, 4.5rem);
--clock-size-md: clamp(4rem, 11vw, 7rem);
--clock-size-lg: clamp(5rem, 15vw, 10rem);
--clock-size: var(--clock-size-md);
/* Overlay */
--overlay-opacity: 0;
/* Search */
--search-radius: 100px;
/* Quick links */
--quick-link-radius: 100px;
/* Form arrow */
--chevron-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ------ Icon utility classes ------------------------------ */
.icon {
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background-color: currentColor;
pointer-events: none;
}
.icon-search { -webkit-mask-image: var(--icon-search); mask-image: var(--icon-search); }
.icon-settings { -webkit-mask-image: var(--icon-settings); mask-image: var(--icon-settings); }
.icon-close { -webkit-mask-image: var(--icon-close); mask-image: var(--icon-close); }
.icon-delete { -webkit-mask-image: var(--icon-delete); mask-image: var(--icon-delete); }
.icon-drag { -webkit-mask-image: var(--icon-drag); mask-image: var(--icon-drag); }
.icon-add { -webkit-mask-image: var(--icon-add); mask-image: var(--icon-add); }
.icon-chevron { -webkit-mask-image: var(--icon-chevron); mask-image: var(--icon-chevron); }
.icon-upload { -webkit-mask-image: var(--icon-upload); mask-image: var(--icon-upload); }
.icon-download { -webkit-mask-image: var(--icon-download); mask-image: var(--icon-download); }
.icon-warning { -webkit-mask-image: var(--icon-warning); mask-image: var(--icon-warning); }