last button

button.css

a.button {
    text-decoration: none;
}

.button {
    --button-font-color: light-dark(
        var(--button-font-color-light, oklch(0.985 0 0)),
        var(--button-font-color-dark, oklch(0.2046 0 0))
    );
    --button-font-size: 1rem;
    --button-background-color: light-dark(
        var(--button-background-color-light, oklch(0.205 0 0)),
        var(--button-background-color-dark, oklch(0.9219 0 0))
    );
    --button-text-icon-gutter: 6px;

    position: relative;
    background-color: var(--button-background-color);
    padding: var(--button-padding, 10px 16px);
    border-radius: var(--button-border-radius, 8px);
    color: var(--button-font-color);
    font-size: var(--button-font-size); /* Got size from figma login screren */
    border: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: var(--button-font-weight, var(--bold-font-weight));
    line-height: 24px;

    &:hover {
        background-color: var(
            --button-hover-background-color,
            color-mix(in oklch, var(--button-background-color) 80%, transparent)
        );
    }

    &:disabled {
        background-color: var(
            --button-disabled-background-color,
            color-mix(in oklch, var(--button-background-color) 60%, transparent)
        );
        cursor: inherit;
    }

    & > svg {
        height: var(--button-font-size);
    }

    & > svg:first-child {
        margin-left: var(--button-text-icon-gutter);
    }

    & > svg:last-child {
        margin-right: var(--button-text-icon-gutter);
    }
}

.button-secondary {
    --button-secondary-background-color: light-dark(
        var(--button-secondary-background-color-light, oklch(0.8702 0 0)),
        var(--button-secondary-background-color-dark, oklch(0.2686 0 0))
    );

    --button-font-color: var(
        --button-secondary-font-color,
        light-dark(
            var(--button-secondary-font-color-light, oklch(0.2046 0 0)),
            var(--button-secondary-font-color-dark, oklch(0.9761 0 0))
        )
    );
    --button-background-color: var(--button-secondary-background-color);

    --button-disabled-background-color: var(
        --button-hover-background-color,
        color-mix(
                in oklch,
                var(--button-secondary-background-color) 80%,
                transparent
            )
            ;
    );

    --button-disabled-background-color: var(
        --button-secondary-disabled-background-color,
        color-mix(
                in oklch,
                var(--button-secondary-background-color) 60%,
                transparent
            )
            ;
    );
}

.button-destructive {
    --button-destructive-background-color: light-dark(
        var(
            --button-destructive-background-color-light,
            oklch(0.5836 0.2381 28.59)
        ),
        var(
            --button-destructive-background-color-dark,
            oklch(0.4974 0.1245 21.47)
        )
    );

    --button-font-color: var(
        --button-destructive-font-color,
        light-dark(
            var(--button-destructive-font-color-light, oklch(1 0 0)),
            var(--button-destructive-font-color-dark, oklch(1 0 0))
        )
    );

    --button-background-color: var(--button-destructive-background-color);

    --button-disabled-background-color: var(
        --button-hover-background-color,
        color-mix(
                in oklch,
                var(--button-destructive-background-color) 80%,
                transparent
            )
            ;
    );

    --button-disabled-background-color: var(
        --button-secondary-disabled-background-color,
        color-mix(
                in oklch,
                var(--button-destructive-background-color) 60%,
                transparent
            )
            ;
    );
}

LLM Variable exctraction

  Extract and organize all CSS variables from this file with the following structure:

  1. Group variables by their purpose/component
  2. Use indentation to show dependencies (child variables under parent)
  3. Mark variables that have no default values or rely on external dependencies with *(no default - external dependency)*
  4. Mark variables that fallback to other variables with *(fallback to `--variable-name`)*
  5. Show the hierarchy where light/dark variants are children of their main color variable

  Format as markdown lists with proper indentation using dashes and sub-bullets.

  Example format:
  **Component variables:**
  - `--main-variable`
    - `--main-variable-light`
    - `--main-variable-dark`
  - `--external-variable` *(no default - external dependency)*
  - `--fallback-variable` *(fallback to `--other-variable`)*

This prompt will analyze any CSS file and give you the same structured breakdown of variables with their dependencies and relationships.

⏺ General button variables (used by all):
  - --button-font-size
  - --button-text-icon-gutter
  - --button-padding (no default - external dependency)
  - --button-border-radius (no default - external dependency)
  - --font-family (no default - external dependency)
  - --button-font-weight (fallback to --bold-font-weight)
  - --bold-font-weight (no default - external dependency)

  Primary button variables (overridden by secondary/destructive):
  - --button-primary-font-color
    - --button-primary-font-color-light
    - --button-primary-font-color-dark
  - --button-background-color
    - --button-background-color-light
    - --button-background-color-dark

  Secondary button variables:
  - --button-secondary-background-color
    - --button-secondary-background-color-light
    - --button-secondary-background-color-dark
  - --button-secondary-font-color (no default - external dependency)
    - --button-secondary-font-color-light
    - --button-secondary-font-color-dark

  Destructive button variables:
  - --button-destructive-background-color
    - --button-destructive-background-color-light
    - --button-destructive-background-color-dark
  - --button-destructive-font-color (no default - external dependency)
    - --button-destructive-font-color-light
    - --button-destructive-font-color-dark