Skip to content

Move page header #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Dec 18, 2024
Merged

Move page header #1140

merged 1 commit into from
Dec 18, 2024

Conversation

lukasoppermann
Copy link
Collaborator

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

@lukasoppermann lukasoppermann added the skip changeset Apply to PRs that should not result in a version bump. label Dec 18, 2024
@lukasoppermann lukasoppermann requested review from a team as code owners December 18, 2024 21:11
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 18, 2024

⚠️ No Changeset found

Latest commit: 97e14a4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

Design Token Diff (StyleLint)

/styleLint/functional/themes/dark-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-colorblind.json	2024-12-18 21:12:34.322401164 +0000
@@ -15864,9 +15864,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#0d1117"
     }
   },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.default}",
@@ -15876,6 +15879,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/dark-dimmed.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-dimmed.json	2024-12-18 21:12:32.143371318 +0000
@@ -15898,9 +15898,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#212830"
     }
   },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.default}",
@@ -15910,6 +15913,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/dark-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-high-contrast.json	2024-12-18 21:12:35.332415007 +0000
@@ -14446,9 +14446,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#010409"
     }
   },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.default}",
@@ -14458,6 +14461,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/dark-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark-tritanopia.json	2024-12-18 21:12:33.250386481 +0000
@@ -15944,9 +15944,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#0d1117"
     }
   },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.default}",
@@ -15956,6 +15959,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/dark.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/dark.json	2024-12-18 21:12:31.170357991 +0000
@@ -16584,9 +16584,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#0d1117"
     }
   },
-    "filePath": "src/tokens/functional/color/dark/app-dark.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.default}",
@@ -16596,6 +16599,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/light-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-colorblind.json	2024-12-18 21:12:29.088329474 +0000
@@ -15902,9 +15902,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffffff"
     }
   },
-    "filePath": "src/tokens/functional/color/light/app-light.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.muted}",
@@ -15914,6 +15917,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/light-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-high-contrast.json	2024-12-18 21:12:30.084343116 +0000
@@ -14556,9 +14556,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffffff"
     }
   },
-    "filePath": "src/tokens/functional/color/light/app-light.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.muted}",
@@ -14568,6 +14571,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/light-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light-tritanopia.json	2024-12-18 21:12:28.032315011 +0000
@@ -15984,9 +15984,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffffff"
     }
   },
-    "filePath": "src/tokens/functional/color/light/app-light.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.muted}",
@@ -15996,6 +15999,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

/styleLint/functional/themes/light.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/themes/light.json	2024-12-18 21:12:26.988300711 +0000
@@ -16536,9 +16536,12 @@
       "collection": "mode",
       "group": "component",
       "scopes": ["bgColor"]
+      },
+      "org.primer.overrides": {
+        "dark": "#ffffff"
     }
   },
-    "filePath": "src/tokens/functional/color/light/app-light.json5",
+    "filePath": "src/tokens/component/page.json5",
   "isSource": true,
   "original": {
     "$value": "{bgColor.muted}",
@@ -16548,6 +16551,9 @@
         "collection": "mode",
         "group": "component",
         "scopes": ["bgColor"]
+        },
+        "org.primer.overrides": {
+          "dark": "{bgColor.default}"
       }
     }
   },

@github-actions GitHub Actions
Copy link
Contributor

Design Token Diff (Figma)

/figma/themes/dark-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-colorblind.json	2024-12-18 21:12:41.822503972 +0000
@@ -2410,22 +2410,6 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
-    "value": {
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 0
-    },
-    "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "base/color/dark/base/color/transparent",
-    "collection": "mode",
-    "mode": "dark protanopia deuteranopia",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
   "name": "page/header/bgColor",
   "value": {
     "r": 0.050980392156862744,
@@ -2442,6 +2426,22 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
+    "name": "topicTag/borderColor",
+    "value": {
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "base/color/dark/base/color/transparent",
+    "collection": "mode",
+    "mode": "dark protanopia deuteranopia",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.9411764705882353,

/figma/themes/dark-dimmed.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-dimmed.json	2024-12-18 21:12:41.084493856 +0000
@@ -2312,22 +2312,6 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
-    "value": {
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 0
-    },
-    "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "base/color/dark/base/color/transparent",
-    "collection": "mode",
-    "mode": "dark dimmed",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
   "name": "page/header/bgColor",
   "value": {
     "r": 0.12941176470588237,
@@ -2344,6 +2328,22 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
+    "name": "topicTag/borderColor",
+    "value": {
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "base/color/dark/base/color/transparent",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.8196078431372549,

/figma/themes/dark-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-high-contrast.json	2024-12-18 21:12:42.156508551 +0000
@@ -2233,36 +2233,36 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
+    "name": "page/header/bgColor",
   "value": {
-      "r": 0.25098039215686274,
-      "g": 0.6196078431372549,
-      "b": 1,
+      "r": 0.00392156862745098,
+      "g": 0.01568627450980392,
+      "b": 0.03529411764705882,
     "a": 1
   },
   "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "mode/borderColor/accent-emphasis",
+    "refId": "mode/page/header/bgColor",
+    "reference": "bgColor/default",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "page/header/bgColor",
+    "name": "topicTag/borderColor",
   "value": {
-      "r": 0.00392156862745098,
-      "g": 0.01568627450980392,
-      "b": 0.03529411764705882,
+      "r": 0.25098039215686274,
+      "g": 0.6196078431372549,
+      "b": 1,
     "a": 1
   },
   "type": "COLOR",
-    "refId": "mode/page/header/bgColor",
-    "reference": "bgColor/default",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "mode/borderColor/accent-emphasis",
   "collection": "mode",
   "mode": "dark high contrast",
   "group": "component",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+    "scopes": ["STROKE_COLOR"]
 },
 {
   "name": "codeMirror/fgColor",

/figma/themes/dark-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark-tritanopia.json	2024-12-18 21:12:41.442498763 +0000
@@ -2422,22 +2422,6 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
-    "value": {
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 0
-    },
-    "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "base/color/dark/base/color/transparent",
-    "collection": "mode",
-    "mode": "dark tritanopia",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
   "name": "page/header/bgColor",
   "value": {
     "r": 0.050980392156862744,
@@ -2454,6 +2438,22 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
+    "name": "topicTag/borderColor",
+    "value": {
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "base/color/dark/base/color/transparent",
+    "collection": "mode",
+    "mode": "dark tritanopia",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.9411764705882353,

/figma/themes/dark.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/dark.json	2024-12-18 21:12:40.714488784 +0000
@@ -2530,22 +2530,6 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
-    "value": {
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 0
-    },
-    "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "base/color/dark/base/color/transparent",
-    "collection": "mode",
-    "mode": "dark",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
   "name": "page/header/bgColor",
   "value": {
     "r": 0.050980392156862744,
@@ -2562,6 +2546,22 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
+    "name": "topicTag/borderColor",
+    "value": {
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "base/color/dark/base/color/transparent",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.9411764705882353,

/figma/themes/light-colorblind.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-colorblind.json	2024-12-18 21:12:39.981478736 +0000
@@ -2334,22 +2334,6 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
-    "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
-      "a": 0
-    },
-    "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "base/color/light/base/color/transparent",
-    "collection": "mode",
-    "mode": "light protanopia deuteranopia",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
   "name": "page/header/bgColor",
   "value": {
     "r": 0.9647058823529412,
@@ -2366,6 +2350,22 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
+    "name": "topicTag/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "base/color/light/base/color/transparent",
+    "collection": "mode",
+    "mode": "light protanopia deuteranopia",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.12156862745098039,

/figma/themes/light-high-contrast.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-high-contrast.json	2024-12-18 21:12:40.328483492 +0000
@@ -2190,36 +2190,36 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
+    "name": "page/header/bgColor",
   "value": {
-      "r": 0.011764705882352941,
-      "g": 0.28627450980392155,
-      "b": 0.7058823529411765,
+      "r": 0.9019607843137255,
+      "g": 0.9176470588235294,
+      "b": 0.9372549019607843,
     "a": 1
   },
   "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "mode/borderColor/accent-emphasis",
+    "refId": "mode/page/header/bgColor",
+    "reference": "bgColor/muted",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "page/header/bgColor",
+    "name": "topicTag/borderColor",
   "value": {
-      "r": 0.9019607843137255,
-      "g": 0.9176470588235294,
-      "b": 0.9372549019607843,
+      "r": 0.011764705882352941,
+      "g": 0.28627450980392155,
+      "b": 0.7058823529411765,
     "a": 1
   },
   "type": "COLOR",
-    "refId": "mode/page/header/bgColor",
-    "reference": "bgColor/muted",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "mode/borderColor/accent-emphasis",
   "collection": "mode",
   "mode": "light high contrast",
   "group": "component",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+    "scopes": ["STROKE_COLOR"]
 },
 {
   "name": "codeMirror/fgColor",

/figma/themes/light-tritanopia.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light-tritanopia.json	2024-12-18 21:12:39.604473568 +0000
@@ -2365,22 +2365,6 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
-    "name": "topicTag/borderColor",
-    "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
-      "a": 0
-    },
-    "type": "COLOR",
-    "refId": "mode/topicTag/borderColor",
-    "reference": "base/color/light/base/color/transparent",
-    "collection": "mode",
-    "mode": "light tritanopia",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
   "name": "page/header/bgColor",
   "value": {
     "r": 0.9647058823529412,
@@ -2397,6 +2381,22 @@
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {
+    "name": "topicTag/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0
+    },
+    "type": "COLOR",
+    "refId": "mode/topicTag/borderColor",
+    "reference": "base/color/light/base/color/transparent",
+    "collection": "mode",
+    "mode": "light tritanopia",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.12156862745098039,

/figma/themes/light.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/themes/light.json	2024-12-18 21:12:39.176467701 +0000
@@ -1,21 +1,5 @@
[
 {
-    "name": "page/header/bgColor",
-    "value": {
-      "r": 0.9647058823529412,
-      "g": 0.9725490196078431,
-      "b": 0.9803921568627451,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/page/header/bgColor",
-    "reference": "mode/bgColor/muted",
-    "collection": "mode",
-    "mode": "light",
-    "group": "component",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
-  },
-  {
   "name": "codeMirror/fgColor",
   "value": {
     "r": 0.12156862745098039,
@@ -10182,6 +10166,22 @@
   "collection": "mode",
   "mode": "light",
   "group": "component",
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "page/header/bgColor",
+    "value": {
+      "r": 0.9647058823529412,
+      "g": 0.9725490196078431,
+      "b": 0.9803921568627451,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/page/header/bgColor",
+    "reference": "mode/bgColor/muted",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
   "scopes": ["FRAME_FILL", "SHAPE_FILL"]
 },
 {

@github-actions github-actions bot temporarily deployed to Preview (Storybook) December 18, 2024 21:13 Inactive
@lukasoppermann lukasoppermann merged commit f8451ca into main Dec 18, 2024
31 checks passed
@lukasoppermann lukasoppermann deleted the component-page-header branch December 18, 2024 21:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank Awaiting requested review from langermank langermank is a code owner automatically assigned from primer/css-reviewers

Assignees
No one assigned
Labels
skip changeset Apply to PRs that should not result in a version bump.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@lukasoppermann