@tacc/core-styles 0.8.6 → 0.9.0

package/dist/trumps/tacc-search-bar.css

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.8.6+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */
 :host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);background-color:#313131;border:var(--global-border-width--normal) solid var(--global-color-primary--dark);border-radius:5px;color:var(--global-color-primary--xx-light);font-size:var(--input-font-size)}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]:-ms-input-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--xx-light);opacity:.5}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 0.8.6+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.8.6+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */
 .u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;border:none;padding:0}

package/dist/trumps/u-mailto-text-replace.css

@@ -0,0 +1,2 @@
+/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */
+.u-mailto-text-replace[data-user][data-domain]{visibility:hidden;font-size:0}.u-mailto-text-replace[data-user][data-domain]:before{display:inline;content:attr(data-user) "@" attr(data-domain);font-size:medium;visibility:visible}

package/dist/trumps/u-nested-text-content.css

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.8.6+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */
 .u-nested-text-content{padding-left:var(--global-space--list-indent)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
@@ -19,6 +19,7 @@
   "scripts": {
     "start": "fractal start --sync",
     "build": "npm run build:css && npm run build:demo",
+    "postbuild": "cp -r src/lib/fonts dist/fonts",
     "build:css": "bin/build.js",
     "build:demo": "fractal build",
     "test": "bin/test.js && echo \"Test output at 'dist/_tests' (compare to test input)\"",
@@ -40,7 +41,8 @@
     "postcss-cli": "^7.1.2",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^12.0.1",
-    "postcss-preset-env": "^6.7.0"
+    "postcss-preset-env": "^6.7.0",
+    "postcss-replace": "1.1.3"
   },
   "// dependencies": {
     "commander": "To create CLI",
@@ -52,7 +54,8 @@
     "postcss-cli": "To process CSS (the simplest and cheapest PostCSS runner)",
     "postcss-import": "To import CSS files at build-time",
     "postcss-extend": "To extend CSS rule sets at build-time",
-    "postcss-preset-env": "To use future CSS features now"
+    "postcss-preset-env": "To use future CSS features now",
+    "postcss-replace": "To edit relative paths to fonts"
   },
   "devDependencies": {
     "@frctl/fractal": "^1.5.13",

package/src/lib/_imports/components/c-message.css

@@ -0,0 +1,53 @@
+/*
+Message
+
+Inform user about a temporary status.
+
+- .c-message--info - neither positive nor negative
+- .c-message--success - a positive status
+- .c-message--warning - a minor negative status
+- .c-message--danger - a major negative status
+
+Reference:
+- https://getbootstrap.com/docs/4.0/components/alerts/
+
+Styleguide Components.Message
+*/
+@import url('../settings/color.css');
+
+/* Base */
+
+.c-message {
+  padding: 15px 20px;
+  border: var(--global-border--thick);
+  font-size: var(--global-font-size--small);
+}
+
+/* Elements */
+
+.c-message a {
+  color: inherit;
+}
+
+/* Modifiers */
+
+.c-message--info {
+  color: var(--global-color-info--dark);
+  background-color: var(--global-color-info--light);
+  border-color: var(--global-color-info--normal);
+}
+.c-message--success {
+  color: var(--global-color-success--dark);
+  background-color: var(--global-color-success--weak);
+  border-color: var(--global-color-success--normal);
+}
+.c-message--warning {
+  color: var(--global-color-warning--dark);
+  background-color: var(--global-color-warning--weak);
+  border-color: var(--global-color-warning--normal);
+}
+.c-message--error {
+  color: var(--global-color-danger--dark);
+  background-color: var(--global-color-danger--weak);
+  border-color: var(--global-color-danger--normal);
+}

package/src/lib/_imports/elements/bootstrap.css

@@ -0,0 +1,19 @@
+/*
+Elements (Bootstrap)
+
+Curated element styles from Bootstrap 4.
+
+Reference:
+
+- [Bootstrap Reboot](https://getbootstrap.com/docs/4.0/content/reboot/)
+
+Styleguide Elements.Bootstrap
+*/
+
+/* reboot.scss */
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}

package/src/lib/_imports/elements/form.cms.css

@@ -0,0 +1,65 @@
+/*
+Forms
+
+Elements that create forms which the user can fill out and submit to the Web site or application.
+
+```
+<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
+```
+
+Reference:
+
+- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms)
+
+Styleguide Elements.Forms
+*/
+
+/* FAQ: Setting font on form would erroneously apply to links and buttons */
+label,
+input,
+select,
+textarea {
+  font-family: var(--global-font-family--sans--portal);
+}
+
+label {
+  font-size: var(--global-font-size--small);
+
+  line-height: normal;
+  margin-bottom: 0.75em;
+}
+:not(input[type="checkbox"]) + label {
+  display: block;
+}
+fieldset:not(:last-child) {
+  margin-bottom: 3.5rem;
+}
+
+input,
+select,
+textarea {
+  border: var(--global-border--normal);
+}
+::placeholder {
+  color: var(--global-color-primary--dark);
+}
+
+input[type="time"],
+input[type="date"] {
+  font-family: var(--global-font-family--mono);
+}
+
+@media (pointer: coarse) {
+  input,
+  select,
+  textarea {
+    padding: 12px 12px;
+  }
+}
+@media (pointer: fine), (pointer: none) {
+  input,
+  select,
+  textarea {
+    padding: 5px 10px;
+  }
+}

package/src/lib/_imports/elements/{html-elements.css → html-elements.cms.css}

@@ -14,6 +14,9 @@ Reference:
 
 Styleguide Elements.MainSectioningRoots
 */
+@import url('../settings/color.css');
+@import url('../settings/font.css');
+@import url('../settings/space.css');
 
 html {
   /* Set base font but support user-defined browser font size */
@@ -33,7 +36,7 @@ body {
 
   /* To overwrite Bootstrap */
   color: var(--global-color-primary--x-dark);
-  font-family: var(--global-font-family);
+  font-family: var(--global-font-family--sans--cms);
   font-size: var(--global-font-size--medium);
   line-height: 1.4;
 }
@@ -187,15 +190,18 @@ Styleguide Elements.InlineTextSemantics
 
 /* Links */
 
-a,
-a:hover { color: var(--global-color-link-on-light--normal); /* overwrite Bootstrap */ }
-a:focus { text-decoration: underline dotted; }
-
-/* FAQ: Bootstrap already provides basic text-decoration */
-/*
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
-*/
+a {
+  color: var(--global-color-link-on-light--normal);
+  text-decoration-thickness: var(--global-border-width--normal);
+}
+a:hover {
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+}
+a:focus {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
 
 /* Monospace */
 

package/src/lib/_imports/generics/fonts.css

@@ -0,0 +1,54 @@
+/*
+Fonts
+
+Load standard fonts for a TACC website.
+
+Usage:
+  ```
+  .something {
+    // BentonSans-MediumItalic
+    font-family: 'Benton Sans';
+    font-weight: 500;
+    font-style: italic;
+  }
+  ```
+
+Reference:
+- [Keep Font CSS Simple](https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/)
+- [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+- [Shared UI - Constants - Font](https://confluence.tacc.utexas.edu/x/cYAZCg)
+
+Styleguide Generics.Fonts
+*/
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Medium.otf") format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-MediumItalic.otf") format("opentype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}

package/src/lib/_imports/settings/color.css

@@ -42,18 +42,24 @@
   --global-color-info--dark: var(--global-color-primary--x-dark);
   --global-color-info--normal: var(--global-color-primary--normal);
   --global-color-info--light: var(--global-color-primary--x-light);
+  --global-color-success--dark: #237119;
   --global-color-success--normal: #43d130;
   --global-color-success--weak: #43d13020;
   --global-color-success--alt: var(--global-color-warning--normal);
   --global-color-success--alt-weak: var(--global-color-warning--weak);
+  --global-color-warning--dark: #717411;
   --global-color-warning--normal: #c7ce1d;
   --global-color-warning--weak: #c7ce1d20;
   --global-color-warning--alt: var(--global-color-accent--dark);
   --global-color-warning--alt-weak: var(--global-color-accent--weak);
-  --global-color-danger--dark: #ab1717;
-  --global-color-danger--normal: #eb6e6e;
-  --global-color-danger--weak: #eb6e6e20;
+  --global-color-danger--dark: #AF1818;
+  --global-color-danger--normal: #F09393;
+  --global-color-danger--weak: #F0939320;
 
   /* Generic */
   --global-color-background--app: var(--global-color-primary--xx-light);
+
+  /* Link */
+  --global-color-link-on-light--normal: var(--global-color-accent--normal);
+  --global-color-link-on-dark--normal: var(--global-color-accent--light);
 }

package/src/lib/_imports/settings/font.css

@@ -18,14 +18,15 @@ Reference:
 
 Styleguide Settings.CustomProperties.Font
 */
+@import url('../generics/fonts.css');
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
 
 :root {
   /* Family */
-  /* NOTE: Clients are expected to overwrite these values via their CSS */
-  --global-font-family--sans: sans-serif;
-  --global-font-family--serif: serif;
-  --global-font-family--mono: monospace;
-
+  --global-font-family--sans--cms: "Benton Sans", "Roboto", sans-serif;
+  --global-font-family--sans--portal: "Roboto", sans-serif;
+  --global-font-family--serif: Times, sans-serif;
+  --global-font-family--mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 
   /* Size */
   /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */

package/src/lib/_imports/trumps/u-mailto-text-replace.css

@@ -1,6 +1,6 @@
 /* Create utility class from `x-mailto-text-replace` */
 
-@import url("@tacc/core-styles/src/lib/_imports/tools/x-mailto-text-replace.css");
+@import url("../tools/x-mailto-text-replace.css");
 
 .u-mailto-text-replace[data-user][data-domain] {
     @extend %x-mailto-text-replace;