gridy 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8dda01ccf56bc2c2a1bbce11a8255e53bbdf29e2e00cce66c6d3a7be89434d73
+  data.tar.gz: d045f910f97777dac23b85ebb35c6a74e3104fc5022f578ca8e81f2129dec49f
+SHA512:
+  metadata.gz: b7a4d1cbba84d5a6489fb269d4c9af247d09b8b9c0d6b57b98bb8bca40383d4482fafcde67a085ed836815adb0cbbaf3e9323c0c3822357e6858dc65aa3afe31
+  data.tar.gz: e66d39c68309e05d8d97f8e964002e7a449516f41f92651eb92d973f782befabcd322c5419432f2448864733ae250edf01f102d6551218d8bded2227cdc1f33e

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Melvin Sembrano
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# Gridy
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "gridy"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install gridy
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,3 @@
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/app/assets/stylesheets/gridy/open-props/buttons.css

@@ -0,0 +1,172 @@
+:where(html) {
+  --gray-0-hsl: 210 17% 98%;
+  --gray-1-hsl: 210 17% 95%;
+  --gray-2-hsl: 210 16% 93%;
+  --gray-3-hsl: 210 14% 89%;
+  --gray-4-hsl: 210 14% 83%;
+  --gray-5-hsl: 210 11% 71%;
+  --gray-6-hsl: 210 7% 56%;
+  --gray-7-hsl: 210 9% 31%;
+  --gray-8-hsl: 210 10% 23%;
+  --gray-9-hsl: 210 11% 15%;
+  --gray-10-hsl: 214 14% 10%;
+  --gray-11-hsl: 216 16% 6%;
+  --gray-12-hsl: 210 40% 2%;
+}
+:where(
+    .btn,
+    button,
+    input:is([type="button"], [type="submit"], [type="reset"])
+  ),
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+  --_accent: initial;
+  --_text: initial;
+  --_size: initial;
+  --_bg-light: #fff;
+  --_bg-dark: var(--surface-3);
+  --_bg: var(--_bg-light);
+  --_border: var(--surface-3);
+  --_highlight-size: 0;
+  --_highlight-light: hsl(var(--gray-5-hsl) / 25%);
+  --_highlight-dark: hsl(var(--gray-12-hsl) / 25%);
+  --_highlight: var(--_highlight-light);
+  --_ink-shadow-light: 0 1px 0 var(--gray-3);
+  --_ink-shadow-dark: 0 1px 0 var(--surface-1);
+  --_ink-shadow: var(--_ink-shadow-light);
+  --_icon-size: var(--size-relative-7);
+  --_icon-color: var(--_accent, var(--link));
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  align-items: center;
+  background: var(--_bg);
+  border: var(--border-size-2) solid var(--_border);
+  border-radius: var(--radius-2);
+  box-shadow:
+    var(--shadow-2),
+    0 1px var(--surface-3),
+    0 0 0 var(--_highlight-size) var(--_highlight);
+  color: var(--_text);
+  display: inline-flex;
+  font-size: var(--_size);
+  font-weight: var(--font-weight-7);
+  gap: var(--size-2);
+  justify-content: center;
+  padding-block: 0.75ch;
+  padding-inline: var(--size-relative-6);
+  text-align: center;
+  text-shadow: var(--_ink-shadow);
+  transition: border-color 0.5s var(--ease-3);
+  user-select: none;
+}
+@media (prefers-color-scheme: dark) {
+  :where(
+      .btn,
+      button,
+      input:is([type="button"], [type="submit"], [type="reset"])
+    ),
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    --_highlight: var(--_highlight-dark);
+    --_bg: var(--_bg-dark);
+    --_ink-shadow: var(--_ink-shadow-dark);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :where(
+      .btn,
+      button,
+      input:is([type="button"], [type="submit"], [type="reset"])
+    ),
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    transition:
+      border-color 0.5s var(--ease-3),
+      box-shadow 145ms var(--ease-4),
+      outline-offset 145ms var(--ease-4);
+  }
+}
+:where(
+    .btn,
+    button,
+    input:is([type="button"], [type="submit"], [type="reset"])
+  )[disabled] {
+  --_bg: none;
+  --_text: var(--gray-6);
+  box-shadow: var(--shadow-1);
+  cursor: not-allowed;
+}
+@media (prefers-color-scheme: dark) {
+  :where(
+      .btn,
+      button,
+      input:is([type="button"], [type="submit"], [type="reset"])
+    )[disabled] {
+    --_text: var(--gray-5);
+  }
+}
+:where(
+    .btn,
+    button,
+    input:is([type="button"], [type="submit"], [type="reset"])
+  ):where(:not(:active):hover) {
+  --_highlight-size: var(--size-2);
+  transition-duration: 0.25s;
+}
+:where(.btn, button, input:is([type="button"], [type="submit"], [type="reset"]))
+  > :where(svg) {
+  block-size: var(--_icon-size);
+  filter: drop-shadow(var(--_ink-shadow));
+  flex-shrink: 0;
+  inline-size: var(--_icon-size);
+}
+:where(.btn, button, input:is([type="button"], [type="submit"], [type="reset"]))
+  > :where(svg > *) {
+  stroke: var(--_icon-color);
+  stroke-width: var(--border-size-2);
+}
+:where([type="submit"], form button:not([type], [disabled])) {
+  --_text: var(--_accent, var(--link));
+}
+:where([type="reset"]) {
+  --_text: var(--red-6);
+  --_border: var(--red-3);
+}
+:where([type="reset"]):focus-visible {
+  outline-color: var(--red-6);
+}
+@media (prefers-color-scheme: dark) {
+  :where([type="reset"]) {
+    --_text: var(--red-2);
+    --_border: var(--surface-3);
+  }
+}
+:where([type="submit"], [type="reset"], form button:not([type])):is(
+    :hover,
+    :focus-visible
+  ):not([disabled]) {
+  --_border: currentColor;
+}
+:where(input[type="file"]) {
+  align-self: flex-start;
+  border: var(--border-size-1) solid var(--surface-2);
+  border-radius: var(--radius-2);
+  box-shadow: var(--inner-shadow-4);
+  color: var(--text-2);
+  cursor: auto;
+  max-inline-size: 100%;
+  padding: 0;
+}
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+  cursor: pointer;
+  margin-inline-end: var(--size-relative-6);
+}
+@media (prefers-color-scheme: dark) {
+  :where([disabled]),
+  :where([type="reset"]),
+  :where([type="submit"]),
+  :where(form button:not([type="button"])) {
+    --_bg: var(--surface-1);
+  }
+}

data/app/assets/stylesheets/gridy/open-props/normalize.css

@@ -0,0 +1,457 @@
+:where(html) {
+  --link: var(--indigo-7);
+  --link-visited: var(--purple-7);
+  --text-1: var(--gray-12);
+  --text-2: var(--gray-7);
+  --surface-1: var(--gray-0);
+  --surface-2: var(--gray-2);
+  --surface-3: var(--gray-3);
+  --surface-4: var(--gray-4);
+  --scrollthumb-color: var(--gray-7);
+  -webkit-text-size-adjust: none;
+  accent-color: var(--brand, var(--link));
+  background-color: var(--surface-1);
+  block-size: 100%;
+  caret-color: var(--brand, var(--link));
+  color: var(--text-1);
+  color-scheme: light;
+  font-family: var(--font-system-ui);
+  line-height: var(--font-lineheight-3);
+  scrollbar-color: var(--scrollthumb-color) transparent;
+}
+@media (dynamic-range: high) or (color-gamut: p3) {
+  @supports (color: color(display-p3 0 0 0)) {
+    :where(html) {
+      --link: color(display-p3 0.1 0.4 1);
+      --link-visited: color(display-p3 0.6 0.2 1);
+    }
+  }
+}
+:where(html) :where(dialog) {
+  background-color: var(--surface-1);
+}
+:where(html) :where(button, .btn) {
+  --_highlight: var(--_highlight-light);
+  --_bg: var(--_bg-light);
+  --_ink-shadow: var(--_ink-shadow-light);
+}
+:where(html) :where(button, .btn) :where([type="reset"]) {
+  --_text: var(--red-6);
+  --_border: var(--red-3);
+}
+:where(html)
+  :where(
+    button,
+    .btn,
+    input:is([type="button"], [type="submit"], [type="reset"])
+  )[disabled] {
+  --_text: var(--gray-6);
+}
+:where(html)
+  :where(
+    textarea,
+    select,
+    input:not([type="button"], [type="submit"], [type="reset"])
+  ) {
+  background-color: var(--surface-2);
+}
+@media (prefers-color-scheme: dark) {
+  :where(html) {
+    --link: var(--indigo-3);
+    --link-visited: var(--purple-3);
+    --text-1: var(--gray-1);
+    --text-2: var(--gray-4);
+    --surface-1: var(--gray-9);
+    --surface-2: var(--gray-8);
+    --surface-3: var(--gray-7);
+    --surface-4: var(--gray-6);
+    --scrollthumb-color: var(--gray-6);
+    --shadow-strength: 10%;
+    --shadow-color: 220 40% 2%;
+    color-scheme: dark;
+  }
+}
+:where(a[href]) {
+  color: var(--brand, var(--link));
+}
+:where(a[href]):where(:visited) {
+  color: var(--link-visited);
+}
+:focus-visible {
+  outline-color: var(--brand, var(--link));
+}
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+:where(:not(dialog)) {
+  margin: 0;
+}
+:where(:not(fieldset, progress, meter)) {
+  background-origin: border-box;
+  background-repeat: no-repeat;
+  border-style: solid;
+  border-width: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :where(html) {
+    scroll-behavior: smooth;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :where(:focus-visible) {
+    transition: outline-offset 145ms var(--ease-2);
+  }
+  :where(:not(:active):focus-visible) {
+    transition-duration: 0.25s;
+  }
+}
+:where(:not(:active):focus-visible) {
+  outline-offset: 5px;
+}
+:where(body) {
+  min-block-size: 100%;
+}
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+  font-weight: var(--font-weight-9);
+  line-height: var(--font-lineheight-1);
+}
+:where(h1) {
+  font-size: var(--font-size-8);
+  max-inline-size: var(--size-header-1);
+}
+:where(h2) {
+  font-size: var(--font-size-6);
+  max-inline-size: var(--size-header-2);
+}
+:where(h3) {
+  font-size: var(--font-size-5);
+}
+:where(h4) {
+  font-size: var(--font-size-4);
+}
+:where(h5) {
+  font-size: var(--font-size-3);
+}
+:where(h3, h4, h5, h6, dt) {
+  max-inline-size: var(--size-header-3);
+}
+:where(p, ul, ol, dl, h6) {
+  font-size: var(--font-size-2);
+}
+:where(a, u, ins, abbr) {
+  text-underline-offset: 1px;
+}
+@supports (-moz-appearance: none) {
+  :where(a, u, ins, abbr) {
+    text-underline-offset: 2px;
+  }
+}
+:where(
+    a[href],
+    area,
+    button,
+    input:not(
+        [type="text"],
+        [type="email"],
+        [type="number"],
+        [type="password"],
+        [type=""],
+        [type="tel"],
+        [type="url"]
+      ),
+    label[for],
+    select,
+    summary,
+    [tabindex]:not([tabindex*="-"])
+  ) {
+  cursor: pointer;
+}
+:where(
+    a[href],
+    area,
+    button,
+    input,
+    label[for],
+    select,
+    summary,
+    textarea,
+    [tabindex]:not([tabindex*="-"])
+  ) {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+:where(a):where([href]) {
+  text-decoration-color: var(--indigo-2);
+}
+:where(a):where([href]):where(:visited) {
+  text-decoration-color: var(--purple-2);
+}
+:where(a):where(:not(:hover)) {
+  text-decoration: inherit;
+}
+:where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+}
+:where(img, svg, video) {
+  block-size: auto;
+  max-inline-size: 100%;
+}
+:where(input, button, textarea, select),
+:where(input[type="file"])::-webkit-file-upload-button {
+  color: inherit;
+  font: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+}
+::placeholder {
+  color: var(--gray-7);
+  opacity: 0.75;
+}
+:where(input:not([type="range"]), textarea) {
+  padding-block: var(--size-1);
+  padding-inline: var(--size-2);
+}
+:where(select) {
+  padding-block: 0.75ch;
+  padding-inline: var(--size-relative-4) 0;
+}
+:where(
+    textarea,
+    select,
+    input:not([type="button"], [type="submit"], [type="reset"])
+  ) {
+  background-color: var(--surface-2);
+  border-radius: var(--radius-2);
+}
+:where(textarea) {
+  resize: block;
+}
+:where(input[type="checkbox"], input[type="radio"]) {
+  block-size: var(--size-3);
+  inline-size: var(--size-3);
+}
+:where(svg:not([width])) {
+  inline-size: var(--size-10);
+}
+:where(code, kbd, samp, pre) {
+  font-family: var(--font-monospace-code), monospace;
+}
+:where(:not(pre) > code, kbd) {
+  white-space: nowrap;
+}
+:where(pre) {
+  direction: ltr;
+  max-inline-size: max-content;
+  min-inline-size: 0;
+  white-space: pre;
+  writing-mode: lr;
+}
+:where(:not(pre) > code) {
+  background: var(--surface-2);
+  border-radius: var(--radius-2);
+  padding: var(--size-1) var(--size-2);
+  writing-mode: lr;
+}
+:where(kbd, var) {
+  border-color: var(--surface-4);
+  border-radius: var(--radius-2);
+  border-width: var(--border-size-1);
+  padding: var(--size-1) var(--size-2);
+}
+:where(mark) {
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-1);
+}
+:where(ol, ul) {
+  padding-inline-start: var(--size-8);
+}
+:where(li) {
+  padding-inline-start: var(--size-2);
+}
+:where(li, dd, figcaption) {
+  max-inline-size: var(--size-content-2);
+}
+:where(p) {
+  text-wrap: pretty;
+  max-inline-size: var(--size-content-3);
+}
+:where(dt, summary) {
+  font-weight: var(--font-weight-7);
+}
+:where(dt:not(:first-of-type)) {
+  margin-block-start: var(--size-5);
+}
+:where(small) {
+  font-size: max(0.5em, var(--font-size-0));
+  max-inline-size: var(--size-content-1);
+}
+:where(hr) {
+  background-color: var(--surface-3);
+  height: var(--border-size-2);
+  margin-block: var(--size-fluid-5);
+}
+:where(figure) {
+  display: grid;
+  gap: var(--size-2);
+  place-items: center;
+}
+:where(figure) > :where(figcaption) {
+  text-wrap: balance;
+  font-size: var(--font-size-1);
+}
+:where(blockquote, :not(blockquote) > cite) {
+  border-inline-start-width: var(--border-size-3);
+}
+:where(blockquote) {
+  display: grid;
+  gap: var(--size-3);
+  max-inline-size: var(--size-content-2);
+  padding-block: var(--size-3);
+  padding-inline: var(--size-4);
+}
+:where(:not(blockquote) > cite) {
+  padding-inline-start: var(--size-2);
+}
+:where(summary) {
+  background: var(--surface-3);
+  border-radius: var(--radius-2);
+  margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
+  padding: var(--size-2) var(--size-3);
+}
+:where(details) {
+  background: var(--surface-2);
+  border-radius: var(--radius-2);
+  padding-block: var(--size-2);
+  padding-inline: var(--size-3);
+}
+:where(details[open] > summary) {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  margin-bottom: var(--size-2);
+}
+:where(fieldset) {
+  border: var(--border-size-1) solid var(--surface-4);
+  border-radius: var(--radius-2);
+}
+:where(del) {
+  background: var(--red-9);
+  color: var(--red-2);
+}
+:where(ins) {
+  background: var(--green-9);
+  color: var(--green-1);
+}
+:where(abbr) {
+  text-decoration-color: var(--blue-5);
+}
+:where(dialog) {
+  background-color: var(--surface-1);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-6);
+  color: inherit;
+}
+:where(dialog)::backdrop {
+  backdrop-filter: blur(25px);
+}
+:where(html[\:has\(dialog\[open\]\)]) {
+  overflow: hidden;
+}
+:where(html:has(dialog[open])) {
+  overflow: hidden;
+}
+:where(menu) {
+  display: flex;
+  gap: var(--size-3);
+  padding-inline-start: 0;
+}
+:where(sup) {
+  font-size: 0.5em;
+}
+:where(table) {
+  --nice-inner-radius: calc(var(--radius-3) - 2px);
+  background: var(--surface-2);
+  border: 1px solid var(--surface-2);
+  border-radius: var(--radius-3);
+  width: fit-content;
+}
+:where(table[\:not-has\(tfoot\)] tr:last-child td:first-child) {
+  border-end-start-radius: var(--nice-inner-radius);
+}
+:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
+  border-end-start-radius: var(--nice-inner-radius);
+}
+:where(table[\:not-has\(tfoot\)] tr:last-child td:last-child) {
+  border-end-end-radius: var(--nice-inner-radius);
+}
+:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
+  border-end-end-radius: var(--nice-inner-radius);
+}
+:where(table thead tr:first-child th:first-child) {
+  border-start-start-radius: var(--nice-inner-radius);
+}
+:where(table thead tr:first-child th:last-child) {
+  border-start-end-radius: var(--nice-inner-radius);
+}
+:where(tfoot tr:last-child :is(th, td):first-of-type) {
+  border-end-start-radius: var(--nice-inner-radius);
+}
+:where(tfoot tr:last-child :is(th, td):last-of-type) {
+  border-end-end-radius: var(--nice-inner-radius);
+}
+:where(th) {
+  background-color: var(--surface-2);
+  color: var(--text-1);
+}
+:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
+  outline-offset: -2px;
+}
+:where(td) {
+  text-wrap: pretty;
+  background: var(--surface-1);
+  max-inline-size: var(--size-content-2);
+}
+:where(td, th) {
+  padding: var(--size-2);
+  text-align: left;
+}
+:where(:is(td, th):not([align])) {
+  text-align: center;
+}
+:where(thead) {
+  border-collapse: collapse;
+}
+:where(table tr:hover td),
+:where(tbody tr:nth-child(2n):hover td) {
+  background-color: var(--gray-10);
+}
+@media (prefers-color-scheme: light) {
+  :where(table tr:hover td),
+  :where(tbody tr:nth-child(2n):hover td) {
+    background-color: #fff;
+  }
+}
+:where(table > caption) {
+  margin: var(--size-3);
+}
+:where(tfoot button) {
+  padding-block: var(--size-1);
+  padding-inline: var(--size-3);
+}
+@media (prefers-color-scheme: dark) {
+  :where(
+      textarea,
+      select,
+      input:not([type="button"], [type="submit"], [type="reset"])
+    ) {
+    background-color: #171a1c;
+  }
+  :where(dialog) {
+    background-color: var(--surface-2);
+  }
+  ::placeholder {
+    color: var(--gray-6);
+  }
+}