diff --git a/Directory.Packages.props b/Directory.Packages.props index 44071838..cefae282 100644 --- a/Directory.Packages.props +++ b/Directory.Packages.props @@ -15,7 +15,7 @@ - + diff --git a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/build/AXSharp.Presentation.Blazor.Controls.targets b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/build/AXSharp.Presentation.Blazor.Controls.targets deleted file mode 100644 index a777b341..00000000 --- a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/build/AXSharp.Presentation.Blazor.Controls.targets +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package-lock.json b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package-lock.json index eaf7cbe6..848d958b 100644 --- a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package-lock.json +++ b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package-lock.json @@ -1058,4 +1058,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package.json b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package.json index 5fd6c341..b2d2af34 100644 --- a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package.json +++ b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/package.json @@ -3,4 +3,4 @@ "@tailwindcss/cli": "^4.1.18", "tailwindcss": "^4.1.18" } -} +} \ No newline at end of file diff --git a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/momentum.css b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/momentum.css index a22c417c..1940421b 100644 --- a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/momentum.css +++ b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/momentum.css @@ -1,8 +1,199 @@ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ @layer properties; +@layer theme, base, components, utilities; @layer theme { :root, :host { + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; --spacing: 0.25rem; + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2 / 1.5); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2 / 1.5); + --text-5xl: 3rem; + --text-5xl--line-height: calc(2 / 1.5); + --font-weight-normal: 400; + --font-weight-bold: 700; + --radius-md: 0.375rem; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + --radius-full: calc(infinity * 1px); + --radius-small: 1rem; + --radius-extra-small: var(--radius-md); + --color-text: #0B0C0C; + --color-text-light: #626A6E; + --color-link: #0065B3; + --color-link-hover: #003078; + --color-primary: #0a319e; + --color-primary-light: #E0E8FF; + --color-success: #00703C; + --color-success-light: #D4F7D4; + --color-warning: #EC9811; + --color-warning-light: #FFEAC9; + --color-danger: #D0190F; + --color-danger-light: #FFDCDA; + --color-info: #2B8CC4; + --color-info-light: #D4ECF7; + --color-noactive: #7C7C7C; + --color-noactive-light: #DEE0E2; + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; } } @layer utilities { @@ -77,6 +268,198 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } +@layer theme { + :root, :host { + --font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } +} +@layer base { + h1 { + font-size: var(--text-5xl); + line-height: var(--tw-leading, var(--text-5xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h2 { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h3 { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h4 { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h5 { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + h6 { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + p { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text-light); + } + a { + cursor: pointer; + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + text-decoration-line: underline; + color: var(--color-link); + &:hover { + @media (hover: hover) { + color: var(--color-link-hover); + } + } + } + hr { + color: var(--color-text-light); + opacity: 30%; + } + span { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + div { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + text-wrap: wrap; + overflow-wrap: break-word; + color: var(--color-text); + } + input[type="date"], input[type="time"], input[type="datetime-local"] { + color-scheme: light; + } + [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="datetime-local"] { + color-scheme: dark; + } +} +[data-theme="dark"] { + --color-black: #FFFFFF; + --color-white: #121212; + --color-gray-1: #1F1F1F; + --color-gray-2: #949494; + --color-gray-3: #F3F2F1; + --color-background: #121212; + --color-background-light: #1F1F1F; + --color-background-dark: #1F1F1F; + --color-background-modal: #1E1E1E; + --color-background-modal-light: #252525; + --color-text: #F2F2F2; + --color-text-light: #A3A3A3; + --color-border: #4B5563; + --color-border-input: #F2F2F2; + --color-link: #60A5FA; + --color-link-hover: #93C5FD; + --color-link-visited: #C4B5FD; + --color-primary: #89C4FF; + --color-primary-light: #1e3a8a; + --color-success: #4ADE80; + --color-success-light: #14532d; + --color-warning: #FBBF24; + --color-warning-light: #78350f; + --color-danger: #F87171; + --color-danger-light: #7f1d1d; + --color-info: #38BDF8; + --color-info-light: #0c4a6e; + --color-noactive: #A1A1AA; + --color-noactive-light: #27272a; + --color-result-failed: #F87171; + --color-result-passed: #4ADE80; + --color-result-inprogress: #60A5FA; + --color-result-exclude: #A78BFA; + --color-result-bypasse: #E879F9; + --color-result-inconcllusive: #FCD34D; + --color-result-runnig: #2DD4BF; + --color-result-noaction: #A1A1AA; + --color-diagnostic-debug: #60A5FA; + --color-diagnostic-verbose: #5EEAD4; + --color-diagnostic-information: #38BDF8; + --color-diagnostic-warning: #FBBF24; + --color-diagnostic-error: #F87171; + --color-diagnostic-fatal: #EF4444; + --color-automat: #4ADE80; + --color-ground: #38BDF8; + --color-grounded: #60A5FA; + --color-idle: #A1A1AA; + --color-manual: #FBBF24; + --color-oee: #89C4FF; + --color-availability: #B6D069; + --color-performance: #A08AE1; + --color-quality: #FBBF24; + --color-downtime-unassigned: #C7C7C7; + --color-downtime-material: #FBBF24; + --color-downtime-operator: #F08584; + --color-downtime-working: #B6D069; + --color-downtime-technical: #A08AE1; + --color-downtime-planned: #7DCDD2; + --color-btn-primary: var(--color-primary); + --color-btn-primary-hover: var(--color-primary-light); + --color-btn-danger: var(--color-danger); + --color-btn-danger-hover: var(--color-danger-light); + --color-btn-success: var(--color-success); + --color-btn-success-hover: var(--color-success-light); + --color-btn-warning: var(--color-warning); + --color-btn-warning-hover: var(--color-warning-light); + --color-btn-info: var(--color-info); + --color-btn-info-hover: var(--color-info-light); + --color-btn-noactive: var(--color-noactive); + --color-btn-noactive-hover: var(--color-noactive-light); + --color-btn-noactive-hover: #2A2A2A; + --color-btn-outline-bg: transparent; + --color-btn-no-bg-bg: transparent; +} +:root { + --btn-hover-translate: -0.1rem; +} @property --tw-shadow { syntax: "*"; inherits: false; @@ -142,6 +525,10 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { @@ -159,6 +546,7 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-font-weight: initial; } } } diff --git a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/operon-variables.css b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/operon-variables.css new file mode 100644 index 00000000..0b264bf5 --- /dev/null +++ b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/operon-variables.css @@ -0,0 +1,305 @@ +@layer theme { + :root, :host { + --font-sans: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } +} + +@layer base { + h1 { + @apply text-5xl text-text font-bold text-wrap wrap-break-word; + } + + h2 { + @apply text-4xl text-text font-bold text-wrap wrap-break-word; + } + + h3 { + @apply text-3xl text-text font-bold text-wrap wrap-break-word; + } + + h4 { + @apply text-2xl text-text font-bold text-wrap wrap-break-word; + } + + h5 { + @apply text-xl text-text font-normal text-wrap wrap-break-word; + } + + h6 { + @apply text-lg text-text font-normal text-wrap wrap-break-word; + } + + p { + @apply text-base text-text-light font-normal text-wrap wrap-break-word; + } + + a { + @apply text-base font-normal text-wrap wrap-break-word cursor-pointer underline; + @apply text-link hover:text-link-hover; + } + + hr { + @apply text-text-light opacity-30; + } + + span { + @apply text-base text-text font-normal text-wrap wrap-break-word; + } + + div { + @apply text-base text-text font-normal text-wrap wrap-break-word; + } + + /* input theme */ + input[type="date"], + input[type="time"], + input[type="datetime-local"] { + color-scheme: light; + } + + [data-theme="dark"] input[type="date"], + [data-theme="dark"] input[type="time"], + [data-theme="dark"] input[type="datetime-local"] { + color-scheme: dark; + } +} + +@theme { + --text-3xl--line-height: calc(2 / 1.5); + --text-4xl--line-height: calc(2 / 1.5); + --text-5xl--line-height: calc(2 / 1.5); + --text-6xl--line-height: calc(2 / 1.5); + --text-7xl--line-height: calc(2 / 1.5); + --text-8xl--line-height: calc(2 / 1.5); + --text-9xl--line-height: calc(2 / 1.5); + /* radius */ + --radius-full: calc(infinity * 1px); /* 0.25rem; */ + --radius-small: 1rem; + --radius-extra-small: var(--radius-md); + --radius-nav: var(--radius-small); + --radius-button: var(--radius-full); + --radius-action-button: var(--radius-small); + --radius-action-button-icon: var(--radius-small); + --radius-input: var(--radius-full); + --radius-textarea: var(--radius-small); + --radius-checkbox: var(--radius-extra-small); + --radius-toggle: var(--radius-full); + --radius-radio: var(--radius-full); + --radius-select: var(--radius-small); + --radius-file: var(--radius-small); + --radius-color: var(--radius-small); + --radius-picker: var(--radius-small); + --radius-card: var(--radius-small); + --radius-simple-border: var(--radius-small); + --radius-alert: var(--radius-small); + --radius-list-group: var(--radius-small); + --radius-tab: var(--radius-small); + --radius-dropdown: var(--radius-small); + --radius-modal: var(--radius-small); + --radius-tooltip: var(--radius-extra-small); + --radius-accordion: var(--radius-small); + --radius-toast: var(--radius-small); + --radius-table: var(--radius-full); + --radius-pagination-number: var(--radius-full); + /* #region Colors */ + --color-black: #0B0C0C; + --color-white: #FFFFFF; + --color-gray-1: #F3F2F1; + --color-gray-2: #DEE0E2; + --color-gray-3: #949494; + --color-background: #FEFEFE; + --color-background-light: #FFFFFF; + --color-background-dark: #F0F8FF; + --color-background-modal: #F5FAFF; + --color-background-modal-light: #FFFFFF; + --color-text: #0B0C0C; + --color-text-light: #626A6E; + --color-border: #BFC1C3; + --color-border-input: #0B0C0C; + /* #endregion */ + /* #region Links */ + --color-link: #0065B3; + --color-link-hover: #003078; + --color-link-visited: #4C2C92; + /* #endregion */ + /* #region Brand & semantic colors */ + --color-primary: #0a319e; + --color-primary-light: #E0E8FF; + --color-success: #00703C; + --color-success-light: #D4F7D4; + --color-warning: #EC9811; + --color-warning-light: #FFEAC9; + --color-danger: #D0190F; + --color-danger-light: #FFDCDA; + --color-info: #2B8CC4; + --color-info-light: #D4ECF7; + --color-noactive: #7C7C7C; + --color-noactive-light: #DEE0E2; + /* #endregion */ + /* #region Result colors */ + --color-result-failed: #D0190F; + --color-result-passed: #00703C; + --color-result-inprogress: #0065B3; + --color-result-exclude: #7866B9; + --color-result-bypasse: #912B88; + --color-result-inconcllusive: #B58840; + --color-result-running: #00A2A3; + --color-result-noaction: #949494; + /* #end of result colors*/ + /* diagnostic colors */ + --color-diagnostic-debug: #0065B3; + --color-diagnostic-verbose: #769899; + --color-diagnostic-information: #2B8CC4; + --color-diagnostic-warning: #EC9811; + --color-diagnostic-error: #D0190F; + --color-diagnostic-fatal: #9E1912; + /* end of diagnostic colors */ + /* station status colors */ + --color-automat: #00703C; + --color-ground: #2B8CC4; + --color-grounded: #0065B3; + --color-idle: #949494; + --color-manual: #EC9811; + /* end of station status colors */ + /* prodinsight colors */ + --color-oee: #0A319E; + --color-availability: #00703C; + --color-performance: #0065B3; + --color-quality: #EC9811; + /* end of prodinsight colors */ + /* downtime colors */ + --color-downtime-unassigned: #C7C7C7; + --color-downtime-material: #EC9811; + --color-downtime-operator: #F08584; + --color-downtime-working: #B6D069; + --color-downtime-technical: #9885A9; + --color-downtime-planned: #7DCDD2; + /* end of downtime colors */ + /* buttons colors */ + --color-btn-primary: var(--color-primary); + --color-btn-primary-hover: var(--color-primary-light); + --color-btn-danger: var(--color-danger); + --color-btn-danger-hover: var(--color-danger-light); + --color-btn-success: var(--color-success); + --color-btn-success-hover: var(--color-success-light); + --color-btn-warning: var(--color-warning); + --color-btn-warning-hover: var(--color-warning-light); + --color-btn-info: var(--color-info); + --color-btn-info-hover: var(--color-info-light); + --color-btn-noactive: var(--color-noactive); + --color-btn-noactive-hover: var(--color-noactive-light); + --color-btn-outline-bg: transparent; + --color-btn-no-bg-bg: transparent; + /* end of buttons colors */ + --animate-pulse-danger: pulse-danger 2s ease-in-out infinite; + + @keyframes pulse-danger { + 0%, 100% { + box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 30%, transparent); + } + + 50% { + box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-danger) 0%, transparent); + } + } +} + +[data-theme="dark"] { + /* #region Base colors */ + --color-black: #FFFFFF; + --color-white: #121212; + --color-gray-1: #1F1F1F; + --color-gray-2: #949494; + --color-gray-3: #F3F2F1; + --color-background: #121212; + --color-background-light: #1F1F1F; + --color-background-dark: #1F1F1F; + --color-background-modal: #1E1E1E; + --color-background-modal-light: #252525; + --color-text: #F2F2F2; + --color-text-light: #A3A3A3; + --color-border: #4B5563; + --color-border-input: #F2F2F2; + /* #endregion */ + /* #region Links */ + --color-link: #60A5FA; + --color-link-hover: #93C5FD; + --color-link-visited: #C4B5FD; + /* #endregion */ + /* #region Brand & semantic colors */ + --color-primary: #89C4FF; + --color-primary-light: #1e3a8a; + --color-success: #4ADE80; + --color-success-light: #14532d; + --color-warning: #FBBF24; + --color-warning-light: #78350f; + --color-danger: #F87171; + --color-danger-light: #7f1d1d; + --color-info: #38BDF8; + --color-info-light: #0c4a6e; + --color-noactive: #A1A1AA; + --color-noactive-light: #27272a; + /* #endregion */ + /* #region Result colors */ + --color-result-failed: #F87171; + --color-result-passed: #4ADE80; + --color-result-inprogress: #60A5FA; + --color-result-exclude: #A78BFA; + --color-result-bypasse: #E879F9; + --color-result-inconcllusive: #FCD34D; + --color-result-runnig: #2DD4BF; + --color-result-noaction: #A1A1AA; + /* #endregion */ + /* #region Diagnostic colors */ + --color-diagnostic-debug: #60A5FA; + --color-diagnostic-verbose: #5EEAD4; + --color-diagnostic-information: #38BDF8; + --color-diagnostic-warning: #FBBF24; + --color-diagnostic-error: #F87171; + --color-diagnostic-fatal: #EF4444; + /* #endregion */ + /* #region Station status colors */ + --color-automat: #4ADE80; + --color-ground: #38BDF8; + --color-grounded: #60A5FA; + --color-idle: #A1A1AA; + --color-manual: #FBBF24; + /* #endregion */ + /* #region ProdInsight colors */ + --color-oee: #89C4FF; + --color-availability: #B6D069; + --color-performance: #A08AE1; + --color-quality: #FBBF24; + /* #endregion */ + /* #region Downtime colors */ + --color-downtime-unassigned: #C7C7C7; + --color-downtime-material: #FBBF24; + --color-downtime-operator: #F08584; + --color-downtime-working: #B6D069; + --color-downtime-technical: #A08AE1; + --color-downtime-planned: #7DCDD2; + /* #endregion */ + /* #region Buttons */ + --color-btn-primary: var(--color-primary); + --color-btn-primary-hover: var(--color-primary-light); + --color-btn-danger: var(--color-danger); + --color-btn-danger-hover: var(--color-danger-light); + --color-btn-success: var(--color-success); + --color-btn-success-hover: var(--color-success-light); + --color-btn-warning: var(--color-warning); + --color-btn-warning-hover: var(--color-warning-light); + --color-btn-info: var(--color-info); + --color-btn-info-hover: var(--color-info-light); + --color-btn-noactive: var(--color-noactive); + --color-btn-noactive-hover: var(--color-noactive-light); + --color-btn-noactive-hover: #2A2A2A; + --color-btn-outline-bg: transparent; + --color-btn-no-bg-bg: transparent; + /* #endregion */ +} + +:root { + /* btn */ + --btn-hover-translate: -0.1rem; + +} diff --git a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/tailwind.css b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/tailwind.css index 4a823256..7059ac07 100644 --- a/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/tailwind.css +++ b/src/AXSharp.blazor/src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/tailwind.css @@ -1,5 +1,4 @@ -@import "tailwindcss/theme.css" layer(theme); -@import "tailwindcss/utilities.css" layer(utilities); - +@import "tailwindcss"; @source "./"; -@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); +@import "./operon-variables.css"; +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); \ No newline at end of file diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css index 65f64407..d739f6b9 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/momentum.css @@ -50,16 +50,24 @@ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); - --radius-full: calc(infinity * 1px); - --radius-small: 1rem; - --radius-extra-small: var(--radius-md); --color-background: #FEFEFE; --color-background-light: #FFFFFF; - --color-text: #000000; - --color-text-light: #5F5F5F; + --color-text: #0B0C0C; + --color-text-light: #626A6E; --color-link: #0065B3; --color-link-hover: #003078; + --color-primary: #0a319e; + --color-primary-light: #E0E8FF; + --color-success: #00703C; + --color-success-light: #D4F7D4; + --color-warning: #EC9811; + --color-warning-light: #FFEAC9; --color-danger: #D0190F; + --color-danger-light: #FFDCDA; + --color-info: #2B8CC4; + --color-info-light: #D4ECF7; + --color-noactive: #7C7C7C; + --color-noactive-light: #DEE0E2; } } @layer base { @@ -658,78 +666,82 @@ } [data-theme="dark"] { --color-black: #FFFFFF; - --color-white: #0B0C0C; - --color-gray-1: #2A2A2A; - --color-gray-2: #3A3A3A; - --color-gray-3: #9E9E9E; + --color-white: #121212; + --color-gray-1: #1F1F1F; + --color-gray-2: #949494; + --color-gray-3: #F3F2F1; --color-background: #121212; --color-background-light: #1F1F1F; --color-background-dark: #1F1F1F; --color-background-modal: #1E1E1E; --color-background-modal-light: #252525; - --color-text: #FFFFFF; - --color-text-light: #CFCFCF; - --color-border: #3A3A3A; - --color-border-input: #FFFFFF; - --color-link: #82B1FF; - --color-link-hover: #AECbFA; - --color-link-visited: #B39DDB; - --color-primary: #82B1FF; - --color-primary-light: #1E2A44; - --color-success: #4CAF50; - --color-success-light: #1E3B2C; - --color-warning: #FFB74D; - --color-warning-light: #3A2A12; - --color-danger: #EF5350; - --color-danger-light: #3A1F1F; - --color-info: #64B5F6; - --color-info-light: #1E2F3F; - --color-noactive: #9E9E9E; - --color-noactive-light: #2A2A2A; - --color-result-failed: #EF5350; - --color-result-passed: #4CAF50; - --color-result-inprogress: #64B5F6; - --color-result-exclude: #9575CD; - --color-result-bypassed: #CE93D8; - --color-result-inconcllusive: #D4A373; - --color-result-runnig: #4DD0E1; - --color-result-noaction: #9E9E9E; - --color-diagnostic-debug: #64B5F6; - --color-diagnostic-verbose: #90A4AE; - --color-diagnostic-information: #4FC3F7; - --color-diagnostic-warning: #FFB74D; - --color-diagnostic-error: #EF5350; - --color-diagnostic-fatal: #E53935; - --color-automat: #4CAF50; - --color-ground: #64B5F6; - --color-grounded: #42A5F5; - --color-idle: #9E9E9E; - --color-manual: #FFB74D; - --color-oee: #82B1FF; - --color-availability: #4CAF50; - --color-performance: #64B5F6; - --color-quality: #FFB74D; - --color-downtime-unassigned: #616161; - --color-downtime-material: #FFB74D; - --color-downtime-operator: #EF9A9A; - --color-downtime-working: #AED581; - --color-downtime-technical: #B39DDB; - --color-downtime-planned: #80DEEA; - --color-btn-primary: #82B1FF; - --color-btn-primary-hover: #1E2A44; - --color-btn-success: #4CAF50; - --color-btn-success-hover: #1E3B2C; - --color-btn-danger: #EF5350; - --color-btn-danger-hover: #3A1F1F; - --color-btn-warning: #FFB74D; - --color-btn-warning-hover: #3A2A12; - --color-btn-info: #64B5F6; - --color-btn-info-hover: #1E2F3F; - --color-btn-noactive: #9E9E9E; + --color-text: #F2F2F2; + --color-text-light: #A3A3A3; + --color-border: #4B5563; + --color-border-input: #F2F2F2; + --color-link: #60A5FA; + --color-link-hover: #93C5FD; + --color-link-visited: #C4B5FD; + --color-primary: #89C4FF; + --color-primary-light: #1e3a8a; + --color-success: #4ADE80; + --color-success-light: #14532d; + --color-warning: #FBBF24; + --color-warning-light: #78350f; + --color-danger: #F87171; + --color-danger-light: #7f1d1d; + --color-info: #38BDF8; + --color-info-light: #0c4a6e; + --color-noactive: #A1A1AA; + --color-noactive-light: #27272a; + --color-result-failed: #F87171; + --color-result-passed: #4ADE80; + --color-result-inprogress: #60A5FA; + --color-result-exclude: #A78BFA; + --color-result-bypasse: #E879F9; + --color-result-inconcllusive: #FCD34D; + --color-result-runnig: #2DD4BF; + --color-result-noaction: #A1A1AA; + --color-diagnostic-debug: #60A5FA; + --color-diagnostic-verbose: #5EEAD4; + --color-diagnostic-information: #38BDF8; + --color-diagnostic-warning: #FBBF24; + --color-diagnostic-error: #F87171; + --color-diagnostic-fatal: #EF4444; + --color-automat: #4ADE80; + --color-ground: #38BDF8; + --color-grounded: #60A5FA; + --color-idle: #A1A1AA; + --color-manual: #FBBF24; + --color-oee: #89C4FF; + --color-availability: #B6D069; + --color-performance: #A08AE1; + --color-quality: #FBBF24; + --color-downtime-unassigned: #C7C7C7; + --color-downtime-material: #FBBF24; + --color-downtime-operator: #F08584; + --color-downtime-working: #B6D069; + --color-downtime-technical: #A08AE1; + --color-downtime-planned: #7DCDD2; + --color-btn-primary: var(--color-primary); + --color-btn-primary-hover: var(--color-primary-light); + --color-btn-danger: var(--color-danger); + --color-btn-danger-hover: var(--color-danger-light); + --color-btn-success: var(--color-success); + --color-btn-success-hover: var(--color-success-light); + --color-btn-warning: var(--color-warning); + --color-btn-warning-hover: var(--color-warning-light); + --color-btn-info: var(--color-info); + --color-btn-info-hover: var(--color-info-light); + --color-btn-noactive: var(--color-noactive); + --color-btn-noactive-hover: var(--color-noactive-light); --color-btn-noactive-hover: #2A2A2A; --color-btn-outline-bg: transparent; --color-btn-no-bg-bg: transparent; } +:root { + --btn-hover-translate: -0.1rem; +} @property --tw-space-x-reverse { syntax: "*"; inherits: false; diff --git a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css index f537538c..99b8d6dd 100644 --- a/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css +++ b/src/AXSharp.blazor/tests/sandbox/IxBlazor.App/wwwroot/css/tailwind.css @@ -1,7 +1,4 @@ -@layer theme, base, components, utilities; - -@import "tailwindcss/theme.css" layer(theme); -@import "tailwindcss/utilities.css" layer(utilities); - +@import "tailwindcss"; @source "./"; -@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); +@import "../../../../../src/AXSharp.Presentation.Blazor.Controls/wwwroot/css/operon-variables.css"; +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); \ No newline at end of file