feat: move properties.scss into theme ui (#2035)

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.mdx

@@ -73,6 +73,23 @@ do not contain the fonts anymore. Fonts are now only a part of a theme file, suc
 
 As long as you don't import them manually, you don't need to make any changes in your codebase.
 
+### Properties
+
+The DNB `properties.scss` and `properties.js` files were moved inside a theme folder `/style/themes/theme-ui/properties.*`.
+
+Packages such as:
+
+- `dnb-ui-basis`
+- `dnb-ui-body`
+- `dnb-ui-core`
+- `dnb-ui-elements`
+- `dnb-ui-tags`
+- `dnb-ui-fonts` (moved to theme as well)
+
+do not contain the properties anymore. Properties are only a part of a theme file, such as: `/style/themes/theme-ui/dnb-theme-ui.*`.
+
+As long as you don't import them in your application, you don't need to make any changes in your codebase.
+
 ### StepIndicator
 
 1. Find the `active_item` property and replace it with `current_step`.

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling.mdx

@@ -34,7 +34,7 @@ There are several packages you can use and combine.
 - **dnb-ui-tags** - this package will force styles on all the HTML Tags like `<h1>` instead of CSS classes, like `.dnb-h--xx-large`
   - **NB:** needs a `.dnb-core-style` [wrapper class](/uilib/usage/customisation/styling#core-style).
   - Use it carefully - because this will effect existing styles as well.
-- **dnb-ui-properties** - includes only the CSS Custom Properties.
+- **dnb-ui-properties** - includes only the CSS Custom Properties. You find this package is inside `/style/themes/theme-ui/`.
   - There is also a [JavaScript file containing](/uilib/usage/customisation/styling#a-list-of-all-css-properties) the same properties.
 - **dnb-ui-fonts** - includes only the `@font-face` and properties. You find this package is inside `/style/themes/theme-ui/`.
 

packages/dnb-design-system-portal/src/html.js

@@ -20,7 +20,7 @@ import { withPrefix } from 'gatsby' // use it like this: withPrefix('/safari-pin
 // import safariPinnedTab from '@dnb/eufemia/assets/browser/safari-pinned-tab.svg'
 
 // load properties
-import properties from '@dnb/eufemia/src/style/properties.js'
+import properties from '@dnb/eufemia/src/style/themes/theme-ui/properties'
 const mainColor = properties['--color-sea-green']
 
 export default class HTML extends React.PureComponent {

packages/dnb-eufemia/scripts/figma/tasks/assetsExtractors.js

@@ -20,7 +20,7 @@ import {
   saveToFile,
   md5,
 } from '../helpers/docHelpers'
-import properties from '../../../src/style/properties'
+import properties from '../../../src/style/themes/theme-ui/properties'
 import { create, extract } from 'tar'
 
 const ICON_SIZES = {

packages/dnb-eufemia/scripts/prebuild/tasks/makePropertiesFile.js

@@ -56,29 +56,19 @@ export const runFactory = ({ returnResult = false } = {}) =>
     log.start('> PrePublish: transforming style modules')
     try {
       gulp
-        .src(
-          [
-            './src/style/**/properties.scss',
-            '!**/__tests__/**',
-            '!**/stories/**',
-            '!**/*_not_in_use*/**/*',
-          ],
-          {
-            cwd: ROOT_DIR,
-          }
-        )
+        .src(['./src/style/themes/**/properties.scss'], {
+          cwd: ROOT_DIR,
+        })
         .pipe(transform('utf8', transformModulesContent))
         .pipe(
           rename({
-            dirname: './',
-            prefix: '',
             extname: '.js',
           })
-        ) // rename
+        )
         .pipe(
           returnResult
             ? transform('utf8', (result) => resolve(result))
-            : gulp.dest('./src/style', {
+            : gulp.dest('./src/style/themes/', {
                 overwrite: true,
                 cwd: ROOT_DIR,
               })

packages/dnb-eufemia/src/components/pagination/PaginationBar.tsx

@@ -18,7 +18,7 @@ import PaginationContext from './PaginationContext'
 import Context from '../../shared/Context'
 import Button from '../button/Button'
 import IconPrimary from '../icon-primary/IconPrimary'
-import styleProperties from '../../style/properties'
+import styleProperties from '../../style/themes/theme-ui/properties'
 import { LocaleProps } from '../../shared/types'
 import { SkeletonShow } from '../Skeleton'
 

packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.js

@@ -1,4 +1,4 @@
-import properties from '../../../style/properties'
+import properties from '../../../style/themes/theme-ui/properties'
 import { DNB, Saga, PB, Mastercard, BankAxept, Visa } from './Types'
 
 const defaultDesign = {

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

@@ -5,7 +5,7 @@
 
 // core imports
 @import './core/utilities.scss';
-@import './core/properties.scss';
+
 @import './core/scopes.scss';
 @import './core/helper-classes/helper-classes.scss';
 

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

@@ -4,7 +4,7 @@
  */
 
 @import './core/utilities.scss';
-@import './core/properties.scss';
+
 @import './core/scopes.scss';
 @include globalReset();
 

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

@@ -5,7 +5,7 @@
 
 // core imports
 @import './core/utilities.scss';
-@import './core/properties.scss';
+
 @import './core/scopes.scss';
 @import './core/helper-classes/helper-classes.scss';
 @include globalReset();

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

@@ -4,7 +4,6 @@
  */
 
 @import './core/utilities.scss';
-@import './core/properties.scss';
 
 // import all HTML elements
 @import './elements/ui-elements.scss';

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

@@ -4,7 +4,6 @@
  */
 
 @import './core/utilities.scss';
-@import './core/properties.scss';
 
 // import and execute all HTML element tags
 @import './elements/ui-tags.scss';

packages/dnb-eufemia/src/style/stylis.js

@@ -5,7 +5,7 @@
  */
 
 import { matchAll } from '../shared/component-helper'
-import properties from './properties'
+import properties from './themes/theme-ui/properties'
 
 const findRegExp = /var\(([^)]*)\)/g
 

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

@@ -4,7 +4,7 @@
  */
 
 @import '../../core/utilities.scss';
-@import '../../core/properties.scss';
+@import './properties.scss';
 @import './fonts.scss';
 
 // import all the "class styles" of the elements

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

@@ -3,7 +3,5 @@
  *
  */
 
-// core imports
 @import '../../core/utilities.scss';
-@import '../../core/properties.scss';
 @import './fonts.scss';

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

@@ -0,0 +1,8 @@
+/**
+ * Import basis core parts
+ *
+ */
+
+// core imports
+@import '../../core/utilities.scss';
+@import './properties.scss';