@rolemodel/optics 0.3.0 → 0.4.0

package/.storybook/documentation.scss

@@ -1,93 +0,0 @@
-@import './src/optics.scss';
-
-@import './src/recipes/domains-sidebar.scss';
-@import './src/recipes/16six-sidebar.scss';
-
-@import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
-
-.transition-demo {
-  display: inline-block;
-  padding: var(--op-space-medium);
-  background-color: var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-  transition: var(--op-transition-input);
-
-  &:hover {
-    background-color: var(--op-color-neutral-base);
-    color: var(--op-color-neutral-on-base);
-  }
-}
-
-.transition-demo--input {
-  transition: var(--op-transition-input);
-}
-
-.transition-demo--sidebar {
-  transition: var(--op-transition-sidebar);
-}
-
-.transition-demo--modal {
-  transition: var(--op-transition-modal);
-}
-
-.transition-demo--panel {
-  transition: var(--op-transition-panel);
-  transition-property: all;
-}
-
-.flash--demo {
-  position: relative;
-  top: 0;
-  right: 0;
-  animation: none;
-}
-
-.background-primary-plus-four {
-  background-color: var(--op-color-primary-plus-four);
-  color: var(--op-color-primary-on-plus-four);
-}
-
-.background-primary-plus-seven {
-  background-color: var(--op-color-primary-plus-seven);
-  color: var(--op-color-primary-on-plus-seven);
-}
-
-.font-family-demo--alternative {
-  --op-font-family: 'Tilt Neon', sans-serif;
-
-  font-family: var(--op-font-family);
-}
-
-.design-token-container {
-  .design-token-card {
-    table {
-      td:nth-of-type(1),
-      th:nth-of-type(1) {
-        flex-basis: 40%;
-      }
-
-      td:nth-of-type(2),
-      th:nth-of-type(2) {
-        flex-basis: 35%;
-      }
-
-      td:nth-of-type(3),
-      th:nth-of-type(3) {
-        flex-basis: 25%;
-      }
-    }
-  }
-}
-
-.input-height-tokens {
-  .design-token-container {
-    div:nth-child(2) {
-      div {
-        div:last-child {
-          margin: var(--op-space-x-large);
-          transform: rotate(90deg);
-        }
-      }
-    }
-  }
-}

package/.storybook/main.js

@@ -1,11 +0,0 @@
-module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/preset-scss',
-    { name: 'storybook-design-token', options: { preserveCSSVars: true } },
-  ],
-  framework: '@storybook/html',
-}

package/.storybook/manager.js

@@ -1,22 +0,0 @@
-import React from 'react'
-import { addons, types } from '@storybook/addons'
-import rolemodelTheme from './rolemodelTheme'
-
-import { useGlobals } from '@storybook/api' // For some reason this is needed here. ModeSwitcher won't work without it.
-
-import ModeSwitcher from './ModeSwitcher'
-
-addons.register('rolemodel/toolbar', () => {
-  addons.add('rolemodel-toolbar-addon/toolbar', {
-    title: 'Control to switch theme mode',
-    //👇 Sets the type of UI element in Storybook
-    type: types.TOOL,
-    //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
-    render: () => <ModeSwitcher />,
-  })
-})
-
-addons.setConfig({
-  theme: rolemodelTheme,
-})

package/.storybook/preview.js

@@ -1,12 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
-
-import '!style-loader!css-loader!sass-loader!../src/optics.scss'
-import '!style-loader!css-loader!sass-loader!./documentation.scss'

package/.storybook/rolemodelTheme.js

@@ -1,10 +0,0 @@
-import { create } from '@storybook/theming'
-
-export default create({
-  base: 'light',
-  brandTitle: 'Optics, a RoleModel Design System',
-  brandUrl: 'https://docs.optics.rolemodel.design/',
-  brandImage:
-    'https://rolemodelsoftware.com/assets/rolemodel-logo--blue-5b7cee4303f5b115050586117bad8960640884812d1d51ee4b58817598c896da.svg',
-  brandTarget: '_self',
-})

package/dist/scss/addons/rails-modal-and-panel/index.scss

@@ -1,2 +0,0 @@
-@import 'modal';
-@import 'panel';

package/dist/scss/addons/rails-modal-and-panel/modal.scss

@@ -1,111 +0,0 @@
-.modal {
-  // Modals
-  --op-modal-width: 564px;
-
-  position: fixed;
-  z-index: var(--op-z-index-dialog);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-
-  // Prevent Chrome on Windows from adding a focus outline. For details, see
-  // https://github.com/twbs/bootstrap/pull/10951.
-  outline: 0;
-  visibility: hidden;
-
-  /* We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-  gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-  See also https://github.com/twbs/bootstrap/issues/17695 */
-}
-
-.modal__backdrop {
-  position: fixed;
-  z-index: var(--op-z-index-dialog-backdrop);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: black;
-  opacity: 0;
-  transition: var(--op-transition-modal);
-  visibility: hidden;
-}
-
-.modal__content {
-  z-index: var(--op-z-index-dialog-content);
-  width: var(--op-modal-width);
-  max-height: 500px;
-  padding: var(--op-space-large);
-  border-radius: var(--op-radius-large);
-  background: var(--op-color-background);
-  color: var(--op-color-on-background);
-  opacity: 0;
-  overflow-y: auto;
-  transform: scale(0.7);
-  transition: var(--op-transition-modal);
-}
-
-.modal--active {
-  display: flex;
-  visibility: visible;
-
-  .modal__content {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .modal__backdrop {
-    opacity: 0.5;
-    visibility: visible;
-  }
-}
-
-.modal__body {
-  overflow-y: auto;
-}
-
-.modal__close {
-  /* stylelint-disable scss/at-extend-no-missing-placeholder */
-  @extend .btn--icon;
-  @extend .btn--no-border;
-
-  color: var(--op-color-neutral-minus-seven);
-  cursor: pointer;
-  /* stylelint-enable scss/at-extend-no-missing-placeholder */
-
-  float: right;
-
-  &:hover:not(:disabled, .btn--disabled) {
-    color: var(--op-color-neutral-minus-seven);
-  }
-}
-
-@mixin modal-dark {
-  .modal__content {
-    background: var(--op-color-neutral-plus-seven);
-    color: var(--op-color-neutral-on-plus-seven);
-  }
-
-  .modal__close {
-    &:hover {
-      background: var(--op-color-background);
-    }
-  }
-}
-
-// Follow system preference unless forced to light
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme-mode='light']) {
-    @include modal-dark;
-  }
-}
-
-// Force design system to dark
-:root[data-theme-mode='dark'] {
-  @include modal-dark;
-}

package/dist/scss/components/flash.scss

@@ -1,58 +0,0 @@
-%flash-global {
-  position: fixed;
-  z-index: var(--op-z-index-alert-group);
-  top: var(--op-space-large);
-  right: var(--op-space-large);
-  display: inline-grid;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  padding: var(--op-space-x-small) var(--op-space-medium);
-  border-color: var(--op-color-on-background);
-  border-radius: var(--op-radius-small);
-  border-left-width: var(--op-border-width-x-large);
-  border-left-style: solid;
-  animation: var(--op-transition-flash);
-  background: var(--op-color-background);
-  box-shadow: var(--op-shadow-x-small);
-  color: var(--op-color-on-background);
-  font-size: var(--op-font-small);
-  gap: var(--op-space-small);
-  grid-auto-flow: column;
-
-  // Modifiers
-  &.flash--notice {
-    border-color: var(--op-color-alerts-notice-base);
-    color: var(--op-color-alerts-notice-base);
-  }
-
-  &.flash--info {
-    border-color: var(--op-color-alerts-info-base);
-    color: var(--op-color-alerts-info-base);
-  }
-
-  &.flash--alert {
-    border-color: var(--op-color-alerts-danger-base);
-    color: var(--op-color-alerts-danger-base);
-  }
-
-  &.flash--warning {
-    border-color: var(--op-color-alerts-warning-base);
-    color: var(--op-color-alerts-warning-base);
-  }
-
-  // Elements
-  .flash__message-type {
-    color: var(--op-color-on-background);
-    font-weight: bold;
-  }
-
-  .flash__message {
-    color: var(--op-color-on-background);
-    font-size: var(--op-font-x-small);
-  }
-}
-
-.flash {
-  @extend %flash-global;
-}