[FIX] Fikset Select issue ved bruk i Intern-header (navikt#1616)

Author: KenAJoh

.storybook/preview.js

@@ -21,13 +21,33 @@ export const parameters = {
         value: "#ffffff",
       },
       {
-        name: "Alternate",
-        value: "#f7f7f7",
-      },
-      {
-        name: "Inverted",
-        value: "#292929",
+        name: "Darkmode",
+        value: "#262626",
       },
     ],
   },
 };
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "circlehollow",
+      items: [
+        { value: "light", icon: "circlehollow", title: "light" },
+        { value: "dark", icon: "circle", title: "dark" },
+      ],
+      showName: true,
+    },
+  },
+};
+
+export const withTheme = (StoryFn, context) => (
+  <div data-theme={context.parameters.theme || context.globals.theme}>
+    <StoryFn />
+  </div>
+);
+
+export const decorators = [withTheme];

.storybook/theme.js

@@ -9,7 +9,7 @@ export default create({
   fontCode: "monospace",
 
   // Text colors
-  textColor: "#292929",
+  textColor: "#262626",
   textInverseColor: "rgba(255,255,255,0.9)",
 
   colorSecondary: "rgba(0, 36, 58, 1)",

@navikt/core/css/form/select.css

@@ -16,7 +16,6 @@
   --navds-select-color-background-disabled: var(
     --navds-semantic-color-component-background-alternate
   );
-  --navds-select-color-text-disabled: var(--navds-semantic-color-text);
 }
 
 .navds-select__input {
@@ -47,6 +46,7 @@
   display: flex;
   width: 100%;
   align-items: center;
+  color: var(--navds-semantic-color-text);
 }
 
 .navds-select__chevron {

@navikt/core/react/src/loader/loader.stories.tsx

@@ -55,7 +55,7 @@ export const Variant = () => (
       <Loader size="3xlarge" variant="inverted" />
       <Loader size="3xlarge" variant="interaction" />
     </div>
-    <div style={{ backgroundColor: "#292929" }}>
+    <div style={{ backgroundColor: "#262626" }}>
       <Loader size="3xlarge" variant="neutral" />
       <Loader size="3xlarge" variant="inverted" />
       <Loader size="3xlarge" variant="interaction" />
@@ -70,7 +70,7 @@ export const Transparent = () => (
       <Loader size="3xlarge" transparent variant="inverted" />
       <Loader size="3xlarge" transparent variant="interaction" />
     </div>
-    <div style={{ backgroundColor: "#292929" }}>
+    <div style={{ backgroundColor: "#262626" }}>
       <Loader size="3xlarge" transparent variant="neutral" />
       <Loader size="3xlarge" transparent variant="inverted" />
       <Loader size="3xlarge" transparent variant="interaction" />

@navikt/core/tokens/stories/border-radius.stories.tsx

@@ -13,7 +13,7 @@ const Border = ({ token }) => (
       width: 4rem;
       height: 4rem;
       background: #f7f7f7;
-      border: 2px solid #292929;
+      border: 2px solid #262626;
     }
     `}</style>
   </>

yarn.lock

@@ -3222,7 +3222,7 @@ __metadata:
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
     "@navikt/ds-icons": ^0.8.20
-    "@navikt/ds-react": ^0.19.26
+    "@navikt/ds-react": ^0.19.27
     "@popperjs/core": ^2.10.1
     "@types/node": ^17.0.35
     classnames: ^2.3.1
@@ -3238,7 +3238,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@^0.19.26, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^0.19.27, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies: