Custom CSS Properties as dropdowns

Feature Requests
1

Hello

Currently I am using Utopia to set the following CSS vars and then using these through my Global CSS classes.

Q - Did you mention somewhere that sometime soon we’d be able to register these in cwicly so they are shown as dropdowns when setting values in the cwicly UI for global classes?

/* @link https://utopia.fyi */

/* TYPOGRAPHY */
:root {
  --step--2: clamp(0.7rem, calc(0.81rem + -0.09vw), 0.79rem);
  --step--1: clamp(0.89rem, calc(0.88rem + 0.05vw), 0.94rem);
  --step-0: clamp(1rem, calc(0.95rem + 0.25vw), 1.25rem);
  --step-1: clamp(1.13rem, calc(1.02rem + 0.54vw), 1.67rem);
  --step-2: clamp(1.27rem, calc(1.07rem + 0.96vw), 2.22rem);
  --step-3: clamp(1.42rem, calc(1.12rem + 1.54vw), 2.96rem);
  --step-4: clamp(1.6rem, calc(1.13rem + 2.34vw), 3.95rem);
  --step-5: clamp(1.8rem, calc(1.11rem + 3.46vw), 5.26rem);
}

/* SPACING */
:root {
  --size-3xs: clamp(0.25rem, calc(0.24rem + 0.06vw), 0.31rem);
  --size-2xs: clamp(0.5rem, calc(0.48rem + 0.13vw), 0.63rem);
  --size-xs: clamp(0.75rem, calc(0.71rem + 0.19vw), 0.94rem);
  --size-s: clamp(1rem, calc(0.95rem + 0.25vw), 1.25rem);
  --size-m: clamp(1.5rem, calc(1.43rem + 0.38vw), 1.88rem);
  --size-l: clamp(2rem, calc(1.9rem + 0.5vw), 2.5rem);
  --size-xl: clamp(3rem, calc(2.85rem + 0.75vw), 3.75rem);
  --size-2xl: clamp(4rem, calc(3.8rem + 1vw), 5rem);
  --size-3xl: clamp(6rem, calc(5.7rem + 1.5vw), 7.5rem);

  /* One-up pairs */
  --size-3xs-2xs: clamp(0.25rem, calc(0.18rem + 0.38vw), 0.63rem);
  --size-2xs-xs: clamp(0.5rem, calc(0.41rem + 0.44vw), 0.94rem);
  --size-xs-s: clamp(0.75rem, calc(0.65rem + 0.5vw), 1.25rem);
  --size-s-m: clamp(1rem, calc(0.83rem + 0.88vw), 1.88rem);
  --size-m-l: clamp(1.5rem, calc(1.3rem + 1vw), 2.5rem);
  --size-l-xl: clamp(2rem, calc(1.65rem + 1.75vw), 3.75rem);
  --size-xl-2xl: clamp(3rem, calc(2.6rem + 2vw), 5rem);
  --size-2xl-3xl: clamp(4rem, calc(3.3rem + 3.5vw), 7.5rem);
  --size-4xl: clamp(8rem, calc(7.6rem + 2vw), 10rem);

  /* Custom pairs */
  --size-s-l: clamp(1rem, calc(0.7rem + 1.5vw), 2.5rem);
}

/* Typography Defaults */
:root {
    --body-font-size: var(--step-0);
    --h1-font-size: var(--step-5);
    --h2-font-size: var(--step-4);
    --h3-font-size: var(--step-3);
    --h4-font-size: var(--step-1);
    --h5-font-size: var(--step-1);
    --h6-font-size: var(--step-0)
}

h1,.h1 {
    font-size: var(--h1-font-size);
    line-height: 1.2
}

h2,.h2 {
    font-size: var(--h2-font-size);
    line-height: 1.3
}

h3,.h3 {
    font-size: var(--h3-font-size);
    line-height: 1.3
}

h4,.h4 {
    font-size: var(--h4-font-size);
    line-height: 1.4
}

h5,.h5 {
    font-size: var(--h5-font-size);
    line-height: 1.4
}
2

Hi @grantambrose,

Thank you for sharing this feature request!

We understand the convenience and efficiency this feature could bring.
So yes, we definitely plan for this some time in the future.

Moving this to planned.

1 Like