[UIK-5351][theme] Add more variables to theme

.stylelintrc.json

@@ -9,7 +9,8 @@
       {
         "ignoreProperties": [
           "vertical-anchor",
-          "animation-timeline"
+          "animation-timeline",
+          "field-sizing"
         ]
       }
     ],

playground/entries/Badge.tsx

@@ -21,10 +21,11 @@ const entry: PlaygroundEntry<BadgeJSXProps> = {
       displayName: 'Type',
       value: 'new',
     },
-    inverted: {
-      type: 'boolean',
-      displayName: 'Inverted',
-      value: false,
+    theme: {
+      type: 'select',
+      options: ['default', 'light', 'invert'],
+      displayName: 'Theme',
+      value: 'default',
     },
   },
   link: createGithubLink('badge'),

playground/entries/Spin.tsx

@@ -20,9 +20,9 @@ type AdditionalJSXProps = {
 };
 export type SpinJSXProps = JSXProps<NSSpin.Props> & AdditionalJSXProps;
 
-const margins = {
-  xs: 1,
-  s: 1,
+const gaps = {
+  xs: 1.5,
+  s: 1.5,
   m: 2,
   l: 2,
   xl: 4,
@@ -32,10 +32,10 @@ const margins = {
 const textSize: { [key in SpinJSXProps['size']]: NSText.Props['size'] } = {
   xs: 200,
   s: 200,
-  m: 300,
+  m: 200,
   l: 300,
-  xl: 200,
-  xxl: 200,
+  xl: 300,
+  xxl: 300,
 };
 
 const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['direction'] } = {
@@ -46,7 +46,7 @@ const textPlacement: { [key in SpinJSXProps['textPlacement']]: NSFlex.Props['dir
 function getJSX(props: SpinJSXProps) {
   return props.text.length
     ? (
-        <Flex alignItems='center' gap={margins[props.size]} direction={textPlacement[props.textPlacement]}>
+        <Flex alignItems='center' gap={gaps[props.size]} direction={textPlacement[props.textPlacement]}>
           <Spin size={props.size} theme={props.theme} />
           <Text size={textSize[props.size]} color='text-secondary'>
             {props.text}
@@ -69,8 +69,8 @@ const entry: PlaygroundEntry<SpinJSXProps> = {
     },
     theme: {
       type: 'inline-radio',
-      value: 'dark',
-      options: ['dark', 'invert'],
+      value: 'default',
+      options: ['default', 'invert'],
       displayName: 'Theme',
     },
     text: {

playground/entries/SpinContainer.tsx

@@ -48,8 +48,8 @@ const entry: PlaygroundEntry<SpinContainerJSXProps> = {
     },
     theme: {
       type: 'inline-radio',
-      value: 'dark',
-      options: ['dark', 'invert'],
+      value: 'default',
+      options: ['default', 'invert'],
       displayName: 'Theme',
     },
     size: {

playground/entries/TabLine.tsx

@@ -26,7 +26,7 @@ function getJSX(props: TabLineJSXProps) {
           ? [
               <TabLine.Item.Text key={1}>Analytics</TabLine.Item.Text>,
               <TabLine.Item.Addon key={2}>
-                <Badge bg='bg-primary-success'>new</Badge>
+                <Badge type='new' />
               </TabLine.Item.Addon>,
             ]
           : 'Analytics'}

playground/entries/TabPanel.tsx

@@ -26,7 +26,7 @@ function getJSX(props: TabPanelJSXProps) {
           ? [
               <TabPanel.Item.Text key={1}>Analytics</TabPanel.Item.Text>,
               <TabPanel.Item.Addon key={2}>
-                <Badge bg='bg-primary-success'>new</Badge>
+                <Badge type='new' />
               </TabPanel.Item.Addon>,
             ]
           : 'Analytics'}

playground/entries/Tag.tsx

@@ -1,4 +1,5 @@
 import EditM from '@semcore/icon/Edit/m';
+import { Flex } from '@semcore/ui/base-components';
 import type { NSTag } from '@semcore/ui/tag';
 import { TagContainer } from '@semcore/ui/tag';
 import React from 'react';
@@ -16,29 +17,35 @@ type AdditionalJSXProps = {
 export type TagJSXProps = JSXProps<NSTag.Props> & AdditionalJSXProps;
 
 function getJSX(props: TagJSXProps) {
+  const tagProps = props.color
+    ? { theme: props.theme, color: props.color }
+    : { theme: 'primary' } as const;
+
   return (
-    <TagContainer
-      interactive={props.interactive}
-      theme={props.theme}
-      size={props.size}
-      disabled={props.disabled}
-      {...(props.color && { color: props.color })}
-    >
-      <TagContainer.Tag active={props.active}>
-        {props.addon === 'Circle' && (
-          <TagContainer.Tag.Circle>
-            <img src='https://picsum.photos/id/1025/28/28' />
-          </TagContainer.Tag.Circle>
-        )}
-        {props.addon === 'Icon' && (
-          <TagContainer.Tag.Addon>
-            <EditM />
-          </TagContainer.Tag.Addon>
-        )}
-        <TagContainer.Tag.Text>Tag text</TagContainer.Tag.Text>
-      </TagContainer.Tag>
-      {props.closeIcon && <TagContainer.Close />}
-    </TagContainer>
+    <Flex w='100%' py={8} alignItems='center' justifyContent='center' bg={props.invert ? 'black' : 'white'}>
+      <TagContainer
+        interactive={props.interactive}
+        size={props.size}
+        disabled={props.disabled}
+        invert={props.invert}
+        {...tagProps}
+      >
+        <TagContainer.Tag active={props.active}>
+          {props.addon === 'Circle' && (
+            <TagContainer.Tag.Circle>
+              <img src='https://picsum.photos/id/1025/28/28' />
+            </TagContainer.Tag.Circle>
+          )}
+          {props.addon === 'Icon' && (
+            <TagContainer.Tag.Addon>
+              <EditM />
+            </TagContainer.Tag.Addon>
+          )}
+          <TagContainer.Tag.Text>Tag text</TagContainer.Tag.Text>
+        </TagContainer.Tag>
+        {props.closeIcon && <TagContainer.Close />}
+      </TagContainer>
+    </Flex>
   );
 }
 
@@ -87,6 +94,11 @@ const entry: PlaygroundEntry<TagJSXProps> = {
       value: false,
       displayName: 'Active',
     },
+    invert: {
+      type: 'boolean',
+      value: false,
+      displayName: 'Invert',
+    },
     disabled: {
       type: 'boolean',
       value: false,

playground/utils/renderIcon.tsx

@@ -19,6 +19,10 @@ const SizeToIconMap = {
     before: <CheckM />,
     after: <ArrowRightM />,
   },
+  350: {
+    before: <CheckM />,
+    after: <ArrowRightM />,
+  },
   400: {
     before: <CheckM />,
     after: <ArrowRightM />,

semcore/accordion/src/style/accordion.shadow.css

@@ -15,7 +15,7 @@ SItemToggle[use][use='primary'] {
   margin-bottom: var(--intergalactic-spacing-05x, 2px);
 }
 SItemToggle[use][use='primary']:hover {
-  background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.96 0.001 180));
+  background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180));
 }
 
 SItemToggle[disabled] {