@bethinkpl/design-system 35.0.4 → 35.2.0

package/dist/lib/js/components/ProgressBar/ProgressBar.consts.d.ts

@@ -66,3 +66,8 @@ export interface ProgressBarRange {
     icon?: IconItem;
     data?: string;
 }
+export declare const PROGRESS_BAR_LABEL_DATA_POSITIONS: {
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
+export type ProgressBarLabelDataPositions = Value<typeof PROGRESS_BAR_LABEL_DATA_POSITIONS>;

package/dist/lib/js/components/ProgressBar/ProgressBar.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ProgressBarBadgeColor, ProgressBarLabelTextSize, ProgressBarLayout, ProgressBarRadius, ProgressBarRange, ProgressBarSize } from './ProgressBar.consts';
+import { ProgressBarBadgeColor, ProgressBarLabelDataPositions, ProgressBarLabelTextSize, ProgressBarLayout, ProgressBarRadius, ProgressBarRange, ProgressBarSize } from './ProgressBar.consts';
 import { ProgressBarLegendSize } from './ProgressBarLegend.consts';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -70,25 +70,29 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {
-    PROGRESS_BAR_SIZES: Readonly<{
+    labelDataPosition: {
+        type: PropType<ProgressBarLabelDataPositions>;
+        default: "top";
+    };
+}>, {
+    PROGRESS_BAR_SIZES: {
         readonly MEDIUM: "medium";
         readonly SMALL: "small";
         readonly XSMALL: "extra small";
-    }>;
-    PROGRESS_BAR_RADII: Readonly<{
+    };
+    PROGRESS_BAR_RADII: {
         DEFAULT: string;
         NONE: string;
-    }>;
-    PROGRESS_BAR_LAYOUTS: Readonly<{
+    };
+    PROGRESS_BAR_LAYOUTS: {
         readonly DEFAULT: "default";
         readonly COMPACT: "compact";
-    }>;
-    PROGRESS_BAR_LABEL_TEXT_SIZES: Readonly<{
+    };
+    PROGRESS_BAR_LABEL_TEXT_SIZES: {
         readonly MEDIUM: "medium";
         readonly SMALL: "small";
-    }>;
-    ICONS: Readonly<{
+    };
+    ICONS: {
         readonly ANSWERS: VueConstructor<Vue>;
         readonly CHANGE: VueConstructor<Vue>;
         readonly COMMENTS_CHECK: VueConstructor<Vue>;
@@ -359,8 +363,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FAD_SQUARE_MINUS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FAD_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FAD_SQUARE_CHECK: import('@fortawesome/fontawesome-common-types').IconDefinition;
-    }>;
-    ICON_SIZES: Readonly<{
+    };
+    ICON_SIZES: {
         XXX_SMALL: string;
         XX_SMALL: string;
         X_SMALL: string;
@@ -369,8 +373,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         LARGE: string;
         X_LARGE: string;
         XX_LARGE: string;
-    }>;
-}, {
+    };
+    PROGRESS_BAR_LABEL_DATA_POSITIONS: {
+        readonly TOP: "top";
+        readonly BOTTOM: "bottom";
+    };
+}, {}, {
     labelDataExists(): any;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     size: {
@@ -440,22 +448,48 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    labelDataPosition: {
+        type: PropType<ProgressBarLabelDataPositions>;
+        default: "top";
+    };
 }>> & Readonly<{}>, {
     size: string;
     radius: string;
     layout: ProgressBarLayout;
-    labelTextSize: string;
-    labelText: string;
     labelData: string;
     labelDataSupporting: string;
     labelDataSuffix: string;
+    labelTextSize: string;
+    labelText: string;
     labelTextEllipsis: boolean;
     badgePosition: number;
     badgeColor: string;
     hasLegend: boolean;
     legendSize: ProgressBarLegendSize;
     hasLegendPercentValue: boolean;
+    labelDataPosition: ProgressBarLabelDataPositions;
 }, {}, {
+    ProgressBarLabelDataWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        labelData: {
+            type: PropType<string>;
+        };
+        labelDataSupporting: {
+            type: PropType<string>;
+        };
+        labelDataSuffix: {
+            type: PropType<string>;
+        };
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        labelData: {
+            type: PropType<string>;
+        };
+        labelDataSupporting: {
+            type: PropType<string>;
+        };
+        labelDataSuffix: {
+            type: PropType<string>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     ProgressBarLegend: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         layout: {
             type: PropType<import('./ProgressBarLegend.consts').ProgressBarLegendLayout>;

package/dist/lib/js/components/ProgressBar/ProgressBarLabelDataWrapper.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    labelData?: string;
+    labelDataSupporting?: string;
+    labelDataSuffix?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    labelData?: string;
+    labelDataSupporting?: string;
+    labelDataSuffix?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/js/components/ProgressBar/ProgressBar.consts.ts

@@ -83,3 +83,10 @@ export interface ProgressBarRange {
 	icon?: IconItem;
 	data?: string;
 }
+
+export const PROGRESS_BAR_LABEL_DATA_POSITIONS = {
+	TOP: 'top',
+	BOTTOM: 'bottom',
+} as const;
+
+export type ProgressBarLabelDataPositions = Value<typeof PROGRESS_BAR_LABEL_DATA_POSITIONS>;

package/lib/js/components/ProgressBar/ProgressBar.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import ProgressBar from './ProgressBar.vue';
 import {
+	PROGRESS_BAR_LABEL_DATA_POSITIONS,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RANGE_COLORS,
 	ProgressBarRange,
@@ -33,6 +34,7 @@ const defaultProps = {
 	labelDataSuffix: '(%)',
 	labelTextEllipsis: false,
 	hasLegend: false,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 };
 
 const createComponent = (props = defaultProps) => {

package/lib/js/components/ProgressBar/ProgressBar.stories.ts

@@ -1,6 +1,7 @@
 import ProgressBar from './ProgressBar.vue';
 import {
 	PROGRESS_BAR_BADGE_COLORS,
+	PROGRESS_BAR_LABEL_DATA_POSITIONS,
 	PROGRESS_BAR_LABEL_TEXT_SIZES,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
@@ -98,6 +99,10 @@ const argTypes = {
 	hasLegendPercentValue: {
 		control: 'boolean',
 	},
+	labelDataPosition: {
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LABEL_DATA_POSITIONS),
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
@@ -142,6 +147,7 @@ Interactive.args = {
 	hasLegend: false,
 	legendSize: PROGRESS_BAR_LEGEND_SIZES.SMALL,
 	hasLegendPercentValue: true,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 } as Args;
 
 Interactive.parameters = {
@@ -228,6 +234,7 @@ Compact.args = {
 	labelDataSupporting: '100',
 	labelDataSuffix: '(%)',
 	labelTextEllipsis: false,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 } as Args;
 
 export const LegendWithoutIcons = StoryTemplate.bind({});
@@ -259,4 +266,5 @@ LegendWithoutIcons.args = {
 	hasLegend: true,
 	hasLegendPercentValue: true,
 	legendSize: PROGRESS_BAR_LEGEND_SIZES.SMALL,
+	labelDataPosition: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
 } as Args;

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -16,16 +16,16 @@
 			>
 				{{ labelText }}
 			</div>
-			<div v-if="labelDataExists" class="ds-progressBar__labelDataWrapper">
-				<span v-if="labelData" class="ds-progressBar__labelData">{{ labelData }}</span>
-				<span v-if="labelDataSupporting" class="ds-progressBar__labelDataSupporting">
-					<span class="ds-progressBar__labelDataSeparator">/</span>
-					{{ labelDataSupporting }}
-				</span>
-				<span v-if="labelDataSuffix" class="ds-progressBar__labelDataSuffix">{{
-					labelDataSuffix
-				}}</span>
-			</div>
+
+			<progress-bar-label-data-wrapper
+				v-if="
+					labelDataExists && labelDataPosition === PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP
+				"
+				class="ds-progressBar__labelDataWrapperTop"
+				:label-data="labelData"
+				:label-data-supporting="labelDataSupporting"
+				:label-data-suffix="labelDataSuffix"
+			/>
 		</div>
 		<div
 			class="ds-progressBar__barWrapper"
@@ -62,14 +62,32 @@
 				"
 			/>
 		</div>
-		<progress-bar-legend
-			v-if="hasLegend"
-			class="ds-progressBar__legend"
-			:ranges="ranges"
-			:layout="layout"
-			:size="legendSize"
-			:has-percent-value="hasLegendPercentValue"
-		/>
+		<div class="ds-progressBar__bottomWrapper">
+			<progress-bar-legend
+				v-if="hasLegend"
+				class="ds-progressBar__legend"
+				:ranges="ranges"
+				:layout="layout"
+				:size="legendSize"
+				:has-percent-value="hasLegendPercentValue"
+			/>
+
+			<template
+				v-if="
+					labelDataExists &&
+					labelDataPosition === PROGRESS_BAR_LABEL_DATA_POSITIONS.BOTTOM
+				"
+			>
+				<div v-if="!hasLegend" />
+
+				<progress-bar-label-data-wrapper
+					class="ds-progressBar__labelDataWrapperBottom"
+					:label-data="labelData"
+					:label-data-supporting="labelDataSupporting"
+					:label-data-suffix="labelDataSuffix"
+				/>
+			</template>
+		</div>
 	</div>
 </template>
 
@@ -88,7 +106,6 @@ $progress-bar-xs-height: 4px;
 $progress-bar-border-radius: 8px;
 
 $progress-bar-label-text-max-width: 70%;
-$progress-bar-label-data-max-width: 30%;
 
 $progress-bar-badge-size: 24px;
 $progress-bar-badge-size-small: 16px;
@@ -240,36 +257,6 @@ $progress-bar-badge-colors: (
 		}
 	}
 
-	&__labelDataWrapper {
-		@include label-m-default-bold;
-
-		align-items: baseline;
-		color: $color-neutral-text-heavy;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: right;
-		margin-bottom: $space-5xs;
-		margin-left: $space-2xs;
-		max-width: $progress-bar-label-data-max-width;
-	}
-
-	&__labelDataSupporting {
-		color: $color-neutral-text;
-		display: flex;
-		margin-left: $space-5xs;
-	}
-
-	&__labelDataSeparator {
-		margin-right: $space-5xs;
-	}
-
-	&__labelDataSuffix {
-		@include label-s-default-regular;
-
-		color: $color-neutral-text-weak;
-		margin-left: $space-4xs;
-	}
-
 	&__range {
 		@each $class, $color-name in $progress-bar-range-colors {
 			&.-ds-#{$class} {
@@ -309,6 +296,21 @@ $progress-bar-badge-colors: (
 			width: $progress-bar-badge-size-small;
 		}
 	}
+
+	&__bottomWrapper {
+		align-items: center;
+		display: flex;
+		gap: $space-4xs;
+		justify-content: space-between;
+	}
+
+	&__labelDataWrapperTop {
+		margin-bottom: $space-5xs;
+	}
+
+	&__labelDataWrapperBottom {
+		padding-top: 10px;
+	}
 }
 </style>
 
@@ -316,11 +318,13 @@ $progress-bar-badge-colors: (
 import { defineComponent, PropType } from 'vue';
 import {
 	PROGRESS_BAR_BADGE_COLORS,
+	PROGRESS_BAR_LABEL_DATA_POSITIONS,
 	PROGRESS_BAR_LABEL_TEXT_SIZES,
 	PROGRESS_BAR_LAYOUTS,
 	PROGRESS_BAR_RADII,
 	PROGRESS_BAR_SIZES,
 	ProgressBarBadgeColor,
+	ProgressBarLabelDataPositions,
 	ProgressBarLabelTextSize,
 	ProgressBarLayout,
 	ProgressBarRadius,
@@ -331,10 +335,12 @@ import {
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import ProgressBarLegend from './ProgressBarLegend.vue';
 import { PROGRESS_BAR_LEGEND_SIZES, ProgressBarLegendSize } from './ProgressBarLegend.consts';
+import ProgressBarLabelDataWrapper from './ProgressBarLabelDataWrapper.vue';
 
 export default defineComponent({
 	name: 'ProgressBar',
 	components: {
+		ProgressBarLabelDataWrapper,
 		ProgressBarLegend,
 		DsIcon,
 	},
@@ -423,15 +429,20 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		labelDataPosition: {
+			type: String as PropType<ProgressBarLabelDataPositions>,
+			default: PROGRESS_BAR_LABEL_DATA_POSITIONS.TOP,
+		},
 	},
-	data() {
+	setup() {
 		return {
-			PROGRESS_BAR_SIZES: Object.freeze(PROGRESS_BAR_SIZES),
-			PROGRESS_BAR_RADII: Object.freeze(PROGRESS_BAR_RADII),
-			PROGRESS_BAR_LAYOUTS: Object.freeze(PROGRESS_BAR_LAYOUTS),
-			PROGRESS_BAR_LABEL_TEXT_SIZES: Object.freeze(PROGRESS_BAR_LABEL_TEXT_SIZES),
-			ICONS: Object.freeze(ICONS),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
+			PROGRESS_BAR_SIZES,
+			PROGRESS_BAR_RADII,
+			PROGRESS_BAR_LAYOUTS,
+			PROGRESS_BAR_LABEL_TEXT_SIZES,
+			ICONS,
+			ICON_SIZES,
+			PROGRESS_BAR_LABEL_DATA_POSITIONS,
 		};
 	},
 	computed: {

package/lib/js/components/ProgressBar/ProgressBarLabelDataWrapper.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="ds-progressBarLabelDataWrapper">
+		<span v-if="labelData" class="ds-progressBarLabelDataWrapper__labelData">{{
+			labelData
+		}}</span>
+		<span
+			v-if="labelDataSupporting"
+			class="ds-progressBarLabelDataWrapper__labelDataSupporting"
+		>
+			<span class="ds-progressBarLabelDataWrapper__labelDataSeparator">/</span>
+			{{ labelDataSupporting }}
+		</span>
+		<span v-if="labelDataSuffix" class="ds-progressBarLabelDataWrapper__labelDataSuffix">{{
+			labelDataSuffix
+		}}</span>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/typography/tokens';
+
+$progress-bar-label-data-max-width: 30%;
+
+.ds-progressBarLabelDataWrapper {
+	@include label-m-default-bold;
+
+	align-items: baseline;
+	color: $color-neutral-text-heavy;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: right;
+	margin-left: $space-2xs;
+	max-width: $progress-bar-label-data-max-width;
+
+	&__labelDataSupporting {
+		color: $color-neutral-text;
+		display: flex;
+		margin-left: $space-5xs;
+	}
+
+	&__labelDataSeparator {
+		margin-right: $space-5xs;
+	}
+
+	&__labelDataSuffix {
+		@include label-s-default-regular;
+
+		color: $color-neutral-text-weak;
+		margin-left: $space-4xs;
+	}
+}
+</style>
+
+<script lang="ts" setup>
+defineProps<{
+	labelData?: string;
+	labelDataSupporting?: string;
+	labelDataSuffix?: string;
+}>();
+</script>

package/lib/js/styles/ColorsThemes/ColorsThemes.stories.ts

@@ -3,6 +3,7 @@ import { Args, Meta, StoryFn } from '@storybook/vue3';
 import ItemsList from './../ItemsList.vue';
 import rawWnlColorsList from '../../../styles/settings/colors/_raw-wnl.json';
 import rawBodyworkColorsList from '../../../styles/settings/colors/_raw-bodywork.json';
+import rawMedcoursesColorsList from '../../../styles/settings/colors/_raw-mc.json';
 import { TOKENS_TYPES } from '../TokenTypes';
 
 export default {
@@ -30,6 +31,12 @@ const args = {
 			class: '-ds-theme-bodywork',
 			disabled: 'default',
 		},
+		{
+			title: 'Medcourses',
+			list: rawMedcoursesColorsList,
+			class: '-ds-theme-mc',
+			disabled: 'default',
+		},
 	],
 	type: TOKENS_TYPES.COLORS,
 } as Args;

package/lib/js/styles/ColorsTokensPrimaryMedcourses/ColorsTokensPrimaryMedcourses.stories.ts

@@ -0,0 +1,28 @@
+import { Args, Meta, StoryFn } from '@storybook/vue3';
+
+import ItemsList from './../ItemsList.vue';
+import tokensList from '../../../styles/settings/colors/_tokens-mc.json';
+import { TOKENS_TYPES } from '../TokenTypes';
+
+export default {
+	title: 'foundations/Design Tokens/Color Tokens/Primary Medcourses',
+	component: ItemsList,
+} as Meta<typeof ItemsList>;
+
+const StoryTemplate: StoryFn<typeof ItemsList> = (args) => ({
+	components: { ItemsList },
+	setup() {
+		return args;
+	},
+	template: `
+		<items-list :items-lists="itemsLists" :type="type"></items-list>`,
+});
+
+export const PrimaryMedcourses = StoryTemplate.bind({});
+
+const args = {
+	itemsLists: [{ title: 'Primary Medcourses', list: tokensList, class: '-ds-theme-mc' }],
+	type: TOKENS_TYPES.COLORS,
+} as Args;
+
+PrimaryMedcourses.args = args;

package/lib/styles/design-system.scss

@@ -11,6 +11,7 @@
 @import 'settings/colors/raw';
 @import 'settings/colors/raw-wnl';
 @import 'settings/colors/raw-bodywork';
+@import 'settings/colors/raw-mc';
 @import 'settings/typography/variables-css';
 
 // Mixins
@@ -26,9 +27,11 @@
 @import 'settings/colors/tokens';
 @import 'settings/colors/tokens-wnl';
 @import 'settings/colors/tokens-bodywork';
+@import 'settings/colors/tokens-mc';
 @import 'settings/colors/tokens-variables';
 @import 'settings/colors/tokens-wnl-variables';
 @import 'settings/colors/tokens-bodywork-variables';
+@import 'settings/colors/tokens-mc-variables';
 
 html,
 body {

package/lib/styles/settings/colors/_raw-mc.json

@@ -0,0 +1 @@
+{"theme":[{"id":"_raw-mc.scss_theme-50","label":"theme-50","value":"#E8EFFC"},{"id":"_raw-mc.scss_theme-100","label":"theme-100","value":"#D8E4FB"},{"id":"_raw-mc.scss_theme-200","label":"theme-200","value":"#AEC6F5"},{"id":"_raw-mc.scss_theme-300","label":"theme-300","value":"#6399F0"},{"id":"_raw-mc.scss_theme-400","label":"theme-400","value":"#2664E0"},{"id":"_raw-mc.scss_theme-500","label":"theme-500","value":"#164BB6"},{"id":"_raw-mc.scss_theme-600","label":"theme-600","value":"#123D94"},{"id":"_raw-mc.scss_theme-700","label":"theme-700","value":"#0E3277"},{"id":"_raw-mc.scss_theme-800","label":"theme-800","value":"#0B265B"},{"id":"_raw-mc.scss_theme-900","label":"theme-900","value":"#081D44"}]}

package/lib/styles/settings/colors/_raw-mc.scss

@@ -0,0 +1,22 @@
+.-ds-theme-mc {
+	--theme-50: #e8effc;
+	--theme-50-rgb: 232, 239, 252;
+	--theme-100: #d8e4fb;
+	--theme-100-rgb: 216, 228, 251;
+	--theme-200: #aec6f5;
+	--theme-200-rgb: 174, 198, 245;
+	--theme-300: #6399f0;
+	--theme-300-rgb: 99, 153, 240;
+	--theme-400: #2664e0;
+	--theme-400-rgb: 38, 100, 224;
+	--theme-500: #164bb6;
+	--theme-500-rgb: 22, 75, 182;
+	--theme-600: #123d94;
+	--theme-600-rgb: 18, 61, 148;
+	--theme-700: #0e3277;
+	--theme-700-rgb: 14, 50, 119;
+	--theme-800: #0b265b;
+	--theme-800-rgb: 11, 38, 91;
+	--theme-900: #081d44;
+	--theme-900-rgb: 8, 29, 68;
+}

package/lib/styles/settings/colors/_raw.json

@@ -1 +1 @@
-{"default":[{"id":"_raw.scss_black","label":"black","value":"#0C1726"},{"id":"_raw.scss_white","label":"white","value":"#FFF"}],"gray":[{"id":"_raw.scss_gray-50","label":"gray-50","value":"#F7F7F9"},{"id":"_raw.scss_gray-100","label":"gray-100","value":"#F1F2F6"},{"id":"_raw.scss_gray-200","label":"gray-200","value":"#E5E7ED"},{"id":"_raw.scss_gray-300","label":"gray-300","value":"#C6CBD7"},{"id":"_raw.scss_gray-400","label":"gray-400","value":"#A8AFC0"},{"id":"_raw.scss_gray-500","label":"gray-500","value":"#8992A7"},{"id":"_raw.scss_gray-600","label":"gray-600","value":"#767F95"},{"id":"_raw.scss_gray-700","label":"gray-700","value":"#636C84"},{"id":"_raw.scss_gray-800","label":"gray-800","value":"#4A5269"},{"id":"_raw.scss_gray-900","label":"gray-900","value":"#343C50"}],"green":[{"id":"_raw.scss_green-50","label":"green-50","value":"#E9F7F0"},{"id":"_raw.scss_green-100","label":"green-100","value":"#D7F0E4"},{"id":"_raw.scss_green-200","label":"green-200","value":"#A2DCC1"},{"id":"_raw.scss_green-300","label":"green-300","value":"#5FC594"},{"id":"_raw.scss_green-400","label":"green-400","value":"#18A85F"},{"id":"_raw.scss_green-500","label":"green-500","value":"#16995A"},{"id":"_raw.scss_green-600","label":"green-600","value":"#158753"},{"id":"_raw.scss_green-700","label":"green-700","value":"#14744B"},{"id":"_raw.scss_green-800","label":"green-800","value":"#126344"},{"id":"_raw.scss_green-900","label":"green-900","value":"#11513D"}],"gold":[{"id":"_raw.scss_gold-50","label":"gold-50","value":"#FFF4E2"},{"id":"_raw.scss_gold-100","label":"gold-100","value":"#FFEAC5"},{"id":"_raw.scss_gold-200","label":"gold-200","value":"#FFD690"},{"id":"_raw.scss_gold-300","label":"gold-300","value":"#FBC358"},{"id":"_raw.scss_gold-400","label":"gold-400","value":"#F5AE25"},{"id":"_raw.scss_gold-500","label":"gold-500","value":"#EB960E"},{"id":"_raw.scss_gold-600","label":"gold-600","value":"#E08504"},{"id":"_raw.scss_gold-700","label":"gold-700","value":"#BD6D06"},{"id":"_raw.scss_gold-800","label":"gold-800","value":"#995B0F"},{"id":"_raw.scss_gold-900","label":"gold-900","value":"#7D4A0A"}],"orange":[{"id":"_raw.scss_orange-50","label":"orange-50","value":"#FDEFEC"},{"id":"_raw.scss_orange-100","label":"orange-100","value":"#FBE1DC"},{"id":"_raw.scss_orange-200","label":"orange-200","value":"#F6BCB0"},{"id":"_raw.scss_orange-300","label":"orange-300","value":"#EF8772"},{"id":"_raw.scss_orange-400","label":"orange-400","value":"#E85335"},{"id":"_raw.scss_orange-500","label":"orange-500","value":"#E43C1A"},{"id":"_raw.scss_orange-600","label":"orange-600","value":"#D43718"},{"id":"_raw.scss_orange-700","label":"orange-700","value":"#BA3115"},{"id":"_raw.scss_orange-800","label":"orange-800","value":"#A02A12"},{"id":"_raw.scss_orange-900","label":"orange-900","value":"#85230F"}],"red":[{"id":"_raw.scss_red-50","label":"red-50","value":"#FCEEF0"},{"id":"_raw.scss_red-100","label":"red-100","value":"#FAE3E5"},{"id":"_raw.scss_red-200","label":"red-200","value":"#F4BDC1"},{"id":"_raw.scss_red-300","label":"red-300","value":"#EC868E"},{"id":"_raw.scss_red-400","label":"red-400","value":"#E24956"},{"id":"_raw.scss_red-500","label":"red-500","value":"#DD2A3A"},{"id":"_raw.scss_red-600","label":"red-600","value":"#CA1E2E"},{"id":"_raw.scss_red-700","label":"red-700","value":"#B41E2D"},{"id":"_raw.scss_red-800","label":"red-800","value":"#9F1D2C"},{"id":"_raw.scss_red-900","label":"red-900","value":"#831C2B"}],"blue":[{"id":"_raw.scss_blue-50","label":"blue-50","value":"#E6F4FA"},{"id":"_raw.scss_blue-100","label":"blue-100","value":"#CDE8F5"},{"id":"_raw.scss_blue-200","label":"blue-200","value":"#9FD4EC"},{"id":"_raw.scss_blue-300","label":"blue-300","value":"#62ADD5"},{"id":"_raw.scss_blue-400","label":"blue-400","value":"#308BBF"},{"id":"_raw.scss_blue-500","label":"blue-500","value":"#1779B5"},{"id":"_raw.scss_blue-600","label":"blue-600","value":"#0C6CA8"},{"id":"_raw.scss_blue-700","label":"blue-700","value":"#0C6095"},{"id":"_raw.scss_blue-800","label":"blue-800","value":"#0C5685"},{"id":"_raw.scss_blue-900","label":"blue-900","value":"#0C4870"}],"violet":[{"id":"_raw.scss_violet-50","label":"violet-50","value":"#F4F1F8"},{"id":"_raw.scss_violet-100","label":"violet-100","value":"#E6DEEE"},{"id":"_raw.scss_violet-200","label":"violet-200","value":"#CEBFDE"},{"id":"_raw.scss_violet-300","label":"violet-300","value":"#AF97C8"},{"id":"_raw.scss_violet-400","label":"violet-400","value":"#9271B5"},{"id":"_raw.scss_violet-500","label":"violet-500","value":"#7E57A7"},{"id":"_raw.scss_violet-600","label":"violet-600","value":"#72499B"},{"id":"_raw.scss_violet-700","label":"violet-700","value":"#643D8C"},{"id":"_raw.scss_violet-800","label":"violet-800","value":"#56367B"},{"id":"_raw.scss_violet-900","label":"violet-900","value":"#472F6B"}],"indigo":[{"id":"_raw.scss_indigo-50","label":"indigo-50","value":"#F0F1FD"},{"id":"_raw.scss_indigo-100","label":"indigo-100","value":"#E4E5FB"},{"id":"_raw.scss_indigo-200","label":"indigo-200","value":"#BFC2F5"},{"id":"_raw.scss_indigo-300","label":"indigo-300","value":"#989DEE"},{"id":"_raw.scss_indigo-400","label":"indigo-400","value":"#6F77E3"},{"id":"_raw.scss_indigo-500","label":"indigo-500","value":"#6169CF"},{"id":"_raw.scss_indigo-600","label":"indigo-600","value":"#575EBD"},{"id":"_raw.scss_indigo-700","label":"indigo-700","value":"#4C55A6"},{"id":"_raw.scss_indigo-800","label":"indigo-800","value":"#424B90"},{"id":"_raw.scss_indigo-900","label":"indigo-900","value":"#363E73"}],"olive":[{"id":"_raw.scss_olive-50","label":"olive-50","value":"#EEF6E3"},{"id":"_raw.scss_olive-100","label":"olive-100","value":"#E0EED1"},{"id":"_raw.scss_olive-200","label":"olive-200","value":"#C7E1AB"},{"id":"_raw.scss_olive-300","label":"olive-300","value":"#A5CF76"},{"id":"_raw.scss_olive-400","label":"olive-400","value":"#8ABD4D"},{"id":"_raw.scss_olive-500","label":"olive-500","value":"#72AD34"},{"id":"_raw.scss_olive-600","label":"olive-600","value":"#5F972F"},{"id":"_raw.scss_olive-700","label":"olive-700","value":"#4D7E26"},{"id":"_raw.scss_olive-800","label":"olive-800","value":"#35571B"},{"id":"_raw.scss_olive-900","label":"olive-900","value":"#263F13"}],"pink":[{"id":"_raw.scss_pink-50","label":"pink-50","value":"#FDF2F4"},{"id":"_raw.scss_pink-100","label":"pink-100","value":"#FBE5E8"},{"id":"_raw.scss_pink-200","label":"pink-200","value":"#F7CAD1"},{"id":"_raw.scss_pink-300","label":"pink-300","value":"#F2A6B2"},{"id":"_raw.scss_pink-400","label":"pink-400","value":"#EB7A8B"},{"id":"_raw.scss_pink-500","label":"pink-500","value":"#E55268"},{"id":"_raw.scss_pink-600","label":"pink-600","value":"#C83745"},{"id":"_raw.scss_pink-700","label":"pink-700","value":"#9C2B36"},{"id":"_raw.scss_pink-800","label":"pink-800","value":"#59181E"},{"id":"_raw.scss_pink-900","label":"pink-900","value":"#380F13"}],"yellow":[{"id":"_raw.scss_yellow-50","label":"yellow-50","value":"#FFFAE3"},{"id":"_raw.scss_yellow-100","label":"yellow-100","value":"#FFF5C4"},{"id":"_raw.scss_yellow-200","label":"yellow-200","value":"#FEEC93"},{"id":"_raw.scss_yellow-300","label":"yellow-300","value":"#FEE56D"},{"id":"_raw.scss_yellow-400","label":"yellow-400","value":"#FDDE44"},{"id":"_raw.scss_yellow-500","label":"yellow-500","value":"#FAD000"},{"id":"_raw.scss_yellow-600","label":"yellow-600","value":"#EDBE00"},{"id":"_raw.scss_yellow-700","label":"yellow-700","value":"#CC9C00"},{"id":"_raw.scss_yellow-800","label":"yellow-800","value":"#A37800"},{"id":"_raw.scss_yellow-900","label":"yellow-900","value":"#7D5A00"}],"theme":[{"id":"_raw.scss_theme-50","label":"theme-50","value":"#E8F6F6"},{"id":"_raw.scss_theme-100","label":"theme-100","value":"#D5EEEF"},{"id":"_raw.scss_theme-200","label":"theme-200","value":"#A6DCDE"},{"id":"_raw.scss_theme-300","label":"theme-300","value":"#5BBDC1"},{"id":"_raw.scss_theme-400","label":"theme-400","value":"#0D9EA4"},{"id":"_raw.scss_theme-500","label":"theme-500","value":"#078F96"},{"id":"_raw.scss_theme-600","label":"theme-600","value":"#087E85"},{"id":"_raw.scss_theme-700","label":"theme-700","value":"#096B75"},{"id":"_raw.scss_theme-800","label":"theme-800","value":"#095D68"},{"id":"_raw.scss_theme-900","label":"theme-900","value":"#0A4C58"}]}
+{"default":[{"id":"_raw.scss_black","label":"black","value":"#0C1726"},{"id":"_raw.scss_white","label":"white","value":"#FFF"}],"gray":[{"id":"_raw.scss_gray-50","label":"gray-50","value":"#F7F7F9"},{"id":"_raw.scss_gray-100","label":"gray-100","value":"#F1F2F6"},{"id":"_raw.scss_gray-200","label":"gray-200","value":"#E5E7ED"},{"id":"_raw.scss_gray-300","label":"gray-300","value":"#C6CBD7"},{"id":"_raw.scss_gray-400","label":"gray-400","value":"#A8AFC0"},{"id":"_raw.scss_gray-500","label":"gray-500","value":"#8992A7"},{"id":"_raw.scss_gray-600","label":"gray-600","value":"#767F95"},{"id":"_raw.scss_gray-700","label":"gray-700","value":"#636C84"},{"id":"_raw.scss_gray-800","label":"gray-800","value":"#4A5269"},{"id":"_raw.scss_gray-900","label":"gray-900","value":"#343C50"}],"green":[{"id":"_raw.scss_green-50","label":"green-50","value":"#E9F7F0"},{"id":"_raw.scss_green-100","label":"green-100","value":"#D7F0E4"},{"id":"_raw.scss_green-200","label":"green-200","value":"#A2DCC1"},{"id":"_raw.scss_green-300","label":"green-300","value":"#5FC594"},{"id":"_raw.scss_green-400","label":"green-400","value":"#18A85F"},{"id":"_raw.scss_green-500","label":"green-500","value":"#16995A"},{"id":"_raw.scss_green-600","label":"green-600","value":"#158753"},{"id":"_raw.scss_green-700","label":"green-700","value":"#14744B"},{"id":"_raw.scss_green-800","label":"green-800","value":"#126344"},{"id":"_raw.scss_green-900","label":"green-900","value":"#11513D"}],"gold":[{"id":"_raw.scss_gold-50","label":"gold-50","value":"#FFF4E2"},{"id":"_raw.scss_gold-100","label":"gold-100","value":"#FFEAC5"},{"id":"_raw.scss_gold-200","label":"gold-200","value":"#FFD690"},{"id":"_raw.scss_gold-300","label":"gold-300","value":"#FBC358"},{"id":"_raw.scss_gold-400","label":"gold-400","value":"#F5AE25"},{"id":"_raw.scss_gold-500","label":"gold-500","value":"#EB960E"},{"id":"_raw.scss_gold-600","label":"gold-600","value":"#E08504"},{"id":"_raw.scss_gold-700","label":"gold-700","value":"#BD6D06"},{"id":"_raw.scss_gold-800","label":"gold-800","value":"#995B0F"},{"id":"_raw.scss_gold-900","label":"gold-900","value":"#7D4A0A"}],"orange":[{"id":"_raw.scss_orange-50","label":"orange-50","value":"#FDEFEC"},{"id":"_raw.scss_orange-100","label":"orange-100","value":"#FBE1DC"},{"id":"_raw.scss_orange-200","label":"orange-200","value":"#F6BCB0"},{"id":"_raw.scss_orange-300","label":"orange-300","value":"#EF8772"},{"id":"_raw.scss_orange-400","label":"orange-400","value":"#E85335"},{"id":"_raw.scss_orange-500","label":"orange-500","value":"#E43C1A"},{"id":"_raw.scss_orange-600","label":"orange-600","value":"#D43718"},{"id":"_raw.scss_orange-700","label":"orange-700","value":"#BA3115"},{"id":"_raw.scss_orange-800","label":"orange-800","value":"#A02A12"},{"id":"_raw.scss_orange-900","label":"orange-900","value":"#85230F"}],"red":[{"id":"_raw.scss_red-50","label":"red-50","value":"#FCEEF0"},{"id":"_raw.scss_red-100","label":"red-100","value":"#FAE3E5"},{"id":"_raw.scss_red-200","label":"red-200","value":"#F4BDC1"},{"id":"_raw.scss_red-300","label":"red-300","value":"#EC868E"},{"id":"_raw.scss_red-400","label":"red-400","value":"#E24956"},{"id":"_raw.scss_red-500","label":"red-500","value":"#DD2A3A"},{"id":"_raw.scss_red-600","label":"red-600","value":"#CA1E2E"},{"id":"_raw.scss_red-700","label":"red-700","value":"#B41E2D"},{"id":"_raw.scss_red-800","label":"red-800","value":"#9F1D2C"},{"id":"_raw.scss_red-900","label":"red-900","value":"#831C2B"}],"blue":[{"id":"_raw.scss_blue-50","label":"blue-50","value":"#E6F4FA"},{"id":"_raw.scss_blue-100","label":"blue-100","value":"#CDE8F5"},{"id":"_raw.scss_blue-200","label":"blue-200","value":"#9FD4EC"},{"id":"_raw.scss_blue-300","label":"blue-300","value":"#62ADD5"},{"id":"_raw.scss_blue-400","label":"blue-400","value":"#308BBF"},{"id":"_raw.scss_blue-500","label":"blue-500","value":"#1779B5"},{"id":"_raw.scss_blue-600","label":"blue-600","value":"#0C6CA8"},{"id":"_raw.scss_blue-700","label":"blue-700","value":"#0C6095"},{"id":"_raw.scss_blue-800","label":"blue-800","value":"#0C5685"},{"id":"_raw.scss_blue-900","label":"blue-900","value":"#0C4870"}],"indigo":[{"id":"_raw.scss_indigo-50","label":"indigo-50","value":"#F0F1FD"},{"id":"_raw.scss_indigo-100","label":"indigo-100","value":"#E4E5FB"},{"id":"_raw.scss_indigo-200","label":"indigo-200","value":"#BFC2F5"},{"id":"_raw.scss_indigo-300","label":"indigo-300","value":"#989DEE"},{"id":"_raw.scss_indigo-400","label":"indigo-400","value":"#6F77E3"},{"id":"_raw.scss_indigo-500","label":"indigo-500","value":"#6169CF"},{"id":"_raw.scss_indigo-600","label":"indigo-600","value":"#575EBD"},{"id":"_raw.scss_indigo-700","label":"indigo-700","value":"#4C55A6"},{"id":"_raw.scss_indigo-800","label":"indigo-800","value":"#424B90"},{"id":"_raw.scss_indigo-900","label":"indigo-900","value":"#363E73"}],"teal":[{"id":"_raw.scss_teal-50","label":"teal-50","value":"#E8F6F6"},{"id":"_raw.scss_teal-100","label":"teal-100","value":"#D5EEEF"},{"id":"_raw.scss_teal-200","label":"teal-200","value":"#A6DCDE"},{"id":"_raw.scss_teal-300","label":"teal-300","value":"#5BBDC1"},{"id":"_raw.scss_teal-400","label":"teal-400","value":"#0D9EA4"},{"id":"_raw.scss_teal-500","label":"teal-500","value":"#078F96"},{"id":"_raw.scss_teal-600","label":"teal-600","value":"#078F96"},{"id":"_raw.scss_teal-700","label":"teal-700","value":"#096B75"},{"id":"_raw.scss_teal-800","label":"teal-800","value":"#095D68"},{"id":"_raw.scss_teal-900","label":"teal-900","value":"#0A4C58"}],"violet":[{"id":"_raw.scss_violet-50","label":"violet-50","value":"#F4F1F8"},{"id":"_raw.scss_violet-100","label":"violet-100","value":"#E6DEEE"},{"id":"_raw.scss_violet-200","label":"violet-200","value":"#CEBFDE"},{"id":"_raw.scss_violet-300","label":"violet-300","value":"#AF97C8"},{"id":"_raw.scss_violet-400","label":"violet-400","value":"#9271B5"},{"id":"_raw.scss_violet-500","label":"violet-500","value":"#7E57A7"},{"id":"_raw.scss_violet-600","label":"violet-600","value":"#72499B"},{"id":"_raw.scss_violet-700","label":"violet-700","value":"#643D8C"},{"id":"_raw.scss_violet-800","label":"violet-800","value":"#56367B"},{"id":"_raw.scss_violet-900","label":"violet-900","value":"#472F6B"}],"olive":[{"id":"_raw.scss_olive-50","label":"olive-50","value":"#EEF6E3"},{"id":"_raw.scss_olive-100","label":"olive-100","value":"#E0EED1"},{"id":"_raw.scss_olive-200","label":"olive-200","value":"#C7E1AB"},{"id":"_raw.scss_olive-300","label":"olive-300","value":"#A5CF76"},{"id":"_raw.scss_olive-400","label":"olive-400","value":"#8ABD4D"},{"id":"_raw.scss_olive-500","label":"olive-500","value":"#72AD34"},{"id":"_raw.scss_olive-600","label":"olive-600","value":"#5F972F"},{"id":"_raw.scss_olive-700","label":"olive-700","value":"#4D7E26"},{"id":"_raw.scss_olive-800","label":"olive-800","value":"#35571B"},{"id":"_raw.scss_olive-900","label":"olive-900","value":"#263F13"}],"pink":[{"id":"_raw.scss_pink-50","label":"pink-50","value":"#FDF2F4"},{"id":"_raw.scss_pink-100","label":"pink-100","value":"#FBE5E8"},{"id":"_raw.scss_pink-200","label":"pink-200","value":"#F7CAD1"},{"id":"_raw.scss_pink-300","label":"pink-300","value":"#F2A6B2"},{"id":"_raw.scss_pink-400","label":"pink-400","value":"#EB7A8B"},{"id":"_raw.scss_pink-500","label":"pink-500","value":"#E55268"},{"id":"_raw.scss_pink-600","label":"pink-600","value":"#C83745"},{"id":"_raw.scss_pink-700","label":"pink-700","value":"#9C2B36"},{"id":"_raw.scss_pink-800","label":"pink-800","value":"#59181E"},{"id":"_raw.scss_pink-900","label":"pink-900","value":"#380F13"}],"yellow":[{"id":"_raw.scss_yellow-50","label":"yellow-50","value":"#FFFAE3"},{"id":"_raw.scss_yellow-100","label":"yellow-100","value":"#FFF5C4"},{"id":"_raw.scss_yellow-200","label":"yellow-200","value":"#FEEC93"},{"id":"_raw.scss_yellow-300","label":"yellow-300","value":"#FEE56D"},{"id":"_raw.scss_yellow-400","label":"yellow-400","value":"#FDDE44"},{"id":"_raw.scss_yellow-500","label":"yellow-500","value":"#FAD000"},{"id":"_raw.scss_yellow-600","label":"yellow-600","value":"#EDBE00"},{"id":"_raw.scss_yellow-700","label":"yellow-700","value":"#CC9C00"},{"id":"_raw.scss_yellow-800","label":"yellow-800","value":"#A37800"},{"id":"_raw.scss_yellow-900","label":"yellow-900","value":"#7D5A00"}],"theme":[{"id":"_raw.scss_theme-50","label":"theme-50","value":"#E8F6F6"},{"id":"_raw.scss_theme-100","label":"theme-100","value":"#D5EEEF"},{"id":"_raw.scss_theme-200","label":"theme-200","value":"#A6DCDE"},{"id":"_raw.scss_theme-300","label":"theme-300","value":"#5BBDC1"},{"id":"_raw.scss_theme-400","label":"theme-400","value":"#0D9EA4"},{"id":"_raw.scss_theme-500","label":"theme-500","value":"#078F96"},{"id":"_raw.scss_theme-600","label":"theme-600","value":"#087E85"},{"id":"_raw.scss_theme-700","label":"theme-700","value":"#096B75"},{"id":"_raw.scss_theme-800","label":"theme-800","value":"#095D68"},{"id":"_raw.scss_theme-900","label":"theme-900","value":"#0A4C58"}]}