 }})
diff --git a/gallery/themes/default/components/banner.sass b/gallery/themes/default/components/banner.sass
index 6f41647..dda4697 100644
--- a/gallery/themes/default/components/banner.sass
+++ b/gallery/themes/default/components/banner.sass
@@ -4,8 +4,8 @@
position: relative
- background-color: $black
- color: $white
+ background-color: RGB($bg-300)
+ color: RGB($fg-white)
overflow: hidden
transition: opacity 0.3s ease-in-out
@@ -18,7 +18,7 @@
width: 100%
height: 100%
- background-color: $black2
+ background-color: RGB($bg-200)
object-fit: cover
object-position: center center
@@ -31,7 +31,7 @@
width: 100%
height: 100%
- background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
+ background: linear-gradient(to right, RGB($primary), transparent)
z-index: +1
@@ -57,7 +57,7 @@
font-weight: 800
text-align: left
- color: $primary
+ color: RGB($primary)
p
margin: 0
diff --git a/gallery/themes/default/components/buttons/block.sass b/gallery/themes/default/components/buttons/block.sass
index 79b8361..e35afbf 100644
--- a/gallery/themes/default/components/buttons/block.sass
+++ b/gallery/themes/default/components/buttons/block.sass
@@ -1,13 +1,12 @@
@mixin btn-block($color)
- background-color: rgba($color, 0)
- color: $color
+ color: RGB($color)
&:hover
- background-color: rgba($color, 0.2)
- color: $color
+ background-color: RGBA($color, 0.1)
+ color: RGB($color)
&:focus-visible
- outline: 2px solid rgba($color, 0.5)
+ outline: 2px solid RGBA($color, 0.3)
.btn-block
padding: 0.5rem 1rem
@@ -26,20 +25,19 @@
font-weight: 600
text-align: center
- background-color: rgba($white, 0)
- color: $white
+ background-color: transparent
+ color: RGB($white)
border: none
border-radius: $rad-inner
cursor: pointer
-
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
&:hover
- background-color: rgba($white, 0.2)
+ background-color: RGBA($white, 0.1)
&:focus-visible
- outline: 2px solid rgba($white, 0.5)
+ outline: 2px solid RGBA($white, 0.3)
&.primary
@include btn-block($primary)
@@ -76,24 +74,24 @@
font-weight: 600
text-align: left
- background-color: rgba($white, 0.1)
- color: $white
+ background-color: RGBA($white, 0.1)
+ color: RGB($white)
border: none
- border-bottom: 3px solid rgba($white, 0.1)
+ border-bottom: 3px solid RGBA($white, 0.1)
border-radius: $rad-inner
cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
&:not(:focus):not([value=""]):not(:placeholder-shown)
- border-color: rgba($white, 0.3)
+ border-color: RGBA($white, 0.3)
&:hover
- border-color: rgba($white, 0.3)
+ border-color: RGBA($white, 0.3)
&:focus
- border-color: $primary
+ border-color: RGBA($primary, 0.3)
outline: none
&.black
@@ -117,8 +115,8 @@
font-weight: 600
text-align: center
- background-color: rgba($white, 0.1)
- color: $white
+ background-color: RGBA($white, 0.1)
+ color: RGB($white)
border: none
border-radius: $rad-inner
@@ -133,20 +131,20 @@
cursor: pointer
&:hover
- background-color: rgba($white, 0.2)
- color: $white
+ background-color: RGBA($white, 0.2)
+ color: RGB($white)
&.active
- background-color: rgba($primary, 0.2)
- color: $primary
+ background-color: RGBA($primary, 0.2)
+ color: RGB($primary)
&.edging
- background-color: rgba($white, 0.2)
- color: $white
+ background-color: RGBA($white, 0.2)
+ color: RGB($white)
input
display: none // So it doesnt get in the way of the drop as that breaks things
&.error
- background-color: rgba($critical, 0.2)
- color: $critical
+ background-color: RGBA($critical, 0.2)
+ color: RGB($critical)
diff --git a/gallery/themes/default/components/buttons/info-button.sass b/gallery/themes/default/components/buttons/info-button.sass
index 03cd281..6a4edd4 100644
--- a/gallery/themes/default/components/buttons/info-button.sass
+++ b/gallery/themes/default/components/buttons/info-button.sass
@@ -13,8 +13,8 @@
justify-content: center
align-items: center
- background-color: $black2
- color: $white
+ background-color: RGB($bg-200)
+ color: RGB($fg-white)
border-radius: $rad
border: none
opacity: 0
@@ -24,7 +24,7 @@
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
- color: $info
+ color: RGB($info)
svg
margin: 0.5rem
diff --git a/gallery/themes/default/components/buttons/pill.sass b/gallery/themes/default/components/buttons/pill.sass
index 5da49da..c7b8682 100644
--- a/gallery/themes/default/components/buttons/pill.sass
+++ b/gallery/themes/default/components/buttons/pill.sass
@@ -16,7 +16,7 @@
display: flex
- background-color: $black
+ background-color: RGB($bg-100)
border-radius: $rad
.pill-item
@@ -34,7 +34,7 @@
border: none
background-color: transparent
- color: $white
+ color: RGB($fg-white)
svg
width: 1.25rem
@@ -43,7 +43,7 @@
&:hover
cursor: pointer
- color: $primary
+ color: RGB($primary)
.tool-tip
opacity: 1
@@ -51,22 +51,22 @@
transform: translateX(calc(-50% + 1.25rem ))
.pill__critical
- color: $critical
+ color: RGB($critical)
span
- color: $critical
+ color: RGB($critical)
&:hover
- color: $white
+ color: RGB($fg-white)
.pill__info
- color: $info
+ color: RGB($info)
span
- color: $info
+ color: RGB($info)
&:hover
- color: $white
+ color: RGB($fg-white)
.tool-tip
margin: 0
@@ -85,7 +85,7 @@
font-weight: 600
background-color: #000000
- color: $white
+ color: RGB($fg-white)
opacity: 0
border-radius: $rad-inner
diff --git a/gallery/themes/default/components/buttons/top-of-page.sass b/gallery/themes/default/components/buttons/top-of-page.sass
index 367ce94..306a2e9 100644
--- a/gallery/themes/default/components/buttons/top-of-page.sass
+++ b/gallery/themes/default/components/buttons/top-of-page.sass
@@ -13,8 +13,8 @@
justify-content: center
align-items: center
- background-color: $black2
- color: $white
+ background-color: RGB($bg-200)
+ color: RGB($fg-white)
border-radius: $rad
border: none
opacity: 0
@@ -24,7 +24,7 @@
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
- color: $primary
+ color: RGB($primary)
svg
margin: 0.5rem
diff --git a/gallery/themes/default/components/elements/labels.sass b/gallery/themes/default/components/elements/labels.sass
new file mode 100644
index 0000000..fb816ba
--- /dev/null
+++ b/gallery/themes/default/components/elements/labels.sass
@@ -0,0 +1,33 @@
+.label
+ padding: 0.4rem 0.7rem
+
+ display: block
+ position: absolute
+
+ font-size: 0.9rem
+ font-weight: 600
+
+ background-color: RGB($bg-dim)
+ color: RGB($fg-white)
+ border-radius: $rad-inner
+ opacity: 0
+
+ transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
+ pointer-events: none
+ z-index: 999
+
+ svg
+ margin: 0
+ font-size: 1rem
+
+ width: 0.75rem
+ height: 0.75rem
+
+ display: block
+
+ position: absolute
+ top: 50%
+ left: -0.45rem
+ transform: translateY(-50%)
+
+ color: RGB($bg-dim)
diff --git a/gallery/themes/default/components/elements/notification.sass b/gallery/themes/default/components/elements/notification.sass
index babbbf9..d3b5f3e 100644
--- a/gallery/themes/default/components/elements/notification.sass
+++ b/gallery/themes/default/components/elements/notification.sass
@@ -1,8 +1,8 @@
@mixin notification($color)
- color: $color
+ color: RGB($color)
.sniffle__notification-time
- background-color: $color
+ background-color: RGB($color)
.notifications
margin: 0
@@ -33,9 +33,9 @@
position: relative
- background-color: $black
+ background-color: RGB($bg-100)
border-radius: $rad-inner
- color: $white
+ color: RGB($fg-white)
opacity: 0
transform: scale(0.8)
@@ -55,7 +55,7 @@
justify-content: center
align-items: center
- background-color: $black2
+ background-color: RGB($bg-200)
svg
width: 1.25rem
@@ -89,7 +89,7 @@
bottom: 0px
left: 0px
- background-color: $white
+ background-color: RGB($fg-white)
animation: notificationTimeout 5.1s linear
@@ -123,4 +123,4 @@
.sniffle__notification--hide
opacity: 0
- transform: translateY(-5rem)
\ No newline at end of file
+ transform: translateY(-5rem)
diff --git a/gallery/themes/default/components/elements/pop-up.sass b/gallery/themes/default/components/elements/pop-up.sass
index 0a19661..87c2703 100644
--- a/gallery/themes/default/components/elements/pop-up.sass
+++ b/gallery/themes/default/components/elements/pop-up.sass
@@ -7,7 +7,7 @@
display: none
- background-color: rgba($black, 0.8)
+ background-color: $bg-transparent
opacity: 0
z-index: 101
@@ -38,7 +38,7 @@
display: flex
flex-direction: column
- background-color: $black
+ background-color: RGB($bg-100)
border-radius: $rad
overflow: hidden
@@ -73,7 +73,7 @@
font-weight: 800
text-align: center
- color: $white
+ color: RGB($fg-white)
p
margin: 0
@@ -84,7 +84,7 @@
font-weight: 500
text-align: center
- color: $white
+ color: RGB($fg-white)
svg
width: 1rem
@@ -99,7 +99,7 @@
text-align: center
line-height: 1
- color: $primary
+ color: RGB($primary)
cursor: pointer
text-decoration: none
@@ -133,7 +133,7 @@
.pop-up-controlls
margin: 0
- padding: 0.5rem
+ padding: 0.25rem
width: 100%
height: auto
@@ -141,9 +141,9 @@
display: flex
flex-direction: row
justify-content: flex-end
- gap: 0.5rem
+ gap: 0.25rem
- background-color: $black2
+ background-color: RGB($bg-200)
&.active
opacity: 1
diff --git a/gallery/themes/default/components/elements/tags.sass b/gallery/themes/default/components/elements/tags.sass
index 912a75a..8b4e42d 100644
--- a/gallery/themes/default/components/elements/tags.sass
+++ b/gallery/themes/default/components/elements/tags.sass
@@ -13,8 +13,8 @@
text-decoration: none
border-radius: $rad-inner
- background-color: $primary
- color: $black
+ background-color: RGB($primary)
+ color: RGB($bg-100)
border: none
cursor: pointer
diff --git a/gallery/themes/default/components/elements/upload-panel.sass b/gallery/themes/default/components/elements/upload-panel.sass
index e0b1a21..6b580b0 100644
--- a/gallery/themes/default/components/elements/upload-panel.sass
+++ b/gallery/themes/default/components/elements/upload-panel.sass
@@ -8,7 +8,7 @@
width: calc(100% - 3.5rem)
height: 100vh
- background-color: rgba($black, 0)
+ background-color: transparent
overflow: hidden
z-index: 68
@@ -21,7 +21,7 @@
font-size: 1.75rem
font-weight: 700
- color: $primary
+ color: RGB($primary)
p
margin: 0
@@ -30,7 +30,7 @@
font-size: 1rem
font-weight: 500
- color: $white
+ color: RGB($fg-white)
form
margin: 0
@@ -71,7 +71,7 @@
flex-direction: column
gap: 1rem
- background-color: $black
+ background-color: RGB($bg-200)
opacity: 0
z-index: +2
@@ -98,7 +98,7 @@
align-items: center
gap: 0.5rem
- background-color: $black2
+ background-color: RGB($bg-200)
border-radius: $rad
overflow: hidden
@@ -121,7 +121,7 @@
width: 100%
height: 100%
- background-image: linear-gradient(to right, rgba($black, 0.8), rgba($black, 0))
+ background-image: linear-gradient(to right, RGB($bg-100), transparent)
.job__status
margin: 0
@@ -134,7 +134,7 @@
font-size: 1rem
font-weight: 600
- color: $white
+ color: RGB($fg-white)
z-index: +3
@@ -148,7 +148,7 @@
bottom: 0
left: -100%
- background-color: $primary
+ background-color: RGB($primary)
animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite
@@ -157,23 +157,23 @@
&.critical
.job__status, .progress
- color: $critical
+ color: RGB($critical)
&.success
.job__status
- color: $success
+ color: RGB($success)
.progress
height: 0
animation: none
&.warning
.job__status, .progress
- color: $warning
+ color: RGB($warning)
&.critical, &.success, &.warning
.progress
height: 0
&.open
- background-color: rgba($black, 0.5)
+ background-color: $bg-transparent
.container
left: 0
@@ -199,4 +199,4 @@
&.open
.container
left: 0
- bottom: 0
\ No newline at end of file
+ bottom: 0
diff --git a/gallery/themes/default/components/gallery.sass b/gallery/themes/default/components/gallery.sass
index 5ba2a2a..4c741dd 100644
--- a/gallery/themes/default/components/gallery.sass
+++ b/gallery/themes/default/components/gallery.sass
@@ -36,12 +36,11 @@
flex-direction: column
justify-content: flex-end
- background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
+ background-image: linear-gradient(to top, $bg-transparent, transparent)
z-index: +1
opacity: 0 // hide
- transform: scale(1.05) // scale up
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
.image-title
@@ -50,7 +49,7 @@
font-size: 1rem
font-weight: 600
- color: $white
+ color: RGB($fg-white)
text-overflow: ellipsis
overflow: hidden
@@ -64,7 +63,7 @@
font-size: 0.8rem
font-weight: 500
- color: $white
+ color: RGB($fg-white)
text-overflow: ellipsis
overflow: hidden
@@ -82,7 +81,7 @@
object-fit: cover
object-position: center
- background-color: $white
+ background-color: RGB($fg-white)
transform: scale(1.05)
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
@@ -96,7 +95,6 @@
.image-filter
bottom: 0
opacity: 1
- transform: scale(1)
.image-title,
.image-subtitle
diff --git a/gallery/themes/default/components/image-view/background.sass b/gallery/themes/default/components/image-view/background.sass
index 14d8c1b..9d32286 100644
--- a/gallery/themes/default/components/image-view/background.sass
+++ b/gallery/themes/default/components/image-view/background.sass
@@ -6,11 +6,10 @@
top: 0
left: 0
- background-color: $white
-
- background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
- background-size: 1000px 640px
- animation: imgLoading 1.8s linear infinite forwards
+ background-color: RGB($fg-white)
+ // background-image: linear-gradient(to right, RGB($bg-200) 15%, RGB($bg-400) 35%, RGB($bg-200) 50%)
+ // background-size: 1000px 640px
+ // animation: imgLoading 1.8s linear infinite forwards
user-select: none
overflow: hidden
@@ -24,7 +23,7 @@
width: 100%
height: 100%
- background-color: $white
+ background-color: RGB($fg-white)
filter: blur(1rem)
transform: scale(1.1)
diff --git a/gallery/themes/default/components/image-view/fullscreen.sass b/gallery/themes/default/components/image-view/fullscreen.sass
index 1d35de5..3c61771 100644
--- a/gallery/themes/default/components/image-view/fullscreen.sass
+++ b/gallery/themes/default/components/image-view/fullscreen.sass
@@ -13,7 +13,7 @@
display: none
opacity: 0 // hide
- background-color: rgba($black, 0.8)
+ background-color: $bg-transparent
z-index: 21
box-sizing: border-box
diff --git a/gallery/themes/default/components/image-view/info-tab.sass b/gallery/themes/default/components/image-view/info-tab.sass
index f4e69ff..69ae244 100644
--- a/gallery/themes/default/components/image-view/info-tab.sass
+++ b/gallery/themes/default/components/image-view/info-tab.sass
@@ -4,9 +4,9 @@
display: flex
flex-direction: column
- gap: 0.5rem
+ gap: 0
- background-color: $black
+ background-color: RGB($bg-100)
overflow-y: auto
@@ -19,7 +19,7 @@
position: relative
- background-color: $black
+ background-color: RGB($bg-100)
border-radius: $rad
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
@@ -42,7 +42,7 @@
top: 0.6rem
right: 0.6rem
- color: $primary
+ color: RGB($primary)
z-index: +2
@@ -65,8 +65,6 @@
top: 0
z-index: +1
- background: $black2
-
svg
margin: 0
padding: 0
@@ -74,16 +72,16 @@
width: 1.25rem
height: 1.25rem
- fill: $primary
+ fill: RGB($primary)
h2
margin: 0
padding: 0
- font-size: 1.25rem
+ font-size: 1.1rem
font-weight: 600
- color: $primary
+ color: RGB($primary)
text-overflow: ellipsis
overflow: hidden
@@ -96,12 +94,10 @@
flex-direction: column
gap: 1rem
- color: $white
+ color: RGB($fg-white)
overflow-x: hidden
- transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
-
p
margin: 0
padding: 0
@@ -181,10 +177,14 @@
align-items: center
border-radius: 50%
- // border: 1px solid $white
+ border: 1px solid RGB($white)
.img-groups
width: 100%
display: flex
- gap: 0.5rem
\ No newline at end of file
+ gap: 0.5rem
+
+@media (max-width: 1100px)
+ .info-container
+ gap: 0.5rem
diff --git a/gallery/themes/default/components/navigation.sass b/gallery/themes/default/components/navigation.sass
index cc684ad..c8b9482 100644
--- a/gallery/themes/default/components/navigation.sass
+++ b/gallery/themes/default/components/navigation.sass
@@ -14,15 +14,11 @@
top: 0
left: 0
- background-color: $black2
- color: $white
+ background-color: RGB($bg-100)
+ color: RGB($fg-white)
z-index: 69
- // Spacer
- > span
- height: 100%
-
.logo
margin: 0
padding: 0
@@ -35,33 +31,44 @@
flex-direction: row
align-items: center
+.navigation-spacer
+ height: 100%
+
.navigation-item
margin: 0
- padding: 1rem
+ padding: 0
width: 3.5rem
height: 3.5rem
-
- display: flex
- flex-direction: row
- align-items: center
+ min-height: 3.5rem
position: relative
- background-color: $black2
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: center
+
+ background-color: transparent
border: none
text-decoration: none
> svg
margin: 0
- font-size: 1.5rem
- color: $white
- transition: color 0.2s ease-out
+ padding: 0.5rem
+
+ width: 2.5rem
+ height: 2.5rem
+
+ color: RGB($fg-white)
+ border-radius: $rad-inner
+
+ transition: color 0.2s ease-out, transform 0.2s ease-out
span
margin: 0
- padding: 0.5rem 0.75rem
+ padding: 0.35rem 0.7rem
display: block
@@ -70,11 +77,11 @@
left: 3rem
transform: translateY(-50%)
- font-size: 1rem
+ font-size: 0.9rem
font-weight: 600
background-color: #000000
- color: $white
+ color: RGB($fg-white)
opacity: 0
border-radius: $rad-inner
@@ -99,27 +106,26 @@
color: #000000
&:hover
- background-color: $black2
-
> svg
- color: $primary
+ background: RGB($bg-300)
span
opacity: 1
left: 3.9rem
-.navigation-item__selected
- background: $primary
+ &.selected::before
+ content: ''
+ display: block
- > svg
- color: $black
+ position: absolute
+ top: 3px
+ left: 0
- &:hover
- background: $primary
-
- > svg
- color: $white
+ width: 3px
+ height: calc(100% - 6px)
+ background-color: RGB($primary)
+ border-radius: $rad-inner
@media (max-width: $breakpoint)
.navigation
@@ -146,14 +152,15 @@
width: 3rem
height: 3rem
-
- border-radius: $rad-inner
-
- svg
- margin: auto
-
- width: 1.5rem
- height: 1.5rem
+ min-height: 3rem
span
display: none
+
+ &.selected::before
+ top: unset
+ bottom: 0
+ left: 0
+
+ width: 100%
+ height: 3px
diff --git a/gallery/themes/default/style.sass b/gallery/themes/default/style.sass
index e40ad67..d6f9701 100644
--- a/gallery/themes/default/style.sass
+++ b/gallery/themes/default/style.sass
@@ -8,6 +8,7 @@
@import "components/elements/pop-up"
@import "components/elements/upload-panel"
@import "components/elements/tags"
+@import "components/elements/labels"
@import "components/navigation"
@import "components/banner"
@@ -32,7 +33,7 @@ html, body
min-height: 100vh
max-width: 100vw
- background-color: $white
+ background-color: RGB($fg-white)
scroll-behavior: smooth
overflow-x: hidden
@@ -46,8 +47,8 @@ html, body
display: flex
flex-direction: column
- background-color: $white
- color: $black
+ background-color: RGB($bg-bright)
+ color: RGB($bg-100)
.big-text
height: 20rem
@@ -57,7 +58,7 @@ html, body
justify-content: center
align-items: center
- color: $black
+ color: RGB($bg-100)
h1
margin: 0 2rem
@@ -83,7 +84,7 @@ html, body
justify-content: center
align-items: center
- background-color: $black
+ background-color: RGB($bg-bright)
h1
margin: 0 2rem
@@ -102,10 +103,7 @@ html, body
font-weight: 400
text-align: center
- color: $white
-
-#contrast-check
- transition: color 0.15s ease-in-out
+ color: $fg-black
@media (max-width: $breakpoint)
@@ -126,4 +124,4 @@ html, body
p
max-width: 100%
- font-size: 1rem
\ No newline at end of file
+ font-size: 1rem
diff --git a/gallery/themes/default/variables.sass b/gallery/themes/default/variables.sass
index 2682619..d9e9e3f 100644
--- a/gallery/themes/default/variables.sass
+++ b/gallery/themes/default/variables.sass
@@ -1,30 +1,78 @@
-$black: #151515
-$black2: #101010
-$gray: #666
-$white: #E8E3E3
+$bg-transparent: rgba(var(--bg-dim), 0.8)
+$bg-dim: var(--bg-dim)
+$bg-bright: var(--bg-bright)
+$bg-100: var(--bg-100)
+$bg-200: var(--bg-200)
+$bg-300: var(--bg-300)
+$bg-400: var(--bg-400)
+$bg-500: var(--bg-500)
+$bg-600: var(--bg-600)
-$red: #B66467
-$orange: #D98C5F
-$yellow: #D9BC8C
-$green: #8C977D
-$blue: #8DA3B9
-$purple: #A988B0
+$fg-dim: var(--fg-dim)
+$fg-white: var(--fg-white)
+$fg-black: var(--fg-black)
-$primary: $green
-$warning: $orange
-$critical: $red
-$success: $green
-$info: $blue
+$black: var(--black)
+$white: var(--white)
+$red: var(--red)
+$orange: var(--orange)
+$yellow: var(--yellow)
+$green: var(--green)
+$blue: var(--blue)
+$purple: var(--purple)
-$rad: 6px
-$rad-inner: 3px
+$primary: var(--primary)
+$warning: var(--warning)
+$critical: var(--critical)
+$success: var(--success)
+$info: var(--info)
-$animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
-$animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)
+$rad: var(--rad)
+$rad-inner: var(--rad-inner)
-$font: "Manrope", sans-serif
+$animation-smooth: var(--animation-smooth)
+$animation-bounce: var(--animation-bounce)
+
+$font: 'Manrope', sans-serif
$breakpoint: 800px
+
+\:root
+ --bg-dim: 16, 16, 16
+ --bg-bright: 232, 227, 227
+ --bg-100: 21, 21, 21
+ --bg-200: #{red(adjust-color(rgb(21, 21, 21), $lightness: 2%)), green(adjust-color(rgb(21, 21, 21), $lightness: 2%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 2%))}
+ --bg-300: #{red(adjust-color(rgb(21, 21, 21), $lightness: 4%)), green(adjust-color(rgb(21, 21, 21), $lightness: 4%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 4%))}
+ --bg-400: #{red(adjust-color(rgb(21, 21, 21), $lightness: 6%)), green(adjust-color(rgb(21, 21, 21), $lightness: 6%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 6%))}
+ --bg-500: #{red(adjust-color(rgb(21, 21, 21), $lightness: 8%)), green(adjust-color(rgb(21, 21, 21), $lightness: 8%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 8%))}
+ --bg-600: #{red(adjust-color(rgb(21, 21, 21), $lightness: 10%)), green(adjust-color(rgb(21, 21, 21), $lightness: 10%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 10%))}
+
+ --fg-dim: 102, 102, 102
+ --fg-white: 232, 227, 227
+ --fg-black: 16, 16, 16
+
+ --black: 21, 21, 21
+ --white: 232, 227, 227
+ --red: 182, 100, 103
+ --orange: 217, 140, 95
+ --yellow: 217, 188, 140
+ --green: 140, 151, 125
+ --blue: 141, 163, 185
+ --purple: 169, 136, 176
+
+ --primary: 183, 169, 151
+ --warning: var(--orange)
+ --critical: var(--red)
+ --success: var(--green)
+ --info: var(--blue)
+
+ --rad: 6px
+ --rad-inner: calc(var(--rad) / 2)
+
+ --animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
+ --animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)
+
+
@font-face
font-family: 'Work Sans'
src: url('fonts/worksans-regular.woff2')
@@ -43,5 +91,5 @@ $breakpoint: 800px
@font-face
font-family: 'Manrope'
src: url('fonts/Manrope[wght].woff2') format('woff2')
- font-style: normal;
- font-display: swap;
\ No newline at end of file
+ font-style: normal
+ font-display: swap