@companix/uikit 0.0.1

package/themes/classic/classic.scss

@@ -0,0 +1,493 @@
+// 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

@@ -0,0 +1,27 @@
+{
+  "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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,33 @@
+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')
+    }
+  }
+})