@nafisazizir/ziiz 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @nafisazizir/ziiz
 
+## 0.1.1
+
+- Squircle corners. `theme.css` sets `corner-shape` on every element, so
+  each `rounded-*` corner draws as a squircle in browsers that support
+  `corner-shape` and typed arithmetic. Others keep the round corner.
+  `rounded-full` and a `--radius` of 4rem or more (the
+  `[--radius:9999px]` pill) stay round. Write `[corner-shape:round]` to opt
+  one element out.
+- `--radius-scale` multiplies the `rounded-*` scale. It is 1, and 1.4 where
+  squircles draw, because a squircle reads tighter than a round corner at
+  the same radius. Set it to 1 to keep the round radii under squircles.
+- A rounder scale. The `sm` to `xl` multipliers on `--radius` are 1, 1.3,
+  1.5 and 1.6 (they were 0.6, 0.8, 1 and 1.4): 19.6, 25.5, 29.4 and
+  31.4px where squircles draw. Buttons, fields, tabs and menu items from
+  24px to 40px tall now draw as capsules. `2xl` to `4xl` are unchanged.
+- The radius caps in Button, Checkbox, InputGroup, Kbd, Nav and
+  Questionnaire (`rounded-[min(var(--radius-md),10px)]` and the like), and
+  Sonner's toast radius, follow `--radius-scale`. Components installed
+  earlier keep their unscaled caps.
+- Badge now uses `rounded-full`. A Badge installed earlier still has
+  `rounded-4xl` and draws a squircle capsule; change it to `rounded-full`
+  for round ends.
+- `background-200` sits closer to `background-100` in light mode and
+  lifts off it in dark: `oklch(0.991 0 0)`, `#fcfcfc` (was `0.984`,
+  `#fafafa`), and `oklch(0.134 0 0)`, `#080808` (was `0.027`, which
+  rounds to `#000000` and drew no lift at all).
+
 ## 0.1.0
 
 First release, a beta preview. Expect breaking changes in 0.x minors.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nafisazizir/ziiz",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "ziiz design layer: ramp tokens, type roles, materials, prose, Shiki, and the shadcn slot bridge.",
   "license": "MIT",
   "repository": {

package/theme.css

@@ -15,14 +15,15 @@
 @theme inline {
   --font-heading: var(--font-sans);
 
-  /* Multiplicative radius scale off --radius; materials pin onto it. */
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
+  /* Multiplicative radius scale off --radius; materials pin onto it.
+     --radius-scale grows it where corners draw as squircles. */
+  --radius-sm: calc(var(--radius) * var(--radius-scale));
+  --radius-md: calc(var(--radius) * 1.3 * var(--radius-scale));
+  --radius-lg: calc(var(--radius) * 1.5 * var(--radius-scale));
+  --radius-xl: calc(var(--radius) * 1.6 * var(--radius-scale));
+  --radius-2xl: calc(var(--radius) * 1.8 * var(--radius-scale));
+  --radius-3xl: calc(var(--radius) * 2.2 * var(--radius-scale));
+  --radius-4xl: calc(var(--radius) * 2.6 * var(--radius-scale));
 }
 
 /* ziiz theme tokens */
@@ -149,10 +150,11 @@
 
 :root {
   --radius: 0.875rem;
+  --radius-scale: 1;
   --ds-black: oklch(0 0 0);
   --ds-white: oklch(1 0 0);
   --ds-background-100: oklch(1 0 0);
-  --ds-background-200: oklch(0.984 0 0);
+  --ds-background-200: oklch(0.991 0 0);
   --ds-gray-100: oklch(0.961 0 0);
   --ds-gray-200: oklch(0.94 0 0);
   --ds-gray-300: oklch(0.925 0 0);
@@ -303,7 +305,7 @@
 
 .dark {
   --ds-background-100: oklch(0 0 0);
-  --ds-background-200: oklch(0.027 0 0);
+  --ds-background-200: oklch(0.134 0 0);
   --ds-gray-100: oklch(0.218 0 0);
   --ds-gray-200: oklch(0.239 0 0);
   --ds-gray-300: oklch(0.281 0 0);
@@ -453,6 +455,15 @@
     0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-blue-900);
 }
 
+/* A squircle reads tighter than a round corner at the same radius, so the
+   scale grows where squircles draw. The condition matches the corner-shape
+   rule below: corner-shape plus typed arithmetic. */
+@supports (corner-shape: superellipse(calc(2px / 1px))) {
+  :root {
+    --radius-scale: 1.4;
+  }
+}
+
 /* Shiki syntax highlighting palette */
 :root {
   --shiki-color-text: var(--ds-gray-1000);
@@ -472,6 +483,13 @@
   * {
     @apply border-gray-alpha-400 outline-gray-600/50;
   }
+  /* Squircle corners where supported, round elsewhere. A --radius of 4rem
+     or more is a pill, which stays round. */
+  *,
+  ::before,
+  ::after {
+    corner-shape: superellipse(clamp(1, 1 + (4rem - var(--radius)) / 1px, 2));
+  }
   body {
     @apply bg-background-100 text-gray-1000;
   }
@@ -490,6 +508,11 @@
   }
 }
 
+/* A squircle turns a circle into a rounded square; full stays round. */
+@utility rounded-full {
+  corner-shape: round;
+}
+
 /* Material */
 
 @utility material-base {
@@ -922,7 +945,7 @@
     /* Keyboard keys. */
     /* Keyboard keys, matching the ui Kbd component. */
     &:where(kbd) {
-      @apply inline-flex h-5 min-w-5 items-center justify-center rounded-[min(var(--radius-sm),6px)] bg-gray-100 px-1 text-label-12 text-gray-900;
+      @apply inline-flex h-5 min-w-5 items-center justify-center rounded-[min(var(--radius-sm),calc(6px*var(--radius-scale)))] bg-gray-100 px-1 text-label-12 text-gray-900;
     }
 
     /* Definition lists. */
@@ -946,7 +969,7 @@
 
     /* Inline code. */
     &:where(:not(pre) > code) {
-      @apply rounded-[min(var(--radius-sm),6px)] bg-gray-100 text-copy-13-mono;
+      @apply rounded-[min(var(--radius-sm),calc(6px*var(--radius-scale)))] bg-gray-100 text-copy-13-mono;
       padding: 0.125rem 0.25rem;
     }