# Primitives Primitives are the building blocks of WedgeKit components. They are largely settings or wrapper components designed for keeping all WedgeKit components consistent in a composable and discoverable way. ## Usage ```typescript static import settings from '@wedgekit/primitives'; ``` ## Settings `@wedgekit/primitives` exports a settings object as its default export. These settings are intended to enforce consistency across `wedgekit` and A2W apps. The following settings are included in the settings object: **animations** transitions for `transform`, `box-shadow`, and `border` are included in `settings.animations` **base** base is a set number of pixels that all sizes in `wedgekit` and A2W apps should be based on; inspired by Evergreen UI's [major scale](https://evergreen.segment.com/foundations/layers#recommendation:_use_the_8px_major_scale_grid) **border** provides `width` and `radius` settings **colors** contains `status` color codes **cursor** the CSS styles for `disabled` and `readOnly` **font** `code` font settings **fontFamily** a CSS complaint `font-family` string **fontSize** provides sizes for the following: - label - link - body - bodySmall - input - tooltip - h1 - h2 - h3 - h4 - h5 - h6 **fontWeight** provides font-weights for `title`, `normal` & `link` **tabIndex** the tabIndex for `disabled` for those who strongly prefer package exports over extremely trivial code **widths** inexplicably the widths for `toast` and `multiselect-card` are in settings and not in their respective components **zindex** z-index values for `modal` and `header` ## Mixins ### BackgroundMixin Background for form elements #### Props **disabled** required: ❌ type: `boolean` **invalid** required: ❌ type: `boolean` **readOnly** required: ❌ type: `boolean` ### CursorMixin Same... I think this is a cursor mixin for use with inputs. #### Props **disabled** required: ❌ type: `boolean` **invalid** required: ❌ type: `boolean` **readOnly** required: ❌ type: `boolean` ### InputBorderMixin I _know_ this one is for inputs. **disabled** required: ❌ type: `boolean` **invalid** required: ❌ type: `boolean` **readOnly** required: ❌ type: `boolean` **status** required: ❌ type: `'default' | 'error' | 'success' | 'pending'` **wrapsGroup** required: ❌ type: `boolean` ### InputFocusMixin Wipes out existing browser styling(?) ### OptionMixin a mixin for checkboxes and radio inputs which handles hover and focus-within styling #### Props **active** required: ❌ type: `boolean` **disabled** required: ❌ type: `boolean` ### PopoverShadowMixin It's a shadow mixin for popovers. Which is not in the popover package because it's so versatile. #### Props **disabled** required: ❌ type: `boolean` **invalid** required: ❌ type: `boolean` **status** required: ❌ type: `'default' | 'error' | 'success' | 'pending'` **readOnly** required: ❌ type: `boolean` **wrapsGroup** required: ❌ type: `boolean` ### UpdatedInputMixin It's updated, which is how you know its the right one. Unless there's an updatedUpdatedInputMixin of course, in which case please use that instead. #### Props **disabled** required: ❌ type: `boolean` **fullWidth** required: ❌ type: `boolean` **invalid** required: ❌ type: `boolean` **labelHidden** required: ❌ type: `boolean` **labelInline** required: ❌ type: `boolean` **status** required: ❌ type: `'default' | 'error' | 'success' | 'pending'` **readOnly** required: ❌ type: `boolean` ## Animations ### withUpDown `withUpDown` is a React [HOC](https://reactjs.org/docs/higher-order-components.html) which has a `direction` prop which can be set to `up` or `down`. It will transform the content 180 degrees when `direction` is `up`