@gsk_poc/untitled-ui-base 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsk_poc/untitled-ui-base",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "GSK wrapper for Untitled UI React components with custom design tokens",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/styles/tokens.css

@@ -133,7 +133,7 @@
   --colors-brand-300: #f8a385;
   --colors-brand-400: #f7855c;
   --colors-brand-500: #f67547;
-  --colors-brand-600: #58ff55;
+  --colors-brand-600: #ff7237;
   --colors-brand-700: #dc3e05;
   --colors-brand-800: #c33704;
   --colors-brand-900: #a53208;
@@ -395,8 +395,8 @@
   --colors-text-text-brand-primary-900: #a53208;
   --colors-text-text-brand-secondary-700: #dc3e05;
   --colors-text-text-brand-secondary-hover: #c33704;
-  --colors-text-text-brand-tertiary-600: #58ff55;
-  --colors-text-text-brand-tertiary-alt: #58ff55;
+  --colors-text-text-brand-tertiary-600: #ff7237;
+  --colors-text-text-brand-tertiary-alt: #ff7237;
   --colors-text-text-error-primary-600: #c83629;
   --colors-text-text-error-primary-hover: #b42318;
   --colors-text-text-warning-primary-600: #ffc709;
@@ -408,7 +408,7 @@
   --colors-border-border-disabled: #d7d3d0;
   --colors-border-border-disabled-subtle: #e4e3e1;
   --colors-border-border-brand: #f67547;
-  --colors-border-border-brand-alt: #58ff55;
+  --colors-border-border-brand-alt: #ff7237;
   --colors-border-border-error: #f04438;
   --colors-border-border-error-subtle: #fda29b;
   --colors-foreground-fg-primary-900: #151515;
@@ -421,11 +421,11 @@
   --colors-foreground-fg-white: #ffffff;
   --colors-foreground-fg-disabled: #d7d3d0;
   --colors-foreground-fg-disabled-subtle: #e4e3e1;
-  --colors-foreground-fg-brand-primary-600: #58ff55;
-  --colors-foreground-fg-brand-primary-alt: #58ff55;
+  --colors-foreground-fg-brand-primary-600: #ff7237;
+  --colors-foreground-fg-brand-primary-alt: #ff7237;
   --colors-foreground-fg-brand-secondary-500: #f67547;
   --colors-foreground-fg-brand-secondary-alt: #f67547;
-  --colors-foreground-fg-brand-secondary-hover: #58ff55;
+  --colors-foreground-fg-brand-secondary-hover: #ff7237;
   --colors-foreground-fg-error-primary: #c83629;
   --colors-foreground-fg-error-secondary: #f04438;
   --colors-foreground-fg-warning-primary: #ffc709;
@@ -450,9 +450,9 @@
   --colors-background-bg-brand-primary: #fef4f0;
   --colors-background-bg-brand-primary-alt: #fef4f0;
   --colors-background-bg-brand-secondary: #fde0d6;
-  --colors-background-bg-brand-solid: #58ff55;
+  --colors-background-bg-brand-solid: #ff7237;
   --colors-background-bg-brand-solid-hover: #dc3e05;
-  --colors-background-bg-brand-section: #58ff55;
+  --colors-background-bg-brand-section: #ff7237;
   --colors-background-bg-brand-section-subtle: #dc3e05;
   --colors-background-bg-error-primary: #fef3f2;
   --colors-background-bg-error-secondary: #fee4e2;
@@ -571,8 +571,8 @@
   --component-colors-utility-brand-utility-brand-400-alt: #f7855c;
   --component-colors-utility-brand-utility-brand-500: #f67547;
   --component-colors-utility-brand-utility-brand-500-alt: #f67547;
-  --component-colors-utility-brand-utility-brand-600: #58ff55;
-  --component-colors-utility-brand-utility-brand-600-alt: #58ff55;
+  --component-colors-utility-brand-utility-brand-600: #ff7237;
+  --component-colors-utility-brand-utility-brand-600-alt: #ff7237;
   --component-colors-utility-brand-utility-brand-700: #dc3e05;
   --component-colors-utility-brand-utility-brand-700-alt: #dc3e05;
   --component-colors-utility-brand-utility-brand-800: #c33704;
@@ -698,16 +698,16 @@
   --component-colors-components-buttons-button-destructive-primary-icon: #fda29b;
   --component-colors-components-buttons-button-destructive-primary-icon-hover: #fecdca;
   --component-colors-components-buttons-primary-button-primary-fg: #ffffff;
-  --component-colors-components-buttons-primary-button-primary-bg: #58ff55;
+  --component-colors-components-buttons-primary-button-primary-bg: #ff7237;
   --component-colors-components-buttons-primary-button-primary-border: rgba(255, 255, 255, 0.12);
   --component-colors-components-buttons-secondary-button-secondary-fg: #44403c;
   --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: #dc3e05;
   --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: #b42318;
   --component-colors-components-footers-footer-button-fg: #fac2ad;
   --component-colors-components-footers-footer-button-fg-hover: #ffffff;
-  --component-colors-components-icons-icons-icon-fg-brand: #58ff55;
+  --component-colors-components-icons-icons-icon-fg-brand: #ff7237;
   --component-colors-components-icons-icons-icon-fg-brand-on-brand: #fac2ad;
-  --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #58ff55;
+  --component-colors-components-icons-featured-icons-featured-icon-light-fg-brand: #ff7237;
   --component-colors-components-icons-featured-icons-featured-icon-light-fg-gray: #79716b;
   --component-colors-components-icons-featured-icons-featured-icon-light-fg-error: #c83629;
   --component-colors-components-icons-featured-icons-featured-icon-light-fg-warning: #ffc709;
@@ -715,55 +715,19 @@
   --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: #ffffff;
   --component-colors-components-mockups-screen-mockup-border: #151515;
   --component-colors-components-sliders-slider-handle-bg: #ffffff;
-  --component-colors-components-sliders-slider-handle-border: #58ff55;
+  --component-colors-components-sliders-slider-handle-border: #ff7237;
   --component-colors-components-toggles-toggle-button-fg-disabled: #f7f6f5;
   --component-colors-components-toggles-toggle-border: #d7d3d0;
-  --component-colors-components-toggles-toggle-slim-border-pressed: #58ff55;
+  --component-colors-components-toggles-toggle-slim-border-pressed: #ff7237;
   --component-colors-components-toggles-toggle-slim-border-pressed-hover: #dc3e05;
   --component-colors-components-tooltips-tooltip-supporting-text: #d7d3d0;
   --component-colors-components-text-editor-text-editor-icon-fg: #a9a29d;
   --component-colors-components-text-editor-text-editor-icon-fg-active: #79716b;
   --component-colors-components-header-sections-brand-header-header-brand-text-secondary: #fac2ad;
-  --width-xxs: 320px;
-  --width-xs: 384px;
-  --width-sm: 480px;
-  --width-md: 560px;
-  --width-lg: 640px;
-  --width-xl: 768px;
-  --width-2xl: 1024px;
-  --width-3xl: 1280px;
-  --width-4xl: 1440px;
-  --width-5xl: 1600px;
-  --width-6xl: 1920px;
-  --paragraph-max-width: 720px;
-  --spacing-none: 0px;
-  --spacing-xxs: 2px;
-  --spacing-xs: 4px;
-  --spacing-sm: 6px;
-  --spacing-md: 8px;
-  --spacing-lg: 12px;
-  --spacing-xl: 16px;
-  --spacing-2xl: 20px;
-  --spacing-3xl: 24px;
-  --spacing-4xl: 32px;
-  --spacing-5xl: 40px;
-  --spacing-6xl: 48px;
-  --spacing-7xl: 64px;
-  --spacing-8xl: 80px;
-  --spacing-9xl: 96px;
-  --spacing-10xl: 128px;
-  --spacing-11xl: 160px;
-  --radius-none: 0;
-  --radius-xxs: 0.125rem;
-  --radius-xs: 0.25rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 1rem;
-  --radius-lg: 0.625rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.25rem;
-  --radius-4xl: 1.5rem;
-  --radius-full: 9999px;
+  --container-padding-mobile: 16px;
+  --container-padding-desktop: 32px;
+  --container-max-width-desktop: 1280px;
+  --approach-2-container-max-width: 1280px;
   --font-family-font-family-display: GSK Precision;
   --font-family-font-family-body: sans-serif;
   --font-weight-regular: Regular;
@@ -800,8 +764,44 @@
   --line-height-display-lg: 60px;
   --line-height-display-xl: 72px;
   --line-height-display-2xl: 90px;
-  --container-padding-mobile: 16px;
-  --container-padding-desktop: 32px;
-  --container-max-width-desktop: 1280px;
-  --approach-2-container-max-width: 1280px;
+  --spacing-none: 0px;
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-sm: 6px;
+  --spacing-md: 8px;
+  --spacing-lg: 12px;
+  --spacing-xl: 16px;
+  --spacing-2xl: 20px;
+  --spacing-3xl: 24px;
+  --spacing-4xl: 32px;
+  --spacing-5xl: 40px;
+  --spacing-6xl: 48px;
+  --spacing-7xl: 64px;
+  --spacing-8xl: 80px;
+  --spacing-9xl: 96px;
+  --spacing-10xl: 128px;
+  --spacing-11xl: 160px;
+  --radius-none: 0;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 1rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+  --radius-4xl: 1.5rem;
+  --radius-full: 9999px;
+  --width-xxs: 320px;
+  --width-xs: 384px;
+  --width-sm: 480px;
+  --width-md: 560px;
+  --width-lg: 640px;
+  --width-xl: 768px;
+  --width-2xl: 1024px;
+  --width-3xl: 1280px;
+  --width-4xl: 1440px;
+  --width-5xl: 1600px;
+  --width-6xl: 1920px;
+  --paragraph-max-width: 720px;
 }