Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5a7a7bf

Browse files
committed
feat: light color mode with semanticTokens
1 parent6eb3ee2 commit5a7a7bf

16 files changed

+356
-242
lines changed

‎components/tooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const styles = sva({
1212
base:{
1313
positioner:{
1414
display:"flex",
15-
"--arrow-background":"var(--sys-color-cdt-base-container, #212629)",
15+
"--arrow-background":"colors.devtools.cdt-base-container",
1616
backgroundColor:"var(--arrow-background)",
1717
"--drop-shadow":
1818
"0 0 0 1px rgb(255 255 255/20%),0 2px 4px 2px rgb(0 0 0/20%),0 2px 6px 2px rgb(0 0 0/10%)",
@@ -21,7 +21,7 @@ const styles = sva({
2121
userSelect:"text",
2222
fontSize:"12px",
2323
lineHeight:"11px",
24-
color:"content",
24+
color:"devtools.on-surface",
2525
},
2626
content:{
2727
padding:"11px 7px",

‎entrypoints/devtools-pane/api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const onContentScriptMessage = new Proxy<DevtoolsExtensionApi>(
3030
get<TextendskeyofContentScriptEvents>(_target:any,propKey:T){
3131
returnfunction(cb:(message:any)=>any){
3232
returnonMessage(propKey,(message)=>{
33-
console.log(`Received${propKey} with message`,message.data);
33+
//console.log(`Received ${propKey} with message`, message.data);
3434
returncb(message);
3535
});
3636
};

‎entrypoints/devtools-pane/eval.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,10 @@ export const evaluator: Evaluator = {
176176
handleSelectionChanged
177177
);
178178

179+
if(browser.devtools.panels.themeName==="dark"){
180+
document.body.classList.add("-theme-with-dark-background");
181+
}
182+
179183
handleSelectionChanged();
180184

181185
return()=>{

‎entrypoints/devtools-pane/main.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { DevtoolsProvider } from "../../src/devtools-context.ts";
77
import{extensionContext}from"./context.ts";
88

99
browser.runtime.onMessage.addListener(
10+
//@ts-expect-error
1011
function(_request,_sender,_sendResponse){
1112
// Dummy listener to prevent error:
1213
// Could not establish connection. Receiving end does not exist.

‎entrypoints/devtools-pane/panda.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@ html {
1212
}
1313

1414
#root {
15-
overflow: hidden scroll;
1615
position: relative;
1716
z-index:0;
1817
--z-index:10;/* z-index for tooltips */
1918
}
2019

20+
body {
21+
background-color:var(--colors-devtools-cdt-base-container);
22+
color:var(--colors-devtools-on-surface);
23+
}
24+
2125
.platform-mac ::-webkit-scrollbar {
2226
width:8px;
2327
padding:2px;

‎entrypoints/devtools-pane/use-platform-class.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,28 @@ import { useEffect } from "react";
55
*/
66
constusePlatformClass=()=>{
77
useEffect(()=>{
8+
constlistener=(themeName:string)=>{
9+
if(themeName==="dark"){
10+
document.body.classList.add("-theme-with-dark-background");
11+
}else{
12+
document.body.classList.remove("-theme-with-dark-background");
13+
}
14+
};
15+
16+
consthasOnThemeChanged=
17+
typeofbrowser.devtools.panels.onThemeChanged!=="undefined";
18+
19+
hasOnThemeChanged&&
20+
browser.devtools.panels.onThemeChanged.addListener(listener);
21+
822
browser.runtime.getPlatformInfo().then((info)=>{
923
document.body.classList.add("platform-"+info.os);
1024
});
25+
26+
return()=>{
27+
hasOnThemeChanged&&
28+
browser.devtools.panels.onThemeChanged.removeListener(listener);
29+
};
1130
},[]);
1231
};
1332

‎panda.preset.ts

Lines changed: 107 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,117 @@
11
import{definePreset}from"@pandacss/dev";
22

33
exportdefaultdefinePreset({
4+
conditions:{
5+
extend:{
6+
dark:".-theme-with-dark-background &, .dark &",
7+
},
8+
},
49
theme:{
510
extend:{
6-
semanticTokens:{
11+
tokens:{
712
colors:{
8-
background:{
9-
// DEFAULT: { value: "#282828" },
10-
DEFAULT:{value:"#212629"},
13+
devtools:{
14+
// https://github.com/ChromeDevTools/devtools-frontend/blob/368d71862d3726025131629fc18a887954750531/front_end/ui/legacy/tokens.css#L157
15+
// https://github.com/szoxidy/Websites/blob/c96a6db64901830792678cd1c9a4c27c37f2be28/css/color.css#L65
16+
surface4:{value:"#eceff7ff"},// color-mix(in sRGB,#d1e1ff 12%,var(--ref-palette-neutral10))
17+
neutral10:{value:"#1f1f1fff"},
18+
neutral15:{value:"#282828ff"},
19+
neutral25:{value:"#3c3c3cff"},
20+
neutral50:{value:"#757575ff"},
21+
neutral60:{value:"#8f8f8fff"},
22+
neutral80:{value:"#c7c7c7ff"},
23+
neutral90:{value:"#e3e3e3ff"},
24+
neutral95:{value:"#f2f2f2ff"},
25+
neutral98:{value:"#faf9f8ff"},
26+
neutral99:{value:"#fdfcfbff"},
27+
primary20:{value:"#062e6fff"},
28+
primary50:{value:"#1a73e8ff"},
29+
primary70:{value:"#7cacf8ff"},
30+
primary90:{value:"#d3e3fdff"},
31+
primary100:{value:"#ffffffff"},
32+
secondary25:{value:"#003f66ff"},
33+
secondary30:{value:"#004a77ff"},
34+
error50:{value:"#dc362eff"},
35+
cyan80:{value:"rgb(92 213 251 / 100%)"},
1136
},
12-
content:{
13-
DEFAULT:{value:"white"},
37+
},
38+
},
39+
semanticTokens:{
40+
colors:{
41+
// https://github.com/ChromeDevTools/devtools-frontend/blob/368d71862d3726025131629fc18a887954750531/front_end/ui/legacy/themeColors.css#L302
42+
devtools:{
43+
"base-container":{
44+
value:{
45+
base:"{colors.devtools.surface4}",
46+
_dark:"{colors.devtools.neutral15}",
47+
},
48+
},
49+
"cdt-base-container":{
50+
value:{
51+
base:"{colors.devtools.neutral98}",
52+
_dark:"{colors.devtools.base-container}",
53+
},
54+
},
55+
"tonal-container":{
56+
value:{
57+
base:"{colors.devtools.primary90}",
58+
_dark:"{colors.devtools.secondary30}",
59+
},
60+
},
61+
"state-hover-on-subtle":{
62+
value:{
63+
base:"{colors.devtools.neutral10/6}",
64+
_dark:"{colors.devtools.neutral99/10}",
65+
},
66+
},
67+
"state-disabled":{
68+
value:{
69+
base:"rgb(31 31 31 / 38%)",
70+
_dark:"rgb(227 227 227 / 38%)",
71+
},
72+
},
73+
"primary-bright":{
74+
value:{
75+
base:"{colors.devtools.primary50}",
76+
_dark:"{colors.devtools.primary70}",
77+
},
78+
},
79+
"neutral-outline":{
80+
value:{
81+
base:"{colors.devtools.neutral80}",
82+
_dark:"{colors.devtools.neutral50}",
83+
},
84+
},
85+
"neutral-container":{
86+
value:{
87+
base:"{colors.devtools.neutral95}",
88+
_dark:"{colors.devtools.neutral25}",
89+
},
90+
},
91+
"on-primary":{
92+
value:{
93+
base:"{colors.devtools.primary20}",
94+
_dark:"{colors.devtools.primary100}",
95+
},
96+
},
97+
"on-surface":{
98+
value:{
99+
base:"{colors.devtools.neutral10}",
100+
_dark:"{colors.devtools.neutral90}",
101+
},
102+
},
103+
"token-property-special":{
104+
value:{
105+
base:"{colors.devtools.error50}",
106+
_dark:"{colors.devtools.cyan80}",
107+
},
108+
},
109+
"token-subtle":{
110+
value:{
111+
base:"{colors.devtools.neutral60}",
112+
_dark:"{colors.devtools.neutral60}",
113+
},
114+
},
14115
},
15116
},
16117
},

‎playground/src/panda.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@ html {
1212
}
1313

1414
#root {
15-
/* Disabled in playground only */
16-
/* overflow: hidden scroll; */
1715
position: relative;
1816
z-index:0;
1917
--z-index:10;/* z-index for tooltips */
2018
}
2119

20+
body {
21+
background-color:var(--colors-devtools-cdt-base-container);
22+
color:var(--colors-devtools-on-surface);
23+
}
24+
2225
.platform-mac ::-webkit-scrollbar {
2326
width:8px;
2427
padding:2px;

‎playground/src/playground.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ function Playground() {
6060
</HStack>
6161
</Stack>
6262

63-
<Boxborder="1px solid"w="100%"h="100%">
63+
{/* <Box w="100%" h="200px" className="-theme-with-dark-background"> */}
64+
<Boxw="100%">
6465
<DevtoolsProvidervalue={browserContext}>
6566
<SidebarPane/>
6667
</DevtoolsProvider>

‎src/declaration-group.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const DeclarationGroup = (props: DeclarationGroupProps) => {
2525
fontSize="11px"
2626
opacity={{base:0.7,_hover:1}}
2727
_hover={{
28-
backgroundColor:"rgba(253, 252, 251, 0.1)",
28+
backgroundColor:"devtools.state-hover-on-subtle",
2929
}}
3030
ml="3px"
3131
mb="3px"

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp