Changelog

Version 1.6.1

NEW: Added new component: Number Count

Number count is a Finsweet attributes component which counts from an initial value to an end value. Used primarily as a way to decorate stat blocks or other numerical values
Light and dark theme support for this component is available

NEW: Added new component: Combo Box

Combo box is a Finsweet attributes component which is a combination of a dropdown list and an editable text input. Users can search for options and enter a value that isn't in the list

Version 1.6.0

NEW: Added new design documentation inside of RedTag WDS Style System for Figma

Design-specific documentation has been added to the style system template file. Will be used for future web projects

UPDATES: Added dark modes to components

Added dark mode to the following components: Accordion, Avatar (all variants), Card (all variants), Tabs, Tooltip
Dark mode is tied to universal "dark-theme" class that can applied to any element and have specific overrides to the combo class per component

UPDATES: Added tint versions of Alert and Toast components

Added new "low-priority" tint versions of Alert and Toast components

Version 1.5.4

UPDATES: Updated global color styles

Updated color styles to use unified tints and shades using pure black and white values. This makes it so that changing semantic colors

NEW: Added new blur classes under effects category

Added new blur classes that utilize the backdrop-filter CSS property to apply different levels of background blur to elements. Classes have a prefix of b-blur-[value]
Added new supplemental background-color class that pairs with these classes called
bg-color-blur (White set at 10% opacity) so that blur can be visible on screen

UPDATES: Updated button component

Changed default (medium) button height from 3rem (48px) to 2.75rem (44px)
Changed small button height from 2.5rem (40px) to 2rem (32px)
Changed small button font-size from 0.875rem (14px) to 0.75rem (12px)
Changed small button left/right padding from 0.5rem (8px) to 0.75rem (12px)
Changed large button font-size from 1.125rem (18px) to 1.25rem (20px)
Changed large button left/right padding from 2rem (32px) to 1.25rem (20px)

Version 1.5.3

‍UPDATES: Updated text styles

Added new display text style: "display-xl." Font size is set to 84px (5.25rem) on desktop and 64px (4rem) on mobile
Adjusted line-height on certain text styles
Adjusted color styles on some dark-mode components

UPDATES: Updated color styles and classes

Slowing phasing out text-color-base-03 in favor of having two light theme text color and two dark theme text colors
Renamed text-color-white to "text-color-white-01"
Added new alias text color class "text-color-white-02." Uses White color set to 80% opacity
Added universal combo class for dark theme called "theme-dark"

UPDATES: Added variants to Navigation and Form components

Added new dark variants on Link and Breadcrumb components using the theme-dark combo class. Additional styles for breadcrumbs have been added to the global-styles embed
Added variants to Input / Text (all versions), Input / Textarea, and Input / Select with Form Labels and Helper Text

Version 1.5.2

NEW: New component: Segmented Control

Segmented control is used as a lower-priority version of the tabs component, used mainly to toggle between different states or views within a component
Can be both single-select or multi-select depending on use case. Single-select should be the default behavior
Maximum of 5 items per Segmented Control component. For more than 5 items, use another component such as a Dropdown Button
Requires a Javascript class switching library such as the Class Adder library by finsweet for full functionality in the interface

NEW: New component: RedTag Bar

Migrated the RedTag attribution bar component from previous components file
Comes in 2 versions: Light and Dark. Colors are unique to RedTag and are not linked to Global swatches
Spacing on component has been modified to used REM units instead of pixels. Vertical padding has been changed from 16px to 0.75rem (12px)

UPDATE: Updated tertiary and ghost buttons

Modified states on both tertiary and ghost buttons to modify only the box-shadow property. Button type backgrounds remain transparent during all component states
Tertiary buttons now have box-shadow, acting an outline button rather than a text button
Ghost button text and box-shadow state colors have been modified: default state has been changed from Neutral 05 to Primary 05, hover state has been changed from Neutral 10 to Primary 10, and pressed state has been changed from Neutral 20 to Primary 20

Version 1.5.1

FIX: Updated button structure so that buttons can have their link settings editable in the Editor

Using the "Edit Link Blocks in Editor" from the finsweet Attributes library, all text buttons have been rebuilt using div blocks with text attributes instead of using link blocks.
Button styles, functionality, and component props should remain unchanged. If you manage to find anything that is missing, please let me know so it can be fixed

UPDATE: Updated URLs for both the Starter Template and the Docs websites. The URL for the Starter template is www.redtag-wds-starter-template.webflow.io and the new URL for the Docs is www.redtag-wds-docs.webflow.io. This was done to make the URLS have consistent naming structure and to shorten the length of the URL when typing it out by hand or for distribution between two or more parties.

UPDATE: Separated Alert notification component from Banner component

Added new component: Alert. The component has been separated from Banners as they serve different purposes within the UI. Alerts are for inline notifications while Banners span the full width of the viewport
Banners have 4 new versions: Success, Warning, Danger, and Info

UPDATE: Updated secondary, tertiary, and ghost button styles

Updated secondary, tertiary, and ghost button styles to better match the primary button
Changed default background values on secondary and tertiary buttons from Neutral 10 to Primary 05
Secondary Button: Changed secondary button hover and pressed background colors from Neutral 20 to Primary 10 and Neutral 30 to Primary 20 respectively. Changed secondary button default, hover and pressed text colors from Neutral 90 to Primary 50, Neutral 90 to Primary 60, and Neutral 90 to Primary 80. Changed secondary button default, hover, and pressed box-shadow colors from Neutral 30 to Primary 50, Neutral 50 to Primary 60, and Neutral 60 to Primary 80

Ghost Button: Changed ghost button hover state background color from transparent to Primary 50 and changed ghost button hover text color from Neutral 10 to Primary 50. Changed ghost button pressed background color from transparent to Primary 10 and changed ghost button pressed text color from Neutral 10 to Primary 60

Version 1.5.0

NEW: Added new category of CSS classes: Borders

Added new classes for controlling the border-width property. Border-width classes have values for the following sizes: 0px, 1px, 2px, 4px, 8px, 12px, and 16px. Border-width classes can also be applied to any side of an element (i.e. border-t-16 applies a 1rem (16px) border to the top of the element) Border-width classes have been decoupled from border-color so that it inherits color from the Body (All Pages). Border-color can be applied separately as a combo class
Added new classes for controlling the border-style property. Border-style classes have values for the following values: solid, dashed, dotted, and none.
Decoupled border-width value from all border-color classes. Applying a border-color class should now only affect border-color and should not affect or reset border-width to 1px
Re-tweaked border-radius classes. Radius no longer uses small, medium, large naming system and now follows a similar naming system to other border classes

NEW: Added new variants to Nav Menu and Dropdown / Inline components

Added white versions of the Dropdown / Inline and Nav Menu components. These are variants of each component meant to be used on darker backgrounds

UPDATES: Documentation site has been updated to Version 1.2.0: View Docs

Docs site now features a new page under the foundations category named "Border" which contains all newly added class related to the border property

UPDATES: Updated style guide page

Adjusted the way that logos are displayed under Brand / Logos. Now split into a 4-column grid with 2 lockups. Each lockup has the opportunity to have a dark and light version of the logo displayed on the style guide

Version 1.4.1

Added additional functionality to the Style Guide

Added a "color picker" div block underneath the color grid to make transferring large amounts of color swatches easier for the developer

Updated typography styles

Changed font size for H1 headings and .heading-xl from 2.5rem (40px) to 2.75rem (44px)

Version 1.4.0

NEW: System documentation site is now live: www.redtag-wds-docs.webflow.io

NEW component: Nav Menu

Added styles for the navigation element from the Webflow elements panel.
Can be found under the dropdown component category under 02_Navigation

NEW text styles: label-l, label-m, and label-s

New label text styles have been added for further custom component creation
Can be found in the style guide page at the bottom of the text styles list under Overline and Caption

NEW text styles: blockquote

Added new blockquote style separate from the Block Quote element.
Inherits the same text style as the Block Quote element without the added spacing and border

Updated text styling of both versions of the block quote:

Changed font-size from 1.25rem to 1.5rem
Changed line-height from 1.5- to 1.625-
Changed font-weight from 400 to 500
Changed font-size from normal to italic

Updated Accordion:

Redesigned the component to use div blocks instead of List element
Accordion component now displays 5 accordion items by default instead of 3 items

Updated Modal:

Restyled the component so that the modal appears larger and show more priority
Functionality and interactions are now powered using finsweet's Attributes library
Clicking outside of the modal now closes the modal in addition to just clicking the "x" icon in the top right-hand corner of the modal

Updated Checkbox Card and Radio Button Card:

Added active state functionality using finsweet's Attribute library
Active state changes the background and text color of the active input for both the checkbox card and radio button card components

Updated Input / Search:

Moved Input / Search from Input / Text to its own category
Can be found after Range Slider component category under 03_Form

Updated Chip:

Changed default background color of both chip styles from Neutral 40 to Neutral 30 to make text inside component more legible
Changed selected background color from Primary 50 to Neutral 70 to make it look less like a button component

Updated Badge:

Changed default badge background color from Neutral 40 to Neutral 30

Updated Warning styles:

Changed default text color on warning backgrounds from Neutral 90 to White
Changed default text color on warning Alert Banner from Neutral 90 to White
Changed default text color on warning badge from Neutral 90 to White
Fixed spelling error under Badge / Warning / Tint (was previously /TInt)

Updated Styleguide / Footer

Updated Year from 2022 to 2023
Added additional copyright information to legal text

Added additional text utility classes to the style guide:

text-style-italic
text-style-none
text-decoration-overline
text-decoration-none
text-transform-none

Version 1.3.3

Updated Badge component

Updated text color on Badge Tint variants to better comply with WCAG color contrast guidelines

Updated Chip component

Changed background color on active state from Neutral / 90 to Primary / 50

Updated Style Guide

Fixed an issue involving duplicate IDs cause by not renaming the Pagniation section ID
Updated sidebar navigation to include the Pagination component under Data-display

Version 1.3.2

Changed Info Global Color Swatches

Updated all base Info color swatches to make it more distinct from the base Success color swatches.

Version 1.3.1

Added new component variant added for the Card component: "Card / Flag", a horizontal card layout

New variant comes with two different alignment options, Left and Right
Component is built for responsive layout

Added .aspect-ratio properties to .card-image inside of all Card components

Card / Basic and Card / Box use aspect-ratio: 3 / 2; for all breakpoints
Card / Flag uses aspect-ratio: 1 / 1; at desktop and tablet breakpoints and switches to aspect-ratio: 3 / 2 for mobile breakpoints
CSS properties can be found at the bottom of the embed-global-styles code embed inside of the Styles / Global global component and can be modified to fit any project

Added new component: "Pagination"

Pagination is structured based off the the Jetboost Advanced Pagination and not based off of the default CMS pagination. This was done to have higher control over the design as well as to go along with projects that utilize Jetboost
Current and total page count use Jetboost classes ".jetboost-current-page" and "jetboost-total-pages" to help ease you along when re-creating this component in your projects
Pagination is styled off of the default "Seamless Pagination" settings

Version 1.3.0

*NEW* Added new Webflow component properties to the following components:

Button
Link
Breadcrumb
Avatar
Badge
Card
Banner
Toast

Cleaned up Components (Symbols) panel

Removed unused and deprecated components
Removed duplicate instances that are no longer required (Ex. Button / Icon Right)

Version 1.2.3

Updated Global Color Swatches

Adjusted all global color swatches to serve better in aiding accessibility as well as to fit in more with more project types
Changed bg-color-base02 from Neutral 30 to Neutral 20
Changed border-color-base01 from Neutral 40 to Neutral 30
Changed text color for bg-color-success, bg-color-danger, and bg-color-info from Neutral 90 to White
Updated naming convention of color swatches to match Figma color descriptions. Removed "/" from color swatch names

Updated Accordion component

Removed hover and focus state from accordion-toggle and moved it to the accordion-item
Removed padding from accordion-toggle and accordion-content and moved it to accordion-item
Removed accordion-content-inner div block
Removed border-top from accordion-item
Changed accordion and accordion-item border color from Neutral 40 to Neutral 30
Added background color of White to accordion
Added border of Neutral 30 to accordion
Added border-radius of 0.5rem to accordion

Updated Range Slider component

Changed background color on range-slider-track from Neutral 40 to Neutral 20

Updated Badge component

Changed default badge background color from Neutral / 50 to Neutral / 40
Changed default badge text color from Neutral / 80 to Neutral / 90
Changed all badge tint background colors from [color (ex. Primary)] / 20 to [color] / 10
Changed badge-success and badge-info text color from Neutral / 90 to White

Updated Card component

Changed hover state text color from Primary 60 to Primary 50 on card

Updated Table component

Changed table-header background color from Neutral 30 to Neutral 20

Updated Alert component

Changed alert-success and alert-info text color from Neutral 90 to White

Version 1.2.2

Added new documentation for global color styles in the colors section of the style guide page.

New documentation that explains the usage and naming structure of background, text, and border color styles

Version 1.2.1

Added new component: "Icon List"

A new variant of the other list components that uses an icon in the place of a bullet point or number
Icon List is built off of the unstyled list component and does not have any visible bullet points
Icon is placed to the left of the list text inside of a parent "list-wrapper" div block and has a "text-color-primary" class to give it its primary color styling

Version 1.2.0

Updated color styles to better match the Figma Design System template:

Color system now used an updated form of color mixing that utilizes the full palette to create additional color tones

Updated Accordion component styles:

Changed default height of Accordion Trigger from 3rem to 4rem
Changed ".accordion-trigger" padding from padding: 1.25rem 0.75rem to padding: 1rem
Changed ".accordion-content" padding from padding: 1.25rem 0.75rem to padding: 1rem 1.5rem

Changed default Link color from "Primary 60" to "Primary 50"

Added default page styles to Utility pages:

404 page
Search results page
Password protected page

Re-arranged Form components order on the Components page

Matches order inside of Figma instead of being purely alphabetical.
New order goes as follows: "Input, Textarea, Select, Checkbox, Radio, Switch, Range Slider"
Changed "Radio Button" to "Radio" on the Components page (not on the symbol)
Chaned "Text Input" to "Input" on the components page (not on the symbol)