new features + updated spacing

css/globals/shared-styles.css

@@ -5,6 +5,8 @@
  --radius-lg: calc(var(--radius-md)*2);
 
  /* box shadow */
+ --shadow-ring: 0 0 0 1px hsla(var(--color-black-hsl), 0.065);
+
  --shadow-xs: 0 0 0 1px hsla(var(--color-black-hsl), 0.02), 
  0 1px 3px -1px hsla(var(--color-black-hsl), 0.2);
  --shadow-sm: 0 0.3px 0.4px hsla(var(--color-black-hsl), 0.025),

css/globals/spacing.css

@@ -1,13 +1,13 @@
 :root {
- --space-4xs: 0.125rem; /* 2px */
- --space-3xs: 0.25rem; /* 4px */
- --space-2xs: 0.5rem;  /* 8px */
+ --space-4xs: 0.25rem; /* 4px */
+ --space-3xs: 0.5rem;  /* 8px */
+ --space-2xs: 0.75rem; /* 12px */
  --space-xs: 1rem; /* 16px */
  --space-sm: 1.5rem; /* 24px */
  --space-md: 2rem; /* 32px */
- --space-lg: 3rem; /* 48px */
- --space-xl: 5rem;  /* 80px */
- --space-2xl: 8rem; /* 128px */
- --space-3xl: 12rem; /* 192px */
- --space-4xl: 18rem; /* 288px */
+ --space-lg: 3rem; /* 48px */ 
+ --space-xl: 4.5rem; /* 72px */
+ --space-2xl: 7rem; /* 112px */
+ --space-3xl: 10.75rem; /* 172px */
+ --space-4xl: 16rem; /* 256px */
 }

css/reset.css

@@ -21,15 +21,15 @@ blockquote, q {
  quotes: none;
 }
 
-button, input, textarea, select, .link, .reset {
+button, input, textarea, select, .reset {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
 }
 
-a, .link {
+a {
  color: var(--color-primary);
 }
 

css/util.css

@@ -1,6 +1,7 @@
 /* grid */
 .grid {
  display: grid;
+ grid-auto-rows: min-content;
 }
 
 .grid > * {
@@ -1920,7 +1921,7 @@
  --max-width-sm: 48rem; /* 768px */
  --max-width-md: 64rem; /* 1024px */
  --max-width-lg: 80rem; /* 1280px */
- --max-width-xl: 96rem; /* 1536px */
+ --max-width-xl: 90rem; /* 1440px */
 }
 
 .container {
@@ -1983,26 +1984,50 @@
 }
 
 /* box-shadow */
+.shadow-ring {
+ box-shadow: var(--shadow-ring);
+}
+
 .shadow-xs {
  box-shadow: var(--shadow-xs);
 }
 
+.shadow-xs.shadow-ring {
+ box-shadow: var(--shadow-xs), var(--shadow-ring);
+}
+
 .shadow-sm {
  box-shadow: var(--shadow-sm);
 }
 
+.shadow-sm.shadow-ring {
+ box-shadow: var(--shadow-sm), var(--shadow-ring);
+}
+
 .shadow-md {
  box-shadow: var(--shadow-md);
 }
 
+.shadow-md.shadow-ring {
+ box-shadow: var(--shadow-md), var(--shadow-ring);
+}
+
 .shadow-lg {
  box-shadow: var(--shadow-lg);
 }
 
+.shadow-lg.shadow-ring {
+ box-shadow: var(--shadow-lg), var(--shadow-ring);
+}
+
 .shadow-xl {
  box-shadow: var(--shadow-xl);
 }
 
+.shadow-xl.shadow-ring {
+ box-shadow: var(--shadow-xl), var(--shadow-ring);
+}
+
 .shadow-none {
  box-shadow: none;
 }
@@ -2991,6 +3016,7 @@
  /* grid */
  .grid\@sm {
  display: grid;
+ grid-auto-rows: min-content;
  }
 
  .grid\@sm > * {
@@ -4484,6 +4510,7 @@
  /* grid */
  .grid\@md {
  display: grid;
+ grid-auto-rows: min-content;
  }
 
  .grid\@md > * {
@@ -5977,6 +6004,7 @@
  /* grid */
  .grid\@lg {
  display: grid;
+ grid-auto-rows: min-content;
  }
 
  .grid\@lg > * {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "codyframe-css",
- "version": "0.0.5",
+ "version": "0.0.6",
  "description": "Experimental, CSS-only version of the CodyHouse framework.",
  "main": "index.js",
  "scripts": {