@tacc/core-styles 0.5.1

package/source/_tests/README.md

@@ -0,0 +1,33 @@
+# TACC Styles
+
+Styles here compare test input CSS to expected output CSS.
+
+_This allows developers to confirm whether CSS plugins are working._
+
+## Usage
+
+1. Add `/*! Some Unique Comment: */` above the test input CSS.
+2. Import stylesheets (in `../_tests.css`) (if not already).
+3. Build CSS (run `npm run build` from root).
+4. Compare input CSS to actual output CSS (in `./dist/_tests.css`).
+
+## Example
+
+__Input:__
+
+```css
+/*! Custom Media Narrow: */
+@custom-media --narrow-window (max-width: 30em);
+
+@media (--narrow-window) {
+  ._test {
+    background-color: red;
+  }
+}
+```
+
+__Output__:
+
+```css
+/*! Custom Media Narrow: */@media (max-width:30em){._test{background-color:red}}
+```

package/source/_tests/postcss-extend.css

@@ -0,0 +1,80 @@
+/*
+Test
+
+Styles for testing `postcss-extend`.
+
+Instructions:
+1. In this file, add code after "! Goal:" to show what the output should be.
+2. In this file, add code after "! Test:" to be transformed by plugins.
+3. In the output file, the code after "! Goal:" and "! Test:" should match.
+
+Styleguide _Test.Extend
+*/
+
+/*! Class Selector */
+
+/*! Goal: */
+._test_1,._test_mixin_1{color:red}
+
+/*! Test: */
+._test_mixin_1 {
+  color: red;
+}
+._test_1 {
+  @extend ._test_mixin_1;
+}
+
+/*! Placeholder Selector */
+
+/*! Goal: */
+._test_2{color:yellow}
+
+/*! Test: */
+%_test_mixin_2 {
+  color: yellow;
+}
+._test_2 {
+  @extend %_test_mixin_2;
+}
+
+/*! Class & Placeholder Selector, Use Class Selector */
+
+/*! Goal: */
+._test_3,._test_mixin_3{color:green}
+
+/*! Test: */
+%_test_mixin_3,
+._test_mixin_3 {
+  color: green;
+}
+._test_3 {
+  @extend ._test_mixin_3;
+}
+
+/*! Class & Placeholder Selector, Use Placeholder Selector */
+
+/*! Goal: */
+._test_4{color:blue}
+
+/*! Test: */
+%_test_mixin_4,
+._test_mixin_4 {
+  color: blue;
+}
+._test_4 {
+  @extend %_test_mixin_4;
+}
+
+
+/*! Define Placeholder */
+
+/*! Goal: */
+._test_5{color:white}
+
+/*! Test: */
+@define-placeholder _test_mixin_5 {
+  color: white;
+}
+._test_5 {
+  @extend _test_mixin_5;
+}

package/source/_tests/postcss-preset-env.css

@@ -0,0 +1,75 @@
+/*
+Test
+
+Styles for testing `postcss-preset-env` plugins.
+
+Instructions:
+1. In this file, add code after "! Goal:" to show what the output should be.
+2. In this file, add code after "! Test:" to be transformed by plugins.
+3. In the output file, the code after "! Goal:" and "! Test:" should match.
+
+Styleguide _Test.PresetEnv
+*/
+
+/*! Custom Media Queries */
+/* SEE: https://preset-env.cssdb.org/features#custom-media-queries */
+
+/*! Goal: */
+@media (max-width:30em){._test{background-color:red}}
+
+/*! Test: */
+@custom-media --narrow-window (max-width: 30em);
+
+@media (--narrow-window) {
+  ._test {
+    background-color: red;
+  }
+}
+
+/*! Goal: */
+@media (max-width:60em){._test{background-color:red}}@media (max-width:60em){._test{background-color:blue}}
+
+/*! Test: */
+@custom-media --test-window (min-width: 30em);
+
+@media (--test-window) {
+  ._test {
+    background-color: red;
+  }
+}
+
+@custom-media --test-window (min-width: 60em);
+
+@media (--test-window) {
+  ._test {
+    background-color: blue;
+  }
+}
+
+/*! Media Query Ranges */
+/* SEE: https://preset-env.cssdb.org/features#media-query-ranges */
+
+/*! Goal: */@media (max-width:479px){._test{background-color:red}}@media (min-width:480px) and (max-width:767px){._test{background-color:blue}}@media (min-width:768px){._test{background-color:lime}}
+
+/*! Test: */
+@media (width < 480px) {
+  ._test{ background-color:red; }
+}
+@media (480px <= width < 768px) {
+  ._test{ background-color:blue; }
+}
+@media (width >= 768px) {
+  ._test{ background-color:lime; }
+}
+
+/*! Custom Media Queries & Media Query Ranges */
+
+/*! Goal: */
+@media (min-width:992px) and (max-width:1199px){._test{background-color:red}}
+
+/*! Test: */
+@custom-media --wide-window (992px <= width < 1200px);
+
+@media (--wide-window) {
+  ._test{ background-color:red; }
+}

package/source/_tests.css

@@ -0,0 +1,12 @@
+/*! _test.css */
+
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* FAQ: This is a low-tech way to test plugins */
+/* USAGE:
+   1. Build CSS.
+   2. Review `taccsite_cms/static/site_cms/css/build/_test.css` */
+/* NOTE: No need to load 'site_cms/css/build/_test.css' in a template */
+
+@import url("_tests/postcss-extend.css");
+@import url("_tests/postcss-preset-env.css");

package/source/_themes/README.md

@@ -0,0 +1,5 @@
+# TACC Styles - Themes
+
+These values are imported by PostCSS configuration.
+
+See [`postcss-preset-env`'s `importFrom` example](https://github.com/csstools/postcss-preset-env#importfrom).

package/source/_themes/TODO.md

@@ -0,0 +1,4 @@
+# TACC CMS - Stylesheets - Themes
+
+- Migrate `source/_imports/settings/*` to theme data.
+- Support one theme extending another theme (default theme or another theme).

package/source/_themes/default.json

@@ -0,0 +1,21 @@
+{
+  "//": "Metadata for humans",
+  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+  "name": "default",
+
+  "environment-variables": {
+    "// CMS": "",
+    "--cms-toolbar-height": "46px",
+
+    "// HEADER": "",
+    "--header-text-color": "var(--global-color-primary--xx-light)",
+    "--header-bkgd-color": "var(--global-color-primary--xx-dark)",
+    "--header-minor-border-color": "var(--global-color-primary--normal)",
+    "// To 'hide' border by setting its color to match background color": "",
+    "--header-major-border-color": "var(--global-color-primary--xx-dark)",
+    "--header-search-brdr-color": "var(--global-color-primary--dark)",
+    "--header-search-bkgd-color": "#313131",
+    "// To set the bootstrap navbar-toggler-icon svg color for current theme": "",
+    "--menu-toggle-icon": "none"
+  }
+}

package/source/_themes/has-dark-logo.json

@@ -0,0 +1,21 @@
+{
+  "//": "Metadata for humans",
+  "format": "https://github.com/csstools/postcss-preset-env#importfrom",
+  "name": "has-dark-logo",
+
+  "environment-variables": {
+    "// CMS": "",
+    "--cms-toolbar-height": "46px",
+
+    "// HEADER": "",
+    "--header-text-color": "var(--global-color-primary--x-dark)",
+    "--header-bkgd-color": "var(--global-color-primary--x-light)",
+    "--header-minor-border-color": "var(--global-color-primary--normal)",
+    "// To show border between only the light header and content below it": "",
+    "--header-major-border-color": "var(--global-color-primary--normal)",
+    "--header-search-brdr-color": "#D8D8D8",
+    "--header-search-bkgd-color": "var(--global-color-primary--xx-light)",
+    "// To set the bootstrap navbar-toggler-icon svg color for current theme": "",
+    "--menu-toggle-icon": "invert(100%)"
+  }
+}