Moving color modes to their own bundle (#1465)

* Moving color modes to their own bundle

* Create new-beers-peel.md

Author: jonrohan

.changeset/new-beers-peel.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Moving color modes to their own bundle, `./color-modes/` and separates color mode themes into their own scss file.

src/color-modes/index.scss

@@ -0,0 +1,10 @@
+// All themes
+
+@import "./themes/light.scss";
+@import "./themes/dark.scss";
+@import "./themes/dark_dimmed.scss";
+
+[data-color-mode] {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-canvas);
+}

src/color-modes/themes/dark.scss

@@ -0,0 +1,8 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark.scss";
+
+@include color-mode-theme(dark) {
+  @include primer-colors-dark;
+  color-scheme: dark;
+}

src/color-modes/themes/dark_dimmed.scss

@@ -0,0 +1,8 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark_dimmed.scss";
+
+@include color-mode-theme(dark_dimmed) {
+  @include primer-colors-dark_dimmed;
+  color-scheme: dark;
+}

src/color-modes/themes/light.scss

@@ -0,0 +1,8 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_light.scss";
+
+@include color-mode-theme(light, true) {
+  @include primer-colors-light;
+  color-scheme: light;
+}

src/color-modes/themes/v2/dark.scss

@@ -0,0 +1,8 @@
+@import "../../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors_v2/_dark.scss";
+
+@include color-mode-theme(dark) {
+  @include primer-colors_v2-dark;
+  color-scheme: dark;
+}

src/color-modes/themes/v2/dark_dimmed.scss

@@ -0,0 +1,8 @@
+@import "../../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors_v2/_dark_dimmed.scss";
+
+@include color-mode-theme(dark_dimmed) {
+  @include primer-colors_v2-dark_dimmed;
+  color-scheme: dark;
+}

src/color-modes/themes/v2/dark_high_contrast.scss

@@ -0,0 +1,8 @@
+@import "../../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors_v2/_dark_high_contrast.scss";
+
+@include color-mode-theme(dark_high_contrast) {
+  @include primer-colors_v2-dark_high_contrast;
+  color-scheme: dark;
+}

src/color-modes/themes/v2/light.scss

@@ -0,0 +1,8 @@
+@import "../../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors_v2/_light.scss";
+
+@include color-mode-theme(light, true) {
+  @include primer-colors_v2-light;
+  color-scheme: light;
+}

src/index.scss

@@ -11,7 +11,7 @@
 // Should you need specific files, you can easily use separate `@import`s.
 
 // CSS color variables
-@import "./support/variables/color-modes.scss";
+@import "./color-modes/index.scss";
 
 // Global requirements
 @import "./core/index.scss";