Merge pull request #6291 from valadas/reac-common-css-vars

Adds support for css-variables to the react common components

DNN Platform/Library/Entities/Portals/PortalStyles.cs

@@ -68,11 +68,11 @@ public class PortalStyles : IPortalStyles
 
         /// <inheritdoc/>
         [PortalSetting]
-        public string ColorNeutral { get; set; } = "EDEDED";
+        public string ColorNeutral { get; set; } = "DCDCDC";
 
         /// <inheritdoc/>
         [PortalSetting]
-        public string ColorNeutralLight { get; set; } = "FFFFFF";
+        public string ColorNeutralLight { get; set; } = "F0F0F0";
 
         /// <inheritdoc/>
         [PortalSetting]
@@ -100,11 +100,11 @@ public class PortalStyles : IPortalStyles
 
         /// <inheritdoc/>
         [PortalSetting]
-        public string ColorForeground { get; set; } = "000000";
+        public string ColorForeground { get; set; } = "323232";
 
         /// <inheritdoc/>
         [PortalSetting]
-        public string ColorForegroundLight { get; set; } = "333333";
+        public string ColorForegroundLight { get; set; } = "A2A2A2";
 
         /// <inheritdoc/>
         [PortalSetting]
@@ -180,11 +180,11 @@ public class PortalStyles : IPortalStyles
 
         /// <inheritdoc/>
         [PortalSetting]
-        public string ColorSurface { get; set; } = "EEEEEE";
+        public string ColorSurface { get; set; } = "DDDDDD";
 
         /// <inheritdoc/>
         [PortalSetting]
-        public string ColorSurfaceLight { get; set; } = "F5F5F5";
+        public string ColorSurfaceLight { get; set; } = "EEEEEE";
 
         /// <inheritdoc/>
         [PortalSetting]

Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingEditor/index.jsx

@@ -275,7 +275,7 @@ class LogSettingEditor extends Component {
             <div className="log-setting-editor">
                 <Grid numberOfColumns={2}>{children}</Grid>
                 <div className="buttons-box">
-                    {this.props.logTypeSettingId !== "" && <Button type="secondary" onClick={this.deleteLogSetting.bind(this) }>{Localization.get("ConfigBtnDelete") }</Button>}
+                    {this.props.logTypeSettingId !== "" && <Button type="danger" onClick={this.deleteLogSetting.bind(this) }>{Localization.get("ConfigBtnDelete") }</Button>}
                     <Button type="secondary" onClick={this.props.Collapse.bind(this) }>{Localization.get("ConfigBtnCancel") }</Button>
                     <Button type="primary" onClick={this.addUpdateLogSetting.bind(this) }>{Localization.get("ConfigBtnSave") }</Button>
                 </div>

Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json

@@ -19,6 +19,7 @@
     "lint": "eslint --fix",
     "test": "echo \"No tests script specified to run.\"",
     "build": "set NODE_ENV=production && webpack --mode production --config dist.webpack.config.js",
+    "watch": "set NODE_ENV=debug && webpack --mode development --config dist.webpack.config.js --watch",
     "debug": "set NODE_ENV=debug && webpack --mode production --config dist.webpack.config.js",
     "storybook": "start-storybook -p 9001 -c .storybook"
   },

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/style.less

@@ -1,7 +1,7 @@
 @import "../../styles/index";
 a.dnn-back-to-link {
     font-weight: bold;
-    color: @thunder;
+    color: var(--dnn-color-foreground, @thunder);
     cursor: pointer;
     display: inline-block;
     > span {
@@ -15,14 +15,14 @@ a.dnn-back-to-link {
         > svg {
             width: 16px;
             height: 16px;
-            fill: @thunder;
+            fill: var(--dnn-color-foreground, @thunder);
         }
     }
     &:hover {
         color: @mountainMist;
         .dnn-back-to-arrow {
             > svg {
-                fill: @mountainMist;
+                fill: var(--dnn-color-foreground-light, @mountainMist);
             }
         }
     }

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/index.jsx

@@ -15,7 +15,7 @@ Button.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     size: PropTypes.oneOf(["small", "large"]),
-    type: PropTypes.oneOf(["primary", "secondary"]).isRequired,
+    type: PropTypes.oneOf(["primary", "secondary", "neutral", "danger"]).isRequired,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
     style: PropTypes.object

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/style.less

@@ -1,28 +1,25 @@
 @import "../../styles/index";
 button.dnn-ui-common-button {
-    border: 1px solid @curiousBlue;
+    border: 1px solid var(--dnn-color-primary, @curiousBlue);
     height: 34px;
     padding: 0 22px;
     font-size: 10pt;
-    color: @curiousBlue;
-    background: @white;
-    border-radius: 3px;
+    color: var(--dnn-color-primary, @curiousBlue);
+    background: var(--dnn-color-primary-contrast, @white);
+    border-radius: var(--dnn-controls-radius, 3px);
     cursor: pointer;
     font-family: inherit;
     &:hover {
-        color: @cerulean;
-        border-color: @cerulean;
-    }
-    &:focus{
-        outline: none;
+        color: var(--dnn-color-primary-light, @cerulean);
+        border-color: var(--dnn-color-primary-light, @cerulean);
     }
     &:active {
-        color: @matisse;
-        border-color: @matisse;
+        color: var(--dnn-color-primary-dark, @matisse);
+        border-color: var(--dnn-color-primary-dark, @matisse);
     }
     &:disabled {
-        color: @alto;
-        border-color: @alto;
+        color: var(--dnn-color-neutral, @alto);
+        border-color: var(--dnn-color-neutral, @alto);
         cursor: not-allowed;
     }
 
@@ -31,19 +28,48 @@ button.dnn-ui-common-button {
     }
 
     &[role=primary] {
-        background: @curiousBlue;
+        background: var(--dnn-color-primary, @curiousBlue);
         border: none;
         color: @white;
 
         &:hover {
-            background: @cerulean;
+            background: var(--dnn-color-primary-light, @cerulean);
         }
         &:active {
-            background: @matisse;
+            background: var(--dnn-color-primary-dark, @matisse);
         }
         &:disabled {
-            color: @mountainMist;
-            background: @mercury;
+            color: var(--dnn-color-neutral-dark, @mountainMist);
+            background: var(--dnn-color-neutral, @mercury);
+            cursor: not-allowed;
+        }
+    }
+    &[role=danger] {
+        color: var(--dnn-color-danger, @alizarinCrimson);
+        border: 1px solid var(--dnn-color-danger, @alizarinCrimson);
+        background-color: var(--dnn-color-background, @white);
+
+        &:hover, &:active {
+            background-color: var(--dnn-color-danger, @alizarinCrimson);
+            color: var(--dnn-color-background, @white);
+        }
+        &:disabled {
+            color: var(--dnn-color-neutral-dark, @mountainMist);
+            background: var(--dnn-color-neutral, @mercury);
+            cursor: not-allowed;
+        }
+    }
+    &[role=neutral]{
+        color: var(--dnn-color-foreground-light, @thunder);
+        border: 1px solid var(--dnn-color-foreground-light, @gondola);
+        background-color: var(--dnn-color-background, @white);
+        &:hover, &:active{
+            background-color: var(--dnn-color-background, @mercury);
+            color: var(--dnn-color-foreground, @gondola);
+        }
+        &:disabled{
+            color: var(--dnn-color-neutral-contrast, @mountainMist);
+            background: var(--dnn-color-neutral, @mercury);
             cursor: not-allowed;
         }
     }

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/CollapsibleRow/style.less

@@ -3,7 +3,7 @@
     width: 100%;
     div.collapsible-header {
         text-transform: uppercase;
-        color: rgb(178, 189, 195);
+        color: var(--dnn-color-surface, rgb(178, 189, 195));
         width: 100%;
         float: left;
         position: relative;
@@ -31,15 +31,15 @@
             user-select: none;
             &:after {
                 border: 6px solid transparent;
-                border-bottom: 6px solid black;
+                border-bottom: 6px solid var(--dnn-color-foreground, black);
                 content: "";
                 position: absolute;
                 left: -15px;
                 top: 0;
             }
             &.collapsed {
                 &:after {
-                    border-top: 6px solid black;
+                    border-top: 6px solid var(--dnn-color-foreground, black);
                     border-bottom: 6px solid transparent;
                     top: 5px;
                 }

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/style.less

@@ -14,7 +14,7 @@
     position: relative;
     width: 100%;
     &.upload-error {
-        background-color: rgba(255, 255, 255, 0.5);
+        background-color: var(--dnn-color-surface, rgba(255, 255, 255, 0.5));
         .try-load-again {
             position: absolute;
             top: 0;
@@ -36,22 +36,22 @@
                     height: 40px;
                     margin: 0 auto;
                     > svg {
-                        fill: @mountainMist;
+                        fill: var(--dnn-color-neutral, @mountainMist);
                         &:hover {
-                            fill: @mountainMist;
+                            fill: var(--dnn-color-neutral, @mountainMist);
                         }
                     }
                 }
             }
             span {
                 float: none;
-                color: @curiousBlue;
+                color: var(--dnn-color-primary, @curiousBlue);
                 cursor: pointer;
             }
         }
         .upload-bar-container {
             .upload-bar-box {
-                background: @alto;
+                background: var(--dnn-color-neutral-light, @alto);
             }
         }
     }
@@ -99,9 +99,9 @@
                 animation-name: placeHolderShimmer;
                 animation-timing-function: linear;
                 width: 105px;
-                background: @nonPhotoBlue;
-                background-image: -webkit-linear-gradient(to right, @nonPhotoBlue 0%, @solitude 35%, @nonPhotoBlue 100%);
-                background-image: linear-gradient(to right, @nonPhotoBlue 0%, @solitude 35%, @nonPhotoBlue 100%);
+                background: var(--dnn-color-primary-light, @nonPhotoBlue);
+                background-image: -webkit-linear-gradient(to right, var(--dnn-color-primary-light, @nonPhotoBlue) 0%, var(--dnn-color-background, @nonPhotoBlue) 35%, var(--dnn-color-primary-light, @nonPhotoBlue) 100%);
+                background-image: linear-gradient(to right, var(--dnn-color-primary-light, @nonPhotoBlue) 0%, var(--dnn-color-background, @nonPhotoBlue) 35%, var(--dnn-color-primary-light, @nonPhotoBlue) 100%);
                 background-size: 105px 5px;
                 height: 5px;
                 position: relative;

Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/style.less

@@ -18,19 +18,19 @@
         height: 0;
         border: none;
     }
-    .calendar-container {       
+    .calendar-container {
         position: absolute;
         width: 256px;
         left: 0px;
         border: 1px solid @alto;
-        box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, .2);
+        box-shadow: 0px 0px 17px 2px rgba(var(--dnn-color-foreground-r, 0), var(--dnn-color-foreground-g, 0), var(--dnn-color-foreground-b, 0), .2);
         opacity: 0;
         pointer-events: none;
         transition: 300ms;
         transform-origin: 100% 0% 0px;
         transform: scale(1);
         z-index: 10;
-        background: white;
+        background: var(--dnn-color-background, white);
         text-align: center;
 
         &.show-above-input {
@@ -62,13 +62,13 @@
         cursor: pointer;
         float: left;
         padding-top: 1px;
-        color: @alto;
+        color: var(--dnn-color-foreground-light, @alto);
         margin-left: 7px;
         &:hover {
-            color: @rollingStone;
+            color: var(--dnn-color-neutral, @rollingStone);
         }
         &.active, &.active:hover {
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
         }
     }
     .clear-button {
@@ -80,11 +80,12 @@
         top: 3px;
         font-size: 26px;
         &:hover {
-            color: @rollingStone;
+            color: var(--dnn-color-foreground-light, @rollingStone);
         }
     }
     .calendar-text {
-        border: 1px solid #b0afae;
+        border: 1px solid var(--dnn-color-foreground-light, #b0afae);
+        border-radius: var(--dnn-controls-radius, 0);
         padding: 8px 12px;
         cursor: pointer;
         min-height: 16px;
@@ -118,7 +119,7 @@
             position: absolute;
             display: block;
             cursor: pointer;
-            border: 1px solid #ccc;
+            border: 1px solid var(--dnn-color-foreground-light, #ccc);
             padding: 0;
             width: 28px;
             height: 28px;
@@ -148,7 +149,7 @@
             text-transform: uppercase;
             padding: 10px 0;
             font-weight: 600;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
         }
         .DayPicker-Weekdays {
             width: 100%;
@@ -157,14 +158,14 @@
                 width: 100%;
                 float: left;
                 .DayPicker-Weekday {
-                    color: #fff;
+                    color: var(--dnn-color-neutral-contrast, #fff);
                     line-height: 30px;
                     text-align: center;
-                    background-color: @alto;
+                    background-color: var(--dnn-color-neutral, @alto);
                     width: 14.28%;
                     box-sizing: border-box;
                     float: left;
-                    border: 2px solid #fff;
+                    border: 2px solid var(--dnn-color-neutral, @alto);
                 }
             }
         }