fix-media

src/assets/scss/bulma/overrides/form/_index.scss

@@ -0,0 +1,4 @@
+@import 'shared';
+@import 'select';
+@import 'input-textarea';
+@import 'title';

src/assets/scss/bulma/overrides/form/_input-textarea.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+// @use "@beeline/design-tokens/scss/tokens/globals";
+@use '@beeline/design-tokens/scss/tokens/themes/light';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+%input-textarea {
+  box-shadow: none;
+  border: 1px solid transparent;
+  color: map.get(light.$theme, 'color-text-active');
+  background: map.get(light.$theme, 'color-control-background');
+
+  &:hover {
+    border-color: map.get(light.$theme, 'color-border-focus');
+  }
+
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+    background: map.get(dark.$theme, 'color-control-background');
+
+    &:hover {
+      border-color: map.get(dark.$theme, 'color-border-focus');
+    }
+  }
+
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active {
+    box-shadow: none !important;
+    border-color: map.get(light.$theme, 'color-border-focus');
+    background: map.get(light.$theme, 'color-background-base');
+
+    .dark-theme & {
+      background: map.get(dark.$theme, 'color-background-base');
+      border-color: map.get(dark.$theme, 'color-border-focus');
+    }
+  }
+}
+
+.input {
+  @extend %input-textarea;
+}
+
+.textarea {
+  @extend %input-textarea;
+}

src/assets/scss/bulma/overrides/form/_select.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+@use '@beeline/design-tokens/scss/tokens/themes/light';
+
+.select {
+  select {
+    border: 1px solid transparent;
+
+    &:focus,
+    &:active {
+      border: 1px solid map.get(light.$theme, 'color-border-focus');
+      background-color: map.get(light.$theme, 'color-background-base');
+      box-shadow: none;
+    }
+  }
+
+  &:not(.is-multiple):not(.is-loading)::after {
+    content: none;
+  }
+
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active {
+    select {
+      border: 1px solid map.get(light.$theme, 'color-border-focus');
+      background-color: map.get(light.$theme, 'color-background-base');
+      box-shadow: none;
+    }
+
+    .dark-theme & {
+      select {
+        border: 1px solid map.get(dark.$theme, 'color-border-focus');
+        background-color: map.get(dark.$theme, 'color-background-base');
+        box-shadow: none;
+      }
+    }
+  }
+
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+
+    & select {
+      color: map.get(dark.$theme, 'color-text-active');
+      background-color: map.get(dark.$theme, 'color-control-background');
+    }
+  }
+}

src/assets/scss/bulma/overrides/form/_shared.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/globals';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+.label {
+  line-height: globals.$font-line-height-caption;
+
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-inactive');
+  }
+}

src/assets/scss/bulma/overrides/form/_title.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+.title {
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+  }
+}
+
+.subtitle {
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-inactive');
+  }
+}