matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: some style migrations

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-22 21:12:39 +01:00
parent ef86dcd2b7
commit f61f3d5867
13 changed files with 134 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/nicolium/src/components/ui/combobox.css
View File

@@ -1,31 +0,0 @@
:root {
--reach-combobox: 1;
}
[data-reach-combobox-popover] {
@apply rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 z-[100];
}
[data-reach-combobox-list] {
@apply list-none m-0 py-1 px-0 select-none;
}
[data-reach-combobox-option] {
@apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 cursor-pointer;
}
[data-reach-combobox-option][aria-selected='true'] {
@apply bg-gray-100 dark:bg-gray-800;
}
[data-reach-combobox-option]:hover {
@apply bg-gray-100 dark:bg-gray-800;
}
[data-reach-combobox-option][aria-selected='true']:hover {
@apply bg-gray-100 dark:bg-gray-800;
}
[data-suggested-value] {
@apply font-bold;
}

52
packages/nicolium/src/components/ui/combobox.scss Normal file
View File

@@ -0,0 +1,52 @@
:root {
--reach-combobox: 1;
}
[data-reach-combobox-popover] {
z-index: 100;
border-radius: 0.375rem;
background: white;
box-shadow: var(--shadow-lg);
.dark & {
background: rgb(var(--color-gray-900));
outline: 2px solid rgb(var(--color-primary-700));
}
}
[data-reach-combobox-list] {
user-select: none;
margin: 0;
padding: 0.25rem 0;
list-style-type: none;
}
[data-reach-combobox-option] {
cursor: pointer;
display: block;
padding: 0.625rem 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgb(var(--color-gray-700));
.dark & {
color: rgb(var(--color-gray-500));
}
}
[data-reach-combobox-option][aria-selected='true'],
[data-reach-combobox-option]:hover,
[data-reach-combobox-option][aria-selected='true']:hover {
background: rgb(var(--color-gray-100));
.dark & {
background: rgb(var(--color-gray-800));
}
}
[data-suggested-value] {
font-weight: 700;
}

2
packages/nicolium/src/components/ui/combobox.tsx
View File

@@ -1,4 +1,4 @@
import './combobox.css';
import './combobox.scss';
export {
Combobox as default,

22
packages/nicolium/src/components/ui/tabs.css
View File

@@ -1,22 +0,0 @@
:root {
--reach-tabs: 1;
}
[data-reach-tabs] {
@apply relative pb-[3px];
}
[data-reach-tab-list] {
@apply flex overflow-auto;
}
[data-reach-tab] {
@apply flex-1 flex justify-center items-center
min-w-fit py-4 px-1 text-center font-medium text-sm text-gray-700
dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500
focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus-visible:ring-primary-500;
}
[data-reach-tab][data-selected] {
@apply text-gray-900 dark:text-gray-100;
}

59
packages/nicolium/src/components/ui/tabs.scss Normal file
View File

@@ -0,0 +1,59 @@
:root {
--reach-tabs: 1;
}
[data-reach-tabs] {
position: relative;
padding-bottom: 3px;
}
[data-reach-tab-list] {
overflow: auto;
display: flex;
}
[data-reach-tab] {
display: flex;
flex: 1 1 0%;
align-items: center;
justify-content: center;
min-width: fit-content;
padding: 1rem 0.25rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
color: rgb(var(--color-gray-700));
text-align: center;
.dark & {
color: rgb(var(--color-gray-600));
}
&:hover {
color: rgb(var(--color-gray-800));
.dark & {
color: rgb(var(--color-gray-500));
}
}
&:focus-visible {
outline: 2px solid rgb(var(--color-primary-500));
outline-offset: 2px;
.dark & {
outline-color: rgb(var(--color-primary-500));
outline-offset: 0;
}
}
}
[data-reach-tab][data-selected] {
color: rgb(var(--color-gray-900));
.dark & {
color: rgb(var(--color-gray-100));
}
}

2
packages/nicolium/src/components/ui/tabs.tsx
View File

@@ -13,7 +13,7 @@ import Counter from './counter';
import type { LinkOptions } from '@tanstack/react-router';
import './tabs.css';
import './tabs.scss';
const HORIZONTAL_PADDING = 8;
const AnimatedContext = React.createContext<React.Dispatch<

18
packages/nicolium/src/styles/basics.scss
View File

@@ -8,13 +8,19 @@ body {
}
::selection {
@apply bg-primary-600 text-white;
}
noscript {
@apply text-center;
color: white;
background: rgb(var(--color-primary-600));
}
.emojione {
@apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
display: inline-block;
width: 1rem;
height: 1rem;
margin-top: -0.2ex;
margin-bottom: 0.2ex;
vertical-align: middle;
object-fit: contain;
}

3
packages/nicolium/src/styles/emoji-picker.scss
View File

@@ -2,8 +2,7 @@ em-emoji-picker {
--rgb-background: 255 255 255;
--rgb-accent: var(--color-primary-600);
--tw-shadow: 0 10px 15px -3px #0001, 0 4px 6px -4px #0001;
--shadow:
var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--shadow: var(--shadow-lg);
}
.dark em-emoji-picker {

8
packages/nicolium/src/styles/new/components.scss
View File

@@ -913,9 +913,7 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
border-radius: 0.375rem;
background-color: #fff;
box-shadow:
0 10px 15px -3px #0001,
0 4px 6px -4px #0001;
box-shadow: var(--shadow-lg);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 100ms;
@@ -1031,9 +1029,7 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
&--rounded {
color: rgb(var(--color-gray-900));
background-color: #fff;
box-shadow:
0 10px 15px -3px #0001,
0 4px 6px -4px #0001;
box-shadow: var(--shadow-lg);
.dark.black & {
background-color: #000;

8
packages/nicolium/src/styles/new/layout.scss
View File

@@ -90,9 +90,7 @@ body {
background-color: #fffe;
backdrop-filter: blur(12px) saturate(2);
box-shadow:
0 10px 15px -3px #0001,
0 4px 6px -4px #0001;
box-shadow: var(--shadow-lg);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1113,9 +1111,7 @@ body {
border-radius: 0.5rem;
background-color: #fff;
box-shadow:
0 10px 15px -3px #0001,
0 4px 6px -4px #0001;
box-shadow: var(--shadow-lg);
.dark.black & {
background-color: #000;

4
packages/nicolium/src/styles/new/mixins.scss
View File

@@ -133,9 +133,7 @@
@if $variant == rounded {
color: rgb(var(--color-gray-900));
background-color: #fff;
box-shadow:
0 10px 15px -3px #0001,
0 4px 6px -4px #0001;
box-shadow: var(--shadow-lg);
&:is(.dark.black *) {
background-color: #000;

4
packages/nicolium/src/styles/new/modals.scss
View File

@@ -207,9 +207,7 @@
border-top-right-radius: 0.75rem;
background-color: #fff;
box-shadow:
0 10px 15px -3px #0001,
0 4px 6px -4px #0001;
box-shadow: var(--shadow-lg);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;

2
packages/nicolium/src/styles/new/variables.scss
View File

@@ -4,6 +4,8 @@ $breakpoint-lg: 976px;
$breakpoint-xl: 1280px;
:root {
--shadow-lg: 0 10px 15px -3px #0001, 0 4px 6px -4px #0001;
/* --hex-slate-50: #f8fafc;
--hex-slate-100: #f1f5f9;
--hex-slate-200: #e2e8f0;