@thoughtbot/design-system
Advanced tools
Changelog
[0.7.2] - 2021-10-21
Changelog
[0.7.1] - 2021-09-29
Changelog
[0.7.0] - 2020-03-05
https://unpkg.com/@thoughtbot/design-system@0.7.0/dist/tbds.css
.Changelog
[0.6.0] - 2020-03-03
$tbds-brand-gray-medium
$tbds-brand-gray-light
$tbds-brand-gray-ultra-light
$tbds-brand-purple
$tbds-brand-yellow
$tbds-brand-yellow-light
display: none !important;
to the [hidden]
attribute selector
to ensure that elements using the HTML hidden
attribute are
actually hidden.$tbds-brand-gray
is now $tbds-brand-gray-dark
.$tbds-brand-blue
is now #2e52e4
.Changelog
[0.5.0] - 2019-09-19
Changelog
[0.4.0] - 2019-09-09
$tbds-control-block-size
to set controls (text inputs and buttons) to
the same block size.auto
(e.g. tbds-margin-inline-auto
).tbds-form
elements (e.g. tbds-form__text-input
), you now must
ensure that the parent <form>
has the tbds-form
class.--border-radius
custom property in the tbds-avatar
component was
renamed to --tbds-avatar-border-radius
.--size
custom property in the tbds-avatar
component was
renamed to --tbds-avatar-size
.--size
custom property in the tbds-icon
component was
renamed to --tbds-icon-size
.--gap
custom property in the tbds-block-stack
component was
renamed to --tbds-block-stack-gap
.--gap
custom property in the tbds-inline-stack
component was
renamed to --tbds-inline-stack-gap
.Changelog
[0.3.0] - 2019-06-19
Added the tbds-line-height-0
utility class.
Added breakpoint variants for the margin
, padding
, and text-align
utility classes, e.g. tbds-margin-right-4@medium
and tbds-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-*
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 example width
is now inline-size
and height
is now
block-size
. The following classes were updated to match the new syntax:
tbds-text-align-left
is now tbds-text-align-start
tbds-text-align-right
is now tbds-text-align-end
tbds-margin-top-*
is now tbds-margin-block-start-*
tbds-margin-right-*
is now tbds-margin-inline-end-*
tbds-margin-bottom-*
is now tbds-margin-block-end-*
tbds-margin-left-*
is now tbds-margin-inline-start-*
tbds-padding-top-*
is now tbds-padding-block-start-*
tbds-padding-right-*
is now tbds-padding-inline-end-*
tbds-padding-bottom-*
is now tbds-padding-block-end-*
tbds-padding-left-*
is now tbds-padding-inline-start-*
tbds-button__icon--text-to-left
is now tbds-button__icon--end
tbds-button__icon--text-to-right
is now tbds-button__icon--start
tbds-media--vertical-center
is now tbds-media--block-center
Changelog
[0.2.0] - 2019-05-10
tbds-inline-stack
component.tbds-block-stack--bordered
.tbds-icon
component for simple iconsbreakpoints
to settings module which provides a few basic media
queries$tbds-blue
is now $tbds-brand-blue
, and its value changed from #1568c1
to #0b758c
.tbds-stack
is now tbds-block-stack
tbds-form__row
has been removed. Use the Stack component instead to achieve
the same layout.Changelog
[0.1.0] - 2019-04-19
@thoughtbot/tbds-button
)
in favor of one primary package (@thoughtbot/design-system
).