:star:

12 files changed, 808 insertions, 0 deletions

diff --git a/semantic/src/themes/default/views/ad.overrides b/semantic/src/themes/default/views/ad.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/views/ad.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/views/ad.variables b/semantic/src/themes/default/views/ad.variables
new file mode 100644
index 0000000..673da41
--- /dev/null
+++ b/semantic/src/themes/default/views/ad.variables
@@ -0,0 +1,13 @@
+/*******************************
+          Advertisement
+*******************************/
+
+@margin: 1em 0;
+@overflow: hidden;
+
+@testBackground: @lightBlack;
+@testColor: @white;
+@testFontWeight: @bold;
+@testText: 'Ad';
+@testFontSize: @relativeMedium;
+@testMobileFontSize: @relativeTiny;
diff --git a/semantic/src/themes/default/views/card.overrides b/semantic/src/themes/default/views/card.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/views/card.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/views/card.variables b/semantic/src/themes/default/views/card.variables
new file mode 100644
index 0000000..c99c2c5
--- /dev/null
+++ b/semantic/src/themes/default/views/card.variables
@@ -0,0 +1,241 @@
+/*******************************
+             Card
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+/* Shadow */
+@shadowDistance: 1px;
+@shadowBoxShadow: 0 @shadowDistance 3px 0 @solidBorderColor;
+
+/* Card */
+@fontFamily: @pageFont;
+@display: flex;
+@background: @white;
+@borderRadius: @defaultBorderRadius;
+@margin: 1em 0;
+@minHeight: 0;
+@padding: 0;
+@width: 290px;
+@borderWidth: 1px;
+@borderShadow: 0 0 0 @borderWidth @solidBorderColor;
+@boxShadow:
+  @shadowBoxShadow,
+  @borderShadow
+;
+@border: none;
+@zIndex: '';
+@transition:
+  box-shadow @defaultDuration @defaultEasing,
+  transform @defaultDuration @defaultEasing
+;
+
+/* Card Group */
+@horizontalSpacing: 1em;
+@rowSpacing: 1.75em;
+
+@groupMargin: -(@rowSpacing / 2) -(@horizontalSpacing / 2);
+@groupDisplay: flex;
+
+@groupCardFloat: none;
+@groupCardDisplay: flex;
+@groupCardMargin: (@rowSpacing / 2) (@horizontalSpacing / 2);
+
+/* Consecutive Cards */
+@consecutiveGroupDistance: (@rowSpacing / 2);
+
+/*-------------------
+       Content
+--------------------*/
+
+
+/* Image */
+@imageBackground: @transparentBlack;
+@imagePadding: 0;
+@imageBorder: none;
+@imageBoxShadow: none;
+@imageBorder: none;
+
+/* Content */
+@contentDivider: @borderWidth solid @internalBorderColor;
+@contentMargin: 0;
+@contentBackground: none;
+@contentPadding: 1em 1em;
+@contentFontSize: 1em;
+@contentBorderRadius: 0;
+@contentBoxShadow: none;
+@contentBorder: none;
+
+
+/* Header */
+@headerMargin: '';
+@headerFontWeight: @bold;
+@headerFontSize: @relativeBig;
+@headerLineHeightOffset: -(@lineHeight - 1em) / 2;
+@headerColor: @darkTextColor;
+
+/* Metadata */
+@metaFontSize: @relativeMedium;
+@metaSpacing: 0.3em;
+@metaColor: @lightTextColor;
+
+/* Icons */
+@actionOpacity: 0.75;
+@actionHoverOpacity: 1;
+@actionTransition: color @defaultDuration @defaultEasing;
+
+@starColor: #FFB70A;
+@starActiveColor: #FFE623;
+
+@likeColor: #FF2733;
+@likeActiveColor: #FF2733;
+
+/* Links */
+@contentLinkColor: '';
+@contentLinkHoverColor: '';
+@contentLinkTransition: color @defaultDuration @defaultEasing;
+
+@headerLinkColor: @headerColor;
+@headerLinkHoverColor: @linkHoverColor;
+
+@metaLinkColor: @lightTextColor;
+@metaLinkHoverColor: @textColor;
+
+/* Description */
+@descriptionDistance: 0.5em;
+@descriptionColor: rgba(0, 0, 0, 0.68);
+
+/* Content Image */
+@contentImageWidth: '';
+@contentImageVerticalAlign: middle;
+
+/* Avatar Image */
+@avatarSize: 2em;
+@avatarBorderRadius: @circularRadius;
+
+/* Paragraph */
+@paragraphDistance: 0.5em;
+
+/* Dimmer */
+@dimmerZIndex: 10;
+@dimmerColor: '';
+
+/* Additional Content */
+@extraDivider: 1px solid rgba(0, 0, 0, 0.05);
+@extraBackground: none;
+@extraPosition: static;
+@extraWidth: auto;
+@extraTop: 0;
+@extraLeft: 0;
+@extraMargin: 0 0;
+@extraPadding: 0.75em 1em;
+@extraBoxShadow: none;
+@extraColor: @lightTextColor;
+@extraTransition: color @defaultDuration @defaultEasing;
+
+/* Extra Links */
+@extraLinkColor: @unselectedTextColor;
+@extraLinkHoverColor: @linkHoverColor;
+
+/* Buttons */
+@buttonMargin: 0 -@borderWidth;
+@buttonWidth: e(%("calc(100%% + %d)", @borderWidth * 2));
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Link */
+@linkHoverBackground: @white;
+@linkHoverBorder: @border;
+@linkHoverZIndex: 5;
+@linkHoverRaiseDistance: 3px;
+@linkHoverTransform: translateY(-@linkHoverRaiseDistance);
+
+@shadowHoverBoxShadow: 0 @shadowDistance @linkHoverRaiseDistance 0 @solidSelectedBorderColor;
+@linkHoverBoxShadow:
+  @shadowHoverBoxShadow,
+  @borderShadow
+;
+
+/* Horizontal */
+@horizontalMinWidth: 270px;
+@horizontalWidth: 400px;
+@horizontalImageWidth: 150px;
+
+/* Raised */
+@raisedShadow:
+  @borderShadow,
+  @floatingShadow
+;
+@raisedShadowHover:
+  @borderShadow,
+  @floatingShadowHover
+;
+
+/* Card Count */
+@wideCardSpacing: 1em;
+@cardSpacing: 0.75em;
+@smallCardSpacing: 0.5em;
+
+@oneCardSpacing: 0;
+@twoCardSpacing: @wideCardSpacing;
+@threeCardSpacing: @wideCardSpacing;
+@fourCardSpacing: @cardSpacing;
+@fiveCardSpacing: @cardSpacing;
+@sixCardSpacing: @cardSpacing;
+@sevenCardSpacing: @smallCardSpacing;
+@eightCardSpacing: @smallCardSpacing;
+@nineCardSpacing: @smallCardSpacing;
+@tenCardSpacing: @smallCardSpacing;
+
+@oneCard: @oneColumn;
+@oneCardOffset: 0;
+@twoCard: e(%("calc(%d - %d)", @twoColumn, @twoCardSpacing * 2));
+@twoCardOffset: -@twoCardSpacing;
+@threeCard: e(%("calc(%d - %d)", @threeColumn, @threeCardSpacing * 2));
+@threeCardOffset: -@threeCardSpacing;
+@fourCard: e(%("calc(%d - %d)", @fourColumn, @fourCardSpacing * 2));
+@fourCardOffset: -@fourCardSpacing;
+@fiveCard: e(%("calc(%d - %d)", @fiveColumn, @fiveCardSpacing * 2));
+@fiveCardOffset: -@fiveCardSpacing;
+@sixCard: e(%("calc(%d - %d)", @sixColumn, @sixCardSpacing * 2));
+@sixCardOffset: -@sixCardSpacing;
+@sevenCard: e(%("calc(%d - %d)", @sevenColumn, @sevenCardSpacing * 2));
+@sevenCardOffset: -@sevenCardSpacing;
+@eightCard: e(%("calc(%d - %d)", @eightColumn, @sevenCardSpacing * 2));
+@eightCardOffset: -@sevenCardSpacing;
+@nineCard: e(%("calc(%d - %d)", @nineColumn, @nineCardSpacing * 2));
+@nineCardOffset: -@nineCardSpacing;
+@tenCard: e(%("calc(%d - %d)", @tenColumn, @tenCardSpacing * 2));
+@tenCardOffset: -@tenCardSpacing;
+
+/* Stackable */
+@stackableRowSpacing: 1em;
+@stackableCardSpacing: 1em;
+@stackableMargin: e(%("calc(%d - %d)", @oneColumn, @stackableCardSpacing * 2));
+
+/* Sizes */
+@medium: 1em;
+
+/* Colored */
+@coloredShadowDistance: 2px;
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedContentDivider: @borderWidth solid rgba(255, 255, 255, 0.15);
+@invertedHeaderColor: @invertedTextColor;
+@invertedDescriptionColor: @invertedMutedTextColor;
+@invertedMetaColor: @invertedLightTextColor;
+@invertedMetaLinkColor: @invertedLightTextColor;
+@invertedMetaLinkHoverColor: @invertedHoveredTextColor;
+@invertedExtraColor: @invertedLightTextColor;
+@invertedExtraLinkColor: @invertedUnselectedTextColor;
+@invertedExtraDivider: 1px solid rgba(255, 255, 255, 0.15);
+@invertedLinkHoverBackground: @black;
+@invertedBoxShadow:
+  0 @shadowDistance 3px 0 @solidWhiteBorderColor,
+  0 0 0 @borderWidth @solidWhiteBorderColor
+;
diff --git a/semantic/src/themes/default/views/comment.overrides b/semantic/src/themes/default/views/comment.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/views/comment.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/views/comment.variables b/semantic/src/themes/default/views/comment.variables
new file mode 100644
index 0000000..1b05564
--- /dev/null
+++ b/semantic/src/themes/default/views/comment.variables
@@ -0,0 +1,98 @@
+/*******************************
+            Comments
+*******************************/
+
+
+/*-------------------
+       View
+--------------------*/
+
+@maxWidth: 650px;
+@margin: 1.5em 0;
+
+/*-------------------
+      Elements
+--------------------*/
+
+/* Comment */
+@commentBackground: none;
+@commentMargin: 0.5em 0 0;
+@commentPadding: 0.5em 0 0;
+@commentDivider: none;
+@commentBorder: none;
+@commentLineHeight: 1.2;
+@firstCommentMargin: 0;
+@firstCommentPadding: 0;
+
+/* Nested Comment */
+@nestedCommentsMargin: 0 0 0.5em 0.5em;
+@nestedCommentsPadding: 1em 0 1em 1em;
+
+@nestedCommentDivider: none;
+@nestedCommentBorder: none;
+@nestedCommentBackground: none;
+
+/* Avatar */
+@avatarDisplay: block;
+@avatarFloat: left;
+@avatarWidth: 2.5em;
+@avatarHeight: auto;
+@avatarSpacing: 1em;
+@avatarMargin: (@commentLineHeight - 1em) 0 0;
+@avatarBorderRadius: 0.25rem;
+
+/* Content */
+@contentMargin: @avatarWidth + @avatarSpacing;
+
+/* Author */
+@authorFontSize: 1em;
+@authorColor: @textColor;
+@authorHoverColor: @linkHoverColor;
+@authorFontWeight: @bold;
+
+/* Metadata */
+@metadataDisplay: inline-block;
+@metadataFontSize: 0.875em;
+@metadataSpacing: 0.5em;
+@metadataContentSpacing: 0.5em;
+@metadataColor: @lightTextColor;
+
+/* Text */
+@textFontSize: 1em;
+@textMargin: 0.25em 0 0.5em;
+@textWordWrap: break-word;
+@textLineHeight: 1.3;
+
+/* Actions */
+@actionFontSize: 0.875em;
+@actionContentDistance: 0.75em;
+@actionLinkColor: @unselectedTextColor;
+@actionLinkHoverColor: @hoveredTextColor;
+
+/* Reply */
+@replyDistance: 1em;
+@replyHeight: 12em;
+@replyFontSize: 1em;
+
+@commentReplyDistance: @replyDistance;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Threaded */
+@threadedCommentMargin: -1.5em 0 -1em  (@avatarWidth / 2);
+@threadedCommentPadding: 3em 0 2em 2.25em;
+@threadedCommentBoxShadow: -1px 0 0 @borderColor;
+
+
+/* Minimal */
+@minimalActionPosition: absolute;
+@minimalActionTop: 0;
+@minimalActionRight: 0;
+@minimalActionLeft: auto;
+
+@minimalTransitionDelay: 0.1s;
+@minimalEasing: @defaultEasing;
+@minimalDuration: 0.2s;
+@minimalTransition: opacity @minimalDuration @minimalEasing;
diff --git a/semantic/src/themes/default/views/feed.overrides b/semantic/src/themes/default/views/feed.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/views/feed.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/views/feed.variables b/semantic/src/themes/default/views/feed.variables
new file mode 100644
index 0000000..925bc81
--- /dev/null
+++ b/semantic/src/themes/default/views/feed.variables
@@ -0,0 +1,141 @@
+/*******************************
+             Feed
+*******************************/
+
+/*-------------------
+        Feed
+--------------------*/
+
+@margin: 1em 0;
+
+/*-------------------
+      Elements
+--------------------*/
+
+/* Event */
+@eventWidth: 100%;
+@eventPadding: @3px 0;
+@eventMargin: 0;
+@eventBackground: none;
+@eventDivider: none;
+
+/* Event Label */
+@labelWidth: 2.5em;
+@labelHeight: auto;
+@labelAlignSelf: stretch;
+@labelTextAlign: left;
+
+/* Icon Label */
+@iconLabelOpacity: 1;
+@iconLabelWidth: 100%;
+@iconLabelSize: 1.5em;
+@iconLabelPadding: 0.25em;
+@iconLabelBackground: none;
+@iconLabelBorderRadius: none;
+@iconLabelBorder: none;
+@iconLabelColor: rgba(0, 0, 0, 0.6);
+
+/* Image Label */
+@imageLabelWidth: 100%;
+@imageLabelHeight: auto;
+@imageLabelBorderRadius: @circularRadius;
+
+/* Content w/ Label */
+@labeledContentMargin: 0.5em 0 @relative5px @relativeLarge;
+@lastLabeledContentPadding: 0;
+
+/* Content */
+@contentAlignSelf: stretch;
+@contentTextAlign: left;
+@contentWordWrap: break-word;
+
+/* Date */
+@dateMargin: -0.5rem 0 0;
+@datePadding: 0;
+@dateColor: @lightTextColor;
+@dateFontSize: @relativeMedium;
+@dateFontWeight: @normal;
+@dateFontStyle: @normal;
+
+/* Summary */
+@summaryMargin: 0;
+@summaryFontSize: @relativeMedium;
+@summaryFontWeight: @bold;
+@summaryColor: @textColor;
+
+/* Summary Image */
+@summaryImageWidth: auto;
+@summaryImageHeight: 10em;
+@summaryImageMargin: -0.25em 0.25em 0 0;
+@summaryImageVerticalAlign: middle;
+@summaryImageBorderRadius: 0.25em;
+
+/* Summary Date */
+@summaryDateDisplay: inline-block;
+@summaryDateFloat: none;
+@summaryDateMargin: 0 0 0 0.5em;
+@summaryDatePadding: 0;
+@summaryDateFontSize: @relativeTiny;
+@summaryDateFontWeight: @dateFontWeight;
+@summaryDateFontStyle: @dateFontStyle;
+@summaryDateColor: @dateColor;
+
+/* User */
+@userFontWeight: @bold;
+@userDistance: 0;
+@userImageWidth: @summaryImageWidth;
+@userImageHeight: @summaryImageHeight;
+@userImageMargin: @summaryImageMargin;
+@userImageVerticalAlign: @summaryImageVerticalAlign;
+
+/* Extra Summary Data */
+@extraMargin: 0.5em 0 0;
+@extraBackground: none;
+@extraPadding: 0;
+@extraColor: @textColor;
+
+/* Extra Images */
+@extraImageMargin: 0 0.25em 0 0;
+@extraImageWidth: 6em;
+
+/* Extra Text */
+@extraTextPadding: 0;
+@extraTextPointer: none;
+@extraTextFontSize: @relativeMedium;
+@extraTextLineHeight: @lineHeight;
+@extraTextMaxWidth: 500px;
+
+/* Metadata Group */
+@metadataDisplay: inline-block;
+@metadataFontSize: @relativeTiny;
+@metadataMargin: 0.5em 0 0;
+@metadataBackground: none;
+@metadataBorder: none;
+@metadataBorderRadius: 0;
+@metadataBoxShadow: none;
+@metadataPadding: 0;
+@metadataColor: rgba(0, 0, 0, 0.6);
+
+@metadataElementSpacing: 0.75em;
+
+/* Like */
+@likeColor: '';
+@likeHoverColor: #FF2733;
+@likeActiveColor: #EF404A;
+@likeTransition: 0.2s color ease;
+
+/* Metadata Divider */
+@metadataDivider: '';
+@metadataDividerColor: rgba(0, 0, 0, 0.2);
+@metadataDividerOffset: -1em;
+
+@metadataActionCursor: pointer;
+@metadataActionOpacity: 1;
+@metadataActionColor: rgba(0, 0, 0, 0.5);
+@metadataActionTransition: color @defaultDuration @defaultEasing;
+
+@metadataActionHoverColor: @selectedTextColor;
+
+/*-------------------
+      Variations
+--------------------*/
diff --git a/semantic/src/themes/default/views/item.overrides b/semantic/src/themes/default/views/item.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/views/item.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/views/item.variables b/semantic/src/themes/default/views/item.variables
new file mode 100644
index 0000000..c0dd364
--- /dev/null
+++ b/semantic/src/themes/default/views/item.variables
@@ -0,0 +1,186 @@
+/*******************************
+             Item
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+/* Group */
+@groupMargin: 1.5em 0;
+
+/* Item */
+@display: flex;
+@background: transparent;
+@borderRadius: 0;
+@minHeight: 0;
+@padding: 0;
+@width: 100%;
+@boxShadow: none;
+@border: none;
+@zIndex: '';
+@transition: box-shadow @defaultDuration @defaultEasing;
+
+/* Responsive */
+@itemSpacing: 1em;
+@imageWidth: 175px;
+@contentImageDistance: 1.5em;
+
+@tabletItemSpacing: 1em;
+@tabletImageWidth: 150px;
+@tabletContentImageDistance: 1em;
+
+@mobileItemSpacing: 2em;
+@mobileImageWidth: auto;
+@mobileImageMaxHeight: 250px;
+@mobileContentImageDistance: 1.5em;
+
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Image */
+@imageDisplay: block;
+@imageFloat: none;
+@imageMaxHeight: '';
+@imageVerticalAlign: start;
+@imageMargin: 0;
+@imagePadding: 0;
+@imageBorder: none;
+@imageBorderRadius: 0.125rem;
+@imageBoxShadow: none;
+@imageBorder: none;
+
+/* Content */
+@contentDisplay: block;
+@contentVerticalAlign: start;
+
+@contentWidth: auto;
+@contentOffset: 0;
+@contentBackground: none;
+@contentMargin: 0;
+@contentPadding: 0;
+@contentFontSize: 1em;
+@contentBorder: none;
+@contentBorderRadius: 0;
+@contentBoxShadow: none;
+@contentColor: @textColor;
+
+/* Header */
+@headerMargin: -@lineHeightOffset 0 0;
+@headerFontWeight: @bold;
+@headerFontSize: @relativeBig;
+@headerColor: @darkTextColor;
+
+/* Metadata */
+@metaMargin: 0.5em 0 0.5em;
+@metaFontSize: 1em;
+@metaLineHeight: 1em;
+@metaSpacing: 0.3em;
+@metaColor: rgba(0, 0, 0, 0.6);
+
+/* Icons */
+@actionOpacity: 0.75;
+@actionHoverOpacity: 1;
+@actionTransition: color @defaultDuration @defaultEasing;
+
+/* Actions */
+@favoriteColor: #FFB70A;
+@favoriteActiveColor: #FFE623;
+@likeColor: #FF2733;
+@likeActiveColor: #FF2733;
+
+/* Links */
+@headerLinkColor: @headerColor;
+@headerLinkHoverColor: @linkHoverColor;
+@metaLinkColor: @lightTextColor;
+@metaLinkHoverColor: @textColor;
+@contentLinkColor: '';
+@contentLinkHoverColor: '';
+@contentLinkTransition: color @defaultDuration @defaultEasing;
+
+
+/* Description */
+@descriptionDistance: 0.6em;
+@descriptionMaxWidth: auto;
+@descriptionFontSize: 1em;
+@descriptionLineHeight: @lineHeight;
+@descriptionColor: @textColor;
+
+/* Content Image */
+@contentImageWidth: '';
+@contentImageVerticalAlign: center;
+
+/* Avatar Image */
+@avatarSize: @contentImageWidth;
+@avatarBorderRadius: @circularRadius;
+
+/* Paragraph */
+@paragraphDistance: 0.5em;
+
+/* Additional Content */
+@extraDivider: none;
+@extraHorizontalSpacing: 0.5rem;
+@extraRowSpacing: 0.5rem;
+
+@extraBackground: none;
+@extraDisplay: block;
+@extraPosition: relative;
+@extraMargin: (1rem - @extraRowSpacing) 0 0;
+@extraTop: 0;
+@extraLeft: 0;
+@extraWidth: 100%;
+@extraPadding: 0 0 0;
+@extraBoxShadow: none;
+@extraColor: @lightTextColor;
+@extraTransition: color @defaultDuration @defaultEasing;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Relaxed */
+@relaxedItemSpacing: 1.5em;
+@veryRelaxedItemSpacing: 2em;
+
+/* Divided */
+@dividedBorder: 1px solid @borderColor;
+@dividedMargin: 0;
+@dividedPadding: 1em 0;
+
+@dividedFirstLastMargin: 0;
+@dividedFirstLastPadding: 0;
+
+
+/* Unstackable */
+@unstackableMobileImageWidth: 125px;
+
+/* Inverted */
+@invertedBackground: @background;
+@invertedContentBackground: @contentBackground;
+@invertedExtraBackground: @extraBackground;
+@invertedHeaderColor: @invertedTextColor;
+@invertedHeaderLinkColor: @invertedHeaderColor;
+@invertedHeaderLinkHoverColor: @invertedHoveredTextColor;
+@invertedMetaLinkColor: @invertedLightTextColor;
+@invertedMetaLinkHoverColor: @invertedTextColor;
+@invertedContentColor: @invertedTextColor;
+@invertedContentLinkColor: lighten(saturate(@linkColor, 30), 25, relative);
+@invertedContentLinkHoverColor: @linkColor;
+@invertedExtraColor: @invertedLightTextColor;
+@invertedDescriptionColor: @invertedTextColor;
+@invertedMetaColor: rgba(255, 255, 255, 0.8);
+@invertedLikeColor: lighten(@likeColor,10);
+@invertedLikeActiveColor: lighten(@likeActiveColor,10);
+@invertedFavoriteColor: lighten(@favoriteColor,10);
+@invertedFavoriteActiveColor: lighten(@favoriteActiveColor,10);
+@invertedDividedBorder: 1px solid @whiteBorderColor;
+
+@miniItemSize: @relativeMini;
+@tinyItemSize: @relativeTiny;
+@smallItemSize: @relativeSmall;
+@largeItemSize: @relativeLarge;
+@bigItemSize: @relativeBig;
+@hugeItemSize: @relativeHuge;
+@massiveItemSize: @relativeMassive;
diff --git a/semantic/src/themes/default/views/statistic.overrides b/semantic/src/themes/default/views/statistic.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/views/statistic.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/views/statistic.variables b/semantic/src/themes/default/views/statistic.variables
new file mode 100644
index 0000000..f8bfd76
--- /dev/null
+++ b/semantic/src/themes/default/views/statistic.variables
@@ -0,0 +1,111 @@
+/*******************************
+           Statistic
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+@verticalMargin: 1em;
+@margin: @verticalMargin 0;
+@textAlign: center;
+@maxWidth: none;
+
+/* Group */
+@horizontalSpacing: 1.5em;
+@rowSpacing: 1em;
+@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
+
+/* Group Element */
+@elementMargin: 0 @horizontalSpacing @rowSpacing;
+@elementMaxWidth: @maxWidth;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Value */
+@valueFont: @pageFont;
+@valueFontWeight: @normal;
+@valueLineHeight: 1em;
+@valueColor: @black;
+@valueTextTransform: uppercase;
+
+/* Label */
+@labelSize: @relativeMedium;
+@topLabelDistance: 0;
+@bottomLabelDistance: 0;
+@labelFont: @headerFont;
+@labelFontWeight: @bold;
+@labelColor: @textColor;
+@labelLineHeight: @relativeLarge;
+@labelTextTransform: uppercase;
+
+/* Text */
+@textValueLineHeight: 1em;
+@textValueMinHeight: 2em;
+@textValueFontWeight: @bold;
+
+/* Label Image */
+@imageHeight: 3rem;
+@imageVerticalAlign: baseline;
+
+/*-------------------
+      Types
+--------------------*/
+
+@horizontalGroupElementMargin: 1em 0;
+@horizontalLabelDistance: 0.75em;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Floated */
+@leftFloatedMargin: 0 2em 1em 0;
+@rightFloatedMargin: 0 0 1em 2em;
+
+/* Inverted */
+@invertedValueColor: @white;
+@invertedLabelColor: @invertedTextColor;
+
+/* Item Width */
+@itemGroupMargin: 0 0 -@rowSpacing;
+@itemMargin: 0 0 @rowSpacing;
+
+/* Stackable */
+@stackableRowSpacing: 2rem;
+@stackableGutter: 2rem;
+
+/* Size */
+@miniTextValueSize: 1rem;
+@miniValueSize: 1.5rem;
+@miniHorizontalValueSize: 1.5rem;
+
+@tinyTextValueSize: 1rem;
+@tinyValueSize: 2rem;
+@tinyHorizontalValueSize: 2rem;
+
+@smallTextValueSize: 1rem;
+@smallValueSize: 3rem;
+@smallHorizontalValueSize: 2rem;
+
+@textValueSize: 2rem;
+@valueSize: 4rem;
+@horizontalValueSize: 3rem;
+
+@largeTextValueSize: 2.5rem;
+@largeValueSize: 5rem;
+@largeHorizontalValueSize: 4rem;
+
+@bigTextValueSize: 2.5rem;
+@bigValueSize: 5.5rem;
+@bigHorizontalValueSize: 4.5rem;
+
+@hugeTextValueSize: 2.5rem;
+@hugeValueSize: 6rem;
+@hugeHorizontalValueSize: 5rem;
+
+@massiveTextValueSize: 3rem;
+@massiveValueSize: 7rem;
+@massiveHorizontalValueSize: 6rem;