@norges-domstoler/dds-components 24.2.1 → 24.2.2

package/dist/index.css

@@ -135,6 +135,7 @@
   --dds-color-surface-default: #181a1c; /* Default bg */
   --dds-color-surface-subtle: #22272a; /* Subtle surface color */
   --dds-color-surface-medium: #303438; /* Medium surface color */
+  --dds-color-surface-strong: #444444; /* Strong surface color */
   --dds-color-surface-hover-default: #062c45; /* Hover on surface (default, subtle, medium) */
   --dds-color-surface-hover-subtle: #22272a; /* Subtle hover on surface (default, medium) */
   --dds-color-surface-selected-default: #062c45; /* Selected state for surface (default, subtle, medium) */
@@ -164,7 +165,7 @@
   --dds-color-surface-notification: #d83737; /* bg on a notification */
   --dds-color-surface-skeleton: #545c62; /* Used for skeleton */
   --dds-color-border-default: #77838c; /* Form components, togglebutton, secondary button, checkbox etc */
-  --dds-color-border-strong: #ffffff;
+  --dds-color-border-strong: #f1f3f4;
   --dds-color-border-subtle: #545c62; /* Dropdown, tooltip, overflow etc */
   --dds-color-border-inverse: #acbbc6; /* Border or divider on surface.inverse */
   --dds-color-border-action-default: #589ac6; /* Used in progress tracker */
@@ -174,13 +175,13 @@
   --dds-color-border-danger: #ad2c2c; /* Tag.default, error message field */
   --dds-color-border-info: #5197c5; /* Tag.default */
   --dds-color-border-on-action: #181a1c; /* Used on primary split button */
-  --dds-color-text-default: #ffffff; /* default text, heading, body. on surface.hover */
+  --dds-color-text-default: #f1f3f4; /* default text, heading, body. on surface.hover */
   --dds-color-text-medium: #e9ebec; /* Label, etc */
   --dds-color-text-subtle: #d6dadd; /* Disabled or less important text */
   --dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
   --dds-color-text-danger: #efafaf; /* Error text on paper, or default or subtle surafce/bg */
   --dds-color-text-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
-  --dds-color-text-on-status-default: #ffffff; /* On default status surfaces */
+  --dds-color-text-on-status-default: #f1f3f4; /* On default status surfaces */
   --dds-color-text-on-status-strong: #0b0d0e; /* On status surfaces with strong prop */
   --dds-color-text-action-resting: #9fc5de; /* Link, number in progress tracker */
   --dds-color-text-action-hover: #e7f1f7; /* Hover on text.action */
@@ -202,7 +203,7 @@
   --dds-color-text-on-tertiary-strong: #0b0d0e; /* Used on brand.tertiary-strong */
   --dds-color-text-on-data-default: #0b0d0e; /* Used on data. with default value */
   --dds-color-text-on-data-subtle: #ffffff; /* Used on data. with subtle value */
-  --dds-color-icon-default: #ffffff; /* Often used with text.default */
+  --dds-color-icon-default: #f1f3f4; /* Often used with text.default */
   --dds-color-icon-medium: #e9ebec; /* Often used with text.medium */
   --dds-color-icon-subtle: #d6dadd; /* Often used with text.subtle */
   --dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
@@ -507,12 +508,13 @@
   --dds-border-radius-chip: 4px; /* Chips and tags */
   --dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
   --dds-color-bg-default: #ffffff; /* UI shell base color */
-  --dds-color-bg-subtle: #f1f3f4; /* Alternative UI shell base color */
+  --dds-color-bg-subtle: #f8f9f9; /* Alternative UI shell base color */
   --dds-color-surface-default: #ffffff; /* Default bg */
-  --dds-color-surface-subtle: #f1f3f4; /* Subtle surface color */
+  --dds-color-surface-subtle: #f8f9f9; /* Subtle surface color */
   --dds-color-surface-medium: #e9ebec; /* Medium surface color */
-  --dds-color-surface-hover-default: #e7f1f7; /* Hover on surface (default, subtle, medium) */
-  --dds-color-surface-hover-subtle: #f1f3f4; /* Subtle hover on surface (default, medium) */
+  --dds-color-surface-strong: #d6dadd; /* Strong surface color */
+  --dds-color-surface-hover-default: #e7f1f7; /* Hover on surface */
+  --dds-color-surface-hover-subtle: #f1f3f4; /* Subtle hover on surface */
   --dds-color-surface-selected-default: #e7f1f7; /* Selected state for surface (default, subtle, medium) */
   --dds-color-surface-inverse-default: #354754; /* Can be used as a surface for menu, navigation, footer etc */
   --dds-color-surface-inverse-hover: #2a3943; /* Hover on surface.inverse */
@@ -887,6 +889,7 @@
   --dds-color-surface-default: #181a1c; /* Default bg */
   --dds-color-surface-subtle: #22272a; /* Subtle surface color */
   --dds-color-surface-medium: #303438; /* Medium surface color */
+  --dds-color-surface-strong: #444444; /* Strong surface color */
   --dds-color-surface-hover-default: #062c45; /* Hover on surface (default, subtle, medium) */
   --dds-color-surface-hover-subtle: #22272a; /* Subtle hover on surface (default, medium) */
   --dds-color-surface-selected-default: #062c45; /* Selected state for surface (default, subtle, medium) */
@@ -916,7 +919,7 @@
   --dds-color-surface-notification: #d83737; /* bg on a notification */
   --dds-color-surface-skeleton: #545c62; /* Used for skeleton */
   --dds-color-border-default: #77838c; /* Form components, togglebutton, secondary button, checkbox etc */
-  --dds-color-border-strong: #ffffff;
+  --dds-color-border-strong: #f1f3f4;
   --dds-color-border-subtle: #545c62; /* Dropdown, tooltip, overflow etc */
   --dds-color-border-inverse: #acbbc6; /* Border or divider on surface.inverse */
   --dds-color-border-action-default: #589ac6; /* Used in progress tracker */
@@ -926,13 +929,13 @@
   --dds-color-border-danger: #ad2c2c; /* Tag.default, error message field */
   --dds-color-border-info: #5197c5; /* Tag.default */
   --dds-color-border-on-action: #181a1c; /* Used on primary split button */
-  --dds-color-text-default: #ffffff; /* default text, heading, body. on surface.hover */
+  --dds-color-text-default: #f1f3f4; /* default text, heading, body. on surface.hover */
   --dds-color-text-medium: #e9ebec; /* Label, etc */
   --dds-color-text-subtle: #d6dadd; /* Disabled or less important text */
   --dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
   --dds-color-text-danger: #efafaf; /* Error text on paper, or default or subtle surafce/bg */
   --dds-color-text-on-action: #0b0d0e; /* On surface.action (primary and danger button) */
-  --dds-color-text-on-status-default: #ffffff; /* On default status surfaces */
+  --dds-color-text-on-status-default: #f1f3f4; /* On default status surfaces */
   --dds-color-text-on-status-strong: #0b0d0e; /* On status surfaces with strong prop */
   --dds-color-text-action-resting: #9fc5de; /* Link, number in progress tracker */
   --dds-color-text-action-hover: #e7f1f7; /* Hover on text.action */
@@ -954,7 +957,7 @@
   --dds-color-text-on-tertiary-strong: #0b0d0e; /* Used on brand.tertiary-strong */
   --dds-color-text-on-data-default: #0b0d0e; /* Used on data. with default value */
   --dds-color-text-on-data-subtle: #ffffff; /* Used on data. with subtle value */
-  --dds-color-icon-default: #ffffff; /* Often used with text.default */
+  --dds-color-icon-default: #f1f3f4; /* Often used with text.default */
   --dds-color-icon-medium: #e9ebec; /* Often used with text.medium */
   --dds-color-icon-subtle: #d6dadd; /* Often used with text.subtle */
   --dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
@@ -1259,12 +1262,13 @@
   --dds-border-radius-chip: 2px; /* Chips and tags */
   --dds-border-radius-rounded: 9999px; /* Rounded and circular components such as radiobutton, toggle, togglebutton and progress tracker */
   --dds-color-bg-default: #ffffff; /* UI shell base color */
-  --dds-color-bg-subtle: #f1f3f4; /* Alternative UI shell base color */
+  --dds-color-bg-subtle: #f8f9f9; /* Alternative UI shell base color */
   --dds-color-surface-default: #ffffff; /* Default bg */
-  --dds-color-surface-subtle: #f1f3f4; /* Subtle surface color */
+  --dds-color-surface-subtle: #f8f9f9; /* Subtle surface color */
   --dds-color-surface-medium: #e9ebec; /* Medium surface color */
-  --dds-color-surface-hover-default: #e7f1f7; /* Hover on surface (default, subtle, medium) */
-  --dds-color-surface-hover-subtle: #f1f3f4; /* Subtle hover on surface (default, medium) */
+  --dds-color-surface-strong: #d6dadd; /* Strong surface color */
+  --dds-color-surface-hover-default: #e7f1f7; /* Hover on surface */
+  --dds-color-surface-hover-subtle: #f1f3f4; /* Subtle hover on surface */
   --dds-color-surface-selected-default: #e7f1f7; /* Selected state for surface (default, subtle, medium) */
   --dds-color-surface-inverse-default: #354754; /* Can be used as a surface for menu, navigation, footer etc */
   --dds-color-surface-inverse-hover: #2a3943; /* Hover on surface.inverse */
@@ -1639,6 +1643,7 @@
   --dds-color-surface-default: #1b1a18; /* Default bg */
   --dds-color-surface-subtle: #292824; /* Subtle surface color */
   --dds-color-surface-medium: #363530; /* Medium surface color */
+  --dds-color-surface-strong: #514f48; /* Strong surface color */
   --dds-color-surface-hover-default: #0b2d34; /* Hover on surface (default, subtle, medium) */
   --dds-color-surface-hover-subtle: #292824; /* Subtle hover on surface (default, medium) */
   --dds-color-surface-selected-default: #0b2d34; /* Selected state for surface (default, subtle, medium) */
@@ -1678,7 +1683,7 @@
   --dds-color-border-info: #5197c5; /* Tag.default */
   --dds-color-border-on-action: #1b1a18; /* Used on primary split button */
   --dds-color-border-strong: #ffffff;
-  --dds-color-text-default: #ffffff; /* default text, heading, body. on surface.hover */
+  --dds-color-text-default: #f3f3f2; /* default text, heading, body. on surface.hover */
   --dds-color-text-medium: #e7e6e4; /* Label, etc */
   --dds-color-text-subtle: #cfcec9; /* Disabled or less important text */
   --dds-color-text-on-inverse: #ffffff; /* On surface.inverse */
@@ -1706,7 +1711,7 @@
   --dds-color-text-on-tertiary-strong: #0b0d0e; /* Used on brand.tertiary-strong */
   --dds-color-text-on-data-default: #0b0d0e; /* Used on data. with default value */
   --dds-color-text-on-data-subtle: #ffffff; /* Used on data. with subtle value */
-  --dds-color-icon-default: #ffffff; /* Often used with text.default */
+  --dds-color-icon-default: #f3f3f2; /* Often used with text.default */
   --dds-color-icon-medium: #e7e6e4; /* Often used with text.medium */
   --dds-color-icon-subtle: #cfcec9; /* Often used with text.subtle */
   --dds-color-icon-on-inverse: #ffffff; /* On surface.inverse */
@@ -2015,6 +2020,7 @@
   --dds-color-surface-default: #ffffff; /* Default bg */
   --dds-color-surface-subtle: #f3f3f2; /* Subtle surface color */
   --dds-color-surface-medium: #e7e6e4; /* Medium surface color */
+  --dds-color-surface-strong: #cfcec9; /* Strong surface color */
   --dds-color-surface-hover-default: #e9f1f2; /* Hover on surface (default, subtle, medium) */
   --dds-color-surface-hover-subtle: #f3f3f2; /* Subtle hover on surface (default, medium) */
   --dds-color-surface-selected-default: #e9f1f2; /* Selected state for surface (default, subtle, medium) */
@@ -6299,7 +6305,7 @@ input[data-indeterminate='true'] ~ .dds-SelectionControl-module__selection-contr
 }
 .dds-Feedback-module__rating-container {
   display: flex;
-  gap: var(--dds-spacing-x1);
+  gap: var(--dds-spacing-x0-5);
 }
 
 .dds-Feedback-module__rating-container--horizontal {

package/dist/index.d.cts

@@ -12386,6 +12386,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#181a1c";
     ddsColorSurfaceSubtle: "#22272a";
     ddsColorSurfaceMedium: "#303438";
+    ddsColorSurfaceStrong: "#444444";
     ddsColorSurfaceHoverDefault: "#062c45";
     ddsColorSurfaceHoverSubtle: "#22272a";
     ddsColorSurfaceSelectedDefault: "#062c45";
@@ -12415,7 +12416,7 @@ declare function useTheme(): {
     ddsColorSurfaceNotification: "#d83737";
     ddsColorSurfaceSkeleton: "#545c62";
     ddsColorBorderDefault: "#77838c";
-    ddsColorBorderStrong: "#ffffff";
+    ddsColorBorderStrong: "#f1f3f4";
     ddsColorBorderSubtle: "#545c62";
     ddsColorBorderInverse: "#acbbc6";
     ddsColorBorderActionDefault: "#589ac6";
@@ -12425,13 +12426,13 @@ declare function useTheme(): {
     ddsColorBorderDanger: "#ad2c2c";
     ddsColorBorderInfo: "#5197c5";
     ddsColorBorderOnAction: "#181a1c";
-    ddsColorTextDefault: "#ffffff";
+    ddsColorTextDefault: "#f1f3f4";
     ddsColorTextMedium: "#e9ebec";
     ddsColorTextSubtle: "#d6dadd";
     ddsColorTextOnInverse: "#ffffff";
     ddsColorTextDanger: "#efafaf";
     ddsColorTextOnAction: "#0b0d0e";
-    ddsColorTextOnStatusDefault: "#ffffff";
+    ddsColorTextOnStatusDefault: "#f1f3f4";
     ddsColorTextOnStatusStrong: "#0b0d0e";
     ddsColorTextActionResting: "#9fc5de";
     ddsColorTextActionHover: "#e7f1f7";
@@ -12453,7 +12454,7 @@ declare function useTheme(): {
     ddsColorTextOnTertiaryStrong: "#0b0d0e";
     ddsColorTextOnDataDefault: "#0b0d0e";
     ddsColorTextOnDataSubtle: "#ffffff";
-    ddsColorIconDefault: "#ffffff";
+    ddsColorIconDefault: "#f1f3f4";
     ddsColorIconMedium: "#e9ebec";
     ddsColorIconSubtle: "#d6dadd";
     ddsColorIconOnInverse: "#ffffff";
@@ -12823,10 +12824,11 @@ declare function useTheme(): {
     ddsBorderRadiusRounded: "9999px";
     ddsBorderRadiusRoundedNumberPx: 9999;
     ddsColorBgDefault: "#ffffff";
-    ddsColorBgSubtle: "#f1f3f4";
+    ddsColorBgSubtle: "#f8f9f9";
     ddsColorSurfaceDefault: "#ffffff";
-    ddsColorSurfaceSubtle: "#f1f3f4";
+    ddsColorSurfaceSubtle: "#f8f9f9";
     ddsColorSurfaceMedium: "#e9ebec";
+    ddsColorSurfaceStrong: "#d6dadd";
     ddsColorSurfaceHoverDefault: "#e7f1f7";
     ddsColorSurfaceHoverSubtle: "#f1f3f4";
     ddsColorSurfaceSelectedDefault: "#e7f1f7";
@@ -13268,6 +13270,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#181a1c";
     ddsColorSurfaceSubtle: "#22272a";
     ddsColorSurfaceMedium: "#303438";
+    ddsColorSurfaceStrong: "#444444";
     ddsColorSurfaceHoverDefault: "#062c45";
     ddsColorSurfaceHoverSubtle: "#22272a";
     ddsColorSurfaceSelectedDefault: "#062c45";
@@ -13297,7 +13300,7 @@ declare function useTheme(): {
     ddsColorSurfaceNotification: "#d83737";
     ddsColorSurfaceSkeleton: "#545c62";
     ddsColorBorderDefault: "#77838c";
-    ddsColorBorderStrong: "#ffffff";
+    ddsColorBorderStrong: "#f1f3f4";
     ddsColorBorderSubtle: "#545c62";
     ddsColorBorderInverse: "#acbbc6";
     ddsColorBorderActionDefault: "#589ac6";
@@ -13307,13 +13310,13 @@ declare function useTheme(): {
     ddsColorBorderDanger: "#ad2c2c";
     ddsColorBorderInfo: "#5197c5";
     ddsColorBorderOnAction: "#181a1c";
-    ddsColorTextDefault: "#ffffff";
+    ddsColorTextDefault: "#f1f3f4";
     ddsColorTextMedium: "#e9ebec";
     ddsColorTextSubtle: "#d6dadd";
     ddsColorTextOnInverse: "#ffffff";
     ddsColorTextDanger: "#efafaf";
     ddsColorTextOnAction: "#0b0d0e";
-    ddsColorTextOnStatusDefault: "#ffffff";
+    ddsColorTextOnStatusDefault: "#f1f3f4";
     ddsColorTextOnStatusStrong: "#0b0d0e";
     ddsColorTextActionResting: "#9fc5de";
     ddsColorTextActionHover: "#e7f1f7";
@@ -13335,7 +13338,7 @@ declare function useTheme(): {
     ddsColorTextOnTertiaryStrong: "#0b0d0e";
     ddsColorTextOnDataDefault: "#0b0d0e";
     ddsColorTextOnDataSubtle: "#ffffff";
-    ddsColorIconDefault: "#ffffff";
+    ddsColorIconDefault: "#f1f3f4";
     ddsColorIconMedium: "#e9ebec";
     ddsColorIconSubtle: "#d6dadd";
     ddsColorIconOnInverse: "#ffffff";
@@ -13705,10 +13708,11 @@ declare function useTheme(): {
     ddsBorderRadiusRounded: "9999px";
     ddsBorderRadiusRoundedNumberPx: 9999;
     ddsColorBgDefault: "#ffffff";
-    ddsColorBgSubtle: "#f1f3f4";
+    ddsColorBgSubtle: "#f8f9f9";
     ddsColorSurfaceDefault: "#ffffff";
-    ddsColorSurfaceSubtle: "#f1f3f4";
+    ddsColorSurfaceSubtle: "#f8f9f9";
     ddsColorSurfaceMedium: "#e9ebec";
+    ddsColorSurfaceStrong: "#d6dadd";
     ddsColorSurfaceHoverDefault: "#e7f1f7";
     ddsColorSurfaceHoverSubtle: "#f1f3f4";
     ddsColorSurfaceSelectedDefault: "#e7f1f7";
@@ -14150,6 +14154,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#1b1a18";
     ddsColorSurfaceSubtle: "#292824";
     ddsColorSurfaceMedium: "#363530";
+    ddsColorSurfaceStrong: "#514f48";
     ddsColorSurfaceHoverDefault: "#0b2d34";
     ddsColorSurfaceHoverSubtle: "#292824";
     ddsColorSurfaceSelectedDefault: "#0b2d34";
@@ -14189,7 +14194,7 @@ declare function useTheme(): {
     ddsColorBorderInfo: "#5197c5";
     ddsColorBorderOnAction: "#1b1a18";
     ddsColorBorderStrong: "#ffffff";
-    ddsColorTextDefault: "#ffffff";
+    ddsColorTextDefault: "#f3f3f2";
     ddsColorTextMedium: "#e7e6e4";
     ddsColorTextSubtle: "#cfcec9";
     ddsColorTextOnInverse: "#ffffff";
@@ -14217,7 +14222,7 @@ declare function useTheme(): {
     ddsColorTextOnTertiaryStrong: "#0b0d0e";
     ddsColorTextOnDataDefault: "#0b0d0e";
     ddsColorTextOnDataSubtle: "#ffffff";
-    ddsColorIconDefault: "#ffffff";
+    ddsColorIconDefault: "#f3f3f2";
     ddsColorIconMedium: "#e7e6e4";
     ddsColorIconSubtle: "#cfcec9";
     ddsColorIconOnInverse: "#ffffff";
@@ -14591,6 +14596,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#ffffff";
     ddsColorSurfaceSubtle: "#f3f3f2";
     ddsColorSurfaceMedium: "#e7e6e4";
+    ddsColorSurfaceStrong: "#cfcec9";
     ddsColorSurfaceHoverDefault: "#e9f1f2";
     ddsColorSurfaceHoverSubtle: "#f3f3f2";
     ddsColorSurfaceSelectedDefault: "#e9f1f2";

package/dist/index.d.mts

@@ -12385,6 +12385,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#181a1c";
     ddsColorSurfaceSubtle: "#22272a";
     ddsColorSurfaceMedium: "#303438";
+    ddsColorSurfaceStrong: "#444444";
     ddsColorSurfaceHoverDefault: "#062c45";
     ddsColorSurfaceHoverSubtle: "#22272a";
     ddsColorSurfaceSelectedDefault: "#062c45";
@@ -12414,7 +12415,7 @@ declare function useTheme(): {
     ddsColorSurfaceNotification: "#d83737";
     ddsColorSurfaceSkeleton: "#545c62";
     ddsColorBorderDefault: "#77838c";
-    ddsColorBorderStrong: "#ffffff";
+    ddsColorBorderStrong: "#f1f3f4";
     ddsColorBorderSubtle: "#545c62";
     ddsColorBorderInverse: "#acbbc6";
     ddsColorBorderActionDefault: "#589ac6";
@@ -12424,13 +12425,13 @@ declare function useTheme(): {
     ddsColorBorderDanger: "#ad2c2c";
     ddsColorBorderInfo: "#5197c5";
     ddsColorBorderOnAction: "#181a1c";
-    ddsColorTextDefault: "#ffffff";
+    ddsColorTextDefault: "#f1f3f4";
     ddsColorTextMedium: "#e9ebec";
     ddsColorTextSubtle: "#d6dadd";
     ddsColorTextOnInverse: "#ffffff";
     ddsColorTextDanger: "#efafaf";
     ddsColorTextOnAction: "#0b0d0e";
-    ddsColorTextOnStatusDefault: "#ffffff";
+    ddsColorTextOnStatusDefault: "#f1f3f4";
     ddsColorTextOnStatusStrong: "#0b0d0e";
     ddsColorTextActionResting: "#9fc5de";
     ddsColorTextActionHover: "#e7f1f7";
@@ -12452,7 +12453,7 @@ declare function useTheme(): {
     ddsColorTextOnTertiaryStrong: "#0b0d0e";
     ddsColorTextOnDataDefault: "#0b0d0e";
     ddsColorTextOnDataSubtle: "#ffffff";
-    ddsColorIconDefault: "#ffffff";
+    ddsColorIconDefault: "#f1f3f4";
     ddsColorIconMedium: "#e9ebec";
     ddsColorIconSubtle: "#d6dadd";
     ddsColorIconOnInverse: "#ffffff";
@@ -12822,10 +12823,11 @@ declare function useTheme(): {
     ddsBorderRadiusRounded: "9999px";
     ddsBorderRadiusRoundedNumberPx: 9999;
     ddsColorBgDefault: "#ffffff";
-    ddsColorBgSubtle: "#f1f3f4";
+    ddsColorBgSubtle: "#f8f9f9";
     ddsColorSurfaceDefault: "#ffffff";
-    ddsColorSurfaceSubtle: "#f1f3f4";
+    ddsColorSurfaceSubtle: "#f8f9f9";
     ddsColorSurfaceMedium: "#e9ebec";
+    ddsColorSurfaceStrong: "#d6dadd";
     ddsColorSurfaceHoverDefault: "#e7f1f7";
     ddsColorSurfaceHoverSubtle: "#f1f3f4";
     ddsColorSurfaceSelectedDefault: "#e7f1f7";
@@ -13267,6 +13269,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#181a1c";
     ddsColorSurfaceSubtle: "#22272a";
     ddsColorSurfaceMedium: "#303438";
+    ddsColorSurfaceStrong: "#444444";
     ddsColorSurfaceHoverDefault: "#062c45";
     ddsColorSurfaceHoverSubtle: "#22272a";
     ddsColorSurfaceSelectedDefault: "#062c45";
@@ -13296,7 +13299,7 @@ declare function useTheme(): {
     ddsColorSurfaceNotification: "#d83737";
     ddsColorSurfaceSkeleton: "#545c62";
     ddsColorBorderDefault: "#77838c";
-    ddsColorBorderStrong: "#ffffff";
+    ddsColorBorderStrong: "#f1f3f4";
     ddsColorBorderSubtle: "#545c62";
     ddsColorBorderInverse: "#acbbc6";
     ddsColorBorderActionDefault: "#589ac6";
@@ -13306,13 +13309,13 @@ declare function useTheme(): {
     ddsColorBorderDanger: "#ad2c2c";
     ddsColorBorderInfo: "#5197c5";
     ddsColorBorderOnAction: "#181a1c";
-    ddsColorTextDefault: "#ffffff";
+    ddsColorTextDefault: "#f1f3f4";
     ddsColorTextMedium: "#e9ebec";
     ddsColorTextSubtle: "#d6dadd";
     ddsColorTextOnInverse: "#ffffff";
     ddsColorTextDanger: "#efafaf";
     ddsColorTextOnAction: "#0b0d0e";
-    ddsColorTextOnStatusDefault: "#ffffff";
+    ddsColorTextOnStatusDefault: "#f1f3f4";
     ddsColorTextOnStatusStrong: "#0b0d0e";
     ddsColorTextActionResting: "#9fc5de";
     ddsColorTextActionHover: "#e7f1f7";
@@ -13334,7 +13337,7 @@ declare function useTheme(): {
     ddsColorTextOnTertiaryStrong: "#0b0d0e";
     ddsColorTextOnDataDefault: "#0b0d0e";
     ddsColorTextOnDataSubtle: "#ffffff";
-    ddsColorIconDefault: "#ffffff";
+    ddsColorIconDefault: "#f1f3f4";
     ddsColorIconMedium: "#e9ebec";
     ddsColorIconSubtle: "#d6dadd";
     ddsColorIconOnInverse: "#ffffff";
@@ -13704,10 +13707,11 @@ declare function useTheme(): {
     ddsBorderRadiusRounded: "9999px";
     ddsBorderRadiusRoundedNumberPx: 9999;
     ddsColorBgDefault: "#ffffff";
-    ddsColorBgSubtle: "#f1f3f4";
+    ddsColorBgSubtle: "#f8f9f9";
     ddsColorSurfaceDefault: "#ffffff";
-    ddsColorSurfaceSubtle: "#f1f3f4";
+    ddsColorSurfaceSubtle: "#f8f9f9";
     ddsColorSurfaceMedium: "#e9ebec";
+    ddsColorSurfaceStrong: "#d6dadd";
     ddsColorSurfaceHoverDefault: "#e7f1f7";
     ddsColorSurfaceHoverSubtle: "#f1f3f4";
     ddsColorSurfaceSelectedDefault: "#e7f1f7";
@@ -14149,6 +14153,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#1b1a18";
     ddsColorSurfaceSubtle: "#292824";
     ddsColorSurfaceMedium: "#363530";
+    ddsColorSurfaceStrong: "#514f48";
     ddsColorSurfaceHoverDefault: "#0b2d34";
     ddsColorSurfaceHoverSubtle: "#292824";
     ddsColorSurfaceSelectedDefault: "#0b2d34";
@@ -14188,7 +14193,7 @@ declare function useTheme(): {
     ddsColorBorderInfo: "#5197c5";
     ddsColorBorderOnAction: "#1b1a18";
     ddsColorBorderStrong: "#ffffff";
-    ddsColorTextDefault: "#ffffff";
+    ddsColorTextDefault: "#f3f3f2";
     ddsColorTextMedium: "#e7e6e4";
     ddsColorTextSubtle: "#cfcec9";
     ddsColorTextOnInverse: "#ffffff";
@@ -14216,7 +14221,7 @@ declare function useTheme(): {
     ddsColorTextOnTertiaryStrong: "#0b0d0e";
     ddsColorTextOnDataDefault: "#0b0d0e";
     ddsColorTextOnDataSubtle: "#ffffff";
-    ddsColorIconDefault: "#ffffff";
+    ddsColorIconDefault: "#f3f3f2";
     ddsColorIconMedium: "#e7e6e4";
     ddsColorIconSubtle: "#cfcec9";
     ddsColorIconOnInverse: "#ffffff";
@@ -14590,6 +14595,7 @@ declare function useTheme(): {
     ddsColorSurfaceDefault: "#ffffff";
     ddsColorSurfaceSubtle: "#f3f3f2";
     ddsColorSurfaceMedium: "#e7e6e4";
+    ddsColorSurfaceStrong: "#cfcec9";
     ddsColorSurfaceHoverDefault: "#e9f1f2";
     ddsColorSurfaceHoverSubtle: "#f3f3f2";
     ddsColorSurfaceSelectedDefault: "#e9f1f2";

package/dist/index.mjs

@@ -7316,22 +7316,15 @@ const TextArea = ({ id, value, defaultValue, onChange, errorMessage, required =
 };
 TextArea.displayName = "TextArea";
 //#endregion
-//#region src/components/Feedback/utils.tsx
-const getIconSize = (layout) => layout === "vertical" ? "large" : "medium";
-//#endregion
 //#region src/components/Feedback/CommentComponent.tsx
-const CommentComponent = ({ layout, rating, feedbackText, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, textAreaTip, loading, handleSubmit, handleFeedbackTextChange }) => {
+const CommentComponent = ({ rating, feedbackText, positiveFeedbackLabel, negativeFeedbackLabel, ratingSubmittedTitle, textAreaTip, loading, handleSubmit, handleFeedbackTextChange }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ jsxs(VStack, {
 		gap: "x1",
 		children: [
-			/* @__PURE__ */ jsxs("span", {
+			/* @__PURE__ */ jsx("span", {
 				className: Feedback_module_default["rating-submitted-title"],
-				children: [/* @__PURE__ */ jsx(Icon, {
-					icon: rating === "positive" ? ThumbUpFilledIcon : ThumbDownFilledIcon,
-					color: "icon-action-resting",
-					iconSize: getIconSize(layout)
-				}), /* @__PURE__ */ jsxs(Paragraph, { children: [ratingSubmittedTitle, " "] })]
+				children: /* @__PURE__ */ jsxs(Paragraph, { children: [ratingSubmittedTitle, " "] })
 			}),
 			/* @__PURE__ */ jsx(TextArea, {
 				value: feedbackText,
@@ -7357,6 +7350,9 @@ const texts$17 = createTexts({ send: {
 	se: "Sádde"
 } });
 //#endregion
+//#region src/components/Feedback/utils.tsx
+const getButtonSize = (layout) => layout === "vertical" ? "medium" : "small";
+//#endregion
 //#region src/components/Tooltip/Tooltip.tsx
 const Tooltip = ({ text, placement = "bottom", children, tooltipId, delay = 100, style, onMouseLeave, onMouseOver, keepMounted = true, id, ref, className, htmlProps, ...rest }) => {
 	const generatedId = useId();
@@ -7452,26 +7448,32 @@ Tooltip.displayName = "Tooltip";
 //#region src/components/Feedback/RatingComponent.tsx
 const RatingComponent = ({ layout, ratingLabel, loading, thumbUpTooltip, thumbDownTooltip, handleRatingChange }) => {
 	const { t } = useTranslation();
-	const button = (rating, layout, tooltip) => /* @__PURE__ */ jsx(InlineIconButton, {
-		"aria-label": tooltip,
-		onClick: () => handleRatingChange(rating),
-		size: getIconSize(layout),
-		icon: rating === "positive" ? ThumbUpIcon : ThumbDownIcon,
-		color: "icon-medium"
-	});
+	const buttonSize = getButtonSize(layout);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(Feedback_module_default["rating-container"], Feedback_module_default[`rating-container--${layout}`]),
 		children: [/* @__PURE__ */ jsx("h2", {
 			className: typographyStyles_module_default["label-medium"],
 			children: ratingLabel
 		}), loading ? /* @__PURE__ */ jsx(Spinner, { tooltip: t(texts$16.uploadingFeedback) }) : /* @__PURE__ */ jsxs(HStack, {
-			gap: "x1",
+			gap: "x0.75",
 			children: [/* @__PURE__ */ jsx(Tooltip, {
 				text: thumbUpTooltip,
-				children: button("positive", layout, thumbUpTooltip)
+				children: /* @__PURE__ */ jsx(Button, {
+					purpose: "secondary",
+					"aria-label": thumbUpTooltip,
+					onClick: () => handleRatingChange("positive"),
+					size: buttonSize,
+					icon: ThumbUpIcon
+				})
 			}), /* @__PURE__ */ jsx(Tooltip, {
 				text: thumbDownTooltip,
-				children: button("negative", layout, thumbDownTooltip)
+				children: /* @__PURE__ */ jsx(Button, {
+					purpose: "secondary",
+					"aria-label": thumbDownTooltip,
+					onClick: () => handleRatingChange("negative"),
+					size: buttonSize,
+					icon: ThumbDownIcon
+				})
 			})]
 		})]
 	});
@@ -7529,7 +7531,6 @@ const Feedback = ({ layout = "vertical", ratingLabel, positiveFeedbackLabel, neg
 		handleRatingChange
 	});
 	if (!feedbackTextAreaExcluded && !isFeedbackSubmitted) return /* @__PURE__ */ jsx(CommentComponent, {
-		layout,
 		rating,
 		feedbackText,
 		positiveFeedbackLabel: tPositiveFeedbackLabel,