adds an experimental Stack component styled with Primer CSS class names

primer · Jul 19, 2022 · 333a437 · 333a437
1 parent 63a2de5
commit 333a437
Show file tree

Hide file tree

Showing 4 changed files with 716 additions and 0 deletions.
diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx
@@ -26,6 +26,224 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   details-dialog:focus:not(:focus-visible):not(.focus-visible) {
     outline: none;
   }
+
+  /* 
+    Stack styles copied directly from "@primer/css@0.0.0-20220715012839" 
+    (preview release generated by https://github.com/primer/css/pull/2152)
+
+    DO NOT EDIT MANUALLY
+  */
+  .Stack{
+    --Stack-gap: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap-whenNarrow: var(--Stack-gap);
+    --Stack-divider-color: var(--color-border-default);
+    display:flex;
+    flex-flow:column;
+    flex-wrap:nowrap;
+    align-items:stretch;
+    gap:var(--Stack-gap)
+  }
+  @media(max-width: 767.98px){
+      .Stack{
+          gap:var(--Stack-gap-whenNarrow)
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--dir-inline-whenRegular{
+          flex-flow:row
+      }
+      .Stack--dir-block-whenRegular{
+          flex-flow:column
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--dir-inline-whenNarrow{
+          flex-flow:row
+      }
+      .Stack--dir-block-whenNarrow{
+          flex-flow:column
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--gap-none-whenRegular{
+          --Stack-gap: 0
+      }
+      .Stack--gap-condensed-whenRegular{
+          --Stack-gap: var(--primer-stack-gap-condensed, 8px)
+      }
+      .Stack--gap-normal-whenRegular{
+          --Stack-gap: var(--primer-stack-gap-normal, 16px)
+      }
+      .Stack--gap-spacious-whenRegular{
+          --Stack-gap: var(--primer-stack-gap-spacious, 24px)
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--gap-none-whenNarrow{
+          --Stack-gap-whenNarrow: 0
+      }
+      .Stack--gap-condensed-whenNarrow{
+          --Stack-gap-whenNarrow: var(--primer-stack-gap-condensed, 8px)
+      }
+      .Stack--gap-normal-whenNarrow{
+          --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px)
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--align-start-whenRegular{
+          align-items:flex-start
+      }
+      .Stack--align-center-whenRegular{
+          align-items:center
+      }
+      .Stack--align-end-whenRegular{
+          align-items:flex-end
+      }
+      .Stack--align-baseline-whenRegular{
+          align-items:baseline
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--align-start-whenNarrow{
+          align-items:flex-start
+      }
+      .Stack--align-center-whenNarrow{
+          align-items:center
+      }
+      .Stack--align-end-whenNarrow{
+          align-items:flex-end
+      }
+      .Stack--align-baseline-whenNarrow{
+          align-items:baseline
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--alignWrap-start-whenRegular{
+          align-content:flex-start
+      }
+      .Stack--alignWrap-center-whenRegular{
+          align-content:center
+      }
+      .Stack--alignWrap-end-whenRegular{
+          align-content:flex-end
+      }
+      .Stack--alignWrap-distribute-whenRegular{
+          align-content:space-between
+      }
+      .Stack--alignWrap-distributeEvenly-whenRegular{
+          align-content:space-evenly
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--alignWrap-start-whenNarrow{
+          align-content:flex-start
+      }
+      .Stack--alignWrap-center-whenNarrow{
+          align-content:center
+      }
+      .Stack--alignWrap-end-whenNarrow{
+          align-content:flex-end
+      }
+      .Stack--alignWrap-distribute-whenNarrow{
+          align-content:space-between
+      }
+      .Stack--alignWrap-distributeEvenly-whenNarrow{
+          align-content:space-evenly
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--spread-start-whenRegular{
+          justify-content:flex-start
+      }
+      .Stack--spread-center-whenRegular{
+          justify-content:center
+      }
+      .Stack--spread-end-whenRegular{
+          justify-content:flex-end
+      }
+      .Stack--spread-distribute-whenRegular{
+          justify-content:space-between
+      }
+      .Stack--spread-distributeEvenly-whenRegular{
+          justify-content:space-evenly
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--spread-start-whenNarrow{
+          justify-content:flex-start
+      }
+      .Stack--spread-center-whenNarrow{
+          justify-content:center
+      }
+      .Stack--spread-end-whenNarrow{
+          justify-content:flex-end
+      }
+      .Stack--spread-distribute-whenNarrow{
+          justify-content:space-between
+      }
+      .Stack--spread-distributeEvenly-whenNarrow{
+          justify-content:space-evenly
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--wrap-whenRegular{
+          flex-wrap:wrap
+      }
+      .Stack--nowrap-whenRegular{
+          flex-wrap:nowrap
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--wrap-whenNarrow{
+          flex-wrap:wrap
+      }
+      .Stack--nowrap-whenNarrow{
+          flex-wrap:nowrap
+      }
+  }
+  @media(min-width: 768px){
+      .Stack--showDividers-whenRegular .Stack-divider{
+          display:block
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--showDividers-whenNarrow .Stack-divider{
+          display:block
+      }
+  }
+  .Stack-divider{
+      margin:0;
+      padding:0;
+      border:none;
+      display:none;
+      align-self:stretch
+  }
+  @media(min-width: 768px){
+      .Stack--dir-block-whenRegular .Stack-divider{
+          border-block-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+          inline-size:auto;
+          block-size:0
+      }
+      .Stack--dir-inline-whenRegular .Stack-divider{
+          border-inline-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+          inline-size:0;
+          block-size:auto
+      }
+  }
+  @media(max-width: 767.98px){
+      .Stack--dir-block-whenNarrow .Stack-divider{
+          border-block-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+          inline-size:auto;
+          block-size:0
+      }
+      .Stack--dir-inline-whenNarrow .Stack-divider{
+          border-inline-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+          inline-size:0;
+          block-size:auto
+      }
+  }
+
+
 `
 
 const Base = styled.div<SystemTypographyProps & SystemCommonProps>`