@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/components/Button/Button.tokens.js

@@ -1,469 +1,352 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 import { calculateHeightWithLineHeight } from '../../utils/text.js';
 import '../../utils/color.js';
-import 'styled-components';
-import { focusVisible } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
 
-var Colors = ddsBaseTokens.colors,
-    Border = ddsBaseTokens.border,
-    Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages,
-    BorderRadius = ddsBaseTokens.borderRadius,
-    OuterShadow = ddsBaseTokens.outerShadow;
-var iconSizeTinyPx = calculateHeightWithLineHeight(FontPackages.supportingStyle_tiny_01.numbers.lineHeightNumber, FontPackages.supportingStyle_tiny_01.numbers.fontSizeNumber);
-var iconSizeSmallPx = calculateHeightWithLineHeight(FontPackages.body_sans_01.numbers.lineHeightNumber, FontPackages.body_sans_01.numbers.fontSizeNumber);
-var iconSizeMediumPx = calculateHeightWithLineHeight(FontPackages.body_sans_02.numbers.lineHeightNumber, FontPackages.body_sans_02.numbers.fontSizeNumber);
-var iconSizeLargePx = calculateHeightWithLineHeight(FontPackages.body_sans_04.numbers.lineHeightNumber, FontPackages.body_sans_04.numbers.fontSizeNumber);
-var svgOffset = Spacing.SizesDdsSpacingLocalX0125NumberPx;
-var justIconSmallBase = {
-  fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
-  padding: Spacing.SizesDdsSpacingLocalX05
-};
-var justIconWrapperSmallBase = {
-  height: "".concat(iconSizeSmallPx, "px"),
-  width: "".concat(iconSizeSmallPx, "px")
-};
-var textSmallBase = Object.assign(Object.assign({}, FontPackages.body_sans_01.base), {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1NumberPx - 2, "px")
-});
-var justIconMediumBase = {
-  fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
-  padding: Spacing.SizesDdsSpacingLocalX075
-};
-var justIconWrapperMediumBase = {
-  height: "".concat(iconSizeMediumPx, "px"),
-  width: "".concat(iconSizeMediumPx, "px")
-};
-var textMediumBase = Object.assign(Object.assign({}, FontPackages.body_sans_02.base), {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX15NumberPx - 2, "px")
-});
-var justIconLargeBase = {
-  fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
-  padding: Spacing.SizesDdsSpacingLocalX1
-};
-var justIconWrapperLargeBase = {
-  height: "".concat(iconSizeLargePx, "px"),
-  width: "".concat(iconSizeLargePx, "px")
-};
-var textLargeBase = Object.assign(Object.assign({}, FontPackages.body_sans_04.base), {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX2NumberPx - 2, "px")
-});
-var justIconTinyBase = {
-  fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
-  padding: Spacing.SizesDdsSpacingLocalX025
-};
-var justIconWrapperTinyBase = {
-  height: "".concat(iconSizeTinyPx, "px"),
-  width: "".concat(iconSizeTinyPx, "px")
-};
-var textTinyBase = Object.assign(Object.assign({}, FontPackages.supportingStyle_tiny_01.base), {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX075)
-});
-var buttonBase = {
-  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid")
-};
+var colors = ddsBaseTokens.colors,
+    border = ddsBaseTokens.border,
+    spacing = ddsBaseTokens.spacing,
+    fontPackages = ddsBaseTokens.fontPackages,
+    borderRadius = ddsBaseTokens.borderRadius,
+    outerShadow = ddsBaseTokens.outerShadow;
+var typographyTypes = {
+  large: 'bodySans04',
+  medium: 'bodySans02',
+  small: 'bodySans01',
+  tiny: 'supportingStyleTiny01'
+};
+var iconSizeTinyPx = calculateHeightWithLineHeight(fontPackages.supportingStyle_tiny_01.numbers.lineHeightNumber, fontPackages.supportingStyle_tiny_01.numbers.fontSizeNumber);
+var iconSizeSmallPx = calculateHeightWithLineHeight(fontPackages.body_sans_01.numbers.lineHeightNumber, fontPackages.body_sans_01.numbers.fontSizeNumber);
+var iconSizeMediumPx = calculateHeightWithLineHeight(fontPackages.body_sans_02.numbers.lineHeightNumber, fontPackages.body_sans_02.numbers.fontSizeNumber);
+var iconSizeLargePx = calculateHeightWithLineHeight(fontPackages.body_sans_04.numbers.lineHeightNumber, fontPackages.body_sans_04.numbers.fontSizeNumber);
+var svgOffset = spacing.SizesDdsSpacingLocalX0125NumberPx;
 var filledButtonColors = {
   primary: {
     base: {
-      color: Colors.DdsColorNeutralsWhite,
-      backgroundColor: Colors.DdsColorInteractiveBase,
-      borderColor: Colors.DdsColorInteractiveBase
+      color: colors.DdsColorNeutralsWhite,
+      backgroundColor: colors.DdsColorInteractiveBase,
+      borderColor: colors.DdsColorInteractiveBase
     },
     hover: {
       base: {
-        backgroundColor: Colors.DdsColorInteractiveDark,
-        borderColor: Colors.DdsColorInteractiveDark
+        backgroundColor: colors.DdsColorInteractiveDark,
+        borderColor: colors.DdsColorInteractiveDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors.DdsColorInteractiveDarker,
-        borderColor: Colors.DdsColorInteractiveDarker
+        backgroundColor: colors.DdsColorInteractiveDarker,
+        borderColor: colors.DdsColorInteractiveDarker
       }
     }
   },
   secondary: {
     base: {
-      color: Colors.DdsColorNeutralsGray8,
-      backgroundColor: Colors.DdsColorNeutralsGray1,
-      borderColor: Colors.DdsColorNeutralsGray5
+      color: colors.DdsColorNeutralsGray8,
+      backgroundColor: colors.DdsColorNeutralsGray1,
+      borderColor: colors.DdsColorNeutralsGray5
     },
     hover: {
       base: {
-        backgroundColor: Colors.DdsColorNeutralsGray2
+        backgroundColor: colors.DdsColorNeutralsGray2,
+        borderColor: colors.DdsColorNeutralsGray5
       }
     },
     active: {
       base: {
-        backgroundColor: Colors.DdsColorNeutralsGray3
+        backgroundColor: colors.DdsColorNeutralsGray3,
+        borderColor: colors.DdsColorNeutralsGray5
       }
     }
   },
   danger: {
     base: {
-      color: Colors.DdsColorNeutralsWhite,
-      backgroundColor: Colors.DdsColorDangerBase,
-      borderColor: Colors.DdsColorDangerBase
+      color: colors.DdsColorNeutralsWhite,
+      backgroundColor: colors.DdsColorDangerBase,
+      borderColor: colors.DdsColorDangerBase
     },
     hover: {
       base: {
-        backgroundColor: Colors.DdsColorDangerDark,
-        borderColor: Colors.DdsColorDangerDark
+        backgroundColor: colors.DdsColorDangerDark,
+        borderColor: colors.DdsColorDangerDark
       }
     },
     active: {
       base: {
-        backgroundColor: Colors.DdsColorDangerDarker,
-        borderColor: Colors.DdsColorDangerDarker
+        backgroundColor: colors.DdsColorDangerDarker,
+        borderColor: colors.DdsColorDangerDarker
       }
     }
   }
 };
-var filledBase = {
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  boxShadow: OuterShadow.DdsShadow1Onlight
-};
-var filledPrimaryBase = Object.assign({}, filledButtonColors.primary.base);
-var filledPrimaryHoverBase = Object.assign({}, filledButtonColors.primary.hover.base);
-var filledPrimaryActiveBase = Object.assign({}, filledButtonColors.primary.active.base);
-var filledSecondaryBase = Object.assign({}, filledButtonColors.secondary.base);
-var filledSecondaryHoverBase = Object.assign({}, filledButtonColors.secondary.hover.base);
-var filledSecondaryActiveBase = Object.assign({}, filledButtonColors.secondary.active.base);
-var filledDangerBase = Object.assign({}, filledButtonColors.danger.base);
-var filledDangerHoverBase = Object.assign({}, filledButtonColors.danger.hover.base);
-var filledDangerActiveBase = Object.assign({}, filledButtonColors.danger.active.base);
-var roundedPrimaryBase = Object.assign({}, filledButtonColors.primary.base);
-var roundedPrimaryHoverBase = Object.assign({}, filledButtonColors.primary.hover.base);
-var roundedPrimaryActiveBase = Object.assign({}, filledButtonColors.primary.active.base);
-var roundedSecondaryBase = Object.assign({}, filledButtonColors.secondary.base);
-var roundedSecondaryHoverBase = Object.assign({}, filledButtonColors.secondary.hover.base);
-var roundedSecondaryActiveBase = Object.assign({}, filledButtonColors.secondary.active.base);
-var roundedDangerBase = Object.assign({}, filledButtonColors.danger.base);
-var roundedDangerHoverBase = Object.assign({}, filledButtonColors.danger.hover.base);
-var roundedDangerActiveBase = Object.assign({}, filledButtonColors.danger.active.base);
-var borderlessBase = {
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  boxShadow: 'none',
-  backgroundColor: 'transparent',
-  borderColor: 'transparent',
-  textDecoration: 'underline',
-  textDecorationColor: 'transparent'
-};
-var borderlessPrimaryBase = {
-  color: Colors.DdsColorInteractiveBase,
-  taxtDecorationColor: Colors.DdsColorInteractiveBase
-};
-var borderlessPrimaryHoverBase = {
-  color: Colors.DdsColorInteractiveDark,
-  textDecorationColor: Colors.DdsColorInteractiveDark
-};
-var borderlessPrimaryActiveBase = {
-  color: Colors.DdsColorInteractiveDarker,
-  textDecorationColor: Colors.DdsColorInteractiveDarker
-};
-var borderlessPrimaryIconHoverBase = {
-  borderColor: Colors.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorInteractiveDark)
-};
-var borderlessPrimaryIconActiveBase = {
-  borderColor: Colors.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorInteractiveDarker)
-};
-var borderlessSecondaryBase = {
-  color: Colors.DdsColorNeutralsGray7
-};
-var borderlessSecondaryHoverBase = {
-  color: Colors.DdsColorNeutralsGray8,
-  textDecorationColor: Colors.DdsColorNeutralsGray8
-};
-var borderlessSecondaryActiveBase = {
-  color: Colors.DdsColorNeutralsGray9,
-  textDecorationColor: Colors.DdsColorNeutralsGray9
-};
-var borderlessSecondaryIconHoverBase = {
-  borderColor: Colors.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorNeutralsGray8)
-};
-var borderlessSecondaryIconActiveBase = {
-  borderColor: Colors.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorNeutralsGray9)
-};
-var borderlessDangerBase = {
-  color: Colors.DdsColorDangerBase
-};
-var borderlessDangerHoverBase = {
-  color: Colors.DdsColorDangerDarker,
-  textDecorationColor: Colors.DdsColorDangerDarker
-};
-var borderlessDangerActiveBase = {
-  color: Colors.DdsColorDangerDarkest,
-  textDecorationColor: Colors.DdsColorDangerDarkest
-};
-var borderlessDangerIconHoverBase = {
-  borderColor: Colors.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerDark)
-};
-var borderlessDangerIconActiveBase = {
-  borderColor: Colors.DdsColorDangerDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerDarker)
-};
-var ghostBase = {
-  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
-  boxShadow: 'none',
-  backgroundColor: 'transparent'
-};
-var ghostPrimaryBase = {
-  color: Colors.DdsColorInteractiveBase,
-  borderColor: Colors.DdsColorInteractiveBase
-};
-var ghostPrimaryHoverBase = {
-  color: Colors.DdsColorInteractiveDark,
-  borderColor: Colors.DdsColorInteractiveDark,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorInteractiveDark)
-};
-var ghostPrimaryActiveBase = {
-  color: Colors.DdsColorInteractiveDarker,
-  borderColor: Colors.DdsColorInteractiveDarker,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorInteractiveDarker)
-};
-var ghostSecondaryBase = {
-  color: Colors.DdsColorNeutralsGray7,
-  borderColor: Colors.DdsColorNeutralsGray7
-};
-var ghostSecondaryHoverBase = {
-  color: Colors.DdsColorNeutralsGray8,
-  borderColor: Colors.DdsColorNeutralsGray8,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorNeutralsGray8)
-};
-var ghostSecondaryActiveBase = {
-  color: Colors.DdsColorNeutralsGray9,
-  borderColor: Colors.DdsColorNeutralsGray9,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorNeutralsGray9)
-};
-var ghostDangerBase = {
-  color: Colors.DdsColorDangerBase,
-  borderColor: Colors.DdsColorDangerBase
-};
-var ghostDangerHoverBase = {
-  color: Colors.DdsColorDangerDark,
-  borderColor: Colors.DdsColorDangerDark,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerDark)
-};
-var ghostDangerActiveBase = {
-  color: Colors.DdsColorDangerDarkest,
-  borderColor: Colors.DdsColorDangerDarkest,
-  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerDarkest)
-};
-var roundedBase = {
-  borderRadius: '100px',
-  boxShadow: OuterShadow.DdsShadow1Onlight
-};
-var focusBase = Object.assign({}, focusVisible);
-var buttonTokens = {
-  base: buttonBase,
-  focus: {
-    base: focusBase
-  },
-  sizes: {
-    small: {
-      justIcon: {
-        base: justIconSmallBase
+var sizes = {
+  large: {
+    justIcon: {
+      icon: {
+        fontSize: "".concat(iconSizeLargePx + svgOffset, "px"),
+        padding: spacing.SizesDdsSpacingLocalX1
       },
-      justIconWrapper: {
-        base: justIconWrapperSmallBase
-      },
-      text: {
-        base: textSmallBase
-      },
-      iconWithTextMargin: Spacing.SizesDdsSpacingLocalX05
+      wrapper: {
+        height: "".concat(iconSizeLargePx, "px"),
+        width: "".concat(iconSizeLargePx, "px")
+      }
     },
-    medium: {
-      justIcon: {
-        base: justIconMediumBase
-      },
-      justIconWrapper: {
-        base: justIconWrapperMediumBase
-      },
-      text: {
-        base: textMediumBase
-      },
-      iconWithTextMargin: Spacing.SizesDdsSpacingLocalX075
+    text: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX2NumberPx - 2, "px")
     },
-    large: {
-      justIcon: {
-        base: justIconLargeBase
-      },
-      justIconWrapper: {
-        base: justIconWrapperLargeBase
-      },
-      text: {
-        base: textLargeBase
+    textAndIcon: {
+      gap: spacing.SizesDdsSpacingLocalX1
+    }
+  },
+  medium: {
+    justIcon: {
+      icon: {
+        fontSize: "".concat(iconSizeMediumPx + svgOffset, "px"),
+        padding: spacing.SizesDdsSpacingLocalX075
       },
-      iconWithTextMargin: Spacing.SizesDdsSpacingLocalX1
+      wrapper: {
+        height: "".concat(iconSizeMediumPx, "px"),
+        width: "".concat(iconSizeMediumPx, "px")
+      }
     },
-    tiny: {
-      justIcon: {
-        base: justIconTinyBase
-      },
-      justIconWrapper: {
-        base: justIconWrapperTinyBase
-      },
-      text: {
-        base: textTinyBase
+    text: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15NumberPx - 2, "px")
+    },
+    textAndIcon: {
+      gap: spacing.SizesDdsSpacingLocalX075
+    }
+  },
+  small: {
+    justIcon: {
+      icon: {
+        fontSize: "".concat(iconSizeSmallPx + svgOffset, "px"),
+        padding: spacing.SizesDdsSpacingLocalX05
       },
-      iconWithTextMargin: Spacing.SizesDdsSpacingLocalX05
+      wrapper: {
+        height: "".concat(iconSizeSmallPx, "px"),
+        width: "".concat(iconSizeSmallPx, "px")
+      }
+    },
+    text: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+    },
+    textAndIcon: {
+      gap: spacing.SizesDdsSpacingLocalX05
     }
   },
-  appearance: {
-    filled: {
-      base: filledBase,
+  tiny: {
+    justIcon: {
+      icon: {
+        fontSize: "".concat(iconSizeTinyPx + svgOffset, "px"),
+        padding: spacing.SizesDdsSpacingLocalX025
+      },
+      wrapper: {
+        height: "".concat(iconSizeTinyPx, "px"),
+        width: "".concat(iconSizeTinyPx, "px")
+      }
+    },
+    text: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX075)
+    },
+    textAndIcon: {
+      gap: spacing.SizesDdsSpacingLocalX05
+    }
+  }
+};
+var appearances = {
+  filled: {
+    base: {
+      borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+      boxShadow: outerShadow.DdsShadow1Onlight
+    },
+    purpose: {
       primary: {
-        base: filledPrimaryBase,
-        hover: {
-          base: filledPrimaryHoverBase
-        },
-        active: {
-          base: filledPrimaryActiveBase
-        }
+        base: filledButtonColors.primary.base,
+        hover: filledButtonColors.primary.hover.base,
+        active: filledButtonColors.primary.active.base
       },
       secondary: {
-        base: filledSecondaryBase,
-        hover: {
-          base: filledSecondaryHoverBase
-        },
-        active: {
-          base: filledSecondaryActiveBase
-        }
+        base: filledButtonColors.secondary.base,
+        hover: filledButtonColors.secondary.hover.base,
+        active: filledButtonColors.secondary.active.base
       },
       danger: {
-        base: filledDangerBase,
-        hover: {
-          base: filledDangerHoverBase
-        },
-        active: {
-          base: filledDangerActiveBase
-        }
+        base: filledButtonColors.danger.base,
+        hover: filledButtonColors.danger.hover.base,
+        active: filledButtonColors.danger.active.base
       }
+    }
+  },
+  ghost: {
+    base: {
+      borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+      boxShadow: 'none',
+      backgroundColor: 'transparent'
     },
-    ghost: {
-      base: ghostBase,
+    purpose: {
       primary: {
-        base: ghostPrimaryBase,
+        base: {
+          color: colors.DdsColorInteractiveBase,
+          borderColor: colors.DdsColorInteractiveBase
+        },
         hover: {
-          base: ghostPrimaryHoverBase
+          color: colors.DdsColorInteractiveDark,
+          borderColor: colors.DdsColorInteractiveDark,
+          boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDark)
         },
         active: {
-          base: ghostPrimaryActiveBase
+          color: colors.DdsColorInteractiveDarker,
+          borderColor: colors.DdsColorInteractiveDarker,
+          boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDarker)
         }
       },
       secondary: {
-        base: ghostSecondaryBase,
+        base: {
+          color: colors.DdsColorNeutralsGray7,
+          borderColor: colors.DdsColorNeutralsGray7
+        },
         hover: {
-          base: ghostSecondaryHoverBase
+          color: colors.DdsColorNeutralsGray8,
+          borderColor: colors.DdsColorNeutralsGray8,
+          boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray8)
         },
         active: {
-          base: ghostSecondaryActiveBase
+          color: colors.DdsColorNeutralsGray9,
+          borderColor: colors.DdsColorNeutralsGray9,
+          boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray9)
         }
       },
       danger: {
-        base: ghostDangerBase,
+        base: {
+          color: colors.DdsColorDangerBase,
+          borderColor: colors.DdsColorDangerBase
+        },
         hover: {
-          base: ghostDangerHoverBase
+          color: colors.DdsColorDangerDark,
+          borderColor: colors.DdsColorDangerDark,
+          boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDark)
         },
         active: {
-          base: ghostDangerActiveBase
+          color: colors.DdsColorDangerDarkest,
+          borderColor: colors.DdsColorDangerDarkest,
+          boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDarkest)
         }
       }
+    }
+  },
+  borderless: {
+    base: {
+      borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+      boxShadow: 'none',
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      textDecoration: 'underline',
+      textDecorationColor: 'transparent'
     },
-    borderless: {
-      base: borderlessBase,
+    purpose: {
       primary: {
-        base: borderlessPrimaryBase,
+        base: {
+          color: colors.DdsColorInteractiveBase
+        },
         hover: {
-          base: borderlessPrimaryHoverBase
+          color: colors.DdsColorInteractiveDark,
+          textDecorationColor: colors.DdsColorInteractiveDark
         },
         active: {
-          base: borderlessPrimaryActiveBase
+          color: colors.DdsColorInteractiveDarker,
+          textDecorationColor: colors.DdsColorInteractiveDarker
         },
-        justIcon: {
+        icon: {
           hover: {
-            base: borderlessPrimaryIconHoverBase
+            borderColor: colors.DdsColorInteractiveDark,
+            boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDark)
           },
           active: {
-            base: borderlessPrimaryIconActiveBase
+            borderColor: colors.DdsColorInteractiveDarker,
+            boxShadow: "0 0 0 1px ".concat(colors.DdsColorInteractiveDarker)
           }
         }
       },
       secondary: {
-        base: borderlessSecondaryBase,
+        base: {
+          color: colors.DdsColorNeutralsGray7
+        },
         hover: {
-          base: borderlessSecondaryHoverBase
+          color: colors.DdsColorNeutralsGray8,
+          textDecorationColor: colors.DdsColorNeutralsGray8
         },
         active: {
-          base: borderlessSecondaryActiveBase
+          color: colors.DdsColorNeutralsGray9,
+          textDecorationColor: colors.DdsColorNeutralsGray9
         },
-        justIcon: {
+        icon: {
           hover: {
-            base: borderlessSecondaryIconHoverBase
+            borderColor: colors.DdsColorNeutralsGray8,
+            boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray8)
           },
           active: {
-            base: borderlessSecondaryIconActiveBase
+            borderColor: colors.DdsColorNeutralsGray9,
+            boxShadow: "0 0 0 1px ".concat(colors.DdsColorNeutralsGray9)
           }
         }
       },
       danger: {
-        base: borderlessDangerBase,
+        base: {
+          color: colors.DdsColorDangerBase
+        },
         hover: {
-          base: borderlessDangerHoverBase
+          color: colors.DdsColorDangerDarker,
+          textDecorationColor: colors.DdsColorDangerDarker
         },
         active: {
-          base: borderlessDangerActiveBase
+          color: colors.DdsColorDangerDarkest,
+          textDecorationColor: colors.DdsColorDangerDarkest
         },
-        justIcon: {
+        icon: {
           hover: {
-            base: borderlessDangerIconHoverBase
+            borderColor: colors.DdsColorDangerDark,
+            boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDark)
           },
           active: {
-            base: borderlessDangerIconActiveBase
+            borderColor: colors.DdsColorDangerDarker,
+            boxShadow: "0 0 0 1px ".concat(colors.DdsColorDangerDarker)
           }
         }
       }
+    }
+  },
+  rounded: {
+    base: {
+      borderRadius: '100px',
+      boxShadow: outerShadow.DdsShadow1Onlight
     },
-    rounded: {
-      base: roundedBase,
+    purpose: {
       primary: {
-        base: roundedPrimaryBase,
-        hover: {
-          base: roundedPrimaryHoverBase
-        },
-        active: {
-          base: roundedPrimaryActiveBase
-        }
+        base: filledButtonColors.primary.base,
+        hover: filledButtonColors.primary.hover.base,
+        active: filledButtonColors.primary.active.base
       },
       secondary: {
-        base: roundedSecondaryBase,
-        hover: {
-          base: roundedSecondaryHoverBase
-        },
-        active: {
-          base: roundedSecondaryActiveBase
-        }
+        base: filledButtonColors.secondary.base,
+        hover: filledButtonColors.secondary.hover.base,
+        active: filledButtonColors.secondary.active.base
       },
       danger: {
-        base: roundedDangerBase,
-        hover: {
-          base: roundedDangerHoverBase
-        },
-        active: {
-          base: roundedDangerActiveBase
-        }
+        base: filledButtonColors.danger.base,
+        hover: filledButtonColors.danger.hover.base,
+        active: filledButtonColors.danger.active.base
       }
     }
   }
 };
+var button = {
+  base: {
+    border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid")
+  },
+  sizes: sizes,
+  appearances: appearances
+};
+var buttonTokens = {
+  button: button
+};
 
-export { buttonTokens };
+export { buttonTokens, typographyTypes };