material_design 0.2.4 → 0.3.0

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.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/material_design/application.css +100 -98
  3. data/app/assets/stylesheets/material_design/list.css +36 -0
  4. data/app/assets/stylesheets/material_design/typography.css +22 -0
  5. data/app/views/material_design/list/_list.html.erb +5 -0
  6. data/app/views/material_design/list/_list_item.html.erb +6 -0
  7. data/app/views/material_design/typography/_body_large.html.erb +3 -0
  8. data/app/views/material_design/typography/_body_medium.html.erb +3 -0
  9. data/lib/material_design/version.rb +1 -1
  10. metadata +7 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e3a8c3bb0ad9e063f8a98140c3b4160aa32221f57f8a0080ab88c6b89a7bc6ec
4
- data.tar.gz: 429a84345cc2f0dcc02782651a54bb1aed323dd63ebcaed8d2b4ebf930978290
3
+ metadata.gz: 59e5456e17ce42fbc4d8398c7960d1affed0dc24d2750f4782d7d1b72bcaac3b
4
+ data.tar.gz: a7deebf3ba4439f8c82faa2c916580ae356bc714e33d1e6310970b2d9fa2336b
5
5
  SHA512:
6
- metadata.gz: 9ad368a797ce31e1fa697e9bc62a908fcc484a0fda6c1a9bd093e3231679ace6560beb382ffc849b9cb90b15a7df562dc5a58e0ee1080adac7bf9d3fe08764cd
7
- data.tar.gz: 2ba974b3a8c307912a875eeea617cef2215acb1ec861868a6f1a35d269aab770859b01a30a128552475c73b7953732affddc70f2476163b7ad2a64353affc181
6
+ metadata.gz: b85747b38e2b13c3660aa8bbf115e0bb8b99186c8b3227474fa7daeaeb77a64a144d7c5670546a7f4b0692db6347e6bd9d719e720826ccae50c13f2cbcd3764e
7
+ data.tar.gz: c36a7d2510f906593675aec15f9206055d317c2c1085e409e1670f03c762a0ecb0d5971c126fdb179295e80e4f88017b29a317c012018cf9daf6c28120fc327d
data/app/assets/stylesheets/material_design/application.css CHANGED
@@ -1,105 +1,107 @@
1
1
  :root {
2
2
  /* color-scheme: light dark; */
3
+ --md-sys-light-state-hover-state-layer-opacity: rgba(29, 27, 32, 0.08);
4
+ --md-sys-dark-state-hover-state-layer-opacity: rgba(230, 224, 233, 0.08);
3
5
 
4
6
  /* Light scheme */
5
- --md-sys-light-primary: rgb(101 85 143);
6
- --md-sys-light-surface-tint: rgb(101 85 143);
7
- --md-sys-light-on-primary: rgb(255 255 255);
8
- --md-sys-light-primary-container: rgb(233 221 255);
9
- --md-sys-light-on-primary-container: rgb(32 16 71);
10
- --md-sys-light-secondary: rgb(98 91 113);
11
- --md-sys-light-on-secondary: rgb(255 255 255);
12
- --md-sys-light-secondary-container: rgb(232 222 248);
13
- --md-sys-light-on-secondary-container: rgb(30 25 43);
14
- --md-sys-light-tertiary: rgb(126 82 96);
15
- --md-sys-light-on-tertiary: rgb(255 255 255);
16
- --md-sys-light-tertiary-container: rgb(255 217 227);
17
- --md-sys-light-on-tertiary-container: rgb(49 16 29);
18
- --md-sys-light-error: rgb(186 26 26);
19
- --md-sys-light-on-error: rgb(255 255 255);
20
- --md-sys-light-error-container: rgb(255 218 214);
21
- --md-sys-light-on-error-container: rgb(65 0 2);
22
- --md-sys-light-background: rgb(253 247 255);
23
- --md-sys-light-on-background: rgb(29 27 32);
24
- --md-sys-light-surface: rgb(253 247 255);
25
- --md-sys-light-on-surface: rgb(29 27 32);
26
- --md-sys-light-surface-variant: rgb(231 224 235);
27
- --md-sys-light-on-surface-variant: rgb(73 69 78);
28
- --md-sys-light-outline: rgb(122 117 127);
29
- --md-sys-light-outline-variant: rgb(202 196 207);
30
- --md-sys-light-shadow: rgb(0 0 0);
31
- --md-sys-light-scrim: rgb(0 0 0);
32
- --md-sys-light-inverse-surface: rgb(50 47 53);
33
- --md-sys-light-inverse-on-surface: rgb(245 239 247);
34
- --md-sys-light-inverse-primary: rgb(207 189 254);
35
- --md-sys-light-primary-fixed: rgb(233 221 255);
36
- --md-sys-light-on-primary-fixed: rgb(32 16 71);
37
- --md-sys-light-primary-fixed-dim: rgb(207 189 254);
38
- --md-sys-light-on-primary-fixed-variant: rgb(77 61 117);
39
- --md-sys-light-secondary-fixed: rgb(232 222 248);
40
- --md-sys-light-on-secondary-fixed: rgb(30 25 43);
41
- --md-sys-light-secondary-fixed-dim: rgb(203 194 219);
42
- --md-sys-light-on-secondary-fixed-variant: rgb(74 68 88);
43
- --md-sys-light-tertiary-fixed: rgb(255 217 227);
44
- --md-sys-light-on-tertiary-fixed: rgb(49 16 29);
45
- --md-sys-light-tertiary-fixed-dim: rgb(239 184 200);
46
- --md-sys-light-on-tertiary-fixed-variant: rgb(99 59 72);
47
- --md-sys-light-surface-dim: rgb(222 216 224);
48
- --md-sys-light-surface-bright: rgb(253 247 255);
49
- --md-sys-light-surface-container-lowest: rgb(255 255 255);
50
- --md-sys-light-surface-container-low: rgb(248 242 250);
51
- --md-sys-light-surface-container: rgb(242 236 244);
52
- --md-sys-light-surface-container-high: rgb(236 230 238);
53
- --md-sys-light-surface-container-highest: rgb(230 224 233);
7
+ --md-sys-light-primary: rgba(101 85 143 1);
8
+ --md-sys-light-surface-tint: rgba(101 85 143 1);
9
+ --md-sys-light-on-primary: rgba(255 255 255 1);
10
+ --md-sys-light-primary-container: rgba(233 221 255 1);
11
+ --md-sys-light-on-primary-container: rgba(32 16 71 1);
12
+ --md-sys-light-secondary: rgba(98 91 113 1);
13
+ --md-sys-light-on-secondary: rgba(255 255 255 1);
14
+ --md-sys-light-secondary-container: rgba(232 222 248 1);
15
+ --md-sys-light-on-secondary-container: rgba(30 25 43 1);
16
+ --md-sys-light-tertiary: rgba(126 82 96 1);
17
+ --md-sys-light-on-tertiary: rgba(255 255 255 1);
18
+ --md-sys-light-tertiary-container: rgba(255 217 227 1);
19
+ --md-sys-light-on-tertiary-container: rgba(49 16 29 1);
20
+ --md-sys-light-error: rgba(186 26 26 1);
21
+ --md-sys-light-on-error: rgba(255 255 255 1);
22
+ --md-sys-light-error-container: rgba(255 218 214 1);
23
+ --md-sys-light-on-error-container: rgba(65 0 2 1);
24
+ --md-sys-light-background: rgba(253 247 255 1);
25
+ --md-sys-light-on-background: rgba(29 27 32 1);
26
+ --md-sys-light-surface: rgba(253 247 255 1);
27
+ --md-sys-light-on-surface: rgba(29 27 32 1);
28
+ --md-sys-light-surface-variant: rgba(231 224 235 1);
29
+ --md-sys-light-on-surface-variant: rgba(73 69 78 1);
30
+ --md-sys-light-outline: rgba(122 117 127 1);
31
+ --md-sys-light-outline-variant: rgba(202 196 207 1);
32
+ --md-sys-light-shadow: rgba(0 0 0 1);
33
+ --md-sys-light-scrim: rgba(0 0 0 1);
34
+ --md-sys-light-inverse-surface: rgba(50 47 53 1);
35
+ --md-sys-light-inverse-on-surface: rgba(245 239 247 1);
36
+ --md-sys-light-inverse-primary: rgba(207 189 254 1);
37
+ --md-sys-light-primary-fixed: rgba(233 221 255 1);
38
+ --md-sys-light-on-primary-fixed: rgba(32 16 71 1);
39
+ --md-sys-light-primary-fixed-dim: rgba(207 189 254 1);
40
+ --md-sys-light-on-primary-fixed-variant: rgba(77 61 117 1);
41
+ --md-sys-light-secondary-fixed: rgba(232 222 248 1);
42
+ --md-sys-light-on-secondary-fixed: rgba(30 25 43 1);
43
+ --md-sys-light-secondary-fixed-dim: rgba(203 194 219 1);
44
+ --md-sys-light-on-secondary-fixed-variant: rgba(74 68 88 1);
45
+ --md-sys-light-tertiary-fixed: rgba(255 217 227 1);
46
+ --md-sys-light-on-tertiary-fixed: rgba(49 16 29 1);
47
+ --md-sys-light-tertiary-fixed-dim: rgba(239 184 200 1);
48
+ --md-sys-light-on-tertiary-fixed-variant: rgba(99 59 72 1);
49
+ --md-sys-light-surface-dim: rgba(222 216 224 1);
50
+ --md-sys-light-surface-bright: rgba(253 247 255 1);
51
+ --md-sys-light-surface-container-lowest: rgba(255 255 255 1);
52
+ --md-sys-light-surface-container-low: rgba(248 242 250 1);
53
+ --md-sys-light-surface-container: rgba(242 236 244 1);
54
+ --md-sys-light-surface-container-high: rgba(236 230 238 1);
55
+ --md-sys-light-surface-container-highest: rgba(230 224 233 1);
54
56
 
55
57
  /* Dark scheme */
56
- --md-sys-dark-primary: rgb(207 189 254);
57
- --md-sys-dark-surface-tint: rgb(207 189 254);
58
- --md-sys-dark-on-primary: rgb(54 39 93);
59
- --md-sys-dark-primary-container: rgb(77 61 117);
60
- --md-sys-dark-on-primary-container: rgb(233 221 255);
61
- --md-sys-dark-secondary: rgb(203 194 219);
62
- --md-sys-dark-on-secondary: rgb(51 45 65);
63
- --md-sys-dark-secondary-container: rgb(74 68 88);
64
- --md-sys-dark-on-secondary-container: rgb(232 222 248);
65
- --md-sys-dark-tertiary: rgb(239 184 200);
66
- --md-sys-dark-on-tertiary: rgb(74 37 50);
67
- --md-sys-dark-tertiary-container: rgb(99 59 72);
68
- --md-sys-dark-on-tertiary-container: rgb(255 217 227);
69
- --md-sys-dark-error: rgb(255 180 171);
70
- --md-sys-dark-on-error: rgb(105 0 5);
71
- --md-sys-dark-error-container: rgb(147 0 10);
72
- --md-sys-dark-on-error-container: rgb(255 218 214);
73
- --md-sys-dark-background: rgb(20 18 24);
74
- --md-sys-dark-on-background: rgb(230 224 233);
75
- --md-sys-dark-surface: rgb(20 18 24);
76
- --md-sys-dark-on-surface: rgb(230 224 233);
77
- --md-sys-dark-surface-variant: rgb(73 69 78);
78
- --md-sys-dark-on-surface-variant: rgb(202 196 207);
79
- --md-sys-dark-outline: rgb(148 143 153);
80
- --md-sys-dark-outline-variant: rgb(73 69 78);
81
- --md-sys-dark-shadow: rgb(0 0 0);
82
- --md-sys-dark-scrim: rgb(0 0 0);
83
- --md-sys-dark-inverse-surface: rgb(230 224 233);
84
- --md-sys-dark-inverse-on-surface: rgb(50 47 53);
85
- --md-sys-dark-inverse-primary: rgb(101 85 143);
86
- --md-sys-dark-primary-fixed: rgb(233 221 255);
87
- --md-sys-dark-on-primary-fixed: rgb(32 16 71);
88
- --md-sys-dark-primary-fixed-dim: rgb(207 189 254);
89
- --md-sys-dark-on-primary-fixed-variant: rgb(77 61 117);
90
- --md-sys-dark-secondary-fixed: rgb(232 222 248);
91
- --md-sys-dark-on-secondary-fixed: rgb(30 25 43);
92
- --md-sys-dark-secondary-fixed-dim: rgb(203 194 219);
93
- --md-sys-dark-on-secondary-fixed-variant: rgb(74 68 88);
94
- --md-sys-dark-tertiary-fixed: rgb(255 217 227);
95
- --md-sys-dark-on-tertiary-fixed: rgb(49 16 29);
96
- --md-sys-dark-tertiary-fixed-dim: rgb(239 184 200);
97
- --md-sys-dark-on-tertiary-fixed-variant: rgb(99 59 72);
98
- --md-sys-dark-surface-dim: rgb(20 18 24);
99
- --md-sys-dark-surface-bright: rgb(59 56 62);
100
- --md-sys-dark-surface-container-lowest: rgb(15 13 19);
101
- --md-sys-dark-surface-container-low: rgb(29 27 32);
102
- --md-sys-dark-surface-container: rgb(33 31 36);
103
- --md-sys-dark-surface-container-high: rgb(43 41 47);
104
- --md-sys-dark-surface-container-highest: rgb(54 52 58);
58
+ --md-sys-dark-primary: rgba(207 189 254 1);
59
+ --md-sys-dark-surface-tint: rgba(207 189 254 1);
60
+ --md-sys-dark-on-primary: rgba(54 39 93 1);
61
+ --md-sys-dark-primary-container: rgba(77 61 117 1);
62
+ --md-sys-dark-on-primary-container: rgba(233 221 255 1);
63
+ --md-sys-dark-secondary: rgba(203 194 219 1);
64
+ --md-sys-dark-on-secondary: rgba(51 45 65 1);
65
+ --md-sys-dark-secondary-container: rgba(74 68 88 1);
66
+ --md-sys-dark-on-secondary-container: rgba(232 222 248 1);
67
+ --md-sys-dark-tertiary: rgba(239 184 200 1);
68
+ --md-sys-dark-on-tertiary: rgba(74 37 50 1);
69
+ --md-sys-dark-tertiary-container: rgba(99 59 72 1);
70
+ --md-sys-dark-on-tertiary-container: rgba(255 217 227 1);
71
+ --md-sys-dark-error: rgba(255 180 171 1);
72
+ --md-sys-dark-on-error: rgba(105 0 5 1);
73
+ --md-sys-dark-error-container: rgba(147 0 10 1);
74
+ --md-sys-dark-on-error-container: rgba(255 218 214 1);
75
+ --md-sys-dark-background: rgba(20 18 24 1);
76
+ --md-sys-dark-on-background: rgba(230 224 233 1);
77
+ --md-sys-dark-surface: rgba(20 18 24 1);
78
+ --md-sys-dark-on-surface: rgba(230 224 233 1);
79
+ --md-sys-dark-surface-variant: rgba(73 69 78 1);
80
+ --md-sys-dark-on-surface-variant: rgba(202 196 207 1);
81
+ --md-sys-dark-outline: rgba(148 143 153 1);
82
+ --md-sys-dark-outline-variant: rgba(73 69 78 1);
83
+ --md-sys-dark-shadow: rgba(0 0 0 1);
84
+ --md-sys-dark-scrim: rgba(0 0 0 1);
85
+ --md-sys-dark-inverse-surface: rgba(230 224 233 1);
86
+ --md-sys-dark-inverse-on-surface: rgba(50 47 53 1);
87
+ --md-sys-dark-inverse-primary: rgba(101 85 143 1);
88
+ --md-sys-dark-primary-fixed: rgba(233 221 255 1);
89
+ --md-sys-dark-on-primary-fixed: rgba(32 16 71 1);
90
+ --md-sys-dark-primary-fixed-dim: rgba(207 189 254 1);
91
+ --md-sys-dark-on-primary-fixed-variant: rgba(77 61 117 1);
92
+ --md-sys-dark-secondary-fixed: rgba(232 222 248 1);
93
+ --md-sys-dark-on-secondary-fixed: rgba(30 25 43 1);
94
+ --md-sys-dark-secondary-fixed-dim: rgba(203 194 219 1);
95
+ --md-sys-dark-on-secondary-fixed-variant: rgba(74 68 88 1);
96
+ --md-sys-dark-tertiary-fixed: rgba(255 217 227 1);
97
+ --md-sys-dark-on-tertiary-fixed: rgba(49 16 29 1);
98
+ --md-sys-dark-tertiary-fixed-dim: rgba(239 184 200 1);
99
+ --md-sys-dark-on-tertiary-fixed-variant: rgba(99 59 72 1);
100
+ --md-sys-dark-surface-dim: rgba(20 18 24 1);
101
+ --md-sys-dark-surface-bright: rgba(59 56 62 1);
102
+ --md-sys-dark-surface-container-lowest: rgba(15 13 19 1);
103
+ --md-sys-dark-surface-container-low: rgba(29 27 32 1);
104
+ --md-sys-dark-surface-container: rgba(33 31 36 1);
105
+ --md-sys-dark-surface-container-high: rgba(43 41 47 1);
106
+ --md-sys-dark-surface-container-highest: rgba(54 52 58 1);
105
107
  }
data/app/assets/stylesheets/material_design/list.css ADDED
@@ -0,0 +1,36 @@
1
+ .list {}
2
+
3
+ .list-item {
4
+ display: flex;
5
+ gap: 16px;
6
+ padding: 8px 16px;
7
+ @media (prefers-color-scheme: light) {
8
+ background: var(--md-sys-light-surface-container);
9
+ }
10
+ @media (prefers-color-scheme: dark) {
11
+ background: var(--md-sys-dark-surface-container);
12
+ }
13
+ }
14
+
15
+ .list-item:hover {
16
+ @media (prefers-color-scheme: light) {
17
+ background: var(--md-sys-light-state-hover-state-layer-opacity);
18
+ }
19
+ @media (prefers-color-scheme: dark) {
20
+ background: var(--md-sys-dark-state-hover-state-layer-opacity);
21
+ }
22
+ }
23
+
24
+ .list-item--content {}
25
+
26
+ .list-item__one-line {
27
+ height: 56px;
28
+ }
29
+
30
+ .list-item__two-lines {
31
+ height: 72px;
32
+ }
33
+
34
+ .list-item__three-lines {
35
+ height: 88px;
36
+ }
data/app/assets/stylesheets/material_design/typography.css CHANGED
@@ -32,3 +32,25 @@
32
32
  line-height: 20px; /* 142.857% */
33
33
  letter-spacing: 0.1px;
34
34
  }
35
+
36
+ .typography__body-large {
37
+ font-size: 16px;
38
+ line-height: 24px;
39
+ @media (prefers-color-scheme: light) {
40
+ color: var(--md-sys-light-on-surface);
41
+ }
42
+ @media (prefers-color-scheme: dark) {
43
+ color: var(--md-sys-dark-on-surface);
44
+ }
45
+ }
46
+
47
+ .typography__body-medium {
48
+ font-size: 14px;
49
+ line-height: 20px;
50
+ @media (prefers-color-scheme: light) {
51
+ color: var(--md-sys-light-on-surface-variant);
52
+ }
53
+ @media (prefers-color-scheme: dark) {
54
+ color: var(--md-sys-dark-on-surface-variant);
55
+ }
56
+ }
data/app/views/material_design/list/_list.html.erb ADDED
@@ -0,0 +1,5 @@
1
+ <div class="list">
2
+ <% locals[:list_items].each do |list_item| %>
3
+ <%= render "material_design/list/list_item", locals: list_item %>
4
+ <% end %>
5
+ </div>
data/app/views/material_design/list/_list_item.html.erb ADDED
@@ -0,0 +1,6 @@
1
+ <div class="list-item list-item__one-line">
2
+ <div class="list-item--content">
3
+ <%= render "material_design/typography/body_large", locals: { body: locals[:headline] } %>
4
+ <%= render "material_design/typography/body_medium", locals: { body: locals[:supporting_text] } %>
5
+ </div>
6
+ </div>
data/app/views/material_design/typography/_body_large.html.erb ADDED
@@ -0,0 +1,3 @@
1
+ <p class="typography__body-large">
2
+ <%= locals[:body] %>
3
+ </p>
data/app/views/material_design/typography/_body_medium.html.erb ADDED
@@ -0,0 +1,3 @@
1
+ <p class="typography__body-medium">
2
+ <%= locals[:body] %>
3
+ </p>
data/lib/material_design/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module MaterialDesign
2
- VERSION = "0.2.4"
2
+ VERSION = "0.3.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: material_design
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.4
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Eduardo Yutaka Nakanishi
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-01-29 00:00:00.000000000 Z
11
+ date: 2024-02-03 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -36,6 +36,7 @@ files:
36
36
  - README.md
37
37
  - Rakefile
38
38
  - app/assets/stylesheets/material_design/application.css
39
+ - app/assets/stylesheets/material_design/list.css
39
40
  - app/assets/stylesheets/material_design/navigation.css
40
41
  - app/assets/stylesheets/material_design/typography.css
41
42
  - app/controllers/material_design/application_controller.rb
@@ -44,9 +45,13 @@ files:
44
45
  - app/mailers/material_design/application_mailer.rb
45
46
  - app/models/material_design/application_record.rb
46
47
  - app/views/layouts/material_design/application.html.erb
48
+ - app/views/material_design/list/_list.html.erb
49
+ - app/views/material_design/list/_list_item.html.erb
47
50
  - app/views/material_design/navigation/_navigation_drawer.html.erb
48
51
  - app/views/material_design/navigation/navigation_drawer/_headline.html.erb
49
52
  - app/views/material_design/navigation/navigation_drawer/_section_header.html.erb
53
+ - app/views/material_design/typography/_body_large.html.erb
54
+ - app/views/material_design/typography/_body_medium.html.erb
50
55
  - app/views/material_design/typography/_label_large.html.erb
51
56
  - app/views/material_design/typography/_title_small.html.erb
52
57
  - config/routes.rb