Added css-variables to react common components

This adds support for css variables to the react common components. I needed the changes from dnnsoftware#6279 in order to be able to on this. So if it is merged before this one, it becomes easier to review. If not and this one is merged, then this one includes it.
valadas · Jan 4, 2025 · fe2aa4f · fe2aa4f
1 parent 1a5533b
commit fe2aa4f
Show file tree

Hide file tree

Showing 126 changed files with 1,257 additions and 1,222 deletions.
diff --git a/DNN Platform/Library/Entities/Portals/PortalStyles.cs b/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]

diff --git a/...Experience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingEditor/index.jsx b/...Experience/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>

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json b/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"
   },

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/style.less b/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);
             }
         }
     }

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/index.jsx b/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

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/style.less b/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;
         }
     }

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/CollapsibleRow/style.less b/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;
                 }

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/style.less b/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;

diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/style.less b/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);
                 }
             }
         }