Prepare main to hold code for next major version (#1599)

* Adding pre mode

* Updating the workflows

* Update README.md

* Create proud-rules-wonder.md

* Rename and move color mode variables out of base package (#1462)

* Rename and move color mode variables out of base package

* Create mighty-goats-teach.md

* Add test to make sure support is never more than 0

* Update mighty-goats-teach.md

* Update mighty-goats-teach.md

* Remove test

* Delete patch

* Moving color modes to their own bundle (#1465)

* Moving color modes to their own bundle

* Create new-beers-peel.md

* Removing the rem() mixin and usages. Placing the computed values in place. (#1541)

* Removing the rem() mixin and usages. Placing the computed values in place.

* Create flat-shirts-lay.md

* Fixing stylelint issues

* Fix more stylelint issue

* Remove break-word from utilities (#1566)

* Remove break-word from utilities

* Create twelve-fireants-shave.md

* Adding dark high contrast

* Fixing mising color modes selectors

* Remove pre.json if it exists

* Fixing lint error

* Removing pre mode

Co-authored-by: simurai <simurai@github.com>

.changeset/flat-shirts-lay.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Removing the rem() mixin and usages. Placing the computed values in place.

.changeset/mighty-goats-teach.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Rename `modes.scss` file to `color-modes.scss` and move from the `base/` folder to the `support/variables` folder.

.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.

.changeset/twelve-fireants-shave.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Remove break-word from utilities

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - 'main'
+      - 'next_major'
 jobs:
   release:
     name: Final

.github/workflows/release_canary.yml

@@ -3,7 +3,7 @@ on:
   push:
     branches-ignore:
       - 'main'
-      - 'changeset-release/main'
+      - 'changeset-release/**'
       - 'dependabot/**'
     # Don't release canary when these paths change
     # It's not necessary because we don't ship them and it creates noise
@@ -50,6 +50,7 @@ jobs:
         run: |
           echo "$( jq '.version = "0.0.0"' package.json )" > package.json
           echo -e "---\n'@primer/css': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
+          rm -f .changeset/pre.json
           yarn changeset version --snapshot
           yarn changeset publish --tag canary
         env:

.github/workflows/release_candidate.yml

@@ -2,7 +2,7 @@ name: Release
 on:
   push:
     branches:
-      - 'changeset-release/main'
+      - 'changeset-release/**'
 
 jobs:
   release-candidate:

src/base/index.scss

@@ -1,7 +1,6 @@
 @import "../support/index.scss";
 
 @import "./normalize.scss";
-@import "./modes.scss";
 @import "./base.scss";
 @import "./kbd.scss";
 @import "./typography-base.scss";

src/base/modes.scss

@@ -1,41 +0,0 @@
-// Color modes
-
-@import "../support/mixins/color-modes.scss";
-
-@import "@primer/primitives/dist/scss/colors/_light.scss";
-@import "@primer/primitives/dist/scss/colors/_dark.scss";
-@import "@primer/primitives/dist/scss/colors/_dark_dimmed.scss";
-@import "@primer/primitives/dist/scss/colors/_dark_high_contrast.scss";
-
-// Outputs the CSS variables
-// Use :root (html element) to define a default
-
-@include color-mode-theme(light, true) {
-  @include primer-colors-light;
-}
-
-@include color-mode-theme(dark) {
-  @include primer-colors-dark;
-}
-
-@include color-mode-theme(dark_dimmed) {
-  @include primer-colors-dark_dimmed;
-}
-
-@include color-mode-theme(dark_high_contrast) {
-  @include primer-colors-dark_high_contrast;
-}
-
-// Color mode boundaries
-// Enables nesting of different color modes
-
-[data-color-mode] {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-}
-
-// color-scheme
-// Enables color modes for native elements
-
-@include color-mode(light) { color-scheme: light; }
-@include color-mode(dark) { color-scheme: dark; }

src/color-modes/index.scss

@@ -0,0 +1,7 @@
+// All themes
+
+@import "./themes/light.scss";
+@import "./themes/dark.scss";
+@import "./themes/dark_dimmed.scss";
+@import "./themes/dark_high_contrast.scss";
+@import "./native.scss";

src/color-modes/native.scss

@@ -0,0 +1,10 @@
+// color-scheme
+// Enables color modes for native elements
+
+@include color-mode(light) { color-scheme: light; }
+@include color-mode(dark) { color-scheme: dark; }
+
+[data-color-mode] {
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+}

src/color-modes/themes/dark.scss

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

src/color-modes/themes/dark_dimmed.scss

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

src/color-modes/themes/dark_high_contrast.scss

@@ -0,0 +1,7 @@
+@import "../../support/index.scss";
+
+@import "@primer/primitives/dist/scss/colors/_dark_high_contrast.scss";
+
+@include color-mode-theme(dark_high_contrast) {
+  @include primer-colors-dark_high_contrast;
+}

src/color-modes/themes/light.scss

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

src/index.scss

@@ -10,6 +10,9 @@
 // Imports all Primer files in their intended order for easy mass-inclusion.
 // Should you need specific files, you can easily use separate `@import`s.
 
+// CSS color variables
+@import "./color-modes/index.scss";
+
 // Global requirements
 @import "./core/index.scss";
 @import "./product/index.scss";

src/marketing/buttons/button.scss

@@ -4,7 +4,7 @@
   display: inline-block;
   appearance: none !important;
   // stylelint-disable-next-line primer/spacing
-  padding: rem(($spacer-3) * 0.9) rem($spacer-4) rem(($spacer-3) * 1.1);
+  padding: 0.9rem 1.5rem 1.1rem;
   // stylelint-disable-next-line primer/typography
   font-size: 1rem;
   font-weight: $font-weight-bold;
@@ -14,7 +14,7 @@
   user-select: none;
   border: 0;
   // stylelint-disable-next-line primer/borders
-  border-radius: rem(6px);
+  border-radius: 0.375rem;
 
   @include btn-solid-mktg(
     var(--color-mktg-btn-text),
@@ -34,7 +34,7 @@
     z-index: -1;
     content: "";
     // stylelint-disable-next-line primer/borders
-    border-radius: rem(6px);
+    border-radius: 0.375rem;
     opacity: 0;
     transition: opacity 0.4s;
   }
@@ -97,7 +97,7 @@
 
 .btn-small-mktg {
   // stylelint-disable-next-line primer/spacing
-  padding: rem(10px) rem($spacer-3) rem(13px);
+  padding: 0.625rem 1rem 0.8125rem;
 }
 
 .btn-large-mktg {

src/marketing/support/mixins.scss

@@ -64,17 +64,3 @@
     opacity: 0.5;
   }
 }
-
-$browser-context: 16 !default;
-
-@function rem($pixels, $context: $browser-context) {
-  @if (unitless($pixels)) {
-    $pixels: $pixels * 1px;
-  }
-
-  @if (unitless($context)) {
-    $context: $context * 1px;
-  }
-
-  @return $pixels / $context * 1rem;
-}

src/utilities/typography.scss

@@ -208,7 +208,6 @@
 .ws-normal { white-space: normal !important; }
 
 /* Force long "words" to wrap if they exceed the width of the container */
-.break-word, // deprecated
 .wb-break-word {
   word-break: break-word !important;
   // this is for backwards compatibility with browsers that don't respect overflow-wrap