@rolemodel/optics 2.1.0 → 2.1.2

package/dist/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@rolemodel/optics",
+  "version": "2.1.2",
+  "packageManager": "yarn@4.2.2",
+  "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
+  "main": "dist/css/optics.css",
+  "scripts": {
+    "test": "exit 0",
+    "build": "yarn build:css && yarn build:css-min && yarn build:tokens && yarn build:files",
+    "build:css": "postcss src/optics.css -o dist/css/optics.css",
+    "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css --env=minify",
+    "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
+    "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -r src/addons dist/css",
+    "storybook": "storybook dev -p 6006 --docs",
+    "build-storybook": "storybook build --docs",
+    "lint": "yarn lint:js && yarn lint:css",
+    "lint-fix": "yarn lint:js --fix && yarn lint:css --fix",
+    "lint:js": "eslint 'src/stories/**/*.js'",
+    "lint:css": "stylelint 'src/**/*.css'",
+    "prettier": "prettier -w .",
+    "prettier-check": "prettier -c .",
+    "sanity-check": "yarn lint && yarn prettier && yarn build && yarn build-storybook && rm -rf ./dist && rm -rf ./storybook-static",
+    "generate": "node ./tools/generate.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RoleModel/optics.git"
+  },
+  "keywords": [
+    "Design",
+    "CSS",
+    "System",
+    "RoleModel",
+    "Optics"
+  ],
+  "author": "RoleModel Software",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/RoleModel/optics/issues"
+  },
+  "homepage": "https://github.com/RoleModel/optics#readme",
+  "publishConfig": {
+    "@RoleModel:registry": "https://npm.pkg.github.com"
+  },
+  "dependencies": {
+    "modern-css-reset": "^1.4.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.9",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/html": "^8.5.3",
+    "@storybook/html-vite": "^8.5.3",
+    "@storybook/manager-api": "^8.5.3",
+    "@storybook/preview-api": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@storybook/theming": "^8.5.3",
+    "cssnano": "^7.0.6",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^16.0.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-storybook": "^0.11.2",
+    "generate-template-files": "^3.2.1",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "prettier": "^3.0.0",
+    "storybook": "^8.5.3",
+    "storybook-design-token": "^3.1.0",
+    "style-loader": "^3.3.3",
+    "stylelint": "^16.2.1",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-prettier": "^5.0.0",
+    "vite": "^5.4.14"
+  },
+  "peerDependencies": {
+    "tom-select": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tom-select": {
+      "optional": true
+    }
+  }
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "packageManager": "yarn@4.2.2",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",
   "scripts": {
     "test": "exit 0",
-    "build": "yarn build:css && yarn build:css-min && yarn build:tokens",
-    "build:css": "mkdir -p dist/css; rsync -a src/ dist/css --exclude stories",
-    "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css",
+    "build": "yarn build:css && yarn build:css-min && yarn build:tokens && yarn build:files",
+    "build:css": "postcss src/optics.css -o dist/css/optics.css",
+    "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css --env=minify",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
+    "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -r src/addons dist/css",
     "storybook": "storybook dev -p 6006 --docs",
     "build-storybook": "storybook build --docs",
     "lint": "yarn lint:js && yarn lint:css",
@@ -54,6 +55,7 @@
     "@storybook/preview-api": "^8.5.3",
     "@storybook/test": "^8.5.3",
     "@storybook/theming": "^8.5.3",
+    "cssnano": "^7.0.6",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",

package/postcss.config.js

@@ -1,3 +1,6 @@
-module.exports = {
-  plugins: [require('postcss-import')],
-}
+module.exports = (context) => ({
+  plugins: {
+    'postcss-import': {},
+    cssnano: context.env === 'minify' ? {} : false,
+  },
+})

package/dist/css/components/accordion.css

@@ -1,66 +0,0 @@
-.accordion {
-  /* Public API (customizable component options) */
-  --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
-
-  overflow: hidden;
-  interpolate-size: allow-keywords;
-
-  /* Elements */
-
-  summary {
-    display: grid;
-    min-height: var(--_op-accordion-summary-min-height);
-    align-items: center;
-    cursor: pointer;
-    gap: var(--op-space-2x-small);
-    grid-template-columns: auto 1fr auto;
-
-    &::marker,
-    &::-webkit-details-marker {
-      display: none;
-      content: '';
-    }
-
-    .accordion__label {
-      color: var(--op-color-neutral-on-plus-max);
-      font-size: var(--op-font-x-small);
-      font-weight: var(--op-font-weight-semi-bold);
-    }
-
-    .accordion__marker {
-      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
-      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
-
-      justify-self: flex-end;
-      transition: var(--op-transition-accordion);
-      user-select: none;
-    }
-  }
-
-  &::details-content {
-    height: 0;
-    transition: var(--op-transition-accordion-content);
-  }
-
-  &[open] {
-    summary .accordion__marker {
-      rotate: 0.25turn;
-    }
-
-    &::details-content {
-      height: auto;
-    }
-  }
-
-  /* Modifiers */
-
-  &.accordion--disable-animation {
-    summary .accordion__marker {
-      transition: none;
-    }
-
-    &::details-content {
-      transition: none;
-    }
-  }
-}

package/dist/css/components/alert.css

@@ -1,171 +0,0 @@
-.alert {
-  display: flex;
-  align-items: center;
-  padding: var(--op-space-x-small) var(--op-space-medium);
-  border-radius: var(--op-radius-medium);
-  gap: var(--op-space-small);
-
-  /* Elements */
-
-  .alert__icon {
-    --__op-icon-font-size: var(--_op-icon-font-size-large);
-    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
-    --__op-icon-weight: var(--_op-icon-weight-bold);
-
-    line-height: var(--op-line-height-dense);
-  }
-
-  .alert__messages {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: var(--op-space-2x-small);
-  }
-
-  .alert__title {
-    font-size: var(--op-font-medium);
-    font-weight: var(--op-font-weight-medium);
-  }
-
-  .alert__description {
-    font-size: var(--op-font-small);
-  }
-
-  /* Modifiers */
-
-  &.alert--flash {
-    position: fixed;
-    z-index: var(--op-z-index-alert-group);
-    top: var(--op-space-large);
-    right: var(--op-space-large);
-    animation: var(--op-animation-flash);
-  }
-
-  &.alert--warning {
-    background-color: var(--op-color-alerts-warning-plus-eight);
-    box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
-    color: var(--op-color-alerts-warning-on-plus-eight);
-
-    .alert__title {
-      color: var(--op-color-alerts-warning-on-plus-eight-alt);
-    }
-
-    &.alert--muted {
-      background-color: var(--op-color-alerts-warning-plus-five);
-      box-shadow: none;
-      color: var(--op-color-alerts-warning-on-plus-five);
-
-      .alert__title {
-        color: var(--op-color-alerts-warning-on-plus-five-alt);
-      }
-    }
-
-    &.alert--filled {
-      background-color: var(--op-color-alerts-warning-base);
-      box-shadow: none;
-      color: var(--op-color-alerts-warning-on-base);
-
-      .alert__title {
-        color: var(--op-color-alerts-warning-on-base-alt);
-      }
-    }
-  }
-
-  /* alert--alert is an alias for alert--danger. See Alert.mdx for reasoning. */
-  &.alert--danger,
-  &.alert--alert {
-    background-color: var(--op-color-alerts-danger-plus-eight);
-    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
-    color: var(--op-color-alerts-danger-on-plus-eight);
-
-    /* stylelint-disable no-descending-specificity */
-    .alert__title {
-      color: var(--op-color-alerts-danger-on-plus-eight-alt);
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    &.alert--muted {
-      background-color: var(--op-color-alerts-danger-plus-five);
-      box-shadow: none;
-      color: var(--op-color-alerts-danger-on-plus-five);
-
-      .alert__title {
-        color: var(--op-color-alerts-danger-on-plus-five-alt);
-      }
-    }
-
-    &.alert--filled {
-      background-color: var(--op-color-alerts-danger-base);
-      box-shadow: none;
-      color: var(--op-color-alerts-danger-on-base);
-
-      .alert__title {
-        color: var(--op-color-alerts-danger-on-base-alt);
-      }
-    }
-  }
-
-  &.alert--info {
-    background-color: var(--op-color-alerts-info-plus-eight);
-    box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
-    color: var(--op-color-alerts-info-on-plus-eight);
-
-    /* stylelint-disable no-descending-specificity */
-    .alert__title {
-      color: var(--op-color-alerts-info-on-plus-eight-alt);
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    &.alert--muted {
-      background-color: var(--op-color-alerts-info-plus-five);
-      box-shadow: none;
-      color: var(--op-color-alerts-info-on-plus-five);
-
-      .alert__title {
-        color: var(--op-color-alerts-info-on-plus-five-alt);
-      }
-    }
-
-    &.alert--filled {
-      background-color: var(--op-color-alerts-info-base);
-      box-shadow: none;
-      color: var(--op-color-alerts-info-on-base);
-
-      .alert__title {
-        color: var(--op-color-alerts-info-on-base-alt);
-      }
-    }
-  }
-
-  &.alert--notice {
-    background-color: var(--op-color-alerts-notice-plus-eight);
-    box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
-    color: var(--op-color-alerts-notice-on-plus-eight);
-
-    /* stylelint-disable no-descending-specificity */
-    .alert__title {
-      color: var(--op-color-alerts-notice-on-plus-eight-alt);
-    }
-    /* stylelint-enable no-descending-specificity */
-
-    &.alert--muted {
-      background-color: var(--op-color-alerts-notice-plus-five);
-      box-shadow: none;
-      color: var(--op-color-alerts-notice-on-plus-five);
-
-      .alert__title {
-        color: var(--op-color-alerts-notice-on-plus-five-alt);
-      }
-    }
-
-    &.alert--filled {
-      background-color: var(--op-color-alerts-notice-base);
-      box-shadow: none;
-      color: var(--op-color-alerts-notice-on-base);
-
-      .alert__title {
-        color: var(--op-color-alerts-notice-on-base-alt);
-      }
-    }
-  }
-}

package/dist/css/components/avatar.css

@@ -1,95 +0,0 @@
-.avatar {
-  /* Public API (customizable component options) */
-  --_op-avatar-border-radius: var(--op-radius-circle);
-  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
-  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
-  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
-  --_op-avatar-outer-border-width: var(--op-border-width-large);
-  --_op-avatar-disabled-opacity: var(--op-opacity-disabled);
-  --_op-avatar-hover-opacity: var(--op-opacity-overlay);
-  --_op-avatar-size-small: calc(8 * var(--op-size-unit)); /* 32px */
-  --_op-avatar-size-medium: calc(10 * var(--op-size-unit)); /* 40px */
-  --_op-avatar-size-large: calc(14 * var(--op-size-unit)); /* 56px */
-
-  /* Private API (component option defaults) */
-  --__op-avatar-size: var(--_op-avatar-size-large);
-
-  position: relative;
-  z-index: 1;
-  display: block;
-  overflow: hidden;
-  width: var(--__op-avatar-size);
-  min-width: var(--__op-avatar-size);
-  height: var(--__op-avatar-size);
-  min-height: var(--__op-avatar-size);
-  border-radius: var(--_op-avatar-border-radius);
-
-  &::before {
-    position: absolute;
-    z-index: 2;
-    content: '';
-    inset: 0;
-  }
-
-  &::after {
-    position: absolute;
-    z-index: 3;
-    border-radius: var(--_op-avatar-border-radius);
-    box-shadow:
-      inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color),
-      inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
-    content: '';
-    inset: 0;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  /* Disabled State */
-  &.avatar--disabled {
-    opacity: var(--_op-avatar-disabled-opacity);
-    pointer-events: none;
-  }
-
-  /* Focus State */
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    outline: none;
-  }
-
-  /* Hover State */
-  &:hover:not(div, .avatar--disabled) {
-    --_op-avatar-inner-border-color: var(--op-color-primary-base);
-    --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
-
-    cursor: pointer;
-
-    &::before {
-      background-color: var(--op-color-primary-base);
-      opacity: var(--_op-avatar-hover-opacity);
-    }
-  }
-
-  &:focus-visible:not(.avatar--disabled) {
-    --_op-avatar-outer-border-color: var(--op-color-primary-base);
-
-    cursor: pointer;
-  }
-
-  /* Size Modifiers */
-  &.avatar--small {
-    --__op-avatar-size: var(--_op-avatar-size-small);
-  }
-
-  &.avatar--medium {
-    --__op-avatar-size: var(--_op-avatar-size-medium);
-  }
-
-  &.avatar--large {
-    --__op-avatar-size: var(--_op-avatar-size-large);
-  }
-}

package/dist/css/components/badge.css

@@ -1,73 +0,0 @@
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--op-radius-medium);
-  background-color: var(--op-color-neutral-base);
-  color: var(--op-color-neutral-on-base);
-  cursor: inherit;
-  font-size: var(--op-font-x-small);
-  font-weight: var(--op-font-weight-bold);
-  gap: var(--op-space-x-small);
-  letter-spacing: var(--op-letter-spacing-label);
-  line-height: var(--op-line-height-dense);
-  padding-block: var(--op-space-2x-small);
-  padding-inline: var(--op-space-x-small);
-  user-select: none;
-  white-space: nowrap;
-
-  /* Elements */
-
-  .material-symbols-outlined {
-    font-size: var(--op-font-small);
-  }
-
-  /* Modifiers */
-
-  &.badge--primary {
-    background-color: var(--op-color-primary-base);
-    color: var(--op-color-primary-on-base);
-  }
-
-  &.badge--warning {
-    background-color: var(--op-color-alerts-warning-base);
-    color: var(--op-color-alerts-warning-on-base);
-  }
-
-  &.badge--danger {
-    background-color: var(--op-color-alerts-danger-base);
-    color: var(--op-color-alerts-danger-on-base);
-  }
-
-  &.badge--info {
-    background-color: var(--op-color-alerts-info-base);
-    color: var(--op-color-alerts-info-on-base);
-  }
-
-  &.badge--notice {
-    background-color: var(--op-color-alerts-notice-base);
-    color: var(--op-color-alerts-notice-on-base);
-  }
-
-  &.badge--pill {
-    border-radius: var(--op-radius-pill);
-  }
-
-  &.badge--notification-right {
-    position: absolute;
-    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    pointer-events: none;
-    transform: translateY(-50%) translateX(50%);
-  }
-
-  &.badge--notification-left {
-    position: absolute;
-    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    pointer-events: none;
-    transform: translateY(-50%) translateX(-50%);
-  }
-}

package/dist/css/components/breadcrumbs.css

@@ -1,37 +0,0 @@
-.breadcrumbs {
-  /* Public API (customizable component options) */
-  --_op-breadcrumbs-font-size-small: var(--op-font-x-small);
-  --_op-breadcrumbs-font-size-large: var(--op-font-small);
-
-  /* Private API (component option defaults) */
-  --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
-
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--op-space-x-small);
-
-  /* Elements */
-  .breadcrumbs__link {
-    font-size: var(--__op-breadcrumbs-font-size);
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .breadcrumbs__text {
-    font-size: var(--__op-breadcrumbs-font-size);
-    font-weight: var(--op-font-weight-bold);
-  }
-
-  /* Modifiers */
-  &.breadcrumbs--small {
-    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-small);
-  }
-
-  &.breadcrumbs--large {
-    --__op-breadcrumbs-font-size: var(--_op-breadcrumbs-font-size-large);
-  }
-}