Add new rating variables for text shadow, shadow color. Tweak styles for 2.0

RELEASE-NOTES.md

@@ -260,6 +260,7 @@
 - **Message** - Slightly increases `box-shadow`
 - **Popup** - Popups now default to `exclusive: false` and will not hide other popups when opening
 - **Popup** - Popup no longer produces a console error when a position cannot be found on the page.
+- **Rating** - Rating styles have been adjusted to use subtle transitions and tweaked color values.
 - **Segment** - **Clearfix** has been removed from `ui segment`
 - **Sidebar** - Sidebar now defaults to `useLegacy: false` to avoid the overhead of feature detection for most users
 - **Search** - Slightly adjusted search result theme for clarity

src/definitions/modules/rating.less

@@ -52,6 +52,7 @@
   cursor: @iconCursor;
   width: @iconWidth;
   height: @iconHeight;
+  transition: @iconTransition;
 }
 
 
@@ -94,13 +95,14 @@
   height: @starIconHeight;
   background: @starInactiveBackground;
   color: @starInactiveColor;
+  text-shadow: @starInactiveTextShadow;
 }
 
 /* Active Star */
 .ui.star.rating .active.icon {
   background: @starActiveBackground !important;
   color: @starActiveColor !important;
-  text-shadow: @starActiveShadow;
+  text-shadow: @starActiveTextShadow !important;
 }
 
 /* Selected Star */
@@ -108,6 +110,7 @@
 .ui.star.rating .icon.selected.active {
   background: @starSelectedBackground !important;
   color: @starSelectedColor !important;
+  text-shadow: @starSelectedTextShadow !important;
 }
 
 
@@ -120,13 +123,14 @@
   height: @heartIconHeight;
   background: @heartInactiveBackground;
   color: @heartInactiveColor;
+  text-shadow: @heartInactiveTextShadow !important;
 }
 
 /* Active Heart */
 .ui.heart.rating .active.icon {
   background: @heartActiveBackground !important;
   color: @heartActiveColor !important;
-  text-shadow: @heartActiveShadow;
+  text-shadow: @heartActiveTextShadow !important;
 }
 
 /* Selected Heart */
@@ -134,6 +138,7 @@
 .ui.heart.rating .icon.selected.active {
   background: @heartSelectedBackground !important;
   color: @heartSelectedColor !important;
+  text-shadow: @heartSelectedTextShadow !important;
 }
 
 
@@ -157,7 +162,7 @@
 
 /* Selected Rating */
 .ui.rating.selected .active.icon {
-  opacity: @interactiveIconOpacity;
+  opacity: @interactiveActiveIconOpacity;
 }
 .ui.rating.selected .icon.selected,
 .ui.rating .icon.selected {

src/themes/default/modules/rating.variables

@@ -4,12 +4,17 @@
 
 @margin: 0em @relativeMini;
 @whiteSpace: nowrap;
-
 @verticalAlign: middle;
 
 @iconCursor: pointer;
 @iconWidth: 1.25em;
 @iconHeight: auto;
+@iconTransition:
+  opacity @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing,
+  text-shadow @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
+;
 
 
 /*-------------------
@@ -29,59 +34,70 @@
 /* Star */
 @starIconWidth: @iconWidth;
 @starIconHeight: @iconHeight;
+@starShadowWidth: 1px;
 
 @starInactiveBackground: @inactiveBackground;
 @starInactiveColor: @inactiveColor;
-
-@starSelectedBackground: @selectedBackground;
-@starSelectedColor: #FFB70A;
+@starInactiveTextShadow: none;
 
 @starActiveBackground: @activeBackground;
 @starActiveColor: #FFE623;
-@starActiveShadow:
-  0px -1px 0px #CFA300,
-  -1px 0px 0px #CFA300,
-  0px 1px 0px #CFA300,
-  1px 0px 0px #CFA300
+@starActiveShadowColor: #DDC507;
+@starActiveTextShadow:
+  0px -@starShadowWidth 0px @starActiveShadowColor,
+  -@starShadowWidth 0px 0px @starActiveShadowColor,
+  0px @starShadowWidth 0px @starActiveShadowColor,
+  @starShadowWidth 0px 0px @starActiveShadowColor
+;
+
+@starSelectedBackground: @selectedBackground;
+@starSelectedColor: #FFCC00;
+@starSelectedShadowColor: #E6A200;
+@starSelectedTextShadow:
+  0px -@starShadowWidth 0px @starSelectedShadowColor,
+  -@starShadowWidth 0px 0px @starSelectedShadowColor,
+  0px @starShadowWidth 0px @starSelectedShadowColor,
+  @starShadowWidth 0px 0px @starSelectedShadowColor
 ;
 
 /* Heart */
 @heartIconWidth: 1.4em;
 @heartIconHeight: @iconHeight;
+@heartShadowWidth: 1px;
 
 @heartInactiveBackground: @inactiveBackground;
 @heartInactiveColor: @inactiveColor;
-
-@heartSelectedBackground: @selectedBackground;
-@heartSelectedColor: #FF2733;
+@heartInactiveTextShadow: none;
 
 @heartActiveBackground: @activeBackground;
-@heartActiveColor: #FF2733;
-
-@heartActiveShadow:
-  0px -1px 0px #9E0000,
-  -1px 0px 0px #9E0000,
-  0px 1px 0px #9E0000,
-  1px 0px 0px #9E0000
+@heartActiveColor: #FF6D75;
+@heartActiveShadowColor: #CD0707;
+@heartActiveTextShadow:
+  0px -@heartShadowWidth 0px @heartActiveShadowColor,
+  -@heartShadowWidth 0px 0px @heartActiveShadowColor,
+  0px @heartShadowWidth 0px @heartActiveShadowColor,
+  @heartShadowWidth 0px 0px @heartActiveShadowColor
 ;
 
+@heartSelectedBackground: @selectedBackground;
+@heartSelectedColor: #FF3000;
+@heartSelectedShadowColor: #AA0101;
+@heartSelectedTextShadow:
+  0px -@heartShadowWidth 0px @heartSelectedShadowColor,
+  -@heartShadowWidth 0px 0px @heartSelectedShadowColor,
+  0px @heartShadowWidth 0px @heartSelectedShadowColor,
+  @heartShadowWidth 0px 0px @heartSelectedShadowColor
+;
 
 /*-------------------
         States
 --------------------*/
 
-@interactiveIconOpacity: 0.5;
+@interactiveActiveIconOpacity: 1;
 @interactiveSelectedIconOpacity: 1;
 
 /*-------------------
       Variations
 --------------------*/
 
-@mini: 0.7rem;
-@tiny: 0.8rem;
-@small: 0.875rem;
-@medium: 1rem;
-@large: 1.1rem;
-@big: 1.25rem;
-@huge: 1.5rem;
-@massive: 2rem;
+@massive: 2rem;