feat(forms): include styles by default

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx

@@ -28,15 +28,13 @@ import FormDiagram2 from 'Docs/uilib/extensions/forms/form-diagram-2.png'
 Field components can be used directly as they are, for example `Field.Email`:
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
 import { Field } from '@dnb/eufemia/extensions/forms'
 render(<Field.Email />)
 ```
 
 By building an entire form with components from Eufemia and Eufemia Forms, you save time and code:
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
 import { Card } from '@dnb/eufemia'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
@@ -130,12 +128,23 @@ In this example, all state data, validation process and error handling are done
 
 ## Getting started
 
-You need to import the styles once:
+You import the components from with scopes, such as `Form` and `Field`:
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
+import { Form, Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler onSubmit={console.log}>
+    <Field.String label="Custom Field" />
+    <Form.ButtonRow>
+      <Form.SubmitButton />
+    </Form.ButtonRow>
+  </Form.Handler>,
+)
 ```
 
+The needed styles are included in the Eufemia core package via `dnb-ui-components`.
+
 ### Field components
 
 The data-driven [base field components](/uilib/extensions/forms/base-fields) are named and structured according to the type of data they can display and produce based on the user's input and action in the interface.

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/info.mdx

@@ -10,7 +10,6 @@ The `Form.Handler` component provides both the [Form.Element](/uilib/extensions/
 - It calls `preventDefault` by default.
 
 ```jsx
-import '@dnb/eufemia/extensions/forms/style'
 import { Form } from '@dnb/eufemia/extensions/forms'
 render(
   <Form.Handler

packages/dnb-eufemia/scripts/prebuild/tasks/styleFactory.ts

@@ -44,6 +44,7 @@ async function runStyleFactory() {
     customContent: `
       @import './core/utilities.scss';
       @import './${fallbackPrefix}-ui-fragments.scss';
+      @import './${fallbackPrefix}-ui-forms.scss';
     `,
     importContent: ({ relativeSource }) => `@import '${relativeSource}';`,
     searchGlob: [
@@ -123,6 +124,28 @@ async function runStyleFactory() {
       log.info('> Created the style file with all the extensions')
     }
   })
+
+  // forms
+  await runFactory({
+    outputFile: path.resolve(
+      __dirname,
+      `../../../src/style/${fallbackPrefix}-ui-forms.scss`
+    ),
+    customContent: `@import './core/utilities.scss';`,
+    importContent: ({ relativeSource }) => `@import '${relativeSource}';`,
+    searchGlob: [
+      path.resolve(
+        __dirname,
+        `../../../src/extensions/forms/**/style/${fallbackPrefix}-*.scss`
+      ),
+    ].concat(['!**/style/dnb-forms.*']),
+  }).then(() => {
+    if (isCLI) {
+      log.succeed(
+        '> PrePublish: "styleFactory" Created the style file with all the forms styles'
+      )
+    }
+  })
 }
 
 const runFactory = async ({

packages/dnb-eufemia/scripts/prebuild/tasks/themeFactory.ts

@@ -79,6 +79,7 @@ async function runThemeFactory() {
       ),
       ...processToNamesIgnoreList,
     ],
+    customContent: ({ name }) => `@import './${name}-theme-forms.scss';`,
     // output
     targetFile: 'components', // ui-theme-components.scss
     scssOutputPath: path.resolve(__dirname, '../../../src/style/themes'),
@@ -131,6 +132,27 @@ async function runThemeFactory() {
       )
     }
   })
+
+  // forms
+  await runFactory({
+    // input
+    filesToFindGlob: [
+      path.resolve(
+        __dirname,
+        '../../../src/extensions/forms/**/style/themes/**/*-theme-*.scss'
+      ),
+      ...processToNamesIgnoreList,
+    ].concat(['!**/forms/style/themes/*']),
+    // output
+    targetFile: 'forms', // ui-theme-forms.scss
+    scssOutputPath: path.resolve(__dirname, '../../../src/style/themes'),
+  }).then(() => {
+    if (isCLI) {
+      log.succeed(
+        '> PrePublish: "themeFactory" Created the themes files with all the components, elements, fragments and extensions'
+      )
+    }
+  })
 }
 
 export async function runFactory({

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-array-selection {
   &--options-layout-vertical &__options {
     display: flex;

packages/dnb-eufemia/src/extensions/forms/Field/Expiry/style/dnb-expiry.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-expiry {
   .dnb-multi-input-mask {
     width: var(--forms-field-width--small);

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss

@@ -1,11 +1,9 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-phone-number {
   &__country-code {
-    width: 9rem;
+    width: calc(var(--forms-field-width--medium) - 2rem);
 
     .dnb-autocomplete__shell {
-      width: 9rem;
+      width: calc(var(--forms-field-width--medium) - 2rem);
     }
   }
 

packages/dnb-eufemia/src/extensions/forms/Field/Selection/style/dnb-selection.scss

@@ -1,5 +1,3 @@
-@import '../../style/field-sizes.scss';
-
 .dnb-forms-field-selection {
   &--width {
     &-large {

packages/dnb-eufemia/src/extensions/forms/style/dnb-forms.scss

@@ -1,6 +1 @@
-@import '../Form/style/dnb-forms-form.scss';
-@import '../Field/style/dnb-forms-field.scss';
-@import '../StepsLayout/style/index.scss';
-@import '../utils/TestElement/style/dnb-test-element.scss';
-@import '../FieldBlock/style/dnb-field-block.scss';
-@import '../ValueBlock/style/dnb-value-block.scss';
+@import '../../../style/dnb-ui-forms.scss';

packages/dnb-eufemia/src/style/dnb-ui-components.scss

@@ -6,6 +6,7 @@
 
 @import './core/utilities.scss';
 @import './dnb-ui-fragments.scss';
+@import './dnb-ui-forms.scss';
 @import '../components/accordion/style/dnb-accordion.scss';
 @import '../components/anchor/style/dnb-anchor.scss';
 @import '../components/autocomplete/style/dnb-autocomplete.scss';

packages/dnb-eufemia/src/style/dnb-ui-forms.scss

@@ -0,0 +1,19 @@
+/**
+ * ATTENTION: This file is auto generated by using "styleFactory".
+ * Do not change the content!
+ *
+ */
+
+@import './core/utilities.scss';
+@import '../extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss';
+@import '../extensions/forms/Field/Expiry/style/dnb-expiry.scss';
+@import '../extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss';
+@import '../extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss';
+@import '../extensions/forms/Field/Selection/style/dnb-selection.scss';
+@import '../extensions/forms/FieldBlock/style/dnb-field-block.scss';
+@import '../extensions/forms/Form/ButtonRow/style/dnb-form-button-row.scss';
+@import '../extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss';
+@import '../extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss';
+@import '../extensions/forms/StepsLayout/style/dnb-steps-layout.scss';
+@import '../extensions/forms/ValueBlock/style/dnb-value-block.scss';
+@import '../extensions/forms/utils/TestElement/style/dnb-test-element.scss';

packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-components.scss

@@ -57,3 +57,4 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/upload/style/themes/dnb-upload-theme-ui.scss';
 @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
+@import './eiendom-theme-forms.scss';

packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss

@@ -0,0 +1,15 @@
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+
+// Add "ui" themes, if file don't exists
+$THEME_FALLBACK: 'ui';
+
+// Import shared styles
+@import '../../dnb-ui-forms.scss';
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
+ */

packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss

@@ -58,3 +58,4 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/timeline/style/themes/dnb-timeline-theme-ui.scss';
 @import '../../../components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
+@import './sbanken-theme-forms.scss';

packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss

@@ -0,0 +1,15 @@
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+
+// Add "ui" themes, if file don't exists
+$THEME_FALLBACK: 'ui';
+
+// Import shared styles
+@import '../../dnb-ui-forms.scss';
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
+ */

packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-components.scss

@@ -53,3 +53,4 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/upload/style/themes/dnb-upload-theme-ui.scss';
 @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
+@import './ui-theme-forms.scss';

packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss

@@ -0,0 +1,15 @@
+/**
+ * ATTENTION: This file is auto generated by using "themeFactory".
+ * But you still can change the content of this file on the very top.
+ */
+
+// Add "ui" themes, if file don't exists
+$THEME_FALLBACK: 'ui';
+
+// Import shared styles
+@import '../../dnb-ui-forms.scss';
+
+/**
+ * NB: The content below is auto generated by the "themeFactory".
+ * You may want to update it by running "yarn build" locally.
+ */