css-zero 0.0.1

data/app/assets/stylesheets/effects.css

@@ -0,0 +1,35 @@
+:root {
+  /****************************************************************
+  * Box Shadow
+  * Variables for controlling the box shadow of an element.
+  * box-shadow: var(--shadow);
+  ****************************************************************/
+  --shadow-xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /****************************************************************
+  * Opacity
+  * Variables for controlling the opacity of an element.
+  * opacity: var(--opacity-25);
+  ****************************************************************/
+  --opacity-5:   0.05;
+  --opacity-10:  0.1;
+  --opacity-20:  0.2;
+  --opacity-25:  0.25;
+  --opacity-30:  0.3;
+  --opacity-40:  0.4;
+  --opacity-50:  0.5;
+  --opacity-60:  0.6;
+  --opacity-70:  0.7;
+  --opacity-75:  0.75;
+  --opacity-80:  0.8;
+  --opacity-90:  0.9;
+  --opacity-95:  0.95;
+  --opacity-100: 1;
+}

data/app/assets/stylesheets/filters.css

@@ -0,0 +1,105 @@
+:root {
+  /****************************************************************
+  * Blur
+  * Variables for applying blur filters to an element.
+  * filter|backdrop-filter: var(--blur);
+  *****************************************************************/
+  --blur-none: blur(0);
+  --blur-sm:   blur(4px);
+  --blur:      blur(8px);
+  --blur-md:   blur(12px);
+  --blur-lg:   blur(16px);
+  --blur-xl:   blur(24px);
+  --blur-2xl:  blur(40px);
+  --blur-3xl:  blur(64px);
+
+  /****************************************************************
+  * Brightness
+  * Variables for applying brightness filters to an element.
+  * filter|backdrop-filter: var(--brightness-50);
+  *****************************************************************/
+  --brightness-0:   brightness(0);
+  --brightness-50:  brightness(0.5);
+  --brightness-75:  brightness(0.75);
+  --brightness-90:  brightness(0.9);
+  --brightness-95:  brightness(0.95);
+  --brightness-100: brightness(1);
+  --brightness-105: brightness(1.05);
+  --brightness-110: brightness(1.1);
+  --brightness-125: brightness(1.25);
+  --brightness-150: brightness(1.5);
+  --brightness-200: brightness(2);
+
+  /****************************************************************
+  * Contrast
+  * Variables for applying contrast filters to an element.
+  * filter|backdrop-filter: var(--contrast-50);
+  *****************************************************************/
+  --contrast-0:   contrast(0);
+  --contrast-50:  contrast(0.5);
+  --contrast-75:  contrast(0.75);
+  --contrast-100: contrast(1);
+  --contrast-125: contrast(1.25);
+  --contrast-150: contrast(1.5);
+  --contrast-200: contrast(2);
+
+  /****************************************************************
+  * Drop Shadow
+  * Variables for applying drop-shadow filters to an element.
+  * filter|backdrop-filter: var(--drop-shadow);
+  *****************************************************************/
+  --drop-shadow-none: drop-shadow(0 0 #0000);
+  --drop-shadow-sm:   drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+  --drop-shadow:      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  --drop-shadow-md:   drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  --drop-shadow-lg:   drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  --drop-shadow-xl:   drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  --drop-shadow-2xl:  drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+
+  /****************************************************************
+  * Grayscale
+  * Variables for applying grayscale filters to an element.
+  * filter|backdrop-filter: var(--grayscale);
+  *****************************************************************/
+  --grayscale-0: grayscale(0);
+  --grayscale:   grayscale(100%);
+
+  /****************************************************************
+  * Hue Rotate
+  * Variables for applying hue-rotate filters to an element.
+  * filter|backdrop-filter: var(--hue-rotate-15);
+  *****************************************************************/
+  --hue-rotate-0:   hue-rotate(0deg);
+  --hue-rotate-15:  hue-rotate(15deg);
+  --hue-rotate-30:  hue-rotate(30deg);
+  --hue-rotate-60:  hue-rotate(60deg);
+  --hue-rotate-90:  hue-rotate(90deg);
+  --hue-rotate-180: hue-rotate(180deg);
+
+  /****************************************************************
+  * Invert
+  * Variables for applying invert filters to an element.
+  * filter|backdrop-filter: var(--invert);
+  *****************************************************************/
+  --invert-0: invert(0);
+  --invert:   invert(100%);
+
+  /****************************************************************
+  * Saturate
+  * Variables for applying saturation filters to an element.
+  * filter|backdrop-filter: var(--saturate-50);
+  *****************************************************************/
+  --saturate-0:   saturate(0);
+  --saturate-50:  saturate(0.5);
+  --saturate-100: saturate(1);
+  --saturate-150: saturate(1.5);
+  --saturate-200: saturate(2);
+
+  /****************************************************************
+  * Sepia
+  * Variables for applying sepia filters to an element.
+  * filter|backdrop-filter: var(--sepia);
+  *****************************************************************/
+  --sepia-0: sepia(0);
+  --sepia:   sepia(100%);
+}

data/app/assets/stylesheets/grid.css

@@ -0,0 +1,38 @@
+:root {
+  /****************************************************************
+  * Grid Template
+  * Variables for specifying the columns/rows in a grid layout.
+  * grid-template-columns|grid-template-rows: var(--grid-1);
+  *****************************************************************/
+  --grid-1:  repeat(1, minmax(0, 1fr));
+  --grid-2:  repeat(2, minmax(0, 1fr));
+  --grid-3:  repeat(3, minmax(0, 1fr));
+  --grid-4:  repeat(4, minmax(0, 1fr));
+  --grid-5:  repeat(5, minmax(0, 1fr));
+  --grid-6:  repeat(6, minmax(0, 1fr));
+  --grid-7:  repeat(7, minmax(0, 1fr));
+  --grid-8:  repeat(8, minmax(0, 1fr));
+  --grid-9:  repeat(9, minmax(0, 1fr));
+  --grid-10: repeat(10, minmax(0, 1fr));
+  --grid-11: repeat(11, minmax(0, 1fr));
+  --grid-12: repeat(12, minmax(0, 1fr));
+
+  /****************************************************************
+  * Grid Start / End
+  * Variables for controlling how elements are sized and placed across grid columns/rows.
+  * grid-column|grid-row: var(--span-1);
+  *****************************************************************/
+  --span-1:  span 1 / span 1;
+  --span-2:  span 2 / span 2;
+  --span-3:  span 3 / span 3;
+  --span-4:  span 4 / span 4;
+  --span-5:  span 5 / span 5;
+  --span-6:  span 6 / span 6;
+  --span-7:  span 7 / span 7;
+  --span-8:  span 8 / span 8;
+  --span-9:  span 9 / span 9;
+  --span-10: span 10 / span 10;
+  --span-11: span 11 / span 11;
+  --span-12: span 12 / span 12;
+  --span-full: 1 / -1;
+}

data/app/assets/stylesheets/sizes.css

@@ -0,0 +1,84 @@
+:root {
+  /****************************************************************
+  * Fixed Size
+  *****************************************************************/
+  --size-0_5: 0.125rem; /* 2px */
+  --size-1:   0.25rem;  /* 4px */
+  --size-1_5: 0.375rem; /* 6px */
+  --size-2:   0.5rem;   /* 8px */
+  --size-2_5: 0.625rem; /* 10px */
+  --size-3:   0.75rem;  /* 12px */
+  --size-3_5: 0.875rem; /* 14px */
+  --size-4:   1rem;     /* 16px */
+  --size-5:   1.25rem;  /* 20px */
+  --size-6:   1.5rem;   /* 24px */
+  --size-7:   1.75rem;  /* 28px */
+  --size-8:   2rem;     /* 32px */
+  --size-9:   2.25rem;  /* 36px */
+  --size-10:  2.5rem;   /* 40px */
+  --size-11:  2.75rem;  /* 44px */
+  --size-12:  3rem;     /* 48px */
+  --size-14:  3.5rem;   /* 56px */
+  --size-16:  4rem;     /* 64px */
+  --size-20:  5rem;     /* 80px */
+  --size-24:  6rem;     /* 96px */
+  --size-28:  7rem;     /* 112px */
+  --size-32:  8rem;     /* 128px */
+  --size-36:  9rem;     /* 144px */
+  --size-40:  10rem;    /* 160px */
+  --size-44:  11rem;    /* 176px */
+  --size-48:  12rem;    /* 192px */
+  --size-52:  13rem;    /* 208px */
+  --size-56:  14rem;    /* 224px */
+  --size-60:  15rem;    /* 240px */
+  --size-64:  16rem;    /* 256px */
+  --size-72:  18rem;    /* 288px */
+  --size-80:  20rem;    /* 320px */
+  --size-96:  24rem;    /* 384px */
+
+  /****************************************************************
+  * Percentual Size
+  *****************************************************************/
+  --size-1-2:   50%;
+  --size-1-3:   33.333333%;
+  --size-2-3:   66.666667%;
+  --size-1-4:   25%;
+  --size-2-4:   50%;
+  --size-3-4:   75%;
+  --size-1-5:   20%;
+  --size-2-5:   40%;
+  --size-3-5:   60%;
+  --size-4-5:   80%;
+  --size-1-6:   16.666667%;
+  --size-2-6:   33.333333%;
+  --size-3-6:   50%;
+  --size-4-6:   66.666667%;
+  --size-5-6:   83.333333%;
+  --size-1-12:  8.333333%;
+  --size-2-12:  16.666667%;
+  --size-3-12:  25%;
+  --size-4-12:  33.333333%;
+  --size-5-12:  41.666667%;
+  --size-6-12:  50%;
+  --size-7-12:  58.333333%;
+  --size-8-12:  66.666667%;
+  --size-9-12:  75%;
+  --size-10-12: 83.333333%;
+  --size-11-12: 91.666667%;
+  --size-full:  100%;
+
+  /****************************************************************
+  * Max Width
+  *****************************************************************/
+  --max-w-xs:  20rem; /* 320px */
+  --max-w-sm:  24rem; /* 384px */
+  --max-w-md:  28rem; /* 448px */
+  --max-w-lg:  32rem; /* 512px */
+  --max-w-xl:  36rem; /* 576px */
+  --max-w-2xl: 42rem; /* 672px */
+  --max-w-3xl: 48rem; /* 768px */
+  --max-w-4xl: 56rem; /* 896px */
+  --max-w-5xl: 64rem; /* 1024px */
+  --max-w-6xl: 72rem; /* 1152px */
+  --max-w-7xl: 80rem; /* 1280px */
+}

data/app/assets/stylesheets/transform.css

@@ -0,0 +1,57 @@
+:root {
+  /****************************************************************
+  * Scale
+  * Variables for scaling elements with transform.
+  * transform: var(--scale-0);
+  *****************************************************************/
+  --scale-0:   0;
+  --scale-50:  0.50;
+  --scale-75:  0.75;
+  --scale-90:  0.90;
+  --scale-95:  0.95;
+  --scale-100: 1;
+  --scale-105: 1.05;
+  --scale-110: 1.10;
+  --scale-125: 1.25;
+  --scale-150: 1.50;
+
+  /****************************************************************
+  * Rotate
+  * Variables for rotating elements with transform.
+  * transform: var(--rotate-45);
+  *****************************************************************/
+  --rotate-0:   0deg;
+  --rotate-1:   1deg;
+  --rotate-2:   2deg;
+  --rotate-3:   3deg;
+  --rotate-6:   6deg;
+  --rotate-12:  12deg;
+  --rotate-45:  45deg;
+  --rotate-90:  90deg;
+  --rotate-180: 180deg;
+
+  /****************************************************************
+  * Translate
+  * Variables for translating elements with transform.
+  * transform: var(--translate-1-2);
+  *****************************************************************/
+  --translate-1-2:  50%;
+  --translate-1-3:  33.333333%;
+  --translate-2-3:  66.666667%;
+  --translate-1-4:  25%;
+  --translate-2-4:  50%;
+  --translate-3-4:  75%;
+  --translate-full: 100%;
+
+  /****************************************************************
+  * Skew
+  * Varibles for skewing elements with transform.
+  * transform: var(--skew-3);
+  *****************************************************************/
+  --skew-0:  0deg;
+  --skew-1:  1deg;
+  --skew-2:  2deg;
+  --skew-3:  3deg;
+  --skew-6:  6deg;
+  --skew-12: 12deg;
+}

data/app/assets/stylesheets/transition.css

@@ -0,0 +1,38 @@
+:root {
+  /****************************************************************
+  * Transition Property
+  * Variables for controlling which CSS properties transition.
+  * transition-property: var(--transition);
+  *****************************************************************/
+  --transition-none:      none;
+  --transition-all:       all;
+  --transition:           background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  --transition-colors:    background-color, border-color, color, fill, stroke;
+  --transition-opacity:   opacity;
+  --transition-shadow:    box-shadow;
+  --transition-transform: transform;
+
+  /****************************************************************
+  * Transition Timing
+  * Variables for controlling the timing of CSS transitions.
+  * transition-duration|transition-delay: var(--time-75);
+  *****************************************************************/
+  --time-75:   75ms;
+  --time-100:  100ms;
+  --time-150:  150ms;
+  --time-200:  200ms;
+  --time-300:  300ms;
+  --time-500:  500ms;
+  --time-700:  700ms;
+  --time-1000: 1000ms;
+
+  /****************************************************************
+  * Transition Timing Function
+  * Variables for controlling the easing of CSS transitions.
+  * transition-timing-function: var(--ease-linear);
+  *****************************************************************/
+  --ease-linear: linear;
+  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
+  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}

data/app/assets/stylesheets/typography.css

@@ -0,0 +1,76 @@
+:root {
+  /****************************************************************
+  * Font Size
+  * Variables for controlling the font size of an element.
+  * font-size: var(--text-xs);
+  *****************************************************************/
+  --text-xs:   0.75rem;  /* 12px */
+  --text-sm:   0.875rem; /* 14px */
+  --text-base: 1rem;     /* 16px */
+  --text-lg:   1.125rem; /* 18px */
+  --text-xl:   1.25rem;  /* 20px */
+  --text-2xl:  1.5rem;   /* 24px */
+  --text-3xl:  1.875rem; /* 30px */
+  --text-4xl:  2.25rem;  /* 36px */
+  --text-5xl:  3rem;     /* 48px */
+  --text-6xl:  3.75rem;  /* 60px */
+  --text-7xl:  4.5rem;   /* 72px */
+  --text-8xl:  6rem;     /* 96px */
+  --text-9xl:  8rem;     /* 128px */
+
+  /****************************************************************
+  * Font Weight
+  * Variables for controlling the font weight of an element.
+  * font-weight: var(--font-hairline);
+  *****************************************************************/
+  --font-thin:       100;
+  --font-extralight: 200;
+  --font-light:      300;
+  --font-normal:     400;
+  --font-medium:     500;
+  --font-semibold:   600;
+  --font-bold:       700;
+  --font-extrabold:  800;
+  --font-black:      900;
+
+  /****************************************************************
+  * Line Height
+  * Variables for controlling the leading (line height) of an element.
+  * line-height: var(--leading-tight);
+  *****************************************************************/
+  --leading-none:    1;
+  --leading-tight:   1.25;
+  --leading-snug:    1.375;
+  --leading-normal:  1.4;
+  --leading-relaxed: 1.625;
+  --leading-loose:   2;
+  --leading-3:       .75rem;  /* 12px */
+  --leading-4:       1rem;    /* 16px */
+  --leading-5:       1.25rem; /* 20px */
+  --leading-6:       1.5rem;  /* 24px */
+  --leading-7:       1.75rem; /* 28px */
+  --leading-8:       2rem;    /* 32px */
+  --leading-9:       2.25rem; /* 36px */
+  --leading-10:      2.5rem;  /* 40px */
+
+  /****************************************************************
+  * Font Family
+  * Variables for controlling the font family of an element.
+  * font-family: var(--font-sans);
+  *****************************************************************/
+  --font-sans:  ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /****************************************************************
+  * Letter Spacing
+  * Variables for controlling the tracking (letter spacing) of an element.
+  * letter-spacing: var(--tracking-tighter);
+  *****************************************************************/
+  --tracking-tighter: -0.05em;
+  --tracking-tight:   -0.025em;
+  --tracking-normal:  0em;
+  --tracking-wide:    0.025em;
+  --tracking-wider:   0.05em;
+  --tracking-widest:  0.1em;
+}

data/app/assets/stylesheets/zutilities.css

@@ -0,0 +1,197 @@
+:root {
+  --space-sm: var(--size-2); /* 8px */
+  --space-md: var(--size-4); /* 16px */
+  --space-lg: var(--size-8); /* 32px */
+}
+
+/****************************************************************
+* Flex and Grid
+*****************************************************************/
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.inline-flex { display: inline-flex; }
+
+.justify-end { justify-content: end; }
+.justify-start { justify-content: start; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+
+.items-end { align-items: end; }
+.items-start { align-items: start; }
+.items-center { align-items: center; }
+
+.grow { flex-grow: 1; }
+.shrink-0 { flex-shrink: 0; }
+
+.self-end { align-self: end; }
+.self-start { align-self: start; }
+.self-center { align-self: center; }
+
+.gap {
+  column-gap: var(--column-gap, var(--space-md));
+  row-gap: var(--row-gap, var(--space-md));
+}
+
+/****************************************************************
+* Alignment
+*****************************************************************/
+.align-top { vertical-align: top; }
+.align-bottom { vertical-align: bottom; }
+.align-middle { vertical-align: middle; }
+
+.text-start { text-align: start; }
+.text-end { text-align: end; }
+.text-center { text-align: center; }
+
+/****************************************************************
+* Text
+*****************************************************************/
+.font-normal { font-weight: var(--font-normal); }
+.font-medium { font-weight: var(--font-medium); }
+.font-bold { font-weight: var(--font-bold); }
+
+.underline { text-decoration-line: underline; }
+.no-underline	{ text-decoration-line: none; }
+
+.uppercase { text-transform: uppercase; }
+.normal-case { text-transform: none; }
+
+.whitespace-nowrap { white-space: nowrap; }
+.whitespace-normal { white-space: normal; }
+
+.break-words { word-break: break-word; }
+.break-all { word-break: break-all; }
+
+.truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
+
+.opacity-75 { opacity: var(--opacity-75); }
+.opacity-50 { opacity: var(--opacity-50); }
+
+.leading-tight { line-height: var(--leading-tight); }
+.leading-normal { line-height: var(--leading-normal); }
+
+.text-inherit	{ color: inherit; }
+
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-3xl { font-size: var(--text-3xl); }
+.text-4xl { font-size: var(--text-4xl); }
+.text-5xl { font-size: var(--text-5xl); }
+
+/****************************************************************
+* Border
+*****************************************************************/
+.border-0 { border-width: 0px; }
+.border-t { border-top-width: 1px; }
+.border-b { border-bottom-width: 1px; }
+.border-l { border-left-width: 1px; }
+.border-r { border-right-width: 1px; }
+.border { border-width: 1px; }
+.rounded-full { border-radius: 9999px; }
+
+/****************************************************************
+* Layout
+*****************************************************************/
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+
+.contents { display: contents; }
+
+.hidden { display: none; }
+.invisible { visibility: hidden; }
+
+.relative { position: relative; }
+
+.min-w-0 { min-inline-size: 0; }
+.max-w-full { max-inline-size: 100%; }
+
+.h-full { block-size: 100%; }
+.w-full { inline-size: 100%; }
+
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+
+/****************************************************************
+* Margin
+*****************************************************************/
+.m-0 { margin: 0; }
+.m-sm { margin: var(--space-sm); }
+.m-md { margin: var(--space-md); }
+.m-lg { margin: var(--space-lg); }
+
+.mb-0 { margin-block: 0; }
+.mb-sm { margin-block: var(--space-sm); }
+.mb-md { margin-block: var(--space-md); }
+.mb-lg { margin-block: var(--space-lg); }
+
+.mbs-0 { margin-block-start: 0; }
+.mbs-sm { margin-block-start: var(--space-sm); }
+.mbs-md { margin-block-start: var(--space-md); }
+.mbs-lg { margin-block-start: var(--space-lg); }
+
+.mbe-0 { margin-block-end: 0; }
+.mbe-sm { margin-block-end: var(--space-sm); }
+.mbe-md { margin-block-end: var(--space-md); }
+.mbe-lg { margin-block-end: var(--space-lg); }
+
+.mi-0 { margin-inline: 0; }
+.mi-sm { margin-inline: var(--space-sm); }
+.mi-md { margin-inline: var(--space-md); }
+.mi-lg { margin-inline: var(--space-lg); }
+
+.mis-0 { margin-inline-start: 0; }
+.mis-sm { margin-inline-start: var(--space-sm); }
+.mis-md { margin-inline-start: var(--space-md); }
+.mis-lg { margin-inline-start: var(--space-lg); }
+
+.mie-0 { margin-inline-end: 0; }
+.mie-sm { margin-inline-end: var(--space-sm); }
+.mie-md { margin-inline-end: var(--space-md); }
+.mie-lg { margin-inline-end: var(--space-lg); }
+
+.mi-auto { margin-inline: auto; }
+.mb-auto { margin-block: auto; }
+
+/****************************************************************
+* Padding
+*****************************************************************/
+.p-0 { padding: 0; }
+.p-sm { padding: var(--space-sm); }
+.p-md { padding: var(--space-md); }
+.p-lg { padding: var(--space-lg); }
+
+.pb-0 { padding-block: 0; }
+.pb-sm { padding-block: var(--space-sm); }
+.pb-md { padding-block: var(--space-md); }
+.pb-lg { padding-block: var(--space-lg); }
+
+.pbs-0 { padding-block-start: 0; }
+.pbs-sm { padding-block-start: var(--space-sm); }
+.pbs-md { padding-block-start: var(--space-md); }
+.pbs-lg { padding-block-start: var(--space-lg); }
+
+.pbe-0 { padding-block-end: 0; }
+.pbe-sm { padding-block-end: var(--space-sm); }
+.pbe-md { padding-block-end: var(--space-md); }
+.pbe-lg { padding-block-end: var(--space-lg); }
+
+.pi-0 { padding-inline: 0; }
+.pi-sm { padding-inline: var(--space-sm); }
+.pi-md { padding-inline: var(--space-md); }
+.pi-lg { padding-inline: var(--space-lg); }
+
+.pis-0 { padding-inline-start: 0; }
+.pis-sm { padding-inline-start: var(--space-sm); }
+.pis-md { padding-inline-start: var(--space-md); }
+.pis-lg { padding-inline-start: var(--space-lg); }
+
+.pie-0 { padding-inline-end: 0; }
+.pie-sm { padding-inline-end: var(--space-sm); }
+.pie-md { padding-inline-end: var(--space-md); }
+.pie-lg { padding-inline-end: var(--space-lg); }

data/lib/css-zero.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require_relative "css_zero/version"
+
+module CssZero
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/css_zero/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module CssZero
+  VERSION = "0.0.1"
+end