@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Text.css

@@ -0,0 +1,60 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Text {
+    margin: 0;
+  }
+  .greese-Text--regular {
+    font-weight: var(--greese-font-weight-regular);
+  }
+  .greese-Text--medium {
+    font-weight: var(--greese-font-weight-medium);
+  }
+  .greese-Text--semibold {
+    font-weight: var(--greese-font-weight-semibold);
+  }
+  .greese-Text--bold {
+    font-weight: var(--greese-font-weight-bold);
+  }
+  .greese-Text--neutral {
+    color: var(--greese-color-fg);
+  }
+  .greese-Text--muted {
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Text--primary {
+    color: var(--greese-color-primary);
+  }
+  .greese-Text--secondary {
+    color: var(--greese-color-secondary);
+  }
+  .greese-Text--tertiary {
+    color: var(--greese-color-tertiary);
+  }
+  .greese-Text--accent {
+    color: var(--greese-color-accent);
+  }
+  .greese-Text--positive {
+    color: var(--greese-color-positive);
+  }
+  .greese-Text--negative {
+    color: var(--greese-color-negative);
+  }
+  .greese-Text--warning {
+    color: var(--greese-color-warning);
+  }
+  .greese-Text--info {
+    color: var(--greese-color-info);
+  }
+  .greese-Text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .greese-Text--clamp {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--greese-text-lines);
+    line-clamp: var(--greese-text-lines);
+  }
+}

package/dist/css/TextRotate.css

@@ -0,0 +1,147 @@
+@import './core.css';
+@layer greese.components {
+  .greese-TextRotate {
+    display: inline-grid;
+    block-size: 1lh;
+    overflow: hidden;
+    vertical-align: bottom;
+  }
+  .greese-TextRotate-track {
+    display: flex;
+    flex-direction: column;
+  }
+  .greese-TextRotate-item {
+    block-size: 1lh;
+    white-space: nowrap;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-TextRotate--2 .greese-TextRotate-track {
+      animation: greese-textrotate-2 var(--greese-textrotate-duration) infinite;
+    }
+  }
+  @keyframes greese-textrotate-2 {
+    0%, 40% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 0);
+    }
+    50%, 90% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 1);
+    }
+    100% {
+      translate: 0 calc(-1lh * 2);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-TextRotate--3 .greese-TextRotate-track {
+      animation: greese-textrotate-3 var(--greese-textrotate-duration) infinite;
+    }
+  }
+  @keyframes greese-textrotate-3 {
+    0%, 26.6666666667% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 0);
+    }
+    33.3333333333%, 60% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 1);
+    }
+    66.6666666667%, 93.3333333333% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 2);
+    }
+    100% {
+      translate: 0 calc(-1lh * 3);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-TextRotate--4 .greese-TextRotate-track {
+      animation: greese-textrotate-4 var(--greese-textrotate-duration) infinite;
+    }
+  }
+  @keyframes greese-textrotate-4 {
+    0%, 20% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 0);
+    }
+    25%, 45% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 1);
+    }
+    50%, 70% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 2);
+    }
+    75%, 95% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 3);
+    }
+    100% {
+      translate: 0 calc(-1lh * 4);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-TextRotate--5 .greese-TextRotate-track {
+      animation: greese-textrotate-5 var(--greese-textrotate-duration) infinite;
+    }
+  }
+  @keyframes greese-textrotate-5 {
+    0%, 16% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 0);
+    }
+    20%, 36% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 1);
+    }
+    40%, 56% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 2);
+    }
+    60%, 76% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 3);
+    }
+    80%, 96% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 4);
+    }
+    100% {
+      translate: 0 calc(-1lh * 5);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-TextRotate--6 .greese-TextRotate-track {
+      animation: greese-textrotate-6 var(--greese-textrotate-duration) infinite;
+    }
+  }
+  @keyframes greese-textrotate-6 {
+    0%, 13.3333333333% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 0);
+    }
+    16.6666666667%, 30% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 1);
+    }
+    33.3333333333%, 46.6666666667% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 2);
+    }
+    50%, 63.3333333333% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 3);
+    }
+    66.6666666667%, 80% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 4);
+    }
+    83.3333333333%, 96.6666666667% {
+      animation-timing-function: var(--greese-easing-standard);
+      translate: 0 calc(-1lh * 5);
+    }
+    100% {
+      translate: 0 calc(-1lh * 6);
+    }
+  }
+}

package/dist/css/Textarea.css

@@ -0,0 +1,107 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Textarea {
+    box-sizing: border-box;
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-canvas);
+    border: 1px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-field);
+    transition: border-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  @media (hover: hover) {
+    .greese-Textarea:hover {
+      border-color: var(--greese-color-fg-muted);
+    }
+  }
+  .greese-Textarea:has(:focus-visible) {
+    border-color: var(--greese-color-focus-ring);
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: -1px;
+  }
+  .greese-Textarea[aria-invalid=true], .greese-Textarea[data-invalid] {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-Textarea:disabled, .greese-Textarea[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .greese-Textarea {
+    display: flex;
+    inline-size: 100%;
+  }
+  .greese-Textarea-control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    padding: var(--greese-space-2) var(--greese-textarea-padding);
+    font: inherit;
+    line-height: var(--greese-line-height-normal);
+    color: inherit;
+    resize: vertical;
+    background: none;
+    border: 0;
+    border-radius: inherit;
+    outline: none;
+  }
+  .greese-Textarea-control::placeholder {
+    color: var(--greese-color-fg-muted);
+    opacity: 1;
+  }
+  .greese-Textarea-control:disabled {
+    cursor: not-allowed;
+  }
+  .greese-Textarea--autosize .greese-Textarea-control {
+    min-block-size: calc(var(--greese-textarea-rows) * 1lh + 2 * var(--greese-space-2));
+    max-block-size: calc(var(--greese-textarea-max-rows, 1000) * 1lh + 2 * var(--greese-space-2));
+  }
+  @supports (field-sizing: content) {
+    .greese-Textarea--autosize .greese-Textarea-control {
+      field-sizing: content;
+      resize: none;
+    }
+  }
+  .greese-Textarea--size-xs {
+    --greese-textarea-padding: var(--greese-space-1);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Textarea--size-xs {
+      font-size: max(1rem, var(--greese-type-p3-font-size));
+    }
+  }
+  .greese-Textarea--size-sm {
+    --greese-textarea-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p3-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Textarea--size-sm {
+      font-size: max(1rem, var(--greese-type-p3-font-size));
+    }
+  }
+  .greese-Textarea--size-md {
+    --greese-textarea-padding: var(--greese-space-3);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Textarea--size-md {
+      font-size: max(1rem, var(--greese-type-p2-font-size));
+    }
+  }
+  .greese-Textarea--size-lg {
+    --greese-textarea-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p2-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Textarea--size-lg {
+      font-size: max(1rem, var(--greese-type-p2-font-size));
+    }
+  }
+  .greese-Textarea--size-xl {
+    --greese-textarea-padding: var(--greese-space-4);
+    font-size: var(--greese-type-p1-font-size);
+  }
+  @media (pointer: coarse) {
+    .greese-Textarea--size-xl {
+      font-size: max(1rem, var(--greese-type-p1-font-size));
+    }
+  }
+}

package/dist/css/ThemeProvider.css

@@ -0,0 +1,6 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ThemeProvider {
+    display: contents;
+  }
+}

package/dist/css/Tile.css

@@ -0,0 +1,18 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Tile {
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--greese-tile-padding, var(--greese-space-3) var(--greese-space-4));
+    color: var(--greese-color-fg);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+  }
+  .greese-Tile--filled {
+    background-color: var(--greese-color-surface);
+  }
+  .greese-Tile--dashed {
+    border-style: dashed;
+    border-color: var(--greese-color-border-strong);
+  }
+}

package/dist/css/Toast.css

@@ -0,0 +1,110 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Toaster {
+    inset: auto 0 0;
+    inline-size: 100%;
+    max-inline-size: none;
+    padding: var(--greese-space-3);
+    padding-block-end: max(var(--greese-space-3), env(safe-area-inset-bottom));
+    margin: 0;
+    overflow: visible;
+    pointer-events: none;
+    background: none;
+    border: 0;
+  }
+  @media (width >= 900px) {
+    .greese-Toaster {
+      inset-inline: auto var(--greese-space-4);
+      inline-size: 24rem;
+      padding: var(--greese-space-4);
+    }
+  }
+  .greese-Toaster-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .greese-Toast--neutral {
+    --greese-toast-tone: var(--greese-color-fg);
+    --greese-toast-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Toast--primary {
+    --greese-toast-tone: var(--greese-color-primary);
+    --greese-toast-tone-on: var(--greese-color-primary-content);
+  }
+  .greese-Toast--secondary {
+    --greese-toast-tone: var(--greese-color-secondary);
+    --greese-toast-tone-on: var(--greese-color-secondary-content);
+  }
+  .greese-Toast--tertiary {
+    --greese-toast-tone: var(--greese-color-tertiary);
+    --greese-toast-tone-on: var(--greese-color-tertiary-content);
+  }
+  .greese-Toast--positive {
+    --greese-toast-tone: var(--greese-color-positive);
+    --greese-toast-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Toast--negative {
+    --greese-toast-tone: var(--greese-color-negative);
+    --greese-toast-tone-on: var(--greese-color-negative-content);
+  }
+  .greese-Toast--warning {
+    --greese-toast-tone: var(--greese-color-warning);
+    --greese-toast-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Toast--info {
+    --greese-toast-tone: var(--greese-color-info);
+    --greese-toast-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Toast {
+    color: var(--greese-color-fg);
+    background-color: var(--greese-color-surface-overlay);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+    box-shadow: var(--greese-shadow-lg);
+    --greese-toast-edge: var(--greese-toast-tone);
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    padding: var(--greese-space-3);
+    padding-inline-start: var(--greese-space-4);
+    pointer-events: auto;
+    border-inline-start: 3px solid var(--greese-toast-edge);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Toast {
+      animation-name: var(--greese-motion-toast, greese-toast-in);
+      animation-duration: var(--greese-motion-toast-duration, var(--greese-duration-normal));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-Toast--neutral {
+    --greese-toast-edge: var(--greese-color-border-strong);
+  }
+  .greese-Toast-body {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .greese-Toast-title,
+  .greese-Toast-description {
+    margin: 0;
+    font-size: var(--greese-type-p3-font-size);
+    line-height: var(--greese-line-height-snug);
+  }
+  .greese-Toast-title {
+    font-weight: var(--greese-font-weight-semibold);
+  }
+  .greese-Toast-description {
+    color: var(--greese-color-fg-muted);
+  }
+  @keyframes greese-toast-in {
+    from {
+      opacity: 0;
+      translate: 0 0.75rem;
+    }
+  }
+}

package/dist/css/ToggleButton.css

@@ -0,0 +1,20 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ToggleButton[aria-pressed=true] {
+    --greese-button-fg: var(--greese-button-tone);
+    --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
+    --greese-button-bg-hover: color-mix(
+      in oklab,
+      var(--greese-button-tone) 22%,
+      transparent
+    );
+    --greese-button-border: color-mix(
+      in oklab,
+      var(--greese-button-tone) 55%,
+      transparent
+    );
+  }
+  .greese-ToggleButton.greese-Button--neutral[aria-pressed=true] {
+    --greese-button-tone: var(--greese-color-primary);
+  }
+}

package/dist/css/Tooltip.css

@@ -0,0 +1,94 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Tooltip {
+    inset: auto;
+    max-inline-size: calc(100vw - 2 * var(--greese-space-3));
+    max-block-size: calc(100dvh - 2 * var(--greese-space-3));
+    padding: 0;
+    overflow: auto;
+    position-try-fallbacks: flip-block, flip-inline;
+    --greese-overlay-enter: var(--greese-motion-tooltip, var(--greese-motion-overlay, greese-overlay-in));
+    --greese-overlay-exit-opacity: var(
+      --greese-motion-tooltip-exit-opacity,
+      var(--greese-motion-overlay-exit-opacity, 0)
+    );
+    --greese-overlay-exit-translate: var(
+      --greese-motion-tooltip-exit-translate,
+      var(--greese-motion-overlay-exit-translate, var(--greese-overlay-origin))
+    );
+    --greese-overlay-exit-scale: var(
+      --greese-motion-tooltip-exit-scale,
+      var(--greese-motion-overlay-exit-scale, 1)
+    );
+    --greese-overlay-exit-mask-image: var(
+      --greese-motion-tooltip-exit-mask-image,
+      var(--greese-motion-overlay-exit-mask-image, none)
+    );
+    --greese-overlay-exit-mask-repeat: var(
+      --greese-motion-tooltip-exit-mask-repeat,
+      var(--greese-motion-overlay-exit-mask-repeat, no-repeat)
+    );
+    --greese-overlay-exit-mask-position: var(
+      --greese-motion-tooltip-exit-mask-position,
+      var(--greese-motion-overlay-exit-mask-position, 50% 50%)
+    );
+    --greese-overlay-exit-mask-size: var(
+      --greese-motion-tooltip-exit-mask-size,
+      var(--greese-motion-overlay-exit-mask-size, 100% 100%)
+    );
+    --greese-overlay-exit-mask-from: var(
+      --greese-motion-tooltip-exit-mask-from,
+      var(--greese-motion-overlay-exit-mask-from, 100% 100%)
+    );
+    --greese-overlay-exit-transform: var(
+      --greese-motion-tooltip-exit-transform,
+      var(--greese-motion-overlay-exit-transform, none)
+    );
+    --greese-overlay-exit-transform-origin: var(
+      --greese-motion-tooltip-exit-transform-origin,
+      var(--greese-motion-overlay-exit-transform-origin, 50% 50%)
+    );
+    --greese-overlay-origin: 0 0;
+    transition-property: opacity, translate, scale, transform, mask-size, mask-position, display, overlay;
+    transition-duration: var(--greese-motion-exit-duration, var(--greese-duration-fast));
+    transition-timing-function: var(--greese-motion-exit-ease, var(--greese-easing-exit));
+    transition-behavior: allow-discrete;
+    mask-image: var(--greese-motion-exit-mask-image, var(--greese-overlay-exit-mask-image));
+    mask-repeat: var(--greese-motion-exit-mask-repeat, var(--greese-overlay-exit-mask-repeat));
+    mask-position: var(--greese-motion-exit-mask-position, var(--greese-overlay-exit-mask-position));
+    mask-size: var(--greese-motion-exit-mask-from, var(--greese-overlay-exit-mask-from));
+    transform-origin: var(--greese-motion-exit-transform-origin, var(--greese-overlay-exit-transform-origin));
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Tooltip:popover-open {
+      animation-name: var(--greese-overlay-enter);
+      animation-duration: var(--greese-motion-overlay-duration, var(--greese-duration-fast));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-Tooltip:not(:popover-open) {
+    opacity: var(--greese-motion-exit-opacity, var(--greese-overlay-exit-opacity));
+    translate: var(--greese-motion-exit-translate, var(--greese-overlay-exit-translate));
+    scale: var(--greese-motion-exit-scale, var(--greese-overlay-exit-scale));
+    transform: var(--greese-motion-exit-transform, var(--greese-overlay-exit-transform));
+    mask-size: var(--greese-motion-exit-mask-size, var(--greese-overlay-exit-mask-size));
+  }
+  @keyframes greese-overlay-in {
+    from {
+      opacity: 0;
+      translate: var(--greese-overlay-origin);
+    }
+  }
+  .greese-Tooltip {
+    max-inline-size: min(18rem, 100vw - 2 * var(--greese-space-3));
+    overflow: visible;
+    padding: var(--greese-space-1) var(--greese-space-2);
+    font-size: var(--greese-type-caption-font-size);
+    line-height: var(--greese-line-height-snug);
+    color: var(--greese-color-canvas);
+    background-color: var(--greese-color-fg);
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+}