Merge pull request #302 from JeanMeche/feature/css-vars-support

Feature/css vars support
etn-ccis · Feb 24, 2023 · fc88344 · fc88344
2 parents 9863826 + 054d8f0
commit fc88344
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 37 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,11 +1,5 @@
 @use '@brightlayer-ui/colors/palette.scss';
 
-.test-background-image mat-toolbar.blui-drawer-header {
-    background-color: map-get(palette.$blui-blue, 500);
-    background-size: cover;
-    color: white;
-}
-
 .test-background-image .blui-drawer-header-background {
     background-image: url('../assets/topology_40.png');
 }

diff --git a/src/app/pages/mat/inputs/inputs.component.html b/src/app/pages/mat/inputs/inputs.component.html
@@ -659,6 +659,20 @@
                     <mat-slide-toggle disabled checked="true" color="accent"></mat-slide-toggle>
                 </div>
             </div>
+            <div class="slide-row">
+                <div>
+                    <div>Active</div>
+                    <mat-slide-toggle color="warn"></mat-slide-toggle>
+                </div>
+                <div>
+                    <div>Disabled</div>
+                    <mat-slide-toggle disabled color="warn"></mat-slide-toggle>
+                </div>
+                <div>
+                    <div>Disabled Checked</div>
+                    <mat-slide-toggle disabled checked="true" color="warn"></mat-slide-toggle>
+                </div>
+            </div>
         </mat-card-content>
     </mat-card>
 

diff --git a/src/styles.scss b/src/styles.scss
@@ -1,6 +1,108 @@
-@use '@brightlayer-ui/angular-themes/theme';
+@use '@angular/material' as mat;
+@use '@brightlayer-ui/colors/palette.scss' as blui;
+@use '@brightlayer-ui/angular-themes/theme-bases' as theme-bases;
 @use 'refresh';
 
+:root {
+    --blui-primary-50: rgb(224, 239, 248);
+    --blui-primary-100: rgb(179, 215, 236);
+    --blui-primary-200: rgb(128, 189, 224);
+    --blui-primary-300: rgb(77, 163, 212);
+    --blui-primary-500: rgb(0, 123, 193);
+    --blui-primary-700: rgb(0, 104, 179);
+
+    --blui-primary-contrast-50: black;
+    --blui-primary-contrast-100: black;
+    --blui-primary-contrast-200: black;
+    --blui-primary-contrast-500: white;
+    --blui-primary-contrast-700: white;
+
+    --blui-accent-50: rgb(215, 253, 180);
+    --blui-accent-100: rgb(178, 247, 114);
+    --blui-accent-200: rgb(156, 250, 68);
+    --blui-accent-300: rgb(125, 245, 12);
+    --blui-accent-500: rgb(95, 194, 2);
+    --blui-accent-700: rgb(75, 150, 5);
+    --blui-accent-contrast-100: black;
+    --blui-accent-contrast-500: black;
+    --blui-accent-contrast-700: black;
+
+    --blui-warn-50: rgb(249, 232, 232);
+    --blui-warn-100: rgb(239, 197, 197);
+    --blui-warn-200: rgb(229, 158, 158);
+    --blui-warn-300: rgb(218, 119, 119);
+    --blui-warn-500: rgb(202, 60, 61);
+    --blui-warn-700: rgb(189, 46, 47);
+    --blui-warn-contrast-100: black;
+    --blui-warn-contrast-500: black;
+    --blui-warn-contrast-700: white;
+}
+
+$primary: (
+    50: var(--blui-primary-50),
+    100: var(--blui-primary-100),
+    200: var(--blui-primary-200),
+    300: var(--blui-primary-300),
+    500: var(--blui-primary-500),
+    700: var(--blui-primary-700),
+    contrast: (
+        50: var(--blui-primary-contrast-50),
+        100: var(--blui-primary-contrast-100),
+        200: var(--blui-primary-contrast-200),
+        500: var(--blui-primary-contrast-500),
+        700: var(--blui-primary-contrast-700),
+    ),
+);
+$accent: (
+    50: var(--blui-accent-50),
+    100: var(--blui-accent-100),
+    200: var(--blui-accent-200),
+    300: var(--blui-accent-300),
+    500: var(--blui-accent-500),
+    700: var(--blui-accent-700),
+    contrast: (
+        100: var(--blui-accent-contrast-100),
+        500: var(--blui-accent-contrast-500),
+        700: var(--blui-accent-contrast-700),
+    ),
+);
+$warn: (
+    50: var(--blui-warn-50),
+    100: var(--blui-warn-100),
+    200: var(--blui-warn-200),
+    300: var(--blui-warn-300),
+    500: var(--blui-warn-500),
+    700: var(--blui-warn-700),
+    contrast: (
+        100: var(--blui-warn-contrast-100),
+        500: var(--blui-warn-contrast-500),
+        700: var(--blui-warn-contrast-700),
+    ),
+);
+
+@include theme-bases.coreTypography();
+
+.blui-blue {
+    $blui-blue-primary: theme-bases.$blui-blue-primary;
+    $blui-blue-accent: theme-bases.$blui-blue-accent;
+    $blui-blue-warn: theme-bases.$blui-blue-warn;
+
+    // Use these variables to test the styling with CSS Custom properties
+    // $blui-blue-primary: mat.define-palette($primary);
+    // $blui-blue-accent: mat.define-palette($accent);
+    // $blui-blue-warn: mat.define-palette($warn);
+
+    @include theme-bases.light-theme($blui-blue-primary, $blui-blue-accent, $blui-blue-warn);
+}
+
+.blui-blue-dark {
+    $blui-blue-dark-primary: theme-bases.$blui-blue-dark-primary;
+    $blui-blue-dark-accent: theme-bases.$blui-blue-dark-accent;
+    $blui-blue-dark-warn: theme-bases.$blui-blue-dark-warn;
+
+    @include theme-bases.dark-theme($blui-blue-dark-primary, $blui-blue-dark-accent, $blui-blue-dark-warn);
+}
+
 body {
     margin: 0;
     -webkit-font-smoothing: antialiased;

diff --git a/yarn.lock b/yarn.lock
@@ -4481,7 +4481,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
@@ -6457,11 +6457,6 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
-json-schema@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
-  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
-
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@@ -6524,16 +6519,6 @@ jsonwebtoken@^8.5.1:
     ms "^2.1.1"
     semver "^5.6.0"
 
-jsprim@^1.2.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
-  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
-  dependencies:
-    assert-plus "1.0.0"
-    extsprintf "1.3.0"
-    json-schema "0.4.0"
-    verror "1.10.0"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
@@ -8700,7 +8685,7 @@ punycode@^1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
@@ -8731,11 +8716,6 @@ qs@6.11.0, qs@^6.6.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@~6.5.2:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
-  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
-
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -9150,13 +9130,6 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
-rimraf@2:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -9208,7 +9181,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==