triafly-ui-kit 1.0.24 → 1.0.25

package/dist/styles/variables.scss

@@ -0,0 +1,278 @@
+:root {
+    /* Font */
+    --3afly-fonts-body: 'Manrope', sans-serif;
+    --3afly-fonts-heading: 'Roboto Slab', sans-serif;
+
+    //temp
+    --light-brand-50: #C2D0FF;
+    --dark-brand-50: #C2D0FF;
+
+    /* Primitives */
+    /* Primitives - Base */
+    --base-dark: #121212;
+    --base-light: #FFFFFF;
+
+    /* Primitives - Neutral */
+    --dark-neutral-0: #121212;
+    --dark-neutral-20: #292929;
+    --dark-neutral-50: #333333;
+    --dark-neutral-100: #4D4D4D;
+    --dark-neutral-200: #6E6E6E;
+    --dark-neutral-300: #FFFFFF;
+
+    --light-neutral-0: #FFFFFF;
+    --light-neutral-20: #F6F7F8;
+    --light-neutral-50: #F1F2F4;
+    --light-neutral-100: #D2D5DA;
+    --light-neutral-200: #A5A8AC;
+    --light-neutral-300: #121212;
+
+    /* Primitives - Status */
+    --dark-green-50: #044329;
+    --dark-green-100: #12A26C;
+    --dark-green-200: #CEF8E0;
+    --dark-orange-50: #662500;
+    --dark-orange-100: #E16D00;
+    --dark-orange-200: #FFECCC;
+    --dark-red-50: #7B0000;
+    --dark-red-100: #F65843;
+    --dark-red-200: #FFEBE7;
+
+    --light-green-50: #CEF8E0;
+    --light-green-100: #15A46E;
+    --light-green-200: #06603B;
+    --light-orange-50: #FFECCC;
+    --light-orange-100: #E46F00;
+    --light-orange-200: #9E3900;
+    --light-red-50: #FFEBE7;
+    --light-red-100: #F75C46;
+    --light-red-200: #9E0000;
+
+    /* Shadows & Effects */
+    --color-fader: #12121220;
+
+    /* Light Theme */
+
+    --default-font-color: var(--base-dark);
+
+    /* Light Theme - Background */
+    --color-bg-brand-default: var(--light-brand-100);
+    --color-bg-brand-hover: var(--light-brand-200);
+    --color-bg-brand-selected: var(--light-brand-300);
+    --color-bg-brand-lightest-default: var(--light-brand-20);
+    --color-bg-brand-light-default: var(--light-brand-50);
+    --color-bg-error-default: var(--light-red-100);
+    --color-bg-error-hover: var(--light-red-200);
+    --color-bg-innerisland-default: var(--light-neutral-20);
+    --color-bg-island-default: var(--base-light);
+    --color-bg-island-disabled: var(--light-neutral-50);
+    --color-bg-island-inversed: var(--base-dark);
+    --color-bg-island-selected: var(--light-neutral-50);
+    --color-bg-page-primary-default: var(--light-neutral-50);
+    --color-bg-page-secondary-default: var(--light-neutral-0);
+    --color-bg-neutral-basic-default: var(--light-neutral-0);
+    --color-bg-neutral-basic-inversed: var(--light-neutral-300);
+    --color-bg-neutral-lightest-default: var(--light-neutral-20);
+    --color-bg-neutral-medium-default: var(--light-neutral-100);
+
+    /* Light Theme - Border */
+    --color-border-brand-default: var(--light-brand-100);
+    --color-border-error-default: var(--light-red-100);
+    --color-border-primary-default: var(--light-neutral-100);
+    --color-border-primary-hover: var(--base-dark);
+    --color-border-secondary-default: var(--light-neutral-200);
+    --color-border-secondary-hover: var(--base-dark);
+    --color-border-success-default: var(--light-green-100);
+
+    /* Light Theme - Chart */
+    --color-chart-critical: var(--light-red-100);
+    --color-chart-low: var(--light-green-100);
+    --color-chart-medium: var(--light-orange-100);
+
+    /* Light Theme - Effects */
+    --effect-shadow-drop: #12121214;
+    --effect-shadow-L: #12121208;
+    --effect-shadow-XL: #12121215;
+
+    /* Light Theme - Icon */
+    --color-icon-brand-default: var(--light-brand-100);
+    --color-icon-brand-hover: var(--light-brand-200);
+    --color-icon-error-default: var(--light-red-100);
+    --color-icon-error-hover: var(--light-red-200);
+    --color-icon-primary-default: var(--base-dark);
+    --color-icon-primary-inversed: var(--base-light);
+    --color-icon-secondary-default: var(--light-neutral-200);
+    --color-icon-secondary-hover: var(--base-dark);
+    --color-icon-success-default: var(--light-green-100);
+
+    /* Light Theme - SideMenu */
+    --color-sidemenu-bg-default: var(--base-light);
+    --color-sidemenu-bg-hover: var(--light-neutral-50);
+    --color-sidemenu-bg-selected: var(--light-brand-100);
+    --color-sidemenu-icon-default: var(--base-dark);
+    --color-sidemenu-icon-selected: var(--light-color-static);
+    --color-sidemenu-plus_button_bg-selected-hover: var(--light-brand-200);
+    --color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);
+    --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);
+    --color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);
+    --color-sidemenu-text-default: var(--base-dark);
+    --color-sidemenu-text-selected: var(--light-color-static);
+
+    /* Light Theme - Static */
+    --dark-color-static: var(--base-dark);
+    --dark-color-static-brand: var(--dark-brand-100);
+    --light-color-static: var(--base-light);
+    --light-color-static-brand: var(--light-brand-100);
+
+    /* Light Theme - Status */
+    --color-status-error-background: var(--light-red-50);
+    --color-status-error-foreground: var(--light-red-100);
+    --color-status-success-background: var(--light-green-50);
+    --color-status-success-foreground: var(--light-green-100);
+    --color-status-warning-background: var(--light-orange-50);
+    --color-status-warning-foreground: var(--light-orange-100);
+
+    /* Light Theme - Text */
+    --color-text-brand-default: var(--light-brand-100);
+    --color-text-brand-hover: var(--light-brand-200);
+    --color-text-error-default: var(--light-red-100);
+    --color-text-primary-default: var(--base-dark);
+    --color-text-primary-inversed: var(--light-neutral-0);
+    --color-text-secondary-default: var(--light-neutral-200);
+    --color-text-success-default: var(--light-green-100);
+    --color-text-tertiary-default: var(--light-neutral-100);
+
+    /* Light Theme - Buttons */
+    --color-button-brandlight-filled-hover: var(--light-brand-50);
+}
+
+/* Primitives - Brand */
+html[data-client=""],
+html[data-client="default"] {
+    --dark-brand-20: #153398;
+    --dark-brand-50: #1E46CD;
+    --dark-brand-100: #5076FF;
+    --dark-brand-200: #7C98FF;
+    --dark-brand-300: #A7BBFF;
+
+    --light-brand-20: #EEF2FF;
+    --light-brand-50: #C2D0FF;
+    --light-brand-100: #2454FF;
+    --light-brand-200: #1A3AB2;
+    --light-brand-300: #0E2266;
+}
+
+
+/* Primitives - Test Client */
+html[data-client="test"] {
+    --light-brand-20: #F3E8FF;
+    --light-brand-50: #D8B4FE;
+    --light-brand-100: #A855F7;
+    --light-brand-200: #7E22CE;
+    --light-brand-300: #4C1D95;
+    
+    --dark-brand-20: #5B21B6;
+    --dark-brand-50: #7C3AED;
+    --dark-brand-100: #A78BFA;
+    --dark-brand-200: #C4B5FD;
+    --dark-brand-300: #DDD6FE;
+}
+
+html[data-theme="dark"] {
+    /* Dark Theme */
+
+    --default-font-color: var(--base-light);
+    
+    /* Dark Theme - Background */
+    --color-bg-brand-default: var(--dark-brand-100);
+    --color-bg-brand-hover: var(--dark-brand-200);
+    --color-bg-brand-selected: var(--dark-brand-300);
+    --color-bg-brand-light-default: var(--dark-brand-50);
+    --color-bg-error-default: var(--dark-red-100);
+    --color-bg-error-hover: var(--dark-red-50);
+    --color-bg-innerisland-default: var(--dark-neutral-20);
+    --color-bg-island-default: var(--base-dark);
+    --color-bg-island-disabled: var(--dark-neutral-50);
+    --color-bg-island-inversed: var(--base-light);
+    --color-bg-island-selected: var(--dark-neutral-50);
+    --color-bg-page-default: var(--dark-neutral-50);
+    --color-bg-page-secondary-default: var(--dark-neutral-0);
+    --color-bg-page-secondary-default: var(--dark-neutral-0);
+    --color-bg-neutral-basic-default: var(--dark-neutral-20);
+    --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
+    --color-bg-neutral-lightest-default: var(--dark-neutral-20);
+    --color-bg-neutral-medium-default: var(--dark-neutral-100);
+
+    /* Dark Theme - Border */
+    --color-border-brand-default: var(--dark-brand-100);
+    --color-border-error-default: var(--dark-red-100);
+    --color-border-primary-default: var(--dark-neutral-100);
+    --color-border-primary-hover: var(--base-light);
+    --color-border-secondary-default: var(--dark-neutral-200);
+    --color-border-secondary-hover: var(--base-light);
+    --color-border-success-default: var(--dark-green-100);
+
+    /* Dark Theme - Chart */
+    --color-chart-critical: var(--dark-red-100);
+    --color-chart-low: var(--dark-green-100);
+    --color-chart-medium: var(--dark-orange-100);
+
+    /* Dark Theme - Effects */
+    --effect-shadow-drop: #12121299;
+
+    /* Dark Theme - Icon */
+    --color-icon-brand-default: var(--dark-brand-100);
+    --color-icon-brand-hover: var(--dark-brand-200); 
+    --color-icon-error-default: var(--dark-red-100);
+    --color-icon-error-hover: var(--dark-red-200);
+    --color-icon-primary-default: var(--base-light);
+    --color-icon-primary-inversed: var(--base-dark); 
+    --color-icon-secondary-default: var(--dark-neutral-200); 
+    --color-icon-secondary-hover: var(--base-light);
+    --color-icon-success-default: var(--dark-green-100);
+
+    /* Dark Theme - SideMenu */
+    --color-sidemenu-bg-default: var(--base-dark);
+    --color-sidemenu-bg-hover: var(--dark-neutral-50);
+    --color-sidemenu-bg-selected: var(--dark-brand-100);
+    --color-sidemenu-icon-default: var(--base-light);
+    --color-sidemenu-icon-selected: var(--light-color-static);
+    --color-sidemenu-plus_button_bg-selected-hover: var(--dark-brand-200);
+    --color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);
+    --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
+    --color-sidemenu-plus_button_icon-unselected-default: var(--base-light);
+    --color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);
+    --color-sidemenu-text-default: var(--base-light);
+    --color-sidemenu-text-selected: var(--light-color-static);
+
+    /* Dark Theme - Static */
+    --dark-color-static: var(--base-dark);
+    --dark-color-static-brand: var(--dark-brand-100);
+    --light-color-static: var(--base-light);
+    --light-color-static-brand: var(--light-brand-100);
+
+    /* Dark Theme - Status */
+    --color-status-error-background: var(--dark-red-50);
+    --color-status-error-foreground: var(--dark-red-100);
+    --color-status-success-background: var(--dark-green-50);
+    --color-status-success-foreground: var(--dark-green-100);
+    --color-status-warning-background: var(--dark-orange-50);
+    --color-status-warning-foreground: var(--dark-orange-100);
+
+    /* Dark Theme - Text */
+    --color-text-brand-default: var(--dark-brand-100);
+    --color-text-brand-hover: var(--dark-brand-200);
+    --color-text-error-default: var(--dark-red-100);
+    --color-text-primary-default: var(--base-light);
+    --color-text-primary-inversed: var(--dark-neutral-0);
+    --color-text-secondary-default: var(--dark-neutral-200);
+    --color-text-success-default: var(--dark-green-100);
+    --color-text-tertiary-default: var(--dark-neutral-100);
+
+    /* Dark Theme - Buttons */
+    --color-button-brandlight-filled-hover: var(--dark-brand-50);
+}
+

package/package.json

@@ -1,106 +1,110 @@
-{
-  "name": "triafly-ui-kit",
-  "version": "1.0.24",
-  "description": "UI Kit from Triafly",
-  "main": "./dist/main.js",
-  "module": "./dist/main.js",
-  "types": "./dist/main.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/main.js",
-      "types": "./dist/main.d.ts"
-    },
-    "./dist/*": {
-      "types": "./dist/*.d.ts"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "npm run build:types && vite build",
-    "build:types": "tsc --build tsconfig.build.json",
-    "dev": "vite",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
-    "preview": "vite preview",
-    "prepare": "husky install",
-    "precommit": "npm run lint-staged",
-    "lint-staged": "lint-staged",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepublish": "npm run build",
-    "release-patch": "npm run build && npm version patch && git push && npm publish"
-  },
-  "browserslist": [
-    "cover 99.5%"
-  ],
-  "peerDependencies": {
-    "classnames": "^2.5.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-router-dom": "6.26.1"
-  },
-  "dependencies": {
-    "fast-deep-equal": "^3.1.3",
-    "papaparse": "^5.4.1",
-    "react-paginate": "^8.2.0"
-  },
-  "devDependencies": {
-    "storybook": "^8.6.14",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "@chromatic-com/storybook": "^3.2.3",
-    "@eslint/js": "^9.25.0",
-    "@storybook/addon-backgrounds": "^8.5.2",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
-    "@types/eslint-plugin-prettier": "^3.1.3",
-    "@types/node": "^22.15.21",
-    "@types/papaparse": "^5.3.16",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react-swc": "^3.9.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^4.4.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "glob": "^11.0.2",
-    "globals": "^16.0.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "6.26.1",
-    "sass": "^1.89.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.0.0",
-    "vite-plugin-svgr": "^4.3.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --write --ignore-unknown"
-    ]
-  }
-}
+{
+  "name": "triafly-ui-kit",
+  "version": "1.0.25",
+  "description": "UI Kit from Triafly",
+  "main": "./dist/main.js",
+  "module": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "types": "./dist/main.d.ts"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts"
+    },
+    "./variables.scss": {
+      "default": "./src/styles/variables.scss"
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "npm run build:types && vite build",
+    "build:types": "tsc --build tsconfig.build.json",
+    "dev": "vite",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "preview": "vite preview",
+    "prepare": "husky install",
+    "precommit": "npm run lint-staged",
+    "lint-staged": "lint-staged",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublish": "npm run build",
+    "release-patch": "npm run build && npm version patch && git push && npm publish"
+  },
+  "browserslist": [
+    "cover 99.5%"
+  ],
+  "peerDependencies": {
+    "classnames": "^2.5.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "6.26.1"
+  },
+  "dependencies": {
+    "fast-deep-equal": "^3.1.3",
+    "papaparse": "^5.4.1",
+    "react-paginate": "^8.2.0"
+  },
+  "devDependencies": {
+    "storybook": "^8.6.14",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@eslint/js": "^9.25.0",
+    "@storybook/addon-backgrounds": "^8.5.2",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.0",
+    "@types/eslint-plugin-prettier": "^3.1.3",
+    "@types/node": "^22.15.21",
+    "@types/papaparse": "^5.3.16",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^4.4.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "glob": "^11.0.2",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.26.1",
+    "sass": "^1.89.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.0.0",
+    "vite-plugin-svgr": "^4.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write --ignore-unknown"
+    ]
+  }
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin wrapper($bg-color: var(--color-bg-island-default), $padding: 20px 24px 20px 24px) {
+    background-color: $bg-color;
+    padding: $padding;
+    border-radius: 16px;
+  }
+  
+  @mixin outlinedColorScheme ($borderColor, $textColor) { //NOTE: дублирование стилей UI-кита изза модулей?
+    background-color: transparent !important;
+    border: 1px solid $borderColor;
+    color: $textColor;
+    &[disabled] {
+        pointer-events: none;
+    }
+    &:hover {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 1px $borderColor;
+    }
+  
+    svg * {
+        fill: $textColor;
+    }
+  }

package/src/styles/fix.scss

@@ -0,0 +1,4 @@
+// Скрываем браузерный крестик в полях поиска
+input[type="search"]::-webkit-search-cancel-button {
+    display: none;
+}

package/src/styles/main.scss

@@ -0,0 +1,27 @@
+@import "./reset.scss";
+@import "./variables.scss";
+@import "./fix.scss";
+@import './_mixins.scss';
+@import './typography.scss';
+
+// Пока не трогать, тестовая подсветка блоков
+// html {
+//     border: 4px solid red;
+//     padding: 1px;
+// }
+
+// body {
+//     border: 2px dashed;
+//     margin: 1px;
+// }
+
+// div {
+//     border: 1px dotted;
+//     margin: 1px;
+// }
+
+
+//layout.module.scss не позволяет дочерним компонентам наследовать стили почему то. Сделать нормальный
+.page-content {
+    border-radius: 16px;
+}

package/src/styles/reset.scss

@@ -0,0 +1,106 @@
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  
+    /*color: #1a2026;*/
+  }
+  
+  *,
+  *::before,
+  *::after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  :focus,
+  :active {
+    outline: none;
+  }
+  
+  nav,
+  footer,
+  header,
+  aside {
+    display: block;
+  }
+  
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+  
+    font-size: 100%;
+    font-size: 14px;
+    line-height: 1;
+    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+  }
+  
+  input,
+  button,
+  textarea {
+    font-family: inherit;
+  }
+  
+  input::-ms-clear {
+    display: none;
+  }
+  
+  button {
+    cursor: pointer;
+  }
+  
+  button::-moz-focus-inner {
+    padding: 0;
+  
+    border: 0;
+  }
+  
+  a,
+  a:visited {
+    text-decoration: none;
+  }
+  
+  a:focus,
+  a:active {
+    outline: none;
+  }
+  
+  a:hover {
+    text-decoration: none;
+  }
+  
+  ul li {
+    list-style: none;
+  }
+  
+  img {
+    vertical-align: top;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: 400;
+  }
+  
+  #root {
+    background-color: var(--color-bg-island-default);
+  }
+  
+  .page-wrapper {
+    width: 100%;
+    max-width: 1920px;
+    min-height: 100vh;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-bg-island-default);
+  }