refactor: update input components css to use bem styles and mixins (#…

…7180)
public-ui · Jan 24, 2025 · 186a6ab · 186a6ab
2 parents 9f29a08 + 5cfb819
commit 186a6ab
Show file tree

Hide file tree

Showing 308 changed files with 8,015 additions and 6,227 deletions.
diff --git a/packages/components/src/components/a11y.scss b/packages/components/src/components/a11y.scss
@@ -1,3 +1,5 @@
+@import '@shared/mixins';
+
 /*
  * This file contains all rules for accessibility.
  */
@@ -47,8 +49,7 @@
 	/* select, */
 	/* textarea, */
 	[role='button'],
-	button:not([role='link']),
-	.kol-input .input {
+	button:not([role='link']) {
 		min-height: var(--a11y-min-size);
 		min-width: var(--a11y-min-size);
 	}

diff --git a/packages/components/src/components/abbr/style.scss b/packages/components/src/components/abbr/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {

diff --git a/packages/components/src/components/accordion/style.scss b/packages/components/src/components/accordion/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../../functional-components/Collapsible/collapsible';
 

diff --git a/packages/components/src/components/alert/style.scss b/packages/components/src/components/alert/style.scss
@@ -1,11 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../@shared/kol-alert-mixin';
+
+@include kol-alert;
 
 @layer kol-component {
 	.kol-alert {
 		font-size: rem(16);
 	}
 }
-
-@include kol-alert-styles;
diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 
 @layer kol-component {

diff --git a/packages/components/src/components/badge/style.scss b/packages/components/src/components/badge/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {

diff --git a/packages/components/src/components/breadcrumb/style.scss b/packages/components/src/components/breadcrumb/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-breadcrumb {

diff --git a/packages/components/src/components/button-link/style.scss b/packages/components/src/components/button-link/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-link-mixin';
 
 @include kol-link-styles('kol-button');
diff --git a/packages/components/src/components/button/style.scss b/packages/components/src/components/button/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-button-mixin';
 
 @include kol-button-styles('kol-button');
diff --git a/packages/components/src/components/card/style.scss b/packages/components/src/components/card/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {

diff --git a/packages/components/src/components/combobox/style.scss b/packages/components/src/components/combobox/style.scss
@@ -1,6 +1,7 @@
+@import '../../styles/global';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../host-display-block';
+@import '../tooltip/style';
 
 @layer kol-component {
 	:host {
@@ -28,6 +29,10 @@
 
 		&__input {
 			flex-grow: 1;
+
+			&:focus {
+				outline: none;
+			}
 		}
 
 		&__icon {
@@ -59,4 +64,8 @@
 			}
 		}
 	}
+
+	.kol-input {
+		display: grid;
+	}
 }
diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../../functional-components/Collapsible/collapsible';
 

diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-drawer {

diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss
@@ -1,11 +1,13 @@
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../../styles/global';
+@import '../host-display-block';
 @import '../@shared/kol-link-mixin';
+@import '../../styles/kol-alert-mixin';
 
 @layer kol-component {
 	@include kol-link-styles('kol-link');
-	@include kol-alert-styles;
+	@include kol-alert;
+
 	.kol-form {
 		font-size: rem(16);
 	}

diff --git a/packages/components/src/components/heading/style.scss b/packages/components/src/components/heading/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-headline {

diff --git a/packages/components/src/components/image/style.scss b/packages/components/src/components/image/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-image {

diff --git a/packages/components/src/components/input-checkbox/button.scss b/packages/components/src/components/input-checkbox/button.scss
diff --git a/packages/components/src/components/input-checkbox/checkbox.scss b/packages/components/src/components/input-checkbox/checkbox.scss
diff --git a/packages/components/src/components/input-checkbox/common.scss b/packages/components/src/components/input-checkbox/common.scss