cetec-design-system 0.0.6 → 0.0.8

package/styled-system/styles.css

@@ -669,4 +669,1458 @@
       animation-timing-function: cubic-bezier(0,0,0.2,1);
 }
 }
+}
+
+@layer recipes{
+  @layer _base{
+
+    .text {
+      margin: var(--spacing-0);
+      color: var(--colors-slate-60);
+      line-height: var(--line-heights-default);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-16);
+}
+
+    .dark .text,[data-color-mode=dark] .text {
+      color: var(--colors-slate-30);
+}
+
+    .heading {
+      color: var(--colors-slate-90);
+      font-family: var(--fonts-heading);
+      font-weight: var(--font-weights-black);
+      line-height: var(--line-heights-default);
+}
+
+    .dark .heading,[data-color-mode=dark] .heading {
+      color: var(--colors-slate-5);
+}
+
+    .button {
+      position: relative;
+      appearance: none;
+      -webkit-appearance: none;
+      min-width: var(--sizes-0);
+      -webkit-user-select: none;
+      user-select: none;
+      vertical-align: middle;
+      display: flex;
+      gap: var(--spacing-4);
+      border-radius: var(--radii-4);
+      outline-offset: var(--spacing-1);
+      text-decoration: none;
+      white-space: nowrap;
+      cursor: pointer;
+      --transition-duration: var(--durations-fast);
+      transition-duration: var(--durations-fast);
+      --transition-prop: background, border-color, color, box-shadow;
+      transition-property: background, border-color, color, box-shadow;
+      --transition-easing: var(--easings-default);
+      transition-timing-function: var(--easings-default);
+      align-items: center;
+      font-family: var(--fonts-body);
+      font-size: var(--font-sizes-16);
+      font-weight: var(--font-weights-medium);
+      line-height: var(--line-heights-default);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: var(--colors-transparent);
+}
+
+    .button:is(:disabled, [disabled], [data-disabled]) {
+      opacity: 0.4;
+      cursor: not-allowed;
+}
+
+    .button svg {
+      fill: var(--colors-current);
+}
+
+    .button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-80);
+}
+
+    .dark .button:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] .button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-5);
+}
+
+    .icon-button {
+      position: relative;
+      appearance: none;
+      -webkit-appearance: none;
+      min-width: var(--sizes-0);
+      -webkit-user-select: none;
+      user-select: none;
+      vertical-align: middle;
+      display: flex;
+      gap: var(--spacing-4);
+      border-radius: var(--radii-4);
+      outline-offset: var(--spacing-1);
+      text-decoration: none;
+      white-space: nowrap;
+      cursor: pointer;
+      --transition-duration: var(--durations-fast);
+      transition-duration: var(--durations-fast);
+      --transition-prop: background, border-color, color, box-shadow;
+      transition-property: background, border-color, color, box-shadow;
+      --transition-easing: var(--easings-default);
+      transition-timing-function: var(--easings-default);
+      align-items: center;
+      font-family: var(--fonts-body);
+      font-size: var(--font-sizes-16);
+      font-weight: var(--font-weights-medium);
+      line-height: var(--line-heights-default);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: var(--colors-transparent);
+}
+
+    .icon-button:is(:disabled, [disabled], [data-disabled]) {
+      opacity: 0.4;
+      cursor: not-allowed;
+}
+
+    .icon-button svg {
+      fill: var(--colors-current);
+}
+
+    .icon-button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-80);
+}
+
+    .dark .icon-button:is(:focus-visible, [data-focus-visible]),[data-color-mode=dark] .icon-button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-5);
+}
+
+    .pre {
+      border-radius: var(--radii-8);
+      overflow: hidden;
+      background: var(--colors-slate-80);
+      color: var(--colors-slate-5);
+      padding-inline: var(--spacing-16);
+      padding-block: var(--spacing-8);
+      margin-block: var(--spacing-8);
+      white-space: pre;
+      border-width: 0;
+      border-color: var(--colors-slate-60);
+}
+
+    .link {
+      display: inline-flex;
+      gap: var(--spacing-1);
+      color: var(--colors-blue-50);
+      text-decoration: none;
+      width: fit-content;
+      cursor: pointer;
+      align-items: center;
+      font-weight: var(--font-weights-medium);
+      background-image: linear-gradient(90deg, transparent 0% 100%);
+      background-size: 100% 1px;
+      background-repeat: no-repeat;
+      background-position-y: 100%;
+}
+
+    .dark .link,[data-color-mode=dark] .link {
+      color: var(--colors-blue-40);
+}
+
+    .link:is(:hover, [data-hover]) {
+      color: var(--colors-blue-40);
+      background-image: linear-gradient(90deg, currentColor 0% 100%);
+}
+
+    .dark .link:is(:hover, [data-hover]),[data-color-mode=dark] .link:is(:hover, [data-hover]) {
+      color: var(--colors-blue-30);
+}
+
+    .spinner {
+      aspect-ratio: var(--aspect-ratios-square);
+      border-radius: var(--radii-100);
+      animation: var(--animations-spin);
+      filter: invert(1);
+      mix-blend-mode: difference;
+      isolation: isolate;
+      border-width: 3px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+      border-top-color: var(--colors-slate-90);
+      border-bottom-color: var(--colors-slate-90);
+}
+
+    .divider {
+      --divider-weight: var(--sizes-1);
+      color: var(--colors-slate-20);
+      min-width: var(--sizes-1);
+      min-height: var(--sizes-1);
+      border-style: solid;
+      border-color: var(--colors-current);
+}
+
+    .dark .divider,[data-color-mode=dark] .divider {
+      color: var(--colors-slate-80);
+}
+
+    .input {
+      position: relative;
+      display: inline-grid;
+      vertical-align: top;
+      padding: var(--spacing-0);
+      color: var(--colors-slate-90);
+      border-radius: var(--radii-8);
+      align-items: center;
+      font-family: var(--fonts-body);
+      font-size: var(--font-sizes-16);
+      font-weight: var(--font-weights-normal);
+      line-height: normal;
+      grid-template-columns: auto 1fr;
+}
+
+    .input input {
+      width: auto;
+      min-width: var(--sizes-16);
+      max-width: var(--sizes-full);
+      font: inherit;
+      padding-block: var(--spacing-4);
+      padding-inline: var(--spacing-8);
+      margin: var(--spacing-0);
+      resize: none;
+      appearance: none;
+      -webkit-appearance: none;
+      border-radius: var(--radii-4);
+      background: var(--colors-slate-0);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+}
+
+    .textarea {
+      position: relative;
+      display: inline-grid;
+      vertical-align: top;
+      padding: var(--spacing-0);
+      color: var(--colors-slate-90);
+      border-radius: var(--radii-8);
+      width: var(--sizes-full);
+      align-items: center;
+      font-family: var(--fonts-body);
+      font-size: var(--font-sizes-16);
+      font-weight: var(--font-weights-normal);
+      line-height: normal;
+      grid-template-columns: auto 1fr;
+}
+
+    .textarea::after,.textarea textarea {
+      width: auto;
+      min-width: var(--sizes-16);
+      max-width: var(--sizes-full);
+      font: inherit;
+      padding-block: var(--spacing-4);
+      padding-inline: var(--spacing-8);
+      margin: var(--spacing-0);
+      resize: none;
+      appearance: none;
+      -webkit-appearance: none;
+      border-radius: var(--radii-4);
+      background: var(--colors-slate-0);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+}
+
+    .textarea::after:is(:hover, [data-hover]),.textarea textarea:is(:hover, [data-hover]) {
+      border-color: var(--colors-slate-20);
+}
+
+    .textarea::after:is(:focus, [data-focus]),.textarea textarea:is(:focus, [data-focus]) {
+      border-color: var(--colors-slate-90);
+}
+
+    .textarea::after {
+      outline: 1px solid olive;
+      white-space: pre-wrap;
+      transform: translate(4px, 4px);
+      opacity: 0.3;
+      content: attr(data-value) " ";
+}
+
+    .label {
+      cursor: default;
+      font-weight: var(--font-weights-normal);
+      line-height: normal;
+}
+
+    .label,.code {
+      font-size: var(--font-sizes-14);
+}
+
+    .code {
+      background: var(--colors-slate-80);
+      position: relative;
+      overflow: auto;
+      padding: var(--spacing-4);
+      white-space: pre;
+}
+
+    @media (prefers-color-scheme: dark) {
+      .input {
+        color: var(--colors-slate-5);
+}
+
+      .input input {
+        background: var(--colors-slate-90);
+}
+      .textarea {
+        color: var(--colors-slate-5);
+}
+
+      .textarea::after,.textarea textarea {
+        background: var(--colors-slate-90);
+}
+}
+
+    @media (prefers-color-scheme: dark) {
+
+      .textarea::after:is(:focus, [data-focus]),.textarea textarea:is(:focus, [data-focus]) {
+        border-color: var(--colors-slate-5);
+}
+
+      .textarea::after:is(:hover, [data-hover]),.textarea textarea:is(:hover, [data-hover]) {
+        border-color: var(--colors-slate-30);
+}
+}
+}
+
+  .text--textStyle_mono-sm {
+    font-family: var(--fonts-mono);
+    font-size: var(--font-sizes-14);
+}
+
+  .text--textStyle_body-md {
+    font-size: var(--font-sizes-16);
+}
+
+  .text--textStyle_body-md,.text--family_body {
+    font-family: var(--fonts-body);
+}
+
+  .text--size_16 {
+    font-size: 1rem;
+}
+
+  .text--italic_true {
+    font-variation-settings: "CRSV" 0, "CASL" 0, "slnt" -15;
+    font-style: italic;
+}
+
+  .text--bold_true {
+    font-weight: var(--font-weights-bold);
+}
+
+  .text--underline_true {
+    text-decoration: underline;
+}
+
+  .text--family_mono {
+    font-variation-settings: "CRSV" 0, "CASL" 0, "MONO" 1;
+    font-family: var(--fonts-mono);
+}
+
+  .heading--level_h2 {
+    color: var(--colors-slate-90);
+    font-family: var(--fonts-heading);
+    font-weight: var(--font-weights-black);
+    font-size: var(--font-sizes-32);
+}
+
+  .dark .heading--level_h2,[data-color-mode=dark] .heading--level_h2 {
+    color: var(--colors-slate-5);
+}
+
+  .heading--level_h3 {
+    color: var(--colors-slate-90);
+    font-family: var(--fonts-heading);
+    font-weight: var(--font-weights-black);
+    font-size: var(--font-sizes-24);
+}
+
+  .dark .heading--level_h3,[data-color-mode=dark] .heading--level_h3 {
+    color: var(--colors-slate-5);
+}
+
+  .heading--level_h1 {
+    color: var(--colors-slate-90);
+    font-family: var(--fonts-heading);
+    font-weight: var(--font-weights-black);
+    font-size: var(--font-sizes-40);
+}
+
+  .dark .heading--level_h1,[data-color-mode=dark] .heading--level_h1 {
+    color: var(--colors-slate-5);
+}
+
+  .heading--level_h4 {
+    color: var(--colors-slate-90);
+    font-family: var(--fonts-heading);
+    font-weight: var(--font-weights-black);
+    font-size: var(--font-sizes-20);
+}
+
+  .dark .heading--level_h4,[data-color-mode=dark] .heading--level_h4 {
+    color: var(--colors-slate-5);
+}
+
+  .button--variant_primary {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .dark .button--variant_primary,[data-color-mode=dark] .button--variant_primary {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .button--variant_primary:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .dark .button--variant_primary:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_primary:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  .dark .button--variant_primary:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  .button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-100);
+}
+
+  .dark .button--variant_primary:is(:active, [data-active]),[data-color-mode=dark] .button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+}
+
+  .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-90);
+}
+
+  .dark .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  .button--size_medium {
+    padding-block: var(--spacing-3);
+    padding-inline: var(--spacing-10);
+    font-size: var(--font-sizes-16);
+}
+
+  .button--variant_standard {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .dark .button--variant_standard,[data-color-mode=dark] .button--variant_standard {
+    background: var(--colors-slate-70);
+    color: var(--colors-slate-0);
+}
+
+  .button--variant_standard:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .dark .button--variant_standard:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_standard:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .button--variant_standard:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  .dark .button--variant_standard:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_standard:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+}
+
+  .button--variant_standard:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+}
+
+  .dark .button--variant_standard:is(:active, [data-active]),[data-color-mode=dark] .button--variant_standard:is(:active, [data-active]) {
+    background: var(--colors-slate-80);
+}
+
+  .button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  .dark .button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  .button--variant_hollow {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-90);
+    border-color: var(--colors-slate-30);
+}
+
+  .dark .button--variant_hollow,[data-color-mode=dark] .button--variant_hollow {
+    color: var(--colors-slate-0);
+    border-color: var(--colors-slate-60);
+}
+
+  .button--variant_hollow:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+    border-color: var(--colors-transparent);
+}
+
+  .dark .button--variant_hollow:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_hollow:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+    border-color: var(--colors-slate-10);
+}
+
+  .dark .button--variant_hollow:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+    border-color: var(--colors-slate-60);
+}
+
+  .button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+    border-color: var(--colors-slate-20);
+}
+
+  .dark .button--variant_hollow:is(:active, [data-active]),[data-color-mode=dark] .button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-80);
+    border-color: var(--colors-slate-80);
+}
+
+  .button--variant_hollow:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+
+  .button--variant_ghost {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-90);
+}
+
+  .dark .button--variant_ghost,[data-color-mode=dark] .button--variant_ghost {
+    color: var(--colors-slate-0);
+}
+
+  .button--variant_ghost:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .dark .button--variant_ghost:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .button--variant_ghost:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .button--variant_ghost:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  .dark .button--variant_ghost:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_ghost:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+}
+
+  .button--variant_ghost:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+}
+
+  .dark .button--variant_ghost:is(:active, [data-active]),[data-color-mode=dark] .button--variant_ghost:is(:active, [data-active]) {
+    background: var(--colors-slate-70);
+}
+
+  .button--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+
+  .button--variant_cta {
+    background: var(--colors-gold-20);
+    color: var(--colors-slate-90);
+}
+
+  .dark .button--variant_cta,[data-color-mode=dark] .button--variant_cta {
+    background: var(--colors-gold-30);
+}
+
+  .button--variant_cta:is(:hover, [data-hover]) {
+    background: var(--colors-gold-10);
+}
+
+  .dark .button--variant_cta:is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_cta:is(:hover, [data-hover]) {
+    background: var(--colors-gold-20);
+}
+
+  .button--variant_cta:is(:active, [data-active]) {
+    background: var(--colors-gold-30);
+}
+
+  .dark .button--variant_cta:is(:active, [data-active]),[data-color-mode=dark] .button--variant_cta:is(:active, [data-active]) {
+    background: var(--colors-gold-40);
+}
+
+  .button--variant_cta:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-gold-20);
+}
+
+  .dark .button--variant_cta:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .button--variant_cta:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-gold-30);
+}
+
+  .button--variant_danger {
+    background: var(--colors-red-50);
+    color: var(--colors-slate-0);
+}
+
+  .button--variant_danger:is(:hover, [data-hover]) {
+    background: var(--colors-red-40);
+}
+
+  .button--variant_danger:is(:active, [data-active]) {
+    background: var(--colors-red-60);
+}
+
+  .button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-red-50);
+}
+
+  .button--size_large {
+    padding-block: var(--spacing-7);
+    padding-inline: var(--spacing-12);
+    font-size: var(--font-sizes-16);
+}
+
+  .button--size_small {
+    padding-block: var(--spacing-0);
+    padding-inline: var(--spacing-8);
+    font-size: var(--font-sizes-14);
+}
+
+  .button--size_small svg {
+    margin-top: calc(var(--spacing-1) * -1);
+    margin-bottom: calc(var(--spacing-1) * -1);
+}
+
+  .icon-button--variant_ghost {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-90);
+}
+
+  .dark .icon-button--variant_ghost,[data-color-mode=dark] .icon-button--variant_ghost {
+    color: var(--colors-slate-0);
+}
+
+  .icon-button--variant_ghost:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .dark .icon-button--variant_ghost:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_ghost:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_ghost:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  .dark .icon-button--variant_ghost:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_ghost:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+}
+
+  .icon-button--variant_ghost:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+}
+
+  .dark .icon-button--variant_ghost:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_ghost:is(:active, [data-active]) {
+    background: var(--colors-slate-70);
+}
+
+  .icon-button--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+
+  .icon-button--size_medium {
+    padding: var(--spacing-3);
+    font-size: var(--font-sizes-16);
+}
+
+  .icon-button--variant_standard {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .dark .icon-button--variant_standard,[data-color-mode=dark] .icon-button--variant_standard {
+    background: var(--colors-slate-70);
+    color: var(--colors-slate-0);
+}
+
+  .icon-button--variant_standard:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .dark .icon-button--variant_standard:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_standard:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_standard:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  .dark .icon-button--variant_standard:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_standard:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+}
+
+  .icon-button--variant_standard:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+}
+
+  .dark .icon-button--variant_standard:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_standard:is(:active, [data-active]) {
+    background: var(--colors-slate-80);
+}
+
+  .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  .dark .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  .icon-button--variant_primary {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .dark .icon-button--variant_primary,[data-color-mode=dark] .icon-button--variant_primary {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_primary:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .dark .icon-button--variant_primary:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_primary:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+}
+
+  .icon-button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  .dark .icon-button--variant_primary:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  .icon-button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-100);
+}
+
+  .dark .icon-button--variant_primary:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+}
+
+  .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-90);
+}
+
+  .dark .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  .icon-button--size_large {
+    padding: var(--spacing-7);
+    font-size: var(--font-sizes-16);
+}
+
+  .icon-button--variant_danger {
+    background: var(--colors-red-50);
+    color: var(--colors-slate-0);
+}
+
+  .icon-button--variant_danger:is(:hover, [data-hover]) {
+    background: var(--colors-red-40);
+}
+
+  .icon-button--variant_danger:is(:active, [data-active]) {
+    background: var(--colors-red-60);
+}
+
+  .icon-button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-red-50);
+}
+
+  .icon-button--variant_hollow {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-90);
+    border-color: var(--colors-slate-30);
+}
+
+  .dark .icon-button--variant_hollow,[data-color-mode=dark] .icon-button--variant_hollow {
+    color: var(--colors-slate-0);
+    border-color: var(--colors-slate-60);
+}
+
+  .icon-button--variant_hollow:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-0);
+    border-color: var(--colors-transparent);
+}
+
+  .dark .icon-button--variant_hollow:is([aria-selected=true], [data-selected]),[data-color-mode=dark] .icon-button--variant_hollow:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+    border-color: var(--colors-slate-10);
+}
+
+  .dark .icon-button--variant_hollow:is(:hover, [data-hover]),[data-color-mode=dark] .icon-button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+    border-color: var(--colors-slate-60);
+}
+
+  .icon-button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+    border-color: var(--colors-slate-20);
+}
+
+  .dark .icon-button--variant_hollow:is(:active, [data-active]),[data-color-mode=dark] .icon-button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-80);
+    border-color: var(--colors-slate-80);
+}
+
+  .icon-button--variant_hollow:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+
+  .link--family_body {
+    font-family: var(--fonts-body);
+}
+
+  .spinner--size_small {
+    height: var(--sizes-16);
+    min-height: var(--sizes-16);
+}
+
+  .spinner--size_medium {
+    height: var(--sizes-24);
+    min-height: var(--sizes-24);
+}
+
+  .spinner--size_large {
+    height: var(--sizes-32);
+    min-height: var(--sizes-32);
+}
+
+  .divider--direction_horizontal {
+    width: var(--sizes-full);
+    border-top-width: var(--divider-weight);
+}
+
+  .divider--weight_thin {
+    --divider-weight: var(--sizes-1);
+}
+
+  .divider--weight_medium {
+    --divider-weight: var(--sizes-2);
+}
+
+  .divider--weight_thick {
+    --divider-weight: var(--sizes-4);
+}
+
+  .divider--weight_thicker {
+    --divider-weight: var(--sizes-6);
+}
+
+  .divider--direction_vertical {
+    height: var(--sizes-full);
+    border-left-width: var(--divider-weight);
+}
+
+  .input--variant_stacked {
+    grid-template-rows: auto 1fr;
+    align-items: stretch;
+}
+
+  .input--variant_stacked input {
+    grid-area: 2 / 1;
+    background: var(--colors-slate-0);
+    border-color: var(--colors-slate-40);
+}
+
+  .textarea--variant_autoGrow {
+    width: fit-content;
+}
+
+  .label--family_body {
+    font-family: var(--fonts-body);
+}
+
+  @media (prefers-color-scheme: dark) {
+    .input--variant_stacked input {
+      background: var(--colors-slate-90);
+      border-color: var(--colors-slate-50);
+}
+}
+}
+
+@layer recipes.slots{
+  @layer _base{
+
+    .checkbox__container {
+      position: relative;
+      display: inline-grid;
+      gap: var(--spacing-4);
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      grid-template-columns: auto 1fr;
+      align-items: start;
+}
+
+    .checkbox__input {
+      position: absolute;
+      opacity: 0;
+      width: var(--sizes-full);
+      height: var(--sizes-full);
+      margin: var(--spacing-0);
+      padding: var(--spacing-0);
+      z-index: 1;
+      cursor: inherit;
+}
+
+    .checkbox__input ~ [name='checkbox'] {
+      display: inline-grid;
+}
+
+    .checkbox__input:is(:disabled, [disabled], [data-disabled]) {
+      display: inline-grid;
+}
+
+    .checkbox__input:is(:disabled, [disabled], [data-disabled]) ~ svg {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: none;
+}
+
+    .checkbox__input:is([data-error], [error]) {
+      display: inline-grid;
+}
+
+    .checkbox__input:is([data-error], [error]) ~ svg {
+      fill: var(--colors-red-50);
+}
+
+    .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'] {
+      display: inline-grid;
+      fill: var(--colors-slate-90);
+}
+
+    .dark .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'],[data-color-mode=dark] .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'] {
+      fill: var(--colors-slate-0);
+}
+
+    .checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox'] {
+      display: none;
+}
+
+    .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox-indeterminate'] {
+      display: inline-grid;
+      fill: var(--colors-slate-90);
+}
+
+    .dark .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox-indeterminate'],[data-color-mode=dark] .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox-indeterminate'] {
+      fill: var(--colors-slate-0);
+}
+
+    .checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]) ~ [name='checkbox'] {
+      display: none;
+}
+
+    .checkbox__input:is(:focus-visible, [data-focus-visible]) ~ svg {
+      outline-offset: calc(var(--spacing-3) * -1);
+      border-radius: 5px;
+      outline-color: var(--colors-slate-80);
+      outline-width: 1px;
+      outline-style: solid;
+}
+
+    .dark .checkbox__input:is(:focus-visible, [data-focus-visible]) ~ svg,[data-color-mode=dark] .checkbox__input:is(:focus-visible, [data-focus-visible]) ~ svg {
+      outline-color: var(--colors-slate-5);
+}
+
+    .checkbox__indicator {
+      place-content: center;
+      display: none;
+      width: var(--sizes-24);
+      height: var(--sizes-24);
+}
+
+    .checkbox__indicator:is([name='checkbox']) {
+      display: inline-grid;
+      fill: var(--colors-slate-20);
+}
+
+    .radio__container {
+      position: relative;
+      display: inline-grid;
+      gap: var(--spacing-4);
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      grid-template-columns: auto 1fr;
+      align-items: start;
+}
+
+    .radio__input {
+      position: absolute;
+      opacity: 0;
+      width: var(--sizes-full);
+      height: var(--sizes-full);
+      margin: var(--spacing-0);
+      padding: var(--spacing-0);
+      z-index: 1;
+      cursor: inherit;
+}
+
+    .radio__input ~ [name='radio'] {
+      display: inline-grid;
+}
+
+    .radio__input:is(:disabled, [disabled], [data-disabled]) {
+      display: inline-grid;
+}
+
+    .radio__input:is(:disabled, [disabled], [data-disabled]) ~ svg {
+      opacity: 0.4;
+      pointer-events: none;
+      cursor: none;
+}
+
+    .radio__input:is([data-error], [error]) {
+      display: inline-grid;
+}
+
+    .radio__input:is([data-error], [error]) ~ svg {
+      fill: var(--colors-red-50);
+}
+
+    .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'] {
+      display: inline-grid;
+      fill: var(--colors-slate-90);
+}
+
+    .dark .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'],[data-color-mode=dark] .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio-checked'] {
+      fill: var(--colors-slate-0);
+}
+
+    .radio__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='radio'] {
+      display: none;
+}
+
+    .radio__input:is(:focus-visible, [data-focus-visible]) ~ [name='radio-focus'] {
+      display: inline-grid;
+      position: absolute;
+      fill: var(--colors-slate-90);
+}
+
+    .dark .radio__input:is(:focus-visible, [data-focus-visible]) ~ [name='radio-focus'],[data-color-mode=dark] .radio__input:is(:focus-visible, [data-focus-visible]) ~ [name='radio-focus'] {
+      fill: var(--colors-slate-1);
+}
+
+    .radio__indicator {
+      place-content: center;
+      display: none;
+      width: var(--sizes-24);
+      height: var(--sizes-24);
+}
+
+    .radio__indicator:is([name='radio']) {
+      display: inline-grid;
+      fill: var(--colors-slate-20);
+}
+}
+}
+
+@layer utilities{
+
+  .d_grid {
+    display: grid;
+}
+
+  .gap_16 {
+    gap: var(--spacing-16);
+}
+
+  .w_full {
+    width: var(--sizes-full);
+}
+
+  .gap_40 {
+    gap: var(--spacing-40);
+}
+
+  .py_24 {
+    padding-block: var(--spacing-24);
+}
+
+  .gap_10px {
+    gap: 10px;
+}
+
+  .place-content_center {
+    place-content: center;
+}
+
+  .asp_landscape {
+    aspect-ratio: var(--aspect-ratios-landscape);
+}
+
+  .bdr_4 {
+    border-radius: var(--radii-4);
+}
+
+  .bg_slate\.0 {
+    background: var(--colors-slate-0);
+}
+
+  .gap_24 {
+    gap: var(--spacing-24);
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .c_gold\.40 {
+    color: var(--colors-gold-40);
+}
+
+  .h_96 {
+    height: var(--sizes-96);
+}
+
+  .gap_10 {
+    gap: var(--spacing-10);
+}
+
+  .ls_widest {
+    letter-spacing: var(--letter-spacings-widest);
+}
+
+  .tt_uppercase {
+    text-transform: uppercase;
+}
+
+  .gap_8 {
+    gap: var(--spacing-8);
+}
+
+  .py_4 {
+    padding-block: var(--spacing-4);
+}
+
+  .bg_slate\.10 {
+    background: var(--colors-slate-10);
+}
+
+  .pos_sticky {
+    position: sticky;
+}
+
+  .z_100 {
+    z-index: 100;
+}
+
+  .bx-sh_medium {
+    box-shadow: var(--shadows-medium);
+}
+
+  .pos_relative {
+    position: relative;
+}
+
+  .w_100\% {
+    width: 100%;
+}
+
+  .max-w_5xl {
+    max-width: var(--sizes-5xl);
+}
+
+  .mx_auto {
+    margin-inline: auto;
+}
+
+  .px_24 {
+    padding-inline: var(--spacing-24);
+}
+
+  .grid-c_1_\/_-1 {
+    grid-column: 1 / -1;
+}
+
+  .bx-sh_inset {
+    box-shadow: var(--shadows-inset);
+}
+
+  .bx-sh_low {
+    box-shadow: var(--shadows-low);
+}
+
+  .bx-sh_high {
+    box-shadow: var(--shadows-high);
+}
+
+  .bd_true {
+    border: true;
+}
+
+  .op_0 {
+    opacity: 0;
+}
+
+  .op_1 {
+    opacity: 1;
+}
+
+  .gap_4 {
+    gap: var(--spacing-4);
+}
+
+  .pos_absolute {
+    position: absolute;
+}
+
+  .place-items_center {
+    place-items: center;
+}
+
+  .c_slate\.0 {
+    color: var(--colors-slate-0);
+}
+
+  .bg_transparent {
+    background: var(--colors-transparent);
+}
+
+  .d_none {
+    display: none;
+}
+
+  .c_gray\.dark\.12 {
+    color: gray.dark.12;
+}
+
+  .w_24 {
+    width: var(--sizes-24);
+}
+
+  .h_24 {
+    height: var(--sizes-24);
+}
+
+  .fill_current {
+    fill: var(--colors-current);
+}
+
+  .w_20 {
+    width: var(--sizes-20);
+}
+
+  .h_20 {
+    height: var(--sizes-20);
+}
+
+  .font_mono {
+    font: mono;
+}
+
+  .c_slate\.90 {
+    color: var(--colors-slate-90);
+}
+
+  .c_gold\.50 {
+    color: var(--colors-gold-50);
+}
+
+  .c_blue\.50 {
+    color: var(--colors-blue-50);
+}
+
+  .ta_center {
+    text-align: center;
+}
+
+  .w_auto {
+    width: auto;
+}
+
+  .gap_0 {
+    gap: var(--spacing-0);
+}
+
+  .grid-tc_repeat\(auto-fill\,_minmax\(200px\,_1fr\)\) {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+  .grid-tc_1fr_3fr {
+    grid-template-columns: 1fr 3fr;
+}
+
+  .bd-t-w_1 {
+    border-top-width: 1px;
+}
+
+  .border-top-style_solid {
+    border-top-style: solid;
+}
+
+  .bd-c_slate\.10 {
+    border-color: var(--colors-slate-10);
+}
+
+  .pb_96 {
+    padding-bottom: var(--spacing-96);
+}
+
+  .bd-w_1 {
+    border-width: 1px;
+}
+
+  .border-style_solid {
+    border-style: solid;
+}
+
+  .grid-tc_minmax\(auto\,_1fr\)_1fr {
+    grid-template-columns: minmax(auto, 1fr) 1fr;
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .flex-d_row {
+    flex-direction: row;
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .ai_flex-end {
+    align-items: flex-end;
+}
+
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
+}
+
+  .ai_flex-start {
+    align-items: flex-start;
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .ai_start {
+    align-items: start;
+}
+
+  .mb_56 {
+    margin-bottom: var(--spacing-56);
+}
+
+  .top_0 {
+    top: var(--spacing-0);
+}
+
+  .mt_32 {
+    margin-top: var(--spacing-32);
+}
+
+  .left_0 {
+    left: var(--spacing-0);
+}
+
+  .right_0 {
+    right: var(--spacing-0);
+}
+
+  .bottom_0 {
+    bottom: var(--spacing-0);
+}
+
+  .grid-tc_repeat\(6\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+  .dark .dark\:bg_slate\.80,[data-color-mode=dark] .dark\:bg_slate\.80 {
+    background: var(--colors-slate-80);
+}
+
+  .dark .dark\:c_gold\.30,[data-color-mode=dark] .dark\:c_gold\.30 {
+    color: var(--colors-gold-30);
+}
+
+  .dark .dark\:bd-c_slate\.80,[data-color-mode=dark] .dark\:bd-c_slate\.80 {
+    border-color: var(--colors-slate-80);
+}
+
+  .dark .dark\:bd-c_slate\.90,[data-color-mode=dark] .dark\:bd-c_slate\.90 {
+    border-color: var(--colors-slate-90);
+}
+
+  .hover\:bg_gray\.dark\.a3:is(:hover, [data-hover]) {
+    background: gray.dark.a3;
+}
+
+  @media screen and (min-width: 40rem) {
+    .sm\:px_16 {
+      padding-inline: var(--spacing-16);
+}
+}
+
+  @media screen and (min-width: 48rem) {
+    .md\:px_20 {
+      padding-inline: var(--spacing-20);
+}
+}
+
+  @media screen and (min-width: 64rem) {
+    .lg\:d_inline-flex {
+      display: inline-flex;
+}
+}
 }