@primer/css 0.0.0-20220303061612 → 0.0.0-20220303222402

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/css
 
-## 0.0.0-20220303061612
+## 0.0.0-20220303222402
 
 ### Patch Changes
 

package/alerts/flash-refactor.scss

@@ -0,0 +1,126 @@
+// Flash alert
+
+.Flash {
+  position: relative;
+  display: grid;
+  // stylelint-disable-next-line primer/spacing
+  padding: $spacer-2;
+  border: $border-width $border-style;
+  border-radius: $border-radius;
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr min-content min-content;
+  grid-template-rows: min-content;
+
+  // `sm` breakpoint variantion
+  @media (max-width: #{map-get($breakpoints, 'sm') - 0.02px}) {
+    grid-template-areas:
+    'visual message close'
+    '  .    actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+
+    .Flash-actions {
+      margin: $spacer-2 0 0 $spacer-2;
+    }
+  }
+
+  // Elements
+
+  .Flash-visual {
+    grid-area: visual;
+    padding: 0 $spacer-2;
+    // stylelint-disable-next-line primer/spacing
+    height: 32px;
+    display: grid;
+    
+    > * {
+      align-self: center;
+    }
+  }
+
+  .Flash-message {
+    // stylelint-disable-next-line primer/spacing
+    padding: calc((#{$spacer-5} - 20px) / 2) $spacer-2;
+    grid-area: message;
+    align-self: center;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .Flash-actions {
+    grid-area: actions;
+  }
+
+  .Flash-close {
+    grid-area: close;
+    margin: 0 0 0 $spacer-2;
+
+    button {
+      &:hover {
+        background-color: var(--color-action-list-item-default-hover-bg);
+      }
+    }
+  }
+
+  // Variants
+
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
+
+  .Flash-visual .octicon {
+    color: var(--color-accent-fg);
+  }
+
+  &.Flash--warning {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+    border-color: var(--color-attention-muted);
+
+    .Flash-visual .octicon {
+      color: var(--color-attention-fg);
+    }
+  }
+
+  &.Flash--error {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+    border-color: var(--color-danger-muted);
+
+    .Flash-visual .octicon {
+      color: var(--color-danger-fg);
+    }
+  }
+
+  &.Flash--success {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+    border-color: var(--color-success-muted);
+
+    .Flash-visual .octicon {
+      color: var(--color-success-fg);
+    }
+  }
+
+  // Full-width
+
+  &.Flash--full {
+    margin-top: ($border-width * -1);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+
+  // Replace with Primitives' Narrow viewport range
+  @media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
+    &.Flash--full-whenNarrow {
+      margin-top: ($border-width * -1);
+      border-left: 0;
+      border-right: 0;
+      border-radius: 0;
+    }
+  }
+}

package/alerts/index.scss

@@ -1,3 +1,4 @@
 // support files
 @import '../support/index.scss';
 @import './flash.scss';
+@import './flash-refactor.scss';

package/dist/alerts.css

@@ -1,2 +1,2 @@
-.flash{position:relative;padding:16px;border-style:solid;border-width:1px;border-radius:6px}.flash p:last-child{margin-bottom:0}.flash .octicon{margin-right:12px}.flash-messages{margin-bottom:24px}.flash-close{float:right;padding:16px;margin:-16px;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.flash-close:hover{opacity:.7}.flash-close:active{opacity:.5}.flash-close .octicon{margin-right:0}.flash-action{float:right;margin-top:-3px;margin-left:24px;background-clip:padding-box}.flash-action.btn .octicon{margin-right:4px;color:var(--color-fg-muted)}.flash-action.btn-primary .octicon{color:inherit}.flash{color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}.flash .octicon{color:var(--color-accent-fg)}.flash-warn{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.flash-warn .octicon{color:var(--color-attention-fg)}.flash-error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.flash-error .octicon{color:var(--color-danger-fg)}.flash-success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.flash-success .octicon{color:var(--color-success-fg)}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-full,.flash-banner{background-color:var(--color-canvas-default)}.flash-tray{margin:-1px;padding:12px 16px;border-radius:0}@media(min-width: 768px){.flash-tray{margin:0;border-radius:6px;animation:flash-tray--appear 200ms 120ms both ease-out}.flash-tray+.flash-tray{margin-top:8px;animation-delay:200ms}}@keyframes flash-tray--appear{from{opacity:0;transform:translateY(-24px)}to{opacity:1}}.warning{padding:.5em;margin-bottom:.8em;font-weight:600;background-color:var(--color-attention-subtle)}
+.flash{position:relative;padding:16px;border-style:solid;border-width:1px;border-radius:6px}.flash p:last-child{margin-bottom:0}.flash .octicon{margin-right:12px}.flash-messages{margin-bottom:24px}.flash-close{float:right;padding:16px;margin:-16px;text-align:center;cursor:pointer;background:none;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.flash-close:hover{opacity:.7}.flash-close:active{opacity:.5}.flash-close .octicon{margin-right:0}.flash-action{float:right;margin-top:-3px;margin-left:24px;background-clip:padding-box}.flash-action.btn .octicon{margin-right:4px;color:var(--color-fg-muted)}.flash-action.btn-primary .octicon{color:inherit}.flash{color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}.flash .octicon{color:var(--color-accent-fg)}.flash-warn{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.flash-warn .octicon{color:var(--color-attention-fg)}.flash-error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.flash-error .octicon{color:var(--color-danger-fg)}.flash-success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.flash-success .octicon{color:var(--color-success-fg)}.flash-full{margin-top:-1px;border-width:1px 0;border-radius:0}.flash-banner{position:fixed;top:0;z-index:90;width:100%;border-top:0;border-right:0;border-left:0;border-radius:0}.flash-full,.flash-banner{background-color:var(--color-canvas-default)}.flash-tray{margin:-1px;padding:12px 16px;border-radius:0}@media(min-width: 768px){.flash-tray{margin:0;border-radius:6px;animation:flash-tray--appear 200ms 120ms both ease-out}.flash-tray+.flash-tray{margin-top:8px;animation-delay:200ms}}@keyframes flash-tray--appear{from{opacity:0;transform:translateY(-24px)}to{opacity:1}}.warning{padding:.5em;margin-bottom:.8em;font-weight:600;background-color:var(--color-attention-subtle)}.Flash{position:relative;display:grid;padding:8px;border:1px solid;border-radius:6px;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr min-content min-content;grid-template-rows:min-content;color:var(--color-fg-default);background-image:linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));border-color:var(--color-accent-muted)}@media(max-width: 543.98px){.Flash{grid-template-areas:"visual message close" "  .    actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Flash .Flash-actions{margin:8px 0 0 8px}}.Flash .Flash-visual{grid-area:visual;padding:0 8px;height:32px;display:grid}.Flash .Flash-visual>*{align-self:center}.Flash .Flash-message{padding:calc((32px - 20px)/2) 8px;grid-area:message;align-self:center}.Flash .Flash-message p:last-child{margin-bottom:0}.Flash .Flash-actions{grid-area:actions}.Flash .Flash-close{grid-area:close;margin:0 0 0 8px}.Flash .Flash-close button:hover{background-color:var(--color-action-list-item-default-hover-bg)}.Flash .Flash-visual .octicon{color:var(--color-accent-fg)}.Flash.Flash--warning{color:var(--color-fg-default);background-image:linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));border-color:var(--color-attention-muted)}.Flash.Flash--warning .Flash-visual .octicon{color:var(--color-attention-fg)}.Flash.Flash--error{color:var(--color-fg-default);background-image:linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));border-color:var(--color-danger-muted)}.Flash.Flash--error .Flash-visual .octicon{color:var(--color-danger-fg)}.Flash.Flash--success{color:var(--color-fg-default);background-image:linear-gradient(var(--color-success-subtle), var(--color-success-subtle));border-color:var(--color-success-muted)}.Flash.Flash--success .Flash-visual .octicon{color:var(--color-success-fg)}.Flash.Flash--full{margin-top:-1px;border-left:0;border-right:0;border-radius:0}@media(max-width: 767.98px){.Flash.Flash--full-whenNarrow{margin-top:-1px;border-left:0;border-right:0;border-radius:0}}
 /*# sourceMappingURL=alerts.css.map */

package/dist/alerts.css.map

@@ -1 +1 @@
-{"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AAqgBA,OAAA,iBACE,CAAA,YAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,YAAA,WAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,yBAAA,YAAA,QAAA,CAAA,iBAAA,CAAA,sDAAA,CAAA,wBAAA,cAAA,CAAA,qBAAA,CAAA,CAAA,8BAAA,KAAA,SAAA,CAAA,2BAAA,CAAA,GAAA,SAAA,CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA","file":"alerts.css"}
+{"version":3,"sources":["file:///home/runner/work/css/css/src/alerts/index.scss%23sass"],"names":[],"mappings":"AAqgBA,OAAA,iBACE,CAAA,YAAA,CAAA,kBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,iBAAA,CAAA,gBAAA,kBAAA,CAAA,aAAA,WAAA,CAAA,YAAA,CAAA,YAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,eAAA,CAAA,QAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,UAAA,CAAA,oBAAA,UAAA,CAAA,sBAAA,cAAA,CAAA,cAAA,WAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,2BAAA,gBAAA,CAAA,2BAAA,CAAA,mCAAA,aAAA,CAAA,OAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,gBAAA,4BAAA,CAAA,YAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,qBAAA,+BAAA,CAAA,aAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,sBAAA,4BAAA,CAAA,eAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,wBAAA,6BAAA,CAAA,YAAA,eAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,cAAA,cAAA,CAAA,KAAA,CAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,cAAA,CAAA,aAAA,CAAA,eAAA,CAAA,0BAAA,4CAAA,CAAA,YAAA,WAAA,CAAA,iBAAA,CAAA,eAAA,CAAA,yBAAA,YAAA,QAAA,CAAA,iBAAA,CAAA,sDAAA,CAAA,wBAAA,cAAA,CAAA,qBAAA,CAAA,CAAA,8BAAA,KAAA,SAAA,CAAA,2BAAA,CAAA,GAAA,SAAA,CAAA,CAAA,SAAA,YAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,8CAAA,CAAA,OAAA,iBAAA,CAAA,YAAA,CAAA,WAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,qBAAA,CAAA,kDAAA,CAAA,6DAAA,CAAA,8BAAA,CAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,4BAAA,OAAA,mEAAA,CAAA,iDAAA,CAAA,0CAAA,CAAA,sBAAA,kBAAA,CAAA,CAAA,qBAAA,gBAAA,CAAA,aAAA,CAAA,WAAA,CAAA,YAAA,CAAA,uBAAA,iBAAA,CAAA,sBAAA,iCAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,mCAAA,eAAA,CAAA,sBAAA,iBAAA,CAAA,oBAAA,eAAA,CAAA,gBAAA,CAAA,iCAAA,+DAAA,CAAA,8BAAA,4BAAA,CAAA,sBAAA,6BAAA,CAAA,8FAAA,CAAA,yCAAA,CAAA,6CAAA,+BAAA,CAAA,oBAAA,6BAAA,CAAA,wFAAA,CAAA,sCAAA,CAAA,2CAAA,4BAAA,CAAA,sBAAA,6BAAA,CAAA,0FAAA,CAAA,uCAAA,CAAA,6CAAA,6BAAA,CAAA,mBAAA,eAAA,CAAA,aAAA,CAAA,cAAA,CAAA,eAAA,CAAA,4BAAA,8BAAA,eAAA,CAAA,aAAA,CAAA,cAAA,CAAA,eAAA,CAAA","file":"alerts.css"}