Skip to content

Commit 7ae24df

Browse files
7w17w1
authored
Merge pull request #19 from SwirlyStone5877/main
Add Neon City Light
2 parents 1a20f40 + 55fa6b2 commit 7ae24df

2 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎themes/neon-city-light.preview.sable.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
@sable-theme
3+
id: neon-city-light
4+
name: Neon City Light
5+
author: original by userspring, modified by swirly
6+
kind: light
7+
contrast: high
8+
tags: gradient, purple, glow, translucent
9+
fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city-light.sable.css
10+
*/
11+
12+
.sable-theme-preview {
13+
--sable-bg-container: linear-gradient(to top, hsl(300, 100%, 92%), hsl(300, 100%, 98%));
14+
--sable-bg-on-container: hsla(270, 20.5%, 10%, 0.85);
15+
--sable-surface-container: hsla(300, 30%, 95%, 0.67);
16+
--sable-surface-container-line: hsla(270, 35%, 69.06%, 0.85);
17+
--sable-surface-on-container: hsla(270, 0%, 5%, 1);
18+
--sable-primary-main: hsla(270, 25%, 66%, 0.85);
19+
--sable-primary-on-main: hsla(270, 12.5%, 15%, 0.85);
20+
}

‎themes/neon-city-light.sable.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
@sable-theme
3+
id: neon-city-light
4+
name: Neon City Light
5+
author: original by userspring, modified by swirly
6+
kind: light
7+
contrast: high
8+
tags: gradient, purple, glow, translucent
9+
fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city-light.sable.css
10+
*/
11+
12+
/* Comment: Keep alpha vars & --sides-grad for the "Solid Colors" tweak to work */
13+
14+
/* Center Box Gradient */
15+
body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] {
16+
--center-grad: linear-gradient(to top, hsl(300, 100%, 94.5%) 20%, hsl(300, 100%, 98%) 40%) fixed;
17+
background: var(--center-grad);
18+
}
19+
20+
body.sable-remote-theme {
21+
22+
/* Side Panels Gradient */
23+
--sides-grad: linear-gradient(to top, hsl(300, 100%, 92.5%) 20%, hsl(300, 100%, 98%) 40%) fixed;
24+
background: var(--sides-grad);
25+
26+
/* Translucence - Don't add new vars */
27+
--softest-alpha: 0;
28+
--softer-alpha: 0.4;
29+
--soft-alpha: 0.67;
30+
--hard-alpha: 0.85;
31+
--harder-alpha: meow;
32+
--hardest-alpha: 1;
33+
34+
/* Background */
35+
--sable-bg-container: hsla(300, 50%, 94%, 0.05); /*!*/
36+
--sable-bg-container-hover: hsla(270, 25%, 77.56%, var(--hard-alpha));
37+
--sable-bg-container-active: hsla(270, 25%, 75.52%, var(--hard-alpha));
38+
--sable-bg-container-line: hsla(270, 45%, 73.48%, var(--hard-alpha));
39+
--sable-bg-on-container: hsla(270, 20.5%, 10%, var(--hard-alpha));
40+
41+
/* Surface */
42+
--sable-surface-container: hsla(300, 30%, 95%, var(--soft-alpha)); /*!*/
43+
--sable-surface-container-hover: hsla(300, 25%, 89%, var(--hard-alpha));
44+
--sable-surface-container-active: hsla(270, 25%, 71.44%, var(--hard-alpha));
45+
--sable-surface-container-line: hsla(270, 35%, 69.06%, var(--hard-alpha));
46+
--sable-surface-on-container: hsla(270, 0%, 5%, var(--hardest-alpha));
47+
48+
/* Surface Variant */
49+
--sable-surface-var-container: hsla(270, 0%, 100%, var(--softer-alpha)); /*!*/
50+
--sable-surface-var-container-hover: hsla(270, 30%, 81.3%, var(--hard-alpha));
51+
--sable-surface-var-container-active: hsla(270, 30%, 79.6%, var(--hard-alpha));
52+
--sable-surface-var-container-line: hsla(270, 35%, 58%, var(--hard-alpha));
53+
--sable-surface-var-on-container: hsla(270, 40%, 10%, var(--hard-alpha));
54+
55+
/* Primary */
56+
--sable-primary-main: hsla(270, 25%, 66%, var(--hard-alpha));
57+
--sable-primary-main-hover: hsla(270, 25%, 62.6%, var(--hard-alpha));
58+
--sable-primary-main-active: hsla(270, 25%, 59.2%, var(--hard-alpha));
59+
--sable-primary-main-line: hsla(270, 35%, 55.8%, var(--hard-alpha));
60+
--sable-primary-on-main: hsla(270, 12.5%, 15%, var(--hard-alpha));
61+
--sable-primary-container: hsla(270, 20%, 80%, var(--hard-alpha));
62+
--sable-primary-container-hover: hsla(272, 43.8%, 77.56%, var(--hard-alpha));
63+
--sable-primary-container-active: hsla(270, 20%, 46.96%, var(--hard-alpha));
64+
--sable-primary-container-line: hsla(270, 30%, 42.54%, var(--hard-alpha));
65+
--sable-primary-on-container: hsla(272, 73%, 18.4%, var(--hard-alpha));
66+
67+
/* Secondary */
68+
--sable-sec-main: hsla(270, 35%, 36%, var(--hard-alpha));
69+
--sable-sec-main-hover: hsla(270, 50%, 12%, var(--hard-alpha));
70+
--sable-sec-main-active: hsla(270, 50%, 4%, var(--hard-alpha));
71+
--sable-sec-main-line: hsla(270, 50%, 0%, var(--hard-alpha));
72+
--sable-sec-on-main: hsla(270, 50%, 100%, var(--hard-alpha));
73+
--sable-sec-container: hsla(270, 35%, 95%, var(--hard-alpha));
74+
--sable-sec-container-hover: hsla(270, 35%, 80%, var(--hard-alpha));
75+
--sable-sec-container-active: hsla(270, 35%, 52%, var(--hard-alpha));
76+
--sable-sec-container-line: hsla(270, 35%, 48%, var(--hard-alpha));
77+
--sable-sec-on-container: hsla(270, 50%, 4%, var(--hard-alpha));
78+
79+
/* Success */
80+
--sable-success-main: hsla(271, 46%, 27%, var(--hard-alpha));
81+
--sable-success-main-hover: hsla(271, 46%, 19.7%, var(--hard-alpha));
82+
--sable-success-main-active: hsla(271, 46%, 12.4%, var(--hard-alpha));
83+
--sable-success-main-line: hsla(271, 46%, 5.1%, var(--hard-alpha));
84+
--sable-success-on-main: hsla(271, 23%, 85.4%, var(--hard-alpha));
85+
--sable-success-container: hsla(271, 27.6%, 78.1%, var(--hard-alpha));
86+
--sable-success-container-hover: hsla(271, 27.6%, 75.91%, var(--hard-alpha));
87+
--sable-success-container-active: hsla(271, 27.6%, 73.72%, var(--hard-alpha));
88+
--sable-success-container-line: hsla(271, 37.6%, 71.53%, var(--hard-alpha));
89+
--sable-success-on-container: hsla(271, 46%, 12.4%, var(--hard-alpha));
90+
91+
/* Warning */
92+
--sable-warn-main: hsla(0, 100%, 0%, var(--hard-alpha));
93+
--sable-warn-main-hover: hsla(0, 50%, 0%, var(--hard-alpha));
94+
--sable-warn-main-active: hsla(0, 50%, 0%, var(--hard-alpha));
95+
--sable-warn-main-line: hsla(0, 50%, 0%, var(--hard-alpha));
96+
--sable-warn-on-main: hsla(0, 25%, 70%, var(--hard-alpha));
97+
--sable-warn-container: hsla(270, 30%, 55%, var(--hard-alpha));
98+
--sable-warn-container-hover: hsla(270, 30%, 50.5%, var(--hard-alpha));
99+
--sable-warn-container-active: hsla(270, 30%, 46%, var(--hard-alpha));
100+
--sable-warn-container-line: hsla(270, 35%, 41.5%, var(--hard-alpha));
101+
--sable-warn-on-container: hsla(270, 50%, 0%, var(--hard-alpha));
102+
103+
/* Critical */
104+
--sable-crit-main: hsla(272, 73%, 32%, var(--hard-alpha));
105+
--sable-crit-main-hover: hsla(272, 73%, 25.2%, var(--hard-alpha));
106+
--sable-crit-main-active: hsla(272, 73%, 18.4%, var(--hard-alpha));
107+
--sable-crit-main-line: hsla(272, 73%, 11.6%, var(--hard-alpha));
108+
--sable-crit-on-main: hsla(272, 36.5%, 86.4%, var(--hard-alpha));
109+
--sable-crit-container: hsla(272, 43.8%, 79.6%, var(--hard-alpha));
110+
--sable-crit-container-hover: hsla(272, 43.8%, 77.56%, var(--hard-alpha));
111+
--sable-crit-container-active: hsla(272, 43.8%, 75.52%, var(--hard-alpha));
112+
--sable-crit-container-line: hsla(272, 43.8%, 73.48%, var(--hard-alpha));
113+
--sable-crit-on-container: hsla(272, 73%, 18.4%, var(--hard-alpha));
114+
115+
/* Other */
116+
--sable-focus-ring: hsla(270, 100%, 25%, 0.8);
117+
--sable-shadow: hsla(270, 100%, 30%, 0.6);
118+
--sable-overlay: hsla(270, 55%, 88%, 0.9);
119+
}
120+
121+
/* Left Panel Buttons Shadow */
122+
body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover {
123+
box-shadow: 0 0 9px 1px hsla(270, 100%, 25%, 0.65);
124+
transition: box-shadow 0.2s ease;
125+
}
126+
127+
/* Text Box Shadow */
128+
*:focus-visible {
129+
box-shadow: 0 10px 15px -10px hsla(270, 50%, 50%, 0.6);
130+
outline: none;
131+
}
132+
133+
134+
/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence:
135+
136+
body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
137+
background: linear-gradient(to top, hsla(200, 100%, 92%, 0.85) 20%, hsla(300, 100%, 98%, 0.85) 40%) fixed;
138+
}
139+
or set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence
140+
*/

0 commit comments

Comments
 (0)