1. Advisor
  2. @xstyled/system
  3. functions
  4. @xstyled/system.th.space
View all @xstyled/system analysis

How to use the @xstyled/system.th.space function in @xstyled/system

To help you get started, we’ve selected a few @xstyled/system examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github smooth-code / smooth-ui / packages / shared / core / Button.js View on Github external
Button: p => {
          const { outline } = p
          const scale = p.scale || 'base'
          const baseColor =
            p.variant === null ? null : th.color(p.variant || 'primary')(p)
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          return css`
            display: inline-block;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            padding: ${py} ${px};
            border-radius: ${th.radius(scale)(p)};
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            border-width: ${th.borderWidth(`button.${scale}`)(p)};
            cursor: ${p.disabled ? 'initial' : 'pointer'};
            ${safeTransition('base')(p)};

            /* When used as link */
            text-decoration: none;

            &[type='button'] {
github DefinitelyTyped / DefinitelyTyped / types / xstyled__system / xstyled__system-tests.tsx View on Github external
th.color(2)({});
th.color('primary')({});

th.px(2)({});
th.px('2rpx')({});

th.percent(0.3)({});
th.percent('20em')({});

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});
github DefinitelyTyped / DefinitelyTyped / types / xstyled__system / xstyled__system-tests.tsx View on Github external
th.color('primary')({});

th.px(2)({});
th.px('2rpx')({});

th.percent(0.3)({});
th.percent('20em')({});

th.radius(2)({});
th.radius('sm')({});

th.transition(2)({});
th.transition('fade')({});

th.space(2)({});
th.space('sm')({});

th.size(2)({});
th.size('sm')({});

th.font(2)({});
th.font('body')({});

th.lineHeight(2)({});
th.lineHeight('sm')({});

th.fontWeight(2)({});
th.fontWeight('heavy')({});

th.letterSpacing(2)({});
th.letterSpacing('sm')({});
github smooth-code / smooth-ui / packages / shared / core / Form.js View on Github external
},
})

export const FormCheckLabel = createComponent({
  name: 'FormCheckLabel',
  render: ({ as: As = 'label', ...props }) => {
    const labelProps = useFormGroupLabelProps(props)
    return 
  },
  theme: [
    theme,
    formTheme,
    {
      space: {
        formCheckLabel: {
          left: scale('0.375rem', th.space('formCheckLabel.left.base')),
        },
      },
    },
    {
      components: {
        FormCheckLabel: p => {
          const { scale = 'base' } = p
          const pl = th.space(`formCheckLabel.left.${scale}`)(p)
          return css`
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            padding-left: ${pl};

            [aria-disabled='true'] ~ & {
              opacity: 0.6;
            }
github smooth-code / smooth-ui / packages / shared / core / Input.js View on Github external
Input: p => {
          const scale = p.scale || 'base'
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const validColor = th.color('form.valid')(p)
          const invalidColor = th.color('form.invalid')(p)
          return css`
            display: block;
            appearance: none;
            width: 100%;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            color: ${th.color('formControl.text')(p)};
            background-color: ${th.color('formControl.background')(p)};
            padding: ${py} ${px};
github smooth-code / smooth-ui / packages / shared / core / Form.js View on Github external
},
    },
  },
  propTypes: {
    children: node,
    ...getSystemPropTypes(system),
  },
})

export const FormField = createComponent({
  name: 'FormField',
  render: ({ as: As = 'div', ...props }) => ,
  theme: {
    space: {
      formField: {
        bottom: scale('1rem', th.space('formField.bottom.base')),
      },
    },
    components: {
      FormField: p => {
        const { scale = 'base' } = p
        const mb = th.space(`formField.bottom.${scale}`)(p)
        return css`
          margin-bottom: ${mb};

          && {
            ${system(p)}
          }
        `
      },
    },
  },
github smooth-code / smooth-ui / packages / shared / core / Form.js View on Github external
FormFieldLabel: p => {
          const { scale = 'base' } = p
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const mb = th.space(`formFieldLabel.bottom.${scale}`)(p)
          return css`
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            display: inline-block;
            margin-bottom: ${mb};
            font-weight: ${th.fontWeight('medium')(p)};

            ${p.col &&
              css`
                padding-top: calc(${py} + 1px);
                padding-bottom: calc(${py} + 1px);
                margin-bottom: 0;
              `(p)}

            [aria-disabled='true'] ~ & {
github smooth-code / smooth-ui / packages / shared / core / Form.js View on Github external
},
})

export const FormFieldLabel = createComponent({
  name: 'FormFieldLabel',
  render: ({ as: As = 'label', scale, ...props }) => {
    const labelProps = useFormLabelProps(props)
    return 
  },
  theme: [
    theme,
    formTheme,
    {
      space: {
        formFieldLabel: {
          bottom: scale('0.5rem', th.space('formFieldLabel.bottom.base')),
        },
      },
    },
    {
      components: {
        FormFieldLabel: p => {
          const { scale = 'base' } = p
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const mb = th.space(`formFieldLabel.bottom.${scale}`)(p)
          return css`
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            display: inline-block;
            margin-bottom: ${mb};
            font-weight: ${th.fontWeight('medium')(p)};
github smooth-code / smooth-ui / packages / shared / core / Select.js View on Github external
Select: p => {
          const scale = p.scale || 'base'
          const px = th.space(`textFormControl.x.${scale}`)(p)
          const py = th.space(`textFormControl.y.${scale}`)(p)
          const validColor = th.color('form.valid')(p)
          const invalidColor = th.color('form.invalid')(p)
          return css`
            display: block;
            appearance: none;
            width: 100%;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            font-size: ${th.fontSize(scale)(p)};
            border-width: ${th.borderWidth(`formControl.${scale}`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            line-height: ${th.lineHeight(`formControl.${scale}`)(p)};
            color: ${th.color('formControl.text')(p)};
            background-color: ${th.color('formControl.background')(p)};

@xstyled/system

xstyled system utilities.

GitHub
MIT
Latest version published 1 year ago

Package Health Score

60 / 100
Full package analysis

Popular @xstyled/system functions

Similar packages