codefabrik-styleguide 0.1.11 → 0.1.13

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: 99d41333dcaaad9ed99923714ca75fa6610cf5f1030f1f82aa77369b1abca091
4
- data.tar.gz: 6714768761980866bf9b68eb07e6997aaf51a6a97350a268f3443ad794a9b8ae
3
+ metadata.gz: 0aa2182a9a3fadb921a4ea5c1da23d96852e875712a509edc643d4b1455504f1
4
+ data.tar.gz: '0618e440b1c133db6f0ebb0c511f7d2c6cf78db44984908e79c573b28f1842e2'
5
5
  SHA512:
6
- metadata.gz: dfa48f0b7fc2dd8c4d5a4d7a596e1191900a78962d50e0b618622e7997eab34c114db227d8d9c6723ee0762a7cfcb2f239da66ebd87e37a6bf87c23d7615e018
7
- data.tar.gz: 9becc724c03d5d7237e811cecb231fed74071258f92e77dead51092996067adaf7a58b2191d37b2d447964c04ad29e14c51380b37bd8ef5db7eb54c36cfc4cec
6
+ metadata.gz: c118d78fbe37dbb51e3dd5d8b8b0f13d5b17f795187cfcee982338dcc54f805d20ca7e15e82c7b02375496bc84403c5049dad945390e0bda2fc4fb4476f4e3e9
7
+ data.tar.gz: 171c062498328ca33b76f6e5430fea0eee0e395c5f46a9ce8ab3c348d7dfa56ecdcc37c31bd801826759d50caa46acdfdff6499bb268aec0374ca713fcc2599f
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- codefabrik-styleguide (0.1.11)
4
+ codefabrik-styleguide (0.1.13)
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.11"
5
+ VERSION = "0.1.13"
6
6
  end
7
7
  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
  }
@@ -85,13 +89,13 @@ header, footer {
85
89
  margin: 0;
86
90
 
87
91
  &.active {
88
- border-left: 0.25 * $default_distance solid $primary_color;
92
+ border-left: 0.25 * $default_distance solid map-get($primary, 100);
89
93
  border-bottom: none;
90
- background-color: $primary_color_light;
94
+ background-color: map-get($primary, 400);
91
95
  }
92
96
 
93
97
  &:hover {
94
- background-color: $primary_color_light;
98
+ background-color: map-get($primary, 400);
95
99
  }
96
100
  }
97
101
  }
@@ -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
  }
@@ -1,5 +1,7 @@
1
- form .input, form input[type=submit] {
2
- margin-top: $default_distance;
1
+ form .input {
2
+ &:not(:first-child) {
3
+ margin-top: $default_distance;
4
+ }
3
5
  margin-bottom: $default_distance;
4
6
 
5
7
  &.hidden {
@@ -55,6 +57,15 @@ form .input, form input[type=submit] {
55
57
  }
56
58
  }
57
59
 
60
+ form input[type=submit] {
61
+ margin-top: 0;
62
+
63
+ // bottom margin except for last child
64
+ &:not(:last-child) {
65
+ margin-bottom: $default_distance;
66
+ }
67
+ }
68
+
58
69
  form {
59
70
  .links {
60
71
  margin-top: 0.5 * $default_distance;
@@ -65,7 +76,7 @@ form {
65
76
  }
66
77
 
67
78
  .nested-fields {
68
- border: 1px solid $primary_color;
79
+ border: 1px solid map-get($primary, 100);
69
80
  padding: 0.5 * $default_distance;
70
81
  padding-bottom: 0;
71
82
  margin-bottom: 0.5 * $default_distance;
@@ -101,10 +112,6 @@ form {
101
112
  content: '\1f6c8';
102
113
  }
103
114
  }
104
-
105
- input[type=submit] {
106
- margin-top: 0;
107
- }
108
115
  }
109
116
 
110
117
  p + .btn, p + form.button_to, form + form.button_to {
@@ -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
@@ -11,7 +11,7 @@
11
11
  <h1>Codefabrik Styleguide</h1>
12
12
  </header>
13
13
 
14
- <main>
14
+ <main class="wrapper">
15
15
  <div class="breadcrumbs mb-1">
16
16
  <a href="javascript:void(0)">Prüfungen</a><span class="separator">&#9654;</span>
17
17
  <a href="javascript:void(0)">Englisch L2</a><span class="separator">&#9654;</span>
@@ -30,7 +30,7 @@
30
30
  </div>
31
31
 
32
32
 
33
- <form>
33
+ <form class="mt-1 mb-1">
34
34
  <div class="input string required">
35
35
  <label class="string required" for="input1">String input</label>
36
36
  <input
@@ -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.11
4
+ version: 0.1.13
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-12 00:00:00.000000000 Z
11
+ date: 2023-12-28 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: dartsass-rails
@@ -94,6 +94,7 @@ files:
94
94
  - vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss
95
95
  - vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss
96
96
  - vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss
97
+ - vendor/assets/stylesheets/codefabrik/styleguide/09_colors.scss
97
98
  - views/card.erb
98
99
  - views/index.erb
99
100
  homepage: https://code-fabrik.ch