sync-extension-api/theme.css at main · sync-buzz/sync-extension-api · 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
/*
 * The Sync theme, as an extension compiles against it.
 *
 * GENERATED by `pnpm api:publish` in the Sync repository, from the
 * `@theme inline` block of `src/app/globals.css`. Do not edit: the next
 * publish overwrites it.
 *
 * `inline` is the whole point. Every name here resolves to a `var()` that
 * the window defines on `:root`, so a utility built from this stylesheet
 * carries a reference and never a value. That is what keeps one design
 * system in one place while every extension compiles its own rules.
 */

@theme inline {
  /* System typography only. No downloaded or remote fonts. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", system-ui, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Desktop density: a 4px spacing grid drives every numeric utility. */
  --spacing: 4px;

  --text-xs: 11px;
  --text-xs--line-height: 14px;
  --text-sm: 12px;
  --text-sm--line-height: 16px;
  --text-base: 13px;
  --text-base--line-height: 18px;
  --text-lg: 15px;
  --text-lg--line-height: 20px;
  /*
   * One size above the interface scale, for the launch screen alone. The shell
   * has no brand mark, so at launch the name of the application has to do the
   * work an icon would, and it cannot do that at fifteen pixels in the middle
   * of an empty window.
   */
  --text-display: 26px;
  --text-display--line-height: 32px;

  --color-window: var(--surface-window);
  --color-sidebar: var(--surface-sidebar);
  --color-panel: var(--surface-panel);
  --color-workspace: var(--surface-workspace);
  --color-raised: var(--surface-raised);

  --color-fg: var(--text-primary);
  --color-fg-secondary: var(--text-secondary);
  --color-fg-tertiary: var(--text-tertiary);

  --color-separator: var(--separator);
  --color-separator-strong: var(--separator-strong);
  --color-hover: var(--state-hover);
  --color-selected: var(--state-selected);
  --color-focus: var(--focus-ring);
  --color-scrim: var(--scrim);

  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-danger: var(--status-danger);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.5);

  --ease-shell: var(--motion-ease);
}