@umami/react-zen 0.18.0 → 0.19.0

package/dist/styles.css

@@ -1,5 +1,6 @@
 :root {
-  /* Base values */
+  /* Fonts */
+
   --font-size-1: 12px;
   --font-size-2: 14px;
   --font-size-3: 16px;
@@ -15,6 +16,8 @@
   --font-weight-medium: 500;
   --font-weight-bold: 700;
 
+  /* Spacing */
+
   --spacing-1: 4px;
   --spacing-2: 8px;
   --spacing-3: 12px;
@@ -28,6 +31,8 @@
   --spacing-11: 96px;
   --spacing-12: 128px;
 
+  /* Borders */
+
   --border-size-1: 1px;
   --border-size-2: 2px;
   --border-size-3: 4px;
@@ -40,6 +45,8 @@
   --border-radius-5: 18px;
   --border-radius-6: 9999px;
 
+  /* Shadows */
+
   --box-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --box-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --box-shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -47,7 +54,7 @@
   --box-shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --box-shadow-6: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
-  /* Color values */
+  /* Colors */
 
   --base-color-50: #fafafa;
   --base-color-100: #f5f5f5;
@@ -76,10 +83,10 @@
   --inactive-color: var(--base-color-400);
   --inactive-font-color: var(--base-color-900);
 
-  /* Settings */
+  /* Global */
 
-  --font-family: Inter;
-  --font-family-code: 'JetBrains Mono';
+  --font-family: Inter, sans-serif;
+  --font-family-code: 'JetBrains Mono', monospace;
 
   --font-size: var(--font-size-2);
 
@@ -319,6 +326,27 @@ a:hover {
 .global_display-inline-flex {
   display: inline-flex;
 }
+.global_display-grid {
+  display: grid;
+}
+.global_display-inline-grid {
+  display: inline-grid;
+}
+.global_position-absolute {
+  position: absolute;
+}
+.global_position-fixed {
+  position: fixed;
+}
+.global_position-stick {
+  position: sticky;
+}
+.global_position-static {
+  position: static;
+}
+.global_position-relative {
+  position: relative;
+}
 .global_font-size {
   font-size: var(--font-size);
 }
@@ -442,15 +470,30 @@ a:hover {
 .global_background-color-950 {
   background-color: var(--base-color-950);
 }
-.global_align-left {
+.global_text-align-left {
   text-align: left;
 }
-.global_align-center {
+.global_text-align-center {
   text-align: center;
 }
-.global_align-right {
+.global_text-align-right {
   text-align: right;
 }
+.global_text-wrap-wrap {
+  text-wrap: wrap;
+}
+.global_text-wrap-nowrap {
+  text-wrap: nowrap;
+}
+.global_text-wrap-balance {
+  text-wrap: balance;
+}
+.global_text-wrap-pretty {
+  text-wrap: pretty;
+}
+.global_text-wrap-stable {
+  text-wrap: stable;
+}
 .global_letter-spacing-tighter {
   letter-spacing: -0.05em;
 }
@@ -1348,10 +1391,25 @@ a:hover {
 .global_align-self-unsafe-center {
   align-self: unsafe center;
 }
+.global_grid-auto-flow-row {
+  grid-auto-flow: row;
+}
+.global_grid-auto-flow-column {
+  grid-auto-flow: column;
+}
+.global_grid-auto-flow-row-dense {
+  grid-auto-flow: row dense;
+}
+.global_grid-auto-flow-column-dense {
+  grid-auto-flow: column dense;
+}
 @media (min-width: 520px) {
   .global_display-xs {
     display: var(--display-xs);
   }
+  .global_position-xs {
+    position: var(--position-xs);
+  }
   .global_font-size-xs {
     font-size: var(--font-size-xs);
   }
@@ -1470,11 +1528,29 @@ a:hover {
   .global_align-self-xs {
     align-self: var(--align-self-xs);
   }
+  .global_grid-template-rows-xs {
+    grid-template-rows: var(--grid-template-rows-xs);
+  }
+  .global_grid-template-columns-xs {
+    grid-template-columns: var(--grid-template-columns-xs);
+  }
+  .global_flex-basis-xs {
+    flex-basis: var(--flex-basis-xs);
+  }
+  .global_flex-grow-xs {
+    flex-basis: var(--flex-grow-xs);
+  }
+  .global_flex-shrink-xs {
+    flex-basis: var(--flex-shrink-xs);
+  }
 }
 @media (min-width: 768px) {
   .global_display-sm {
     display: var(--display-sm);
   }
+  .global_position-sm {
+    position: var(--position-sm);
+  }
   .global_font-size-sm {
     font-size: var(--font-size-sm);
   }
@@ -1593,11 +1669,29 @@ a:hover {
   .global_align-self-sm {
     align-self: var(--align-self-sm);
   }
+  .global_grid-template-rows-sm {
+    grid-template-rows: var(--grid-template-rows-sm);
+  }
+  .global_grid-template-columns-sm {
+    grid-template-columns: var(--grid-template-columns-sm);
+  }
+  .global_flex-basis-sm {
+    flex-basis: var(--flex-basis-sm);
+  }
+  .global_flex-grow-sm {
+    flex-basis: var(--flex-grow-sm);
+  }
+  .global_flex-shrink-sm {
+    flex-basis: var(--flex-shrink-sm);
+  }
 }
 @media (min-width: 1024px) {
   .global_display-md {
     display: var(--display-md);
   }
+  .global_position-md {
+    position: var(--position-md);
+  }
   .global_font-size-md {
     font-size: var(--font-size-md);
   }
@@ -1716,11 +1810,29 @@ a:hover {
   .global_align-self-md {
     align-self: var(--align-self-md);
   }
+  .global_grid-template-rows-md {
+    grid-template-rows: var(--grid-template-rows-md);
+  }
+  .global_grid-template-columns-md {
+    grid-template-columns: var(--grid-template-columns-md);
+  }
+  .global_flex-basis-md {
+    flex-basis: var(--flex-basis-md);
+  }
+  .global_flex-grow-md {
+    flex-basis: var(--flex-grow-md);
+  }
+  .global_flex-shrink-md {
+    flex-basis: var(--flex-shrink-md);
+  }
 }
 @media (min-width: 1280px) {
   .global_display-lg {
     display: var(--display-lg);
   }
+  .global_position-lg {
+    position: var(--position-lg);
+  }
   .global_font-size-lg {
     font-size: var(--font-size-lg);
   }
@@ -1839,11 +1951,29 @@ a:hover {
   .global_align-self-lg {
     align-self: var(--align-self-lg);
   }
+  .global_grid-template-rows-lg {
+    grid-template-rows: var(--grid-template-rows-lg);
+  }
+  .global_grid-template-columns-lg {
+    grid-template-columns: var(--grid-template-columns-lg);
+  }
+  .global_flex-basis-lg {
+    flex-basis: var(--flex-basis-lg);
+  }
+  .global_flex-grow-lg {
+    flex-basis: var(--flex-grow-lg);
+  }
+  .global_flex-shrink-lg {
+    flex-basis: var(--flex-shrink-lg);
+  }
 }
 @media (min-width: 1640px) {
   .global_display-xl {
     display: var(--display-xl);
   }
+  .global_position-xl {
+    position: var(--position-xl);
+  }
   .global_font-size-xl {
     font-size: var(--font-size-xl);
   }
@@ -1962,6 +2092,21 @@ a:hover {
   .global_align-self-xl {
     align-self: var(--align-self-xl);
   }
+  .global_grid-template-rows-xl {
+    grid-template-rows: var(--grid-template-rows-xl);
+  }
+  .global_grid-template-columns-xl {
+    grid-template-columns: var(--grid-template-columns-xl);
+  }
+  .global_flex-basis-xl {
+    flex-basis: var(--flex-basis-xl);
+  }
+  .global_flex-grow-xl {
+    flex-basis: var(--flex-grow-xl);
+  }
+  .global_flex-shrink-xl {
+    flex-basis: var(--flex-shrink-xl);
+  }
 }
 
 /* src/components/Text.module.css */
@@ -2301,7 +2446,7 @@ body a.Button_button {
   align-items: center;
   margin-bottom: var(--spacing-4);
 }
-.Calendar_heading {
+.Calendar_calendar .Calendar_heading {
   flex: 1;
   margin: 0;
   text-align: center;

package/dist/zen.css

@@ -0,0 +1,142 @@
+:root {
+  /* Base values */
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 1rem;
+  --spacing-4: 1.25rem;
+  --spacing-5: 1.5rem;
+  --spacing-6: 1.75rem;
+  --spacing-7: 2rem;
+  --spacing-8: 3rem;
+  --spacing-9: 4rem;
+  --spacing-10: 5rem;
+  --spacing-11: 7.5rem;
+  --spacing-12: 10rem;
+
+  --gap-xs: 1px;
+  --gap-sm: 0.5rem;
+  --gap-md: 1rem;
+  --gap-lg: 2rem;
+  --gap-xl: 8rem;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+
+  --border-sm: 1px;
+  --border-md: 2px;
+  --border-lg: 4px;
+
+  --border-radius-sm: 0.125rem;
+  --border-radius-md: 0.25rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-full: 100%;
+
+  --box-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --box-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --box-shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --box-shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --box-shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --box-shadow-6: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --base-color-50: #fafafa;
+  --base-color-100: #f5f5f5;
+  --base-color-200: #e5e5e5;
+  --base-color-300: #d4d4d4;
+  --base-color-400: #a3a3a3;
+  --base-color-500: #737373;
+  --base-color-600: #525252;
+  --base-color-700: #404040;
+  --base-color-800: #262626;
+  --base-color-900: #171717;
+  --base-color-950: #0a0a0a;
+
+  --success-color: #22c55e;
+  --success-font-color: var(--base-color-50);
+
+  --danger-color: #ef4444;
+  --danger-font-color: var(--base-color-50);
+
+  --warning-color: #f97316;
+  --warning-font-color: var(--base-color-50);
+
+  --active-color: #3b82f6;
+  --active-font-color: var(--base-color-50);
+
+  --inactive-color: var(--base-color-400);
+  --inactive-font-color: var(--base-color-900);
+
+  /* Settings */
+
+  --font-size: 16px;
+
+  --border-radius: var(--border-radius-md);
+
+  --gap: var(--spacing-5);
+
+  --padding: var(--spacing-2) var(--spacing-3);
+
+  --box-shadow: var(--box-shadow-1);
+
+  --light-color: var(--base-color-50);
+
+  --dark-color: var(--base-color-950);
+
+  /* Theme settings */
+
+  --background-color: #fff;
+
+  --font-color: var(--base-color-950);
+  --font-muted-color: var(--base-color-500);
+  --font-faded-color: var(--base-color-400);
+
+  --border-color: var(--base-color-300);
+  --border: var(--border-sm) solid var(--border-color);
+
+  --outline-color: var(--base-color-400);
+  --outline: var(--border-sm) solid var(--outline-color);
+
+  --primary-color: var(--base-color-900);
+  --primary-font-color: var(--base-color-50);
+
+  --secondary-color: var(--base-color-100);
+  --secondary-font-color: var(--font-color);
+
+  --highlight-color: var(--base-color-50);
+  --highlight-font-color: var(--font-color);
+
+  --input-background-color: var(--base-color-200);
+  --input-disabled-color: var(--base-color-100);
+
+  [data-theme='dark'] {
+    --background-color: var(--base-color-950);
+
+    --font-color: var(--base-color-200);
+    --font-muted-color: var(--base-color-400);
+    --font-faded-color: var(--base-color-500);
+
+    --border-color: var(--base-color-700);
+    --border: var(--border-sm) solid var(--border-color);
+
+    --outline-color: var(--base-color-600);
+    --outline: var(--border-sm) solid var(--outline-color);
+
+    --primary-color: var(--base-color-50);
+    --primary-font-color: var(--base-color-900);
+
+    --secondary-color: var(--base-color-800);
+    --secondary-font-color: var(--font-color);
+
+    --highlight-color: var(--base-color-800);
+    --highlight-font-color: var(--font-color);
+
+    --input-background-color: var(--base-color-700);
+    --input-disabled-color: var(--base-color-800);
+  }
+
+  :where(input, textarea, select) {
+    min-width: 240px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",
@@ -27,8 +27,9 @@
     "types": "tsc -p tsconfig.build.json",
     "esbuild": "node esbuild.mjs",
     "rollup": "rollup -c",
-    "dts": "node ./dts.js",
-    "bundle": "npm-run-all types dts esbuild"
+    "dts": "node dts.mjs",
+    "css": "node css.mjs",
+    "bundle": "npm-run-all types dts esbuild css"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
@@ -91,7 +92,7 @@
     "lint-staged": "^15.2.7",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.47",
-    "postcss-modules": "^6.0.0",
+    "postcss-modules": "^6.0.1",
     "postcss-selector-parser": "^6.1.2",
     "prettier": "^3.2.5",
     "rollup": "^4.17.2",