@olwiba/cn 0.1.30 → 0.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/preset.css +31 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olwiba/cn",
3
- "version": "0.1.30",
3
+ "version": "0.1.31",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "sideEffects": false,
package/src/styles/preset.css CHANGED
@@ -54,30 +54,50 @@
54
54
  --neutral-tint-hue: 0;
55
55
  --neutral-tint-chroma: 0;
56
56
 
57
+ /*
58
+ * How far the page drops below pure white. Also 0 by default.
59
+ *
60
+ * Chroma alone is not enough. `oklch(1 0.004 186)` is still white — there is
61
+ * almost no room for colour at maximum lightness — so a tint applied to a
62
+ * pure-white background barely registers, and "light mode is too bright"
63
+ * stays true. Lowering the page a little is what makes the tint visible and
64
+ * the page comfortable.
65
+ *
66
+ * It also separates card from background, which are otherwise the identical
67
+ * value: a card is distinguished from the page only by its border, and a
68
+ * translucent surface over it (`bg-card/45`) shows nothing at all. The card
69
+ * drops by a fifth of what the page does, so it lifts without becoming a
70
+ * different colour.
71
+ *
72
+ * Foregrounds are untouched, and the largest move here is 1 → 0.985, so
73
+ * contrast is effectively unchanged.
74
+ */
75
+ --neutral-lift: 0;
76
+
57
77
  /* Per-surface share of --neutral-tint-chroma. */
58
78
  --neutral-tint-page: calc(var(--neutral-tint-chroma) * 0.33);
59
79
  --neutral-tint-raised: calc(var(--neutral-tint-chroma) * 0.25);
60
80
  --neutral-tint-muted: calc(var(--neutral-tint-chroma) * 0.67);
61
81
  --neutral-tint-line: calc(var(--neutral-tint-chroma) * 0.83);
62
82
 
63
- --background: oklch(1 var(--neutral-tint-page) var(--neutral-tint-hue));
83
+ --background: oklch(calc(1 - var(--neutral-lift)) var(--neutral-tint-page) var(--neutral-tint-hue));
64
84
  --foreground: oklch(0.145 0 0);
65
- --card: oklch(1 var(--neutral-tint-raised) var(--neutral-tint-hue));
85
+ --card: oklch(calc(1 - var(--neutral-lift) * 0.2) var(--neutral-tint-raised) var(--neutral-tint-hue));
66
86
  --card-foreground: oklch(0.145 0 0);
67
- --popover: oklch(1 var(--neutral-tint-raised) var(--neutral-tint-hue));
87
+ --popover: oklch(calc(1 - var(--neutral-lift) * 0.2) var(--neutral-tint-raised) var(--neutral-tint-hue));
68
88
  --popover-foreground: oklch(0.145 0 0);
69
89
 
70
90
  --primary: oklch(0.596 0.145 163.225);
71
91
  --primary-foreground: oklch(0.985 0 0);
72
- --secondary: oklch(0.97 var(--neutral-tint-muted) var(--neutral-tint-hue));
92
+ --secondary: oklch(calc(0.97 - var(--neutral-lift) * 0.53) var(--neutral-tint-muted) var(--neutral-tint-hue));
73
93
  --secondary-foreground: oklch(0.205 0 0);
74
- --muted: oklch(0.97 var(--neutral-tint-muted) var(--neutral-tint-hue));
94
+ --muted: oklch(calc(0.97 - var(--neutral-lift) * 0.53) var(--neutral-tint-muted) var(--neutral-tint-hue));
75
95
  --muted-foreground: oklch(0.556 0 0);
76
- --accent: oklch(0.97 var(--neutral-tint-chroma) var(--neutral-tint-hue));
96
+ --accent: oklch(calc(0.97 - var(--neutral-lift)) var(--neutral-tint-chroma) var(--neutral-tint-hue));
77
97
  --accent-foreground: oklch(0.205 0 0);
78
98
  --destructive: oklch(0.577 0.245 27.325);
79
- --border: oklch(0.922 var(--neutral-tint-line) var(--neutral-tint-hue));
80
- --input: oklch(0.922 var(--neutral-tint-line) var(--neutral-tint-hue));
99
+ --border: oklch(calc(0.922 - var(--neutral-lift) * 0.67) var(--neutral-tint-line) var(--neutral-tint-hue));
100
+ --input: oklch(calc(0.922 - var(--neutral-lift) * 0.67) var(--neutral-tint-line) var(--neutral-tint-hue));
81
101
  --ring: oklch(0.596 0.145 163.225);
82
102
 
83
103
  --chart-1: oklch(0.765 0.177 163.223);
@@ -86,13 +106,13 @@
86
106
  --chart-4: oklch(0.508 0.118 165.612);
87
107
  --chart-5: oklch(0.432 0.095 166.913);
88
108
 
89
- --sidebar: oklch(0.985 var(--neutral-tint-muted) var(--neutral-tint-hue));
109
+ --sidebar: oklch(calc(0.985 - var(--neutral-lift) * 0.67) var(--neutral-tint-muted) var(--neutral-tint-hue));
90
110
  --sidebar-foreground: oklch(0.145 0 0);
91
111
  --sidebar-primary: oklch(0.596 0.145 163.225);
92
112
  --sidebar-primary-foreground: oklch(0.985 0 0);
93
- --sidebar-accent: oklch(0.97 0 0);
113
+ --sidebar-accent: oklch(calc(0.97 - var(--neutral-lift)) var(--neutral-tint-chroma) var(--neutral-tint-hue));
94
114
  --sidebar-accent-foreground: oklch(0.205 0 0);
95
- --sidebar-border: oklch(0.922 0 0);
115
+ --sidebar-border: oklch(calc(0.922 - var(--neutral-lift) * 0.67) var(--neutral-tint-line) var(--neutral-tint-hue));
96
116
  --sidebar-ring: oklch(0.596 0.145 163.225);
97
117
  }
98
118