@companix/uikit 0.0.2 → 0.0.4

package/themes/classic/classic.scss

@@ -1,493 +0,0 @@
-// main
-@use '../../src/theme.scss';
-@use './animations.scss';
-
-// in
-
-// layout
-
-$layout: (
-  icon: (
-    size_xxxs: 12px,
-    size_xxs: 1rem,
-    size_xs: 1.25rem,
-    size_s: 1.55rem,
-    size_m: 2rem,
-    size_l: 1.5rem,
-    size_xl: 2rem,
-    size_xxl: 3rem,
-    size_xxxl: 4.5rem
-  ),
-  button: (
-    font-family: inherit,
-    border-radius: 8px,
-    font-weight: normal,
-
-    size_sm_height: 1.75rem,
-    size_sm_font-family: inherit,
-    size_sm_line-height: inherit,
-    size_sm_padding: 0 1rem,
-
-    size_md_height: 2rem,
-    size_md_font-family: inherit,
-    size_md_line-height: inherit,
-    size_md_padding: 0 1rem,
-
-    size_lg_height: 2.25rem,
-    size_lg_font-family: inherit,
-    size_lg_line-height: inherit,
-    size_lg_padding: 0 1rem
-  ),
-  checkbox: (
-    label_padding-left: 0.5rem,
-    size_sm_box: 1.25rem,
-    size_md_box: 1.5rem,
-    size_md_font-size: 1rem,
-    size_sm_font-size: 0.8rem,
-    box_border-radius: 8px,
-    icon_in_animation: 'checkboxIn 200ms, checkboxInColor 100ms',
-    icon_out_animation: 'checkboxOutColor 150ms',
-    disabled_opacity: 48%
-  ),
-  radio: (
-    size_sm_box: 1.25rem,
-    size_md_box: 1.5rem,
-    size_sm_mark: 0.625rem,
-    size_md_mark: 0.75rem,
-    size_md_font-size: 1rem,
-    size_sm_font-size: 0.8rem,
-    group_gap: 0.8rem,
-    label_padding-left: 0.5rem,
-    box_border-radius: 50%,
-    mark_border-radius: 50%,
-    mark_in_animation: 'fadeIn 100ms, markScaleIn 200ms',
-    mark_out_animation: 'fadeOut 100ms, markScaleOut 200ms',
-    disabled_opacity: 48%
-  ),
-  tab: (
-    height: 45px,
-    font-size: 1rem,
-    padding: 0 20px,
-    transition: 'color, 200ms ease',
-    container_border-bottom: 1px solid #d8d8d8,
-    indicator_container_transition: 'height, transform, width, 320ms cubic-bezier(0.4, 1, 0.75, 0.9)',
-    indicator_height: 3px,
-    disabled_opacity: 0.5
-  ),
-  toaster: (
-    border-radius: 8px,
-    padding: 1rem,
-    min-width: 400px,
-    max-width: 600px,
-    viewport_offset: 20px,
-    content_gap: 1px,
-    title_font-size: 0.875rem,
-    description_font-size: 0.875rem,
-    title_font-weight: 600,
-    icon_margin-right: 0.8rem,
-    icon_size: 1.25rem,
-    close_size: 1rem,
-    close_space: 6px,
-    close_padding: 4px
-  ),
-  tooltip: (
-    padding: 6px 12px,
-    max-width: 400px,
-    font-size: 0.8rem,
-    in_animation:
-      'popoverScaleIn 300ms cubic-bezier(0.54, 1.12, 0.38, 1.11), fadeIn 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
-    out_animation:
-      'popoverScaleOut 300ms cubic-bezier(0.54, 1.12, 0.38, 1.11), fadeOut 100ms cubic-bezier(0.4, 1, 0.75, 0.9)'
-  ),
-  popover: (
-    border-radius: 6px,
-    content_border-radius: 6px,
-    default_in_animation:
-      'popoverScaleIn 300ms cubic-bezier(0.54, 1.12, 0.38, 1.11), fadeIn 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
-    default_out_animation:
-      'popoverScaleOut 300ms cubic-bezier(0.54, 1.12, 0.38, 1.11), fadeOut 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
-    minimal_in_animation: 'fadeIn 100ms cubic-bezier(0.4, 1, 0.75, 0.9)',
-    minimal_out_animation: 'fadeOut 100ms cubic-bezier(0.4, 1, 0.75, 0.9)'
-  ),
-  popup: (
-    border-radius: 4px,
-    overlay_in_animation: fadeIn 200ms cubic-bezier(0.4, 1, 0.75, 0.9),
-    overlay_out_animation: fadeOut 200ms cubic-bezier(0.4, 1, 0.75, 0.9),
-    in_animation: dialogIn 300ms cubic-bezier(0.54, 1.12, 0.38, 1.11),
-    out_animation: dialogOut 300ms cubic-bezier(0.54, 1.12, 0.38, 1.11)
-  ),
-  dialog: (
-    container_padding: 20px,
-    // size
-    size_xxs_max-width: 500px,
-    size_xs_max-width: 500px,
-    size_s_max-width: 500px,
-    size_m_max-width: 500px,
-    size_l_max-width: 500px,
-    size_xl_max-width: 500px,
-    size_xxl_max-width: 500px,
-    // full-size
-    size_full_width: 100%,
-    size_full_height: 100%,
-    size_full_container_padding: 0px,
-    size_full_border-radius: 0px
-  ),
-  alert: (
-    container_padding: 20px,
-    padding: 20px,
-    width: 400px,
-    title_font-weight: 600,
-    title_font-size: 18px,
-    body_gap: 20px,
-    content_gap: 4px,
-    icon_size: 38px,
-    footer_padding-top: 20px,
-    footer_gap: 8px,
-    icon_color: #ac2f33
-  ),
-  drawer: (
-    overlay_background: rgba(0, 0, 0, 0.5),
-    background: #f6f7f9,
-    radius: 10px,
-    box-shadow:
-      ' 0 0 0 1px rgba(17, 20, 24, .1), 0 4px 8px rgba(17, 20, 24, .2), 0 18px 46px 6px rgba(17, 20, 24, .2)',
-    overlay_in_animation: fadeIn 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    overlay_out_animation: fadeOut 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    //
-    in_left_animation: slideFromLeft 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    out_left_animation: slideToLeft 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    //
-    in_right_animation: slideFromRight 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    out_right_animation: slideToRight 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    //
-    in_bottom_animation: slideFromBottom 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    out_bottom_animation: slideToBottom 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    //
-    in_top_animation: slideFromTop 500ms cubic-bezier(0.32, 0.72, 0, 1),
-    out_top_animation: slideToTop 500ms cubic-bezier(0.32, 0.72, 0, 1)
-  ),
-  form: (
-    space: 12px,
-    space-y: 6px,
-    //
-    font-weight: 400,
-    background: #ffffff,
-    border-radius: 8px,
-    box-shadow: '0 1px 2px rgba(17, 20, 24, 0.1)',
-    border: 1px solid rgba(17, 20, 24, 0.2),
-    color: #37352f,
-    placeholder_color: #9899a3,
-    transition: 'background .15s ease, border .15s ease, box-shadow .15s ease, color .15s ease',
-    focus_background: #ffffff,
-    focus_border-color: rgba(5, 115, 225, 0.5),
-    focus_box-shadow:
-      '0 1px 2px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(0, 0, 0, .03), 0 3px 6px rgba(0, 0, 0, .02), 0 0 0 3px rgba(5, 115, 225, .25), 0 1px 1px 0 rgba(0, 0, 0, .08)',
-    // sizes
-    size_md_height: 36px,
-    size_md_font-size: 16px,
-    size_sm_height: 30px,
-    size_sm_font-size: 14px,
-    size_lg_height: 42px,
-    size_lg_font-size: 18px,
-    // disabled
-    disabled_background: rgba(211, 216, 222, 0.5),
-    disabled_box-shadow: none,
-    disabled_color: rgba(95, 107, 124, 0.6),
-    disabled_cursor: not-allowed,
-    // required
-    required_border-color: #f53535,
-    required_box-shadow: 0 0 3px 1px rgb(245 53 53 / 40%)
-  ),
-  select: (
-    expand_color: #99a2ad,
-    clean_color: #99a2ad,
-    clean_hover_color: #3d3d3d
-  ),
-  tag: (
-    background-color: rgb(0 0 0 / 7%),
-    color: #000000,
-    font-size: 14px,
-    gap: 0px,
-    border-radius: 6px,
-    border: 1px solid #cfcfcf,
-    // close
-    close_padding: 4px,
-    close_size: 12px,
-    close_color: #4b4b4b,
-    close_hover_color: #a1a5ab,
-    // name
-    name_padding-left: 6px,
-    // container
-    container_gap: 4px,
-    container_padding: 6px,
-    // empty
-    empty_color: #818c99,
-    empty_text-align: center,
-    empty_font-size: 14px
-  ),
-  option: (
-    padding: 6px 8px,
-    border-radius: 4px,
-    hover_background: rgba(143, 153, 168, 0.15),
-    active_background: rgba(143, 153, 168, 0.3),
-    check_color: #2688eb,
-    check_margin-left: 8px,
-    check_size: 16px,
-    minimal_selected_background-color: rgba(0, 133, 255, 0.1),
-    minimal_selected_color: #0780ef,
-    list_padding: 10px 0px,
-    disabled_opacity: 0.3
-  ),
-  calendar: (
-    padding: 12px,
-    name_width: 40px,
-    name_height: 32px,
-    name_color: #6d7885,
-    name_font-size: 14px,
-    navigation_color: #2688eb,
-    navigation_hover_background: rgb(0 0 0 / 6%),
-    navigation_active_background: rgb(0 0 0 / 8%),
-    navigation_border-radius: 6px,
-    navigation_size: 36px,
-    navigation_icon_size: 20px,
-    header_height: 36px,
-    day_width: 40px,
-    day_height: 36px,
-    day_font-size: 14px,
-    day_border-radius: 8px,
-    day_hover_background: rgba(0, 0, 0, 0.1),
-    day_disabled_color: #c9c9c9,
-    day_selected_background: #529ef4,
-    day_selected_color: #ffffff
-  ),
-  switch: (
-    disabled_opacity: 0.6,
-    track_width: 47px,
-    track_min-width: 47px,
-    track_height: 27px,
-    track_disabled_cursor: not-allowed,
-    label_disabled_cursor: not-allowed,
-    track_unchecked_background-color: #e1e3e6,
-    track_checked_background-color: #2688eb,
-    track_border-radius: calc(47px / 2),
-    track_transition: background-color 200ms linear,
-    track_outline_width: 2px,
-    thumb_size: 23px,
-    thumb_transition: transform 200ms cubic-bezier(0.36, -0.24, 0.26, 1.32),
-    thumb_background: #ffffff,
-    thumb_box-shadow:
-      '0 3px 8px rgb(0,0,0,0.15),0 3px 1px rgb(0,0,0,0.06),inset 0 0 0 0.5px rgb(0,0,0,0.04)',
-    label_padding-left: 0.5rem,
-    icon_opacity: 0,
-    icon_transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),
-    icon_size: 12px,
-    icon_visible_opacity: 1,
-    icon_unchecked_color: rgba(220, 38, 38),
-    icon_checked_color: rgba(22, 163, 74)
-  )
-);
-
-// themes
-
-$theme-light: (
-  button: (
-    // primary
-    // primary_default
-    primary_default_enabled_color: #fff,
-    primary_default_enabled_background: #2d72d2,
-    primary_default_enabled_box-shadow: var(--button_enabled_box-shadow),
-    primary_default_hovered_background: #215db0,
-    primary_default_hovered_box-shadow: var(--button_hovered_box-shadow),
-    primary_default_pressed_background: #184a90,
-    primary_default_disabled_background: rgba(45, 114, 210, 0.5),
-    primary_default_disabled_box-shadow: none,
-    primary_default_disabled_color: hsla(0, 0%, 100%, 0.6),
-    // primary_outlined
-    primary_outline_enabled_color: #215db0,
-    primary_outline_enabled_border: 1px solid rgba(33, 93, 176, 0.6),
-    primary_outline_hovered_background: rgba(45, 114, 210, 0.15),
-    primary_outline_pressed_background: rgba(45, 114, 210, 0.3),
-    primary_outline_pressed_color: #184a90,
-    primary_outline_disabled_border: 1px solid rgba(33, 93, 176, 0.2),
-    primary_outline_disabled_color: rgba(33, 93, 176, 0.5),
-    primary_outline_disabled_background: none,
-    // primary_minimal
-    primary_minimal_enabled_color: var(--button_primary_outline_enabled_color),
-    primary_minimal_hovered_background: var(--button_primary_outline_hovered_background),
-    primary_minimal_pressed_background: var(--button_primary_outline_pressed_background),
-    primary_minimal_pressed_color: var(--button_primary_outline_pressed_color),
-    primary_minimal_disabled_background: none,
-    primary_minimal_disabled_color: rgba(33, 93, 176, 0.5),
-    // neutral
-    // neutral_default
-    neutral_default_enabled_color: #1c2127,
-    neutral_default_enabled_background: #f6f7f9,
-    neutral_default_enabled_box-shadow: var(--button_enabled_box-shadow),
-    neutral_default_hovered_background: #edeff2,
-    neutral_default_hovered_box-shadow: var(--button_hovered_box-shadow),
-    neutral_default_pressed_background: #dce0e5,
-    neutral_default_disabled_background: rgba(211, 216, 222, 0.5),
-    neutral_default_disabled_box-shadow: none,
-    neutral_default_disabled_color: rgba(95, 107, 124, 0.6),
-    // neutral_outlined
-    neutral_outline_enabled_color: var(--button_neutral_default_enabled_color),
-    neutral_outline_enabled_border: 1px solid rgba(28, 33, 39, 0.2),
-    neutral_outline_hovered_background: rgba(143, 153, 168, 0.15),
-    neutral_outline_pressed_background: rgba(143, 153, 168, 0.3),
-    neutral_outline_disabled_border: 1px solid rgba(95, 107, 124, 0.1),
-    neutral_outline_disabled_color: rgba(95, 107, 124, 0.6),
-    neutral_outline_disabled_background: none,
-    // neutral_minimal
-    neutral_minimal_enabled_color: var(--button_neutral_outline_enabled_color),
-    neutral_minimal_hovered_background: var(--button_neutral_outline_hovered_background),
-    neutral_minimal_pressed_background: var(--button_neutral_outline_pressed_background),
-    neutral_minimal_pressed_color: var(--button_neutral_outline_pressed_color),
-    neutral_minimal_disabled_background: none,
-    neutral_minimal_disabled_color: rgba(95, 107, 124, 0.6),
-    // positive
-    // positive_default
-    positive_default_enabled_color: #fff,
-    positive_default_enabled_background: #238551,
-    positive_default_enabled_box-shadow: var(--button_enabled_box-shadow),
-    positive_default_hovered_background: #1c6e42,
-    positive_default_hovered_box-shadow: var(--button_hovered_box-shadow),
-    positive_default_pressed_background: #165a36,
-    positive_default_disabled_background: rgba(35, 133, 81, 0.5),
-    positive_default_disabled_box-shadow: none,
-    positive_default_disabled_color: hsla(0, 0%, 100%, 0.6),
-    // positive_outlined
-    positive_outline_enabled_color: #1c6e42,
-    positive_outline_enabled_border: 1px solid rgba(28, 110, 66, 0.6),
-    positive_outline_hovered_background: rgba(35, 133, 81, 0.15),
-    positive_outline_pressed_background: rgba(35, 133, 81, 0.3),
-    positive_outline_pressed_color: #165a36,
-    positive_outline_disabled_border: 1px solid rgba(28, 110, 66, 0.2),
-    positive_outline_disabled_color: rgba(28, 110, 66, 0.5),
-    positive_outline_disabled_background: none,
-    // positive_minimal
-    positive_minimal_enabled_color: var(--button_positive_outline_enabled_color),
-    positive_minimal_hovered_background: var(--button_positive_outline_hovered_background),
-    positive_minimal_pressed_background: var(--button_positive_outline_pressed_background),
-    positive_minimal_pressed_color: var(--button_positive_outline_pressed_color),
-    positive_minimal_disabled_background: none,
-    positive_minimal_disabled_color: rgba(28, 110, 66, 0.5),
-    // negative
-    // negative_default
-    negative_default_enabled_color: #fff,
-    negative_default_enabled_background: #cd4246,
-    negative_default_enabled_box-shadow: var(--button_enabled_box-shadow),
-    negative_default_hovered_background: #ac2f33,
-    negative_default_hovered_box-shadow: var(--button_hovered_box-shadow),
-    negative_default_pressed_background: #8e292c,
-    negative_default_disabled_background: rgba(205, 66, 70, 0.5),
-    negative_default_disabled_box-shadow: none,
-    negative_default_disabled_color: hsla(0, 0%, 100%, 0.6),
-    // negative_outlined
-    negative_outline_enabled_color: #ac2f33,
-    negative_outline_enabled_border: 1px solid rgba(172, 47, 51, 0.6),
-    negative_outline_hovered_background: rgba(205, 66, 70, 0.15),
-    negative_outline_pressed_background: rgba(205, 66, 70, 0.3),
-    negative_outline_pressed_color: #8e292c,
-    negative_outline_disabled_border: 1px solid rgba(172, 47, 51, 0.2),
-    negative_outline_disabled_color: rgba(172, 47, 51, 0.5),
-    negative_outline_disabled_background: none,
-    // negative_minimal
-    negative_minimal_enabled_color: #ac2f33,
-    negative_minimal_hovered_background: var(--button_negative_outline_hovered_background),
-    negative_minimal_pressed_background: var(--button_negative_outline_pressed_background),
-    negative_minimal_pressed_color: var(--button_negative_outline_pressed_color),
-    negative_minimal_disabled_background: none,
-    negative_minimal_disabled_color: rgba(172, 47, 51, 0.5)
-  ),
-  popover: (
-    box-shadow:
-      '0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2)',
-    content_background: #ffffff
-  ),
-  tooltip: (
-    background: #000,
-    color: #fff
-  ),
-  checkbox: (
-    color: #34343c,
-    box_background: #b5b7c040,
-    box_hover_background: #b5b7c081,
-    box_active_background: #b5b7c0a8,
-    box_checked_background: #ffdb4d,
-    required_color: #f53535,
-    required_box_border: 1.5px solid #f53535
-  ),
-  radio: (
-    color: #34343c,
-    box_background: #b5b7c040,
-    box_hover_background: #b5b7c081,
-    box_active_background: #b5b7c0a8,
-    box_checked_background: #ffdb4d,
-    mark_background: #ffffff,
-    required_color: #f53535,
-    required_box_border: 1.5px solid #f53535
-  ),
-  tab: (
-    color: #717171,
-    hover_color: #161616,
-    active_color: #2d72d2,
-    indicator_background: #2d72d2
-  ),
-  toaster: (
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
-    close_color: hsl(0, 0%, 52.3%),
-    close_hover_color: hsl(0, 0%, 9%),
-    // appearances
-    primary_background: hsl(208, 100%, 97%),
-    primary_color: hsl(210, 92%, 45%),
-    primary_border: 1px solid hsl(210deg 92% 45% / 26%),
-    neutral_background: #fff,
-    neutral_icon_color: #969696,
-    neutral_border: 1px solid hsl(0deg 0% 0% / 16%),
-    negative_background: hsl(359, 100%, 97%),
-    negative_color: hsl(360, 100%, 45%),
-    negative_border: 1px solid hsl(359deg 100% 90.4%),
-    positive_background: hsl(143, 85%, 96%),
-    positive_color: hsl(140, 100%, 27%),
-    positive_border: 1px solid hsl(140deg 100% 27% / 26%),
-    warning_background: hsl(49, 100%, 97%),
-    warning_color: hsl(31, 92%, 45%),
-    warning_border: 1px solid hsl(49deg 100% 45.5% / 60%)
-  ),
-  dialog: (
-    box-shadow:
-      '0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2)'
-  ),
-  popup: (
-    overlay_background: rgba(17, 20, 24, 0.7),
-    background: #f6f7f9
-  )
-);
-
-$theme-dark: (
-  button: (
-    primary_default_enabled_color: #fff,
-    primary_default_enabled_background: #2d72d2
-  )
-);
-
-:root {
-  @include theme.use-tokens($layout);
-}
-
-// themes
-
-.theme-light {
-  --button_enabled_box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2), 0 1px 2px rgba(17, 20, 24, 0.1);
-  --button_hovered_box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.2), 0 1px 2px rgba(17, 20, 24, 0.2);
-  //
-  @include theme.use-tokens($theme-light);
-  // close
-  --dialog-close-color: #34343c;
-  --dialog-close-hover-background: #b5b7c033;
-  --dialog-close-active-background: #b5b7c057;
-}
-
-.theme-dark {
-  @include theme.use-tokens($theme-dark);
-}

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist",
-    "module": "ESNext",
-    "baseUrl": "./",
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "strict": true,
-    "strictPropertyInitialization": false,
-    "declaration": false,
-    "removeComments": true,
-    "skipLibCheck": true,
-    "experimentalDecorators": true,
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src", "playground", "../utils-browser/src/device"],
-  "exclude": ["node_modules", "dist"]
-}

package/vite.build.ts

@@ -1,35 +0,0 @@
-import { defineConfig } from 'vite'
-import autoExternal from 'rollup-plugin-auto-external'
-import react from '@vitejs/plugin-react'
-import checker from 'vite-plugin-checker'
-
-export default defineConfig({
-  plugins: [
-    react(),
-    checker({
-      typescript: true,
-      eslint: {
-        lintCommand: `eslint "./**/*.{ts,tsx}"`
-      }
-    })
-  ],
-  build: {
-    outDir: 'dist',
-    lib: {
-      entry: './src/index.ts',
-      name: 'uikit',
-      fileName: (format) => `bundle.${format}.js`,
-      formats: ['es']
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', 'react/jsx-runtime'], // vite работает поверх rollup, и использует @rollup/plugin-node-resolve как встроенную часть загрузки модулей, в результате чего код 'react/jsx-runtime' дублируется в бандл
-      output: {
-        preserveModules: true, // без указанного sideEffects в бандле клиента оказались бы компоненты обернутые в forwardRef,
-        //                        поскольку webpack не мог бы определить является ли forwardRef side-эффект функцией воздействующей на окружение.
-        //                        Модульная сборка + sideEffects: false позволяют клиенту получать код только явно импортируемых функций
-        globals: { react: 'React', 'react-dom': 'ReactDOM' }
-      },
-      plugins: [autoExternal()]
-    }
-  }
-})

package/vite.config.ts

@@ -1,33 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import checker from 'vite-plugin-checker'
-import tailwindcss from '@tailwindcss/vite'
-import { resolve } from 'path'
-
-export default defineConfig({
-  // Project root directory (where index.html is located).
-  root: '.', // Можно было бы указать .html в playground, но тогда eslint работал бы нестабильно со смежными директориями. Путь в lintCommand относителен от 'root' пути
-  plugins: [
-    react(),
-    tailwindcss(),
-    checker({
-      typescript: true,
-      eslint: {
-        lintCommand: `eslint "./**/*.{ts,tsx}"`
-      }
-    })
-  ],
-  css: {
-    preprocessorOptions: {
-      sass: {
-        silenceDeprecations: ['import', 'new-global', 'css-function-mixin'],
-        quietDeps: true
-      }
-    }
-  },
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src')
-    }
-  }
-})