@nexub/tokens 3.0.0 → 3.2.0

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 (9) hide show
  1. package/dist/css/variables.css +20 -1
  2. package/dist/js/generated/native.d.ts +7 -0
  3. package/dist/js/generated/native.js +7 -0
  4. package/dist/js/generated/tokens.d.ts +23 -0
  5. package/dist/js/generated/tokens.js +23 -0
  6. package/dist/json/tokens.json +19 -0
  7. package/dist/tailwind/preset.js +9 -0
  8. package/dist/tailwind/theme.css +5 -0
  9. package/package.json +1 -1
package/dist/css/variables.css CHANGED
@@ -568,6 +568,20 @@
568
568
  --gradient-surface-soft: linear-gradient(135deg, rgba(64,153,241,0.04) 0%, rgba(28,206,102,0.03) 100%);
569
569
  --gradient-surface-muted: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
570
570
  --gradient-eyebrow-chip: linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%);
571
+ --marketing-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%); /** Hero backdrop, layered over the page surface */
572
+ --marketing-button-gradient: linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%); /** Button variant="hero" (primary tones 45 → 40; 50 fails AA with white text) */
573
+ --marketing-button-gradient-hover: linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%);
574
+ --marketing-button-fg: var(--color-palette-primary-100); /** Text on the hero button gradient (AA on both stops) */
575
+ --marketing-button-shadow: 0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22); /** Hero button glow. At most one glowing button per screen. */
576
+ --marketing-button-shadow-hover: 0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25);
577
+ --marketing-eyebrow-gradient: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%); /** EyebrowChip variant="gradient" */
578
+ --marketing-card-radius: 24px; /** Card variant="showcase" */
579
+ --marketing-card-shadow: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38);
580
+ --marketing-card-shadow-hover: 0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48);
581
+ --marketing-float-shadow: 0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45); /** Floating cards over a hero visual */
582
+ --marketing-accent-line: linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%); /** Brand accent line: Nexub and the product colours */
583
+ --marketing-lift: -6px; /** Card hover lift */
584
+ --marketing-button-lift: -2px; /** Hero button hover lift */
571
585
  --duration-instant: 0s;
572
586
  --duration-fast: 0.15s;
573
587
  --duration-normal: 0.2s;
@@ -658,7 +672,8 @@
658
672
  --container-lg: 1024px;
659
673
  --container-xl: 1280px;
660
674
  --container-2xl: 1536px;
661
- --container-nexub: 1440px;
675
+ --container-nexub: 1440px; /** App shell width */
676
+ --container-marketing: 1280px; /** Marketing pages (Container size="marketing") */
662
677
  --container-prose: 65ch;
663
678
  --font-family-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif; /** UI face (body, title, label roles) */
664
679
  --font-family-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', ui-sans-serif, system-ui, sans-serif; /** Brand face (display, headline roles) */
@@ -722,6 +737,10 @@
722
737
  --text-code-lineHeight: 1.6;
723
738
  --text-code-letterSpacing: 0;
724
739
  --text-code-weight: 400;
740
+ --type-display-xl-size: 4rem;
741
+ --type-display-xl-lineHeight: 4.25rem;
742
+ --type-display-xl-letterSpacing: -0.045em;
743
+ --type-display-xl-weight: 800;
725
744
  --type-display-lg-size: 3.5rem;
726
745
  --type-display-lg-lineHeight: 3.75rem;
727
746
  --type-display-lg-letterSpacing: -0.03em;
package/dist/js/generated/native.d.ts CHANGED
@@ -649,6 +649,13 @@ export declare const native: {
649
649
  };
650
650
  };
651
651
  readonly type: {
652
+ readonly "display-xl": {
653
+ readonly family: "display";
654
+ readonly weight: 800;
655
+ readonly size: 64;
656
+ readonly lineHeight: 68;
657
+ readonly letterSpacing: -2.88;
658
+ };
652
659
  readonly "display-lg": {
653
660
  readonly family: "display";
654
661
  readonly weight: 700;
package/dist/js/generated/native.js CHANGED
@@ -651,6 +651,13 @@ export const native = {
651
651
  }
652
652
  },
653
653
  "type": {
654
+ "display-xl": {
655
+ "family": "display",
656
+ "weight": 800,
657
+ "size": 64,
658
+ "lineHeight": 68,
659
+ "letterSpacing": -2.88
660
+ },
654
661
  "display-lg": {
655
662
  "family": "display",
656
663
  "weight": 700,
package/dist/js/generated/tokens.d.ts CHANGED
@@ -654,6 +654,22 @@ export declare const tokens: {
654
654
  readonly "surface-muted": "linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)";
655
655
  readonly "eyebrow-chip": "linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%)";
656
656
  };
657
+ readonly marketing: {
658
+ readonly "hero-ambient": "radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%)";
659
+ readonly "button-gradient": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%)";
660
+ readonly "button-gradient-hover": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%)";
661
+ readonly "button-fg": "var(--color-palette-primary-100)";
662
+ readonly "button-shadow": "0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22)";
663
+ readonly "button-shadow-hover": "0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25)";
664
+ readonly "eyebrow-gradient": "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%)";
665
+ readonly "card-radius": "24px";
666
+ readonly "card-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38)";
667
+ readonly "card-shadow-hover": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48)";
668
+ readonly "float-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45)";
669
+ readonly "accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)";
670
+ readonly lift: "-6px";
671
+ readonly "button-lift": "-2px";
672
+ };
657
673
  readonly duration: {
658
674
  readonly instant: "0ms";
659
675
  readonly fast: "150ms";
@@ -768,6 +784,7 @@ export declare const tokens: {
768
784
  readonly xl: "1280px";
769
785
  readonly "2xl": "1536px";
770
786
  readonly nexub: "1440px";
787
+ readonly marketing: "1280px";
771
788
  readonly prose: "65ch";
772
789
  };
773
790
  readonly font: {
@@ -867,6 +884,12 @@ export declare const tokens: {
867
884
  };
868
885
  };
869
886
  readonly type: {
887
+ readonly "display-xl": {
888
+ readonly size: "64px";
889
+ readonly lineHeight: "68px";
890
+ readonly letterSpacing: "-0.045em";
891
+ readonly weight: "800";
892
+ };
870
893
  readonly "display-lg": {
871
894
  readonly size: "56px";
872
895
  readonly lineHeight: "60px";
package/dist/js/generated/tokens.js CHANGED
@@ -656,6 +656,22 @@ export const tokens = {
656
656
  "surface-muted": "linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)",
657
657
  "eyebrow-chip": "linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%)"
658
658
  },
659
+ "marketing": {
660
+ "hero-ambient": "radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%)",
661
+ "button-gradient": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%)",
662
+ "button-gradient-hover": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%)",
663
+ "button-fg": "var(--color-palette-primary-100)",
664
+ "button-shadow": "0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22)",
665
+ "button-shadow-hover": "0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25)",
666
+ "eyebrow-gradient": "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%)",
667
+ "card-radius": "24px",
668
+ "card-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38)",
669
+ "card-shadow-hover": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48)",
670
+ "float-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45)",
671
+ "accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)",
672
+ "lift": "-6px",
673
+ "button-lift": "-2px"
674
+ },
659
675
  "duration": {
660
676
  "instant": "0ms",
661
677
  "fast": "150ms",
@@ -770,6 +786,7 @@ export const tokens = {
770
786
  "xl": "1280px",
771
787
  "2xl": "1536px",
772
788
  "nexub": "1440px",
789
+ "marketing": "1280px",
773
790
  "prose": "65ch"
774
791
  },
775
792
  "font": {
@@ -869,6 +886,12 @@ export const tokens = {
869
886
  }
870
887
  },
871
888
  "type": {
889
+ "display-xl": {
890
+ "size": "64px",
891
+ "lineHeight": "68px",
892
+ "letterSpacing": "-0.045em",
893
+ "weight": "800"
894
+ },
872
895
  "display-lg": {
873
896
  "size": "56px",
874
897
  "lineHeight": "60px",
package/dist/json/tokens.json CHANGED
@@ -564,6 +564,20 @@
564
564
  "gradient-surface-soft": "linear-gradient(135deg, rgba(64,153,241,0.04) 0%, rgba(28,206,102,0.03) 100%)",
565
565
  "gradient-surface-muted": "linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)",
566
566
  "gradient-eyebrow-chip": "linear-gradient(90deg, rgba(64,153,241,0.12) 0%, rgba(28,206,102,0.08) 100%)",
567
+ "marketing-hero-ambient": "radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%)",
568
+ "marketing-button-gradient": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-40) 100%)",
569
+ "marketing-button-gradient-hover": "linear-gradient(180deg, var(--color-palette-primary-45) 0%, var(--color-palette-primary-35) 100%)",
570
+ "marketing-button-fg": "var(--color-palette-primary-100)",
571
+ "marketing-button-shadow": "0 14px 30px -12px color-mix(in srgb, var(--color-palette-primary-40) 65%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.22)",
572
+ "marketing-button-shadow-hover": "0 20px 36px -12px color-mix(in srgb, var(--color-palette-primary-40) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25)",
573
+ "marketing-eyebrow-gradient": "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-container-lowest)) 0%, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-container-lowest)) 100%)",
574
+ "marketing-card-radius": "24px",
575
+ "marketing-card-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 18px 40px -28px rgb(15 23 42 / 0.38)",
576
+ "marketing-card-shadow-hover": "0 0 0 1px light-dark(rgb(26 28 30 / 0.06), rgb(255 255 255 / 0.08)), 0 30px 60px -28px rgb(15 23 42 / 0.48)",
577
+ "marketing-float-shadow": "0 0 0 1px light-dark(rgb(26 28 30 / 0.05), rgb(255 255 255 / 0.08)), 0 24px 50px -22px rgb(15 23 42 / 0.45)",
578
+ "marketing-accent-line": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-bookub) 35%, var(--color-founderub) 70%, var(--color-payub) 100%)",
579
+ "marketing-lift": "-6px",
580
+ "marketing-button-lift": "-2px",
567
581
  "duration-instant": "0ms",
568
582
  "duration-fast": "150ms",
569
583
  "duration-normal": "200ms",
@@ -655,6 +669,7 @@
655
669
  "container-xl": "1280px",
656
670
  "container-2xl": "1536px",
657
671
  "container-nexub": "1440px",
672
+ "container-marketing": "1280px",
658
673
  "container-prose": "65ch",
659
674
  "font-family-sans": "'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif",
660
675
  "font-family-display": "'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', 'Inter Variable', ui-sans-serif, system-ui, sans-serif",
@@ -718,6 +733,10 @@
718
733
  "text-code-lineHeight": "1.6",
719
734
  "text-code-letterSpacing": "0",
720
735
  "text-code-weight": "400",
736
+ "type-display-xl-size": "64px",
737
+ "type-display-xl-lineHeight": "68px",
738
+ "type-display-xl-letterSpacing": "-0.045em",
739
+ "type-display-xl-weight": "800",
721
740
  "type-display-lg-size": "56px",
722
741
  "type-display-lg-lineHeight": "60px",
723
742
  "type-display-lg-letterSpacing": "-0.03em",
package/dist/tailwind/preset.js CHANGED
@@ -695,6 +695,7 @@ const preset = {
695
695
  "container-xl": "var(--container-xl)",
696
696
  "container-2xl": "var(--container-2xl)",
697
697
  "container-nexub": "var(--container-nexub)",
698
+ "container-marketing": "var(--container-marketing)",
698
699
  "container-prose": "var(--container-prose)"
699
700
  },
700
701
  "borderRadius": {
@@ -756,6 +757,14 @@ const preset = {
756
757
  "tamil": "var(--font-family-tamil)"
757
758
  },
758
759
  "fontSize": {
760
+ "display-xl": [
761
+ "var(--type-display-xl-size)",
762
+ {
763
+ "lineHeight": "var(--type-display-xl-lineHeight)",
764
+ "letterSpacing": "var(--type-display-xl-letterSpacing)",
765
+ "fontWeight": "var(--type-display-xl-weight)"
766
+ }
767
+ ],
759
768
  "display-lg": [
760
769
  "var(--type-display-lg-size)",
761
770
  {
package/dist/tailwind/theme.css CHANGED
@@ -639,6 +639,7 @@
639
639
  --spacing-container-xl: var(--container-xl);
640
640
  --spacing-container-2xl: var(--container-2xl);
641
641
  --spacing-container-nexub: var(--container-nexub);
642
+ --spacing-container-marketing: var(--container-marketing);
642
643
  --spacing-container-prose: var(--container-prose);
643
644
  --radius-none: var(--radius-none);
644
645
  --radius-xs: var(--radius-xs);
@@ -690,6 +691,10 @@
690
691
  --font-mono: var(--font-family-mono);
691
692
  --font-devanagari: var(--font-family-devanagari);
692
693
  --font-tamil: var(--font-family-tamil);
694
+ --text-display-xl: var(--type-display-xl-size);
695
+ --text-display-xl--line-height: var(--type-display-xl-lineHeight);
696
+ --text-display-xl--letter-spacing: var(--type-display-xl-letterSpacing);
697
+ --text-display-xl--font-weight: var(--type-display-xl-weight);
693
698
  --text-display-lg: var(--type-display-lg-size);
694
699
  --text-display-lg--line-height: var(--type-display-lg-lineHeight);
695
700
  --text-display-lg--letter-spacing: var(--type-display-lg-letterSpacing);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexub/tokens",
3
- "version": "3.0.0",
3
+ "version": "3.2.0",
4
4
  "description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables, Tailwind presets and React Native objects.",
5
5
  "type": "module",
6
6
  "license": "MIT",