feat(chore): global css reduce infos

server/documents/elements/emoji.html.eco

@@ -48,6 +48,9 @@ themes : ['Default']
  If you use Fomantic in a commercial or business project or want to host the emoji assets locally and <b>also want to use the alternative joypixels set</b>, you may require an additional license for your project depending of the usage.<br>You will find joypixels licenses at <a href="https://www.joypixels.com/licenses">https://www.joypixels.com/licenses</a>
  </div>
  </div>
+ <div class="ui ignored info message">
+ You can reduce your custom generated CSS by adjusting the <code>@emoji-map</code> variable in your themes <code>emoji.variables</code> file to only the emojis you need.
+ </div>
  <div class="ui emoji container"></div>
 
  </div>

server/documents/elements/flag.html.eco

@@ -35,6 +35,9 @@ type : 'UI Element'
  <div class="ui info message">
  <p>Since Fomantic 2.9.0, flags are based on SVG emojis in the default theme. If you want to return to the sprite approach using the <a target="_blank" href="http://www.famfamfam.com/lab/icons/flags/">famfamfam icon set</a> (as used in Fomantic up to 2.8.8), you only have to change the <code>@flag</code> variable in your <code>theme.config</code> to <code>'famfamfam'</code>. However, the famfamfam theme does not support sizing and lots of flags are missing.</p>
  </div>
+ <div class="ui ignored info message">
+ You can reduce your custom generated CSS by adjusting the <code>@flags</code> variable in your themes <code>flag.variables</code> file to only the flags you need.
+ </div>
  <table class="ui selectable sortable compact celled striped definition table">
  <thead>
  <th class="one wide">Flag</th>

server/documents/elements/icon.html.eco

@@ -36,7 +36,9 @@ themes : ['Default']
  </div>
 
  <div class="ui ignored message">Fomantic includes a complete port of <a href="https://fontawesome.com/" target="_blank">Font Awesome 5.15.4</a> designed by the <a href="https://twitter.com/fontawesome">FontAwesome</a> team for its standard icon set.</div>
-
+ <div class="ui ignored info message">
+ You can reduce your custom generated CSS by adjusting the <code>@icons-map</code>,<code>@icons-outline-map</code>, <code>@icons-brand-map</code>, ... variables in your themes <code>icon.variables</code> file to only the icons you need.
+ </div>
  <div class="icon example">
  <h4 class="ui header">Accessibility</h4>
  <p>Icons can represent accessibility standards</p>

server/documents/introduction/build-tools.html.eco

@@ -308,6 +308,108 @@ type : 'Introduction'
  </div>
  </div>
 
+ <div class="no example">
+ <h4>colors.less <div class="ui black label">New in 2.7.0</div></h4>
+ <p>You can modify/define the global color palette entirely by adjusting a single LESS Map <code>@colors</code> in a custom <code>colors.less</code> file.</p>
+ <p>Each color consists of a predefined set of properties used in all components. You can define whatever color name you want.</p>
+ <div class="code" data-type="less" data-title="src/themes/default/globals/colors.less">
+// This example would only provide two custom colors "batman", "spiderman"
+// Your custom compiled build will contain all colorable components
+// like "ui batman button" or "ui spiderman label"
+ @colors: {
+ @batman: {
+ color : @white;
+ light : @grey;
+ border : @grey;
+ background : @black;
+ header : #222222;
+ boxShadow : @greyBoxShadow;
+ boxFloatShadow : @greyBoxFloatingShadow;
+ text : @white;
+ lightText : @white;
+ hoverText : @grey;
+ focus : @white;
+ lightFocus : @grey;
+ down : @white;
+ lightDown : @grey;
+ active : #888866;
+ lightActive : #888822;
+ shadow : @greyTextShadow;
+ lightShadow : @lightGreyTextShadow;
+ hover : @grey;
+ lightHover : @grey;
+ ribbon : @greyRibbonShadow;
+ invertedRibbon : @greyInvertedRibbonShadow;
+ tertiary : @greyTertiaryColor;
+ tertiaryHover : @greyTertiaryColorHover;
+ tertiaryFocus : @greyTertiaryColorFocus;
+ tertiaryActive : @greyTertiaryColorActive;
+ bright : @white;
+ brightHover : @grey;
+ isDark : false; // 'true' will adjust light colors on non inverted variants
+ isVeryDark : false; // 'true' will use black/white in certain color/background situations
+ };
+ @spiderman: {
+ color : @red;
+ light : @lightRed;
+ border : @lightRed;
+ ... // and all the other properties as above
+ };
+ };
+ </div>
+
+ <p>The colors.less file also contains another central LESS Map <code>@formStates</code>for defining form states. Also here, you can define any form state name and its colors as you like.</p>
+ <div class="code" data-type="less" data-title="src/themes/default/globals/colors.less">
+
+// Your final custom compiled build will offer form components like
+// "ui excited input" or ".ui.form > .excited.message"
+ @formStates: {
+ @excited: {
+ color: #880000;
+ background: ffcccc;
+ borderColor: @red;
+ borderRadius: 10px;
+ boxShadow: @inputErrorBoxShadow;
+ cornerLabelColor: @white;
+ labelBackground: @lightRed;
+ dropdownLabelColor: @red;
+ dropdownLabelBackground: @lightRed;
+ dropdownHoverBackground: @lightRed;
+ dropdownSelectedBackground: @lightRed;
+ dropdownActiveBackground: @lightRed;
+ inputAutoFillBackground: @lightRed;
+ inputAutoFillBorderColor: @red
+ inputFocusBackground: @lightRed;
+ inputFocusColor: @red;
+ inputFocusBorderColor: #440000;
+ inputFocusBoxShadow: @inputErrorFocusBoxShadow;
+ inputPlaceholderColor: #660000;
+ inputPlaceholderFocusColor: #550000;
+ transparentBackground: @white;
+ transparentColor: @red;
+ };
+ };
+
+ </div>
+
+ </div>
+
+ <div class="no example">
+ <h4>variation.variables <div class="ui black label">New in 2.8.1</div></h4>
+ <p>You can disable specific variations of components allowing you to generate CSS files which only contain features you require. This makes your custom distribution files much smaller in size</p>
+ <p>Most of the components also have a separate variable to decide which components should be rendered for which colors of your global color palette of colors.less or which sizes should be rendered.</p>
+
+ <div class="code" data-type="less" data-title="src/themes/default/globals/variation.variables">
+ // The defaults enable everything
+ // In a custom theme you could only disable/adjust the variables you don't need in your own {component}.variables
+ @variationButtonTertiary: false; // don't compile tertiary button styles
+ @variationIconColors: red, green, batman; // only compile red and green as icon color options
+ @variationImageSizes: small, huge; // only compile small and huge image sizes
+ @variationSegmentColors: false; // don't compile any segment color styles
+ @variationBreadcrumbSizes: false; // don't compile any breadcrumb size styles
+ </div>
+ </div>
+
  <div class="no example">
  <h4>Excluding components from main css/js file</h4>
  <p>By default, all components listed in semantic.json are added to semantic.css and semantic.js on build, but sometimes you don't need a component to be included on every page. To keep the file size of your main assets down, it's better to separate these components and reference them individually in your HTML.</p>