@greese/ui 0.0.0-stage → 1.0.0

package/dist/css/Box.css

@@ -0,0 +1,640 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Box {
+    box-sizing: border-box;
+  }
+}
+@layer greese.utilities {
+  .greese-Box--xs-m {
+    margin: var(--greese-box-m-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-m {
+      margin: var(--greese-box-m-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-m {
+      margin: var(--greese-box-m-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-m {
+      margin: var(--greese-box-m-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-m {
+      margin: var(--greese-box-m-xl);
+    }
+  }
+  .greese-Box--xs-mx {
+    margin-inline: var(--greese-box-mx-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-mx {
+      margin-inline: var(--greese-box-mx-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-mx {
+      margin-inline: var(--greese-box-mx-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-mx {
+      margin-inline: var(--greese-box-mx-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-mx {
+      margin-inline: var(--greese-box-mx-xl);
+    }
+  }
+  .greese-Box--xs-my {
+    margin-block: var(--greese-box-my-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-my {
+      margin-block: var(--greese-box-my-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-my {
+      margin-block: var(--greese-box-my-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-my {
+      margin-block: var(--greese-box-my-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-my {
+      margin-block: var(--greese-box-my-xl);
+    }
+  }
+  .greese-Box--xs-mt {
+    margin-block-start: var(--greese-box-mt-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-mt {
+      margin-block-start: var(--greese-box-mt-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-mt {
+      margin-block-start: var(--greese-box-mt-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-mt {
+      margin-block-start: var(--greese-box-mt-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-mt {
+      margin-block-start: var(--greese-box-mt-xl);
+    }
+  }
+  .greese-Box--xs-mb {
+    margin-block-end: var(--greese-box-mb-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-mb {
+      margin-block-end: var(--greese-box-mb-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-mb {
+      margin-block-end: var(--greese-box-mb-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-mb {
+      margin-block-end: var(--greese-box-mb-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-mb {
+      margin-block-end: var(--greese-box-mb-xl);
+    }
+  }
+  .greese-Box--xs-ms {
+    margin-inline-start: var(--greese-box-ms-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-ms {
+      margin-inline-start: var(--greese-box-ms-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-ms {
+      margin-inline-start: var(--greese-box-ms-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-ms {
+      margin-inline-start: var(--greese-box-ms-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-ms {
+      margin-inline-start: var(--greese-box-ms-xl);
+    }
+  }
+  .greese-Box--xs-me {
+    margin-inline-end: var(--greese-box-me-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-me {
+      margin-inline-end: var(--greese-box-me-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-me {
+      margin-inline-end: var(--greese-box-me-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-me {
+      margin-inline-end: var(--greese-box-me-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-me {
+      margin-inline-end: var(--greese-box-me-xl);
+    }
+  }
+  .greese-Box--xs-p {
+    padding: var(--greese-box-p-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-p {
+      padding: var(--greese-box-p-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-p {
+      padding: var(--greese-box-p-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-p {
+      padding: var(--greese-box-p-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-p {
+      padding: var(--greese-box-p-xl);
+    }
+  }
+  .greese-Box--xs-px {
+    padding-inline: var(--greese-box-px-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-px {
+      padding-inline: var(--greese-box-px-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-px {
+      padding-inline: var(--greese-box-px-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-px {
+      padding-inline: var(--greese-box-px-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-px {
+      padding-inline: var(--greese-box-px-xl);
+    }
+  }
+  .greese-Box--xs-py {
+    padding-block: var(--greese-box-py-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-py {
+      padding-block: var(--greese-box-py-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-py {
+      padding-block: var(--greese-box-py-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-py {
+      padding-block: var(--greese-box-py-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-py {
+      padding-block: var(--greese-box-py-xl);
+    }
+  }
+  .greese-Box--xs-pt {
+    padding-block-start: var(--greese-box-pt-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-pt {
+      padding-block-start: var(--greese-box-pt-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-pt {
+      padding-block-start: var(--greese-box-pt-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-pt {
+      padding-block-start: var(--greese-box-pt-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-pt {
+      padding-block-start: var(--greese-box-pt-xl);
+    }
+  }
+  .greese-Box--xs-pb {
+    padding-block-end: var(--greese-box-pb-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-pb {
+      padding-block-end: var(--greese-box-pb-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-pb {
+      padding-block-end: var(--greese-box-pb-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-pb {
+      padding-block-end: var(--greese-box-pb-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-pb {
+      padding-block-end: var(--greese-box-pb-xl);
+    }
+  }
+  .greese-Box--xs-ps {
+    padding-inline-start: var(--greese-box-ps-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-ps {
+      padding-inline-start: var(--greese-box-ps-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-ps {
+      padding-inline-start: var(--greese-box-ps-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-ps {
+      padding-inline-start: var(--greese-box-ps-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-ps {
+      padding-inline-start: var(--greese-box-ps-xl);
+    }
+  }
+  .greese-Box--xs-pe {
+    padding-inline-end: var(--greese-box-pe-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-pe {
+      padding-inline-end: var(--greese-box-pe-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-pe {
+      padding-inline-end: var(--greese-box-pe-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-pe {
+      padding-inline-end: var(--greese-box-pe-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-pe {
+      padding-inline-end: var(--greese-box-pe-xl);
+    }
+  }
+  .greese-Box--xs-gap {
+    gap: var(--greese-box-gap-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-gap {
+      gap: var(--greese-box-gap-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-gap {
+      gap: var(--greese-box-gap-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-gap {
+      gap: var(--greese-box-gap-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-gap {
+      gap: var(--greese-box-gap-xl);
+    }
+  }
+  .greese-Box--xs-w {
+    inline-size: var(--greese-box-w-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-w {
+      inline-size: var(--greese-box-w-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-w {
+      inline-size: var(--greese-box-w-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-w {
+      inline-size: var(--greese-box-w-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-w {
+      inline-size: var(--greese-box-w-xl);
+    }
+  }
+  .greese-Box--xs-max-w {
+    max-inline-size: var(--greese-box-max-w-xs);
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-max-w {
+      max-inline-size: var(--greese-box-max-w-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-max-w {
+      max-inline-size: var(--greese-box-max-w-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-max-w {
+      max-inline-size: var(--greese-box-max-w-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-max-w {
+      max-inline-size: var(--greese-box-max-w-xl);
+    }
+  }
+  .greese-Box--xs-display {
+    display: var(--greese-box-display-xs);
+  }
+  .greese-Box--xs-display-block {
+    display: block;
+  }
+  .greese-Box--xs-display-inline {
+    display: inline;
+  }
+  .greese-Box--xs-display-inline-block {
+    display: inline-block;
+  }
+  .greese-Box--xs-display-flex {
+    display: flex;
+  }
+  .greese-Box--xs-display-inline-flex {
+    display: inline-flex;
+  }
+  .greese-Box--xs-display-grid {
+    display: grid;
+  }
+  .greese-Box--xs-display-inline-grid {
+    display: inline-grid;
+  }
+  .greese-Box--xs-display-none {
+    display: none;
+  }
+  .greese-Box--xs-display-contents {
+    display: contents;
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-display {
+      display: var(--greese-box-display-sm);
+    }
+    .greese-Box--sm-display-block {
+      display: block;
+    }
+    .greese-Box--sm-display-inline {
+      display: inline;
+    }
+    .greese-Box--sm-display-inline-block {
+      display: inline-block;
+    }
+    .greese-Box--sm-display-flex {
+      display: flex;
+    }
+    .greese-Box--sm-display-inline-flex {
+      display: inline-flex;
+    }
+    .greese-Box--sm-display-grid {
+      display: grid;
+    }
+    .greese-Box--sm-display-inline-grid {
+      display: inline-grid;
+    }
+    .greese-Box--sm-display-none {
+      display: none;
+    }
+    .greese-Box--sm-display-contents {
+      display: contents;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-display {
+      display: var(--greese-box-display-md);
+    }
+    .greese-Box--md-display-block {
+      display: block;
+    }
+    .greese-Box--md-display-inline {
+      display: inline;
+    }
+    .greese-Box--md-display-inline-block {
+      display: inline-block;
+    }
+    .greese-Box--md-display-flex {
+      display: flex;
+    }
+    .greese-Box--md-display-inline-flex {
+      display: inline-flex;
+    }
+    .greese-Box--md-display-grid {
+      display: grid;
+    }
+    .greese-Box--md-display-inline-grid {
+      display: inline-grid;
+    }
+    .greese-Box--md-display-none {
+      display: none;
+    }
+    .greese-Box--md-display-contents {
+      display: contents;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-display {
+      display: var(--greese-box-display-lg);
+    }
+    .greese-Box--lg-display-block {
+      display: block;
+    }
+    .greese-Box--lg-display-inline {
+      display: inline;
+    }
+    .greese-Box--lg-display-inline-block {
+      display: inline-block;
+    }
+    .greese-Box--lg-display-flex {
+      display: flex;
+    }
+    .greese-Box--lg-display-inline-flex {
+      display: inline-flex;
+    }
+    .greese-Box--lg-display-grid {
+      display: grid;
+    }
+    .greese-Box--lg-display-inline-grid {
+      display: inline-grid;
+    }
+    .greese-Box--lg-display-none {
+      display: none;
+    }
+    .greese-Box--lg-display-contents {
+      display: contents;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-display {
+      display: var(--greese-box-display-xl);
+    }
+    .greese-Box--xl-display-block {
+      display: block;
+    }
+    .greese-Box--xl-display-inline {
+      display: inline;
+    }
+    .greese-Box--xl-display-inline-block {
+      display: inline-block;
+    }
+    .greese-Box--xl-display-flex {
+      display: flex;
+    }
+    .greese-Box--xl-display-inline-flex {
+      display: inline-flex;
+    }
+    .greese-Box--xl-display-grid {
+      display: grid;
+    }
+    .greese-Box--xl-display-inline-grid {
+      display: inline-grid;
+    }
+    .greese-Box--xl-display-none {
+      display: none;
+    }
+    .greese-Box--xl-display-contents {
+      display: contents;
+    }
+  }
+  .greese-Box--xs-text-align {
+    text-align: var(--greese-box-text-align-xs);
+  }
+  .greese-Box--xs-text-align-start {
+    text-align: start;
+  }
+  .greese-Box--xs-text-align-center {
+    text-align: center;
+  }
+  .greese-Box--xs-text-align-end {
+    text-align: end;
+  }
+  .greese-Box--xs-text-align-justify {
+    text-align: justify;
+  }
+  @media (width >= 600px) {
+    .greese-Box--sm-text-align {
+      text-align: var(--greese-box-text-align-sm);
+    }
+    .greese-Box--sm-text-align-start {
+      text-align: start;
+    }
+    .greese-Box--sm-text-align-center {
+      text-align: center;
+    }
+    .greese-Box--sm-text-align-end {
+      text-align: end;
+    }
+    .greese-Box--sm-text-align-justify {
+      text-align: justify;
+    }
+  }
+  @media (width >= 900px) {
+    .greese-Box--md-text-align {
+      text-align: var(--greese-box-text-align-md);
+    }
+    .greese-Box--md-text-align-start {
+      text-align: start;
+    }
+    .greese-Box--md-text-align-center {
+      text-align: center;
+    }
+    .greese-Box--md-text-align-end {
+      text-align: end;
+    }
+    .greese-Box--md-text-align-justify {
+      text-align: justify;
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-Box--lg-text-align {
+      text-align: var(--greese-box-text-align-lg);
+    }
+    .greese-Box--lg-text-align-start {
+      text-align: start;
+    }
+    .greese-Box--lg-text-align-center {
+      text-align: center;
+    }
+    .greese-Box--lg-text-align-end {
+      text-align: end;
+    }
+    .greese-Box--lg-text-align-justify {
+      text-align: justify;
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-Box--xl-text-align {
+      text-align: var(--greese-box-text-align-xl);
+    }
+    .greese-Box--xl-text-align-start {
+      text-align: start;
+    }
+    .greese-Box--xl-text-align-center {
+      text-align: center;
+    }
+    .greese-Box--xl-text-align-end {
+      text-align: end;
+    }
+    .greese-Box--xl-text-align-justify {
+      text-align: justify;
+    }
+  }
+}

package/dist/css/Breadcrumbs.css

@@ -0,0 +1,57 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Breadcrumbs-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1) var(--greese-space-2);
+    align-items: center;
+    padding: 0;
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    list-style: none;
+  }
+  .greese-BreadcrumbItem {
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 0;
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-BreadcrumbItem + .greese-BreadcrumbItem::before {
+    color: var(--greese-color-border-strong);
+    content: "/"/"";
+  }
+  .greese-BreadcrumbItem-link,
+  .greese-Breadcrumbs-expand {
+    color: inherit;
+    text-decoration: none;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-BreadcrumbItem-link:focus-visible,
+  .greese-Breadcrumbs-expand:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 1px;
+  }
+  @media (hover: hover) {
+    .greese-BreadcrumbItem-link:hover,
+    .greese-Breadcrumbs-expand:hover {
+      color: var(--greese-color-fg);
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+    }
+  }
+  .greese-Breadcrumbs-expand {
+    padding: 0 var(--greese-space-1);
+    font: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+  .greese-BreadcrumbItem-current {
+    overflow: hidden;
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}