@heycar-uikit/core
Version:
The React UI library from HeyCar
1 lines • 25.7 kB
Source Map (JSON)
{"version":3,"sources":["../../../vars/src/colors.css","../../../vars/src/gaps.css","../../../vars/src/spacing.css","../../../vars/src/shadows.css","../../../vars/src/typography.css","../../../themes/src/default.css","default.module.css"],"names":[],"mappings":"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","file":"FormControl.css","sourcesContent":[":root {\n /* heycar mint color */\n --color-heycar-mint-50: #e6faf6;\n --color-heycar-mint-100: #ccf5ed;\n --color-heycar-mint-200: #99ebdb;\n --color-heycar-mint-300: #66e2c9;\n --color-heycar-mint-400: #33d8b7;\n --color-heycar-mint-500: #00cea5;\n --color-heycar-mint-600: #00a584;\n --color-heycar-mint-700: #007c63;\n --color-heycar-mint-800: #005242;\n --color-heycar-mint-900: #002921;\n\n /* mica blue color */\n --color-mica-blue-50: #f1f4fa;\n --color-mica-blue-100: #dee6f2;\n --color-mica-blue-200: #a2b7da;\n --color-mica-blue-300: #7394c8;\n --color-mica-blue-400: #4570b5;\n --color-mica-blue-500: #164ca3;\n --color-mica-blue-600: #123d82;\n --color-mica-blue-700: #052962;\n --color-mica-blue-800: #091e41;\n --color-mica-blue-900: #040f21;\n\n /* sunbeam blue color */\n --color-sunbeam-blue-50: #f0f9ff;\n --color-sunbeam-blue-100: #e8f6ff;\n --color-sunbeam-blue-200: #e1f3ff;\n --color-sunbeam-blue-300: #d9f0ff;\n --color-sunbeam-blue-400: #cdebff;\n --color-sunbeam-blue-500: #c0e6ff;\n --color-sunbeam-blue-600: #9bd1f4;\n --color-sunbeam-blue-700: #73b6e1;\n --color-sunbeam-blue-800: #4499cf;\n --color-sunbeam-blue-900: #2b6f99;\n\n /* mustang yellow color */\n --color-mustang-yellow-50: #fef8eb;\n --color-mustang-yellow-100: #fef0d8;\n --color-mustang-yellow-200: #fde1b0;\n --color-mustang-yellow-300: #fbd289;\n --color-mustang-yellow-400: #fac361;\n --color-mustang-yellow-500: #f9b43a;\n --color-mustang-yellow-600: #e29a1a;\n --color-mustang-yellow-700: #c9850c;\n --color-mustang-yellow-800: #ae7000;\n --color-mustang-yellow-900: #895800;\n\n /* old ferrari red color */\n --color-old-ferrari-red-50: #fff1ef;\n --color-old-ferrari-red-100: #ffe3df;\n --color-old-ferrari-red-200: #ffc8be;\n --color-old-ferrari-red-300: #ffac9e;\n --color-old-ferrari-red-400: #ff917d;\n --color-old-ferrari-red-500: #ff755d;\n --color-old-ferrari-red-600: #f46147;\n --color-old-ferrari-red-700: #e24529;\n --color-old-ferrari-red-800: #d73013;\n --color-old-ferrari-red-900: #c7270a;\n\n /* -- fantasy name of \"green\" color to be defined -- */\n --color-green-50: #e9f3ed;\n --color-green-100: #d2e8db;\n --color-green-200: #a5d1b8;\n --color-green-300: #79b994;\n --color-green-400: #4ca271;\n --color-green-500: #1f8b4d;\n --color-green-600: #196f3e;\n --color-green-700: #13532e;\n --color-green-800: #0c381f;\n --color-green-900: #061c0f;\n\n /* -- fantasy name of \"whatsapp\" color to be defined -- */\n --color-whatsapp-500: #59ce72;\n --color-whatsapp-600: #33a84c;\n --color-whatsapp-700: #148a2d;\n\n /* -- fantasy name of \"red\" color to be defined -- */\n --color-red-50: #fdeeee;\n --color-red-100: #fbdddd;\n --color-red-200: #f7bcbc;\n --color-red-300: #f39a9a;\n --color-red-400: #ef7979;\n --color-red-500: #eb5757;\n --color-red-600: #d73535;\n --color-red-700: #c61a1a;\n --color-red-800: #b90606;\n --color-red-900: #a00;\n\n /* tarmac grey color */\n --color-tarmac-grey-50: #f3f3f3;\n --color-tarmac-grey-100: #e6e6e6;\n --color-tarmac-grey-200: #cdcdcd;\n --color-tarmac-grey-300: #b5b5b5;\n --color-tarmac-grey-400: #9c9c9c;\n --color-tarmac-grey-500: #838383;\n --color-tarmac-grey-600: #595959;\n --color-tarmac-grey-700: #303030;\n --color-tarmac-grey-800: #262626;\n --color-tarmac-grey-900: #1d1d1d;\n\n /* brand colors */\n --color-heycar-mint: var(--color-heycar-mint-500);\n --color-mica-blue: var(--color-mica-blue-700);\n --color-sunbeam-blue: var(--color-sunbeam-blue-500);\n --color-championship-white: #fff;\n}\n","/* Depricated. Do Not Use */\n\n:root {\n --gap-3xs: 2px;\n --gap-2xs: 4px;\n --gap-1xs: 6px;\n --gap-xs: 8px;\n --gap-s: 12px;\n --gap-2s: 14px;\n --gap-m: 16px;\n --gap-l: 20px;\n --gap-xl: 24px;\n --gap-2xl: 28px;\n --gap-3xl: 32px;\n --gap-4xl: 36px;\n --gap-5xl: 40px;\n --gap-6xl: 44px;\n --gap-7xl: 48px;\n --gap-8xl: 56px;\n --gap-9xl: 64px;\n --gap-10xl: 72px;\n}\n",":root {\n --spacing-1: 4px;\n --spacing-2: 8px;\n --spacing-3: 12px;\n --spacing-4: 16px;\n --spacing-5: 20px;\n --spacing-6: 24px;\n --spacing-7: 28px;\n --spacing-8: 32px;\n --spacing-9: 36px;\n --spacing-10: 40px;\n --spacing-11: 44px;\n --spacing-12: 48px;\n --spacing-14: 56px;\n --spacing-16: 64px;\n --spacing-18: 72px;\n}\n",":root {\n --shadow-none: 'none';\n --shadow-xs: 0 2px 4px rgba(38, 38, 38, 0.06);\n --shadow-s: 0 2px 8px rgba(38, 38, 38, 0.08);\n --shadow-m: 0 4px 12px rgba(38, 38, 38, 0.08);\n --shadow-xl: 0 6px 24px rgba(38, 38, 38, 0.1);\n --shadow-xxl: 2px 8px 48px rgba(38, 38, 38, 0.2);\n}\n",":root {\n /* Font families */\n --font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;\n\n /* Font weights */\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-bold: 600;\n --font-weight-xbold: 800;\n}\n\n/*\n Heading\n*/\n@define-mixin typography-display {\n font-size: 48px;\n line-height: 56px;\n letter-spacing: -2px;\n font-family: var(--font-family-system);\n font-weight: var(--font-weight-xbold);\n\n @media (--tablet) {\n font-size: 60px;\n line-height: 68px;\n letter-spacing: -2.5px;\n }\n}\n\n@define-mixin typography-display-2 {\n font-size: 48px;\n line-height: 56px;\n letter-spacing: -2px;\n font-family: var(--font-family-system);\n font-weight: var(--font-weight-bold);\n\n @media (--tablet) {\n font-size: 60px;\n line-height: 68px;\n letter-spacing: -2.5px;\n }\n}\n\n@define-mixin typography-heading-1 {\n font-size: 48px;\n line-height: 56px;\n letter-spacing: -2px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-1_mobile {\n @mixin typography-heading-1;\n letter-spacing: -0.5px;\n font-size: 32px;\n line-height: 40px;\n}\n\n@define-mixin typography-heading-2 {\n font-size: 32px;\n letter-spacing: -0.5px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-2_mobile {\n @mixin typography-heading-2;\n font-size: 24px;\n}\n\n@define-mixin typography-heading-3 {\n font-size: 28px;\n letter-spacing: -0.5px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-3_mobile {\n @mixin typography-heading-3;\n font-size: 24px;\n}\n\n@define-mixin typography-heading-4 {\n font-size: 24px;\n letter-spacing: -0.5px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-4_mobile {\n @mixin typography-heading-4;\n letter-spacing: 0;\n font-size: 20px;\n}\n\n@define-mixin typography-heading-5 {\n font-size: 20px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-heading-5_mobile {\n @mixin typography-heading-5;\n font-size: 16px;\n}\n@define-mixin typography-heading-6 {\n font-size: 16px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n/*\n Sub-Heading\n*/\n@define-mixin typography-subheading-1 {\n font-size: 14px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-subheading-2 {\n font-size: 16px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-subheading-3 {\n font-size: 14px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-subheading-4 {\n font-size: 16px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n/*\n Body\n*/\n@define-mixin typography-body-1 {\n font-size: 16px;\n line-height: 26px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-body-2 {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-body-3 {\n font-size: 16px;\n line-height: 26px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-body-4 {\n font-size: 14px;\n line-height: 22px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n/*\n Caption\n*/\n@define-mixin typography-caption-1 {\n font-size: 12px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-2 {\n font-size: 12px;\n line-height: 18px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-3 {\n font-size: 10px;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-4 {\n font-size: 10px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-caption-5 {\n font-size: 10px;\n font-weight: var(--font-weight-regular);\n font-family: var(--font-family-system);\n}\n\n/*\n Overline\n*/\n@define-mixin typography-overline-1 {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-overline-2 {\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family-system);\n}\n\n/*\n Button\n*/\n@define-mixin typography-button-1 {\n font-size: 16px;\n font-weight: var(--font-weight-bold);\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-button-2 {\n font-size: 14px;\n font-weight: var(--font-weight-bold);\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin typography-button-3 {\n font-size: 12px;\n font-weight: var(--font-weight-bold);\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n/*\n Button Old - DO NOT USE\n*/\n@define-mixin button_large__bold {\n font-size: 16px;\n font-weight: 700;\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin button_medium__bold {\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n\n@define-mixin button_small__medium {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.2px;\n font-family: var(--font-family-system);\n}\n","@import '../../vars/src/index.css';\n\n/* Default theme (light) */\n\n:root {\n /*\n Colors\n */\n --color-primary-50: var(--color-mica-blue-50);\n --color-primary-100: var(--color-mica-blue-100);\n --color-primary-200: var(--color-mica-blue-200);\n --color-primary-300: var(--color-mica-blue-300);\n --color-primary-400: var(--color-mica-blue-400);\n --color-primary-500: var(--color-mica-blue-500);\n --color-primary-600: var(--color-mica-blue-600);\n --color-primary-700: var(--color-mica-blue-700);\n --color-primary-800: var(--color-mica-blue-800);\n --color-primary-900: var(--color-mica-blue-900);\n --color-secondary-50: var(--color-heycar-mint-50);\n --color-secondary-100: var(--color-heycar-mint-100);\n --color-secondary-200: var(--color-heycar-mint-200);\n --color-secondary-300: var(--color-heycar-mint-300);\n --color-secondary-400: var(--color-heycar-mint-400);\n --color-secondary-500: var(--color-heycar-mint-500);\n --color-secondary-600: var(--color-heycar-mint-600);\n --color-secondary-700: var(--color-heycar-mint-700);\n --color-secondary-800: var(--color-heycar-mint-800);\n --color-secondary-900: var(--color-heycar-mint-900);\n --color-tertiary-50: var(--color-sunbeam-blue-50);\n --color-tertiary-100: var(--color-sunbeam-blue-100);\n --color-tertiary-200: var(--color-sunbeam-blue-200);\n --color-tertiary-300: var(--color-sunbeam-blue-300);\n --color-tertiary-400: var(--color-sunbeam-blue-400);\n --color-tertiary-500: var(--color-sunbeam-blue-500);\n --color-tertiary-600: var(--color-sunbeam-blue-600);\n --color-tertiary-700: var(--color-sunbeam-blue-700);\n --color-tertiary-800: var(--color-sunbeam-blue-800);\n --color-tertiary-900: var(--color-sunbeam-blue-900);\n --color-warning-50: var(--color-mustang-yellow-50);\n --color-warning-100: var(--color-mustang-yellow-100);\n --color-warning-200: var(--color-mustang-yellow-200);\n --color-warning-300: var(--color-mustang-yellow-300);\n --color-warning-400: var(--color-mustang-yellow-400);\n --color-warning-500: var(--color-mustang-yellow-500);\n --color-warning-600: var(--color-mustang-yellow-600);\n --color-warning-700: var(--color-mustang-yellow-700);\n --color-warning-800: var(--color-mustang-yellow-800);\n --color-warning-900: var(--color-mustang-yellow-900);\n --color-highlight-50: var(--color-old-ferrari-red-50);\n --color-highlight-100: var(--color-old-ferrari-red-100);\n --color-highlight-200: var(--color-old-ferrari-red-200);\n --color-highlight-300: var(--color-old-ferrari-red-300);\n --color-highlight-400: var(--color-old-ferrari-red-400);\n --color-highlight-500: var(--color-old-ferrari-red-500);\n --color-highlight-600: var(--color-old-ferrari-red-600);\n --color-highlight-700: var(--color-old-ferrari-red-700);\n --color-highlight-800: var(--color-old-ferrari-red-800);\n --color-highlight-900: var(--color-old-ferrari-red-900);\n --color-success-50: var(--color-green-50);\n --color-success-100: var(--color-green-100);\n --color-success-200: var(--color-green-200);\n --color-success-300: var(--color-green-300);\n --color-success-400: var(--color-green-400);\n --color-success-500: var(--color-green-500);\n --color-success-600: var(--color-green-600);\n --color-success-700: var(--color-green-700);\n --color-success-800: var(--color-green-800);\n --color-success-900: var(--color-green-900);\n --color-error-50: var(--color-red-50);\n --color-error-100: var(--color-red-100);\n --color-error-200: var(--color-red-200);\n --color-error-300: var(--color-red-300);\n --color-error-400: var(--color-red-400);\n --color-error-500: var(--color-red-500);\n --color-error-600: var(--color-red-600);\n --color-error-700: var(--color-red-700);\n --color-error-800: var(--color-red-800);\n --color-error-900: var(--color-red-900);\n --color-neutral-50: var(--color-tarmac-grey-50);\n --color-neutral-100: var(--color-tarmac-grey-100);\n --color-neutral-200: var(--color-tarmac-grey-200);\n --color-neutral-300: var(--color-tarmac-grey-300);\n --color-neutral-400: var(--color-tarmac-grey-400);\n --color-neutral-500: var(--color-tarmac-grey-500);\n --color-neutral-600: var(--color-tarmac-grey-600);\n --color-neutral-700: var(--color-tarmac-grey-700);\n --color-neutral-800: var(--color-tarmac-grey-800);\n --color-neutral-900: var(--color-tarmac-grey-900);\n\n /*\n Sizes\n */\n --size-small-height: var(--spacing-8);\n --size-middle-height: var(--spacing-10);\n --size-large-height: var(--spacing-12);\n}\n\nhtml {\n font-size: 16px;\n}\n\nbody {\n color: var(--color-neutral-700);\n}\n","@import '../../../themes/src/default.css';\n\n:root {\n /* Color - base */\n --form-control-base-border-color: var(--color-neutral-500);\n --form-control-hover-border-color: var(--color-neutral-600);\n --form-control-focused-border-color: var(--color-primary-500);\n --form-control-filled-border-color: var(--color-neutral-500);\n --form-control-label-color: var(--color-neutral-700);\n --form-control-hint-color: var(--color-neutral-700);\n --form-control-icon-color: var(--color-neutral-700);\n\n /* Color - error */\n --form-control-error-color: var(--color-error-500);\n --form-control-error-label-color: var(--color-error-500);\n\n /* Color - disabled */\n --form-control-disabled-bg-color: var(--color-neutral-300);\n --form-control-disabled-color: var(--color-neutral-300);\n\n /* Sizes */\n --form-control-min-height: 48px;\n --from-control-legend-height: 11px;\n --form-control-input-padding: 0;\n --form-control-hint-fint-size: 10px;\n}\n\n.component {\n font-family: var(--font-family-system);\n width: max-content;\n color: var(--form-control-icon-color);\n\n &:after {\n content: '';\n display: block;\n clear: both;\n }\n\n & .inner {\n min-height: var(--form-control-min-height);\n }\n\n &.hasLeftIcon {\n & .label {\n left: var(--spacing-2);\n }\n\n & .filled .label {\n transform: translateY(\n calc(\n (\n (\n var(--form-control-min-height) / 2 +\n var(--from-control-legend-height) / 1.9\n ) * -1\n )\n )\n )\n translateX(calc(var(--spacing-8) * -1));\n }\n }\n\n & .label {\n color: var(--form-control-label-color);\n height: var(--from-control-legend-height);\n top: calc(var(--form-control-min-height) / 2);\n z-index: 1;\n }\n\n & .hint {\n color: var(--form-control-hint-color);\n }\n\n /*\n Disabled\n */\n &.disabled {\n color: var(--form-control-disabled-color);\n\n & .inner,\n & .inner:hover {\n & .fieldset {\n border-color: var(--form-control-disabled-bg-color);\n }\n\n & .label {\n color: var(--form-control-disabled-color);\n }\n }\n\n & .hint {\n color: var(--form-control-disabled-color);\n }\n }\n\n /*\n Error\n */\n &.hasError {\n & .inner,\n &:hover .inner {\n & .fieldset {\n border-color: var(--form-control-error-color);\n }\n }\n }\n\n & .inner.focused {\n & .fieldset {\n border-color: var(--form-control-focused-border-color);\n }\n }\n\n & .filled {\n & .fieldset {\n border-color: var(--form-control-filled-border-color);\n border-width: 1px;\n }\n\n & .legend {\n float: none;\n overflow: hidden;\n display: block;\n padding: 0;\n height: 11px;\n font-size: 0.75em;\n visibility: hidden;\n max-width: 100%;\n white-space: nowrap;\n }\n\n & .label {\n transform: translateY(\n calc(\n (\n var(--form-control-min-height) / 2 +\n var(--from-control-legend-height) / 1.9\n ) * -1\n )\n );\n\n @mixin typography-caption-2;\n }\n }\n}\n\n.inner {\n display: flex;\n position: relative;\n min-height: 100%;\n backdrop-filter: unset;\n box-sizing: border-box;\n outline: none;\n}\n\n.inputWrapper {\n flex-grow: 1;\n position: relative;\n}\n\n.input {\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n box-sizing: border-box;\n padding: var(--form-control-input-padding);\n}\n\n/*\n Label\n*/\n.label {\n position: absolute;\n display: flex;\n align-items: center;\n left: var(--spacing-4);\n right: 0;\n transform-origin: left top;\n transform: translateY(-50%);\n transition: transform 130ms cubic-bezier(0.4, 0, 0.2, 1),\n font-size 130ms cubic-bezier(0.4, 0, 0.2, 1);\n pointer-events: none;\n\n @mixin typography-subheading-4;\n\n line-height: 23px;\n\n & .labelInner {\n width: 100%;\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n/*\n Full width\n*/\n.fullWidth {\n width: 100%;\n}\n\n/*\n Addons\n*/\n.addons {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n}\n\n.leftIcon {\n padding-left: var(--spacing-4);\n}\n\n.rightIcon {\n padding-right: var(--spacing-2);\n}\n\n.rightAddons {\n padding-right: var(--spacing-4);\n}\n\n/*\n Focus state\n*/\n.focused:not(.disabled):before,\n.hasError:before {\n transform: scaleY(2);\n}\n\n/*\n Hint\n*/\n.sub {\n display: block;\n padding-left: var(--spacing-4);\n\n @mixin typography-caption-5;\n\n font-size: var(--form-control-hint-fint-size);\n}\n\n/*\n Error state\n*/\n.error {\n color: var(--form-control-error-color);\n}\n\n.inner:hover {\n & .fieldset {\n border-color: var(--form-control-hover-border-color);\n }\n}\n\n.fieldset {\n text-align: left;\n position: absolute;\n inset: -6px -1px -1px;\n margin: 0;\n padding: 0 12px;\n\n pointer-events: none;\n\n transition: border 0.1s ease;\n border-radius: inherit;\n border-style: solid;\n border-width: 1px;\n border-color: var(--form-control-base-border-color);\n\n overflow: hidden;\n min-width: 0%;\n}\n\n.legend {\n float: unset;\n overflow: hidden;\n display: block;\n width: auto;\n padding: 0;\n height: var(--from-control-legend-height);\n font-size: 0.75em;\n visibility: hidden;\n max-width: 0.01px;\n transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n white-space: nowrap;\n\n & > span {\n padding-left: 5px;\n padding-right: 4px;\n display: inline-block;\n opacity: 0;\n visibility: visible;\n }\n}\n"]}