@veracity/vui 1.7.0-beta.3 → 1.7.0-redesign.1

package/src/theme/foundations/colors.ts

@@ -1,3 +1,331 @@
+import * as oneDesignButtonTokens from '@dnvgl-onefoundation/onedesign-tokens/dist/js/es6/rem/button'
+
+const buttonTypePrimaryDefaultBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorDark
+const buttonTypePrimaryDefaultBorderColorLight: string = oneDesignButtonTokens.buttonTypePrimaryDefaultBorderColorLight
+const buttonTypePrimaryDefaultBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypePrimaryDefaultBackgroundColorDark
+const buttonTypePrimaryDefaultBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypePrimaryDefaultBackgroundColorLight
+const buttonTypePrimaryDefaultTextColorDark: string = oneDesignButtonTokens.buttonTypePrimaryDefaultTextColorDark
+const buttonTypePrimaryDefaultTextColorLight: string = oneDesignButtonTokens.buttonTypePrimaryDefaultTextColorLight
+const buttonTypePrimaryHoverBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryHoverBorderColorDark
+const buttonTypePrimaryHoverBorderColorLight: string = oneDesignButtonTokens.buttonTypePrimaryHoverBorderColorLight
+const buttonTypePrimaryHoverBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypePrimaryHoverBackgroundColorDark
+const buttonTypePrimaryHoverBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypePrimaryHoverBackgroundColorLight
+const buttonTypePrimaryHoverTextColorDark: string = oneDesignButtonTokens.buttonTypePrimaryHoverTextColorDark
+const buttonTypePrimaryHoverTextColorLight: string = oneDesignButtonTokens.buttonTypePrimaryHoverTextColorLight
+const buttonTypePrimaryActiveBorderColorDark: string = oneDesignButtonTokens.buttonTypePrimaryActiveBorderColorDark
+const buttonTypePrimaryActiveBorderColorLight: string = oneDesignButtonTokens.buttonTypePrimaryActiveBorderColorLight
+const buttonTypePrimaryActiveBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypePrimaryActiveBackgroundColorDark
+const buttonTypePrimaryActiveBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypePrimaryActiveBackgroundColorLight
+const buttonTypePrimaryActiveTextColorDark: string = oneDesignButtonTokens.buttonTypePrimaryActiveTextColorDark
+const buttonTypePrimaryActiveTextColorLight: string = oneDesignButtonTokens.buttonTypePrimaryActiveTextColorLight
+const buttonTypePrimaryFocusOutline: string = oneDesignButtonTokens.buttonTypePrimaryFocusOutline
+const buttonTypeSecondaryDefaultBorderColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBorderColorDark
+const buttonTypeSecondaryDefaultBorderColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBorderColorLight
+const buttonTypeSecondaryDefaultBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBackgroundColorDark
+const buttonTypeSecondaryDefaultBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryDefaultBackgroundColorLight
+const buttonTypeSecondaryDefaultTextColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryDefaultTextColorDark
+const buttonTypeSecondaryDefaultTextColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryDefaultTextColorLight
+const buttonTypeSecondaryHoverBorderColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryHoverBorderColorDark
+const buttonTypeSecondaryHoverBorderColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryHoverBorderColorLight
+const buttonTypeSecondaryHoverBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryHoverBackgroundColorDark
+const buttonTypeSecondaryHoverBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryHoverBackgroundColorLight
+const buttonTypeSecondaryHoverTextColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryHoverTextColorDark
+const buttonTypeSecondaryHoverTextColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryHoverTextColorLight
+const buttonTypeSecondaryActiveBorderColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryActiveBorderColorDark
+const buttonTypeSecondaryActiveBorderColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryActiveBorderColorLight
+const buttonTypeSecondaryActiveBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeSecondaryActiveBackgroundColorDark
+const buttonTypeSecondaryActiveBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeSecondaryActiveBackgroundColorLight
+const buttonTypeSecondaryActiveTextColorDark: string = oneDesignButtonTokens.buttonTypeSecondaryActiveTextColorDark
+const buttonTypeSecondaryActiveTextColorLight: string = oneDesignButtonTokens.buttonTypeSecondaryActiveTextColorLight
+const buttonTypeSecondaryFocusOutline: string = oneDesignButtonTokens.buttonTypeSecondaryFocusOutline
+const buttonTypeTertiaryDefaultBorderColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryDefaultBorderColorDark
+const buttonTypeTertiaryDefaultBorderColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryDefaultBorderColorLight
+const buttonTypeTertiaryDefaultBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeTertiaryDefaultBackgroundColorDark
+const buttonTypeTertiaryDefaultBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryDefaultBackgroundColorLight
+const buttonTypeTertiaryDefaultTextColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryDefaultTextColorDark
+const buttonTypeTertiaryDefaultTextColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryDefaultTextColorLight
+const buttonTypeTertiaryHoverBorderColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryHoverBorderColorDark
+const buttonTypeTertiaryHoverBorderColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryHoverBorderColorLight
+const buttonTypeTertiaryHoverBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeTertiaryHoverBackgroundColorDark
+const buttonTypeTertiaryHoverBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryHoverBackgroundColorLight
+const buttonTypeTertiaryHoverTextColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryHoverTextColorDark
+const buttonTypeTertiaryHoverTextColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryHoverTextColorLight
+const buttonTypeTertiaryActiveBorderColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryActiveBorderColorDark
+const buttonTypeTertiaryActiveBorderColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryActiveBorderColorLight
+const buttonTypeTertiaryActiveBackgroundColorDark: string =
+  oneDesignButtonTokens.buttonTypeTertiaryActiveBackgroundColorDark
+const buttonTypeTertiaryActiveBackgroundColorLight: string =
+  oneDesignButtonTokens.buttonTypeTertiaryActiveBackgroundColorLight
+const buttonTypeTertiaryActiveTextColorDark: string = oneDesignButtonTokens.buttonTypeTertiaryActiveTextColorDark
+const buttonTypeTertiaryActiveTextColorLight: string = oneDesignButtonTokens.buttonTypeTertiaryActiveTextColorLight
+const buttonTypeTertiaryFocusOutline: string = oneDesignButtonTokens.buttonTypeTertiaryFocusOutline
+const buttonDisabledCursor: string = oneDesignButtonTokens.buttonDisabledCursor
+const buttonDisabledOpacity: string = oneDesignButtonTokens.buttonDisabledOpacity
+
+export const focusColor = 'hsla(196, 100%, 43%, 1)'
+
+export const darkBlue = {
+  95: 'hsl(223, 67%, 95%)',
+  90: 'hsl(223, 67%, 90%)',
+  85: 'hsl(223, 67%, 85%)',
+  80: 'hsl(223, 67%, 80%)',
+  75: 'hsl(223, 67%, 75%)',
+  70: 'hsl(223, 67%, 70%)',
+  65: 'hsl(223, 67%, 65%)',
+  60: 'hsl(223, 67%, 60%)',
+  55: 'hsl(223, 67%, 55%)',
+  50: 'hsl(223, 67%, 50%)',
+  45: 'hsl(223, 67%, 45%)',
+  40: 'hsl(223, 67%, 40%)',
+  35: 'hsl(223, 67%, 35%)',
+  30: 'hsl(223, 67%, 30%)',
+  25: 'hsl(223, 67%, 25%)',
+  18: 'hsl(223, 67%, 18%)', // main
+  15: 'hsl(223, 67%, 15%)',
+  10: 'hsl(223, 67%, 10%)',
+  5: 'hsl(223, 67%, 5%)'
+}
+
+export const digiGreen = {
+  95: 'hsl(139, 100%, 95%)',
+  90: 'hsl(139, 100%, 90%)',
+  85: 'hsl(139, 100%, 85%)',
+  80: 'hsl(139, 100%, 80%)',
+  78: 'hsl(139, 100%, 78%)', // main
+  70: 'hsl(139, 100%, 70%)',
+  65: 'hsl(139, 100%, 65%)',
+  60: 'hsl(139, 100%, 60%)',
+  55: 'hsl(139, 100%, 55%)',
+  50: 'hsl(139, 100%, 50%)',
+  45: 'hsl(139, 100%, 45%)',
+  40: 'hsl(139, 100%, 40%)',
+  35: 'hsl(139, 100%, 35%)',
+  30: 'hsl(139, 100%, 30%)',
+  25: 'hsl(139, 100%, 25%)',
+  20: 'hsl(139, 100%, 20%)',
+  15: 'hsl(139, 100%, 15%)',
+  10: 'hsl(139, 100%, 10%)',
+  5: 'hsl(139, 100%, 5%)'
+}
+
+export const earth = {
+  95: 'hsl(35, 53%, 95%)',
+  89: 'hsl(35, 53%, 89%)', //main
+  85: 'hsl(35, 53%, 85%)',
+  80: 'hsl(35, 53%, 80%)',
+  75: 'hsl(35, 53%, 75%)',
+  70: 'hsl(35, 53%, 70%)',
+  65: 'hsl(35, 53%, 65%)',
+  60: 'hsl(35, 53%, 60%)',
+  55: 'hsl(35, 53%, 55%)',
+  50: 'hsl(35, 53%, 50%)',
+  45: 'hsl(35, 53%, 45%)',
+  40: 'hsl(35, 53%, 40%)',
+  35: 'hsl(35, 53%, 35%)',
+  30: 'hsl(35, 53%, 30%)',
+  25: 'hsl(35, 53%, 25%)',
+  20: 'hsl(35, 53%, 20%)',
+  15: 'hsl(35, 53%, 15%)',
+  10: 'hsl(35, 53%, 10%)',
+  5: 'hsl(35, 53%, 5%)'
+}
+
+export const energyRed = {
+  95: 'hsl(357, 83%, 95%)',
+  90: 'hsl(357, 83%, 90%)',
+  85: 'hsl(357, 83%, 85%)',
+  80: 'hsl(357, 83%, 80%)',
+  75: 'hsl(357, 83%, 75%)',
+  70: 'hsl(357, 83%, 70%)',
+  65: 'hsl(357, 83%, 65%)',
+  60: 'hsl(357, 83%, 60%)',
+  54: 'hsl(357,83%, 54%)', //main
+  50: 'hsl(357, 83%, 50%)',
+  45: 'hsl(357, 83%, 45%)',
+  40: 'hsl(357, 83%, 40%)',
+  35: 'hsl(357, 83%, 35%)',
+  30: 'hsl(357, 83%, 30%)',
+  25: 'hsl(357, 83%, 25%)',
+  20: 'hsl(357, 83%, 20%)',
+  15: 'hsl(357, 83%, 15%)',
+  10: 'hsl(357, 83%, 10%)',
+  5: 'hsl(357, 83%, 5%)'
+}
+
+export const landGreen = {
+  95: 'hsl(114, 49%, 95%)',
+  90: 'hsl(114, 49%, 90%)',
+  85: 'hsl(114, 49%, 85%)',
+  80: 'hsl(114, 49%, 80%)',
+  75: 'hsl(114, 49%, 75%)',
+  70: 'hsl(114, 49%, 70%)',
+  65: 'hsl(114, 49%, 65%)',
+  60: 'hsl(114, 49%, 60%)',
+  55: 'hsl(114, 49%, 55%)',
+  50: 'hsl(114, 49%, 50%)',
+  45: 'hsl(114, 49%, 45%)',
+  41: 'hsl(114, 49%, 41%)', //main
+  35: 'hsl(114, 49%, 35%)',
+  30: 'hsl(114, 49%, 30%)',
+  25: 'hsl(114, 49%, 25%)',
+  20: 'hsl(114, 49%, 20%)',
+  15: 'hsl(114, 49%, 15%)',
+  10: 'hsl(114, 49%, 10%)',
+  5: 'hsl(114, 49%, 5%)'
+}
+
+export const seaBlue = {
+  95: 'hsl(218, 100%, 95%)',
+  90: 'hsl(218, 100%, 90%)',
+  85: 'hsl(218, 100%, 85%)',
+  80: 'hsl(218, 100%, 80%)',
+  75: 'hsl(218, 100%, 75%)',
+  70: 'hsl(218, 100%, 70%)',
+  65: 'hsl(218, 100%, 65%)',
+  60: 'hsl(218, 100%, 60%)',
+  55: 'hsl(218, 100%, 55%)',
+  50: 'hsl(218, 100%, 55%)',
+  45: 'hsl(218, 100%, 45%)',
+  40: 'hsl(218, 100%, 40%)',
+  35: 'hsl(218, 100%, 35%)',
+  28: 'hsl(218, 100%, 28%)', // main
+  25: 'hsl(218, 100%, 25%)',
+  20: 'hsl(218, 100%, 20%)',
+  15: 'hsl(218, 100%, 15%)',
+  10: 'hsl(218, 100%, 10%)',
+  5: 'hsl(218, 100%, 5%)'
+}
+
+export const sandstone = {
+  95: 'hsl(40, 3%, 95%)',
+  90: 'hsl(40, 3%, 90%)',
+  85: 'hsl(40, 3%, 85%)',
+  79: 'hsl(40, 3%, 79%)', //main
+  75: 'hsl(40, 3%, 75%)',
+  70: 'hsl(40, 3%, 70%)',
+  65: 'hsl(40, 3%, 65%)',
+  60: 'hsl(40, 3%, 60%)',
+  55: 'hsl(40, 3%, 55%)',
+  50: 'hsl(40, 3%, 50%)',
+  45: 'hsl(40, 3%, 45%)',
+  40: 'hsl(40, 3%, 40%)',
+  35: 'hsl(40, 3%, 35%)',
+  30: 'hsl(40, 3%, 30%)',
+  25: 'hsl(40, 3%, 25%)',
+  20: 'hsl(40, 3%, 20%)',
+  15: 'hsl(40, 3%, 15%)',
+  10: 'hsl(40, 3%, 10%)',
+  5: 'hsl(40, 3%, 5%)'
+}
+
+export const skyBlue = {
+  97: 'hsl(196, 74%, 97%)',
+  95: 'hsl(196, 74%, 95%)',
+  90: 'hsl(196, 74%, 90%)',
+  85: 'hsl(196, 74%, 85%)',
+  80: 'hsl(196, 74%, 80%)',
+  77: 'hsl(196, 74%, 77%)', // main
+  65: 'hsl(196, 74%, 65%)',
+  60: 'hsl(196, 74%, 60%)',
+  55: 'hsl(196, 74%, 55%)',
+  50: 'hsl(196, 74%, 50%)',
+  45: 'hsl(196, 74%, 45%)',
+  40: 'hsl(196, 74%, 40%)',
+  35: 'hsl(196, 74%, 35%)',
+  30: 'hsl(196, 74%, 30%)',
+  25: 'hsl(196, 74%, 25%)',
+  20: 'hsl(196, 74%, 20%)',
+  15: 'hsl(196, 74%, 15%)',
+  10: 'hsl(196, 74%, 10%)',
+  5: 'hsl(196, 74%, 5%)'
+}
+
+export const sunflower = {
+  95: 'hsl(55, 100%, 95%)',
+  90: 'hsl(55, 100%, 90%)',
+  85: 'hsl(55, 100%, 85%)',
+  80: 'hsl(55, 100%, 80%)',
+  73: 'hsl(55, 100%, 73%)', // main
+  70: 'hsl(55, 100%, 70%)',
+  65: 'hsl(55, 100%, 65%)',
+  60: 'hsl(55, 100%, 60%)',
+  55: 'hsl(55, 100%, 55%)',
+  50: 'hsl(55, 100%, 50%)',
+  45: 'hsl(55, 100%, 45%)',
+  40: 'hsl(55, 100%, 40%)',
+  35: 'hsl(55, 100%, 35%)',
+  30: 'hsl(55, 100%, 30%)',
+  25: 'hsl(55, 100%, 25%)',
+  20: 'hsl(55, 100%, 20%)',
+  15: 'hsl(55, 100%, 15%)',
+  10: 'hsl(55, 100%, 10%)',
+  5: 'hsl(55, 100%, 5%)'
+}
+
+export const terracotta = {
+  95: 'hsl(34, 100%, 95%)',
+  90: 'hsl(34, 100%, 90%)',
+  85: 'hsl(34, 100%, 85%)',
+  80: 'hsl(34, 100%, 80%)',
+  75: 'hsl(34, 100%, 75%)',
+  70: 'hsl(34, 100%, 70%)',
+  65: 'hsl(34, 100%, 65%)',
+  60: 'hsl(34, 100%, 60%)',
+  55: 'hsl(34, 100%, 55%)',
+  50: 'hsl(34, 100%, 50%)',
+  45: 'hsl(34, 100%, 45%)',
+  40: 'hsl(34, 100%, 40%)',
+  35: 'hsl(34, 100%, 35%)', // main
+  30: 'hsl(34, 100%, 30%)',
+  25: 'hsl(34, 100%, 25%)',
+  20: 'hsl(34, 100%, 20%)',
+  15: 'hsl(34, 100%, 15%)',
+  10: 'hsl(34, 100%, 10%)',
+  5: 'hsl(34, 100%, 5%)'
+}
+
+export const warmGrey = {
+  95: 'hsl(30, 8%, 95%)',
+  90: 'hsl(30, 8%, 90%)',
+  85: 'hsl(30, 8%, 85%)',
+  80: 'hsl(30, 8%, 80%)',
+  75: 'hsl(30, 8%, 75%)',
+  70: 'hsl(30, 8%, 70%)',
+  65: 'hsl(30, 8%, 65%)',
+  60: 'hsl(30, 8%, 60%)',
+  56: 'hsl(30, 8%, 56%)', // main
+  50: 'hsl(30, 8%, 50%)',
+  45: 'hsl(30, 8%, 45%)',
+  40: 'hsl(30, 8%, 40%)',
+  35: 'hsl(30, 8%, 35%)',
+  30: 'hsl(30, 8%, 30%)',
+  25: 'hsl(30, 8%, 25%)',
+  20: 'hsl(30, 8%, 20%)',
+  15: 'hsl(30, 8%, 15%)',
+  10: 'hsl(30, 8%, 10%)',
+  5: 'hsl(30, 8%, 5%)'
+}
+
 export const blue = {
   10: '#f6fbff',
   20: '#e2f1ff',
@@ -96,6 +424,77 @@ export const disabled = {
 }
 
 export default {
+  buttonTypePrimaryDefaultBorderColorDark,
+  buttonTypePrimaryDefaultBackgroundColorDark,
+  buttonTypePrimaryDefaultTextColorDark,
+  buttonTypePrimaryHoverBackgroundColorDark,
+  buttonTypePrimaryHoverBorderColorDark,
+  buttonTypePrimaryHoverTextColorDark,
+  buttonTypePrimaryActiveBackgroundColorDark,
+  buttonTypePrimaryActiveBorderColorDark,
+  buttonTypePrimaryActiveTextColorDark,
+  buttonTypePrimaryDefaultBorderColorLight,
+  buttonTypePrimaryDefaultBackgroundColorLight,
+  buttonTypePrimaryDefaultTextColorLight,
+  buttonTypePrimaryFocusOutline,
+  buttonTypePrimaryHoverBackgroundColorLight,
+  buttonTypePrimaryHoverBorderColorLight,
+  buttonTypePrimaryHoverTextColorLight,
+  buttonTypePrimaryActiveBackgroundColorLight,
+  buttonTypePrimaryActiveBorderColorLight,
+  buttonTypePrimaryActiveTextColorLight,
+  buttonTypeSecondaryDefaultBorderColorDark,
+  buttonTypeSecondaryDefaultBackgroundColorDark,
+  buttonTypeSecondaryDefaultTextColorDark,
+  buttonTypeSecondaryFocusOutline,
+  buttonTypeSecondaryHoverBackgroundColorDark,
+  buttonTypeSecondaryHoverBorderColorDark,
+  buttonTypeSecondaryHoverTextColorDark,
+  buttonTypeSecondaryActiveBackgroundColorDark,
+  buttonTypeSecondaryActiveBorderColorDark,
+  buttonTypeSecondaryActiveTextColorDark,
+  buttonTypeSecondaryDefaultBorderColorLight,
+  buttonTypeSecondaryDefaultBackgroundColorLight,
+  buttonTypeSecondaryDefaultTextColorLight,
+  buttonTypeSecondaryHoverBackgroundColorLight,
+  buttonTypeSecondaryHoverBorderColorLight,
+  buttonTypeSecondaryHoverTextColorLight,
+  buttonTypeSecondaryActiveBackgroundColorLight,
+  buttonTypeSecondaryActiveBorderColorLight,
+  buttonTypeSecondaryActiveTextColorLight,
+  buttonTypeTertiaryDefaultBorderColorDark,
+  buttonTypeTertiaryDefaultBackgroundColorDark,
+  buttonTypeTertiaryDefaultTextColorDark,
+  buttonTypeTertiaryHoverBackgroundColorDark,
+  buttonTypeTertiaryHoverBorderColorDark,
+  buttonTypeTertiaryHoverTextColorDark,
+  buttonTypeTertiaryFocusOutline,
+  buttonTypeTertiaryActiveBackgroundColorDark,
+  buttonTypeTertiaryActiveBorderColorDark,
+  buttonTypeTertiaryActiveTextColorDark,
+  buttonTypeTertiaryDefaultBorderColorLight,
+  buttonTypeTertiaryDefaultBackgroundColorLight,
+  buttonTypeTertiaryDefaultTextColorLight,
+  buttonTypeTertiaryHoverBackgroundColorLight,
+  buttonTypeTertiaryHoverBorderColorLight,
+  buttonTypeTertiaryHoverTextColorLight,
+  buttonTypeTertiaryActiveBackgroundColorLight,
+  buttonTypeTertiaryActiveBorderColorLight,
+  buttonTypeTertiaryActiveTextColorLight,
+  buttonDisabledCursor,
+  buttonDisabledOpacity,
+  darkBlue,
+  digiGreen,
+  earth,
+  energyRed,
+  focusColor,
+  landGreen,
+  sandstone,
+  seaBlue,
+  skyBlue,
+  sunflower,
+  terracotta,
+  warmGrey,
   blue,
   green,
   grey,

package/src/theme/foundations/fontWeights.ts

@@ -1,6 +1,5 @@
 export default {
   regular: '400',
   medium: '500',
-  demi: '600',
-  bold: '700'
+  demi: '600'
 }

package/src/theme/foundations/radii.ts

@@ -1,7 +1,12 @@
 export default {
   none: 0,
-  sm: 4,
-  md: 6,
-  lg: 10,
+  /** sm radius. @deprecated */
+  sm: 0,
+  /** md radius. @deprecated */
+  md: 2,
+  /** lg radius. @deprecated */
+  lg: 4,
+  /** xl radius. @deprecated */
+  xl: 6,
   round: 9999
 }

package/src/theme/typing.d.ts

@@ -0,0 +1 @@
+declare module '@dnvgl-onefoundation/onedesign-tokens/dist/js/es6/rem/button'

package/src/toast/useToast.tsx

@@ -43,10 +43,11 @@ export const useToast = () => {
           icon={icon}
           mt={{ md: 1, sm: '4px', xs: '4px' }}
           onClose={onClose}
-          shadow={1}
+          shadow={3}
           status={status as NotificationStatus}
           text={text}
           title={title}
+          verticalAlign="center"
           w={1}
         />
       )

package/src/tutorial/tutorialCard.tsx

@@ -55,7 +55,14 @@ export function TutorialCard({
       >
         <H3>{title}</H3>
         {!isFinalStep && (
-          <Button color="white" hoverColor="prussian.80" icon="falTimes" onClick={onDismiss} scale={2} variant="text" />
+          <Button
+            color="white"
+            hoverColor="prussian.80"
+            icon="falTimes"
+            onClick={onDismiss}
+            scale={2}
+            variant="tertiaryDark"
+          />
         )}
       </Box>
       <Box column flex={5} hidden={started} mx={2}>
@@ -102,7 +109,7 @@ export function TutorialCard({
           onClick={decrementStep}
           scale={2}
           transition="none"
-          variant="text"
+          variant="tertiaryDark"
           w="80"
         />
 
@@ -127,7 +134,7 @@ export function TutorialCard({
             onClick={incrementStep}
             scale={2}
             transition="none"
-            variant="text"
+            variant="tertiaryDark"
             w="80"
           />
         )}

package/dist/cjs/accordion/accordionItemHorizontal.d.ts

@@ -1,5 +0,0 @@
-import { AccordionItemProps } from './accordion.types';
-/** An accordion item (horizontal orientation). */
-export declare const AccordionItemHorizontal: (props: AccordionItemProps) => JSX.Element;
-export default AccordionItemHorizontal;
-//# sourceMappingURL=accordionItemHorizontal.d.ts.map

package/dist/cjs/accordion/accordionItemHorizontal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAmFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/cjs/accordion/accordionItemHorizontal.js

@@ -1,70 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionItemHorizontal = void 0;
-const react_1 = __importStar(require("react"));
-const box_1 = __importDefault(require("../box"));
-const core_1 = require("../core");
-const utils_1 = require("../utils");
-const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
-const context_1 = require("./context");
-/** An accordion item (horizontal orientation). */
-const AccordionItemHorizontal = (props) => {
-    const _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "itemTitleHoverBg", "title", "onToggle"]);
-    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
-    const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
-    (0, react_1.useEffect)(() => {
-        setIsCollapsedInternal(!!collapsed);
-    }, [collapsed]);
-    const toggle = () => {
-        if (!disabled) {
-            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
-            setIsCollapsedInternal(!collapsedInternal);
-        }
-    };
-    const cursor = disabled ? 'not-allowed' : 'pointer';
-    const fontWeight = typeof title === 'string' ? '500' : 'inherit';
-    return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, rest),
-        react_1.default.createElement(box_1.default, Object.assign({}, styles.item, { cursor: cursor, hoverBg: itemTitleHoverBg, justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" }),
-            !collapsedInternal && react_1.default.createElement(box_1.default, { fontWeight: fontWeight }, title),
-            react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, orientation: "horizontal" })),
-        !collapsedInternal ? (react_1.default.createElement(box_1.default, { p: styles.item.pt, pt: 0, transitionDuration: "0ms" }, children !== null && children !== void 0 ? children : content)) : (react_1.default.createElement(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
-};
-exports.AccordionItemHorizontal = AccordionItemHorizontal;
-exports.default = exports.AccordionItemHorizontal;

package/dist/cjs/copyToClipboard/copyToClipboard.d.ts

@@ -1,12 +0,0 @@
-import { CopyToClipboardProps } from './copyToClipboard.types';
-/**
- * A helper button component.
- *
- * Copies the provided text to clipboard.
- *
- * Copying is available only for a secure environment (https://), otherwise the button is disabled.
- *
- */
-export declare const CopyToClipboard: import("../core").VuiComponent<"button", CopyToClipboardProps>;
-export default CopyToClipboard;
-//# sourceMappingURL=copyToClipboard.d.ts.map

package/dist/cjs/copyToClipboard/copyToClipboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"copyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/copyToClipboard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAG9D;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,gEAiB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/cjs/copyToClipboard/copyToClipboard.js

@@ -1,36 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyToClipboard = void 0;
-const react_1 = __importDefault(require("react"));
-const button_1 = __importDefault(require("../button"));
-const core_1 = require("../core");
-const utils_1 = require("../utils");
-const useCopyToClipboard_1 = require("./useCopyToClipboard");
-/**
- * A helper button component.
- *
- * Copies the provided text to clipboard.
- *
- * Copying is available only for a secure environment (https://), otherwise the button is disabled.
- *
- */
-exports.CopyToClipboard = (0, core_1.vui)((props, ref) => {
-    const { disabled, copyText, className, size = 'xs', variant = 'text' } = props, rest = __rest(props, ["disabled", "copyText", "className", "size", "variant"]);
-    const { copy, isCopyDisabled } = (0, useCopyToClipboard_1.useCopyToClipboard)(copyText);
-    return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-copy-to-clipboard', className), disabled: disabled || isCopyDisabled, icon: "falCopy", onClick: () => copy(), ref: ref, size: size, variant: variant }, rest)));
-});
-exports.default = exports.CopyToClipboard;

package/dist/cjs/copyToClipboard/copyToClipboard.types.d.ts

@@ -1,9 +0,0 @@
-import { SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export declare type CopyToClipboardProps = SystemProps & ThemingProps<'Button'> & {
-    /** Text string for copying */
-    copyText: string;
-    /** Button size @default "xs" */
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-};
-//# sourceMappingURL=copyToClipboard.types.d.ts.map

package/dist/cjs/copyToClipboard/copyToClipboard.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"copyToClipboard.types.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/copyToClipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,oBAAoB,GAAG,WAAW,GAC5C,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC,CAAA"}

package/dist/cjs/copyToClipboard/index.d.ts

@@ -1,5 +0,0 @@
-export * from './copyToClipboard';
-export { default } from './copyToClipboard';
-export * from './copyToClipboard.types';
-export * from './useCopyToClipboard';
-//# sourceMappingURL=index.d.ts.map

package/dist/cjs/copyToClipboard/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA"}

package/dist/cjs/copyToClipboard/useCopyToClipboard.d.ts

@@ -1,5 +0,0 @@
-export declare const useCopyToClipboard: (copyText: string) => {
-    copy: () => void;
-    isCopyDisabled: boolean;
-};
-//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/cjs/copyToClipboard/useCopyToClipboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/useCopyToClipboard.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,aAAc,MAAM;;;CAYlD,CAAA"}