ng-luna 0.1.5 → 0.2.1
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 +1 -1
- package/theme/_breakpoints.scss +153 -0
- package/theme/_fonts.scss +16 -0
- package/theme/_palette.scss +61 -0
- package/theme/_reset.scss +58 -0
- package/theme/_z-layers.scss +10 -0
package/package.json
CHANGED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
|
|
3
|
+
$breakpoints: (
|
|
4
|
+
xxs: 320px,
|
|
5
|
+
xs: 375px,
|
|
6
|
+
sm: 425px,
|
|
7
|
+
md: 768px,
|
|
8
|
+
lg: 1024px,
|
|
9
|
+
xl: 1440px
|
|
10
|
+
);
|
|
11
|
+
|
|
12
|
+
@function breakpoint-next($name)
|
|
13
|
+
{
|
|
14
|
+
$breakpoint-names: map-keys($breakpoints);
|
|
15
|
+
$n: index($breakpoint-names, $name);
|
|
16
|
+
@if not $n
|
|
17
|
+
{
|
|
18
|
+
$breakpoints-keys: map-keys($breakpoints);
|
|
19
|
+
@error "breakpoint `#{$name}` not found in any of the breakpoints: `#{$breakpoints-keys}`";
|
|
20
|
+
}
|
|
21
|
+
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@function breakpoint-min($name)
|
|
25
|
+
{
|
|
26
|
+
$min: map-get($breakpoints, $name);
|
|
27
|
+
@return if($min != 0, $min, null);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@function breakpoint-max($name)
|
|
31
|
+
{
|
|
32
|
+
$max: map-get($breakpoints, $name);
|
|
33
|
+
@return if($max and $max > 0, $max - .02, null);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin media-breakpoint-up($name)
|
|
37
|
+
{
|
|
38
|
+
$min: breakpoint-min($name);
|
|
39
|
+
@if $min
|
|
40
|
+
{
|
|
41
|
+
@media (min-width: $min)
|
|
42
|
+
{
|
|
43
|
+
@content;
|
|
44
|
+
}
|
|
45
|
+
} @else
|
|
46
|
+
{
|
|
47
|
+
@content;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@mixin media-breakpoint-down($name)
|
|
52
|
+
{
|
|
53
|
+
$max: breakpoint-max($name);
|
|
54
|
+
@if $max
|
|
55
|
+
{
|
|
56
|
+
@media (max-width: $max)
|
|
57
|
+
{
|
|
58
|
+
@content;
|
|
59
|
+
}
|
|
60
|
+
} @else
|
|
61
|
+
{
|
|
62
|
+
@content;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@mixin media-breakpoint-between($lower, $upper)
|
|
67
|
+
{
|
|
68
|
+
$min: breakpoint-min($lower);
|
|
69
|
+
$max: breakpoint-max($upper);
|
|
70
|
+
|
|
71
|
+
@if $min != null and $max != null
|
|
72
|
+
{
|
|
73
|
+
@media (min-width: $min) and (max-width: $max)
|
|
74
|
+
{
|
|
75
|
+
@content;
|
|
76
|
+
}
|
|
77
|
+
} @else if $max == null
|
|
78
|
+
{
|
|
79
|
+
@include media-breakpoint-up($lower)
|
|
80
|
+
{
|
|
81
|
+
@content;
|
|
82
|
+
}
|
|
83
|
+
} @else if $min == null
|
|
84
|
+
{
|
|
85
|
+
@include media-breakpoint-down($upper)
|
|
86
|
+
{
|
|
87
|
+
@content;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@mixin media-breakpoint-only($name)
|
|
93
|
+
{
|
|
94
|
+
$min: breakpoint-min($name);
|
|
95
|
+
$next: breakpoint-next($name);
|
|
96
|
+
$max: breakpoint-max($next);
|
|
97
|
+
|
|
98
|
+
@if $min != null and $max != null
|
|
99
|
+
{
|
|
100
|
+
@media (min-width: $min) and (max-width: $max)
|
|
101
|
+
{
|
|
102
|
+
@content;
|
|
103
|
+
}
|
|
104
|
+
} @else if $max == null
|
|
105
|
+
{
|
|
106
|
+
@include media-breakpoint-up($name)
|
|
107
|
+
{
|
|
108
|
+
@content;
|
|
109
|
+
}
|
|
110
|
+
} @else if $min == null
|
|
111
|
+
{
|
|
112
|
+
@include media-breakpoint-down($next)
|
|
113
|
+
{
|
|
114
|
+
@content;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@mixin responsive-value($property, $value)
|
|
120
|
+
{
|
|
121
|
+
// Ratio (100 / 1440) => 5 / 72
|
|
122
|
+
#{$property}: #{math.div($value * 5, 72)}vw;
|
|
123
|
+
|
|
124
|
+
@include media-breakpoint-only(xl)
|
|
125
|
+
{
|
|
126
|
+
// Value is designed for 1440px layout
|
|
127
|
+
#{$property}: #{$value}px;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@mixin lg-responsive-value($property, $value)
|
|
132
|
+
{
|
|
133
|
+
// Ratio (100 / 1024) => 25 / 256
|
|
134
|
+
#{$property}: #{math.div($value * 25, 256)}vw;
|
|
135
|
+
|
|
136
|
+
@include media-breakpoint-up(lg)
|
|
137
|
+
{
|
|
138
|
+
// Value is designed for 1024px layout
|
|
139
|
+
#{$property}: #{$value}px;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@mixin md-responsive-value($property, $value)
|
|
144
|
+
{
|
|
145
|
+
// Ratio (100 / 768) => 25 / 192
|
|
146
|
+
#{$property}: #{math.div($value * 25, 192)}vw;
|
|
147
|
+
|
|
148
|
+
@include media-breakpoint-up(md)
|
|
149
|
+
{
|
|
150
|
+
// Value is designed for 768px layout
|
|
151
|
+
#{$property}: #{$value}px;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// Override font-prefix to point to node_modules
|
|
2
|
+
// Path is relative from component SCSS files (e.g., src/controls/*/) to node_modules
|
|
3
|
+
// Components import this file, so paths resolve from component location
|
|
4
|
+
// Set without !default to ensure it overrides IBM Plex's !default values
|
|
5
|
+
$font-prefix: '../../../node_modules/@ibm/plex';
|
|
6
|
+
|
|
7
|
+
// Import all IBM Plex font families from npm
|
|
8
|
+
// Note: Using @use with @forward to maintain compatibility while avoiding deprecation warnings
|
|
9
|
+
@use '@ibm/plex/scss/mono';
|
|
10
|
+
@use '@ibm/plex/scss/sans';
|
|
11
|
+
@use '@ibm/plex/scss/serif';
|
|
12
|
+
|
|
13
|
+
// Define static SCSS variables for consistent usage
|
|
14
|
+
$font-mono: 'IBM Plex Mono', monospace;
|
|
15
|
+
$font-sans: 'IBM Plex Sans', sans-serif;
|
|
16
|
+
$font-serif: 'IBM Plex Serif', serif;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
$black: #000000;
|
|
2
|
+
$navy-darkest: #00138c;
|
|
3
|
+
$navy-darker: #0f1089;
|
|
4
|
+
$navy-dark: #001ea0;
|
|
5
|
+
$navy: #003c74;
|
|
6
|
+
$blue-royal: #0046d5;
|
|
7
|
+
$blue-bright-darkest: #003bda;
|
|
8
|
+
$blue-bright-darker: #003dd7;
|
|
9
|
+
$blue-bright-dark: #0050ee;
|
|
10
|
+
$blue-bright: #0053ee;
|
|
11
|
+
$blue-bright-medium: #0066ff;
|
|
12
|
+
$blue-bright-light: #005bff;
|
|
13
|
+
$blue-bright-lighter: #0831d9;
|
|
14
|
+
$blue-bright-lightest: #0855dd;
|
|
15
|
+
$blue-sky-dark: #0997ff;
|
|
16
|
+
$blue-sky: #166aee;
|
|
17
|
+
$blue-steel-dark: #1d5281;
|
|
18
|
+
$blue-steel: #7f9db9;
|
|
19
|
+
$blue-steel-light: #91a7b4;
|
|
20
|
+
$blue: #89ade4;
|
|
21
|
+
$blue-medium: #98b8ea;
|
|
22
|
+
$blue-light: #bcd4f6;
|
|
23
|
+
$blue-lightest: #cee7ff;
|
|
24
|
+
$blue-gray: #919b9c;
|
|
25
|
+
|
|
26
|
+
$green-darkest: #2ed330;
|
|
27
|
+
$green-dark: #42d845;
|
|
28
|
+
$green: #4cda50;
|
|
29
|
+
$green-light: #76e275;
|
|
30
|
+
$green-lighter: #7be47d;
|
|
31
|
+
$green-lightest: #8fe791;
|
|
32
|
+
$green-mint: #acedad;
|
|
33
|
+
|
|
34
|
+
$orange-dark: #e68b2c;
|
|
35
|
+
$orange: #e5a01a;
|
|
36
|
+
$gold: #f8b636;
|
|
37
|
+
$yellow-gold: #ffc73c;
|
|
38
|
+
$yellow-medium: #fbc761;
|
|
39
|
+
$yellow-light: #fdd889;
|
|
40
|
+
$yellow-cream: #fedf9c;
|
|
41
|
+
$cream-light: #fff0cf;
|
|
42
|
+
|
|
43
|
+
$gray-darkest: #686868;
|
|
44
|
+
$gray-dark: #9d9c99;
|
|
45
|
+
$gray-darker: #b0b0a7;
|
|
46
|
+
$gray-medium: #cdcac3;
|
|
47
|
+
$beige-tan: #cac8bb;
|
|
48
|
+
$beige-khaki: #d0d0bf;
|
|
49
|
+
$beige-medium: #d8d0c4;
|
|
50
|
+
$gray-light-warm: #dcdcd7;
|
|
51
|
+
$beige-pale: #e3e1d2;
|
|
52
|
+
$gray-light: #e3e3db;
|
|
53
|
+
$gray-lighter: #e5e5de;
|
|
54
|
+
$beige-lighter: #ecebe4;
|
|
55
|
+
$beige-light: #ecebe5;
|
|
56
|
+
$cream-pale: #f0f0ea;
|
|
57
|
+
$gray-lightest: #f2f2f1;
|
|
58
|
+
$cream: #f3f2ea;
|
|
59
|
+
$off-white-warm: #fafaf9;
|
|
60
|
+
$off-white: #fcfcfe;
|
|
61
|
+
$white: #ffffff;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
*
|
|
2
|
+
{
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
html, body, div, span, applet, object, iframe,
|
|
7
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
8
|
+
a, abbr, acronym, address, big, cite, code,
|
|
9
|
+
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
10
|
+
small, strike, strong, sub, sup, tt, var,
|
|
11
|
+
b, u, i, center,
|
|
12
|
+
dl, dt, dd, ol, ul, li,
|
|
13
|
+
fieldset, form, label, legend,
|
|
14
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
15
|
+
article, aside, canvas, details, embed,
|
|
16
|
+
figure, figcaption, footer, header, hgroup,
|
|
17
|
+
menu, nav, output, ruby, section, summary,
|
|
18
|
+
time, mark, audio, video
|
|
19
|
+
{
|
|
20
|
+
border: 0;
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
vertical-align: baseline;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// HTML5 display-role reset for older browsers
|
|
27
|
+
article, aside, details, figcaption, figure,
|
|
28
|
+
footer, header, hgroup, menu, nav, section
|
|
29
|
+
{
|
|
30
|
+
display: block;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
body
|
|
34
|
+
{
|
|
35
|
+
line-height: 1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
ol, ul
|
|
39
|
+
{
|
|
40
|
+
list-style: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
blockquote, q
|
|
44
|
+
{
|
|
45
|
+
quotes: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
blockquote:before, blockquote:after,
|
|
49
|
+
q:before, q:after
|
|
50
|
+
{
|
|
51
|
+
content: "";
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
table
|
|
55
|
+
{
|
|
56
|
+
border-collapse: collapse;
|
|
57
|
+
border-spacing: 0;
|
|
58
|
+
}
|