@gsk_poc/components 0.1.5 → 0.1.6

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.5",
3
+ "version": "0.1.6",
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.5",
43
+ "@gsk_poc/untitled-ui-base": "^0.1.6",
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: #ff7237;
136
+ --colors-brand-600: #24cb71;
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: #ff7237;
399
- --colors-text-text-brand-tertiary-alt: #ff7237;
398
+ --colors-text-text-brand-tertiary-600: #24cb71;
399
+ --colors-text-text-brand-tertiary-alt: #24cb71;
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: #ff7237;
411
+ --colors-border-border-brand-alt: #24cb71;
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: #ff7237;
425
- --colors-foreground-fg-brand-primary-alt: #ff7237;
424
+ --colors-foreground-fg-brand-primary-600: #24cb71;
425
+ --colors-foreground-fg-brand-primary-alt: #24cb71;
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: #ff7237;
428
+ --colors-foreground-fg-brand-secondary-hover: #24cb71;
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: #ff7237;
453
+ --colors-background-bg-brand-solid: #24cb71;
454
454
  --colors-background-bg-brand-solid-hover: #dc3e05;
455
- --colors-background-bg-brand-section: #ff7237;
455
+ --colors-background-bg-brand-section: #24cb71;
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,6 +519,86 @@
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;
522
602
  --width-move-width-lg: 1024px;
523
603
  --width-move-width-md: 768px;
524
604
  --component-colors-alpha-alpha-white-10: rgba(255, 255, 255, 0.1);
@@ -571,8 +651,8 @@
571
651
  --component-colors-utility-brand-utility-brand-400-alt: #f7855c;
572
652
  --component-colors-utility-brand-utility-brand-500: #f67547;
573
653
  --component-colors-utility-brand-utility-brand-500-alt: #f67547;
574
- --component-colors-utility-brand-utility-brand-600: #ff7237;
575
- --component-colors-utility-brand-utility-brand-600-alt: #ff7237;
654
+ --component-colors-utility-brand-utility-brand-600: #24cb71;
655
+ --component-colors-utility-brand-utility-brand-600-alt: #24cb71;
576
656
  --component-colors-utility-brand-utility-brand-700: #dc3e05;
577
657
  --component-colors-utility-brand-utility-brand-700-alt: #dc3e05;
578
658
  --component-colors-utility-brand-utility-brand-800: #c33704;
@@ -698,16 +778,16 @@
698
778
  --component-colors-components-buttons-button-destructive-primary-icon: #fda29b;
699
779
  --component-colors-components-buttons-button-destructive-primary-icon-hover: #fecdca;
700
780
  --component-colors-components-buttons-primary-button-primary-fg: #ffffff;
701
- --component-colors-components-buttons-primary-button-primary-bg: #ff7237;
781
+ --component-colors-components-buttons-primary-button-primary-bg: #24cb71;
702
782
  --component-colors-components-buttons-primary-button-primary-border: rgba(255, 255, 255, 0.12);
703
783
  --component-colors-components-buttons-secondary-button-secondary-fg: #44403c;
704
784
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: #dc3e05;
705
785
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: #b42318;
706
786
  --component-colors-components-footers-footer-button-fg: #fac2ad;
707
787
  --component-colors-components-footers-footer-button-fg-hover: #ffffff;
708
- --component-colors-components-icons-icons-icon-fg-brand: #ff7237;
788
+ --component-colors-components-icons-icons-icon-fg-brand: #24cb71;
709
789
  --component-colors-components-icons-icons-icon-fg-brand-on-brand: #fac2ad;
710
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #ff7237;
790
+ --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #24cb71;
711
791
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: #79716b;
712
792
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: #c83629;
713
793
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: #ffc709;
@@ -715,93 +795,13 @@
715
795
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #ffffff;
716
796
  --component-colors-components-mockups-screen-mockup-border: #151515;
717
797
  --component-colors-components-sliders-slider-handle-bg: #ffffff;
718
- --component-colors-components-sliders-slider-handle-border: #ff7237;
798
+ --component-colors-components-sliders-slider-handle-border: #24cb71;
719
799
  --component-colors-components-toggles-toggle-button-fg-disabled: #f7f6f5;
720
800
  --component-colors-components-toggles-toggle-border: #d7d3d0;
721
- --component-colors-components-toggles-toggle-slim-border-pressed: #ff7237;
801
+ --component-colors-components-toggles-toggle-slim-border-pressed: #24cb71;
722
802
  --component-colors-components-toggles-toggle-slim-border-pressed-hover: #dc3e05;
723
803
  --component-colors-components-tooltips-tooltip-supporting-text: #d7d3d0;
724
804
  --component-colors-components-text-editor-text-editor-icon-fg: #a9a29d;
725
805
  --component-colors-components-text-editor-text-editor-icon-fg-active: #79716b;
726
806
  --component-colors-components-header-sections-brand-header-header-brand-text-secondary: #fac2ad;
727
- --width-xxs: 320px;
728
- --width-xs: 384px;
729
- --width-sm: 480px;
730
- --width-md: 560px;
731
- --width-lg: 640px;
732
- --width-xl: 768px;
733
- --width-2xl: 1024px;
734
- --width-3xl: 1280px;
735
- --width-4xl: 1440px;
736
- --width-5xl: 1600px;
737
- --width-6xl: 1920px;
738
- --paragraph-max-width: 720px;
739
- --spacing-none: 0px;
740
- --spacing-xxs: 2px;
741
- --spacing-xs: 4px;
742
- --spacing-sm: 6px;
743
- --spacing-md: 8px;
744
- --spacing-lg: 12px;
745
- --spacing-xl: 16px;
746
- --spacing-2xl: 20px;
747
- --spacing-3xl: 24px;
748
- --spacing-4xl: 32px;
749
- --spacing-5xl: 40px;
750
- --spacing-6xl: 48px;
751
- --spacing-7xl: 64px;
752
- --spacing-8xl: 80px;
753
- --spacing-9xl: 96px;
754
- --spacing-10xl: 128px;
755
- --spacing-11xl: 160px;
756
- --font-family-font-family-display: GSK Precision;
757
- --font-family-font-family-body: Arial;
758
- --font-weight-regular: Regular;
759
- --font-weight-regular-italic: Italic;
760
- --font-weight-medium: Regular;
761
- --font-weight-medium-italic: Italic;
762
- --font-weight-semibold: Regular;
763
- --font-weight-semibold-italic: Italic;
764
- --font-weight-bold: Bold;
765
- --font-weight-bold-italic: Bold Italic;
766
- --font-size-text-3xs: 8px;
767
- --font-size-text-2xs: 10px;
768
- --font-size-text-xs: 12px;
769
- --font-size-text-sm: 14px;
770
- --font-size-text-md: 16px;
771
- --font-size-text-lg: 18px;
772
- --font-size-text-xl: 20px;
773
- --font-size-display-xs: 24px;
774
- --font-size-display-sm: 30px;
775
- --font-size-display-md: 36px;
776
- --font-size-display-lg: 48px;
777
- --font-size-display-xl: 60px;
778
- --font-size-display-2xl: 72px;
779
- --line-height-text-3xs: 10px;
780
- --line-height-text-2xs: 12px;
781
- --line-height-text-xs: 18px;
782
- --line-height-text-sm: 20px;
783
- --line-height-text-md: 24px;
784
- --line-height-text-lg: 28px;
785
- --line-height-text-xl: 30px;
786
- --line-height-display-xs: 32px;
787
- --line-height-display-sm: 38px;
788
- --line-height-display-md: 44px;
789
- --line-height-display-lg: 60px;
790
- --line-height-display-xl: 72px;
791
- --line-height-display-2xl: 90px;
792
- --radius-none: 0;
793
- --radius-xxs: 0.125rem;
794
- --radius-xs: 0.25rem;
795
- --radius-sm: 0.375rem;
796
- --radius-md: 0.5rem;
797
- --radius-lg: 0.625rem;
798
- --radius-xl: 0.75rem;
799
- --radius-2xl: 1rem;
800
- --radius-3xl: 1.25rem;
801
- --radius-4xl: 1.5rem;
802
- --radius-full: 9999px;
803
- --container-padding-mobile: 16px;
804
- --container-padding-desktop: 32px;
805
- --container-max-width-desktop: 1280px;
806
- --approach-2-container-max-width: 1280px;
807
807
  }