diff --git a/themes/blue-nord.sable.css b/themes/blue-nord.sable.css index 722959a..f1796d5 100644 --- a/themes/blue-nord.sable.css +++ b/themes/blue-nord.sable.css @@ -68,11 +68,11 @@ body.sable-remote-theme { --sable-success-on-container: hsl(189, 46%, 87.6%); /* Warning */ - --sable-warn-main: hsl(40, 100%, 100%); - --sable-warn-main-hover: hsl(40, 50%, 100%); - --sable-warn-main-active: hsl(40, 50%, 100%); - --sable-warn-main-line: hsl(40, 50%, 100%); - --sable-warn-on-main: hsl(40, 25%, 30%); + --sable-warn-main: hsl(0, 100%, 100%); + --sable-warn-main-hover: hsl(0, 50%, 100%); + --sable-warn-main-active: hsl(0, 50%, 100%); + --sable-warn-main-line: hsl(0, 50%, 100%); + --sable-warn-on-main: hsl(0, 25%, 30%); --sable-warn-container: hsl(40, 30%, 45%); --sable-warn-container-hover: hsl(40, 30%, 49.5%); --sable-warn-container-active: hsl(40, 30%, 54%); diff --git a/themes/midnight-fairy.preview.sable.css b/themes/midnight-fairy.preview.sable.css new file mode 100644 index 0000000..99357da --- /dev/null +++ b/themes/midnight-fairy.preview.sable.css @@ -0,0 +1,20 @@ +/* +@sable-theme +id: midnight-fairy +name: Midnight Fairy +author: userspring +kind: dark +contrast: low +tags: gradient, purple, violet blue, two-tone +fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/midnight-fairy.sable.css +*/ + +.sable-theme-preview { + --sable-bg-container: linear-gradient(to left, hsl(250, 40%, 28%), hsl(225, 40%, 25%)); + --sable-bg-on-container: hsl(345, 30%, 88%); + --sable-surface-container: hsl(230, 35%, 33%); + --sable-surface-container-line: hsl(270, 25%, 30.94%); + --sable-surface-on-container: hsl(345, 25%, 92%); + --sable-primary-main: hsl(270, 25%, 34%); + --sable-primary-on-main: hsl(270, 12.5%, 85%); +} \ No newline at end of file diff --git a/themes/midnight-fairy.sable.css b/themes/midnight-fairy.sable.css new file mode 100644 index 0000000..bada261 --- /dev/null +++ b/themes/midnight-fairy.sable.css @@ -0,0 +1,124 @@ +/* +@sable-theme +id: midnight-fairy +name: Midnight Fairy +author: userspring +kind: dark +contrast: low +tags: gradient, purple, violet blue, two-tone +fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/midnight-fairy.sable.css +*/ + +/* Comment: Keep --sides-grad for the "Solid Colors" tweak to work */ + + /* Center Box Gradient */ +body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] { + --center-grad: radial-gradient(ellipse at right, hsl(250, 40%, 28%) 20%, hsl(210, 40%, 20%)) fixed; + background: var(--center-grad); +} + +body.sable-remote-theme { + + /* Side Panels Gradient */ + --sides-grad: radial-gradient(ellipse at right, hsl(300, 100%, 30%), hsl(0, 0%, 0%)) fixed; + background: var(--sides-grad); + + /* Background */ + --sable-bg-container: hsla(270, 25%, 20.4%, 0.7); /*!*/ + --sable-bg-container-hover: hsl(270, 25%, 22.44%); + --sable-bg-container-active: hsl(270, 25%, 24.48%); + --sable-bg-container-line: hsl(270, 25%, 26.52%); + --sable-bg-on-container: hsl(345, 30%, 88%); + + /* Surface */ + --sable-surface-container: hsl(230, 35%, 33%); + --sable-surface-container-hover: hsl(250, 25%, 30.18%); + --sable-surface-container-active: hsl(270, 25%, 28.56%); + --sable-surface-container-line: hsl(270, 25%, 30.94%); + --sable-surface-on-container: hsl(345, 25%, 92%); + + /* Surface Variant */ + --sable-surface-var-container: hsl(230, 40%, 30%); + --sable-surface-var-container-hover: hsl(270, 30%, 18.7%); + --sable-surface-var-container-active: hsl(270, 30%, 20.4%); + --sable-surface-var-container-line: hsl(270, 30%, 35%); + --sable-surface-var-on-container: hsl(270, 40%, 90%); + + /* Primary */ + --sable-primary-main: hsl(270, 25%, 34%); + --sable-primary-main-hover: hsl(270, 25%, 37.4%); + --sable-primary-main-active: hsl(270, 25%, 40.8%); + --sable-primary-main-line: hsl(270, 25%, 44.2%); + --sable-primary-on-main: hsl(270, 12.5%, 85%); + --sable-primary-container: hsl(270, 22%, 58%); + --sable-primary-container-hover: hsl(250, 25%, 40.18%); + --sable-primary-container-active: hsl(270, 20%, 53.04%); + --sable-primary-container-line: hsl(270, 20%, 57.46%); + --sable-primary-on-container: hsl(345, 25%, 92%); + + /* Secondary */ + --sable-sec-main: hsl(230, 32%, 65%); + --sable-sec-main-hover: hsl(230, 50%, 88%); + --sable-sec-main-active: hsl(230, 50%, 96%); + --sable-sec-main-line: hsl(230, 50%, 100%); + --sable-sec-on-main: hsl(230, 50%, 24%); + --sable-sec-container: hsl(230, 35%, 50%); + --sable-sec-container-hover: hsl(230, 35%, 44%); + --sable-sec-container-active: hsl(230, 35%, 48%); + --sable-sec-container-line: hsl(230, 35%, 52%); + --sable-sec-on-container: hsl(230, 50%, 96%); + + /* Success */ + --sable-success-main: hsl(345, 46%, 73%); + --sable-success-main-hover: hsl(345, 46%, 80.3%); + --sable-success-main-active: hsl(345, 46%, 87.6%); + --sable-success-main-line: hsl(345, 46%, 94.9%); + --sable-success-on-main: hsl(345, 23%, 14.6%); + --sable-success-container: hsl(345, 27.6%, 21.9%); + --sable-success-container-hover: hsl(345, 27.6%, 24.09%); + --sable-success-container-active: hsl(345, 27.6%, 26.28%); + --sable-success-container-line: hsl(345, 27.6%, 28.47%); + --sable-success-on-container: hsl(345, 46%, 87.6%); + + /* Warning */ + --sable-warn-main: hsl(0, 100%, 100%); + --sable-warn-main-hover: hsl(0, 50%, 100%); + --sable-warn-main-active: hsl(0, 50%, 100%); + --sable-warn-main-line: hsl(0, 50%, 100%); + --sable-warn-on-main: hsl(0, 25%, 30%); + --sable-warn-container: hsl(345, 30%, 45%); + --sable-warn-container-hover: hsl(345, 30%, 49.5%); + --sable-warn-container-active: hsl(345, 30%, 54%); + --sable-warn-container-line: hsl(345, 30%, 58.5%); + --sable-warn-on-container: hsl(345, 50%, 100%); + + /* Critical */ + --sable-crit-main: hsl(345, 73%, 68%); + --sable-crit-main-hover: hsl(345, 73%, 74.8%); + --sable-crit-main-active: hsl(345, 73%, 81.6%); + --sable-crit-main-line: hsl(345, 73%, 88.4%); + --sable-crit-on-main: hsl(345, 36.5%, 13.6%); + --sable-crit-container: hsl(345, 43.8%, 20.4%); + --sable-crit-container-hover: hsl(345, 43.8%, 22.44%); + --sable-crit-container-active: hsl(345, 43.8%, 24.48%); + --sable-crit-container-line: hsl(345, 43.8%, 26.52%); + --sable-crit-on-container: hsl(345, 73%, 81.6%); + + /* Other */ + --sable-focus-ring: hsla(270, 100%, 75%, 0.8); + --sable-shadow: hsla(270, 100%, 70%, 0.2); + --sable-overlay: hsla(270, 55%, 12%, 0.9); +} + +/* Left Panel Buttons */ +body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover { + background-color: hsl(270, 25%, 30.6%); +} + +/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence: + +body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] { +background: linear-gradient(to top, hsla(200, 100%, 8%, 0.85) 20%, hsla(300, 100%, 2%, 0.85) 40%) fixed; +} +or like we did, set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence +*/ \ No newline at end of file diff --git a/themes/neon-city.preview.sable.css b/themes/neon-city.preview.sable.css new file mode 100644 index 0000000..873379d --- /dev/null +++ b/themes/neon-city.preview.sable.css @@ -0,0 +1,20 @@ +/* +@sable-theme +id: neon-city +name: Neon City +author: userspring +kind: dark +contrast: high +tags: gradient, purple, glow, translucent +fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city.sable.css +*/ + +.sable-theme-preview { + --sable-bg-container: linear-gradient(to top, hsl(300, 100%, 8%), hsl(300, 100%, 2%)); + --sable-bg-on-container: hsla(270, 20.5%, 90%, 0.85); + --sable-surface-container: hsla(300, 30%, 5%, 0.67); + --sable-surface-container-line: hsla(270, 35%, 30.94%, 0.85); + --sable-surface-on-container: hsla(270, 0%, 95%, 1); + --sable-primary-main: hsla(270, 25%, 34%, 0.85); + --sable-primary-on-main: hsla(270, 12.5%, 85%, 0.85); +} \ No newline at end of file diff --git a/themes/neon-city.sable.css b/themes/neon-city.sable.css new file mode 100644 index 0000000..21b3fa0 --- /dev/null +++ b/themes/neon-city.sable.css @@ -0,0 +1,140 @@ +/* +@sable-theme +id: neon-city +name: Neon City +author: userspring +kind: dark +contrast: high +tags: gradient, purple, glow, translucent +fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city.sable.css +*/ + +/* Comment: Keep alpha vars & --sides-grad for the "Solid Colors" tweak to work */ + + /* Center Box Gradient */ +body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] { + --center-grad: linear-gradient(to top, hsl(300, 100%, 5.5%) 20%, hsl(300, 100%, 2%) 40%) fixed; + background: var(--center-grad); +} + +body.sable-remote-theme { + + /* Side Panels Gradient */ + --sides-grad: linear-gradient(to top, hsl(300, 100%, 7.5%) 20%, hsl(300, 100%, 2%) 40%) fixed; + background: var(--sides-grad); + + /* Translucence - Don't add new vars */ + --softest-alpha: 0; + --softer-alpha: 0.4; + --soft-alpha: 0.67; + --hard-alpha: 0.85; + --harder-alpha: meow; + --hardest-alpha: 1; + + /* Background */ + --sable-bg-container: hsla(300, 50%, 6%, 0.05); /*!*/ + --sable-bg-container-hover: hsla(270, 25%, 22.44%, var(--hard-alpha)); + --sable-bg-container-active: hsla(270, 25%, 24.48%, var(--hard-alpha)); + --sable-bg-container-line: hsla(270, 45%, 26.52%, var(--hard-alpha)); + --sable-bg-on-container: hsla(270, 20.5%, 90%, var(--hard-alpha)); + + /* Surface */ + --sable-surface-container: hsla(300, 30%, 5%, var(--soft-alpha)); /*!*/ + --sable-surface-container-hover: hsla(300, 25%, 11%, var(--hard-alpha)); + --sable-surface-container-active: hsla(270, 25%, 28.56%, var(--hard-alpha)); + --sable-surface-container-line: hsla(270, 35%, 30.94%, var(--hard-alpha)); + --sable-surface-on-container: hsla(270, 0%, 95%, var(--hardest-alpha)); + + /* Surface Variant */ + --sable-surface-var-container: hsla(270, 0%, 0%, var(--softer-alpha)); /*!*/ + --sable-surface-var-container-hover: hsla(270, 30%, 18.7%, var(--hard-alpha)); + --sable-surface-var-container-active: hsla(270, 30%, 20.4%, var(--hard-alpha)); + --sable-surface-var-container-line: hsla(270, 35%, 42%, var(--hard-alpha)); + --sable-surface-var-on-container: hsla(270, 40%, 90%, var(--hard-alpha)); + + /* Primary */ + --sable-primary-main: hsla(270, 25%, 34%, var(--hard-alpha)); + --sable-primary-main-hover: hsla(270, 25%, 37.4%, var(--hard-alpha)); + --sable-primary-main-active: hsla(270, 25%, 40.8%, var(--hard-alpha)); + --sable-primary-main-line: hsla(270, 35%, 44.2%, var(--hard-alpha)); + --sable-primary-on-main: hsla(270, 12.5%, 85%, var(--hard-alpha)); + --sable-primary-container: hsla(270, 20%, 20%, var(--hard-alpha)); + --sable-primary-container-hover: hsla(272, 43.8%, 22.44%, var(--hard-alpha)); + --sable-primary-container-active: hsla(270, 20%, 53.04%, var(--hard-alpha)); + --sable-primary-container-line: hsla(270, 30%, 57.46%, var(--hard-alpha)); + --sable-primary-on-container: hsla(272, 73%, 81.6%, var(--hard-alpha)); + + /* Secondary */ + --sable-sec-main: hsla(270, 35%, 64%, var(--hard-alpha)); + --sable-sec-main-hover: hsla(270, 50%, 88%, var(--hard-alpha)); + --sable-sec-main-active: hsla(270, 50%, 96%, var(--hard-alpha)); + --sable-sec-main-line: hsla(270, 50%, 100%, var(--hard-alpha)); + --sable-sec-on-main: hsla(270, 50%, 24%, var(--hard-alpha)); + --sable-sec-container: hsla(270, 35%, 5%, var(--hard-alpha)); + --sable-sec-container-hover: hsla(270, 35%, 20%, var(--hard-alpha)); + --sable-sec-container-active: hsla(270, 35%, 48%, var(--hard-alpha)); + --sable-sec-container-line: hsla(270, 35%, 52%, var(--hard-alpha)); + --sable-sec-on-container: hsla(270, 50%, 96%, var(--hard-alpha)); + + /* Success */ + --sable-success-main: hsla(271, 46%, 73%, var(--hard-alpha)); + --sable-success-main-hover: hsla(271, 46%, 80.3%, var(--hard-alpha)); + --sable-success-main-active: hsla(271, 46%, 87.6%, var(--hard-alpha)); + --sable-success-main-line: hsla(271, 46%, 94.9%, var(--hard-alpha)); + --sable-success-on-main: hsla(271, 23%, 14.6%, var(--hard-alpha)); + --sable-success-container: hsla(271, 27.6%, 21.9%, var(--hard-alpha)); + --sable-success-container-hover: hsla(271, 27.6%, 24.09%, var(--hard-alpha)); + --sable-success-container-active: hsla(271, 27.6%, 26.28%, var(--hard-alpha)); + --sable-success-container-line: hsla(271, 37.6%, 28.47%, var(--hard-alpha)); + --sable-success-on-container: hsla(271, 46%, 87.6%, var(--hard-alpha)); + + /* Warning */ + --sable-warn-main: hsla(0, 100%, 100%, var(--hard-alpha)); + --sable-warn-main-hover: hsla(0, 50%, 100%, var(--hard-alpha)); + --sable-warn-main-active: hsla(0, 50%, 100%, var(--hard-alpha)); + --sable-warn-main-line: hsla(0, 50%, 100%, var(--hard-alpha)); + --sable-warn-on-main: hsla(0, 25%, 30%, var(--hard-alpha)); + --sable-warn-container: hsla(270, 30%, 45%, var(--hard-alpha)); + --sable-warn-container-hover: hsla(270, 30%, 49.5%, var(--hard-alpha)); + --sable-warn-container-active: hsla(270, 30%, 54%, var(--hard-alpha)); + --sable-warn-container-line: hsla(270, 35%, 58.5%, var(--hard-alpha)); + --sable-warn-on-container: hsla(270, 50%, 100%, var(--hard-alpha)); + + /* Critical */ + --sable-crit-main: hsla(272, 73%, 68%, var(--hard-alpha)); + --sable-crit-main-hover: hsla(272, 73%, 74.8%, var(--hard-alpha)); + --sable-crit-main-active: hsla(272, 73%, 81.6%, var(--hard-alpha)); + --sable-crit-main-line: hsla(272, 73%, 88.4%, var(--hard-alpha)); + --sable-crit-on-main: hsla(272, 36.5%, 13.6%, var(--hard-alpha)); + --sable-crit-container: hsla(272, 43.8%, 20.4%, var(--hard-alpha)); + --sable-crit-container-hover: hsla(272, 43.8%, 22.44%, var(--hard-alpha)); + --sable-crit-container-active: hsla(272, 43.8%, 24.48%, var(--hard-alpha)); + --sable-crit-container-line: hsla(272, 43.8%, 26.52%, var(--hard-alpha)); + --sable-crit-on-container: hsla(272, 73%, 81.6%, var(--hard-alpha)); + + /* Other */ + --sable-focus-ring: hsla(270, 100%, 75%, 0.8); + --sable-shadow: hsla(270, 100%, 70%, 0.6); + --sable-overlay: hsla(270, 55%, 12%, 0.9); +} + +/* Left Panel Buttons Shadow */ +body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover { + box-shadow: 0 0 9px 1px hsla(270, 100%, 75%, 0.65); + transition: box-shadow 0.2s ease; +} + + /* Text Box Shadow */ +*:focus-visible { + box-shadow: 0 10px 15px -10px hsla(270, 50%, 50%, 0.6); + outline: none; +} + + +/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence: + +body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] { +background: linear-gradient(to top, hsla(200, 100%, 8%, 0.85) 20%, hsla(300, 100%, 2%, 0.85) 40%) fixed; +} +or set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence +*/ \ No newline at end of file diff --git a/themes/shark-deep-blue.sable.css b/themes/shark-deep-blue.sable.css index e4b97fb..e1e1514 100644 --- a/themes/shark-deep-blue.sable.css +++ b/themes/shark-deep-blue.sable.css @@ -93,7 +93,7 @@ body.sable-remote-theme { --sable-sec-on-container: hsl(203, 78.9%, 98.99%); /* --- Success --- */ - --sable-success-main: hsl(206, 72.59%, 79.17%); + --sable-success-main: hsl(353, 72.59%, 79.17%); --sable-success-main-hover: hsl(353, 69.43%, 72.67%); --sable-success-main-active: hsl(353, 67.85%, 67.90%); --sable-success-main-line: hsl(353, 66.28%, 63.68%); diff --git a/tweaks/solid-colors.sable.css b/tweaks/solid-colors.sable.css new file mode 100644 index 0000000..18248c2 --- /dev/null +++ b/tweaks/solid-colors.sable.css @@ -0,0 +1,27 @@ +/* +@sable-tweak +id: solid-colors +name: Solid Colors +description: Remove transparency effects +author: userspring +tags: global, translucence +*/ + +/* Remove opacity on elements */ +body.sable-remote-theme, +body.sable-remote-theme * { + --softest-alpha: 1 !important; + --softer-alpha: 1 !important; + --soft-alpha: 1 !important; + --hard-alpha: 1 !important; + --harder-alpha: 1 !important; + --hardest-alpha: 1 !important; +} + +/* Fix for gradient themes - Settings Left Panel*/ +body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] { + background: linear-gradient(to top, var(--sable-bg-container), var(--sable-bg-container)), var(--sides-grad) !important; +} + + +/* Tip - Check 'Neon City' theme implementation*/ \ No newline at end of file