@rolemodel/optics 1.12.0 → 2.0.0

package/.github/workflows/linting.yml

@@ -30,8 +30,6 @@ jobs:
         run: yarn prettier-check
       - name: Build CSS
         run: yarn build:css
-      - name: Build SCSS
-        run: yarn build:scss
       - name: Build Tokens
         run: yarn build:tokens
       - name: Build Storybook

package/.stylelintrc.json

@@ -1,15 +1,15 @@
 {
-  "extends": ["stylelint-config-standard-scss", "stylelint-config-idiomatic-order", "stylelint-config-prettier-scss"],
-  "plugins": ["stylelint-scss", "stylelint-prettier"],
-  "overrides": [
-    {
-      "files": ["**/*.scss"],
-      "customSyntax": "postcss-scss"
-    }
-  ],
+  "extends": ["stylelint-config-idiomatic-order"],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [],
   "rules": {
     "prettier/prettier": true,
-    "custom-property-pattern": ["(?<=op-)", { "message": "CSS variables should be prefixed with op-" }],
+    "custom-property-pattern": [
+      "(?<=op-)",
+      {
+        "message": "CSS variables should be prefixed with op-"
+      }
+    ],
     "selector-class-pattern": null
   }
 }

package/NEW_COMPONENT.md

@@ -2,54 +2,44 @@
 
 To create a new CSS component, follow these steps:
 
-1. Start by defining a Sass `%{component-name}-global` placeholder for the component. This placeholder will serve as the base style for the component and all its variants.
-2. Extend the default class and all variants of the component with the global placeholder you defined in the previous step. This ensures that the base style is applied consistently across all variations.
-3. When creating variants of the component, use the following syntax: `.{component-name}-{variant}`. Variants are top-level components that have distinct styles or functionalities.
-4. For stylistic tweaks that apply to all variants, use modifiers following the BEM (Block, Element, Modifier) syntax. The modifier class should be in the format: `.{component-name}--{modifier}`.
-
-<!-- TODO: This distintion should exist in the main docs as well, not just in the dev instructions. Understanding how to consume components in your app and know the distinctions here is a good idea. -->
-
-## Variant vs. Modifier
-
-A variant is a top-level component that has distinct styles or functionalities. For example, a button component can have a primary variant that has a different color and hover state than the default button. A modifier is a class that modifies the style of a component. For example, a button component can have a disabled modifier that changes the color and cursor of the button. Modifiers apply to all Variants.
+1. Start by defining a css `.{component-name}` selector for the component. This will serve as the base style for the component and all its variants.
+2. Create modifiers for any all variants of the component you defined in the previous step. This ensures that the base style is shared consistently across all variations.
+3. When creating variants of the component, use the following syntax: `.{component-name}--{variant}`. It can be helpful to nest these under the main class with a `&.{component-name}--{variant}` to ensure they only work with that component.
+4. For stylistic tweaks that apply to all variants, use modifiers following the BEM (Block, Element, Modifier) syntax. The modifier class should be in the format: `.{component-name}--{modifier}` just like the other variants.
 
 To illustrate these concepts, let's consider an example of a button. You can use the following template as a guide:
 
-```scss
-// Define the global placeholder for the button component
-%button-global {
-  // Base styles for the button
+```css
+/* Define the main component */
+.btn {
+  /* Base styles for the button */
 
-  // Hover state
+  /* Hover state */
   &:hover {
-    // Styles for the hovered button modifier
-    // ...
+    /*
+      Styles for the hovered button modifier
+      ...
+    */
   }
 
-  // Modifier: Large button
+  /* Modifier: Large button */
   &.btn--large {
-    // Styles for the large button modifier
+    /* Styles for the large button modifier */
   }
 
-  // Modifier: Disabled button
+  /* Modifier: Disabled button */
   &.btn--disabled,
   &:disabled {
-    // Styles for the disabled button modifier
+    /* Styles for the disabled button modifier */
   }
 }
 
-// Default button class extending the global styles
-.btn {
-  @extend %button-global;
-  // Specific styles for the default button variant
-  // ...
-}
-
-// Variant: Primary button
-.btn-primary {
-  @extend %button-global;
-  // Specific styles for the primary button variant
-  // ...
+/* Variant: Primary button */
+.btn.btn--primary {
+  /*
+    Specific styles for the primary button variant
+    ...
+  */
 }
 ```
 

package/README.md

@@ -12,7 +12,7 @@
 
 </div>
 
-Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.
+Optics is an css package that provides base styles and components that can be integrated and customized in a variety of projects.
 
 ## Installation
 
@@ -30,16 +30,14 @@ yarn add @rolemodel/optics
 
 ### Import
 
-If you are using webpack to compile, you can add this import to the top of your root level `scss` file.
+You can add this import to the top of your root level `css` file.
 
-```scss
-@import '@rolemodel/optics';
-```
-
-If you are using a different compiler such as Dart Sass, you may need to reference the scss file directly.
-
-```scss
-@import '@rolemodel/optics/dist/scss/optics';
+```css
+@import '@rolemodel/optics'; /* Using webpack to compile */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics'; /* Using a different compiler or no compiler */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */
 ```
 
 ## Documentation
@@ -65,7 +63,7 @@ Add the following above a group to categorize the tokens.
 
 ### Component Documentation
 
-For instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.MD)
+For instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.md)
 
 Additional stories can be added using the following command, or copying an existing story.
 

package/build_token_json.js

@@ -128,12 +128,7 @@ try {
   fs.readdir(source, { withFileTypes: true }, (_errors, files) => {
     let variables = {}
     files
-      .filter(
-        (directoryEntry) =>
-          directoryEntry.isFile() &&
-          directoryEntry.name !== 'dark_mode_tokens.scss' &&
-          directoryEntry.name !== 'index.scss'
-      )
+      .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.css')
       .forEach((directoryEntry) => {
         const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`)
         const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm)

package/dist/css/addons/panel.css

@@ -0,0 +1,65 @@
+.panel {
+  --op-panel-width: 40%;
+
+  position: absolute;
+  z-index: var(--op-z-index-sidebar);
+  width: var(--op-panel-width);
+  height: 100vh;
+  background-color: var(--op-color-background);
+  color: var(--op-color-on-background);
+  inset-inline-end: calc(-1 * var(--op-panel-width)); /* this pushes the panel off the screen to the right */
+  overflow-y: scroll;
+  padding-block-end: var(--op-space-large);
+  transition: var(--op-transition-panel);
+}
+
+.panel--active {
+  box-shadow: var(--op-shadow-x-large);
+  inset-inline-end: 0;
+}
+
+.panel__close {
+  display: flex;
+  padding: var(--op-space-medium);
+  border-radius: 100%;
+  cursor: pointer;
+  float: right;
+
+  &:hover {
+    background-color: var(--op-color-neutral-plus-seven);
+  }
+}
+
+#panel-content {
+  padding-block: var(--op-space-large);
+}
+
+/* Follow system preference unless forced to light */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme-mode='light']) {
+    .panel {
+      background-color: var(--op-color-neutral-plus-seven);
+      color: var(--op-color-neutral-on-plus-seven);
+    }
+
+    .panel__close {
+      &:hover {
+        background-color: var(--op-color-background);
+      }
+    }
+  }
+}
+
+/* Force design system to dark */
+:root[data-theme-mode='dark'] {
+  .panel {
+    background-color: var(--op-color-neutral-plus-seven);
+    color: var(--op-color-neutral-on-plus-seven);
+  }
+
+  .panel__close {
+    &:hover {
+      background-color: var(--op-color-background);
+    }
+  }
+}

package/dist/{scss/addons/tom-select.scss → css/addons/tom-select.css}

@@ -1,9 +1,7 @@
-// By default $select-ns is "ts"
-
-// Design System Overrides
-.#{$select-ns}-wrapper {
-  // Control
-  .#{$select-ns}-control {
+/* Design System Overrides */
+.ts-wrapper {
+  /* Control */
+  .ts-control {
     min-height: var(--op-input-height-large);
     align-items: center;
     border: none;
@@ -16,16 +14,16 @@
     line-height: var(--op-line-height-base);
   }
 
-  // Active control
+  /* Active control */
   &.dropdown-active {
-    .#{$select-ns}-control {
+    .ts-control {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
 
-  // Dropdown
-  .#{$select-ns}-dropdown {
+  /* Dropdown */
+  .ts-dropdown {
     border: none;
     margin: 0;
     border-bottom-left-radius: var(--op-radius-large);
@@ -42,9 +40,9 @@
     }
   }
 
-  // Item
+  /* Item */
   &.multi {
-    .#{$select-ns}-control > div {
+    .ts-control > div {
       padding: var(--op-space-3x-small) var(--op-space-x-small);
       border-radius: var(--op-radius-medium);
       margin: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
@@ -58,13 +56,13 @@
     }
   }
 
-  // Dropdown Arrow
+  /* Dropdown Arrow */
   &.single,
   &.multi,
   &.single.input-active,
   &.multi.input-active {
-    .#{$select-ns}-control {
-      // Highly specific SVG data image for the dropdown arrow.
+    .ts-control {
+      /* Highly specific SVG data image for the dropdown arrow. */
       background-image: var(--op-encoded-images-dropdown-arrow);
       background-position-x: calc(100% - var(--op-space-small));
       background-position-y: center;

package/dist/{scss → css}/components/form.css

@@ -251,7 +251,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   gap: var(--op-space-x-small);
   grid-auto-rows: auto;
   grid-template-columns: auto 1fr;
-  padding-block: var(--op-space-small) 0;
+  padding-block: var(--op-space-small);
   padding-inline: 0;
 
   /* Group Alignment */

package/dist/{scss/components/icon.scss → css/components/icon.css}

@@ -1,7 +1,9 @@
-// Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
-// Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
-// from Googles CDN like we do for our other fonts
-// https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
+/*
+  Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
+  Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
+  from Googles CDN like we do for our other fonts
+  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
+*/
 
 @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
 
@@ -22,7 +24,7 @@
   vertical-align: middle;
 }
 
-// Fill
+/* Fill */
 .icon--outlined {
   --op-mso-fill: 0;
 }
@@ -31,7 +33,7 @@
   --op-mso-fill: 1;
 }
 
-// Weight
+/* Weight */
 .icon--weight-light {
   --op-mso-weight: var(--op-font-weight-light);
 }
@@ -48,7 +50,7 @@
   --op-mso-weight: var(--op-font-weight-bold);
 }
 
-// Emphasis
+/* Emphasis */
 .icon--low-emphasis {
   --op-mso-grade: -20;
 }
@@ -61,7 +63,7 @@
   --op-mso-grade: 200;
 }
 
-// Size
+/* Size */
 .icon--medium {
   font-size: var(--op-font-medium);
 

package/dist/{scss → css}/components/sidebar.css

@@ -131,7 +131,7 @@
   }
 
   /* Primary */
-  .sidebar--primary {
+  &.sidebar--primary {
     --_op-sidebar-background-color: var(--op-color-primary-plus-six);
     --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
     --_op-sidebar-border-color: var(--op-color-primary-plus-four);

package/dist/{scss/core/base.scss → css/core/base.css}

@@ -1,9 +1,9 @@
-// After a reset, introduce base element styles specific to this system
+/* After a reset, introduce base element styles specific to this system */
 
 html {
-  overflow: hidden; // Needed to prevent flash messages and panels from causing overflow
+  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
   font-family: var(--op-font-family);
-  font-size: 62.5%; // 1rem = 10px
+  font-size: 62.5%; /* 1rem = 10px */
 }
 
 body {