sprof 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# services front
+
+<!-- ## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/). -->

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "sprof",
+  "description": "components for the designer and uikit",
+  "author": "Stanislav Lushnikov, Daniil Gaivoronskiy",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/sprof.umd.js",
+  "module": "./dist/sprof.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist.sprof.esm.js",
+      "require": "./dist.sprof.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build --mode prod",
+    "start": "vite preview --port 8195",
+    "lint": "eslint  src",
+    "test": "vitest --run",
+    "lint:fix": "eslint --ext .vue --ext .ts src --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "axios": "^1.6.8",
+    "chart.js": "^4.4.2",
+    "chartjs-plugin-annotation": "^3.0.1",
+    "js-cookie": "^3.0.5",
+    "maska": "^3.0.1",
+    "math-expression-evaluator": "^2.0.5",
+    "reflect-metadata": "^0.2.2",
+    "sortablejs": "^1.15.2",
+    "storybook-addon-root-attributes": "^2.1.3",
+    "tslib": "^2.6.2",
+    "uuid": "^9.0.1",
+    "vue": "^3.4.21",
+    "vue-advanced-cropper": "^2.5.0",
+    "vue-chartjs": "^5.3.0",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-router": "^4.3.0",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.11.1",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/test": "^8.2.6",
+    "@storybook/vue3": "^8.2.6",
+    "@storybook/vue3-vite": "^8.2.6",
+    "@testing-library/vue": "^8.1.0",
+    "@types/js-cookie": "^3.0.6",
+    "@types/sortablejs": "^1.15.8",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-unused-imports": "^4.1.3",
+    "eslint-plugin-vue": "^9.24.0",
+    "globals": "^15.9.0",
+    "happy-dom": "^14.12.3",
+    "identity-obj-proxy": "^3.0.0",
+    "lint-staged": "^15.2.2",
+    "node-sass": "^9.0.0",
+    "prettier": "^3.3.1",
+    "reflect-metadata": "^0.2.2",
+    "sass": "^1.72.0",
+    "sass-loader": "^14.1.1",
+    "storybook": "^8.2.6",
+    "tslib": "^2.6.2",
+    "typescript": "~5.4.3",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.2.7",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^2.0.4",
+    "vue-loader-v16": "^16.0.0-beta.5.4",
+    "vue-svg-loader": "^0.17.0-beta.2"
+  }
+}

package/src/Hooks/Hooks.ts

@@ -0,0 +1,75 @@
+import { onBeforeMount } from 'vue';
+import { NavigationGuardNext, onBeforeRouteLeave, RouteLocationNormalized } from 'vue-router';
+
+import AdminHeaderParams from '@/services/classes/admin/AdminHeaderParams';
+import FilterQuery from '@/services/classes/filters/FilterQuery';
+import { SortModelBuildersLib } from '@/services/interfaces/Sort';
+import SortList from '@/services/SortList';
+import SortListConst from '@/services/SortList';
+import useConfirmLeavePage from '@/services/useConfirmLeavePage';
+
+export interface IHooksOptions {
+  pagination?: IPaginationOptions;
+  sortsLib?: SortModelBuildersLib;
+  adminHeader?: AdminHeaderParams;
+  getAction?: string;
+  v2?: boolean;
+}
+
+export interface IPaginationOptions {
+  storeModule: string;
+  action: string;
+}
+
+type func = (param?: FilterQuery | string) => Promise<void> | void;
+
+const Hooks = (() => {
+  const onBeforeMountWithLoading = (f: func, options?: IHooksOptions) => {
+    return onBeforeMount(async () => {
+      FTSP.Get().reset();
+      SortList.Set(options?.sortsLib);
+      FTSP.Get().setSortModel(SortList.GetDefault());
+      SortListConst.Set(options?.sortsLib);
+      FTSP.Get().setSortModel(SortListConst.GetDefault());
+
+      PHelp.Paginator.storeModule = options?.pagination?.storeModule;
+
+      await f();
+    });
+  };
+
+  const { saveButtonClick, showConfirmModal } = useConfirmLeavePage();
+
+  const onBeforeRouteLeaveWithSubmit = (submitFunction?: CallableFunction) => {
+    return onBeforeRouteLeave((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+      const func = submitFunction ? submitFunction : submit;
+      showConfirmModal(func(), next);
+    });
+  };
+  const submit = (submitFunction?: CallableFunction) => {
+    return async () => {
+      saveButtonClick.value = true;
+      // if (!validate()) {
+      //   saveButtonClick.value = false;
+      //   return;
+      // }
+      try {
+        if (submitFunction) {
+          await submitFunction();
+        }
+        PHelp.Notification.Success('Сохранено');
+      } catch (error) {
+        PHelp.Notification.Success('Что-то пошло не так');
+        return;
+      }
+    };
+  };
+
+  return {
+    onBeforeMount: onBeforeMountWithLoading,
+    onBeforeRouteLeave: onBeforeRouteLeaveWithSubmit,
+    submit,
+  };
+})();
+
+export default Hooks;

package/src/assets/styles/borders.scss

@@ -0,0 +1,11 @@
+//border-radius
+$border-radius: 5px;
+$small-border-radius: 3px;
+$big-border-radius: 10px;
+
+//border
+$normal-border: 1px solid #e9e9e9;
+$normal-darker-border: 1px solid #c3c3c3;
+$dark-border: 1px solid #999999;
+$light-pink-border: 1px solid #b0a4c0;
+$custom-border: 1px solid #343d5c;

package/src/assets/styles/brandbook.css

@@ -0,0 +1,227 @@
+:root[data-brandbook='ankets'] {
+  --palette-white: #ffffff;
+  --palette-black: #000000;
+
+  --palette-grey-1: #f0f0f0;
+  --palette-grey-2: #e6e6e6;
+  --palette-grey-3: #dcdcdc;
+  --palette-grey-4: #d2d2d2;
+  --palette-grey-5: #bebebe;
+  --palette-grey-6: #8c8c8c;
+  --palette-grey-7: #5a5a5a;
+  --palette-grey-8: #434343;
+  --palette-grey-9: #262626;
+  --palette-grey-10: #1e1e1e;
+
+  /* palette https://colorscheme.ru/, contrast, цвет "5" - это "Вариант 4" при максимуме контраста*/
+  --palette-primary-base: #66c1e4;
+  --palette-primary-base-1: #6497ab;
+  --palette-primary-base-2: #217494;
+  --palette-primary-base-3: #8dd6f2;
+  --palette-primary-base-4: #a8ddf2;
+  --palette-primary-base-5: #e6f8ff;
+
+  --palette-primary-additional: #ffb96c;
+  --palette-primary-additional-1: #bf986d;
+  --palette-primary-additional-2: #a66723;
+  --palette-primary-additional-3: #ffca91;
+  --palette-primary-additional-4: #ffd8ae;
+  --palette-primary-additional-5: #fff3e6;
+
+  /* --palette-secondary-base: #476eb5;
+  --palette-secondary-base-1: #4a6088;
+  --palette-secondary-base-2: #173876;
+  --palette-secondary-base-3: #779ada;
+  --palette-secondary-base-4: #91abda;
+  --palette-secondary-base-5: #e6efff; */
+
+  --palette-secondary-base: #5e6ce7;
+  --palette-secondary-base-1: #4a6088;
+  --palette-secondary-base-2: #3e48a3;
+  --palette-secondary-base-3: #3e48a3;
+  --palette-secondary-base-4: #91abda;
+  --palette-secondary-base-5: #e6efff;
+
+  --palette-secondary-additional: #ffc353;
+  --palette-secondary-additional-1: #bf9d5f;
+  --palette-secondary-additional-2: #a6751b;
+  --palette-secondary-additional-3: #ffd27e;
+  --palette-secondary-additional-4: #ffdea1;
+  --palette-secondary-additional-5: #fff6e6;
+
+  /* palette-semantic https://colorscheme.ru/, mono */
+  --palette-success: #00b5a4;
+  --palette-success-1: #22887d;
+  --palette-success-2: #007669;
+  --palette-success-3: #37dac9;
+  --palette-success-4: #62dacd;
+  --palette-success-5: #e6fffc;
+
+  --palette-warning: #f59433;
+  --palette-warning-1: #b8814b;
+  --palette-warning-2: #9f5711;
+  --palette-warning-3: #faaf66;
+  --palette-warning-4: #fac38d;
+  --palette-warning-5: #fff2e6;
+
+  --palette-error: #e46862;
+  --palette-error-1: #ab6662;
+  --palette-error-2: #942620;
+  --palette-error-3: #f28f8a;
+  --palette-error-4: #f2aaa6;
+  --palette-error-5: #ffe7e6;
+
+  --palette-primary-10: #edf6f9;
+  --palette-primary-20: #d5eff9;
+  --palette-primary-30: #afe0f4;
+  --palette-primary-40: #99d4eb;
+  --palette-primary-50: #66c0e4;
+  --palette-primary-60B: #39b3e4;
+  --palette-primary-70: #0da3e0;
+  --palette-primary-80: #0189c0;
+  --palette-primary-90: #00638b;
+  --palette-primary-100: #004865;
+  --palette-secondary-10: rgba(245, 230, 255, 1);
+  --palette-secondary-20: rgba(215, 163, 255, 1);
+  --palette-secondary-30: rgba(193, 122, 255, 1);
+  --palette-secondary-40: rgba(167, 81, 252, 1);
+  --palette-secondary-50: rgba(132, 38, 240, 1);
+  --palette-secondary-60B: rgba(100, 0, 227, 1);
+  --palette-secondary-70: rgba(75, 0, 189, 1);
+  --palette-secondary-80: rgba(55, 0, 150, 1);
+  --palette-secondary-90: rgba(37, 0, 112, 1);
+  --palette-secondary-100: rgba(22, 0, 74, 1);
+  --palette-tertiary-10: rgba(230, 252, 255, 1);
+  --palette-tertiary-20: rgba(179, 242, 255, 1);
+  --palette-tertiary-30: rgba(138, 232, 255, 1);
+  --palette-tertiary-40: rgba(97, 218, 255, 1);
+  --palette-tertiary-50: rgba(56, 202, 255, 1);
+  --palette-tertiary-60B: rgba(15, 177, 247, 1);
+  --palette-tertiary-70: rgba(2, 140, 209, 1);
+  --palette-tertiary-80: rgba(0, 108, 171, 1);
+  --palette-tertiary-90: rgba(0, 80, 133, 1);
+  --palette-tertiary-100: rgba(0, 53, 94, 1);
+  --palette-neutral-10-white: rgba(255, 255, 255, 1);
+  --palette-neutral-20: rgba(250, 250, 250, 1);
+  --palette-neutral-30: rgba(245, 245, 245, 1);
+  --palette-neutral-40: rgba(240, 240, 240, 1);
+  --palette-neutral-50: rgba(217, 217, 217, 1);
+  --palette-neutral-60B: rgba(191, 191, 191, 1);
+  --palette-neutral-70: rgba(140, 140, 140, 1);
+  --palette-neutral-80: rgba(89, 89, 89, 1);
+  --palette-neutral-90: rgba(67, 67, 67, 1);
+  --palette-neutral-100: rgba(38, 38, 38, 1);
+  --palette-neutral-110: rgba(31, 31, 31, 1);
+  --palette-neutral-120: rgba(20, 20, 20, 1);
+  --palette-neutral-130-black: rgba(0, 0, 0, 1);
+  --palette-active-10: rgba(255, 230, 239, 1);
+  --palette-active-20: rgba(255, 163, 200, 1);
+  --palette-active-30: rgba(255, 122, 180, 1);
+  --palette-active-40: rgba(255, 82, 163, 1);
+  --palette-active-50: rgba(255, 41, 148, 1);
+  --palette-active-60B: rgba(255, 0, 137, 1);
+  --palette-active-70: rgba(217, 0, 123, 1);
+  --palette-active-80: rgba(179, 0, 107, 1);
+  --palette-active-90: rgba(140, 0, 89, 1);
+  --palette-active-100: rgba(102, 0, 68, 1);
+  /* palette-semantic */
+  --palette-semantic-success-10: rgba(247, 255, 230, 1);
+  --palette-semantic-success-20: rgba(210, 242, 155, 1);
+  --palette-semantic-success-30: rgba(182, 230, 110, 1);
+  --palette-semantic-success-40: rgba(153, 217, 69, 1);
+  --palette-semantic-success-50: rgba(124, 204, 33, 1);
+  --palette-semantic-success-60B: rgba(96, 192, 0, 1);
+  --palette-semantic-success-70: rgba(71, 153, 0, 1);
+  --palette-semantic-success-80: rgba(50, 115, 0, 1);
+  --palette-semantic-success-90: rgba(31, 77, 0, 1);
+  --palette-semantic-success-100: rgba(14, 38, 0, 1);
+  --palette-semantic-information-10: rgba(232, 253, 255, 1);
+  --palette-semantic-information-20: rgba(191, 249, 255, 1);
+  --palette-semantic-information-30: rgba(150, 241, 255, 1);
+  --palette-semantic-information-40: rgba(110, 231, 255, 1);
+  --palette-semantic-information-50: rgba(69, 218, 255, 1);
+  --palette-semantic-information-60B: rgba(27, 200, 255, 1);
+  --palette-semantic-information-70: rgba(13, 162, 217, 1);
+  --palette-semantic-information-80: rgba(2, 125, 179, 1);
+  --palette-semantic-information-90: rgba(0, 94, 140, 1);
+  --palette-semantic-information-100: rgba(0, 65, 102, 1);
+  --palette-semantic-warning-10: rgba(255, 252, 230, 1);
+  --palette-semantic-warning-20: rgba(255, 241, 163, 1);
+  --palette-semantic-warning-30: rgba(255, 231, 122, 1);
+  --palette-semantic-warning-40: rgba(255, 217, 82, 1);
+  --palette-semantic-warning-50: rgba(255, 201, 41, 1);
+  --palette-semantic-warning-60B: rgba(255, 183, 0, 1);
+  --palette-semantic-warning-70: rgba(217, 148, 0, 1);
+  --palette-semantic-warning-80: rgba(179, 116, 0, 1);
+  --palette-semantic-warning-90: rgba(140, 86, 0, 1);
+  --palette-semantic-warning-100: rgba(102, 60, 0, 1);
+  --palette-semantic-error-10: rgba(255, 242, 240, 1);
+  --palette-semantic-error-20: rgba(255, 209, 201, 1);
+  --palette-semantic-error-30: rgba(255, 170, 161, 1);
+  --palette-semantic-error-40: rgba(245, 124, 115, 1);
+  --palette-semantic-error-50: rgba(232, 77, 72, 1);
+  --palette-semantic-error-60B: rgba(220, 32, 32, 1);
+  --palette-semantic-error-70: rgba(181, 18, 24, 1);
+  --palette-semantic-error-80: rgba(143, 7, 16, 1);
+  --palette-semantic-error-90: rgba(105, 0, 10, 1);
+  --palette-semantic-error-100: rgba(66, 0, 9, 1);
+  /* whiteSpace */
+  --whiteSpace-general-_25x: 0.25rem;
+  --whiteSpace-general-_5x: 0.25rem;
+  --whiteSpace-general-1x: 0.5rem;
+  --whiteSpace-general-1_5x: 0.75rem;
+  --whiteSpace-general-2x: 1rem;
+  --whiteSpace-general-3x: 1.5rem;
+  --whiteSpace-general-4x: 2rem;
+  --whiteSpace-general-6x: 3rem;
+  --whiteSpace-general-8x: 4rem;
+  --whiteSpace-general-9x: 4.5rem;
+  --whiteSpace-general-12x: 6rem;
+  --whiteSpace-general-14x: 7rem;
+  --whiteSpace-general-16x: 8rem;
+  /* borderRadius */
+  --borderRadius-general-_25x: 0.08rem;
+  --borderRadius-general-_5x: 0.16rem;
+  --borderRadius-general-1x: 0.31rem;
+  --borderRadius-general-1_5x: 0.47rem;
+  --borderRadius-general-2x: 0.63rem;
+  --borderRadius-general-3x: 0.94rem;
+  --borderRadius-general-4x: 1.25rem;
+  --borderRadius-general-6x: 1.88rem;
+  --borderRadius-general-8x: 2.5rem;
+  --borderRadius-general-9x: 2.81rem;
+  --borderRadius-general-12x: 3.75rem;
+  --borderRadius-general-14x: 4.38rem;
+  --borderRadius-general-16x: 5rem;
+  /* size-general */
+  --size-general-_25x: 0.08rem;
+  --size-general-_5x: 0.16rem;
+  --size-general-1x: 0.31rem;
+  --size-general-1_5x: 0.47rem;
+  --size-general-2x: 0.63rem;
+  --size-general-3x: 0.94rem;
+  --size-general-4x: 1.25rem;
+  --size-general-6x: 1.88rem;
+  --size-general-8x: 2.5rem;
+  --size-general-9x: 2.81rem;
+  --size-general-12x: 3.75rem;
+  --size-general-14x: 4.38rem;
+  --size-general-16x: 5rem;
+  /* typography-font-size */
+  --typography-font-size-xs: 0.625rem;
+  --typography-font-size-s: 0.75rem;
+  --typography-font-size-m: 0.875rem;
+  --typography-font-size-l: 1rem;
+  --typography-font-size-xl: 1.125rem;
+  --typography-font-size-2xl: 1.25rem;
+  --typography-font-size-3xl: 1.375rem;
+  --typography-font-size-4xl: 1.5rem;
+
+  --base-font: 'Gilroy', Roboto, Helvetica, sans-serif;
+  --font-size-default: var(--typography-font-size-s);
+
+  --input-padding: 10px 20px;
+
+  --transition-default: 0.3s;
+  --border-radius-default: 5px;
+}

package/src/assets/styles/colors.scss

@@ -0,0 +1,42 @@
+$main_green: #0bae57;
+$main_red: #ef3b2d;
+$main_blue: #0671ba;
+$main_orange: #f6922e;
+$main_gray: #646666;
+$main_white: #ffffff;
+$main_light_blue: #dff2f8;
+$site_light_pink: #b0a4c0;
+$site_blue: #2754eb;
+$site_dark_gray: #343d5c;
+$site_gray: #a1a7bd;
+$site_light_gray: #f1f2f7;
+$site_orange: #f4911c;
+$site_green: #09a248;
+$site_pale_pink: #f6bfbb;
+$site_pale_green: #b5e3c7;
+$site_pale_yellow: #fbdfba;
+
+$active_color_menu: #01528a;
+
+$button_primary_color: #409efe !default;
+$button_dark_primary_color: #2368ae;
+$button_primary_background: #ddf2f9 !default;
+
+$button_success_color: #00b5a4;
+$button_dark_success_color: #008276;
+$button_success_background: #c7ecea;
+
+$button_warning_color: #f59433;
+$button_dark_warning_color: #9a5006;
+$button_warning_background: #f9eedd;
+
+$button_danger_color: #e46862;
+$button_dark_danger_color: #b83616;
+$button_danger_background: #f9e0dd;
+
+$button_disabled_color: #d5d8df;
+$button_disabled_background: #f9f9f9;
+
+$button_neutral_color: #a3a9be;
+$button_dark_neutral_color: #797e8f;
+$button_neutral_background: #efefef;

package/src/assets/styles/fonts.scss

@@ -0,0 +1,15 @@
+$font-base: 'Open Sans', sans-serif, Arial, Helvetica;
+
+$base-light-font-color: #a3a9be;
+
+$title-font: $font-base;
+$title-font-weight: regular;
+$title-font-bold-weight: bold;
+
+$base-font: $font-base;
+$base-font-weight: regular;
+$base-font-bold-weight: bold;
+
+$base-font-size: 14px;
+$base-font-small-size: 12px;
+$base-font-large-size: 16px;

package/src/assets/styles/index.css

@@ -0,0 +1,15 @@
+@import './brandbook.css';
+@import './theme/light.css';
+@import './theme/dark.css';
+@import './theme/aquaBlueLight.css';
+@import './theme/blueLight.css';
+
+@import './platform/ios.css';
+@import './platform/android.css';
+@import './platform/webmobile.css';
+@import './platform/webtablet.css';
+@import './platform/webdesktop.css';
+
+/* @import './components/p-button/p-button.css';
+@import './components/p-input/p-input.css';
+@import './components/p-checkbox/p-checkbox'; */

package/src/assets/styles/index.scss

@@ -0,0 +1,45 @@
+@import './colors.scss';
+@import './fonts.scss';
+@import './borders.scss';
+@import './shadow.scss';
+@import './reset.scss';
+
+$transition: 0.2s;
+
+$base-font-color: $site_dark_gray;
+$icon-width: 20px;
+$icon-height: 20px;
+$icon-color: #343d5c;
+$icon-hover-color: #343d5c;
+$icon-transition: $transition;
+
+//admin buttons style, themes
+$p-button-width: 100%;
+$p-button-min-width: 150px;
+$p-button-max-width: 100%;
+$p-button-height: 40px;
+$p-button-margin: auto;
+$p-button-padding: 0 10px;
+$p-button-border-radius: $border-radius;
+$p-button-border: 1px solid #dcdfe6;
+$p-button-transition: $transition;
+
+//
+$input-height: 30px;
+$input-background: #ffffff;
+$input-border: none;
+$input-font-color: $base-font-color;
+$input-font-size: $base-font-size;
+$input-font: $base-font;
+$input-margin: 0;
+$input-padding: 6px 0 7px 0;
+$input-width: 100%;
+$input-label-color: $base-light-font-color;
+$input-label-margin: 0 0 15px 5px;
+$input-readonly-background: #f5f5f5;
+
+//PInput
+$p-input-margin: 0;
+$p-input-padding: 0 20px;
+$p-input-border-radius: 30px;
+$p-input-border: 1px solid #dcdfe6;

package/src/assets/styles/platform/android.css

@@ -0,0 +1,53 @@
+:root[data-platform='android'] {
+  --layout-screen-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-font-size-default: var(--font-size-l);
+  --button-font-size-medium: var(--font-size-m);
+  --button-font-size-small: var(--font-size-s);
+  --button-font-size-xl: var(--font-size-xl);
+  --button-primary-medium-whiteSpace-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-primary-medium-whiteSpace-padding-vertical: var(--whiteSpace-general-1_5x);
+  --button-primary-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --button-primary-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-secondary-medium-whiteSpace-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-secondary-medium-whiteSpace-padding-vertical: var(--whiteSpace-general-1_5x);
+  --button-secondary-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --button-secondary-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-tertiary-borderRadius-default: var(--borderRadius-general-2x);
+  --button-tertiary-medium-whiteSpace-gap: var(--whiteSpace-general-_5x);
+  --button-round-size-default: var(--size-general-4x);
+  --button-round-size-small: var(--size-general-3x);
+  --button-round-size-large: var(--size-general-6x);
+  --button-outlined-medium-whiteSpace-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-outlined-medium-whiteSpace-padding-vertical: var(--whiteSpace-general-1_5x);
+  --button-outlined-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --button-outlined-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-transparent-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-transparent-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-field-padding-horizontal: var(--whiteSpace-general-2x);
+  --input-field-whiteSpace-field-padding-vertical: var(--whiteSpace-general-1_5x);
+  --input-field-whiteSpace-field-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-label-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-caption-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-assistive-gap: var(--whiteSpace-general-1x);
+  --input-field-borderRadius-default: var(--borderRadius-general-4x);
+  /* badge */
+  --badge-font-size: var(--font-size-l);
+  --badge-whiteSpace-gap: var(--whiteSpace-general-_5x);
+  --badge-primary-padding: var(--size-general-_75x);
+  --badge-primary-border-radius: var(--borderRadius-general-2x);
+  /* flex */
+  --flex-gap-default: var(--whiteSpace-general-1x);
+  --flex-gap-xs: var(--whiteSpace-general-_5x);
+  --flex-gap-s: var(--whiteSpace-general-1x);
+  --flex-gap-m: var(--whiteSpace-general-1_5x);
+  --flex-gap-l: var(--whiteSpace-general-2x);
+  --flex-gap-xl: var(--whiteSpace-general-2_5x);
+  --flex-gap-2xl: var(--whiteSpace-general-3x);
+  --flex-gap-3xl: var(--whiteSpace-general-3_5x);
+  --flex-gap-4xl: var(--whiteSpace-general-4x);
+
+  /* gallery */
+  --gallery-container-border-radius: var(--borderRadius-general-5x);
+  --gallery-slider-button-margin: var(--size-general-1_5x);
+  --gallery-tool-margin: var(--size-general-1_5x);
+}

package/src/assets/styles/platform/ios.css

@@ -0,0 +1,53 @@
+:root[data-platform='i-os'] {
+  --layout-screen-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-font-size-default: var(--font-size-l);
+  --button-font-size-medium: var(--font-size-m);
+  --button-font-size-small: var(--font-size-s);
+  --button-font-size-xl: var(--font-size-xl);
+  --button-primary-medium-whiteSpace-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-primary-medium-whiteSpace-padding-vertical: var(--whiteSpace-general-1_5x);
+  --button-primary-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --button-primary-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-secondary-medium-whiteSpace-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-secondary-medium-whiteSpace-padding-vertical: var(--whiteSpace-general-1_5x);
+  --button-secondary-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --button-secondary-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-tertiary-borderRadius-default: var(--borderRadius-general-2x);
+  --button-tertiary-medium-whiteSpace-gap: var(--whiteSpace-general-_5x);
+  --button-round-size-default: var(--size-general-4x);
+  --button-round-size-small: var(--size-general-3x);
+  --button-round-size-large: var(--size-general-6x);
+  --button-outlined-medium-whiteSpace-padding-horizontal: var(--whiteSpace-general-2x);
+  --button-outlined-medium-whiteSpace-padding-vertical: var(--whiteSpace-general-1_5x);
+  --button-outlined-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --button-outlined-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-transparent-medium-borderRadius-default: var(--borderRadius-general-4x);
+  --button-transparent-medium-whiteSpace-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-field-padding-horizontal: var(--whiteSpace-general-2x);
+  --input-field-whiteSpace-field-padding-vertical: var(--whiteSpace-general-1_5x);
+  --input-field-whiteSpace-field-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-label-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-caption-gap: var(--whiteSpace-general-1x);
+  --input-field-whiteSpace-assistive-gap: var(--whiteSpace-general-1x);
+  --input-field-borderRadius-default: var(--borderRadius-general-4x);
+  /* badge */
+  --badge-font-size: var(--font-size-l);
+  --badge-whiteSpace-gap: var(--whiteSpace-general-_5x);
+  --badge-primary-padding: var(--size-general-_75x);
+  --badge-primary-border-radius: var(--borderRadius-general-2x);
+  /* flex */
+  --flex-gap-default: var(--whiteSpace-general-1x);
+  --flex-gap-xs: var(--whiteSpace-general-_5x);
+  --flex-gap-s: var(--whiteSpace-general-1x);
+  --flex-gap-m: var(--whiteSpace-general-1_5x);
+  --flex-gap-l: var(--whiteSpace-general-2x);
+  --flex-gap-xl: var(--whiteSpace-general-2_5x);
+  --flex-gap-2xl: var(--whiteSpace-general-3x);
+  --flex-gap-3xl: var(--whiteSpace-general-3_5x);
+  --flex-gap-4xl: var(--whiteSpace-general-4x);
+
+  /* gallery */
+  --gallery-container-border-radius: var(--borderRadius-general-5x);
+  --gallery-slider-button-margin: var(--size-general-1_5x);
+  --gallery-tool-margin: var(--size-general-1_5x);
+}