sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/Button/index.svelte

@@ -0,0 +1,721 @@
+<script>
+  import LoadingWheel from "../LoadingWheel/index.svelte"
+  import SuccessCheck from "../SuccessCheck/index.svelte"
+  import ErrorX from "../ErrorX/index.svelte"
+  import Icon from "../Icon/index.svelte"
+
+  let { manager, content } = $props()
+</script>
+
+<svelte:window onpointerup={(e) => manager?.pointer_up(e)} />
+
+{#if !manager}
+  Error
+{:else}
+  <div
+    style="--ml: {manager?.ml}rem; --mr: {manager?.mr}rem; --mt: {manager?.mt}rem; --mb: {manager?.mb}rem; --br: {manager?.border_radius}rem; --br_icon: {manager?.is_pill
+      ? 50
+      : manager?.border_radius - manager?.pt}rem;"
+    class="container"
+  >
+    <button
+      id={`button_${manager?.id}`}
+      style="
+    --min_width: {manager?.min_width ? manager?.min_width + 'rem' : 0};
+    --base_width: {manager?.fixed_width ? manager?.fixed_width + 'rem' : '100%'};
+    --min_height: {manager?.min_height}rem; 
+    --pl:{manager?.pl}rem; 
+    --pr:{manager?.pr}rem; 
+    --pt:{manager?.pt}rem; 
+    --pb:{manager?.pb}rem;
+    --br:{manager?.border_radius}rem;
+    --text_align: {manager?.text_align};
+    --gradient_turn: {manager?.gradient_turn}turn;
+    --color: {manager?.color};
+    --border_color: {manager?.border_color};
+    --gradient_to_color: {manager?.gradient_to_color};
+    --contrast_color: {manager?.contrast_color};
+    font-weight: {manager?.font_weight}; 
+    font-size: {manager?.font_size}rem;
+    line-height: {manager?.line_height};
+    "
+      class="base"
+      class:is_no_wrap={manager?.is_no_wrap}
+      class:is_word_break_all={manager?.is_word_break_all}
+      class:text_align_center={manager?.text_align === "center"}
+      class:cursor_move={manager?.cursor === "move"}
+      class:is_compressed={manager?.is_compressed}
+      class:is_pill={manager?.is_pill}
+      class:is_uniform={manager?.is_uniform}
+      class:primary={manager?.type == "primary" && !manager?.selected_type}
+      class:primary_simulate_active={manager?.type == "primary" &&
+        !manager?.selected_type &&
+        manager?.is_simulated_active}
+      class:primary_selected={manager?.type == "primary" && manager?.selected_type == "selected"}
+      class:primary_selected_simulate_active={manager?.type == "primary" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "selected"}
+      class:primary_half_selected={manager?.type == "primary" && manager?.selected_type == "half_selected"}
+      class:primary_half_selected_simulate_active={manager?.type == "primary" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "half_selected"}
+      class:outlined={manager?.type == "outlined" && !manager?.selected_type}
+      class:outlined_simulate_active={manager?.type == "outlined" &&
+        !manager?.selected_type &&
+        manager?.is_simulated_active}
+      class:outlined_selected={manager?.type == "outlined" && manager?.selected_type == "selected"}
+      class:outlined_selected_simulate_active={manager?.type == "outlined" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "selected"}
+      class:outlined_half_selected={manager?.type == "outlined" && manager?.selected_type == "half_selected"}
+      class:outlined_half_selected_simulate_active={manager?.type == "outlined" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "half_selected"}
+      class:soft={manager?.type == "soft" && !manager?.selected_type}
+      class:soft_simulate_active={manager?.type == "soft" && !manager?.selected_type && manager?.is_simulated_active}
+      class:soft_selected={manager?.type == "soft" && manager?.selected_type == "selected"}
+      class:soft_selected_simulate_active={manager?.type == "soft" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "selected"}
+      class:soft_half_selected={manager?.type == "soft" && manager?.selected_type == "half_selected"}
+      class:soft_half_selected_simulate_active={manager?.type == "soft" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "half_selected"}
+      class:plain={manager?.type == "plain" && !manager?.selected_type}
+      class:plain_simulate_active={manager?.type == "plain" && !manager?.selected_type && manager?.is_simulated_active}
+      class:plain_selected={manager?.type == "plain" && manager?.selected_type == "selected"}
+      class:plain_selected_simulate_active={manager?.type == "plain" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "selected"}
+      class:plain_half_selected={manager?.type == "plain" && manager?.selected_type == "half_selected"}
+      class:plain_half_selected_simulate_active={manager?.type == "plain" &&
+        !manager?.selected_type &&
+        manager?.selected_type == "half_selected"}
+      class:border={!!manager?.border_color}
+      popovertarget={manager?.popover_target}
+      tabindex={manager?.tabindex}
+      disabled={manager?.is_disabled || manager?.is_loading || manager?.is_success || manager?.is_error}
+      onclick={(e) => manager?.handle_click(e)}
+      onpointerdown={(e) => manager?.pointer_down(e)}
+      onpointerenter={(e) => manager?.pointer_enter(e)}
+      onpointerleave={(e) => manager?.pointer_leave(e)}
+      aria-label={manager?.aria_label}
+    >
+      {#if manager?.support_icon && manager?.icon_pos == "left" && !manager?.is_uniform}
+        <div
+          class="icon_spacer"
+          style="--room_for_icon:{manager?.min_height > 0
+            ? manager?.min_height - manager?.pt * 2
+            : manager?.icon_size + manager?.pt * 2}rem; --icon_size: {manager?.icon_size + manager?.pt * 2}rem;"
+        ></div>
+      {/if}
+      {#if content}
+        {@render content()}
+      {:else if manager?.text != null}
+        {manager?.text}
+      {/if}
+      {#if manager?.support_icon}
+        <div
+          class="supporting_icon"
+          class:supporting_icon_left={manager?.icon_pos == "left" && !manager?.is_uniform}
+          class:supporting_icon_right={manager?.icon_pos == "right" && !manager?.is_uniform}
+          style="margin-left: {manager?.icon_ml}rem; margin-right: {manager?.icon_mr}rem; --is_icon_bg_tint: {manager?.is_icon_bg_tint
+            ? 'var(--tint2-t)'
+            : '#00000000'}; --h: {manager?.min_height > 0
+            ? manager?.min_height - 2 * manager?.pt
+            : manager?.icon_size}rem;"
+        >
+          {#if manager?.is_loading}
+            <div class="load">
+              <LoadingWheel
+                color="color-mix(in oklab, {manager?.color}, var(--g{manager?.type == 'primary' ? 20 : 8}-t) 93%)"
+                sw={0.2}
+              />
+            </div>
+          {:else if manager?.is_success}
+            <div class="icon">
+              <SuccessCheck
+                sw={35}
+                color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h9))"
+              />
+            </div>
+          {:else if manager?.is_error}
+            <div class="icon">
+              <ErrorX sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h2))" />
+            </div>
+          {:else}
+            <Icon manager={manager?.icon_manager} />
+          {/if}
+        </div>
+        {#if manager?.icon_pos !== "left"}
+          <div
+            class="icon_spacer"
+            style="--room_for_icon:{manager?.min_height > 0
+              ? manager?.min_height - manager?.pt * 2
+              : manager?.icon_size + manager?.pt * 2}rem; --icon_size: {manager?.icon_size + manager?.pt * 2}rem;"
+          ></div>
+        {/if}
+      {:else if manager?.is_loading}
+        <div class="load">
+          <LoadingWheel
+            color="color-mix(in oklab, {manager?.color}, var(--g{manager?.type == 'primary' ? 20 : 8}-t) 93%)"
+            sw={0.2}
+          />
+        </div>
+      {:else if manager?.is_success}
+        <div class="icon">
+          <SuccessCheck sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h9))" />
+        </div>
+      {:else if manager?.is_error}
+        <div class="icon">
+          <ErrorX sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h2))" />
+        </div>
+      {/if}
+    </button>
+  </div>
+{/if}
+
+<style>
+  .container {
+    margin-left: var(--ml);
+    margin-right: var(--mr);
+    margin-top: var(--mt);
+    margin-bottom: var(--mb);
+  }
+  .base {
+    position: relative;
+    display: flex;
+    align-items: center;
+    outline: none;
+    border: none;
+    min-height: var(--min_height);
+    padding: var(--pt) var(--pr) var(--pb) var(--pl);
+    justify-content: var(--text_align);
+    text-align: var(--text_align);
+    border-radius: var(--br);
+    min-width: var(--min_width);
+    width: var(--base_width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .base:not(:disabled) {
+    cursor: pointer;
+  }
+  .base:focus-visible {
+    outline: 1px solid var(--selected-t);
+    outline-offset: -1px;
+    box-shadow:
+      inset 0 0 0 1px var(--selected-t),
+      inset 0 0 0 2px var(--g1-t) !important;
+    -webkit-box-shadow:
+      inset 0 0 0 1px var(--selected-t),
+      inset 0 0 0 2px var(--g1-t) !important;
+  }
+  .is_no_wrap {
+    white-space: nowrap;
+  }
+  .is_word_break_all {
+    word-break: break-all;
+  }
+  .icon_spacer {
+    width: var(--room_for_icon);
+    height: var(--icon_size);
+  }
+  .supporting_icon {
+    position: absolute;
+    background-color: var(--is_icon_bg_tint);
+    top: 50%;
+    transform: translateY(-50%);
+    height: var(--h);
+    aspect-ratio: 1;
+    border-radius: var(--br_icon);
+    display: grid;
+    place-items: center;
+  }
+  .supporting_icon_left {
+    left: var(--pt);
+  }
+  .supporting_icon_right {
+    right: var(--pt);
+  }
+  .cursor_move {
+    cursor: move;
+  }
+  .text_align_center {
+    justify-content: center;
+    text-align: center;
+  }
+  .is_pill {
+    border-radius: 50rem;
+  }
+  .is_compressed {
+    width: auto;
+  }
+  .is_uniform {
+    width: var(--min_height) !important;
+    height: var(--min_height);
+  }
+  .load {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: auto;
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+  .icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: auto;
+    width: 2rem;
+    height: 2rem;
+  }
+  .border {
+    border: 1px solid var(--border_color);
+  }
+  .primary {
+    background: linear-gradient(var(--gradient_turn), var(--color), var(--gradient_to_color));
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--contrast_color);
+  }
+  .primary:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
+      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
+  }
+  .primary:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .primary_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .primary:disabled {
+    background: linear-gradient(
+      var(--gradient_turn),
+      color-mix(in oklab, var(--color), var(--g8-t) 93%),
+      color-mix(in oklab, var(--gradient_to_color), var(--g8-t) 93%)
+    );
+    color: color-mix(in oklab, var(--contrast_color), var(--g10-t) 80%);
+  }
+
+  .primary_selected {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h);
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+  }
+  .primary_selected:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h),
+      oklch(from var(--gradient_to_color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h)
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
+      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
+  }
+  .primary_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .primary_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .primary_selected:disabled {
+    background: linear-gradient(
+      var(--gradient_turn),
+      color-mix(in oklab, var(--color), var(--g14-t) 95%),
+      color-mix(in oklab, var(--gradient_to_color), var(--g14-t) 95%)
+    );
+    color: color-mix(in oklab, var(--contrast_color), var(--g10-t) 80%);
+  }
+
+  .primary_half_selected {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h);
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+  }
+  .primary_half_selected:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.05) h),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.05) h)
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
+      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
+  }
+  .primary_half_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .primary_half_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .primary_half_selected:disabled {
+    background: linear-gradient(
+      var(--gradient_turn),
+      color-mix(in oklab, var(--color), var(--g8-t) 93%),
+      color-mix(in oklab, var(--gradient_to_color), var(--g8-t) 93%)
+    );
+    color: color-mix(in oklab, var(--contrast_color), var(--g10-t) 80%);
+  }
+
+  .outlined {
+    background: transparent;
+    border: 1px solid var(--color);
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--color);
+  }
+  .outlined:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
+      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
+  }
+  .outlined:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .outlined_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .outlined:disabled {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)))
+    );
+    border: 1px solid color-mix(in oklab, var(--color), var(--g11-t) 93%);
+    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)));
+  }
+
+  .outlined_selected {
+    background: linear-gradient(var(--gradient_turn), var(--color), var(--gradient_to_color));
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--contrast_color);
+  }
+  .outlined_selected:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h / calc(0.9 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.9 + var(--l-shift-t)))
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
+      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
+  }
+  .outlined_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .outlined_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .outlined_selected:disabled {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)))
+    );
+    border: 1px solid color-mix(in oklab, var(--color), var(--g11-t) 93%);
+    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
+  }
+
+  .outlined_half_selected {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    border: 1px solid var(--color);
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--color);
+  }
+  .outlined_half_selected:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.3 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.3 + var(--l-shift-t)))
+    );
+    box-shadow:
+      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
+      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
+  }
+  .outlined_half_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .outlined_half_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .outlined_half_selected:disabled {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)))
+    );
+    border: 1px solid color-mix(in oklab, var(--color), var(--g11-t) 93%);
+    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
+  }
+
+  .soft {
+    background: transparent;
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--color);
+  }
+  .soft:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.12 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.12 + var(--l-shift-t)))
+    );
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.01) h);
+  }
+  .soft:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
+  }
+  .soft_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
+  }
+  .soft:disabled {
+    background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
+    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
+  }
+
+  .soft_selected {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.25 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.25 + var(--l-shift-t)))
+    );
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h);
+  }
+  .soft_selected:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h);
+  }
+  .soft_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
+  }
+  .soft_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
+  }
+  .soft_selected:disabled {
+    background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
+    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
+  }
+
+  .soft_half_selected {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.1 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.1 + var(--l-shift-t)))
+    );
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--color);
+  }
+  .soft_half_selected:hover:enabled:not(:active) {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.15 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.15 + var(--l-shift-t)))
+    );
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .soft_half_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .soft_half_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .soft_half_selected:disabled {
+    background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
+    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
+  }
+
+  .plain {
+    background: transparent;
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: var(--color);
+  }
+  .plain:hover:enabled:not(:active) {
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l - 3 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain:active {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain_simulate_active {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain:disabled {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
+  }
+
+  .plain_selected {
+    background: transparent;
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain_selected:hover:enabled:not(:active) {
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l - 1 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain_selected:active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - 4 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain_selected_simulate_active {
+    background: linear-gradient(
+      var(--gradient_turn),
+      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
+      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
+    );
+    color: oklch(from var(--color) calc(l - 4 * var(--l-shift-t)) calc(c + 0.1) h);
+  }
+  .plain_selected:disabled {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
+  }
+
+  .plain_half_selected {
+    background: transparent;
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h);
+  }
+  .plain_half_selected:hover:enabled:not(:active) {
+    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
+    color: oklch(from var(--color) calc(l + 4 * var(--l-shift-t)) calc(c + 0.05) h);
+  }
+  .plain_half_selected:active {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .plain_half_selected_simulate_active {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.02) h);
+  }
+  .plain_half_selected:disabled {
+    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
+  }
+</style>