Snippets Collections
--border-size-{1-5}
--radius-{1-6}
--radius-round
--radius-blob-{1-5}
--radius-conditional-{1-6}
.loaded {
  animation: var(--animation-fade-in) forwards;
}

.actionsheet {
  animation: var(--animation-slide-out-down) forwards;

  &.open {
    animation: var(--animation-slide-in-up) forwards;
  }
}

.alert {
  animation: var(--animation-blink);
}
--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--font-serif: ui-serif, serif;
--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
--font-size-{00-8}
--font-size-fluid-{0-3}
--font-weight-{1-9}
--font-letterspacing-{0-7}
--font-lineheight-{00-5}
html {
  --brand-grape: var(--grape-5);

  --text1-grape: var(--grape-9);
  --text2-grape: var(--grape-7);

  --surface1-grape: var(--grape-0);
  --surface2-grape: var(--grape-1);
  --surface3-grape: var(--grape-2);
  --surface4-grape: var(--grape-3);
}
import "https://unpkg.com/open-props/open-props.tokens.json"
/* index.pcss */
@import "https://unpkg.com/open-props/src/props.colors.css";
@import "https://unpkg.com/open-props/src/props.orange.css";
@import "https://unpkg.com/open-props/src/props.easing.css";
@import "https://unpkg.com/open-props/src/props.sizes.css";
/* etc */
.checkmark-list {
  align-self: flex-start;
  display: grid;
  gap: var(--size-2);
  font-size: var(--font-size-fluid-1);
  font-weight: var(--font-weight-2);
  padding-inline-start: 0;
}
.op-icon-p {
  stroke: var(--indigo-2);
  @nest a:hover & { stroke: var(--indigo-1); }

  @nest [data-theme="light"] & {
    stroke: var(--indigo-9);
    @nest a:hover & { stroke: var(--indigo-8); }
  }
}
star

Fri Dec 10 2021 13:04:31 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #borders
star

Fri Dec 10 2021 12:58:08 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #animations
star

Fri Dec 10 2021 12:53:39 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #typography
star

Fri Dec 10 2021 12:51:07 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #typography
star

Fri Dec 10 2021 12:43:57 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props #shadows
star

Fri Dec 10 2021 12:35:51 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:29:07 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#javascript #open-props
star

Fri Dec 10 2021 12:28:54 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:18:18 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props
star

Fri Dec 10 2021 12:18:06 GMT+0000 (Coordinated Universal Time) https://open-props.style/#cdn

#css #open-props

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension