Skip to content

Commit 6f44d4e

Browse files
committed
Style
1 parent bd7602f commit 6f44d4e

11 files changed

Lines changed: 206 additions & 126 deletions

File tree

assets/css/1-core/3-variables.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,55 @@
106106
--focused-background: var(--pale-blue);
107107
}
108108

109+
@media(prefers-color-scheme: dark) {
110+
html:not([data-theme="light"]) {
111+
--background-color: var(--blue-20);
112+
--brand-border: var(--purple-30);
113+
--category-card-name-color: var(--purple-60);
114+
--category-card-synopsis-color: var(--gray-90);
115+
--category-card-background-hover: var(--blue-15);
116+
--error-button: var(--purple-30);
117+
--error-code: var(--gray-90);
118+
--link-color: var(--purple-60);
119+
--link-hover-color: var(--blue-15);
120+
--navbar-background-color: var(--blue-15);
121+
--navbar-border-color: transparent;
122+
--navbar-search-color: var(--gray-90);
123+
--navbar-search-background-color: var(--blue-20);
124+
--navbar-search-border-color: var(--blue-20);
125+
--package-list-item-background-hover-color: var(--blue-15);
126+
--package-list-item-name-color: var(--purple-60);
127+
--package-list-item-metadata-color: var(--gray-90);
128+
--package-list-item-synopsis-color: var(--gray-90);
129+
--package-list-item-version-color: var(--green-40);
130+
--search-bar-color: var(--gray-90);
131+
--search-bar-background-color: var(--blue-20);
132+
--search-bar-background-hover-color: var(--blue-20);
133+
--search-bar-background-focus-color: var(--blue-20);
134+
--search-bar-focus-border-color: var(--purple-30);
135+
--readme-pre-background-color: var(--blue-30);
136+
--readme-code-background-color: var(--blue-30);
137+
--changelog-pre-background-color: var(--blue-30);
138+
--changelog-code-background-color: var(--blue-30);
139+
140+
/* --install-string-border: hsl(215 28% 17%); */
141+
--compiler-badge-background: var(--blue-30);
142+
--text-color: var(--gray-80);
143+
--main-page-button-background: var(--blue-20);
144+
--main-page-button-focus-border-color: var(--purple-30);
145+
--main-page-button-divider: var(--blue-15);
146+
--deprecated-version: var(--red-60);
147+
--breadcrumb-color: hsl(221 9% 60%);
148+
--severity-critical: var(--red-60);
149+
--severity-high: orange;
150+
--severity-medium: gold;
151+
--severity-low: var(--pale-blue);
152+
--severity-none: hsl(156 100% 99%);
153+
--severity-rating-colour: black;
154+
--focused-background: var(--blue-80);
155+
}
156+
}
157+
109158
html[data-theme="dark"] {
110159
--background-color: var(--blue-20);
111160
--brand-border: var(--purple-30);

assets/css/2-components/1-navbar.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@
102102
}
103103

104104
.navbar-themeBtn {
105+
display: inline-flex;
105106
flex-shrink: 0;
106107
}
107108
}

assets/css/2-components/15-theme-switch.css

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
[data-theme] .theme-button--light {
2-
display: none;
3-
}
4-
5-
[data-theme="dark"] .theme-button--light {
1+
.theme-button--light {
62
display: inline-flex;
73
background-color: hsl(294 40% 30%);
84
}
95

106
.theme-button--dark {
117
display: inline-flex;
8+
background-color: hsl(226 232 240);
129
}
1310

14-
[data-theme="dark"] .theme-button--dark {
15-
display: none;
11+
@media (prefers-color-scheme: light) {
12+
.top-navbar .theme-button--light { display: none; }
1613
}
1714

15+
@media (prefers-color-scheme: dark) {
16+
.top-navbar .theme-button--dark { display: none; }
17+
}
18+
19+
html[data-theme="light"] .theme-button--light { display: none; }
20+
html[data-theme="light"] .theme-button--dark { display: inline-flex; }
21+
html[data-theme="dark"] .theme-button--dark { display: none; }
22+
html[data-theme="dark"] .theme-button--light { display: inline-flex; }
23+
1824
/* Dark mode-specific rules */
1925
.dark {
2026
.social-button:hover {

assets/css/4-helpers/1-globals.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,10 +114,6 @@
114114
border-color: rgb(229 231 235 / 100%);
115115
}
116116

117-
.bg-slate-200 {
118-
background-color: rgb(226 232 240 / 100%);
119-
}
120-
121117
@media (--viewport-sm) {
122118
.sm\:rounded-lg {
123119
border-radius: var(--space-lg);

assets/css/4-helpers/2-colors.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
/* stylelint-disable selector-class-pattern */
22

3-
/* Background */
4-
.bg-slate-200 { background-color: rgb(226 232 240 / 100%); }
5-
63
/* Text */
74

85
.text-black { color: rgb(0 0 0 / 100%); }

src/core/Flora/Environment.hs

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module Flora.Environment
2-
( getFloraEnv
3-
) where
2+
( getFloraEnv,
3+
)
4+
where
45

56
import Data.ByteString (ByteString)
67
import Data.Pool (Pool)
@@ -12,17 +13,16 @@ import Effectful
1213
import Effectful.Fail (Fail)
1314
import Effectful.FileSystem (FileSystem)
1415
import Env (parse)
15-
1616
import Flora.Environment.Config
1717
import Flora.Environment.Env
1818
import Flora.Monitoring
1919

20-
mkPool
21-
:: IOE :> es
22-
=> ByteString -- Database access information
23-
-> NominalDiffTime -- Allowed timeout
24-
-> Int -- Number of connections
25-
-> Eff es (Pool PG.Connection)
20+
mkPool ::
21+
(IOE :> es) =>
22+
ByteString -> -- Database access information
23+
NominalDiffTime -> -- Allowed timeout
24+
Int -> -- Number of connections
25+
Eff es (Pool PG.Connection)
2626
mkPool connectionInfo timeout' connections =
2727
liftIO $
2828
Pool.newPool $
@@ -34,7 +34,7 @@ mkPool connectionInfo timeout' connections =
3434

3535
-- In future we'll want to error for conflicting o ptions
3636
featureConfigToEnv :: FeatureConfig -> Eff es FeatureEnv
37-
featureConfigToEnv FeatureConfig{blobStoreFS, tarballsEnabled} =
37+
featureConfigToEnv FeatureConfig {blobStoreFS, tarballsEnabled} =
3838
case blobStoreFS of
3939
Just fp | tarballsEnabled -> pure . FeatureEnv . Just $ BlobStoreFS fp
4040
_ ->
@@ -43,25 +43,26 @@ featureConfigToEnv FeatureConfig{blobStoreFS, tarballsEnabled} =
4343

4444
configToEnv :: (Fail :> es, FileSystem :> es, IOE :> es) => FloraConfig -> Eff es FloraEnv
4545
configToEnv floraConfig = do
46-
let PoolConfig{connectionTimeout, connections} = floraConfig.dbConfig
46+
let PoolConfig {connectionTimeout, connections} = floraConfig.dbConfig
4747
pool <- mkPool floraConfig.connectionInfo connectionTimeout connections
4848
jobsPool <- mkPool floraConfig.connectionInfo connectionTimeout connections
4949
assets <- getAssets floraConfig.environment
5050
featureEnv <- featureConfigToEnv floraConfig.features
5151
metrics <- registerMetrics
5252
pure
5353
FloraEnv
54-
{ pool = pool
55-
, dbConfig = floraConfig.dbConfig
56-
, jobsPool = jobsPool
57-
, httpPort = floraConfig.httpPort
58-
, domain = floraConfig.domain
59-
, mltp = floraConfig.mltp
60-
, environment = floraConfig.environment
61-
, features = featureEnv
62-
, assets = assets
63-
, config = floraConfig
64-
, metrics = metrics
54+
{ pool = pool,
55+
dbConfig = floraConfig.dbConfig,
56+
jobsPool = jobsPool,
57+
httpPort = floraConfig.httpPort,
58+
domain = floraConfig.domain,
59+
mltp = floraConfig.mltp,
60+
environment = floraConfig.environment,
61+
features = featureEnv,
62+
assets = assets,
63+
config = floraConfig,
64+
metrics = metrics,
65+
theme = Nothing
6566
}
6667

6768
getFloraEnv :: (Fail :> es, FileSystem :> es, IOE :> es) => Eff es FloraEnv

src/core/Flora/Environment/Env.hs

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
module Flora.Environment.Env
2-
( FloraEnv (..)
3-
, AppMetrics (..)
4-
, DeploymentEnv (..)
5-
, MLTP (..)
6-
, FeatureEnv (..)
7-
, BlobStoreImpl (..)
8-
) where
2+
( FloraEnv (..),
3+
AppMetrics (..),
4+
DeploymentEnv (..),
5+
MLTP (..),
6+
FeatureEnv (..),
7+
BlobStoreImpl (..),
8+
)
9+
where
910

1011
import Data.Aeson
1112
import Data.Pool (Pool)
1213
import Data.Text (Text)
1314
import Data.Word
1415
import Database.PostgreSQL.Simple qualified as PG
16+
import Flora.Environment.Config
1517
import GHC.Generics
1618
import Prometheus qualified as P
1719

18-
import Flora.Environment.Config
19-
2020
-- | The datatype that is used in the application
2121
data FloraEnv = FloraEnv
22-
{ pool :: Pool PG.Connection
23-
, dbConfig :: PoolConfig
24-
, jobsPool :: Pool PG.Connection
25-
, httpPort :: Word16
26-
, domain :: Text
27-
, mltp :: MLTP
28-
, environment :: DeploymentEnv
29-
, features :: FeatureEnv
30-
, config :: FloraConfig
31-
, assets :: Assets
32-
, metrics :: AppMetrics
22+
{ pool :: Pool PG.Connection,
23+
dbConfig :: PoolConfig,
24+
jobsPool :: Pool PG.Connection,
25+
httpPort :: Word16,
26+
domain :: Text,
27+
mltp :: MLTP,
28+
environment :: DeploymentEnv,
29+
features :: FeatureEnv,
30+
config :: FloraConfig,
31+
assets :: Assets,
32+
metrics :: AppMetrics,
33+
theme :: Maybe Text
3334
}
3435
deriving stock (Generic)
3536

src/web/FloraWeb/Common/Auth.hs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ handler
9898
-> Eff es (Headers '[Header "Set-Cookie" SetCookie] (Session (Maybe User)))
9999
handler floraEnv req = do
100100
let cookies = getCookies req
101+
let theme = getTheme cookies
101102
mbPersistentSessionId <- handlerToEff $ getSessionId cookies
102103
mbPersistentSession <- getInTheFuckingSessionShinji mbPersistentSessionId
103104
mUserInfo <- fetchUser mbPersistentSession
@@ -108,7 +109,7 @@ handler floraEnv req = do
108109
nSessionId <- liftIO newPersistentSessionId
109110
pure (Nothing, nSessionId)
110111
Just (user, userSession) -> pure (Just user, userSession.persistentSessionId)
111-
webEnvStore <- liftIO $ newWebEnvStore (WebEnv floraEnv)
112+
webEnvStore <- liftIO $ newWebEnvStore (WebEnv $ floraEnv { theme = theme })
112113
let sessionCookie = craftSessionCookie sessionId False
113114
pure $ addCookie sessionCookie $ Session sessionId user webEnvStore requestID
114115

@@ -147,6 +148,12 @@ getRequestID req = do
147148
Nothing -> fmap UUID.toText UUID.nextRandom
148149
Just requestID -> pure $ Text.decodeUtf8 requestID
149150

151+
getTheme :: Cookies -> Maybe Text
152+
getTheme cookies =
153+
case List.lookup "theme" cookies of
154+
Nothing -> Nothing
155+
Just theme -> pure $ Text.decodeUtf8 theme
156+
150157
getSessionId :: Cookies -> Handler (Maybe PersistentSessionId)
151158
getSessionId cookies =
152159
case List.lookup "flora_server_session" cookies of

0 commit comments

Comments
 (0)