codefabrik-styleguide 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 527abcbd1a0f7088fc06d9a7f40476cfe2c17101d32c03f359086f168d1d5b77
4
- data.tar.gz: fc39c46366415b96d4d16057bb3c710c0bdb807510e9b272e1be097014bb5fc5
3
+ metadata.gz: 9c3f2bf3378fcc883e96bea122e52f96329e50ec25e66bc3332fd5dcb209cb2e
4
+ data.tar.gz: 68e40df4de672ed393e8002184c232d9b9e3121c9fd3baa391ade7f2f2134bc3
5
5
  SHA512:
6
- metadata.gz: 3d17c3653859725c8d061336bc9bd1b2a9f0844f3803fb8d15507e74f19081fde7b008a2bce0ee7e6b3b44d50b14c272cfc8c86c3f8003d2cca215516f2fc945
7
- data.tar.gz: 15ef64c77a682ae069e398d2aec5ef66e0a250655636a0abba2d35ade8c62633c97a02b04652d1503273390ee27bec12c7b8e2abc3f253e32408c434bda6c362
6
+ metadata.gz: 877a810337682aba4640fa61c85d48bbbf3c52fc20eaf6348c69f6e7b44b3c09f0562e11e45550734c5fdac1ebee3bc33889fd91efb0c1aaf129a91e768b5214
7
+ data.tar.gz: c587350a167836199f2e28a26105e15c6018e1cd4cd39321152bdd31875c16df7ecd066d29b1c4ad7fe40f78b59e874b68857e26ac6a62c38a0cbdcbe12d4524
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- codefabrik-styleguide (0.1.12)
4
+ codefabrik-styleguide (0.1.14)
5
5
  dartsass-rails (>= 0.4.0)
6
6
  rails (>= 6.0)
7
7
  sassc (>= 2.4.0)
data/README.md CHANGED
@@ -33,8 +33,6 @@ The possible overrides are the following:
33
33
  $media_breakpoint: 75rem !default;
34
34
  $primary_color: #A0E7E5 !default;
35
35
  $text_on_primary_color: black !default;
36
- $secondary_color: #FFAEBC !default;
37
- $text_on_secondary_color: black !default;
38
36
  $border_color: #8f8f9d !default;
39
37
  $default_distance: 1rem !default;
40
38
  $background_color: #FDFDFD !default;
@@ -2,6 +2,6 @@
2
2
 
3
3
  module Codefabrik
4
4
  module Styleguide
5
- VERSION = "0.1.12"
5
+ VERSION = "0.1.14"
6
6
  end
7
7
  end
@@ -0,0 +1,32 @@
1
+ module Codefabrik
2
+ module Styleguide
3
+ module ViewHelpers
4
+ def breadcrumbs(links, current)
5
+ output = "<div class='breadcrumbs mb-1'>"
6
+ links.each do |link|
7
+ output << "#{link}<span class='separator'>&#9654;</span>"
8
+ end
9
+ output << current
10
+ output << "</div>"
11
+ output.html_safe
12
+ end
13
+
14
+ def table(headers, data)
15
+ output = "<div class='table'><div class='thead'><div class='tr'>"
16
+ headers.each do |header|
17
+ output << "<div class='th'>#{header}</div>"
18
+ end
19
+ output << "</div></div><div class='tbody'>"
20
+ data.each do |row|
21
+ output << "<div class='tr'>"
22
+ row.each do |cell|
23
+ output << "<div class='td'>#{cell}</div>"
24
+ end
25
+ output << "</div>"
26
+ end
27
+ output << "</div></div>"
28
+ output.html_safe
29
+ end
30
+ end
31
+ end
32
+ end
@@ -1,6 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  require "rails/engine"
4
+ require_relative "styleguide/view_helpers"
4
5
  require_relative "styleguide/version"
5
6
 
6
7
  module Codefabrik
@@ -8,6 +9,9 @@ module Codefabrik
8
9
  class Error < StandardError; end
9
10
 
10
11
  class Engine < ::Rails::Engine
12
+ initializer "styleguide.view_helpers" do
13
+ ActiveSupport.on_load( :action_view ){ include Codefabrik::Styleguide::ViewHelpers }
14
+ end
11
15
  end
12
16
  end
13
17
  end
@@ -2,13 +2,13 @@ body {
2
2
  background-color: $background_color;
3
3
 
4
4
  @media (prefers-color-scheme: dark) {
5
- background-color: $background_color_dark;
5
+ background-color: map-get($dark, 100);
6
6
  }
7
7
  }
8
8
 
9
9
  header, footer {
10
10
  width: 100%;
11
- background-color: $primary_color_light;
11
+ background-color: map-get($primary, 400);
12
12
  color: $text_on_primary_color;
13
13
  padding: $default_distance;
14
14
 
@@ -16,6 +16,10 @@ header, footer {
16
16
  flex-direction: column;
17
17
  align-items: center;
18
18
 
19
+ @media (prefers-color-scheme: dark) {
20
+ background-color: map-get($dark, 400);
21
+ }
22
+
19
23
  .logo {
20
24
  height: 3rem;
21
25
  }
@@ -68,7 +72,11 @@ header, footer {
68
72
  top: 0;
69
73
  padding: 0;
70
74
  padding-top: $default_distance;
71
- background-color: transparent;
75
+ background-color: map-get($primary, 400);
76
+
77
+ @media (prefers-color-scheme: dark) {
78
+ background-color: map-get($dark, 400);
79
+ }
72
80
 
73
81
  section {
74
82
  display: flex;
@@ -85,13 +93,13 @@ header, footer {
85
93
  margin: 0;
86
94
 
87
95
  &.active {
88
- border-left: 0.25 * $default_distance solid $primary_color;
96
+ border-left: 0.25 * $default_distance solid map-get($primary, 100);
89
97
  border-bottom: none;
90
- background-color: $primary_color_light;
98
+ background-color: map-get($primary, 400);
91
99
  }
92
100
 
93
101
  &:hover {
94
- background-color: $primary_color_light;
102
+ background-color: map-get($primary, 100);
95
103
  }
96
104
  }
97
105
  }
@@ -22,10 +22,14 @@ li {
22
22
 
23
23
  a {
24
24
  line-height: inherit;
25
- color: $primary_color;
25
+ color: map-get($primary, 100);
26
26
  font-size: 1 * $default_distance;
27
27
  text-underline-offset: $default_distance * 0.15;
28
28
  text-decoration-thickness: $default_distance * 0.08;
29
+
30
+ @media (prefers-color-scheme: dark) {
31
+ color: map-get($primary, 500);
32
+ }
29
33
  }
30
34
 
31
35
  h1, h2, h3, h4, h5, h6 {
@@ -105,7 +109,7 @@ blockquote {
105
109
  }
106
110
 
107
111
  .backdrop {
108
- background-color: $primary_color;
112
+ background-color: map-get($primary, 100);
109
113
  color: $text_on_primary_color;
110
114
  }
111
115
 
@@ -4,16 +4,21 @@
4
4
  border: none;
5
5
  padding: 0.8em 1em;
6
6
  cursor: pointer;
7
- background-color: $primary_color;
7
+ background-color: map-get($primary, 100);
8
8
  color: $text_on_primary_color;
9
9
  font-size: 0.8 * $default_distance;
10
10
 
11
+ @media (prefers-color-scheme: dark) {
12
+ background-color: map-get($primary, 500);
13
+ color: black;
14
+ }
15
+
11
16
  &:hover {
12
- background-color: scale-color($primary_color, $lightness: -15%);
17
+ background-color: map-get($primary, 200);
13
18
  }
14
19
 
15
20
  &:active {
16
- background-color: scale-color($primary_color, $lightness: -30%);
21
+ background-color: map-get($primary, 300);
17
22
  }
18
23
 
19
24
  &.small {
@@ -28,8 +33,8 @@
28
33
 
29
34
  &.outline {
30
35
  background-color: transparent;
31
- border: 1px solid $primary_color;
32
- color: $primary_color;
36
+ border: 1px solid map-get($primary, 100);
37
+ color: map-get($primary, 100);
33
38
 
34
39
  &:hover {
35
40
  background-color: scale-color(white, $lightness: -5%);
@@ -1,9 +1,13 @@
1
1
  .table {
2
2
  width: 100%;
3
3
  display: table;
4
- border-bottom: 2px solid $primary_color;
4
+ border-bottom: 2px solid map-get($primary, 500);
5
5
  overflow-x: scroll;
6
6
 
7
+ @media (prefers-color-scheme: dark) {
8
+ border-bottom: 2px solid map-get($dark, 300);
9
+ }
10
+
7
11
  &:not(:first-child) {
8
12
  margin-top: 1rem;
9
13
  }
@@ -12,7 +16,11 @@
12
16
  display: table-header-group;
13
17
  position: sticky;
14
18
  top: 0;
15
- background-color: $primary_color;
19
+ background-color: map-get($primary, 500);
20
+
21
+ @media (prefers-color-scheme: dark) {
22
+ background-color: map-get($dark, 300);
23
+ }
16
24
 
17
25
  .tr {
18
26
  display: table-row;
@@ -33,21 +41,33 @@
33
41
  display: table-row;
34
42
 
35
43
  &:nth-child(2n+1) {
36
- background: $background_color;
44
+ background-color: $background_color;
45
+
46
+ @media (prefers-color-scheme: dark) {
47
+ background-color: map-get($dark, 200);
48
+ }
37
49
  }
38
50
 
39
51
  .td {
40
52
  display: table-cell;
41
53
  padding: 0.5 * $default_distance;
42
- border-right: 2px solid $primary_color;
54
+ border-right: 2px solid map-get($primary, 500);
43
55
  vertical-align: middle;
44
56
 
45
57
  @media screen and (min-width: $media_breakpoint) {
46
58
  padding: $default_distance;
47
59
  }
48
60
 
61
+ @media (prefers-color-scheme: dark) {
62
+ border-right: 2px solid map-get($dark, 300);
63
+ }
64
+
49
65
  &:first-child {
50
- border-left: 2px solid $primary_color;
66
+ border-left: 2px solid map-get($primary, 500);
67
+
68
+ @media (prefers-color-scheme: dark) {
69
+ border-left: 2px solid map-get($dark, 300);
70
+ }
51
71
  }
52
72
  }
53
73
  }
@@ -76,7 +76,7 @@ form {
76
76
  }
77
77
 
78
78
  .nested-fields {
79
- border: 1px solid $primary_color;
79
+ border: 1px solid map-get($primary, 100);
80
80
  padding: 0.5 * $default_distance;
81
81
  padding-bottom: 0;
82
82
  margin-bottom: 0.5 * $default_distance;
@@ -1,13 +1,18 @@
1
1
  .progress {
2
2
  width: 100%;
3
- border: 1px solid $primary_color;
3
+ border: 1px solid map-get($primary, 100);
4
4
  }
5
5
 
6
6
  .progress__inner {
7
- background-color: $primary_color;
7
+ background-color: map-get($primary, 100);
8
8
  padding: 0.2em;
9
9
  }
10
10
 
11
+ .box {
12
+ width: 150px;
13
+ height: 150px;
14
+ }
15
+
11
16
  summary {
12
17
  cursor: pointer;
13
18
  margin-bottom: 0.5em;
@@ -23,15 +28,23 @@ summary {
23
28
  background-color: $background_color;
24
29
  border: 2px solid transparent;
25
30
 
31
+ @media (prefers-color-scheme: dark) {
32
+ background-color: map-get($dark, 300);
33
+ }
34
+
26
35
  a {
27
36
  color: $text_on_primary_color;
28
37
  text-decoration: none;
29
38
  padding: 1rem;
30
39
  display: block;
40
+
41
+ @media (prefers-color-scheme: dark) {
42
+ color: white;
43
+ }
31
44
  }
32
45
 
33
46
  &.active {
34
- border: 2px solid $primary_color;
47
+ border: 2px solid map-get($primary, 100);
35
48
  }
36
49
 
37
50
  &.finish {
@@ -79,6 +92,11 @@ section.card {
79
92
  &[data-status=saved], &[data-status=good] {
80
93
  border-left: 5px solid $success_color;
81
94
  }
95
+
96
+ @media (prefers-color-scheme: dark) {
97
+ background-color: map-get($dark, 200);
98
+ border: none;
99
+ }
82
100
  }
83
101
 
84
102
  .breadcrumbs {
@@ -86,6 +104,11 @@ section.card {
86
104
  border: 2px solid $border_color;
87
105
  padding: 1rem;
88
106
 
107
+ @media (prefers-color-scheme: dark) {
108
+ background-color: map-get($dark, 300);
109
+ border: none;
110
+ }
111
+
89
112
  .separator {
90
113
  color: $border_color;
91
114
  font-size: 0.7rem;
@@ -0,0 +1,11 @@
1
+ @each $name, $color in $primary {
2
+ .bg-primary-#{$name} {
3
+ background-color: map-get($primary, $name);
4
+ }
5
+ }
6
+
7
+ @each $name, $color in $primary {
8
+ .bg-dark-#{$name} {
9
+ background-color: map-get($dark, $name);
10
+ }
11
+ }
@@ -1,8 +1,7 @@
1
1
  $media_breakpoint: 75rem !default;
2
- $primary_color: #A0E7E5 !default;
2
+ $primary_color: #2196f3 !default;
3
+ $dark_color: #121212 !default;
3
4
  $text_on_primary_color: black !default;
4
- $secondary_color: #FFAEBC !default;
5
- $text_on_secondary_color: black !default;
6
5
  $border_color: #8f8f9d !default;
7
6
  $default_distance: 1rem !default;
8
7
  $background_color: #FDFDFD !default;
@@ -11,12 +10,28 @@ $font: 'sans-serif' !default;
11
10
  $font_color: #333 !default;
12
11
  $font_color_dark: #EFEFEF !default;
13
12
 
13
+ $primary: (
14
+ 100: $primary_color,
15
+ 200: scale-color($primary_color, $lightness: 20%),
16
+ 300: scale-color($primary_color, $lightness: 30%),
17
+ 400: scale-color($primary_color, $lightness: 40%),
18
+ 500: scale-color($primary_color, $lightness: 50%),
19
+ 600: scale-color($primary_color, $lightness: 60%),
20
+ );
21
+
22
+ $dark: (
23
+ 100: $dark_color,
24
+ 200: scale-color($dark_color, $lightness: 10%),
25
+ 300: scale-color($dark_color, $lightness: 20%),
26
+ 400: scale-color($dark_color, $lightness: 30%),
27
+ 500: scale-color($dark_color, $lightness: 40%),
28
+ 600: scale-color($dark_color, $lightness: 50%),
29
+ );
30
+
14
31
  $error_color: scale-color(red, $lightness: 50%);
15
32
  $warning_color: scale-color(orange, $lightness: 50%);
16
33
  $success_color: scale-color(green, $lightness: 20%);
17
34
 
18
- $primary_color_light: scale-color($primary_color, $lightness: 50%);
19
-
20
35
  @import 'styleguide/01_reset';
21
36
  @import 'styleguide/02_layout';
22
37
  @import 'styleguide/03_grid';
@@ -25,3 +40,4 @@ $primary_color_light: scale-color($primary_color, $lightness: 50%);
25
40
  @import 'styleguide/06_tables';
26
41
  @import 'styleguide/07_forms';
27
42
  @import 'styleguide/08_components';
43
+ @import 'styleguide/09_colors';
data/views/index.erb CHANGED
@@ -85,6 +85,40 @@
85
85
  <li>Edgar Mitchell</li>
86
86
  <li>Alan Shepard</li>
87
87
  </ul>
88
+
89
+ <div class="table">
90
+ <div class="thead">
91
+ <div class="tr">
92
+ <div class="th">One</div><div class="th">Two</div><div class="th">Three</div><div class="th">Four</div>
93
+ </div>
94
+ </div>
95
+ <div class="tbody">
96
+ <div class="tr">
97
+ <div class="td">Un</div><div class="td">Deux</div><div class="td">Trois</div><div class="td">Quatre</div>
98
+ </div>
99
+ <div class="tr">
100
+ <div class="td">Uno</div><div class="td">Due</div><div class="td">Tre</div><div class="td">Quattro</div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="grid grid-6 mt-3">
106
+ <div class="box bg-primary-100">primary-100</div>
107
+ <div class="box bg-primary-200">primary-200</div>
108
+ <div class="box bg-primary-300">primary-300</div>
109
+ <div class="box bg-primary-400">primary-400</div>
110
+ <div class="box bg-primary-500">primary-500</div>
111
+ <div class="box bg-primary-600">primary-600</div>
112
+ </div>
113
+
114
+ <div class="grid grid-6 mt-3">
115
+ <div class="box bg-dark-100">dark-100</div>
116
+ <div class="box bg-dark-200">dark-200</div>
117
+ <div class="box bg-dark-300">dark-300</div>
118
+ <div class="box bg-dark-400">dark-400</div>
119
+ <div class="box bg-dark-500">dark-500</div>
120
+ <div class="box bg-dark-600">dark-600</div>
121
+ </div>
88
122
  </main>
89
123
 
90
124
  <footer class="mt-3">
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: codefabrik-styleguide
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.12
4
+ version: 0.1.14
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lukas_Skywalker
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2023-11-13 00:00:00.000000000 Z
11
+ date: 2024-01-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: dartsass-rails
@@ -84,6 +84,7 @@ files:
84
84
  - dist/.gitkeep
85
85
  - lib/codefabrik/styleguide.rb
86
86
  - lib/codefabrik/styleguide/version.rb
87
+ - lib/codefabrik/styleguide/view_helpers.rb
87
88
  - sig/codefabrik/styleguide.rbs
88
89
  - vendor/assets/stylesheets/codefabrik/styleguide.scss
89
90
  - vendor/assets/stylesheets/codefabrik/styleguide/01_reset.scss
@@ -94,6 +95,7 @@ files:
94
95
  - vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss
95
96
  - vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss
96
97
  - vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss
98
+ - vendor/assets/stylesheets/codefabrik/styleguide/09_colors.scss
97
99
  - views/card.erb
98
100
  - views/index.erb
99
101
  homepage: https://code-fabrik.ch