clairity.css 0.1.0

data/lib/assets/css/clairity/utilities.css

@@ -0,0 +1,68 @@
+/******************************************************************************\
+  UTILITIES - a limited set of utilities that can override all the other styles
+              that precede them. use sparingly and mindfully. these usually do 
+              only one or two things. [0010] specificity unless otherwise noted.
+\******************************************************************************/
+
+/* #visually-hidden - provide non-visual information semantically & accessibly*/
+/* :not() with a selection list has poor backwards compatibility as of 2022, so 
+   use separate :not() clauses for now */
+.visually-hidden:not(:focus):not(:active):not(:focus-within) { /* ie9+ */
+  position:               absolute;
+  width:                  1px;
+  height:                 1px;
+  overflow:               hidden;
+  clip:                   rect(0 0 0 0);
+  white-space:            nowrap;
+  margin:                 -1;
+  padding:                0;
+  border:                 0;
+}
+
+
+/* -----------------------------------------------------------------------------
+//  #containers - 
+// -------------------------------------------------------------------------- */
+
+/* generic container class for container queries. only supported in 
+   safari 16+ and chrome 93+ behind a flag - EXPERIMENTAL */
+.container { container:   inline-size / container; }
+
+
+/* -----------------------------------------------------------------------------
+//  #positioning - visual utilities to place items in certain relative locations
+// -------------------------------------------------------------------------- */
+
+/* override display mode to be block */
+.block { display:         block; }
+
+/* horizontally center text and menu items */
+.centered       { text-align:       center; }
+.centered menu  { justify-content:  center; }           /* [0011] specificity */
+
+/* flex positioning utilities */
+.center { justify-content: center;   }
+.right  { justify-content: flex-end; }
+
+
+/* -----------------------------------------------------------------------------
+//  #borders & #shadows - container boundary utlities
+// -------------------------------------------------------------------------- */
+
+.shadow { box-shadow:     var(--shadow) var(--300); }
+
+
+form.button_to {
+  width:                  min-content;
+}
+
+form.button_to > [type="submit"] {
+  width:                  max-content;
+}
+
+/* -----------------------------------------------------------------------------
+//  #clairity - special font just for fun
+// -------------------------------------------------------------------------- */
+.clairity { font-family:  Corbel, "Lucida Grande", "Lucida Sans Unicode", 
+                          "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", 
+                          "Liberation Sans", Verdana, "Verdana Ref",sans-serif;}

data/lib/assets/css/clairity/variables.css

@@ -0,0 +1,301 @@
+/******************************************************************************\
+  CSS VARIABLES - these are global params that you may want to edit to match
+                  the style of your site
+                  
+                  Support for CSS variables (custom properties) goes back at
+                  least 5 years for the major browsers and cover about 95% of 
+                  global users, but we're implicitly eschewing IE here, as it 
+                  never supported CSS variables.
+
+  * First we define our primitive CSS variable values, and then we assign those
+    to logical variables that can be used in different color schemes and media
+    preferences without having to do the mapping in our main stylesheet.
+  * We take the strategy of defining default values for properties using the
+    same name as the property, so for font-size, we'll use --font-size. We'll 
+    avoid prefixes & compound names as much as possible to keep variable names 
+    as short as possible. The most notable exception is the use of bg- for 
+    background colors harmonious with their foreground counterparts. In general,
+    shorter names will be used first for more common variables, while less 
+    common variables might get longer names if a conflict arises. color and 
+    spacing variables tend to be used the most, so these get preferential 
+    treatment (shorter, single-word names).
+  * Since palette.css is optional, we declare color-scheme here rather than in
+    that file, and we use system colors here as a fallback as well.
+\******************************************************************************/
+
+/* :root rather than html so other doctypes like svg can use these variables  */
+:root {
+
+  color-scheme:           light dark;         /* list allowable color schemes */
+
+
+  /* ---------------------------------------------------------------------------
+  //  #layout - custom lengths for layouts and containers
+  // ------------------------------------------------------------------------ */
+
+  --view-height:          100vh;          /* use 100dvb when widely supported */
+  --line-length:          min(80ch, 100%);                 /* for readability */
+
+  /* breakpoints - for grid/flex/container queries; try to avoid media queries*/
+  --column:               min(41vw, 10rem);     /* allows 2 cols @ 320px wide */
+  --container:            18ch;              /* standard width of a container */
+
+  /* form fields */
+  --width:                16ch;     /* ch-based to show enough chars in field */
+  --height:               2.5rem;   /* em-based to scale with field text size */
+  --field-max:            min(47ch, 100%);  /* to accommodate smaller screens */
+
+
+  /* ---------------------------------------------------------------------------
+  //  #font - font families, sizes, weights, and line heights
+  // ------------------------------------------------------------------------ */
+
+  /* font families */
+  --sans-serif:           system-ui, Helvetica, "Helvetica Neue", "Avenir Next",
+                          Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", 
+                          Arial, sans-serif;
+  --serif:                "Times New Roman", "Times", serif;
+  --monospace:            Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono",
+                          monospace;
+
+  /* font sizes - rem-based to be responsive but disregard nesting; em/rem-based
+                fonts scale with the user's zoom level, unlike px-based values*/
+  --tiny:                 0.75rem;
+  --small:                0.875rem;
+  --medium:               1rem;
+  --large:                1.2rem;
+  --huge:                 1.5rem;
+  /* #em - contextually relative font sizes */
+  --smallest:             0.5em;
+  --smaller:              0.75em;
+  --initial:              1em;
+  --larger:               1.25em;
+  --largest:              1.5em;
+
+  /* font weights - the scale can be adjusted up and down as desired */
+  --lightest:             100;
+  --lighter:              200;
+  --light:                300;
+  --regular:              400;
+  --bold:                 500;
+  --bolder:               600;
+  --boldest:              700;
+
+  /* Line heights - unitless distance between lines of text */
+  --normal:               1.45;         /* 1.2 is the typical browser default */
+  --compact:              1.2;
+  --relaxed:              1.8;
+
+
+  /* ---------------------------------------------------------------------------
+  //  #spacing #sizing #positioning - margin/padding scales, custom spaces/sizes
+  // ------------------------------------------------------------------------ */
+
+  /* space scale - rem-based to be relative to html root, not element, font size
+        these oft-used variables employ t-shirt sizing for the shortest names */
+  --xxs:                  0.125rem;
+  --xs:                   0.25rem;
+  --s:                    0.5rem;
+  --ms:                   0.75rem;
+  --m:                    1rem;
+  --ml:                   1.5rem;
+  --l:                    2rem;
+  --xl:                   4rem;
+  --xxl:                  8rem;
+
+  /* contextual spacing - mainly for headers & icons among surrounding content*/
+/*--margin:               var(--ml) 0 var(--m);*/                /* rem-based */
+  --margin:               var(--initial) 0 var(--smallest);       /* em-based */
+  --inline-padding:       0 var(--ms) var(--xxs) var(--ms);
+  --button-padding:       var(--s) var(--ms);
+
+  /* background icon sizes - purposefully em-based to fit context */
+  --text-icon:            1em 1em;
+  --field-icon:           1.5em 1.5em;
+
+  /* background positions */
+  --center-left:          0rem 50%;
+  --center-right:         100% 50%;
+  --padded-center-left:   0.5em 50%;
+  --padded-center-right:  calc(100% + 0.5em) 50%;
+
+
+  /* ---------------------------------------------------------------------------
+  //  #border #shadow - 
+  // ------------------------------------------------------------------------ */
+
+  /* line/border thicknesses - px-based since these are screen-oriented */
+  --thinnest:             0.33px;
+  --thinner:              0.5px;
+  --thin:                 0.75px;
+  --stroke:               1px;
+  --thick:                2px;
+  --thicker:              3px;
+  --thickest:             5px;
+
+  /* radii */
+  --radius:               4px;                      /* standard border radius */
+  --circle:               50%;            /* border radius to create a circle */
+
+  /* borders - use in conjunction with a border color */
+  --solid:                var(--stroke) solid;
+  --fat:                  var(--thicker) solid;
+  --dashed:               var(--stroke) dashed;
+  --dotted:               var(--stroke) dotted;
+
+  /* shadows - use in conjunction with a shadow color */
+  --inset:                inset 0 0 0 0.185rem;
+  --groove:               inset 0 var(--thick) var(--thickest);
+  --shadow:               0 var(--thick) var(--thickest);
+
+
+  /* ---------------------------------------------------------------------------
+  //  #duration - for transitions
+  // ------------------------------------------------------------------------ */
+
+  --fastest:              150ms;
+  --fast:                 250ms;
+  --transition:           300ms;
+  --slow:                 400ms;
+  --slowest:              500ms;
+
+
+  /* ---------------------------------------------------------------------------
+  //  #color mappings - maps palette colors to semantic variables
+  // ------------------------------------------------------------------------ */
+
+  /* transparencies - fallback to grayscale if primary is not set */
+  --pale:                 var(--primary-200, hsl(210, 0%, 45%, 0.2) );
+  --translucent:          var(--primary-transparent,hsl(210, 0%, 45%, 0.1));
+  --transparent:          hsl(0, 0%, 45%, 0.05);
+  
+  /* Absolute text colors - doesn't change with color scheme */
+  --whitish:              var(--100, snow);
+  --blackish:             var(--900, darkslategrey);
+
+  /* Logical text colors - depends on color-scheme - dark on light is default */
+  --text:                 var(--700, CanvasText);       /* default text color */
+  --heading:              var(--primary-700, LinkText);       /* heading text */
+  --heading-inverse:      var(--primary-bright, dodgerblue);
+  /* semantically relative text colors */
+  --distinct:             var(--secondary-700, firebrick);
+  --inverse:              var(--100, Canvas);      /* for inverted light/dark */
+  --loud:                 var(--primary-800, --800);   /* higher gravity text */
+  --muted:                var(--700, GrayText);         /* for secondary text */
+  --inactive:             var(--500, GrayText);       /* for deactivated text */
+  --mark:                 var(--100, Canvas);      /* MarkText is unsupported */
+
+  /* Logical link colors - features our primary color because it's blue */
+  --link:                 var(--primary, LinkText);
+  --visited:              var(--primary-700, VisitedText);
+  --active:               var(--primary-500, ActiveText);
+
+  /*Other system text colors - currently unused, but included for completeness*/
+  --field:                var(--900, FieldText);
+  --action:               var(--100, ButtonText);
+  --highlight:            var(--100, HighlightText);
+  /* SelectedItemText is unsupported in safari/chrome, so we don't use it here*/
+  --select:               var(--100, Canvas);              /* checkbox/select */
+
+  /* Logical foreground color - for featuring key elements like buttons/inputs, 
+     closely related to the built-in accent-color. accent-color is currently 
+     only used to style range elements. checkboxes, radio buttons, and progress 
+      bars are other options stylable by accent-color, but all are restyled. */
+  --foreground:           var(--primary, LinkText);    /* for primary actions */
+  accent-color:           var(--primary);     /* has its own default fallback */
+
+  /* Logical selection colors - for selects, checkboxes, and radio buttons. 
+     unselected text & background are inherited/default */
+  /* SelectedItem is unsupported in safari/chrome, so we don't use it here    */
+  --checked:              var(--foreground);            /* checked / selected */
+  --unchecked:            var(--bg-field);           /* to ensure consistency */
+  --deactivated:          var(--300, ButtonFace);   /* selected but unfocused */
+  --contrast:             var(--primary-200, azure);       /* slight contrast */
+
+  /* Logical background colors - prefixed with bg- to show strong relationship 
+     with corresponding text color (i.e., they're meant to be used together)  */
+  --background:           Canvas;                 /* primary background color */
+  --bg-field:             Field;                    /* field background color */
+  --bg-distinct:          var(--secondary-100, lavenderblush);   /* stand out */
+  --bg-inverse:           var(--900, CanvasText);    /* for inverted contexts */
+  --bg-highlight:         var(--primary-600, Highlight);   /* for relating
+                          prospective action/relevance - hovering for example */
+  --bg-contrast:          var(--200, ButtonFace);    /* slight contrast color */
+  --bg-inactive:          var(--300, ButtonFace);    /* for disabled elements */
+  --bg-mark:              var(--primary-bright, LinkText); /* the Mark system
+                  color is not supported yet, so use another fallback instead */
+
+  /* Logical border colors */
+  --border:               var(--500, GrayText);                    /* default */
+  --emphasized:           var(--600, GrayText);       /* darkens to emphasize */
+  --deemphasized:         var(--300, ButtonFace);  /* lightens to deemphasize */
+  --highlighted:          var(--primary, LinkText);      /* make it stand out */
+  --marked:               var(--primary-bright, LinkText);         /* no Mark */
+  --distinguished:        var(--secondary-300, palevioletred);   /* stand out */
+
+  /* default color of icons - change it by redefining this in a given scope   */
+  --icon-color:           var(--border);
+  --icon-blend-mode:      lighten, difference;
+}
+
+/* backdrops don't inherit anything, including from :root/html */
+:root, ::backdrop {
+  --backdrop:             hsl(0, 0%, 5%, 50%);   /* backdrop color for modals */
+}
+
+/* -----------------------------------------------------------------------------
+//  #dark mode - adjustments to the semantic color variables for dark mode
+// -------------------------------------------------------------------------- */
+
+@media (prefers-color-scheme: dark) {
+:root {
+  /* Calculated colors */
+  /* CSS relative colors, once implemented, can be used to generate these     */
+  --error-high:           hsl(var(--red),     100%, 67%);
+  --error-low:            hsl(var(--red),      80%, 60%);
+  /* Logical text colors */
+  --text:                 var(--100, CanvasText);       /* primary text color */
+  --heading:              var(--primary-bright, dodgerblue); /* LinkText is too
+                                                        dark on chrome/safari */
+  --distinct:             var(--secondary-100, lavenderblush);
+  --inverse:              var(--900, Canvas);      /* for inverted light/dark */
+  --loud:                 var(--primary-300, --300);   /* higher gravity text */
+  --muted:                var(--400, GrayText);         /* for secondary text */
+  --inactive:             var(--600, ButtonText);
+  --mark:                 var(--100, CanvasText);  /* MarkText is unsupported */
+  /* Logical link colors - features our primary color because it's blue       */
+  --link:                 var(--primary-500, dodgerblue); /* LinkText is too
+                                                        dark on chrome/safari */
+  --visited:              var(--primary-600, mediumorchid);
+  --active:               var(--primary-400, ActiveText);
+  --action:               ButtonText;
+  /* Logical foreground colors */
+  --contrast:             var(--primary-900, GrayText); /* for inverted 
+                                                                  hover/zebra */
+  --deactivated:          var(--700);     /* disabled, selected checks/radios */
+  /* Logical background colors */
+  --background:           Canvas;
+  --bg-distinct:          var(--secondary, palevioletred);
+  --bg-inverse:           var(--100, CanvasText);
+  --bg-highlight:         var(--primary-600, ActiveText);
+  --bg-contrast:          var(--900, Field);
+  --bg-inactive:          var(--700, GrayText);
+  /* Logical border colors */
+  --emphasized:           var(--100);                /* lightens to emphasize */
+  --deemphasized:         var(--700, ButtonFace);   /* darkens to deemphasize */
+
+  --icon-color:           var(--500);
+  --icon-blend-mode:      darken, normal;
+}}
+
+/* Safari has poor support for CSS system colors, so compensate for it for now;
+   Safari TP has experimental support for color-contrast() however */
+@supports (color: color-contrast(white vs white, black)) {
+:root {
+  /*--action:               var(--100, color-contrast(var(--foreground) vs*/
+                                                       /*Canvas, ButtonText));*/
+}}
+@supports (background-color: -apple-system-control-background) {
+:root {
+  --bg-field:             -apple-system-control-background;
+}}

data/lib/assets/css/clairity.basic.css

@@ -0,0 +1,28 @@
+/******************************************************************************\
+  BASIC - This is a variation of clairity.css that only includes the most basic
+          elemental styles. Use this as a classless base for creating simple, 
+          content-oriented, semantic web pages, or as a jumping off point for
+          your own css framework
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  01 settings - uses only CSS variables and no CSS preprocessor. variables
+//      and the palette can each (or both) be wholesale replaced if desired.
+// -------------------------------------------------------------------------- */
+
+/* variables - REQUIRED - core css variables, color mappings, and fallbacks   */
+@import "clairity/variables.css";
+
+/* palette - if not included, use system colors as defined in variables.css   */
+/*@import "clairity/palette.css";*/
+
+
+/* -----------------------------------------------------------------------------
+//  04 elements - base, elemental styling, but no classes or components.
+//      
+// -------------------------------------------------------------------------- */
+
+/* base - REQUIRED - styles for all base html elements as well as common 
+    pseudo-elements and pseudo-classes */
+@import "clairity/base.css";

data/lib/assets/css/clairity.classless.css

@@ -0,0 +1,50 @@
+/******************************************************************************\
+  CLASSLESS - This variation of clairity.css extends clairity.basic.css with
+              cosmetic enhancements, but remains classless, except for a few
+              optional header (functions.css) classes (.h1, .h2, .h3, etc.).
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  01 settings - uses only CSS variables and no CSS preprocessor. variables
+//      and the palette can each (or both) be wholesale replaced if desired.
+// -------------------------------------------------------------------------- */
+
+/* variables - REQUIRED - core css variables, color mappings, and fallbacks   */
+@import "clairity/variables.css";
+
+/* palette is optional - if not defined, clairity.css will use system colors */
+@import "clairity/palette.css";
+
+
+/* -----------------------------------------------------------------------------
+//  02 tools - for mixins and functions, but not via any CSS preprocessor.
+// -------------------------------------------------------------------------- */
+
+/* functions - css variables acting as functions, such as for fluid typography*/
+@import "clairity/functions.css";
+
+/* icons - an optional svg icon set                                           */
+@import "clairity/icons.css";
+
+
+/* -----------------------------------------------------------------------------
+//  04 elements - base, elemental styling, but no classes or components.
+//      
+// -------------------------------------------------------------------------- */
+
+/* base - REQUIRED - styles for all base html elements as well as common 
+    pseudo-elements and pseudo-classes */
+@import "clairity/base.css";
+
+/* cosmetic - optional - multi-element cosmetic fixes beyond the scope of base*/
+@import "clairity/cosmetic.css";
+
+
+/* -----------------------------------------------------------------------------
+//  05 objects - pseudo-classes with more personality than the base.
+//  
+// -------------------------------------------------------------------------- */
+
+/* states - primarily higher specificity pseudo-classes for the base elements */
+@import "clairity/states.css";

data/lib/assets/css/clairity.css

@@ -0,0 +1,109 @@
+/******************************************************************************\
+  IMPORTS - clairity.css is a simple, semantic html-first design 
+            system-in-the-making. For modularilty, we loosely follow the ITCSS
+            organizational method. This file imports the various layers of 
+            the system as individual files. We don't get dogmatic about this 
+            structure however, and eschew rigid naming conventions like BEM or
+            verbose utility-first approaches like Tailwind.
+
+            Note that we're starting with the cutting-edge of CSS features, so
+            we'll support browsers from early 2020 and forward. That means no
+            IE support at all. We'll add *some* graceful degradation for older
+            browsers in legacy.css, and older markup techniques in shims.css.
+
+            variables.css and base.css form the core of clairity.css so are 
+            de facto required, otherwise you may as well use another system or 
+            build your own. anything else can be removed/replaced as desired.
+            The layers are each meant to progressively enhance anything prior,
+            so feel free to use as much or as little as you'd like. Customize
+            clairity.css by creaing your own css import file (e.g., "style.css")
+            and importing only the css component files you want.
+\******************************************************************************/
+
+
+/* -----------------------------------------------------------------------------
+//  00 css cascade layers - NOTE: firefox 100 dev tools breaks on layers.
+// -------------------------------------------------------------------------- */
+
+/*@layer clairity.settings, clairity.tools, clairity.generic, clairity.elements,
+        clairity.objects, clairity.components, clairity.utilities;*/
+
+
+/* -----------------------------------------------------------------------------
+//  01 settings - uses only CSS variables, and no CSS preprocessor. variables
+//      and the palette can each (or both) be wholesale replaced if desired.
+// -------------------------------------------------------------------------- */
+
+/* variables - REQUIRED - core css variables, color mappings, and fallbacks   */
+@import "clairity/variables.css";/* layer(clairity.settings);*/
+
+/* palette (optional)- if unavailable, uses system colors defined in variables*/
+@import "clairity/palette.css";/* layer(clairity.settings);*/
+
+
+/* -----------------------------------------------------------------------------
+//  02 tools - for mixins and functions, but not via any CSS preprocessor.
+// -------------------------------------------------------------------------- */
+
+/* functions - css variables acting as functions, such as for fluid typography*/
+@import "clairity/functions.css";/* layer(clairity.tools);*/
+
+/* icons - an optional svg icon set                                           */
+@import "clairity/icons.css";/* layer(clairity.tools);*/
+
+
+/* -----------------------------------------------------------------------------
+//  03 generic - the normalization/reset layer - a few essential styles from 
+//      this layer are integrated into base.css, as noted in that file.
+// -------------------------------------------------------------------------- */
+
+/* normalize.css - optional - "a modern alternative to CSS resets"            */
+/*@import "clairity/normalize.css";*//* layer(clairity.generic); */
+
+
+/* -----------------------------------------------------------------------------
+//  04 elements - default styling for all the base elements - cosmetic.css adds
+//      a few visual niceties.
+// -------------------------------------------------------------------------- */
+
+/* base - styles for all base html elements & common pseudo-elements/-classes */
+@import "clairity/base.css";/* layer(clairity.elements);*/
+
+/* cosmetic - optional - multi-element cosmetic fixes beyond the scope of base*/
+@import "clairity/cosmetic.css";/* layer(clairity.elements);*/
+
+
+/* -----------------------------------------------------------------------------
+//  05 objects - classes & pseudo-classes with more personality than the base.
+//      This is where we move beyond the classlessness of the base clairity.css.
+// -------------------------------------------------------------------------- */
+
+/* states - primarily higher specificity pseudo-classes for the base elements */
+@import "clairity/states.css";/* layer(clairity.objects);*/
+
+/* classes - provide alternate stylings for elements via class declarations */
+@import "clairity/classes.css";/* layer(clairity.objects);*/
+
+
+/* -----------------------------------------------------------------------------
+//  06 components - common design patterns beyond singular states and classes.
+//      These are intentionally contained in a single file rather than split up.
+// -------------------------------------------------------------------------- */
+
+/* components - common design patterns like alert boxes and cards.         */
+@import "clairity/components.css";/* layer(clairity.components);*/
+
+
+/* -----------------------------------------------------------------------------
+//  07 utilities - sparingly-used but wide-reaching overrides.
+// -------------------------------------------------------------------------- */
+
+/* utlities - wide-reaching overrides, like a .visually-hidden class. */
+@import "clairity/utilities.css";/* layer(clairity.utilities);*/
+
+/* shims - supports certain common markup patterns that are less semantic. 
+           Import these when adding clairity.css to older sites. [OPTIONAL] */
+/*@import "clairity/shims.css" layer(clairity.utilities);*/
+
+/* legacy - provides graceful degradation for older browsers. [OPTIONAL] */
+/*@import "clairity/legacy.css" layer(clairity.utilities);*/

data/lib/assets/js/clairity.css.js

@@ -0,0 +1,6 @@
+// TEMP: needed to get buttons in safari to gain focus on click
+document.addEventListener('click', function (event) {
+  if (event.target.matches('button')) {
+    event.target.focus();
+  }
+});

data/lib/clairity.css/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module ClairityCss
+  VERSION = '0.1.0'
+end

data/lib/clairity.css.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+require_relative  'clairity.css/version'
+# needed for `rake test`, otherwise: uninitialized constant Rails (NameError)
+require           'rails/engine'
+
+# this is an asset-only gem to provide the clairity.css framework to parent apps
+module ClairityCss
+  class Error   < StandardError;    end
+  class Engine  < ::Rails::Engine;  end
+end

data/sig/clairity.css.rbs

@@ -0,0 +1,4 @@
+module ClairityCss
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end

data/test/test_clairity_css.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class TestClairityCss < Minitest::Test
+  
+  def test_it_has_a_version_number
+    refute_nil ::ClairityCss::VERSION
+  end
+  
+  def test_css_assets_are_available
+    # TODO: create a dummy rails app that includes the clairity.css gem to make
+    # sure assets are accessible to the (dummy) rails app
+    assert true
+  end
+  
+end

data/test/test_helper.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+$LOAD_PATH.unshift File.expand_path("../lib", __dir__)
+require "clairity.css"
+require "minitest/autorun"