cetec-design-system 0.0.2 → 0.0.4

package/styled-system/debug/src__App.css

@@ -0,0 +1,830 @@
+@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);
+}
+}
+}