Spectre.css changelog

v1.0.0-beta #

Update Spectre.css documentation.
Update spectre.scss by adding $color-scheme and include mixins. 1f8c8ed
Add dark/light/normal color themes (mixins, functions) depending on the $color-scheme Sass variable.
- Add spectre-dark.scss spectre-light.scss with dark and light color schemes.
CSS variables.
- CSS color variables are set from the $theme-dark $theme-light $theme-normal Sass variables by the set-color() mixin in the one file _colors.scss giving the ability to add new colors to the themes.
  - Dark theme CSS variables are set under the prefers-color-scheme: dark on $color-scheme Sass variable set to dark or light dark.
  - Light theme CSS variables are set under the prefers-color-scheme: light on $color-scheme Sass variable set to light or light dark.
  - Normal theme CSS variables are set when the dark and light theme is not set and the $color-scheme Sass variable is set to normal.

Related commits: e368c80

Variables
- Move Sass variables from the _variables.scss file to the variables directory and separate files.
- Add $class-prefix Sass variable with the default value '' to set prefix for primary CSS classes.
- Add $theme-color Sass variable https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
- Add $theme-dark $theme-light and $theme-normal Sass variables with theme color configurations. b71e475
- Move the $columns-count Sass variable from responsive breakpoints to the core. 7729a60
- Update the Sass derived color variables to list instead of darken() or lighten().
- Remove the _variables.scss in favor of folder variables with _index.scss. 36903a7

Functions
- Color
  - Move the color() Sass function to the color directory, and add hsla subdirectory.
  - Add alpha-var() function to obtain the CSS color alpha variable by using var() function.
  - Add the color-name() function to have the ability to provide code instead of a full color name.
  - Add theget-theme-colors() function to append colors from the given map to the returned list. bcef08e
  - Add hue-var() function to obtain the CSS color hue variable by using var() function.
  - Add lightness-level-var() function to obtain the CSS color lightness level variable by using var() function.
  - Add lightness-var() function to obtain the CSS color lightness variable by using var() function.
  - Add saturation-var() function to obtain the CSS color saturation variable by using var() function.
  - Add hsa-color() function to return the hsla() color.
  - Reorder color() function parameters to be consistent with the hsla() function and use the hsla-color() function to return the color. d4423be
- Var
  - Move the get-var() var-negative() to the subdirectory var.
  - Update the get-var() function by adding $adjust parameter to adjust the CSS variable by + operator.
  - Update the get-var() function to use get-from-list() function to obtain values from the $name parameter of list type.
  - Update the get-var() function by changing the $unit parameter to boolean type.
  - Add size-var() function to return the CSS variable from sizes --s-size-xl.
  - Add unit-var() function to return the CSS variables from units for example --s-unit-1.
  - Add var-adjust() to return calculated variable by given $operator by default +.
  - Add var-name() to return the given name with the $prefix and $suffix.
  - Add css-var() function to obtain the CSS variable by using var function without checking the $name parameter against the list type.
  - Update the var-negative() function by adding $calculate parameter to have ability to calculate on demand (true).
  - Add var-unit() function to return the CSS variables multiplied by the unit.
- Add get-from-list() function to obtain values from the list argument.
- Add important() function to provide the !important.
- Add is-scheme-dark() is-scheme-light() is-scheme-normal() functions to determine selected $color-scheme. 9e5fc54
- Add map-get-default() to get value from the map with default value if null. 93597eb
- Add the typeof function to check whether the given value is a boolean type true or false.

Related commits: bcef08e 9e5fc54 6b3d888 93597eb

Mixins
- Add and use the color() background() background-color() mixins in styles instead of the color() function.
- Deprecate mixins label--variant() label-class-variant() and label-class--variant().
- Add disabled() to extend the style with disabled by .disabled, [disabled], :disabled, .#{$name}-disabled.
- Add margin-size-variants() and padding-size-variants() mixins to extend the style with predefined sizes from xs to xl.
- Add padding margin mixins to use with the CSS variables and use them in styles.
- Add hide-scrollbar() mixin to hide the scrollbar or minimize its size.
- Add set-var() mixin to set the CSS variable and set-vars() to set multiple CSS variables and use them in styles.
- Replace the define-color() and define-color-based-on() with the set-color() mixin and deprecate define-color() and define-color-based-on().
- Add set-color() set-var-alpha() set-color-hsla() set-var-hue() set-var-lightness() and set-var-saturation() to set the CSS variables for the hsla() color.
- Add transition() mixin to set multiple transitions of the transition duration from the transition-duration CSS variable.
- Add z-index() mixin to set z-index with the CSS variable --s-z-index-1 and use it in styles.
Background styles moved to the separate folder with mixins, variables, and styles with CSS color variants.
- Update the bg-color-variant() mixin to no longer supports the $hex-color to calculate its lightness, because of the new way of providing the colors and adding the $prefix.
- Add bg-color-variants() to set the background color variants from the predefined Sass variables $bg-theme-dark, $bg-theme-light, $bg-theme-normal.
- Add bg-theme-dark() bg-theme-light() bg-theme-normal() bg-theme() mixins to handle the dark/light/normal themes.
- Add the $bg-theme Sass variable to indicate which group colors of $bg-theme-dark $bg-theme-light $bg-theme-normal should be used.
Add border styles in the separate folder with mixins, variables, and styles with CSS color variants.
- Add get-border() Sass function to return the border with specified $width $style and $color. db793b2 14bd4b3 afcb5b8
- Add border-color-variant() border-color-variants() border-size-variant() border-size-variants() and border() mixins.
- Add $border-colors Sass variable to indicate the border color variants.
Button styles moved to the separate buttons folder with mixins, variables, and styles with CSS color variants.
- Add button outline variant colors.
- Add button-theme-dark() button-theme-light() button-theme-normal() and button-theme() mixins to handle the dark/light/normal color themes.
- Add button-outline-theme-dark() button-outline-theme-light() button-outline-theme-normal() and button-outline-theme() mixins to handle the dark/light/normal color themes of the outline button.
- Add $button-theme-dark $button-theme-light $button-theme-normal and $button-theme Sass variables.
- Add $button-outline-theme-dark $button-outline-theme-light $button-outline-theme-normal and $button-outline-theme Sass variables for outline buttons.
- Add button-color-variants() button-outline-color-variants() mixins.
- Update the button-color-variant() button-outline-color-variant() mixins.
- Add the colors subdirectory to have separate CSS color variants.
Add border styles fa43d59 e5efce1 3c14107 9cfb7f5 7d12788 74f4a29
Hero styles moved to the separate hero folder with mixins, variables, and styles with CSS color variants.
- Add hero-theme-dark() hero-theme-light() hero-theme-normal() and hero-theme() to handle dark/light/normal color themes.
- Add hero-color-variants() used in the theme mixins and hero-size-variant() hero-size-variants() mixins to have different padding sizes.
- Add $class-prefix to the classname.
- Add $hero-size $hero-theme-dark $hero-theme-light $hero-theme-normal and $hero-theme Sass variables.
- Add CSS variables for the hero sizes initiated by the Sass $hero-size.
- Add the colors subdirectory to have separate CSS color variants.
Label styles moved to the separate labels folder with mixins, variables, and styles with CSS color variants.
- Add label-theme-dark() label-theme-light() label-theme-normal() and label-theme() to handle dark/light/normal color themes.
- Add label-color-variants() used in the theme mixins and label-size-variants() mixin to have different padding sizes.
- Add $class-prefix to the classname.
- Add $label-theme-dark $label-theme-light $label-theme-normal and $label-theme Sass variables.
- Add the colors subdirectory to have separate CSS color variants.

Pagination styles moved to the separate pagination folder with mixins, variables, and styles with CSS color variants.
- Add pagi nation-border to have bordered page and next buttons.
- Add pagination-theme-dark() pagination-theme-light() pagination-theme-normal() and pagination-theme() to handle dark/light/normal color themes.
- Add pagination-color-variants() used in the theme mixins.
- Add $class-prefix to the classname.
- Add $pagination-theme-dark $pagination-theme-light $pagination-theme-normal and $pagination-theme Sass variables.
- Add the colors subdirectory to have separate CSS color variants.
Text styles moved to the separate text folder with mixins, variables, and styles with CSS color variants.
- Add text-theme-dark() text-theme-light() text-theme-normal() and text-theme() to handle dark/light/normal color themes.
- Add text-color-variants() used in the theme mixins.
- Add $class-prefix to the classname.
- Add $text-theme-dark $text-theme-light $text-theme-normal and $text-theme Sass variables.
Toast styles moved to the separate toasts folder with mixins, variables, and colors.
- Add toast-theme-dark() toast-theme-light() toast-theme-normal() toast-theme() mixins to handle the dark/light/normal themes.
- Add toast-color-variants() used in the theme mixins.
- Remove toast-class-variant().
- Add two parameters $name and $bg-color to the toast-color-variant().
- Add $toast-theme-dark $toast-theme-light $toast-theme-normal $toast-theme Sass variables to set color variants.
- Add the colors subdirectory to have separate CSS color variants.
Remove unnecessary import @use 'variables' as * and comments. f745fbf

v1.0.0-alpha.3.0.1 #

v1.0.0-alpha.3

Add new toast-class-variant() and label-class-variant() mixins. 87ebe64 e6d2ac8 921dc86 fdbe64b
Add sass variable $transition-duration and css variable transition-duration of the default value equal to 0.2s and use in styles. 1db668c
Add text and bg color variants. 8e6822e
Add mixin box-shadow-side() to include sided box-shadow. c010f4c
Add toasts accent, dark, disabled, gray, gray-dark, gray-light, info, light, and secondary colors. b5b3e0e
Add label colors, accent, dark, light, disabled, info. ed96a91
Add missing mixins and add new. 845c528 cc720f9

v1.0.0-alpha.2

Update define-color() mixin by adding $alpha parameter. 5a4f317
Update CSS variable body-bg-color to use SCSS variable $body-bg-color instead of basing on bg-color-light. c529aa9
Change the $body-bg SCSS variable to $body-bg-color. d6b582f
Move parallax variables into _variables.scss and add to CSS variables. 5b2c0b4 84f247c
Remove $grid-spacing in _layout.scss in favor of CSS variables calculation.
Update forms state disabled to use disabled-color instead bg-color-dark and the color is assigned to background-color not background.
Update grid sizes to use CSS variables for size. e875ec2
Add CSS variables for z-index and responsive breakpoint. 53a9c0e
Update styles to use CSS variable of the z-index. 7d7d6da
Update styles to use get-var() to use CSS variables instead of Sass variables, change avatar-base() mixin parameters to string to use CSS variables. Calculate grid sizes with css variables. 5f2714e
Update styles to use get-var() function and update including mixins to use string parameters of CSS variables. 7381a86
Add set-var() mixin to define variable with a specified $prefix and optional $suffix. 8ad9180
Use get-var() Sass function to use CSS variables instead of scss variables in the margin-variant() and padding-variant() mixins. 32dfd63
Update define-color() and define-color-based-on() mixin to use set-var() Sass function to define CSS variables. 5bc2df3 bed18ef
Update avatar-base() mixin to use CSS variables by adding get-var() function. c829c8b
Fix Color class by adding Math.round() to the color: number argument to properly calculate hex. 8e53827
Add var-negative() Sass function to make the given value negative by multiply -1. 08c9bae
Add strip-unit() Sass function to strip unit from the given value. 8c48cf1
Add get-var() Sass function to get CSS variable with prefix and/or unit. f6da5fa
Update color() mixin by adding argument $prefix to use $var-prefix for CSS variable name customization. 7e84edc
Add CSS variables border-width, border-radius, control-padding-x, control-padding-y, control-icon-size, control-size, control-width, font-size, html-font-size, html-line-height, line-height, layout-spacing,unit-o, unit-h, and unit-0 to unit-16. dfdc843
Separate defining CSS variables into different files. b82878c
Add $var-prefix to customize CSS variable name, add $disabled-color SCSS variable. 7623233
Add CSS variables font-size, html-font-size, html-line-height, line-height. 4cddda6

v1.0.0-alpha.1

Change file name from general function/_css-variable-color.scss to just functions/_color.scss. a8b14ac
Move mixins from mixins/_css-variable-color.scss to separate files _define-color.scss and _define-color-based-on.scss. e9bb18b
Change folder name from function to functions for Spectre.css naming consistency. 4582370
Change .bg-gray to use $bg-gray SCSS variable instead of $bg-color. ebd492c
Fix includes mixin bg-color-variant() by adding missing sass variables. ebd492c
New background class colors .bg-color-dark and .bg-color-light. fb1224c
Fix variable name from $lighten to $lightness in textarea.form-input. 54790ae
Update missing color() function in styles and use prettier on files. aed7fe0
Update sass variable name to css style and add !important to text-color-variant mixin. 03713ee

v1.0.0-alpha

Add helpers. a3fac35
Update from #688.
Update the mixins to use string parameters. 5cf16fa
Change the spectre.css variables and mixins to use color() function. [759feb] 978a9ba a89d3f7 b8dd9c4 4b5e065
Define CSS variables in HSL. 4ead2ca
Add $accent-color and $info-color. 5aebf31
Add function and mixins to handle CSS variables. 9d6c62a 214c17e
Change @import in favor of @use and @forward. 4110d67 6ad8904

v0.5.10 #

Add columns order #632.
Add icons #535.
Fix buttons visited style for a tag #572.
Change box-shadow in the mixins.
Add class card-shadow in the _cards.scss.

v0.5.9 #

Update gulp and dependencies
Update docs, fixes typos, merging PRs, and add more examples like Hero layout and custom prefix
Update column classes less verbose
Fix #619 by adding pointer-events to 3 dots
Fix the behavior of class loading together with tooltip
Only rotate the first child icon when accordion is open/close
Add a "Reviewed by Hound" badge

v0.5.8 #

IMPORTANT: Moving
Add Auto width column #541
Add more Menu badge support #545
Improve 360-Degree Viewer
Fix gulp issue #547
Fix the errors in the Docs #538

v0.5.7 #

Add pure CSS 360-Degree Viewer
Improve Docs SEO
Change Carousels image number to variable #428
Fix Form textarea height issue

v0.5.6 #

Add Docs Search #509 #291
Add Copy icon
Add Hero layout #380
Add multiline Tooltips #500
Replace transition: all; #526
Fix #511 issue
Fix sidebar background height for short docs pages

v0.5.5 #

IMPORTANT: New Docs
Add Changelog to What's New section
Fix chip vertical scrollbar #521
Fix circle -> s-circle #489
Fix code font-family issue for asian languages #476

v0.5.4 #

IMPORTANT: Change naming of position utilities to avoid conflicts
Update dark color variable
Fix sidebar hash link bug #482
Fix browser support typo #469
Fix code typo #460
Fix GitHub button z-index bug #458
Fix Bar background color issue by adding !important to color utilities
Fix chip bug when content is too long #506
Fix multiple select height bug #508

v0.5.3 #

Add dark text color to utilities
Add error state to the indeterminate checkbox
Add inline forms
Add more code examples
Fix errors in the Docs

v0.5.2 #

IMPORTANT: Move Docs to Pug templates
Add more Docs examples
Add visited link style
Add 100% modal height class #391
Fix off-canvas-overlay bug #392
Fix margin and padding values #431
Fix Accordion example #438
Fix a bug of input addons width on mobile devices #449
Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)

v0.5.1 #

IMPORTANT: Move Autocomplete to the Experimentals

Add form checkbox, radio and switch support to Menus
Add responsive horizontal form support #375
Add Favicons in the docs #398
Fix Off-canvas z-index problem #361
Fix icons disappearing on group classes on focus
Fix Deprecation Warning #396 #356
Initial commit of RTL support (not finished)

v0.5.0 #

IMPORTANT: Restore /dist folder
Add Grid nesting example #353
Add Form control sizes support
Update Off-canvas default behavior and new option available #347
Split Mixins
Fix Navbar last-child align right bug #346
Fix modal doc typo
Fix docs examples #348

v0.4.7 #

Add new button colors (success and error) #227 #241 #342
Add overflow-scrolling: touch; CSS for better scrolling
Add touch support to Parallax image hover effect
Update the Modal example code
Fix form horizontal layout spacing

v0.4.6 #

Add new Sliders example #328
Add Table with horizontal scroll support #333
Update Calendar event style which makes use of color utilities #326
Define $parallax-fade-color as default variable #332
Fix the Docs content mistake
Fix breadcrumb-item extra spacing #337
Fix comparison slider image responsive bug #338

v0.4.5 #

Rewrite Off-canvas component
Add active support to the Off-canvas #308
Update the Docs pages

v0.4.4 #

IMPORTANT: Increase default font sizes to 16px #271
Add version number to CSS #288 #289

v0.4.3 #

Add Icon Sizes #284
Add Large Modals #293
Update primary color to #5755d9
Change Tooltips white-space to pre #292
Encode SVG Data URI (thanks to @mariodev) #297 #298
Improve Buttons and Forms small and large variables
Improve Filters code
Improve gulpfile and package
Add Importing Sass Docs

v0.4.2 #

Add Off-screen experimental
Fix Docs rendering bug in Safari

v0.4.1 #

Add default modifier to all variables
Add address reset which changes font-style to normal
Add Details and Summary Accordions support
Fix responsive video
Update the Docs

v0.4.0 #

Switch from Less to Sass
Add Cursor utilities

v0.3.2 #

Add label-rounded classes
Add Avatars presence status code
Add Typography Fonts Docs
Add Button variant mixins
Update Autocomplete style
Update Autoprefixer rules
Update label mixin and code mono font family

v0.3.1 #

IMPORTANT: The default root font-size has been changed to 20px, please update your rem numbers if you're using the custom sizes. Learn more.

Fix margin and padding utilities bug
Add grid offset
Rename Display utilities class names
Move Panels and Empty states to Components from Layout
Fix Docs bugs and cleanup codes

v0.2.15 #

BIG Update to the Docs experience, completely rewritten and improved #240
Add Text and Background colors utilities #205 #219
Add Install from CDN option #191
Add unit size (4px) and unit size variables
Add Responsive container (max width container) #222
Add error and success states to checkbox, radio and switch #246
Fix Rem unit issue in East Asian Chrome #110
Fix icon direction bug #218
Fix Dropdown menu max items/height #226

v0.2.14 #

Add vertical divider
Add Form icon support
Add Accordions
Add anchor links to Docs
Add new container grid size
Fix link error and typo

v0.2.13 #

Add Timelines code
Add input readonly style
Change Gulp building process and ignore /dist
Change naming danger to error
Change label-variant mixin
Fix dropdown-toggle border radius in button groups
Fix Calendars date item width bug under Firefox

v0.2.12 #

Add pure CSS Comparison Sliders
Add pure CSS content Filters
Add Avatars badge support
Add more icons
Change :focus support
Change Docs image sizes and add object-fit support
Update Navbar code
Fix typos, Modals bugs

v0.2.11 #

Add pure CSS Popovers
Add pure CSS Icons
Add Slider bars
Add tvOS Parallax effect text layer
Update shadow mixin

v0.2.10 #

Add Shadows and Z-index variables
Add Divider text
Improve color variables
Cleanup components code
Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)

v0.2.9 #

Add Panels layout: flexible view container layout with auto-expand content section
Update Navbar layout
Update docs and examples

v0.2.8 #

Add Carousels previous and next buttons
Improve disabled state for forms
Improve calendar events style
Improve Sliders disabled style
Improve Autocomplete menu position
Merge Menus and Dropdowns

v0.2.7 #

Add Calendars experimental support
Add tabindex note to the dropdowns docs
Add shrink-to-fit=no to head meta
Add Colors docs and update colors
Fix wrong shadow colors with form-select
Fix grid-480

v0.2.6 #

Add Carousels initial experimental version
Add Spectre.css Twitter account (@spectrecss) link
Improve Docs experience and navbar
Fix the bug of form input focus colors

v0.2.5 #

Improve color variables completely
Add Menu badges
Add Responsive visibility (show-x)
Add Parallax effect (pure CSS)
Fix elements and components
Update empty state layout code

v0.2.4 [#] (https://github.com/picturepan2/spectre/releases/tag/v0.2.4)

ADD: Meters element experimental support
ADD: Progress indeterminate animation
ADD: Text-decoration-skip support
CHG: Split Codes and improve docs codes
FIX: Steps with tooltips z-index bug

v0.2.3 #

Bars component
Badges for buttons
Experimentals CSS and docs
Sliders experimental component
A number of fixes as usual

v0.2.1 #

I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:

New Docs experience with better navigations and better mobile off-canvas menu
New components: Tiles, Steps and Navs (part of Navigation)
Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support
Improvements: better focus style
Fixes

v0.0.1 - March 2016

Initial commit

Thank you. ♥

Files

CHANGELOG.md

Latest commit

History