:star:

40 files changed, 3202 insertions, 0 deletions

diff --git a/semantic/src/themes/default/modules/accordion.overrides b/semantic/src/themes/default/modules/accordion.overrides
new file mode 100644
index 0000000..e4bd727
--- /dev/null
+++ b/semantic/src/themes/default/modules/accordion.overrides
@@ -0,0 +1,28 @@
+/*******************************
+         Theme Overrides
+*******************************/
+@font-face {
+  font-family: 'Accordion';
+  src:
+    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
+    url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff')
+  ;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Dropdown Icon */
+.ui.accordion .title .dropdown.icon,
+.ui.accordion .accordion .title .dropdown.icon {
+  font-family: Accordion;
+  line-height: 1;
+  backface-visibility: hidden;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+}
+
+.ui.accordion .title .dropdown.icon:before,
+.ui.accordion .accordion .title .dropdown.icon:before {
+  content: '\f0da'/*rtl:'\f0d9'*/;
+}
diff --git a/semantic/src/themes/default/modules/accordion.variables b/semantic/src/themes/default/modules/accordion.variables
new file mode 100644
index 0000000..e4b3d08
--- /dev/null
+++ b/semantic/src/themes/default/modules/accordion.variables
@@ -0,0 +1,100 @@
+/*******************************
+           Accordion
+*******************************/
+
+@boxShadow: none;
+
+/* Title */
+@titleFont: @headerFont;
+@titlePadding: 0.5em 0;
+@titleFontSize: 1em;
+@titleColor: @textColor;
+
+/* Icon */
+@iconOpacity: 1;
+@iconFontSize: 1em;
+@iconFloat: none;
+@iconWidth: 1.25em;
+@iconHeight: 1em;
+@iconDisplay: inline-block;
+@iconMargin: 0 0.25rem 0 0;
+@iconPadding: 0;
+@iconTransition:
+  transform @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing
+;
+@iconVerticalAlign: baseline;
+@iconTransform: none;
+
+/* Child Accordion */
+@childAccordionMargin: 1em 0 0;
+@childAccordionPadding: 0;
+
+/* Content */
+@contentMargin: '';
+@contentPadding: 0.5em 0 1em;
+
+/*-------------------
+       Coupling
+--------------------*/
+
+@menuTitlePadding: 0;
+@menuIconFloat: right;
+@menuIconMargin: @lineHeightOffset 0 0 1em;
+@menuIconTransform: rotate(180deg);
+
+
+/*-------------------
+       States
+--------------------*/
+
+@activeIconTransform: rotate(90deg);
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Styled */
+@styledWidth: 600px;
+@styledBackground: @white;
+@styledBorderRadius: @defaultBorderRadius;
+@styledBoxShadow:
+  @subtleShadow,
+  0 0 0 1px @borderColor
+;
+
+/* Content */
+@styledContentMargin: 0;
+@styledContentPadding: 0.5em 1em 1.5em;
+
+/* Child Content */
+@styledChildContentMargin: 0;
+@styledChildContentPadding: @styledContentPadding;
+
+/* Styled Title */
+@styledTitleMargin: 0;
+@styledTitlePadding: 0.75em 1em;
+@styledTitleFontWeight: @bold;
+@styledTitleColor: @unselectedTextColor;
+@styledTitleTransition: background-color @defaultDuration @defaultEasing;
+@styledTitleBorder: 1px solid @borderColor;
+@styledTitleTransition:
+  background @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
+;
+
+/* Styled Title States */
+@styledTitleHoverBackground: transparent;
+@styledTitleHoverColor: @textColor;
+@styledActiveTitleBackground: transparent;
+@styledActiveTitleColor: @selectedTextColor;
+
+/* Styled Child Title States */
+@styledHoverChildTitleBackground: @styledTitleHoverBackground;
+@styledHoverChildTitleColor: @styledTitleHoverColor;
+@styledActiveChildTitleBackground: @styledActiveTitleBackground;
+@styledActiveChildTitleColor: @styledActiveTitleColor;
+
+/* Inverted */
+@invertedTitleColor: @invertedTextColor;
+
diff --git a/semantic/src/themes/default/modules/calendar.overrides b/semantic/src/themes/default/modules/calendar.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/calendar.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/calendar.variables b/semantic/src/themes/default/modules/calendar.variables
new file mode 100644
index 0000000..0dbdc1f
--- /dev/null
+++ b/semantic/src/themes/default/modules/calendar.variables
@@ -0,0 +1,20 @@
+/*******************************
+           Calendar
+*******************************/
+
+@focusBoxShadow: inset 0 0 0 1px @focusedFormBorderColor;
+@focusInvertedBoxShadow: inset 0 0 0 1px @focusedFormBorderColor;
+
+@todayFontWeight: bold;
+
+@rangeBackground: @transparentBlack;
+@rangeTextColor: @selectedTextColor;
+@rangeBoxShadow: none;
+@rangeInvertedBackground: @transparentWhite;
+@rangeInvertedTextColor: @invertedSelectedTextColor;
+@rangeInvertedBoxShadow: none;
+
+@adjacentTextColor: @mutedTextColor;
+@adjacentBackground: @subtleTransparentBlack;
+@adjacentInvertedTextColor: @invertedMutedTextColor;
+@adjacentInvertedBackground: @subtleTransparentWhite;
diff --git a/semantic/src/themes/default/modules/chatroom.overrides b/semantic/src/themes/default/modules/chatroom.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/chatroom.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/chatroom.variables b/semantic/src/themes/default/modules/chatroom.variables
new file mode 100644
index 0000000..0da971c
--- /dev/null
+++ b/semantic/src/themes/default/modules/chatroom.variables
@@ -0,0 +1,3 @@
+/*******************************
+            Chatroom
+*******************************/
\ No newline at end of file
diff --git a/semantic/src/themes/default/modules/checkbox.overrides b/semantic/src/themes/default/modules/checkbox.overrides
new file mode 100644
index 0000000..e83ad9f
--- /dev/null
+++ b/semantic/src/themes/default/modules/checkbox.overrides
@@ -0,0 +1,36 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+@font-face {
+  font-family: 'Checkbox';
+  src:
+    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype')
+  ;
+}
+
+/* Checkmark */
+.ui.checkbox label:after,
+.ui.checkbox .box:after {
+  font-family: 'Checkbox';
+}
+
+/* Checked */
+.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ label:after {
+  content: '\e800';
+}
+
+/* Indeterminate */
+.ui.checkbox input:indeterminate ~ .box:after,
+.ui.checkbox input:indeterminate ~ label:after {
+  font-size: 12px;
+  content: '\e801';
+}
+
+
+/*  UTF Reference
+.check:before { content: '\e800'; }
+.dash:before  { content: '\e801'; }
+.plus:before { content: '\e802'; }
+*/
diff --git a/semantic/src/themes/default/modules/checkbox.variables b/semantic/src/themes/default/modules/checkbox.variables
new file mode 100644
index 0000000..cf441e6
--- /dev/null
+++ b/semantic/src/themes/default/modules/checkbox.variables
@@ -0,0 +1,220 @@
+/*******************************
+            Checkbox
+*******************************/
+
+@checkboxSize: 17px;
+@checkboxColor: @textColor;
+@checkboxLineHeight: @checkboxSize;
+
+
+/* Label */
+@labelDistance: 1.85714em; /* 26px @ 14/em */
+
+/* Checkbox */
+@checkboxBackground: @white;
+@checkboxBorder: 1px solid @solidBorderColor;
+@checkboxBorderRadius: @3px;
+@checkboxTransition:
+  border @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing,
+  transform @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
+;
+
+/* Checkmark */
+@checkboxCheckFontSize: 14px;
+@checkboxCheckTop: 0;
+@checkboxCheckLeft: 0;
+@checkboxCheckSize: @checkboxSize;
+
+/* Label */
+@labelFontSize: @relativeMedium;
+@labelColor: @textColor;
+@labelTransition: color @defaultDuration @defaultEasing;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Hover */
+@checkboxHoverBackground: @checkboxBackground;
+@checkboxHoverBorderColor: @selectedBorderColor;
+@labelHoverColor: @hoveredTextColor;
+
+/* Pressed */
+@checkboxPressedBackground: @offWhite;
+@checkboxPressedBorderColor: @selectedBorderColor;
+@checkboxPressedColor: @selectedTextColor;
+@labelPressedColor: @selectedTextColor;
+
+/* Focus */
+@checkboxFocusBackground: @white;
+@checkboxFocusBorderColor: @focusedFormMutedBorderColor;
+@checkboxFocusCheckColor: @selectedTextColor;
+@labelFocusColor: @selectedTextColor;
+
+/* Active */
+@labelActiveColor: @selectedTextColor;
+@checkboxActiveBackground: @white;
+@checkboxActiveBorderColor: @selectedBorderColor;
+@checkboxActiveCheckColor: @selectedTextColor;
+@checkboxActiveCheckOpacity: 1;
+
+/* Active Focus */
+@checkboxActiveFocusBackground: @white;
+@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor;
+@checkboxActiveFocusCheckColor: @selectedTextColor;
+
+/* Indeterminate */
+@checkboxIndeterminateBackground: @checkboxActiveBackground;
+@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor;
+@checkboxIndeterminateCheckOpacity: 1;
+@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor;
+
+/* Disabled */
+@disabledCheckboxOpacity: 0.5;
+@disabledCheckboxLabelColor: rgba(0, 0, 0, 1);
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Radio */
+/* Uses px to avoid rounding issues with circles */
+
+@radioSize: 15px;
+@radioTop: 1px;
+@radioLeft: 0;
+@radioLabelDistance: @labelDistance;
+
+@bulletTop: 1px;
+@bulletLeft: 0;
+@bulletScale: (7 / 15); /* 7px as unitless value from radio size */
+@bulletColor: @textColor;
+@bulletRadius: @circularRadius;
+
+@radioFocusBackground: @checkboxFocusBackground;
+@radioFocusBulletColor: @checkboxFocusCheckColor;
+
+@radioActiveBackground: @checkboxActiveBackground;
+@radioActiveBulletColor: @checkboxActiveCheckColor;
+
+@radioActiveFocusBackground: @checkboxActiveFocusBackground;
+@radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor;
+
+/* Slider & Toggle Handle */
+@handleBackground: @white @subtleGradient;
+@handleBoxShadow:
+  @subtleShadow,
+  0 0 0 1px @borderColor inset
+;
+
+/* Slider */
+@sliderHandleSize: 1.5rem;
+@sliderLineWidth: 3.5rem;
+@sliderTransitionDuration: 0.3s;
+
+@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
+@sliderHandleTransition: left @sliderTransitionDuration @defaultEasing;
+
+@sliderWidth: @sliderLineWidth;
+@sliderHeight: (@sliderHandleSize + @sliderHandleOffset);
+
+@sliderLineHeight: @3px;
+@sliderLineVerticalOffset: 0.4rem;
+@sliderLineColor: @transparentBlack;
+@sliderLineRadius: @circularRadius;
+@sliderLineTransition: background @sliderTransitionDuration @defaultEasing;
+
+@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
+
+@sliderLabelDistance: @sliderLineWidth + 1rem;
+@sliderOffLabelColor: @unselectedTextColor;
+
+@sliderLabelLineHeight: 1rem;
+
+/* Slider States */
+@sliderHoverLaneBackground: @veryStrongTransparentBlack;
+@sliderHoverLabelColor: @hoveredTextColor;
+
+@sliderOnLineColor: @lightBlack;
+@sliderOnLabelColor: @selectedTextColor;
+
+@sliderOnFocusLineColor: @lightBlackFocus;
+@sliderOnFocusLabelColor: @sliderOnLabelColor;
+
+
+
+/* Toggle */
+@toggleLaneWidth: 3.5rem;
+@toggleHandleSize: 1.5rem;
+@toggleTransitionDuration: 0.2s;
+
+@toggleWidth: @toggleLaneWidth;
+@toggleHeight: @toggleHandleSize;
+
+@toggleHandleRadius: @circularRadius;
+@toggleHandleOffset: 0;
+@toggleHandleTransition:
+  background @sliderTransitionDuration @defaultEasing,
+  left @sliderTransitionDuration @defaultEasing
+;
+
+@toggleLaneBackground: @transparentBlack;
+@toggleLaneHeight: @toggleHandleSize;
+@toggleLaneBoxShadow: none;
+@toggleLaneVerticalOffset: 0;
+@toggleOffOffset: -0.05rem;
+@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem;
+@toggleCenterOffset: @toggleOnOffset / 2;
+@toggleCenterLaneBackground: @veryStrongTransparentBlack;
+
+@toggleLabelDistance: @toggleLaneWidth + 1rem;
+@toggleLabelLineHeight: 1.5rem;
+@toggleLabelOffset: 0.15em;
+
+
+@toggleFocusColor: @veryStrongTransparentBlack;
+@toggleHoverColor: @toggleFocusColor;
+
+@toggleOffLabelColor: @checkboxColor;
+@toggleOffHandleBoxShadow: @handleBoxShadow;
+
+@toggleOnLabelColor: @selectedTextColor;
+@toggleOnLaneColor: @primaryColor;
+
+@toggleOnHandleBoxShadow: @handleBoxShadow;
+
+@toggleOnFocusLaneColor: @primaryColorFocus;
+@toggleOnFocusLabelColor: @toggleOnLabelColor;
+
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Inverted */
+@checkboxInvertedHoverBackground: @black;
+
+@miniCheckboxSize: @relativeMini;
+@miniCheckboxCircleScale: @miniRaw / 2;
+@miniCheckboxCircleLeft: unit((@miniRaw - @miniCheckboxCircleScale) / 2 + 0.05 , em);
+@tinyCheckboxSize: @relativeTiny;
+@tinyCheckboxCircleScale: @tinyRaw / 2;
+@tinyCheckboxCircleLeft: unit((@tinyRaw - @tinyCheckboxCircleScale) / 2 + 0.05 , em);
+@smallCheckboxSize: @relativeSmall;
+@smallCheckboxCircleScale: @smallRaw / 2;
+@smallCheckboxCircleLeft: unit((@smallRaw - @smallCheckboxCircleScale) / 2 + 0.05 , em);
+@largeCheckboxSize: @relativeLarge;
+@largeCheckboxCircleScale: @largeRaw / 2;
+@largeCheckboxCircleLeft: unit((@largeRaw - @largeCheckboxCircleScale) / 2 + 0.05 , em);
+@bigCheckboxSize: @relativeBig;
+@bigCheckboxCircleScale: @bigRaw / 2;
+@bigCheckboxCircleLeft: unit((@bigRaw - @bigCheckboxCircleScale) / 2 + 0.05 , em);
+@hugeCheckboxSize: @relativeHuge;
+@hugeCheckboxCircleScale: @hugeRaw / 2;
+@hugeCheckboxCircleLeft: unit((@hugeRaw - @hugeCheckboxCircleScale) / 2 + 0.05 , em);
+@massiveCheckboxSize: @relativeMassive;
+@massiveCheckboxCircleScale: @massiveRaw / 2;
+@massiveCheckboxCircleLeft: unit((@massiveRaw - @massiveCheckboxCircleScale) / 2 + 0.05 , em);
diff --git a/semantic/src/themes/default/modules/dimmer.overrides b/semantic/src/themes/default/modules/dimmer.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/dimmer.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/dimmer.variables b/semantic/src/themes/default/modules/dimmer.variables
new file mode 100644
index 0000000..602f0e1
--- /dev/null
+++ b/semantic/src/themes/default/modules/dimmer.variables
@@ -0,0 +1,66 @@
+/*******************************
+            Dimmer
+*******************************/
+
+@dimmablePosition: relative;
+@dimmerPosition: absolute;
+
+@backgroundColor: rgba(0, 0, 0 , 0.85);
+@lineHeight: 1;
+@perspective: 2000px;
+@padding: 1em;
+
+@duration: 0.5s;
+@transition:
+  background-color @duration linear
+;
+@zIndex: 1000;
+@textAlign: center;
+@verticalAlign: middle;
+@textColor: @white;
+@overflow: hidden;
+
+@blurredStartFilter: initial;
+@blurredEndFilter: e("blur(5px) grayscale(0.7)");
+@blurredTransition: 800ms filter @defaultEasing;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6);
+
+/* Hidden (Default) */
+@hiddenOpacity: 0;
+
+/* Visible */
+@visibleOpacity: 1;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Page Dimmer*/
+@transformStyle: '';
+@pageDimmerPosition: fixed;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Inverted */
+@invertedBackgroundColor: rgba(255, 255, 255, 0.85);
+@invertedTextColor: @fullBlack;
+
+/* Simple */
+@simpleZIndex: 1;
+@simpleStartBackgroundColor: rgba(0, 0, 0, 0);
+@simpleEndBackgroundColor: @backgroundColor;
+@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
+@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;
+
+/* Intensity */
+@veryLightBackgroundColor: rgba(0,0,0,.25);
+@lightBackgroundColor: rgba(0,0,0,.45);
+@mediumBackgroundColor: rgba(0,0,0,.65);
+@veryLightInvertedBackgroundColor: rgba(255,255,255,.25);
+@lightInvertedBackgroundColor: rgba(255,255,255,.45);
+@mediumInvertedBackgroundColor: rgba(255,255,255,.65);
\ No newline at end of file
diff --git a/semantic/src/themes/default/modules/dropdown.overrides b/semantic/src/themes/default/modules/dropdown.overrides
new file mode 100644
index 0000000..729e201
--- /dev/null
+++ b/semantic/src/themes/default/modules/dropdown.overrides
@@ -0,0 +1,62 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+/* Dropdown Carets */
+@font-face {
+  font-family: 'Dropdown';
+  src:
+    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),
+    url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff')
+  ;
+  font-weight: normal;
+  font-style: normal;
+}
+
+.ui.dropdown > .dropdown.icon {
+  font-family: 'Dropdown';
+  line-height: 1;
+  height: 1em;
+  width: 1.23em;
+  backface-visibility: hidden;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+}
+
+.ui.dropdown > .dropdown.icon {
+  width: auto;
+}
+.ui.dropdown > .dropdown.icon:before {
+  content: '\f0d7';
+}
+
+/* Sub Menu */
+.ui.dropdown .menu .item .dropdown.icon:before {
+  content: '\f0da'/*rtl:'\f0d9'*/;
+}
+
+.ui.dropdown .item .left.dropdown.icon:before,
+.ui.dropdown .left.menu .item .dropdown.icon:before {
+  content: "\f0d9"/*rtl:"\f0da"*/;
+}
+
+/* Vertical Menu Dropdown */
+.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
+  content: "\f0da"/*rtl:"\f0d9"*/;
+}
+
+/* Icons for Reference
+.dropdown.down.icon {
+  content: "\f0d7";
+}
+.dropdown.up.icon {
+  content: "\f0d8";
+}
+.dropdown.left.icon {
+  content: "\f0d9";
+}
+.dropdown.icon.icon {
+  content: "\f0da";
+}
+*/
diff --git a/semantic/src/themes/default/modules/dropdown.variables b/semantic/src/themes/default/modules/dropdown.variables
new file mode 100644
index 0000000..5ab5349
--- /dev/null
+++ b/semantic/src/themes/default/modules/dropdown.variables
@@ -0,0 +1,471 @@
+/*******************************
+            Dropdown
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@transition:
+  box-shadow @defaultDuration @defaultEasing,
+  width @defaultDuration @defaultEasing
+;
+@borderRadius: @defaultBorderRadius;
+
+@raisedShadow: 0 2px 3px 0 @borderColor;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Icon */
+@dropdownIconSize: @relative12px;
+@dropdownIconMargin: 0 0 0 1em;
+
+/* Current Text */
+@textTransition: none;
+
+/* Menu */
+@menuBackground: #FFFFFF;
+@menuMargin: 0;
+@menuPadding: 0 0;
+@menuTop: 100%;
+@menuTextAlign: left;
+
+@menuBorderWidth: 1px;
+@menuBorderColor: @borderColor;
+@menuBorder: @menuBorderWidth solid @menuBorderColor;
+@menuBoxShadow: @raisedShadow;
+@menuBorderRadius: @borderRadius;
+@menuTransition: opacity @defaultDuration @defaultEasing;
+@menuMinWidth: e(%("calc(100%% + %d)", @menuBorderWidth * 2));
+@menuZIndex: 11;
+
+/* Text */
+@textLineHeight: 1em;
+@textLineHeightOffset: (@textLineHeight - 1em);
+@textCursorSpacing: 1px;
+
+/* Menu Item */
+@itemFontSize: @medium;
+@itemTextAlign: left;
+@itemBorder: none;
+@itemHeight: auto;
+@itemDivider: none;
+@itemColor: @textColor;
+@itemVerticalPadding: @mini;
+@itemHorizontalPadding: @large;
+@itemPadding: @itemVerticalPadding @itemHorizontalPadding;
+@itemFontWeight: @normal;
+@itemLineHeight: 1em;
+@itemLineHeightOffset: (@itemLineHeight - 1em);
+@itemTextTransform: none;
+@itemBoxShadow: none;
+@itemMinHeight: unit(@itemLineHeight + 2 * @itemVerticalPadding, rem);
+
+/* Vertical Item */
+@verticalItemMargin: 0.25em;
+
+/* Sub Menu */
+@subMenuTop: 0;
+@subMenuLeft: 100%;
+@subMenuRight: auto;
+@subMenuDistanceAway: -0.5em;
+@subMenuMargin: 0 @subMenuDistanceAway;
+@subMenuBorderRadius: @borderRadius;
+@subMenuZIndex: 21;
+
+/* Menu Header */
+@menuHeaderColor: @darkTextColor;
+@menuHeaderFontSize: @relative11px;
+@menuHeaderFontWeight: @bold;
+@menuHeaderTextTransform: uppercase;
+@menuHeaderMargin: 1rem 0 0.75rem;
+@menuHeaderPadding: 0 @itemHorizontalPadding;
+
+/* Menu Divider */
+@menuDividerMargin: 0.5em 0;
+@menuDividerColor: @internalBorderColor;
+@menuDividerSize: 1px;
+@menuDividerBorder: @menuDividerSize solid @menuDividerColor;
+
+/* Menu Input */
+@menuInputMargin: @large @mini;
+@menuInputMinWidth: 10rem;
+@menuInputVerticalPadding: 0.5em;
+@menuInputHorizontalPadding: @inputHorizontalPadding;
+@menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;
+
+/* Menu Image */
+@menuImageMaxHeight: 2em;
+@menuImageVerticalMargin: -(@menuImageMaxHeight - 1em) / 2;
+
+/* Item Sub-Element */
+@itemElementFloat: none;
+@itemElementDistance: @mini;
+@itemElementBottomDistance: @itemElementDistance / 2;
+
+/* Sub-Menu Dropdown Icon */
+@itemDropdownIconDistance: 1em;
+@itemDropdownIconFloat: right;
+@itemDropdownIconMargin: @itemLineHeightOffset 0 0 @itemDropdownIconDistance;
+
+/* Description */
+@itemDescriptionFloat: right;
+@itemDescriptionMargin: 0 0 0 1em;
+@itemDescriptionColor: @lightTextColor;
+
+/* Message */
+@messagePadding: @selectionItemPadding;
+@messageFontWeight: @normal;
+@messageColor: @unselectedTextColor;
+
+/* Floated Content */
+@floatedDistance: 1em;
+
+/*-------------------
+        Types
+--------------------*/
+
+/*------------
+   Selection
+--------------*/
+
+@selectionMinWidth: 14em;
+@selectionVerticalPadding: @inputVerticalPadding;
+@selectionHorizontalPadding: @inputHorizontalPadding;
+@selectionBorderEmWidth:  @relative1px;
+@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
+@selectionBackground: @inputBackground;
+@selectionDisplay: inline-block;
+@selectionIconDistance: @inputHorizontalPadding + (@glyphWidth * 2);
+@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding;
+@selectionZIndex: 10;
+
+@selectionItemDivider: 1px solid @solidInternalBorderColor;
+@selectionMessagePadding: @selectionItemPadding;
+
+/* <select> */
+@selectBorder: 1px solid @borderColor;
+@selectPadding: 0.5em;
+@selectVisibility: visible;
+@selectHeight: 38px;
+
+@selectionTextColor: @textColor;
+
+@selectionTextUnderlayIconOpacity: @disabledOpacity;
+@selectionTextUnderlayColor: @inputPlaceholderFocusColor;
+
+@selectionBoxShadow: none;
+@selectionBorderColor: @borderColor;
+@selectionBorder: 1px solid @selectionBorderColor;
+@selectionBorderRadius: @borderRadius;
+
+@selectionIconOpacity: 0.8;
+@selectionIconZIndex: 3;
+@selectionIconHitbox: @selectionVerticalPadding;
+@selectionIconMargin: -@selectionIconHitbox;
+@selectionIconPadding: @selectionIconHitbox / @dropdownIconSize;
+@selectionIconTransition: opacity @defaultDuration @defaultEasing;
+
+@selectionMenuBorderRadius: 0 0 @borderRadius @borderRadius;
+@selectionMenuBoxShadow: @raisedShadow;
+@selectionMenuItemBoxShadow: none;
+
+@selectionItemHorizontalPadding: @itemHorizontalPadding;
+@selectionItemVerticalPadding: @itemVerticalPadding;
+@selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding;
+
+@selectionTransition: @transition;
+@selectionMenuTransition: @menuTransition;
+
+/* Responsive */
+@selectionMobileMaxItems: 3;
+@selectionTabletMaxItems: 4;
+@selectionComputerMaxItems: 6;
+@selectionWidescreenMaxItems: 8;
+
+/* Derived */
+@selectedBorderEMWidth: 0.1em; /* 1px / em size */
+@selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
+@selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems);
+@selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems);
+@selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems);
+@selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems);
+
+/* Hover */
+@selectionHoverBorderColor: @selectedBorderColor;
+@selectionHoverBoxShadow: none;
+
+/* Focus */
+@selectionFocusBorderColor: @focusedFormMutedBorderColor;
+@selectionFocusBoxShadow: none;
+@selectionFocusMenuBoxShadow: @raisedShadow;
+
+/* Visible */
+@selectionVisibleTextFontWeight: @normal;
+@selectionVisibleTextColor: @hoveredTextColor;
+
+@selectionVisibleBorderColor: @focusedFormMutedBorderColor;
+@selectionVisibleBoxShadow: @raisedShadow;
+@selectionVisibleMenuBoxShadow: @raisedShadow;
+
+/* Visible Hover */
+@selectionActiveHoverBorderColor: @focusedFormMutedBorderColor;
+@selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow;
+@selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;
+
+@selectionVisibleConnectingBorder: 0;
+@selectionVisibleIconOpacity: '';
+
+/*--------------
+     Search
+--------------*/
+
+@searchMinWidth: '';
+
+/* Search Selection */
+@searchSelectionLineHeight: @inputLineHeight;
+@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
+@searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset);
+@searchSelectionHorizontalPadding: @selectionHorizontalPadding;
+@searchSelectionInputPadding: @searchSelectionVerticalPadding @selectionIconDistance @searchSelectionVerticalPadding @searchSelectionHorizontalPadding;
+
+@searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight;
+@searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight;
+@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
+@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
+
+/* Inline */
+@inlineIconMargin: 0 @relative3px 0 @relative3px;
+@inlineTextColor: inherit;
+@inlineTextFontWeight: @bold;
+@inlineMenuDistance: @relative3px;
+@inlineMenuBorderRadius: @borderRadius;
+
+
+/*--------------
+    Multiple
+--------------*/
+
+/* Split Actual Padding Between Child and Parent (allows for label spacing) */
+@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
+@multipleSelectionLeftPadding: @relative5px;
+@multipleSelectionRightPadding: @selectionIconDistance;
+@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
+
+/* Child Elements */
+@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
+@multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding);
+@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0 @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin;
+@multipleSelectionChildLineHeight: @relative17px;
+@multipleSelectionSearchStartWidth: (@glyphWidth * 2);
+
+/* Dropdown Icon */
+@multipleSelectionDropdownIconMargin: '';
+@multipleSelectionDropdownIconPadding: '';
+
+@multipleSelectionSearchAfterLabelDistance: @relative2px;
+
+/* Selection Label */
+@labelSize: @relativeMedium;
+@labelHorizontalMargin: @4px;
+@labelVerticalMargin: @2px;
+@labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0;
+@labelBorderWidth: 1px;
+@labelBoxShadow: 0 0 0 @labelBorderWidth @borderColor inset;
+
+@labelVerticalPadding: @relative5px;
+@labelHorizontalPadding: @relativeMini;
+@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
+
+@imageLabelHeight: (1em + @labelVerticalPadding * 2);  /* Logic adopted from label.less */
+@imageLabelImageMargin: -@labelVerticalPadding @labelHorizontalPadding -@labelVerticalPadding -@labelHorizontalPadding;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Hovered */
+@hoveredItemBackground: @transparentBlack;
+@hoveredItemColor: @selectedTextColor;
+@hoveredZIndex: @menuZIndex + 2;
+
+/* Default Text */
+@defaultTextColor: @inputPlaceholderColor;
+@defaultTextFocusColor: @inputPlaceholderFocusColor;
+
+/* Loading */
+@loadingZIndex: -1;
+
+/* Active Menu Item */
+@activeItemZIndex: @menuZIndex + 1;
+@activeItemBackground: transparent;
+@activeItemBoxShadow: none;
+@activeItemFontWeight: @bold;
+@activeItemColor: @selectedTextColor;
+
+/* Selected */
+@selectedBackground: @subtleTransparentBlack;
+@selectedColor: @selectedTextColor;
+
+/* Clearable */
+@clearableIconOpacity: 0.8;
+@clearableIconActiveOpacity: 1;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Scrolling */
+@scrollingMenuWidth: 100%;
+@scrollingMenuItemBorder: none;
+@scrollingMenuRightItemPadding: e(%("calc(%d + %d)", @itemHorizontalPadding, @scrollbarWidth));
+
+@scrollingMobileMaxItems: 4;
+@scrollingTabletMaxItems: 6;
+@scrollingComputerMaxItems: 8;
+@scrollingWidescreenMaxItems: 12;
+
+@scrollingBorderEMWidth: 0; /* 0 / em size */
+@scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @scrollingBorderEMWidth;
+@scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems);
+@scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems);
+@scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems);
+@scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems);
+
+/* Upward */
+@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
+@upwardMenuBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
+@upwardSelectionMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
+@upwardMenuBorderRadius: @borderRadius @borderRadius 0 0;
+@upwardSelectionHoverBoxShadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
+@upwardSelectionVisibleBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
+@upwardSelectionActiveHoverBoxShadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
+@upwardSelectionActiveHoverMenuBoxShadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
+
+/* Flyout Direction */
+@leftMenuDropdownIconFloat: left;
+@leftMenuDropdownIconMargin: @itemLineHeightOffset 0 0 0;
+
+/* Left */
+@leftSubMenuBorderRadius: @borderRadius;
+@leftSubMenuMargin: 0 @subMenuDistanceAway 0 0;
+
+/* Simple */
+@simpleTransitionDuration: @defaultDuration;
+@simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
+
+/* Floating */
+@floatingMenuDistance: 0.5em;
+@floatingMenuBoxShadow: @floatingShadow;
+@floatingMenuBorderRadius: @borderRadius;
+
+/* Pointing */
+@pointingArrowOffset: -(@pointingArrowSize / 2);
+@pointingArrowDistanceFromEdge: 1em;
+
+@pointingArrowBackground: @white;
+@pointingArrowZIndex: 2;
+@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @menuBorderColor;
+@pointingArrowSize: @relative7px;
+
+@pointingMenuDistance: @mini;
+@pointingMenuBorderRadius: @borderRadius;
+
+/* Pointing Upward */
+@pointingUpwardMenuBorderRadius: @borderRadius;
+@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @menuBorderColor;
+
+/* Scrollhint */
+@scrollhintWidth: 0.25em;
+@scrollhintRightBorder: @scrollhintWidth solid;
+@scrollhintLeftBorder: 0;
+@scrollhintZIndex: 15;
+@scrollhintDuration: 2s;
+@scrollhintEasing: @defaultEasing;
+@scrollhintIteration: 2;
+@scrollhintOffsetRight: @scrollhintWidth;
+@scrollhintStartColor: rgba(0, 0, 0, 0.75);
+@scrollhintEndColor: rgba(0, 0, 0, 0);
+
+/*--------------
+    Inverted
+---------------*/
+
+/* General rules and basic dropdowns */
+@invertedMenuBackground: @black;
+@invertedMenuColor: @invertedMutedTextColor;
+@invertedMenuBorderColor: @strongTransparentWhite;
+@invertedMenuBorder: 1px solid @invertedMenuBorderColor;
+@invertedMenuBoxShadow: none;
+
+@invertedPointingArrowBackground: @black;
+@invertedPointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0 0 @invertedMenuBorderColor;
+
+@invertedHoveredItemBackground: @transparentWhite;
+@invertedHoveredItemColor: @invertedMenuColor;
+
+@invertedActiveItemBackground: transparent;
+@invertedActiveItemColor: @invertedMenuColor;
+@invertedActiveItemBoxShadow: none;
+
+@invertedSelectedBackground: @strongTransparentWhite;
+@invertedSelectedColor: @invertedMenuColor;
+
+@invertedMenuHeaderColor: @white;
+@invertedItemDescriptionColor: @invertedUnselectedTextColor;
+
+@invertedMenuDividerBorder: @menuDividerSize solid @strongTransparentWhite;
+
+/* Selection */
+@invertedSelectionBorderColor: @strongTransparentWhite;
+@invertedSelectionBorder: 1px solid @invertedSelectionBorderColor;
+@invertedSelectionBackground: @black;
+@invertedSelectionTextColor: @invertedMenuColor;
+@invertedSelectionInputTextColor: @white;
+
+@invertedSelectionHoverBorderColor: rgba(255, 255, 255, 0.25);
+@invertedSelectionHoverBoxShadow: none;
+
+@invertedDefaultTextColor: @invertedUnselectedTextColor;
+@invertedDefaultTextFocusColor: @invertedLightTextColor;
+
+@invertedSelectionVisibleTextColor: @invertedTextColor;
+
+@invertedSelectionTextUnderlayIconOpacity: 0.45;
+@invertedSelectionTextUnderlayColor: @invertedLightTextColor;
+
+@invertedSelectionItemDivider: 1px solid #242526;
+@invertedSelectionVisibleBorderColor: @strongTransparentWhite;
+
+@invertedMessageColor: @invertedUnselectedTextColor;
+
+@invertedInputHighlightBackground: rgba(255, 255, 255, 0.25);
+@invertedInputHighlightColor: @invertedMutedTextColor;
+
+/* Multiple */
+/*@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.06);
+@invertedLabelBackgroundImage: none;
+@invertedLabelColor: rgba(255, 255, 255, 0.6);
+@invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0.16) inset;
+
+@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.12);
+@invertedLabelHoverBackgroundImage: none;
+@invertedLabelHoverTextColor: rgba(255, 255, 255, 0.7);*/
+
+@invertedLabelBackgroundColor: rgba(255, 255, 255, 0.7);
+@invertedLabelBackgroundImage: none;
+@invertedLabelColor: rgba(0, 0, 0, 1);
+@invertedLabelBoxShadow: 0 0 0 @labelBorderWidth rgba(255, 255, 255, 0) inset;
+
+@invertedLabelHoverBackgroundColor: rgba(255, 255, 255, 0.9);
+@invertedLabelHoverBackgroundImage: none;
+@invertedLabelHoverTextColor: @invertedLabelColor;
+
+@invertedLabelIconOpacity: 0.6;
+@invertedLabelIconHoverOpacity: 0.8;
+
+/* Scrollhint */
+@invertedScrollhintStartColor: rgba(255, 255, 255, 0.75);
+@invertedScrollhintEndColor: rgba(255, 255, 255, 0);
diff --git a/semantic/src/themes/default/modules/embed.overrides b/semantic/src/themes/default/modules/embed.overrides
new file mode 100644
index 0000000..3f14e70
--- /dev/null
+++ b/semantic/src/themes/default/modules/embed.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        Video Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/embed.variables b/semantic/src/themes/default/modules/embed.variables
new file mode 100644
index 0000000..0d14bc6
--- /dev/null
+++ b/semantic/src/themes/default/modules/embed.variables
@@ -0,0 +1,53 @@
+/*******************************
+             Video
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+/* Simple */
+@background: @lightGrey;
+@transitionDuration: 0.5s;
+@transitionEasing: @defaultEasing;
+
+/* Placeholder */
+@placeholderUnderlay: @background;
+
+/* Placeholder Overlayed Background */
+@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
+@placeholderBackgroundOpacity: 0.5;
+@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;
+
+/* Icon */
+@iconBackground: @veryStrongTransparentBlack;
+@iconSize: 6rem;
+@iconTransition:
+  opacity @transitionDuration @transitionEasing,
+  color @transitionDuration @transitionEasing
+;
+@iconColor: @white;
+@iconShadow:
+  0 2px 10px rgba(34, 36, 38, 0.2)
+;
+@iconZIndex: 10;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Hover */
+@hoverPlaceholderBackground: @placeholderBackground;
+@hoverPlaceholderBackgroundOpacity: 1;
+@hoverIconColor: @white;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Aspect Ratios */
+@squareRatio: (1/1) * 100%;
+@widescreenRatio: (9/16) * 100%;
+@ultraWidescreenRatio: (9/21) * 100%;
+@standardRatio: (3/4) * 100%;
diff --git a/semantic/src/themes/default/modules/modal.overrides b/semantic/src/themes/default/modules/modal.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/modal.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/modal.variables b/semantic/src/themes/default/modules/modal.variables
new file mode 100644
index 0000000..15fa630
--- /dev/null
+++ b/semantic/src/themes/default/modules/modal.variables
@@ -0,0 +1,250 @@
+/*******************************
+             Modal
+*******************************/
+
+@background: @white;
+@border: none;
+@zIndex: 1001;
+@borderRadius: @defaultBorderRadius;
+@transformOrigin: 50% 25%;
+@boxShadow:
+  1px 3px 3px 0 rgba(0, 0, 0, 0.2),
+  1px 3px 15px 2px rgba(0, 0, 0, 0.2)
+;
+
+/* Close Icon */
+@closeOpacity: 0.8;
+@closeSize: 1.25em;
+@closeColor: @white;
+
+@closeHitbox: 2.25rem;
+@closeDistance: 0.25rem;
+@closeHitBoxOffset: (@closeHitbox - 1rem) / 2;
+@closePadding: @closeHitBoxOffset 0 0 0;
+@closeTop: -(@closeDistance + @closeHitbox);
+@closeRight: -(@closeDistance + @closeHitbox);
+
+/* Header */
+@headerMargin: 0;
+@headerVerticalPadding: 1.25rem;
+@headerHorizontalPadding: 1.5rem;
+@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
+@headerBackground: @white;
+@headerColor: @darkTextColor;
+@headerFontSize: @huge;
+@headerBoxShadow: none;
+@headerFontWeight: @bold;
+@headerFontFamily: @headerFont;
+@headerBorder: 1px solid @borderColor;
+
+/* Content */
+@contentFontSize: 1em;
+@contentPadding: 1.5rem;
+@contentLineHeight: 1.4;
+@contentBackground: #FFFFFF;
+
+/* Image / Description */
+@imageWidth: '';
+@imageIconSize: 8rem;
+@imageVerticalAlign: start;
+
+@descriptionDistance: 2em;
+@descriptionMinWidth: '';
+@descriptionWidth: auto;
+@descriptionVerticalAlign: start;
+
+/* Modal Actions */
+@actionBorder: 1px solid @borderColor;
+@actionBackground: @offWhite;
+@actionPadding: 1rem 1rem;
+@actionAlign: right;
+
+@buttonDistance: 0.75em;
+
+/* Inner Close Position (Tablet/Mobile) */
+@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
+@innerCloseRight: 1rem;
+@innerCloseColor: @textColor;
+
+/* Mobile Positions */
+@mobileHeaderPadding: 0.75rem 1rem;
+@mobileContentPadding: 1rem;
+@mobileImagePadding: 0 0 1rem;
+@mobileDescriptionPadding: 1rem 0 ;
+@mobileButtonDistance: 1rem;
+@mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance);
+@mobileImageIconSize: 5rem;
+@mobileCloseTop: 0.5rem;
+@mobileCloseRight: 0.5rem;
+
+/* Responsive Widths */
+@mobileWidth: 95%;
+@tabletWidth: 88%;
+@computerWidth: 850px;
+@largeMonitorWidth: 900px;
+@widescreenMonitorWidth: 950px;
+
+@mobileMargin: 0 0 0 0;
+@tabletMargin: 0 0 0 0;
+@computerMargin: 0 0 0 0;
+@largeMonitorMargin: 0 0 0 0;
+@widescreenMonitorMargin: 0 0 0 0;
+
+@fullScreenWidth: 95%;
+@fullScreenOffset: (100% - @fullScreenWidth) / 2;
+@fullScreenMargin: 1em auto;
+
+/* Coupling */
+@invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
+
+/*-------------------
+       States
+--------------------*/
+
+@loadingZIndex: -1;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Basic */
+@basicModalHeaderColor: @white;
+@basicModalColor: @white;
+@basicModalCloseTop: 1rem;
+@basicModalCloseRight: 1.5rem;
+@basicInnerCloseColor: @white;
+
+@basicInvertedModalColor: @textColor;
+@basicInvertedModalHeaderColor: @darkTextColor;
+
+/* Aligned */
+@topAlignedMargin: 5vh;
+@mobileTopAlignedMargin: 1rem;
+@bottomAlignedMargin: @topAlignedMargin;
+@mobileBottomAlignedMargin: @mobileTopAlignedMargin;
+
+/* Scrolling Margin */
+@scrollingMargin: 2rem;
+@mobileScrollingMargin: @mobileTopAlignedMargin;
+
+/* Scrolling Content */
+@scrollingContentMaxHeight: calc(80vh - 10rem);
+@overlayFullscreenScrollingContentMaxHeight: calc(100vh - 9.1rem);
+@overlayFullscreenScrollingContentMaxHeightMobile: calc(100vh - 8.1rem);
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Size Widths */
+@miniRatio: 0.4;
+@tinyRatio: 0.6;
+@smallRatio: 0.8;
+@largeRatio: 1.2;
+@bigRatio: 1.4;
+@hugeRatio: 1.6;
+@massiveRatio: 1.8;
+
+/* Derived Responsive Sizes */
+@miniHeaderSize: 1.3em;
+@miniMobileWidth: @mobileWidth;
+@miniTabletWidth: (@tabletWidth * @miniRatio);
+@miniComputerWidth: (@computerWidth * @miniRatio);
+@miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
+@miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
+
+@miniMobileMargin: 0 0 0 0;
+@miniTabletMargin: 0 0 0 0;
+@miniComputerMargin: 0 0 0 0;
+@miniLargeMonitorMargin: 0 0 0 0;
+@miniWidescreenMonitorMargin: 0 0 0 0;
+
+@tinyHeaderSize: 1.3em;
+@tinyMobileWidth: @mobileWidth;
+@tinyTabletWidth: (@tabletWidth * @tinyRatio);
+@tinyComputerWidth: (@computerWidth * @tinyRatio);
+@tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
+@tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
+
+@tinyMobileMargin: 0 0 0 0;
+@tinyTabletMargin: 0 0 0 0;
+@tinyComputerMargin: 0 0 0 0;
+@tinyLargeMonitorMargin: 0 0 0 0;
+@tinyWidescreenMonitorMargin: 0 0 0 0;
+
+@smallHeaderSize: 1.3em;
+@smallMobileWidth: @mobileWidth;
+@smallTabletWidth: (@tabletWidth * @smallRatio);
+@smallComputerWidth: (@computerWidth * @smallRatio);
+@smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
+@smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
+
+@smallMobileMargin: 0 0 0 0;
+@smallTabletMargin: 0 0 0 0;
+@smallComputerMargin: 0 0 0 0;
+@smallLargeMonitorMargin: 0 0 0 0;
+@smallWidescreenMonitorMargin: 0 0 0 0;
+
+@largeHeaderSize: 1.6em;
+@largeMobileWidth: @mobileWidth;
+@largeTabletWidth: @tabletWidth;
+@largeComputerWidth: (@computerWidth * @largeRatio);
+@largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
+@largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
+
+@largeMobileMargin: 0 0 0 0;
+@largeTabletMargin: 0 0 0 0;
+@largeComputerMargin: 0 0 0 0;
+@largeLargeMonitorMargin: 0 0 0 0;
+@largeWidescreenMonitorMargin: 0 0 0 0;
+
+@bigHeaderSize: 1.6em;
+@bigMobileWidth: @mobileWidth;
+@bigTabletWidth: @tabletWidth;
+@bigComputerWidth: (@computerWidth * @bigRatio);
+@bigLargeMonitorWidth: (@largeMonitorWidth * @bigRatio);
+@bigWidescreenMonitorWidth: (@widescreenMonitorWidth * @bigRatio);
+
+@bigMobileMargin: 0 0 0 0;
+@bigTabletMargin: 0 0 0 0;
+@bigComputerMargin: 0 0 0 0;
+@bigLargeMonitorMargin: 0 0 0 0;
+@bigWidescreenMonitorMargin: 0 0 0 0;
+
+@hugeHeaderSize: 1.6em;
+@hugeMobileWidth: @mobileWidth;
+@hugeTabletWidth: @tabletWidth;
+@hugeComputerWidth: (@computerWidth * @hugeRatio);
+@hugeLargeMonitorWidth: (@largeMonitorWidth * @hugeRatio);
+@hugeWidescreenMonitorWidth: (@widescreenMonitorWidth * @hugeRatio);
+
+@hugeMobileMargin: 0 0 0 0;
+@hugeTabletMargin: 0 0 0 0;
+@hugeComputerMargin: 0 0 0 0;
+@hugeLargeMonitorMargin: 0 0 0 0;
+@hugeWidescreenMonitorMargin: 0 0 0 0;
+
+@massiveHeaderSize: 1.8em;
+@massiveMobileWidth: @mobileWidth;
+@massiveTabletWidth: @tabletWidth;
+@massiveComputerWidth: (@computerWidth * @massiveRatio);
+@massiveLargeMonitorWidth: (@largeMonitorWidth * @massiveRatio);
+@massiveWidescreenMonitorWidth: (@widescreenMonitorWidth * @massiveRatio);
+
+@massiveMobileMargin: 0 0 0 0;
+@massiveTabletMargin: 0 0 0 0;
+@massiveComputerMargin: 0 0 0 0;
+@massiveLargeMonitorMargin: 0 0 0 0;
+@massiveWidescreenMonitorMargin: 0 0 0 0;
+
+/*-------------------
+      Inverted
+--------------------*/
+@invertedBackground: rgba(0,0,0,.9);
+@invertedCloseColor: @white;
+@invertedHeaderColor: @white;
+@invertedHeaderBackgroundColor: @darkTextColor;
+@invertedActionBackground: #191A1B;
+@invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
+@invertedActionColor: @white;
+@invertedDimmerCloseColor: rgba(0,0,0,.85);
diff --git a/semantic/src/themes/default/modules/nag.overrides b/semantic/src/themes/default/modules/nag.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/nag.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/nag.variables b/semantic/src/themes/default/modules/nag.variables
new file mode 100644
index 0000000..25da572
--- /dev/null
+++ b/semantic/src/themes/default/modules/nag.variables
@@ -0,0 +1,74 @@
+/*******************************
+             Nag
+*******************************/
+
+/*--------------
+   Collection
+---------------*/
+
+@position: relative;
+@width: 100%;
+@zIndex: 999;
+@margin: 0;
+
+@background: #555555;
+@opacity: 0.95;
+@minHeight: 0;
+@padding: 0.75em 1em;
+@lineHeight: 1em;
+@boxShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+
+@fontSize: 1rem;
+@textAlign: center;
+@color: @textColor;
+
+@transition: 0.2s background ease;
+
+
+/*--------------
+    Elements
+---------------*/
+
+/* Title */
+@titleColor: @white;
+@titleMargin: 0 0.5em;
+
+@closeSize: 1em;
+@closeMargin: (-@closeSize / 2) 0 0;
+@closeTop: 50%;
+@closeRight: 1em;
+@closeColor: @white;
+@closeTransition: opacity 0.2s ease;
+@closeOpacity: 0.4;
+
+
+/*--------------
+      States
+---------------*/
+
+/* Hover */
+@nagHoverBackground: @background;
+@nagHoverOpacity: 1;
+
+@closeHoverOpacity: 1;
+
+/*--------------
+   Variations
+---------------*/
+
+/* Top / Bottom */
+@top: 0;
+@bottom: 0;
+@borderRadius: @defaultBorderRadius;
+@topBorderRadius: 0 0 @borderRadius @borderRadius;
+@bottomBorderRadius: @borderRadius @borderRadius 0 0;
+
+/* Inverted */
+@invertedBackground: @darkWhite;
+
+/*--------------
+      Plural
+---------------*/
+
+@groupedBorderRadius: 0;
+
diff --git a/semantic/src/themes/default/modules/popup.overrides b/semantic/src/themes/default/modules/popup.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/popup.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/popup.variables b/semantic/src/themes/default/modules/popup.variables
new file mode 100644
index 0000000..acd2941
--- /dev/null
+++ b/semantic/src/themes/default/modules/popup.variables
@@ -0,0 +1,138 @@
+/*******************************
+             Popup
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@zIndex: 1900;
+@background: @white;
+
+@maxWidth: 250px;
+@borderColor: @solidBorderColor;
+@borderWidth: 1px;
+@boxShadow: @floatingShadow;
+@color: @textColor;
+
+@verticalPadding: 0.833em;
+@horizontalPadding: 1em;
+@fontWeight: @normal;
+@fontStyle: @normal;
+@borderRadius: @defaultBorderRadius;
+
+/*-------------------
+       Parts
+--------------------*/
+
+/* Placement */
+@arrowSize: @relative10px;
+@arrowWidth: 1em;
+@arrowDistanceFromEdge: 1em;
+@boxArrowOffset: 0;
+@popupDistanceAway: @arrowSize;
+
+
+/* Header */
+@headerFontFamily: @headerFont;
+@headerFontWeight: @bold;
+@headerFontSize: @relativeLarge;
+@headerDistance: @relative7px;
+@headerLineHeight: 1.2;
+
+/* Content Border */
+@border: @borderWidth solid @borderColor;
+
+/* Arrow */
+@arrowBackground: @background;
+@arrowZIndex: 1901;
+@arrowJitter: 0.05em;
+@arrowOffset: -(@arrowSize / 2) + @arrowJitter;
+
+@arrowStroke: @borderWidth;
+@arrowColor: darken(@borderColor, 10);
+
+/* Arrow color by position */
+@arrowTopBackground: @arrowBackground;
+@arrowCenterBackground: @arrowBackground;
+@arrowBottomBackground: @arrowBackground;
+
+@arrowBoxShadow: @arrowStroke @arrowStroke 0 0 @arrowColor;
+@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0 0 @arrowColor;
+@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0 0 @arrowColor;
+@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0 0 @arrowColor;
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Tooltip */
+@tooltipBackground: @background;
+@tooltipBorderRadius: @borderRadius;
+@tooltipPadding: @verticalPadding @horizontalPadding;
+@tooltipFontWeight: @fontWeight;
+@tooltipFontStyle: @fontStyle;
+@tooltipColor: @color;
+@tooltipBorder: @border;
+@tooltipBoxShadow: @boxShadow;
+@tooltipMaxWidth: none;
+@tooltipFontSize: @medium;
+@tooltipLineHeight: @lineHeight;
+@tooltipDistanceAway: @relative7px;
+@tooltipZIndex: 1900;
+@tooltipDuration: @defaultDuration;
+@tooltipEasing: @defaultEasing;
+
+/* Inverted */
+@tooltipInvertedBackground: @invertedBackground;
+@tooltipInvertedColor: @invertedColor;
+@tooltipInvertedBorder: @invertedBorder;
+@tooltipInvertedBoxShadow: @invertedBoxShadow;
+@tooltipInvertedHeaderBackground: @invertedHeaderBackground;
+@tooltipInvertedHeaderColor: @invertedHeaderColor;
+
+/* Arrow */
+@tooltipArrowVerticalOffset: -@2px;
+@tooltipArrowHorizontalOffset: -@1px;
+@tooltipArrowBoxShadow: @arrowBoxShadow;
+@tooltipArrowBackground: @arrowBackground;
+@tooltipArrowTopBackground: @arrowTopBackground;
+@tooltipArrowCenterBackground: @arrowCenterBackground;
+@tooltipArrowBottomBackground: @arrowBottomBackground;
+
+/*-------------------
+       Coupling
+--------------------*/
+
+/* Grid Inside Popup */
+@nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */
+@nestedGridWidth: e("calc(100% + 1.75rem)");
+
+/*-------------------
+       States
+--------------------*/
+
+@loadingZIndex: -1;
+
+/*-------------------
+       Variations
+--------------------*/
+
+/* Wide */
+@wideWidth: 350px;
+@veryWideWidth: 550px;
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedColor: @white;
+@invertedBorder: none;
+@invertedBoxShadow: none;
+
+@invertedHeaderBackground: none;
+@invertedHeaderColor: @white;
+@invertedArrowColor: @invertedBackground;
+
+/* Arrow color by position */
+@invertedArrowTopBackground: @invertedBackground;
+@invertedArrowCenterBackground: @invertedBackground;
+@invertedArrowBottomBackground: @invertedBackground;
diff --git a/semantic/src/themes/default/modules/progress.overrides b/semantic/src/themes/default/modules/progress.overrides
new file mode 100644
index 0000000..cdba171
--- /dev/null
+++ b/semantic/src/themes/default/modules/progress.overrides
@@ -0,0 +1,3 @@
+/*******************************
+            Progress
+*******************************/
diff --git a/semantic/src/themes/default/modules/progress.variables b/semantic/src/themes/default/modules/progress.variables
new file mode 100644
index 0000000..83c14af
--- /dev/null
+++ b/semantic/src/themes/default/modules/progress.variables
@@ -0,0 +1,129 @@
+/*******************************
+            Progress
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@verticalSpacing: 1em;
+@margin: @verticalSpacing 0 (@labelHeight + @verticalSpacing);
+@firstMargin: 0 0 (@labelHeight + @verticalSpacing);
+@lastMargin: 0 0 (@labelHeight);
+
+@background: @strongTransparentBlack;
+@border: none;
+@boxShadow: none;
+@padding: 0;
+@borderRadius: @defaultBorderRadius;
+
+/* Bar */
+@barPosition: relative;
+@barHeight: 1.75em;
+@barBackground: #888888;
+@barBorderRadius: @borderRadius;
+@barTransitionEasing: @defaultEasing;
+@barTransitionDuration: @defaultDuration;
+@barTransition:
+  width @barTransitionDuration @barTransitionEasing,
+  background-color @barTransitionDuration @barTransitionEasing
+;
+@barInitialWidth: 0;
+@barMinWidth: 2em;
+
+/* Progress Bar Label */
+@progressWidth: auto;
+@progressSize: @relativeSmall;
+@progressPosition: absolute;
+@progressTop: 50%;
+@progressRight: 0.5em;
+@progressLeft: auto;
+@progressBottom: auto;
+@progressOffset: -0.5em;
+@progressColor: @invertedLightTextColor;
+@progressTextShadow: none;
+@progressFontWeight: @bold;
+@progressTextAlign: left;
+
+/* Label */
+@labelWidth: 100%;
+@labelHeight: 1.5em;
+@labelSize: 1em;
+@labelPosition: absolute;
+@labelTop: 100%;
+@labelLeft: 0;
+@labelRight: auto;
+@labelBottom: auto;
+@labelOffset: (@labelHeight - 1.3em);
+@labelColor: @textColor;
+@labelTextShadow: none;
+@labelFontWeight: @bold;
+@labelTextAlign: center;
+@labelTransition: color 0.4s @defaultEasing;
+
+/*-------------------
+        Types
+--------------------*/
+
+@indicatingFirstColor: #D95C5C;
+@indicatingSecondColor: #EFBC72;
+@indicatingThirdColor: #E6BB48;
+@indicatingFourthColor: #DDC928;
+@indicatingFifthColor: #B4D95C;
+@indicatingSixthColor: #66DA81;
+
+@indicatingFirstLabelColor: @textColor;
+@indicatingSecondLabelColor: @textColor;
+@indicatingThirdLabelColor: @textColor;
+@indicatingFourthLabelColor: @textColor;
+@indicatingFifthLabelColor: @textColor;
+@indicatingSixthLabelColor: @textColor;
+
+@invertedIndicatingFirstLabelColor: @invertedTextColor;
+@invertedIndicatingSecondLabelColor: @invertedTextColor;
+@invertedIndicatingThirdLabelColor: @invertedTextColor;
+@invertedIndicatingFourthLabelColor: @invertedTextColor;
+@invertedIndicatingFifthLabelColor: @invertedTextColor;
+@invertedIndicatingSixthLabelColor: @invertedTextColor;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Active */
+@activePulseColor: @white;
+@activePulseMaxOpacity: 0.3;
+@activePulseDuration: 2s;
+@activeMinWidth: @barMinWidth;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Attached */
+@attachedBackground: transparent;
+@attachedHeight: 0.2rem;
+@attachedBorderRadius: @borderRadius;
+
+/* Inverted */
+@invertedBackground: @transparentWhite;
+@invertedBorder: none;
+@invertedBarBackground: @barBackground;
+@invertedProgressColor: @black;
+@invertedLabelColor: @white;
+
+/* Sizing */
+@miniBarHeight: 0.3em;
+@tinyBarHeight: 0.5em;
+@smallBarHeight: 1em;
+@largeBarHeight: 2.5em;
+@bigBarHeight: 3.5em;
+@hugeBarHeight: 4em;
+@massiveBarHeight: 5em;
+
+/* Indeterminate */
+@indeterminatePulseColor: @white;
+@indeterminatePulseDuration: @activePulseDuration;
+@indeterminatePulseDurationSlow: 4s;
+@indeterminatePulseDurationFast: 1s;
diff --git a/semantic/src/themes/default/modules/rating.overrides b/semantic/src/themes/default/modules/rating.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/rating.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/rating.variables b/semantic/src/themes/default/modules/rating.variables
new file mode 100644
index 0000000..f7ae98e
--- /dev/null
+++ b/semantic/src/themes/default/modules/rating.variables
@@ -0,0 +1,47 @@
+/*******************************
+             Rating
+*******************************/
+
+@margin: 0 @relativeMini;
+@whiteSpace: nowrap;
+@verticalAlign: baseline;
+
+@iconCursor: pointer;
+@iconWidth: 1.25em;
+@iconHeight: auto;
+@iconTransition:
+  opacity @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing,
+  text-shadow @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
+;
+
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Standard */
+@inactiveBackground: transparent;
+@inactiveColor: rgba(0, 0, 0, 0.15);
+
+@selectedBackground: @inactiveBackground;
+@selectedColor: @textColor;
+
+@activeBackground: @inactiveBackground;
+@activeColor: @darkTextColor;
+
+@shadowWidth: 1px;
+
+/*-------------------
+        States
+--------------------*/
+
+@interactiveActiveIconOpacity: 1;
+@interactiveSelectedIconOpacity: 1;
+
+/*-------------------
+      Variations
+--------------------*/
+
+@massive: 2rem;
diff --git a/semantic/src/themes/default/modules/search.overrides b/semantic/src/themes/default/modules/search.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/search.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/search.variables b/semantic/src/themes/default/modules/search.variables
new file mode 100644
index 0000000..d22803e
--- /dev/null
+++ b/semantic/src/themes/default/modules/search.variables
@@ -0,0 +1,181 @@
+/*******************************
+            Search
+*******************************/
+
+/* Search Prompt */
+@promptBackground: @inputBackground;
+@promptVerticalPadding: @inputVerticalPadding;
+@promptHorizontalPadding: @inputHorizontalPadding;
+@promptLineHeight: @inputLineHeight;
+@promptFontSize: @relativeMedium;
+@promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
+@promptBorder: 1px solid @borderColor;
+@promptBorderRadius: @circularRadius;
+@promptColor: @textColor;
+@promptTransition:
+  background-color @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+@promptBoxShadow: 0 0 0 0 transparent inset;
+
+/* Mobile */
+@mobileMaxWidth: e("calc(100vw - 2rem)");
+
+/* Result Box */
+@resultsWidth: 18em;
+@resultsBackground: #FFFFFF;
+@resultsDistance: 0.5em;
+@resultsBorderRadius: @defaultBorderRadius;
+@resultsBorder: 1px solid @solidBorderColor;
+@resultsBoxShadow: @floatingShadow;
+
+/* Result */
+@resultFontSize: 1em;
+@resultVerticalPadding: @relativeTiny;
+@resultHorizontalPadding: @relativeLarge;
+@resultPadding: @resultVerticalPadding @resultHorizontalPadding;
+@resultTextColor: @textColor;
+@resultLineHeight: 1.33;
+@resultDivider: 1px solid @internalBorderColor;
+@resultLastDivider: none;
+
+/* Result Image */
+@resultImageFloat: right;
+@resultImageBackground: none;
+@resultImageWidth: 5em;
+@resultImageHeight: 3em;
+@resultImageBorderRadius: 0.25em;
+@resultImageMargin: 0 6em 0 0;
+
+/* Result Content */
+@resultTitleFont: @headerFont;
+@resultTitleMargin: -@headerLineHeightOffset 0 0;
+@resultTitleFontWeight: @bold;
+@resultTitleFontSize: @relativeMedium;
+@resultTitleColor: @darkTextColor;
+
+/* Result Scrolling */
+@scrollingMobileMaxResults: 4;
+@scrollingTabletMaxResults: 6;
+@scrollingComputerMaxResults: 8;
+@scrollingWidescreenMaxResults: 12;
+
+@scrollingResultHeight: (@resultVerticalPadding * 2) + @resultLineHeight;
+@scrollingMobileMaxResultsHeight: (@scrollingResultHeight * @scrollingMobileMaxResults);
+@scrollingTabletMaxResultsHeight: (@scrollingResultHeight * @scrollingTabletMaxResults);
+@scrollingComputerMaxResultsHeight: (@scrollingResultHeight * @scrollingComputerMaxResults);
+@scrollingWidescreenMaxResultsHeight: (@scrollingResultHeight * @scrollingWidescreenMaxResults);
+
+/* Description */
+@resultDescriptionFontSize: @relativeSmall;
+@resultDescriptionDistance: 0;
+@resultDescriptionColor: @lightTextColor;
+
+/* Price */
+@resultPriceFloat: right;
+@resultPriceColor: @green;
+
+/* Special Message */
+@messageVerticalPadding: 1em;
+@messageHorizontalPadding: 1em;
+@messageHeaderFontSize: @medium;
+@messageHeaderFontWeight: @bold;
+@messageHeaderColor: @textColor;
+@messageDescriptionDistance: 0.25rem;
+@messageDescriptionFontSize: 1em;
+@messageDescriptionColor: @textColor;
+
+/* All Results Link */
+@actionBorder: none;
+@actionBackground: @darkWhite;
+@actionPadding: @relativeSmall @relativeMedium;
+@actionColor: @textColor;
+@actionFontWeight: @bold;
+@actionAlign: center;
+
+
+/*******************************
+            States
+*******************************/
+
+/* Focus */
+@promptFocusBackground: @promptBackground;
+@promptFocusBorderColor: @selectedBorderColor;
+@promptFocusColor: @selectedTextColor;
+
+/* Hover */
+@resultHoverBackground: @offWhite;
+@actionHoverBackground: #E0E0E0;
+
+/* Loading */
+@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+
+/* Active Category */
+@categoryActiveBackground: @darkWhite;
+@categoryNameActiveColor: @textColor;
+
+/* Active Result */
+@resultActiveBorderLeft: @internalBorderColor;
+@resultActiveBackground: @darkWhite;
+@resultActiveBoxShadow: none;
+@resultActiveTitleColor: @darkTextColor;
+@resultActiveDescriptionColor: @darkTextColor;
+@resultsZIndex: 998;
+
+
+/*******************************
+            Types
+*******************************/
+
+/* Selection */
+@selectionPromptBorderRadius: @defaultBorderRadius;
+
+@selectionCloseTop: 0;
+@selectionCloseTransition:
+  color @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing
+;
+@selectionCloseRight: 0;
+@selectionCloseIconOpacity: 0.8;
+@selectionCloseIconColor: '';
+@selectionCloseIconHoverOpacity: 1;
+@selectionCloseIconHoverColor: @red;
+
+@selectionCloseIconInputRight: 1.85714em;
+
+/* Category */
+@categoryBackground: @darkWhite;
+@categoryBoxShadow: none;
+@categoryDivider: 1px solid @internalBorderColor;
+@categoryTransition:
+  background @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+
+@categoryResultsWidth: 28em;
+
+@categoryResultBackground: @white;
+@categoryResultLeftBorder: 1px solid @borderColor;
+@categoryResultDivider: @resultDivider;
+@categoryResultLastDivider: none;
+@categoryResultPadding: @resultPadding;
+@categoryResultTransition: @categoryTransition;
+
+@categoryNameWidth: 100px;
+@categoryNameBackground: transparent;
+@categoryNameFont: @pageFont;
+@categoryNameFontSize: 1em;
+@categoryNameWhitespace: nowrap;
+@categoryNamePadding: 0.4em 1em;
+@categoryNameFontWeight: @bold;
+@categoryNameColor: @lightTextColor;
+
+@miniSearchSize: @relativeMini;
+@tinySearchSize: @relativeTiny;
+@smallSearchSize: @relativeSmall;
+@largeSearchSize: @relativeLarge;
+@bigSearchSize: @relativeBig;
+@hugeSearchSize: @relativeHuge;
+@massiveSearchSize: @relativeMassive;
\ No newline at end of file
diff --git a/semantic/src/themes/default/modules/shape.overrides b/semantic/src/themes/default/modules/shape.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/shape.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/shape.variables b/semantic/src/themes/default/modules/shape.variables
new file mode 100644
index 0000000..31f516f
--- /dev/null
+++ b/semantic/src/themes/default/modules/shape.variables
@@ -0,0 +1,40 @@
+/*******************************
+             Shape
+*******************************/
+
+@display: inline-block;
+
+/* Animating */
+@perspective: 2000px;
+
+@duration: 0.6s;
+@easing: ease-in-out;
+
+@hiddenSideOpacity: 0.6;
+@animatingZIndex: 100;
+
+@transition:
+  transform @duration @easing,
+  left @duration @easing,
+  width @duration @easing,
+  height @duration @easing
+;
+@sideTransition: opacity @duration @easing;
+@backfaceVisibility: hidden;
+
+/* Side */
+@sideMargin: 0;
+
+/*--------------
+      Types
+---------------*/
+
+/* Cube */
+@cubeSize: 15em;
+@cubeBackground: #E6E6E6;
+@cubePadding: 2em;
+@cubeTextColor: @textColor;
+@cubeBoxShadow: 0 0 2px rgba(0, 0, 0, 0.3);
+
+@cubeTextAlign: center;
+@cubeFontSize: 2em;
diff --git a/semantic/src/themes/default/modules/sidebar.overrides b/semantic/src/themes/default/modules/sidebar.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/sidebar.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/sidebar.variables b/semantic/src/themes/default/modules/sidebar.variables
new file mode 100644
index 0000000..2502c6a
--- /dev/null
+++ b/semantic/src/themes/default/modules/sidebar.variables
@@ -0,0 +1,45 @@
+/*******************************
+             Sidebar
+*******************************/
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Animation */
+@perspective: 1500px;
+@duration: 500ms;
+@easing: @defaultEasing;
+
+/* Dimmer */
+@dimmerColor: rgba(0, 0, 0, 0.4);
+@dimmerTransition: opacity @duration;
+
+/* Color below page */
+@canvasBackground: @lightBlack;
+
+/* Shadow */
+@boxShadow: 0 0 20px @borderColor;
+@horizontalBoxShadow: @boxShadow;
+@verticalBoxShadow: @boxShadow;
+
+/* Layering */
+@bottomLayer: 1;
+@middleLayer: 2;
+@fixedLayer: 101;
+@topLayer: 102;
+@dimmerLayer: 1000;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Width */
+@veryThinWidth: 60px;
+@thinWidth: 150px;
+@width: 260px;
+@wideWidth: 350px;
+@veryWideWidth: 475px;
+
+/* Height */
+@height: 36px;
diff --git a/semantic/src/themes/default/modules/slider.overrides b/semantic/src/themes/default/modules/slider.overrides
new file mode 100644
index 0000000..e5b96d2
--- /dev/null
+++ b/semantic/src/themes/default/modules/slider.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        Slider Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/slider.variables b/semantic/src/themes/default/modules/slider.variables
new file mode 100644
index 0000000..b50b06e
--- /dev/null
+++ b/semantic/src/themes/default/modules/slider.variables
@@ -0,0 +1,83 @@
+/*******************************
+        Slider Variables
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@height        : 1.5em;
+@hoverPointer  : auto;
+@padding       : 1em .5em;
+
+/* Track */
+@trackHeight        : .4em;
+@trackPositionTop   : (@height / 2) - (@trackHeight / 2);
+@background         : #ccc;
+@trackBorderRadius  : 4px;
+@trackColor         : @transparentBlack;
+
+/* Track Fill */
+@trackFillHeight             : @trackHeight;
+@trackFillColor              : @black;
+@trackFillColorFocus         : @blackHover;
+@invertedTrackFillColor      : @lightBlack;
+@invertedTrackFillColorFocus : @lightBlackHover;
+@trackFillBorderRadius       : @trackBorderRadius;
+
+/* Thumb */
+@thumbHeight              : @height;
+@thumbBorderRadius        : 100%;
+@thumbBackground          : @white @subtleGradient;
+@thumbShadow              : @subtleShadow, 0 0 0 1px @borderColor inset;
+@thumbTransitionDuration  : 0.3s;
+@thumbTransition          : background @thumbTransitionDuration @defaultEasing;
+@thumbVerticalSliderOffset: 0.03em;
+
+/* Thumb Hover */
+@thumbHoverPointer    : pointer;
+@thumbHoverBackground : @whiteHover @subtleGradient;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Disabled */
+@disabledOpactiy        : .5;
+@disabledTrackFillColor : @background;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Vertical */
+@verticalPadding : .5em 1em;
+
+/* Labeled */
+@labelHeight  : @height;
+@labelWidth   : 1px;
+@labelColor   : @background;
+@labelPadding : 0.2em 0;
+
+/* Hover */
+@hoverVarOpacity                 : 0;
+@hoverVarHoverOpacity            : 1;
+@hoverOpacityTransitionDuration  : 0.2s;
+@hoverOpacityTransition          : opacity @hoverOpacityTransitionDuration linear;
+
+/* Sizing */
+@smallHeight            : 1em;
+@smallLabelHeight       : @smallHeight;
+@smallTrackHeight       : 0.3em;
+@smallTrackPositionTop  : (@smallHeight / 2) - (@smallTrackHeight / 2);
+
+@largeHeight            : 2em;
+@largeLabelHeight       : @largeHeight;
+@largeTrackHeight       : 0.5em;
+@largeTrackPositionTop  : (@largeHeight / 2) - (@largeTrackHeight / 2);
+
+@bigHeight              : 2.5em;
+@bigLabelHeight         : @bigHeight;
+@bigTrackHeight         : 0.6em;
+@bigTrackPositionTop    : (@bigHeight / 2) - (@bigTrackHeight / 2);
+
diff --git a/semantic/src/themes/default/modules/sticky.overrides b/semantic/src/themes/default/modules/sticky.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/sticky.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/sticky.variables b/semantic/src/themes/default/modules/sticky.variables
new file mode 100644
index 0000000..083c364
--- /dev/null
+++ b/semantic/src/themes/default/modules/sticky.variables
@@ -0,0 +1,7 @@
+/*******************************
+            Sticky
+*******************************/
+
+@transitionDuration: @defaultDuration;
+@transition: none;
+@zIndex: 800;
\ No newline at end of file
diff --git a/semantic/src/themes/default/modules/tab.overrides b/semantic/src/themes/default/modules/tab.overrides
new file mode 100644
index 0000000..354d6f9
--- /dev/null
+++ b/semantic/src/themes/default/modules/tab.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Tab Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/tab.variables b/semantic/src/themes/default/modules/tab.variables
new file mode 100644
index 0000000..a629d4f
--- /dev/null
+++ b/semantic/src/themes/default/modules/tab.variables
@@ -0,0 +1,11 @@
+/*******************************
+              Tab
+*******************************/
+
+/* Loading */
+@loadingMinHeight: 250px;
+@loadingContentPosition: relative;
+@loadingContentOffset: -10000px;
+
+@loaderDistanceFromTop: 50%;
+@loaderSize: 2.5em;
diff --git a/semantic/src/themes/default/modules/toast.overrides b/semantic/src/themes/default/modules/toast.overrides
new file mode 100644
index 0000000..14fb0da
--- /dev/null
+++ b/semantic/src/themes/default/modules/toast.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/
diff --git a/semantic/src/themes/default/modules/toast.variables b/semantic/src/themes/default/modules/toast.variables
new file mode 100644
index 0000000..5c73151
--- /dev/null
+++ b/semantic/src/themes/default/modules/toast.variables
@@ -0,0 +1,83 @@
+/*******************************
+            Toast
+*******************************/
+
+/* Container */
+@toastContainerDistance: @relative12px;
+
+/* Toast */
+@toastWidth: 350px;
+@toastBorderRadius: @defaultBorderRadius;
+@toastPadding: @inputPadding;
+@toastMarginBottom: -0.01em;
+@toastLeftRightMargin: 1px;
+@toastBoxMarginBottom: 0.5em;
+@toastMarginProgress: -0.2em;
+@toastMargin: 0 -@toastLeftRightMargin @toastMarginBottom;
+@toastTextColor: @invertedTextColor;
+@toastInvertedTextColor: @textColor;
+@toastNeutralTextColor: @textColor;
+
+/* Mobile */
+@mobileToastBreakpoint: 420px;
+@mobileWidth: 280px;
+
+/* on Hover */
+@toastOpacityOnHover: 1;
+@toastCursorOnHover: pointer;
+
+/* Color variations */
+@toastInfoColor: @infoColor;
+@toastWarningColor: @warningColor;
+@toastErrorColor: @errorColor;
+@toastSuccessColor: @successColor;
+@toastNeutralColor: @white;
+@toastInvertedColor: @black;
+
+@toastBoxBorder: 1px solid rgba(34, 36, 38, 0.12);
+
+/* Icon */
+@toastIconContentPadding: 3em;
+@toastIconFontSize: 1.5em;
+@toastIconMessageContentPadding: 5rem;
+@toastIconMessageWidth: 4rem;
+
+/* Image */
+@toastImageContentPadding: 1em;
+@toastAvatarImageContentPadding: 3em;
+@toastMiniImageContentPadding: 3.4em;
+@toastTinyImageContentPadding: 7em;
+@toastSmallImageContentPadding: 12em;
+
+@toastAvatarImageHeight: 2em;
+@toastMiniImageHeight: 35px;
+@toastTinyImageHeight: 80px;
+@toastSmallImageHeight: 150px;
+
+@toastIconCenteredAdjustment: 1.2em;
+@toastImageCenteredAdjustment: 2em;
+
+/* Progressbar Colors */
+@toastInfoProgressColor: darken(@toastInfoColor,15);
+@toastWarningProgressColor: darken(@toastWarningColor,15);
+@toastErrorProgressColor: darken(@toastErrorColor,15);
+@toastSuccessProgressColor: darken(@toastSuccessColor,15);
+@toastNeutralProgressColor: darken(@toastNeutralColor,15);
+
+/* Close Icon */
+@toastCloseTopDistance: 0.3em;
+@toastCloseRightDistance: 0.3em;
+@toastCloseOpacity: 0.7;
+@toastCloseTransition: opacity @defaultDuration @defaultEasing;
+@toastCloseDistance: 1.5em;
+@toastCloseDistanceVertical: 1em;
+
+/* Actions */
+@toastActionBackground: rgba(255, 255, 255, .25);
+@toastActionBorder: 1px solid rgba(0, 0, 0, .2);
+@toastActionMargin: -1em;
+@toastActionMarginTop: 0.5em;
+@toastActionMarginLeft: 1em;
+@toastActionMarginBottom: 0.3em;
+@toastActionPadding: 0.5em;
+@toastActionPaddingBottom: 0.75em;
\ No newline at end of file
diff --git a/semantic/src/themes/default/modules/transition.overrides b/semantic/src/themes/default/modules/transition.overrides
new file mode 100644
index 0000000..4341941
--- /dev/null
+++ b/semantic/src/themes/default/modules/transition.overrides
@@ -0,0 +1,997 @@
+/*******************************
+          Transitions
+*******************************/
+
+/*
+  Some transitions adapted from Animate CSS
+  https://github.com/daneden/animate.css
+
+  Additional transitions adapted from Glide
+  by Nick Pettit - https://github.com/nickpettit/glide
+*/
+
+& when (@variationTransitionBrowse) {
+  /*--------------
+       Browse
+  ---------------*/
+
+  .transition.browse {
+    animation-duration: 500ms;
+  }
+  .transition.browse.in {
+    animation-name: browseIn;
+  }
+  .transition.browse.out,
+  .transition.browse.left.out {
+    animation-name: browseOutLeft;
+  }
+  .transition.browse.right.out {
+    animation-name: browseOutRight;
+  }
+
+  /* In */
+  @keyframes browseIn {
+    0% {
+      transform: scale(0.8) translateZ(0px);
+      z-index: -1;
+    }
+    10% {
+      transform: scale(0.8) translateZ(0px);
+      z-index: -1;
+      opacity: 0.7;
+    }
+    80% {
+      transform: scale(1.05) translateZ(0px);
+      opacity: 1;
+      z-index: 999;
+    }
+    100% {
+      transform: scale(1) translateZ(0px);
+      z-index: 999;
+    }
+  }
+
+  /* Out */
+  @keyframes browseOutLeft {
+    0% {
+      z-index: 999;
+      transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+    }
+    50% {
+      z-index: -1;
+      transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+    }
+    80% {
+      opacity: 1;
+    }
+    100% {
+      z-index: -1;
+      transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+      opacity: 0;
+    }
+  }
+  @keyframes browseOutRight {
+    0% {
+      z-index: 999;
+      transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+    }
+    50% {
+      z-index: 1;
+      transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+    }
+    80% {
+      opacity: 1;
+    }
+    100% {
+      z-index: 1;
+      transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+      opacity: 0;
+    }
+  }
+}
+
+& when (@variationTransitionDrop) {
+  /*--------------
+       Drop
+  ---------------*/
+
+  .drop.transition {
+    transform-origin: top center;
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+  }
+  .drop.transition.in {
+    animation-name: dropIn;
+  }
+  .drop.transition.out {
+    animation-name: dropOut;
+  }
+
+  /* Drop */
+  @keyframes dropIn {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes dropOut {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+}
+
+& when (@variationTransitionFade) {
+  /*--------------
+        Fade
+  ---------------*/
+
+  .transition.fade.in {
+    animation-name: fadeIn;
+  }
+  .transition[class*="fade up"].in {
+    animation-name: fadeInUp;
+  }
+  .transition[class*="fade down"].in {
+    animation-name: fadeInDown;
+  }
+  .transition[class*="fade left"].in {
+    animation-name: fadeInLeft;
+  }
+  .transition[class*="fade right"].in {
+    animation-name: fadeInRight;
+  }
+
+  .transition.fade.out {
+    animation-name: fadeOut;
+  }
+  .transition[class*="fade up"].out {
+    animation-name: fadeOutUp;
+  }
+  .transition[class*="fade down"].out {
+    animation-name: fadeOutDown;
+  }
+  .transition[class*="fade left"].out {
+    animation-name: fadeOutLeft;
+  }
+  .transition[class*="fade right"].out {
+    animation-name: fadeOutRight;
+  }
+
+  /* In */
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(10%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  }
+  @keyframes fadeInDown {
+    0% {
+      opacity: 0;
+      transform: translateY(-10%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  }
+  @keyframes fadeInLeft {
+    0% {
+      opacity: 0;
+      transform: translateX(10%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+  @keyframes fadeInRight {
+    0% {
+      opacity: 0;
+      transform: translateX(-10%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+
+  /* Out */
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes fadeOutUp {
+    0% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(5%);
+    }
+  }
+  @keyframes fadeOutDown {
+    0% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-5%);
+    }
+  }
+  @keyframes fadeOutLeft {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(5%);
+    }
+  }
+  @keyframes fadeOutRight {
+    0% {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-5%);
+    }
+  }
+}
+
+& when (@variationTransitionFlip) {
+  /*--------------
+       Flips
+  ---------------*/
+
+  .flip.transition.in,
+  .flip.transition.out {
+    animation-duration: 600ms;
+  }
+  .horizontal.flip.transition.in {
+    animation-name: horizontalFlipIn;
+  }
+  .horizontal.flip.transition.out {
+    animation-name: horizontalFlipOut;
+  }
+  .vertical.flip.transition.in {
+    animation-name: verticalFlipIn;
+  }
+  .vertical.flip.transition.out {
+    animation-name: verticalFlipOut;
+  }
+
+  /* In */
+  @keyframes horizontalFlipIn {
+    0% {
+      transform: perspective(2000px) rotateY(-90deg);
+      opacity: 0;
+    }
+    100% {
+      transform: perspective(2000px) rotateY(0deg);
+      opacity: 1;
+    }
+  }
+  @keyframes verticalFlipIn {
+    0% {
+      transform: perspective(2000px) rotateX(-90deg);
+      opacity: 0;
+    }
+    100% {
+      transform: perspective(2000px) rotateX(0deg);
+      opacity: 1;
+    }
+  }
+
+  /* Out */
+  @keyframes horizontalFlipOut {
+    0% {
+      transform: perspective(2000px) rotateY(0deg);
+      opacity: 1;
+    }
+    100% {
+      transform: perspective(2000px) rotateY(90deg);
+      opacity: 0;
+    }
+  }
+  @keyframes verticalFlipOut {
+    0% {
+      transform: perspective(2000px) rotateX(0deg);
+      opacity: 1;
+    }
+    100% {
+      transform: perspective(2000px) rotateX(-90deg);
+      opacity: 0;
+    }
+  }
+}
+
+& when (@variationTransitionScale) {
+  /*--------------
+        Scale
+  ---------------*/
+
+  .scale.transition.in {
+    animation-name: scaleIn;
+  }
+  .scale.transition.out {
+    animation-name: scaleOut;
+  }
+
+  @keyframes scaleIn {
+    0% {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  /* Out */
+  @keyframes scaleOut {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+}
+
+& when (@variationTransitionFly) {
+  /*--------------
+        Fly
+  ---------------*/
+
+  /* Inward */
+  .transition.fly {
+    animation-duration: 0.6s;
+    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+  .transition.fly.in {
+    animation-name: flyIn;
+  }
+  .transition[class*="fly up"].in {
+    animation-name: flyInUp;
+  }
+  .transition[class*="fly down"].in {
+    animation-name: flyInDown;
+  }
+  .transition[class*="fly left"].in {
+    animation-name: flyInLeft;
+  }
+  .transition[class*="fly right"].in {
+    animation-name: flyInRight;
+  }
+
+  /* Outward */
+  .transition.fly.out {
+    animation-name: flyOut;
+  }
+  .transition[class*="fly up"].out {
+    animation-name: flyOutUp;
+  }
+  .transition[class*="fly down"].out {
+    animation-name: flyOutDown;
+  }
+  .transition[class*="fly left"].out {
+    animation-name: flyOutLeft;
+  }
+  .transition[class*="fly right"].out {
+    animation-name: flyOutRight;
+  }
+
+  /* In */
+  @keyframes flyIn {
+    0% {
+      opacity: 0;
+      transform: scale3d(.3, .3, .3);
+    }
+    20% {
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+    40% {
+      transform: scale3d(.9, .9, .9);
+    }
+    60% {
+      opacity: 1;
+      transform: scale3d(1.03, 1.03, 1.03);
+    }
+    80% {
+      transform: scale3d(.97, .97, .97);
+    }
+    100% {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+  @keyframes flyInUp {
+    0% {
+      opacity: 0;
+      transform: translate3d(0, 1500px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0);
+    }
+    75% {
+      transform: translate3d(0, 10px, 0);
+    }
+    90% {
+      transform: translate3d(0, -5px, 0);
+    }
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes flyInDown {
+    0% {
+      opacity: 0;
+      transform: translate3d(0, -1500px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, 25px, 0);
+    }
+    75% {
+      transform: translate3d(0, -10px, 0);
+    }
+    90% {
+      transform: translate3d(0, 5px, 0);
+    }
+    100% {
+      transform: none;
+    }
+  }
+  @keyframes flyInLeft {
+    0% {
+      opacity: 0;
+      transform: translate3d(1500px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(-25px, 0, 0);
+    }
+    75% {
+      transform: translate3d(10px, 0, 0);
+    }
+    90% {
+      transform: translate3d(-5px, 0, 0);
+    }
+    100% {
+      transform: none;
+    }
+  }
+  @keyframes flyInRight {
+    0% {
+      opacity: 0;
+      transform: translate3d(-1500px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(25px, 0, 0);
+    }
+    75% {
+      transform: translate3d(-10px, 0, 0);
+    }
+    90% {
+      transform: translate3d(5px, 0, 0);
+    }
+    100% {
+      transform: none;
+    }
+  }
+
+  /* Out */
+  @keyframes flyOut {
+    20% {
+      transform: scale3d(.9, .9, .9);
+    }
+    50%, 55% {
+      opacity: 1;
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale3d(.3, .3, .3);
+    }
+  }
+  @keyframes flyOutUp {
+    20% {
+      transform: translate3d(0, 10px, 0);
+    }
+    40%, 45% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: translate3d(0, 2000px, 0);
+    }
+  }
+  @keyframes flyOutDown {
+    20% {
+      transform: translate3d(0, -10px, 0);
+    }
+    40%, 45% {
+      opacity: 1;
+      transform: translate3d(0, 20px, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: translate3d(0, -2000px, 0);
+    }
+  }
+  @keyframes flyOutRight {
+    20% {
+      opacity: 1;
+      transform: translate3d(20px, 0, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: translate3d(-2000px, 0, 0);
+    }
+  }
+  @keyframes flyOutLeft {
+    20% {
+      opacity: 1;
+      transform: translate3d(-20px, 0, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: translate3d(2000px, 0, 0);
+    }
+  }
+}
+
+& when (@variationTransitionSlide) {
+  /*--------------
+       Slide
+  ---------------*/
+
+  .transition.slide.in,
+  .transition[class*="slide down"].in {
+    animation-name: slideInY;
+    transform-origin: top center;
+  }
+  .transition[class*="slide up"].in {
+    animation-name: slideInY;
+    transform-origin: bottom center;
+  }
+  .transition[class*="slide left"].in {
+    animation-name: slideInX;
+    transform-origin: right center;
+  }
+  .transition[class*="slide right"].in {
+    animation-name: slideInX;
+    transform-origin: left center;
+  }
+
+  .transition.slide.out,
+  .transition[class*="slide down"].out {
+    animation-name: slideOutY;
+    transform-origin: top center;
+  }
+  .transition[class*="slide up"].out {
+    animation-name: slideOutY;
+    transform-origin: bottom center;
+  }
+  .transition[class*="slide left"].out {
+    animation-name: slideOutX;
+    transform-origin: right center;
+  }
+  .transition[class*="slide right"].out {
+    animation-name: slideOutX;
+    transform-origin: left center;
+  }
+
+  /* In */
+  @keyframes slideInY {
+    0% {
+      opacity: 0;
+      transform: scaleY(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
+  @keyframes slideInX {
+    0% {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+  }
+
+  /* Out */
+  @keyframes slideOutY {
+    0% {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scaleY(0);
+    }
+  }
+  @keyframes slideOutX {
+    0% {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+  }
+}
+
+& when (@variationTransitionSwing) {
+  /*--------------
+       Swing
+  ---------------*/
+
+  .transition.swing {
+    animation-duration: 800ms;
+  }
+
+  .transition[class*="swing down"].in {
+    animation-name: swingInX;
+    transform-origin: top center;
+  }
+  .transition[class*="swing up"].in {
+    animation-name: swingInX;
+    transform-origin: bottom center;
+  }
+  .transition[class*="swing left"].in {
+    animation-name: swingInY;
+    transform-origin: right center;
+  }
+  .transition[class*="swing right"].in {
+    animation-name: swingInY;
+    transform-origin: left center;
+  }
+
+  .transition.swing.out,
+  .transition[class*="swing down"].out {
+    animation-name: swingOutX;
+    transform-origin: top center;
+  }
+  .transition[class*="swing up"].out {
+    animation-name: swingOutX;
+    transform-origin: bottom center;
+  }
+  .transition[class*="swing left"].out {
+    animation-name: swingOutY;
+    transform-origin: right center;
+  }
+  .transition[class*="swing right"].out {
+    animation-name: swingOutY;
+    transform-origin: left center;
+  }
+
+  /* In */
+  @keyframes swingInX {
+    0% {
+      transform: perspective(1000px) rotateX(90deg);
+      opacity: 0;
+    }
+    40% {
+      transform: perspective(1000px) rotateX(-30deg);
+      opacity: 1;
+    }
+    60% {
+      transform: perspective(1000px) rotateX(15deg);
+    }
+    80% {
+      transform: perspective(1000px) rotateX(-7.5deg);
+    }
+    100% {
+      transform: perspective(1000px) rotateX(0deg);
+    }
+  }
+  @keyframes swingInY {
+    0% {
+      transform: perspective(1000px) rotateY(-90deg);
+      opacity: 0;
+    }
+    40% {
+      transform: perspective(1000px) rotateY(30deg);
+      opacity: 1;
+    }
+    60% {
+      transform: perspective(1000px) rotateY(-17.5deg);
+    }
+    80% {
+      transform: perspective(1000px) rotateY(7.5deg);
+    }
+    100% {
+      transform: perspective(1000px) rotateY(0deg);
+    }
+  }
+
+  /* Out */
+  @keyframes swingOutX {
+    0% {
+      transform: perspective(1000px) rotateX(0deg);
+    }
+    40% {
+      transform: perspective(1000px) rotateX(-7.5deg);
+    }
+    60% {
+      transform: perspective(1000px) rotateX(17.5deg);
+    }
+    80% {
+      transform: perspective(1000px) rotateX(-30deg);
+      opacity: 1;
+    }
+    100% {
+      transform: perspective(1000px) rotateX(90deg);
+      opacity: 0;
+    }
+  }
+  @keyframes swingOutY {
+    0% {
+      transform: perspective(1000px) rotateY(0deg);
+    }
+    40% {
+      transform: perspective(1000px) rotateY(7.5deg);
+    }
+    60% {
+      transform: perspective(1000px) rotateY(-10deg);
+    }
+    80% {
+      transform: perspective(1000px) rotateY(30deg);
+      opacity: 1;
+    }
+    100% {
+      transform: perspective(1000px) rotateY(-90deg);
+      opacity: 0;
+    }
+  }
+}
+
+& when (@variationTransitionZoom) {
+  /*--------------
+        Zoom
+  ---------------*/
+
+  .transition.zoom.in {
+    animation-name: zoomIn;
+  }
+  .transition.zoom.out {
+    animation-name: zoomOut;
+  }
+  @keyframes zoomIn {
+    0% {
+      opacity: 1;
+      transform: scale(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes zoomOut {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(0);
+    }
+  }
+}
+
+
+/*******************************
+       Static Animations
+*******************************/
+
+/*--------------
+    Emphasis
+---------------*/
+
+& when (@variationTransitionFlash) {
+  .flash.transition {
+    animation-duration: 750ms;
+    animation-name: flash;
+  }
+}
+& when (@variationTransitionShake) {
+  .shake.transition {
+    animation-duration: 750ms;
+    animation-name: shake;
+  }
+}
+& when (@variationTransitionBounce) {
+  .bounce.transition {
+    animation-duration: 750ms;
+    animation-name: bounce;
+  }
+}
+& when (@variationTransitionTada) {
+  .tada.transition {
+    animation-duration: 750ms;
+    animation-name: tada;
+  }
+}
+& when (@variationTransitionPulse) {
+  .pulse.transition {
+    animation-duration: 500ms;
+    animation-name: pulse;
+  }
+}
+& when (@variationTransitionJiggle) {
+  .jiggle.transition {
+    animation-duration: 750ms;
+    animation-name: jiggle;
+  }
+}
+& when (@variationTransitionGlow) {
+  .transition.glow {
+    animation-duration: 2000ms;
+    animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+  }
+
+  .transition.glow {
+    animation-name: glow;
+  }
+}
+
+& when (@variationTransitionFlash) {
+  /* Flash */
+  @keyframes flash {
+    0%, 50%, 100% {
+      opacity: 1;
+    }
+    25%, 75% {
+      opacity: 0;
+    }
+  }
+}
+& when (@variationTransitionShake) {
+  /* Shake */
+  @keyframes shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+      transform: translateX(-10px);
+    }
+    20%, 40%, 60%, 80% {
+      transform: translateX(10px);
+    }
+  }
+}
+& when (@variationTransitionBounce) {
+  /* Bounce */
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40% {
+      transform: translateY(-30px);
+    }
+    60% {
+      transform: translateY(-15px);
+    }
+  }
+}
+& when (@variationTransitionTada) {
+  /* Tada */
+  @keyframes tada {
+    0% {
+      transform: scale(1);
+    }
+    10%, 20% {
+      transform: scale(0.9) rotate(-3deg);
+    }
+    30%, 50%, 70%, 90% {
+      transform: scale(1.1) rotate(3deg);
+    }
+    40%, 60%, 80% {
+      transform: scale(1.1) rotate(-3deg);
+    }
+    100% {
+      transform: scale(1) rotate(0);
+    }
+  }
+}
+& when (@variationTransitionPulse) {
+  /* Pulse */
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(0.9);
+      opacity: 0.7;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+}
+& when (@variationTransitionJiggle) {
+  /* Jiggle */
+  @keyframes jiggle {
+    0% {
+      transform: scale3d(1, 1, 1);
+    }
+    30% {
+      transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+      transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+      transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+      transform: scale3d(.95, 1.05, 1);
+    }
+    75% {
+      transform: scale3d(1.05, .95, 1);
+    }
+    100% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+}
+& when (@variationTransitionGlow) {
+  /* Glow */
+  @keyframes glow {
+    0% {
+      background-color: #FCFCFD;
+    }
+    30% {
+      background-color: #FFF6CD;
+    }
+    100% {
+      background-color: #FCFCFD;
+    }
+  }
+}
+
diff --git a/semantic/src/themes/default/modules/transition.variables b/semantic/src/themes/default/modules/transition.variables
new file mode 100644
index 0000000..d8b7d37
--- /dev/null
+++ b/semantic/src/themes/default/modules/transition.variables
@@ -0,0 +1,10 @@
+/*******************************
+          Transition
+*******************************/
+
+@transitionDefaultEasing: @defaultEasing;
+@transitionDefaultFill: both;
+@transitionDefaultDuration: 300ms;
+
+@use3DAcceleration: translateZ(0);
+@backfaceVisibility: hidden;
\ No newline at end of file