@wwtdev/bsds-css 2.28.0 → 3.0.0-rc.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wwtdev/bsds-css",
-  "version": "2.28.0",
+  "version": "3.0.0-rc.21",
   "description": "A new approach to creating a design system at WWT.",
   "main": "./dist",
   "files": [
@@ -13,32 +13,28 @@
       ],
       "extensions": "html,css,js",
       "runOnChangeOnly": false
-    },
-    "build:wccss": {
-      "patterns": [
-        "src"
-      ],
-      "extensions": "html,css,js",
-      "runOnChangeOnly": false
     }
   },
   "scripts": {
-    "build": "node utils/css-props-generator.js && npm run build:css && npm run build:preset && npm run build:wccss",
+    "build": "node .build/cssPropsGenerator.js && npm run build:css && npm run build:preset",
     "build:css": "postcss src/styles/wwt-bsds.css -o dist/wwt-bsds.css && uglifycss dist/wwt-bsds.css > dist/wwt-bsds.min.css",
-    "build:preset": "node utils/copyFiles src/wwt-bsds-preset.js dist/wwt-bsds-preset.js",
-    "build:wccss": "postcss src/styles/wwt-bsds-wc-base.css -o dist/wwt-bsds-wc-base.css && node utils/copyFiles src/styles/components dist/components && node utils/sassifyDir",
+    "build:preset": "node .build/copyFiles src/wwt-bsds-preset.js dist/wwt-bsds-preset.js",
     "bump:rc": "node ../../.build/bump-rc.js",
     "ci:bump:rc": "npm run ci:check bump:rc css-framework",
     "ci:check": "node ../../.build/check-run.js",
     "ci:publish-npm": "npm run ci:check publish-npm css-framework",
     "ci:publish-wwt:rc": "npm run ci:check publish-wwt:rc css-framework",
+    "ci:publish-wwt:next-rc": "npm run ci:check publish-wwt:next-rc css-framework",
     "ci:publish-wwt": "npm run ci:check publish-wwt css-framework",
     "ci:tag:latest:rc": "npm run ci:check tag:latest:rc css-framework",
+    "ci:tag:latest:next-rc": "npm run ci:check tag:latest:next-rc css-framework",
     "ci:tag:latest": "npm run ci:check tag:latest css-framework",
     "publish-npm": "npm publish --@wwtdev:registry=https://registry.npmjs.org --access=public",
     "publish-wwt:rc": "publish-wwt-package --monorepo=css-framework --branch=develop --skip-tag",
+    "publish-wwt:next-rc": "publish-wwt-package --monorepo=css-framework --branch=develop-next --skip-tag",
     "publish-wwt": "publish-wwt-package --monorepo=css-framework",
     "tag:latest:rc": "git tag -f css-framework@latest-rc && git push origin -f css-framework@latest-rc",
+    "tag:latest:next-rc": "git tag -f css-framework@latest-next-rc && git push origin -f css-framework@latest-next-rc",
     "tag:latest": "git tag -f css-framework@latest && git push origin -f css-framework@latest",
     "watch": "npm-watch"
   },

package/dist/components/_accordions.scss

@@ -1,122 +0,0 @@
-@mixin accordions() {
-  .bs-accordion {
-  --accordion-link-color: var(--bs-purple-400);
-  --accordion-link-outline-color: var(--bs-blue-base);
-  --accordion-outline-color: transparent;
-  --accordion-padding-inline: 0;
-  --accordion-text-size: var(--bs-text-sm);
-  border-block: 1px solid var(--bs-border-base);
-  display: block;
-}
-
-@media (min-width: 957px) {
-  .bs-accordion {
-    --accordion-padding-inline: var(--bs-space-2);
-    --accordion-text-size: var(--bs-text-base);
-  }
-}
-
-/* Accordion Panel (Icon, Title, Caret) */
-
-.bs-accordion :where(.bs-accordion-toggle),
-.bs-accordion > :where(header) > :where(button) {
-  align-items: center;
-  background-color: var(--bs-bg-base);
-  border: 0px solid transparent;
-  border-radius: .25rem;
-  color: var(--bs-ink-base);
-  cursor: pointer;
-  display: grid;
-  font-size: var(--accordion-text-size);
-  font-weight: var(--bs-font-normal);
-  grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
-  grid-template-areas: "start main end";
-  line-height: 1.5;
-  outline: 2px solid var(--accordion-outline-color);
-  padding: var(--bs-space-0);
-  padding-block: var(--bs-space-f-2);
-  padding-inline: var(--accordion-padding-inline);
-  text-decoration: none;
-  width: 100%;
-}
-
-.bs-accordion :where(.bs-accordion-toggle:focus-visible),
-.bs-accordion > :where(header) > :where(button:focus-visible) {
-  --accordion-outline-color: var(--bs-blue-base);
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > *,
-.bs-accordion > :where(header) > :where(button) > * {
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > *,
-.bs-accordion > :where(header) > :where(button) > * {
-  grid-area: main;
-  margin-right: var(--bs-space-2);
-  text-align: left;
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > *,
-.bs-accordion > :where(header) > :where(button) > * {
-  vertical-align: middle;
-}
-
-@media (min-width: 957px) {
-  .bs-accordion :where(.bs-accordion-toggle) > * ,
-  .bs-accordion > :where(header) > :where(button) > * {
-    margin-right: var(--bs-space-3);
-  }
-}
-
-.bs-accordion :where(.bs-accordion-toggle) :where([data-position]),
-.bs-accordion > :where(header) > :where(button) :where([data-position]) {
-  width: var(--accordion-text-size);
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="start"]),
-.bs-accordion > :where(header) > :where(button) > :where([data-position="start"]) {
-  grid-area: start;
-  margin-right: var(--bs-space-2);
-}
-
-.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="end"]),
-.bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
-  grid-area: end;
-  transform: rotate(0);
-  transition: var(--bs-trans-rotate180);
-}
-
-.bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
-  transform: rotate(180deg);
-}
-
-/* Accordion Content (the collapsible / expandible part) */
-
-.bs-accordion :where(.bs-accordion-content) {
-  display: grid;
-  font-size: var(--accordion-text-size);
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  padding-inline: var(--accordion-padding-inline);
-  transition: grid-template-rows 250ms ease-out;
-}
-
-.bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
-  overflow: hidden;
-}
-
-.bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
-  grid-template-rows: 1fr;
-  padding-block-end: var(--bs-space-f-2);
-}
-
-/* Accordion Group */
-:where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
-  border-block-start-color: transparent;
-} 
-
-  }
-  

package/dist/components/_alert.scss

@@ -1,143 +0,0 @@
-@mixin alert() {
-  .bs-alert {
-  /* bs-blue-100 @ 10% */
-  background-color: #99cff71a;
-  border-radius: 8px;
-  border: 2px solid var(--bs-ink-blue);
-  column-gap: 0.75rem;
-  display: grid;
-  grid-template-columns: 1.125rem 1fr 1rem;
-  grid-template-areas: "icon title close"
-                       ". description ."
-                       ". action .";
-  padding: 1rem;
-}
-
-@media (min-width: 752px) {
-  .bs-alert {
-    padding: 1.5rem;
-    grid-template-columns: 1.25rem 1fr 1rem;
-    grid-template-areas: "icon title close"
-                       ". description ."
-                       ". action .";
-  }
-}
-
-@media (min-width: 752px) {
-  .bs-alert:where([data-horizontal="true"]) {
-    padding: 1rem 1.5rem;
-    grid-template-areas: "icon title action close";
-    grid-template-columns: 1.125rem max-content 1fr 1rem;
-  }
-}
-
-.bs-alert :where(.bs-alert-icon) {
-  margin-top: 0.25rem;
-  align-self: start;
-  color: var(--bs-ink-blue);
-  grid-area: icon;
-  height: 1.125rem;
-  width: 1.125rem;
-}
-
-.bs-alert :where(.bs-alert-title) {
-  font-size: 1.125rem;
-  line-height: 1.3;
-  color: var(--bs-ink-base);
-  grid-area: title;
-}
-
-@media (min-width: 752px) {
-  .bs-alert :where(.bs-alert-title) {
-    font-size: 1.25rem;
-    line-height: 1.3;
-  }
-
-  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
-    font-size: 1.125rem;
-    line-height: 1.5;
-  }
-
-  .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-}
-
-.bs-alert :where(.bs-alert-description) {
-  font-size: 0.875rem;
-  color: var(--bs-ink-medium);
-  grid-area: description;
-  margin-top: 0.5rem;
-}
-
-@media (min-width: 752px) {
-  .bs-alert :where(.bs-alert-description) {
-    font-size: 1rem;
-  }
-}
-
-.bs-alert:where([data-horizontal="true"]) :where(.bs-alert-description) {
-  display: none;
-}
-
-.bs-alert :where(.bs-alert-close) {
-  margin-top: 0.25rem;
-  align-self: start;
-  background-color: transparent;
-  cursor: pointer;
-  grid-area: close;
-  height: 1rem;
-  width: 1rem;
-}
-
-.bs-alert :where(.bs-alert-action) {
-  grid-area: action;
-  margin-top: 1rem;
-}
-
-@media (min-width: 752px) {
-  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
-    margin-top: 0;
-  }
-}
-
-/* COLOR VARIANTS */
-.bs-alert:where([data-variant="success"]) {
-  /* bs-purple-100 @ 10% */
-  background-color: #e0c5ef1a;
-  border-color: var(--bs-ink-purple);
-}
-
-.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-purple);
-}
-
-.bs-alert:where([data-variant="warning"]) {
-  /* bs-orange-100 @ 10% */
-  background-color: #f3c4a81a;
-  border-color: var(--bs-ink-orange);
-}
-.bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-orange);
-}
-
-.bs-alert:where([data-variant="negative"]) {
-  /* bs-red-100 @ 10% */
-  background-color: #f8a9aa1a;
-  border-color: var(--bs-ink-red);
-}
-
-.bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
-  color: var(--bs-ink-red);
-}
-
-/* DARK MODE SPECIAL CASE */
-.dark .bs-alert :where(.bs-alert-action) {
-  --btn-border-color-focused: var(--bs-text-base);
-  --btn-text-color: var(--bs-text-base);
-  --btn-text-color-hovered: var(--bs-text-base);
-}
-
-  }
-  

package/dist/components/_badge.scss

@@ -1,95 +0,0 @@
-@mixin badge() {
-  .bs-badge {
-  --badge-bg: var(--bs-red-400);
-  --badge-text: var(--bs-white);
-  display: inline-block;
-}
-
-/* ------ Badge wrapped around text ------ */
-
-/* Badge DOT */
-.bs-badge:where([data-position^='left'])::before,
-.bs-badge:where(:not([data-position^='left']))::after {
-  align-items: center;
-  background: var(--badge-bg);
-  border-radius: 0.5rem;
-  content: '';
-  display: inline-flex;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  height: 6px;
-  justify-content: center;
-  line-height: 1.25;
-  position: relative;
-  vertical-align: top;
-  width: 6px;
-}
-
-.bs-pill .bs-badge::before,
-.bs-pill .bs-badge::after {
-  font-size: 0.8125em;
-}
-
-/* Badge COUNT */
-
-.bs-badge:where([data-count][data-position^='left'])::before,
-.bs-badge:where([data-count]:not([data-position^='left']))::after {
-  color: var(--badge-text);
-  content: attr(data-count);
-  height: 1rem;
-  min-width: 1rem;
-  padding: 0 4px;
-  top: -0.0625rem;
-  vertical-align: unset;
-  width: auto;
-}
-
-.bs-badge:where([data-count='0'])::before,
-.bs-badge:where([data-count='0'])::after {
-  display: none;
-}
-
-.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
-.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
-  display: inline-flex;
-}
-
-/* Badge SPACING against wrapped text */
-
-.bs-badge::before {
-  margin-right: 0.25rem;
-}
-
-.bs-badge::after {
-  margin-left: 0.25rem;
-}
-
-/* Badge COLORS */
-
-.bs-badge:where([data-badge-color^='blue']) {
-  --badge-bg: var(--bs-blue-base);
-}
-.bs-badge:where([data-badge-color^='white']) {
-  --badge-bg: var(--bs-white);
-  --badge-text: var(--bs-black);
-}
-
-/* ------ Standalone Badge (not wrapped around text) ------ */
-.bs-badge:where([data-variant="notext"]) {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-}
-
-.bs-badge:where([data-variant="notext"]) {
-  line-height: 1;
-}
-
-.bs-badge:where([data-variant="notext"])::after,
-.bs-badge:where([data-variant="notext"])::before {
-  margin: 0;
-  top: unset;
-}
-
-  }
-  

package/dist/components/_banner.scss

@@ -1,68 +0,0 @@
-@mixin banner() {
-  :where(.bs-banner) {
-  --banner-bg: var(--bs-royal-400);
-  --banner-icon-display: none;
-  --banner-padding: var(--banner-padding-m);
-  --banner-padding-m: 1rem 1.5rem;
-  --banner-padding-dt: .5rem 2.25rem;
-}
-
-.bs-banner {
-  background-color: var(--banner-bg);
-  color: var(--bs-ink-white);
-  display: flex;
-  justify-content: center;
-  min-height: 3rem;
-  padding: var(--banner-padding);
-}
-
-.bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
-  display: none;
-}
-
-.bs-banner :where(.bs-banner-content) {
-  align-items: center;
-  display: flex;
-  /* Content locks at globally configured width */
-  max-width: var(--bs-content-max-width);
-  width: 100%;
-}
-
-.bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
-  /* Do not display icon on smaller screens */
-  display: var(--banner-icon-display);
-  margin-right: 0.625rem;
-}
-
-.bs-banner :where(.bs-banner-content p) {
-  flex-grow: 1;
-  padding-right: 1.25rem;
-}
-
-.bs-banner :where(.bs-banner-content p a) {
-  text-decoration: underline;
-}
-
-.bs-banner :where(a:hover) {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.bs-banner :where(.bs-banner-content button) {
-  background-color: inherit;
-  color: inherit;
-  cursor: pointer;
-}
-
-.bs-banner:where([data-variant="negative"]) {
-  --banner-bg: var(--bs-red-300);
-}
-
-@media (min-width: 957px) {
-  .bs-banner {
-    --banner-icon-display: inline-flex;
-    --banner-padding: var(--banner-padding-dt);
-  }
-}
-
-  }
-