codefabrik-styleguide 0.1.12 → 0.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 527abcbd1a0f7088fc06d9a7f40476cfe2c17101d32c03f359086f168d1d5b77
-  data.tar.gz: fc39c46366415b96d4d16057bb3c710c0bdb807510e9b272e1be097014bb5fc5
+  metadata.gz: 9c3f2bf3378fcc883e96bea122e52f96329e50ec25e66bc3332fd5dcb209cb2e
+  data.tar.gz: 68e40df4de672ed393e8002184c232d9b9e3121c9fd3baa391ade7f2f2134bc3
 SHA512:
-  metadata.gz: 3d17c3653859725c8d061336bc9bd1b2a9f0844f3803fb8d15507e74f19081fde7b008a2bce0ee7e6b3b44d50b14c272cfc8c86c3f8003d2cca215516f2fc945
-  data.tar.gz: 15ef64c77a682ae069e398d2aec5ef66e0a250655636a0abba2d35ade8c62633c97a02b04652d1503273390ee27bec12c7b8e2abc3f253e32408c434bda6c362
+  metadata.gz: 877a810337682aba4640fa61c85d48bbbf3c52fc20eaf6348c69f6e7b44b3c09f0562e11e45550734c5fdac1ebee3bc33889fd91efb0c1aaf129a91e768b5214
+  data.tar.gz: c587350a167836199f2e28a26105e15c6018e1cd4cd39321152bdd31875c16df7ecd066d29b1c4ad7fe40f78b59e874b68857e26ac6a62c38a0cbdcbe12d4524

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    codefabrik-styleguide (0.1.12)
+    codefabrik-styleguide (0.1.14)
       dartsass-rails (>= 0.4.0)
       rails (>= 6.0)
       sassc (>= 2.4.0)

data/README.md

@@ -33,8 +33,6 @@ The possible overrides are the following:
 $media_breakpoint: 75rem !default;
 $primary_color: #A0E7E5 !default;
 $text_on_primary_color: black !default;
-$secondary_color: #FFAEBC !default;
-$text_on_secondary_color: black !default;
 $border_color: #8f8f9d !default;
 $default_distance: 1rem !default;
 $background_color: #FDFDFD !default;

data/lib/codefabrik/styleguide/version.rb

@@ -2,6 +2,6 @@
 
 module Codefabrik
   module Styleguide
-    VERSION = "0.1.12"
+    VERSION = "0.1.14"
   end
 end

data/lib/codefabrik/styleguide/view_helpers.rb

@@ -0,0 +1,32 @@
+module Codefabrik
+  module Styleguide
+    module ViewHelpers
+      def breadcrumbs(links, current)
+        output = "<div class='breadcrumbs mb-1'>"
+        links.each do |link|
+          output << "#{link}<span class='separator'>&#9654;</span>"
+        end
+        output << current
+        output << "</div>"
+        output.html_safe
+      end
+
+      def table(headers, data)
+        output = "<div class='table'><div class='thead'><div class='tr'>"
+        headers.each do |header|
+          output << "<div class='th'>#{header}</div>"
+        end
+        output << "</div></div><div class='tbody'>"
+        data.each do |row|
+          output << "<div class='tr'>"
+          row.each do |cell|
+            output << "<div class='td'>#{cell}</div>"
+          end
+          output << "</div>"
+        end
+        output << "</div></div>"
+        output.html_safe
+      end
+    end
+  end
+end

data/lib/codefabrik/styleguide.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "rails/engine"
+require_relative "styleguide/view_helpers"
 require_relative "styleguide/version"
 
 module Codefabrik
@@ -8,6 +9,9 @@ module Codefabrik
     class Error < StandardError; end
 
     class Engine < ::Rails::Engine
+      initializer "styleguide.view_helpers" do
+        ActiveSupport.on_load( :action_view ){ include Codefabrik::Styleguide::ViewHelpers }
+      end
     end
   end
 end

data/vendor/assets/stylesheets/codefabrik/styleguide/02_layout.scss

@@ -2,13 +2,13 @@ body {
   background-color: $background_color;
 
   @media (prefers-color-scheme: dark) {
-    background-color: $background_color_dark;
+    background-color: map-get($dark, 100);
   }
 }
 
 header, footer {
   width: 100%;
-  background-color: $primary_color_light;
+  background-color: map-get($primary, 400);
   color: $text_on_primary_color;
   padding: $default_distance;
 
@@ -16,6 +16,10 @@ header, footer {
   flex-direction: column;
   align-items: center;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: map-get($dark, 400);
+  }
+
   .logo {
     height: 3rem;
   }
@@ -68,7 +72,11 @@ header, footer {
       top: 0;
       padding: 0;
       padding-top: $default_distance;
-      background-color: transparent;
+      background-color: map-get($primary, 400);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: map-get($dark, 400);
+      }
 
       section {
         display: flex;
@@ -85,13 +93,13 @@ header, footer {
           margin: 0;
 
           &.active {
-            border-left: 0.25 * $default_distance solid $primary_color;
+            border-left: 0.25 * $default_distance solid map-get($primary, 100);
             border-bottom: none;
-            background-color: $primary_color_light;
+            background-color: map-get($primary, 400);
           }
 
           &:hover {
-            background-color: $primary_color_light;
+            background-color: map-get($primary, 100);
           }
         }
       }

data/vendor/assets/stylesheets/codefabrik/styleguide/04_typo.scss

@@ -22,10 +22,14 @@ li {
 
 a {
   line-height: inherit;
-  color: $primary_color;
+  color: map-get($primary, 100);
   font-size: 1 * $default_distance;
   text-underline-offset: $default_distance * 0.15;
   text-decoration-thickness: $default_distance * 0.08;
+
+  @media (prefers-color-scheme: dark) {
+    color: map-get($primary, 500);
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -105,7 +109,7 @@ blockquote {
 }
 
 .backdrop {
-  background-color: $primary_color;
+  background-color: map-get($primary, 100);
   color: $text_on_primary_color;
 }
 

data/vendor/assets/stylesheets/codefabrik/styleguide/05_buttons.scss

@@ -4,16 +4,21 @@
   border: none;
   padding: 0.8em 1em;
   cursor: pointer;
-  background-color: $primary_color;
+  background-color: map-get($primary, 100);
   color: $text_on_primary_color;
   font-size: 0.8 * $default_distance;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: map-get($primary, 500);
+    color: black;
+  }
+
   &:hover {
-    background-color: scale-color($primary_color, $lightness: -15%);
+    background-color: map-get($primary, 200);
   }
 
   &:active {
-    background-color: scale-color($primary_color, $lightness: -30%);
+    background-color: map-get($primary, 300);
   }
 
   &.small {
@@ -28,8 +33,8 @@
 
   &.outline {
     background-color: transparent;
-    border: 1px solid $primary_color;
-    color: $primary_color;
+    border: 1px solid map-get($primary, 100);
+    color: map-get($primary, 100);
 
     &:hover {
       background-color: scale-color(white, $lightness: -5%);

data/vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss

@@ -1,9 +1,13 @@
 .table {
   width: 100%;
   display: table;
-  border-bottom: 2px solid $primary_color;
+  border-bottom: 2px solid map-get($primary, 500);
   overflow-x: scroll;
 
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 2px solid map-get($dark, 300);
+  }
+
   &:not(:first-child) {
     margin-top: 1rem;
   }
@@ -12,7 +16,11 @@
     display: table-header-group;
     position: sticky;
     top: 0;
-    background-color: $primary_color;
+    background-color: map-get($primary, 500);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: map-get($dark, 300);
+    }
 
     .tr {
       display: table-row;
@@ -33,21 +41,33 @@
       display: table-row;
 
       &:nth-child(2n+1) {
-        background: $background_color;
+        background-color: $background_color;
+
+        @media (prefers-color-scheme: dark) {
+          background-color: map-get($dark, 200);
+        }
       }
 
       .td {
         display: table-cell;
         padding: 0.5 * $default_distance;
-        border-right: 2px solid $primary_color;
+        border-right: 2px solid map-get($primary, 500);
         vertical-align: middle;
 
         @media screen and (min-width: $media_breakpoint) {
           padding: $default_distance;
         }
 
+        @media (prefers-color-scheme: dark) {
+          border-right: 2px solid map-get($dark, 300);
+        }
+
         &:first-child {
-          border-left: 2px solid $primary_color;
+          border-left: 2px solid map-get($primary, 500);
+
+          @media (prefers-color-scheme: dark) {
+            border-left: 2px solid map-get($dark, 300);
+          }
         }
       }
     }

data/vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss

@@ -76,7 +76,7 @@ form {
   }
 
   .nested-fields {
-    border: 1px solid $primary_color;
+    border: 1px solid map-get($primary, 100);
     padding: 0.5 * $default_distance;
     padding-bottom: 0;
     margin-bottom: 0.5 * $default_distance;

data/vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss

@@ -1,13 +1,18 @@
 .progress {
   width: 100%;
-  border: 1px solid $primary_color;
+  border: 1px solid map-get($primary, 100);
 }
 
 .progress__inner {
-  background-color: $primary_color;
+  background-color: map-get($primary, 100);
   padding: 0.2em;
 }
 
+.box {
+  width: 150px;
+  height: 150px;
+}
+
 summary {
   cursor: pointer;
   margin-bottom: 0.5em;
@@ -23,15 +28,23 @@ summary {
     background-color: $background_color;
     border: 2px solid transparent;
 
+    @media (prefers-color-scheme: dark) {
+      background-color: map-get($dark, 300);
+    }
+
     a {
       color: $text_on_primary_color;
       text-decoration: none;
       padding: 1rem;
       display: block;
+
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
 
     &.active {
-      border: 2px solid $primary_color;
+      border: 2px solid map-get($primary, 100);
     }
 
     &.finish {
@@ -79,6 +92,11 @@ section.card {
   &[data-status=saved], &[data-status=good] {
     border-left: 5px solid $success_color;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: map-get($dark, 200);
+    border: none;
+  }
 }
 
 .breadcrumbs {
@@ -86,6 +104,11 @@ section.card {
   border: 2px solid $border_color;
   padding: 1rem;
 
+  @media (prefers-color-scheme: dark) {
+    background-color: map-get($dark, 300);
+    border: none;
+  }
+
   .separator {
     color: $border_color;
     font-size: 0.7rem;

data/vendor/assets/stylesheets/codefabrik/styleguide/09_colors.scss

@@ -0,0 +1,11 @@
+@each $name, $color in $primary {
+  .bg-primary-#{$name} {
+    background-color: map-get($primary, $name);
+  }
+}
+
+@each $name, $color in $primary {
+  .bg-dark-#{$name} {
+    background-color: map-get($dark, $name);
+  }
+}

data/vendor/assets/stylesheets/codefabrik/styleguide.scss

@@ -1,8 +1,7 @@
 $media_breakpoint: 75rem !default;
-$primary_color: #A0E7E5 !default;
+$primary_color: #2196f3 !default;
+$dark_color: #121212 !default;
 $text_on_primary_color: black !default;
-$secondary_color: #FFAEBC !default;
-$text_on_secondary_color: black !default;
 $border_color: #8f8f9d !default;
 $default_distance: 1rem !default;
 $background_color: #FDFDFD !default;
@@ -11,12 +10,28 @@ $font: 'sans-serif' !default;
 $font_color: #333 !default;
 $font_color_dark: #EFEFEF !default;
 
+$primary: (
+  100: $primary_color,
+  200: scale-color($primary_color, $lightness: 20%),
+  300: scale-color($primary_color, $lightness: 30%),
+  400: scale-color($primary_color, $lightness: 40%),
+  500: scale-color($primary_color, $lightness: 50%),
+  600: scale-color($primary_color, $lightness: 60%),
+);
+
+$dark: (
+  100: $dark_color,
+  200: scale-color($dark_color, $lightness: 10%),
+  300: scale-color($dark_color, $lightness: 20%),
+  400: scale-color($dark_color, $lightness: 30%),
+  500: scale-color($dark_color, $lightness: 40%),
+  600: scale-color($dark_color, $lightness: 50%),
+);
+
 $error_color: scale-color(red, $lightness: 50%);
 $warning_color: scale-color(orange, $lightness: 50%);
 $success_color: scale-color(green, $lightness: 20%);
 
-$primary_color_light: scale-color($primary_color, $lightness: 50%);
-
 @import 'styleguide/01_reset';
 @import 'styleguide/02_layout';
 @import 'styleguide/03_grid';
@@ -25,3 +40,4 @@ $primary_color_light: scale-color($primary_color, $lightness: 50%);
 @import 'styleguide/06_tables';
 @import 'styleguide/07_forms';
 @import 'styleguide/08_components';
+@import 'styleguide/09_colors';

data/views/index.erb

@@ -85,6 +85,40 @@
         <li>Edgar Mitchell</li>
         <li>Alan Shepard</li>
       </ul>
+
+      <div class="table">
+        <div class="thead">
+          <div class="tr">
+            <div class="th">One</div><div class="th">Two</div><div class="th">Three</div><div class="th">Four</div>
+          </div>
+        </div>
+        <div class="tbody">
+          <div class="tr">
+            <div class="td">Un</div><div class="td">Deux</div><div class="td">Trois</div><div class="td">Quatre</div>
+          </div>
+          <div class="tr">
+            <div class="td">Uno</div><div class="td">Due</div><div class="td">Tre</div><div class="td">Quattro</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-6 mt-3">
+        <div class="box bg-primary-100">primary-100</div>
+        <div class="box bg-primary-200">primary-200</div>
+        <div class="box bg-primary-300">primary-300</div>
+        <div class="box bg-primary-400">primary-400</div>
+        <div class="box bg-primary-500">primary-500</div>
+        <div class="box bg-primary-600">primary-600</div>
+      </div>
+
+      <div class="grid grid-6 mt-3">
+        <div class="box bg-dark-100">dark-100</div>
+        <div class="box bg-dark-200">dark-200</div>
+        <div class="box bg-dark-300">dark-300</div>
+        <div class="box bg-dark-400">dark-400</div>
+        <div class="box bg-dark-500">dark-500</div>
+        <div class="box bg-dark-600">dark-600</div>
+      </div>
     </main>
 
     <footer class="mt-3">

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: codefabrik-styleguide
 version: !ruby/object:Gem::Version
-  version: 0.1.12
+  version: 0.1.14
 platform: ruby
 authors:
 - Lukas_Skywalker
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-11-13 00:00:00.000000000 Z
+date: 2024-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dartsass-rails
@@ -84,6 +84,7 @@ files:
 - dist/.gitkeep
 - lib/codefabrik/styleguide.rb
 - lib/codefabrik/styleguide/version.rb
+- lib/codefabrik/styleguide/view_helpers.rb
 - sig/codefabrik/styleguide.rbs
 - vendor/assets/stylesheets/codefabrik/styleguide.scss
 - vendor/assets/stylesheets/codefabrik/styleguide/01_reset.scss
@@ -94,6 +95,7 @@ files:
 - vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss
 - vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss
 - vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss
+- vendor/assets/stylesheets/codefabrik/styleguide/09_colors.scss
 - views/card.erb
 - views/index.erb
 homepage: https://code-fabrik.ch