@one-grid-core/angular 0.1.0-beta.5

package/scss/_one-grid.scss

@@ -0,0 +1,999 @@
+// ============================================================================
+// OneGrid Theme
+// ============================================================================
+// Three customization layers (highest priority first):
+//
+//   1. Runtime CSS custom properties — set `--one-grid-<token>` on :root, a
+//      theme class, or a single grid element. Inherits like any CSS variable,
+//      so you can theme globally, per page, or per grid instance:
+//
+//        :root { --one-grid-cell-height: 36px; }
+//        .dark { --one-grid-body-bg: #1e1e1e; }
+//        one-grid.compact { --one-grid-cell-height: 24px; }
+//
+//   2. Compile-time Sass configuration — every `$var` below is `!default`:
+//
+//        @use "one-grid/scss/one-grid" with ($cell-height: 36px);
+//
+//   3. Design-system integration — defaults read Bootstrap CSS variables
+//      (`--bs-*`) when they exist and fall back to neutral built-in values,
+//      so the grid renders correctly with or without Bootstrap.
+// ============================================================================
+
+// Prefix of the host design system's CSS variables (Bootstrap's by default).
+$prefix: 'bs-' !default;
+
+// Prefix of the grid's own public CSS custom properties.
+$og-prefix: 'one-grid-' !default;
+
+// Header
+$header-bg: var(--#{$prefix}tertiary-bg, #f8f9fa) !default;
+$header-cell-seperator-width: 1px !default;
+$header-cell-seperator-height: 100% !default;
+$header-cell-height: 34px !default;
+$header-cell-padding: 0px 8px !default;
+
+// Body
+$body-bg: var(--#{$prefix}card-bg, #fff) !default;
+$border-color: var(--#{$prefix}border-color, #dee2e6) !default;
+$primary-rgb: var(--#{$prefix}primary-rgb, 13, 110, 253) !default;
+$success-rgb: var(--#{$prefix}success-rgb, 25, 135, 84) !default;
+$danger-rgb: var(--#{$prefix}danger-rgb, 220, 53, 69) !default;
+$info-rgb: var(--#{$prefix}info-rgb, 13, 202, 240) !default;
+$hover-color: rgba($primary-rgb, 0.08) !default;
+$selected-color: rgba($primary-rgb, 0.08) !default;
+$text-color: var(--#{$prefix}body-color, #212529) !default;
+$font-size: 12px !default;
+
+// Row
+$row-odd-bg: var(--#{$prefix}card-bg, #fff) !default;
+$row-even-bg: var(--#{$prefix}body-bg, #f8f9fa) !default;
+$row-action-btn-width-height: 20px !default;
+$row-action-btn-border-radius: 4px !default;
+
+// Cell
+$cell-height: 30px !default;
+$cell-line-height: 1.2 !default;
+$cell-item-space: 8px !default;
+$cell-padding: 0px 10px !default;
+$cell-selected-color: rgba($primary-rgb, 0.16) !default;
+$cell-selected-flush-color: rgba($primary-rgb, 0.60) !default;
+$input-bg: var(--#{$prefix}input-bg, #fff) !default;
+
+// Pagination
+$pagination-bg: var(--#{$prefix}card-bg, #fff) !default;
+$pagination-btn-color: var(--#{$prefix}body-color, #212529) !default;
+$pagination-height: 40px !default;
+
+// Colors
+$og-success: var(--#{$prefix}success, #198754) !default;
+$og-primary: var(--#{$prefix}primary, #0d6efd) !default;
+$og-warning: var(--#{$prefix}warning, #ffc107) !default;
+$og-danger: var(--#{$prefix}danger, #dc3545) !default;
+$og-info: var(--#{$prefix}info, #0dcaf0) !default;
+$og-white: var(--#{$prefix}white, #fff) !default;
+// Ink for glyphs sitting on the accent fill. The accent themes flip between
+// light fills (navy ink) and dark fills (white ink), so hard-coded white is
+// unreadable on amber/teal; the theme system publishes the matching ink.
+$og-primary-ink: var(--tl-accent-ink, #fff) !default;
+
+// Elevation & shape
+$border-radius: var(--#{$prefix}one-grid-border-radius, 0) !default;
+$menu-shadow: var(--#{$prefix}box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175)) !default;
+
+// ----------------------------------------------------------------------------
+// Public token registry: custom-property name -> compiled-in default.
+// Every value below is themable at runtime as `--one-grid-<token>`.
+// ----------------------------------------------------------------------------
+$_og-defaults: (
+    // Surfaces & text
+    header-bg: $header-bg,
+    body-bg: $body-bg,
+    row-odd-bg: $row-odd-bg,
+    row-even-bg: $row-even-bg,
+    border-color: $border-color,
+    text-color: $text-color,
+    font-size: $font-size,
+    // States
+    hover-bg: $hover-color,
+    selected-bg: $selected-color,
+    cell-selected-bg: $cell-selected-color,
+    cell-selected-flash-bg: $cell-selected-flush-color,
+    // Density & shape
+    header-cell-height: $header-cell-height,
+    cell-height: $cell-height,
+    cell-line-height: $cell-line-height,
+    cell-item-space: $cell-item-space,
+    cell-padding: $cell-padding,
+    action-btn-size: $row-action-btn-width-height,
+    action-btn-radius: $row-action-btn-border-radius,
+    border-radius: $border-radius,
+    // Editing
+    input-bg: $input-bg,
+    // Pagination
+    pagination-bg: $pagination-bg,
+    pagination-btn-color: $pagination-btn-color,
+    pagination-height: $pagination-height,
+    // Accents
+    primary: $og-primary,
+    success: $og-success,
+    warning: $og-warning,
+    danger: $og-danger,
+    info: $og-info,
+    on-accent: $og-white,
+    primary-ink: $og-primary-ink,
+    // Subtle accent fills
+    primary-subtle-bg: rgba($primary-rgb, 0.08),
+    success-subtle-bg: rgba($success-rgb, 0.1),
+    danger-subtle-bg: rgba($danger-rgb, 0.15),
+    info-subtle-bg: rgba($info-rgb, 0.15),
+    drop-valid-bg: rgba($success-rgb, 0.1),
+    drop-invalid-bg: rgba($danger-rgb, 0.1),
+    // Elevation
+    menu-shadow: $menu-shadow,
+) !default;
+
+// Resolves a token to `var(--one-grid-<token>, <default>)` so consumer-set
+// custom properties win at runtime and the Sass value is the fallback.
+@function og-var($token) {
+    @if not map-has-key($_og-defaults, $token) {
+        @error "Unknown OneGrid theme token: #{$token}";
+    }
+
+    @return var(--#{$og-prefix}#{$token}, #{map-get($_og-defaults, $token)});
+}
+
+// One Grid UI
+.one-grid {
+    height: inherit;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    font-size: og-var(font-size);
+    border: 1px solid og-var(border-color);
+    // Opt-in rounding hook; no theme sets it today, so grids stay square.
+    border-radius: og-var(border-radius);
+
+    // Header, body and pagination stack as flex rows: fixed header, body takes
+    // whatever is left, pagination sits in flow below it. This replaces the old
+    // `calc(100% - 30px)` body height and padding-bottom compensation, which
+    // undercounted the 35px header (34px cells + 1px border) and left the
+    // body's horizontal scrollbar clipped by this element's overflow: hidden.
+    > one-grid-header,
+    > one-grid-pagination {
+        flex: 0 0 auto;
+        display: block;
+    }
+
+    > one-grid-body {
+        flex: 1 1 auto;
+        display: block;
+        min-height: 0;
+    }
+
+    // One Grid Header UI
+    .one-grid-header {
+        overflow: hidden;
+        display: block;
+        position: relative;
+        background-color: og-var(header-bg);
+        border-bottom: 1px solid og-var(border-color);
+
+        .one-group-header-row {
+            position: relative;
+            display: flex;
+            width: max-content;
+            background-color: og-var(header-bg);
+
+            .one-group-header-cell {
+                width: inherit;
+                font-style: italic;
+                font-weight: bold;
+                line-height: og-var(cell-line-height);
+                color: og-var(text-color);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                border-right: 1px solid og-var(border-color);
+                height: og-var(header-cell-height);
+                padding: og-var(cell-padding);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-bottom: 1px solid og-var(border-color);
+            }
+        }
+
+        .one-grid-header-viewport {
+            display: flex;
+            position: relative;
+            z-index: 1;
+            overflow: hidden;
+        }
+
+        // One Grid Header Row UI
+        .one-header-row {
+            position: relative;
+            display: flex;
+            width: inherit;
+            z-index: 10 !important;
+
+            // One Grid Header Column UI
+            .one-grid-header-column {
+                position: relative;
+                width: inherit;
+                min-width: inherit;
+                max-width: inherit;
+                background-color: og-var(header-bg);
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: $header-cell-seperator-width;
+                    height: $header-cell-seperator-height;
+                    background-color: og-var(border-color);
+                }
+
+                .one-grid-header-cell {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    height: og-var(header-cell-height);
+                    padding: og-var(cell-padding);
+                    font-weight: bold;
+                    line-height: og-var(cell-line-height);
+                    color: og-var(text-color);
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    position: relative;
+
+                    .og-resize-handle {
+                        position: absolute;
+                        /* Position at right edge of header cell */
+                        top: 0;
+                        right: 0;
+                        width: 12px;
+                        /* Clickable area width */
+                        height: 100%;
+                        cursor: col-resize;
+                        /* Show resize cursor */
+                        background: transparent;
+                        /* Invisible by default */
+                        transition: background 0.2s;
+                        z-index: 10;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+
+                        i {
+                            opacity: 0;
+                            color: og-var(text-color);
+                        }
+                    }
+
+                    .og-resize-handle:hover {
+
+                        i {
+                            opacity: .6;
+                        }
+                    }
+
+                    .og-resize-handle:active {
+                        font-weight: bold;
+
+                        i {
+                            opacity: 1;
+                        }
+                    }
+
+                    .one-grid-header-cell-group {
+                        display: flex;
+                        align-items: center;
+                    }
+
+                    .one-grid-header-menu-button {
+                        width: og-var(action-btn-size);
+                        height: og-var(action-btn-size);
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 16px;
+
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // One Grid Body UI
+    .one-grid-body {
+        height: 100%;
+        background-color: og-var(body-bg);
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        position: relative;
+
+        .one-grid-body-viewport {
+            width: 100%;
+            height: 100%;
+
+            .one-row-detail-container {
+                width: 100%;
+                height: inherit;
+                padding: calc(#{og-var(cell-height)} / 2);
+                border-radius: og-var(action-btn-radius);
+            }
+
+            &::-webkit-scrollbar-corner {
+                background: og-var(body-bg);
+            }
+        }
+
+        // One Grid Odd & Event Row UI
+        .one-row {
+            display: flex;
+            flex-wrap: nowrap;
+            width: fit-content;
+            height: og-var(cell-height);
+            border-bottom: 1px solid og-var(border-color);
+            font-size: og-var(font-size);
+
+            .one-column {
+                min-width: inherit;
+                max-width: inherit;
+                position: relative;
+                display: flex;
+                margin: 0;
+                padding: 0;
+                height: og-var(cell-height);
+
+                .one-column-object-active {
+                    position: absolute;
+                    top: 2px;
+                    left: 0px;
+                    line-height: .8;
+                    font-size: 8px;
+                    font-weight: 600;
+                    color: og-var(info);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                }
+
+                // Cell Context Option Menu
+                .cell-option-menu {
+                    position: absolute;
+                    min-width: 200px;
+                    padding: 8px;
+                    right: og-var(cell-item-space);
+                    top: calc(#{og-var(cell-height)} + #{og-var(cell-item-space)});
+                    background: og-var(row-odd-bg);
+                    border: 1px solid og-var(border-color);
+                    border-radius: 8px;
+                    box-shadow: og-var(menu-shadow);
+                    z-index: 1000;
+                    transform-origin: top right;
+                    animation: menuOpen 120ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+
+                    &.open-up {
+                        top: auto;
+                        bottom: 100%;
+                    }
+
+                    .cell-option-menu-item {
+                        display: flex;
+                        align-items: center;
+                        padding: 6px 12px;
+                        cursor: pointer;
+                        border-bottom: 1px solid og-var(border-color);
+
+
+                        &:last-child {
+                            border-bottom: none;
+                        }
+                    }
+
+                    .cell-option-menu-item:hover {
+                        background: og-var(row-even-bg);
+                    }
+                }
+
+                // Cell Typeahead Component
+                .one-dropdown-typeahead {
+                    min-width: inherit;
+                    max-width: inherit;
+                    height: og-var(cell-height);
+                    padding: og-var(cell-padding);
+                    display: flex;
+                    align-items: center;
+
+                    .cell-typeahead-object-active {
+                        position: absolute;
+                        top: 2px;
+                        left: 2px;
+                        line-height: .8;
+                        font-size: xx-small;
+                        color: og-var(success);
+                    }
+
+                    .cell-typeahead-warning::after {
+                        content: '';
+                        position: absolute;
+                        top: 2px;
+                        right: 2px;
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 2px;
+                        background-color: og-var(warning);
+                        opacity: .6;
+                    }
+
+                    .cell-typeahead-danger::after {
+                        content: '';
+                        position: absolute;
+                        top: 2px;
+                        right: 2px;
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 2px;
+                        background-color: og-var(danger);
+                        opacity: .6;
+                    }
+
+                    .cell-typeahead-success::after {
+                        content: '';
+                        position: absolute;
+                        top: 2px;
+                        right: 2px;
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 2px;
+                        background-color: og-var(success);
+                        opacity: .6;
+                    }
+
+                    .cell-typeahead-primary::after {
+                        content: '';
+                        position: absolute;
+                        top: 2px;
+                        right: 2px;
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 2px;
+                        background-color: og-var(primary);
+                        opacity: .6;
+                    }
+
+                    .cell-typeahead {
+                        background-color: transparent;
+                        border: none;
+                        width: 100%;
+                        color: og-var(text-color);
+                    }
+
+                    .cell-typeahead-reset {
+                        width: og-var(action-btn-size);
+                        height: og-var(action-btn-size);
+                        // padding-left: og-var(cell-item-space);
+                        padding-right: og-var(cell-item-space);
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 10px;
+                        color: og-var(text-color);
+                    }
+
+                    .cell-typeahead-action {
+                        width: og-var(action-btn-size);
+                        height: og-var(action-btn-size);
+                        font-size: 8;
+                        border-radius: og-var(action-btn-radius);
+                        background-color: transparent;
+                        transition: all .1s ease-out;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: og-var(primary);
+                        border: 1px solid og-var(primary);
+
+                        &:hover {
+                            color: og-var(primary-ink);
+                            background-color: og-var(primary);
+                        }
+                    }
+                }
+
+                .one-cell {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    width: calc(100% - 1px);
+                    height: og-var(cell-height);
+                    padding: og-var(cell-padding);
+
+                    &.align-content-left {
+                        justify-content: start;
+                        text-align: start;
+                    }
+
+                    &.align-content-center {
+                        justify-content: center;
+                        text-align: center;
+                    }
+
+                    &.align-content-right {
+                        justify-content: end;
+                        text-align: end;
+                    }
+
+                    &.one-cell-allowed-edit-active::after {
+                        content: '';
+                        position: absolute;
+                        top: 2px;
+                        right: 2px;
+                        width: 4px;
+                        height: 4px;
+                        border-radius: 2px;
+                        background-color: og-var(success);
+                        opacity: .6;
+                    }
+
+                    .cell-group-renderer {
+                        width: inherit;
+                        display: flex;
+                        justify-content: flex-end;
+                        align-items: center;
+                        height: og-var(cell-height);
+                        margin-right: og-var(cell-item-space);
+
+                        .expansion-icon {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            width: og-var(action-btn-size);
+                            height: og-var(action-btn-size);
+                            border-radius: og-var(action-btn-radius);
+                            transition: transform 0.2s ease-in-out;
+
+                            &:hover {
+                                cursor: pointer;
+                            }
+                        }
+
+                        .expansion-icon {
+                            &.node-expanded {
+                                transform: rotate(90deg);
+                            }
+                        }
+                    }
+
+                    .one-cell-text {
+                        line-height: og-var(cell-line-height);
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        color: og-var(text-color);
+
+                        &.one-cell-placeholder {
+                            opacity: .5 !important;
+                        }
+                    }
+                }
+
+                // One Grid Status UI
+                .one-cell-status {
+                    width: inherit;
+                    min-width: inherit;
+                    max-width: inherit;
+                    height: og-var(cell-height);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding-left: og-var(cell-item-space);
+                    padding-right: og-var(cell-item-space);
+
+                    .one-cell-status-body {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: og-var(action-btn-size);
+                        border-radius: og-var(action-btn-radius);
+                        color: og-var(on-accent);
+                    }
+                }
+
+                .one-column-drag-icon {
+                    width: og-var(action-btn-size);
+                    height: og-var(cell-height);
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: center;
+
+                    &:hover {
+                        cursor: grab;
+                    }
+                }
+
+                &.one-column-border-top {
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        height: 1px;
+                        width: 100%;
+                        background-color: og-var(border-color);
+                    }
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: 1px;
+                    background-color: og-var(border-color);
+                    height: og-var(cell-height);
+                }
+
+                &.one-cell-invalid {
+                    border: 1px solid og-var(danger);
+                }
+
+                // One Grid Cell Edit UI
+                &>.one-cell-input {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: calc(100% - 1px);
+                    height: 100%;
+                    padding: 0px 6px;
+                    background-color: og-var(input-bg);
+                    border: 1px solid og-var(success);
+                    border-radius: og-var(action-btn-radius);
+                    z-index: 5;
+                }
+            }
+
+            &:hover {
+                background-color: og-var(hover-bg) !important;
+            }
+
+            &:nth-child(odd) {
+                background-color: og-var(row-odd-bg);
+            }
+
+            &:nth-child(even) {
+                background-color: og-var(row-even-bg);
+            }
+        }
+
+        .one-row-selected {
+            background-color: og-var(selected-bg) !important;
+        }
+    }
+
+    // One Grid Row Action Button UI
+    .btn-action-container {
+        display: flex;
+        justify-content: start;
+
+        .btn-action {
+            margin: 0;
+            padding: 0;
+            margin-left: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: og-var(action-btn-size);
+            height: og-var(action-btn-size);
+            font-size: 8;
+            border-radius: og-var(action-btn-radius);
+            background-color: transparent;
+            transition: all .1s ease-out;
+
+            &:first-child {
+                margin-left: 0 !important;
+            }
+
+            &.btn-action-primary {
+                color: og-var(primary);
+                border: 1px solid og-var(primary);
+
+                &:hover {
+                    color: og-var(primary-ink);
+                    background-color: og-var(primary);
+                }
+            }
+
+            &.btn-action-success {
+                color: og-var(success);
+                border: 1px solid og-var(success);
+
+                &:hover {
+                    color: og-var(on-accent);
+                    background-color: og-var(success);
+                }
+            }
+
+            &.btn-action-warning {
+                color: og-var(warning);
+                border: 1px solid og-var(warning);
+
+                &:hover {
+                    color: og-var(on-accent);
+                    background-color: og-var(warning);
+                }
+            }
+
+            &.btn-action-danger {
+                color: og-var(danger);
+                border: 1px solid og-var(danger);
+
+                &:hover {
+                    color: og-var(on-accent);
+                    background-color: og-var(danger);
+                }
+            }
+        }
+    }
+
+    // One Grid Pagination UI
+    .one-grid-pagination {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height: og-var(pagination-height);
+        padding: 0 8px;
+        border-top: 1px solid og-var(border-color);
+        background-color: og-var(pagination-bg);
+
+        // One Grid Pagination Row UI
+        .one-pagination-row {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            height: 100%;
+
+            .one-pagination-columns-group {
+                display: flex;
+                align-items: center;
+                margin-left: 16px;
+
+                .one-pagination-column {
+                    display: flex;
+                    align-items: center;
+
+                    .one-pagination-btn {
+                        cursor: pointer;
+                        width: og-var(action-btn-size);
+                        height: og-var(action-btn-size);
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        font-weight: bold;
+                        border: none;
+                        color: og-var(pagination-btn-color);
+                        background-color: transparent;
+                        font-size: .8rem;
+                    }
+
+                    & select {
+                        color: og-var(text-color);
+                        width: fit-content;
+                        padding: 2px 4px;
+                        background-color: transparent;
+                        border-radius: og-var(action-btn-radius);
+                        border-color: og-var(border-color);
+                        background-color: og-var(pagination-bg);
+                    }
+                }
+            }
+        }
+    }
+
+    .editable-active::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 4px;
+        height: 4px;
+        border-radius: 2px;
+        background-color: og-var(success);
+        opacity: .6;
+    }
+
+    // One Grid Checkbox UI
+    .one-grid-checkbox {
+        margin: 0;
+        padding: 0;
+        height: inherit;
+        display: flex;
+        justify-content: center;
+        padding-right: 4px;
+
+        input[type='checkbox'] {
+            cursor: pointer;
+            position: relative;
+            appearance: none;
+            width: og-var(action-btn-size);
+            height: og-var(action-btn-size);
+            border: 2px solid og-var(border-color);
+            border-radius: og-var(action-btn-radius);
+            font-size: 10px;
+            opacity: 1;
+            background-color: og-var(body-bg);
+
+            &:indeterminate {
+                background-color: og-var(row-even-bg);
+                border-color: og-var(border-color);
+
+                &:indeterminate::after {
+                    content: '–';
+                    color: og-var(border-color);
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    font-size: medium;
+                    font-weight: bold;
+                }
+            }
+
+            &:checked {
+                background-color: og-var(primary);
+                border-color: og-var(primary);
+
+                &:checked::after {
+                    content: "";
+                    width: 6px;
+                    height: 11px;
+                    border-right: 2px solid og-var(primary-ink);
+                    border-bottom: 2px solid og-var(primary-ink);
+                    position: absolute;
+                    top: 40%;
+                    left: 50%;
+                    transform: translate(-50%, -50%) rotate(45deg);
+                    display: inline-block;
+                }
+            }
+        }
+    }
+
+    // Drag & Drop Feature
+    .one-row-dragging {
+        opacity: 0.6;
+        /* fade */
+        border: 1px dashed og-var(primary);
+        border-radius: og-var(action-btn-radius);
+        cursor: grabbing;
+    }
+
+    .drop-valid {
+        border: 2px solid og-var(success);
+        background-color: og-var(drop-valid-bg);
+    }
+
+    .drop-invalid {
+        border: 2px solid og-var(danger);
+        background-color: og-var(drop-invalid-bg);
+    }
+
+    // Utilities Class
+    .hidden {
+        display: none;
+    }
+
+    .disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: .5 !important;
+    }
+
+    .one-warning-bg {
+        background-color: og-var(warning);
+    }
+
+    .one-success-bg {
+        background-color: og-var(success);
+    }
+
+    .one-cell-margin-left {
+        margin-left: og-var(cell-item-space);
+    }
+
+    .one-cell-margin-right {
+        margin-right: og-var(cell-item-space);
+    }
+
+    .one-cell-selected {
+        background-color: og-var(cell-selected-bg);
+    }
+
+    .one-cell-invalid {
+        border: 1px solid og-var(danger) !important;
+    }
+
+    // Flush Animation For Copy Event Feedback
+    .one-cell-copied {
+        animation: flashCopied .8s ease-in-out;
+    }
+
+    // "red"/"blue" are legacy class names; the colors are the system danger
+    // and info tokens so they track the palette and both modes.
+    .bg-red-light {
+        background-color: og-var(danger-subtle-bg);
+    }
+
+    .bg-blue-light {
+        background-color: og-var(info-subtle-bg);
+    }
+
+    .og-text-red {
+
+        .one-cell-text {
+            color: og-var(danger) !important;
+        }
+    }
+
+    .og-text-blue {
+
+        .one-cell-text {
+            color: og-var(info) !important;
+        }
+    }
+
+    @keyframes flashCopied {
+
+        0% {
+            background-color: og-var(cell-selected-flash-bg);
+        }
+
+        100% {
+            background-color: og-var(cell-selected-bg);
+        }
+    }
+
+    // Placeholder Disply Empty Rows Data Message
+    .one-grid-empty-message {
+        z-index: 10;
+        line-height: og-var(cell-line-height);
+        font-size: .6rem;
+        opacity: 0;
+        animation: fadeIn .4s ease forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes menuOpen {
+        from {
+            opacity: 0;
+            transform: scale(0.94) translateY(-4px);
+        }
+
+        to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+        }
+    }
+}