@opengovsg/oui-theme 0.0.0-snapshot-20250311073924

package/src/variants/base.css

@@ -0,0 +1,491 @@
+@theme {
+  --color-blue-50: #f7f9fe;
+  --color-blue-100: #e7effc;
+  --color-blue-200: #acc7fa;
+  --color-blue-300: #82abf7;
+  --color-blue-400: #568df4;
+  --color-blue-500: #1361f0;
+  --color-blue-600: #0d4fca;
+  --color-blue-700: #0b44ac;
+  --color-blue-800: #093890;
+  --color-blue-900: #072a69;
+  --color-red-50: #fef7f7;
+  --color-red-100: #fbe9e9;
+  --color-red-200: #f4acac;
+  --color-red-300: #ee8080;
+  --color-red-400: #e74f4f;
+  --color-red-500: #c03434;
+  --color-red-600: #992a2a;
+  --color-red-700: #852424;
+  --color-red-800: #721f1f;
+  --color-red-900: #571717;
+  --color-green-50: #f5fafa;
+  --color-green-100: #e2eeed;
+  --color-green-200: #98ccc7;
+  --color-green-300: #63b1aa;
+  --color-green-400: #2d978c;
+  --color-green-500: #0f796f;
+  --color-green-600: #0c5f57;
+  --color-green-700: #0a524b;
+  --color-green-800: #09463f;
+  --color-green-900: #073430;
+  --color-yellow-50: #fffae1;
+  --color-yellow-100: #ffda68;
+  --color-yellow-200: #e2b73e;
+  --color-yellow-300: #c4992a;
+  --color-yellow-400: #a77c18;
+  --color-yellow-500: #8b6005;
+  --color-yellow-600: #704c00;
+  --color-yellow-700: #624200;
+  --color-yellow-800: #533800;
+  --color-yellow-900: #3f2b00;
+  --color-slate-50: #f8f9fa;
+  --color-slate-100: #e9eaee;
+  --color-slate-200: #babecb;
+  --color-slate-300: #9aa0b3;
+  --color-slate-400: #7b849c;
+  --color-slate-500: #5d6785;
+  --color-slate-600: #465173;
+  --color-slate-700: #3c4764;
+  --color-slate-800: #333c56;
+  --color-slate-900: #272d41;
+  --color-grey-50: #f8f9f9;
+  --color-grey-100: #ededed;
+  --color-grey-200: #bfc2c8;
+  --color-grey-300: #a0a4ad;
+  --color-grey-400: #838894;
+  --color-grey-500: #666c7a;
+  --color-grey-600: #505660;
+  --color-grey-700: #454953;
+  --color-grey-800: #3a3e46;
+  --color-grey-900: #2c2e34;
+  --color-standard-white: #ffffff;
+  --color-standard-black: #000000;
+  --color-brand-primary-50: #f7f9fe;
+  --color-brand-primary-100: #e7effc;
+  --color-brand-primary-200: #acc7fa;
+  --color-brand-primary-300: #82abf7;
+  --color-brand-primary-400: #568df4;
+  --color-brand-primary-500: #1361f0;
+  --color-brand-primary-600: #0d4fca;
+  --color-brand-primary-700: #0b44ac;
+  --color-brand-primary-800: #093890;
+  --color-brand-primary-900: #072a69;
+  --color-brand-secondary-50: #f8f9fa;
+  --color-brand-secondary-100: #e9eaee;
+  --color-brand-secondary-200: #babecb;
+  --color-brand-secondary-300: #9aa0b3;
+  --color-brand-secondary-400: #7b849c;
+  --color-brand-secondary-500: #5d6785;
+  --color-brand-secondary-600: #465173;
+  --color-brand-secondary-700: #3c4764;
+  --color-brand-secondary-800: #333c56;
+  --color-brand-secondary-900: #272d41;
+  --color-skin-1-base: #ffcaa4;
+  --color-skin-1-shadow: #f5b896;
+  --color-skin-2-base: #eba687;
+  --color-skin-2-shadow: #e29b7b;
+  --color-skin-3-base: #d98f6f;
+  --color-skin-3-shadow: #ce8361;
+  --color-skin-4-base: #bf7657;
+  --color-skin-4-shadow: #af6d53;
+  --color-skin-5-base: #9f634f;
+  --color-skin-5-shadow: #8b5544;
+  --color-skin-6-base: #764738;
+  --color-skin-6-shadow: #633d32;
+  --color-base-canvas-default: #ffffff;
+  --color-base-canvas-alt: #f8f9f9;
+  --color-base-canvas-backdrop: #ededed;
+  --color-base-canvas-brand-subtle: #f7f9fe;
+  --color-base-canvas-inverse: #3a3e46;
+  --color-base-canvas-overlay: rgba(58, 62, 70, 0.8);
+  --color-base-content-default: #454953;
+  --color-base-content-strong: #2c2e34;
+  --color-base-content-medium: #666c7a;
+  --color-base-content-brand: #1361f0;
+  --color-base-content-inverse: #ffffff;
+  --color-base-divider-subtle: #f8f9f9;
+  --color-base-divider-medium: #ededed;
+  --color-base-divider-strong: #bfc2c8;
+  --color-base-divider-inverse: #ffffff;
+  --color-base-divider-brand: #1361f0;
+  --color-interaction-main-default: #1361f0;
+  --color-interaction-main-hover: #0d4fca;
+  --color-interaction-main-active: #0b44ac;
+  --color-interaction-main-subtle-default: #e7effc;
+  --color-interaction-main-subtle-hover: #acc7fa;
+  --color-interaction-main-subtle-active: #82abf7;
+  --color-interaction-sub-default: #5d6785;
+  --color-interaction-sub-hover: #465173;
+  --color-interaction-sub-active: #3c4764;
+  --color-interaction-sub-subtle-default: #e9eaee;
+  --color-interaction-sub-subtle-hover: #babecb;
+  --color-interaction-sub-subtle-active: #9aa0b3;
+  --color-interaction-critical-default: #c03434;
+  --color-interaction-critical-hover: #992a2a;
+  --color-interaction-critical-active: #852424;
+  --color-interaction-critical-subtle-default: #fbe9e9;
+  --color-interaction-critical-subtle-hover: #f4acac;
+  --color-interaction-critical-subtle-active: #ee8080;
+  --color-interaction-warning-default: #ffda68;
+  --color-interaction-warning-hover: #e2b73e;
+  --color-interaction-warning-active: #c4992a;
+  --color-interaction-warning-subtle-default: #fffae1;
+  --color-interaction-warning-subtle-hover: #ffda68;
+  --color-interaction-warning-subtle-active: #e2b73e;
+  --color-interaction-success-default: #0f796f;
+  --color-interaction-success-hover: #0c5f57;
+  --color-interaction-success-active: #0a524b;
+  --color-interaction-success-subtle-default: #e2eeed;
+  --color-interaction-success-subtle-hover: #98ccc7;
+  --color-interaction-success-subtle-active: #63b1aa;
+  --color-interaction-neutral-default: #666c7a;
+  --color-interaction-neutral-hover: #505660;
+  --color-interaction-neutral-active: #454953;
+  --color-interaction-neutral-subtle-default: #ededed;
+  --color-interaction-neutral-subtle-hover: #bfc2c8;
+  --color-interaction-neutral-subtle-active: #a0a4ad;
+  --color-interaction-muted-main-hover: #f7f9fe;
+  --color-interaction-muted-main-active: #e7effc;
+  --color-interaction-muted-sub-hover: #f8f9fa;
+  --color-interaction-muted-sub-active: #e9eaee;
+  --color-interaction-muted-critical-hover: #fef7f7;
+  --color-interaction-muted-critical-active: #fbe9e9;
+  --color-interaction-muted-neutral-hover: #f8f9f9;
+  --color-interaction-muted-neutral-active: #ededed;
+  --color-interaction-tinted-main-hover: rgba(19, 97, 240, 0.04);
+  --color-interaction-tinted-main-active: rgba(19, 97, 240, 0.12);
+  --color-interaction-tinted-sub-hover: rgba(93, 103, 133, 0.04);
+  --color-interaction-tinted-sub-active: rgba(93, 103, 133, 0.12);
+  --color-interaction-tinted-critical-hover: rgba(192, 52, 52, 0.04);
+  --color-interaction-tinted-critical-active: rgba(192, 52, 52, 0.12);
+  --color-interaction-tinted-neutral-hover: rgba(0, 0, 0, 0.1);
+  --color-interaction-tinted-neutral-active: rgba(0, 0, 0, 0.2);
+  --color-interaction-tinted-inverse-hover: rgba(255, 255, 255, 0.1);
+  --color-interaction-tinted-inverse-active: rgba(255, 255, 255, 0.2);
+  --color-interaction-support-unselected: #a0a4ad;
+  --color-interaction-support-selected: #666c7a;
+  --color-interaction-support-unselected-strong: #666c7a;
+  --color-interaction-support-disabled: #ededed;
+  --color-interaction-support-disabled-content: #a0a4ad;
+  --color-interaction-support-placeholder: #838894;
+  --color-interaction-links-default: #1361f0;
+  --color-interaction-links-hover: #0d4fca;
+  --color-interaction-links-neutral-default: #454953;
+  --color-interaction-links-neutral-hover: #2c2e34;
+  --color-interaction-links-inverse-default: #ffffff;
+  --color-interaction-links-inverse-hover: #ededed;
+  --color-utility-feedback-info: #1361f0;
+  --color-utility-feedback-info-subtle: #f7f9fe;
+  --color-utility-feedback-warning: #ffda68;
+  --color-utility-feedback-warning-subtle: #fffae1;
+  --color-utility-feedback-success: #0f796f;
+  --color-utility-feedback-success-subtle: #f5fafa;
+  --color-utility-feedback-critical: #c03434;
+  --color-utility-feedback-critical-subtle: #fef7f7;
+  --color-utility-focus-default: #1361f0;
+  --color-utility-focus-inverse: #ffffff;
+  --color-utility-input-prefilled: #fffae1;
+  --color-utility-ui: #ffffff;
+  --color-utility-ui-clear: rgba(255, 255, 255, 0);
+}
+
+@utility prose-h1 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 3rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-h2 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2.25rem;
+  font-weight: 600;
+  line-height: 2.75rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-h3 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  letter-spacing: -0.019em;
+}
+
+@utility prose-h4 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2rem;
+  letter-spacing: -0.019em;
+}
+
+@utility prose-h5 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  letter-spacing: -0.014em;
+}
+
+@utility prose-h6 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  letter-spacing: -0.014em;
+}
+
+@utility prose-subhead-1 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  letter-spacing: -0.006em;
+}
+
+@utility prose-subhead-2 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+}
+
+@utility prose-subhead-3 {
+  font-family: var(--font-sans);
+  text-transform: uppercase;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  letter-spacing: 0.08em;
+}
+
+@utility prose-body-1 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: -0.096px;
+}
+
+@utility prose-body-2 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+}
+
+@utility prose-body-3 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: -0.006em;
+}
+
+@utility prose-caption-1 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  letter-spacing: 0;
+}
+
+@utility prose-caption-2 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0;
+}
+
+@utility prose-caption-3 {
+  font-family: var(--font-sans);
+  text-transform: uppercase;
+  text-decoration: none;
+  font-size: 0.625rem;
+  font-weight: 500;
+  line-height: 1rem;
+  letter-spacing: 0.08em;
+}
+
+@utility prose-code-1 {
+  font-family: var(--font-mono);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0;
+}
+
+@utility prose-code-2 {
+  font-family: var(--font-mono);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0;
+}
+
+@utility prose-legal {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 0.75rem;
+  letter-spacing: 0;
+}
+
+@utility prose-responsive-heading-heavy-1280 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 3rem;
+  font-weight: 600;
+  line-height: 3.5rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-heading-heavy-480 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 3rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-heading-heavy {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 2.5rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-heading-light-1280 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 3rem;
+  font-weight: 300;
+  line-height: 3.5rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-heading-light-480 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2.5rem;
+  font-weight: 300;
+  line-height: 3rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-heading-light {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 300;
+  line-height: 2.5rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-display-heavy-1280 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 4rem;
+  font-weight: 700;
+  line-height: 4.5rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-display-heavy-480 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 3.5rem;
+  font-weight: 700;
+  line-height: 4rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-display-heavy {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 3rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-display-light-1280 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 4rem;
+  font-weight: 300;
+  line-height: 4.5rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-display-light-480 {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 3.5rem;
+  font-weight: 300;
+  line-height: 4rem;
+  letter-spacing: -0.022em;
+}
+
+@utility prose-responsive-display-light {
+  font-family: var(--font-sans);
+  text-transform: none;
+  text-decoration: none;
+  font-size: 2.5rem;
+  font-weight: 300;
+  line-height: 3rem;
+  letter-spacing: -0.022em;
+}