Feat/web borders

ui-admin/theme/src/tokens/contract/borders.ts

@@ -1,3 +1,4 @@
+// TODO: Remove legacy border tokens after components are refactored to @atls-ui/theme borders.
 export type BordersTokens = Record<keyof typeof bordersContract, string>
 
 export const bordersContract = {

ui-admin/theme/src/tokens/dark/borders.ts

@@ -1,3 +1,4 @@
+// TODO: Remove legacy border tokens after components are refactored to @atls-ui/theme borders.
 import type { BordersTokens } from '../contract/index.js'
 
 export const borders: BordersTokens = {

ui-admin/theme/src/tokens/light/borders.ts

@@ -1,3 +1,4 @@
+// TODO: Remove legacy border tokens after components are refactored to @atls-ui/theme borders.
 import type { BordersTokens } from '../contract/index.js'
 
 export const borders: BordersTokens = {

ui-parts/theme/src/tokens/borders.ts

@@ -1,3 +1,4 @@
+// TODO: Remove legacy border tokens after components are refactored to @atls-ui/theme borders.
 export const borders = {
   none: 'none',
 

ui/theme/src/theme.ts

@@ -1,21 +1,26 @@
+import type { BordersTokens }    from './tokens/index.js'
 import type { Colors }           from './tokens/index.js'
 import type { TypographyTokens } from './tokens/index.js'
 
+import { borders }               from './tokens/index.js'
 import { darkColors }            from './tokens/index.js'
 import { lightColors }           from './tokens/index.js'
 import { typography }            from './tokens/index.js'
 
 export interface Theme {
+  borders: BordersTokens
   colors: Colors
   typography: TypographyTokens
 }
 
 export const lightTheme: Theme = {
+  borders: borders(lightColors),
   colors: lightColors,
   typography,
 }
 
 export const darkTheme: Theme = {
+  borders: borders(darkColors),
   colors: darkColors,
   typography,
 }

ui/theme/src/tokens/borders/borders.ts

@@ -0,0 +1,36 @@
+import type { Colors }        from '../colors/index.js'
+import type { BordersTokens } from './interfaces.js'
+
+import { borderStyles }       from './constants.js'
+import { borderWidths }       from './constants.js'
+import { createBorder }       from './utils/index.js'
+
+export const borders = (colors: Colors): BordersTokens => ({
+  neutral: {
+    default: createBorder(borderWidths.sm, borderStyles.solid, colors.surface.subtle),
+    hover: createBorder(borderWidths.sm, borderStyles.solid, colors.surface.muted),
+    pressed: createBorder(borderWidths.sm, borderStyles.solid, colors.surface.base),
+    focused: createBorder(borderWidths.sm, borderStyles.solid, colors.action.base),
+    disabled: createBorder(borderWidths.sm, borderStyles.solid, colors.surface.soft),
+  },
+  action: {
+    default: createBorder(borderWidths.sm, borderStyles.solid, colors.action.base),
+    hover: createBorder(borderWidths.sm, borderStyles.solid, colors.action.hover),
+    pressed: createBorder(borderWidths.sm, borderStyles.solid, colors.action.pressed),
+    focused: createBorder(borderWidths.md, borderStyles.solid, colors.action.base),
+    disabled: createBorder(borderWidths.sm, borderStyles.solid, colors.action.disabled),
+  },
+  danger: {
+    default: createBorder(borderWidths.sm, borderStyles.solid, colors.status.error),
+    hover: createBorder(borderWidths.sm, borderStyles.solid, colors.status.error),
+    pressed: createBorder(borderWidths.sm, borderStyles.solid, colors.status.error),
+    focused: createBorder(borderWidths.md, borderStyles.solid, colors.status.error),
+    disabled: createBorder(borderWidths.sm, borderStyles.solid, colors.surface.soft),
+  },
+  dropzone: {
+    default: createBorder(borderWidths.sm, borderStyles.dashed, colors.surface.muted),
+    hover: createBorder(borderWidths.sm, borderStyles.dashed, colors.action.hover),
+    focused: createBorder(borderWidths.md, borderStyles.dashed, colors.action.base),
+    disabled: createBorder(borderWidths.sm, borderStyles.dashed, colors.surface.soft),
+  },
+})

ui/theme/src/tokens/borders/constants.ts

@@ -0,0 +1,11 @@
+export const borderWidths = {
+  none: '0',
+  xs: '0.7px',
+  sm: '1px',
+  md: '2px',
+} as const
+
+export const borderStyles = {
+  solid: 'solid',
+  dashed: 'dashed',
+} as const

ui/theme/src/tokens/borders/index.ts

@@ -0,0 +1,4 @@
+export * from './constants.js'
+export * from './borders.js'
+export type * from './interfaces.js'
+export * from './utils/index.js'

ui/theme/src/tokens/borders/interfaces.ts

@@ -0,0 +1,23 @@
+import type { borderStyles } from './constants.js'
+import type { borderWidths } from './constants.js'
+
+export type BorderStyle = (typeof borderStyles)[keyof typeof borderStyles]
+export type BorderWidth = (typeof borderWidths)[keyof typeof borderWidths]
+
+export interface BorderStates {
+  default: string
+  hover: string
+  focused: string
+  disabled: string
+}
+
+export interface PressableBorderStates extends BorderStates {
+  pressed: string
+}
+
+export interface BordersTokens {
+  neutral: PressableBorderStates
+  action: PressableBorderStates
+  danger: PressableBorderStates
+  dropzone: BorderStates
+}

ui/theme/src/tokens/borders/utils/createBorder.ts

@@ -0,0 +1,5 @@
+import type { BorderStyle } from '../interfaces.js'
+import type { BorderWidth } from '../interfaces.js'
+
+export const createBorder = (width: BorderWidth, style: BorderStyle, color: string): string =>
+  `${width} ${style} ${color}`

ui/theme/src/tokens/borders/utils/index.ts

@@ -0,0 +1 @@
+export * from './createBorder.js'

ui/theme/src/tokens/index.ts

@@ -1,4 +1,5 @@
 export * from './animations.js'
+export * from './borders/index.js'
 export * from './colors/index.js'
 export * from './layout/spaces.js'
 export * from './opacities.js'