thiscodeWorks - Organizing the best of code online

--border-size-{1-5}
--radius-{1-6}
--radius-round
--radius-blob-{1-5}
--radius-conditional-{1-6}

#css #open-props #animations

Open Props: sub-atomic styles

.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);
}

#css #open-props #typography

Open Props: sub-atomic styles

--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;

#css #open-props #typography

Open Props: sub-atomic styles

--font-size-{00-8}
--font-size-fluid-{0-3}
--font-weight-{1-9}
--font-letterspacing-{0-7}
--font-lineheight-{00-5}

#css #open-props #shadows

Open Props: sub-atomic styles

--shadow-{1-6}
--inner-shadow-{0-4}

#css #open-props

Open Props: sub-atomic styles

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);
}

#javascript #open-props

Open Props: sub-atomic styles

import "https://unpkg.com/open-props/open-props.tokens.json"

#css #open-props

Open Props: sub-atomic styles

/* 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 */

#css #open-props

Open Props: sub-atomic styles

.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;
}

#css #open-props

Open Props: sub-atomic styles

.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); }
  }
}

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Open Props: sub-atomic styles

Save snippets that work with our extensions