@jaisocx/css-clean-start-2 1.0.1 → 1.0.3

package/MediaAndStyles/CssCleanStart_2_main_Webpack.css

@@ -11,6 +11,10 @@
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_presets.css");
 
 
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css");
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css");
+
+
 /* main css file, css logics with rules set via variables in the theme .css files imported above */
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_main.css");
 

package/MediaAndStyles/CssCleanStart_2_main_Webpack_min.css

@@ -12,6 +12,10 @@
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_presets.css");
 
 
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css");
+@import url("@CssCleanStart_2_MediaAndStyles/themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css");
+
+
 /* main css file, css logics with rules set via variables in the theme .css files imported above */
 @import url("@CssCleanStart_2_MediaAndStyles/CssCleanStart_2_main.css");
 

package/MediaAndStyles/CssCleanStart_2_main_relative.css

@@ -8,6 +8,10 @@
 @import url("./themes/theme_base/responsive_size_Imports_CssCleanStart_2_theme_base_Relative.css");
 
 
+@import url("./themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css");
+@import url("./themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css");
+
+
 @import url("./CssCleanStart_2_presets.css");
 
 

package/MediaAndStyles/CssCleanStart_2_main_resolved.css

@@ -8158,6 +8158,84 @@
 
 
 
+.jsx.theme_lightmode,
+.jsx .theme_lightmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #e0e9f4;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #333;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #ddd;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #567;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: honeydew;
+  --jsx--css-clean-start-2--tfoot--background-color: cornsilk;
+
+}
+
+
+.jsx.theme_darkmode,
+.jsx .theme_darkmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #457;
+  --jsx--css-clean-start-2--site--background: #012;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #adf;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #fff;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #fff;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: #456;
+  --jsx--css-clean-start-2--tfoot--background-color: #456;
+
+}
+
+
 
 
 .jsx * {

package/MediaAndStyles/CssCleanStart_2_main_resolved_min.css

@@ -4105,6 +4105,84 @@
 
 
 
+.jsx.theme_lightmode,
+.jsx .theme_lightmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #e0e9f4;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #333;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #ddd;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #567;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: honeydew;
+  --jsx--css-clean-start-2--tfoot--background-color: cornsilk;
+
+}
+
+
+.jsx.theme_darkmode,
+.jsx .theme_darkmode {
+
+  
+  --jsx--css-clean-start-2--body-tag--background: #457;
+  --jsx--css-clean-start-2--site--background: #012;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #adf;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #fff;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  
+  --jsx--css-clean-start-2--h--color:       #fff;
+
+
+
+  
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: #456;
+  --jsx--css-clean-start-2--tfoot--background-color: #456;
+
+}
+
+
 
 
 .jsx * {

package/MediaAndStyles/themes/theme_darkmode/CssCleanStart_2_theme_darkmode_main.css

@@ -0,0 +1,45 @@
+
+.jsx.theme_darkmode,
+.jsx .theme_darkmode {
+
+  /** -------------------------------
+    background styles of the html elem <body>, and, the direct anchester html elem <main>
+  */
+  --jsx--css-clean-start-2--body-tag--background: #457;
+  --jsx--css-clean-start-2--site--background: #012;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #adf;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #fff;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  /** -------------------------------
+    h1 til h6 styles
+  */
+  --jsx--css-clean-start-2--h--color:       #fff;
+
+
+
+  /** -------------------------------
+    hyperlnks text colors
+  */
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: #456;
+  --jsx--css-clean-start-2--tfoot--background-color: #456;
+
+}
+

package/MediaAndStyles/themes/theme_lightmode/CssCleanStart_2_theme_lightmode_main.css

@@ -0,0 +1,45 @@
+
+.jsx.theme_lightmode,
+.jsx .theme_lightmode {
+
+  /** -------------------------------
+    background styles of the html elem <body>, and, the direct anchester html elem <main>
+  */
+  --jsx--css-clean-start-2--body-tag--background: #e0e9f4;
+  --jsx--css-clean-start-2--site--background: #fff;
+
+
+  --jsx--css-clean-start-2--all-tags--color: #333;
+
+  --jsx--css-clean-start-2--all-tags--border-color: #ddd;
+  --jsx--css-clean-start-2--all-tags--border-style: dotted;
+  --jsx--css-clean-start-2--all-tags--border-width: 0;
+
+
+
+  /** -------------------------------
+    h1 til h6 styles
+  */
+  --jsx--css-clean-start-2--h--color:       #567;
+
+
+
+  /** -------------------------------
+    hyperlnks text colors
+  */
+  --jsx--css-clean-start-2--anchor--color: #00f;
+  --jsx--css-clean-start-2--anchor-hover--color: #55f;
+
+  --jsx--css-clean-start-2--anchor-visited--color: grey;
+  --jsx--css-clean-start-2--anchor-visited-hover--color: grey;
+
+  --jsx--css-clean-start-2--anchor-active--color: #00f;
+  --jsx--css-clean-start-2--anchor-active-hover--color: #55f;
+
+
+
+  --jsx--css-clean-start-2--thead--background-color: honeydew;
+  --jsx--css-clean-start-2--tfoot--background-color: cornsilk;
+
+}
+

package/README.md

@@ -40,7 +40,7 @@ several .css files will be loaded with size of very few KB.
 
 ## Watch site in action
 
-[https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.html](https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.html)
+[https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.example.html](https://sandbox.brightday.email/sites_tools/css_tools/CssCleanStart_2/index.example.html)
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jaisocx/css-clean-start-2",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "author": "Jaisocx",
   "keywords": [
@@ -8,16 +8,15 @@
     "styles"
   ],
   "files": [
-    "index.html",
+    "index.example.html",
     "responsive_sizes.html",
 
     "MediaAndStyles/*.css",
-    "MediaAndStyles/themes/",
-    "MediaAndStyles/fonts/",
+    "MediaAndStyles/themes",
+    "MediaAndStyles/fonts",
 
     "transpiled/CommonJS",
     "transpiled/ESNext",
-    "transpiled/Simple",
 
     "webpack.aliases.json",