synced-flow/base.css at main · SyncedCo/synced-flow · 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
/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
@layer reset, tokens, base, app, layout, components, utilities;
@layer base {
  html {
    background: var(--sf-colour-background);
    color: var(--sf-colour-foreground);
    font-size: 100%;
    scroll-behavior: smooth;
  }

  body {
    background: var(--sf-colour-background);
    color: var(--sf-colour-foreground);
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    line-height: var(--sf-line-height-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    font-family: var(--sf-font-display);
    font-weight: 700;
    line-height: var(--sf-line-height-tight);
    text-wrap: balance;
  }

  :where(h1) { font-size: var(--sf-type-h1); }
  :where(h2) { font-size: var(--sf-type-h2); }
  :where(h3) { font-size: var(--sf-type-h3); }
  :where(h4) { font-size: var(--sf-type-h4); }
  :where(h5) { font-size: var(--sf-type-h5); }
  :where(h6) { font-size: var(--sf-type-h6); }
  :where(p, li, dd, figcaption) { text-wrap: pretty; }
  :where(a) {
    color: var(--sf-colour-link);
    text-decoration-color: color-mix(in oklch, currentColor 55%, transparent);
    text-decoration-skip-ink: auto;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }
  :where(a:hover) { color: var(--sf-colour-link-hover); }
  :where(strong, b) { font-weight: 800; }
  :where(small) { font-size: var(--sf-step--1); }
  :where(code, kbd, samp, pre) { font-family: var(--sf-font-mono); }
  :where(:not(pre) > code, kbd) {
    background: var(--sf-colour-surface-alt);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-sm);
    font-size: .9em;
    padding: .1em .35em;
  }
  :where(pre) {
    background: var(--sf-colour-surface-inset);
    border: 1px solid var(--sf-colour-border);
    border-radius: var(--sf-radius-panel);
    overflow-x: auto;
    padding: var(--sf-space-s);
  }
  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--sf-colour-border);
    margin-block: var(--sf-space-l);
  }
  :where(blockquote) {
    border-inline-start: 0.25rem solid var(--sf-colour-primary);
    color: var(--sf-colour-muted);
    padding-inline-start: var(--sf-space-s);
  }
  :where(label) { cursor: pointer; }
  :where(input, textarea, select) { color: inherit; }
  :where(textarea) { resize: vertical; }
  :where(button:not(:disabled), [role="button"]:not(:disabled), a[href]) { cursor: pointer; }
  :where(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
  :where(:focus-visible) { outline: 0.125rem solid var(--sf-colour-ring); outline-offset: .2rem; }
  :where(:target) { scroll-margin-block: var(--sf-space-l); }
  ::selection { background: color-mix(in oklch, var(--sf-colour-primary) 28%, transparent); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    :where(:focus-visible) {
      outline: 2px solid Highlight;
      outline-offset: .2rem;
    }

    ::selection {
      background: Highlight;
      color: HighlightText;
    }
  }
}