@alfalab/core-components 29.0.0-beta.1 → 29.1.0

package/themes/dist/dark.css

@@ -0,0 +1,258 @@
+:root {
+    --color-light-bg-accent: var(--color-dark-bg-accent);
+    --color-light-bg-attention-muted: var(--color-dark-bg-attention-muted);
+    --color-light-bg-info: var(--color-dark-bg-info);
+    --color-light-bg-negative-muted: var(--color-dark-bg-negative-muted);
+    --color-light-bg-opaque: var(--color-dark-bg-opaque);
+    --color-light-bg-overlay: var(--color-dark-bg-overlay);
+    --color-light-bg-positive-muted: var(--color-dark-bg-positive-muted);
+    --color-light-bg-primary: var(--color-dark-bg-primary);
+    --color-light-bg-primary-inverted: var(--color-dark-bg-primary-inverted);
+    --color-light-bg-quaternary: var(--color-dark-bg-quaternary);
+    --color-light-bg-quaternary-inverted: var(--color-dark-bg-quaternary-inverted);
+    --color-light-bg-secondary: var(--color-dark-bg-secondary);
+    --color-light-bg-secondary-inverted: var(--color-dark-bg-secondary-inverted);
+    --color-light-bg-tertiary: var(--color-dark-bg-tertiary);
+    --color-light-bg-tertiary-inverted: var(--color-dark-bg-tertiary-inverted);
+    --color-light-border-accent: var(--color-dark-border-accent);
+    --color-light-border-key: var(--color-dark-border-key);
+    --color-light-border-key-inverted: var(--color-dark-border-key-inverted);
+    --color-light-border-link: var(--color-dark-border-link);
+    --color-light-border-primary: var(--color-dark-border-primary);
+    --color-light-border-primary-inverted: var(--color-dark-border-primary-inverted);
+    --color-light-border-secondary: var(--color-dark-border-secondary);
+    --color-light-border-secondary-inverted: var(--color-dark-border-secondary-inverted);
+    --color-light-border-tertiary: var(--color-dark-border-tertiary);
+    --color-light-border-tertiary-inverted: var(--color-dark-border-tertiary-inverted);
+    --color-light-border-underline: var(--color-dark-border-underline);
+    --color-light-border-underline-inverted: var(--color-dark-border-underline-inverted);
+    --color-light-graphic-accent: var(--color-dark-graphic-accent);
+    --color-light-graphic-attention: var(--color-dark-graphic-attention);
+    --color-light-graphic-link: var(--color-dark-graphic-link);
+    --color-light-graphic-negative: var(--color-dark-graphic-negative);
+    --color-light-graphic-positive: var(--color-dark-graphic-positive);
+    --color-light-graphic-primary: var(--color-dark-graphic-primary);
+    --color-light-graphic-primary-inverted: var(--color-dark-graphic-primary-inverted);
+    --color-light-graphic-quaternary: var(--color-dark-graphic-quaternary);
+    --color-light-graphic-quaternary-inverted: var(--color-dark-graphic-quaternary-inverted);
+    --color-light-graphic-secondary: var(--color-dark-graphic-secondary);
+    --color-light-graphic-secondary-inverted: var(--color-dark-graphic-secondary-inverted);
+    --color-light-graphic-tertiary: var(--color-dark-graphic-tertiary);
+    --color-light-graphic-tertiary-inverted: var(--color-dark-graphic-tertiary-inverted);
+    --color-light-specialbg-component: var(--color-dark-specialbg-component);
+    --color-light-specialbg-component-inverted: var(--color-dark-specialbg-component-inverted);
+    --color-light-specialbg-nulled: var(--color-dark-specialbg-nulled);
+    --color-light-specialbg-overlay-fallback: var(--color-dark-specialbg-overlay-fallback);
+    --color-light-specialbg-primary-grouped: var(--color-dark-specialbg-primary-grouped);
+    --color-light-specialbg-secondary-grouped: var(--color-dark-specialbg-secondary-grouped);
+    --color-light-specialbg-tertiary-grouped: var(--color-dark-specialbg-tertiary-grouped);
+    --color-light-text-accent: var(--color-dark-text-accent);
+    --color-light-text-attention: var(--color-dark-text-attention);
+    --color-light-text-disabled: var(--color-dark-text-disabled);
+    --color-light-text-disabled-inverted: var(--color-dark-text-disabled-inverted);
+    --color-light-text-disabled-inverted-transparent: var(
+        --color-dark-text-disabled-inverted-transparent
+    );
+    --color-light-text-disabled-transparent: var(--color-dark-text-disabled-transparent);
+    --color-light-text-link: var(--color-dark-text-link);
+    --color-light-text-negative: var(--color-dark-text-negative);
+    --color-light-text-positive: var(--color-dark-text-positive);
+    --color-light-text-primary: var(--color-dark-text-primary);
+    --color-light-text-primary-inverted: var(--color-dark-text-primary-inverted);
+    --color-light-text-secondary: var(--color-dark-text-secondary);
+    --color-light-text-secondary-inverted: var(--color-dark-text-secondary-inverted);
+    --color-light-text-secondary-inverted-transparent: var(
+        --color-dark-text-secondary-inverted-transparent
+    );
+    --color-light-text-secondary-transparent: var(--color-dark-text-secondary-transparent);
+    --color-light-text-tertiary: var(--color-dark-text-tertiary);
+    --color-light-text-tertiary-inverted: var(--color-dark-text-tertiary-inverted);
+    --color-light-text-tertiary-inverted-transparent: var(
+        --color-dark-text-tertiary-inverted-transparent
+    );
+    --color-light-text-tertiary-transparent: var(--color-dark-text-tertiary-transparent);
+    --color-light-bg-neutral: var(--color-dark-bg-neutral);
+    --color-light-graphic-neutral: var(--color-dark-graphic-neutral);
+    --color-light-bg-accent-alpha-30: var(--color-dark-bg-accent-alpha-30);
+    --color-light-bg-accent-tint-15: var(--color-dark-bg-accent-shade-15);
+    --color-light-bg-accent-tint-20: var(--color-dark-bg-accent-shade-20);
+    --color-light-bg-accent-shade-7: var(--color-dark-bg-accent-tint-7);
+    --color-light-bg-accent-shade-10: var(--color-dark-bg-accent-tint-10);
+    --color-light-bg-accent-shade-15: var(--color-dark-bg-accent-tint-15);
+    --color-light-bg-accent-shade-30: var(--color-dark-bg-accent-tint-30);
+    --color-light-bg-primary-alpha-4: var(--color-dark-bg-primary-alpha-4);
+    --color-light-bg-primary-alpha-8: var(--color-dark-bg-primary-alpha-8);
+    --color-light-bg-primary-alpha-12: var(--color-dark-bg-primary-alpha-12);
+    --color-light-bg-primary-alpha-15: var(--color-dark-bg-primary-alpha-15);
+    --color-light-bg-primary-alpha-16: var(--color-dark-bg-primary-alpha-16);
+    --color-light-bg-primary-alpha-20: var(--color-dark-bg-primary-alpha-20);
+    --color-light-bg-primary-alpha-32: var(--color-dark-bg-primary-alpha-32);
+    --color-light-bg-primary-alpha-37: var(--color-dark-bg-primary-alpha-37);
+    --color-light-bg-primary-alpha-40: var(--color-dark-bg-primary-alpha-40);
+    --color-light-bg-primary-inverted-alpha-3: var(--color-dark-bg-primary-inverted-alpha-3);
+    --color-light-bg-primary-inverted-alpha-4: var(--color-dark-bg-primary-inverted-alpha-4);
+    --color-light-bg-primary-inverted-alpha-5: var(--color-dark-bg-primary-inverted-alpha-5);
+    --color-light-bg-primary-inverted-alpha-7: var(--color-dark-bg-primary-inverted-alpha-7);
+    --color-light-bg-primary-inverted-alpha-8: var(--color-dark-bg-primary-inverted-alpha-8);
+    --color-light-bg-primary-inverted-alpha-10: var(--color-dark-bg-primary-inverted-alpha-10);
+    --color-light-bg-primary-inverted-alpha-12: var(--color-dark-bg-primary-inverted-alpha-12);
+    --color-light-bg-primary-inverted-alpha-15: var(--color-dark-bg-primary-inverted-alpha-15);
+    --color-light-bg-primary-inverted-alpha-16: var(--color-dark-bg-primary-inverted-alpha-16);
+    --color-light-bg-primary-inverted-alpha-20: var(--color-dark-bg-primary-inverted-alpha-20);
+    --color-light-bg-primary-inverted-alpha-24: var(--color-dark-bg-primary-inverted-alpha-24);
+    --color-light-bg-primary-inverted-alpha-30: var(--color-dark-bg-primary-inverted-alpha-30);
+    --color-light-bg-primary-inverted-alpha-32: var(--color-dark-bg-primary-inverted-alpha-32);
+    --color-light-bg-primary-inverted-alpha-40: var(--color-dark-bg-primary-inverted-alpha-40);
+    --color-light-bg-primary-inverted-alpha-50: var(--color-dark-bg-primary-inverted-alpha-50);
+    --color-light-bg-primary-inverted-tint-15: var(--color-dark-bg-primary-inverted-shade-15);
+    --color-light-bg-primary-inverted-tint-20: var(--color-dark-bg-primary-inverted-shade-20);
+    --color-light-bg-quaternary-alpha-30: var(--color-dark-bg-quaternary-alpha-30);
+    --color-light-bg-quaternary-shade-7: var(--color-dark-bg-quaternary-tint-7);
+    --color-light-bg-quaternary-shade-10: var(--color-dark-bg-quaternary-tint-10);
+    --color-light-bg-quaternary-shade-15: var(--color-dark-bg-quaternary-tint-15);
+    --color-light-bg-quaternary-shade-30: var(--color-dark-bg-quaternary-tint-30);
+    --color-light-bg-quaternary-inverted-alpha-30: var(
+        --color-dark-bg-quaternary-inverted-alpha-30
+    );
+    --color-light-bg-quaternary-inverted-tint-15: var(--color-dark-bg-quaternary-inverted-shade-15);
+    --color-light-bg-quaternary-inverted-tint-20: var(--color-dark-bg-quaternary-inverted-shade-20);
+    --color-light-bg-secondary-alpha-30: var(--color-dark-bg-secondary-alpha-30);
+    --color-light-bg-secondary-tint-15: var(--color-dark-bg-secondary-shade-15);
+    --color-light-bg-secondary-tint-20: var(--color-dark-bg-secondary-shade-20);
+    --color-light-bg-secondary-shade-7: var(--color-dark-bg-secondary-tint-7);
+    --color-light-bg-secondary-shade-15: var(--color-dark-bg-secondary-tint-15);
+    --color-light-bg-secondary-inverted-alpha-30: var(--color-dark-bg-secondary-inverted-alpha-30);
+    --color-light-bg-secondary-inverted-tint-15: var(--color-dark-bg-secondary-inverted-shade-15);
+    --color-light-bg-secondary-inverted-tint-20: var(--color-dark-bg-secondary-inverted-shade-20);
+    --color-light-bg-secondary-inverted-shade-7: var(--color-dark-bg-secondary-inverted-tint-7);
+    --color-light-bg-secondary-inverted-shade-15: var(--color-dark-bg-secondary-inverted-tint-15);
+    --color-light-bg-tertiary-shade-7: var(--color-dark-bg-tertiary-tint-7);
+    --color-light-border-underline-alpha-30: var(--color-dark-border-underline-alpha-30);
+    --color-light-border-underline-inverted-alpha-30: var(
+        --color-dark-border-underline-inverted-alpha-30
+    );
+    --color-light-graphic-accent-alpha-30: var(--color-dark-graphic-accent-alpha-30);
+    --color-light-graphic-accent-tint-15: var(--color-dark-graphic-accent-shade-15);
+    --color-light-graphic-accent-shade-7: var(--color-dark-graphic-accent-tint-7);
+    --color-light-graphic-accent-shade-10: var(--color-dark-graphic-accent-tint-10);
+    --color-light-graphic-accent-shade-15: var(--color-dark-graphic-accent-tint-15);
+    --color-light-graphic-accent-shade-30: var(--color-dark-graphic-accent-tint-30);
+    --color-light-graphic-negative-alpha-30: var(--color-dark-graphic-negative-alpha-30);
+    --color-light-graphic-negative-tint-20: var(--color-dark-graphic-negative-shade-20);
+    --color-light-graphic-negative-tint-30: var(--color-dark-graphic-negative-shade-30);
+    --color-light-graphic-negative-shade-7: var(--color-dark-graphic-negative-tint-7);
+    --color-light-graphic-negative-shade-15: var(--color-dark-graphic-negative-tint-15);
+    --color-light-graphic-negative-shade-30: var(--color-dark-graphic-negative-tint-30);
+    --color-light-graphic-positive-shade-10: var(--color-dark-graphic-positive-tint-10);
+    --color-light-graphic-positive-shade-30: var(--color-dark-graphic-positive-tint-30);
+    --color-light-graphic-primary-alpha-30: var(--color-dark-graphic-primary-alpha-30);
+    --color-light-graphic-primary-alpha-40: var(--color-dark-graphic-primary-alpha-40);
+    --color-light-graphic-primary-alpha-50: var(--color-dark-graphic-primary-alpha-50);
+    --color-light-graphic-primary-alpha-60: var(--color-dark-graphic-primary-alpha-60);
+    --color-light-graphic-primary-tint-15: var(--color-dark-graphic-primary-shade-15);
+    --color-light-graphic-primary-tint-20: var(--color-dark-graphic-primary-shade-20);
+    --color-light-graphic-primary-tint-30: var(--color-dark-graphic-primary-shade-30);
+    --color-light-graphic-primary-shade-10: var(--color-dark-graphic-primary-tint-10);
+    --color-light-graphic-primary-shade-30: var(--color-dark-graphic-primary-tint-30);
+    --color-light-graphic-primary-inverted-alpha-30: var(
+        --color-dark-graphic-primary-inverted-alpha-30
+    );
+    --color-light-graphic-primary-inverted-alpha-40: var(
+        --color-dark-graphic-primary-inverted-alpha-40
+    );
+    --color-light-graphic-primary-inverted-alpha-50: var(
+        --color-dark-graphic-primary-inverted-alpha-50
+    );
+    --color-light-graphic-primary-inverted-alpha-60: var(
+        --color-dark-graphic-primary-inverted-alpha-60
+    );
+    --color-light-graphic-primary-inverted-shade-7: var(
+        --color-dark-graphic-primary-inverted-tint-7
+    );
+    --color-light-graphic-primary-inverted-shade-10: var(
+        --color-dark-graphic-primary-inverted-tint-10
+    );
+    --color-light-graphic-primary-inverted-shade-15: var(
+        --color-dark-graphic-primary-inverted-tint-15
+    );
+    --color-light-graphic-primary-inverted-shade-30: var(
+        --color-dark-graphic-primary-inverted-tint-30
+    );
+    --color-light-graphic-quaternary-shade-10: var(--color-dark-graphic-quaternary-tint-10);
+    --color-light-graphic-secondary-alpha-30: var(--color-dark-graphic-secondary-alpha-30);
+    --color-light-graphic-secondary-shade-30: var(--color-dark-graphic-secondary-tint-30);
+    --color-light-graphic-secondary-shade-50: var(--color-dark-graphic-secondary-tint-50);
+    --color-light-graphic-secondary-inverted-alpha-30: var(
+        --color-dark-graphic-secondary-inverted-alpha-30
+    );
+    --color-light-graphic-secondary-inverted-tint-15: var(
+        --color-dark-graphic-secondary-inverted-shade-15
+    );
+    --color-light-graphic-secondary-inverted-tint-20: var(
+        --color-dark-graphic-secondary-inverted-shade-20
+    );
+    --color-light-graphic-secondary-inverted-shade-10: var(
+        --color-dark-graphic-secondary-inverted-tint-10
+    );
+    --color-light-graphic-secondary-inverted-shade-30: var(
+        --color-dark-graphic-secondary-inverted-tint-30
+    );
+    --color-light-graphic-tertiary-alpha-30: var(--color-dark-graphic-tertiary-alpha-30);
+    --color-light-graphic-tertiary-tint-15: var(--color-dark-graphic-tertiary-shade-15);
+    --color-light-graphic-tertiary-tint-20: var(--color-dark-graphic-tertiary-shade-20);
+    --color-light-graphic-tertiary-shade-7: var(--color-dark-graphic-tertiary-tint-7);
+    --color-light-graphic-tertiary-shade-15: var(--color-dark-graphic-tertiary-tint-15);
+    --color-light-graphic-tertiary-inverted-alpha-30: var(
+        --color-dark-graphic-tertiary-inverted-alpha-30
+    );
+    --color-light-graphic-tertiary-inverted-tint-15: var(
+        --color-dark-graphic-tertiary-inverted-shade-15
+    );
+    --color-light-graphic-tertiary-inverted-tint-20: var(
+        --color-dark-graphic-tertiary-inverted-shade-20
+    );
+    --color-light-specialbg-component-shade-7: var(--color-dark-specialbg-component-tint-7);
+    --color-light-specialbg-component-shade-10: var(--color-dark-specialbg-component-tint-10);
+    --color-light-specialbg-component-shade-15: var(--color-dark-specialbg-component-tint-15);
+    --color-light-specialbg-component-shade-30: var(--color-dark-specialbg-component-tint-30);
+    --color-light-specialbg-component-alpha-2: var(--color-dark-specialbg-component-alpha-2);
+    --color-light-specialbg-component-alpha-14: var(--color-dark-specialbg-component-alpha-14);
+    --color-light-specialbg-component-alpha-23: var(--color-dark-specialbg-component-alpha-23);
+    --color-light-specialbg-component-alpha-30: var(--color-dark-specialbg-component-alpha-30);
+    --color-light-specialbg-component-inverted-alpha-30: var(
+        --color-dark-specialbg-component-inverted-alpha-30
+    );
+    --color-light-specialbg-component-inverted-tint-15: var(
+        --color-dark-specialbg-component-inverted-shade-15
+    );
+    --color-light-specialbg-component-inverted-tint-20: var(
+        --color-dark-specialbg-component-inverted-shade-20
+    );
+    --color-light-text-link-tint-30: var(--color-dark-text-link-shade-30);
+    --color-light-text-link-tint-50: var(--color-dark-text-link-shade-50);
+    --color-light-text-link-shade-20: var(--color-dark-text-link-tint-20);
+    --color-light-text-link-shade-40: var(--color-dark-text-link-tint-40);
+    --color-light-text-primary-alpha-30: var(--color-dark-text-primary-alpha-30);
+    --color-light-text-primary-tint-30: var(--color-dark-text-primary-shade-30);
+    --color-light-text-primary-tint-50: var(--color-dark-text-primary-shade-50);
+    --color-light-text-primary-shade-20: var(--color-dark-text-primary-tint-20);
+    --color-light-text-primary-shade-40: var(--color-dark-text-primary-tint-40);
+    --color-light-text-primary-inverted-alpha-30: var(--color-dark-text-primary-inverted-alpha-30);
+    --color-light-text-primary-inverted-alpha-40: var(--color-dark-text-primary-inverted-alpha-40);
+    --color-light-text-primary-inverted-tint-20: var(--color-dark-text-primary-inverted-shade-20);
+    --color-light-text-primary-inverted-tint-30: var(--color-dark-text-primary-inverted-shade-30);
+    --color-light-text-primary-inverted-shade-7: var(--color-dark-text-primary-inverted-tint-7);
+    --color-light-text-primary-inverted-shade-15: var(--color-dark-text-primary-inverted-tint-15);
+    --color-light-text-primary-inverted-shade-30: var(--color-dark-text-primary-inverted-tint-30);
+    --color-light-text-primary-inverted-shade-50: var(--color-dark-text-primary-inverted-tint-50);
+    --color-light-text-secondary-tint-20: var(--color-dark-text-secondary-shade-20);
+    --color-light-text-secondary-tint-30: var(--color-dark-text-secondary-shade-30);
+    --color-light-text-secondary-shade-20: var(--color-dark-text-secondary-tint-20);
+    --color-light-text-secondary-shade-40: var(--color-dark-text-secondary-tint-40);
+    --color-light-text-secondary-inverted-tint-20: var(
+        --color-dark-text-secondary-inverted-shade-20
+    );
+    --color-light-text-secondary-inverted-tint-30: var(
+        --color-dark-text-secondary-inverted-shade-30
+    );
+}

package/themes/dist/dark.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export { _default as default };

package/themes/dist/dark.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var styles = require('!!css-loader!@alfalab/core-components/themes/dark.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+// eslint-disable-next-line import/no-webpack-loader-syntax
+var dark = styles__default['default'].toString();
+
+module.exports = dark;

package/themes/dist/dropzone/click.css

@@ -0,0 +1,4 @@
+:root {
+    --dropzone-active-cursor: pointer;
+    --dropzone-border-radius: var(--border-radius-m);
+}

package/themes/dist/esm/compiled/mobile-dark-bluetint.d.ts

@@ -0,0 +1,2 @@
+import styles from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
+export { styles as default };

package/themes/dist/esm/compiled/mobile-dark-bluetint.js

@@ -0,0 +1,4 @@
+import styles from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
+export { default } from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
+
+// eslint-disable-next-line import/no-webpack-loader-syntax

package/themes/dist/esm/dark.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export { _default as default };

package/themes/dist/esm/dark.js

@@ -0,0 +1,6 @@
+import styles from '!!css-loader!@alfalab/core-components/themes/dark.css';
+
+// eslint-disable-next-line import/no-webpack-loader-syntax
+var dark = styles.toString();
+
+export default dark;

package/themes/dist/esm/mixins/mobile.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export { _default as default };

package/themes/dist/esm/mixins/mobile.js

@@ -0,0 +1,6 @@
+import styles from '!!css-loader!@alfalab/core-components/themes/mixins/mobile.css';
+
+// eslint-disable-next-line import/no-webpack-loader-syntax
+var mobile = styles.toString();
+
+export default mobile;

package/themes/dist/filter-tag/mobile.css

@@ -0,0 +1,4 @@
+:root {
+    /* theme */
+    --filter-tag-separator-background-color-hover: var(--color-dark-border-underline);
+}

package/themes/dist/form-control/click.css

@@ -0,0 +1,31 @@
+:root {
+    /* theme */
+    --form-control-border-radius: var(--border-radius-s);
+    --form-control-border-bottom: 0;
+    --form-control-inverted-border-bottom: 0;
+    --form-control-bg-color: var(--color-light-bg-tertiary);
+    --form-control-inverted-bg-color: var(--color-light-bg-tertiary-inverted);
+
+    /* disabled */
+    --form-control-disabled-opacity: 0.5;
+    --form-control-disabled-border-bottom: 0;
+    --form-control-inverted-disabled-border-bottom: 0;
+    --form-control-disabled-bg-color: var(--color-light-bg-tertiary);
+    --form-control-inverted-disabled-bg-color: var(--color-light-bg-tertiary-inverted);
+
+    /* focus */
+    --form-control-focus-border-bottom: 0;
+    --form-control-inverted-focus-border-bottom: 0;
+    --form-control-focus-bg-color: var(--color-light-bg-tertiary);
+    --form-control-inverted-focus-bg-color: var(--color-light-bg-tertiary-inverted);
+    --form-control-hover-bg-color: var(--color-light-bg-tertiary);
+    --form-control-inverted-hover-bg-color: var(--color-light-bg-tertiary-inverted);
+
+    /* error */
+    --form-control-error-label-color: var(--color-light-text-negative);
+    --form-control-inverted-error-label-color: var(--color-light-text-accent);
+    --form-control-error-shadow: inset 0 0 0 1px var(--color-light-border-accent);
+    --form-control-inverted-error-shadow: inset 0 0 0 1px var(--color-light-border-accent);
+    --form-control-error-border-bottom: 0;
+    --form-control-inverted-error-border-bottom: 0;
+}

package/themes/dist/form-control/intranet.css

@@ -0,0 +1,34 @@
+:root {
+    /* theme */
+    --form-control-border-radius: var(--border-radius-l);
+    --form-control-border-bottom: 0;
+    --form-control-inverted-border-bottom: 0;
+    --form-control-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-bg-color: var(--color-light-bg-secondary-inverted);
+
+    /* disabled */
+    --form-control-disabled-opacity: 0.5;
+    --form-control-disabled-border-bottom: 0;
+    --form-control-inverted-disabled-border-bottom: 0;
+    --form-control-disabled-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-disabled-bg-color: var(--color-light-bg-secondary-inverted);
+
+    /* focus */
+    --form-control-focus-border-bottom: 0;
+    --form-control-inverted-focus-border-bottom: 0;
+    --form-control-focus-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-focus-bg-color: var(--color-light-bg-secondary-inverted);
+    --form-control-hover-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-hover-bg-color: var(--color-light-bg-secondary-inverted);
+
+    /* error */
+    --form-control-error-label-color: var(--color-light-text-negative);
+    --form-control-inverted-error-label-color: var(--color-light-text-accent);
+    --form-control-error-shadow: none;
+    --form-control-inverted-error-shadow: none;
+    --form-control-error-border-bottom: 0;
+    --form-control-inverted-error-border-bottom: 0;
+
+    /* paddings */
+    --form-control-sub-paddings: 0 var(--gap-2xs);
+}

package/themes/dist/form-control/mobile.css

@@ -0,0 +1,34 @@
+:root {
+    /* theme */
+    --form-control-border-radius: var(--border-radius-l);
+    --form-control-border-bottom: 0;
+    --form-control-inverted-border-bottom: 0;
+    --form-control-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-bg-color: var(--color-light-bg-secondary-inverted);
+
+    /* disabled */
+    --form-control-disabled-opacity: 0.5;
+    --form-control-disabled-border-bottom: 0;
+    --form-control-inverted-disabled-border-bottom: 0;
+    --form-control-disabled-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-disabled-bg-color: var(--color-light-bg-secondary-inverted);
+
+    /* focus */
+    --form-control-focus-border-bottom: 0;
+    --form-control-inverted-focus-border-bottom: 0;
+    --form-control-focus-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-focus-bg-color: var(--color-light-bg-secondary-inverted);
+    --form-control-hover-bg-color: var(--color-light-bg-secondary);
+    --form-control-inverted-hover-bg-color: var(--color-light-bg-secondary-inverted);
+
+    /* error */
+    --form-control-error-label-color: var(--color-light-text-negative);
+    --form-control-inverted-error-label-color: var(--color-light-text-accent);
+    --form-control-error-shadow: none;
+    --form-control-inverted-error-shadow: none;
+    --form-control-error-border-bottom: 0;
+    --form-control-inverted-error-border-bottom: 0;
+
+    /* paddings */
+    --form-control-sub-paddings: 0 var(--gap-2xs);
+}

package/themes/dist/form-control/site.css

@@ -0,0 +1,5 @@
+:root {
+    --form-control-bg-backdrop-filter: blur(20px);
+    --form-control-error-color: var(--color-static-text-accent);
+    --form-control-inverted-error-color: var(--color-static-text-accent);
+}

package/themes/dist/icon-button/click.css

@@ -0,0 +1,24 @@
+:root {
+    /* primary */
+    --icon-button-inverted-primary-hover-color: var(
+        --color-light-graphic-primary-inverted-shade-10
+    );
+    --icon-button-inverted-primary-active-color: var(
+        --color-light-graphic-primary-inverted-shade-30
+    );
+
+    /* secondary */
+    --icon-button-inverted-secondary-hover-color: var(
+        --color-light-graphic-secondary-inverted-shade-10
+    );
+    --icon-button-inverted-secondary-active-color: var(
+        --color-light-graphic-secondary-inverted-shade-30
+    );
+
+    /* negative */
+    --icon-button-negative-base-color: var(--color-light-graphic-negative);
+    --icon-button-negative-hover-color: var(--color-light-graphic-negative-tint-20);
+    --icon-button-negative-active-color: var(--color-light-graphic-negative-tint-30);
+    --icon-button-inverted-negative-hover-color: var(--color-light-graphic-negative-shade-7);
+    --icon-button-inverted-negative-active-color: var(--color-light-graphic-negative-shade-30);
+}

package/themes/dist/input/click.css

@@ -0,0 +1,8 @@
+:root {
+    /* theme */
+    --input-error-icon-display: none;
+    --input-error-icon-not-alone-display: none;
+    --input-success-icon-display: none;
+    --input-disabled-color: var(--color-light-text-primary);
+    --input-inverted-disabled-color: var(--color-light-text-primary-inverted);
+}

package/themes/dist/input/corp.css

@@ -0,0 +1,3 @@
+:root {
+    --input-error-icon-not-alone-display: none;
+}

package/themes/dist/input/intranet.css

@@ -0,0 +1,13 @@
+:root {
+    /* theme */
+    --input-error-color: var(--color-light-text-negative);
+    --input-inverted-error-color: var(--color-light-text-accent);
+    --input-error-icon-display: none;
+    --input-disabled-color: var(--color-light-text-primary);
+    --input-inverted-disabled-color: var(--color-light-text-primary-inverted);
+    --input-focus-placeholder-color: var(--color-light-text-tertiary-transparent);
+    --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted-transparent);
+    --input-caret-color: var(--color-light-text-link);
+    --input-inverted-caret-color: var(--color-light-text-link);
+    --input-error-icon-not-alone-display: none;
+}

package/themes/dist/input/mobile.css

@@ -0,0 +1,13 @@
+:root {
+    /* theme */
+    --input-error-color: var(--color-light-text-negative);
+    --input-inverted-error-color: var(--color-light-text-accent);
+    --input-error-icon-display: none;
+    --input-disabled-color: var(--color-light-text-primary);
+    --input-inverted-disabled-color: var(--color-light-text-primary-inverted);
+    --input-focus-placeholder-color: var(--color-light-text-tertiary-transparent);
+    --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted-transparent);
+    --input-caret-color: var(--color-light-text-link);
+    --input-inverted-caret-color: var(--color-light-text-link);
+    --input-error-icon-not-alone-display: none;
+}

package/themes/dist/input/site.css

@@ -0,0 +1,4 @@
+:root {
+    --input-error-icon: url('https://alfabank.servicecdn.ru/icons/icon_error_m_color.svg');
+    --input-inverted-error-icon: url('https://alfabank.servicecdn.ru/icons/icon_error_m_color.svg');
+}