chore: Restore dictionary to an app

Remove as a library since we are not confident the pros outway the cons for now
Financial-Times · Nov 6, 2024 · 161d8b9 · 161d8b9
1 parent a784ad2
commit 161d8b9
Show file tree

Hide file tree

Showing 197 changed files with 17,571 additions and 49 deletions.
diff --git a/libraries/dictionary/.gitignore → apps/dictionary/.gitignore b/libraries/dictionary/.gitignore → apps/dictionary/.gitignore
diff --git a/libraries/dictionary/README.md → apps/dictionary/README.md b/libraries/dictionary/README.md → apps/dictionary/README.md
diff --git a/libraries/dictionary/css/core/o3-button.css → ...c/css/tokens/core/o3-button/variables.css b/libraries/dictionary/css/core/o3-button.css → ...c/css/tokens/core/o3-button/variables.css
diff --git a/...dictionary/css/professional/o3-button.css → ...core/professional/o3-button/variables.css b/...dictionary/css/professional/o3-button.css → ...core/professional/o3-button/variables.css
diff --git a/...ies/dictionary/css/internal/o3-button.css → ...s/tokens/internal/o3-button/variables.css b/...ies/dictionary/css/internal/o3-button.css → ...s/tokens/internal/o3-button/variables.css
diff --git a/...onary/css/sustainable-views/o3-button.css → ...sustainable-views/o3-button/variables.css b/...onary/css/sustainable-views/o3-button.css → ...sustainable-views/o3-button/variables.css
diff --git a/...s/dictionary/css/whitelabel/o3-button.css → ...tokens/whitelabel/o3-button/variables.css b/...s/dictionary/css/whitelabel/o3-button.css → ...tokens/whitelabel/o3-button/variables.css
diff --git a/...nary/css/core/o3-editorial-typography.css → ...ore/o3-editorial-typography/variables.css b/...nary/css/core/o3-editorial-typography.css → ...ore/o3-editorial-typography/variables.css
diff --git a/.../professional/o3-editorial-typography.css → ...nal/o3-editorial-typography/variables.css b/.../professional/o3-editorial-typography.css → ...nal/o3-editorial-typography/variables.css
diff --git a/...ainable-views/o3-editorial-typography.css → ...ews/o3-editorial-typography/variables.css b/...ainable-views/o3-editorial-typography.css → ...ews/o3-editorial-typography/variables.css
diff --git a/...ss/whitelabel/o3-editorial-typography.css → ...bel/o3-editorial-typography/variables.css b/...ss/whitelabel/o3-editorial-typography.css → ...bel/o3-editorial-typography/variables.css
diff --git a/libraries/dictionary/css/core/o3-form.css → ...src/css/tokens/core/o3-form/variables.css b/libraries/dictionary/css/core/o3-form.css → ...src/css/tokens/core/o3-form/variables.css
diff --git a/...s/dictionary/css/professional/o3-form.css → ...s/core/professional/o3-form/variables.css b/...s/dictionary/css/professional/o3-form.css → ...s/core/professional/o3-form/variables.css
diff --git a/...aries/dictionary/css/internal/o3-form.css → ...css/tokens/internal/o3-form/variables.css b/...aries/dictionary/css/internal/o3-form.css → ...css/tokens/internal/o3-form/variables.css
diff --git a/...tionary/css/sustainable-views/o3-form.css → ...s/sustainable-views/o3-form/variables.css b/...tionary/css/sustainable-views/o3-form.css → ...s/sustainable-views/o3-form/variables.css
diff --git a/...ies/dictionary/css/whitelabel/o3-form.css → ...s/tokens/whitelabel/o3-form/variables.css b/...ies/dictionary/css/whitelabel/o3-form.css → ...s/tokens/whitelabel/o3-form/variables.css
diff --git a/libraries/dictionary/css/icons.css → ...s/o3-foundation/src/css/tokens/_icons.css b/libraries/dictionary/css/icons.css → ...s/o3-foundation/src/css/tokens/_icons.css
diff --git a/...ictionary/css/professional/foundation.css → ...ss/tokens/core/professional/variables.css b/...ictionary/css/professional/foundation.css → ...ss/tokens/core/professional/variables.css
diff --git a/libraries/dictionary/css/core/foundation.css → ...ndation/src/css/tokens/core/variables.css b/libraries/dictionary/css/core/foundation.css → ...ndation/src/css/tokens/core/variables.css
diff --git a/...es/dictionary/css/internal/foundation.css → ...ion/src/css/tokens/internal/variables.css b/...es/dictionary/css/internal/foundation.css → ...ion/src/css/tokens/internal/variables.css
diff --git a/...nary/css/sustainable-views/foundation.css → ...ss/tokens/sustainable-views/variables.css b/...nary/css/sustainable-views/foundation.css → ...ss/tokens/sustainable-views/variables.css
diff --git a/.../dictionary/css/whitelabel/foundation.css → ...n/src/css/tokens/whitelabel/variables.css b/.../dictionary/css/whitelabel/foundation.css → ...n/src/css/tokens/whitelabel/variables.css
diff --git a/libraries/dictionary/css/core/o3-tooltip.css → .../css/tokens/core/o3-tooltip/variables.css b/libraries/dictionary/css/core/o3-tooltip.css → .../css/tokens/core/o3-tooltip/variables.css
diff --git a/...ictionary/css/professional/o3-tooltip.css → ...ore/professional/o3-tooltip/variables.css b/...ictionary/css/professional/o3-tooltip.css → ...ore/professional/o3-tooltip/variables.css
diff --git a/...es/dictionary/css/internal/o3-tooltip.css → .../tokens/internal/o3-tooltip/variables.css b/...es/dictionary/css/internal/o3-tooltip.css → .../tokens/internal/o3-tooltip/variables.css
diff --git a/...nary/css/sustainable-views/o3-tooltip.css → ...ustainable-views/o3-tooltip/variables.css b/...nary/css/sustainable-views/o3-tooltip.css → ...ustainable-views/o3-tooltip/variables.css
diff --git a/.../dictionary/css/whitelabel/o3-tooltip.css → ...okens/whitelabel/o3-tooltip/variables.css b/.../dictionary/css/whitelabel/o3-tooltip.css → ...okens/whitelabel/o3-tooltip/variables.css
diff --git a/apps/dictionary/css/core/foundation.css b/apps/dictionary/css/core/foundation.css
@@ -0,0 +1,232 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+[data-o3-brand="core"] {
+  --o3-font-size-metric2-negative-1: 14px;
+  --o3-font-size-metric2-negative-2: 12px;
+  --o3-font-size-metric2-negative-3: 10px;
+  --o3-font-size-metric2-9: 72px;
+  --o3-font-size-metric2-8: 64px;
+  --o3-font-size-metric2-7: 48px;
+  --o3-font-size-metric2-6: 40px;
+  --o3-font-size-metric2-5: 32px;
+  --o3-font-size-metric2-4: 28px;
+  --o3-font-size-metric2-3: 24px;
+  --o3-font-size-metric2-2: 20px;
+  --o3-font-size-metric2-1: 18px;
+  --o3-font-size-metric2-0: 16px;
+  --o3-font-lineheight-metric2-negative-1: 20px;
+  --o3-font-lineheight-metric2-negative-2: 16px;
+  --o3-font-lineheight-metric2-negative-3: 16px;
+  --o3-font-lineheight-metric2-9: 84px;
+  --o3-font-lineheight-metric2-8: 72px;
+  --o3-font-lineheight-metric2-7: 56px;
+  --o3-font-lineheight-metric2-6: 48px;
+  --o3-font-lineheight-metric2-5: 40px;
+  --o3-font-lineheight-metric2-4: 32px;
+  --o3-font-lineheight-metric2-3: 32px;
+  --o3-font-lineheight-metric2-2: 28px;
+  --o3-font-lineheight-metric2-1: 24px;
+  --o3-font-lineheight-metric2-0: 20px;
+  --o3-font-size-negative-1: 14px;
+  --o3-font-size-negative-2: 12px;
+  --o3-font-size-10: 84px;
+  --o3-font-size-9: 72px;
+  --o3-font-size-8: 56px;
+  --o3-font-size-7: 48px;
+  --o3-font-size-6: 40px;
+  --o3-font-size-5: 32px;
+  --o3-font-size-4: 28px;
+  --o3-font-size-3: 24px;
+  --o3-font-size-2: 20px;
+  --o3-font-size-1: 18px;
+  --o3-font-size-0: 16px;
+  --o3-font-lineheight-negative-1: 16px;
+  --o3-font-lineheight-negative-2: 16px;
+  --o3-font-lineheight-10: 84px;
+  --o3-font-lineheight-9: 72px;
+  --o3-font-lineheight-8: 56px;
+  --o3-font-lineheight-7: 48px;
+  --o3-font-lineheight-6: 40px;
+  --o3-font-lineheight-5: 32px;
+  --o3-font-lineheight-4: 32px;
+  --o3-font-lineheight-3: 28px;
+  --o3-font-lineheight-2: 24px;
+  --o3-font-lineheight-1: 20px;
+  --o3-font-lineheight-0: 20px;
+  --o3-font-weight-bold: 800;
+  --o3-font-weight-semibold: 700;
+  --o3-font-weight-medium: 500;
+  --o3-font-weight-regular: 400;
+  --o3-font-weight-light: 300;
+  --o3-font-family-georgia: georgia;
+  --o3-font-family-financier-display: 'financier display VF';
+  --o3-font-family-metric: 'metric 2 VF';
+  --o3-spacing-4xl: 96px;
+  --o3-spacing-3xl: 80px;
+  --o3-spacing-2xl: 64px;
+  --o3-spacing-xl: 48px;
+  --o3-spacing-l: 40px;
+  --o3-spacing-m: 32px;
+  --o3-spacing-s: 24px;
+  --o3-spacing-xs: 20px;
+  --o3-spacing-2xs: 16px;
+  --o3-spacing-3xs: 12px;
+  --o3-spacing-4xs: 8px;
+  --o3-spacing-5xs: 4px;
+  --o3-color-use-case-error-background: rgba(204, 0, 0, 0.06);
+  --o3-color-use-case-button-disabled: #9ec0bd;
+  --o3-color-use-case-muted-inverse-text: #a8aaad; /* "Muted" text is less prominent, for example credits and captions. */
+  --o3-color-use-case-link-inverse-underline-hover: #d4d4d6;
+  --o3-color-use-case-link-inverse-underline: #ffffff;
+  --o3-color-use-case-link-inverse-text-hover: #d4d4d6;
+  --o3-color-use-case-link-inverse-text: #ffffff;
+  --o3-color-use-case-link-underline-hover: #9ec0bd;
+  --o3-color-use-case-link-underline: #cfd8d1;
+  --o3-color-palette-wheat-100: #ffebd9;
+  --o3-color-palette-claret-100: #ff1a66;
+  --o3-color-palette-claret-90: #e6175c;
+  --o3-color-palette-claret-80: #cc1452;
+  --o3-color-palette-claret-70: #b31247;
+  --o3-color-palette-claret-60: #990f3d;
+  --o3-color-palette-claret-50: #800d33;
+  --o3-color-palette-claret-40: #660a29;
+  --o3-color-palette-claret-30: #4d081f;
+  --o3-color-palette-teal-100: #1aecff;
+  --o3-color-palette-teal-90: #17d4e6;
+  --o3-color-palette-teal-80: #14bdcc;
+  --o3-color-palette-teal-70: #12a5b3;
+  --o3-color-palette-teal-60: #0f8e99;
+  --o3-color-palette-teal-50: #0d7680;
+  --o3-color-palette-teal-40: #0a5e66;
+  --o3-color-palette-teal-30: #08474d;
+  --o3-color-palette-teal-20: #052f33;
+  --o3-color-palette-oxford-100: #1a8cff;
+  --o3-color-palette-oxford-90: #177ee6;
+  --o3-color-palette-oxford-80: #1470cc;
+  --o3-color-palette-oxford-70: #1262b3;
+  --o3-color-palette-oxford-60: #0f5499;
+  --o3-color-palette-oxford-50: #0d4680;
+  --o3-color-palette-oxford-40: #0a3866;
+  --o3-color-palette-oxford-30: #082a4d;
+  --o3-color-palette-white-80: #fffcfa;
+  --o3-color-palette-white-60: #fff9f5;
+  --o3-color-palette-white-40: #fff7ef;
+  --o3-color-palette-white-20: #fff4ea;
+  --o3-color-palette-white-10: #fff2e8;
+  --o3-color-palette-black-90: #1a1817;
+  --o3-color-palette-black-80: #33302e;
+  --o3-color-palette-black-70: #4d4845;
+  --o3-color-palette-black-60: #66605c;
+  --o3-color-palette-black-50: #807973;
+  --o3-color-palette-black-40: #999189;
+  --o3-color-palette-black-30: #b3a9a0;
+  --o3-color-palette-black-20: #ccc1b7;
+  --o3-color-palette-black-10: #e6d9ce;
+  --o3-color-palette-black-5: #f2e5da;
+  --o3-color-palette-matisse-blue: #355778;
+  --o3-color-palette-sky: #cce6ff;
+  --o3-color-palette-lemon: #ffec1a;
+  --o3-color-palette-velvet: #593380;
+  --o3-color-palette-jade: #00994d;
+  --o3-color-palette-wasabi: #96cc28;
+  --o3-color-palette-candy: #ff7faa;
+  --o3-color-palette-wheat: #f2dfce;
+  --o3-color-palette-graphics-dark-blue: #006f9b;
+  --o3-color-palette-crimson: #cc0000;
+  --o3-color-palette-light-blue: #00a0dd;
+  --o3-color-palette-mandarin: #ff8833;
+  --o3-color-palette-paper: #fff1e5; /* Paper, as it’s name implies, is the FT’s main background colour. It is the main expression of the brand colour on product. It is a lighter, more legible shade of FT Pink and can be seen as a kind of replacement of white. */
+  --o3-color-palette-slate: #262a33; /* Slate is a warmer version of black. It is used as inverse backgrounds for editorial content and as a theme option(Mono) for buttons. */
+  /**
+   * Oxford is used to denote opinion pieces (in combination with Sky). It is used on the homepage and in articles. Use for information and callouts in general.
+   * 
+   * Usage example: opinion branding; opinion topic tags.
+   */
+  --o3-color-palette-oxford: #0f5499;
+  --o3-color-palette-teal: #0d7680; /* Teal is the most striking colour and main CTA colour on ft.com. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases. */
+  /**
+   * Claret is the main branding colour for MyFT related products. It should be used sparingly and never be used as a background colour.
+   * 
+   * Usage example: MyFT branding; MyFT CTAs
+   */
+  --o3-color-palette-claret: #990f3d;
+  --o3-color-palette-black: #000000;
+  --o3-color-palette-white: #ffffff;
+  --o3-color-palette-ft-grey: #333333;
+  --o3-color-palette-ft-pink: #fcd0b1; /* FT Pink is used for the FT logo */
+  --o3-focus-use-case-outline-inverse-color: 0px 0px 0px 2px var(--o3-color-palette-white);
+  --o3-focus-use-case-outline-color: 0px 0px 0px 2px var(--o3-color-palette-black-50);
+  --o3-focus-use-case-ring-inverse-outer: 0px 0px 0px 8px var(--o3-color-palette-white);
+  --o3-focus-use-case-ring-inverse-inner: 0px 0px 0px 4px var(--o3-color-palette-black-70);
+  --o3-focus-use-case-ring-outer: 0px 0px 0px 8px var(--o3-color-palette-black-70);
+  --o3-focus-use-case-ring-inner: 0px 0px 0px 4px var(--o3-color-palette-white);
+  --o3-typography-use-case-heading5-line-height: var(--o3-font-lineheight-metric2-0);
+  --o3-typography-use-case-heading5-font-size: var(--o3-font-size-metric2-0);
+  --o3-typography-use-case-heading5-font-weight: var(--o3-font-weight-semibold);
+  --o3-typography-use-case-heading5-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-heading4-line-height: var(--o3-font-lineheight-metric2-1);
+  --o3-typography-use-case-heading4-font-size: var(--o3-font-size-metric2-1);
+  --o3-typography-use-case-heading4-font-weight: var(--o3-font-weight-semibold);
+  --o3-typography-use-case-heading4-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-heading3-line-height: var(--o3-font-lineheight-metric2-2);
+  --o3-typography-use-case-heading3-font-size: var(--o3-font-size-metric2-2);
+  --o3-typography-use-case-heading3-font-weight: var(--o3-font-weight-semibold);
+  --o3-typography-use-case-heading3-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-heading2-line-height: var(--o3-font-lineheight-metric2-3);
+  --o3-typography-use-case-heading2-font-size: var(--o3-font-size-metric2-3);
+  --o3-typography-use-case-heading2-font-weight: var(--o3-font-weight-semibold);
+  --o3-typography-use-case-heading2-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-heading1-line-height: var(--o3-font-lineheight-metric2-4);
+  --o3-typography-use-case-heading1-font-size: var(--o3-font-size-metric2-4);
+  --o3-typography-use-case-heading1-font-weight: var(--o3-font-weight-semibold);
+  --o3-typography-use-case-heading1-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-caption-line-height: var(--o3-font-lineheight-metric2-negative-2);
+  --o3-typography-use-case-caption-font-size: var(--o3-font-size-metric2-negative-2);
+  --o3-typography-use-case-caption-font-weight: var(--o3-font-weight-regular);
+  --o3-typography-use-case-caption-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-footer-line-height: var(--o3-font-lineheight-metric2-0);
+  --o3-typography-use-case-footer-font-size: var(--o3-font-size-metric2-0);
+  --o3-typography-use-case-footer-font-weight: var(--o3-font-weight-regular);
+  --o3-typography-use-case-footer-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-body-small-bold-line-height: var(--o3-font-lineheight-metric2-negative-1);
+  --o3-typography-use-case-body-small-bold-font-size: var(--o3-font-size-metric2-negative-1);
+  --o3-typography-use-case-body-small-bold-font-weight: var(--o3-font-weight-semibold);
+  --o3-typography-use-case-body-small-bold-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-body-small-caps-line-height: var(--o3-font-lineheight-metric2-negative-1);
+  --o3-typography-use-case-body-small-caps-font-size: var(--o3-font-size-metric2-negative-1);
+  --o3-typography-use-case-body-small-caps-font-weight: var(--o3-font-weight-regular);
+  --o3-typography-use-case-body-small-caps-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-body-small-line-height: var(--o3-font-lineheight-metric2-negative-1);
+  --o3-typography-use-case-body-small-font-size: var(--o3-font-size-metric2-negative-1);
+  --o3-typography-use-case-body-small-font-weight: var(--o3-font-weight-regular);
+  --o3-typography-use-case-body-small-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-body-big-line-height: var(--o3-font-lineheight-metric2-1);
+  --o3-typography-use-case-body-big-font-size: var(--o3-font-size-metric2-1);
+  --o3-typography-use-case-body-big-font-weight: var(--o3-font-weight-regular);
+  --o3-typography-use-case-body-big-font-family: var(--o3-font-family-metric);
+  --o3-typography-use-case-body-standard-line-height: var(--o3-font-lineheight-metric2-0);
+  --o3-typography-use-case-body-standard-font-size: var(--o3-font-size-metric2-0);
+  --o3-typography-use-case-body-standard-font-weight: var(--o3-font-weight-regular);
+  --o3-typography-use-case-body-standard-font-family: var(--o3-font-family-metric);
+  --o3-color-use-case-error: var(--o3-color-palette-crimson);
+  --o3-color-use-case-error-text: var(--o3-color-palette-crimson);
+  --o3-color-use-case-button-pressed: var(--o3-color-palette-teal-20);
+  --o3-color-use-case-button-hover: var(--o3-color-palette-teal-40);
+  --o3-color-use-case-button-default: var(--o3-color-palette-teal);
+  --o3-color-use-case-button-foreground-disabled: var(--o3-color-palette-white-40);
+  --o3-color-use-case-button-foreground: var(--o3-color-palette-white);
+  --o3-color-use-case-caption-text: var(--o3-color-palette-black-80);
+  --o3-color-use-case-footer-text: var(--o3-color-palette-black-80);
+  --o3-color-use-case-muted-text: var(--o3-color-palette-black-50); /* "Muted" text is less prominent, for example credits and captions. */
+  --o3-color-use-case-heading-inverse-text: var(--o3-color-palette-white);
+  --o3-color-use-case-heading-text: var(--o3-color-palette-black-80);
+  --o3-color-use-case-body-inverse-text: var(--o3-color-palette-white);
+  --o3-color-use-case-body-text: var(--o3-color-palette-black-80);
+  --o3-color-use-case-page-inverse-background: var(--o3-color-palette-slate);
+  --o3-color-use-case-page-background: var(--o3-color-palette-paper);
+  --o3-color-use-case-link-text-hover: var(--o3-color-palette-teal-30);
+  --o3-color-use-case-link-text: var(--o3-color-palette-teal);
+}
diff --git a/apps/dictionary/css/core/o3-button.css b/apps/dictionary/css/core/o3-button.css
@@ -0,0 +1,115 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+[data-o3-brand="core"] .o3-button {
+  --_o3-button-ghost-mono-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-mono-active-color: #ffffff;
+  --_o3-button-ghost-mono-active-background: #262a33;
+  --_o3-button-ghost-mono-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-mono-focus-color: #262a33;
+  --_o3-button-ghost-mono-focus-background: rgba(38, 42, 51, 0.15);
+  --_o3-button-ghost-mono-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-mono-hover-color: #262a33;
+  --_o3-button-ghost-mono-hover-background: rgba(38, 42, 51, 0.15);
+  --_o3-button-ghost-mono-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-mono-background: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-mono-color: #262a33;
+  --_o3-button-ghost-inverse-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-active-color: #000000;
+  --_o3-button-ghost-inverse-active-background: #ffffff;
+  --_o3-button-ghost-inverse-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-focus-color: #ffffff;
+  --_o3-button-ghost-inverse-focus-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-ghost-inverse-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-hover-color: #ffffff;
+  --_o3-button-ghost-inverse-hover-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-ghost-inverse-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-background: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-inverse-color: #ffffff;
+  --_o3-button-ghost-standard-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-standard-active-color: #ffffff;
+  --_o3-button-ghost-standard-active-background: #0d7680;
+  --_o3-button-ghost-standard-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-standard-focus-color: #0c707a;
+  --_o3-button-ghost-standard-focus-background: rgba(13, 118, 128, 0.1);
+  --_o3-button-ghost-standard-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-standard-hover-color: #0c707a;
+  --_o3-button-ghost-standard-hover-background: rgba(13, 118, 128, 0.1);
+  --_o3-button-ghost-standard-border: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-standard-background: rgba(255, 255, 255, 0);
+  --_o3-button-ghost-standard-color: #0d7680;
+  --_o3-button-secondary-mono-active-border: #262a33;
+  --_o3-button-secondary-mono-active-color: #ffffff;
+  --_o3-button-secondary-mono-active-background: #262a33;
+  --_o3-button-secondary-mono-focus-border: #262a33;
+  --_o3-button-secondary-mono-focus-color: #262a33;
+  --_o3-button-secondary-mono-focus-background: rgba(38, 42, 51, 0.15);
+  --_o3-button-secondary-mono-hover-border: #262a33;
+  --_o3-button-secondary-mono-hover-color: #262a33;
+  --_o3-button-secondary-mono-hover-background: rgba(38, 42, 51, 0.15);
+  --_o3-button-secondary-mono-border: #262a33;
+  --_o3-button-secondary-mono-background: rgba(255, 255, 255, 0);
+  --_o3-button-secondary-mono-color: #262a33;
+  --_o3-button-secondary-inverse-active-border: #ffffff;
+  --_o3-button-secondary-inverse-active-color: #000000;
+  --_o3-button-secondary-inverse-active-background: #ffffff;
+  --_o3-button-secondary-inverse-focus-border: #ffffff;
+  --_o3-button-secondary-inverse-focus-color: #ffffff;
+  --_o3-button-secondary-inverse-focus-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-secondary-inverse-hover-border: #ffffff;
+  --_o3-button-secondary-inverse-hover-color: #ffffff;
+  --_o3-button-secondary-inverse-hover-background: rgba(255, 255, 255, 0.15);
+  --_o3-button-secondary-inverse-border: #ffffff;
+  --_o3-button-secondary-inverse-background: rgba(255, 255, 255, 0);
+  --_o3-button-secondary-inverse-color: #ffffff;
+  --_o3-button-secondary-standard-active-border: #0d7680;
+  --_o3-button-secondary-standard-active-color: #ffffff;
+  --_o3-button-secondary-standard-active-background: #0d7680;
+  --_o3-button-secondary-standard-focus-border: #0d7680;
+  --_o3-button-secondary-standard-focus-color: #0c707a;
+  --_o3-button-secondary-standard-focus-background: rgba(13, 118, 128, 0.1);
+  --_o3-button-secondary-standard-hover-border: #0d7680;
+  --_o3-button-secondary-standard-hover-color: #0c707a;
+  --_o3-button-secondary-standard-hover-background: rgba(13, 118, 128, 0.1);
+  --_o3-button-secondary-standard-border: #0d7680;
+  --_o3-button-secondary-standard-background: rgba(255, 255, 255, 0);
+  --_o3-button-secondary-standard-color: #0d7680;
+  --_o3-button-primary-mono-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-mono-active-color: #ffffff;
+  --_o3-button-primary-mono-active-background: #727071;
+  --_o3-button-primary-mono-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-mono-focus-color: #ffffff;
+  --_o3-button-primary-mono-focus-background: #515257;
+  --_o3-button-primary-mono-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-mono-hover-color: #ffffff;
+  --_o3-button-primary-mono-hover-background: #515257;
+  --_o3-button-primary-mono-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-mono-background: #262a33;
+  --_o3-button-primary-mono-color: #ffffff;
+  --_o3-button-primary-inverse-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-active-color: #262a33;
+  --_o3-button-primary-inverse-active-background: #9d9fa3;
+  --_o3-button-primary-inverse-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-focus-color: #262a33;
+  --_o3-button-primary-inverse-focus-background: #c9cacc;
+  --_o3-button-primary-inverse-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-hover-color: #262a33;
+  --_o3-button-primary-inverse-hover-background: #c9cacc;
+  --_o3-button-primary-inverse-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-inverse-background: #ffffff;
+  --_o3-button-primary-inverse-color: #262a33;
+  --_o3-button-primary-standard-active-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-standard-active-color: #ffffff;
+  --_o3-button-primary-standard-active-background: #052f33;
+  --_o3-button-primary-standard-focus-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-standard-focus-color: #ffffff;
+  --_o3-button-primary-standard-focus-background: #095259;
+  --_o3-button-primary-standard-hover-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-standard-hover-color: #ffffff;
+  --_o3-button-primary-standard-hover-background: #095259;
+  --_o3-button-primary-standard-border: rgba(255, 255, 255, 0);
+  --_o3-button-primary-standard-background: #0d7680;
+  --_o3-button-primary-standard-color: #ffffff;
+}