How to use the @xstyled/system.th.fontWeight 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 DefinitelyTyped / DefinitelyTyped / types / xstyled__system / xstyled__system-tests.tsx View on Github external
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')({});

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

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.borderWidth(2)({});
th.borderWidth('sm')({});
github DefinitelyTyped / DefinitelyTyped / types / xstyled__system / xstyled__system-tests.tsx View on Github external
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')({});

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

th.zIndex(2)({});
th.zIndex('modal')({});

th.border(2)({});
th.border('main')({});

th.borderWidth(2)({});
th.borderWidth('sm')({});
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'] ~ & {
              opacity: 0.6;
            }

            && {
              ${system(p)}
            }
          `
github smooth-code / smooth-ui / packages / shared / core / Switch.js View on Github external
return css`
            display: inline-block;
            position: relative;
            z-index: ${th.zIndex('control')(p)};
            font-family: ${th.font('base')(p)};
            border-radius: ${th.radius('34rpx')(p)};
            width: ${width};
            height: ${height};
            background-color: ${th.color('light300')(p)};
            overflow: hidden;
            cursor: pointer;
            border-width: ${th.borderWidth(`formControl.base`)(p)};
            border-color: ${th.color('formControl.border')(p)};
            border-style: solid;
            font-size: ${th.fontSize(`switch.${scale}`)(p)};
            font-weight: ${th.fontWeight('extraBold')(p)};
            ${safeTransition('base')(p)};

            input {
              top: 0;
              left: 0;
              width: 100%;
              cursor: inherit;
              height: 100%;
              margin: 0;
              opacity: 0;
              padding: 0;
              position: absolute;
              z-index: 1;
            }

            [data-switch-content] {