@gsk_poc/untitled-ui-base 0.1.3 → 0.1.4

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 +1 -1
  2. package/styles/tokens.css +43 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gsk_poc/untitled-ui-base",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "GSK wrapper for Untitled UI React components with custom design tokens",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
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: #53389e;
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: #53389e;
399
+ --colors-text-text-brand-tertiary-alt: #53389e;
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: #53389e;
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: #53389e;
425
+ --colors-foreground-fg-brand-primary-alt: #53389e;
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: #53389e;
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: #53389e;
454
454
  --colors-background-bg-brand-solid-hover: #dc3e05;
455
- --colors-background-bg-brand-section: #ff7237;
455
+ --colors-background-bg-brand-section: #53389e;
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;
@@ -571,8 +571,8 @@
571
571
  --component-colors-utility-brand-utility-brand-400-alt: #f7855c;
572
572
  --component-colors-utility-brand-utility-brand-500: #f67547;
573
573
  --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;
574
+ --component-colors-utility-brand-utility-brand-600: #53389e;
575
+ --component-colors-utility-brand-utility-brand-600-alt: #53389e;
576
576
  --component-colors-utility-brand-utility-brand-700: #dc3e05;
577
577
  --component-colors-utility-brand-utility-brand-700-alt: #dc3e05;
578
578
  --component-colors-utility-brand-utility-brand-800: #c33704;
@@ -698,16 +698,16 @@
698
698
  --component-colors-components-buttons-button-destructive-primary-icon: #fda29b;
699
699
  --component-colors-components-buttons-button-destructive-primary-icon-hover: #fecdca;
700
700
  --component-colors-components-buttons-primary-button-primary-fg: #ffffff;
701
- --component-colors-components-buttons-primary-button-primary-bg: #ff7237;
701
+ --component-colors-components-buttons-primary-button-primary-bg: #53389e;
702
702
  --component-colors-components-buttons-primary-button-primary-border: rgba(255, 255, 255, 0.12);
703
703
  --component-colors-components-buttons-secondary-button-secondary-fg: #44403c;
704
704
  --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: #dc3e05;
705
705
  --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: #b42318;
706
706
  --component-colors-components-footers-footer-button-fg: #fac2ad;
707
707
  --component-colors-components-footers-footer-button-fg-hover: #ffffff;
708
- --component-colors-components-icons-icons-icon-fg-brand: #ff7237;
708
+ --component-colors-components-icons-icons-icon-fg-brand: #53389e;
709
709
  --component-colors-components-icons-icons-icon-fg-brand-on-brand: #fac2ad;
710
- --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #ff7237;
710
+ --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #53389e;
711
711
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: #79716b;
712
712
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: #c83629;
713
713
  --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: #ffc709;
@@ -715,19 +715,38 @@
715
715
  --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #ffffff;
716
716
  --component-colors-components-mockups-screen-mockup-border: #151515;
717
717
  --component-colors-components-sliders-slider-handle-bg: #ffffff;
718
- --component-colors-components-sliders-slider-handle-border: #ff7237;
718
+ --component-colors-components-sliders-slider-handle-border: #53389e;
719
719
  --component-colors-components-toggles-toggle-button-fg-disabled: #f7f6f5;
720
720
  --component-colors-components-toggles-toggle-border: #d7d3d0;
721
- --component-colors-components-toggles-toggle-slim-border-pressed: #ff7237;
721
+ --component-colors-components-toggles-toggle-slim-border-pressed: #53389e;
722
722
  --component-colors-components-toggles-toggle-slim-border-pressed-hover: #dc3e05;
723
723
  --component-colors-components-tooltips-tooltip-supporting-text: #d7d3d0;
724
724
  --component-colors-components-text-editor-text-editor-icon-fg: #a9a29d;
725
725
  --component-colors-components-text-editor-text-editor-icon-fg-active: #79716b;
726
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;
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
+ --radius-none: 0;
740
+ --radius-xxs: 0.125rem;
741
+ --radius-xs: 0.25rem;
742
+ --radius-sm: 0.375rem;
743
+ --radius-md: 1rem;
744
+ --radius-lg: 0.625rem;
745
+ --radius-xl: 0.75rem;
746
+ --radius-2xl: 1rem;
747
+ --radius-3xl: 1.25rem;
748
+ --radius-4xl: 1.5rem;
749
+ --radius-full: 9999px;
731
750
  --font-family-font-family-display: GSK Precision;
732
751
  --font-family-font-family-body: sans-serif;
733
752
  --font-weight-regular: Regular;
@@ -781,27 +800,8 @@
781
800
  --spacing-9xl: 96px;
782
801
  --spacing-10xl: 128px;
783
802
  --spacing-11xl: 160px;
784
- --radius-none: 0;
785
- --radius-xxs: 0.125rem;
786
- --radius-xs: 0.25rem;
787
- --radius-sm: 0.375rem;
788
- --radius-md: 1rem;
789
- --radius-lg: 0.625rem;
790
- --radius-xl: 0.75rem;
791
- --radius-2xl: 1rem;
792
- --radius-3xl: 1.25rem;
793
- --radius-4xl: 1.5rem;
794
- --radius-full: 9999px;
795
- --width-xxs: 320px;
796
- --width-xs: 384px;
797
- --width-sm: 480px;
798
- --width-md: 560px;
799
- --width-lg: 640px;
800
- --width-xl: 768px;
801
- --width-2xl: 1024px;
802
- --width-3xl: 1280px;
803
- --width-4xl: 1440px;
804
- --width-5xl: 1600px;
805
- --width-6xl: 1920px;
806
- --paragraph-max-width: 720px;
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
  }