Releases: thoughtbot/design-system
Releases · thoughtbot/design-system
Release list
v0.7.2
v0.7.1
Changed
- Update documentation to include links to the Figma library
- Upgrade the project dependencies
- Update project default branch to 'main'
v0.7.0
v0.6.0
Added
- Added more brand color variables, to match our
Brand Guidelines:$tbds-brand-gray-medium$tbds-brand-gray-light$tbds-brand-gray-ultra-light$tbds-brand-purple$tbds-brand-yellow$tbds-brand-yellow-light
- Added
display: none !important;to the[hidden]attribute selector
to ensure that elements using the HTMLhiddenattribute are
actually hidden.
Changed
- Link underlines are now removed on state change (hover & focus).
$tbds-brand-grayis now$tbds-brand-gray-dark.- The value of
$tbds-brand-blueis now#2e52e4.
v0.5.0
v0.4.0
Added
- Added
$tbds-control-block-sizeto set controls (text inputs and buttons) to
the same block size. - Margin utilities now include
auto(e.g.tbds-margin-inline-auto).
Changed
- When using
tbds-formelements (e.g.tbds-form__text-input), you now must
ensure that the parent<form>has thetbds-formclass. - The
--border-radiuscustom property in thetbds-avatarcomponent was
renamed to--tbds-avatar-border-radius. - The
--sizecustom property in thetbds-avatarcomponent was
renamed to--tbds-avatar-size. - The
--sizecustom property in thetbds-iconcomponent was
renamed to--tbds-icon-size. - The
--gapcustom property in thetbds-block-stackcomponent was
renamed to--tbds-block-stack-gap. - The
--gapcustom property in thetbds-inline-stackcomponent was
renamed to--tbds-inline-stack-gap.
v0.3.0
Added
-
Added the
tbds-line-height-0utility class. -
Added breakpoint variants for the
margin,padding, andtext-align
utility classes, e.g.tbds-margin-right-4@medium
andtbds-text-align-right@large. -
Added
inline-size(width) utility classes (e.g.tbds-inline-size-25%)
for the following lengths:20%25%33.3333%40%50%60%66.6666%75%80%100%
Breakpoint-based variants are also available
(e.g.tbds-inline-size-25%@medium). -
Added utility classes for margin and padding block & inline shorthands:
tbds-margin-block-*tbds-margin-inline-*tbds-padding-block-*tbds-padding-inline-*
Changed
-
tbds-app-frame__body--vertical-middlewas renamed to
tbds-app-frame__body--center-items -
Layout properties and values now use logical dimensions instead of physical
dimensions, for examplewidthis nowinline-sizeandheightis now
block-size. The following classes were updated to match the new syntax:tbds-text-align-leftis nowtbds-text-align-starttbds-text-align-rightis nowtbds-text-align-endtbds-margin-top-*is nowtbds-margin-block-start-*tbds-margin-right-*is nowtbds-margin-inline-end-*tbds-margin-bottom-*is nowtbds-margin-block-end-*tbds-margin-left-*is nowtbds-margin-inline-start-*tbds-padding-top-*is nowtbds-padding-block-start-*tbds-padding-right-*is nowtbds-padding-inline-end-*tbds-padding-bottom-*is nowtbds-padding-block-end-*tbds-padding-left-*is nowtbds-padding-inline-start-*tbds-button__icon--text-to-leftis nowtbds-button__icon--endtbds-button__icon--text-to-rightis nowtbds-button__icon--starttbds-media--vertical-centeris nowtbds-media tbds-media--block-center
Fixed
- Fixed button icon alignment.
v0.2.0
Added
- Global variables for styling focus outlines.
tbds-inline-stackcomponent.- The block stack component now has a modifier to add a border between each
item:tbds-block-stack--bordered. - Added
tbds-iconcomponent for simple icons - Added
breakpointsto settings module which provides a few basic media
queries
Changed
$tbds-blueis now$tbds-brand-blue, and its value changed from#1568c1
to#0b758c.tbds-stackis nowtbds-block-stack
Removed
tbds-form__rowhas been removed. Use the Stack component instead to achieve
the same layout.