material_design 0.2.4 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e3a8c3bb0ad9e063f8a98140c3b4160aa32221f57f8a0080ab88c6b89a7bc6ec
-  data.tar.gz: 429a84345cc2f0dcc02782651a54bb1aed323dd63ebcaed8d2b4ebf930978290
+  metadata.gz: 4a029393b64a427515e8fd7a43e20ac3a1d3dab82cc683c79ebac6c79c160a51
+  data.tar.gz: 724754cc148f9de7348a2c829cbc67479c138cc7cf1bafd8368c37d1ca4d423d
 SHA512:
-  metadata.gz: 9ad368a797ce31e1fa697e9bc62a908fcc484a0fda6c1a9bd093e3231679ace6560beb382ffc849b9cb90b15a7df562dc5a58e0ee1080adac7bf9d3fe08764cd
-  data.tar.gz: 2ba974b3a8c307912a875eeea617cef2215acb1ec861868a6f1a35d269aab770859b01a30a128552475c73b7953732affddc70f2476163b7ad2a64353affc181
+  metadata.gz: 0e193ffa19cfd6920c5f5ecb359ad18fbc7d90c2715604b98f845a8bd940a101db62c41506139b6c78fcce175ed61e06c2a69269beff2ea19cea5220450de412
+  data.tar.gz: c9ae55ab78644567f8b81da7a912c95c16c28fc03129eba103fc24b6389a713825cf4f2961794d55c36a3295f30e718ed7fbff337ac9e043884db7473a76238f

data/app/assets/stylesheets/material_design/app_bars.css

@@ -0,0 +1,19 @@
+.top-bar--container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px 16px 24px 16px;
+  width: 100%;
+  height: 112px;
+}
+
+.top-bar--container > .typography--title-large {
+  flex: 1 0 auto;
+  line-height: 64px;
+  @media (prefers-color-scheme: light) {
+    color: rgb(var(--md-sys-light-on-surface));
+  }
+  @media (prefers-color-scheme: dark) {
+    color: rgb(var(--md-sys-dark-on-surface));
+  }
+}

data/app/assets/stylesheets/material_design/application.css

@@ -1,105 +1,111 @@
 :root {
   /* color-scheme: light dark; */
+  --md-sys-light-state-hover-state-layer-opacity: 0.08;
+  --md-sys-dark-state-hover-state-layer-opacity: 0.08;
 
   /* Light scheme */
-  --md-sys-light-primary: rgb(101 85 143);
-  --md-sys-light-surface-tint: rgb(101 85 143);
-  --md-sys-light-on-primary: rgb(255 255 255);
-  --md-sys-light-primary-container: rgb(233 221 255);
-  --md-sys-light-on-primary-container: rgb(32 16 71);
-  --md-sys-light-secondary: rgb(98 91 113);
-  --md-sys-light-on-secondary: rgb(255 255 255);
-  --md-sys-light-secondary-container: rgb(232 222 248);
-  --md-sys-light-on-secondary-container: rgb(30 25 43);
-  --md-sys-light-tertiary: rgb(126 82 96);
-  --md-sys-light-on-tertiary: rgb(255 255 255);
-  --md-sys-light-tertiary-container: rgb(255 217 227);
-  --md-sys-light-on-tertiary-container: rgb(49 16 29);
-  --md-sys-light-error: rgb(186 26 26);
-  --md-sys-light-on-error: rgb(255 255 255);
-  --md-sys-light-error-container: rgb(255 218 214);
-  --md-sys-light-on-error-container: rgb(65 0 2);
-  --md-sys-light-background: rgb(253 247 255);
-  --md-sys-light-on-background: rgb(29 27 32);
-  --md-sys-light-surface: rgb(253 247 255);
-  --md-sys-light-on-surface: rgb(29 27 32);
-  --md-sys-light-surface-variant: rgb(231 224 235);
-  --md-sys-light-on-surface-variant: rgb(73 69 78);
-  --md-sys-light-outline: rgb(122 117 127);
-  --md-sys-light-outline-variant: rgb(202 196 207);
-  --md-sys-light-shadow: rgb(0 0 0);
-  --md-sys-light-scrim: rgb(0 0 0);
-  --md-sys-light-inverse-surface: rgb(50 47 53);
-  --md-sys-light-inverse-on-surface: rgb(245 239 247);
-  --md-sys-light-inverse-primary: rgb(207 189 254);
-  --md-sys-light-primary-fixed: rgb(233 221 255);
-  --md-sys-light-on-primary-fixed: rgb(32 16 71);
-  --md-sys-light-primary-fixed-dim: rgb(207 189 254);
-  --md-sys-light-on-primary-fixed-variant: rgb(77 61 117);
-  --md-sys-light-secondary-fixed: rgb(232 222 248);
-  --md-sys-light-on-secondary-fixed: rgb(30 25 43);
-  --md-sys-light-secondary-fixed-dim: rgb(203 194 219);
-  --md-sys-light-on-secondary-fixed-variant: rgb(74 68 88);
-  --md-sys-light-tertiary-fixed: rgb(255 217 227);
-  --md-sys-light-on-tertiary-fixed: rgb(49 16 29);
-  --md-sys-light-tertiary-fixed-dim: rgb(239 184 200);
-  --md-sys-light-on-tertiary-fixed-variant: rgb(99 59 72);
-  --md-sys-light-surface-dim: rgb(222 216 224);
-  --md-sys-light-surface-bright: rgb(253 247 255);
-  --md-sys-light-surface-container-lowest: rgb(255 255 255);
-  --md-sys-light-surface-container-low: rgb(248 242 250);
-  --md-sys-light-surface-container: rgb(242 236 244);
-  --md-sys-light-surface-container-high: rgb(236 230 238);
-  --md-sys-light-surface-container-highest: rgb(230 224 233);
+  --md-sys-light-primary: 101, 85, 143;
+  --md-sys-light-surface-tint: 101 85 143;
+  --md-sys-light-on-primary: 255 255 255;
+  --md-sys-light-primary-container: 233 221 255;
+  --md-sys-light-on-primary-container: 32 16 71;
+  --md-sys-light-secondary: 98 91 113;
+  --md-sys-light-on-secondary: 255 255 255;
+  --md-sys-light-secondary-container: 232 222 248;
+  --md-sys-light-on-secondary-container: 30 25 43;
+  --md-sys-light-tertiary: 126 82 96;
+  --md-sys-light-on-tertiary: 255 255 255;
+  --md-sys-light-tertiary-container: 255 217 227;
+  --md-sys-light-on-tertiary-container: 49 16 29;
+  --md-sys-light-error: 186 26 26;
+  --md-sys-light-on-error: 255 255 255;
+  --md-sys-light-error-container: 255 218 214;
+  --md-sys-light-on-error-container: 65 0 2;
+  --md-sys-light-background: 253 247 255;
+  --md-sys-light-on-background: 29 27 32;
+  --md-sys-light-surface: 253 247 255;
+  --md-sys-light-on-surface: 29 27 32;
+  --md-sys-light-surface-variant: 231 224 235;
+  --md-sys-light-on-surface-variant: 73 69 78;
+  --md-sys-light-outline: 122 117 127;
+  --md-sys-light-outline-variant: 202 196 207;
+  --md-sys-light-shadow: 0 0 0;
+  --md-sys-light-scrim: 0 0 0;
+  --md-sys-light-inverse-surface: 50 47 53;
+  --md-sys-light-inverse-on-surface: 245 239 247;
+  --md-sys-light-inverse-primary: 207 189 254;
+  --md-sys-light-primary-fixed: 233 221 255;
+  --md-sys-light-on-primary-fixed: 32 16 71;
+  --md-sys-light-primary-fixed-dim: 207 189 254;
+  --md-sys-light-on-primary-fixed-variant: 77 61 117;
+  --md-sys-light-secondary-fixed: 232 222 248;
+  --md-sys-light-on-secondary-fixed: 30 25 43;
+  --md-sys-light-secondary-fixed-dim: 203 194 219;
+  --md-sys-light-on-secondary-fixed-variant: 74 68 88;
+  --md-sys-light-tertiary-fixed: 255 217 227;
+  --md-sys-light-on-tertiary-fixed: 49 16 29;
+  --md-sys-light-tertiary-fixed-dim: 239 184 200;
+  --md-sys-light-on-tertiary-fixed-variant: 99 59 72;
+  --md-sys-light-surface-dim: 222 216 224;
+  --md-sys-light-surface-bright: 253 247 255;
+  --md-sys-light-surface-container-lowest: 255 255 255;
+  --md-sys-light-surface-container-low: 248 242 250;
+  --md-sys-light-surface-container: 242 236 244;
+  --md-sys-light-surface-container-high: 236 230 238;
+  --md-sys-light-surface-container-highest: 230 224 233;
 
   /* Dark scheme */
-  --md-sys-dark-primary: rgb(207 189 254);
-  --md-sys-dark-surface-tint: rgb(207 189 254);
-  --md-sys-dark-on-primary: rgb(54 39 93);
-  --md-sys-dark-primary-container: rgb(77 61 117);
-  --md-sys-dark-on-primary-container: rgb(233 221 255);
-  --md-sys-dark-secondary: rgb(203 194 219);
-  --md-sys-dark-on-secondary: rgb(51 45 65);
-  --md-sys-dark-secondary-container: rgb(74 68 88);
-  --md-sys-dark-on-secondary-container: rgb(232 222 248);
-  --md-sys-dark-tertiary: rgb(239 184 200);
-  --md-sys-dark-on-tertiary: rgb(74 37 50);
-  --md-sys-dark-tertiary-container: rgb(99 59 72);
-  --md-sys-dark-on-tertiary-container: rgb(255 217 227);
-  --md-sys-dark-error: rgb(255 180 171);
-  --md-sys-dark-on-error: rgb(105 0 5);
-  --md-sys-dark-error-container: rgb(147 0 10);
-  --md-sys-dark-on-error-container: rgb(255 218 214);
-  --md-sys-dark-background: rgb(20 18 24);
-  --md-sys-dark-on-background: rgb(230 224 233);
-  --md-sys-dark-surface: rgb(20 18 24);
-  --md-sys-dark-on-surface: rgb(230 224 233);
-  --md-sys-dark-surface-variant: rgb(73 69 78);
-  --md-sys-dark-on-surface-variant: rgb(202 196 207);
-  --md-sys-dark-outline: rgb(148 143 153);
-  --md-sys-dark-outline-variant: rgb(73 69 78);
-  --md-sys-dark-shadow: rgb(0 0 0);
-  --md-sys-dark-scrim: rgb(0 0 0);
-  --md-sys-dark-inverse-surface: rgb(230 224 233);
-  --md-sys-dark-inverse-on-surface: rgb(50 47 53);
-  --md-sys-dark-inverse-primary: rgb(101 85 143);
-  --md-sys-dark-primary-fixed: rgb(233 221 255);
-  --md-sys-dark-on-primary-fixed: rgb(32 16 71);
-  --md-sys-dark-primary-fixed-dim: rgb(207 189 254);
-  --md-sys-dark-on-primary-fixed-variant: rgb(77 61 117);
-  --md-sys-dark-secondary-fixed: rgb(232 222 248);
-  --md-sys-dark-on-secondary-fixed: rgb(30 25 43);
-  --md-sys-dark-secondary-fixed-dim: rgb(203 194 219);
-  --md-sys-dark-on-secondary-fixed-variant: rgb(74 68 88);
-  --md-sys-dark-tertiary-fixed: rgb(255 217 227);
-  --md-sys-dark-on-tertiary-fixed: rgb(49 16 29);
-  --md-sys-dark-tertiary-fixed-dim: rgb(239 184 200);
-  --md-sys-dark-on-tertiary-fixed-variant: rgb(99 59 72);
-  --md-sys-dark-surface-dim: rgb(20 18 24);
-  --md-sys-dark-surface-bright: rgb(59 56 62);
-  --md-sys-dark-surface-container-lowest: rgb(15 13 19);
-  --md-sys-dark-surface-container-low: rgb(29 27 32);
-  --md-sys-dark-surface-container: rgb(33 31 36);
-  --md-sys-dark-surface-container-high: rgb(43 41 47);
-  --md-sys-dark-surface-container-highest: rgb(54 52 58);
+  --md-sys-dark-primary: 207 189 254;
+  --md-sys-dark-surface-tint: 207 189 254;
+  --md-sys-dark-on-primary: 54 39 93;
+  --md-sys-dark-primary-container: 77 61 117;
+  --md-sys-dark-on-primary-container: 233 221 255;
+  --md-sys-dark-secondary: 203 194 219;
+  --md-sys-dark-on-secondary: 51 45 65;
+  --md-sys-dark-secondary-container: 74 68 88;
+  --md-sys-dark-on-secondary-container: 232 222 248;
+  --md-sys-dark-tertiary: 239 184 200;
+  --md-sys-dark-on-tertiary: 74 37 50;
+  --md-sys-dark-tertiary-container: 99 59 72;
+  --md-sys-dark-on-tertiary-container: 255 217 227;
+  --md-sys-dark-error: 255 180 171;
+  --md-sys-dark-on-error: 105 0 5;
+  --md-sys-dark-error-container: 147 0 10;
+  --md-sys-dark-on-error-container: 255 218 214;
+  --md-sys-dark-background: 20 18 24;
+  --md-sys-dark-on-background: 230 224 233;
+  --md-sys-dark-surface: 20 18 24;
+  --md-sys-dark-on-surface: 230 224 233;
+  --md-sys-dark-surface-variant: 73 69 78;
+  --md-sys-dark-on-surface-variant: 202 196 207;
+  --md-sys-dark-outline: 148 143 153;
+  --md-sys-dark-outline-variant: 73 69 78;
+  --md-sys-dark-shadow: 0 0 0;
+  --md-sys-dark-scrim: 0 0 0;
+  --md-sys-dark-inverse-surface: 230 224 233;
+  --md-sys-dark-inverse-on-surface: 50 47 53;
+  --md-sys-dark-inverse-primary: 101 85 143;
+  --md-sys-dark-primary-fixed: 233 221 255;
+  --md-sys-dark-on-primary-fixed: 32 16 71;
+  --md-sys-dark-primary-fixed-dim: 207 189 254;
+  --md-sys-dark-on-primary-fixed-variant: 77 61 117;
+  --md-sys-dark-secondary-fixed: 232 222 248;
+  --md-sys-dark-on-secondary-fixed: 30 25 43;
+  --md-sys-dark-secondary-fixed-dim: 203 194 219;
+  --md-sys-dark-on-secondary-fixed-variant: 74 68 88;
+  --md-sys-dark-tertiary-fixed: 255 217 227;
+  --md-sys-dark-on-tertiary-fixed: 49 16 29;
+  --md-sys-dark-tertiary-fixed-dim: 239 184 200;
+  --md-sys-dark-on-tertiary-fixed-variant: 99 59 72;
+  --md-sys-dark-surface-dim: 20 18 24;
+  --md-sys-dark-surface-bright: 59 56 62;
+  --md-sys-dark-surface-container-lowest: 15 13 19;
+  --md-sys-dark-surface-container-low: 29 27 32;
+  --md-sys-dark-surface-container: 33 31 36;
+  --md-sys-dark-surface-container-high: 43 41 47;
+  --md-sys-dark-surface-container-highest: 54 52 58;
+}
+
+.text-center {
+  text-align: center;
 }

data/app/assets/stylesheets/material_design/dividers.css

@@ -0,0 +1,14 @@
+.horizontal-divider {
+  width: 100%;
+  margin-top: 0;
+  @media (prefers-color-scheme: light) {
+    border: 1px solid rgb(var(--md-sys-light-outline-variant));
+  }
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid rgb(var(--md-sys-dark-outline-variant));
+  }
+}
+
+.divider__inset {
+  margin: 0 16px;
+}

data/app/assets/stylesheets/material_design/icons.css

@@ -0,0 +1,8 @@
+svg {
+  @media (prefers-color-scheme: light) {
+    color: rgb(var(--md-sys-light-on-surface));
+  }
+  @media (prefers-color-scheme: dark) {
+    color: rgb(var(--md-sys-dark-on-surface));
+  }
+}

data/app/assets/stylesheets/material_design/lists.css

@@ -0,0 +1,37 @@
+.list {}
+
+.list-item {
+  display: flex;
+  gap: 16px;
+  padding: 8px 16px;
+  @media (prefers-color-scheme: light) {
+    background: rgb(var(--md-sys-light-surface-container));
+  }
+  @media (prefers-color-scheme: dark) {
+    background: rgb(var(--md-sys-dark-surface-container));
+  }
+}
+
+.list-item:hover {
+  cursor: pointer;
+  @media (prefers-color-scheme: light) {
+    background: rgb(var(--md-sys-light-on-surface) / var(--md-sys-light-state-hover-state-layer-opacity));
+  }
+  @media (prefers-color-scheme: dark) {
+    background: rgb(var(--md-sys-dark-on-surface) / var(--md-sys-light-state-hover-state-layer-opacity));
+  }
+}
+
+.list-item--content {}
+
+.list-item__one-line {
+  height: 56px;
+}
+
+.list-item__two-lines {
+  height: 72px;
+}
+
+.list-item__three-lines {
+  height: 88px;
+}

data/app/assets/stylesheets/material_design/navigation.css

@@ -8,10 +8,10 @@
   align-items: flex-start;
   border-radius: 16px;
   @media (prefers-color-scheme: light) {
-    background: var(--md-sys-light-surface-container-low);
+    background: rgb(var(--md-sys-light-surface-container-low));
   }
   @media (prefers-color-scheme: dark) {
-    background: var(--md-sys-dark-surface-container-low);
+    background: rgb(var(--md-sys-dark-surface-container-low));
   }
   @media (max-width: 840px) {
     display: none;
@@ -27,6 +27,12 @@
   align-items: flex-start;
   gap: 10px;
   align-self: stretch;
+  @media (prefers-color-scheme: light) {
+    color: rgb(var(--md-sys-light-on-surface-variant));
+  }
+  @media (prefers-color-scheme: dark) {
+    color: rgb(var(--md-sys-dark-on-surface-variant));
+  }
 }
 
 .navigation-drawer__secion-header {
@@ -48,19 +54,19 @@
 
 .navigation-drawer__nav_item:hover {
   @media (prefers-color-scheme: light) {
-    background: var(--md-sys-light-secondary-container);
+    background: rgb(var(--md-sys-light-secondary-container));
   }
   @media (prefers-color-scheme: dark) {
-    background: var(--md-sys-dark-secondary-container);
+    background: rgb(var(--md-sys-dark-secondary-container));
   }
 }
 
 .navigation-drawer__nav_item.active {
   @media (prefers-color-scheme: light) {
-    background: var(--md-sys-light-secondary-container);
+    background: rgb(var(--md-sys-light-secondary-container));
   }
   @media (prefers-color-scheme: dark) {
-    background: var(--md-sys-dark-secondary-container);
+    background: rgb(var(--md-sys-dark-secondary-container));
   }
 }
 

data/app/assets/stylesheets/material_design/tabs.css

@@ -0,0 +1,35 @@
+.secondary-tabs--container {
+  display: flex;
+  height: 48px;
+  width: 100%;
+}
+
+.secondary-tabs--tab {
+  flex: 1;
+  align-self: center;
+}
+
+.secondary-tabs--tab:hover {
+  @media (prefers-color-scheme: light) {
+    background: rgb(var(--md-sys-light-primary) / var(--md-sys-light-state-hover-state-layer-opacity));
+  }
+  @media (prefers-color-scheme: dark) {
+    background: rgb(var(--md-sys-dark-primary) / var(--md-sys-dark-state-hover-state-layer-opacity));
+  }
+}
+
+.secondary-tabs--tab.active {
+  flex: 1;
+  align-self: center;
+  @media (prefers-color-scheme: light) {
+    box-shadow: inset 0 -2px 0 rgb(var(--md-sys-light-primary));
+  }
+  @media (prefers-color-scheme: dark) {
+    box-shadow: inset 0 -2px 0 rgb(var(--md-sys-dark-primary));
+  }
+}
+
+.secondary-tabs--tab > .typography__title-small {
+  text-align: center;
+  line-height: 48px;
+}

data/app/assets/stylesheets/material_design/typography.css

@@ -1,34 +1,71 @@
-.typography__title--small {
-  /* Typography */
+.typography__headline-medium {
+  font-size: 28px;
+  line-height: 36px;
+}
+
+.typography__headline-small {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.typography--title-large {
+  font-size: 22px;
+  line-height: 28px;
+}
+
+.typography__title-medium {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing:0.15px;
+}
+
+.typography__title-small {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.1px;
+
   @media (prefers-color-scheme: light) {
-    color: var(--md-sys-light-on-surface-variant);
+    color: rgb(var(--md-sys-light-on-surface-variant));
   }
   @media (prefers-color-scheme: dark) {
-    color: var(--md-sys-dark-on-surface-variant);
+    color: rgb(var(--md-sys-dark-on-surface-variant));
   }
-  
-  /* M3/title/small */
-  /* font-family: Roboto; */
+}
+
+.typography__label-large {
   font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
+  font-weight: 600;
+  line-height: 20px;
   letter-spacing: 0.1px;
+
+  @media (prefers-color-scheme: light) {
+    color: rgb(var(--md-sys-light-on-secondary-container));
+  }
+  @media (prefers-color-scheme: dark) {
+    color: rgb(var(--md-sys-dark-on-secondary-container));
+  }
 }
 
-.typography__label--large {
+.typography__body-large {
+  font-size: 16px;
+  line-height: 24px;
   @media (prefers-color-scheme: light) {
-    color: var(--md-sys-light-on-secondary-container);
+    color: rgb(var(--md-sys-light-on-surface));
   }
   @media (prefers-color-scheme: dark) {
-    color: var(--md-sys-dark-on-secondary-container);
+    color: rgb(var(--md-sys-dark-on-surface));
   }
+}
 
-  /* M3/label/large - prominent */
-  /* font-family: Roboto; */
+.typography__body-medium {
   font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 20px; /* 142.857% */
-  letter-spacing: 0.1px;
+  line-height: 20px;
+  @media (prefers-color-scheme: light) {
+    color: rgb(var(--md-sys-light-on-surface-variant));
+  }
+  @media (prefers-color-scheme: dark) {
+    color: rgb(var(--md-sys-dark-on-surface-variant));
+  }
 }

data/app/views/material_design/app_bars/_top_bar.html.erb

@@ -0,0 +1,8 @@
+<div class="top-bar--container">
+  <% if locals[:back_path] %>
+    <%= link_to locals[:back_path] do %>
+      <%= render "material_design/icons/icon", locals: { icon: "arrow_back", size: "40" } %>
+    <% end %>
+  <% end %>
+  <%= render "material_design/typography/title_large", locals: { title: locals[:headline], center: locals[:center] } %>
+</div>

data/app/views/material_design/dividers/_horizontal.html.erb

@@ -0,0 +1 @@
+<hr class="<%= class_names('horizontal-divider', divider__inset: locals[:inset]) %>">

data/app/views/material_design/icons/_arrow_back.html.erb

@@ -0,0 +1,3 @@
+<svg width="<%= locals[:size] %>" height="<%= locals[:size] %>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor" />
+</svg>

data/app/views/material_design/icons/_icon.html.erb

@@ -0,0 +1 @@
+<%= render "material_design/icons/#{locals[:icon]}", locals: { size: locals[:size] || "24" } %>

data/app/views/material_design/lists/_list.html.erb

@@ -0,0 +1,5 @@
+<div class="list">
+  <% locals[:list_items].each do |list_item| %>
+    <%= render "material_design/lists/list_item", locals: list_item %>
+  <% end %>
+</div>

data/app/views/material_design/lists/_list_item.html.erb

@@ -0,0 +1,6 @@
+<div class="list-item list-item__one-line">
+  <div class="list-item--content">
+    <%= render "material_design/typography/body_large", locals: { body: locals[:headline] } %>
+    <%= render "material_design/typography/body_medium", locals: { body: locals[:supporting_text] } %>
+  </div>
+</div>

data/app/views/material_design/navigation/navigation_drawer/_headline.html.erb

@@ -1,3 +1,3 @@
 <div class="navigation-drawer__headline">
-  <%= render "material_design/typography/title_small", locals: { title: locals[:headline] } %>
+  <%= render "material_design/typography/headline_small", locals: { headline: locals[:headline] } %>
 </div>

data/app/views/material_design/tabs/_secondary.html.erb

@@ -0,0 +1,6 @@
+<div class="secondary-tabs--container">
+  <% locals[:tabs].each do |tab| %>
+    <%= render "material_design/tabs/secondary/tab", locals: { label: tab[:label], path: tab[:path], controller: tab[:controller] } %>
+  <% end %>
+</div>
+<%= render "material_design/dividers/horizontal", locals: { inset: false } %>

data/app/views/material_design/tabs/secondary/_tab.html.erb

@@ -0,0 +1,3 @@
+<%= link_to locals[:path], data: { controller: locals[:controller] }, class: class_names('secondary-tabs--tab', active: request.fullpath.start_with?(locals[:path])) do %>
+  <%= render "material_design/typography/title_small", locals: { title: locals[:label] } %>
+<% end %>

data/app/views/material_design/typography/_body_large.html.erb

@@ -0,0 +1,3 @@
+<p class="typography__body-large">
+  <%= locals[:body] %>
+</p>

data/app/views/material_design/typography/_body_medium.html.erb

@@ -0,0 +1,3 @@
+<p class="typography__body-medium">
+  <%= locals[:body] %>
+</p>

data/app/views/material_design/typography/_headline_medium.html.erb

@@ -0,0 +1,3 @@
+<h2 class="typography__headline-medium">
+  <%= locals[:headline] %>
+</h2>

data/app/views/material_design/typography/_headline_small.html.erb

@@ -0,0 +1,3 @@
+<h3 class="typography__headline-small">
+  <%= locals[:headline] %>
+</h3>

data/app/views/material_design/typography/_label_large.html.erb

@@ -1,3 +1,3 @@
-<p class="typography__label--large">
+<p class="typography__label-large">
   <%= locals[:label] %>
 </>

data/app/views/material_design/typography/_title_large.html.erb

@@ -0,0 +1,3 @@
+<h5 class="<%= class_names('typography--title-large', 'text-center': locals[:center]) %>">
+  <%= locals[:title] %>
+</h5>

data/app/views/material_design/typography/_title_small.html.erb

@@ -1,3 +1,3 @@
-<h6 class="typography__title--small">
+<h6 class="typography__title-small">
   <%= locals[:title] %>
 </h6>

data/lib/material_design/version.rb

@@ -1,3 +1,3 @@
 module MaterialDesign
-  VERSION = "0.2.4"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_design
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.4.0
 platform: ruby
 authors:
 - Eduardo Yutaka Nakanishi
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-29 00:00:00.000000000 Z
+date: 2024-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -35,8 +35,13 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/stylesheets/material_design/app_bars.css
 - app/assets/stylesheets/material_design/application.css
+- app/assets/stylesheets/material_design/dividers.css
+- app/assets/stylesheets/material_design/icons.css
+- app/assets/stylesheets/material_design/lists.css
 - app/assets/stylesheets/material_design/navigation.css
+- app/assets/stylesheets/material_design/tabs.css
 - app/assets/stylesheets/material_design/typography.css
 - app/controllers/material_design/application_controller.rb
 - app/helpers/material_design/application_helper.rb
@@ -44,10 +49,23 @@ files:
 - app/mailers/material_design/application_mailer.rb
 - app/models/material_design/application_record.rb
 - app/views/layouts/material_design/application.html.erb
+- app/views/material_design/app_bars/_top_bar.html.erb
+- app/views/material_design/dividers/_horizontal.html.erb
+- app/views/material_design/icons/_arrow_back.html.erb
+- app/views/material_design/icons/_icon.html.erb
+- app/views/material_design/lists/_list.html.erb
+- app/views/material_design/lists/_list_item.html.erb
 - app/views/material_design/navigation/_navigation_drawer.html.erb
 - app/views/material_design/navigation/navigation_drawer/_headline.html.erb
 - app/views/material_design/navigation/navigation_drawer/_section_header.html.erb
+- app/views/material_design/tabs/_secondary.html.erb
+- app/views/material_design/tabs/secondary/_tab.html.erb
+- app/views/material_design/typography/_body_large.html.erb
+- app/views/material_design/typography/_body_medium.html.erb
+- app/views/material_design/typography/_headline_medium.html.erb
+- app/views/material_design/typography/_headline_small.html.erb
 - app/views/material_design/typography/_label_large.html.erb
+- app/views/material_design/typography/_title_large.html.erb
 - app/views/material_design/typography/_title_small.html.erb
 - config/routes.rb
 - lib/material_design.rb