Releases: thoughtbot/design-system
Releases · thoughtbot/design-system
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 HTMLhidden
attribute are
actually hidden.
Changed
- Link underlines are now removed on state change (hover & focus).
$tbds-brand-gray
is now$tbds-brand-gray-dark
.- The value of
$tbds-brand-blue
is now#2e52e4
.
v0.5.0
v0.4.0
Added
- Added
$tbds-control-block-size
to 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-form
elements (e.g.tbds-form__text-input
), you now must
ensure that the parent<form>
has thetbds-form
class. - The
--border-radius
custom property in thetbds-avatar
component was
renamed to--tbds-avatar-border-radius
. - The
--size
custom property in thetbds-avatar
component was
renamed to--tbds-avatar-size
. - The
--size
custom property in thetbds-icon
component was
renamed to--tbds-icon-size
. - The
--gap
custom property in thetbds-block-stack
component was
renamed to--tbds-block-stack-gap
. - The
--gap
custom property in thetbds-inline-stack
component was
renamed to--tbds-inline-stack-gap
.
v0.3.0
Added
-
Added the
tbds-line-height-0
utility 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-middle
was renamed to
tbds-app-frame__body--center-items
-
Layout properties and values now use logical dimensions instead of physical
dimensions, for examplewidth
is nowinline-size
andheight
is now
block-size
. The following classes were updated to match the new syntax:tbds-text-align-left
is nowtbds-text-align-start
tbds-text-align-right
is nowtbds-text-align-end
tbds-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-left
is nowtbds-button__icon--end
tbds-button__icon--text-to-right
is nowtbds-button__icon--start
tbds-media--vertical-center
is nowtbds-media tbds-media--block-center
Fixed
- Fixed button icon alignment.
v0.2.0
Added
- Global variables for styling focus outlines.
tbds-inline-stack
component.- The block stack component now has a modifier to add a border between each
item:tbds-block-stack--bordered
. - Added
tbds-icon
component for simple icons - Added
breakpoints
to settings module which provides a few basic media
queries
Changed
$tbds-blue
is now$tbds-brand-blue
, and its value changed from#1568c1
to#0b758c
.tbds-stack
is nowtbds-block-stack
Removed
tbds-form__row
has been removed. Use the Stack component instead to achieve
the same layout.