Skip to content

CHANGELOG.md

Latest commit

 

History

History
630 lines (510 loc) · 36.5 KB

CHANGELOG.md

File metadata and controls

630 lines (510 loc) · 36.5 KB

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

Related commits: e0a1326 e29a8ed e404a0c 66d08f5 fb16cee baa8ca6 a4562ad 7923cdc b71e475 7729a60 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.

Related commits: 0f4c16d 88ad2f3 cdbc6d5 d4dee37 92cd276 a9882d1 9a1aa50 e598f46 d43529a 18484a7 26a5a2c

  • 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
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 #
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. ♥