codefabrik-styleguide 0.1.11 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 99d41333dcaaad9ed99923714ca75fa6610cf5f1030f1f82aa77369b1abca091
-  data.tar.gz: 6714768761980866bf9b68eb07e6997aaf51a6a97350a268f3443ad794a9b8ae
+  metadata.gz: 0aa2182a9a3fadb921a4ea5c1da23d96852e875712a509edc643d4b1455504f1
+  data.tar.gz: '0618e440b1c133db6f0ebb0c511f7d2c6cf78db44984908e79c573b28f1842e2'
 SHA512:
-  metadata.gz: dfa48f0b7fc2dd8c4d5a4d7a596e1191900a78962d50e0b618622e7997eab34c114db227d8d9c6723ee0762a7cfcb2f239da66ebd87e37a6bf87c23d7615e018
-  data.tar.gz: 9becc724c03d5d7237e811cecb231fed74071258f92e77dead51092996067adaf7a58b2191d37b2d447964c04ad29e14c51380b37bd8ef5db7eb54c36cfc4cec
+  metadata.gz: c118d78fbe37dbb51e3dd5d8b8b0f13d5b17f795187cfcee982338dcc54f805d20ca7e15e82c7b02375496bc84403c5049dad945390e0bda2fc4fb4476f4e3e9
+  data.tar.gz: 171c062498328ca33b76f6e5430fea0eee0e395c5f46a9ce8ab3c348d7dfa56ecdcc37c31bd801826759d50caa46acdfdff6499bb268aec0374ca713fcc2599f

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    codefabrik-styleguide (0.1.11)
+    codefabrik-styleguide (0.1.13)
       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.11"
+    VERSION = "0.1.13"
   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;
   }
@@ -85,13 +89,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, 400);
           }
         }
       }

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

@@ -1,5 +1,7 @@
-form .input, form input[type=submit] {
-  margin-top: $default_distance;
+form .input {
+  &:not(:first-child) {
+    margin-top: $default_distance;
+  }
   margin-bottom: $default_distance;
 
   &.hidden {
@@ -55,6 +57,15 @@ form .input, form input[type=submit] {
   }
 }
 
+form input[type=submit] {
+  margin-top: 0;
+
+  // bottom margin except for last child
+  &:not(:last-child) {
+    margin-bottom: $default_distance;
+  }
+}
+
 form {
   .links {
     margin-top: 0.5 * $default_distance;
@@ -65,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;
@@ -101,10 +112,6 @@ form {
       content: '\1f6c8';
     }
   }
-
-  input[type=submit] {
-    margin-top: 0;
-  }
 }
 
 p + .btn, p + form.button_to, form + form.button_to {

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

@@ -11,7 +11,7 @@
       <h1>Codefabrik Styleguide</h1>
     </header>
 
-    <main>
+    <main class="wrapper">
       <div class="breadcrumbs mb-1">
         <a href="javascript:void(0)">Prüfungen</a><span class="separator">&#9654;</span>
         <a href="javascript:void(0)">Englisch L2</a><span class="separator">&#9654;</span>
@@ -30,7 +30,7 @@
       </div>
 
 
-      <form>
+      <form class="mt-1 mb-1">
         <div class="input string required">
           <label class="string required" for="input1">String input</label>
           <input
@@ -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.11
+  version: 0.1.13
 platform: ruby
 authors:
 - Lukas_Skywalker
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-11-12 00:00:00.000000000 Z
+date: 2023-12-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dartsass-rails
@@ -94,6 +94,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