activeadmin_dark_color_scheme 0.1.1 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +2 -2
  3. data/README.md +59 -18
  4. data/activeadmin_dark_color_scheme.gemspec +6 -6
  5. data/app/assets/stylesheets/_activeadmin-dark-color-scheme.sass +15 -2
  6. data/app/assets/stylesheets/activeadmin-dark-color-scheme/mixins/_buttons.sass +29 -3
  7. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_buttons.sass +8 -2
  8. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_fieldsets.sass +10 -0
  9. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_flash.sass +17 -9
  10. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_inputs.sass +28 -0
  11. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_labels.sass +4 -0
  12. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_navbar.sass +18 -0
  13. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_select2.sass +23 -10
  14. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_tabs.sass +17 -0
  15. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_toggle-bool-switch.sass +5 -0
  16. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_alerts.sass +14 -0
  17. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_base.sass +9 -0
  18. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_buttons.sass +24 -0
  19. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_inputs.sass +13 -0
  20. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_labels.sass +2 -0
  21. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_panels.sass +5 -0
  22. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_select2.sass +3 -0
  23. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_tables.sass +10 -0
  24. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_toggle-bool.sass +4 -0
  25. data/lib/activeadmin/dark_color_scheme/engine.rb +1 -4
  26. data/lib/activeadmin/dark_color_scheme/version.rb +1 -1
  27. data/lib/activeadmin/dark_color_scheme.rb +2 -0
  28. data/lib/activeadmin_dark_color_scheme.rb +3 -0
  29. metadata +30 -16
  30. data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_forms.sass +0 -33
  31. data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass +0 -44
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ea0de864c7f4557cab10faa272fe4e336a6dccb2446151652e901bc838a3b6e2
4
- data.tar.gz: 31a463c46d2657364f0974219ea5d7eeec15e6e63e07995dc305bec0a14c41f1
3
+ metadata.gz: 5d4e2a2195914f93cfcf840b5c5e3dea3669ec4755a25e95336ac3cbd047cd51
4
+ data.tar.gz: c134d052ed3c6b31601ec95df0d32b14a55c3e8e63d9016d26744d11cc196266
5
5
  SHA512:
6
- metadata.gz: 0c45498bd0fa4b273dddde9b07b48447a8b5c7188f0ccc894dbd9bab674a45730e575af2b870c854cbec1aa2064e1a1091a455cfe982a09fbdb5c23bbd49a5a1
7
- data.tar.gz: 65e9e9166258a7b5ed262accd03242b6bf7162a9d0af0f8729c4c691eafe0558ce5083eaef883a06d6c1e24befef901610e3ccfcfd54cb805758b72485190b71
6
+ metadata.gz: 84e1f184ab395df64e8c85c076f0fc3f7601df6b88260e247d36ad385d421fa23fe395a5f57d0287411a40156bdf8e0ee532f5f309ca6effdf694fe1a7865cac
7
+ data.tar.gz: 738167ba7d126afc6a3bf5ea92efbad34433a8629aa2a9a5e3d9ae82545e5083aba1c982c71c889945f6b6c278cc5575296fd5ee6de88056acce297ffd5416b6
data/Gemfile.lock CHANGED
@@ -1,8 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- activeadmin_dark_color_scheme (0.1.1)
5
- autoprefixer-rails (~> 10, >= 10.4.7)
4
+ activeadmin_dark_color_scheme (0.1.6)
6
5
  sassc-rails (~> 2, >= 2.0.0)
7
6
 
8
7
  GEM
@@ -112,6 +111,7 @@ PLATFORMS
112
111
 
113
112
  DEPENDENCIES
114
113
  activeadmin_dark_color_scheme!
114
+ autoprefixer-rails (~> 10, >= 10.4.7)
115
115
  pry
116
116
  rake
117
117
  rspec
data/README.md CHANGED
@@ -1,39 +1,80 @@
1
- # Activeadmin::DarkColorScheme
1
+ # Dark color scheme for Activeadmin
2
2
 
3
- Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/activeadmin/dark_color_scheme`. To experiment with that code, run `bin/console` for an interactive prompt.
4
-
5
- TODO: Delete this and the text above, and describe your gem
3
+ [![Gem Version](https://badge.fury.io/rb/activeadmin_dark_color_scheme.svg)](https://badge.fury.io/rb/activeadmin_dark_color_scheme)
6
4
 
7
5
  ## Installation
8
6
 
9
7
  Add this line to your application's Gemfile:
10
8
 
11
9
  ```ruby
12
- gem 'activeadmin_dark_color_scheme'
10
+ gem "activeadmin_dark_color_scheme"
11
+ ```
12
+
13
+ Import our Sass file “activeadmin-dark-color-scheme” in your CSS entrypoint that compiles ActiveAdmin CSS files:
14
+
15
+ ```sass
16
+ // app/assets/stylesheets/active_admin.sass
17
+
18
+ // Your regular ActiveAdmin files
19
+ @import "active_admin/mixins"
20
+ @import "active_admin/base"
21
+
22
+ // Dark scheme
23
+ @import "activeadmin-dark-color-scheme"
24
+ ```
25
+
26
+ ## Customization
27
+
28
+ All [Sass variables we use](https://github.com/sergeypedan/activeadmin-dark-color-scheme/blob/master/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass) have `!default`:
29
+
30
+ ```sass
31
+ $link-color-1: hsl(210, 70%, 73%) !default
13
32
  ```
14
33
 
15
- And then execute:
34
+ which means you can override them just by declaring your own Sass variable somewhere before.
16
35
 
17
- $ bundle
36
+ You could technically do it right in your entrypoint:
18
37
 
19
- Or install it yourself as:
38
+ ```sass
39
+ // app/assets/stylesheets/active_admin.sass
20
40
 
21
- $ gem install activeadmin_dark_color_scheme
41
+ // Your regular ActiveAdmin files
42
+ @import "active_admin/mixins"
43
+ @import "active_admin/base"
22
44
 
23
- ## Usage
45
+ // Dark scheme
46
+ $link-color-1: crimson
47
+ @import "activeadmin-dark-color-scheme"
48
+ ```
24
49
 
25
- TODO: Write usage instructions here
50
+ Or you could put your variables in a separate file and `@import` it.
26
51
 
27
- ## Development
52
+ ## How it works
28
53
 
29
- After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
54
+ You import additional CSS, all of which is scoped under `@media (prefers-color-scheme: dark)` media declaration that matches your system (or browser) color scheme setting.
30
55
 
31
- To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
56
+ Here is an example from [_table-index.sass](https://github.com/sergeypedan/activeadmin-dark-color-scheme/blob/master/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-index.sass):
57
+
58
+ ```sass
59
+ @media (prefers-color-scheme: dark)
60
+
61
+ table.index_table
62
+ th
63
+ background-color: $panel-bg-color-solid
64
+ background-image: $panel-head-gradient
65
+ border-top-color: $th-border-color-top
66
+ border-right-color: $th-border-color-right !important
67
+ border-bottom-color: $th-border-color-bottom
68
+ border-left-color: $th-border-color-left
69
+ box-shadow: none
70
+ color: hsl(0, 0%, 95%)
71
+ text-shadow: none
72
+ ```
32
73
 
33
- ## Contributing
74
+ ## ActiveAdmin version compatibility
34
75
 
35
- Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/activeadmin_dark_color_scheme.
76
+ The current version of ActiveAdmin is 2.13.1. Our styles are and will be targeted on the latest version.
36
77
 
37
- ## License
78
+ ## How to disable
38
79
 
39
- The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
80
+ Switch to light color scheme in you system preferences or your browser developer tools.
data/activeadmin_dark_color_scheme.gemspec CHANGED
@@ -24,7 +24,7 @@ Gem::Specification.new do |spec|
24
24
  "homepage_uri" => spec.homepage,
25
25
  "source_code_uri" => spec.homepage }
26
26
 
27
- spec.require_paths = ["app", "lib/activeadmin"]
27
+ spec.require_paths = ["app", "lib"]
28
28
 
29
29
  spec.bindir = "exe"
30
30
  spec.executables = []
@@ -37,10 +37,10 @@ Gem::Specification.new do |spec|
37
37
  spec.required_ruby_version = Gem::Requirement.new(">= 2.3.3")
38
38
  # SassC requires Ruby 2.3.3+
39
39
 
40
- spec.add_runtime_dependency "autoprefixer-rails", "~> 10", ">= 10.4.7"
41
- spec.add_runtime_dependency "sassc-rails", "~> 2", ">= 2.0.0"
40
+ spec.add_runtime_dependency "sassc-rails", "~> 2", ">= 2.0.0"
42
41
 
43
- spec.add_development_dependency "rspec", "~> 3"
44
- spec.add_development_dependency "term-ansicolor", "~> 1"
45
- spec.add_development_dependency "yard", "~> 0", ">= 0.9.20"
42
+ spec.add_development_dependency "autoprefixer-rails", "~> 10", ">= 10.4.7"
43
+ spec.add_development_dependency "rspec", "~> 3"
44
+ spec.add_development_dependency "term-ansicolor", "~> 1"
45
+ spec.add_development_dependency "yard", "~> 0", ">= 0.9.20"
46
46
  end
data/app/assets/stylesheets/_activeadmin-dark-color-scheme.sass CHANGED
@@ -1,5 +1,13 @@
1
1
  // Variables
2
- @import "./activeadmin-dark-color-scheme/variables/all"
2
+ @import "./activeadmin-dark-color-scheme/variables/base"
3
+ @import "./activeadmin-dark-color-scheme/variables/alerts"
4
+ @import "./activeadmin-dark-color-scheme/variables/buttons"
5
+ @import "./activeadmin-dark-color-scheme/variables/inputs"
6
+ @import "./activeadmin-dark-color-scheme/variables/labels"
7
+ @import "./activeadmin-dark-color-scheme/variables/panels"
8
+ @import "./activeadmin-dark-color-scheme/variables/select2"
9
+ @import "./activeadmin-dark-color-scheme/variables/tables"
10
+ @import "./activeadmin-dark-color-scheme/variables/toggle-bool"
3
11
 
4
12
  // Mixins
5
13
  @import "./activeadmin-dark-color-scheme/mixins/buttons"
@@ -7,15 +15,20 @@
7
15
 
8
16
  // Modules
9
17
  @import "./activeadmin-dark-color-scheme/modules/buttons"
18
+ @import "./activeadmin-dark-color-scheme/modules/fieldsets"
10
19
  @import "./activeadmin-dark-color-scheme/modules/flash"
11
- @import "./activeadmin-dark-color-scheme/modules/forms"
20
+ @import "./activeadmin-dark-color-scheme/modules/inputs"
21
+ @import "./activeadmin-dark-color-scheme/modules/labels"
12
22
  @import "./activeadmin-dark-color-scheme/modules/login"
13
23
  @import "./activeadmin-dark-color-scheme/modules/misc"
24
+ @import "./activeadmin-dark-color-scheme/modules/navbar"
14
25
  @import "./activeadmin-dark-color-scheme/modules/pagination"
15
26
  @import "./activeadmin-dark-color-scheme/modules/panels"
16
27
  @import "./activeadmin-dark-color-scheme/modules/select2"
17
28
  @import "./activeadmin-dark-color-scheme/modules/sidebar"
18
29
  @import "./activeadmin-dark-color-scheme/modules/table-attributes"
19
30
  @import "./activeadmin-dark-color-scheme/modules/table-index"
31
+ @import "./activeadmin-dark-color-scheme/modules/tabs"
20
32
  @import "./activeadmin-dark-color-scheme/modules/title-bar"
33
+ @import "./activeadmin-dark-color-scheme/modules/toggle-bool-switch"
21
34
  @import "./activeadmin-dark-color-scheme/modules/top-level"
data/app/assets/stylesheets/activeadmin-dark-color-scheme/mixins/_buttons.sass CHANGED
@@ -1,16 +1,36 @@
1
1
  @mixin btn-dark-1
2
2
  background-color: $btn-dark-1-bg
3
3
  background-image: linear-gradient(to bottom, $btn-dark-1-gradient-stop-top, $btn-dark-1-gradient-stop-bottom)
4
- border-top-color: lighten($btn-dark-1-gradient-stop-top, 10%)
4
+ border-top-color: lighten($btn-dark-1-gradient-stop-top, 5%)
5
5
  border-right-color: lighten($btn-dark-1-bg, 10%)
6
- border-bottom-color: darken($btn-dark-1-gradient-stop-bottom, 10%)
6
+ border-bottom-color: darken($btn-dark-1-gradient-stop-bottom, 5%)
7
7
  border-left-color: lighten($btn-dark-1-bg, 10%)
8
8
  box-shadow: 0 1px 2px darken($btn-dark-1-gradient-stop-bottom, 10%)
9
9
  color: $btn-dark-1-color
10
10
  text-shadow: none
11
11
 
12
12
  &:not(.disabled):hover
13
- background-image: linear-gradient(to bottom, lighten($btn-dark-1-gradient-stop-top, 3%), lighten($btn-dark-1-gradient-stop-bottom, 3%))
13
+ background-image: linear-gradient(to bottom, lighten($btn-dark-1-gradient-stop-top, 2%), lighten($btn-dark-1-gradient-stop-bottom, 2%))
14
+
15
+ &:focus, &:focus-visible
16
+ outline-color: $btn-focus-outline-color
17
+ outline-offset: $btn-focus-outline-auto-offset
18
+ outline-style: $btn-focus-outline-auto-style
19
+ outline-width: $btn-focus-outline-width
20
+
21
+ @mixin btn-dark-1-inset
22
+ background-color: $btn-dark-1-inset-bg
23
+ background-image: linear-gradient($btn-dark-1-inset-gradient-stop-top, $btn-dark-1-inset-gradient-stop-bottom)
24
+ border-top-color: $btn-datk-1-inset-border-top-color
25
+ border-right-color: lighten($btn-dark-1-bg, 10%)
26
+ border-bottom-color: darken($btn-dark-1-gradient-stop-bottom, 10%)
27
+ border-left-color: $btn-dark-1-inset-color
28
+ box-shadow: 0 1px 3px 0 hsla(0, 0%, 0%, 0.3) inset
29
+ color: $btn-dark-1-color
30
+ text-shadow: none
31
+
32
+ &:not(.disabled):hover
33
+ background-image: linear-gradient(to bottom, lighten($btn-dark-1-inset-gradient-stop-top, 2%), lighten($btn-dark-1-inset-gradient-stop-bottom, 2%))
14
34
 
15
35
  @mixin btn-light-1
16
36
  background-color: $btn-light-1-bg
@@ -20,3 +40,9 @@
20
40
 
21
41
  &:not(.disabled):hover
22
42
  background-image: linear-gradient(to bottom, darken($btn-light-1-gradient-stop-top, 3%), darken($btn-light-1-gradient-stop-bottom, 3%))
43
+
44
+ &:focus, &:focus-visible
45
+ outline-color: $btn-focus-outline-color
46
+ outline-offset: $btn-focus-outline-auto-offset
47
+ outline-style: $btn-focus-outline-auto-style
48
+ outline-width: $btn-focus-outline-width
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_buttons.sass CHANGED
@@ -2,14 +2,15 @@
2
2
 
3
3
  a.table_tools_button,
4
4
  .table_tools .dropdown_menu_button
5
- color: #d7d7d7
6
5
  @include gradient-bar-1
6
+ color: #d7d7d7
7
7
 
8
8
  &:not(.disabled):hover
9
9
  @include gradient-bar-1
10
10
 
11
11
  a.batch_action
12
- color: darkgray
12
+ &, &:link
13
+ color: white
13
14
 
14
15
  .dropdown_menu
15
16
  .dropdown_menu_list_wrapper
@@ -22,6 +23,11 @@
22
23
  background-image: linear-gradient($color, $color)
23
24
 
24
25
  form
26
+ input[type=submit],
27
+ input[type=button],
28
+ button
29
+ @include btn-light-1
30
+
25
31
  fieldset
26
32
  &.actions, &.buttons
27
33
  li.cancel
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_fieldsets.sass ADDED
@@ -0,0 +1,10 @@
1
+ @media (prefers-color-scheme: dark)
2
+ form
3
+ fieldset
4
+ &.inputs
5
+ background-color: $panel-bg-color-transparent
6
+ box-shadow: $panel-shadow
7
+
8
+ legend
9
+ span
10
+ @include gradient-bar-1
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_flash.sass CHANGED
@@ -1,16 +1,24 @@
1
1
  @media (prefers-color-scheme: dark)
2
+ body.logged_out
3
+ .flash
4
+ -webkit-font-smoothing: antialiased
5
+ text-shadow: none
2
6
 
3
7
  body.logged_in
4
8
  .flash
5
- background-color: #c2b36c
6
- background-image: linear-gradient(#a99847, #a38e35)
7
- border-bottom-color: #958118 !important
8
- color: white
9
+ background-color: $alert-default-bg-color
10
+ background-image: linear-gradient($alert-default-gradient-stop-top, $alert-default-gradient-stop-bottom)
11
+ border-bottom-color: $alert-default-border-bottom-color !important
12
+ color: $alert-default-text-color
9
13
  text-shadow: none
10
14
 
11
15
  &.flash_notice
12
- background-color: #4d8750
13
- background-image: linear-gradient(#4e9a53, #4d8750)
14
- border-bottom-color: #2e7732 !important
15
- border-bottom: 1px solid #adcbaf
16
- color: #daeec8
16
+ background-color: $alert-success-bg-color
17
+ background-image: linear-gradient($alert-success-gradient-stop-top, $alert-success-gradient-stop-bottom)
18
+ border-bottom-color: $alert-success-border-bottom-color !important
19
+ color: $alert-success-text-color
20
+
21
+ .active_admin.logged_out
22
+ .flash
23
+ &.flash_alert
24
+ color: $alert-danger-text-color
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_inputs.sass ADDED
@@ -0,0 +1,28 @@
1
+ @media (prefers-color-scheme: dark)
2
+ form
3
+ input[type=text],
4
+ input[type=password],
5
+ input[type=email],
6
+ input[type=number],
7
+ input[type=url],
8
+ input[type=tel],
9
+ input[type=date],
10
+ input[type=time],
11
+ textarea
12
+ border-color: $input-border-colors
13
+ box-shadow: $input-box-shadow
14
+
15
+ // &:focus, &:focus-visible
16
+ // outline-color: $input-focus-outline-color
17
+ // outline-offset: $input-focus-outline-auto-offset
18
+ // outline-style: $input-focus-outline-auto-style
19
+ // outline-width: $input-focus-outline-width
20
+
21
+ input, textarea
22
+ background-color: $input-bg-color
23
+
24
+ // &:focus, &:focus-visible
25
+ // outline-color: $input-focus-outline-color
26
+ // outline-offset: $input-focus-outline-auto-offset
27
+ // outline-style: $input-focus-outline-auto-style
28
+ // outline-width: $input-focus-outline-width
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_labels.sass ADDED
@@ -0,0 +1,4 @@
1
+ @media (prefers-color-scheme: dark)
2
+ form
3
+ ol > li label
4
+ color: $label-color !important
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_navbar.sass ADDED
@@ -0,0 +1,18 @@
1
+ @media (prefers-color-scheme: dark)
2
+ #header
3
+ h1
4
+ a
5
+ &:focus, &:focus-visible
6
+ outline-offset: $btn-focus-outline-solid-offset
7
+ outline-color: $btn-focus-outline-color
8
+ outline-style: $btn-focus-outline-solid-style
9
+ outline-width: $btn-focus-outline-auto-offset
10
+
11
+ ul.tabs
12
+ > li
13
+ a
14
+ &:focus, &:focus-visible
15
+ outline-offset: $btn-focus-outline-solid-offset
16
+ outline-color: $btn-focus-outline-color
17
+ outline-style: $btn-focus-outline-solid-style
18
+ outline-width: $btn-focus-outline-auto-offset
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_select2.sass CHANGED
@@ -3,22 +3,35 @@
3
3
  background-color: $select2-bg-color
4
4
  border-color: $panel-bg-color-solid
5
5
 
6
-
7
6
  .select2-container--default
8
- .select2-selection--single
9
- background-color: $input-bg-color
10
- border-color: $input-border-colors
7
+ &.select2-container--focus
8
+ .select2-selection--multiple
9
+ border-color: $input-border-colors
10
+
11
+ .select2-selection
12
+ &--single, &--multiple
13
+ background-color: $input-bg-color
14
+ border-color: $input-border-colors
15
+ box-shadow: $input-box-shadow
16
+
17
+ &--single
18
+ .select2-selection__rendered
19
+ color: $input-text-color
11
20
 
12
- .select2-selection__rendered
13
- color: $input-text-color
21
+ &--multiple
22
+ .select2-selection__choice
23
+ background-color: $select2-bg-color
24
+ border-color: $select2-bg-color
14
25
 
15
26
  .select2-search--dropdown
16
27
  .select2-search__field
17
28
  background-color: $select2-input-bg-color
18
29
  border-color: $input-border-colors
19
30
 
20
- .select2-results__option--highlighted[aria-selected]
21
- background-color: lighten($select2-bg-color, 5%)
31
+ .select2-results
32
+ &__option
33
+ &[aria-selected=true]
34
+ background-color: $select2-bg-color
22
35
 
23
- .select2-results__option[aria-selected=true]
24
- background-color: $select2-bg-color
36
+ &--highlighted[aria-selected]
37
+ background-color: lighten($select2-bg-color, 5%)
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_tabs.sass ADDED
@@ -0,0 +1,17 @@
1
+ @media (prefers-color-scheme: dark)
2
+ .tab-content
3
+ border-color: $tab-border-color
4
+
5
+ .ui-tabs-nav
6
+ li
7
+ a
8
+ @include btn-dark-1
9
+
10
+ &:focus, &:focus-visible
11
+ outline-offset: -1px
12
+
13
+ &.ui-tabs-active a
14
+ @include btn-dark-1-inset
15
+
16
+ // &:focus, &:focus-visible
17
+ // outline-offset: -1px
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_toggle-bool-switch.sass ADDED
@@ -0,0 +1,5 @@
1
+ @media (prefers-color-scheme: dark)
2
+ .toggle-bool-switches-container
3
+ .toggle-bool-switch.on
4
+ background-image: linear-gradient($toggle-bool-gradient-stop-top, $toggle-bool-gradient-stop-bottom)
5
+ box-shadow: $toggle-bool-box-shadow
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_alerts.sass ADDED
@@ -0,0 +1,14 @@
1
+ // Alerts
2
+ $alert-danger-text-color: hsl(349, 57%, 53%) !default
3
+
4
+ $alert-success-bg-color: hsl(131, 39%, 33%) !default
5
+ $alert-success-gradient-stop-top: hsl(131, 39%, 33%) !default
6
+ $alert-success-gradient-stop-bottom: hsl(123, 41%, 25%) !default
7
+ $alert-success-text-color: #daeec8 !default
8
+ $alert-success-border-bottom-color: hsl(123, 45%, 26%) !default
9
+
10
+ $alert-default-bg-color: #c2b36c !default
11
+ $alert-default-gradient-stop-top: #a38e35 !default
12
+ $alert-default-gradient-stop-bottom: #a99847 !default
13
+ $alert-default-text-color: white !default
14
+ $alert-default-border-bottom-color: #958118 !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_base.sass ADDED
@@ -0,0 +1,9 @@
1
+ // $body-bg-color: hsl(200, 4%, 20%) !default
2
+ $body-bg-color: hsl(200, 8%, 15%) !default
3
+ $body-text-color: hsla(0, 0%, 100%, 0.8) !default
4
+
5
+ // Links
6
+ $link-color-1: hsl(210, 70%, 73%) !default
7
+
8
+ // Tab
9
+ $tab-border-color: hsla(0, 0%, 100%, .1) !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_buttons.sass ADDED
@@ -0,0 +1,24 @@
1
+ // Buttons
2
+
3
+ $btn-focus-outline-color: -webkit-focus-ring-color
4
+ $btn-focus-outline-width: 2px
5
+ $btn-focus-outline-auto-offset: 2px
6
+ $btn-focus-outline-auto-style: auto
7
+ $btn-focus-outline-solid-offset: 0
8
+ $btn-focus-outline-solid-style: solid
9
+
10
+ $btn-dark-1-bg: hsl(0, 0%, 17%) !default
11
+ $btn-dark-1-gradient-stop-top: hsl(0, 0%, 33%) !default
12
+ $btn-dark-1-gradient-stop-bottom: hsl(0, 0%, 29%) !default
13
+ $btn-dark-1-color: white !default
14
+
15
+ $btn-dark-1-inset-bg: #3b3b3b
16
+ $btn-datk-1-inset-border-top-color: hsla(0, 0%, 0%, .01)
17
+ $btn-dark-1-inset-gradient-stop-top: #3b3b3b !default
18
+ $btn-dark-1-inset-gradient-stop-bottom: #414141 !default
19
+ $btn-dark-1-inset-color: lighten($btn-dark-1-bg, 10%)
20
+
21
+ $btn-light-1-bg: hsl(208, 15%, 87%) !default
22
+ $btn-light-1-gradient-stop-top: hsl(208, 15%, 87%) !default
23
+ $btn-light-1-gradient-stop-bottom: hsl(210, 2%, 68%) !default
24
+ $btn-light-1-color: hsl(0, 0%, 7%) !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_inputs.sass ADDED
@@ -0,0 +1,13 @@
1
+ // Inputs
2
+ $input-bg-color: hsla(0, 0%, 0%, .2) !default
3
+ $input-box-shadow: inset 0 1px 5px hsla(0, 0%, 0%, .2)
4
+ $input-border-color: hsla(0, 0%, 50%, .2) !default
5
+ $input-border-color-top: hsla(0, 0%, 50%, .1) !default
6
+ $input-border-colors: $input-border-color-top $input-border-color $input-border-color $input-border-color !default
7
+ $input-focus-outline-color: -webkit-focus-ring-color
8
+ $input-focus-outline-width: 2px
9
+ $input-focus-outline-auto-offset: 2px
10
+ $input-focus-outline-auto-style: auto
11
+ // $input-focus-outline-solid-offset: 0
12
+ // $input-focus-outline-solid-style: solid
13
+ $input-text-color: white !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_labels.sass ADDED
@@ -0,0 +1,2 @@
1
+ // Labels
2
+ $label-color: hsl(0, 0%, 80%) !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_panels.sass ADDED
@@ -0,0 +1,5 @@
1
+ // Panels
2
+ $panel-bg-color-solid: hsl(0, 0%, 26%) !default
3
+ $panel-bg-color-transparent: hsla(0, 0%, 100%, 0.05) !default
4
+ $panel-head-gradient: linear-gradient(rgba(255, 255, 255, .08), transparent) !default
5
+ $panel-shadow: 0 1px 4px hsla(0, 0%, 0%, .2) !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_select2.sass ADDED
@@ -0,0 +1,3 @@
1
+ // Select2
2
+ $select2-bg-color: hsl(200, 5%, 20%) !default
3
+ $select2-input-bg-color: hsl(240, 0%, 15%) !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_tables.sass ADDED
@@ -0,0 +1,10 @@
1
+ // Tables
2
+ $tr-border-bottom-color: hsla(0, 0%, 50%, .1) !default
3
+ $th-bg-color: #6f6f6f !default
4
+ $th-border-color-bottom: hsl(0, 0%, 30%) !default
5
+ $th-border-color-left: hsl(0, 0%, 24%) !default
6
+ $th-border-color-right: hsl(0, 0%, 35%) !default
7
+ $th-border-color-top: hsl(0, 0%, 31%) !default
8
+ $tr-even-bg-color: hsla(0, 0%, 100%, .02) !default
9
+ $tr-odd-bg-color: $body-bg-color !default
10
+ $tr-selected-bg-color: rgba(0, 0, 0, 0.16) !default
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_toggle-bool.sass ADDED
@@ -0,0 +1,4 @@
1
+ // Toggle bool switch
2
+ $toggle-bool-gradient-stop-top: hsl(109, 82%, 23%)
3
+ $toggle-bool-gradient-stop-bottom: hsl(143, 86%, 20%)
4
+ $toggle-bool-box-shadow: 0 1px 3px hsla(0, 0%, 0%, .1), 0 0 1px hsla(0, 0%, 100%, .7) inset
data/lib/activeadmin/dark_color_scheme/engine.rb CHANGED
@@ -1,6 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- require "autoprefixer-rails"
4
3
  require "sassc-rails"
5
4
 
6
5
  module FormtasticTristateRadio
@@ -8,12 +7,10 @@ module FormtasticTristateRadio
8
7
  # This is standard Rails way to autoload gem’s contents dynamically as an “engine”
9
8
  # @see https://guides.rubyonrails.org/engines.html Rails guide on engines
10
9
  #
11
- # module Rails
12
10
  class Engine < ::Rails::Engine
13
- initializer "bootstrap.assets" do |app|
11
+ initializer "activeadmin_dark_color_scheme.assets" do |app|
14
12
  app.config.assets.paths << root.join("assets", "stylesheets").to_s
15
13
  end
16
14
  end
17
- # end
18
15
 
19
16
  end
data/lib/activeadmin/dark_color_scheme/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Activeadmin
2
2
  module DarkColorScheme
3
- VERSION = "0.1.1"
3
+ VERSION = "0.1.6"
4
4
  end
5
5
  end
data/lib/activeadmin/dark_color_scheme.rb CHANGED
@@ -1,3 +1,5 @@
1
+ # frozen_string_literal: true
2
+
1
3
  require_relative "dark_color_scheme/version"
2
4
  require_relative "dark_color_scheme/engine"
3
5
 
data/lib/activeadmin_dark_color_scheme.rb ADDED
@@ -0,0 +1,3 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_relative "activeadmin/dark_color_scheme"
metadata CHANGED
@@ -1,55 +1,55 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: activeadmin_dark_color_scheme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.1
4
+ version: 0.1.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - Sergey Pedan
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2022-06-10 00:00:00.000000000 Z
11
+ date: 2022-06-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
- name: autoprefixer-rails
14
+ name: sassc-rails
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
17
  - - "~>"
18
18
  - !ruby/object:Gem::Version
19
- version: '10'
19
+ version: '2'
20
20
  - - ">="
21
21
  - !ruby/object:Gem::Version
22
- version: 10.4.7
22
+ version: 2.0.0
23
23
  type: :runtime
24
24
  prerelease: false
25
25
  version_requirements: !ruby/object:Gem::Requirement
26
26
  requirements:
27
27
  - - "~>"
28
28
  - !ruby/object:Gem::Version
29
- version: '10'
29
+ version: '2'
30
30
  - - ">="
31
31
  - !ruby/object:Gem::Version
32
- version: 10.4.7
32
+ version: 2.0.0
33
33
  - !ruby/object:Gem::Dependency
34
- name: sassc-rails
34
+ name: autoprefixer-rails
35
35
  requirement: !ruby/object:Gem::Requirement
36
36
  requirements:
37
37
  - - "~>"
38
38
  - !ruby/object:Gem::Version
39
- version: '2'
39
+ version: '10'
40
40
  - - ">="
41
41
  - !ruby/object:Gem::Version
42
- version: 2.0.0
43
- type: :runtime
42
+ version: 10.4.7
43
+ type: :development
44
44
  prerelease: false
45
45
  version_requirements: !ruby/object:Gem::Requirement
46
46
  requirements:
47
47
  - - "~>"
48
48
  - !ruby/object:Gem::Version
49
- version: '2'
49
+ version: '10'
50
50
  - - ">="
51
51
  - !ruby/object:Gem::Version
52
- version: 2.0.0
52
+ version: 10.4.7
53
53
  - !ruby/object:Gem::Dependency
54
54
  name: rspec
55
55
  requirement: !ruby/object:Gem::Requirement
@@ -121,22 +121,36 @@ files:
121
121
  - app/assets/stylesheets/activeadmin-dark-color-scheme/mixins/_buttons.sass
122
122
  - app/assets/stylesheets/activeadmin-dark-color-scheme/mixins/_panel-heads.sass
123
123
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_buttons.sass
124
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_fieldsets.sass
124
125
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_flash.sass
125
- - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_forms.sass
126
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_inputs.sass
127
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_labels.sass
126
128
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_login.sass
127
129
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_misc.sass
130
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_navbar.sass
128
131
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_pagination.sass
129
132
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_panels.sass
130
133
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_select2.sass
131
134
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_sidebar.sass
132
135
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-attributes.sass
133
136
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-index.sass
137
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_tabs.sass
134
138
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_title-bar.sass
139
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_toggle-bool-switch.sass
135
140
  - app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_top-level.sass
136
- - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass
141
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_alerts.sass
142
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_base.sass
143
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_buttons.sass
144
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_inputs.sass
145
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_labels.sass
146
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_panels.sass
147
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_select2.sass
148
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_tables.sass
149
+ - app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_toggle-bool.sass
137
150
  - lib/activeadmin/dark_color_scheme.rb
138
151
  - lib/activeadmin/dark_color_scheme/engine.rb
139
152
  - lib/activeadmin/dark_color_scheme/version.rb
153
+ - lib/activeadmin_dark_color_scheme.rb
140
154
  homepage: https://github.com/sergeypedan/activeadmin-dark-color-scheme
141
155
  licenses:
142
156
  - MIT
@@ -150,7 +164,7 @@ rdoc_options:
150
164
  - "--charset=UTF-8"
151
165
  require_paths:
152
166
  - app
153
- - lib/activeadmin
167
+ - lib
154
168
  required_ruby_version: !ruby/object:Gem::Requirement
155
169
  requirements:
156
170
  - - ">="
data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_forms.sass DELETED
@@ -1,33 +0,0 @@
1
- @media (prefers-color-scheme: dark)
2
- form
3
- input[type=submit],
4
- input[type=button],
5
- button
6
- @include btn-light-1
7
-
8
- fieldset
9
- &.inputs
10
- background-color: $panel-bg-color-transparent
11
- box-shadow: $panel-shadow
12
-
13
- legend
14
- span
15
- @include gradient-bar-1
16
-
17
- ol > li label
18
- color: $label-color !important
19
-
20
- input[type=text],
21
- input[type=password],
22
- input[type=email],
23
- input[type=number],
24
- input[type=url],
25
- input[type=tel],
26
- input[type=date],
27
- input[type=time],
28
- textarea
29
- border-color: $input-border-colors
30
- box-shadow: inset 0 1px 5px hsla(0, 0%, 0%, .2)
31
-
32
- input, textarea
33
- background-color: $input-bg-color
data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass DELETED
@@ -1,44 +0,0 @@
1
- // $body-bg-color: hsl(200, 4%, 20%) !default
2
- $body-bg-color: hsl(200, 8%, 15%) !default
3
- $body-text-color: hsla(0, 0%, 100%, 0.8) !default
4
-
5
- // Links
6
- $link-color-1: hsl(210, 70%, 73%) !default
7
-
8
- // Tables
9
- $tr-border-bottom-color: hsla(0, 0%, 100%, .075) !default
10
- $th-bg-color: #6f6f6f !default
11
- $th-border-color-bottom: hsl(0, 0%, 30%) !default
12
- $th-border-color-left: hsl(0, 0%, 24%) !default
13
- $th-border-color-right: hsl(0, 0%, 35%) !default
14
- $th-border-color-top: hsl(0, 0%, 31%) !default
15
- $tr-even-bg-color: hsla(0, 0%, 100%, .02) !default
16
- $tr-odd-bg-color: $body-bg-color !default
17
- $tr-selected-bg-color: rgba(0, 0, 0, 0.16) !default
18
-
19
- // Panels
20
- $panel-bg-color-solid: hsl(0, 0%, 26%) !default
21
- $panel-bg-color-transparent: hsla(0, 0%, 100%, 0.05) !default
22
- $panel-head-gradient: linear-gradient(rgba(255, 255, 255, .08), transparent) !default
23
- $panel-shadow: 0 1px 4px hsla(0, 0%, 0%, .2) !default
24
-
25
- // Forms
26
- $input-bg-color: hsla(0, 0%, 0%, .2) !default
27
- $input-border-colors: hsla(0, 0%, 50%, .1) hsla(0, 0%, 50%, .2) hsla(0, 0%, 50%, .2) hsla(0, 0%, 50%, .2) !default
28
- $input-text-color: white !default
29
- $label-color: hsl(0, 0%, 80%) !default
30
-
31
- // Select
32
- $select2-bg-color: hsl(200, 5%, 20%) !default
33
- $select2-input-bg-color: hsl(240, 0%, 15%) !default
34
-
35
- // Buttons
36
- $btn-dark-1-bg: hsl(0, 0%, 17%) !default
37
- $btn-dark-1-gradient-stop-top: hsl(0, 0%, 33%) !default
38
- $btn-dark-1-gradient-stop-bottom: hsl(0, 0%, 29%) !default
39
- $btn-dark-1-color: white !default
40
-
41
- $btn-light-1-bg: hsl(208, 15%, 87%) !default
42
- $btn-light-1-gradient-stop-top: hsl(208, 15%, 87%) !default
43
- $btn-light-1-gradient-stop-bottom: hsl(210, 2%, 68%) !default
44
- $btn-light-1-color: hsl(0, 0%, 7%) !default