@lesterarte/sefin-ui 0.0.12 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -1
- package/styles/_fonts.scss +41 -0
- package/styles/_reset.scss +58 -0
- package/styles/_tokens.scss +83 -0
- package/styles/_typography.scss +88 -0
- package/styles/index.scss +8 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lesterarte/sefin-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"files": [
|
|
38
38
|
"fesm2022",
|
|
39
39
|
"types",
|
|
40
|
+
"styles",
|
|
40
41
|
"package.json",
|
|
41
42
|
"README.md"
|
|
42
43
|
],
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
// Pluto Font Family
|
|
2
|
+
// Secretaría de Finanzas brand typography
|
|
3
|
+
//
|
|
4
|
+
// Font-face declarations for Pluto font family
|
|
5
|
+
// Note: The consuming application must provide the font files and define @font-face
|
|
6
|
+
// Expected locations: ./assets/fonts/ or node_modules/@lesterarte/sefin-ui/assets/fonts/
|
|
7
|
+
//
|
|
8
|
+
// Example usage in consuming application's styles.scss:
|
|
9
|
+
// @font-face {
|
|
10
|
+
// font-family: 'Pluto';
|
|
11
|
+
// src: url('./assets/fonts/Pluto-Regular.woff2') format('woff2'),
|
|
12
|
+
// url('./assets/fonts/Pluto-Regular.woff') format('woff'),
|
|
13
|
+
// url('./assets/fonts/Pluto-Regular.ttf') format('truetype');
|
|
14
|
+
// font-weight: 400;
|
|
15
|
+
// font-style: normal;
|
|
16
|
+
// font-display: swap;
|
|
17
|
+
// }
|
|
18
|
+
//
|
|
19
|
+
// @font-face {
|
|
20
|
+
// font-family: 'Pluto';
|
|
21
|
+
// src: url('./assets/fonts/Pluto-Light.woff2') format('woff2'),
|
|
22
|
+
// url('./assets/fonts/Pluto-Light.woff') format('woff'),
|
|
23
|
+
// url('./assets/fonts/Pluto-Light.ttf') format('truetype');
|
|
24
|
+
// font-weight: 300;
|
|
25
|
+
// font-style: normal;
|
|
26
|
+
// font-display: swap;
|
|
27
|
+
// }
|
|
28
|
+
//
|
|
29
|
+
// @font-face {
|
|
30
|
+
// font-family: 'Pluto';
|
|
31
|
+
// src: url('./assets/fonts/Pluto-Bold.woff2') format('woff2'),
|
|
32
|
+
// url('./assets/fonts/Pluto-Bold.woff') format('woff'),
|
|
33
|
+
// url('./assets/fonts/Pluto-Bold.ttf') format('truetype');
|
|
34
|
+
// font-weight: 700;
|
|
35
|
+
// font-style: normal;
|
|
36
|
+
// font-display: swap;
|
|
37
|
+
// }
|
|
38
|
+
|
|
39
|
+
// Font declarations are commented out to avoid build errors when font files are not available
|
|
40
|
+
// The consuming application must define @font-face rules with paths to their font files
|
|
41
|
+
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
// CSS Reset
|
|
2
|
+
// Minimal reset for consistent styling across browsers
|
|
3
|
+
|
|
4
|
+
*,
|
|
5
|
+
*::before,
|
|
6
|
+
*::after {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
margin: 0;
|
|
9
|
+
padding: 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
html {
|
|
13
|
+
-webkit-font-smoothing: antialiased;
|
|
14
|
+
-moz-osx-font-smoothing: grayscale;
|
|
15
|
+
text-rendering: optimizeLegibility;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body {
|
|
19
|
+
font-family: var(--sefin-font-family-base, 'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
|
20
|
+
font-size: var(--sefin-font-size-base, 1rem);
|
|
21
|
+
font-weight: var(--sefin-font-weight-normal, 400); // Pluto-Regular
|
|
22
|
+
line-height: var(--sefin-line-height-normal, 1.5);
|
|
23
|
+
color: var(--sefin-color-text, #212121);
|
|
24
|
+
background-color: var(--sefin-color-background, #fafafa);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
img,
|
|
28
|
+
picture,
|
|
29
|
+
video,
|
|
30
|
+
canvas,
|
|
31
|
+
svg {
|
|
32
|
+
display: block;
|
|
33
|
+
max-width: 100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
input,
|
|
37
|
+
button,
|
|
38
|
+
textarea,
|
|
39
|
+
select {
|
|
40
|
+
font: inherit;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
button {
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
border: none;
|
|
46
|
+
background: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
a {
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
color: inherit;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
ul,
|
|
55
|
+
ol {
|
|
56
|
+
list-style: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
// Design Tokens as CSS Variables
|
|
2
|
+
// Based on Secretaría de Finanzas brand guidelines
|
|
3
|
+
// These are set dynamically by ThemeLoader, but defined here for reference
|
|
4
|
+
// and IDE autocomplete support
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
// Colors - Secretaría de Finanzas brand colors
|
|
8
|
+
// Will be set by ThemeLoader, but defaults shown here
|
|
9
|
+
--sefin-color-primary: #55C3D8; // Light Blue from brand
|
|
10
|
+
--sefin-color-primary-dark: #3f9bb0;
|
|
11
|
+
--sefin-color-primary-light: #80d3e5;
|
|
12
|
+
--sefin-color-secondary: #383838; // Dark Gray from brand
|
|
13
|
+
--sefin-color-secondary-dark: #2a2a2a;
|
|
14
|
+
--sefin-color-secondary-light: #686868;
|
|
15
|
+
--sefin-color-background: #ffffff; // White from brand
|
|
16
|
+
--sefin-color-background-elevated: #ffffff;
|
|
17
|
+
--sefin-color-surface: #ffffff;
|
|
18
|
+
--sefin-color-surface-hover: #cecece; // Light Gray from brand
|
|
19
|
+
--sefin-color-text: #383838; // Dark Gray from brand
|
|
20
|
+
--sefin-color-text-secondary: #686868;
|
|
21
|
+
--sefin-color-text-disabled: #9b9b9b;
|
|
22
|
+
--sefin-color-border: #cecece; // Light Gray from brand
|
|
23
|
+
--sefin-color-border-focus: #55C3D8; // Light Blue from brand
|
|
24
|
+
--sefin-color-success: #4caf50;
|
|
25
|
+
--sefin-color-warning: #ff9800;
|
|
26
|
+
--sefin-color-error: #f44336;
|
|
27
|
+
--sefin-color-info: #009688;
|
|
28
|
+
|
|
29
|
+
// Brand-specific colors
|
|
30
|
+
--sefin-color-brand-dark-gray: #383838;
|
|
31
|
+
--sefin-color-brand-light-gray: #cecece;
|
|
32
|
+
--sefin-color-brand-light-blue: #55C3D8;
|
|
33
|
+
--sefin-color-brand-white: #ffffff;
|
|
34
|
+
|
|
35
|
+
// Spacing
|
|
36
|
+
--sefin-spacing-xs: 4px;
|
|
37
|
+
--sefin-spacing-sm: 8px;
|
|
38
|
+
--sefin-spacing-md: 16px;
|
|
39
|
+
--sefin-spacing-lg: 24px;
|
|
40
|
+
--sefin-spacing-xl: 32px;
|
|
41
|
+
--sefin-spacing-2xl: 48px;
|
|
42
|
+
--sefin-spacing-3xl: 64px;
|
|
43
|
+
--sefin-spacing-4xl: 96px;
|
|
44
|
+
--sefin-spacing-5xl: 128px;
|
|
45
|
+
|
|
46
|
+
// Typography - Pluto typeface from brand guidelines
|
|
47
|
+
--sefin-font-family-base: 'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
48
|
+
--sefin-font-family-mono: 'Fira Code', 'Courier New', monospace;
|
|
49
|
+
--sefin-font-size-xs: 0.75rem;
|
|
50
|
+
--sefin-font-size-sm: 0.875rem;
|
|
51
|
+
--sefin-font-size-base: 1rem;
|
|
52
|
+
--sefin-font-size-lg: 1.125rem;
|
|
53
|
+
--sefin-font-size-xl: 1.25rem;
|
|
54
|
+
--sefin-font-size-2xl: 1.5rem;
|
|
55
|
+
--sefin-font-size-3xl: 1.875rem;
|
|
56
|
+
--sefin-font-size-4xl: 2.25rem;
|
|
57
|
+
--sefin-font-size-5xl: 3rem;
|
|
58
|
+
--sefin-font-weight-light: 300; // Pluto-Light
|
|
59
|
+
--sefin-font-weight-normal: 400; // Pluto-Regular
|
|
60
|
+
--sefin-font-weight-medium: 500;
|
|
61
|
+
--sefin-font-weight-semibold: 600;
|
|
62
|
+
--sefin-font-weight-bold: 700; // Pluto-Bold
|
|
63
|
+
--sefin-line-height-tight: 1.25;
|
|
64
|
+
--sefin-line-height-normal: 1.5;
|
|
65
|
+
--sefin-line-height-relaxed: 1.75;
|
|
66
|
+
|
|
67
|
+
// Border Radius
|
|
68
|
+
--sefin-radius-none: 0;
|
|
69
|
+
--sefin-radius-sm: 4px;
|
|
70
|
+
--sefin-radius-md: 8px;
|
|
71
|
+
--sefin-radius-lg: 12px;
|
|
72
|
+
--sefin-radius-xl: 16px;
|
|
73
|
+
--sefin-radius-2xl: 24px;
|
|
74
|
+
--sefin-radius-full: 9999px;
|
|
75
|
+
|
|
76
|
+
// Shadows
|
|
77
|
+
--sefin-shadow-none: none;
|
|
78
|
+
--sefin-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
79
|
+
--sefin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
80
|
+
--sefin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
81
|
+
--sefin-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
82
|
+
--sefin-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
83
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
// Typography utilities
|
|
2
|
+
// Using Pluto font family from Secretaría de Finanzas brand guidelines
|
|
3
|
+
// Based on brand guidelines: Pluto-Regular (400) and Pluto-Bold (700)
|
|
4
|
+
|
|
5
|
+
* {
|
|
6
|
+
font-family: var(--sefin-font-family-base, 'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
h1,
|
|
10
|
+
h2,
|
|
11
|
+
h3,
|
|
12
|
+
h4,
|
|
13
|
+
h5,
|
|
14
|
+
h6 {
|
|
15
|
+
font-family: var(--sefin-font-family-base, 'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
|
16
|
+
font-weight: var(--sefin-font-weight-bold, 700); // Pluto-Bold for headings
|
|
17
|
+
line-height: var(--sefin-line-height-tight, 1.25);
|
|
18
|
+
color: var(--sefin-color-text, #212121);
|
|
19
|
+
margin: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
p {
|
|
23
|
+
font-family: var(--sefin-font-family-base, 'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
|
|
24
|
+
font-weight: var(--sefin-font-weight-normal, 400); // Pluto-Regular for body text
|
|
25
|
+
margin: 0;
|
|
26
|
+
color: var(--sefin-color-text, #212121);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
h1 {
|
|
30
|
+
font-size: var(--sefin-font-size-4xl, 2.25rem);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h2 {
|
|
34
|
+
font-size: var(--sefin-font-size-3xl, 1.875rem);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
h3 {
|
|
38
|
+
font-size: var(--sefin-font-size-2xl, 1.5rem);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
h4 {
|
|
42
|
+
font-size: var(--sefin-font-size-xl, 1.25rem);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h5 {
|
|
46
|
+
font-size: var(--sefin-font-size-lg, 1.125rem);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
h6 {
|
|
50
|
+
font-size: var(--sefin-font-size-base, 1rem);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.text-xs {
|
|
54
|
+
font-size: var(--sefin-font-size-xs);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.text-sm {
|
|
58
|
+
font-size: var(--sefin-font-size-sm);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.text-base {
|
|
62
|
+
font-size: var(--sefin-font-size-base);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.text-lg {
|
|
66
|
+
font-size: var(--sefin-font-size-lg);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.text-xl {
|
|
70
|
+
font-size: var(--sefin-font-size-xl);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.text-2xl {
|
|
74
|
+
font-size: var(--sefin-font-size-2xl);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.text-3xl {
|
|
78
|
+
font-size: var(--sefin-font-size-3xl);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.text-4xl {
|
|
82
|
+
font-size: var(--sefin-font-size-4xl);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.text-5xl {
|
|
86
|
+
font-size: var(--sefin-font-size-5xl);
|
|
87
|
+
}
|
|
88
|
+
|