@alfalab/core-components 33.0.1-beta.0 → 33.0.2

package/themes/dist/mixins/dark.css

@@ -0,0 +1,259 @@
+@define-mixin theme-dark {
+    --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-secondary-transparent: var(
+        --color-dark-specialbg-secondary-transparent
+    );
+    --color-light-specialbg-secondary-transparent-inverted: var(
+        --color-dark-specialbg-secondary-transparent-inverted
+    );
+    --color-light-specialbg-tertiary-grouped: var(--color-dark-specialbg-tertiary-grouped);
+    --color-light-specialbg-tertiary-transparent: var(--color-dark-specialbg-tertiary-transparent);
+    --color-light-specialbg-tertiary-transparent-inverted: var(
+        --color-dark-specialbg-tertiary-transparent-inverted
+    );
+    --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-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-tertiary: var(--color-dark-text-tertiary);
+    --color-light-text-tertiary-inverted: var(--color-dark-text-tertiary-inverted);
+    --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-shade-7: var(--color-dark-bg-primary-tint-7);
+    --color-light-bg-primary-shade-15: var(--color-dark-bg-primary-tint-15);
+    --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-7: var(--color-dark-bg-primary-inverted-shade-7);
+    --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/mixins/dropzone/click.css

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

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

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

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

@@ -0,0 +1,31 @@
+@define-mixin form-control-click {
+    /* 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/mixins/form-control/intranet.css

@@ -0,0 +1,39 @@
+@define-mixin form-control-intranet {
+    /* 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-border-bottom: 0;
+    --form-control-inverted-disabled-border-bottom: 0;
+    --form-control-disabled-bg-color: var(--color-light-bg-primary);
+    --form-control-inverted-disabled-bg-color: var(--color-light-bg-primary-inverted);
+    --form-control-disabled-shadow: inset 0 0 0 1px var(--color-light-border-secondary);
+    --form-control-inverted-disabled-shadow: inset 0 0 0 1px
+        var(--color-light-border-secondary-inverted);
+    --form-control-disabled-filled-label-color: var(--color-light-text-tertiary);
+    --form-control-inverted-disabled-filled-label-color: var(--color-light-text-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-secondary-shade-7);
+    --form-control-inverted-focus-bg-color: var(--color-light-bg-secondary-inverted-shade-7);
+    --form-control-hover-bg-color: var(--color-light-bg-secondary-shade-7);
+    --form-control-inverted-hover-bg-color: var(--color-light-bg-secondary-inverted-shade-7);
+
+    /* error */
+    --form-control-error-label-color: var(--color-light-text-secondary);
+    --form-control-inverted-error-label-color: var(--color-light-bg-secondary-inverted);
+    --form-control-error-shadow: none;
+    --form-control-error-disabled-shadow: var(--form-control-disabled-shadow);
+    --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/mixins/form-control/mobile.css

@@ -0,0 +1,34 @@
+@define-mixin form-control-mobile {
+    /* 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/mixins/form-control/site.css

@@ -0,0 +1,5 @@
+@define-mixin form-control-site {
+    --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/mixins/icon-button/click.css

@@ -0,0 +1,24 @@
+@define-mixin icon-button-click {
+    /* 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/mixins/input/click.css

@@ -0,0 +1,8 @@
+@define-mixin input-click {
+    /* 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/mixins/input/corp.css

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

package/themes/dist/mixins/input/intranet.css

@@ -0,0 +1,11 @@
+@define-mixin input-intranet {
+    /* theme */
+    --input-error-color: var(--color-light-text-primary);
+    --input-inverted-error-color: var(--color-light-text-accent);
+    --input-error-icon-display: block;
+    --input-disabled-color: var(--color-light-text-secondary);
+    --input-inverted-disabled-color: var(--color-light-text-secondary-inverted);
+    --input-focus-placeholder-color: var(--color-light-text-tertiary);
+    --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted);
+    --input-error-icon-not-alone-display: none;
+}

package/themes/dist/mixins/input/mobile.css

@@ -0,0 +1,13 @@
+@define-mixin input-mobile {
+    /* 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);
+    --input-inverted-focus-placeholder-color: var(--color-light-text-tertiary-inverted);
+    --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/mixins/input/site.css

@@ -0,0 +1,4 @@
+@define-mixin input-site {
+    --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');
+}

package/themes/dist/mixins/intranet.css

@@ -0,0 +1,29 @@
+@import './button/intranet.css';
+@import './form-control/intranet.css';
+@import './tag/intranet.css';
+@import './checkbox/intranet.css';
+@import './radio/intranet.css';
+@import './input/intranet.css';
+@import './slider/intranet.css';
+@import './slider-input/intranet.css';
+@import './calendar/intranet.css';
+@import './calendar-input/intranet.css';
+@import './bottom-sheet/intranet.css';
+@import './select/intranet.css';
+@import './confirmation/intranet.css';
+
+@define-mixin theme-intranet {
+    @mixin button-intranet;
+    @mixin tag-intranet;
+    @mixin checkbox-intranet;
+    @mixin radio-intranet;
+    @mixin form-control-intranet;
+    @mixin input-intranet;
+    @mixin slider-intranet;
+    @mixin slider-input-intranet;
+    @mixin calendar-intranet;
+    @mixin calendar-input-intranet;
+    @mixin bottom-sheet-intranet;
+    @mixin select-intranet;
+    @mixin confirmation-intranet;
+}

package/themes/dist/mixins/link/click.css

@@ -0,0 +1,25 @@
+@define-mixin link-click {
+    /* primary */
+    --link-primary-hover-color: var(--color-light-text-primary-tint-20);
+    --link-primary-active-color: var(--color-light-text-primary-tint-30);
+
+    /* inverted primary */
+    --link-inverted-primary-hover-color: var(--color-light-text-primary-inverted-tint-20);
+    --link-inverted-primary-active-color: var(--color-light-text-primary-inverted-tint-30);
+
+    /* secondary */
+    --link-secondary-hover-color: var(--color-light-text-secondary-tint-20);
+    --link-secondary-active-color: var(--color-light-text-secondary-tint-30);
+
+    /* inverted secondary */
+    --link-inverted-secondary-hover-color: var(--color-light-text-secondary-inverted-tint-20);
+    --link-inverted-secondary-active-color: var(--color-light-text-secondary-inverted-tint-30);
+
+    /* default */
+    --link-default-hover-color: var(--color-light-text-link-tint-30);
+    --link-default-active-color: var(--color-light-text-link-tint-50);
+
+    /* inverted default */
+    --link-inverted-default-hover-color: var(--color-light-text-link-tint-30);
+    --link-inverted-default-active-color: var(--color-light-text-link-tint-50);
+}

package/themes/dist/mixins/list/click.css

@@ -0,0 +1,4 @@
+@define-mixin list-click {
+    /* theme */
+    --list-item-margin: var(--gap-m);
+}

package/themes/dist/mixins/mobile.css

@@ -0,0 +1,31 @@
+@import './button/mobile.css';
+@import './form-control/mobile.css';
+@import './tag/mobile.css';
+@import './checkbox/mobile.css';
+@import './radio/mobile.css';
+@import './input/mobile.css';
+@import './slider/mobile.css';
+@import './slider-input/mobile.css';
+@import './calendar-input/mobile.css';
+@import './filter-tag/mobile.css';
+@import './bottom-sheet/mobile.css';
+@import './select/mobile.css';
+@import './steps/mobile.css';
+@import './confirmation/mobile.css';
+
+@define-mixin theme-mobile {
+    @mixin button-mobile;
+    @mixin tag-mobile;
+    @mixin checkbox-mobile;
+    @mixin radio-mobile;
+    @mixin form-control-mobile;
+    @mixin input-mobile;
+    @mixin slider-mobile;
+    @mixin slider-input-mobile;
+    @mixin calendar-input-mobile;
+    @mixin filter-tag-mobile;
+    @mixin bottom-sheet-mobile;
+    @mixin select-mobile;
+    @mixin steps-mobile;
+    @mixin confirmation-mobile;
+}

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

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

package/themes/dist/mixins/mobile.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var styles = require('!!css-loader!@alfalab/core-components/themes/mixins/mobile.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 mobile = styles__default['default'].toString();
+
+module.exports = mobile;

package/themes/dist/mixins/modal/click.css

@@ -0,0 +1,30 @@
+@define-mixin modal-click {
+    /* sizes */
+    --modal-vertical-padding: var(--gap-4xl);
+    --modal-footer-default-gap: var(--gap-xl);
+
+    /* paddings */
+    --modal-s-header-paddings: var(--gap-xl) var(--gap-2xl) var(--gap-s) 0;
+    --modal-s-content-paddings: 0 var(--gap-4xl);
+    --modal-s-content-only-bottom-padding: var(--gap-4xl);
+    --modal-s-footer-paddings: var(--gap-2xl) var(--gap-4xl) var(--gap-4xl);
+
+    /* scroll */
+    --modal-header-highlight-background: var(--color-light-bg-primary);
+    --modal-footer-highlight-background: var(--color-light-bg-secondary);
+    --modal-footer-highlight-box-shadow: none;
+
+    /* desktop */
+    --modal-s-header-desktop-content-paddings: var(--gap-xs) var(--gap-m) 0 0;
+    --modal-s-header-desktop-font-size: 24px;
+    --modal-s-header-desktop-line-height: 32px;
+    --modal-header-desktop-font-weight: 500;
+    --modal-header-desktop-font-family: var(--font-family-styrene);
+
+    /* mobile */
+    --modal-header-mobile-content-paddings: 10px var(--gap-xs) 10px var(--gap-m);
+    --modal-header-mobile-font-size: 20px;
+    --modal-header-mobile-line-height: 28px;
+    --modal-header-mobile-font-family: var(--font-family-styrene);
+    --modal-header-mobile-font-weight: 500;
+}

package/themes/dist/mixins/modal/corp.css

@@ -0,0 +1,4 @@
+@define-mixin modal-corp {
+    --modal-header-highlight-box-shadow: var(--shadow-s);
+    --modal-footer-highlight-box-shadow: var(--shadow-s-up);
+}

package/themes/dist/mixins/radio/click.css

@@ -0,0 +1,9 @@
+@define-mixin radio-click {
+    /* theme */
+    --radio-checked-bg-color: var(--color-light-graphic-positive);
+    --radio-checked-border-color: transparent;
+    --radio-checked-hover-bg-color: var(--color-light-graphic-positive-shade-10);
+    --radio-checked-hover-border-color: transparent;
+    --radio-checked-active-bg-color: var(--color-light-graphic-positive-shade-30);
+    --radio-checked-active-border-color: transparent;
+}

package/themes/dist/mixins/radio/intranet.css

@@ -0,0 +1,19 @@
+@define-mixin radio-intranet {
+    /* unchecked */
+    --radio-bg-color: var(--color-light-graphic-primary-inverted);
+    --radio-border-color: var(--color-light-graphic-secondary);
+    --radio-hover-bg-color: var(--color-light-graphic-primary-inverted);
+    --radio-hover-border-color: var(--color-light-graphic-secondary);
+
+    /* active */
+    --radio-active-bg-color: var(--color-light-graphic-primary-inverted);
+    --radio-active-border-color: var(--color-light-border-key);
+
+    /* checked */
+    --radio-checked-hover-bg-color: var(--color-light-graphic-primary-shade-10);
+    --radio-checked-active-bg-color: var(--color-light-graphic-primary-shade-30);
+    --radio-checked-bg-color: var(--color-light-graphic-primary);
+
+    /* icon */
+    --radio-icon-color: var(--color-light-graphic-primary-inverted);
+}