@gsk_poc/components 0.1.6 → 0.1.7

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 +2 -2
  2. package/styles/tokens.css +96 -96
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gsk_poc/components",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "GSK custom component library with design tokens",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -40,7 +40,7 @@
40
40
  "react-dom": "^18.0.0 || ^19.0.0"
41
41
  },
42
42
  "dependencies": {
43
- "@gsk_poc/untitled-ui-base": "^0.1.6",
43
+ "@gsk_poc/untitled-ui-base": "^0.1.7",
44
44
  "@tailwindcss/vite": "^4.1.17",
45
45
  "react-is": "^19.2.1",
46
46
  "tailwind-merge": "^3.4.0",
package/styles/tokens.css CHANGED
@@ -133,7 +133,7 @@
133
133
  --colors-brand-300: #f8a385;
134
134
  --colors-brand-400: #f7855c;
135
135
  --colors-brand-500: #f67547;
136
- --colors-brand-600: #24cb71;
136
+ --colors-brand-600: #874fff;
137
137
  --colors-brand-700: #dc3e05;
138
138
  --colors-brand-800: #c33704;
139
139
  --colors-brand-900: #a53208;
@@ -395,8 +395,8 @@
395
395
  --colors-text-text-brand-primary-900: #a53208;
396
396
  --colors-text-text-brand-secondary-700: #dc3e05;
397
397
  --colors-text-text-brand-secondary-hover: #c33704;
398
- --colors-text-text-brand-tertiary-600: #24cb71;
399
- --colors-text-text-brand-tertiary-alt: #24cb71;
398
+ --colors-text-text-brand-tertiary-600: #874fff;
399
+ --colors-text-text-brand-tertiary-alt: #874fff;
400
400
  --colors-text-text-error-primary-600: #c83629;
401
401
  --colors-text-text-error-primary-hover: #b42318;
402
402
  --colors-text-text-warning-primary-600: #ffc709;
@@ -408,7 +408,7 @@
408
408
  --colors-border-border-disabled: #d7d3d0;
409
409
  --colors-border-border-disabled-subtle: #e4e3e1;
410
410
  --colors-border-border-brand: #f67547;
411
- --colors-border-border-brand-alt: #24cb71;
411
+ --colors-border-border-brand-alt: #874fff;
412
412
  --colors-border-border-error: #f04438;
413
413
  --colors-border-border-error-subtle: #fda29b;
414
414
  --colors-foreground-fg-primary-900: #151515;
@@ -421,11 +421,11 @@
421
421
  --colors-foreground-fg-white: #ffffff;
422
422
  --colors-foreground-fg-disabled: #d7d3d0;
423
423
  --colors-foreground-fg-disabled-subtle: #e4e3e1;
424
- --colors-foreground-fg-brand-primary-600: #24cb71;
425
- --colors-foreground-fg-brand-primary-alt: #24cb71;
424
+ --colors-foreground-fg-brand-primary-600: #874fff;
425
+ --colors-foreground-fg-brand-primary-alt: #874fff;
426
426
  --colors-foreground-fg-brand-secondary-500: #f67547;
427
427
  --colors-foreground-fg-brand-secondary-alt: #f67547;
428
- --colors-foreground-fg-brand-secondary-hover: #24cb71;
428
+ --colors-foreground-fg-brand-secondary-hover: #874fff;
429
429
  --colors-foreground-fg-error-primary: #c83629;
430
430
  --colors-foreground-fg-error-secondary: #f04438;
431
431
  --colors-foreground-fg-warning-primary: #ffc709;
@@ -450,9 +450,9 @@
450
450
  --colors-background-bg-brand-primary: #fef4f0;
451
451
  --colors-background-bg-brand-primary-alt: #fef4f0;
452
452
  --colors-background-bg-brand-secondary: #fde0d6;
453
- --colors-background-bg-brand-solid: #24cb71;
453
+ --colors-background-bg-brand-solid: #874fff;
454
454
  --colors-background-bg-brand-solid-hover: #dc3e05;
455
- --colors-background-bg-brand-section: #24cb71;
455
+ --colors-background-bg-brand-section: #874fff;
456
456
  --colors-background-bg-brand-section-subtle: #dc3e05;
457
457
  --colors-background-bg-error-primary: #fef3f2;
458
458
  --colors-background-bg-error-secondary: #fee4e2;
@@ -519,86 +519,6 @@
519
519
  --spacing-480-1-920px: 1920px;
520
520
  --spacing-0-5-2px: 2px;
521
521
  --spacing-1-5-6px: 6px;
522
- --container-padding-mobile: 16px;
523
- --container-padding-desktop: 32px;
524
- --container-max-width-desktop: 1280px;
525
- --approach-2-container-max-width: 1280px;
526
- --width-xxs: 320px;
527
- --width-xs: 384px;
528
- --width-sm: 480px;
529
- --width-md: 560px;
530
- --width-lg: 640px;
531
- --width-xl: 768px;
532
- --width-2xl: 1024px;
533
- --width-3xl: 1280px;
534
- --width-4xl: 1440px;
535
- --width-5xl: 1600px;
536
- --width-6xl: 1920px;
537
- --paragraph-max-width: 720px;
538
- --radius-none: 0;
539
- --radius-xxs: 0.125rem;
540
- --radius-xs: 0.25rem;
541
- --radius-sm: 0.375rem;
542
- --radius-md: 0.5rem;
543
- --radius-lg: 0.625rem;
544
- --radius-xl: 0.75rem;
545
- --radius-2xl: 1rem;
546
- --radius-3xl: 1.25rem;
547
- --radius-4xl: 1.5rem;
548
- --radius-full: 9999px;
549
- --font-family-font-family-display: GSK Precision;
550
- --font-family-font-family-body: Arial;
551
- --font-weight-regular: Regular;
552
- --font-weight-regular-italic: Italic;
553
- --font-weight-medium: Regular;
554
- --font-weight-medium-italic: Italic;
555
- --font-weight-semibold: Regular;
556
- --font-weight-semibold-italic: Italic;
557
- --font-weight-bold: Bold;
558
- --font-weight-bold-italic: Bold Italic;
559
- --font-size-text-3xs: 8px;
560
- --font-size-text-2xs: 10px;
561
- --font-size-text-xs: 12px;
562
- --font-size-text-sm: 14px;
563
- --font-size-text-md: 16px;
564
- --font-size-text-lg: 18px;
565
- --font-size-text-xl: 20px;
566
- --font-size-display-xs: 24px;
567
- --font-size-display-sm: 30px;
568
- --font-size-display-md: 36px;
569
- --font-size-display-lg: 48px;
570
- --font-size-display-xl: 60px;
571
- --font-size-display-2xl: 72px;
572
- --line-height-text-3xs: 10px;
573
- --line-height-text-2xs: 12px;
574
- --line-height-text-xs: 18px;
575
- --line-height-text-sm: 20px;
576
- --line-height-text-md: 24px;
577
- --line-height-text-lg: 28px;
578
- --line-height-text-xl: 30px;
579
- --line-height-display-xs: 32px;
580
- --line-height-display-sm: 38px;
581
- --line-height-display-md: 44px;
582
- --line-height-display-lg: 60px;
583
- --line-height-display-xl: 72px;
584
- --line-height-display-2xl: 90px;
585
- --spacing-none: 0px;
586
- --spacing-xxs: 2px;
587
- --spacing-xs: 4px;
588
- --spacing-sm: 6px;
589
- --spacing-md: 8px;
590
- --spacing-lg: 12px;
591
- --spacing-xl: 16px;
592
- --spacing-2xl: 20px;
593
- --spacing-3xl: 24px;
594
- --spacing-4xl: 32px;
595
- --spacing-5xl: 40px;
596
- --spacing-6xl: 48px;
597
- --spacing-7xl: 64px;
598
- --spacing-8xl: 80px;
599
- --spacing-9xl: 96px;
600
- --spacing-10xl: 128px;
601
- --spacing-11xl: 160px;
602
522
  --width-move-width-lg: 1024px;
603
523
  --width-move-width-md: 768px;
604
524
  --component-colors-alpha-alpha-white-10: rgba(255, 255, 255, 0.1);
@@ -651,8 +571,8 @@
651
571
  --component-colors-utility-brand-utility-brand-400-alt: #f7855c;
652
572
  --component-colors-utility-brand-utility-brand-500: #f67547;
653
573
  --component-colors-utility-brand-utility-brand-500-alt: #f67547;
654
- --component-colors-utility-brand-utility-brand-600: #24cb71;
655
- --component-colors-utility-brand-utility-brand-600-alt: #24cb71;
574
+ --component-colors-utility-brand-utility-brand-600: #874fff;
575
+ --component-colors-utility-brand-utility-brand-600-alt: #874fff;
656
576
  --component-colors-utility-brand-utility-brand-700: #dc3e05;
657
577
  --component-colors-utility-brand-utility-brand-700-alt: #dc3e05;
658
578
  --component-colors-utility-brand-utility-brand-800: #c33704;
@@ -778,16 +698,16 @@
778
698
  --component-colors-components-buttons-button-destructive-primary-icon: #fda29b;
779
699
  --component-colors-components-buttons-button-destructive-primary-icon-hover: #fecdca;
780
700
  --component-colors-components-buttons-primary-button-primary-fg: #ffffff;
781
- --component-colors-components-buttons-primary-button-primary-bg: #24cb71;
701
+ --component-colors-components-buttons-primary-button-primary-bg: #874fff;
782
702
  --component-colors-components-buttons-primary-button-primary-border: rgba(255, 255, 255, 0.12);
783
703
  --component-colors-components-buttons-secondary-button-secondary-fg: #44403c;
784
704
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: #dc3e05;
785
705
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: #b42318;
786
706
  --component-colors-components-footers-footer-button-fg: #fac2ad;
787
707
  --component-colors-components-footers-footer-button-fg-hover: #ffffff;
788
- --component-colors-components-icons-icons-icon-fg-brand: #24cb71;
708
+ --component-colors-components-icons-icons-icon-fg-brand: #874fff;
789
709
  --component-colors-components-icons-icons-icon-fg-brand-on-brand: #fac2ad;
790
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #24cb71;
710
+ --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #874fff;
791
711
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: #79716b;
792
712
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: #c83629;
793
713
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: #ffc709;
@@ -795,13 +715,93 @@
795
715
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #ffffff;
796
716
  --component-colors-components-mockups-screen-mockup-border: #151515;
797
717
  --component-colors-components-sliders-slider-handle-bg: #ffffff;
798
- --component-colors-components-sliders-slider-handle-border: #24cb71;
718
+ --component-colors-components-sliders-slider-handle-border: #874fff;
799
719
  --component-colors-components-toggles-toggle-button-fg-disabled: #f7f6f5;
800
720
  --component-colors-components-toggles-toggle-border: #d7d3d0;
801
- --component-colors-components-toggles-toggle-slim-border-pressed: #24cb71;
721
+ --component-colors-components-toggles-toggle-slim-border-pressed: #874fff;
802
722
  --component-colors-components-toggles-toggle-slim-border-pressed-hover: #dc3e05;
803
723
  --component-colors-components-tooltips-tooltip-supporting-text: #d7d3d0;
804
724
  --component-colors-components-text-editor-text-editor-icon-fg: #a9a29d;
805
725
  --component-colors-components-text-editor-text-editor-icon-fg-active: #79716b;
806
726
  --component-colors-components-header-sections-brand-header-header-brand-text-secondary: #fac2ad;
727
+ --container-padding-mobile: 16px;
728
+ --container-padding-desktop: 32px;
729
+ --container-max-width-desktop: 1280px;
730
+ --approach-2-container-max-width: 1280px;
731
+ --width-xxs: 320px;
732
+ --width-xs: 384px;
733
+ --width-sm: 480px;
734
+ --width-md: 560px;
735
+ --width-lg: 640px;
736
+ --width-xl: 768px;
737
+ --width-2xl: 1024px;
738
+ --width-3xl: 1280px;
739
+ --width-4xl: 1440px;
740
+ --width-5xl: 1600px;
741
+ --width-6xl: 1920px;
742
+ --paragraph-max-width: 720px;
743
+ --spacing-none: 0px;
744
+ --spacing-xxs: 2px;
745
+ --spacing-xs: 4px;
746
+ --spacing-sm: 6px;
747
+ --spacing-md: 8px;
748
+ --spacing-lg: 12px;
749
+ --spacing-xl: 16px;
750
+ --spacing-2xl: 20px;
751
+ --spacing-3xl: 24px;
752
+ --spacing-4xl: 32px;
753
+ --spacing-5xl: 40px;
754
+ --spacing-6xl: 48px;
755
+ --spacing-7xl: 64px;
756
+ --spacing-8xl: 80px;
757
+ --spacing-9xl: 96px;
758
+ --spacing-10xl: 128px;
759
+ --spacing-11xl: 160px;
760
+ --font-family-font-family-display: GSK Precision;
761
+ --font-family-font-family-body: Arial;
762
+ --font-weight-regular: Regular;
763
+ --font-weight-regular-italic: Italic;
764
+ --font-weight-medium: Regular;
765
+ --font-weight-medium-italic: Italic;
766
+ --font-weight-semibold: Regular;
767
+ --font-weight-semibold-italic: Italic;
768
+ --font-weight-bold: Bold;
769
+ --font-weight-bold-italic: Bold Italic;
770
+ --font-size-text-3xs: 8px;
771
+ --font-size-text-2xs: 10px;
772
+ --font-size-text-xs: 12px;
773
+ --font-size-text-sm: 14px;
774
+ --font-size-text-md: 16px;
775
+ --font-size-text-lg: 18px;
776
+ --font-size-text-xl: 20px;
777
+ --font-size-display-xs: 24px;
778
+ --font-size-display-sm: 30px;
779
+ --font-size-display-md: 36px;
780
+ --font-size-display-lg: 48px;
781
+ --font-size-display-xl: 60px;
782
+ --font-size-display-2xl: 72px;
783
+ --line-height-text-3xs: 10px;
784
+ --line-height-text-2xs: 12px;
785
+ --line-height-text-xs: 18px;
786
+ --line-height-text-sm: 20px;
787
+ --line-height-text-md: 24px;
788
+ --line-height-text-lg: 28px;
789
+ --line-height-text-xl: 30px;
790
+ --line-height-display-xs: 32px;
791
+ --line-height-display-sm: 38px;
792
+ --line-height-display-md: 44px;
793
+ --line-height-display-lg: 60px;
794
+ --line-height-display-xl: 72px;
795
+ --line-height-display-2xl: 90px;
796
+ --radius-none: 0;
797
+ --radius-xxs: 0.125rem;
798
+ --radius-xs: 0.25rem;
799
+ --radius-sm: 0.375rem;
800
+ --radius-md: 0.5rem;
801
+ --radius-lg: 0.625rem;
802
+ --radius-xl: 0.75rem;
803
+ --radius-2xl: 1rem;
804
+ --radius-3xl: 1.25rem;
805
+ --radius-4xl: 1.5rem;
806
+ --radius-full: 9999px;
807
807
  }