v2.1.0

What's Changed

Breaking Changes

• [OP-200] Move fonts to their own files by @Jeremy-Walton in #271

  • In order to better allow customization and configuration, the CDN font imports have been moved out of the base tokens and icon files and into their own files under src/core/fonts. src/core/fonts/text_fonts.css and src/core/fonts/icon_fonts.css respectively.
  • If you are using selective imports or are not using the main file import, you may need to add an import for the fonts to ensure your app is still loading them correctly.

  /* Third party Vendors */
  @import 'modern-css-reset/dist/reset';
  
  /* Fonts */
  @import 'core/fonts'; /* This is new! */
  
  /* Tokens */
  @import 'core/tokens';
  
  /* Base styles and utilities */
  @import 'core/base';
  @import 'core/layout';
  @import 'core/utilities';
  
  /* Components */
  @import 'components';

• [OP-195] Icon improvements by @Jeremy-Walton in #272

  • The default variable icon font loaded for Material Symbols Outlined has been changed to only include the weight axis. This is to reduce load times for apps that don't need it or are using an alternate font. This can be reset back to previous behavior by including @import '@rolemodel/optics/dist/css/addons/fonts/material_symbols_outlined_variable.css'; just like the new icon packs shown below.
  • The implementation of Icon has been reworked to allow for better customization, overriding, and extensibility. It's API of variables matches other components to allow for this.

  /* Weight */
  --_op-icon-weight-light
  --_op-icon-weight-normal
  --_op-icon-weight-semi-bold
  --_op-icon-weight-bold
  
  /* Fill */
  --_op-icon-fill-outlined
  --_op-icon-fill-filled
  
  /* Emphasis */
  --_op-icon-emphasis-low
  --_op-icon-emphasis-normal
  --_op-icon-emphasis-high
  
  /* Size */
  --_op-icon-font-size-small
  --_op-icon-font-size-medium
  --_op-icon-font-size-large
  --_op-icon-font-size-x-large
  --_op-icon-optical-size-small
  --_op-icon-optical-size-medium
  --_op-icon-optical-size-large
  --_op-icon-optical-size-x-large

  • If you are customizing icons, have a look at the current implementation to see what your refactor should match.
  • Using the Icon classes has slightly changed. Your modifiers work the same, but the base class has been extracted to be .icon The Material Symbols specific behavior lives apart from icon generic behavior. This allows for alternative icon libraries.
  • Old usage <span class='material-symbols-outlined icon--x-large icon--weight-bold'>settings</span>
  • New usage <span class='material-symbols-outlined icon icon--x-large icon--weight-bold'>settings</span>
  • If you are using an icon helper, you will need to update it to include the .icon class. If you are in a Rails context, The icon generator in RoleModel Rails) has been updated to support all the new fonts

Component Changes

• [OP-195] Icon improvements by @Jeremy-Walton in #272

  • The Icon API has been reworked to better match other components. This means it is easier to override and customize aspects of the icon like the sizes or other modifiers and what values they have.
  • Icons now support the .icon--small modifier for using smaller icons

• [OP-28] Custom Icon Support by @Jeremy-Walton in #273

  • Optics now supports four new Icon Libraries!
    • Phosphor
    • Tabler
    • Feather
    • Lucide
  • Simply add an import for the specific library @import '@rolemodel/optics/dist/css/addons/fonts/phosphor_icons';
  • Usage will look like <i class='ph ph-smiley icon--x-large icon--weight-thin'></i> but will vary for each Library
  • See the documentation for specifics implementation details and which icon modifiers are supported in each library.
  • If your app is built on Rails and you are using RoleModel Rails, the Icon Generator now prompts you for which icon library you are using and generates the correct helper methods for you.

Full Changelog: v2.0.1...v2.1.0