[CCC-47] Tokens (#263)

This PR Convert most files to css. It refactors the addons to use pure css. It also converts the base tokens and light mode tokens to not use mixins. Additionally, the dark mode tokens were removed in favor of use the `light-dark()` function for better control

src/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);
+    }
+  }
+}

src/addons/tom-select.scss → src/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;

src/components/icon.scss → src/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,[email protected],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);
 

src/core/base.scss → src/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 {