Skip to content

Commit adf758d

Browse files
jderochervlkjderochervlk
committed
adjust colors a bit
1 parent 7000908 commit adf758d

4 files changed

Lines changed: 344 additions & 248 deletions

File tree

‎src/Playground.res‎

Lines changed: 41 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -51,17 +51,18 @@ let themeLabel = (theme: CodeMirror.Theme.t): string =>
5151
| CodeMirror.Theme.Light => "Light"
5252
}
5353

54+
let playgroundThemeClass = (theme: CodeMirror.Theme.t): string =>
55+
switch theme {
56+
| CodeMirror.Theme.Dark => "playground-theme-dark"
57+
| CodeMirror.Theme.Light => "playground-theme-light"
58+
}
59+
5460
module DropdownSelect = {
5561
@react.component
56-
let make = (~onChange, ~name, ~value, ~theme, ~disabled=false, ~children) => {
57-
let themeClass = switch theme {
58-
| CodeMirror.Theme.Dark => "bg-gray-100 border-gray-80 text-gray-20"
59-
| CodeMirror.Theme.Light => "bg-white border-gray-30 text-gray-80"
60-
}
62+
let make = (~onChange, ~name, ~value, ~disabled=false, ~children) => {
6163
let opacity = disabled ? " opacity-50" : ""
6264
<select
63-
className={"text-14 border inline-block rounded px-4 py-1 font-semibold " ++
64-
themeClass ++
65+
className={"playground-select text-14 border inline-block rounded px-4 py-1 font-semibold" ++
6566
opacity}
6667
name
6768
value
@@ -75,16 +76,12 @@ module DropdownSelect = {
7576

7677
module SelectionOption = {
7778
@react.component
78-
let make = (~label, ~isActive, ~disabled, ~onClick, ~theme) => {
79-
let inactiveClass = switch theme {
80-
| CodeMirror.Theme.Dark => "bg-gray-80 opacity-50 hover:opacity-80 text-gray-20"
81-
| CodeMirror.Theme.Light => "bg-gray-10 border border-gray-30 text-gray-80 hover:bg-gray-20"
82-
}
79+
let make = (~label, ~isActive, ~disabled, ~onClick) => {
8380
<button
84-
className={"mr-1 px-2 py-1 rounded inline-block " ++ if isActive {
85-
"bg-fire text-white font-bold"
81+
className={"playground-selection-option mr-1 px-2 py-1 rounded inline-block " ++ if isActive {
82+
"playground-selection-option-active font-bold"
8683
} else {
87-
inactiveClass
84+
"opacity-50 hover:opacity-80"
8885
}}
8986
onClick
9087
disabled
@@ -100,7 +97,6 @@ module ToggleSelection = {
10097
~onChange: 'a => unit,
10198
~values: array<'a>,
10299
~toLabel: 'a => string,
103-
~theme: CodeMirror.Theme.t,
104100
~selected: 'a,
105101
~disabled=false,
106102
) => {
@@ -123,7 +119,7 @@ module ToggleSelection = {
123119
}
124120
}
125121

126-
<SelectionOption key={label} label isActive onClick disabled theme />
122+
<SelectionOption key={label} label isActive onClick disabled />
127123
})
128124
->React.array}
129125
</div>
@@ -385,17 +381,15 @@ module ResultPane = {
385381
let make = (
386382
~targetLang: Api.Lang.t,
387383
~compilerVersion: string,
388-
~theme: CodeMirror.Theme.t,
389384
~focusedRowCol: option<(int, int)>=?,
390385
~result: FinalResult.t,
391386
) => {
392-
let contentClass = isDarkTheme(theme) ? "text-gray-20" : "text-gray-80"
393387
<div className="pt-4 bg-0 overflow-y-auto playground-scrollbar">
394388
<div className="flex items-center text-16 font-medium px-4">
395389
<div className="pr-4"> {renderTitle(result)} </div>
396390
</div>
397391
<div className="">
398-
<div className={contentClass ++ " px-4 py-4"}>
392+
<div className="playground-text-primary px-4 py-4">
399393
{renderResult(~focusedRowCol, ~compilerVersion, ~targetLang, result)}
400394
</div>
401395
</div>
@@ -560,7 +554,6 @@ module WarningFlagsWidget = {
560554
let make = (
561555
~onUpdate: array<WarningFlagDescription.Parser.token> => unit,
562556
~flags: array<WarningFlagDescription.Parser.token>,
563-
~theme: CodeMirror.Theme.t,
564557
) => {
565558
let (state, setState) = React.useState(_ => HideSuggestion({input: ""}))
566559

@@ -586,11 +579,10 @@ module WarningFlagsWidget = {
586579

587580
let full = (enabled ? "+" : "-") ++ flag
588581
let color = switch (enabled, isActive) {
589-
| (true, false) => isDarkTheme(theme) ? "text-turtle-dark" : "text-turtle"
582+
| (true, false) => "text-turtle"
590583
| (false, false) => "text-fire"
591-
| (true, true) =>
592-
isDarkTheme(theme) ? "bg-gray-40 text-turtle-dark" : "bg-gray-20 text-turtle"
593-
| (false, true) => isDarkTheme(theme) ? "bg-gray-40 text-fire" : "bg-gray-20 text-fire"
584+
| (true, true) => "playground-chip-active text-turtle"
585+
| (false, true) => "playground-chip-active text-fire"
594586
}
595587

596588
let hoverEnabled = switch state {
@@ -717,7 +709,7 @@ module WarningFlagsWidget = {
717709
WarningFlagDescription.lookup(token.flag)
718710
->Array.map(((num, description)) => {
719711
let (modifier, color) = if token.enabled {
720-
("(Enabled) ", "text-turtle-dark")
712+
("(Enabled) ", "text-turtle")
721713
} else {
722714
("(Disabled) ", "text-fire")
723715
}
@@ -794,11 +786,7 @@ module WarningFlagsWidget = {
794786
Option.map(suggestions, elements =>
795787
<div
796788
ref={ReactDOM.Ref.domRef((Obj.magic(listboxRef): React.ref<Nullable.t<Dom.element>>))}
797-
className={"p-2 absolute overflow-auto playground-scrollbar z-50 border-b rounded border-l border-r block w-full max-h-60 " ++ (
798-
isDarkTheme(theme)
799-
? "bg-gray-100 text-gray-20 border-gray-70"
800-
: "bg-white text-gray-80 border-gray-30"
801-
)}
789+
className="playground-overlay p-2 absolute overflow-auto playground-scrollbar z-50 border-b rounded border-l border-r block w-full max-h-60"
802790
>
803791
elements
804792
</div>
@@ -840,20 +828,16 @@ module WarningFlagsWidget = {
840828
onClick
841829
onFocus
842830
tabIndex=0
843-
className={"focus:outline-hidden self-start focus:ring-3 hover:cursor-pointer p-2 rounded-full " ++ (
844-
isDarkTheme(theme) ? "hover:bg-gray-40" : "hover:bg-gray-20"
845-
)}
831+
className="playground-icon-button focus:outline-hidden self-start focus:ring-3 hover:cursor-pointer p-2 rounded-full"
846832
>
847833
<Icon.Close />
848834
</button>
849835
}
850836

851837
let activeClass = if isActive {
852-
isDarkTheme(theme) ? "border-white" : "border-gray-60"
853-
} else if isDarkTheme(theme) {
854-
"border-gray-60"
838+
"playground-field-active"
855839
} else {
856-
"border-gray-30"
840+
"playground-field"
857841
}
858842

859843
let areaOnFocus = _evt =>
@@ -875,11 +859,7 @@ module WarningFlagsWidget = {
875859
<section className="mt-3">
876860
<input
877861
ref={ReactDOM.Ref.domRef((Obj.magic(inputRef): React.ref<Nullable.t<Dom.element>>))}
878-
className={"inline-block p-1 max-w-20 outline-hidden " ++ (
879-
isDarkTheme(theme)
880-
? "bg-gray-90 text-gray-20 placeholder-gray-20/50"
881-
: "bg-gray-10 text-gray-80 placeholder-gray-60"
882-
)}
862+
className="playground-input inline-block p-1 max-w-20 outline-hidden"
883863
placeholder="Flags"
884864
type_="text"
885865
tabIndex=0
@@ -967,14 +947,13 @@ module Settings = {
967947

968948
let onCompilerSelect = id => dispatch(SwitchToCompiler(id))
969949

970-
let titleClass = "hl-5 mb-2 " ++ (isDarkTheme(theme) ? "text-gray-20" : "text-gray-80")
971-
<div className={"p-4 pt-8 " ++ (isDarkTheme(theme) ? "text-gray-20" : "text-gray-80")}>
950+
let titleClass = "playground-text-primary hl-5 mb-2"
951+
<div className="playground-text-primary p-4 pt-8">
972952
<div>
973953
<div className=titleClass> {React.string("ReScript Version")} </div>
974954
<DropdownSelect
975955
name="compilerVersions"
976956
value={Semver.toString(readyState.selected.id)}
977-
theme
978957
onChange={evt => {
979958
ReactEvent.Form.preventDefault(evt)
980959
let id: string = (evt->ReactEvent.Form.target)["value"]
@@ -1062,7 +1041,6 @@ module Settings = {
10621041
<ToggleSelection
10631042
values=availableTargetLangs
10641043
toLabel={lang => lang->Api.Lang.toExt->String.toUpperCase}
1065-
theme
10661044
selected=readyState.targetLang
10671045
onChange=onTargetLangSelect
10681046
/>
@@ -1074,7 +1052,6 @@ module Settings = {
10741052
<div className=titleClass> {React.string("Use Vim Keymap")} </div>
10751053
<ToggleSelection
10761054
values=[CodeMirror.KeyMap.Default, CodeMirror.KeyMap.Vim]
1077-
theme
10781055
toLabel={enabled =>
10791056
switch enabled {
10801057
| CodeMirror.KeyMap.Vim => "On"
@@ -1088,7 +1065,6 @@ module Settings = {
10881065
<div className=titleClass> {React.string("Module-System")} </div>
10891066
<ToggleSelection
10901067
values=["commonjs", "esmodule"]
1091-
theme
10921068
toLabel={value => value}
10931069
selected=config.moduleSystem
10941070
onChange=onModuleSystemUpdate
@@ -1098,7 +1074,6 @@ module Settings = {
10981074
<div className=titleClass> {React.string("Playground Theme")} </div>
10991075
<ToggleSelection
11001076
values=[CodeMirror.Theme.Dark, CodeMirror.Theme.Light]
1101-
theme
11021077
toLabel=themeLabel
11031078
selected=theme
11041079
onChange={value => setTheme(_ => value)}
@@ -1110,7 +1085,6 @@ module Settings = {
11101085
<div className=titleClass> {React.string("JSX")} </div>
11111086
<ToggleSelection
11121087
values=[JsxCompilation.Plain, PreserveJsx]
1113-
theme
11141088
toLabel=JsxCompilation.getLabel
11151089
selected={config.jsxPreserveMode->Option.getOr(false)->JsxCompilation.fromBool}
11161090
onChange=onJsxPreserveModeUpdate
@@ -1125,7 +1099,6 @@ module Settings = {
11251099
<SelectionOption
11261100
key
11271101
disabled=false
1128-
theme
11291102
label={feature->ExperimentalFeatures.getLabel}
11301103
isActive={config.experimentalFeatures
11311104
->Option.getOr([])
@@ -1157,7 +1130,7 @@ module Settings = {
11571130
</div>
11581131
<div className="flex justify-end" />
11591132
<div className="max-w-md">
1160-
<WarningFlagsWidget onUpdate=onWarningFlagsUpdate flags=warnFlagTokens theme />
1133+
<WarningFlagsWidget onUpdate=onWarningFlagsUpdate flags=warnFlagTokens />
11611134
</div>
11621135
</div>
11631136
</div>
@@ -1254,7 +1227,6 @@ module ControlPanel = {
12541227
let make = (
12551228
~actionIndicatorKey: string,
12561229
~state: CompilerManagerHook.state,
1257-
~theme: CodeMirror.Theme.t,
12581230
~dispatch: CompilerManagerHook.action => unit,
12591231
~editorRef: React.ref<option<CodeMirror.editorInstance>>,
12601232
~setCurrentTab: (tab => tab) => unit,
@@ -1311,7 +1283,6 @@ module ControlPanel = {
13111283
<div className="flex flex-row gap-x-2" dataTestId="control-panel">
13121284
<ToggleButton
13131285
checked=autoRun
1314-
isLightTheme={!isDarkTheme(theme)}
13151286
onChange={_ => {
13161287
switch state {
13171288
| Ready({autoRun: false}) => setCurrentTab(_ => Output)
@@ -1338,26 +1309,18 @@ module ControlPanel = {
13381309
| _ => React.null
13391310
}
13401311

1341-
<div
1342-
className={"flex justify-start items-center py-3 px-11 " ++ (
1343-
isDarkTheme(theme) ? "bg-gray-100" : "bg-white border-b border-gray-20"
1344-
)}
1345-
>
1312+
<div className="playground-control-panel flex justify-start items-center py-3 px-11">
13461313
children
13471314
</div>
13481315
}
13491316
}
13501317

13511318
module NewLightModeToast = {
13521319
@react.component
1353-
let make = (~theme: CodeMirror.Theme.t, ~onClose, ~onTryNow) => {
1354-
let containerClass = isDarkTheme(theme)
1355-
? "bg-gray-90 text-gray-20 border-gray-70"
1356-
: "bg-white text-gray-80 border-gray-30"
1320+
let make = (~onClose, ~onTryNow) => {
13571321
<div
13581322
dataTestId="playground-lightmode-toast"
1359-
className={"fixed right-4 bottom-4 z-50 max-w-xs rounded border shadow-sm px-4 py-3 " ++
1360-
containerClass}
1323+
className="playground-toast fixed right-4 bottom-4 z-50 max-w-xs rounded border shadow-sm px-4 py-3"
13611324
>
13621325
<div className="flex items-start gap-2">
13631326
<div className="flex-1">
@@ -1380,9 +1343,7 @@ module NewLightModeToast = {
13801343
ReactEvent.Mouse.preventDefault(evt)
13811344
onClose()
13821345
}}
1383-
className={"text-12 rounded px-2 py-1 hover:cursor-pointer " ++ (
1384-
isDarkTheme(theme) ? "hover:bg-gray-80" : "hover:bg-gray-10"
1385-
)}
1346+
className="playground-icon-button text-12 rounded px-2 py-1 hover:cursor-pointer"
13861347
>
13871348
{React.string("Dismiss")}
13881349
</button>
@@ -1415,7 +1376,7 @@ module OutputPanel = {
14151376
) => {
14161377
let (theme, _setTheme) = themeState
14171378
let output =
1418-
<div className={isDarkTheme(theme) ? "text-gray-20" : "text-gray-80"}>
1379+
<div className="playground-text-primary">
14191380
{switch compilerState {
14201381
| Compiling({previousJsCode: Some(jsCode)})
14211382
| Executing({jsCode})
@@ -1425,7 +1386,7 @@ module OutputPanel = {
14251386
</pre>
14261387
| Ready({result: Conv(Success(_))}) => React.null
14271388
| Ready({result, targetLang, selected}) =>
1428-
<ResultPane targetLang compilerVersion=selected.compilerVersion result theme />
1389+
<ResultPane targetLang compilerVersion=selected.compilerVersion result />
14291390
| _ => React.null
14301391
}}
14311392
</div>
@@ -1438,7 +1399,6 @@ module OutputPanel = {
14381399
<ResultPane
14391400
targetLang=ready.targetLang
14401401
compilerVersion=ready.selected.compilerVersion
1441-
theme
14421402
result=ready.result
14431403
/>
14441404
| SetupFailed(msg) => <div> {React.string("Setup failed: " ++ msg)} </div>
@@ -2112,13 +2072,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
21122072
let disabled = false
21132073

21142074
let makeTabClass = active => {
2115-
let activeClass = if active {
2116-
isDarkTheme(theme)
2117-
? "text-white border-sky-70! font-medium hover:cursor-default"
2118-
: "text-gray-80 border-sky-70! font-medium hover:cursor-default"
2119-
} else {
2120-
""
2121-
}
2075+
let activeClass = active ? "playground-tab-active font-medium hover:cursor-default" : ""
21222076

21232077
"flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
21242078
}
@@ -2198,14 +2152,12 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
21982152
})
21992153

22002154
<main
2201-
className={"flex flex-col text-14 " ++ (
2202-
isDarkTheme(theme) ? "bg-gray-100 text-gray-40" : "bg-gray-5 text-gray-80"
2203-
)}
2155+
className={"playground-theme playground-main flex flex-col text-14 " ++
2156+
playgroundThemeClass(theme)}
22042157
>
22052158
<ControlPanel
22062159
actionIndicatorKey={Int.toString(actionCount)}
22072160
state=compilerState
2208-
theme
22092161
dispatch=compilerDispatch
22102162
setCurrentTab
22112163
editorRef
@@ -2222,27 +2174,23 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
22222174
: "h-full!"} ${layout == Column ? "w-full" : "w-[50%]"}`}
22232175
>
22242176
<div
2225-
className={"h-full " ++ (isDarkTheme(theme) ? "bg-gray-100" : "bg-white")}
2177+
className="playground-editor-shell h-full"
22262178
ref={ReactDOM.Ref.domRef((Obj.magic(containerRef): React.ref<Nullable.t<Dom.element>>))}
22272179
/>
22282180
</div>
22292181
// Separator
22302182
<div
22312183
ref={ReactDOM.Ref.domRef((Obj.magic(separatorRef): React.ref<Nullable.t<Dom.element>>))}
22322184
// TODO: touch-none not applied
2233-
className={"flex items-center justify-center touch-none select-none rounded-lg " ++
2234-
(isDarkTheme(theme)
2235-
? "bg-gray-70 opacity-30 hover:opacity-50"
2236-
: "bg-gray-20 border border-gray-30 opacity-100 hover:bg-gray-30") ++
2237-
" " ++ (layout == Column ? "cursor-row-resize" : "cursor-col-resize")}
2185+
className={"playground-divider flex items-center justify-center touch-none select-none rounded-lg " ++ (
2186+
layout == Column ? "cursor-row-resize" : "cursor-col-resize"
2187+
)}
22382188
onMouseDown={onMouseDown}
22392189
onTouchStart={onTouchStart}
22402190
onTouchEnd={onMouseUp}
22412191
>
22422192
<span
2243-
className={"m-0.5 " ++
2244-
(isDarkTheme(theme) ? "text-gray-20" : "text-gray-60") ++
2245-
" " ++ (layout == Column ? "rotate-90" : "")}
2193+
className={"playground-divider-handle m-0.5 " ++ (layout == Column ? "rotate-90" : "")}
22462194
>
22472195
{React.string("⣿")}
22482196
</span>
@@ -2273,7 +2221,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
22732221
</div>
22742222
</div>
22752223
{if showNewLightModeToast {
2276-
<NewLightModeToast theme onClose=hideNewLightModeToast onTryNow=tryLightModeFromToast />
2224+
<NewLightModeToast onClose=hideNewLightModeToast onTryNow=tryLightModeFromToast />
22772225
} else {
22782226
React.null
22792227
}}

0 commit comments

Comments
 (0)