We've updated framework integrations guidelines and moved them to a separate documentation section on the website. All example projects have been updated with the latest dependencies and their setup has been simplified.
In addition to that, we have added Gatsby starter example and documentation. Check its documentation in the Integrations sections in our docs.
In this release, we've updated the way you can add custom themes. Instead of working with createTheme and createThemeFragment functions, themes are created from an arcade.config.js file. You can store in the root level of the repository or provide a custom path to our theming CLI.
This release is the first one to include Arcade Figma library which is available for both regular and source code licenses. Library consists of 3 files that include:
With the help of Figma Themer plugin, you'll be able to design your product just once and switching to dark mode will happen automatically without any manual customisation. This works not only with Arcade components but also with any custom component you create yourself.
Along with Figma release, we're also updating our pricing tiers.
First of all, even though we're adding Figma library to the list, we're keeping our single seat license to $79 while we're getting closer to v1.0 release of Arcade. Shortly after the release its price is going to raise to $99.
Team licenses now scale based on the amount of seats you purchase with increasing discounts which means now you get a better deal for 2-3 people teams.
On top of that we're adding two new tiers:
In this release, we've updated the way we generate output of the theming engine and the way themes are used in the code. We've moved away from theme components and ColorMode utility to a single ThemeProvider component that works with both, scoped themes and color modes. This allowed us to avoid additional rerenders of the app when a theme changes and reduced the complexity of theming in general.
For the cases where using our ESM build output is not possible, we're now additionally providing Arcade JS and CSS bundles. This will disable regular tree-shaking of the modules but makes it possible to use the library in environments that currently don't support CSS imports from within node_modules. However this shouldn't affect the performance much considering that current library total size is lest than 40kb including both CSS and JS.
To use the bundles, you can import them directly from the package. Note that you will need to import styles just once.
After 3 months of design work we're finalising our Figma library with all the components moving into testing phase. All components are designed with variants, auto-layout and paying incredible attention to handling composition of components the same way you would do that in code. Both React and Figma libraries are perfectly aligned so anything you can design with Arcade Figma library - you can immediately implement in code with no problems.
We have revamped our design tokens documentation and added visual examples for all Arcade tokens. Every token type now has a separate page, going through their values and guidelines on how to use them.
We've made an major update to our documentation layout to let you discover the information you're looking for faster. Some of the highlights are:
During the past two weeks we have been improving the Arcade onboarding experience for some of the most popular front-end frameworks and bundles. So far we have prepared 4 starter examples for Parcel, Webpack, NextJS and Create React App as well as few demos with more advanced examples.
As a way to support NextJS users, we've also published an Arcade Next CSS plugin to enable CSS setup out of the box.
We have passed 50% of our Figma library progress with 12 components and design token library ready. Everything is already built with theming/dark mode support, using auto-layout and providing variants for every component.
If you want to track the progress, you can do that in our Github project board.
When using colors as variables in CSS, you would usually hit a wall when you want to apply custom opacity values to them. The only way to combine a color variable with opacity is to use it with rgba() color function in CSS.
In order to support this case, we've added auto-generation for rgb values of the background color tokens. They use similar names to background token names with an additional rgb prefix:
Note that the variable stores only the rgb values themselves but doesn't wrap it with a function. This means you can now use it together with rgba() color function in your css:
On the hompage, we now have a video demo for those who want to take a look of how the development process looks like. In the demo we are building a social media card with some common layouts and interactive behavior that you would usually see in your day-to-day job. Additionally, we show how theming and dark mode work with no extra effort or requirements to write custom styling logic on your side.
While building interfaces we have to implement complex behaviors like modal being opened from a dropdown. Both of these components should trap the focus and return it back to the trigger element when closed. Starting with this release with support chained trap focus. It will return the focus back to the correct trigger even if some of the trigger elements are no longer rendered on the screen.
For example, try going through the whole flow using your keyboard in the following example. Once you close the modal, focus will return to the "Open menu" button.
Hint: Click near the button first and press Tab, to focus on the button using keyboard.
Our homepage has been completely revamped to put emphasize on the newly released features, including our recent theming engine. You can try applying one of the 3 demo themes to our whole website, including their light and dark modes.
Stack is the core of any layout you build, and we want it to be as flexible as possible. Starting with 0.9.0 we are using CSS variables to work with responsive styles, and we've started with Stack component integration. Till now, we've only supported a limited number of values that you could use as gap property because its styles have been predefined in CSS. With the new responsive CSS variables, we're changing gap property to support any numerical value as a multiplier of the base unit token.
This change includes both, regular and responsive properties, which means you can pass any number you want for every viewport size:
With this new approach, we're shipping a couple more features for the Stack component:
We've moved away from supporting RTL during build step with a PostCSS plugin and are using CSS logical properties now instead. This takes us one step closer to moving away from CSS build step and using completely native CSS. Additionally, this update helped us improve a handful components and how they render in RTL mode.
We have added size-limit integration to our merge requests which lets us track all the bundle size changes as one of our main metrics. For example, even after introducing all these new features and responsive styles, we have actually reduced our total bundle size by 2kb down to 41kb.
We're finally releasing out theming engine, including completely typed JS API and CLI to build themes using Arcade design tokens. Writing your theme definition once will build a React component for you that's ready to be imported into your application. Among other features its main highlights are:
For this release we've built our first demo of a page using Arcade. It's aiming to provide a publicly available example of a project setup as well as giving a hint about how building interfaces with Arcade looks like.
We've started supporting more scenarios for responsive development. In this release we're adding another viewport support to differentiate between portrait and landscape tablet modes. This means that our viewport media queries names have been updated accordingly:
To make the components easier to use with 4 viewports available, we're also switching from array notation to an object notation for the responsive properties. Since we use mobile-first approach, you don't have to define values for every viewport manually. For example, you can set the Stack gap to be x2 by default and change to x4 starting with large viewport size.
We've completely rebuilt our Stack component from ground up to cover a huge number of new edge cases. Most of our focus went into improving nested stacks, edge cases for specific components and reducing the number of elements rendered per every stack:
We've also tried using the new gap API for flexbox which turned out not so well, due to the limited Safari support and some webkit bugs that have to be fixed first. Once the state of the API becomes more stable, we will immediately migrate to it.
Tabs get 2 new variants to support new UI scenarios. borderless is helpful when it's used with parent component that provides its own border already. pills variant is used for less prominent secondary navigation.
We release Progress component to the progress status for a task that takes a long time or consists of several steps. In some cases it can be used for other types of context, like displaying the score values etc.
We release Tabs component to let you organise navigation between multiple pages or content sections. Its compound components approach lets you easily build custom tab panels or add animation to them, and it's responsive out-of-the-box. Read more about it in its documentation.
We're adding a DropdownMenu component built on top of Popover to simplify the process of building action menus. It works with a similar API as Popover does, however it encapsulates some of its logic, which means you don't have to pass all the right props and aria attributes to Popover manually. Read more about it in its documentation.
We have published and documented 6 hooks provided by the library. Together with our utility components they should close the gaps and let you build custom components using the Arcade context data:
After a year in the making, the first release of the Arcade is now available for everyone to use. We're starting by releasing v0.1.0 with 31 components, utilities and their documentation. If you're just starting with the library, start with the Overview page from the menu on the left. We hope you enjoy using Arcade and are already looking forward to get the next release out of the door! 🕹️