cetec-design-system 0.0.20 → 0.0.21

package/styled-system/debug/src__App.css

@@ -1,830 +0,0 @@
-@layer recipes {
-  @layer _base {
-    .text {
-      margin: var(--spacing-0);
-      color: var(--colors-slate-70);
-      line-height: var(--line-heights-default);
-      font-weight: var(--font-weights-normal);
-}
-
-    [data-color-mode=dark] .text {
-      color: var(--colors-slate-20);
-}
-
-    .heading {
-      color: var(--colors-slate-90);
-      font-family: var(--fonts-heading);
-      font-weight: var(--font-weights-black);
-}
-
-    [data-color-mode=dark] .heading {
-      color: var(--colors-slate-5);
-}
-
-    .button {
-      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-sans);
-      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);
-      width: var(--sizes-24);
-      height: var(--sizes-24);
-}
-
-    .button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-80);
-}
-
-    [data-color-mode=dark] .button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-5);
-}
-
-    .icon-button {
-      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-sans);
-      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);
-      width: var(--sizes-24);
-      height: var(--sizes-24);
-}
-
-    .icon-button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-80);
-}
-
-    [data-color-mode=dark] .icon-button:is(:focus-visible, [data-focus-visible]) {
-      outline-color: var(--colors-slate-5);
-}
-
-    .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%;
-}
-
-    [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%);
-}
-
-    [data-color-mode=dark] .link:is(:hover, [data-hover]) {
-      color: var(--colors-blue-30);
-}
-}
-
-  .text--level_14 {
-    font-size: var(--font-sizes-14);
-}
-
-  .text--font_mono {
-    font-family: var(--fonts-mono);
-}
-
-  .text--level_20 {
-    font-size: var(--font-sizes-20);
-}
-
-  .text--level_16 {
-    font-size: var(--font-sizes-16);
-}
-
-  .text--font_sans {
-    font-family: var(--fonts-sans);
-}
-
-  .text--italic_true {
-    font-style: italic;
-}
-
-  .text--bold_true {
-    font-weight: var(--font-weights-bold);
-}
-
-  .text--underline_true {
-    text-decoration: underline;
-}
-
-  .heading--as_h2 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    line-height: var(--line-heights-default);
-    font-size: var(--font-sizes-32);
-}
-
-  [data-color-mode=dark] .heading--as_h2 {
-    color: var(--colors-slate-5);
-}
-
-  .heading--as_h4 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    line-height: var(--line-heights-default);
-    font-size: var(--font-sizes-20);
-}
-
-  [data-color-mode=dark] .heading--as_h4 {
-    color: var(--colors-slate-5);
-}
-
-  .heading--as_h1 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    line-height: var(--line-heights-default);
-    font-size: var(--font-sizes-40);
-}
-
-  [data-color-mode=dark] .heading--as_h1 {
-    color: var(--colors-slate-5);
-}
-
-  .heading--as_h3 {
-    color: var(--colors-slate-90);
-    font-family: var(--fonts-heading);
-    font-weight: var(--font-weights-black);
-    line-height: var(--line-heights-default);
-    font-size: var(--font-sizes-24);
-}
-
-  [data-color-mode=dark] .heading--as_h3,.button--variant_primary {
-    color: var(--colors-slate-5);
-}
-
-  .button--variant_primary {
-    background: var(--colors-slate-90);
-}
-
-  [data-color-mode=dark] .button--variant_primary {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_primary:is([data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .button--variant_primary:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-}
-
-  .button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-70);
-}
-
-  [data-color-mode=dark] .button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-20);
-}
-
-  .button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-100);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-30);
-}
-
-  .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-90);
-}
-
-  [data-color-mode=dark] .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-5);
-}
-
-  .button--size_standard {
-    padding-block: var(--spacing-3);
-    padding-inline: var(--spacing-12);
-    font-size: var(--font-sizes-16);
-}
-
-  .button--variant_standard {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-80);
-}
-
-  [data-color-mode=dark] .button--variant_standard {
-    background: var(--colors-slate-70);
-    color: var(--colors-slate-5);
-}
-
-  .button--variant_standard:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .button--variant_standard:is([data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_standard:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  [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);
-    border-color: var(--colors-transparent);
-}
-
-  [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);
-}
-
-  [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-80);
-    border-color: var(--colors-slate-30);
-}
-
-  [data-color-mode=dark] .button--variant_hollow {
-    color: var(--colors-slate-5);
-    border-color: var(--colors-slate-60);
-}
-
-  .button--variant_hollow:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .button--variant_hollow:is([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);
-}
-
-  [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);
-}
-
-  [data-color-mode=dark] .button--variant_hollow:is(:active, [data-active]) {
-    background: var(--colors-slate-70);
-    border-color: var(--colors-slate-70);
-}
-
-  .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);
-}
-
-  [data-color-mode=dark] .button--variant_ghost {
-    color: var(--colors-slate-5);
-}
-
-  .button--variant_ghost:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .button--variant_ghost:is([data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_ghost:is(:hover, [data-hover]) {
-    background: var(--colors-slate-10);
-}
-
-  [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);
-    border-color: var(--colors-transparent);
-}
-
-  [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);
-}
-
-  [data-color-mode=dark] .button--variant_cta {
-    background: var(--colors-gold-30);
-    color: var(--colors-slate-90);
-}
-
-  .button--variant_cta:is(:hover, [data-hover]) {
-    background: var(--colors-gold-10);
-}
-
-  [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);
-    border-color: var(--colors-transparent);
-}
-
-  [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);
-}
-
-  [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);
-}
-
-  [data-color-mode=dark] .button--variant_danger {
-    background: var(--colors-red-40);
-    color: var(--colors-slate-0);
-}
-
-  .button--variant_danger:is(:hover, [data-hover]) {
-    background: var(--colors-red-40);
-}
-
-  [data-color-mode=dark] .button--variant_danger:is(:hover, [data-hover]) {
-    background: var(--colors-red-30);
-}
-
-  .button--variant_danger:is(:active, [data-active]) {
-    background: var(--colors-red-60);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .button--variant_danger:is(:active, [data-active]) {
-    background: var(--colors-red-50);
-}
-
-  .button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-red-50);
-}
-
-  [data-color-mode=dark] .button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-red-40);
-}
-
-  .icon-button--variant_ghost {
-    background: var(--colors-transparent);
-    color: var(--colors-slate-90);
-}
-
-  [data-color-mode=dark] .icon-button--variant_ghost {
-    color: var(--colors-slate-5);
-}
-
-  .icon-button--variant_ghost:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .icon-button--variant_ghost:is([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);
-}
-
-  [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);
-    border-color: var(--colors-transparent);
-}
-
-  [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_standard {
-    padding: var(--spacing-3);
-    font-size: var(--font-sizes-16);
-}
-
-  .icon-button--variant_standard {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-80);
-}
-
-  [data-color-mode=dark] .icon-button--variant_standard {
-    background: var(--colors-slate-70);
-    color: var(--colors-slate-5);
-}
-
-  .icon-button--variant_standard:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .icon-button--variant_standard:is([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);
-}
-
-  [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);
-    border-color: var(--colors-transparent);
-}
-
-  [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);
-}
-
-  [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-5);
-}
-
-  [data-color-mode=dark] .icon-button--variant_primary {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-}
-
-  .icon-button--variant_primary:is([data-selected]) {
-    background: var(--colors-slate-5);
-    color: var(--colors-slate-90);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .icon-button--variant_primary:is([data-selected]) {
-    background: var(--colors-slate-90);
-    color: var(--colors-slate-5);
-}
-
-  .icon-button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-70);
-}
-
-  [data-color-mode=dark] .icon-button--variant_primary:is(:hover, [data-hover]) {
-    background: var(--colors-slate-20);
-}
-
-  .icon-button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-100);
-    border-color: var(--colors-transparent);
-}
-
-  [data-color-mode=dark] .icon-button--variant_primary:is(:active, [data-active]) {
-    background: var(--colors-slate-30);
-}
-
-  .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    background: var(--colors-slate-90);
-}
-
-  [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);
-}
-
-  .icon-button--size_large,.link--level_16 {
-    font-size: var(--font-sizes-16);
-}
-
-  .link--font_sans {
-    font-family: var(--fonts-sans);
-}
-}
-
-@layer utilities {
-  .d_grid {
-    display: grid;
-}
-
-  .gap_16 {
-    gap: var(--spacing-16);
-}
-
-  .w_full {
-    width: var(--sizes-full);
-}
-
-  .gap_40 {
-    gap: var(--spacing-40);
-}
-
-  .bd-t_1px_solid_pink {
-    border-top: 1px solid pink;
-}
-
-  .py_24 {
-    padding-block: var(--spacing-24);
-}
-
-  .gap_24 {
-    gap: var(--spacing-24);
-}
-
-  .d_flex {
-    display: flex;
-}
-
-  .gap_10px {
-    gap: 10px;
-}
-
-  .c_gold\.40 {
-    color: var(--colors-gold-40);
-}
-
-  .tt_uppercase {
-    text-transform: uppercase;
-}
-
-  .ls_0\.15em {
-    letter-spacing: 0.15em;
-}
-
-  .c_slate\.90 {
-    color: var(--colors-slate-90);
-}
-
-  .grid-c_1_\/_-1 {
-    grid-column: 1 / -1;
-}
-
-  .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-tc_repeat\(auto-fill\,_minmax\(200px\,_1fr\)\) {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-  .grid-tc_10rem_1fr {
-    grid-template-columns: 10rem 1fr;
-}
-
-  .bd-c_slate\.10 {
-    border-color: var(--colors-slate-10);
-}
-
-  .pb_96 {
-    padding-bottom: var(--spacing-96);
-}
-
-  .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);
-}
-
-  .flex-d_column {
-    flex-direction: column;
-}
-
-  .ai_flex-start {
-    align-items: flex-start;
-}
-
-  .mb_56 {
-    margin-bottom: var(--spacing-56);
-}
-
-  .top_0 {
-    top: var(--spacing-0);
-}
-
-  .mt_32 {
-    margin-top: var(--spacing-32);
-}
-
-  [data-color-mode=dark] .dark\:c_gold\.30 {
-    color: var(--colors-gold-30);
-}
-
-  [data-color-mode=dark] .dark\:c_slate\.10 {
-    color: var(--colors-slate-10);
-}
-
-  [data-color-mode=dark] .dark\:bg_slate\.80 {
-    background: var(--colors-slate-80);
-}
-
-  [data-color-mode=dark] .dark\:bd-c_slate\.80 {
-    border-color: var(--colors-slate-80);
-}
-
-  @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);
-}
-}
-}