Shared Styles

• Border Radius
• Box Shadow
• Timing Functions
• Shared-Styles Visual Editor

A Shared Style is a style pattern shared across multiple components. Set your custom shared styles in the custom-style/_shared-styles.scss file.

Border Radius #

Here's the list of border-radius custom properties:

:root {
  --radius: 0.25em; // border radius base size
  --radius-sm: calc(var(--radius)/2);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius)*2);
}

Use the radius variables to set the border-radius of your elements in CSS:

.component {
  border-radius: var(--radius-sm);
}

Alternatively, use the border-radius utility classes.

Box Shadow #

Here's the list of shadow custom properties:

:root {
  // 1px shadow ring
  --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05);
  // lower depth
  --shadow-xs:  0 0.1px 0.3px hsla(0, 0%, 0%, 0.06),
                0 1px 2px hsla(0, 0%, 0%, 0.12);
  // low depth
  --shadow-sm:  0 0.3px 0.4px hsla(0, 0%, 0%, 0.025),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.05), 
                0 3.5px 6px hsla(0, 0%, 0%, 0.1);
  // medium depth
  --shadow-md:  0 0.9px 1.5px hsla(0, 0%, 0%, 0.03), 
                0 3.1px 5.5px hsla(0, 0%, 0%, 0.08), 
                0 14px 25px hsla(0, 0%, 0%, 0.12);
  // high depth
  --shadow-lg:  0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.014), 
                0 3.3px 5.3px -1px hsla(0, 0%, 0%, 0.038), 
                0 8.5px 12.7px -1px hsla(0, 0%, 0%, 0.085), 
                0 30px 42px -1px hsla(0, 0%, 0%, 0.15);
  // higher depth
  --shadow-xl:  0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.012), 
                0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.035), 
                0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.07), 
                0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.117), 
                0 46px 60px -6px hsla(0, 0%, 0%, 0.2);
  // inner glow visible in dark mode
  --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
  --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
}

Use the shadow variables to set the box-shadow value in CSS:

.component-1 {
  box-shadow: var(--shadow-sm);
  transition: .3s;

  &:hover {
    box-shadow: var(--shadow-md);
  }
}

.component-2 {
  box-shadow: var(--inner-glow), var(--shadow-ring), var(--shadow-md);
}

Alternatively, use the box-shadow utility classes.

Timing Functions #

CodyFrame includes a list of custom timing functions in the base/_shared-styles.scss file:

:root {
  // timing functions
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Use these custom properties to set the timing-function of your CSS animations/transitions:

.component {
  transition: transform 0.5s var(--ease-in-out);
}

Use the pen below to test the easing options:

Shared-Styles Editor #

Use the shared-etyles editor to create a visual library of reusable styles. Paste the generated code into the custom-style/_shared-styles.scss file of CodyFrame.