purity-world-ui 1.0.1

package/styles/_base.scss

@@ -0,0 +1,525 @@
+/* ==========================================================================
+   Purity Design System - Base Styles & UI Elements
+   ========================================================================== */
+
+/* 1. Tell the browser where the font file is */
+@font-face {
+    font-family: 'Adwaita Mono';
+    src: url('../app/assets/mono/AdwaitaMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Global Cursor Hierarchy (Breeze Cursors) */
+*,
+*::before,
+*::after {
+    cursor: inherit;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+    background-color: var(--wallpaper-bg-color, #1e1e1e);
+    transition: background-color var(--transition-normal) ease;
+    cursor: var(--cursor-default);
+}
+
+body {
+    position: relative;
+    margin: 0;
+    padding: 7px;
+    box-sizing: border-box;
+    min-height: 100vh;
+    background: var(--wallpaper);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: var(--wallpaper-bg-color, #1e1e1e);
+    color: var(--text-main);
+    font-family: var(--font-main);
+    transition: background-color var(--transition-normal) ease, color var(--transition-normal) ease;
+    cursor: var(--cursor-default);
+}
+
+/* Global Interactive Element Breeze Cursors */
+a,
+button,
+[role='button'],
+input[type='button'],
+input[type='submit'],
+input[type='reset'],
+select,
+summary,
+label[for],
+.clickable,
+.button-base,
+.button-primary,
+.button-secondary,
+.button-error,
+.button-danger,
+.button-cancel,
+.editor-tab,
+.action-btn,
+.theme-toggle-btn,
+.toast-close-btn,
+.delete-btn {
+    cursor: var(--cursor-pointer);
+}
+
+input[type='text'],
+input[type='number'],
+input[type='password'],
+input[type='email'],
+input[type='search'],
+input[type='url'],
+input[type='tel'],
+textarea,
+.input-primary,
+[contenteditable='true'],
+code,
+pre {
+    cursor: var(--cursor-text);
+}
+
+:disabled,
+[disabled],
+.disabled,
+[aria-disabled='true'] {
+    cursor: var(--cursor-not-allowed) !important;
+}
+
+[draggable='true'],
+.draggable,
+.draggable-target,
+.drag-handle {
+    cursor: var(--cursor-grab);
+}
+
+.is-dragging,
+.dragging,
+.p-dragging {
+    cursor: var(--cursor-grabbing) !important;
+}
+
+/* HTTP Request & Loading State Breeze Cursors */
+html.http-loading,
+body.http-loading,
+.http-loading,
+.is-loading,
+[data-loading='true'],
+.loading,
+.loader-inline-root.visible {
+    cursor: var(--cursor-progress) !important;
+
+    * {
+        cursor: var(--cursor-progress) !important;
+    }
+}
+
+/* Base Label Styling */
+.label-base {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 12px;
+    border-radius: var(--radius-pill);
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1.4;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.2) 0%,
+        rgba(255, 255, 255, 0.05) 50%,
+        transparent 100%
+    );
+    border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+/* Status Labels */
+.success {
+    @extend .label-base;
+    background-color: var(--gnome-success);
+    color: #ffffff;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(46, 194, 126, 0.3);
+}
+
+.error {
+    @extend .label-base;
+    color: #ffffff;
+    background-color: var(--gnome-error);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(237, 51, 59, 0.3);
+}
+
+.info {
+    @extend .label-base;
+    color: #ffffff;
+    background-color: var(--gnome-info);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(53, 132, 228, 0.3);
+}
+
+.warn {
+    @extend .label-base;
+    color: rgba(0, 0, 0, 0.85);
+    background-color: var(--gnome-warn);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(248, 228, 92, 0.3);
+}
+
+.window-base {
+    margin: var(--spacing-lg);
+}
+
+/* Glassmorphic Window Container */
+.window {
+    @extend .window-base;
+
+    background: var(--gnome-surface);
+    -webkit-backdrop-filter: var(--blur-effect);
+    backdrop-filter: var(--blur-effect);
+
+    border: 1px solid var(--gnome-border);
+    border-radius: var(--radius-window);
+    box-shadow: var(--shadow-deep);
+
+    overflow: hidden;
+    color: var(--text-main);
+    font-family: var(--font-main);
+
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    transition: background-color var(--transition-normal) ease, border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
+}
+
+.button-base {
+    margin: var(--spacing-sm);
+}
+
+/* Primary Elevated Button */
+.button-primary {
+    @extend .button-base;
+    background-color: var(--accent);
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15),
+        transparent
+    );
+    color: #ffffff;
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    padding: 10px 20px;
+    border-radius: var(--radius-control);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-control);
+    cursor: var(--cursor-pointer);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    outline: none;
+
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: var(--accent-hover);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 14px var(--accent-shadow), inset 0 1px rgba(255, 255, 255, 0.25);
+    }
+
+    &:active:not(:disabled):not(.disabled) {
+        background-color: var(--accent-active);
+        transform: translateY(0);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+        border-color: var(--accent);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Secondary Translucent Button */
+.button-secondary {
+    @extend .button-base;
+    background-color: var(--gnome-card);
+    -webkit-backdrop-filter: var(--blur-subtle);
+    backdrop-filter: var(--blur-subtle);
+    border: 1px solid var(--gnome-border);
+    color: var(--text-main);
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    padding: 10px 20px;
+    border-radius: var(--radius-control);
+    cursor: var(--cursor-pointer);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    outline: none;
+
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: var(--gnome-hover);
+        border-color: var(--gnome-border-focus);
+        transform: translateY(-1px);
+    }
+
+    &:active:not(:disabled):not(.disabled) {
+        background-color: var(--gnome-active);
+        transform: translateY(0);
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+        border-color: var(--accent);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+/* Error / Cancel / Destructive Button */
+.button-error,
+.button-danger,
+.button-cancel {
+    @extend .button-base;
+    background-color: var(--gnome-error);
+    background-image: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15),
+        transparent
+    );
+    color: #ffffff;
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+    padding: 10px 20px;
+    border-radius: var(--radius-control);
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(237, 51, 59, 0.35);
+    cursor: var(--cursor-pointer);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    outline: none;
+
+    &:hover:not(:disabled):not(.disabled) {
+        background-color: #e01b24;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 14px rgba(237, 51, 59, 0.4), inset 0 1px rgba(255, 255, 255, 0.4);
+    }
+
+    &:active:not(:disabled):not(.disabled) {
+        background-color: #c01c28;
+        transform: translateY(0);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px rgba(237, 51, 59, 0.4);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.base-input {
+    margin: var(--spacing-sm);
+}
+
+/* Translucent Glass Input */
+.input-primary {
+    @extend .base-input;
+
+    background-color: var(--gnome-input);
+    -webkit-backdrop-filter: var(--blur-subtle);
+    backdrop-filter: var(--blur-subtle);
+
+    border: 1px solid var(--gnome-border);
+    border-radius: var(--radius-control);
+    color: var(--text-main);
+    padding: 10px 16px;
+    font-family: var(--font-main);
+    font-size: var(--font-size-sm);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    transition: all var(--transition-fast) ease;
+    outline: none;
+
+    &::placeholder {
+        color: var(--text-secondary);
+        opacity: 0.65;
+    }
+
+    &:hover {
+        background-color: var(--gnome-input-hover);
+        border-color: var(--gnome-border);
+    }
+
+    &:focus {
+        background-color: var(--gnome-input-focus);
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+    }
+}
+
+/* Translucent Glass Select / Dropdown Control */
+select,
+.select-primary {
+    @extend .base-input;
+
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--gnome-input);
+    -webkit-backdrop-filter: var(--blur-subtle);
+    backdrop-filter: var(--blur-subtle);
+
+    border: 1px solid var(--gnome-border);
+    border-radius: var(--radius-control);
+    color: var(--text-main);
+    padding: 10px 38px 10px 14px;
+    font-family: var(--font-main);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), var(--shadow-control);
+    transition: all var(--transition-fast) var(--ease-gnome);
+    cursor: var(--cursor-pointer);
+    outline: none;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: var(--select-chevron-icon);
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 14px;
+
+    &:hover:not(:disabled) {
+        background-color: var(--gnome-input-hover);
+        border-color: var(--gnome-border-focus);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        background-color: var(--gnome-input-focus);
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px var(--accent-shadow);
+        transform: translateY(0);
+    }
+
+    &:active:not(:disabled) {
+        background-color: var(--gnome-active);
+        transform: translateY(0);
+    }
+
+    &:disabled,
+    &.disabled {
+        opacity: 0.45;
+        cursor: var(--cursor-not-allowed) !important;
+        pointer-events: none;
+        transform: none !important;
+        box-shadow: none !important;
+    }
+
+    option,
+    optgroup {
+        background-color: var(--gnome-surface-solid, #242424);
+        color: var(--text-main, #ffffff);
+        font-family: var(--font-main);
+        font-size: var(--font-size-sm);
+        padding: 8px 12px;
+    }
+}
+
+/* Select Container Helper */
+.select-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+}
+
+.input-primary.error,
+.input-primary.is-invalid,
+select.error,
+select.is-invalid,
+.select-primary.error,
+.select-primary.is-invalid,
+.is-invalid {
+    border-color: var(--gnome-error) !important;
+    box-shadow: 0 0 0 3px var(--gnome-error-bg) !important;
+}
+
+.input-primary.is-valid,
+select.is-valid,
+.select-primary.is-valid,
+.is-valid {
+    border-color: var(--gnome-success) !important;
+    box-shadow: 0 0 0 3px var(--gnome-success-bg) !important;
+}
+
+/* Light Theme Option Dropdown Styling */
+[data-theme='light'] {
+    select option,
+    select optgroup,
+    .select-primary option,
+    .select-primary optgroup {
+        background-color: #ffffff;
+        color: #1c1c1c;
+    }
+}
+
+/* Typography & Layout Helpers */
+.mono-text {
+    font-family: var(--font-mono);
+    font-weight: 400;
+    font-size: 1.05rem;
+    color: var(--accent);
+}
+
+.flex-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-vertical > * {
+    margin: var(--spacing-sm);
+}
+
+.flex-horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-horizontal > * {
+    margin: var(--spacing-sm);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: var(--spacing-md) var(--spacing-xl);
+    color: var(--text-main);
+}

package/styles/_mixins.scss

@@ -0,0 +1,57 @@
+/* ==========================================================================
+   Purity Design System - Reusable Mixins
+   ========================================================================== */
+
+@mixin glass-surface($bg: var(--gnome-surface), $blur: var(--blur-effect), $border: var(--gnome-border)) {
+    background: $bg;
+    -webkit-backdrop-filter: $blur;
+    backdrop-filter: $blur;
+    border: 1px solid $border;
+}
+
+@mixin flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+@mixin focus-ring($color: var(--accent), $spread: 3px) {
+    outline: none;
+    &:focus-visible {
+        box-shadow: 0 0 0 $spread rgba(53, 132, 228, 0.45);
+        border-color: $color;
+    }
+}
+
+@mixin button-hover-lift {
+    transition: all var(--transition-fast) var(--ease-gnome);
+    &:hover:not(:disabled):not(.disabled) {
+        transform: translateY(-1px);
+    }
+    &:active:not(:disabled):not(.disabled) {
+        transform: translateY(0);
+    }
+}
+
+@mixin custom-scrollbar($width: 6px) {
+    &::-webkit-scrollbar {
+        width: $width;
+        height: $width;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: var(--gnome-border);
+        border-radius: 999px;
+        &:hover {
+            background: var(--text-secondary);
+        }
+    }
+}

package/styles/_theme-dark.scss

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   Purity Design System - Dark Theme (GNOME Adwaita Dark)
+   ========================================================================== */
+
+@mixin theme-dark-variables {
+    /* Surfaces & Glassmorphism */
+    --gnome-bg: #1e1e1e;
+    --gnome-surface: rgba(34, 34, 40, 0.72);
+    --gnome-surface-solid: #242424;
+    --gnome-header: rgba(30, 30, 36, 0.88);
+    --gnome-card: rgba(255, 255, 255, 0.06);
+    --gnome-hover: rgba(255, 255, 255, 0.12);
+    --gnome-active: rgba(255, 255, 255, 0.18);
+    --gnome-subtle: rgba(255, 255, 255, 0.03);
+
+    /* Form Inputs & Controls */
+    --gnome-input: rgba(255, 255, 255, 0.08);
+    --gnome-input-hover: rgba(255, 255, 255, 0.14);
+    --gnome-input-focus: rgba(255, 255, 255, 0.16);
+    --select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233584e4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* Borders & Lines */
+    --gnome-border: rgba(255, 255, 255, 0.14);
+    --gnome-border-subtle: rgba(255, 255, 255, 0.08);
+    --gnome-border-focus: rgba(53, 132, 228, 0.6);
+
+    /* Typography & Text */
+    --text-main: #ffffff;
+    --text-secondary: #9a9996;
+    --text-muted: #777777;
+    --text-off: rgba(255, 255, 255, 0.25);
+    --text-inverse: #1e1e1e;
+
+    /* Primary Accent - Adwaita Blue */
+    --accent: #3584e4;
+    --accent-hover: #4791eb;
+    --accent-active: #1c71d8;
+    --accent-shadow: rgba(53, 132, 228, 0.35);
+    --accent-subtle: rgba(53, 132, 228, 0.15);
+
+    /* Semantic Status Colors */
+    --gnome-success: #2ec27e;
+    --gnome-error: #ed333b;
+    --gnome-info: #3584e4;
+    --gnome-warn: #f8e45c;
+    --gnome-success-bg: rgba(46, 194, 126, 0.18);
+    --gnome-error-bg: rgba(237, 51, 59, 0.18);
+    --gnome-info-bg: rgba(53, 132, 228, 0.18);
+    --gnome-warn-bg: rgba(248, 228, 92, 0.18);
+
+    /* Shadows */
+    --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.55);
+    --shadow-popup: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px rgba(255, 255, 255, 0.1);
+    --shadow-control: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.08);
+
+    /* Global Dynamic Wallpaper */
+    --wallpaper: radial-gradient(circle at top left, rgba(53, 132, 228, 0.45), transparent 45%),
+                 radial-gradient(circle at bottom right, rgba(145, 65, 172, 0.45), transparent 45%),
+                 #1e1e1e;
+    --wallpaper-bg-color: #1e1e1e;
+
+    /* DatePicker Specific Tokens */
+    --dp-surface-bg: rgba(30, 30, 34, 0.88);
+    --dp-surface-blur-bg: rgba(28, 28, 34, 0.65);
+    --dp-text-main: var(--text-main);
+    --dp-text-secondary: var(--text-secondary);
+    --dp-border: var(--gnome-border);
+    --dp-shadow: var(--shadow-popup);
+
+    /* Dropdown Specific Tokens */
+    --dropdown-bg: rgba(30, 30, 34, 0.96);
+    --dropdown-blur-bg: rgba(28, 28, 34, 0.90);
+    --dropdown-border: var(--gnome-border);
+    --dropdown-shadow: var(--shadow-popup);
+
+    /* Popover Specific Tokens */
+    --popover-bg: rgba(30, 30, 36, 0.92);
+    --popover-blur-bg: rgba(28, 28, 34, 0.85);
+    --popover-border: rgba(255, 255, 255, 0.16);
+    --popover-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+
+    /* Radial Context Menu Specific Tokens */
+    --radial-bg: rgba(30, 30, 30, 0.92);
+    --radial-blur-bg: rgba(30, 30, 30, 0.75);
+    --radial-segment-bg: rgba(45, 45, 45, 0.7);
+    --radial-text: #ffffff;
+    --radial-border: rgba(255, 255, 255, 0.12);
+
+    /* Code & Syntax Highlighting Tokens */
+    --code-bg: rgba(14, 18, 26, 0.85);
+    --code-border: rgba(255, 255, 255, 0.1);
+    --code-text: #e6edf3;
+    --code-kw: #ff7b72;
+    --code-dec: #d2a8ff;
+    --code-fn: #79c0ff;
+    --code-typ: #ffa657;
+    --code-str: #a5d6ff;
+    --code-num: #79c0ff;
+    --code-cmt: #8b949e;
+    --code-tag: #7ee787;
+    --code-attr: #79c0ff;
+    --code-expr: #ffa657;
+}