feat: set color and background on :root and color modes (#2544)

I created a new baseline file, as it seems like our `ds-reset` file will
be removed soon.
I am importing the new file under the layer `ds.baseline`, but this
could also be imported in `ds.reset`

part of #2454

apps/storybook/.storybook/preview.tsx

@@ -158,7 +158,8 @@ export const decorators = [
     },
     defaultTheme: 'Light',
     attributeName: 'data-ds-color-mode',
-    parentSelector: '.sbdocs, .sb-main-padded',
+    parentSelector:
+      '.sbdocs-preview .docs-story div:first-of-type, .sb-show-main:has(#storybook-docs[hidden="true"])',
   }),
 ];
 

packages/css/baseline/baseline.css

@@ -0,0 +1,5 @@
+:root,
+[data-ds-color-mode] {
+  color: var(--ds-color-neutral-text-default);
+  background-color: var(--ds-color-neutral-background-default);
+}

packages/css/index.css

@@ -1,9 +1,10 @@
 @charset "UTF-8";
 
-@layer ds.reset, ds.theme, ds.base, ds.components;
+@layer ds.reset, ds.baseline, ds.theme, ds.base, ds.components;
 
 /** Import order defines ordinal specificity for layers */
 @import url('./baseline/ds-reset.css') layer(ds.reset);
+@import url('./baseline/baseline.css') layer(ds.baseline);
 @import url('./baseline/typography.css') layer(ds.base.typography);
 @import url('./utilities.css') layer(ds.base.utilities);
 @import url('./button.css') layer(ds.components);