Skip to content

Commit bdad34f

Browse files
Jing-yilinclaude
andauthored
The app's examples, as community projects (#5)
Twenty of the app's examples join Apple Settings, each packed with sp pack -o from its gen.py sources in super-prototyping/canvases. Apple Settings gains its canvas thumbnail. Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
1 parent e0dcfd0 commit bdad34f

2,769 files changed

Lines changed: 111738 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Apple Calendar - Design Tokens</title>
5+
<style>
6+
:root{
7+
--ac-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
8+
9+
/* Surface */
10+
--ac-bg:#FFFFFF;
11+
--ac-black:#000000;
12+
--ac-white:#FFFFFF;
13+
--ac-sep:#C7C7CC;
14+
--ac-event-bg:rgba(27,173,248,.20);
15+
--ac-event-bd:#1BADF8;
16+
--ac-blur:rgba(255,255,255,.70);
17+
--ac-sheet:#D9D9D9;
18+
--ac-scrim:rgba(0,0,0,.20);
19+
--ac-modal:#FFFFFF;
20+
--ac-group:#F2F2F7;
21+
--ac-fill:#EEEEEF;
22+
--ac-btn:#E6E6EB;
23+
--ac-card:#FFFFFF;
24+
--ac-elev:#F2F2F7;
25+
--ac-kbd:#D0D3DA;
26+
--ac-key:#FFFFFF;
27+
--ac-key2:#A9AFBC;
28+
--ac-key-bd:#6C6C71;
29+
30+
/* Ink */
31+
--ac-ink:#000000;
32+
--ac-grey:#8E8E93;
33+
--ac-grey2:#8A8A8E;
34+
--ac-hint:#C5C5C7;
35+
--ac-dim:#BCBCC1;
36+
--ac-red:#FF382B;
37+
--ac-blue:#007BFE;
38+
--ac-event-ink:#106895;
39+
40+
/* Radius */
41+
--ac-r-phone:52px;
42+
--ac-r-pill:100px;
43+
--ac-r-event:5px;
44+
--ac-r-sheet:10px;
45+
--ac-r-btn:14px;
46+
--ac-r-alert:13px;
47+
--ac-r-card:10px;
48+
--ac-r-field:6px;
49+
50+
/* Type */
51+
--ac-t-r11:400 11px/13px var(--ac-font);
52+
--ac-t-r13:400 13px/16px var(--ac-font);
53+
--ac-t-r15:400 15px/20px var(--ac-font);
54+
--ac-t-r15-22:400 15px/22px var(--ac-font);
55+
--ac-t-r16:400 16px/21px var(--ac-font);
56+
--ac-t-r17:400 17px/22px var(--ac-font);
57+
--ac-t-r18:400 18px/23px var(--ac-font);
58+
--ac-t-r22:400 22px/28px var(--ac-font);
59+
--ac-t-b8:590 8px/10px var(--ac-font);
60+
--ac-t-b10:590 10px/12px var(--ac-font);
61+
--ac-t-b11:590 11px/13px var(--ac-font);
62+
--ac-t-b13:590 13px/16px var(--ac-font);
63+
--ac-t-b15:590 15px/20px var(--ac-font);
64+
--ac-t-b17:590 17px/22px var(--ac-font);
65+
--ac-t-b18:590 18px/23px var(--ac-font);
66+
--ac-t-b20:590 20px/25px var(--ac-font);
67+
--ac-t-b22:700 22px/28px var(--ac-font);
68+
--ac-t-b34:700 34px/41px var(--ac-font);
69+
70+
/* Metrics */
71+
--ac-w:393px;
72+
--ac-h:852px;
73+
--ac-sb:54px;
74+
--ac-nav:44px;
75+
--ac-margin:16px;
76+
--ac-gutter:20px;
77+
--ac-home:34px;
78+
--ac-home-w:140px;
79+
--ac-island-w:126px;
80+
--ac-island-h:37px;
81+
--ac-hour:50px;
82+
--ac-timecol:52px;
83+
--ac-day:35px;
84+
--ac-hair:0.33px;
85+
--ac-rule:0.66px;
86+
--ac-daycut:579px;
87+
}
88+
.dark{
89+
--ac-bg:#000000;
90+
--ac-sep:#464649;
91+
--ac-event-bg:rgba(27,173,248,.28);
92+
--ac-blur:rgba(40,40,42,.94);
93+
--ac-sheet:#18181A;
94+
--ac-scrim:rgba(0,0,0,.502);
95+
--ac-modal:#1C1C1E;
96+
--ac-group:#1C1C1E;
97+
--ac-fill:#48484D;
98+
--ac-btn:#28282A;
99+
--ac-card:#3A3A3C;
100+
--ac-elev:#2C2C2E;
101+
--ac-kbd:#29292A;
102+
--ac-key:#696969;
103+
--ac-key2:#3F3F40;
104+
--ac-key-bd:#000000;
105+
--ac-ink:#FFFFFF;
106+
--ac-grey2:#8E8E93;
107+
--ac-hint:#6F6F74;
108+
--ac-dim:#65656A;
109+
--ac-red:#FE4336;
110+
--ac-event-ink:#1BADF8;
111+
}
112+
*{box-sizing:border-box;margin:0;padding:0}
113+
body{font-family:var(--ac-font);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:24px}
114+
body{padding:0;background:var(--ac-bg);color:var(--ac-ink)}
115+
.sh8{width:478px;height:980px;padding:22px 24px;overflow:hidden}
116+
h1{font:var(--ac-t-b20)}
117+
header p{font:var(--ac-t-r13);color:var(--ac-grey);margin:2px 0 12px}
118+
h2{font:var(--ac-t-b10);text-transform:uppercase;color:var(--ac-grey);margin:13px 0 6px}
119+
.gr{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
120+
.sw .ch{height:24px;border-radius:5px;border:0.5px solid var(--ac-sep);display:flex;overflow:hidden}
121+
.sw .ch span{flex:1}
122+
.sw b{display:block;margin-top:3px;font:590 8.5px/11px ui-monospace,Menlo,monospace}
123+
.sw i{display:block;font:400 8px/11px ui-monospace,Menlo,monospace;color:var(--ac-grey);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
124+
.rd{display:flex;gap:10px}
125+
.rd div{text-align:center}
126+
.rd .b{width:46px;height:26px;background:var(--ac-fill);border:0.5px solid var(--ac-sep)}
127+
.rd em{display:block;margin-top:3px;font:400 8.5px/11px var(--ac-font);color:var(--ac-grey);font-style:normal}
128+
.ty{columns:2;column-gap:18px}
129+
.tr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:1px;border-bottom:0.5px solid var(--ac-sep);break-inside:avoid}
130+
.tr span{white-space:nowrap;overflow:hidden}
131+
.tr em{font:400 8px/11px ui-monospace,Menlo,monospace;color:var(--ac-grey);font-style:normal;white-space:nowrap;flex:none}
132+
.mt{columns:3;column-gap:14px;font:400 9px/13.5px ui-monospace,Menlo,monospace;color:var(--ac-grey2)}
133+
.ev div{padding:3px 0;border-bottom:0.5px solid var(--ac-sep)}
134+
.ev b{font:590 8.5px/12px ui-monospace,Menlo,monospace;color:var(--ac-blue)}
135+
.ev i{font:400 8.5px/12px ui-monospace,Menlo,monospace;color:var(--ac-grey2);font-style:normal}
136+
.ev p{font:var(--ac-t-b8);font-weight:400;color:var(--ac-grey)}
137+
</style>
138+
<div class="sh8"><header><h1>Apple Calendar &middot; iOS</h1><p>Figma 3YLkiKW7ZFRg85c8k6VXFf, 393pt mode. A two-tone chip is a token the dark frames redefine, light half on the left. The type ramp is labelled with its own shorthand; every row of it is a named style in the file. The caption under a chip is its light value; evidence for all 70 tokens, both themes, is on the next 4 boards.</p></header><h2>Colour</h2><div class="gr"><div class="sw"><div class="ch"><span style="background:#FFFFFF"></span><span style="background:#000000"></span></div><b>--ac-bg</b><i>#FFFFFF</i></div><div class="sw"><div class="ch"><span style="background:#000000"></span></div><b>--ac-black</b><i>#000000</i></div><div class="sw"><div class="ch"><span style="background:#FFFFFF"></span></div><b>--ac-white</b><i>#FFFFFF</i></div><div class="sw"><div class="ch"><span style="background:#C7C7CC"></span><span style="background:#464649"></span></div><b>--ac-sep</b><i>#C7C7CC</i></div><div class="sw"><div class="ch"><span style="background:rgba(27,173,248,.20)"></span><span style="background:rgba(27,173,248,.28)"></span></div><b>--ac-event-bg</b><i>rgba(27,173,248,.20)</i></div><div class="sw"><div class="ch"><span style="background:#1BADF8"></span></div><b>--ac-event-bd</b><i>#1BADF8</i></div><div class="sw"><div class="ch"><span style="background:rgba(255,255,255,.70)"></span><span style="background:rgba(40,40,42,.94)"></span></div><b>--ac-blur</b><i>rgba(255,255,255,.70)</i></div><div class="sw"><div class="ch"><span style="background:#D9D9D9"></span><span style="background:#18181A"></span></div><b>--ac-sheet</b><i>#D9D9D9</i></div><div class="sw"><div class="ch"><span style="background:rgba(0,0,0,.20)"></span><span style="background:rgba(0,0,0,.502)"></span></div><b>--ac-scrim</b><i>rgba(0,0,0,.20)</i></div><div class="sw"><div class="ch"><span style="background:#FFFFFF"></span><span style="background:#1C1C1E"></span></div><b>--ac-modal</b><i>#FFFFFF</i></div><div class="sw"><div class="ch"><span style="background:#F2F2F7"></span><span style="background:#1C1C1E"></span></div><b>--ac-group</b><i>#F2F2F7</i></div><div class="sw"><div class="ch"><span style="background:#EEEEEF"></span><span style="background:#48484D"></span></div><b>--ac-fill</b><i>#EEEEEF</i></div><div class="sw"><div class="ch"><span style="background:#E6E6EB"></span><span style="background:#28282A"></span></div><b>--ac-btn</b><i>#E6E6EB</i></div><div class="sw"><div class="ch"><span style="background:#FFFFFF"></span><span style="background:#3A3A3C"></span></div><b>--ac-card</b><i>#FFFFFF</i></div><div class="sw"><div class="ch"><span style="background:#F2F2F7"></span><span style="background:#2C2C2E"></span></div><b>--ac-elev</b><i>#F2F2F7</i></div><div class="sw"><div class="ch"><span style="background:#D0D3DA"></span><span style="background:#29292A"></span></div><b>--ac-kbd</b><i>#D0D3DA</i></div><div class="sw"><div class="ch"><span style="background:#FFFFFF"></span><span style="background:#696969"></span></div><b>--ac-key</b><i>#FFFFFF</i></div><div class="sw"><div class="ch"><span style="background:#A9AFBC"></span><span style="background:#3F3F40"></span></div><b>--ac-key2</b><i>#A9AFBC</i></div><div class="sw"><div class="ch"><span style="background:#6C6C71"></span><span style="background:#000000"></span></div><b>--ac-key-bd</b><i>#6C6C71</i></div><div class="sw"><div class="ch"><span style="background:#000000"></span><span style="background:#FFFFFF"></span></div><b>--ac-ink</b><i>#000000</i></div><div class="sw"><div class="ch"><span style="background:#8E8E93"></span></div><b>--ac-grey</b><i>#8E8E93</i></div><div class="sw"><div class="ch"><span style="background:#8A8A8E"></span><span style="background:#8E8E93"></span></div><b>--ac-grey2</b><i>#8A8A8E</i></div><div class="sw"><div class="ch"><span style="background:#C5C5C7"></span><span style="background:#6F6F74"></span></div><b>--ac-hint</b><i>#C5C5C7</i></div><div class="sw"><div class="ch"><span style="background:#BCBCC1"></span><span style="background:#65656A"></span></div><b>--ac-dim</b><i>#BCBCC1</i></div><div class="sw"><div class="ch"><span style="background:#FF382B"></span><span style="background:#FE4336"></span></div><b>--ac-red</b><i>#FF382B</i></div><div class="sw"><div class="ch"><span style="background:#007BFE"></span></div><b>--ac-blue</b><i>#007BFE</i></div><div class="sw"><div class="ch"><span style="background:#106895"></span><span style="background:#1BADF8"></span></div><b>--ac-event-ink</b><i>#106895</i></div></div><h2>Radius</h2><div class="rd"><div><div class="b" style="border-radius:100px"></div><em>pill</em></div><div><div class="b" style="border-radius:5px"></div><em>event</em></div><div><div class="b" style="border-radius:10px"></div><em>sheet</em></div><div><div class="b" style="border-radius:14px"></div><em>btn</em></div><div><div class="b" style="border-radius:13px"></div><em>alert</em></div><div><div class="b" style="border-radius:10px"></div><em>card</em></div><div><div class="b" style="border-radius:6px"></div><em>field</em></div></div><h2>Type</h2><div class="ty"><div class="tr"><span style="font:var(--ac-t-r11)">Feed Minerva</span><em>400 11px/13px</em></div><div class="tr"><span style="font:var(--ac-t-r13)">Feed Minerva</span><em>400 13px/16px</em></div><div class="tr"><span style="font:var(--ac-t-r15)">Feed Minerva</span><em>400 15px/20px</em></div><div class="tr"><span style="font:var(--ac-t-r15-22)">Feed Minerva</span><em>400 15px/22px</em></div><div class="tr"><span style="font:var(--ac-t-r16)">Feed Minerva</span><em>400 16px/21px</em></div><div class="tr"><span style="font:var(--ac-t-r17)">Feed Minerva</span><em>400 17px/22px</em></div><div class="tr"><span style="font:var(--ac-t-r18)">Feed Minerva</span><em>400 18px/23px</em></div><div class="tr"><span style="font:var(--ac-t-r22)">Minerva</span><em>400 22px/28px</em></div><div class="tr"><span style="font:var(--ac-t-b8)">Feed Minerva</span><em>590 8px/10px</em></div><div class="tr"><span style="font:var(--ac-t-b10)">Feed Minerva</span><em>590 10px/12px</em></div><div class="tr"><span style="font:var(--ac-t-b11)">Feed Minerva</span><em>590 11px/13px</em></div><div class="tr"><span style="font:var(--ac-t-b13)">Feed Minerva</span><em>590 13px/16px</em></div><div class="tr"><span style="font:var(--ac-t-b15)">Feed Minerva</span><em>590 15px/20px</em></div><div class="tr"><span style="font:var(--ac-t-b17)">Feed Minerva</span><em>590 17px/22px</em></div><div class="tr"><span style="font:var(--ac-t-b18)">Feed Minerva</span><em>590 18px/23px</em></div><div class="tr"><span style="font:var(--ac-t-b20)">Minerva</span><em>590 20px/25px</em></div><div class="tr"><span style="font:var(--ac-t-b22)">Minerva</span><em>700 22px/28px</em></div><div class="tr"><span style="font:var(--ac-t-b34)">Minerva</span><em>700 34px/41px</em></div></div><h2>Metrics</h2><div class="mt">--ac-w: 393px<br>--ac-h: 852px<br>--ac-sb: 54px<br>--ac-nav: 44px<br>--ac-margin: 16px<br>--ac-gutter: 20px<br>--ac-home: 34px<br>--ac-home-w: 140px<br>--ac-island-w: 126px<br>--ac-island-h: 37px<br>--ac-hour: 50px<br>--ac-timecol: 52px<br>--ac-day: 35px<br>--ac-hair: 0.33px<br>--ac-rule: 0.66px<br>--ac-daycut: 579px</div></div>
139+
</html>
Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Apple Calendar - Evidence 1/4</title>
5+
<style>
6+
:root{
7+
--ac-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
8+
9+
/* Surface */
10+
--ac-bg:#FFFFFF;
11+
--ac-black:#000000;
12+
--ac-white:#FFFFFF;
13+
--ac-sep:#C7C7CC;
14+
--ac-event-bg:rgba(27,173,248,.20);
15+
--ac-event-bd:#1BADF8;
16+
--ac-blur:rgba(255,255,255,.70);
17+
--ac-sheet:#D9D9D9;
18+
--ac-scrim:rgba(0,0,0,.20);
19+
--ac-modal:#FFFFFF;
20+
--ac-group:#F2F2F7;
21+
--ac-fill:#EEEEEF;
22+
--ac-btn:#E6E6EB;
23+
--ac-card:#FFFFFF;
24+
--ac-elev:#F2F2F7;
25+
--ac-kbd:#D0D3DA;
26+
--ac-key:#FFFFFF;
27+
--ac-key2:#A9AFBC;
28+
--ac-key-bd:#6C6C71;
29+
30+
/* Ink */
31+
--ac-ink:#000000;
32+
--ac-grey:#8E8E93;
33+
--ac-grey2:#8A8A8E;
34+
--ac-hint:#C5C5C7;
35+
--ac-dim:#BCBCC1;
36+
--ac-red:#FF382B;
37+
--ac-blue:#007BFE;
38+
--ac-event-ink:#106895;
39+
40+
/* Radius */
41+
--ac-r-phone:52px;
42+
--ac-r-pill:100px;
43+
--ac-r-event:5px;
44+
--ac-r-sheet:10px;
45+
--ac-r-btn:14px;
46+
--ac-r-alert:13px;
47+
--ac-r-card:10px;
48+
--ac-r-field:6px;
49+
50+
/* Type */
51+
--ac-t-r11:400 11px/13px var(--ac-font);
52+
--ac-t-r13:400 13px/16px var(--ac-font);
53+
--ac-t-r15:400 15px/20px var(--ac-font);
54+
--ac-t-r15-22:400 15px/22px var(--ac-font);
55+
--ac-t-r16:400 16px/21px var(--ac-font);
56+
--ac-t-r17:400 17px/22px var(--ac-font);
57+
--ac-t-r18:400 18px/23px var(--ac-font);
58+
--ac-t-r22:400 22px/28px var(--ac-font);
59+
--ac-t-b8:590 8px/10px var(--ac-font);
60+
--ac-t-b10:590 10px/12px var(--ac-font);
61+
--ac-t-b11:590 11px/13px var(--ac-font);
62+
--ac-t-b13:590 13px/16px var(--ac-font);
63+
--ac-t-b15:590 15px/20px var(--ac-font);
64+
--ac-t-b17:590 17px/22px var(--ac-font);
65+
--ac-t-b18:590 18px/23px var(--ac-font);
66+
--ac-t-b20:590 20px/25px var(--ac-font);
67+
--ac-t-b22:700 22px/28px var(--ac-font);
68+
--ac-t-b34:700 34px/41px var(--ac-font);
69+
70+
/* Metrics */
71+
--ac-w:393px;
72+
--ac-h:852px;
73+
--ac-sb:54px;
74+
--ac-nav:44px;
75+
--ac-margin:16px;
76+
--ac-gutter:20px;
77+
--ac-home:34px;
78+
--ac-home-w:140px;
79+
--ac-island-w:126px;
80+
--ac-island-h:37px;
81+
--ac-hour:50px;
82+
--ac-timecol:52px;
83+
--ac-day:35px;
84+
--ac-hair:0.33px;
85+
--ac-rule:0.66px;
86+
--ac-daycut:579px;
87+
}
88+
.dark{
89+
--ac-bg:#000000;
90+
--ac-sep:#464649;
91+
--ac-event-bg:rgba(27,173,248,.28);
92+
--ac-blur:rgba(40,40,42,.94);
93+
--ac-sheet:#18181A;
94+
--ac-scrim:rgba(0,0,0,.502);
95+
--ac-modal:#1C1C1E;
96+
--ac-group:#1C1C1E;
97+
--ac-fill:#48484D;
98+
--ac-btn:#28282A;
99+
--ac-card:#3A3A3C;
100+
--ac-elev:#2C2C2E;
101+
--ac-kbd:#29292A;
102+
--ac-key:#696969;
103+
--ac-key2:#3F3F40;
104+
--ac-key-bd:#000000;
105+
--ac-ink:#FFFFFF;
106+
--ac-grey2:#8E8E93;
107+
--ac-hint:#6F6F74;
108+
--ac-dim:#65656A;
109+
--ac-red:#FE4336;
110+
--ac-event-ink:#1BADF8;
111+
}
112+
*{box-sizing:border-box;margin:0;padding:0}
113+
body{font-family:var(--ac-font);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:24px}
114+
body{padding:0;background:var(--ac-bg);color:var(--ac-ink)}
115+
.sh8{width:478px;height:980px;padding:22px 24px;overflow:hidden}
116+
h1{font:var(--ac-t-b20)}
117+
header p{font:var(--ac-t-r13);color:var(--ac-grey);margin:2px 0 12px}
118+
h2{font:var(--ac-t-b10);text-transform:uppercase;color:var(--ac-grey);margin:13px 0 6px}
119+
.gr{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
120+
.sw .ch{height:24px;border-radius:5px;border:0.5px solid var(--ac-sep);display:flex;overflow:hidden}
121+
.sw .ch span{flex:1}
122+
.sw b{display:block;margin-top:3px;font:590 8.5px/11px ui-monospace,Menlo,monospace}
123+
.sw i{display:block;font:400 8px/11px ui-monospace,Menlo,monospace;color:var(--ac-grey);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
124+
.rd{display:flex;gap:10px}
125+
.rd div{text-align:center}
126+
.rd .b{width:46px;height:26px;background:var(--ac-fill);border:0.5px solid var(--ac-sep)}
127+
.rd em{display:block;margin-top:3px;font:400 8.5px/11px var(--ac-font);color:var(--ac-grey);font-style:normal}
128+
.ty{columns:2;column-gap:18px}
129+
.tr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:1px;border-bottom:0.5px solid var(--ac-sep);break-inside:avoid}
130+
.tr span{white-space:nowrap;overflow:hidden}
131+
.tr em{font:400 8px/11px ui-monospace,Menlo,monospace;color:var(--ac-grey);font-style:normal;white-space:nowrap;flex:none}
132+
.mt{columns:3;column-gap:14px;font:400 9px/13.5px ui-monospace,Menlo,monospace;color:var(--ac-grey2)}
133+
.ev div{padding:3px 0;border-bottom:0.5px solid var(--ac-sep)}
134+
.ev b{font:590 8.5px/12px ui-monospace,Menlo,monospace;color:var(--ac-blue)}
135+
.ev i{font:400 8.5px/12px ui-monospace,Menlo,monospace;color:var(--ac-grey2);font-style:normal}
136+
.ev p{font:var(--ac-t-b8);font-weight:400;color:var(--ac-grey)}
137+
</style>
138+
<div class="sh8"><header><h1>Evidence 1/4</h1><p>Token, then its light value and its dark override, then where the value came from. A token with no evidence is a guess.</p></header><div class="ev"><div><b>--ac-font</b> <i>-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif</i><p>every type style in the file is Font(family: "SF Pro"); this is the platform stack that resolves to it on macOS and iOS</p></div><div><b>--ac-bg</b> <i>#FFFFFF / #000000</i><p>Figma variable bg/primary-base; the dark frames fill with system/black</p></div><div><b>--ac-black</b> <i>#000000</i><p>Figma variable system/black: the Dynamic Island, the sheet's own header</p></div><div><b>--ac-white</b> <i>#FFFFFF</i><p>Figma variable system/white: the ring around the now-dot, light in both themes</p></div><div><b>--ac-sep</b> <i>#C7C7CC / #464649</i><p>Figma variable system/grey3, light and dark</p></div><div><b>--ac-event-bg</b> <i>rgba(27,173,248,.20) / rgba(27,173,248,.28)</i><p>Figma variable app-calendar/event-bg #1BADF833; the dark frames raise the alpha, solved from the fill over black on ref-d01 at 2x</p></div><div><b>--ac-event-bd</b> <i>#1BADF8</i><p>Figma variable app-calendar/event-border, one value in both themes</p></div><div><b>--ac-blur</b> <i>rgba(255,255,255,.70) / rgba(40,40,42,.94)</i><p>Figma variable ui/background-blur #FFFFFFB2; the dark month header is the same material, solved from ref-d03 at 2x</p></div><div><b>--ac-sheet</b> <i>#D9D9D9 / #18181A</i><p>flat-fill census on the stacked-sheet edge above the modal, ref-04 / ref-d04</p></div><div><b>--ac-scrim</b> <i>rgba(0,0,0,.20) / rgba(0,0,0,.502)</i><p>Figma variable ui/alert-overlay #00000033; the dark frames dim twice as hard (#00000080), solved from the white status-bar clock, which renders 127 on ref-d05 where it is 255 on ref-d01</p></div><div><b>--ac-modal</b> <i>#FFFFFF / #1C1C1E</i><p>Figma variable bg/primary-elevated, light and dark</p></div><div><b>--ac-group</b> <i>#F2F2F7 / #1C1C1E</i><p>Figma variable grouped-bg/primary-elevated; dark from a flat-fill census on the mini day card, ref-d08</p></div><div><b>--ac-fill</b> <i>#EEEEEF / #48484D</i><p>Figma variable fill/tertiary over bg/tertiary-elevated: #7676801F on #FFFFFF, #7676803D on #3A3A3C</p></div><div><b>--ac-btn</b> <i>#E6E6EB / #28282A</i><p>Figma variable system/grey5; dark from a flat-fill census on the alert buttons, ref-d05</p></div><div><b>--ac-card</b> <i>#FFFFFF / #3A3A3C</i><p>Figma variable bg/tertiary-elevated, light and dark</p></div><div><b>--ac-elev</b> <i>#F2F2F7 / #2C2C2E</i><p>Figma variable bg/secondary-elevated, light and dark: the ground a modal sheet uses, which is not the plain-page grey</p></div><div><b>--ac-kbd</b> <i>#D0D3DA / #29292A</i><p>Figma variable keyboard/bg; the dark one is #28282AF0, so it is sampled composited off ref-d07</p></div><div><b>--ac-key</b> <i>#FFFFFF / #696969</i><p>Figma variable keyboard/key-bg; dark #FFFFFF4D over keyboard/bg</p></div><div><b>--ac-key2</b> <i>#A9AFBC / #3F3F40</i><p>Figma variable keyboard/return-bg; dark #FFFFFF1A over keyboard/bg</p></div><div><b>--ac-key-bd</b> <i>#6C6C71 / #000000</i><p>Figma variable keyboard/key-border, light and dark; it paints one point *below* the 42pt key box, not around it</p></div><div><b>--ac-ink</b> <i>#000000 / #FFFFFF</i><p>Figma variable label/primary, light and dark</p></div></div></div>
139+
</html>

0 commit comments

Comments
 (0)