fix: dark mode components token override (#41)

src/custom.scss

@@ -24,36 +24,20 @@
 // on the components
 // (Open issue: https://github.com/carbon-design-system/carbon/issues/12376)
 @use '@carbon/react/scss/components/button/tokens' as button-tokens;
-@use './theme/buttons.scss' as button-overrides;
+@use './theme/light-buttons.scss' as light-button-overrides;
+@use './theme/dark-buttons.scss' as dark-button-overrides;
 
 @use '@carbon/react/scss/components/tag/tokens' as tag-tokens;
-@use './theme/tags.scss' as tag-overrides;
+@use './theme/light-tags.scss' as light-tag-overrides;
+@use './theme/dark-tags.scss' as dark-tag-overrides;
 
 @use '@carbon/react/scss/components/notification/tokens' as notification-tokens;
-@use './theme/notifications.scss' as notification-overrides;
+@use './theme/light-notifications.scss' as light-notification-overrides;
+@use './theme/dark-notifications.scss' as dark-notification-overrides;
 
 @use '@carbon/react';
 @use '@carbon/grid';
 
-$button-tokens: utilities.merge(
-  button-tokens.$button-tokens,
-  button-overrides.$button-token-overrides
-);
-
-$tag-tokens: utilities.merge(
-  tag-tokens.$tag-tokens,
-  tag-overrides.$tag-token-overrides
-);
-
-$notification-tokens: utilities.merge(
-  notification-tokens.$notification-tokens,
-  notification-overrides.$notification-token-overrides
-);
-
-@include theme.add-component-tokens($button-tokens);
-@include theme.add-component-tokens($tag-tokens);
-@include theme.add-component-tokens($notification-tokens);
-
 // Emit the flex-grid styles
 @include grid.flex-grid();
 
@@ -62,9 +46,45 @@ $notification-tokens: utilities.merge(
 }
 
 [data-carbon-theme='g100'] {
+  $button-tokens: utilities.merge(
+    button-tokens.$button-tokens,
+    dark-button-overrides.$dark-button-token-overrides
+  );
+
+  $tag-tokens: utilities.merge(
+    tag-tokens.$tag-tokens,
+    dark-tag-overrides.$dark-tag-token-overrides
+  );
+
+  $notification-tokens: utilities.merge(
+    notification-tokens.$notification-tokens,
+    dark-notification-overrides.$dark-notification-token-overrides
+  );
+
+  @include theme.add-component-tokens($button-tokens);
+  @include theme.add-component-tokens($tag-tokens);
+  @include theme.add-component-tokens($notification-tokens);
   @include react.theme(dark.$dark-theme);
 }
 
 [data-carbon-theme='g10'] {
+  $button-tokens: utilities.merge(
+    button-tokens.$button-tokens,
+    light-button-overrides.$light-button-token-overrides
+);
+
+  $tag-tokens: utilities.merge(
+    tag-tokens.$tag-tokens,
+    light-tag-overrides.$light-tag-token-overrides
+  );
+
+  $notification-tokens: utilities.merge(
+    notification-tokens.$notification-tokens,
+    light-notification-overrides.$light-notification-token-overrides
+);
+
+  @include theme.add-component-tokens($button-tokens);
+  @include theme.add-component-tokens($tag-tokens);
+  @include theme.add-component-tokens($notification-tokens);
   @include react.theme(light.$light-theme);
 }

src/theme/dark-buttons.scss

@@ -0,0 +1,19 @@
+@use './colors.scss' as colors;
+
+$dark-button-token-overrides: (
+  button-primary: colors.$blue-60,
+  button-primary-hover: colors.$blue-65,
+  button-primary-active: colors.$blue-80,
+  button-secondary: colors.$gray-60,
+  button-secondary-hover: colors.$gray-65,
+  button-secondary-active: colors.$gray-80,
+  button-tertiary: colors.$white,
+  button-tertiary-hover: colors.$gray-10,
+  button-tertiary-active: colors.$gray-30,
+  button-danger-primary: colors.$red-60,
+  button-danger-secondary: colors.$red-40,
+  button-danger-hover: colors.$red-70,
+  button-danger-active: colors.$red-80,
+  button-separator: colors.$gray-100,
+  button-disabled: colors.$gray-70,
+);

src/theme/dark-notifications.scss

@@ -0,0 +1,16 @@
+@use './colors.scss' as colors;
+
+$dark-notification-token-overrides: (
+  notification-background-info: colors.$gray-90,
+  notification-background-success: colors.$gray-90,
+  notification-background-warning: colors.$gray-90,
+  notification-background-error: colors.$gray-90,
+  notification-border-info: rgba(colors.$blue-50, 0.40),
+  notification-border-success: rgba(colors.$green-50, 0.40),
+  notification-border-warning: rgba(colors.$yellow-60, 0.40),
+  notification-border-error: rgba(colors.$red-50, 0.40),
+  notification-action-hover: colors.$white,
+  notification-action-tertiary-inverse: colors.$blue-60,
+  notification-action-tertiary-inverse-text: colors.$white,
+  notification-action-tertiary-hover: colors.$blue-65,
+);

src/theme/dark-tags.scss

@@ -0,0 +1,30 @@
+@use './colors.scss' as colors;
+
+/// Carbon doesn't have native pink and violet tags,
+/// so we override the magenta and purple tokens instead
+$dark-tag-token-overrides: (
+  tag-background-blue: colors.$blue-80,
+  tag-color-blue: colors.$blue-10,
+  tag-hover-blue: colors.$blue-75,
+  tag-background-cyan: colors.$cyan-100,
+  tag-color-cyan: colors.$cyan-10,
+  tag-hover-cyan: colors.$cyan-90,
+  tag-background-green: colors.$green-80,
+  tag-color-green: colors.$green-10,
+  tag-hover-green: colors.$green-70,
+  tag-background-magenta: colors.$pink-80,
+  tag-color-magenta: colors.$pink-10,
+  tag-hover-magenta: colors.$pink-70,
+  tag-background-purple: colors.$violet-60,
+  tag-color-purple: colors.$violet-10,
+  tag-hover-purple: colors.$violet-50,
+  tag-background-red: colors.$red-80,
+  tag-color-red: colors.$red-10,
+  tag-hover-red: colors.$red-70,
+  tag-background-teal: colors.$teal-90,
+  tag-color-teal: colors.$teal-10,
+  tag-hover-teal: colors.$teal-80,
+  tag-background-gray: colors.$gray-70,
+  tag-color-gray: colors.$gray-10,
+  tag-hover-gray: colors.$gray-65,
+);

src/theme/light-buttons.scss

@@ -0,0 +1,19 @@
+@use './colors.scss' as colors;
+
+$light-button-token-overrides: (
+  button-primary: colors.$blue-60,
+  button-primary-hover: colors.$blue-65,
+  button-primary-active: colors.$blue-80,
+  button-secondary: colors.$gray-80,
+  button-secondary-hover: colors.$gray-75,
+  button-secondary-active: colors.$gray-70,
+  button-tertiary: colors.$blue-70,
+  button-tertiary-hover: colors.$blue-75,
+  button-tertiary-active: colors.$blue-80,
+  button-danger-primary: colors.$red-60,
+  button-danger-secondary: colors.$red-70,
+  button-danger-hover: colors.$red-70,
+  button-danger-active: colors.$red-80,
+  button-separator: colors.$gray-20,
+  button-disabled: colors.$gray-30,
+);

src/theme/light-notifications.scss

@@ -0,0 +1,16 @@
+@use './colors.scss' as colors;
+
+$light-notification-token-overrides: (
+  notification-background-info: colors.$blue-10,
+  notification-background-success: colors.$green-10,
+  notification-background-warning: colors.$yellow-10,
+  notification-background-error: colors.$red-10,
+  notification-border-info: rgba(colors.$blue-60, 0.40),
+  notification-border-success: rgba(colors.$green-60, 0.40),
+  notification-border-warning: rgba(colors.$yellow-60, 0.40),
+  notification-border-error: rgba(colors.$red-60, 0.40),
+  notification-action-hover: colors.$white,
+  notification-action-tertiary-inverse: colors.$white,
+  notification-action-tertiary-inverse-text: colors.$gray-100,
+  notification-action-tertiary-hover: colors.$gray-10,
+);

src/theme/light-tags.scss

@@ -0,0 +1,30 @@
+@use './colors.scss' as colors;
+
+/// Carbon doesn't have native pink and violet tags,
+/// so we override the magenta and purple tokens instead
+$light-tag-token-overrides: (
+  tag-background-blue: colors.$blue-10,
+  tag-color-blue: colors.$blue-80,
+  tag-hover-blue: colors.$blue-15,
+  tag-background-cyan: colors.$cyan-20,
+  tag-color-cyan: colors.$cyan-100,
+  tag-hover-cyan: colors.$cyan-30,
+  tag-background-green: colors.$green-10,
+  tag-color-green: colors.$green-90,
+  tag-hover-green: colors.$green-20,
+  tag-background-magenta: colors.$pink-10,
+  tag-color-magenta: colors.$pink-80,
+  tag-hover-magenta: colors.$pink-20,
+  tag-background-purple: colors.$violet-10,
+  tag-color-purple: colors.$violet-80,
+  tag-hover-purple: colors.$violet-20,
+  tag-background-red: colors.$red-20,
+  tag-color-red: colors.$red-80,
+  tag-hover-red: colors.$red-30,
+  tag-background-teal: colors.$teal-20,
+  tag-color-teal: colors.$teal-90,
+  tag-hover-teal: colors.$teal-30,
+  tag-background-gray: colors.$gray-20,
+  tag-color-gray: colors.$gray-100,
+  tag-hover-gray: colors.$gray-25,
+);