@telia/teddy 0.0.18 → 0.0.19

package/dist/utils/generate-styling/color.d.ts

@@ -0,0 +1,15 @@
+import { Responsive } from './util';
+
+export declare const colorValues: readonly [];
+export declare const color: readonly [{
+    readonly key: "color";
+    readonly className: "teddy-color";
+    readonly values: readonly [];
+}];
+/**
+ * The color. It can be  or a responsive value.
+ * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+ */
+export type ColorProps = {
+    color?: Responsive<(typeof colorValues)[number]['key']>;
+};

package/dist/utils/generate-styling/color.js

@@ -0,0 +1,12 @@
+const colorValues = [];
+const color = [
+  {
+    key: "color",
+    className: "teddy-color",
+    values: colorValues
+  }
+];
+export {
+  color,
+  colorValues
+};

package/dist/utils/{layout → generate-styling}/index.d.ts

@@ -1,16 +1,17 @@
-import { InsetProps } from './inset';
-import { PositionProps } from './position';
-import { PaddingProps } from './padding';
-import { Justify } from './justify';
-import { GridLayout, GridChildren } from './grid';
-import { GapProps } from './gap';
-import { Align } from './align';
-import { HTMLAttributes } from 'react';
-import { HeightProps } from './height';
-import { WidthProps } from './width';
-import { FlexChildren, FlexLayout } from './flex';
-import { MarginProps } from './margin';
 import { Responsive } from './util';
+import { MarginProps } from './margin';
+import { FlexChildren, FlexLayout } from './flex';
+import { WidthProps } from './width';
+import { HeightProps } from './height';
+import { HTMLAttributes } from 'react';
+import { Align } from './align';
+import { GapProps } from './gap';
+import { GridLayout, GridChildren } from './grid';
+import { Justify } from './justify';
+import { PaddingProps } from './padding';
+import { PositionProps } from './position';
+import { InsetProps } from './inset';
+import { ColorProps } from './color';
 
 export declare const displayValues: readonly [{
     readonly key: "none";
@@ -1556,6 +1557,10 @@ export declare const layout: readonly [{
         readonly key: "page-padding-xl";
         readonly value: "var(--teddy-spacing-page-padding-xl)";
     }];
+}, {
+    readonly key: "color";
+    readonly className: "teddy-color";
+    readonly values: readonly [];
 }, {
     readonly key: "align";
     readonly className: "teddy-ai";
@@ -1918,7 +1923,7 @@ export declare const layout: readonly [{
         readonly value: "span 12";
     }];
 }];
-export type CommonChildrenLayoutProps = PositionProps & InsetProps & MarginProps & PaddingProps & WidthProps & HeightProps;
+export type CommonChildrenLayoutProps = PositionProps & InsetProps & MarginProps & PaddingProps & WidthProps & HeightProps & ColorProps;
 export type ChildrenLayoutProps = FlexChildren & GridChildren & CommonChildrenLayoutProps;
 export type CommonFlexGridLayoutProps = ChildrenLayoutProps & GapProps & {
     align?: Align;

package/dist/utils/{layout → generate-styling}/index.js

@@ -10,6 +10,7 @@ import { justify } from "./justify.js";
 import { paddings } from "./padding.js";
 import { position } from "./position.js";
 import { inset } from "./inset.js";
+import { color } from "./color.js";
 const breakpoint = {
   sm: "0px",
   md: "600px",
@@ -33,6 +34,7 @@ const layout = [
   ...widths,
   ...heights,
   ...gap,
+  ...color,
   ...align,
   ...justify,
   ...displayLayout,

package/package.json

@@ -18,7 +18,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.19",
   "sideEffects": [
     "**/*.css"
   ],