nntc-ui 0.2.3 → 0.2.6

package/src/stories/icons/Icons.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  AddIcon,
+  AlertIcon,
+  ArrowDropDownIcon,
+  ArrowDropUpIcon,
+  AttachIcon,
+  BarChartIcon,
+  BookmarkAddIcon,
+  BookmarkIcon,
+  CheckboxDeselectedIcon,
+  CheckboxIcon,
+  CheckboxSeveralIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CircleFilledIcon,
+  CloseIcon,
+  DateRangeIcon,
+  DeleteIcon,
+  DoneIcon,
+  DownloadIcon,
+  DragIcon,
+  EditIcon,
+  ErrorOutlineIcon,
+  ExportTableIcon,
+  FileUploadIcon,
+  FilterClearIcon,
+  FilterIcon,
+  FullScreenOffIcon,
+  FullScreenOnIcon,
+  InfoIcon,
+  ListIcon,
+  MoreVerticalIcon,
+  PointIcon,
+  RadioDeselectedIcon,
+  RadioSelectedIcon,
+  SaveIcon,
+  SearchIcon,
+  SelectUniqueIcon,
+  SettingsIcon,
+  SortDownIcon,
+  SortUpIcon,
+  TableChartIcon,
+  UploadIcon,
+  VisibilityIcon,
+  WellIcon,
+} from '../../icons';
+
+const meta = {
+  title: 'Icons/Icons',
+  component: AddIcon,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AddIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const iconComponents = {
+  AddIcon,
+  ArrowDropDownIcon,
+  ArrowDropUpIcon,
+  AttachIcon,
+  BarChartIcon,
+  CheckboxDeselectedIcon,
+  CheckboxIcon,
+  CheckboxSeveralIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  DragIcon,
+  CircleFilledIcon,
+  CloseIcon,
+  DateRangeIcon,
+  DeleteIcon,
+  DoneIcon,
+  ErrorOutlineIcon,
+  FileUploadIcon,
+  FilterClearIcon,
+  FilterIcon,
+  InfoIcon,
+  AlertIcon,
+  ListIcon,
+  MoreVerticalIcon,
+  SearchIcon,
+  SettingsIcon,
+  SortDownIcon,
+  SortUpIcon,
+  TableChartIcon,
+  UploadIcon,
+  WellIcon,
+  EditIcon,
+  FullScreenOnIcon,
+  FullScreenOffIcon,
+  BookmarkIcon,
+  BookmarkAddIcon,
+  ExportTableIcon,
+  DownloadIcon,
+  VisibilityIcon,
+  RadioDeselectedIcon,
+  RadioSelectedIcon,
+  PointIcon,
+  SelectUniqueIcon,
+  SaveIcon,
+};
+
+export const AllIcons: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px', padding: '20px' }}>
+      {Object.entries(iconComponents).map(([name, Icon]) => (
+        <div key={name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
+          <Icon />
+          <span style={{ fontSize: '12px' }}>{name}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/styles/global.css

@@ -0,0 +1,142 @@
+:root {
+  --text-headline1-size: 96px;
+  --text-headline1-weight: 300;
+  --text-headline1-height: 112px;
+  --text-headline1-letter: -1.5px;
+
+  --text-headline2-size: 60px;
+  --text-headline2-weight: 300;
+  --text-headline2-height: 72px;
+  --text-headline2-letter: -0.5px;
+
+  --text-headline3-size: 48px;
+  --text-headline3-weight: 400;
+  --text-headline3-height: 56px;
+  --text-headline3-letter: normal;
+
+  --text-headline4-size: 34px;
+  --text-headline4-weight: 400;
+  --text-headline4-height: 36px;
+  --text-headline4-letter: normal;
+
+  --text-headline5-size: 24px;
+  --text-headline5-weight: 400;
+  --text-headline5-height: 24px;
+  --text-headline5-letter: 0.18px;
+
+  --text-headline6-size: 20px;
+  --text-headline6-weight: 500;
+  --text-headline6-height: 24px;
+  --text-headline6-letter: 0.15px;
+
+  --text-headline7-size: 20px;
+  --text-headline7-weight: 400;
+  --text-headline7-height: 24px;
+  --text-headline7-letter: 0.15px;
+
+  --text-subtitle1-size: 16px;
+  --text-subtitle1-weight: 400;
+  --text-subtitle1-height: 24px;
+  --text-subtitle1-letter: 0.15px;
+
+  --text-subtitle2-size: 14px;
+  --text-subtitle2-weight: 400;
+  --text-subtitle2-height: 24px;
+  --text-subtitle2-letter: 0.1px;
+
+  --text-subtitle3-size: 12px;
+  --text-subtitle3-weight: 400;
+  --text-subtitle3-height: 20px;
+  --text-subtitle3-letter: normal;
+
+  --text-body1-size: 16px;
+  --text-body1-weight: 400;
+  --text-body1-height: 24px;
+  --text-body1-letter: 0.5px;
+
+  --text-body2-size: 14px;
+  --text-body2-weight: 400;
+  --text-body2-height: 20px;
+  --text-body2-letter: 0.25px;
+
+  --text-body3-size: 12px;
+  --text-body3-weight: 300;
+  --text-body3-height: 20px;
+  --text-body3-letter: normal;
+
+  --text-button-size: 14px;
+  --text-button-weight: 500;
+  --text-button-height: 20px;
+  --text-button-letter: 0.1px;
+
+  --text-caption-size: 12px;
+  --text-caption-weight: 300;
+  --text-caption-height: 16px;
+  --text-caption-letter: 0.4px;
+
+  --text-caption2-size: 10px;
+  --text-caption2-weight: 300;
+  --text-caption2-height: 12px;
+  --text-caption2-letter: normal;
+
+  --text-double-caption-size: 10px;
+  --text-double-caption-weight: 400;
+  --text-double-caption-height: 12px;
+  --text-double-caption-letter: 0.4px;
+
+  --text-overline-size: 10px;
+  --text-overline-weight: 500;
+  --text-overline-height: 12px;
+  --text-overline-letter: 1.5px;
+
+  --text-label-size: 12px;
+  --text-label-weight: 400;
+  --text-label-height: 12px;
+  --text-label-letter: normal;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input[type='password']::-ms-reveal {
+  display: none;
+  height: 100%;
+  opacity: 1;
+}
+
+.styledScroll {
+  margin-right: -16px !important;
+  margin-bottom: -16px !important;
+  overflow: scroll;
+}
+
+/* общая зона скроллбара */
+.styledScroll::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 12px;
+}
+
+/* зона перетаскивания */
+.styledScroll::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 12px;
+}
+
+/* уголок между горизонтальным и вертикальным скроллбарами */
+.styledScroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* зона трека */
+.styledScroll::-webkit-scrollbar-track {
+  background-color: transparent;
+  background-clip: content-box;
+  border: 4px solid transparent;
+  border-radius: 12px;
+}

package/src/styles/localGlobal.css

@@ -0,0 +1,20 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: var(--theme-text-primary);
+  background-color: var(--theme-surface-layout);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}
+
+body {
+  font-family: Roboto, sans-serif;
+  font-size: var(--text-body2-size);
+  font-weight: var(--text-body2-weight);
+  line-height: var(--text-body2-height);
+  letter-spacing: var(--text-body2-letter);
+}

package/src/styles/themes/dark.css

@@ -0,0 +1,132 @@
+:root {
+  --theme-surface-layout: #373737;
+  --theme-surface-panel: #424242;
+  --theme-surface-primary: #2b2b2b;
+  --theme-surface-modal: #373737;
+  --theme-surface-dropdown: #515151;
+  --theme-surface-overlay-1: rgba(255, 255, 255, 0.08);
+  --theme-surface-overlay-2: rgba(0, 0, 0, 0.12);
+
+  --theme-legend-background: rgba(0, 0, 0, 0.12);
+
+  --theme-modal-shadow-background: rgba(81, 81, 81, 0.5);
+  --theme-modal-background: #373737;
+
+  --theme-divider: rgba(255, 255, 255, 0.24);
+
+  --theme-text-primary: rgba(255, 255, 255, 0.87);
+  --theme-text-secondary: rgba(255, 255, 255, 0.64);
+  --theme-text-inactive: rgba(255, 255, 255, 0.32);
+  --theme-text-button-primary: #fcfcff;
+  --theme-text-button-invert: rgba(0, 0, 0, 0.72);
+
+  --theme-icon-primary: rgba(255, 255, 255, 0.64);
+  --theme-icon-secondary: rgba(255, 255, 255, 0.32);
+  --theme-icon-hover: rgba(255, 255, 255, 0.12);
+  --theme-icon-hover-on-selected: rgba(255, 255, 255, 0.24);
+
+  --theme-accent: #7bd3f6;
+
+  --theme-success: #4caf50;
+  --theme-warning: #ff9800;
+  --theme-info: #03a9f4;
+  --theme-error: #ef5350;
+  --theme-focus: #7bd3f6;
+
+  --theme-table-background: #424242;
+  --theme-table-header: #515151;
+  --theme-table-even-row: #494949;
+  --theme-table-hover-row: #494949;
+  --theme-table-selected-row: rgba(3, 169, 244, 0.08);
+  --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
+  --theme-table-success: rgba(76, 175, 80, 0.08);
+  --theme-table-error: rgba(239, 83, 80, 0.08);
+
+  --theme-tooltip-background: rgba(40, 40, 40, 0.9);
+
+  --theme-alert-default-color: rgba(255, 255, 255, 0.87);
+  --theme-alert-default-background: #6d6d6d;
+  --theme-alert-success-color: #1e4620;
+  --theme-alert-success-background: #edf7ed;
+  --theme-alert-warning-color: #663c00;
+  --theme-alert-warning-background: #fff4e5;
+  --theme-alert-error-color: #5f2120;
+  --theme-alert-error-background: #fdeded;
+  --theme-alert-info-color: #014361;
+  --theme-alert-info-background: #e5f6fd;
+
+  --theme-grey-300: #e0e0e0;
+  --theme-grey-400: #bdbdbd;
+  --theme-grey-500: #9e9e9e;
+  --theme-grey-600: #757575;
+  --theme-grey-700: #616161;
+
+  --theme-overlay-4: rgba(123, 211, 246, 0.04);
+  --theme-overlay-8: rgba(123, 211, 246, 0.08);
+  --theme-overlay-10: rgba(123, 211, 246, 0.1);
+  --theme-overlay-12: rgba(123, 211, 246, 0.12);
+
+  --theme-button-elevated: #424242;
+  --theme-button-elevated-subtle: rgba(123, 211, 246, 0.12);
+  --theme-button-tonal: #435864;
+  --theme-button-tonal-subtle: rgba(123, 211, 246, 0.12);
+  --theme-button-tonal-text: #def2fe;
+  --theme-button-outlined-border: #9e9e9e;
+  --theme-button-filled-focus: #aee6fc;
+  --theme-button-filled-pressed: #4ac4f6;
+  --theme-button-filled-hover-layer: transparent;
+  --theme-button-filled-focus-layer: transparent;
+  --theme-button-filled-pressed-layer: transparent;
+  --theme-button-state-hover: rgba(123, 211, 246, 0.08);
+  --theme-button-state-focus: rgba(123, 211, 246, 0.12);
+  --theme-button-state-pressed: rgba(123, 211, 246, 0.12);
+
+  --theme-input-filled: rgba(255, 255, 255, 0.08);
+  --theme-input-filled-hover: rgba(255, 255, 255, 0.24);
+  --theme-input-filled-focus: rgba(255, 255, 255, 0.16);
+  --theme-input-filled-black: rgba(0, 0, 0, 0.12);
+  --theme-input-filled-black-border: rgba(255, 255, 255, 0.12);
+  --theme-input-filled-black-border-hover: rgba(255, 255, 255, 0.24);
+  --theme-input-filled-black-error-overlay: rgba(239, 83, 80, 0.02);
+  --theme-input-label: rgba(255, 255, 255, 0.56);
+
+  --theme-input-border: rgba(255, 255, 255, 0.4);
+  --theme-input-border-hover: rgba(255, 255, 255, 0.8);
+
+  --theme-selection-border: rgba(255, 255, 255, 0.6);
+  --theme-selection-border-disabled: rgba(255, 255, 255, 0.38);
+  --theme-selection-hover: rgba(255, 255, 255, 0.04);
+  --theme-selection-focused: rgba(255, 255, 255, 0.12);
+  --theme-selection-pressed: rgba(255, 255, 255, 0.1);
+  --theme-selection-selected-hover: rgba(255, 255, 255, 0.04);
+  --theme-selection-selected-focused: rgba(255, 255, 255, 0.12);
+  --theme-selection-selected-pressed: rgba(255, 255, 255, 0.1);
+
+  --theme-date-range: rgba(255, 255, 255, 0.12);
+
+  --theme-thumb: rgba(255, 255, 255, 0.16);
+
+  --theme-chip-accent-bg: rgba(3, 169, 244, 0.08);
+  --theme-chip-accent-hover: rgba(3, 169, 244, 0.16);
+  --theme-chip-accent-focus: rgba(3, 169, 244, 0.24);
+  --theme-chip-accent-active: rgba(3, 169, 244, 0.16);
+
+  --theme-chip-subtle-bg: rgba(255, 255, 255, 0.12);
+  --theme-chip-subtle-hover: rgba(255, 255, 255, 0.24);
+  --theme-chip-subtle-focus: rgba(255, 255, 255, 0.32);
+  --theme-chip-subtle-disabled-bg: rgba(255, 255, 255, 0.16);
+
+  --theme-input-chip-bg: var(--theme-chip-subtle-bg);
+  --theme-input-chip-hover: var(--theme-chip-subtle-hover);
+  --theme-input-chip-focus: var(--theme-chip-subtle-focus);
+  --theme-input-chip-disabled-bg: var(--theme-chip-subtle-disabled-bg);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--theme-text-inactive);
+}
+
+.styledScroll::-webkit-scrollbar-thumb {
+  background-color: var(--theme-thumb);
+}

package/src/styles/themes/darkBlue.css

@@ -0,0 +1,132 @@
+:root {
+  --theme-surface-layout: #0f161a;
+  --theme-surface-panel: #14212e;
+  --theme-surface-primary: rgba(255, 255, 255, 0.08);
+  --theme-surface-modal: #14212e;
+  --theme-surface-dropdown: #183043;
+  --theme-surface-overlay-1: rgba(255, 255, 255, 0.08);
+  --theme-surface-overlay-2: rgba(255, 255, 255, 0.04);
+
+  --theme-legend-background: rgba(0, 0, 0, 0.12);
+
+  --theme-modal-shadow-background: rgba(81, 81, 81, 0.5);
+  --theme-modal-background: #14212e;
+
+  --theme-divider: rgba(255, 255, 255, 0.12);
+
+  --theme-text-primary: rgba(255, 255, 255, 0.87);
+  --theme-text-secondary: rgba(255, 255, 255, 0.64);
+  --theme-text-inactive: rgba(255, 255, 255, 0.32);
+  --theme-text-button-primary: #fcfcff;
+  --theme-text-button-invert: rgba(0, 0, 0, 0.72);
+
+  --theme-icon-primary: rgba(255, 255, 255, 0.64);
+  --theme-icon-secondary: rgba(255, 255, 255, 0.32);
+  --theme-icon-hover: rgba(255, 255, 255, 0.12);
+  --theme-icon-hover-on-selected: rgba(255, 255, 255, 0.12);
+
+  --theme-accent: #7bd3f6;
+
+  --theme-success: #4caf50;
+  --theme-warning: #ff9800;
+  --theme-info: #03a9f4;
+  --theme-error: #ef5350;
+  --theme-focus: #7bd3f6;
+
+  --theme-table-background: #14212e;
+  --theme-table-header: #28323e;
+  --theme-table-even-row: #1f2a36;
+  --theme-table-hover-row: #1f2a36;
+  --theme-table-selected-row: rgba(3, 169, 244, 0.08);
+  --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
+  --theme-table-success: rgba(76, 175, 80, 0.08);
+  --theme-table-error: rgba(239, 83, 80, 0.08);
+
+  --theme-tooltip-background: rgba(40, 40, 40, 0.9);
+
+  --theme-alert-default-color: rgba(255, 255, 255, 0.87);
+  --theme-alert-default-background: #6d6d6d;
+  --theme-alert-success-color: #1e4620;
+  --theme-alert-success-background: #edf7ed;
+  --theme-alert-warning-color: #663c00;
+  --theme-alert-warning-background: #fff4e5;
+  --theme-alert-error-color: #5f2120;
+  --theme-alert-error-background: #fdeded;
+  --theme-alert-info-color: #014361;
+  --theme-alert-info-background: #e5f6fd;
+
+  --theme-grey-300: #e0e0e0;
+  --theme-grey-400: #bdbdbd;
+  --theme-grey-500: #9e9e9e;
+  --theme-grey-600: #757575;
+  --theme-grey-700: #616161;
+
+  --theme-overlay-4: rgba(123, 211, 246, 0.04);
+  --theme-overlay-8: rgba(123, 211, 246, 0.08);
+  --theme-overlay-10: rgba(123, 211, 246, 0.1);
+  --theme-overlay-12: rgba(123, 211, 246, 0.12);
+
+  --theme-button-elevated: #14212e;
+  --theme-button-elevated-subtle: rgba(123, 211, 246, 0.12);
+  --theme-button-tonal: #435864;
+  --theme-button-tonal-subtle: rgba(123, 211, 246, 0.12);
+  --theme-button-tonal-text: #def2fe;
+  --theme-button-outlined-border: #9e9e9e;
+  --theme-button-filled-focus: #aee6fc;
+  --theme-button-filled-pressed: #4ac4f6;
+  --theme-button-filled-hover-layer: transparent;
+  --theme-button-filled-focus-layer: transparent;
+  --theme-button-filled-pressed-layer: transparent;
+  --theme-button-state-hover: rgba(123, 211, 246, 0.08);
+  --theme-button-state-focus: rgba(123, 211, 246, 0.12);
+  --theme-button-state-pressed: rgba(123, 211, 246, 0.12);
+
+  --theme-input-filled: rgba(255, 255, 255, 0.08);
+  --theme-input-filled-hover: rgba(255, 255, 255, 0.24);
+  --theme-input-filled-focus: rgba(255, 255, 255, 0.16);
+  --theme-input-filled-black: rgba(0, 0, 0, 0.12);
+  --theme-input-filled-black-border: rgba(255, 255, 255, 0.12);
+  --theme-input-filled-black-border-hover: rgba(255, 255, 255, 0.24);
+  --theme-input-filled-black-error-overlay: rgba(239, 83, 80, 0.02);
+  --theme-input-label: rgba(255, 255, 255, 0.56);
+
+  --theme-input-border: rgba(255, 255, 255, 0.4);
+  --theme-input-border-hover: rgba(255, 255, 255, 0.8);
+
+  --theme-selection-border: rgba(255, 255, 255, 0.6);
+  --theme-selection-border-disabled: rgba(255, 255, 255, 0.38);
+  --theme-selection-hover: rgba(255, 255, 255, 0.04);
+  --theme-selection-focused: rgba(255, 255, 255, 0.12);
+  --theme-selection-pressed: rgba(255, 255, 255, 0.1);
+  --theme-selection-selected-hover: rgba(255, 255, 255, 0.04);
+  --theme-selection-selected-focused: rgba(255, 255, 255, 0.12);
+  --theme-selection-selected-pressed: rgba(255, 255, 255, 0.1);
+
+  --theme-date-range: rgba(255, 255, 255, 0.12);
+
+  --theme-thumb: rgba(255, 255, 255, 0.16);
+
+  --theme-chip-accent-bg: rgba(3, 169, 244, 0.08);
+  --theme-chip-accent-hover: rgba(3, 169, 244, 0.16);
+  --theme-chip-accent-focus: rgba(3, 169, 244, 0.24);
+  --theme-chip-accent-active: rgba(3, 169, 244, 0.16);
+
+  --theme-chip-subtle-bg: rgba(255, 255, 255, 0.12);
+  --theme-chip-subtle-hover: rgba(255, 255, 255, 0.24);
+  --theme-chip-subtle-focus: rgba(255, 255, 255, 0.32);
+  --theme-chip-subtle-disabled-bg: rgba(255, 255, 255, 0.16);
+
+  --theme-input-chip-bg: var(--theme-chip-subtle-bg);
+  --theme-input-chip-hover: var(--theme-chip-subtle-hover);
+  --theme-input-chip-focus: var(--theme-chip-subtle-focus);
+  --theme-input-chip-disabled-bg: var(--theme-chip-subtle-disabled-bg);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--theme-text-inactive);
+}
+
+.styledScroll::-webkit-scrollbar-thumb {
+  background-color: var(--theme-thumb);
+}

package/src/styles/themes/light.css

@@ -0,0 +1,132 @@
+:root {
+  --theme-surface-layout: #f8f8f8;
+  --theme-surface-panel: #ffffff;
+  --theme-surface-primary: #ffffff;
+  --theme-surface-modal: #ffffff;
+  --theme-surface-dropdown: #ffffff;
+  --theme-surface-overlay-1: rgba(0, 0, 0, 0.04);
+  --theme-surface-overlay-2: rgba(0, 0, 0, 0.04);
+
+  --theme-legend-background: rgba(0, 0, 0, 0.12);
+
+  --theme-modal-shadow-background: rgba(255, 255, 255, 0.5);
+  --theme-modal-background: #ffffff;
+
+  --theme-divider: rgba(0, 0, 0, 0.12);
+
+  --theme-text-primary: rgba(0, 0, 0, 0.87);
+  --theme-text-secondary: rgba(0, 0, 0, 0.64);
+  --theme-text-inactive: rgba(0, 0, 0, 0.32);
+  --theme-text-button-primary: rgba(0, 0, 0, 0.72);
+  --theme-text-button-invert: #ffffff;
+
+  --theme-icon-primary: rgba(0, 0, 0, 0.64);
+  --theme-icon-secondary: rgba(0, 0, 0, 0.32);
+  --theme-icon-hover: #eeeeee;
+  --theme-icon-hover-on-selected: #e0e0e0;
+
+  --theme-accent: #03a9f4;
+
+  --theme-success: #4caf50;
+  --theme-warning: #ff9800;
+  --theme-info: #03a9f4;
+  --theme-error: #ef5350;
+  --theme-focus: #03a9f4;
+
+  --theme-table-background: #ffffff;
+  --theme-table-header: #f5f5f5;
+  --theme-table-even-row: #f5f5f5;
+  --theme-table-hover-row: #f5f5f5;
+  --theme-table-selected-row: rgba(3, 169, 244, 0.08);
+  --theme-table-hover-selected-row: rgba(3, 169, 244, 0.16);
+  --theme-table-success: rgba(76, 175, 80, 0.08);
+  --theme-table-error: rgba(239, 83, 80, 0.08);
+
+  --theme-tooltip-background: rgba(215, 215, 215, 0.9);
+
+  --theme-alert-default-color: rgba(0, 0, 0, 0.87);
+  --theme-alert-default-background: #ffffff;
+  --theme-alert-success-color: #1e4620;
+  --theme-alert-success-background: #edf7ed;
+  --theme-alert-warning-color: #663c00;
+  --theme-alert-warning-background: #fff4e5;
+  --theme-alert-error-color: #5f2120;
+  --theme-alert-error-background: ##fdeded;
+  --theme-alert-info-color: #014361;
+  --theme-alert-info-background: #e5f6fd;
+
+  --theme-grey-300: #e0e0e0;
+  --theme-grey-400: #bdbdbd;
+  --theme-grey-500: #9e9e9e;
+  --theme-grey-600: #757575;
+  --theme-grey-700: #616161;
+
+  --theme-overlay-4: rgba(255, 255, 255, 0.04);
+  --theme-overlay-8: rgba(255, 255, 255, 0.08);
+  --theme-overlay-10: rgba(255, 255, 255, 0.1);
+  --theme-overlay-12: rgba(255, 255, 255, 0.12);
+
+  --theme-button-elevated: rgba(3, 169, 244, 0.04);
+  --theme-button-elevated-subtle: rgba(3, 169, 244, 0.04);
+  --theme-button-tonal: rgba(3, 169, 244, 0.16);
+  --theme-button-tonal-subtle: rgba(3, 169, 244, 0.16);
+  --theme-button-tonal-text: rgba(0, 0, 0, 0.72);
+  --theme-button-outlined-border: #757575;
+  --theme-button-filled-focus: #03a9f4;
+  --theme-button-filled-pressed: #03a9f4;
+  --theme-button-filled-hover-layer: rgba(255, 255, 255, 0.08);
+  --theme-button-filled-focus-layer: rgba(255, 255, 255, 0.12);
+  --theme-button-filled-pressed-layer: rgba(255, 255, 255, 0.12);
+  --theme-button-state-hover: rgba(3, 169, 244, 0.08);
+  --theme-button-state-focus: rgba(3, 169, 244, 0.12);
+  --theme-button-state-pressed: rgba(3, 169, 244, 0.12);
+
+  --theme-input-filled: #f5f5f5;
+  --theme-input-filled-hover: #e0e0e0;
+  --theme-input-filled-focus: #eeeeee;
+  --theme-input-filled-black: rgba(0, 0, 0, 0.12);
+  --theme-input-filled-black-border: rgba(0, 0, 0, 0.12);
+  --theme-input-filled-black-border-hover: rgba(0, 0, 0, 0.24);
+  --theme-input-filled-black-error-overlay: rgba(239, 83, 80, 0.02);
+  --theme-input-label: rgba(0, 0, 0, 0.56);
+
+  --theme-input-border: rgba(0, 0, 0, 0.4);
+  --theme-input-border-hover: rgba(0, 0, 0, 0.8);
+
+  --theme-selection-border: rgba(0, 0, 0, 0.6);
+  --theme-selection-border-disabled: rgba(0, 0, 0, 0.32);
+  --theme-selection-hover: rgba(0, 0, 0, 0.04);
+  --theme-selection-focused: rgba(0, 0, 0, 0.12);
+  --theme-selection-pressed: rgba(0, 0, 0, 0.1);
+  --theme-selection-selected-hover: rgba(3, 169, 244, 0.04);
+  --theme-selection-selected-focused: rgba(3, 169, 244, 0.12);
+  --theme-selection-selected-pressed: rgba(3, 169, 244, 0.1);
+
+  --theme-date-range: rgba(3, 169, 244, 0.12);
+
+  --theme-thumb: rgba(0, 0, 0, 0.16);
+
+  --theme-chip-accent-bg: rgba(3, 169, 244, 0.08);
+  --theme-chip-accent-hover: rgba(3, 169, 244, 0.16);
+  --theme-chip-accent-focus: rgba(3, 169, 244, 0.24);
+  --theme-chip-accent-active: rgba(3, 169, 244, 0.16);
+
+  --theme-chip-subtle-bg: rgba(0, 0, 0, 0.08);
+  --theme-chip-subtle-hover: rgba(0, 0, 0, 0.12);
+  --theme-chip-subtle-focus: rgba(0, 0, 0, 0.16);
+  --theme-chip-subtle-disabled-bg: rgba(0, 0, 0, 0.08);
+
+  --theme-input-chip-bg: var(--theme-chip-accent-bg);
+  --theme-input-chip-hover: var(--theme-chip-accent-hover);
+  --theme-input-chip-focus: var(--theme-chip-accent-focus);
+  --theme-input-chip-disabled-bg: var(--theme-chip-subtle-disabled-bg);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--theme-text-inactive);
+}
+
+.styledScroll::-webkit-scrollbar-thumb {
+  background-color: var(--theme-thumb);
+}