@originallyus/feedback-rn-sdk 4.0.0-beta.25 → 4.0.0-beta.26

package/lib/module/component/AIA/styles/cfs/primitiveColorsToken/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import PrimitiveColorsToken from "./colors.json";
+export default PrimitiveColorsToken;
+//# sourceMappingURL=index.js.map

package/lib/module/component/AIA/styles/cfs/primitiveColorsToken/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PrimitiveColorsToken"],"sourceRoot":"../../../../../../../src","sources":["component/AIA/styles/cfs/primitiveColorsToken/index.ts"],"mappings":";;AAAA,OAAOA,oBAAoB;AAE3B,eAAeA,oBAAoB","ignoreList":[]}

package/lib/module/component/AIA/styles/cfs/scss/_border.scss

@@ -0,0 +1,28 @@
+$border-radius: (
+  "none": 0rem,
+  "sm": 0.25rem,
+  "md": 0.5rem,
+  "lg": 1rem,
+  "round": 62.5rem
+) !default;
+
+$border-widths: (
+  "none": 0rem,
+  "sm": 0.0625rem,
+  "md": 0.125rem,
+  "lg": 0.1875rem,
+  "xl": 0.25rem
+) !default;
+
+$button-radius: map-get($border-radius, "round") !default;
+$circular-button-radius: map-get($border-radius, "round") !default;
+$card-radius: map-get($border-radius, "md") !default;
+$checkbox-radius: map-get($border-radius, "sm") !default;
+$chip-radius: map-get($border-radius, "md") !default;
+$overlay-radius: map-get($border-radius, "lg") !default;
+$page-level-message-radius: map-get($border-radius, "md") !default;
+$tag-radius: map-get($border-radius, "round") !default;
+$snackbar-radius: map-get($border-radius, "md") !default;
+$form-elements-radius: map-get($border-radius, "md") !default;
+
+$button-border: map-get($border-widths, "sm") !default;

package/lib/module/component/AIA/styles/cfs/scss/_border_class.scss

@@ -0,0 +1,27 @@
+@import './border';
+
+$cfs-button-radius: map-get($border-radius, "round") !default;
+$cfs-circular-button-radius: map-get($border-radius, "round") !default;
+$cfs-card-radius: map-get($border-radius, "md") !default;
+$cfs-checkbox-radius: map-get($border-radius, "sm") !default;
+$cfs-chip-radius: map-get($border-radius, "md") !default;
+$cfs-overlay-radius: map-get($border-radius, "lg") !default;
+$cfs-page-level-message-radius: map-get($border-radius, "md") !default;
+$cfs-tag-radius: map-get($border-radius, "round") !default;
+$cfs-snackbar-radius: map-get($border-radius, "md") !default;
+$cfs-form-elements-radius: map-get($border-radius, "md") !default;
+$cfs-button-border: map-get($border-widths, "sm") !default;
+
+.tokens-cfs {
+  --button-radius: #{$cfs-button-radius};
+  --circular-button-radius: #{$cfs-circular-button-radius};
+  --card-radius: #{$cfs-card-radius};
+  --checkbox-radius: #{$cfs-checkbox-radius};
+  --chip-radius: #{$cfs-chip-radius};
+  --overlay-radius: #{$cfs-overlay-radius};
+  --page-level-message-radius: #{$cfs-page-level-message-radius};
+  --tag-radius: #{$cfs-tag-radius};
+  --snackbar-radius: #{$cfs-snackbar-radius};
+  --form-elements-radius: #{$cfs-form-elements-radius};
+  --button-border: #{$cfs-button-border};
+}

package/lib/module/component/AIA/styles/cfs/scss/_colors.scss

@@ -0,0 +1,134 @@
+$monotone-white: #FFFFFF;
+$monotone-black: #000000;
+$digitalcharcoal-900: #14181C;
+$digitalcharcoal-800: #1F252B;
+$digitalcharcoal-700: #293139;
+$digitalcharcoal-600: #333D47;
+$digitalcharcoal-500: #666E75;
+$digitalcharcoal-400: #858B91;
+$digitalcharcoal-300: #ADB1B5;
+$digitalcharcoal-200: #D6D8DA;
+$digitalcharcoal-100: #EBECED;
+$digitalcharcoal-50: #F5F5F6;
+$digitalred-900: #2D020D;
+$digitalred-800: #5A031A;
+$digitalred-700: #860528;
+$digitalred-600: #B30635;
+$digitalred-500: #E00842;
+$digitalred-400: #E32155;
+$digitalred-300: #E84671;
+$digitalred-200: #EC6B8E;
+$digitalred-100: #F39CB3;
+$digitalred-50: #FFEDF1;
+$digitalsalmon-600: #982D4F;
+$digitalsalmon-500: #C64A67;
+$digitalsalmon-400: #E26276;
+$digitalsalmon-300: #FF7A85;
+$digitalsalmon-200: #FFBAC0;
+$digitalsalmon-100: #FFCFD3;
+$digitalsalmon-50: #FFE4E7;
+$digitalpurple-600: #353480;
+$digitalpurple-500: #4645AB;
+$digitalpurple-400: #5856F6;
+$digitalpurple-300: #7978DE;
+$digitalpurple-200: #9B9AE6;
+$digitalpurple-100: #BCBBEF;
+$digitalpurple-50: #DEDDF7;
+$digitalwarmgrey-600: #3C3A38;
+$digitalwarmgrey-500: #5A5754;
+$digitalwarmgrey-400: #79736F;
+$digitalwarmgrey-300: #97908B;
+$digitalwarmgrey-200: #D3CAC3;
+$digitalwarmgrey-100: #DEd7d2;
+$digitalwarmgrey-50: #E9E5E1;
+$digitallavender-600: #514E76;
+$digitallavender-500: #6C689D;
+$digitallavender-400: #8782C4;
+$digitallavender-300: #9F9BD0;
+$digitallavender-200: #B7B4DC;
+$digitallavender-100: #CFCDE7;
+$digitallavender-50: #E7E6F3;
+$digitalorange-600: #993900;
+$digitalorange-500: #CC4C00;
+$digitalorange-400: #FF5F00;
+$digitalorange-300: #FF7F33;
+$digitalorange-200: #FF9F66;
+$digitalorange-100: #FFBF99;
+$digitalorange-50: #FFDFCC;
+$digitalgold-600: #68562E;
+$digitalgold-500: #8B723D;
+$digitalgold-400: #AE8F4C;
+$digitalgold-300: #BEA570;
+$digitalgold-200: #CEBC94;
+$digitalgold-100: #DFD2B7;
+$digitalgold-50: #EFE9DB;
+$digitalnavyblue-600: #061A51;
+$digitalnavyblue-500: #082065;
+$digitalnavyblue-400: #394D84;
+$digitalnavyblue-300: #5E6E9B;
+$digitalnavyblue-200: #9CA6C1;
+$digitalnavyblue-100: #DADEE8;
+$digitalnavyblue-50: #EBEDF3;
+$digitalgreen-600: #0A301E;
+$digitalgreen-500: #115032;
+$digitalgreen-400: #1B7F50;
+$digitalgreen-300: #229F64;
+$digitalgreen-200: #64bc93;
+$digitalgreen-100: #A7D9C1;
+$digitalgreen-50: #E9F5F0;
+$digitalyellow-600: #4E400C;
+$digitalyellow-500: #866D15;
+$digitalyellow-400: #BF9B1D;
+$digitalyellow-300: #F7C926;
+$digitalyellow-200: #F9D864;
+$digitalyellow-100: #FCE8A1;
+$digitalyellow-50: #FEF7DF;
+$digitalblue-600: #04213F;
+$digitalblue-500: #063769;
+$digitalblue-400: #0A57A8;
+$digitalblue-300: #0C6DD2;
+$digitalblue-200: #3D8ADB;
+$digitalblue-100: #9EC5ED;
+$digitalblue-50: #E7F0FB;
+$digitalcerise-600: #430425;
+$digitalcerise-500: #73073F;
+$digitalcerise-400: #A4095A;
+$digitalcerise-300: #D40C74;
+$digitalcerise-200: #E0519B;
+$digitalcerise-100: #EC96C3;
+$digitalcerise-50: #FBE7F1;
+$digitalcharcoal-900a70: #14181CB3;
+$digitalcharcoal-900a50: #14181C80;
+$digitalcharcoal-900a08: #14181C14;
+$monotone-blacka15: #00000026;
+$monotone-whitea15: #FFFFFF26;
+$monotone-whitea00: #FFFFFF00;
+$pureblack-900: #000000;
+$pureblack-800: #020202;
+$pureblack-700: #030404;
+$pureblack-600: #030404;
+$pureblack-500: #040505;
+$pureblack-400: #545454;
+$pureblack-300: #4F5050;
+$pureblack-200: #686969;
+$pureblack-100: #9B9B9B;
+$pureblack-50: #CDCDCD;
+$deepocean-800: #151334;
+$deepocean-700: #1C1A45;
+$deepocean-600: #201D4D;
+$deepocean-500: #164A9A;
+$deepocean-400: #1F5EBE;
+$deepocean-300: #407CD9;
+$deepocean-200: #6494DE;
+$deepocean-100: #AEC6EC;
+$deepocean-50: #F1EFF2;
+$popy-900: #41060A;
+$popy-800: #6C0A11;
+$popy-700: #820C14;
+$popy-600: #AD101A;
+$popy-500: #D81421;
+$popy-400: #DC2B37;
+$popy-300: #E45B64;
+$popy-200: #E45B64;
+$popy-100: #EC8A90;
+$popy-50: #F3B9BC;

package/lib/module/component/AIA/styles/cfs/scss/_main.scss

@@ -0,0 +1,3 @@
+@import './border_class';
+@import './theme_light';
+@import './theme_dark';

package/lib/module/component/AIA/styles/cfs/scss/_size.scss

@@ -0,0 +1,61 @@
+$size: (
+  "none": 0rem,
+  "2xs": 0.25rem,
+  "xs": 0.5rem,
+  "sm": 0.75rem,
+  "md": 1rem,
+  "lg": 1.25rem,
+  "xl": 1.5rem,
+  "2xl": 2rem,
+  "3xl": 2.5rem,
+  "4xl": 3rem,
+  "5xl": 3.5rem,
+  "6xl": 4rem,
+  "7xl": 6rem,
+  "8xl": 8rem,
+  "9xl": 9rem,
+  "10xl": 12rem,
+  "11xl": 16rem,
+  "12xl": 18rem
+) !default;
+
+// icon size
+$icon-xs: map-get($size, "md") !default;
+$icon-sm: map-get($size, "lg") !default;
+$icon-md: map-get($size, "xl") !default;
+$icon-lg: map-get($size, "2xl") !default;
+$icon-xl: map-get($size, "4xl") !default;
+
+// visual size
+$visual-xs: map-get($size, "4xl") !default;
+$visual-sm: map-get($size, "7xl") !default;
+$visual-md: map-get($size, "8xl") !default;
+$visual-lg: map-get($size, "9xl") !default;
+$visual-xl: map-get($size, "10xl") !default;
+
+$size-width-minmax1: map-get($size, "4xl") !default;
+$size-width-minmax2: map-get($size, "7xl") !default;
+$size-width-minmax3: map-get($size, "9xl") !default;
+$size-width-minmax4: map-get($size, "12xl") !default;
+$size-width-minmax5: 23rem;
+$size-width-minmax6: 35.25rem;
+$size-width-minmax7: 47.5rem;
+$size-width-minmax8: 75rem;
+
+$size-height-minmax1: map-get($size, "7xl") !default;
+$size-height-minmax2: map-get($size, "9xl") !default;
+$size-height-minmax3: map-get($size, "11xl") !default;
+$size-height-minmax4: map-get($size, "12xl") !default;
+$size-height-minmax5: 29.125rem;
+$size-height-minmax6: 41.375rem;
+
+$carousel-indicator-surface-selected: (desktop: map-get($size, "3xl"), tablet: map-get($size, "xl"), mobile: map-get($size, "xl")) !default;
+$header-height: (desktop: 5.25rem, tablet: map-get($size, "4xl"), mobile: map-get($size, "4xl")) !default;
+$overlay-height-min: (desktop: map-get($size, "11xl"), tablet: map-get($size, "11xl"), mobile: map-get($size, "11xl")) !default;
+$overlay-height-max: (desktop: 41.375rem, tablet: 41.375rem, mobile: 29.125rem) !default;
+$resizing-illustrated-icon: (desktop: map-get($size, "xl"), tablet: map-get($size, "lg"), mobile: map-get($size, "lg")) !default;
+$resizing-visual-lg: (desktop: map-get($size, "lg"), tablet: map-get($size, "md"), mobile: map-get($size, "sm")) !default;
+$resizing-visual-xl: (desktop: map-get($size, "xl"), tablet: map-get($size, "lg"), mobile: map-get($size, "md")) !default;
+
+$device-width: (desktop: 87.5rem, tablet: 48rem, mobile: 23.4375rem) !default;
+

package/lib/module/component/AIA/styles/cfs/scss/_spacing.scss

@@ -0,0 +1,41 @@
+$space: (
+  "none": 0rem,
+  "2xs": 0.25rem,
+  "xs": 0.5rem,
+  "sm": 0.75rem,
+  "md": 1rem,
+  "lg": 1.25rem,
+  "xl": 1.5rem,
+  "2xl": 2rem,
+  "3xl": 2.5rem,
+  "4xl": 3rem,
+  "5xl": 3.5rem,
+  "6xl": 4rem,
+  "7xl": 5rem,
+  "8xl": 8rem,
+  "9xl": 9rem
+) !default;
+
+$spacing-2xs: (desktop: map-get($space, "2xs"), tablet: map-get($space, "2xs"), mobile: map-get($space, "2xs")) !default;
+$spacing-xs: (desktop: map-get($space, "xs"), tablet: map-get($space, "xs"), mobile: map-get($space, "xs")) !default;
+$spacing-sm: (desktop: map-get($space, "sm"), tablet: map-get($space, "sm"), mobile: map-get($space, "sm")) !default;
+$spacing-md: (desktop: map-get($space, "md"), tablet: map-get($space, "md"), mobile: map-get($space, "md")) !default;
+$spacing-lg: (desktop: map-get($space, "lg"), tablet: map-get($space, "md"), mobile: map-get($space, "md")) !default;
+$spacing-xl: (desktop: map-get($space, "xl"), tablet: map-get($space, "md"), mobile: map-get($space, "md")) !default;
+$spacing-2xl: (desktop: map-get($space, "2xl"), tablet: map-get($space, "xl"), mobile: map-get($space, "xl")) !default;
+$spacing-3xl: (desktop: map-get($space, "3xl"), tablet: map-get($space, "2xl"), mobile: map-get($space, "2xl")) !default;
+$spacing-4xl: (desktop: map-get($space, "4xl"), tablet: map-get($space, "3xl"), mobile: map-get($space, "3xl")) !default;
+$spacing-5xl: (desktop: map-get($space, "5xl"), tablet: map-get($space, "4xl"), mobile: map-get($space, "4xl")) !default;
+$spacing-6xl: (desktop: map-get($space, "6xl"), tablet: map-get($space, "5xl"), mobile: map-get($space, "5xl")) !default;
+$spacing-7xl: (desktop: map-get($space, "7xl"), tablet: map-get($space, "6xl"), mobile: map-get($space, "6xl")) !default;
+$spacing-8xl: (desktop: map-get($space, "8xl"), tablet: map-get($space, "7xl"), mobile: map-get($space, "7xl")) !default;
+$spacing-9xl: (desktop: map-get($space, "9xl"), tablet: map-get($space, "8xl"), mobile: map-get($space, "8xl")) !default;
+
+$overlay-spacing-margin-horizontal-1: (desktop: map-get($space, "9xl"), tablet: map-get($space, "9xl"), mobile: map-get($space, "3xl")) !default;
+$overlay-spacing-margin-horizontal-2: (desktop: 25rem, tablet: map-get($space, "9xl"), mobile: map-get($space, "3xl")) !default;
+$overlay-spacing-padding: (desktop: map-get($space, "2xl"), tablet: map-get($space, "xl"), mobile: map-get($space, "md")) !default;
+$overlay-spacing-padding-top: (desktop: map-get($space, "2xl"), tablet: map-get($space, "xl"), mobile: map-get($space, "xl")) !default;
+
+$spacing-margin-horizontal: (desktop: map-get($space, "xl"), tablet: map-get($space, "md"), mobile: map-get($space, "md")) !default;
+
+$table-spacing-vertical: (desktop: map-get($space, "md"), tablet: map-get($space, "sm"), mobile: map-get($space, "sm")) !default;

package/lib/module/component/AIA/styles/cfs/scss/_theme_dark.scss

@@ -0,0 +1,141 @@
+@import './colors';
+
+.tokens-cfs{
+  --text-default-dark: #{$monotone-white};
+  --text-subdued-dark: #{$digitalcharcoal-300};
+  --text-disabled-dark: #{$digitalcharcoal-500};
+  --text-inverse-dark: #{$digitalcharcoal-900};
+  --text-link-dark: #{$digitalred-300};
+  --text-coloured-surface-1-dark: #{$monotone-white};
+  --text-coloured-surface-2-dark: #{$monotone-white};
+  --text-error-dark: #{$digitalcerise-200};
+  --text-highlight-dark: #{$digitalblue-200};
+  --text-selected-dark: #{$monotone-white};
+  --text-positive-dark: #{$digitalgreen-300};
+  --text-negative-dark: #{$digitalcerise-200};
+  --surface-default-dark: #{$digitalcharcoal-900};
+  --surface-alternate-dark: #{$digitalcharcoal-800};
+  --surface-overlay-dark: #{$digitalcharcoal-700};
+  --surface-inverse-dark: #{$monotone-white};
+  --surface-primary-dark: #{$digitalred-500};
+  --surface-white-dark: #{$monotone-white};
+  --surface-scrim-dark: #{$digitalcharcoal-900a70};
+  --surface-enabled-1-dark: #{$digitalcharcoal-900};
+  --surface-hover-1-dark: #{$monotone-whitea15};
+  --surface-selected-1-dark: #{$digitalnavyblue-600};
+  --surface-selected-1-hover-dark: #{$digitalnavyblue-500};
+  --surface-disabled-1-dark: #{$digitalcharcoal-700};
+  --surface-enabled-2-dark: #{$digitalcharcoal-900};
+  --surface-hover-2-dark: #{$monotone-whitea15};
+  --surface-selected-2-dark: #{$digitalblue-300};
+  --surface-selected-2-hover-dark: #{$digitalblue-400};
+  --surface-disabled-2-dark: #{$digitalcharcoal-600};
+  --surface-transparent-dark: #{$monotone-whitea00};
+  --icon-default-dark: #{$monotone-white};
+  --icon-subdued-dark: #{$digitalcharcoal-400};
+  --icon-disabled-dark: #{$digitalcharcoal-500};
+  --icon-inverse-dark: #{$digitalcharcoal-900};
+  --icon-primary-dark: #{$digitalred-500};
+  --icon-coloured-surface-dark: #{$monotone-white};
+  --icon-informative-dark: #{$digitalblue-200};
+  --icon-success-dark: #{$digitalgreen-300};
+  --icon-warning-dark: #{$digitalyellow-300};
+  --icon-error-dark: #{$digitalcerise-200};
+  --icon-selected-dark: #{$monotone-white};
+  --icon-positive-dark: #{$digitalgreen-300};
+  --icon-negative-dark: #{$digitalcerise-200};
+  --border-default-dark: #{$digitalcharcoal-300};
+  --border-subdued-dark: #{$digitalcharcoal-600};
+  --border-inverse-dark: #{$digitalcharcoal-900};
+  --border-focus-dark: #{$digitalblue-300};
+  --border-selected-dark: #{$digitalblue-300};
+  --border-error-dark: #{$digitalcerise-200};
+  --border-disabled-dark: #{$digitalcharcoal-500};
+  --button-primary-text-dark: #{$monotone-white};
+  --button-primary-text-hover-dark: #{$monotone-white};
+  --button-primary-surface-dark: #{$digitalred-500};
+  --button-primary-border-dark: #{$digitalred-500};
+  --button-primary-surface-hover-dark: #{$digitalred-600};
+  --button-primary-border-hover-dark: #{$digitalred-600};
+  --button-secondary-text-dark: #{$monotone-white};
+  --button-secondary-text-hover-dark: #{$monotone-white};
+  --button-secondary-surface-dark: #{$monotone-whitea00};
+  --button-secondary-border-dark: #{$monotone-white};
+  --button-secondary-surface-hover-dark: #{$monotone-whitea15};
+  --button-secondary-border-hover-dark: #{$monotone-white};
+  --button-tertiary-text-dark: #{$monotone-white};
+  --button-tertiary-text-hover-dark: #{$monotone-white};
+  --avatar-secondary-1-text-dark: #{$digitalpurple-500};
+  --avatar-secondary-1-surface-dark: #{$digitalpurple-50};
+  --avatar-secondary-2-text-dark: #{$digitalsalmon-600};
+  --avatar-secondary-2-surface-dark: #{$digitalsalmon-100};
+  --avatar-secondary-3-text-dark: #{$digitalwarmgrey-600};
+  --avatar-secondary-3-surface-dark: #{$digitalwarmgrey-50};
+  --circular-button-default-surface-dark: #{$digitalred-500};
+  --circular-button-default-surface-hover-dark: #{$digitalred-600};
+  --carousel-indicator-default-surface-enabled-dark: #{$digitalcharcoal-400};
+  --carousel-indicator-default-surface-hover-dark: #{$digitalcharcoal-500};
+  --carousel-indicator-default-surface-selected-dark: #{$digitalcharcoal-50};
+  --carousel-indicator-animation-surface-selected-dark: #{$digitalcharcoal-600};
+  --data-visualisation-category-1-dark: #{$digitalred-500};
+  --data-visualisation-category-2-dark: #{$digitallavender-300};
+  --data-visualisation-category-3-dark: #{$digitalorange-300};
+  --data-visualisation-category-4-dark: #{$digitalblue-200};
+  --data-visualisation-category-5-dark: #{$digitalsalmon-300};
+  --data-visualisation-category-6-dark: #{$digitalpurple-300};
+  --data-visualisation-category-7-dark: #{$digitalcerise-200};
+  --data-visualisation-category-8-dark: #{$digitalgold-300};
+  --data-visualisation-others-dark: #{$digitalnavyblue-300};
+  --data-visualisation-track-dark: #{$digitalcharcoal-600};
+  --data-visualisation-positive-dark: #{$digitalgreen-200};
+  --data-visualisation-negative-dark: #{$digitalcerise-200};
+  --data-visualisation-neutral-dark: #{$digitalwarmgrey-400};
+  --divider-default-dark: #{$digitalcharcoal-500};
+  --divider-subdued-dark: #{$digitalcharcoal-700};
+  --divider-bold-dark: #{$digitalcharcoal-400};
+  --divider-inverse-dark: #{$digitalcharcoal-200};
+  --card-secondary-1-label-dark: #{$monotone-white};
+  --card-secondary-1-surface-dark: #{$digitalpurple-500};
+  --card-secondary-1-border-dark: #{$digitalpurple-500};
+  --card-secondary-1-surface-hover-dark: #{$digitalpurple-600};
+  --card-secondary-1-border-hover-dark: #{$digitalpurple-600};
+  --card-secondary-2-label-dark: #{$monotone-white};
+  --card-secondary-2-surface-dark: #{$digitalsalmon-500};
+  --card-secondary-2-border-dark: #{$digitalsalmon-500};
+  --card-secondary-2-surface-hover-dark: #{$digitalsalmon-600};
+  --card-secondary-2-border-hover-dark: #{$digitalsalmon-600};
+  --card-secondary-3-label-dark: #{$monotone-white};
+  --card-secondary-3-surface-dark: #{$digitalwarmgrey-400};
+  --card-secondary-3-border-dark: #{$digitalwarmgrey-400};
+  --card-secondary-3-surface-hover-dark: #{$digitalwarmgrey-500};
+  --card-secondary-3-border-hover-dark: #{$digitalwarmgrey-500};
+  --switch-track-surface-enabled-dark: #{$digitalcharcoal-400};
+  --switch-track-surface-selected-dark: #{$digitalblue-300};
+  --switch-track-surface-disabled-dark: #{$digitalcharcoal-600};
+  --switch-thumb-surface-enabled-dark: #{$monotone-white};
+  --switch-thumb-surface-disabled-dark: #{$digitalcharcoal-500};
+  --value-stepper-inside-border-disabled-dark: #{$digitalcharcoal-700};
+  --page-level-message-informative-surface-dark: #{$digitalblue-600};
+  --page-level-message-informative-border-dark: #{$digitalblue-300};
+  --page-level-message-success-surface-dark: #{$digitalgreen-600};
+  --page-level-message-success-border-dark: #{$digitalgreen-300};
+  --page-level-message-error-surface-dark: #{$digitalcerise-600};
+  --page-level-message-error-border-dark: #{$digitalcerise-400};
+  --page-level-message-warning-surface-dark: #{$digitalyellow-600};
+  --page-level-message-warning-border-dark: #{$digitalyellow-400};
+  --rating-star-icon-enabled-dark: #{$digitalcharcoal-500};
+  --rating-star-icon-hover-dark: #{$digitalcharcoal-300};
+  --rating-star-icon-selected-dark: #{$digitalyellow-300};
+  --rating-star-icon-selected-hover-dark: #{$digitalyellow-100};
+  --tab-border-selected-dark: #{$digitalred-500};
+  --tab-selected-hover-dark: #{$digitalred-600};
+  --tag-new-surface-dark: #{$digitalred-500};
+  --tag-new-text-dark: #{$monotone-white};
+  --tag-mediumemphasis-surface-dark: #{$digitalsalmon-100};
+  --tag-mediumemphasis-text-dark: #{$digitalsalmon-600};
+  --tag-highemphasis-surface-dark: #{$digitalsalmon-500};
+  --tag-highemphasis-text-dark: #{$monotone-white};
+  --tag-default-surface-dark: #{$digitalwarmgrey-500};
+  --tag-default-text-dark: #{$digitalwarmgrey-100};
+  --skeleton-default-surface-dark: #{$digitalcharcoal-700};
+}

package/lib/module/component/AIA/styles/cfs/scss/_theme_light.scss

@@ -0,0 +1,141 @@
+@import './colors';
+
+.tokens-cfs{
+  --text-default: #{$pureblack-900};
+  --text-subdued: #{$digitalcharcoal-500};
+  --text-disabled: #{$digitalcharcoal-400};
+  --text-inverse: #{$monotone-white};
+  --text-link: #{$deepocean-500};
+  --text-coloured-surface-1: #{$monotone-white};
+  --text-coloured-surface-2: #{$pureblack-900};
+  --text-error: #{$digitalcerise-300};
+  --text-highlight: #{$pureblack-900};
+  --text-selected: #{$digitalnavyblue-500};
+  --text-positive: #{$digitalgreen-400};
+  --text-negative: #{$digitalcerise-300};
+  --surface-default: #{$monotone-white};
+  --surface-alternate: #{$digitalcharcoal-50};
+  --surface-overlay: #{$monotone-white};
+  --surface-inverse: #{$digitalcharcoal-600};
+  --surface-primary: #{$pureblack-900};
+  --surface-white: #{$monotone-white};
+  --surface-scrim: #{$digitalcharcoal-900a50};
+  --surface-enabled-1: #{$monotone-white};
+  --surface-hover-1: #{$digitalcharcoal-900a08};
+  --surface-selected-1: #{$digitalnavyblue-50};
+  --surface-selected-1-hover: #{$digitalnavyblue-100};
+  --surface-disabled-1: #{$digitalcharcoal-100};
+  --surface-enabled-2: #{$monotone-white};
+  --surface-hover-2: #{$digitalcharcoal-900a08};
+  --surface-selected-2: #{$digitalnavyblue-500};
+  --surface-selected-2-hover: #{$digitalnavyblue-600};
+  --surface-disabled-2: #{$digitalcharcoal-400};
+  --surface-transparent: #{$monotone-whitea00};
+  --icon-default: #{$digitalcharcoal-900};
+  --icon-subdued: #{$digitalcharcoal-500};
+  --icon-disabled: #{$digitalcharcoal-300};
+  --icon-inverse: #{$monotone-white};
+  --icon-primary: #{$deepocean-500};
+  --icon-coloured-surface: #{$monotone-white};
+  --icon-informative: #{$digitalblue-300};
+  --icon-success: #{$digitalgreen-300};
+  --icon-warning: #{$digitalyellow-300};
+  --icon-error: #{$digitalcerise-300};
+  --icon-selected: #{$digitalnavyblue-500};
+  --icon-positive: #{$digitalgreen-300};
+  --icon-negative: #{$digitalcerise-300};
+  --border-default: #{$digitalcharcoal-400};
+  --border-subdued: #{$digitalcharcoal-300};
+  --border-inverse: #{$monotone-white};
+  --border-focus: #{$digitalblue-300};
+  --border-selected: #{$digitalnavyblue-500};
+  --border-error: #{$digitalcerise-300};
+  --border-disabled: #{$digitalcharcoal-200};
+  --button-primary-text: #{$monotone-white};
+  --button-primary-text-hover: #{$monotone-white};
+  --button-primary-surface: #{$pureblack-900};
+  --button-primary-border: #{$pureblack-900};
+  --button-primary-surface-hover: #{$pureblack-200};
+  --button-primary-border-hover: #{$pureblack-200};
+  --button-secondary-text: #{$pureblack-900};
+  --button-secondary-text-hover: #{$pureblack-900};
+  --button-secondary-surface: #{$monotone-white};
+  --button-secondary-border: #{$pureblack-500};
+  --button-secondary-surface-hover: #{$pureblack-50};
+  --button-secondary-border-hover: #{$pureblack-400};
+  --button-tertiary-text: #{$pureblack-900};
+  --button-tertiary-text-hover: #{$pureblack-900};
+  --avatar-secondary-1-text: #{$digitalpurple-500};
+  --avatar-secondary-1-surface: #{$digitalpurple-50};
+  --avatar-secondary-2-text: #{$digitalsalmon-600};
+  --avatar-secondary-2-surface: #{$digitalsalmon-50};
+  --avatar-secondary-3-text: #{$digitalwarmgrey-600};
+  --avatar-secondary-3-surface: #{$digitalwarmgrey-50};
+  --circular-button-default-surface: #{$deepocean-500};
+  --circular-button-default-surface-hover: #{$popy-600};
+  --carousel-indicator-default-surface-enabled: #{$digitalcharcoal-400};
+  --carousel-indicator-default-surface-hover: #{$digitalcharcoal-500};
+  --carousel-indicator-default-surface-selected: #{$digitalcharcoal-700};
+  --carousel-indicator-animation-surface-selected: #{$digitalcharcoal-200};
+  --data-visualisation-category-1: #{$digitalred-500};
+  --data-visualisation-category-2: #{$digitallavender-400};
+  --data-visualisation-category-3: #{$digitalorange-400};
+  --data-visualisation-category-4: #{$digitalblue-200};
+  --data-visualisation-category-5: #{$digitalsalmon-400};
+  --data-visualisation-category-6: #{$digitalpurple-400};
+  --data-visualisation-category-7: #{$digitalcerise-400};
+  --data-visualisation-category-8: #{$digitalgold-400};
+  --data-visualisation-others: #{$digitalnavyblue-500};
+  --data-visualisation-track: #{$digitalcharcoal-200};
+  --data-visualisation-positive: #{$digitalgreen-300};
+  --data-visualisation-negative: #{$digitalcerise-300};
+  --data-visualisation-neutral: #{$digitalwarmgrey-300};
+  --divider-default: #{$digitalcharcoal-200};
+  --divider-subdued: #{$digitalcharcoal-100};
+  --divider-bold: #{$digitalcharcoal-300};
+  --divider-inverse: #{$digitalcharcoal-500};
+  --card-secondary-1-label: #{$digitalpurple-500};
+  --card-secondary-1-surface: #{$digitalpurple-50};
+  --card-secondary-1-border: #{$digitalpurple-100};
+  --card-secondary-1-surface-hover: #{$digitalpurple-100};
+  --card-secondary-1-border-hover: #{$digitalpurple-200};
+  --card-secondary-2-label: #{$digitalsalmon-600};
+  --card-secondary-2-surface: #{$digitalsalmon-50};
+  --card-secondary-2-border: #{$digitalsalmon-100};
+  --card-secondary-2-surface-hover: #{$digitalsalmon-100};
+  --card-secondary-2-border-hover: #{$digitalsalmon-300};
+  --card-secondary-3-label: #{$digitalwarmgrey-600};
+  --card-secondary-3-surface: #{$digitalwarmgrey-50};
+  --card-secondary-3-border: #{$digitalwarmgrey-200};
+  --card-secondary-3-surface-hover: #{$digitalwarmgrey-100};
+  --card-secondary-3-border-hover: #{$digitalwarmgrey-300};
+  --switch-track-surface-enabled: #{$digitalcharcoal-400};
+  --switch-track-surface-selected: #{$digitalnavyblue-500};
+  --switch-track-surface-disabled: #{$digitalcharcoal-200};
+  --switch-thumb-surface-enabled: #{$monotone-white};
+  --switch-thumb-surface-disabled: #{$digitalcharcoal-50};
+  --value-stepper-inside-border-disabled: #{$digitalcharcoal-100};
+  --page-level-message-informative-surface: #{$digitalblue-50};
+  --page-level-message-informative-border: #{$digitalblue-100};
+  --page-level-message-success-surface: #{$digitalgreen-50};
+  --page-level-message-success-border: #{$digitalgreen-100};
+  --page-level-message-error-surface: #{$digitalcerise-50};
+  --page-level-message-error-border: #{$digitalcerise-100};
+  --page-level-message-warning-surface: #{$digitalyellow-50};
+  --page-level-message-warning-border: #{$digitalyellow-200};
+  --rating-star-icon-enabled: #{$digitalcharcoal-200};
+  --rating-star-icon-hover: #{$digitalcharcoal-900a08};
+  --rating-star-icon-selected: #{$digitalyellow-300};
+  --rating-star-icon-selected-hover: #{$digitalyellow-100};
+  --tab-border-selected: #{$deepocean-500};
+  --tab-selected-hover: #{$pureblack-900};
+  --tag-new-surface: #{$pureblack-900};
+  --tag-new-text: #{$monotone-white};
+  --tag-mediumemphasis-surface: #{$digitalsalmon-50};
+  --tag-mediumemphasis-text: #{$digitalsalmon-600};
+  --tag-highemphasis-surface: #{$digitalsalmon-500};
+  --tag-highemphasis-text: #{$monotone-white};
+  --tag-default-surface: #{$digitalwarmgrey-50};
+  --tag-default-text: #{$digitalwarmgrey-600};
+  --skeleton-default-surface: #{$digitalcharcoal-100};
+}

package/lib/module/component/AIA/styles/cfs/size/componentSize.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import size from "./size.js";
+const componentSize = {
+  "icon-xs": size.md,
+  "icon-sm": size.lg,
+  "icon-md": size.xl,
+  "icon-lg": size["2xl"],
+  "icon-xl": size["4xl"],
+  "visual-xs": size["4xl"],
+  "visual-sm": size["7xl"],
+  "visual-md": size["8xl"],
+  "visual-lg": size["9xl"],
+  "visual-xl": size["10xl"],
+  "carousel-indicator-surface-selected": size.xl,
+  "header-height": size["4xl"],
+  "overlay-height-min": size["11xl"],
+  "overlay-height-max": 466,
+  "resizing-illustrated-icon": size.lg,
+  "resizing-visual-lg": size.sm,
+  "resizing-visual-xl": size.md,
+  "size-width-minmax1": size["4xl"],
+  "size-width-minmax2": size["7xl"],
+  "size-width-minmax3": size["9xl"],
+  "size-width-minmax4": size["12xl"],
+  "size-width-minmax5": 368,
+  "size-width-minmax6": 564,
+  "size-width-minmax7": 760,
+  "size-width-minmax8": 1200,
+  "size-height-minmax1": size["7xl"],
+  "size-height-minmax2": size["9xl"],
+  "size-height-minmax3": size["11xl"],
+  "size-height-minmax4": size["12xl"],
+  "size-height-minmax5": 466,
+  "size-height-minmax6": 662
+};
+export default componentSize;
+//# sourceMappingURL=componentSize.js.map

package/lib/module/component/AIA/styles/cfs/size/componentSize.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["size","componentSize","md","lg","xl","sm"],"sourceRoot":"../../../../../../../src","sources":["component/AIA/styles/cfs/size/componentSize.ts"],"mappings":";;AAAA,OAAOA,IAAI;AAEX,MAAMC,aAAa,GAAG;EACpB,SAAS,EAAED,IAAI,CAACE,EAAE;EAClB,SAAS,EAAEF,IAAI,CAACG,EAAE;EAClB,SAAS,EAAEH,IAAI,CAACI,EAAE;EAClB,SAAS,EAAEJ,IAAI,CAAC,KAAK,CAAC;EACtB,SAAS,EAAEA,IAAI,CAAC,KAAK,CAAC;EACtB,WAAW,EAAEA,IAAI,CAAC,KAAK,CAAC;EACxB,WAAW,EAAEA,IAAI,CAAC,KAAK,CAAC;EACxB,WAAW,EAAEA,IAAI,CAAC,KAAK,CAAC;EACxB,WAAW,EAAEA,IAAI,CAAC,KAAK,CAAC;EACxB,WAAW,EAAEA,IAAI,CAAC,MAAM,CAAC;EACzB,qCAAqC,EAAEA,IAAI,CAACI,EAAE;EAC9C,eAAe,EAAEJ,IAAI,CAAC,KAAK,CAAC;EAC5B,oBAAoB,EAAEA,IAAI,CAAC,MAAM,CAAC;EAClC,oBAAoB,EAAE,GAAG;EACzB,2BAA2B,EAAEA,IAAI,CAACG,EAAE;EACpC,oBAAoB,EAAEH,IAAI,CAACK,EAAE;EAC7B,oBAAoB,EAAEL,IAAI,CAACE,EAAE;EAC7B,oBAAoB,EAAEF,IAAI,CAAC,KAAK,CAAC;EACjC,oBAAoB,EAAEA,IAAI,CAAC,KAAK,CAAC;EACjC,oBAAoB,EAAEA,IAAI,CAAC,KAAK,CAAC;EACjC,oBAAoB,EAAEA,IAAI,CAAC,MAAM,CAAC;EAClC,oBAAoB,EAAE,GAAG;EACzB,oBAAoB,EAAE,GAAG;EACzB,oBAAoB,EAAE,GAAG;EACzB,oBAAoB,EAAE,IAAI;EAC1B,qBAAqB,EAAEA,IAAI,CAAC,KAAK,CAAC;EAClC,qBAAqB,EAAEA,IAAI,CAAC,KAAK,CAAC;EAClC,qBAAqB,EAAEA,IAAI,CAAC,MAAM,CAAC;EACnC,qBAAqB,EAAEA,IAAI,CAAC,MAAM,CAAC;EACnC,qBAAqB,EAAE,GAAG;EAC1B,qBAAqB,EAAE;AAEzB,CAAC;AAED,eAAeC,aAAa","ignoreList":[]}

package/lib/module/component/AIA/styles/cfs/size/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import sizeToken from "./size.js";
+import componentSize from "./componentSize.js";
+export const size = {
+  ...sizeToken,
+  ...componentSize
+};
+//# sourceMappingURL=index.js.map

package/lib/module/component/AIA/styles/cfs/size/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sizeToken","componentSize","size"],"sourceRoot":"../../../../../../../src","sources":["component/AIA/styles/cfs/size/index.ts"],"mappings":";;AAAA,OAAOA,SAAS;AAChB,OAAOC,aAAa;AAEpB,OAAO,MAAMC,IAAI,GAAG;EAClB,GAAGF,SAAS;EACZ,GAAGC;AACL,CAAC","ignoreList":[]}