@design-factory/styles 21.0.0-next.0

package/scss/components/dropdown/_dropdown.scss

@@ -0,0 +1,129 @@
+@use 'sass:color';
+@use '../../new-brand-common.variables' as df;
+@use 'dropdown.mixins' as dropdown-mixins;
+
+.dropdown.show,
+.dropup {
+  .dropdown-toggle:after {
+    content: '\f077'; // fa-chevron-up
+  }
+}
+.dropdown,
+.dropup.show {
+  .dropdown-toggle:after {
+    content: '\f078'; // fa-chevron-down
+  }
+}
+
+:is(.dropdown, .dropup) {
+  .btn-primary.dropdown-toggle-split {
+    //to respect gap in figma of 1px and override button group styles
+    margin-inline-start: 2px;
+  }
+
+  .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
+    &:after {
+      font-family: 'Font Awesome 6 Pro', sans-serif;
+      border: none;
+      // have to set margin-left and margin-right to 0 to override bootstrap default styles (ltr and rtl)
+      margin-left: 0;
+      margin-right: 0;
+      line-height: 1rem;
+      font-weight: var(--df-typo-weight-medium);
+    }
+
+    &.btn-sm {
+      --df-dropdown-item-padding-x: var(--df-spacing-3);
+    }
+
+    &.btn-lg {
+      // override btn-lg gap only for dropdown toggle (see Figma)
+      gap: var(--df-spacing-3);
+      --df-dropdown-item-padding-x: var(--df-spacing-5);
+    }
+  }
+
+  .dropdown-toggle.df-standalone-dropdown-toggle:after {
+    content: none; // remove chevron icon
+  }
+
+  .dropdown-toggle-split:not(.df-standalone-dropdown-toggle) {
+    padding-inline: var(--df-spacing-4);
+
+    &:after {
+      margin-inline-start: 0;
+    }
+  }
+}
+
+.dropdown-menu {
+  //TODO: check if needed bs uses text-align left
+  text-align: start;
+  box-shadow: var(--df-dropdown-box-shadow);
+
+  // menu sizing
+  @include dropdown-mixins.df-sizes('lg');
+  @include dropdown-mixins.df-sizes('sm');
+}
+
+.dropdown-item {
+  border: 0;
+  line-height: 1.25rem;
+
+  &.active:not(:disabled):not(.disabled) {
+    font-weight: var(--df-typo-weight-bold);
+  }
+
+  &:focus-visible {
+    --df-box-shadow-color: var(--df-color-focus-main-border);
+    box-shadow: df.$df-focus-inset-box-shadow;
+    outline: none;
+
+    &:is(.active, :active) {
+      background-color: var(--df-dropdown-link-active-bg);
+      --df-inner-box-shadow-color: var(--df-dropdown-link-active-bg);
+    }
+  }
+
+  &:hover {
+    --df-inner-box-shadow-color: var(--df-dropdown-link-hover-bg);
+  }
+
+  &:is(.disabled, :disabled) {
+    cursor: not-allowed;
+    pointer-events: auto; // override of ng-bootstrap
+  }
+
+  // Needed to override bootstrap default styles that defines the focus and the hover with the same styling
+  &:focus:not(:hover):not(.active, :active) {
+    color: inherit;
+    background-color: inherit;
+  }
+}
+
+//Redefine bootstrap dropdown-item styles to override links behaviour
+a.dropdown-item {
+  &,
+  &:hover {
+    color: var(--df-dropdown-link-color);
+    border-bottom-width: 0;
+  }
+
+  &:hover {
+    background-color: var(--df-dropdown-link-hover-bg);
+  }
+}
+
+// Flag Angular
+// This style is needed due to a drop-start feature of bootstrap where the first child of the
+// btn-group with dropdown-toggle-split class has no rounded corners
+.btn-group.dropdown[ngbdropdown] {
+  .dropdown-toggle-split {
+    @include border-end-radius($btn-border-radius);
+  }
+}
+
+.btn-group-lg > .dropdown-toggle:not(.df-standalone-dropdown-toggle) {
+  // override btn-lg gap only for dropdown toggle (see Figma)
+  gap: var(--df-spacing-3);
+}

package/scss/components/dropdown/_dropdown.variables.scss

@@ -0,0 +1,15 @@
+@use '../../new-brand-common.variables' as df;
+
+$dropdown-border-width: 0 !default;
+$dropdown-link-hover-bg: var(--df-color-primary-alt-hovered-background) !default;
+$dropdown-link-hover-color: var(--df-color-neutral-alt-hovered-foreground) !default;
+$dropdown-link-active-bg: var(--df-color-primary-alt-active-background) !default;
+$dropdown-link-active-color: var(--df-color-neutral-alt-active-foreground) !default;
+$dropdown-link-disabled-color: var(--df-color-disabled-main-foreground) !default;
+$dropdown-padding-y: var(--df-spacing-3) !default;
+$dropdown-divider-margin-y: var(--df-spacing-3) !default;
+$dropdown-item-padding-y: 0.5rem !default;
+$dropdown-item-padding-x: var(--df-spacing-4) !default;
+$dropdown-divider-bg: var(--df-color-inert-neutral-main-border) !default;
+$dropdown-box-shadow: df.$df-box-shadow !default;
+$dropdown-bg: var(--df-color-inert-neutral-main-background) !default;

package/scss/components/fieldset/_fieldset.variables.scss

@@ -0,0 +1,2 @@
+$legend-font-size: var(--df-typo-sizing-default) !default;
+$legend-font-weight: var(--df-typo-weight-regular) !default;