@tmorrow/cre8-design-tokens 1.0.16

package/lib/web/brands/blue/tokens-brand.scss

@@ -0,0 +1,31 @@
+/**
+  blue tokens
+ */
+
+@import './_base.scss';
+@import './desktop-menu.scss';
+@import './header.scss';
+@import './spacing.scss';
+@import './footer.scss';
+@import './button.scss';
+@import './bg.scss';
+@import './content.scss';
+@import './border.scss';
+@import './fontSize.scss';
+@import './letterSpacing.scss';
+@import './paragraphSpacing.scss';
+@import './textCase.scss';
+@import './textDecoration.scss';
+@import './paragraphIndent.scss';
+@import './borderRadius.scss';
+@import './borderWidth.scss';
+@import './border-style.scss';
+@import './shadow.scss';
+@import './link.scss';
+@import './fontFamilies.scss';
+@import './fontWeights.scss';
+@import './lineHeights.scss';
+@import './icon-size.scss';
+@import './badge.scss';
+@import './progress-meter.scss';
+@import './breakpoint.scss';

package/lib/web/brands/blue-v1/_base.scss

@@ -0,0 +1,76 @@
+
+// SCSS tokens for blue-v1: _base
+
+$cre8-base-color-accent-cre8-green-100: #00874d;
+$cre8-base-color-accent-orange-10: #fad6bd;
+$cre8-base-color-accent-orange-50: #faa163;
+$cre8-base-color-accent-orange-100: #ff4d00;
+$cre8-base-color-accent-cre8-green-10: #a1f7a2;
+$cre8-base-color-accent-cre8-green-50: #03cc54;
+$cre8-base-color-yellow-100: #e49e07;
+$cre8-base-color-yellow-20: #fcf0d6;
+$cre8-base-color-purple-100: #7522d9;
+$cre8-base-color-purple-20: #E6D6F9;
+$cre8-base-color-red-100: #cc0000;
+$cre8-base-color-red-20: #f5cccc;
+$cre8-base-color-green-100: #277a47;
+$cre8-base-color-green-20: #c9edda;
+$cre8-base-color-night-blue-05: #f5f8fa;
+$cre8-base-color-night-blue-100: #004986;
+$cre8-base-color-night-blue-30: #ccdbe7;
+$cre8-base-color-night-blue-20: #e5ecf1;
+$cre8-base-color-night-blue-10: #f2f6f8;
+$cre8-base-color-action-blue-05: #f5f9fd;
+$cre8-base-color-action-blue-140: #014371;
+$cre8-base-color-action-blue-100: #0170bc;
+$cre8-base-color-action-blue-50: #72aad0;
+$cre8-base-color-action-blue-30: #cce2f2;
+$cre8-base-color-action-blue-20: #e5f0f8;
+$cre8-base-color-action-blue-10: #f2f8fb;
+$cre8-base-color-neutral-black: #000000;
+$cre8-base-color-neutral-white: #ffffff;
+$cre8-base-color-neutral-05: #f9fafd;
+$cre8-base-color-neutral-100: #282c2f;
+$cre8-base-color-neutral-90: #5a636b;
+$cre8-base-color-neutral-80: #7f848b;
+$cre8-base-color-neutral-60: #a6abb2;
+$cre8-base-color-neutral-50: #cccccc;
+$cre8-base-color-neutral-40: #c4c9cf;
+$cre8-base-color-neutral-30: #e5e9ed;
+$cre8-base-color-neutral-20: #eef1f5;
+$cre8-base-color-neutral-10: #f2f4f9;
+$cre8-base-paragraph-indent-0: 0px;
+$cre8-base-border-width-8: 0.5rem;
+$cre8-base-border-width-4: 0.25rem;
+$cre8-base-border-width-2: 0.125rem;
+$cre8-base-border-width-1: 0.0625rem;
+$cre8-base-border-width-0: 0rem;
+$cre8-base-spacing-160: 10rem;
+$cre8-base-spacing-120: 7.5rem;
+$cre8-base-spacing-96: 6rem;
+$cre8-base-spacing-80: 5rem;
+$cre8-base-spacing-64: 4rem;
+$cre8-base-spacing-48: 3rem;
+$cre8-base-spacing-40: 2.5rem;
+$cre8-base-spacing-32: 2rem;
+$cre8-base-spacing-24: 1.5rem;
+$cre8-base-spacing-18: 1.125rem;
+$cre8-base-spacing-16: 1rem;
+$cre8-base-spacing-14: 0.875rem;
+$cre8-base-spacing-12: 0.75rem;
+$cre8-base-spacing-8: 0.5rem;
+$cre8-base-spacing-6: 0.375rem;
+$cre8-base-spacing-4: 0.25rem;
+$cre8-base-spacing-2: 0.125rem;
+$cre8-base-spacing-0: 0rem;
+$cre8-base-border-radius-900: 900px;
+$cre8-base-border-radius-30: 30px;
+$cre8-base-border-radius-16: 16px;
+$cre8-base-border-radius-8: 8px;
+$cre8-base-border-radius-4: 4px;
+$cre8-base-border-radius-0: 0px;
+$cre8-base-border-style-solid: solid;
+$cre8-base-color-opacity-neutral-75: rgba( $cre8-base-color-neutral-100,0.75);
+$cre8-base-color-opacity-neutral-50: rgba( $cre8-base-color-neutral-100,0.50);
+$cre8-base-color-opacity-neutral-25: rgba( $cre8-base-color-neutral-100,0.25);
+$cre8-base-color-opacity-transparent: rgba( $cre8-base-color-neutral-100,0.0);

package/lib/web/brands/blue-v1/badge.scss

@@ -0,0 +1,5 @@
+
+// SCSS tokens for blue-v1: badge
+
+$cre8-badge-padding-vertical: $cre8-base-spacing-2;
+$cre8-badge-padding-horizontal: $cre8-base-spacing-8;

package/lib/web/brands/blue-v1/bg.scss

@@ -0,0 +1,34 @@
+
+// SCSS tokens for blue-v1: bg
+
+$cre8-color-bg-inverse-active: $cre8-base-color-neutral-white;
+$cre8-color-bg-active: $cre8-base-color-neutral-100;
+$cre8-color-bg-attention-strong: $cre8-base-color-purple-100;
+$cre8-color-bg-attention: $cre8-base-color-purple-20;
+$cre8-color-bg-info-strong: $cre8-base-color-night-blue-100;
+$cre8-color-bg-info: $cre8-base-color-night-blue-20;
+$cre8-color-bg-warning-strong: $cre8-base-color-yellow-100;
+$cre8-color-bg-warning: $cre8-base-color-yellow-20;
+$cre8-color-bg-error-strong: $cre8-base-color-red-100;
+$cre8-color-bg-error: $cre8-base-color-red-20;
+$cre8-color-bg-success-strong: $cre8-base-color-green-100;
+$cre8-color-bg-success: $cre8-base-color-green-20;
+$cre8-color-bg-brand-xstrong-active: $cre8-base-color-action-blue-140;
+$cre8-color-bg-brand-xstrong-hover: $cre8-base-color-action-blue-140;
+$cre8-color-bg-brand-xstrong: $cre8-base-color-action-blue-100;
+$cre8-color-bg-brand-strong-active: $cre8-base-color-action-blue-140;
+$cre8-color-bg-brand-strong-hover: $cre8-base-color-action-blue-140;
+$cre8-color-bg-brand-strong: $cre8-base-color-action-blue-100;
+$cre8-color-bg-brand-active: $cre8-base-color-action-blue-50;
+$cre8-color-bg-brand-hover: $cre8-base-color-action-blue-30;
+$cre8-color-bg-brand: $cre8-base-color-action-blue-20;
+$cre8-color-bg-disabled: $cre8-base-color-neutral-30;
+$cre8-color-bg-strong: $cre8-base-color-neutral-100;
+$cre8-color-bg-inverse-moderate: $cre8-base-color-neutral-40;
+$cre8-color-bg-moderate: $cre8-base-color-neutral-60;
+$cre8-color-bg-subtle: $cre8-base-color-neutral-10;
+$cre8-color-bg-default-active: $cre8-base-color-action-blue-30;
+$cre8-color-bg-default-hover: $cre8-base-color-action-blue-10;
+$cre8-color-bg-default: $cre8-base-color-neutral-white;
+$cre8-color-bg-opacity-default: $cre8-base-color-opacity-neutral-50;
+$cre8-color-bg-opacity-transparent: $cre8-base-color-opacity-transparent;

package/lib/web/brands/blue-v1/border-style.scss

@@ -0,0 +1,5 @@
+
+// SCSS tokens for blue-v1: border-style
+
+$cre8-border-style-default: $cre8-base-border-style-solid;
+$cre8-border-style-button-tertiary-outline-focus: $cre8-base-border-style-solid;

package/lib/web/brands/blue-v1/border.scss

@@ -0,0 +1,21 @@
+
+// SCSS tokens for blue-v1: border
+
+$cre8-border-button-tertiary-disabled: none;
+$cre8-border-button-tertiary-default: none;
+$cre8-border-button-tertiary-active: 2px solid $cre8-base-color-action-blue-100;
+$cre8-border-button-tertiary-hover: 2px solid $cre8-base-color-action-blue-100;
+$cre8-color-border-active-outline: $cre8-base-color-neutral-100;
+$cre8-color-border-attention: $cre8-base-color-purple-100;
+$cre8-color-border-info: $cre8-base-color-night-blue-100;
+$cre8-color-border-warning: $cre8-base-color-yellow-100;
+$cre8-color-border-error: $cre8-base-color-red-100;
+$cre8-color-border-success: $cre8-base-color-green-100;
+$cre8-color-border-brand-strong: $cre8-base-color-action-blue-140;
+$cre8-color-border-brand-subtle: $cre8-base-color-action-blue-30;
+$cre8-color-border-brand: $cre8-base-color-action-blue-100;
+$cre8-color-border-disabled: $cre8-base-color-neutral-40;
+$cre8-color-border-knockout: $cre8-base-color-neutral-white;
+$cre8-color-border-strong: $cre8-base-color-neutral-80;
+$cre8-color-border-default: $cre8-base-color-neutral-60;
+$cre8-color-border-transparent: $cre8-base-color-opacity-transparent;

package/lib/web/brands/blue-v1/borderRadius.scss

@@ -0,0 +1,15 @@
+
+// SCSS tokens for blue-v1: borderRadius
+
+$cre8-border-radius-none: $cre8-base-border-radius-0;
+$cre8-border-radius-brand: $cre8-base-border-radius-8;
+$cre8-border-radius-field-brand: $cre8-base-border-radius-8;
+$cre8-border-radius-field: $cre8-base-border-radius-8;
+$cre8-border-radius-container: $cre8-base-border-radius-30;
+$cre8-border-radius-tabs: $cre8-base-border-radius-4;
+$cre8-border-radius-badge: $cre8-base-border-radius-4;
+$cre8-border-radius-button: $cre8-base-border-radius-900;
+$cre8-border-radius-round: $cre8-base-border-radius-900;
+$cre8-border-radius-large: $cre8-base-border-radius-30;
+$cre8-border-radius-default: $cre8-base-border-radius-8;
+$cre8-border-radius-small: $cre8-base-border-radius-4;

package/lib/web/brands/blue-v1/borderWidth.scss

@@ -0,0 +1,11 @@
+
+// SCSS tokens for blue-v1: borderWidth
+
+$cre8-border-width-tab-default: $cre8-base-border-width-2;
+$cre8-border-width-tab-selected: $cre8-base-border-width-2;
+$cre8-border-width-button-default: $cre8-base-border-width-1;
+$cre8-border-width-button-tertiary-outline-focus: $cre8-base-border-width-2;
+$cre8-border-width-large: $cre8-base-border-width-4;
+$cre8-border-width-focus: $cre8-base-border-width-2;
+$cre8-border-width-default: $cre8-base-border-width-1;
+$cre8-border-width-none: $cre8-base-border-width-0;

package/lib/web/brands/blue-v1/breakpoint.scss

@@ -0,0 +1,9 @@
+
+// SCSS tokens for blue-v1: breakpoint
+
+$cre8-breakpoint-xxl: 1400px;
+$cre8-breakpoint-xl: 1200px;
+$cre8-breakpoint-lg: 960px;
+$cre8-breakpoint-md: 768px;
+$cre8-breakpoint-sm: 560px;
+$cre8-breakpoint-xsm: 375px;

package/lib/web/brands/blue-v1/button.scss

@@ -0,0 +1,199 @@
+
+// SCSS tokens for blue-v1: button
+
+$cre8-button-padding-horizontal-large-icon-only: $cre8-base-spacing-16;
+$cre8-button-padding-horizontal-medium-icon-only: $cre8-base-spacing-16;
+$cre8-button-padding-horizontal-small-icon-only: $cre8-base-spacing-8;
+$cre8-button-padding-horizontal-icon-only: $cre8-base-spacing-8;
+$cre8-button-padding-horizontal-large: $cre8-base-spacing-32;
+$cre8-button-padding-horizontal-medium: $cre8-base-spacing-24;
+$cre8-button-padding-horizontal-small: $cre8-base-spacing-16;
+$cre8-button-padding-vertical-large-icon-only: $cre8-base-spacing-16;
+$cre8-button-padding-vertical-medium-icon-only: $cre8-base-spacing-16;
+$cre8-button-padding-vertical-small-icon-only: $cre8-base-spacing-8;
+$cre8-button-padding-vertical-icon-only: $cre8-base-spacing-8;
+$cre8-button-padding-vertical-medium: $cre8-base-spacing-12;
+$cre8-button-padding-vertical-large: $cre8-base-spacing-16;
+$cre8-button-padding-vertical-small: $cre8-base-spacing-8;
+$cre8-color-button-tertiary-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-content-disabled: $cre8-base-color-neutral-40;
+$cre8-color-button-tertiary-content-active: $cre8-base-color-action-blue-100;
+$cre8-color-button-tertiary-content-hover: $cre8-base-color-action-blue-100;
+$cre8-color-button-tertiary-content: $cre8-base-color-action-blue-100;
+$cre8-color-button-tertiary-border-active: $cre8-base-color-action-blue-100;
+$cre8-color-button-tertiary-border-hover: $cre8-base-color-action-blue-100;
+$cre8-color-button-tertiary-bg-active: $cre8-base-color-action-blue-10;
+$cre8-color-button-tertiary-danger-inverse-outline: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-danger-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-danger-inverse-border-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-tertiary-danger-border-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-tertiary-danger-inverse-border-active: $cre8-base-color-neutral-20;
+$cre8-color-button-tertiary-danger-border-active: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-danger-inverse-border-hover: $cre8-base-color-neutral-10;
+$cre8-color-button-tertiary-danger-border-hover: $cre8-base-color-neutral-90;
+$cre8-color-button-tertiary-danger-inverse-content-disabled: $cre8-base-color-neutral-black;
+$cre8-color-button-tertiary-danger-content-disabled: $cre8-base-color-neutral-05;
+$cre8-color-button-tertiary-danger-inverse-content-active: $cre8-base-color-neutral-black;
+$cre8-color-button-tertiary-danger-content-active: $cre8-base-color-neutral-05;
+$cre8-color-button-tertiary-danger-inverse-content-hover: $cre8-base-color-neutral-black;
+$cre8-color-button-tertiary-danger-content-hover: $cre8-base-color-neutral-05;
+$cre8-color-button-tertiary-danger-inverse-content: $cre8-base-color-neutral-black;
+$cre8-color-button-tertiary-danger-content: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-danger-inverse-bg-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-tertiary-danger-bg-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-tertiary-danger-inverse-bg-active: $cre8-base-color-neutral-20;
+$cre8-color-button-tertiary-danger-bg-active: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-danger-inverse-bg-hover: $cre8-base-color-neutral-10;
+$cre8-color-button-tertiary-danger-bg-hover: $cre8-base-color-neutral-90;
+$cre8-color-button-tertiary-neutral-inverse-outline: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-neutral-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-neutral-inverse-content-disabled: $cre8-base-color-neutral-60;
+$cre8-color-button-tertiary-neutral-content-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-tertiary-neutral-inverse-content-active: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-neutral-content-active: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-neutral-inverse-border-active: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-neutral-border-active: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-neutral-inverse-content-hover: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-neutral-content-hover: $cre8-base-color-neutral-100;
+$cre8-color-button-tertiary-neutral-inverse-content: $cre8-base-color-neutral-white;
+$cre8-color-button-tertiary-neutral-content: $cre8-base-color-neutral-90;
+$cre8-color-button-secondary-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-content-disabled: $cre8-base-color-action-blue-50;
+$cre8-color-button-secondary-content-active: $cre8-base-color-action-blue-100;
+$cre8-color-button-secondary-content-hover: $cre8-base-color-action-blue-100;
+$cre8-color-button-secondary-content: $cre8-base-color-action-blue-100;
+$cre8-color-button-secondary-border-disabled: $cre8-base-color-action-blue-50;
+$cre8-color-button-secondary-border-active: $cre8-base-color-action-blue-100;
+$cre8-color-button-secondary-border-hover: $cre8-base-color-action-blue-100;
+$cre8-color-button-secondary-border: $cre8-base-color-action-blue-100;
+$cre8-color-button-secondary-bg-active: $cre8-base-color-action-blue-10;
+$cre8-color-button-secondary-bg-hover: $cre8-base-color-action-blue-10;
+$cre8-color-button-secondary-danger-inverse-outline: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-danger-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-danger-inverse-border-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-secondary-danger-border-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-secondary-danger-inverse-border-active: $cre8-base-color-neutral-20;
+$cre8-color-button-secondary-danger-border-active: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-danger-inverse-border-hover: $cre8-base-color-neutral-10;
+$cre8-color-button-secondary-danger-border-hover: $cre8-base-color-neutral-90;
+$cre8-color-button-secondary-danger-inverse-border: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-danger-border: $cre8-base-color-neutral-90;
+$cre8-color-button-secondary-danger-inverse-content-disabled: $cre8-base-color-neutral-black;
+$cre8-color-button-secondary-danger-content-disabled: $cre8-base-color-neutral-05;
+$cre8-color-button-secondary-danger-inverse-content-active: $cre8-base-color-neutral-black;
+$cre8-color-button-secondary-danger-content-active: $cre8-base-color-neutral-05;
+$cre8-color-button-secondary-danger-inverse-content-hover: $cre8-base-color-neutral-black;
+$cre8-color-button-secondary-danger-content-hover: $cre8-base-color-neutral-05;
+$cre8-color-button-secondary-danger-inverse-content: $cre8-base-color-neutral-black;
+$cre8-color-button-secondary-danger-content: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-danger-inverse-bg-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-secondary-danger-bg-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-secondary-danger-inverse-bg-active: $cre8-base-color-neutral-20;
+$cre8-color-button-secondary-danger-bg-active: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-danger-inverse-bg-hover: $cre8-base-color-neutral-10;
+$cre8-color-button-secondary-danger-bg-hover: $cre8-base-color-neutral-90;
+$cre8-color-button-secondary-neutral-inverse-outline: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-neutral-inverse-content-disabled: $cre8-base-color-neutral-60;
+$cre8-color-button-secondary-neutral-content-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-secondary-neutral-inverse-border-disabled: $cre8-base-color-neutral-40;
+$cre8-color-button-secondary-neutral-border-disabled: $cre8-base-color-neutral-10;
+$cre8-color-button-secondary-neutral-inverse-bg-disabled: $cre8-base-color-neutral-40;
+$cre8-color-button-secondary-neutral-bg-disabled: $cre8-base-color-neutral-10;
+$cre8-color-button-secondary-neutral-inverse-content-active: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-content-active: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-neutral-inverse-bg-active: $cre8-base-color-neutral-50;
+$cre8-color-button-secondary-neutral-inverse-border-active: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-border-active: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-neutral-inverse-border-hover: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-border-hover: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-neutral-inverse-content-hover: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-content-hover: $cre8-base-color-neutral-100;
+$cre8-color-button-secondary-neutral-inverse-border: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-border: $cre8-base-color-neutral-90;
+$cre8-color-button-secondary-neutral-inverse-content: $cre8-base-color-neutral-white;
+$cre8-color-button-secondary-neutral-content: $cre8-base-color-neutral-90;
+$cre8-color-button-primary-inverse-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-primary-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-primary-inverse-content-disabled: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-content-disabled: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-inverse-content-active: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-content-active: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-inverse-content-hover: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-content-hover: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-inverse-content: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-content: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-inverse-border-disabled: $cre8-base-color-action-blue-50;
+$cre8-color-button-primary-border-disabled: $cre8-base-color-action-blue-50;
+$cre8-color-button-primary-inverse-border-active: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-border-active: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-inverse-border-hover: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-border-hover: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-inverse-border: $cre8-base-color-action-blue-100;
+$cre8-color-button-primary-border: $cre8-base-color-action-blue-100;
+$cre8-color-button-primary-inverse-bg-disabled: $cre8-base-color-action-blue-50;
+$cre8-color-button-primary-bg-disabled: $cre8-base-color-action-blue-50;
+$cre8-color-button-primary-inverse-bg-active: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-bg-active: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-inverse-bg-hover: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-bg-hover: $cre8-base-color-action-blue-140;
+$cre8-color-button-primary-inverse-bg: $cre8-base-color-action-blue-100;
+$cre8-color-button-primary-bg: $cre8-base-color-action-blue-100;
+$cre8-color-button-primary-danger-inverse-outline: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-danger-outline: $cre8-base-color-neutral-100;
+$cre8-color-button-primary-danger-inverse-border-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-primary-danger-border-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-primary-danger-inverse-border-active: $cre8-base-color-neutral-20;
+$cre8-color-button-primary-danger-border-active: $cre8-base-color-neutral-100;
+$cre8-color-button-primary-danger-inverse-border-hover: $cre8-base-color-neutral-10;
+$cre8-color-button-primary-danger-border-hover: $cre8-base-color-neutral-90;
+$cre8-color-button-primary-danger-inverse-border: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-danger-border: $cre8-base-color-neutral-80;
+$cre8-color-button-primary-danger-inverse-content-disabled: $cre8-base-color-neutral-black;
+$cre8-color-button-primary-danger-content-disabled: $cre8-base-color-neutral-05;
+$cre8-color-button-primary-danger-inverse-content-active: $cre8-base-color-neutral-black;
+$cre8-color-button-primary-danger-content-active: $cre8-base-color-neutral-05;
+$cre8-color-button-primary-danger-inverse-content-hover: $cre8-base-color-neutral-black;
+$cre8-color-button-primary-danger-content-hover: $cre8-base-color-neutral-05;
+$cre8-color-button-primary-danger-inverse-content: $cre8-base-color-neutral-black;
+$cre8-color-button-primary-danger-content: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-danger-inverse-bg-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-primary-danger-bg-disabled: $cre8-base-color-neutral-50;
+$cre8-color-button-primary-danger-inverse-bg-active: $cre8-base-color-neutral-20;
+$cre8-color-button-primary-danger-bg-active: $cre8-base-color-neutral-100;
+$cre8-color-button-primary-danger-inverse-bg-hover: $cre8-base-color-neutral-10;
+$cre8-color-button-primary-danger-bg-hover: $cre8-base-color-neutral-90;
+$cre8-color-button-primary-danger-inverse-bg: $cre8-base-color-neutral-white;
+$cre8-color-button-primary-danger-bg: $cre8-base-color-neutral-80;
+$cre8-color-button-tertiary-border-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-border: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-bg-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-bg-hover: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-danger-inverse-border: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-danger-border: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-danger-inverse-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-danger-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-border-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-border-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-bg-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-bg-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-bg-active: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-bg-active: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-border-hover: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-border-hover: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-bg-hover: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-bg-hover: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-border: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-border: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-inverse-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-tertiary-neutral-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-secondary-bg-disabled: $cre8-base-color-opacity-transparent;
+$cre8-color-button-secondary-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-secondary-danger-inverse-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-secondary-danger-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-secondary-neutral-bg-active: $cre8-base-color-opacity-neutral-25;
+$cre8-color-button-secondary-neutral-inverse-bg-hover: $cre8-base-color-opacity-neutral-25;
+$cre8-color-button-secondary-neutral-bg-hover: $cre8-base-color-opacity-neutral-25;
+$cre8-color-button-secondary-neutral-inverse-bg: $cre8-base-color-opacity-transparent;
+$cre8-color-button-secondary-neutral-bg: $cre8-base-color-opacity-transparent;

package/lib/web/brands/blue-v1/content.scss

@@ -0,0 +1,29 @@
+
+// SCSS tokens for blue-v1: content
+
+$cre8-color-content-inverse-link-disabled: $cre8-base-color-neutral-20;
+$cre8-color-content-link-disabled: $cre8-base-color-neutral-80;
+$cre8-color-content-inverse-link-visited: $cre8-base-color-action-blue-10;
+$cre8-color-content-link-visited: $cre8-base-color-purple-100;
+$cre8-color-content-inverse-link-active: $cre8-base-color-night-blue-10;
+$cre8-color-content-link-active: $cre8-base-color-action-blue-140;
+$cre8-color-content-inverse-link-focus: $cre8-base-color-neutral-100;
+$cre8-color-content-link-focus: $cre8-base-color-neutral-white;
+$cre8-color-content-inverse-link-hover: $cre8-base-color-night-blue-10;
+$cre8-color-content-link-hover: $cre8-base-color-action-blue-140;
+$cre8-color-content-inverse-link: $cre8-base-color-neutral-white;
+$cre8-color-content-link: $cre8-base-color-action-blue-100;
+$cre8-color-content-attention-icon: $cre8-base-color-purple-100;
+$cre8-color-content-info-icon: $cre8-base-color-night-blue-100;
+$cre8-color-content-warning-icon: $cre8-base-color-yellow-100;
+$cre8-color-content-error-icon: $cre8-base-color-red-100;
+$cre8-color-content-error: $cre8-base-color-red-100;
+$cre8-color-content-success-icon: $cre8-base-color-green-100;
+$cre8-color-content-success: $cre8-base-color-green-100;
+$cre8-color-content-brand-knockout: $cre8-base-color-night-blue-10;
+$cre8-color-content-brand-strong: $cre8-base-color-action-blue-140;
+$cre8-color-content-brand: $cre8-base-color-action-blue-100;
+$cre8-color-content-knockout: $cre8-base-color-neutral-white;
+$cre8-color-content-disabled: $cre8-base-color-neutral-80;
+$cre8-color-content-subtle: $cre8-base-color-neutral-90;
+$cre8-color-content-default: $cre8-base-color-neutral-100;

package/lib/web/brands/blue-v1/css/fonts.css

@@ -0,0 +1,47 @@
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Montserrat';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/OpenSans-Regular.ttf') format('truetype');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
+	font-display: fallback;
+}
+
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: url('../assets/fonts/OpenSans-Bold.ttf') format('truetype');
+	font-display: fallback;
+}