cafe_car 0.1.0 → 0.1.2

data/Rakefile

@@ -1,3 +1,24 @@
 require "bundler/setup"
 
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
 require "bundler/gem_tasks"
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task :brakeman do
+  require "brakeman"
+  Brakeman.run app_path: ".", print_report: true, pager: false
+end
+
+task :test do
+  Rails::TestUnit::Runner.run_from_rake("test")
+end
+
+task default: %i[rubocop test brakeman]
+
+# Holdco backlog machinery (tasks:new, tasks:index, tasks:claim, tasks:done, rake task).
+# Loads every .rake under lib/tasks/ so the gem's own tasks and holdco_tasks both run.
+Dir.glob(File.expand_path("lib/tasks/*.rake", __dir__)).sort.each { |f| load f }

data/app/assets/fonts/Lexend.css

@@ -0,0 +1,7 @@
+@font-face {
+	font-family: 'Lexend';
+	font-style: normal;
+	font-weight: 100 900;
+	src: url('./Lexend.ttf') format('truetype');
+	/* size-adjust: 122%; */
+}

data/app/assets/images/noise.svg

@@ -0,0 +1,16 @@
+<!-- <svg viewBox='0 0 275 275' xmlns='http://www.w3.org/2000/svg'>
+  <filter id='noiseFilter'>
+    <feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch' />
+  </filter>
+
+  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
+</svg> -->
+<svg width="100%" height="100%" xmlns='http://www.w3.org/2000/svg'>
+  <filter id='noiseFilter'>
+    <feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='5' />
+    <!-- <feColorMatrix type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.5 0" /> -->
+    <feColorMatrix type="saturate" values=".1" />
+  </filter>
+
+  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
+</svg>

data/app/assets/stylesheets/actiontext.css

@@ -0,0 +1,31 @@
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}

data/app/assets/stylesheets/application.css

@@ -0,0 +1 @@
+@import url(cafe_car.css);

data/app/assets/stylesheets/cafe_car/code/base16-dark.css

@@ -0,0 +1,89 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #d8d8d8;
+}
+.highlight .err {
+  color: #181818;
+  background-color: #ab4642;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #585858;
+}
+.highlight .cp {
+  color: #f7ca88;
+}
+.highlight .nt {
+  color: #f7ca88;
+}
+.highlight .o, .highlight .ow {
+  color: #d8d8d8;
+}
+.highlight .p, .highlight .pi {
+  color: #d8d8d8;
+}
+.highlight .gi {
+  color: #a1b56c;
+}
+.highlight .gd {
+  color: #ab4642;
+}
+.highlight .gh {
+  color: #7cafc2;
+  font-weight: bold;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #ba8baf;
+}
+.highlight .kc {
+  color: #dc9656;
+}
+.highlight .kt {
+  color: #dc9656;
+}
+.highlight .kd {
+  color: #dc9656;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #a1b56c;
+}
+.highlight .sa {
+  color: #ba8baf;
+}
+.highlight .sr {
+  color: #86c1b9;
+}
+.highlight .si {
+  color: #a16946;
+}
+.highlight .se {
+  color: #a16946;
+}
+.highlight .nn {
+  color: #f7ca88;
+}
+.highlight .nc {
+  color: #f7ca88;
+}
+.highlight .no {
+  color: #f7ca88;
+}
+.highlight .na {
+  color: #7cafc2;
+}
+.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #a1b56c;
+}
+.highlight .ss {
+  color: #a1b56c;
+}

data/app/assets/stylesheets/cafe_car/code/base16-light.css

@@ -0,0 +1,90 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #383838;
+}
+.highlight .err {
+  color: #181818;
+  background-color: #ab4642;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #585858;
+}
+.highlight .cp {
+  color: #f7ca88;
+}
+.highlight .nt {
+  color: #f7ca88;
+}
+.highlight .o, .highlight .ow {
+  color: #d8d8d8;
+}
+.highlight .p, .highlight .pi {
+  color: #d8d8d8;
+}
+.highlight .gi {
+  color: #a1b56c;
+}
+.highlight .gd {
+  color: #ab4642;
+}
+.highlight .gh {
+  color: #7cafc2;
+  background-color: #181818;
+  font-weight: bold;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #ba8baf;
+}
+.highlight .kc {
+  color: #dc9656;
+}
+.highlight .kt {
+  color: #dc9656;
+}
+.highlight .kd {
+  color: #dc9656;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #a1b56c;
+}
+.highlight .sa {
+  color: #ba8baf;
+}
+.highlight .sr {
+  color: #86c1b9;
+}
+.highlight .si {
+  color: #a16946;
+}
+.highlight .se {
+  color: #a16946;
+}
+.highlight .nn {
+  color: #f7ca88;
+}
+.highlight .nc {
+  color: #f7ca88;
+}
+.highlight .no {
+  color: #f7ca88;
+}
+.highlight .na {
+  color: #7cafc2;
+}
+.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #a1b56c;
+}
+.highlight .ss {
+  color: #a1b56c;
+}

data/app/assets/stylesheets/cafe_car/pagination.css

@@ -0,0 +1,5 @@
+.pagination {
+    display: flex;
+    gap: var(--gap);
+    justify-content: center;
+}

data/app/assets/stylesheets/cafe_car/themes/cool.css

@@ -0,0 +1,32 @@
+@import url(defaults.css);
+
+:root {
+    --red: #CC4B00;
+
+    --color: rgb(24, 36, 51);
+    --dim: #6c7a91;
+
+    --accent: rgb(6, 111, 209);
+    --border: #e6e8ec;
+    --background: #f6f8fa;
+    --input: #f6f8fa;
+    --invalid: #f6f8fa;
+    --card: white;
+    --hover: rgb(50 50 93 / .03);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --red: #d63939;
+        --input: #151f2c;
+        --invalid: #351f2c;
+        --background: #151f2c;
+
+        --color: #dce1e7;
+        --dim: #6c7a91;
+
+        --card: #192433;
+        --border: #1f2e42;
+        --accent: #6aa9e3;
+    }
+}

data/app/assets/stylesheets/cafe_car/themes/cool2.css

@@ -0,0 +1,31 @@
+@import url(defaults.css);
+
+:root {
+    --red: #CC4B00;
+
+    --color: rgb(24, 36, 51);
+    --dim: #6c7a91;
+
+    --accent: rgb(6, 111, 209);
+    --card: rgb(127 127 127 / .2);
+    --background: #f6f8fa;
+    --input: #f6f8fa;
+    --invalid: #f6f8fa;
+    --border: rgb(127 127 127 / .1);
+
+    --hover: rgb(50 50 93 / .03);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --red: #d63939;
+        --input: #151f2c;
+        --invalid: #351f2c;
+        --background: #0f131e;
+
+        --color: #dce1e7;
+        --dim: #6c7a91;
+
+        --accent: #6a9ae3;
+    }
+}

data/app/assets/stylesheets/cafe_car/themes/defaults.css

@@ -0,0 +1,60 @@
+:root {
+  color-scheme: light dark;
+  accent-color: var(--accent);
+  scroll-behavior: smooth;
+
+  --blue: blue;
+  --green: green;
+  --orange: orange;
+  --red: red;
+
+  --white: white;
+  --gray: #eee;
+  --black: black;
+
+  --accent: var(--blue);
+  --primary: var(--accent);
+  --secondary: var(--accent);
+  --tertiary: var(--accent);
+
+  --success: var(--green);
+  --warning: var(--orange);
+  --danger: var(--red);
+  --error: var(--red);
+  --info: var(--blue);
+
+  --link: var(--accent);
+  --card: var(--white);
+  --button: var(--gray);
+  --menu: var(--card);
+
+  --shadow: rgb(50 50 93 / 0.25);
+  --backdrop: rgb(0 0 0 / 0.5);
+
+  --hover: rgb(50 50 93 / 0.03);
+  --outline: var(--accent);
+  --invalid: color-mix(in lab, var(--error) 3%, var(--input));
+  --selection: color-mix(in lab, var(--accent) 25%, transparent);
+
+  --font-family: ui-sans-serif, -apple-system, menu, sans-serif;
+  --font: 16px var(--font-family);
+
+  --box-shadow: var(--shadow) 0 2px 5px -1px, var(--shadow) 0 1px 3px -1px;
+  --inset-shadow: inset var(--shadow) 0 1px 3px -1px;
+
+  --gap: 1rem;
+  --indent: 0;
+  --half-gap: calc(var(--gap) / 2);
+  --third-gap: calc(var(--gap) / 3);
+  --gap2: calc(var(--gap) * 2);
+  --radius: 12px;
+  --menu-radius: calc(var(--radius) / 2);
+  --control-radius: calc(var(--radius) / 3);
+
+  --max-width: 720px;
+  --page-width: 1024px;
+  --aside-width: 20vw;
+  --modal-width: 720px;
+
+  --duration: 100ms;
+}

data/app/assets/stylesheets/cafe_car/themes/warm-dark.css

@@ -0,0 +1,29 @@
+@import url(defaults.css);
+
+:root {
+  --blue: rgb(35, 175, 208);
+
+  --input: #1e1e1d;
+  --background: #191918;
+  --button: #333;
+
+  --color: #e7e3dc;
+  --dim: #6c7a91;
+
+  --card: #222221;
+  --border: #2A2A28;
+  --hover: rgb(42, 42, 40);
+  --shadow: rgba(0, 0, 0, 0.2);
+}
+
+body {
+  scrollbar-color: rgb(73, 72, 70) rgb(25, 25, 24);
+}
+
+.Card, .Table {
+  border: 0;
+}
+
+.Table_Head {
+  background-color: var(--card);
+}

data/app/assets/stylesheets/cafe_car/themes/warm.css

@@ -0,0 +1,24 @@
+@import url(defaults.css);
+
+:root {
+  --blue: rgb(0, 120, 212);
+  --red: rgb(220, 47, 47);
+  --orange: rgb(206, 133, 44);
+  --green: rgb(38, 158, 106);
+
+  --color: rgb(34 32 29);
+  --dim: #6c7a91;
+
+  --accent: var(--blue);
+  --border: rgb(228 225 222);
+  --background: #f6f5f3;
+  --backdrop: rgb(58 50 37 / .5);
+  --input: #fff;
+  --card: white;
+  --hover: rgb(63 52 31 / .05);
+  --shadow: rgb(34 32 29 / .1);
+}
+
+body {
+  scrollbar-color: rgb(209, 206, 203) rgb(246, 245, 243);
+}

data/app/assets/stylesheets/cafe_car/tooltips.css

@@ -0,0 +1,20 @@
+[data-tip]:not(:has([data-tip]:hover)):hover {
+  &::before {
+    content: attr(data-tip, attr(title));
+    position: fixed;
+    display: block;
+
+    position-anchor: auto;
+    position-area: top;
+    position-try-fallbacks: flip-block;
+
+    z-index: 99;
+    background: var(--tooltip, rgb(0 0 0 / 0.8));
+    font-size: 0.8rem;
+    color: var(--white, white);
+    padding: 0.25rem 0.5rem;
+    max-width: 80%;
+    white-space: wrap;
+    border-radius: var(--control-radius);
+  }
+}

data/app/assets/stylesheets/cafe_car/trix.css

@@ -0,0 +1,56 @@
+trix-editor {
+  background: var(--input);
+  border: 1px solid var(--border);
+
+  .trix-button {
+    border-bottom: none;
+  }
+
+  &:focus {
+    outline-width: 2px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  trix-toolbar {
+    .trix-button-group {
+      border: 1px solid var(--border);
+    }
+
+    .trix-button {
+      border: none;
+
+      &.trix-active {
+        background: var(--link);
+      }
+
+      &:first-child {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+      }
+
+      &:last-child {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+      }
+
+      &:not(:first-child) {
+        border-left: 1px solid var(--border);
+      }
+    }
+
+    .trix-dialog {
+      background: var(--card);
+      box-shadow: var(--shadow);
+    }
+
+    [data-trix-dialog] [data-trix-validate]:invalid {
+      background: var(--invalid);
+    }
+
+    .trix-button--icon::before {
+      opacity: 1;
+      filter: invert(100%);
+    }
+  }
+}

data/app/assets/stylesheets/cafe_car/utility.css

@@ -0,0 +1,63 @@
+@keyframes fade-in {
+    from { opacity: 0 }
+}
+
+@keyframes fade-out {
+    to { opacity: 0 }
+}
+
+.remove {
+    opacity: 0;
+    transition: all var(--duration);
+    pointer-events: none;
+}
+
+.disabled, [disabled]:not(input) {
+    opacity: .3;
+    cursor: not-allowed;
+    text-decoration: line-through;
+}
+
+.left { float: left; margin-right: 1em; }
+.right { float: right; margin-left: 1em; }
+
+.center {text-align: center;}
+
+.reset {
+    appearance: none;
+    border: none;
+    background: none;
+    color: inherit;
+    text-decoration: none;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6 {
+    display: block;
+}
+
+.h1 {
+    font-size: 2em;
+    margin: .67em 0;
+}
+
+.h2 {
+    font-size: 1.5em;
+    margin: .83em 0;
+}
+
+
+.shy {
+    visibility: hidden;
+}
+
+:hover > .shy {
+    visibility: visible;
+}
+
+.pretty_inspect {
+    white-space: pre-wrap;
+}
+
+.auto {
+    field-sizing: content;
+}

data/app/assets/stylesheets/cafe_car.css

@@ -0,0 +1,96 @@
+@charset "utf-8";
+
+@layer vendor, default, theme, component, modifier, layout, utility;
+
+@import url(trix.css) layer(vendor);
+@import url(iconoir.css) layer(vendor);
+@import url(cafe_car/trix.css);
+
+@import url(cafe_car/pagination.css);
+@import url(cafe_car/tooltips.css);
+@import url(cafe_car/utility.css);
+@import url(ui/components.css);
+@import url(Lexend.css);
+@import url(cafe_car/themes/warm.css);
+@import url(cafe_car/themes/warm-dark.css) (prefers-color-scheme: dark);
+
+@import url(cafe_car/code/base16-light.css);
+@import url(cafe_car/code/base16-dark.css) (prefers-color-scheme: dark);
+
+:root {
+  --font-family: Lexend, ui-sans-serif, -apple-system, menu, sans-serif;
+}
+
+:focus {
+  z-index: 1;
+}
+
+a {
+  color: var(--link);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    filter: brightness(1.05);
+  }
+
+  &:active {
+    filter: brightness(0.95);
+  }
+}
+
+.dim {
+  color: var(--gray);
+}
+
+* {
+  box-sizing: border-box;
+  outline-color: var(--outline);
+}
+
+body {
+  color: var(--color);
+  background: var(--background);
+  /* background-image: url(noise.svg);
+  background-blend-mode: soft-light; */
+  font: var(--font);
+  margin: 0;
+  min-height: 100dvh;
+  display: flex;
+  flex-flow: column;
+
+  > * {
+    flex: 1;
+  }
+}
+
+h1,
+h2,
+h4,
+h5,
+h6,
+p {
+  margin-left: var(--indent);
+}
+
+time {
+  text-decoration: dotted underline;
+  text-decoration-color: var(--dim);
+}
+
+html[data-turbo-visit-direction="forward"]::view-transition-group(root),
+html[data-turbo-visit-direction="back"]::view-transition-group(root) {
+  animation: none;
+}
+
+turbo-frame {
+  display: contents;
+}
+
+::selection {
+  background-color: var(--selection);
+}
+
+.highlight {
+  white-space: pre-wrap;
+}