apple-design-skill/tokens.css at main · naplesblue/apple-design-skill · 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
/* ════════════════════════════════════════════════════════════════
   Apple Liquid Glass — design tokens
   Drop into any project. Reference everything via var(--…);
   never hard-code a raw value that a token already names.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrals (the interface skeleton) ── */
  --bg:        #f5f5f7;   /* page ground — COOL grey-white, never warm/cream */
  --surface:   #ffffff;   /* panels / cards */
  --hover:     #fbfbfd;   /* row hover tint */
  --text:      #1d1d1f;   /* primary text / titles */
  --text-body: #424245;   /* long-form body */
  --text-2:    #6e6e73;   /* secondary / summary / meta */
  --text-3:    #86868b;   /* tertiary / captions */
  --text-4:    #aeaeb2;   /* placeholder / quaternary */
  --faint:     #d2d2d7;   /* index numbers, arrows, dividers (very light) */
  --hairline:  rgba(0,0,0,0.07);   /* the divider line — used everywhere */

  /* ── Accents (emphasis ONLY — body stays grayscale) ── */
  --accent:      #0071e3;  /* Apple blue — primary action / link / focus */
  --accent-link: #0066cc;  /* link/tag text on tinted ground */
  --indigo:      #5e5ce6;  /* gradient 2nd stop / supporting */
  --x-blue:      #1d9bf0;  /* platform / brand mark (e.g. X) */
  --heat:        #ff6b00;  /* heat / "hottest" accent */
  --heat-bg:     rgba(255,107,0,0.1);
  --live:        #30d158;  /* live / online (pulsing dot) */

  /* ── Signature gradients (hero / CTA / placeholder art ONLY) ── */
  --grad-blue: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  --grad-warm: linear-gradient(135deg, #ff9f0a 0%, #ff375f 100%);
  --grad-green:linear-gradient(135deg, #30d158 0%, #0a84ff 100%);
  --grad-cta:  linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);

  /* ── Type ── */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
          'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Radius (semantic tiers — don't invent in-between values) ── */
  --r-pill:  999px;  /* pills / segmented controls / tags / buttons */
  --r-chip:  6px;    /* tiny marks (platform badge, brand monogram) */
  --r-thumb: 12px;   /* thumbnails / small squares */
  --r-card:  18px;   /* standard card */
  --r-panel: 22px;   /* large panel / section container */
  --r-hero:  26px;   /* hero / CTA / focal card */
  --r-sheet: 16px;   /* overlay sheet/modal buttons — between thumb and card, for stacked full-width actions */

  /* ── Shadow (two-layer: tight contact + soft spread; never one hard shadow) ── */
  --sh-card:    0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --sh-panel:   0 1px 3px rgba(0,0,0,0.05), 0 14px 40px rgba(0,0,0,0.05);
  --sh-lift:    0 12px 32px rgba(0,0,0,0.1);          /* hover lift, with translateY(-3px) */
  --sh-cta:     0 20px 54px rgba(0,113,227,0.24);     /* colored CTA — tinted shadow */
  --sh-overlay: 0 2px 8px rgba(0,0,0,0.10), 0 30px 80px rgba(0,0,0,0.24); /* modal/sheet/popover — deeper than panel, still two-layer */

  /* ── Component greys (semantic — don't hand-pick a one-off grey) ── */
  --track:  #e8e8ed;  /* progress/meter track, toggle-off track — visible-but-quiet fill grey */

  /* ── Layout ── */
  --max-read: 720px;   /* reading column */
  --max-grid: 1080px;  /* grid / dense column */
  --pad-x:    22px;    /* container side padding */
}

/* Base reset + page ground (optional — include if not already set) */
/*
*  { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
*/

/* Liquid-glass frost — ONLY on sticky nav / overlay / colored-CTA labels */
.glass-nav {
  background: rgba(245,245,247,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.glass-chip {            /* glass element ON a colored ground (needs blur orbs behind) */
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Live/online pulsing dot */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}

/* Motion easing (see motion.md) — spring-like curves, CSS-first */
:root {
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* enter: sheets/dialogs/popovers (~400ms) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* small moves: hover, segmented slide (~200ms) */
}