gdk-toogle 1.0.1 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b7fb4c9b37ce9f5712cc5635ff39bea2b3745179ea554dbe4b941f2a9472cab
-  data.tar.gz: 57a6c432b93d5dc0e88c52f46c653ca26338638f99f866c57e56dc5540a21692
+  metadata.gz: cacce942effef205bff4a9e31cd15889c6e3faba254dd3efee2e238519940147
+  data.tar.gz: f1e506fe72c8dbe264382fa96544a66e232ea0b40fb0bfb4fb14772b3a0e9702
 SHA512:
-  metadata.gz: da4f86f837651e78dc12c7c61e2563cb8e099ff5a6a454e00226728906427243649190743cc36b46bcac34967551542afe8da58f5f5a35e5c6fd834412d434e4
-  data.tar.gz: 807b565d41e6f131a0811fb7e4d980f1c5a0a5ad5a61c892e81f3c9e6d4c2c614fe269bfadf8087465467deca63d3297080366ad1827b4abd302a09c5fb30e21
+  metadata.gz: aac129e17fb36ea58e72b2bd12dbf9d90b52d8055ab787146fc3fccaf0eec5cd178d6f1cf21672e0de6fd48aa9ab9ea15fa5a7d328e522ff430286ecf0c49d16
+  data.tar.gz: 83a9942634aab84f4058e743f900f538c5e5bc69c74f8c678c8738b544c96d377ef091cc96302164e33f03bc611db886cd90b10581b47b75a3b5e070ff32173f

data/README.md

@@ -10,7 +10,7 @@ GitLab's `Feature` classes, so mounting it in any other Rails app won't work
 
 ### Usage within the GitLab Development Kit
 
-The UI is available at http://gdk.test:3000/rails/features.
+The UI is available at http://gdk.test:4000/rails/features.
 
 ## Contributing
 
@@ -29,11 +29,12 @@ The dummy app used for testing includes fake in-memory versions of GitLab's
 develop the engine without a GDK:
 
 ```sh
+bundle install
 cd spec/dummy
 bin/rails server
 ```
 
-Then open http://localhost:3000/toogle. Toggled state lives in memory and
+Then open http://localhost:4000/toogle. Toggled state lives in memory and
 resets on restart.
 
 To test your changes inside a real GDK, point GitLab's `Gemfile` at your

data/app/assets/javascript/toogle/application.js

@@ -238,11 +238,8 @@ document.addEventListener("alpine:init", () => {
       ["@click"]() {
         this.isDark = !this.isDark;
         document.cookie = `toogle-dark=${this.isDark}; SameSite=Strict`;
-        if (this.isDark) {
-          document.documentElement.classList.remove("light-mode");
-        } else {
-          document.documentElement.classList.add("light-mode");
-        }
+        document.documentElement.classList.toggle("dark-mode", this.isDark);
+        document.documentElement.classList.toggle("light-mode", !this.isDark);
       },
       ["x-bind:title"]() {
         return `Switch to ${this.isDark ? "Light Mode" : "Dark Mode"}`;

data/app/assets/stylesheets/toogle/components/toggle.css

@@ -49,8 +49,11 @@
     }
   }
 
+  input:checked + .handle {
+    background-color: var(--color-on);
+  }
+
   input:checked + .handle:before {
-    background-color: var(--color-primary);
     transform: translateX(26px);
   }
 

data/app/assets/stylesheets/toogle/variables.css

@@ -2,6 +2,7 @@ html {
   color-scheme: light;
 
   --hue-primary: 35;
+  --hue-on: 140;
   --saturation-bg: 5%;
   --lightness-bg0: 92%; /* page */
   --lightness-bg2: 97%; /* raised surfaces: inputs, badges */
@@ -11,8 +12,11 @@ html {
   --lightness-fg: 10%;
   --lightness-muted: 42%;
   --lightness-shadow: 65%;
+  --saturation-on: 60%; /* toggle track when on */
+  --lightness-on: 38%;
 
   --color-primary: hsl(var(--hue-primary), 90%, 50%);
+  --color-on: hsl(var(--hue-on), var(--saturation-on), var(--lightness-on));
   --color-text: hsl(var(--hue-primary), 0%, var(--lightness-fg));
   --color-text-muted: hsl(var(--hue-primary), 5%, var(--lightness-muted));
   --color-shadow: hsl(0, var(--saturation-bg), var(--lightness-shadow));
@@ -43,6 +47,7 @@ html {
   );
 }
 
+/* Keep in sync with the block below */
 @media (prefers-color-scheme: dark) {
   html:not(.light-mode) {
     color-scheme: dark;
@@ -55,5 +60,23 @@ html {
     --lightness-fg: 90%;
     --lightness-muted: 60%;
     --lightness-shadow: 3%;
+    --saturation-on: 45%;
+    --lightness-on: 48%;
   }
 }
+
+/* Keep in sync with the block above */
+html.dark-mode {
+  color-scheme: dark;
+
+  --lightness-bg0: 8%;
+  --lightness-bg2: 16%;
+  --lightness-track: 22%;
+  --lightness-thumb: 70%;
+  --lightness-disabled: 12%;
+  --lightness-fg: 90%;
+  --lightness-muted: 60%;
+  --lightness-shadow: 3%;
+  --saturation-on: 45%;
+  --lightness-on: 48%;
+}

data/app/views/layouts/toogle/application.html.haml

@@ -1,5 +1,6 @@
 !!!
-%html{ class: ("light-mode" if request.cookies["toogle-dark"] == "false") }
+- theme_class = {"true" => "dark-mode", "false" => "light-mode"}[request.cookies["toogle-dark"]]
+%html{ class: theme_class }
   %head
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
     %meta(name="viewport" content="width=device-width, initial-scale=1.0")

data/lib/toogle/version.rb

@@ -1,3 +1,3 @@
 module Toogle
-  VERSION = "1.0.1"
+  VERSION = "1.0.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: gdk-toogle
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.0.2
 platform: ruby
 authors:
 - Thomas Hutterer
@@ -132,7 +132,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.12
+rubygems_version: 4.0.16
 specification_version: 4
 summary: Toogle toggles feature flags
 test_files: []