From 13de16c7d6787d221216d8ff21afccf6f73f4221 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 16 Sep 2021 18:20:07 -0700 Subject: [PATCH] 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 --- .changeset/flat-shirts-lay.md | 5 +++ .changeset/mighty-goats-teach.md | 5 +++ .changeset/new-beers-peel.md | 5 +++ .changeset/twelve-fireants-shave.md | 5 +++ .github/workflows/release.yml | 1 + .github/workflows/release_canary.yml | 3 +- .github/workflows/release_candidate.yml | 2 +- src/base/index.scss | 1 - src/base/modes.scss | 41 ------------------- src/color-modes/index.scss | 7 ++++ src/color-modes/native.scss | 10 +++++ src/color-modes/themes/dark.scss | 7 ++++ src/color-modes/themes/dark_dimmed.scss | 7 ++++ .../themes/dark_high_contrast.scss | 7 ++++ src/color-modes/themes/light.scss | 7 ++++ src/index.scss | 3 ++ src/marketing/buttons/button.scss | 8 ++-- src/marketing/support/mixins.scss | 14 ------- src/utilities/typography.scss | 1 - 19 files changed, 76 insertions(+), 63 deletions(-) create mode 100644 .changeset/flat-shirts-lay.md create mode 100644 .changeset/mighty-goats-teach.md create mode 100644 .changeset/new-beers-peel.md create mode 100644 .changeset/twelve-fireants-shave.md delete mode 100644 src/base/modes.scss create mode 100644 src/color-modes/index.scss create mode 100644 src/color-modes/native.scss create mode 100644 src/color-modes/themes/dark.scss create mode 100644 src/color-modes/themes/dark_dimmed.scss create mode 100644 src/color-modes/themes/dark_high_contrast.scss create mode 100644 src/color-modes/themes/light.scss diff --git a/.changeset/flat-shirts-lay.md b/.changeset/flat-shirts-lay.md new file mode 100644 index 0000000000..cde5bd8b44 --- /dev/null +++ b/.changeset/flat-shirts-lay.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Removing the rem() mixin and usages. Placing the computed values in place. diff --git a/.changeset/mighty-goats-teach.md b/.changeset/mighty-goats-teach.md new file mode 100644 index 0000000000..3dd70d8174 --- /dev/null +++ b/.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. diff --git a/.changeset/new-beers-peel.md b/.changeset/new-beers-peel.md new file mode 100644 index 0000000000..5aacf05a39 --- /dev/null +++ b/.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. diff --git a/.changeset/twelve-fireants-shave.md b/.changeset/twelve-fireants-shave.md new file mode 100644 index 0000000000..b429adb8a5 --- /dev/null +++ b/.changeset/twelve-fireants-shave.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Remove break-word from utilities diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 96948b1f4e..b9a7ae03fb 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -3,6 +3,7 @@ on: push: branches: - 'main' + - 'next_major' jobs: release: name: Final diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml index 2a822990e8..19feb523f9 100644 --- a/.github/workflows/release_canary.yml +++ b/.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: diff --git a/.github/workflows/release_candidate.yml b/.github/workflows/release_candidate.yml index 6928289d8b..cfc304ff20 100644 --- a/.github/workflows/release_candidate.yml +++ b/.github/workflows/release_candidate.yml @@ -2,7 +2,7 @@ name: Release on: push: branches: - - 'changeset-release/main' + - 'changeset-release/**' jobs: release-candidate: diff --git a/src/base/index.scss b/src/base/index.scss index 8d43ede1c6..3751e62e59 100644 --- a/src/base/index.scss +++ b/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"; diff --git a/src/base/modes.scss b/src/base/modes.scss deleted file mode 100644 index 1691ee7b42..0000000000 --- a/src/base/modes.scss +++ /dev/null @@ -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; } diff --git a/src/color-modes/index.scss b/src/color-modes/index.scss new file mode 100644 index 0000000000..168bae27e7 --- /dev/null +++ b/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"; diff --git a/src/color-modes/native.scss b/src/color-modes/native.scss new file mode 100644 index 0000000000..0855fc863d --- /dev/null +++ b/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); +} diff --git a/src/color-modes/themes/dark.scss b/src/color-modes/themes/dark.scss new file mode 100644 index 0000000000..51e837bfd0 --- /dev/null +++ b/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; +} diff --git a/src/color-modes/themes/dark_dimmed.scss b/src/color-modes/themes/dark_dimmed.scss new file mode 100644 index 0000000000..03671f17c9 --- /dev/null +++ b/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; +} diff --git a/src/color-modes/themes/dark_high_contrast.scss b/src/color-modes/themes/dark_high_contrast.scss new file mode 100644 index 0000000000..d76816425a --- /dev/null +++ b/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; +} diff --git a/src/color-modes/themes/light.scss b/src/color-modes/themes/light.scss new file mode 100644 index 0000000000..02f081b781 --- /dev/null +++ b/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; +} diff --git a/src/index.scss b/src/index.scss index 44b83e0655..f2059d2d74 100644 --- a/src/index.scss +++ b/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"; diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss index 2ba7d968d3..63faf2b60d 100644 --- a/src/marketing/buttons/button.scss +++ b/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 { diff --git a/src/marketing/support/mixins.scss b/src/marketing/support/mixins.scss index 83807b53e4..e3f9eb25ba 100644 --- a/src/marketing/support/mixins.scss +++ b/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; -} diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss index 83585db7c6..e9687558ed 100644 --- a/src/utilities/typography.scss +++ b/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