codefabrik-styleguide 0.1.12 → 0.1.14

Sign up to get free protection for your applications and to get access to all the features.
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