Remove old primitives color themes imports and only use V8 (#2731)

Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: Cameron Dutro <camertron@gmail.com>

.changeset/flat-bags-remain.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Remove old primitives color themes imports and only use V8 on the demo lookbook

demo/app/assets/stylesheets/application.css

@@ -10,10 +10,64 @@
  *= require @primer/primitives/tokens-next-private/css/functional/size/size.css
  *= require @primer/primitives/tokens-next-private/css/functional/size/viewport.css
  *= require @primer/primitives/tokens-next-private/css/functional/typography/typography.css
- *= require @primer/css/dist/color-modes.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/dark.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css
+ *= require @primer/primitives/tokens-next-private/css/functional/themes/light.css
  *= require @primer/css/dist/base.css
  *= require @primer/css/dist/buttons.css
  *= require @primer/css/dist/layout.css
  *= require @primer/css/dist/utilities.css
  *= require @primer/css/dist/markdown.css
 */
+
+:root,[data-color-mode="light"][data-light-theme*="light"],[data-color-mode="dark"][data-dark-theme*="light"] {
+  color-scheme: light
+}
+
+@media(prefers-color-scheme: light) {
+  [data-color-mode="auto"][data-light-theme*="light"] {
+      color-scheme:light
+  }
+}
+
+@media(prefers-color-scheme: dark) {
+  [data-color-mode="auto"][data-dark-theme*="light"] {
+      color-scheme:light
+  }
+}
+
+[data-color-mode="light"][data-light-theme*="dark"],[data-color-mode="dark"][data-dark-theme*="dark"] {
+  color-scheme: dark
+}
+
+@media(prefers-color-scheme: light) {
+  [data-color-mode="auto"][data-light-theme*="dark"] {
+      color-scheme:dark
+  }
+}
+
+@media(prefers-color-scheme: dark) {
+  [data-color-mode="auto"][data-dark-theme*="dark"] {
+      color-scheme:dark
+  }
+}
+
+[data-color-mode] {
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default))
+}
+
+@media(forced-colors: active) {
+  body {
+      --color-accent-emphasis: Highlight;
+      --color-fg-on-emphasis: LinkText;
+      --fgColor-onEmphasis: LinkText;
+      --fgColor-accent: Highlight
+  }
+}

demo/app/assets/stylesheets/component_preview.css

@@ -32,7 +32,7 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted);
   padding: var(--base-size-4) var(--base-size-8);
   font: var(--primer-text-caption-shorthand);
 }

demo/app/views/layouts/component_preview.html.erb

@@ -6,9 +6,6 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <% if params.dig(:primitives) || params.dig(:lookbook, :display, :primitives) == "next_major_v8" %>
-      <%= stylesheet_link_tag "primitives_v8", "data-turbo-track": "reload" %>
-    <% end %>
     <%= stylesheet_link_tag "primer_view_components", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "primer_view_components", type: "module", "data-turbo-track": "reload" %>
     <% if Rails.env.development? %>

demo/config/application.rb

@@ -90,10 +90,6 @@ class Application < Rails::Application
           ["Dark high contrast", "dark_high_contrast"],
           ["Dark colorblind", "dark_colorblind"],
           ["All themes", "all"]
-        ],
-        primitives: [
-          ["Next Major v8", "next_major_v8"],
-          ["Default", "default"]
         ]
       }
 

test/playwright/snapshots.test.ts

@@ -32,7 +32,7 @@ test.describe('generate snapshots', () => {
         if (example.snapshot === 'interactive') {
           for (const theme of themes) {
             test(`${example.preview_path}-${theme}`, async ({page}) => {
-              await page.goto(`/rails/view_components/${example.preview_path}?theme=${theme}&primitives=next_major_v8`)
+              await page.goto(`/rails/view_components/${example.preview_path}?theme=${theme}`)
 
               // Focus state
               await page.keyboard.press('Tab')
@@ -50,7 +50,7 @@ test.describe('generate snapshots', () => {
         }
 
         test(example.preview_path, async ({page}) => {
-          await page.goto(`/rails/view_components/${example.preview_path}?theme=all&primitives=next_major_v8`)
+          await page.goto(`/rails/view_components/${example.preview_path}?theme=all`)
           const defaultScreenshot = await page.locator('#component-preview').screenshot({animations: 'disabled'})
           expect(defaultScreenshot).toMatchSnapshot([example.preview_path, 'default.png'])