@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

package/src/resources/styles/themes/light/light.css

@@ -0,0 +1,405 @@
+:root {
+	color-scheme: light;
+
+	/* Theme Colors */
+	--color-theme-0: #FFFFFF;
+	--color-theme-50: #F9FAFB;
+	--color-theme-75: #F6F7F9;
+	--color-theme-100: #F3F4F6;
+	--color-theme-125: #EDEFF2;
+	--color-theme-150: #E7EAEE;
+	--color-theme-175: #E2E5E9;
+	--color-theme-200: #DCE0E5;
+	--color-theme-225: #D6DBE1;
+	--color-theme-250: #D0D5DC;
+	--color-theme-260: #CAD0D8;
+	--color-theme-275: #C4CBD4;
+	--color-theme-300: #BEC5CF;
+	--color-theme-325: #B8C0CB;
+	--color-theme-350: #B3BBC7;
+	--color-theme-360: #ADB5C2;
+	--color-theme-375: #A7B0BE;
+	--color-theme-400: #A1ABBA;
+	--color-theme-410: #9BA6B5;
+	--color-theme-420: #95A0B1;
+	--color-theme-430: #8F9BAD;
+	--color-theme-440: #8A96A8;
+	--color-theme-450: #8491A4;
+	--color-theme-460: #7E8BA0;
+	--color-theme-465: #78869C;
+	--color-theme-470: #728197;
+	--color-theme-475: #6C7B93;
+	--color-theme-480: #68778D;
+	--color-theme-485: #637287;
+	--color-theme-500: #5F6D81;
+	--color-theme-550: #5B687B;
+	--color-theme-575: #576375;
+	--color-theme-600: #525E70;
+	--color-theme-625: #4E596A;
+	--color-theme-650: #4A5564;
+	--color-theme-675: #454F5E;
+	--color-theme-700: #414A58;
+	--color-theme-710: #3D4552;
+	--color-theme-725: #38404C;
+	--color-theme-750: #343B47;
+	--color-theme-800: #303641;
+	--color-theme-850: #2B323B;
+	--color-theme-900: #272D35;
+	--color-theme-925: #23282F;
+	--color-theme-950: #1E2329;
+	--color-theme-955: #1A1E23;
+	--color-theme-960: #16191D;
+	--color-theme-965: #111318;
+	--color-theme-970: #0D0F12;
+	--color-theme-1000: #000000;
+
+	/*base color*/
+	--color-white: rgba(255, 255, 255, 1);
+	--color-black: rgba(0, 0, 0, 1);
+
+	/* Primary Colors */
+	--color-primary-25: #F5F9FF;
+	--color-primary-50: #EBF4FF;
+	--color-primary-100: #D6E9FF;
+	--color-primary-125: #CCE3FF;
+	--color-primary-150: #C2DDFF;
+	--color-primary-200: #B8D8FF;
+	--color-primary-225: #A3CDFF;
+	--color-primary-250: #8FC1FF;
+	--color-primary-275: #7AB6FF;
+	--color-primary-300: #66ABFF;
+	--color-primary-350: #52A0FF;
+	--color-primary-400: #3D94FF;
+	--color-primary-450: #2D8AFB;
+	--color-primary-500: #1E7FF6;
+	--color-primary-550: #0F74F0;
+	--color-primary-600: #136BD8;
+	--color-primary-650: #1563C1;
+	--color-primary-700: #175AAB;
+	--color-primary-720: #185095;
+	--color-primary-740: #184781;
+	--color-primary-760: #183E6D;
+	--color-primary-780: #16355A;
+	--color-primary-800: #142B48;
+	--color-primary-825: #18293E;
+	--color-primary-850: #1C2736;
+	--color-primary-900: #1C2736;
+	--color-primary-950: #1F252E;
+
+	/* Positive Colors */
+	--color-positive-25: #F6FDF8;
+	--color-positive-50: #EEFCF1;
+	--color-positive-100: #E5FAEA;
+	--color-positive-125: #D8F8E0;
+	--color-positive-150: #C2F4CF;
+	--color-positive-200: #B1F1C1;
+	--color-positive-225: #A0EEB3;
+	--color-positive-250: #8EEBA5;
+	--color-positive-275: #7DE898;
+	--color-positive-300: #6CE58A;
+	--color-positive-350: #5AE27C;
+	--color-positive-400: #4DDB73;
+	--color-positive-450: #41D265;
+	--color-positive-500: #36C95B;
+	--color-positive-550: #36B556;
+	--color-positive-600: #36A150;
+	--color-positive-650: #348D4B;
+	--color-positive-700: #327B44;
+	--color-positive-720: #2F6A3E;
+	--color-positive-740: #2C5934;
+	--color-positive-760: #27492B;
+	--color-positive-780: #223A23;
+	--color-positive-800: #1C2C1C;
+	--color-positive-825: #161E15;
+	--color-positive-850: #141A14;
+	--color-positive-900: #131612;
+	--color-positive-950: #111311;
+
+	/* Warning Colors */
+	--color-warning-25: #FFFDFA;
+	--color-warning-50: #FFF7F0;
+	--color-warning-100: #FFF3E6;
+	--color-warning-125: #FFEDDB;
+	--color-warning-150: #FFE8CF;
+	--color-warning-200: #FFE3C7;
+	--color-warning-225: #FFDEBF;
+	--color-warning-250: #FFD7A8;
+	--color-warning-275: #FFCB94;
+	--color-warning-300: #FFBF80;
+	--color-warning-350: #FFB56B;
+	--color-warning-400: #FFAB57;
+	--color-warning-450: #FFA042;
+	--color-warning-500: #FB9632;
+	--color-warning-550: #F48B1B;
+	--color-warning-600: #F08214;
+	--color-warning-650: #DD780C;
+	--color-warning-700: #C56D1C;
+	--color-warning-720: #AF6420;
+	--color-warning-740: #9A511A;
+	--color-warning-760: #7F3D19;
+	--color-warning-780: #71321E;
+	--color-warning-800: #5E2517;
+	--color-warning-825: #4C2015;
+	--color-warning-850: #421B1A;
+	--color-warning-900: #391F1E;
+	--color-warning-950: #312121;
+
+	/* Negative Colors */
+	--color-negative-25: #FFFAFA;
+	--color-negative-50: #FFF1F0;
+	--color-negative-100: #FFE6E5;
+	--color-negative-125: #FFDCDB;
+	--color-negative-150: #FFD3D1;
+	--color-negative-200: #FFC9C7;
+	--color-negative-225: #FFBFBD;
+	--color-negative-250: #FFABA8;
+	--color-negative-275: #FF9894;
+	--color-negative-300: #FF8480;
+	--color-negative-350: #FF706B;
+	--color-negative-400: #FF5D57;
+	--color-negative-450: #FF4842;
+	--color-negative-500: #F73C36;
+	--color-negative-550: #F12E27;
+	--color-negative-600: #EB2019;
+	--color-negative-650: #D81E18;
+	--color-negative-700: #C1201A;
+	--color-negative-720: #AB211C;
+	--color-negative-740: #96211D;
+	--color-negative-760: #821F1C;
+	--color-negative-780: #6E1F1C;
+	--color-negative-800: #5B1C1A;
+	--color-negative-825: #4A1917;
+	--color-negative-850: #401D1C;
+	--color-negative-900: #37201F;
+	--color-negative-950: #2F2222;
+
+	/* Info Colors */
+	--color-info-25: #FCFAFF;
+	--color-info-50: #F9F5FF;
+	--color-info-100: #F6F0FF;
+	--color-info-125: #F1E5FF;
+	--color-info-150: #EBDBFF;
+	--color-info-200: #E5D1FF;
+	--color-info-225: #DFC7FF;
+	--color-info-250: #D9BDFF;
+	--color-info-275: #D4B2FF;
+	--color-info-300: #C89EFF;
+	--color-info-350: #BC8AFF;
+	--color-info-400: #B175FF;
+	--color-info-450: #A561FF;
+	--color-info-500: #9A4DFF;
+	--color-info-550: #8F38FF;
+	--color-info-600: #8428FB;
+	--color-info-650: #7919F5;
+	--color-info-700: #6F0FEB;
+	--color-info-720: #6612D3;
+	--color-info-740: #5E15BC;
+	--color-info-760: #5517A6;
+	--color-info-780: #441891;
+	--color-info-800: #36187C;
+	--color-info-825: #2A1769;
+	--color-info-850: #201556;
+	--color-info-900: #181344;
+	--color-info-950: #1E1D2B;
+
+	/* Layer Colors */
+	--color-layer-1: rgba(97, 121, 158, 0.1);
+	--color-layer-2: rgba(97, 121, 158, 0.14);
+	--color-layer-3: rgba(97, 121, 158, 0.18);
+	--color-layer-4: rgba(97, 121, 158, 0.24);
+
+	--color-layer-primary-1: rgba(45, 110, 251, 0.08);
+	--color-layer-primary-2: rgba(45, 110, 251, 0.12);
+	--color-layer-primary-3: rgba(45, 110, 251, 0.18);
+	--color-layer-primary-4: rgba(45, 110, 251, 0.24);
+
+	--color-layer-positive-1: rgba(54, 181, 86, 0.08);
+	--color-layer-positive-2: rgba(54, 181, 86, 0.12);
+	--color-layer-positive-3: rgba(54, 181, 86, 0.18);
+	--color-layer-positive-4: rgba(54, 181, 86, 0.24);
+
+	--color-layer-warning-1: rgba(240, 130, 20, 0.08);
+	--color-layer-warning-2: rgba(240, 130, 20, 0.12);
+	--color-layer-warning-3: rgba(240, 130, 20, 0.18);
+	--color-layer-warning-4: rgba(240, 130, 20, 0.24);
+
+	--color-layer-negative-1: rgba(241, 46, 39, 0.08);
+	--color-layer-negative-2: rgba(241, 46, 39, 0.12);
+	--color-layer-negative-3: rgba(241, 46, 39, 0.18);
+	--color-layer-negative-4: rgba(241, 46, 39, 0.24);
+
+	--color-layer-info-1: rgba(165, 97, 255, 0.08);
+	--color-layer-info-2: rgba(165, 97, 255, 0.12);
+	--color-layer-info-3: rgba(165, 97, 255, 0.18);
+	--color-layer-info-4: rgba(165, 97, 255, 0.24);
+
+	/* top-shadow */
+	--top-shadow-xs: 0px 0px 3px rgba(112, 144, 176, 0.07), 0px 5px 25px rgba(112, 144, 176, 0.06);
+	--top-shadow-s: 0px 0px 3px rgba(112, 144, 176, 0.07), 0px 5px 25px rgba(112, 144, 176, 0.12);
+	/** @deprecated, использовать --top-shadow-m **/
+	--top-shadow: 0px 0px 4px rgba(4, 9, 84, 0.08), 0px 4px 32px rgba(4, 9, 84, 0.1);
+	--top-shadow-m: 0px 0px 4px 0px rgba(4, 9, 84, 0.08), 0px 4px 32px 0px rgba(4, 9, 84, 0.1);
+	--top-shadow-b: 0px 0px 4px rgba(4, 36, 84, 0.08), 0px 18px 32px rgba(4, 25, 84, 0.18);
+
+	--top-shadow-darken-1: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
+	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.09);
+	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.18);
+
+	/* preloader style color */
+	--color-bg-preloader: rgba(255, 255, 255, 0.01);
+}
+
+:root {
+	/* brand colors */
+	--color-brand-1: var(--color-primary-500);
+	--color-brand-2: var(--color-primary-600);
+	--color-brand-3: var(--color-primary-720);
+
+	/* shading background  */
+	--color-bg-shading-1: var(--color-theme-50);
+	--color-bg-shading-2: var(--color-theme-100);
+	--color-bg-shading-3: var(--color-theme-125);
+	--color-bg-shading-4: var(--color-theme-150);
+	--color-bg-shading-5: var(--color-theme-175);
+	--color-bg-shading-6: var(--color-theme-200);
+
+	/* lightning background  */
+	--color-bg-lightning-1: var(--color-theme-0);
+
+	/* inverted background  */
+	--color-bg-inverted-1: var(--color-theme-950);
+	--color-bg-inverted-2: var(--color-theme-900);
+	--color-bg-inverted-3: var(--color-theme-800);
+	--color-bg-inverted-4: var(--color-theme-750);
+	--color-bg-inverted-5: var(--color-theme-725);
+	--color-bg-inverted-6: var(--color-theme-700);
+	--color-bg-inverted-7: var(--color-theme-675);
+	--color-bg-inverted-8: var(--color-theme-650);
+	--color-bg-inverted-9: var(--color-theme-625);
+	--color-bg-inverted-10: var(--color-theme-600);
+
+	/* primary background  */
+	--color-bg-primary-1: var(--color-primary-500);
+	--color-bg-primary-2: var(--color-primary-600);
+	--color-bg-primary-3: var(--color-primary-720);
+
+	/* positive background  */
+	--color-bg-positive-1: var(--color-positive-500);
+	--color-bg-positive-2: var(--color-positive-700);
+	--color-bg-positive-3: var(--color-positive-760);
+
+	/* warning background  */
+	--color-bg-warning-1: var(--color-warning-500);
+	--color-bg-warning-2: var(--color-warning-600);
+	--color-bg-warning-3: var(--color-warning-720);
+
+	/* negative background  */
+	--color-bg-negative-1: var(--color-negative-500);
+	--color-bg-negative-2: var(--color-negative-650);
+	--color-bg-negative-3: var(--color-negative-720);
+
+	/* info background  */
+	--color-bg-info-1: var(--color-info-500);
+	--color-bg-info-2: var(--color-info-650);
+	--color-bg-info-3: var(--color-info-720);
+
+	/* panel background  */
+	--top-panel-background-color: rgba(255, 255, 255, 0.80);
+
+	/* text colors  */
+	--color-text-1: var(--color-theme-850);
+	--color-text-2: var(--color-theme-600);
+	--color-text-3: var(--color-theme-450);
+	--color-text-4: var(--color-theme-300);
+
+	--color-text-1-inverse: var(--color-theme-0);
+	--color-text-white: var(--color-white);
+
+	/* primary text  */
+	--color-text-primary: var(--color-primary-550);
+	--color-text-primary-alt: var(--color-primary-700);
+
+	/* positive text  */
+	--color-text-positive: var(--color-positive-550);
+	--color-text-positive-alt: var(--color-positive-700);
+
+	/* warning text  */
+	--color-text-warning: var(--color-warning-550);
+	--color-text-warning-alt: var(--color-warning-700);
+
+	/* negative text  */
+	--color-text-negative: var(--color-negative-550);
+	--color-text-negative-alt: var(--color-negative-700);
+
+	/* info text  */
+	--color-text-info: var(--color-info-550);
+	--color-text-info-alt: var(--color-info-700);
+
+	/* line colors  */
+	--color-line-1: var(--color-theme-200);
+	--color-line-2: var(--color-theme-250);
+	--color-line-3: var(--color-theme-375);
+	--color-line-4: var(--color-theme-470);
+
+	--color-line-1-opacity: rgba(14, 65, 142, 0.1);
+	--color-line-2-opacity: rgba(14, 65, 142, 0.19);
+	--color-line-3-opacity: rgba(14, 65, 142, 0.39);
+
+	/* line primary colors  */
+	--color-line-primary-1: var(--color-primary-500);
+	--color-line-primary-2: var(--color-primary-650);
+	--color-line-primary-3: var(--color-primary-720);
+
+	--color-line-primary-1-opacity: rgba(15, 86, 240, 0.14);
+	--color-line-primary-2-opacity: rgba(15, 86, 240, 0.28);
+	--color-line-primary-3-opacity: rgba(15, 86, 240, 0.38);
+
+	/* line positive colors  */
+	--color-line-positive-1: var(--color-positive-550);
+	--color-line-positive-2: var(--color-positive-600);
+	--color-line-positive-3: var(--color-positive-720);
+
+	--color-line-positive-1-opacity: rgba(54, 161, 80, 0.14);
+	--color-line-positive-2-opacity: rgba(54, 161, 80, 0.28);
+	--color-line-positive-3-opacity: rgba(54, 161, 80, 0.38);
+
+	/* line warning colors  */
+	--color-line-warning-1: var(--color-warning-600);
+	--color-line-warning-2: var(--color-warning-700);
+	--color-line-warning-3: var(--color-warning-740);
+
+	--color-line-warning-1-opacity: rgba(251, 150, 50, 0.14);
+	--color-line-warning-2-opacity: rgba(251, 150, 50, 0.28);
+	--color-line-warning-3-opacity: rgba(251, 150, 50, 0.38);
+
+	/* line negative colors  */
+	--color-line-negative-1: var(--color-negative-550);
+	--color-line-negative-2: var(--color-negative-700);
+	--color-line-negative-3: var(--color-negative-740);
+
+	--color-line-negative-1-opacity: rgba(247, 60, 54, 0.14);
+	--color-line-negative-2-opacity: rgba(247, 60, 54, 0.28);
+	--color-line-negative-3-opacity: rgba(247, 60, 54, 0.38);
+
+	/* line info colors  */
+	--color-line-info-1: var(--color-info-500);
+	--color-line-info-2: var(--color-info-550);
+	--color-line-info-3: var(--color-info-600);
+
+	--color-line-info-1-opacity: rgba(122, 47, 242, 0.14);
+	--color-line-info-2-opacity: rgba(122, 47, 242, 0.28);
+	--color-line-info-3-opacity: rgba(122, 47, 242, 0.38);
+
+	/* Scroll */
+	--scroll-track-color: var(--color-theme-225);
+	--scroll-thumb-color: var(--color-theme-300);
+	--scroll-thumb-color-hover: var(--color-theme-450);
+	--scroll-thumb-color-active: var(--color-theme-550);
+
+	/* Page */
+	--body-background-color: var(--color-layout-front-1);
+	--content-background-color: var(--color-layout-front-1);
+
+	--top-forms-option-color: var(--color-primary-500);
+	--top-forms-option-color-hover: var(--color-primary-600);
+}

package/src/resources/styles/themes/light-positions.ts

@@ -0,0 +1 @@
+// import './light/light-positions.css';

package/src/resources/styles/themes/light.ts

@@ -0,0 +1,3 @@
+import './light/light.css';
+import './light/light-layout.css';
+import './light/light-positions.css';

package/src/storybook/components/color.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+	name: string
+	value: string
+	size: 'xs' | 's'
+}>();
+
+const clipboardCopy = (string: string) => navigator.clipboard.writeText(string);
+</script>
+
+<template>
+	<div
+		:class="[
+			$style.color,
+			$style['color-size_' + size]
+		]"
+		:style="{ background: `var(--${name})` }"
+		:title="name + ': ' + value"
+		@click="clipboardCopy(`var(--${name})`);"
+	>
+	</div>
+</template>
+
+<style module>
+.color {
+	--color: transparent;
+
+	cursor: pointer;
+
+	outline: 1px solid var(--color-line-1);
+	background: var(--color);
+	max-width: 3vw;
+	max-height: 3vw;
+
+	display: inline-flex;
+}
+
+.color-size_s {
+	width: 40px;
+	height: 40px;
+}
+
+.color-size_xs {
+	width: 20px;
+	height: 20px;
+}
+</style>

package/src/storybook/components/cssVariables.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { genCSSVariablesGroups, parseCSSVariables } from '@/components/helpersStories';
+import Color from './color.vue';
+import TopInput from '@/components/forms/input/input.vue';
+import type { Options } from '@/components/forms/select/types';
+
+const props = defineProps<{
+	/**
+	 * css стили
+	 */
+	style: string
+}>();
+
+const searchString = ref('');
+const searchGroupName = ref('');
+const searchSubGroupName = ref('');
+const searchModificatorName = ref('');
+
+const cssVariables = computed(() => parseCSSVariables(props.style));
+const cssVariablesGroups = computed(() => {
+	return genCSSVariablesGroups(cssVariables.value, [
+		searchString.value,
+		searchGroupName.value,
+		searchSubGroupName.value,
+		searchModificatorName.value,
+	]);
+});
+
+const cssVariablesGroupsNames = computed(() => {
+	const res: Options = new Map();
+
+	res.set('', 'Все');
+
+	const cssVariablesGroupsColors = genCSSVariablesGroups(cssVariables.value);
+	if (!cssVariablesGroupsColors) return;
+
+	genCSSVariablesGroups(cssVariables.value).forEach((_group, groupName) => {
+		res.set(groupName, groupName);
+	});
+
+	return res;
+});
+
+const cssVariablesSubGroupsNames = computed(() => {
+	const res: Options = new Map();
+
+	res.set('', 'Все');
+
+	const cssVariablesSubGroups = genCSSVariablesGroups(cssVariables.value).get(searchGroupName.value);
+	if (!cssVariablesSubGroups) return;
+
+	cssVariablesSubGroups.forEach((_subGroup, subGroupName) => {
+		if (!subGroupName) return;
+		
+		res.set(subGroupName, subGroupName);
+	});
+
+	return res;
+});
+
+const cssVariablesModificatorsNames = computed(() => {
+	const res: Options = new Map();
+
+	res.set('', 'Все');
+
+	const cssVariablesSubGroups = genCSSVariablesGroups(cssVariables.value, [searchSubGroupName.value]).get(searchGroupName.value);
+	if (!cssVariablesSubGroups) return;
+
+	const modificatorNames: string[] = [];
+
+	cssVariablesSubGroups.forEach((subGroup) => {
+		subGroup.forEach((_value, variableName) => {
+			let modificatorName = variableName.split('-')[2];
+			if (!modificatorName) return;
+
+			if (isNaN(modificatorName as any)) {
+				modificatorNames.unshift(modificatorName);
+			} else {
+				modificatorNames.push(modificatorName);
+			}
+		});
+	});
+
+	modificatorNames.forEach(modificatorName => {
+		res.set('/-' + modificatorName + '(-|$)/', modificatorName);
+	});
+
+	return res;
+});
+
+const getVariableValue = (style: string) => {
+	if (style.indexOf('var(') !== 0) return style;
+
+	const varName = style.replace('var(', '').replace(')', '');
+	return window.getComputedStyle(document.body).getPropertyValue(varName);
+};
+</script>
+
+<template>
+	<TopInput
+		placeholder="Поиск"
+		v-model="searchString"
+	/>
+
+	&nbsp;
+
+	<TopSelect
+		placeholder="Поиск"
+		v-model="searchGroupName"
+		:options="cssVariablesGroupsNames"
+		@change="searchModificatorName = ''"
+	/>
+
+	&nbsp;
+
+	<TopSelect
+		v-if="cssVariablesSubGroupsNames && cssVariablesSubGroupsNames?.size > 2"
+		placeholder="Поиск"
+		v-model="searchSubGroupName"
+		:options="cssVariablesSubGroupsNames"
+		@input="searchModificatorName = ''"
+	/>
+
+	&nbsp;
+
+	<TopSelect
+		v-if="cssVariablesModificatorsNames && cssVariablesModificatorsNames?.size > 2"
+		placeholder="Поиск"
+		v-model="searchModificatorName"
+		:options="cssVariablesModificatorsNames"
+	/>
+
+	<!--	<TopSelect-->
+	<!--		placeholder="Поиск"-->
+	<!--		options="cssVariablesGroups"-->
+	<!--		model-value=""-->
+	<!--		@input="(e: any) => searchString = e.target.value"-->
+	<!--	/>-->
+
+	<div v-for="[groupName, cssVariablesGroup] of cssVariablesGroups">
+		<h3>{{ groupName }}</h3>
+
+		<div v-for="[subgroupName, cssVariablesSubgroup] of cssVariablesGroup">
+			<h4>{{ subgroupName }}</h4>
+
+			<div
+				v-for="[name, value] of cssVariablesSubgroup"
+				:class="$style.row"
+				:title="name + ': ' + value"
+			>
+				<div :class="$style.rowName">
+					{{ name }}
+				</div>
+				<div :class="$style.rowStyle">
+					{{ value }}
+				</div>
+				<div :class="$style.rowValue">
+					{{ getVariableValue(value) }}
+				</div>
+				<div :class="$style.rowColor">
+					<Color
+						v-if="name.indexOf('color') !== -1"
+						:name="name"
+						:value="value"
+						size="xs"
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style module>
+.row {
+	border-bottom: 1px solid var(--color-line-1-opacity); padding: 3px; margin-left: 10px;
+	display: flex; gap: 10px; align-items: center;
+}
+
+.rowName {
+	width: 300px;
+}
+
+.rowStyle {
+	width: 300px;
+	color: var(--color-text-2);
+}
+
+.rowValue {
+	width: 300px;
+	color: var(--color-text-3);
+}
+
+.rowColor {}
+</style>

package/src/storybook/components/icomoon.ts

@@ -0,0 +1,40 @@
+import selectionJSON from '/public/icomoon/selection.json?raw';
+import type { RootObject as Icomoon } from '@/icomoon';
+
+const icomoonConfig: Icomoon = JSON.parse(selectionJSON);
+
+export function genIconByLetter(searchString: string = ''): Record<string, any> {
+	const iconNameByLetter: Record<string, any> = {};
+
+	icomoonConfig.icons.forEach(icon => {
+		// const hex = icon.properties.code.toString(16);
+		const letter = String.fromCharCode(icon.properties.code);
+		const name = icon.properties.name;
+		const tags = icon.icon.tags;
+		// const className = icomoonConfig.preferences.fontPref.prefix + name;
+
+		if (searchString.length) {
+			if (letter !== searchString && name.indexOf(searchString) === -1) return;
+		}
+
+		iconNameByLetter[letter] = {
+			letter,
+			name,
+			tags,
+		};
+	});
+
+	return iconNameByLetter;
+}
+
+export function genNameByLetter(): Record<string, string> {
+	const iconNameByLetter: Record<string, string> = {};
+
+	icomoonConfig.icons.forEach(icon => {
+		const letter = String.fromCharCode(icon.properties.code);
+
+		iconNameByLetter[letter] = icon.properties.name;
+	});
+
+	return iconNameByLetter;
+}

package/src/storybook/jquery.ts

@@ -0,0 +1,4 @@
+/**
+ * см. /.storybook/preview-head.html
+ */
+export default $;