@sb1/ffe-grid 15.1.5 → 16.0.0

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/css/ffe-grid.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .ffe-grid__row {
2
2
  padding-right: var(--ffe-spacing-sm);
3
3
  padding-left: var(--ffe-spacing-sm);
4
+ color: var(--ffe-color-foreground-default);
4
5
  }
5
6
  .ffe-grid__row,
6
7
  .ffe-grid__row-wrapper {
@@ -532,125 +533,17 @@
532
533
  margin: var(--ffe-spacing-5xl) auto;
533
534
  }
534
535
  }
535
- .ffe-grid__row--bg-frost-30,
536
- .ffe-grid__row-wrapper--bg-frost-30 {
537
- background-color: var(--ffe-farge-frost-30);
536
+ .ffe-grid__row--bg-primary,
537
+ .ffe-grid__row-wrapper--bg-primary {
538
+ background-color: var(--ffe-color-surface-primary-default);
538
539
  }
539
- @media (prefers-color-scheme: dark) {
540
- .regard-color-scheme-preference .ffe-grid__row--bg-frost-30,
541
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-frost-30 {
542
- background-color: var(--ffe-farge-svart);
543
- }
544
- }
545
- .ffe-grid__row--bg-sand,
546
- .ffe-grid__row-wrapper--bg-sand {
547
- background-color: var(--ffe-farge-sand);
548
- }
549
- @media (prefers-color-scheme: dark) {
550
- .regard-color-scheme-preference .ffe-grid__row--bg-sand,
551
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-sand {
552
- background-color: var(--ffe-farge-svart);
553
- }
554
- }
555
- .ffe-grid__row--bg-sand-70,
556
- .ffe-grid__row-wrapper--bg-sand-70 {
557
- background-color: var(--ffe-farge-sand-70);
558
- }
559
- @media (prefers-color-scheme: dark) {
560
- .regard-color-scheme-preference .ffe-grid__row--bg-sand-70,
561
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-sand-70 {
562
- background-color: var(--ffe-farge-svart);
563
- }
564
- }
565
- .ffe-grid__row--bg-sand-30,
566
- .ffe-grid__row-wrapper--bg-sand-30 {
567
- background-color: var(--ffe-farge-sand-30);
568
- }
569
- @media (prefers-color-scheme: dark) {
570
- .regard-color-scheme-preference .ffe-grid__row--bg-sand-30,
571
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-sand-30 {
572
- background-color: var(--ffe-farge-svart);
573
- }
574
- }
575
- .ffe-grid__row--bg-syrin-70,
576
- .ffe-grid__row-wrapper--bg-syrin-70 {
577
- background-color: var(--ffe-farge-syrin-70);
578
- }
579
- @media (prefers-color-scheme: dark) {
580
- .regard-color-scheme-preference .ffe-grid__row--bg-syrin-70,
581
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-syrin-70 {
582
- background-color: var(--ffe-farge-svart);
583
- }
584
- }
585
- .ffe-grid__row--bg-syrin-30,
586
- .ffe-grid__row-wrapper--bg-syrin-30 {
587
- background-color: var(--ffe-farge-syrin-30);
588
- }
589
- @media (prefers-color-scheme: dark) {
590
- .regard-color-scheme-preference .ffe-grid__row--bg-syrin-30,
591
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-syrin-30 {
592
- background-color: var(--ffe-farge-svart);
593
- }
594
- }
595
- .ffe-grid__row--bg-vann,
596
- .ffe-grid__row-wrapper--bg-vann {
597
- background-color: var(--ffe-farge-vann);
598
- color: var(--ffe-farge-hvit);
540
+ .ffe-grid__row--bg-secondary,
541
+ .ffe-grid__row-wrapper--bg-secondary {
542
+ background-color: var(--ffe-color-surface-secondary-default);
599
543
  }
600
- @media (prefers-color-scheme: dark) {
601
- .regard-color-scheme-preference .ffe-grid__row--bg-vann,
602
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-vann {
603
- background-color: var(--ffe-farge-svart);
604
- }
605
- }
606
- .ffe-grid__row--bg-vann-30,
607
- .ffe-grid__row-wrapper--bg-vann-30 {
608
- background-color: var(--ffe-farge-vann-30);
609
- }
610
- @media (prefers-color-scheme: dark) {
611
- .regard-color-scheme-preference .ffe-grid__row--bg-vann-30,
612
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-vann-30 {
613
- background-color: var(--ffe-farge-svart);
614
- }
615
- }
616
- .ffe-grid__row--bg-fjell,
617
- .ffe-grid__row-wrapper--bg-fjell {
618
- background-color: var(--ffe-farge-fjell);
619
- color: var(--ffe-farge-hvit);
620
- }
621
- @media (prefers-color-scheme: dark) {
622
- .regard-color-scheme-preference .ffe-grid__row--bg-fjell,
623
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-fjell {
624
- background-color: var(--ffe-farge-svart);
625
- }
626
- }
627
- .ffe-grid__row--bg-hvit,
628
- .ffe-grid__row-wrapper--bg-hvit {
629
- background-color: var(--ffe-farge-hvit);
630
- }
631
- @media (prefers-color-scheme: dark) {
632
- .regard-color-scheme-preference .ffe-grid__row--bg-hvit,
633
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-hvit {
634
- background-color: var(--ffe-farge-svart);
635
- }
636
- }
637
- @media (prefers-color-scheme: dark) {
638
- .regard-color-scheme-preference .ffe-grid__row--bg-dark-svart,
639
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-dark-svart {
640
- background-color: var(--ffe-farge-svart);
641
- }
642
- }
643
- @media (prefers-color-scheme: dark) {
644
- .regard-color-scheme-preference .ffe-grid__row--bg-dark-natt,
645
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-dark-natt {
646
- background-color: var(--ffe-farge-natt);
647
- }
648
- }
649
- @media (prefers-color-scheme: dark) {
650
- .regard-color-scheme-preference .ffe-grid__row--bg-dark-koksgraa,
651
- .regard-color-scheme-preference .ffe-grid__row-wrapper--bg-dark-koksgraa {
652
- background-color: var(--ffe-farge-koksgraa);
653
- }
544
+ .ffe-grid__row--bg-tertiary,
545
+ .ffe-grid__row-wrapper--bg-tertiary {
546
+ background-color: var(--ffe-color-surface-tertiary-default);
654
547
  }
655
548
  [class*='ffe-grid__row--bg-'] {
656
549
  display: block;
@@ -659,102 +552,14 @@
659
552
  .ffe-grid__col {
660
553
  grid-column: auto / span 12;
661
554
  }
662
- .ffe-grid__col--bg-frost-30 {
663
- background-color: var(--ffe-farge-frost-30);
555
+ .ffe-grid__col--bg-primary {
556
+ background-color: var(--ffe-color-surface-primary-default);
664
557
  }
665
- @media (prefers-color-scheme: dark) {
666
- .regard-color-scheme-preference .ffe-grid__col--bg-frost-30 {
667
- background-color: var(--ffe-farge-svart);
668
- }
669
- }
670
- .ffe-grid__col--bg-sand {
671
- background-color: var(--ffe-farge-sand);
672
- }
673
- @media (prefers-color-scheme: dark) {
674
- .regard-color-scheme-preference .ffe-grid__col--bg-sand {
675
- background-color: var(--ffe-farge-svart);
676
- }
677
- }
678
- .ffe-grid__col--bg-sand-70 {
679
- background-color: var(--ffe-farge-sand-70);
680
- }
681
- @media (prefers-color-scheme: dark) {
682
- .regard-color-scheme-preference .ffe-grid__col--bg-sand-70 {
683
- background-color: var(--ffe-farge-svart);
684
- }
685
- }
686
- .ffe-grid__col--bg-sand-30 {
687
- background-color: var(--ffe-farge-sand-30);
688
- }
689
- @media (prefers-color-scheme: dark) {
690
- .regard-color-scheme-preference .ffe-grid__col--bg-sand-30 {
691
- background-color: var(--ffe-farge-svart);
692
- }
693
- }
694
- .ffe-grid__col--bg-syrin-70 {
695
- background-color: var(--ffe-farge-syrin-70);
696
- }
697
- @media (prefers-color-scheme: dark) {
698
- .regard-color-scheme-preference .ffe-grid__col--bg-syrin-70 {
699
- background-color: var(--ffe-farge-svart);
700
- }
701
- }
702
- .ffe-grid__col--bg-syrin-30 {
703
- background-color: var(--ffe-farge-syrin-30);
704
- }
705
- @media (prefers-color-scheme: dark) {
706
- .regard-color-scheme-preference .ffe-grid__col--bg-syrin-30 {
707
- background-color: var(--ffe-farge-svart);
708
- }
709
- }
710
- .ffe-grid__col--bg-vann {
711
- background-color: var(--ffe-farge-vann);
712
- color: var(--ffe-farge-hvit);
558
+ .ffe-grid__col--bg-secondary {
559
+ background-color: var(--ffe-color-surface-secondary-default);
713
560
  }
714
- @media (prefers-color-scheme: dark) {
715
- .regard-color-scheme-preference .ffe-grid__col--bg-vann {
716
- background-color: var(--ffe-farge-svart);
717
- }
718
- }
719
- .ffe-grid__col--bg-vann-30 {
720
- background-color: var(--ffe-farge-vann-30);
721
- }
722
- @media (prefers-color-scheme: dark) {
723
- .regard-color-scheme-preference .ffe-grid__col--bg-vann-30 {
724
- background-color: var(--ffe-farge-svart);
725
- }
726
- }
727
- .ffe-grid__col--bg-fjell {
728
- background-color: var(--ffe-farge-fjell);
729
- color: var(--ffe-farge-hvit);
730
- }
731
- @media (prefers-color-scheme: dark) {
732
- .regard-color-scheme-preference .ffe-grid__col--bg-fjell {
733
- background-color: var(--ffe-farge-svart);
734
- }
735
- }
736
- .ffe-grid__col--bg-hvit {
737
- background-color: var(--ffe-farge-hvit);
738
- }
739
- @media (prefers-color-scheme: dark) {
740
- .regard-color-scheme-preference .ffe-grid__col--bg-hvit {
741
- background-color: var(--ffe-farge-svart);
742
- }
743
- }
744
- @media (prefers-color-scheme: dark) {
745
- .regard-color-scheme-preference .ffe-grid__col--bg-dark-svart {
746
- background-color: var(--ffe-farge-svart);
747
- }
748
- }
749
- @media (prefers-color-scheme: dark) {
750
- .regard-color-scheme-preference .ffe-grid__col--bg-dark-natt {
751
- background-color: var(--ffe-farge-natt);
752
- }
753
- }
754
- @media (prefers-color-scheme: dark) {
755
- .regard-color-scheme-preference .ffe-grid__col--bg-dark-koksgraa {
756
- background-color: var(--ffe-farge-koksgraa);
757
- }
561
+ .ffe-grid__col--bg-tertiary {
562
+ background-color: var(--ffe-color-surface-tertiary-default);
758
563
  }
759
564
  .ffe-grid__col--center-text {
760
565
  text-align: center;
@@ -25,6 +25,7 @@
25
25
  .ffe-grid__row {
26
26
  padding-right: var(--ffe-spacing-sm);
27
27
  padding-left: var(--ffe-spacing-sm);
28
+ color: var(--ffe-color-foreground-default);
28
29
  }
29
30
 
30
31
  .ffe-grid__row,
@@ -557,117 +558,16 @@
557
558
  }
558
559
  }
559
560
 
560
- &--bg-frost-30 {
561
- background-color: var(--ffe-farge-frost-30);
562
- .regard-color-scheme-preference & {
563
- @media (prefers-color-scheme: dark) {
564
- background-color: var(--ffe-farge-svart);
565
- }
566
- }
567
- }
568
-
569
- &--bg-sand {
570
- background-color: var(--ffe-farge-sand);
571
- .regard-color-scheme-preference & {
572
- @media (prefers-color-scheme: dark) {
573
- background-color: var(--ffe-farge-svart);
574
- }
575
- }
576
- }
577
-
578
- &--bg-sand-70 {
579
- background-color: var(--ffe-farge-sand-70);
580
- .regard-color-scheme-preference & {
581
- @media (prefers-color-scheme: dark) {
582
- background-color: var(--ffe-farge-svart);
583
- }
584
- }
585
- }
586
-
587
- &--bg-sand-30 {
588
- background-color: var(--ffe-farge-sand-30);
589
- .regard-color-scheme-preference & {
590
- @media (prefers-color-scheme: dark) {
591
- background-color: var(--ffe-farge-svart);
592
- }
593
- }
594
- }
595
- &--bg-syrin-70 {
596
- background-color: var(--ffe-farge-syrin-70);
597
- .regard-color-scheme-preference & {
598
- @media (prefers-color-scheme: dark) {
599
- background-color: var(--ffe-farge-svart);
600
- }
601
- }
602
- }
603
- &--bg-syrin-30 {
604
- background-color: var(--ffe-farge-syrin-30);
605
- .regard-color-scheme-preference & {
606
- @media (prefers-color-scheme: dark) {
607
- background-color: var(--ffe-farge-svart);
608
- }
609
- }
610
- }
611
-
612
- &--bg-vann {
613
- background-color: var(--ffe-farge-vann);
614
- color: var(--ffe-farge-hvit);
615
- .regard-color-scheme-preference & {
616
- @media (prefers-color-scheme: dark) {
617
- background-color: var(--ffe-farge-svart);
618
- }
619
- }
620
- }
621
- &--bg-vann-30 {
622
- background-color: var(--ffe-farge-vann-30);
623
- .regard-color-scheme-preference & {
624
- @media (prefers-color-scheme: dark) {
625
- background-color: var(--ffe-farge-svart);
626
- }
627
- }
561
+ &--bg-primary {
562
+ background-color: var(--ffe-color-surface-primary-default);
628
563
  }
629
564
 
630
- &--bg-fjell {
631
- background-color: var(--ffe-farge-fjell);
632
- color: var(--ffe-farge-hvit);
633
- .regard-color-scheme-preference & {
634
- @media (prefers-color-scheme: dark) {
635
- background-color: var(--ffe-farge-svart);
636
- }
637
- }
638
- }
639
-
640
- &--bg-hvit {
641
- background-color: var(--ffe-farge-hvit);
642
- .regard-color-scheme-preference & {
643
- @media (prefers-color-scheme: dark) {
644
- background-color: var(--ffe-farge-svart);
645
- }
646
- }
565
+ &--bg-secondary {
566
+ background-color: var(--ffe-color-surface-secondary-default);
647
567
  }
648
568
 
649
- &--bg-dark-svart {
650
- .regard-color-scheme-preference & {
651
- @media (prefers-color-scheme: dark) {
652
- background-color: var(--ffe-farge-svart);
653
- }
654
- }
655
- }
656
-
657
- &--bg-dark-natt {
658
- .regard-color-scheme-preference & {
659
- @media (prefers-color-scheme: dark) {
660
- background-color: var(--ffe-farge-natt);
661
- }
662
- }
663
- }
664
-
665
- &--bg-dark-koksgraa {
666
- .regard-color-scheme-preference & {
667
- @media (prefers-color-scheme: dark) {
668
- background-color: var(--ffe-farge-koksgraa);
669
- }
670
- }
569
+ &--bg-tertiary {
570
+ background-color: var(--ffe-color-surface-tertiary-default);
671
571
  }
672
572
  }
673
573
 
@@ -679,116 +579,16 @@
679
579
  .ffe-grid__col {
680
580
  grid-column: auto e('/') span 12;
681
581
 
682
- &--bg-frost-30 {
683
- background-color: var(--ffe-farge-frost-30);
684
- .regard-color-scheme-preference & {
685
- @media (prefers-color-scheme: dark) {
686
- background-color: var(--ffe-farge-svart);
687
- }
688
- }
689
- }
690
-
691
- &--bg-sand {
692
- background-color: var(--ffe-farge-sand);
693
- .regard-color-scheme-preference & {
694
- @media (prefers-color-scheme: dark) {
695
- background-color: var(--ffe-farge-svart);
696
- }
697
- }
582
+ &--bg-primary {
583
+ background-color: var(--ffe-color-surface-primary-default);
698
584
  }
699
585
 
700
- &--bg-sand-70 {
701
- background-color: var(--ffe-farge-sand-70);
702
- .regard-color-scheme-preference & {
703
- @media (prefers-color-scheme: dark) {
704
- background-color: var(--ffe-farge-svart);
705
- }
706
- }
586
+ &--bg-secondary {
587
+ background-color: var(--ffe-color-surface-secondary-default);
707
588
  }
708
589
 
709
- &--bg-sand-30 {
710
- background-color: var(--ffe-farge-sand-30);
711
- .regard-color-scheme-preference & {
712
- @media (prefers-color-scheme: dark) {
713
- background-color: var(--ffe-farge-svart);
714
- }
715
- }
716
- }
717
- &--bg-syrin-70 {
718
- background-color: var(--ffe-farge-syrin-70);
719
- .regard-color-scheme-preference & {
720
- @media (prefers-color-scheme: dark) {
721
- background-color: var(--ffe-farge-svart);
722
- }
723
- }
724
- }
725
- &--bg-syrin-30 {
726
- background-color: var(--ffe-farge-syrin-30);
727
- .regard-color-scheme-preference & {
728
- @media (prefers-color-scheme: dark) {
729
- background-color: var(--ffe-farge-svart);
730
- }
731
- }
732
- }
733
-
734
- &--bg-vann {
735
- background-color: var(--ffe-farge-vann);
736
- color: var(--ffe-farge-hvit);
737
- .regard-color-scheme-preference & {
738
- @media (prefers-color-scheme: dark) {
739
- background-color: var(--ffe-farge-svart);
740
- }
741
- }
742
- }
743
- &--bg-vann-30 {
744
- background-color: var(--ffe-farge-vann-30);
745
- .regard-color-scheme-preference & {
746
- @media (prefers-color-scheme: dark) {
747
- background-color: var(--ffe-farge-svart);
748
- }
749
- }
750
- }
751
- &--bg-fjell {
752
- background-color: var(--ffe-farge-fjell);
753
- color: var(--ffe-farge-hvit);
754
- .regard-color-scheme-preference & {
755
- @media (prefers-color-scheme: dark) {
756
- background-color: var(--ffe-farge-svart);
757
- }
758
- }
759
- }
760
-
761
- &--bg-hvit {
762
- background-color: var(--ffe-farge-hvit);
763
- .regard-color-scheme-preference & {
764
- @media (prefers-color-scheme: dark) {
765
- background-color: var(--ffe-farge-svart);
766
- }
767
- }
768
- }
769
-
770
- &--bg-dark-svart {
771
- .regard-color-scheme-preference & {
772
- @media (prefers-color-scheme: dark) {
773
- background-color: var(--ffe-farge-svart);
774
- }
775
- }
776
- }
777
-
778
- &--bg-dark-natt {
779
- .regard-color-scheme-preference & {
780
- @media (prefers-color-scheme: dark) {
781
- background-color: var(--ffe-farge-natt);
782
- }
783
- }
784
- }
785
-
786
- &--bg-dark-koksgraa {
787
- .regard-color-scheme-preference & {
788
- @media (prefers-color-scheme: dark) {
789
- background-color: var(--ffe-farge-koksgraa);
790
- }
791
- }
590
+ &--bg-tertiary {
591
+ background-color: var(--ffe-color-surface-tertiary-default);
792
592
  }
793
593
 
794
594
  &--center-text {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-grid",
3
- "version": "15.1.5",
3
+ "version": "16.0.0",
4
4
  "description": "A grid component for use within the FFE framework",
5
5
  "keywords": [
6
6
  "ffe"
@@ -21,13 +21,13 @@
21
21
  "build": "lessc less/ffe-grid.less css/ffe-grid.css --autoprefix"
22
22
  },
23
23
  "dependencies": {
24
- "@sb1/ffe-core": "^29.5.2"
24
+ "@sb1/ffe-core": "^30.0.0"
25
25
  },
26
26
  "devDependencies": {
27
- "@sb1/ffe-buildtool": "^0.9.2"
27
+ "@sb1/ffe-buildtool": "^0.10.0"
28
28
  },
29
29
  "publishConfig": {
30
30
  "access": "public"
31
31
  },
32
- "gitHead": "dc81c750740fef9a1e01725f2ade086c11d81d30"
32
+ "gitHead": "5a72f08b0873cc96b0d439dd029839db4d5d4ea9"
33
33
  }