diff --git a/Directory.Packages.props b/Directory.Packages.props index ec6b77f8..770ecacd 100644 --- a/Directory.Packages.props +++ b/Directory.Packages.props @@ -15,7 +15,7 @@ - + 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 aa78287c..f537538c 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 +1,7 @@ -@import "tailwindcss"; \ No newline at end of file +@layer theme, base, components, utilities; + +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); + +@source "./"; +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); 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 e76793ee..f537538c 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,296 +1,7 @@ -@import "tailwindcss"; -@source "./"; -@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); - -@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; - } +@layer theme, base, components, utilities; - a { - @apply text-base font-normal text-wrap wrap-break-word cursor-pointer underline; - @apply text-link hover:text-link-hover; - } +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); - 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-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-gray-1: #F3F2F1; - --color-gray-2: #DEE0E2; - --color-gray-3: #949494; - --color-white: #FFFFFF; - --color-background: #FEFEFE; - --color-background-light: #FFFFFF; - --color-background-dark: #F0F8FF; - --color-background-modal: #F5FAFF; - --color-background-modal-light: #FFFFFF; - --color-text: #000000; - --color-text-light: #5F5F5F; - --color-border: #BFC1C3; - --color-border-input: #0B0C0C; - --color-link: #0065B3; - --color-link-hover: #003078; - --color-link-visited: #4C2C92; - --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 */ - /* result colors*/ - --color-result-failed: #D0190F; - --color-result-passed: #00703C; - --color-result-inprogress: #0065B3; - --color-result-exclude: #7866B9; - --color-result-bypassed: #912B88; - --color-result-inconcllusive: #B58840; - --color-result-runnig: #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: #0A319E; - --color-btn-primary-hover: #E0E8FF; - --color-btn-danger: #D0190F; - --color-btn-danger-hover: #FFDCDA; - --color-btn-success: #00703C; - --color-btn-success-hover: #D4F7D4; - --color-btn-warning: #EC9811; - --color-btn-warning-hover: #FFFAD5; - --color-btn-info: #2B8CC4; - --color-btn-info-hover: #D4ECF7; - --color-btn-noactive: #7C7C7C; - --color-btn-noactive-hover: #DEE0E2; - --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: #0B0C0C; - --color-gray-1: #2A2A2A; - --color-gray-2: #3A3A3A; - --color-gray-3: #9E9E9E; - --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; - /* #endregion */ - /* #region Links */ - --color-link: #82B1FF; - --color-link-hover: #AECbFA; - --color-link-visited: #B39DDB; - /* #endregion */ - /* #region Brand & semantic colors */ - --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; - /* #endregion */ - /* #region Result colors */ - --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; - /* #endregion */ - /* #region Diagnostic colors */ - --color-diagnostic-debug: #64B5F6; - --color-diagnostic-verbose: #90A4AE; - --color-diagnostic-information: #4FC3F7; - --color-diagnostic-warning: #FFB74D; - --color-diagnostic-error: #EF5350; - --color-diagnostic-fatal: #E53935; - /* #endregion */ - /* #region Station status colors */ - --color-automat: #4CAF50; - --color-ground: #64B5F6; - --color-grounded: #42A5F5; - --color-idle: #9E9E9E; - --color-manual: #FFB74D; - /* #endregion */ - /* #region ProdInsight colors */ - --color-oee: #82B1FF; - --color-availability: #4CAF50; - --color-performance: #64B5F6; - --color-quality: #FFB74D; - /* #endregion */ - /* #region Downtime colors */ - --color-downtime-unassigned: #616161; - --color-downtime-material: #FFB74D; - --color-downtime-operator: #EF9A9A; - --color-downtime-working: #AED581; - --color-downtime-technical: #B39DDB; - --color-downtime-planned: #80DEEA; - /* #endregion */ - /* #region Buttons */ - --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-btn-noactive-hover: #2A2A2A; - --color-btn-outline-bg: transparent; - --color-btn-no-bg-bg: transparent; - /* #endregion */ -} +@source "./"; +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));