@sesamehr/react-design-system 2.0.0-beta.20 → 2.0.0-beta.22
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.
package/package.json
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
@import './primitives-v3.css';
|
|
2
2
|
|
|
3
|
+
/*
|
|
4
|
+
* Shadows: there are none here, and that is the answer rather than an omission.
|
|
5
|
+
*
|
|
6
|
+
* The v3 file's `Shadow` collection is Tailwind's own scale, value for value —
|
|
7
|
+
* `2xs` `xs` `sm` `md` `lg` `xl` `2xl`, the same offsets, blurs, spreads and
|
|
8
|
+
* alphas. Figma splits the middle five into `/1` and `/2` because a variable
|
|
9
|
+
* there holds one shadow and Tailwind's are two layers; `md/1` + `md/2` *is*
|
|
10
|
+
* `shadow-md`. So `shadow-sm`, `shadow-md` and the rest already produce exactly
|
|
11
|
+
* what the design asks for, and declaring `--shadow-*` here would restate
|
|
12
|
+
* Tailwind rather than extend it.
|
|
13
|
+
*
|
|
14
|
+
* Reach for the utility. Write a literal only where a component uses one half
|
|
15
|
+
* of a step — `OxToggleTabs` takes `md/2` alone, which no utility spells — or
|
|
16
|
+
* where the shadow is not an elevation at all: `OxTable`'s pinned column casts
|
|
17
|
+
* `4px 0 …`, sideways, and `OxCard` uses the `md/1`+`lg/1` geometry at alpha
|
|
18
|
+
* 0.02/0.03 instead of 0.1 for its much fainter lift. Both are deliberate and
|
|
19
|
+
* say so where they are written.
|
|
20
|
+
*/
|
|
21
|
+
|
|
3
22
|
:root {
|
|
4
23
|
--font-primary: var(--color-zinc-900);
|
|
5
24
|
--font-secondary: var(--color-zinc-500);
|
|
@@ -69,7 +88,6 @@
|
|
|
69
88
|
--accent: var(--color-zinc-100);
|
|
70
89
|
--accent-foreground: var(--color-zinc-900);
|
|
71
90
|
|
|
72
|
-
|
|
73
91
|
--success: var(--color-green-500);
|
|
74
92
|
--success-foreground: var(--color-white);
|
|
75
93
|
--warning: var(--color-amber-500);
|