@vygruppen/spor-react 3.7.0 → 3.7.2

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-WONJHGCG.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-YVEFEGE4.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/provider/SporProvider.tsx

@@ -54,12 +54,6 @@ export const SporProvider = ({
     <LanguageProvider language={language}>
       <ChakraProvider theme={theme} {...props}>
         <Global styles={fontFaces} />
-        <Global
-          styles={`
-          html, body { color: ${theme.colors.darkGrey}; }
-          svg { display: initial; }
-          `}
-        />
         {children}
       </ChakraProvider>
     </LanguageProvider>

package/src/theme/components/button.ts

@@ -126,7 +126,7 @@ const config = defineStyleConfig({
           colors.blackAlpha[400],
           colors.whiteAlpha[300]
         )(props)}`,
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
     }),
     ghost: (props) => ({
@@ -151,30 +151,38 @@ const config = defineStyleConfig({
         },
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
     }),
-    floating: {
-      backgroundColor: "white",
-      boxShadow: "sm",
+    floating: (props) => ({
+      backgroundColor: mode("white", "whiteAlpha.100")(props),
+      boxShadow: getBoxShadowString({
+        borderColor: mode("grey.200", "whiteAlpha.400")(props),
+        baseShadow: "sm",
+      }),
       _active: {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
       },
       _hover: {
-        boxShadow: "md",
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props),
+          baseShadow: "md",
+          borderWidth: 2,
+        }),
       },
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
             baseShadow: "sm",
           }),
           _hover: {
             boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
+              borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2,
-              baseShadow: "md",
+              baseShadow: "md"
             }),
           },
         },
@@ -183,7 +191,7 @@ const config = defineStyleConfig({
           boxShadow: "sm",
         },
       }),
-    },
+    }),
   },
   sizes: {
     lg: {

package/src/theme/components/input.ts

@@ -25,16 +25,22 @@ const config = helpers.defineMultiStyleConfig({
       boxShadow: getBoxShadowString({
         borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       }),
+      _active: {
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        }),
+      },
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2,
         }),
       },
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
           }),
         },
@@ -61,7 +67,7 @@ const config = helpers.defineMultiStyleConfig({
         ...focusVisible({
           focus: {
             boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
+              borderColor: mode("greenHaze", "azure")(props),
               borderWidth: 2,
             }),
           },

package/src/theme/foundations/fonts.ts

@@ -1,7 +1,7 @@
 import tokens from "@vygruppen/spor-design-tokens";
 
 export const fonts = {
-  body: tokens.font.family.body,
-  heading: tokens.font.family.heading,
-  mono: tokens.font.family.monospace,
+  body: `${tokens.font.family.body}, sans-serif`,
+  heading: `${tokens.font.family.heading}, sans-serif`,
+  mono: `${tokens.font.family.monospace}, monospace`,
 };

package/src/theme/foundations/index.ts

@@ -12,3 +12,4 @@ export * from "./sizes";
 export * from "./spacing";
 export * from "./textStyles";
 export * from "./zIndices";
+export * from "./styles";

package/src/theme/foundations/styles.ts

@@ -0,0 +1,12 @@
+import {StyleFunctionProps, mode} from "@chakra-ui/theme-tools";
+
+export const styles = {
+    global: (props: StyleFunctionProps | Record<string, any>) => ({
+        'html, body': {
+            color: mode("darkGrey", "lightGrey")(props),
+        },
+        svg : {
+            display: "initial"
+        }
+    })
+}