katalyst-koi 4.18.1 → 5.0.0.alpha.2

data/app/assets/stylesheets/koi/global/global-styles.css

@@ -0,0 +1,297 @@
+/*
+  Global styles
+
+  Low-specificity, global styles that apply to the whole
+  project: https://cube.fyi/css.html
+*/
+
+body {
+  background: var(--color-light);
+  color: var(--color-dark);
+  font-size: var(--size-step-0);
+  font-family: var(--font-base);
+  line-height: var(--leading-standard);
+  font-size-adjust: from-font;
+  margin: 0;
+}
+
+main {
+  container-type: inline-size;
+}
+
+/* Headings */
+
+:is(h1, h2, h3, h4) {
+  line-height: var(--leading-fine);
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: var(--size-step-5);
+  max-width: 20ch;
+}
+
+h2 {
+  font-size: var(--size-step-4);
+  max-width: 35ch;
+}
+
+h3 {
+  font-size: var(--size-step-3);
+  max-width: 35ch;
+}
+
+:is(h4, h5, h6) {
+  font-size: var(--size-step-2);
+}
+
+small {
+  font-size: var(--size-step--1);
+}
+
+ins {
+  text-decoration: none;
+  background: var(--color-primary);
+  color: var(--color-light);
+  padding-inline: 0.3em;
+}
+
+/* Code */
+
+:is(code, kbd, samp) {
+  font-family: var(--font-mono);
+  padding: 0.2em 0.2em 0.05em 0.2em;
+  hyphens: none;
+  tab-size: 2;
+  text-align: left;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  box-decoration-break: clone;
+}
+
+/* This is quite a new property, so we want code styles to at least, not be huge or tiny */
+@supports not (font-size-adjust: from-font) {
+  :is(code, kbd, samp) {
+    font-size: 0.8em;
+  }
+}
+
+pre:has(code) {
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+pre code {
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+kbd {
+  border: none;
+  outline: 1px solid;
+  padding-block-end: 0.1em;
+}
+
+var {
+  font-style: normal;
+  font-weight: var(--font-medium);
+}
+
+q {
+  font-style: italic;
+}
+
+/* Lists */
+
+ul:not([class]) {
+  padding-inline-start: 1.7ch;
+  list-style-type: disc;
+}
+
+ul:not([class]) > li {
+  padding-inline-start: var(--space-xs);
+}
+
+:is(ol, ul):not([class]) li + * {
+  margin-block-start: var(--flow-space, var(--space-xs));
+}
+
+ul ::marker {
+  font-size: 0.8lh;
+}
+
+ol ::marker {
+  font-size: 1em;
+  font-weight: var(--font-bold);
+}
+
+/* Lists with classes and roles will be out of standard flow, so remove the default spacing */
+[role="list"],
+[role="tablist"] {
+  margin-block: 0;
+  padding: 0;
+}
+
+dt {
+  font-weight: var(--font-medium);
+}
+
+dt + dd {
+  margin-block-start: var(--space-xs);
+}
+
+dd + dt {
+  margin-block-start: var(--space-s);
+}
+
+dd {
+  margin-inline-start: 1.5ch;
+}
+
+/* Blockquotes */
+
+blockquote {
+  margin-inline: 0;
+  color: var(--color-primary);
+}
+
+blockquote footer {
+  margin-block-start: var(--space-s);
+  color: var(--color-mid);
+  font-size: var(--size-step--1);
+}
+
+blockquote q {
+  font-style: normal;
+}
+
+/* Media */
+
+:is(video, iframe[src*="youtube"], iframe[src*="vimeo"]) {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+
+figcaption {
+  padding-block-start: 0.5em;
+  font-size: var(--size-step--1);
+  font-family: monospace;
+}
+
+/* Tables */
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--font-bold);
+  line-height: var(--leading-fine);
+}
+
+thead th {
+  padding-block: var(--space-s);
+}
+
+td,
+th {
+  vertical-align: top;
+  padding: var(--space-xs) var(--space-s);
+  box-shadow: inset 0 -1px 0 var(--color-tint);
+}
+
+caption {
+  caption-side: bottom;
+  margin-block-start: var(--space-s);
+}
+
+/* Interactions */
+
+a:not([class]):hover {
+  text-underline-offset: 0.2lh;
+}
+
+:is(h1, h2, h3, h4) a:not([class]) {
+  text-decoration-thickness: 0.1ex;
+  text-underline-offset: 0.2ex;
+}
+
+:is(h1, h2, h3, h4) a:not([class]):hover {
+  text-underline-offset: 0.3ex;
+}
+
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-color, currentColor);
+  outline-offset: var(--focus-offset, 0.1lh);
+}
+
+/*
+ * Firefox is the only browser that doesn't outline the whole element unless you
+ * make it display: inline-block. That in itself causes multiple flow issues so
+ * we can detect it, using its own vendor prefix and reduce focus offset.
+ */
+@supports (-moz-appearance: none) {
+  :root {
+    --focus-offset: 0.08em;
+  }
+}
+
+:target {
+  scroll-margin-block: 5lh;
+}
+
+::selection {
+  color: var(--color-light);
+  background: var(--color-primary);
+}
+
+/* Misc elements */
+
+hr {
+  border: none;
+  border-block-start: var(--stroke);
+  margin-block: var(--flow-space, var(--space-xl));
+}
+
+svg:not([class]) {
+  width: auto;
+  height: 1lh;
+}
+
+svg {
+  flex-shrink: 0;
+}
+
+svg[role="img"][width][height] {
+  width: revert;
+  height: revert;
+  padding: var(--space-xs);
+}
+
+/* Details, summary */
+
+summary {
+  font-weight: var(--font-bold);
+  cursor: pointer;
+}
+
+details[open] summary {
+  margin-block-end: var(--space-s);
+}

data/app/assets/stylesheets/koi/global/reset.css

@@ -0,0 +1,98 @@
+/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+  text-underline-offset: 0.1lh;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

data/app/assets/stylesheets/koi/global/variables.css

@@ -0,0 +1,97 @@
+/* Koi colours */
+:root {
+  --color-dark: #333;
+  --color-dark-glare: #555;
+  --color-mid: #9ca3af;
+  --color-light: #ffffff;
+  --color-primary: #266dd3;
+  --color-tint: #f0ecf3;
+  --focus-color: #fd0;
+
+  /* alerts */
+  --color-success: #129d7f;
+  --color-warning: #ffc759;
+  --color-alert: #ea3946;
+  --color-notice: #2563eb;
+}
+
+:root {
+  --gutter: var(--space-m-l);
+  --transition-base: 250ms ease;
+  --transition-movement: 200ms linear;
+  --transition-fade: 300ms ease;
+  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
+  --stroke: 1px solid var(--color-tint);
+  --radius-s: 0.2rem;
+  --radius-m: 0.75rem;
+  --radius-l: 2.5rem;
+  --uppercase-kerning: 0.04ch;
+}
+
+/* Font sizes */
+/* @link https://utopia.fyi/type/calculator?c=600,14,1.2,1600,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+
+:root {
+  /* Step -2: 9.7222px → 10.24px */
+  --size-step--2: clamp(0.6076rem, 0.5882rem + 0.0518vw, 0.64rem);
+  /* Step -1: 11.6667px → 12.8px */
+  --size-step--1: clamp(0.7292rem, 0.6867rem + 0.1133vw, 0.8rem);
+  /* Step 0: 14px → 16px */
+  --size-step-0: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
+  /* Step 1: 16.8px → 20px */
+  --size-step-1: clamp(1.05rem, 0.93rem + 0.32vw, 1.25rem);
+  /* Step 2: 20.16px → 25px */
+  --size-step-2: clamp(1.26rem, 1.0785rem + 0.484vw, 1.5625rem);
+  /* Step 3: 24.192px → 31.25px */
+  --size-step-3: clamp(1.512rem, 1.2473rem + 0.7058vw, 1.9531rem);
+  /* Step 4: 29.0304px → 39.0625px */
+  --size-step-4: clamp(1.8144rem, 1.4382rem + 1.0032vw, 2.4414rem);
+  /* Step 5: 34.8365px → 48.8281px */
+  --size-step-5: clamp(2.1773rem, 1.6526rem + 1.3992vw, 3.0518rem);
+}
+
+/* Fluid spacing */
+/* @link https://utopia.fyi/space/calculator?c=600,14,1.2,1600,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+
+:root {
+  /* Space 3xs: 4px → 4px */
+  --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
+  /* Space 2xs: 7px → 8px */
+  --space-2xs: clamp(0.4375rem, 0.4rem + 0.1vw, 0.5rem);
+  /* Space xs: 11px → 12px */
+  --space-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
+  /* Space s: 14px → 16px */
+  --space-s: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
+  /* Space m: 21px → 24px */
+  --space-m: clamp(1.3125rem, 1.2rem + 0.3vw, 1.5rem);
+  /* Space l: 28px → 32px */
+  --space-l: clamp(1.75rem, 1.6rem + 0.4vw, 2rem);
+  /* Space xl: 42px → 48px */
+  --space-xl: clamp(2.625rem, 2.4rem + 0.6vw, 3rem);
+  /* Space 2xl: 56px → 64px */
+  --space-2xl: clamp(3.5rem, 3.2rem + 0.8vw, 4rem);
+  /* Space 3xl: 84px → 96px */
+  --space-3xl: clamp(5.25rem, 4.8rem + 1.2vw, 6rem);
+
+  /* One-up pairs */
+  /* Space 3xs-2xs: 4px → 8px */
+  --space-3xs-2xs: clamp(0.25rem, 0.1rem + 0.4vw, 0.5rem);
+  /* Space 2xs-xs: 7px → 12px */
+  --space-2xs-xs: clamp(0.4375rem, 0.25rem + 0.5vw, 0.75rem);
+  /* Space xs-s: 11px → 16px */
+  --space-xs-s: clamp(0.6875rem, 0.5rem + 0.5vw, 1rem);
+  /* Space s-m: 14px → 24px */
+  --space-s-m: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
+  /* Space m-l: 21px → 32px */
+  --space-m-l: clamp(1.3125rem, 0.9rem + 1.1vw, 2rem);
+  /* Space l-xl: 28px → 48px */
+  --space-l-xl: clamp(1.75rem, 1rem + 2vw, 3rem);
+  /* Space xl-2xl: 42px → 64px */
+  --space-xl-2xl: clamp(2.625rem, 1.8rem + 2.2vw, 4rem);
+  /* Space 2xl-3xl: 56px → 96px */
+  --space-2xl-3xl: clamp(3.5rem, 2rem + 4vw, 6rem);
+
+  /* Custom pairs */
+  /* Space s-l: 14px → 32px */
+  --space-s-l: clamp(0.875rem, 0.2rem + 1.8vw, 2rem);
+}

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

@@ -0,0 +1,14 @@
+[data-icon="add"] {
+  -webkit-mask: url("icons/add.svg");
+  mask: url("icons/add.svg");
+}
+
+[data-icon="close"] {
+  -webkit-mask: url("icons/close.svg");
+  mask: url("icons/close.svg");
+}
+
+[data-icon="koi"] {
+  -webkit-mask: url("koi.png") center/cover no-repeat;
+  mask: url("koi.png") center/cover no-repeat;
+}

data/app/assets/stylesheets/koi/index.css

@@ -0,0 +1,17 @@
+@import url("global/reset.css");
+@import url("global/fonts.css");
+
+@import url("/katalyst/content/editor.css");
+@import url("/katalyst/navigation.css");
+@import url("/katalyst/tables.css");
+
+@import url("global/variables.css");
+@import url("global/global-styles.css");
+
+@import url("forms/index.css");
+
+@import url("compositions/index.css");
+@import url("utilities/index.css");
+@import url("blocks/index.css");
+
+@import url("icons.css");

data/app/assets/stylesheets/koi/login.css

@@ -0,0 +1,26 @@
+.login {
+  header {
+    display: grid;
+    grid-template-areas: "logo header" "logo site-name";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+    column-gap: var(--space-m);
+  }
+
+  h1 {
+    grid-area: header;
+    font-weight: var(--font-light);
+  }
+
+  h2 {
+    grid-area: site-name;
+    font-weight: var(--font-medium);
+    font-size: var(--size-m);
+  }
+
+  img {
+    max-height: 4rem;
+    grid-area: logo;
+    align-self: center;
+  }
+}

data/app/assets/stylesheets/koi/utilities/index.css

@@ -0,0 +1 @@
+@import url("visually-hidden.css");

data/app/assets/stylesheets/koi/utilities/visually-hidden.css

@@ -0,0 +1,18 @@
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+/* data-controller="show-hide" */
+[data-collapsed] {
+  max-height: 0;
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}

data/app/components/concerns/koi/tables/cells.rb

@@ -19,12 +19,12 @@ module Koi
       # @return [void]
       #
       # @example Render a column containing the record's title, linked to its show page
-      #   <% row.link :title %> # => <td><a href="/admin/post/15">About us</a></td>
+      #   <% row.link :title %> # => <td><a href="/admin/page/15">About us</a></td>
       # @example Render a column containing the record's title, linked to its edit page
-      #   <% row.link :title, url: :edit_admin_post_path do |cell| %>
+      #   <% row.link :title, url: :edit_admin_page_path do |cell| %>
       #      Edit <%= cell %>
       #   <% end %>
-      #   # => <td><a href="/admin/post/15/edit">Edit About us</a></td>
+      #   # => <td><a href="/admin/page/15/edit">Edit About us</a></td>
       def link(column, label: nil, heading: false, url: (default_url = true), link: {}, **, &)
         with_cell(Tables::Cells::LinkComponent.new(
                     collection:, row:, column:, record:, label:, heading:, url:, default_url:, link:, **,

data/app/components/koi/header_component.html.erb

@@ -1,16 +1,17 @@
-<% content_for :title, @title %>
-<header>
-  <h1 class="heading"><%= @title %></h1>
-
-  <div class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
+<% if breadcrumbs? %>
+  <%= breadcrumb_list do %>
     <% breadcrumbs.each do |breadcrumb| %>
-      <%= breadcrumb %>
+      <li><%= breadcrumb %></li>
     <% end %>
-  </div>
+  <% end %>
+<% end %>
+
+<h1><%= @title %></h1>
 
-  <div class="actions" role="navigation" aria-label="Related pages">
+<% if actions? %>
+  <%= actions_list do %>
     <% actions.each do |action| %>
-      <%= action %>
+      <li><%= action %></li>
     <% end %>
-  </div>
-</header>
+  <% end %>
+<% end %>

data/app/components/koi/header_component.rb

@@ -2,6 +2,8 @@
 
 module Koi
   class HeaderComponent < ViewComponent::Base
+    include HeaderHelper
+
     renders_many :actions, "LinkComponent"
     renders_many :breadcrumbs, "LinkComponent"
 

data/app/components/koi/table_component.rb

@@ -3,5 +3,13 @@
 module Koi
   class TableComponent < Katalyst::TableComponent
     include Tables::Cells
+
+    def output_preamble
+      '<div class="table-container">'.html_safe + super
+    end
+
+    def output_postamble
+      super + "</div>".html_safe
+    end
   end
 end