@nexus-cross/crossx-design-system 1.4.0-beta.6 → 2.4.0-beta.1
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/README.md +17 -1
- package/dist/index.d.ts +21 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ Transcribed from the CROSSx Figma design system (Embeded v1.0.0):
|
|
|
19
19
|
|
|
20
20
|
| Axis | Figma node | Shape |
|
|
21
21
|
|---|---|---|
|
|
22
|
-
| color | `
|
|
22
|
+
| color | `2151-1073` (file `Bta3fMnTynXtOtyZqI05fu`) | `bg`, `surface`, `content`, `border`, `accent.primary`, `system.{red,blue,orange,purple,green}`, `overlay`, `static` — light + dark |
|
|
23
23
|
| typography | `2019-2351` | `text`, `textMedium`, `textSemibold`, `label`, `labelSemibold`, `heading` (h1–h7), `display` |
|
|
24
24
|
| layout | `2060-1755` | `responsivePadding` (`sm`/`md`/`lg`) |
|
|
25
25
|
|
|
@@ -40,6 +40,22 @@ const css = buildDesignSystemCss(defaultDesignSystem);
|
|
|
40
40
|
- **Typography** → utility classes, applied with `className`:
|
|
41
41
|
`.ds-text-medium-sm`, `.ds-label-md`, `.ds-heading-h6`, `.ds-display-lg`.
|
|
42
42
|
|
|
43
|
+
## Picking a ramp
|
|
44
|
+
|
|
45
|
+
`accent.primary` is the **brand orange** (`#FF8438` / `#F0640D`).
|
|
46
|
+
`system.orange` is a separate **warning amber** (`#FC8B01` / `#E56F00`), and
|
|
47
|
+
`system.green` is the teal success ramp. The two oranges look similar but are
|
|
48
|
+
not interchangeable — choose by meaning:
|
|
49
|
+
|
|
50
|
+
| Intent | Ramp |
|
|
51
|
+
|---|---|
|
|
52
|
+
| Primary CTA, focus ring, active tab, brand highlight | `accent.primary` |
|
|
53
|
+
| Warning / caution copy and chips | `system.orange` |
|
|
54
|
+
| Success, completion, positive delta | `system.green` |
|
|
55
|
+
|
|
56
|
+
`ColorRamp.medium` is **optional** — only `system.orange` and `system.green`
|
|
57
|
+
define it, so `--ds-<ramp>-medium` is emitted for those two ramps alone.
|
|
58
|
+
|
|
43
59
|
## crossy-sdk bridge
|
|
44
60
|
|
|
45
61
|
```ts
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,13 @@ interface ColorRamp {
|
|
|
24
24
|
default: string;
|
|
25
25
|
/** Stronger / hover variant. */
|
|
26
26
|
high: string;
|
|
27
|
+
/**
|
|
28
|
+
* Tinted surface one step stronger than `low` — for a filled chip/badge that
|
|
29
|
+
* must read against a `low`-tinted parent. Optional: the design system only
|
|
30
|
+
* defines it on the ramps that need it (`system.orange`, `system.green`),
|
|
31
|
+
* so `buildColorVars` simply omits `--ds-<ramp>-medium` where it's absent.
|
|
32
|
+
*/
|
|
33
|
+
medium?: string;
|
|
27
34
|
/** Tinted surface (subtle filled background). */
|
|
28
35
|
low: string;
|
|
29
36
|
/** Faintest tinted surface. */
|
|
@@ -162,11 +169,21 @@ interface DesignSystem {
|
|
|
162
169
|
type ThemeMode = 'light' | 'dark';
|
|
163
170
|
|
|
164
171
|
/**
|
|
165
|
-
* Default color palette — transcribed verbatim from
|
|
166
|
-
* `
|
|
172
|
+
* Default color palette — transcribed verbatim from the Figma
|
|
173
|
+
* `Embeded 디자인시스템 v1.0.0` color table (file `Bta3fMnTynXtOtyZqI05fu`,
|
|
174
|
+
* node `2151-1073`), light + dark modes.
|
|
175
|
+
*
|
|
176
|
+
* Black/white alpha steps (content, border, overlay) are emitted as hex with an
|
|
177
|
+
* alpha byte.
|
|
167
178
|
*
|
|
168
|
-
*
|
|
169
|
-
*
|
|
179
|
+
* ⚠️ `accent.primary` is the **orange** brand ramp. It used to be the same teal
|
|
180
|
+
* as `system.green`, which forced every brand surface to bind to
|
|
181
|
+
* `--ds-system-orange-*` as a workaround. v1.0.0 fixes that at the token level:
|
|
182
|
+
* - `accent.primary` — brand orange (`#FF8438` / `#F0640D`)
|
|
183
|
+
* - `system.orange` — a distinct warning amber (`#FC8B01` / `#E56F00`)
|
|
184
|
+
* - `system.green` — keeps the teal ramp, now used only for success/positive
|
|
185
|
+
* The two orange ramps are close but NOT interchangeable: accent is redder,
|
|
186
|
+
* system/orange is yellower. Pick by meaning (brand vs warning), not by eye.
|
|
170
187
|
*/
|
|
171
188
|
|
|
172
189
|
declare const lightColors: ColorScale;
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var d={bg:{default:"#FFFFFF",dim:"#F5F7FA"},surface:{default:"#FFFFFF",medium:"#F5F7FA",high:"#EDF1F2",dim:"#F9FAFB",inverted:"#1E232E"},content:{highest:"#000000",high:"#000000D9",medium:"#000000A6",low:"#00000066",lowest:"#00000040",inverted:"#FFFFFF"},border:{default:"#00000012",medium:"#0000002E",high:"#000000A6"},accent:{primary:{on:"#FFFFFF",default:"#
|
|
1
|
+
var d={bg:{default:"#FFFFFF",dim:"#F5F7FA"},surface:{default:"#FFFFFF",medium:"#F5F7FA",high:"#EDF1F2",dim:"#F9FAFB",inverted:"#1E232E"},content:{highest:"#000000",high:"#000000D9",medium:"#000000A6",low:"#00000066",lowest:"#00000040",inverted:"#FFFFFF"},border:{default:"#00000012",medium:"#0000002E",high:"#000000A6"},accent:{primary:{on:"#FFFFFF",default:"#FF8438",high:"#F0640D",low:"#FFF5EE",lowest:"#FFF9F6",onInverted:"#FF8438"}},system:{red:{on:"#FFFFFF",default:"#DA0B2E",high:"#D20609",low:"#FFEEEE",lowest:"#FFF6F6",onInverted:"#FF0F47"},blue:{on:"#FFFFFF",default:"#0888DE",high:"#008DCA",low:"#ECF8FC",lowest:"#F5FBFE",onInverted:"#0FC7FF"},orange:{on:"#FFFFFF",default:"#FC8B01",high:"#E56F00",medium:"#FDEFDA",low:"#FCF5E9",lowest:"#FFF9F2",onInverted:"#FF9F21"},purple:{on:"#FFFFFF",default:"#7E54F4",high:"#7346F3",low:"#F5F3FF",lowest:"#F9F8FF",onInverted:"#9B78FF"},green:{on:"#FFFFFF",default:"#00B4B7",high:"#00A0A2",medium:"#D8F3F2",low:"#E7F9F8",lowest:"#F0FAF9",onInverted:"#00E8C9"}},overlay:{dim:"#00000080",subtle:"#00000005"},static:{white:"#FFFFFF",black:"#000000"}},m={bg:{default:"#1E232E",dim:"#191D27"},surface:{default:"#1E232E",medium:"#252B39",high:"#363B4C",dim:"#161B26",inverted:"#FFFFFF"},content:{highest:"#FFFFFF",high:"#FFFFFFD9",medium:"#FFFFFFA6",low:"#FFFFFF66",lowest:"#FFFFFF40",inverted:"#000000"},border:{default:"#FFFFFF12",medium:"#FFFFFF2E",high:"#FFFFFFA6"},accent:{primary:{on:"#000000",default:"#F0640D",high:"#FF8438",low:"#422A1F",lowest:"#362519",onInverted:"#F0640D"}},system:{red:{on:"#FFFFFF",default:"#CD0C40",high:"#EA1546",low:"#461420",lowest:"#39151E",onInverted:"#D20609"},blue:{on:"#FFFFFF",default:"#0888DE",high:"#17B4E3",low:"#143446",lowest:"#162B3B",onInverted:"#008DCA"},orange:{on:"#000000",default:"#FF9F21",high:"#FF9F21",medium:"#41321E",low:"#342B1E",lowest:"#2E2820",onInverted:"#E56F00"},purple:{on:"#FFFFFF",default:"#744FDC",high:"#9B78FF",low:"#2E2854",lowest:"#2A2740",onInverted:"#7346F3"},green:{on:"#000000",default:"#00CEB2",high:"#00CEB2",medium:"#114146",low:"#123235",lowest:"#102E31",onInverted:"#00A0A2"}},overlay:{dim:"#000000B3",subtle:"#00000026"},static:{white:"#FFFFFF",black:"#000000"}};var D="Inter, sans-serif",e=(t,o,r,n)=>({fontFamily:D,fontSize:t,fontWeight:o,lineHeight:r,letterSpacing:n}),c={text:{"2xs":e(10,400,1.5,-1),xs:e(12,400,1.5,-1),sm:e(14,400,1.5,-1),base:e(16,400,1.5,-1),lg:e(18,400,1.5,-1),xl:e(20,400,1.5,-1)},textMedium:{"2xs":e(10,500,1.5,-1),xs:e(12,500,1.5,-1),sm:e(14,500,1.5,-1),base:e(16,500,1.5,-1),lg:e(18,500,1.5,-1),xl:e(20,500,1.5,-1)},textSemibold:{xs:e(12,600,1.5,-1),sm:e(14,600,1.5,-1),base:e(16,600,1.5,-1),lg:e(18,600,1.5,-1),xl:e(20,600,1.5,-1)},label:{xs:e(10,500,1,0),sm:e(12,500,1,0),md:e(14,500,1,0),lg:e(16,500,1,0)},labelSemibold:{sm:e(12,600,1,0),md:e(14,600,1,0),lg:e(16,600,1,0)},heading:{h7:e(14,600,1.25,0),h6:e(16,600,1.25,0),h5:e(18,600,1.25,0),h4:e(20,600,1.25,0),h3:e(24,600,1.25,0),h2:e(30,700,1.25,0),h1:e(36,700,1.25,0)},display:{sm:e(36,700,1.25,0),md:e(48,700,1.25,0),lg:e(60,700,1.25,0)}};var g={responsivePadding:{sm:16,md:24,lg:32}};var u={shadowModal:{light:"0px 4px 30px -1px rgba(0, 0, 0, 0.15)",dark:"0px 4px 30px -1px rgba(0, 0, 0, 0.7)"},bgBlur7:"blur(3.5px)",accentGradient:"linear-gradient(196deg, #ff2589 16%, #ff823d 84%)"};var p={name:"crossx",colors:{light:d,dark:m},typography:c,layout:g,effects:u};var h="--ds";function a(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function S(t,o,r){for(let[n,s]of Object.entries(t)){let i=[...o,a(n)];typeof s=="string"?r.push(` ${h}-${i.join("-")}: ${s};`):s&&typeof s=="object"&&S(s,i,r)}}function f(t){let o=[];return S(t,[],o),o.join(`
|
|
2
2
|
`)}function b(t){let o=[];for(let[r,n]of Object.entries(t)){let s=a(r);for(let[i,l]of Object.entries(n))o.push(` ${h}-${s}-${a(i)}: ${l}px;`)}return o.join(`
|
|
3
|
-
`)}function
|
|
4
|
-
`)}function x(t){let o=[];for(let[r,n]of Object.entries(t)){let s=a(r);for(let[i,l]of Object.entries(n))o.push(
|
|
3
|
+
`)}function E(t){return t===0?"0":`${t/100}em`}function C(t,o){return[`.${t} {`,` font-family: ${o.fontFamily};`,` font-size: ${o.fontSize}px;`,` font-weight: ${o.fontWeight};`,` line-height: ${o.lineHeight};`,` letter-spacing: ${E(o.letterSpacing)};`,"}"].join(`
|
|
4
|
+
`)}function x(t){let o=[];for(let[r,n]of Object.entries(t)){let s=a(r);for(let[i,l]of Object.entries(n))o.push(C(`ds-${s}-${i}`,l))}return o.join(`
|
|
5
5
|
|
|
6
6
|
`)}function y(t,o={}){return[`${o.scope??":root"}, [data-ds-theme="dark"] {`,f(t.colors.dark),b(t.layout),` --ds-shadow-modal: ${t.effects.shadowModal.dark};`,` --ds-bg-blur-7: ${t.effects.bgBlur7};`,` --ds-accent-gradient: ${t.effects.accentGradient};`,"}","",'[data-ds-theme="light"] {',f(t.colors.light),` --ds-shadow-modal: ${t.effects.shadowModal.light};`,"}","",x(t.typography),""].join(`
|
|
7
|
-
`)}function w(t,o){let r=t.colors[o];return{primary:r.accent.primary.default,secondary:r.system.red.default,onPrimary:r.accent.primary.on,error:r.system.red.default,bg:r.bg.default,surfaceDefault:r.surface.medium,surfaceSubtle:r.surface.high,borderDefault:r.border.default,borderSubtle:r.border.medium,textIconPrimary:r.content.highest,textIconSecondary:r.content.medium,textIconTertiary:r.content.low}}var F="ONEpocket",A={default:F,social:`${F} with Social`,app:F,extension:`${F} Extension`},
|
|
7
|
+
`)}function w(t,o){let r=t.colors[o];return{primary:r.accent.primary.default,secondary:r.system.red.default,onPrimary:r.accent.primary.on,error:r.system.red.default,bg:r.bg.default,surfaceDefault:r.surface.medium,surfaceSubtle:r.surface.high,borderDefault:r.border.default,borderSubtle:r.border.medium,textIconPrimary:r.content.highest,textIconSecondary:r.content.medium,textIconTertiary:r.content.low}}var F="ONEpocket",A={default:F,social:`${F} with Social`,app:F,extension:`${F} Extension`},B={mainnet:"CROSS Mainnet",testnet:"ONEchain Testnet"},T={mainnet:"CROSS",testnet:"tONE"};function W(){return y(p)}export{B as CHAIN_DISPLAY,T as NATIVE_SYMBOL,F as WALLET_BRAND_NAME,A as WALLET_LABELS,f as buildColorVars,y as buildDesignSystemCss,b as buildLayoutVars,x as buildTypographyClasses,m as darkColors,p as defaultDesignSystem,u as effects,W as getDefaultDesignSystemCss,g as layout,d as lightColors,w as toSdkColorOverrides,c as typography};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexus-cross/crossx-design-system",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.4.0-beta.1",
|
|
4
4
|
"description": "CROSSx design system — color, typography and layout tokens with a swappable DesignSystem contract",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|