feat(theme): move dark mode styles to standalones

packages/theme/lib/Abstract.dark.sass

@@ -0,0 +1,2 @@
+.junipero.abstract
+  --text-color: var(--junipero-nevada)

packages/theme/lib/Abstract.sass

@@ -9,7 +9,3 @@
 
   &.invalid
     color: var(--invalid-color)
-
-// Dark mode
-.dark .junipero.abstract
-  --text-color: var(--junipero-nevada)

packages/theme/lib/Alert.dark.sass

@@ -0,0 +1,20 @@
+.junipero.alert
+  --icon-background-color: var(--junipero-dark-velvet-disabled)
+  --icons-color: var(--junipero-seashell)
+  --title-color: var(--junipero-seashell)
+
+  &.primary
+    --icon-background-color: var(--junipero-dark-velvet-foreground)
+    --title-color: var(--junipero-velvet)
+
+  &.success
+    --icon-background-color: var(--junipero-dark-lime-foreground)
+    --title-color: var(--junipero-lime)
+
+  &.warning
+    --icon-background-color: var(--junipero-dark-sunglow-foreground)
+    --title-color: var(--junipero-sunglow)
+
+  &.danger
+    --icon-background-color: var(--junipero-dark-grapefruit-foreground)
+    --title-color: var(--junipero-grapefruit)

packages/theme/lib/Alert.sass

@@ -47,25 +47,3 @@
     --icon-background-color: var(--junipero-grapefruit-disabled)
     --title-color: var(--junipero-grapefruit)
     --icons-color: var(--junipero-grapefruit)
-
-// Dark mode
-.dark .junipero.alert
-  --icon-background-color: var(--junipero-dark-velvet-disabled)
-  --icons-color: var(--junipero-seashell)
-  --title-color: var(--junipero-seashell)
-
-  &.primary
-    --icon-background-color: var(--junipero-dark-velvet-foreground)
-    --title-color: var(--junipero-velvet)
-
-  &.success
-    --icon-background-color: var(--junipero-dark-lime-foreground)
-    --title-color: var(--junipero-lime)
-
-  &.warning
-    --icon-background-color: var(--junipero-dark-sunglow-foreground)
-    --title-color: var(--junipero-sunglow)
-
-  &.danger
-    --icon-background-color: var(--junipero-dark-grapefruit-foreground)
-    --title-color: var(--junipero-grapefruit)

packages/theme/lib/Badge.dark.sass

@@ -0,0 +1,15 @@
+.junipero.badge
+  --background-color: var(--junipero-gondola)
+  --text-color: var(--junipero-seashell)
+
+  &.primary
+    --background-color: var(--junipero-velvet)
+
+  &.danger
+    --background-color: var(--junipero-grapefruit)
+
+  &.warning
+    --background-color: var(--junipero-sunglow)
+
+  &.success
+    --background-color: var(--junipero-lime)

packages/theme/lib/Badge.sass

@@ -30,20 +30,3 @@
   &.success
     --background-color: var(--junipero-lime)
     --text-color: var(--junipero-seashell)
-
-// Dark mode
-.dark .junipero.badge
-  --background-color: var(--junipero-gondola)
-  --text-color: var(--junipero-seashell)
-
-  &.primary
-    --background-color: var(--junipero-velvet)
-
-  &.danger
-    --background-color: var(--junipero-grapefruit)
-
-  &.warning
-    --background-color: var(--junipero-sunglow)
-
-  &.success
-    --background-color: var(--junipero-lime)

packages/theme/lib/BreadCrumb.dark.sass

@@ -0,0 +1,2 @@
+.junipero.breadcrumb
+  --separator-color: var(--junipero-nevada)

packages/theme/lib/BreadCrumb.sass

@@ -29,7 +29,3 @@
   a.item
     cursor: pointer
     text-decoration: none
-
-// Dark mode
-.dark .junipero.breadcrumb
-  --separator-color: var(--junipero-nevada)

packages/theme/lib/Button.dark.sass

@@ -0,0 +1,36 @@
+.junipero.button
+  --main-color: var(--junipero-gondola)
+  --hover-color: var(--junipero-dark-velvet-foreground)
+  --active-color: var(--junipero-dark-velvet-disabled)
+  --text-color: var(--junipero-seashell)
+
+  &.subtle
+    --main-color: transparent
+
+  &.primary
+    --main-color: var(--junipero-velvet)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-velvet-foreground)
+    --hover-color: var(--junipero-velvet-hover)
+    --active-color: var(--junipero-velvet-active)
+
+  &.warning
+    --main-color: var(--junipero-sunglow)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-sunglow-foreground)
+    --hover-color: var(--junipero-sunglow-hover)
+    --active-color: var(--junipero-sunglow-active)
+
+  &.danger
+    --main-color: var(--junipero-grapefruit)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-grapefruit-foreground)
+    --hover-color: var(--junipero-grapefruit-hover)
+    --active-color: var(--junipero-grapefruit-active)
+
+  &.success
+    --main-color: var(--junipero-lime)
+    --text-color: var(--junipero-seashell)
+    --border-color: var(--junipero-dark-lime-foreground)
+    --hover-color: var(--junipero-lime-hover)
+    --active-color: var(--junipero-lime-active)

packages/theme/lib/Button.sass

@@ -70,41 +70,3 @@
     .junipero.spinner
       --foreground-color: var(--main-color)
       --background-color: var(--text-color)
-
-// Dark mode
-.dark .junipero.button
-  --main-color: var(--junipero-gondola)
-  --hover-color: var(--junipero-dark-velvet-foreground)
-  --active-color: var(--junipero-dark-velvet-disabled)
-  --text-color: var(--junipero-seashell)
-
-  &.subtle
-    --main-color: transparent
-
-  &.primary
-    --main-color: var(--junipero-velvet)
-    --text-color: var(--junipero-seashell)
-    --border-color: var(--junipero-dark-velvet-foreground)
-    --hover-color: var(--junipero-velvet-hover)
-    --active-color: var(--junipero-velvet-active)
-
-  &.warning
-    --main-color: var(--junipero-sunglow)
-    --text-color: var(--junipero-seashell)
-    --border-color: var(--junipero-dark-sunglow-foreground)
-    --hover-color: var(--junipero-sunglow-hover)
-    --active-color: var(--junipero-sunglow-active)
-
-  &.danger
-    --main-color: var(--junipero-grapefruit)
-    --text-color: var(--junipero-seashell)
-    --border-color: var(--junipero-dark-grapefruit-foreground)
-    --hover-color: var(--junipero-grapefruit-hover)
-    --active-color: var(--junipero-grapefruit-active)
-
-  &.success
-    --main-color: var(--junipero-lime)
-    --text-color: var(--junipero-seashell)
-    --border-color: var(--junipero-dark-lime-foreground)
-    --hover-color: var(--junipero-lime-hover)
-    --active-color: var(--junipero-lime-active)

packages/theme/lib/Calendar.dark.sass

@@ -0,0 +1,8 @@
+.junipero.calendar
+  --main-color: var(--junipero-velvet)
+  --icons-color: var(--junipero-seashell)
+  --text-color: var(--junipero-seashell)
+  --inactive-text-color: var(--junipero-concrete)
+  --selected-text-color: var(--junipero-seashell)
+  --hover-color: var(--junipero-dark-velvet-foreground)
+  --secondary-text-color: var(--junipero-velvet)

packages/theme/lib/Calendar.sass

@@ -69,13 +69,3 @@
 
     &.active
       background: var(--main-color)
-
-// Dark mode
-.dark .junipero.calendar
-  --main-color: var(--junipero-velvet)
-  --icons-color: var(--junipero-seashell)
-  --text-color: var(--junipero-seashell)
-  --inactive-text-color: var(--junipero-concrete)
-  --selected-text-color: var(--junipero-seashell)
-  --hover-color: var(--junipero-dark-velvet-foreground)
-  --secondary-text-color: var(--junipero-velvet)

packages/theme/lib/Card.dark.sass

@@ -0,0 +1,3 @@
+.junipero.card
+  --background-color: var(--junipero-gondola)
+  --shadow-color: transparent

packages/theme/lib/Card.sass

@@ -15,8 +15,3 @@
 
     .junipero.list
       width: 100%
-
-// Dark mode
-.dark .junipero.card
-  --background-color: var(--junipero-gondola)
-  --shadow-color: transparent

packages/theme/lib/CheckboxField.dark.sass

@@ -0,0 +1,8 @@
+.junipero.checkbox-field
+  --icons-color: var(--junipero-seashell)
+  --main-color: var(--junipero-velvet)
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --background-color: var(--junipero-gondola)
+  --hover-color: var(--junipero-dark-velvet-background)
+  --active-color: var(--junipero-dark-velvet-disabled)
+  --invalid-color: var(--junipero-grapefruit)

packages/theme/lib/CheckboxField.sass

@@ -58,13 +58,3 @@
   .content
     flex: 1 0 auto
     max-width: 100%
-
-// Dark mode
-.dark .junipero.checkbox-field
-  --icons-color: var(--junipero-seashell)
-  --main-color: var(--junipero-velvet)
-  --border-color: var(--junipero-dark-velvet-foreground)
-  --background-color: var(--junipero-gondola)
-  --hover-color: var(--junipero-dark-velvet-background)
-  --active-color: var(--junipero-dark-velvet-disabled)
-  --invalid-color: var(--junipero-grapefruit)

packages/theme/lib/CodeField.dark.sass

@@ -0,0 +1,3 @@
+.junipero.code-field
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --background-color: var(--junipero-onyx)

packages/theme/lib/CodeField.sass

@@ -33,8 +33,3 @@
       &:not(:focus),
       &:not(:focus-within)
         --border-color: var(--invalid-color)
-
-// Dark mode
-.dark .junipero.code-field
-  --border-color: var(--junipero-dark-velvet-foreground)
-  --background-color: var(--junipero-onyx)

packages/theme/lib/ColorField.dark.sass

@@ -0,0 +1,2 @@
+.junipero.color-field
+  --pigment-border-color: var(--junipero-dark-velvet-foreground)

packages/theme/lib/ColorField.sass

@@ -113,7 +113,3 @@
           position: relative
           left: -4px
           box-shadow: 0 2px 7px 1px rgb(0 0 0 / 15%)
-
-// Dark mode
-.dark .junipero.color-field
-  --pigment-border-color: var(--junipero-dark-velvet-foreground)

packages/theme/lib/DateField.dark.sass

@@ -0,0 +1,9 @@
+.junipero.date-field,
+.junipero.calendar-menu
+  --main-color: var(--junipero-velvet)
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --icons-color: var(--junipero-dark-velvet-foreground)
+  --placeholder-color: var(--junipero-nevada)
+  --text-color: var(--junipero-seashell)
+  --time-background-color: var(--junipero-dark-velvet-background)
+  --time-placeholder-color: var(--junipero-concrete)

packages/theme/lib/DateField.sass

@@ -113,15 +113,3 @@
         color: var(--time-placeholder-color)
         opacity: 1
         user-select: none
-
-// Dark mode
-.dark
-  .junipero.date-field,
-  .junipero.calendar-menu
-    --main-color: var(--junipero-velvet)
-    --border-color: var(--junipero-dark-velvet-foreground)
-    --icons-color: var(--junipero-dark-velvet-foreground)
-    --placeholder-color: var(--junipero-nevada)
-    --text-color: var(--junipero-seashell)
-    --time-background-color: var(--junipero-dark-velvet-background)
-    --time-placeholder-color: var(--junipero-concrete)

packages/theme/lib/Dropdown.dark.sass

@@ -0,0 +1,8 @@
+.junipero.dropdown .menu-inner,
+.junipero.dropdown-menu .menu-inner
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --background-color: var(--junipero-gondola)
+  --secondary-color: var(--junipero-velvet)
+  --item-background: var(--junipero-dark-velvet-background)
+  --main-color: var(--junipero-seashell)
+  --shadow-color: transparent

packages/theme/lib/Dropdown.sass

@@ -46,14 +46,3 @@
       & > .dropdown-link
         background: var(--item-background)
         color: var(--main-color)
-
-// Dark mode
-.dark
-  .junipero.dropdown .menu-inner,
-  .junipero.dropdown-menu .menu-inner
-    --border-color: var(--junipero-dark-velvet-foreground)
-    --background-color: var(--junipero-gondola)
-    --secondary-color: var(--junipero-velvet)
-    --item-background: var(--junipero-dark-velvet-background)
-    --main-color: var(--junipero-seashell)
-    --shadow-color: transparent

packages/theme/lib/FieldAddon.dark.sass

@@ -0,0 +1,4 @@
+.junipero.field-addon
+  --background-color: var(--junipero-dark-velvet-foreground)
+  --text-color: var(--junipero-seashell)
+  --focus-text-color: var(--junipero-seashell)

packages/theme/lib/FieldAddon.sass

@@ -19,9 +19,3 @@
     background: var(--main-color)
     color: var(--focus-text-color)
     box-shadow: 0 0 0 2px var(--main-color)
-
-// Dark mode
-.dark .junipero.field-addon
-  --background-color: var(--junipero-dark-velvet-foreground)
-  --text-color: var(--junipero-seashell)
-  --focus-text-color: var(--junipero-seashell)

packages/theme/lib/Label.dark.sass

@@ -0,0 +1,2 @@
+.junipero.label
+  --text-color: var(--junipero-nevada)

packages/theme/lib/Label.sass

@@ -9,7 +9,3 @@
 
   &.invalid
     --text-color: var(--invalid-color)
-
-// Dark mode
-.dark .junipero.label
-  --text-color: var(--junipero-nevada)

packages/theme/lib/List.dark.sass

@@ -0,0 +1,4 @@
+.junipero.list
+  --column-color: var(--junipero-velvet)
+  --icons-color: var(--junipero-velvet)
+  --border-color: var(--junipero-dark-velvet-background)

packages/theme/lib/List.sass

@@ -24,9 +24,3 @@
       display: flex
       align-items: center
       gap: 4px
-
-// Dark mode
-.dark .junipero.list
-  --column-color: var(--junipero-velvet)
-  --icons-color: var(--junipero-velvet)
-  --border-color: var(--junipero-dark-velvet-background)

packages/theme/lib/Modal.dark.sass

@@ -0,0 +1,8 @@
+.junipero.modal
+  --background-color: var(--junipero-dark-backdrop)
+  --transition-background-exit: var(--junipero-dark-backdrop-invisible)
+  --transition-background-enter: var(--junipero-dark-backdrop)
+  --shadow-color: transparent
+  --foreground-color: var(--junipero-gondola)
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --icons-color: var(--junipero-seashell)

packages/theme/lib/Modal.sass

@@ -60,13 +60,3 @@
         overflow: auto
         margin: 0
         border-radius: 0
-
-// Dark mode
-.dark .junipero.modal
-  --background-color: var(--junipero-dark-backdrop)
-  --transition-background-exit: var(--junipero-dark-backdrop-invisible)
-  --transition-background-enter: var(--junipero-dark-backdrop)
-  --shadow-color: transparent
-  --foreground-color: var(--junipero-gondola)
-  --border-color: var(--junipero-dark-velvet-foreground)
-  --icons-color: var(--junipero-seashell)

packages/theme/lib/RadioField.dark.sass

@@ -0,0 +1,7 @@
+.junipero.radio-field
+  --main-color: var(--junipero-velvet)
+  --border-color: var(--junipero-dark-velvet-foreground)
+  --background-color: var(--junipero-gondola)
+  --hover-color: var(--junipero-dark-velvet-background)
+  --active-color: var(--junipero-dark-velvet-disabled)
+  --boxed-border-color: var(--junipero-dark-velvet-background)