@ironsource/shared-ui 1.4.2-vite.1 → 1.4.3-andyk.1

package/design-foundation.stories/typography/TypographyData.d.ts

@@ -0,0 +1,7 @@
+export declare const typographyData: {
+    variant: string;
+    weight: string;
+    size: string;
+    lineHeight: string;
+    letterSpacing: string;
+}[];

package/design-foundation.stories/typography/TypographyStoryWrapper.vue.d.ts

@@ -0,0 +1,3 @@
+import '../../style/v4/colors.css';
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/design-foundation.stories/typography/index.d.ts

@@ -0,0 +1 @@
+export { default as TypographyStoryWrapper } from './TypographyStoryWrapper.vue';

package/index.d.ts

@@ -23,6 +23,7 @@ export * from '@/components/icon';
 export * from '@/components/search';
 export * from '@/components/skeleton';
 export * from '@/components/typography';
+export * from '@/components/typography/v4';
 export * from '@/components/popover';
 export * from '@/components/chip';
 export * from '@/components/toggle';

package/index.vue.js

@@ -0,0 +1,95 @@
+import './MenuItem.vue_vue_type_style_index_0_scoped_true_lang.css';
+export { AppTriggerTypes } from './components/appTrigger/index.vue.js';
+export { AutocompleteDropdownTypes } from './components/autocompleteDropdown/index.vue.js';
+export { MenuItemTypes } from './components/menuItem/index.vue.js';
+export { MenuTypes } from './components/menu/index.vue.js';
+export { AppIconTypes } from './components/appIcon/index.vue.js';
+export { SwitchTypes } from './components/switch/index.vue.js';
+export { RadioButtonTypes } from './components/radioButton/index.vue.js';
+export { Snackbar } from './components/snackbar/index.vue.js';
+export { FloatingToolbarTypes } from './components/floatingToolbar/index.vue.js';
+export { IncludeExcludeTypes } from './components/includeExclude/index.vue.js';
+export { CssBaselineTypes } from './components/cssBaseline/index.vue.js';
+export { ID_INJECTION_KEY, useId } from './composables/useId.vue.js';
+export { EmptyStateTypes } from './components/emptyState/index.vue.js';
+export { TableTypes } from './components/table/index.vue.js';
+export { DialogTypes } from './components/dialog/index.vue.js';
+export { FilterPanelTypes } from './components/filtersPanel/index.vue.js';
+export { FilterDropdownTypes } from './components/filterDropdown/index.vue.js';
+export { DropdownTypes } from './components/dropdown/index.vue.js';
+export { TabsTypes } from './components/tabs/index.vue.js';
+export { ButtonTypes } from './components/button/index.vue.js';
+export { CheckboxTypes } from './components/checkbox/index.vue.js';
+export { IconTypes } from './components/icon/index.vue.js';
+export { SearchTypes } from './components/search/index.vue.js';
+export { SkeletonTypes } from './components/skeleton/index.vue.js';
+export { TypographyTypes } from './components/typography/index.vue.js';
+export { TypographyTypesV4 } from './components/typography/v4/index.vue.js';
+export { PopoverTypes } from './components/popover/index.vue.js';
+export { ChipTypes } from './components/chip/index.vue.js';
+export { ToggleTypes } from './components/toggle/index.vue.js';
+export { TooltipTypes } from './components/tooltip/index.vue.js';
+export { InputTypes } from './components/input/index.vue.js';
+export { TextAreaTypes } from './components/textArea/index.vue.js';
+export { EditableTypes } from './components/table-cells/index.vue.js';
+export { useToggle } from './composables/useToggle.vue.js';
+export { useSearch } from './composables/useSearch.vue.js';
+export { DateRangeTypes } from './components/dateRange/index.vue.js';
+export { DatePickerTypes } from './components/datePicker/index.vue.js';
+export { BannerTypes } from './components/banner/index.vue.js';
+export { default as Popover } from './components/popover/Popover.vue.js';
+export { default as Tooltip } from './components/tooltip/Tooltip.vue.js';
+export { default as AppTrigger } from './components/appTrigger/AppTrigger.vue.js';
+export { default as AutocompleteDropdown } from './components/autocompleteDropdown/AutocompleteDropdown.vue.js';
+export { default as MenuItem } from './components/menuItem/MenuItem.vue.js';
+export { default as Menu } from './components/menu/Menu.vue.js';
+export { default as AppIcon } from './components/appIcon/AppIcon.vue.js';
+export { default as Switch } from './components/switch/Switch.vue.js';
+export { default as RadioButton } from './components/radioButton/RadioButton.vue.js';
+export { default as RadioGroup } from './components/radioButton/RadioGroup.vue.js';
+export { snackbarEmits, snackbarTypes } from './components/snackbar/snackbar.types.vue.js';
+export { default as FloatingToolbar } from './components/floatingToolbar/FloatingToolbar.vue.js';
+export { default as IncludeExclude } from './components/includeExclude/IncludeExclude.vue.js';
+export { default as IncludeExcludeOption } from './components/includeExclude/IncludeExcludeOption.vue.js';
+export { default as IncludeExcludeAppTrigger } from './components/includeExclude/IncludeExcludeAppTrigger.vue.js';
+export { default as IncludeExcludeAppHeader } from './components/includeExclude/IncludeExcludeAppHeader.vue.js';
+export { default as IncludeExcludeChipFilter } from './components/includeExclude/IncludeExcludeChipFilter.vue.js';
+export { default as CssBaseline } from './components/cssBaseline/CssBaseline.vue.js';
+export { default as EmptyState } from './components/emptyState/EmptyState.vue.js';
+export { default as Table } from './components/table/Table.vue.js';
+export { TableContext } from './components/table/TableContext.vue.js';
+export { default as Dialog } from './components/dialog/Dialog.vue.js';
+export { Reason } from './components/dialog/Reason.vue.js';
+export { default as FiltersPanel } from './components/filtersPanel/FiltersPanel.vue.js';
+export { default as FilterSearchInput } from './components/filtersPanel/FilterSearchInput.vue.js';
+export { useHiddenFilter } from './components/filtersPanel/useHiddenFilter.vue.js';
+export { default as FilterDropdown } from './components/filterDropdown/FilterDropdown.vue.js';
+export { default as AddFilterButton } from './components/filterDropdown/AddFilterButton.vue.js';
+export { default as Dropdown } from './components/dropdown/Dropdown.vue.js';
+export { default as Option } from './components/dropdown/Option.vue.js';
+export { default as Label } from './components/dropdown/Label.vue.js';
+export { default as SearchInput } from './components/dropdown/SearchInput.vue.js';
+export { default as Tabs } from './components/tabs/Tabs.vue.js';
+export { default as Button } from './components/button/Button.vue.js';
+export { default as IconButton } from './components/button/IconButton.vue.js';
+export { default as ScrollButton } from './components/button/ScrollButton.vue.js';
+export { default as Checkbox } from './components/checkbox/Checkbox.vue.js';
+export { default as Icon } from './components/icon/Icon.vue.js';
+export { icons } from './components/icon/icons/index.vue.js';
+export { default as Search } from './components/search/Search.vue.js';
+export { default as Skeleton } from './components/skeleton/Skeleton.vue.js';
+export { default as Heading } from './components/typography/Heading.vue.js';
+export { default as Text } from './components/typography/Text.vue.js';
+export { default as Typography } from './components/typography/v4/Typography.vue.js';
+export { default as Chip } from './components/chip/Chip.vue.js';
+export { default as Toggle } from './components/toggle/Toggle.vue.js';
+export { default as Input } from './components/input/Input.vue.js';
+export { default as DollarInput } from './components/input/DollarInput.vue.js';
+export { default as PercentageInput } from './components/input/PercentageInput.vue.js';
+export { default as PasswordInput } from './components/input/PasswordInput.vue.js';
+export { default as TextArea } from './components/textArea/TextArea.vue.js';
+export { default as Editable } from './components/table-cells/Editable.vue.js';
+export { EditableContext, useEditableContext } from './components/table-cells/EditableContext.vue.js';
+export { default as DateRange } from './components/dateRange/DateRange.vue.js';
+export { default as DatePicker } from './components/datePicker/DatePicker.vue.js';
+export { default as Banner } from './components/banner/Banner.vue.js';

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "1.4.2-vite.1",
+  "version": "1.4.3-andyk.1",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && node inject-css.js",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && node inject-css.js && sh ./scripts/build-styles.sh",
     "preview": "vite preview",
-    "storybook": "StoryBookEnv=dev storybook dev -p 6006",
-    "storybook:dist": "StoryBookEnv=prod storybook dev -p 6006",
-    "build-storybook": "storybook build -o docs",
+    "storybook": "StoryBookEnv=dev start-storybook -p 6006",
+    "storybook:dist": "StoryBookEnv=prod start-storybook -p 6006",
+    "build-storybook": "build-storybook -o docs",
     "serve-storybook": "RemoveAddons=true npm run build-storybook && http-server ./docs --port 6007",
+    "serve-storybook-ci": "npx concurrently -s first -n 'SB,TEST' -c 'magenta,blue' 'npm run storybook:dist --silent' 'npx wait-on tcp:6006' ",
     "test-storybook": "test-storybook --maxWorkers=2",
     "test-storybook-ci": "npx concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'npm run storybook:dist --silent' 'npx wait-on tcp:6006 && npm run test-storybook' ",
     "jest:integration:update": "jest --updateSnapshot",
@@ -64,28 +65,25 @@
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
     "@figus/cli": "^2.0.8",
-    "@storybook/addon-a11y": "^7.2.3",
-    "@storybook/addon-actions": "^7.2.3",
-    "@storybook/addon-docs": "^7.2.3",
-    "@storybook/addon-essentials": "^7.2.3",
-    "@storybook/addon-links": "^7.2.3",
-    "@storybook/addon-mdx-gfm": "^7.2.3",
-    "@storybook/addon-measure": "^7.2.3",
-    "@storybook/addon-outline": "^7.2.3",
-    "@storybook/blocks": "^7.2.3",
-    "@storybook/manager-api": "^7.2.3",
-    "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/theming": "^7.2.3",
-    "@storybook/vue3": "^7.2.3",
-    "@storybook/vue3-vite": "^7.2.3",
+    "@mdx-js/react": "^2.1.2",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-measure": "^6.5.9",
+    "@storybook/addon-outline": "^6.5.9",
+    "@storybook/builder-vite": "^0.1.36",
+    "@storybook/mdx2-csf": "^0.0.3",
+    "@storybook/test-runner": "^0.5.0",
+    "@storybook/vue3": "^6.5.9",
     "@types/download": "^8.0.1",
     "@types/node": "^18.0.0",
     "@types/prismjs": "^1.26.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-v8": "^0.33.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitest/coverage-c8": "^0.23.4",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.17",
     "autoprefixer": "^10.4.7",
@@ -96,7 +94,7 @@
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.5.13",
     "eslint-plugin-vue": "^8.5.0",
     "fast-glob": "^3.2.11",
     "figma-api": "^1.10.1",
@@ -117,20 +115,17 @@
     "prettier": "^2.6.0",
     "prismjs": "^1.29.0",
     "puppeteer": "^19.4.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "replace": "^1.2.1",
     "rimraf": "^3.0.2",
     "sass": "^1.49.7",
     "start-server-and-test": "^1.15.2",
-    "storybook": "^7.2.3",
     "svgo": "^2.8.0",
     "typescript": "^4.5.4",
-    "vite": "^4.4.8",
-    "vite-plugin-libcss": "^1.1.1",
-    "vite-plugin-static-copy": "^0.17.0",
-    "vitest": "^0.34.1",
-    "vue-tsc": "^1.8.8"
+    "vite": "^2.9.9",
+    "vite-plugin-libcss": "^1.0.5",
+    "vite-plugin-static-copy": "^0.6.0",
+    "vitest": "^0.23.2",
+    "vue-tsc": "^0.35.0"
   },
   "repository": "https://github.com/ironsource-mobile/shared-ui-ssp.git",
   "main": "./index.js",
@@ -181,7 +176,8 @@
     "./percentageInput": "./components/input/PercentageInput.vue.js",
     "./textArea": "./components/textArea/TextArea.vue.js",
     "./styleguide": "./styleguide.scss",
-    "./banner": "./components/banner/Banner.vue.js"
+    "./banner": "./components/banner/Banner.vue.js",
+    "./typography": "./components/typography/v4/Typography.vue.js"
   },
   "typesVersions": {
     "*": {
@@ -304,6 +300,9 @@
       ],
       "textArea": [
         "./components/textArea/TextArea.vue.d.ts"
+      ],
+      "typography": [
+        "./components/typography/v4/Typography.vue.d.ts"
       ]
     }
   },

package/styles/v4/colors.css

@@ -0,0 +1,91 @@
+:root {
+  --background-default: #FFFFFF;
+  --background-neutral: #FFFFFF;
+  --background-paper: hsl(0, 0%, 99.0%);
+  --background-modalElevation: #FFFFFF;
+  --background-paperElevation0: hsl(0, 0%, 97.5%);
+  --background-paperElevation1: hsl(0, 0%, 94.6%);
+  --background-paperElevation2: hsl(0, 0%, 92.0%);
+  --background-paperElevation3: hsl(0, 0%, 89.5%);
+  --background-paperElevation4: hsl(0, 0%, 86.8%);
+  --background-paperElevation5: hsl(0, 0%, 83.0%);
+  --background-paperElevation6: hsl(0, 0%, 73.2%);
+  --background-paperElevation7: hsl(0, 0%, 55.2%);
+  --background-paperElevation8: hsl(0, 0%, 50.3%);
+  --background-paperElevation9: hsl(0, 0%, 39.3%);
+  --action-primary: hsl(0, 0%, 12.5%);
+  --action-active: hsl(0, 0%, 50.3%);
+  --action-hover: hsl(0, 0%, 92.0%);
+  --action-selected: hsl(0, 0%, 89.5%);
+  --action-disabled: hsl(0, 0%, 73.2%);
+  --action-disabledBackground: hsl(0, 0%, 92.0%);
+  --action-focus: hsl(0, 0%, 92.0%);
+  --action-outlinedBorder: hsl(0, 0%, 83.0%);
+  --default-light: hsl(0, 0%, 89.5%);
+  --default-main: hsl(0, 0%, 86.8%);
+  --default-dark: hsl(0, 0%, 92.0%);
+  --default-outlinedBorder: hsl(0, 0%, 73.2%);
+  --default-contrastText: hsl(0, 0%, 12.5%);
+  --common-white: #FFFFFF;
+  --common-black: #000000;
+  --common-inverseWhite: #000000;
+  --common-inverseBlack: #FFFFFF;
+  --text-primary: hsl(0, 0%, 12.5%);
+  --text-secondary: hsl(0, 0%, 39.3%);
+  --text-disabled: hsl(0, 0%, 50.3%);
+  --primary-lighter: hsl(209, 100%, 96.5%);
+  --primary-light: hsl(209, 95.0%, 90.1%);
+  --primary-main: hsl(206, 100%, 50.0%);
+  --primary-main8p: hsla(206, 100%, 50%, 0.08);
+  --primary-main50p: hsla(206, 100%, 50%, 0.5);
+  --primary-dark: hsl(208, 93.5%, 47.4%);
+  --primary-darker: hsl(211, 90.0%, 42.0%);
+  --primary-hover: hsl(209, 100%, 96.5%);
+  --primary-selected: hsl(209, 95.0%, 90.1%);
+  --primary-outlinedBorder: hsl(206, 100%, 50.0%);
+  --primary-contrastText: hsl(216, 71.0%, 23.0%);
+  --info-lighter: hsl(223, 98.4%, 97.1%);
+  --info-light: hsl(224, 87.1%, 92.0%);
+  --info-main: hsl(226, 70.0%, 55.5%);
+  --info-main8p: hsla(226, 70%, 55.5%, 0.08);
+  --info-main50p: hsla(226, 70%, 55.5%, 0.5);
+  --info-dark: hsl(226, 58.6%, 51.3%);
+  --info-darker: hsl(226, 55.0%, 45.0%);
+  --info-hover: hsl(223, 98.4%, 97.1%);
+  --info-outlinedBorder: hsl(226, 70.0%, 55.5%);
+  --info-contrastText: hsl(226, 50.0%, 24.0%);
+  --success-lighter: hsl(139, 55.2%, 94.5%);
+  --success-light: hsl(141, 43.7%, 86.0%);
+  --success-main: hsl(151, 55.0%, 41.5%);
+  --success-main8p: hsla(151, 55%, 41.5%, 0.08);
+  --success-main50p: hsla(151, 55%, 41.5%, 0.5);
+  --success-dark: hsl(152, 57.5%, 37.6%);
+  --success-darker: hsl(153, 67.0%, 28.5%);
+  --success-hover: hsl(139, 55.2%, 94.5%);
+  --success-outlinedBorder: hsl(151, 55.0%, 41.5%);
+  --success-contrastText: hsl(155, 40.0%, 16.5%);
+  --warning-lighter: hsl(45, 100%, 90.8%);
+  --warning-light: hsl(40, 100%, 81.5%);
+  --warning-main: hsl(42, 100%, 62.0%);
+  --warning-main8p: hsla(42, 100%, 62%, 0.08);
+  --warning-main50p: hsla(42, 100%, 62%, 0.5);
+  --warning-dark: hsl(42, 100%, 55.0%);
+  --warning-darker: hsl(25, 50.0%, 38.0%);
+  --warning-hover: hsl(45, 100%, 90.8%);
+  --warning-outlinedBorder: hsl(42, 100%, 62.0%);
+  --warning-contrastText: hsl(25, 40.0%, 22.0%);
+  --error-lighter: hsl(360, 100%, 96.8%);
+  --error-light: hsl(360, 90.2%, 91.9%);
+  --error-main: hsl(358, 75.0%, 59.0%);
+  --error-main8p: hsla(358, 75%, 59%, 0.08);
+  --error-main50p: hsla(358, 75%, 59%, 0.5);
+  --error-dark: hsl(358, 67.4%, 54.6%);
+  --error-darker: hsl(358, 65.0%, 47.0%);
+  --error-hover: hsl(360, 100%, 96.8%);
+  --error-outlinedBorder: hsl(358, 75.0%, 59.0%);
+  --error-contrastText: hsl(350, 63.0%, 24.0%);
+  --divider: hsl(0, 0%, 86.8%);
+
+  --abtest-a-control: #FFC134;
+  --abtest-b-test: #4F4FF5;
+}

package/styles/v4/elevations.css

@@ -0,0 +1,10 @@
+:root {
+  --elevation-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --elevation-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);
+  --elevation-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.12);
+  --elevation-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  --elevation-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+  --elevation-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+  --elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+  --elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+}

package/styles/v4/fonts.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2,.font-chart-2,.font-chart-1{font-family:"Inter",sans-serif;font-weight:700}.font-chip-label,.font-table-label,.font-button,.font-heading-6,.font-heading-5,.font-heading-4,.font-heading-3,.font-heading-2,.font-heading-1,.font-title{font-family:"Inter",sans-serif;font-weight:600}.font-tab-label1,.font-input-label,.font-overline,.font-subtitle-2,.font-subtitle-1{font-family:"Inter",sans-serif;font-weight:500}.font-caption,.font-body-2,.font-body-1{font-family:"Inter",sans-serif;font-weight:400}.font-title{font-size:2.5rem;line-height:3rem;letter-spacing:-0.055rem}.font-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-0.0285rem}.font-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-0.01575rem}.font-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-0.011rem}.font-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-0.00525rem}.font-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-0.00244rem}.font-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-0.00525rem}.font-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-0.00244rem}.font-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-0.015rem}.font-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-0.0125rem}.font-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption{font-size:.75rem;line-height:1rem}.font-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1{font-size:.875rem;line-height:1rem}.font-tab-label2{font-size:.875rem;line-height:1rem}.font-chip-label{font-size:.75rem;line-height:1rem}h1,h2,h3,h4,h5,h6{margin:0}/*# sourceMappingURL=fonts.css.map */

package/styles/v4/fonts.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["fonts.scss"],"names":[],"mappings":"AAKQ,0FAKR,6CACE,YAHM,mBAIN,gBAEF,4JACE,YAPM,mBAQN,gBAEF,oFACE,YAXM,mBAYN,gBAEF,wCACE,YAfM,mBAgBN,gBAIF,YACE,iBACA,iBACA,yBAGF,gBACE,iBACA,oBACA,0BAGF,gBACE,mBACA,oBACA,2BAGF,gBACE,eACA,mBACA,yBAGF,gBACE,kBACA,iBACA,qBAGF,gBACE,mBACA,iBACA,qBAGF,gBACE,iBACA,mBACA,iBAMF,aACE,kBACA,oBACA,2BAGF,aACE,mBACA,oBACA,2BAMF,iBACE,kBACA,oBACA,2BAGF,iBACE,mBACA,oBACA,2BAMF,cACE,iBACA,mBACA,yBAGF,cACE,kBACA,oBACA,0BAOF,aACE,kBACA,oBACA,yBAGF,eACE,iBACA,iBACA,uBACA,yBAGF,cACE,iBACA,iBAGF,kBACE,mBACA,oBACA,yBAGF,kBACE,mBACA,iBACA,yBAGF,iBACE,kBACA,iBAGF,iBACE,kBACA,iBAGF,iBACE,iBACA,iBAKF,kBAME","file":"fonts.css"}

package/styles/v4/fonts.scss

@@ -0,0 +1,258 @@
+/**
+ * Style v4 Typography
+ * -----------------------------------------------------------------------------
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+// font-family
+$inter: 'Inter', sans-serif;
+
+%font-bold {
+  font-family: $inter;
+  font-weight: 700;
+}
+%font-semibold {
+  font-family: $inter;
+  font-weight: 600;
+}
+%font-medium {
+  font-family: $inter;
+  font-weight: 500;
+}
+%font-regular {
+  font-family: $inter;
+  font-weight: 400;
+}
+
+// region heading
+%font-title {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  letter-spacing: -0.055rem;
+  @extend %font-semibold;
+}
+%font-heading-1 {
+  font-size: 1.5rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.0285rem;
+  @extend %font-semibold;
+}
+%font-heading-2 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.01575rem;
+  @extend %font-semibold;
+}
+%font-heading-3 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.011rem;
+  @extend %font-semibold;
+}
+%font-heading-4 {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  letter-spacing: unset;
+  @extend %font-semibold;
+}
+%font-heading-5 {
+  font-size: 0.8125rem;
+  line-height: 16px;
+  letter-spacing: unset;
+  @extend %font-semibold;
+}
+%font-heading-6 {
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  letter-spacing: 0;
+  @extend %font-semibold;
+}
+// endregion
+
+// region body
+%font-body-1 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00525rem;
+  @extend %font-regular;
+}
+%font-body-2 {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00244rem;
+  @extend %font-regular;
+}
+// endregion
+
+// region subtitle
+%font-subtitle-1 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00525rem;
+  @extend %font-medium;
+}
+%font-subtitle-2 {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.00244rem;
+  @extend %font-medium;
+}
+// endregion
+
+// region chart
+%font-chart-1 {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.015rem;
+  @extend %font-bold;
+}
+%font-chart-2 {
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.0125rem;
+  @extend %font-bold;
+}
+// endregion
+
+
+// region other
+%font-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.00875rem;
+  @extend %font-semibold;
+}
+%font-overline {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.045rem;
+  text-transform: uppercase;
+  @extend %font-medium;
+}
+%font-caption {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  @extend %font-regular;
+}
+%font-table-label {
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.00813rem;
+  @extend %font-semibold;
+}
+%font-input-label {
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  letter-spacing: 0.00813rem;
+  @extend %font-medium;
+}
+%font-tab-label1 {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  @extend %font-medium;
+}
+%font-tab-label2 {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  @extend %font-bold;
+}
+%font-chip-label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  @extend %font-semibold;
+}
+// endregion
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+.font-title {
+  @extend %font-title;
+}
+
+.font-heading-1 {
+  @extend %font-heading-1;
+}
+
+.font-heading-2 {
+  @extend %font-heading-2;
+}
+
+.font-heading-3 {
+  @extend %font-heading-3;
+}
+
+.font-heading-4 {
+  @extend %font-heading-4;
+}
+
+.font-heading-5 {
+  @extend %font-heading-5;
+}
+
+.font-heading-6 {
+  @extend %font-heading-6;
+}
+
+.font-body-1 {
+  @extend %font-body-1;
+}
+
+.font-body-2 {
+  @extend %font-body-2;
+}
+
+.font-subtitle-1 {
+  @extend %font-subtitle-1;
+}
+
+.font-subtitle-2 {
+  @extend %font-subtitle-2;
+}
+
+.font-chart-1 {
+  @extend %font-chart-1;
+}
+
+.font-chart-2 {
+  @extend %font-chart-2;
+}
+
+.font-button {
+  @extend %font-button;
+}
+
+.font-overline {
+  @extend %font-overline;
+}
+
+.font-caption {
+  @extend %font-caption;
+}
+
+.font-table-label {
+  @extend %font-table-label;
+}
+
+.font-input-label {
+  @extend %font-input-label;
+}
+
+.font-tab-label1 {
+  @extend %font-tab-label1;
+}
+
+.font-tab-label2 {
+  @extend %font-tab-label2;
+}
+
+.font-chip-label {
+  @extend %font-chip-label;
+}