@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Stack.css

@@ -0,0 +1,528 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Stack {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  .greese-Stack--xs-direction {
+    flex-direction: var(--greese-stack-direction-xs);
+  }
+  .greese-Stack--xs-direction-row {
+    flex-direction: row;
+  }
+  .greese-Stack--xs-direction-column {
+    flex-direction: column;
+  }
+  .greese-Stack--xs-direction-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .greese-Stack--xs-direction-column-reverse {
+    flex-direction: column-reverse;
+  }
+  @media (width >= 600px) {
+    .greese-Stack--sm-direction {
+      flex-direction: var(--greese-stack-direction-sm);
+    }
+    .greese-Stack--sm-direction-row {
+      flex-direction: row;
+    }
+    .greese-Stack--sm-direction-column {
+      flex-direction: column;
+    }
+    .greese-Stack--sm-direction-row-reverse {
+      flex-direction: row-reverse;
+    }
+    .greese-Stack--sm-direction-column-reverse {
+      flex-direction: column-reverse;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Stack--md-direction {
+      flex-direction: var(--greese-stack-direction-md);
+    }
+    .greese-Stack--md-direction-row {
+      flex-direction: row;
+    }
+    .greese-Stack--md-direction-column {
+      flex-direction: column;
+    }
+    .greese-Stack--md-direction-row-reverse {
+      flex-direction: row-reverse;
+    }
+    .greese-Stack--md-direction-column-reverse {
+      flex-direction: column-reverse;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Stack--lg-direction {
+      flex-direction: var(--greese-stack-direction-lg);
+    }
+    .greese-Stack--lg-direction-row {
+      flex-direction: row;
+    }
+    .greese-Stack--lg-direction-column {
+      flex-direction: column;
+    }
+    .greese-Stack--lg-direction-row-reverse {
+      flex-direction: row-reverse;
+    }
+    .greese-Stack--lg-direction-column-reverse {
+      flex-direction: column-reverse;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Stack--xl-direction {
+      flex-direction: var(--greese-stack-direction-xl);
+    }
+    .greese-Stack--xl-direction-row {
+      flex-direction: row;
+    }
+    .greese-Stack--xl-direction-column {
+      flex-direction: column;
+    }
+    .greese-Stack--xl-direction-row-reverse {
+      flex-direction: row-reverse;
+    }
+    .greese-Stack--xl-direction-column-reverse {
+      flex-direction: column-reverse;
+    }
+  }
+  .greese-Stack--xs-gap {
+    gap: var(--greese-stack-gap-xs);
+  }
+  .greese-Stack--xs-gap-0 {
+    gap: var(--greese-space-0);
+  }
+  .greese-Stack--xs-gap-1 {
+    gap: var(--greese-space-1);
+  }
+  .greese-Stack--xs-gap-2 {
+    gap: var(--greese-space-2);
+  }
+  .greese-Stack--xs-gap-3 {
+    gap: var(--greese-space-3);
+  }
+  .greese-Stack--xs-gap-4 {
+    gap: var(--greese-space-4);
+  }
+  .greese-Stack--xs-gap-5 {
+    gap: var(--greese-space-5);
+  }
+  .greese-Stack--xs-gap-6 {
+    gap: var(--greese-space-6);
+  }
+  .greese-Stack--xs-gap-7 {
+    gap: var(--greese-space-7);
+  }
+  .greese-Stack--xs-gap-8 {
+    gap: var(--greese-space-8);
+  }
+  @media (width >= 600px) {
+    .greese-Stack--sm-gap {
+      gap: var(--greese-stack-gap-sm);
+    }
+    .greese-Stack--sm-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Stack--sm-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Stack--sm-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Stack--sm-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Stack--sm-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Stack--sm-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Stack--sm-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Stack--sm-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Stack--sm-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Stack--md-gap {
+      gap: var(--greese-stack-gap-md);
+    }
+    .greese-Stack--md-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Stack--md-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Stack--md-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Stack--md-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Stack--md-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Stack--md-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Stack--md-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Stack--md-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Stack--md-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Stack--lg-gap {
+      gap: var(--greese-stack-gap-lg);
+    }
+    .greese-Stack--lg-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Stack--lg-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Stack--lg-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Stack--lg-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Stack--lg-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Stack--lg-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Stack--lg-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Stack--lg-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Stack--lg-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Stack--xl-gap {
+      gap: var(--greese-stack-gap-xl);
+    }
+    .greese-Stack--xl-gap-0 {
+      gap: var(--greese-space-0);
+    }
+    .greese-Stack--xl-gap-1 {
+      gap: var(--greese-space-1);
+    }
+    .greese-Stack--xl-gap-2 {
+      gap: var(--greese-space-2);
+    }
+    .greese-Stack--xl-gap-3 {
+      gap: var(--greese-space-3);
+    }
+    .greese-Stack--xl-gap-4 {
+      gap: var(--greese-space-4);
+    }
+    .greese-Stack--xl-gap-5 {
+      gap: var(--greese-space-5);
+    }
+    .greese-Stack--xl-gap-6 {
+      gap: var(--greese-space-6);
+    }
+    .greese-Stack--xl-gap-7 {
+      gap: var(--greese-space-7);
+    }
+    .greese-Stack--xl-gap-8 {
+      gap: var(--greese-space-8);
+    }
+  }
+  .greese-Stack--xs-align {
+    align-items: var(--greese-stack-align-xs);
+  }
+  .greese-Stack--xs-align-start {
+    align-items: flex-start;
+  }
+  .greese-Stack--xs-align-center {
+    align-items: center;
+  }
+  .greese-Stack--xs-align-end {
+    align-items: flex-end;
+  }
+  .greese-Stack--xs-align-stretch {
+    align-items: stretch;
+  }
+  .greese-Stack--xs-align-baseline {
+    align-items: baseline;
+  }
+  @media (width >= 600px) {
+    .greese-Stack--sm-align {
+      align-items: var(--greese-stack-align-sm);
+    }
+    .greese-Stack--sm-align-start {
+      align-items: flex-start;
+    }
+    .greese-Stack--sm-align-center {
+      align-items: center;
+    }
+    .greese-Stack--sm-align-end {
+      align-items: flex-end;
+    }
+    .greese-Stack--sm-align-stretch {
+      align-items: stretch;
+    }
+    .greese-Stack--sm-align-baseline {
+      align-items: baseline;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Stack--md-align {
+      align-items: var(--greese-stack-align-md);
+    }
+    .greese-Stack--md-align-start {
+      align-items: flex-start;
+    }
+    .greese-Stack--md-align-center {
+      align-items: center;
+    }
+    .greese-Stack--md-align-end {
+      align-items: flex-end;
+    }
+    .greese-Stack--md-align-stretch {
+      align-items: stretch;
+    }
+    .greese-Stack--md-align-baseline {
+      align-items: baseline;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Stack--lg-align {
+      align-items: var(--greese-stack-align-lg);
+    }
+    .greese-Stack--lg-align-start {
+      align-items: flex-start;
+    }
+    .greese-Stack--lg-align-center {
+      align-items: center;
+    }
+    .greese-Stack--lg-align-end {
+      align-items: flex-end;
+    }
+    .greese-Stack--lg-align-stretch {
+      align-items: stretch;
+    }
+    .greese-Stack--lg-align-baseline {
+      align-items: baseline;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Stack--xl-align {
+      align-items: var(--greese-stack-align-xl);
+    }
+    .greese-Stack--xl-align-start {
+      align-items: flex-start;
+    }
+    .greese-Stack--xl-align-center {
+      align-items: center;
+    }
+    .greese-Stack--xl-align-end {
+      align-items: flex-end;
+    }
+    .greese-Stack--xl-align-stretch {
+      align-items: stretch;
+    }
+    .greese-Stack--xl-align-baseline {
+      align-items: baseline;
+    }
+  }
+  .greese-Stack--xs-justify {
+    justify-content: var(--greese-stack-justify-xs);
+  }
+  .greese-Stack--xs-justify-start {
+    justify-content: flex-start;
+  }
+  .greese-Stack--xs-justify-center {
+    justify-content: center;
+  }
+  .greese-Stack--xs-justify-end {
+    justify-content: flex-end;
+  }
+  .greese-Stack--xs-justify-between {
+    justify-content: space-between;
+  }
+  .greese-Stack--xs-justify-around {
+    justify-content: space-around;
+  }
+  .greese-Stack--xs-justify-evenly {
+    justify-content: space-evenly;
+  }
+  @media (width >= 600px) {
+    .greese-Stack--sm-justify {
+      justify-content: var(--greese-stack-justify-sm);
+    }
+    .greese-Stack--sm-justify-start {
+      justify-content: flex-start;
+    }
+    .greese-Stack--sm-justify-center {
+      justify-content: center;
+    }
+    .greese-Stack--sm-justify-end {
+      justify-content: flex-end;
+    }
+    .greese-Stack--sm-justify-between {
+      justify-content: space-between;
+    }
+    .greese-Stack--sm-justify-around {
+      justify-content: space-around;
+    }
+    .greese-Stack--sm-justify-evenly {
+      justify-content: space-evenly;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Stack--md-justify {
+      justify-content: var(--greese-stack-justify-md);
+    }
+    .greese-Stack--md-justify-start {
+      justify-content: flex-start;
+    }
+    .greese-Stack--md-justify-center {
+      justify-content: center;
+    }
+    .greese-Stack--md-justify-end {
+      justify-content: flex-end;
+    }
+    .greese-Stack--md-justify-between {
+      justify-content: space-between;
+    }
+    .greese-Stack--md-justify-around {
+      justify-content: space-around;
+    }
+    .greese-Stack--md-justify-evenly {
+      justify-content: space-evenly;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Stack--lg-justify {
+      justify-content: var(--greese-stack-justify-lg);
+    }
+    .greese-Stack--lg-justify-start {
+      justify-content: flex-start;
+    }
+    .greese-Stack--lg-justify-center {
+      justify-content: center;
+    }
+    .greese-Stack--lg-justify-end {
+      justify-content: flex-end;
+    }
+    .greese-Stack--lg-justify-between {
+      justify-content: space-between;
+    }
+    .greese-Stack--lg-justify-around {
+      justify-content: space-around;
+    }
+    .greese-Stack--lg-justify-evenly {
+      justify-content: space-evenly;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Stack--xl-justify {
+      justify-content: var(--greese-stack-justify-xl);
+    }
+    .greese-Stack--xl-justify-start {
+      justify-content: flex-start;
+    }
+    .greese-Stack--xl-justify-center {
+      justify-content: center;
+    }
+    .greese-Stack--xl-justify-end {
+      justify-content: flex-end;
+    }
+    .greese-Stack--xl-justify-between {
+      justify-content: space-between;
+    }
+    .greese-Stack--xl-justify-around {
+      justify-content: space-around;
+    }
+    .greese-Stack--xl-justify-evenly {
+      justify-content: space-evenly;
+    }
+  }
+  .greese-Stack--xs-wrap {
+    flex-wrap: var(--greese-stack-wrap-xs);
+  }
+  .greese-Stack--xs-wrap-wrap {
+    flex-wrap: wrap;
+  }
+  .greese-Stack--xs-wrap-nowrap {
+    flex-wrap: nowrap;
+  }
+  .greese-Stack--xs-wrap-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  @media (width >= 600px) {
+    .greese-Stack--sm-wrap {
+      flex-wrap: var(--greese-stack-wrap-sm);
+    }
+    .greese-Stack--sm-wrap-wrap {
+      flex-wrap: wrap;
+    }
+    .greese-Stack--sm-wrap-nowrap {
+      flex-wrap: nowrap;
+    }
+    .greese-Stack--sm-wrap-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Stack--md-wrap {
+      flex-wrap: var(--greese-stack-wrap-md);
+    }
+    .greese-Stack--md-wrap-wrap {
+      flex-wrap: wrap;
+    }
+    .greese-Stack--md-wrap-nowrap {
+      flex-wrap: nowrap;
+    }
+    .greese-Stack--md-wrap-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Stack--lg-wrap {
+      flex-wrap: var(--greese-stack-wrap-lg);
+    }
+    .greese-Stack--lg-wrap-wrap {
+      flex-wrap: wrap;
+    }
+    .greese-Stack--lg-wrap-nowrap {
+      flex-wrap: nowrap;
+    }
+    .greese-Stack--lg-wrap-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Stack--xl-wrap {
+      flex-wrap: var(--greese-stack-wrap-xl);
+    }
+    .greese-Stack--xl-wrap-wrap {
+      flex-wrap: wrap;
+    }
+    .greese-Stack--xl-wrap-nowrap {
+      flex-wrap: nowrap;
+    }
+    .greese-Stack--xl-wrap-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}

package/dist/css/Stat.css

@@ -0,0 +1,107 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Stat {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--greese-space-1) var(--greese-space-4);
+    align-content: start;
+    padding: var(--greese-stat-padding, var(--greese-space-4));
+    margin: 0;
+  }
+  .greese-Stat > dd {
+    margin: 0;
+  }
+  .greese-Stat-label {
+    grid-column: 1;
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Stat-value {
+    grid-column: 1;
+    font-size: var(--greese-type-h2-font-size);
+    font-weight: var(--greese-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--greese-line-height-tight);
+    color: var(--greese-color-fg);
+  }
+  .greese-Stat-description {
+    grid-column: 1;
+    font-size: var(--greese-type-p3-font-size);
+  }
+  .greese-Stat-description--muted {
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Stat-description--primary {
+    color: var(--greese-color-primary);
+  }
+  .greese-Stat-description--secondary {
+    color: var(--greese-color-secondary);
+  }
+  .greese-Stat-description--tertiary {
+    color: var(--greese-color-tertiary);
+  }
+  .greese-Stat-description--accent {
+    color: var(--greese-color-accent);
+  }
+  .greese-Stat-description--positive {
+    color: var(--greese-color-positive);
+  }
+  .greese-Stat-description--negative {
+    color: var(--greese-color-negative);
+  }
+  .greese-Stat-media {
+    grid-row: 1/span 3;
+    grid-column: 2;
+    align-self: center;
+    color: var(--greese-color-primary);
+  }
+  .greese-StatGroup {
+    box-sizing: border-box;
+    display: grid;
+    overflow: hidden;
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-surface);
+  }
+  .greese-StatGroup > * + * {
+    border-block-start: 1px solid var(--greese-color-border);
+  }
+  .greese-StatGroup--row-xs {
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+  }
+  .greese-StatGroup--row-xs > * + * {
+    border-block-start: 0;
+    border-inline-start: 1px solid var(--greese-color-border);
+  }
+  @media (width >= 600px) {
+    .greese-StatGroup--row-sm {
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+    }
+    .greese-StatGroup--row-sm > * + * {
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--greese-color-border);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-StatGroup--row-md {
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+    }
+    .greese-StatGroup--row-md > * + * {
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--greese-color-border);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-StatGroup--row-lg {
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+    }
+    .greese-StatGroup--row-lg > * + * {
+      border-block-start: 0;
+      border-inline-start: 1px solid var(--greese-color-border);
+    }
+  }
+}

package/dist/css/Status.css

@@ -0,0 +1,86 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Status--neutral {
+    --greese-status-tone: var(--greese-color-fg);
+    --greese-status-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Status--primary {
+    --greese-status-tone: var(--greese-color-primary);
+    --greese-status-tone-on: var(--greese-color-primary-content);
+  }
+  .greese-Status--secondary {
+    --greese-status-tone: var(--greese-color-secondary);
+    --greese-status-tone-on: var(--greese-color-secondary-content);
+  }
+  .greese-Status--tertiary {
+    --greese-status-tone: var(--greese-color-tertiary);
+    --greese-status-tone-on: var(--greese-color-tertiary-content);
+  }
+  .greese-Status--accent {
+    --greese-status-tone: var(--greese-color-accent);
+    --greese-status-tone-on: var(--greese-color-accent-content);
+  }
+  .greese-Status--positive {
+    --greese-status-tone: var(--greese-color-positive);
+    --greese-status-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Status--negative {
+    --greese-status-tone: var(--greese-color-negative);
+    --greese-status-tone-on: var(--greese-color-negative-content);
+  }
+  .greese-Status--warning {
+    --greese-status-tone: var(--greese-color-warning);
+    --greese-status-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Status--info {
+    --greese-status-tone: var(--greese-color-info);
+    --greese-status-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Status {
+    --greese-status-size: 0.625rem;
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: var(--greese-status-size);
+    block-size: var(--greese-status-size);
+    vertical-align: middle;
+    background-color: var(--greese-status-tone);
+    border-radius: var(--greese-corner-round);
+  }
+  .greese-Status--neutral {
+    --greese-status-tone: var(--greese-color-fg-muted);
+  }
+  .greese-Status--xs {
+    --greese-status-size: 0.25rem;
+  }
+  .greese-Status--sm {
+    --greese-status-size: 0.5rem;
+  }
+  .greese-Status--md {
+    --greese-status-size: 0.75rem;
+  }
+  .greese-Status--lg {
+    --greese-status-size: 1rem;
+  }
+  .greese-Status--xl {
+    --greese-status-size: 1.25rem;
+  }
+  .greese-Status--pulse::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    background-color: inherit;
+    border-radius: inherit;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Status--pulse::after {
+      animation: greese-status-pulse 1.6s var(--greese-easing-exit) infinite;
+    }
+  }
+  @keyframes greese-status-pulse {
+    to {
+      opacity: 0;
+      scale: 2.6;
+    }
+  }
+}