Skip to content

Instantly share code, notes, and snippets.

@billybonks

billybonks/button.css

Last active August 28, 2025 09:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save billybonks/38b6cd7087c14dc77deb5a0e9c7150fc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save billybonks/38b6cd7087c14dc77deb5a0e9c7150fc to your computer and use it in GitHub Desktop.
Download ZIP
last button
Raw
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
)
;
);
}
@billybonks
Copy link
Author

billybonks commented Aug 28, 2025 •
edited
Loading

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.

@billybonks
Copy link
Author

billybonks commented Aug 28, 2025 

⏺ 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment