new system for vars

fullcalendar · Jun 6, 2020 · 66571cf · 66571cf
1 parent 5269625
commit 66571cf
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 20 deletions.
diff --git a/packages/common/src/main.css b/packages/common/src/main.css
@@ -1,5 +1,4 @@
 
-@import './styles/vars'; // the :root declaration for css variables
 @import './styles/mixins';
 
 @import './styles/page-root';

diff --git a/packages/common/src/styles/bg.css b/packages/common/src/styles/bg.css
@@ -18,18 +18,19 @@
 
   & .fc-bg-event {
     background: var(--fc-bg-event-color);
+    opacity: var(--fc-bg-event-opacity);
+
+    & .fc-event-title {
+      margin: .5em;
+      font-size: var(--fc-small-font-size);
+      font-style: italic;
+    }
   }
 
   & .fc-highlight {
     background: var(--fc-highlight-color);
   }
 
-  & .fc-bg-event .fc-event-title {
-    margin: .5em;
-    font-size: var(--fc-small-font-size);
-    font-style: italic;
-  }
-
   & .fc-day-today {
     background: var(--fc-today-bg-color); // for all themes. bootstrap didn't provide a good semi-transparent color for this
   }

diff --git a/packages/common/src/styles/scrollgrid.css b/packages/common/src/styles/scrollgrid.css
@@ -2,7 +2,7 @@
 .fc-theme-standard {
 
   & .fc-scrollgrid {
-    border: 1px solid #ddd; // bootstrap does this. match
+    border: 1px solid var(--fc-border-color); // bootstrap does this. match
   }
 
 }

diff --git a/packages/common/src/styles/vars.css b/packages/common/src/styles/vars.css
@@ -34,7 +34,8 @@ NOTE: for old browsers, will need to start after changing a variable
   --fc-event-resizer-dot-border-width: 1px;
 
   --fc-non-business-color: rgba(215, 215, 215, 0.3);
-  --fc-bg-event-color: rgb(143, 223, 130, 0.3);
+  --fc-bg-event-color: rgb(143, 223, 130);
+  --fc-bg-event-opacity: 0.3;
   --fc-highlight-color: rgba(188, 232, 241, 0.3);
   --fc-today-bg-color: rgba(255, 220, 40, 0.15);
   --fc-now-indicator-color: red;

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,11 +1,13 @@
+
 module.exports = {
   parser: require('postcss-comment'), // for "//" style comments
   plugins: [
     require('postcss-advanced-variables'),
     require('postcss-nesting'),
     require('postcss-custom-properties')({
       importFrom: './packages/common/src/styles/vars.css', // available to all stylesheets
-      preserve: true
+      preserve: true, // keep var statements intact (but still reduce their value in a second statement)
+      preserveWithFallback: true // the preserved var statements will have a fallback value
     }),
     require('postcss-calc')
 

diff --git a/yarn.lock b/yarn.lock
@@ -10863,16 +10863,6 @@ postcss-css-variables@^0.14.0:
     extend "^3.0.1"
     postcss "^6.0.8"
 
-postcss-css-variables@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.17.0.tgz#56cba1d9f0360609136cfbfda8bbd2c1ed2e4082"
-  integrity sha512-/ZpFnJgksNOrQA72b3DKhExYh+0e2P5nEc3aPZ62G7JLmdDjWRFv3k/q4LxV7uzXFnmvkhXRbdVIiH5tKgfFNA==
-  dependencies:
-    balanced-match "^1.0.0"
-    escape-string-regexp "^1.0.3"
-    extend "^3.0.1"
-    postcss "^6.0.8"
-
 postcss-custom-properties@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-9.1.1.tgz#55822d70ff48004f6d307a338ba64a7fb0a4bfff"