/** * Design system * * Every design token of the extension: palette, scales, semantic roles and * shared component metrics. * * Loaded first on every extension page and injected into LinkedIn. It defines * values and never applies them: no selector besides :root. Other stylesheets * never hardcode a colour, space, radius, duration or z-index. Every token is * prefixed --linkgif- because, once injected, it shares LinkedIn's :root. The * @font-face URL is absolute because a relative one resolves against * linkedin.com once injected. * * 1. Primitives Raw palette and scales. Read --linkgif-color-* only from * layer 2; read the scales (--linkgif-space-*, * --linkgif-radius-*, --linkgif-font-size-*) directly. * 2. Semantic What a value means: surface, text rank, state. The * vocabulary every stylesheet writes in. * 3. Component Metrics shared by components.css. A metric used by a * single page stays in that page's stylesheet. */ @font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/inter.woff2'); } /* ================================================ 1. Primitives — palette ================================================ */ :root { /* Neutrals — named after what they look like, not what they do. */ --linkgif-color-neutral-950: #08090a; --linkgif-color-neutral-900: #141516; --linkgif-color-neutral-850: #1c1c1f; --linkgif-color-neutral-800: #1f2123; --linkgif-color-neutral-500: #62666d; --linkgif-color-neutral-400: #8a8f98; --linkgif-color-neutral-200: #d0d6e0; --linkgif-color-neutral-50: #f7f8f8; /* Alpha whites — washes and borders that hold up over any surface underneath. */ --linkgif-color-white-8: rgb(255 255 255 / 8%); --linkgif-color-white-16: rgb(255 255 255 / 16%); /* Alpha blacks — scrims and drop shadows. */ --linkgif-color-black-40: rgb(0 0 0 / 40%); --linkgif-color-black-60: rgb(0 0 0 / 60%); --linkgif-color-black-70: rgb(0 0 0 / 70%); --linkgif-color-black-80: rgb(0 0 0 / 80%); /* Hues */ --linkgif-color-violet-500: #7170ff; --linkgif-color-violet-400: #828fff; --linkgif-color-violet-600: #5b5bd6; --linkgif-color-violet-700: #4f4fc4; --linkgif-color-purple-400: #c084fc; --linkgif-color-purple-300: #d3a5fc; --linkgif-color-green-500: #22c55e; --linkgif-color-amber-500: #f59e0b; --linkgif-color-red-500: #ef4444; --linkgif-color-red-600: #dc2626; --linkgif-color-red-700: #b91c1c; } /* ================================================ 1. Primitives — scales ================================================ */ :root { /* Typography — 16px base. Steps are absolute so a nested block never drifts. */ --linkgif-font: 'Inter', -apple-system, system-ui, sans-serif; --linkgif-font-size-2xs: 10px; /* attribution and legal micro-labels only */ --linkgif-font-size-xs: 12px; /* hints, badges, footnotes */ --linkgif-font-size-sm: 14px; /* labels, secondary body */ --linkgif-font-size-base: 16px; /* body */ --linkgif-font-size-lg: 18px; /* section heading */ --linkgif-font-size-xl: 20px; /* page or card title */ --linkgif-font-size-2xl: 24px; /* document title */ --linkgif-font-size-3xl: 30px; /* hero title, price */ --linkgif-font-weight-medium: 500; /* labels, quiet emphasis */ --linkgif-font-weight-semibold: 600; /* titles, buttons */ --linkgif-font-weight-bold: 700; /* hero titles, prices */ --linkgif-line-height-tight: 1; /* display numerals, where the box must hug the glyph */ --linkgif-line-height-snug: 1.3; /* a name stacked over a second line, in a fixed-height row */ --linkgif-line-height-base: 1.5; /* anything read as a sentence */ --linkgif-letter-spacing-tight: -0.02em; /* 30px and up, where default tracking looks loose */ --linkgif-letter-spacing-wide: 0.05em; /* uppercase badges and micro-labels */ /* Spacing — 4px steps. Gaps in the sequence are deliberate: the missing steps were never used, and offering them invites a 28px that means nothing. */ --linkgif-space-1: 4px; --linkgif-space-2: 8px; --linkgif-space-3: 12px; --linkgif-space-4: 16px; --linkgif-space-5: 20px; --linkgif-space-6: 24px; --linkgif-space-8: 32px; --linkgif-space-10: 40px; --linkgif-space-12: 48px; /* Radius */ --linkgif-radius-sm: 4px; /* focus ring on inline text links */ --linkgif-radius-base: 8px; /* controls: button, input, tile */ --linkgif-radius-lg: 12px; /* containers: card, modal */ --linkgif-radius-full: 9999px; /* pills, tracks, thumbs */ --linkgif-radius-circle: 50%; /* only for a box that is already square */ /* Motion */ --linkgif-duration-fast: 150ms; /* colour and opacity on a control the cursor is on */ --linkgif-duration-base: 300ms; /* everything else that moves */ --linkgif-duration-slow: 1000ms; /* one spinner revolution, entrance animations */ --linkgif-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Sizing */ --linkgif-icon-xs: 14px; /* chevrons, drag grips and remove crosses in a dense list */ --linkgif-icon-sm: 16px; /* stroke icons in toolbars, menus and list rows */ --linkgif-icon-base: 20px; /* icons in buttons and beside body text */ --linkgif-border-width-base: 1px; /* every hairline in the UI */ --linkgif-border-width-thick: 2px; /* spinner rings, where 1px disappears */ --linkgif-border-style: solid; --linkgif-underline-offset: 2px; /* text links, so the line clears the descenders */ } /* ================================================ 2. Semantic ================================================ */ :root { /* Surfaces — a depth ladder. Pick by what the element sits ON, never by how dark you want it to look. --linkgif-background the page itself (once per page) └─ --linkgif-background-card a block laid on the page (card, modal) └─ --linkgif-background-elevated a control laid on a block (input, track) Two tokens sit outside the ladder: --linkgif-background-subtle a translucent wash that works over any of the three, for controls that must not commit to a depth (icon button, category tab). --linkgif-background-scrim dims the page behind a modal. */ --linkgif-background: var(--linkgif-color-neutral-950); --linkgif-background-card: var(--linkgif-color-neutral-900); --linkgif-background-elevated: var(--linkgif-color-neutral-850); --linkgif-background-subtle: var(--linkgif-color-white-8); --linkgif-background-subtle-hover: var(--linkgif-color-white-16); --linkgif-background-disabled: var(--linkgif-color-neutral-800); --linkgif-background-scrim: var(--linkgif-color-black-70); --linkgif-background-overlay: var(--linkgif-color-black-60); /* a control laid over an image */ --linkgif-background-overlay-hover: var(--linkgif-color-black-80); /* Derived from --linkgif-color-neutral-900, not a duplicated hex — requires Chrome 119+ (relative color syntax), which is why minimum_chrome_version is 119. Pair with --linkgif-blur-glass. */ --linkgif-background-glass: rgb(from var(--linkgif-color-neutral-900) r g b / 85%); /* Text — a rank ladder, brightest first. Pick by how much the words matter, not by how much contrast you want. */ --linkgif-text-primary: var(--linkgif-color-neutral-50); /* headings, values, the answer */ --linkgif-text-secondary: var(--linkgif-color-neutral-200); /* body copy, feature lists */ --linkgif-text-muted: var(--linkgif-color-neutral-400); /* labels, hints, quiet actions */ --linkgif-text-faint: var(--linkgif-color-neutral-500); /* legal, placeholders, attribution */ --linkgif-text-on-accent: var(--linkgif-color-neutral-50); /* on an accent or pro fill */ /* Borders --linkgif-border the default 1px hairline. Use the shorthand. --linkgif-border-color-hover raise the hairline when the cursor is on the element. For a coloured border, compose the parts: border: var(--linkgif-border-width-base) var(--linkgif-border-style) var(--linkgif-error); */ --linkgif-border-color: var(--linkgif-color-white-8); --linkgif-border-color-hover: var(--linkgif-color-white-16); --linkgif-border: var(--linkgif-border-width-base) var(--linkgif-border-style) var(--linkgif-border-color); /* Brand — the primary action on any surface. */ --linkgif-accent: var(--linkgif-color-violet-500); --linkgif-accent-hover: var(--linkgif-color-violet-400); /* A filled control under white text: holds 4.5:1, which --linkgif-accent does not. */ --linkgif-accent-strong: var(--linkgif-color-violet-600); --linkgif-accent-strong-hover: var(--linkgif-color-violet-700); /* Pro — paid plans and Pro-only controls. Never a primary action. */ --linkgif-pro: var(--linkgif-color-purple-400); --linkgif-pro-hover: var(--linkgif-color-purple-300); /* Status — outcome of an operation or a threshold, never decoration. --linkgif-warning is for something the user can still avoid; --linkgif-error for what has already gone wrong. */ --linkgif-success: var(--linkgif-color-green-500); --linkgif-warning: var(--linkgif-color-amber-500); --linkgif-error: var(--linkgif-color-red-500); /* A filled destructive button: white text holds 4.5:1 on it, not on --linkgif-error. */ --linkgif-error-strong: var(--linkgif-color-red-600); --linkgif-error-strong-hover: var(--linkgif-color-red-700); /* Accent and status tints — quieter versions for secondary controls and soft borders. */ --linkgif-background-accent: color-mix( in srgb, var(--linkgif-accent) 16%, var(--linkgif-background-elevated) ); --linkgif-background-accent-hover: color-mix( in srgb, var(--linkgif-accent) 32%, var(--linkgif-background-elevated) ); --linkgif-border-color-accent: color-mix(in srgb, var(--linkgif-accent) 40%, transparent); --linkgif-border-color-accent-faint: color-mix(in srgb, var(--linkgif-accent) 25%, transparent); --linkgif-border-color-error: color-mix(in srgb, var(--linkgif-error) 30%, transparent); /* Behind --linkgif-pro text, and around a Pro control. */ --linkgif-background-pro: color-mix(in srgb, var(--linkgif-pro) 12%, transparent); --linkgif-border-color-pro: color-mix(in srgb, var(--linkgif-pro) 40%, transparent); /* Behind error text: at 8% it keeps --linkgif-error at 4.5:1. */ --linkgif-background-error: color-mix(in srgb, var(--linkgif-error) 8%, transparent); --linkgif-border-color-success: color-mix(in srgb, var(--linkgif-success) 30%, transparent); /* Focus — every interactive element carries this on :focus-visible. The one exception is a text field, where the border alone signals focus. The 2px offset sits below the 4px spacing scale, so it stays a literal. */ --linkgif-focus-ring: var(--linkgif-border-width-thick) var(--linkgif-border-style) var(--linkgif-accent); --linkgif-focus-ring-offset: 2px; /* Inside a list or menu, where a ring drawn outside the control would be clipped. */ --linkgif-focus-ring-inset: calc(-1 * var(--linkgif-border-width-thick)); /* Motion composites — pair a duration with the easing so a rule never picks one without the other. Name the property explicitly: transition: background var(--linkgif-transition-fast); */ --linkgif-transition-fast: var(--linkgif-duration-fast) var(--linkgif-ease-out); --linkgif-transition-base: var(--linkgif-duration-base) var(--linkgif-ease-out); /* Elevation — one treatment, for a surface that floats free of the layout (toast, popup shell). Pair it with a backdrop-filter: the inset highlight only reads as glass over a blurred backdrop. */ --linkgif-shadow-glass: inset 0 1px 1px var(--linkgif-color-white-16), 0 var(--linkgif-space-2) var(--linkgif-space-6) var(--linkgif-color-black-40); --linkgif-blur-glass: blur(20px) saturate(150%); /* under a --linkgif-background-glass panel */ --linkgif-blur-scrim: blur(8px); /* under a scrim, to mute what shows through */ /* Stacking order — the full set, ascending. A rule that needs a z-index takes one of these; a new layer is added here, never inlined. */ --linkgif-z-raised: 1; /* lifts a sibling within its own stacking context */ --linkgif-z-modal: 1000; /* the picker, over LinkedIn's chrome */ --linkgif-z-fab: 9999; /* the floating button, over LinkedIn's sticky bars */ --linkgif-z-toast: 10000; /* transient message, over the button */ --linkgif-z-overlay: 10001; /* blocking auth or limit prompt, over everything */ } /* ================================================ 3. Component ================================================ */ :root { /* Card — every page that uses .card. One --linkgif-card-padding for all of them; a page may still shrink the resolved padding locally at narrow widths. */ --linkgif-card-padding: var(--linkgif-space-8); --linkgif-card-radius: var(--linkgif-radius-lg); --linkgif-card-background: var(--linkgif-background-card); --linkgif-card-border: var(--linkgif-border); /* Button — every page */ --linkgif-button-padding: var(--linkgif-space-3) var(--linkgif-space-4); --linkgif-button-radius: var(--linkgif-radius-base); --linkgif-button-font-weight: var(--linkgif-font-weight-semibold); /* Text field — every .input, on extension pages and in the LinkedIn picker. */ --linkgif-input-height: var(--linkgif-space-10); --linkgif-input-padding-inline: var(--linkgif-space-4); --linkgif-input-radius: var(--linkgif-radius-base); --linkgif-input-background: var(--linkgif-background-elevated); }